/* ============================================================
   Mitr SoftFlow — Product landing page (DRAFT v0.1, template)
   โครง + copy + configurator + layout/CSS · รูปเป็น placeholder (AI ตัวสร้างจริงใส่ภาพ)
   Layout: single-column, mobile-first; dark navy/ink hero+trust bands,
   light teacher sections between; red strictly for CTA.
   ============================================================ */

:root{
  /* ---- palette (light) ---- */
  --bg:#F3F6FA;            /* page surface, cool off-white w/ navy bias */
  --surface:#FFFFFF;       /* cards */
  --surface-2:#E9EFF6;     /* tinted blocks */
  --fg:#0E2235;            /* deep navy ink text */
  --fg-muted:#51667C;      /* secondary text */
  --hairline:#D4DFEA;      /* borders on light */
  --band:#0B2E4F;          /* dark navy band (hero/trust/CTA) */
  --band-ink:#0C1620;      /* near-black band (pain/footer) */
  --on-dark:#EAF2F9;       /* text on dark bands */
  --on-dark-muted:#9FB6C9; /* secondary on dark */
  --hairline-dark:#1C3850; /* borders on dark bands */
  --cyan:#00B4D8;          /* water / accent */
  --cyan-ink:#0A7FA0;      /* cyan dark enough for text on light */
  --cyan-soft:#D8F1F8;     /* cyan tint bg */
  --red:#E63946;           /* CTA only */
  --red-ink:#C42230;       /* CTA hover */
  --ok:#1FA97A;            /* semantic good */
  --warn:#E0922F;          /* semantic warning (flags) */

  --font-thai:'Anuphan',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-tech:'Manrope','Anuphan',-apple-system,BlinkMacSystemFont,sans-serif;

  --maxw:1120px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(11,46,79,.06),0 8px 28px rgba(11,46,79,.08);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#081019;
    --surface:#111F2C;
    --surface-2:#0D1A26;
    --fg:#E6EFF6;
    --fg-muted:#9DB2C4;
    --hairline:#223749;
    --band:#0C3357;
    --band-ink:#060D15;
    --on-dark:#EAF2F9;
    --on-dark-muted:#9FB6C9;
    --hairline-dark:#20405B;
    --cyan:#30C6E6;
    --cyan-ink:#58D2ED;
    --cyan-soft:#0E2E3A;
    --red:#F4606C;
    --red-ink:#F4606C;
    --ok:#3FD29E;
    --warn:#F0A94E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#081019;
  --surface:#111F2C;
  --surface-2:#0D1A26;
  --fg:#E6EFF6;
  --fg-muted:#9DB2C4;
  --hairline:#223749;
  --band:#0C3357;
  --band-ink:#060D15;
  --on-dark:#EAF2F9;
  --on-dark-muted:#9FB6C9;
  --hairline-dark:#20405B;
  --cyan:#30C6E6;
  --cyan-ink:#58D2ED;
  --cyan-soft:#0E2E3A;
  --red:#F4606C;
  --red-ink:#F4606C;
  --ok:#3FD29E;
  --warn:#F0A94E;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-thai);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* paint the top safe-area strip so nothing scrolls under host controls */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}

img{max-width:100%;display:block}
a{color:var(--cyan-ink);text-underline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.2;color:var(--fg)}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));}
.wrap-narrow{max-width:780px}

.section{padding-block:clamp(52px,8.5vw,96px)}
.section.band{background:var(--band);color:var(--on-dark);border-top:1px solid var(--hairline-dark)}
.section.band h1,.section.band h2,.section.band h3{color:var(--on-dark)}
.section.ink{background:var(--band-ink);color:var(--on-dark);border-top:1px solid var(--hairline-dark)}
.section.ink h2,.section.ink h3{color:var(--on-dark)}
.section.tint{background:var(--surface-2)}

