/* =====================================================================
   OM THE YOGA — "Salina at dusk"
   Hand-authored design system. No framework, no build step.
   Layers: reset → tokens → base → primitives → components → modules
   ===================================================================== */

/* ── 1. RESET ─────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }

:target { scroll-margin-top: 7rem; }

/* class-based display must never beat the hidden attribute */
[hidden] { display: none !important; }

/* ── 2. TOKENS ────────────────────────────────────────────────────── */

:root {
  /* brand plates — drenched oxblood */
  --deep:           oklch(0.210 0.048 16);
  --deep-raise:     oklch(0.262 0.052 18);
  --deep-line:      oklch(0.330 0.046 18);
  --on-deep:        oklch(0.960 0.008 78);
  --on-deep-muted:  oklch(0.760 0.020 60);

  /* content plates */
  --bg:             oklch(1.000 0.000 0);
  --bg-sink:        oklch(0.975 0.004 60);
  --line:           oklch(0.900 0.006 40);
  --line-soft:      oklch(0.940 0.005 40);
  --ink:            oklch(0.200 0.020 20);
  --ink-muted:      oklch(0.480 0.020 25);
  --ink-faint:      oklch(0.535 0.018 30);   /* 4.9:1 on white — safe for real text */

  /* Text that sits on the gold accent. Deliberately NOT --ink: plates and
     cards redefine --ink to a light value, which would put lime-white text
     on gold at 1.56:1. This constant is never redefined. */
  --on-accent:      oklch(0.200 0.020 20);

  /* app surfaces — member + admin */
  --app-bg:         oklch(0.160 0.012 15);
  --app-surface:    oklch(0.205 0.014 15);
  --app-raise:      oklch(0.248 0.014 15);
  --app-line:       oklch(0.320 0.014 15);
  --on-app:         oklch(0.960 0.008 78);
  --on-app-muted:   oklch(0.720 0.016 60);

  /* signal */
  --primary:        oklch(0.452 0.152 10);
  --primary-lift:   oklch(0.522 0.166 13);
  --primary-glow:   oklch(0.625 0.172 15);
  --accent:         oklch(0.820 0.125 85);
  --accent-ink:     oklch(0.520 0.110 70);

  /* semantic */
  --ok:             oklch(0.560 0.130 155);
  --ok-soft:        oklch(0.945 0.035 155);
  --warn:           oklch(0.740 0.140 75);
  --warn-soft:      oklch(0.960 0.045 85);
  --danger:         oklch(0.550 0.180 25);
  --danger-soft:    oklch(0.955 0.030 25);
  --info:           oklch(0.600 0.110 240);
  --info-soft:      oklch(0.955 0.028 240);

  /* type */
  --f-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --f-body:    "Instrument Sans", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display:  clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
  --t-h1:       clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  --t-h2:       clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  --t-h3:       clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --t-h4:       clamp(1.125rem, 1.02rem + 0.5vw, 1.3125rem);
  --t-lead:     clamp(1.0625rem, 0.99rem + 0.4vw, 1.3125rem);
  --t-body:     1.0625rem;
  --t-sm:       0.9375rem;
  --t-xs:       0.8125rem;
  --t-2xs:      0.6875rem;

  /* space — 8px base, uneven by design */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;  --s5: 1.25rem;
  --s6: 1.5rem;  --s8: 2rem;    --s12: 3rem;   --s16: 4rem;
  --s24: 6rem;   --s32: 8rem;   --s40: 10rem;

  /* shape */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* elevation — floating things only */
  --sh-1: 0 1px 2px oklch(0.20 0.02 20 / 0.06), 0 2px 6px oklch(0.20 0.02 20 / 0.05);
  --sh-2: 0 4px 12px oklch(0.20 0.02 20 / 0.09), 0 12px 32px oklch(0.20 0.02 20 / 0.08);
  --sh-3: 0 12px 28px oklch(0.20 0.02 20 / 0.14), 0 32px 72px oklch(0.20 0.02 20 / 0.14);
  --sh-app: 0 8px 24px oklch(0 0 0 / 0.4), 0 24px 64px oklch(0 0 0 / 0.34);

  /* motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 140ms; --d-chip: 160ms; --d-pop: 200ms; --d-sheet: 260ms;

  /* z scale — these six values only */
  --z-dropdown: 10; --z-sticky: 20; --z-backdrop: 30;
  --z-modal: 40; --z-toast: 50; --z-tooltip: 60;

  --wrap: 1200px;
  --wrap-wide: 1440px;
  --measure: 68ch;

  /* grain, used as a background layer */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ── 3. BASE ──────────────────────────────────────────────────────── */

body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
h4, h5, h6 {
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-body); }
h6 { font-size: var(--t-sm); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-deep :focus-visible, .app :focus-visible,
.plate--deep :focus-visible { outline-color: var(--accent); }

::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute; left: var(--s4); top: var(--s4);
  z-index: var(--z-tooltip);
  padding: var(--s3) var(--s4);
  background: var(--primary); color: oklch(1 0 0);
  border-radius: var(--r); font-weight: 600; font-size: var(--t-sm);
  transform: translateY(-200%);
  transition: transform var(--d-pop) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ── 4. PRIMITIVES ────────────────────────────────────────────────── */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2.5rem, var(--wrap-wide)); }
.wrap--narrow { width: min(100% - 2.5rem, 780px); }
@media (max-width: 600px) { .wrap, .wrap--wide, .wrap--narrow { width: calc(100% - 2rem); } }

.plate { padding-block: clamp(var(--s16), 10vw, var(--s32)); position: relative; }
.plate--tight { padding-block: clamp(var(--s12), 7vw, var(--s24)); }
.plate--sink { background: var(--bg-sink); }
.plate--deep {
  background: var(--deep);
  color: var(--on-deep);
  --line: var(--deep-line);
  --line-soft: color-mix(in oklch, var(--deep-line) 60%, var(--deep));
  --ink: var(--on-deep);
  --ink-muted: var(--on-deep-muted);
  --bg: var(--deep);
  --bg-sink: var(--deep-raise);
}
.plate--deep::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.055; pointer-events: none; mix-blend-mode: overlay;
}
.plate > * { position: relative; z-index: 1; }

.measure { max-width: var(--measure); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-muted); max-width: 58ch; }

.rule { height: 1px; background: var(--line); border: 0; }

/* section heading pair — the alternative to the tracked-eyebrow reflex */
.sec-head { display: grid; gap: var(--s4); margin-bottom: var(--s12); }
.sec-head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--s12); align-items: end;
}
@media (max-width: 900px) { .sec-head--split { grid-template-columns: 1fr; gap: var(--s4); } }
.sec-head p { color: var(--ink-muted); max-width: 46ch; }

/* mono micro-data */
.data {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 5. BUTTONS ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 46px; padding: 0 var(--s6);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.006em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--d-press) var(--ease-out),
              background-color var(--d-chip) ease,
              border-color var(--d-chip) ease,
              color var(--d-chip) ease,
              box-shadow var(--d-chip) ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--primary); color: oklch(1 0 0); }
.btn--accent  { background: var(--accent);  color: var(--on-accent); }
.btn--ghost   { background: transparent; color: currentColor; border-color: color-mix(in oklch, currentColor 26%, transparent); }
.btn--quiet   { background: color-mix(in oklch, currentColor 8%, transparent); color: currentColor; }
.btn--solid   { background: var(--ink); color: var(--bg); }
.btn--danger  { background: var(--danger); color: oklch(1 0 0); }

