/* ─────────────────────────────────────────────────────────────
   EliteMotion website — one stylesheet for every page.
   Same world as the app: night navy, gold, DM Sans
   (admin/lib/data/models/theme_config.dart, core/ui/foundations/typography.dart).
   The homepage's first screen is the app's planning grid; see .camp.
   ───────────────────────────────────────────────────────────── */

:root {
  --navy-950: #0B1622;   /* page ground */
  --navy-900: #101E2B;   /* quiet surface */
  --navy-850: #132231;
  --navy-800: #1C2B3A;   /* lesson block */
  --navy-700: #26405A;   /* group class block */
  --navy-600: #2A3B4B;   /* hairlines, outlines */
  --ink-900: #16232F;    /* text on gold */
  --gold: #F3CC75;
  --gold-tint: rgba(243, 204, 117, 0.14);
  --text: #EDEFF1;
  --text-2: #B9C4CF;     /* 9.6:1 on navy-950 */
  --text-3: #8E9BA8;     /* 6.0:1 on navy-950, 5.1:1 on navy-800 */

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-h: 64px;
  --gutter: 6px;
  --r-block: 14px;
  --r-panel: 22px;
  --page-pad: clamp(16px, 3vw, 40px);
  --max: 1200px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; color-scheme: dark; }

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
p, li { text-wrap: pretty; }

::selection { background: var(--gold); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.slot--hero :focus-visible, .org-cta :focus-visible { outline-color: var(--ink-900); }
:root { --gold-light: #F7D98F; --gold-muted: #D9BE7E; }

html { scrollbar-color: var(--navy-600) var(--navy-950); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--page-pad); }

.section-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); max-width: 46ch; margin-top: 18px; }

/* ── Nav ──────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 22, 34, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--navy-800);
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--page-pad);
}

.nav-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
/* The transparent crest straight on the navy (no tile), like the app. */
.nav-brand img { height: 48px; width: auto; }

.nav-menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--text); }

.locale-switcher { display: flex; gap: 2px; }
.locale-switcher a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 32px; padding: 0 6px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text-3); text-decoration: none;
}
.locale-switcher a:hover { color: var(--text); background: var(--navy-800); }
.locale-switcher a[aria-current="page"] { color: var(--ink-900); background: var(--gold); }

