/* ============================================================================
   Vantra Folio marketing site — design system v2.
   Static, no-JS. Self-hosted Inter variable font. Real product screenshots
   live in /shots/*.webp and are framed by the .browser component.
   Bump the ?v= query in each page's <link> when this file changes.
   ============================================================================ */
@font-face {
  font-family: 'InterVar';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:#0f1926; --t1:#182430; --t2:#4d5b6b; --t3:#7d8998; --soft:#98a2b0;
  --line:#e5e9ee; --line2:#eef1f5;
  --slate:#223947; --slate2:#2c4a5d; --slate3:#39586c; --slate-deep:#16262f;
  --tint:#eaf0f3; --tint2:#f3f6f8;
  --bg:#ffffff; --bg2:#f7f9fa; --bg3:#eef2f5;
  --grad:linear-gradient(135deg,#2c4a5d 0%,#223947 100%);
  --grad-soft:linear-gradient(135deg,#39586c 0%,#223947 100%);
  --accent:#059669; --accent-2:#0b7a67; --accent-bg:#e7f6ef;
  --green:#10b981; --green-bg:#e9f9f1;
  --amber:#b45309; --amber-bg:#fdf3e7;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(15,25,38,.05);
  --sh-sm:0 2px 6px -1px rgba(15,25,38,.08), 0 1px 2px rgba(15,25,38,.04);
  --sh-md:0 14px 34px -16px rgba(15,25,38,.25);
  --sh-lg:0 42px 84px -32px rgba(15,25,38,.36), 0 18px 36px -22px rgba(15,25,38,.22);
  --max:1152px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--t1);
  font:16px/1.62 'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';
}
a { color:var(--slate2); text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 28px; }
.center { text-align:center; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; line-height:1; padding:13px 22px; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s, border-color .16s, background .16s; }
.btn-primary { background:var(--grad); color:#fff;
  box-shadow:0 2px 6px -1px rgba(34,57,71,.4), 0 0 0 1px rgba(34,57,71,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 12px 28px -10px rgba(16,60,48,.6), 0 0 0 1px rgba(34,57,71,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:active { transform:translateY(0); }
.btn-ghost { background:#fff; color:var(--t1); border-color:var(--line); box-shadow:var(--sh-xs); }
.btn-ghost:hover { border-color:#c6d0d8; transform:translateY(-1px); box-shadow:var(--sh-sm); }
.btn-light { background:#fff; color:var(--slate); }
.btn-light:hover { transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(0,0,0,.45); }
.btn-sm { padding:9px 16px; font-size:13.5px; border-radius:10px; }
.btn-lg { padding:16px 30px; font-size:16px; border-radius:14px; }
.btn .arr { transition:transform .16s var(--ease); }
.btn:hover .arr { transform:translateX(3px); }

/* ---------- nav ---------- */
.nav { background:rgba(255,255,255,.85); backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
  box-shadow:0 1px 0 rgba(20,40,54,.03), 0 10px 30px -24px rgba(20,40,54,.55); }
.nav-in { display:flex; align-items:center; gap:26px; height:84px; position:relative; }
.brand { display:inline-flex; align-items:center; gap:11px; flex:none; }
/* Brand mark: the white Folio mark sits in a rounded-square gradient tile,
   matching the Vantra Projects lockup. */
.brand-mk { width:38px; height:38px; border-radius:11px; background:var(--grad); padding:8px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(16,32,42,.3), inset 0 1px 0 rgba(255,255,255,.14); }
.brand-mk img { width:100%; height:100%; object-fit:contain; display:block; }
.brand .wm { font-size:19px; font-weight:750; letter-spacing:-.02em; color:var(--ink); }
.brand .wm span { color:var(--t3); font-weight:600; margin-left:-0.05em; }
.nav-toggle { display:none; }
.nav-burger { display:none; }
/* Stretch the link row to the full nav height so the mega triggers reach all
   the way down to the panel — no dead gap between trigger and the fixed mega. */
.nav-links { margin-left:auto; align-self:stretch; display:flex; align-items:center; gap:4px; }
.nav-links > * { flex:none; }
.nav-links > a:not(.btn) { color:var(--t2); font-size:14.5px; font-weight:550; padding:9px 13px; border-radius:10px;
  white-space:nowrap; transition:background .14s, color .14s; }
.nav-links > a:not(.btn):hover { color:var(--ink); background:var(--tint2); }
.nav-links > a.is-active { color:var(--ink); background:var(--tint2); }
.nav-sep { width:1px; height:22px; background:var(--line); margin:0 10px; }
.nav-cta { margin-left:8px; }

/* homepage: nav rides transparent over the dark hero, then frosts on scroll */
.nav.nav-hero { transition:background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); }
.nav.nav-hero:not(.scrolled) { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent; box-shadow:none; }
.nav.nav-hero.scrolled { background:rgba(255,255,255,.9); backdrop-filter:saturate(1.7) blur(20px); -webkit-backdrop-filter:saturate(1.7) blur(20px);
  border-bottom-color:rgba(20,40,54,.08); box-shadow:0 1px 0 rgba(20,40,54,.05), 0 12px 36px -20px rgba(20,40,54,.5); }
.nav.nav-hero:not(.scrolled) .brand .wm { color:#fff; }
.nav.nav-hero:not(.scrolled) .brand .wm span { color:rgba(255,255,255,.58); }
.nav.nav-hero:not(.scrolled) .brand-mk { box-shadow:0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -6px rgba(0,0,0,.55); }
.nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn), .nav.nav-hero:not(.scrolled) .nav-trigger { color:rgba(236,243,246,.9); }
.nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn):hover, .nav.nav-hero:not(.scrolled) .nav-trigger:hover,
.nav.nav-hero:not(.scrolled) .nav-item.has-mega:focus-within .nav-trigger { color:#fff; background:rgba(255,255,255,.12); }
.nav.nav-hero:not(.scrolled) .nav-sep { background:rgba(255,255,255,.22); }
/* On the dark hero the primary CTA becomes a solid white pill — the single
   unmistakable anchor in the nav; on scroll it returns to the slate fill. */
.nav.nav-hero:not(.scrolled) .btn-primary { background:#fff; color:var(--slate);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.nav.nav-hero:not(.scrolled) .btn-primary:hover { background:#fff; filter:none; transform:translateY(-1px);
  box-shadow:0 14px 30px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.85); }

/* ---------- mega menu (CSS-only, no JS) ---------- */
.nav-item { position:relative; display:inline-flex; align-items:center; width:auto; flex:0 0 auto; gap:0; padding:0; background:transparent; border-radius:0; }
.nav-item:hover, .nav-item:focus-within, .nav-item.is-active { background:transparent; }
.nav-trigger { display:inline-flex; align-items:center; gap:5px; color:var(--t2); font-size:14.5px; font-weight:550;
  padding:9px 13px; border-radius:10px; cursor:pointer; transition:background .14s, color .14s; }
.nav-trigger:hover, .nav-item.has-mega:focus-within .nav-trigger, .nav-trigger.is-active { color:var(--ink); background:var(--tint2); }
.nav-caret { transition:transform .18s var(--ease); margin-top:1px; }
.nav-item.has-mega:hover .nav-caret, .nav-item.has-mega:focus-within .nav-caret { transform:rotate(180deg); }
/* Full-width mega: a fixed, edge-to-edge panel below the sticky nav with a
   centred content grid and a featured rail. The has-mega item stretches to the
   full nav height so hover survives the trip from the trigger down to the panel. */
.nav-item.has-mega { align-self:stretch; }
.mega { position:fixed; left:0; right:0; top:84px; z-index:39;
  opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; }
.nav-item.has-mega:hover .mega, .nav-item.has-mega:focus-within .mega {
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .2s var(--ease), transform .2s var(--ease); }
.mega-in { background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-md); }
.mega-body { max-width:var(--max); margin:0 auto; padding:30px 28px 28px;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:38px; align-items:start; }
.mega-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.mega--sol .mega-cols, .mega--res .mega-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega-col { display:flex; flex-direction:column; gap:2px; padding:2px 18px; min-width:0; }
.mega-col:first-child { padding-left:2px; }
.mega-col:last-child { padding-right:2px; }
.mega-col + .mega-col { border-left:1px solid var(--line2); }
.mega-col-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t3); padding:0 10px 9px; }
.mega-item { display:flex; gap:12px; align-items:center; min-height:56px; padding:9px 10px; border-radius:11px;
  position:relative; transition:background .14s; }
.mega-item:hover { background:var(--tint2); }
.mega-ic { width:36px; height:36px; border-radius:10px; background:var(--tint); border:1px solid var(--line2);
  color:var(--slate2); display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:background .14s, color .14s, border-color .14s; }
.mega-item:hover .mega-ic { background:var(--accent-bg); color:var(--accent); border-color:transparent; }
.mega-tx { min-width:0; }
.mega-tx b { display:block; font-size:13.75px; color:var(--ink); font-weight:650; letter-spacing:-.012em; white-space:nowrap; }
.mega-tx span { display:block; font-size:12.2px; color:var(--t3); line-height:1.4; margin-top:2px; }
/* per-menu personality lives in the promo card on the right: Product keeps the
   deep-slate card, Solutions goes emerald, Resources goes light */
.mega--sol .mega-feature { background:linear-gradient(150deg,#0f9d6b 0%, #0b7a67 58%, #0c5b52 100%); }
.mega--sol .mega-feature::before { background:radial-gradient(80% 55% at 100% 0%, rgba(255,255,255,.2), transparent 66%); }
.mega--sol .mega-feature-tag { color:#d9f7ea; }
.mega--sol .mega-feature p { color:#d6f0e4; }
.mega--res .mega-feature { background:linear-gradient(180deg,#f2faf6 0%, #e8f2ee 100%);
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.2); }
.mega--res .mega-feature::before { background:radial-gradient(80% 55% at 100% 0%, rgba(16,185,129,.14), transparent 66%); }
.mega--res .mega-feature-tag { color:var(--accent); }
.mega--res .mega-feature h4 { color:var(--ink); }
.mega--res .mega-feature p { color:var(--t2); }
.mega--res .mega-feature-cta { background:var(--slate); color:#fff; }
.mega--res .mega-feature-cta:hover { box-shadow:0 8px 20px rgba(20,40,54,.3); }
.mega--res .mega-feature-shot { box-shadow:0 0 0 1px rgba(20,40,54,.12), 0 -18px 40px -24px rgba(20,40,54,.3); }
.mega-go { flex:none; margin-left:auto; color:var(--t3); opacity:0; transform:translateX(-5px);
  transition:opacity .14s, transform .14s, color .14s; }
.mega-item:hover .mega-go { opacity:1; transform:none; color:var(--accent); }
/* featured rail with a screenshot peeking from the bottom */
.mega-feature { background:var(--grad); color:#fff; border-radius:var(--r-lg); padding:24px 24px 0;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.mega-feature::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 55% at 100% 0%, rgba(16,185,129,.3), transparent 68%); }
.mega-feature-tag { position:relative; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#8fd6bb; margin-bottom:9px; }
.mega-feature h4 { position:relative; font-size:18px; letter-spacing:-.02em; margin:0 0 7px; color:#fff; }
.mega-feature p { position:relative; font-size:13px; line-height:1.55; color:#cdd9e2; margin:0 0 15px; }
.mega-feature-cta { position:relative; display:inline-flex; align-items:center; gap:7px; margin:0 0 18px;
  align-self:flex-start; background:#fff; color:var(--slate); font-size:13.5px; font-weight:650;
  padding:9px 15px; border-radius:10px; transition:transform .14s, box-shadow .14s; }
.mega-feature-cta:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.28); }
/* cards with no peeking screenshot get equal top/bottom padding */
.mega-feature:not(:has(.mega-feature-shot)) { padding-bottom:24px; }
.mega-feature:not(:has(.mega-feature-shot)) .mega-feature-cta { margin-bottom:0; }
.mega-feature-shot { position:relative; margin-top:2px; height:92px; border-radius:10px 10px 0 0;
  overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 -18px 40px -24px rgba(0,0,0,.7); }
.mega-feature-shot img { display:block; width:100%; height:auto; }
/* foot bar */
.mega-foot { border-top:1px solid var(--line2); background:var(--tint2); }
.mega-foot-inner { max-width:var(--max); margin:0 auto; padding:13px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mega-badge { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--slate2); }
.mega-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.mega-all { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:640; color:var(--accent); white-space:nowrap; }
.mega-all:hover { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1040px) {
  .mega-body { grid-template-columns:1fr; gap:20px; }
  .mega-col { padding:2px 16px; }
  .mega-feature { flex-direction:row; align-items:center; gap:18px; padding:18px 22px; }
  .mega-feature h4 { margin-bottom:2px; }
  .mega-feature p, .mega-feature-shot { display:none; }
  .mega-feature-cta { margin:0 0 0 auto; flex:none; }
}

@media (max-width:900px) {
  .nav-in { height:72px; }
  .nav-burger { display:inline-flex; margin-left:auto; align-items:center; justify-content:center;
    width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r-md);
    background:#fff; color:var(--t1); cursor:pointer; position:relative; z-index:60;
    transition:background .18s, border-color .18s, color .18s; }
  .nav.nav-hero:not(.scrolled) .nav-burger { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); color:#fff; }
  .nav-toggle:checked ~ .nav-burger { background:#12242e; border-color:rgba(255,255,255,.28); color:#fff; }
  /* the menu is a full-screen dark sheet sliding in under the header */
  .nav-links { margin-left:0; position:fixed; inset:72px 0 0 0; z-index:55; display:flex;
    flex-direction:column; align-items:stretch; gap:2px; padding:14px 16px 44px; overflow-y:auto;
    visibility:hidden; opacity:0; transform:translateY(-10px);
    transition:opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
    background:
      radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.4px) 0 0 / 28px 28px,
      radial-gradient(56% 34% at 88% 0%, rgba(16,185,129,.16), transparent 62%),
      linear-gradient(180deg,#0d1b24 0%, #0b1720 100%); }
  .nav-toggle:checked ~ .nav-links { visibility:visible; opacity:1; transform:none;
    transition:opacity .24s var(--ease), transform .24s var(--ease); }
  body:has(.nav-toggle:checked) { overflow:hidden; }
  /* the header bar goes solid dark while the sheet is open, whatever the page.
     backdrop-filter must go too: it would make the nav the containing block for
     the fixed sheet, collapsing it to the nav's height. */
  .nav:has(.nav-toggle:checked) { background:#0d1b24; border-color:rgba(255,255,255,.1); box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav:has(.nav-toggle:checked) .wm, .nav:has(.nav-toggle:checked) .wm span { color:#fff; }
  /* plain links (Pricing, Sign in) */
  .nav-links > a:not(.btn) { padding:14px 12px; color:#eaf1f4; font-size:16px; font-weight:600; border-radius:11px; }
  .nav-links > a:not(.btn):hover { background:rgba(255,255,255,.06); color:#fff; }
  .nav-links .btn { width:100%; margin:10px 0 0; background:#fff; color:var(--ink);
    border-color:#fff; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
  .nav-sep { display:none; }
  /* each mega becomes an always-open, labelled group of rich items */
  .nav-item.has-mega { display:block; width:100%; }
  .nav .nav-links .nav-item .nav-trigger { width:100%; padding:18px 12px 6px; color:#8fe6c4;
    font-size:12px; font-weight:720; letter-spacing:.09em; text-transform:uppercase; }
  .nav .nav-links .nav-item .nav-trigger:hover { background:transparent; color:#b2f1d8; }
  .nav-caret { display:none; }
  .mega { display:block; position:static; opacity:1; visibility:visible; transform:none;
    pointer-events:auto; transition:none; }
  .mega-in { background:transparent; border:0; box-shadow:none; }
  .mega-body { display:block; max-width:none; padding:0; }
  .mega-cols { display:block; }
  .mega-col { padding:0; border:0; }
  .mega-col + .mega-col { border-left:0; }
  .mega-col-label { color:rgba(220,231,236,.42); padding:10px 12px 4px; }
  /* variants collapse back to uniform dark rows in the sheet */
  .mega .mega-item { min-height:52px; padding:8px 12px; border-radius:12px;
    border:0; box-shadow:none; background:transparent; }
  .mega .mega-item:hover { background:rgba(255,255,255,.06); border-color:transparent;
    box-shadow:none; transform:none; }
  .mega .mega-ic { width:36px; height:36px; border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.07); color:#8fe6c4; }
  .mega .mega-item:hover .mega-ic { background:rgba(52,211,153,.16); color:#7ff0c6; border-color:transparent; }
  .mega-tx b { color:#fff; }
  .mega-tx span { color:rgba(220,231,236,.55); }
  .mega-go, .mega-feature, .mega-foot { display:none; }
}

/* ---------- type scale ---------- */
h1 { font-size:clamp(38px,5.4vw,60px); line-height:1.03; letter-spacing:-.042em; font-weight:760; margin:0 0 22px; color:var(--ink); }
h2 { font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:-.032em; font-weight:730; margin:0 0 14px; color:var(--ink); }
h3 { font-size:17px; letter-spacing:-.012em; margin:0 0 7px; font-weight:650; color:var(--ink); }
.lead { font-size:clamp(17px,1.6vw,19.5px); line-height:1.6; color:var(--t2); margin:0; font-weight:430; }
.sub { font-size:17px; line-height:1.62; color:var(--t2); margin:0; font-weight:430; }
.accent-word { background:linear-gradient(100deg,#0f9d6b 0%,#0b7a67 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Balance headings/short copy so lines wrap evenly; body copy uses pretty. */
h1, h2, h3, .lead, .sub, .desc { text-wrap:balance; }
p, .card p, .step p, .mega-tx span, li { text-wrap:pretty; }

.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:680; letter-spacing:.075em;
  text-transform:uppercase; color:var(--slate2); background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-xs); padding:7px 14px; border-radius:var(--r-full); margin-bottom:22px; }
.eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--green); }

:root { --sec-y:128px; }
section { padding:var(--sec-y) 0 calc(var(--sec-y) + 24px); }
section[id], [id] { scroll-margin-top:96px; }
.pad { padding-top:var(--sec-y); padding-bottom:calc(var(--sec-y) + 24px); }
/* two same-surface sections in a row would otherwise open a huge blank run
   between them — collapse the second one's top padding to keep the rhythm */
section:where(:not(.band):not(.spotlight):not(.closing):not(.pricing-stage):not(.page-hero))
  + section:where(:not(.band):not(.spotlight):not(.closing):not(.pricing-stage)) { padding-top:0; }
section.band + section.band { padding-top:0; }
/* inside a padded band/section the wrap already provides rhythm — splits must
   not stack their own vertical padding on top of it */
.pad .split, section .split { padding:0; }
.pad .split + .split, section .split + .split { margin-top:var(--sec-y); }
.sec-head { max-width:680px; margin:0 auto 56px; }
.sec-head.center { text-align:center; }
.sec-head.left { margin:0 0 48px; }

/* ---------- hero (dark, cinematic — homepage only) ---------- */
/* Pulled up behind the sticky nav so the dark bg fills the whole top and the
   nav can ride transparent over it. */
.hero { position:relative; overflow:hidden; color:#eaf1f4; isolation:isolate; margin-top:-84px; padding-top:84px;
  background:
    radial-gradient(58% 48% at 50% -6%, rgba(16,185,129,.20), transparent 66%),
    radial-gradient(48% 52% at 86% 6%, rgba(50,86,108,.6), transparent 72%),
    radial-gradient(44% 46% at 4% 24%, rgba(16,185,129,.12), transparent 70%),
    linear-gradient(178deg,#0b1820 0%, #0f2029 44%, #16303c 100%); }
/* faint dot grid, fading out toward the screenshot */
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:28px 28px;
  mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%);
  -webkit-mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%); }
/* a soft aurora sweep near the top */
.hero::after { content:""; position:absolute; left:50%; top:-32%; width:min(1200px,120%); height:640px; z-index:-1;
  transform:translateX(-50%); pointer-events:none; opacity:.7;
  background:radial-gradient(46% 60% at 50% 50%, rgba(52,224,161,.16), transparent 72%); filter:blur(24px); }
.hero-in { padding:120px 28px 0; max-width:900px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.hero h1 { color:#fff; font-size:clamp(42px,6.1vw,72px); letter-spacing:-.046em; line-height:1.0; }
.hero .accent-word { background:linear-gradient(96deg,#4ee6ad 0%,#10b981 55%,#7ff0c6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .eyebrow { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
  color:#8fe6c4; box-shadow:none; backdrop-filter:blur(6px); }
.hero .eyebrow .dot { background:#3fe0a4; box-shadow:0 0 10px rgba(63,224,164,.8); }
.hero .lead { max-width:60ch; margin:0 auto 34px; color:rgba(220,231,236,.82); font-size:clamp(17px,1.55vw,20px); }
.cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; }
.hero .btn-ghost { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.2);
  box-shadow:none; backdrop-filter:blur(6px); }
.hero .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.36); }
.hero-note { margin:20px 0 0; font-size:13.5px; color:rgba(255,255,255,.6); display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.hero-note span { display:inline-flex; align-items:center; gap:7px; }
.hero-note svg { color:#3fe0a4; }
@media (max-width:900px) { .hero { margin-top:-72px; padding-top:72px; } .hero-in { padding-top:96px; } }
/* Staggered entrance on first paint (dark hero only). */
@media (prefers-reduced-motion: no-preference) {
  .hero-in > .eyebrow, .hero-in > h1, .hero-in > .lead,
  .hero-in > .cta-row, .hero-in > .hero-note, .hero .shot-stage {
    opacity:0; animation:hero-rise .72s var(--ease) both; }
  .hero-in > .eyebrow { animation-delay:.04s; }
  .hero-in > h1 { animation-delay:.12s; }
  .hero-in > .lead { animation-delay:.2s; }
  .hero-in > .cta-row { animation-delay:.28s; }
  .hero-in > .hero-note { animation-delay:.34s; }
  .hero .shot-stage { animation-duration:.9s; animation-delay:.42s; animation-name:hero-rise-shot; }
}
@keyframes hero-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes hero-rise-shot { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }

/* browser-framed product screenshot */
.shot-stage { position:relative; max-width:1060px; margin:64px auto 0; padding:0 28px; }
.shot-stage::before { content:""; position:absolute; inset:8% -4% -12% -4%; z-index:0;
  background:radial-gradient(50% 60% at 50% 45%, rgba(44,74,93,.24), transparent 72%); filter:blur(14px); }
.hero .shot-stage { margin-top:64px; perspective:1900px; }
.hero .shot-stage::before { inset:0% -8% 14% -8%;
  background:radial-gradient(54% 64% at 50% 42%, rgba(52,224,161,.30), rgba(46,92,116,.34) 42%, transparent 74%);
  filter:blur(34px); opacity:.95; }
/* the shot sits flush on the hero's bottom edge, rising out of the fold —
   square bottom corners, no gap (rotateX pivots on that edge, so it stays put) */
.hero .shot-stage .browser { border-radius:16px 16px 0 0; border-bottom:0;
  transform:rotateX(4deg); transform-origin:50% 100%; transition:transform .7s var(--ease);
  box-shadow:0 50px 110px -34px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.07); }
.hero .shot-stage:hover .browser { transform:rotateX(0deg); }
@media (prefers-reduced-motion:reduce) { .hero .shot-stage .browser { transform:none; transition:none; } }
::selection { background:rgba(16,185,129,.22); }
.browser { position:relative; z-index:1; background:#fff; border:1px solid rgba(15,25,38,.09);
  border-radius:18px 18px 0 0; box-shadow:var(--sh-lg); overflow:hidden; }
.browser.rounded { border-radius:18px; }
.browser-bar { display:flex; align-items:center; gap:14px; height:46px; padding:0 18px;
  background:linear-gradient(180deg,#fafbfc,#f2f4f6); border-bottom:1px solid var(--line); }
.browser-dots { display:flex; gap:7px; }
.browser-dots span { width:11px; height:11px; border-radius:50%; }
.browser-dots span:nth-child(1){ background:#f26d6d; } .browser-dots span:nth-child(2){ background:#f2c14d; } .browser-dots span:nth-child(3){ background:#5fc16d; }
.browser-url { flex:1; max-width:420px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:7px;
  height:28px; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:12.5px; color:var(--t3); font-weight:500; }
.browser-url svg { color:var(--green); }
.browser img { width:100%; height:auto; }
/* Crop utility: mask off a screenshot's empty regions. Set --ar (box ratio)
   and --pos (which part to keep) per image; cover-scaling does the zoom. */
.browser img.crop { aspect-ratio:var(--ar,16/10); height:auto; object-fit:cover; object-position:var(--pos,50% 0%); }

/* floating chips over the hero shot */
.float-chip { position:absolute; z-index:2; display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.7); border-radius:14px;
  box-shadow:0 26px 54px -20px rgba(4,16,22,.6), 0 2px 8px -2px rgba(4,16,22,.3);
  padding:12px 16px; font-size:13.5px; font-weight:600; color:var(--t1); backdrop-filter:blur(4px);
  animation:floaty 6s var(--ease) infinite; will-change:transform; }
.float-chip .fc-ic { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.float-chip .fc-sub { display:block; font-size:12px; color:var(--t3); font-weight:500; margin-top:1px; }
.fc-green { background:var(--green-bg); color:var(--accent); }
.fc-slate { background:var(--tint); color:var(--slate2); }
.chip-signed { right:2px; top:-26px; }
.chip-ai { left:-8px; bottom:18%; animation-delay:-3s; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@media (prefers-reduced-motion:reduce) { .float-chip { animation:none; } }
@media (max-width:900px) { .float-chip { display:none; } }

/* ---------- trust / stat strip ---------- */
.strip { border-bottom:1px solid var(--line); background:#fff; }
.strip-in { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding:34px 0; }
.strip-item { display:flex; align-items:center; gap:14px; }
.strip-item .ic { width:40px; height:40px; border-radius:12px; background:var(--tint2); color:var(--slate2);
  display:inline-flex; align-items:center; justify-content:center; flex:none; }
.strip-item .tx b { display:block; font-size:14.5px; letter-spacing:-.01em; color:var(--ink); }
.strip-item .tx span { font-size:12.5px; color:var(--t3); }

/* ---------- grids & cards ---------- */
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.card:hover { transform:translateY(-4px); border-color:#cfd8de;
  box-shadow:0 22px 44px -22px rgba(20,40,54,.32), 0 3px 8px -3px rgba(20,40,54,.1); }
.card.pad-lg { padding:30px; }
/* crafted icon tile — subtle gradient + hairline + inner highlight, warms to
   emerald on hover (or always, when .ic-accent) */
.ic { width:46px; height:46px; border-radius:13px; background:linear-gradient(158deg,#f4f8fa 0%, #e7eef2 100%);
  border:1px solid var(--line2); color:var(--slate2); box-shadow:inset 0 1px 0 #fff;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.ic.ic-accent { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); }
.card:hover .ic:not(.ic-accent) { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); }
.card h3 { font-size:16.5px; }
.card p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; }
.card .more { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:13.5px; font-weight:600; color:var(--accent); }
.card .more svg { transition:transform .18s var(--ease); }
.card:hover .more svg { transform:translateX(3px); }
/* link-cards sweep an emerald hairline across the top on hover */
a.card { position:relative; overflow:hidden; }
a.card::after { content:""; position:absolute; left:0; right:0; top:0; height:2.5px;
  background:linear-gradient(90deg,#34d399,#059669); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease); }
a.card:hover::after { transform:scaleX(1); }
/* Inline links inside card copy must not inflate the line box. */
.card p a { display:inline; padding:0; line-height:inherit; font-size:inherit; vertical-align:baseline; white-space:nowrap; font-weight:600; color:var(--accent); }

/* ---------- alternating feature rows with screenshots ---------- */
.split { display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; padding:64px 0; }
.pad > .split:first-child { padding-top:0; }
.pad > .split:last-child { padding-bottom:0; }
.split.rev { grid-template-columns:1.1fr 0.9fr; }
.split.rev .split-copy { order:2; }
.split h2 { font-size:clamp(26px,2.9vw,34px); }
.split .eyebrow { margin-bottom:16px; }
.split .learn { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:14.5px; font-weight:640; color:var(--accent); }
.split .learn:hover { text-decoration:underline; text-underline-offset:3px; }
.split ul { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:13px; }
.split li { display:flex; gap:12px; align-items:flex-start; color:var(--t1); font-size:15px; line-height:1.5; }
.split li svg { flex:none; margin-top:3px; color:var(--green); }
.split li b { font-weight:640; }
.split-shot { position:relative; }
.split-shot::before { content:""; position:absolute; inset:12% -6% -8% -6%; z-index:0; border-radius:32px;
  background:radial-gradient(55% 65% at 50% 50%, rgba(44,74,93,.16), transparent 75%); filter:blur(10px); }
.split-shot .browser { border-radius:14px; overflow:hidden; }
.split-shot .browser img { transition:transform .5s var(--ease); }
.split-shot .browser:hover img { transform:scale(1.015); }
.split-shot .browser-bar { height:38px; }
/* Tall product-detail crop (e.g. the AI panel) shown as a floating card. */
.panel-frame { position:relative; z-index:1; max-width:400px; margin:0 auto; background:#fff;
  border:1px solid rgba(15,25,38,.09); border-radius:16px; box-shadow:var(--sh-lg); overflow:hidden; }
.panel-frame img { width:100%; height:auto; }

/* ---------- duo: two-up feature cards with a screenshot stage ---------- */
.duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.duo-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-xs); display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.duo-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#d9e0e6; }
.duo-card .shot { position:relative; background:linear-gradient(180deg,var(--tint2),#eaf0ee); border-bottom:1px solid var(--line);
  padding:30px 30px 0; max-height:340px; overflow:hidden; }
.duo-card .shot::after { content:""; position:absolute; inset:auto 0 0; height:56px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(234,240,238,.95)); }
.duo-card .shot img { width:100%; height:auto; display:block; border:1px solid var(--line); border-bottom:0;
  border-radius:12px 12px 0 0; box-shadow:var(--sh-md); }
.duo-card .body { padding:26px 30px 30px; display:flex; flex-direction:column; flex:1; }
.duo-card .body h3 { font-size:19px; letter-spacing:-.015em; margin-bottom:8px; }
.duo-card .body p { margin:0; color:var(--t2); font-size:15px; line-height:1.6; }
.duo-card .body .learn { margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:640; color:var(--accent); }
.duo-card .body .learn:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- product tour: CSS-only tabs over real screenshots ---------- */
.tour { position:relative; }
.tour > input { position:absolute; opacity:0; pointer-events:none; }
.tour-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.tour-tabs label { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff; font-size:14px; font-weight:600; color:var(--t2); cursor:pointer;
  box-shadow:var(--sh-xs); transition:border-color .15s, color .15s, background .15s, transform .1s; }
.tour-tabs label:hover { border-color:#c6d0d8; color:var(--ink); transform:translateY(-1px); }
.tour-panel { display:none; margin:0; }
.tour-panel figcaption { text-align:center; font-size:14px; color:var(--t3); margin-top:18px; }
.tour-panel figcaption b { color:var(--t1); font-weight:640; }
#tt1:checked ~ .tour-tabs label[for="tt1"],
#tt2:checked ~ .tour-tabs label[for="tt2"],
#tt3:checked ~ .tour-tabs label[for="tt3"],
#tt4:checked ~ .tour-tabs label[for="tt4"] { background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 6px 16px -8px rgba(34,57,71,.55); }
#tt1:checked ~ .tour-panels .p1, #tt2:checked ~ .tour-panels .p2,
#tt3:checked ~ .tour-panels .p3, #tt4:checked ~ .tour-panels .p4 { display:block; }
.tour > input:focus-visible ~ .tour-tabs label { outline:none; }
#tt1:focus-visible ~ .tour-tabs label[for="tt1"], #tt2:focus-visible ~ .tour-tabs label[for="tt2"],
#tt3:focus-visible ~ .tour-tabs label[for="tt3"], #tt4:focus-visible ~ .tour-tabs label[for="tt4"] { outline:2px solid var(--slate2); outline-offset:2px; }
.tour .browser { max-width:1000px; margin:0 auto; }

/* ---------- versus: the old way vs with Folio ---------- */
.versus { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:960px; margin:0 auto; align-items:stretch; }
.versus-col { border-radius:var(--r-xl); padding:30px 32px; }
.versus-col h3 { font-size:17.5px; margin-bottom:20px; display:flex; align-items:center; gap:11px; }
.versus-col ul { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.versus-col li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; }
.versus-col li svg { flex:none; margin-top:3px; }
.versus-old { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); box-shadow:var(--sh-xs); }
.versus-old h3 { color:var(--t2); }
.versus-old li { color:var(--t2); }
.versus-old li svg { color:#cf7a72; }
.versus-new { background:linear-gradient(180deg,#f0faf6 0%, #fff 130px); border:1.5px solid rgba(16,185,129,.5);
  box-shadow:0 28px 60px -30px rgba(16,120,84,.35), 0 0 0 1px rgba(16,185,129,.12); }
.versus-new h3 { color:var(--ink); }
.versus-new li { color:var(--t1); }
.versus-new li svg { margin-top:1px; width:14px; height:14px; padding:3px; box-sizing:content-box;
  border-radius:50%; background:var(--accent-bg); color:var(--accent); }
@media (max-width:800px) { .versus { grid-template-columns:1fr; } }

/* ---------- showcase: centered copy over a full-width screenshot ---------- */
.showcase { text-align:center; }
.showcase .shot-stage { margin-top:52px; }

/* ---------- spotlight: dark full-bleed feature band ---------- */
.spotlight { position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(50% 70% at 84% 0%, rgba(16,185,129,.28), transparent 64%),
    radial-gradient(44% 60% at 8% 100%, rgba(57,88,108,.5), transparent 68%),
    linear-gradient(160deg,#1d3341 0%, #16262f 100%); }
.spotlight::before { content:""; position:absolute; inset:0; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px; }
.spotlight .wrap { position:relative; }
.spotlight .split { border:0; }
.spotlight h2 { color:#fff; }
.spotlight .sub { color:rgba(255,255,255,.78); }
.spotlight .split li { color:rgba(255,255,255,.92); }
.spotlight .split li svg { color:#5fd3a6; }
.spotlight .split li b { color:#fff; }
.spotlight .eyebrow { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#a7d9c8; box-shadow:none; }
.spotlight .eyebrow .dot { background:#5fd3a6; }
.spotlight .learn { color:#7fdcb6; }
.spotlight .split-shot::before { background:radial-gradient(55% 65% at 50% 50%, rgba(0,0,0,.4), transparent 75%); }
.spotlight .browser { border-color:rgba(255,255,255,.16); }

/* ---------- steps ---------- */
.steps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; counter-reset:step; }
.step { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; box-shadow:var(--sh-xs); }
.step .n { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#10b981,#059669); color:#fff;
  font-weight:700; font-size:15px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px;
  box-shadow:0 6px 14px -6px rgba(16,185,129,.5); }
.step h3 { font-size:16.5px; }
.step p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; }

/* ---------- bands ---------- */
.band { background:linear-gradient(180deg,#f2f8f5 0%,#eef3f6 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.5); }
.band-plain { background:var(--bg2); }

/* statement band — a first-party product claim, light surface */
.statement { background:var(--bg2); border-top:1px solid var(--line); }
.statement-in { padding:96px 28px; text-align:center; max-width:760px; margin:0 auto; }
.statement-in h2 { font-size:clamp(24px,3vw,34px); margin-bottom:10px; }
.statement-in p { color:var(--t2); font-size:16.5px; margin:0; }

/* ---------- closing: the page finale ---------- */
.closing { position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(56% 70% at 78% -10%, rgba(16,185,129,.4), transparent 62%),
    radial-gradient(48% 64% at 12% 8%, rgba(45,105,92,.5), transparent 66%),
    linear-gradient(180deg,#143430 0%, #10302c 58%, #0d2a27 100%); }
.closing::before { content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px; }
.closing-in { position:relative; padding:var(--sec-y) 28px 0; text-align:center; max-width:760px; margin:0 auto; }
/* closings without a peeking screenshot need real bottom padding (the flush
   screenshot normally provides the bottom edge) */
.closing:not(:has(.closing-shot)) .closing-in { padding-bottom:var(--sec-y); }
.closing h2 { color:#fff; font-size:clamp(30px,3.6vw,42px); margin-bottom:14px; }
.closing p { color:rgba(255,255,255,.82); font-size:17.5px; margin:0 0 32px; }
.closing .cta-row { margin-bottom:26px; }
.closing .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.32); box-shadow:none; }
.closing .btn-ghost:hover { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }
.closing-ticks { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:0; padding:0 0 8px; list-style:none;
  font-size:13.5px; color:rgba(255,255,255,.62); }
.closing-ticks li { display:inline-flex; align-items:center; gap:7px; }
.closing-ticks svg { color:#5fd3a6; }
/* product peek: top slice of a screenshot sliding into the footer */
.closing-shot { position:relative; max-width:920px; margin:80px auto 0; padding:0 28px; }
.closing-shot .frame { border-radius:16px 16px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-bottom:0;
  box-shadow:0 -20px 80px -20px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4); background:#fff; }
.closing-shot img { display:block; width:100%; height:auto; aspect-ratio:16/6.5; object-fit:cover; object-position:50% 0%; }

/* legacy simple cta (kept for compatibility) */
.cta { background:var(--grad); color:#fff; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:0;
  background:radial-gradient(46% 80% at 88% 0%, rgba(255,255,255,.10), transparent 60%),
             radial-gradient(40% 70% at 8% 100%, rgba(0,0,0,.16), transparent 60%); }
.cta-in { position:relative; padding:96px 28px; text-align:center; max-width:700px; margin:0 auto; }
.cta h2 { color:#fff; }
.cta p { color:rgba(255,255,255,.84); font-size:17.5px; margin:0 0 30px; }

/* ---------- pricing ---------- */
.price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.price { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px 30px;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.price:hover { transform:translateY(-5px); border-color:#cfd8de; box-shadow:0 24px 48px -24px rgba(20,40,54,.34), 0 3px 8px -3px rgba(20,40,54,.1); }
.price.feat { border:2px solid var(--slate2); box-shadow:var(--sh-lg); position:relative;
  background:linear-gradient(180deg,#f2f8f5 0%,#fff 130px); }
.price .tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 14px; border-radius:var(--r-full); box-shadow:0 6px 14px -6px rgba(34,57,71,.5); }
.price .name { font-size:20px; font-weight:720; color:var(--ink); letter-spacing:-.015em; }
.price .desc { color:var(--t2); font-size:14px; margin:6px 0 22px; min-height:44px; }
.price .amt-row { display:flex; align-items:baseline; gap:8px; }
.price .amt { font-size:46px; font-weight:760; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.price .per { font-size:14px; color:var(--t2); font-weight:520; }

/* plan comparison table */
.compare { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); }
.compare-wrap { max-width:880px; margin:64px auto 0; overflow-x:auto; }
.compare th, .compare td { padding:13px 18px; font-size:14px; text-align:center; border-bottom:1px solid var(--line2); }
.compare tbody tr { transition:background .12s; }
.compare tbody tr:hover { background:var(--tint2); }
.compare th { background:var(--tint2); font-weight:680; color:var(--ink); font-size:13.5px; }
.compare td:first-child, .compare th:first-child { text-align:left; font-weight:550; color:var(--t1); }
.compare tr:last-child td { border-bottom:0; }
.compare .yes { color:var(--green); font-weight:700; }
.compare .no { color:#c3ccd4; }
.price .btn { margin:24px 0 0; width:100%; }
.price ul { list-style:none; padding:22px 0 0; margin:0; display:grid; gap:12px; align-content:start; flex:1; border-top:1px solid var(--line2); }
.price li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--t1); line-height:1.45; }
.price li svg { flex:none; margin-top:1px; width:14px; height:14px; padding:3px; box-sizing:content-box;
  border-radius:50%; background:var(--accent-bg); color:var(--accent); }

/* ---------- faq ---------- */
.faq { max-width:780px; margin:0 auto; display:grid; gap:14px; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:6px 22px; box-shadow:var(--sh-xs); }
.faq details[open] { border-color:#d3dbe2; box-shadow:var(--sh-sm); }
.faq summary { cursor:pointer; font-weight:620; font-size:15.5px; padding:16px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--slate2); font-size:22px; font-weight:300; line-height:1; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { margin:0 0 18px; color:var(--t2); font-size:14.5px; line-height:1.62; }
.faq-more { text-align:center; margin:36px 0 0; color:var(--t3); font-size:14.5px; }
.faq-more a { font-weight:640; color:var(--accent); }

/* ---------- contact ---------- */
.contact-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:40px;
  text-align:center; box-shadow:var(--sh-md); max-width:580px; margin:0 auto; }
.contact-card .ic { margin:0 auto 18px; width:54px; height:54px; }

/* ---------- footer: dark aurora stage with a ghosted wordmark ---------- */
.foot { position:relative; overflow:hidden; color:#b9c4cf;
  background:
    radial-gradient(44% 52% at 86% 0%, rgba(16,185,129,.13), transparent 64%),
    radial-gradient(38% 48% at 4% 8%, rgba(50,86,108,.38), transparent 70%),
    linear-gradient(180deg,#0d1b24 0%, #0a1620 100%); }
.foot::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px); background-size:30px 30px;
  mask-image:radial-gradient(110% 70% at 50% 0%, #000 25%, transparent 70%);
  -webkit-mask-image:radial-gradient(110% 70% at 50% 0%, #000 25%, transparent 70%); }
/* emerald hairline along the top edge */
.foot::after { content:""; position:absolute; inset:0 0 auto; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent 4%, rgba(16,185,129,.5) 28%, rgba(255,255,255,.28) 50%, rgba(16,185,129,.5) 72%, transparent 96%); }
.foot .wrap { position:relative; z-index:1; }
/* top row: identity left, actions right */
.foot-hero { display:flex; align-items:center; justify-content:space-between; gap:24px 28px; flex-wrap:wrap;
  padding:56px 0 40px; border-bottom:1px solid rgba(255,255,255,.08); }
.foot-brand { display:inline-flex; align-items:center; gap:12px; }
.foot-brand .brand-mk { box-shadow:0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -10px rgba(0,0,0,.7); }
.foot-brand .wm { font-size:19px; font-weight:760; letter-spacing:-.015em; color:#fff; }
.foot-brand .wm span { color:#8b98a5; font-weight:600; margin-left:-0.05em; }
.foot-blurb { color:#8d9aa6; font-size:13.5px; margin:10px 0 0 2px; }
.foot-cta { display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; }
.foot .btn-ghost { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); box-shadow:none; }
.foot .btn-ghost:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); }
.foot-open { display:inline-flex; align-items:center; gap:6px; color:#7fdcb6; font-size:14px; font-weight:640; white-space:nowrap; }
.foot-open:hover { color:#a9f0d3; }
.foot-open svg { transition:transform .18s var(--ease); }
.foot-open:hover svg { transform:translateX(3px); }
/* link columns */
.foot-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; padding:44px 0 26px; }
.foot-col h4 { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.94); font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; margin:0 0 16px; font-weight:720; }
.foot-col h4::before { content:""; width:5px; height:5px; border-radius:50%; flex:none;
  background:#34d399; box-shadow:0 0 8px rgba(52,211,153,.8); }
.foot-col a { display:block; width:fit-content; position:relative; color:#95a3b0; font-size:14px;
  padding:5.5px 0; transition:color .14s; }
.foot-col a::after { content:""; position:absolute; left:0; bottom:3px; height:1px; width:100%;
  background:linear-gradient(90deg,#34d399,#7ff0c6); transform:scaleX(0); transform-origin:left;
  transition:transform .18s var(--ease); }
.foot-col a:hover { color:#fff; }
.foot-col a:hover::after { transform:scaleX(1); }
.foot-col .ext { display:flex; align-items:center; gap:6px; }
.foot-col .ext svg { opacity:.55; flex:none; }
/* bottom bar */
.foot-bot { border-top:1px solid rgba(255,255,255,.08); padding:22px 0 6px; display:flex; gap:14px 28px;
  align-items:center; justify-content:space-between; flex-wrap:wrap; color:#71808d; font-size:13px; }
.foot-bot-l { display:flex; flex-direction:column; gap:4px; }
.foot-reg { margin:0; color:#5e6e7b; font-size:12px; }
.foot-bot-r { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.foot-bot-r a { display:inline-flex; align-items:center; gap:5px; color:#95a3b0; }
.foot-bot-r a:hover { color:#fff; }
.foot-bot-r svg { opacity:.55; flex:none; }
.foot-suite-badge { display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:620; color:#9fb4ac; background:rgba(16,185,129,.13);
  border:1px solid rgba(16,185,129,.3); padding:5px 11px; border-radius:var(--r-full); }
.foot-suite-badge .dot { width:6px; height:6px; border-radius:50%; background:#5fd3a6; }
/* giant ghosted wordmark bleeding off the bottom edge */
.foot-wm { position:relative; z-index:0; margin:24px 0 -0.24em; text-align:center; white-space:nowrap;
  font-size:clamp(64px, 11vw, 168px); font-weight:770; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.012) 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none; pointer-events:none; }
@media (max-width:1040px) { .foot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 26px; } }
@media (max-width:640px) { .foot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .foot-hero { flex-direction:column; align-items:flex-start; padding-top:46px; }
  .foot-bot { flex-direction:column; align-items:flex-start; }
}

/* ---------- page hero (inner pages) ---------- */
/* Inner-page hero — dark &amp; cinematic, matching the homepage hero. */
.page-hero { position:relative; overflow:hidden; color:#eaf1f4; isolation:isolate;
  background:
    radial-gradient(58% 48% at 50% -6%, rgba(16,185,129,.2), transparent 66%),
    radial-gradient(48% 52% at 86% 6%, rgba(50,86,108,.55), transparent 72%),
    linear-gradient(178deg,#0b1820 0%, #0f2029 48%, #16303c 100%); }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:28px 28px;
  mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%);
  -webkit-mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%); }
.page-hero .hero-in { position:relative; padding:92px 28px 96px; max-width:960px; margin:0 auto; }
.page-hero h1 { color:#fff; font-size:clamp(38px,4.9vw,58px); letter-spacing:-.04em; line-height:1.02; }
.page-hero .lead { color:rgba(220,231,236,.82); font-size:clamp(17px,1.5vw,20px); }
.page-hero .sub { color:rgba(220,231,236,.72); }
.page-hero .eyebrow { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#8fe6c4; box-shadow:none; }
.page-hero .eyebrow .dot { background:#3fe0a4; box-shadow:0 0 10px rgba(63,224,164,.8); }
.page-hero .btn-ghost { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.2); box-shadow:none; }
.page-hero .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.36); }

/* ---------- legal pages (privacy / terms) ---------- */
.legal { max-width:760px; margin:0 auto; padding:72px 28px 96px; }
.legal h1 { font-size:clamp(30px,4vw,40px); margin-bottom:8px; }
.legal .meta { color:var(--t3); font-size:13.5px; margin:0 0 34px; }
.legal .lead { margin-bottom:8px; }
.legal h2 { font-size:19px; letter-spacing:-.015em; margin:38px 0 10px; }
.legal p, .legal li { color:var(--t1); font-size:15.5px; line-height:1.7; }
.legal p { margin:0 0 14px; }
.legal ul { padding-left:22px; margin:0 0 14px; }
.legal li { margin:6px 0; }
.legal a { font-weight:600; color:var(--accent); }

/* ---------- a11y ---------- */
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--slate); color:#fff;
  padding:10px 16px; border-radius:0 0 10px 0; font-weight:600; font-size:14px; }
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--slate2); outline-offset:2px; border-radius:4px; }

/* ---------- responsive ---------- */
@media (max-width:820px) { :root { --sec-y:84px; } }
@media (max-width:980px) {
  .strip-in { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split, .split.rev { grid-template-columns:1fr; gap:34px; padding:44px 0; }
  .split.rev .split-copy { order:0; }
  .duo { grid-template-columns:1fr; }
  .price-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
}
@media (max-width:640px) {
  :root { --sec-y:68px; }
  .hero-in { padding:64px 22px 0; }
  .shot-stage { margin-top:44px; padding:0 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .browser-url { display:none; }
  /* equal full-width stacked CTAs */
  .cta-row { flex-direction:column; align-items:stretch; max-width:330px; margin-left:auto; margin-right:auto; }
  .cta-row .btn { width:100%; }
  /* reassurance ticks: one per line, never split from their label */
  .hero-note { flex-direction:column; gap:9px; align-items:center; }
  .hero-note span { white-space:nowrap; }
  /* trust strip: single column, icon left of full-width text */
  .strip-in { grid-template-columns:1fr; gap:18px; }
  .strip-item { justify-content:flex-start; }
  /* zoom-crop wide desktop screenshots so the UI stays legible */
  .split-shot .browser img, .hero .browser img { aspect-ratio:4/3; object-fit:cover; object-position:var(--pos-m, 28% 0%); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .btn, .card, .price { transition:none; }
}