/* ==========================================================================
   Prototype B, "The Triage", v2
   One token system, two themes. Paper white or deep ink; one highlighter
   yellow that stays yellow in both. System sans only; Permanent Marker on
   Post-it faces.
   ========================================================================== */

@font-face {
  font-family: "Permanent Marker";
  src: url("./permanent-marker.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens --
   Every colour on this page resolves through the semantic names below.
   The dark values appear in exactly two places, and those two blocks are
   identical by contract: the media query (OS preference, no attribute set)
   and the attribute rule (explicit choice, wins over the OS in both
   directions because it is written later and is more specific).
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --paper: #ffffff;
  --paper-2: #fafaf8;
  --paper-3: #ffffff;

  /* The muted ink steps are set by measurement, not by taste: each one is the
     lightest value that still clears 4.5:1 on the surface it is used on. */
  --ink: #191919;
  --ink-70: rgba(25, 25, 25, 0.76);
  --ink-55: rgba(25, 25, 25, 0.68);
  --ink-40: rgba(25, 25, 25, 0.62);
  --rule: rgba(25, 25, 25, 0.10);
  --rule-strong: rgba(25, 25, 25, 0.16);
  /* the frosty bar: fill translucent, stroke almost gone */
  --nav-bg: rgba(255, 255, 255, 0.62);
  --nav-rule: rgba(25, 25, 25, 0.07);
  /* control boundaries (inputs, switch, pill buttons): held at 3:1, because
     the ring is the only thing that says "this is a control" */
  --ctl: rgba(25, 25, 25, 0.50);

  /* the brand mark: yellow in both themes, never gold */
  --hl: #ffe83d;
  --hl-deep: #ffdd00;
  --hl-soft: #fff3a0;

  /* inverted surfaces */
  --stat-bg: #191919;
  --stat-ink: #ffffff;
  --stat-ink-2: rgba(255, 255, 255, 0.78);
  --stat-ink-3: rgba(255, 255, 255, 0.52);
  --stat-rule: rgba(255, 255, 255, 0.13);
  --stat-border: transparent;

  --btn-bg: #191919;
  --btn-ink: #ffffff;

  /* Post-it papers */
  --pi-yellow: #ffe066;
  --pi-pink: #ffb3c4;
  --pi-blue: #a4d3f2;
  --pi-green: #b5e19c;
  --pi-ink: #232323;

  --sh-card: 0 22px 44px -34px rgba(25, 25, 25, 0.6);
  --sh-door: 0 18px 40px -22px rgba(25, 25, 25, 0.4);
  --sh-postit: 0 14px 22px -14px rgba(25, 25, 25, 0.55), 0 3px 6px rgba(25, 25, 25, 0.12);
  --sh-postit-hi: 0 26px 34px -18px rgba(25, 25, 25, 0.5), 0 4px 8px rgba(25, 25, 25, 0.14);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --out: cubic-bezier(0.22, 0.61, 0.36, 1);

  --shell: 1180px;
  --gut: clamp(20px, 4vw, 56px);

  /* The brush: one marker swipe, drawn as three shapes: the body, a ragged
     top streak where the felt tip skipped, and a short tail past the end.
     Painted as a background image (not a mask) so it survives a line break:
     box-decoration-break clones it onto every fragment, the way a real
     marker leaves one swipe per line. */
  --mark-h: 0.74em;
  --mark-y: 0.14em;        /* the swipe body's distance above the box bottom */
  --mark-edge-h: 0.12em;   /* the bright lower lip; neither theme uses it now */
  --mark-edge-y: 0.14em;
  --brush-edge: none;
  --hl-solid: #ffe83d;     /* yellow that carries dark ink on top of it */
  --brush-solid: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath fill='%23ffe83d' d='M4 30C16 18 40 15 70 13c34-2.5 80 0 116-4 20-2.2 36-5 45-1 6 3 7 12 3 20-3 6-7 10-14 11-30 2-70-3-108-1-36 2-72 3-92 0-10-1.5-18-4-16-8Z'/%3E%3Cpath fill='%23ffe83d' fill-opacity='0.5' d='M18 18C56 10 120 8 196 4c12-1 17 1.5 10 3.5-56 4.5-130 7.5-180 14.5-9 1.5-14-2-8-4Z'/%3E%3Cpath fill='%23ffe83d' fill-opacity='0.45' d='M231 21c9 1 18 5 11 9-6 2.5-13 1-14-3Z'/%3E%3C/svg%3E");   /* the swipe where no text sits on it */
  --on-hl: #191919;
  --brush: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath fill='%23ffe83d' d='M4 30C16 18 40 15 70 13c34-2.5 80 0 116-4 20-2.2 36-5 45-1 6 3 7 12 3 20-3 6-7 10-14 11-30 2-70-3-108-1-36 2-72 3-92 0-10-1.5-18-4-16-8Z'/%3E%3Cpath fill='%23ffe83d' fill-opacity='0.5' d='M18 18C56 10 120 8 196 4c12-1 17 1.5 10 3.5-56 4.5-130 7.5-180 14.5-9 1.5-14-2-8-4Z'/%3E%3Cpath fill='%23ffe83d' fill-opacity='0.45' d='M231 21c9 1 18 5 11 9-6 2.5-13 1-14-3Z'/%3E%3C/svg%3E");
}

/* dark, block A: OS preference, only while no explicit choice is recorded */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #0E0F14;
    --paper-2: #161925;
    --paper-3: #1F2435;

    --ink: #E8E4D8;
    --ink-70: rgba(232, 228, 216, 0.80);
    --ink-55: rgba(232, 228, 216, 0.68);
    --ink-40: rgba(232, 228, 216, 0.58);
    --rule: rgba(232, 228, 216, 0.18);
    --rule-strong: rgba(232, 228, 216, 0.30);
    --nav-bg: rgba(14, 15, 20, 0.58);
    --nav-rule: rgba(232, 228, 216, 0.10);
    --ctl: rgba(232, 228, 216, 0.42);

    --hl: rgba(255, 230, 74, 0.34);
    --hl-deep: rgba(255, 230, 74, 0.52);
    --hl-soft: rgba(255, 230, 74, 0.16);
    /* Dark swipe, set by measurement. Cream text over it clears 3:1 (large text)
       at 3.92:1, and the hottest body-plus-streak overlap at 3.46:1. The bright
       lower lip the light theme never needed is dropped here: at these
       luminances it could not clear the descender tails, and it was the part
       that fought the text. Pigment is pure yellow (no blue channel) so the
       swipe still reads yellow rather than gold once it is dimmed. */
    --brush: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath fill='%23fff000' fill-opacity='0.44' d='M4 30C16 18 40 15 70 13c34-2.5 80 0 116-4 20-2.2 36-5 45-1 6 3 7 12 3 20-3 6-7 10-14 11-30 2-70-3-108-1-36 2-72 3-92 0-10-1.5-18-4-16-8Z'/%3E%3Cpath fill='%23fff000' fill-opacity='0.07' d='M18 18C56 10 120 8 196 4c12-1 17 1.5 10 3.5-56 4.5-130 7.5-180 14.5-9 1.5-14-2-8-4Z'/%3E%3Cpath fill='%23fff000' fill-opacity='0.07' d='M231 21c9 1 18 5 11 9-6 2.5-13 1-14-3Z'/%3E%3C/svg%3E");
    --brush-solid: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath fill='%23f5db45' d='M4 30C16 18 40 15 70 13c34-2.5 80 0 116-4 20-2.2 36-5 45-1 6 3 7 12 3 20-3 6-7 10-14 11-30 2-70-3-108-1-36 2-72 3-92 0-10-1.5-18-4-16-8Z'/%3E%3Cpath fill='%23f5db45' fill-opacity='0.5' d='M18 18C56 10 120 8 196 4c12-1 17 1.5 10 3.5-56 4.5-130 7.5-180 14.5-9 1.5-14-2-8-4Z'/%3E%3Cpath fill='%23f5db45' fill-opacity='0.45' d='M231 21c9 1 18 5 11 9-6 2.5-13 1-14-3Z'/%3E%3C/svg%3E");
    --hl-solid: #F5DB45;
    --on-hl: #14150F;

    --stat-bg: #1F2435;
    --stat-ink: #E8E4D8;
    --stat-ink-2: rgba(232, 228, 216, 0.80);
    --stat-ink-3: rgba(232, 228, 216, 0.60);
    --stat-rule: rgba(232, 228, 216, 0.20);
    --stat-border: rgba(232, 228, 216, 0.20);

    --btn-bg: #E8E4D8;
    --btn-ink: #0E0F14;

    --pi-yellow: #cfae3c;
    --pi-pink: #cc8496;
    --pi-blue: #7ba7c6;
    --pi-green: #8bb673;
    --pi-ink: #16171b;

    --sh-card: 0 22px 44px -30px rgba(0, 0, 0, 0.9);
    --sh-door: 0 18px 40px -20px rgba(0, 0, 0, 0.85);
    --sh-postit: 0 16px 26px -16px rgba(0, 0, 0, 0.9), 0 3px 8px rgba(0, 0, 0, 0.5);
    --sh-postit-hi: 0 28px 38px -20px rgba(0, 0, 0, 0.85), 0 5px 10px rgba(0, 0, 0, 0.55);
  }
}

