/* Hallmark · genre: editorial · theme: custom (The Hedgerow Trust)
 * index.html  · macrostructure: Catalogue    · nav: N6 masthead        · footer: Ft1 mast-headed
 * page.html   · macrostructure: Stat-Led     · nav: N9 edge-aligned    · footer: Ft2 inline
 * demo.html   · macrostructure: Split Studio · nav: N1a two-destination · footer: Ft4 colophon
 * vibe: hedgerow in November, cream paper, hand-planted
 * paper oklch(95.3% 0.017 88) · accent oklch(65.2% 0.133 61) warm · display Nunito Sans + body Source Sans 3
 * axes: light paper / rounded-sans display / warm accent
 * enrichment: supplied 4:5 portraits + one hand-drawn inline SVG hedgehog mark (Tier B)
 * contrast: pass (40-41) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50-57)
 */

/* ---------- tokens ---------- */
:root {
  /* paper and ink, all tinted toward the bark hue, no zero chroma */
  --color-paper: oklch(95.3% 0.017 88);
  --color-paper-2: oklch(98% 0.008 88);
  --color-paper-3: oklch(91.4% 0.021 88);
  --color-paper-4: oklch(87.5% 0.024 86);
  --color-ink: oklch(26% 0.028 58);
  --color-ink-2: oklch(41.2% 0.0385 58.7);
  --color-muted: oklch(48% 0.031 60);
  --color-rule: oklch(80% 0.022 80);
  --color-rule-soft: oklch(87% 0.018 82);

  /* brand */
  --color-hedge: oklch(38.4% 0.049 151);
  --color-hedge-deep: oklch(27.5% 0.043 151);
  --color-hedge-soft: oklch(88% 0.031 148);
  --color-accent: oklch(65.2% 0.133 61);
  --color-accent-deep: oklch(47% 0.115 55);
  --color-accent-ink: oklch(21% 0.035 58);
  --color-accent-soft: oklch(93% 0.042 70);
  --color-focus: oklch(45% 0.125 55);
  --color-focus-dark: oklch(93% 0.042 70);
  --color-scrim: oklch(20% 0.03 58 / 0.62);
  --color-scrim-soft: oklch(20% 0.03 58 / 0.22);

  /* messaging surfaces */
  --color-bubble-coach: oklch(94.6% 0.072 131);
  --color-bubble-mine: oklch(99.2% 0.004 88);
  --color-bubble-ink: oklch(24% 0.03 130);
  --color-tick: oklch(50% 0.10 232);
  --color-chat-field: oklch(92% 0.016 96);
  --color-chat-head: var(--color-hedge-deep);

  /* type */
  --font-display: "Nunito Sans", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: clamp(1.5rem, 1.24rem + 1.1vw, 2rem);
  --text-3xl: clamp(1.8rem, 1.42rem + 1.7vw, 2.6rem);
  --text-4xl: clamp(2.1rem, 1.54rem + 2.5vw, 3.4rem);
  --text-display-s: clamp(2.4rem, 1.7rem + 3.1vw, 4rem);
  --text-display: clamp(2.7rem, 1.8rem + 4vw, 4.8rem);

  --lh-display: 1.04;
  --lh-title: 1.14;
  --lh-body: 1.55;

  /* space, 4pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-bubble: 12px;

  --rule-hair: 1px;
  --rule-thick: 3px;

  --dur-xs: 90ms;
  --dur-short: 160ms;
  --dur-mid: 260ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-toast: 400;

  --banner-height: 56px;
  --measure: 66ch;
  --shell: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* display-mode rules must not beat the hidden attribute */
[hidden] { display: none !important; }

html, body {
  overflow-x: clip;
  max-width: 100%;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
img { display: block; max-width: 100%; }

a { color: var(--color-accent-deep); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* on the dark surfaces the warm ring would sink into the paint */
.console-bar :focus-visible,
.honesty :focus-visible,
.chat__head :focus-visible {
  outline-color: var(--color-focus-dark);
}

.skip {
  position: absolute;
  left: var(--space-sm);
  top: -4rem;
  z-index: var(--z-toast);
  background-color: var(--color-hedge-deep);
  color: var(--color-paper-2);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip:focus { top: var(--space-2xs); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tnum { font-variant-numeric: tabular-nums; }

.rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin: 0;
}

.lede {
  font-size: var(--text-xl);
  color: var(--color-ink-2);
  max-width: 54ch;
}

.note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: var(--measure);
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--primary:hover { background-color: var(--color-accent-deep); color: var(--color-paper-2); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost {
  background-color: transparent;
  color: var(--color-hedge-deep);
  border-color: var(--color-hedge);
}
.btn--ghost:hover { background-color: var(--color-hedge-soft); }
.btn--ghost:active { transform: translateY(1px); }
.btn--green {
  background-color: var(--color-hedge);
  color: var(--color-paper-2);
}
.btn--green:hover { background-color: var(--color-hedge-deep); }
.btn--green:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---------- masthead, N6 (index) ---------- */
.masthead {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background-color: var(--color-paper);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hedge-deep);
  text-decoration: none;
  line-height: 1;
}
.wordmark svg { flex: none; }
.wordmark span { white-space: nowrap; }
.masthead__issue {
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}
.masthead__rules {
  border-top: var(--rule-thick) solid var(--color-hedge);
  border-bottom: var(--rule-hair) solid var(--color-hedge);
  height: 4px;
}

/* ---------- opening (index) ---------- */
.opening {
  padding-block: var(--space-2xl) var(--space-3xl);
}
.opening__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}
.opening__display {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  max-width: 14ch;
  overflow-wrap: anywhere;
  min-width: 0;
}
.opening__lede {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-ink-2);
  max-width: 30ch;
}
.opening__money {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: 44rem;
  font-size: var(--text-base);
  color: var(--color-ink-2);
}
.opening__money b { color: var(--color-ink); font-weight: 700; }
.opening__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}
.opening__signed {
  font-size: var(--text-base);
  color: var(--color-muted);
}
.opening__signed a { color: var(--color-accent-deep); }

@media (min-width: 60rem) {
  .opening__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-areas:
      "head   figure"
      "side   figure"
      "money  money";
    align-items: start;
    column-gap: var(--space-2xl);
    row-gap: var(--space-md);
  }
  .opening__head { grid-area: head; }
  .opening__side { grid-area: side; }
  .opening__money { grid-area: money; margin-top: var(--space-md); }
}