.btn--lg { min-height: 56px; padding: 0 var(--s8); font-size: var(--t-body); }
.btn--sm { min-height: 38px; padding: 0 var(--s4); font-size: var(--t-xs); }
.btn--block { width: 100%; }
.btn--icon { min-height: 44px; width: 44px; padding: 0; border-radius: var(--r-pill); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--primary-lift); }
  .btn--accent:hover  { background: color-mix(in oklch, var(--accent) 88%, var(--ink)); }
  .btn--ghost:hover   { border-color: currentColor; background: color-mix(in oklch, currentColor 7%, transparent); }
  .btn--quiet:hover   { background: color-mix(in oklch, currentColor 14%, transparent); }
  .btn--solid:hover   { background: color-mix(in oklch, var(--ink) 85%, var(--primary)); }
  .btn--danger:hover  { background: color-mix(in oklch, var(--danger) 88%, black); }
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn__label { opacity: 0.35; filter: blur(2px); }
.btn__label { transition: opacity 200ms ease, filter 200ms ease; }
.btn__spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: spin 620ms linear infinite;
  display: none;
}
.btn.is-busy .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* text link with an animated rule */
.link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 600; font-size: var(--t-sm); text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--d-pop) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { background-size: 0% 1px; background-position: 100% 100%; }
}
.link svg { width: 16px; height: 16px; transition: transform var(--d-pop) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover svg { transform: translateX(3px); } }

/* ── 6. CHIPS, BADGES, PILLS ──────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 36px; padding: 0 var(--s4);
  font-size: var(--t-xs); font-weight: 550;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg); color: var(--ink-muted);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--d-chip) ease, color var(--d-chip) ease,
              border-color var(--d-chip) ease, transform var(--d-press) var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: color-mix(in oklch, var(--ink) 40%, transparent); color: var(--ink); }
  .chip[aria-pressed="true"]:hover { background: color-mix(in oklch, var(--ink) 86%, var(--primary)); }
}
.chip svg { width: 15px; height: 15px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--s2); border-radius: var(--r-sm);
  font-size: var(--t-2xs); font-weight: 650;
  letter-spacing: 0.01em; text-transform: none;
  background: var(--bg-sink); color: var(--ink-muted);
  border: 1px solid var(--line);
}
.badge--gold   { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.badge--primary{ background: var(--primary); color: oklch(1 0 0); border-color: transparent; }
.badge--ok     { background: var(--ok-soft); color: color-mix(in oklch, var(--ok) 75%, black); border-color: transparent; }
.badge--warn   { background: var(--warn-soft); color: oklch(0.45 0.11 65); border-color: transparent; }
.badge--danger { background: var(--danger-soft); color: color-mix(in oklch, var(--danger) 80%, black); border-color: transparent; }
.badge--info   { background: var(--info-soft); color: color-mix(in oklch, var(--info) 78%, black); border-color: transparent; }
.badge--live   { background: var(--primary); color: oklch(1 0 0); border-color: transparent; }
.badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: pulse 1.8s var(--ease-in-out) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.app .badge { background: var(--app-raise); color: var(--on-app-muted); border-color: var(--app-line); }
.app .badge--gold { background: var(--accent); color: oklch(0.2 0.02 20); border-color: transparent; }
.app .badge--primary { background: var(--primary-glow); color: oklch(0.15 0.01 15); border-color: transparent; }
.app .badge--ok { background: color-mix(in oklch, var(--ok) 22%, var(--app-surface)); color: oklch(0.84 0.11 155); border-color: transparent; }
.app .badge--warn { background: color-mix(in oklch, var(--warn) 22%, var(--app-surface)); color: oklch(0.88 0.10 82); border-color: transparent; }
.app .badge--danger { background: color-mix(in oklch, var(--danger) 25%, var(--app-surface)); color: oklch(0.82 0.12 25); border-color: transparent; }
.app .badge--info { background: color-mix(in oklch, var(--info) 25%, var(--app-surface)); color: oklch(0.84 0.09 240); border-color: transparent; }

/* ── 7. FORMS ─────────────────────────────────────────────────────── */

.field { display: grid; gap: var(--s2); }
.field > label, .lbl {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink);
  letter-spacing: -0.004em;
}
.field .hint { font-size: var(--t-xs); color: var(--ink-muted); }
.field .err { font-size: var(--t-xs); color: var(--danger); font-weight: 550; display: none; }
.field.is-invalid .err { display: block; }
.field.is-invalid .input { border-color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
  color: var(--ink);
  /* background-color, never the shorthand: the shorthand would reset the
     select's arrow background-repeat/position/size set further down */
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--d-chip) ease, box-shadow var(--d-chip) ease;
}
.textarea { min-height: 112px; padding-block: var(--s3); resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6265' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s3) center; background-size: 18px;
  padding-right: 2.75rem;
}
.select[style*="width:auto"], .select.select--auto {
  min-width: 11rem; width: auto; flex: 0 0 auto;
}

.app .input, .app .select, .app .textarea {
  background-color: var(--app-bg); border-color: var(--app-line); color: var(--on-app);
}
.app .input::placeholder, .app .textarea::placeholder { color: var(--on-app-muted); }
.app .field > label, .app .lbl { color: var(--on-app); }
.app .field .hint { color: var(--on-app-muted); }
.app .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADA39B' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.check {
  display: flex; gap: var(--s3); align-items: flex-start;
  font-size: var(--t-sm); cursor: pointer; padding: var(--s1) 0;
}
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; cursor: pointer; }

/* radio card — used for plans and payment methods */
.radio-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  cursor: pointer; background: var(--bg);
  transition: border-color var(--d-chip) ease, background-color var(--d-chip) ease,
              transform var(--d-press) var(--ease-out);
}
.radio-card:active { transform: scale(0.995); }
.radio-card input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
.radio-card:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 4%, var(--bg));
}
.radio-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.app .radio-card { background: var(--app-surface); border-color: var(--app-line); }
.app .radio-card:has(input:checked) { border-color: var(--primary-glow); background: color-mix(in oklch, var(--primary) 14%, var(--app-surface)); }
.radio-card__t { display: block; font-weight: 650; font-size: var(--t-sm); }
.radio-card__s { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink-muted); }
.app .radio-card__s { color: var(--on-app-muted); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: var(--t-sm); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 44px; height: 26px; border-radius: var(--r-pill); flex: none;
  background: color-mix(in oklch, currentColor 20%, transparent);
  border: 1px solid var(--line);
  position: relative;
  transition: background-color var(--d-pop) var(--ease-out), border-color var(--d-pop) ease;
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg);
  box-shadow: var(--sh-1);
  transition: transform var(--d-pop) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--primary); outline-offset: 3px; }

/* segmented control */
.seg {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--bg-sink); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.app .seg { background: var(--app-bg); border-color: var(--app-line); }
.seg button {
  min-height: 34px; padding: 0 var(--s4);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-muted);
  border-radius: var(--r-pill);
  transition: background-color var(--d-chip) ease, color var(--d-chip) ease,
              transform var(--d-press) var(--ease-out);
}
.seg button:active { transform: scale(0.97); }
.seg button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--sh-1); }
.app .seg button { color: var(--on-app-muted); }
.app .seg button[aria-selected="true"] { background: var(--app-raise); color: var(--on-app); box-shadow: none; }

/* ── 8. CARDS & SURFACES ──────────────────────────────────────────── */

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.card--pad-lg { padding: var(--s8); }
.app .card { background: var(--app-surface); border-color: var(--app-line); }
.plate--deep .card { background: var(--deep-raise); border-color: var(--deep-line); }

.panel {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.app .panel { background: var(--app-surface); border-color: var(--app-line); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--line);
}
.app .panel__head { border-color: var(--app-line); }
.panel__head h3, .panel__head h4 { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 650; letter-spacing: -0.006em; }
.panel__body { padding: var(--s6); }
.panel__body--flush { padding: 0; }

