/* ==========================================================================
   Sakra — prototype design system
   Front-end only. No external requests.
   ========================================================================== */

/* --- Webfont ------------------------------------------------------------
   Mulish, self-hosted (SIL OFL, assets/fonts/OFL.txt) and subset to the
   Latin range this site actually uses. It replaces Avenir Next as the sans
   because Avenir Next has no schwa: Ə (U+018F) and ə (U+0259) are absent
   from the family, so every Azerbaijani word containing them fell back to a
   different typeface mid-word. Mulish keeps Avenir's geometric-humanist
   proportions, so the existing spacing and rhythm are unchanged.

   One variable file covers the 400-700 range the design uses. Still no
   external requests -- the file ships in assets/ and needs no build step.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Mulish";
  src: url("assets/fonts/mulish-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Brand */
  --header-h: 80px;
  --cream:        #F8F6F2;
  --rust-deep:    #664A3A;
  --rust:         #A85A3A;
  --rose:         #D4949E;

  /* Derived neutrals (all mixed from the four brand colours) */
  --cream-2:      #F2EEE8;   /* quiet panel */
  --cream-3:      #EAE4DB;   /* hairline / inset */
  --ink:          var(--rust-deep);
  --ink-soft:     #7A6154;   /* body copy, still AA on cream */
  --ink-muted:    #77604F;   /* meta / captions, ≥16px only */
  --rust-dark:    #8E4A2E;   /* CTA hover */
  --rust-text:    #93482B;   /* rust used as small text (AA on cream + tints) */
  --rust-tint:    #F2E4DB;   /* soft rust wash */
  --rose-tint:    #F6EBEC;
  --line:         #E3DBD1;
  --line-strong:  #D3C7B9;
  --white:        #FFFFFF;

  /* Type */
  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  /* Mulish first; the fallbacks are ordered so that every one of them also
     carries Ə/ə, in case the webfont fails to load. */
  --sans:  "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid scale */
  --fs-display: clamp(2.35rem, 1.7rem + 2.7vw, 4.35rem);
  --fs-h1:      clamp(2.1rem, 1.45rem + 2.7vw, 3.9rem);
  --fs-h2:      clamp(1.75rem, 1.32rem + 1.8vw, 2.9rem);
  --fs-h3:      clamp(1.24rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-lead:    clamp(1.03rem, 0.98rem + 0.35vw, 1.24rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Space */
  --gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.75rem);
  --sect-y:  clamp(2.75rem, 1.6rem + 4vw, 5.25rem);
  --sect-y-sm: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  --maxw: 1240px;
  --maxw-narrow: 720px;

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(102,74,58,.05), 0 12px 34px -18px rgba(102,74,58,.28);
  --shadow-lift: 0 2px 4px rgba(102,74,58,.06), 0 26px 56px -24px rgba(102,74,58,.36);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .42s;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 80px) + 16px); }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; }
h1 { font-size: var(--fs-h1); line-height: 1.06; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.24; letter-spacing: -.006em; }
p { max-width: 66ch; }
a { color: inherit; }

::selection { background: var(--rust-tint); color: var(--rust-deep); }

:focus-visible {
  outline: 2.5px solid var(--rust);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--rust-deep); color: var(--cream);
  padding: .7rem 1.1rem; border-radius: var(--r-sm); font-size: var(--fs-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* --- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: var(--sect-y); }
.section--tight { padding-block: var(--sect-y-sm); }
.section--panel { background: var(--cream-2); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust-text);
  margin-bottom: .9rem;
}
.eyebrow--onDark { color: #F6DFDF; }

.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }

.stack > * + * { margin-top: 1.1rem; }
.stack-sm > * + * { margin-top: .55rem; }
.stack-lg > * + * { margin-top: 1.9rem; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .85rem 1.65rem;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .005em;
  border-radius: var(--r-sm);
  text-decoration: none; text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .2s var(--ease), box-shadow var(--dur) var(--ease);
  border: 1.5px solid transparent;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--rust); color: #FFF9F4; box-shadow: 0 10px 24px -14px rgba(168,90,58,.75); }
.btn--primary:hover { background: var(--rust-dark); box-shadow: 0 14px 30px -14px rgba(142,74,46,.8); }

.btn--ghost { border-color: var(--line-strong); color: var(--rust-deep); background: transparent; }
.btn--ghost:hover { border-color: var(--rust-deep); background: rgba(102,74,58,.045); }

.btn--onDark { border-color: rgba(248,246,242,.6); color: var(--cream); background: rgba(248,246,242,.06); }
.btn--onDark:hover { background: var(--cream); color: var(--rust-deep); border-color: var(--cream); }

.btn--light { background: var(--cream); color: var(--rust-deep); }
.btn--light:hover { background: #fff; }

.btn--quiet { min-height: 44px; padding: .55rem .95rem; font-weight: 600; color: var(--ink-soft); }
.btn--quiet:hover { color: var(--rust-deep); background: rgba(102,74,58,.05); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--rust-text);
  text-decoration: none; padding: .35rem 0;
  border-bottom: 1.5px solid var(--rust-tint);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-arrow:hover { border-color: var(--rust); gap: .8rem; color: var(--rust-dark); }
.link-arrow::after { content: "\2192"; font-size: 1.05em; line-height: 1; }

/* --- Header ------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 90;
  padding-block: .85rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease);
  padding-top: max(.85rem, env(safe-area-inset-top));
}
.header.is-stuck {
  background: rgba(248,246,242,.93);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  border-bottom-color: var(--line);
  padding-block: .6rem;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; object-fit: contain; }
.brand__word {
  font-family: var(--serif); font-size: 1.32rem; letter-spacing: .19em;
  text-transform: uppercase; color: var(--rust-deep); line-height: 1;
  padding-left: .08em;
}
.brand--footer .brand__mark { width: 54px; height: 54px; filter: brightness(0) invert(1); }
.brand--footer .brand__word { color: var(--cream); font-size: 1.5rem; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav__link {
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-soft); padding: .6rem .85rem; border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--rust-deep); background: rgba(102,74,58,.055); }

/* Transparent-over-hero state: everything in the header goes light. */
@media (min-width: 901px) {
  .header--overlay:not(.is-stuck) .brand__word { color: #FDF6EF; }
  .header--overlay:not(.is-stuck) .brand__mark { filter: brightness(0) invert(1) opacity(.94); }
  .header--overlay:not(.is-stuck) .nav__link { color: #FDF6EF; }
  .header--overlay:not(.is-stuck) .nav__link:hover { color: #fff; background: rgba(255,255,255,.14); }
}
.header--overlay:not(.is-stuck) .menu-toggle { border-color: rgba(253,246,239,.5); }
.header--overlay:not(.is-stuck) .menu-toggle__bars::before,
.header--overlay:not(.is-stuck) .menu-toggle__bars::after { background: #FDF6EF; }
.header--overlay:not(.is-stuck) .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before,
.header--overlay:not(.is-stuck) .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { background: var(--rust-deep); }
.header--overlay:not(.is-stuck) .menu-toggle[aria-expanded="true"] { border-color: var(--line-strong); }
@media (max-width: 900px) {
  .header--overlay:not(.is-stuck) .brand__word { color: #FDF6EF; }
  .header--overlay:not(.is-stuck) .brand__mark { filter: brightness(0) invert(1) opacity(.94); }
}
.brand__word, .brand__mark { transition: color .35s var(--ease), filter .35s var(--ease); }
.nav .btn { margin-left: .6rem; }

.menu-toggle {
  display: none;
  position: relative; z-index: 96;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.menu-toggle:hover { border-color: var(--rust-deep); }
.menu-toggle__bars { display: block; width: 19px; height: 11px; position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.6px;
  background: var(--rust-deep); border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after  { top: 9.4px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 4.7px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { top: 4.7px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw);
    background: var(--cream); border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .2rem; padding: 6.2rem var(--gutter) 2rem;
    padding-top: max(6.2rem, calc(env(safe-area-inset-top) + 5.4rem));
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
    box-shadow: -24px 0 60px -30px rgba(102,74,58,.5);
    overflow-y: auto;
    z-index: 95;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
  .nav__link { font-family: var(--serif); font-size: 1.35rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__link:hover { background: transparent; }
  .nav .btn { margin: 1.4rem 0 0; width: 100%; }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(72,50,38,.42);
    opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); z-index: 85;
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
  body.nav-locked { overflow: hidden; }
}
@media (min-width: 901px) { .nav-scrim { display: none; } }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; }
.hero__media {
  position: relative;
  min-height: 100svh;
  display: grid;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h, 80px)); /* slide under the transparent header */
  padding-top: var(--header-h, 80px);
}
.hero__video, .hero__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* Stacking order matters: fallback behind, video over it, scrim over both. */
.hero__fallback { z-index: -3; }
.hero__video    { z-index: -2; }
.hero__video { opacity: 0; transition: opacity .8s var(--ease); }
.hero__video.is-playing { opacity: 1; }

/* Warm, intentional brand-gradient fallback with a soft grain/light wash */
.hero__fallback {
  background:
    radial-gradient(58% 52% at 72% 24%, rgba(255,226,206,.62) 0%, rgba(255,226,206,0) 66%),
    radial-gradient(72% 62% at 88% 8%, rgba(212,148,158,.55) 0%, rgba(212,148,158,0) 62%),
    radial-gradient(90% 74% at 6% 96%, rgba(74,50,38,.82) 0%, rgba(74,50,38,0) 64%),
    linear-gradient(152deg, #CE8055 0%, #B4643D 30%, #9A5537 56%, #6E4C39 82%, #55392C 100%);
}
.hero__fallback::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 7px),
    radial-gradient(58% 46% at 66% 30%, rgba(255,245,235,.22) 0%, rgba(255,245,235,0) 70%);
  mix-blend-mode: soft-light;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(48,30,22,.56) 0%, rgba(48,30,22,.34) 34%, rgba(48,30,22,.5) 62%, rgba(48,30,22,.82) 100%),
    linear-gradient(96deg, rgba(48,30,22,.34) 0%, rgba(48,30,22,.1) 46%, rgba(48,30,22,0) 72%);
}
@media (max-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(44,27,20,.62) 0%, rgba(44,27,20,.5) 34%, rgba(44,27,20,.62) 62%, rgba(44,27,20,.86) 100%);
  }
}
.hero__placeholder-tag {
  position: absolute; right: var(--gutter); bottom: clamp(1.1rem, .6rem + 1.2vw, 1.9rem); z-index: 2;
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,245,240,.92);
  border: 1px solid rgba(248,246,242,.42);
  border-radius: var(--r-pill); padding: .35rem .8rem;
  background: rgba(40,25,18,.5);
}
.hero__video.is-playing ~ .hero__placeholder-tag { display: none; }

.hero__content {
  position: relative; z-index: 1;
  align-self: center;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
  color: var(--cream);
}
.hero__inner { max-width: 54ch; }
.hero h1 { max-width: 15ch; }
.hero h1 { font-size: var(--fs-display); color: #FFF8F1; text-shadow: 0 2px 26px rgba(48,30,22,.4); }
.hero__sub { font-size: var(--fs-lead); color: rgba(252,247,241,.93); margin-top: 1.15rem; max-width: 48ch; }
.hero__note {
  margin-top: 1.6rem; font-size: var(--fs-xs); color: rgba(252,247,242,.95);
}
.hero .btn-row { margin-top: 2rem; }

/* Short landscape phones: let the hero shrink to its content so the CTAs stay near the fold. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero__media { min-height: 0; padding-bottom: 2.25rem; }
  .hero__content { padding-bottom: 0; }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); }
  .hero__sub { margin-top: .8rem; }
  .hero .btn-row { margin-top: 1.4rem; }
  .hero__note { margin-top: 1rem; }
  .hero__placeholder-tag { display: none; }
}

/* Hero entrance */
.hero__inner > * { opacity: 0; transform: translateY(16px); animation: heroIn .95s var(--ease) forwards; }
.hero__inner > *:nth-child(1) { animation-delay: .06s; }
.hero__inner > *:nth-child(2) { animation-delay: .16s; }
.hero__inner > *:nth-child(3) { animation-delay: .26s; }
.hero__inner > *:nth-child(4) { animation-delay: .36s; }
.hero__inner > *:nth-child(5) { animation-delay: .46s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* --- Section headings --------------------------------------------------- */
.sect-head { max-width: 62ch; }
.sect-head p { margin-top: 1rem; }
.sect-head--split {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end; max-width: none;
}
@media (max-width: 860px) { .sect-head--split { grid-template-columns: 1fr; align-items: start; } }

/* --- Editorial two-column ----------------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.split--reverse .split__media { order: -1; }
@media (min-width: 901px) {
  .split--balanced { align-items: stretch; }
  .split--balanced .split__copy { align-self: center; }
  .split--balanced .split__media,
  .split--balanced .media-stack { height: 100%; }
  .split--balanced .media-stack__img {
    height: 100%;
    min-height: clamp(380px, 34vw, 540px);
    object-fit: cover;
  }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split--reverse .split__media { order: 0; }
}
.split__copy { max-width: 56ch; }

/* "Professional support" only: the copy column matches the photograph's width
   and takes a looser vertical rhythm, so five list items beside a picture read
   as editorial rather than packed. Scoped — .split and .flist are shared with
   several other layouts that should not change. */
@media (min-width: 901px) {
  .split--roomy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.split--roomy .split__copy { max-width: none; }
.split--roomy .stack > * + * { margin-top: 1.35rem; }
.split--roomy .flist li { padding: 1.35rem 0; }
.split--roomy .flist strong { margin-bottom: .3rem; }
.split--roomy .flist span { line-height: 1.7; }

/* --- Photographs -------------------------------------------------------- */
.figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--cream-2);
  box-shadow: var(--shadow-soft);
}
.figure img { display: block; width: 100%; height: auto; }

/* A photograph and a panel read as one composed block. */
.media-stack { display: grid; gap: 1rem; }
.media-stack__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft); background: var(--cream-3);
}

/* --- Mock UI surfaces --------------------------------------------------- */
.mock {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.mock__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem .85rem; border-bottom: 1px solid var(--line);
  background: var(--white); flex-wrap: wrap;
}
@media (max-width: 520px) {
  .mock__bar { gap: .35rem .75rem; }
  .mock__tag { white-space: normal; }
}
.mock__title { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.mock__tag {
  font-size: var(--fs-xs); color: var(--ink-muted); background: transparent;
  border-radius: 0; padding: 0; font-weight: 500; white-space: nowrap;
  letter-spacing: .08em; text-transform: uppercase;
}
.mock__body { padding: clamp(1.15rem, 3vw, 1.85rem); }

/* Metric rows */
.metric + .metric { margin-top: 1.4rem; }
.metric__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.metric__name { font-weight: 600; font-size: var(--fs-sm); }
.metric__val { font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.meter { height: 7px; background: var(--cream-3); border-radius: var(--r-pill); overflow: hidden; }
.meter__fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--rust) 0%, #C0714C 100%);
  width: var(--v, 50%);
  transform-origin: left;
  transition: width 1.1s var(--ease);
}
.meter--soft .meter__fill { background: linear-gradient(90deg, #B98A79 0%, var(--rose) 100%); }
.metric__note { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: .4rem; }

/* Portrait-led skin analysis */
.analysis-visual {
  position: relative;
  min-height: clamp(540px, 52vw, 680px);
  isolation: isolate;
}
.analysis-portrait {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--r-lg) * 1.25);
  background: var(--cream);
}
.analysis-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--cream) 0%, rgba(248,246,242,0) 11%, rgba(248,246,242,0) 89%, var(--cream) 100%),
    linear-gradient(180deg, var(--cream) 0%, rgba(248,246,242,0) 10%, rgba(248,246,242,0) 86%, var(--cream) 100%);
}
.analysis-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.analysis-callouts {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.analysis-callout {
  --connector: clamp(88px, 10vw, 142px);
  --angle: 0deg;
  position: absolute;
  width: clamp(190px, 18vw, 226px);
  padding: .9rem 1rem .85rem;
  border: 1px solid rgba(211,199,185,.92);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 34px -18px rgba(102,74,58,.48);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  color: var(--ink);
}
.analysis-callout__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
}
.analysis-callout h3 {
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
  font-weight: 700;
}
.analysis-callout strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  color: var(--rust-text);
  font-variant-numeric: tabular-nums;
}
.analysis-callout p {
  margin-top: .28rem;
  font-size: .78rem;
  color: var(--ink-muted);
}
.analysis-callout__meter {
  height: 4px;
  margin-top: .65rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--cream-3);
}
.analysis-callout__meter span {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: var(--rust);
}
.analysis-callout__meter--rose span { background: var(--rose); }
.analysis-callout__line {
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--connector);
  border-top: 1.5px dashed rgba(142,74,46,.72);
  transform: rotate(var(--angle));
  transform-origin: left center;
}
.analysis-callout__line::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 1px rgba(142,74,46,.28);
}
.analysis-callout--right .analysis-callout__line {
  left: auto;
  right: 100%;
  transform-origin: right center;
}
.analysis-callout--right .analysis-callout__line::after {
  right: auto;
  left: -4px;
}
.analysis-callout--hydration { left: 1.5%; top: 12%; --connector: clamp(140px, 20vw, 280px); --angle: 14deg; }
.analysis-callout--sensitivity { left: 0; top: 42%; --connector: clamp(145px, 20.5vw, 300px); --angle: 0deg; }
.analysis-callout--texture { left: 3.5%; top: 72%; --connector: clamp(130px, 18vw, 240px); --angle: -14deg; }
.analysis-callout--tone { right: 1.5%; top: 22%; --connector: clamp(135px, 18vw, 245px); --angle: -8deg; }
.analysis-callout--barrier { right: 2%; top: 61%; --connector: clamp(145px, 20.5vw, 300px); --angle: 9deg; }

@media (max-width: 760px) {
  .analysis-visual {
    min-height: 0;
    display: grid;
    gap: 1rem;
  }
  .analysis-portrait {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
  }
  .analysis-portrait::after {
    background:
      linear-gradient(90deg, var(--cream) 0%, rgba(248,246,242,0) 8%, rgba(248,246,242,0) 92%, var(--cream) 100%),
      linear-gradient(180deg, rgba(248,246,242,.32) 0%, rgba(248,246,242,0) 12%, rgba(248,246,242,0) 82%, var(--cream) 100%);
  }
  .analysis-portrait img {
    object-position: center;
  }
  .analysis-callouts {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem;
    pointer-events: auto;
  }
  .analysis-callout {
    position: relative;
    inset: auto;
    width: auto;
    padding: .85rem;
    background: var(--white);
    box-shadow: var(--shadow-soft);
  }
  .analysis-callout--texture { grid-column: 1 / -1; }
  .analysis-callout__line { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .analysis-visual.is-in .analysis-callout {
    animation: analysisCardIn .68s var(--ease) both;
  }
  .analysis-visual.is-in .analysis-callout:nth-child(2) { animation-delay: .08s; }
  .analysis-visual.is-in .analysis-callout:nth-child(3) { animation-delay: .16s; }
  .analysis-visual.is-in .analysis-callout:nth-child(4) { animation-delay: .24s; }
  .analysis-visual.is-in .analysis-callout:nth-child(5) { animation-delay: .32s; }
}
@keyframes analysisCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Magnifying lens over the portrait ---------------------------------------
   The photograph rests slightly desaturated; a soft lens follows the pointer,
   showing that spot in full colour and magnified. Two identical <img> layers
   in the same box with the same object-fit/position, so they align exactly:
   the lower one carries the real alt text and the resting filter, the upper
   one is scaled about the pointer and masked to a feathered circle.

   Scaling about transform-origin is what makes the magnification accurate —
   the point at (--lens-x, --lens-y) is the fixed point of the transform, so
   whatever sits under the pointer stays under the pointer while everything
   around it grows. No object-fit crop maths needed, and it stays correct
   through every responsive change of the frame.

   The resting desaturation is applied by .is-lens-ready, which app.js adds
   only after confirming soft masks are supported — so with scripting off, or
   on an engine without mask-image, the visitor simply gets the normal
   full-colour portrait rather than a permanently grey one. */
.analysis-portrait {
  --lens-x: 50%;
  --lens-y: 48%;
  --lens-r: 115px;      /* half of a ~230px lens */
  --lens-solid: 74%;    /* feather runs from here to the rim */
  --lens-mag: 1.3;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Resting state of the photograph itself. Tuned against this actual
   photograph rather than to a number: below about half saturation its warm
   skin tones collapse to grey, and the lens then reads as a scanner
   highlight instead of a closer look. The 1.6x magnification is doing most
   of the work of making the lens obvious. */
.analysis-portrait.is-lens-ready > img {
  filter: saturate(.6) brightness(.96);
  transition: filter .45s var(--ease);
}
.analysis-portrait__lens {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0;
  transition: opacity .26s var(--ease);
  -webkit-mask-image: radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y),
                      #000 0%, #000 var(--lens-solid), transparent 100%);
  mask-image: radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y),
              #000 0%, #000 var(--lens-solid), transparent 100%);
}
.analysis-portrait.is-lens-on .analysis-portrait__lens { opacity: 1; }
.analysis-portrait__lens img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 48%;
  transform: scale(var(--lens-mag));
  transform-origin: var(--lens-x) var(--lens-y);
}

/* The focusable surface. A transparent overlay rather than a wrapping button,
   so the photograph keeps its own alt text. touch-action is off so a finger
   can scrub in any direction; the portrait is well short of a full mobile
   viewport, and page scrolling resumes the moment the finger lifts. */
.analysis-portrait__hit {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; cursor: crosshair; background: transparent;
  touch-action: none;
}
.analysis-portrait__hit:focus-visible { outline: 2.5px solid var(--rust); outline-offset: -4px; border-radius: calc(var(--r-lg) * 1.25); }

@media (max-width: 900px) { .analysis-portrait { --lens-r: 100px; } }
@media (max-width: 560px) { .analysis-portrait { --lens-r: 76px; --lens-solid: 70%; } }

@media (prefers-reduced-motion: reduce) {
  /* Magnification stays — the visitor drives it directly. Only the fade goes. */
  .analysis-portrait__lens { transition: none; }
  .analysis-portrait.is-lens-ready > img { transition: none; }
}

/* Profile petal ----------------------------------------------------------
   Chart and its text equivalent, side by side. The list is the source of
   record: it is present with scripting off, needs no hover, and carries the
   same five values the chart draws. */
.petal {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
/* Reserved square, so the lazy widget cannot shift the page when it lands. */
.petal__chart {
  aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin-inline: auto;
  min-height: 0;
}
.petal__copy { display: grid; gap: .9rem; justify-items: start; }
.petal__copy h3 { margin-top: .1rem; }
.petal__copy p { font-size: var(--fs-sm); color: var(--ink-soft); }
.petal__copy .xs { font-size: var(--fs-xs); }
.petal__list { display: grid; gap: 0; width: 100%; max-width: 30rem; border-top: 1px solid var(--line); }
.petal__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.petal__list span { color: var(--ink-soft); }
.petal__list strong {
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1;
  color: var(--rust-text); font-variant-numeric: tabular-nums;
}
.petal__list small { font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-muted); }

@media (max-width: 860px) {
  .petal { grid-template-columns: 1fr; }
  .petal__chart { max-width: 360px; }
}

/* Timeline / progress mock */
.timeline { display: grid; gap: .1rem; }
.tl-row {
  display: grid; grid-template-columns: 74px minmax(0,1fr) auto;
  gap: 1rem; align-items: center; padding: .8rem 0;
  border-bottom: 1px dashed var(--line);
}
.tl-row:last-child { border-bottom: 0; }
.tl-date { font-size: var(--fs-xs); color: var(--ink-muted); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.tl-bar { height: 8px; background: var(--cream-3); border-radius: var(--r-pill); overflow: hidden; }
.tl-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--rust); opacity: var(--o, 1); }
.tl-note { font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 520px) {
  .tl-row { grid-template-columns: 62px minmax(0,1fr); }
  .tl-note { grid-column: 1 / -1; white-space: normal; }
}

/* --- Plans -------------------------------------------------------------- */
.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; } }

.plan {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.plan:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
/* The recommended plan is Guided, not the most expensive one. It is marked by
   a ring and a badge rather than by inverting the card, so Concierge never
   reads as "the best" simply for costing more. */
.plan--rec { border-color: var(--rust); box-shadow: 0 0 0 1.5px var(--rust), var(--shadow-soft); }

.plan__label {
  font-size: var(--fs-xs); letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
  color: var(--rust-text); border: 1px solid var(--rust-tint); background: var(--rust-tint);
  border-radius: var(--r-pill); padding: .22rem .7rem; align-self: flex-start; margin-bottom: .9rem;
}
.plan--rec .plan__label { color: #FFF9F4; background: var(--rust); border-color: var(--rust); }
/* Keeps the three plan headings on one baseline while the grid is 3-up. */
.plan__label--spacer { visibility: hidden; }
@media (max-width: 940px) { .plan__label--spacer { display: none; } }
.plan__name { font-family: var(--serif); font-size: 1.65rem; line-height: 1.1; }

/* Who the plan is for, read before the price. */
.plan__for { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.5; margin-bottom: .55rem; }
.plan__price { font-family: var(--serif); font-size: 2.35rem; line-height: 1; margin-top: .85rem; color: var(--rust-deep); }
.plan__price small { font-family: var(--sans); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); margin-left: .35rem; font-weight: 600; }
/* The outcome, in the plan's own words — the line that decides it. */
.plan__promise {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; color: var(--rust-deep);
}
.plan__incl-head {
  margin-top: 1.4rem; font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-muted);
}
.plan__list { margin-top: .85rem; display: grid; gap: .6rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.plan__list li { position: relative; padding-left: 1.35rem; }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rust);
}
/* Everything inherited from the tier below lives here, so the scan path stays
   short. Native <details> — keyboard accessible with no JS. */
.plan__more { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.plan__more > summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rust-text); display: flex; align-items: center; gap: .45rem;
  padding: .25rem 0; border-radius: var(--r-sm);
}
.plan__more > summary::-webkit-details-marker { display: none; }
.plan__more > summary::after { content: "+"; font-size: 1.05rem; line-height: 1; }
.plan__more[open] > summary::after { content: "\2212"; }
.plan__more > summary:hover { color: var(--rust-dark); }
.plan__more .plan__list { margin-top: .8rem; }

.plan__foot { margin-top: auto; padding-top: 1.7rem; }
.plan__foot .btn { width: 100%; padding-inline: 1rem; }

.plan[aria-pressed="true"], .plan.is-selected { border-color: var(--rust); box-shadow: 0 0 0 1.5px var(--rust), var(--shadow-soft); }

/* Landing plan preview (no prices) */
.plan-preview { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .plan-preview { grid-template-columns: 1fr; } }
.pcard {
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pcard__media {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; background: var(--cream-3);
}
.pcard__body {
  display: flex; flex-direction: column; gap: .8rem; flex: 1;
  padding: clamp(1.35rem, 2.6vw, 1.85rem) clamp(1.3rem, 2.4vw, 1.7rem) clamp(1.5rem, 2.8vw, 2rem);
}
.pcard__num {
  font-family: var(--serif); font-size: 1rem; color: var(--rust-text);
  letter-spacing: .16em; margin-bottom: .3rem;
}
.pcard__name { font-family: var(--serif); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.15rem); line-height: 1.05; }
.pcard__price { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: -.35rem; }
.pcard__for { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.5; }
.pcard__desc { color: var(--ink-soft); font-size: var(--fs-sm); }
.pcard__list {
  display: grid; gap: .5rem; flex: 1;
  font-size: var(--fs-sm); color: var(--ink-soft);
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.pcard__list li { position: relative; padding-left: 1.35rem; align-self: start; }
.pcard__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rust);
}
.pcard .link-arrow { align-self: flex-start; }

/* Focus, not "winner": whichever card the reader is attending to steps
   forward, and the others let their photograph settle back. Only the images
   quieten — every card's text keeps its full contrast, and the CTA of a
   quietened card stays immediately usable. Hover is gated behind a real
   pointer so a first tap on a phone never leaves a card stuck in a
   half-active state; :focus-within covers keyboard on every device. */
.pcard:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--rust);
}
.plan-preview:has(.pcard:focus-within) .pcard:not(:focus-within) .pcard__media { opacity: .78; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--rust); }
  .plan-preview:has(.pcard:hover) .pcard:not(:hover) .pcard__media { opacity: .78; }
}
.pcard__media { transition: opacity var(--dur) var(--ease); }

/* --- Journey timeline ("How it works") ----------------------------------
   Four stages on one connected rail. The rail is drawn per stage as a
   segment reaching down to the next stage's dot, so with JavaScript off it
   still renders as one complete, correct line — app.js only scales the rust
   fill inside each segment as the reader travels down. Decorative
   throughout; the ordered list, the step numbers and the headings carry the
   sequence on their own. */
.journey {
  --journey-col: 62px;
  --journey-gap: clamp(2.2rem, 3.4vw, 3rem);
  --journey-dot-y: .55rem;
  display: grid; gap: var(--journey-gap);
  max-width: 1000px;
}
.journey__stage {
  display: grid;
  grid-template-columns: var(--journey-col) clamp(150px, 19vw, 236px) minmax(0, 1fr);
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
.journey__marker { position: relative; align-self: stretch; }
.journey__dot {
  position: absolute; left: 50%; top: var(--journey-dot-y);
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  z-index: 1;
}
.journey__stage.is-current .journey__dot { background: var(--rust); box-shadow: inset 0 0 0 1.5px var(--rust), 0 0 0 4px var(--rust-tint); }
/* Rail segment: from this stage's dot down to the next stage's dot. */
.journey__marker::before,
.journey__marker::after {
  content: ""; position: absolute; left: 50%; width: 1.5px; margin-left: -.75px;
  top: var(--journey-dot-y);
  bottom: calc(-1 * (var(--journey-gap) + var(--journey-dot-y)));
}
.journey__marker::before { background: var(--line); }
.journey__marker::after {
  background: var(--rust);
  transform: scaleY(var(--seg-fill, 0)); transform-origin: top center;
}
.journey__stage:last-child .journey__marker::before,
.journey__stage:last-child .journey__marker::after { content: none; }

.journey__media {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  display: block; border-radius: var(--r-md); background: var(--cream-3);
  opacity: .74; transition: opacity var(--dur) var(--ease);
}
.journey__stage.is-current .journey__media { opacity: 1; }
/* The rule under the step number reads as the copy's underline. */
.journey__n {
  padding-top: 1.1rem; border-top: 1.5px solid var(--rust-deep);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  color: var(--rust-text); margin-bottom: .55rem;
}
.journey__body h3 { margin-bottom: .45rem; }
.journey__body p { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 52ch; }

@media (max-width: 860px) {
  .journey { --journey-col: 34px; --journey-gap: 2.1rem; }
  .journey__stage { grid-template-columns: var(--journey-col) minmax(0, 1fr); }
  .journey__marker { grid-row: 1 / span 2; }
  .journey__media { grid-column: 2; max-width: 320px; }
  .journey__body { grid-column: 2; margin-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Completed state, immediately: filled rail, every stage at full presence. */
  .journey__marker::after { transform: scaleY(1); }
  .journey__media { opacity: 1; }
  .journey__dot { background: var(--rust); box-shadow: inset 0 0 0 1.5px var(--rust), 0 0 0 4px var(--rust-tint); }
}

/* --- Feature list (professional support) -------------------------------- */
.flist { display: grid; gap: 0; }
.flist li { padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.flist li:first-child { border-top: 1px solid var(--line); }
.flist strong { display: block; font-size: var(--fs-body); font-weight: 600; }
.flist span { font-size: var(--fs-sm); color: var(--ink-soft); }

/* --- Quote / callout band ----------------------------------------------- */
.band {
  /* Base is lifted so that base + scrim lands back on the original rust when the
     film is absent or still loading. Once the film plays it covers this entirely. */
  background: #BA633B;
  color: #FFF7F1;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  position: relative; overflow: hidden;
  isolation: isolate;
}
.band__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: 0; transition: opacity .9s var(--ease);
}
.band__video.is-playing { opacity: 1; }
.band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(66,34,20,.40) 0%, rgba(66,34,20,.30) 45%, rgba(66,34,20,.50) 100%),
    linear-gradient(96deg, rgba(66,34,20,.24) 0%, rgba(66,34,20,.06) 55%, rgba(66,34,20,.20) 100%);
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70% 120% at 88% -10%, rgba(212,148,158,.22) 0%, rgba(212,148,158,0) 62%);
  pointer-events: none;
}
.band__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(1.75rem, 4vw, 4.5rem); align-items: end;
}
@media (max-width: 880px) { .band__inner { grid-template-columns: 1fr; align-items: start; gap: 1.75rem; } }
.band h2 { color: #FFF8F2; max-width: 17ch; font-size: var(--fs-h1); }
.band p { color: #FFF7F1; max-width: 42ch; }
.band .btn-row { margin-top: 1.9rem; }

.final-cta-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .final-cta-grid { grid-template-columns: 1fr; gap: 2.25rem; } }
.final-cta { max-width: 620px; }
.cta-figure { margin: 0; }
.cta-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft); background: var(--cream-3);
}
.final-cta__title { font-size: var(--fs-h1); max-width: 18ch; }

.callout {
  background: var(--rust-deep); color: var(--cream);
  border-radius: var(--r-md); padding: clamp(1.6rem, 3vw, 2.3rem);
}
.callout p { color: rgba(248,246,242,.94); }
.callout .serif { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); line-height: 1.25; color: #FCF7F2; }

/* --- Check-in comparison -------------------------------------------------
   Each of the four states is an exact quarter of one supplied file
   (assets/skin-progress-weeks-0-2-4-6.png) — nothing is stretched or paired
   up to manufacture a before/after. See assets/README.txt for what that file
   actually is and how a replacement must be shaped.

   No JavaScript: a native radio group carries the state, :has() reads it, and
   every week's own label text is always visible, so the whole thing works
   with scripting off. app.js only adds the two-second auto-advance on top. */
.checkin { --i: 0; margin: 0; }
.checkin:has(.checkin__opt input[value="1"]:checked) { --i: 1; }
.checkin:has(.checkin__opt input[value="2"]:checked) { --i: 2; }
.checkin:has(.checkin__opt input[value="3"]:checked) { --i: 3; }

.checkin__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap; margin-bottom: .7rem;
}
.checkin__frame {
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--cream-3); box-shadow: var(--shadow-soft);
}
.checkin__img {
  width: 400%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 8%;
  transform: translateX(calc(var(--i) * -25%));
  transition: transform .38s var(--ease);
}

.checkin__pick {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative; margin-top: 1rem;
}
/* Decorative rail behind the four markers, first marker centre to last. */
.checkin__pick::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 14px;
  height: 1.5px; background: var(--line);
}
.checkin__opt { cursor: pointer; }
.checkin__opt input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.checkin__optbox {
  position: relative; display: grid; justify-items: center; gap: .28rem;
  min-height: 52px; padding: .5rem .3rem .3rem; border-radius: var(--r-sm);
  text-align: center;
}
.checkin__marker {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.checkin__optbox strong { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); }
.checkin__optbox small { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.4; }
/* Selection is carried by the marker's ring and the weight/colour of its
   label, not by colour alone — and the radio itself announces it. */
.checkin__opt input:checked + .checkin__optbox .checkin__marker {
  background: var(--rust); box-shadow: inset 0 0 0 1.5px var(--rust), 0 0 0 4px var(--rust-tint);
}
.checkin__opt input:checked + .checkin__optbox strong { color: var(--rust-text); }
.checkin__opt input:focus-visible + .checkin__optbox { outline: 2.5px solid var(--rust); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .checkin__opt:hover .checkin__marker { box-shadow: inset 0 0 0 1.5px var(--rust); }
}
/* Once the split stacks, the check-in photograph would otherwise run the full
   column width and tower over the copy beside it. */
@media (max-width: 900px) {
  .checkin { max-width: 440px; }
}
/* Each week keeps its own description at every width — it wraps rather than
   disappearing, so the narrowest screens lose no information. */
@media (max-width: 430px) {
  .checkin__optbox { padding-inline: .15rem; }
  .checkin__optbox small { line-height: 1.3; }
}

/* --- Comparison slider -------------------------------------------------- */
.compare {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--cream-2);
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
}
@media (max-width: 560px) { .compare { aspect-ratio: 1 / 1; } }
/* Two stacked panes rather than bare <img>, so a not-yet-supplied photograph
   can fall back to the .imgph placeholder without breaking the wipe. The child
   selector is deliberate: .imgph also sets position, and would otherwise win
   on source order and drop both panes back into normal flow. */
.compare > .compare__pane { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare > .compare__pane--b { clip-path: inset(0 0 0 var(--pos, 50%)); }

/* Two pending photographs would stack two placeholder labels on top of each
   other and the captions — show one for the pair instead. */
.compare .imgph.is-missing::after { content: none; }
.compare:has(.imgph.is-missing)::after {
  content: "Photographs pending";
  position: absolute; top: .9rem; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); background: rgba(255,252,248,.86);
}

.compare__caption {
  position: absolute; bottom: .9rem; z-index: 3;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,252,248,.9); color: var(--rust-deep);
  padding: .3rem .7rem; border-radius: var(--r-pill);
}
.compare__caption--a { left: .9rem; }
.compare__caption--b { right: .9rem; }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: rgba(255,250,245,.95); z-index: 4;
  transform: translateX(-1px); pointer-events: none;
}
.compare__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px; transform: translate(-50%,-50%);
  border-radius: 50%; background: rgba(255,250,245,.96);
  box-shadow: 0 4px 14px rgba(72,46,34,.3);
}
.compare__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.compare:has(.compare__range:focus-visible) { outline: 2.5px solid var(--rust); outline-offset: 3px; }
.compare__range:focus-visible { outline: 2.5px solid var(--rust); outline-offset: -4px; border-radius: var(--r-md); }

/* --- FAQ ---------------------------------------------------------------- */
.faq-layout {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }
.faq-figure { margin: 0; }
.faq-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft); background: var(--cream-3);
}
@media (max-width: 900px) { .faq-figure img { aspect-ratio: 4 / 3; } }

.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  text-align: left; padding: 1.3rem 0; font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem); line-height: 1.3; color: var(--rust-deep);
  transition: color var(--dur) var(--ease);
}
.faq__btn:hover { color: var(--rust); }
.faq__icon { flex: 0 0 auto; position: relative; width: 16px; height: 16px; margin-top: .45em; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--rust); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__panel { overflow: hidden; height: 0; transition: height .38s var(--ease); }
.faq__panel-inner { padding: 0 0 1.5rem; max-width: 68ch; }
.faq__panel-inner p { color: var(--ink-soft); font-size: var(--fs-sm); }
.faq__panel-inner p + p { margin-top: .75rem; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--rust-deep); color: var(--cream);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2rem;
}
.footer__top {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 800px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; gap: 2.2rem; } }
.footer__tag { margin-top: 1.1rem; font-family: var(--serif); font-size: 1.35rem; color: rgba(248,246,242,.86); }
.footer h4 {
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: #EDBEC4; font-weight: 700; margin-bottom: 1rem;
}
.footer__links { display: grid; gap: .55rem; }
.footer__links a {
  text-decoration: none; color: rgba(248,246,242,.9); font-size: var(--fs-sm);
  transition: color var(--dur) var(--ease);
  display: inline-block; padding: .16rem 0;
}
.footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__links span.is-placeholder { color: rgba(248,246,242,.85); font-size: var(--fs-sm); cursor: default; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(248,246,242,.18);
  display: flex; flex-wrap: wrap; gap: .8rem 1.75rem; align-items: center;
  font-size: var(--fs-xs); color: rgba(248,246,242,.85);
}
.footer__disclaimer { flex-basis: 100%; max-width: 78ch; line-height: 1.7; }

/* --- Pending photograph -------------------------------------------------
   Images that have not been supplied yet keep their real src so dropping the
   file in needs no code change; app.js flags the 404 and this shows a warm
   placeholder in the meantime. Same pattern as the hero video. */
.imgph { position: relative; overflow: hidden; background: var(--cream-3); }
.imgph > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imgph.is-missing {
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(212,148,158,.26) 0%, rgba(212,148,158,0) 62%),
    linear-gradient(148deg, #EFE6DC 0%, #E4D5C7 56%, #D9C4B5 100%);
}
.imgph.is-missing > img { visibility: hidden; }
.imgph.is-missing::after {
  content: "Photograph pending";
  position: absolute; inset: auto 0 0 0;
  padding: .45rem .8rem;
  font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); background: rgba(255,252,248,.84);
}

/* --- Learn: editorial index --------------------------------------------- */
.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: stretch;
}
@media (max-width: 900px) { .learn-hero { grid-template-columns: 1fr; } }
.learn-hero__media {
  margin: 0; aspect-ratio: 4 / 3;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 900px) { .learn-hero__media { aspect-ratio: 16 / 10; } }
.learn-hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 3.5vw, 2.9rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.learn-hero__copy h2 { font-size: var(--fs-h2); max-width: 17ch; margin-top: .2rem; }
.learn-hero__copy .lead { margin-top: 1rem; max-width: 44ch; }
.learn-hero__copy .btn-row { margin-top: 1.8rem; }

.rail + .rail { margin-top: clamp(2.6rem, 5vw, 4.25rem); }
.rail__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .85rem;
  border-bottom: 1.5px solid var(--rust-deep);
}
.rail__head h2 { font-size: var(--fs-h3); }
.rail__note { font-size: var(--fs-xs); color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; }
/* Side by side, the heading and its note squeeze each other on a phone. */
@media (max-width: 620px) {
  .rail__head { flex-direction: column; align-items: flex-start; gap: .35rem; }
}
.rail__track {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
@media (max-width: 1000px) { .rail__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On phones the rail scrolls sideways. Cards are links, so Tab still walks
   them and the browser scrolls each one into view — no arrow buttons needed. */
@media (max-width: 620px) {
  .rail__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 76%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1);
    padding: .35rem var(--gutter) .8rem;
    scrollbar-width: thin;
  }
  .lcard { scroll-snap-align: start; }
}

.lcard {
  display: grid; grid-template-rows: auto 1fr;
  text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.lcard__media { aspect-ratio: 4 / 3; }
.lcard__body { display: grid; align-content: start; gap: .42rem; padding: 1rem 1.1rem 1.25rem; }
.lcard__kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rust-text); }
.lcard__title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.24; color: var(--rust-deep); }
.lcard__deck { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }

/* --- Learn: a single article -------------------------------------------- */
.crumb {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: .4rem 0;
}
.crumb::before { content: "\2190"; }
.crumb:hover { color: var(--rust-deep); }

.article { max-width: 780px; margin-inline: auto; }
.article__head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.05rem); max-width: 20ch; }
.article__deck { margin-top: 1.05rem; font-size: var(--fs-lead); color: var(--ink-soft); max-width: 52ch; line-height: 1.6; }
.article__figure {
  margin: clamp(1.9rem, 4vw, 2.9rem) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.article__body { margin-top: clamp(1.9rem, 4vw, 2.9rem); max-width: 66ch; }
.article__body > * + * { margin-top: 1.15rem; }
.article__body h2 { font-size: var(--fs-h3); margin-top: clamp(2rem, 4vw, 2.75rem); }
.article__body p { color: var(--ink-soft); line-height: 1.75; }
.article__body strong { color: var(--rust-deep); font-weight: 600; }
.article__body ul { display: grid; gap: .55rem; padding-left: 1.2rem; }
.article__body li { color: var(--ink-soft); line-height: 1.7; }
.article__body li::marker { color: var(--rust); }
.article__foot {
  margin-top: clamp(2.4rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* --- Scroll reveal ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Prototype journey
   ========================================================================== */
.proto-body { background: var(--cream); }

.proto-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248,246,242,.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.proto-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .7rem;
}
.proto-exit {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: .5rem .7rem; border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.proto-exit:hover { color: var(--rust-deep); background: rgba(102,74,58,.06); }
.proto-exit::before { content: "\2190"; }

.progress { padding-bottom: .75rem; }
.progress__meta {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: .45rem;
  letter-spacing: .04em;
}
.progress__track { height: 4px; background: var(--cream-3); border-radius: var(--r-pill); overflow: hidden; }
.progress__fill {
  height: 100%; background: var(--rust); border-radius: var(--r-pill);
  width: 0%; transition: width .5s var(--ease);
}

.proto-main { padding-block: clamp(2.2rem, 1.4rem + 3.5vw, 4.5rem) clamp(7rem, 5rem + 6vw, 6rem); }
.proto-main .wrap { max-width: 860px; transition: max-width .4s var(--ease); }
.proto-main .wrap.is-wide { max-width: 1120px; }

.step-panel { display: none; }
.step-panel.is-active { display: block; animation: panelIn .45s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* A transformed ancestor becomes the containing block for fixed descendants.
   On small screens that made the fixed step navigation render inside the
   entering panel for one frame, then snap back to the viewport. */
@media (max-width: 700px) {
  .step-panel.is-active { animation: none; }
}

.step-panel h1 { font-size: clamp(1.85rem, 1.4rem + 2vw, 3rem); }
.step-panel > .eyebrow { margin-bottom: .7rem; }
.step-intro { margin-top: 1rem; color: var(--ink-soft); font-size: var(--fs-lead); }

.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--cream-2); border: 1px solid var(--line);
  border-left: 3px solid var(--rose);
  border-radius: var(--r-sm); padding: .95rem 1.15rem;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.notice strong { color: var(--rust-deep); }
.notice--rust { border-left-color: var(--rust); }

/* Quiz options */
.qgroup { margin-top: 2rem; }
.qgroup legend { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.18; margin-bottom: .5rem; }
.qgroup__hint { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: 1.4rem; }
.options { display: grid; gap: .7rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__box {
  display: flex; align-items: center; gap: .95rem;
  min-height: 62px; padding: .9rem 1.15rem;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt__box:hover { border-color: var(--line-strong); }
.opt__dot {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); position: relative;
  transition: border-color var(--dur) var(--ease);
}
.opt__dot::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%;
  background: var(--rust); transform: scale(0); transition: transform .28s var(--ease);
}
.opt__text { font-size: var(--fs-body); font-weight: 500; }
.opt__text small { display: block; font-size: var(--fs-xs); color: var(--ink-muted); font-weight: 400; margin-top: .1rem; }
.opt input:checked + .opt__box {
  border-color: var(--rust); background: #FFFDFB;
  box-shadow: 0 0 0 1px var(--rust), 0 10px 26px -18px rgba(168,90,58,.7);
}
.opt input:checked + .opt__box .opt__dot { border-color: var(--rust); }
.opt input:checked + .opt__box .opt__dot::after { transform: scale(1); }
.opt input:focus-visible + .opt__box { outline: 2.5px solid var(--rust); outline-offset: 3px; }

/* Breather globe — a shared problem, shown at world scale. */
.community-globe {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(250px, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(1.2rem, 3vw, 2.1rem);
  border-block: 1px solid var(--line);
}
.community-globe__copy { max-width: 29rem; }
.community-globe__copy .serif {
  margin-top: .7rem;
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  line-height: 1.12;
}
.community-globe__copy .small { margin-top: 1rem; }
.map-frame {
  aspect-ratio: 1 / 1; width: min(100%, 340px); margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFF 0%, var(--cream-2) 64%, transparent 72%);
  overflow: hidden; display: grid; place-items: center;
}
@media (max-width: 660px) {
  .community-globe { grid-template-columns: 1fr; text-align: center; }
  .community-globe__copy { max-width: 34rem; margin-inline: auto; }
}

/* Editorial comparison chart — deliberately not a pill-headed mock card. */
.care-chart {
  border-block: 1px solid var(--line);
  padding-block: clamp(1.15rem, 3vw, 1.8rem);
}
.care-chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  padding-inline: clamp(.25rem, 2vw, 1rem);
}
.care-chart__period { font-size: var(--fs-xs); color: var(--ink-muted); }
.care-chart__body { margin-top: .8rem; }
.care-chart__body > .xs { padding-inline: clamp(.25rem, 2vw, 1rem); margin-top: .35rem; }

/* Four-stage progression for the milestone step. Labelled in the markup as a
   simulation — see the caption there; it is not a customer result. */
.progress-strip {
  padding-block: clamp(.8rem, 2vw, 1.2rem);
  border-block: 1px solid var(--line);
}
.progress-strip__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.progress-strip__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--cream-2);
}
.progress-strip__labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: .9rem;
}
.progress-strip__labels span {
  display: grid;
  gap: .1rem;
  padding-inline: .7rem;
  text-align: center;
  border-left: 1px solid var(--line);
}
.progress-strip__labels span:first-child { border-left: 0; }
.progress-strip__labels strong {
  font-size: var(--fs-xs);
  color: var(--rust-deep);
  letter-spacing: .04em;
}
.progress-strip__labels small { font-size: .72rem; color: var(--ink-muted); }
.progress-strip__cap { margin-top: 1rem; }
@media (max-width: 520px) {
  .progress-strip__labels span { padding-inline: .25rem; }
  .progress-strip__labels small { font-size: .64rem; line-height: 1.25; }
}

/* Scratch-card promo reveal.
   The code underneath is always real text in the DOM — the canvas over it is
   decorative and aria-hidden, so a screen reader never has to scratch. */
.scratch-wrap { margin-top: 1.8rem; display: grid; gap: .7rem; justify-items: center; }
.scratch {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--white);
  min-height: 132px; display: grid; place-items: center; align-content: center; gap: .25rem;
  padding: 1.5rem; width: 100%; max-width: 420px;
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.scratch:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; }
.scratch__label {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.scratch__code { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); letter-spacing: .04em; color: var(--rust-deep); }
.scratch__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
/* The celebration: one quiet settle of the card and a warm rim. No confetti,
   no sound, nothing flashing. */
.scratch.is-revealed {
  border-color: var(--rust);
  box-shadow: 0 0 0 1px var(--rust), 0 14px 34px -20px rgba(168,90,58,.75);
  animation: scratchSettle .5s var(--ease);
}
@keyframes scratchSettle {
  0%   { transform: scale(.985); }
  55%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.scratch__done {
  font-size: var(--fs-sm); color: var(--rust-text); font-weight: 600;
  animation: fadeUp .45s var(--ease);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.eyebrow__name { text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  .scratch.is-revealed { animation: none; }
  .scratch__done { animation: none; }
}

/* Scan step */
.scan-choice { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1.8rem; }
@media (max-width: 620px) { .scan-choice { grid-template-columns: 1fr; } }
.scan-card {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 1.4rem; text-align: left;
  display: flex; flex-direction: column; gap: .5rem; min-height: 168px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.scan-card:hover { border-color: var(--line-strong); }
.scan-card[aria-pressed="true"] { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); background: #FFFDFB; }
.scan-card__name { font-family: var(--serif); font-size: 1.3rem; }
.scan-card__desc { font-size: var(--fs-sm); color: var(--ink-soft); }
.scan-card__meta { margin-top: auto; font-size: var(--fs-xs); color: var(--rust-text); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

.file-field { margin-top: 1.1rem; }
.file-field input[type="file"] {
  width: 100%; font-size: var(--fs-sm); padding: .7rem;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--cream-2);
}
.file-field input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; margin-right: .8rem;
  padding: .5rem .9rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong);
  background: var(--white); color: var(--rust-deep); cursor: pointer;
}
.preview-frame {
  margin-top: 1rem; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--cream-2); max-width: 260px;
}
.preview-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }

/* --- Results loader -----------------------------------------------------
   One circular progress ring and the five stages beside it. The ring is a
   plain SVG circle whose dash offset is driven by a single --p custom property
   (0 to 1) that app.js only ever increases, so progress cannot run backwards
   even if a frame is missed. Everything the visitor needs to read is ordinary
   text: if the ring never animates, the stage list still says where things
   are. */
.loader {
  display: grid; justify-items: center; gap: 1.6rem;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  text-align: center;
}
.loader__ring { position: relative; width: clamp(132px, 30vw, 168px); aspect-ratio: 1; }
.loader__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.loader__ring circle { fill: none; stroke-width: 6; }
.loader__track { stroke: var(--cream-3); }
.loader__arc {
  stroke: var(--rust); stroke-linecap: round;
  /* 2πr, r = 52 */
  stroke-dasharray: 326.73;
  stroke-dashoffset: calc(326.73 * (1 - var(--p, 0)));
  transition: stroke-dashoffset .18s linear;
}
.loader__pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  color: var(--rust-deep);
}
.loader__lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  color: var(--rust-deep);
}
.loader__stages { display: grid; gap: .55rem; text-align: left; margin: 0; padding: 0; list-style: none; }
.loader__stage {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: .7rem;
  font-size: var(--fs-sm); color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}
.loader__mark {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); position: relative;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.loader__stage.is-current { color: var(--rust-deep); font-weight: 600; }
.loader__stage.is-current .loader__mark { border-color: var(--rust); }
.loader__stage.is-current .loader__mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--rust);
}
.loader__stage.is-done { color: var(--ink-soft); }
.loader__stage.is-done .loader__mark { border-color: var(--rust); background: var(--rust); }
/* Tick drawn with two borders rather than an SVG, so it inherits the stage's
   own transition and needs no extra element. */
.loader__stage.is-done .loader__mark::after {
  content: ""; position: absolute; left: 6px; top: 2.5px;
  width: 5px; height: 9px;
  border: solid var(--white); border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.loader__note { max-width: 46ch; }

/* Forms */
.form { margin-top: 2rem; display: grid; gap: 1.25rem; max-width: 560px; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"] {
  min-height: 52px; padding: .8rem 1rem;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.field input:hover { border-color: var(--line-strong); }
.field input:focus { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); outline: none; }
.field input[aria-invalid="true"] { border-color: #A3352B; box-shadow: 0 0 0 1px #A3352B; }
.field__err { font-size: var(--fs-xs); color: #8E2C23; font-weight: 600; min-height: 1.1em; display: flex; gap: .35rem; align-items: center; }
.field__err:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #8E2C23; color: #fff; font-size: 10px; flex: 0 0 auto; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-muted); }

.check { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rust); cursor: pointer; }
.check span { font-size: var(--fs-sm); color: var(--ink-soft); }

/* Profile results */
.profile-overview {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.profile-overview__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--cream-2);
}
.profile-overview__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
}
/* The lens on the profile portrait. Same component and same behaviour as the
   homepage one — it simply lives in the profile's own square media box rather
   than the landing page's full-bleed figure, so it fills its parent instead of
   pinning itself to the page, and it drops the edge vignette, which only makes
   sense over the large hero portrait. A smaller lens too: 115px was half the
   width of this box. */
.profile-overview__media .analysis-portrait {
  position: relative; inset: auto;
  width: 100%; height: 100%;
  border-radius: 0;
  --lens-r: 74px;
  --lens-solid: 72%;
  --lens-mag: 1.5;
}
.profile-overview__media .analysis-portrait::after { content: none; }
/* Base photograph and magnified copy must share a crop, or the lens shows a
   different part of the face than the one under the pointer. */
.profile-overview__media .analysis-portrait img,
.profile-overview__media .analysis-portrait__lens img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%;
}
@media (max-width: 560px) {
  .profile-overview__media .analysis-portrait { --lens-r: 58px; }
}

.profile-overview__summary {
  color: var(--ink-soft);
  font-size: clamp(1rem, .94rem + .3vw, 1.16rem);
  line-height: 1.75;
}
.profile-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.25rem; margin-top: 1.8rem; }
@media (max-width: 780px) {
  .profile-overview { grid-template-columns: 1fr; align-items: start; }
  .profile-overview__media { aspect-ratio: 4 / 3; }
  .profile-overview__photo { object-position: 50% 40%; }
  .profile-grid { grid-template-columns: 1fr; }
}

.chiprow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.chip {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--rust-tint); color: var(--rust-text);
}
.chip--rose { background: var(--rose-tint); color: #7E3D48; }

.ing-list { display: grid; gap: 0; margin-top: 1.6rem; border-top: 1px solid var(--line); }
.ing {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.4fr);
  gap: .35rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 680px) { .ing { grid-template-columns: 1fr; gap: .35rem; } }
.ing__name { font-family: var(--serif); font-size: 1.22rem; line-height: 1.25; }
.ing__why { font-size: var(--fs-sm); color: var(--ink-soft); }

/* Scan entry — what a guided check-in is, before choosing how to add a photo. */
.scan-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 2.5rem);
  margin-top: 1.8rem;
}
@media (max-width: 700px) { .scan-intro { grid-template-columns: 1fr; } }
.scan-intro__media { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-md); border: 1px solid var(--line); }

/* A button that reads as a link — used for the quiet opt-out on the capture step. */
.linkish {
  font: inherit; font-size: var(--fs-sm);
  color: var(--rust-text); text-decoration: underline; text-underline-offset: 3px;
  padding: .35rem; border-radius: var(--r-sm);
}
.linkish:hover { color: var(--rust-dark); }

/* Touch targets. Under a coarse pointer these three sat at 29-36px, short of
   the 44px minimum. The text does not move — only the box around it grows, so
   the layout on a mouse-driven screen is unchanged. */
@media (pointer: coarse) {
  .linkish { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5rem; }
  .plan__more > summary { min-height: 44px; padding-block: .6rem; }
  /* The box itself stays 22px so it still reads as a checkbox; the label it
     sits in becomes the target. */
  .check { min-height: 44px; align-items: center; padding-block: .35rem; }
  .check input { width: 24px; height: 24px; margin-top: 0; }
}

/* Product-type silhouettes. Deliberately generic and unbranded; these are
   placeholders for photography that will replace them (assets/README.txt). */
.pt-icon {
  width: 100%; height: 100%; display: block;
  fill: none; stroke: var(--rust); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Free routine suggestions — three cards, generic types, no brands or prices. */
.rec-list { display: grid; gap: 1rem; margin-top: 1.6rem; }
.rec {
  display: grid; grid-template-columns: 76px minmax(0, 1fr);
  align-items: center; gap: 1.15rem;
  padding: 1.1rem 1.25rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
}
.rec__media {
  width: 76px; height: 92px; padding: .6rem;
  display: grid; place-items: center;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.rec__type { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--rust-text); }
.rec__name { font-family: var(--serif); font-size: 1.18rem; line-height: 1.25; margin-top: .2rem; }
.rec__why { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .35rem; line-height: 1.6; }
@media (max-width: 520px) {
  .rec { grid-template-columns: 58px minmax(0, 1fr); gap: .9rem; padding: .95rem 1rem; }
  .rec__media { width: 58px; height: 72px; padding: .45rem; }
}

/* Mid-experience upgrade prompt, so the plans are reachable without a long scroll. */
.upgrade {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.3rem, 3vw, 1.9rem);
  padding: 1.15rem 1.3rem;
  background: var(--rust-tint); border-radius: var(--r-md);
}
.upgrade__copy { max-width: 48ch; }
.upgrade__copy strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.16rem; color: var(--rust-deep); }
.upgrade__copy span { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .3rem; line-height: 1.6; }
.upgrade .btn { flex: 0 0 auto; }

/* --- Paid report -------------------------------------------------------- */
.rtabs {
  display: flex; gap: .3rem;
  margin-top: 1.7rem; padding: .3rem;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  overflow-x: auto; scrollbar-width: none;
}
.rtabs::-webkit-scrollbar { display: none; }
.rtab {
  flex: 1 0 auto; white-space: nowrap;
  padding: .68rem 1.15rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rtab:hover { color: var(--rust-deep); }
.rtab[aria-selected="true"] { background: var(--white); color: var(--rust-deep); box-shadow: var(--shadow-soft); }

.rpanel { margin-top: 1.7rem; }
.rpanel:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 8px; border-radius: var(--r-sm); }
.rsec + .rsec { margin-top: clamp(1.7rem, 3.5vw, 2.5rem); }
.rsec__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .4rem 1rem; padding-bottom: .7rem; border-bottom: 1.5px solid var(--rust-deep);
}
.rsec__head h2 { font-size: var(--fs-h3); }

.focus-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 700px) { .focus-list { grid-template-columns: 1fr; } }
.focus-card { padding: 1.15rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.focus-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.focus-card__name { font-weight: 600; font-size: var(--fs-sm); }
.focus-card__val { font-size: var(--fs-xs); color: var(--ink-muted); }
.focus-card .meter { margin-top: .6rem; }
.focus-card__note { margin-top: .6rem; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }

.routine-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 1.2rem; }
@media (max-width: 700px) { .routine-cols { grid-template-columns: 1fr; } }
.routine-col { padding: 1.2rem 1.35rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.routine-col h3 { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-text); }
.routine-col ol { margin: .95rem 0 0; padding-left: 1.3rem; display: grid; gap: .65rem; }
.routine-col li { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
.routine-col li strong { color: var(--rust-deep); font-weight: 600; }
.routine-col li::marker { color: var(--rust); font-weight: 600; }

/* Progress starts empty and says so — never a fabricated before/after. */
.empty-state {
  margin-top: 1.2rem; padding: clamp(1.5rem, 3.5vw, 2.3rem);
  background: var(--cream-2); border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  text-align: center;
}
.empty-state .serif { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); color: var(--rust-deep); }
.empty-state p { max-width: 48ch; margin-inline: auto; color: var(--ink-soft); }
.empty-state p + p { margin-top: .7rem; }

/* Checkout */
.summary {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(1.4rem, 3vw, 2rem); margin-top: 1.8rem;
}
.summary__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px dashed var(--line);
}
.summary__row:last-of-type { border-bottom: 0; }
/* display:flex above outranks the UA's [hidden] rule, so the promo row has to
   opt out explicitly or it shows even when no code was revealed. */
.summary__row[hidden] { display: none; }
.summary__row--total { border-top: 1.5px solid var(--rust-deep); border-bottom: 0; margin-top: .5rem; padding-top: 1.1rem; }
.summary__row--total dt { font-weight: 600; }
.summary__row--total dd { font-family: var(--serif); font-size: 1.85rem; color: var(--rust-deep); }
.summary dt { font-size: var(--fs-sm); color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 600; text-align: right; }

/* Compact selected-plan strip at the top of checkout, replacing the old
   standalone "review your selection" step. */
.co-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .9rem 1.5rem;
  margin-top: 1.8rem; padding: 1.15rem 1.35rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
}
.co-head__plan { font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; color: var(--rust-deep); }
.co-head__terms { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: .3rem; }
.co-head__price { font-family: var(--serif); font-size: 1.85rem; line-height: 1; color: var(--rust-deep); text-align: right; }
.co-head__price small { display: block; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-top: .3rem; }
.co-head__price s { opacity: .55; font-size: 1.1rem; display: block; }
.co-change { font-size: var(--fs-xs); }

/* Mock payment. Deliberately collects nothing — no card fields exist to fill. */
.pay {
  margin-top: 1.4rem; padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--cream-2); border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
}
.pay__mark {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rust-text);
}
.pay p { margin-top: .6rem; font-size: var(--fs-sm); color: var(--ink-soft); max-width: 58ch; }
.pay .field { margin-top: 1.2rem; }

/* --- Results module ------------------------------------------------------
   A layout study only. Every card is labelled, and the module is gated behind
   SHOW_RESULTS_PREVIEW in app.js so production ships with it hidden until
   Sakra has real, permissioned evidence. */
.results-note {
  margin-top: 1.2rem; padding: .95rem 1.15rem;
  background: var(--rose-tint); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: #7E3D48;
}
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 900px) { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .results { grid-template-columns: 1fr; } }
.rcard {
  display: grid; align-content: start; gap: .7rem;
  padding: .9rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.rcard__stamp {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #7E3D48; background: var(--rose-tint);
  border-radius: var(--r-pill); padding: .3rem .6rem; justify-self: start;
}
/* Where a permissioned before/after pair would sit. Empty on purpose. */
.rcard__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.rcard__slot {
  aspect-ratio: 3 / 4; display: grid; place-items: center; padding: .5rem;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm);
  background: var(--cream-2);
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
  text-align: center; line-height: 1.4;
}
.rcard__name { font-family: var(--serif); font-size: 1.08rem; color: var(--rust-deep); }
.rcard__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.rcard__chips .chip { font-size: .7rem; padding: .25rem .6rem; }
.rcard__quote {
  font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.6;
  border-left: 2px solid var(--line-strong); padding-left: .7rem;
}
.rcard__types { display: flex; gap: .4rem; }
.rcard__type {
  flex: 1; aspect-ratio: 3 / 4; padding: .4rem;
  display: grid; place-items: center;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}

.done { text-align: center; padding-block: clamp(1.5rem, 4vw, 3rem); }
.done__mark {
  width: 84px; height: 84px; margin: 0 auto 1.8rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--rust-tint); border: 1.5px solid var(--rust);
}
.done__mark svg { width: 34px; height: 34px; }
.done p { margin-inline: auto; max-width: 46ch; }
.done .btn-row { justify-content: center; margin-top: 2.2rem; }

/* Sticky mobile action bar */
.stepnav {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 2.5rem;
}
.stepnav .btn--primary { flex: 0 0 auto; }
@media (max-width: 700px) {
  .stepnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    margin: 0; padding: .75rem var(--gutter);
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
    background: rgba(248,246,242,.96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .stepnav .btn--primary { flex: 1 1 auto; }
}

.proto-foot {
  border-top: 1px solid var(--line);
  padding-block: 1.6rem;
  padding-bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 1rem));
  font-size: var(--fs-xs); color: var(--ink-muted);
}
@media (max-width: 700px) { .proto-foot { padding-bottom: 7rem; } }


/* ==========================================================================
   Quiz interactions
   --------------------------------------------------------------------------
   The seven enhanced questions and the moments around them. Everything here
   is an enhancement over markup that already works: each question keeps its
   real radio group, and these styles only apply once the matching widget has
   mounted and taken the plain list out of sight.

   All of it is built from the same tokens as the rest of the file — the same
   card surface, the same rust focus ring, the same radii, the same durations.
   ========================================================================== */

/* The host each widget renders into. Empty until its panel first opens. */
.qenhance { margin-bottom: 1.1rem; }
.qenhance:empty { display: none; }

/* The native list, once a widget is driving it. Present, still holding the
   answer, but neither seen nor reachable — two tab stops for one question is
   worse than either on its own. */
.options--replaced {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- Two-column questions ------------------------------------------------
   Q3, Q4 and Q10 put the ordinary radio list on the left and a visual that
   answers back on the right. The radios stay the only control, so one click
   selects — the earlier card and carousel versions needed one click to bring a
   card forward and a second to choose it. */
.qsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
@media (max-width: 760px) {
  /* The visual goes first on a narrow screen: it is the thing that changes,
     and it is worth seeing without scrolling back up. */
  .qsplit { grid-template-columns: 1fr; }
  .qsplit__visual { order: -1; }
}
.qsplit__visual { position: sticky; top: calc(var(--header-h, 80px) + 1.2rem); }
@media (max-width: 760px) { .qsplit__visual { position: static; } }

/* --- Q3 the shelf -------------------------------------------------------- */
.shelf { margin: 0; display: grid; gap: .9rem; }
.shelf__stage {
  position: relative;
  min-height: 250px;
  display: grid; align-items: end; justify-items: center;
  padding: 1rem .5rem .6rem;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.shelf__tower { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; width: 100%; }
.shelf__item {
  width: min(86%, 240px); min-height: 30px;
  display: grid; place-items: center; padding: .3rem .7rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em;
  color: var(--rust-deep);
  background: var(--white); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 8px -5px rgba(102,74,58,.4);
  transform: translateX(calc(var(--drift) * 5px)) rotate(calc(var(--drift) * .5deg));
  animation: shelfIn .34s var(--ease);
}
/* Past five, the shelf is visibly crowded — which is the answer, not a fault. */
.shelf__item:nth-child(n+6) { background: var(--rust-tint); border-color: var(--rust); }
@keyframes shelfIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; } }
.shelf__board {
  order: -1;   /* column-reverse puts the first child at the bottom */
  width: min(94%, 260px); height: 3px; margin-bottom: 6px;
  background: var(--line-strong); border-radius: 2px;
}
.shelf__empty {
  position: absolute; inset: auto 1rem 45%; text-align: center;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.shelf__cap { display: grid; gap: .15rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.shelf__cap strong { color: var(--rust-deep); }
.shelf__cap-wait { color: var(--ink-muted); }

/* --- Q4 the support map --------------------------------------------------
   Four seats around a centre, laid out on a 3x3 grid rather than by angle.
   The earlier versions positioned each item at a radius and collided with the
   hub whenever the labels were wide; a grid cannot overlap, needs no
   trigonometry, and reflows on its own at any width. */
.smap { margin: 0; display: grid; gap: .9rem; }
.smap__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center; justify-items: center;
  gap: .75rem;
  width: min(100%, 360px); margin-inline: auto;
}
.smap__hub {
  grid-area: 2 / 2;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: .15rem;
  padding: .7rem; text-align: center;
  background: var(--cream-2); border: 1.5px solid var(--line);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.smap__hub.is-filled { background: var(--rust-tint); border-color: var(--rust); }
.smap__hub-eyebrow {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.smap__hub-name {
  font-family: var(--serif); font-size: clamp(.88rem, .78rem + .45vw, 1.05rem);
  line-height: 1.15; color: var(--rust-deep);
}
.smap__seat {
  width: 100%; min-height: 40px;
  display: grid; place-items: center; padding: .4rem .5rem;
  text-align: center; font-size: .76rem; font-weight: 600; line-height: 1.2;
  color: var(--ink-soft);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* North, east, south, west — the order the component renders them in. */
.smap__seat:nth-of-type(1) { grid-area: 1 / 2; }
.smap__seat:nth-of-type(2) { grid-area: 2 / 3; }
.smap__seat:nth-of-type(3) { grid-area: 3 / 2; }
.smap__seat:nth-of-type(4) { grid-area: 2 / 1; }
.smap__seat.is-on {
  border-color: var(--rust); background: var(--rust); color: var(--white);
  box-shadow: 0 10px 24px -16px rgba(168,90,58,.9);
}
.smap__seat.is-quiet { opacity: .55; }
.smap__cap { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; }

/* --- Q10 the scene ------------------------------------------------------- */
.sview { margin: 0; display: grid; gap: .8rem; }
.sview__media {
  display: block; aspect-ratio: 4 / 3;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--cream-3);
}
.sview__media img { width: 100%; height: 100%; object-fit: cover; }
.sview__cap { display: grid; gap: .15rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.sview__cap strong { color: var(--rust-deep); }
.sview__cap-wait { color: var(--ink-muted); }
@media (max-width: 760px) {
  /* Stacked, the photograph sits above the choices — a shorter crop keeps the
     first option on screen rather than pushing it below the fold. */
  .sview__media { aspect-ratio: 16 / 9; }
  .shelf__stage { min-height: 190px; }
}


/* --- Q8 option wheel ---------------------------------------------------- */
.wheel { display: grid; gap: 1.1rem; justify-items: center; }
.wheel__stage {
  --wheel-r: 126px;
  --wheel-iw: 122px;
  position: relative; width: min(100%, 380px); aspect-ratio: 1;
  touch-action: none;   /* the dial is turned by dragging round it */
}
.wheel__marker {
  position: absolute; top: -2px; left: 50%; z-index: 3;
  width: 0; height: 0; margin-left: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 15px solid var(--rust);
}
.wheel__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--cream-2); border: 1.5px solid var(--line);
  transform: rotate(var(--rot));
  transition: transform .5s var(--ease);
  cursor: grab;
}
.wheel__ring.is-dragging { transition: none; cursor: grabbing; }
.wheel__slot {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateY(calc(var(--wheel-r) * -1));
}
.wheel__seg {
  position: absolute; left: 50%; top: 50%;
  width: var(--wheel-iw); min-height: 44px;
  display: grid; place-items: center; padding: .5rem .6rem;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  /* Centre on the point, then undo the slot angle and the ring's rotation
     together, so labels stay upright through a drag as well as after it. The
     transform transition matches the ring's exactly, or a label would tilt for
     half a second every time the dial settles. */
  transform: translate(-50%, -50%) rotate(calc((var(--a) + var(--rot)) * -1));
  transition: transform .5s var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.wheel__ring.is-dragging .wheel__seg { transition: none; }
.wheel__seg.is-on {
  border-color: var(--rust); background: var(--rust); color: var(--white);
  box-shadow: 0 10px 24px -16px rgba(168,90,58,.9);
}
.wheel__seg:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; }
.wheel__seg-label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.15; text-align: center; }
.wheel__hub {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--cream); border: 1.5px solid var(--line);
}
.wheel__read { font-size: var(--fs-body); color: var(--ink-soft); text-align: center; max-width: 42ch; }
.wheel__read strong { color: var(--rust-deep); }

/* --- Q9 elastic slider -------------------------------------------------- */
.eslider { display: grid; gap: .9rem; max-width: 520px; margin-inline: auto; }
.eslider__read { text-align: center; display: grid; gap: .1rem; }
.eslider__read strong {
  font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.95rem);
  color: var(--rust-deep); line-height: 1.15;
}
.eslider__read strong.is-quiet { color: var(--ink-soft); }
.eslider__mins { font-size: var(--fs-sm); color: var(--ink-muted); }
.eslider__track {
  position: relative; padding: .8rem 0;
  /* The give: the whole track stretches a little past either end and settles
     back on release. Capped at 18px in JS — a hint, not a bounce. */
  transform: translateX(var(--pull, 0px));
  transition: transform .42s var(--ease), opacity var(--dur) var(--ease);
}
.eslider__track.is-pulling { transition: none; }
.eslider__track.is-off { opacity: .45; }
.eslider__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.eslider__range::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--rust) var(--fill), var(--cream-3) var(--fill));
}
.eslider__range::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: var(--cream-3); }
.eslider__range::-moz-range-progress { height: 8px; border-radius: var(--r-pill); background: var(--rust); }
.eslider__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -11px; border-radius: 50%;
  background: var(--white); border: 2.5px solid var(--rust);
  box-shadow: 0 4px 12px -4px rgba(102,74,58,.45);
}
.eslider__range::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--rust);
  background: var(--white); box-shadow: 0 4px 12px -4px rgba(102,74,58,.45);
}
.eslider__range:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 4px; border-radius: var(--r-pill); }
.eslider__scale {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--ink-muted); padding-inline: 2px;
}
.eslider__varies {
  min-height: 52px; display: grid; gap: .1rem; padding: .7rem 1.1rem;
  text-align: left;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: 500; color: var(--rust-deep);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.eslider__varies small { font-size: var(--fs-xs); color: var(--ink-muted); font-weight: 400; }
.eslider__varies:hover { border-color: var(--line-strong); }
.eslider__varies.is-on {
  border-color: var(--rust); background: #FFFDFB;
  box-shadow: 0 0 0 1px var(--rust), 0 10px 26px -18px rgba(168,90,58,.7);
}
.eslider__varies:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; }

/* --- Q11 focus cards ----------------------------------------------------
   The unattended cards sit back and their surface cools. Their text does not
   fade, blur, or lose contrast — three of these are real choices and all four
   have to stay readable and selectable at all times. */
.fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 620px) { .fcards { grid-template-columns: 1fr; } }
.fcard {
  position: relative; display: grid; gap: .25rem; align-content: start;
  min-height: 118px; padding: 1.15rem 1.25rem; text-align: left;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fcards.is-attending .fcard { transform: scale(.985); background: var(--cream-2); }
.fcards.is-attending .fcard.is-attended,
.fcard.is-attended { transform: none; background: var(--white); box-shadow: var(--shadow-lift); }
.fcard:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; }
.fcard.is-on {
  border-color: var(--rust); background: #FFFDFB;
  box-shadow: 0 0 0 1px var(--rust), 0 14px 34px -22px rgba(168,90,58,.75);
}
.fcard__mark {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); position: relative; margin-bottom: .2rem;
  transition: border-color var(--dur) var(--ease);
}
.fcard.is-on .fcard__mark { border-color: var(--rust); }
.fcard.is-on .fcard__mark::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--rust);
}
.fcard__name { font-size: var(--fs-body); font-weight: 600; color: var(--rust-deep); line-height: 1.25; }
.fcard__detail { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.4; }
.fcard__state {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rust-text); min-height: 1.2em; margin-top: .2rem;
}

/* --- Milestones: timeline + compare ------------------------------------- */
.progress-strip.is-interactive .progress-strip__static { display: none; }
.mstone { display: grid; gap: 1.1rem; }
.mstone__rail {
  position: relative; display: flex; gap: .4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: .2rem .1rem .6rem;
}
.mstone__point { flex: 1 0 auto; min-width: 88px; }
.mstone__btn {
  position: relative; z-index: 1;
  width: 100%; min-height: 44px;
  display: grid; justify-items: center; gap: .2rem; padding: .5rem .3rem;
  background: none; text-align: center;
}
.mstone__dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--line-strong);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.mstone__btn.is-past .mstone__dot { background: var(--rust); border-color: var(--rust); }
.mstone__btn.is-on .mstone__dot { background: var(--rust); border-color: var(--rust); transform: scale(1.25); }
.mstone__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; color: var(--ink-muted); }
.mstone__btn.is-on .mstone__label { color: var(--rust-text); }
.mstone__note { font-size: .72rem; color: var(--ink-muted); line-height: 1.25; }
.mstone__btn:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 2px; border-radius: var(--r-sm); }
/* The rail behind the dots, filled as far as the selected checkpoint. */
.mstone__line {
  position: absolute; left: 6%; right: 6%; top: 1.06rem; height: 2px;
  background: linear-gradient(to right,
    var(--rust) 0 calc(var(--at) * 100%), var(--line-strong) calc(var(--at) * 100%) 100%);
  transition: background var(--dur) var(--ease);
}
/* Portrait, because the panels of the sprite are portrait. A landscape frame
   here is what stretched the face sideways. */
.mstone__compare {
  aspect-ratio: 4 / 5;
  width: min(100%, 380px);
  margin-inline: auto;
}
.mstone__compare .compare__pane { background-repeat: no-repeat; }
@media (max-width: 560px) { .mstone__compare { width: min(100%, 300px); } }
.mstone__read { font-size: var(--fs-sm); color: var(--ink-soft); }
.mstone__read strong { color: var(--rust-deep); }

