/* VETURA — Warm Editorial layer. Loads AFTER vetura-home.css and restyles it: serif display,
   cream/tan/forest palette, thin rules, no glass, slower storytelling rhythm. */

/* ---------- type ---------- */
body{background:var(--stage);background-attachment:scroll;line-height:1.68}
h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.005em;line-height:1.08}
h1,.hero h1{font-family:var(--font-display)}
.h1-th,.pk-head h2,.ea h2,.qa>button,.reminder .rh,.hl-quote,.final h2{font-family:var(--font-thai-display)}
.sec h2,.band h2,.pk-head h2,.final h2,.ea h2,.tpanel h3,.fdetail h3{font-weight:500;letter-spacing:-.005em}
.sec h2,.band h2{font-size:clamp(30px,3.9vw,50px);line-height:1.3;margin-bottom:20px}
/* Thai needs room for stacked vowels/tone marks */
h1.thai-keep,h2.thai-keep,h3.thai-keep,h4.thai-keep,.pk-head h2,.ea h2,.final h2,.reminder .rh,.hl-quote,.qa>button,.tpanel h3,.fdetail h3{line-height:1.46}
.h1-th{line-height:1.6}
.sub,.note,.lgrid .li,.ilist .it,.qa .ans p{text-wrap:pretty}
.sec h2 .teal,.band h2 .teal{color:var(--accent-600)}
.sec h2 .lead,.band h2 .lead{color:var(--accent-600)}
.sub{font-size:16.5px;line-height:1.78;color:var(--ink-2);max-width:60ch}
.sub.sm{font-size:15px}
.note{font-size:13px;color:var(--neutral-600);letter-spacing:.005em}
.eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--accent-600);margin-bottom:22px}
.eyebrow::before{display:none}
.eyebrow{gap:0}
.mark,.hl-quote{font-weight:500}
.sec{padding:112px 0}
.sec.tight{padding:70px 0}
.sec-head{margin-bottom:56px}
.wrap{max-width:1240px;padding:0 40px}
@media(max-width:700px){.wrap{padding:0 22px}.sec{padding:76px 0}}

/* ---------- buttons: quiet pills ---------- */
.btn{font-size:13.5px;letter-spacing:.05em;font-weight:600;min-height:48px}
.btn-lead{background:var(--accent-500);color:#FFFCF6;padding:15px 30px;box-shadow:none;border-radius:var(--r-full)}
.btn-lead:hover{background:var(--accent-600);transform:none;box-shadow:0 8px 22px rgba(138,95,51,.22);color:#FFFCF6}
.btn-glass{background:transparent;color:var(--ink);border:1px solid rgba(34,38,30,.22);box-shadow:none;padding:14px 26px}
.btn-glass:hover{background:transparent;border-color:var(--accent-500);color:var(--accent-700);transform:none;box-shadow:none}
[data-theme="dark"] .btn-glass{color:var(--ink);border-color:rgba(255,255,255,.24)}
.btn-quiet{color:var(--ink-2);letter-spacing:.05em}
.btn-quiet:hover{background:transparent;color:var(--accent-700);text-decoration:underline;text-underline-offset:5px}
.tlink{color:var(--accent-700);letter-spacing:.06em;font-size:12.5px;text-transform:uppercase}
[data-theme="dark"] .tlink{color:var(--accent-200)}

/* ---------- announcement + header ---------- */
.announce{background:var(--primary-800);color:#EDEFE7}
.announce .in{padding:11px 28px;font-size:12.5px;letter-spacing:.02em}
.announce .dot{background:var(--accent-500);box-shadow:none}
.hdr{padding:0;position:sticky;background:rgba(251,248,242,.94);border-bottom:1px solid var(--line);backdrop-filter:none}
[data-theme="dark"] .hdr{background:rgba(22,36,28,.94)}
.hdr .bar{max-width:1240px;height:78px;padding:0 40px;background:transparent;border:none;border-radius:0;box-shadow:none}
.hdr.is-stuck{padding:0}
.hdr.is-stuck .bar{height:64px;box-shadow:none}
.brand{font-family:var(--font-thai-display);font-weight:600;font-size:23px;letter-spacing:.005em;text-transform:none;color:var(--ink)}
.brand svg{width:24px;height:24px}
.nav-links{gap:30px}
.nav-links a{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.nav-links a:hover{color:var(--accent-700)}
.icon-btn{border:1px solid rgba(34,38,30,.16);background:transparent;box-shadow:none}
.icon-btn:hover{transform:none;box-shadow:none;border-color:var(--accent-500);color:var(--accent-700)}
@media(max-width:700px){.hdr .bar{padding:0 22px;height:66px}}
.drawer .panel{background:var(--glass-solid);border-left:1px solid var(--line);box-shadow:var(--sh-lg)}
.drawer a.mlink{font-size:15px;letter-spacing:.06em}
.drawer a.mlink:hover{background:var(--glass-tint-teal);color:var(--primary-700)}

/* ---------- hero: editorial split with full-bleed photo ---------- */
.hero{padding:0 0 34px}
.hero-grid{grid-template-columns:1fr 1fr;gap:0;align-items:stretch;max-width:none;padding:0}
.hero-copy-col{display:flex;flex-direction:column;justify-content:center;padding:96px 64px 96px max(40px,calc((100vw - 1240px)/2 + 40px))}
.hero h1{font-size:clamp(42px,5.4vw,74px);font-weight:500;letter-spacing:-.015em;line-height:1.06;margin-bottom:18px}
.hero h1 em,.hero h1 .it{font-style:italic;color:var(--accent-600)}
.hero .h1-th{font-family:var(--font-thai-display);font-weight:500;font-size:clamp(19px,1.9vw,26px);color:var(--ink-2);line-height:1.5;margin-bottom:26px}
.hero .lead-p{font-size:16px;line-height:1.8;color:var(--ink-2);max-width:46ch;margin-bottom:26px}
.hint{background:transparent;border:none;border-left:2px solid var(--accent-500);border-radius:0;box-shadow:none;padding:6px 0 6px 22px;gap:0;max-width:44ch}
.hint .qi{display:none}
.hint b{font-family:var(--font-thai-display);font-size:19px;font-weight:500;line-height:1.5;margin-bottom:6px}
.hint span{font-size:13.5px;color:var(--ink-3)}
.hero-cta{gap:14px;margin:32px 0 26px}
.hero-meta{gap:10px 26px;font-size:12px;letter-spacing:.04em;color:var(--ink-3)}
.hero-meta i{color:var(--accent-500)}
.hero-visual{position:relative;min-height:620px;overflow:visible;border-bottom-left-radius:var(--r-4xl)}
.hero-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 42%;border-bottom-left-radius:var(--r-4xl)}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,38,30,.10),rgba(34,38,30,.28));border-bottom-left-radius:var(--r-4xl)}
.hero-badge-round{position:absolute;z-index:3;right:36px;top:36px;width:118px;height:118px;border-radius:50%;background:rgba(27,53,39,.86);color:#F1EFE6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;padding:12px}
.hero-mock{position:absolute;z-index:3;left:28px;bottom:38px;width:min(430px,84%)}
.hero-mock .ui-cols{grid-template-columns:1fr}
@media(min-width:1440px){.hero-mock{left:-64px}}
@media(max-width:1180px){.hero-mock{left:20px;width:min(380px,88%)}}
@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy-col{padding:64px 22px 48px;max-width:760px;margin:0 auto}
  .hero-visual{min-height:0;border-radius:0;overflow:visible}
  .hero-visual>img{position:relative;inset:auto;height:420px;border-bottom-left-radius:var(--r-4xl)}
  .hero-visual::after{height:420px;bottom:auto;border-bottom-left-radius:var(--r-4xl)}
  .hero-mock{position:relative;left:0;bottom:0;margin:-80px auto 0;width:min(460px,92%);z-index:4}
  .hero-badge-round{width:96px;height:96px;right:20px;top:20px;font-size:10px}
}
.stage .glow,.chipset{display:none}
.pipe{background:transparent;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:24px 0;justify-content:center;gap:10px}
.pipe .pl{letter-spacing:.2em;font-size:10.5px;color:var(--accent-600)}
.pipe .pi{background:transparent;border:none;font-size:12.5px;font-weight:500;letter-spacing:.03em;padding:4px 6px;color:var(--ink-2)}
.pipe .ar{color:var(--neutral-300)}

/* ---------- surfaces ---------- */
.card,.gcol,.bgroup,.stage-c,.qa,.builder,.aud .a,.factors .f,.enode,.tabbar,.fnode,.fdetail,.ea,.reminder,.phone,.modal .box,.scta{box-shadow:none}
.card{background:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r-lg)}
.ui{background:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--sh-md)}
.ui-top{background:var(--glass-soft);border-bottom:1px solid var(--line)}
.ui-top .tt{font-family:var(--font-sans);font-weight:600;font-size:12.5px;letter-spacing:.03em}
.v{font-family:var(--font-display);font-weight:500;font-size:27px}
.k{letter-spacing:.06em;text-transform:uppercase;font-size:10px;color:var(--ink-3)}
.tag{font-weight:600;letter-spacing:.04em;border-radius:var(--r-full);font-size:10px}
.t-teal{background:var(--primary-100);color:var(--primary-700)}
.t-jade{background:var(--jade-100);color:var(--jade-600)}
.t-coral{background:var(--accent-100);color:var(--accent-700)}
.t-flat{background:var(--glass-soft);color:var(--ink-2)}
.av,.av.lg{border-radius:50%}
.bars i{border-radius:2px;background:var(--primary-400)}
.bars i.hi{background:var(--accent-500)}
.track i{background:var(--primary-500)}
.chip{background:transparent;border:1px solid rgba(34,38,30,.16);color:var(--ink-2);font-size:12px;letter-spacing:.03em;padding:6px 13px}
.chip.co{background:transparent;border-color:rgba(166,119,63,.4);color:var(--accent-700)}
.chip.ja{background:transparent;border-color:rgba(74,107,78,.35);color:var(--jade-600)}
[data-theme="dark"] .chip{border-color:rgba(255,255,255,.18);color:var(--ink-2)}
.hl-quote{background:transparent;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:22px 0;font-family:var(--font-thai-display);font-size:20px;font-weight:500;color:var(--ink);line-height:1.6}
.ilist .it{padding:14px 0;font-size:14px}
.ilist .it .n{font-family:var(--font-sans);color:var(--accent-600);letter-spacing:.06em}
.lgrid .li{font-size:13.5px;letter-spacing:.02em}
.lgrid .li::before{background:var(--accent-500);width:4px;height:4px}

/* ---------- dark bands: forest ---------- */
.band{margin:0;border-radius:0;padding:120px 0}
.band-dark::before{background:var(--primary-900);box-shadow:none}
.band-dark .eyebrow{color:var(--accent-200)}
.band-dark h2,.band-dark h3{color:#F4F2E9}
.band-dark h2 .teal,.band-dark h2 .lead{color:var(--accent-200)}
.band-dark .sub{color:#C2C9BC}
.band-dark .note{color:#96A093}
.band-photo img{opacity:.7}
.band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(18,36,27,.88) 0%,rgba(18,36,27,.72) 34%,rgba(18,36,27,.28) 56%,transparent 70%)}
@media(max-width:980px){.band-photo::after{background:linear-gradient(180deg,rgba(18,36,27,.9),rgba(18,36,27,.8))}}
.band-dark .chip{border-color:rgba(255,255,255,.22);color:#D8DED0;background:transparent}
.band-dark .lgrid .li{color:#C2C9BC;border-color:rgba(255,255,255,.12)}
.band-dark .lgrid .li::before{background:var(--accent-500)}
@media(max-width:700px){.band{padding:80px 0}}

/* ---------- statements ---------- */
.statement .big{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,5.6vw,68px);line-height:1.12;letter-spacing:-.02em}
.statement .big em{font-style:italic;color:var(--accent-600)}
.statement .big em.lead{color:var(--accent-600)}
.band-dark .statement .big em,.band-dark .statement .big em.lead{color:var(--accent-200)}

/* ---------- workflow / tabs / groups ---------- */
.flow{gap:0;border-top:1px solid var(--line)}
.fnode{background:transparent;border:none;border-bottom:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;padding:20px 18px}
.fnode:hover{transform:none;background:var(--glass-soft)}
.fnode::after{display:none}
.fnode .st{font-family:var(--font-sans);color:var(--accent-600);letter-spacing:.1em}
.fnode .fn{font-family:var(--font-display);font-size:16px;font-weight:500}
.fnode[aria-selected="true"]{background:var(--glass-soft);border-color:var(--line);box-shadow:inset 2px 0 0 var(--accent-500)}
.fdetail{background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:38px 0 42px}
.fdetail h3{font-size:26px}
.fdetail .dta .dl{letter-spacing:.16em;font-size:10.5px;color:var(--accent-600)}
.tabbar{background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:26px;margin-bottom:48px}
.tabbar button{padding:14px 2px;border-radius:0;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;background:transparent;color:var(--ink-3)}
.tabbar button[aria-selected="true"]{background:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent-500)}
.band-dark .tabbar,.band-dark .tabbar button{background:transparent}
.band-dark .tabbar{border-bottom-color:rgba(255,255,255,.16)}
.band-dark .tabbar button{color:#93A093}
.band-dark .tabbar button[aria-selected="true"]{background:transparent;color:#F4F2E9;box-shadow:inset 0 -2px 0 var(--accent-500)}
.tpanel h3{font-size:clamp(25px,2.8vw,34px)}
.gcol{background:transparent;border:none;border-top:1px solid rgba(34,38,30,.2);border-radius:0;padding:22px 0 0}
.gcol .gh{border-bottom:none;padding-bottom:6px}
.gcol .gd{display:none}
.gcol .gn{font-family:var(--font-display);font-size:22px;font-weight:500}
.gcol .gt{font-family:var(--font-sans);font-size:10px;letter-spacing:.14em;color:var(--accent-600)}
.gcol li{border-top:none;padding:5px 0;font-size:13.5px}
.gcol li::before{background:var(--neutral-300)}
.aud .a{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:20px 0}
.aud .a:hover{transform:none}
.aud .a .aud-icon{border-radius:50%;background:var(--glass-tint-teal);color:var(--primary-700)}
.aud .a.pri{background:transparent;border-top-color:rgba(34,38,30,.24)}
.aud .a.pri .aud-icon{background:var(--primary-800);color:#F1EFE6}
.aud .a b{font-family:var(--font-display);font-size:17px;font-weight:500}

/* ---------- photos ---------- */
.photo-frame,.ea-photo{border:none;border-radius:var(--r-3xl);box-shadow:var(--sh-md)}
.photo-frame img,.ea-photo img{height:auto;aspect-ratio:4/3;object-fit:cover;width:100%}
.photo-frame .cap .tag{background:rgba(18,36,27,.72);color:#F1EFE6;letter-spacing:.08em}
.tl .tdot{border-radius:50%;border:none;background:var(--glass-tint-teal);color:var(--primary-700);font-family:var(--font-sans);font-size:10px}
.tl .tdot.co{background:var(--accent-100);color:var(--accent-700)}
.tl .tdot.ja{background:var(--jade-100);color:var(--jade-600)}
.tl b{font-family:var(--font-display);font-size:16.5px;font-weight:500}
.tl .te::before{background:var(--line)}
.phone{background:var(--glass-solid);border:1px solid var(--line);border-radius:34px}
.phone .phead{background:var(--primary-700)}

/* ---------- package builder ---------- */
.pk{padding:124px 0}
.pk-head h2{font-family:var(--font-thai-display);font-size:clamp(32px,4.8vw,60px);font-weight:500;letter-spacing:-.01em}
.builder{background:var(--glass-soft);border:1px solid var(--line);border-radius:var(--r-3xl);padding:40px}
@media(max-width:700px){.builder{padding:24px}.pk{padding:80px 0}}
.b-top .bt-l h3{font-size:26px;font-weight:500}
.types button{border-radius:var(--r-full);border:1px solid rgba(34,38,30,.2);background:transparent;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.types button:hover{transform:none;border-color:var(--accent-500);color:var(--accent-700)}
.types button[aria-pressed="true"]{background:var(--primary-800);border-color:var(--primary-800);color:#F1EFE6;box-shadow:none}
.bgroup{background:transparent;border:none;border-top:1px solid rgba(34,38,30,.2);border-radius:0;padding:20px 0 0}
.bgroup .bgh b{font-family:var(--font-display);font-size:18px;font-weight:500}
.bgroup .bgh .cnt{font-family:var(--font-sans);font-size:10px;letter-spacing:.1em;color:var(--accent-600)}
.bgroup .bgh .gd{display:none}
.mod{border-radius:var(--r-full);border:1px solid rgba(34,38,30,.16);background:transparent;font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
.mod:hover{transform:none;border-color:var(--accent-500)}
.mod::before{color:var(--accent-500)}
.mod[aria-pressed="true"]{background:var(--glass-tint-teal);border-color:rgba(47,86,65,.35);color:var(--primary-700)}
.mod[aria-pressed="true"]::before{color:var(--primary-600)}
.b-sum .sv{font-family:var(--font-display);font-size:38px;font-weight:500}
.b-sum .sl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.factors .f{background:transparent;border:1px solid rgba(34,38,30,.16);font-size:12.5px;letter-spacing:.03em}
.suggest-note{font-size:12.5px}
.stage-c{background:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 24px}
.stage-c.s1,.stage-c.s5{background:var(--glass-solid)}
.stage-c .sn{font-family:var(--font-sans);letter-spacing:.14em;color:var(--accent-600)}
.stage-c h3{font-family:var(--font-display);font-size:21px;font-weight:500}
.stage-c li::before{background:var(--accent-500)}
.stage-c::after{color:var(--neutral-300)}
.enode{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:26px 14px}
.enode .ei{border-radius:50%;background:var(--glass-tint-teal);color:var(--primary-700)}
.enode.key{background:transparent;border-top:1px solid var(--accent-500);box-shadow:none}
.enode.key .ei{background:var(--accent-500);color:#FFFCF6}
.enode b{font-family:var(--font-display);font-size:16px;font-weight:500}
.enode::after{color:var(--neutral-300)}
.rep-cats .rc h3{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--ink);letter-spacing:.01em;border-bottom-color:var(--line)}
.rep-cats .rc p{font-size:13px;color:var(--ink-3);letter-spacing:.02em}

/* ---------- early access / faq ---------- */
.ea{background:var(--glass-soft);border:1px solid var(--line);border-radius:var(--r-3xl);padding:56px}
@media(max-width:700px){.ea{padding:28px}}
.ea h2{font-family:var(--font-thai-display);font-size:clamp(28px,3.4vw,42px);font-weight:500}
.ea .bens .b{font-size:14px}
.ea .bens .b i{color:var(--accent-500)}
.qa{background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0}
.qa>button{font-family:var(--font-thai-display);font-size:18px;font-weight:500;padding:24px 4px}
.qa>button .pm{border-radius:50%;background:transparent;border:1px solid rgba(34,38,30,.2);color:var(--ink-2);font-weight:400}
.qa>button[aria-expanded="true"] .pm{background:var(--accent-500);border-color:var(--accent-500);color:#FFFCF6}
.qa .ans p{padding:0 4px 24px;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.faq{gap:0}

/* ---------- final CTA band (camel) ---------- */
.final{background:var(--accent-700);padding:120px 0;margin-top:0;color:#FFFCF6}
.final h2{color:#FFFCF6;font-family:var(--font-thai-display);font-size:clamp(28px,3.6vw,46px);font-weight:500;line-height:1.46}
.final h2 .teal{color:#FBF1E2}
.final .chain{color:#FBF3E8;font-size:14.5px;letter-spacing:.06em;gap:6px 20px}
.final .onv{font-family:var(--font-display);color:#F6E6CE;font-size:clamp(28px,3.4vw,42px);font-weight:500;font-style:italic;margin-bottom:36px}
.final .btn-lead{background:#FFFCF6;color:var(--accent-700)}
.final .btn-lead:hover{background:#fff;color:var(--accent-700);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.final .btn-glass{color:#FFFCF6;border-color:rgba(255,252,246,.75)}
.final .btn-glass:hover{color:#FFFCF6;border-color:#FFFCF6}
.reminder{background:transparent;border:1px solid var(--line);border-radius:var(--r-3xl);padding:44px 46px}
.reminder .rh{font-family:var(--font-thai-display);font-weight:500;font-size:clamp(22px,2.6vw,32px);line-height:1.46}
.reminder .rq{font-size:13.5px;color:var(--ink-3)}
@media(max-width:700px){.final{padding:80px 0}.reminder{padding:28px 24px}}

/* ---------- footer: forest ---------- */
footer{background:var(--primary-900);color:#C8CEC0;border-top:none;margin-top:0;padding:88px 0 44px}
footer .brand{color:#F7FAFA}
.f-brand .tagl{font-family:var(--font-display);font-style:italic;color:#D5DACB;font-size:17px}
.f-brand .dis{color:#8F9A8C}
.f-col h3{color:var(--accent-200);letter-spacing:.16em}
.f-col a{color:#BFC6B7;font-size:13px}
.f-col a:hover{color:#F4F2E9}
.f-bot{border-top-color:rgba(255,255,255,.12);color:#8F9A8C}

/* ---------- modals / sticky ---------- */
.modal .box{background:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r-3xl);box-shadow:var(--sh-lg)}
.modal h3{font-family:var(--font-display);font-size:30px;font-weight:500}
.field label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{border-radius:var(--r-sm);background:var(--glass-solid);border-color:rgba(34,38,30,.2);font-size:14px}
.opts label{border-radius:var(--r-full);border-color:rgba(34,38,30,.18);background:transparent;font-size:13px}
.opts label:has(input:checked){background:var(--glass-tint-teal);border-color:rgba(47,86,65,.4);color:var(--primary-700)}
.done .ok{background:var(--glass-tint-jade);color:var(--jade-600);border-radius:50%}
.mx{border-radius:50%;border:1px solid var(--line);background:transparent}
.scta{background:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r-full);box-shadow:var(--sh-md)}

/* ---------- softer motion ---------- */
.js-anim .reveal:not(.in){transform:translateY(14px)}
.js-anim .reveal.in{animation:reveal-up 1.1s var(--e-liquid) both}
@keyframes reveal-up{from{transform:translateY(14px)}to{transform:translateY(0)}}
.tpanel.on,.fpanel.on{animation:fade .5s var(--e-out) both}

/* ---------- Thai display leading (last word on line-height) ---------- */
h1.thai-keep,h2.thai-keep,h3.thai-keep,h4.thai-keep,.pk-head h2,.ea h2,.final h2,.reminder .rh,.hl-quote,.qa>button,.tpanel h3,.fdetail h3,.modal h3,.sec h2,.band h2{line-height:1.46}
.hero h1{line-height:1.06}
.h1-th{line-height:1.6}
.statement .big{line-height:1.12}

/* ---------- CI typography: Anuphan everywhere except H1 ---------- */
h2,h3,h4,h5,.statement .big,.v,.brand,.gcol .gn,.stage-c h3,.enode b,.tl b,.modal h3,.b-sum .sv,.bgroup .bgh b,.rep-cats .rc h3,.fnode .fn,.f-brand .tagl,.final .onv,.hl-quote,.qa>button,.ui-top .tt,.aud .a b,.b-top .bt-l h3,.fdetail h3,.tpanel h3,.ea h2,.pk-head h2,.final h2,.reminder .rh{font-family:var(--font-thai-display)}
h1,.hero h1,.statement .big{font-family:var(--font-display)}
h2,h3,h4{font-weight:500;font-synthesis:none}
.statement .big em,.statement .big em.lead{font-style:italic}
.final .onv,.f-brand .tagl{font-style:normal}
.statement .big{font-size:clamp(30px,4.8vw,60px);letter-spacing:-.02em;font-weight:500}
/* single line only for full-width section headings (split-column H2 must stay wrappable) */
.sec-head h2,.pk-head h2,.final h2{white-space:nowrap}
@media(max-width:820px){.sec-head h2,.pk-head h2,.final h2{white-space:normal}}
h2,.sec h2,.band h2,.pk-head h2,.ea h2,.final h2{font-size:clamp(19px,2.45vw,38px);letter-spacing:-.01em}
.h-anuphan .teal,.h-anuphan .lead,h2 .teal,h2 .lead{font-weight:500;font-size:inherit}
.h-anuphan,.sec h2.h-anuphan,.band h2.h-anuphan{font-family:var(--font-thai-display);letter-spacing:-.01em;font-weight:500;font-synthesis:none}
.one-line,.sec h2.one-line,.band h2.one-line{white-space:nowrap}
@media(max-width:820px){.one-line,.sec h2.one-line{white-space:normal}}

/* ---------- glassmorphism (selective: chrome, floating layers, interactive) ---------- */
.hdr{background:rgba(251,248,242,.66);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
[data-theme="dark"] .hdr{background:rgba(22,36,28,.66)}
.hdr.is-stuck{background:rgba(251,248,242,.82);box-shadow:0 8px 30px rgba(34,38,30,.06)}
[data-theme="dark"] .hdr.is-stuck{background:rgba(22,36,28,.82)}
.icon-btn,.btn-glass{background:rgba(255,255,255,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[data-theme="dark"] .icon-btn,[data-theme="dark"] .btn-glass{background:rgba(255,255,255,.07)}
.hero-mock .ui{background:rgba(255,253,248,.82);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 28px 70px rgba(34,38,30,.18)}
.hero-mock .card{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.hero-badge-round{background:rgba(27,53,39,.52);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.band-dark .ui{background:rgba(252,254,254,.84);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.28)}
.band-dark .on-dark-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fnode[aria-selected="true"]{background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 2px 0 0 var(--accent-500),inset 0 1px 0 rgba(255,255,255,.6)}
.builder{background:rgba(246,241,230,.62);border-color:rgba(255,255,255,.5);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 50px rgba(34,38,30,.06)}
[data-theme="dark"] .builder{background:rgba(30,47,36,.6);border-color:rgba(255,255,255,.1)}
.mod[aria-pressed="true"]{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ea{background:rgba(246,241,230,.58);border-color:rgba(255,255,255,.5);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 50px rgba(34,38,30,.06)}
[data-theme="dark"] .ea{background:rgba(30,47,36,.58);border-color:rgba(255,255,255,.1)}
.drawer .panel{background:rgba(251,248,242,.86);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
[data-theme="dark"] .drawer .panel{background:rgba(22,36,28,.88)}
.modal .veil{background:rgba(18,26,20,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal .box{background:rgba(255,253,248,.9);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 30px 80px rgba(34,38,30,.2)}
[data-theme="dark"] .modal .box{background:rgba(28,44,34,.92);border-color:rgba(255,255,255,.12)}
.scta{background:rgba(255,253,248,.78);border-color:rgba(255,255,255,.6);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 44px rgba(34,38,30,.14)}
[data-theme="dark"] .scta{background:rgba(28,44,34,.82)}
.photo-frame .cap .tag{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@supports not (backdrop-filter:blur(2px)){.hdr,.hero-mock .ui,.modal .box,.drawer .panel,.scta,.builder,.ea,.band-dark .ui{background:var(--glass-solid)}}

/* glass exceptions: camel band button keeps its own translucent fill; hero labels stay AA */
.final .btn-glass{background:rgba(255,252,246,.14);color:#FFFCF6;border-color:rgba(255,252,246,.8)}
.final .btn-glass:hover{background:rgba(255,252,246,.24);color:#FFFCF6;border-color:#FFFCF6}
.hero-mock .ui{background:rgba(255,253,248,.9)}
.hero-mock .k,.hero-mock .path,.hero-mock .mt{color:var(--neutral-700)}

/* ---------- developers / API section ---------- */
.sec-lead-th{font-family:var(--font-thai-display);font-size:clamp(19px,2vw,24px);font-weight:600;color:var(--primary-800);line-height:1.36;margin:6px 0 14px}
[data-theme="dark"] .sec-lead-th{color:var(--primary-200)}
.edge.edge-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.edge.edge-3{grid-template-columns:1fr}}
.eplist{display:grid;gap:8px;margin-top:20px}
.ep{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-lg);background:var(--glass-soft);border:var(--rim-subtle)}
.ep code{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);word-break:break-all}
.ep .epn{margin-left:auto;font-size:12px;color:var(--ink-3)}
@media(max-width:520px){.ep .epn{margin-left:0;flex-basis:100%}}

/* ---------- consent + form error + honeypot ---------- */
[hidden]{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{margin-top:4px}
.consent label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;color:var(--ink-2);line-height:1.55;cursor:pointer}
.consent input{accent-color:var(--primary-700);width:17px;height:17px;margin-top:2px}
.consent a{color:var(--primary-700);text-decoration:underline}
.ferr{font-size:12.5px;color:var(--error);margin-top:8px}
.form-err{display:grid;gap:4px;padding:14px 16px;border-radius:var(--r-lg);background:var(--error-bg);border:1px solid rgba(193,39,45,.28)}
.form-err b{font-family:var(--font-thai-display);font-size:15px;color:var(--error)}
.form-err span{font-size:13px;color:var(--ink-2)}
.form-err a{color:var(--error);text-decoration:underline}
.req-id{margin-top:14px;padding:12px 16px;border-radius:var(--r-md);background:var(--glass-tint-teal);font-size:14px;color:var(--primary-800);display:inline-block}
.req-id b{font-size:15px;letter-spacing:.04em}
.f-legal{display:flex;gap:18px;flex-wrap:wrap}
.f-legal a{color:inherit;text-decoration:none}
.f-legal a:hover{color:#F0EDE2}
footer a:not(.brand){color:#BFC6B7}
footer a:not(.brand):hover{color:#F0EDE2}

/* ---------- legal pages (privacy / terms) ---------- */
.legal{padding:40px 0 70px}
.legal-head{max-width:760px;margin-bottom:44px}
.legal-head h1{font-family:var(--font-thai-display);font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.16;margin-bottom:16px}
.legal-head .sub{margin-bottom:12px}
.legal-body{max-width:760px}
.legal-body h2{font-family:var(--font-thai-display);font-size:clamp(19px,2.2vw,23px);font-weight:600;line-height:1.35;margin:38px 0 12px;padding-top:24px;border-top:1px solid var(--line)}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:none}
.legal-body h3{font-family:var(--font-thai-display);font-size:16.5px;font-weight:600;margin:22px 0 8px;color:var(--primary-800)}
.legal-body p{font-size:15.5px;color:var(--ink-2);line-height:1.8;margin-bottom:12px;text-wrap:pretty}
.legal-body ul{list-style:none;display:grid;gap:8px;margin:8px 0 16px}
.legal-body li{font-size:15.5px;color:var(--ink-2);line-height:1.7;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline}
.legal-body li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--primary-500);transform:translateY(-3px)}
.legal-body a{color:var(--primary-700);text-decoration:underline}
.legal-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);max-width:760px}
[data-theme="dark"] .legal-body h3{color:var(--primary-200)}

/* ---------- dropdown nav ---------- */
.navgroup{position:relative}
.navtop{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--ink-2);padding:8px 2px;min-height:40px}
.navtop svg{width:11px;height:11px;transition:transform .22s var(--e-out)}
.navtop:hover,.navgroup:hover .navtop,.navtop[aria-expanded="true"]{color:var(--primary-700)}
.navtop[aria-expanded="true"] svg{transform:rotate(180deg)}
.navmenu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:300px;display:grid;gap:2px;padding:10px;border-radius:var(--r-xl);background:rgba(255,253,248,.94);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 20px 50px rgba(34,38,30,.14);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--e-out),transform .2s var(--e-out),visibility .2s}
.navmenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.navgroup:hover .navmenu,.navgroup:focus-within .navmenu,.navtop[aria-expanded="true"]+.navmenu{opacity:1;visibility:visible;transform:translateY(0)}
[data-theme="dark"] .navmenu{background:rgba(28,44,34,.95);border-color:rgba(255,255,255,.12)}
.navmenu a{display:grid;gap:2px;padding:11px 14px;border-radius:var(--r-md);text-decoration:none}
.navmenu a:hover{background:var(--glass-tint-teal)}
.navmenu a b{font-family:var(--font-thai-display);font-size:14.5px;font-weight:600;color:var(--ink)}
.navmenu a span{font-size:12px;color:var(--ink-3);line-height:1.4}
.navmenu a:hover b{color:var(--primary-700)}
.drawer .mgroup{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:16px 12px 6px}

/* ---------- inner page hero + in-page nav ---------- */
.page-hero{padding:56px 0 24px}
.ph-copy{max-width:820px}
.page-hero h1{font-family:var(--font-thai-display);font-size:clamp(32px,4.4vw,54px);font-weight:600;letter-spacing:-.022em;line-height:1.14;margin-bottom:18px}
.page-hero h1 em{font-style:normal;color:var(--accent-600)}
.page-hero .sub{max-width:680px}
.pagenav{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.pagenav a{font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 15px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--glass-soft)}
.pagenav a:hover{color:var(--primary-700);border-color:rgba(14,124,134,.4);background:var(--glass-tint-teal)}

/* ---------- module directory ---------- */
.zone{margin-bottom:52px}
.zone-h{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.zone-h .zn{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--accent-600)}
.zone-h h3{font-family:var(--font-thai-display);font-size:clamp(19px,2.2vw,24px);font-weight:600;letter-spacing:-.01em}
.zone-h .zc{margin-left:auto;font-size:12px;color:var(--ink-3);font-family:var(--font-mono);white-space:nowrap}
.zone-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:860px){.zone-list{grid-template-columns:1fr}}
.zm{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.zm b{font-family:var(--font-thai-display);font-size:15.5px;font-weight:600;color:var(--ink)}
.zm span{font-size:13.5px;color:var(--ink-2);line-height:1.65}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--glass-soft)}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp thead th{position:sticky;top:0;background:var(--glass-solid);font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp thead th:first-child{text-align:left}
.cmp tbody th{text-align:left;padding:13px 16px;font-family:var(--font-thai-display);font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);display:grid;gap:2px}
.cmp tbody th .zt{font-family:var(--font-sans);font-size:11px;font-weight:400;color:var(--ink-3)}
.cmp tbody td{text-align:center;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:var(--glass-tint-teal)}
.cmp .on{color:var(--jade-600);font-size:13px}
.cmp .off{color:var(--neutral-400)}

/* ---------- api docs ---------- */
.apilist{display:grid;gap:16px}
.apidoc{padding:22px 24px;border-radius:var(--r-xl);background:var(--glass-soft);border:1px solid var(--line)}
.apihead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.apihead code{font-family:var(--font-mono);font-size:13.5px;color:var(--ink);word-break:break-all}
.codeblk{margin-top:14px;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(34,38,30,.12);background:var(--primary-900)}
.codeblk .cl{display:block;padding:8px 14px;font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9FBFA8;background:rgba(0,0,0,.24)}
.codeblk pre{margin:0;padding:14px 16px;overflow-x:auto}
.codeblk code{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:#E9F1E6;white-space:pre}
.edge.edge-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.edge.edge-4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.edge.edge-4{grid-template-columns:1fr}}
.secgroup h3{font-family:var(--font-thai-display);font-size:15px;font-weight:600;color:var(--primary-800);margin-bottom:10px}
.band-dark .secgroup h3{color:var(--accent-200)}

/* --- responsive hardening -------------------------------------------------
   Nothing may extend the page horizontally. Grid and flex children default to
   min-width:auto, which stops them shrinking below their content's min-content
   width; long code samples, endpoint paths and unbroken Thai runs then push the
   page sideways on narrow screens. These rules only remove that floor so the
   existing scroll containers can do their job. No visual change above the
   breakpoints already defined. */
.wrap>*,.wrap-n>*,.split>*,.apilist>*,.apidoc>*,.card>*{min-width:0}
.apidoc,.apihead,.codeblk,.lgrid,.chips,.ilist,.eplist,.builder,.suggest-note{min-width:0;max-width:100%}
.codeblk pre{overflow-x:auto;max-width:100%}
.apihead code,.ep code{overflow-wrap:anywhere;word-break:break-word}

/* Phones: the header CTA wrapped onto 2-3 lines and grew to 84px inside the
   66px bar, bulging out of it. The same action is in the drawer and in the
   sticky bottom CTA, so drop it from the bar at the width where the burger
   menu already owns navigation. */
@media(max-width:520px){
  .hdr-right .btn-lead{display:none}
}
@media(max-width:360px){
  .hdr .bar{gap:10px;padding:0 8px 0 12px}
}

/* .split.even (0,2,0) outranked the `@media(max-width:980px){.split{...}}`
   rule (0,1,0), so even splits stayed two-up all the way down to 320px and
   squeezed their content. Collapse them with the other splits. */
@media(max-width:980px){.split.even{grid-template-columns:1fr}}

/* code badges in .ilist: the column was a fixed 20px, which fits "01" but
   clipped the module codes (IPD, RAD, AMB). minmax keeps the numeric lists
   pixel-identical and lets the codes size to their content. */
.ilist .it{grid-template-columns:minmax(20px,max-content) 1fr}

/* the footer column heading was an h5, which is not covered by the
   h1,h2,h3,h4 line-height rule. Promoting it to h3 for heading order
   shrank its line box from body's 1.68 (20.16px) to 1.08 (12.96px) and pulled the footer up by
   ~7px per heading row. Restore the original line box exactly. */
.f-col h3{line-height:inherit}

/* the ≤820px relaxation of the one-line rule covered `.sec h2.one-line` but not
   `.band h2.one-line` (0,2,1), so headings inside the dark bands kept
   white-space:nowrap at every width and were cut off on phones. */
@media(max-width:820px){.band h2.one-line,.band h2{white-space:normal}}

/* long unbroken words in the flow/stage cards were clipped by the card edge */
.stage-c li,.stage-c h3,.enode b,.enode span,.aud .a b{overflow-wrap:anywhere}

/* --- mobile QA corrections -----------------------------------------------
   Shared rules, so each fix applies to every page that uses the component.
   No desktop change: all of this only engages when space actually runs out. */

/* The suggested-configuration note is a flex row. With no wrapping and no
   shrink floor on its children the label was cut off by the builder panel at
   320px. Let it wrap and let the text shrink. */
.suggest-note{flex-wrap:wrap}
.suggest-note>*{min-width:0}

/* Sticky CTA: keep it clear of the iPhone home indicator and of the landscape
   notch gutters. env() resolves to 0 where there is no inset, so devices
   without safe areas render exactly as before. */
.scta{
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  left:calc(12px + env(safe-area-inset-left, 0px));
  right:calc(12px + env(safe-area-inset-right, 0px));
}
/* the copy column must be allowed to shrink and wrap rather than push the
   button and close control out of the bar */
.scta .st{min-width:0;overflow-wrap:anywhere}
.scta .btn{flex-shrink:0}

/* Mobile drawer honours the same landscape gutters. */
@media(max-width:900px){
  .drawer .panel{padding-right:calc(22px + env(safe-area-inset-right, 0px))}
}

/* Sticky CTA on narrow phones: the button and close control were taking so
   much of the bar that the Thai copy collapsed into a four-line block. Tighten
   the gutters and the button padding so the copy column gets the width back.
   Same colours, same pill shape, same type — only the space allocation moves. */
@media(max-width:430px){
  .scta{gap:8px;padding:10px 8px 10px 14px}
  .scta .btn{padding:12px 14px;letter-spacing:.03em}
  .scta .x{width:28px;height:28px}
}

/* ============================================================================
   Presentation appointment modal — v4
   All new selectors. Nothing here matches an element that existed before this
   release, so no page keeps its previous appearance by accident: the only
   visual change is the new CTA and the new modal.
   ========================================================================== */

/* the appointment CTA sits on the dark closing band, where .btn-quiet's
   default ink colour would be unreadable — match the band's glass button */
.final .btn-quiet{color:#FFFCF6}
.final .btn-quiet:hover{color:#FFFCF6;background:rgba(255,252,246,.14);text-decoration:underline;text-underline-offset:5px}

.appt-slots{display:grid;gap:12px}
.appt-lead{display:grid;gap:3px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.appt-lead span{font-size:12px;font-weight:400;color:var(--ink-3);line-height:1.55}
.appt-slot{display:grid;gap:10px;padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--glass-soft)}
.appt-slot[hidden]{display:none}
.appt-slot-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.appt-n{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);min-width:0}
.appt-rm,.appt-add{font-family:var(--font-sans);background:transparent;border:none;cursor:pointer;padding:0;text-align:left}
.appt-rm{font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;flex-shrink:0}
.appt-rm:hover{color:var(--accent-700)}
.appt-add{font-size:13.5px;font-weight:600;color:var(--primary-700);justify-self:start;min-height:44px}
.appt-add:hover{text-decoration:underline;text-underline-offset:4px}
.appt-add[hidden]{display:none}
.appt-onsite{display:grid;gap:14px}
.appt-onsite[hidden]{display:none}
/* iOS renders a bare date input at its own intrinsic width; force it to the
   field box so a slot row cannot outgrow the modal on a narrow phone */
.field input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
@media(max-width:520px){
  .appt-slot{padding:12px}
  .appt-slot-h{flex-wrap:wrap}
}

/* The branch name is the identity of a .row; the metric beside it is
   secondary. As flex items both had min-width:auto, so on a 320px screen the
   name was the one that collapsed — "รัชดา" was squeezed to 21.6px and broke
   across two lines mid-word. Let the name keep its intrinsic width and give
   the secondary metric permission to shrink instead. Above 768px nothing
   shrinks at all, so this changes no desktop rendering. */
.row .nm{flex:0 0 auto}
.row .mt{min-width:0}

/* ============================================================================
   Cookie consent — v4.2
   Its own selectors, deliberately not the .modal system: the consent panel
   must not be openable or closable by the site's modal machinery, and closing
   it must never be read as a decision.
   ========================================================================== */

/* Stacking, against the site's existing scale: announce 210, header 200,
   sticky CTA 300, drawer 400, modal 500.
   The bar sits above the sticky CTA but below the drawer and modals, so
   opening a modal never fights it. The preferences dialog is above everything:
   the visitor opened it deliberately, and it must not end up underneath the
   sticky header. */
.cbar{
  position:fixed;left:0;right:0;bottom:0;z-index:320;
  display:flex;align-items:center;gap:20px;
  padding:16px calc(24px + env(safe-area-inset-right,0px))
          calc(16px + env(safe-area-inset-bottom,0px))
          calc(24px + env(safe-area-inset-left,0px));
  background:var(--glass-solid);border-top:1px solid var(--line);
  box-shadow:0 -18px 50px rgba(34,38,30,.10);
}
.cbar-copy{min-width:0;flex:1 1 auto}
.cbar-title{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 4px}
.cbar-text{font-size:12.5px;line-height:1.65;color:var(--ink-2);margin:0;overflow-wrap:anywhere}
.cbar-link{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--primary-700);
  text-decoration:underline;text-underline-offset:3px}
.cbar-acts{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
/* Necessary-only and Accept are the same size and weight. Neither is styled
   to look unavailable, and neither is buried in the settings panel. */
.cbar-acts .btn{white-space:nowrap}
body.consent-pending .scta{display:none!important}

@media(max-width:820px){
  .cbar{flex-direction:column;align-items:stretch;gap:14px;padding-top:14px}
  .cbar-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cbar-acts .btn:nth-child(2){grid-column:1/-1;order:3}
  .cbar-acts .btn{width:100%;min-width:0;white-space:normal}
}
@media(max-width:400px){
  .cbar{padding-left:calc(16px + env(safe-area-inset-left,0px));
        padding-right:calc(16px + env(safe-area-inset-right,0px))}
  .cbar-acts{grid-template-columns:1fr}
  .cbar-acts .btn:nth-child(2){order:0}
}

.cprefs{position:fixed;inset:0;z-index:520;display:flex;align-items:center;justify-content:center}
.cprefs-veil{position:absolute;inset:0;background:rgba(34,38,30,.45);backdrop-filter:blur(3px)}
.cprefs-box{
  position:relative;z-index:2;width:min(560px,94vw);max-height:90vh;overflow-y:auto;
  margin:auto;padding:28px 28px 24px;border-radius:var(--r-2xl);
  background:var(--glass-solid);border:1px solid var(--line);box-shadow:var(--sh-lg);
}
.cprefs-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;font-size:15px}
.cprefs-x:hover{color:var(--ink);background:var(--glass-tint-teal)}
.cprefs-box h3{margin:0 0 8px;font-size:19px}
.cprefs-intro{font-size:13px;line-height:1.7;color:var(--ink-2);margin:0 0 18px}
.cprefs-row{padding:14px 0;border-top:1px solid var(--line)}
.cprefs-row-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.cprefs-cat{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0}
.cprefs-cat h4{margin:0;font-size:14px;font-weight:600;color:var(--ink);line-height:inherit}
.cprefs-always{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--primary-700);flex-shrink:0}
.cprefs-desc{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin:6px 0 0}
.cprefs-acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.cprefs-acts .btn{flex:1 1 auto;min-width:0}
.cprefs-foot{margin-top:14px;font-size:12px}
.cprefs-foot a{color:var(--primary-700);text-decoration:underline;text-underline-offset:3px}

/* the analytics switch: a real checkbox, kept operable by keyboard */
.cswitch{display:flex;align-items:center;gap:12px;width:100%;min-width:0;cursor:pointer}
.cswitch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.cswitch-t{position:relative;flex-shrink:0;width:44px;height:26px;border-radius:999px;
  background:rgba(34,38,30,.18);transition:background .18s}
.cswitch-t::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(34,38,30,.3);transition:transform .18s}
.cswitch input:checked + .cswitch-t{background:var(--primary-700)}
.cswitch input:checked + .cswitch-t::after{transform:translateX(18px)}
.cswitch input:focus-visible + .cswitch-t{outline:2px solid var(--primary-600);outline-offset:3px}
.cswitch-l{font-size:14px;font-weight:600;color:var(--ink);min-width:0}

@media(max-width:520px){
  .cprefs-box{padding:24px 18px 20px;border-radius:var(--r-xl);max-height:94vh}
  .cprefs-acts{display:grid;grid-template-columns:1fr;gap:8px}
  .cprefs-acts .btn{width:100%}
}

/* the footer control that reopens the panel, styled as the sibling links are */
.f-legal button.f-cookie{font-family:var(--font-sans);background:none;border:none;padding:0;
  cursor:pointer;font-size:inherit;color:inherit;letter-spacing:inherit}
.f-legal button.f-cookie:hover{color:var(--primary-700);text-decoration:underline}

/* Cookie inventory table. Scrolls inside its own container on a narrow phone
   rather than widening the page. */
.ctable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 18px;
  border:1px solid var(--line);border-radius:var(--r-md)}
.ctable{width:100%;min-width:560px;border-collapse:collapse;font-size:13px}
.ctable th,.ctable td{padding:10px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.6}
.ctable thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;background:var(--glass-soft)}
.ctable tbody tr:last-child td{border-bottom:none}
.ctable td.mono{white-space:nowrap}