.nav-menu-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--navy-600); border-radius: 12px; cursor: pointer;
}
.nav-menu-toggle svg { width: 20px; height: 20px; }
.nav-menu-toggle .icon-close, .nav-menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── Store buttons ────────────────────────────────────────── */
.store-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 18px 8px 14px;
  background: #000; color: #fff; text-decoration: none;
  border: 1px solid var(--navy-600); border-radius: 12px;
  font-size: 16px; font-weight: 700; line-height: 1.1;
  transition: border-color 0.2s;
}
.btn-store:hover { border-color: var(--gold); }
.btn-store svg { width: 22px; height: 22px; flex-shrink: 0; }
.btn-store-sub { display: block; font-size: 11px; font-weight: 500; color: #C9D2DB; }

.btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--ink-900); color: var(--gold); text-decoration: none;
  font-weight: 700; font-size: 17px; white-space: nowrap;
}
.btn-gold:hover { background: #000; }

/* ── The camp grid (homepage first screen) ───────────────── */
/* One CSS grid: column 1 is the time ruler, columns 2–5 the trainers + the
   reception desk (class/attribute names still say "room"); row 1
   the day chips, row 2 the room names, rows 3–9 the hours 09:00–15:00.
   .camp-board is display: contents, so its slots (placed inline by
   build.mjs) and the hero/action blocks share the same grid. */
.camp {
  --rows: 7;
  display: grid;
  grid-template-columns: 64px repeat(4, minmax(0, 1fr));
  grid-template-rows: auto 36px repeat(var(--rows), minmax(76px, 1fr));
  gap: var(--gutter);
  max-width: 1480px;
  /* The whole day 09:00–15:00 fills the first screen on a laptop. */
  min-height: clamp(720px, calc(100svh - var(--nav-h)), 960px);
  margin: 0 auto;
  padding: 18px var(--page-pad) 28px;
  position: relative;
}

.camp-board { display: contents; }

.camp-controls { grid-area: 1 / 2 / 2 / -1; display: flex; align-items: center; gap: 16px; padding-bottom: 6px; }
.camp-days, .camp-rooms { display: flex; gap: 8px; }
.camp-rooms { display: none; }
.camp-demo { margin-left: auto; font-size: 13px; color: var(--text-3); }

.chip {
  min-height: 40px; padding: 0 16px; border-radius: 12px;
  background: var(--navy-850); border: 1px solid var(--navy-800);
  color: var(--text-2); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { color: var(--text); border-color: var(--navy-600); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink-900); }

.room-head { align-self: end; padding: 0 4px 6px; font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: 0.01em; }
.hour { font-size: 13px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 2px; }

.slot {
  position: relative; z-index: 2;
  border-radius: var(--r-block);
  padding: 12px 14px;
  background: var(--navy-800);
  font-size: 14px; line-height: 1.3; color: var(--text-2);
  min-width: 0;
}
.slot b { display: block; font-size: 15px; color: var(--text); font-weight: 700; margin-bottom: 3px; }
.slot-time { display: none; }
.camp .slot--under { display: none; }
.slot--group { background: var(--navy-700); }
.slot--group span { color: #D3DCE5; }
.slot--break { background: transparent; border: 1px dashed var(--navy-600); color: var(--text-3); display: flex; align-items: center; }
.slot--desk { background: var(--navy-900); border: 1px solid var(--navy-800); }
.slot--desk b { color: var(--gold); }
.slot--finals { background: var(--gold-tint); }
.slot--finals b { color: var(--gold); }

/* Day switch: the incoming day's blocks settle into place. */
.camp.is-switching .slot[data-day] { animation: slot-in 0.42s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes slot-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.camp[data-day="fri"] .slot[data-day]:not([data-day="fri"]),
.camp[data-day="sat"] .slot[data-day]:not([data-day="sat"]),
.camp[data-day="sun"] .slot[data-day]:not([data-day="sun"]) { display: none; }

/* The headline block, booked 10:00–12:00 across the first two trainers. */
.slot--hero {
  grid-area: 4 / 2 / 7 / 4;
  z-index: 4;
  background: var(--gold);
  color: var(--ink-900);
  border-radius: var(--r-panel);
  padding: clamp(24px, 2.6vw, 40px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.slot--hero h2 { font-size: clamp(36px, 3.7vw, 60px); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink-900); max-width: 16ch; }
.slot--hero p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: #2A3B4B; max-width: 52ch; }

/* The two actions, booked at 11:00 next to the headline. */
.slot--cta {
  z-index: 4;
  background: var(--navy-950);
  border: 2px solid var(--gold);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 16px 18px;
}
.camp .slot--app { grid-area: 5 / 4 / 7 / 5; }
.camp .slot--org { grid-area: 5 / 5 / 7 / 6; }
.slot-cta-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; }
.slot-cta-note { font-size: 13px; color: var(--text-3); }
.slot--app .btn-store { min-height: 44px; padding: 6px 12px 6px 10px; font-size: 14px; }
.slot--app .btn-store svg { width: 18px; height: 18px; }
.slot-cta-action { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 700; font-size: 16px; }
.icon-arrow { width: 18px; height: 18px; flex-shrink: 0; }
a.slot-cta-action { text-decoration: none; width: fit-content; }
a.slot-cta-action:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The address in plain sight + a copy button: a mailto link does nothing on a
   computer without a mail app (e.g. people who use Gmail in the browser). */
.email-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.email-address { color: var(--text-2); user-select: all; overflow-wrap: anywhere; }
.copy-email {
  min-height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--navy-600); color: var(--text);
  font-size: 13px; font-weight: 600;
}
.copy-email:hover { border-color: var(--gold); }
.copy-email.is-copied { border-color: var(--gold); color: var(--gold); }
.org-cta .email-copy { margin-top: 12px; }
.org-cta .email-address { color: var(--ink-900); font-weight: 600; }
.org-cta .copy-email { border-color: rgba(22, 35, 47, 0.4); color: var(--ink-900); }
.org-cta .copy-email:hover, .org-cta .copy-email.is-copied { border-color: var(--ink-900); color: var(--ink-900); }

/* "Now" marker: drifts through the demo day (main.js), static at 10:42 without JS. */
.now-line {
  grid-area: 4 / 1 / 5 / -1;
  align-self: start;
  position: relative; top: 70%;
  height: 2px; background: var(--gold); z-index: 3; /* over lesson blocks, under the hero and actions */
  box-shadow: 0 0 0 1px rgba(11, 22, 34, 0.55);
  pointer-events: none;
}
.now-line span {
  position: absolute; left: 0; top: -11px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink-900); background: var(--gold); padding: 2px 7px; border-radius: 6px;
}

/* ── Hero: one lesson, booked once, seen from three seats ──── */
/* Headline + the two actions on top, the three views of the same lesson
   below (the couple's phone, the trainer's day, the organizer's board).
   The gold "hit" lands in the board first, then the trainer's day, then the
   phone (book-*, below) — the headline's promise played once. */
.hero { padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 104px); }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 28px clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero-copy h1 { font-size: clamp(42px, 5.4vw, 78px); line-height: 1; letter-spacing: -0.035em; max-width: 14ch; }
.hero-echo { display: block; color: var(--gold); }
.hero-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); max-width: 50ch; margin-top: 22px; }
.hero-actions { display: grid; gap: var(--gutter); }
.hero .slot--cta { padding: 18px 20px; }
.hero-stage { grid-column: 1 / -1; margin-top: clamp(20px, 3vw, 40px); }
.hero .views-demo { grid-column: 1 / -1; margin-top: -8px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-stage .hit { animation: book 0.7s var(--ease-out) both, book-ring 1s var(--ease-out) both; animation-delay: var(--book, 0.5s); }
  .hero-stage .hit b, .hero-stage .hit .t { animation: book-ink 0.7s var(--ease-out) both; animation-delay: var(--book, 0.5s); }
  .view--organizer { --book: 0.55s; }
  .view--trainer { --book: 1s; }
  .view--dancer { --book: 1.45s; }
  .hero-stage.is-waiting .hit, .hero-stage.is-waiting .hit b, .hero-stage.is-waiting .hit .t { animation-play-state: paused; }
}
@keyframes book { from { background-color: var(--navy-800); color: var(--text-2); } }
@keyframes book-ink { from { color: var(--text); } }
@keyframes book-ring {
  0% { outline: 2px solid rgba(243, 204, 117, 0); outline-offset: 0; }
  20% { outline: 2px solid rgba(243, 204, 117, 0.9); outline-offset: 2px; }
  100% { outline: 2px solid rgba(243, 204, 117, 0); outline-offset: 12px; }
}

