/* ============================================================================
   What to Wear to Disney World — page styles (wtw-).
   ON THE SITE'S MIDNIGHT THEME: deep indigo paper, warm ivory ink, candlelight
   gold, Caslon display. Page signature: the hero is a living Orlando sky, a
   procedural WebGL day the visitor can scrub by the hour, and the editorial
   below runs on almanac keylines and Caslon act numerals. The daylight in the
   hero is the one place the site's night lifts, and it hands back to midnight
   through a veil at the hero's foot.
   ========================================================================== */

.wtw {
  /* site tokens with literal fallbacks (v1.css / chrome.css values) */
  --wtw-bg: var(--bg, oklch(21% 0.046 280));
  --wtw-deep: oklch(17% 0.042 278);
  --wtw-ink: var(--ink, oklch(93% 0.030 84));
  --wtw-ink-2: var(--ink-2, oklch(82% 0.030 84));
  --wtw-ink-3: oklch(76% 0.032 84);
  --wtw-line: color-mix(in oklab, var(--wtw-ink) 14%, transparent);
  --wtw-card: color-mix(in oklab, var(--wtw-ink) 5%, transparent);
  --wtw-card-up: color-mix(in oklab, var(--wtw-ink) 9%, transparent);
  --wtw-gold: var(--sb-gold, oklch(84% 0.130 86));
  --wtw-gold-deep: oklch(75% 0.130 84);
  --wtw-gold-ink: oklch(24% 0.045 78);
  --wtw-keyline: color-mix(in oklab, var(--wtw-gold) 45%, transparent);
  --wtw-storm: oklch(72% 0.115 250);      /* storm-slate blue, the page's second accent */
  --wtw-heat: oklch(74% 0.145 45);        /* heat amber for the furnace act */
  --wtw-display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --wtw-serif-i: 'Spectral', Georgia, serif;
  --wtw-label: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --wtw-appbar: 61px;
  background: var(--wtw-bg);
  color: var(--wtw-ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
}
.wtw [id] { scroll-margin-top: calc(var(--wtw-appbar) + .75rem); }
.wtw :where(a) { color: var(--wtw-gold); text-decoration-color: color-mix(in oklab, var(--wtw-gold) 55%, transparent); text-underline-offset: 2px; }
.wtw :where(a:hover) { color: oklch(90% 0.115 88); }
.wtw a:focus-visible, .wtw button:focus-visible, .wtw summary:focus-visible, .wtw input:focus-visible, .wtw [tabindex="0"]:focus-visible {
  outline: 3px solid var(--wtw-gold); outline-offset: 2px; border-radius: 4px;
}

/* ------------------------------------------------------------------ hero */
.wtw-hero {
  position: relative;
  overflow: hidden;
  min-height: min(92svh, 60rem);
  display: grid;
  align-items: end;
  background: var(--wtw-deep);
  isolation: isolate;
}
/* No-WebGL / no-JS sky: a golden-hour Florida gradient with cloud banks. */
.wtw-sky-fallback {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 55% at 72% 68%, oklch(78% 0.140 60 / .55), transparent 62%),
    radial-gradient(120% 70% at 30% 20%, oklch(58% 0.075 255 / .55), transparent 70%),
    linear-gradient(to bottom,
      oklch(46% 0.070 262) 0%,
      oklch(58% 0.075 250) 30%,
      oklch(74% 0.095 75)  62%,
      oklch(66% 0.130 50)  78%,
      oklch(30% 0.055 285) 100%);
}
.wtw-sky { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
/* The veil hands the daylight back to the site's midnight at the hero's foot,
   and holds a readable scrim behind the type. */
.wtw-hero-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, var(--wtw-bg) 0%, color-mix(in oklab, var(--wtw-bg) 60%, transparent) 9%, transparent 24%),
    radial-gradient(90% 80% at 18% 78%, oklch(15% 0.04 278 / .5), transparent 62%),
    linear-gradient(to right, oklch(15% 0.04 278 / .66) 0%, oklch(15% 0.04 278 / .34) 46%, transparent 78%);
}
.wtw-hero-inner {
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: calc(var(--wtw-appbar) + 4.5rem) clamp(1.1rem, 4vw, 2rem) clamp(2.5rem, 5.5vw, 4.25rem);
}
.wtw-kicker {
  font-family: var(--wtw-label);
  font-weight: 600;
  font-size: clamp(.8rem, .75rem + .3vw, .95rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: oklch(96% 0.02 84);
  text-shadow: 0 1px 14px oklch(15% 0.04 278 / .65);
  margin: 0 0 1rem;
}
.wtw-kicker time { color: inherit; }
.wtw-h1 {
  margin: 0;
  font-family: var(--wtw-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.2rem + 6.4vw, 5.75rem);
  line-height: .98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: oklch(97% 0.018 84);
  text-shadow: 0 2px 34px oklch(15% 0.04 278 / .72);
}
.wtw-h1-line { display: block; }
.wtw-h1 em { font-style: italic; color: oklch(92% 0.075 86); }
.wtw-dek {
  max-width: 44ch;
  margin: 1.25rem 0 0;
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  line-height: 1.55;
  color: oklch(94% 0.022 84);
  text-shadow: 0 1px 18px oklch(15% 0.04 278 / .7);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- hero HUD */
.wtw-hud {
  margin-top: 1.75rem;
  width: min(30rem, 100%);
  padding: .9rem 1.1rem 1.05rem;
  border: 1px solid oklch(96% 0.02 84 / .22);
  border-radius: 14px;
  background: oklch(16% 0.04 278 / .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.wtw-hud-row {
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--wtw-label); text-transform: uppercase; letter-spacing: .07em;
}
.wtw-hud-clock { font-weight: 600; font-size: 1.05rem; color: oklch(96% 0.02 84); min-width: 5.2ch; }
.wtw-hud-temp { font-weight: 700; font-size: 1.55rem; letter-spacing: 0; color: var(--wtw-gold); font-variant-numeric: tabular-nums; }
.wtw-hud-cond { font-weight: 600; font-size: .85rem; color: oklch(88% 0.03 84); border: 1px solid oklch(96% 0.02 84 / .28); border-radius: 999px; padding: .18rem .6rem; }
.wtw-hud-cond.is-storm { color: oklch(93% 0.05 250); border-color: oklch(75% 0.11 250 / .6); background: oklch(45% 0.09 255 / .35); }
.wtw-hud-cond.is-heat { color: oklch(95% 0.06 60); border-color: oklch(74% 0.145 45 / .6); background: oklch(50% 0.11 45 / .30); }
.wtw-hud-line {
  margin: .55rem 0 .8rem;
  font-family: var(--wtw-serif-i); font-style: italic;
  font-size: .98rem; line-height: 1.45;
  color: oklch(92% 0.025 84);
  min-height: 2.9em;
  text-wrap: pretty;
}
.wtw-scrub-label {
  display: block;
  font-family: var(--wtw-label); font-weight: 600; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: oklch(85% 0.03 84);
  margin-bottom: .3rem;
}
.wtw-scrub {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; margin: 0;
  background: transparent; cursor: grab; touch-action: pan-y;
  /* The track is painted per month by the script: a daylight gradient with the
     storm window banded in slate. This is the static fallback. */
  --scrub-track: linear-gradient(to right,
    oklch(30% 0.055 275), oklch(72% 0.11 60) 12%, oklch(78% 0.07 230) 30%,
    oklch(48% 0.045 255) 52%, oklch(70% 0.08 225) 64%, oklch(72% 0.13 55) 76%,
    oklch(24% 0.05 278) 100%);
}
.wtw-scrub::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: var(--scrub-track);
  box-shadow: inset 0 0 0 1px oklch(96% 0.02 84 / .28);
}
.wtw-scrub::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: var(--scrub-track);
  box-shadow: inset 0 0 0 1px oklch(96% 0.02 84 / .28);
}
.wtw-scrub-ticks {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .28rem;
  font-family: var(--wtw-label); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: oklch(90% 0.025 84);
}
.wtw-tick-storm {
  color: oklch(88% 0.07 250);
  border: 1px solid oklch(75% 0.11 250 / .45);
  border-radius: 999px;
  padding: .1rem .5rem;
  background: oklch(45% 0.09 255 / .3);
  transform: translateX(6%);
}
.wtw-tick-storm[hidden] { visibility: hidden; display: inline-block; }
.wtw-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, oklch(99% 0.02 90), var(--wtw-gold) 62%, var(--wtw-gold-deep));
  border: 2px solid oklch(20% 0.04 278);
  box-shadow: 0 0 0 3px oklch(96% 0.02 84 / .25), 0 0 18px oklch(84% 0.13 86 / .55);
}
.wtw-scrub::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, oklch(99% 0.02 90), var(--wtw-gold) 62%, var(--wtw-gold-deep));
  border: 2px solid oklch(20% 0.04 278);
  box-shadow: 0 0 0 3px oklch(96% 0.02 84 / .25), 0 0 18px oklch(84% 0.13 86 / .55);
}
.wtw-hud-months { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .7rem; }
.wtw-hud-step {
  font: inherit; line-height: 1;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid oklch(96% 0.02 84 / .3);
  background: oklch(96% 0.02 84 / .08);
  color: oklch(96% 0.02 84);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.wtw-hud-step:hover { background: oklch(96% 0.02 84 / .18); transform: scale(1.06); }
.wtw-hud-play[aria-pressed="false"] { border-color: var(--wtw-gold); color: var(--wtw-gold); }
.wtw-hud-month {
  font-family: var(--wtw-label); font-weight: 600; font-size: 1rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: oklch(96% 0.02 84); min-width: 8ch; text-align: center;
}
.wtw-sr-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wtw-hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.wtw-cta {
  display: inline-block;
  font-family: var(--wtw-label); font-weight: 600; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .72rem 1.25rem; border-radius: 999px;
  border: 1px solid oklch(96% 0.02 84 / .4);
  color: oklch(96% 0.02 84); text-decoration: none;
  background: oklch(16% 0.04 278 / .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.wtw-cta:hover { background: oklch(96% 0.02 84 / .16); color: oklch(98% 0.01 84); }
.wtw-cta-primary { background: var(--wtw-gold); border-color: var(--wtw-gold); color: var(--wtw-gold-ink); }
.wtw-cta-primary:hover { background: oklch(89% 0.12 87); color: var(--wtw-gold-ink); }

/* ------------------------------------------------------------------ body */
.wtw-body {
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem);
}
.wtw-body > h2 {
  font-family: var(--wtw-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: clamp(2.5rem, 6vw, 4rem) 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--wtw-keyline);
  max-width: 62rem;
  text-wrap: balance;
}
.wtw-body > p { max-width: 68ch; margin: 0 0 1.1rem; color: var(--wtw-ink-2); text-wrap: pretty; }
.wtw-body > p strong { color: var(--wtw-ink); }
.wtw-lede {
  font-size: clamp(1.14rem, 1.05rem + .5vw, 1.36rem);
  line-height: 1.6;
  color: var(--wtw-ink) !important;
  max-width: 62ch !important;
}
.wtw-lede::first-letter {
  font-family: var(--wtw-display);
  font-size: 3.4em; line-height: .82;
  float: left; padding: .07em .12em 0 0;
  color: var(--wtw-gold);
}

/* ------------------------------------------------------------ answer box */
.wtw-answer {
  max-width: 62ch;
  margin: 1.9rem 0 0;
  padding: 1.2rem 1.4rem 1.25rem;
  border: 1px solid var(--wtw-keyline);
  border-radius: 10px;
  background: color-mix(in oklab, var(--wtw-gold) 7%, transparent);
}
.wtw-answer-kicker {
  font-family: var(--wtw-label); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wtw-gold);
  margin: 0 0 .45rem;
}
.wtw-answer p:last-child { margin: 0; color: var(--wtw-ink); }

/* ----------------------------------------------------------- the widget */
.wtw-tool {
  margin: clamp(2.75rem, 6vw, 4.25rem) 0 0;
  border: 1px solid var(--wtw-keyline);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% -30%, oklch(30% 0.06 285 / .5), transparent 60%),
    var(--wtw-card);
  padding: clamp(1.4rem, 3.5vw, 2.5rem);
}
.wtw-tool-head { max-width: 60ch; }
.wtw-tool-title {
  font-family: var(--wtw-display); font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  margin: 0 0 .5rem;
}
.wtw-tool-sub { color: var(--wtw-ink-2); margin: 0 0 1.4rem; text-wrap: pretty; }