/* ── 9. NAVIGATION ────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 250ms ease, border-color 250ms ease;
}
/* the deep variant floats over the hero instead of sitting above it */
.nav--deep {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--on-deep);
}
.nav--deep.nav--past {
  background: color-mix(in oklch, var(--deep) 88%, transparent);
  border-bottom-color: color-mix(in oklch, var(--deep-line) 70%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.nav__in {
  display: flex; align-items: center; gap: var(--s8);
  min-height: 74px;
}
.nav__brand {
  display: inline-flex; align-items: baseline; gap: 0.42em;
  font-family: var(--f-display); font-size: 1.375rem; font-weight: 500;
  letter-spacing: -0.03em; text-decoration: none; flex: none;
}
.nav__brand span { font-family: var(--f-body); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.62; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-inline-end: auto; }
.nav__links a {
  padding: var(--s2) var(--s3);
  font-size: var(--t-sm); font-weight: 550; text-decoration: none;
  border-radius: var(--r-sm); color: inherit; opacity: 0.78;
  white-space: nowrap;
  transition: opacity var(--d-chip) ease, background-color var(--d-chip) ease;
}
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { opacity: 1; background: color-mix(in oklch, currentColor 7%, transparent); } }
.nav__links a[aria-current="page"] { opacity: 1; font-weight: 650; }
.nav__act { display: flex; align-items: center; gap: var(--s3); flex: none; }
.nav__burger { display: none; }

@media (max-width: 1180px) {
  /* :not(.nav__burger) — the burger is itself a ghost button, and without
     this exclusion the mobile menu would have no way to open */
  .nav__links, .nav__act .btn--ghost:not(.nav__burger) { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__in { gap: var(--s4); justify-content: space-between; }
}
/* Below this the wordmark, the call to action and the burger stop fitting
   side by side. Left alone the row pushes the document wider than the
   viewport, which is what was causing horizontal scroll on every page
   whose nav is in normal flow. */
@media (max-width: 600px) {
  .nav__brand { font-size: 1.125rem; min-width: 0; }
  .nav__brand span { display: none; }
  .nav__in { min-height: 64px; }
  .nav__act { gap: var(--s2); }
  .navdraw__top .nav__brand span { display: inline; }
}
@media (max-width: 390px) {
  .nav__act .btn--primary, .nav__act .btn--accent { display: none; }
}

.navdraw {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; grid-template-rows: auto 1fr;
  background: var(--deep); color: var(--on-deep);
  transform: translateY(-100%);
  transition: transform var(--d-sheet) var(--ease-drawer);
  overflow-y: auto;
}
.navdraw[data-open="true"] { transform: translateY(0); }
.navdraw__top { display: flex; align-items: center; justify-content: space-between; min-height: 74px; }
.navdraw__links { display: grid; gap: var(--s1); padding-block: var(--s8) var(--s16); align-content: start; }
.navdraw__links a {
  font-family: var(--f-display); font-size: clamp(1.75rem, 8vw, 2.5rem);
  letter-spacing: -0.03em; text-decoration: none; padding-block: var(--s2);
  border-bottom: 1px solid color-mix(in oklch, var(--deep-line) 70%, transparent);
}
.navdraw__cta { display: grid; gap: var(--s3); padding-top: var(--s8); }

/* member/admin top bar */
.appbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--app-bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--app-line);
}
.appbar__in { display: flex; align-items: center; gap: var(--s6); min-height: 66px; }
.appbar__links { display: flex; gap: var(--s1); margin-inline-end: auto; overflow-x: auto; scrollbar-width: none; }
.appbar__links::-webkit-scrollbar { display: none; }
.appbar__links a {
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 550; text-decoration: none;
  color: var(--on-app-muted); white-space: nowrap;
  transition: color var(--d-chip) ease, background-color var(--d-chip) ease;
}
@media (hover: hover) and (pointer: fine) { .appbar__links a:hover { color: var(--on-app); background: var(--app-surface); } }
.appbar__links a[aria-current="page"] { color: var(--on-app); background: var(--app-raise); }

/* Below this the wordmark, five section links and the avatar cannot share
   one row — the links were being clipped mid-word. They drop to a second
   row and scroll, with a fade to show there is more to the right. */
@media (max-width: 760px) {
  .appbar__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s2) var(--s4);
    min-height: 0;
    padding-block: var(--s3);
  }
  .appbar__in > .nav__brand { grid-column: 1; font-size: 1rem; }
  .appbar__in > .nav__act { grid-column: 2; }
  .appbar__links {
    grid-column: 1 / -1; order: 3;
    margin-inline-end: 0;
    gap: var(--s1);
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .appbar__links a { padding: var(--s2) var(--s3); font-size: var(--t-xs); }
  .nav__brand span { display: none; }
}

/* ── 10. FOOTER ───────────────────────────────────────────────────── */

.foot { background: var(--deep); color: var(--on-deep); padding-block: var(--s16) var(--s8); position: relative; }
.foot::after {
  content: ""; position: absolute; inset: 0; background-image: var(--grain);
  opacity: 0.05; pointer-events: none; mix-blend-mode: overlay;
}
.foot > * { position: relative; z-index: 1; }
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s12) var(--s8);
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; gap: var(--s8); } }
.foot h4 { font-size: var(--t-xs); font-weight: 650; color: var(--on-deep-muted); margin-bottom: var(--s4); }
.foot ul { display: grid; gap: var(--s2); }
.foot ul a { font-size: var(--t-sm); text-decoration: none; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .foot ul a:hover { opacity: 1; text-decoration: underline; } }
.foot__base {
  margin-top: var(--s16); padding-top: var(--s6);
  border-top: 1px solid var(--deep-line);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font-size: var(--t-xs); color: var(--on-deep-muted);
}

/* ── 11. TABLES ───────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
.table th, .table td { padding: var(--s3) var(--s4); text-align: left; vertical-align: middle; }
.table thead th {
  font-size: var(--t-xs); font-weight: 650; color: var(--ink-muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.table tbody tr { border-bottom: 1px solid var(--line-soft); }
.table tbody tr:last-child { border-bottom: 0; }
.table td.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.app .table thead th { color: var(--on-app-muted); border-color: var(--app-line); background: var(--app-surface); }
.app .table tbody tr { border-color: color-mix(in oklch, var(--app-line) 60%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .table tbody tr:hover { background: var(--bg-sink); }
  .app .table tbody tr:hover { background: var(--app-raise); }
}

/* ── 12. DRAWER / MODAL / TOAST ───────────────────────────────────── */

.backdrop {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: oklch(0.15 0.02 18 / 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-sheet) var(--ease-out);
}
.backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  width: min(100%, 480px);
  background: var(--bg); color: var(--ink);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh-3);
  display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%);
  transition: transform var(--d-sheet) var(--ease-drawer);
}
.drawer[data-open="true"] { transform: translateX(0); }
.app .drawer { background: var(--app-surface); color: var(--on-app); border-color: var(--app-line); box-shadow: var(--sh-app); }
.drawer__head, .drawer__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5, var(--s4)) var(--s6); border-bottom: 1px solid var(--line);
}
.drawer__foot { border-bottom: 0; border-top: 1px solid var(--line); }
.app .drawer__head, .app .drawer__foot { border-color: var(--app-line); }
.drawer__body { padding: var(--s6); overflow-y: auto; display: grid; gap: var(--s6); align-content: start; }

@media (max-width: 560px) {
  .drawer { top: auto; left: 0; width: 100%; max-height: 90vh; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); }
  .drawer[data-open="true"] { transform: translateY(0); }
}

