/* ---------- fonts (AAA – Ploni / Ploni Round / Ploni Yad) ---------- */
@font-face { font-family: "Ploni Round"; src: url("../fonts/ploni-round-regular-aaa.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ploni Round"; src: url("../fonts/ploni-round-medium-aaa.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ploni Round"; src: url("../fonts/ploni-round-demibold-aaa.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Ploni Round"; src: url("../fonts/ploni-round-bold-aaa.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Ploni Round"; src: url("../fonts/ploni-round-ultrabold-aaa.otf") format("opentype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Ploni"; src: url("../fonts/ploni-regular-aaa.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ploni"; src: url("../fonts/ploni-medium-aaa.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ploni"; src: url("../fonts/ploni-demibold-aaa.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Ploni"; src: url("../fonts/ploni-bold-aaa.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FtOrik"; src: url("../fonts/FtOrik-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }

/* ---------- palette sampled from the ad ---------- */
:root {
  --sky: #4aa6cb;
  --sky-soft: #e8f4f9;
  --navy: #17475e;
  --ink: #2b3a44;
  --red: #e0502f;
  --orange: #ec7a32;
  --amber: #f0a43a;
  --gold: #e3b23c;
  --green: #2f5a43;
  --cream: #f4f6f7;
  --paper: #eef1f3;
  --line: #d9e8ef;
  --grad: linear-gradient(90deg, #f0a43a 0%, #ec7a32 45%, #e0502f 100%);
  --round: "Ploni Round", "Ploni", "Segoe UI", Arial, sans-serif;
  --body: "Ploni", "Ploni Round", "Segoe UI", Arial, sans-serif;
  --hand: "FtOrik", "Ploni Round", cursive;
  --wrap: 1040px;
  --side: clamp(24px, 7vw, 110px);
  --r: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--body); font-size: 19px; line-height: 1.32;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--round); margin: 0; line-height: .84; letter-spacing: -0.015em; }
p { margin: 0 0 .65em; text-wrap: pretty; }
/* headings break into even lines – never a lone word or two on the last line */
h1, h2, h3, .h-md, .capsule, .pull, .you-list li { text-wrap: balance; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--side)); margin-inline: auto; }

/* three logo dots – the ad's bullet */
.dots { display: inline-block; width: 22px; height: 20px; flex: none; position: relative; vertical-align: -2px; }
.dots::before, .dots::after, .dots i { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.dots::before { top: 0; right: 0; }
.dots::after { top: 0; left: 2px; }
.dots i { bottom: 0; right: 6px; }

/* ---------- buttons ---------- */
/* flat capsule with a white disc at its end holding the logo's three dots;
   on hover the icon changes colour and spins once */
.btn {
  --face: var(--grad); --ink-c: #fff; --disc: #fff; --icon: var(--orange); --icon-hover: var(--navy);
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7.6' cy='8.6' r='4'/%3E%3Ccircle cx='16.6' cy='8.6' r='4'/%3E%3Ccircle cx='12.1' cy='16.6' r='4'/%3E%3C/svg%3E");
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--round); font-weight: 800; font-size: 1.15rem; line-height: 1;
  padding: .95em 1.5em; padding-inline-end: 3.35em; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
  color: var(--ink-c); background: var(--face);
}
.btn::before, .btn::after { content: ""; position: absolute; top: 50%; inset-inline-end: .42em; width: 2.2em; height: 2.2em; margin-top: -1.1em; }
.btn::before { border-radius: 50%; background: var(--disc); }
.btn::after {
  background: var(--icon);
  -webkit-mask: var(--i) center / 62% no-repeat; mask: var(--i) center / 62% no-repeat;
  transition: transform .6s cubic-bezier(.4, 1.5, .5, 1), background-color .25s;
}
.btn:hover::after, .btn:focus-visible::after { background: var(--icon-hover); transform: rotate(-360deg); }
.btn.ghost { --face: #fff; --ink-c: var(--red); --disc: var(--grad); --icon: #fff; --icon-hover: var(--navy); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(var(--side), calc((100% - var(--wrap)) / 2));
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px -14px rgba(23, 71, 94, .5);
  transform: translateY(-110%); transition: transform .35s ease;
}
.topbar.show { transform: none; }
.topbar img { height: 44px; width: auto; }
.topbar .btn { font-size: 1rem; padding: .7em 1.1em; padding-inline-end: 3.2em; }

/* ---------- hero: the animated ad ---------- */
/* the ad itself, full width, original proportions – the video is the whole 1414×2000 ad,
   the box shows its illustrated top 1414×1440 (the ad's text block below is set as real text on the page) */
/* cover: the top of the ad (Magnific animation + the ad's sharp texts), full width, never taller than 1080px.
   --H is the natural height of the 1414×1440 scene at full width; anything above 1080px is cropped,
   first from the sky above the headline (up to 130 design rows), then from the bottom. */
.hero {
  --gap: 0px; --H: calc(100vw * 1440 / 1414);
  position: relative; overflow: hidden; background: #fff;
  height: min(var(--H), 1080px);
}
#scene {
  position: absolute; left: 0; width: 100%; aspect-ratio: 1414 / 1440; overflow: hidden;
  top: calc(-1 * max(0px, min(var(--H) - 1080px, var(--H) * 130 / 1440)));
}
#scene video, #scene .sharp, #scene .poster { position: absolute; top: 0; left: 0; width: 100%; max-width: none; }
#scene video { height: calc(100% * 2000 / 1440); object-fit: fill; }
#scene .sharp, #scene .poster { height: 100%; }
#scene .headpatch { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
#scene .headfix { position: absolute; left: calc(100% * 560 / 1414); top: calc(100% * 560 / 1440); width: calc(100% * 320 / 1414); height: calc(100% * 82 / 1440); }
/* live cover text – sized in cqw (1cqw = 1% of the scene width) so it scales exactly with the visual.
   --hs is the headline size: 1 = as in the ad */
#scene { container-type: inline-size; --hs: 1; }
@media (min-width: 900px) { #scene { --hs: .6; } }
#scene .hero-title {
  position: absolute; left: calc(100% * 720 / 1414); bottom: calc(100% * (1440 - 528) / 1440); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; font-family: var(--round);
}
#scene .hero-title .t-sm { font-weight: 700; color: #0b4f68; font-size: calc(3.9cqw * var(--hs)); line-height: .82; margin-bottom: calc(.9cqw * var(--hs)); }
#scene .hero-title .t-lg { font-weight: 800; color: #fff; font-size: calc(10cqw * var(--hs)); line-height: .8; letter-spacing: -.01em; }
#scene .hero-banner {
  position: absolute; left: calc(100% * 370 / 1414); top: calc(100% * 535 / 1440); width: calc(100% * 696 / 1414); height: calc(100% * 84 / 1440);
  transform: rotate(2deg); /* follows the slant of the video's own pill, so it stays above the boy's head */
  display: grid; place-items: center; border-radius: 999px;
  background: linear-gradient(90deg, #e05a30 0%, #e8823a 45%, #eda93a 100%);
  font-family: var(--round); font-weight: 800; color: #fff; font-size: 4.5cqw; line-height: 1; padding-bottom: .3cqw;
}
/* hide the start of the ad's own text block (right of the stamp) */
#scene::after { content: ""; position: absolute; background: #fff; top: calc(100% * 1398 / 1440); bottom: 0; left: calc(100% * 470 / 1414); right: 0; }
.hero-cta {
  position: absolute; z-index: 2; inset: auto 0 calc(var(--gap) + 2.5%) 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.hero-cta .kicker { font-family: var(--round); font-weight: 600; font-size: 1.05rem; color: var(--navy); background: rgba(255,255,255,.85); padding: .35em 1em; border-radius: 999px; }
.scroll-hint { width: 26px; height: 40px; border: 2px solid var(--navy); border-radius: 14px; position: relative; opacity: .6; }
.scroll-hint::after { content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--navy); animation: hint 1.6s infinite; }
@keyframes hint { 0% { transform: translateY(0); opacity: 1 } 80% { transform: translateY(12px); opacity: 0 } 100% { opacity: 0 } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- section scaffolding ---------- */
section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.eyebrow { font-family: var(--hand); font-size: 2rem; line-height: 1.1; color: var(--orange); display: block; margin-bottom: .2em; transform: rotate(-2deg); }
.h-xl { font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 800; color: var(--navy); }
.h-lg { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; color: var(--navy); }
.h-md { font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 700; color: var(--navy); line-height: .9; }
/* the ad's orange capsule ("ככה מקדמים היום קריאה!") used as a heading frame */
.capsule {
  display: inline-block; background: var(--grad); color: #fff; font-family: var(--round); font-weight: 800;
  line-height: .95; padding: .2em .75em .26em; border-radius: 999px;
}
.capsule.sky { background: var(--sky); }
.capsule.white { background: #fff; color: var(--red); }
.c-red { color: var(--red); }
.c-orange { color: var(--orange); }
.c-sky { color: var(--sky); }
.c-gold { color: var(--gold); }
.c-navy { color: var(--navy); }
.lead { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.25; }
.strong { font-family: var(--round); font-weight: 700; color: var(--navy); }
.dotline { border: 0; height: 4px; margin: 1.6em 0; background: radial-gradient(circle, var(--sky) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x; }

/* ---------- intro / pain ---------- */
.intro { padding-top: clamp(40px, 6vw, 80px); }
.intro-head { max-width: 860px; }
.intro-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 36px; }
.intro-grid .text p { max-width: 58ch; }
.pull {
  margin: 1.2em 0 0; padding: 1em 0 0;
  background: radial-gradient(circle, var(--sky) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x;
  font-family: var(--round); font-weight: 700; font-size: 1.35rem; line-height: 1.05; color: var(--navy);
}
.pull b { color: var(--red); }
.figure-blob { position: relative; }
.figure-blob::before { content: ""; position: absolute; inset: 8% 4% 0; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: var(--paper); z-index: -1; }
.note {
  font-family: var(--hand); color: var(--navy); font-size: 1.9rem; line-height: 1.1;
  position: absolute; transform: rotate(-8deg); white-space: nowrap;
  background: #fff; padding: .35em .8em; border-radius: 18px 18px 18px 4px; box-shadow: 0 10px 22px -14px rgba(23,71,94,.6);
}

.figure-blob { max-width: 440px; margin-inline: auto; width: 100%; }
.figure-blob .photo {
  width: 100%; height: auto; border-radius: 44% 56% 40% 60% / 38% 42% 58% 62%;
  border: 8px solid #fff; box-shadow: 0 28px 50px -30px rgba(23, 71, 94, .6);
}

/* ---------- shared: the ad's dotted rule ---------- */
.dotted-top { background: radial-gradient(circle, var(--dotc, var(--sky)) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x; padding-top: 22px; }

/* ---------- program stats – like the ad's feature row ---------- */
.program { background: #fff; padding-top: 0; }
.program .h-lg { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 34px; margin-top: 40px; }
.stat { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-content: start; }
.stat .dots { margin-top: .5em; }
.stat .num { font-family: var(--round); font-weight: 800; font-size: 3.4rem; line-height: .82; display: block; }
.stat .num.word { font-size: 2.3rem; line-height: .9; }
.stat h3 { font-size: 1.5rem; font-weight: 700; line-height: .86; margin: .12em 0 .25em; }
.stat p { margin: 0; font-size: 1.05rem; line-height: 1.12; color: #4b5963; }
.stat > :not(.dots) { grid-column: 2; }
.stat .dots { grid-row: 1; }
.stat:nth-child(1) { color: var(--sky); }
.stat:nth-child(2) { color: var(--red); }
.stat:nth-child(3) { color: var(--gold); }
.stat:nth-child(4) { color: var(--navy); }
.stat .num, .stat h3 { color: inherit; }

/* ---------- curriculum (bag) ---------- */
.bag { background: var(--cream); }
/* 7 topics: 4 on top, 3 below – everything on the page aligns to the right, like the ad */
.topics { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 36px; margin-top: 34px; }
.topic { flex: 0 0 calc((100% - 3 * 36px) / 4); }
.topic { padding: 22px 0 24px; background: radial-gradient(circle, var(--sky) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x; }
.topic h3 { display: flex; gap: 8px; align-items: center; font-size: 1.55rem; font-weight: 800; margin-bottom: .3em; }
.topic p { margin: 0; color: #4b5963; font-size: 1.08rem; line-height: 1.18; }
.topic .em { display: block; font-family: var(--round); font-weight: 700; color: var(--orange); }
.topic:nth-child(4n+1) h3 { color: var(--sky); }
.topic:nth-child(4n+2) h3 { color: var(--red); }
.topic:nth-child(4n+3) h3 { color: var(--gold); }
.topic:nth-child(4n+4) h3 { color: var(--navy); }
.topic h3 .dots { color: inherit; }

/* ---------- outcome ---------- */
.outcome-grid { max-width: 820px; text-align: center; }
.outcome .eyebrow { display: inline-block; }
.outcome .lead { max-width: 620px; margin-inline: auto; }
.banner-pill { font-size: clamp(1.35rem, 2.6vw, 2rem); margin-top: 22px; }

/* ---------- why ---------- */
.why { background: var(--sky); color: #fff; }
.why .h-lg { color: #fff; }
.why .capsule.white { color: var(--red); }
.why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 34px; --dotc: rgba(255,255,255,.75); }
.why-item { padding: 22px 0 26px; background: radial-gradient(circle, var(--dotc) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x; }
.why-item h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; color: #fff; margin-bottom: .3em; display: flex; gap: 10px; align-items: center; }
.why-item h3 .dots { color: var(--amber); }
.why-item p { margin: 0; font-size: 1.12rem; line-height: 1.2; color: #f2fbff; }

/* ---------- testimonials – speech bubbles like the ad's hand-written notes ---------- */
.voices { background: var(--cream); }
.voices-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.strip-nav { display: flex; gap: 10px; flex: none; }
.arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-family: var(--round); font-weight: 800; font-size: 1.5rem; line-height: 1;
  box-shadow: 0 10px 22px -12px rgba(224, 80, 47, .7); transition: transform .2s;
}
.arrow:hover { transform: scale(1.08); }
/* one horizontal strip, every card the same height; starts on the page's right margin and runs to the screen edge */
.voices-grid {
  --pad: max(var(--side), calc((100% - var(--wrap)) / 2));
  display: flex; align-items: stretch; gap: 22px; margin-top: 34px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 8px var(--pad) 26px; scrollbar-width: thin; scrollbar-color: var(--amber) transparent;
}
.voices-grid::-webkit-scrollbar { height: 8px; }
.voices-grid::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 8px; }
.voices-grid .voice { flex: 0 0 min(360px, 80vw); scroll-snap-align: start; }
.voice {
  display: flex; flex-direction: column; background: #fff; padding: 24px 24px 20px;
  border-radius: 28px 28px 28px 6px; position: relative;
}
.voice h3 { font-size: 1.35rem; font-weight: 800; color: var(--navy); margin-bottom: .5em; line-height: .88; }
.voice .body { font-size: 1.02rem; line-height: 1.3; color: #44525c; }
.voice .body p { margin: 0 0 .6em; }
.voices-grid .voice .body p:not(:first-child) { display: none; }
.voices-grid .voice .body p:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.voice .more { align-self: flex-start; }
.voice footer { margin-top: auto; }
.voice .more + footer, .voice .body + footer { margin-top: auto; }
/* full testimonial */
dialog.quote-dlg { border: 0; padding: 0; background: transparent; width: min(92vw, 620px); max-height: 88vh; }
dialog.quote-dlg::backdrop { background: rgba(10, 30, 40, .6); }
dialog.quote-dlg .voice { padding: 34px 32px 26px; max-height: 88vh; overflow: auto; }
dialog.quote-dlg .voice h3 { font-size: 1.7rem; }
dialog.quote-dlg .voice .body { font-size: 1.12rem; }
dialog.quote-dlg button[data-close] { position: absolute; z-index: 2; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cream); color: var(--navy); font-size: 1.5rem; cursor: pointer; }
.more { background: none; border: 0; padding: 0; margin-top: 4px; font-family: var(--round); font-weight: 700; font-size: 1rem; color: var(--orange); cursor: pointer; }
.voice footer { padding-top: 14px; margin-bottom: 0; background: radial-gradient(circle, var(--sky) 1.4px, transparent 1.8px) 0 0 / 10px 4px repeat-x; }
.voice cite { font-style: normal; font-family: var(--hand); font-size: 1.7rem; line-height: 1; color: var(--red); }
.voice small { display: block; color: #6a7780; font-size: .9rem; line-height: 1.2; margin-top: 4px; }
.voice.pro { background: var(--sky); }
.voice.pro h3 { color: #fff; }
.voice.pro .body { color: #f2fbff; }
.voice.pro cite { color: #fff; }
.voice.pro small { color: #e3f3fa; }
.voice.pro footer { --c: #fff; background: radial-gradient(circle, rgba(255,255,255,.8) 1.4px, transparent 1.8px) 0 0 / 10px 4px repeat-x; }

/* ---------- about – the ad's round stamp ---------- */
.about-grid { display: grid; grid-template-columns: .85fr 1.3fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.about-card { position: sticky; top: 100px; align-self: center; text-align: center; }
.stamp { position: relative; width: min(340px, 80vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.stamp-in { position: relative; width: 58%; aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--gold); display: grid; place-content: center; gap: 4px; }
.stamp-in .big { font-family: var(--round); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: .85; color: var(--red); }
.stamp-in .lbl { font-family: var(--round); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--navy); padding: 0 14px; }
.stamp-in .dots { color: var(--orange); margin: 0 auto 6px; transform: scale(1.3); }
@keyframes spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .stamp svg { animation: none; } }
/* the two figures together span the stamp's width */
.about-card .row { width: min(340px, 80vw); margin: 22px auto 0; display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.about-card .row span { font-family: var(--round); font-weight: 800; font-size: clamp(4.2rem, 7vw, 5.6rem); line-height: .8; display: block; color: var(--sky); }
.about-card .row div:last-child span { color: var(--orange); }
.about-card .row small { display: block; margin-top: 6px; font-family: var(--round); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1; color: var(--navy); }
.about-text .h-md { margin-bottom: .6em; }
.mission { margin-top: 1.4em; padding: 22px 0 6px; background: radial-gradient(circle, var(--sky) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x; }
.mission p:last-child { margin: 0; }
.mission .strong { font-size: 1.3rem; line-height: 1.05; }

/* ---------- is it you ---------- */
.you { background: #fff; }
.you-list { list-style: none; padding: 0; margin: 30px 0 0; }
.you-list li {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 0;
  background: radial-gradient(circle, var(--sky) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x;
  font-family: var(--round); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.02; color: var(--navy);
}
.you-list li .dots { margin-top: 2px; }
.you-list li:nth-child(1) .dots { color: var(--red); }
.you-list li:nth-child(2) .dots { color: var(--sky); }
.you-list li:nth-child(3) .dots { color: var(--gold); }
.you-close { margin-top: 10px; padding-top: 22px; max-width: 820px; background: radial-gradient(circle, var(--sky) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x; }

/* ---------- CTA ---------- */
.cta { background: var(--grad); color: #fff; overflow: hidden; text-align: center; }
.cta .h-xl { color: #fff; max-width: 820px; margin-inline: auto; }
.cta .lead { max-width: 640px; margin: 18px auto 26px; color: #fff7ee; }
/* contact form – a notebook page: ruled sky lines, red margin, a sentence to complete in the ad's handwriting */
.contact-form {
  --rule: 2.6rem; --top: 56px;
  position: relative; max-width: 860px; margin: 10px auto 0; text-align: right; color: var(--navy);
  padding: var(--top) clamp(22px, 6vw, 92px) 30px clamp(22px, 4vw, 60px);
  border-radius: 6px 6px 26px 26px;
  background:
    linear-gradient(90deg, transparent calc(100% - clamp(16px, 4.5vw, 70px)), #f08f86 0 calc(100% - clamp(16px, 4.5vw, 70px) + 2px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1.5px), #cfe6f0 0 var(--rule)) 0 calc(var(--top) - .2rem) / 100% calc(100% - var(--top)) no-repeat,
    #fff;
  box-shadow: 0 2px 0 #eef1f3, 0 6px 0 -1px #fff, 0 7px 0 #e6eaed, 0 32px 60px -34px rgba(90, 25, 8, .75);
  transform: rotate(-.6deg);
}
/* spiral binding along the top */
.contact-form::before {
  content: ""; position: absolute; top: -12px; left: 40px; right: 40px; height: 26px;
  background: radial-gradient(circle at 50% 70%, var(--orange) 0 5px, transparent 5.5px) 0 0 / 34px 26px repeat-x;
}
.contact-form::after {
  content: ""; position: absolute; top: -18px; left: 40px; right: 40px; height: 22px;
  background: radial-gradient(ellipse 6px 11px at 50% 100%, transparent 4px, #9fb3be 4.5px 6px, transparent 6.5px) 0 0 / 34px 22px repeat-x;
}
/* fields sit on the notebook rules: label on the right, the writing area runs along the line */
.lines { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
.line { display: flex; align-items: flex-end; gap: 14px; height: var(--rule); }
.line.full:has(textarea) { height: calc(var(--rule) * 2); align-items: flex-start; }
.line.full:has(textarea) > span { padding-top: calc(var(--rule) - 1.2rem - .55rem); }
.line.full { grid-column: 1 / -1; }
.line > span {
  flex: none; white-space: nowrap; font-family: var(--round); font-weight: 700; font-size: 1.2rem; line-height: 1; color: var(--navy);
  padding-bottom: .55rem;
}
.line small { font-weight: 500; font-size: .85rem; color: #7c8a93; }
.line input, .line textarea {
  flex: 1; min-width: 0; font: inherit; font-size: 1.15rem; color: var(--ink);
  border: 0; outline: 0; background: transparent; resize: none;
  height: var(--rule); padding: 0 .3em .45rem; border-bottom: 2px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.line input { unicode-bidi: plaintext; text-align: right; }
.line textarea { height: calc(var(--rule) * 2); line-height: var(--rule); padding-top: 0; padding-bottom: 0; }
.line input:focus, .line textarea:focus { border-bottom-color: var(--orange); background-color: rgba(240, 164, 58, .07); }
.line.bad > span { color: var(--red); }
.line.bad input { border-bottom-color: var(--red); }
.send-row { display: flex; justify-content: flex-start; margin-top: 22px; }
.contact-form .submit { font-size: clamp(1.1rem, 2vw, 1.3rem); padding: .85em 1.6em; padding-inline-end: 3.4em; }
.form-msg { margin: 10px 0 0; min-height: 1.3em; font-family: var(--round); font-weight: 700; color: var(--navy); }
.form-msg.err { color: var(--red); }
.form-msg a { color: inherit; }
.contact-form.sent .lines, .contact-form.sent .send-row { display: none; }
.contact-form.sent .form-msg { font-size: clamp(1.5rem, 3vw, 2rem); line-height: var(--rule); padding: 0 0 var(--rule); }
.hp { position: absolute; left: -9999px; }
.cta .or { margin: 26px 0 12px; font-family: var(--round); font-weight: 600; color: #fff7ee; }
.cta .start { display: inline-block; font-family: var(--hand); font-size: 2.3rem; margin-bottom: 8px; transform: rotate(-2deg); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta .btn.ghost { color: var(--red); }
.cta .contact { margin-top: 26px; font-family: var(--round); font-weight: 600; font-size: 1.1rem; }
.cta .contact a { text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.5); }

footer.site { padding: 34px 0 110px; color: #6a7780; font-size: .95rem; }
footer.site .wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
footer.site img { width: 110px; }
footer.site .site-link { margin-top: 8px; font-size: 1.05rem; }

/* ---------- ad dialog ---------- */
dialog.ad { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); }
dialog.ad::backdrop { background: rgba(10, 30, 40, .72); backdrop-filter: blur(4px); }
dialog.ad img { border-radius: 18px; max-height: 86vh; width: auto; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
dialog.ad button { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); font-size: 1.5rem; cursor: pointer; }

/* ---------- mobile sticky CTA ---------- */
.mobile-cta { display: none; }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.9,.25,1.2); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* capsules pop in and get the ad's banner shine */
.capsule { position: relative; overflow: hidden; }
.reveal .capsule, .capsule.reveal { transform: scale(.6) rotate(-4deg); opacity: 0; transition: transform .7s cubic-bezier(.3,1.6,.4,1) .15s, opacity .3s .15s; }
.reveal.in .capsule, .capsule.reveal.in { transform: none; opacity: 1; }
.capsule::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); transform: skewX(-20deg);
  animation: shine 4.5s ease-in-out infinite 1.2s;
}
.capsule.white::after { background: linear-gradient(90deg, rgba(240,164,58,0), rgba(240,164,58,.35), rgba(240,164,58,0)); }
@keyframes shine { 0%, 55% { left: 130%; } 85%, 100% { left: -60%; } }

/* three dots hop one after another, like niqqud */
.in .dots::before, .in .dots::after, .in .dots i, .dots.in::before, .dots.in::after, .dots.in i { animation: hop .7s cubic-bezier(.3,1.6,.4,1) both; }
.in .dots::before { animation-delay: calc(var(--i, 0) * 90ms + .25s); }
.in .dots::after { animation-delay: calc(var(--i, 0) * 90ms + .35s); }
.in .dots i { animation-delay: calc(var(--i, 0) * 90ms + .45s); }
@keyframes hop { 0% { transform: translateY(0) scale(0); } 50% { transform: translateY(-9px) scale(1.15); } 100% { transform: none; } }
.stat:hover .dots::before, .topic:hover .dots::before, .why-item:hover .dots::before, .you-list li:hover .dots::before { animation: hop .6s both; }
.stat:hover .dots::after, .topic:hover .dots::after, .why-item:hover .dots::after, .you-list li:hover .dots::after { animation: hop .6s .08s both; }
.stat:hover .dots i, .topic:hover .dots i, .why-item:hover .dots i, .you-list li:hover .dots i { animation: hop .6s .16s both; }

/* dotted rules draw in from the right */
hr.dotline { transform-origin: right; }
.reveal hr.dotline, hr.dotline.reveal { transform: scaleX(0); transition: transform 1.2s ease-out .2s; }
.reveal.in hr.dotline, hr.dotline.reveal.in { transform: none; }

/* handwriting writes itself right → left */
.reveal .eyebrow, .eyebrow.reveal, .reveal .start { clip-path: inset(0 0 0 100%); transition: clip-path 1.2s ease-out .25s; }
.reveal.in .eyebrow, .eyebrow.reveal.in, .reveal.in .start { clip-path: inset(0 0 0 -10%); }

/* photos float, notes wobble */
.figure-blob .photo { animation: floaty 6s ease-in-out infinite; }
.outcome .figure-blob .photo { animation-delay: -3s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.note { animation: wobble 3.2s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-3deg) translateY(-4px); } }

/* buttons */

/* floating niqqud marks in the coloured bands */
.float-marks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.float-marks span {
  position: absolute; bottom: -60px; font-family: var(--round); font-weight: 800; line-height: 1; color: #fff; opacity: 0;
  animation: rise var(--d, 12s) linear infinite; animation-delay: var(--delay, 0s);
}
@keyframes rise {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  12% { opacity: var(--o, .35); }
  85% { opacity: var(--o, .35); }
  100% { transform: translateY(calc(-1 * var(--h, 700px))) rotate(var(--r, 40deg)); opacity: 0; }
}
.why .wrap, .cta .wrap { position: relative; z-index: 1; }

/* testimonials pop like speech bubbles */
.voice.reveal { transform: translateY(24px) scale(.94); transform-origin: bottom left; }
.voice.reveal.in { transform: none; }
.voice { transition: transform .3s ease, box-shadow .3s ease; }
.voice.in:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 18px 34px -24px rgba(23, 71, 94, .6); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal .capsule, .capsule.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; }
  .reveal .eyebrow, .eyebrow.reveal, .reveal .start { clip-path: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
/* below ~1100px four columns get too narrow for the titles – go to two */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 34px; }
  .topic { flex-basis: calc((100% - 36px) / 2); }
}
@media (max-width: 920px) {
  .intro-grid, .outcome-grid, .about-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 34px; }
  .topic { flex-basis: calc((100% - 36px) / 2); }
  .about-card { position: relative; top: 0; }
  .outcome-grid .figure-blob { order: 2; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 600px) {
  body { font-size: 17.5px; }
  .stats, .why-list { grid-template-columns: 1fr; }
  .topic { flex-basis: 100%; }
  .contact-form { --top: 64px; transform: none; }
  .lines { grid-template-columns: 1fr; }
  .contact-form .submit { width: 100%; justify-content: center; }
  .voices-head .strip-nav { display: none; }
  .stat { padding-bottom: 14px; }
  .topbar .btn { display: none; }
  .hero-cta .btn { display: none; }
  .mobile-cta {
    display: flex; position: fixed; z-index: 60; inset: auto 12px 12px 12px; justify-content: center;
    transform: translateY(140%); transition: transform .35s ease;
  }
  .mobile-cta.show { transform: none; }
  .mobile-cta .btn { width: 100%; justify-content: center; }
  .note { display: none; }
}