/* Components and layout. Tokens only (npm run check:design); logical properties only (RTL).
   Spec: design_guide_lines.md. Breakpoints: base, then 37.5em, then 56.25em and 37.5em tall. */

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The root keeps the reader's font size (rem follows it, and meta text-scale on Android): never set a font size on html. */
html {
  background: var(--c-bg);
  color: var(--c-ink);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--c-bg);
  font: 400 var(--fs-body)/var(--lh-body) var(--f-body);
  letter-spacing: 0;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
h1, h2, h3 { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.community :focus-visible { outline-color: var(--c-yellow); }
/* Skip link (s46, legal check): first in the tab order, hidden until keyboard focus, then a yellow pill
   at the top inline-start corner above the bar and the ☰ button. At rest the markup's .vh class keeps it
   a 1px box, so it never widens the page (proof legs 4b/4d/4e, 180 px and 300 % text); on focus it wraps
   within the gutters. */
.skip-link {
  inset-block-start: max(var(--s4), var(--safe-top));
  inset-inline-start: var(--pad-inline);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-solid);
  text-decoration: none;
}
.skip-link:focus {
  clip-path: none;
  z-index: var(--z-skip);
  width: auto;
  height: auto;
  overflow: visible;
  white-space: normal;
  line-height: var(--lh-body);
  max-inline-size: calc(100% - 2 * var(--pad-inline));
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-block: var(--s2);
  padding-inline: var(--s4);
  border-radius: var(--radius-pill);
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-inline); }
.display { font-family: var(--f-display); font-weight: 700; line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); margin-block-end: var(--s5); }
.lead { font-weight: 500; max-width: var(--measure-lead); }
section { padding-block: var(--s8); }
.rule { border-block-start: 2px solid var(--c-ink); }

/* ---- sample chip ---- */
.sample {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: var(--s2);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-chip);
  background: var(--c-ink);
  color: var(--c-paper);
  font: 500 var(--fs-small)/var(--lh-solid) var(--f-body);
}

/* ---- buttons (every button is a WhatsApp link) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--cta-h);
  padding-inline: var(--s6);
  padding-block: var(--s3);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-pill);
  background: var(--c-yellow);
  color: var(--c-ink);
  font: 700 var(--fs-btn)/var(--lh-solid) var(--f-body);
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
}
.btn-inv { background: var(--c-ink); color: var(--c-paper); }
.btn:active { transform: translateY(1px); }
.icon { width: var(--icon); height: var(--icon); flex: none; }

/* ---- text link ---- */
.text-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: var(--s1);
}

@media (hover: hover) {
  .btn:hover { filter: brightness(.94); }
  .text-link:hover, .footer-link:hover { text-decoration-thickness: 3px; }
}

/* ---- header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-block: var(--s4);
}
.logo-link { display: inline-flex; align-items: center; min-height: var(--tap); }
.logo { height: var(--logo-h); width: auto; }
.ig {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font: 500 var(--fs-small)/var(--lh-solid) var(--f-body);
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere; /* s35: at 320 px with 300% text "@may_barmuha" was wider than the header and widened the page */
}

/* ---- hero ---- */
.hero { padding-block: var(--s5) var(--s7); }
.hero-title { font-size: var(--fs-hero); }
.hero-title span { display: block; }
.hero-title .hl {
  display: inline-block;
  margin-block: var(--s1);
  padding-inline: var(--s2);
  background: var(--c-yellow);
}
.hero .lead { margin-block: var(--s5); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-end: var(--s5); }
.tags li {
  padding: var(--s2) var(--s3);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-pill);
  font: 700 var(--fs-small)/var(--lh-solid) var(--f-body);
}
.hero .photo { margin-block-start: var(--s7); }

/* ---- photo slot (placeholder until May's photos arrive) ---- */
.photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4/5;
  padding: var(--s5);
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-paper);
}
.photo::before {
  content: "";
  position: absolute;
  inset: var(--s4);
  border: 1px solid var(--c-muted);
}
.photo-wide { aspect-ratio: 16/10; }
.photo-tag {
  position: absolute;
  inset-block-start: var(--s5);
  inset-inline-start: var(--s5);
  padding: var(--s2) var(--s3);
  background: var(--c-yellow);
  color: var(--c-ink);
  font: 700 var(--fs-small)/var(--lh-solid) var(--f-body);
}
.photo-cap { position: relative; font: 500 var(--fs-small)/var(--lh-caption) var(--f-body); }