/* dark, block B: explicit choice. Identical values to block A by contract. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0E0F14;
  --paper-2: #161925;
  --paper-3: #1F2435;

  --ink: #E8E4D8;
  --ink-70: rgba(232, 228, 216, 0.80);
  --ink-55: rgba(232, 228, 216, 0.68);
  --ink-40: rgba(232, 228, 216, 0.58);
  --rule: rgba(232, 228, 216, 0.18);
  --rule-strong: rgba(232, 228, 216, 0.30);
  --nav-bg: rgba(14, 15, 20, 0.58);
  --nav-rule: rgba(232, 228, 216, 0.10);
  --ctl: rgba(232, 228, 216, 0.42);

  --hl: rgba(255, 230, 74, 0.34);
  --hl-deep: rgba(255, 230, 74, 0.52);
  --hl-soft: rgba(255, 230, 74, 0.16);
  /* Dark swipe, set by measurement. Cream text over it clears 3:1 (large text)
       at 3.92:1, and the hottest body-plus-streak overlap at 3.46:1. The bright
       lower lip the light theme never needed is dropped here: at these
       luminances it could not clear the descender tails, and it was the part
       that fought the text. Pigment is pure yellow (no blue channel) so the
       swipe still reads yellow rather than gold once it is dimmed. */
  --brush: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath fill='%23fff000' fill-opacity='0.44' d='M4 30C16 18 40 15 70 13c34-2.5 80 0 116-4 20-2.2 36-5 45-1 6 3 7 12 3 20-3 6-7 10-14 11-30 2-70-3-108-1-36 2-72 3-92 0-10-1.5-18-4-16-8Z'/%3E%3Cpath fill='%23fff000' fill-opacity='0.07' d='M18 18C56 10 120 8 196 4c12-1 17 1.5 10 3.5-56 4.5-130 7.5-180 14.5-9 1.5-14-2-8-4Z'/%3E%3Cpath fill='%23fff000' fill-opacity='0.07' d='M231 21c9 1 18 5 11 9-6 2.5-13 1-14-3Z'/%3E%3C/svg%3E");
  --brush-solid: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath fill='%23f5db45' d='M4 30C16 18 40 15 70 13c34-2.5 80 0 116-4 20-2.2 36-5 45-1 6 3 7 12 3 20-3 6-7 10-14 11-30 2-70-3-108-1-36 2-72 3-92 0-10-1.5-18-4-16-8Z'/%3E%3Cpath fill='%23f5db45' fill-opacity='0.5' d='M18 18C56 10 120 8 196 4c12-1 17 1.5 10 3.5-56 4.5-130 7.5-180 14.5-9 1.5-14-2-8-4Z'/%3E%3Cpath fill='%23f5db45' fill-opacity='0.45' d='M231 21c9 1 18 5 11 9-6 2.5-13 1-14-3Z'/%3E%3C/svg%3E");
  --hl-solid: #F5DB45;
  --on-hl: #14150F;

  --stat-bg: #1F2435;
  --stat-ink: #E8E4D8;
  --stat-ink-2: rgba(232, 228, 216, 0.80);
  --stat-ink-3: rgba(232, 228, 216, 0.60);
  --stat-rule: rgba(232, 228, 216, 0.20);
  --stat-border: rgba(232, 228, 216, 0.20);

  --btn-bg: #E8E4D8;
  --btn-ink: #0E0F14;

  --pi-yellow: #cfae3c;
  --pi-pink: #cc8496;
  --pi-blue: #7ba7c6;
  --pi-green: #8bb673;
  --pi-ink: #16171b;

  --sh-card: 0 22px 44px -30px rgba(0, 0, 0, 0.9);
  --sh-door: 0 18px 40px -20px rgba(0, 0, 0, 0.85);
  --sh-postit: 0 16px 26px -16px rgba(0, 0, 0, 0.9), 0 3px 8px rgba(0, 0, 0, 0.5);
  --sh-postit-hi: 0 28px 38px -20px rgba(0, 0, 0, 0.85), 0 5px 10px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

