/* =====================================================================
   HINTERLAND BOXING CLUB – shared stylesheet (Truechord sample site)

   NEW IDEA: one CSS file for all pages.
   Every page (English and German, home and sub pages) links this same
   file. Change a colour here and every page updates at once.
   Page-only extras live in a small <style> block on that page.

   Layout pattern: "split screen"
   - Home: 50/50. Left half = fixed poster, right half = scrolling content.
   - Sub pages: fixed title panel on the left, content on the right.
   - Phones: the left part becomes the first screen, cut off diagonally.
   ===================================================================== */

/* ---------- 1. Design tokens (CSS variables) ---------- */
:root {
  --ink: #0c0c0c;        /* near black */
  --ink-2: #171717;
  --ink-3: #242424;
  --paper: #f2f0e9;      /* off-white */
  --paper-2: #e7e4d9;
  --paper-3: #d6d2c3;
  --acid: #dfff1f;       /* acid yellow: only on black, or as a background */
  --acid-2: #c9ea00;
  --mute-d: #a9a99f;     /* muted text on dark */
  --mute-l: #55554e;     /* muted text on light */
  --line-l: #cbc7b8;
  --line-d: #333;

  /* Condensed display type with system fonts only.
     Windows/Mac have Impact, iPhones "Avenir Next Condensed",
     Android "sans-serif-condensed" (Roboto Condensed). */
  --f-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "sans-serif-condensed", "Roboto Condensed", "Helvetica Neue Condensed", "DejaVu Sans Condensed", "Liberation Sans Narrow", "DejaVu Sans", sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.1rem, 4.5vw, 3rem);   /* side padding of the content column */
  --cut: 13vw;                          /* height of the diagonal cut on phones */
  --r: 4px;
  --focus: var(--ink);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-body);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--acid-2); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark { --focus: var(--acid); }
/* The "hidden" attribute must always win, even over classes like .btn that set display */
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: .5rem; top: -4rem; z-index: 200;
  background: var(--acid); color: var(--ink); padding: .7rem 1rem; font-weight: 700;
}
.skip:focus { top: .5rem; }

/* Display type: huge, condensed, uppercase. font-synthesis:none stops the
   browser from faking a bold version of Impact (that looks smudgy). */
.d {
  font-family: var(--f-display);
  font-weight: 700;
  font-weight: 700; font-synthesis: none; font-stretch: condensed;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: .005em;
}
/* Outline text: transparent fill + a stroke (the stroke needs its own colour, because currentColor would be transparent too) */
.outline { color: transparent; -webkit-text-stroke: 2px var(--stroke, var(--paper)); }
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.kicker::before { content: ""; width: 1.6rem; height: 4px; background: currentColor; }

/* ---------- 3. Demo banner, top controls, phone CTA bar ---------- */
.demo { margin: 0;
  position: relative; z-index: 60;
  background: var(--acid); color: var(--ink);
  font-size: .78rem; line-height: 1.35; text-align: center;
  padding: .45rem .9rem;
}

/* The top bar has height 0 and is "sticky": its buttons float in the
   top right corner while the page scrolls underneath. */
.topbar { position: sticky; top: 0; height: 0; z-index: 70; }
.controls {
  position: absolute; right: .6rem; top: .5rem;
  display: flex; align-items: center; gap: .4rem;
}
.lang {
  display: flex; background: var(--ink); border: 2px solid #3d3d3d;
  border-radius: 99px; overflow: hidden;
}
.lang a {
  min-width: 44px; min-height: 40px; display: grid; place-items: center;
  color: var(--paper); text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  border-radius: 99px;
}
.lang a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.menu-btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: 0 1rem 0 1.1rem;
  background: var(--ink); color: var(--acid); border: 2px solid #3d3d3d; border-radius: 99px;
  font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .06em;
  --focus: var(--acid);
  transition: transform .15s;
}
.menu-btn:hover { transform: translateY(-1px); }
.menu-btn:active { transform: scale(.96); }
.burger { width: 20px; height: 12px; display: grid; align-content: space-between; }
.burger i { display: block; height: 3px; background: currentColor; }
.burger i:last-child { width: 65%; justify-self: end; }
.menu-btn[hidden] { display: none; }

.mob-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: grid; grid-template-columns: 1fr auto auto; gap: 1px;
  background: var(--ink); border-top: 2px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
}
.mob-cta a {
  -webkit-tap-highlight-color: transparent;
  min-height: 52px; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 0 1rem; text-decoration: none; font-weight: 800; font-size: .92rem;
  background: var(--ink); color: var(--paper);
}
.mob-cta a:first-child { background: var(--acid); color: var(--ink); }
.mob-cta svg { width: 20px; height: 20px; }
/* room for the fixed call bar at the very end of the page */
body.has-cta .foot { padding-bottom: calc(2rem + 54px); }
@media (min-width: 960px) { .mob-cta { display: none; } body.has-cta .foot { padding-bottom: 2rem; } }

/* ---------- 4. The split layout ---------- */
.split { display: block; }
.split > .side { position: relative; overflow: hidden; }
.split > .main { position: relative; min-width: 0; }

/* Phone: the side part is cut diagonally at the bottom.
   Two layers: the wrapper shows a thin band of the second colour
   below the diagonal edge of the inner part (clip-path = cut-out shape). */
.side {
  background: var(--band, var(--acid));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  margin-bottom: calc(var(--cut) * -0.35);
}
.side-in {
  position: relative; height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) - 10px), 0 calc(100% - 10px));
}

