:root {
  --cream: #fff8e8;
  --paper: #fffdf7;
  --ink: #242039;
  --muted: #686176;
  --purple: #6941c6;
  --purple-dark: #4f2aa8;
  --purple-soft: #eee7ff;
  --coral: #ff705c;
  --coral-soft: #ffe3da;
  --teal: #17ae9f;
  --teal-soft: #dcf7f1;
  --yellow: #ffc843;
  --yellow-soft: #fff0b5;
  --line: #ded5c7;
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: "Commissioner", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-150%);
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  padding: 9px 13px;
  font-weight: 900;
}
.skip-link:focus { transform: none; }
.site-shell { position: relative; isolation: isolate; overflow: hidden; }
.background { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.orb { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(5px); opacity: .17; }
.orb-a { top: 80px; right: -190px; background: var(--purple); }
.orb-b { top: 950px; left: -240px; background: var(--coral); }
.orb-c { top: 2900px; right: -230px; background: var(--teal); }
.code-symbol { position: absolute; color: var(--purple); font: 700 64px/1 "Comfortaa", sans-serif; opacity: .06; }
.code-a { top: 730px; right: 4%; transform: rotate(-10deg); }
.code-b { top: 2100px; left: 3%; transform: rotate(13deg); }
.code-c { top: 3900px; right: 4%; transform: rotate(-8deg); }
.content-width { width: min(1180px, calc(100% - 48px)); margin-right: auto; margin-left: auto; }

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 94px;
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  border-bottom: 1px solid rgba(36,32,57,.13);
}
.wordmark { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.wordmark-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--purple);
  box-shadow: 3px 3px 0 var(--ink);
  color: white;
  font: 700 14px/1 "Comfortaa", sans-serif;
  transform: rotate(-3deg);
}
.wordmark-copy { display: grid; font: 700 19px/.9 "Comfortaa", sans-serif; letter-spacing: .02em; }
.wordmark-copy strong { color: #4aaada; text-shadow: 1px 1px 0 var(--ink); }
.wordmark-copy em { color: var(--yellow); font-style: normal; text-shadow: 1px 1px 0 var(--ink); }
.desktop-nav { display: flex; justify-content: center; gap: 30px; }
.desktop-nav a { position: relative; font-size: 15px; font-weight: 900; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 3px; border-radius: 3px; background: var(--coral); content: ""; transform: scaleX(0); transition: transform .18s ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.header-cta {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 9px 17px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  transition: transform .16s ease, box-shadow .16s ease;
}
.header-cta:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px,2px); }
.mobile-menu { display: none; }

.hero {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: clamp(30px,6vw,80px);
  min-height: 710px;
  padding: 72px 0 85px;
}
.eyebrow, .kicker { margin: 0 0 19px; color: var(--purple); font-size: 13px; font-weight: 900; letter-spacing: .13em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow > span { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--teal); }
.hero h1, .section-heading h2, .how-grid h2, .founder-copy h2, .faq-heading h2, .final-cta h2 {
  margin: 0;
  font-family: "Comfortaa", system-ui, "Segoe UI", sans-serif;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.hero h1 strong { color: var(--purple); font-weight: 700; }
.hero-lede { max-width: 620px; margin: 27px 0 30px; color: var(--muted); font-size: 20px; line-height: 1.7; }
.button-row { display: flex; flex-wrap: wrap; gap: 13px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 55px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 12px 23px;
  font-weight: 900;
  line-height: 1.2;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button > span { font-size: 22px; line-height: 0; }
.button-primary { background: var(--purple); box-shadow: 5px 5px 0 var(--ink); color: white; }
.button-primary:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(3px,3px); }
.button-ghost { background: rgba(255,255,255,.7); }
.button-ghost:hover { background: white; transform: translateY(-2px); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--purple); transform: translateY(-2px); }
.button-yellow { background: var(--yellow); box-shadow: 5px 5px 0 white; color: var(--ink); }
.button-yellow:hover { box-shadow: 2px 2px 0 white; transform: translate(3px,3px); }
.trust-list { display: flex; flex-wrap: wrap; gap: 11px 22px; margin: 26px 0 0; padding: 0; color: var(--muted); list-style: none; font-size: 14px; font-weight: 800; }
.trust-list li { display: flex; align-items: center; gap: 6px; }
.trust-list span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-soft); color: #08786d; }