/* Smooth scrolling is applied per click in app.js, not globally: a global
   scroll-behavior also animates programmatic scrollTo, which breaks tooling. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.62;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 260ms var(--out), color 260ms var(--out);
}

img, svg { max-width: 100%; }
a { color: inherit; }

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

/* ---------------------------------------------------------------- nav ---- */
/* Frosty glass. The fill is translucent enough that content moves under it,
   and the blur plus a small saturation lift is what keeps the wordmark and
   the pill readable when a Post-it or a stat tile passes beneath. Anything
   without backdrop-filter gets the opaque paper fill instead, in the
   @supports block below. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  border-bottom: 0.5px solid transparent;
  transition: border-color 240ms var(--ease), background-color 260ms var(--out);
}
.nav.is-stuck { border-bottom-color: var(--nav-rule); }

@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--paper); }
}
.nav__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 10px;
}
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__links { display: flex; align-items: center; gap: 22px; }
.nav__links a {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink-70);
  transition: color 200ms var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__wordmark {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.nav__cta {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 7px 15px;
  border: 1px solid var(--ctl);
  border-radius: 999px;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.nav__cta:hover { background: var(--hl); border-color: var(--hl-deep); }

/* theme toggle */
.theme {
  appearance: none;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: inherit;
  border: 1px solid var(--ctl);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.theme:hover { background: var(--hl-soft); }
.theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme__icon { display: none; line-height: 0; }
.theme__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* show the icon for the theme you would switch TO */
.theme__icon--moon { display: block; }
:root[data-theme="dark"] .theme__icon--moon { display: none; }
:root[data-theme="dark"] .theme__icon--sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme__icon--moon { display: none; }
  :root:not([data-theme="light"]) .theme__icon--sun { display: block; }
}

