/* Scroll to Sale: shared styles. Look: Treasury (ink green, greenback, bill blue). Fonts are served from this site (see fonts.css), never from a third party. */
:root{
  --bg:#04130d;--bg2:#06190f;--card:#082219;--card2:#0a2a1f;
  --line:rgba(223,243,228,.10);--line2:rgba(223,243,228,.20);
  --fg:#e8f3ec;--mut:#9bbba6;--dim:#7da58b;
  --g:#5fd08a;--g2:#7fe0a3;--gl:#8fe3ae;--blue:#7cc4d8;--press:#0f4a2e;--onG:#04130d;--glow:rgba(95,208,138,.25);
  --ok:#7fe0a3;--bad:#ff8a80;
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:8px;--hh:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--g);color:var(--onG);padding:10px 14px;border-radius:6px;z-index:300;font-weight:800}
.skip:focus{left:8px}
.wrap{width:min(1120px,100% - 40px);margin:0 auto}
.narrow{width:min(760px,100% - 40px);margin:0 auto}

/* type */
.eyebrow{font:500 12.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gl);margin:0 0 18px}
h1,h2,h3{font-family:var(--sans);font-weight:800;font-stretch:118%;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,5.3vw,62px);line-height:1.06;text-transform:uppercase;font-stretch:125%}
h2{font-size:clamp(26px,3.9vw,44px);line-height:1.1}
h3{font-size:19px;line-height:1.25;letter-spacing:-.01em;font-stretch:108%}
em.s{font-style:normal;color:var(--g)}
.lede{font-size:clamp(18px,2.2vw,21px);color:var(--mut);max-width:34em;margin:20px auto 0}
p{margin:0 0 1em}

/* buttons: rectangles with a hard shadow that presses in */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:6px;border:2px solid transparent;font:800 14.5px/1 var(--sans);font-stretch:110%;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.btn.p{background:var(--g);color:var(--onG);box-shadow:inset 0 0 0 1px rgba(185,236,202,.4),4px 4px 0 var(--press)}
.btn.p:hover{transform:translate(-1px,-1px);box-shadow:inset 0 0 0 1px rgba(185,236,202,.4),5px 5px 0 var(--press)}
.btn.p:active{transform:translate(4px,4px);box-shadow:inset 0 0 0 1px rgba(185,236,202,.4),0 0 0 var(--press)}
.btn.g{background:transparent;border-color:var(--g);color:var(--g);box-shadow:4px 4px 0 var(--press)}
.btn.g:hover{background:rgba(95,208,138,.08);transform:translate(-1px,-1px)}
.btn.g:active{transform:translate(4px,4px);box-shadow:none}
.btn.sm{min-height:44px;padding:8px 18px;font-size:13px;box-shadow:inset 0 0 0 1px rgba(185,236,202,.4),3px 3px 0 var(--press)}
.btn[disabled]{opacity:.6;cursor:progress}

/* header: sticky glass, always reachable (his rule). Links hide on phones and a Menu button replaces them. */
header.top{position:sticky;top:0;z-index:100;height:var(--hh);background:rgba(4,19,13,.8);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:22px;height:100%}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-stretch:125%;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin-right:auto}
.brand svg{width:36px;height:36px;flex:none}.brand .brand-mark{width:54px;height:54px;flex:none}footer .brand .brand-mark{width:42px;height:42px}.brand .brand-logo{height:54px;width:auto;max-width:62vw;display:block;flex:none}footer .brand .brand-logo{height:44px}
nav.desk{display:flex;gap:6px}.deskbtn{white-space:nowrap}.btn.sm.deskbtn{min-height:34px;padding:6px 12px;font-size:11px;letter-spacing:.05em}
nav.desk a{white-space:nowrap;text-decoration:none;color:var(--mut);font-weight:600;font-size:15px;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:6px}
nav.desk a:hover{color:var(--fg);background:rgba(223,243,228,.06)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;min-height:44px;padding:10px 18px;border:2px solid var(--line2);border-radius:6px;font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu .drop{position:absolute;right:0;top:56px;width:250px;background:#07200f;background:#082219;border:1px solid var(--line2);border-radius:8px;padding:8px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.menu .drop a{text-decoration:none;padding:12px;border-radius:6px;font-weight:600;min-height:44px;display:flex;align-items:center}
.menu .drop a:hover{background:rgba(223,243,228,.07)}
.menu .drop a.btn{margin-top:6px;justify-content:center}
@media (max-width:1180px){nav.desk,.deskbtn{display:none}.menu{display:block}}

/* hero: rising dollar signs (canvas) behind a dark scrim so no text sits on bright glyphs */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:clamp(56px,10vw,120px) 0 clamp(64px,9vw,110px)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 58% 62% at 50% 46%,rgba(4,19,13,.82),transparent 78%),radial-gradient(60% 50% at 50% 112%,rgba(95,208,138,.16),transparent 70%),radial-gradient(40% 30% at 50% 0%,rgba(124,196,216,.07),transparent 70%),linear-gradient(180deg,transparent 62%,var(--bg))}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 0}
.chip{border:1px solid var(--line2);background:rgba(223,243,228,.04);border-radius:6px;padding:7px 14px;font:500 13px/1.2 var(--mono);color:var(--mut)}
.cue{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-top:44px;font:400 11.5px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dim);text-decoration:none}

