@font-face { font-family: 'Geist'; src: url('assets/fonts/geist-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('assets/fonts/instrument-serif-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #140E0B;
  --ink-2: #1F1612;
  --paper: #F7F0E4;
  --tortilla: #E9DAC2;
  --bone: #F4EBDD;
  --red: #E0201A;
  --red-deep: #A8120E;
  --red-bright: #FF4A36;
  --green: #13903A;
  --yellow: #F2C400;
  --on-dark: #F4EBDD;
  --muted-dark: #BDB09D;
  --on-paper: #1B1410;
  --muted-paper: #5A4B40;

  --chrome-top: 74px;
  --chrome-bottom: 56px;
  --gutter: clamp(20px, 3.6vw, 58px);

  /* Bounded fluid tokens. 1366 ~ 16.8 px body; 1600 = 18 px; 2096 ~ 20.5 px. */
  --fs-body: clamp(16px, 10px + 0.5vw, 24px);
  --fs-ui: clamp(16px, 9.2px + 0.5vw, 19px);
  --fs-label: clamp(13px, 7.6px + 0.43vw, 18px);
  --fs-btn: clamp(15px, 8.8px + 0.4vw, 18px);
  --fs-h1: clamp(54px, 4.6vw + 16px, 128px);
  --fs-h2: clamp(34px, 2.6vw + 14px, 60px);
  --fs-h3: clamp(20px, 1.1vw + 10px, 30px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--on-dark);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-theme="paper"] { background: var(--paper); color: var(--on-paper); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bone); color: var(--ink); padding: 8px 12px; }
.skip:focus { left: 8px; }

.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.45; margin: 0; }
.kicker { color: var(--muted-dark); margin: 0 0 0.6em; }
body[data-theme="paper"] .kicker, .slide[data-theme="paper"] .kicker { color: var(--muted-paper); }
.serif-em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--red-bright); }
.slide[data-theme="paper"] .serif-em { color: var(--red-deep); }
.note { color: var(--muted-dark); font-size: var(--fs-label); margin: 1em 0 0; line-height: 1.5; }
.slide[data-theme="paper"] .note { color: var(--muted-paper); }
.body { font-size: var(--fs-body); margin: 0.4em 0 0; }
.ui-body { font-size: var(--fs-ui); margin: 0.3em 0; }
.ui-phone { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-label); letter-spacing: 0.04em; }
.source { color: var(--muted-dark); margin-top: 0.7em; }
.slide[data-theme="paper"] .source { color: var(--muted-paper); }

/* ---------- Progress, chrome ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 55; background: rgba(224, 32, 26, 0.18); }
.progress span { display: block; height: 100%; background: var(--red-bright); transform: scaleX(0.111); transform-origin: left; transition: transform 300ms ease; }
.chrome { position: fixed; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); }
.chrome-top { top: 0; height: var(--chrome-top); }
.chrome-bottom { bottom: 0; height: var(--chrome-bottom); }
.chrome-label { color: var(--muted-dark); text-align: center; flex: 1; }
body[data-theme="paper"] .chrome-label { color: var(--muted-paper); }
.brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bc-logo { height: 24px; width: auto; }
.x-mark { width: 16px; height: 16px; color: var(--muted-dark); flex: 0 0 auto; }
.client-logo { height: 40px; width: auto; }
.bc-logo-light { display: none; }
body[data-theme="paper"] .bc-logo-dark { display: none; }
body[data-theme="paper"] .bc-logo-light { display: block; }
body[data-theme="paper"] .client-logo { background: #FFFFFF; border-radius: 10px; padding: 4px 8px; }
.chrome-index { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid currentColor; border-color: rgba(244, 235, 221, 0.35); border-radius: 999px; background: transparent; cursor: pointer; font-size: var(--fs-label); }
body[data-theme="paper"] .chrome-index { border-color: rgba(27, 20, 16, 0.35); }
.chrome-index svg { width: 18px; height: 18px; }
.step-nav { display: flex; gap: 10px; }
.nav-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(244, 235, 221, 0.35); background: transparent; cursor: pointer; font-size: var(--fs-btn); }
.nav-btn-next { background: var(--red); border-color: var(--red); color: #fff; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
body[data-theme="paper"] .nav-btn { border-color: rgba(27, 20, 16, 0.35); }
body[data-theme="paper"] .nav-btn-next { color: #fff; }
.prepared-by { color: var(--muted-dark); font-size: var(--fs-label); }
body[data-theme="paper"] .prepared-by { color: var(--muted-paper); }

/* ---------- Deck and slides ---------- */
#deck { position: fixed; top: var(--chrome-top); bottom: var(--chrome-bottom); left: 0; right: 0; overflow: hidden; }
.slide { position: absolute; inset: 0; padding: clamp(16px, 3vh, 36px) var(--gutter); opacity: 0; visibility: hidden; pointer-events: none; }
.slide[data-theme="dark"] { background: var(--ink); color: var(--on-dark); }
.slide[data-theme="paper"] { background: var(--paper); color: var(--on-paper); }
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.slide.is-leaving { visibility: visible; pointer-events: none; }
.slide.is-entering { visibility: visible; }
.slide-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(244, 235, 221, 0.3) transparent; padding-right: 4px; }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; margin: 0.15em 0 0.2em; max-width: 26ch; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; margin: 0.25em 0 0.2em; }
.body-list { padding-left: 1.2em; margin: 0.4em 0; font-size: var(--fs-body); }
.body-list li { margin: 0.25em 0; }
.notice { font-size: var(--fs-ui); color: var(--muted-dark); margin: 0.6em 0 0; }
.slide[data-theme="paper"] .notice { color: var(--muted-paper); }