/* ---------- shared bits ---------- */
.eyebrow{font-family:var(--font-tech);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-ink);display:inline-flex;align-items:center;gap:.5em;margin-bottom:14px}
.band .eyebrow,.ink .eyebrow{color:var(--cyan)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;opacity:.7}

.h2{font-family:var(--font-thai);font-weight:700;font-size:clamp(1.5rem,4.2vw,2.3rem);letter-spacing:-.01em}
.lead{color:var(--fg-muted);font-size:clamp(1.02rem,2.4vw,1.18rem);max-width:60ch}
.band .lead,.ink .lead{color:var(--on-dark-muted)}

.mono{font-family:var(--font-tech);font-variant-numeric:tabular-nums}

/* buttons */
.btn{font-family:var(--font-thai);font-weight:700;font-size:1.02rem;border:0;border-radius:999px;
  padding:15px 26px;display:inline-flex;align-items:center;justify-content:center;gap:.55em;cursor:pointer;
  text-decoration:none;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;line-height:1.1}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(230,57,70,.32)}
.btn-red:hover{background:var(--red-ink)}
.btn-line{background:#06C755;color:#fff}
.btn-line:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;color:var(--on-dark);border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-outline{background:transparent;color:var(--cyan-ink);border:1.5px solid var(--cyan-ink)}
.btn-outline:hover{background:var(--cyan-soft)}
.btn svg{width:1.15em;height:1.15em;flex:none}

/* bilingual text toggling: show TH by default, EN when html.lang-en */
.t-en{display:none}
html.lang-en .t-th{display:none}
html.lang-en .t-en{display:inline}

/* placeholder image box (for AI that adds real images) */
.ph{border:1.5px dashed var(--cyan-ink);border-radius:var(--radius-sm);background:
   repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(0,180,216,.05) 11px,rgba(0,180,216,.05) 22px);
   color:var(--cyan-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
   text-align:center;padding:20px;font-size:.9rem;min-height:170px}
.ph b{font-family:var(--font-tech);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
   background:var(--cyan-ink);color:var(--bg);padding:3px 9px;border-radius:999px}
.ph span{max-width:36ch;color:var(--fg-muted);line-height:1.45}
.band .ph,.ink .ph{border-color:var(--cyan);color:var(--cyan)}
.band .ph span,.ink .ph span{color:var(--on-dark-muted)}
.band .ph b,.ink .ph b{background:var(--cyan);color:var(--band)}

/* ============ HEADER ============ */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);
  border-bottom:1px solid var(--hairline)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding-block:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--band),var(--cyan));
  display:grid;place-items:center;color:#fff;flex:none}
.logo .mark svg{width:20px;height:20px}
.logo b{font-family:var(--font-tech);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;line-height:1}
.logo small{display:block;font-size:.66rem;color:var(--fg-muted);letter-spacing:.04em;margin-top:2px;font-family:var(--font-thai)}
.hdr-right{display:flex;align-items:center;gap:10px}
.hdr-phone{display:none;font-family:var(--font-tech);font-weight:700;color:var(--fg);text-decoration:none;
  align-items:center;gap:7px;font-size:.98rem}
