/* Slide deck layer on top of tokens.css + components.css.
   Every slide fills the viewport on desktop and snaps; on a phone slides
   become natural-height sections. Values come from tokens only. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Slides ── */
.slide { position: relative; display: grid; align-content: center; min-height: 100svh; padding-block: calc(var(--header-height) + 36px) 72px; scroll-margin-top: 0; }
main .slide[id] { scroll-margin-top: 0; }
.slide.hero { min-height: 100svh; }
.slide-no { position: absolute; right: max(28px, calc((100vw - 1320px) / 2)); bottom: 26px; margin: 0; color: var(--muted); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.07em; font-variant-numeric: tabular-nums; }
.hero-ink .slide-no, .band-ink .slide-no { color: var(--on-ink-muted); }

@media (min-width: 1024px) and (min-height: 700px) {
  html { scroll-snap-type: y mandatory; }
  .slide { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── Header over a dark slide: ink glass instead of canvas glass ── */
.site-header.on-ink.is-scrolled { background: color-mix(in srgb, var(--ink-field) 78%, transparent); box-shadow: none; color: var(--on-ink); }
.site-header.on-ink.is-scrolled .wordmark::before { background-image: var(--brand-mark-on-dark); }
.site-header.on-ink.is-scrolled .button-dark { background: var(--on-ink); color: var(--ink-field); }
@media (max-width: 760px) { .site-header .button { display: none; } }

/* ── Side dots: active dot is the accent signal ── */
.deck-dots { position: fixed; top: 50%; right: 14px; z-index: 29; display: grid; gap: 2px; transform: translateY(-50%); }
.deck-dots a { display: grid; width: 28px; height: 28px; place-items: center; }
.deck-dots a::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--line-strong); transition: height 220ms var(--ease-out), background-color 180ms ease; }
.deck-dots a:hover::before { background: var(--muted); }
.deck-dots a[aria-current]::before { height: 20px; background: var(--accent); }
body.is-ink .deck-dots a:not([aria-current])::before { background: color-mix(in srgb, var(--on-ink) 32%, transparent); }
@media (max-width: 1100px) { .deck-dots { display: none; } }

/* ── 1. Title ── */
.slide.hero-left .hero-content { padding-block: 60px 90px; }
.title-sub { margin-top: 26px; color: var(--on-ink-muted); font-weight: 600; }
.title-facts { width: min(760px, 100%); margin-top: 56px; }
.title-facts > div { border-top-color: color-mix(in srgb, var(--on-ink) 22%, transparent); }
.title-facts span { color: var(--on-ink-muted); }
.deck-hint { margin-top: 40px; color: var(--on-ink-muted); }
@media (hover: none) { .deck-hint { display: none; } }

