/* Dazzle Health clinician site.
   Look: "The Leap" (espresso ink on warm cream, one lime button, light serif
   headlines, round cards, color bands, mock cards, stickers, hand-drawn lines
   that draw themselves).
   Kept from the accessibility review: AAA text contrast, a visible focus ring,
   one filled button per page, quiet mode, the reader's own text size and
   motion settings.

   Three states:
   - html.motion       color and motion (the default for most visitors)
   - html              color, no motion (reduced-motion device, quiet switched off by hand)
   - html[data-quiet]  no motion, no color pops, no decoration */

:root {
  --ink: #482317;
  --canvas: #fafafa;
  --fog: #e5e7eb;
  --lime: #ecf956;
  --lilac: #efd8f0;
  --mint: #c6e57d;
  --lemon: #f3fb9a;
  --sky: #b1dcfc;

  --field-line: #8a6f66;            /* input edges: 4:1 on the canvas */
  --ink-soft: #5c382c;              /* secondary text: still AAA on the canvas */
  --skeleton: #cdbfba;              /* the grey bars on mock cards */

  --wash-hero-band: linear-gradient(170deg, var(--canvas) 0%, var(--canvas) 40%, #e6f3c4 76%, var(--mint) 100%);
  --wash-form: linear-gradient(160deg, #efd8f0 0%, #e2c8f3 100%);
  --wash-case: var(--lilac);
  --wash-lemon: var(--lemon);
  --wash-sky: linear-gradient(180deg, #4fb2ff 0%, var(--sky) 100%);
  --wash-close: linear-gradient(118deg, #efd8f0 0%, #f3e8f3 45%, #dff5dd 100%);
  --tile-sky: var(--sky);
  --tile-lilac: var(--lilac);
  --tile-mint: var(--mint);
  --tile-lemon: var(--lemon);
  --tile-leaf: #dff0b0;
  --card-edge: var(--ink);

  --serif: "Fraunces", "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans: "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-body: 6px;
  --r-link: 9px;
  --r-small: 15px;
  --r-nav: 20px;
  --r-card: 30px;
  --r-pill: 100px;

  --shadow-nav: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;

  --max: 1200px;
  --gutter: 20px;
  --section: 64px;
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --section: 96px;
    --wash-hero-band: linear-gradient(118deg, var(--canvas) 0%, var(--canvas) 44%, #e6f3c4 74%, var(--mint) 100%);
  }
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- type ---------- */

h1, h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-optical-sizing: auto;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.25rem + 3.3vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.125rem); }

h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

.prose > * + * { margin-top: 1.35em; }
.prose { max-width: 62ch; }

.lead {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
}

.statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4375rem, 1.1rem + 1.5vw, 2.125rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 34ch;
}

.small {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

a { color: inherit; }

a:not(.btn):not(.logo) {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  border-radius: var(--r-body);
}

a:not(.btn):not(.logo):hover {
  background: var(--lime);
  text-decoration-thickness: 2.5px;
}

/* ---------- focus, skip link ---------- */

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-body);
}

main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  background: var(--ink);
  color: var(--canvas);
  padding: 12px 18px;
  border-radius: var(--r-small);
  font-weight: 700;
}

.skip-link:focus { top: 12px; }

a.skip-link:hover { background: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- header ---------- */

.site-header { padding-block: 14px; }

.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 8px;
  padding: 8px 10px 8px 18px;
  border: 1px solid var(--fog);
  border-radius: var(--r-nav);
  box-shadow: var(--shadow-nav);
  background: var(--canvas);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 4px;
  border-radius: var(--r-link);
}

.bar .logo { justify-self: start; grid-column: 1; grid-row: 1; }
.bar .quiet-toggle { grid-column: 2; grid-row: 1; }

/* Her tagline. On a phone it takes its own row inside the bar; on a wide
   screen it sits in the middle, between the name and the quiet switch. */
