/* ============================================================
   home.css — Torb Hai homepage "WHITE SIGNAL"
   พื้นขาวล้วน + สีจัด (แนว Framer/Linear) — โหลดเฉพาะ index.html
   หน้าอื่น (pricing/legal/contact) ไม่โหลดไฟล์นี้ = ครีมเดิม ไม่กระทบ
   หลักการ: คง --ink = สีเข้ม (ไม่ flip → ไม่มี token collision), เปลี่ยนพื้นเป็นขาว,
            ดันคอนทราสต์ด้วย coral/violet + typography ใหญ่ + สร้าง section ใหม่
   ============================================================ */
:root {
  /* ---- Pin Palette (Dear เลือก 14 ก.ค.): coral #E2564C · rose #E0998F · cream #F3EED9 · periwinkle #9CA9DF
         พื้นหลัก = ขาว (เข้ากับ hero ขาว) · ครีมใช้เป็น tint เฉพาะบาง section · ความสงบมาจาก periwinkle/rose ---- */
  --bg: #ffffff;           /* white canvas — เข้ากับ hero ขาว */
  --card: #ffffff;
  --card-2: #F7F6F3;       /* raised subtle (นิวทรัลอ่อน) */
  --cream: #F3EED9;        /* ครีม — สำหรับ section tint เฉพาะจุด */
  --cream-soft: #FAF6EA;   /* ครีมอ่อนมาก */
  --ink: #16130f;          /* near-black text (คงไว้ = ไม่ชน) */
  --muted: #6b6259;        /* warm gray, AA บนขาว */
  --line: #eceae5;
  --line-2: #e0ddd6;
  --chip: #f4f2ed;
  --accent: #E2564C;       /* coral — text ใหญ่/graphic/ไฮไลต์ */
  --accent-text: #BC3E33;  /* coral เข้มสำหรับ text เล็ก (AA ≥4.5) */
  --btn-coral: #CE4034;    /* พื้นปุ่ม coral — วัดจริง 21 ก.ค.: #D5473C ให้ขาวบนพื้น 4.38 ไม่ถึง AA (4.5) เข้มขึ้นนิดเป็น 4.76 */
  --signal: #E2564C;
  --rose: #E0998F;         /* rose นวล — gradient/glow คู่ coral + tint */
  --rose-soft: rgba(224,153,143,.16);
  --violet: #9CA9DF;       /* periwinkle — สีเย็น secondary (graphic/soft) */
  --violet-text: #5D69B0;  /* periwinkle เข้มสำหรับ text (AA) */
  --violet-soft: rgba(156,169,223,.16);
  --coral-soft: rgba(226,86,76,.12);
  --ok: #16a34a; --ok-text: #15803d;
  --focus-ring: #5D69B0;   /* focus = periwinkle เข้ม (แยกจาก coral) */
}
/* กันตกขอบทั้งหน้า: ถ้ามีของตกแต่งชิ้นไหนยื่นเกินจอ ให้ตัดทิ้งแทนที่จะทำให้หน้าเลื่อนซ้าย-ขวา
   ใช้ clip ไม่ใช่ hidden เพราะ hidden จะทำให้ position:sticky ข้างในพัง (nav/สcrollytelling ใช้ sticky) */
body { background: var(--bg); color: var(--ink); overflow-x: clip; }

/* focus ให้ชัดขึ้น (Codex P2) */
:where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 8px; }
.btn.primary:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(93,105,176,.55); }