/* -------------------------------------------------------- typography ---- */
.label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 18px;
  display: block;
}

.body {
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.64;
  color: var(--ink-70);
  margin: 0 0 20px;
  max-width: 62ch;
}
.body--wide { max-width: 68ch; }

.caption {
  font-size: 14px;
  color: var(--ink-40);
  letter-spacing: -0.005em;
  margin: 0;
}

/* -------------------------------------------------------- highlighter --- */
/* A marker swipe, not an outline. Two layers: the swipe body, and a bright
   edge that rides its lower lip. On paper the body is opaque yellow and the
   edge is switched off. On dark, the body has to stay translucent or the
   cream text stops reading through it, and translucent yellow over near-black
   always lands in the gold family; the opaque edge is what keeps the mark
   legible AS YELLOW. It sits on the baseline, where only descenders reach. */
.mark {
  display: inline;
  padding: 0.02em 0.13em;
  margin: 0 -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: var(--brush-edge), var(--brush);
  background-repeat: no-repeat;
  background-position: left 0 bottom var(--mark-edge-y), left 0 bottom var(--mark-y);
  background-size: 0% var(--mark-edge-h), 0% var(--mark-h);
  /* swipe on, plain retract back: no back-out component in either direction */
  transition: background-size 200ms var(--out);
}
.mark.is-marked {
  background-size: 100% var(--mark-edge-h), 100% var(--mark-h);
  transition: background-size 460ms var(--ease);
}

/* brush underline for the calculator figure (no oval, no ring) */
.mark--under {
  position: absolute;
  display: block;
  left: -0.05em;
  right: -0.09em;
  bottom: 0.02em;
  height: 0.3em;
  padding: 0;
  margin: 0;
  background-image: var(--brush-solid);
  background-position: center;
  background-size: 0% 100%;
}
.mark--under.is-marked { background-size: 100% 100%; transition: background-size 520ms var(--ease); }

/* ------------------------------------------------------------- hero ----- */
.hero { padding: clamp(52px, 8vw, 104px) 0 clamp(48px, 7vw, 92px); }
.hero__h1 {
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1.0;
  margin: 0 0 22px;
  max-width: 17ch;
}
.hero__sub {
  font-size: clamp(19px, 1.6vw, 23px);
  color: var(--ink-55);
  letter-spacing: -0.014em;
  margin: 0 0 clamp(38px, 5vw, 62px);
  max-width: 54ch;
}
.doors__q {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 650;
  letter-spacing: -0.028em;
  margin: 0 0 20px;
}

/* ------------------------------------------------------------ doors ----- */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.door {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 26px 26px 22px;
  min-height: 244px;
  /* hover-OUT: short, plain ease-out, no overshoot */
  transition: transform 180ms var(--out), box-shadow 180ms var(--out), border-color 180ms var(--out);
}
.door:hover {
  transform: translateY(-4px);
  border-color: var(--rule-strong);
  box-shadow: var(--sh-door);
  /* hover-IN only: the softer, longer settle */
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.door__num {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--ink-40);
  margin-bottom: auto;
}
.door__title {
  display: block;
  font-size: clamp(28px, 2.7vw, 38px);
  font-weight: 680;
  letter-spacing: -0.036em;
  line-height: 1.04;
  margin: 34px 0 12px;
}
.door__desc {
  display: block;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ink-55);
  letter-spacing: -0.008em;
  min-height: 2.96em;
}
.door__go { margin-top: 18px; display: block; }
.door__go svg {
  width: 34px;
  height: 12px;
  overflow: visible;
  /* hover-OUT: 180ms ease-out. The arrow returns to 0 and stops there. */
  transition: transform 180ms var(--out);
}
.door__go path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* hover-IN keeps the spring; it is declared on the hover state only, so it
   never applies to the return trip. */
