/* subpage.css, shared chrome + prose for StockFloc subpages */

.subhero { padding: clamp(70px, 11vw, 140px) 0 clamp(30px, 5vw, 56px); }
.subhero .kicker { margin-bottom: 18px; }
.subhero h1 { font-size: clamp(38px, 6vw, 72px); letter-spacing: -.04em; line-height: .98; }
.subhero p { margin-top: 20px; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 56ch; line-height: 1.6; }

/* legal / doc prose */
.doc { max-width: 720px; margin: 0 auto; padding-bottom: clamp(60px, 9vw, 120px); }
.doc__meta { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.doc h2 { font-size: 22px; letter-spacing: -.02em; margin: 40px 0 14px; }
.doc h2:first-of-type { margin-top: 0; }
.doc p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; }
.doc p a { color: var(--g-glow); text-decoration: underline; text-underline-offset: 3px; }
.doc ul { margin: 0 0 18px; padding-left: 20px; color: var(--muted); }
.doc li { font-size: 15.5px; line-height: 1.7; margin-bottom: 8px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc .callout { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; padding: 20px 22px; margin: 26px 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

/* full rankings page */
.rk-wrap { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.rk-board { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -50px #000; overflow: hidden; }
.rk-aside { display: grid; gap: 16px; position: sticky; top: 94px; }
.rk-card { background: var(--panel); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); padding: 22px; }
.rk-card h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 8px; }
.rk-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.rk-card .steps { display: grid; gap: 14px; margin-top: 6px; }
.rk-card .step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.rk-card .step b { font-family: var(--mono); font-size: 12px; color: var(--g-glow); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in oklab, var(--g-calm) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-glow) 26%, transparent); }
.rk-card .step span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.rk-stat { display: flex; align-items: baseline; gap: 8px; }
.rk-stat .n { font-family: var(--mono); font-weight: 700; font-size: 30px; color: var(--g-glow); }
.rk-stat .l { font-size: 13px; color: var(--muted); }

.lb__row.me { background: color-mix(in oklab, var(--g-calm) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-glow) 22%, transparent); }
.lb__row.me .lb__name::after { content: "you"; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-glow); margin-left: 9px; padding: 2px 6px; border-radius: 5px; background: color-mix(in oklab, var(--g-calm) 18%, transparent); vertical-align: middle; }

@media (max-width: 880px) { .rk-wrap { grid-template-columns: 1fr; } .rk-aside { position: static; } }