/* ---- real photo (design_guide_lines.md § Images; the ink slot is the skeleton) ---- */
.photo-real::before { content: none; }
.photo-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.photo-img[hidden] { display: none; }
/* The caption box spans the slot's full width (negative margin, matching padding keeps the text in
   place), so its scrim never reaches past the caption sideways and nothing reads as clipped text. */
.photo-real .photo-cap { z-index: 1; flex: 1; margin-inline: calc(-1 * var(--s5)); padding-inline: var(--s5); }
/* The scrim: solid behind the caption box plus --s5, fading to transparent above it. */
.photo-real .photo-cap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-2 * var(--s5)) 0 calc(-1 * var(--s5));
  background: linear-gradient(to bottom, transparent, var(--c-scrim) var(--s5));
}

/* ---- hero video (design_guide_lines.md § Images → Hero video; docs/specs/hero-video.md) ----
   The video lies under the photo while it starts (WebKit never autoplays a hidden video) and is raised on its
   first frames ([data-clip="on"]). s45b (founder): tap the video to pause/play (a centred ▶ only while paused);
   the sound button sits in the top inline-start corner; no caption shows while it plays; the slot keeps its
   aspect-ratio.
   isolation keeps the layers inside. */
.photo-clip { isolation: isolate; }
.photo-clip picture { position: absolute; inset: 0; }
.photo-video { position: absolute; inset: 0; z-index: 0; }
.photo-video video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.photo-clip .photo-img { z-index: 1; }
.photo-clip[data-clip="on"] .photo-video { z-index: 1; }
.photo-clip[data-clip="on"] .photo-img { visibility: hidden; }
.photo-clip .photo-cap { z-index: 2; }
/* No caption while the clip shows (founder, s34); the photo's caption returns with the still. */
.photo-clip[data-clip="on"] .photo-cap { display: none; }
/* Not rendered without the script or when the clip will not play; invisible once it is starting. */
.clip-ctrls { display: none; }
/* s45b (founder): the controls cover the slot. Play/pause is the whole video (.clip-face); the sound button keeps
   the top inline-start corner, above the face. */
.clip-ctrls {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.photo-clip[data-clip-ready] .clip-ctrls { display: block; visibility: hidden; }
.photo-clip[data-clip="on"] .clip-ctrls { visibility: visible; }
/* s45 (founder): reduced motion keeps the photo and its caption, with only the play button offered; the clip
   starts on that tap and the sound button comes with it (docs/reviews/android-video-s45.md). */
.photo-clip[data-clip="offer"] .clip-ctrls { visibility: visible; }
.photo-clip[data-clip="offer"] [data-clip-act="sound"] { display: none; }
/* s45b: the offer shows the clip's opening frame (the video's poster) over the photo, without the photo's caption. */
.photo-clip[data-clip-frame] .photo-video { z-index: 1; }
.photo-clip[data-clip-frame] .photo-img { visibility: hidden; }
.photo-clip[data-clip-frame] .photo-cap { display: none; }
/* Tap anywhere on the video: pause / play. A centred ▶ ink circle only while paused; nothing while it plays. */
.clip-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--c-paper);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
.clip-face .clip-lbl[data-for="play"] {
  inline-size: var(--s8);
  block-size: var(--s8);
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-paper);
  border: 2px solid transparent;
}
.clip-face .clip-lbl[data-for="play"] .clip-ico { inline-size: var(--s6); block-size: var(--s6); }
.clip-face .clip-lbl[data-for="pause"] .clip-ico { display: none; }
/* Keyboard focus (code review s45b M1): show what Enter would do — the ⏸ in the same centred circle. */
.clip-face:focus-visible .clip-lbl[data-for="pause"]:not([aria-hidden="true"]) {
  inline-size: var(--s8);
  block-size: var(--s8);
  border-radius: 50%;
  background: var(--c-ink);
  border: 2px solid transparent;
}
.clip-face:focus-visible .clip-lbl[data-for="pause"] .clip-ico { display: block; inline-size: var(--s6); block-size: var(--s6); }
/* Keyboard focus on a picture that may move: a yellow ring just inside the slot's edge, on an ink band
   (--s2 inset shadow), so it reads 11.46:1 on every frame. */
.clip-face:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: calc(-1 * var(--s1)); box-shadow: inset 0 0 0 var(--s2) var(--c-ink); }
.clip-ctrls .clip-btn {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-start: var(--s3);
  z-index: 1;
  /* s45c (founder): see-through. 55% ink keeps the white icon ≥ 4:1 even over a white frame. */
  background: var(--c-glass);
}
/* Solid again on keyboard focus, so the yellow ring stays 11.46:1. */
.clip-ctrls .clip-btn:focus-visible { background: var(--c-ink); }
/* A 44 px opaque ink circle (opaque: HDR highlights would show through a see-through fill). The transparent
   border is the edge in forced colours. Both label pairs share one grid cell. */
.clip-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  padding: 0;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-paper);
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
.clip-ico { inline-size: var(--s5); block-size: var(--s5); fill: currentColor; }
.clip-lbl { grid-area: 1 / 1; }
.clip-lbl { display: grid; place-items: center; }
.clip-lbl[aria-hidden="true"] { visibility: hidden; }
/* The only inside ring: the ground around these buttons is moving video (2px border + 3px ink gap). */
.clip-btn:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: -5px; }

/* ---- quote ---- */
.quote blockquote {
  max-width: var(--measure-quote);
  padding-inline-start: var(--s5);
  border-inline-start: var(--s2) solid var(--c-yellow);
  font: 500 var(--fs-quote)/var(--lh-quote) var(--f-body);
  overflow-wrap: anywhere; /* at 320 px with 300% text one word is wider than the column; the page (and the fixed bar) grew sideways */
}
.quote figcaption {
  margin-block-start: var(--s4);
  padding-inline-start: calc(var(--s2) + var(--s5));
  color: var(--c-muted);
  font: 500 var(--fs-small)/var(--lh-caption) var(--f-body);
}

/* ---- why ---- */
.why-list { counter-reset: why; }
.why-list li {
  counter-increment: why;
  display: grid;
  grid-template-columns: var(--s6) 1fr;
  gap: var(--s4);
  padding-block: var(--s5);
  border-block-end: 1px solid var(--c-line);
}
/* s35: a long word ran 5 px past the gutter at 320 px with 300% text. Text only: on the li the "01" numbers split at 200%. */
.why-title, .why-list p { overflow-wrap: anywhere; }
.why-list li::before {
  content: "0" counter(why);
  content: "0" counter(why) / "";
  font: 700 var(--fs-h3)/var(--lh-solid) var(--f-display);
}
.why-title { display: block; font-weight: 700; }
.why-list p { color: var(--c-muted); }

/* ---- band (yellow, with the cropped giant mark) ---- */
.band {
  position: relative;
  overflow: hidden;
  padding-block: var(--s8) max(calc(var(--band-tail) * 2), calc(var(--fs-giant) * var(--giant-visible)));
  background: var(--c-yellow);
}
.band-inner { position: relative; z-index: var(--z-band-text); }
.band-inner > * { max-width: var(--measure-band); }
.band p { margin-block-end: var(--s6); font-weight: 500; }
.giant {
  position: absolute;
  inset-block-end: calc(var(--fs-giant) * var(--giant-drop));
  inset-inline-start: calc(var(--pad-inline) * -1);
  color: var(--c-ink);
  font-size: var(--fs-giant);
  pointer-events: none;
  user-select: none;
}

/* ---- classes ---- */
.class-list li {
  padding-block: var(--s4);
  border-block-end: 1px solid var(--c-line);
}
.class-list p { overflow-wrap: anywhere; } /* s35: a long word ran 10 px past the gutter at 320 px with 300% text (h3 already wraps) */
h3 { font: 700 var(--fs-h3)/var(--lh-display-loose) var(--f-display); overflow-wrap: anywhere; }
.class-list p { color: var(--c-muted); }

