/* ============================================================================
   Flero marketing site — shared chrome.

   Everything in here is used by more than one page: design tokens, the nav and
   mega-menu, buttons, shared typography, the reusable content components
   (trust columns, testimonial card, FAQ rows), the closing CTA band, the
   footer, and the case-study modal.

   Page-specific CSS stays inline in each page's <style> block, which is linked
   AFTER this file so page rules win ties.

   Rules moved out of v3.html are verbatim. The mobile nav is the only new CSS.
   Design source of truth: ~/Desktop/flero/Brand/DESIGN.md
   ========================================================================== */

/* ── FONTS: self-hosted, no third party ──────────────────────────────────────
   Served from assets/fonts/ instead of Google Fonts, so no visitor IP leaks to
   Google and the CSP needs no font/style origin beyond 'self'. Both are variable
   fonts spanning weights 100-900 in one file. Inter has its optical-size axis
   pinned out (we never varied it). font-display:swap shows text immediately in a
   fallback, then swaps when the webfont arrives. */
@font-face{
  font-family:"Figtree";
  src:url("/fonts/Figtree.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface2:#F5F6FA;
  --line:#E4E7F2;
  --line2:#CBD2EC;
  --ink:#101223;
  --muted:#565A6E;
  --faint:#8B90A6;
  --blue:#1250FF;
  --blue-deep:#0F42D1;
  --peri:#8CA9EF;
  --peri-soft:rgba(140,169,239,.16);
  --wash:#DCE7FE;   /* light periwinkle panel behind grouped sections (see .frame) */
  --sun:#F6D874;    /* warm yellow band: the "first month is on us" callout and the pricing bridge card */
  --cta:#1585DC;
  --cta-deep:#1274C4;
  --brand:#1250FF;
  --pd-bg:#0B0C14;
  --serif:"Figtree", sans-serif;
  --body:"Inter", sans-serif;
  --label:"Figtree", sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:var(--bg);}
section[id]{scroll-margin-top:76px;}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
a:focus-visible, summary:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px;}
/* smooth anchor scrolling is motion too; every page opts out, not just the homepage */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* keyboard users land here first; visually hidden until focused */
.skip-link{position:absolute; left:-9999px; top:0; z-index:400; background:var(--surface); color:var(--ink); border:1px solid var(--line2); border-radius:10px; padding:10px 16px; font-family:var(--body); font-size:14px; text-decoration:none;}
.skip-link:focus{left:12px; top:12px;}