/* opt-in form */
form.optin{max-width:580px;margin:30px auto 0;text-align:left}
form.optin .f{display:flex;gap:12px;flex-wrap:wrap}
form.optin label{display:block;width:100%;font-weight:700;font-size:15px;margin-bottom:2px}
form.optin input[type=email]{flex:1 1 260px;min-height:54px;padding:12px 16px;border-radius:6px;border:2px solid var(--line2);background:#0b1f17;color:var(--fg);font:inherit}
form.optin input[type=email]::placeholder{color:#6f9380}
form.optin input[type=email]:focus{border-color:var(--blue)}
form.optin input[aria-invalid=true]{border-color:var(--bad)}
form.optin .err{color:var(--bad);font-weight:700;margin:8px 4px 0}
form.optin .fine{font-size:14px;color:var(--dim);margin:14px 4px 0;text-align:center}
form.optin .done{border:1px solid rgba(95,208,138,.45);background:rgba(95,208,138,.08);border-radius:8px;padding:16px 18px;text-align:center}
.fine a{color:var(--gl)}

/* sections */
section.sec{padding:clamp(64px,9vw,120px) 0;position:relative}
section.alt{background:var(--bg2);border-block:1px solid var(--line)}
.head{text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.head .lede{margin-top:16px}

/* demo window */
.win{border:1px solid var(--line2);border-radius:10px;background:linear-gradient(180deg,#071a12,#050f0a);box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(223,243,228,.02) inset;overflow:hidden}
.win .bar2{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);font:400 12.5px/1 var(--mono);color:var(--dim)}
.win .dots{display:flex;gap:7px;margin-right:8px}.win .dots i{width:11px;height:11px;border-radius:50%;background:#1a3d2d;display:block}.win .dots i:nth-child(1){background:#FF5F57}.win .dots i:nth-child(2){background:#FEBC2E}.win .dots i:nth-child(3){background:#28C840}
.win .bar2 .sp{margin-left:auto;display:flex;align-items:center;gap:12px}
.pausebtn{min-height:44px;padding:6px 14px;border-radius:6px;border:1px solid var(--line2);background:transparent;color:var(--mut);font:600 13px var(--sans);cursor:pointer}
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:18px 18px 0}
.tabs button{min-height:44px;padding:8px 18px;border-radius:6px;border:1px solid var(--line2);background:rgba(223,243,228,.03);color:var(--mut);font:700 14px var(--sans);cursor:pointer}
.tabs button[aria-selected=true]{background:rgba(95,208,138,.14);border-color:var(--g);color:var(--fg)}
.tabs button{min-width:72px;display:inline-flex;align-items:center;justify-content:center}.tabs button img{display:block;width:26px;height:26px}
.stage{padding:28px clamp(14px,3vw,34px) 20px}
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px;position:relative}
.node{border:1px solid var(--line);border-radius:8px;padding:14px 12px;background:rgba(223,243,228,.03);transition:border-color .35s,background .35s,box-shadow .35s,transform .35s;min-height:112px;display:flex;flex-direction:column;gap:6px}
.node .k{font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.node b{font-size:15px;line-height:1.2}
.node .n{font:500 22px/1 var(--mono);color:var(--mut);margin-top:auto;font-variant-numeric:tabular-nums}
.node.on{border-color:var(--g);background:rgba(95,208,138,.12);box-shadow:4px 4px 0 var(--press);transform:translate(-2px,-3px)}
.node.on .n{color:var(--fg)}
.node.done{border-color:rgba(95,208,138,.4)}
.node.done .n{color:var(--blue)}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding:6px clamp(14px,3vw,34px) 22px;color:var(--dim);font-size:13.5px}
.demo-note{font-weight:700;color:var(--gl)}

/* steps */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative}
.card .ic{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;background:rgba(95,208,138,.12);color:var(--g2);margin-bottom:16px}
.card .ic svg{width:24px;height:24px}
.card .no{font:500 11.5px/1 var(--mono);letter-spacing:.2em;color:var(--gl);margin-bottom:10px}
.card p{color:var(--mut);margin:8px 0 0}

/* 12 ways */
.ways{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.way{padding:18px 20px;border-radius:8px;border:1px solid var(--line);background:rgba(223,243,228,.025)}
.way b{display:block;font-size:16px;margin:6px 0 4px}
.way span.t{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.way p{margin:0;color:var(--mut);font-size:15px}
.t1{color:var(--g2)}.t2{color:var(--blue)}.t3{color:#c5cfc9}
.key{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin:0 0 26px;font-size:14px;color:var(--mut)}
.key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:8px}

/* built in public */
.pub{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.photo{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line2);box-shadow:8px 8px 0 var(--press),0 30px 80px rgba(0,0,0,.55);max-width:420px;margin:0 auto}
.photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,19,13,.55))}
.score{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.score div{border:1px solid var(--line);border-radius:8px;padding:14px;background:rgba(223,243,228,.03)}
.score small{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.score b{font-size:15px;color:var(--mut)}
@media (max-width:820px){.pub{grid-template-columns:1fr}.score{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:8px;background:rgba(223,243,228,.025)}
.faq summary{list-style:none;cursor:pointer;min-height:56px;padding:16px 56px 16px 20px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:400 26px/1 var(--mono);color:var(--gl)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 20px 18px;color:var(--mut)}

/* closing band + footer */
.band{text-align:center;border-radius:12px;border:1px solid var(--line2);padding:clamp(44px,7vw,84px) clamp(20px,4vw,56px);background:radial-gradient(70% 90% at 50% 120%,rgba(95,208,138,.2),transparent 70%),linear-gradient(180deg,#0a2a1f,#050f0a)}
footer.foot{border-top:1px solid var(--line);padding:44px 0 36px;color:var(--mut);font-size:15px}
.fgrid{display:grid;gap:28px;grid-template-columns:1.4fr 1fr 1fr}
.fgrid h4{font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.fgrid a{display:block;text-decoration:none;padding:6px 0;min-height:36px}
.fgrid a:hover{color:var(--fg)}
.legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--dim)}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}}

/* reveal */
@media (scripting:enabled){.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.rv.in{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}

/* text pages (privacy, terms) */
.doc{padding:56px 0 90px}
.doc h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:10px;text-transform:none;font-stretch:118%}
.doc h2{font-size:24px;margin:36px 0 10px}
.doc p,.doc li{color:var(--mut)}
.doc ul{padding-left:1.2rem}
.doc .meta{font:400 12.5px/1.4 var(--mono);color:var(--dim);margin-bottom:28px}

/* multi page: current page marker, inner page heads, link cards, previous/next */
nav.desk a[aria-current=page]{color:var(--fg);box-shadow:inset 0 -3px 0 var(--g);border-radius:0}
.btn[aria-current=page]{box-shadow:inset 0 0 0 2px var(--fg),3px 3px 0 var(--press)}
.menu .drop a[aria-current=page]{background:rgba(95,208,138,.12)}
.pagehead{text-align:center;padding:clamp(48px,7vw,92px) 0 clamp(8px,2vw,20px)}
.pagehead h1{font-size:clamp(30px,4.8vw,56px);line-height:1.08;text-transform:none;font-stretch:118%}
.pagehead .lede{margin-top:18px}
a.card.lk{display:block;text-decoration:none;transition:transform .12s,box-shadow .12s,border-color .12s}
a.card.lk:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--press);border-color:var(--g)}
a.card.lk:active{transform:translate(3px,3px);box-shadow:none}
.card .go{display:inline-block;margin-top:16px;font:800 13px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--g)}
.next{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(36px,5vw,64px);padding-top:26px;border-top:1px solid var(--line)}
.doc h1{margin-top:0}
.doc a{color:var(--gl)}
.g3w{grid-template-columns:repeat(3,1fr)}@media (max-width:900px){.g3w{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.g3w{grid-template-columns:1fr}}
.fgrid a.brand{display:flex;padding:0;min-height:0}
.more{display:flex;justify-content:center;margin-top:clamp(24px,4vw,40px)}
.pub{margin-top:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