.door:hover .door__go svg {
  transform: translateX(7px);
  transition: transform 320ms var(--back);
}
.door:hover .mark,
.door:focus-visible .mark { background-size: 100% var(--mark-h); transition: background-size 420ms var(--ease); }

/* --------------------------------------------------------- chapters ----- */
.chapter {
  padding: clamp(60px, 8vw, 108px) 0;
  transition: opacity 480ms var(--ease), filter 480ms var(--ease);
}
.chapter--tint { background: var(--paper-2); }
.chapter--quiet { padding: clamp(66px, 9vw, 118px) 0; }

body[data-focus] .chapter:not(.is-focus) { opacity: 0.16; filter: grayscale(1); }

.chapter__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(30px, 3.6vw, 48px);
}
.chapter__head--center { justify-content: center; }
.chapter__num {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--ink-40);
}
.chapter__title {
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 690;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

/* ------------------------------------------------------------ beats ----- */
.beat { margin-bottom: clamp(58px, 7.5vw, 104px); }
.beat:last-child { margin-bottom: 0; }
.beat__title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 690;
  letter-spacing: -0.036em;
  line-height: 1.08;
  margin: 0 0 26px;
  max-width: 22ch;
}
.beat--calc .beat__title { max-width: 26ch; }

/* pain + hinge bullets share one rhythm, one accent */
.pain-list,
.hinge-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  max-width: 62ch;
}
.pain-list li,
.hinge-list li {
  position: relative;
  padding: 13px 0 13px 30px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.016em;
}
.pain-list li::before,
.hinge-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  /* dot centred on the x-height of the first line: 12px of list padding, plus
     0.74em from the text top to the x-height centre, less half the dot */
  top: calc(0.74em + 8.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-40);
}
.hinge-list li::before { background: var(--hl-solid); }

.beat__close {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.36;
  margin: 0 0 clamp(44px, 5vw, 68px);
  max-width: 40ch;
}
.hinge__limit {
  font-size: 15px;
  color: var(--ink-40);
  letter-spacing: -0.006em;
  margin: 0;
  max-width: 52ch;
}

/* ------------------------------------------------------- stat tiles ----- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stat {
  background: var(--stat-bg);
  border: 1px solid var(--stat-border);
  color: var(--stat-ink);
  border-radius: 18px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
}
.stat__num {
  font-size: clamp(44px, 4.6vw, 66px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.stat__claim {
  font-size: 16px;
  line-height: 1.44;
  color: var(--stat-ink-2);
  letter-spacing: -0.008em;
  margin: 0 0 auto;
}
.stat__src {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--stat-ink-3);
  letter-spacing: 0.005em;
  margin: 24px 0 0;
  padding-top: 12px;
}

/* --------------------------------------------------------- post-its ----- */
.wall-block { margin-bottom: clamp(48px, 6vw, 76px); }
.wall {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 30px);
  padding: 6px 0 14px;
}
.postit {
  aspect-ratio: 1 / 1;
  width: clamp(148px, 15.5vw, 196px);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Permanent Marker runs much wider and heavier than the old script face, so
     the size, leading, and padding are retuned to keep the longest note inside
     a hard square at every width. Single-weight font: no synthetic bolding. */
  padding: 15px 11px;
  font-family: "Permanent Marker", var(--sans);
  font-weight: 400;
  font-size: clamp(17.5px, 1.78vw, 22.5px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--pi-ink);
  box-shadow: var(--sh-postit);
  /* hover-OUT is plain; the spring lives on the hover states below */
  transition: transform 180ms var(--out), box-shadow 220ms var(--out), background-color 260ms var(--out);
}
.postit--yellow { background: var(--pi-yellow); transform: rotate(-3.2deg); }
.postit--pink   { background: var(--pi-pink); transform: rotate(2.2deg) translateY(12px); }
.postit--blue   { background: var(--pi-blue); transform: rotate(-1.4deg) translateY(-6px); }
.postit--green  { background: var(--pi-green); transform: rotate(3.4deg) translateY(9px); }

.postit--yellow:hover { transform: rotate(-3.2deg) translateY(-8px) scale(1.03); }
.postit--pink:hover   { transform: rotate(2.2deg) translateY(2px) scale(1.03); }
.postit--blue:hover   { transform: rotate(-1.4deg) translateY(-16px) scale(1.03); }
.postit--green:hover  { transform: rotate(3.4deg) translateY(-1px) scale(1.03); }
.postit:hover {
  box-shadow: var(--sh-postit-hi);
  transition: transform 300ms var(--back), box-shadow 300ms var(--ease);
}

