/* Crispa shared design system.
   Extracted from the per-page <style> blocks, which were eight copy-pasted
   copies of the same system. Only rules that were byte-identical on all
   eight pages live here; anything page-specific stayed inline.
   Load order is preserved: this file is linked immediately before each
   page's remaining inline <style>, so page rules still override these. */
:root{
  --ink-950:#0E1118; --ink-900:#1A1D24; --ink-850:#20252E; --ink-800:#272D38;
  --ink-700:#384A6C; --ink-500:#58749F; --ink-200:#D1D9E6;
  --stone-50:#F6F3EF; --stone-100:#F0EBE4; --stone-200:#E0D5C8; --stone-300:#CCBAA5;
  --green-300:#8DC8AA; --green-400:#5DAA85; --green-500:#3C8D69; --green-600:#2E7A5A; --green-700:#225A44;
  --green-50:#DCEFE3;
  /* The rest of the brand palette. These are not new inventions — they were
     already in the system as the team-photo tints on /about, the amber "due"
     state in the product mock and the ink blue of the body copy. They are
     promoted to first-class ramps here so the site can carry colour beyond the
     one green: each of the four service areas owns one, and the pages borrow
     from that mapping. Every -600/-700 clears 4.5:1 on Warm Stone/50; the -300s
     are the on-dark counterparts. */
  --blue-300:#A9BEDD; --blue-500:#506697; --blue-600:#3B5A8C; --blue-700:#2C426B; --blue-50:#E7EDF7;
  --gold-300:#DDBE72; --gold-500:#A98530; --gold-600:#8C6A1E; --gold-700:#7A5C18; --gold-50:#F6EFD6;
  --clay-300:#DCA893; --clay-500:#B26A52; --clay-600:#9B4F38; --clay-700:#83432D; --clay-50:#F7E8E1;
  --teal-300:#9FC4BF; --teal-500:#4E827B; --teal-600:#3B6661; --teal-700:#2F5651; --teal-50:#E3EFED;
  --grey-400:#989898; --grey-500:#7C7C7C; --grey-600:#656565;
  --white:#FFFFFF;
  /* The accent a component paints itself with. Green is the default, so anything
     that is not explicitly tagged looks exactly as it did before; put .acc-blue /
     .acc-gold / .acc-clay / .acc-teal on a section or a card to retint everything
     inside it. --accent-rgb exists because rgba() cannot take a hex var. */
  --accent:var(--green-600); --accent-deep:var(--green-700); --accent-mid:var(--green-500);
  --accent-light:var(--green-300); --accent-soft:var(--green-50); --accent-rgb:46,122,90;
  --font-display:'Tiempos Text',Georgia,serif;
  --font-sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --maxw:1200px;
  /* One radius for the whole site. Change --r to retune every corner at once. */
  --r:6px; --r-lg:var(--r); --r-md:var(--r); --r-sm:var(--r);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-lg:0 30px 80px rgba(14,17,24,.45);
  --shadow-card:0 1px 2px rgba(14,17,24,.04),0 12px 32px rgba(14,17,24,.06);
}
/* ---------------------------------------------------------------------------
   WHAT EACH ACCENT MEANS. The palette is a signal, not decoration — a component
   only takes an accent when its content belongs to one of these. Anything else
   inherits its page's accent rather than being tinted ad hoc.

   ONE LICENSED EXCEPTION: a closed set of peers — the six values, the careers
   perks, the "what you get in return" cards — walks the palette in a fixed
   order instead. The colour is not claiming those cards belong to a category;
   it is showing the set is a set. Walk it in sequence so it reads as designed
   rather than scattered, and keep it to sets that are enumerable at a glance.

   GREEN IS CRISPA, and nothing else. It is the wordmark's colour, so it is
   reserved for us: primary CTAs, the brand line in the home hero, the Crispa
   step inside a diagram, a tick meaning "included", and the pages that are
   about the company. It deliberately no longer stands for a service area —
   when it did, it was both the brand and a category at once, so it ended up
   on everything and meant nothing.

   The four service areas take the four secondary colours, and everything that
   describes what we DO inherits from them:

     teal   the books and the data     Operational finance. Also the valuation
                                       database — the same records, published.
     blue   assurance and obligation   Compliance: statutory filings, VAT, tax.
     gold   what's ahead               Strategic finance: forecasts, runway,
                                       KPIs. Also deadlines and incentives.
     clay   counsel and judgement      Advisory: valuation, fundraising, the
                                       Insights series.

   Pages take the colour of what they are about: company pages (/about,
   /careers, /events, /techbbq, job ads) run green because they are about us;
   /valuation runs teal, /insights runs clay. Product pages (/, /services,
   /pricing) default to green for the brand voice, and each section inside them
   takes the colour of the area it describes.
   --------------------------------------------------------------------------- */
