/* Elklan AI app styles. Tokens live in tokens.css (copied unchanged from the
   Elklan site). Everything here uses those tokens plus the clinical tints
   below. Three breakpoints only: 640, 960, 1200. */

/* ---- Fonts: self-hosted variable woff2, the same files and method as the site ---- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Helvetica-Bold'), local('Arial Bold'), local('Arial');
  size-adjust: 105%;
  ascent-override: 100%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 103%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ---- Clinical colour conventions (not brand colours) and app-only tokens ---- */
:root {
  --b1: #7CBE9C; --b2: #5BAEBA; --b3: #5A8FD0; --b4: #9279CE; --b5: #CC6E9C;
  --cs-who: #e88b2a; --cs-doing: #e7c12a; --cs-what: #4f9d52; --cs-where: #3f78c4;
  --green-100: #DDEFD3;
  --divider: rgba(28, 43, 41, 0.10);
  --header-h: 74px;
  --section-pad: 96px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-100);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--space-4); color: var(--ink); }
h1, h2 { font-family: var(--font-display); font-weight: 800; }
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.005em; }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; }
p { margin: 0 0 var(--space-4); }
a { color: var(--ink); text-decoration-color: var(--gold-500); text-decoration-thickness: 2px; text-underline-offset: 3px; }
ul, ol { padding-left: 1.2em; }
strong, b { font-weight: 700; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--gold-100); color: var(--ink); }
[hidden] { display: none !important; }

/* Focus: copied from the site */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(28, 43, 41, 0.55);
}
/* Headings and containers receive focus on screen change for keyboard and
   screen-reader context; they are not controls, so no ring. */
[data-focus]:focus, #main:focus, #trust-title:focus, .fullplan__dialog:focus { outline: none; box-shadow: none; }
.skip-link {
  position: absolute; left: 50%; transform: translate(-50%, -200%);
  background: var(--ink); color: var(--cream-100);
  padding: var(--space-3) var(--space-5); border-radius: var(--r-btn);
  z-index: 300; transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 12px); color: var(--cream-100); }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--grey-600); }
.small { font-size: var(--fs-small); }
.muted { color: var(--grey-500); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: var(--space-3);
}
.eyebrow--pill {
  letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--gold-500);
  padding: 0.4em 1em 0.45em; border-radius: var(--r-btn);
  margin-bottom: var(--space-4);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Hand-drawn gold underline, from the site */
.hl { position: relative; white-space: nowrap; }
.hl::after {
  content: ''; position: absolute; left: -2%; bottom: -0.16em;
  width: 104%; height: 0.34em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 24' preserveAspectRatio='none'%3E%3Cpath d='M4.5 13.6 C 58 6.2, 118 4.6, 176 6 C 232 7.2, 278 8.9, 316 10.2 C 318.2 10.6, 318.2 15.2, 316 15.6 C 278 14.6, 232 13, 176 13.5 C 118 14.1, 58 15.4, 5.4 19.8 C 2.6 20.5, 1.7 14.2, 4.5 13.6 Z' fill='%23FDC200'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 0.8rem 1.5rem; min-height: 44px;
  font: 700 1rem var(--font-body);
  border-radius: var(--r-btn); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--gold-500); box-shadow: var(--shadow-gold); }
.btn--primary:hover { background: var(--gold-600); transform: translateY(-1px); }
.btn--secondary { background: transparent; border-color: var(--grey-500); }
.btn--secondary:hover { background: var(--cream-300); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }
.btn--block { width: 100%; }
.link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: none; border: 0; padding: 0.5rem 0.25rem; min-height: 44px;
  font-weight: 700; color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--gold-500); text-decoration-thickness: 2px; text-underline-offset: 3px;
  cursor: pointer;
}
.link:hover { text-decoration-color: var(--gold-600); text-decoration-thickness: 3px; }
.link__chev { display: inline-block; width: 0.6em; height: 0.6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); margin-left: 0.3em; transition: transform var(--dur-fast) var(--ease); }
.link[aria-expanded="true"] .link__chev { transform: translateY(0.1em) rotate(225deg); }

/* ---- Pills and chips ---- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 0.82rem; font-weight: 700; line-height: 1.3; color: var(--ink);
  padding: 0.2rem 0.75rem; border-radius: var(--r-btn);
}
.pill--info { background: var(--blue-100); }
.pill--gold { background: var(--gold-100); }
.pill--cream { background: var(--cream-300); }
.pill--lock { background: var(--white); box-shadow: var(--shadow-soft); padding: 0.5rem 1rem; font-size: var(--fs-small); font-weight: 400; color: var(--grey-600); }
.pill--lock svg { flex: none; color: var(--ink); }
.trust-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--white); border: 1px solid var(--divider);
  border-radius: var(--r-chip); padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small); box-shadow: var(--shadow-soft);
}
.trust-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); flex: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }

/* Provenance chip: tap to reveal the source */
.prov-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.4rem 0.9rem;
  background: var(--gold-100); color: var(--ink); border: 0;
  font-size: 0.8rem; font-weight: 700; border-radius: var(--r-btn);
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.prov-chip:hover { background: var(--cream-300); }
.prov-chip svg { flex: none; width: 14px; height: 14px; }
.prov-chip__chev { display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform var(--dur-base) var(--ease); }
.prov-chip[aria-expanded="true"] .prov-chip__chev { transform: translateY(0.1em) rotate(225deg); }
.prov-chip--static { cursor: default; }
.prov-chip--static:hover { background: var(--gold-100); }
.prov-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), margin var(--dur-base) var(--ease);
}
.prov-panel[aria-hidden="false"] { grid-template-rows: 1fr; opacity: 1; margin: var(--space-3) 0 var(--space-4); }
.prov-panel > div { overflow: hidden; }
.prov-panel__inner { background: var(--cream-300); border-radius: var(--r-chip); padding: 1rem; font-size: var(--fs-small); line-height: 1.55; }
.prov-panel__inner b { display: inline-block; min-width: 4.5em; font-weight: 700; }
.prov-panel__inner span { display: block; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid rgba(28, 43, 41, 0.08);
}
.site-header__inner {
  max-width: var(--container); margin: 0 auto; min-height: var(--header-h);
  padding: var(--space-2) var(--gutter);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.site-logo { flex: none; display: inline-flex; border-radius: 6px; }
.site-logo img { width: auto; height: 46px; }
.site-header__rule { width: 1px; height: 32px; background: var(--divider); flex: none; }
.site-header__product { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.site-header__nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.segmented { display: inline-flex; padding: 3px; border-radius: var(--r-btn); border: 1px solid var(--divider); background: var(--white); }
.segmented__btn {
  min-height: 44px; padding: 0.4rem 1rem; border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--ink); font-weight: 700; font-size: 0.94rem; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented__btn:hover { background: var(--cream-300); }
.segmented__btn[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.voice-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0.4rem 1rem; border-radius: var(--r-btn);
  border: 1px solid var(--divider); background: var(--white); color: var(--ink);
  font-weight: 700; font-size: 0.94rem; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.voice-toggle:hover { background: var(--cream-300); }
.voice-toggle__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--grey-500); background: transparent; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.voice-toggle[aria-pressed="true"] { background: var(--cream-300); }
.voice-toggle[aria-pressed="true"] .voice-toggle__dot { background: var(--gold-500); border-color: var(--gold-500); }
.voice-toggle.is-speaking .voice-toggle__dot, .voice-toggle.is-waiting .voice-toggle__dot { animation: speakPulse 1.3s ease-in-out infinite; }
@keyframes speakPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 194, 0, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(253, 194, 0, 0); } }

/* Voice gate: shown only when the browser refuses to start sound on load.
   One tap here is the browser's required gesture; every later clip plays on its own. */
.voice-gate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--gutter); background: rgba(28, 43, 41, 0.45); animation: gateIn var(--dur-base) var(--ease) both; }
.voice-gate__card { width: 100%; max-width: 440px; background: var(--white); border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: var(--space-6) var(--space-6) var(--space-5); text-align: center; display: grid; justify-items: center; gap: var(--space-3); animation: gateCardIn var(--dur-base) var(--ease) both; }
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gateCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.voice-gate__mark { width: 56px; height: auto; }
.voice-gate__card h2 { font-size: var(--fs-h3); margin: 0; }
.voice-gate__card p { color: var(--grey-600); margin: 0 0 var(--space-2); max-width: 30em; }