/* ── 2. What we see ── */
.seen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); margin-top: clamp(32px, 4vh, 52px); }
.seen .label { margin-bottom: 16px; }
.fin { width: 100%; border-collapse: collapse; }
.fin tr { display: grid; grid-template-columns: minmax(110px, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 0 18px; align-items: start; padding-block: 18px; border-top: 1px solid var(--line-strong); }
.fin thead tr { padding-block: 0 10px; border-top: 0; }
.fin th { color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-align: left; }
.fin thead .fin-last { color: var(--accent-deep); font-weight: 800; }
.fin tbody th { padding-top: 0.55em; color: var(--ink); font-size: var(--fs-body); font-weight: 700; }
.fin td { display: grid; gap: 4px; }
.fin td strong { font-size: calc(var(--fs-h3) * 1.5); font-weight: 600; line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.fin td span { color: var(--muted-strong); font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.fin tbody tr:last-child { border-bottom: 1px solid var(--line-strong); }
.seen-kv { margin-top: 18px; }
.seen-kv > div { grid-template-columns: minmax(150px, 0.5fr) 1fr; padding-block: 14px; }
.seen-kv > div:first-child { border-top: 0; }
.seen-kv dd { font-size: var(--fs-body); }
.seen-facts { gap: 22px 30px; }
.seen-facts strong small { font-size: 0.42em; font-weight: 700; letter-spacing: -0.02em; color: var(--muted-strong); }
.seen-facts + .seen-kv > div:first-child { border-top: 1px solid var(--line-strong); }
.seen-facts + .seen-kv { margin-top: 26px; }
.source { margin-top: 28px; color: var(--muted); }
@media (max-width: 900px) {
  .seen { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 760px) {
  .fin tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .fin tr > :first-child { grid-column: 1 / -1; }
  .fin thead tr > :first-child { display: none; }
  .seen-kv > div { grid-template-columns: 1fr; }
  .seen-facts { grid-template-columns: 1fr 1fr; }
}

/* ── 3. Hypothesis ── */
.thesis { max-width: 1180px; margin-top: 26px; }
@media (max-width: 760px) { .thesis { font-size: calc(var(--fs-h2) * 0.8); } }
.band .rule-list { margin-top: clamp(40px, 6vh, 72px); }
.band .rule-list .h4 { max-width: 340px; }

/* ── 4. Offer fields ── */
.offer-fields .field { min-height: clamp(320px, 44vh, 420px); }
.field-title { margin-top: 18px; }
.field p:not(.label):not(.proof) { margin-top: 12px; }
.flow { max-width: 460px; font-size: var(--fs-lead); line-height: 1.45; }
.field-mint .proof strong { font-size: var(--fs-h3); letter-spacing: -0.04em; }
@media (max-width: 1100px) and (min-width: 901px) {
  .offer-fields .field { grid-column: span 6; }
  .offer-fields .field:first-child { grid-column: span 12; }
}
@media (max-width: 900px) { .offer-fields .field { min-height: 0; } }

/* ── 5. Pilot ── */
.flight > * { min-height: 0; }
.flight .symbol { margin-bottom: 14px; }
.flight .label { margin-top: 4px; }
@media (max-width: 1100px) and (min-width: 901px) { .flight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 6. Metrics ── */
.split .lead { margin-top: 22px; max-width: 460px; }
.split { align-items: center; }
.board td:first-child { width: 46%; }
@media (max-width: 760px) { .board td:first-child { width: auto; } }

/* ── 7. Roles ── */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); margin-top: clamp(36px, 5vh, 60px); }
.band-ink .label { color: var(--on-ink-muted); }
.roles .label { margin-bottom: 8px; }
.role-list { counter-reset: role; }
.role-list li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding-block: 16px; border-top: 1px solid color-mix(in srgb, var(--on-ink) 16%, transparent); font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; }
.role-list li::before { counter-increment: role; content: counter(role, decimal-leading-zero); color: var(--accent-on-dark); font-size: var(--fs-small); font-weight: 800; font-variant-numeric: tabular-nums; }
.band-ink .checks { gap: 0; color: var(--on-ink); font-size: var(--fs-lead); }
.band-ink .checks li { padding-block: 16px; border-top: 1px solid color-mix(in srgb, var(--on-ink) 16%, transparent); color: var(--on-ink-muted); }
.band-ink .checks li::before { color: var(--accent-on-dark); }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } }

/* ── 8. Security ── */
.security dd { font-size: var(--fs-lead); line-height: 1.45; }
.security dt { color: var(--ink); font-size: var(--fs-body); font-weight: 700; }

/* ── 9. Next steps ── */
.brief { align-items: end; }
.steps { margin-top: clamp(24px, 4vh, 40px); }
.steps > li { grid-template-columns: 80px minmax(0, 0.9fr) minmax(0, 1.1fr); padding-block: 20px; }
.steps > li::before { font-size: 32px; }
.contact { min-width: 240px; justify-items: start; }
.contact .label { margin-bottom: 4px; }
.placeholder { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted-strong); }
@media (max-width: 760px) { .steps > li { grid-template-columns: 1fr; } }

/* ── Phone: slides are sections, not screens ── */
@media (max-width: 760px) {
  .slide:not(.hero) { min-height: 0; padding-block: calc(var(--section-pad) + 8px) calc(var(--section-pad) + 16px); }
  .slide.hero-left .hero-content { padding-block: 40px 72px; }
  .title-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .board-stack td.col-hl { background: none; }
  .title-facts strong { font-size: var(--fs-h3); }
  .slide-no { right: 16px; bottom: 18px; }
}