/* Sabai / Learn Thai — site styles. Fonts are local (OFL). No external requests. */
@font-face{font-family:"Sabai Thai";src:url(fonts/NotoSansThaiLooped-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Nunito";src:url(fonts/Nunito-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/Nunito-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/Montserrat-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#FFF8F6;--surface:#FFFFFF;--ink:#2B2630;--ink-2:#544D58;--ink-3:#6F6873;
  --coral:#E07856;--coral-btn:#C4522D;--coral-ink:#B9532F;--coral-ink-2:#A04428;
  --peach:#FFE4D9;--peach-2:#FFF1EA;--peach-3:#FFEDE4;--sage:#EEF1EA;--green:#3E6B50;
  --line:rgba(43,38,48,.10);--line-2:rgba(43,38,48,.16);
  --r-lg:28px;--r-md:18px;--r-sm:12px;
  --sh-sm:0 2px 8px rgba(20,20,20,.05);
  --sh-md:0 12px 32px -8px rgba(20,20,20,.12);
  --sh-cta:0 14px 28px -14px rgba(211,94,56,.8);
  --f-ui:"Sabai Thai","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-head:"Sabai Thai","Montserrat","Nunito",system-ui,sans-serif;
  --pad:clamp(16px,4vw,48px);--max:1120px;
  --track-h:-.025em;--track-h2:-.018em;
}
html:lang(ja){
  --f-ui:"Sabai Thai","Nunito","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
  --f-head:"Sabai Thai","Montserrat","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
}
html:lang(ko){
  --f-ui:"Sabai Thai","Nunito","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --f-head:"Sabai Thai","Montserrat","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
}
html:lang(zh-Hant){
  --f-ui:"Sabai Thai","Nunito","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  --f-head:"Sabai Thai","Montserrat","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
}
html:lang(ja),html:lang(ko),html:lang(zh-Hant){--track-h:0;--track-h2:0}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--f-ui);font-size:1rem;line-height:1.55;
  background:
    radial-gradient(380px 380px at -140px 360px,rgba(255,205,184,.55),transparent 70%),
    radial-gradient(520px 520px at calc(100% + 160px) 300px,rgba(255,214,196,.5),transparent 70%),
    var(--bg);
  overflow-x:hidden;
}
html:lang(ja) body,html:lang(zh-Hant) body{line-height:1.75;line-break:strict}
html:lang(ko) body{line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
html:lang(ja) :is(h1,h2,.mod-panel-title,.fact-text){word-break:auto-phrase}
.phr{word-break:keep-all;overflow-wrap:anywhere}
html:lang(zh-Hant) .fact-text{word-break:keep-all;overflow-wrap:anywhere}
p{margin:0;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
img{max-width:100%}
a{color:var(--coral-ink)}
a:hover{color:var(--coral-ink-2)}
:focus-visible{outline:3px solid var(--coral-ink);outline-offset:2px;border-radius:6px}
.ic{width:24px;height:24px;fill:currentColor;flex:none}
.lang a:lang(ja){font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif}
.lang a:lang(ko){font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
.lang a:lang(zh-Hant){font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}

.wrap{max-width:calc(var(--max) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:12px;top:-80px;z-index:10;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#fff}

/* Art slots — empty until the artist's PNGs are added to assets/images/ */
.art-slot{position:relative;pointer-events:none;aspect-ratio:1/1;flex:none}
.art-slot:not(.has-img){display:none}
.show-slots .art-slot{display:block;outline:2px dashed rgba(62,107,80,.7);outline-offset:-2px;background:rgba(62,107,80,.08)}
.show-slots .art-slot::after{content:attr(data-slot);position:absolute;left:6px;bottom:6px;right:6px;font:700 11px/1.3 "Nunito",sans-serif;color:var(--green)}
.art-slot img{display:block;width:100%;height:100%;object-fit:contain}
/* Hero sprig: one whole sprig, in its own grid cell below the facts (never over text) */
.art-slot--sprig{grid-column:2;grid-row:2;justify-self:end;align-self:end;width:clamp(150px,13vw,176px)}
.art-slot--sprig-m{display:none!important}
/* Support plant floats top-right; text wraps beside it, links drop below */
.art-slot--plant{float:right;width:150px;margin:-10px -10px 8px 14px}
.art-slot--plant img{object-position:center bottom}

/* Header */
.site-header{position:relative;z-index:3}
.header-row{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;min-height:88px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand-icon{position:relative;width:46px;height:46px;border-radius:12px;overflow:hidden;flex:none;box-shadow:var(--sh-sm)}
.brand-icon img{position:absolute;width:77px;height:77px;left:-15.5px;top:-15.5px;max-width:none}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:"Montserrat",var(--f-head);font-weight:700;font-size:1.625rem;letter-spacing:-.02em;color:var(--ink);line-height:1.05}
.brand-name span{color:var(--coral)}
.brand-sub{font-size:.875rem;color:var(--ink-2);margin-top:3px;line-height:1.2}
.site-nav ul,.footer-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.site-nav a,.footer-links a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
.site-nav a:hover,.footer-links a:hover{color:var(--coral-ink-2);background:var(--peach-2)}
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;margin-left:auto;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
.menu-btn .ic{width:30px;height:30px}
.menu-btn:hover{background:var(--peach-2)}

.lang ul,ul.lang{display:flex;list-style:none;margin:0;padding:4px;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm)}
.lang a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 13px;border-radius:10px;color:var(--ink);font-weight:700;font-size:.9375rem;line-height:1;text-decoration:none;white-space:nowrap}
.lang a:hover{background:var(--peach-2);color:var(--ink)}
.lang a[aria-current="page"]{background:var(--peach);color:var(--coral-ink-2)}
.lang--header{margin-left:auto}

/* Hero */
.hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:24px 56px;align-items:start;padding-block:20px 44px}
.hero-copy{grid-column:1;grid-row:1 / span 2}
.facts{grid-column:2;grid-row:1}
h1{font-family:var(--f-head);font-weight:700;font-size:clamp(1.75rem,1.05rem + 2.9vw,3.125rem);line-height:1.08;letter-spacing:var(--track-h);margin:0 0 16px}
html:lang(ja) h1,html:lang(ko) h1,html:lang(zh-Hant) h1{font-size:clamp(1.625rem,1rem + 2.4vw,2.75rem);line-height:1.3}
html:lang(ru) h1{font-size:clamp(1.625rem,1rem + 2.6vw,2.875rem)}
.hero-intro{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.5;color:var(--ink-2);max-width:34em;margin-bottom:24px}
.cta{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px 0 22px;border-radius:14px;background:var(--coral-btn);color:#fff;font-weight:700;font-size:1.1875rem;line-height:1.2;text-decoration:none;box-shadow:var(--sh-cta);transition:background-color .2s ease,transform .2s ease}
.cta .ic{width:26px;height:26px}
.cta:hover{background:var(--coral-ink);color:#fff;transform:translateY(-1px)}
.store-ctas{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.cta--app{justify-content:center;padding:0 28px;background:var(--surface);color:var(--coral-ink-2);border:2px solid var(--coral-btn);box-shadow:var(--sh-sm)}
.cta--app:hover{background:var(--peach-2);color:var(--coral-ink-2)}
.hero-notes{margin-top:16px;color:var(--ink-2);font-size:.9375rem;line-height:1.45;display:grid;gap:2px}

.facts{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:auto auto minmax(0,1fr)}
.fact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:2px 22px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact:last-child{padding-right:0}
.fact .ic{width:36px;height:36px;fill:var(--coral)}
.fact-num{display:block;font-family:"Montserrat",var(--f-head);font-weight:700;font-size:2rem;line-height:1;color:var(--ink)}
.fact-label{display:block;margin-top:6px;color:var(--ink-2);font-size:1rem;line-height:1.3}
.fact--free .fact-text{font-weight:700;font-size:1rem;line-height:1.4;color:var(--ink);max-width:14em}

/* Audio demo */
.demo-section{position:relative;z-index:1}
.demo{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  grid-template-areas:"title art" "main art";grid-template-rows:auto 1fr;gap:0 28px;
  background:#FFF0E9;border:1px solid rgba(224,120,86,.14);border-radius:var(--r-lg);
  padding:40px 0 40px 48px;
}
.demo-title{grid-area:title;font-family:var(--f-head);font-weight:700;font-size:clamp(1.5rem,1.15rem + 1.3vw,2.125rem);line-height:1.2;letter-spacing:var(--track-h2);margin:0 0 20px}
.demo-art{grid-area:art;align-self:center;margin:-64px -20px -44px 0}
.demo-art img{display:block;width:100%;height:auto}
.demo-main{grid-area:main}
.demo-row{display:flex;align-items:center;flex-wrap:wrap;gap:20px 24px}
.word{display:flex;align-items:baseline;gap:.3em;margin:0;padding:12px 28px 8px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-sm);font-family:"Sabai Thai",var(--f-ui);line-height:1.3;color:var(--ink)}
.w-part{font-size:3.25rem;font-weight:500}
.w-op{font-size:1.75rem;color:var(--ink-3);font-family:"Nunito",sans-serif;align-self:center}
.w-res{font-size:4.5rem;font-weight:700;color:var(--coral-btn);display:inline-block;transform-origin:50% 70%}
.play{display:none;place-items:center;flex:none;position:relative;width:76px;height:76px;border:0;border-radius:50%;background:var(--coral-btn);color:#fff;cursor:pointer;box-shadow:var(--sh-cta);transition:background-color .2s ease,transform .2s ease}
.js .play{display:grid}
.play .ic{width:40px;height:40px;margin-left:4px}
.play:hover{background:var(--coral-ink);transform:scale(1.03)}
.play::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(211,94,56,.45);opacity:0;pointer-events:none}
.is-playing .play::after{animation:sabai-ring 1.1s ease-out infinite}
.is-playing .w-res{animation:sabai-word .9s ease}
@keyframes sabai-ring{from{transform:scale(.92);opacity:.9}to{transform:scale(1.28);opacity:0}}
@keyframes sabai-word{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
.demo audio{display:block;width:100%;max-width:340px;margin-top:16px}
.js .demo audio{display:none}
.demo-caption{margin-top:18px;color:var(--ink-2);font-size:1.0625rem;max-width:30em}
.demo-status{margin-top:8px;color:#A3361A;font-weight:700;font-size:1rem}
.demo-status:empty{margin:0}

/* Practice */
.practice{padding-top:72px}
h2{font-family:var(--f-head);font-weight:700;font-size:clamp(1.5rem,1.15rem + 1.3vw,2.125rem);line-height:1.18;letter-spacing:var(--track-h2);margin:0 0 24px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.step{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:14px;align-content:start;padding:2px 30px;border-left:1px solid var(--line)}
.step:first-child{padding-left:0;border-left:0}
.step:last-child{padding-right:0}
.step-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#F0907A;color:var(--ink);font:700 1.25rem/1 "Montserrat",sans-serif}
.step-icon{width:36px;height:36px;fill:var(--coral)}
.step p{grid-column:1 / -1;font-size:1.0625rem;line-height:1.5}

/* Course */
.course{padding-top:72px;scroll-margin-top:16px}
.course h2{margin-bottom:12px}
.course-intro{color:var(--ink-2);font-size:1.0625rem;line-height:1.6;max-width:62ch;margin-bottom:28px}
.modules{display:grid;gap:24px}
.mod-list{list-style:none;margin:0;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-sm)}
.mod{position:relative}
.mod+.mod::before{content:"";position:absolute;top:0;left:64px;right:14px;border-top:1px solid var(--line)}
.mod-h{margin:0;font:inherit}
.mod-btn{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto 22px;align-items:center;gap:14px;
  width:100%;min-height:58px;margin:0;padding:10px 12px 10px 14px;border:0;border-radius:14px;background:transparent;
  color:var(--ink);font:inherit;font-weight:700;font-size:1.0625rem;line-height:1.3;text-align:start;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.mod-btn:hover{background:#FFF6F1}
.mod-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--mc);color:var(--ink);font:700 1.0625rem/1 "Montserrat",sans-serif}
.mod-count{color:var(--ink-2);font-weight:400;font-size:.9375rem;white-space:nowrap}
.mod-chev{width:22px;height:22px;fill:var(--coral);transition:transform .25s ease}
.mod-body{padding:0 14px 16px 64px;color:var(--ink-2);font-size:1rem;line-height:1.6}
.mod-panel{display:none}

/* Access + support */
.end{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:24px;padding-block:72px 56px;scroll-margin-top:16px}
.access,.support{border-radius:var(--r-lg);padding:36px 40px}
.access{background:#FFF0E9;border:1px solid rgba(224,120,86,.14)}
.access h2,.support h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);margin-bottom:10px}
.access-body{font-size:1.0625rem;line-height:1.6;max-width:60ch}
.notes{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.notes li{display:flex;align-items:flex-start;gap:12px;padding:0 20px;border-left:1px solid rgba(43,38,48,.12);color:var(--ink-2);font-size:1rem;line-height:1.5}
.notes li:first-child{padding-left:0;border-left:0}
.notes li:last-child{padding-right:0}
.notes .ic{width:30px;height:30px;fill:var(--coral-ink)}
.support{position:relative;background:var(--sage);border:1px solid rgba(62,107,80,.14);scroll-margin-top:16px}
.support-copy{position:relative;z-index:1}
.support-copy>p{color:var(--ink-2);font-size:1.0625rem}
.support-copy>p.support-mail,.support-copy>p:last-child{font-size:1rem}
.support-mail{margin-top:16px;clear:right}
.support-mail a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--coral-ink-2);font-weight:700;font-size:1.0625rem;text-decoration:none}
.support-mail a:hover span{text-decoration:underline;text-underline-offset:3px}
.support-mail .ic{width:26px;height:26px}
.privacy{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.privacy:hover{color:var(--coral-ink-2)}

/* Footer */
.site-footer{border-top:1px solid var(--line)}
.footer-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;padding-block:22px 30px}
.footer-brand{display:flex;align-items:baseline;gap:10px;min-height:44px;align-items:center;text-decoration:none}
.footer-brand .brand-name{font-size:1.375rem}
.footer-brand .brand-sub{margin:0}
.footer-row .lang--footer{margin-left:auto}

/* Desktop selector (JS) */
@media (min-width:720px){
  .js .modules{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}
  .js .mod-body{display:none}
  .js .mod-chev{transform:rotate(-90deg)}
  .js .mod.is-selected .mod-btn{background:var(--peach-3);color:var(--coral-ink-2)}
  .js .mod-panel{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-sm);padding:30px 32px}
  .mod-panel-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .mod-num--lg{width:52px;height:52px;font-size:1.375rem}
  .mod-panel-title{font-family:var(--f-head);font-weight:700;font-size:1.625rem;line-height:1.2;letter-spacing:var(--track-h2)}
  .mod-panel-count{color:var(--ink-2);white-space:nowrap}
  .mod-panel-body{padding-top:20px;font-size:1.125rem;line-height:1.6;max-width:44ch}
  .mod-map{display:flex;gap:4px;margin-top:auto;padding-top:28px}
  .mod-map span{height:8px;flex-basis:0;border-radius:4px;background:rgba(43,38,48,.08);transition:background-color .25s ease}
  .mod-map span.is-on{background:var(--mc)}
}

@media (min-width:1001px){
  .notes li{flex-direction:column;gap:8px}
}

/* Tablet / small desktop */
@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
  .hero-copy{grid-column:1 / -1;grid-row:1}
  .facts{grid-column:1;grid-row:2;max-width:640px}
  .art-slot--sprig{grid-column:2;grid-row:2;align-self:center;width:150px}
  .end{grid-template-columns:minmax(0,1fr)}
  .steps .step{padding-inline:20px}
}

/* Mobile */
@media (max-width:719px){
  .header-row{min-height:0;padding-block:12px 8px;gap:10px 12px}
  .brand-icon{width:42px;height:42px;border-radius:11px}
  .brand-icon img{width:70px;height:70px;left:-14px;top:-14px}
  .brand-name{font-size:1.5rem}
  .site-nav{order:2}
  .js .menu-btn{display:flex}
  .js .site-nav{display:none;flex-basis:100%}
  .js .site-nav.is-open{display:block}
  .js .site-nav ul{flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-md)}
  .js .site-nav a{min-height:48px;font-size:1.0625rem}
  .lang--header{order:3;flex-basis:100%;margin-left:0}
  .lang--header ul{width:100%}
  .lang--header li{flex:1 1 auto;min-width:0}
  .lang--header a{padding:0 4px}

  .hero{grid-template-columns:minmax(0,1fr);padding-block:12px 28px;gap:22px}
  .facts{grid-column:1}
  .art-slot--sprig{display:none!important}
  .has-hero-art .art-slot--sprig-m,.show-slots .art-slot--sprig-m{display:block!important;position:absolute;top:0;right:calc(var(--pad) + 54px);width:70px;z-index:0}
  .lang--header{position:relative;z-index:1}
  .hero-intro{margin-bottom:20px}
  .store-ctas{flex-direction:column;gap:10px}
  .cta{width:100%;min-height:52px;justify-content:center;padding:0 18px}
  .hero-notes{margin-top:12px}
  .facts{margin:0;grid-template-columns:1fr 1fr;padding:14px 16px;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-sm);row-gap:14px}
  .fact{padding:0 10px}
  .fact:last-child{padding-right:10px}
  .fact .ic{width:32px;height:32px}
  .fact-num{font-size:1.75rem}
  .fact--free{grid-column:1 / -1;flex-direction:row;text-align:start;justify-content:center;border-left:0;border-top:1px solid var(--line);padding:14px 4px 0}
  .fact--free .fact-text{max-width:none}

  .demo{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "art" "main";grid-template-rows:auto auto auto;gap:12px;padding:20px 16px 22px;border-radius:24px}
  .demo-title{padding-left:2px;margin-bottom:0}
  .demo-art{margin:0 -8px}
  .demo-main{display:flex;flex-direction:column;align-items:stretch;text-align:center}
  .demo-row{flex-direction:column;align-items:center;gap:14px}
  .word{align-self:stretch;justify-content:center;padding:10px 16px 6px;gap:.35em}
  .w-part{font-size:2.25rem}
  .w-op{font-size:1.375rem}
  .w-res{font-size:3.25rem}
  .play{width:68px;height:68px}
  .play .ic{width:36px;height:36px}
  .demo-caption{margin:14px auto 0;font-size:1rem;line-height:1.5}
  html:lang(ja) .demo-caption,html:lang(zh-Hant) .demo-caption,html:lang(ko) .demo-caption{line-height:1.6}

  .practice{padding-top:44px}
  .steps{grid-template-columns:minmax(0,1fr);gap:10px}
  .step,.steps .step{grid-template-columns:auto auto minmax(0,1fr);gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-sm)}
  .step:first-child{padding-left:16px;border-left:1px solid var(--line)}
  .step:last-child{padding-right:16px}
  .step-num{width:38px;height:38px;font-size:1.0625rem}
  .step-icon{width:30px;height:30px}
  .step p{grid-column:auto;font-size:1rem}

  .course{padding-top:44px}
  .course-intro{font-size:1rem;margin-bottom:18px}
  .mod-list{padding:6px}
  .mod+.mod::before{left:60px;right:12px}
  .mod-btn{grid-template-columns:34px minmax(0,1fr) auto 22px;gap:12px;padding:8px 10px 8px 12px;font-size:1rem}
  .mod-num{width:34px;height:34px;font-size:1rem}
  .mod-count{font-size:.875rem}
  .js .mod-body{display:none}
  .js .mod.is-open .mod-body{display:block}
  .mod-body{padding:0 12px 14px 58px;font-size:1rem}
  .js .mod.is-open .mod-btn{background:var(--peach-3);color:var(--coral-ink-2);border-radius:14px 14px 0 0}
  .js .mod.is-open .mod-body{background:var(--peach-3);border-radius:0 0 14px 14px}
  .js .mod.is-open .mod-chev{transform:rotate(180deg)}
  .js .mod.is-open+.mod::before{display:none}

  .end{padding-block:44px 32px;gap:16px}
  .access,.support{padding:24px 20px;border-radius:24px}
  .access-body{font-size:1rem}
  .notes{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:18px}
  .notes li,.notes li:first-child,.notes li:last-child{padding:12px 14px;border:0;border-radius:14px;background:rgba(255,255,255,.8);align-items:center}
  .notes .ic{width:28px;height:28px}
  .art-slot--plant{width:104px;margin:-8px -6px 6px 10px}

  .footer-row{gap:12px 16px;padding-block:20px 24px;align-items:flex-start}
  .footer-brand{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1}
  .footer-brand .brand-sub{margin:0}
  .footer-row .lang--footer{flex:1 1 200px;margin-left:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0;background:none;border:0;box-shadow:none}
  .lang--footer li{min-width:0}
  .lang--footer a{padding:0 4px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
  .footer-links{order:3;flex-basis:100%;justify-content:center}

}

/* Phones: lesson count under the module title */
@media (max-width:479px){
  .mod-btn{grid-template-columns:34px minmax(0,1fr) 22px;grid-template-areas:"num title chev" "num count chev";row-gap:1px}
  .mod-num{grid-area:num}
  .mod-title{grid-area:title}
  .mod-count{grid-area:count}
  .mod-chev{grid-area:chev}
}

/* Narrow phones (320–379) */
@media (max-width:379px){
  .demo{padding:18px 14px 20px}
  .w-part{font-size:2rem}
  .w-op{font-size:1.25rem}
  .w-res{font-size:2.875rem}
  .step-icon{display:none}
  .step,.steps .step{grid-template-columns:auto minmax(0,1fr)}
  .fact{padding:0 6px}
  .footer-links a{padding:0 8px}
  .footer-row{gap:6px 8px}
  .access,.support{padding:22px 18px}
  .footer-row .lang--footer{flex-basis:100%}
  .has-hero-art .art-slot--sprig-m,.show-slots .art-slot--sprig-m{right:calc(var(--pad) + 50px);width:62px;top:4px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .cta:hover,.play:hover{transform:none}
  .is-playing .play::after{opacity:1;transform:none}
}