.tagline {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 6px;
  padding: 9px 4px 5px;
  border-top: 1px solid var(--fog);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
}

@media (max-width: 420px) {
  .bar { padding-left: 12px; padding-right: 6px; }
  .bar .quiet-toggle { font-size: 0.75rem; letter-spacing: 0.04em; padding-inline: 10px; }
}

@media (min-width: 760px) {
  .bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 12px; }
  .bar .quiet-toggle { grid-column: 3; }
  .tagline {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0 12px;
    border-top: 0;
    font-size: 1.125rem;
  }
}

.logo-mark path {
  fill: var(--lime);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.quiet-toggle {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 10px 12px;
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
}

.quiet-toggle:hover { border-color: var(--ink); }
.quiet-toggle[aria-pressed="true"] { border-color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  cursor: pointer;
}

.btn-fill { background: var(--lime); }
.btn-line { background: var(--canvas); }
.btn-line:hover { background: var(--ink); color: var(--canvas); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.link-action {
  font-weight: 700;
  display: inline-block;
  padding: 6px 2px;
}

.link-action::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
  text-decoration: none;
}

/* ---------- badge ---------- */

.badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.008em;
  padding: 7px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--r-nav);
  background: var(--canvas);
}

/* ---------- sections, bands, tiles ---------- */

.section { padding-block: calc(var(--section) / 2); }

.band {
  padding-block: calc(var(--section) * 0.75);
  margin-block: calc(var(--section) / 2);
}

.band-lemon { background: var(--wash-lemon); }
.band-sky { background: var(--wash-sky); }
.band-close { background: var(--wash-close); margin-bottom: 0; }

.split { display: grid; gap: 28px; }

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  .split-head { position: sticky; top: 32px; }
}

.panel {
  border-radius: var(--r-card);
  padding: 30px 22px;
  border: 1.5px solid transparent;
}

@media (min-width: 900px) {
  .panel { padding: 64px; }
}

.wash-case { background: var(--wash-case); }
.band-card { background: var(--canvas); border-color: var(--card-edge); }

.tile {
  position: relative;
  margin-top: 26px;
  padding: 26px 24px;
  border-radius: var(--r-card);
  max-width: 340px;
}

.tile svg { display: block; width: 100%; height: auto; }
.tile-sky { background: var(--tile-sky); }
.tile-lilac { background: var(--tile-lilac); }
.tile-mint { background: var(--tile-mint); }

@media (min-width: 900px) {
  .tile { margin-top: 36px; max-width: 380px; padding: 34px 32px; }
}

/* ---------- hero ---------- */

.hero {
  padding-top: 26px;
  padding-bottom: calc(var(--section) * 0.75);
  background: var(--wash-hero-band);
}

.hero-grid { display: grid; gap: 44px; }

.hero-copy > * + * { margin-top: 18px; }
.hero-copy .lede { font-size: 1.0625rem; line-height: 1.5; max-width: 34em; }
.hero-action { margin-top: 22px; }
.hero-action .btn { width: 100%; }
.hero-what { font-weight: 500; max-width: 34em; line-height: 1.45; }
.hero-copy .hero-when { max-width: 36em; margin-top: 8px; }

.mark { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }

.scribble {
  position: absolute;
  left: -2%;
  bottom: -0.14em;
  width: 104%;
  height: 0.32em;
  max-width: none;
  overflow: visible;
  z-index: -1;
}

.scribble path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 560px) {
  .hero-action .btn { width: auto; }
}

@media (min-width: 900px) {
  .hero { padding-top: 52px; }
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: center;
  }
  .hero-copy > * + * { margin-top: 24px; }
  .hero-copy .lede { font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; }
  .hero-action { margin-top: 30px; }
  .scribble path { stroke-width: 10; }
}

/* the registration card on its wash */

.register {
  position: relative;
  scroll-margin-top: 44px;
  padding: 18px;
  margin-block: 14px 22px;
  isolation: isolate;
}