/* ------------------------------------------------------- calculator ----- */
.calc {
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--paper-2);
  padding: clamp(24px, 3.2vw, 40px);
}
.calc__method { margin-bottom: 12px; max-width: 68ch; }
/* provenance for the three defaults; every figure traces to stats.json */
.calc__prov {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-55);
  margin: 0 0 28px;
  max-width: 74ch;
}
.calc__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "fields out"
    "toggle out"
    "more   more";
  gap: 22px clamp(24px, 4vw, 56px);
  align-items: start;
}
.calc__fields {
  grid-area: fields;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.calc__fields--second { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.field input {
  font-family: inherit;
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ctl);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--hl-soft);
}

.calc__out {
  grid-area: out;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 2px;
}
.calc__out-label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-40);
}
/* the wrap carries the figure's size so the brush underline can be measured
   in ems of the number, not of the inherited body text */
.calc__out-num-wrap {
  position: relative;
  display: inline-block;
  font-size: clamp(36px, 3.8vw, 52px);
  line-height: 1.06;
}
.calc__out-num {
  position: relative;
  display: block;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.06;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__ticker {
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-40);
}
.calc__ticker-num { font-variant-numeric: tabular-nums; color: var(--ink-55); font-weight: 600; }

.calc__toggle {
  grid-area: toggle;
  justify-self: start;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.014em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.calc__toggle-text {
  box-shadow: inset 0 -0.5em 0 var(--hl);
  transition: box-shadow 240ms var(--ease);
}
.calc__toggle:hover .calc__toggle-text { box-shadow: inset 0 -1.0em 0 var(--hl); }
.calc__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.calc__chev {
  width: 13px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms var(--out);
}
.calc__toggle[aria-expanded="true"] .calc__chev { transform: rotate(180deg); }

/* height animation without measuring: 0fr to 1fr on a grid row */
.calc__more {
  grid-area: more;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--out);
}
.calc__more-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 320ms;
}
.calc__more.is-open { grid-template-rows: 1fr; }
.calc__more.is-open .calc__more-inner { visibility: visible; transition-delay: 0s; }
.calc__more-inner > * { margin-top: 22px; }
.calc__more-inner > *:first-child { margin-top: 2px; }

.loaded { padding-top: 8px; max-width: 62ch; }
.switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; }
.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.switch__track {
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--ctl);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background 200ms var(--out), border-color 200ms var(--out);
}
.switch__knob {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ink-40);
  transition: transform 220ms var(--out), background 200ms var(--out);
}
.switch input:checked + .switch__track { background: var(--hl-solid); border-color: var(--hl-solid); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(17px); background: var(--on-hl); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--ink); outline-offset: 2px; }
.switch__text { font-size: 15.5px; font-weight: 550; letter-spacing: -0.012em; }

.loaded__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-55);
  margin: 10px 0 0;
  max-width: 60ch;
}
.loaded__src { font-size: 11.5px; color: var(--ink-40); margin: 6px 0 0; letter-spacing: 0.01em; }

/* ------------------------------------------------------------ rooms ----- */
.room { margin: 0; }
.room--lead {
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  padding: clamp(26px, 3.2vw, 40px);
  background: var(--paper-3);
  box-shadow: var(--sh-card);
  margin-bottom: 26px;
}
.room__title {
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 680;
  letter-spacing: -0.028em;
  line-height: 1.16;
  margin: 0 0 14px;
}
.room--lead .room__title { font-size: clamp(26px, 3.1vw, 38px); }
.room__caption {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-55);
  font-style: italic;
  margin: 0 0 14px;
  max-width: 46ch;
}
.room__list { list-style: none; margin: 0; padding: 0; }
.room__list li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 16.5px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-70);
}
.room__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: calc(0.74em + 4px);   /* 7px list padding, x-height centre, half the dot */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hl-solid);
}
.room--lead .room__list li { font-size: 17.5px; color: var(--ink); }

.room-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.room-row .room { border-top: 2px solid var(--ink); padding-top: 18px; }
/* one card carries a proposed-name chip and one does not; reserve the line so
   both bullet lists start on the same baseline */
.room-row .room__title { min-height: 2.35em; }
.room-row .room__caption { min-height: 3em; }

.chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink-55);
  border: 1px dashed var(--rule-strong);
  border-radius: 999px;
  padding: 5px 10px 5px 6px;
  white-space: nowrap;
}
.chip__k {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  background: var(--hl-soft);
  border-radius: 999px;
  padding: 3px 6px;
  margin-right: 6px;
}

/* ----------------------------------------------------------- talks ------ */
.talk-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 20px;
}
/* ---------------------------------------------------------- offers ------ */
/* Cards: the lead (Alignment Offsite) full-width and elevated; the Decision
   Room and Foundation Sprint side by side beneath it. Card borders are
   component edges, not dividers; they stay. */
.offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  background: var(--paper-3);
  box-shadow: var(--sh-card);
  padding: clamp(24px, 2.6vw, 34px);
  transition: transform 180ms var(--out), box-shadow 180ms var(--out), border-color 180ms var(--out);
}
.offer:hover {
  transform: translateY(-4px);
  border-color: var(--ink-40);
  box-shadow: var(--sh-door);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.offer--lead {
  grid-column: 1 / -1;
  border-width: 1.5px;
  border-color: var(--ink-40);
}
.offer__title {
  font-size: clamp(21px, 1.9vw, 25px);
  font-weight: 680;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.offer__caption {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-55);
  margin: 0 0 14px;
  max-width: 52ch;
}
.offer__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.offer__list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.5;
  letter-spacing: -0.012em;
}
.offer__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hl-deep, currentColor);
}
.offer__price {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 650;
  letter-spacing: -0.016em;
  margin: 2px 0 18px;
}
.offer .btn { margin-top: auto; }
.offer__caption + .offer__list { margin-top: 2px; }
.offer__list:last-of-type { margin-bottom: 18px; }

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

.talk {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  background: var(--paper-3);
  box-shadow: var(--sh-card);
  padding: clamp(22px, 2.4vw, 30px);
  transition: transform 180ms var(--out), box-shadow 180ms var(--out), border-color 180ms var(--out);
}
.talk:hover {
  transform: translateY(-4px);
  border-color: var(--ink-40);
  box-shadow: var(--sh-door);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.talk__name {
  font-size: clamp(19px, 1.7vw, 21px);
  font-weight: 650;
  letter-spacing: -0.024em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.talk__blurb {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-55);
  margin: 0 0 auto;
}
.talk__opens {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--ink-70);
  margin: 18px 0 0;
  padding-top: 4px;
}

/* ------------------------------------------------------------- faq ------ */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px clamp(28px, 4vw, 56px);
}
.qa:first-child { grid-column: 1 / -1; max-width: 74ch; }
.qa__q {
  font-size: 17.5px;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.3;
  margin: 0 0 9px;
}
.qa__a {
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--ink-55);
  margin: 0;
}

/* ------------------------------------------------------ circle arc ------ */
.circle-hook {
  font-size: clamp(26px, 3.1vw, 38px);
  font-weight: 640;
  letter-spacing: -0.032em;
  line-height: 1.12;
  margin: 0 0 clamp(34px, 4vw, 54px);
  max-width: 19ch;
}
.arc { margin: 0 0 clamp(26px, 3vw, 40px); }
.arc__svg { width: 100%; height: auto; display: block; overflow: visible; }
.arc__path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.8;
}
.arc__nodes circle { fill: var(--hl-solid); stroke: var(--ink); stroke-width: 2; }
.arc__nodes text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  fill: var(--on-hl);
  text-anchor: middle;
}

.weeks {
  list-style: none;
  margin: 0 0 clamp(30px, 3.6vw, 46px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 26px;
}
.week { display: flex; gap: 12px; align-items: baseline; }
.week__n {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hl-solid);
  color: var(--on-hl);
  border: 1.5px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  align-self: flex-start;
  margin-top: 2px;
}
.week__t {
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.018em;
  line-height: 1.4;
}

.circle-cta { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 0; }
.price { font-size: 15px; color: var(--ink-55); letter-spacing: -0.008em; }

.link-cta {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-decoration: none;
  box-shadow: inset 0 -0.55em 0 var(--hl);
  transition: box-shadow 240ms var(--ease);
}
.link-cta:hover { box-shadow: inset 0 -1.05em 0 var(--hl); }

/* --------------------------------------------------------- counsel ------ */
.counsel-hook {
  max-width: 34ch;
  margin: 0 auto 18px;
  text-align: center;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-40);
  letter-spacing: -0.012em;
}
.counsel {
  max-width: 40ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.36;
  color: var(--ink-70);
}
/* same class of action as "Ask about a seat", so the same swipe on hover */
.counsel a {
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -0.42em 0 var(--hl);
  transition: box-shadow 240ms var(--ease);
}
.counsel a:hover { box-shadow: inset 0 -0.95em 0 var(--hl); }

/* --------------------------------------------------- bio / booking ------ */
.pad { padding: clamp(52px, 6.5vw, 88px) 0; }
.booking { background: var(--paper-2); }
.room__price {
  margin: 14px 0 0;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 640;
  letter-spacing: -0.014em;
}
.also {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}
.also li {
  padding: 14px 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--ink-70);
}
.also a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.close {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 640;
  letter-spacing: -0.028em;
  line-height: 1.28;
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  max-width: 30ch;
}
/* The dare lands first; the practical line follows in a quieter register. */
.close--sub {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 480;
  letter-spacing: -0.014em;
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 46ch;
  margin-top: calc(-1 * clamp(14px, 1.8vw, 24px));
}
.booking__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
}
.btn {
  display: inline-block;
  margin-top: 8px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.014em;
  padding: 13px 24px;
  border-radius: 999px;
  transition: transform 180ms var(--out), background 200ms var(--ease);
}
.btn:hover { transform: translateY(-2px); transition: transform 260ms var(--back); }

