/* WEALTHCODERS — site styles. Tokens first, then layout, then components. */
:root{
  --ink:#050505; --paper:#F5F5F3;
  --white:#fff; --grey-1:#C7C7C7; --grey-2:#AAAAA9; --grey-3:#6E6E6E; --line-dark:#2A2A2A; --line-light:#DDDDDC;
  --gold:#D5993F; --gold-hi:#E8B86A;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  --max:1320px; --gutter:clamp(20px,4vw,40px); --gap:24px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%;background:var(--ink);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
input,select,textarea,button{font-family:var(--sans)}
::placeholder{color:var(--grey-3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--gold);color:var(--ink);padding:8px 12px;z-index:100}
.skip:focus{inset-inline-start:8px}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--gap)}
.c-label{grid-column:1/4}.c-body{grid-column:4/13}.c-wide{grid-column:1/11}
.c-h1{grid-column:1/7}.c-h2{grid-column:7/13}
.c-heroL{grid-column:1/8}.c-heroR{grid-column:8/13}
.c-form{grid-column:1/9}.c-aside{grid-column:10/13}
.c-third1{grid-column:4/7}.c-third2{grid-column:7/10}
.c-full{grid-column:1/-1}
.sub{display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--gap);row-gap:6px}
.sub .c-label{grid-column:1/3}.sub .c-body{grid-column:3/7}
@media (max-width:759px){
  .grid>*,.sub>*,.row>*,.eyebrow>*,.feature>*{grid-column:1/-1 !important}
  .eyebrow{row-gap:8px}.eyebrow .v{text-align:start}
  .row{row-gap:6px}.row .c-label{flex-wrap:wrap}
  .feature{padding:40px 0;row-gap:20px}
  .hero .c-heroR{align-self:start}
  footer .top>*{grid-column:1/-1 !important}
  .strip{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;font-size:10px;line-height:1.4}
  .h-display{font-size:clamp(32px,9.5vw,40px)}.h-large,.h-mid{font-size:clamp(26px,7.5vw,34px)}
  .bp-wrap svg{display:none}.bp-wrap .fig-m{display:block}
  .meta-r{text-align:start !important}
  .end{justify-content:flex-start !important}
}

section{border-bottom:1px solid var(--line-dark)}
.dark{background:var(--ink);color:var(--white)}
.light{background:var(--paper);color:var(--ink);border-bottom-color:var(--line-light)}
.pad{padding-block:96px}.pad-m{padding-block:80px}.pad-s{padding-block:72px}
.hero{padding-block:140px 72px}
.hero.tight{padding-bottom:80px}
@media (max-width:759px){.pad{padding-block:64px}.pad-m{padding-block:56px}.hero{padding-block:112px 48px}}

/* ---------- type ---------- */
.eyebrow{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-bottom:56px}
.eyebrow .k{grid-column:1/4;color:var(--gold)}
.eyebrow .v{grid-column:4/13;color:var(--grey-2);text-align:end}
.light .eyebrow .v{color:var(--grey-3)}
.hero .eyebrow{margin-bottom:16px}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.h-display{font-size:clamp(34px,4.8vw,64px);line-height:1}
.h-large{font-size:clamp(30px,4vw,52px);line-height:1.05}
.h-mid{font-size:clamp(28px,3.4vw,46px);line-height:1.1}
.h-sec{font-size:clamp(28px,3.2vw,40px);line-height:1.1}
.h-row{font-size:22px;line-height:1.2}
.h-card{font-size:28px;line-height:1.1}
.lede{font:400 17px/1.5 var(--sans);color:var(--grey-1);margin:0;text-wrap:pretty}
.light .lede{color:var(--grey-3)}
.p{font:400 15px/1.5 var(--sans);color:var(--grey-1);margin:0;text-wrap:pretty}
.light .p{color:var(--grey-3)}
.p-lg{font:400 16px/1.6 var(--sans);color:var(--grey-1);margin:0;text-wrap:pretty}
.strong{font-weight:500;color:var(--white)}.light .strong{color:var(--ink)}
.mono{font:400 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2)}
.mono.gold{color:var(--gold)}
.gold{color:var(--gold)}
.line-anim{display:block}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(5,5,5,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled,.menu-open .site-header{border-bottom-color:var(--line-dark)}
.site-header .bar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font:500 17px/1 var(--sans);letter-spacing:-.01em;flex-shrink:0}
.wordmark b{color:var(--gold);font-weight:400}
.nav{display:flex;gap:26px;font:400 12px/1 var(--sans);letter-spacing:.02em;white-space:nowrap}
.nav a{color:var(--grey-2);transition:color .2s;position:relative}
.nav a:hover{color:var(--white)}
.nav a[aria-current]{color:var(--gold)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--gold);transition:right .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.menu-btn{display:none;background:transparent;border:1px solid var(--white);color:var(--white);padding:10px 14px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:44px}
.mobile-menu{display:none;position:fixed;inset:0;z-index:49;background:var(--ink);padding:96px var(--gutter) 40px;flex-direction:column;justify-content:space-between}
.mobile-menu nav{display:flex;flex-direction:column;border-top:1px solid var(--line-dark)}
.mobile-menu nav a{padding:20px 0;border-bottom:1px solid var(--line-dark);font:700 28px/1 var(--sans);letter-spacing:-.02em;color:var(--grey-2)}
.mobile-menu nav a[aria-current]{color:var(--gold)}
.menu-open .mobile-menu{display:flex}
@media (max-width:1059px){.nav,.site-header .btn{display:none}.menu-btn{display:block}}