/* ---- example week ---- */
.note { margin-block-start: var(--s4); font-weight: 500; }
.week-table { width: 100%; margin-block-start: var(--s5); border-collapse: collapse; }
.week-cap {
  caption-side: top;
  margin-block-end: var(--s3);
  color: var(--c-ink);
  font: 500 var(--fs-body)/var(--lh-body) var(--f-body);
  text-align: start;
}
.week-table th, .week-table td {
  padding-block: var(--s3);
  border-block-end: 1px solid var(--c-line);
  text-align: start;
  vertical-align: top;
}
.week-table th { width: var(--day-col); font: 700 var(--fs-h3)/var(--lh-solid) var(--f-display); }
.slot { display: flex; flex-wrap: wrap; gap: var(--s3); overflow-wrap: anywhere; }
.slot b { font-weight: 700; }
/* ---- the real week (ADR-0003) as side-scrolling day columns (session 40; § Week table → Live week columns) ---- */
.week-date { display: block; margin-block-start: var(--s1); font: 500 var(--fs-small)/var(--lh-solid) var(--f-body); }
/* .sample's inline-block would beat the browser's own [hidden] rule: only today's label may show. */
.today-chip[hidden] { display: none; }
.wk { min-width: 0; margin-block-start: var(--s5); }
.wk[hidden], .wk-arrows[hidden], .wk-day[hidden] { display: none; }
.wk-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-end: var(--s3); }
.wk-bar .week-cap { margin: 0; }
.wk-hint { color: var(--c-muted); }
.wk-arrows { display: flex; gap: var(--s2); }
.wk-arrow {
  min-inline-size: var(--tap);
  min-block-size: var(--tap);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-pill);
  background: var(--c-paper);
  color: var(--c-ink);
  cursor: pointer;
}
.wk-arrow .icon { display: block; margin: auto; } /* inline SVG: Heebo has no ← → (session 44) */
.wk-arrow[aria-disabled="true"] { border-color: var(--c-line); color: var(--c-muted); cursor: default; }
.wk-scroll {
  position: relative; /* keeps the absolute .vh day names inside: otherwise they widen the page (mockup E, 797px) */
  container: wk / inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s3);
  scrollbar-color: var(--c-ink) transparent;
}
.wk-days { display: flex; gap: var(--s3); }
.wk-day {
  flex: 0 0 var(--day-w);
  flex-basis: max(var(--day-min), calc((100cqi - 2 * var(--s3)) / 2.3)); /* a column with a longer one-line slot grows to it (flex min-content) */
  scroll-snap-align: start;
  border-block-start: 2px solid var(--c-ink);
  background: var(--c-paper);
  padding: var(--s3);
}
.wk-day.is-today { background: var(--c-yellow); }
.wk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s2);
  margin-block-end: var(--s3);
  font: 700 var(--fs-h3)/var(--lh-solid) var(--f-display);
}
.wk-slots { display: grid; gap: var(--s3); }
/* One line per slot, smaller text (founder, session 43): the day column grows to its longest slot. */
.wk-slot { display: flex; gap: var(--s2); font-size: var(--fs-small); white-space: nowrap; padding-block-start: var(--s2); border-block-start: 1px solid var(--c-line); }
.wk-slot b { font-weight: 700; }
/* Two days + a part of the next on a phone, three + a part from 30rem. Container queries cannot read var():
   30rem and 14.75rem (= 2 × --day-min + --s3) are written out (design_guide_lines.md § Live week columns). */
@container wk (min-width: 30rem) {
  .wk-day { flex-basis: max(var(--day-min), calc((100cqi - 3 * var(--s3)) / 3.3)); }
}
/* Reflow (WCAG 1.4.10): when two days no longer fit (big text, zoom), the days stack and the slots wrap again. */
@container wk (max-width: 14.75rem) {
  .wk-days { flex-direction: column; }
  .wk-day { flex-basis: auto; }
  .wk-slot { flex-wrap: wrap; white-space: normal; overflow-wrap: anywhere; }
}

