
/* Layout: a calm ledger. Light paper pages, one deep-ink band for the live demo, product shots doing the talking. */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#F7F5F2; --surface:#FFFFFF; --sunk:#EFECE8; --line:#E4DFDA; --line-strong:#D3CCC5;
  --ink:#2C2825; --muted:#6F665F; --faint:#9A9089;
  --accent:#8A6A50; --accent-mark:#A6856A; --positive:#4F6E4C; --warn:#A8742A; --over:#A4503E;
  --night:#23201D; --night-2:#2D2926; --night-3:#38332F; --night-line:#433D38; --night-fg:#F1ECE6; --night-muted:#ABA198;
  --s1:#a6b9c1; --s2:#ceb6a5; --s3:#b2c1aa; --s4:#c3b5ca; --s5:#d2b8bd; --s6:#cdc5aa; --s7:#b5cbc6; --s8:#bdc4d4; --s9:#c9bdb2;
  --demo-accent:#9caf99; --demo-expense:#cfb99b;
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:18px; --wrap:1200px;
  --shadow:0 1px 2px rgba(44,40,37,.05),0 18px 50px -18px rgba(44,40,37,.22);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#181614; --surface:#211E1B; --sunk:#2A2623; --line:#36312D; --line-strong:#4A433E;
  --ink:#EFE9E2; --muted:#ADA39A; --faint:#857B73;
  --accent:#D2B79C; --accent-mark:#C9AE95; --positive:#9DBB97; --warn:#D9AA62; --over:#E08E7A;
  --night:#100E0D; --night-2:#1C1917; --night-3:#272320; --night-line:#35302C; --night-fg:#F1ECE6; --night-muted:#A69C93;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 50px -18px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#181614; --surface:#211E1B; --sunk:#2A2623; --line:#36312D; --line-strong:#4A433E;
  --ink:#EFE9E2; --muted:#ADA39A; --faint:#857B73;
  --accent:#D2B79C; --accent-mark:#C9AE95; --positive:#9DBB97; --warn:#D9AA62; --over:#E08E7A;
  --night:#100E0D; --night-2:#1C1917; --night-3:#272320; --night-line:#35302C; --night-fg:#F1ECE6; --night-muted:#A69C93;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 50px -18px rgba(0,0,0,.6); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.eyebrow{font:600 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7}
.lead{font-size:clamp(17px,1.6vw,19.5px);line-height:1.6;color:var(--muted);max-width:60ch}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--accent-mark);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:600 15.5px/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.btn svg{width:17px;height:17px;transition:transform .2s ease}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;color:var(--ink);flex:none}
.brand svg{height:26px;width:auto}
.nav{display:flex;gap:26px;margin-left:12px}
.nav a{font-size:14.5px;font-weight:500;color:var(--muted);text-decoration:none;padding:6px 0;position:relative}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--accent-mark)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.test-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
.test-pill i{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.top .btn{height:42px;padding:0 18px;font-size:14.5px}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:20px;height:20px}