/* --- Profile shape ------------------------------------------------------ */
.pshape {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
@media (max-width: 700px) { .pshape { grid-template-columns: 1fr; } }
.pshape__chart { width: 100%; max-width: 340px; margin-inline: auto; }
.pshape__title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .6rem; }
.pshape__list { display: grid; gap: .3rem; margin-top: 1rem; }
.pshape__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.pshape__list li:last-child { border-bottom: 0; }
.pshape__list strong { font-family: var(--serif); font-size: 1.15rem; color: var(--rust-deep); }
.pshape__list small { font-size: var(--fs-xs); color: var(--ink-muted); font-weight: 400; }

/* --- What else the answers changed -------------------------------------- */
.shaped { margin-top: 1.8rem; padding: clamp(1.1rem, 3vw, 1.7rem); background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.shaped__title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2; }
.shaped__list { display: grid; gap: .75rem; margin-top: .9rem; }
.shaped__list li {
  position: relative; padding-left: 1.15rem;
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55;
}
.shaped__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
}

/* --- Guidance, shaped by the answers ------------------------------------ */
.gshape { display: grid; gap: .8rem; margin-top: 1.6rem; }
.gshape__line {
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6;
  padding-left: 1rem; border-left: 2px solid var(--line);
}
/* The sunscreen answers this would change most get the emphatic treatment. */
.gshape__line--lead {
  border-left-color: var(--rust); color: var(--rust-deep); font-weight: 500;
}

/* --- Suggested plan ----------------------------------------------------- */
.plan__suggested {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rust-text); margin-bottom: .6rem;
}
.plan.is-suggested { border-color: var(--rust); }

/* --- Mystery box --------------------------------------------------------
   Warm, closed, and not remotely a casino. It hides three cards that are
   already in the document, and opening it is the only thing it does. */
.mbox { display: grid; justify-items: center; margin-top: 1.8rem; }
.mbox__lid {
  display: grid; justify-items: center; gap: 1rem;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.5rem, 5vw, 3rem);
  width: min(100%, 460px); text-align: center;
  background: linear-gradient(168deg, #FFFDFB 0%, var(--rust-tint) 100%);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.mbox__lid:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rust); }
.mbox__lid:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; }
.mbox__art { position: relative; width: 92px; height: 78px; display: block; }
.mbox__body {
  position: absolute; left: 6px; right: 6px; bottom: 0; height: 52px;
  background: var(--rust); border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.mbox__top {
  position: absolute; left: 0; right: 0; top: 14px; height: 18px;
  background: var(--rust-dark); border-radius: var(--r-sm);
  transition: transform .4s var(--ease);
}
.mbox__lid:hover .mbox__top { transform: translateY(-5px) rotate(-3deg); }
.mbox__ribbon {
  position: absolute; left: 50%; top: 14px; bottom: 0; width: 13px; margin-left: -6.5px;
  background: var(--rose); z-index: 1;
}
.mbox__copy { display: grid; gap: .25rem; }
.mbox__title { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem); color: var(--rust-deep); line-height: 1.2; }
.mbox__hint { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

/* The recommendations are in the DOM the whole time; this only decides
   whether they are on screen yet. */
.rec-list:not(.is-revealed) { display: none; }
.rec-list.is-revealed > .rec { animation: recIn .5s var(--ease) backwards; }
.rec-list.is-revealed > .rec:nth-child(2) { animation-delay: .09s; }
.rec-list.is-revealed > .rec:nth-child(3) { animation-delay: .18s; }
@keyframes recIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Learning wheel -----------------------------------------------------
   Chooses a reading order. Nothing else — no prize, no score, no effect on
   anything the visitor gets, and all four topics open to everyone regardless. */
.lwheel { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.lwheel__title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2; }
.lwheel__lede { margin-top: .5rem; max-width: 52ch; }
.lwheel__stage {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.2rem, 4vw, 2.5rem);
  margin-top: 1.4rem;
}
.lwheel__dial { position: relative; width: min(100%, 210px); aspect-ratio: 1; }
.lwheel__svg {
  width: 100%; height: 100%; border-radius: 50%;
  transform: rotate(var(--turn, 0deg));
  transition: transform 1.1s cubic-bezier(.16,.84,.36,1);
}
.lwheel__wedge { stroke: var(--white); stroke-width: 1.5; }
.lwheel__wedge--a { fill: var(--rust-tint); }
.lwheel__wedge--b { fill: var(--rose-tint); }
.lwheel__wedge-label {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  fill: var(--rust-deep);
  /* Undo the dial's rotation about each label's own centre, matching its
     transition exactly, so the words stay upright and readable throughout the
     turn rather than ending up sideways or upside down. */
  transform-box: fill-box;
  transform-origin: center;
  rotate: calc(var(--turn, 0deg) * -1);
  transition: rotate 1.1s cubic-bezier(.16,.84,.36,1);
}
.lwheel__pin {
  position: absolute; top: -3px; left: 50%; margin-left: -8px;
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 14px solid var(--rust);
}
.lwheel__side { display: grid; gap: .7rem; flex: 1 1 240px; }
.lwheel__spin { min-height: 44px; justify-self: start; }
.lwheel__result { font-size: var(--fs-sm); color: var(--rust-text); min-height: 1.4em; max-width: 40ch; }
.lwheel__topics { display: grid; gap: .6rem; margin-top: 1.6rem; }
.lwheel__topic {
  width: 100%; min-height: 56px; display: grid; gap: .1rem;
  padding: .8rem 1.1rem; text-align: left;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lwheel__topic:hover { border-color: var(--line-strong); }
.lwheel__topic:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; }
.lwheel__topic.is-open { border-color: var(--rust); background: #FFFDFB; }
.lwheel__topic-name { font-size: var(--fs-body); font-weight: 600; color: var(--rust-deep); }
.lwheel__topic-hint { font-size: var(--fs-xs); color: var(--ink-muted); }
.lwheel__panel {
  display: grid; gap: .7rem;
  padding: 1rem 1.15rem 1.2rem;
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6;
  background: var(--cream-2); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* --- Capture practice ---------------------------------------------------
   Optional, unscored, and skippable from anywhere. Closed by default so it
   never stands between anyone and the next screen. */
.practice {
  margin-top: 1.6rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--cream-2); overflow: hidden;
}
.practice__summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  min-height: 52px; padding: .9rem 1.15rem; cursor: pointer;
  list-style: none;
}
.practice__summary::-webkit-details-marker { display: none; }
.practice__summary::after {
  content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--ink-muted);
}
.practice[open] .practice__summary::after { content: "−"; }
.practice__summary:focus-visible { outline: 2.5px solid var(--rust); outline-offset: -3px; }
.practice__summary-title { font-size: var(--fs-body); font-weight: 600; color: var(--rust-deep); }
.practice__summary-hint { font-size: var(--fs-xs); color: var(--ink-muted); }
.practice__body { display: grid; gap: .9rem; justify-items: center; padding: 0 1.15rem 1.3rem; text-align: center; }
.practice__body > .small { max-width: 46ch; }
.practice__stage { position: relative; width: 260px; height: 260px; }
.practice__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  touch-action: none; cursor: crosshair;
}
.practice__guide {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62%; height: 80%;
  border: 2px dashed var(--line-strong); border-radius: 50%;
  background: var(--white);
}
.practice__read { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 42ch; min-height: 2.8em; }
.practice__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; }
.practice__actions .btn { min-height: 44px; }

/* The `hidden` attribute only sets `display: none` at user-agent weight, so any
   of these components that declares its own `display` would ignore it and stay
   on screen. Everything JS hides by attribute has to say so explicitly. */
.mbox[hidden],
.gshape[hidden],
.lwheel__panel[hidden] { display: none; }

/* --- Quiz interactions: narrow screens ---------------------------------- */
@media (max-width: 560px) {
  .wheel__stage { --wheel-r: 100px; --wheel-iw: 96px; width: min(100%, 300px); }
  .wheel__seg-label { font-size: var(--fs-xs); }
  .practice__stage { width: 220px; height: 220px; }
  .lwheel__dial { margin-inline: auto; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__inner > * { opacity: 1; transform: none; }
  /* The ring still fills — it is the only thing saying how far along the run
     is — but it steps rather than eases, and the run itself is much shorter. */
  .loader__arc { transition: none; }

  /* Quiz interactions. Every one of these stays fully usable; what goes is
     the decoration. The orbit holds still, the wheel jumps rather than turns,
     the slider loses its give, and the recommendations are simply there. */
  .wheel__ring, .wheel__seg { transition: none !important; }
  .lwheel__svg, .lwheel__wedge-label { transition: none !important; }
  .eslider__track { transform: none !important; transition: none !important; }
  .shelf__item { animation: none !important; }
  .rec-list.is-revealed > .rec { animation: none !important; }
  .mbox__lid:hover .mbox__top { transform: none; }
}

@media print { .header, .nav-scrim, .stepnav { display: none !important; } }

/* Language control: the site's quiet pill treatment, available outside the
   mobile menu and throughout the quiz. AZ uses the same system font palette. */
.language-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line, #d9cec4);
  border-radius: 999px;
  background: var(--cream, #f8f6f2);
}
.language-switch button {
  min-width: 38px;
  min-height: 38px;
  padding: 6px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #664a3a;
  font: 600 12px/1.2 var(--sans, sans-serif);
  letter-spacing: .04em;
  cursor: pointer;
}
.language-switch button[aria-pressed="true"] { background: #664a3a; color: #f8f6f2; }
.language-switch button:hover { box-shadow: inset 0 0 0 1px #a85a3a; }
.language-switch button:focus-visible { outline: 2px solid #a85a3a; outline-offset: 3px; }
.header__inner > .language-switch { margin-left: auto; }
.header__inner > .nav { order: 1; }
.header__inner > .language-switch { order: 2; }
.header__inner > .menu-toggle { order: 3; }
.proto-header__inner > .language-switch { margin-left: auto; }
html[lang="az"] .nav__link { padding-inline: .65rem; }
html[lang="az"] .btn { white-space: normal; text-align: center; }
html[lang="az"] .eslider__mins { display: inline-flex; flex-wrap: wrap; gap: .25em; }
@media (max-width: 900px) {
  .header__inner { gap: .6rem; }
  .header__inner > .nav { order: initial; }
}
@media (max-width: 480px) {
  .language-switch button { min-width: 34px; min-height: 38px; padding-inline: 7px; }
  .proto-header__inner { flex-wrap: wrap; gap: .5rem; }
  html[lang="az"] .proto-header__inner > a:last-child { font-size: .75rem; }
}
.scratch__prompt {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: rgba(248,246,242,.8); font: 600 13px/1.2 var(--sans);
  pointer-events: none;
}
.scratch.is-revealed .scratch__prompt,
.scratch:has(.scratch__canvas[hidden]) .scratch__prompt { display: none; }
html[lang="az"] .imgph.is-missing::after { content: "Şəkil hazırlanır"; }
html[lang="az"] .compare .imgph.is-missing::after { content: none; }
html[lang="az"] .compare:has(.imgph.is-missing)::after { content: "Şəkillər hazırlanır"; }
html[lang="az"] .recharts-polar-angle-axis-tick-value { font-size: 11px; }
.file-picker {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  padding: .7rem; border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-sm); background: var(--cream-2); font-size: var(--fs-sm);
}
.file-picker input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.file-picker__button {
  padding: .5rem .9rem; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--white); font-size: var(--fs-xs); font-weight: 600;
}
.file-picker:focus-within { outline: 2px solid var(--rust); outline-offset: 3px; }