/* ---- the section menu (session 40, home page only; § Section menu) ---- */
html:has(.menu-btn) { scroll-padding-block-start: var(--menu-clear); }
html:has(.menu[open]) { overflow: hidden; }
.site-header:has(.menu-btn) { padding-inline-end: calc(var(--pad-inline) + var(--tap) + var(--s2)); }
.menu-btn, .menu-close {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.menu-btn[hidden] { display: none; }
.menu-btn {
  position: fixed;
  z-index: var(--z-menu-btn);
  inset-block-start: max(var(--s4), var(--safe-top));
  inset-inline-end: max(var(--pad-inline), calc((100% - var(--max)) / 2 + var(--pad-inline)));
  border: 2px solid var(--c-paper);
  background: var(--c-ink);
  color: var(--c-paper);
}
/* The one shadow on the site: a focus ring, not elevation (§ Shadows). Yellow shows on ink, the ink band on light and yellow. */
.menu-btn:focus-visible { outline-color: var(--c-yellow); box-shadow: 0 0 0 2px var(--c-paper), 0 0 0 8px var(--c-ink); }
.menu-close { background: var(--c-paper); color: var(--c-ink); }
.menu-btn .icon, .menu-close .icon { inline-size: var(--icon); block-size: var(--icon); }
.menu {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  block-size: var(--screen-h);
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  border: 0;
  padding: max(var(--s4), var(--safe-top)) var(--pad-inline) max(var(--s5), var(--safe-bottom));
  overscroll-behavior: contain;
  scroll-padding-block-start: calc(var(--tap) + var(--s5));
  background: var(--c-ink);
  color: var(--c-paper);
}
.menu[open] { display: flex; flex-direction: column; gap: var(--s5); }
.menu::backdrop { background: var(--c-scrim); }
.menu :focus-visible { outline-color: var(--c-yellow); }
.menu-top {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  background: var(--c-ink);
}
.menu-h { margin: 0; font: 500 var(--fs-small)/var(--lh-solid) var(--f-body); color: var(--c-muted-inv); }
.menu-link {
  display: flex;
  align-items: center;
  min-height: var(--cta-h);
  padding-block: var(--s2);
  border-block-end: 1px solid var(--c-muted-inv);
  font: 700 var(--fs-h3)/var(--lh-display) var(--f-display);
  color: var(--c-paper);
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (min-height: 37.5em) {
  .menu-link { font-size: var(--fs-h2); }
}
.menu-cta { margin-block-start: auto; }
.menu-cta .btn { inline-size: 100%; max-inline-size: none; }

/* ---- prices ---- */
.price-grid { display: grid; gap: var(--s4); }
.price {
  display: grid;
  gap: var(--s2);
  padding: var(--s5);
  border: 2px solid var(--c-ink);
  background: var(--c-paper);
}
.price p { color: var(--c-muted); }
.price .amt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s1);
  color: var(--c-ink);
  font: 700 var(--fs-h2)/var(--lh-price) var(--f-display);
  overflow-wrap: anywhere;
}
.amt small { font: 500 var(--fs-small)/var(--lh-solid) var(--f-body); }
/* The selling colour (founder, session 43): yellow fill, ink text (11.46:1), the 2px ink border carries the
   card's edge on the light ground. --c-muted is forbidden on yellow, so every line is ink. */
.price-featured { background: var(--c-yellow); color: var(--c-ink); }
.price-featured p { color: var(--c-ink); }
.price .per-class { color: var(--c-ink); font-weight: 700; }
/* The badge: the sample chip's ink shape, so it reads on yellow; text, never colour alone (WCAG 1.4.1). */
.price .badge {
  justify-self: start;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-chip);
  background: var(--c-ink);
  color: var(--c-paper);
  font: 700 var(--fs-small)/var(--lh-solid) var(--f-body);
}

/* ---- folds: the class descriptions and the teen-girls cards open from a small arrow (session 43) ---- */
.class-item summary, .more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-block-size: var(--tap);
  list-style: none;
  cursor: pointer;
}
.class-item summary::-webkit-details-marker, .more summary::-webkit-details-marker { display: none; }
/* Inline SVG: self-hosted Heebo has no ▾ (session 44), so a text glyph fell back to each phone's own font. */
.chev { flex: none; inline-size: var(--fs-btn); block-size: var(--fs-btn); }
details[open] > summary .chev { transform: rotate(180deg); }
.class-item p { margin-block-start: var(--s2); }
.more { margin-block-start: var(--s5); border-block: 2px solid var(--c-ink); }
.more summary { font: 700 var(--fs-h3)/var(--lh-display-loose) var(--f-display); overflow-wrap: anywhere; }
.more[open] summary { margin-block-end: var(--s4); }
.more[open] { padding-block-end: var(--s4); }