.dancers h2, .organizers h2, .languages h2, .close h2 { font-size: clamp(34px, 4.4vw, 58px); }

.views-stage {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 28px;
  align-items: end;
}
.view { display: flex; flex-direction: column; }
.view figcaption { order: 2; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.views-demo { margin-top: 20px; font-size: 13px; color: var(--text-3); }

.t { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-3); font-size: 13px; }
.views-stage .hit { background: var(--gold); color: var(--ink-900); }
.views-stage .hit .t, .views-stage .hit b { color: var(--ink-900); }

.phone {
  border-radius: 36px; border: 8px solid #000; background: var(--navy-850);
  padding: 26px 14px 20px; min-height: 380px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.phone-day { font-weight: 800; font-size: 18px; margin: 0 6px 14px; }
.agenda-row { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 12px; border-radius: 12px; background: var(--navy-800); margin-bottom: 8px; font-size: 13px; color: var(--text-2); line-height: 1.35; }
.agenda-row b { display: block; color: var(--text); font-size: 14px; }

.strip { border-radius: var(--r-panel); background: var(--navy-900); border: 1px solid var(--navy-800); padding: 20px; }
.strip-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--gold); }
.strip-lessons li { display: grid; grid-template-columns: 52px 1fr; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.strip-lessons li + li { margin-top: 4px; }

.mini-board { border-radius: var(--r-panel); background: var(--navy-900); border: 1px solid var(--navy-800); padding: 20px; }
.mini-head { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 13px; line-height: 1.3; }
.mini-grid > span { border-radius: 10px; padding: 12px 10px; background: var(--navy-800); color: var(--text-2); min-height: 64px; }
.mini-grid .mh { background: none; min-height: 0; padding: 0 2px 2px; color: var(--gold); font-weight: 700; }
.mini-grid .mg { background: var(--navy-700); color: #D3DCE5; }
.mini-grid .mb { background: none; border: 1px dashed var(--navy-600); color: var(--text-3); min-height: 40px; }
.mini-grid .hit { font-weight: 700; }

/* ── The real app (screenshots) ───────────────────────────── */
.app-shots { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--navy-800); }
.app-shots h2 { font-size: clamp(34px, 4.4vw, 58px); }
.shots-phones { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.shot-phone { margin: 0; }
.shot-phone:nth-child(even) { margin-top: 48px; }
.shot-screen { border-radius: 34px; border: 7px solid #000; overflow: hidden; background: var(--navy-950); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75); }
.shot-screen img, .shot-desktop-screen img { display: block; width: 100%; height: auto; }
.shot-phone figcaption, .shot-desktop figcaption { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.shot-desktop { margin: 56px 0 0; }
.shot-desktop-screen { border-radius: 18px; border: 1px solid var(--navy-600); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); }

/* ── For dancers ──────────────────────────────────────────── */
.dancers { padding: clamp(80px, 10vw, 140px) 0; background: var(--navy-900); border-top: 1px solid var(--navy-800); border-bottom: 1px solid var(--navy-800); }
.dancers-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.dancers-copy { position: sticky; top: calc(var(--nav-h) + 32px); }
.dancers-copy .store-buttons { margin-top: 32px; }

/* The dancer's journey as a timeline. The gold fill follows the scroll
   (--progress, set by main.js) and each dot lights up as its step comes into
   view. Without JS or with reduced motion everything is shown, rail filled. */
.journey { --rail-x: 11px; --gap: 48px; position: relative; padding-left: var(--gap); }
.journey-rail { position: absolute; left: var(--rail-x); top: 10px; bottom: 34px; width: 2px; border-radius: 2px; background: var(--navy-600); }
.journey-fill {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, var(--gold), #E6B62D);
  transform-origin: top; transform: scaleY(var(--progress, 1));
}
.journey-phase { position: relative; font-size: 14px; font-weight: 700; color: var(--gold); padding: 2px 0 10px; }
.journey-phase:not(:first-of-type) { margin-top: 18px; }
.journey-phase::before {
  content: ''; position: absolute; top: 6px; left: calc(var(--rail-x) - var(--gap) - 5px);
  width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg);
  background: var(--gold);
}
.journey-step { position: relative; padding: 14px 0 26px; }
.journey-step::before {
  content: ''; position: absolute; top: 20px; left: calc(var(--rail-x) - var(--gap) - 7px);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy-900); border: 2px solid var(--navy-600);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.6s;
}
.journey-step h3 { font-size: 22px; letter-spacing: -0.02em; }
.journey-step p { color: var(--text-2); margin-top: 6px; max-width: 44ch; }

.journey-step.is-reached::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 6px var(--gold-tint); }
.motion .journey-step.is-reached::before { animation: journey-pulse 0.9s var(--ease-out); }
@keyframes journey-pulse { 0% { box-shadow: 0 0 0 0 rgba(243, 204, 117, 0.55); } 100% { box-shadow: 0 0 0 6px var(--gold-tint); } }