.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s4);
  pointer-events: none;
}
.modal[data-open="true"] { pointer-events: auto; }
.modal__box {
  width: min(100%, 520px); max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  padding: var(--s8);
  transform-origin: center;
  transform: scale(0.95); opacity: 0;
  transition: transform var(--d-sheet) var(--ease-out), opacity var(--d-sheet) var(--ease-out);
}
.modal[data-open="true"] .modal__box { transform: scale(1); opacity: 1; }
.app .modal__box { background: var(--app-surface); color: var(--on-app); box-shadow: var(--sh-app); }

.toasts {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: var(--z-toast);
  display: grid; gap: var(--s2); width: min(100% - 2rem, 380px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-lg);
  background: var(--deep); color: var(--on-deep);
  box-shadow: var(--sh-3); font-size: var(--t-sm);
  pointer-events: auto;
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
}
@starting-style { .toast { opacity: 0; transform: translateY(100%); } }
.toast[data-leaving="true"] { opacity: 0; transform: translateY(20%); }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.toast strong { display: block; font-weight: 650; }
.toast span { color: var(--on-deep-muted); font-size: var(--t-xs); }

/* ── 13. VIDEO CARDS & THE GATE ───────────────────────────────────── */

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px);
  gap: var(--s4); overflow-x: auto; padding-bottom: var(--s4);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.grid-videos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s6) var(--s4);
}

.vcard {
  display: grid; gap: var(--s3); text-decoration: none; color: inherit;
  text-align: left; align-content: start; font: inherit; width: 100%;
}
.vcard__shot {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-lg); background: var(--app-raise);
  isolation: isolate;
}
.vcard__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms var(--ease-out), filter 300ms ease;
}
.vcard__shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, oklch(0.16 0.03 16 / 0.72) 0%, oklch(0.16 0.03 16 / 0) 52%);
}
@media (hover: hover) and (pointer: fine) {
  .vcard:hover .vcard__shot img { transform: scale(1.045); }
}
.vcard__dur {
  position: absolute; right: var(--s2); bottom: var(--s2); z-index: 2;
  padding: 3px 7px; border-radius: var(--r-sm);
  background: oklch(0.14 0.01 15 / 0.82); color: oklch(0.97 0 0);
  font-family: var(--f-mono); font-size: var(--t-2xs); font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vcard__tag { position: absolute; left: var(--s2); top: var(--s2); z-index: 2; }
.vcard__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  opacity: 0; transition: opacity var(--d-pop) var(--ease-out);
}
.vcard__play span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.97 0 0 / 0.94); color: var(--deep);
  transform: scale(0.9); transition: transform var(--d-pop) var(--ease-out);
}
.vcard__play svg { width: 20px; height: 20px; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .vcard:hover .vcard__play { opacity: 1; }
  .vcard:hover .vcard__play span { transform: scale(1); }
}
.vcard__t {
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 650;
  line-height: 1.35; letter-spacing: -0.008em;
}
.vcard__m {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  font-size: var(--t-xs);
  /* --ink-muted, not --on-app-muted: these cards also sit on light
     marketing plates, where the dark-surface value is unreadable */
  color: var(--ink-muted);
}
.vcard__m .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* progress bar on a watched card */
.vcard__prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: oklch(1 0 0 / 0.25); }
.vcard__prog i { display: block; height: 100%; background: var(--primary-glow); }

/* the locked state — no src, no id, nothing to inspect */
.vcard--locked .vcard__shot img { filter: blur(11px) saturate(0.62) brightness(0.86); transform: scale(1.14); }
.vcard--locked .vcard__shot::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(140deg,
    oklch(0.21 0.048 16 / 0.58),
    oklch(0.35 0.10 14 / 0.46));
}
.vcard--locked .vcard__lock {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: var(--s2);
  text-align: center; padding: var(--s4); color: oklch(0.97 0 0);
}
.vcard--locked .vcard__lock svg { width: 22px; height: 22px; opacity: 0.9; }
.vcard--locked .vcard__lock b { font-size: var(--t-xs); font-weight: 650; }
.vcard--locked .vcard__lock span { font-size: var(--t-2xs); opacity: 0.78; }
.vcard--locked .vcard__t { opacity: 0.72; }

/* ── 14. PLAYER ───────────────────────────────────────────────────── */

.player {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r-lg); overflow: hidden; background: oklch(0.1 0.008 15);
  box-shadow: var(--sh-app);
}
.player iframe { width: 100%; height: 100%; border: 0; }
.player__gate {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--s4); text-align: center; padding: var(--s8);
  background:
    radial-gradient(120% 90% at 30% 10%, color-mix(in oklch, var(--primary) 30%, transparent), transparent 62%),
    var(--deep);
}
.player__gate > svg { width: 30px; height: 30px; color: var(--accent); }
.player__gate h3 { font-size: var(--t-h3); }
.player__gate p { color: var(--on-deep-muted); max-width: 42ch; font-size: var(--t-sm); }

/* chapter list */
.chapters { display: grid; gap: 2px; }
.chapters button {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s3); align-items: baseline;
  padding: var(--s3); border-radius: var(--r); text-align: left;
  font-size: var(--t-sm);
  transition: background-color var(--d-chip) ease, transform var(--d-press) var(--ease-out);
}
.chapters button:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .chapters button:hover { background: var(--app-raise); } }
.chapters button[aria-current="true"] { background: var(--app-raise); }
.chapters .data { color: var(--accent); }

/* ── 15. SCHEDULE ─────────────────────────────────────────────────── */

/* A timetable is a ruled list, not a stack of cards. Rules read as one
   continuous table the eye can scan; boxed cards on a pale ground blur
   into each other, which is exactly what they were doing. */
.slots { display: grid; gap: 0; }
.slot {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: var(--s5); align-items: center;
  padding: var(--s5) var(--s3);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  transition: background-color var(--d-chip) ease;
}
.slots > .slot:first-child,
.day__rows > .slot:first-child { border-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .slot:hover { background: var(--bg-sink); }
  .app .slot:hover { background: var(--app-raise); }
}
.slot--full { background: transparent; opacity: 0.72; }
.app .slot { background: transparent; }
@media (max-width: 700px) {
  .slot { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s5) var(--s2); }
  .slot__act { justify-self: stretch; }
  .slot__act .btn { width: 100%; }
}
.slot__time { display: grid; gap: 2px; }
.slot__time b { font-family: var(--f-mono); font-size: var(--t-body); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.slot__time span { font-size: var(--t-2xs); color: var(--ink-muted); white-space: nowrap; }
.slot__main { display: grid; gap: var(--s2); min-width: 0; }
.slot__main h4 { font-size: var(--t-body); }
.slot__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); font-size: var(--t-xs); color: var(--ink-muted); align-items: center; }
.slot--full { background: var(--bg-sink); }
.app .slot { background: var(--app-surface); border-color: var(--app-line); }
.app .slot__meta, .app .slot__time span { color: var(--on-app-muted); }

/* FILTER BAR — a real two-column grid, not a row of guessed widths.
   Labels sit on one true column; each criterion gets its own hairline row. */
.filters {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
}
.app .filters { background: var(--app-surface); border-color: var(--app-line); }
.filters__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  align-items: start;
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--line-soft);
}
.app .filters__row { border-bottom-color: color-mix(in oklch, var(--app-line) 55%, transparent); }
.filters__row:last-child { border-bottom: 0; }
.filters__k {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-muted);
  /* nudged to sit on the optical centre of the first chip row */
  padding-top: 9px;
}
.filters__v { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filters__foot {
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
  padding: var(--s4) var(--s6);
  background: var(--bg-sink);
}
.app .filters__foot { background: var(--app-bg); }
.filters__foot .push { margin-inline-start: auto; }
@media (max-width: 640px) {
  .filters__row { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s4); }
  .filters__k { padding-top: 0; }
  .filters__foot { padding: var(--s4); }
}

