/* SuuL Wealth — page styles. Loads AFTER ./suul.css (shared tokens+components).
   FIRE funnel: hero → calculators → financial twin → why → doors → access. */

/* ── hero ── */
.heroW{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.heroW .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:84px 0 50px}
@media(max-width:920px){.heroW .hero{grid-template-columns:1fr;padding:54px 0 36px}}
h1 .w{display:inline-block;opacity:0;transform:translateY(24px);animation:wup .7s cubic-bezier(.2,.8,.3,1) forwards}
h1 .w:nth-child(2){animation-delay:.09s}h1 .w:nth-child(3){animation-delay:.18s}
h1 .w:nth-child(4){animation-delay:.27s}h1 .w:nth-child(5){animation-delay:.36s}
h1 .w:nth-child(6){animation-delay:.45s}h1 .w:nth-child(7){animation-delay:.54s}
@keyframes wup{to{opacity:1;transform:none}}
.heroCtas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* hero glidepath panel */
.glide{position:relative;max-width:470px;width:100%;margin-left:auto;padding:22px 22px 16px}
@media(max-width:920px){.glide{margin:8px auto 0}}
.glide .gt{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--faint);display:flex;justify-content:space-between;margin-bottom:12px}
.glide .gt i{font-style:normal;color:var(--em)}
.glide svg{display:block;width:100%;height:auto}
.glide .cap{margin-top:10px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--faint);text-align:center}
.glide .pulse{animation:gpulse 2.2s ease-in-out infinite}
@keyframes gpulse{50%{opacity:.35}}

/* hero fact strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel);margin:10px 0 64px}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{padding:20px 18px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
@media(max-width:820px){.fact{border-bottom:1px solid var(--line)}.fact:nth-child(2){border-right:0}}
.fact b{display:block;font-family:var(--mono);font-weight:800;font-size:25px;color:var(--sky);font-variant-numeric:tabular-nums}
.fact:nth-child(even) b{color:var(--em)}
.fact span{font-size:12px;color:var(--faint);line-height:1.5;display:block;margin-top:3px}

/* ── calculator ── */
.calc{display:grid;grid-template-columns:.92fr 1.08fr;gap:18px;margin-top:38px;align-items:stretch}
@media(max-width:940px){.calc{grid-template-columns:1fr}}
.cpanel{padding:26px 24px}
.cpanel .ph{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px;margin-bottom:20px}
.cpanel .ph::after{content:'';flex:1;height:1px;background:var(--line)}
.cpanel .ph i{font-style:normal;width:6px;height:6px;border-radius:50%;background:var(--em);box-shadow:0 0 8px var(--em)}

.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.field label output{color:var(--sky);font-size:12px;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.field input[type=number]{width:100%;background:#0a0d18;border:1px solid var(--line);color:var(--paper);font-family:var(--mono);font-weight:700;font-size:15px;padding:11px 13px;border-radius:4px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;transition:border-color .25s}
.field input[type=number]::-webkit-outer-spin-button,.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number]:focus{border-color:rgba(56,189,248,.5);outline:none;box-shadow:0 0 0 3px rgba(56,189,248,.12)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:420px){.frow{grid-template-columns:1fr}}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--sky) var(--fill,50%),#1a1f33 var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--sky);border:2px solid #06131d;margin-top:-6px;box-shadow:0 0 10px rgba(56,189,248,.6)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#1a1f33}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--sky)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--sky);border:2px solid #06131d;box-shadow:0 0 10px rgba(56,189,248,.6)}
.assume{margin-top:18px;padding:13px 14px;border:1px dashed var(--line);border-radius:6px;font-size:12px;color:var(--faint);line-height:1.6}
.assume b{color:var(--mut)}

/* results */
.results{padding:26px 24px;display:flex;flex-direction:column;border-color:rgba(52,227,162,.28)}
.results::before{border-color:var(--em)}
.results::after{border-color:var(--em)}
.bignum{font-family:var(--mono);font-weight:800;font-size:clamp(34px,4.6vw,46px);letter-spacing:-.02em;color:var(--em);font-variant-numeric:tabular-nums;line-height:1.05;text-shadow:0 0 34px rgba(52,227,162,.35)}
.bigcap{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 6px}
@media(max-width:520px){.rgrid{grid-template-columns:1fr 1fr}.rgrid .r:last-child{grid-column:span 2}}
.rgrid .r{border:1px solid var(--line);background:rgba(10,13,24,.7);padding:12px 13px;border-radius:6px}
.rgrid .r b{display:block;font-family:var(--mono);font-weight:800;font-size:19px;color:var(--sky);font-variant-numeric:tabular-nums;white-space:nowrap}
.rgrid .r span{font-size:10.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);font-weight:700}
.rnote{font-size:13px;color:var(--mut);margin-top:12px;min-height:20px}
.rnote b{color:var(--em)}
.rnote .warn{color:var(--amber)}
#fchart{margin-top:16px}
#fchart svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--faint)}
.legend i{font-style:normal;display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.legend .l1 i{background:var(--sky)}.legend .l2 i{background:var(--amber)}
.notpromise{margin-top:auto;padding-top:18px}
.notpromise span{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.2em;color:var(--amber);border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);padding:6px 12px;border-radius:3px}