/* ---------- buttons ---------- */
.btn{display:inline-block;position:relative;isolation:isolate;overflow:hidden;padding:14px 24px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;border:1px solid currentColor;cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease);min-height:44px;background:transparent}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold::before{background:var(--gold-hi)}
.btn-line{color:var(--white)}.btn-line::before{background:var(--white)}.btn-line:hover{color:var(--ink)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--white)}.btn-ink::before{background:var(--paper)}.btn-ink:hover{color:var(--ink)}
.light .btn-line{color:var(--ink)}.light .btn-line::before{background:var(--ink)}.light .btn-line:hover{color:var(--white)}
.btn-sm{padding:10px 14px;letter-spacing:.12em;min-height:0}
.btn-lg{padding:16px 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.end{justify-content:flex-end}

/* ---------- rows / lists ---------- */
.rows{border-top:1px solid var(--line-dark)}
.light .rows{border-top-color:var(--line-light)}
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:8px;padding:24px 0;border-bottom:1px solid var(--line-dark)}
.light .row{border-bottom-color:var(--line-light)}
.row .c-label{display:flex;gap:16px;align-items:baseline}
.row .n{font:400 10px/1 var(--mono);letter-spacing:.12em;color:var(--gold);flex-shrink:0}
.row .t{font:500 15px/1.5 var(--sans)}
.row .t-lg{font:700 20px/1.3 var(--sans);letter-spacing:-.02em}
.row .t-xl{font:700 22px/1.2 var(--sans);letter-spacing:-.02em}
.row .d{font:400 15px/1.5 var(--sans);color:var(--grey-1);padding-top:3px;text-wrap:pretty}
.light .row .d{color:var(--grey-3)}
.row .who{font:500 18px/1.5 var(--sans);letter-spacing:-.01em}
.row .who span{color:var(--grey-2);font-weight:400}
.row .q{font:400 11px/1.5 var(--mono);letter-spacing:.14em;padding-top:5px;color:var(--grey-2)}
.row .q.gold{color:var(--gold)}
.badge{display:inline-block;font:400 9px/1 var(--mono);letter-spacing:.12em;padding:5px 8px;border:1px solid var(--gold);color:var(--gold);vertical-align:middle;margin-inline-start:12px;white-space:nowrap}
.badge.muted{border-color:var(--grey-3);color:var(--grey-2)}

