@import url("_ds/stillsoshort-design-system-bc6d7467-9b2f-48df-ba6a-3118323a9a63/tokens/fonts.css");
@import url("_ds/stillsoshort-design-system-bc6d7467-9b2f-48df-ba6a-3118323a9a63/tokens/colors.css");

:root{
--bg:#0c0b0b;--bg-2:#141212;--bg-3:#1b1919;
--fg:#fdfcfc;--fg-2:#c9c6c6;--fg-mute:#8f8c8c;--fg-dim:#6a6767;
--line:rgba(253,252,252,.13);--line-2:rgba(253,252,252,.28);--line-strong:#3a3737;
--amber:#ff9f0a;--up:#30d158;--down:#ff3b30;
--frame:1160px;--pad:32px;--section:96px;--r:4px;
--mono:var(--font-mono);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:16px;line-height:1.5;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
em,i{font-style:normal}
img,svg{display:block;max-width:100%}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--amber)}
::selection{background:var(--amber);color:#0c0b0b}
:focus-visible{outline:1px solid var(--amber);outline-offset:3px}

.wrap{width:100%;max-width:var(--frame);margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--section) 0;border-top:1px solid var(--line)}
.sec.flush{border-top:0}
.hr{height:1px;background:var(--line);border:0}

/* type */
.d1{font-size:clamp(38px,7.6vw,86px);line-height:1.02;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.d2{font-size:clamp(30px,4.6vw,54px);line-height:1.06;font-weight:700;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.d3{font-size:clamp(22px,2.6vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.h4{font-size:16px;font-weight:700;line-height:1.5}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--fg-2);max-width:62ch;text-wrap:pretty}
.body{color:var(--fg-2);max-width:66ch;text-wrap:pretty}
.mute{color:var(--fg-mute)}
.dim{color:var(--fg-dim)}
.cap{font-size:14px;line-height:2;color:var(--fg-mute)}
.lbl{font-size:14px;line-height:2;color:var(--fg-mute);display:flex;gap:10px;align-items:baseline}
.lbl b{color:var(--fg);font-weight:500}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.amber{color:var(--amber)}
.marker{color:var(--fg-dim)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r);background:var(--fg);color:#0c0b0b;font-size:16px;font-weight:500;border:1px solid var(--fg);transition:background .12s,color .12s}
.btn:hover{background:var(--amber);border-color:var(--amber);color:#0c0b0b}
.btn2{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r);border:1px solid var(--line-strong);color:var(--fg);font-size:16px;font-weight:500;transition:border-color .12s,color .12s}
.btn2:hover{border-color:var(--amber);color:var(--amber)}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(12,11,11,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.nav-in{display:flex;align-items:center;gap:28px;height:64px}
.mark{font-weight:700;letter-spacing:.04em;white-space:nowrap}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:14px}
.nav-links a{color:var(--fg-mute)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.tick{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--fg-mute);border-left:1px solid var(--line);padding-left:22px;white-space:nowrap}
.tick b{color:var(--fg);font-weight:500}
.nav-cta{font-size:14px;border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 14px;color:var(--fg)}
.nav-cta:hover{border-color:var(--amber);color:var(--amber)}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--fg);font-family:var(--mono);font-size:16px;cursor:pointer;padding:8px}
.menu{position:fixed;inset:0;z-index:80;background:var(--bg);display:none;flex-direction:column;padding:24px var(--pad) 40px}
.menu[data-open]{display:flex}
.menu-top{display:flex;align-items:center;height:40px}
.menu-top button{margin-left:auto;background:none;border:0;color:var(--fg);font-family:var(--mono);font-size:16px;cursor:pointer}
.menu nav{margin-top:48px;display:flex;flex-direction:column}
.menu nav a{font-size:clamp(26px,8vw,40px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;padding:14px 0;border-bottom:1px solid var(--line)}
.menu .tick{border:0;padding:0;margin-top:auto}

/* hero */
.hero{padding:clamp(56px,11vh,120px) 0 var(--section)}
.hero .d1{margin:22px 0 26px}
.eyebrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px;color:var(--fg-mute)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);display:inline-block;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* metric grid */
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-top:1px solid var(--line)}
.mg>div{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:24px 24px 22px}
.mg>div:last-child{border-right:0}
.mg .k{font-size:14px;color:var(--fg-mute);line-height:2}
.mg .v{font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.01em;margin:4px 0 10px}
.tag{display:inline-block;font-size:12px;line-height:1.8;padding:1px 8px;border:1px solid var(--line);border-radius:var(--r);color:var(--fg-mute);white-space:nowrap}
.tag.live{color:var(--amber);border-color:rgba(255,159,10,.4)}

/* generic grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.g12{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:32px}

/* rows */
.rows{border-top:1px solid var(--line)}
.rw{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.rw>.i{font-size:14px;color:var(--fg-dim);line-height:1.6}
.li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--fg-2)}
.li>span:first-child{color:var(--fg-dim)}
.li b{color:var(--fg);font-weight:700}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:560px}
th{text-align:left;font-size:14px;font-weight:500;color:var(--fg-mute);padding:12px 16px 12px 0;border-bottom:1px solid var(--line-2)}
td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--fg-2)}
td.s{color:var(--fg)}
tbody tr:hover td{color:var(--fg)}

