[hidden] { display: none !important; }
html, body { overflow-x: hidden; }
.ss-hero + .marquee { width: 100%; max-width: 100%; }
.chapters { position: fixed; right: 20px; top: 50%; z-index: 20; display: flex; flex-direction: column; gap: 9px; transform: translateY(-50%); }
.chapters a { width: 9px; height: 9px; border: 1px solid var(--ink-300); border-radius: 50%; display: block; position: relative; transition: transform .2s, background .2s, border-color .2s; }
.chapters a:hover, .chapters a:focus-visible { transform: scale(1.45); background: var(--amber-500); border-color: var(--amber-500); outline: none; }
.chapters a span { position: absolute; right: 19px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 10px var(--font-mono); letter-spacing: .1em; color: var(--ink-500); opacity: 0; pointer-events: none; transition: opacity .2s; }
.chapters a:hover span, .chapters a:focus-visible span { opacity: 1; }
.ss-hero { position: relative; overflow: hidden; padding: clamp(150px, 19vh, 200px) 0 110px; background: linear-gradient(180deg, #F7F2E4, var(--sand-100)); }
.ss-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 90px); align-items: center; position: relative; z-index: 1; }
.ss-hero h1 { font-size: clamp(3.4rem, 8vw, 7rem); line-height: .93; max-width: 650px; margin: 20px 0 28px; }
.ss-hero .lede { max-width: 620px; font-size: clamp(17px, 2vw, 21px); }
.ss-hero .lede strong { color: var(--iris-500); }
.ss-actions, .ss-hero-note { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ss-actions { margin-top: 32px; }
.ss-hero-note { margin-top: 22px; }
.ss-loop { justify-self: center; text-align: center; color: var(--ink-500); font: 11px var(--font-mono); letter-spacing: .12em; }
.ss-loop-ring { width: min(360px, 70vw); aspect-ratio: 1; border: 2px dashed var(--sand-300); border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle, rgb(255 253 246 / .85) 0 28%, transparent 29%), conic-gradient(from 30deg, rgb(232 112 58 / .18), rgb(91 84 214 / .2), rgb(232 112 58 / .18)); }
.ss-loop-ring::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgb(13 13 17 / .11); border-radius: 50%; }
.ss-loop-center { font: 600 clamp(16px, 2.2vw, 22px)/1.08 var(--font-display); letter-spacing: -.02em; color: var(--ink-900); z-index: 1; }
.ss-loop-dot { position: absolute; z-index: 2; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--ink-900); color: var(--sand-50); font-size: 10px; line-height: 1.2; box-shadow: 0 0 0 7px rgb(247 242 228 / .85); }
.ss-loop-dot b { color: var(--amber-300); font-size: 9px; letter-spacing: .08em; }
.dot-one { top: -12px; left: calc(50% - 39px); }.dot-two { right: -18px; top: calc(50% - 39px); }.dot-three { bottom: -12px; left: calc(50% - 39px); }.dot-four { left: -18px; top: calc(50% - 39px); }
.ss-loop > p { margin-top: 18px; }
.ss-dunes { position: absolute; bottom: 0; left: 0; right: 0; height: 72px; background: var(--ink-900); clip-path: ellipse(80% 65% at 50% 100%); }
.ss-rules { background: var(--sand-100); }.ss-rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.ss-rule { min-height: 230px; }.ss-rule-num { display: block; font: 700 2.4rem var(--font-display); color: var(--amber-500); margin-bottom: 24px; }.ss-rule h3 { margin-bottom: 12px; }.ss-rule p { color: var(--ink-700); font-size: 15px; }
.ss-cards { background: var(--sand-50); }.ss-sketch { background: var(--sand-100); }.ss-investigate { background: var(--ink-900); color: var(--sand-50); }.ss-investigate .eyebrow { color: var(--amber-300); }.ss-investigate .section-head .lede { color: rgb(250 246 235 / .7); }
.ss-grid, .ss-contract-card { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.ss-scenarios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.ss-scenario { min-height: 190px; padding: 24px; text-align: left; color: var(--sand-50); background: rgb(250 246 235 / .06); border: 1px solid rgb(250 246 235 / .2); border-radius: 18px; cursor: pointer; transition: border-color .25s, background .25s, transform .25s; }.ss-scenario:hover, .ss-scenario:focus-visible { border-color: var(--amber-300); background: rgb(245 160 92 / .1); transform: translateY(-3px); outline: none; }.ss-scenario-kicker { display: block; color: var(--amber-300); font: 10px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 18px; }.ss-scenario strong { display: block; font: 600 21px/1.15 var(--font-display); }.ss-answer { display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; color: rgb(250 246 235 / .75); transition: max-height .35s, opacity .35s, margin .35s; }.ss-scenario.is-open { border-color: #7BE39A; }.ss-scenario.is-open .ss-answer { max-height: 120px; opacity: 1; margin-top: 16px; }
.ss-handoff { padding: 24px; border: 2px dashed var(--ink-900); border-radius: 20px; background: rgb(255 253 246 / .75); }.ss-handoff h3 { margin: 18px 0 10px; }.ss-handoff p { color: var(--ink-700); }.ss-handoff-note { display: block; margin-top: 16px; color: var(--iris-500); font: 11px var(--font-mono); letter-spacing: .06em; }
.ss-myths { background: var(--sand-50); }.ss-contract { background: var(--sand-100); }.ss-contract-card { padding: clamp(26px, 5vw, 54px); border-radius: 28px; background: var(--ink-900); color: var(--sand-50); }.ss-contract-card .eyebrow { color: var(--amber-300); }.ss-contract-card h2 { max-width: 650px; color: var(--sand-50); }.ss-contract-card p { max-width: 640px; color: rgb(250 246 235 / .73); }.ss-contract-card .btn { justify-self: end; }
.ss-hero [data-reveal], .ss-rule, .ss-scenario { animation: ss-rise .7s both; }.ss-rule:nth-child(2), .ss-scenario:nth-child(2) { animation-delay: .08s; }.ss-rule:nth-child(3), .ss-scenario:nth-child(3) { animation-delay: .16s; }.ss-rule:nth-child(4), .ss-scenario:nth-child(4) { animation-delay: .24s; }@keyframes ss-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 850px) { .ss-hero-grid, .ss-grid, .ss-contract-card { grid-template-columns: 1fr; }.ss-loop { order: -1; }.ss-rule-grid { grid-template-columns: repeat(2, 1fr); }.ss-contract-card .btn { justify-self: start; } }
@media (max-width: 560px) { .ss-hero { padding-top: 130px; }.ss-hero h1 { font-size: clamp(3.2rem, 16vw, 5rem); }.ss-loop-ring { width: min(300px, 80vw); }.ss-rule-grid, .ss-scenarios { grid-template-columns: 1fr; }.ss-contract-card { padding: 26px 20px; } }
@media (max-width: 760px) { .chapters { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }