/* Sabai / Learn Thai — site styles. Fonts are local (OFL). No external requests.
   System: one 1120px container, 12 columns / 24px gutter on desktop.
   Two-part compositions (hero, course, access+help) share one axis at column 8 (7/5).
   Spacing roles: 8 pair · 16 related · 24 group · 32 block · 48 sub-section · 72 section. */
@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;
  --line:rgba(43,38,48,.12);
  --r-card:20px;--r-ctl:12px;--r-in:8px;
  --sh-btn:0 10px 20px -12px rgba(160,68,40,.65);
  --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,5vw,48px);--max:1120px;--gut:24px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;
  --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);background:var(--bg);font-family:var(--f-ui);font-size:1rem;line-height:1.55;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,.free-note){word-break:auto-phrase}
.phr{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:var(--r-ctl);font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#fff}

/* Header */
.site-header{position:relative;z-index:3}
.header-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px;min-height:88px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand-icon{width:52px;height:52px;border-radius:var(--r-ctl);overflow:hidden;flex:none}
.brand-icon img{display:block;width:100%;height:100%;object-fit:contain}
.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:var(--r-ctl);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:var(--r-ctl);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:var(--r-ctl)}
.lang a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 13px;border-radius:var(--r-in);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 spread: decide (left) · see and try (right) */
.hero{padding-top:var(--s4)}
.hero-copy{min-width:0}
h1{font-family:var(--f-head);font-weight:700;font-size:clamp(1.875rem,1.1rem + 2.8vw,3.125rem);line-height:1.1;letter-spacing:var(--track-h);margin:0}
html:lang(ru) h1{font-size:clamp(1.75rem,1rem + 2.6vw,2.875rem)}
html:lang(ja) h1,html:lang(ko) h1,html:lang(zh-Hant) h1{font-size:clamp(1.625rem,1rem + 2.2vw,2.625rem);line-height:1.35}
.hero-intro{margin-top:var(--s2);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:36em}
html:lang(ja) .hero-intro,html:lang(zh-Hant) .hero-intro,html:lang(ko) .hero-intro{line-height:1.75}

/* Course scale: one compact pair, read as part of the explanation */
.scale{display:flex;flex-wrap:wrap;align-items:baseline;list-style:none;margin:var(--s3) 0 0;padding:0}
.scale li{line-height:1.2;color:var(--ink-2);font-size:1rem}
.scale li+li{margin-left:var(--s3);padding-left:var(--s3);border-left:1px solid var(--line)}
.scale-num{font-family:"Montserrat",var(--f-head);font-weight:700;font-size:1.5rem;color:var(--ink);letter-spacing:-.01em}

/* Store choice: two equal buttons; free start directly beneath, grouped by proximity */
.store-ctas{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:640px;margin-top:var(--s4)}
.cta{flex:1 1 17.5rem;display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:8px 20px;border-radius:var(--r-ctl);background:var(--coral-btn);color:#fff;font-weight:700;font-size:1.125rem;line-height:1.25;text-align:center;text-decoration:none;box-shadow:var(--sh-btn);transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.cta:hover{background:var(--coral-ink);color:#fff;transform:translateY(-1px);box-shadow:0 14px 24px -12px rgba(160,68,40,.7)}
.cta:focus-visible{outline-offset:3px;border-radius:var(--r-ctl)}
.cta .ic--google-play{width:24px;height:24px}
.cta .ic--apple{width:20px;height:26px}
.free-note{margin-top:var(--s2);font-weight:700;font-size:1rem;line-height:1.45;color:var(--ink);max-width:640px}

/* Scene + reading example */
.hero-side{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s5);max-width:560px}
.scene{margin:0}
.scene img{display:block;width:100%;height:auto}
.demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3)}
.demo-title{font-family:var(--f-head);font-weight:700;font-size:1.125rem;line-height:1.3;letter-spacing:0;margin:0}
.demo-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s1)}
.word{display:flex;align-items:baseline;gap:.3em;margin:0;font-family:"Sabai Thai",var(--f-ui);line-height:1.25;color:var(--ink)}
.w-part{font-size:2.75rem;font-weight:500}
.w-op{font-size:1.5rem;color:var(--ink-3);font-family:"Nunito",sans-serif;align-self:center}
.w-res{font-size:3.75rem;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:64px;height:64px;border:0;border-radius:50%;background:var(--coral-btn);color:#fff;cursor:pointer;box-shadow:var(--sh-btn);transition:background-color .2s ease,transform .2s ease}
.js .play{display:grid}
.play .ic{width:34px;height:34px;margin-left:3px}
.play:hover{background:var(--coral-ink);transform:scale(1.03)}
.play:focus-visible{outline-offset:3px;border-radius:50%}
.play::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(196,82,45,.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%;margin-top:var(--s2)}
.js .demo audio{display:none}
.demo-caption{margin-top:var(--s1);color:var(--ink-2);font-size:1rem;line-height:1.5}
.demo-status{margin-top:var(--s1);color:#A3361A;font-weight:700;font-size:1rem}
.demo-status:empty{margin:0}

/* Section headings */
h2{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 var(--s3)}

/* Practice: ordered steps, numbers carry the order */
.practice{padding-top:var(--s6)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.step{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:var(--s2);align-items:baseline;padding-top:var(--s2);border-top:1px solid var(--line)}
.step-num{font:700 1.5rem/1 "Montserrat",sans-serif;color:var(--coral-btn)}
.step p{font-size:1.0625rem;line-height:1.5}

/* Course */
.course{padding-top:var(--s6);scroll-margin-top:16px}
.course h2{margin-bottom:var(--s2)}
.course-intro{color:var(--ink-2);font-size:1.0625rem;line-height:1.6;max-width:40em;margin-bottom:var(--s4)}
.modules{display:grid;gap:var(--gut)}
.mod-list{list-style:none;margin:0;padding:var(--s1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.mod{position:relative}
.mod+.mod::before{content:"";position:absolute;top:0;left:64px;right:12px;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:var(--s2);
  width:100%;min-height:56px;margin:0;padding:10px 12px;border:0;border-radius:var(--r-ctl);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:var(--peach-2)}
.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-ink);transition:transform .25s ease}
.mod-body{padding:0 12px 16px 64px;color:var(--ink-2);font-size:1rem;line-height:1.6}
.mod-panel{display:none}

/* Access + help */
.end{display:grid;gap:var(--s5);padding-block:var(--s6)}
.access h2,.support h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);margin-bottom:var(--s2)}
.access-body{font-size:1.0625rem;line-height:1.6;max-width:40em}
.notes{list-style:none;margin:var(--s3) 0 0;padding:0;max-width:40em}
.notes li{padding-block:var(--s2);border-top:1px solid var(--line);color:var(--ink-2);font-size:1rem;line-height:1.5}
.notes li:last-child{border-bottom:1px solid var(--line)}
.support{align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);scroll-margin-top:16px}
.support-copy>p{color:var(--ink-2);font-size:1.0625rem}
.support-mail{margin-top:var(--s2)}
.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}
.support-copy>p:last-child{font-size:1rem}
.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:16px 32px;padding-block:24px 32px}
.footer-brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.footer-brand .brand-name{font-size:1.375rem}
.footer-brand .brand-sub{margin:0}
.footer-row .lang--footer{margin-left:auto}

/* ≥720: practice in thirds */
@media (min-width:720px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut)}
  .step{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
}

/* ≥960: 12 columns, two-part compositions split 7/5 on the same axis */
@media (min-width:960px){
  .hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center}
  .hero-copy{grid-column:1 / span 7;padding-right:var(--s2)}
  .hero-side{grid-column:8 / span 5;margin-top:0;max-width:none}

  .js .modules{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:stretch}
  .js .mod-list{grid-column:1 / span 7}
  .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{grid-column:8 / span 5;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4)}
  .mod-panel-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--s2);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
  .mod-num--lg{grid-row:span 2;width:52px;height:52px;font-size:1.375rem}
  .mod-panel-title{font-family:var(--f-head);font-weight:700;font-size:1.5rem;line-height:1.25;letter-spacing:var(--track-h2)}
  .mod-panel-count{color:var(--ink-2);font-size:1rem}
  .mod-panel-body{padding-top:var(--s3);font-size:1.0625rem;line-height:1.6}
  .mod-map{display:flex;gap:4px;margin-top:auto;padding-top:var(--s4)}
  .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)}

  .end{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:0}
  .access{grid-column:1 / span 7;padding-right:var(--s2)}
  .support{grid-column:8 / span 5}
}
/* 960–1099: the text column is too narrow for two buttons side by side in every language → stacked, equal */
@media (min-width:960px) and (max-width:1099px){
  .store-ctas{max-width:400px}
}

/* <960: accordion for modules (closed by default) */
@media (max-width:959px){
  .js .mod-body{display:none}
  .js .mod.is-open .mod-body{display:block}
  .js .mod.is-open .mod-btn{background:var(--peach-3);color:var(--coral-ink-2);border-radius:var(--r-ctl) var(--r-ctl) 0 0}
  .js .mod.is-open .mod-body{background:var(--peach-3);border-radius:0 0 var(--r-ctl) var(--r-ctl)}
  .js .mod.is-open .mod-chev{transform:rotate(180deg)}
  .js .mod.is-open+.mod::before{display:none}
  .support{max-width:640px}
  /* Single column: the reading example comes before the decorative scene (scene is alt="", not focusable) */
  .hero-side .demo{order:-1}
}

/* Phones */
@media (max-width:719px){
  .header-row{min-height:0;padding-block:12px 8px;gap:10px 12px}
  .brand-icon{width:44px;height:44px;border-radius:10px}
  .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:var(--r-card)}
  .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{padding-top:var(--s3)}
  .store-ctas{gap:12px}
  .cta{min-height:52px;padding:8px 16px}
  .hero-side{margin-top:var(--s5)}
  .demo{padding:20px}
  .w-part{font-size:2.25rem}
  .w-op{font-size:1.25rem}
  .w-res{font-size:3rem}
  .play{width:56px;height:56px}
  .play .ic{width:30px;height:30px}

  .practice,.course{padding-top:var(--s5)}
  .end{padding-block:var(--s5) var(--s4)}
  .course-intro{font-size:1rem;margin-bottom:var(--s3)}
  .mod-list{padding:6px}
  .mod+.mod::before{left:58px;right:10px}
  .mod-btn{grid-template-columns:34px minmax(0,1fr) auto 22px;gap:12px;padding:8px 10px;font-size:1rem}
  .mod-num{width:34px;height:34px;font-size:1rem}
  .mod-count{font-size:.875rem}
  .mod-body{padding:0 12px 14px 56px}
  .access-body{font-size:1rem}
  .support{padding:var(--s3)}

  .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-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}
  .lang--footer li{min-width:0}
  .lang--footer a{padding:0 4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl)}
  .footer-links{order:3;flex-basis:100%;justify-content:center}
}

/* Narrow 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}
}

@media (max-width:379px){
  .demo{padding:16px}
  .w-part{font-size:2rem}
  .w-res{font-size:2.75rem}
  .demo-row{gap:12px}
  .footer-links a{padding:0 8px}
  .footer-row{gap:6px 8px}
  .footer-row .lang--footer{flex-basis:100%}
}

@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}
}

/* Policy: one readable column within the accepted header/footer shell. */
.privacy-page{padding-block:var(--s5) var(--s6)}
.privacy-document{max-width:44rem;margin-inline:auto;overflow-wrap:anywhere}
.privacy-document h1{font-size:clamp(1.75rem,1.25rem + 1.7vw,2.625rem);line-height:1.25}
.privacy-document .privacy-updated{margin-top:var(--s2);color:var(--ink-3);font-size:.9375rem}
.privacy-document .privacy-intro{margin-top:var(--s4)}
.privacy-document section{margin-top:var(--s4)}
.privacy-document h2{font-size:clamp(1.25rem,1rem + .65vw,1.5rem);line-height:1.4;margin-bottom:var(--s2)}
.privacy-document p+p{margin-top:var(--s2)}
.privacy-document p{line-height:1.75}

.privacy-document .app-policy{margin-top:var(--s4)}