/*
 * site.css — shared design system for the Folkbase static marketing & docs pages.
 *
 * SINGLE SOURCE OF TRUTH for the look of index / about / contact / privacy /
 * terms / thanks. Each page links this file (<link rel="stylesheet" href="/site.css">)
 * instead of carrying its own <style> block, so the pages can never visually drift
 * apart again. scripts/copy-static-pages.js copies it to public/site.css at build.
 *
 * Design language: "editorial warm-minimal" — cream paper, generous whitespace,
 * oversized Source Serif 4 headlines, restrained Redwood accents. Icons are inline
 * Phosphor SVGs in the markup (no CDN icon font) so everything is CSP-safe under
 * the deployed Content-Security-Policy (script-src 'self'; no jsdelivr).
 *
 * Palette mirrors the app's default "Redwood" theme (see CLAUDE.md design system).
 */

/* ---- tokens ---------------------------------------------------------------- */
:root{
  /* "Kept Record" — ACTION color matches the in-app Redwood brand exactly so
     marketing and app read as one product (#C4603A primary, #88462C filled-
     hover — sources: src/theme/palettes.js redwood scale). STRUCTURE stays the
     forest "kept/yours" green (--accent, itself the app's Redwood accent);
     manila paper + ink-green cover carry the page. The warm ramp (mid/light)
     also tracks Redwood. Variable NAMES are unchanged so all pages inherit. */
  --brand:#C4603A;        /* app Redwood primary — buttons / links / highlights */
  --brand-dk:#88462C;     /* app Redwood filled-hover — hover / pressed */
  --mid:#E8956D;          /* app Redwood mid (peach accents on the dark cover) */
  --light:#F7DDD0;        /* app Redwood light — tint surface */
  --accent:#2E5E40;       /* forest "kept / yours" accent */
  --accent-dk:#214631;
  --dark:#1C2B20;         /* cover / deep ink-green */

  --paper:#FBF7EF;        /* raised paper (cards) */
  --surface:#F2ECE0;      /* page background — archival manila */
  --surface-2:#ECE3D4;    /* alt section band */
  --ink:#20251F;          /* ledger ink — text + structure */
  --muted:#6F6357;        /* secondary text — WCAG AA (~4.7:1 on --surface) */
  --line:#E2D8C8;         /* hairline borders */
  --line-2:#D6C9B6;
  --warm-1:#F7EFE4;       /* warm band gradient — top (calmed toward paper) */
  --warm-2:#F0E5D6;       /* warm band gradient — bottom */
  --warm-line:#E2D2BD;    /* warm band border */

  --maxw:1080px;
  --maxw-narrow:720px;
  --radius:8px;        /* Mantine md — matches the in-app gallery */
  --radius-sm:4px;     /* Mantine sm — inputs, badges, pills */
  --shadow:0 24px 60px -34px rgba(28,43,32,.42);
  --shadow-sm:0 12px 30px -20px rgba(28,43,32,.35);
  --display:'Newsreader',Georgia,serif;  /* editorial display — headings */
  --serif:'Source Serif 4',Georgia,serif; /* FOLKBASE wordmark lockup only */
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace; /* the record's data voice */
}

/* ---- base ------------------------------------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--surface);overscroll-behavior:none;}
body{
  margin:0;background:var(--surface);color:var(--ink);overscroll-behavior:none;
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:-.015em;line-height:1.12;}
p{margin:0;}
a{color:var(--brand);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--brand-dk);}
img,svg{display:block;}
.ic{display:inline-block;vertical-align:middle;flex-shrink:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wrap.narrow{max-width:var(--maxw-narrow);}
.center{text-align:center;}

/* ---- buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--brand);color:#fff;font-family:var(--sans);font-weight:600;
  font-size:15px;line-height:1;padding:13px 24px;border-radius:var(--radius);
  border:1.5px solid var(--brand);cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease;
}
.btn:hover{background:var(--brand-dk);border-color:var(--brand-dk);color:#fff;}
.btn .ic{color:#fff;}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:var(--radius);}
.btn-lg{padding:15px 30px;font-size:16px;}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--line-2);}
.btn-outline:hover{background:var(--light);color:var(--brand-dk);border-color:var(--brand);}
.btn-outline .ic{color:var(--brand);}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent;}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);box-shadow:none;transform:none;}

/* link with trailing arrow */
.arrowlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--brand);}
.arrowlink:hover{gap:9px;}
.arrowlink .ic{transition:transform .15s ease;}

/* ---- top bar --------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(242,236,224,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:var(--maxw);margin:0 auto;padding:14px 24px;}
/* Canonical wordmark — matches the in-app FolkbaseWordmark: all-caps FOLKBASE in
   Source Serif 4, weight 700, dark ink, wide tracking. (text-transform keeps the
   HTML text "Folkbase" while rendering it uppercase.) */
.brandmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;font-size:22px;color:var(--dark);text-transform:uppercase;letter-spacing:.2em;}
.brandmark:hover{color:var(--brand-dk);}
/* Mark = masked silhouette filled with the brand→accent gradient (the single gradient in the lockup). */
.brandmark .mark{width:23px;height:32px;-webkit-mask:url(/brand-mark.svg) center/contain no-repeat;mask:url(/brand-mark.svg) center/contain no-repeat;background:linear-gradient(180deg,var(--brand) 0%,var(--accent) 100%);}
/* Wordmark is solid dark ink; the mark carries the gradient so only one gradient is on screen. */
.topbar .brandmark:hover{opacity:.85;}
/* Topbar wordmark is sized to match the in-app landing's FolkbaseWordmark (size 30):
   17px text + ~30px mark. Scoped to .topbar so the larger footer brandmark is untouched. */
.topbar .brandmark{font-size:17px;}
.topbar .brandmark .mark{width:21px;height:30px;}
.topbar nav{display:flex;align-items:center;gap:20px;}
.topbar nav .navlinks{display:flex;gap:20px;}
.topbar nav .navlinks a{color:#6F6357;font-weight:500;font-size:14px;}
.topbar nav .navlinks a:hover{color:var(--brand);}
/* current page gets a redwood label + a short underline so visitors know where they are */
.topbar nav .navlinks a[aria-current="page"]{color:var(--brand-dk);font-weight:600;}
.topbar nav .navlinks a[aria-current="page"]::after{content:"";display:block;height:2px;border-radius:2px;background:var(--brand);margin-top:3px;}
@media(max-width:760px){.topbar nav .navlinks{display:none;}}

/* mobile disclosure menu — CSP-safe <details>, no JS. Hidden on desktop. */
.navmenu{display:none;}
.navmenu>summary{list-style:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);}
.navmenu>summary::-webkit-details-marker{display:none;}
.navmenu .bars,.navmenu .bars::before,.navmenu .bars::after{content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;}
.navmenu .bars{position:relative;}
.navmenu .bars::before{position:absolute;top:-6px;left:0;}
.navmenu .bars::after{position:absolute;top:6px;left:0;}
.navpanel{position:absolute;right:24px;top:60px;display:flex;flex-direction:column;min-width:184px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:8px;z-index:40;}
.navpanel a{padding:10px 12px;border-radius:8px;color:var(--ink);font-weight:500;font-size:14.5px;}
.navpanel a:hover{background:var(--surface-2);color:var(--brand);}
.navpanel a[aria-current="page"]{color:var(--brand-dk);font-weight:600;}
@media(max-width:760px){.navmenu{display:block;}}
/* keep the header CTA on one line and tight next to the hamburger on small screens */
@media(max-width:760px){.topbar nav{gap:12px;}.topbar nav>.btn{padding:9px 14px;font-size:13.5px;}}

/* ---- sections -------------------------------------------------------------- */
/* Section rhythm matches the React LandingPage (64px bands, 13px/1.5 kicker,
   clamp(26,4,36) headings) so the static pages and the landing read as one site. */
.section{padding:64px 0;}
.section.tight{padding:56px 0;}
.section.band{background:var(--surface-2);}

/* card grid (used by values / docs) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .15s ease,box-shadow .15s ease;}
.card .ico{width:44px;height:44px;border-radius:var(--radius);background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:14px;}
.card h3{font-size:18px;margin-bottom:6px;}
.card p{font-size:14.5px;color:var(--muted);line-height:1.6;}
a.card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);}

/* ---- pills (used by the QA component-map inventory) ----------------------- */
.pill{background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500;padding:9px 15px;border-radius:24px;display:inline-flex;align-items:center;gap:8px;}
.pill .ic{color:var(--brand);}

/* status/priority badges — mirrors the in-app gallery (Mantine variant=light).
   Map: Active→green, Pending→yellow, Urgent→red, High→orange, Low→blue, None→gray. */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:var(--radius-sm);letter-spacing:.01em;}
