/* Shared components for /event and /portfolio. Tokens live in tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.012em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--terracotta); color: var(--paper-bright); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--focus-dark); }

.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: 100;
  background: var(--forest); color: var(--on-forest); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--s-4); }

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

.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section + .section:not(.on-dark):not(.band) { border-top: 1px solid var(--rule); }
.on-dark { background: var(--forest); color: var(--on-forest); }
.band { background: var(--paper-2); }

/* ---------- Prototype strip ---------- */
.proto-strip {
  background: var(--ink); color: rgba(241, 236, 224, 0.8);
  font-size: var(--text-xs); letter-spacing: 0.04em; text-align: center;
  padding: 6px var(--gutter);
}
.proto-strip a { color: var(--terracotta-light); }

/* ---------- Labels & chapter markers ---------- */
.label {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--terracotta-ink);
}
.on-dark .label { color: var(--terracotta-light); }
.label--dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}

.chapter {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--rule-strong);
  margin-bottom: var(--s-10);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.chapter__num { color: var(--terracotta-ink); font-variant-numeric: tabular-nums; }
.on-dark .chapter { border-top-color: var(--rule-dark); color: var(--on-forest-faint); }
.on-dark .chapter__num { color: var(--terracotta-light); }

.section-head { display: grid; gap: var(--s-5); max-width: 46rem; margin-bottom: var(--s-12); }
.section-head h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.section-head p { color: var(--ink-soft); font-size: var(--text-md); max-width: var(--measure); }
.on-dark .section-head p { color: var(--on-forest-soft); }

em.accent, .accent { font-style: italic; color: var(--terracotta-ink); }
.on-dark .accent { color: var(--terracotta-light); }

/* ---------- Placeholder marker (for Joe's review) ---------- */
.ph-tag {
  display: inline-block; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  padding: 5px 7px; border: 1px dashed currentColor; border-radius: 2px;
  color: var(--terracotta-ink); background: rgba(251, 248, 241, 0.7);
}
.on-dark .ph-tag, .video .ph-tag { color: var(--terracotta-light); background: rgba(21, 48, 42, 0.6); }

/* ---------- Top bar ---------- */
.topbar { border-bottom: 1px solid var(--rule); background: var(--paper); }
.topbar.on-dark { background: var(--forest); border-bottom-color: var(--rule-dark); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 68px; }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; min-width: 0; }
.brand__name { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1; white-space: nowrap; }
.brand__support {
  padding-left: var(--s-3); border-left: 1px solid var(--rule-strong);
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.on-dark .brand__support { border-left-color: var(--rule-dark); color: var(--on-forest-faint); }
.topbar__nav { display: flex; align-items: center; gap: var(--s-6); font-size: var(--text-sm); }
.topbar__nav a:not(.btn) { text-decoration: none; padding-block: var(--s-2); color: var(--ink-soft); }
.topbar__nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.on-dark .topbar__nav a:not(.btn) { color: var(--on-forest-soft); }
.on-dark .topbar__nav a:not(.btn):hover { color: var(--on-forest); }
.event-tag { font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.04em; text-align: right; }

@media (max-width: 640px) {
  .topbar__nav .nav-link { display: none; }
  .brand__support { display: none; }
  .event-tag { max-width: 12rem; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--forest); --btn-fg: var(--on-forest); --btn-bd: var(--forest);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: 0 var(--s-6);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn:hover { --btn-bg: var(--forest-3); --btn-bd: var(--forest-3); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bg: var(--paper-2); --btn-bd: var(--ink); }
.btn--terracotta { --btn-bg: var(--terracotta); --btn-bd: var(--terracotta); --btn-fg: var(--paper-bright); }
.btn--terracotta:hover { --btn-bg: var(--terracotta-hover); --btn-bd: var(--terracotta-hover); }
.btn--small { min-height: 42px; padding: 0 var(--s-4); font-size: var(--text-sm); }
.btn--large { min-height: 60px; padding: 0 var(--s-8); font-size: var(--text-md); }
.on-dark .btn--ghost { --btn-fg: var(--on-forest); --btn-bd: var(--rule-dark); }
.on-dark .btn--ghost:hover { --btn-bg: var(--forest-2); --btn-bd: var(--on-forest-soft); }
.btn__icon { width: 20px; height: 20px; flex: none; }
.btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateY(2px); }

.text-link {
  font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Portrait placeholder ---------- */
.portrait {
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(23, 33, 29, 0.05) 11px 12px),
    var(--paper-2);
  border: 1px solid var(--rule);
}
.portrait__silhouette { position: absolute; inset: auto 0 0 0; height: 78%; color: var(--paper-3); }
.portrait__silhouette svg { width: 100%; height: 100%; }
.portrait__meta { position: absolute; left: var(--s-4); right: var(--s-4); top: var(--s-4); display: grid; gap: var(--s-2); justify-items: start; }
.portrait__note { font-size: var(--text-xs); color: var(--ink-faint); max-width: 22ch; line-height: 1.45; }
.portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-3) var(--s-4);
  background: var(--paper); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.on-dark .portrait { background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(241, 236, 224, 0.05) 11px 12px),
    var(--forest-2); border-color: var(--rule-dark); }
