/* Self-hosted Thai font: Sarabun (SIL Open Font License) */
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sarabun-thai-400-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/sarabun-thai-500-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/sarabun-thai-600-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sarabun-thai-700-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
/* Fallback only if Sarabun cannot load: local looped Thai fonts (Mac/iPhone: Thonburi, Windows: Tahoma) */
@font-face{font-family:'ThaiLooped';src:local('Thonburi'),local('Tahoma');unicode-range:U+0E01-0E5B}

/* ==========================================================
   Speak Thai Studio — shared design system (styles.css) v2
   Clean & minimal. Edit tokens here to restyle every page.
   ========================================================== */

:root{
  /* Colour */
  --bg:#FFFFFF;
  --soft:#F1F6FD;         /* light blue section background */
  --text:#10213A;         /* deep navy text */
  --muted:#56657A;
  --line:#E3EAF3;
  --accent:#1F6FEB;       /* brand blue: trust, highlights */
  --accent-dark:#1559C4;
  --accent-soft:#E7F0FE;
  --cta:#FF7A1A;          /* warm action colour: buttons only */
  --cta-dark:#EA640A;
  --dark:#0E2A52;         /* navy sections */

  /* Type */
  --font:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --thai:'Sarabun','ThaiLooped',sans-serif;

  /* Shape */
  --max:1140px;
  --r-sm:12px;
  --r:20px;
  --r-lg:28px;
  --shadow:0 14px 40px rgba(16,33,58,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:lang(th),.th{font-family:var(--thai)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--text);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:10px;top:10px}

/* ---------- Type ---------- */
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--text)}
h1{font-size:clamp(40px,6.4vw,72px)}
h2{font-size:clamp(30px,4.2vw,46px);margin-bottom:16px}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.3;margin-bottom:6px;font-weight:700}
.kicker{display:inline-block;font-size:14px;font-weight:600;color:var(--accent);margin-bottom:14px}
.lead{font-size:19px;color:var(--muted);max-width:620px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.hl{color:var(--accent)}
p.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 26px;border-radius:999px;font-family:var(--font);font-size:16px;font-weight:700;text-decoration:none;transition:background .15s,transform .15s,border-color .15s;cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
.btn-primary{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(255,122,26,.28)}
.btn-primary:hover{background:var(--cta-dark);transform:translateY(-1px)}
.btn-outline{border-color:var(--line);color:var(--text);background:#fff}
.btn-outline:hover{border-color:var(--text)}
.btn-white{background:#fff;color:var(--text)}
.btn-white:hover{background:#FFF4EC}
.btn-note{font-size:14px;color:var(--muted);margin-top:14px}
.arrow::after{content:'→';font-weight:600}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none;color:var(--text)}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.nav{display:flex;align-items:center;gap:32px}
.nav ul{display:flex;gap:26px;list-style:none}
.nav a{font-size:15px;font-weight:500;color:var(--muted);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav .btn{min-height:42px;padding:9px 18px;font-size:15px;color:#fff}
.menu-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;color:var(--text)}
.menu-toggle svg{width:24px;height:24px}

/* ---------- Sections ---------- */
.section{padding:104px 0}
.section-sm{padding:72px 0}
.bg-soft{background:var(--soft)}
.bg-dark{background:var(--dark);color:#C9D6EA}
.bg-dark h2,.bg-dark h3{color:#fff}
.bg-dark .lead,.bg-dark p.muted{color:#A9BBD6}
.bg-dark .kicker{color:#7DB2FF}
.head{margin-bottom:52px}

/* ---------- Image placeholders (replace with stock photos) ---------- */
.ph{position:relative;background:linear-gradient(135deg,#E4EEFB,#CFE0F7);border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end}
.ph::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),transparent 55%)}
.ph span{position:relative;margin:16px;background:rgba(255,255,255,.92);border-radius:10px;padding:8px 12px;font-size:12.5px;line-height:1.45;color:var(--muted);max-width:90%}
.ph span b{display:block;color:var(--text);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Hero ---------- */
.hero{padding:72px 0 96px;background:linear-gradient(180deg,#EAF2FE 0%,#FFFFFF 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero .lead{margin:24px 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{position:relative}
.hero-visual .ph{aspect-ratio:4/5;align-items:center;justify-content:center}
.float-card{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;font-size:14px}
.plan-card{left:-36px;bottom:40px;width:230px}
.plan-card .t{font-weight:700;margin-bottom:10px;font-size:14px}
.plan-card ul{list-style:none}
.plan-card li{display:flex;align-items:center;gap:8px;padding:5px 0;color:var(--muted)}
.plan-card li i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px}
.plan-card li.done i{background:var(--accent);border-color:var(--accent);color:#fff}
.plan-card li.done{color:var(--text)}
.live-card{right:-20px;top:36px;display:flex;align-items:center;gap:10px;font-weight:600}
.live-dot{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}

/* ---------- Feature strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;padding:22px 0}
.strip li{font-size:15px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.strip li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- Grids & cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:0 4px 18px rgba(16,33,58,.04)}
.bg-soft .card{border-color:transparent}
.card p{color:var(--muted);font-size:16px}

/* Pain list */
.pain-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.pain-list{list-style:none;display:grid;gap:12px}
.pain-list li{background:#fff;border-radius:var(--r-sm);padding:18px 22px;font-size:17px;font-weight:500;display:flex;gap:14px;align-items:flex-start}
.pain-list li::before{content:'“';font-size:34px;line-height:.8;color:var(--accent);font-weight:800}

/* Steps */
.step .num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:18px;margin-bottom:20px}
.step .ph{aspect-ratio:4/3;margin-bottom:22px}

/* Features */
.feature .icon{width:46px;height:46px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.feature .icon svg{width:22px;height:22px}

/* Learning path */
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stage{background:#fff;border-radius:var(--r);padding:30px;border:1px solid var(--line);position:relative}
.stage .level{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px;display:block}
.stage ul{list-style:none;margin-top:14px}
.stage li{padding-left:26px;position:relative;font-size:15.5px;color:var(--muted);margin-bottom:8px}
.stage li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.bar{height:6px;border-radius:6px;background:var(--line);margin-top:22px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;justify-content:center}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:15px;font-weight:500}

/* Reviews */
.review blockquote{font-size:20px;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--text);margin-bottom:22px}
.review cite{font-style:normal;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px}
.review cite::before{content:'';width:28px;height:2px;background:var(--accent)}

/* Pricing */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.price-card{background:#fff;color:var(--text);border-radius:var(--r-lg);padding:40px}
.price{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1}
.price small{font-size:18px;font-weight:500;color:var(--muted);letter-spacing:0}
.price-card .muted{margin:8px 0 26px}
.price-card .btn{width:100%}
.checks{list-style:none}
.checks li{padding:12px 0 12px 34px;position:relative;border-bottom:1px solid rgba(255,255,255,.12);color:#E6EDF8}
.checks li::before{content:'✓';position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* Resource cards */
.res{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:var(--r);background:#fff;overflow:hidden;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.res:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.res .media{aspect-ratio:16/10;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.res .media img{height:86%;width:auto;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.14);transform:rotate(-3deg)}
.res .media.ph{border-radius:0}
.res .body{padding:24px}
.res .tag{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:6px;display:block}
.res p{color:var(--muted);font-size:15.5px}

/* Articles */
.post{text-decoration:none;color:inherit;border-top:1px solid var(--line);padding-top:22px;display:block}
.post .cat{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;display:block}
.post h3{font-size:20px;transition:color .15s}
.post:hover h3{color:var(--accent)}

/* Teacher (small, late on page) */
.teacher{display:flex;gap:28px;align-items:center;background:var(--soft);border-radius:var(--r-lg);padding:36px}
.teacher-photo{width:112px;height:112px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#CFE0F7}
.teacher-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.teacher h3{font-size:22px}
.teacher p{color:var(--muted);font-size:16px;margin-bottom:10px}
.textlink{font-weight:700;color:var(--text);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px}
.textlink:hover{color:var(--accent)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-weight:700;font-size:18px;position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 22px;color:var(--muted)}

/* Final CTA */
.cta-panel{background:linear-gradient(135deg,var(--accent),#0E2A52);color:#fff;border-radius:var(--r-lg);padding:72px 32px;text-align:center}
.cta-panel h2{color:#fff}
.cta-panel .lead{color:rgba(255,255,255,.88);margin:0 auto 32px}
.cta-panel .btn-note{color:rgba(255,255,255,.85)}
.cta-panel .btn-note a{color:#fff}
.cta-panel .btn-white{background:var(--cta);color:#fff}
.cta-panel .btn-white:hover{background:var(--cta-dark)}

/* ---------- Footer ---------- */
.site-footer{padding:64px 0 32px;font-size:15px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.site-footer h4{font-size:14px;font-weight:700;margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.mobile-cta{display:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{position:absolute;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;display:none}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav li a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--text)}
  .nav .btn{margin-top:18px;min-height:52px}
  .section{padding:72px 0}
  .hero{padding:40px 0 64px}
  .hero-grid,.pain-grid,.price-wrap{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:420px;margin:0 auto;width:100%}
  .plan-card{left:-8px;bottom:20px;width:200px}
  .live-card{right:-6px;top:20px}
  .grid-2,.grid-3,.path{grid-template-columns:1fr}
  .price-card{padding:30px 24px}
  .teacher{flex-direction:column;text-align:center;padding:30px 22px}
  .cta-panel{padding:52px 22px}
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
  .mobile-cta .btn{width:100%}
  .site-footer{padding-bottom:110px}
}
@media (max-width:520px){
  .grid-4,.footer-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .strip ul{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Inner pages ---------- */
.page-hero{padding:72px 0 80px;background:linear-gradient(180deg,#EAF2FE 0%,#FFFFFF 100%)}
.page-hero .hero-grid{grid-template-columns:1.1fr .9fr}
.page-hero .ph{aspect-ratio:5/4;align-items:center;justify-content:center}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}

/* Persona cards */
.persona .ph{aspect-ratio:16/10;margin:-28px -28px 22px;border-radius:var(--r) var(--r) 0 0}

/* Focus tags */
.focus{display:flex;gap:16px;align-items:flex-start}
.focus .icon{flex-shrink:0;width:46px;height:46px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.focus .icon svg{width:22px;height:22px}

/* Detail table */
.details-list{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.details-list div{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:20px 26px;border-bottom:1px solid var(--line)}
.details-list div:last-child{border-bottom:0}
.details-list dt{font-weight:700}
.details-list dd{color:var(--muted)}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}

/* Timeline steps (vertical) */
.timeline{list-style:none;position:relative;max-width:760px}
.timeline li{position:relative;padding:0 0 36px 72px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .num{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}

@media (max-width:860px){
  .page-hero{padding:40px 0 56px}
  .page-hero .hero-grid{grid-template-columns:1fr}
  .details-list div{grid-template-columns:1fr;gap:4px}
  .split{grid-template-columns:1fr;gap:32px}
}
.review-shot{aspect-ratio:4/5;align-items:center;justify-content:center}
.review-shot img{object-fit:contain;background:#fff}
.hero-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow);background:var(--soft)}
.hero-img img{width:100%;height:100%;object-fit:cover}
/* hero photo + floating cards */
.hero-visual .plan-card{bottom:-34px}
@media (max-width:860px){.hero-visual .plan-card{display:none}}
/* real photos inside cards */
.res .media.cover{position:relative}
.res .media.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;box-shadow:none;border-radius:0}
/* Contact email block */
#book{scroll-margin-top:80px}
.email-label{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:10px}
.email-big{display:inline-block;font-size:clamp(24px,5vw,44px);font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);border-radius:18px;padding:16px 30px;margin-bottom:20px;word-break:break-all}
.email-big:hover{background:rgba(255,255,255,.22)}
.cta-panel .copy-email{background:#fff;color:var(--text)}
.cta-panel .copy-email:hover{background:#FFF4EC}
.email-tip{margin:22px auto 0;max-width:620px;font-size:15px;color:rgba(255,255,255,.85)}
.email-big{word-break:normal;overflow-wrap:normal;white-space:nowrap}
@media (max-width:520px){.email-big{font-size:clamp(17px,5.6vw,24px);padding:14px 16px}}
.price-wrap>*,.hero-grid>*,.split>*{min-width:0}
@media (max-width:520px){.price{font-size:48px}.price-card{padding:26px 20px}}
@media (max-width:520px){.cta-panel{padding:44px 14px}.email-big{font-size:clamp(16px,5.2vw,24px);padding:14px 14px;max-width:100%}}
/* Compact contact panel (used on index.html) */
.cta-compact{max-width:760px;margin:0 auto;padding:48px 32px}
.cta-compact h2{font-size:clamp(24px,3vw,32px);margin-bottom:10px}
.cta-compact .lead{font-size:16.5px;margin:0 auto 22px}
.cta-compact .email-label{font-size:12px;margin-bottom:8px}
.cta-compact .email-big{font-size:clamp(17px,2.2vw,22px);font-weight:700;padding:10px 20px;border-radius:12px;margin-bottom:14px}
.cta-compact .copy-email{min-height:42px;padding:9px 20px;font-size:14.5px}
.cta-compact .email-tip{font-size:14px;margin-top:16px}
@media (max-width:520px){.cta-compact{padding:36px 16px}.cta-compact .email-big{font-size:clamp(15px,4.6vw,18px);padding:10px 12px}}
/* Review screenshots wall */
.review-wall{columns:2;column-gap:20px;max-width:1000px;margin:0 auto}
.review-img{break-inside:avoid;margin:0 0 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:0 4px 18px rgba(16,33,58,.05)}
.review-img img{width:100%;height:auto;border-radius:12px}
.review-note{text-align:center;font-size:13px;color:var(--muted);margin-top:4px}
@media (max-width:760px){.review-wall{columns:1}}

/* ==========================================================
   v3 additions: complete site (articles, hub, books, about)
   ========================================================== */
:root{--font:'Plus Jakarta Sans','Sarabun','ThaiLooped','Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
.nav ul{gap:30px}

/* Article header */
.article-head{padding:64px 0 40px}
.article-head h1{font-size:clamp(32px,4.6vw,50px);line-height:1.15}
.article-head .hero-sub,.article-head .hero-translit{font-size:18px;color:var(--muted);margin:18px auto 0;max-width:640px}
.article-head .hero-translit{color:var(--accent);font-weight:600}
.article-head .hero-translit em{font-style:normal}
.page-hero .narrow.center .breadcrumb{display:block}

/* Article body: map old component colours to the new palette */
.article-wrap{
  --pink:#EA640A;--pink-light:#FFF0E6;--pink-mid:#FFC59A;
  --blue:#1F6FEB;--blue-dark:#1559C4;--blue-light:#E7F0FE;--blue-mid:#7DB2FF;
  --teal:#1F6FEB;--teal-light:#E7F0FE;
  --orange:#FF7A1A;--orange-light:#FFF4EC;
  --cream:#F1F6FD;--dark:#10213A;
  --body:var(--font);--display:var(--font);
  max-width:780px;margin:0 auto;padding:24px 24px 72px;color:var(--text)
}
.article-wrap h2{font-weight:800;letter-spacing:-.02em}
.article-wrap h3{font-weight:700}
.article-wrap p{color:#3B4A60}
.article-wrap audio{width:100%}

/* End-of-article CTA */
.article-cta{margin-top:56px;background:var(--soft);border-radius:var(--r-lg);padding:40px 28px;text-align:center}
.article-cta h2{font-size:clamp(24px,3vw,32px)!important;margin:0 0 12px!important}
.article-cta p{max-width:560px;margin:0 auto 24px!important;color:var(--muted)!important;font-size:16.5px!important}

/* Article cards (hub, related, free resources) */
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-card .cat{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:10px}
.post-card h3{font-size:19px;margin-bottom:8px}
.post-card p{flex:1;font-size:15.5px}
.post-card .more{margin-top:16px;font-weight:700;font-size:15px;color:var(--text)}
.post-card .more::after{content:' →';color:var(--accent)}
.social-card{text-decoration:none;color:inherit;text-align:center;transition:transform .15s,box-shadow .15s}
.social-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* Books */
.feature-book{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;background:var(--soft);border-radius:var(--r-lg);padding:40px}
.fb-media{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.fb-media img{width:100%;height:auto}
.cta-compact .copy-like{background:var(--cta);color:#fff}
.cta-compact .copy-like:hover{background:var(--cta-dark)}

/* About */
.founder{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center;max-width:980px}
.founder-photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--soft);box-shadow:var(--shadow)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.founder p{color:var(--muted);margin-bottom:14px}
.num-badge{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:18px}

@media (max-width:860px){
  .feature-book,.founder{grid-template-columns:1fr;gap:28px;padding:24px}
  .founder{padding:0 24px}
  .founder-photo{max-width:260px;margin:0 auto}
  .article-head{padding:40px 0 24px}
}
.fb-cover{max-width:360px;margin:0 auto;box-shadow:none;background:transparent}
.fb-cover img{border-radius:10px;box-shadow:0 18px 40px rgba(16,33,58,.18)}
/* Book cards */
.book-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 4px 18px rgba(16,33,58,.05)}
.book-img{display:block;background:var(--soft);aspect-ratio:1/1;overflow:hidden}
.book-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.book-img:hover img{transform:scale(1.03)}
.book-body{padding:24px;display:flex;flex-direction:column;flex:1}
.book-body .tag{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:6px}
.book-body h3{font-size:21px}
.book-sub{font-weight:600;color:var(--text);margin-bottom:8px;font-size:16px}
.book-body .muted{font-size:15.5px;flex:1;margin-bottom:20px}
.book-body .btn{align-self:flex-start}
.social-logo{width:56px;height:56px;margin:0 auto 14px;border-radius:14px;object-fit:contain}
/* Home founder circle: zoom to the face */
.teacher-photo img{transform:scale(1.35);transform-origin:52% 12%}