/* ---------- section heads, single column only (gate 54) ---------- */
.band { padding-block: var(--space-2xl); }
.band--tight { padding-block: var(--space-xl) var(--space-2xl); }
.band--cream { background-color: var(--color-paper-3); }
.band__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
  max-width: var(--measure);
}
.band__title {
  font-size: var(--text-3xl);
}
.band__sub {
  color: var(--color-ink-2);
  font-size: var(--text-lg);
}

/* ---------- coach catalogue (index) ---------- */
.coaches {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}


.coach {
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.coach[data-selected="true"] {
  border-color: var(--color-hedge);
  box-shadow: inset 0 0 0 2px var(--color-hedge);
}
.coach__top {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
}
.coach__portrait {
  width: 96px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-paper-4);
}
.coach__name {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3xs);
}
.coach__pitch {
  font-size: var(--text-base);
  color: var(--color-ink-2);
}
.coach__chat {
  background-color: var(--color-chat-field);
  border-top: var(--rule-hair) solid var(--color-rule-soft);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.coach__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-sm);
  margin-top: auto;
}
.coach__foot > * { flex: 1 1 auto; justify-content: center; }
@media (min-width: 30rem) {
  .coach__foot > * { flex: 0 0 auto; }
}

@media (min-width: 34rem) {
  .coach__top { grid-template-columns: 136px minmax(0, 1fr); padding: var(--space-md); }
  .coach__chat, .coach__foot { padding-inline: var(--space-md); }
}
@media (min-width: 58rem) {
  .coaches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- coach portrait with an intro video ---------- */
.portrait {
  position: relative;
  width: 96px;
  height: 120px;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-paper-4);
}
.portrait__still,
.portrait__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait__video {
  opacity: 0;
  pointer-events: none;
  background-color: var(--color-paper-4);
}
.portrait[data-playing="true"] .portrait__video { opacity: 1; }
.portrait__play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs);
  border: 0;
  background-color: transparent;
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 3px var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out);
}
.portrait__play::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background-image: linear-gradient(to top, var(--color-scrim), transparent);
  pointer-events: none;
}
.portrait__play svg,
.portrait__play-label { position: relative; }
.portrait__play:hover { background-color: var(--color-scrim-soft); }
.portrait__play:focus-visible { outline: 2px solid var(--color-focus-dark); outline-offset: -3px; }
.portrait__play:active { transform: translateY(1px); }
.portrait__play:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* no video on disk, or it failed to load: the still stands on its own */
.portrait[data-intro="missing"] .portrait__play,
.portrait[data-intro="missing"] .portrait__video { display: none; }

@media (min-width: 34rem) {
  .portrait { width: 136px; height: 170px; }
  .portrait__play { font-size: var(--text-sm); }
}

