/* landing.css — หน้าแรก (public) + หน้าแพ็กเกจ
   พอร์ตจาก zeedsub-mockup-v5.html §LANDING
   ยึด design system: เส้น 1px แทนเงา · card 8px / ปุ่ม 5px · แดง #E31837 เท่านั้น

   ⚠️ เดิมไม่มีไฟล์นี้เลย → landing.php เขียน inline style ล้วน
      ซึ่งผิดกติกา (ธีมมืดใช้ไม่ได้ · แก้ทีต้องไล่แก้ใน PHP) และหน้าออกมาโล่ง */

/* ── แถบนำทางด้านบน ─────────────────────────────── */
.lnav{
  display:flex;align-items:center;gap:var(--s4);
  padding:18px 6vw;
  max-width:var(--maxw);margin:0 auto;
  border-bottom:1px solid var(--line);
}
/* ⚠️ .brand ใน layout.css มี padding:18px 18px 4px สำหรับ sidebar
   ต้อง reset ที่นี่ ไม่งั้นโลโก้เยื้องลงจากแนวปุ่มในแถบนำทาง
   (เดิม view ใส่ style="padding:0" inline — ย้ายมาไว้ที่นี่แทน) */
.lnav .brand{padding:0;font-size:18px;flex:none}

.lnav-links{
  display:flex;gap:22px;margin-left:18px;
  font-size:12px;color:var(--ink-2);letter-spacing:.04em;
}
.lnav-links a:hover{color:var(--red)}

/* ── กล่องเนื้อหาหลักของหน้า public ──────────────
   ให้ทุกหน้าตรงแนวกับโลโก้บนแถบเมนู (.lnav ใช้ค่าเดียวกัน) */
.pub-main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:32px 6vw 56px;
}

/* ⚠️ .hero/.lsection มี padding-inline ของตัวเองไว้ตอนยังไม่มีกล่องครอบ
   ตอนนี้ .pub-main จัดการให้แล้ว → ตัดของตัวเองออก ไม่งั้นเยื้องเข้าไปสองชั้น */
.pub-main .hero,
.pub-main .lsection{
  max-width:none;
  padding-left:0;
  padding-right:0;
}
/* section แรกไม่ต้องมี padding-top ซ้ำกับ .pub-main */
.pub-main > .hero:first-child,
.pub-main > .lsection:first-child{padding-top:0}

/* ── HERO ────────────────────────────────────────── */
.hero{
  max-width:var(--maxw);margin:0 auto;
  padding:64px 6vw;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;
  align-items:center;
  position:relative;
}
.hero > *{min-width:0}   /* กันข้อความยาวดันคอลัมน์จนล้นจอ */
.hero h1{
  font-size:clamp(30px,5.4vw,56px);
  line-height:1.06;letter-spacing:-.04em;
  margin-top:14px;
}
.hero h1 .r{color:var(--red)}
.hero p{color:var(--ink-2);font-size:16px;margin:18px 0 26px;max-width:440px;line-height:1.7}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}

.hero-stats{
  display:flex;
  margin-top:34px;
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
  overflow:hidden;
  max-width:440px;
}
.hero-stats > div{padding:14px 18px;flex:1;min-width:0}
.hero-stats > div + div{border-left:1px solid var(--line)}
.hero-stats .n{font-size:22px;font-weight:700;letter-spacing:-.02em}
.hero-stats .l{font-size:11px;color:var(--ink-2);letter-spacing:.06em;margin-top:2px}

/* ตัวอย่างซับเด้ง — โชว์ของจริงให้เห็นก่อนสมัคร
   ⚠️ พื้นเข้มคงที่ทั้ง 2 ธีม เพราะนี่คือ "จอวิดีโอ" ไม่ใช่พื้นผิว UI */
.hero-demo{
  aspect-ratio:9/16;max-width:270px;margin:0 auto;
  border-radius:var(--rad);
  position:relative;overflow:hidden;
  background:#151517;
  border:1px solid var(--line-2);
}
.hero-demo .scene{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:66px;opacity:.35;
}
.hero-demo .cap{
  position:absolute;bottom:17%;left:8%;right:8%;
  text-align:center;
  font-family:'Kanit','Prompt',sans-serif;   /* ฟอนต์ซับในวิดีโอ — อนุญาตตามสเปค */
  font-weight:700;font-size:22px;color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.6);
}
.hero-demo .cap .h{
  color:#FFD23F;display:inline-block;
  animation:capPop 2.4s ease-in-out infinite;
}
@keyframes capPop{
  0%,55%,100%{transform:scale(1)}
  62%,88%    {transform:scale(1.14)}
}

/* ── section ทั่วไปของหน้าแรก ──────────────────── */
.lsection{
  max-width:var(--maxw);margin:0 auto;
  padding:56px 6vw;
  border-top:1px solid var(--line);
  position:relative;
  /* ghost word เป็น absolute + nowrap → ล้นกรอบได้
     ⚠️ ใช้ clip ไม่ใช่ hidden — clip ไม่สร้าง scroll container จึงไม่พัง sticky */
  overflow-x:clip;
}
/* section แรกของหน้าไม่ต้องมีเส้นบน — ไม่งั้นซ้อนกับเส้นใต้แถบนำทาง */
.lsection-first{border-top:none}
.lsection .sh{position:relative;text-align:center;margin-bottom:40px}
/* ⚠️ ghost ใช้ภาษาอังกฤษเท่านั้น (ตัวไทย outline อ่านไม่ออก) */
.lsection .sh .ghost{
  left:50%;transform:translateX(-50%);top:-30px;
  font-size:clamp(52px,11vw,130px);opacity:.85;
}
.lsection .sh .klabel{display:flex;justify-content:center}
.lsection h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;position:relative;z-index:1;margin-top:20px}
.lsection .sub{color:var(--ink-2);margin:10px 0 0;position:relative;z-index:1;font-size:14px}
.lsection-cta{text-align:center;margin-top:36px}

/* ── ฟีเจอร์ / ขั้นตอน ────────────────────────────
   ⚠️ เส้นคั่นวาดด้วย box-shadow บนตัว item + overflow:hidden ที่ container
      ❌ mockup ใช้ nth-child(-n+4) ซึ่งถูกเฉพาะตอนมี 4 คอลัมน์พอดี
         พอ auto-fit ยุบเหลือ 2 หรือ 1 คอลัมน์ เส้นลอยผิดตำแหน่งทันที
      ❌ gap:1px + พื้นสีเส้น ก็ไม่ได้ — ช่องที่เหลือว่างกลายเป็นแถบเทาใหญ่
      ✅ วิธีนี้ถูกเองทุกจำนวนใบและทุก breakpoint */
.feat-grid,
.steps4{
  display:grid;
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
  overflow:hidden;
}
.feat-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.feat,
.lstep{
  padding:24px;background:var(--panel);min-width:0;
  box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line);
}
.feat .fn{font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.feat .ic{font-size:22px;color:var(--red);margin:12px 0}
.feat h4{font-size:15px;margin-bottom:6px}
.feat p{color:var(--ink-2);font-size:13px;margin:0;line-height:1.65}

.lstep .no{color:var(--red);font-weight:600;font-size:22px;letter-spacing:-.02em}
.lstep h4{font-size:15px;margin:12px 0 6px}
.lstep p{color:var(--ink-2);font-size:13px;margin:0;line-height:1.65}

/* ── FAQ (หน้าแพ็กเกจ) ────────────────────────── */
.faq{
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
  overflow:hidden;
}
.faq details + details{border-top:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;
  font-size:14px;font-weight:600;color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"\F282";                      /* bi-chevron-down */
  font-family:'bootstrap-icons';
  font-size:12px;color:var(--ink-3);
  transition:transform .2s var(--ease);
  flex:none;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{background:var(--panel-2)}
.faq p{margin:0;padding:0 18px 16px;font-size:13.5px;line-height:1.75;color:var(--ink-2)}

/* ── สลับรายเดือน/รายปี ──────────────────────── */
.price-toggle{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:var(--rad-s);
  overflow:hidden;
  margin:0 auto 28px;
}
.price-toggle button{padding:9px 18px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--panel)}
.price-toggle button + button{border-left:1px solid var(--line)}
.price-toggle button.on{background:var(--red);color:#fff}
.price-toggle-wrap{display:flex;justify-content:center}

/* ── ท้ายหน้า ─────────────────────────────────── */
.lfoot{
  border-top:1px solid var(--line);
  padding:28px 6vw;
  text-align:center;
  color:var(--ink-3);
  font-size:12px;
  letter-spacing:.04em;
}
.lfoot-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.lfoot-links a:hover{color:var(--red)}

/* ── มือถือ ───────────────────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:44px 6vw;gap:32px}
  /* ตัวอย่างยังโชว์อยู่ แค่ย่อลง — mockup ซ่อนทิ้ง แต่นี่คือจุดขายหลักของหน้า
     คนส่วนใหญ่เข้าจากมือถือ ซ่อนแล้วเหลือแต่ตัวหนังสือ */
  .hero-demo{max-width:200px}
  .hero-stats{max-width:none}
}
@media (max-width:600px){
  /* เมนูกลางซ่อนบนจอแคบ — ปุ่มเข้าสู่ระบบ/เริ่มฟรี สำคัญกว่า */
  .lnav-links{display:none}
  .lnav{gap:10px;padding:14px 5vw}
  .lsection{padding:40px 5vw}
  .hero .cta .btn{flex:1;min-width:150px;justify-content:center}
  .hero-stats > div{padding:12px}
  .hero-stats .n{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  .hero-demo .cap .h{animation:none}
}