/* ---------- header: กระจกขาว ---------- */
.site-header { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.dropdown-panel { box-shadow: 0 24px 60px -24px rgba(20,15,10,.22); }

/* ---------- ปุ่ม primary: coral (white text ผ่าน AA ด้วย --btn-coral) ---------- */
.btn.primary { background: var(--btn-coral); color: #fff; border-color: var(--btn-coral); font-weight: 700; box-shadow: 0 12px 26px -12px rgba(230,59,43,.5); }
.btn.primary:hover { background: #d1301f; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(230,59,43,.6); }
h1 .hl { color: var(--accent); background-image: linear-gradient(var(--accent), var(--accent)); }

/* ---------- Section 4: product demo tabs ---------- */
.demo-tabs { background: #fff; padding-top: 54px; }
.demo-heading { margin-bottom: 48px; }
.demo-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: clamp(42px,7vw,88px); align-items: center; }
.demo-copy { display: flex; flex-direction: column; gap: 12px; }
.demo-tab { appearance: none; width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 14px; text-align: left; padding: 20px; color: var(--muted); background: #fff; border: 1px solid transparent; border-radius: 18px; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.demo-tab:hover { background: var(--violet-soft); }
.demo-tab.active { color: var(--violet-text); background: var(--violet-soft); border-color: rgba(156,169,223,.62); transform: translateX(4px); }
.demo-index { font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--violet-text); padding-top: 3px; }
.demo-tab b { display: block; color: var(--ink); font-size: clamp(17px,1.5vw,20px); line-height: 1.35; }
.demo-tab.active b { color: var(--violet-text); }
.demo-tab small { display: block; margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.demo-dots { display: flex; gap: 8px; padding: 9px 20px 0 72px; }
.demo-dots span { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); transition: width .25s, background .25s; }
.demo-dots span.active { width: 28px; background: var(--violet); }
.demo-phone { position: relative; min-height: 500px; padding: 34px; display: grid; place-items: center; border: 1px solid rgba(156,169,223,.42); border-radius: 32px; background: radial-gradient(90% 80% at 80% 10%, var(--violet-soft), transparent 62%), var(--cream-soft); box-shadow: 0 36px 80px -42px rgba(48,54,100,.35); }
.demo-panel { width: min(100%,430px); animation: demoIn .35s ease both; }
.demo-panel .ig-card { width: 100%; background: #fff; border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 22px 48px -34px rgba(20,15,10,.32); }
.demo-panel .ig-dm { position: relative; inset: auto; width: calc(100% - 28px); margin: -4px auto 0; background: #fff; color: var(--ink); border: 1px solid rgba(156,169,223,.5); box-shadow: 0 18px 38px -28px rgba(48,54,100,.35); }
.demo-panel .ig-dm-icon { background: var(--violet); color: #fff; display: grid; place-items: center; }
.dm-window, .reel-window { min-height: 370px; padding: 24px; display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: 0 22px 48px -34px rgba(20,15,10,.32); }
.dm-head { padding-bottom: 15px; text-align: center; font-weight: 700; border-bottom: 1px solid var(--line); }
.dm-bubble { max-width: 78%; padding: 13px 16px; border-radius: 18px; font-size: 16px; line-height: 1.5; }
.dm-bubble.incoming { align-self: flex-start; background: var(--card-2); }
.dm-bubble.outgoing { align-self: flex-end; background: var(--violet-soft); color: var(--violet-text); }
.dm-status { align-self: center; color: var(--violet-text); font-size: 14px; font-weight: 700; }
.reel-preview { min-height: 210px; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 10px; background: linear-gradient(145deg, var(--violet-soft), var(--rose-soft)); color: var(--violet-text); font-weight: 700; }
.reel-play { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 12px 30px -20px rgba(20,15,10,.3); }
.ig-comment.compact { padding: 5px 2px; }
@keyframes demoIn { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   Section 4 — Feature carousel (โครง ManyChat, ธีม Torb Hai)
   ซ้าย: จุด + หัวข้อเปลี่ยนตามสไลด์ + ปุ่ม / ขวา: phone + คอมเมนต์เลื่อนขึ้น + progress bar
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mcx { background: var(--violet-soft); overflow: hidden; padding-top: 140px; padding-bottom: 60px; }
.mcx-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.85fr); gap: clamp(36px,6vw,80px); align-items: center; }
.mcx-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.mcx-dots { display: flex; gap: 10px; padding: 0; }
.mcx-dot { appearance: none; height: 6px; width: 26px; padding: 0; border: none; border-radius: 99px; background: rgba(93,105,176,.28); cursor: pointer; transition: width .3s, background .3s; }
.mcx-dot.active { width: 46px; background: var(--violet-text); }
.mcx-slides { position: relative; width: 100%; min-height: 210px; }
.mcx-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .22s ease; }
.mcx-slide.active { opacity: 1; transform: none; position: relative; pointer-events: auto; transition: opacity .4s ease .1s, transform .4s ease .1s; }
.mcx-slide h2 { font-size: clamp(30px,4vw,50px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.mcx-slide h2 .hl { color: var(--violet-text); background-image: none; }
.mcx-slide p { margin: 20px 0 0; max-width: 440px; font-size: clamp(15px,1.2vw,17px); line-height: 1.6; color: var(--muted); }
.mcx-cta { align-self: flex-start; }

/* ---- phone ---- */
.mcx-phone-wrap { display: flex; justify-content: center; }
/* อัตราส่วน iPhone 14 Pro จริง (ตัวเครื่อง 71.5×147.5mm ≈ 9:19.5) */
.mcx-phone { position: relative; width: min(300px,100%); aspect-ratio: 9 / 19; background: #17181f; border-radius: 42px; padding: 12px; box-shadow: 0 50px 100px -44px rgba(24,20,45,.55), 0 0 0 1.5px rgba(255,255,255,.06) inset; }
/* จอมือถือใน mockup = ฟอนต์จำลองแบบแอป IG (ไม่ใช่ฟอนต์แบรนด์) — Noto Sans Thai ใกล้ Instagram Sans Thai ที่สุดที่ใช้ได้ */
/* น้ำหนักหนาเท่าฟองแชต hero (.mc-bubble = 600) — Dear สั่ง "ฟอนต์ mockup ให้เหมือนฟองแชตทั้งหมด" */
.mcx-phone, .mcx-phone * { font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; font-weight: 600; }
.mcx-notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 88px; height: 25px; background: #000; border-radius: 99px; z-index: 5; }
.mcx-screen { position: absolute; inset: 12px; background: #fff; border-radius: 30px; overflow: hidden; }
.mcx-scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .4s ease; }
.mcx-scene.active { opacity: 1; visibility: visible; }

/* IG header */
.mcx-igtop, .mcx-dmtop { display: flex; align-items: center; gap: 9px; padding: 34px 15px 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.mcx-ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--rose)); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--rose); }
.mcx-user { flex: 1; }
.mcx-more { color: #bbb; letter-spacing: 1.5px; }
.mcx-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--violet); padding: 3px 9px; border-radius: 99px; }
/* IG media */
.mcx-media { position: relative; aspect-ratio: 5 / 4; background: linear-gradient(135deg, var(--violet-soft), var(--rose-soft)); flex-shrink: 0; overflow: hidden; }
.mcx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcx-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; background: linear-gradient(135deg, var(--violet), #7480C4); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 9px 13px; border-radius: 15px; box-shadow: 0 12px 26px -14px rgba(48,54,100,.7); }
/* comment feed */
.mcx-feed { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mcx-cmt { display: flex; gap: 9px; align-items: flex-start; }
.motion-ready .mcx-cmt { opacity: 0; transform: translateY(20px); }
.motion-ready .mcx-scene.active .mcx-cmt { animation: mcxRise .5s cubic-bezier(.34,1.4,.64,1) forwards; }
.motion-ready .mcx-scene.active .mcx-cmt[data-i="0"] { animation-delay: .5s; }
.motion-ready .mcx-scene.active .mcx-cmt[data-i="1"] { animation-delay: 1.5s; }
.motion-ready .mcx-scene.active .mcx-cmt[data-i="2"] { animation-delay: 2.6s; }
.motion-ready .mcx-scene.active .mcx-cmt[data-i="3"] { animation-delay: 3.6s; }
.mcx-cav { width: 25px; height: 25px; border-radius: 50%; flex-shrink: 0; }
.mcx-cav.c1 { background: linear-gradient(135deg,#F6C177,var(--accent)); }
.mcx-cav.c2 { background: linear-gradient(135deg,#9AD0C2,var(--violet)); }
.mcx-cav.cp { background: linear-gradient(135deg,var(--accent),var(--rose)); }
.mcx-cmt p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.mcx-cmt b { font-weight: 700; margin-right: 4px; }
.mcx-cmt-reply p { color: var(--violet-text); }
.mcx-cmt-reply { background: var(--violet-soft); border-radius: 12px; padding: 8px 10px; margin-left: 34px; }
.mcx-cmt-reply .mcx-cav { display: none; }
/* DM scene */
.mcx-dm { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.mcx-b { max-width: 78%; font-size: 14px; line-height: 1.4; padding: 9px 13px; border-radius: 16px; }
.motion-ready .mcx-b { opacity: 0; transform: translateY(16px); }
.motion-ready .mcx-scene.active .mcx-b { animation: mcxRise .45s ease forwards; }
.motion-ready .mcx-scene.active .mcx-b[data-i="0"] { animation-delay: .5s; }
.motion-ready .mcx-scene.active .mcx-b[data-i="1"] { animation-delay: 1.6s; }
.motion-ready .mcx-scene.active .mcx-b[data-i="2"] { animation-delay: 2.5s; }
.motion-ready .mcx-scene.active .mcx-b[data-i="3"] { animation-delay: 3.6s; }
.mcx-b.in { align-self: flex-start; background: #EEF0F4; color: var(--ink); border-bottom-left-radius: 5px; }
.mcx-b.out { align-self: flex-end; background: linear-gradient(135deg,var(--violet),#7480C4); color: #fff; border-bottom-right-radius: 5px; }
.mcx-b.link { text-decoration: underline; font-weight: 600; }
/* generic animated item สำหรับ scene IG จริง (comment/bubble) */
.motion-ready .mcxi { opacity: 0; transform: translateY(18px); }
/* แก้1: โหมด scroll-scrub — ฟอง/คอมเมนต์โผล่ตามระยะ scroll (เห็นครบก่อนสไลด์เปลี่ยน) แทน timer */
.mcx-scrub .mcxi { animation: none !important; opacity: 0 !important; transform: translateY(18px); transition: opacity .35s ease, transform .35s ease; }
.mcx-scrub .mcxi.on { opacity: 1 !important; transform: none; }
.motion-ready .mcx-scene.active .mcxi { animation: mcxRise .5s cubic-bezier(.34,1.4,.64,1) forwards; }
.motion-ready .mcx-scene.active .mcxi[data-i="0"] { animation-delay: .4s; }
.motion-ready .mcx-scene.active .mcxi[data-i="1"] { animation-delay: 1.35s; }
.motion-ready .mcx-scene.active .mcxi[data-i="2"] { animation-delay: 2.3s; }
.motion-ready .mcx-scene.active .mcxi[data-i="3"] { animation-delay: 3.25s; }
/* Reel scene */
.mcx-reel { position: relative; aspect-ratio: 5 / 4; flex-shrink: 0; background: linear-gradient(150deg,var(--violet-soft),var(--rose-soft)); display: grid; place-items: center; }
.mcx-reelplay { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--violet-text); font-size: 15px; box-shadow: 0 12px 30px -18px rgba(20,15,10,.4); }
.mcx-dmcard { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 11px 13px; box-shadow: 0 16px 34px -26px rgba(48,54,100,.4); }
.motion-ready .mcx-dmcard { opacity: 0; transform: translateY(16px); }
.motion-ready .mcx-scene.active .mcx-dmcard { animation: mcxRise .5s ease forwards; animation-delay: 1.4s; }
.mcx-dmcard .mcx-check { width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.mcx-dmcard b { display: block; font-size: 12px; color: var(--ink); }
.mcx-dmcard span { font-size: 12px; color: var(--muted); }
/* progress strip (ล่างสุดของจอ — coral, ข้อความขาว, เส้น fill) */
.mcx-prog { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 15px; background: var(--accent); }
.mcx-prog-label { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
.mcx-prog-count { font-size: 14px; font-weight: 800; color: rgba(255,255,255,.85); }
.mcx-prog-track { flex-basis: 100%; height: 3px; border-radius: 99px; background: rgba(255,255,255,.3); overflow: hidden; }
.mcx-prog-track i { display: block; height: 100%; width: 100%; border-radius: 99px; background: #fff; }
.motion-ready .mcx-prog-track i { width: 0; }
.motion-ready .mcx-scene.active .mcx-prog-track i { animation: mcxFill var(--mcx-dur,5.5s) linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .mcx-cmt, .mcx-b, .mcx-dmcard, .mcxi { opacity: 1 !important; transform: none !important; animation: none !important; }
  .mcx-prog-track i { width: 100% !important; animation: none !important; }
}
@keyframes mcxRise { to { opacity: 1; transform: none; } }
@keyframes mcxFill { from { width: 0; } to { width: 100%; } }

/* ================= IG-realistic chrome (ตาม screenshot จริงที่ Dear ส่ง) ================= */
.mcx-scene { font-size: 12px; color: var(--ink); }
/* iOS status bar */
.ig-status { display: flex; justify-content: space-between; align-items: center; padding: 7px 24px 3px; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.ig-status .r { display: flex; align-items: center; gap: 5px; }
.ig-sig { width: 17px; height: 11px; background:
  linear-gradient(var(--ink),var(--ink)) 0 100%/3px 4px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 4.7px 100%/3px 6px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 9.4px 100%/3px 8px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 14px 100%/3px 11px no-repeat; }
.ig-batt { width: 22px; height: 11px; border: 1.3px solid var(--ink); border-radius: 3px; position: relative; }
.ig-batt::before { content:""; position: absolute; inset: 1.5px; background: #2ecb5f; border-radius: 1.5px; }
.ig-batt::after { content:""; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 4px; background: var(--ink); border-radius: 0 2px 2px 0; }
/* nav / headers */
.ig-navbar { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; padding: 38px 13px 10px; border-bottom: 1px solid #efefef; }
.ig-navbar .ig-more { justify-self: end; }
.ig-back { font-size: 22px; line-height: 1; color: var(--ink); font-weight: 600; }
.ig-navttl { text-align: center; margin: 0; line-height: 1.15; }
.ig-navttl b { display: block; font-size: 13px; }
.ig-navttl span { font-size: 11px; color: var(--muted); }
.ig-more { color: var(--ink); letter-spacing: 1px; font-size: 15px; }
/* post header row */
.ig-postrow { display: flex; align-items: center; gap: 9px; padding: 9px 13px; }
.ig-postrow .mcx-ava { width: 30px; height: 30px; box-shadow: none; }
.ig-postmeta { flex: 1; line-height: 1.2; }
.ig-postmeta b { font-size: 12px; }
.ig-postmeta span { display: block; font-size: 11px; color: var(--muted); }
/* comments sheet */
.ig-sheet { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 4px 0 0; border-top: 6px solid #f6f6f6; overflow: hidden; }
.ig-sheet-h { display: flex; align-items: center; justify-content: center; position: relative; padding: 9px 0 8px; font-weight: 700; font-size: 13px; }
.ig-grab { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 34px; height: 4px; border-radius: 99px; background: #dbdbdb; }
.ig-cmt { display: flex; gap: 9px; align-items: flex-start; padding: 7px 13px; }
.ig-cmt.ig-nest { padding-left: 44px; }
.ig-cmt .mcx-cav { width: 27px; height: 27px; }
.ig-cmt.ig-nest .mcx-cav { width: 22px; height: 22px; }
.ig-cbody { flex: 1; min-width: 0; }
.ig-cmeta { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ig-cmeta b { font-weight: 600; }
.ig-cmeta time { color: var(--muted); font-weight: 600; font-size: 11px; }
.ig-cmeta em { color: var(--violet-text); font-style: normal; font-weight: 600; font-size: 11px; }
.ig-cbody p { margin: 2px 0 0; font-size: 12px; line-height: 1.35; }
.ig-cact { margin-top: 4px; font-size: 11px; color: var(--muted); font-weight: 600; }
.ig-heart { color: #c7c7c7; font-size: 13px; padding-top: 3px; }
/* emoji reaction row + input */
.ig-emoji { display: flex; justify-content: space-between; padding: 8px 15px 6px; font-size: 19px; border-top: 1px solid #efefef; }
.ig-inputbar { display: flex; align-items: center; gap: 9px; padding: 8px 13px 11px; }
.ig-inputbar .mcx-ava, .ig-inputbar .mcx-cav { width: 26px; height: 26px; box-shadow: none; flex-shrink: 0; }
.ig-inph { flex: 1; color: var(--muted); font-size: 12px; }
.ig-inic { color: var(--ink); font-size: 13px; font-weight: 700; }
/* ---- DM scene ---- */
.ig-dmhead { display: flex; align-items: center; gap: 9px; padding: 36px 12px 8px; border-bottom: 1px solid #efefef; }
.ig-dmhead .ig-back { font-size: 22px; }
.ig-dmhead .mcx-ava { width: 30px; height: 30px; box-shadow: none; }
.ig-dmhead .nm { flex: 1; font-weight: 700; font-size: 13px; }
.ig-dmhead .ic { display: flex; gap: 15px; font-size: 15px; color: var(--ink); }
.ig-profcard { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 12px 6px; text-align: center; }
.ig-profcard .mcx-ava { width: 58px; height: 58px; box-shadow: none; margin-bottom: 3px; }
.ig-profcard b { font-size: 14px; }
.ig-profcard span { font-size: 12px; color: var(--muted); }
.ig-viewprof { margin-top: 7px; padding: 6px 16px; background: #efeff0; border-radius: 9px; font-size: 12px; font-weight: 700; color: var(--ink); }
.ig-dmbody { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 4px 12px 4px; overflow: hidden; }
.ig-ts { align-self: center; font-size: 11px; color: var(--muted); font-weight: 600; margin: 2px 0; }
.ig-b { max-width: 80%; }
.ig-b.out { align-self: flex-end; }
.ig-b.in { align-self: flex-start; display: flex; align-items: flex-end; gap: 7px; }
.ig-b.in .mcx-ava { width: 24px; height: 24px; box-shadow: none; flex-shrink: 0; }
.ig-bubble { background: #efeff0; color: var(--ink); border-radius: 19px; padding: 9px 14px; font-size: 12px; line-height: 1.38; }
.ig-b.out .ig-bubble { border-bottom-right-radius: 6px; }
.ig-b.in .ig-bubble { border-bottom-left-radius: 6px; }
.ig-btn { display: block; margin-top: 5px; background: #efeff0; border: 1px solid #e2e2e4; border-radius: 12px; padding: 9px; text-align: center; font-size: 12px; font-weight: 700; color: var(--violet-text); }
.ig-seen { align-self: flex-end; font-size: 11px; color: var(--muted); margin-top: 1px; }
.ig-msgbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px 11px; }
.ig-cam { width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(135deg,var(--violet),#7480C4); flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 13px; }
.ig-msgbar .ig-inph { border: 1px solid #e6e6e6; border-radius: 99px; padding: 8px 14px; }
.ig-msgbar .ico { color: var(--ink); font-size: 15px; }
/* Reel small tag */
.ig-reeltag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.ig-autodm { width: 27px; height: 27px; border-radius: 50%; background: var(--violet); display: grid; place-items: center; flex-shrink: 0; }

/* ============================================================
   Before / After (โครง ManyChat "Your inbox: a before & after" — ธีม Torb Hai)
   ============================================================ */
.baw-sec { background: #fff; }
.baw-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: clamp(38px,5vw,56px) auto 0; }
/* ลูกศรดินสอรอบการ์ด — โผล่เฉพาะตอนจบ pin (GSAP คุม opacity/วาดเส้น); ไม่มี pin = ไม่โชว์ */
.baw-arrows { position: absolute; inset: -56px -40px -36px; width: calc(100% + 80px); height: calc(100% + 92px); overflow: visible; pointer-events: none; z-index: 3; opacity: 0; }
/* จอที่แคบกว่ากรอบ 980px + ระยะยื่น 40px สองข้าง = ลูกศรทะลุขอบจอ ทำให้หน้าเลื่อนซ้าย-ขวาได้
   (เจอจริง 21 ก.ค.: ล้น 16px ทุกความกว้างต่ำกว่า ~1060px) — ที่แคบให้ยื่นเท่าที่มีที่ */
@media (max-width: 1060px) {
  .baw-arrows { inset: -56px 0 -36px; width: 100%; }
}
.baw-card { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px,3.6vw,44px); border-radius: 28px; min-height: 320px; }
.baw-before { position: relative; z-index: 1; background: #F2F0E7; color: var(--ink); border: 1px solid var(--line-2); }
.baw-after { position: relative; z-index: 2; background: linear-gradient(140deg, var(--violet), #7480C4); color: #fff; box-shadow: 0 40px 90px -50px rgba(93,105,176,.7); }
.baw-illus { width: min(66%, 240px); margin: 6px auto; }
.baw-illus-after { background: #fff; border-radius: 18px; padding: 12px; }
.baw-labelwrap { position: relative; align-self: flex-start; display: inline-block; }
.baw-scribble { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: calc(100% + 40px); height: 62px; overflow: visible; pointer-events: none; }
.baw-scribble path { stroke-dasharray: 1300; }
.baw-label { font-size: 20px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.baw-before .baw-label { color: var(--ink); }
.baw-after .baw-label { color: #fff; text-shadow: 0 1px 10px rgba(47,42,38,.28); }
.baw-list { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.baw-list li { position: relative; padding-left: 34px; font-size: clamp(16px,1.5vw,19px); font-weight: 600; line-height: 1.4; }
.baw-list li::before { position: absolute; left: 0; top: -1px; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.baw-before .baw-list li::before { content: "✕"; background: rgba(226,86,76,.14); color: var(--accent-text); }
.baw-after .baw-list li::before { content: "✓"; background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 760px) { .baw-grid { grid-template-columns: 1fr; } }
/* desktop (โหมด pin): ย่อทั้ง section ให้สูงไม่เกินจอ — กันการ์ดล้นไปทับ section ถัดไประหว่างตรึง
   (แก้2: ภาพในการ์ดใหญ่ขึ้น ลดพื้นที่ว่าง + pin หยุดกลางจอ) */
@media (min-width: 761px) {
  /* มีไอคอน .baw-ico เพิ่มด้านบน → ย่อ padding/ภาพเล็กน้อยให้ section ยังต่ำกว่าจอ (fit-guard คุม pin) */
  .baw-sec { padding-top: 30px; padding-bottom: 26px; }
  .baw-sec .section-head h2 { font-size: clamp(34px, 3.4vw, 44px); line-height: 1.1; }
  .baw-sec .section-head p { font-size: clamp(16px, 1.5vw, 19px); margin-top: 10px; }
  .baw-ico { margin-bottom: 6px; }
  .baw-grid { margin-top: 16px; max-width: 1080px; }
  .baw-card { min-height: 0; padding: 20px 32px 24px; gap: 12px; }
  /* height ตายตัว = จองพื้นที่ก่อนรูปโหลด กัน layout ขยับแล้วจุด pin เพี้ยน
     (baw-ico ใหญ่ขึ้นเป็น 104px → ย่อ illus ชดเชยให้ section ยังต่ำกว่าจอ) */
  .baw-illus { width: auto; height: 176px; max-height: 176px; margin: 4px auto; }
  .baw-illus-after { padding: 12px; }
  .baw-list { gap: 12px; }
  .baw-list li { font-size: 19px; }
  /* แก้2: เพิ่มช่องไฟหลังจบ pin — กันการ์ดชิด/เกือบทับหัวข้อ funnels */
  .funnels { padding-top: 120px; }
}

/* ============================================================
   MARQUEE — แถบคอมเมนต์ไหล (พื้นอ่อน)
   ============================================================ */
.marquee-band { padding: 22px 0; border-block: 1px solid var(--line); background: var(--card-2); overflow: hidden; position: relative; }
.marquee-band::before, .marquee-band::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee-band::before { left: 0; background: linear-gradient(90deg, var(--card-2), transparent); }
.marquee-band::after { right: 0; background: linear-gradient(270deg, var(--card-2), transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.marquee-band:hover .marquee-track { animation-play-state: paused; }
.mq-chip { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 18px; font-size: 16px; font-weight: 500; color: var(--ink); box-shadow: 0 4px 14px -8px rgba(20,15,10,.12); }
.mq-chip b { color: var(--violet-text); font-weight: 700; }
.mq-chip .mq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }  /* -7px = ครึ่ง gap (Codex P3) */

/* ============================================================
   SECTION 2 — แถบ social proof (พื้นสว่าง โทนสงบ)
   ============================================================ */
.proof-bar { padding: clamp(36px, 6vh, 64px) 0 4px; text-align: center; }
.proof-heading { margin: 0 0 22px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.proof-bar .marquee-band { border-block: 1px solid var(--line); background: var(--card-2); }

/* ============================================================
   SECTION 3 — section-head "ต่อยอดทุกบทสนทนา" (ตาม ManyChat)
   ============================================================ */
.section-head.center { text-align: center; max-width: 760px; margin: 0 auto; }
/* ไอคอนประจำหัวข้อ (doodle วาดมือ เข้าชุด illus) — แสดงตรงๆ บนพื้น ไม่มีกรอบ */
.sec-ico { display: block; width: 100px; height: 100px; margin: 0 auto 20px; object-fit: contain; }
/* reach: plane เล็กในเฟรม (เส้นปะกินพื้นที่) → ขยายพิเศษให้เด่น */
.reach-head .sec-ico { width: 134px; height: 134px; }
.baw-ico { width: 104px; height: 104px; margin-bottom: 10px; }
.section-lead h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; letter-spacing: -.01em; }
.section-lead p { margin: 18px auto 0; max-width: 560px; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; }

/* ============================================================
   HUMAN BAND — รูปคนจริง (พื้นเข้มในรูป) + ฟองแชต บนพื้นขาว
   ============================================================ */
.human-band { position: relative; overflow: hidden; }
.human-glow { position: absolute; left: 4%; top: 16%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, var(--rose-soft), transparent 66%); filter: blur(28px); pointer-events: none; z-index: 0; }
.human-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.human-photo { position: relative; }
.human-photo img { width: 100%; border-radius: 26px; box-shadow: 0 50px 100px -44px rgba(20,15,10,.4); object-fit: cover; aspect-ratio: 4/5; }
.human-bubble { position: absolute; border-radius: 16px; padding: 12px 16px; font-size: 16px; font-weight: 600; box-shadow: 0 20px 40px -18px rgba(20,15,10,.3); }
.human-bubble-in { left: -22px; top: 14%; background: #fff; color: #16130f; border: 1px solid var(--line-2); }
.human-bubble-out { right: -18px; bottom: 18%; background: linear-gradient(120deg, var(--accent), var(--rose)); color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.human-bubble-out svg { width: 16px; height: 16px; }
.human-copy h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* ไฮไลต์หัวข้อใน section (ไม่ใช่ hero) = periwinkle เย็น — coral สงวนให้ hero + ปุ่ม เท่านั้น */
.human-copy h2 .hl, .section-lead h2 .hl, .ba-section h2 .hl, .section-head h2 .hl { color: var(--violet-text); background-image: none; }
.human-copy p { color: var(--muted); font-size: 19px; line-height: 1.7; margin-top: 18px; max-width: 460px; text-wrap: pretty; }
.human-points { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.human-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; color: var(--ink); }
.human-points li svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; color: var(--ok); }

/* ============================================================
   FEATURES → bento สีจัดบนขาว (2 ใบใหญ่ tint coral/violet)
   ============================================================ */
.feature-card { box-shadow: 0 14px 40px -30px rgba(20,15,10,.35); position: relative; overflow: hidden; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -28px rgba(20,15,10,.3); }
.feature-card:nth-child(1) { background: radial-gradient(130% 130% at 0% 0%, rgba(224,153,143,.20), transparent 52%), var(--card); border-color: rgba(224,153,143,.34); }
.feature-card:nth-child(2) { background: radial-gradient(130% 130% at 100% 0%, rgba(156,169,223,.22), transparent 52%), var(--card); border-color: rgba(156,169,223,.38); }
.fc-demo { background: var(--card-2); }

/* ============================================================
   SECTION HEAD — ใหญ่ขึ้น + kicker coral (typography role, Codex P2)
   ============================================================ */
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.16; color: var(--ink); text-wrap: balance; }
.section-head p { color: var(--muted); text-wrap: pretty; }
.kicker { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-text); margin-bottom: 14px; }

/* before/after: after เรืองแสง coral อ่อนบนขาว */
.ba-after { background: radial-gradient(130% 130% at 70% 0%, var(--violet-soft), transparent 52%), var(--card); }

/* how: เลข gradient coral→violet (คาแรกเตอร์) */
.step .num { background: linear-gradient(135deg, var(--violet), var(--rose)); color: #fff; box-shadow: 0 10px 22px -10px rgba(156,169,223,.5); }

/* ============================================================
   PERSONA — "เหมาะกับใคร" (รูปหน้าเป็นตัวอย่างใช้งาน)
   ============================================================ */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.persona-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 30px 26px; text-align: center; box-shadow: 0 14px 40px -30px rgba(20,15,10,.35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.persona-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -28px rgba(20,15,10,.28); border-color: rgba(156,169,223,.4); }
.persona-face { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line-2), 0 12px 26px -12px rgba(20,15,10,.3); background: linear-gradient(135deg, var(--violet), var(--rose)); }
.persona-card b { display: block; font-size: 19px; font-weight: 700; color: var(--ink); }
.persona-card .role { display: inline-block; margin: 8px 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--violet-text); background: var(--violet-soft); padding: 4px 12px; border-radius: 999px; }
.persona-card p { color: var(--muted); font-size: 16px; line-height: 1.6; }

/* ============================================================
   FINAL CTA — ไคลแม็กซ์สี (coral→violet gradient) แทนแถบดำ (พื้นขาวล้วน)
   ============================================================ */
/* Dear เคาะ (15 ก.ค.): CTA band ใช้แบบไล่สี (ครีมไม่เอา) */
.cta-band { background: linear-gradient(120deg, #E2564C 0%, #E0998F 46%, #9CA9DF 100%); border: none; box-shadow: 0 40px 100px -46px rgba(156,169,223,.55); }
.cta-band h2 { color: #fff; font-weight: 800; letter-spacing: -.01em; }
.cta-band p { color: rgba(255,255,255,.9); }
.cta-band .btn.primary { background: #fff; color: #16130f; }
.cta-band .btn.primary:hover { background: #f2efe9; }
.cta-band .btn.ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.cta-plane { filter: brightness(0) invert(1); }  /* logo ขาวบน gradient */

/* pricing teaser: การ์ด tint แทนข้อความลอย (Codex P2) */
.pricing-teaser { max-width: 900px; margin: 0 auto; padding: 34px 40px; background: linear-gradient(120deg, var(--rose-soft), var(--violet-soft)); border: 1px solid var(--line-2); border-radius: 24px; }

/* ============================================================
   HERO — เต็มจอพื้นขาว + ภาพวาดลายเส้นเต็มความสูงชิดขวา, ข้อความซ้าย
   ฟองแชตเด้ง pop วนลูปตลอด (ไม่นิ่ง)
   ============================================================ */
.hero-full { position: relative; padding: 0; min-height: min(90vh, 820px); display: flex; align-items: flex-start; overflow: hidden; text-align: left; background: #fff; }
.hero-full-inner { padding-top: clamp(64px, 11vh, 128px); }
/* ภาพเต็มความสูง ชิดขวา — พื้นรูปขาวกลืนพื้น section ขาว ไม่เห็นขอบ */
.hero-full-img { position: absolute; top: 0; bottom: 0; right: 0; height: 100%; width: auto; max-width: none; z-index: 0; pointer-events: none; }
.hero-full-inner { position: relative; z-index: 2; width: 100%; }
.hero-full .hero-copy { display: flex; flex-direction: column; gap: clamp(24px, 3.6vh, 34px); max-width: 540px; }
.hero-full .hero-copy h1 { color: var(--ink); margin-top: 8px; }
.hero-full .hero-copy h1 .hl { color: var(--violet-text); background-image: none; }
.hero-full p.lead { margin: 20px 0 0; max-width: 470px; color: var(--muted); }
.hero-full .hero-ctas { justify-content: flex-start; margin-top: 30px; }
/* ปุ่มรอง = periwinkle (คู่ปุ่มหลัก coral → พาเลตต์อยู่ในแถวปุ่ม, cohesive) */
.hero-full .btn:not(.primary) { background: var(--violet-soft); color: var(--violet-text); border: 1px solid rgba(156,169,223,.5); box-shadow: none; }
.hero-full .btn:not(.primary):hover { background: rgba(156,169,223,.2); border-color: rgba(156,169,223,.7); transform: translateY(-2px); }
.hero-full .hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; font-size: 16px; font-weight: 600; color: var(--muted); }
.hero-full .hero-trust li { display: flex; align-items: center; gap: 8px; }
.hero-full .hero-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }

/* ฟองแชตลอยเกาะตัวคน (ฝั่งขวา) — JS สลับบทสนทนาในพื้นที่คงที่ */
.hero-bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* ฟองแชตสไตล์ ManyChat: บทสนทนาต่อเนื่อง (ถามซ้าย → ตอบขวา ชิดกัน) เหมือนคนแชทจริง */
/* กรอบกว้างพอให้ทุกข้อความอยู่ "บรรทัดเดียว" (ไม่ตัดคำ) — ขยับมาทางซ้ายลอยเหนือตัวคน */
.mc-thread { position: absolute; top: 8%; right: 29%; width: 284px; height: 168px; transform: scale(0.82); transform-origin: center right; }
/* ฟองแชต = ฟอนต์จำลองแบบแอปแชตจริง (เหมือน mockup) ไม่ใช่ฟอนต์แบรนด์ */
.mc-thread, .mc-thread * { font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; }
.mc-chat { position: absolute; inset: 0; display: none; flex-direction: column; gap: 9px; }
.mc-chat.is-active { display: flex; }
.mc-msg { display: flex; align-items: flex-end; gap: 10px; }
.mc-msg-in { align-self: flex-start; max-width: 96%; }
/* ฟองฝั่งเรา (ตอบ) อยู่ชิดขวา ไม่ล้นไปคลุมฝั่งรูปโปรไฟล์ซ้าย — แยกซ้าย(เขา)/ขวา(เรา) ชัด */
.mc-msg-out { align-self: flex-end; max-width: 92%; }
.mc-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 6px 16px -6px rgba(20,15,10,.4); }
.mc-bubble { border-radius: 18px; padding: 11px 15px; font-size: 16px; font-weight: 600; line-height: 1.35; box-shadow: 0 22px 44px -20px rgba(20,15,10,.34); }
.mc-bubble-in { background: #2A2B31; color: #fff; border-bottom-left-radius: 6px; white-space: nowrap; }
.mc-bubble-out { color: #fff; border-bottom-right-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.mc-bubble-out .mc-text { display: block; white-space: nowrap; }
.mc-btn { display: block; text-align: center; border-radius: 11px; padding: 9px 14px; font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.mc-chat-periwinkle .mc-bubble-out { background: linear-gradient(135deg, var(--violet) 0%, #7480C4 100%); }
.mc-chat-periwinkle .mc-btn { background: rgba(255,255,255,.24); color: #fff; }
.mc-chat-cream .mc-bubble-out { background: var(--cream); color: var(--ink); }
.mc-chat-cream .mc-btn { background: #D9D0A8; color: var(--ink); }
.mc-chat-rose .mc-bubble-out { background: var(--rose); color: var(--ink); }
.mc-chat-rose .mc-btn { background: #B96F68; color: #fff; }

@media (max-width: 900px) {
  .hero-full { min-height: 0; display: flex; flex-direction: column; text-align: center; padding-top: clamp(28px, 5vh, 44px); }
  .hero-full-inner { order: 1; }
  .hero-full-img { order: 2; position: static; width: 100%; height: auto; margin-top: 18px; }
  .hero-full .hero-copy { max-width: 100%; align-items: center; }
  .hero-full .hero-ctas, .hero-full .hero-trust { justify-content: center; }
  .hero-full p.lead { margin-left: auto; margin-right: auto; }
  .hero-bubbles { display: none; }
}

/* ---------- reveal util — progressive enhancement (Codex P1) ---------- */
.v2-reveal { opacity: 1; transform: none; }
.motion-ready .v2-reveal { opacity: 0; transform: translateY(22px); }

/* ---------- Section 5: platform reach ---------- */
.reach { background: #F7F1DE; text-align: center; }
.section-head.center.reach-head { margin-bottom: 64px; }
.reach-head p { max-width: 650px; margin: 16px auto 0; font-size: 19px; line-height: 1.65; }
.reach-grid { max-width: 850px; margin: 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; text-align: left; }
.reach-card { display: block; min-height: 250px; padding: 34px 32px 46px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: 0 18px 48px -36px rgba(20,15,10,.35); transition: transform .2s, border-color .2s, box-shadow .2s; }
.reach-card:hover { transform: translateY(-5px); border-color: var(--violet); box-shadow: 0 28px 55px -36px rgba(48,54,100,.4); }
.plat-logo { width: 44px; height: 44px; }
.reach-card b { display: block; margin: 20px 0 8px; font-size: 24px; font-weight: 800; }
.reach-card p { margin: 0 0 26px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.reach-card > span { color: var(--violet-text); font-weight: 700; font-size: 16px; }
.reach-note { margin: 28px auto 0; color: var(--muted); font-size: 16px; }
@media (max-width: 760px) { .reach-grid { grid-template-columns: 1fr; } .reach-card { min-height: 0; } }

/* ---------- responsive ---------- */
/* ---------- Section 6: welcome to funnels ---------- */
.funnels { background: #fff; }
.section-head.center.funnels-head { margin-bottom: 64px; }
.funnels-shell { display: grid; grid-template-columns: minmax(340px,.8fr) minmax(500px,1.2fr); gap: clamp(28px,5vw,64px); align-items: center; padding: clamp(24px,4vw,52px); border: 1px solid rgba(156,169,223,.38); border-radius: 32px; background: #EEF0FA; }
.funnels-list { padding: 26px 26px 38px; background: #fff; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: 0 24px 54px -40px rgba(48,54,100,.4); }
.funnels-list h3 { margin: 0 0 14px; font-size: 20px; }
.funnel-tab { appearance: none; width: 100%; display: flex; justify-content: space-between; gap: 16px; padding: 15px 12px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.funnel-tab span { font-weight: 650; line-height: 1.4; }
.funnel-tab small { flex-shrink: 0; color: var(--violet-text); font-weight: 700; opacity: 0; transition: opacity .2s; }
.funnel-tab:hover, .funnel-tab.active { color: var(--violet-text); background: var(--violet-soft); border-radius: 12px; }
.funnel-tab:hover small, .funnel-tab.active small { opacity: 1; }
.funnels-list > .btn { margin-top: 22px; }
.funnels-preview { min-width: 0; display: grid; grid-template-columns: minmax(250px,290px) minmax(150px,1fr); gap: clamp(22px,3vw,38px); align-items: center; }
.funnels-phone { min-height: 500px; display: grid; place-items: center; padding: 28px; border-radius: 28px; background: rgba(255,255,255,.48); }
.funnel-panel { width: min(100%,420px); animation: demoIn .35s ease both; }
.funnel-panel .dm-window { min-height: 390px; }
.funnel-event, .funnel-contact { align-self: center; padding: 8px 13px; border-radius: 999px; color: var(--violet-text); background: var(--violet-soft); font-size: 14px; font-weight: 700; }
/* funnels phone = iPhone mockup (ให้เหมือน S4 ตามที่ Dear ขอ) */
.funnels-phone { display: flex; justify-content: center; align-items: center; min-height: 0; padding: 6px; background: none; }
.fphone { width: min(290px, 100%); }
.fphone .mcx-screen { display: flex; flex-direction: column; }
.fphone .funnel-panel { width: 100%; height: 100%; flex-direction: column; animation: demoIn .3s ease both; }
.fphone .funnel-panel.active { display: flex; }
.fphone-body { flex: 1; padding: 14px 13px 4px; overflow: hidden; display: flex; flex-direction: column; }
.fphone-body .dm-window { min-height: 0; padding: 0; gap: 10px; background: none; border: none; box-shadow: none; border-radius: 0; }
.fphone-body .dm-bubble { max-width: 84%; padding: 9px 14px; font-size: 14px; line-height: 1.4; border-radius: 18px; }
.fphone-body .dm-bubble.incoming { position: relative; margin-left: 33px; background: #efeff0; color: var(--ink); border-bottom-left-radius: 6px; }
.fphone-body .dm-bubble.incoming::before { content: ""; position: absolute; left: -33px; bottom: 0; width: 25px; height: 25px; border-radius: 50%; background: -webkit-image-set(url('/assets/av-fern.webp') type('image/webp'), url('/assets/av-fern.png') type('image/png')) center 30%/cover no-repeat; }
.fphone-body .dm-bubble.outgoing { background: #efeff0; color: var(--ink); border-bottom-right-radius: 6px; }
.fphone-body .funnel-event, .fphone-body .funnel-contact { font-size: 12px; padding: 6px 11px; }
.ig-inbox { flex: 1; overflow: hidden; padding: 8px 0; }
.ig-inbox-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 13px; }
.ig-inbox-row + .ig-inbox-row { border-top: 1px solid #f1f1f1; }
.ig-inbox-row .mcx-ava { width: 44px; height: 44px; box-shadow: none; }
.ig-inbox-row div { min-width: 0; }
.ig-inbox-row b { display: block; font-size: 12px; }
.ig-inbox-row p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ig-inbox-row time { align-self: start; padding-top: 2px; color: var(--muted); font-size: 11px; }
.ct-chip { display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-text); font-size: 11px; font-weight: 700; }
.funnel-captions { min-width: 0; }
.funnel-caption { margin: 0; color: var(--ink); font-size: clamp(17px,1.7vw,22px); font-weight: 700; line-height: 1.55; animation: demoIn .3s ease both; }

/* ---------- Section 7: three simple steps ---------- */
.how-new { background: #fff; }
.section-head.center.how-head { margin-bottom: 64px; }
.how-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.how-card { display: flex; flex-direction: column; padding: 14px 14px 36px; border: 1px solid var(--line-2); border-radius: 24px; background: #fff; box-shadow: 0 18px 48px -38px rgba(20,15,10,.3); overflow: hidden; }
.how-visual { min-height: 260px; margin-bottom: 24px; display: grid; place-items: center; border-radius: 17px; background: var(--violet-soft); }
.how-signup { background: linear-gradient(145deg, var(--violet-soft), var(--cream-soft)); }
.how-connect { background-color: #fff; background-image: linear-gradient(45deg,var(--violet-soft) 25%,transparent 25%),linear-gradient(-45deg,var(--violet-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--violet-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--violet-soft) 75%); background-size: 34px 34px; background-position: 0 0,0 17px,17px -17px,-17px 0; }
.social-pair { display: flex; gap: 14px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px -28px rgba(48,54,100,.4); }
.social-pair svg { width: 52px; height: 52px; }
.how-enable { align-content: center; gap: 10px; padding: 22px; }
.enable-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; border-radius: 12px; background: #fff; font-size: 15px; }
.enable-row b { padding: 5px 9px; border-radius: 999px; color: var(--violet-text); background: var(--violet-soft); font-size: 12px; }
.how-label { margin: 0 12px 7px; color: var(--violet-text); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.how-card h3 { margin: 0 12px; font-size: 24px; line-height: 1.35; }

/* FAQ and footer stay cool and light */
#faq .faq-item.open { border-color: rgba(156,169,223,.65); background: var(--violet-soft); }
#faq .faq-q::after, #faq .faq-item.open .faq-q { color: var(--violet-text); }
footer { background: linear-gradient(180deg,#fff,var(--violet-soft)); border-top: 1px solid rgba(156,169,223,.35); }

@media (max-width: 900px) {
  .funnels-shell { grid-template-columns: 1fr; }
  .how-cards { grid-template-columns: 1fr; }
  .how-card { max-width: 580px; width: 100%; margin-inline: auto; }
  .demo-grid { grid-template-columns: 1fr; gap: 30px; }
  .demo-phone { min-height: 480px; }
  .human-grid { grid-template-columns: 1fr; gap: 40px; }
  .human-photo { max-width: 360px; margin: 0 auto; }
  .human-bubble-in { left: -8px; }
  .human-bubble-out { right: -8px; }
  .persona-grid { grid-template-columns: 1fr; gap: 16px; }
  .marquee-track { animation-duration: 32s; }
}
@media (max-width: 600px) {
  .funnels-shell { padding: 14px; border-radius: 24px; }
  .funnels-list { padding: 18px 14px; }
  .funnel-tab { display: block; }
  .funnel-tab small { display: block; margin-top: 5px; }
  .funnels-preview { grid-template-columns: 1fr; justify-items: center; }
  .funnels-phone { width: 100%; min-height: 420px; padding: 10px; }
  .funnel-captions { max-width: 420px; text-align: center; }
  .funnel-panel .dm-window { min-height: 350px; }
  .how-visual { min-height: 220px; }
  .demo-tabs { padding-top: 34px; }
  .demo-heading { margin-bottom: 30px; }
  .demo-tab { padding: 16px 14px; grid-template-columns: 30px 1fr; }
  .demo-dots { padding-left: 58px; }
  .demo-phone { min-height: 430px; padding: 18px 12px; border-radius: 24px; }
  .dm-window, .reel-window { min-height: 340px; padding: 18px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .persona-card:last-child { grid-column: 1 / -1; max-width: 420px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .fchip { animation: none; }
  .motion-ready .v2-reveal { opacity: 1; transform: none; }
  .demo-panel { animation: none; }
  .funnel-panel { animation: none; }
}

/* (ลบบล็อก "ทดลองฟอนต์" ออก 23 ก.ค. — จบการทดลองแล้ว ฟอนต์ปัจจุบันดู brand/tokens.css) */

/* ---------- Funnel phone: dark IG formation เดียวกับ mockup ในแอป (Dear สั่ง 18 ก.ค.) ---------- */
.fphone .mcx-screen { background: #090909; color: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; font-size: 12px; font-weight: 400; }
.fphone .mcx-screen b { font-weight: 700; }
.fp-ic { width: 15px; height: 15px; flex: none; display: inline-block; vertical-align: middle; }
.fp-icw { width: 22px; height: 15px; }
.fp-status { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 6px; font-weight: 700; font-size: 12.5px; }
.fp-status span { display: inline-flex; align-items: center; gap: 4px; }
.fp-dmhead { flex: 0 0 auto; height: 46px; border-bottom: 1px solid #282828; display: grid; grid-template-columns: 16px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; }
.fp-dmhead b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fp-back { font-size: 20px; line-height: 1; font-weight: 700; }
.fp-ava { display: block; width: 28px; height: 28px; border-radius: 50%; background: #333 center 28%/cover no-repeat; flex: none; }
.fp-ava.sm { width: 24px; height: 24px; }
.fp-dmact { display: inline-flex; align-items: center; gap: 12px; }
.fp-dmact .fp-ic { width: 18px; height: 18px; }
.fp-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 13px 11px; }
.fp-bubble { max-width: 84%; padding: 9px 12px; border-radius: 16px; line-height: 1.45; font-size: 12.5px; }
.fp-bubble.page { position: relative; background: #262626; align-self: flex-start; margin-left: 33px; }
.fp-bubble.page::before { content: ""; position: absolute; left: -33px; bottom: 2px; width: 25px; height: 25px; border-radius: 50%; background: -webkit-image-set(url('/assets/av-shop.webp') type('image/webp'), url('/assets/av-shop.png') type('image/png')) center 28%/cover no-repeat; }
.fp-bubble.user { background: #7986d7; align-self: flex-end; }
.fp-bubble span { display: block; }
.fp-bubble button, .fp-card button { display: block; width: 100%; border: 0; border-top: 1px solid #555; background: transparent; color: #fff; padding: 8px 2px 0; margin-top: 9px; font: inherit; font-weight: 700; font-size: 12.5px; }
.fp-chip { align-self: center; background: #1c1c1e; color: #a5a5ab; border-radius: 99px; padding: 5px 13px; font-size: 11px; text-align: center; }
.fp-chip.ok { color: #7ddb9a; }
.fp-compose { flex: 0 0 auto; height: 48px; border-top: 1px solid #282828; display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: #101010; }
.fp-compose > b { width: 30px; height: 30px; border-radius: 50%; background: #6d7bda; display: grid; place-items: center; flex: none; color: #fff; }
.fp-compose > b .fp-ic { width: 16px; height: 16px; }
.fp-compose > span { flex: 1; border: 1px solid #444; border-radius: 99px; color: #8e8e93; padding: 7px 11px; min-width: 0; white-space: nowrap; overflow: hidden; }
.fp-compose > i { font-style: normal; display: inline-flex; align-items: center; gap: 10px; }
.fp-compose > i .fp-ic { width: 18px; height: 18px; }
/* ฉากสตอรี่ */
.fp-story { flex: 1; min-height: 0; position: relative; background: radial-gradient(circle at 55% 38%, #3a3a3a, #0a0a0a 66%); display: flex; align-items: center; justify-content: center; }
.fp-story-prog { position: absolute; top: 8px; left: 10px; right: 10px; height: 3px; background: #777; border-radius: 9px; }
.fp-story-prog i { display: block; width: 62%; height: 100%; background: #fff; border-radius: 9px; }
.fp-story-user { position: absolute; top: 19px; left: 12px; right: 12px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.fp-story-user span:last-child { margin-left: auto; }
.fp-story-offer { text-align: center; font-size: 15px; font-weight: 700; line-height: 1.65; background: rgba(17,17,17,.72); padding: 14px 18px; border-radius: 14px; max-width: 210px; }
.fp-story-reply { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; }
.fp-story-reply > span { flex: 1; border: 1px solid #aaa; border-radius: 99px; padding: 9px 13px; color: #fff; }
.fp-story-reply > b { display: inline-flex; align-items: center; gap: 10px; }
.fp-story-reply .fp-ic { width: 20px; height: 20px; }
/* การ์ดสินค้า */
.fp-card { position: relative; max-width: 78%; align-self: flex-start; margin-left: 33px; background: #262626; border-radius: 15px; }
.fp-card::before { content: ""; position: absolute; left: -33px; bottom: 2px; width: 25px; height: 25px; border-radius: 50%; background: -webkit-image-set(url('/assets/av-shop.webp') type('image/webp'), url('/assets/av-shop.png') type('image/png')) center 28%/cover no-repeat; }
.fp-card-img { height: 92px; border-radius: 15px 15px 0 0; background: linear-gradient(135deg, #F3EED9, #E0998F); display: grid; place-items: center; font-size: 34px; }
.fp-card b { display: block; padding: 8px 11px 0; font-size: 12.5px; }
.fp-card > span { display: block; padding: 2px 11px 0; color: #bbb; font-size: 11.5px; }
.fp-card button { width: calc(100% - 22px); margin: 9px 11px 10px; padding: 7px 0 0; }