.motion .journey-body { opacity: 0; transform: translateX(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.motion .journey-step.is-reached .journey-body { opacity: 1; transform: none; }

/* ── For organizers ───────────────────────────────────────── */
.organizers { padding: clamp(80px, 10vw, 140px) 0; }
.phases { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.phases::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--navy-600) 85%); }
.phase { padding-right: 32px; }
.phase h3 { position: relative; padding-top: 40px; font-size: 22px; letter-spacing: -0.02em; }
.phase h3::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy-950); border: 3px solid var(--gold); }
.phase ul { margin-top: 18px; }
.phase li { padding: 14px 0; border-top: 1px solid var(--navy-800); color: var(--text-2); }

.org-cta {
  margin-top: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--gold); color: var(--ink-900);
  border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 48px);
}
.org-cta-title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.org-cta p:not(.org-cta-title) { color: #2A3B4B; margin-top: 6px; }

/* ── Languages ────────────────────────────────────────────── */
.languages { padding: clamp(64px, 8vw, 110px) 0; border-top: 1px solid var(--navy-800); }
.languages-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.languages p { color: var(--text-2); margin-top: 14px; max-width: 38ch; }
.language-list { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.02em; color: var(--text-3); }
.language-list li:nth-child(odd) { color: var(--text); }

/* ── Close ────────────────────────────────────────────────── */
.close { padding: clamp(80px, 10vw, 130px) 0; background: var(--navy-900); border-top: 1px solid var(--navy-800); }
.close-slots { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.close .slot--cta { min-height: 168px; padding: 28px 30px; gap: 16px; border-radius: var(--r-panel); }
.close .slot-cta-title { font-size: clamp(24px, 2.4vw, 32px); }
.close .slot-cta-action { font-size: 18px; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { padding: 64px 0 32px; border-top: 1px solid var(--navy-800); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-brand p { color: var(--text-3); margin-top: 14px; max-width: 32ch; font-size: 15px; }
.footer-col h2 { font-size: 14px; letter-spacing: 0; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.footer-col li + li { margin-top: 8px; }
.footer-col a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--navy-800); font-size: 14px; color: var(--text-3); }

/* ── Privacy pages ────────────────────────────────────────── */
.legal-page { padding: 64px 0 96px; }
.legal-page .container { max-width: 720px; }
.legal-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: 15px; margin-bottom: 36px; min-height: 44px; }
.legal-back:hover { color: var(--gold); }
.legal-back svg { width: 18px; height: 18px; }
.legal-header { padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--navy-800); }
.legal-header h1 { font-size: clamp(32px, 5vw, 48px); }
.legal-date { color: var(--text-3); margin-top: 10px; font-size: 15px; }
.legal-toc { background: var(--navy-900); border: 1px solid var(--navy-800); border-radius: 16px; padding: 20px 24px; margin-bottom: 44px; }
.legal-toc h2 { font-size: 16px; letter-spacing: 0; margin-bottom: 10px; }
.legal-toc ol { list-style: decimal; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc li { font-size: 15px; padding: 3px 0; break-inside: avoid; }
.legal-toc a { color: var(--text-2); }
.legal-toc a:hover { color: var(--gold); }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 14px; }
.legal-section p, .legal-section li { color: var(--text-2); max-width: 68ch; }
.legal-section p + p { margin-top: 12px; }
.legal-section ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.legal-section li + li { margin-top: 6px; }
.legal-section a { color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── First-load choreography: the day's blocks drop into place ── */
/* The grid sits below the first screen: main.js hides its blocks (.is-waiting)
   while it is out of view and plays .is-entering once it scrolls in. Without JS
   or under reduced motion everything is simply shown. */
.camp-band { border-top: 1px solid var(--navy-800); padding-top: clamp(40px, 5vw, 72px); }
.camp.is-waiting .slot[data-day], .camp.is-waiting .slot--cta { opacity: 0; }
.camp.is-waiting .slot--hero { transform: scale(0.96); }
.camp.is-entering .slot[data-day] { animation: enter-drop 0.55s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 34ms); }
.camp.is-entering .slot--hero { animation: enter-rise 0.8s var(--ease-out) 0.1s both; }
.camp.is-entering .slot--cta { animation: enter-drop 0.6s var(--ease-out) 0.45s both; }
@keyframes enter-drop { from { opacity: 0; transform: translateY(-12px) scale(0.97); } }
@keyframes enter-rise { from { transform: scale(0.96); } }

/* ── "Let the planner do it" ─────────────────────────────── */
/* Lanes (trainer, couple, camp day) × hours. Cells are placed with --lane/--slot
   so phones can swap the axes (hours down, lanes across). */
.planner { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--navy-800); }
.planner h2 { font-size: clamp(34px, 4.4vw, 58px); }
.pl { margin-top: 48px; display: flex; flex-direction: column; gap: 28px; }
.pl-grid { display: grid; grid-template-columns: 132px repeat(9, minmax(0, 1fr)); grid-template-rows: 30px repeat(3, 84px); gap: var(--gutter); }
.pl-grid > * { grid-row: var(--lane); grid-column: var(--slot); min-width: 0; }
.pl-hour { align-self: end; padding: 0 4px 4px; font-size: 13px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.pl-lane { display: flex; flex-direction: column; justify-content: center; padding-right: 8px; }
.pl-lane b { font-size: 16px; line-height: 1.2; }
.pl-lane span { font-size: 13px; color: var(--text-3); }
.pl-cell { position: relative; border-radius: 12px; background: var(--navy-900); border: 1px solid var(--navy-800); transition: border-color 0.25s, background-color 0.25s; }
.pl-cell.is-busy { background: var(--navy-800); border-color: var(--navy-800); }
.pl-block { display: block; padding: 10px; font-size: 13px; line-height: 1.25; color: var(--text-2); overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.pl-block b { display: block; font-size: 14px; color: var(--text); }
.pl-booked { position: absolute; inset: -1px; border-radius: 12px; background: var(--gold); color: var(--ink-900); }
.pl-booked b, .pl-booked span { color: var(--ink-900); }

/* A column being checked, refused or chosen. */
.pl-cell.is-checking, .pl-cell.is-ok { border-color: var(--gold); }
.pl-hour.is-checking, .pl-hour.is-ok { color: var(--gold); }
.pl-cell.is-no { background-image: repeating-linear-gradient(135deg, rgba(237, 239, 241, 0.05) 0 6px, transparent 6px 12px); }
.pl-hour.is-no { text-decoration: line-through; }
.pl-cell.is-soft { border-color: rgba(243, 204, 117, 0.6); border-style: dashed; }
.pl-hour.is-soft { color: #D9BE7E; }
/* Once booked, the refused hours step back so the found hour reads as found. */
.pl.is-booked .pl-cell.is-no { opacity: 0.6; transition: opacity 0.5s; }

.pl-side { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px 40px; align-items: start; }
.pl-side .btn-plan { grid-row: 1 / span 2; }
.pl-log { columns: 2; column-gap: 32px; }
.pl-log li { break-inside: avoid; }
.pl-result { grid-column: 2; }
.btn-plan {
  display: none; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 10px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--gold); color: var(--ink-900); font-size: 16px; font-weight: 800;
}
.btn-plan:hover { background: #F7D98F; }
.btn-plan[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.js .btn-plan { display: flex; }
.pl-log li { display: grid; grid-template-columns: 48px 22px 1fr; align-items: start; gap: 6px; padding: 9px 0; border-top: 1px solid var(--navy-800); font-size: 15px; color: var(--text-2); line-height: 1.35; }
.pl-log .t { padding-top: 1px; }
.pl-mark svg { width: 18px; height: 18px; margin-top: 1px; }
.pl-log .is-no .pl-mark { color: var(--text-3); }
.pl-log .is-ok, .pl-log .is-ok .t { color: var(--text); font-weight: 700; }
.pl-log .is-ok .pl-mark { color: var(--gold); }
.pl-log .is-soft .pl-mark { color: #D9BE7E; }
.pl-log .is-soft { color: var(--text); }
.pl-result:empty { padding: 0; border: 0; }
.pl-result { padding: 14px 16px; border-radius: 14px; background: var(--gold-tint); border: 1px solid rgba(243, 204, 117, 0.35); font-size: 15px; line-height: 1.45; }

/* With JS the demo starts empty and plays on request. */
.js .pl-booked { opacity: 0; transform: translateY(-14px) scale(0.96); }
.js .pl.is-booked .pl-booked { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); transition-delay: calc(var(--k, 0) * 110ms); }
.js .pl-log li { transition: color 0.3s; }
.js .pl-log li:not(.is-shown), .js .pl-log li:not(.is-shown) .t { color: var(--text-3); }
.js .pl-log li:not(.is-shown) .pl-mark, .js .pl-log li:not(.is-shown) .pl-reason { visibility: hidden; }
.js .pl.is-booked .pl-result:not(:empty) { animation: enter-drop 0.5s var(--ease-out) both; }

/* ── Live display ─────────────────────────────────────────── */
.display { padding: clamp(80px, 10vw, 140px) 0; background: var(--navy-900); border-top: 1px solid var(--navy-800); border-bottom: 1px solid var(--navy-800); }
.display h2 { font-size: clamp(34px, 4.4vw, 58px); }
.display-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.display-plan, .plan-tag { display: inline-block; margin-top: 24px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(243, 204, 117, 0.55); color: var(--gold); font-size: 14px; font-weight: 700; }
.tv { margin: 0; }
.tv-screen {
  aspect-ratio: 16 / 9; border-radius: 18px; border: 12px solid #000;
  background: radial-gradient(120% 120% at 20% 0%, #172A3C, var(--navy-950) 60%);
  padding: 3.6%; display: flex; flex-direction: column; gap: 3%;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.tv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: clamp(12px, 1.2vw, 17px); font-weight: 700; color: var(--text-2); }
.tv-clock { color: var(--gold); font-size: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-rooms { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.tv-room { background: var(--navy-800); border-radius: 12px; padding: 7% 8%; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; font-size: clamp(11px, 1vw, 14px); }
.tv-room-name { color: var(--gold); font-weight: 700; }
.tv-now span { display: inline-flex; align-items: center; margin: 4px 0; padding: 2px 9px; border-radius: 999px; background: var(--gold); color: var(--ink-900); font-weight: 800; font-size: 0.85em; }
.tv-title { font-size: 1.25em; font-weight: 800; color: var(--text); line-height: 1.15; }
.tv-who { color: var(--text-2); }
.tv-next { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--navy-600); color: var(--text-3); }
.tv-stand { width: 22%; height: 14px; margin: 0 auto; background: #000; border-radius: 0 0 8px 8px; }

/* ── Plans ────────────────────────────────────────────────── */
.plans { padding: clamp(80px, 10vw, 140px) 0; }
.plans h2 { font-size: clamp(34px, 4.4vw, 58px); }
.plans-wrap { margin-top: 48px; }
.plans-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plans-table th, .plans-table td { padding: 16px 14px; border-top: 1px solid var(--navy-800); font-size: 15px; text-align: center; vertical-align: middle; }
.plans-table thead th, .plans-table thead td, .plans-table tfoot td { border-top: 0; }
.plans-table thead th { vertical-align: bottom; padding-bottom: 20px; }
.plans-table tbody th { text-align: left; font-weight: 500; color: var(--text-2); width: 34%; }
.plans-table tbody td { color: var(--text); font-weight: 600; }
.plans-table tbody tr:hover th, .plans-table tbody tr:hover td { background: var(--navy-900); }
.plan-name { display: block; hyphens: none; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.plan-for { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--text-3); line-height: 1.35; }
.icon-check { width: 22px; height: 22px; margin: 0 auto; color: var(--gold); }
.plan-no { color: var(--text-3); }
.plans-table tfoot td { padding-top: 24px; }
.plan-ask {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none; font-weight: 700; font-size: 15px;
}
.plan-ask:hover { background: var(--gold); color: var(--ink-900); }

/* Phones: plan cards behind a switch (the table is desktop only). */
.plan-cards { display: none; }
.plan-tabs { display: none; }
.js .plan-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--navy-900); border: 1px solid var(--navy-800); margin-bottom: 14px; }
.plan-tab { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-size: 15px; font-weight: 700; cursor: pointer; }
.plan-tab[aria-selected="true"] { background: var(--gold); color: var(--ink-900); }
.js .plan-card[data-inactive] { display: none; }
.plan-card { border-radius: var(--r-panel); background: var(--navy-900); border: 1px solid var(--navy-800); padding: 22px 20px 20px; }
.plan-card + .plan-card { margin-top: 12px; }
.plan-card-name { font-size: 28px; letter-spacing: -0.02em; }
.plan-card-for { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.plan-limits { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plan-limit { border-radius: 12px; background: var(--navy-800); padding: 12px; display: flex; flex-direction: column-reverse; gap: 2px; }
.plan-limit span { font-size: 13px; color: var(--text-2); line-height: 1.3; }
.plan-limit b { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.15; overflow-wrap: anywhere; }
.plan-features { margin-top: 14px; }
.plan-features li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--navy-800); font-size: 15px; line-height: 1.35; }
.plan-features .icon-check { margin: 0; }
.plan-features em { font-style: normal; color: var(--gold); font-weight: 700; }
.plan-features .is-off { color: var(--text-3); }
.plan-features .is-off .plan-no { text-align: center; }
.plan-card-ask {
  margin-top: 16px; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 8px 18px; border-radius: 999px;
  background: var(--gold); color: var(--ink-900); text-decoration: none; font-weight: 800; font-size: 16px;
}

/* ── Contact / plan request form ──────────────────────────── */
.contact { padding: clamp(80px, 10vw, 140px) 0; background: var(--navy-900); border-top: 1px solid var(--navy-800); }
.contact h2 { font-size: clamp(34px, 4.4vw, 58px); }
.contact-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.contact-direct { margin-top: 36px; font-size: 15px; color: var(--text-3); }
.contact-copy .email-copy { margin-top: 6px; }
.contact-panel { position: relative; background: var(--navy-950); border: 1px solid var(--navy-800); border-radius: var(--r-panel); padding: clamp(22px, 3vw, 36px); }

.contact-form { display: grid; gap: 20px; }
.contact-form[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.field-optional { font-weight: 400; color: var(--text-3); }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--navy-850); border: 1px solid var(--navy-600); border-radius: 12px;
  color: var(--text); font: inherit; font-size: 16px; line-height: 1.4;
  caret-color: var(--gold);
  transition: border-color 0.2s, background-color 0.2s;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: var(--navy-900); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 2px; border-radius: 12px; }
.select { position: relative; }
.select select { appearance: none; padding-right: 46px; cursor: pointer; }
.select::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-70%) rotate(45deg);
}
.select option { background: var(--navy-850); color: var(--text); }
.field [aria-invalid="true"] { border-color: var(--gold-muted); border-style: dashed; }
.field-error { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--gold-muted); }
.field-error:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 4px; }
.btn-send {
  min-height: 52px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gold); color: var(--ink-900); font-size: 16px; font-weight: 800;
  transition: background-color 0.2s;
}
.btn-send:hover { background: var(--gold-light); }
.btn-send:focus-visible { outline-color: var(--gold); }
.btn-send[aria-busy="true"] { opacity: 0.65; cursor: progress; }
.contact-privacy { flex: 1 1 220px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.contact-privacy a, .contact-flash a { color: var(--gold); }
.form-status, .contact-flash {
  padding: 14px 16px; border-radius: var(--r-block);
  background: var(--gold-tint); border: 1px solid rgba(243, 204, 117, 0.35);
  font-size: 15px; color: var(--text);
}
.form-status:empty { display: none; }
.contact-flash { display: none; margin-bottom: 20px; }
.contact-flash:target { display: block; }
.contact-flash b { color: var(--gold); }

.contact-done { padding: clamp(12px, 3vw, 40px) 0; }
.contact-done[hidden] { display: none; }
.contact-done:focus { outline: none; }
.contact-done-mark { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--gold); color: var(--ink-900); }
.contact-done-title { margin-top: 22px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.contact-done-text { margin-top: 10px; color: var(--text-2); overflow-wrap: anywhere; }
.contact-again {
  margin-top: 26px; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--gold); color: var(--gold); font-size: 15px; font-weight: 700;
}
.contact-again:hover { background: var(--gold); color: var(--ink-900); }
@media (prefers-reduced-motion: no-preference) {
  .contact-done:not([hidden]) .contact-done-mark { animation: done-pop 0.6s var(--ease-out) both; }
  .contact-done:not([hidden]) .contact-done-title, .contact-done:not([hidden]) .contact-done-text { animation: done-rise 0.6s var(--ease-out) 0.12s both; }
}
@keyframes done-pop { from { transform: scale(0.6); opacity: 0; } }
@keyframes done-rise { from { transform: translateY(8px); opacity: 0; } }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { padding: clamp(80px, 10vw, 130px) 0; border-top: 1px solid var(--navy-800); }
.faq h2 { font-size: clamp(34px, 4.4vw, 58px); }
.faq-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.faq-item { border-top: 1px solid var(--navy-600); }
.faq-item:last-child { border-bottom: 1px solid var(--navy-600); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex-shrink: 0; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-3px) rotate(45deg); transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-item summary:hover { color: var(--gold); }
.faq-item p { padding: 0 0 22px; color: var(--text-2); max-width: 62ch; }
.faq-item a { color: var(--gold); }

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .views-stage { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
  .view--organizer { grid-column: 1 / -1; }
}