/* hero */
.hero{padding-block:clamp(48px,7vw,96px) 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(44px,5.6vw,78px);line-height:1.02;margin:22px 0 24px}
.hero h1 em{font-style:normal;color:var(--accent-mark);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:2%;right:2%;bottom:.04em;height:.09em;border-radius:99px;background:var(--accent-mark);opacity:.35;transform-origin:left;animation:underline 1.1s .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .lead{margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:12px 30px;margin:42px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column;gap:3px}
.facts dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.facts dd{margin:0;font-size:15px;font-weight:500}
.hero-visual{position:relative;min-width:0}
.hero-visual>img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(44,40,37,.12))}
.ledger-row{position:absolute;left:-6%;bottom:9%;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px 14px 14px;display:flex;gap:14px;align-items:center;max-width:min(380px,82%);animation:float-in .9s .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes float-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ledger-row .chip{width:40px;height:40px;border-radius:12px;background:var(--sunk);display:grid;place-items:center;color:var(--accent-mark);flex:none}
.ledger-row .chip svg{width:20px;height:20px}
.ledger-row b{display:block;font-size:14.5px;font-weight:600}
.ledger-row span{display:block;font-size:13px;color:var(--muted)}
.ledger-row .amt{margin-left:auto;font-weight:600;font-size:15px;white-space:nowrap}
.ledger-row .ok{display:inline-flex;align-items:center;gap:5px;color:var(--positive);font-weight:600}
.proof{margin-top:clamp(40px,5vw,64px);padding-block:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;color:var(--muted);font-size:14.5px}
.proof span{display:inline-flex;align-items:center;gap:10px}
.proof svg{width:18px;height:18px;color:var(--accent-mark);flex:none}

/* sections */
section{padding-block:clamp(72px,9vw,128px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,4.5vw,56px)}
.sec-head h2{font-size:clamp(34px,4.2vw,54px);margin-top:18px}
.sec-head .lead{justify-self:end}

/* product viewer */
.viewer{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.vtabs{display:flex;flex-direction:column;gap:4px;position:sticky;top:110px}
.vtab{all:unset;cursor:pointer;display:grid;grid-template-columns:28px 1fr;gap:4px 14px;padding:18px 18px 18px 14px;border-radius:14px;border:1px solid transparent;transition:background-color .2s,border-color .2s}
.vtab .n{font:600 13px/1.6 var(--body);color:var(--faint);font-variant-numeric:tabular-nums}
.vtab strong{font:500 21px/1.25 var(--display);color:var(--muted);transition:color .2s}
.vtab .d{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--muted);display:none}
.vtab:hover strong{color:var(--ink)}
.vtab[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.vtab[aria-selected="true"] strong{color:var(--ink)}
.vtab[aria-selected="true"] .n{color:var(--accent-mark)}
.vtab[aria-selected="true"] .d{display:block}
.vtab:focus-visible{outline:2.5px solid var(--accent-mark)}
.stage{position:relative;background:var(--sunk);border-radius:24px;padding:clamp(16px,3vw,40px);min-height:320px;overflow:hidden}
.stage::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-mark) 18%,transparent),transparent);pointer-events:none}
.stage figure{margin:0;position:relative}
.stage img{width:100%;height:auto;border-radius:10px;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.stage img.swap{opacity:0;transform:translateY(8px)}
.stage figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:13px;color:var(--muted)}
.stage figcaption b{font-weight:600;color:var(--ink)}