.on-dark .portrait__silhouette { color: var(--forest-3); }
.on-dark .portrait__note { color: var(--on-forest-faint); }
.on-dark .portrait figcaption { background: var(--forest); border-top-color: var(--rule-dark); color: var(--on-forest-soft); }

/* ---------- Video placeholder ---------- */
.video { position: relative; }
.video__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 70% 40%, rgba(38, 74, 64, 0.95), rgba(21, 48, 42, 1) 60%),
    var(--forest);
  color: var(--on-forest);
}
.video__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__figure { position: absolute; right: 8%; bottom: 0; width: 34%; height: 88%; color: rgba(241, 236, 224, 0.07); }
.video__figure svg { width: 100%; height: 100%; }
.video__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; border-radius: var(--radius-lg);
}
.video__play:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: -6px; }
.video__disc {
  width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-bright); color: var(--forest);
  box-shadow: 0 0 0 10px rgba(241, 236, 224, 0.1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.video__disc svg { width: 32%; height: 32%; margin-left: 8%; }
.video__play:hover .video__disc, .video__play:focus-visible .video__disc { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(241, 236, 224, 0.12); }
.video__top, .video__bottom {
  position: absolute; left: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); pointer-events: none;
}
.video__top { top: clamp(12px, 3vw, 24px); }
.video__bottom { bottom: clamp(12px, 3vw, 24px); font-size: var(--text-sm); color: var(--on-forest-soft); }
.video__duration {
  font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 2px; background: rgba(12, 28, 24, 0.55); color: var(--on-forest);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.video__notice {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  width: min(88%, 30rem); text-align: center; font-size: var(--text-sm);
  padding: var(--s-3) var(--s-4); background: rgba(12, 28, 24, 0.8); border: 1px solid var(--rule-dark); border-radius: var(--radius);
}
.video__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); margin-top: var(--s-4); font-size: var(--text-sm); color: var(--ink-faint); }
@media (max-width: 560px) {
  .video__bottom .video__who { display: none; }
  .video__notice { bottom: 8%; font-size: var(--text-xs); }
}

/* ---------- System: Attract → Capture → Convert → Measure ---------- */
.system { position: relative; }
.system__row {
  display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr; align-items: stretch;
}
.stage { padding: var(--s-6) 0 var(--s-8); border-top: 2px solid var(--ink); display: grid; align-content: start; gap: var(--s-3); }
.stage__num { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--terracotta-ink); font-variant-numeric: tabular-nums; }
.stage__name { font-size: var(--text-xl); line-height: 1.05; }
.stage__text { font-size: var(--text-sm); color: var(--ink-soft); max-width: 26ch; line-height: 1.55; }
.stage__q { font-family: var(--font-serif); font-style: italic; font-size: var(--text-md); line-height: 1.4; color: var(--ink); max-width: 24ch; }
.arrow { display: flex; align-items: flex-start; justify-content: center; padding-top: calc(var(--s-6) + 1.1rem); color: var(--terracotta-ink); }
.arrow svg { width: 28px; height: 14px; }
.system__loop { margin-top: var(--s-2); }
.system__loop-line {
  position: relative; height: 32px; margin-inline: calc((100% - 132px) / 8);
  border: 1px solid var(--rule-strong); border-top: 0; border-radius: 0 0 4px 4px;
}
.system__loop-line::before { /* arrowhead pointing back up into Attract */
  content: ""; position: absolute; left: -5px; top: -2px;
  border: 5px solid transparent; border-bottom: 7px solid var(--terracotta-ink); border-top: 0;
}
.system__loop-text { display: flex; justify-content: center; margin-top: -0.85em; }
.system__loop-text span { background: var(--paper); padding: 0 var(--s-4); font-size: var(--text-sm); color: var(--ink-soft); font-style: italic; font-family: var(--font-serif); font-size: var(--text-md); }
.band .system__loop-text span { background: var(--paper-2); }
.system__close { margin-top: var(--s-12); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; }
.system__close p.big { font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-snug); }
.system__close p.small { color: var(--ink-soft); max-width: 44ch; }