/* ---- Stage transitions ---- */
.stage { position: relative; }
.scene { animation: enter var(--dur-base) var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.scene.is-leaving { animation: leave var(--dur-fast) var(--ease) forwards; }
@keyframes leave { to { opacity: 0; transform: translateY(-8px); } }

/* ---- Welcome ---- */
.hero { background: var(--cream-100); }
.hero__inner {
  max-width: var(--container); margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
  display: grid; grid-template-columns: 56fr 44fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center;
}
.hero__title { margin-bottom: var(--space-5); }
.hero__lead { max-width: 34em; margin-bottom: var(--space-3); }
.hero__source { color: var(--grey-500); font-size: var(--fs-small); margin-bottom: var(--space-6); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: var(--space-6) 0 0; padding: 0; }

.hero__visual { position: relative; }
.mask-pebble {
  position: relative; z-index: 1;
  border-radius: 46% 54% 50% 50% / 55% 47% 53% 45%;
  overflow: hidden; box-shadow: var(--shadow-card);
}
.mask-pebble img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.hero__visual::before, .hero__visual::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; }
.hero__visual::after { right: -8%; bottom: -6%; width: 42%; aspect-ratio: 1; background: var(--gold-100); clip-path: inset(0 0 0 50%); }
.hero__visual::before { left: -10%; top: -4%; width: 36%; aspect-ratio: 1; background: var(--blue-50); clip-path: inset(0 50% 0 0); }
.hero__visual--plain { max-width: 420px; margin: 0 auto; }
.bubble {
  position: absolute; z-index: 2;
  background: var(--white); padding: 0.7rem 1.1rem; border-radius: 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--ink); box-shadow: var(--shadow-card); white-space: nowrap;
  animation: floatY 6s ease-in-out infinite;
}
.bubble::before { content: ''; position: absolute; width: 14px; height: 14px; background: var(--white); border-radius: 4px; }
.bubble--yellow, .bubble--yellow::before { background: var(--gold-500); }
.bubble--blue, .bubble--blue::before { background: var(--blue-100); }
.bubble--green, .bubble--green::before { background: var(--green-100); }
.bubble--1 { top: 6%; left: -2%; animation-delay: 0s; }
.bubble--1::before { bottom: -6px; left: 18px; transform: rotate(45deg); }
.bubble--2 { top: 5%; right: -4%; animation-delay: 1.2s; }
.bubble--2::before { bottom: -6px; right: 22px; transform: rotate(45deg); }
.bubble--3 { bottom: 10%; left: -8%; animation-delay: 2.4s; }
.bubble--3::before { top: -6px; left: 18px; transform: rotate(45deg); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.curve { display: block; width: 100%; height: clamp(28px, 5vw, 64px); background: var(--cream-100); }
.curve svg { display: block; width: 100%; height: 100%; }

.band { padding-block: var(--section-pad); }
.band--cream { background: var(--cream-300); }
.section-head { max-width: 680px; margin: 0 auto var(--space-7); text-align: center; }
.how { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 880px; margin: 0 auto; }
.how-card { background: var(--white); border-radius: var(--r-bubble); box-shadow: var(--shadow-soft); padding: var(--space-6) var(--space-5); }
.how-card__num { width: 48px; height: 48px; border-radius: var(--r-chip); background: var(--gold-500); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; margin-bottom: var(--space-4); }
.how-card h3 { margin-bottom: var(--space-2); }
.how-card p { color: var(--grey-600); margin: 0; }
.examples { max-width: 880px; margin: var(--space-7) auto 0; text-align: center; }
.examples__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ---- Steps ---- */
.step { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-7) var(--gutter) var(--section-pad); }
.step__head { text-align: center; max-width: 620px; margin: 0 auto var(--space-6); }
.step__head h2 { margin-bottom: var(--space-2); }
.step__hint { color: var(--grey-500); margin: 0; }
.recap { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: center; background: var(--white); box-shadow: var(--shadow-soft); border-radius: var(--r-btn); padding: 0.25rem 0.5rem 0.25rem 1rem; font-size: var(--fs-small); color: var(--grey-600); margin-bottom: var(--space-5); }
.recap b { color: var(--ink); }
.step__foot { display: flex; justify-content: center; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.step__privacy { display: flex; justify-content: center; margin-top: var(--space-5); }

/* Progress: one component, nine steps on the default journey */
.progress { margin: 0 auto var(--space-6); max-width: var(--container-narrow); }
.progress__steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.progress__step { flex: 1 1 0; min-width: 0; font-size: var(--fs-small); color: var(--grey-500); line-height: 1.3; }
.progress__step.is-current { flex: 0 0 auto; max-width: 45%; }
.progress__step span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 6px; }
.progress__step::after { content: ''; display: block; height: 4px; border-radius: 4px; background: var(--divider); }
.progress__step.is-done { color: var(--ink); }
.progress__step.is-done::after { background: var(--gold-500); }
.progress__step.is-current { color: var(--ink); font-weight: 700; }
.progress__step.is-current::after { background: var(--ink); }
.progress__compact { display: none; }

/* Selection cards */
.selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.selection-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 680px; margin-inline: auto; }
.select-card {
  position: relative; display: flex; gap: var(--space-4); align-items: center; width: 100%; min-height: 88px;
  text-align: left; background: var(--white); border: 2px solid transparent; border-radius: var(--r-card);
  box-shadow: var(--shadow-soft); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  cursor: pointer; color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.select-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.select-card[aria-checked="true"] { border-color: var(--gold-500); background: var(--cream-300); box-shadow: var(--shadow-lift); }
.select-card__icon { flex: none; width: 48px; height: 48px; border-radius: var(--r-chip); background: var(--cream-300); display: grid; place-items: center; color: var(--ink); }
.select-card__icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.select-card[aria-checked="true"] .select-card__icon { background: var(--gold-500); }
.select-card__label { font-weight: 700; font-size: 1.05rem; line-height: 1.3; flex: 1; }
.select-card__label small { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--grey-500); margin-top: 2px; }
.select-card__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--divider); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.select-card[aria-checked="true"] .select-card__tick { border-color: var(--gold-500); background: var(--gold-500); }
.select-card__tick::after { content: ''; width: 6px; height: 11px; border: 2px solid var(--ink); border-top: 0; border-left: 0; transform: translateY(-1px) rotate(42deg); opacity: 0; }
.select-card[aria-checked="true"] .select-card__tick::after { opacity: 1; }
.select-card--year { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 var(--space-4); overflow: hidden; }
.select-card--year .select-card__photo { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 22px 22px 0 0; }
.select-card--year .select-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.select-card--year .select-card__label { padding: var(--space-3) var(--space-4) 0; }
.select-card--year .select-card__tick { position: absolute; top: 12px; right: 12px; background: var(--white); border-color: var(--white); }
.select-card--year[aria-checked="true"] .select-card__tick { background: var(--gold-500); border-color: var(--gold-500); }

/* ---- Build state ---- */
.build { max-width: 520px; margin: 0 auto; padding: var(--section-pad) var(--gutter); text-align: center; }
.build__mark { width: 70px; height: 64px; margin: 0 auto var(--space-5); animation: markPulse 2s ease-in-out infinite; }
@keyframes markPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.build__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; text-align: left; display: grid; gap: var(--space-3); }
.build__list li { display: flex; align-items: center; gap: var(--space-3); color: var(--grey-500); transition: color var(--dur-base) var(--ease); }
.build__list li::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--divider); background: transparent; transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.build__list li.is-done { color: var(--ink); }
.build__list li.is-done::before { background: var(--gold-500); border-color: var(--gold-500); }

