/* Capital Wizard — marketing site */
:root{
  --font-sans:"Geist","Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --paper:#f2f1ef; --paper-2:#eceae6; --card:#fbfaf9;
  --ink:#16171a; --ink-2:#4c4e55; --ink-3:#66676f;
  --line:#e1dfda; --line-2:#cfccc5;
  --brand:oklch(0.55 0.19 275); --brand-hi:oklch(0.62 0.17 275); --brand-soft:oklch(0.955 0.025 275); --on-accent:#fff;
  --pos:oklch(0.53 0.14 150); --neg:oklch(0.55 0.18 25); --warn:oklch(0.66 0.14 75);
  --r:10px; --r-sm:6px;
  --wrap:1180px;
}
html[data-theme="dark"]{
  --paper:#101114; --paper-2:#16181c; --card:#191b20;
  --ink:#f0efed; --ink-2:#a9abb2; --ink-3:#8a8c94;
  --line:#26282e; --line-2:#33363d;
  --brand:oklch(0.72 0.15 275); --brand-hi:oklch(0.78 0.14 275); --brand-soft:oklch(0.3 0.08 275); --on-accent:oklch(0.16 0.02 275);
  --pos:oklch(0.74 0.14 150); --neg:oklch(0.7 0.16 25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-hi)}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}