/* demo band */
.band{background:var(--night);color:var(--night-fg);border-radius:clamp(0px,2.4vw,36px);margin-inline:clamp(0px,1.6vw,24px)}
.band .eyebrow{color:var(--demo-accent)}
.band .lead{color:var(--night-muted)}
.band h2{color:var(--night-fg)}
.controls{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;margin-bottom:22px}
.seg{display:inline-flex;background:var(--night-2);border:1px solid var(--night-line);border-radius:999px;padding:4px}
.seg button{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--night-muted)}
.seg button[aria-pressed="true"]{background:var(--night-fg);color:var(--night)}
.seg button:focus-visible{outline:2px solid var(--demo-accent)}
.swatches{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--night-muted)}
.swatches button{all:unset;cursor:pointer;width:30px;height:30px;border-radius:50%;background:var(--sw);border:2px solid var(--night);box-shadow:0 0 0 1.5px var(--night-line);position:relative}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--night-fg)}
.swatches button:focus-visible{outline:2px solid var(--night-fg);outline-offset:3px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.kpi{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--radius);padding:20px 22px}
.kpi small{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--night-muted)}
.kpi strong{display:block;font:500 clamp(26px,2.6vw,34px)/1.15 var(--display);margin:10px 0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi strong u{text-decoration:none;font:500 15px var(--body);color:var(--night-muted);margin-left:5px}
.kpi .note{display:block;font-size:13px;color:var(--night-muted)}
.kpi .note b{font-weight:600;color:var(--demo-accent)}
.panels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.panel{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--radius);padding:22px 24px;min-width:0}
.panel h3{font-size:21px;color:var(--night-fg)}
.panel .sub{font-size:13.5px;color:var(--night-muted);margin-top:4px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.legend{display:flex;gap:16px;font-size:13px;color:var(--night-muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:1px}
.p-chart{grid-column:span 7}.p-cats{grid-column:span 5}.p-budget{grid-column:span 7}.p-subs{grid-column:span 5}
#bars{width:100%;height:auto;overflow:visible}
#bars text{fill:var(--night-muted);font:500 12px var(--body)}
#bars .grid{stroke:var(--night-line)}
#bars .hit{fill:transparent;cursor:pointer}
#bars .hit:hover+g rect,#bars .hit:focus+g rect{filter:brightness(1.12)}
#bars .hit:focus{outline:none}
.cats{display:flex;flex-direction:column;gap:13px}
.cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:14px}
.cat .bar{grid-column:1/-1;height:8px;border-radius:99px;background:var(--night-3);overflow:hidden}
.cat .bar i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.cat em{font-style:normal;color:var(--night-muted);font-variant-numeric:tabular-nums}
.brow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 92px;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--night-line);font-size:14px}
.brow:first-of-type{border-top:0}
.brow b{font-weight:600;display:block}
.brow small{color:var(--night-muted);font-size:12.5px}
.brow .pill{justify-self:end}
.track{height:8px;border-radius:99px;background:var(--night-3);overflow:hidden}
.track i{display:block;height:100%;border-radius:99px;background:var(--demo-accent);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:#a8c4a2;background:rgba(168,196,162,.12)}
.pill.watch{color:#e2b977;background:rgba(226,185,119,.12)}
.pill.over{color:#e9a08f;background:rgba(233,160,143,.13)}
.srow{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--night-line);font-size:14px}
.srow:first-of-type{border-top:0}
.srow .ic{width:38px;height:38px;border-radius:11px;background:var(--night-3);display:grid;place-items:center;color:var(--demo-accent)}
.srow .ic svg{width:18px;height:18px}
.srow small{display:block;color:var(--night-muted);font-size:12.5px}
.srow .r{text-align:right;font-variant-numeric:tabular-nums}
.subs-total{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--night-3);display:flex;justify-content:space-between;font-size:14px}
.insight{grid-column:1/-1;display:flex;gap:16px;align-items:center;background:transparent;border:1px dashed var(--night-line)}
.insight .ic{width:42px;height:42px;border-radius:12px;background:var(--night-3);display:grid;place-items:center;color:var(--demo-accent);flex:none}
.insight p{font-size:15.5px}
.insight p b{font-weight:600}
.demo-note{margin-top:18px;font-size:13px;color:var(--night-muted)}
.tip{position:fixed;z-index:70;pointer-events:none;background:var(--night-fg);color:var(--night);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45;box-shadow:0 12px 30px rgba(0,0,0,.3);font-variant-numeric:tabular-nums}
.tip b{display:block;margin-bottom:2px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);counter-reset:s}
.step{padding-top:26px;border-top:1.5px solid var(--ink);position:relative}
.step .k{font:500 15px var(--display);color:var(--accent-mark)}
.step h3{font-size:clamp(24px,2.3vw,30px);margin:10px 0 12px}
.step p{color:var(--muted);font-size:16px}

/* included */
.inc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.group h3{font-size:22px;margin-bottom:6px}
.group p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.group li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.group li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent-mark);flex:none;transform:translateY(-2px)}
.know{background:var(--sunk);border-radius:var(--radius);padding:28px}
.know h3{font-size:24px;margin-bottom:16px}
.know dl{margin:0;display:flex;flex-direction:column}
.know div{padding:13px 0;border-top:1px solid var(--line-strong)}
.know div:first-child{border-top:0;padding-top:0}
.know dt{font-weight:600;font-size:15px}
.know dd{margin:3px 0 0;color:var(--muted);font-size:14.5px}

