/* Dunwell marketing styles. Emulates jeton.com: giant headlines, full-bleed
   color bands alternating with white, big color-coded action items, and a
   massive footer wordmark. Jeton's coral, rendered in Dunwell green. */
:root {
  --bg:#ffffff; --bg-soft:#f3f8f5;
  --ink:#0f1613; --ink-soft:#5a655f;
  --green:#0f9b63; --green-deep:#0a6e46; --green-ghost:#e7f5ee;
  --green-grad: linear-gradient(135deg,#27c489 0%,#0f9b63 46%,#0a6e46 100%);
  --blue:#2f6bff; --amber:#e08a36; --violet:#7c5cff;
  --line:#e7ece8; --line-2:#dde6e0;
  --radius:20px; --maxw:1180px;
  --glow:0 1px 2px rgba(15,22,19,.04), 0 22px 50px -24px rgba(15,155,99,.30);
  --display:"Bricolage Grotesque", Georgia, serif;
  --body:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
h1,h2,h3 { font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:.94; font-optical-sizing:auto; text-wrap:balance; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); font-weight:500; }
.accent { color:var(--green); }

/* nav */
.nav { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:23px; font-weight:800; letter-spacing:-.03em; }
.brand .dot { width:11px; height:11px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-ghost); }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a { font-size:15px; color:var(--ink-soft); transition:color .18s; }
.nav-links a:hover { color:var(--ink); }
.nav-links a.btn-primary { color:#fff; }
.nav-links a.btn-primary:hover { color:#fff; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:15px; padding:12px 22px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap; }
.btn-primary { background:var(--green); color:#fff; box-shadow:0 10px 24px -10px rgba(15,155,99,.6); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 16px 32px -10px rgba(15,155,99,.7); }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover { border-color:var(--green); color:var(--green-deep); transform:translateY(-1px); }
.btn-lg { padding:15px 30px; font-size:16.5px; }

/* hero (Jeton: small label, giant centered headline, orb accent) */
.hero { position:relative; z-index:0; text-align:center; padding:48px 0 40px; overflow:hidden; }
.hero .wrap { position:relative; z-index:2; }
.hero::before { content:""; position:absolute; top:-180px; right:-200px; width:640px; height:640px; z-index:0; border-radius:50%; filter:blur(10px);
  background:radial-gradient(circle at 38% 35%, #3fd198 0%, #0f9b63 42%, rgba(10,110,70,.0) 72%); opacity:.42; }
.hero::after { content:""; position:absolute; top:60px; left:-160px; width:420px; height:420px; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #d9f3e6 0%, rgba(217,243,230,0) 70%); }
.hero .label { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--green-deep); background:var(--green-ghost); border:1px solid #cfe9dc; padding:7px 16px; border-radius:999px; }
.hero h1 { font-size:clamp(52px, 9vw, 132px); margin:26px auto 0; max-width:14ch; }
.hero .lede { font-size:clamp(17px,2.1vw,21px); color:var(--ink-soft); max-width:48ch; margin:26px auto 0; }
.hero-cta { display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.hero-note { margin-top:18px; font-size:13.5px; color:var(--ink-soft); }
.hero-note b { color:var(--green-deep); font-weight:600; }

/* three color-coded action items (Jeton: Add / Send / Exchange) */
.actions { padding:56px 0 96px; }
.actions .row { display:flex; align-items:center; justify-content:center; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.actions .row:last-child { border-bottom:1px solid var(--line); }
.actions .ic { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:26px; flex:none; }
.actions .ic.g { background:var(--green-ghost); color:var(--green-deep); }
.actions .ic.b { background:#eef1fb; color:var(--blue); }
.actions .ic.a { background:#fdeee2; color:var(--amber); }
.actions .verb { font-family:var(--display); font-weight:800; font-size:clamp(34px,5vw,60px); letter-spacing:-.02em; }
.actions .desc { font-size:16px; color:var(--ink-soft); max-width:34ch; text-align:left; }

/* full-bleed color band (Jeton's coral sections) */
.band { background:var(--green-grad); color:#eafaf2; padding:96px 0; }
.band-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.band h2 { color:#fff; font-size:clamp(34px,5vw,60px); margin-bottom:18px; max-width:16ch; }
.band p { color:#cdeede; font-size:18px; max-width:44ch; }
.band .stat { font-family:var(--mono); margin-top:24px; font-size:15px; color:#bce6d2; }

/* stat band: giant centered statement on green (Jeton "1 million users, plus you") */
.statband { background:var(--green-grad); color:#fff; text-align:center; padding:120px 0; }
.statband h2 { font-size:clamp(40px,7vw,104px); max-width:16ch; margin:0 auto; }
.statband p { color:#cdeede; font-size:19px; margin-top:22px; }

/* ledger card */
.ledger { background:#fff; border-radius:var(--radius); box-shadow:0 40px 80px -30px rgba(10,40,28,.5); overflow:hidden; color:var(--ink); text-align:left; }
.ledger-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.ledger-head .t { font-family:var(--display); font-weight:800; font-size:17px; }
.ledger-head .tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); background:var(--green-ghost); padding:4px 9px; border-radius:7px; }
.row { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:0; }
.row .co { font-weight:600; font-size:15px; }
.row .co small { display:block; color:var(--ink-soft); font-weight:400; font-size:12px; margin-top:2px; }
.row .amt { font-family:var(--mono); font-size:15px; }
.badge { font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; padding:5px 10px; border-radius:999px; font-weight:500; white-space:nowrap; border:1px solid transparent; }
.badge.over { background:#fdecec; color:#d64545; border-color:#f5cccc; }
.badge.paid { background:var(--green-ghost); color:var(--green-deep); border-color:#cfe9dc; }
.badge.soon { background:#fdeee2; color:var(--amber); border-color:#f6dcc4; }
.ledger-foot { padding:16px 22px; background:var(--bg-soft); display:flex; justify-content:space-between; align-items:center; font-size:13.5px; }
.ledger-foot .k { color:var(--ink-soft); }
.ledger-foot .v { font-family:var(--mono); font-weight:600; color:var(--green-deep); }
.swap { position:relative; display:inline-flex; }
.flip .badge.over { animation:fade 5.2s ease-in-out infinite; }
.flip .badge.paid { animation:fadein 5.2s ease-in-out infinite; }
@keyframes fade { 0%,40%{opacity:1} 48%,100%{opacity:0; position:absolute} }
@keyframes fadein { 0%,40%{opacity:0; position:absolute} 48%,100%{opacity:1; position:static} }

/* sections */
section { padding:100px 0; }
.section-head { max-width:60ch; margin:0 auto 56px; text-align:center; }
.section-head h2 { font-size:clamp(34px,5vw,64px); margin-bottom:16px; }
.section-head p { font-size:18px; color:var(--ink-soft); }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; }
.step .n { counter-increment:s; font-family:var(--mono); font-size:12px; color:var(--green); font-weight:500; }
.step .n::before { content:"0" counter(s); }
.steps { counter-reset:s; }
.step h3 { font-size:19px; margin:12px 0 8px; }
.step p { font-size:14.5px; color:var(--ink-soft); }

/* features tiles */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; transition:transform .18s, box-shadow .25s, border-color .25s; }
.feat:hover { transform:translateY(-4px); box-shadow:var(--glow); border-color:#cfe9dc; }
.tile { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:21px; margin-bottom:18px; border:1px solid transparent; }
.tile.g { background:var(--green-ghost); border-color:#cfe9dc; }
.tile.b { background:#eef1fb; border-color:#dde4fb; }
.tile.a { background:#fdeee2; border-color:#f6dcc4; }
.tile.v { background:#f0ecff; border-color:#e2daff; }
.feat h3 { font-size:19px; margin-bottom:9px; }
.feat p { font-size:14.5px; color:var(--ink-soft); }

/* trust */
.trust { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 34px; max-width:980px; margin:0 auto; }
.tcard h3 { font-size:17px; margin-bottom:7px; display:flex; gap:9px; align-items:baseline; }
.tcard h3 .c { color:var(--green); font-size:13px; }
.tcard p { color:var(--ink-soft); font-size:14px; }

/* pricing */
.price-wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; max-width:980px; margin:0 auto; }
.price-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:40px; box-shadow:var(--glow); }
.price-card .amt { font-family:var(--display); font-size:64px; font-weight:800; line-height:1; letter-spacing:-.03em; }
.price-card .amt span { font-family:var(--body); font-size:17px; color:var(--ink-soft); font-weight:500; letter-spacing:0; }
.price-card ul { list-style:none; margin:26px 0 28px; }
.price-card li { padding:10px 0 10px 30px; position:relative; font-size:15px; border-bottom:1px solid var(--line); }
.price-card li:last-child { border-bottom:0; }
.price-card li::before { content:"✓"; position:absolute; left:0; top:9px; color:#fff; background:var(--green); width:18px; height:18px; border-radius:50%; font-size:11px; display:grid; place-items:center; }
.price-aside h2 { font-size:34px; margin-bottom:14px; }
.price-aside p { color:var(--ink-soft); font-size:16px; margin-bottom:12px; }

/* footer with giant wordmark (Jeton signature) */
footer { padding:80px 0 0; border-top:1px solid var(--line); }
.foot-grid { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start; padding-bottom:48px; }
.foot-brand { font-family:var(--display); font-size:22px; font-weight:800; display:flex; align-items:center; gap:9px; }
footer p.tag { color:var(--ink-soft); font-size:14px; margin-top:10px; max-width:34ch; }
.foot-links { display:flex; gap:46px; }
.foot-col h4 { font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; font-weight:500; }
.foot-col a { display:block; font-size:14.5px; padding:5px 0; color:var(--ink); transition:color .18s; }
.foot-col a:hover { color:var(--green); }
.wordmark { font-family:var(--display); font-weight:800; font-size:clamp(90px,22vw,300px); line-height:.8; letter-spacing:-.04em; color:var(--green); text-align:center; padding:10px 0 22px; user-select:none; }
.foot-bottom { padding:24px 0 30px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:30px; }

/* legal */
.legal { max-width:760px; margin:0 auto; padding:56px 24px 90px; }
.legal h1 { font-size:clamp(40px,6vw,64px); margin-bottom:10px; }
.legal .updated { font-family:var(--mono); font-size:13px; color:var(--ink-soft); margin-bottom:36px; }
.legal h2 { font-size:24px; margin:38px 0 12px; }
.legal p, .legal li { color:#3c463f; font-size:16px; margin-bottom:12px; }
.legal ul { padding-left:22px; margin-bottom:16px; } .legal li { margin-bottom:8px; }
.legal a { color:var(--green-deep); text-decoration:underline; text-underline-offset:2px; }
.legal .back { font-family:var(--mono); font-size:13px; }
.legal table { width:100%; border-collapse:collapse; margin:8px 0 20px; }
.legal th, .legal td { text-align:left; padding:10px 12px; border:1px solid var(--line); font-size:14.5px; vertical-align:top; }
.legal th { background:var(--bg-soft); font-family:var(--mono); font-weight:500; font-size:12.5px; }

/* hero entrance */
@keyframes rise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.hero .reveal { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero .reveal:nth-child(1){animation-delay:.04s}
.hero .reveal:nth-child(2){animation-delay:.12s}
.hero .reveal:nth-child(3){animation-delay:.2s}
.hero .reveal:nth-child(4){animation-delay:.28s}

/* responsive */
@media (max-width:920px) {
  .band-grid, .price-wrap { grid-template-columns:1fr; }
  .steps, .feat-grid, .trust-grid { grid-template-columns:1fr 1fr; }
  .nav-links:not(.cta-only) { display:none; }
  .actions .desc { display:none; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .hero::before { width:340px; height:340px; top:-110px; right:-130px; opacity:.32; }
  .hero::after { display:none; }
  section { padding:68px 0; } .band, .statband { padding:72px 0; }
  .steps, .feat-grid, .trust-grid { grid-template-columns:1fr; }
  .actions .row { gap:16px; } .actions .ic { width:50px; height:50px; font-size:22px; }
  .price-card { padding:28px 22px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ============================================================
   v2: conversion rebuild (line icons, flow section, dark bands,
   comparison, screenshots, FAQ, early-access form, mobile nav)
   ============================================================ */

/* line icons replace emoji glyphs everywhere */
svg.i { width:1em; height:1em; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; display:block; }
.tile svg.i { width:24px; height:24px; }
.feat .tile.g { color:var(--green-deep); } .feat .tile.b { color:var(--blue); }
.feat .tile.a { color:var(--amber); } .feat .tile.v { color:var(--violet); }

/* looser line-height for small headings (fixes cramped 2-line h3s) */
.feat h3, .step h3, .tcard h3, .flow-step h3, .faq-q, .shot h3 { line-height:1.14; }

/* eyebrow on dark */
.eyebrow.light { color:#9fe6c4; }

/* ---- Remind / Collect / Reconcile -> numbered lifecycle flow ---- */
.flow { max-width:1000px; margin:0 auto; }
.flow-step { display:grid; grid-template-columns:96px 1fr 200px; gap:32px; align-items:center; padding:44px 0; position:relative; }
.flow-step + .flow-step { border-top:1px solid var(--line); }
.flow-idx { font-family:var(--mono); font-size:17px; font-weight:500; color:var(--green); position:relative; }
.flow-idx::after { content:""; position:absolute; left:7px; top:34px; bottom:-78px; width:2px; background:linear-gradient(var(--line-2), var(--line-2)); }
.flow-step:last-child .flow-idx::after { display:none; }
.flow-body h3 { font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,52px); letter-spacing:-.02em; margin-bottom:10px; }
.flow-body p { font-size:16.5px; color:var(--ink-soft); max-width:48ch; }
.flow-art { height:120px; border-radius:16px; border:1px solid var(--line); background:var(--bg-soft); display:grid; place-items:center; color:var(--green-deep); overflow:hidden; }
.flow-art svg { width:100%; height:100%; }

/* ---- dark band variant (de-green: stat + final CTA) ---- */
.band.dark, .statband.dark { background:radial-gradient(60rem 40rem at 80% -10%, #103a2a 0%, rgba(16,58,42,0) 60%), #0f1613; color:#e9efeb; }
.statband.dark h2 { color:#fff; }
.statband.dark .accent { color:#3fd198; }
.band.dark h2 { color:#fff; } .band.dark p { color:#aebab2; }
.statband.dark p { color:#aebab2; }
.roi { display:inline-flex; flex-wrap:wrap; gap:14px 40px; justify-content:center; margin-top:34px; }
.roi .cell { text-align:center; }
.roi .big { font-family:var(--display); font-weight:800; font-size:clamp(34px,4vw,52px); color:#fff; letter-spacing:-.02em; }
.roi .big.g { color:#3fd198; }
.roi .lab { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8fa399; margin-top:4px; }
.roi .arrow { display:grid; place-items:center; color:#8fa399; font-size:26px; }
.roi .arrow svg { width:30px; height:30px; }

/* ---- comparison vs native ---- */
.compare { max-width:920px; margin:0 auto; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.compare table { width:100%; border-collapse:collapse; }
.compare th, .compare td { padding:16px 20px; text-align:left; font-size:15px; border-bottom:1px solid var(--line); vertical-align:top; }
.compare thead th { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:var(--bg-soft); font-weight:500; }
.compare thead th:last-child { color:var(--green-deep); }
.compare tbody tr:last-child td { border-bottom:0; }
.compare td:first-child { font-weight:600; width:42%; }
.compare .col-d { background:#f4fbf7; }
.compare .yes { color:var(--green-deep); font-weight:600; }
.compare .no { color:var(--ink-soft); }
.compare td .ic-y { display:inline-block; width:18px; height:18px; vertical-align:-4px; margin-right:6px; }

/* ---- See it in action (screenshots) ---- */
.shots { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.shot { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--glow); }
.shot .cap { padding:18px 20px 22px; }
.shot h3 { font-size:18px; margin-bottom:6px; }
.shot p { font-size:14px; color:var(--ink-soft); }
.shot .frame { aspect-ratio:16/10; background:var(--bg-soft); border-bottom:1px solid var(--line); display:grid; place-items:center; color:var(--ink-soft); overflow:hidden; position:relative; }
.shot .frame img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.shot .frame .ph { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* ---- FAQ ---- */
.faq { max-width:820px; margin:0 auto; }
.faq details { border-bottom:1px solid var(--line); }
.faq details[open] .faq-q { color:var(--green-deep); }
.faq summary { list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.faq summary::-webkit-details-marker { display:none; }
.faq-q { font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.faq .pm { flex:none; width:24px; height:24px; color:var(--green); transition:transform .2s; }
.faq details[open] .pm { transform:rotate(45deg); }
.faq .ans { padding:0 0 22px; color:#3c463f; font-size:15.5px; max-width:70ch; }
.faq .ans a { color:var(--green-deep); text-decoration:underline; }

/* ---- early-access form ---- */
.early { max-width:540px; margin:28px auto 0; }
.early form { display:flex; flex-direction:column; gap:12px; }
.early .field { display:flex; flex-direction:column; gap:6px; text-align:left; }
.early label { font-size:12.5px; font-weight:600; color:inherit; opacity:.85; }
.early input { font-family:var(--body); font-size:16px; padding:14px 16px; border-radius:12px; border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; outline:none; transition:border-color .18s, background .18s; }
.early input::placeholder { color:rgba(255,255,255,.5); }
.early input:focus { border-color:#3fd198; background:rgba(255,255,255,.14); }
.early .btn { width:100%; justify-content:center; margin-top:4px; }
.early .fine { font-size:12.5px; color:#9fb0a7; margin-top:4px; }
.early .fine a { color:#cfe9dc; text-decoration:underline; text-underline-offset:2px; }
.early .ok { display:none; padding:22px; border-radius:14px; background:rgba(63,209,152,.12); border:1px solid rgba(63,209,152,.4); color:#d8f6e8; font-size:15px; text-align:center; }
.early.sent form { display:none; } .early.sent .ok { display:block; }
/* light form variant (on white pricing aside) */
.early.lt input { border-color:var(--line-2); background:#fff; color:var(--ink); }
.early.lt input::placeholder { color:#9aa6a0; }
.early.lt label { color:var(--ink-soft); opacity:1; }
.early.lt .fine { color:var(--ink-soft); }

/* ---- mobile nav CTA (persistent) ---- */
.nav-cta-mobile { display:none; }

@media (max-width:920px) {
  .flow-step { grid-template-columns:64px 1fr; }
  .flow-art { display:none; }
  .flow-idx::after { bottom:-90px; }
  .shots { grid-template-columns:1fr; }
  .nav-cta-mobile { display:inline-flex; }
  .compare td:first-child { width:50%; }
}
@media (max-width:560px) {
  .flow-step { grid-template-columns:48px 1fr; gap:18px; padding:32px 0; }
  .flow-idx::after { left:6px; }
  .roi .arrow { transform:rotate(90deg); }
  .compare th, .compare td { padding:12px 12px; font-size:13.5px; }
}

/* ============================================================
   v3: craft pass (optical type, rhythm, focus, motion, real
   screenshot treatment + lightbox, comparison authority)
   ============================================================ */

/* optical typography */
.hero h1 { letter-spacing:-.04em; }
.statband h2, .band h2 { letter-spacing:-.03em; }
.feat h3, .step h3, .tcard h3, .flow-step h3, .faq-q, .shot h3, .price-card .amt { letter-spacing:-.012em; }
.section-head p, .hero .lede, .band p, .statband p { text-wrap:balance; }

/* break the centered-section monotony: left-aligned head variant */
.section-head.left { text-align:left; margin-left:0; margin-right:0; max-width:none; }
.section-head.left h2 { max-width:20ch; }
.section-head.left p { margin-left:0; max-width:54ch; }

/* more air around the giant hero headline */
.hero { padding:72px 0 56px; }

/* focus-visible (was missing; credibility for a finance audience) */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, .btn:focus-visible {
  outline:2px solid var(--green); outline-offset:3px; border-radius:10px;
}
.faq summary:focus-visible { outline-offset:0; }

/* button dimensional polish */
.btn-primary { box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -10px rgba(15,155,99,.6); }
.btn-primary:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 32px -10px rgba(15,155,99,.7); }

/* comparison table: dramatize the win */
.compare thead th:last-child { background:#eaf7f0; border-top:2px solid var(--green); }
.compare td.col-d { background:#f4fbf7; }
.compare tbody tr td.col-d { border-left:1px solid #d8eee2; }
.compare .no { color:#8a948e; }
.compare .yes { display:flex; align-items:flex-start; gap:8px; }
.compare .yes .ck { flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; }
.compare .yes .ck svg { width:11px; height:11px; stroke:#fff; stroke-width:2.5; fill:none; }

/* flow art: drop the grey box, let the line art float */
.flow-art { background:none; border:0; height:108px; }
.flow-art svg { stroke-width:2; }

/* ---- See it in action: window-chrome screenshots + lightbox ---- */
.shots-lead { display:grid; gap:22px; }
.demo-video video { width:100%; display:block; border-radius:18px; border:1px solid #dfe6e1; background:#0f1613;
  box-shadow:0 40px 80px -34px rgba(10,40,28,.42), 0 10px 28px -16px rgba(0,0,0,.2); }

/* hero media: product loop right under the hero */
.hero-media { padding:6px 0 56px; }
.hero-media video { width:100%; display:block; border-radius:22px; border:1px solid var(--line); background:#0f1613;
  box-shadow:0 50px 100px -36px rgba(10,40,28,.46), 0 14px 34px -18px rgba(0,0,0,.22); }
@media (max-width:560px) { .hero-media { padding:0 0 40px; } .hero-media video { border-radius:16px; } }
.shots-pair { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.win { border:1px solid #dfe6e1; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 30px 60px -32px rgba(10,40,28,.40), 0 8px 20px -14px rgba(0,0,0,.18); }
.win .bar { height:34px; background:#f3f6f4; border-bottom:1px solid #e7ece8; display:flex; align-items:center; gap:7px; padding:0 14px; }
.win .bar i { width:10px; height:10px; border-radius:50%; background:#d6ddd8; display:block; }
.win .bar i:nth-child(1){ background:#efb0a6; }
.win .bar i:nth-child(2){ background:#f2d09a; }
.win .bar i:nth-child(3){ background:#bfe3c9; }
.win .shotimg { display:block; width:100%; cursor:zoom-in; }
.shot-hero .shotimg { width:100%; height:auto; }
.shots-pair .win .shotimg { height:300px; object-fit:cover; object-position:top; }
.shot-cap { margin-top:14px; }
.shot-cap h3 { font-size:18px; margin-bottom:5px; }
.shot-cap p { font-size:14px; color:var(--ink-soft); max-width:52ch; }
.shots-pair .item { display:flex; flex-direction:column; }
#lightbox { position:fixed; inset:0; background:rgba(8,18,13,.82); z-index:200; display:none; align-items:center; justify-content:center; padding:32px; cursor:zoom-out; backdrop-filter:blur(4px); }
#lightbox.open { display:flex; }
#lightbox img { max-width:1100px; width:100%; height:auto; border-radius:12px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6); }

/* credibility line under the early-access form */
.cred { max-width:560px; margin:22px auto 0; font-size:12.5px; color:#9fb0a7; text-align:center; line-height:1.6; }

/* ---- safe scroll-reveal (class added by JS; never hides without JS) ---- */
.anim { opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.anim.in { opacity:1; transform:none; }
.compare tbody tr.anim { transition-delay:calc(var(--i, 0) * 45ms); }

@media (max-width:920px) {
  .shots-pair { grid-template-columns:1fr; }
  .shots-pair .win .shotimg { height:auto; }
}