/* Tina Digitalbiz : add.v3.css (ต.ค. 2569)
   ไฟล์เสริม: style.css เดิมไม่ถูกแตะ · ใช้ token/คลาสเดิมทั้งหมด
   1) พื้นหลังเบลอขยับ (จอแรก + ปิดท้าย)  2) 4 ประตู  3) ตรวจแบรนด์ตัวเอง
   4) 1 Brand 1 Story  5) ขายคู่กัน  6) FAQ  7) จุกจิก */

/* ---------- 1. พื้นหลังเบลอขยับ (เฉพาะ 2 กล่อง) ---------- */
.hero, .final-cta{position:relative; isolation:isolate}
.final-cta{overflow:hidden}
.hero .wrap, .final-cta .wrap{position:relative; z-index:1}
.hero::before, .hero::after, .final-cta::before, .final-cta::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-25% -15%; will-change:transform;
}
/* จอแรก: วงเบลอสีมะนาว/เขียวอ่อน ลอยช้า ๆ บนพื้นเดิม */
.hero::before{
  background:
    radial-gradient(38% 42% at 18% 30%, rgba(207,232,120,.36) 0%, rgba(207,232,120,0) 70%),
    radial-gradient(30% 36% at 72% 82%, rgba(184,221,82,.16) 0%, rgba(184,221,82,0) 70%);
  animation:tdDriftA 24s ease-in-out infinite alternate;
}
.hero::after{
  background:
    radial-gradient(28% 32% at 80% 22%, rgba(62,125,116,.12) 0%, rgba(62,125,116,0) 70%),
    radial-gradient(22% 26% at 42% 60%, rgba(234,242,236,.7) 0%, rgba(234,242,236,0) 70%);
  animation:tdDriftB 31s ease-in-out infinite alternate;
}
/* ปิดท้าย: วงเบลอมะนาว/เขียวทะเล บนพื้นเขียวเข้มเดิม */
.final-cta::before{
  background:
    radial-gradient(36% 40% at 16% 28%, rgba(207,232,120,.14) 0%, rgba(207,232,120,0) 70%),
    radial-gradient(30% 34% at 78% 76%, rgba(62,125,116,.30) 0%, rgba(62,125,116,0) 70%);
  animation:tdDriftA 28s ease-in-out infinite alternate;
}
.final-cta::after{
  background:
    radial-gradient(26% 30% at 70% 20%, rgba(184,221,82,.10) 0%, rgba(184,221,82,0) 70%),
    radial-gradient(24% 28% at 38% 70%, rgba(29,82,68,.45) 0%, rgba(29,82,68,0) 70%);
  animation:tdDriftB 35s ease-in-out infinite alternate;
}
@keyframes tdDriftA{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(6%,-4%,0) scale(1.08)}
  100%{transform:translate3d(-5%,5%,0) scale(1.02)}
}
@keyframes tdDriftB{
  0%  {transform:translate3d(0,0,0) scale(1.04)}
  50% {transform:translate3d(-6%,3%,0) scale(1)}
  100%{transform:translate3d(5%,-5%,0) scale(1.1)}
}
/* มือถือ: หน้าปกไม่ขยับ ไม่มีวงเบลอ (ตามที่ต๊อบขอ 11 ต.ค.) */
@media (max-width:860px){ .hero::before,.hero::after{display:none} }
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.final-cta::before,.final-cta::after{animation:none}
}

/* ---------- 2. 4 ประตู (ใช้ .pain-card เดิม) ---------- */
.door-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.door-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.door-grid{grid-template-columns:1fr}}
.pain-card.door{
  font-family:inherit; font-size:inherit; line-height:inherit; color:var(--ink);
  text-align:left; cursor:pointer; width:100%; display:block;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.pain-card.door:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.pain-card.door:focus-visible{outline:2.5px solid var(--signal); outline-offset:3px}
.pain-card.door b{display:block; margin-top:16px; font-size:17.5px; font-weight:600; line-height:1.4}
.pain-card.door p{margin:8px 0 0; font-size:14.5px; color:var(--muted); max-width:none}
.pain-card.door .go{display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--signal)}
.pain-card.door[aria-pressed="true"]{border-color:var(--forest); box-shadow:var(--shadow-2); background:#f6faf7}
.pain-card.door[aria-pressed="true"] .num{background:var(--forest); color:#fff}
.pain-card.door[aria-pressed="true"] .go{color:var(--forest)}

.door-panel{
  margin-top:18px; background:var(--paper); border:1px solid var(--hairline);
  border-top:4px solid var(--forest); border-radius:var(--radius);
  padding:32px 30px; box-shadow:var(--shadow-2);
}
@media (max-width:560px){.door-panel{padding:24px 20px}}
.dp-head .sc-tag{background:var(--forest); color:#fff}
.dp-head h3{font-size:clamp(19px,2.6vw,23px); font-weight:600; margin:14px 0 0; line-height:1.4; max-width:40ch}
.dp-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; align-items:stretch}
.dp-grid .dp.proof{grid-column:2; grid-row:1 / span 3}
@media (max-width:640px){.dp-grid{grid-template-columns:1fr} .dp-grid .dp.proof{grid-column:auto; grid-row:auto}}
.dp{background:var(--ivory); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:18px 20px}
.dp .l{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--signal)}
.dp ul{margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
.dp li, .dp p{font-size:14.5px; color:var(--muted); line-height:1.65}
.dp p{margin:8px 0 0}
.dp.proof{background:var(--tint); border-color:#d5e3d9; border-top:3px solid var(--forest)}
.dp.proof .l{color:var(--forest)}
.dp .dp-video{margin:12px 0 4px; border-radius:12px; box-shadow:var(--shadow-1); aspect-ratio:16/9}
.dp .dp-video .tag{top:10px; left:10px; font-size:11px; padding:5px 10px; text-transform:none; letter-spacing:0}
.dp .dp-video .play{width:44px; height:44px}
.dp .dp-video .play::after{border-width:8px 0 8px 13px; margin-left:3px}
.dp.proof .pv{margin-top:10px}
.dp.proof .pv + .pv{margin-top:8px}
.dp.proof ul{margin-top:10px; padding-left:18px}
.dp.proof li b{color:var(--ink); font-weight:600}
.dp.proof .src a{color:var(--forest); font-weight:500}
.dp.proof .pv b{display:block; font-family:"Space Grotesk","Kanit",sans-serif; font-size:26px; font-weight:700; color:var(--forest); line-height:1.15; font-variant-numeric:tabular-nums}
.dp.proof .pv span{display:block; font-size:12.5px; color:var(--muted); line-height:1.5}
.dp.proof p{color:var(--ink)}
.dp.proof .src{margin-top:10px; font-size:12px; color:var(--muted); line-height:1.5}
.dp-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px}
.dp-foot .note{font-size:13.5px; color:var(--muted)}
@media (max-width:560px){.dp-foot .btn{width:100%}}

/* ---------- 3. ตรวจแบรนด์ตัวเอง 5 ข้อ ---------- */
.check{background:var(--ivory)}
.check-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; margin-top:36px; align-items:start}
@media (max-width:820px){.check-grid{grid-template-columns:1fr; gap:18px}}
.ck-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.ck-list label{
  display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  padding:18px 20px; box-shadow:var(--shadow-1); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.ck-list label:hover{border-color:#c9d8cd}
.ck-list input{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ck-list .box{
  width:24px; height:24px; border-radius:7px; border:2px solid #c9d8cd; background:var(--paper);
  display:grid; place-items:center; margin-top:2px; font-size:14px; font-weight:700; color:#fff;
}
.ck-list .t{font-size:16px; color:var(--ink); line-height:1.6}
.ck-list .ex{font-style:normal; color:var(--muted); font-size:14px}
.ck-list li.on label{border-color:var(--forest); background:#f6faf7}
.ck-list li.on .box{background:var(--forest); border-color:var(--forest)}
.ck-list li.on .box::after{content:"✓"}
.ck-list label:focus-within{outline:2.5px solid var(--signal); outline-offset:2px}
.ck-result .score{display:flex; align-items:baseline; gap:8px}
.ck-result .score b{font-family:"Space Grotesk","Kanit",sans-serif; font-size:52px; font-weight:700; color:var(--forest); line-height:1; font-variant-numeric:tabular-nums}
.ck-result .score span{font-size:14px; color:var(--muted)}
.ck-result .msg{margin:14px 0 0; font-size:15.5px; color:var(--ink); line-height:1.65}
.ck-result .code{display:none; margin-top:14px; font-family:"Space Grotesk","Kanit",sans-serif; font-size:22px; font-weight:700; letter-spacing:.05em; color:var(--forest); background:var(--tint); border-radius:10px; padding:8px 16px}
.ck-result .code.show{display:inline-block}
.ck-result .how{display:none; margin:12px 0 0; font-size:13.5px; color:var(--muted); line-height:1.6}
.ck-result .how.show{display:block}
.ck-result .btn{width:100%; margin-top:18px}
.ck-result .copied{margin-top:10px; font-size:13px; color:var(--signal); min-height:1.4em}
@media (max-width:820px){.ck-result{position:static}}

/* ---------- 5. แพ็กเกจเสริม (การ์ดแบบ .pkg-card เดิม) ---------- */
.addon-head{margin-top:72px}
.addon-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; align-items:start}
@media (max-width:800px){.addon-cards{grid-template-columns:1fr}}
.addon-cards .pkg-card{display:flex; flex-direction:column}
.addon-cards .pkg-card .pkg-per{white-space:normal; line-height:1.5; font-size:12.5px}
.addon-cards .pkg-card ul{flex:1}
.addon-cards .pkg-card .btn{width:auto; align-self:flex-start}
@media (max-width:560px){.addon-cards .pkg-card .btn{width:100%}}

/* ---------- 6. FAQ (การ์ดแบบ .p-step) ---------- */
.faq{background:var(--paper)}
.faq-list{display:flex; flex-direction:column; gap:12px; margin-top:36px}
.faq-list details{
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-1);
}
.faq-list details[open]{border-color:#c9d8cd}
.faq-list summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 56px 18px 22px; font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.5;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; background:var(--tint); color:var(--forest);
  display:grid; place-items:center; font-size:20px; font-weight:500; line-height:1;
}
.faq-list details[open] summary::after{content:"−"}
.faq-list summary:focus-visible{outline:2.5px solid var(--signal); outline-offset:2px; border-radius:var(--radius-sm)}
.faq-list .a{padding:0 22px 20px; font-size:15.5px; color:var(--muted); line-height:1.75; max-width:70ch}

/* ---------- 7. จุกจิก ---------- */
.foot-grid img, .topbar img{width:auto}
.src-note{margin-top:24px; font-size:13px; color:var(--muted)}
.fc-panel .hours{margin:14px 0 0; font-size:13px; color:#b7c6bd}
.case-grid[data-g]{scroll-margin-top:80px}
.door-panel{scroll-margin-top:84px}

/* ---------- 8. ความพรีเมียม/ความเป็นมนุษย์ (เรียนรู้จาก reference 11 ต.ค. 2569) ---------- */
/* จุดมะนาวหน้าหัวข้อย่อย (ใช้สีแบรนด์เดิม) */
.eyebrow{display:flex; align-items:center; gap:8px}
.eyebrow::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--lime-deep)}
.belief .eyebrow::before, .final-cta .eyebrow::before, .fc-panel .eyebrow::before{background:var(--lime)}
.dp-head .eyebrow{display:none}

/* แถบตัวเลขจริงใต้จอแรก ซ้อนขอบล่างของจอแรกเล็กน้อย */
.proofbar{position:relative; z-index:2; margin-top:-34px}
.proofbar .pb-card{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:26px 30px}
.proofbar .pt b{display:block; font-family:"Space Grotesk","Kanit",sans-serif; font-size:clamp(26px,3vw,34px); font-weight:700; color:var(--forest); line-height:1.1; font-variant-numeric:tabular-nums}
.proofbar .pt span{display:block; margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.5}
.proofbar .pb-src{margin:12px 4px 0; font-size:12.5px; color:var(--muted)}
.proofbar .pb-src a{color:var(--forest)}
.proofbar + section{padding-top:64px}
@media (max-width:860px){
  .proofbar{margin-top:-28px}
  .proofbar .pb-card{grid-template-columns:1fr 1fr; gap:16px 14px; padding:20px 20px}
  .proofbar .pt b{font-size:24px}
}

/* แถบหัวเว็บมีเงาบางเมื่อเลื่อนลง */
.topbar{transition:box-shadow .2s ease}
.topbar.scrolled{box-shadow:0 6px 18px -10px rgba(14,42,36,.25)}

/* รายการใต้วิดีโอทีม (สไตล์เดียวกับรายการใต้ปุ่มจอแรก) */
.corp-assure{display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center; margin:26px 0 0; padding:0; list-style:none}
.corp-assure li{font-size:14.5px; color:var(--muted); display:flex; gap:8px; align-items:center}
.corp-assure li::before{content:"✓"; color:var(--signal); font-weight:600}
@media (max-width:640px){.corp-assure{flex-direction:column; align-items:flex-start; gap:8px; margin-left:4px}}

/* คำบรรยายรูปเบื้องหลัง (จากชื่อไฟล์จริง) */
.bts-item{position:relative}
.bts-item .cap{
  position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px);
  font-size:11.5px; font-weight:500; color:#fff; background:rgba(14,42,36,.72);
  padding:4px 10px; border-radius:999px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease;
}
.bts-item:hover .cap, .bts-item:focus-within .cap{opacity:1; transform:none}
@media (hover:none){ .bts-item .cap{opacity:1; transform:none; font-size:10.5px; padding:3px 8px} }

/* ค่อย ๆ โผล่เมื่อเลื่อนถึง (มีผลเฉพาะเมื่อ JS ทำงาน · ปิดเมื่อผู้ใช้ตั้งลดการเคลื่อนไหว) */
html.js .rv{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
html.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ html.js .rv{opacity:1; transform:none; transition:none} }

/* ---------- 9. ชั้นพรีเมียม (11 ต.ค. 2569 รอบ 2) · สี/ฟอนต์เดิมทั้งหมด เปลี่ยนแค่สัดส่วน ระยะ และรายละเอียด ---------- */
:root{
  --sh-soft:0 1px 2px rgba(14,42,36,.04), 0 28px 56px -28px rgba(14,42,36,.22);
  --sh-lift:0 2px 4px rgba(14,42,36,.05), 0 36px 64px -32px rgba(14,42,36,.35);
  --ink-soft:#3d4a43;
}
/* ระยะหายใจมากขึ้น */
section{padding:104px 0}
@media (max-width:640px){ section{padding:64px 0} }
/* หัวข้อหนาขึ้น ชิดขึ้น · คำโปรยเบาลง (Kanit 300) */
h2{font-weight:700; font-size:clamp(30px,4.4vw,44px); line-height:1.18; letter-spacing:-.02em}
.section-sub{font-weight:300; font-size:18px; color:var(--ink-soft); margin-top:16px; max-width:58ch}
.eyebrow{font-size:12.5px; letter-spacing:.12em}
.topbar .wrap{padding-top:14px; padding-bottom:14px}
.topbar a{font-size:14.5px}
/* ปุ่ม: ลูกศรขยับเมื่อชี้ */
.btn{padding:15px 30px}
.btn-sm{padding:10px 20px}
.btn .arr{display:inline-block; transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}
/* เกรนกระดาษบาง ๆ บนพื้นหลัง (ให้ความรู้สึกงานพิมพ์ ไม่ใช่จอ) */
.grain{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:200px 200px}
.belief, footer{position:relative; isolation:isolate}
.belief .wrap, footer .wrap{position:relative; z-index:1}
.belief .grain, .final-cta .grain, footer .grain{opacity:.14; mix-blend-mode:soft-light}

/* จอแรก: หัวข้อใหญ่ขึ้น คำโปรยเบา รูปมีป้ายบอกสถานที่จริง */
.hero{padding:92px 0 118px}
.hero h1{font-size:clamp(38px,5.8vw,64px); line-height:1.1; letter-spacing:-.025em}
.hero p.lede{font-weight:300; font-size:clamp(17px,2.2vw,20px); color:var(--ink-soft); max-width:46ch; margin-top:24px}
.hero .ctas{margin-top:36px}
.hero .assure{margin-top:26px}
.hero-visual .photo{position:relative; border-radius:28px; box-shadow:var(--sh-lift)}
.hero-visual .photo img{aspect-ratio:4/4.5}
.photo-tag{position:absolute; left:18px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:999px; padding:8px 14px 8px 11px; font-size:13px; font-weight:500; color:var(--ink); box-shadow:var(--shadow-1); white-space:nowrap}
.photo-tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lime-deep)}
@media (max-width:860px){ .hero{padding:60px 0 84px} .hero p.lede{color:#e9efe9} }

/* แถบตัวเลข: ไม่มีเส้นขอบ ใช้เงานุ่ม + เส้นบางคั่น · ตัวเลขใหญ่ขึ้น */
.proofbar{margin-top:-44px}
.proofbar .pb-card{border:0; box-shadow:var(--sh-lift); padding:32px 36px; gap:0; border-radius:24px}
.proofbar .pt{padding:0 26px; border-left:1px solid var(--hairline)}
.proofbar .pt:first-child{padding-left:0; border-left:0}
.proofbar .pt b{font-size:clamp(30px,3.4vw,42px); letter-spacing:-.02em}
.proofbar .pt span{font-size:13px; margin-top:8px}
.proofbar .pb-clients{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin:22px 4px 0}
.proofbar .pb-clients .lbl{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--signal)}
.proofbar .pb-clients .names{font-size:15px; font-weight:500; color:var(--ink); display:flex; flex-wrap:wrap; align-items:center; gap:6px 0}
.proofbar .pb-clients .names i{display:inline-block; width:4px; height:4px; border-radius:50%; background:#b9c7bd; margin:0 12px}
.proofbar .pb-src{margin-top:8px; font-size:12.5px}
@media (max-width:860px){
  .proofbar{margin-top:-36px}
  .proofbar .pb-card{padding:22px 22px; gap:18px 0; border-radius:20px}
  .proofbar .pt{padding:0 16px}
  .proofbar .pt:nth-child(odd){padding-left:0; border-left:0}
  .proofbar .pt:nth-child(n+3){border-top:1px solid var(--hairline); padding-top:16px}
  .proofbar .pt b{font-size:26px}
  .proofbar .pb-clients .names i{margin:0 8px}
}

/* 4 กล่องธุรกิจ: จากการ์ดกรอบ เป็นคอลัมน์แบบบรรณาธิการ (เส้นบน + เลขลำดับ) */
.pain-grid.door-grid{gap:0; margin-top:44px; border-top:1px solid var(--hairline)}
.pain-card.door{background:transparent; border:0; border-radius:0; box-shadow:none; padding:28px 24px 30px 0; margin-top:-1px; border-top:2px solid transparent; transition:background .2s ease, border-color .2s ease}
.pain-card.door + .pain-card.door{padding-left:24px; border-left:1px solid var(--hairline)}
.pain-card.door .num{width:auto; height:auto; background:none; border-radius:0; display:block; font-family:"Space Grotesk","Kanit",sans-serif; font-size:13px; letter-spacing:.1em; color:var(--signal)}
.pain-card.door b{margin-top:18px; font-size:19px; line-height:1.35}
.pain-card.door p{margin-top:10px; font-size:15px}
.pain-card.door .go{margin-top:18px}
.pain-card.door:hover{transform:none; box-shadow:none; border-top-color:var(--forest); background:linear-gradient(180deg,#f6faf7 0%, rgba(246,250,247,0) 100%)}
.pain-card.door[aria-pressed="true"]{border-top-color:var(--forest); background:#f6faf7; box-shadow:none}
.pain-card.door[aria-pressed="true"] .num{background:none; color:var(--forest)}
@media (max-width:900px){
  .pain-card.door:nth-child(odd){padding-left:0; border-left:0}
  .pain-card.door:nth-child(n+3){border-top:1px solid var(--hairline)}
  .pain-card.door:nth-child(n+3):hover, .pain-card.door:nth-child(n+3)[aria-pressed="true"]{border-top-color:var(--forest)}
}
@media (max-width:520px){
  .pain-card.door{padding:22px 0 24px !important; border-left:0 !important; border-top:1px solid var(--hairline)}
  .pain-card.door:hover, .pain-card.door[aria-pressed="true"]{border-top-color:var(--forest)}
}
.door-panel{border:0; border-top:0; box-shadow:var(--sh-lift); border-radius:24px; padding:36px 36px; margin-top:28px}
@media (max-width:560px){.door-panel{padding:24px 20px}}

/* 5 ขั้นตอน: จากกล่อง เป็นรายการแบบบรรณาธิการ เลข 01-05 ตัวใหญ่ */
.process-rail{gap:0; border-top:1px solid var(--hairline)}
.p-step{background:transparent; border:0; border-bottom:1px solid var(--hairline); border-radius:0; box-shadow:none; padding:28px 8px; grid-template-columns:104px 1fr; gap:0 18px}
.p-step .n{width:auto; height:auto; background:none; border-radius:0; display:block; font-family:"Space Grotesk","Kanit",sans-serif; font-size:36px; font-weight:700; color:var(--signal); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.p-step .n::before{content:"0"}
.p-step h3{font-size:22px; margin-bottom:6px}
.p-step p{font-size:16px; max-width:60ch}
@media (max-width:560px){.p-step{grid-template-columns:64px 1fr; padding:22px 4px} .p-step .n{font-size:28px}}

/* ความเชื่อ: คำพูดเบาและใหญ่ขึ้น */
.belief blockquote{font-weight:300; font-size:clamp(22px,3.2vw,34px); line-height:1.5}
@media (min-width:861px){ .belief blockquote{font-size:clamp(24px,2.8vw,32px)} }
.belief blockquote b{font-weight:600}

/* การ์ดต่าง ๆ: เงานุ่มกว่าเดิม ลดเส้นขอบ */
.case-copy, .stat-panel{box-shadow:var(--sh-soft); border-color:#eaf0ec}
.pkg-table-wrap{box-shadow:var(--sh-lift); border-color:#eaf0ec}
.diff-card{border-color:#e6ede8}
.faq-list details{box-shadow:none}
.faq-list details[open]{box-shadow:var(--sh-soft)}

/* ผลงาน: ป้ายหมวดเล็ก ๆ + รูปซูมเบา ๆ เมื่อชี้ */
.pf-thumb .tag{display:block; position:absolute; top:12px; left:12px; z-index:2; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.42); padding:5px 10px; border-radius:999px}
.pf-thumb img, .bts-item img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pf-card:hover .pf-thumb img{transform:scale(1.04)}
.bts-item:hover img{transform:scale(1.05)}
.pf-card{box-shadow:none; border-color:#e6ede8}
.pf-card:hover{box-shadow:var(--sh-soft)}

/* ปิดท้าย: ชื่อคนที่จะได้คุยด้วย */
.final-cta h2{font-size:clamp(32px,4.6vw,46px)}
.fc-panel{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); border-radius:24px; padding:32px}
.fc-panel .people{margin:16px 0 0; font-size:14px; color:#dbe4de; line-height:1.6}
.fc-panel .people b{color:var(--lime); font-weight:600}
.fc-panel .hours{margin-top:6px}
footer{padding-top:64px}

/* ---------- 10. เลือกประเภทธุรกิจในกล่องตรวจแบรนด์ (ป้ายแบบ .tags เดิม) ---------- */
.ck-group{margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline)}
.ck-group .l{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:10px}
.ck-group .l em{font-style:normal; font-weight:400; color:var(--muted)}
.ck-group .chips{display:flex; flex-wrap:wrap; gap:8px}
.ck-group .chip{
  font-family:inherit; font-size:13px; font-weight:500; line-height:1.3;
  background:var(--tint); color:var(--forest); border:1.5px solid transparent;
  border-radius:999px; padding:7px 14px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.ck-group .chip:hover{border-color:#c9d8cd}
.ck-group .chip:focus-visible{outline:2.5px solid var(--signal); outline-offset:2px}
.ck-group .chip[aria-pressed="true"]{background:var(--forest); color:#fff; border-color:var(--forest)}

/* ---------- 11. ลำดับตาม Funnel (TOP → MIDDLE → BOTTOM) · สลับพื้นขาว/ครีมให้ยังสลับกันหลังย้ายลำดับ ---------- */
.corp{background:var(--ivory)}
.process{background:var(--paper)}
.diffs{background:var(--ivory)}
.diffs .diff-card{background:var(--paper); border-color:#e6ede8; box-shadow:var(--sh-soft)}
.bts{background:var(--paper)}
.faq{background:var(--ivory)}
.faq-list details{border-color:#e6ede8}

/* ---------- 12. แก้ตามต๊อบ 12 ต.ค. 2569: หน้าปกกลับเป็นแบบเดิม (ไม่มีวงเขียวลอย) · การ์ดธุรกิจเขียนปัญหา + วิธีของเรา ---------- */
.hero::before, .hero::after{display:none !important; animation:none}
.hero{padding:88px 0 118px}
.pain-card.door p{font-size:14.5px; line-height:1.7; color:var(--ink-soft)}
.pain-card.door p .pain{display:block; color:var(--muted); margin-bottom:6px}
.pain-card.door b{font-size:18px}


/* ===== 13. v3.1 (18 ต.ค. 2569): ระยะในกล่องเช็กแบรนด์ · QR สำหรับคอม · ข้อความช่วยในแอป FB · ปุ่มลอยหลังเช็ก ===== */
.ck-stage{margin-top:14px; padding:12px 14px; background:var(--tint); border-radius:12px}
.ck-stage .bar{display:flex; gap:6px; margin-bottom:8px}
.ck-stage .bar i{flex:1; height:8px; border-radius:99px; background:#d6e0d9; transition:background .25s}
.ck-stage.lv1 .bar i:nth-child(-n+1){background:#e2b35a}
.ck-stage.lv2 .bar i:nth-child(-n+2){background:var(--lime-deep)}
.ck-stage.lv3 .bar i:nth-child(-n+3){background:var(--signal)}
.ck-stage .st{margin:0; font-size:13.5px; line-height:1.55; color:var(--muted)}
.ck-stage .st b{display:block; font-size:15px; font-weight:600; color:var(--forest); margin-bottom:2px}
.ck-stage.lv1 .st b{color:#9a6b12}
.ck-stage.lv2 .st b{color:#5f7a14}
.ck-stage.lv3 .st b{color:var(--signal)}
.ck-result .copied{color:var(--muted)}

/* QR สำหรับคนเปิดจากคอม */
.lqr{position:fixed; inset:0; z-index:90; background:rgba(14,42,36,.72); display:flex; align-items:center; justify-content:center; padding:20px}
.lqr[hidden]{display:none}
.lqr-box{position:relative; width:min(420px,100%); background:var(--paper); border-radius:var(--radius); padding:28px 26px 24px; box-shadow:0 30px 80px rgba(0,0,0,.35); text-align:center}
.lqr-box .eyebrow{margin-bottom:6px}
.lqr-box h3{margin:0 0 16px; font-size:20px; line-height:1.3; color:var(--ink)}
.lqr-qr{width:240px; height:240px; margin:0 auto; background:#fff; padding:8px; border:1px solid var(--hairline); border-radius:12px}
.lqr-qr svg{width:100%; height:100%; display:block}
.lqr-msg{margin:14px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink); background:var(--tint); border-radius:10px; padding:10px 12px; text-align:left}
.lqr-note{margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted)}
.lqr-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.lqr-close{position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; background:transparent; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; border-radius:50%}
.lqr-close:hover{background:var(--tint); color:var(--ink)}

/* เบราว์เซอร์ในแอป Facebook/Instagram บางครั้งไม่เปิดแอป LINE */
.inapp-note{position:fixed; left:14px; right:14px; bottom:calc(74px + env(safe-area-inset-bottom)); z-index:60; background:var(--ink); color:#fff; font-size:13.5px; line-height:1.5; padding:12px 14px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.inapp-note[hidden]{display:none}
.inapp-note b{color:var(--lime)}

/* ปุ่มลอยมือถือ หลังทำเช็กแล้ว */
.mobile-cta .btn.done{box-shadow:0 0 0 3px rgba(207,232,120,.35)}