/* ── NAV: transparent over the blue hero, solid white past it or while a panel is open ── */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:transparent; border-bottom:1px solid transparent; transition:background .25s, border-color .25s;}
.nav .brand{color:var(--ink); text-decoration:none; display:flex; align-items:center; transition:color .25s;}
.nav .brand svg{height:26px; width:auto; display:block;}
.nav .nav-menu{display:flex; gap:6px; position:absolute; left:50%; transform:translateX(-50%); align-items:center;}
.mitem{position:static;}
.mitem:hover::after, .mitem:focus-within::after{content:""; position:absolute; left:0; right:0; top:100%; height:16px;}
.mlabel{font-family:var(--body); font-weight:500; font-size:13.5px; color:var(--muted); background:none; border:none; cursor:pointer; padding:10px 12px; border-radius:9999px; text-decoration:none; display:inline-block; transition:color .15s, background .15s;}
.mitem:hover .mlabel, .mitem:focus-within .mlabel, .mlabel:hover{color:var(--ink); background:var(--surface2);}
.nav:is(.solid, :has(.mitem:is(:hover, :focus-within))){background:#fff; border-bottom-color:transparent;}
.nav:is(.solid, :has(.mitem:is(:hover, :focus-within))) .brand{color:var(--ink);}
.nav:is(.solid, :has(.mitem:is(:hover, :focus-within))) .mlabel{color:var(--muted);}
.nav:is(.solid, :has(.mitem:is(:hover, :focus-within))) :is(.mitem:hover .mlabel, .mitem:focus-within .mlabel, .mlabel:hover){color:var(--ink); background:var(--surface2);}
.nav:is(.solid, :has(.mitem:is(:hover, :focus-within))) .navcta{color:#fff; border-color:var(--cta); background:var(--cta);}
.nav:is(.solid, :has(.mitem:is(:hover, :focus-within))) .navcta:hover{background:var(--cta-deep); border-color:var(--cta-deep);}
/* nav over a blue band (homepage panel during scroll-away, or the footer/close band):
   don't paint the nav its own blue fill (that "stitches" a full-width blue strip over an
   inset panel); stay transparent so the blue behind shows through, and only recolour the
   elements to white below. !important because the .solid rules carry inflated specificity
   from their :has() argument. */
.nav.on-blue{background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom-color:transparent !important;}
/* ...but over a FULL-WIDTH blue band (the close/footer band, or flero-ai's full-blue subhero;
   toggled as .on-brand by nav-v3.js) paint the nav that same brand blue. The fixed bar's
   sub-pixel bottom edge then lands blue-on-blue, so the white page background never shows
   through as a 1px hairline. Not set over the inset homepage hero panel, where a full-width
   fill would stitch a bar across its rounded edges. */
.nav.on-blue.on-brand{background:var(--brand) !important;}
.nav.on-blue .brand{color:#fff !important;}
.nav.on-blue .mlabel{color:#fff !important;}
/* darker rather than lighter, same reason as the active pill below: a lighter
   pill put white text at 4.42:1, under the 4.5 minimum. Darker reads as pressed. */
.nav.on-blue :is(.mitem:hover .mlabel, .mitem:focus-within .mlabel, .mlabel:hover){color:#fff !important; background:rgba(0,0,0,.12) !important;}
.nav.on-blue .navcta{color:var(--brand) !important; border-color:#fff !important; background:#fff !important;}
.nav.on-blue .navcta:hover{background:#E9EEFF !important; border-color:#E9EEFF !important;}
.panel{position:absolute; left:50%; transform:translateX(-50%) translateY(6px); top:100%; padding-top:12px; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;}
.mitem:hover .panel, .mitem:focus-within .panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
/* a menu closed with Escape stays shut until the pointer leaves it, so the panel
   does not immediately spring back under a stationary cursor */
.mitem.menu-dismissed .panel{opacity:0 !important; pointer-events:none !important; transform:translateX(-50%) translateY(6px) !important;}
.pcard{width:min(900px, 94vw); min-height:288px; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:26px; box-shadow:0 24px 60px rgba(18,22,60,.14); padding:26px;}
.pcols{flex:1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px; align-items:stretch;}
.pcol{flex:1; min-width:0;}
.plabel{font-family:var(--body); font-weight:400; font-size:13px; color:var(--faint); margin-bottom:6px;}
.plink{display:block; text-decoration:none; padding:9px 10px; margin:0 -10px; border-radius:12px; transition:background .12s;}
.plink:hover{background:var(--surface2);}
.plink .pn{display:block; font-family:var(--body); font-weight:500; font-size:14.5px; color:var(--ink);}
.plink .pd{display:block; font-size:12.5px; color:var(--muted); margin-top:2px;}
.soon{display:inline-block; font-family:var(--label); font-weight:500; font-size:10px; color:#A8650A; border:1px solid rgba(245,158,11,.5); border-radius:9999px; padding:1px 7px; margin-left:6px; vertical-align:2px;}
/* feature card: a square solid-blue tile, a small image up top, text on a white panel */
.pfeat{align-self:start; min-width:0; aspect-ratio:1/1; display:flex; flex-direction:column; gap:10px; background:var(--blue); border-radius:20px; padding:12px; text-decoration:none; overflow:hidden;}
.pfeat-img{width:100%; flex:1 1 auto; min-height:0; object-fit:cover; border-radius:12px; display:block;}
.pfeat-text{padding:0 2px 2px;}
.pfeat .pf-t{display:block; font-family:var(--serif); font-weight:600; font-size:16px; color:#fff;}
.pfeat .pf-d{display:block; margin-top:3px; font-size:12px; color:rgba(255,255,255,.85); line-height:1.4;}
.pfoot{display:flex; gap:22px; justify-content:flex-end; border-top:1px solid var(--line); margin-top:20px; padding-top:14px;}
.pfoot a{font-family:var(--label); font-weight:500; font-size:12.5px; color:var(--ink); text-decoration:none;}
.pfoot a:hover{color:var(--blue);}
.nav .navcta{font-family:var(--body); font-weight:500; font-size:13px; color:#fff; text-decoration:none; border:1px solid var(--cta); border-radius:9999px; padding:8px 18px; transition:border-color .2s, color .25s, background .25s; background:var(--cta);}
.nav .navcta:hover{background:var(--cta-deep); border-color:var(--cta-deep);}
/* the current page's own tab reads as active rather than clickable-to-nowhere */
.mlabel[aria-current="page"]{color:var(--ink); background:var(--surface2);}
.plink[aria-current="page"]{background:var(--surface2);}
.plink[aria-current="page"] .pn{color:var(--blue);}
/* over the blue band the .on-blue rules force white text with !important, which
   left white-on-near-white in the active pill. The pill goes DARKER than the band,
   not lighter: that keeps white text at 8:1 contrast, and it matches the light
   theme, where the active pill is also a step darker than what surrounds it. */
.nav.on-blue .mlabel[aria-current="page"]{color:#fff !important; background:rgba(0,0,0,.18) !important;}

/* ── MOBILE NAV ──────────────────────────────────────────────────────────
   Below 900px the mega-menu is unusable, so it is replaced by a hamburger and
   a full-height slide-in panel whose sections are plain <details> accordions.
   Native <details> gives us keyboard and screen-reader behaviour for free. */
.nav-toggle{display:none; width:40px; height:40px; align-items:center; justify-content:center; border:none; background:none; color:var(--ink); cursor:pointer; border-radius:9999px; transition:background .15s, color .25s; -webkit-tap-highlight-color:transparent;}
.nav-toggle:hover{background:var(--surface2);}
.nav-toggle svg{width:20px; height:20px; display:block;}
.nav-toggle .ic-close{display:none;}
.nav-toggle[aria-expanded="true"] .ic-open{display:none;}
.nav-toggle[aria-expanded="true"] .ic-close{display:block;}
.nav.on-blue .nav-toggle{color:#fff;}
.nav.on-blue .nav-toggle:hover{background:rgba(255,255,255,.16);}

/* Mobile panel. Shape and fill carry the hierarchy, so nothing relies on a small
   type-size difference and no dividers are needed:
     a section = a filled card, with a chevron chip that says "this expands"
     a label   = a tinted pill, which reads as "not tappable"
     a page    = a white tile inside the card, or a card with an arrow chip at top level
   Every tappable thing is at least 56px tall, and the CTA is pinned to the foot so it
   stays reachable however far the list is scrolled. Scoped to .nav-mobile throughout,
   because the desktop mega-menu shares .plink and .plabel. */
.nav-mobile{position:fixed; inset:0; z-index:49; background:var(--bg); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .22s ease, transform .22s ease, visibility .22s;}
.nav-mobile.open{opacity:1; visibility:visible; transform:none;}
.nav-mobile .nm-scroll{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:74px 16px 8px; display:flex; flex-direction:column; gap:10px;}

/* section card */
.nav-mobile .nm-sec{background:var(--surface2); border-radius:22px; padding:4px;}
.nav-mobile .nm-sec > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:0 6px 0 18px; border-radius:18px; font-family:var(--body); font-weight:600; font-size:17px; color:var(--ink); -webkit-tap-highlight-color:transparent;}
.nav-mobile .nm-sec > summary::-webkit-details-marker{display:none;}
.nav-mobile .nm-chev, .nav-mobile .nm-go{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:transform .2s ease;}
.nav-mobile .nm-chev svg, .nav-mobile .nm-go svg{width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.nav-mobile .nm-sec[open] .nm-chev{transform:rotate(180deg);}   /* the rotation is the open cue; the title stays black */

/* section body: white page tiles separated by the card's own fill, so no lines are needed */
.nav-mobile .nm-body{padding:2px 4px 4px; display:flex; flex-direction:column; gap:6px;}
.nav-mobile .nm-sec[open] .nm-body{animation:nmIn .2s ease both;}
@keyframes nmIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}

/* group label: plain black text sitting on the card fill. It reads as a heading rather than a
   link because pages are white tiles and labels never are. */
.nav-mobile .plabel{margin:10px 0 2px; padding:0 14px; background:none; color:var(--ink); font-family:var(--body); font-weight:600; font-size:13px;}

/* page tile */
.nav-mobile .plink{display:flex; flex-direction:column; justify-content:center; min-height:56px; margin:0; padding:11px 14px; border-radius:16px; background:var(--bg); -webkit-tap-highlight-color:transparent;}
.nav-mobile .plink .pn{font-size:16px; font-weight:600;}
.nav-mobile .plink .pd{font-size:13px; line-height:1.4; margin-top:3px;}
.nav-mobile .plink:active{background:var(--wash);}
.nav-mobile .plink[aria-current="page"]{background:var(--wash);}
.nav-mobile .plink[aria-current="page"] .pn{color:var(--brand);}
.nav-mobile .soon{border:0; background:rgba(245,158,11,.16); font-size:11px; padding:2px 8px;}   /* fill, not an outline, per the panel's no-lines rule */

/* a top-level page: same card shape as a section, but an arrow chip instead of a chevron,
   so "goes somewhere" and "expands" are never confused */
.nav-mobile .nm-tile{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:0 6px 0 22px; background:var(--surface2); border-radius:22px; font-family:var(--body); font-weight:600; font-size:17px; color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent;}
.nav-mobile .nm-tile:active{background:var(--wash);}
.nav-mobile .nm-tile[aria-current="page"]{background:var(--wash); color:var(--brand);}
.nav-mobile .nm-tile[aria-current="page"] .nm-go{color:var(--brand);}

/* pinned foot */
.nav-mobile .nm-foot{flex:0 0 auto; padding:12px 16px calc(16px + env(safe-area-inset-bottom)); background:var(--bg);}
.nav-mobile .nm-cta{display:block; text-align:center; background:var(--cta); color:#fff; font-family:var(--body); font-weight:500; font-size:16px; text-decoration:none; padding:16px 28px; border-radius:9999px;}
.nav-mobile .nm-cta:active{background:var(--cta-deep);}

@media (max-width:900px){
  .nav .nav-menu{display:none;}
  .nav-toggle{display:flex;}
  /* the CTA lives inside the panel on mobile, so the bar keeps logo + burger only */
  .nav > .navcta{display:none;}
}
@media (min-width:901px){
  .nav-mobile{display:none;}
  .nav .brand svg{height:28px;}   /* desktop: logo a touch bigger than the 22px mobile size */
}
@media (prefers-reduced-motion: reduce){
  .nav-mobile{transition:none;}
  .nav-mobile .nm-chev, .nav-mobile .nm-go{transition:none;}
  .nav-mobile .nm-sec[open] .nm-body{animation:none;}
}

/* ── SHARED TYPE + BUTTONS ───────────────────────────────────────────────── */
.eyebrow{font-family:var(--body); font-weight:500; font-size:14px; color:var(--ink); margin-bottom:8px;}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(40px,6vw,76px); line-height:1.05; letter-spacing:-.03em;}
.cta-row{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:36px; flex-wrap:wrap;}
.btn{display:inline-block; background:var(--cta); color:#fff; font-family:var(--body); font-weight:500; font-size:16px; text-decoration:none; padding:14px 28px; border-radius:9999px; transition:opacity .2s;}
.btn:hover{background:var(--cta-deep);}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line2);}
.btn.ghost:hover{opacity:1; border-color:var(--blue);}

/* ══ SECTION SHELL ═══════════════════════════════════════════════════════════
   Every section on the site is <section class="block"> with a .wrap inside.
   Add .band for the alternate surface, .tight to pull the top padding in.
   See styleguide.html for a live sample of every block below. */
section.block{padding:clamp(96px,10vw,132px) 0;}   /* airier uniform rhythm; grows on desktop, unchanged on mobile */
section.block.tight{padding-top:96px;}
section.band{background:var(--surface);}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(36px,3.8vw,48px); line-height:1.12; max-width:700px; letter-spacing:-.02em;}
h2.t3{font-size:clamp(32px,3.1vw,40px);}
p.lede{color:var(--muted); font-size:18px; line-height:1.5; font-weight:400; max-width:700px; margin-top:20px;}
.centered{text-align:center;}
.centered h2, .centered p.lede{margin-left:auto; margin-right:auto;}
/* section heading group. .centered on .sec-head centres the whole group. */
.sec-head.centered h2, .sec-head.centered p.lede{margin-left:auto; margin-right:auto;}

/* tags and chips */
.ph-tag{font-family:var(--label); font-weight:500; font-size:11px; color:var(--faint); border:1px solid var(--line2); border-radius:9999px; padding:3px 10px; width:fit-content;}
.chip{display:inline-block; font-family:var(--label); font-weight:500; font-size:13px; color:var(--blue); background:var(--peri-soft); border:1px solid rgba(18,80,255,.35); border-radius:9999px; padding:6px 16px;}
/* status pill: green reads shipped, amber reads not shipped yet. Never dress
   work in progress as live. */
.status{display:inline-block; font-family:var(--label); font-weight:500; font-size:11px; letter-spacing:.5px; border-radius:9999px; padding:3px 11px;}
.status.live{color:#1A7A05; border:1px solid rgba(30,158,4,.45); background:rgba(30,158,4,.08);}
.status.building{color:#A8650A; border:1px solid rgba(245,158,11,.5); background:rgba(245,158,11,.08);}

/* palette accents */
.hl-o{color:#F95318;}
.hl-g{color:#1E9E04;}
.hl-p{color:#8B3DEB;}

/* ══ BLOCK: CARDS ════════════════════════════════════════════════════════════
   A grid of flat bordered cards. Pick the column count with .cards-2/3/4;
   it steps down on its own at narrow widths. Add .plain for the rule-topped
   variant with no border or fill. */
.cards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; margin-top:clamp(44px,5.5vw,60px);}
.cards-2{grid-template-columns:repeat(2, minmax(0,1fr));}
.cards-3{grid-template-columns:repeat(3, minmax(0,1fr));}
.cards-4{grid-template-columns:repeat(4, minmax(0,1fr));}
.card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:30px 26px 32px;}
/* small blue label above the card title: a number, a week, a category */
.card-n{font-family:var(--label); font-weight:500; font-size:12px; letter-spacing:1px; color:var(--blue); margin-bottom:12px;}
.card h3{font-family:var(--serif); font-weight:600; font-size:21px; line-height:1.25; color:var(--ink); margin-bottom:8px;}
.card p{color:var(--muted); font-size:15.5px; line-height:1.55;}
.card > :last-child{margin-bottom:0;}
/* .plain: no box, just a coloured rule on top. Lighter weight for supporting lists. */
.cards.plain .card{background:none; border:none; border-top:2px solid var(--peri); border-radius:0; padding:18px 0 0;}
.cards.plain .card h3{font-size:19px;}
/* linkable card: the whole card is a link (used for related-page rows). The arrow
   sits at the bottom on its own, so cards of uneven copy length still line up. */
a.card{display:flex; flex-direction:column; text-decoration:none; transition:border-color .15s ease, transform .15s ease;}
a.card:hover{border-color:var(--peri); transform:translateY(-2px);}
a.card .card-go{margin-top:auto; padding-top:18px; color:var(--blue); font-size:20px; line-height:1;}
a.card:hover .card-go{color:var(--blue-deep);}
@media (max-width:980px){ .cards, .cards-4, .cards-3{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:600px){ .cards, .cards-2, .cards-3, .cards-4{grid-template-columns:minmax(0,1fr);} }
/* "what Flero handles" cards: an icon chip above the eyebrow, and a larger eyebrow */
.card-ic{width:50px; height:50px; border-radius:14px; background:#F1F6FF; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.card-ic img{width:27px; height:27px; display:block;}
.cards.handles .card-n{font-size:16px;}
/* keep a section headline on one line on desktop (it still wraps on mobile) */
@media (min-width:761px){ h2.t3.oneline{white-space:nowrap; max-width:none;} }

/* ══ BLOCK: ROWS ═════════════════════════════════════════════════════════════
   Full-width numbered rows, hairline separated. The FAQ is this block plus the
   accordion behaviour in assets/faq.js. */
.rows{margin:clamp(44px,5.5vw,60px) auto 0; display:flex; flex-direction:column;}
.row-item{border-top:1px solid var(--line); display:grid; grid-template-columns:56px 1fr; gap:clamp(16px,3vw,40px); padding:clamp(32px,4vw,44px) 4px;}
.row-item:last-child{border-bottom:1px solid var(--line);}
.row-n{font-family:var(--label); font-weight:500; font-size:16px; letter-spacing:1px; color:var(--blue);}
.row-b h3{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.4vw,28px); line-height:1.25; color:var(--ink);}
.row-b > p{color:var(--muted); font-size:17px; line-height:1.6; max-width:62ch; margin-top:12px;}
@media (max-width:760px){ .row-item{grid-template-columns:1fr; gap:10px;} }

/* ══ BLOCK: SPLIT ════════════════════════════════════════════════════════════
   Three short label/value pairs under a row. Answers "what do we do, what do
   you do, what do you get" without a table. */
.split{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:26px;}
.split dt{font-family:var(--label); font-weight:500; font-size:12px; letter-spacing:1px; color:var(--faint); margin-bottom:6px;}
.split dd{font-size:15.5px; line-height:1.55; color:var(--ink);}
.split > div:last-child dd{color:var(--blue);}   /* the outcome column carries the accent */
@media (max-width:760px){ .split{grid-template-columns:1fr; gap:18px;} }

/* ══ BLOCK: CALLOUT ══════════════════════════════════════════════════════════
   Solid brand-blue panel for a single offer or aside. One per section at most. */
.callout{background:var(--brand); border-radius:28px; padding:clamp(38px,4.4vw,54px); text-align:center; position:relative; overflow:hidden;}
.callout h3{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.8vw,32px); color:#fff; position:relative;}
.callout p{color:rgba(255,255,255,.92); font-size:18px; line-height:1.5; font-weight:400; max-width:64ch; margin:12px auto 0; position:relative;}
.callout .btn{margin-top:24px; background:#fff; color:var(--ink);}
.callout .btn:hover{background:#E9EEFF;}

/* ══ BLOCK: STATEMENT ════════════════════════════════════════════════════════
   One idea, centred, with a lot of room around it. The pause between sections. */
.statement{text-align:center; padding:clamp(96px,11vw,150px) 0;}
.statement h2, .statement p.big{font-family:var(--serif); font-weight:600; font-size:clamp(30px,4.6vw,54px); line-height:1.15; letter-spacing:-.02em; color:var(--ink); max-width:20ch; margin:0 auto;}
.statement p:not(.big){color:var(--muted); font-size:18px; line-height:1.5; max-width:700px; margin:16px auto 0;}
.statement .accent{color:var(--blue);}

/* ══ BLOCK: FLOW ═════════════════════════════════════════════════════════════
   A workflow read top to bottom. Static on purpose: the point is that you can
   read every step, not that it moves. Colour follows the node categories used
   in the homepage hero animation. */
.flow{margin:clamp(44px,5.5vw,60px) auto 0; max-width:720px; display:flex; flex-direction:column;}
.step{position:relative; display:grid; grid-template-columns:44px 1fr; gap:20px; padding:0 0 26px;}
.step:last-child{padding-bottom:0;}
.step:not(:last-child)::before{content:""; position:absolute; left:21px; top:46px; bottom:2px; width:1.5px; background:var(--peri);}
.step-ic{width:44px; height:44px; border-radius:13px; border:1px solid var(--line2); background:var(--surface); display:flex; align-items:center; justify-content:center; position:relative; z-index:1;}
.step-ic img{width:22px; height:22px; display:block;}
.step-tx{padding-top:2px; min-width:0;}
.step-tx .st-n{font-family:var(--body); font-weight:500; font-size:16.5px; color:var(--ink);}
.step-tx .st-s{font-size:14px; color:var(--faint); margin-top:2px;}
.step-tx .st-note{font-size:14.5px; color:var(--muted); margin-top:8px; max-width:52ch;}
.step.trigger  .step-ic{border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.10);}
.step.ai       .step-ic{border-color:rgba(139,92,246,.5);  background:rgba(139,92,246,.09);}
.step.approval .step-ic{border-color:var(--blue); background:rgba(18,80,255,.09); box-shadow:0 0 0 3px rgba(18,80,255,.14);}
.step.hubspot  .step-ic{border-color:rgba(255,122,89,.6);  background:rgba(255,122,89,.10);}
.step.data     .step-ic{border-color:#D6DAEA;              background:rgba(100,106,130,.09);}
.step.gmail    .step-ic{border-color:rgba(234,67,53,.55);  background:rgba(234,67,53,.09);}
.step.approval .st-n{color:var(--blue);}   /* the approval gate is the argument, so it gets the emphasis */

/* ══ BLOCK: SPEC ═════════════════════════════════════════════════════════════
   Label/value rows inside a card. Use .gate on the row the user acts on. */
.spec{display:flex; flex-direction:column;}
.spec .row{display:grid; grid-template-columns:112px 1fr; gap:18px; padding:14px 0; border-top:1px solid var(--line);}
.spec .row:first-child{border-top:none; padding-top:0;}
.spec dt{font-family:var(--label); font-weight:500; font-size:12px; letter-spacing:1px; color:var(--faint); padding-top:2px;}
.spec dd{font-size:15.5px; line-height:1.55; color:var(--ink);}
.spec .row.gate dd{color:var(--blue);}
/* a sequence of short steps as pills */
.chain{display:flex; flex-wrap:wrap; gap:6px;}
.chain span{font-size:13.5px; line-height:1; color:var(--muted); border:1px solid var(--line2); border-radius:9999px; padding:6px 11px;}
.chain span.gate{color:var(--blue); border-color:rgba(18,80,255,.45); background:rgba(18,80,255,.06);}
@media (max-width:520px){ .spec .row{grid-template-columns:1fr; gap:6px;} }

/* ══ BLOCK: PANEL ════════════════════════════════════════════════════════════
   A wide bordered card split into a description and a spec. */
.panels{display:flex; flex-direction:column; gap:24px; margin-top:clamp(44px,5.5vw,60px);}
.panel-card{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:clamp(30px,3.4vw,42px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,4vw,52px); align-items:start;}
.panel-head h3{font-family:var(--serif); font-weight:600; font-size:clamp(23px,2.5vw,30px); line-height:1.2; color:var(--ink); margin-top:14px;}
.panel-head > p{color:var(--muted); font-size:17px; line-height:1.6; margin-top:12px; max-width:44ch;}
.panel-head .who{font-size:14.5px; color:var(--faint); margin-top:18px;}
.panel-head .who b{color:var(--ink); font-weight:500;}
@media (max-width:880px){ .panel-card{grid-template-columns:1fr; gap:26px;} .spec .row{grid-template-columns:96px 1fr; gap:14px;} }

/* ── TRUST COLUMNS ───────────────────────────────────────────────────────── */
.trust-cols{display:grid; grid-template-columns:repeat(3, minmax(0,320px)); gap:clamp(28px,4.5vw,60px); justify-content:center; align-items:start; margin-top:clamp(60px,8vw,120px);}
.trust-col{display:flex; flex-direction:column; align-items:center;}
.trust-ic{width:100px; height:100px; object-fit:contain; display:block;}
.trust-col h3{font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.38; color:var(--ink); align-self:stretch; text-align:left; margin:12px 0 0;}
.trust-col p{color:var(--muted); font-family:var(--body); font-size:16px; line-height:1.5; font-weight:400; align-self:stretch; text-align:left; margin:8px 0 0;}
.trust-cta{display:flex; justify-content:center; margin-top:clamp(28px,4vw,42px);}
.trust-centre{display:inline-flex; align-items:center; gap:8px; height:42px; padding:10px 20px; border:1px solid var(--line2); border-radius:100px; background:var(--surface); color:var(--ink); font-family:var(--body); font-size:14px; text-decoration:none; transition:border-color .2s, color .2s;}
.trust-centre:hover{border-color:var(--blue); color:var(--blue);}
.trust-centre .tc-arrow{font-size:16px; line-height:1;}
.trust-visual{margin:clamp(60px,8vw,120px) 0 0; border-radius:36px; overflow:hidden;}
.trust-visual img{width:100%; height:auto; display:block;}

/* ── SUBHERO PHOTO ───────────────────────────────────────────────────────── */
/* a rounded, contained photo card that sits in the flow just below a hero.
   Add .banner to crop the image to a wide band (for square/tall sources).
   (how-it-works.html keeps its own page-local .subhero-photo override.) */
.subhero-photo{margin:clamp(36px,5vw,64px) auto 0; width:min(1080px, calc(100% - 48px)); border-radius:clamp(18px,2.2vw,26px); overflow:hidden; box-shadow:0 26px 64px rgba(18,22,60,.13);}
.subhero-photo img{display:block; width:100%; height:auto;}
.subhero-photo.banner img{aspect-ratio:16/9; object-fit:cover;}

/* ── WORKFLOW FLOW (Solutions "In practice") ──────────────────────────────── */
/* A vertical chain of workflow nodes, styled like the homepage diagram, that
   reveal on scroll (js/wf-flow.js). Each step: a node card (coloured icon chip +
   name + type) in the left rail, plain-language description on the right, joined
   top-to-bottom by a periwinkle connector. Namespaced .wf-* so it never collides
   with the homepage's page-local .node canvas. */
.wf-flow{max-width:900px; margin:clamp(40px,5vw,60px) auto 0; display:flex; flex-direction:column;}
.wf-step{position:relative; display:grid; grid-template-columns:236px 1fr; gap:clamp(22px,3.4vw,48px); align-items:start; padding-bottom:clamp(26px,3.4vw,40px);}
.wf-step:last-child{padding-bottom:0;}
/* connector: a line running down through the node icons */
.wf-step:not(:last-child)::before{content:''; position:absolute; left:32px; top:54px; bottom:-4px; width:2px; background:var(--line2); z-index:0;}

/* the node card (mirrors the homepage .node look) */
.wf-node{position:relative; z-index:1; width:max-content; max-width:100%; background:var(--surface); border:1px solid #E3E6F2; border-radius:14px; padding:11px 16px 11px 13px; display:flex; gap:11px; align-items:center; box-shadow:0 16px 36px rgba(18,22,60,.10);}
.wf-node .wf-ic{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.wf-node .wf-ic img{width:22px; height:22px; display:block;}
.wf-node .wf-txt{min-width:0;}
.wf-node .wf-nm{font-family:var(--body); font-size:14px; font-weight:500; color:var(--ink); line-height:1.2; white-space:nowrap;}
.wf-node .wf-sub{font-family:var(--label); font-size:11px; color:var(--faint); margin-top:2px; letter-spacing:.2px; white-space:nowrap;}

/* node type colours (same palette as the homepage diagram) */
.wf-node.trigger{border-color:rgba(245,158,11,.55);} .wf-node.trigger .wf-ic{background:rgba(245,158,11,.14); color:#A8650A;}
.wf-node.ai{border-color:rgba(139,92,246,.5);}       .wf-node.ai .wf-ic{background:rgba(139,92,246,.12); color:#6D3FD4;}
.wf-node.crm{border-color:rgba(255,122,89,.6);}      .wf-node.crm .wf-ic{background:rgba(255,122,89,.14); color:#E4552F;}
.wf-node.data{border-color:rgba(18,80,255,.4);}      .wf-node.data .wf-ic{background:rgba(18,80,255,.10); color:#1250FF;}
.wf-node.send{border-color:rgba(234,67,53,.5);}      .wf-node.send .wf-ic{background:rgba(234,67,53,.12); color:#D93A2B;}
.wf-node.success{border-color:rgba(26,122,5,.5);}    .wf-node.success .wf-ic{background:rgba(26,122,5,.12); color:#1A7A05;}

/* description column */
.wf-desc{padding-top:6px; margin-top:-8px;}
.wf-desc .wf-label{font-family:var(--label); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--ink); margin-bottom:7px;}
.wf-desc p{color:var(--muted); font-size:16px; line-height:1.55; margin:0;}

/* reveal on scroll: js/wf-flow.js adds .wf-armed (hide), then .in per step (show).
   No JS or reduced motion => never armed => everything visible. */
.wf-flow.wf-armed .wf-step{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;}
.wf-flow.wf-armed .wf-step.in{opacity:1; transform:none;}
.wf-flow.wf-armed .wf-step:not(:last-child)::before{transform:scaleY(0); transform-origin:top; transition:transform .55s ease .08s;}
.wf-flow.wf-armed .wf-step.in:not(:last-child)::before{transform:scaleY(1);}
@media (prefers-reduced-motion: reduce){
  .wf-flow.wf-armed .wf-step{opacity:1; transform:none; transition:none;}
  .wf-flow.wf-armed .wf-step:not(:last-child)::before{transform:none; transition:none;}
}

/* mobile: node stacks above its description */
@media (max-width:640px){
  .wf-step{grid-template-columns:1fr; gap:12px;}
  .wf-step:not(:last-child)::before{display:none;}
  .wf-desc{padding-top:0; margin-top:0;}
}

/* ── TOOL STRIP (Solutions "the tools it touches") ────────────────────────── */
/* A centred row of integration logo chips under a flow, making the point that
   the tools are examples: swappable, and you can add your own. */
.toolstrip{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:760px; margin:clamp(32px,4vw,48px) auto 0;}
.tool-logo{width:62px; height:62px; border-radius:16px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(18,22,60,.05);}
.tool-logo img{width:30px; height:30px; object-fit:contain; display:block;}
.tool-more{display:inline-flex; align-items:center; height:62px; padding:0 20px; border-radius:16px; border:1px dashed var(--line2); color:var(--muted); font-family:var(--body); font-size:14px;}
.toolstrip-cta{display:flex; justify-content:center; margin-top:clamp(24px,3vw,32px);}
@media (max-width:520px){
  .tool-logo{width:54px; height:54px; border-radius:14px;}
  .tool-logo img{width:26px; height:26px;}
  .tool-more{height:54px;}
}

/* ── TRUST MINI (condensed trust strip for Solutions pages) ───────────────── */
/* The three trust pillars as a light row (small icon + one line each), instead
   of the full framed trust section kept on the hub pages (home, how-it-works). */
.trust-mini{max-width:1080px; margin:0 auto; padding:clamp(46px,5vw,58px) clamp(28px,4vw,56px); background:var(--wash); border-radius:clamp(22px,2.6vw,32px);}
.tm-head{text-align:center; margin-bottom:clamp(36px,3.6vw,44px);}
.tm-title{font-size:clamp(24px,2.4vw,28px); max-width:none; margin:0;}   /* T4 headline (inherits --serif/600 from base h2) */
.tm-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.4vw,44px);}
.tm-item{display:flex; gap:14px; align-items:flex-start;}
.tm-ic{width:40px; height:40px; object-fit:contain; flex:0 0 auto;}
.tm-tx b{display:block; font-family:var(--label); font-weight:600; font-size:16px; color:var(--ink); line-height:1.3;}
.tm-tx span{display:block; color:var(--muted); font-size:14px; line-height:1.5; margin-top:4px;}
@media (max-width:760px){ .tm-grid{grid-template-columns:1fr; gap:20px;} }

/* ── TESTIMONIAL CARD ────────────────────────────────────────────────────── */
.ts-card{position:relative; margin:0 auto; background:#1250FF; border:1px solid #1250FF; border-radius:32px; padding:73px 32px 44px; display:flex; flex-direction:column; align-items:center; gap:30px; text-align:center;}
.ts-q{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.6vw,32px); line-height:1.28; letter-spacing:-.01em; color:#fff; max-width:min(940px,100%); margin:0;}
.ts-photo{width:90px; height:120px; border-radius:16px; object-fit:cover; display:none; margin:0;}
.ts-photo.loaded{display:block;}
.ts-avatar{width:90px; height:120px; border-radius:16px; background:var(--peri-soft); color:var(--blue); font-family:var(--label); font-weight:600; font-size:26px; letter-spacing:1px; display:flex; align-items:center; justify-content:center; margin:0;}
.ts-avatar.hide{display:none;}
/* js/testimonial-photo.js wraps the photo + initials in .ts-media and stacks them, so the
   swap on image load crossfades instead of popping. The pop only showed on the live site,
   where the photo loads over the network (on a warm cache it is already there). With no JS
   the display-swap above still stands: initials show, the photo stays hidden. */
.ts-media{position:relative; width:90px; height:120px;}
.ts-media .ts-photo{display:block; position:absolute; inset:0; opacity:0; transition:opacity .45s ease;}
.ts-media .ts-photo.loaded{opacity:1;}
.ts-media .ts-avatar{position:absolute; inset:0; transition:opacity .45s ease;}
.ts-media .ts-avatar.hide{display:flex; opacity:0;}
@media (prefers-reduced-motion: reduce){ .ts-media .ts-photo, .ts-media .ts-avatar{transition:none;} }
.ts-foot{position:relative; width:100%; display:flex; align-items:center; justify-content:center;}
.ts-who{font-family:var(--label); font-weight:500; font-size:13px; letter-spacing:1px; color:rgba(255,255,255,.82); margin:0;}
.ts-more{position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; border:1px solid #fff; background:#fff; color:#1250FF; font-family:var(--body); font-size:14px; line-height:1; padding:11px 18px; border-radius:9999px; cursor:pointer; transition:border-color .2s, color .2s, background .2s;}
.ts-more:hover{background:rgba(255,255,255,.88); color:#1250FF;}
.ts-more:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

/* ── FAQ / NUMBERED ROWS ─────────────────────────────────────────────────── */
.faq{margin:48px auto 0; max-width:none; display:flex; flex-direction:column; gap:14px;}
.faq-item{background:#EAF1FE; border-radius:24px;}   /* light blue fill (lighter than --wash for readability); grows as the answer expands */
.faq-q{width:100%; background:none; border:0; cursor:pointer; display:grid; grid-template-columns:1fr 24px; align-items:center; gap:clamp(16px,3vw,40px); padding:18px clamp(20px,2.6vw,28px); text-align:left;}
.faq-n{display:none;}
.faq-t{font-family:var(--serif); font-weight:600; font-size:clamp(16px,1.7vw,20px); line-height:1.3; color:var(--ink);}
.faq-ic{position:relative; width:22px; height:22px; justify-self:end; color:var(--blue); transition:transform .3s ease;}
.faq-ic::before,.faq-ic::after{content:""; position:absolute; left:50%; top:50%; background:currentColor;}
.faq-ic::before{width:18px; height:1.6px; transform:translate(-50%,-50%);}
.faq-ic::after{width:1.6px; height:18px; transform:translate(-50%,-50%);}
.faq-item.open .faq-ic{transform:rotate(45deg);}
.faq-a-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease-in-out;}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr;}
.faq-a{overflow:hidden; min-height:0;}
.faq-a-inner{padding:0 clamp(20px,2.6vw,28px) 20px clamp(20px,2.6vw,28px); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; max-width:72ch;}
@media (prefers-reduced-motion: reduce){ .faq-a-wrap{transition:none;} }

/* ── CLOSE BAND + FOOTER ─────────────────────────────────────────────────── */
/* close: blue band that flows into the giant lockup footer */
.close{text-align:center; padding:120px 0 96px; background:var(--brand); border-top:none;}
.close h2{margin:0 auto 18px; max-width:22ch; color:#FFFFFF; font-size:clamp(46px,7.4vw,88px); line-height:1.05; letter-spacing:-.03em;}
.close p{color:#FFFFFF; font-size:18px; line-height:1.5; font-weight:400; max-width:700px; margin:0 auto;}
.close .cta-row{justify-content:center;}
.close .btn{background:#FFFFFF; color:var(--ink);}
.close .btn:hover{background:#E9EEFF;}

footer{background:var(--brand); padding:0 0 20px;}

/* ── big-business footer: brand block + five link columns, then a thin legal bar.
   Sits on the blue footer, so text is white / tinted-white. Uses .wrap for the
   1120px cap + 24px gutters; these rules add the grid and vertical rhythm. ── */
.foot-top{display:grid; grid-template-columns:repeat(5, max-content); justify-content:space-between; gap:clamp(22px,2.4vw,44px); padding-top:clamp(96px,10vw,152px); padding-bottom:8px; max-width:1440px;}
.foot-col h4{font-family:var(--label); font-weight:600; font-size:14px; color:#fff; margin:0 0 15px;}
/* the last column sits flush right (space-between); a little right padding keeps it off the edge */
.foot-top .foot-col:last-child{padding-right:20px;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.foot-col li{line-height:1.35;}
.foot-col a{color:rgba(255,255,255,.9); text-decoration:none; font-family:var(--body); font-size:16px; transition:color .2s;}
.foot-col a:hover{color:#fff;}
/* coming-soon entries: rendered as non-clickable .foot-na spans in a disabled (dimmed) colour,
   no "Soon" pill, so they read as not-yet-live. .foot-soon stays available for muted-but-live links. */
.foot-col a.foot-soon{color:rgba(255,255,255,.9);}
.foot-col a.foot-soon:hover{color:#fff;}
.foot-na{color:rgba(255,255,255,.4); font-family:var(--body); font-size:16px;}

/* legal quick-links (reused in the bottom bar) */
.foot-legal-links{display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; font-family:var(--body); font-size:13px;}
.foot-legal-links a{color:rgba(255,255,255,.6); text-decoration:none; transition:color .2s;}
.foot-legal-links a:hover{color:#FFFFFF;}

/* bottom bar: copyright left, legal links right; hairline above */
.foot-bottom{display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px 24px; margin-top:clamp(32px,3.5vw,52px); padding-top:24px; border-top:1px solid rgba(255,255,255,.14); max-width:1440px;}
.foot-copy{color:rgba(255,255,255,.6); font-family:var(--body); font-size:13px;}
.foot-bottom .foot-legal-links{justify-self:end;}
.tm{font-size:1.3em; vertical-align:top; line-height:1; margin-left:1.5px;}   /* trademark, seated top-right of the wordmark; inherits the copy-line colour */

/* ── big animated Flero lockup at the very bottom. White (currentColor) on the blue
   footer. The mark's arc draws in right-to-left, the dot pops, then the wordmark slides
   out. Armed by js/footer-logo.js and played once on scroll-in; with no JS or reduced
   motion the SVG just shows its final state. ── */
.foot-logo{margin:-20px auto 0; padding:0 24px; color:#fff; line-height:0; max-width:1440px;}
.foot-lockup{display:block; width:min(94%,900px); height:auto; margin:0 auto; overflow:visible;}
.fl-dot{transform-box:fill-box; transform-origin:center;}
.foot-logo.armed .fl-arc{stroke-dasharray:var(--fl-arc-len,260); stroke-dashoffset:var(--fl-arc-len,260); transition:stroke-dashoffset .95s cubic-bezier(.45,0,.2,1);}
.foot-logo.armed .fl-dot{transform:scale(0); opacity:0; transition:transform .45s cubic-bezier(.2,.85,.3,1) .9s, opacity .3s ease .9s;}
.foot-logo.armed .fl-word{transform:translateX(-40px); opacity:0; transition:transform .75s cubic-bezier(.22,.7,.2,1) 1.1s, opacity .55s ease 1.1s;}
.foot-logo.armed.is-drawn .fl-arc{stroke-dashoffset:0;}
.foot-logo.armed.is-drawn .fl-dot{transform:scale(1); opacity:1;}
.foot-logo.armed.is-drawn .fl-word{transform:none; opacity:1;}
@media (prefers-reduced-motion: reduce){
  .foot-logo.armed .fl-arc{stroke-dasharray:none; stroke-dashoffset:0; transition:none;}
  .foot-logo.armed .fl-dot{transform:none; opacity:1; transition:none;}
  .foot-logo.armed .fl-word{transform:none; opacity:1; transition:none;}
}
@media (max-width:980px){
  .foot-top{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width:600px){
  .foot-top{grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 18px;}
  .foot-bottom{grid-template-columns:1fr; justify-items:center; gap:16px; text-align:center;}
  .foot-bottom .foot-legal-links{justify-self:center; justify-content:center;}
  /* the -20px lift overlaps the legal links on phones; drop the lockup down clear of them */
  .foot-logo{margin-top:4px;}
}

/* ── SHARED RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:820px){
  .trust-cols{grid-template-columns:minmax(0,380px); justify-content:center; gap:44px;}
  .ts-card{padding:52px 26px 39px; gap:24px;}
  .ts-foot{flex-direction:column; gap:14px;}
  .ts-more{position:static; transform:none; margin-top:0;}
}
@media (max-width:700px){
  .nav{padding:12px 20px;}
  /* mobile heading scale: match the homepage so section headings aren't oversized on
     phones. Page-local heading rules with higher specificity still win where a page
     deliberately sets its own size. */
  h1{font-size:clamp(32px,9.8vw,40px); line-height:1.08;}
  h2{font-size:26px; line-height:1.18;}
  h2.t3{font-size:24px;}
  .close h2{font-size:32px;}
}

/* ── CASE-STUDY MODAL ────────────────────────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;}
.modal[hidden]{display:none;}
.modal-backdrop{position:absolute; inset:0; background:rgba(11,12,20,.55); opacity:0; transition:opacity .25s ease;}
.modal.open .modal-backdrop{opacity:1;}
.modal-card{position:relative; z-index:1; width:100%; max-width:1000px; max-height:90vh; overflow:auto; background:var(--surface); border-radius:28px; box-shadow:0 24px 60px rgba(18,22,60,.22); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; opacity:0; transform:translateY(12px) scale(.98); transition:opacity .25s ease, transform .25s ease;}
.modal.open .modal-card{opacity:1; transform:none;}
.modal-head{font-family:var(--serif); font-weight:600; font-size:clamp(28px,3.4vw,44px); line-height:1.12; letter-spacing:-.02em; color:var(--ink); margin:0 0 24px; max-width:15ch;}
.modal-body p{font-family:var(--body); color:var(--muted); font-size:17px; line-height:1.6; margin:0 0 16px; max-width:46ch;}
.modal-body a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}
.modal-actions{margin-top:28px;}
.modal-figure{margin:0; align-self:stretch;}
.modal-figure img{width:100%; height:100%; max-height:70vh; object-fit:cover; border-radius:20px; display:block;}
.modal-close{position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border:none; background:transparent; color:var(--ink); font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:.65; transition:opacity .2s;}
.modal-close:hover{opacity:1;}
.modal-close:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
@media (max-width:820px){
  .modal-card{grid-template-columns:1fr; gap:24px; padding:34px 22px; max-height:88vh;}
  .modal-figure img{max-height:34vh;}
  .modal-head{margin-bottom:16px;}
}
@media (prefers-reduced-motion: reduce){
  .modal-backdrop, .modal-card{transition:none;}
  .modal-card{transform:none;}
}

/* ══ BLOCK: PRICING ══════════════════════════════════════════════════════════
   Three plan cards, the popular one lifted into a blue frame. */
.pricing-grid{display:grid; grid-template-columns:repeat(3, minmax(0,330px)); gap:28px; justify-content:center; align-items:start;}
.plan-card{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:36px 30px 30px; display:flex; flex-direction:column; gap:26px;}
.plan-card .specs{display:flex; flex-direction:column; gap:18px;}
.plan-meta{display:flex; flex-direction:column; gap:8px;}
.plan-name{font-family:var(--serif); font-weight:600; font-size:26px; line-height:34px; color:var(--ink);}
.plan-desc{font-size:16px; line-height:24px; color:var(--muted); min-height:48px;}
.plan-price{font-family:var(--serif); font-weight:600; font-size:42px; line-height:1.1; color:var(--ink);}
.plan-price .currency{font-size:42px;}
.plan-price .per{font-family:var(--body); font-weight:400; font-size:15px; color:var(--faint);}
/* what you get: a real list, ticked and set at reading size so the value is scannable */
.plan-feats{list-style:none; margin:0; padding:20px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px;}
.plan-feats li{position:relative; padding-left:32px; font-size:16px; line-height:1.5; color:var(--ink);}
.plan-feats li::after{content:''; position:absolute; left:3px; top:8px; width:10px; height:5px; border-left:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue); transform:rotate(-45deg);}
.plan-highlight-wrap{background:var(--brand); border-radius:32px; padding:4px; padding-top:10px; display:flex; flex-direction:column; gap:9px; margin-top:-45px;}
.plan-highlight-label{color:#fff; font-family:var(--body); font-weight:400; font-size:16px; line-height:24px; text-align:center; padding-bottom:4px;}
.plan-highlight-wrap .plan-card{box-shadow:0 2px 4px -2px rgba(0,0,0,.12); border:0;}
.plan-highlight-wrap .plan-feats{border-top-color:var(--line2);}
.plan-cta{display:block; width:100%; text-align:center; margin-top:auto; background:var(--ink);}   /* full-width black CTA seated at the bottom of each plan card */
.pricing-note{color:var(--muted); font-size:18px; line-height:1.5; font-weight:400; max-width:700px; margin:36px auto 0; text-align:center;}
.pricing-note a{color:var(--brand); text-decoration:underline; text-underline-offset:2px;}
/* the pricing page's offer panel sits in a lot of air; other .callout uses do not */
.callout.offer-space{margin:96px 0 144px;}
/* three full-width cards need ~1094px; drop to two before they start squeezing */
@media (max-width:1080px){
  .pricing-grid{grid-template-columns:repeat(2, minmax(0,330px));}
  .plan-highlight-wrap{margin-top:0;}
}
/* two-column range only: a lone trailing card would sit orphaned in the left column, so centre it under the pair */
@media (min-width:701px) and (max-width:1080px){
  .pricing-grid > *:nth-child(odd):last-child{grid-column:1 / -1; justify-self:center; width:330px;}
}
@media (max-width:700px){ .pricing-grid{grid-template-columns:minmax(0,360px);} }

/* ══ SUB-PAGE HERO ═══════════════════════════════════════════════════════════
   Opening block for every page that is not the homepage. The nav is fixed, so
   the top padding is what keeps the headline clear of it. */
.subhero{padding:clamp(150px,17vh,210px) 0 clamp(60px,7vw,90px); text-align:center;}
.subhero h1{max-width:17ch; margin:0 auto;}
.subhero p.lede{margin:24px auto 0; max-width:62ch; font-size:20px;}

/* ══ FRAME ══════════════════════════════════════════════════════════════════
   A soft periwinkle panel that groups one or more sections into a single
   bounded block. DESIGN.md sanctions peri tints "as backgrounds behind blue
   elements", which is what these sections are (the Ctrl moment, trust icons,
   the pricing offer). Fills the width to a small page gutter; the inner .wrap
   still caps content, so content keeps breathing room inside the box.
   No overflow clip, so a sticky section inside still pins to the viewport. */
.frame{background:var(--wash); border-radius:clamp(28px,3vw,44px); width:calc(100% - 48px); max-width:1440px; margin:clamp(48px,7vw,96px) auto;}
.frame > section{background:transparent;}   /* let the wash show through framed sections, overriding .band white */