/* ------------------------------------------------------------ foot ------ */
.foot {
  border-top: 1px solid var(--rule);
  padding: 34px 0 48px;
}
.foot p {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--ink-40);
}
.foot a { color: var(--ink-55); }

/* ------------------------------------------------------- show-all ------- */
.show-all {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-ink);
  padding: 10px 16px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--back);
}
body[data-focus] .show-all { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------- reveal ------ */
/* popIn. Uses the independent `scale` property, not `transform`, so component
   rotations (post-its) and hover translations (doors) survive the reveal. */
.reveal {
  opacity: 0;
  scale: 0.96;
  transition: opacity 500ms var(--back), scale 500ms var(--back);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; scale: 1; }

/* ------------------------------------------------------ responsive ------ */
@media (max-width: 1000px) {
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 0; padding: 22px; }
  .door__title { margin: 16px 0 8px; }
  .stats { grid-template-columns: 1fr; }
  .room-row { grid-template-columns: 1fr; gap: 28px; }
  .talk-row { grid-template-columns: 1fr; gap: 26px; }
  .faq { grid-template-columns: 1fr; gap: 26px; }
  .qa:first-child { max-width: none; }
  .weeks { grid-template-columns: repeat(2, 1fr); }
  .booking__grid { grid-template-columns: 1fr; }
  .calc__form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "fields"
      "out"
      "toggle"
      "more";
  }
  .calc__out { padding-top: 6px; }
}

@media (max-width: 700px) {
  .nav__links { order: 3; flex-basis: 100%; justify-content: center; gap: 18px; }
  body { font-size: 18px; }
  .hero__h1 { letter-spacing: -0.038em; }
  .weeks { grid-template-columns: 1fr; gap: 14px; }
  .arc { display: none; }
  .calc__fields { grid-template-columns: 1fr; }
  .calc__fields--second { grid-template-columns: 1fr; }
  .chapter__head { gap: 12px; }
  .postit { width: clamp(140px, 41vw, 168px); font-size: clamp(16px, 5vw, 20px); padding: 13px 10px; }
  .wall { gap: 14px; justify-content: flex-start; }
  .chip { margin-left: 0; margin-top: 8px; display: inline-flex; }
  .room__title { display: flex; flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------ reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; scale: 1; }
  .mark { background-size: 100% var(--mark-h); }
  .mark--under { background-size: 100% 100%; }
  .arc__path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* the link out to the full question set */
.faq-more {
  margin: 22px 0 0;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
}
.faq-more a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* FAQ page: grouped sets. The label needs air above it when it follows a
   previous group, and each group's questions sit in an even two-column grid
   (the main page's single set is unaffected). */
.faq + .label { margin-top: clamp(48px, 5vw, 76px); }
@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; }
}


/* privacy and accessibility pages: a readable prose column */
.legal-prose { max-width: 62ch; }
.legal-prose .body { margin: 0 0 18px; }
.legal-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


/* circle page */
.circle-list { margin-bottom: 22px; max-width: 62ch; }
.week__t { line-height: 1.45; }
.beat .legal-prose .body:last-child { margin-bottom: 0; }


/* call page: booking widget */
.call-widget {
  max-width: 480px;
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  background: var(--paper-3);
  box-shadow: var(--sh-card);
  padding: clamp(22px, 2.6vw, 32px);
}
.call-widget__status { font-size: 16px; color: var(--ink-55); }

.call-picker__label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 10px;
}
#call-times-block { margin-top: 20px; }
.call-picker__row { display: flex; flex-wrap: wrap; gap: 8px; }

.call-chip {
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ctl);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.call-chip:hover { background: var(--hl-soft); }
.call-chip.is-selected { background: var(--hl); border-color: var(--hl-deep); }

.call-form:not([hidden]) { display: flex; flex-direction: column; gap: 16px; }
.call-form__slot { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.call-form textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ctl);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  resize: vertical;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.call-form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--hl-soft); }
.call-form__actions { display: flex; align-items: center; gap: 16px; }
.call-form__back {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-55);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

.call-success__title { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 6px; }
.call-success__body { color: var(--ink-55); margin: 0; }

.call-error__body { font-size: 16px; margin: 0 0 8px; }
.call-error__fallback { color: var(--ink-55); margin: 0; }
.call-error__fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }