/* ============================================================
   ลำพูน AI Tech — ระบบดีไซน์
   สี: หมึกกรมท่า + ฟ้าเดียวเป็นสีสั่งการ · ไม่มีไล่เฉด ไม่มีเงาฟุ้ง
   จังหวะ: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56 / 88
   ตัวอักษร: Sarabun อย่างเดียว 400 / 600 / 700 / 800
   ============================================================ */
:root{
  /* หน้าเป็นดีไซน์สีอ่อนเสมอ บังคับ light ไว้ ไม่งั้นเบราว์เซอร์ที่ตั้ง dark mode
     จะวาดคอนโทรลของฟอร์ม เช่น ลิสต์ของ <select> เป็นพื้นดำ ตัดกับหน้าเว็บ */
  color-scheme: light;
  --ground:#fbf7f0;
  --band:#f3ebdd;
  --ink:#2b2018;
  --ink-2:#544537;
  --muted:#7c6b59;
  --line:#e5dac7;
  --line-2:#cdbca2;
  --accent:#8a4a24;
  --accent-ink:#6b3717;
  --accent-soft:#f1e5d3;
  --gold:#c08d33;
  --temple:#c2aa84;
  --dark:#241a12;
  --r-sm:6px;
  --r-md:10px;
  --sh-1:0 1px 2px rgba(58,38,20,.06);
  --sh-2:0 2px 4px rgba(58,38,20,.05), 0 14px 30px rgba(58,38,20,.09);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Sarabun","Leelawadee UI","Noto Sans Thai",sans-serif;
  font-size:16.5px;line-height:1.8;font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0;
  caret-color:var(--accent);
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink)}
::selection{background:#ecd9b4;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--band)}
::-webkit-scrollbar-thumb{background:#cdbca2;border:3px solid var(--band);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#b3a184}
svg{width:24px;height:24px;flex:none}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section-tight{padding:64px 0}
.section-wide{padding:112px 0}
.band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;font-weight:700;z-index:60}
.skip:focus{left:16px;top:16px}

/* ---------- ตัวอักษร ---------- */
.h-display{font-size:44px;line-height:1.28;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.h-page{font-size:34px;line-height:1.32;font-weight:800;letter-spacing:-.012em;text-wrap:balance}
.h-section{font-size:28px;line-height:1.36;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.h-card{font-size:18px;line-height:1.5;font-weight:700}
.lede{font-size:18px;line-height:1.78;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.body-sm{font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.meta{font-size:14.5px;line-height:1.65;color:var(--muted)}
.fine{font-size:13.5px;line-height:1.6;color:var(--muted)}

.section-head{max-width:62ch}
.section-head .h-section + p{margin-top:12px;color:var(--ink-2)}
.section-head.center{margin:0 auto;text-align:center}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--r-sm);border:1px solid transparent;
  font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.btn svg{width:20px;height:20px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink);color:#fff}
.btn-secondary{background:var(--ground);border-color:var(--line-2);color:var(--ink)}
.btn-secondary:hover{border-color:#b09a7c;background:var(--band);color:var(--ink)}
.btn-onink{background:#fff;color:var(--ink)}
.btn-onink:hover{background:#efe4d2;color:var(--ink)}
.btn-sm{height:40px;padding:0 16px;font-size:15px}
.btn[aria-disabled="true"]{background:#e7ddcb;color:#a4947f;border-color:transparent;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;font-weight:700;color:var(--accent)}
.link-arrow svg{width:18px;height:18px}
.link-arrow:hover{color:var(--accent-ink)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:38px;height:38px;border-radius:50%;border:1px solid var(--line)}
.brand b{font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--ink);display:block;line-height:1.25;white-space:nowrap}
.brand span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.head-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.head-nav a{padding:8px 12px;border-radius:var(--r-sm);font-size:15.5px;font-weight:600;color:var(--ink-2)}
.head-nav a:hover{color:var(--ink);background:var(--band)}
.head-nav a[aria-current]{color:var(--ink);font-weight:700}
.head-nav a[aria-current]::after{content:"";display:block;height:2px;background:var(--accent);
  margin:6px -2px -10px;border-radius:2px}
.head-cta{margin-left:8px}

/* ---------- hero ---------- */
.hero{padding:76px 0 132px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,720px);gap:40px}
.hero .h-display{max-width:17ch}
.hero .lede{margin-top:18px}
.hero .btn-row{margin-top:28px}
.assure{margin-top:24px;display:grid;gap:9px}
.assure li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.assure svg{width:17px;height:17px;color:var(--accent);margin-top:4px}
.media{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--ground);box-shadow:var(--sh-2)}
.media img{width:100%;height:auto;aspect-ratio:900 / 636}
.media figcaption{display:flex;align-items:flex-start;gap:9px;padding:12px 16px;line-height:1.6;
  border-top:1px solid var(--line);background:var(--band);font-size:13.5px;color:var(--muted)}
.media figcaption svg{width:16px;height:16px;color:var(--accent);margin-top:3px}

/* ---------- แถบจุดเด่น 4 ช่อง ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pillars li{padding:0 28px;border-left:1px solid var(--line)}
.pillars li:first-child{border-left:0;padding-left:0}
.pillars li:last-child{padding-right:0}
.pillars svg{width:22px;height:22px;color:var(--accent)}
.pillars h3{margin-top:14px;font-size:16.5px;font-weight:700}
.pillars p{margin-top:6px;font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ---------- รายการปัญหา ---------- */
.checklist{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.checklist svg{width:20px;height:20px;color:var(--accent);margin-top:5px}
.checklist span{font-size:16.5px;line-height:1.65}

/* ---------- การ์ดบริการ ---------- */
.grid-3{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-2{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.card .icon{width:42px;height:42px;border-radius:8px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center}
.card .icon svg{width:22px;height:22px}
.card h3{margin-top:18px;font-size:18px;font-weight:700}
.card>p{margin-top:8px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.card ul{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px}
.card li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--ink-2)}
.card li svg{width:16px;height:16px;color:var(--accent);margin-top:4px}

/* ---------- ขั้นตอน ---------- */
.steps{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.step .num{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;background:var(--ground);
  font-size:15px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.step h3{margin-top:16px;font-size:17.5px;font-weight:700}
.step p{margin-top:8px;font-size:15px;line-height:1.72;color:var(--ink-2)}
.steps::before{content:"";position:absolute;left:34px;right:34px;top:17px;height:1px;background:var(--line);z-index:0}
.step{position:relative;z-index:1}

/* ---------- เครื่องมือฟรี ---------- */
.tools{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center;margin-top:36px}
.tool-copy h3{font-size:21px;font-weight:800;line-height:1.4}
.tool-copy>p{margin-top:10px;color:var(--ink-2)}
.tool-copy ul{margin-top:18px;display:grid;gap:9px}
.tool-copy li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.tool-copy li svg{width:17px;height:17px;color:var(--accent);margin-top:5px}
.tool-copy .btn-row{margin-top:24px}
.note-line{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* ---------- คำถามที่พบบ่อย ---------- */
.faq{max-width:800px;margin:36px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px 2px;font-size:17.5px;font-weight:700;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--muted);margin-left:auto;transition:transform .18s ease}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details>p{padding:0 40px 22px 2px;font-size:16px;line-height:1.85;color:var(--ink-2)}

/* ---------- แถบชวนคุย ---------- */
.cta{background:var(--dark);color:#fdf8ef;padding:76px 0 200px;position:relative;overflow:hidden}
.cta .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta h2{font-size:28px;font-weight:800;line-height:1.4;letter-spacing:-.01em;max-width:24ch;text-wrap:balance}
.cta p{margin-top:14px;font-size:16.5px;line-height:1.8;color:#cbb69a;max-width:52ch}
.cta .btn-row{margin-top:28px}
.cta .fine{margin-top:18px;color:#a08c72}

/* ---------- ตัวเลขผลงาน · ช่องทางติดต่อ · ช่วงราคา · เคส ---------- */
.proof{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 34px}
.proof div{display:grid;gap:2px}
.proof b{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.proof span{font-size:13px;line-height:1.5;color:var(--muted)}
.chan{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.chan a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink)}
.chan a:hover{color:var(--accent)}
.chan svg{width:18px;height:18px;color:var(--accent)}
.cta .chan{justify-content:center}
.cta .chan a{color:#fdf8ef}
.cta .chan svg{color:#e3b877}
.aside-card .chan{display:grid;gap:9px;margin-top:14px}
.tiers{margin:2px 2px 22px;display:grid;gap:10px;max-width:600px}
.tiers li{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:baseline;
  padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--band)}
.tiers strong{font-size:15px;font-weight:700}
.tiers b{font-size:15.5px;font-weight:800;color:var(--accent);white-space:nowrap}
.tiers em{font-style:normal;flex:1 0 100%;font-size:13.5px;line-height:1.6;color:var(--muted)}

.todo{font-size:12.5px;line-height:1.6;color:var(--muted)}
.faq details>p.todo{font-size:12.5px;line-height:1.6;color:var(--muted)}
.cta .todo{color:#a08c72}

.svc-grid{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card-lead h3{font-size:21px}
.svc-lean{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.svc-lean li{display:flex;gap:16px;align-items:flex-start;padding:22px;background:var(--ground);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.svc-lean .icon{flex:none;width:38px;height:38px;border-radius:8px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center}
.svc-lean .icon svg{width:20px;height:20px}
.svc-lean h3{font-size:16.5px;font-weight:700}
.svc-lean p{margin-top:6px;font-size:14.5px;line-height:1.7;color:var(--muted)}
@media (max-width:900px){.svc-grid,.svc-lean{grid-template-columns:1fr}}
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,247,240,.95);
  border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(43,32,24,.08)}
.mobile-cta .btn{flex:1}
.notfound .fine{margin-top:18px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:56px 0 0;background:var(--ground)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:40px}
.foot-brand p{margin-top:14px;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:38ch}
.foot-col h4{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
.foot-col ul{margin-top:14px;display:grid;gap:9px}
.foot-col a,.foot-col span{font-size:15px;color:var(--ink-2)}
.foot-col a:hover{color:var(--accent)}
.foot-bar{margin-top:48px;border-top:1px solid var(--line);padding:20px 0 40px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.foot-bar a{color:var(--muted)}
.foot-bar a:hover{color:var(--accent)}

/* ---------- หน้าใน ---------- */
.page-head{padding:44px 0 40px;border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--line-2)}
.page-head .h-page{margin-top:14px}
.page-head .lede{margin-top:12px}
.page-body{padding:56px 0 88px}
.page-body .wrap{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:64px;align-items:start}
.prose{max-width:70ch}
.prose h2{font-size:21px;font-weight:800;line-height:1.45;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose p{margin-top:12px;color:var(--ink-2);line-height:1.85;text-wrap:pretty}
.prose ul{margin-top:14px;display:grid;gap:9px}
.prose ul li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2)}
.prose ul li svg{width:17px;height:17px;color:var(--accent);margin-top:6px}
.aside-card{position:sticky;top:92px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--band);padding:24px}
.aside-card h3{font-size:17px;font-weight:800;line-height:1.5}
.aside-card p{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.aside-card .btn{margin-top:18px;width:100%}
.aside-card .fine{margin-top:12px}
.page-body.single .wrap{grid-template-columns:minmax(0,1fr);max-width:860px}

/* ---------- 404 ---------- */
.notfound{padding:112px 0 128px;text-align:center}
.notfound .code{font-size:14px;font-weight:800;letter-spacing:.16em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.notfound h1{margin-top:12px;font-size:34px;font-weight:800;letter-spacing:-.012em}
.notfound p{margin:14px auto 0;max-width:46ch;color:var(--ink-2)}
.notfound .btn-row{margin-top:28px;justify-content:center}

/* ---------- แผ่นระบบดีไซน์ ---------- */
.spec{padding:48px 0 64px}
.spec-block{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.spec-block:first-of-type{margin-top:28px}
.spec-block h2{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.swatches{margin-top:20px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.swatch .chip{height:64px;border-radius:8px;border:1px solid rgba(43,32,24,.12)}
.swatch b{display:block;margin-top:10px;font-size:14px;font-weight:700}
.swatch code{display:block;font-size:12.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.type-rows{margin-top:20px;display:grid;gap:0}
.type-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.type-row code{font-size:12.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.state-grid{margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.state-grid .cell{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.state-grid code{font-size:12.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.icon-row{margin-top:20px;display:flex;flex-wrap:wrap;gap:20px}
.icon-row .cell{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink)}
.icon-row code{font-size:11.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rhythm{margin-top:20px;display:flex;align-items:flex-end;gap:12px}
.rhythm .bar{background:var(--accent-soft);border:1px solid #ddc9a8;border-radius:4px;width:44px;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  font-size:11.5px;color:var(--accent-ink);font-weight:700}

/* ---------- ลายเส้นเมืองเก่า ---------- */
.temple{position:absolute;pointer-events:none;line-height:0;overflow:hidden}
.temple svg{width:100%;height:100%;display:block}
.temple path,.temple circle{fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.temple-band{left:0;right:0;bottom:0;height:230px}
.temple-solo{inset:0;display:flex;align-items:flex-end;justify-content:center}
.hero{position:relative;overflow:hidden}
.hero .temple-band{color:var(--temple)}
.hero .wrap{position:relative;z-index:1}
.cta .temple-band{color:var(--gold);opacity:.38;height:190px}
.cta .wrap{position:relative;z-index:1}
.notfound{position:relative;overflow:hidden}
.notfound .temple-solo{color:var(--line-2);opacity:.9;top:auto;height:210px;bottom:0}
.notfound .wrap{position:relative;z-index:1}
@media (max-width:720px){
  .temple-band{height:160px}
}

/* ---------- ลายดาว + : ภาพเคลื่อนไหวเบา ๆ ----------
   ดาวหุบเข้าเป็นจุดแล้วหายไป ค่อยบานกลับมา ไม่พร้อมกันทุกดวง
   ปิดเองเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว */
.stars path{stroke-width:1.7}
.hero .stars{color:#b0925f}
.cta .stars{color:var(--gold);opacity:.62;height:200px}
@media (prefers-reduced-motion:no-preference){
  .stars g{animation:starIn .9s cubic-bezier(.16,1,.3,1) both}
  .stars g:nth-child(3){animation-delay:.1s}
  .stars g:nth-child(5n+4){animation-delay:.2s}
  .stars g:nth-child(5n+5){animation-delay:.3s}
  .stars g:nth-child(5n+6){animation-delay:.4s}
  .stars g:nth-child(5n+7){animation-delay:.5s}
  .stars g path{transform-box:fill-box;transform-origin:center;
    animation:starTwinkle 7s ease-in-out 1s infinite}
  .stars g:nth-child(3n) path{animation-duration:9.5s;animation-delay:2.2s}
  .stars g:nth-child(4n) path{animation-duration:12s;animation-delay:3.4s}
  .stars g:nth-child(7n) path{animation-duration:6s;animation-delay:4.6s}
  .stars g:nth-child(5n+2) path{animation-duration:8.5s;animation-delay:1.4s}
}
@keyframes starIn{from{opacity:0}to{opacity:1}}
@keyframes starTwinkle{0%,100%{opacity:1;transform:scale(1)}
  38%{opacity:.06;transform:scale(.2)}
  56%{opacity:.06;transform:scale(.2)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
  .pillars li:nth-child(3){border-left:0;padding-left:0}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools{grid-template-columns:1fr;gap:32px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .steps::before{display:none}
  .page-body .wrap{grid-template-columns:1fr;gap:40px}
  .aside-card{position:static}
}
@media (max-width:720px){
  body{font-size:16px}
  .section{padding:56px 0}
  .hero{padding:44px 0 108px}
  .h-display{font-size:32px}
  .h-page{font-size:27px}
  .h-section{font-size:23px}
  .lede{font-size:17px}
  .head-nav{display:none}
  .grid-3,.grid-2,.checklist,.pillars,.steps{grid-template-columns:1fr}
  .pillars li{border-left:0;padding:0}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .cta{padding:52px 0 150px}
  .site-head .brand>span>span{display:none}
  .btn-row{width:100%;flex-direction:column}
  .btn-row .btn{width:100%}
  .swatches,.state-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ---------- prototype: เมนูที่กดได้ + การเปลี่ยนหน้า ---------- */
.head-nav a.is-active{color:var(--ink);font-weight:700}
.head-nav a.is-active::after{content:"";display:block;height:2px;background:var(--accent);
  margin:6px -2px -10px;border-radius:2px}
.menu-btn{display:none;appearance:none;background:none;cursor:pointer;color:var(--ink);
  width:44px;height:44px;margin-left:auto;border:1px solid var(--line-2);border-radius:var(--r-sm);
  align-items:center;justify-content:center}
.menu-btn:hover{border-color:#b09a7c;background:var(--band)}
.menu-panel{border-top:1px solid var(--line);background:var(--ground);padding:10px 0 16px}
/* หัวเว็บใช้ .wrap เป็น flex แถวเดียว — แผงเมนูต้องถอยกลับเป็นบล็อกปกติ */
.site-head .menu-panel .wrap{display:block;min-height:0;gap:0}
.menu-panel ul{display:grid;gap:2px}
.menu-panel li a{display:block;padding:12px 10px;border-radius:var(--r-sm);
  font-size:16px;font-weight:600;color:var(--ink-2)}
.menu-panel li a:hover{background:var(--band);color:var(--ink)}
.menu-panel .btn{margin-top:10px;width:100%}
.link-btn{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--accent)}
/* หน้าเว็บเต็มความสูงกรอบเสมอ — หน้าที่สั้นกว่ากรอบจะไม่ทิ้ง footer ลอยกลางอากาศ */
.app{display:flex;flex-direction:column;min-height:100vh}
.screen{display:block;flex:1 0 auto}
.app .site-foot{margin-top:auto}
@media (prefers-reduced-motion:no-preference){
  .screen{animation:screenIn .3s cubic-bezier(.16,1,.3,1) both}
  @keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (max-width:720px){
  .menu-btn{display:inline-flex}
}
@media (max-width:520px){
  .site-head .head-cta{display:none}
  .mobile-cta{display:flex}
  .foot-bar{padding-bottom:110px}
  .hero .btn-row{display:grid}
  .hero .btn-row .btn-secondary{background:none;border:0;height:auto;padding:4px 0;color:var(--accent);
    text-decoration:underline;text-underline-offset:4px;box-shadow:none}
}