/* kruujai.com's homepage, /msu and their Chinese copies (moved out of index.html on 25 October 2026 so the page's
   words come first: the Chinese SEO research, file 01 § 3.9). A change here: bump ?v= in index.html (build-site checks). */
  /* Manrope, served from here (SEO Phase 1, 30 September 2026: Google's
     stylesheet held the first paint on a phone for about 1.3 s). One variable
     file per script covers every weight. Licence: /fonts/OFL.txt. */
  @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(/fonts/manrope-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(/fonts/manrope-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  /* Thai in a LOOPED face, as in the app and on /thai-tones (docs/runbooks/content.md).
     Licence: /fonts/IBMPlexSansThaiLooped-OFL.txt. */
  @font-face { font-family: 'IBM Plex Sans Thai Looped'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(/fonts/ibm-plex-sans-thai-looped-600-thai.woff2) format('woff2'); unicode-range: U+0E00-0E7F; }
  @font-face { font-family: 'IBM Plex Sans Thai Looped'; font-style: normal; font-weight: 700; font-display: swap;
    src: url(/fonts/ibm-plex-sans-thai-looped-700-thai.woff2) format('woff2'); unicode-range: U+0E00-0E7F; }
  /* The homepage from the canvas "kruujai.com — Homepage" (26 September
     2026): every feature with a real screenshot of the phone app, the Mac
     app's download, and plans where Free is limited, Lite in the middle and
     Full fully loaded. Light only, as before; the colours are the app's. */
  :root { --navy: #13233a; --ink: #1b2d45; --blue: #285cce; --blue-deep: #1d47a6; --tint: #eaf0fc; --orange: #ed773f;
    --soft: #55667d; --faint: #5a697e; --rule: #dde4ee; --ground: #f6f8fb; --white: #ffffff; }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.5 Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: var(--blue); }
  svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  /* The Apple logo is a filled mark, not an outline. */
  svg.apple { fill: currentColor; stroke: none; width: 17px; height: 20px; margin-top: -3px; }
  .wrap { max-width: 1280px; margin: 0 auto; padding-inline: 32px; }
  .eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--blue); }
  h1, h2 { margin: 0; color: var(--navy); font-weight: 800; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
    font-size: 16px; font-weight: 800; text-decoration: none; white-space: nowrap; }
  .btn-primary { background: var(--blue); color: var(--white); }
  .btn-primary:hover { background: var(--blue-deep); color: var(--white); }
  .btn-ghost { background: var(--white); color: var(--navy); border: 1.5px solid var(--rule); }
  .btn-ghost:hover { border-color: var(--blue); color: var(--navy); }
  .btn:focus-visible, a:focus-visible { outline: 3px solid #8fb0ec; outline-offset: 3px; }

  /* the bar */
  .top { position: sticky; top: 0; z-index: 10; background: rgba(246, 248, 251, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; }
  .top .wrap { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand img { width: 40px; height: 40px; }
  .brand span { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
  .brand b { color: var(--orange); font-weight: 800; }
  .top nav { display: flex; align-items: center; gap: 28px; }
  .top nav a:not(.btn) { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
  .top .btn { min-height: 44px; padding: 0 20px; }

  /* the phone: the Texas Poker site's dark bezel, round a real screenshot */
  /* The whole screenshot, never cropped: the bezel sizes itself round it, and
     a thin inner margin keeps the screen's rounded corners off its content. */
  .phone { margin: 0; width: 290px; flex: none; box-sizing: border-box; padding: 7px; border: 6px solid #0b1522; border-radius: 40px; background: #0b1522;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 70px rgba(19,35,58,0.28), 0 8px 20px rgba(19,35,58,0.14); }
  .phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 24px; }

  /* hero */
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 40px; align-items: center; padding-block: 40px 72px; }
  .hero-text { display: flex; flex-direction: column; gap: 24px; }
  .hero h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.03; letter-spacing: -0.035em; }
  /* Two lines, "speak Thai" in the brand orange (the owner, 31 October 2026: hook 4, orange). */
  .hero h1 .h1-line { display: block; }
  .hero h1 .h1-pay { color: var(--orange); }
  /* The word space before it is English only; Chinese runs on without one. */
  html[lang='en'] .hero h1 .h1-pay::before { content: ' '; }
  .hero .lead strong { color: var(--navy); font-weight: 700; }
  /* Don's review in place of the animated intro (the owner, 31 October 2026). */
  .don-film { margin: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
  .don-film video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #0b1522; box-shadow: 0 24px 50px rgba(19,35,58,.2); display: block; }
  .don-film figcaption { font-size: 14px; line-height: 1.5; color: var(--soft); text-align: center; }
  .hero .lead { margin: 0; max-width: 560px; font-size: 20px; line-height: 1.55; color: var(--soft); }
  .actions { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
  .facts { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 6px; }
  .facts div { display: flex; flex-direction: column; }
  .facts strong { font-size: 26px; color: var(--navy); }
  .facts span { font-size: 13px; font-weight: 700; color: var(--soft); }
  .hero-phones { position: relative; height: 700px; }
  .hero-phones .phone { position: absolute; }
  .hero-phones .back { left: 10px; top: 70px; width: 280px; transform: rotate(-6deg); }
  .hero-phones .front { right: 20px; top: 0; width: 310px; }

  /* features */
  .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; max-width: 1280px; margin: 0 auto;
    padding: 64px 32px; }
  /* White first after the hero (4 October 2026: the hero and the first section had run together). */
  .feature-wrap:nth-child(even) { background: var(--white); }
  .feature.flip .feature-text { order: 2; }
  /* Thai Ways (5 October 2026): the map and Kruu Jaidee in place of phone shots. */
  .twy-art { position: relative; margin: 0 auto; width: min(520px, 100%); }
  .twy-art-map { display: block; width: 100%; height: auto; aspect-ratio: 13 / 14; object-fit: cover; object-position: 50% 30%; border-radius: 28px; box-shadow: 0 24px 60px rgba(19, 35, 58, 0.18); }
  .twy-art-kj { position: absolute; right: -28px; bottom: -6px; width: 42%; height: auto; filter: drop-shadow(0 10px 20px rgba(19, 35, 58, 0.25)); }
  .twy-art-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); border: 1px solid #d5dbe6; box-shadow: 0 2px 8px rgba(19, 35, 58, 0.18); font-size: 13px; font-weight: 800; color: #13233a; white-space: nowrap; }
  .twy-art-pin svg { width: 14px; height: 14px; fill: none; stroke: #285cce; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 820px) {
    .twy-art { width: min(400px, 100%); }
    .twy-art-kj { right: -6px; width: 40%; }
    .twy-art-pin { font-size: 11px; padding: 4px 8px; }
  }

  .feature-text { display: flex; flex-direction: column; gap: 18px; max-width: 540px; }
  .feature h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
  .feature .lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--soft); }
  .ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
  .ticks .mark { margin-top: 2px; color: var(--blue); display: flex; }
  .ticks svg { width: 16px; height: 16px; stroke-width: 2.6; }
  .phones { display: flex; gap: 28px; justify-content: center; align-items: flex-start; }
  .phones .phone { width: 270px; }
  .phones.pair .second { margin-top: 44px; }

  /* the Mac app */
  .mac { background: var(--navy); color: #b8c6db; }
  .mac .wrap { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 60px; align-items: center; padding-block: 88px; }
  .mac .eyebrow { color: #f6b48f; }
  .mac h2 { color: var(--white); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; margin: 18px 0; }
  .mac p { margin: 0 0 24px; font-size: 18px; line-height: 1.6; }
  .mac .btn-light { background: var(--white); color: var(--navy); }
  .mac .btn-line { border: 1.5px solid rgba(255,255,255,0.3); color: var(--white); }
  .mac .btn-line:hover { border-color: var(--white); color: var(--white); }
  .mac small { display: block; margin-top: 14px; font-size: 13px; color: #8ea0ba; }
  .mac .platforms { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
  .mac .platforms li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.06); font-size: 15px; }
  .mac .platforms b { color: var(--white); }
  .mac .platforms em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; background: #1f6b45; color: #e3f6ea; white-space: nowrap; }
  .mac .platforms em.soon { background: rgba(246,180,143,0.16); color: #f6b48f; }
  .window { border-radius: 14px; overflow: hidden; background: #0b1522; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 90px rgba(0,0,0,0.45); }
  .window-bar { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #1e2c40; }
  .window-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
  .window-bar i + i { background: #febc2e; }
  .window-bar i + i + i { background: #28c840; }
  .window img { display: block; width: 100%; height: auto; }

  /* plans */
  .plans { background: var(--white); }
  .plans .wrap { padding-block: 96px; display: flex; flex-direction: column; gap: 48px; }
  .plans-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .plans-head h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
  .plans-head p { margin: 0; max-width: 640px; font-size: 18px; color: var(--soft); }
  .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  .plan { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 24px; position: relative; }
  .plan h3 { margin: 0; font-size: 18px; font-weight: 800; }
  .price { display: flex; align-items: baseline; gap: 6px; }
  .price strong { font-size: 42px; letter-spacing: -0.03em; }
  .price span { font-size: 14px; }
  .plan .sum { margin: 0; font-size: 14px; }
  .plan .year { margin: -4px 0 0; font-size: 14px; font-weight: 600; }
  .plan .year strong { font-size: 16px; }
  .credits { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 18px; border-radius: 16px; }
  .credits strong { font-size: 36px; letter-spacing: -0.04em; line-height: 1; }
  .credits span { font-size: 14px; font-weight: 800; line-height: 1.3; }
  .credits em { display: block; font-style: normal; font-weight: 600; }
  .plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
  .plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 700; line-height: 1.3; }
  .plan li small { display: block; font-size: 12px; font-weight: 700; }
  .plan .mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
  .plan .mark svg { width: 12px; height: 12px; stroke: #ffffff; stroke-width: 3; }
  .plan .btn { min-height: 50px; }
  .plan.free { background: #eef1f5; border: 1px solid var(--rule); color: var(--soft); }
  .plan.free h3, .plan.free .price strong { color: var(--soft); }
  .plan.free .credits { background: #e3e8ef; color: var(--faint); }
  .plan.free li small, .plan.free li.lim { color: var(--faint); }
  .plan.free li.ok { color: var(--ink); }
  .plan.free .mark { background: #c3ccd8; }
  .plan.lite { background: var(--white); border: 2px solid #c9d7f3; box-shadow: 0 18px 40px rgba(19,35,58,0.08); color: var(--soft); }
  .plan.lite h3, .plan.lite .price strong, .plan.lite li { color: var(--navy); }
  .plan.lite .credits { background: var(--tint); color: var(--blue); }
  .plan.lite .credits em { color: var(--soft); }
  .plan.lite li small { color: var(--soft); }
  .plan.lite .mark { background: var(--blue); }
  .plan.full { background: var(--navy); color: #b8c6db; box-shadow: 0 30px 70px rgba(19,35,58,0.35); padding-top: 32px; }
  .plan.full h3, .plan.full .price strong, .plan.full li { color: var(--white); }
  .plan.full .price strong { font-size: 46px; }
  .plan.full .credits { min-height: 88px; background: rgba(237,119,63,0.16); border: 1px solid rgba(237,119,63,0.5); color: var(--white); }
  .plan.full .credits strong { font-size: 46px; color: var(--orange); }
  .plan.full .credits em { color: #f6b48f; }
  .plan.full li small { color: #b8c6db; }
  .plan.full .mark { background: var(--orange); }
  /* White on the brand orange was 2.9:1; this deeper orange is 4.65:1 (third review A3-M5). */
  .plan.full .btn { background: #c2521c; color: var(--white); }
  .plan.full .btn:hover { background: #a8451a; }
  .badge { position: absolute; top: -14px; left: 28px; padding: 6px 14px; border-radius: 999px; background: #c2521c; color: var(--white); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
  .plan li.no { color: var(--faint) !important; }
  .plan li.no .mark { background: #e3e8ef; }
  .plan li.no .mark svg { stroke: var(--faint); }
  .faq { background: var(--ground); }
  .faq .wrap { padding-block: 96px; display: flex; flex-direction: column; gap: 40px; }
  .faq-list { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
  .faq details { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; padding: 0 24px; }
  .faq summary { cursor: pointer; list-style: none; padding: 20px 32px 20px 0; position: relative; font-size: 18px; font-weight: 700; color: var(--ink); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 500; color: var(--blue); }
  .faq details[open] summary::after { content: '\2212'; }
  .faq details p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--soft); }
  .packs { margin: 0; text-align: center; font-size: 15px; color: var(--soft); }







  /* Kruu Jaidee introduces herself (5 October 2026): her own voice (Marin, the
     voice of her lessons) over a phone that switches between the app's tools
     in time with what she says. Run by intro.js; nothing plays until pressed. */
  .ki { --navy: #13233a; --blue: #285cce; --deep: #1d47a6; --tint: #eaf0fc; --soft: #55667d; --rule: #dde4ee; --ground: #f6f8fb;
    --mid: #2c7a4a; --low: #2458b0; --falling: #6f3aa8; --high: #b45309; --rising: #c8423a;
    width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: Manrope, system-ui, sans-serif; color: var(--navy); }
  .ki * { box-sizing: border-box; }
  .ki svg { width: auto; height: auto; flex: none; }
  .ki .th { font-family: 'IBM Plex Sans Thai Looped', Thonburi, Tahoma, sans-serif; font-weight: 600; }
  .ki [data-tn='mid'] { color: var(--mid); } .ki [data-tn='low'] { color: var(--low); } .ki [data-tn='falling'] { color: var(--falling); }
  .ki [data-tn='high'] { color: var(--high); } .ki [data-tn='rising'] { color: var(--rising); }
  
  .ki-phone { position: relative; width: 290px; height: 597px; border: 10px solid #0b1522; border-radius: 42px; background: #0b1522; overflow: hidden; box-shadow: 0 30px 60px rgba(19,35,58,.25); }
  .ki-screen { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; background: var(--ground); }
  
  /* Her voice, live, at the top of every scene. */
  .ki-voice { position: absolute; z-index: 5; left: 10px; right: 10px; top: 10px; height: 46px; border-radius: 23px; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 9px; padding: 0 12px 0 6px; box-shadow: 0 6px 16px rgba(19,35,58,.25); transform: translateY(-70px); transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
  .ki.is-on .ki-voice { transform: none; }
  .ki-voice img { width: 34px; height: 34px; border-radius: 50%; background: var(--tint); }
  .ki-voice > span:not(.ki-bars) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .ki-bars { flex: none; }
  .ki-voice strong { font-size: 13px; }
  .ki-voice small { font-size: 10.5px; color: #9db8ee; font-weight: 700; }
  .ki-bars { display: flex; align-items: center; gap: 2px; height: 22px; }
  .ki-bars i { display: block; width: 3px; height: 100%; border-radius: 2px; background: #9db8ee; transform: scaleY(.25); }
  .ki.is-talking .ki-bars i { animation: ki-bar .5s ease-in-out infinite alternate; }
  .ki-bars i:nth-child(2n) { animation-duration: .38s; } .ki-bars i:nth-child(3n) { animation-duration: .62s; } .ki-bars i:nth-child(4n) { animation-delay: .12s; }
  
  /* Scenes: one shows at a time, in from the right, out to the left. */
  .ki-scene { position: absolute; inset: 0; padding: 70px 16px 18px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateX(40px) scale(.97); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
  .ki-scene.is-now { opacity: 1; transform: none; pointer-events: auto; }
  .ki-scene.is-past { opacity: 0; transform: translateX(-40px) scale(.97); }
  .ki-pop { opacity: 0; transform: translateY(12px) scale(.94); transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.3); }
  .ki-pop.is-in { opacity: 1; transform: none; }
  .ki-tag { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--deep); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
  
  /* The poster, before play. */
  .ki-poster { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 38%, #24406a 0, #13233a 62%); color: #fff; text-align: center; padding: 24px; transition: opacity .4s; }
  .ki.is-on .ki-poster { opacity: 0; pointer-events: none; }
  .ki-poster img { width: 128px; height: 128px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 8px rgba(255,255,255,.08); }
  .ki-poster strong { font-size: 22px; line-height: 1.2; }
  .ki-poster small { font-size: 13px; color: #b9c6d8; }
  .ki-big { position: relative; width: 92px; height: 92px; border: 0; border-radius: 50%; background: #ed773f; color: #13233a; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(237,119,63,.45); }
  .ki-big::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(237,119,63,.6); animation: ki-ring 1.6s ease-out infinite; }
  .ki-big svg { width: 38px; height: 38px; margin-left: 5px; fill: currentColor; }
  .ki-big:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
  
  /* Captions and controls, under the phone. */
  .ki-caption { width: 100%; min-height: 58px; padding: 10px 14px; border-radius: 16px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; display: flex; align-items: center; justify-content: center; }
  .ki-caption em { font-style: normal; color: #ffc27a; }
  .ki-controls { width: 100%; display: flex; align-items: center; gap: 10px; }
  .ki-btn { flex: none; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .ki-btn svg { width: 14px; height: 14px; fill: currentColor; }
  .ki-track { flex: 1; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
  .ki-track i { display: block; height: 100%; width: 0; background: var(--blue); }
  
  /* Scene: hello */
  .ki-hello { align-items: center; justify-content: center; text-align: center; gap: 16px; }
  .ki-hello img { width: 132px; height: 132px; border-radius: 50%; background: var(--tint); }
  .ki-pose { object-fit: cover; object-position: top; }
  /* Anime moments in the intro (the owner, 7 October 2026). Each film runs on her voice's clock (intro.js). */
  .ki-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; background: var(--navy); }
  .ki-filmed { justify-content: flex-end; padding-bottom: 26px; }
  .ki-filmed::before { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(19,35,58,0), rgba(19,35,58,.72)); z-index: 1; }
  .ki-filmed > :not(video) { position: relative; z-index: 2; }
  .ki-filmed .ki-name strong { color: #fff; } .ki-filmed .ki-name span { color: #dbe5fb; }
  /* Hard cuts on the punchlines; the pills they replace stay in the markup, hidden. */
  .ki-cut { position: absolute; inset: 0; margin: 0; z-index: 3; visibility: hidden; background: var(--navy); }
  .ki-cut.is-now { visibility: visible; }
  .ki-call .ki-pills { display: none; }
  .ki-cut .ki-cap { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 800; box-shadow: 0 8px 20px rgba(19,35,58,.25); }
  .ki-say { padding: 12px 18px; border-radius: 20px 20px 20px 6px; background: #fff; box-shadow: 0 10px 24px rgba(19,35,58,.12); display: flex; flex-direction: column; gap: 2px; }
  .ki-say .th { font-size: 34px; } .ki-say b { font-size: 17px; }
  .ki-name { display: flex; flex-direction: column; gap: 2px; } .ki-name strong { font-size: 24px; } .ki-name span { font-size: 14px; color: var(--soft); }
  .ki-ai { padding: 8px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 800; }
  
  /* Scene: nothing made up */
  .ki-cards { display: flex; flex-direction: column; gap: 10px; }
  .ki-card { position: relative; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--rule); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .ki-card .th { font-size: 26px; } .ki-card b { font-size: 15px; } .ki-card small { width: 100%; font-size: 12.5px; color: var(--soft); }
  .ki-stamp { align-self: center; margin-top: 4px; padding: 10px 16px; border-radius: 14px; border: 2.5px solid var(--mid); color: var(--mid); font-size: 14px; font-weight: 800; transform: rotate(-4deg) scale(1.6); opacity: 0; transition: transform .35s cubic-bezier(.3,1.5,.5,1), opacity .2s; }
  .ki-stamp.is-in { transform: rotate(-4deg) scale(1); opacity: 1; }
  
  /* Scene: the course */
  .ki-count { text-align: center; padding: 18px 0 6px; }
  .ki-count strong { display: block; font-size: 72px; line-height: 1; letter-spacing: -0.04em; color: var(--blue); }
  .ki-count span { font-size: 15px; font-weight: 800; }
  .ki-levels { display: flex; flex-direction: column; gap: 8px; }
  .ki-level { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; }
  .ki-level i { flex: 1; height: 10px; border-radius: 5px; background: var(--rule); overflow: hidden; }
  .ki-level i::after { content: ''; display: block; height: 100%; width: 0; border-radius: 5px; background: var(--blue); transition: width 1s cubic-bezier(.2,.8,.2,1); }
  .ki-level.is-in i::after { width: 100%; }
  .ki-path { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
  .ki-path > span { padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); font-size: 12px; font-weight: 700; display: flex; flex-direction: column; }
  .ki-path .th { font-size: 17px; }
  .ki-path svg { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; }
  
  /* Scene: horse or dog (the Tone Trainer) */
  .ki-tool { border-radius: 20px; background: #fff; border: 1px solid var(--rule); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .ki-tool-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--soft); }
  .ki-tool-top b { color: var(--blue); letter-spacing: 0; }
  .ki-word { position: relative; height: 54px; }
  .ki-word > span { position: absolute; inset: 0; display: flex; align-items: baseline; gap: 10px; transition: opacity .3s, transform .3s; }
  .ki-word .th { font-size: 38px; } .ki-word b { font-size: 18px; } .ki-word small { font-size: 13px; color: var(--soft); }
  .ki-word .ki-dog { opacity: 0; transform: translateY(10px); }
  .ki-tones.is-dog .ki-horse { opacity: 0; transform: translateY(-10px); }
  .ki-tones.is-dog .ki-dog { opacity: 1; transform: none; }
  .ki-graph { display: block; width: 100%; height: 150px; border-radius: 14px; background: var(--ground); }
  .ki-graph .band { fill: none; stroke: #ed773f; stroke-opacity: .35; stroke-width: 14; stroke-linecap: round; transition: opacity .3s; }
  .ki-graph .band-dog { opacity: 0; }
  .ki-tones.is-dog .band-horse { opacity: .25; }
  .ki-tones.is-dog .band-dog { opacity: 1; }
  .ki-graph .you { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.8s ease-in-out; }
  .ki-tones.is-said .you { stroke-dashoffset: 0; }
  .ki-verdict { min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 800; background: var(--tint); color: var(--deep); transition: background .3s, color .3s; }
  .ki-tones.is-dog .ki-verdict { background: #fbe9e8; color: var(--rising); }
  .ki-legend { display: flex; gap: 14px; font-size: 11px; font-weight: 700; color: var(--soft); }
  .ki-legend i { display: inline-block; width: 16px; height: 5px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
  
  /* Scene: any time */
  .ki-call { background: var(--navy); color: #fff; }
  .ki-clock { text-align: center; padding-top: 10px; }
  .ki-clock strong { display: block; font-size: 64px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .ki-clock small { font-size: 12px; color: #9db8ee; font-weight: 700; letter-spacing: .08em; }
  .ki-line { align-self: flex-start; max-width: 88%; padding: 10px 12px; border-radius: 16px 16px 16px 6px; background: rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 2px; }
  .ki-line .th { font-size: 20px; color: #fff; } .ki-line b { font-size: 13px; } .ki-line small { font-size: 12px; color: #c9d4e6; }
  .ki-line.me { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: var(--blue); }
  .ki-pills { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
  .ki-pill { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 800; }
  .ki-pill svg { width: 16px; height: 16px; fill: none; stroke: var(--mid); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  
  /* Scene: the same question twice */
  .ki-chat { display: flex; flex-direction: column; gap: 9px; }
  .ki-q, .ki-a { max-width: 88%; padding: 9px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; }
  .ki-q { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: var(--blue); color: #fff; }
  .ki-a { align-self: flex-start; border-radius: 16px 16px 16px 6px; background: #fff; border: 1px solid var(--rule); }
  .ki-q .th, .ki-a .th { font-size: 15px; }
  .ki-sighs { margin-top: auto; align-self: center; display: flex; gap: 10px; }
  .ki-sighs span { padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); font-size: 12px; font-weight: 800; text-align: center; }
  .ki-sighs b { display: block; font-size: 24px; color: var(--blue); }
  .ki-sighs .zero b { color: var(--mid); }
  
  /* Scene: everything (a quick montage) */
  .ki-montage { position: relative; flex: 1; }
  .ki-m { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; opacity: 0; transform: scale(.92); transition: opacity .3s, transform .4s cubic-bezier(.2,.9,.3,1.2); }
  .ki-m.is-now { opacity: 1; transform: none; }
  .ki-m h4 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--blue); }
  .ki-m-colours .th { font-size: 40px; }
  .ki-m-colours b { font-size: 24px; letter-spacing: .01em; }
  .ki-voices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ki-voices i { height: 50px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: var(--soft); }
  .ki-voices i.is-in { background: var(--tint); border-color: var(--blue); color: var(--deep); }
  .ki-flip { height: 190px; perspective: 800px; }
  .ki-flip > div { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .7s; }
  .ki-flip.is-in > div { transform: rotateY(180deg); }
  .ki-flip span { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .ki-flip span:last-child { transform: rotateY(180deg); }
  .ki-flip .th { font-size: 44px; } .ki-flip b { font-size: 18px; } .ki-flip strong { font-size: 22px; }
  .ki-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ki-tiles span { padding: 12px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); font-size: 12.5px; font-weight: 800; display: flex; flex-direction: column; gap: 4px; }
  .ki-tiles span svg { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  
  /* Scene: what are you waiting for? */
  .ki-cta { align-items: center; justify-content: center; text-align: center; gap: 18px; background: linear-gradient(180deg, #f6f8fb 0, #eaf0fc 100%); }
  .ki-listened { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-size: 13px; font-weight: 800; }
  .ki-listened b { color: var(--blue); font-variant-numeric: tabular-nums; }
  .ki-wait { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
  .ki-go { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 18px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgba(40,92,206,.35); }
  .ki-go.is-in { animation: ki-throb 1.2s ease-in-out infinite; }
  
  @keyframes ki-bar { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
  @keyframes ki-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
  @keyframes ki-throb { 50% { transform: scale(1.06); } }
  @media (prefers-reduced-motion: reduce) {
    .ki *, .ki *::before { animation: none !important; transition: none !important; }
  }
  
  /* The tone drill and a flashcard, as the app draws them (5 October 2026). */
  .ki-drill { border-radius: 18px; background: #fff; border: 1px solid var(--rule); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
  .ki-drill-top { display: flex; justify-content: space-between; align-items: center; }
  .ki-drill-top span { display: flex; flex-direction: column; }
  .ki-drill-top small { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: var(--soft); }
  .ki-drill-top strong { font-size: 12px; }
  .ki-drill-top em { font-style: normal; padding: 3px 7px; border-radius: 999px; background: #e6ebf3; font-size: 8.5px; font-weight: 800; color: var(--soft); }
  .ki-drill-stage { border-radius: 14px; background: var(--ground); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .ki-drill-stage > small { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: var(--soft); }
  .ki-drill-glyph { width: 40px !important; height: 28px !important; }
  .ki-drill-glyph path { fill: none; stroke: #c8423a; stroke-width: 2.6; stroke-linecap: round; }
  .ki-drill-stage .th { font-size: 26px; } .ki-drill-stage b { color: var(--blue); font-size: 15px; }
  .ki-drill-stage > strong { font-size: 16px; }
  .ki-drill-shape { font-size: 10.5px; color: var(--soft); } .ki-drill-shape b { color: var(--rising); font-size: 10.5px; }
  .ki-drill-play { width: 52px; height: 52px; margin: 4px 0; border-radius: 50%; background: var(--deep); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--tint); animation: ki-throb .9s ease-in-out infinite; }
  .ki-drill-play svg { width: 20px !important; height: 20px !important; fill: #fff; margin-left: 3px; }
  .ki-drill-dots { display: flex; gap: 3px; }
  .ki-drill-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--rule); opacity: 1; transform: none; transition: width .15s, background .15s; }
  .ki-drill-dots i.is-in { width: 14px; background: #c8423a; }
  .ki-drill-dots i.is-in:has(+ i.is-in) { width: 6px; background: #b9cbf2; }
  .ki-drill-cap { position: relative; height: 14px; width: 100%; }
  .ki-vc { position: absolute; inset: 0; font-size: 10.5px; font-weight: 700; color: var(--soft); opacity: 0; }
  .ki-vc.is-now { opacity: 1; }
  .ki-fc { display: flex; flex-direction: column; gap: 8px; }
  .ki-fc-card { height: 190px; perspective: 800px; opacity: 1 !important; transform: none !important; }
  .ki-fc-card > div { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .55s; }
  .ki-fc-card.is-in > div { transform: rotateY(180deg); }
  .ki-fc-front, .ki-fc-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 6px 16px rgba(19,35,58,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
  .ki-fc-back { transform: rotateY(180deg); }
  .ki-fc small { font-size: 9.5px; font-weight: 800; color: #8a96a8; }
  .ki-fc-front > small, .ki-fc-back > small { position: absolute; left: 12px; top: 10px; }
  .ki-fc .th { font-size: 34px; font-weight: 700; }
  .ki-fc-front > b { font-size: 15px; }
  .ki-fc-back strong { font-size: 24px; }
  .ki-fc-show { font-style: normal; padding: 7px 14px; border-radius: 10px; border: 1.5px solid var(--blue); color: var(--deep); font-size: 11.5px; font-weight: 800; opacity: 1; transform: none; transition: background .2s, color .2s; }
  .ki-fc-show.is-in { background: var(--blue); color: #fff; }
  .ki-fc-hear { font-style: normal; padding: 5px 10px; border-radius: 9px; background: var(--ground); border: 1px solid var(--rule); color: var(--deep); font-size: 10.5px; font-weight: 800; }
  .ki-fc-rate { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .ki-fc-rate span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; border-radius: 9px; font-size: 13px; font-weight: 800; opacity: 1; transform: none; }
  .ki-fc-rate small { font-size: 7.5px; color: var(--soft); white-space: nowrap; }
  .ki-fc-rate [data-r='1'] { background: #fbe9e8; color: #c8423a; } .ki-fc-rate [data-r='2'] { background: #fcf1e4; color: #b45309; }
  .ki-fc-rate [data-r='3'] { background: #eef1f5; color: #6b7a8f; } .ki-fc-rate [data-r='4'] { background: #e9f5ee; color: #3c9a5f; }
  .ki-fc-rate [data-r='5'] { background: #e9f5ee; color: #2c7a4a; transition: box-shadow .2s, transform .2s; }
  .ki-fc-rate [data-r='5'].is-in { box-shadow: 0 0 0 2px #2c7a4a; transform: scale(1.06); }
  
  /* No controls under the phone (the owner, 5 October 2026): Play again sits in the last scene, a tap pauses. */
  .ki-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ki-again[hidden] { display: none; }
  .ki-screen:focus-visible { outline: 3px solid #ed773f; outline-offset: 4px; }
  .ki-again { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--navy); cursor: pointer; }
  .ki-again svg { width: 13px !important; height: 13px !important; fill: currentColor; }
  .ki-paused { position: absolute; z-index: 7; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(19,35,58,.88); color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
  .ki.is-on .ki-screen { cursor: pointer; }
  .ki-go:focus-visible, .ki-again:focus-visible { outline: 3px solid #ed773f; outline-offset: 3px; }

  /* The Tone Trainer card, the listening test and the drill, live (5 October
     2026): the /thai-tones widgets, scoped under .tw so they cannot touch
     the rest of the page; thai-tones.js runs the test and the drill. */
  .tw .hear { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--tint); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .tw .hear:hover { background: #dbe5fa; }
  .tw .hear.playing { background: var(--blue); color: var(--white); }
  .tw .hear svg { width: 18px; height: 18px; }
  .tw .quiz { background: var(--navy); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 22px; color: var(--white); box-shadow: 0 24px 60px rgba(19, 35, 58, .18); }
  .tw .quiz-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: #b9c6d8; }
  .tw .play { position: relative; align-self: center; width: 120px; height: 120px; border-radius: 50%; border: 0; background: var(--blue); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .tw .play:hover { background: #3a6ce0; }
  .tw .play .ring { position: absolute; inset: 0; border-radius: 50%; background: var(--blue); opacity: 0; }
  .tw .play.playing .ring { animation: tw-pulse 1.4s ease-out infinite; }
  .tw .play .bars { display: none; gap: 5px; align-items: center; height: 40px; position: relative; }
  .tw .play .bars i { width: 6px; height: 40px; border-radius: 3px; background: var(--white); animation: tw-bars .9s ease-in-out infinite; }
  .tw .play .bars i:nth-child(2) { animation-delay: .15s; }
  .tw .play .bars i:nth-child(3) { animation-delay: .3s; }
  .tw .play .bars i:nth-child(4) { animation-delay: .45s; }
  .tw .play.playing .bars { display: flex; }
  .tw .play.playing .tri { display: none; }
  .tw .quiz-prompt { text-align: center; font-size: 15px; color: #b9c6d8; min-height: 22px; }
  .tw .options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .tw .opt { min-height: 92px; border-radius: 16px; border: 2px solid #2c4262; background: var(--ink); color: var(--white); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; }
  .tw .opt:hover:not(:disabled) { border-color: #4a6690; }
  .tw .opt:disabled { cursor: default; }
  .tw .opt svg path { fill: none; stroke-width: 7; stroke-linecap: round; }
  .tw .opt.t-mid path { stroke: #c7d0dc; }
  .tw .opt.t-low path { stroke: #8fb0f0; }
  .tw .opt.t-falling path { stroke: #ed773f; }
  .tw .opt.t-high path { stroke: #6cc6a4; }
  .tw .opt.t-rising path { stroke: #b79cf0; }
  .tw .opt { color: var(--white); }
  .tw .opt.right { border-color: #6cc6a4; background: rgba(108, 198, 164, .18); }
  .tw .opt.wrong { border-color: #ed773f; background: rgba(237, 119, 63, .18); }
  .tw .reveal { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); border-radius: 18px; padding: 18px 20px; }
  .tw .reveal .verdict { font-size: 16px; font-weight: 800; }
  .tw .reveal .verdict.is-right { color: #6cc6a4; }
  .tw .reveal .verdict.is-wrong { color: #f4a27a; }
  .tw .reveal .word { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; }
  .tw .reveal .thai { color: var(--white); font-size: 26px; }
  .tw .reveal .rom { color: #9fbaf5; }
  .tw .reveal .mean { color: #b9c6d8; font-size: 15px; }
  .tw .next { border: 0; border-radius: 999px; background: var(--white); color: var(--navy); font-size: 15px; font-weight: 800; padding: 12px 20px; cursor: pointer; min-height: 44px; flex-shrink: 0; }
  .tw .round-cta { display: flex; justify-content: center; background: var(--orange); color: var(--navy); text-decoration: none; border-radius: 999px; padding: 15px; font-size: 16px; font-weight: 800; }
  .tw .round-cta:hover { color: var(--navy); }
  .tw .tool { background: var(--ground); border: 1px solid var(--rule); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
  .tw .tool-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--faint); }
  .tw .tool-top span { display: flex; align-items: center; gap: 8px; }
  .tw .live { color: var(--blue); letter-spacing: 0; font-weight: 700; }
  .tw .live i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); animation: tw-blink 1.6s ease-in-out infinite; }
  .tw .tool-word { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .tw .tool-word .thai { font-size: 44px; }
  .tw .tool-word .rom { font-size: 20px; }
  .tw .tool-word span:last-child { font-size: 17px; color: var(--soft); }
  .tw .graph { position: relative; background: var(--white); border: 1px solid var(--rule); border-radius: 20px; padding: 12px; }
  .tw .graph svg { width: 100%; height: auto; display: block; }
  .tw .graph .learner { stroke-dasharray: 520; animation: tw-draw 4.2s ease-in-out infinite; }
  .tw .graph .verdict { position: absolute; right: 20px; top: 18px; background: var(--tint); color: var(--blue-deep); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 800; animation: tw-verdict 4.2s ease-in-out infinite; }
  .tw .key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--soft); }
  .tw .key span { display: flex; align-items: center; gap: 8px; }
  .tw .key i { width: 22px; height: 6px; border-radius: 3px; }
  .tw .drill { background: var(--white); border: 1px solid var(--rule); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 22px; }
  .tw .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .tw .chips span { padding: 8px 14px; border-radius: 999px; background: var(--ground); border: 1px solid var(--rule); font-size: 14px; font-weight: 700; color: var(--soft); }
  .tw .chips .on { background: var(--orange); border-color: var(--orange); color: var(--navy); font-weight: 800; }
  .tw .cards { position: relative; height: 150px; }
  .tw .card { position: absolute; inset: 0; display: flex; align-items: center; gap: 22px; background: var(--ground); border-radius: 22px; padding: 22px 26px; opacity: 0; animation: tw-cycle 6s ease-in-out infinite; }
  .tw .card:nth-child(2) { animation-delay: 2s; }
  .tw .card:nth-child(3) { animation-delay: 4s; }
  .tw .card .hear { width: 56px; height: 56px; }
  .tw .card .hear svg { width: 24px; height: 24px; margin: 0; }
  .tw .card .thai { font-size: 38px; }
  .tw .card .rom { font-size: 19px; }
  .tw .card .mean { display: block; font-size: 16px; color: var(--soft); }
  .tw .card > svg { margin-left: auto; }
  .tw .drill-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--soft); }
  .tw .drill-foot .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
  @keyframes tw-draw { 0% { stroke-dashoffset: 520; } 55% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes tw-verdict { 0%, 50% { opacity: 0; transform: translateY(6px); } 60%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes tw-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
  @keyframes tw-bars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
  @keyframes tw-cycle { 0% { opacity: 0; transform: translateY(10px); } 5%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-10px); } }
  @keyframes tw-blink { 50% { opacity: .35; } }

  /* The live drill (homepage, 5 October 2026): choose a tone, play its
     words with a gap after each to say it back. thai-tones.js runs it. */
  .tw .chip { padding: 8px 14px; border-radius: 999px; background: var(--ground); border: 1px solid var(--rule); font: inherit; font-size: 14px; font-weight: 700; color: var(--soft); cursor: pointer; min-height: 40px; }
  .tw .chip:hover { border-color: var(--blue); }
  .tw .chip.on { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 800; }
  .tw .cards.live .card { animation: none; opacity: 0; transition: opacity .25s; }
  .tw .cards.live .card.now { opacity: 1; }
  .tw .card.now .hear { background: var(--blue); color: var(--white); }
  .tw .drill-say { margin: 0; min-height: 24px; font-size: 15px; font-weight: 700; color: var(--navy); }
  .tw .drill-say.your-turn { color: var(--blue); }
  .tw .thai { font-family: 'IBM Plex Sans Thai Looped', Thonburi, Tahoma, sans-serif; font-weight: 600; color: var(--navy); }
  .tw .rom { font-weight: 700; color: var(--blue); }
  .tw .reveal .thai { color: var(--white); }
  .tw { width: 100%; max-width: 520px; margin: 0 auto; }
  /* The homepage sizes its own icons and shows its own blocks; inside the
     widgets their sizes and the hidden state are the widgets' own. */
  .tw [hidden] { display: none !important; }
  .tw .play .tri { width: 44px; height: 44px; fill: #ffffff; stroke: none; }
  .tw .opt svg { width: 60px; height: 30px; }
  .tw .card > svg { width: 120px; height: 60px; flex: none; }
  .tw .tool-top svg { width: 18px; height: 18px; }
  .tw .hear svg { width: 18px; height: 18px; }
  .tw .card .hear svg { width: 24px; height: 24px; }
  .tw .quiz, .tw .tool, .tw .drill { width: 100%; }
  @media (max-width: 640px) {
    .tw .quiz { padding: 22px 16px; }
    .tw .options { gap: 6px; }
    .tw .opt { min-height: 78px; font-size: 12px; }
    .tw .opt svg { width: 44px; height: 22px; }
    .tw .tool, .tw .drill { padding: 20px; }
    .tw .tool-word .thai { font-size: 36px; }
    .tw .card { gap: 14px; padding: 16px; }
    .tw .card > svg { width: 80px; height: 40px; }
    .tw .card .thai { font-size: 30px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tw .graph .learner, .tw .graph .verdict, .tw .play.playing .ring, .tw .play .bars i, .tw .live i { animation: none; }
    .tw .graph .verdict { opacity: 1; }
    .tw .card { animation: none; } .tw .card:first-child { opacity: 1; }
  }


  /* The Tone Trainer card, five one-syllable words in turn, one a tone
     (5 October 2026). The shapes are the app's (lib/pitch.mjs TONE_SHAPES). */
  .tw .tt-stage { position: relative; display: grid; }
  .tw .tt-layer { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; opacity: 0; animation: tt-show 21.0s linear infinite; }
  .tw .tt-you { stroke-dasharray: 560; stroke-dashoffset: 560; animation: tt-draw 21.0s ease-in-out infinite; }
  .tw .tt-verdict { opacity: 0; animation: tt-verdict 21.0s ease-in-out infinite; }
  .tw .tt-l0, .tw .tt-l0 .tt-you, .tw .tt-l0 .tt-verdict { animation-delay: 0.0s; }
  .tw .tt-l1, .tw .tt-l1 .tt-you, .tw .tt-l1 .tt-verdict { animation-delay: 4.2s; }
  .tw .tt-l2, .tw .tt-l2 .tt-you, .tw .tt-l2 .tt-verdict { animation-delay: 8.4s; }
  .tw .tt-l3, .tw .tt-l3 .tt-you, .tw .tt-l3 .tt-verdict { animation-delay: 12.6s; }
  .tw .tt-l4, .tw .tt-l4 .tt-you, .tw .tt-l4 .tt-verdict { animation-delay: 16.8s; }
  @keyframes tt-show { 0% { opacity: 1; } 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
  @keyframes tt-draw { 0% { stroke-dashoffset: 560; } 11% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
  @keyframes tt-verdict { 0%, 10% { opacity: 0; transform: translateY(6px); } 12%, 18.5% { opacity: 1; transform: none; } 19.5%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .tw .tt-layer, .tw .tt-you, .tw .tt-verdict { animation: none; }
    .tw .tt-l2 { opacity: 1; } .tw .tt-l2 .tt-you { stroke-dashoffset: 0; } .tw .tt-l2 .tt-verdict { opacity: 1; }
  }

  /* The tone drill, as the app's (components/tone-listening.tsx ToneDrill):
     one word, each press of play the next voice; nothing is scored. */
  .tw [data-tone='mid'] { --tc: #3c9a5f; --tt: #2c7a4a; --tb: #e9f5ee; }
  .tw [data-tone='low'] { --tc: #2f6fd6; --tt: #2458b0; --tb: #e8f0fc; }
  .tw [data-tone='falling'] { --tc: #8a4fc8; --tt: #6f3aa8; --tb: #f2eafb; }
  .tw [data-tone='high'] { --tc: #d9822b; --tt: #b45309; --tb: #fcf1e4; }
  .tw [data-tone='rising'] { --tc: #c8423a; --tt: #c8423a; --tb: #fbe9e8; }
  .tw .dr { background: var(--white); border: 1px solid var(--rule); border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 14px; color: var(--navy); }
  .tw .dr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tw .dr-top > span:first-child { display: flex; flex-direction: column; }
  .tw .dr-top small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--soft); }
  .tw .dr-top strong { font-size: 17px; font-weight: 800; }
  .tw .dr-tag { padding: 5px 10px; border-radius: 999px; background: #e6ebf3; font-size: 11.5px; font-weight: 800; color: var(--soft); white-space: nowrap; }
  .tw .dr-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .tw .dr-pick button { height: 56px; border-radius: 12px; border: 2px solid var(--rule); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: 12px; font-weight: 800; color: var(--tt); cursor: pointer; }
  .tw .dr-pick button[aria-checked='true'] { border-color: var(--tc); background: var(--tb); }
  .tw .dr-glyph { fill: none; stroke: var(--tc); }
  .tw .dr-glyph path { stroke: var(--tc); }
  .tw .dr-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 14px; border-radius: 22px; background: var(--ground); text-align: center; }
  .tw .dr-count { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--soft); }
  .tw .dr-word { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .tw .dr-word svg { width: 64px; height: 45px; }
  .tw .dr-thai .thai { font-size: 34px; } .tw .dr-thai .rom { font-size: 18px; }
  .tw .dr-word strong { font-size: 22px; font-weight: 800; line-height: 1.2; }
  .tw .dr-word > span:last-child { font-size: 13.5px; color: var(--soft); }
  .tw .dr-word b { color: var(--tt); }
  .tw .dr-play { width: 96px; height: 96px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(40,92,206,.28), 0 0 0 9px var(--tint); }
  .tw .dr-play[data-playing] { background: var(--blue-deep); }
  .tw .dr-play svg { width: 34px; height: 34px; fill: #fff; stroke: none; margin-left: 4px; }
  .tw .dr-dots { display: flex; gap: 5px; }
  .tw .dr-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--rule); transition: width .2s; }
  .tw .dr-dots i[data-state='done'] { background: #b9cbf2; }
  .tw .dr-dots i[data-state='now'] { width: 22px; background: var(--tc); }
  .tw .dr-caption { min-height: 20px; font-size: 13.5px; font-weight: 700; color: var(--soft); }
  .tw .dr-nav { display: flex; gap: 10px; }
  .tw .dr-btn { height: 52px; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; border: 1px solid var(--rule); background: #fff; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--navy); cursor: pointer; white-space: nowrap; padding: 0 12px; }
  .tw .dr-btn svg { width: 18px; height: 18px; }
  .tw .dr-prev { flex: 0 0 52px; padding: 0; }
  .tw .dr-next { background: var(--blue); border-color: var(--blue); color: #fff; }
  @media (max-width: 640px) { .tw .dr { padding: 16px; } .tw .dr-pick button { font-size: 10.5px; } .tw .dr-btn { font-size: 13px; } }
  .tw .dr-pick svg { width: 24px; height: 17px; }
  .tw .dr-play .dr-stop { display: none; width: 30px; height: 30px; fill: #fff; stroke: none; margin: 0; }
  .tw .dr-play[data-playing] .dr-tri { display: none; }
  .tw .dr-play[data-playing] .dr-stop { display: block; }
  .tw .dr-dots { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .tw .dr-one { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--blue); text-decoration: underline; cursor: pointer; padding: 6px; }

  /* The Tone Trainer, moving: eight frames captured from the app while it listened to a
     spoken Thai word, shown in turn over the first (26 September 2026, "maybe animate it"). */
  .tone-live { position: relative; }
  .tone-frames { position: absolute; left: 7px; right: 7px; top: calc(7px + (100% - 14px) * 0.0711); height: calc((100% - 14px) * 0.2725); overflow: hidden; }
  .phone .tone-frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; opacity: 0; animation: tone-flip 5.6s steps(1, end) infinite; }
  .tone-frame:nth-child(1) { animation-delay: 0.0s; }
  .tone-frame:nth-child(2) { animation-delay: 0.7s; }
  .tone-frame:nth-child(3) { animation-delay: 1.4s; }
  .tone-frame:nth-child(4) { animation-delay: 2.1s; }
  .tone-frame:nth-child(5) { animation-delay: 2.8s; }
  .tone-frame:nth-child(6) { animation-delay: 3.5s; }
  .tone-frame:nth-child(7) { animation-delay: 4.2s; }
  .tone-frame:nth-child(8) { animation-delay: 4.9s; }
  @keyframes tone-flip { 0% { opacity: 1; } 12.5% { opacity: 0; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .tone-frame { animation: none; } .tone-frame:first-child { opacity: 1; } }
  /* Every looping demo pauses while it is pointed at or has the focus (third
     review A3-M2; the owner, 7 October 2026: no controls added, as the intro). */
  .tw:hover *, .tw:focus-within *, .tw:focus *, .tone-live:hover *, .tone-live:focus-within *, .tone-live:focus * { animation-play-state: paused !important; }
  .tw:focus-visible, .tone-live:focus-visible { outline: 3px solid #ed773f; outline-offset: 4px; border-radius: 22px; }
  footer .wrap { min-height: 140px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-block: 28px; }
  footer .brand img { width: 32px; height: 32px; }
  footer .brand span { font-size: 18px; }
  footer p { margin: 0; display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--soft); }

  @media (max-width: 1080px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .hero-phones { height: 620px; max-width: 560px; width: 100%; margin: 0 auto; }
    .mac .wrap { grid-template-columns: 1fr; }
    .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; width: 100%; }
    .plan.full { order: -1; }
  }
  @media (max-width: 820px) {
    .wrap { padding-inline: 20px; }
    .top nav a:not(.btn):not(.lang-link) { display: none; }
    /* Two buttons beside the logo on a phone (Log in, 12 October 2026): tighter, and under 480px the wordmark goes, the logo stays. */
    .top nav { gap: 8px; }
    .top .btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
    .feature { grid-template-columns: 1fr; gap: 28px; padding: 44px 20px; }
    .feature.flip .feature-text { order: 0; }
    .phones { gap: 14px; }
    .phones .phone { width: min(230px, 60vw); }
    .phones.pair .phone { width: calc((100vw - 54px) / 2); max-width: 230px; padding: 5px; border-width: 5px; border-radius: 28px; }
    .phones.pair .phone img { border-radius: 18px; }
    .phones.pair .second { margin-top: 0; }
    .hero .wrap { padding-block: 16px 48px; }
    .hero .lead { font-size: 17px; }
    .hero-phones { height: auto; display: flex; justify-content: center; }
    .hero-phones .phone { position: static; }
    /* The Tone Trainer frames sit over the phone they belong to, so that phone
       stays their anchor (27 September 2026: on a phone they spilled out). */
    .hero-phones .phone.tone-live { position: relative; inset: auto; margin: 0 auto; }
    .phones.pair .tone-frames { left: 5px; right: 5px; top: calc(5px + (100% - 10px) * 0.0711); height: calc((100% - 10px) * 0.2725); }
    .hero-phones .back { display: none; }
    .hero-phones .front { width: min(260px, 70vw); }
    .actions .btn { flex: 1 1 100%; }
    .mac .wrap, .plans .wrap { padding-block: 56px; }
    .plan { padding: 24px; }
  }

  /* And there is more (4 October 2026): the smaller features, a card each. */
  /* More than an app: the comparison (22 Oct 2026). A table on a computer; on a phone, five rows that open
     with a tap, the rest behind See all. Kruu Jaidee's marks are the brand orange. */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .school { background: var(--white); }
  .school .wrap { padding-block: 96px; display: flex; flex-direction: column; gap: 18px; }
  .school .lead { margin: 0 0 22px; max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--soft); }
  .mk { width: 22px; height: 22px; flex: none; display: block; }
  .mk circle { stroke: none; } .mk path { stroke-width: 2.4; }
  .mk-yes circle { fill: #2b7a4b; } .mk-us circle { fill: var(--orange); } .mk-yes path, .mk-us path { stroke: #fff; }
  .mk-no circle { fill: #eef1f6; } .mk-no path { stroke: #6b7a8f; stroke-width: 2.2; }
  .mk-part circle { fill: none; stroke: #b5651d; stroke-width: 2; } .mk-part path { stroke: #b5651d; }
  .cmp-table { width: 100%; border-collapse: separate; border-spacing: 12px 0; margin: 0 -12px; table-layout: fixed; }
  .cmp-table col, .cmp-table th:first-child { width: 24%; }
  .cmp-table thead th { padding: 18px 16px; text-align: left; font-size: 16px; font-weight: 800; color: var(--navy); vertical-align: bottom; }
  .cmp-table thead th:first-child { padding-left: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
  .cmp-table th.cmp-us-head { width: 30%; padding: 22px 20px 18px; border-radius: 18px 18px 0 0; background: var(--navy); color: var(--white); font-size: 18px; }
  .cmp-badge { display: inline-grid; place-items: center; vertical-align: middle; margin-right: 10px; }
  .cmp-table tbody th { padding: 18px 0; text-align: left; font-size: 16px; font-weight: 700; color: var(--navy); border-bottom: 1px solid #e6ebf3; }
  .cmp-table td { padding: 18px 16px; border-bottom: 1px solid #e6ebf3; font-size: 14.5px; line-height: 1.45; color: var(--soft); vertical-align: middle; }
  .cmp-table td.cmp-us { padding: 18px 20px; background: var(--tint); border-bottom-color: #d3e0f8; font-size: 15px; font-weight: 700; color: var(--navy); }
  .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
  .cmp-table tbody tr:last-child td.cmp-us { border-radius: 0 0 18px 18px; }
  .cmp-cell { display: flex; align-items: center; gap: 10px; }
  .cmp-soon { flex: none; padding: 3px 9px; border-radius: 999px; background: #fdebe1; color: #9a3d12; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; }
  .cmp-phone { display: none; }
  .school-foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: 20px; background: var(--ground); border: 1px solid var(--rule); }
  .school-foot p { margin: 0; max-width: 700px; font-size: 16px; line-height: 1.55; }
  .hero-more { font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
  .hero-more:hover { text-decoration: underline; }
  @media (max-width: 820px) {
    .school .wrap { padding-block: 56px; padding-inline: 16px; }
    .school .lead { font-size: 16px; margin-bottom: 8px; }
    .cmp-table { display: none; }
    .cmp-phone { display: flex; flex-direction: column; gap: 10px; }
    .cmp-key, .cmp-row summary { display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px 52px; gap: 6px; align-items: center; }
    .cmp-key { position: sticky; top: 76px; z-index: 2; padding: 10px 12px; border-radius: 14px; background: var(--ground); border: 1px solid var(--rule); font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--faint); }
    .cmp-pill { height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); color: var(--soft); letter-spacing: 0; }
    .cmp-pill-us { border: 0; background: var(--orange); color: var(--white); }
    .cmp-row { padding: 14px 12px; border-radius: 16px; border: 1px solid var(--rule); }
    .cmp-row summary { list-style: none; cursor: pointer; row-gap: 10px; }
    .cmp-row summary::-webkit-details-marker, .cmp-all summary::-webkit-details-marker { display: none; }
    .cmp-label { font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--navy); }
    .cmp-m { display: flex; justify-content: center; }
    .cmp-m .cmp-soon { padding: 2px 6px; font-size: 10.5px; }
    .cmp-line { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--tint); font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--navy); }
    .cmp-line svg { width: 16px; height: 16px; color: var(--blue); stroke-width: 2.4; }
    .cmp-row[open] .cmp-line { display: none; }
    .cmp-bubble { position: relative; margin-top: 16px; padding: 14px 14px 12px; border-radius: 14px; background: var(--navy); display: flex; flex-direction: column; gap: 10px; }
    .cmp-bubble::before { content: ""; position: absolute; top: -7px; right: 30px; width: 14px; height: 14px; background: var(--navy); transform: rotate(45deg); border-radius: 2px; }
    .cmp-bubble p { position: relative; margin: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.4; color: #dfe7f3; }
    .cmp-bubble b { color: #b8c6db; }
    .cmp-bubble .cmp-bubble-us { padding-top: 10px; border-top: 1px solid #2c4060; font-weight: 700; color: var(--white); }
    .cmp-bubble .cmp-bubble-us b { color: #f6b48f; }
    .cmp-all { display: flex; flex-direction: column; gap: 10px; }
    .cmp-all > summary { order: 2; list-style: none; cursor: pointer; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--white); color: var(--blue); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .cmp-all > summary svg { width: 16px; height: 16px; stroke-width: 2.4; }
    .cmp-all[open] > summary { display: none; }
    .cmp-all > .cmp-row { order: 1; }
    .school-foot { flex-direction: column; align-items: stretch; padding: 20px 18px; }
    .school-foot p { font-size: 15px; }
  }
  .school h2, .course h2 { margin-top: 10px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.02em; max-width: 760px; }
  /* The course outline, written from the course (app/scripts/site-outline.mjs). */
  .course { background: var(--ground); }
  .course .wrap { padding-block: 88px; }
  .course .lead { margin: 16px 0 0; max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--soft); }
  .levels { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .level { padding: 24px 20px; border: 1px solid var(--rule); border-radius: 20px; background: var(--white); }
  .level-n { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
  .level h3 { margin: 6px 0 8px; font-size: 22px; color: var(--navy); }
  .level-about { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--soft); }
  .level ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .level summary { display: flex; gap: 10px; align-items: baseline; padding: 7px 8px; border-radius: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
  .level summary::-webkit-details-marker { display: none; }
  .level summary:hover { background: var(--ground); }
  .level details[open] summary { background: var(--tint); color: var(--blue-deep); }
  .level .n { flex: none; min-width: 26px; font-size: 12.5px; font-weight: 800; color: var(--blue); }
  .level summary .t { flex: 1; min-width: 0; }
  .level summary small { flex: none; font-size: 12px; font-weight: 700; color: var(--faint); }
  .level-count { margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--navy); }
  .level details ul { margin: 4px 0 8px 44px; padding: 0; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
  .level details li { margin: 3px 0; }
  @media (max-width: 1100px) { .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .levels { grid-template-columns: minmax(0, 1fr); } .school .wrap, .course .wrap { padding-block: 64px; padding-inline: 16px; } }

  /* The footer (5 October 2026, the owner: "use /design to fixup the footer"). */
  footer.site-foot { background: #13233a; color: #d6e0f2; margin-top: 0; }
  footer.site-foot .wrap { display: flex; flex-direction: column; gap: 28px; padding-block: 48px 28px; min-height: 0; border-top: 0; align-items: stretch; }
  footer.site-foot .foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  footer.site-foot .brand span { color: #fff; font-size: 20px; }
  footer.site-foot .brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
  footer.site-foot .foot-brand p { margin: 12px 0 0; display: block; max-width: 320px; font-size: 14px; line-height: 1.6; color: #d6e0f2; }
  footer.site-foot nav { display: flex; flex-direction: column; gap: 9px; }
  footer.site-foot nav h2 { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #9fb4d8; }
  footer.site-foot nav a { color: #fff; text-decoration: none; font-size: 14px; }
  footer.site-foot nav a:hover, footer.site-foot .foot-bottom a:hover { text-decoration: underline; }
  footer.site-foot .foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid #2a3f5f; font-size: 12px; color: #9fb4d8; }
  footer.site-foot .foot-bottom a { color: #9fb4d8; text-decoration: none; }
  @media (max-width: 820px) {
    footer.site-foot .foot-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
    footer.site-foot .foot-brand { grid-column: 1 / -1; }
    footer.site-foot .foot-bottom { flex-direction: column; }
  }

  /* Ying, the course's academic partner (5 October 2026): a strip under the hero, a card in the course. */
  /* Built by (14 October 2026, the canvas "Kruu Jaidee Credentials", option 2): the course and the
     technology, across the bottom of the hero, each a link to its card below. */
  .built-by { background: var(--ground); border-top: 1px solid var(--rule); }
  .built-by .wrap { display: flex; align-items: center; gap: 36px; padding-block: 22px; }
  .bb-label { margin: 0; flex: none; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--soft); }
  .bb-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 14px; text-decoration: none; }
  .bb-item:hover { background: var(--white); }
  .bb-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .bb-item > img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--rule); background: var(--white); }
  .bb-item > img.bb-logo { object-fit: contain; padding: 8px; }
  .bb-item > span { display: flex; flex-direction: column; min-width: 0; }
  .bb-item b { color: var(--navy); font-size: 15px; font-weight: 800; }
  .bb-item > span > span { color: var(--soft); font-size: 13px; line-height: 1.4; }
  .bb-arrow { width: 18px; height: 18px; flex: none; margin-left: 4px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
  .bb-item:hover .bb-arrow { opacity: 1; }
  .bb-badges { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .bb-badges img { height: 38px; width: auto; }
  .credentials { scroll-margin-top: 90px; }
  .kyb-card > img { object-fit: contain; padding: 14px; border: 1px solid var(--rule); background: var(--white); }
  .kyb-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }
  .kyb-badges img { height: 48px; width: auto; }
  .kyb-link { margin: 12px 0 0; font-size: 15px; font-weight: 700; }
  .ying-card { display: flex; gap: 24px; align-items: flex-start; margin-top: 36px; padding: 26px; border-radius: 24px; background: var(--white); border: 1px solid var(--rule); text-align: left; }
  .ying-card > img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex: none; }
  .ying-card h3 { margin: 4px 0 4px; font-size: 22px; font-weight: 800; color: var(--navy); }
  .ying-cred { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--soft); }
  .ying-body { margin: 0; font-size: 16px; line-height: 1.65; color: #33435a; }
  .ying-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
  .ying-chips li { padding: 4px 11px; border-radius: 999px; background: var(--tint); font-size: 12px; font-weight: 700; color: #33435a; }
  @media (max-width: 820px) {
    .built-by .wrap { flex-direction: column; align-items: stretch; gap: 14px; padding-block: 18px; }
    .bb-badges { margin-left: 0; justify-content: center; }
    .bb-item { padding: 4px 6px 4px 0; }
    .bb-item > img { width: 48px; height: 48px; }
    .ying-card { flex-direction: column; gap: 14px; padding: 20px; }
    .ying-card > img { width: 88px; height: 88px; }
  }

  /* Native Thai teachers, coming soon (the owner, 10 October 2026: "add a
     slide with COMING SOON"). A modest preview: no teacher shown and nothing
     to book, as the app's own page (components/teachers-soon.tsx). The lines
     draw once, so nothing here loops. */
  .soon { background: radial-gradient(120% 140% at 85% 0%, #1d3a63 0%, var(--navy) 55%); color: #c9d5ea; overflow: hidden; }
  .soon-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 88px; }
  .soon-art { position: relative; aspect-ratio: 520 / 300; border-radius: 28px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); }
  .soon-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
  .soon-lines path { fill: none; stroke-width: 7; stroke-linecap: round; opacity: 0.9; stroke-dasharray: 700; stroke-dashoffset: 700; animation: soon-draw 1.6s ease-out forwards; }
  .soon-lines path:nth-child(2) { animation-delay: 0.15s; } .soon-lines path:nth-child(3) { animation-delay: 0.3s; } .soon-lines path:nth-child(4) { animation-delay: 0.45s; } .soon-lines path:nth-child(5) { animation-delay: 0.6s; }
  @keyframes soon-draw { to { stroke-dashoffset: 0; } }
  .soon-icon { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.3); }
  .soon-icon svg { width: 44px; height: 44px; fill: none; stroke: var(--navy); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .soon-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: var(--orange); color: var(--white); font-size: 13px; font-weight: 800; letter-spacing: 1.4px; }
  .soon-tag i { width: 8px; height: 8px; border-radius: 4px; background: var(--white); }
  .soon .eyebrow { color: #f6b48f; margin-top: 22px; }
  .soon h2 { color: var(--white); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.02em; margin: 10px 0 16px; }
  .soon .lead { color: #c9d5ea; }
  .soon-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
  .soon-chips li { padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--white); font-size: 14px; font-weight: 700; }
  @media (prefers-reduced-motion: reduce) { .soon-lines path { animation: none; stroke-dashoffset: 0; } }
  @media (max-width: 860px) {
    .soon-wrap { grid-template-columns: 1fr; gap: 32px; padding: 56px 20px; }
    .soon-icon { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
    .soon-icon svg { width: 36px; height: 36px; }
  }

  /* The Tone Trainer, moving: five words, one per tone, each matched in the
     app (the owner, 10 October 2026: "animate the THE TONE TRAINER screenshot
     with 5 different words, 5 different tones"). Pauses on hover or focus
     with every .tone-live demo. */
  .tt-stack { position: relative; }
  .tt-anim .tt-frame + .tt-frame { position: absolute; inset: 0; }
  .tt-anim .tt-frame { animation: tt-cycle 12.5s infinite; opacity: 0; }
  .tt-anim .tt-frame:nth-child(1) { animation-delay: 0s; } .tt-anim .tt-frame:nth-child(2) { animation-delay: 2.5s; } .tt-anim .tt-frame:nth-child(3) { animation-delay: 5s; } .tt-anim .tt-frame:nth-child(4) { animation-delay: 7.5s; } .tt-anim .tt-frame:nth-child(5) { animation-delay: 10s; }
  @keyframes tt-cycle { 0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .tt-anim .tt-frame { animation: none; opacity: 0; } .tt-anim .tt-frame:first-child { opacity: 1; } }
  @media (max-width: 480px) { .top .brand span { display: none; } }

  /* Your Thai % (the owner, 16 October 2026: design F on the canvas "Homepage: Your Thai %"). */
  .pct-text { min-width: 0; }
  .pct-curve { display: block; width: 100%; max-width: 520px; height: auto; }
  .pct-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 520px; margin: 0; padding: 0; list-style: none; }
  .pct-marks li { display: flex; flex-direction: column; gap: 2px; }
  .pct-marks strong { font-size: 17px; font-weight: 800; color: var(--navy); }
  .pct-marks span { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--soft); }
  .pct-marks li.pct-top strong { color: var(--orange); }
  .pct-art { position: relative; width: 520px; height: 420px; max-width: 100%; }
  .pct-card { position: absolute; left: 0; top: 0; width: 360px; box-sizing: border-box; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px rgba(19,35,58,.10); }
  .pct-card-top { display: flex; align-items: center; justify-content: space-between; }
  .pct-card-top span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--blue); }
  .pct-card-top b { font-size: 13px; font-weight: 800; color: var(--mid); }
  .pct-card-num { display: flex; align-items: baseline; gap: 10px; }
  .pct-card-num strong { font-size: 64px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; }
  .pct-card-num span { font-size: 17px; font-weight: 700; color: var(--soft); }
  .pct-bar { height: 10px; border-radius: 5px; background: #e8edf4; overflow: hidden; }
  .pct-bar i { display: block; height: 100%; width: 28%; border-radius: 5px; background: var(--blue); }
  .pct-card small { font-size: 13.5px; font-weight: 600; color: var(--soft); }
  .pct-close { position: absolute; right: 0; bottom: 0; width: 320px; box-sizing: border-box; background: var(--navy); border-radius: 22px; padding: 24px; color: var(--white); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 50px rgba(19,35,58,.22); }
  .pct-close span { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #f6b48f; }
  .pct-close strong { font-size: 46px; font-weight: 800; letter-spacing: -.02em; color: #7fd6a3; line-height: 1; }
  .pct-close p { margin: 0; font-size: 16px; font-weight: 700; }
  .pct-close .pct-bar { height: 8px; background: #24395a; }
  .pct-close .pct-bar i { background: #7fd6a3; }
  .pct-close small { font-size: 13.5px; font-weight: 600; color: #c9d5ea; }
  .pct-art { margin: 0 auto; }
  @media (max-width: 1080px) { .pct-art { transform: scale(.9); transform-origin: center; } }
  @media (max-width: 560px) {
    .pct-art { width: 100%; height: auto; display: flex; flex-direction: column; gap: 16px; }
    .pct-art { transform: none; }
    .pct-card, .pct-close { position: static; width: 100%; }
    .pct-card-num strong { font-size: 52px; }
    .pct-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* "Thai people teach you. AI assists." (the owner, 2 November 2026; canvas U2PbikSt7mY37LgBRBjow9, board D5 on the
     homepage): who does what, right under the hero. The headline, the robot line and both bands stay open; only the
     three "Why" paragraphs fold away, on desktop and phone alike. */
  .pa { background: var(--white); border-top: 1px solid var(--rule); }
  .pa .wrap { padding-block: 72px; display: flex; flex-direction: column; gap: 22px; }
  .pa .eyebrow { color: #c4561f; }
  .pa h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
  .pa h2 span { color: var(--blue); display: block; }
  .pa-lead { margin: 0; font-size: 21px; font-weight: 800; color: var(--navy); max-width: 820px; }
  .pa-why { max-width: 900px; color: var(--soft); font-size: 17px; line-height: 1.6; }
  .pa-why summary { cursor: pointer; font-weight: 800; color: var(--blue); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
  .pa-why summary::-webkit-details-marker { display: none; }
  .pa-why summary::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
  .pa-why[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
  .pa-why summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
  .pa-why p { margin: 12px 0 0; }
  .pa-why b { color: var(--navy); }
  .pa-bands { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
  .pa-band { border-radius: 24px; padding: 22px 8px 22px 26px; display: grid; grid-template-columns: 190px repeat(4, minmax(0, 1fr)); align-items: start; }
  .pa-band.people { background: var(--navy); color: var(--white); }
  .pa-band.ai { background: var(--ground); border: 1px solid var(--rule); }
  .pa-head { display: flex; flex-direction: column; gap: 10px; }
  .pa-head b { font-size: 20px; line-height: 1.15; }
  .pa-badge { align-self: flex-start; font-weight: 800; font-size: 11px; letter-spacing: 1.5px; padding: 4px 9px; border-radius: 999px; }
  .people .pa-badge { background: var(--orange); color: var(--navy); }
  .ai .pa-badge { background: #e0ebff; color: #1d3f8a; }
  .ai .pa-head b { color: var(--navy); }
  .pa-item { padding: 0 18px; border-left: 1px solid #2a4166; display: flex; flex-direction: column; gap: 4px; }
  .ai .pa-item { border-left-color: var(--rule); }
  .pa-item b { font-size: 16px; }
  .ai .pa-item b { color: var(--navy); }
  .pa-item span { font-size: 14px; line-height: 1.45; color: #c9d3e3; }
  .ai .pa-item span { color: var(--soft); }
  @media (max-width: 820px) {
    .pa .wrap { padding-block: 48px; gap: 16px; }
    .pa-lead { font-size: 18px; }
    .pa-why { font-size: 16px; }
    .pa-band { grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: 20px; }
    .pa-head { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
    .pa-item { padding: 0; border-left: 0; }
    .pa-item span { font-size: 13.5px; }
  }