/* ── mini calculators ── */
.minis{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media(max-width:880px){.minis{grid-template-columns:1fr}}
.mini{padding:24px}
.mini h3{font-family:var(--disp);font-weight:600;font-size:20px;margin-bottom:4px}
.mini .sub3{font-size:13px;color:var(--mut);margin-bottom:18px}
.mout{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.mout{grid-template-columns:1fr}}
.mout .r b{display:block;font-family:var(--mono);font-weight:800;font-size:21px;color:var(--em);font-variant-numeric:tabular-nums;white-space:nowrap}
.mout .r span{font-size:10.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);font-weight:700}
.verdict{margin-top:14px;padding:13px 15px;border-radius:6px;border:1px solid rgba(52,227,162,.3);background:rgba(52,227,162,.06);font-size:13.5px;color:var(--paper)}
.verdict b{color:var(--em)}
.verdict.tight{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.06)}
.verdict.tight b{color:var(--amber)}
.verdict .nuance{display:block;margin-top:6px;font-size:12px;color:var(--mut)}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media(max-width:420px){.duel{grid-template-columns:1fr}}
.duel .d{border:1px solid var(--line);background:rgba(10,13,24,.7);border-radius:6px;padding:12px 13px}
.duel .d b{display:block;font-family:var(--mono);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.duel .d.sure b{color:var(--em)}.duel .d.maybe b{color:var(--sky)}
.duel .d span{font-size:10px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);font-weight:700}
.duel .d .t{display:inline-block;margin-top:6px;font-family:var(--mono);font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.14em;padding:3px 8px;border-radius:3px}
.duel .d.sure .t{background:rgba(52,227,162,.12);color:var(--em);border:1px solid rgba(52,227,162,.3)}
.duel .d.maybe .t{background:rgba(56,189,248,.1);color:var(--sky);border:1px solid rgba(56,189,248,.3)}

/* ── financial twin ── */
.twin{display:grid;grid-template-columns:.95fr 1.05fr;gap:38px;align-items:center;margin-top:38px}
@media(max-width:940px){.twin{grid-template-columns:1fr}}
.qs{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.q{align-self:flex-start;border:1px solid var(--line);background:var(--panel);border-radius:14px 14px 14px 3px;padding:11px 17px;font-size:14.5px;color:var(--paper)}
.q.a{align-self:flex-end;border-radius:14px 14px 3px 14px;border-color:rgba(52,227,162,.3);background:rgba(52,227,162,.07);color:var(--mut);font-size:13px}
.q.a b{color:var(--em);font-family:var(--mono);font-weight:700;font-size:12.5px}
.twin .fine2{margin-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}

/* twin console mock (illustration, like the umbrella page's shot) */
.win{border:1px solid var(--line);border-radius:14px;background:#0a0c16;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px -20px rgba(52,227,162,.18);overflow:hidden}
.win .bar{display:flex;gap:6px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);background:#0d1020}
.win .bar i{width:10px;height:10px;border-radius:50%;background:#2a2f45}
.win .bar i:first-child{background:var(--crim)}.win .bar i:nth-child(2){background:#e8b64c}.win .bar i:nth-child(3){background:var(--em)}
.win .bar span{font-family:var(--mono);font-size:10px;color:var(--faint);margin-left:10px;letter-spacing:.12em}
.win .body{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;padding:16px}
@media(max-width:520px){.win .body{grid-template-columns:1fr}}
.win .cell{border:1px solid var(--line);border-radius:9px;background:#0d1020;padding:12px;min-height:104px;position:relative;overflow:hidden}
.win .cell b{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.2em;color:var(--faint)}
.win .cell svg{position:absolute;inset:26px 10px 8px;width:calc(100% - 20px);height:calc(100% - 34px)}
.win .rows i{display:block;height:7px;border-radius:3px;background:#1a1f33;margin-top:9px}
.win .rows i.g{background:rgba(52,227,162,.35)}.win .rows i.b{background:rgba(56,189,248,.3)}.win .rows i.v{background:rgba(139,124,246,.35)}
.win .cap2{text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--faint);padding:10px 12px;border-top:1px solid var(--line)}

/* ── why / creed ── */
.creed{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media(max-width:860px){.creed{grid-template-columns:1fr}}
.creed .hud{padding:24px}
.creed h3{font-family:var(--disp);font-weight:600;font-size:19px;margin-bottom:8px}
.creed p{font-size:14.5px;color:var(--mut)}
.creed .n{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.18em;display:block;margin-bottom:10px;background:var(--fireg);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── doors ── */
.prods{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:38px}
@media(max-width:880px){.prods{grid-template-columns:1fr}}
.prod{padding:27px 24px;display:flex;flex-direction:column;gap:11px;height:100%}
.prod .dom{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--sky)}
.prod h3{font-family:var(--disp);font-weight:600;font-size:24px}
.prod p{font-size:14.5px;color:var(--mut);flex:1}
.tag{align-self:flex-start;font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.18em;padding:5px 11px;border-radius:3px}
.tag.here{background:rgba(52,227,162,.12);color:var(--em);border:1px solid rgba(52,227,162,.3)}
.tag.soon{background:rgba(139,124,246,.12);color:var(--violet);border:1px solid rgba(139,124,246,.3)}
.prod .go{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--sky)}

/* ── access ── */
.duo{display:grid;gap:18px;grid-template-columns:1.15fr .85fr}
@media(max-width:880px){.duo{grid-template-columns:1fr}}
.panel{padding:30px}
.panel h2{font-size:clamp(23px,2.6vw,28px)}
.panel p{color:var(--mut);font-size:15px;margin-top:12px}
.access .btn{margin-top:20px;width:100%;justify-content:center}
.access .fine{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-align:center;margin-top:12px;color:var(--faint)}

footer .flinks{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
footer .flinks a{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--faint);border:1px dashed var(--line);padding:5px 11px;border-radius:3px}
footer .flinks a:hover{color:var(--paper);border-color:var(--sky)}

@media (prefers-reduced-motion: reduce){
  h1 .w{opacity:1;transform:none;animation:none}
  .glide .pulse{animation:none}
}