@media (max-width: 900px) {
  .system__row { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-template-columns: 3.25rem 1fr; column-gap: var(--s-4); padding: var(--s-5) 0; border-top-width: 1px; }
  .stage > * { grid-column: 2; }
  .stage__num { grid-column: 1; grid-row: 1 / span 3; padding-top: 0.55rem; }
  .stage__text, .stage__q { max-width: 40ch; }
  .arrow { justify-content: flex-start; padding: 0 0 var(--s-2) 0; margin-left: calc(3.25rem + var(--s-4)); }
  .arrow svg { transform: rotate(90deg); width: 22px; }
  .system__loop-line { display: none; }
  .system__loop { border-top: 1px dashed var(--rule-strong); padding-top: var(--s-4); }
  .system__loop-text span::before { content: "↺  "; color: var(--terracotta-ink); font-style: normal; }
  .system__loop-text { margin-top: 0; justify-content: flex-start; }
  .system__loop-text span { padding: 0; background: none !important; }
  .system__close { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Diagnosis example ---------- */
.diag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: diag; }
.diag__step { position: relative; padding: var(--s-8) var(--s-6) var(--s-8) 0; display: grid; align-content: start; gap: var(--s-3); }
.diag__step + .diag__step { padding-left: var(--s-6); border-left: 1px solid var(--rule); }
.diag__step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule-strong);
}
.diag__marker { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.diag__body { font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.3; }
.diag__note { font-size: var(--text-sm); color: var(--ink-soft); }
.diag__step--key { background: var(--paper-bright); }
.diag__step--key .diag__marker { color: var(--terracotta-ink); }
.diag__step--key::before { background: var(--terracotta); height: 2px; }
.diag__step--lesson .diag__body { font-style: italic; }
.diag__foot { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; font-size: var(--text-sm); color: var(--ink-faint); }

@media (max-width: 900px) {
  .diag { grid-template-columns: minmax(0, 1fr); }
  .diag__step, .diag__step + .diag__step { padding: var(--s-5) 0 var(--s-6) var(--s-6); border-left: 1px solid var(--rule-strong); }
  .diag__step::before { right: auto; left: -5px; top: calc(var(--s-5) + 5px); width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }
  .diag__step--key { background: transparent; }
  .diag__step--key::before { background: var(--terracotta); border-color: var(--terracotta); height: 9px; }
}

/* ---------- Proof ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-12) var(--s-16); }
.proof__stat { display: grid; gap: var(--s-4); align-content: start; }
.proof__figure { font-family: var(--font-serif); font-size: clamp(2.75rem, 1.6rem + 6vw, 6.5rem); line-height: 0.92; letter-spacing: -0.03em; }
.proof__quote { font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.35; max-width: 30ch; }
.proof__context { font-size: var(--text-sm); color: var(--on-forest-faint); }
.proof__side { display: grid; gap: var(--s-8); align-content: start; }
.places { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-family: var(--font-serif); font-size: var(--text-lg); }
.places li { display: flex; align-items: baseline; gap: var(--s-6); }
.places li + li::before { content: ""; width: 18px; height: 1px; background: var(--terracotta-light); align-self: center; }
.places__label { font-size: var(--text-sm); color: var(--on-forest-soft); margin-top: var(--s-2); }
.current { border: 1px solid var(--rule-dark); border-radius: var(--radius); padding: var(--s-6); display: grid; gap: var(--s-3); }
.current__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); align-items: center; }
.current h3 { font-size: var(--text-lg); line-height: 1.25; }
.current p { font-size: var(--text-sm); color: var(--on-forest-soft); }
.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor; color: var(--terracotta-ink); white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.on-dark .status { color: var(--terracotta-light); }
.status--quiet { color: var(--ink-faint); }
.on-dark .status--quiet { color: var(--on-forest-faint); }
@media (max-width: 900px) { .proof { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Process: Talk → Diagnose → Scope → Build → Train & Support ---------- */
.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.process::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--rule-strong); }
.process__step { position: relative; padding: var(--s-10) var(--s-5) 0 0; display: grid; gap: var(--s-2); align-content: start; }
.process__step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
}
.band .process__step::before { background: var(--paper-2); }
.process__step:first-child::before { background: var(--terracotta); border-color: var(--terracotta); }
.process__num { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--terracotta-ink); font-variant-numeric: tabular-nums; }
.process__name { font-size: var(--text-lg); line-height: 1.15; }
.process__text { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; max-width: 24ch; }
.process-note { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: baseline; max-width: 50rem; }
.process-note p { font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.35; }