/* film */
.film{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.film h2{font-size:clamp(32px,3.6vw,46px);margin:18px 0 18px}
.film video{width:100%;height:auto;border-radius:20px;background:var(--night);box-shadow:var(--shadow);aspect-ratio:16/9}

/* price */
.price-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(24px,5vw,72px);align-items:center}
.price-wrap h2{font-size:clamp(36px,4.4vw,58px);margin:18px 0 20px}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow);position:relative}
.price-card .tag{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.amount{display:flex;align-items:flex-start;gap:6px;margin:18px 0 6px;font-family:var(--display);font-variant-numeric:tabular-nums}
.amount b{font-weight:500;font-size:96px;line-height:.9;letter-spacing:-.03em}
.amount span{font-size:34px;margin-top:8px}
.amount s{align-self:flex-end;margin:0 0 10px 14px;font:500 20px var(--body);color:var(--faint)}
.price-card .when{font-size:14.5px;color:var(--muted)}
.price-card ul{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:11px}
.price-card li{display:flex;gap:12px;font-size:15px}
.price-card li svg{width:18px;height:18px;color:var(--positive);flex:none;margin-top:3px}
.price-card .btn{width:100%;justify-content:center;height:56px;font-size:16px}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
.secure svg{width:15px;height:15px}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px)}
.faq h2{font-size:clamp(34px,4vw,50px);margin-top:18px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:500 20px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:transform .25s ease,background-color .2s}
.faq summary i svg{width:15px;height:15px}
.faq details[open] summary i{transform:rotate(45deg);background:var(--sunk)}
.faq details p{padding:0 50px 24px 0;color:var(--muted);font-size:16px;max-width:64ch}

/* closing + footer */
.closing{text-align:left;padding-block:clamp(64px,8vw,110px)}
.closing .box{background:var(--sunk);border-radius:28px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.closing h2{font-size:clamp(34px,4.6vw,60px)}
.closing p{color:var(--muted);margin-top:14px;max-width:52ch}
footer{padding-block:56px 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.6fr));gap:32px}
.foot .brand svg{height:28px}
.foot p{margin-top:14px;max-width:38ch}
.foot h4{margin:0 0 12px;font:600 12.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--faint)}

/* reveal: visible at rest, gently lifted when JS runs */
.hero-copy>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}.hero-copy>*:nth-child(5){animation-delay:.32s}
.hero-visual>img{animation:rise 1s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rv-on .rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 110ms)}
.rv-on .rv:not(.in){opacity:0;transform:translateY(34px)}
.rv-on .stage.rv:not(.in),.rv-on video.rv:not(.in){transform:translateY(34px) scale(.97)}
#bars .b{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
#bars.grown .b{transform:scaleY(1)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}#bars .b{transform:none}}