@media (min-width: 960px) {
  .split { display: grid; grid-template-columns: var(--side-w, 50%) 1fr; }
  /* "sticky" keeps the side panel on screen while the right side scrolls */
  .split > .side {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    clip-path: polygon(0 0, 100% 0, calc(100% - 3.2vw) 100%, 0 100%);
    margin-bottom: 0;
  }
  .side-in { clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - 3.2vw - 12px) 100%, 0 100%); }
  .split--page { --side-w: 38%; }
}

/* ---------- 5. Home poster (left half) ---------- */
.poster {
  --focus: var(--acid);
  background:
    radial-gradient(circle at 80% 26%, #1d1d1d 0 26%, transparent 26.2%),
    repeating-linear-gradient(-58deg, transparent 0 22px, rgba(255,255,255,.035) 22px 24px),
    var(--ink);
  color: var(--paper);
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 1rem var(--pad) calc(var(--cut) + 5.2rem); /* extra room for the phone call bar */
}
/* Small phones: the brand sits under the floating Menu/language buttons */
@media (max-width: 559px) { .side-in { padding-top: 3.7rem !important; } }
.brand {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none;
  min-height: 44px; align-self: flex-start;
}
.brand svg { width: 42px; height: 42px; flex: none; }
.brand b { display: block; font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.18rem; line-height: .95; letter-spacing: .04em; }
.brand small { display: block; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.poster-art { position: absolute; right: -6%; top: 9%; width: 74%; max-width: 460px; pointer-events: none; }
.poster-art svg { width: 100%; height: auto; }
.poster h1 {
  margin-top: auto; position: relative; z-index: 1;
  /* "Fit text": the font size is worked out from the panel width and the
     number of letters in the longest word (--fit, set on the element). */
  font-size: min(calc((100vw - 2 * var(--pad)) / (var(--fit, 7) * .56)), 9.5rem);
}
.poster h1 span { display: block; }
.poster h1 .a { color: var(--acid); }
.poster-meta {
  position: relative; z-index: 1; margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center;
  font-size: .86rem; color: var(--mute-d);
}
.badge247 {
  display: inline-grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: var(--acid); color: var(--ink); transform: rotate(-12deg);
  font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; line-height: .9; text-align: center; font-size: 1.45rem;
}
.badge247 small { display: block; font-size: .5rem; letter-spacing: 0; font-family: var(--f-body); font-weight: 800; }
.ticker {
  position: absolute; left: 0; right: 0; bottom: calc(var(--cut) * .55); overflow: hidden;
  white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase;
  font-size: .95rem; letter-spacing: .1em; color: var(--ink); background: var(--acid);
  transform: rotate(-4deg) scale(1.08); padding: .25rem 0; display: none;
}
.ticker span { display: inline-block; padding-right: 2rem; animation: tick 28s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
@media (min-width: 960px) {
  .poster { min-height: 0; height: 100%; padding: 1.2rem calc(var(--pad) + 3vw) 6.4rem var(--pad); }
  .poster h1 { font-size: min(calc((50vw - 2 * var(--pad) - 4vw) / (var(--fit, 7) * .56)), 11rem); }
  .poster-art { width: 52%; top: 7%; right: 7%; }
  .ticker { display: block; bottom: 3rem; transform: rotate(-2.5deg) scale(1.06); }
}

/* ---------- 6. Sub page title panel (left) ---------- */
.panel {
  background:
    repeating-linear-gradient(-58deg, transparent 0 22px, rgba(0,0,0,.045) 22px 24px),
    var(--acid);
  color: var(--ink);
  padding: 1rem var(--pad) calc(var(--cut) + 1.6rem);
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 58svh;
}
.split--page > .side { --band: var(--ink); }
.panel .brand { --focus: var(--ink); }
.panel-art {
  position: absolute; right: -4%; bottom: 10%; width: 52%; max-width: 300px; opacity: .2; pointer-events: none;
}
.panel h1 {
  position: relative; margin-top: auto;
  font-size: min(calc((100vw - 2 * var(--pad)) / (var(--fit, 8) * .56)), 6.5rem);
}
.panel h1 .o { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.panel .lead { position: relative; font-size: 1.02rem; max-width: 34rem; margin: 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .4rem; font-size: .82rem; font-weight: 600; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.crumbs a { display: inline-block; padding: .55rem 0; }
.crumbs [aria-current] { padding: .55rem 0; display: inline-block; }
.facts { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.facts div { background: var(--ink); color: var(--paper); border-radius: var(--r); padding: .45rem .7rem; }
.facts dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--acid); }
.facts dd { margin: 0; font-weight: 700; font-size: .92rem; }
.panel .btn-row { position: relative; }
@media (min-width: 960px) {
  .panel {
    min-height: 0; height: 100%; overflow-y: auto;
    padding: 1.2rem calc(var(--pad) + 3vw) 2.4rem var(--pad);
  }
  .panel h1 { font-size: min(calc((38vw - 2 * var(--pad) - 4vw) / (var(--fit, 8) * .56)), 7.5rem); }
  .panel-art { bottom: 6%; right: 6%; width: 44%; }
}

/* ---------- 7. Right-hand content ---------- */
.main { padding-top: 3.2rem; }
.sec { padding: 2.6rem var(--pad); }
.sec + .sec { border-top: 2px solid var(--ink); }
.sec--dark { background: var(--ink); color: var(--paper); --focus: var(--acid); border-top-color: var(--ink) !important; }
.sec--alt { background: var(--paper-2); }
.sec h2 { font-size: clamp(2.2rem, 9vw, 3.6rem); margin: .6rem 0 1rem; }
.sec h2 .a { background: var(--acid); color: var(--ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sec--dark h2 .a { background: none; color: var(--acid); padding: 0; }
.sec h3 { font-size: 1.15rem; }
.lead { font-size: 1.12rem; max-width: 40rem; }
.muted { color: var(--mute-l); }
.sec--dark .muted, .on-dark .muted { color: var(--mute-d); }
.narrow { max-width: 44rem; }
@media (min-width: 960px) {
  .main { padding-top: 4.2rem; }
  .sec { padding: 3.6rem var(--pad); }
  .sec h2 { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
}

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .7rem 1.3rem;
  border: 2px solid var(--ink); border-radius: var(--r);
  background: var(--ink); color: var(--paper);
  font-weight: 800; font-size: .98rem; text-decoration: none; line-height: 1.15;
  transition: transform .15s, background-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--acid-2); }
.btn:active { transform: none; box-shadow: none; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--acid { background: var(--acid); color: var(--ink); }
.btn--acid:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.sec--dark .btn { border-color: var(--paper); }
.sec--dark .btn--acid { border-color: var(--acid); }
.sec--dark .btn:hover { box-shadow: 4px 4px 0 var(--paper); }
.panel .btn:hover { box-shadow: 4px 4px 0 var(--paper); }
.arrow { display: inline-block; transition: transform .15s; }
a:hover .arrow { transform: translateX(4px); }

/* Quick facts strip */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--ink); border: 2px solid var(--ink); margin-top: 2rem; }
.stats div { background: var(--paper); padding: .9rem 1rem; }
.stats b { display: block; font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; font-size: 2.3rem; line-height: 1; }
.stats span { font-size: .85rem; color: var(--mute-l); }
@media (min-width: 600px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* Today widget */
.today { border: 2px solid var(--ink); background: var(--paper); }
.today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: .9rem 1rem; background: var(--ink); color: var(--paper); }
.today-head b { font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.6rem; line-height: 1; color: var(--acid); }
.today-head span { font-size: .86rem; color: var(--mute-d); }
.today ul { list-style: none; margin: 0; padding: 0; }
.today li a {
  display: grid; grid-template-columns: 5.2rem 1fr auto; gap: .8rem; align-items: center;
  padding: .75rem 1rem; text-decoration: none; border-top: 1px solid var(--line-l); min-height: 52px;
}
.today li:first-child a { border-top: 0; }
.today li a:hover { background: var(--paper-2); }
.today time { font-weight: 800; font-variant-numeric: tabular-nums; }
.today .who { font-size: .84rem; color: var(--mute-l); display: block; }
.today .state { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 3px; border: 1px solid var(--ink); white-space: nowrap; }
.today .is-next .state { background: var(--acid); }
.today .is-now .state { background: var(--ink); color: var(--acid); }
.today .is-done { opacity: .5; }
.today-foot { padding: .8rem 1rem; border-top: 2px solid var(--ink); font-weight: 700; }
.today-empty { padding: 1rem; }

/* Class rows (home + classes overview) */
.rows { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: row; }
.rows > li { border-bottom: 2px solid var(--ink); }
.row {
  -webkit-tap-highlight-color: transparent;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: center;
  padding: 1.1rem .3rem; text-decoration: none; position: relative;
  transition: background-color .2s, padding .2s;
}
.row::before { counter-increment: row; content: "0" counter(row); font-weight: 800; font-size: .8rem; align-self: start; padding-top: .55rem; }
.row .d { font-size: clamp(1.8rem, 8vw, 2.9rem); grid-column: 2; overflow-wrap: break-word; }
.row p { grid-column: 2; margin: .35rem 0 0; font-size: .95rem; color: var(--mute-l); }
.row .go { grid-column: 3; grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 1.2rem; transition: background-color .2s, transform .2s; }
.row:hover, .row:focus-visible { background: var(--acid); }
.row:hover .go { background: var(--ink); color: var(--acid); transform: rotate(-35deg); }
.chip {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .5rem; border: 1.5px solid currentColor; border-radius: 3px; vertical-align: middle; white-space: nowrap;
}
.row .chips { grid-column: 2; display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; }

/* Military-friendly block */
.mil-grid { display: grid; gap: 2px; background: var(--line-d); border: 2px solid var(--line-d); margin-top: 1.6rem; }
.mil-grid > div { background: var(--ink); padding: 1.1rem 1.1rem 1.2rem; }
.mil-grid h3 { color: var(--acid); font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; margin-bottom: .35rem; }
.mil-grid p { margin: 0; color: var(--mute-d); font-size: .95rem; }
@media (min-width: 600px) { .mil-grid { grid-template-columns: 1fr 1fr; } }

/* Plan teaser cards */
.plan-cards { display: grid; gap: .8rem; margin-top: 1.4rem; }
.plan-card { border: 2px solid var(--ink); padding: 1.1rem; background: var(--paper); position: relative; }
.plan-card.is-hot { background: var(--ink); color: var(--paper); }
.plan-card .d { font-size: 1.9rem; }
.plan-card .from { font-size: .85rem; }
.plan-card .big { font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; font-size: 3rem; line-height: 1; }
.plan-card.is-hot .big { color: var(--acid); }
.plan-card .flag { position: absolute; top: -2px; right: -2px; background: var(--acid); color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .55rem; }
.plan-card ul { margin: .7rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
@media (min-width: 640px) { .plan-cards { grid-template-columns: repeat(3, 1fr); } }

/* Coach strip / cards */
.coach-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1.4rem; }
.coach-mini { text-decoration: none; display: block; }
.coach-mini .pic { border: 2px solid var(--ink); background: var(--paper-2); aspect-ratio: 1; overflow: hidden; transition: transform .2s; }
.coach-mini:hover .pic { transform: rotate(-2deg); background: var(--acid); }
.coach-mini b { display: block; margin-top: .5rem; }
.coach-mini span { font-size: .85rem; color: var(--mute-l); }
@media (min-width: 640px) { .coach-strip { grid-template-columns: repeat(4, 1fr); } }

/* Numbered steps */
.steps { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: st; }
.steps li { position: relative; padding: 0 0 0 4rem; min-height: 3.2rem; }
.steps li::before {
  counter-increment: st; content: counter(st);
  position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--acid); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; font-size: 1.6rem;
}
.sec--dark .steps li::before { border-color: var(--acid); }
.steps b { display: block; font-size: 1.05rem; }
.steps p { margin: .2rem 0 0; color: var(--mute-l); }
.sec--dark .steps p { color: var(--mute-d); }

/* Two-column helper */
.cols { display: grid; gap: 1.6rem; }
@media (min-width: 1100px) { .cols { grid-template-columns: 1fr 1fr; } }

/* Hours table */
.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 800; }
.hours tr.is-today th::after { content: attr(data-today); margin-left: .5rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; background: var(--acid); padding: .1rem .35rem; border: 1px solid var(--ink); }
.sec--dark .hours th, .sec--dark .hours td { border-color: var(--line-d); }
.sec--dark .hours tr.is-today th::after { color: var(--ink); }

/* Map drawing */
.map { border: 2px solid var(--ink); background: var(--paper-2); }
.map svg { width: 100%; height: auto; }

/* Details / FAQ accordion (native <details>, works without JS) */
.faq { border-top: 2px solid var(--ink); margin-top: 1rem; }
.faq details { border-bottom: 2px solid var(--ink); }
.faq summary {
  -webkit-tap-highlight-color: transparent;
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem .2rem; font-weight: 800; min-height: 54px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-weight: 800; transition: transform .2s; }
.faq details[open] summary::after { content: "–"; background: var(--acid); color: var(--ink); border-color: var(--ink); }
.faq summary:hover { background: var(--paper-2); }
.sec--dark .faq, .sec--dark .faq details { border-color: var(--line-d); }
.sec--dark .faq summary:hover { background: var(--ink-3); }
.faq .ans { padding: 0 .2rem 1.1rem; max-width: 42rem; }
.faq .ans p:last-child { margin: 0; }

/* Check list ("what to bring") */
.bring { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.bring li { display: grid; grid-template-columns: 2rem 1fr; gap: .15rem .6rem; align-items: start; padding: .7rem .8rem; border: 2px solid var(--ink); background: var(--paper); }
/* The tick is a tiny SVG written straight into the CSS (a "data URL"), so no image file is needed. */
.bring li::before { content: ""; width: 1.6rem; height: 1.6rem; border: 2px solid var(--ink); background: var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%230c0c0c' stroke-width='3'/%3E%3C/svg%3E") center / 80% no-repeat; }
.bring li::before { grid-row: 1 / span 2; }
.bring b, .bring span { grid-column: 2; display: block; }
.bring span { font-size: .9rem; color: var(--mute-l); }
@media (min-width: 700px) { .bring { grid-template-columns: 1fr 1fr; } }

/* Session flow (timeline bar) */
.flow { margin-top: 1.2rem; }
.flow-bar { display: flex; height: 18px; border: 2px solid var(--ink); }
.flow-bar span { display: block; border-right: 2px solid var(--ink); }
.flow-bar span:last-child { border-right: 0; }
.flow-bar span:nth-child(odd) { background: var(--acid); }
.flow-bar span:nth-child(even) { background: var(--ink); }
.flow ol { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.flow li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line-l); }
.flow li b { font-variant-numeric: tabular-nums; }

/* Static schedule list on class pages */
.sched { list-style: none; margin: 1rem 0 0; padding: 0; border: 2px solid var(--ink); }
.sched li { display: grid; grid-template-columns: 6.2rem 1fr auto; gap: .8rem; padding: .75rem 1rem; border-top: 1px solid var(--line-l); align-items: baseline; }
.sched li:first-child { border-top: 0; }
.sched li.is-today { background: var(--acid); }
.sched .day { font-weight: 800; }
.sched .note { font-size: .82rem; color: var(--mute-l); }
.sched li.is-today .note { color: var(--ink); }

/* Coach box on class page */
.coach-box { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: center; border: 2px solid var(--ink); padding: 1rem; background: var(--paper); margin-top: 1rem; }
.coach-box .pic { border: 2px solid var(--ink); aspect-ratio: 1; background: var(--acid); overflow: hidden; }
.coach-box b { font-size: 1.1rem; display: block; }
.coach-box p { margin: .3rem 0 .4rem; font-size: .93rem; color: var(--mute-l); }

/* Prev / next pager */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.pager a { background: var(--paper); padding: 1rem; text-decoration: none; min-height: 72px; display: flex; flex-direction: column; justify-content: center; }
.pager a:hover { background: var(--acid); }
.pager small { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); }
.pager b { overflow-wrap: break-word; hyphens: auto; font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; }
.pager .next { text-align: right; }

/* Class cards (overview) */
.finder { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.pill {
  -webkit-tap-highlight-color: transparent;
  min-height: 44px; padding: .45rem 1rem; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper);
  font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}
.pill[aria-pressed="true"] { background: var(--ink); color: var(--acid); }
.pill:hover { background: var(--paper-2); }
.pill[aria-pressed="true"]:hover { background: var(--ink-3); }
.pill i { width: 12px; height: 12px; border: 2px solid currentColor; display: inline-block; flex: none; }
.cards { display: grid; gap: 1rem; margin-top: 1.4rem; }
.card {
  border: 2px solid var(--ink); background: var(--paper); text-decoration: none; display: grid; grid-template-rows: auto 1fr;
  transition: transform .2s, box-shadow .2s, opacity .25s;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.card .art { background: var(--ink); color: var(--acid); padding: 1.2rem; display: flex; gap: .8rem; justify-content: space-between; align-items: flex-end; min-height: 8.5rem; }
.card .art svg { width: 4.6rem; height: 4.6rem; flex: none; }
.card .art .d { color: var(--paper); font-size: clamp(1.6rem, 7vw, 2.1rem); flex: 1; min-width: 0; overflow-wrap: break-word; }
.card .body { padding: 1rem 1.1rem 1.2rem; }
.card .body p { margin: .5rem 0 .8rem; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; font-size: .88rem; }
.card dt { font-weight: 800; }
.card dd { margin: 0; }
.card.is-dim { opacity: .35; }
.card.is-match { box-shadow: 6px 6px 0 var(--acid-2); }
.card.is-match .art { background: var(--acid); color: var(--ink); }
.card.is-match .art .d { color: var(--ink); }
@media (min-width: 700px) { .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Coach cards */
.coach { display: grid; gap: 1.1rem; padding: 1.6rem 0; border-bottom: 2px solid var(--ink); scroll-margin-top: 4rem; }
.coach:first-of-type { padding-top: .4rem; }
.coach .pic { border: 2px solid var(--ink); background: var(--acid); aspect-ratio: 1; max-width: 300px; overflow: hidden; }
.coach .role { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }
.coach h2 { font-size: clamp(2.2rem, 8vw, 3.3rem); margin: .2rem 0 .7rem; }
.coach dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0 0; font-size: .93rem; }
.coach dt { font-weight: 800; }
.coach dd { margin: 0; }
.coach:nth-of-type(even) .pic { background: var(--paper-2); }
@media (min-width: 1100px) { .coach { grid-template-columns: 240px 1fr; gap: 1.8rem; } }

/* ---------- 8. Forms ---------- */
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label, .field legend { font-weight: 800; font-size: .93rem; }
.field .hint { font-size: .82rem; color: var(--mute-l); }
.input {
  width: 100%; min-height: 50px; padding: .7rem .85rem;
  border: 2px solid var(--ink); border-radius: var(--r); background: #fff;
}
textarea.input { min-height: 110px; resize: vertical; }
.input:focus-visible { outline: 3px solid var(--acid-2); outline-offset: 0; box-shadow: 0 0 0 5px var(--ink); }
.input[aria-invalid="true"] { border-color: #a10000; box-shadow: inset 0 0 0 2px #a10000; }
.err { color: #8f0000; font-weight: 700; font-size: .88rem; min-height: 0; }
.err:empty { display: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Choice cards (radio buttons dressed up as big tappable cards) */
.choices { display: grid; gap: .6rem; }
.choice { position: relative; display: block; -webkit-tap-highlight-color: transparent; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: center;
  padding: .85rem 1rem; border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); min-height: 56px;
}
.choice span::before { content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
.choice b { font-weight: 800; }
.choice small { color: var(--mute-l); grid-column: 2; }
.choice input:checked + span { background: var(--acid); }
.choice input:checked + span::before { background: var(--ink); box-shadow: inset 0 0 0 4px var(--acid); }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.choice:hover span { background: var(--paper-2); }
.choice:hover input:checked + span { background: var(--acid); }
@media (min-width: 700px) { .choices--2 { grid-template-columns: 1fr 1fr; } }

/* Segmented toggle (two radio buttons that look like a switch) */
.seg { display: inline-grid; grid-auto-flow: column; border: 2px solid var(--ink); border-radius: 99px; padding: 3px; background: var(--paper); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 44px; padding: .3rem 1rem; border-radius: 99px; font-weight: 800; font-size: .9rem; text-align: center; line-height: 1.15; }
.seg span small { font-weight: 600; font-size: .72rem; }
.seg input:checked + span { background: var(--ink); color: var(--acid); }
.seg input:focus-visible + span { outline: 3px solid var(--acid-2); outline-offset: 1px; }

/* ---------- 9. Menu overlay (split in two halves) ---------- */
/* We use the native <dialog> element: showModal() traps focus and the
   Escape key closes it for free. */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu::backdrop { background: rgba(0,0,0,.55); }
.menu-in { min-height: 100%; display: grid; }
.menu-nav { background: var(--acid); padding: 4.6rem var(--pad) 2rem; }
.menu-info { background: var(--ink); color: var(--paper); padding: 2rem var(--pad) 2.6rem; --focus: var(--acid); }
.menu-close {
  -webkit-tap-highlight-color: transparent;
  position: fixed; top: .6rem; right: .6rem; z-index: 2;
  min-height: 44px; padding: 0 1rem; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--acid); border: 2px solid var(--acid); border-radius: 99px;
  font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .06em;
  --focus: var(--ink);
}
.menu-close b { font-size: 1.3rem; line-height: 1; }
.menu-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: mn; }
.menu-nav > ol > li { border-bottom: 2px solid var(--ink); }
.menu-nav > ol > li > a {
  display: flex; align-items: baseline; gap: .8rem; padding: .55rem 0; text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; line-height: 1;
  font-size: clamp(2rem, 10vw, 3.4rem);
}
.menu-nav > ol > li > a::before { counter-increment: mn; content: "0" counter(mn); font: 800 .78rem var(--f-body); letter-spacing: .1em; }
.menu-nav a[aria-current="page"] { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.menu-nav a:hover { padding-left: .3rem; }
.menu-nav .sub { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 0 .8rem 2.2rem; }
.menu-nav .sub a { font-size: .88rem; font-weight: 700; text-decoration: none; border: 2px solid var(--ink); border-radius: 99px; padding: .45rem .8rem; min-height: 40px; display: inline-flex; align-items: center; }
.menu-nav .sub a[aria-current="page"] { background: var(--ink); color: var(--acid); -webkit-text-stroke: 0; }
.menu-nav .sub a:hover { background: var(--ink); color: var(--paper); padding-left: .8rem; }
.menu-info h2 { font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; color: var(--acid); font-size: 1.5rem; margin: 0 0 .6rem; letter-spacing: .03em; }
.menu-info .block { padding: 1.1rem 0; border-top: 1px solid var(--line-d); }
.menu-info .block:first-child { border-top: 0; padding-top: 0; }
.menu-info address { font-style: normal; color: var(--mute-d); }
.menu-info .btn { border-color: var(--paper); }
.menu-info .btn--acid { border-color: var(--acid); }
.menu-info .lang { background: var(--paper); border-color: var(--paper); display: inline-flex; }
.menu-info .lang a { color: var(--ink); padding: 0 .9rem; }
.menu-info .lang a[aria-current="page"] { background: var(--ink); color: var(--acid); }
.menu-today { font-size: 1.05rem; }
.menu-today b { color: var(--acid); }
.menu[open] .menu-nav { animation: dropIn .38s cubic-bezier(.2,.8,.2,1) both; }
.menu[open] .menu-info { animation: riseIn .38s .05s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dropIn { from { transform: translateY(-40px); opacity: 0; } }
@keyframes riseIn { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 960px) {
  .menu { overflow: hidden; }
  .menu-in { grid-template-columns: 1fr 1fr; height: 100%; }
  .menu-nav, .menu-info { overflow-y: auto; padding-top: 5rem; }
  .menu-nav { padding-left: max(var(--pad), 4vw); }
  .menu-info { padding: 5rem max(var(--pad), 4vw) 3rem; display: flex; flex-direction: column; justify-content: center; }
  .menu-nav > ol > li > a { font-size: clamp(2.2rem, 4.1vw, 4rem); }
  .menu[open] .menu-nav { animation-name: fromTop; }
  .menu[open] .menu-info { animation-name: fromBottom; }
  @keyframes fromTop { from { transform: translateY(-100%); } }
  @keyframes fromBottom { from { transform: translateY(100%); } }
}
body.menu-open { overflow: hidden; }

/* ---------- 10. Small dialog ("sheet") e.g. session details ---------- */
.sheet {
  width: min(100% - 1.6rem, 440px); padding: 0; border: 2px solid var(--ink); border-radius: var(--r);
  background: var(--paper); color: var(--ink); box-shadow: 10px 10px 0 var(--acid);
}
.sheet::backdrop { background: rgba(12,12,12,.7); }
.sheet-head { background: var(--ink); color: var(--paper); padding: 1rem 3.6rem 1rem 1.1rem; position: relative; }
.sheet-head .d { font-size: 2.1rem; color: var(--acid); }
.sheet-head p { margin: .3rem 0 0; color: var(--mute-d); font-size: .9rem; }
.sheet-x {
  position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); color: var(--ink); border: 0; font-size: 1.4rem; font-weight: 800; --focus: var(--acid);
}
.sheet-body { padding: 1.1rem; }
.sheet-body dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 .4rem; }
.sheet-body dt { font-weight: 800; }
.sheet-body dd { margin: 0; }
.sheet[open] { animation: riseIn .25s ease-out; }

/* ---------- 11. Footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding: 2.6rem var(--pad) 2rem; --focus: var(--acid); }
.foot .big { font-size: clamp(2.4rem, 11vw, 4.6rem); color: var(--acid); margin: 0 0 1.4rem; }
.foot-grid { display: grid; gap: 1.6rem; font-size: .93rem; }
.foot h2 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-d); margin-bottom: .6rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-block; padding: .3rem 0; }
.foot address { font-style: normal; }
.foot .muted { color: var(--mute-d); }
.foot-legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .84rem; color: var(--mute-d); }
.foot-legal a { display: inline-block; padding: .35rem 0; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 12. Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ticker span { animation: none; }
}

/* ---------- 13. Print: only the content, no panels or buttons ---------- */
@media print {
  .demo, .topbar, .mob-cta, .menu, .side, .btn-row, .foot .foot-grid { display: none !important; }
  .split { display: block; }
  .main { padding: 0; }
  .sec { padding: 1rem 0; }
  body { background: #fff; }
}

/* =====================================================================
   PAGE PARTS (only used on one page each, but kept here so both
   languages share them)
   ===================================================================== */

/* ---------- Timetable ---------- */
/* Each class type gets its own PATTERN, not just a colour, so the
   timetable still works for colour-blind visitors and in print. */
.t-bf  { --bg: var(--acid); --fg: var(--ink); --bd: var(--ink); }
.t-ff  { --bg: var(--ink); --fg: var(--acid); --bd: var(--ink); }
.t-kids { --bg: repeating-linear-gradient(-45deg, var(--acid) 0 6px, var(--paper) 6px 12px); --fg: var(--ink); --bd: var(--ink); }
.t-sc  { --bg: var(--paper); --fg: var(--ink); --bd: var(--ink); }
.t-og  { --bg: var(--paper-3); --fg: var(--ink); --bd: var(--mute-l); }
.sw { width: 14px !important; height: 14px !important; background: var(--bg); border: 2px solid var(--bd) !important; }
.pill[aria-pressed="true"] .sw { border-color: var(--acid) !important; }

.tt-bar { display: grid; gap: .8rem; margin: 1.2rem 0 .6rem; }
.tt-bar[hidden] { display: none; }
.tt-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.tt-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tt-tools .seg[hidden], .tt-tools [hidden] { display: none; }
.tt-count { font-weight: 800; font-size: .9rem; margin: .4rem 0 .8rem; }

/* NEW IDEA: a "container query". The timetable looks at its OWN width
   (not the screen width) to decide between list and grid. */
.tt { container-type: inline-size; --ppm: .95px; /* pixels per minute in the grid */ }
.tt-grid { display: grid; gap: 1.1rem; }
.tt-axis { display: none; }
.tt-day { position: relative; }
.tt-day h3 {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.5rem; line-height: 1;
  padding: .5rem .2rem; border-bottom: 2px solid var(--ink); outline-offset: 2px;
}
.tt-day .ds { display: none; }
.tt-badge { font: 800 .66rem var(--f-body); letter-spacing: .12em; background: var(--ink); color: var(--acid); padding: .25rem .45rem; border-radius: 3px; }
.tt-day.is-today h3 { background: var(--acid); }
.tt-day.is-empty { display: none; }
.tt-col { list-style: none; margin: 0; padding: 0; }
.tt-s a {
  -webkit-tap-highlight-color: transparent;
  display: grid; grid-template-columns: 5.4rem 1fr; gap: 0 .8rem; align-items: baseline;
  padding: .7rem .6rem .7rem .8rem; text-decoration: none; min-height: 52px;
  border-bottom: 1px solid var(--line-l); position: relative;
}
.tt-s a::before { content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 6px; background: var(--bg); border: 1.5px solid var(--bd); }
.tt-s time { font-weight: 800; font-variant-numeric: tabular-nums; padding-left: .3rem; }
.tt-s b { font-weight: 800; }
.tt-s .ns { display: none; }
.tt-s .who { grid-column: 2; font-size: .84rem; color: var(--mute-l); }
.tt-s a:hover { background: var(--paper-2); }
.tt-s.is-past { opacity: .45; }
.tt-now { display: none; }

@container (min-width: 560px) {
  .tt:not(.is-list) .tt-grid { grid-template-columns: 2.4rem repeat(7, minmax(0, 1fr)); gap: 0; border: 2px solid var(--ink); background: var(--paper); }
  .tt:not(.is-list) .tt-axis { display: block; position: relative; margin-top: 2.6rem; height: calc(var(--span) * var(--ppm)); border-right: 2px solid var(--ink); }
  .tt:not(.is-list) .tt-axis span { position: absolute; right: .3rem; top: calc(var(--s) * var(--ppm)); transform: translateY(-50%); font-size: .66rem; font-weight: 800; color: var(--mute-l); }
  .tt:not(.is-list) .tt-axis span:first-child { transform: none; }
  .tt:not(.is-list) .tt-day { border-left: 1px solid var(--line-l); }
  .tt:not(.is-list) .tt-day.is-empty { display: block; }
  .tt:not(.is-list) .tt-day h3 { height: 2.6rem; justify-content: center; font-size: 1.1rem; padding: 0; flex-wrap: wrap; gap: 0 .3rem; }
  .tt:not(.is-list) .tt-day .dl { display: none; }
  .tt:not(.is-list) .tt-day .ds { display: inline; }
  .tt:not(.is-list) .tt-badge { font-size: .5rem; padding: .1rem .25rem; }
  .tt:not(.is-list) .tt-col {
    position: relative; height: calc(var(--span) * var(--ppm));
    /* hour lines drawn with a repeating gradient */
    background: linear-gradient(var(--line-l) 1px, transparent 1px) 0 0 / 100% calc(60 * var(--ppm));
  }
  .tt:not(.is-list) .tt-s { position: absolute; left: 2px; right: 2px; top: calc(var(--s) * var(--ppm)); height: calc(var(--d) * var(--ppm) - 2px); }
  .tt:not(.is-list) .tt-s a {
    display: block; height: 100%; min-height: 0; overflow: hidden; padding: .2rem .3rem;
    background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); border-radius: 2px;
    font-size: .68rem; line-height: 1.2;
  }
  .tt:not(.is-list) .tt-s a::before { display: none; }
  .tt:not(.is-list) .t-kids a { text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 2px var(--paper); }
  .tt:not(.is-list) .tt-s a:hover { transform: scale(1.04); z-index: 2; box-shadow: 3px 3px 0 var(--ink); }
  .tt:not(.is-list) .tt-s time { display: block; padding: 0; font-size: .64rem; }
  .tt:not(.is-list) .tt-s .nf, .tt:not(.is-list) .tt-s .who { display: none; }
  .tt:not(.is-list) .tt-s .ns { display: block; }
  .tt:not(.is-list) .tt-day.is-today { background: rgba(223,255,31,.16); }
  .tt:not(.is-list) .tt-now {
    display: block; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
    top: calc(2.6rem + var(--now) * var(--ppm)); border-top: 3px solid var(--ink);
  }
  .tt:not(.is-list) .tt-now span { position: absolute; right: 0; top: -.8rem; background: var(--ink); color: var(--acid); font-size: .58rem; font-weight: 800; padding: .05rem .25rem; }
}
@container (min-width: 760px) {
  .tt:not(.is-list) .tt-s a { font-size: .74rem; padding: .25rem .4rem; }
  .tt:not(.is-list) .tt-s time { font-size: .68rem; }
  .tt:not(.is-list) .tt-day .dl { display: inline; }
  .tt:not(.is-list) .tt-day .ds { display: none; }
}
.tt-note { margin-top: 1rem; font-size: .9rem; }
.today-line { position: relative; margin: 0; font-weight: 600; }
.today-line b { background: var(--ink); color: var(--acid); padding: .05rem .35rem; }

/* ---------- Membership ---------- */
.term-seg { margin: .4rem 0 .6rem; }
.term-note { font-size: .92rem; font-weight: 600; max-width: 40rem; min-height: 2.8em; }
/* The wrapper scrolls sideways on small phones instead of the whole page */
.tbl-wrap { overflow-x: auto; border: 2px solid var(--ink); background: var(--paper); margin-top: .6rem; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; }
.compare th, .compare td { padding: .65rem .6rem; border-bottom: 1px solid var(--line-l); text-align: center; vertical-align: middle; }
.compare tbody th { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--paper); z-index: 1; min-width: 9.5rem; box-shadow: 2px 0 0 var(--line-l); }
.compare thead td { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.compare thead th { vertical-align: bottom; background: var(--ink); color: var(--paper); border-bottom: 0; padding: .9rem .5rem; }
.compare thead th:nth-child(3) { background: var(--acid); color: var(--ink); }
.compare .pn { display: block; font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.1rem; line-height: 1; margin-bottom: .4rem; }
.compare .price { display: block; font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; font-size: 2rem; line-height: 1; color: var(--acid); }
.compare thead th:nth-child(3) .price { color: var(--ink); }
.compare thead small { display: block; font-size: .72rem; font-weight: 600; opacity: .85; }
.js .compare .nojs-alt { display: none; }
.compare tbody tr:hover th, .compare tbody tr:hover td { background: var(--paper-2); }
.compare tbody td:nth-child(3) { background: rgba(223,255,31,.18); }
.yes { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--acid); border-radius: 50%; font-weight: 900; font-size: .85rem; }
.no { color: var(--mute-l); font-weight: 800; }
.scroll-hint { font-size: .82rem; margin-top: .5rem; }
@media (min-width: 760px) { .scroll-hint { display: none; } }

.calc { margin-top: 1.2rem; }
.calc[hidden] { display: none; }
.calc-grid { display: grid; gap: 1.2rem; margin-top: 1rem; }
.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 2px solid var(--ink); }
.calc-row:first-child { border-top: 2px solid var(--ink); }
.calc-row b { display: block; font-size: 1.05rem; }
.calc-row span { font-size: .88rem; color: var(--mute-l); }
.calc-row .price { color: var(--ink); font-weight: 800; }
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); }
.stepper button {
  -webkit-tap-highlight-color: transparent;
  width: 46px; height: 46px; border: 0; background: transparent; font-size: 1.4rem; font-weight: 800; border-radius: 50%;
}
.stepper button:hover:not(:disabled) { background: var(--acid); }
.stepper button:active:not(:disabled) { transform: scale(.9); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper output { min-width: 1.8rem; text-align: center; font-weight: 900; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.calc-out { background: var(--ink); color: var(--paper); padding: 1.2rem; border: 2px solid var(--ink); align-self: start; box-shadow: 8px 8px 0 var(--acid-2); }
.calc-lines { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .92rem; }
.calc-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line-d); }
.calc-lines small { color: var(--acid); font-weight: 800; margin-left: .3rem; }
.calc-disc { color: var(--acid); font-size: .92rem; margin: .4rem 0; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .8rem 0; }
.calc-total span { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.calc-total b { font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; font-size: 3.2rem; line-height: 1; color: var(--acid); }
.calc-dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 0; font-size: .95rem; }
.calc-dl dd { margin: 0; font-weight: 800; text-align: right; }
.calc-small { font-size: .8rem; color: var(--mute-d); margin: .6rem 0 0; }
.calc-save { margin: .8rem 0 0; padding: .6rem .7rem; background: var(--acid); color: var(--ink); font-weight: 800; font-size: .92rem; }
.calc-empty { margin: 0; }
@media (min-width: 1100px) { .calc-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Free trial wizard ---------- */
.wiz-prog { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); }
.wiz-prog li { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .2rem; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-left: 2px solid var(--ink); }
.wiz-prog li:first-child { border-left: 0; }
.wiz-prog span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--ink); border-radius: 50%; font-size: .75rem; }
.wiz-prog li.is-done { background: var(--ink); color: var(--paper); }
.wiz-prog li.is-done span { border-color: var(--acid); color: var(--acid); }
.wiz-prog li[aria-current="step"] { background: var(--acid); }
.no-js .wiz-prog { display: none; }
.wiz-legend { font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; text-transform: uppercase; font-size: 1.8rem; line-height: 1; margin-bottom: 1rem; padding: 0; outline: none; }
.wiz-legend:focus-visible { outline: 3px solid var(--ink); }
.wiz-sub { display: block; font: 700 .95rem var(--f-body); text-transform: none; color: var(--mute-l); margin-top: .3rem; }
.wiz [data-step] { margin-bottom: 1rem; }
.wiz .err { margin-top: .8rem; }
.wiz-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.wiz-nav[hidden] { display: none; }
.wiz-nav [data-next] { margin-left: auto; min-width: 9rem; }
@media (min-width: 700px) { .choices--3 { grid-template-columns: repeat(3, 1fr); } }
.msg-preview { font: .92rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: var(--paper-2); }
.field > b { font-weight: 800; }

/* ---------- Contact ---------- */
.steps .km { display: inline-block; margin-left: .4rem; font-size: .75rem; font-weight: 800; background: var(--ink); color: var(--acid); padding: .1rem .4rem; vertical-align: middle; }
.travel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--ink); border: 2px solid var(--ink); margin-top: 1.6rem; }
.travel div { background: var(--paper); padding: .8rem; text-align: center; }
.travel b { display: block; font-family: var(--f-display); font-weight: 700; font-synthesis: none; font-stretch: condensed; font-size: 1.9rem; line-height: 1; }
.travel span { font-size: .82rem; color: var(--mute-l); }
.finder[hidden] { display: none; }
.finder-out { font-weight: 800; min-height: 1.6em; margin: .8rem 0 0; }
.coach-mini .pic svg, .coach .pic svg, .coach-box .pic svg { width: 100%; height: 100%; }
.wiz, .tt-day { scroll-margin-top: 4.2rem; }