/* plateauquant.com — the scroll-driven landing, on top of style.css. Dark only on this page. */
body.opt { overflow-x: hidden; background: radial-gradient(90% 70% at 72% 18%, #171A20 0%, rgba(12, 13, 15, 0) 62%), #0C0D0F }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none }
#grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-size: 160px 160px }
.opt .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none }
.opt .nav.scrolled { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.story { position: relative; z-index: 1 }
.ch { min-height: 100vh; display: flex; align-items: center; padding: 0 clamp(28px, 5vw, 72px); box-sizing: border-box }
.ch[data-side="right"] { justify-content: flex-end }
.ch[data-side="center"] { justify-content: center }

/* the chapter card: a sheet of the scene's own air — translucent, softly blurred, hairline-edged */
.ch .card { width: min(500px, 100%); padding: 30px 34px 28px; border-radius: 16px; will-change: opacity, transform;
  background: color-mix(in srgb, var(--bg) 58%, transparent); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05);
  border: 1px solid rgba(var(--ink-rgb), .09); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7) }
.card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); margin: 0 0 18px; display: flex; align-items: center; gap: 12px }
.card .k::before { content: attr(data-n); color: var(--text); opacity: .7 }
.card .k::after { content: ""; flex: 1; height: 1px; background: rgba(var(--ink-rgb), .12) }
.card h2 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1; max-width: none; letter-spacing: -.018em }
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; max-width: 46ch }
.card p b { color: var(--text); font-weight: 500 }
.card .fig { font-family: var(--serif); font-weight: 400; font-size: 58px; letter-spacing: -.028em; line-height: 1; margin: 22px 0 4px; color: var(--text); font-variant-numeric: proportional-nums }
.card .fig small { font-size: 26px; color: var(--muted); letter-spacing: 0 }
.card .figl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2) }
.card ul.eight { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 13.5px; color: var(--muted) }
.card ul.eight li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(var(--ink-rgb), .08); padding: 6px 0 }
.card ul.eight b { font-family: var(--mono); font-weight: 500; color: var(--text); font-size: 12px }
.card .beta-form { margin-top: 22px }
.card .beta-form input { min-width: 0; background: color-mix(in srgb, var(--bg) 70%, transparent) }
.card .cap { margin-top: 14px }
.ch.hero { padding-top: 24px }
.ch.hero .hero-copy { max-width: 640px }
.ch.hero h1 { max-width: 12ch }

/* the quiet chapter rail */
.rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 4px }
.rail-i { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted2); opacity: .55; background: none; border: 0; padding: 5px 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: opacity .3s, color .3s }
.rail-i::before { content: ""; width: 6px; height: 1px; background: currentColor; transition: width .3s var(--ease) }
.rail-i:hover { opacity: 1 }
.rail-i.on { color: var(--text); opacity: 1 }
.rail-i.on::before { width: 16px }

.hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); transition: opacity .5s var(--ease); pointer-events: none }
.hint.off { opacity: 0 }
.hint i { display: block; width: 1px; height: 26px; background: var(--muted2); transform-origin: top; animation: hintdrop 2s var(--ease) infinite }
@keyframes hintdrop { 0% { transform: scaleY(0); transform-origin: top } 45% { transform: scaleY(1); transform-origin: top } 55% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

/* the wordmark: the whole content width, cropped at the baseline, in the brand face */
.wordmark { margin: 56px 0 0; overflow: hidden; line-height: 0; opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease) }
.wordmark.in { opacity: 1; transform: none }
.wordmark svg { width: 100%; height: auto; display: block; overflow: visible }
.wordmark text { font-family: var(--serif); font-weight: 400; font-size: 336px; fill: var(--text); letter-spacing: -.015em; font-optical-sizing: auto }
@media (max-width: 640px) { .wordmark { margin-top: 36px } }

/* the footer stands on solid ground */
.foot { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line) }
.foot footer { margin-top: 0; border-top: 0 }

@media (max-width: 980px) {
  .ch { align-items: flex-end; padding-bottom: 4vh }
  .ch[data-side="right"], .ch[data-side="left"] { justify-content: center }
  .ch .card { width: 100%; padding: 20px 20px 18px }
  .card h2 { font-size: 23px }
  .card p { font-size: 14px; margin-top: 8px }
  .card .fig { font-size: 40px; margin-top: 12px }
  .card ul.eight { font-size: 12px }
  .ch.hero { align-items: flex-start; padding-top: 10vh }
  .rail { display: none }
}
@media (prefers-reduced-motion: reduce) { .hint i { animation: none } }