.badge-green{background:rgba(47,158,68,.12);color:#2b8a3e;}
.badge-red{background:rgba(240,62,62,.12);color:#c92a2a;}
.badge-orange{background:rgba(253,126,20,.13);color:#d9480f;}
.badge-yellow{background:rgba(250,176,5,.16);color:#9c6f02;}
.badge-blue{background:rgba(34,139,230,.12);color:#1971c2;}
.badge-gray{background:rgba(134,142,150,.15);color:#5c636b;}


/* ---- doc list -------------------------------------------------------------- */
.doclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:14px;}
.doc{position:relative;z-index:0;display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 22px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.doc::before{content:"";position:absolute;inset:-8%;z-index:-1;border-radius:12px;background:radial-gradient(closest-side,rgba(232,149,109,.34),rgba(247,221,208,.16) 55%,rgba(250,246,242,0) 80%);filter:blur(22px);opacity:0;transform:scale(.92);transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
.doc:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.doc:hover::before{opacity:1;transform:scale(1.2);}
.doc .ico{width:36px;height:36px;border-radius:var(--radius);background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:12px;}
.doc h3{font-size:15.5px;color:var(--dark);margin-bottom:4px;}
.doc p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;}
.helpcta{text-align:center;margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---- final CTA ------------------------------------------------------------- */
.final{text-align:center;background:var(--light);border-radius:16px;padding:60px 32px;max-width:880px;margin:0 auto;}
.final h2{font-size:clamp(26px,4vw,34px);margin-bottom:14px;}
.final p{color:var(--ink);max-width:52ch;margin:0 auto 26px;font-size:16.5px;}

/* ---- prose (about body + legal pages) ------------------------------------- */
.prose{padding:8px 0 40px;counter-reset:legal;}
/* "last updated" set in the record's data voice (mono, tabular figures) */
.prose .updated{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--muted);margin:0 0 30px;}
.prose section{margin-bottom:30px;}
.prose section[id]{scroll-margin-top:84px;counter-increment:legal;} /* clears the sticky topbar on anchor jumps */
/* numbered mono-green eyebrow — legal docs are genuinely sequential, so the
   ledger number is earned here (matches .entry .no on the record pages). */
.prose section[id]::before{content:counter(legal,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;font-weight:500;color:var(--accent-dk);margin-bottom:8px;}

/* in-page table of contents for long legal pages */
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 32px;}
.toc h2{font-family:var(--sans);font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-dk);margin:0 0 12px;border:none;padding:0;}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px;}
.toc li{margin-bottom:8px;font-size:14.5px;break-inside:avoid;}
.toc a{color:var(--ink);font-weight:500;}
.toc a:hover{color:var(--brand);}
@media(max-width:560px){.toc ol{columns:1;}}
.prose h2{font-size:22px;margin-bottom:11px;}
.prose .ruled h2,.prose h2.ruled{border-bottom:1px solid var(--line-2);padding-bottom:7px;}
.prose h3{font-size:17px;margin:18px 0 6px;}
.prose p{font-size:16px;color:var(--ink);}
.prose p + p{margin-top:13px;}
.prose .lead{font-size:18px;}
.prose ul{padding-left:22px;margin:10px 0;}
.prose li{margin-bottom:7px;font-size:16px;}
.prose code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13.5px;background:var(--surface-2);padding:1px 6px;border-radius:5px;}
.tip{background:#E7F0EA;border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:13px 16px;margin:16px 0;font-size:14.5px;color:var(--ink);}
.tip b{color:var(--accent);}
.tip.small{font-size:13px;}
/* legal fine-print line (terms) */
.prose .finehint{font-size:13px;color:var(--muted);margin-top:14px;}
/* Privacy/Terms margin rail — echoes About's ledger spine, desktop only.
   Reuses the existing counter(legal) numbers, just repositions them onto a rail. */
@media(min-width:760px){
  .prose .wrap.narrow{padding-left:56px;}
  .prose section[id]{position:relative;}
  .prose section[id]::before{position:absolute;left:-56px;width:36px;text-align:right;margin-bottom:0;top:1px;}
  .prose section[id]::after{content:"";position:absolute;top:2px;bottom:-30px;left:-30px;width:1.5px;background:var(--accent);opacity:.35;}
  .prose section[id]:last-of-type::after{bottom:0;}
}
.signature{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;}
.signature b{color:var(--ink);}
.callout{background:linear-gradient(180deg,var(--warm-1),var(--warm-2));border:1px solid var(--warm-line);border-radius:12px;padding:34px;margin-top:40px;text-align:center;}
.callout h2{font-size:24px;margin-bottom:10px;border:none;padding:0;}
.callout p{max-width:52ch;margin:0 auto 20px;color:var(--ink);}
.ea-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.ea-form input[type=email]{flex:1 1 220px;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;}
.ea-form input[type=email]:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(187,90,54,.14);}

/* ---- contact: the Correspondence record ------------------------------------
   Contact carries the "Kept Record" voice. A single mono section tag opens it
   (the rail device from .record would fight a two-column form, so the eyebrow
   carries the voice instead). The form is set as a ledger card — mono field
   labels and ruled-underline inputs, so filling it reads like writing a line
   into the record rather than completing a generic web form. The aside is a
   signed desk note that rhymes with About's .founder (same accent edge + the
   italic "— Elliott" signature), making the two pages a matched pair.
   Every class below is used only by contact.html. */
.corr-wrap{max-width:920px;margin:0 auto;padding:0 24px;}
.corr .tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 22px;}
.cols{display:grid;grid-template-columns:1.25fr .85fr;gap:30px;align-items:start;}
.corr .cols{max-width:none;margin:0;}
@media(max-width:720px){.cols{grid-template-columns:1fr;}}

/* the form, set as a record card */
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;}
.formcard h2{font-size:22px;margin-bottom:6px;}
.formcard .sub{color:var(--muted);font-size:14px;margin:0 0 24px;}
.formcard button[type="submit"]{margin-top:28px;}
.field{margin-top:22px;}
/* mono ledger labels — the record's data voice */
.field label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:7px;}
/* single-line fields: a ruled line you write on, not a boxed input */
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:transparent;border:none;border-bottom:1.5px solid var(--line-2);border-radius:0;padding:7px 2px;outline:none;transition:border-color .15s ease,background .15s ease;}
.field input:focus,.field textarea:focus{border-bottom-color:var(--brand);background:rgba(196,96,58,.05);}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.6;}
/* the message is a writing block — keep it a soft-ruled card so it reads as paper */
.field textarea{min-height:120px;resize:vertical;line-height:1.6;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 13px;}
.field textarea:focus{border-color:var(--brand);background:#fff;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* aside — the signed desk note + direct lines, rhyming with About's .founder */
.sidecard{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:26px 28px;box-shadow:0 14px 34px -26px rgba(28,43,32,.45);}
.desknote .lead{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.3;color:var(--ink);margin:0 0 10px;}
.desknote p{font-size:15px;line-height:1.6;color:var(--ink);margin:0;}
.desknote .sign{font-family:var(--display);font-style:italic;font-size:17px;color:var(--accent-dk);margin-top:16px;}
.lines-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dk);margin:26px 0 2px;padding-top:22px;border-top:1px solid var(--line);}
.contact-row{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row .ico{width:36px;height:36px;border-radius:var(--radius);background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--brand);flex-shrink:0;}
.contact-row .label{font-size:12.5px;color:var(--muted);margin:0 0 2px;}
.contact-row .value{font-size:14px;color:var(--ink);}
.contact-row a{font-weight:600;}