/* pick control, radio stays in normal flow (gate 53) */
.pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-hedge);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: 1;
  color: var(--color-hedge-deep);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.pick:hover { background-color: var(--color-hedge-soft); }
.pick input {
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  border: 0;
  padding: 0;
  flex: none;
}
.pick:has(input:checked) {
  background-color: var(--color-hedge);
  color: var(--color-paper-2);
}
.pick:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.pick__on { display: none; }
.pick:has(input:checked) .pick__off { display: none; }
.pick:has(input:checked) .pick__on { display: inline; }

/* ---------- WhatsApp style bubbles, no device chrome ---------- */
.bubbles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.bubble {
  position: relative;
  max-width: 84%;
  padding: var(--space-2xs) var(--space-xs) 1.35rem;
  border-radius: var(--radius-bubble);
  font-size: var(--text-base);
  line-height: 1.42;
  color: var(--color-bubble-ink);
  overflow-wrap: anywhere;
}
.bubble--coach {
  background-color: var(--color-bubble-coach);
  align-self: flex-start;
  border-top-left-radius: var(--radius-sm);
}
.bubble--mine {
  background-color: var(--color-bubble-mine);
  align-self: flex-end;
  border-top-right-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule-soft);
}
.bubble__meta {
  position: absolute;
  right: var(--space-2xs);
  bottom: var(--space-3xs);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-muted);
}
.bubble__tick { color: var(--color-tick); }
.bubble p + p { margin-top: var(--space-2xs); }

/* typing indicator */
.typing-wrap { padding-bottom: var(--space-2xs); }
.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 0;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-muted);
  animation: dot 1.1s var(--ease-in-out) infinite;
}
.typing span:nth-child(2) { animation-delay: 0.16s; }
.typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dot {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

/* voice note bubble */
.voice {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.voice__btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: var(--rule-hair) solid var(--color-hedge);
  background-color: var(--color-paper-2);
  color: var(--color-hedge-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-short) var(--ease-out);
}
.voice__btn:hover { background-color: var(--color-hedge-soft); }
.voice__btn:active { transform: translateY(1px); }
.voice__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.voice__len { font-size: var(--text-xs); color: var(--color-muted); }

/* waveform */
.wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}
.wave i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background-color: var(--color-hedge);
  opacity: 0.45;
  transform: scaleY(0.35);
  transform-origin: center;
}
.is-playing .wave i {
  opacity: 1;
  animation: wv 900ms var(--ease-in-out) infinite alternate;
}
.is-playing .wave i:nth-child(2) { animation-delay: 110ms; }
.is-playing .wave i:nth-child(3) { animation-delay: 220ms; }
.is-playing .wave i:nth-child(4) { animation-delay: 80ms; }
.is-playing .wave i:nth-child(5) { animation-delay: 300ms; }
.is-playing .wave i:nth-child(6) { animation-delay: 170ms; }
.is-playing .wave i:nth-child(7) { animation-delay: 40ms; }
@keyframes wv {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}

/* ---------- how it works, step sequence (index) ---------- */
.steps {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: step;
}
@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .step + .step { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-xl); }
}
.step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--color-accent-deep);
  letter-spacing: 0.08em;
}
.step__title {
  font-size: var(--text-xl);
  margin-block: var(--space-3xs) var(--space-2xs);
}
.step p { color: var(--color-ink-2); font-size: var(--text-base); }

/* ---------- forms ---------- */
.form {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
@media (min-width: 46rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-lg); column-gap: var(--space-lg); }
  .form__wide { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.field > label,
.fieldset > legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-ink);
  padding: 0;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background-color: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  outline-offset: 1px;
  min-height: 48px;
  padding: 0 var(--space-xs);
  width: 100%;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.field textarea { padding-block: var(--space-2xs); line-height: 1.45; }
.field input:hover,
.field select:hover,
.field textarea:hover { background-color: var(--color-paper-2); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  border-color: var(--color-focus);
}
.field input:disabled,
.field select:disabled { opacity: 0.55; cursor: not-allowed; }
.field__help {
  min-height: 1lh;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.opts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-paper);
  font-size: var(--text-base);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.opt:hover { background-color: var(--color-hedge-soft); }
.opt input { width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0; flex: none; }
.opt:has(input:checked) {
  background-color: var(--color-hedge);
  border-color: var(--color-hedge);
  color: var(--color-paper-2);
  font-weight: 600;
}
.opt:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.opt:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

.check {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--text-base);
}
.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-hedge);
  flex: none;
  cursor: pointer;
}