.wtw-rail {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .45rem;
  margin-bottom: 1.5rem;
}
.wtw-rail-btn {
  font: inherit;
  display: grid; gap: .1rem; justify-items: center;
  padding: .55rem .2rem .5rem;
  border-radius: 10px;
  border: 1px solid var(--wtw-line);
  background: transparent;
  color: var(--wtw-ink-2);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.wtw-rail-btn:hover { background: var(--wtw-card-up); transform: translateY(-1px); }
.wtw-rail-name { font-family: var(--wtw-label); font-weight: 600; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; }
.wtw-rail-temp { font-family: var(--wtw-label); font-size: .8rem; color: var(--wtw-ink-3); font-variant-numeric: tabular-nums; }
.wtw-rail-btn.is-active {
  background: var(--wtw-gold); border-color: var(--wtw-gold); color: var(--wtw-gold-ink);
}
.wtw-rail-btn.is-active .wtw-rail-temp { color: oklch(38% 0.06 78); }

.wtw-panel-month {
  font-family: var(--wtw-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  font-size: .85rem; color: var(--wtw-gold);
  margin: 0 0 .7rem;
}
.wtw-stats { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin: 0 0 1.05rem; padding: 0; }
.wtw-stat {
  font-family: var(--wtw-label); font-size: .88rem; letter-spacing: .05em;
  color: var(--wtw-ink-3); text-transform: uppercase;
  border: 1px solid var(--wtw-line); border-radius: 999px;
  padding: .3rem .75rem;
  background: var(--wtw-card);
}
.wtw-stat strong { color: var(--wtw-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.wtw-stat-storm { border-color: oklch(75% 0.11 250 / .5); background: oklch(45% 0.09 255 / .22); }
.wtw-stat-storm strong { color: oklch(88% 0.07 250); }
.wtw-panel-headline {
  font-family: var(--wtw-display); font-weight: 400;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  line-height: 1.2; letter-spacing: -0.005em;
  margin: 0 0 .7rem; max-width: 34ch; text-wrap: balance;
}
.wtw-panel-guide { color: var(--wtw-ink-2); max-width: 66ch; margin: 0 0 1.35rem; text-wrap: pretty; }

.wtw-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; }
.wtw-act {
  border: 1px solid var(--wtw-line);
  border-radius: 12px;
  background: var(--wtw-card);
  padding: 1rem 1.05rem 1.05rem;
}
.wtw-act dt {
  font-family: var(--wtw-label); font-weight: 600; font-size: .82rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--wtw-ink-3);
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .5rem;
}
.wtw-act-n {
  font-family: var(--wtw-display); font-size: 1.35rem; line-height: 1;
  color: var(--wtw-gold); letter-spacing: 0;
}
.wtw-act:nth-child(2) .wtw-act-n { color: var(--wtw-heat); }
.wtw-act:nth-child(3) .wtw-act-n { color: var(--wtw-storm); }
.wtw-act dd { margin: 0; color: var(--wtw-ink-2); font-size: .98rem; line-height: 1.55; text-wrap: pretty; }
.wtw-act-star { grid-column: 1 / -1; border-color: var(--wtw-keyline); background: color-mix(in oklab, var(--wtw-gold) 7%, transparent); }
.wtw-act-star dt { color: var(--wtw-gold); }

/* ------------------------------------------------------------- the table */
.wtw-table-intro { color: var(--wtw-ink-3) !important; }
.wtw-table-wrap {
  overflow-x: auto; border: 1px solid var(--wtw-keyline); border-radius: 12px;
  /* Scroll cue: the shadows sit at the viewport edges (scroll) and the local
     covers slide over each one when that end of the table is reached. */
  background:
    linear-gradient(to right, var(--wtw-card), transparent 32px) left / 48px 100% no-repeat local,
    linear-gradient(to left, var(--wtw-card), transparent 32px) right / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, oklch(10% 0.03 278 / .5), transparent) left / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, oklch(10% 0.03 278 / .5), transparent) right / 18px 100% no-repeat scroll,
    var(--wtw-card);
  background-attachment: local, local, scroll, scroll, scroll;
}
.wtw-table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.wtw-table th, .wtw-table td { text-align: left; padding: .68rem .95rem; border-bottom: 1px solid var(--wtw-line); }
.wtw-table thead th {
  font-family: var(--wtw-label); font-weight: 600; font-size: .8rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--wtw-ink-3);
  border-bottom: 1px solid var(--wtw-keyline);
}
.wtw-table tbody th { font-family: var(--wtw-label); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-size: .92rem; white-space: nowrap; }
.wtw-table td { color: var(--wtw-ink-2); font-size: .98rem; }
.wtw-table td:nth-child(2), .wtw-table td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wtw-table tbody tr:last-child th, .wtw-table tbody tr:last-child td { border-bottom: 0; }
.wtw-table tbody tr:hover { background: var(--wtw-card-up); }