.hdr-phone svg{width:17px;height:17px;color:var(--cyan-ink)}
.hdr .btn{padding:10px 18px;font-size:.95rem}
.langtog{display:inline-flex;border:1px solid var(--hairline);border-radius:999px;overflow:hidden;font-family:var(--font-tech);font-weight:700;font-size:.8rem}
.langtog button{border:0;background:transparent;color:var(--fg-muted);padding:7px 12px;cursor:pointer;line-height:1}
.langtog button.on{background:var(--band);color:#fff}
@media(min-width:620px){.hdr-phone{display:inline-flex}}

/* ============ HERO (S1) ============ */
.hero .wrap{display:grid;gap:40px;grid-template-columns:1fr}
.hero-copy{max-width:640px}
.hero h1{font-family:var(--font-thai);font-weight:700;font-size:clamp(2rem,6vw,3.35rem);letter-spacing:-.015em;margin-bottom:0}
.hero h1 .en-line{display:block;font-family:var(--font-tech);font-weight:600;font-style:italic;
  color:var(--cyan);font-size:clamp(1rem,2.8vw,1.4rem);letter-spacing:0;margin-top:12px}
html.lang-en .hero h1 .th-line{font-size:clamp(1.05rem,2.8vw,1.35rem);font-weight:600;color:var(--on-dark-muted);display:block;margin-bottom:10px;order:-1}
html.lang-en .hero h1 .en-line{font-style:normal;color:var(--on-dark);font-family:var(--font-tech);font-weight:800;
  font-size:clamp(1.9rem,5.6vw,3.1rem);margin-top:0}
.hero .sub{margin-top:22px;font-size:clamp(1.04rem,2.5vw,1.22rem);color:var(--on-dark-muted);max-width:56ch;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:34px;padding-top:26px;border-top:1px solid var(--hairline-dark)}
.trust-item{display:flex;align-items:center;gap:9px;color:var(--on-dark);font-size:.94rem}
.trust-item svg{width:19px;height:19px;color:var(--cyan);flex:none}
.hero-media .ph{min-height:260px;background:
   repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(255,255,255,.04) 11px,rgba(255,255,255,.04) 22px)}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:1.15fr .85fr;align-items:center}
}

/* ============ PAIN (S2) ============ */
.pain h2{font-size:clamp(1.65rem,4.6vw,2.5rem);font-weight:700;max-width:18ch}
.pain h2 em{font-style:normal;color:var(--red);white-space:nowrap}
.pain-agitate{margin-top:22px;display:grid;gap:16px;max-width:62ch}
.pain-agitate p{color:#D6E2EC;font-size:clamp(1.02rem,2.4vw,1.16rem)}
.pain-agitate p strong{color:#fff;font-weight:600}
.pain-grid{display:grid;gap:18px;margin-top:40px;grid-template-columns:1fr}
.pain-card{background:rgba(255,255,255,.04);border:1px solid var(--hairline-dark);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.pain-card .ph{border:0;border-radius:0;border-bottom:1px solid var(--hairline-dark);min-height:160px;
  background:repeating-linear-gradient(135deg,rgba(230,57,70,.06),rgba(230,57,70,.06) 11px,transparent 11px,transparent 22px)}
.pain-card .pc-body{padding:20px}
.pain-card h3{font-size:1.14rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:9px;margin-bottom:8px}
.pain-card h3 .dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
.pain-card p{color:var(--on-dark-muted);font-size:.97rem}
.pain-note{margin-top:22px;font-size:.84rem;color:var(--on-dark-muted);opacity:.8}
.pain-stat{margin-top:34px;background:rgba(255,255,255,.045);border:1px solid var(--hairline-dark);
  border-left:3px solid var(--cyan);border-radius:var(--radius);padding:20px 22px;display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
.pain-stat .ps-num{display:flex;align-items:baseline;gap:6px;flex:none}
.pain-stat .ps-num b{font-weight:800;font-size:clamp(2.2rem,7vw,2.8rem);color:var(--cyan);line-height:1}
.pain-stat .ps-num span{font-weight:700;color:var(--on-dark-muted);font-size:1rem;font-family:var(--font-tech)}
.pain-stat .ps-txt{color:var(--on-dark);font-size:1rem;flex:1;min-width:220px;line-height:1.55}
.pain-stat .ps-txt b{color:#fff;font-weight:600}
.pain-stat .ps-gap{width:100%;border-top:1px dashed var(--hairline-dark);padding-top:13px;color:var(--cyan);
  font-weight:700;font-size:.95rem;font-family:var(--font-tech);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
@media(min-width:760px){.pain-grid{grid-template-columns:repeat(3,1fr)}}

/* ============ MECHANISM (S3) ============ */
.mech .intro{max-width:64ch}
.mech-steps{margin-top:14px;display:grid;gap:18px;max-width:64ch}
.mech-steps p{color:var(--fg);font-size:1.06rem}
.mech-steps p strong{color:var(--cyan-ink);font-weight:600}
.diagram-wrap{margin-top:40px;display:grid;gap:26px;grid-template-columns:1fr}
.diagram{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:22px 20px 18px;box-shadow:var(--shadow)}
.diagram h3{font-size:1.02rem;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.diagram h3 .n{font-family:var(--font-tech);font-weight:800;color:var(--cyan-ink);font-size:.95rem;
  border:1.5px solid var(--cyan-ink);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.diagram p.cap{color:var(--fg-muted);font-size:.9rem;margin:2px 0 14px}
.diagram svg{width:100%;height:auto;display:block}
.truth{margin-top:34px;display:flex;gap:14px;align-items:flex-start;background:var(--cyan-soft);
  border:1px solid var(--cyan-ink);border-radius:var(--radius);padding:18px 20px}
.truth svg{width:24px;height:24px;color:var(--cyan-ink);flex:none;margin-top:2px}
.truth p{font-size:1rem;color:var(--fg)}
.truth strong{color:var(--cyan-ink)}
.mech-cta{margin-top:30px}
@media(min-width:820px){.diagram-wrap{grid-template-columns:1fr 1fr}}

/* svg diagram tokens */
.d-stroke{stroke:var(--fg);fill:none;stroke-width:2}
.d-tank{fill:var(--surface-2);stroke:var(--fg);stroke-width:2.4}
.d-water{fill:var(--cyan);opacity:.85}
.d-water-soft{fill:var(--cyan);opacity:.35}
.d-txt{fill:var(--fg);font-family:var(--font-thai);font-size:13px;font-weight:600}
.d-txt-sm{fill:var(--fg-muted);font-family:var(--font-thai);font-size:11.5px}
.d-ca{fill:var(--red)}
.d-na{fill:var(--ok)}
.d-bead{fill:var(--band);opacity:.9}
.d-arrow{stroke:var(--cyan-ink);stroke-width:2.2;fill:none;marker-end:url(#ah)}
.d-label-ca{fill:#fff;font-family:var(--font-tech);font-size:10px;font-weight:800}

/* ============ DIFFERENTIATORS (S4) ============ */
.diff-grid{display:grid;gap:18px;margin-top:40px;grid-template-columns:1fr}
.diff-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow)}
.diff-card .ic{width:50px;height:50px;border-radius:13px;background:var(--cyan-soft);color:var(--cyan-ink);
  display:grid;place-items:center;margin-bottom:16px}
.diff-card .ic svg{width:26px;height:26px}
.diff-card h3{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.diff-card .h3-en{font-family:var(--font-tech);font-weight:600;color:var(--fg-muted);font-size:.82rem;
  letter-spacing:.02em;margin-bottom:10px}
.diff-card p{color:var(--fg-muted);font-size:.99rem}
@media(min-width:820px){.diff-grid{grid-template-columns:repeat(3,1fr)}}

/* ============ S3.5 · SYSTEM COMPONENTS ============ */
.comp-3d .ph{min-height:clamp(220px,42vw,340px)}
.comp-grid{display:grid;gap:14px;margin-top:28px;grid-template-columns:1fr}
.comp-item{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:15px 16px}
.comp-item .ci{width:42px;height:42px;border-radius:11px;background:var(--cyan-soft);color:var(--cyan-ink);display:grid;place-items:center;flex:none}
.comp-item .ci svg{width:22px;height:22px}
.comp-item b{display:block;font-weight:700;font-size:1rem;margin-bottom:2px}
.comp-item p{color:var(--fg-muted);font-size:.92rem;line-height:1.5}
.comp-note{margin-top:20px;font-size:.84rem;color:var(--fg-muted);opacity:.85}
@media(min-width:640px){.comp-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.comp-grid{grid-template-columns:1fr 1fr 1fr}}

/* ============ S4.5 · BY INDUSTRY ============ */
.ind-grid{display:grid;gap:18px;margin-top:40px;grid-template-columns:1fr}
.ind-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.ind-card .ph{border:0;border-radius:0;border-bottom:1px solid var(--hairline);min-height:118px}
.ind-card .ic-body{padding:18px 18px 20px}
.ind-card h3{font-size:1.1rem;font-weight:700;margin-bottom:12px}
.ind-row{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;line-height:1.45;margin-top:9px}
.ind-row svg{width:17px;height:17px;flex:none;margin-top:2px}
.ind-row.pain svg{color:var(--warn)}
.ind-row.fix svg{color:var(--ok)}
.ind-row p{min-width:0;flex:1}
.ind-row.pain p{color:var(--fg-muted)}
.ind-row.fix p{color:var(--fg)}
@media(min-width:620px){.ind-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.ind-grid{grid-template-columns:1fr 1fr 1fr}}

/* ============ TRUST (S5) ============ */
.trust-proj{display:grid;gap:18px;margin-top:38px;grid-template-columns:1fr}
.proj-card{background:rgba(255,255,255,.04);border:1px solid var(--hairline-dark);border-radius:var(--radius);overflow:hidden}
.proj-card .ph{border:0;border-radius:0;min-height:150px}
.proj-card .pc{padding:16px 18px}
.proj-card .pc b{display:block;color:#fff;font-weight:700;font-size:1rem;margin-bottom:3px}
.proj-card .pc span{color:var(--on-dark-muted);font-size:.88rem}
.trust-meta{display:grid;gap:14px;margin-top:34px;grid-template-columns:1fr;border-top:1px solid var(--hairline-dark);padding-top:30px}
.tm-item{display:flex;gap:12px;align-items:flex-start}
.tm-item svg{width:24px;height:24px;color:var(--cyan);flex:none;margin-top:2px}
.tm-item b{display:block;color:#fff;font-weight:700;font-size:1.02rem}
.tm-item span{color:var(--on-dark-muted);font-size:.9rem}
@media(min-width:760px){.trust-proj{grid-template-columns:repeat(3,1fr)}.trust-meta{grid-template-columns:repeat(3,1fr)}}

/* ============ CONFIGURATOR (S6) ============ */
.cfg-head{max-width:60ch}
.cfg{margin-top:38px;display:grid;gap:22px;grid-template-columns:1fr}
.cfg-form{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow)}
.q{margin-bottom:26px}
.q:last-child{margin-bottom:0}
.q-label{font-weight:700;font-size:1.06rem;margin-bottom:4px;display:flex;align-items:baseline;gap:9px}
.q-label .qn{font-family:var(--font-tech);font-weight:800;color:var(--cyan-ink);font-size:.9rem;flex:none}
.q-hint{color:var(--fg-muted);font-size:.9rem;margin-bottom:14px}
.opts{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.opts.three{grid-template-columns:repeat(2,1fr)}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{display:flex;align-items:center;gap:10px;border:1.5px solid var(--hairline);border-radius:var(--radius-sm);
  padding:13px 14px;cursor:pointer;font-size:.97rem;line-height:1.3;transition:border-color .12s,background .12s;height:100%}
.opt label .oi{width:22px;height:22px;color:var(--fg-muted);flex:none}
.opt input:checked+label{border-color:var(--cyan-ink);background:var(--cyan-soft);font-weight:600}
.opt input:checked+label .oi{color:var(--cyan-ink)}
.opt input:focus-visible+label{outline:2px solid var(--cyan-ink);outline-offset:2px}
.subq{margin-top:14px}
.subq .sql{font-size:.92rem;color:var(--fg-muted);font-weight:600;margin-bottom:9px}

/* result */
.cfg-result{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius);padding:4px;align-self:start}
.cfg-result-inner{padding:22px 20px}
.res-tag{font-family:var(--font-tech);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.res-head{font-size:1.28rem;font-weight:700;line-height:1.25;margin-bottom:6px}
.res-flow{font-family:var(--font-tech);font-variant-numeric:tabular-nums;color:var(--cyan-ink);font-weight:700;font-size:.98rem;margin-bottom:12px}
.res-desc{color:var(--fg-muted);font-size:.97rem;margin-bottom:16px}
.flags{display:grid;gap:10px}
.flag{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--warn);border-radius:var(--radius-sm);padding:12px 13px}
.flag.info{border-left-color:var(--cyan-ink)}
.flag.redirect{border-left-color:var(--red)}
.flag svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--warn)}
.flag.info svg{color:var(--cyan-ink)}
.flag.redirect svg{color:var(--red)}
.flag b{display:block;font-weight:700;font-size:.94rem;margin-bottom:2px}
.flag p{color:var(--fg-muted);font-size:.88rem;line-height:1.5}
.flag a{font-weight:700}
.res-close{margin-top:16px;padding-top:14px;border-top:1px dashed var(--hairline);font-size:.9rem;color:var(--fg-muted);display:flex;gap:9px;align-items:flex-start}
.res-close svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:2px}

/* lead capture */
.lead-fields{margin-top:22px;border-top:1px solid var(--hairline);padding-top:22px}
.lead-fields .lf-title{font-weight:700;font-size:1.04rem;margin-bottom:4px}
.lead-fields .lf-sub{color:var(--fg-muted);font-size:.9rem;margin-bottom:16px}
.fgrid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.86rem;font-weight:600;color:var(--fg)}
.field label .req{color:var(--red)}
.field input{font-family:var(--font-thai);font-size:1rem;padding:12px 14px;border:1.5px solid var(--hairline);
  border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);width:100%}
.field input:focus{outline:2px solid var(--cyan-ink);outline-offset:1px;border-color:var(--cyan-ink)}
.field .err{font-size:.8rem;color:var(--red);display:none}
.field.invalid .err{display:block}
.field.invalid input{border-color:var(--red)}
.price-line{margin-top:16px;font-size:.92rem;color:var(--fg-muted);display:flex;align-items:center;gap:8px}
.price-line .tag{font-family:var(--font-tech);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--surface-2);color:var(--fg-muted);padding:3px 9px;border-radius:999px;border:1px dashed var(--hairline)}
.submit-row{margin-top:20px;display:grid;gap:10px}
.submit-row .btn{width:100%}
.submit-note{font-size:.8rem;color:var(--fg-muted);text-align:center}
.pdpa{font-size:.78rem;color:var(--fg-muted);margin-top:4px;line-height:1.5}

/* thank-you state */
.ty{display:none;text-align:center;padding:20px 8px}
.ty.show{display:block}
.cfg-form.done .cfg-live{display:none}
.ty .tick{width:68px;height:68px;border-radius:50%;background:var(--cyan-soft);color:var(--ok);display:grid;place-items:center;margin:0 auto 18px}
.ty .tick svg{width:36px;height:36px}
.ty h3{font-size:1.4rem;font-weight:700;margin-bottom:10px}
.ty p{color:var(--fg-muted);max-width:44ch;margin:0 auto 10px}
.ty .ty-summary{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:14px 16px;text-align:left;margin:18px auto;max-width:420px;font-size:.92rem}
.ty .ty-summary div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.ty .ty-summary div span:first-child{color:var(--fg-muted)}
.ty .ty-summary div span:last-child{font-weight:600;text-align:right}
.ty .ty-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
@media(min-width:900px){.cfg{grid-template-columns:1.05fr .95fr;align-items:start}}

/* ============ FINAL CTA + FAQ (S7) ============ */
.final h2{font-size:clamp(1.6rem,4.4vw,2.4rem);font-weight:700;max-width:20ch}
.final .lead{margin-top:14px}
.final-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.faq{margin-top:12px}
.faq .wrap{max-width:820px}
.faq h2{margin-bottom:28px}
.acc{border-top:1px solid var(--hairline)}
.acc details{border-bottom:1px solid var(--hairline)}
.acc summary{list-style:none;cursor:pointer;padding:20px 2px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-weight:700;font-size:1.08rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{width:26px;height:26px;flex:none;position:relative}
.acc summary .pm::before,.acc summary .pm::after{content:"";position:absolute;background:var(--cyan-ink);
  border-radius:2px;transition:transform .2s}
.acc summary .pm::before{top:12px;left:4px;right:4px;height:2.5px}
.acc summary .pm::after{left:12px;top:4px;bottom:4px;width:2.5px}
.acc details[open] summary .pm::after{transform:rotate(90deg);opacity:0}
.acc .acc-body{padding:0 2px 22px;color:var(--fg-muted);font-size:1rem;max-width:68ch}
.acc .acc-body strong{color:var(--fg);font-weight:600}

/* ============ FOOTER ============ */
.ft{background:var(--band-ink);color:var(--on-dark-muted);padding-block:48px 40px;border-top:1px solid var(--hairline-dark)}
.ft .wrap{display:grid;gap:28px;grid-template-columns:1fr}
.ft .logo b{color:#fff}
.ft .logo small{color:var(--on-dark-muted)}
.ft-col h4{color:#fff;font-size:.82rem;font-family:var(--font-tech);letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px;font-weight:700}
.ft-col a,.ft-col p{color:var(--on-dark-muted);text-decoration:none;font-size:.94rem;display:block;margin-bottom:8px;line-height:1.5}
.ft-col a:hover{color:#fff}
.ft-b2c{background:rgba(255,255,255,.04);border:1px solid var(--hairline-dark);border-radius:var(--radius-sm);
  padding:14px 16px;font-size:.9rem}
.ft-b2c b{color:#fff}
.ft-b2c a{color:var(--cyan)}
.ft-bottom{border-top:1px solid var(--hairline-dark);margin-top:8px;padding-top:22px;font-size:.82rem;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
.ft-bottom a{color:var(--on-dark-muted)}
@media(min-width:760px){.ft .wrap{grid-template-columns:1.4fr 1fr 1fr}}

/* ============ floating LINE (always visible, mobile-first) ============ */
.fab{position:fixed;z-index:55;right:max(16px,env(safe-area-inset-right,0px));
  bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab .btn{box-shadow:0 10px 30px rgba(0,0,0,.28);padding:14px 20px}
.fab .fab-line{background:#06C755;color:#fff}
.fab .fab-mini{display:none}

/* toast (shows when LINE OA url is still TBD in preview) */
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(8px);
  background:var(--band-ink);color:var(--on-dark);border:1px solid var(--hairline-dark);padding:12px 18px;border-radius:999px;
  font-size:.92rem;font-weight:600;box-shadow:0 12px 34px rgba(0,0,0,.35);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:70;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* privacy modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(6,13,21,.6);display:none;align-items:flex-end;justify-content:center;padding:0}
.modal.show{display:flex}
.modal-card{background:var(--surface);color:var(--fg);width:100%;max-width:640px;max-height:86vh;overflow:auto;
  border-radius:18px 18px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px))}
.modal-card h3{font-size:1.3rem;margin-bottom:4px}
.modal-card .sub{color:var(--fg-muted);font-size:.9rem;margin-bottom:18px}
.modal-card h4{font-size:1rem;margin:18px 0 6px}
.modal-card p{color:var(--fg-muted);font-size:.95rem;margin-bottom:10px}
.modal-close{float:right;border:0;background:var(--surface-2);color:var(--fg);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;line-height:1}
@media(min-width:640px){.modal{align-items:center;padding:20px}.modal-card{border-radius:18px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}