@media (max-width: 900px) {
  .process { grid-template-columns: minmax(0, 1fr); }
  .process::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .process__step { padding: 0 0 var(--s-8) var(--s-10); }
  .process__step:last-child { padding-bottom: 0; }
  .process__text { max-width: 40ch; }
  .process-note { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fit filter ---------- */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.fit__col { padding: var(--s-8); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-bright); }
.fit__col--not { background: transparent; border-style: dashed; border-color: var(--rule-strong); }
.fit__col h3 { font-size: var(--text-xl); margin-bottom: var(--s-6); }
.fit__list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.fit__list li:first-child { border-top: 0; padding-top: 0; }
.fit__mark { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.4; color: var(--forest-3); }
.fit__col--not .fit__mark { color: var(--terracotta-ink); }
.fit__col--not li { color: var(--ink-soft); }
@media (max-width: 760px) {
  .fit { grid-template-columns: minmax(0, 1fr); }
  .fit__col { padding: var(--s-6) var(--s-5); }
}

/* ---------- Final CTA ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-12) var(--s-16); align-items: center; }
.cta__main { display: grid; gap: var(--s-6); justify-items: start; }
.cta__main h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); max-width: 14ch; }
.cta__support { font-size: var(--text-md); color: var(--on-forest-soft); max-width: 40ch; }
.cta__phone-hint { display: none; font-size: var(--text-sm); color: var(--on-forest-soft); }
.cta__missing { font-size: var(--text-xs); color: var(--on-forest-faint); max-width: 44ch; }
.cta__preview { font-size: var(--text-sm); color: var(--on-forest-soft); width: 100%; max-width: 32rem; }
.cta__preview summary { cursor: pointer; padding-block: var(--s-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--rule-dark); width: fit-content; }
.cta__preview summary:hover { color: var(--on-forest); }
.cta__preview pre {
  margin: var(--s-3) 0 0; padding: var(--s-4); white-space: pre-wrap; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.55;
  background: var(--forest-2); border-left: 2px solid var(--terracotta-light); color: var(--on-forest);
}

.qr-card {
  justify-self: end; width: 100%; max-width: 320px; padding: var(--s-6);
  background: var(--paper-bright); color: var(--ink); border-radius: var(--radius-lg);
  display: grid; gap: var(--s-4); text-align: center;
}
.qr-card__code { aspect-ratio: 1; width: 100%; display: grid; place-items: center; color: var(--forest); }
.qr-card__code svg { width: 100%; height: 100%; }
.qr-card__code svg rect[fill="#000000"], .qr-card__code svg path { fill: var(--forest); }
.qr-card__label { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.qr-card__sub { font-size: var(--text-xs); color: var(--ink-faint); margin-top: calc(-1 * var(--s-2)); }

/* Phones: WhatsApp button dominates, QR is never shown on the same screen. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
  .cta { grid-template-columns: minmax(0, 1fr); }
  .qr-card { display: none; }
  .cta__phone-hint { display: block; }
  .cta__main .btn--wa { width: 100%; min-height: 64px; font-size: var(--text-md); }
}

/* ---------- Sticky phone CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(244, 240, 230, 0.92); border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out);
}
.sticky-cta .btn { width: 100%; }
.sticky-cta.is-visible { transform: translateY(0); }
@media (max-width: 767px) { .sticky-cta { display: block; } }

/* ---------- Footer ---------- */
.footer { padding-block: var(--s-10) var(--s-12); background: var(--forest); color: var(--on-forest-faint); border-top: 1px solid var(--rule-dark); font-size: var(--text-sm); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4) var(--s-8); }
.footer strong { color: var(--on-forest); font-family: var(--font-serif); font-weight: 400; font-size: var(--text-md); }
@media (max-width: 767px) { .footer { padding-bottom: calc(var(--s-24) + env(safe-area-inset-bottom)); } }

/* ---------- Reveal (only when JS + motion allowed) ---------- */
.can-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Very narrow phones (320–400px): let long button labels wrap instead of overflowing. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: var(--s-3); }
  .btn--large { padding-inline: var(--s-5); }
}
@media (max-width: 400px) { .status { white-space: normal; } }

/* ---------- Real photo in the portrait frame ---------- */
.portrait--photo { background: var(--forest); }
.portrait--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; }

/* ---------- Video poster + pending state ---------- */
.video__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%;
  opacity: 0.38; filter: saturate(0.7);
}
.video__stage::after { /* keep text legible over the photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 48, 42, 0.35), rgba(21, 48, 42, 0.75));
}
.video__stage > * { z-index: 1; }
.video__stage > .video__poster { z-index: 0; }
.video__pending {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3);
  padding: var(--s-6); text-align: center; font-size: var(--text-sm); color: var(--on-forest-soft);
}
.video__pending-title { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.15; color: var(--on-forest); max-width: 18ch; }
.video__pending span:last-child { max-width: 38ch; }
@media (max-width: 480px) {
  .video__stage { aspect-ratio: 4 / 3; }
  .video__pending-title { font-size: var(--text-lg); }
}
.video__stage.has-embed::after { display: none; }
.video__pending a { color: var(--on-forest); font-weight: 600; text-underline-offset: 4px; }