/* Base: replaces the reset the demo host used to provide. */
@font-face {
  font-family: "Noto Sans Hebrew"; font-style: normal; font-weight: 400 800; font-stretch: 62.5% 100%; font-display: swap;
  src: url("assets/fonts/noto-sans-hebrew-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Noto Sans Hebrew"; font-style: normal; font-weight: 400 800; font-stretch: 62.5% 100%; font-display: swap;
  src: url("assets/fonts/noto-sans-hebrew-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 30; background: var(--ink); color: var(--ground); padding: 10px 16px; font-weight: 700; text-decoration: none; border-start-start-radius: 12px; }
.skip:focus { top: 12px; }

/* Layout: the lesson first. One motif, "the bend in the road" (a block with one quarter-round corner), at every scale. RTL 12-column grid. */
:root {
  --ground: #F7F9FB;
  --tone: #ECF2F8;
  --ink: #0C162B;
  --ink-2: #3D4D64;
  --sky: #38B3FF;
  --on-sky: #0C162B;
  --deep: #233D59;
  --on-deep: #F2F7FC;
  --pale: #DCEBF7;
  --on-pale: #0C162B;
  --mist: #9FD9FF;
  --on-mist: #0C162B;
  /* Fixed colours: they sit on fields that are dark or light in both themes. */
  --fix-pale: #DCEBF7;
  --fix-mist: #9FD9FF;
  --fix-sky: #38B3FF;
  --fix-navy: #0C162B;
  --fix-white: #FFFFFF;
  --ui-bg: #1A1D24;
  --ui-tile: #2A303B;
  --ui-ink: #F1F4F8;
  --ui-dim: #A7B0BE;
  --board: #FFFFFF;
  --board-ink: #0C162B;
  --wa-ground: #E4EBF2;
  --wa-in: #FFFFFF;
  --wa-out: #D9FDD3;
  --wa-ink: #111B21;
  --wa-dim: #4F5F6B;
  --logo-light: block;
  --logo-dark: none;
  --focus: #0C162B;

  --font: "Noto Sans Hebrew", "Arial Hebrew", "Segoe UI", system-ui, sans-serif;
  --t-small: 0.875rem;
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-head: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  --t-display: clamp(3rem, 1.4rem + 5.4vw, 6.5rem);

  --m: clamp(16px, 2.8vw, 40px);
  --gap-section: clamp(96px, 12vw, 200px);
  --bend: clamp(72px, 12vw, 200px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B1424; --tone: #13213A; --ink: #EAF1F8; --ink-2: #A9B8CB;
    --deep: #1B3150; --on-deep: #EAF1F8;
    --pale: #16263D; --on-pale: #EAF1F8; --mist: #1F4A72; --on-mist: #EAF1F8;
    --logo-light: none; --logo-dark: block; --focus: #38B3FF; --faq3: #1F4A72;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0B1424; --tone: #13213A; --ink: #EAF1F8; --ink-2: #A9B8CB;
  --deep: #1B3150; --on-deep: #EAF1F8;
  --pale: #16263D; --on-pale: #EAF1F8; --mist: #1F4A72; --on-mist: #EAF1F8;
  --logo-light: none; --logo-dark: block; --focus: #38B3FF; --faq3: #1F4A72;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.55;
  letter-spacing: -0.005em; overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.about, .final-box, .card:nth-child(3n+3) { --focus: var(--fix-sky); }
.wrap {
  padding-left: max(var(--m), env(safe-area-inset-left, 0px));
  padding-right: max(var(--m), env(safe-area-inset-right, 0px));
}
.display { font-weight: 800; font-stretch: 78%; letter-spacing: -0.02em; line-height: 0.95; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.logo .l { display: var(--logo-light); }
.logo .d { display: var(--logo-dark); }

/* The one shape: a block with a single quarter-round corner, where the road turns. */
.bend { border-start-start-radius: var(--r, var(--bend)); }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font: 600 var(--t-body)/1 var(--font); text-decoration: none;
  padding: .95em 1.4em; border: 0; cursor: pointer;
  background: var(--ink); color: var(--ground);
  border-start-start-radius: 1.1em;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.btn:hover { background: var(--deep); color: var(--on-deep); }
.btn:active { transform: scale(.97); }
.btn.on-accent { background: var(--sky); color: var(--on-sky); }
.btn.on-accent:hover { background: var(--mist); color: var(--on-mist); }
.btn .ico { width: 1.15em; height: 1.15em; flex: none; }
.tlink { padding-block: 10px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; transition: opacity .15s; }
.tlink:hover { opacity: .75; }
.tlink .ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-inline-end: .35em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 6px; }
.route-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 48px; }
.route-cta p { font-size: var(--t-lead); font-weight: 600; max-width: 36ch; }
.final { padding-bottom: var(--gap-section); }
.final-box { background: var(--deep); color: var(--on-deep); padding: clamp(32px, 5vw, 72px); display: grid; gap: 28px; --r: var(--bend); }
.final-box h2 { font-size: var(--t-display); }
.final-box > p { font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; }
.reach { display: grid; justify-items: start; gap: 18px; }
.reach .btn { margin-bottom: 8px; }
.final-box .tlink { overflow-wrap: anywhere; }
.final-box .tlink .ltr { display: inline-block; text-decoration: inherit; }
.final-box > .privacy-note { font-size: var(--t-small); max-width: 60ch; }

/* ---------- Nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; }
.nav .logo img { height: clamp(40px, 4vw, 52px); width: auto; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 32px); list-style: none; margin: 0; margin-inline-start: auto; padding: 0; font-size: 0.9375rem; font-weight: 600; }
.nav ul a { text-decoration: none; color: var(--ink-2); transition: color .15s; }
.nav ul a:hover { color: var(--ink); }
.nav { flex-wrap: wrap; }
.nav ul a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.head-wa { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font-size: .9375rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.head-wa:hover { text-decoration: underline; text-underline-offset: 5px; }
.head-wa .ico { width: 1.25em; height: 1.25em; flex: none; }
.menu-btn { font: 700 .9375rem/1 var(--font); color: var(--ground); background: var(--ink); border: 0; min-height: 44px; padding: 0 14px; border-start-start-radius: 12px; cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--deep); color: var(--on-deep); }
@media (min-width: 861px) { .menu-btn { display: none; } }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; position: relative; }
.hero-text { grid-column: 1 / 7; grid-row: 1; padding-top: clamp(40px, 7vw, 110px); display: grid; gap: 26px; align-content: start; }
/* "לומדים מתמטיקה" is about 7em wide: the size keeps the headline on two lines in the hero column. */
.hero h1 { font-size: min(var(--t-display), 6.2vw); }
.hero .lead { font-size: var(--t-lead); line-height: 1.4; max-width: 30ch; }
.stage {
  grid-column: 7 / -1; grid-row: 1 / 3; margin-top: clamp(120px, 15vw, 230px);
  margin-left: calc(-1 * max(var(--m), env(safe-area-inset-left, 0px)));
  background: var(--sky); --r: var(--bend);
  height: clamp(460px, 34vw, 500px); overflow: hidden; position: relative;
}
.hero-spacer { grid-column: 1 / 7; grid-row: 2; height: 40px; }

/* ---------- Inner page header ---------- */
.page-head { padding-block: clamp(32px, 6vw, 96px) clamp(56px, 8vw, 128px); display: grid; gap: 22px; }
.page-head h1 { font-size: var(--t-display); }
.page-head .lead { font-size: var(--t-lead); line-height: 1.4; max-width: 40ch; }
.page-head + .route { padding-top: 0; }
/* Under a page title the first section heading steps down to the head size, so the page has one headline. */
.page-head + .route .route-head h2, .page-head + .teachers > h2 { font-size: var(--t-head); font-stretch: 85%; line-height: 1.1; }

/* The lesson fragment (product interface, built in HTML). */
.lesson {
  position: absolute; top: 60px; inset-inline-start: 96px; width: 620px;
  background: var(--ui-bg); color: var(--ui-ink); font-size: 14px; line-height: 1.4;
  border-start-start-radius: 22px; padding: 14px; display: grid; gap: 12px;
}
.lesson-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ui-dim); font-size: 13px; }
.lesson-bar b { color: var(--ui-ink); font-weight: 600; }
.board { background: var(--board); color: var(--board-ink); padding: 18px 20px 22px; border-start-start-radius: 14px; display: grid; gap: 8px; }
.board small { font-size: 13px; color: #5B6B80; }
.board .ltr { text-align: right; }
.board .eq { font-size: 26px; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.board .step { font-size: 20px; font-weight: 600; color: #233D59; font-variant-numeric: tabular-nums; }
.board .step.last { color: #0A6AA6; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--ui-tile); aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; border-start-start-radius: 10px; }
.tile .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #0C162B; }
.tile em { position: absolute; bottom: 5px; inset-inline-start: 7px; font-style: normal; font-size: 12px; color: var(--ui-dim); }
.tile.teacher { outline: 2px solid var(--sky); outline-offset: -2px; }
.tile.hand::after { content: "יד"; position: absolute; top: 5px; inset-inline-end: 6px; font-size: 11px; font-weight: 700; background: #FFC93C; color: #0C162B; padding: 1px 6px; border-start-start-radius: 6px; }

/* ---------- The numbers: one big figure, the rest as a list ---------- */
.stats {
  margin-top: var(--gap-section);
  background: var(--deep); color: var(--on-deep);
  padding-block: clamp(64px, 8vw, 120px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 48px; align-items: start;
}
.stats-main { grid-column: 1 / 7; display: grid; gap: 14px; }
.stats-main .big { font-size: clamp(8rem, 3rem + 17vw, 19rem); line-height: .8; color: var(--fix-sky); }
.stats-main h2 { font-size: var(--t-head); font-weight: 800; font-stretch: 85%; line-height: 1.15; }
.stats-main p { max-width: 34ch; }
.figs { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 28px; margin: 0; align-self: center; }
.fig { display: grid; gap: 12px; align-content: start; font-size: clamp(3rem, 1.2rem + 4.4vw, 5.5rem); }
.fig dt { font-weight: 800; font-stretch: 78%; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fig dd { margin: 0; font-size: var(--t-body); line-height: 1.45; max-width: 30ch; }
.fig dd b { display: block; font-size: var(--t-lead); font-weight: 700; line-height: 1.25; }

/* ---------- Between lessons: the week ---------- */
.support { padding-block: 0 var(--gap-section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; }
.support h2 { grid-column: 1 / -1; font-size: var(--t-display); }
.sup-texts { grid-column: 1 / 7; display: grid; gap: 32px; align-content: start; }
.sup-texts h3 { font-size: 1.375rem; font-weight: 700; margin-bottom: 8px; }
.sup-texts p { max-width: 36ch; }
.week { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; height: clamp(300px, 34vw, 440px); margin-top: 16px; }
.day-col { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.day-col .dname { font-weight: 700; font-size: var(--t-body); }
.day-col .blk { align-self: end; height: var(--h); padding: 16px; display: grid; align-content: start; gap: 4px; font-weight: 700; font-size: var(--t-lead); line-height: 1.15; }
.day-col .blk small { font-size: var(--t-small); font-weight: 600; line-height: 1.35; }
.blk.lesson-day { background: var(--sky); color: var(--on-sky); border-start-start-radius: clamp(32px, 4vw, 64px); }
.blk.hw { background: var(--mist); color: var(--on-mist); }
.blk.ask { background: var(--pale); color: var(--on-pale); }

/* ---------- Teachers ---------- */
.teachers, .split { padding-block: 0 var(--gap-section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 48px; }
.teachers h2, .split h2 { grid-column: 1 / -1; font-size: var(--t-display); }
.t-texts { grid-column: 1 / 6; display: grid; gap: 40px; align-content: start; }
.t-texts h3 { font-size: 1.375rem; font-weight: 700; margin-bottom: 8px; }
.t-texts p { max-width: 38ch; }
.t-stage {
  grid-column: 7 / -1; background: var(--pale); --r: clamp(64px, 9vw, 140px);
  padding: clamp(28px, 4vw, 56px); min-height: 100%;
  margin-left: calc(-1 * max(var(--m), env(safe-area-inset-left, 0px)));
}
.chat { background: var(--wa-ground); color: var(--wa-ink); max-width: 480px; font-size: 15px; line-height: 1.45; border-start-start-radius: 20px; overflow: hidden; }
.chat-head { background: #F0F2F5; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.chat-head .av { width: 38px; height: 38px; border-radius: 50%; background: var(--fix-sky); display: grid; place-items: center; font-weight: 800; color: var(--fix-navy); }
.chat-head b { display: block; font-size: 15px; }
.chat-head small { font-size: 13px; color: var(--wa-dim); }
.chat-body { padding: 16px; display: grid; gap: 10px; }
.day { justify-self: center; font-size: 12.5px; background: #FFFFFF; color: var(--wa-dim); padding: 3px 10px; border-radius: 8px; }
.msg { max-width: 88%; padding: 8px 12px 6px; border-radius: 10px; white-space: pre-line; }
.msg.in { background: var(--wa-in); justify-self: start; border-start-start-radius: 0; }
.msg.out { background: var(--wa-out); justify-self: end; border-start-end-radius: 0; }
.msg time { display: block; text-align: end; font-size: 11.5px; color: var(--wa-dim); margin-top: 2px; }
.msg b { font-weight: 700; }

/* ---------- Statement ---------- */
/* ---------- Vision: who we are, what we want to do and what we believe (home, #about) ---------- */
.vision { padding-bottom: clamp(24px, 3vw, 48px); }
.vision-box { background: var(--pale); color: var(--on-pale); --r: var(--bend); padding: clamp(32px, 5vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; }
.vision-box h2 { grid-column: 1 / 6; align-self: start; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.25rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.02em; line-height: 1; }
.vision-lead { grid-column: 6 / -1; font-size: var(--t-head); font-weight: 700; font-stretch: 90%; line-height: 1.3; max-width: 34ch; }
.vision-who { grid-column: 1 / 6; font-size: var(--t-lead); font-weight: 600; line-height: 1.4; max-width: 26ch; }
.vision-why { grid-column: 6 / -1; font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; }
.v-beliefs { grid-column: 1 / -1; border-top: 2px solid var(--on-pale); padding-top: 32px; display: grid; gap: 28px; }
.v-kicker { font-size: var(--t-head); font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.v-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; list-style: none; margin: 0; padding: 0; }
.v-list h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.v-list p { max-width: 30ch; }
@media (max-width: 1100px) {
  .vision-box h2, .vision-lead, .vision-who, .vision-why { grid-column: 1 / -1; }
  .vision-box { row-gap: 24px; }
  .v-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.not-tutor-h { font-size: var(--t-display); margin-bottom: 28px; }
#change { padding-top: clamp(64px, 8vw, 128px); }
.statement-wrap { padding-bottom: var(--gap-section); }
.statement { font-size: var(--t-head); line-height: 1.3; font-weight: 600; max-width: 44ch; }
.stats + .teachers { padding-top: var(--gap-section); }

/* ---------- Onboarding: five stations down one road ---------- */
.route { padding-block: var(--gap-section); }
.route-head { display: grid; gap: 22px; margin-bottom: 64px; }
.route-head h2 { font-size: var(--t-display); }
.route-head p { font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; }
.stops { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.stop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.stop .blk { grid-column: 1 / 5; padding: 22px 24px; display: grid; gap: 6px; align-content: start; min-height: 168px; }
.stop .blk span { font-weight: 600; }
.stop .blk h3 { font-size: var(--t-head); font-weight: 800; font-stretch: 85%; line-height: 1.1; letter-spacing: -0.01em; }
.stop .do, .stop .get { padding-block: 22px; max-width: 36ch; }
.stop .do { grid-column: 5 / 9; }
.stop .get { grid-column: 9 / -1; }
.stop b { font-weight: 700; }
.stop:nth-child(1) .blk { background: var(--pale); color: var(--on-pale); border-start-start-radius: 64px; }
.stop:nth-child(2) .blk { background: var(--mist); color: var(--on-mist); }
.stop:nth-child(3) .blk { background: var(--sky); color: var(--on-sky); }
.stop:nth-child(4) .blk { background: var(--deep); color: var(--on-deep); }
.stop:nth-child(5) .blk { background: var(--ink); color: var(--ground); }

/* ---------- About ---------- */
.about-wrap { padding-bottom: var(--gap-section); }
.about {
  background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden;
  border-start-start-radius: var(--bend);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px;
  padding: 56px 56px 0; min-height: 88svh;
}
.about h2 { grid-column: 1 / 7; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.25rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.02em; line-height: 1; align-self: start; }
.emblem {
  grid-column: 1 / 7; grid-row: 2; align-self: end; margin-top: 48px;
  width: min(38vw, 540px); aspect-ratio: 1 / 1; background: var(--fix-pale);
  border-start-start-radius: 100%; display: grid; align-items: end; justify-items: center; padding: 0 8% 10%;
}
.emblem img { width: 82%; height: auto; }
.about .texts { grid-column: 8 / -1; grid-row: 1 / 3; display: grid; gap: 56px; align-content: start; padding: 6px 0 56px; }
.about h3 { font-size: 1.375rem; font-weight: 700; margin-bottom: 10px; }
.about .texts p { max-width: 36ch; }
/* Without the emblem (the method page) the card is as tall as its text. */
.about:not(:has(.emblem)) { min-height: 0; }

/* ---------- FAQ: cards in a drawer ---------- */
.faq { padding-block: 0 var(--gap-section); }
/* The teaching section sits on its own tone band, with the block colours reversed, so it does not read as the joining route again. */
#teach { background: var(--tone); padding-block: clamp(64px, 8vw, 120px); }
#teach + .final { padding-top: clamp(64px, 8vw, 120px); }
#teach .stop:nth-child(1) .blk { background: var(--ink); color: var(--ground); }
#teach .stop:nth-child(2) .blk { background: var(--deep); color: var(--on-deep); }
#teach .stop:nth-child(3) .blk { background: var(--sky); color: var(--on-sky); }
.faq-inner { max-width: 980px; margin-inline: 0; }
.faq h2 { font-size: var(--t-display); margin-bottom: 72px; }
.cards { display: grid; }
.card { position: relative; margin-top: -40px; padding-top: 40px; }
.card:first-child { margin-top: 0; }
.card { pointer-events: none; }
.card .tab, .card .body { pointer-events: auto; cursor: pointer; }
.card .a { cursor: auto; }
.card .tab {
  position: absolute; top: 0; inset-inline-start: calc(var(--i) * 140px); width: 210px; height: 41px;
  display: flex; align-items: center; padding-inline: 18px; font-size: 1rem; font-weight: 700;
  border-start-start-radius: 18px;
}
.card .body { padding: 22px 26px 62px; }
.card:last-child .body { padding-bottom: 26px; }
.card .q { all: unset; display: block; width: 100%; cursor: pointer; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.card .q:focus-visible { outline: 3px solid var(--ci); outline-offset: 4px; }
.card .a { max-width: 50ch; padding-top: 14px; }
.card .tab, .card .body { background: var(--c); color: var(--ci); }
.card:nth-child(3n+1) { --c: var(--pale); --ci: var(--on-pale); }
.card:nth-child(3n+2) { --c: var(--sky); --ci: var(--on-sky); }
.card:nth-child(3n+3) { --c: var(--faq3, var(--deep)); --ci: var(--on-deep); }
.card .q::after { content: " +"; font-weight: 800; }
.card.open .q::after { content: ""; }

/* ---------- Footer: the name built from blocks, and the real logo ---------- */
.foot { background: var(--tone); padding-block: 56px 28px; }
.word { display: flex; flex-wrap: wrap; gap: 4px; }
.word .w { display: flex; gap: 4px; align-items: flex-end; flex: 1 1 auto; }
.word .w + .w { margin-inline-start: 22px; }
.word b {
  flex: 1 1 0; min-width: 0; height: calc(34svh * var(--h)); display: flex; align-items: flex-end; justify-content: center;
  background: var(--k); color: var(--kc, var(--ground)); font-weight: 800; font-stretch: 78%; line-height: 1.02;
  font-size: clamp(3rem, 1rem + 8.4vw, 9.5rem); overflow: hidden;
}
.word b.bend { border-start-start-radius: clamp(28px, 5vw, 80px); }
.foot-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: 56px; font-size: 0.9375rem; align-items: start; }
.foot-cols nav { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; align-items: start; }
.foot-group { display: grid; gap: 2px; justify-items: start; }
.foot-h { font-size: var(--t-small); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.foot-group a { padding-block: 6px; }
.foot-cols nav a { text-decoration: none; font-weight: 600; }
.foot-cols nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-logo { grid-column: 9 / -1; justify-self: end; display: grid; gap: 10px; justify-items: center; text-align: center; }
.foot-last { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; font-size: var(--t-small); color: var(--ink-2); flex-wrap: wrap; }

/* Helpers: icon sprite, screen-reader-only text, missing-fact placeholders (preview only). */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.todo { background: #FFE58A; color: #0C162B; padding: 0 .2em; border-radius: 3px; }
.privacy-note a, .foot-legal a { text-decoration: underline; text-underline-offset: 3px; }
.privacy-note { font-size: var(--t-small); max-width: 60ch; opacity: .9; }
.foot-legal { margin-top: 40px; display: grid; gap: 10px; font-size: var(--t-small); color: var(--ink-2); max-width: 80ch; }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; color: var(--ink); }
.foot-legal nav a { padding-block: 6px; }

/* ---------- Legal pages ---------- */
.doc-main { max-width: 72ch; padding-block: clamp(32px, 6vw, 72px) var(--gap-section); display: grid; gap: 14px; }
.doc-main h1 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.02em; line-height: 1; margin-bottom: 18px; }
.doc-main h2 { font-size: var(--t-lead); font-weight: 700; margin-top: 22px; }
.doc-main ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; }
.doc-main p, .doc-main li { max-width: 68ch; }
.doc-updated { color: var(--ink-2); font-size: var(--t-small); margin-top: 18px; }
.about .tlink, .t-texts .tlink { justify-self: start; }

/* ---------- End of page: next step, and the door for teachers ---------- */
.next { padding-block: 0 var(--gap-section); display: grid; gap: 22px; justify-items: start; }
.next h2, .door h2 { font-size: var(--t-head); font-weight: 800; font-stretch: 85%; line-height: 1.1; max-width: 24ch; }
.door { background: var(--tone); padding-block: clamp(56px, 7vw, 104px); margin-bottom: clamp(64px, 8vw, 120px); display: grid; gap: 16px; justify-items: start; }
.door p { font-size: var(--t-lead); line-height: 1.45; max-width: 44ch; }

/* ---------- Who it fits ---------- */
.fit { padding-block: 0 var(--gap-section); }
.fit h2 { font-size: var(--t-display); margin-bottom: 48px; }
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 6px; }
.fit-list li { background: var(--pale); color: var(--on-pale); padding: 24px; display: grid; gap: 8px; align-content: start; }
.fit-list li:first-child { border-start-start-radius: 64px; padding-top: 40px; }
.fit-list h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; }

/* ---------- Sample PDF summary (a white page in both themes) ---------- */
.sheet { background: var(--fix-white); color: var(--fix-navy); max-width: 440px; padding: 22px 24px 26px; border-start-start-radius: 20px; display: grid; gap: 12px; font-size: 14.5px; line-height: 1.45; }
.sheet-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--fix-sky); }
.sheet-top b { font-size: 18px; font-weight: 800; }
.sheet-top small { font-size: 12.5px; color: #4F5F6B; }
.sheet-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-meta span { background: var(--fix-pale); padding: 2px 10px; border-start-start-radius: 8px; font-weight: 600; font-size: 13px; }
.sheet-h { display: block; color: #233D59; font-weight: 800; }
.sheet ul { margin: 0; padding-inline-start: 1.1em; }

/* ---------- Voices: real quotes, only with consent ---------- */
.voices { padding-block: 0 var(--gap-section); }
#teach + .voices { padding-top: clamp(64px, 8vw, 120px); }
.voices h2 { font-size: var(--t-display); margin-bottom: 48px; }
.voice-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px; }
.voice figure { margin: 0; height: 100%; background: var(--pale); color: var(--on-pale); padding: 28px 24px 24px; display: grid; gap: 20px; align-content: space-between; }
.voice:first-child figure { border-start-start-radius: 64px; padding-top: 40px; }
.voice blockquote { margin: 0; font-size: var(--t-lead); line-height: 1.4; font-weight: 600; }
.voice blockquote::before { content: ""; display: block; width: .7em; height: .7em; margin-bottom: 14px; background: var(--sky); border-start-start-radius: .7em; }
.voice figcaption { display: grid; gap: 2px; font-size: var(--t-small); }
.voice figcaption b { font-size: var(--t-body); font-weight: 700; }
.voices-note, .team-note { margin-top: 24px; font-size: var(--t-small); color: var(--ink-2); max-width: 60ch; }

/* ---------- Teacher cards: only with each teacher's consent ---------- */
.team { padding-block: 0 var(--gap-section); }
.team h2 { font-size: var(--t-display); margin-bottom: 48px; }
.team-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 40px 20px; }
.tcard { display: grid; gap: 6px; align-content: start; }
.tcard-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 10px; background: var(--pale); color: var(--on-pale); border-start-start-radius: 48px; }
.tcard-init { display: grid; place-items: center; font-size: 4rem; font-weight: 800; font-stretch: 78%; line-height: 1; }
.tcard h3 { font-size: 1.375rem; font-weight: 700; }
.tcard-role { font-weight: 600; color: var(--ink-2); }
.tcard p { max-width: 34ch; }

/* ---------- Contact page: two WhatsApp choices, and the other ways to reach us ---------- */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 56px; align-items: start; padding-bottom: var(--gap-section); }
.wa-box { grid-column: 1 / 8; background: var(--pale); color: var(--on-pale); padding: clamp(24px, 4vw, 56px); border-start-start-radius: clamp(48px, 7vw, 120px); }
.wa-box > h2, .contact-side h2 { font-size: var(--t-head); font-weight: 800; font-stretch: 85%; line-height: 1.1; margin-bottom: 20px; }
.wa-choices { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 22px; }
.wa-hint { margin-bottom: 14px; max-width: 46ch; }
.wa-box .privacy-note { color: var(--ink-2); opacity: 1; }
.contact-side { grid-column: 9 / -1; display: grid; gap: 48px; }
.contact-side p { max-width: 40ch; }
.after { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.after li { counter-increment: s; display: grid; grid-template-columns: 2.2em 1fr; gap: 12px; align-items: start; }
.after li::before { content: counter(s); display: grid; place-items: center; height: 2.2em; background: var(--sky); color: var(--on-sky); font-weight: 800; border-start-start-radius: .8em; }
.after-t { margin-top: 14px; }
.reach-list { display: grid; justify-items: start; gap: 4px; margin-bottom: 12px; }
.contact-side .tlink { overflow-wrap: anywhere; }
.contact-side .tlink .ltr { display: inline-block; text-decoration: inherit; }
.contact-side .tlink.share { display: inline-block; margin-top: 8px; }


/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes stageIn { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes fragIn { from { transform: translateY(70px) scale(1.04); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-text > * { animation: rise .8s var(--ease) both; }
  .hero-text > :nth-child(2) { animation-delay: .08s; }
  .hero-text > :nth-child(3) { animation-delay: .16s; }
  .hero-text > :nth-child(4) { animation-delay: .24s; }
  .stage { animation: stageIn 1.1s var(--ease) .15s both; }
  .lesson { animation: fragIn 1.1s var(--ease) .3s both; }
  @supports (animation-timeline: view()) {
    @keyframes drift { from { transform: translateY(32px); } to { transform: none; } }
    .rv { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .rv:nth-child(2) { animation-range: entry 8% entry 80%; }
    .rv:nth-child(3) { animation-range: entry 16% entry 90%; }
    .rv:nth-child(4) { animation-range: entry 24% entry 100%; }
    .word b { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}

@media (min-width: 861px) {
  .final-box { grid-template-columns: 7fr 5fr; column-gap: 48px; }
  .final-box > h2 { grid-column: 1 / -1; }
  .reach { grid-column: 2; grid-row: 2 / 4; align-self: start; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .nav { gap: 8px 10px; padding-block: 14px; }
  .nav .logo { margin-inline-end: auto; }
  .nav .logo img { height: clamp(28px, 8.5vw, 38px); }
  .head-wa { order: 2; min-width: 44px; justify-content: center; }
  .head-wa-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu-btn { order: 1; }
  .nav ul { order: 3; flex: 1 0 100%; flex-direction: column; gap: 0; margin: 0; padding-top: 6px; font-size: 1.0625rem; }
  .nav ul a { display: block; padding-block: 12px; color: var(--ink); }
  .nav ul li + li { border-top: 1px solid var(--pale); }
  .js .nav ul:not(.open) { display: none; }
  .nav ul.open { background: var(--tone); margin-inline: calc(-1 * var(--m)); padding: 4px var(--m) 12px; border-bottom: 2px solid var(--ink); }
  .page-head h1 { font-size: 13vw; }
  .fit h2 { font-size: 13vw; margin-bottom: 32px; }
  .voices h2, .team h2 { font-size: 13vw; margin-bottom: 32px; }
  .contact { display: block; }
  .wa-box {
    margin-left: calc(-1 * max(var(--m), env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(var(--m), env(safe-area-inset-right, 0px)));
    padding: 28px 16px 32px; border-start-start-radius: 56px;
  }
  .contact-side { margin-top: 56px; gap: 40px; }
  .final-box { padding: 44px 20px 28px; --r: 72px; }
  .final-box h2 { font-size: 12vw; }
  .route-cta { margin-top: 32px; }
  .hero { display: block; }
  .hero-text { padding-top: 24px; gap: 20px; }
  .hero h1 { font-size: 12vw; }
  .stage { margin-top: 40px; margin-inline: calc(-1 * max(var(--m), env(safe-area-inset-right, 0px))) calc(-1 * max(var(--m), env(safe-area-inset-left, 0px))); height: 390px; --r: 72px; }
  .lesson { top: 28px; width: auto; inset-inline: 16px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile:nth-child(n+4) { display: none; }
  .lesson-bar { flex-wrap: wrap; row-gap: 2px; }
  .lesson-bar b, .lesson-bar span { white-space: nowrap; }
  .stats { display: block; }
  .stats-main .big { font-size: 42vw; }
  .figs { margin-top: 48px; gap: 24px; }
  .fig { font-size: 3rem; gap: 6px; }
  .figs { gap: 32px 20px; }
  .support { display: block; }
  .support h2 { font-size: 13vw; margin-bottom: 24px; }
  .sup-texts { margin-top: 32px; }
  .week { height: auto; grid-template-columns: 1fr; gap: 6px; margin-top: 40px; }
  .day-col { grid-template-columns: 2.2em 1fr; grid-template-rows: none; align-items: stretch; gap: 10px; }
  .day-col .dname { align-self: center; }
  .day-col .blk { height: auto; width: var(--w); align-self: stretch; min-height: 64px; font-size: 1.125rem; }
  .teachers, .split { display: block; }
  .teachers h2, .split h2 { font-size: 13vw; margin-bottom: 36px; }
  .t-texts { gap: 28px; }
  .t-stage { margin: 40px calc(-1 * max(var(--m), env(safe-area-inset-right, 0px))) 0 calc(-1 * max(var(--m), env(safe-area-inset-left, 0px))); --r: 72px; padding: 32px 16px; }
  .vision-box { display: block; padding: 36px 20px 32px; --r: 72px; }
  .vision-box h2 { font-size: 11vw; }
  .vision-lead { margin-top: 20px; font-size: 1.375rem; }
  .vision-who, .vision-why { margin-top: 20px; font-size: 1.125rem; }
  .v-beliefs { margin-top: 32px; }
  .v-list { grid-template-columns: 1fr; gap: 24px; }
  .not-tutor-h { font-size: 12vw; }
  .statement { font-size: 1.5rem; }
  .route-head h2 { font-size: 13vw; }
  .stop { display: block; }
  .stop .blk { min-height: 0; }
  .stop .do, .stop .get { padding: 14px 0 0; max-width: 40ch; }
  .stop .get { padding-bottom: 30px; }
  .about { display: flex; flex-direction: column; padding: 28px 22px 0; border-start-start-radius: 72px; min-height: 0; }
  .about h2 { font-size: 11vw; }
  .about .texts { gap: 32px; margin-top: 32px; padding-bottom: 0; }
  .emblem { order: 3; width: min(64vw, 300px); align-self: center; margin: 32px 0 0; }
  .faq h2 { font-size: 12vw; margin-bottom: 48px; }
  .card .tab { inset-inline-start: calc(var(--i) * 40px); width: 132px; font-size: .9375rem; }
  .card .body { padding: 20px 20px 60px; }
  .card .q { font-size: 1.125rem; }
  .word { flex-direction: column; }
  .word .w + .w { margin-inline-start: 0; }
  .word b { height: calc(15svh * var(--h)); font-size: 16vw; }
  .foot-cols nav { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-cols nav a { padding-block: 11px; }
  .foot-logo { grid-column: 1 / -1; justify-self: center; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.nw { white-space: nowrap; }