/* signup result panel */
.result {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-paper-2);
  max-width: 34rem;
}
.chat__head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  background-color: var(--color-chat-head);
  color: var(--color-paper-2);
  padding: var(--space-2xs) var(--space-sm);
  min-height: 56px;
}
.chat__head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background-color: var(--color-paper-4);
}
.chat__who { font-family: var(--font-display); font-weight: 800; line-height: 1.1; font-size: var(--text-base); }
.chat__state { font-size: var(--text-xs); opacity: 0.85; line-height: 1.2; }
.chat__body {
  background-color: var(--color-chat-field);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 12rem;
}
.chat__foot {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
  border-top: var(--rule-hair) solid var(--color-rule-soft);
}

/* ---------- honesty panel ---------- */
.honesty {
  background-color: var(--color-hedge-deep);
  color: var(--color-paper);
}
.honesty__inner { padding-block: var(--space-2xl); }
.honesty__title { font-size: var(--text-3xl); color: var(--color-paper); max-width: 28ch; }
.honesty__body {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-lg);
}
@media (min-width: 52rem) {
  .honesty__body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-xl); }
}
.honesty h3 { font-size: var(--text-lg); color: var(--color-paper); margin-bottom: var(--space-3xs); }
.honesty p { color: var(--color-hedge-soft); font-size: var(--text-base); }
.honesty__stamp {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-hedge);
  font-size: var(--text-base);
  color: var(--color-paper);
  max-width: var(--measure);
}

/* ---------- footers ---------- */
.foot-mast {
  border-top: var(--rule-thick) solid var(--color-hedge);
  padding-block: var(--space-xl);
  background-color: var(--color-paper);
}
.foot-mast__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: flex-start;
  justify-content: space-between;
}
.foot-mast__tag { color: var(--color-ink-2); max-width: 32ch; font-size: var(--text-base); margin-top: var(--space-2xs); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.foot-links a { font-size: var(--text-base); white-space: nowrap; }
.foot-small { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }

.foot-inline {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.foot-inline__row { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); align-items: center; }
.foot-inline a { white-space: nowrap; }

.foot-colophon {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg);
  background-color: var(--color-paper-3);
}
.foot-colophon dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  font-size: var(--text-sm);
}
@media (min-width: 46rem) {
  .foot-colophon dl { grid-template-columns: 9rem minmax(0, 1fr); }
}
.foot-colophon dt { color: var(--color-muted); }
.foot-colophon dd { margin: 0; color: var(--color-ink-2); }

/* ================= page.html, Stat-Led ================= */
.edge-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-md);
}
.edge-nav__links { display: flex; gap: var(--space-md); align-items: center; }
.edge-nav__links a { font-size: var(--text-base); white-space: nowrap; }

.stat-hero { padding-block: var(--space-lg) var(--space-2xl); }
.stat-hero__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}
.stat-hero__figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-hedge-deep);
  font-variant-numeric: tabular-nums;
}
.stat-hero__figure sup {
  font-size: 0.46em;
  top: -0.42em;
  margin-right: -0.04em;
  letter-spacing: 0;
}
.stat-hero__title {
  font-size: var(--text-3xl);
  margin-top: var(--space-2xs);
  max-width: 24ch;
}
.stat-hero__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .stat-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: end; }
}

.meters { display: flex; flex-direction: column; gap: var(--space-md); }
.meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-base);
}
.meter__label { font-family: var(--font-display); font-weight: 700; }
.meter__value { color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.meter__track {
  height: 14px;
  border-radius: 999px;
  background-color: var(--color-paper-4);
  overflow: hidden;
  margin-top: var(--space-3xs);
}
.meter__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
.meter__fill--green { background-color: var(--color-hedge); }

.coach-chip {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  background-color: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}
.coach-chip img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-paper-4);
}
.coach-chip__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.coach-chip__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }

.two-col {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .two-col { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--space-2xl); }
}

.donations { list-style: none; margin: 0; padding: 0; }
.donations li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3xs) var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.donations__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.donations__amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-hedge-deep);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.donations__msg { grid-column: 1 / -1; color: var(--color-ink-2); font-size: var(--text-base); }
.donations__when { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }

.log { list-style: none; margin: 0; padding: 0; }
.log li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3xs) var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.log__day { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.log__miles { font-variant-numeric: tabular-nums; color: var(--color-accent-deep); font-weight: 700; white-space: nowrap; }
.log__note { grid-column: 1 / -1; font-size: var(--text-base); color: var(--color-ink-2); }

.ladder {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 30rem) {
  .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ladder__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  text-align: left;
  background-color: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink-2);
  min-height: 48px;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.ladder__btn:hover { background-color: var(--color-accent-soft); border-color: var(--color-accent); }
.ladder__btn:active { transform: translateY(1px); }
.ladder__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ladder__amt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--color-ink); }