/* ---------- misc blocks ---------- */
.strip{padding:22px 0;display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.band{height:56px;position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.band::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(90deg,transparent 0 46px,var(--line-dark) 46px 47px),repeating-linear-gradient(0deg,transparent 0 46px,var(--line-dark) 46px 47px)}
.band.gold::after{content:"";position:absolute;top:0;bottom:0;width:120px;background:linear-gradient(90deg,transparent,rgba(213,153,63,.35),transparent);animation:bandSweep 6s linear infinite}
.pattern-slot{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.045) 22px 23px)}
.light .pattern-slot{background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(5,5,5,.06) 22px 23px);right:0;left:45%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(5,5,5,0) 0%,rgba(5,5,5,.55) 55%,var(--ink) 100%)}
.trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.stack div{border:1px dashed var(--grey-3);padding:22px 8px;text-align:center;font:400 12px/1.2 var(--sans);color:var(--grey-1)}
.after{border:1px solid var(--gold);padding:22px 24px;text-align:center;font:700 18px/1.2 var(--sans);letter-spacing:-.02em;background:rgba(213,153,63,.15)}
.stores{display:flex;gap:8px;flex-wrap:wrap}
.feature{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:32px;align-items:start;padding:56px 0;border-bottom:1px solid var(--line-dark)}
.feature:last-child{border-bottom:0}
.feature .head{display:flex;gap:16px;align-items:baseline;margin-bottom:14px;flex-wrap:wrap}
.feature .p{max-width:480px}
.feature svg{width:100%;height:auto;margin-top:4px}
.bp{width:100%;height:auto}
.rows.compact .row{padding:18px 0}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px 24px}
.field{display:flex;flex-direction:column;gap:10px}
.field span{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line-dark);color:var(--white);padding:10px 0;font:400 16px/1.3 var(--sans);outline:none;border-radius:0;min-height:44px;transition:border-color .25s}
.field select{appearance:none;-webkit-appearance:none}
.field option{background:#111}
.field textarea{resize:vertical;line-height:1.5}
.field :is(input,select,textarea):focus{border-bottom-color:var(--gold)}
.field.full{grid-column:1/-1}
.form .actions{grid-column:1/-1;align-items:center;margin-top:8px}
.form-note{grid-column:1/-1;font:400 10px/1.5 var(--mono);letter-spacing:.12em;color:var(--gold)}
.hp{position:absolute;left:-9999px}
.aside{display:flex;flex-direction:column;gap:28px}
.aside .p{color:var(--grey-1)}
.aside .note{border-top:1px solid var(--line-dark);padding-top:24px;font:500 15px/1.5 var(--sans)}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line-dark)}
footer .top{padding-block:56px 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px 24px;align-items:start}
footer .brand{display:flex;flex-direction:column;gap:14px}
footer .brand .mono{text-transform:none;font-size:11px;line-height:1.7;letter-spacing:.08em}
footer nav{display:flex;flex-direction:column;gap:12px;font:400 13px/1.4 var(--sans)}
footer nav .mono{margin-bottom:6px}
footer nav a{color:var(--grey-2);transition:color .2s}footer nav a:hover{color:var(--white)}
footer .bottom{padding-block:20px 40px;border-top:1px solid var(--line-dark);font:400 10px/1.6 var(--mono);letter-spacing:.12em;color:var(--grey-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:759px){footer .top{grid-template-columns:1fr 1fr;gap:36px 16px}footer .brand{grid-column:1/-1}}
/* mobile figure cards */
.fig-m{display:none;border:1px solid var(--line-dark);background:rgba(255,255,255,.03);padding:16px;font-family:var(--mono);letter-spacing:.08em}
.fm-title{font-size:9px;color:var(--grey-2);margin-bottom:12px;text-transform:uppercase}
.fm-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-dark);font-size:10px;color:var(--white)}
.fm-row span:last-child{color:var(--grey-2);text-align:end;min-width:0;overflow-wrap:anywhere}
.fm-core{margin-top:12px;border:1px solid var(--gold);color:var(--gold);padding:12px;text-align:center;font-size:10px;text-transform:uppercase}
.fm-cap{margin-top:14px;font-size:8px;color:var(--grey-3);line-height:1.6;text-transform:uppercase}
.bp text{paint-order:stroke;stroke:#050505;stroke-width:3px;stroke-linejoin:round}
/* ---------- motion ---------- */
@keyframes wcTrace{0%{stroke-dashoffset:1400;opacity:0}6%{opacity:1}94%{opacity:1}100%{stroke-dashoffset:-200;opacity:0}}
@keyframes bandSweep{from{left:-120px}to{left:100%}}
.trace path{animation:wcTrace 8s linear infinite}
.trace path:nth-child(2){animation-delay:4.2s}
[data-reveal]{opacity:0;transform:translateY(14px)}
.no-motion [data-reveal]{opacity:1;transform:none}
.bp text,.bp [data-live]>*,.bp [data-packet],.bp [data-ring],.bp [data-code],.bp [data-countdown]{opacity:0}
.no-motion .bp text{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .trace path,.band.gold::after{animation:none}
  .btn::before{transition:none}
}
/* hero line masks */
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .line-anim{display:block;will-change:transform}