/* ---- community (the one ink section) ---- */
.community { background: var(--c-ink); color: var(--c-paper); }
.community .lead { margin-block-end: var(--s6); color: var(--c-muted-inv); }
.community .photo { background: var(--c-ink-2); }
.tiles { display: grid; gap: var(--s4); }

/* ---- final call ---- */
.final { background: var(--c-yellow); }
.final p { max-width: var(--measure-lead); margin-block-end: var(--s6); }

/* ---- footer ---- */
.site-footer {
  display: grid;
  gap: var(--s3);
  padding-block: var(--s7);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-inline-size: var(--tap); /* short words ("פרטיות") still get a full-size target */
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: var(--s1);
}
.site-footer p { color: var(--c-muted); }

/* ---- sticky WhatsApp bar ---- */
/* Without JS: a normal block after the footer. html.js (site.js, only when IntersectionObserver and ResizeObserver exist) fixes it. */
.sticky {
  display: flex;
  justify-content: center;
  padding-block: var(--s3) calc(var(--s3) + var(--safe-bottom));
  padding-inline: var(--pad-inline);
  background: linear-gradient(to top, var(--bar-fade) 70%, transparent);
}
/* The fade takes the ground of the section under the bar (site.js sets data-ground; JS only). */
.sticky[data-ground="yellow"] { --bar-fade: var(--c-yellow); }
.sticky[data-ground="ink"] { --bar-fade: var(--c-ink); }
.sticky[data-ground="ink"] :focus-visible { outline-color: var(--c-yellow); }
.sticky .btn { width: 100%; max-width: var(--cta-max); padding-inline: var(--s5); overflow-wrap: anywhere; } /* s35: 320 px + 300% text: one word is wider than the button; break it rather than spill */
html.js { scroll-padding-block-end: var(--bar-h); }
html.js body { padding-block-end: var(--bar-h); }
html.js .sticky {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-bar);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-bar) ease, visibility 0s linear var(--dur-bar);
}
html.js .sticky.is-shown {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-bar) ease, visibility 0s;
}

/* ---- text pages (accessibility statement, 404) ---- */
.text-page { padding-block: var(--s8); }
.text-page h1 { font-size: var(--fs-h2); margin-block-end: var(--s5); }
.text-page h2 { margin-block: var(--s6) var(--s3); font: 700 var(--fs-h3)/var(--lh-display-loose) var(--f-display); }
.text-page p, .text-page ul { max-width: var(--measure-text); }
.text-page p, .text-page li { overflow-wrap: anywhere; } /* an email address in running text wraps at 200% */
.text-page p + p { margin-block-start: var(--s5); }
.text-page ul { display: grid; gap: var(--s2); padding-inline-start: var(--s5); list-style: disc; }
.text-page ul + p { margin-block-start: var(--s5); }
.contact-list a { display: inline-flex; align-items: center; min-height: var(--tap); max-width: 100%; overflow-wrap: anywhere; }

/* ---- breakpoints ---- */
@media (min-width: 37.5em) {
  .hero .photo { aspect-ratio: 3/2; }
}

@media (min-width: 56.25em) and (min-height: 37.5em) {
  .hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s7); align-items: end; }
  .hero .photo { margin-block-start: 0; aspect-ratio: 4/5; }
  .split { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s8); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .class-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  /* 3 cards a row on 6 tracks, each card spans 2, so a short last row is centred (QA minor, session 44). */
  .price-grid { grid-template-columns: repeat(6, 1fr); }
  .price-grid > * { grid-column: span 2; }
  .price-grid > :nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
  .price-grid > :nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
  .week-table, .wk { margin-block-start: 0; }
  .band { padding-block-end: max(calc(var(--band-tail) * 3), calc(var(--fs-giant) * var(--giant-visible))); }
}

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