.toast {
  position: fixed;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: var(--z-toast);
  max-width: min(22rem, calc(100% - 2rem));
  background-color: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-base);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.toast[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

/* ================= demo.html, Split Studio ================= */
.console-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background-color: var(--color-ink);
  color: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-ink-2);
}
.console-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  min-height: var(--banner-height);
  padding-block: var(--space-2xs);
}
.console-bar__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: 1.2;
}
.console-bar__note { font-size: var(--text-sm); color: var(--color-paper-4); line-height: 1.2; }
.console-bar__links { display: flex; gap: var(--space-md); }
.console-bar__links a { color: var(--color-accent-soft); font-size: var(--text-base); white-space: nowrap; }
.console-bar__links a:hover { color: var(--color-paper); }

.studio {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-xl) var(--space-2xl);
}
@media (max-width: 61.99rem) {
  .studio__title { order: -2; }
  .studio__proof { order: -1; }
  .phone .chat__body { max-height: 20rem; min-height: 14rem; }
}
.studio__title {
  font-size: var(--text-3xl);
  max-width: 22ch;
}
@media (min-width: 62rem) {
  .studio {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    column-gap: var(--space-2xl);
    row-gap: var(--space-lg);
    align-items: start;
  }
  .studio__title { grid-column: 1 / -1; grid-row: 1; max-width: 28ch; }
  .studio__controls { grid-column: 1; grid-row: 2; }
  .studio__proof {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: calc(var(--banner-height) + var(--space-sm));
  }
}

.control { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.control:first-child { padding-top: 0; }
.control__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-2xs);
}
.control__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.control__hint { font-size: var(--text-sm); color: var(--color-muted); }

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.slider-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-hedge);
  height: 44px;
  cursor: pointer;
}
.slider-row input[type="range"]:disabled { opacity: 0.55; cursor: not-allowed; }
.slider-row output {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
  text-align: right;
  flex: none;
}

.stepper { display: flex; align-items: center; gap: var(--space-2xs); }
.stepper button {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  border: var(--rule-hair) solid var(--color-rule);
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.stepper button:hover { background-color: var(--color-hedge-soft); }
.stepper button:active { transform: translateY(1px); }
.stepper button:disabled { opacity: 0.55; cursor: not-allowed; }
.stepper output {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  min-width: 8ch;
}

.coach-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-paper-2);
  cursor: pointer;
  font-size: var(--text-base);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.swatch img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  background-color: var(--color-paper-4);
}
.swatch:hover { background-color: var(--color-hedge-soft); }
.swatch input { width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0; flex: none; }
.swatch:has(input:checked) { background-color: var(--color-hedge); border-color: var(--color-hedge); color: var(--color-paper-2); font-weight: 600; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.replies { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.reply-btn {
  min-height: 44px;
  padding: 0 var(--space-sm);
  border-radius: 999px;
  border: var(--rule-hair) solid var(--color-rule);
  background-color: var(--color-bubble-mine);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.reply-btn:hover { background-color: var(--color-accent-soft); }
.reply-btn:active { transform: translateY(1px); }
.reply-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.milestone-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.milestone-list .btn { font-size: var(--text-sm); min-height: 44px; padding-inline: var(--space-sm); }

.phone {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-paper-2);
}
.phone .chat__body {
  max-height: 30rem;
  overflow-y: auto;
  min-height: 18rem;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .is-playing .wave i { transform: scaleY(0.8); opacity: 1; }
  .typing span { opacity: 0.75; }
  .btn:active, .ladder__btn:active, .stepper button:active,
  .reply-btn:active, .voice__btn:active, .portrait__play:active { transform: none; }
}

/* ---------- opening figure (index) ---------- */
.opening__figure { margin: 0; }
.opening__figure img {
  width: 100%;
  height: clamp(13rem, 34vw, 20rem);
  object-fit: cover;
  object-position: center 58%;
  border-radius: var(--radius-lg);
  background-color: var(--color-paper-4);
}
.opening__caption {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
@media (min-width: 60rem) {
  .opening__figure { grid-area: figure; align-self: center; }
  .opening__figure img { height: clamp(18rem, 30vw, 24rem); }
}

/* ---------- spacing utilities ---------- */
.mt-2xs { margin-top: var(--space-2xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* ---------- link to the charity-facing journey page (index) ---------- */
.for-charities { padding-block: var(--space-2xs); font-size: var(--text-sm); text-align: right; }
.for-charities a { color: var(--color-ink-2); }
.for-charities a:hover { color: var(--color-accent-deep); }