.acc-green{--accent:var(--green-600);--accent-deep:var(--green-700);--accent-mid:var(--green-500);--accent-light:var(--green-300);--accent-soft:var(--green-50);--accent-rgb:46,122,90}
.acc-blue{--accent:var(--blue-600);--accent-deep:var(--blue-700);--accent-mid:var(--blue-500);--accent-light:var(--blue-300);--accent-soft:var(--blue-50);--accent-rgb:59,90,140}
.acc-gold{--accent:var(--gold-600);--accent-deep:var(--gold-700);--accent-mid:var(--gold-500);--accent-light:var(--gold-300);--accent-soft:var(--gold-50);--accent-rgb:140,106,30}
.acc-clay{--accent:var(--clay-600);--accent-deep:var(--clay-700);--accent-mid:var(--clay-500);--accent-light:var(--clay-300);--accent-soft:var(--clay-50);--accent-rgb:155,79,56}
.acc-teal{--accent:var(--teal-600);--accent-deep:var(--teal-700);--accent-mid:var(--teal-500);--accent-light:var(--teal-300);--accent-soft:var(--teal-50);--accent-rgb:59,102,97}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--ink-950);background:var(--stone-50);-webkit-font-smoothing:antialiased}
/* Form controls do not inherit the font by default — without this the browser
   drops them to its own UI font (Arial on Chrome/macOS), which is the one way
   a third typeface still gets onto the page. */