.register::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-card);
  background: var(--wash-form);
  border: 1.5px solid var(--card-edge);
  transform: rotate(-2.5deg);
}

@media (min-width: 900px) {
  .register { padding: 30px; margin-block: 0; }
}

.card {
  background: var(--canvas);
  border: 1px solid var(--fog);
  border-radius: var(--r-card);
  padding: 26px 22px;
}

.register .card { border: 1.5px solid var(--card-edge); }

@media (min-width: 560px) {
  .card { padding: 30px; }
}

.form-title {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  line-height: 1.12;
}

.form-card > * + * { margin-top: 18px; }

.field { display: block; border: 0; padding: 0; margin-inline: 0; min-width: 0; }

.field label, .field legend {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 7px;
  padding: 0;
}

.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-small);
}

.field input[type="text"]:focus-visible,
.field input[type="email"]:focus-visible {
  border-color: var(--ink);
  border-radius: var(--r-small);
  outline-offset: 2px;
}

.choices { display: flex; flex-wrap: wrap; gap: 10px; }

.choice { position: relative; flex: 1 1 0; min-width: 84px; }

.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-pill);
  font-weight: 500;
}

.choice input:checked + span {
  background: var(--lime);
  border-color: var(--ink);
  font-weight: 700;
}

.choice input:checked + span::before { content: "\2713"; }

.choice input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.form-card .btn { width: 100%; }

.form-error {
  font-weight: 700;
  padding: 12px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-small);
}

.form-done { text-align: left; }
.form-done:focus { outline: none; }
.form-done p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.form-done .deco { display: block; margin-bottom: 14px; }

[hidden] { display: none !important; }

/* ---------- decoration: drawings, stickers, mock cards ----------
   Every piece carries class="deco". None of it holds words. */

.deco { pointer-events: none; }
.deco .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deco .spark { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.deco .dot { fill: var(--canvas); stroke: var(--ink); stroke-width: 1.5; }
.deco .paper { fill: var(--canvas); stroke: var(--ink); stroke-width: 1.5; }
.deco .ring { fill: none; stroke: var(--ink); stroke-width: 2; }

/* stickers */
.stick { position: absolute; display: block; width: 44px; height: 44px; z-index: 2; }
.stick svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stick-tr { top: -18px; right: -10px; rotate: 12deg; }
.stick-tl { top: -16px; left: -12px; rotate: -10deg; width: 40px; height: 40px; }

.register .spark-a { top: -22px; right: 2px; width: 50px; height: 50px; rotate: 12deg; }
.register .spark-b { bottom: 64px; left: -12px; width: 32px; height: 32px; rotate: -10deg; }
.register .heart-a { top: 38%; right: -10px; width: 34px; height: 34px; rotate: 14deg; }
.hero-arrow { display: none; }

/* small mock cards that hang off the registration card */
.mini-wrap { position: absolute; display: block; z-index: 2; }
.mini-mail { top: -30px; left: -6px; }
.mini-play { bottom: -24px; right: 4px; }

.mini {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 9px;
  background: var(--canvas);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  rotate: var(--rot, 0deg);
}

.mini svg { display: block; width: 30px; height: auto; flex: none; overflow: visible; }
.sk-col { display: grid; gap: 5px; width: 52px; }

.sk {
  display: block;
  height: 8px;
  border-radius: 8px;
  background: var(--skeleton);
  flex: 1 1 auto;
}

.sk-col .sk { height: 6px; flex: none; }
.sk-short { width: 60%; }
.sk-mid { max-width: 58%; }
.sk-time { flex: none; width: 34px; }
.sk-title { flex: none; width: 84px; height: 10px; background: var(--ink-soft); }

.badge-dot {
  position: absolute;
  top: -7px;
  left: 30px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--lime);
  border: 1.5px solid var(--ink);
}

@media (min-width: 900px) {
  .register .spark-a { top: -30px; right: -12px; width: 64px; height: 64px; }
  .register .spark-b { bottom: 90px; left: -20px; width: 40px; height: 40px; }
  .register .heart-a { right: -22px; width: 42px; height: 42px; }
  .mini-mail { top: -28px; left: -44px; }
  .mini-play { bottom: -22px; right: -26px; }
  .hero-arrow {
    display: block;
    position: absolute;
    left: -92px;
    top: 46%;
    width: 96px;
    height: auto;
    rotate: -6deg;
    overflow: visible;
  }
}

/* the schedule mock card */
.mock {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--canvas);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  rotate: -3deg;
}

.mock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 9px;
  border-bottom: 1px solid var(--fog);
}

.mock-dots i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--ink);
}

.mock-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--canvas);
  border: 1px solid var(--fog);
  border-radius: 12px;
}

.av {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lilac);
  border: 1.5px solid var(--ink);
}

.mock-row.is-her { background: var(--lime); border-color: var(--ink); }
.mock-row.is-her .av { background: var(--canvas); }
.mock-row.is-her .sk { background: var(--ink-soft); }

.loop {
  position: absolute;
  left: -14px;
  top: -12px;
  width: calc(100% + 28px);
  height: calc(100% + 24px);
  max-width: none;
  overflow: visible;
}

.loop .line { stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* the teaching case: the staircase on its card */
.case-grid { display: grid; gap: 34px; }
.case-art { position: relative; max-width: 320px; margin-inline: auto; width: 100%; }
.art-card {
  padding: 18px;
  background: var(--canvas);
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  rotate: 2.5deg;
}
.art-card svg { display: block; width: 100%; height: auto; }
.blocks rect { fill: var(--lime); }

@media (min-width: 900px) {
  .case-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 64px;
    align-items: start;
  }
  .case-art { position: sticky; top: 48px; max-width: none; margin-top: 110px; }
}

.case-head > * + * { margin-top: 18px; }
.case-head { margin-bottom: 28px; }

/* the magnifier */
.lens { fill: rgba(250, 250, 250, 0.7); stroke: var(--ink); stroke-width: 4; }
.handle { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }

/* the five names: one per line, each on its own color */
.names {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.names span {
  display: block;
  padding: 11px 18px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.names span:nth-child(1) { background: var(--tile-lemon); rotate: -0.6deg; }
.names span:nth-child(2) { background: var(--tile-lilac); rotate: 0.5deg; }
.names span:nth-child(3) { background: var(--tile-sky); rotate: -0.4deg; }
.names span:nth-child(4) { background: var(--tile-leaf); rotate: 0.6deg; }
.names span:nth-child(5) { background: var(--tile-lilac); rotate: -0.5deg; }

/* one free hour: the calendar and the clock */
.hour-grid { display: grid; gap: 24px; }
.hour-art { position: relative; width: 250px; height: 190px; margin-top: 22px; }
.hour-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.art-cal { position: absolute; left: 0; top: 6px; width: 140px; rotate: -6deg; }
.art-clock { position: absolute; left: 106px; top: 46px; width: 132px; rotate: 5deg; }
.pie { fill: none; stroke: var(--lime); stroke-width: 62; }
.rim { fill: none; stroke: var(--ink); stroke-width: 2; }
.hand { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.hub { fill: var(--ink); }
.sweep { transform-box: view-box; transform-origin: 80px 80px; }

@media (min-width: 900px) {
  .hour-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  .hour-head { position: sticky; top: 40px; }
  .hour-art { width: 300px; height: 230px; margin-top: 34px; }
  .art-cal { width: 168px; }
  .art-clock { left: 128px; top: 56px; width: 158px; }
}

/* the cycle drawing in the membership card */
.art-cycle { max-width: 230px; margin-top: 26px; }
.art-cycle svg { display: block; width: 100%; height: auto; overflow: visible; }
.art-cycle .line { stroke-width: 2.5; }

@media (min-width: 900px) {
  .art-cycle { max-width: 280px; margin-top: 36px; }
}

/* ---------- questions ---------- */

.faq-head { margin-bottom: 32px; max-width: 16em; }

.faq-grid { display: grid; gap: 16px; }

@media (min-width: 720px) {
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

.faq-grid .card > * + * { margin-top: 10px; }

.faq { border: 1.5px solid var(--card-edge); rotate: var(--rot, 0deg); }
.faq-1 { background: var(--tile-lilac); }
.faq-2 { background: var(--tile-lemon); }
.faq-3 { background: var(--tile-sky); }
.faq-4 { background: var(--tile-leaf); }

/* ---------- close ---------- */

.close { text-align: left; }
.close-inner { position: relative; }
.close-inner > p + p { margin-top: 26px; }
.close .statement { max-width: 30ch; }
.close-action { position: relative; }
.close-arrow { display: none; }
.close-s1 { top: -44px; right: 6px; rotate: 10deg; }
.close-s2 { display: none; }
.close-s3 { display: none; }

@media (min-width: 900px) {
  .close-inner { max-width: 860px; margin-inline: auto; text-align: center; }
  .close-inner .statement, .close-inner p { margin-inline: auto; }
  .close-inner p { max-width: 44ch; }
  .close-inner .statement { max-width: 30ch; }
  .close-action { width: fit-content; }
  .close-arrow {
    display: block;
    position: absolute;
    right: calc(100% + 16px);
    top: -12px;
    width: 64px;
    height: auto;
    rotate: 38deg;
    overflow: visible;
  }
  .close-s1 { top: -30px; right: auto; left: -70px; width: 60px; height: 60px; }
  .close-s2 { display: block; top: 34%; right: -80px; width: 46px; height: 46px; rotate: 12deg; }
  .close-s3 { display: block; bottom: 6px; left: -30px; width: 34px; height: 34px; rotate: -14deg; }
}

.endnotes-wrap { padding-block: 32px; }
.endnotes > * + * { margin-top: 14px; }
.endnotes .small { max-width: 68ch; }

/* ---------- plain pages (privacy, disclaimer, not found) ---------- */

.doc { padding-top: 40px; padding-bottom: var(--section); }
.doc-head { max-width: 22em; margin-bottom: 40px; }
.doc-head > * + * { margin-top: 18px; }
.doc .prose { max-width: 68ch; }
.doc .prose h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.12;
  margin-top: 2.2em;
}
.doc .prose h2 + p { margin-top: 0.8em; }

@media (min-width: 900px) {
  .doc { padding-top: 72px; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--fog);
  padding-block: 28px 40px;
  font-size: 0.9375rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
}

.footer-links a { display: inline-block; padding: 10px 2px; }

/* ---------- motion ----------
   Only runs when html has .motion. The head script adds that class unless
   quiet mode is on or the device asks for reduced motion. Without it, every
   drawing sits in its finished state. Nothing here blinks: each piece moves
   once as it comes into view, and the stickers drift slowly. */

svg .pop, svg .rise { transform-box: fill-box; transform-origin: center; }
svg .rise { transform-origin: 50% 100%; }

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.motion [data-reveal].in { opacity: 1; transform: none; }

/* hidden until its turn, so round line ends do not show as stray dots */
.motion .draw { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.motion .in .draw { animation: dh-draw var(--t, 0.9s) var(--ease, ease) var(--d, 0s) forwards; }

.motion .pop { opacity: 0; }
.motion .in .pop { animation: dh-pop 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) var(--d, 0s) both; }

.motion .fade { opacity: 0; }
.motion .in .fade { animation: dh-fade 0.5s ease var(--d, 0s) forwards; }

.motion .rise { transform: scaleY(0); }
.motion .in .rise { animation: dh-rise 0.45s cubic-bezier(0.3, 1.2, 0.5, 1) var(--d, 0s) forwards; }

.motion .glide { transform: translate(-112px, -34px); }
.motion .in .glide { animation: dh-glide 1.5s cubic-bezier(0.5, 0, 0.2, 1) var(--d, 0s) forwards; }

.motion .slide-l { transform: translateX(-36px); }
.motion .slide-r { transform: translateX(36px); }
.motion .in .slide-l, .motion .in .slide-r { animation: dh-home 0.9s cubic-bezier(0.3, 1.1, 0.5, 1) 0.1s forwards; }

.motion .in .sweep { animation: dh-sweep var(--t, 2.2s) linear var(--d, 0s) both; }

.motion .floaty { animation: dh-float 7s ease-in-out infinite; }
.motion .floaty-2 { animation-duration: 9s; animation-delay: -3s; }
.motion .floaty-3 { animation-duration: 8s; animation-delay: -5s; }

.motion .logo-mark { animation: dh-spin 1.2s cubic-bezier(0.3, 1.3, 0.5, 1) 0.2s both; }

.motion .btn { transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.motion .btn-fill:hover { transform: translateY(-2px) rotate(-1deg); }
.motion .faq { transition: rotate 0.25s ease, transform 0.25s ease; }
.motion .faq:hover { rotate: 0deg; transform: translateY(-4px); }
.motion .names span { transition: rotate 0.25s ease; }
.motion .names span:hover { rotate: 0deg; }

@keyframes dh-draw { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dh-pop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes dh-fade { to { opacity: 1; } }
@keyframes dh-rise { to { transform: scaleY(1); } }
@keyframes dh-glide { to { transform: translate(0, 0); } }
@keyframes dh-home { to { transform: translateX(0); } }
@keyframes dh-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dh-spin { from { transform: rotate(-180deg) scale(0.4); } to { transform: rotate(0deg) scale(1); } }

/* ---------- quiet mode: motion off, color pops off, decoration out ---------- */

[data-quiet] {
  --lime: #482317;
  --wash-hero-band: none;
  --wash-form: none;
  --wash-case: var(--canvas);
  --wash-lemon: none;
  --wash-sky: none;
  --wash-close: none;
  --tile-sky: var(--canvas);
  --tile-lilac: var(--canvas);
  --tile-mint: var(--canvas);
  --tile-lemon: var(--canvas);
  --tile-leaf: var(--canvas);
  --card-edge: var(--field-line);
  scroll-behavior: auto;
}

[data-quiet] .deco { display: none; }
[data-quiet] .register { padding: 0; margin-block: 0; }
[data-quiet] .register::before { display: none; }
[data-quiet] .panel { border-color: var(--field-line); }
[data-quiet] .card { border-color: var(--field-line); }
[data-quiet] .band { padding-block: calc(var(--section) / 2); margin-block: 0; }
[data-quiet] .bar { box-shadow: none; }
[data-quiet] .btn-fill { color: var(--canvas); }
[data-quiet] .choice input:checked + span { color: var(--canvas); }
[data-quiet] a:not(.btn):not(.logo):hover { background: transparent; }
[data-quiet] a.skip-link:hover { background: var(--ink); }
[data-quiet] .logo-mark { display: none; }
[data-quiet] .faq, [data-quiet] .names span { rotate: 0deg; }
[data-quiet] .names span { border-color: var(--field-line); }
[data-quiet] .case-grid, [data-quiet] .hour-grid { display: block; }
[data-quiet] .hour-head { position: static; margin-bottom: 28px; }
[data-quiet] .split-head { position: static; }
[data-quiet] *, [data-quiet] *::before, [data-quiet] *::after {
  animation: none !important;
  transition: none !important;
}

/* ---------- the reader's own settings ---------- */

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

@media (forced-colors: active) {
  .btn, .choice span, .badge, .card, .panel, .names span { border: 1px solid CanvasText; }
  .choice input:checked + span { outline: 3px solid Highlight; }
}

@media print {
  .site-header, .deco, .quiet-toggle { display: none; }
  .register::before { display: none; }
}