.hero-art {
  position: relative;
  min-height: 510px;
  border: 3px solid var(--ink);
  border-radius: 46% 54% 48% 52% / 42% 39% 61% 58%;
  background: var(--purple-soft);
  box-shadow: 10px 10px 0 var(--ink);
}
.hero-art::before { position: absolute; inset: 27px; border: 2px dashed rgba(105,65,198,.28); border-radius: inherit; content: ""; }
.wizard { position: absolute; top: -65px; left: 50%; z-index: 4; font-size: 94px; filter: drop-shadow(4px 5px 0 rgba(36,32,57,.2)); transform: translateX(-50%) rotate(-3deg); }
.art-pill { position: absolute; z-index: 5; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); padding: 8px 13px; font: 700 15px/1 "Comfortaa",sans-serif; }
.art-ai { top: 60px; right: 8px; background: var(--yellow); transform: rotate(7deg); }
.art-scratch { top: 104px; left: -22px; background: var(--coral); color: #fff; transform: rotate(-8deg); }
.art-code { right: -20px; bottom: 84px; background: var(--teal); color: #fff; transform: rotate(8deg); }
.laptop { position: absolute; top: 140px; left: 50%; width: 76%; transform: translateX(-50%) rotate(1deg); }
.laptop-screen { position: relative; aspect-ratio: 1.42; overflow: hidden; border: 4px solid var(--ink); border-radius: 21px 21px 10px 10px; background: #2c2945; box-shadow: 7px 7px 0 rgba(36,32,57,.2); }
.screen-bar { display: flex; gap: 5px; height: 24px; padding: 8px 10px; background: #3d3859; }
.screen-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.screen-bar i:nth-child(2) { background: var(--yellow); }
.screen-bar i:nth-child(3) { background: var(--teal); }
.screen-code { display: grid; gap: 12px; width: 40%; padding: 18px; }
.screen-code i { width: 100%; height: 9px; border-radius: 9px; background: #a58cec; }
.screen-code i:nth-child(2) { width: 75%; margin-left: 17px; background: var(--coral); }
.screen-code i:nth-child(3) { width: 57%; margin-left: 34px; background: var(--teal); }
.screen-game { position: absolute; right: 17px; bottom: 17px; width: 43%; height: 59%; overflow: hidden; border: 2px solid rgba(255,255,255,.7); border-radius: 13px; background: #8dd7ef; }
.screen-game::after { position: absolute; right: -10px; bottom: -24px; left: -10px; height: 50%; border-radius: 50% 50% 0 0; background: #5dcb81; content: ""; }
.screen-game > span { position: absolute; top: 9px; left: 12px; color: var(--yellow); font-size: 25px; }
.screen-game > strong { position: absolute; right: 12px; bottom: 17px; z-index: 2; font-size: 34px; }
.screen-game > i { position: absolute; bottom: 8px; left: 12px; z-index: 2; width: 24px; height: 24px; border: 2px solid var(--ink); background: var(--coral); }
.screen-game > i:last-child { left: 34px; background: var(--yellow); }
.laptop-base { width: 114%; height: 24px; margin-left: -7%; border: 4px solid var(--ink); border-radius: 3px 3px 18px 18px; background: #cac3d6; }
.laptop-base span { display: block; width: 50px; height: 6px; margin: 0 auto; border-radius: 0 0 8px 8px; background: var(--ink); }
.idea-card { position: absolute; bottom: 20px; left: 20px; z-index: 6; display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink); border-radius: 16px; background: white; box-shadow: 4px 4px 0 var(--ink); padding: 10px 14px; transform: rotate(-2deg); }
.idea-card > span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: var(--yellow-soft); }
.idea-card div { display: grid; line-height: 1.25; }
.idea-card strong { font-size: 13px; }
.idea-card small { color: var(--muted); font-size: 10px; font-weight: 800; }

.section { padding: 125px 0; }
.section-heading { margin-bottom: 52px; }
.section-heading.centered { max-width: 760px; margin-right: auto; margin-left: auto; text-align: center; }
.section-heading h2, .how-grid h2, .founder-copy h2, .faq-heading h2 { font-size: clamp(39px,4.2vw,58px); }
.section-heading > p:last-child, .section-heading.split > p, .faq-heading > p:last-child { color: var(--muted); }
.section-heading.centered > p:last-child { max-width: 640px; margin: 18px auto 0; }
.section-heading.split { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 80px; }
.section-heading.split > p { margin: 0; font-size: 18px; }

.path-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
.path-card { position: relative; display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: 28px; background: rgba(255,255,255,.78); box-shadow: 5px 5px 0 var(--ink); padding: 33px; }
.path-card.featured { background: var(--purple-soft); box-shadow: 8px 8px 0 var(--purple); transform: translateY(-10px); }
.ribbon { position: absolute; top: 18px; right: -8px; border: 2px solid var(--ink); border-radius: 999px 0 0 999px; background: var(--coral); padding: 4px 11px 4px 14px; color: white; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
/* Title and icon share one row. The icon used to hold a line of its own,
   which cost every card 64px plus the heading's 24px top margin — moving it
   sideways rearranged the top without reclaiming any of that. */
.path-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
/* Specificity rather than source order: `.path-card h3` is declared further
   down this file and would otherwise win its 24px margin straight back. */
.path-card .path-head h3 { margin: 0; }
.path-icon { flex: 0 0 auto; display: grid; place-items: center; width: 61px; height: 61px; border: 2px solid var(--ink); border-radius: 19px; background: var(--yellow-soft); font-size: 30px; transform: rotate(-3deg); }
/* With the title now at the top of the card, a ribbon hanging off the side
   would land on it. So it sits on the top edge instead — still on the left,
   but out of the content's way entirely. The price cards already do this.

   Scoped to .path-card on purpose: the base .ribbon is shared with the price
   cards, which position from the right, and setting `left` globally would
   leave those pinned by both edges. */
.path-card .ribbon {
  top: -14px; right: auto; left: 24px;
  border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  padding: 4px 13px;
}
.path-card:nth-child(2) .path-icon { background: var(--coral-soft); }
.path-card:nth-child(3) .path-icon { background: var(--teal-soft); }
.path-card h3, .learn-card h3 { margin: 24px 0 11px; font: 700 26px/1.16 "Comfortaa",sans-serif; }
.path-card > p { min-height: 85px; margin: 0; color: var(--muted); }
.path-card ul { display: grid; gap: 8px; margin: 23px 0 29px; padding: 21px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; font-weight: 800; }
.path-card li { display: flex; align-items: center; gap: 8px; }
.path-card li span { color: var(--teal); }
.path-card .button { width: 100%; margin-top: auto; padding-right: 17px; padding-left: 17px; font-size: 14px; }

.dark-section { width: 100%; background: var(--ink); color: white; }
.dark-section .kicker { color: #bda9ff; }
.dark-section .section-heading > p { color: #c8c1d3; }
.learn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 23px; }
.learn-card { position: relative; min-height: 390px; overflow: hidden; border: 2px solid rgba(255,255,255,.72); border-radius: 29px; padding: 32px; }
.learn-card::after { position: absolute; right: -55px; bottom: -55px; width: 170px; height: 170px; border: 2px dashed rgba(255,255,255,.23); border-radius: 50%; content: ""; }
.learn-purple { background: #6b48c7; }
.learn-teal { background: #087f76; }
.learn-coral { background: #b64c45; }
.learn-icon { display: grid; place-items: center; width: 61px; height: 61px; border-radius: 18px; background: rgba(255,255,255,.16); font-size: 29px; }
.learn-label { margin: 23px 0 0; font-size: 11px; font-weight: 900; letter-spacing: .12em; opacity: .74; }
.learn-card > p:not(.learn-label) { color: rgba(255,255,255,.82); font-size: 15px; }
.learn-card > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 23px; }
.learn-card > div span { border: 1px solid rgba(255,255,255,.43); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; }

.how-grid, .founder-grid, .faq-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(55px,8vw,110px); }
.class-visual { position: relative; min-height: 500px; border: 2px solid var(--ink); border-radius: 32px; background: var(--teal-soft); box-shadow: var(--shadow); }
.video-window { position: absolute; inset: 68px 40px 58px; overflow: hidden; border: 3px solid var(--ink); border-radius: 22px; background: white; transform: rotate(-2deg); }
.video-bar { display: flex; align-items: center; gap: 6px; height: 35px; border-bottom: 2px solid var(--ink); background: var(--purple); padding: 0 11px; color: white; }
.video-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.video-bar i:nth-child(2) { background: var(--yellow); }
.video-bar i:nth-child(3) { background: var(--teal); }
.video-bar small { margin-left: 6px; font-size: 9px; font-weight: 900; }
.video-body { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; height: calc(100% - 35px); background: #ece8f8; padding: 10px; }
.video-body > div { position: relative; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--ink); border-radius: 12px; }
.video-body > div:first-child { background: var(--yellow-soft); }
.video-body > div:first-child > span { font-size: 69px; }
.video-body > div:last-child { grid-template-columns: 1fr .8fr; align-content: center; background: #8cd7ef; }
.video-body > div:last-child > span { font-size: 52px; }
.video-body > div:last-child > i { width: 70%; height: 7px; margin: 5px; border-radius: 6px; background: var(--purple); }
.video-body > div:last-child > i:nth-of-type(2) { background: var(--coral); }
.video-body > div:last-child > i:nth-of-type(3) { background: var(--teal); }
.video-body small { position: absolute; right: 7px; bottom: 6px; left: 7px; border-radius: 7px; background: rgba(36,32,57,.82); padding: 3px 6px; color: white; font-size: 8px; font-weight: 800; }
.orbit { position: absolute; z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--ink); font: 700 20px/1 "Comfortaa",sans-serif; }
.orbit-code { top: 22px; right: -24px; background: var(--coral); color: white; transform: rotate(9deg); }
.orbit-star { bottom: 24px; left: -26px; background: var(--yellow); color: var(--purple); transform: rotate(-8deg); }
.steps { display: grid; margin: 34px 0 27px; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 47px 1fr; gap: 16px; border-top: 1px solid var(--line); padding: 20px 0; }
.steps li > span { color: var(--coral); font: 700 14px/1.4 "Comfortaa",sans-serif; }
.steps h3 { margin: 0 0 4px; font: 700 20px/1.2 "Comfortaa",sans-serif; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
.text-link { color: var(--purple); font-weight: 900; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; text-underline-offset: 5px; }

.founder-grid { border-top: 1px solid var(--line); }
.founder-visual { max-width: 440px; margin: auto; }
.founder-visual > div { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 46% 54% 49% 51% / 52% 43% 57% 48%; background: radial-gradient(circle at 74% 23%,var(--yellow) 0 14%,transparent 14.5%),radial-gradient(circle at 27% 77%,var(--coral) 0 16%,transparent 16.5%),var(--purple-soft); box-shadow: 9px 9px 0 var(--ink); }
.founder-visual > div > span { display: grid; place-items: center; width: 155px; height: 155px; border: 3px solid var(--ink); border-radius: 50%; background: var(--purple); color: white; font: 700 52px/1 "Comfortaa",sans-serif; }
.founder-visual > div > small { position: absolute; bottom: 62px; border: 1px dashed var(--muted); border-radius: 999px; background: rgba(255,255,255,.76); padding: 4px 10px; color: var(--muted); font-size: 10px; font-weight: 800; }
.founder-visual > p { position: relative; display: grid; max-width: 350px; margin: -41px auto 0; border: 2px solid var(--ink); border-radius: 16px; background: white; box-shadow: 4px 4px 0 var(--ink); padding: 12px 17px; transform: rotate(-2deg); }
.founder-visual > p strong { font-family: "Comfortaa",sans-serif; }
.founder-visual > p span { color: var(--muted); font-size: 11px; font-weight: 800; }
.founder-copy > p:not(.kicker) { color: var(--muted); }
.value-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.value-pills span { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.66); padding: 6px 10px; font-size: 12px; font-weight: 800; }

.faq-grid { align-items: start; }
.faq-heading { position: sticky; top: 34px; }
.faq-heading > p:last-child { margin-top: 24px; }
.faq-heading a { color: var(--purple); font-weight: 900; text-decoration: underline; }
.faq-list { display: grid; gap: 11px; }
.faq-list details { border: 2px solid var(--ink); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 3px 3px 0 var(--ink); }
/* The question sits in a tinted box, the answer on white. Colouring the block
   rather than the text keeps the question at full contrast and still lets you
   skim the questions without reading the answers.

   16px, not 18px: the container is 18px with a 2px border, so its inner corner
   is 16px and the tint follows it exactly. */
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; cursor: pointer; border-radius: 16px; background: var(--purple-soft); font-family: "Comfortaa",sans-serif; font-weight: 700; list-style: none; }
.faq-list details[open] summary { border-bottom: 2px solid var(--ink); border-radius: 16px 16px 0 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--purple); font-size: 21px; transition: transform .16s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 16px 20px 21px; color: var(--muted); font-size: 15px; }
/* A multi-paragraph answer would otherwise stack 21px of bottom padding on
   16px of top padding and open a 37px hole mid-answer. */
.faq-list details p:not(:last-of-type) { padding-bottom: 0; }
.faq-list details p + p { padding-top: 12px; }

.final-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; overflow: hidden; margin-bottom: 105px; border: 3px solid var(--ink); border-radius: 34px; background: var(--purple); box-shadow: 8px 8px 0 var(--ink); padding: 53px 60px; color: white; }
.final-cta > div { position: relative; z-index: 2; max-width: 720px; }
.final-cta .kicker { color: #d6c9ff; }
.final-cta h2 { font-size: clamp(34px,4vw,52px); }
.final-cta p:last-child { margin-bottom: 0; color: #ded5f3; }
.final-cta .button { position: relative; z-index: 2; flex: 0 0 auto; }
.cta-star { position: absolute; right: 28%; bottom: -50px; color: rgba(255,255,255,.11); font-size: 120px; transform: rotate(12deg); }

.site-footer { border-top: 2px solid var(--ink); background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.8fr .7fr 1fr; gap: 78px; width: min(1180px,calc(100% - 48px)); margin: auto; padding: 62px 0; }
.footer-grid > div { display: flex; flex-direction: column; gap: 8px; }
.footer-grid > div:first-child p { max-width: 430px; color: var(--muted); }
.footer-grid h2 { margin: 7px 0 12px; font: 700 15px/1 "Comfortaa",sans-serif; letter-spacing: .05em; }
.footer-grid > div:not(:first-child) a { color: var(--muted); font-size: 14px; font-weight: 700; }
.footer-grid a:hover, .footer-bottom a:hover { color: var(--purple); }
/* Contact links carry an icon. Outline style at 2px, inheriting currentColor,
   so they pick up the muted grey and the purple hover for free — and match the
   line weight the rest of the site draws with. The labels stay: an icon on its
   own would lose the email address, which is the useful part. */
.footer-contact a { display: inline-flex; align-items: center; gap: 9px; }
.footer-contact svg { flex: 0 0 auto; }
.footer-bottom { display: flex; justify-content: space-between; width: min(1180px,calc(100% - 48px)); margin: auto; border-top: 1px solid var(--line); padding: 20px 0 25px; color: var(--muted); font-size: 12px; font-weight: 700; }
.footer-bottom p { margin: 0; }
.footer-bottom div { display: flex; gap: 20px; }

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 12px; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { display: grid; gap: 4px; width: 42px; height: 42px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 10px 9px; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary i { display: block; height: 3px; border-radius: 3px; background: var(--ink); }
  .mobile-menu nav { position: absolute; top: 52px; right: 0; display: grid; min-width: 220px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 5px 5px 0 var(--ink); padding: 10px; }
  .mobile-menu nav a { border-radius: 10px; padding: 8px 10px; font-weight: 800; }
  .mobile-menu nav a:hover { background: var(--purple-soft); }
  .hero { grid-template-columns: 1fr; padding-top: 55px; }
  .hero-copy { text-align: center; }
  .eyebrow, .button-row, .trust-list { justify-content: center; }
  .hero-lede { margin-right: auto; margin-left: auto; }
  .hero-art { width: min(620px,90%); margin: 55px auto 0; }
  .path-grid, .learn-grid { grid-template-columns: 1fr; }
  .path-card.featured { transform: none; }
  .path-card > p { min-height: 0; }
  .section-heading.split { grid-template-columns: 1fr; gap: 20px; }
  .how-grid, .founder-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-heading { position: static; }
  .footer-grid { grid-template-columns: 1.3fr .7fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .content-width, .site-header, .footer-grid, .footer-bottom { width: min(100% - 30px,1180px); }
  .site-header { min-height: 78px; }
  .wordmark-mark { width: 39px; height: 39px; border-radius: 12px; font-size: 12px; }
  .wordmark-copy { font-size: 15px; }
  .header-cta { display: none; }
  .hero { min-height: auto; padding: 45px 0 80px; }
  .hero-lede { font-size: 18px; }
  .button-row { display: grid; }
  .button { width: 100%; }
  .trust-list { display: grid; text-align: left; }
  .hero-art { width: calc(100% - 10px); min-height: 410px; }
  .wizard { top: -48px; font-size: 72px; }
  .laptop { top: 115px; width: 82%; }
  .art-ai { top: 44px; }
  .art-scratch { top: 91px; left: -9px; }
  .art-code { right: -9px; bottom: 72px; }
  .idea-card { bottom: 14px; left: 7px; }
  .section { padding: 92px 0; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2, .how-grid h2, .founder-copy h2, .faq-heading h2 { font-size: 39px; }
  .path-card, .learn-card { padding: 26px; }
  .class-visual { min-height: 360px; }
  .video-window { inset: 54px 22px 43px; }
  .orbit { width: 57px; height: 57px; font-size: 15px; }
  .founder-visual > div > span { width: 125px; height: 125px; font-size: 42px; }
  .final-cta { display: grid; width: min(100% - 30px,1180px); margin-bottom: 78px; padding: 37px 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { display: grid; gap: 11px; }
  .footer-bottom div { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Free course */
.free-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(45px,7vw,100px);
  min-height: 710px;
  padding: 75px 0 105px;
}
.free-copy h1, .legal-header h1, .not-found h1 {
  margin: 0;
  font-family: "Comfortaa",sans-serif;
  font-size: clamp(48px,5.1vw,72px);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.free-copy > p:not(.eyebrow) { max-width: 660px; color: var(--muted); font-size: 20px; line-height: 1.7; }
.free-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.free-points li { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); padding: 6px 10px; font-size: 13px; font-weight: 800; }
.free-points span { color: var(--teal); }
.signup-card { position: relative; border: 3px solid var(--ink); border-radius: 32px; background: white; box-shadow: 9px 9px 0 var(--ink); padding: 42px; transform: rotate(1deg); }
.signup-card::after { position: absolute; right: -17px; bottom: -19px; z-index: -1; width: 95px; height: 95px; border-radius: 50%; background: var(--coral); content: ""; }
.signup-badge { position: absolute; top: -28px; right: 25px; display: grid; place-items: center; width: 74px; height: 74px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font: 700 25px/1 "Comfortaa",sans-serif; transform: rotate(8deg); }
.signup-card h2 { margin: 0; font: 700 34px/1.1 "Comfortaa",sans-serif; }
.signup-card > p:not(.kicker) { margin-bottom: 25px; color: var(--muted); }
.course-form > label:first-child { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 900; }
.form-row { display: grid; gap: 10px; }
.form-row input { width: 100%; min-height: 55px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); padding: 12px 15px; color: var(--ink); outline: none; }
.form-row input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px var(--purple-soft); }
.form-row .button { width: 100%; border-radius: 14px; }
.form-row .button:disabled { cursor: wait; opacity: .7; }
.consent-row { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.consent-row input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--purple); }
.form-note { margin: 13px 0 0; border-radius: 9px; background: var(--yellow-soft); padding: 7px 9px; color: #5d4a0a; font-size: 10px; font-weight: 800; }
.form-status { min-height: 22px; margin-top: 10px; color: var(--purple); font-size: 12px; font-weight: 900; }
.privacy-mini { margin-top: 12px; color: var(--muted); font-size: 10px; text-align: center; }
.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.benefit-grid article { border: 2px solid var(--ink); border-radius: 24px; background: rgba(255,255,255,.74); box-shadow: 5px 5px 0 var(--ink); padding: 29px; }
.benefit-grid article > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--purple-soft); font-size: 29px; }
.benefit-grid article:nth-child(2) > span { background: var(--teal-soft); }
.benefit-grid article:nth-child(3) > span { background: var(--coral-soft); }
.benefit-grid h3, .free-steps h3 { margin: 20px 0 8px; font: 700 23px/1.15 "Comfortaa",sans-serif; }
.benefit-grid p, .free-steps p { margin: 0; color: var(--muted); }
.free-steps { width: 100%; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--teal-soft); }
.free-steps ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.free-steps li { position: relative; border: 2px solid var(--ink); border-radius: 23px; background: white; box-shadow: 5px 5px 0 var(--ink); padding: 28px; }
.free-steps li > span { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 700 18px/1 "Comfortaa",sans-serif; }
.course-next { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; margin-top: 105px; margin-bottom: 105px; border: 3px solid var(--ink); border-radius: 30px; background: var(--coral-soft); box-shadow: 7px 7px 0 var(--ink); padding: 42px; }
.course-next > div:first-child { font-size: 68px; }
.course-next h2 { margin: 0; font: 700 34px/1.12 "Comfortaa",sans-serif; }
.course-next > div > p:last-child { margin-bottom: 0; color: var(--muted); }
.course-next .button { white-space: nowrap; }

/* Legal */
.legal-page { padding: 90px 0 120px; }
.legal-header { max-width: 850px; margin-bottom: 35px; }
.legal-header h1 { font-size: clamp(50px,6vw,78px); }
.legal-header > p:last-child { color: var(--muted); }
.legal-alert { display: grid; gap: 5px; border: 2px solid #9b7600; border-radius: 18px; background: var(--yellow-soft); padding: 17px 20px; color: #5f4a05; }
.legal-alert strong { font-family: "Comfortaa",sans-serif; }
.legal-alert span { font-size: 13px; }
.legal-layout { display: grid; grid-template-columns: 250px 1fr; align-items: start; gap: 70px; margin-top: 60px; }
.legal-layout > nav { position: sticky; top: 25px; display: grid; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.64); padding: 17px; }
.legal-layout > nav p { margin: 0 0 10px; font: 700 14px/1 "Comfortaa",sans-serif; }
.legal-layout > nav a { border-radius: 9px; padding: 6px 8px; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.35; }
.legal-layout > nav a:hover { background: var(--purple-soft); color: var(--purple); }
.legal-content { max-width: 770px; }
.legal-content > p:first-child { margin-top: 0; color: var(--muted); font-size: 19px; }
.legal-content section { scroll-margin-top: 25px; border-top: 1px solid var(--line); padding: 29px 0 20px; }
.legal-content h2 { margin: 0 0 10px; font: 700 27px/1.2 "Comfortaa",sans-serif; }
.legal-content p { margin: 0; color: var(--muted); }
.legal-content a { color: var(--purple); font-weight: 800; text-decoration: underline; }
.not-found { display: grid; place-items: center; min-height: 650px; padding: 80px 0; text-align: center; }
.not-found > span { font-size: 105px; }
.not-found h1 { max-width: 720px; }
.not-found > p:not(.kicker) { margin-bottom: 28px; color: var(--muted); font-size: 19px; }
.not-found .button { width: auto; }

@media (max-width: 980px) {
  .free-hero { grid-template-columns: 1fr; }
  .free-copy { text-align: center; }
  .free-copy .eyebrow, .free-points { justify-content: center; }
  .signup-card { width: min(620px,100%); margin: auto; }
  .benefit-grid, .free-steps ol { grid-template-columns: 1fr; }
  .course-next { grid-template-columns: auto 1fr; }
  .course-next .button { grid-column: 1 / -1; width: 100%; }
  .legal-layout { grid-template-columns: 1fr; gap: 25px; }
  .legal-layout > nav { position: static; display: none; }
}

@media (max-width: 680px) {
  .free-hero { min-height: auto; padding: 58px 0 90px; }
  .free-copy h1, .legal-header h1, .not-found h1 { font-size: 42px; }
  .free-copy > p:not(.eyebrow) { font-size: 18px; }
  .signup-card { padding: 32px 23px; transform: none; }
  .signup-badge { right: 15px; }
  .course-next { grid-template-columns: 1fr; margin-top: 80px; margin-bottom: 80px; padding: 30px 23px; text-align: center; }
  .course-next > div:first-child { font-size: 55px; }
  .course-next .kicker { text-align: center; }
  .legal-page { padding: 60px 0 90px; }
  .legal-alert { padding: 15px; }
}

/* ---------- Credentials strip ---------- */
.creds-strip { width: 100%; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--purple-soft); }
.creds-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; width: min(1180px,calc(100% - 48px)); margin: auto; padding: 34px 0; }
.creds-grid div { display: flex; align-items: center; gap: 12px; }
.creds-grid span { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 3px 3px 0 var(--ink); font-size: 20px; }
.creds-grid p { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.35; }
.creds-grid small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }

/* ---------- Pricing ---------- */
.pricing-section { width: 100%; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); }
.billing-toggle { display: flex; justify-content: center; margin: 0 0 14px; }
.billing-toggle div { display: inline-flex; gap: 5px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 4px 4px 0 var(--ink); padding: 5px; }
.billing-toggle button { border: 0; border-radius: 999px; background: transparent; padding: 10px 20px; color: var(--muted); font-family: "Commissioner", sans-serif; font-size: 14px; font-weight: 900; cursor: pointer; transition: background .16s ease, color .16s ease; }
.billing-toggle button[aria-pressed="true"] { background: var(--purple); color: #fff; }
.billing-note { margin: 0 0 40px; color: var(--muted); font-size: 14px; font-weight: 700; text-align: center; }
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: start; gap: 24px; }
.price-card { position: relative; display: flex; flex-direction: column; height: 100%; border: 2px solid var(--ink); border-radius: 26px; background: #fff; box-shadow: 6px 6px 0 var(--ink); padding: 32px 28px; }
.price-card.featured { border-width: 3px; background: var(--purple); box-shadow: 9px 9px 0 var(--ink); color: #fff; }
.price-card.featured .price-meta, .price-card.featured .price-list li { color: #ded5f3; }
.price-card.featured .price-per { color: #d6c9ff; }
.price-card .ribbon { position: absolute; top: -15px; right: 22px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); padding: 5px 14px; color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.price-name { margin: 0; font: 700 27px/1 "Comfortaa", sans-serif; }
.price-meta { margin: 8px 0 22px; color: var(--muted); font-size: 14px; font-weight: 800; }
.price-amount { display: flex; align-items: baseline; gap: 7px; font-family: "Comfortaa", sans-serif; }
.price-amount strong { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.price-per { color: var(--muted); font-size: 15px; font-weight: 600; }
.price-month { margin: 9px 0 24px; font-size: 14px; font-weight: 800; }
.price-list { display: grid; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 15px; }
.price-list li { display: flex; gap: 9px; color: var(--muted); font-weight: 700; }
.price-list li > span { flex: 0 0 auto; color: var(--teal); font-weight: 900; }
.price-card.featured .price-list li > span { color: var(--yellow); }
.price-card .button { margin-top: auto; justify-content: center; width: 100%; }
.price-footnote { margin: 34px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; }
.price-footnote a { color: var(--purple); font-weight: 900; text-decoration: underline; }

@media (max-width: 980px) {
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: auto; }
  .price-card.featured { order: -1; }
}
@media (max-width: 680px) {
  .creds-grid { grid-template-columns: 1fr; gap: 16px; padding: 26px 0; }
  .billing-toggle button { padding: 9px 15px; font-size: 13px; }
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta { display: none; }
@media (max-width: 680px) {
  .mobile-cta {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 60;
    display: flex; align-items: center; gap: 12px;
    border-top: 2px solid var(--ink);
    background: rgba(255,253,247,.97);
    box-shadow: 0 -4px 18px rgba(36,32,57,.13);
    padding: 11px 15px calc(11px + env(safe-area-inset-bottom));
    backdrop-filter: blur(6px);
  }
  .mobile-cta p { flex: 1; margin: 0; font-size: 13px; font-weight: 800; line-height: 1.25; }
  .mobile-cta p small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
  .mobile-cta .button { width: auto; flex: 0 0 auto; padding: 12px 18px; font-size: 14px; }
  .site-shell { padding-bottom: 78px; }
  /* comfortable tap targets */
  .mobile-menu nav a, .faq-list summary, .footer-grid a, .footer-bottom a { min-height: 44px; display: flex; align-items: center; }
  .footer-grid > div:not(:first-child) a { font-size: 15px; }
}

/* ============ Real brand assets ============ */
[hidden] { display: none !important; }
img { max-width: 100%; }

/* Logo replaces the CW lettermark. White plate so the blue mark reads
   against the dark ink border at small sizes. */
img.wordmark-mark { background: #fff; object-fit: contain; padding: 2px; }

/* Founder photo replaces the initials circle */
.founder-visual > div > img {
  width: 155px; height: 155px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #fff;
}

/* ============ Mobile corrections ============ */

/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content and punch out of the viewport. This was pushing the
   free-course signup card to 408px inside a 360px screen. */
.hero > *, .free-hero > *, .how-grid > *, .founder-grid > *,
.faq-grid > *, .section-heading.split > *, .course-next > *,
.price-card > *, .path-card > *, .learn-card > * { min-width: 0; }
.signup-card, .price-card, .path-card, .learn-card { max-width: 100%; }

/* Long Greek words (χρησιμοποιεί, Πραγματικές) are wide enough to overflow a
   narrow screen at display sizes. Let them break rather than run off-screen. */
h1, h2, h3, .price-name, .hero h1, .signup-card h2 { overflow-wrap: break-word; }

@media (max-width: 680px) {
  /* Tighten vertical rhythm: the page ran to 17 screens on a phone */
  .section { padding: 58px 0; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2, .how-grid h2, .founder-copy h2, .faq-heading h2 { font-size: 34px; }
  .hero { padding: 36px 0 52px; }
  .hero-lede { margin-top: 20px; margin-bottom: 24px; }
  .hero-art { min-height: 330px; }
  .creds-grid { padding: 22px 0; }
  .final-cta { margin-bottom: 56px; padding: 32px 24px; }
  .footer-grid { padding: 40px 0; gap: 26px; }
  .course-next { margin-top: 58px; margin-bottom: 58px; }
  .free-hero { padding: 40px 0 58px; }
  .founder-visual > div > img { width: 125px; height: 125px; }
}

@media (max-width: 680px) {

  /* these badges deliberately overhang their card; off a full-width card on a
     phone that means off the screen */
  .orbit { width: 52px; height: 52px; font-size: 14px; }
  .orbit-code { right: -6px; top: 14px; }
  .orbit-star { left: -6px; bottom: 14px; }

  /* density: forced card heights were the bulk of the remaining scroll */
  .learn-card { min-height: 0; padding: 24px; }
  .path-card { padding: 24px; }
  .price-card { padding: 26px 22px; }
  .price-list { gap: 9px; margin-bottom: 22px; }
  .price-meta { margin-bottom: 16px; }
  .class-visual { min-height: 300px; }
  .hero-art { min-height: 300px; }
  .section { padding: 48px 0; }
  .creds-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .creds-grid p { font-size: 13px; }
  .creds-grid span { flex: 0 0 38px; width: 38px; height: 38px; font-size: 17px; }
  .steps li { margin-bottom: 18px; }
  .benefit-grid, .free-steps ol { gap: 16px; }
}

@media (max-width: 680px) {
  /* At 11vw the headline wrapped to seven lines and filled the whole first
     screen, pushing the lede and both CTAs below the fold. */
  .hero-lede { font-size: 16.5px; line-height: 1.55; margin-top: 16px; margin-bottom: 20px; }
  .trust-list { margin-top: 18px; gap: 6px; font-size: 14px; }
  .eyebrow { margin-bottom: 14px; font-size: 11.5px; letter-spacing: .1em; }
  .hero { padding-top: 26px; }
}

/* ============ Thank-you page ============ */
.thanks-page { padding: 70px 0 110px; }
.thanks-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.thanks-mark {
  display: inline-grid; place-items: center;
  width: 92px; height: 92px; margin-bottom: 24px;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--yellow); box-shadow: 6px 6px 0 var(--ink);
  font-size: 44px; transform: rotate(-6deg);
}
.thanks-head h1 {
  margin: 0;
  font-family: "Comfortaa", system-ui, sans-serif;
  font-size: clamp(34px, 5vw, 56px); font-weight: 700;
  line-height: 1.08; letter-spacing: -.02em;
  overflow-wrap: break-word;
}
.thanks-lede { margin: 20px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }

.thanks-steps { display: grid; gap: 16px; max-width: 780px; margin: 0 auto; padding: 0; list-style: none; }
.thanks-steps li {
  display: grid; grid-template-columns: 46px 1fr; align-items: start; gap: 18px;
  border: 2px solid var(--ink); border-radius: 22px;
  background: rgba(255,255,255,.76); box-shadow: 5px 5px 0 var(--ink); padding: 24px 26px;
}
.thanks-steps li > span {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--purple);
  color: #fff; font: 700 19px/1 "Comfortaa", sans-serif;
}
.thanks-steps li:nth-child(2) > span { background: var(--teal); }
.thanks-steps li:nth-child(3) > span { background: var(--coral); }
.thanks-steps h2 { margin: 6px 0 7px; font: 700 21px/1.2 "Comfortaa", sans-serif; }
.thanks-steps p { margin: 0; color: var(--muted); font-size: 15px; }

.thanks-note {
  display: grid; gap: 5px; max-width: 780px; margin: 26px auto 0;
  border: 2px dashed rgba(36,32,57,.4); border-radius: 18px;
  background: var(--yellow-soft); padding: 17px 20px;
}
.thanks-note strong { font-family: "Comfortaa", sans-serif; }
.thanks-note span { color: var(--muted); font-size: 14px; }
.thanks-note a { color: var(--purple); font-weight: 800; text-decoration: underline; }

.thanks-next {
  display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 40px;
  max-width: 900px; margin: 60px auto 0;
  border: 3px solid var(--ink); border-radius: 30px;
  background: var(--purple-soft); box-shadow: 7px 7px 0 var(--ink); padding: 38px 40px;
}
.thanks-next h2 { margin: 0 0 10px; font: 700 clamp(24px,3vw,32px)/1.15 "Comfortaa", sans-serif; }
.thanks-next p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
.thanks-actions { display: grid; gap: 11px; }
.thanks-actions .button { justify-content: center; width: 100%; }

@media (max-width: 980px) {
  .thanks-next { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 680px) {
  .thanks-page { padding: 44px 0 70px; }
  .thanks-head { margin-bottom: 32px; }
  .thanks-mark { width: 74px; height: 74px; font-size: 35px; margin-bottom: 18px; }
  .thanks-lede { font-size: 16px; }
  .thanks-steps li { grid-template-columns: 38px 1fr; gap: 14px; padding: 20px; }
  .thanks-steps li > span { width: 38px; height: 38px; font-size: 16px; }
  .thanks-next { padding: 28px 22px; margin-top: 42px; }
}

/* ============ Icons moved to the top-right of their cards ============ */
/* Stacking the icon above the text added its full height to every card.
   Pulling it out of flow lets the copy start at the top instead. */
.learn-card { position: relative; }
.learn-icon { position: absolute; top: 26px; right: 26px; width: 54px; height: 54px; font-size: 26px; }
.learn-label { margin-top: 0; padding-right: 68px; }
.learn-card h3 { padding-right: 68px; }

.benefit-grid article { position: relative; }
.benefit-grid article > span { position: absolute; top: 22px; right: 22px; width: 50px; height: 50px; font-size: 25px; }
.benefit-grid h3 { margin-top: 0; padding-right: 62px; }

/* ============ Pricing page ============ */
.pricing-page { padding: 62px 0 100px; }
.pricing-head h1 {
  margin: 0;
  font-family: "Comfortaa", system-ui, sans-serif;
  font-size: clamp(38px, 5vw, 62px); font-weight: 700;
  line-height: 1.06; letter-spacing: -.02em; overflow-wrap: break-word;
}
.pricing-head > p:last-child { max-width: 620px; margin: 18px auto 0; color: var(--muted); }
.pricing-faq { display: grid; gap: 11px; max-width: 780px; margin: 64px auto 0; }
.pricing-faq details { border: 2px solid var(--ink); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 3px 3px 0 var(--ink); }
.pricing-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; cursor: pointer; border-radius: 16px; background: var(--purple-soft); font-family: "Comfortaa",sans-serif; font-weight: 700; list-style: none; }
.pricing-faq details[open] summary { border-bottom: 2px solid var(--ink); border-radius: 16px 16px 0 0; }
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--purple); font-size: 21px; transition: transform .16s ease; }
.pricing-faq details[open] summary span { transform: rotate(45deg); }
.pricing-faq details p { margin: 0; padding: 16px 20px 20px; color: var(--muted); font-size: 15px; }

/* ============ /free as a standalone landing page ============ */
/* Ads point here, so the email capture has to be reachable without scrolling. */
.free-copy h1 { font-size: clamp(30px, 3.6vw, 44px); }
.free-copy > p:not(.eyebrow) { font-size: 17px; }
.free-points { grid-column: 1 / -1; justify-content: center; margin-top: 30px; }

@media (max-width: 680px) {
  .free-hero { padding: 24px 0 44px; gap: 22px; }
  .free-copy h1 { font-size: clamp(23px, 6.6vw, 30px); line-height: 1.15; }
  .free-copy > p:not(.eyebrow) { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
  .free-copy .eyebrow { margin-bottom: 10px; }
  .signup-card { padding: 24px 18px; }
  .signup-card h2 { font-size: 25px; }
  .signup-card > p:not(.kicker) { margin-bottom: 16px; font-size: 14px; }
  .signup-badge { top: -20px; right: 16px; width: 56px; height: 56px; font-size: 19px; }
  .form-row input { min-height: 50px; }
  .privacy-mini { font-size: 12px; }

  /* three across, still legible */
  .free-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
  .free-points li { flex-direction: column; justify-content: flex-start; gap: 3px; padding: 9px 5px; font-size: 11.5px; line-height: 1.25; text-align: center; }
  .free-points span { font-size: 13px; }
}

/* ============ Condensed mobile footer ============ */
@media (max-width: 680px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 28px 0 22px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:first-child p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; }
  .footer-grid > div { gap: 1px; }
  .footer-grid h2 { margin: 0 0 5px; font-size: 13px; }
  .footer-grid > div:not(:first-child) a { font-size: 13.5px; }
  /* the 44px tap target added ~300px of dead space across seven links */
  .footer-grid a, .footer-bottom a { min-height: 32px; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { padding: 14px 0 18px; }
}

/* A still from the lesson, in a laptop the same shape as the one drawn on the
   homepage — same 4px frame, same hinge, same shadow — so the two read as one
   illustration language rather than a photo dropped into a drawing.

   The screen keeps the image's own 1456x816 aspect, so nothing is cropped and
   nothing shifts while it loads. */
/* The homepage laptop lets its base overhang the screen by 114%, which works
   there because it floats inside a wider art container. Here the figure already
   fills the column, so an overhang has nowhere to go — at 375px it ran from
   -6px to 381px and was clipped on both sides.

   So the relationship is inverted: the base is the full width of the figure and
   the screen insets into it. Same laptop silhouette, but the outer edge is the
   container's, which means it cannot overflow at any width. */
.free-hero-shot { margin: 0; }
.shot-screen {
  margin: 0 6%;
  overflow: hidden;
  border: 4px solid var(--ink); border-radius: 18px 18px 6px 6px;
  background: #2c2945;
  box-shadow: 6px 6px 0 rgba(36,32,57,.2);
}
.shot-screen img { display: block; width: 100%; height: auto; }
.shot-base {
  width: 100%; height: 20px;
  border: 4px solid var(--ink); border-radius: 3px 3px 16px 16px;
  background: #cac3d6;
}
.shot-base span { display: block; width: 46px; height: 5px; margin: 0 auto; border-radius: 0 0 7px 7px; background: var(--ink); }

/* Desktop: the check pills sit directly under the intro paragraph, in the
   left column, at a larger size. The phone layout (three across, below the
   email form) is left exactly as it is. */
@media (min-width: 681px) {
  .free-hero { align-content: center; row-gap: 26px; }
  .free-copy { grid-column: 1; grid-row: 1; align-self: end; }
  .free-hero-shot {
    grid-column: 1; grid-row: 2;
    align-self: start;
    width: min(100%, 480px);
  }
  .free-points {
    grid-column: 1; grid-row: 3;
    align-self: start;
    justify-content: flex-start;
    margin: 2px 0 0;
  }
  .signup-card { grid-column: 2; grid-row: 1 / span 3; }
  /* the <br> only serves the three-across phone layout */
  .free-points br { display: none; }
}

/* 681-980 is a single column, but the placement above still applied there: the
   card kept `grid-column: 2`, which created an implicit second column, took
   780px of a 940px hero and squeezed the copy to 46px — a headline wrapping
   about one character per line, on the page the ads point at. Windows display
   scaling puts real laptops in this band, so it was not a rare edge.
   Reset the placement and let it stack like the phone layout. */
@media (min-width: 681px) and (max-width: 980px) {
  .free-copy, .free-hero-shot, .free-points, .signup-card {
    grid-column: auto; grid-row: auto;
  }
  .free-hero-shot { width: min(100%, 560px); margin-left: auto; margin-right: auto; }
  .free-points { justify-content: center; margin: 4px 0 0; }
  .free-points li {
    gap: 9px;
    border-width: 2px;
    padding: 11px 15px;
    font-size: 15px;
  }
  .free-points span { font-size: 17px; }
}

/* ============ Schools / Συλλόγοι Γονέων ============ */
.schools-page { padding-bottom: 30px; }
.schools-hero { padding: 62px 0 44px; max-width: 860px; }
.schools-hero h1 {
  margin: 0;
  font-family: "Comfortaa", system-ui, sans-serif;
  font-size: clamp(34px, 4.6vw, 60px); font-weight: 700;
  line-height: 1.06; letter-spacing: -.02em; overflow-wrap: break-word;
}
.schools-lede { max-width: 660px; margin: 20px 0 28px; color: var(--muted); font-size: 19px; line-height: 1.65; }

.schools-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: 20px;
}
.schools-facts > div {
  display: flex; align-items: flex-start; gap: 13px;
  border: 2px solid var(--ink); border-radius: 20px;
  background: rgba(255,255,255,.76); box-shadow: 4px 4px 0 var(--ink); padding: 18px 16px;
}
.schools-facts span {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
  border-radius: 13px; background: var(--purple-soft); font-size: 20px;
}
.schools-facts:nth-child(n) > div:nth-child(2) span { background: var(--teal-soft); }
.schools-facts > div:nth-child(3) span { background: var(--coral-soft); }
.schools-facts > div:nth-child(4) span { background: var(--yellow-soft); }
.schools-facts p { margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.schools-facts small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; font-weight: 700; }

.schools-path { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
.schools-path li {
  display: grid; grid-template-columns: 54px 1fr; align-items: start; gap: 20px;
  border: 2px solid var(--ink); border-radius: 22px;
  background: rgba(255,255,255,.78); box-shadow: 5px 5px 0 var(--ink); padding: 24px 26px;
}
.schools-path li > span {
  display: grid; place-items: center; width: 54px; height: 54px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--purple);
  color: #fff; font: 700 17px/1 "Comfortaa", sans-serif;
}
.schools-path li:nth-child(2) > span { background: var(--teal); }
.schools-path li:nth-child(3) > span { background: var(--coral); }
.schools-path li:nth-child(4) > span { background: var(--yellow); color: var(--ink); }
.schools-path li:nth-child(5) > span { background: var(--ink); }
.schools-path h3 { margin: 8px 0 7px; font: 700 22px/1.2 "Comfortaa", sans-serif; }
.schools-path p { margin: 0; color: var(--muted); font-size: 15.5px; }
.schools-note { max-width: 860px; margin: 26px auto 0; color: var(--muted); font-size: 14.5px; text-align: center; }

.schools-tools { width: 100%; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--teal-soft); }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool-grid article { border: 2px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 5px 5px 0 var(--ink); padding: 26px; }
.tool-grid h3 { margin: 0 0 8px; font: 700 21px/1.2 "Comfortaa", sans-serif; }
.tool-grid p { margin: 0; color: var(--muted); font-size: 15px; }
.schools-req {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 24px; border: 2px dashed rgba(36,32,57,.4); border-radius: 18px;
  background: rgba(255,255,255,.6); padding: 15px 20px; font-size: 15px;
}
.schools-req strong { font-family: "Comfortaa", sans-serif; }
.schools-req span { color: var(--muted); font-weight: 700; }

.schools-contact { display: grid; grid-template-columns: 1fr 1.05fr; align-items: start; gap: clamp(34px, 5vw, 70px); }
.schools-contact h2 { margin: 0 0 12px; font: 700 clamp(30px,4vw,46px)/1.1 "Comfortaa", sans-serif; }
.schools-contact-copy > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.schools-direct { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.schools-direct li { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 800; }
.schools-direct a { color: var(--purple); text-decoration: underline; }

.schools-form {
  display: grid; gap: 14px;
  border: 3px solid var(--ink); border-radius: 28px;
  background: #fff; box-shadow: 8px 8px 0 var(--ink); padding: 30px;
}
.schools-form .field { display: grid; gap: 6px; }
.schools-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.schools-form label { font-size: 13px; font-weight: 900; }
.schools-form label em { color: var(--muted); font-style: normal; font-weight: 700; }
.schools-form input, .schools-form textarea {
  width: 100%; border: 2px solid var(--ink); border-radius: 13px;
  background: var(--paper); padding: 12px 14px;
  color: var(--ink); font: inherit; font-size: 15px; outline: none;
}
.schools-form textarea { resize: vertical; min-height: 96px; }
.schools-form input:focus, .schools-form textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 4px var(--purple-soft); }
.schools-form .button { justify-content: center; width: 100%; margin-top: 4px; }
.form-legal { margin: 0; color: var(--muted); font-size: 12px; }
.form-legal a { color: var(--purple); font-weight: 800; text-decoration: underline; }
.schools-form-slot iframe { display: block; width: 100%; border: 0; }

@media (max-width: 980px) {
  .schools-facts { grid-template-columns: 1fr 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .schools-contact { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .schools-hero { padding: 34px 0 30px; }
  .schools-lede { font-size: 16.5px; margin: 16px 0 22px; }
  .schools-facts { grid-template-columns: 1fr; gap: 12px; }
  .schools-path li { grid-template-columns: 42px 1fr; gap: 15px; padding: 20px; }
  .schools-path li > span { width: 42px; height: 42px; font-size: 15px; }
  .schools-path h3 { font-size: 19px; margin-top: 4px; }
  .schools-form { padding: 22px 18px; }
  .schools-form .field-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ============ Pricing philosophy block ============ */
/* Parent reviews on /pricing, sitting between the prices and the philosophy
   block — right where a parent has just seen the numbers and is deciding
   whether they are worth it.

   Quotes are set as text, not screenshots: screenshot text is fixed-width and
   cannot reflow on a phone, is invisible to search engines and screen readers,
   and carries another person's name and photo. One link below the row carries
   the provenance for all three at once. */
.parent-reviews { max-width: 900px; margin: 62px auto 0; text-align: center; }
.parent-reviews .section-heading { margin-bottom: 24px; }
.parent-reviews h2 { font-size: clamp(26px, 3vw, 34px); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.review-grid figure {
  margin: 0;
  border: 2px solid var(--ink); border-radius: 20px;
  background: #fff; box-shadow: 4px 4px 0 var(--ink);
  padding: 22px 23px;
}
/* Outlined rather than flat: --yellow on white is about 1.7:1, which reads as
   washed out. The ink outline matches the border the card already has, and the
   aria-label carries the meaning for anyone not seeing them. */
.review-stars {
  margin: 0 0 11px; font-size: 17px; letter-spacing: 3px; line-height: 1;
  color: var(--yellow);
  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink);
}
.review-grid blockquote { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.review-source {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px;
  color: var(--purple); font-size: 14.5px; font-weight: 900;
  text-decoration: underline;
}
.review-source svg { flex: 0 0 auto; }

@media (max-width: 860px) {
  .review-grid { grid-template-columns: 1fr; }
}

.philosophy { max-width: 900px; margin: 66px auto 0; }
.philosophy-main { text-align: center; }
.philosophy-main .kicker { display: inline-flex; align-items: center; gap: 7px; }
.philosophy-main h2 {
  margin: 0 0 14px;
  font: 700 clamp(27px, 3.4vw, 40px)/1.12 "Comfortaa", system-ui, sans-serif;
  letter-spacing: -.02em; overflow-wrap: break-word;
}
.philosophy-main > p { max-width: 700px; margin: 0 auto; color: var(--muted); font-size: 16.5px; line-height: 1.65; }
.philosophy-note {
  margin-top: 28px;
  border: 2px solid var(--ink); border-radius: 22px;
  background: var(--teal-soft); box-shadow: 5px 5px 0 var(--ink);
  padding: 24px 26px;
}
.philosophy-note strong { display: block; margin-bottom: 7px; font: 700 19px/1.2 "Comfortaa", sans-serif; }
.philosophy-note p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.philosophy-tip {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 20px 0 0;
  border: 2px dashed rgba(36,32,57,.38); border-radius: 18px;
  background: rgba(255,255,255,.66); padding: 15px 20px;
  font-size: 15.5px; font-weight: 700;
}
.philosophy-tip strong { font-weight: 900; }

/* Six tags per learn card now, so let them wrap tidily */
.learn-card > div { flex-wrap: wrap; }

@media (max-width: 680px) {
  .philosophy { margin-top: 46px; }
  .philosophy-note { padding: 20px; }
  .philosophy-note strong { font-size: 17px; }
  .philosophy-tip { font-size: 14.5px; padding: 14px 16px; }
}

/* ============ "What comes after Scratch" band ============ */
/* Sits inside the dark #learn section, so it reads light-on-dark. */
.learn-next {
  margin-top: 34px;
  border: 2px solid rgba(255,255,255,.28); border-radius: 28px;
  background: rgba(255,255,255,.07);
  padding: 32px 34px 36px;
}
.learn-next > * { min-width: 0; }
/* The copy sits above the tree rather than beside it, so the four paths get
   the full width and can be equal. Capped and centred so the prose does not
   run the whole 1100px. */
.learn-next-copy { max-width: 820px; margin: 0 auto 34px; }
.learn-next .kicker { color: var(--yellow); margin-bottom: 12px; }
.learn-next h3 {
  margin: 0 0 12px;
  font: 700 clamp(21px, 2.4vw, 28px)/1.18 "Comfortaa", system-ui, sans-serif;
  color: #fff; overflow-wrap: break-word;
}
.learn-next p { margin: 0; color: rgba(255,255,255,.82); font-size: 15.5px; line-height: 1.6; }

.learn-next-copy p + p { margin-top: 12px; }

/* Scratch is the trunk; the four routes out of it are siblings, not a queue.
   The old .learn-ladder implied a single fixed order, which contradicted the
   copy beside it — that the route follows the child's own interests. */
/* Laid out sideways: the base on the left, the paths stacked to its right.
   Vertical stacking is what gives each card the width to say something real
   rather than a three-word tag. */
.learn-branches { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 40px; }
.branch-root {
  position: relative; display: grid; gap: 7px;
  width: 268px;
  border: 2px solid var(--ink); border-radius: 16px;
  background: #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  padding: 17px 19px;
}
.branch-root strong { font: 700 20px/1.2 "Comfortaa", sans-serif; color: var(--ink); }
.branch-root small { font-size: 12.5px; font-weight: 600; line-height: 1.5; color: rgba(36,32,57,.78); }
/* The trunk: runs right from the base to meet the spine the cards draw. */
.branch-root::after {
  position: absolute; left: 100%; top: 50%;
  width: 20px; height: 2px; margin-top: -1px;
  background: rgba(255,255,255,.38); content: "";
}
/* Equal rows, so the spine stays symmetrical about the base's centre line
   however long each card's text runs. */
.learn-branches ul {
  display: grid; grid-auto-rows: 1fr; gap: 12px;
  min-width: 0;
  margin: 0; padding: 0; list-style: none;
}
.learn-branches li {
  position: relative;
  border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  padding: 14px 17px;
}
/* On desktop these are plain cards: the summary is inert, so a click cannot
   collapse a card that is meant to stay open. Mobile turns it back on. */
.learn-branches summary { display: flex; align-items: center; gap: 12px; cursor: default; pointer-events: none; list-style: none; }
.learn-branches summary::-webkit-details-marker { display: none; }
/* Each card reaches left to the spine, and every card but the last carries
   the spine down to the next card's centre — so it is anchored to the cards
   themselves and cannot drift as they resize. */
.learn-branches li::before {
  position: absolute; right: 100%; top: 50%;
  width: 20px; height: 2px; margin-top: -1px;
  background: rgba(255,255,255,.38); content: "";
}
.learn-branches li:not(:last-child)::after {
  position: absolute; right: calc(100% + 19px); top: 50%;
  width: 2px; height: calc(100% + 12px);
  background: rgba(255,255,255,.38); content: "";
}
.learn-branches summary > span { flex: 0 0 auto; font-size: 22px; line-height: 1.15; }
.learn-branches li strong { font: 700 16px/1.25 "Comfortaa", sans-serif; }
.learn-branches li small { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.branch-ai { background: var(--teal); }
.branch-code { background: var(--purple); }
.branch-apps { background: var(--coral); }
.branch-eng { background: var(--yellow); }
.branch-ai strong, .branch-code strong, .branch-apps strong { color: #fff; }
.branch-ai small, .branch-code small, .branch-apps small { color: rgba(255,255,255,.85); }
.branch-eng strong { color: var(--ink); }
.branch-eng small { color: rgba(36,32,57,.72); }

/* What accrues regardless of which branch is taken. Deliberately without card
   chrome, so it reads as a footnote to the block above rather than a fourth
   thing competing with it. */
.learn-parallel { margin-top: 30px; border-top: 2px solid rgba(255,255,255,.2); padding-top: 26px; }
.learn-parallel-lede { margin: 0 0 22px; color: rgba(255,255,255,.82); font-size: 15.5px; line-height: 1.6; }
.learn-parallel-lede strong {
  display: block;
  color: #fff; font: 700 17px/1.3 "Comfortaa", system-ui, sans-serif;
}
/* The explanation reads better after the list than before it: the pills are
   the surprise, and this is the answer to "why are these here at all". */
.learn-parallel-note { margin: 22px 0 0; color: rgba(255,255,255,.82); font-size: 15.5px; line-height: 1.6; }
.learn-parallel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.learn-parallel-grid > * { min-width: 0; }
.learn-parallel h4 { margin: 0 0 12px; font: 700 15px/1.2 "Comfortaa", system-ui, sans-serif; color: var(--yellow); }
.learn-parallel-grid > div > div { display: flex; flex-wrap: wrap; gap: 7px; }
.learn-parallel-grid span {
  border: 1px solid rgba(255,255,255,.43); border-radius: 999px;
  padding: 4px 9px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.9);
}

@media (max-width: 880px) {
  /* No room for a side-by-side tree. The base moves on top and the spine goes
     — a short line straight down still reads correctly above a stack.

     The four paths also collapse to an accordion here. Four full descriptions
     ran this section to four screens on a phone; as titles it is one. */
  .learn-branches { grid-template-columns: 1fr; gap: 21px; }
  .branch-root { width: 100%; max-width: none; margin: 0; }
  .learn-branches summary { cursor: pointer; pointer-events: auto; }
  .learn-branches summary::after {
    content: "+"; margin-left: auto;
    display: grid; place-items: center;
    flex: 0 0 27px; width: 27px; height: 27px;
    border-radius: 50%; background: rgba(255,255,255,.3);
    font: 700 19px/1 "Comfortaa", sans-serif;
    transition: rotate .16s ease;
  }
  .learn-branches details[open] summary::after { rotate: 45deg; }
  .learn-branches li small { margin-top: 10px; }
  .branch-root::after {
    left: 50%; top: 100%;
    width: 2px; height: 13px; margin: 0 0 0 -1px;
  }
  .learn-branches ul { grid-auto-rows: auto; }
  .learn-branches li::before,
  .learn-branches li:not(:last-child)::after { display: none; }
  .learn-parallel-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 680px) {
  .learn-next { margin-top: 26px; padding: 24px 20px 28px; border-radius: 22px; }
  .learn-next p { font-size: 14.5px; }
  .learn-next-copy { margin-bottom: 26px; }
  .learn-branches li { padding: 13px 15px; column-gap: 11px; }
  .learn-parallel { margin-top: 26px; padding-top: 22px; }
  .learn-parallel-lede { font-size: 14.5px; }
}

/* ============ Legal pages: identity block and lists ============ */
.legal-identity {
  display: grid; gap: 0;
  margin: 16px 0 20px;
  border: 2px solid var(--ink); border-radius: 18px;
  background: rgba(255,255,255,.7);
  overflow: hidden;
}
.legal-identity > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 14px;
  padding: 11px 18px;
}
.legal-identity > div + div { border-top: 1px solid var(--line); }
.legal-identity dt { margin: 0; color: var(--muted); font-size: 13px; font-weight: 900; }
.legal-identity dd { margin: 0; font-size: 14.5px; font-weight: 700; }
.legal-identity dd a { color: var(--purple); font-weight: 800; text-decoration: underline; }

.legal-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0 0 0 2px; list-style: none; }
.legal-list li {
  position: relative; padding-left: 20px;
  color: var(--muted); font-size: 15.5px; line-height: 1.6;
}
.legal-list li::before {
  position: absolute; top: .55em; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple); content: "";
}
.legal-list strong { color: var(--ink); }
.legal-list em { font-style: normal; font-size: 13.5px; opacity: .85; }
.legal-content section > p + p { margin-top: 12px; }

@media (max-width: 680px) {
  .legal-identity > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 14px; }
  .legal-identity dt { font-size: 11.5px; }
  .legal-list li { font-size: 14.5px; }
}

/* Honeypot field: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

/* ============ Hero fine-tuning for the longer headline ============ */
/* The eyebrow needed ~615px on one line in a 585px column. Tightening the
   tracking from .13em buys back more than enough, without shrinking the type
   or cutting the words. Scoped to the hero so other kickers keep their look. */
.hero .eyebrow { letter-spacing: .07em; }

/* Desktop headline: six lines at 52px was overpowering the section. */
.hero h1 { font-size: clamp(34px, 3.4vw, 46px); }

@media (max-width: 680px) {
  /* Mobile may run to two lines, so only the size is dialled back here. */
  .hero .eyebrow { font-size: 11px; letter-spacing: .05em; }

  /* Mobile headline. Declared here, after the base rule, so it actually wins. */
  .hero h1 { font-size: clamp(23px, 6.4vw, 27px); line-height: 1.18; }

  /* Smaller illustration, so the copy and buttons own more of the first screen */
  .hero-art { min-height: 236px; width: calc(100% - 34px); }
  .wizard { top: -34px; font-size: 54px; }
  .laptop { top: 86px; width: 74%; }
  .idea-card { bottom: 8px; left: 2px; transform: scale(.86); transform-origin: left bottom; }
  .art-pill { font-size: 11px; padding: 5px 10px; }
  .art-ai { top: 30px; }
  .art-scratch { top: 66px; left: -6px; }
  .art-code { right: -6px; bottom: 52px; }
}

/* ============ Hero eyebrow: controlled wrap point ============ */
/* The eyebrow is two nowrap parts, so when it does wrap it always breaks
   before the "·" rather than mid-phrase. The first span is still the dot,
   so the parts have to opt out of the dot styling. */
.eyebrow > span.eb-part {
  width: auto; height: auto;
  border: 0; border-radius: 0; background: none;
  white-space: nowrap;
}
.hero .eyebrow { flex-wrap: wrap; }

/* One line across every desktop width. Between ~980px and ~1150px the hero's
   left column is too narrow for 13px, so the size tracks the viewport. */
.hero .eyebrow { font-size: clamp(9.5px, 1.04vw, 13px); letter-spacing: .07em; }

/* Headline: the new copy is one sentence, so it is set smaller and calmer. */
.hero h1 { font-size: clamp(30px, 3vw, 40px); }

@media (max-width: 680px) {
  .hero .eyebrow { font-size: 11px; letter-spacing: .05em; }
  .hero h1 { font-size: clamp(21px, 5.9vw, 25px); line-height: 1.2; }
}

/* ============ Credentials: three in the strip, two by the founder ============ */
/* The strip carries what can be checked — two figures and the breadth of the
   programme. Still capped rather than stretched to the full width, which is
   what made the cards look stranded before. */
.creds-grid {
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: 22px;
}

/* The two qualifications now sit next to the person they belong to, which is
   where a parent is already asking "who is teaching my child". */
.founder-creds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.founder-creds li {
  display: flex; align-items: center; gap: 11px;
  border: 2px solid var(--ink); border-radius: 18px;
  background: rgba(255,255,255,.72); box-shadow: 4px 4px 0 var(--ink);
  padding: 13px 15px;
}
.founder-creds li > span {
  display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 12px; background: var(--purple-soft); font-size: 19px;
}
.founder-creds strong { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.25; }
.founder-creds small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 700; }

/* Three across holds down to 760px — measured at 223px a card there, with
   nothing clipped. The old 980px breakpoint was set when the strip had two
   items, and it drops a laptop running Windows display scaling into a 2+1
   row: a 1280px screen at 150% reports about 853 CSS pixels. */
@media (max-width: 760px) {
  .creds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two columns for three items leaves an orphan, and at phone widths the third
   title needs the full row anyway. */
@media (max-width: 680px) {
  .creds-grid { grid-template-columns: 1fr; gap: 12px; }
  .founder-creds { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .founder-creds li { padding: 11px 13px; }
}

/* ============================================================
   MOTION

   Everything here animates the individual `scale` / `translate`
   properties rather than `transform`. Several of these elements already
   carry a transform they depend on — the wizard is centred with
   translateX(-50%), the path icons sit at rotate(-3deg) — and those
   compose with the individual properties instead of being overwritten.

   All of it is off for anyone who asks their device for reduced motion.
   ============================================================ */

/* 1. Ambient float — the hero wizard, and nothing else on arrival */
@keyframes cw-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
.wizard { animation: cw-float 4.2s ease-in-out infinite; will-change: translate; }

/* The pieces around the laptop drift too — a shorter throw than the wizard so
   it stays the focal point, and each on its own clock with a negative delay so
   they start mid-cycle instead of bobbing in unison.

   Every one of these carries a rotate() in its base transform, which is
   precisely why this animates `translate` and not `transform`. */
@keyframes cw-float-sm {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
.art-ai      { animation: cw-float-sm 5.1s ease-in-out -0.4s infinite; will-change: translate; }
.art-scratch { animation: cw-float-sm 4.6s ease-in-out -1.9s infinite; will-change: translate; }
.art-code    { animation: cw-float-sm 5.6s ease-in-out -3.2s infinite; will-change: translate; }
.idea-card   { animation: cw-float-sm 4.9s ease-in-out -2.5s infinite; will-change: translate; }

/* The 0€ badge on /free flips like a coin. It holds still for most of the
   cycle and spins briefly — a permanently spinning coin beside a form reads
   as a distraction rather than a flourish, and the badge sits next to the
   field we actually want filled in.

   No perspective is applied on purpose: flat, the flip squashes horizontally,
   which suits the site's sticker-like shapes and hard shadows better than a
   3D tilt would. It also keeps the mirrored half of the spin down to a few
   hundred milliseconds.

   Again `rotate` and not `transform` — the badge is at rotate(8deg). */
@keyframes cw-coin {
  0%, 88% { rotate: y 0deg; }
  100%    { rotate: y 360deg; }
}
.signup-badge { animation: cw-coin 7s ease-in-out 1.5s infinite; will-change: rotate; }

/* The typing caret. Absolutely positioned and moved by script, so it never
   affects the layout or changes where the headline wraps. */
.hero h1 { position: relative; }
.tw-caret {
  position: absolute; z-index: 1;
  width: 2px; border-radius: 2px;
  background: var(--purple);
  animation: cw-caret 1.02s steps(1) infinite;
  pointer-events: none;
}
@keyframes cw-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 2. Entrance pop. The .cw-pop class is added by JavaScript, so nothing is
      ever hidden if the script fails to run. */
@keyframes cw-pop {
  from { opacity: 0; scale: .8; }
  to   { opacity: 1; scale: 1; }
}
.cw-pop { opacity: 0; }
.cw-pop.is-in {
  animation: cw-pop .52s cubic-bezier(.34, 1.42, .64, 1) var(--cw-delay, 0ms) both;
}

/* 3. Hover lift. Pointer-gated so a phone never lands in a stuck hover. */
@media (hover: hover) and (pointer: fine) {
  .path-icon, .learn-icon, .benefit-grid article > span, .founder-creds li > span {
    transition: scale .18s ease, rotate .18s ease;
  }
  .path-card:hover .path-icon,
  .learn-card:hover .learn-icon,
  .benefit-grid article:hover > span { scale: 1.12; rotate: -5deg; }
  .founder-creds li:hover > span { scale: 1.1; rotate: -4deg; }

  /* Packages lift off the page. The shadow lengthens by exactly the distance
     the card rises, so it reads as the same card at a greater height rather
     than a card that grew a bigger shadow. Uses `translate`, like the rest of
     the motion here, so it composes with anything set on `transform`. */
  .price-card { transition: translate .18s ease, box-shadow .18s ease; }
  .price-card:hover { translate: 0 -6px; box-shadow: 9px 12px 0 var(--ink); }
  .price-card.featured:hover { box-shadow: 12px 15px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .wizard, .art-ai, .art-scratch, .art-code, .idea-card, .signup-badge { animation: none; }
  .tw-caret { display: none; }
  .cw-pop, .cw-pop.is-in { opacity: 1; scale: 1; animation: none; }
  /* The rule below only covers animations. The hover effects are transitions,
     so they need saying separately for the claim above to actually hold. */
  .path-icon, .learn-icon, .benefit-grid article > span,
  .founder-creds li > span, .price-card { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* The Premium/Coaching explanation now sits in a box matching the Basic one.
   Purple rather than teal, so the pair reads as two answers to the same
   question and echoes the colours the plan cards already use. */
.philosophy-note-premium { background: var(--purple-soft); margin-top: 24px; }
.philosophy-note-premium em { font-style: normal; font-weight: 900; color: var(--purple); }
.philosophy-main { margin-bottom: 0; }