/* DAY GROUPS — the previous version read as one merged block of white cards.
   A sticky, ruled day header and real vertical air separate them. */
.day { margin-bottom: var(--s12); }
.day:last-child { margin-bottom: 0; }
.day__head {
  position: sticky; top: 74px; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s3);
  margin-bottom: var(--s2);
  background: var(--bg);
  border-bottom: 1.5px solid var(--ink);
}
.app .day__head { background: var(--app-bg); border-bottom-color: var(--on-app); }
.day__head h3 {
  font-family: var(--f-display); font-size: var(--t-h3);
  font-weight: 500; letter-spacing: -0.028em; line-height: 1;
}
.day__head span { font-size: var(--t-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.day__rows { display: grid; gap: 0; }

/* capacity meter */
.cap { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-2xs); color: var(--ink-muted); }
.cap__bar { width: 56px; height: 5px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; flex: none; }
.cap__bar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width 400ms var(--ease-out); }
.cap[data-level="tight"] .cap__bar i { background: var(--warn); }
.cap[data-level="full"]  .cap__bar i { background: var(--danger); }
.app .cap { color: var(--on-app-muted); }
.app .cap__bar { background: var(--app-line); }

/* ── 16. PRICING ──────────────────────────────────────────────────── */

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--s4); align-items: stretch; }
.price {
  display: grid; gap: var(--s4); align-content: start;
  padding: var(--s8) var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg);
  position: relative;
}
.price--hero {
  background: var(--deep); color: var(--on-deep); border-color: var(--deep);
  --ink: var(--on-deep); --ink-muted: var(--on-deep-muted); --line: var(--deep-line);
}
.price__amt { display: flex; align-items: baseline; gap: var(--s2); }
.price__amt b { font-family: var(--f-display); font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.price__amt span { font-size: var(--t-xs); color: var(--ink-muted); }
.price ul { display: grid; gap: var(--s3); font-size: var(--t-sm); }
.price ul li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s3); align-items: start; }
.price ul svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent-ink); }
.price--hero ul svg { color: var(--accent); }
.price ul li.is-off { color: var(--ink-muted); }
.price ul li.is-off svg { color: var(--ink-faint); }
.price__flag { position: absolute; top: -11px; left: var(--s6); }
/* the call to action always sits on the same line across every card */
.price > .btn:last-child { margin-top: auto; }

/* ── 17. STATS (admin) ────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); }
.stat {
  padding: var(--s5, var(--s4)) var(--s6) var(--s6);
  border: 1px solid var(--app-line); border-radius: var(--r-lg); background: var(--app-surface);
  display: grid; gap: var(--s2);
}
.stat__k { font-size: var(--t-xs); color: var(--on-app-muted); font-weight: 550; }
.stat__v { font-family: var(--f-display); font-size: 2rem; font-weight: 500;
           letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__d { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-2xs); font-weight: 600; }
.stat__d--up { color: oklch(0.78 0.13 155); }
.stat__d--dn { color: oklch(0.76 0.14 25); }

/* occupancy heatmap */
.heat { display: grid; gap: 3px; grid-template-columns: 3rem repeat(7, minmax(0, 1fr)); font-size: var(--t-2xs); }
.heat__lbl { color: var(--on-app-muted); display: grid; place-items: center; height: 26px; }
.heat__cell {
  height: 26px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--app-raise); color: var(--on-app-muted);
  font-family: var(--f-mono); font-size: 10px;
  transition: transform var(--d-press) var(--ease-out);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) { .heat__cell:hover { transform: scale(1.09); } }
.heat__cell[data-v="0"] { background: var(--app-raise); }
.heat__cell[data-v="1"] { background: color-mix(in oklch, var(--primary) 24%, var(--app-raise)); color: var(--on-app); }
.heat__cell[data-v="2"] { background: color-mix(in oklch, var(--primary) 46%, var(--app-raise)); color: oklch(0.98 0 0); }
.heat__cell[data-v="3"] { background: color-mix(in oklch, var(--primary) 70%, var(--app-raise)); color: oklch(0.98 0 0); }
.heat__cell[data-v="4"] { background: var(--accent); color: oklch(0.2 0.02 20); }

/* ── 18. MISC COMPONENTS ──────────────────────────────────────────── */

.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--primary); color: oklch(1 0 0);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: -0.01em;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--t-body); }
.avatar--sm { width: 30px; height: 30px; font-size: var(--t-2xs); }

.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5, var(--s4)) 0; cursor: pointer; list-style: none;
  font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.012em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--d-pop) var(--ease-out);
}
.acc[open] summary::after { transform: rotate(135deg); }
.acc__body { padding-bottom: var(--s6); color: var(--ink-muted); max-width: 62ch; }

.quote {
  display: grid; gap: var(--s4);
  font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.28;
  letter-spacing: -0.022em; text-wrap: balance;
}
.quote footer { font-family: var(--f-body); font-size: var(--t-xs); letter-spacing: 0; color: var(--ink-muted); display: flex; align-items: center; gap: var(--s3); }

.note {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s3);
  padding: var(--s4) var(--s5, var(--s4));
  border-radius: var(--r); font-size: var(--t-sm);
  background: var(--bg-sink); border: 1px solid var(--line);
}
.note svg { width: 20px; height: 20px; margin-top: 1px; }
.note--info { background: var(--info-soft); border-color: transparent; color: color-mix(in oklch, var(--info) 72%, black); }
.note--warn { background: var(--warn-soft); border-color: transparent; color: oklch(0.42 0.10 65); }
.note--ok   { background: var(--ok-soft); border-color: transparent; color: color-mix(in oklch, var(--ok) 72%, black); }
.app .note { background: var(--app-raise); border-color: var(--app-line); color: var(--on-app-muted); }
.app .note--info { background: color-mix(in oklch, var(--info) 16%, var(--app-surface)); color: oklch(0.86 0.07 240); }
.app .note--warn { background: color-mix(in oklch, var(--warn) 16%, var(--app-surface)); color: oklch(0.88 0.09 82); }
.app .note--ok { background: color-mix(in oklch, var(--ok) 16%, var(--app-surface)); color: oklch(0.86 0.09 155); }

.empty { display: grid; gap: var(--s3); justify-items: center; text-align: center; padding: var(--s16) var(--s4); color: var(--ink-muted); }
.empty svg { width: 34px; height: 34px; opacity: 0.4; }
.app .empty { color: var(--on-app-muted); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--t-xs); color: var(--ink-muted); }
.crumbs a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration: underline; } }
.crumbs svg { width: 13px; height: 13px; opacity: 0.5; }

/* WhatsApp float */
.wafloat {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: var(--z-dropdown);
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 50px; padding: 0 var(--s5, var(--s4));
  border-radius: var(--r-pill); background: oklch(0.515 0.135 148); color: oklch(1 0 0);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  box-shadow: var(--sh-2);
  transition: transform var(--d-press) var(--ease-out);
}
.wafloat:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .wafloat:hover { transform: translateY(-2px); } }
.wafloat svg { width: 20px; height: 20px; }
@media (max-width: 700px) { .wafloat span { display: none; } .wafloat { padding: 0; width: 50px; justify-content: center; } }

/* demo controls — the presentation affordance */
.demobar {
  position: fixed; left: var(--s4); bottom: var(--s4); z-index: var(--z-dropdown);
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2); border-radius: var(--r-pill);
  background: oklch(0.16 0.012 15 / 0.94); color: oklch(0.96 0.008 78);
  border: 1px solid oklch(0.35 0.02 15); box-shadow: var(--sh-3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: var(--t-2xs);
  transition: transform var(--d-sheet) var(--ease-out), opacity var(--d-sheet) ease;
}
.demobar[hidden] { display: none; }
.demobar__k { padding-inline: var(--s3) var(--s1); font-weight: 650; opacity: 0.6; letter-spacing: 0.04em; }
.demobar button {
  min-height: 30px; padding: 0 var(--s3); border-radius: var(--r-pill);
  font-size: var(--t-2xs); font-weight: 600; color: inherit; opacity: 0.62;
  transition: background-color var(--d-chip) ease, opacity var(--d-chip) ease, transform var(--d-press) var(--ease-out);
}
.demobar button:active { transform: scale(0.95); }
.demobar button[aria-pressed="true"] { background: var(--primary-glow); color: oklch(0.14 0.01 15); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .demobar button:hover { opacity: 1; } }
@media (max-width: 700px) { .demobar { left: var(--s2); bottom: var(--s2); } .demobar__k { display: none; } }

/* ── 18a. EDITORIAL LAYER ─────────────────────────────────────────
   The problem this solves: a single repeated scaffold (heading left,
   paragraph right, then a 50/50 image-and-text split, alternating) makes
   every section of every page read identically. That uniformity is what
   reads as machine-made. What follows is a real 12-column grid plus the
   devices print designers actually use — asymmetric spans, figures with
   captions, marginalia, drop caps, full-bleed bands — so sections can
   differ from one another while still belonging to one system.
   ──────────────────────────────────────────────────────────────── */

.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s5);
  row-gap: var(--s8);
}
/* Full span set, generated: any start/end pair on the 12-column grid.
   Hand-picking these is how you end up with a column that silently
   collapses to one track because the class was never written. */
.c1-2{grid-column:1/2}.c1-3{grid-column:1/3}.c1-4{grid-column:1/4}.c1-5{grid-column:1/5}.c1-6{grid-column:1/6}.c1-7{grid-column:1/7}.c1-8{grid-column:1/8}.c1-9{grid-column:1/9}.c1-10{grid-column:1/10}.c1-11{grid-column:1/11}.c1-12{grid-column:1/12}.c1-13{grid-column:1/13}
.c2-3{grid-column:2/3}.c2-4{grid-column:2/4}.c2-5{grid-column:2/5}.c2-6{grid-column:2/6}.c2-7{grid-column:2/7}.c2-8{grid-column:2/8}.c2-9{grid-column:2/9}.c2-10{grid-column:2/10}.c2-11{grid-column:2/11}.c2-12{grid-column:2/12}.c2-13{grid-column:2/13}
.c3-4{grid-column:3/4}.c3-5{grid-column:3/5}.c3-6{grid-column:3/6}.c3-7{grid-column:3/7}.c3-8{grid-column:3/8}.c3-9{grid-column:3/9}.c3-10{grid-column:3/10}.c3-11{grid-column:3/11}.c3-12{grid-column:3/12}.c3-13{grid-column:3/13}
.c4-5{grid-column:4/5}.c4-6{grid-column:4/6}.c4-7{grid-column:4/7}.c4-8{grid-column:4/8}.c4-9{grid-column:4/9}.c4-10{grid-column:4/10}.c4-11{grid-column:4/11}.c4-12{grid-column:4/12}.c4-13{grid-column:4/13}
.c5-6{grid-column:5/6}.c5-7{grid-column:5/7}.c5-8{grid-column:5/8}.c5-9{grid-column:5/9}.c5-10{grid-column:5/10}.c5-11{grid-column:5/11}.c5-12{grid-column:5/12}.c5-13{grid-column:5/13}
.c6-7{grid-column:6/7}.c6-8{grid-column:6/8}.c6-9{grid-column:6/9}.c6-10{grid-column:6/10}.c6-11{grid-column:6/11}.c6-12{grid-column:6/12}.c6-13{grid-column:6/13}
.c7-8{grid-column:7/8}.c7-9{grid-column:7/9}.c7-10{grid-column:7/10}.c7-11{grid-column:7/11}.c7-12{grid-column:7/12}.c7-13{grid-column:7/13}
.c8-9{grid-column:8/9}.c8-10{grid-column:8/10}.c8-11{grid-column:8/11}.c8-12{grid-column:8/12}.c8-13{grid-column:8/13}
.c9-10{grid-column:9/10}.c9-11{grid-column:9/11}.c9-12{grid-column:9/12}.c9-13{grid-column:9/13}
.c10-11{grid-column:10/11}.c10-12{grid-column:10/12}.c10-13{grid-column:10/13}
.c11-12{grid-column:11/12}.c11-13{grid-column:11/13}
.c12-13{grid-column:12/13}
/* vertical offsets — content that starts lower than its neighbour */
.drop-1 { margin-top: clamp(var(--s8), 5vw, var(--s16)); }
.drop-2 { margin-top: clamp(var(--s12), 9vw, var(--s24)); }
.rise-1 { margin-top: calc(-1 * clamp(var(--s6), 4vw, var(--s12))); }
@media (max-width: 900px) {
  .g12 { grid-template-columns: 1fr; row-gap: var(--s8); }
  .g12 > * { grid-column: 1 / -1 !important; }
  .drop-1, .drop-2 { margin-top: 0; }
  .rise-1 { margin-top: 0; }
}

/* FIGURE — photography is square-cornered like print; only interactive
   things are rounded. The caption carries a number, which is what makes
   an image read as a considered plate rather than a stock decoration. */
.fig { display: grid; gap: var(--s3); margin: 0; }
.fig img {
  width: 100%; display: block;
  border-radius: 0;
  background: var(--deep-raise);
}
.fig figcaption {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  font-size: var(--t-2xs); line-height: 1.5; color: var(--ink-muted);
  padding-top: var(--s1);
  border-top: 1px solid var(--line);
}
.fig__n {
  font-family: var(--f-mono); letter-spacing: 0.02em;
  color: var(--accent-ink); white-space: nowrap;
}
.plate--deep .fig__n, .app .fig__n { color: var(--accent); }
.fig--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.fig--wide img { aspect-ratio: 16 / 10; object-fit: cover; }
.fig--sq img   { aspect-ratio: 1; object-fit: cover; }

/* MARGINALIA — a note set beside the text, the way an editor annotates.
   Hangs in the margin on wide screens, folds under on narrow ones. */
.marg {
  font-size: var(--t-xs); line-height: 1.55; color: var(--ink-muted);
  border-top: 1px solid var(--line); padding-top: var(--s3);
  max-width: 26ch;
}
.marg b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }

/* DROP CAP — one per page at most, on the paragraph that opens a story */
.dropcap::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 3.6em;
  line-height: 0.78;
  padding-right: 0.07em;
  margin-top: 0.06em;
  font-weight: 500;
  color: var(--primary);
}
.plate--deep .dropcap::first-letter { color: var(--accent); }

/* DISPLAY STATEMENT — a section that is only type, set large, used where
   the page needs to breathe rather than inform */
.statement {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.1rem + 3.1vw, 3.75rem);
  line-height: 1.1; letter-spacing: -0.032em;
  text-wrap: balance; font-weight: 400;
}
.statement em { font-style: italic; color: var(--accent-ink); }
.plate--deep .statement em { color: var(--accent); }

/* FULL-BLEED band — breaks the container, which nothing else does */
.bleed {
  width: 100vw; margin-inline: calc(50% - 50vw);
  position: relative;
}
.bleed-r { margin-inline-end: calc(50% - 50vw); }

/* RULED INDEX — a list set like a contents page. Replaces card grids in
   the places where the content is genuinely a list of things. */