.band{padding:104px 0;position:relative}
.band.tight{padding:72px 0}
.band.paper2{background:var(--paper-2)}
.band.dark{background:#0d0e11;color:#f0efed;--ink:#f0efed;--ink-2:#a3a5ad;--ink-3:#84868e;--line:#242730;--line-2:#333741;--card:#15171c;--paper:#0d0e11;--paper-2:#131519;--brand:oklch(0.74 0.15 275);--on-accent:oklch(0.16 0.02 275);--brand-soft:oklch(0.3 0.08 275);--pos:oklch(0.74 0.14 150);--neg:oklch(0.7 0.16 25)}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow.accent{color:var(--brand)}
h1,.h1{font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-.032em;font-weight:600;text-wrap:balance}
h2,.h2{font-size:clamp(30px,3.2vw,42px);line-height:1.06;letter-spacing:-.028em;font-weight:600;text-wrap:balance}
h3,.h3{font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:600}
.lead{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.small{font-size:13.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
em.hl{font-style:normal;color:var(--brand)}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:640px;margin-bottom:44px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r-sm);font-size:14.5px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background .14s,border-color .14s,color .14s;white-space:nowrap}
.btn.primary{background:var(--brand);color:var(--on-accent);border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-hi);border-color:var(--brand-hi);color:var(--on-accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.btn.sm{height:38px;padding:0 14px;font-size:13.5px}
.btn.lg{height:52px;padding:0 26px;font-size:15.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;letter-spacing:-.02em;font-size:15.5px}
.brand:hover{color:var(--ink)}
.logo{width:28px;height:28px;border-radius:6px;background:#17181b;display:grid;place-items:center;flex:none}
.logo svg{width:18px;height:18px}
.nav-links{display:flex;gap:22px;margin-left:8px;align-self:stretch}
.nav-links a{font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"],.nav-links a.is-on{color:var(--ink)}
.nav-links a[aria-current="page"]::after,.nav-links a.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--brand)}
.nav-sp{flex:1}
.nav-act{display:flex;align-items:center;gap:10px}
@media(max-width:860px){.nav-links{display:none}}
.nav-act a.plain{font-size:14px;color:var(--ink-2)}
.nav-act a.plain:hover{color:var(--ink)}
/* Language switcher — plain links to the same page in the other language, so it
   works with JS off; the head script records the pick in cw:locale. */
.lang-sw{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:9px}
.lang-sw__opt{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;font-weight:600;color:var(--ink-3);padding:4px 8px;border-radius:7px;line-height:1}
.lang-sw__opt:hover{color:var(--ink)}
.lang-sw__opt.is-on{background:var(--brand-soft);color:var(--ink)}
@media(max-width:520px){.lang-sw{display:none}}

/* hero */
.hero{padding:76px 0 104px;overflow:hidden}
/* The art shows the app at its TRUE desktop viewport (no data-w override) — its
   size comes from spacing alone: a narrow copy column and tight gap. Margins
   stay symmetric inside the wrap. */
.hero-in{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:32px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.hero h1{font-size:clamp(30px,3vw,44px)}
.hero h1 .sub-line{display:block;color:var(--ink-3)}
.hero .lead{font-size:17.5px}
.hero-note{display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.hero-note span{display:inline-flex;align-items:center;gap:9px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--pos);flex:none}
/* No bleed: the art ends at the wrap edge, so the right gap mirrors the left page margin. */
.hero-art{position:relative;perspective:1600px}
.tiltable{transform:rotateX(var(--rx,2deg)) rotateY(var(--ry,-6deg));transition:transform .45s cubic-bezier(.2,.7,.3,1);transform-style:preserve-3d;will-change:transform}
.tilt3d{transform:perspective(1700px) rotateX(var(--rx,1.6deg)) rotateY(var(--ry,-4.5deg));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tilt3d:hover{--rx:2.6deg;--ry:-7deg}
.tilt3d.lean-l{--ry:4.5deg}
.tilt3d.lean-l:hover{--rx:2.6deg;--ry:7deg}
.pv-frame .frame{transform:perspective(1900px) rotateX(var(--rx,1.2deg)) rotateY(var(--ry,-3.5deg));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pv-frame:hover .frame{--rx:2deg;--ry:-5.5deg}
@media(prefers-reduced-motion:reduce){.tilt3d,.pv-frame .frame{transform:none}}
.hero-art .frame.browser{position:relative;z-index:1}
.hero-phone{position:absolute;right:-2%;bottom:-52px;width:15%;min-width:112px;z-index:3;transform:translateZ(60px)}
.float-card{position:absolute;left:-20px;bottom:-46px;width:274px;z-index:4;transform:translateZ(90px);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.hero-art:hover .float-card{transform:translateZ(120px) translateY(-4px)}
@media(max-width:1000px){.hero{padding:56px 0 72px}.hero-in{grid-template-columns:1fr;gap:40px}.hero-art{margin-right:0;min-width:0;overflow:hidden}.hero-phone,.float-card{display:none}}

/* net worth card */
.nwc{background:#15171c;border:1px solid #2a2e36;border-radius:10px;padding:15px 16px;box-shadow:0 24px 50px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);color:#f0efed;font-size:13px}
.nwc .h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.nwc .h svg{width:14px;height:14px;color:#7c7e86}
.nwc .h .t{font-size:12px;font-weight:600;flex:1}
.nwc .big{font-family:var(--font-mono);font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1;color:oklch(0.78 0.14 150)}
.nwc .sub{font-family:var(--font-mono);font-size:10.5px;color:#7c7e86;margin-top:5px;letter-spacing:.04em}
.nwc .rows{margin-top:13px;display:flex;flex-direction:column}
.nwc .r{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px dashed #262a32;font-size:12px;color:#a3a5ad}
.nwc .r:last-child{border-bottom:0}
.nwc .r b{margin-left:auto;font-family:var(--font-mono);font-weight:400;font-size:12px;color:#f0efed}
.nwc .lbar{display:flex;height:6px;border-radius:4px;overflow:hidden;gap:2px;margin:12px 0 10px}
.nwc .lbar i{display:block;height:100%;border-radius:2px;width:0;transition:width .9s cubic-bezier(.3,.8,.3,1)}
.nwc.lit .lbar i{width:var(--w)}
.nwc .leg{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
.nwc .leg span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#a3a5ad}
.nwc .leg span i{width:6px;height:6px;border-radius:2px;flex:none}
.nwc .leg span b{margin-left:auto;font-family:var(--font-mono);font-weight:400;color:#f0efed}

/* entrance motion */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes riseArt{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
.anim>*{animation:rise .7s cubic-bezier(.2,.7,.3,1)}
.anim>*:nth-child(2){animation-delay:.06s}
.anim>*:nth-child(3){animation-delay:.12s}
.anim>*:nth-child(4){animation-delay:.18s}
.anim>*:nth-child(5){animation-delay:.24s}
.anim>*:nth-child(6){animation-delay:.3s}
.hero-art{animation:riseArt .9s .12s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.anim>*,.hero-art{animation:none}.tiltable{transition:none}}

/* frames */
/* position:relative is load-bearing: the phone .notch is absolute and must anchor to ITS frame.
   Transformed frames (tilt) contain it implicitly; untransformed ones (mobile section) leaked the
   notch up to the section band — the mystery centered black pill. */
.frame{position:relative;border-radius:12px;background:#1b1d22;border:1px solid #2b2e35;box-shadow:0 30px 60px -20px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.2);overflow:hidden}
.frame.browser{border-radius:12px}
.frame .chrome{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;background:#202329;border-bottom:1px solid #2b2e35}
.frame .tl{display:flex;gap:6px}
.frame .tl i{width:9px;height:9px;border-radius:50%;background:#3a3e46;display:block}
.frame .url{flex:1;height:20px;border-radius:5px;background:#191b20;border:1px solid #2b2e35;display:flex;align-items:center;padding:0 9px;font-family:var(--font-mono);font-size:10px;color:#7c7e86;gap:6px}
.frame .fit{position:relative;overflow:hidden;background:oklch(0.16 0.005 240)}
.frame.tablet{border-radius:18px;padding:9px;background:#1b1d22}
.frame.tablet .fit{border-radius:9px}
.frame.phone{border-radius:26px;padding:6px;background:#1b1d22;border-color:#33363d}
.frame.phone .fit{border-radius:21px}
.frame.phone .notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:34%;height:5.5%;max-height:22px;background:#0d0e11;border-radius:999px;z-index:4}
.fit-inner{transform-origin:top left;transform:scale(var(--s,1))}

/* preview switcher */
.pv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.seg{display:inline-flex;padding:3px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;gap:2px}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-3);font-family:var(--font-sans);font-size:13px;padding:7px 13px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.seg svg{width:14px;height:14px}
.band.dark .seg{background:#15171c;border-color:#282c34}
.band.dark .seg button[aria-pressed="true"]{background:#282c34;box-shadow:none}
.pv-body{display:grid;grid-template-columns:214px minmax(0,1fr);gap:28px;align-items:start}
/* sticky lives on the COLUMN (.pv-side) so the caption sticks with the nav — sticky on the nav
   alone slid it over the static caption mid-scroll */
.pv-side{position:sticky;top:86px}
.pv-nav{display:flex;flex-direction:column;gap:2px}
.pv-nav button{appearance:none;text-align:left;border:0;background:transparent;color:var(--ink-3);font-family:var(--font-sans);font-size:14px;padding:11px 12px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:10px;border-left:2px solid transparent}
.pv-nav button:hover{color:var(--ink);background:var(--paper-2)}
.pv-nav button[aria-pressed="true"]{color:var(--ink);background:var(--paper-2);border-left-color:var(--brand)}
.pv-nav svg{width:15px;height:15px;opacity:.85}
.pv-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:18px;padding-left:12px;line-height:1.7}
/* keyframes must carry scale(var(--s)) — an animation transform OVERRIDES the inline one,
   so a plain `to{transform:none}` renders the mock at full 1320px for the whole swap */
@keyframes fadeSwap{from{opacity:0;transform:translateY(8px) scale(var(--s,1))}to{opacity:1;transform:scale(var(--s,1))}}
.fit-inner{animation:fadeSwap .45s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.fit-inner{animation:none}}
.pv-frame{display:flex;justify-content:center;align-items:flex-start;min-height:560px}
.pv-frame .frame{width:100%}
.pv-frame[data-device="tablet"] .frame{width:min(840px,100%)}
.pv-frame[data-device="phone"] .frame{width:300px}
/* minmax(0,*) is load-bearing: the unscaled 1320px app mock inside .fit-inner sets the track's min-content otherwise */
@media(max-width:900px){.pv-body{grid-template-columns:minmax(0,1fr)}.pv-body>div{min-width:0}.pv-side{position:static}.pv-nav{flex-direction:row;overflow-x:auto}}

/* feature rows */
.feat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px;align-items:center;padding:64px 0}
.feat+.feat{border-top:1px solid var(--line)}
.feat.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.feat.flip .f-copy{order:2}
.f-copy{display:flex;flex-direction:column;gap:16px}
.f-list{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.f-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.f-list{list-style:none;padding:0}
.f-list .tick{width:17px;height:17px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none;margin-top:2px}
.f-list .tick svg{width:10px;height:10px}
.f-art{border-radius:12px;overflow:hidden;background:oklch(0.16 0.005 240);border:1px solid oklch(0.3 0.008 240);box-shadow:0 22px 48px -22px rgba(0,0,0,.5)}
@media(max-width:900px){.feat,.feat.flip{grid-template-columns:1fr;gap:28px;padding:44px 0}.feat.flip .f-copy{order:0}}

/* grids */
.cards{display:grid;gap:16px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h4{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px}
.card p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.card .ico{width:32px;height:32px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);margin-bottom:14px}
.card .ico svg{width:16px;height:16px}
@media(max-width:900px){.cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}}

/* two paths */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.path{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px;display:flex;flex-direction:column;gap:16px}
.path .tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.path ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.path li{font-size:14px;color:var(--ink-2);line-height:1.45}
.path li b{color:var(--ink);font-weight:500}
@media(max-width:800px){.paths{grid-template-columns:1fr}}

/* pricing */
.price-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
.price-main{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.price-hero{padding:30px 30px 26px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;background:var(--brand-soft)}
html[data-theme="dark"] .price-hero{background:#1c1b2b}
.price-hero .big{font-family:var(--font-mono);font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1}
.price-rows{padding:8px 30px 26px}
.price-row{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
.price-row .n{font-size:14.5px;flex:1}
.price-row .n small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.price-row .v{font-family:var(--font-mono);font-size:15px;font-weight:500}
.calc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:18px;position:sticky;top:86px}
.calc .ttl{font-size:13px;font-weight:600;letter-spacing:-.01em}
.calc .f{display:flex;flex-direction:column;gap:9px}
.calc .f .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2)}
.calc .f .lab b{font-family:var(--font-mono);font-size:13px;color:var(--ink);font-weight:500}
input[type=range]{appearance:none;width:100%;height:3px;border-radius:3px;background:var(--line-2);outline:0}
input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brand);border:2px solid var(--card);box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer}
.calc .total{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:baseline;justify-content:space-between}
.calc .total .amt{font-family:var(--font-mono);font-size:30px;font-weight:600;letter-spacing:-.02em}
.calc .total .amt span{font-size:14px;color:var(--ink-3);font-weight:400}
.calc .free{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pos)}
@media(max-width:940px){.price-wrap{grid-template-columns:1fr}.calc{position:static}}

/* mobile app */
.mob{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:center}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;border-radius:8px;border:1px solid var(--line-2);color:var(--ink);font-size:13.5px}
.badge:hover{border-color:var(--ink-3);color:var(--ink)}
.badge svg{flex-shrink:0}
.badge .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;line-height:1.2}
.badge b{font-weight:500;font-size:14px;display:block;line-height:1.2}
/* Unreleased store: same badge shape so the pair still reads as a set, but
   dimmed and inert — it is a <span>, so :hover must be neutralised too. */
.badge.soon{opacity:.5;cursor:default;border-style:dashed}
.badge.soon:hover{border-color:var(--line-2)}
.mob-moments{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:860px){.mob{grid-template-columns:1fr;gap:32px}.mob .frame.phone{max-width:280px;margin-inline:auto}}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:820px;margin-inline:auto}
details{border-bottom:1px solid var(--line)}
details summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:16.5px;font-weight:500;letter-spacing:-.01em;position:relative}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:6px;top:27px;width:9px;height:9px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s}
details[open] summary::after{transform:rotate(-135deg)}
details .a{padding:0 60px 22px 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}

/* final cta */
.final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.final .cta-row{justify-content:center}

/* footer */
.foot{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--paper)}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.foot h5{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:13.5px;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
@media(max-width:780px){.foot-in{grid-template-columns:1fr 1fr}}

[hidden]{display:none!important}

/* features rail — one screen, horizontal slider; the page still scrolls normally */
.rail{padding:0}
.rail-pin{position:relative;height:calc(100vh - 62px);min-height:600px;max-height:940px;overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}
.rail-view{position:relative;flex:1 1 auto;min-height:0;display:flex}
.rail-track{flex:1 1 auto;display:flex;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.rail-track::-webkit-scrollbar{display:none}
.rp{flex:0 0 100%;min-width:100%;display:grid;place-items:center;padding:24px 0;scroll-snap-align:start}
.rp-in{width:min(100% - 152px,var(--wrap));display:grid;grid-template-columns:minmax(300px,.74fr) minmax(0,1.26fr);gap:clamp(28px,3.6vw,56px);align-items:center}
.rp.flip .rp-in{grid-template-columns:minmax(0,1.26fr) minmax(300px,.74fr)}
.rp.flip .f-copy{order:2}
.rp .f-copy{gap:15px}
.rp h3{font-size:clamp(25px,2.5vw,35px);line-height:1.06;letter-spacing:-.026em}
.rp .f-copy .small{font-size:15px;max-width:44ch}
.rp .f-list{gap:12px;margin-top:10px}
.rp .f-list li{font-size:14.5px}
.rp .f-art{max-height:min(52vh,470px)}
.rb-a{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.3)}
.rb-a.prev{left:16px}
.rb-a.next{right:16px}
.rb-a:hover:not([disabled]){background:var(--brand);border-color:var(--brand);color:#fff}
.rb-a svg{width:19px;height:19px}
.rb-a.prev svg{transform:rotate(180deg)}
.rb-a[disabled]{opacity:.28;cursor:default;box-shadow:none}
.rail-bar{flex:none;position:relative;border-top:1px solid var(--line);background:var(--paper);height:56px;display:flex;align-items:center}
.rail-bar::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--line)}
.rb-prog{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--brand);z-index:1}
.rb-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.rb-side{display:flex;align-items:center;gap:14px;min-width:0}
.rb-side.end{justify-content:flex-end;padding-right:58px}
.rb-lab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.rb-count{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.rb-count b{color:var(--ink);font-weight:500}
.rb-hint{display:none;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-items:center;gap:8px;white-space:nowrap}
.rb-hint svg{width:13px;height:13px;transform:rotate(90deg)}
@media(min-width:1180px){.rb-hint{display:inline-flex}}
.rb-dots{display:flex;align-items:center;gap:8px}
.rd{width:9px;height:9px;flex:none;padding:0;border:0;border-radius:999px;background:var(--line-2);cursor:pointer}
.rd:hover{background:var(--ink-3)}
.rd[aria-current="true"]{width:26px;background:var(--brand)}
@media(max-height:800px){.rp .f-art{max-height:46vh}}
@media(max-height:740px){.rp h3{font-size:clamp(22px,2.2vw,27px)}.rp .f-copy .small{font-size:14px}.rp .f-list li{font-size:13.5px}}
@media(max-width:900px){.rail-pin{height:auto;min-height:0;max-height:none}.rp-in,.rp.flip .rp-in{width:min(100% - 48px,var(--wrap));grid-template-columns:1fr;gap:26px}.rp.flip .f-copy{order:0}.rp{padding:36px 0}.rp .f-art{max-height:none}.rb-a{width:38px;height:38px}.rb-a.prev{left:6px}.rb-a.next{right:6px}.rb-lab{display:none}.rb-in{grid-template-columns:auto minmax(0,1fr)}.rb-side.end{display:none}}