/* responsive */
@media (max-width:1020px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .top.open .nav{display:flex;position:absolute;left:0;right:0;top:72px;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px max(24px,env(safe-area-inset-right,0px)) 16px max(24px,env(safe-area-inset-left,0px));margin:0}
  .top.open .nav a{padding:14px 0;border-top:1px solid var(--line);font-size:16px}
  .hero-grid,.sec-head,.viewer,.inc,.film,.price-wrap,.faq{grid-template-columns:minmax(0,1fr)}
  .sec-head .lead{justify-self:start}
  .vtabs{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .vtab{grid-template-columns:auto;padding:12px 16px;white-space:nowrap;border-color:var(--line)}
  .vtab .n,.vtab .d,.vtab[aria-selected="true"] .d{display:none}
  .vtab strong{font-size:16px}
  .p-chart,.p-cats,.p-budget,.p-subs{grid-column:1/-1}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger-row{left:2%}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .test-pill{display:none}
  .top .btn{padding:0 14px}
  .facts{grid-template-columns:repeat(2,auto)}
  .ledger-row{position:relative;left:auto;bottom:auto;margin:-24px auto 0;max-width:100%}
  .steps,.groups{grid-template-columns:minmax(0,1fr)}
  .kpi{padding:16px}
  .panel{padding:18px}
  .brow{grid-template-columns:minmax(0,1fr) 92px}
  .brow .track{grid-column:1/-1;grid-row:2}
  .closing .box{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot>div:first-child{grid-column:1/-1}
  .amount b{font-size:80px}
  .faq details p{padding-right:0}
}
#bars .b,#bars text{pointer-events:none} .test-status{font-size:13px;color:var(--muted);margin-top:12px} @media(max-width:640px){.test-pill{display:inline-flex;font-size:10px;padding:4px}.top .btn{font-size:12px}.brand{max-width:110px}.top .brand svg{height:23px}.top .wrap{gap:8px}.top-actions{gap:6px}.top .btn{padding:0 10px;white-space:nowrap}.test-pill{max-width:62px;white-space:normal;line-height:1.15}}

/* Sendaris: sage, clay and mist accents, shared by legal pages. */
:root{--accent:#35655B;--accent-mark:#4F7D71}
.hero{background:radial-gradient(ellipse at 86% 15%,#BCD6CE66,transparent 55%),radial-gradient(ellipse at 8% 85%,#E7C9B944,transparent 58%)}
.btn-primary{background:#315E53;color:#fff;box-shadow:0 4px 14px #315E5318}
.btn-primary:hover{background:#254D44;box-shadow:0 7px 22px #315E5328}
.hero h1 em{color:var(--accent-mark)}
.step{border-top-color:var(--accent-mark)}
.step:nth-child(2){border-top-color:#B57F65}.step:nth-child(3){border-top-color:#829AB3}
.group:nth-child(3n+1){background:color-mix(in srgb,var(--surface) 88%,#AAC8B8)}
.group:nth-child(3n+2){background:color-mix(in srgb,var(--surface) 89%,#DFC1AE)}
.group:nth-child(3n){background:color-mix(in srgb,var(--surface) 88%,#B7C9DF)}
.price-card{border-color:color-mix(in srgb,var(--line) 45%,#7DAB97);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 87%,#BBD6C7),var(--surface) 70%)}
.closing .box{background:linear-gradient(120deg,color-mix(in srgb,var(--paper) 75%,#A4C5B4),color-mix(in srgb,var(--paper) 82%,#B8CBE2))}
footer{background:color-mix(in srgb,var(--paper) 90%,#A4C5B4)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent:#A9CEBE;--accent-mark:#A9CEBE}}
:root[data-theme="dark"]{--accent:#A9CEBE;--accent-mark:#A9CEBE}


.product-nav{display:flex;align-items:center;gap:20px;margin-left:auto}.product-nav a{font-size:14px;text-decoration:none;padding:12px 0;min-height:44px}.product-top .wrap{height:auto;min-height:72px;flex-wrap:wrap;gap:8px 24px;padding-block:12px}.product-top .brand img{width:145px;height:auto}.product-hero{padding-bottom:48px}.product-hero h1{font-size:clamp(36px,5vw,64px)}.product-hero h1 em{white-space:normal}.product-shot{width:100%;height:auto;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.product-caption{font-size:13px;color:var(--muted);margin-top:12px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.product-card{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--surface)}.product-card h3{font-size:27px;margin-bottom:14px}.product-card p{color:var(--muted)}.product-list{padding-left:22px}.product-list li{margin:12px 0}.product-note{margin-top:24px;padding:18px 22px;background:var(--sunk);border-radius:14px}.product-price{font-family:var(--display);font-size:52px;margin:18px 0}.product-video{width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;display:block}.product-breadcrumb{font-size:13px;margin-bottom:30px;color:var(--muted)}.product-footer{display:flex;flex-wrap:wrap;gap:20px}.skip-link{position:absolute;left:16px;top:-80px;z-index:100;background:var(--surface);padding:12px}.skip-link:focus{top:12px}.product-grid>*{min-width:0}@media(max-width:760px){.product-grid{grid-template-columns:1fr}.product-nav{width:100%;justify-content:space-between;gap:8px}.product-nav a{font-size:13px}.product-top{position:static}.hero h1 em{white-space:normal}.product-hero{padding-top:32px}.product-card{padding:24px}.product-hero .btn{height:auto;min-height:48px;padding:14px 20px;line-height:1.4}.hero-grid{gap:28px}.product-price{font-size:44px}} 
.product-hero .hero-copy>*{animation:none}.product-hero h1 em::after{animation:none}
