/* ============================================================
   ROSE ROSE ROSE — "The new-driver sign"
   ------------------------------------------------------------
   The palette is lifted from Rose's own photos: the yellow of the
   נהג/ת חדש/ה sign every student holds up, Rose's rose, and a warm
   white page. Joyful and young (Rose asked for "כיף, חוויה, שמחה"),
   never dark and never generic.

   Mobile first: base styles ARE the phone, every query is min-width.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  --paper: #FFF8EF;
  --white: #FFFFFF;
  --blush: #FFE7ED;
  --sun: #FFD43B;          /* the new-driver sign */
  --sun-soft: #FFF3C2;
  --ink: #1D1719;
  --ink-2: #3A3135;
  --muted: #62575B;        /* 6.6:1 on paper */
  --line: #EEDFD2;
  --rose: #E8336D;         /* fills and accents only — never body text */
  --rose-ink: #B8144E;     /* rose text, and fills under white text (6.2:1) */
  --rose-deep: #7C0C34;
  --wa: #25D366;
  --wa-ink: #05361B;

  --font-display: "Secular One", "Arial Hebrew", sans-serif;
  --font-body: "IBM Plex Sans Hebrew", "Arial Hebrew", system-ui, sans-serif;

  --shell: 72rem;
  --shell-narrow: 46rem;
  --gutter: 20px;
  --header-h: 64px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow: 0 18px 40px -22px rgb(29 23 25 / .35);
  --shadow-lg: 0 34px 70px -34px rgb(29 23 25 / .5);
  --ease: cubic-bezier(.22, 1, .36, 1);

  --z-menu: 90;
  --z-header: 100;
  --z-dock: 80;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: 0; }
h1, h2 { font-family: var(--font-display); line-height: 1.12; text-wrap: balance; }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--rose-ink); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 700; }

::selection { background: var(--sun); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--rose-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: -80px;
  z-index: calc(var(--z-header) + 1);
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nowrap { white-space: nowrap; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }
/* Arrows point "forward", which in Hebrew is to the left. */
.icon--arrow { inline-size: 1.1em; block-size: 1.1em; }
.icon--ext { inline-size: .95em; block-size: .95em; }

/* ---------- 3. Type furniture ---------- */

/* Section labels: a small pill in the display face, led by three dots —
   רוז רוז רוז, one beat each. The dots are drawn at fixed positions so none
   is ever clipped. */
.eyebrow {
  --dot: var(--rose);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-end: .9rem;
  padding: .3rem .85rem .35rem;
  border-radius: 999px;
  background: var(--blush);
  color: var(--rose-ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
}
.eyebrow::before {
  content: "";
  flex: none;
  inline-size: 22px;
  block-size: 6px;
  background:
    radial-gradient(circle at 3px 3px, var(--dot) 2.5px, transparent 3px),
    radial-gradient(circle at 11px 3px, var(--dot) 2.5px, transparent 3px),
    radial-gradient(circle at 19px 3px, var(--dot) 2.5px, transparent 3px);
}

.lead { margin-block-start: .8rem; font-size: 1.1rem; color: var(--muted); max-width: 36rem; }

h2 { font-size: clamp(1.95rem, 7.2vw, 3.25rem); }
h2 mark { background: none; color: var(--rose-ink); }

/* The signature mark: a word set on the yellow new-driver sign. */
.sign-word { display: block; margin-block-start: .12em; }
.sign-word > span {
  display: inline-block;
  padding: .02em .3em .1em;
  background: var(--sun);
  color: var(--ink);
  border-radius: .1em;
  box-shadow: inset 0 0 0 .055em var(--ink), 0 .12em 0 rgb(29 23 25 / .12);
  transform: rotate(-2.5deg);
  transform-origin: 100% 50%;
}

/* ---------- 4. Buttons & links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-block-size: 54px;
  padding: 0 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.button:hover { box-shadow: var(--shadow); }
.button:active { transform: scale(.97); }

.button--wa { background: var(--wa); color: var(--wa-ink); }
.button--rose { background: var(--rose-ink); color: var(--white); }
.button--rose:hover { background: var(--rose-deep); }
.button--ink { background: var(--ink); color: var(--paper); }
.button--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.button--outline:hover { background: var(--ink); color: var(--paper); }
.button--ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
.button--small { min-block-size: 48px; padding: 0 1.1rem; font-size: 1rem; }
.button--block { inline-size: 100%; }

.chip-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-block-size: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--blush);
  color: var(--rose-ink);
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.chip-link:hover { background: #FFD5E0; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  block-size: var(--header-h);
  padding-inline: var(--gutter);
  background: rgb(255 248 239 / .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 28px -24px rgb(29 23 25 / .45); }

.brand { display: flex; align-items: center; min-block-size: 44px; }
.brand img { inline-size: 124px; block-size: auto; }

.nav-desktop { display: none; }

.header-actions { display: flex; align-items: center; gap: .4rem; }

.pill-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 0 .9rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}
.pill-link.is-current { background: var(--ink); color: var(--paper); }

.header-wa {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  background: var(--wa);
  color: var(--wa-ink);
  text-decoration: none;
  font-weight: 700;
}
.header-wa span { display: none; }

.menu-button {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.menu-lines { display: grid; gap: 6px; }
.menu-lines span {
  display: block;
  inline-size: 22px;
  block-size: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease);
}
.menu-button[aria-expanded="true"] .menu-lines span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-lines span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* The menu opens BELOW the header, so the close button is always reachable. */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--paper);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; transform: none; }
.menu-links a {
  display: flex;
  align-items: center;
  min-block-size: 60px;
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink);
  text-decoration: none;
}
.menu-actions { display: grid; gap: .6rem; }