/* ---- Plan stage cards ---- */
.deck { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-7) var(--gutter) var(--section-pad); }
.stage-card { background: var(--white); border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: 2.5rem; }
.stage-card h2 { margin: var(--space-4) 0 var(--space-4); }
.stage-card .body { margin-bottom: var(--space-4); }
.quietnote { font-size: var(--fs-small); color: var(--grey-500); margin: 0 0 var(--space-2); }
.activities { display: grid; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.activity { background: var(--cream-100); border-radius: var(--r-card); border-left: 6px solid var(--gold-500); padding: 1.25rem; line-height: 1.5; }
.note { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); font-size: var(--fs-small); color: var(--grey-600); }
.note b { color: var(--ink); }
.note__ic { flex: none; font-weight: 700; color: var(--ink); }
.level-head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-4); }
.level-disc { flex: none; width: 84px; height: 84px; border-radius: var(--r-card); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow-soft); }
.level-disc__n { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.level-head h3 { margin-bottom: var(--space-1); }
.level-head p { color: var(--grey-600); font-size: var(--fs-small); margin: 0; }
.level-track { display: flex; gap: 6px; margin: var(--space-4) 0 var(--space-2); }
.level-track button { flex: 1; min-height: 44px; border-radius: 12px; border: 2px solid transparent; color: var(--ink); font-weight: 800; font-size: 1.2rem; background: color-mix(in srgb, var(--tint) 40%, var(--white)); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.level-track button:hover { background: color-mix(in srgb, var(--tint) 70%, var(--white)); }
.level-track button[aria-pressed="true"] { background: var(--tint); border-color: var(--ink); transform: translateY(-2px); }
.level-track__labels { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--grey-500); margin-bottom: var(--space-4); }
.adjust { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; background: var(--cream-100); border-radius: var(--r-card); padding: var(--space-4) var(--space-5); margin-top: var(--space-4); }
.adjust h3 { font-size: 1.05rem; margin: 0 0 2px; }
.adjust p { font-size: var(--fs-small); color: var(--grey-600); margin: 0; }
.adjust__btns { margin-left: auto; display: flex; gap: var(--space-2); }
.adjust__btns .btn { width: 44px; height: 44px; padding: 0; font-size: 1.3rem; line-height: 1; }
.disclosure { margin-top: var(--space-3); }
.disclosure__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.disclosure__panel[aria-hidden="false"] { grid-template-rows: 1fr; opacity: 1; }
.disclosure__panel > div { overflow: hidden; }
.disclosure__inner { background: var(--cream-100); border-radius: var(--r-chip); padding: var(--space-4); font-size: var(--fs-small); margin-top: var(--space-2); }
.exchange { background: var(--cream-100); border-radius: var(--r-card); padding: var(--space-4) var(--space-5); }
.exchange__row { display: flex; gap: var(--space-3); align-items: baseline; padding: 4px 0; }
.exchange__who { flex: 0 0 3.2em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-500); }
.exchange__you { font-weight: 700; }
.home-note { background: var(--cream-300); border-radius: var(--r-bubble); padding: var(--space-5); font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.55; }
.checks { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checks__box { flex: none; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 6px; margin-top: 3px; }
.saved { display: flex; align-items: center; gap: var(--space-4); background: var(--cream-100); border-radius: var(--r-card); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.saved__big { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.saved__big small { font-size: 1rem; font-weight: 700; }
.saved p { font-size: var(--fs-small); color: var(--grey-600); margin: 0; }
.coverage { margin-top: var(--space-4); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.card-foot__spacer { min-width: 1px; }
.card-links { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.card-links__dot { color: var(--grey-500); }
.semh-photo { border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--space-4); aspect-ratio: 3 / 1; }
.semh-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* ---- Full plan (the document) ---- */
.fullplan { position: fixed; inset: 0; z-index: 200; overflow: auto; background: var(--cream-100); }
.fullplan__dialog { position: relative; max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-4) var(--gutter) var(--space-8); }
.fullplan__bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) 0; }
.sheet { background: var(--white); border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.sheet__head { border-top: 4px solid var(--gold-500); padding: var(--space-6) var(--space-7) var(--space-5); display: grid; grid-template-columns: 140px 1fr; gap: var(--space-6); align-items: start; }
.sheet__head img { width: 140px; height: auto; }
.sheet__head h2 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.sheet__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.sheet__field { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); color: var(--grey-500); }
.sheet__field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.sheet__field input { font: 400 var(--fs-body) var(--font-body); color: var(--ink); background: transparent; border: 0; border-bottom: 2px dotted var(--grey-500); padding: 0.4rem 0; min-height: 44px; border-radius: 0; }
.sheet__field input::placeholder { color: var(--grey-500); }
.sheet__field input:focus-visible { border-radius: 4px; }
.sheet__body { padding: 0 var(--space-7) var(--space-6); }
.sheet__section { padding: var(--space-6) 0; border-top: 1px solid var(--divider); break-inside: avoid; }
.sheet__section:first-child { border-top: 0; }
.sheet__section h3 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.sheet__section p, .sheet__section li { color: var(--ink); }
.sheet__section ul { padding-left: 1.2em; margin: 0 0 var(--space-3); }
.sheet__section li { margin-bottom: var(--space-2); break-inside: avoid; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.dl dt { font-weight: 700; }
.dl dd { margin: 0; }
.rule-line { height: 2.2em; border-bottom: 1px solid var(--grey-500); }
.rule-label { font-size: var(--fs-small); color: var(--grey-500); margin: var(--space-3) 0 0; }
.sheet__foot { padding: var(--space-5) var(--space-7) var(--space-6); border-top: 1px solid var(--divider); font-size: var(--fs-small); color: var(--grey-500); }
.sheet__foot p { margin: 0 0 var(--space-2); }
.sheet .level-tint { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 8px; color: var(--ink); font-family: var(--font-display); font-weight: 800; }

/* ---- Trust view ---- */
.trust__lede { text-align: center; max-width: 720px; padding-top: var(--section-pad); }
.trust__lede .pill { margin-bottom: var(--space-4); }
.trust__title { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.01em; }
.trust__visual { padding-block: var(--space-6) var(--space-7); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.stat-card { text-align: center; padding: var(--space-5); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: var(--space-2); }
.stat-card__num { font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; line-height: 1.05; }
.stat-card__label { color: var(--grey-500); font-size: var(--fs-small); }
.trust__cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-5); padding-block: var(--space-7) var(--section-pad); }
.panel { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-soft); padding: var(--space-5); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--divider); }
.srow:first-child { border-top: 0; }
.srow__name { font-weight: 700; }
.srow__meta { display: flex; align-items: center; gap: var(--space-3); color: var(--grey-500); font-size: var(--fs-small); }
.mini { height: 8px; width: 64px; background: var(--divider); border-radius: 99px; overflow: hidden; }
.mini i { display: block; height: 100%; background: var(--gold-500); }
.covrow { margin-bottom: var(--space-4); }
.covrow__label { display: flex; justify-content: space-between; font-size: var(--fs-small); margin-bottom: 6px; }
.covrow__label span { color: var(--grey-500); }
.covbar { height: 8px; background: var(--divider); border-radius: 99px; overflow: hidden; }
.covbar i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1s var(--ease); }
.trust__caption { display: block; margin-top: var(--space-4); margin-bottom: 0; }

/* ---- Footer ---- */
.site-footer { background: var(--white); border-top: 1px solid var(--divider); font-size: var(--fs-small); color: var(--grey-500); }
.site-footer__inner { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5); }
.site-footer strong { color: var(--ink); }

/* ---- Breakpoints: exactly three ---- */
@media (max-width: 1200px) {
  .hero__inner { gap: var(--space-6); }
}
@media (max-width: 960px) {
  :root { --section-pad: 64px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 420px; margin: 0 auto; width: 100%; }
  .hero__content { text-align: left; }
  .trust__cols { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .selection-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --section-pad: 48px; }
  .site-header__inner { gap: var(--space-3); }
  .site-header__rule { display: none; }
  .site-header__nav { width: 100%; justify-content: space-between; margin-left: 0; }
  .site-logo img { height: 36px; }
  .how { grid-template-columns: 1fr; }
  .examples__row { flex-direction: column; }
  .examples__row .btn { width: 100%; }
  .selection-grid, .selection-grid--2 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .stage-card { padding: 1.5rem; }
  .level-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .card-foot { flex-wrap: wrap; }
  .card-foot .btn { flex: 1; }
  .progress__steps { display: none; }
  .progress__compact { display: block; font-size: var(--fs-small); color: var(--ink); }
  .progress__compact::after { content: ''; display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-500) 0 var(--done, 0%), var(--ink) var(--done, 0%) var(--now, 0%), var(--divider) var(--now, 0%) 100%); }
  .sheet__head { grid-template-columns: 1fr; padding: var(--space-5); }
  .sheet__fields { grid-template-columns: 1fr; }
  .sheet__body, .sheet__foot { padding-inline: var(--space-5); }
  .fullplan__dialog { padding-inline: var(--space-3); }
  .bubble { font-size: 0.85rem; padding: 0.5rem 0.85rem; }
  .bubble--3 { left: -2%; }
  .bubble--1 { left: 0; }
  .bubble--2 { right: 0; }
}

/* ---- Reduced motion: no floats, no pulses, no hover lift ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bubble, .build__mark, .voice-toggle.is-speaking .voice-toggle__dot, .voice-toggle.is-waiting .voice-toggle__dot { animation: none !important; }
  .btn:hover, .select-card:hover, .level-track button[aria-pressed="true"] { transform: none !important; }
  .scene { animation: none; opacity: 1; transform: none; }
}

/* ---- Print: the designed document lives at print/. Here only the chrome is hidden. ---- */
@media print {
  .site-header, .site-footer, .fullplan__bar, .skip-link, .voice-gate { display: none !important; }
}