/* ---- centered notice (thanks page) ---------------------------------------- */
.notice-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.notice{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:48px 40px;max-width:480px;margin:0 auto;text-align:center;box-shadow:var(--shadow);}
.notice .check{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.notice h1{font-size:28px;margin:0 0 10px;}
.notice p{margin:0 0 24px;color:var(--muted);font-size:16px;}

/* ---- footer ---------------------------------------------------------------- */
/* warm "sand" footer — matches the React LandingPage footer (no dark band) */
/* --footer-text: darker than --muted for comfortable AA (~6:1) on the #F4E9E1 sand */
.site-footer{background:#F4E9E1;color:#5E5147;padding:54px 24px 34px;margin-top:84px;border-top:1px solid var(--line);}
.site-footer .fwrap{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;}
.site-footer .tagline{max-width:260px;font-size:14px;color:#5E5147;line-height:1.6;margin-top:10px;}
.site-footer .fcol h4{font-family:var(--sans);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin:0 0 12px;font-weight:600;}
.site-footer .fcol a{display:block;color:#5A4D44;font-size:14px;margin-bottom:8px;}
.site-footer .fcol a:hover{color:var(--brand);}
.site-footer .legal{max-width:var(--maxw);margin:36px auto 0;padding-top:24px;border-top:1px solid rgba(0,0,0,.08);font-size:12.5px;color:#5E5147;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
/* mobile: stack footer columns and the legal line cleanly */
@media(max-width:640px){
  .site-footer .fwrap{flex-direction:column;gap:26px;}
  .site-footer .legal{flex-direction:column;gap:6px;}
}

/* thin footer for prose pages */
.mini-footer{border-top:1px solid var(--line);padding-top:18px;margin-top:44px;color:var(--muted);font-size:13.5px;}
.mini-footer a{font-weight:500;}

/* sticky footer — short pages (contact / thanks) fill the viewport so the footer
   rests at the bottom instead of floating with a large empty gap above it.
   On long pages the spacer simply has nothing to grow into. */
body{display:flex;flex-direction:column;min-height:100vh;}
body>main{flex:1 0 auto;}
.site-footer{flex-shrink:0;}
/* the sand footer already has breathing room; on short pages drop the extra top margin */
@media(max-width:900px){.site-footer{margin-top:48px;}}

/* ---- motion ---------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}

/* ---- icons (Phosphor regular, CSS-mask data-URIs; color via currentColor) ---- */
.ic{display:inline-block;width:24px;height:24px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.ic-sm{width:20px;height:20px;}
.ic-lg{width:28px;height:28px;}
.ic-users{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M117.25%2C157.92a60%2C60%2C0%2C1%2C0-66.5%2C0A95.83%2C95.83%2C0%2C0%2C0%2C3.53%2C195.63a8%2C8%2C0%2C1%2C0%2C13.4%2C8.74%2C80%2C80%2C0%2C0%2C1%2C134.14%2C0%2C8%2C8%2C0%2C0%2C0%2C13.4-8.74A95.83%2C95.83%2C0%2C0%2C0%2C117.25%2C157.92ZM40%2C108a44%2C44%2C0%2C1%2C1%2C44%2C44A44.05%2C44.05%2C0%2C0%2C1%2C40%2C108Zm210.14%2C98.7a8%2C8%2C0%2C0%2C1-11.07-2.33A79.83%2C79.83%2C0%2C0%2C0%2C172%2C168a8%2C8%2C0%2C0%2C1%2C0-16%2C44%2C44%2C0%2C1%2C0-16.34-84.87%2C8%2C8%2C0%2C1%2C1-5.94-14.85%2C60%2C60%2C0%2C0%2C1%2C55.53%2C105.64%2C95.83%2C95.83%2C0%2C0%2C1%2C47.22%2C37.71A8%2C8%2C0%2C0%2C1%2C250.14%2C206.7Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M117.25%2C157.92a60%2C60%2C0%2C1%2C0-66.5%2C0A95.83%2C95.83%2C0%2C0%2C0%2C3.53%2C195.63a8%2C8%2C0%2C1%2C0%2C13.4%2C8.74%2C80%2C80%2C0%2C0%2C1%2C134.14%2C0%2C8%2C8%2C0%2C0%2C0%2C13.4-8.74A95.83%2C95.83%2C0%2C0%2C0%2C117.25%2C157.92ZM40%2C108a44%2C44%2C0%2C1%2C1%2C44%2C44A44.05%2C44.05%2C0%2C0%2C1%2C40%2C108Zm210.14%2C98.7a8%2C8%2C0%2C0%2C1-11.07-2.33A79.83%2C79.83%2C0%2C0%2C0%2C172%2C168a8%2C8%2C0%2C0%2C1%2C0-16%2C44%2C44%2C0%2C1%2C0-16.34-84.87%2C8%2C8%2C0%2C1%2C1-5.94-14.85%2C60%2C60%2C0%2C0%2C1%2C55.53%2C105.64%2C95.83%2C95.83%2C0%2C0%2C1%2C47.22%2C37.71A8%2C8%2C0%2C0%2C1%2C250.14%2C206.7Z'%2F%3E%3C%2Fsvg%3E");}
.ic-team{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M244.8%2C150.4a8%2C8%2C0%2C0%2C1-11.2-1.6A51.6%2C51.6%2C0%2C0%2C0%2C192%2C128a8%2C8%2C0%2C0%2C1-7.37-4.89%2C8%2C8%2C0%2C0%2C1%2C0-6.22A8%2C8%2C0%2C0%2C1%2C192%2C112a24%2C24%2C0%2C1%2C0-23.24-30%2C8%2C8%2C0%2C1%2C1-15.5-4A40%2C40%2C0%2C1%2C1%2C219%2C117.51a67.94%2C67.94%2C0%2C0%2C1%2C27.43%2C21.68A8%2C8%2C0%2C0%2C1%2C244.8%2C150.4ZM190.92%2C212a8%2C8%2C0%2C1%2C1-13.84%2C8%2C57%2C57%2C0%2C0%2C0-98.16%2C0%2C8%2C8%2C0%2C1%2C1-13.84-8%2C72.06%2C72.06%2C0%2C0%2C1%2C33.74-29.92%2C48%2C48%2C0%2C1%2C1%2C58.36%2C0A72.06%2C72.06%2C0%2C0%2C1%2C190.92%2C212ZM128%2C176a32%2C32%2C0%2C1%2C0-32-32A32%2C32%2C0%2C0%2C0%2C128%2C176ZM72%2C120a8%2C8%2C0%2C0%2C0-8-8A24%2C24%2C0%2C1%2C1%2C87.24%2C82a8%2C8%2C0%2C1%2C0%2C15.5-4A40%2C40%2C0%2C1%2C0%2C37%2C117.51%2C67.94%2C67.94%2C0%2C0%2C0%2C9.6%2C139.19a8%2C8%2C0%2C1%2C0%2C12.8%2C9.61A51.6%2C51.6%2C0%2C0%2C1%2C64%2C128%2C8%2C8%2C0%2C0%2C0%2C72%2C120Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M244.8%2C150.4a8%2C8%2C0%2C0%2C1-11.2-1.6A51.6%2C51.6%2C0%2C0%2C0%2C192%2C128a8%2C8%2C0%2C0%2C1-7.37-4.89%2C8%2C8%2C0%2C0%2C1%2C0-6.22A8%2C8%2C0%2C0%2C1%2C192%2C112a24%2C24%2C0%2C1%2C0-23.24-30%2C8%2C8%2C0%2C1%2C1-15.5-4A40%2C40%2C0%2C1%2C1%2C219%2C117.51a67.94%2C67.94%2C0%2C0%2C1%2C27.43%2C21.68A8%2C8%2C0%2C0%2C1%2C244.8%2C150.4ZM190.92%2C212a8%2C8%2C0%2C1%2C1-13.84%2C8%2C57%2C57%2C0%2C0%2C0-98.16%2C0%2C8%2C8%2C0%2C1%2C1-13.84-8%2C72.06%2C72.06%2C0%2C0%2C1%2C33.74-29.92%2C48%2C48%2C0%2C1%2C1%2C58.36%2C0A72.06%2C72.06%2C0%2C0%2C1%2C190.92%2C212ZM128%2C176a32%2C32%2C0%2C1%2C0-32-32A32%2C32%2C0%2C0%2C0%2C128%2C176ZM72%2C120a8%2C8%2C0%2C0%2C0-8-8A24%2C24%2C0%2C1%2C1%2C87.24%2C82a8%2C8%2C0%2C1%2C0%2C15.5-4A40%2C40%2C0%2C1%2C0%2C37%2C117.51%2C67.94%2C67.94%2C0%2C0%2C0%2C9.6%2C139.19a8%2C8%2C0%2C1%2C0%2C12.8%2C9.61A51.6%2C51.6%2C0%2C0%2C1%2C64%2C128%2C8%2C8%2C0%2C0%2C0%2C72%2C120Z'%2F%3E%3C%2Fsvg%3E");}
.ic-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M222.37%2C158.46l-47.11-21.11-.13-.06a16%2C16%2C0%2C0%2C0-15.17%2C1.4%2C8.12%2C8.12%2C0%2C0%2C0-.75.56L134.87%2C160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16%2C16%2C0%2C0%2C0%2C1.32-15.06l0-.12L97.54%2C33.64a16%2C16%2C0%2C0%2C0-16.62-9.52A56.26%2C56.26%2C0%2C0%2C0%2C32%2C80c0%2C79.4%2C64.6%2C144%2C144%2C144a56.26%2C56.26%2C0%2C0%2C0%2C55.88-48.92A16%2C16%2C0%2C0%2C0%2C222.37%2C158.46ZM176%2C208A128.14%2C128.14%2C0%2C0%2C1%2C48%2C80%2C40.2%2C40.2%2C0%2C0%2C1%2C82.87%2C40a.61.61%2C0%2C0%2C0%2C0%2C.12l21%2C47L83.2%2C111.86a6.13%2C6.13%2C0%2C0%2C0-.57.77%2C16%2C16%2C0%2C0%2C0-1%2C15.7c9.06%2C18.53%2C27.73%2C37.06%2C46.46%2C46.11a16%2C16%2C0%2C0%2C0%2C15.75-1.14%2C8.44%2C8.44%2C0%2C0%2C0%2C.74-.56L168.89%2C152l47%2C21.05h0s.08%2C0%2C.11%2C0A40.21%2C40.21%2C0%2C0%2C1%2C176%2C208Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M222.37%2C158.46l-47.11-21.11-.13-.06a16%2C16%2C0%2C0%2C0-15.17%2C1.4%2C8.12%2C8.12%2C0%2C0%2C0-.75.56L134.87%2C160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16%2C16%2C0%2C0%2C0%2C1.32-15.06l0-.12L97.54%2C33.64a16%2C16%2C0%2C0%2C0-16.62-9.52A56.26%2C56.26%2C0%2C0%2C0%2C32%2C80c0%2C79.4%2C64.6%2C144%2C144%2C144a56.26%2C56.26%2C0%2C0%2C0%2C55.88-48.92A16%2C16%2C0%2C0%2C0%2C222.37%2C158.46ZM176%2C208A128.14%2C128.14%2C0%2C0%2C1%2C48%2C80%2C40.2%2C40.2%2C0%2C0%2C1%2C82.87%2C40a.61.61%2C0%2C0%2C0%2C0%2C.12l21%2C47L83.2%2C111.86a6.13%2C6.13%2C0%2C0%2C0-.57.77%2C16%2C16%2C0%2C0%2C0-1%2C15.7c9.06%2C18.53%2C27.73%2C37.06%2C46.46%2C46.11a16%2C16%2C0%2C0%2C0%2C15.75-1.14%2C8.44%2C8.44%2C0%2C0%2C0%2C.74-.56L168.89%2C152l47%2C21.05h0s.08%2C0%2C.11%2C0A40.21%2C40.21%2C0%2C0%2C1%2C176%2C208Z'%2F%3E%3C%2Fsvg%3E");}
.ic-bulb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M176%2C232a8%2C8%2C0%2C0%2C1-8%2C8H88a8%2C8%2C0%2C0%2C1%2C0-16h80A8%2C8%2C0%2C0%2C1%2C176%2C232Zm40-128a87.55%2C87.55%2C0%2C0%2C1-33.64%2C69.21A16.24%2C16.24%2C0%2C0%2C0%2C176%2C186v6a16%2C16%2C0%2C0%2C1-16%2C16H96a16%2C16%2C0%2C0%2C1-16-16v-6a16%2C16%2C0%2C0%2C0-6.23-12.66A87.59%2C87.59%2C0%2C0%2C1%2C40%2C104.49C39.74%2C56.83%2C78.26%2C17.14%2C125.88%2C16A88%2C88%2C0%2C0%2C1%2C216%2C104Zm-16%2C0a72%2C72%2C0%2C0%2C0-73.74-72c-39%2C.92-70.47%2C33.39-70.26%2C72.39a71.65%2C71.65%2C0%2C0%2C0%2C27.64%2C56.3A32%2C32%2C0%2C0%2C1%2C96%2C186v6h64v-6a32.15%2C32.15%2C0%2C0%2C1%2C12.47-25.35A71.65%2C71.65%2C0%2C0%2C0%2C200%2C104Zm-16.11-9.34a57.6%2C57.6%2C0%2C0%2C0-46.56-46.55%2C8%2C8%2C0%2C0%2C0-2.66%2C15.78c16.57%2C2.79%2C30.63%2C16.85%2C33.44%2C33.45A8%2C8%2C0%2C0%2C0%2C176%2C104a9%2C9%2C0%2C0%2C0%2C1.35-.11A8%2C8%2C0%2C0%2C0%2C183.89%2C94.66Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M176%2C232a8%2C8%2C0%2C0%2C1-8%2C8H88a8%2C8%2C0%2C0%2C1%2C0-16h80A8%2C8%2C0%2C0%2C1%2C176%2C232Zm40-128a87.55%2C87.55%2C0%2C0%2C1-33.64%2C69.21A16.24%2C16.24%2C0%2C0%2C0%2C176%2C186v6a16%2C16%2C0%2C0%2C1-16%2C16H96a16%2C16%2C0%2C0%2C1-16-16v-6a16%2C16%2C0%2C0%2C0-6.23-12.66A87.59%2C87.59%2C0%2C0%2C1%2C40%2C104.49C39.74%2C56.83%2C78.26%2C17.14%2C125.88%2C16A88%2C88%2C0%2C0%2C1%2C216%2C104Zm-16%2C0a72%2C72%2C0%2C0%2C0-73.74-72c-39%2C.92-70.47%2C33.39-70.26%2C72.39a71.65%2C71.65%2C0%2C0%2C0%2C27.64%2C56.3A32%2C32%2C0%2C0%2C1%2C96%2C186v6h64v-6a32.15%2C32.15%2C0%2C0%2C1%2C12.47-25.35A71.65%2C71.65%2C0%2C0%2C0%2C200%2C104Zm-16.11-9.34a57.6%2C57.6%2C0%2C0%2C0-46.56-46.55%2C8%2C8%2C0%2C0%2C0-2.66%2C15.78c16.57%2C2.79%2C30.63%2C16.85%2C33.44%2C33.45A8%2C8%2C0%2C0%2C0%2C176%2C104a9%2C9%2C0%2C0%2C0%2C1.35-.11A8%2C8%2C0%2C0%2C0%2C183.89%2C94.66Z'%2F%3E%3C%2Fsvg%3E");}
.ic-check-square{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M173.66%2C98.34a8%2C8%2C0%2C0%2C1%2C0%2C11.32l-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0l-24-24a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35A8%2C8%2C0%2C0%2C1%2C173.66%2C98.34ZM224%2C48V208a16%2C16%2C0%2C0%2C1-16%2C16H48a16%2C16%2C0%2C0%2C1-16-16V48A16%2C16%2C0%2C0%2C1%2C48%2C32H208A16%2C16%2C0%2C0%2C1%2C224%2C48ZM208%2C208V48H48V208H208Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M173.66%2C98.34a8%2C8%2C0%2C0%2C1%2C0%2C11.32l-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0l-24-24a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35A8%2C8%2C0%2C0%2C1%2C173.66%2C98.34ZM224%2C48V208a16%2C16%2C0%2C0%2C1-16%2C16H48a16%2C16%2C0%2C0%2C1-16-16V48A16%2C16%2C0%2C0%2C1%2C48%2C32H208A16%2C16%2C0%2C0%2C1%2C224%2C48ZM208%2C208V48H48V208H208Z'%2F%3E%3C%2Fsvg%3E");}
.ic-list{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C128a8%2C8%2C0%2C0%2C1-8%2C8H128a8%2C8%2C0%2C0%2C1%2C0-16h88A8%2C8%2C0%2C0%2C1%2C224%2C128ZM128%2C72h88a8%2C8%2C0%2C0%2C0%2C0-16H128a8%2C8%2C0%2C0%2C0%2C0%2C16Zm88%2C112H128a8%2C8%2C0%2C0%2C0%2C0%2C16h88a8%2C8%2C0%2C0%2C0%2C0-16ZM82.34%2C42.34%2C56%2C68.69%2C45.66%2C58.34A8%2C8%2C0%2C0%2C0%2C34.34%2C69.66l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32A8%2C8%2C0%2C0%2C0%2C82.34%2C42.34Zm0%2C64L56%2C132.69%2C45.66%2C122.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32a8%2C8%2C0%2C0%2C0-11.32-11.32Zm0%2C64L56%2C196.69%2C45.66%2C186.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32a8%2C8%2C0%2C0%2C0-11.32-11.32Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C128a8%2C8%2C0%2C0%2C1-8%2C8H128a8%2C8%2C0%2C0%2C1%2C0-16h88A8%2C8%2C0%2C0%2C1%2C224%2C128ZM128%2C72h88a8%2C8%2C0%2C0%2C0%2C0-16H128a8%2C8%2C0%2C0%2C0%2C0%2C16Zm88%2C112H128a8%2C8%2C0%2C0%2C0%2C0%2C16h88a8%2C8%2C0%2C0%2C0%2C0-16ZM82.34%2C42.34%2C56%2C68.69%2C45.66%2C58.34A8%2C8%2C0%2C0%2C0%2C34.34%2C69.66l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32A8%2C8%2C0%2C0%2C0%2C82.34%2C42.34Zm0%2C64L56%2C132.69%2C45.66%2C122.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32a8%2C8%2C0%2C0%2C0-11.32-11.32Zm0%2C64L56%2C196.69%2C45.66%2C186.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32a8%2C8%2C0%2C0%2C0-11.32-11.32Z'%2F%3E%3C%2Fsvg%3E");}
.ic-graph{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M200%2C152a31.84%2C31.84%2C0%2C0%2C0-19.53%2C6.68l-23.11-18A31.65%2C31.65%2C0%2C0%2C0%2C160%2C128c0-.74%2C0-1.48-.08-2.21l13.23-4.41A32%2C32%2C0%2C1%2C0%2C168%2C104c0%2C.74%2C0%2C1.48.08%2C2.21l-13.23%2C4.41A32%2C32%2C0%2C0%2C0%2C128%2C96a32.59%2C32.59%2C0%2C0%2C0-5.27.44L115.89%2C81A32%2C32%2C0%2C1%2C0%2C96%2C88a32.59%2C32.59%2C0%2C0%2C0%2C5.27-.44l6.84%2C15.4a31.92%2C31.92%2C0%2C0%2C0-8.57%2C39.64L73.83%2C165.44a32.06%2C32.06%2C0%2C1%2C0%2C10.63%2C12l25.71-22.84a31.91%2C31.91%2C0%2C0%2C0%2C37.36-1.24l23.11%2C18A31.65%2C31.65%2C0%2C0%2C0%2C168%2C184a32%2C32%2C0%2C1%2C0%2C32-32Zm0-64a16%2C16%2C0%2C1%2C1-16%2C16A16%2C16%2C0%2C0%2C1%2C200%2C88ZM80%2C56A16%2C16%2C0%2C1%2C1%2C96%2C72%2C16%2C16%2C0%2C0%2C1%2C80%2C56ZM56%2C208a16%2C16%2C0%2C1%2C1%2C16-16A16%2C16%2C0%2C0%2C1%2C56%2C208Zm56-80a16%2C16%2C0%2C1%2C1%2C16%2C16A16%2C16%2C0%2C0%2C1%2C112%2C128Zm88%2C72a16%2C16%2C0%2C1%2C1%2C16-16A16%2C16%2C0%2C0%2C1%2C200%2C200Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M200%2C152a31.84%2C31.84%2C0%2C0%2C0-19.53%2C6.68l-23.11-18A31.65%2C31.65%2C0%2C0%2C0%2C160%2C128c0-.74%2C0-1.48-.08-2.21l13.23-4.41A32%2C32%2C0%2C1%2C0%2C168%2C104c0%2C.74%2C0%2C1.48.08%2C2.21l-13.23%2C4.41A32%2C32%2C0%2C0%2C0%2C128%2C96a32.59%2C32.59%2C0%2C0%2C0-5.27.44L115.89%2C81A32%2C32%2C0%2C1%2C0%2C96%2C88a32.59%2C32.59%2C0%2C0%2C0%2C5.27-.44l6.84%2C15.4a31.92%2C31.92%2C0%2C0%2C0-8.57%2C39.64L73.83%2C165.44a32.06%2C32.06%2C0%2C1%2C0%2C10.63%2C12l25.71-22.84a31.91%2C31.91%2C0%2C0%2C0%2C37.36-1.24l23.11%2C18A31.65%2C31.65%2C0%2C0%2C0%2C168%2C184a32%2C32%2C0%2C1%2C0%2C32-32Zm0-64a16%2C16%2C0%2C1%2C1-16%2C16A16%2C16%2C0%2C0%2C1%2C200%2C88ZM80%2C56A16%2C16%2C0%2C1%2C1%2C96%2C72%2C16%2C16%2C0%2C0%2C1%2C80%2C56ZM56%2C208a16%2C16%2C0%2C1%2C1%2C16-16A16%2C16%2C0%2C0%2C1%2C56%2C208Zm56-80a16%2C16%2C0%2C1%2C1%2C16%2C16A16%2C16%2C0%2C0%2C1%2C112%2C128Zm88%2C72a16%2C16%2C0%2C1%2C1%2C16-16A16%2C16%2C0%2C0%2C1%2C200%2C200Z'%2F%3E%3C%2Fsvg%3E");}
.ic-lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C80H176V56a48%2C48%2C0%2C0%2C0-96%2C0V80H48A16%2C16%2C0%2C0%2C0%2C32%2C96V208a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V96A16%2C16%2C0%2C0%2C0%2C208%2C80ZM96%2C56a32%2C32%2C0%2C0%2C1%2C64%2C0V80H96ZM208%2C208H48V96H208V208Zm-68-56a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C140%2C152Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C80H176V56a48%2C48%2C0%2C0%2C0-96%2C0V80H48A16%2C16%2C0%2C0%2C0%2C32%2C96V208a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V96A16%2C16%2C0%2C0%2C0%2C208%2C80ZM96%2C56a32%2C32%2C0%2C0%2C1%2C64%2C0V80H96ZM208%2C208H48V96H208V208Zm-68-56a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C140%2C152Z'%2F%3E%3C%2Fsvg%3E");}
.ic-drive{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M237.6%2C143.78%2C169.13%2C31.52A15.91%2C15.91%2C0%2C0%2C0%2C155.56%2C24H100.43a15.89%2C15.89%2C0%2C0%2C0-13.56%2C7.52l-.05.07L18.44%2C143.7a16%2C16%2C0%2C0%2C0-.33%2C16.42l27.32%2C47.82A16%2C16%2C0%2C0%2C0%2C59.32%2C216H196.67a16%2C16%2C0%2C0%2C0%2C13.89-8.06l27.32-47.82A15.91%2C15.91%2C0%2C0%2C0%2C237.6%2C143.78ZM219%2C144H172.52L137.33%2C85.33l22.75-37.92Zm-116.87%2C0L128%2C100.88%2C153.87%2C144Zm61.34%2C16%2C24%2C40H68.53l24-40ZM128%2C69.78%2C110.12%2C40l35.78-.05ZM95.91%2C47.41l22.76%2C37.92L83.47%2C144H37ZM36.54%2C160H73.87L54.72%2C191.92Zm164.74%2C31.93L182.12%2C160h37.41Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M237.6%2C143.78%2C169.13%2C31.52A15.91%2C15.91%2C0%2C0%2C0%2C155.56%2C24H100.43a15.89%2C15.89%2C0%2C0%2C0-13.56%2C7.52l-.05.07L18.44%2C143.7a16%2C16%2C0%2C0%2C0-.33%2C16.42l27.32%2C47.82A16%2C16%2C0%2C0%2C0%2C59.32%2C216H196.67a16%2C16%2C0%2C0%2C0%2C13.89-8.06l27.32-47.82A15.91%2C15.91%2C0%2C0%2C0%2C237.6%2C143.78ZM219%2C144H172.52L137.33%2C85.33l22.75-37.92Zm-116.87%2C0L128%2C100.88%2C153.87%2C144Zm61.34%2C16%2C24%2C40H68.53l24-40ZM128%2C69.78%2C110.12%2C40l35.78-.05ZM95.91%2C47.41l22.76%2C37.92L83.47%2C144H37ZM36.54%2C160H73.87L54.72%2C191.92Zm164.74%2C31.93L182.12%2C160h37.41Z'%2F%3E%3C%2Fsvg%3E");}
.ic-cloud-off{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M53.92%2C34.62A8%2C8%2C0%2C1%2C0%2C42.08%2C45.38L81.32%2C88.55l-.06.12A65%2C65%2C0%2C0%2C0%2C72%2C88a64%2C64%2C0%2C0%2C0%2C0%2C128h88a87.34%2C87.34%2C0%2C0%2C0%2C31.8-5.93l10.28%2C11.31a8%2C8%2C0%2C1%2C0%2C11.84-10.76ZM160%2C200H72a48%2C48%2C0%2C0%2C1%2C0-96c1.1%2C0%2C2.2%2C0%2C3.3.12A88.4%2C88.4%2C0%2C0%2C0%2C72%2C128a8%2C8%2C0%2C0%2C0%2C16%2C0%2C72.25%2C72.25%2C0%2C0%2C1%2C5.06-26.54l87%2C95.7A71.66%2C71.66%2C0%2C0%2C1%2C160%2C200Zm88-72a87.89%2C87.89%2C0%2C0%2C1-22.35%2C58.61A8%2C8%2C0%2C0%2C1%2C213.71%2C176%2C72%2C72%2C0%2C0%2C0%2C117.37%2C70a8%2C8%2C0%2C0%2C1-9.48-12.89A88%2C88%2C0%2C0%2C1%2C248%2C128Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M53.92%2C34.62A8%2C8%2C0%2C1%2C0%2C42.08%2C45.38L81.32%2C88.55l-.06.12A65%2C65%2C0%2C0%2C0%2C72%2C88a64%2C64%2C0%2C0%2C0%2C0%2C128h88a87.34%2C87.34%2C0%2C0%2C0%2C31.8-5.93l10.28%2C11.31a8%2C8%2C0%2C1%2C0%2C11.84-10.76ZM160%2C200H72a48%2C48%2C0%2C0%2C1%2C0-96c1.1%2C0%2C2.2%2C0%2C3.3.12A88.4%2C88.4%2C0%2C0%2C0%2C72%2C128a8%2C8%2C0%2C0%2C0%2C16%2C0%2C72.25%2C72.25%2C0%2C0%2C1%2C5.06-26.54l87%2C95.7A71.66%2C71.66%2C0%2C0%2C1%2C160%2C200Zm88-72a87.89%2C87.89%2C0%2C0%2C1-22.35%2C58.61A8%2C8%2C0%2C0%2C1%2C213.71%2C176%2C72%2C72%2C0%2C0%2C0%2C117.37%2C70a8%2C8%2C0%2C0%2C1-9.48-12.89A88%2C88%2C0%2C0%2C1%2C248%2C128Z'%2F%3E%3C%2Fsvg%3E");}
.ic-db{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M128%2C24C74.17%2C24%2C32%2C48.6%2C32%2C80v96c0%2C31.4%2C42.17%2C56%2C96%2C56s96-24.6%2C96-56V80C224%2C48.6%2C181.83%2C24%2C128%2C24Zm80%2C104c0%2C9.62-7.88%2C19.43-21.61%2C26.92C170.93%2C163.35%2C150.19%2C168%2C128%2C168s-42.93-4.65-58.39-13.08C55.88%2C147.43%2C48%2C137.62%2C48%2C128V111.36c17.06%2C15%2C46.23%2C24.64%2C80%2C24.64s62.94-9.68%2C80-24.64ZM69.61%2C53.08C85.07%2C44.65%2C105.81%2C40%2C128%2C40s42.93%2C4.65%2C58.39%2C13.08C200.12%2C60.57%2C208%2C70.38%2C208%2C80s-7.88%2C19.43-21.61%2C26.92C170.93%2C115.35%2C150.19%2C120%2C128%2C120s-42.93-4.65-58.39-13.08C55.88%2C99.43%2C48%2C89.62%2C48%2C80S55.88%2C60.57%2C69.61%2C53.08ZM186.39%2C202.92C170.93%2C211.35%2C150.19%2C216%2C128%2C216s-42.93-4.65-58.39-13.08C55.88%2C195.43%2C48%2C185.62%2C48%2C176V159.36c17.06%2C15%2C46.23%2C24.64%2C80%2C24.64s62.94-9.68%2C80-24.64V176C208%2C185.62%2C200.12%2C195.43%2C186.39%2C202.92Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M128%2C24C74.17%2C24%2C32%2C48.6%2C32%2C80v96c0%2C31.4%2C42.17%2C56%2C96%2C56s96-24.6%2C96-56V80C224%2C48.6%2C181.83%2C24%2C128%2C24Zm80%2C104c0%2C9.62-7.88%2C19.43-21.61%2C26.92C170.93%2C163.35%2C150.19%2C168%2C128%2C168s-42.93-4.65-58.39-13.08C55.88%2C147.43%2C48%2C137.62%2C48%2C128V111.36c17.06%2C15%2C46.23%2C24.64%2C80%2C24.64s62.94-9.68%2C80-24.64ZM69.61%2C53.08C85.07%2C44.65%2C105.81%2C40%2C128%2C40s42.93%2C4.65%2C58.39%2C13.08C200.12%2C60.57%2C208%2C70.38%2C208%2C80s-7.88%2C19.43-21.61%2C26.92C170.93%2C115.35%2C150.19%2C120%2C128%2C120s-42.93-4.65-58.39-13.08C55.88%2C99.43%2C48%2C89.62%2C48%2C80S55.88%2C60.57%2C69.61%2C53.08ZM186.39%2C202.92C170.93%2C211.35%2C150.19%2C216%2C128%2C216s-42.93-4.65-58.39-13.08C55.88%2C195.43%2C48%2C185.62%2C48%2C176V159.36c17.06%2C15%2C46.23%2C24.64%2C80%2C24.64s62.94-9.68%2C80-24.64V176C208%2C185.62%2C200.12%2C195.43%2C186.39%2C202.92Z'%2F%3E%3C%2Fsvg%3E");}
.ic-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M229.66%2C77.66l-128%2C128a8%2C8%2C0%2C0%2C1-11.32%2C0l-56-56a8%2C8%2C0%2C0%2C1%2C11.32-11.32L96%2C188.69%2C218.34%2C66.34a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M229.66%2C77.66l-128%2C128a8%2C8%2C0%2C0%2C1-11.32%2C0l-56-56a8%2C8%2C0%2C0%2C1%2C11.32-11.32L96%2C188.69%2C218.34%2C66.34a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z'%2F%3E%3C%2Fsvg%3E");}
.ic-rocket{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M223.85%2C47.12a16%2C16%2C0%2C0%2C0-15-15c-12.58-.75-44.73.4-71.41%2C27.07L132.69%2C64H74.36A15.91%2C15.91%2C0%2C0%2C0%2C63%2C68.68L28.7%2C103a16%2C16%2C0%2C0%2C0%2C9.07%2C27.16l38.47%2C5.37%2C44.21%2C44.21%2C5.37%2C38.49a15.94%2C15.94%2C0%2C0%2C0%2C10.78%2C12.92%2C16.11%2C16.11%2C0%2C0%2C0%2C5.1.83A15.91%2C15.91%2C0%2C0%2C0%2C153%2C227.3L187.32%2C193A15.91%2C15.91%2C0%2C0%2C0%2C192%2C181.64V123.31l4.77-4.77C223.45%2C91.86%2C224.6%2C59.71%2C223.85%2C47.12ZM74.36%2C80h42.33L77.16%2C119.52%2C40%2C114.34Zm74.41-9.45a76.65%2C76.65%2C0%2C0%2C1%2C59.11-22.47%2C76.46%2C76.46%2C0%2C0%2C1-22.42%2C59.16L128%2C164.68%2C91.32%2C128ZM176%2C181.64%2C141.67%2C216l-5.19-37.17L176%2C139.31Zm-74.16%2C9.5C97.34%2C201%2C82.29%2C224%2C40%2C224a8%2C8%2C0%2C0%2C1-8-8c0-42.29%2C23-57.34%2C32.86-61.85a8%2C8%2C0%2C0%2C1%2C6.64%2C14.56c-6.43%2C2.93-20.62%2C12.36-23.12%2C38.91%2C26.55-2.5%2C36-16.69%2C38.91-23.12a8%2C8%2C0%2C1%2C1%2C14.56%2C6.64Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M223.85%2C47.12a16%2C16%2C0%2C0%2C0-15-15c-12.58-.75-44.73.4-71.41%2C27.07L132.69%2C64H74.36A15.91%2C15.91%2C0%2C0%2C0%2C63%2C68.68L28.7%2C103a16%2C16%2C0%2C0%2C0%2C9.07%2C27.16l38.47%2C5.37%2C44.21%2C44.21%2C5.37%2C38.49a15.94%2C15.94%2C0%2C0%2C0%2C10.78%2C12.92%2C16.11%2C16.11%2C0%2C0%2C0%2C5.1.83A15.91%2C15.91%2C0%2C0%2C0%2C153%2C227.3L187.32%2C193A15.91%2C15.91%2C0%2C0%2C0%2C192%2C181.64V123.31l4.77-4.77C223.45%2C91.86%2C224.6%2C59.71%2C223.85%2C47.12ZM74.36%2C80h42.33L77.16%2C119.52%2C40%2C114.34Zm74.41-9.45a76.65%2C76.65%2C0%2C0%2C1%2C59.11-22.47%2C76.46%2C76.46%2C0%2C0%2C1-22.42%2C59.16L128%2C164.68%2C91.32%2C128ZM176%2C181.64%2C141.67%2C216l-5.19-37.17L176%2C139.31Zm-74.16%2C9.5C97.34%2C201%2C82.29%2C224%2C40%2C224a8%2C8%2C0%2C0%2C1-8-8c0-42.29%2C23-57.34%2C32.86-61.85a8%2C8%2C0%2C0%2C1%2C6.64%2C14.56c-6.43%2C2.93-20.62%2C12.36-23.12%2C38.91%2C26.55-2.5%2C36-16.69%2C38.91-23.12a8%2C8%2C0%2C1%2C1%2C14.56%2C6.64Z'%2F%3E%3C%2Fsvg%3E");}
.ic-chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C200h-8V40a8%2C8%2C0%2C0%2C0-8-8H152a8%2C8%2C0%2C0%2C0-8%2C8V80H96a8%2C8%2C0%2C0%2C0-8%2C8v40H48a8%2C8%2C0%2C0%2C0-8%2C8v64H32a8%2C8%2C0%2C0%2C0%2C0%2C16H224a8%2C8%2C0%2C0%2C0%2C0-16ZM160%2C48h40V200H160ZM104%2C96h40V200H104ZM56%2C144H88v56H56Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C200h-8V40a8%2C8%2C0%2C0%2C0-8-8H152a8%2C8%2C0%2C0%2C0-8%2C8V80H96a8%2C8%2C0%2C0%2C0-8%2C8v40H48a8%2C8%2C0%2C0%2C0-8%2C8v64H32a8%2C8%2C0%2C0%2C0%2C0%2C16H224a8%2C8%2C0%2C0%2C0%2C0-16ZM160%2C48h40V200H160ZM104%2C96h40V200H104ZM56%2C144H88v56H56Z'%2F%3E%3C%2Fsvg%3E");}
.ic-calendar{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C32H184V24a8%2C8%2C0%2C0%2C0-16%2C0v8H88V24a8%2C8%2C0%2C0%2C0-16%2C0v8H48A16%2C16%2C0%2C0%2C0%2C32%2C48V208a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V48A16%2C16%2C0%2C0%2C0%2C208%2C32ZM72%2C48v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h80v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h24V80H48V48ZM208%2C208H48V96H208V208Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C32H184V24a8%2C8%2C0%2C0%2C0-16%2C0v8H88V24a8%2C8%2C0%2C0%2C0-16%2C0v8H48A16%2C16%2C0%2C0%2C0%2C32%2C48V208a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V48A16%2C16%2C0%2C0%2C0%2C208%2C32ZM72%2C48v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h80v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h24V80H48V48ZM208%2C208H48V96H208V208Z'%2F%3E%3C%2Fsvg%3E");}
.ic-import{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M213.66%2C82.34l-56-56A8%2C8%2C0%2C0%2C0%2C152%2C24H56A16%2C16%2C0%2C0%2C0%2C40%2C40V216a16%2C16%2C0%2C0%2C0%2C16%2C16H200a16%2C16%2C0%2C0%2C0%2C16-16V88A8%2C8%2C0%2C0%2C0%2C213.66%2C82.34ZM160%2C51.31%2C188.69%2C80H160ZM200%2C216H56V40h88V88a8%2C8%2C0%2C0%2C0%2C8%2C8h48V216Zm-42.34-77.66a8%2C8%2C0%2C0%2C1-11.32%2C11.32L136%2C139.31V184a8%2C8%2C0%2C0%2C1-16%2C0V139.31l-10.34%2C10.35a8%2C8%2C0%2C0%2C1-11.32-11.32l24-24a8%2C8%2C0%2C0%2C1%2C11.32%2C0Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M213.66%2C82.34l-56-56A8%2C8%2C0%2C0%2C0%2C152%2C24H56A16%2C16%2C0%2C0%2C0%2C40%2C40V216a16%2C16%2C0%2C0%2C0%2C16%2C16H200a16%2C16%2C0%2C0%2C0%2C16-16V88A8%2C8%2C0%2C0%2C0%2C213.66%2C82.34ZM160%2C51.31%2C188.69%2C80H160ZM200%2C216H56V40h88V88a8%2C8%2C0%2C0%2C0%2C8%2C8h48V216Zm-42.34-77.66a8%2C8%2C0%2C0%2C1-11.32%2C11.32L136%2C139.31V184a8%2C8%2C0%2C0%2C1-16%2C0V139.31l-10.34%2C10.35a8%2C8%2C0%2C0%2C1-11.32-11.32l24-24a8%2C8%2C0%2C0%2C1%2C11.32%2C0Z'%2F%3E%3C%2Fsvg%3E");}
.ic-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C48H32a8%2C8%2C0%2C0%2C0-8%2C8V192a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V56A8%2C8%2C0%2C0%2C0%2C224%2C48Zm-96%2C85.15L52.57%2C64H203.43ZM98.71%2C128%2C40%2C181.81V74.19Zm11.84%2C10.85%2C12%2C11.05a8%2C8%2C0%2C0%2C0%2C10.82%2C0l12-11.05%2C58%2C53.15H52.57ZM157.29%2C128%2C216%2C74.18V181.82Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C48H32a8%2C8%2C0%2C0%2C0-8%2C8V192a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V56A8%2C8%2C0%2C0%2C0%2C224%2C48Zm-96%2C85.15L52.57%2C64H203.43ZM98.71%2C128%2C40%2C181.81V74.19Zm11.84%2C10.85%2C12%2C11.05a8%2C8%2C0%2C0%2C0%2C10.82%2C0l12-11.05%2C58%2C53.15H52.57ZM157.29%2C128%2C216%2C74.18V181.82Z'%2F%3E%3C%2Fsvg%3E");}
.ic-chat{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M128%2C24A104%2C104%2C0%2C0%2C0%2C36.18%2C176.88L24.83%2C210.93a16%2C16%2C0%2C0%2C0%2C20.24%2C20.24l34.05-11.35A104%2C104%2C0%2C1%2C0%2C128%2C24Zm0%2C192a87.87%2C87.87%2C0%2C0%2C1-44.06-11.81%2C8%2C8%2C0%2C0%2C0-6.54-.67L40%2C216%2C52.47%2C178.6a8%2C8%2C0%2C0%2C0-.66-6.54A88%2C88%2C0%2C1%2C1%2C128%2C216Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M128%2C24A104%2C104%2C0%2C0%2C0%2C36.18%2C176.88L24.83%2C210.93a16%2C16%2C0%2C0%2C0%2C20.24%2C20.24l34.05-11.35A104%2C104%2C0%2C1%2C0%2C128%2C24Zm0%2C192a87.87%2C87.87%2C0%2C0%2C1-44.06-11.81%2C8%2C8%2C0%2C0%2C0-6.54-.67L40%2C216%2C52.47%2C178.6a8%2C8%2C0%2C0%2C0-.66-6.54A88%2C88%2C0%2C1%2C1%2C128%2C216Z'%2F%3E%3C%2Fsvg%3E");}
.ic-key{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M216.57%2C39.43A80%2C80%2C0%2C0%2C0%2C83.91%2C120.78L28.69%2C176A15.86%2C15.86%2C0%2C0%2C0%2C24%2C187.31V216a16%2C16%2C0%2C0%2C0%2C16%2C16H72a8%2C8%2C0%2C0%2C0%2C8-8V208H96a8%2C8%2C0%2C0%2C0%2C8-8V184h16a8%2C8%2C0%2C0%2C0%2C5.66-2.34l9.56-9.57A79.73%2C79.73%2C0%2C0%2C0%2C160%2C176h.1A80%2C80%2C0%2C0%2C0%2C216.57%2C39.43ZM224%2C98.1c-1.09%2C34.09-29.75%2C61.86-63.89%2C61.9H160a63.7%2C63.7%2C0%2C0%2C1-23.65-4.51%2C8%2C8%2C0%2C0%2C0-8.84%2C1.68L116.69%2C168H96a8%2C8%2C0%2C0%2C0-8%2C8v16H72a8%2C8%2C0%2C0%2C0-8%2C8v16H40V187.31l58.83-58.82a8%2C8%2C0%2C0%2C0%2C1.68-8.84A63.72%2C63.72%2C0%2C0%2C1%2C96%2C95.92c0-34.14%2C27.81-62.8%2C61.9-63.89A64%2C64%2C0%2C0%2C1%2C224%2C98.1ZM192%2C76a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C76Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M216.57%2C39.43A80%2C80%2C0%2C0%2C0%2C83.91%2C120.78L28.69%2C176A15.86%2C15.86%2C0%2C0%2C0%2C24%2C187.31V216a16%2C16%2C0%2C0%2C0%2C16%2C16H72a8%2C8%2C0%2C0%2C0%2C8-8V208H96a8%2C8%2C0%2C0%2C0%2C8-8V184h16a8%2C8%2C0%2C0%2C0%2C5.66-2.34l9.56-9.57A79.73%2C79.73%2C0%2C0%2C0%2C160%2C176h.1A80%2C80%2C0%2C0%2C0%2C216.57%2C39.43ZM224%2C98.1c-1.09%2C34.09-29.75%2C61.86-63.89%2C61.9H160a63.7%2C63.7%2C0%2C0%2C1-23.65-4.51%2C8%2C8%2C0%2C0%2C0-8.84%2C1.68L116.69%2C168H96a8%2C8%2C0%2C0%2C0-8%2C8v16H72a8%2C8%2C0%2C0%2C0-8%2C8v16H40V187.31l58.83-58.82a8%2C8%2C0%2C0%2C0%2C1.68-8.84A63.72%2C63.72%2C0%2C0%2C1%2C96%2C95.92c0-34.14%2C27.81-62.8%2C61.9-63.89A64%2C64%2C0%2C0%2C1%2C224%2C98.1ZM192%2C76a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C76Z'%2F%3E%3C%2Fsvg%3E");}
.ic-info{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm0%2C192a88%2C88%2C0%2C1%2C1%2C88-88A88.1%2C88.1%2C0%2C0%2C1%2C128%2C216Zm16-40a8%2C8%2C0%2C0%2C1-8%2C8%2C16%2C16%2C0%2C0%2C1-16-16V128a8%2C8%2C0%2C0%2C1%2C0-16%2C16%2C16%2C0%2C0%2C1%2C16%2C16v40A8%2C8%2C0%2C0%2C1%2C144%2C176ZM112%2C84a12%2C12%2C0%2C1%2C1%2C12%2C12A12%2C12%2C0%2C0%2C1%2C112%2C84Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm0%2C192a88%2C88%2C0%2C1%2C1%2C88-88A88.1%2C88.1%2C0%2C0%2C1%2C128%2C216Zm16-40a8%2C8%2C0%2C0%2C1-8%2C8%2C16%2C16%2C0%2C0%2C1-16-16V128a8%2C8%2C0%2C0%2C1%2C0-16%2C16%2C16%2C0%2C0%2C1%2C16%2C16v40A8%2C8%2C0%2C0%2C1%2C144%2C176ZM112%2C84a12%2C12%2C0%2C1%2C1%2C12%2C12A12%2C12%2C0%2C0%2C1%2C112%2C84Z'%2F%3E%3C%2Fsvg%3E");}
.ic-arrow{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M221.66%2C133.66l-72%2C72a8%2C8%2C0%2C0%2C1-11.32-11.32L196.69%2C136H40a8%2C8%2C0%2C0%2C1%2C0-16H196.69L138.34%2C61.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32l72%2C72A8%2C8%2C0%2C0%2C1%2C221.66%2C133.66Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M221.66%2C133.66l-72%2C72a8%2C8%2C0%2C0%2C1-11.32-11.32L196.69%2C136H40a8%2C8%2C0%2C0%2C1%2C0-16H196.69L138.34%2C61.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32l72%2C72A8%2C8%2C0%2C0%2C1%2C221.66%2C133.66Z'%2F%3E%3C%2Fsvg%3E");}
.ic-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C40H48A16%2C16%2C0%2C0%2C0%2C32%2C56v56c0%2C52.72%2C25.52%2C84.67%2C46.93%2C102.19%2C23.06%2C18.86%2C46%2C25.26%2C47%2C25.53a8%2C8%2C0%2C0%2C0%2C4.2%2C0c1-.27%2C23.91-6.67%2C47-25.53C198.48%2C196.67%2C224%2C164.72%2C224%2C112V56A16%2C16%2C0%2C0%2C0%2C208%2C40Zm0%2C72c0%2C37.07-13.66%2C67.16-40.6%2C89.42A129.3%2C129.3%2C0%2C0%2C1%2C128%2C223.62a128.25%2C128.25%2C0%2C0%2C1-38.92-21.81C61.82%2C179.51%2C48%2C149.3%2C48%2C112l0-56%2C160%2C0ZM82.34%2C141.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32l-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C40H48A16%2C16%2C0%2C0%2C0%2C32%2C56v56c0%2C52.72%2C25.52%2C84.67%2C46.93%2C102.19%2C23.06%2C18.86%2C46%2C25.26%2C47%2C25.53a8%2C8%2C0%2C0%2C0%2C4.2%2C0c1-.27%2C23.91-6.67%2C47-25.53C198.48%2C196.67%2C224%2C164.72%2C224%2C112V56A16%2C16%2C0%2C0%2C0%2C208%2C40Zm0%2C72c0%2C37.07-13.66%2C67.16-40.6%2C89.42A129.3%2C129.3%2C0%2C0%2C1%2C128%2C223.62a128.25%2C128.25%2C0%2C0%2C1-38.92-21.81C61.82%2C179.51%2C48%2C149.3%2C48%2C112l0-56%2C160%2C0ZM82.34%2C141.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32l-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0Z'%2F%3E%3C%2Fsvg%3E");}
.ic-sparkle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M197.58%2C129.06%2C146%2C110l-19-51.62a15.92%2C15.92%2C0%2C0%2C0-29.88%2C0L78%2C110l-51.62%2C19a15.92%2C15.92%2C0%2C0%2C0%2C0%2C29.88L78%2C178l19%2C51.62a15.92%2C15.92%2C0%2C0%2C0%2C29.88%2C0L146%2C178l51.62-19a15.92%2C15.92%2C0%2C0%2C0%2C0-29.88ZM137%2C164.22a8%2C8%2C0%2C0%2C0-4.74%2C4.74L112%2C223.85%2C91.78%2C169A8%2C8%2C0%2C0%2C0%2C87%2C164.22L32.15%2C144%2C87%2C123.78A8%2C8%2C0%2C0%2C0%2C91.78%2C119L112%2C64.15%2C132.22%2C119a8%2C8%2C0%2C0%2C0%2C4.74%2C4.74L191.85%2C144ZM144%2C40a8%2C8%2C0%2C0%2C1%2C8-8h16V16a8%2C8%2C0%2C0%2C1%2C16%2C0V32h16a8%2C8%2C0%2C0%2C1%2C0%2C16H184V64a8%2C8%2C0%2C0%2C1-16%2C0V48H152A8%2C8%2C0%2C0%2C1%2C144%2C40ZM248%2C88a8%2C8%2C0%2C0%2C1-8%2C8h-8v8a8%2C8%2C0%2C0%2C1-16%2C0V96h-8a8%2C8%2C0%2C0%2C1%2C0-16h8V72a8%2C8%2C0%2C0%2C1%2C16%2C0v8h8A8%2C8%2C0%2C0%2C1%2C248%2C88Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M197.58%2C129.06%2C146%2C110l-19-51.62a15.92%2C15.92%2C0%2C0%2C0-29.88%2C0L78%2C110l-51.62%2C19a15.92%2C15.92%2C0%2C0%2C0%2C0%2C29.88L78%2C178l19%2C51.62a15.92%2C15.92%2C0%2C0%2C0%2C29.88%2C0L146%2C178l51.62-19a15.92%2C15.92%2C0%2C0%2C0%2C0-29.88ZM137%2C164.22a8%2C8%2C0%2C0%2C0-4.74%2C4.74L112%2C223.85%2C91.78%2C169A8%2C8%2C0%2C0%2C0%2C87%2C164.22L32.15%2C144%2C87%2C123.78A8%2C8%2C0%2C0%2C0%2C91.78%2C119L112%2C64.15%2C132.22%2C119a8%2C8%2C0%2C0%2C0%2C4.74%2C4.74L191.85%2C144ZM144%2C40a8%2C8%2C0%2C0%2C1%2C8-8h16V16a8%2C8%2C0%2C0%2C1%2C16%2C0V32h16a8%2C8%2C0%2C0%2C1%2C0%2C16H184V64a8%2C8%2C0%2C0%2C1-16%2C0V48H152A8%2C8%2C0%2C0%2C1%2C144%2C40ZM248%2C88a8%2C8%2C0%2C0%2C1-8%2C8h-8v8a8%2C8%2C0%2C0%2C1-16%2C0V96h-8a8%2C8%2C0%2C0%2C1%2C0-16h8V72a8%2C8%2C0%2C0%2C1%2C16%2C0v8h8A8%2C8%2C0%2C0%2C1%2C248%2C88Z'%2F%3E%3C%2Fsvg%3E");}
.ic-note{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M88%2C96a8%2C8%2C0%2C0%2C1%2C8-8h64a8%2C8%2C0%2C0%2C1%2C0%2C16H96A8%2C8%2C0%2C0%2C1%2C88%2C96Zm8%2C40h64a8%2C8%2C0%2C0%2C0%2C0-16H96a8%2C8%2C0%2C0%2C0%2C0%2C16Zm32%2C16H96a8%2C8%2C0%2C0%2C0%2C0%2C16h32a8%2C8%2C0%2C0%2C0%2C0-16ZM224%2C48V156.69A15.86%2C15.86%2C0%2C0%2C1%2C219.31%2C168L168%2C219.31A15.86%2C15.86%2C0%2C0%2C1%2C156.69%2C224H48a16%2C16%2C0%2C0%2C1-16-16V48A16%2C16%2C0%2C0%2C1%2C48%2C32H208A16%2C16%2C0%2C0%2C1%2C224%2C48ZM48%2C208H152V160a8%2C8%2C0%2C0%2C1%2C8-8h48V48H48Zm120-40v28.7L196.69%2C168Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M88%2C96a8%2C8%2C0%2C0%2C1%2C8-8h64a8%2C8%2C0%2C0%2C1%2C0%2C16H96A8%2C8%2C0%2C0%2C1%2C88%2C96Zm8%2C40h64a8%2C8%2C0%2C0%2C0%2C0-16H96a8%2C8%2C0%2C0%2C0%2C0%2C16Zm32%2C16H96a8%2C8%2C0%2C0%2C0%2C0%2C16h32a8%2C8%2C0%2C0%2C0%2C0-16ZM224%2C48V156.69A15.86%2C15.86%2C0%2C0%2C1%2C219.31%2C168L168%2C219.31A15.86%2C15.86%2C0%2C0%2C1%2C156.69%2C224H48a16%2C16%2C0%2C0%2C1-16-16V48A16%2C16%2C0%2C0%2C1%2C48%2C32H208A16%2C16%2C0%2C0%2C1%2C224%2C48ZM48%2C208H152V160a8%2C8%2C0%2C0%2C1%2C8-8h48V48H48Zm120-40v28.7L196.69%2C168Z'%2F%3E%3C%2Fsvg%3E");}
.ic-server{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C136H48a16%2C16%2C0%2C0%2C0-16%2C16v48a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V152A16%2C16%2C0%2C0%2C0%2C208%2C136Zm0%2C64H48V152H208v48Zm0-160H48A16%2C16%2C0%2C0%2C0%2C32%2C56v48a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V56A16%2C16%2C0%2C0%2C0%2C208%2C40Zm0%2C64H48V56H208v48ZM192%2C80a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C80Zm0%2C96a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C176Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M208%2C136H48a16%2C16%2C0%2C0%2C0-16%2C16v48a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V152A16%2C16%2C0%2C0%2C0%2C208%2C136Zm0%2C64H48V152H208v48Zm0-160H48A16%2C16%2C0%2C0%2C0%2C32%2C56v48a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V56A16%2C16%2C0%2C0%2C0%2C208%2C40Zm0%2C64H48V56H208v48ZM192%2C80a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C80Zm0%2C96a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C176Z'%2F%3E%3C%2Fsvg%3E");}
.ic-download{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C144v64a8%2C8%2C0%2C0%2C1-8%2C8H40a8%2C8%2C0%2C0%2C1-8-8V144a8%2C8%2C0%2C0%2C1%2C16%2C0v56H208V144a8%2C8%2C0%2C0%2C1%2C16%2C0Zm-101.66%2C5.66a8%2C8%2C0%2C0%2C0%2C11.32%2C0l40-40a8%2C8%2C0%2C0%2C0-11.32-11.32L136%2C124.69V32a8%2C8%2C0%2C0%2C0-16%2C0v92.69L93.66%2C98.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32Z'%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20256%20256'%3E%3Cpath%20d%3D'M224%2C144v64a8%2C8%2C0%2C0%2C1-8%2C8H40a8%2C8%2C0%2C0%2C1-8-8V144a8%2C8%2C0%2C0%2C1%2C16%2C0v56H208V144a8%2C8%2C0%2C0%2C1%2C16%2C0Zm-101.66%2C5.66a8%2C8%2C0%2C0%2C0%2C11.32%2C0l40-40a8%2C8%2C0%2C0%2C0-11.32-11.32L136%2C124.69V32a8%2C8%2C0%2C0%2C0-16%2C0v92.69L93.66%2C98.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32Z'%2F%3E%3C%2Fsvg%3E");}

/* ============================================================================
 * MARKETING PAGE COMPONENTS — added for the Quick Start + About refresh.
 * Shared here (single source of truth) so the static pages can't drift.
 * Used by: guides.html (Quick Start), about.html. Reusable on any static page.
 * ========================================================================== */

/* ---- Screenshot frame (browser chrome + drop zone) -------------------------
 * Swap the .shot-ph block for <img src="/screenshots/NAME.png" alt="..."> when a
 * real screenshot is ready; the chrome, border, and shadow stay either way. */
.shotframe{margin:0;border:1px solid rgba(28,43,32,.10);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 40px 90px -46px rgba(28,43,32,.55),0 12px 30px -20px rgba(28,43,32,.35);}
/* The framed screenshot can be wrapped in a link (e.g. into the Help Center).
   Block + no margin so the linked frame sits exactly where a bare .shotframe did. */
.shotlink{display:block;margin:0;}
/* Quick Start: each step pairs its copy with the matching screenshot inline. */
.entry .shotlink{margin-top:24px;}
.shot-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);}
.shot-dot{width:11px;height:11px;border-radius:50%;background:var(--line-2);}
.shot-url{margin-left:8px;font-size:12px;color:var(--muted);}
.shotframe img{display:block;width:100%;height:auto;}
/* Full-app screenshots squeezed to a phone column become illegible text soup.
   Below 680px, crop+zoom into the top-left (most info-dense) corner instead
   of shrinking the whole frame uniformly. */
@media(max-width:680px){
  .shotframe{max-height:280px;}
  .shotframe img{width:230%;max-width:none;}
}
.shot-ph{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--warm-1),var(--warm-2));color:var(--muted);text-align:center;padding:24px;}
.shot-ph.tall{aspect-ratio:16/9;}
.shot-ph .chip{width:54px;height:54px;border-radius:10px;background:var(--paper);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.shot-ph .chip i{background:var(--brand);}
.shot-ph .t{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);}
.shot-ph .f{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--brand-dk);background:var(--paper);border:1px dashed var(--line-2);border-radius:7px;padding:3px 10px;}

/* ---- Generic centered section heading (label + title + sub) ---------------- */
.sectlabel{text-align:center;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);}
.secthead{text-align:center;font-size:clamp(26px,4vw,34px);margin:8px 0 6px;}
.sectsub{text-align:center;color:var(--muted);max-width:54ch;margin:0 auto 42px;}

/* ---- Quick Start: "Browse by topic" cards (deep-link into Help Center) ----- */
.topicsec{background:#FDF8F3;border-top:1px solid rgba(187,90,54,.12);border-bottom:1px solid rgba(187,90,54,.12);margin-top:48px;}
.topicwrap{max-width:var(--maxw);margin:0 auto;padding:60px 24px;}
.topicgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;}
.topiccard{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px;transition:transform .15s ease,box-shadow .15s ease;}
.topiccard:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.topiccard .ico{width:46px;height:46px;border-radius:var(--radius);background:var(--light);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.topiccard h3{font-size:17px;margin:0 0 4px;}
.topiccard p{margin:0 0 10px;color:var(--muted);font-size:14px;}
.topiccard a{font-weight:600;color:var(--brand);font-size:14px;}

/* ===== About: "Kept Record" ledger ========================================
 * The About page is laid out as a kept record: a dark frontispiece "cover",
 * then numbered entries hung off a single terracotta margin rail (the page's
 * signature). Used only by about.html. */

/* ---- Frontispiece cover ---- */
.cover{background:var(--dark);color:#EAE3D6;position:relative;overflow:hidden;}
.cover .cwrap{max-width:var(--maxw-narrow);margin:0 auto;padding:44px 24px 58px;position:relative;}
.cover .cmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;font-size:19px;color:#F4EEE2;text-transform:uppercase;letter-spacing:.2em;margin-bottom:26px;}
.cover .cmark .mark{width:19px;height:27px;-webkit-mask:url(/brand-mark.svg) center/contain no-repeat;mask:url(/brand-mark.svg) center/contain no-repeat;background:var(--mid);}
.cover h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.02em;color:#F4EEE2;max-width:15ch;margin:0;}
.cover h1 .hl{color:var(--brand);font-style:italic;font-weight:500;}
.cover .crule{width:64px;height:2px;background:var(--brand);margin:30px 0 24px;}
.cover .lead{font-size:19px;line-height:1.6;color:rgba(234,227,214,.84);max-width:54ch;margin:0;}

/* ---- The record: numbered entries on a single margin rail (SIGNATURE) ---- */
.record{max-width:880px;margin:0 auto;padding:8px 24px 8px 96px;position:relative;}
/* Ledger variant (About): widen the gutter so the rail can carry section labels */
.record--ledger{padding-left:160px;}
.record::before{content:"";position:absolute;top:24px;bottom:24px;left:48px;width:1.5px;
  background:linear-gradient(180deg,transparent 0,var(--accent) 36px,var(--accent) calc(100% - 36px),transparent 100%);
  opacity:.5;transform:scaleY(0);transform-origin:top;animation:rail 1s .15s cubic-bezier(.6,0,.2,1) forwards;}
.record--ledger::before{left:128px;}
@keyframes rail{to{transform:scaleY(1);}}
.entry{position:relative;padding:42px 0;opacity:0;transform:translateY(10px);animation:settle .6s ease forwards;}
.entry:nth-of-type(1){animation-delay:.25s;} .entry:nth-of-type(2){animation-delay:.38s;}
.entry:nth-of-type(3){animation-delay:.5s;} .entry:nth-of-type(4){animation-delay:.62s;}
.entry:nth-of-type(5){animation-delay:.74s;} .entry:nth-of-type(6){animation-delay:.86s;}
@keyframes settle{to{opacity:1;transform:none;}}
.entry + .entry{border-top:1px solid var(--line);}
/* entry number — a ledger tab sitting on the rail (manila bg masks the line) */
.entry .no{position:absolute;left:-72px;top:40px;width:48px;text-align:center;font-family:var(--display);font-weight:500;font-size:30px;line-height:1;color:var(--accent);background:var(--surface);padding:6px 0;}
.record .tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:14px;}
/* On About, the section tags ride the margin rail — a running index down the spine */
.record--ledger .tag{position:absolute;left:-140px;top:50px;width:96px;text-align:right;margin:0;}
.entry h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0 0 16px;max-width:20ch;border:none;padding:0;}
.entry .lead{font-size:19px;line-height:1.55;color:var(--ink);margin:0 0 14px;}
.entry p{font-size:16.5px;color:var(--ink);max-width:62ch;}
.entry p + p{margin-top:13px;}
/* the dashboard screenshot block inside entry 01 */
.shotcap{margin:30px 0 12px;}
.shotcap .sh{font-family:var(--display);font-weight:500;font-size:22px;color:var(--ink);display:block;}
.shotcap .ss{font-size:15.5px;color:var(--muted);margin-top:5px;max-width:56ch;line-height:1.55;}

/* "Inside the record" strip — three facets as labeled tiles (About).
   Replaced the old screenshot thumbnails, which were illegible at third-width. */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:26px 0 8px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.triad-cell{background:var(--paper);padding:20px 20px 22px;}
.triad-label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dk);display:block;margin-bottom:9px;}
.triad-desc{display:block;font-size:15px;line-height:1.5;color:var(--ink);}
@media(max-width:560px){.triad{grid-template-columns:1fr;}}

/* ---- "What I believe" as record entries (not floating cards) ---- */
.tenets{margin-top:6px;border-top:1px solid var(--line);}
.tenet{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);}
.tenet .rn{font-family:var(--mono);font-size:13px;color:var(--accent-dk);padding-top:4px;letter-spacing:.05em;}
.tenet h3{font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink);margin:0 0 5px;}
.tenet p{font-size:15.5px;color:var(--ink);margin:0;max-width:58ch;}

/* ---- founder note — the about page's signature beat. A "kept" green left edge
   ties it to the margin rail; the opening line is enlarged and it closes with a
   handwritten-feel serif sign-off, so the one human moment carries real weight. */
.founder{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 14px 14px 0;padding:28px 30px;margin-top:24px;box-shadow:0 14px 34px -26px rgba(28,43,32,.45);}
.founder p{margin:0;font-size:16px;line-height:1.6;color:var(--ink);max-width:none;}
.founder p + p{margin-top:13px;}
.founder .lead{font-size:20px;line-height:1.5;}
.founder .name{font-family:var(--display);font-weight:600;color:var(--ink);}
.founder .sign{font-family:var(--display);font-style:italic;font-size:19px;color:var(--accent-dk);margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}

/* ---- colophon (closing CTA) ---- */
.colophon{position:relative;padding:42px 0 8px;}
/* Pitch on the left, action on the right — fills the dark box instead of
 * leaving the right half empty under a left-capped form. */
.colophon .box{background:var(--dark);color:#EAE3D6;border-radius:14px;padding:40px 40px;display:grid;grid-template-columns:1fr minmax(240px,290px);column-gap:48px;row-gap:6px;align-items:center;}
.colophon h2{font-family:var(--display);font-weight:500;font-size:clamp(24px,3.2vw,32px);color:#F4EEE2;margin:0;border:none;padding:0;grid-column:1;grid-row:1;align-self:end;}
.colophon p{color:rgba(234,227,214,.8);max-width:48ch;margin:0;grid-column:1;grid-row:2;align-self:start;}
.colophon .ea-form{margin:0;max-width:none;grid-column:2;grid-row:1 / 3;align-self:center;flex-direction:column;align-items:stretch;gap:10px;}
.colophon .ea-form input[type=email]{color:#F4EEE2;background:rgba(255,255,255,.06);border-color:rgba(234,227,214,.28);flex:0 0 auto;width:100%;}
.colophon .ea-form input[type=email]::placeholder{color:rgba(234,227,214,.5);}
.colophon .ea-form input[type=email]:focus{border-color:var(--brand);box-shadow:none;}
@media(max-width:680px){
  .colophon .box{grid-template-columns:1fr;row-gap:0;padding:32px 26px;}
  .colophon h2{grid-column:1;grid-row:auto;align-self:auto;margin-bottom:8px;}
  .colophon p{grid-column:1;grid-row:auto;align-self:auto;margin-bottom:20px;}
  .colophon .ea-form{grid-column:1;grid-row:auto;max-width:440px;}
}
@media(prefers-reduced-motion:reduce){
  .record::before{animation:none;transform:none;}
  .entry{animation:none;opacity:1;transform:none;}
}

/* ---- Responsive: collapse the new multi-column blocks on small screens ---- */
@media(max-width:880px){
  .topicgrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:680px){
  /* collapse the ledger rail: number goes inline above each entry */
  .record{padding-left:30px;}
  .record--ledger{padding-left:30px;}
  .record::before{left:13px;}
  .record--ledger::before{left:13px;}
  .record--ledger .tag{position:static;text-align:left;width:auto;margin:0 0 14px;}
  .entry .no{position:static;text-align:left;background:none;padding:0;font-size:24px;margin-bottom:4px;width:auto;}
}
@media(max-width:640px){
  .topicgrid{grid-template-columns:1fr;}
  .founder{padding:20px;}
}

/* ---- Help Center: docs layout (the margin rail, extended into a sidebar) ----
   Moved out of folkbase-help.html's old inline <style> so there is ONE
   stylesheet. Every bare selector (main / aside / section / ol) is scoped under
   .layout so it can never leak onto the record / prose pages. The sidebar reads
   as the record's margin rail: hairline gutter, mono-green section labels, an
   accent-green active marker. The page now opens on the shared dark .cover. */
.layout{display:flex;max-width:1180px;margin:0 auto;}
.layout main{flex:1;padding:36px 48px 80px;min-width:0;}

/* sidebar — desktop only, sits below the sticky topbar */
.layout aside{width:256px;flex-shrink:0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;padding:30px 18px;border-right:1px solid var(--line);}
.layout aside .tagline{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--dark);margin:0 0 20px;letter-spacing:-.015em;}
.layout aside nav a{display:block;padding:7px 12px;border-radius:9px;color:var(--ink);font-size:14px;font-weight:500;border-left:2px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.layout aside nav a:hover{background:var(--surface-2);text-decoration:none;}
/* active item — green marker (structure), echoing the record rail */
.layout aside nav a.active{background:var(--light);color:var(--accent-dk);font-weight:600;border-left-color:var(--accent);}
.layout aside nav a.cta-link{color:var(--brand);font-weight:600;}
.layout aside nav a.cta-link:hover{background:var(--light);}
/* section labels — mono green eyebrows, the sidebar's version of .record .tag */
.layout aside .group{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent-dk);font-weight:500;margin:22px 12px 8px;}

/* doc sections */
.layout main section{scroll-margin-top:80px;margin-bottom:42px;}
/* section folio — running part marker above each head, matched to the
   sidebar's .group part labels so a deep-linked reader knows which part they're in */
.layout main section .tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent-dk);font-weight:500;margin:0 0 6px;}
.layout main section h2{font-size:22px;border-bottom:1px solid var(--line-2);padding-bottom:8px;margin-bottom:8px;}
.layout main section .lede{color:var(--muted);margin-top:0;font-size:18px;}
.layout main ol{padding-left:22px;}
.layout main ol li{margin-bottom:9px;}
.layout main .grid{margin-top:18px;}

/* the cover's optional CTA (Help opens with a "take the tour" button) */
.cover .btn{margin-top:24px;}

/* doc widgets */
.kbd{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:13px;font-weight:600;color:var(--brand-dk);font-family:var(--sans);white-space:nowrap;box-shadow:0 1px 0 var(--line);}
.warn{background:#FBE7DC;border-left:4px solid var(--brand);border-radius:0 10px 10px 0;padding:13px 16px;margin:16px 0;font-size:14.5px;color:var(--ink);}
.warn b{color:var(--brand-dk);}
.steps-mini{font-size:14px;}
/* FAQ — definition list; hairline rules separate each Q/A so the block reads as
   discrete entries rather than a wall, matched to the record's other ruled devices */
.layout main .faq{margin:14px 0 0;}
.layout main .faq > div{padding:18px 0;border-top:1px solid var(--line);}
.layout main .faq > div:first-child{padding-top:2px;border-top:none;}
.layout main .faq dt{font-weight:600;font-size:16px;color:var(--ink);margin:0 0 6px;}
.layout main .faq dd{margin:0;font-size:15px;line-height:1.62;color:var(--muted);}
.layout main .faq dd strong{color:var(--ink);}

/* mobile in-page jump bar — replaces the sidebar under 820px */
.docjump{display:none;}

/* back-to-top FAB */
.to-top{position:fixed;right:22px;bottom:22px;width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50;}
.to-top.show{opacity:1;pointer-events:auto;}
.to-top:hover{text-decoration:none;transform:translateY(-2px);color:#fff;}

@media(max-width:820px){
  .layout{flex-direction:column;}
  .layout aside{display:none;}
  .layout main{padding:22px 20px 72px;}
  .docjump{display:flex;align-items:center;gap:12px;position:sticky;top:55px;z-index:20;background:rgba(251,248,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:11px 20px;}
  .docjump label{font-size:13px;font-weight:600;color:var(--muted);}
  .docjump select{margin-left:auto;font-family:var(--sans);font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);}
}

/* ---- updates / news page --------------------------------------------------- */
.up-head{max-width:var(--maxw);margin:0 auto;padding:52px 24px 8px;}
.up-kicker{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:10px;}
.up-head h1{font-family:var(--display);font-size:clamp(34px,5vw,52px);}
.up-head .lead{color:var(--muted);font-size:18px;margin-top:14px;max-width:60ch;}

.up-layout{max-width:var(--maxw);margin:0 auto;padding:28px 24px 80px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;}

/* feed */
.up-feed{display:flex;flex-direction:column;gap:40px;min-width:0;}
.up-post{border-bottom:1px solid var(--line);padding-bottom:36px;scroll-margin-top:80px;}
.up-post:last-child{border-bottom:none;padding-bottom:0;}
.up-post .up-date{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.04em;}
.up-post h2{font-size:clamp(23px,3vw,31px);margin:8px 0 0;display:flex;align-items:baseline;gap:10px;}
.up-post h2 .up-anchor{font-family:var(--mono);font-size:16px;color:var(--line-2);opacity:0;text-decoration:none;transition:opacity .15s ease,color .15s ease;}
.up-post h2:hover .up-anchor{opacity:1;color:var(--brand);}
.up-post .up-body{margin-top:14px;}
.up-post .up-body p{margin:0 0 12px;}
.up-post .up-body p:last-child{margin-bottom:0;}
.up-post:target h2{color:var(--brand-dk);}

/* sidebar */
.up-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:80px;}
.up-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow-sm);}
.up-card h3{font-family:var(--sans);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px;}
.up-links{display:flex;flex-direction:column;gap:9px;}
.up-links a{font-size:14.5px;color:var(--ink);font-weight:500;}
.up-links a:hover{color:var(--brand);}

.up-trust .up-row{padding:11px 0;border-top:1px solid var(--line);}
.up-trust .up-row:first-of-type{border-top:none;padding-top:0;}
.up-trust .k{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:5px;}
.up-trust .k.up-sub{margin-top:10px;}
.up-mono{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 8px;display:block;word-break:break-all;line-height:1.5;}
/* QR lightbox — pure-CSS modal (hidden checkbox toggles it; no JS, so it works
   with JavaScript disabled). .qr-group scopes the ~ combinator to one wallet. */
.qr-group{display:block;}
.qr-toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);}
.qr-open{display:inline-flex;align-items:center;margin-top:9px;padding:6px 11px;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--brand);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);transition:background .15s ease,border-color .15s ease,color .15s ease;}
.qr-open:hover{background:var(--paper);border-color:var(--line-2);color:var(--brand-dk);}
.qr-toggle:focus-visible ~ .qr-open{outline:2px solid var(--brand);outline-offset:2px;}
.qr-overlay{display:none;position:fixed;inset:0;z-index:90;background:rgba(20,18,16,.66);cursor:zoom-out;}
.qr-dialog{display:none;position:fixed;z-index:91;top:50%;left:50%;transform:translate(-50%,-50%);width:min(86vw,300px);flex-direction:column;align-items:center;gap:12px;padding:24px 22px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.qr-toggle:checked ~ .qr-overlay{display:block;}
.qr-toggle:checked ~ .qr-dialog{display:flex;}
.qr-close{position:absolute;top:6px;right:11px;cursor:pointer;font-size:23px;line-height:1;color:var(--muted);}
.qr-close:hover{color:var(--ink);}
.qr-cap{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.qr-dialog img{width:232px;height:232px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;}
.qr-addr{font-family:var(--mono);font-size:11.5px;color:var(--ink);text-align:center;word-break:break-all;line-height:1.5;}
.up-status{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--accent);}
.up-status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.up-status.pending{color:var(--muted);}
.up-status.pending .dot{background:var(--muted);}

/* CSP-safe disclosure (no JS) */
.disclose{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;}
.disclose>summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--brand);}
.disclose>summary::-webkit-details-marker{display:none;}
.disclose>summary::after{content:" \203A";color:var(--line-2);}
.disclose[open]>summary::after{content:" \2304";}
.disclose .disclose-body{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.6;}
.disclose .disclose-body code{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 5px;display:block;margin-top:6px;word-break:break-all;}

@media(max-width:860px){
  .up-layout{grid-template-columns:1fr;gap:32px;}
  .up-aside{position:static;}
  .up-head{padding-top:40px;}
}

/* ---- pricing page ----------------------------------------------------------
 * Plans + prices aren't final (see beta-docs/content-specs/pricing.md). Cards
 * lean on .price-tba for anything not yet decided instead of inventing numbers
 * or feature gates that don't exist in src/utils/entitlement.js yet. */
.pricing-banner{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;background:linear-gradient(180deg,var(--warm-1),var(--warm-2));border:1px solid var(--warm-line);border-radius:12px;padding:13px 22px;margin:0 0 30px;font-size:14.5px;color:var(--ink);text-align:center;}
.pricing-banner .ic{color:var(--accent);}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
.price-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 24px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
/* The anchor tier — warm peach wash, a crisp 2px brand edge (inset ring avoids
 * a layout shift vs the 1px siblings), and a stronger lift so it clearly reads
 * as the one to act on. */
.price-card.featured{border-color:var(--brand);background:linear-gradient(180deg,#FEFAF4,#F9E9DD);box-shadow:inset 0 0 0 1px var(--brand),0 22px 48px -26px rgba(196,96,58,.5);}
.price-card.featured:hover{box-shadow:inset 0 0 0 1px var(--brand),0 26px 52px -24px rgba(196,96,58,.55);}
.price-flag{position:absolute;top:-12px;left:24px;background:var(--brand);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:24px;}
.price-flag.now{background:var(--accent);}
/* Deeper redwood glyph (not the pale --brand on --light, which fell below the
 * 3:1 graphical-contrast bar and read as texture rather than wayfinding). */
.price-card .ico{width:44px;height:44px;border-radius:var(--radius);background:var(--light);display:flex;align-items:center;justify-content:center;color:#A8502C;margin-bottom:14px;}
.price-tier{font-family:var(--display);font-size:22px;margin-bottom:6px;}
.price-tagline{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:18px;min-height:54px;}
.price-amount{font-family:var(--display);font-size:40px;line-height:1;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px;}
.price-amount .per{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;}
/* Unpriced tiers: an unfilled ledger entry, not a "coming soon" chip. A warm
 * em-dash sits where the number will go; the cadence rides in .price-note. */
.price-amount.is-tba{font-size:30px;color:var(--muted);font-weight:500;}
.price-amount.is-tba .tba-dash{color:var(--mid);margin-right:4px;}
.price-note{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.price-features{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1;}
.price-features li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink);line-height:1.5;}
.price-features .ic-check{color:var(--accent);margin-top:2px;}
.price-card .btn,.price-card .btn-outline{margin-top:auto;justify-content:center;}
/* Closing band: FAQ on the left, early-access CTA panel on the right, spanning
 * the full width like the tier grid above — so the lower third reads as one
 * composition instead of a skinny column floating in a cream field. */
.section.pricing-tiers{padding-bottom:28px;}
.section.faq-cta{padding:36px 0 52px;}
.faq-cta-grid{display:grid;grid-template-columns:minmax(0,1fr) 376px;gap:56px;align-items:start;}
.faq-col .sectlabel,.faq-col .secthead{text-align:left;}
.faq-col .secthead{margin:8px 0 0;font-size:clamp(28px,3vw,36px);}
/* The CTA is a vertical panel here, not the full-width two-column box used on
 * about/contact/guides — so override the shared .colophon grid back to a stack.
 * Vertically centered against the FAQ column for presence. */
.faq-cta .colophon{padding:0;align-self:center;}
.faq-cta .colophon .box{grid-template-columns:1fr;row-gap:0;padding:34px 32px;}
.faq-cta .colophon h2{grid-column:1;grid-row:auto;align-self:auto;font-size:clamp(26px,2.4vw,31px);margin:0 0 12px;}
.faq-cta .colophon p{grid-column:1;grid-row:auto;align-self:auto;font-size:15px;line-height:1.6;margin:0 0 22px;max-width:none;}
.faq-cta .colophon .ea-form{grid-column:1;grid-row:auto;align-self:auto;gap:12px;}
/* White email field on the dark panel. */
.faq-cta .colophon .ea-form input[type=email]{background:#fff;color:var(--ink);border-color:transparent;padding:13px 15px;font-size:15px;}
.faq-cta .colophon .ea-form input[type=email]::placeholder{color:var(--muted);}
.faq-cta .colophon .ea-form input[type=email]:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(196,96,58,.35);}
.faq-cta .colophon .ea-form .btn{padding:13px 18px;font-size:15.5px;}
@media(max-width:860px){
  .faq-cta-grid{grid-template-columns:1fr;gap:40px;}
  .faq-cta .colophon{align-self:auto;}
  .faq-cta .colophon .box{max-width:600px;margin:0 auto;}
}
/* No own border-top: each .disclose already draws one, so the first row's rule
 * is the list's top edge. Stacking both put a doubled hairline right under the
 * centered heading that read as a stray underline. */
.price-faq{margin-top:22px;}
.price-faq .disclose{padding:16px 0;}
.price-faq .disclose>summary{font-family:var(--display);font-size:18px;color:var(--ink);font-weight:500;}
.price-faq .disclose-body{font-size:14.5px;line-height:1.6;margin-top:9px;}
@media(max-width:960px){
  .pricing-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .pricing-grid{grid-template-columns:1fr;}
  .price-tagline{min-height:0;}
}