/* ---------- 6. Dock ---------- */
.dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-dock);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: .5rem;
  padding: .6rem var(--gutter) max(.6rem, env(safe-area-inset-bottom));
  background: rgb(255 248 239 / .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.dock.is-visible { transform: none; }
.dock .button { min-block-size: 50px; padding-inline: .8rem; font-size: 1rem; }
.has-dock .site-footer { padding-block-end: calc(5.5rem + env(safe-area-inset-bottom)); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  padding-block: 1.25rem 3.5rem;
  overflow: hidden;
}
.hero::before {
  /* one soft blush light behind the photos — the only gradient on the page */
  content: "";
  position: absolute;
  inset-inline-end: -30%;
  inset-block-end: -10%;
  inline-size: 110%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, #FFD9E3 0%, rgb(255 217 227 / 0) 100%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 1.25rem; }


.hero .eyebrow { font-size: .95rem; }
.hero h1 { font-size: clamp(2.9rem, 13.5vw, 5.6rem); line-height: 1.08; }
.hero-lede { margin-block-start: .25rem; font-size: 1.12rem; color: var(--ink-2); max-width: 30rem; }

.hero-actions { display: grid; gap: .6rem; margin-block-start: 1.5rem; }

.proof { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-block-start: 1.25rem; }
.proof li { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.proof .icon { inline-size: 1.05em; block-size: 1.05em; color: var(--rose-ink); }

/* Stories — real students, the way they share it themselves. */
.stories {
  position: relative;
  aspect-ratio: 4 / 5;
  inline-size: 100%;
  max-inline-size: min(460px, calc(62svh * .8));
  justify-self: center;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.stories-track { position: absolute; inset: 0; }
.story {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.story.is-active { opacity: 1; z-index: 1; }
.story img, .story video { inline-size: 100%; block-size: 100%; object-fit: cover; }

.stories::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 90px;
  z-index: 2;
  background: linear-gradient(rgb(0 0 0 / .38), transparent);
  pointer-events: none;
}

.stories-bars {
  position: absolute;
  inset: 12px 14px auto;
  z-index: 3;
  display: flex;
  gap: 4px;
}
.stories-bars span {
  flex: 1;
  block-size: 3px;
  border-radius: 3px;
  background: rgb(255 255 255 / .38);
  overflow: hidden;
}
.stories-bars i {
  display: block;
  block-size: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 100% 50%;   /* RTL: fills from the right */
}
.stories-bars .is-done i { transform: scaleX(1); }

.story-sticker {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-end: 18px;
  z-index: 2;
  padding: .25rem .8rem .35rem;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--ink), 0 8px 18px -8px rgb(0 0 0 / .5);
  transform: rotate(-3deg);
}

.stories-tap {
  position: absolute;
  inset-block: 0;
  z-index: 3;
  inline-size: 38%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stories-tap--prev { inset-inline-start: 0; }
.stories-tap--next { inset-inline-end: 0; }
.stories-tap:focus-visible { outline-offset: -6px; }

.stories-pause {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / .32);
  color: #fff;
  cursor: pointer;
}
.stories-pause .icon { inline-size: 18px; block-size: 18px; }
.stories-pause .when-paused { display: none; }
.stories-pause[aria-pressed="true"] .when-playing { display: none; }
.stories-pause[aria-pressed="true"] .when-paused { display: block; }
/* Without script there is nothing to pause, and no bars to follow. */
html:not(.js) .stories-pause,
html:not(.js) .stories-tap,
html:not(.js) .stories-bars { display: none; }

/* ---------- 8. Sections ---------- */
.section { padding-block: clamp(3.5rem, 10vw, 6.5rem); }
.section--sun { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.25rem, 6vw, 4.5rem); }
.section--sun .section-head { margin-block-end: 1rem; }
.section--sun .eyebrow, .section--blush .eyebrow { background: var(--white); }
.section--sun { background: var(--sun-soft); }
.section--blush { background: var(--blush); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h2 mark { color: var(--sun); }
.section--ink .eyebrow, .section--rose .eyebrow { --dot: var(--sun); background: rgb(255 255 255 / .1); color: var(--sun); }
.section--rose { background: var(--rose-ink); color: var(--white); }
.section--rose h2 mark { color: var(--sun); }
.section--rose .lead { color: #FFE3EC; }

.section-head { margin-block-end: 2rem; max-width: 44rem; }

/* Why */
.why-grid { display: grid; gap: .6rem; }
.why-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .85rem;
  padding: 1.1rem 1.15rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.why-num {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  grid-row: span 2;
  border-radius: 10px;
  background: var(--sun);
  box-shadow: inset 0 0 0 2px var(--ink);
  font-size: 1.3rem;
  transform: rotate(-4deg);
}
.why-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; align-self: center; }
.why-card p { margin-block-start: .2rem; color: var(--muted); font-size: 1rem; }

/* Wall of students — a sideways scroll, like a camera roll. */
.wall {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(64vw, 260px);
  gap: 14px;
  padding: 14px var(--gutter) 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.wall::-webkit-scrollbar { display: none; }
.wall:focus-visible { outline-offset: -3px; }
.wall-item {
  scroll-snap-align: start;
  padding: 7px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.wall-item:nth-child(odd) { transform: rotate(-1.4deg); }
.wall-item:nth-child(even) { transform: rotate(1.2deg) translateY(6px); }
.wall-item img, .wall-video video {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  background: var(--line);
}
.wall-video { position: relative; }
.wall-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  inline-size: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: rgb(29 23 25 / .18);
  color: var(--ink);
  cursor: pointer;
}
.wall-play .icon {
  inline-size: 64px;
  block-size: 64px;
  padding: 18px 16px 18px 20px;
  border-radius: 999px;
  background: var(--sun);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.wall-play[hidden] { display: none; }

/* Cars */
.cars { display: grid; gap: .8rem; }
.car {
  position: relative;
  display: block;
  gap: 1.1rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.car-glyph {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  inline-size: 60px;
  block-size: 60px;
  padding: 8px;
  border-radius: 16px;
  background: var(--blush);
  color: var(--rose-ink);
}
.car-glyph .glyph-hi { fill: var(--sun); stroke: var(--ink); stroke-width: 3; }
.car-glyph .glyph-hi-text { fill: var(--ink); }
.car-track {
  display: inline-block;
  padding: .05rem .65rem;
  margin-block-end: .3rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .9rem;
  font-weight: 700;
}
.car h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; }
.car p:last-child { margin-block-start: .2rem; color: var(--muted); font-size: 1rem; }

/* Steps */
.steps { display: grid; gap: .7rem; counter-reset: step; }
.step {
  padding: 1.2rem 1.25rem 1.3rem;
  background: var(--white);
  border-radius: var(--r-md);
}
.step-head { display: flex; align-items: center; gap: .75rem; margin-block-end: .45rem; }
.step-num {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--sun);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.step h3 { font-size: 1.2rem; }
.step > p { color: var(--muted); }
.step > .chip-link, .step > .button { margin-block-start: .85rem; }
.step--go { box-shadow: inset 0 0 0 2.5px var(--rose-ink); }
.step--go .step-num { background: var(--rose-ink); color: var(--white); }

.age-check { margin-block-start: .9rem; padding-block-start: .9rem; border-block-start: 1px dashed var(--line); }
.age-check label { display: block; margin-block-end: .4rem; font-weight: 700; font-size: .95rem; }
.age-row { display: flex; gap: .5rem; }
.age-row input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: 0 .8rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 16px;
}
.age-result:not(:empty) { margin-block-start: .6rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--sun-soft); font-weight: 600; }

/* Prices */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem .4rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
}
.price-name { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.price-min { font-size: .88rem; color: var(--muted); }
.price-num { margin-block-start: .35rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 7.5vw, 2.5rem); line-height: 1.1; }
.cur { font-family: var(--font-body); font-weight: 600; font-size: .55em; margin-inline-start: .08em; }
.price-card--hi { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.price-card--hi .price-min { color: #D8CCD0; }
.price-note {
  margin-block-start: .45rem;
  padding: .1rem .5rem;
  border-radius: 6px;
  background: var(--sun);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
}

.price-more { margin-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
.price-foot { margin-block-start: 1rem; color: var(--muted); font-size: .98rem; }

.ledger li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
  border-block-end: 1px dashed var(--line);
}
.ledger li:last-child { border: 0; }
.ledger bdi { font-weight: 700; }
.fold-price { font-family: var(--font-display); font-size: 1.5rem; }

/* Folds (FAQ and friends) — native details/summary */
.fold { border-block-end: 1px solid var(--line); }
.fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 60px;
  padding-block: .8rem;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after {
  content: "";
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 999px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat,
    var(--sun-soft);
  transition: transform .25s var(--ease);
}
.fold[open] summary::after {
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    var(--sun);
}
.fold-body { padding-block-end: 1.1rem; color: var(--ink-2); }
.fold-body > * + * { margin-block-start: .6rem; }
.faq { border-block-start: 1px solid var(--line); }

/* Rules */
.rules { display: grid; gap: 0; }
.rules li { padding-block: 1.1rem; border-block-start: 1px solid rgb(255 248 239 / .14); }
.rules h3 { color: var(--sun); font-size: 1.1rem; }
.rules p { margin-block-start: .25rem; color: #E9DDE1; }

/* Lead form */
.lead-form {
  display: grid;
  gap: 1.1rem;
  padding: 1.35rem;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.field { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.field label, .field legend { font-weight: 700; font-size: .98rem; padding: 0; }
.field legend { margin-block-end: .4rem; }
.optional { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field select {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 0 .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: 18px 23px, 23px 23px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: .9rem;
  padding-inline-end: 2.4rem;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--rose-ink); box-shadow: 0 0 0 3px var(--blush); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.field-error { display: none; color: var(--rose-ink); font-size: .92rem; font-weight: 600; }
.field.is-invalid .field-error { display: block; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--rose-ink); }

.choice-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 600;
  font-size: .98rem;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 3px solid var(--rose-ink); outline-offset: 2px; }
.form-alt { text-align: center; font-size: .95rem; color: var(--muted); }

/* ---------- 9. Footer ---------- */
.site-footer {
  padding-block: 3.5rem 2rem;
  background: var(--ink);
  color: #D9CCD1;
  font-size: .98rem;
}
.footer-top { padding-block-end: 1.75rem; border-block-end: 1px solid rgb(255 255 255 / .12); }
.footer-mark { inline-size: 170px; block-size: auto; }
.footer-top p { margin-block-start: .6rem; }
.footer-cols { display: grid; gap: 1.75rem; padding-block: 1.75rem; }
.site-footer h2 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--sun); margin-block-end: .4rem; }
.site-footer a { display: inline-flex; align-items: center; min-block-size: 40px; color: var(--paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p + p { margin-block-start: .4rem; }
.footer-legal { padding-block-start: 1.25rem; border-block-start: 1px solid rgb(255 255 255 / .12); font-size: .88rem; color: #B6A8AD; }

/* ---------- 10. Motion ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .story, .menu, .dock, .button { transition: none; }
}

/* ============================================================
   11. Students page
   ============================================================ */
.page-hero { padding-block: 1.5rem 2rem; }
.page-hero h1 { font-size: clamp(2.5rem, 11vw, 4.4rem); }
.page-hero .lead { color: var(--ink-2); }

.quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-block-start: 1.5rem;
}
.quick a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .8rem;
  min-block-size: 84px;
  padding: .85rem 1rem .9rem;
  padding-inline-end: 2.4rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.quick a:hover { box-shadow: var(--shadow); }
.quick a:active { transform: scale(.98); }
.quick small { display: block; font-weight: 500; font-size: .9rem; color: var(--muted); }
.quick .quick-go { position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem; color: var(--rose-ink); }
.quick .quick--star {
  grid-column: 1 / -1;
  min-block-size: 0;
  flex-direction: row;
  align-items: center;
  background: var(--rose-ink);
  border-color: var(--rose-ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  padding: 1.1rem 1.2rem;
}
.quick .quick--star small { color: #FFD9E4; font-family: var(--font-body); }
.quick .quick--star .quick-go { position: static; color: var(--sun); }
.quick .quick--star { padding-inline-end: 1.2rem; }

/* Stage chips stick under the header so any stage is one tap away. */
.stage-nav {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 50;
  background: rgb(255 248 239 / .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.stage-nav ul {
  display: flex;
  gap: .4rem;
  max-width: var(--shell-narrow);
  margin-inline: auto;
  padding: .55rem var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.stage-nav ul::-webkit-scrollbar { display: none; }
.stage-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 0 .95rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  text-decoration: none;
}
.stage-nav a.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.stage { padding-block: 2.5rem; border-block-end: 1px solid var(--line); scroll-margin-block-start: calc(var(--header-h) + 64px); }
.stage:last-of-type { border: 0; }
.stage-head { display: flex; align-items: center; gap: .8rem; margin-block-end: 1.1rem; }
.stage-emoji {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 14px;
  background: var(--sun);
  box-shadow: inset 0 0 0 2px var(--ink);
  font-size: 1.5rem;
  transform: rotate(-4deg);
}
.stage h2 { font-size: clamp(1.7rem, 6.5vw, 2.4rem); }
.stage-intro { color: var(--ink-2); margin-block-end: 1rem; }

.card {
  padding: 1.15rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.card + .card { margin-block-start: .6rem; }
.card h3 { margin-block-end: .3rem; }
.card p { color: var(--ink-2); }
.card .button, .card .chip-link { margin-block-start: .8rem; }

.link-list { display: grid; gap: .5rem; }
.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 60px;
  padding: .7rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.link-list small { display: block; font-weight: 500; color: var(--muted); font-size: .88rem; }
.link-list .icon { color: var(--rose-ink); }

.numbered { display: grid; gap: .6rem; counter-reset: n; }
.numbered > li {
  position: relative;
  padding: 1.1rem 1.2rem 1.2rem;
  padding-inline-start: 3.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  counter-increment: n;
}
.numbered > li::before {
  content: counter(n);
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--sun);
  font-family: var(--font-display);
}
.numbered h3 { margin-block-end: .25rem; }
.numbered p { color: var(--ink-2); }
.numbered .button, .numbered .chip-link { margin-block-start: .75rem; }

.office { display: grid; gap: .5rem; margin-block-start: .8rem; margin-inline-start: -2.4rem; }
.office a {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-block-size: 64px;
  padding: .6rem .9rem;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.office .icon { color: var(--rose-ink); }
.office b { display: flex; align-items: center; gap: .5rem; }
.office .num { display: block; font-weight: 700; font-size: 1.08rem; }
.office small { display: block; color: var(--muted); font-size: .88rem; }
.office .status {
  padding: .05rem .5rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--line);
  color: var(--muted);
}
.office .status.is-open { background: #D6F5E1; color: #0B5A2A; }
.office .status:empty { display: none; }

.notes { display: grid; gap: .45rem; margin-block-start: 1rem; }
.notes li { position: relative; padding-inline-start: 1.1rem; color: var(--ink-2); }
.notes li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: 8px; block-size: 8px; border-radius: 999px; background: var(--rose); }

.callout {
  margin-block-start: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--sun-soft);
  box-shadow: inset 0 0 0 1.5px #F2DC86;
  color: var(--ink);
}
.callout--rose { background: var(--blush); box-shadow: none; }

.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rule-grid li {
  padding: .9rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rule-grid .q { display: block; font-weight: 700; font-size: .95rem; line-height: 1.35; }
.rule-grid .a { display: block; margin-block-start: .3rem; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.rule-grid .wide { grid-column: 1 / -1; }

.copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-block-size: 60px;
  padding: .5rem .5rem .5rem 1rem;
  padding-inline-start: 1rem;
  border-block-end: 1px dashed var(--line);
}
.copy-row:last-child { border: 0; }
.copy-row small { display: block; color: var(--muted); font-size: .9rem; }
.copy-row b { font-size: 1.12rem; letter-spacing: .02em; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-block-size: 44px;
  padding: 0 .9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
}
.copy-btn.is-done { background: #D6F5E1; border-color: #9FDDB6; color: #0B5A2A; }

.avail-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.avail-days .choice span { justify-content: center; padding: 0; inline-size: 100%; }
.avail-days .choice { display: block; }

/* ============================================================
   12. Minimal pages (/car, 404) and prose (accessibility)
   ============================================================ */
.minimal-page { background: var(--sun-soft); }
.minimal-shell {
  min-block-size: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  padding-block-end: calc(var(--gutter) + env(safe-area-inset-bottom));
}
.car-card {
  inline-size: 100%;
  max-inline-size: 30rem;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.car-photo { margin: -.25rem -.25rem 1.1rem; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; }
.car-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
.car-mark { inline-size: min(100%, 220px); block-size: auto; margin-inline: auto; }
.car-lede { margin-block: .9rem 1.3rem; font-size: 1.08rem; color: var(--ink-2); }
.car-actions { display: grid; gap: .55rem; }
.car-actions .button { inline-size: 100%; min-block-size: 58px; font-size: 1.1rem; }
.car-facts { margin-block-start: 1.3rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--line); display: grid; gap: .7rem; text-align: start; }
.car-facts dt { font-weight: 700; font-size: .88rem; color: var(--rose-ink); }
.car-facts dd { margin: 0; color: var(--ink-2); font-size: .98rem; }
.car-more { margin-block-start: 1.1rem; }
.car-more a { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 44px; font-weight: 700; text-decoration: none; }
.car-legal { margin-block-start: .5rem; font-size: .82rem; color: var(--muted); }

.page-header { padding-block: 2rem 4rem; }
.prose { max-width: var(--shell-narrow); }
.prose h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
.prose h2 { margin-block: 2.2rem .6rem; font-size: clamp(1.4rem, 5vw, 1.8rem); }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-block-start: .8rem; }
.prose ul { list-style: disc; padding-inline-start: 1.2rem; display: grid; gap: .4rem; }
.prose li a { display: inline-block; padding-block: .6rem; }

/* ============================================================
   13. Wider screens — min-width only
   ============================================================ */
@media (min-width: 380px) {
  .brand img { inline-size: 136px; }
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
  .hero-actions { grid-template-columns: max-content max-content; }
  .why-grid, .cars, .rule-grid { grid-template-columns: 1fr 1fr; }
  .rules { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .header-wa { inline-size: auto; padding-inline: 1rem; display: inline-flex; gap: .4rem; font-size: .95rem; }
  .header-wa span { display: inline; }
  .brand img { inline-size: 150px; }
  .quick { grid-template-columns: repeat(3, 1fr); }
  .lead-form { padding: 2rem; }
  .wall { grid-auto-columns: 250px; padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); }
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
  .nav-desktop { display: block; }
  .nav-desktop ul { display: flex; gap: 1.6rem; }
  .nav-desktop a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
  .nav-desktop a:hover { color: var(--rose-ink); }
  .menu-button, .menu { display: none; }
  .dock { display: none; }
  .has-dock .site-footer { padding-block-end: 2rem; }

  .hero { padding-block: 3rem 6rem; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 4rem; }
  .hero::before { inset-inline-end: auto; inset-inline-start: -10%; inset-block-end: -30%; inline-size: 60%; }
  .stories { transform: rotate(-2deg); }
  .hero-lede { font-size: 1.25rem; }

  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .price-cards { gap: 1rem; }
  .price-card { padding: 1.6rem 1rem; }
  .price-more { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .rules { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
  .page-hero { padding-block: 3rem 2.5rem; }
}

@media (min-width: 1200px) {
  .hero h1 { font-size: 6rem; }
}

/* students page extras */
.sub-title { margin-block: 1.6rem .7rem; font-size: 1.15rem; }
.fine { margin-block-start: .7rem; font-size: .92rem; color: var(--muted); }
.card--spaced { margin-block-start: .8rem; }

/* Payment apps */
.pay-apps { display: grid; gap: .55rem; }
.pay-app {
  display: flex;
  align-items: center;
  gap: .9rem;
  inline-size: 100%;
  min-block-size: 76px;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.pay-app:hover { box-shadow: var(--shadow); }
.pay-app:active { transform: scale(.98); }
.pay-app img { flex: none; inline-size: 48px; block-size: 48px; border-radius: 12px; }
.pay-app > span { flex: 1; }
.pay-app b { display: block; font-size: 1.08rem; }
.pay-app small { display: block; color: var(--muted); font-size: .9rem; }
.pay-app > .icon { color: var(--rose-ink); }
.pay-app.is-done { background: #E9F9EF; border-color: #9FDDB6; }
.pay-app.is-done small { color: #0B5A2A; font-weight: 700; }

.pay-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .8rem; }
.pay-badges li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-block-size: 38px;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 600;
  font-size: .95rem;
}
.pay-badges img { inline-size: 22px; block-size: 22px; border-radius: 6px; }

/* Where and when — the service area, inside the rules band */
.rules-where { grid-column: 1 / -1; }
.areas { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .6rem .7rem; }
.areas li {
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgb(255 248 239 / .1);
  border: 1px solid rgb(255 248 239 / .22);
  color: var(--paper);
  font-size: .95rem;
  font-weight: 600;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas: "head media" "body media";
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
  .hero-head { grid-area: head; align-self: end; }
  .hero-body { grid-area: body; }
  .hero .stories { grid-area: media; align-self: center; max-inline-size: 440px; }
  .hero-lede { margin-block-start: 1.4rem; }
  .rules { grid-template-columns: repeat(3, 1fr); }
}

.car-track, .car h3 { margin-inline-end: 72px; }
.car p:last-child { margin-block-start: .5rem; }

/* On a phone the real students come straight after the headline, and the two
   actions live in the dock, which is on screen from the first paint. */
@media (max-width: 899px) {
  .hero-actions { display: none; }
  .has-dock .header-wa { display: none; }
}

/* The header has to hold the logo, "כניסה לתלמידים", WhatsApp and the menu.
   On the narrowest phones WhatsApp steps back (it is in the menu too). */
.pill-link { white-space: nowrap; }
@media (max-width: 419px) { .header-wa { display: none; } }
.brand { flex: none; }

/* Stories: sound toggle, shown only while a clip is on screen */
.stories-sound {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 62px;
  z-index: 4;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / .32);
  color: #fff;
  cursor: pointer;
}
.stories-sound[hidden] { display: none; }
.stories-sound .icon { inline-size: 20px; block-size: 20px; }
.stories-sound .when-sound { display: none; }
.stories-sound[aria-pressed="true"] { background: var(--sun); color: var(--ink); }
.stories-sound[aria-pressed="true"] .when-muted { display: none; }
.stories-sound[aria-pressed="true"] .when-sound { display: block; }
html:not(.js) .stories-sound { display: none; }

/* ============================================================
   Logo — the name on the yellow new-driver sign.
   Text, not an image: it stays crisp at every size and is read by
   screen readers through the link's own label.
   ============================================================ */
.logo-sign {
  display: inline-block;
  padding: .06em .5em .14em;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: .18em;
  box-shadow: inset 0 0 0 2.5px var(--ink);
  transform: rotate(-2deg);
}
.brand .logo-sign { font-size: 19px; }
.logo-sign--footer { font-size: 24px; box-shadow: none; }
.logo-sign--big { font-size: 38px; box-shadow: inset 0 0 0 3.5px var(--ink); }
.car-mark { inline-size: auto; margin: .2rem 0 0; }
@media (min-width: 380px) { .brand .logo-sign { font-size: 21px; } }

/* ============================================================
   Roses — the rose from Rose's car magnet, road stem and all.
   Decorative only: aria-hidden, never over text, never tappable.
   ============================================================ */
.rose-art { position: absolute; z-index: 1; display: block; pointer-events: none; user-select: none; }
.rose-art img { inline-size: 100%; block-size: auto; }
.hero-head, .section-head, .page-hero .shell, .footer-top, .car-card { position: relative; }
.hero-head > :not(.rose-art), .section-head > :not(.rose-art) { position: relative; z-index: 2; }
.hero .stories { z-index: 3; }

.rose-art--why { inset-inline-end: -6px; inset-block-start: -26px; inline-size: 74px; transform: rotate(-12deg); }
.rose-art--contact { inset-inline-end: -6px; inset-block-start: -40px; inline-size: min(28vw, 118px); transform: rotate(10deg); }
.rose-art--students { inset-inline-end: calc(var(--gutter) - 10px); inset-block-start: 6px; inline-size: min(26vw, 110px); transform: rotate(8deg); }
.rose-art--footer { position: static; display: inline-block; inline-size: 44px; vertical-align: middle; margin-inline-start: .6rem; }
.rose-art--card { position: relative; inline-size: 96px; margin: -.5rem auto .4rem; }

@media (min-width: 900px) {
  .rose-art--why { inline-size: 96px; inset-inline-end: -140px; inset-block-start: -10px; }
  .rose-art--contact { inline-size: 150px; inset-inline-end: -170px; inset-block-start: 20px; }
  .rose-art--students { inline-size: 140px; }
}

/* the two cars, right under the headline */
.hero-cars { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-block-start: 1rem; }
.hero-cars li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-2);
  font-size: .95rem;
}
.hero-cars b { color: var(--ink); font-weight: 700; }
.brand { text-decoration: none; }
@media (min-width: 900px) {
  .brand .logo-sign { font-size: 24px; }
  .hero::before { inset-block-end: 0; }
}

/* footer: legal line and the site credit */
.footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem; }
.footer-legal p { margin: 0; }
.credit { letter-spacing: .02em; }
.car-legal + .car-legal { margin-block-start: .15rem; }

/* ============================================================
   QA fixes — 17.09.2026
   ============================================================ */

/* 44px targets everywhere the accessibility statement promises them */
.pill-link, .site-footer a, .stage-nav a { min-block-size: 44px; }

/* yellow on the rose section failed contrast (3.9:1): darker pill behind it */
.section--rose .eyebrow { background: rgb(0 0 0 / .28); }

/* home sections that used the narrow shell: same right edge as the rest */
.shell--measure > .steps, .shell--measure > .faq, .shell--measure > .lead-form { max-width: var(--shell-narrow); }
.shell--measure > .lead-form { margin-inline-start: 0; }

/* students hero: the rotated sign no longer touches the lead line */
.page-hero .lead { margin-block-start: 1.5rem; }

/* students stage chips wrap on wide screens instead of being cut off */
@media (min-width: 900px) {
  .stage-nav ul { flex-wrap: wrap; overflow: visible; }
}

/* gallery arrows: only for a mouse, on wider screens */
.wall-nav { display: none; }
@media (min-width: 900px) and (pointer: fine) {
  .wall-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-block: -3.2rem 1rem; }
  .wall-arrow {
    display: grid;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .wall-arrow:hover { background: var(--ink); color: var(--paper); }
  .wall-arrow--back .icon { transform: scaleX(-1); }
}

/* roses: tablet hero keeps the rose beside the reel, desktop why-rose sits
   at the content edge instead of floating mid-page */
@media (min-width: 900px) {
  .rose-art--why { inset-inline-end: calc((var(--shell-narrow) + 2rem) - min(100vw - 2 * var(--gutter), var(--shell) - 2 * var(--gutter))); inset-block-start: 0; }
}

/* landscape phones: the dock would eat a third of the screen — the hero's
   own buttons take over */
@media (orientation: landscape) and (max-height: 500px) {
  .dock { display: none; }
  .hero .hero-actions { display: grid; grid-template-columns: max-content max-content; }
  .has-dock .site-footer { padding-block-end: 2rem; }
}

/* ============================================================
   Cross-device fixes — 22.09.2026
   ============================================================ */

/* The sign never breaks onto two lines. It shrinks to fit the lane instead,
   whatever text size the phone is set to (Safari's aA menu, iOS Larger Text,
   Android font scale) — those raise 1rem, so the width cap is in vw only.
   --sign-len is the sign's width in em, measured per phrase. */
.sign-word > span {
  white-space: nowrap;
  font-size: min(1em, calc((100vw - 2 * var(--gutter) - 8px) / var(--sign-len, 5.4)));
}

/* Grid items default to min-width:auto, so a wide child (Safari's native
   date field) could stretch a step past the screen on a 320px phone. */
.steps > li, .step, .age-row, .age-check { min-inline-size: 0; }
.age-row input[type="date"] { inline-size: 100%; max-inline-size: 100%; -webkit-appearance: none; appearance: none; display: flex; align-items: center; }
.hero .sign-word { --sign-len: 5.2; }
.page-hero .sign-word { --sign-len: 5.8; }

/* Larger text sizes (Safari aA, iOS Larger Text, Android font scale) make
   the page narrower in CSS pixels and 1rem bigger. Everything below lets the
   layout give way instead of pushing the page sideways. */
.pill-short { display: none; }
@media (max-width: 359px) {
  .pill-long { display: none; }
  .pill-short { display: inline; }
  .pill-link { padding-inline: .75rem; }
}
@media (max-width: 290px) {
  .brand .logo-sign { font-size: 16px; }
  .pill-link { display: none; }
}
.site-header { gap: .35rem; }
.brand, .header-actions { min-inline-size: 0; }

.price-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.4rem), 1fr)); }

.dock { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.dock .button { min-inline-size: 0; font-size: min(1rem, 4.4vw); padding-inline: .5rem; }

.quick > a, .numbered > li, .rule-grid > li, .price-card, .why-card, .car, .pay-app, .copy-row > span,
.stage-head h2, .office a > span { min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 300px) {
  .quick { grid-template-columns: 1fr; }
  .office { margin-inline-start: 0; }
}

/* last line of defence: nothing may scroll the page sideways */
html, body { overflow-x: clip; }
.office > a { min-inline-size: 0; }
.office .status { white-space: normal; }

/* Rose's notes, 22.09: the card titles were vertically centred, so with
   bodies of different lengths they sat at different heights. */
.why-card h3 { align-self: start; }
@media (min-width: 900px) {
  .rose-art--why { inset-inline-end: -128px; inset-block-start: 26px; inline-size: 104px; }
}
.why-card h3 { min-block-size: 2.5em; }
.why-card { align-content: start; }