/* ------------------------------------------------------------------- kit */
.wtw-kit-label {
  font-family: var(--wtw-label); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wtw-gold);
  margin: 1.3rem 0 .4rem;
}
.wtw-kit { max-width: 68ch; margin: 0 0 1.2rem; padding: 0 0 0 1.15rem; color: var(--wtw-ink-2); }
.wtw-kit li { margin-bottom: .55rem; padding-left: .25rem; text-wrap: pretty; }
.wtw-kit li::marker { color: var(--wtw-gold); }
.wtw-kit strong { color: var(--wtw-ink); }

/* ------------------------------------------------------------------- faq */
.wtw-faq { max-width: 68ch; }
.wtw-faq-item { border-bottom: 1px solid var(--wtw-line); }
.wtw-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem .2rem;
  font-family: var(--wtw-display); font-size: 1.18rem; line-height: 1.3;
  color: var(--wtw-ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.wtw-faq-item summary::-webkit-details-marker { display: none; }
.wtw-faq-item summary::after { content: "+"; font-family: var(--wtw-label); color: var(--wtw-gold); font-size: 1.3rem; transition: transform .18s ease; }
.wtw-faq-item[open] summary::after { transform: rotate(45deg); }
.wtw-faq-item > p { margin: 0 0 1.15rem; padding: 0 .2rem; color: var(--wtw-ink-2); text-wrap: pretty; }

/* ----------------------------------------------------------------- close */
.wtw-close {
  font-family: var(--wtw-serif-i); font-style: italic;
  font-size: clamp(1.1rem, 1.02rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--wtw-ink) !important;
  max-width: 60ch !important;
  margin-top: 2rem !important;
}

/* --------------------------------------------------------------- related */
.wtw-related { margin-top: clamp(2.5rem, 6vw, 4rem); border: 1px solid var(--wtw-keyline); border-radius: 14px; padding: 1.4rem 1.5rem 1.5rem; background: var(--wtw-card); max-width: 46rem; }
.wtw-related h2 { font-family: var(--wtw-display); font-weight: 400; font-size: 1.45rem; margin: 0 0 .8rem; }
.wtw-related ul { margin: 0; padding: 0; list-style: none; }
.wtw-related li { padding: .45rem 0; border-top: 1px solid var(--wtw-line); }
.wtw-related li:first-child { border-top: 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .wtw-acts { grid-template-columns: 1fr; }
  .wtw-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wtw-hero { min-height: min(96svh, 52rem); }
  .wtw-hero-veil {
    background:
      linear-gradient(to top, var(--wtw-bg) 0%, color-mix(in oklab, var(--wtw-bg) 60%, transparent) 9%, transparent 26%),
      linear-gradient(to right, oklch(15% 0.04 278 / .72) 0%, oklch(15% 0.04 278 / .48) 60%, oklch(15% 0.04 278 / .2) 95%);
  }
  .wtw-hero-inner { padding-top: calc(var(--wtw-appbar) + 3rem); }
  .wtw-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wtw-hud { width: 100%; }
  .wtw-hud-row { gap: .6rem; }
  .wtw-hero-ctas { margin-top: 1.25rem; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wtw *, .wtw *::before, .wtw *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Reveal staging: an inline head script stamps html.wtw-anim (motion-safe only),
   so the targets never flash visible-then-rise. GSAP removes the class and runs
   its own richer stagger; if it never arrives, the keyframe below reveals the
   hero anyway, so nothing can ship blank. */
html.wtw-anim .wtw [data-wtw-rise] {
  opacity: 0; transform: translateY(26px);
  animation: wtwRise .9s cubic-bezier(.22, 1, .36, 1) 1.35s forwards;
}
@keyframes wtwRise { to { opacity: 1; transform: translateY(0); } }