/* ── Phones and narrow tablets: the grid becomes a one-room agenda ── */
@media (max-width: 860px) {
  .nav-menu-toggle { display: inline-flex; }
  .nav-menu {
    display: none;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 12px var(--page-pad) 24px;
    background: var(--navy-950); border-bottom: 1px solid var(--navy-800);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7);
  }
  .nav-menu.is-open { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a { display: flex; align-items: center; min-height: 52px; font-size: 18px; color: var(--text); border-bottom: 1px solid var(--navy-800); }
  .locale-switcher { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .locale-switcher a { min-height: 44px; font-size: 15px; }

  .camp { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-top: 14px; }
  .slot--hero { order: 1; padding: 28px 24px; }
  .slot--hero h2 { font-size: clamp(34px, 9vw, 46px); }
  .camp .slot--app { order: 2; }
  .camp .slot--org { order: 3; }
  .camp-controls { order: 4; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; padding: 0; }
  .camp-days, .camp-rooms { overflow-x: auto; scrollbar-width: none; }
  .camp-rooms { display: flex; }
  .camp-rooms .chip { background: transparent; }
  .camp-rooms .chip[aria-pressed="true"] { background: var(--navy-700); border-color: var(--navy-700); color: var(--text); }
  .chip { flex-shrink: 0; min-height: 44px; }
  .copy-email { min-height: 44px; }
  .camp-demo { margin-left: 0; order: 3; }
  .camp-board { order: 5; display: flex; flex-direction: column; gap: 8px; }
  .room-head, .hour, .now-line { display: none; }
  .camp-board .slot { display: grid; grid-template-columns: 56px 1fr; column-gap: 6px; padding: 14px; }
  .camp-board .slot-time { display: block; grid-row: span 2; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .camp-board .slot--break { display: grid; }
  .camp .camp-board .slot--under { display: grid; }
  .camp[data-room="mara"] .camp-board .slot[data-room]:not([data-room="mara"]),
  .camp[data-room="tomas"] .camp-board .slot[data-room]:not([data-room="tomas"]),
  .camp[data-room="elena"] .camp-board .slot[data-room]:not([data-room="elena"]),
  .camp[data-room="reception"] .camp-board .slot[data-room]:not([data-room="reception"]) { display: none; }

  .hero-inner, .contact-inner, .field-row { grid-template-columns: minmax(0, 1fr); }
  .hero-copy h1 { font-size: clamp(38px, 10.5vw, 54px); }
  .hero-actions { margin-top: 4px; }
  .hero-stage { margin-top: 12px; }
  .contact-inner { gap: 32px; }
  .contact-direct { margin-top: 20px; }
  .btn-send { width: 100%; }

  .shots-phones { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--page-pad) * -1); margin-right: calc(var(--page-pad) * -1); padding: 0 var(--page-pad) 12px; scrollbar-width: none; }
  .shot-phone { flex: 0 0 68%; scroll-snap-align: center; }
  .shot-phone:nth-child(even) { margin-top: 0; }
  .shot-screen { border-radius: 28px; border-width: 6px; }
  .views-stage { grid-template-columns: minmax(0, 1fr); }
  .view--dancer { max-width: 320px; }
  .dancers-inner, .languages-inner { grid-template-columns: minmax(0, 1fr); }
  .dancers-copy { position: static; }
  .phases { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .phases::before { display: none; }
  .phase { padding-right: 0; }
  .phase h3 { padding-top: 0; padding-left: 30px; }
  .phase h3::before { top: 50%; transform: translateY(-50%); }
  .close-slots { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .legal-toc ol { columns: 1; }

  .pl-grid { grid-template-columns: 52px repeat(3, minmax(0, 1fr)); grid-template-rows: 56px repeat(9, 60px); }
  .pl-side { grid-template-columns: minmax(0, 1fr); }
  .pl-side .btn-plan { grid-row: auto; }
  .pl-log { columns: 1; }
  .pl-result { grid-column: auto; }
  .pl-grid > * { grid-row: var(--slot); grid-column: var(--lane); }
  .pl-hour { align-self: center; padding: 0; }
  .pl-lane { justify-content: flex-end; padding: 0 2px 6px; }
  .pl-lane b { font-size: 14px; }
  .pl-lane span { font-size: 12px; }
  .pl-block { padding: 8px; font-size: 12px; }
  .pl-block b { font-size: 13px; }
  .display-inner, .faq-inner { grid-template-columns: minmax(0, 1fr); }
  .tv-screen { aspect-ratio: auto; min-height: 240px; border-width: 8px; }
  .tv-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-room:nth-child(3) { display: none; }
  .tv-room { font-size: 12px; padding: 12px; }
  .plans-wrap { display: none; }
  .plan-cards { display: block; margin-top: 32px; }
  .plan-for { display: none; }
  .plan-name { font-size: 17px; }
  .plan-ask { padding: 6px 8px; font-size: 13px; }
  .faq-item summary { font-size: 17px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .camp.is-switching .slot[data-day] { animation: none; }
  .journey-step::before { transition: none; }
  .camp.is-entering .slot[data-day], .camp.is-entering .slot--hero, .camp.is-entering .slot--cta { animation: none; }
  .js .pl.is-booked .pl-booked { transition: none; }
  .js .pl-log li { transition: none; }
  .chip, .btn-store { transition: none; }
}