button,input,select,textarea{font-family:inherit}
.skip-link{position:absolute;left:-9999px;top:0;z-index:500;background:var(--green-600);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;font-size:14px;font-weight:600}
.skip-link:focus{left:0}
main:focus{outline:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green-500);outline-offset:3px;border-radius:var(--r)}
.on-dark a:focus-visible,.on-dark button:focus-visible,.sec-dark a:focus-visible,.sec-dark button:focus-visible,.nav a:focus-visible,.nav button:focus-visible{outline-color:var(--green-300)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(44px,6.4vw,80px)}
h2{font-size:clamp(34px,4.6vw,56px)}
h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2}
p{line-height:1.62}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wide{max-width:1320px}
section{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--accent-deep);text-transform:none}
.muted{color:var(--ink-700)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:15px;padding:13px 22px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:background .12s ease,box-shadow .12s ease,border-color .12s ease;white-space:nowrap}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn-green{background:var(--ink-950);color:var(--stone-50)}
.btn-green:hover{background:var(--ink-800)}
.on-dark .btn-green,.sec-dark .btn-green{background:var(--stone-50);color:var(--ink-950)}
.on-dark .btn-green:hover,.sec-dark .btn-green:hover{background:#fff}
/* The nav CTA is the site's one permanent call to action, so it wears the brand
   green rather than the white the in-page buttons on ink use — the one element
   that should read as "us" from any page. It is green-600 and not var(--accent)
   on purpose: green is Crispa, and the nav belongs to the site rather than to
   whatever the page underneath it is about, so it must not turn teal on
   /valuation or clay on /insights. White on green-600 is 5.2:1. */
.nav .btn-green,.mobile-menu .btn-green{background:var(--green-600);color:#fff}
.nav .btn-green:hover,.mobile-menu .btn-green:hover{background:var(--green-700)}
/* The closing CTA band is the one place a filled green button earns its size:
   it is the brand's last word on the page rather than repeated furniture, and
   it sits alone on ink with nothing to compete with. */
.cta .btn-green{background:var(--green-600);color:#fff}
.cta .btn-green:hover{background:var(--green-700)}
.btn-ghost{background:transparent;color:var(--ink-950);border-color:var(--stone-300)}
.btn-ghost:hover{border-color:var(--ink-950)}
.btn-onlight-dark{background:var(--ink-950);color:var(--stone-50)}
.btn-onlight-dark:hover{background:var(--ink-900)}
.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.on-dark .btn-ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .logo-svg{height:26px;width:auto;color:#fff;transition:color .3s}
/* Same trick as .nav-toggle: the wordmark is a 26px-tall block, so its link
   was a 26px tap target. Pad it to 44px without moving it. */
.nav-inner>a:first-child{display:inline-flex;align-items:center;padding:9px 0;margin:-9px 0}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-size:15px;font-weight:500;color:rgba(255,255,255,.82);transition:color .12s ease}
.nav-links a:hover{color:#fff}
/* The page you're on reads in that page's accent instead of white — see also the
   .menu-pop and .mobile-menu rules below, since a current page can sit inside
   the dropdown. */
.nav-links a[aria-current="page"],.nav-links a[aria-current="page"]:hover{color:var(--accent-light)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .signin{font-size:15px;font-weight:500;color:rgba(255,255,255,.82)}
.nav-cta .signin:hover{color:#fff}
.nav.scrolled{background:rgba(14,17,24,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
/* The 26px glyph is padded out to a 44px hit area — the negative margin keeps
   it optically aligned with the logo and the nav's right edge. */
.nav-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:9px;margin:-9px -9px -9px 0}
.nav-toggle svg{width:26px;height:26px}
@media(max-width:920px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .mobile-menu{position:fixed;inset:0;z-index:99;background:var(--ink-950);display:none;flex-direction:column;padding:84px 26px 32px;gap:2px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-menu.open{display:flex}
  .mobile-menu a{color:#fff;font-family:var(--font-display);font-size:21px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-menu a[aria-current="page"]{color:var(--accent-light)}
  .mobile-menu .btn{margin-top:20px;font-size:16px;flex:none;justify-content:center}
}
@media(min-width:921px){.mobile-menu{display:none}}
.hero{position:relative;background:var(--ink-950);color:var(--stone-50);overflow:hidden;padding:170px 0 90px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,24,.72),rgba(14,17,24,.88));z-index:0}
.hero .container{position:relative;z-index:2}
.hero-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);background:rgba(255,255,255,.04);font-size:13px;font-weight:500;color:var(--stone-100);margin-bottom:30px}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-light);}
.hero h1{max-width:880px;color:#fff}
.hero h1 .grad{color:var(--accent-light)}
.hero-sub{font-size:clamp(18px,2vw,21px);color:var(--stone-200);max-width:600px;margin:26px 0 36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-trust{margin-top:30px;display:flex;align-items:center;gap:18px;font-size:13px;color:var(--grey-400);flex-wrap:wrap}
.hero-trust .sep{width:1px;height:14px;background:rgba(255,255,255,.18)}
.dash-wrap{position:relative;z-index:2;margin:64px auto 0;max-width:1060px;will-change:transform}
.dash{background:linear-gradient(180deg,#fff,#FBF9F6);border:1px solid rgba(255,255,255,.5);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.dash-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--stone-100);background:#fff}
.dash-bar .dots{display:flex;gap:6px}
.dash-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--stone-200)}
.dash-bar .crumb{font-size:13px;color:var(--grey-500);font-weight:500}
.dash-bar .pill{margin-left:auto;font-size:11px;font-weight:600;color:var(--green-700);background:var(--green-300);opacity:.9;padding:4px 10px;border-radius:var(--r);background:#DCEFE3}
.dash-body{display:grid;grid-template-columns:184px 1fr;min-height:360px}
.dash-side{border-right:1px solid var(--stone-100);padding:18px 14px;background:#FCFAF7;font-size:13px}
.dash-side .si{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r);color:var(--grey-600)}
.dash-side .si.on{background:#EAF4EE;color:var(--green-700);font-weight:600}
.dash-side .si b{width:8px;height:8px;border-radius:2px;background:currentColor;opacity:.5}
.dash-side .grp{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-400);margin:16px 0 6px 10px}
.dash-main{padding:22px 24px;color:var(--ink-950)}
.dash-hi{font-family:var(--font-display);font-size:20px;margin-bottom:2px}
.dash-date{font-size:12px;color:var(--grey-500);margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi{border:1px solid var(--stone-100);border-radius:var(--r);padding:13px 14px;background:#fff}
.kpi .l{font-size:11px;color:var(--grey-500);font-weight:500}
.kpi .v{font-family:var(--font-display);font-size:24px;margin-top:5px}
.kpi .d{font-size:11px;font-weight:600;margin-top:3px}
.kpi .up{color:var(--green-600)}
.kpi .dn{color:#9B4F38}
.chart{border:1px solid var(--stone-100);border-radius:var(--r);padding:16px;background:#fff}
.chart .ct{font-size:12px;color:var(--grey-500);font-weight:600;margin-bottom:8px;display:flex;justify-content:space-between}
.chart svg{width:100%;height:120px;display:block}
@media(max-width:680px){.dash-body{grid-template-columns:1fr}.dash-side{display:none}.kpis{grid-template-columns:repeat(2,1fr)}}
.cloud{padding:54px 0 8px;text-align:center;background:var(--stone-50);overflow:hidden}
.cloud .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-500);margin-bottom:26px}
.marq{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-track{display:flex;width:max-content;gap:64px;align-items:center;animation:marq 40s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track img{height:22px;width:auto;filter:grayscale(1) brightness(0);opacity:.42;transition:opacity .2s}
.marq-track img:hover{opacity:.75}
@keyframes marq{to{transform:translateX(-50%)}}
.sec{padding:104px 0}
.sec-dark{background:var(--ink-950);color:var(--stone-50)}
.sec-stone{background:var(--stone-100)}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin:14px 0 0}
.sec-head p{margin-top:18px;font-size:18px;color:var(--ink-700)}
.sec-dark .sec-head p{color:var(--stone-200)}
.sec-dark .eyebrow{color:var(--accent-light)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento .cell{position:relative;background:var(--ink-900);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);padding:30px;overflow:hidden;transition:border-color .12s ease,background .12s ease,opacity .7s var(--ease) var(--rd,0ms),transform .7s var(--ease) var(--rd,0ms)}
.bento .cell:hover{background:var(--ink-850);border-color:rgba(255,255,255,.16)}
.bento .c6{grid-column:span 6}
.bento .c4{grid-column:span 4}
.bento .c3{grid-column:span 3}
.bento .c2{grid-column:span 2}
.cell .ico{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;background:rgba(var(--accent-rgb),.22);background:color-mix(in srgb,var(--accent-light) 18%,transparent);color:var(--accent-light);margin-bottom:18px}
.cell .ico svg{width:22px;height:22px}
/* Six ink cards with nothing to tell them apart; the rule above each heading
   carries the card's accent. */
.bento .cell h3::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--accent-light);margin-bottom:14px}
.cell h3{color:#fff}
.cell p{color:var(--stone-200);font-size:15px;margin-top:10px;max-width:46ch}
.cell .stat{font-family:var(--font-display);font-size:40px;color:#fff;line-height:1}
.cell .stat .u{font-size:18px;color:var(--accent-light)}
.bento-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
.mini-list{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.mini-list .row{display:flex;align-items:center;gap:10px;font-size:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:10px 12px;color:var(--stone-100)}
.mini-list .row .tick{width:16px;height:16px;border-radius:50%;background:var(--accent-mid);display:grid;place-items:center;color:#fff;flex:none}
.mini-list .row .tick svg{width:10px;height:10px}
.mini-list .row .amt{margin-left:auto;color:var(--accent-light);font-weight:600}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento .c6,.bento .c4,.bento .c3,.bento .c2{grid-column:span 2}.bento-feature{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
/* The three steps carry three different accents, so the sequence reads as a
   progression rather than as the same green card printed three times. */
.step{padding:30px;border:1px solid var(--stone-200);border-top:3px solid var(--accent);border-radius:var(--r-lg);background:#fff;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-display);font-size:15px;color:var(--accent-deep);font-weight:600}
.step h3{margin:14px 0 8px}
.step p{color:var(--ink-700);font-size:15px}
@media(max-width:780px){.steps{grid-template-columns:1fr}}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:left}
.metric .n{font-family:var(--font-display);font-size:clamp(40px,5vw,62px);color:#fff;line-height:1}
.metric .n .u{color:var(--accent-light);font-size:.5em}
.metric .l{margin-top:10px;font-size:14px;color:var(--stone-200)}
@media(max-width:780px){.metrics{grid-template-columns:1fr 1fr;gap:36px 24px}}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--stone-200)}
.sec-badge{padding:38px 26px;border-left:1px solid var(--stone-200)}
.sec-badge:first-child{border-left:none;padding-left:0}
.sec-badge img{height:62px;width:auto;margin-bottom:20px}
.sec-badge h4{font-family:var(--font-display);font-size:20px;margin-bottom:10px}
.sec-badge p{font-size:14px;color:var(--ink-700)}
@media(max-width:860px){.sec-grid{grid-template-columns:1fr 1fr}.sec-badge:nth-child(odd){border-left:none;padding-left:0}}
@media(max-width:520px){.sec-grid{grid-template-columns:1fr}.sec-badge{border-left:none;padding-left:0}}
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--font-display);font-size:clamp(26px,3.4vw,40px);line-height:1.32;color:#fff}
.quote .who{margin-top:26px;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.quote .who-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.quote .who span{display:block;font-weight:400;color:var(--stone-200);font-size:14px;margin-top:2px}
.quote-metrics{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:44px}
.quote-metrics .qm .n{font-family:var(--font-display);font-size:34px;color:var(--accent-light)}
.quote-metrics .qm .l{font-size:13px;color:var(--stone-200)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price{display:flex;flex-direction:column;background:#fff;border:1px solid var(--stone-200);border-radius:var(--r-lg);padding:32px;transition:box-shadow .12s ease,opacity .7s var(--ease) var(--rd,0ms),transform .7s var(--ease) var(--rd,0ms)}
.price:hover{box-shadow:var(--shadow-card)}
.price{border-top:3px solid var(--accent)}
.price.pop{border:1.5px solid var(--accent);border-top:3px solid var(--accent);box-shadow:0 18px 50px rgba(var(--accent-rgb),.14)}
.price .tag{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--accent-deep);background:var(--accent-soft);border-radius:var(--r);padding:4px 12px;align-self:flex-start;margin-bottom:14px}
.price h3{font-size:23px}
.price .desc{font-size:14px;color:var(--ink-700);margin:8px 0 18px;min-height:42px}
.price .amt{font-family:var(--font-display);font-size:42px}
.price .amt small{font-size:15px;color:var(--grey-500);font-family:var(--font-sans)}
.price ul{list-style:none;margin:20px 0 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.price li{font-size:14px;padding-left:26px;position:relative;color:var(--ink-950)}
/* The tick used to be a green stroke baked into a data-URI, which no variable
   can reach. The disc and the tick are now two layers: a tinted circle, and a
   masked glyph that takes its colour from the accent like everything else. */
.price li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--accent-soft)}
.price li::after{content:"";position:absolute;left:3.5px;top:6.5px;width:9px;height:9px;background:var(--accent-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/9px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/9px no-repeat}
.price .btn{justify-content:center}
@media(max-width:880px){.price-grid{grid-template-columns:1fr}}
.cta{position:relative;background:var(--ink-950);color:#fff;overflow:hidden;text-align:center;padding:120px 0}
.cta .container{position:relative;z-index:2}
.cta h2{max-width:740px;margin:0 auto 18px}
.cta p{color:var(--stone-200);max-width:520px;margin:0 auto 34px}
.cta .hero-actions{justify-content:center}
.foot{background:var(--stone-50);border-top:1px solid var(--stone-200);padding:74px 0 38px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:42px;margin-bottom:48px}
.foot .logo-svg{height:24px;color:var(--ink-950);margin-bottom:18px}
.foot-brand p{font-size:14px;color:var(--ink-700);line-height:1.7}
.foot h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-500);margin-bottom:16px;font-weight:600;font-family:var(--font-sans)}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot li a{font-size:14px;color:var(--ink-700)}
.foot li a:hover{color:var(--ink-950)}
.foot-bottom{border-top:1px solid var(--stone-200);padding-top:22px;display:flex;justify-content:space-between;font-size:13px;color:var(--grey-500);flex-wrap:wrap;gap:10px}
.foot-mark{margin-top:8px}
.foot-mark svg{width:100%;height:auto;color:var(--ink-950);opacity:.96}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.reveal{opacity:0;transform:translateY(26px)}
:where(.reveal){transition:opacity .7s var(--ease) var(--rd,0ms),transform .7s var(--ease) var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}
.scale-in{opacity:0;transform:scale(.97) translateY(20px)}
:where(.scale-in){transition:opacity .8s var(--ease) var(--rd,0ms),transform .8s var(--ease) var(--rd,0ms)}
.scale-in.in{opacity:1;transform:none}
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent-mid);z-index:200;transition:width .1s linear}
@media (prefers-reduced-motion:reduce){
  .reveal,.scale-in{opacity:1!important;transform:none!important;transition:none!important}
  .marq-track{animation:none!important}
  .dash-wrap{transform:none!important}
  .progress{display:none}
  html{scroll-behavior:auto}
}
.has-menu{position:relative}
.menu-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:15px;font-weight:500;color:rgba(255,255,255,.82);padding:0;transition:color .12s ease}
.menu-trigger:hover,.has-menu:hover .menu-trigger{color:#fff}
.menu-trigger svg{width:13px;height:13px;transition:transform .2s var(--ease)}
.has-menu:hover .menu-trigger svg,.menu-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-pop{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:190px;background:rgba(18,21,28,.97);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.has-menu:hover .menu-pop,.has-menu:focus-within .menu-pop,.menu-pop.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu-pop::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px}
.menu-pop a{padding:11px 14px;border-radius:var(--r-md);font-size:15px;font-weight:500;color:rgba(255,255,255,.82)}
.menu-pop a:hover{background:rgba(255,255,255,.07);color:#fff}
/* Current page inside the dropdown: tint the item, and the closed trigger too,
   so you can see where you are without opening the menu. */
.menu-pop a[aria-current="page"],.menu-pop a[aria-current="page"]:hover{color:var(--accent-light)}
.has-menu.is-current .menu-trigger,.has-menu.is-current:hover .menu-trigger{color:var(--accent-light)}
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:560px){
  .container{padding:0 20px}
  .sec{padding:72px 0}
  .cta{padding:88px 0}
  /* 170px of hero head-room is right under a 1440px viewport and absurd under a
     390px one, where it pushes the headline most of the way down the screen. */
  .hero{padding:128px 0 72px}
  /* The trust line wraps to one item per row on a phone, which left the pipe
     dividers dangling at the end of each line. Stack it explicitly instead. */
  .hero-trust{flex-direction:column;align-items:flex-start;gap:9px}
  .hero-trust .sep{display:none}
  /* Footer links were 19px-tall targets separated by 11px of dead space.
     Trading the gap for padding keeps the same rhythm but makes the whole
     row tappable. */
  .foot ul{gap:0}
  .foot li a{display:inline-block;padding:7px 0}
}
@media(min-width:741px) and (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .c6,.bento .c4{grid-column:span 2}
  .bento .c3,.bento .c2{grid-column:span 1}
  .insights-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:921px) and (max-width:1120px){
  .nav-links{gap:20px}
  .nav-cta{gap:10px}
  .nav .btn{padding:9px 16px}
}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:400;display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap;padding:15px 24px;background:rgba(14,17,24,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);color:#E6E2DB;transform:translateY(100%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.consent.show{transform:none}
.consent p{font-size:13px;max-width:640px;color:#C9CFD8;margin:0}
.consent p a{color:#8DC8AA;text-decoration:underline}
.consent-actions{display:flex;gap:10px;flex:none}
.consent button{font-family:var(--font-sans);font-size:13px;font-weight:600;border-radius:var(--r);padding:9px 18px;cursor:pointer;border:1px solid transparent}
.consent .c-accept{background:var(--stone-50);color:var(--ink-950)}
.consent .c-decline{background:transparent;color:#E6E2DB;border-color:rgba(255,255,255,.28)}
@media(max-width:560px){.consent{flex-direction:column;gap:12px;text-align:center}}