.index { display: grid; }
.index__item {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--s4) var(--s5); align-items: baseline;
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background-color var(--d-chip) ease;
}
.index__item:last-child { border-bottom: 1px solid var(--line); }
.index__n { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--ink-faint); }
.index__t {
  display: block;
  font-family: var(--f-display); font-size: clamp(1.25rem, 0.95rem + 1.3vw, 2rem);
  font-weight: 500; letter-spacing: -0.024em; line-height: 1.1;
  transition: color var(--d-chip) ease;
}
.index__d {
  display: block;
  font-size: var(--t-sm); color: var(--ink-muted);
  margin-top: var(--s2); max-width: 46ch;
}
.index__go {
  width: 22px; height: 22px; color: var(--ink-faint); flex: none;
  transition: transform var(--d-pop) var(--ease-out), color var(--d-chip) ease;
  align-self: center;
}
@media (hover: hover) and (pointer: fine) {
  .index__item:hover .index__t { color: var(--primary); }
  .plate--deep .index__item:hover .index__t { color: var(--accent); }
  .index__item:hover .index__go { transform: translateX(5px); color: var(--primary); }
}
@media (max-width: 640px) {
  .index__item { grid-template-columns: 1.75rem minmax(0,1fr); }
  .index__go { display: none; }
}

/* SECTION HEADINGS — four distinct patterns so no two sections on a page
   are introduced the same way. The old single `sec-head--split` on every
   section was the most obvious template tell in the build. */
.h-plain { display: grid; gap: var(--s4); margin-bottom: var(--s12); max-width: 30ch; }
.h-wide  { margin-bottom: var(--s12); }
.h-wide h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); letter-spacing: -0.036em; }
.h-rule  {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap;
  padding-bottom: var(--s4); margin-bottom: var(--s8);
  border-bottom: 1.5px solid currentColor;
}
.h-rule h2 { font-size: var(--t-h3); }
.h-rule > span { font-size: var(--t-xs); color: var(--ink-muted); }
.h-side { margin-bottom: var(--s8); }
.h-side h2 { font-size: var(--t-h2); }

/* ── 18b. PAGE MODULES ────────────────────────────────────────────── */

/* HERO — drenched, full-bleed, asymmetric */
.hero {
  position: relative; isolation: isolate;
  background: var(--deep); color: var(--on-deep);
  min-height: min(96svh, 940px);
  display: grid; align-items: end;
  padding-block: clamp(var(--s24), 22vh, var(--s40)) calc(clamp(var(--s8), 4vw, var(--s16)) + 46px);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%;
  filter: saturate(0.6) contrast(1.1) brightness(1.02);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--deep); mix-blend-mode: color; opacity: 0.55;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      oklch(0.21 0.048 16) 0%,
      oklch(0.21 0.048 16 / 0.93) 26%,
      oklch(0.21 0.048 16 / 0.66) 47%,
      oklch(0.21 0.048 16 / 0.16) 74%,
      oklch(0.21 0.048 16 / 0) 92%),
    linear-gradient(to top,
      oklch(0.21 0.048 16) 0%,
      oklch(0.21 0.048 16 / 0) 40%);
}
@media (max-width: 900px) {
  .hero__scrim {
    background: linear-gradient(to top,
      oklch(0.21 0.048 16) 18%,
      oklch(0.21 0.048 16 / 0.80) 58%,
      oklch(0.21 0.048 16 / 0.52) 100%);
  }
  .hero__bg img { object-position: 62% 30%; }
  /* clear the demo control and the WhatsApp float, which both float bottom */
  .hero { padding-bottom: calc(var(--s16) + 66px); }
}
.hero__scrim::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.07; mix-blend-mode: overlay;
}
.hero__in { display: grid; gap: var(--s8); max-width: 62ch; }
.hero h1 {
  font-size: var(--t-display); line-height: 0.94; letter-spacing: -0.042em;
  font-weight: 400;
}
.hero h1 em {
  font-style: italic; font-weight: 400;
  color: var(--accent); display: block;
}
.hero__lead { font-size: var(--t-lead); color: var(--on-deep-muted); max-width: 46ch; line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__place {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--on-deep-muted);
}
.hero__place svg { width: 15px; height: 15px; }

/* live next-class strip along the bottom of the hero */
.ticker {
  margin-top: clamp(var(--s8), 6vw, var(--s16));
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: var(--s4) var(--s6); align-items: center;
  padding-top: var(--s5); border-top: 1px solid var(--deep-line);
  max-width: none;
}
.ticker__k { font-size: var(--t-2xs); font-weight: 650; color: var(--on-deep-muted); letter-spacing: 0.06em; }
.ticker__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); min-width: 0; }
.ticker__body b { font-family: var(--f-mono); font-size: var(--t-body); letter-spacing: -0.02em; }
.ticker__body span { font-size: var(--t-sm); color: var(--on-deep-muted); }
@media (max-width: 760px) {
  .ticker { grid-template-columns: 1fr; gap: var(--s3); }
  .ticker .btn { justify-self: start; }
}

/* SPLIT — image beside content, reversible */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s8), 6vw, var(--s16)); align-items: center;
}
.split--wide-media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--flip > .split__media { order: 2; }
.split__body { display: grid; gap: var(--s6); align-content: start; max-width: 52ch; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 5 / 4; }
@media (max-width: 900px) {
  .split, .split--wide-media { grid-template-columns: 1fr; gap: var(--s8); }
  .split--flip > .split__media { order: 0; }
  .split__media img { aspect-ratio: 3 / 2; }
}

/* stacked, offset image pair */
.stackpair { position: relative; padding-bottom: 14%; padding-right: 12%; }
.stackpair img:first-child { width: 100%; border-radius: 0; aspect-ratio: 4/5; object-fit: cover; }
.stackpair img:last-child {
  position: absolute; right: 0; bottom: 0; width: 52%;
  border-radius: 0; aspect-ratio: 1; object-fit: cover;
  border: 8px solid var(--bg);
}
.plate--deep .stackpair img:last-child { border-color: var(--deep); }

/* OFFERINGS — one feature + a ruled list. Not a card grid. */
.offers { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(var(--s8), 5vw, var(--s16)); }
@media (max-width: 940px) { .offers { grid-template-columns: 1fr; } }
.offer-hero {
  position: relative; border-radius: 0; overflow: hidden;
  min-height: 420px; display: grid; align-items: end; isolation: isolate;
  color: oklch(0.97 0 0); text-decoration: none;
}
.offer-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--ease-out); }
.offer-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(0.18 0.04 16 / 0.92) 6%, oklch(0.18 0.04 16 / 0.15) 62%);
}
@media (hover: hover) and (pointer: fine) { .offer-hero:hover img { transform: scale(1.04); } }
.offer-hero__in { padding: var(--s8); display: grid; gap: var(--s3); }
.offer-hero h3 { font-size: var(--t-h3); }
.offer-hero p { font-size: var(--t-sm); color: oklch(0.9 0.01 60); max-width: 34ch; }

.offer-list { display: grid; align-content: start; }
.offer {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center;
  padding: var(--s5) 0; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: padding-inline-start var(--d-pop) var(--ease-out);
}
.offer:last-child { border-bottom: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .offer:hover { padding-inline-start: var(--s3); } }
.offer h4 { font-size: var(--t-h4); margin-bottom: 3px; }
.offer p { font-size: var(--t-sm); color: var(--ink-muted); max-width: 42ch; }
.offer__go { width: 20px; height: 20px; color: var(--ink-muted); flex: none; transition: transform var(--d-pop) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .offer:hover .offer__go { transform: translateX(4px); color: var(--primary); } }

