/* Konicom, Inc. — Brandcore website & growth proposal.
   One system: aubergine night, Konicom purple, published amber, cleanroom paper. */

@font-face { font-family: 'Plus Jakarta Sans'; src: url('assets/fonts/plus-jakarta-sans-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('assets/fonts/plus-jakarta-sans-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('assets/fonts/plus-jakarta-sans-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('assets/fonts/plus-jakarta-sans-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('assets/fonts/plus-jakarta-sans-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('assets/fonts/plus-jakarta-sans-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; 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; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --night-900: #120D19;
  --night-800: #1B1426;
  --night-700: #231A31;
  --chrome: #1E1729;
  --paper: #F6F2EB;
  --paper-edge: #E4DBCD;
  --ink: #17111F;
  --ink-soft: #3E3449;
  --cream: #F6F2EB;
  --cream-soft: #D6CCE3;
  --lavender: #E4CFFF;
  --amber-glow: #FFB357;
  --amber: #FB8903;
  --plum: #4B1F6B;
  --plum-logo: #5A2A78;
  --brand-ink: #2B1640;
  --umber: #6B3A00;
  --danger: #A61E22;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: #0B0810;
  color: var(--cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100dvh; }
button, input, a { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
code { font-family: var(--font-mono); font-size: .92em; color: var(--umber); }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg[viewBox="0 0 24 24"] { flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Themes ---------- */
.theme-night {
  --text: var(--cream);
  --text-soft: #CFC3DD;
  --label: var(--lavender);
  --accent-text: var(--amber-glow);
  --rule: rgba(246, 242, 235, 0.15);
  --card-bg: rgba(255, 255, 255, 0.045);
  --card-edge: rgba(246, 242, 235, 0.14);
  --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  --em-from: #E4CFFF;
  --em-to: #FFB357;
  --num-bg: rgba(255, 179, 87, 0.12);
  --num-edge: rgba(255, 179, 87, 0.55);
  --num-text: var(--amber-glow);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(90, 42, 120, 0.36) 0%, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(251, 137, 3, 0.06) 0%, transparent 60%),
    linear-gradient(165deg, var(--night-900) 0%, var(--night-800) 100%);
  color: var(--text);
}
.theme-paper {
  --text: var(--ink);
  --text-soft: #4B4056;
  --label: var(--plum);
  --accent-text: var(--umber);
  --rule: rgba(23, 17, 31, 0.14);
  --card-bg: #FFFFFF;
  --card-edge: var(--paper-edge);
  --card-shadow: 0 16px 36px rgba(43, 22, 64, 0.08);
  --em-from: #5A2A78;
  --em-to: #8A4300;
  --num-bg: #F1E8F8;
  --num-edge: rgba(75, 31, 107, 0.32);
  --num-text: var(--plum);
  background:
    radial-gradient(90% 70% at 100% 0%, #FFFFFF 0%, transparent 55%),
    var(--paper);
  color: var(--text);
}

/* ---------- Deck & slides ---------- */
.deck { position: relative; width: 100%; background: var(--night-900); }
.slide {
  position: relative;
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(22px, 3.2vw, 40px) clamp(18px, 4vw, 48px) calc(78px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
}
.slide::-webkit-scrollbar { display: none; }
.slide.active { display: flex; }

/* Fluid type scale: wide desktop uses frame height, ultrawide gets a width nudge. */
.slide {
  --body: clamp(16.2px, max(2.7cqh, 1.1vw - 3px), 22px);
  --body-tight: clamp(16px, max(2.6cqh, 1.02vw - 3px), 20px);
  --lead: clamp(17px, max(2.8cqh, 1.2vw - 3px), 23px);
  --h2: clamp(30px, max(4.6cqh, 2.4vw), 54px);
  --h3: clamp(21px, 3.6cqh, 32px);
  --h3-sm: clamp(18px, 2.8cqh, 23px);
  --label: clamp(13px, 2.05cqh, 15px);
  --caption: clamp(13px, 2cqh, 14.5px);
  --gap: clamp(12px, 2cqh, 22px);
  --pad: clamp(12px, 2cqh, 20px);
}

/* ---------- Top chrome + slide header ---------- */
.slide-head {
  position: relative;
  z-index: 3;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: clamp(44px, 6.2cqh, 58px);
  padding: 0 14px 0 9px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(228, 219, 205, 0.9), 0 10px 24px rgba(0, 0, 0, 0.18);
}
.brand-chip img { height: 80%; width: auto; }
.brand-chip-text { display: grid; gap: 3px; padding-left: 10px; border-left: 1px solid var(--paper-edge); line-height: 1; }
.brand-chip-text b { font-weight: 800; font-size: clamp(15px, 2.2cqh, 19px); letter-spacing: 0.06em; color: var(--brand-ink); }
.brand-chip-text small { font-family: var(--font-mono); font-weight: 500; font-size: clamp(10.5px, 1.35cqh, 12px); letter-spacing: 0.14em; color: var(--plum-logo); }
.head-meta { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.section-label { font-weight: 500; color: var(--text-soft); }
.folio { font-weight: 700; color: var(--accent-text); padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }

/* ---------- Type ---------- */
.eyebrow, .kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--label);
}
.eyebrow::before, .kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--plum-logo), var(--amber));
}
.theme-night .eyebrow::before, .theme-night .kicker::before { background: linear-gradient(90deg, #C8A6F5, var(--amber)); }
h1 { font-weight: 800; font-size: clamp(40px, max(8.4cqh, 4.6vw), 82px); line-height: 1.01; letter-spacing: -0.025em; color: var(--text); }
h2 { font-weight: 800; font-size: var(--h2); line-height: 1.055; letter-spacing: -0.024em; color: var(--text); }
h3 { font-weight: 700; font-size: var(--h3); line-height: 1.2; letter-spacing: -0.014em; color: var(--text); }
h1 em, h2 em { font-style: normal; color: var(--em-from); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  h1 em, h2 em {
    background-image: linear-gradient(92deg, var(--em-from) 0%, var(--em-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
.stop { margin-left: -0.045em; }
.lead { font-size: var(--lead); line-height: 1.5; color: var(--text-soft); max-width: 60ch; }
.nowrap { white-space: nowrap; }
.num-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: clamp(30px, 4.5cqh, 42px);
  height: clamp(30px, 4.5cqh, 42px);
  border-radius: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(12px, 1.65cqh, 15px);
  letter-spacing: 0.04em;
  color: var(--num-text);
  background: var(--num-bg);
  box-shadow: inset 0 0 0 1px var(--num-edge);
}

/* ---------- Slide body + intros ---------- */
.slide-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); padding-top: clamp(12px, 2cqh, 22px); }
.slide-intro { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr); gap: clamp(24px, 3.2vw, 58px); align-items: end; }
.slide-intro > div { display: grid; gap: clamp(6px, 1vh, 12px); }
.slide-intro .lead { padding-bottom: 2px; }
.source-line { flex: none; font-family: var(--font-mono); font-size: var(--caption); line-height: 1.45; letter-spacing: 0.02em; color: var(--text-soft); opacity: .86; }

/* ---------- Cover ---------- */
.slide.cover {
  padding: 0;
  min-height: 100dvh;
  overflow: hidden;
  display: none;
  background: #0B0710;
}
.slide.cover.active { display: block; }
.cover-stage { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.cover-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  gap: 0;
  padding-left: 40%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 66% 46%, rgba(90, 42, 120, .42), transparent 68%),
    radial-gradient(30% 30% at 68% 44%, rgba(251, 137, 3, .14), transparent 70%),
    #0B0710;
}
.cover.no-webgl .cover-fallback { opacity: 1; }
.cover.no-webgl .cover-stage { display: none; }
.fallback-platter {
  position: relative;
  width: min(40vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(246,242,235,.10) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 38% 32%, #6B3C8A 0%, #3A2550 34%, #1B1426 68%, #0B0710 100%);
  box-shadow: 0 0 0 1px rgba(255,179,87,.32), 0 0 100px rgba(90,42,120,.45), inset 0 0 70px rgba(0,0,0,.62);
}
.fallback-platter::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(255,179,87,.38); }
.fallback-platter img { position: relative; z-index: 1; width: 62%; height: auto; filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); }
.cover-fallback p { display: none; }
.cover-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,7,16,.97) 0%, rgba(11,7,16,.9) 30%, rgba(11,7,16,.48) 48%, rgba(11,7,16,.1) 60%, rgba(11,7,16,0) 70%),
    linear-gradient(0deg, rgba(11,7,16,.96) 0%, rgba(11,7,16,.35) 12%, transparent 30%),
    linear-gradient(180deg, rgba(11,7,16,.72) 0%, transparent 18%);
}
.cover-chrome { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 3.2vh, 30px) clamp(20px, 3.6vw, 52px); }
.cover-collab { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); max-width: 100%; }
.brandcore-badge-logo { height: 26px; width: auto; }
.cover-collab-sep { font-size: 12px; opacity: .55; }
.cover-collab-label { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.cover-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #CDBBE0; white-space: nowrap; }
.cover-main { position: relative; z-index: 3; display: flex; align-items: center; min-height: 100dvh; padding: clamp(90px, 12vh, 140px) clamp(20px, 3.6vw, 52px) 90px; }
.cover-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.9vh, 20px); width: min(51%, 720px); }
.cover h1 { max-width: 17ch; }
.cover .lead { max-width: 52ch; }
.cover .eyebrow { color: var(--amber-glow); }
.fact-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.fact-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font-weight: 600; font-size: clamp(13px, 1.55cqh, 15px); color: var(--cream); background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(246,242,235,.19); }
.fact-chips svg { width: 1.15em; height: 1.15em; color: var(--amber-glow); }
.fact-chips li.is-key { background: rgba(255,179,87,.13); box-shadow: inset 0 0 0 1px rgba(255,179,87,.58); }
.prepared { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .11em; text-transform: uppercase; color: #CDBBE0; margin-top: 2px; }
.cover-foot { position: absolute; z-index: 4; left: clamp(20px, 3.6vw, 52px); right: clamp(20px, 3.6vw, 52px); bottom: clamp(18px, 3vh, 30px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cover-cue { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-glow); }
.cover-cue svg { width: 15px; height: 15px; }
.cover-foot-note { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #B7A3CB; }

/* ---------- Shared browser frame ---------- */
.browser, .case-frame { margin: 0; display: flex; flex-direction: column; border-radius: 15px; overflow: hidden; background: var(--chrome); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 26px 60px rgba(0,0,0,.34); }
.theme-paper .browser, .theme-paper .case-frame { box-shadow: 0 0 0 1px rgba(43,22,64,.16), 0 28px 60px rgba(43,22,64,.22); }
.browser-bar { display: flex; align-items: center; gap: 12px; height: clamp(32px, 4.4cqh, 40px); padding: 0 12px; background: var(--chrome); border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.browser-dots { display: inline-flex; gap: 6px; }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.browser-dots i:nth-child(2) { background: #FEBC2E; }
.browser-dots i:nth-child(3) { background: #28C840; }
.browser-url { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 360px; height: 66%; margin: 0 auto; padding: 0 12px; border-radius: 7px; background: rgba(255,255,255,.06); font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .01em; color: #D9CCE7; white-space: nowrap; overflow: hidden; }
.browser-tag { font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-glow); white-space: nowrap; }
.browser-tag.is-before { color: var(--cream-soft); }

/* ---------- 02 audit ---------- */
.audit-body { gap: clamp(6px, 1vh, 10px); }
.audit-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(22px, 3vw, 50px); min-height: 0; align-items: start; }
.audit-visuals { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.browser-audit .browser-view { height: clamp(200px, 42cqh, 460px); overflow: hidden; background: #0F0B15; }
.browser-audit .browser-view img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.audit-mobile { position: absolute; right: 8px; bottom: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.audit-mobile-copy { display: flex; gap: 5px; align-items: baseline; padding: 4px 8px; border-radius: 6px; background: rgba(18,13,25,.92); color: #EADFF5; font-family: var(--font-mono); }
.audit-mobile-copy b { color: var(--amber-glow); font-size: 12px; letter-spacing: .04em; }
.audit-mobile-copy span { font-size: 10px; letter-spacing: .04em; color: #CBBBE0; }
.phone-frame { position: relative; flex: none; border-radius: 24px; background: #0E0913; box-shadow: inset 0 0 0 1px rgba(246,242,235,.22), 0 22px 46px rgba(0,0,0,.42); overflow: hidden; }
.phone-audit { width: clamp(84px, 6.4vw, 112px); aspect-ratio: 390 / 720; }
.phone-notch { position: absolute; z-index: 3; top: 5px; left: 50%; width: 36%; height: 5px; border-radius: 999px; background: rgba(10,7,14,.9); transform: translateX(-50%); }
.phone-screen { width: 100%; height: 100%; overflow: hidden; background: #F6F2EB; }
.phone-audit .phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.audit-caption { font-family: var(--font-mono); font-size: var(--caption); line-height: 1.35; color: var(--text-soft); padding-right: clamp(78px, 8vw, 112px); }
.audit-findings { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.finding-list { display: grid; }
.finding { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: clamp(7px, 1.25cqh, 12px) 0; border-top: 1px solid var(--rule); }
.finding:first-child { border-top: 0; padding-top: 0; }
.severity { align-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 3px 7px; border-radius: 999px; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: #7A1215; background: #F3D7D4; box-shadow: inset 0 0 0 1px rgba(166,30,34,.3); white-space: nowrap; }
.severity.is-critical { color: #FFFFFF; background: var(--danger); box-shadow: none; }
.finding h3 { font-size: var(--h3-sm); margin-bottom: 2px; }
.finding p { font-size: var(--body); line-height: 1.4; color: var(--text-soft); }
.already-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 9px 14px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--paper-edge); }
.already-label { font-family: var(--font-mono); font-weight: 700; font-size: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--plum); }
.already-strip ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.already-strip li { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink); }
.already-strip svg { width: 1.1em; height: 1.1em; color: var(--plum); }

/* ---------- 03 gap ---------- */
.gap-body { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(24px, 3.6vw, 60px); align-items: stretch; }
.gap-copy { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); min-width: 0; }
.gap-copy h2 { font-size: clamp(28px, max(4.2cqh, 2.2vw), 48px); }
.gap-copy .lead { max-width: 56ch; }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.path { border-radius: 14px; padding: 11px 13px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(246,242,235,.12); }
.path.is-next { background: rgba(255,179,87,.1); box-shadow: inset 0 0 0 1px rgba(255,179,87,.46); }
.path-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.path-label span { font-weight: 500; font-size: 10.5px; letter-spacing: .08em; color: #B7A3CB; }
.path.is-next .path-label { color: var(--amber-glow); }
.path ol { display: grid; gap: 4px; }
.path li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; font-size: clamp(16.5px, 2.6cqh, 18px); line-height: 1.3; color: #D6CBE2; }
.path li > span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--cream); background: rgba(255,255,255,.1); }
.path.is-next li > span { background: rgba(255,179,87,.22); color: var(--amber-glow); }
.gap-photo { position: relative; margin: 0; border-radius: 18px; overflow: hidden; min-height: 240px; background: #1B1426; }
.gap-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.gap-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(11,7,16,.86) 100%); }
.gap-photo figcaption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: #EADFF5; }
.photo-stamp { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--amber); color: #17111F; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.gap-source { flex: none; padding: 0 2px 2px; font-family: var(--font-mono); font-size: 13px; line-height: 1.4; color: #B7A3CB; }

/* ---------- 04 flagship / concept ---------- */
.flagship-body { gap: clamp(8px, 1.4vh, 14px); }
.concept { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.concept-stage { position: relative; padding-right: clamp(160px, 14vw, 220px); min-height: 0; }
.concept-browser { width: 100%; }
.site { container-type: inline-size; background: #FBF7F0; color: #17111F; max-height: none; overflow: auto; overscroll-behavior: contain; font-size: clamp(13.5px, 1.25vw, max(15px, 1.78cqh)); }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .7em .9em; background: #FFFFFF; border-bottom: 1px solid #E7DED0; position: sticky; top: 0; z-index: 3; }
.site-brand { display: inline-flex; align-items: center; gap: .55em; min-width: 0; }
.site-brand img { width: 1.95em; height: 1.5em; object-fit: contain; }
.site-brand span { display: grid; gap: .14em; line-height: 1; }
.site-brand b { font-size: 1.02em; letter-spacing: .1em; font-weight: 800; color: #2B1640; }
.site-brand small { font-family: var(--font-mono); font-size: .54em; letter-spacing: .18em; color: #5A2A78; }
.site-tabs { display: flex; gap: .18em; flex-wrap: nowrap; }
.site-tab { border: 0; background: transparent; padding: .5em .65em; border-radius: 7px; font-weight: 700; font-size: .82em; color: #5D5268; cursor: pointer; white-space: nowrap; }
.site-tab:hover { background: #F4EBFF; color: #4B1F6B; }
.site-tab.is-on { background: #2B1640; color: #FFFFFF; }
.site-panel { display: none; padding: .9em 1em 1em; }
.site-panel.is-on { display: block; }
.site-panel[hidden] { display: none; }
.site-hero { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 1em; align-items: stretch; }
.site-hero-copy { display: flex; flex-direction: column; gap: .55em; justify-content: center; }
.site-kicker { font-family: var(--font-mono); font-size: max(12px, .62em); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A4300; }
.site-hero h4 { font-size: clamp(24px, 3.5cqw, 34px); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; color: #17111F; }
.site-hero h4 span { color: #5A2A78; }
.site-hero-copy > p { font-size: .92em; line-height: 1.4; color: #4B4056; max-width: 34ch; }
.site-cta-row { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; margin-top: .2em; }
.site-btn { border: 0; border-radius: 7px; background: var(--amber); color: #17111F; font-weight: 800; font-size: .85em; padding: .72em .85em; cursor: pointer; min-height: 34px; }
.site-btn:hover { background: #FF9A24; }
.site-call { font-size: .8em; font-weight: 700; color: #2B1640; text-decoration: underline; text-underline-offset: 2px; }
.site-photo { position: relative; margin: 0; border-radius: 9px; overflow: hidden; min-height: 150px; }
.site-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.site-photo figcaption { position: absolute; left: .5em; bottom: .5em; padding: .3em .5em; border-radius: 4px; background: rgba(18,13,25,.78); color: #F6F2EB; font-size: max(11.5px, .6em); font-family: var(--font-mono); letter-spacing: .03em; }
.site-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .7em; padding-top: .65em; border-top: 1px solid #E7DED0; }
.site-steps span { display: grid; grid-template-columns: auto 1fr; gap: .45em; align-items: center; font-size: max(13px, .78em); line-height: 1.25; color: #4B4056; }
.site-steps b { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #F1E8F8; color: #4B1F6B; font-family: var(--font-mono); font-size: .85em; }
.site-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; margin-bottom: .6em; }
.site-panel-head h4 { font-size: 1.35em; line-height: 1.1; letter-spacing: -.02em; font-weight: 800; color: #17111F; }
.site-panel-head p { font-size: max(12.5px, .76em); line-height: 1.3; color: #5D5268; text-align: right; max-width: 30ch; }
.symptom-chips { display: flex; flex-wrap: wrap; gap: .35em; margin-bottom: .6em; }
.chip { border: 0; border-radius: 999px; padding: .5em .7em; background: #FFFFFF; box-shadow: inset 0 0 0 1px #D9CFC0; color: #3E3449; font-weight: 700; font-size: max(12.5px, .76em); cursor: pointer; }
.chip:hover { box-shadow: inset 0 0 0 2px #8B63AE; }
.chip.is-on { background: #2B1640; color: #FFFFFF; box-shadow: none; }
.site-result { display: grid; grid-template-columns: 1fr auto; gap: .3em .9em; align-items: start; padding: .8em .9em; border-radius: 9px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7DED0; }
.result-head { display: grid; gap: .1em; }
.result-tag { font-family: var(--font-mono); font-size: max(11.5px, .6em); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A4300; }
.result-head h5 { font-size: 1.1em; line-height: 1.15; color: #17111F; }
.result-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); font-size: .82em; font-weight: 700; color: #2B1640; text-align: right; max-width: 20ch; }
.result-note { font-size: max(13px, .76em); line-height: 1.35; color: #4B4056; grid-column: 1 / -1; }
.result-next { grid-column: 1 / -1; display: flex; gap: .5em; align-items: baseline; font-size: max(13px, .76em); line-height: 1.35; color: #3E3449; padding-top: .45em; border-top: 1px solid #EEE6DA; }
.result-next b { color: #8A4300; font-family: var(--font-mono); font-size: .86em; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.site-inline-note { margin-top: .55em; font-size: max(12px, .64em); line-height: 1.35; color: #6D6179; }
.price-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.price-card { display: grid; gap: .15em; padding: .65em .7em; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7DED0; }
.price-card p { font-size: max(12px, .66em); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #5A2A78; }
.price-card strong { font-size: 1.12em; line-height: 1.1; color: #17111F; }
.price-card span { font-size: max(12px, .66em); line-height: 1.3; color: #5D5268; }
.ship-steps { display: grid; gap: .4em; }
.ship-steps li { display: grid; grid-template-columns: 2em 1fr; gap: .6em; align-items: start; padding: .55em .65em; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7DED0; }
.ship-steps li > span { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #F1E8F8; color: #4B1F6B; font-family: var(--font-mono); font-size: .8em; font-weight: 700; }
.ship-steps b { font-size: .86em; color: #17111F; }
.ship-steps p { font-size: max(13px, .75em); line-height: 1.3; color: #5D5268; margin-top: .1em; }
.ship-meta { display: flex; gap: 1em; flex-wrap: wrap; margin-top: .55em; }
.ship-meta a, .ship-meta span { display: inline-flex; align-items: center; gap: .35em; font-size: max(13px, .75em); font-weight: 700; color: #2B1640; text-decoration: none; }
.ship-meta svg { width: 1.1em; height: 1.1em; color: #8A4300; }
.phone-concept { position: absolute; right: 0; bottom: 4px; width: clamp(145px, 12vw, 178px); aspect-ratio: 390 / 760; max-height: calc(100% - 4px); z-index: 4; }
.phone-concept .phone-screen { display: flex; flex-direction: column; gap: 6px; padding: 15px 12px 11px; background: #F6F2EB; }
.phone-brand { display: flex; align-items: center; gap: 5px; }
.phone-brand img { width: 28px; height: 21px; object-fit: contain; }
.phone-brand b { font-size: 12px; letter-spacing: .1em; color: #2B1640; }
.phone-kicker { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A4300; }
.phone-concept h5 { font-size: 20px; line-height: 1.02; letter-spacing: -.03em; font-weight: 800; color: #17111F; }
.phone-concept h5 span { color: #5A2A78; }
.phone-sub { display: none; font-size: 12px; line-height: 1.35; color: #4B4056; }
.phone-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.phone-chips span { padding: 4px 6px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #D9CFC0; font-size: 10px; font-weight: 700; color: #3E3449; }
.phone-call { display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 7px; background: var(--amber); color: #17111F; font-size: 11.5px; font-weight: 800; text-decoration: none; margin-top: auto; }
.phone-price { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 6px 7px; border-radius: 6px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7DED0; }
.phone-price b { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #5A2A78; }
.phone-price span { font-size: 12.5px; font-weight: 800; color: #17111F; }
.concept-detail { display: none; }
.concept-detail h3 { font-size: 22px; }
.detail-price { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--plum); }
.concept-detail p { font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.detail-next { display: flex; flex-wrap: wrap; gap: 6px; font-size: 16px !important; }
.detail-next b { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--umber); }

/* ---------- 05 system ---------- */
.system-body { gap: clamp(10px, 1.6vh, 16px); }
.system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); min-height: 0; }
.system-card { display: flex; flex-direction: column; gap: 7px; padding: clamp(11px, 1.8cqh, 18px); border-radius: 15px; background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow); min-width: 0; }
.system-card h3 { font-size: clamp(21px, 3.5cqh, 28px); line-height: 1.15; }
.system-card p { font-size: var(--body); line-height: 1.38; color: var(--text-soft); }
.system-card .outcome { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--label); line-height: 1.25; color: var(--amber-glow); }
.system-card .outcome svg { width: 1.1em; height: 1.1em; }
.system-card .num-badge { width: 28px; height: 28px; font-size: 12px; border-radius: 9px; }
.system-body > .source-line { margin-top: 4px; }

/* ---------- 06 proof ---------- */
.proof-body { gap: clamp(10px, 1.6vh, 18px); }
.comparison { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: clamp(18px, 2.6vw, 44px); min-height: 0; align-items: center; }
.case-frame { min-width: 0; }
.compare-view { --pos: 50%; position: relative; overflow: hidden; height: clamp(230px, 40cqh, 400px); background: #0F0B15; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.compare-view img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; pointer-events: none; -webkit-user-drag: none; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-label { position: absolute; z-index: 3; top: 12px; padding: 5px 11px; border-radius: 999px; font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); background: rgba(18,13,25,.9); box-shadow: inset 0 0 0 1px rgba(246,242,235,.24); pointer-events: none; }
.compare-label.is-before { left: 12px; }
.compare-label.is-after { right: 12px; color: var(--amber-glow); box-shadow: inset 0 0 0 1px rgba(255,179,87,.6); }
.compare-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos); width: 48px; margin: 0 0 0 -24px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--amber-glow); cursor: ew-resize; touch-action: none; }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, #FFD08A, #FFF7E8 50%, #E4CFFF); box-shadow: 0 0 18px rgba(255,179,87,.7); }
.compare-grip { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; font-size: 24px; background: #1B1426; box-shadow: inset 0 0 0 2px var(--amber-glow), 0 8px 24px rgba(0,0,0,.5); }
.compare-handle:focus-visible { outline: none; }
.compare-handle:focus-visible .compare-grip { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.case-frame figcaption { padding: 9px 13px; background: var(--chrome); border-top: 1px solid rgba(255,255,255,.08); font-weight: 500; font-size: var(--caption); line-height: 1.35; color: #D6CBE2; }
.compare-notes { display: grid; gap: clamp(10px, 1.8cqh, 18px); align-content: center; min-width: 0; }
.compare-note { display: grid; gap: 6px; padding: clamp(12px, 2.1cqh, 22px) clamp(14px, 1.6vw, 24px); border-radius: 15px; background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow); }
.compare-note p:not(.note-tag) { font-weight: 600; font-size: var(--lead); line-height: 1.38; color: var(--text); }
.compare-note .note-tag { font-family: var(--font-mono); font-weight: 700; font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.compare-note.is-after { box-shadow: inset 0 0 0 2px rgba(251,137,3,.62), var(--card-shadow); }
.compare-note.is-after .note-tag { color: var(--accent-text); }

/* ---------- 07 roadmap ---------- */
.roadmap-body { gap: clamp(10px, 1.5vh, 16px); }
.roadmap-intro h2 { font-size: clamp(28px, max(4.2cqh, 2.2vw), 46px); }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); min-height: 0; }
.phase { display: flex; flex-direction: column; gap: 7px; padding: clamp(12px, 1.9cqh, 20px); border-radius: 15px; background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow); }
.phase.is-featured { --text: var(--cream); --text-soft: var(--cream-soft); --accent-text: var(--amber-glow); --rule: rgba(246,242,235,.18); background-color: var(--night-800); background-image: linear-gradient(var(--night-800), var(--night-800)), linear-gradient(120deg, #7A45A0, var(--amber)); background-origin: border-box; background-clip: padding-box, border-box; border: 1px solid transparent; }
.phase-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phase-days { padding: 4px 8px; border-radius: 999px; font-family: var(--font-mono); font-weight: 700; font-size: var(--caption); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.phase h3 { font-size: clamp(21px, 3.4cqh, 26px); }
.phase > p { font-size: var(--body-tight); line-height: 1.37; color: var(--text-soft); }
.phase ul { display: grid; gap: 5px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); }
.phase li { display: grid; grid-template-columns: auto 1fr; gap: 6px; font-size: clamp(15.5px, 1.95cqh, 17px); line-height: 1.32; color: var(--text); }
.phase li svg { width: 1.1em; height: 1.1em; margin-top: .12em; color: var(--accent-text); stroke-width: 2.4; }
.roadmap-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.06); font-family: var(--font-mono); font-weight: 500; font-size: var(--caption); line-height: 1.4; letter-spacing: .02em; color: var(--cream-soft); }
.roadmap-strip b { color: var(--amber-glow); }

/* ---------- 08 engagement ---------- */
.engagement-body { gap: clamp(10px, 1.5vh, 16px); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); min-height: 0; }
.tier { display: flex; flex-direction: column; gap: 7px; padding: clamp(13px, 2cqh, 22px); border-radius: 16px; background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow); }
.tier.is-recommended { background-color: #2B1640; background-image: linear-gradient(#2B1640, #2B1640), linear-gradient(120deg, #7A45A0, var(--amber)); background-origin: border-box; background-clip: padding-box, border-box; border: 1px solid transparent; color: var(--cream); }
.tier.is-recommended h3, .tier.is-recommended .tier-for { color: var(--cream); }
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier-tag { font-family: var(--font-mono); font-size: var(--caption); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); }
.tier.is-recommended .num-badge { color: var(--amber-glow); background: rgba(255,179,87,.14); box-shadow: inset 0 0 0 1px rgba(255,179,87,.6); }
.tier.is-recommended .tier-tag { color: var(--amber-glow); }
.tier h3 { font-size: clamp(22px, 3.4cqh, 29px); }
.tier-for { font-size: var(--body-tight); line-height: 1.35; color: var(--text-soft); }
.tier ul { display: grid; gap: 6px; margin-top: 4px; }
.tier li { display: grid; grid-template-columns: auto 1fr; gap: 6px; font-size: var(--body-tight); line-height: 1.36; color: var(--text); }
.tier li svg { width: 1.1em; height: 1.1em; margin-top: .12em; color: var(--accent-text); stroke-width: 2.4; }
.tier.is-recommended li { color: #E8DBF6; }
.engagement-note { font-family: var(--font-mono); font-size: var(--caption); line-height: 1.45; color: var(--text-soft); }
.engagement-note::before { content: "↳ "; color: var(--plum); font-weight: 700; }

/* ---------- 09 close ---------- */
.split-close { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 3.4vw, 54px); align-items: stretch; }
.close-copy { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 13px); min-width: 0; }
.close-copy h2 { font-size: clamp(28px, max(4.3cqh, 2.25vw), 46px); }
.close-copy .lead { max-width: 52ch; }
.partner-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(12px, 1.8cqh, 20px); align-items: start; margin-top: 2px; padding: clamp(12px, 1.8cqh, 18px); border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(246,242,235,.15), 0 20px 44px rgba(0,0,0,.25); }
.partner-avatar-wrap { width: clamp(110px, 13.5cqh, 142px); aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.38); }
.partner-avatar-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.partner-details { display: grid; gap: 4px; min-width: 0; }
.partner-name { font-weight: 800; font-size: clamp(21px, 3cqh, 29px); letter-spacing: -.015em; line-height: 1.1; color: var(--cream); }
.partner-role { font-family: var(--font-mono); font-weight: 500; font-size: var(--label); letter-spacing: .09em; text-transform: uppercase; color: var(--amber-glow); }
.partner-quote { margin-top: 2px; font-weight: 500; font-size: clamp(16px, 2.6cqh, 19px); line-height: 1.45; color: #E1D5EE; }
.partner-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.partner-contact li { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 999px; font-family: var(--font-mono); font-weight: 500; font-size: clamp(13px, 1.55cqh, 14.5px); color: var(--cream); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(246,242,235,.18); white-space: nowrap; }
.partner-contact a { color: inherit; text-decoration: none; min-height: 26px; display: inline-flex; align-items: center; }
.partner-contact a:hover { text-decoration: underline; }
.partner-contact svg { width: 1.1em; height: 1.1em; color: var(--amber-glow); }
.partner-brand-signoff { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14); width: 100%; }
.signoff-brandcore-logo { height: 28px; width: auto; }
.signoff-brandcore-meta { font-size: var(--caption); letter-spacing: .02em; color: #CDBBE0; }
.request { --text: var(--ink); --text-soft: var(--ink-soft); --label: var(--plum); display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 13px); min-width: 0; align-self: start; padding: clamp(16px, 2.4cqh, 30px); border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 70px rgba(0,0,0,.42); }
.request .kicker::before { background: linear-gradient(90deg, var(--plum-logo), var(--amber)); }
.request h3 { font-weight: 800; font-size: clamp(30px, 4.8cqh, 48px); letter-spacing: -.02em; line-height: 1.04; }
.request-intro { font-size: var(--body-tight); line-height: 1.4; color: var(--ink-soft); }
.screen-request { display: grid; gap: clamp(8px, 1.2vh, 12px); }
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.suggestions button { min-height: clamp(44px, 5.4cqh, 52px); padding: 8px 10px; border: 0; border-radius: 11px; background: #FFFFFF; color: var(--ink); font-weight: 700; font-size: clamp(14px, 1.8cqh, 16px); cursor: pointer; box-shadow: inset 0 0 0 1px #D9CFC0; transition: box-shadow 160ms ease, background 160ms ease; }
.suggestions button:hover { box-shadow: inset 0 0 0 2px var(--plum-logo); background: #FBF8FF; }
.picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.picker-col { display: grid; gap: 5px; min-width: 0; }
.picker-col label { font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }
.date-control { display: flex; align-items: center; min-height: 46px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #D9CFC0; }
.date-control:focus-within { box-shadow: inset 0 0 0 2px var(--plum-logo); }
.date-control input { flex: 1; min-width: 0; height: 46px; padding: 0 2px 0 10px; border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; color-scheme: light; }
.date-control input:focus { outline: none; }
.date-control input::-webkit-calendar-picker-indicator { display: none; }
.date-control button { display: grid; place-items: center; width: 38px; height: 44px; border: 0; background: transparent; color: var(--plum); cursor: pointer; }
.date-icon { width: 18px; height: 18px; }
#picker-help { font-size: 14px; color: var(--ink-soft); }
#contact { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: clamp(48px, 6cqh, 58px); padding: 0 16px; border-radius: 12px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: clamp(15px, 1.95cqh, 18px); letter-spacing: .01em; text-decoration: none; box-shadow: 0 14px 30px rgba(251,137,3,.3); transition: background 160ms ease, transform 160ms ease; }
#contact:hover { background: #FF9A24; transform: translateY(-1px); }
#contact svg { width: 1.1em; height: 1.1em; stroke-width: 2.3; }
.request-note { font-size: var(--caption); line-height: 1.45; color: var(--ink-soft); }

/* ---------- Bottom chrome / controls / rail ---------- */
.progress { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 2px; background: rgba(246,242,235,.08); }
.progress i { display: block; height: 100%; width: 11.1%; background: linear-gradient(90deg, #7A45A0, var(--amber)); transition: width 420ms cubic-bezier(.22,1,.36,1); }
.rail { position: fixed; z-index: 45; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 9px; }
.rail button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(246,242,235,.26); cursor: pointer; transition: height 200ms ease, background 200ms ease; }
.rail button:hover { background: rgba(255,179,87,.7); }
.rail button.on { height: 24px; background: var(--amber-glow); }
.controls { position: fixed; z-index: 60; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 2px; padding: 5px; transform: translateX(-50%); border-radius: 999px; background: rgba(18,13,25,.94); box-shadow: inset 0 0 0 1px rgba(246,242,235,.16), 0 14px 36px rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.controls button { display: inline-grid; place-items: center; min-width: 42px; height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--cream); cursor: pointer; }
.controls button:hover { background: rgba(255,255,255,.08); }
.controls .ui-icon { width: 19px; height: 19px; }
#counter { min-width: 58px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--amber-glow); }
#menu { border-left: 1px solid rgba(246,242,235,.16); border-radius: 0 999px 999px 0; padding: 0 13px; color: var(--lavender); }
.deck-meta { position: fixed; z-index: 40; left: clamp(18px, 2.4vw, 36px); right: clamp(18px, 2.4vw, 36px); bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; pointer-events: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: #B7A3CB; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--amber-glow); outline-offset: 2px; }
.request button:focus-visible, .request a:focus-visible { outline-color: var(--plum-logo); }

/* ---------- Index overlay ---------- */
.index-overlay { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,5,12,.88); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.index-overlay.open { opacity: 1; pointer-events: auto; }
.index-panel { width: min(940px, 94vw); max-height: 88dvh; overflow: auto; padding: clamp(18px, 3vw, 32px); border-radius: 20px; background: #17111F; box-shadow: inset 0 0 0 1px rgba(246,242,235,.16), 0 40px 100px rgba(0,0,0,.6); }
.index-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(246,242,235,.14); }
.index-head p { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #CDBBE0; }
#index-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--cream); cursor: pointer; }
.index-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.index-card { display: grid; gap: 4px; text-align: left; padding: 12px; border: 0; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--cream); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(246,242,235,.1); }
.index-card:hover { background: rgba(255,255,255,.1); }
.index-card .ic-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--amber-glow); }
.index-card .ic-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.index-card.on { box-shadow: inset 0 0 0 2px var(--amber-glow); }

/* ---------- Mobile top bar / desktop media split ---------- */
.mobile-bar { display: none; }

@media screen and (min-width: 1024px) {
  html, body { height: 100vh; overflow: hidden; }
  body { display: grid; place-items: center; padding: 44px 0 76px; background: radial-gradient(120% 90% at 50% 20%, #1D1428 0%, #0B0810 70%); }
  .deck { width: min(96vw, 1640px, calc((100vh - 120px) * 1.9)); height: min(calc(100vh - 120px), 920px); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 110px rgba(0,0,0,.6), 0 0 0 1px rgba(246,242,235,.1); }
  .slide { height: 100%; min-height: 0; container-type: size; padding: clamp(18px, 2.6vh, 28px) clamp(26px, 3.6vw, 58px) 64px; }
  .slide.cover { padding: 0; height: 100%; min-height: 0; }
  .cover-main { min-height: 100%; }
  .site { max-height: none; }
}

@media screen and (min-width: 1024px) and (max-width: 1320px) {
  .concept-stage { padding-right: 178px; }
  .phone-concept { width: 158px; }
  .finding { grid-template-columns: 70px minmax(0, 1fr); gap: 9px; }
  .audit-mobile-copy { font-size: 11.5px; }
}

@media screen and (max-width: 1023px) {
  .mobile-bar {
    position: fixed;
    z-index: 70;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: calc(54px + env(safe-area-inset-top, 0px));
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
    background: #120D19;
    border-bottom: 1px solid rgba(246,242,235,.16);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
  }
  .mobile-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mobile-brand img { width: 34px; height: 26px; object-fit: contain; }
  .mobile-brand span { display: grid; gap: 2px; line-height: 1; }
  .mobile-brand b { font-size: 13px; letter-spacing: .08em; color: var(--cream); }
  .mobile-brand small { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; color: #CDBBE0; }
  .mobile-state { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #CDBBE0; white-space: nowrap; }
  #mobile-count { color: var(--amber-glow); font-weight: 700; }
  body { padding-top: calc(54px + env(safe-area-inset-top, 0px)); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .slide {
    --body: 17px; --body-tight: 16.5px; --lead: 18px; --h2: clamp(30px, 6.4vw, 40px); --h3: 22px; --h3-sm: 19px; --label: 13px; --caption: 13px; --gap: 16px; --pad: 14px;
    display: none;
    min-height: calc(100dvh - 118px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 20px 18px 26px;
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior: auto;
  }
  .slide.active { display: flex; }
  .slide-head { display: none; }
  .slide.cover { display: none; min-height: calc(100dvh - 54px - env(safe-area-inset-top, 0px)); padding: 0; }
  .slide.cover.active { display: flex; }
  .progress { top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); height: 2px; }
  .rail { display: none; }
  .deck-meta { display: none; }
  .controls {
    left: 0; right: 0; bottom: 0;
    width: 100%; height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    transform: none; justify-content: center; gap: 0;
    border-radius: 0;
    background: #120D19;
    box-shadow: 0 -1px 0 rgba(246,242,235,.16);
    backdrop-filter: none;
  }
  .controls button { min-width: 52px; min-height: 46px; padding: 0 12px; }
  .controls .ui-icon { width: 21px; height: 21px; }
  #counter { min-width: 62px; font-size: 13.5px; }
  #menu { border-left: 1px solid rgba(246,242,235,.16); }
  .slide-intro { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .slide-intro .lead { max-width: none; }
  .source-line { font-size: 12px; }
  .slide-body { padding-top: 16px; gap: 16px; }
  h2 { line-height: 1.07; }
  .cover-main { min-height: calc(100dvh - 54px - env(safe-area-inset-top, 0px)); padding: 42vh 18px 26px; align-items: flex-start; }
  .cover-copy { width: 100%; gap: 13px; }
  .cover h1 { font-size: clamp(36px, 10.2vw, 50px); max-width: 20ch; }
  .cover .lead { font-size: 17px; max-width: none; }
  .cover-veil { background: linear-gradient(180deg, rgba(11,7,16,.62) 0%, rgba(11,7,16,.12) 26%, rgba(11,7,16,.9) 46%, #0B0710 72%); }
  .cover-chrome { display: none; }
  .cover-foot { display: none; }
  .cover-fallback { place-items: start center; padding: 18px 0 0; }
  .fallback-platter { width: min(70vw, 360px); }
  .cover-stage { height: 100%; }
  .fact-chips li { font-size: 13px; padding: 7px 10px; }
  .prepared { font-size: 11.5px; line-height: 1.5; }
  .audit-grid, .gap-body, .split-close { grid-template-columns: 1fr; }
  .audit-visuals { order: 2; }
  .audit-findings { order: 1; }
  .audit-mobile { order: 3; }
  .audit-mobile-copy { font-size: 12.5px; }
  .phone-audit { width: 92px; }
  .browser-audit .browser-view { height: auto; aspect-ratio: 16 / 10; }
  .finding { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .finding h3 { font-size: 19px; }
  .already-strip { margin-top: 2px; }
  .gap-photo { min-height: 260px; max-height: 380px; }
  .gap-source { position: static; font-size: 12px; }
  .path-grid { margin-top: 2px; }
  .path li { font-size: 16px; }
  .system-grid { grid-template-columns: 1fr 1fr; }
  .system-card { min-height: 150px; }
  .system-card h3 { font-size: 21px; }
  .comparison { grid-template-columns: 1fr; align-items: start; }
  .compare-view { height: auto; aspect-ratio: 4 / 3; }
  .compare-handle { width: 56px; margin-left: -28px; }
  .compare-label { top: 8px; font-size: 12px; }
  .compare-note p:not(.note-tag) { font-size: 17.5px; }
  .phases { grid-template-columns: 1fr; }
  .phase { min-height: 0; }
  .phase h3 { font-size: 22px; }
  .phase ul { margin-top: 2px; }
  .roadmap-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tiers { grid-template-columns: 1fr; }
  .tier { min-height: 0; }
  .tier h3 { font-size: 24px; }
  .concept-stage { padding-right: 0; }
  .phone-concept { display: none; }
  .concept-detail { display: grid; gap: 5px; padding: 14px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--paper-edge); }
  .concept-detail .kicker { margin-bottom: 2px; }
  .concept-detail .kicker::before { background: linear-gradient(90deg, var(--plum-logo), var(--amber)); }
  .site { font-size: 13.5px; }
  .site-panel-head { flex-direction: column; align-items: start; gap: 3px; }
  .site-panel-head p { text-align: left; max-width: none; }
  .site-hero { grid-template-columns: 1fr; }
  .site-photo { min-height: 150px; max-height: 190px; }
  .price-cards { grid-template-columns: 1fr 1fr; }
  .site-panel { padding: .8em .85em .9em; }
  .split-close { align-items: start; }
  .partner-card { grid-template-columns: auto minmax(0, 1fr); }
  .request { margin-top: 2px; }
  .request h3 { font-size: 36px; }
  .index-list { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 700px) {
  .slide { --h2: clamp(29px, 8.4vw, 38px); --lead: 17.5px; --body: 17px; }
  .slide-intro > div { gap: 7px; }
  .cover-main { padding-top: 35vh; }
  .cover h1 { font-size: clamp(35px, 10.4vw, 46px); }
  .cover .lead { font-size: 16.5px; }
  .cover-foot { display: none; }
  .cover-foot-note { font-size: 10.5px; }
  .fact-chips { gap: 7px; }
  .fact-chips li { font-size: 12.5px; }
  .audit-mobile { align-items: flex-start; }
  .phone-audit { width: 84px; }
  .browser-audit .browser-view { aspect-ratio: 4 / 3; }
  .finding { grid-template-columns: 1fr; gap: 4px; padding: 9px 0; }
  .severity { justify-self: start; }
  .already-strip { align-items: flex-start; gap: 8px; flex-direction: column; }
  .already-strip ul { gap: 5px 12px; }
  .already-strip li { font-size: 13px; }
  .audit-caption { font-size: 12px; }
  .gap-photo { min-height: 220px; max-height: 300px; }
  .path-grid { grid-template-columns: 1fr; }
  .path li { font-size: 16px; }
  .system-grid { grid-template-columns: 1fr; }
  .system-card { min-height: 0; }
  .system-card h3 { font-size: 21px; }
  .case-frame figcaption { font-size: 13px; }
  .phase li { font-size: 14.5px; }
  .tier h3 { font-size: 24px; }
  .tier li { font-size: 16px; }
  .partner-card { grid-template-columns: 1fr; }
  .partner-avatar-wrap { width: 112px; }
  .partner-contact li { flex: 1 1 100%; justify-content: flex-start; padding-left: 14px; }
  .partner-brand-signoff { flex-direction: column; align-items: flex-start; }
  .signoff-brandcore-logo { height: 26px; }
  .request h3 { font-size: 34px; }
  .suggestions, .picker-grid { grid-template-columns: 1fr; }
  .index-list { grid-template-columns: 1fr; }
  #mobile-section { display: none; }
  .site { font-size: 13.5px; }
  .price-cards { grid-template-columns: 1fr; }
  .site-hero h4 { font-size: 26px; }
  .site-steps { grid-template-columns: 1fr; gap: 6px; }
  .site-steps span { font-size: 13px; }
  .site-tabs { overflow-x: auto; scrollbar-width: none; max-width: 58%; }
  .site-tabs::-webkit-scrollbar { display: none; }
  .site-tab { padding: .45em .5em; font-size: .78em; }
  .site-brand small { display: none; }
  .result-price { grid-column: 1 / -1; grid-row: auto; text-align: left; max-width: none; }
  .result-head h5 { font-size: 1.2em; }
}

@media screen and (max-width: 380px) {
  .mobile-brand small { display: none; }
  .cover h1 { font-size: 33px; }
  .cover-copy { gap: 11px; }
  .controls button { min-width: 46px; padding: 0 9px; }
  #counter { min-width: 54px; }
  .slide { padding-left: 15px; padding-right: 15px; }
  .site-brand span { display: none; }
  .site-tabs { max-width: none; flex: 1; justify-content: flex-end; }
  .site-tab { padding: .42em .48em; font-size: .76em; }
}

/* ---------- Short desktop frames ---------- */
@media screen and (min-width: 1024px) and (max-height: 760px) {
  .slide { padding-top: 16px; padding-bottom: 58px; }
  .slide-head { padding-bottom: 8px; }
  .slide-intro > div { gap: 5px; }
  .slide-body { padding-top: 10px; gap: 9px; }
  .brand-chip { height: 42px; }
  .cover-main { padding-top: 100px; padding-bottom: 72px; }
  .cover-chrome { padding-top: 18px; }
  .cover-copy { gap: 11px; }
  .concept-stage { padding-right: 178px; }
  .phone-concept { width: 158px; bottom: 20px; }
  .audit-body { gap: 8px; }
  .finding { padding: 6px 0; }
  .already-strip { padding: 7px 12px; }
  .partner-card { padding: 11px; gap: 10px; }
  .partner-quote { font-size: 14px; }
  .request { padding: 14px 16px; gap: 8px; }
  .request h3 { font-size: 34px; }
  .roadmap-strip { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .cover-stage { display: block; }
}

/* ---------- Fallback if the module or WebGL is unavailable ---------- */
.cover.no-webgl .cover-stage, .cover-stage[data-webgl="unavailable"] { display: none; }

/* G4/G5 whole-composition vertical centering: fitting slide content centers in the stage
   between the fixed slide header and the bottom deck chrome; tall content keeps natural
   reachable top flow. Safe auto block margins collapse to zero when content overflows,
   so nothing is clipped or unreachable. No font, scale or dummy-space changes.
   Roadmap/engagement/close got this treatment in the G4 pass and passed. */
@media screen and (min-width: 1024px) {
  .roadmap-body, .engagement-body { justify-content: safe center; }
  .split-close > .close-copy, .split-close > .request { align-self: safe center; }
  /* Whole meaningful composition slides 2/4/5/6: intro + body + support centers as one. */
  .audit-body > :first-child, .flagship-body > :first-child,
  .system-body > :first-child, .proof-body > :first-child { margin-top: auto; }
  .audit-body > :last-child, .flagship-body > :last-child,
  .system-body > :last-child, .proof-body > :last-child { margin-bottom: auto; }
  /* Slide 3 gap: the two-column comparison is a grid; center its row as a group. */
  .gap-body { align-content: safe center; }
}