/* ---------- 01 Cover ---------- */
.cover-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: center; }
.cover-copy { align-self: center; min-width: 0; }
.cover-title { font-size: var(--fs-h1); font-weight: 600; line-height: 0.92; letter-spacing: -0.055em; margin: 0.2em 0 0.3em; }
.cover-title .serif-em { font-size: 1.02em; letter-spacing: -0.02em; }
.lede { font-size: var(--fs-body); max-width: 38ch; color: var(--on-dark); margin: 0.2em 0 0.8em; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 1em; }
.chips li { border: 1px solid rgba(244, 235, 221, 0.4); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-label); }
.prepared { color: var(--muted-dark); font-size: var(--fs-label); margin: 0.2em 0 0.8em; }
.cue { margin: 0; }
.cue-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--red); border: 0; color: #fff; cursor: pointer; font-size: var(--fs-btn); }
.cue-btn svg { width: 20px; height: 20px; }
.cover-stage { position: relative; min-height: 0; height: 100%; }
#plateCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.webgl-on #plateCanvas { display: block; }
.plate-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.webgl-on .plate-fallback { display: none; }
.medallion { width: min(78%, 440px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2a1d17, #120c09 70%); box-shadow: inset 0 0 0 14px #F2E7D6, inset 0 0 0 18px rgba(224, 32, 26, 0.55), 0 30px 80px rgba(0, 0, 0, 0.55); }
.medallion img { width: 72%; height: auto; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 34; }

/* ---------- 02 Audit ---------- */
.findings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 0.6em; }
.finding { grid-column: span 2; background: #FFFFFF; border: 1px solid rgba(27, 20, 16, 0.12); border-radius: 14px; padding: clamp(14px, 1.2vw, 22px); }
.finding:nth-child(n + 4) { grid-column: span 3; }
.finding .body { font-size: var(--fs-ui); color: var(--on-paper); }
.sev { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-label); letter-spacing: 0.06em; }
.sev-critical { background: var(--red); color: #fff; }
.sev-high { border: 1.5px solid var(--red-deep); color: var(--red-deep); }
.sev-medium { border: 1.5px solid var(--on-paper); color: var(--on-paper); }
.finding .source { color: var(--muted-paper); }

/* ---------- 03 Gap ---------- */
.gap-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.gap-copy { min-width: 0; }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 1em; }
.path { border-radius: 14px; padding: clamp(14px, 1.2vw, 20px); border: 1px solid rgba(244, 235, 221, 0.18); background: var(--ink-2); }
.path-concept { border-color: rgba(224, 32, 26, 0.7); }
.path-h { color: var(--muted-dark); margin-bottom: 0.5em; }
.path ol { padding-left: 1.2em; margin: 0; font-size: var(--fs-ui); }
.path li { margin: 0.4em 0; }
.path li .mono { display: block; color: var(--red-bright); font-size: var(--fs-label); }
.path-total { font-weight: 600; font-size: var(--fs-ui); margin: 0.6em 0 0; }
.gap-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat { border: 1px solid rgba(244, 235, 221, 0.18); border-radius: 14px; padding: clamp(14px, 1.2vw, 22px); background: var(--ink-2); }
.stat-n { font-size: clamp(56px, 4.2vw + 14px, 104px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; margin: 0; color: var(--on-dark); }
.stat .body { font-size: var(--fs-ui); margin: 0.3em 0 0; }
.gap-note { max-width: 90ch; border-left: 3px solid var(--red); padding-left: 14px; color: var(--on-dark); font-size: var(--fs-ui); }

/* ---------- 04 Flagship concept ---------- */
.flagship { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.9fr) minmax(0, 0.8fr); grid-template-rows: minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); height: 100%; align-items: stretch; }
.flagship-copy { min-width: 0; overflow: auto; }
.legend { list-style: none; padding: 0; margin: 0.8em 0; font-size: var(--fs-ui); }
.legend li { margin: 0.5em 0; padding-left: 12px; border-left: 2px solid var(--red); }
.browser { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #F7F0E4; color: var(--on-paper); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #E9DAC2; flex: 0 0 auto; }
.browser-bar > span { width: 10px; height: 10px; border-radius: 50%; background: #B9A88E; }
.browser-bar .url { margin-left: 12px; color: var(--muted-paper); font-size: 12px; letter-spacing: 0.02em; text-transform: none; }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #FFFFFF; border-bottom: 1px solid rgba(27, 20, 16, 0.1); flex: 0 0 auto; flex-wrap: wrap; }
.site-logo { height: 40px; width: auto; }
.concept-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.concept-tab { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: var(--fs-ui); color: var(--on-paper); }
.concept-tab[aria-selected="true"] { background: var(--red); color: #fff; }
.concept-viewport { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px; font-size: var(--fs-ui); scrollbar-width: thin; }
.concept-panel h3 { font-size: clamp(20px, 1vw + 10px, 26px); line-height: 1.2; margin: 0.2em 0 0.4em; color: var(--on-paper); font-weight: 600; }
.concept-panel .mono { color: var(--muted-paper); font-size: var(--fs-label); }
.hero { position: relative; border-radius: 12px; overflow: hidden; min-height: 210px; }
.hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-copy { position: relative; min-height: 210px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, rgba(20, 14, 11, 0) 0%, rgba(20, 14, 11, 0.86) 85%); color: var(--on-dark); }
.hero-copy .mono { color: var(--muted-dark); }
.hero-copy h3 { color: var(--on-dark); font-size: clamp(22px, 1.4vw + 10px, 32px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-size: var(--fs-btn); font-weight: 600; line-height: 1.2; text-align: center; }
.btn-red { background: var(--red); color: #fff; }
.btn-line { background: transparent; color: var(--on-dark); border-color: rgba(244, 235, 221, 0.7); }
.loc-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.loc-chip { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(27, 20, 16, 0.35); background: #FFFFFF; cursor: pointer; font-size: var(--fs-ui); color: var(--on-paper); }
.loc-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.hours-card { background: #FFFFFF; border: 1px solid rgba(27, 20, 16, 0.12); border-radius: 12px; padding: 14px 16px; }
.hours-card p { margin: 0.25em 0; }
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.order-grid img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4 / 3; }
.steps { padding-left: 1.3em; margin: 0.6em 0 1em; font-size: var(--fs-ui); }
.steps li { margin: 0.45em 0; }
.notice:not(.note) { color: var(--muted-paper); }
.catering-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.catering-grid > img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 16 / 11; }
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cform label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-label); color: var(--on-paper); }
.cform label.full { grid-column: 1 / -1; }
.cform input, .cform select, .cform textarea { min-height: 42px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(27, 20, 16, 0.35); background: #FFFFFF; color: var(--on-paper); font-size: var(--fs-ui); }
.cform textarea { resize: vertical; }
.cform .btn { grid-column: 1 / -1; }
.cform .notice { grid-column: 1 / -1; margin: 0; }
.loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.loc-card { background: #FFFFFF; border: 1px solid rgba(27, 20, 16, 0.12); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.loc-card h3 { font-size: clamp(18px, 0.8vw + 10px, 22px); margin: 0 0 0.2em; }
.loc-card p { margin: 0; }
.loc-card-photo { display: grid; grid-template-columns: 1fr; }
.loc-card-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.loc-card-photo > div { display: flex; flex-direction: column; gap: 4px; }

.phone-wrap { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.phone { width: min(100%, 290px); margin: 0 auto; border-radius: 36px; padding: 12px; background: #0B0907; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); border: 1px solid #2c2420; }
.phone-screen { border-radius: 26px; overflow: hidden; background: #F7F0E4; color: var(--on-paper); }
.phone-screen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.phone-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.phone-body .mono { color: var(--muted-paper); }
.phone-h { font-size: 22px; font-weight: 600; margin: 0; }
.phone-body p { margin: 0; font-size: var(--fs-ui); }
.phone-detail { display: block; border: 1px solid rgba(244, 235, 221, 0.2); border-radius: 14px; padding: 16px; background: var(--ink-2); }
.phone-detail ul { padding-left: 1.2em; margin: 0.5em 0 0; font-size: var(--fs-ui); }
.phone-detail li { margin: 0.4em 0; }

/* ---------- 05 System ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 0.6em; }
.pillar { background: #FFFFFF; border: 1px solid rgba(27, 20, 16, 0.12); border-radius: 14px; padding: clamp(16px, 1.3vw, 24px); display: flex; flex-direction: column; }
.pillar-n { color: var(--red-deep); margin: 0; }
.pillar .body { font-size: var(--fs-ui); color: var(--on-paper); }
.pillar .for { margin-top: auto; padding-top: 12px; color: var(--muted-paper); border-top: 1px solid rgba(27, 20, 16, 0.12); font-size: var(--fs-label); text-transform: none; letter-spacing: 0.01em; }

/* ---------- 06 Proof ---------- */
.compare { position: relative; height: clamp(300px, 52vh, 500px); border-radius: 16px; overflow: hidden; margin-top: 0.6em; background: var(--ink-2); --pos: 50%; }
.cmp-layer { position: absolute; inset: 0; }
.cmp-after img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cmp-after::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 11, 0.2), rgba(20, 14, 11, 0.85)); }
.cmp-before { background: var(--ink-2); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-text { position: relative; z-index: 2; max-width: 38ch; padding: clamp(18px, 2vw, 30px); height: 100%; display: flex; flex-direction: column; justify-content: center; }
.cmp-text-right { margin-left: auto; text-align: left; }
.cmp-text ol { padding-left: 1.2em; margin: 0.6em 0; font-size: var(--fs-ui); }
.cmp-text li { margin: 0.45em 0; }
.cmp-text .mono { color: var(--muted-dark); }
.cmp-after .cmp-text { max-width: 44ch; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--red-bright); transform: translateX(-50%); z-index: 3; box-shadow: 0 0 18px rgba(255, 74, 54, 0.7); pointer-events: none; }
.cmp-range { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cmp-range input { width: 100%; min-height: 44px; accent-color: var(--red); }

/* ---------- 07 Roadmap ---------- */
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 0.6em; }
.phase { background: #FFFFFF; border: 1px solid rgba(27, 20, 16, 0.12); border-radius: 14px; padding: clamp(16px, 1.4vw, 24px); display: flex; flex-direction: column; gap: 6px; }
.phase .mono { color: var(--muted-paper); margin-top: 0.4em; }
.phase .body-list { font-size: var(--fs-ui); margin: 0.2em 0 0.4em; }
.phase-day { font-size: clamp(30px, 2vw + 12px, 46px); font-weight: 600; letter-spacing: -0.04em; margin: 0; line-height: 1; }
.phase-launch { border-color: var(--red); box-shadow: inset 0 4px 0 var(--red); }
.phase-launch .phase-day { color: var(--red-deep); }

/* ---------- 08 Engagement ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 0.6em; }
.tier { background: var(--ink-2); border: 1px solid rgba(244, 235, 221, 0.18); border-radius: 14px; padding: clamp(18px, 1.5vw, 26px); display: flex; flex-direction: column; gap: 6px; }
.tier .body { font-size: var(--fs-ui); }
.tier .body-list { font-size: var(--fs-ui); margin-top: 0.4em; }
.tier-tag { color: var(--muted-dark); margin: 0; }
.tier-price { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(244, 235, 221, 0.2); color: var(--muted-dark); font-size: var(--fs-label); text-transform: none; letter-spacing: 0.01em; }
.tier-recommended { border-color: var(--red-bright); box-shadow: 0 0 0 1px var(--red-bright) inset; }
.tier-recommended .tier-tag { color: var(--red-bright); }

/* ---------- 09 Close ---------- */
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.close-copy, .close-reps { min-width: 0; }
.sched { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0.8em; }
.sched label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-label); color: var(--on-paper); }
.sched select, .sched input { min-height: 44px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(27, 20, 16, 0.35); background: #FFFFFF; color: var(--on-paper); font-size: var(--fs-ui); }
.sched .btn { grid-column: 1 / -1; }
.sched .notice { grid-column: 1 / -1; color: var(--muted-paper); margin: 0; }
.draft-link { grid-column: 1 / -1; color: var(--red-deep); font-weight: 600; font-size: var(--fs-ui); text-decoration: underline; text-underline-offset: 4px; }
.close-reps { display: flex; flex-direction: column; gap: 14px; }
.rep { display: grid; grid-template-columns: minmax(120px, 0.85fr) minmax(0, 1.4fr); gap: 16px; align-items: center; background: #FFFFFF; border: 1px solid rgba(27, 20, 16, 0.12); border-radius: 14px; padding: 14px; }
.rep img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 12px; }
.rep-name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.rep .mono { color: var(--muted-paper); margin: 0.25em 0 0.5em; }
.rep p { margin: 0.25em 0; }
.rep a { color: var(--on-paper); text-decoration-color: var(--red-deep); text-underline-offset: 3px; }
.office { margin: 0; }
.office a { color: var(--on-paper); }
.signoff { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 12px 16px; border-radius: 999px; background: var(--ink); color: var(--on-dark); width: fit-content; max-width: 100%; }
.signoff img { height: 22px; width: auto; }
.signoff .mono { color: var(--muted-dark); text-transform: none; letter-spacing: 0.01em; font-size: var(--fs-label); }

/* ---------- Index overlay ---------- */
.index-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(10, 7, 5, 0.96); padding: 24px var(--gutter) 40px; overflow: auto; overscroll-behavior: contain; color: var(--on-dark); }
.index-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.index-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(244, 235, 221, 0.4); background: transparent; cursor: pointer; font-size: var(--fs-btn); }
.index-close svg { width: 18px; height: 18px; }
.index-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.index-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; text-align: left; padding: 16px; min-height: 96px; border-radius: 14px; border: 1px solid rgba(244, 235, 221, 0.2); background: var(--ink-2); cursor: pointer; }
.index-card[aria-current="true"] { border-color: var(--red-bright); }
.index-num { grid-row: span 2; font-family: 'JetBrains Mono', monospace; color: var(--red-bright); font-size: var(--fs-label); }
.index-title { font-size: var(--fs-ui); font-weight: 600; }
.index-sub { font-size: var(--fs-label); color: var(--muted-dark); }

/* ---------- Transition elements ---------- */
.seam { position: fixed; top: 0; bottom: 0; left: 0; width: 3px; z-index: 36; pointer-events: none; opacity: 0; transform: translate3d(101vw, 0, 0); background: linear-gradient(to bottom, transparent, #FFD9B0 20%, #FF4A36 50%, #FFD9B0 80%, transparent); box-shadow: 0 0 36px 10px rgba(224, 32, 26, 0.5); }
.salsa-wash { position: fixed; inset: 0; z-index: 37; pointer-events: none; transform: translate3d(-101%, 0, 0); background: linear-gradient(90deg, transparent 0%, var(--red) 22%, var(--red) 78%, transparent 100%); }

/* ---------- Fallback and state classes ---------- */
body.no-webgl .plate-fallback { display: grid; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .flagship { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.75fr); grid-template-rows: auto; height: auto; }
  .flagship-copy { overflow: visible; }
  .browser { height: min(74vh, 660px); min-height: 460px; }
  .phone-wrap { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .phone { width: 230px; margin: 0; flex: 0 0 auto; }
  .phone-detail { flex: 1 1 auto; }
}
@media (max-width: 1100px) {
  .flagship { grid-template-columns: minmax(0, 1fr); }
  .phone-wrap { flex-direction: column; align-items: stretch; }
  .phone { margin: 0 auto; }
  .findings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finding, .finding:nth-child(n + 4) { grid-column: auto; }
  .gap-grid { grid-template-columns: minmax(0, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .roadmap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cover-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: start; }
  .cover-stage { height: 46vh; min-height: 280px; order: -1; }
  .cover-copy { align-self: start; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .close-grid { grid-template-columns: minmax(0, 1fr); }
  .order-grid, .catering-grid { grid-template-columns: minmax(0, 1fr); }
  .loc-grid { grid-template-columns: minmax(0, 1fr); }
  .paths, .gap-stats { grid-template-columns: minmax(0, 1fr); }
  .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --chrome-top: 60px; --chrome-bottom: 62px; --gutter: 18px; }
  .chrome { padding: 0 14px; gap: 8px; }
  .chrome-top { background: var(--ink); }
  body[data-theme="paper"] .chrome-top { background: var(--paper); }
  .chrome-bottom { background: var(--ink); border-top: 1px solid rgba(244, 235, 221, 0.15); }
  body[data-theme="paper"] .chrome-bottom { background: var(--paper); border-top-color: rgba(27, 20, 16, 0.15); }
  .prepared-by { display: none; }
  .chrome-label { display: none; }
  .bc-logo { height: 18px; }
  .client-logo { height: 30px; }
  .x-mark { width: 13px; height: 13px; }
  .chrome-index span:first-of-type { display: none; }
  .chrome-index { padding: 0 10px; }
  .slide { padding: 16px var(--gutter) 24px; }
  .findings, .pillars, .roadmap, .tiers, .gap-stats, .paths { grid-template-columns: minmax(0, 1fr); }
  .finding, .finding:nth-child(n + 4) { grid-column: auto; }
  .cform, .sched { grid-template-columns: minmax(0, 1fr); }
  .rep { grid-template-columns: minmax(0, 1fr); }
  .rep img { max-width: 180px; }
  .index-list { grid-template-columns: minmax(0, 1fr); }
  .compare { height: 360px; }
  .browser { height: 74vh; min-height: 480px; }
  .step-nav .nav-btn span { display: none; }
  .nav-btn { padding: 0 14px; }
}
@media (max-width: 420px) {
  .chrome-index .mono { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress span { transition: none; }
}

/* Slide 9: center the shorter column within the visible stage. */
@media (min-width: 901px) {
  .close-grid { grid-template-rows: minmax(0, 1fr); }
  .close-copy { align-self: safe center; }
}

/* ---------- G5 whole-composition display standard ----------
   The entire meaningful group (kicker, heading, lead, body, cards, notes)
   centers inside the stage between the fixed masthead and footer when it
   fits; overflow-safe alignment falls back to natural top flow so tall
   content keeps scrolling from the top. No font, copy or asset changes. */
.slide-scroll:not(.cover-grid):not(.gap-grid):not(.flagship):not(.close-grid) {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
.slide-scroll.gap-grid { align-content: safe center; }