/* QUOTE BAND — editorial, not testimonial cards */
.quotes { display: grid; gap: var(--s12); }
.quote-lg {
  display: grid; gap: var(--s6); max-width: 34ch;
  font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  line-height: 1.24; letter-spacing: -0.024em; text-wrap: balance;
}
.quote-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s8); }
.quote-sm { display: grid; gap: var(--s4); font-size: var(--t-body); line-height: 1.5; }
.quote-by { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-xs); color: var(--ink-muted); font-family: var(--f-body); letter-spacing: 0; }
.quote-by b { display: block; color: var(--ink); font-weight: 650; }

/* PROGRAM CARD */
.prog {
  position: relative; display: grid; align-content: end; gap: var(--s2);
  min-height: 300px; padding: var(--s6); border-radius: 0;
  overflow: hidden; isolation: isolate; color: oklch(0.97 0 0); text-decoration: none;
}
.prog img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--ease-out); }
.prog::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(0.17 0.04 16 / 0.94) 8%, oklch(0.17 0.04 16 / 0.1) 66%); }
@media (hover: hover) and (pointer: fine) { .prog:hover img { transform: scale(1.05); } }
.prog h4 { font-size: var(--t-h4); }
.prog p { font-size: var(--t-xs); color: oklch(0.88 0.01 60); }
.prog .badge { position: absolute; top: var(--s4); left: var(--s4); }

/* RETREAT */
.retreat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; border-radius: 0; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg);
}
.retreat img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.retreat__body { padding: clamp(var(--s6), 3vw, var(--s12)); display: grid; gap: var(--s4); align-content: center; }
@media (max-width: 800px) { .retreat { grid-template-columns: 1fr; } .retreat img { min-height: 220px; } }

/* POSTCARD — journal */
.post { display: grid; gap: var(--s3); text-decoration: none; color: inherit; }
.post img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 0; transition: transform 620ms var(--ease-out); }
.post__shot { overflow: hidden; border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .post:hover img { transform: scale(1.04); } }
.post h4 { font-size: var(--t-body); line-height: 1.35; }
.post__m { font-size: var(--t-xs); color: var(--ink-muted); display: flex; gap: var(--s2); align-items: center; }

/* ANSWER BLOCK — answer-first content for AI engines and skim readers.
   Set as a magazine standfirst rather than a boxed card: the box version
   appeared identically on eight pages, which is precisely the repetition
   that makes a site read as one template rather than a designed thing. */
.answer {
  display: grid; gap: var(--s3);
  padding: var(--s5) 0 0;
  border-top: 2px solid currentColor;
  background: none; border-radius: 0;
  max-width: 46ch;
}
.answer h2, .answer h3 {
  font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: 0.03em; color: var(--accent-ink);
}
.plate--deep .answer h2, .plate--deep .answer h3, .app .answer h2 { color: var(--accent); }
.answer p {
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.5; text-wrap: pretty;
}
.answer strong { font-weight: 650; }

/* LOCATION — a drawn map of the old town, no tile service required */
.locmap {
  position: relative; border-radius: 0; overflow: hidden;
  background: var(--deep-raise); border: 1px solid var(--deep-line);
}
.locmap svg { width: 100%; height: auto; display: block; }
.locmap__blocks { fill: oklch(0.30 0.030 22); }
.locmap__street { stroke: oklch(0.40 0.028 24); stroke-width: 3; fill: none; stroke-linecap: round; }
.locmap__street--main { stroke: oklch(0.50 0.035 26); stroke-width: 6; }
.locmap__water { fill: oklch(0.305 0.032 234); }
.locmap__plaza { fill: oklch(0.44 0.055 78); }
.locmap__label { fill: oklch(0.80 0.02 60); font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.02em; }
.locmap__label--sm { fill: oklch(0.66 0.02 60); font-size: 11px; }
.locmap__halo { fill: var(--primary-glow); opacity: 0.18; transform-origin: center; }
.locmap__halo--a { animation: ping 3s var(--ease-out) infinite; }
.locmap__halo--b { animation: ping 3s var(--ease-out) 1.5s infinite; }
.locmap__dot { fill: var(--primary-glow); stroke: oklch(0.97 0 0); stroke-width: 2.5; }
@keyframes ping {
  0%   { transform: scale(0.55); opacity: 0.34; }
  70%  { transform: scale(1.9);  opacity: 0; }
  100% { transform: scale(1.9);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .locmap__halo--a, .locmap__halo--b { animation: none; opacity: 0.2; }
}

/* ── 19. PAGE LOAD REVEAL ─────────────────────────────────────────── */
/* Enhances an already-visible default: if JS or the transition never
   fires, content is fully visible. Nothing is gated behind a class. */

.rise { opacity: 1; transform: none; }
html.js .rise {
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--rise-delay, 0ms);
}
html.js .rise.is-in { opacity: 1; transform: none; }

/* ── 20. UTILITIES ────────────────────────────────────────────────── */

.row { display: flex; align-items: center; gap: var(--s3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.col { display: grid; gap: var(--s3); }
.col--4 { gap: var(--s4); }
.col--6 { gap: var(--s6); }
.col--8 { gap: var(--s8); }
.push { margin-inline-start: auto; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
@media (max-width: 640px) { .g2 { grid-template-columns: 1fr; } }

.muted { color: var(--ink-muted); }
.app .muted { color: var(--on-app-muted); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.strong { font-weight: 650; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.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;
}
.stack-16 { display: grid; gap: var(--s16); }
.stack-12 { display: grid; gap: var(--s12); }
.stack-8  { display: grid; gap: var(--s8); }
.mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); } .mt-12 { margin-top: var(--s12); }
.no-scroll { overflow: hidden; }

/* app shell */
.app { background: var(--app-bg); color: var(--on-app); min-height: 100vh; }
.app { --ink: var(--on-app); --ink-muted: var(--on-app-muted); --bg: var(--app-surface); --line: var(--app-line); }

/* prose */
.prose { max-width: var(--measure); display: grid; gap: var(--s6); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s8); }
.prose h3 { font-size: var(--t-h4); font-family: var(--f-body); font-weight: 650; margin-top: var(--s4); }
.prose ul, .prose ol { display: grid; gap: var(--s3); padding-left: var(--s6); }
.prose li { padding-left: var(--s1); }
.prose blockquote {
  padding: var(--s6); border-radius: var(--r-lg); background: var(--bg-sink);
  font-family: var(--f-display); font-size: var(--t-h4); line-height: 1.4; letter-spacing: -0.015em;
}
.prose a { color: var(--primary); font-weight: 550; }

/* ── 20b. TOUCH TARGETS ───────────────────────────────────────────── */
/* Compact controls are fine under a mouse. On a finger they are not, so
   every interactive control grows to 44px on a coarse pointer. */

@media (pointer: coarse) {
  .btn--sm { min-height: 44px; padding-inline: var(--s5); }
  .chip { min-height: 44px; padding-inline: var(--s5); }
  .seg button { min-height: 40px; }
  .demobar button { min-height: 38px; }
  .nav__links a, .appbar__links a { padding-block: var(--s3); }
  .chapters button { padding: var(--s4) var(--s3); }
  .offer { padding-block: var(--s6); }
  .switch__track { width: 50px; height: 30px; }
  .switch__track::after { width: 24px; height: 24px; }
  .switch input:checked + .switch__track::after { transform: translateX(20px); }
  .code-in input { width: 48px; height: 58px; }
}

/* ── 21. REDUCED MOTION ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js .rise { opacity: 1; transform: none; transition: opacity 200ms ease; }
  .drawer, .navdraw { transition: opacity 180ms ease; }
  .vcard:hover .vcard__shot img { transform: none; }
  .btn:active, .chip:active, .radio-card:active { transform: none; }
}

/* ── 22. PRINT ────────────────────────────────────────────────────── */

@media print {
  .nav, .appbar, .foot, .wafloat, .demobar, .toasts, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .plate { padding-block: 1rem; }
}