/* inverted (one per page) */
.cream{background:var(--cream);color:var(--ink)}
.cream a{color:var(--ink)}
.cream a:hover{color:var(--ink-deep)}
.cream .body,.cream .lead{color:#424245}
.cream .mute,.cream .cap,.cream .lbl{color:var(--text-mute)}
.cream .dim,.cream .marker{color:var(--text-ash)}
.cream .btn{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cream .btn:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--cream)}
.cream .btn2{border-color:var(--hairline-strong);color:var(--ink)}
.cream .btn2:hover{border-color:var(--ink);color:var(--ink)}
.cream .hr,.cream .rows,.cream .li,.cream .rw,.cream .mg,.cream .mg>div{border-color:var(--hairline)}
.cream .lbl b{color:var(--ink)}
.cream .tag{color:var(--text-mute);border-color:var(--hairline-strong)}
.cream .tag.live{color:#8a5200;border-color:rgba(138,82,0,.5)}
.cream th{color:var(--text-mute);border-bottom-color:var(--hairline-strong)}
.cream td{color:#424245;border-bottom-color:var(--hairline)}
.cream td.s{color:var(--ink)}
.cream tbody tr:hover td{color:var(--ink)}
.cream input,.cream textarea,.cream select{color:var(--ink);background:var(--surface-soft);border-color:var(--hairline)}
.cream .li b{color:var(--ink)}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:1 5}
.chart .lineA{fill:none;stroke:var(--fg);stroke-width:1.5;vector-effect:non-scaling-stroke}
.chart .lineB{fill:none;stroke:var(--fg-dim);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.chart .tk{font:400 11px var(--mono);fill:var(--fg-dim)}
.ranges{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:fit-content}
.ranges button{background:none;border:0;border-right:1px solid var(--line);color:var(--fg-mute);font-family:var(--mono);font-size:14px;padding:8px 14px;cursor:pointer;transition:color .12s,background .12s}
.ranges button:last-child{border-right:0}
.ranges button:hover{color:var(--fg)}
.ranges button[aria-pressed="true"]{background:var(--fg);color:#0c0b0b}
.readout{display:flex;flex-wrap:wrap;gap:32px;align-items:baseline}
.readout .v{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.01em}

/* allocation bar */
.bars{display:flex;flex-direction:column;gap:2px}
.bar{position:relative;height:52px;background:var(--bg-2);display:flex;align-items:center;padding:0 16px;font-size:14px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--bg-3);border-right:1px solid var(--line-2);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.bar span{position:relative;z-index:1}
.bar .p{margin-left:auto;position:relative;z-index:1;color:var(--fg-mute)}
.bar.on i{background:rgba(255,159,10,.14);border-right-color:var(--amber)}

/* signature scroll sequence */
.seq{position:relative}
.seq-track{height:520vh}
.seq-stage{position:sticky;top:64px;height:auto;min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;padding:40px 0}
.seq-word{font-size:clamp(38px,9vw,116px);line-height:1;font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
.seq-note{color:var(--fg-2);max-width:46ch;margin-top:18px;min-height:5.5em}
.seq-idx{display:flex;gap:10px;margin-bottom:28px;font-size:14px;color:var(--fg-dim);flex-wrap:wrap}
.seq-idx span{transition:color .2s}
.seq-idx span[data-on]{color:var(--amber)}
.seq-meter{height:1px;background:var(--line);margin-top:32px;position:relative}
.seq-meter i{position:absolute;inset:0 auto 0 0;background:var(--amber);width:0}
.fade{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.fade.in{opacity:1;transform:none}

/* article */
.prose{max-width:68ch}
.prose p{color:var(--fg-2);margin:0 0 24px;text-wrap:pretty}
.prose h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;margin:48px 0 16px;letter-spacing:-.01em}
.prose blockquote{border-left:1px solid var(--amber);padding-left:24px;margin:36px 0;font-size:clamp(19px,2vw,24px);line-height:1.35;font-weight:500}
.prose ul{list-style:none;margin:0 0 24px}
.prose li{display:grid;grid-template-columns:32px 1fr;color:var(--fg-2);padding:6px 0}
.prose li::before{content:"[+]";color:var(--fg-dim)}

/* form */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;color:var(--fg-mute)}
input,textarea,select{font-family:var(--mono);font-size:16px;color:var(--fg);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;width:100%}
input:focus,textarea:focus,select:focus{outline:0;background:var(--bg);border-color:var(--fg)}
textarea{min-height:150px;resize:vertical}
.note{font-size:14px;color:var(--fg-dim);line-height:1.6}

/* footer */
footer{border-top:1px solid var(--line);padding:var(--section) 0 40px;background:var(--bg)}
.f-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.f-grid h3{font-size:14px;font-weight:500;color:var(--fg-mute);line-height:2;margin-bottom:10px}
.f-grid a{display:block;font-size:14px;line-height:2;color:var(--fg-2)}
.f-grid a:hover{color:var(--amber)}
.f-bot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--fg-dim)}
.disc{margin-top:40px;font-size:14px;line-height:1.7;color:var(--fg-dim);max-width:92ch}

@media(max-width:1000px){
:root{--section:64px;--pad:24px}
.nav-links,.tick.desk{display:none}
.burger{display:block}
.g2,.g3,.g12{grid-template-columns:1fr}
.f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
:root{--section:48px;--pad:20px}
.mg>div{border-right:0}
.rw{grid-template-columns:1fr;gap:8px}
.f-grid{grid-template-columns:1fr}
.readout{gap:20px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fade{opacity:1;transform:none}}
