:root {
      --paper: #FBF6EC;
      --sand: #F3EAD6;
      --ink: #201A15;
      --muted: #665B4E;
      --line: #E4D9C4;
      --gold: #E8A317;
      --sun: #EFC94C;
      --plum: #6B3B7A;
      --leaf: #2F7D5B;
      --sky: #2C6E9B;
      --clay: #C24E2E;
      --rose: #C2185B;
      --display: "Fraunces", Georgia, "Times New Roman", serif;
      --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    /* Android Chrome boosts text size automatically in narrow columns —
       useful on a page with no responsive sizing of its own, but this one
       already sizes its own type per width (clamp(), the header's own
       media query), and the boost fighting that is exactly what pushed
       "EduLessons" past the header's own room and truncated it to
       "EduLess…" on a real phone at a width this same header had already
       been tested at and fit, in a desktop browser's plain narrow-viewport
       emulation, which does not reproduce the boost. */
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; }
    h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.02em; line-height: 1.05; }
    p { margin: 0; }
    .wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
    .skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 20; }
    .skip:focus { left: 8px; }

    /* The weave: the one motif the whole app is built on. */
    .weave { height: 14px; background:
      repeating-linear-gradient(90deg, var(--gold) 0 56px, var(--leaf) 56px 112px, var(--plum) 112px 168px, var(--clay) 168px 224px); }
    .weave.thin { height: 8px; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 14px; font: 700 17px var(--body); white-space: nowrap; text-decoration: none; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); transition: transform .15s; }
    .btn:hover { transform: translateY(-2px); }
    .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
    .btn.ghost { background: transparent; color: var(--ink); }
    .btn.small { min-height: 44px; padding: 0 20px; font-size: 15px; }
    a:focus-visible, .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

    /* Header */
    header { position: sticky; top: 0; z-index: 10; background: rgba(251,246,236,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
    .bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 24px var(--display); letter-spacing: -0.02em; }
    .brand img { width: 40px; height: 40px; border-radius: 10px; }

    /* It was the full brand mark — a 40px icon image plus a 24px wordmark —
       crowding "Open the app" on a narrow phone, not the name itself. The
       icon moved into the menu panel it opens (still one tap away); the
       name stays here, beside the button, considerably lighter without it. */
    .headerLeft { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .headerBrand { font: 700 20px var(--display); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* The button that used to get crowded by the full brand mark must never
       be the one giving up room now either — it holds its size, and the name
       beside it is what adapts (smaller first, only ever truncating as a
       last resort narrower than any real phone gets). */
    .bar > .btn { flex-shrink: 0; }
    .menuBtn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 12px; border: 2px solid var(--ink); background: transparent; cursor: pointer; flex-shrink: 0; }
    .menuBtn:hover { background: var(--sand); }
    .menuBtn svg { width: 24px; height: 24px; }

    .menuOverlay { position: fixed; inset: 0; background: rgba(32,26,21,.45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; }
    .menuOverlay.open { opacity: 1; pointer-events: auto; }
    .menuPanel { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); background: var(--paper); z-index: 31; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; padding: 18px; gap: 2px; box-shadow: 10px 0 30px rgba(32,26,21,.2); overflow-y: auto; }
    .menuPanel.open { transform: translateX(0); }
    .menuHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .menuClose { width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
    .menuClose:hover { background: var(--sand); }
    .menuPanel a:not(.btn) { display: block; padding: 13px 10px; text-decoration: none; font-weight: 700; font-size: 18px; color: var(--ink); border-radius: 10px; }
    .menuPanel a:not(.btn):hover { background: var(--sand); }
    .menuDivider { height: 1px; background: var(--line); margin: 10px 4px; }
    .menuPanel .btn { margin-top: 10px; }

    /* Hero */
    .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 72px 0 80px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
    .eyebrow::before { content: ""; width: 36px; height: 6px; border-radius: 3px; background: var(--gold); }
    .hero h1 { font-size: clamp(46px, 6.6vw, 84px); margin: 18px 0 22px; }
    .hero h1 em { font-style: normal; color: var(--clay); }
    .lede { font-size: 21px; color: var(--muted); max-width: 30em; }
    .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
    .facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 34px 0 0; padding: 0; list-style: none; font-weight: 600; font-size: 15px; color: var(--muted); }
    .facts li::before { content: "✓"; color: var(--leaf); font-weight: 800; margin-right: 8px; }

    /* Subject cards: the front page of the app, as it is. */
    .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; transform: rotate(-3deg); }
    .card { position: relative; overflow: hidden; border-radius: 22px; padding: 22px; min-height: 176px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; box-shadow: 0 14px 30px rgba(32,26,21,.16); text-decoration: none; transition: transform .15s, box-shadow .15s; }
    .card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(32,26,21,.22); }
    .card:nth-child(even):hover { transform: translateY(23px); }
    .card::after { content: ""; position: absolute; right: -22px; top: -22px; width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.16); }
    .card svg { width: 54px; height: 54px; color: currentColor; }
    .card b { font: 700 24px var(--display); letter-spacing: -0.01em; }
    .card span { display: block; font-size: 14px; font-weight: 600; opacity: .9; }
    .card.ink { color: var(--ink); }
    .card:nth-child(even) { transform: translateY(26px); }

    /* Sections */
    section { padding: 88px 0; }
    .head { max-width: 40em; margin-bottom: 44px; }
    .head h2 { font-size: clamp(34px, 4.4vw, 54px); }
    .head p { margin-top: 16px; font-size: 20px; color: var(--muted); }

    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
    .steps li { position: relative; padding: 26px 24px 28px; background: #fff; border: 2px solid var(--ink); border-radius: 20px; }
    .steps .n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 700 26px var(--display); color: #fff; margin-bottom: 18px; }
    .steps li:nth-child(1) .n { background: var(--sky); }
    .steps li:nth-child(2) .n { background: var(--leaf); }
    .steps li:nth-child(3) .n { background: var(--plum); }
    .steps li:nth-child(4) .n { background: var(--clay); }
    .steps h3 { font-size: 26px; margin-bottom: 8px; }
    .steps p { font-size: 16px; color: var(--muted); }

    .sand { background: var(--sand); }
    .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
    .tile { grid-column: span 2; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
    .tile h3 { font-size: 28px; margin-bottom: 10px; }
    .tile p { font-size: 17px; color: var(--muted); }
    .tile.wide { grid-column: span 4; }
    .tile.dark { background: var(--ink); border-color: var(--ink); }
    .tile.dark h3 { color: var(--gold); }
    .tile.dark p { color: #E9DFCB; }
    .tile.gold { background: var(--gold); border-color: var(--gold); }
    .tile.gold p { color: var(--ink); }
    .soon { display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 4px 12px; border-radius: 99px; }

    .countries { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px; }
    .country { border-radius: 26px; padding: 40px; border: 2px solid var(--ink); background: #fff; }
    .country h3 { font-size: 48px; margin: 14px 0 12px; }
    .country ul { margin: 18px 0 28px; padding-left: 22px; color: var(--muted); font-size: 18px; }
    .country li { margin-bottom: 6px; }
    .tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 99px; background: var(--leaf); color: #fff; }
    .tag.later { background: var(--muted); }
    .country.soonc { border-style: dashed; border-color: var(--muted); background: transparent; display: flex; flex-direction: column; justify-content: center; }
    .country.soonc h3 { font-size: 34px; }
    .country.soonc a { font-weight: 700; }

    .final { background: var(--gold); text-align: center; padding: 84px 0; }
    .final h2 { font-size: clamp(36px, 5vw, 62px); max-width: 14em; margin: 0 auto 18px; }
    .final p { font-size: 20px; max-width: 30em; margin: 0 auto 30px; }

    footer { background: var(--ink); color: #E9DFCB; padding: 52px 0 44px; font-size: 16px; }
    footer .cols { display: flex; flex-wrap: wrap; gap: 32px 72px; justify-content: space-between; align-items: flex-start; }
    footer strong { font: 700 26px var(--display); color: #fff; display: block; margin-bottom: 6px; }
    footer a { color: #fff; }
    footer p { margin: 0 0 6px; }

    @media (max-width: 900px) {
      body { font-size: 17px; }
      .hero { grid-template-columns: 1fr; gap: 44px; padding: 44px 0 56px; }
      .lede { font-size: 19px; }
      .steps { grid-template-columns: 1fr 1fr; }
      .bento { grid-template-columns: 1fr; }
      .tile, .tile.wide { grid-column: auto; }
      .countries { grid-template-columns: 1fr; }
      .country { padding: 30px; }
      .country h3 { font-size: 40px; }
      section { padding: 64px 0; }
    }
    @media (max-width: 520px) {
      .steps { grid-template-columns: 1fr; }
      .cards { gap: 12px; }
      .card { min-height: 150px; padding: 18px; }
      .card b { font-size: 21px; }
      .btn { width: 100%; }
      .cta { width: 100%; }
      .bar { height: 64px; }
      /* The generic full-width .btn rule above is meant for the page's own
         CTAs, not the header's — it stretching "Open the app" to fill the
         bar was the original crowding bug this header was rebuilt to fix. */
      .bar .btn { width: auto; }
      .headerBrand { font-size: 17px; }
      .headerLeft { gap: 8px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover { transform: none; } .card:hover { transform: none; } }

    /* A plain content page: About, Contact, Privacy. The homepage's own
       building blocks (.wrap, .head, section) already do the layout work;
       this is just how a page of paragraphs reads inside them. */
    .pageHero { padding: 56px 0 8px; }
    .pageHero .eyebrow { margin-bottom: 14px; }
    .pageHero h1 { font-size: clamp(38px, 5.4vw, 60px); }
    .prose { max-width: 42em; }
    .prose .lead { font-size: 21px; color: var(--muted); margin-top: 18px; }
    .prose h2 { font-size: clamp(26px, 3.2vw, 32px); margin: 40px 0 14px; }
    .prose h2:first-of-type { margin-top: 30px; }
    .prose p { font-size: 17px; color: var(--muted); margin-bottom: 14px; }
    .prose p:last-child { margin-bottom: 0; }
    .prose a { color: var(--sky); font-weight: 600; }
    .contactCard { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 28px; background: #fff; border: 2px solid var(--ink); border-radius: 20px; }
    .contactCard a { font: 700 20px var(--display); text-decoration: none; }
    .contactCard a:hover { text-decoration: underline; text-underline-offset: 4px; }

    .contactForm { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
    .formLabel { font-weight: 700; font-size: 15px; margin-top: 12px; }
    .formLabel:first-child { margin-top: 0; }
    .formInput { font: 400 17px var(--body); padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); }
    .formInput:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
    .formTextarea { resize: vertical; min-height: 110px; font-family: var(--body); }
    .contactForm .btn { margin-top: 18px; align-self: flex-start; }
    .formStatus { margin: 10px 0 0; font-weight: 600; }
    /* Off-screen for sighted visitors and skipped by assistive tech
       (aria-hidden on the wrapper) — but still part of the DOM and tab
       order enough that a bot filling every input finds it. */
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }