/* ============================================================
   Zip AI shared design system — loaded LAST on every page.
   Single source of truth for: fonts (2 families), header/nav,
   vertical mobile menu, stat counters. Overrides per-page CSS.
   ============================================================ */

/* ---------- 2-font system: Noto Serif Thai (display) + Sarabun (everything else) ---------- */
:root{
  --font-display:"Sarabun",system-ui,sans-serif; /* legacy var: pages that used Kanit now get Sarabun */
  --font-serif:"Noto Serif Thai",Georgia,serif;
  --font-body:"Sarabun",system-ui,sans-serif;
  --font-mono:"Sarabun",system-ui,sans-serif;    /* retire IBM Plex Mono */
}
h1,h2,.h2{font-family:var(--font-serif)!important;letter-spacing:0}
h3,h4,h5,summary,button,.logo,.eyebrow{font-family:"Sarabun",system-ui,sans-serif!important;font-weight:700}

/* ---------- checkmark chip (replaces ✅ emoji) ---------- */
.tick{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;margin-right:.35em;border-radius:50%;background:var(--mint,#147a5c);color:#fff;font-size:.78em;font-weight:800;vertical-align:-.15em}

/* ---------- header (identical on all 11 pages) ---------- */
header{position:sticky!important;top:0;z-index:100;background:rgba(250,246,238,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line,#ddd5c4)}
header .nav{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;height:auto;flex-wrap:nowrap;padding:0 20px;max-width:1320px;margin:0 auto}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:1.5px solid var(--line,#ddd5c4);border-radius:10px;cursor:pointer}
.nav-burger span{display:block;height:2px;border-radius:2px;background:var(--ink,#1c2321);transition:transform .25s ease,opacity .25s ease}
header.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .nav-burger span:nth-child(2){opacity:0}
header.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* desktop nav */
@media (min-width:1201px){
  .nav-burger{display:none!important}
  .nav-pages{display:flex!important;flex-wrap:nowrap;flex:1;min-width:0;margin:0 12px;gap:clamp(6px,0.9vw,14px);justify-content:flex-end;position:static;flex-direction:row;overflow:visible}
  .nav-pages a{font-size:clamp(11px,1.05vw,13.5px);font-weight:800;white-space:nowrap;line-height:2;text-decoration:none;color:var(--ink,#1c2321);opacity:1;border:0;background:none;padding:0}
  .nav-pages a:hover{opacity:1}
  .nav-pages a.active{color:var(--sky,#0e6b5c);font-weight:800;opacity:1}
}

/* mobile/tablet: hamburger + VERTICAL stacked menu (Shane's requirement — never horizontal scroll) */
@media (max-width:1200px){
  header{position:sticky!important}
  .nav-burger{display:flex}
  .nav .btn-line{display:none}
  .nav-pages{display:none!important}
  header.nav-open .nav-pages{
    display:flex!important;flex-direction:column;align-items:stretch;
    position:absolute;left:0;right:0;top:100%;margin:0;padding:6px 16px 14px;gap:0;
    background:rgba(250,246,238,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line,#ddd5c4);box-shadow:0 18px 40px rgba(28,35,33,.12);
    max-height:calc(100vh - 62px);overflow-y:auto;overflow-x:hidden;order:0;width:auto
  }
  header.nav-open .nav-pages a{
    display:block;width:100%;font-size:17px;font-weight:600;line-height:1.4;
    color:var(--ink,#1c2321);text-decoration:none;opacity:1;
    background:none;border:0;border-bottom:1px solid var(--line,#ddd5c4);
    border-radius:0;padding:14px 4px;white-space:normal
  }
  header.nav-open .nav-pages a:last-child{border-bottom:0}
  header.nav-open .nav-pages a.active{color:var(--sky,#0e6b5c);font-weight:800}
}

/* ---------- stat counters: real numbers live in the HTML (crawlers see them);
   JS zeroes then animates only when scripting runs ---------- */
.cu{font-variant-numeric:tabular-nums}

/* ---------- AEO extraction sentence (hero) ---------- */
.aeo{margin:18px 0 4px;padding:10px 16px;border-left:3px solid var(--sky,#0e6b5c);color:var(--muted,#5c6660);font-size:15.5px;line-height:1.7;max-width:560px}

/* mobile: CTA must land above the fold — tighten hero, move AEO quote below the button */
@media (max-width:860px){
  .hero h1{font-size:31px;line-height:1.3;margin-bottom:8px}
  .hero p.lead{font-size:15.5px!important;line-height:1.6;margin-bottom:10px}
  .aeo{display:none}
  .hero .trust{margin-top:12px}
}

/* ---------- phone CTA (co-equal with LINE, Thai pattern) ---------- */
.btn-call{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-left:12px;padding:13px 22px;border:1.5px solid var(--line,#ddd5c4);border-radius:999px;background:var(--card,#fffdf8);color:var(--ink,#1c2321);text-decoration:none;font-weight:700;font-size:16.5px;line-height:1.2}
.btn-call small{font-weight:500;font-size:11.5px;color:var(--muted,#5c6660)}
.btn-call:hover{border-color:var(--sky,#0e6b5c)}
@media (max-width:860px){.btn-call{margin-left:0;margin-top:10px;width:100%;justify-content:center}}

/* ============================================================
   HORMOZI OFFER STACK (2026-07-21) + MDCC PROOF CARD SYSTEM
   ============================================================ */

/* ---------- Price-tag hanging badges (rounded label, nose-left) ---------- */
/* <span class="ptag ptag-red ptag-big"><span class="ptag-string"></span><span class="ptag-body"><span class="ptag-hole"></span>text</span></span> */
.ptag{display:inline-flex;align-items:center;transform:rotate(-6deg);filter:drop-shadow(0 3px 8px rgba(20,50,40,.28));vertical-align:middle;margin:0;line-height:1;flex-shrink:0}
.ptag-string{display:none!important}
.ptag-body{position:relative;margin-left:14px;padding:8px 16px 9px;border-radius:0 16px 16px 0;font-family:'Sarabun',system-ui,sans-serif;font-weight:800;font-size:13px;line-height:1.3;text-align:center}
.ptag-body::before{content:'';position:absolute;top:50%;left:-14px;transform:translateY(-50%);width:0;height:0;border-top:19px solid transparent;border-bottom:19px solid transparent;border-right:14px solid transparent}
.ptag-hole{position:absolute;top:50%;left:12px;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(255,255,255,.92)}
/* red = final/discount/free prices */
.ptag-red .ptag-body{background:#d92b2b;color:#fff}
.ptag-red .ptag-body::before{border-right-color:#d92b2b}
/* emerald kept for non-price contexts only */
.ptag-emerald .ptag-body{background:#0D8A5A;color:#fff}
.ptag-emerald .ptag-body::before{border-right-color:#0D8A5A}
/* amber kept for legacy — do not use on new cards */
.ptag-amber .ptag-body{background:#C9830F;color:#1c2321}
.ptag-amber .ptag-body::before{border-right-color:#C9830F}
/* bigger size for CTAs */
.ptag-big .ptag-body{font-size:16px;padding:10px 20px 12px;margin-left:16px}
.ptag-big .ptag-body::before{border-top-width:24px;border-bottom-width:24px;border-right-width:16px;left:-16px}
.ptag-big .ptag-hole{width:10px;height:10px;left:14px}
/* label lines inside a tag */
.ptag-free-label{font-size:18px;font-weight:900;display:block;line-height:1.1}
.ptag-val-strike{font-size:11px;opacity:.85;text-decoration:none;font-weight:600;display:block;margin-top:2px;color:rgba(255,255,255,.8)}

/* ---------- Value anchor chips (per line-item) ---------- */
/* HTML: <span class="val-chip">ปกติ <s>฿3,500</s></span> — ONLY number inside <s> */
.val-chip{display:inline-flex;align-items:center;background:#eef3fc;color:#1a56db;border:1px solid #b8cdf0;border-radius:5px;font-size:11.5px;font-family:'Sarabun',system-ui,sans-serif;font-weight:600;padding:2px 8px;white-space:nowrap;flex-shrink:0}
.val-chip s{text-decoration:line-through;color:#1a56db}

/* ---------- inc-val: flex row, chip/tag right-aligned ---------- */
.inc.inc-val{flex-wrap:wrap;align-items:flex-start;gap:8px 12px}
.inc.inc-val .inc-text{flex:1 1 0;min-width:0}
.inc.inc-val>.val-chip,.inc.inc-val>.ptag{flex:0 0 auto;align-self:center}
/* ptag-string hidden globally — no height override needed */
@media(max-width:500px){
  .inc.inc-val .inc-text{flex:1 1 calc(100% - 36px);min-width:calc(100% - 36px)}
  .inc.inc-val>.val-chip,.inc.inc-val>.ptag{flex:0 0 auto;margin-left:auto;margin-top:3px}
}

/* ---------- val-chip: ensure space between label and strikethrough number ---------- */
.val-chip s{margin-left:2px}

/* ---------- Inline free pill (no string, no tilt) for inline callout text ---------- */
.free-chip{display:inline-flex;align-items:baseline;gap:3px;background:#d92b2b;color:#fff;font-family:'Sarabun',system-ui,sans-serif;font-weight:700;font-size:12.5px;padding:2px 8px;border-radius:4px;vertical-align:middle;white-space:nowrap;line-height:1.5}
.free-chip .free-val{font-size:10.5px;font-weight:600;opacity:.88}

/* ---------- Total anchor row (blue anchor → red big price) ---------- */
/* HTML: รวมมูลค่ากว่า <s>฿11,000</s> <span class="val-arrow">→</span> ptag-red ptag-big */
.val-total-row{margin:16px 0 10px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;font-size:13px;color:var(--muted,#5c6660);background:#f0f4fd;padding:14px 18px;border-radius:10px}
.val-arrow{color:var(--muted,#5c6660);font-size:18px;font-weight:700;flex-shrink:0}
.val-strike{font-size:15px;font-weight:700;text-decoration:line-through;color:#1a56db}
/* Larger final price tag in total rows */
.val-total-row .ptag-big .ptag-body{font-size:22px;padding:12px 22px 14px;margin-left:18px}
.val-total-row .ptag-big .ptag-body::before{border-top-width:28px;border-bottom-width:28px;border-right-width:18px;left:-18px}
.val-total-row .ptag-big .ptag-hole{width:11px;height:11px;left:16px}
/* Footnote under CTA (payment terms) */
.sku-terms{font-size:12px;color:var(--muted,#5c6660);margin:8px 0 0;text-align:center;line-height:1.65;opacity:.9}

/* ---------- Capacity / scarcity note below CTA ---------- */
.cap-note{background:var(--sun-soft,#FFF9E8);border:1.5px dashed rgba(255,184,37,.6);border-radius:14px;padding:12px 18px;font-size:14.5px;margin:16px auto 0;max-width:520px;font-weight:600;text-align:center}

/* ---------- Savings badge (corner ribbon on .skubox) ---------- */
.skubox{position:relative}
.save-badge{position:absolute;top:-1.5px;right:-1.5px;background:#d92b2b;color:#fff;font-family:'Sarabun',system-ui,sans-serif;font-weight:800;font-size:12px;padding:7px 16px 7px 20px;border-radius:0 var(--radius,22px) 0 14px;line-height:1.4;text-align:center;box-shadow:-2px 2px 10px rgba(217,43,43,.35);z-index:2;white-space:nowrap}

/* ---------- Inline SVG icon normalization — sitewide bicon class ---------- */
/* Overrides any per-page <style> definition (shared.css loads last) */
.bicon{height:1em;width:1em;vertical-align:-0.125em;display:inline-block;flex-shrink:0;margin-right:.25em}

/* ---------- แพ็กคุ้ม chip for homepage service cards ---------- */
.pak-kum{display:inline-flex;align-items:center;background:#d92b2b;color:#fff;font-family:'Sarabun',system-ui,sans-serif;font-weight:700;font-size:11px;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:6px;line-height:1.4}

/* ---------- MDCC-style proof card — sitewide stats component ---------- */
/* Outer wrapper: one ivory card */
.mdcc-card{background:var(--card,#fffdf8);border:1.5px solid var(--line,#ddd5c4);border-radius:var(--radius,22px);box-shadow:var(--shadow,0 12px 40px rgba(28,35,33,.08));padding:24px 26px;text-align:left;margin:20px auto 0;max-width:720px}
/* Header row */
.mdcc-card__header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mdcc-card__title{font-family:var(--font-display,'Sarabun'),system-ui,sans-serif;font-size:17px;font-weight:700;color:var(--ink,#1c2321)}
.mdcc-card__note{font-size:11.5px;color:var(--muted,#5c6660);font-family:var(--font-mono,monospace)}
/* Tiles grid */
.mdcc-card__tiles{display:grid;gap:10px}
.mdcc-tiles-3{grid-template-columns:repeat(3,1fr)}
.mdcc-tiles-4{grid-template-columns:repeat(4,1fr)}
.mdcc-tiles-5{grid-template-columns:repeat(3,1fr)} /* 3+2, no orphan */
.mdcc-tiles-6{grid-template-columns:repeat(3,1fr)} /* 3×2 desktop */
/* Individual tiles */
.mdcc-tile{border-radius:12px;padding:14px 14px;background:var(--mint-soft,#e2ede4)}
.mdcc-tile .mdcc-num{font-family:var(--font-display,'Sarabun'),system-ui,sans-serif;font-weight:800;font-size:26px;line-height:1.15;margin-top:4px;color:var(--ink,#1c2321)}
.mdcc-tile .mdcc-lbl{font-family:var(--font-display,'Sarabun'),system-ui,sans-serif;font-size:12.5px;color:var(--muted,#5c6660);font-weight:500;line-height:1.4}
.mdcc-tile--hero{background:#0D8A5A!important}
.mdcc-tile--hero .mdcc-num{color:#fff}
.mdcc-tile--hero .mdcc-lbl{color:rgba(255,255,255,.85)}
/* Footnote */
.mdcc-card__foot{font-size:13px;color:var(--muted,#5c6660);margin-top:14px;line-height:1.65}
/* Responsive */
@media(max-width:640px){
  .mdcc-tiles-4{grid-template-columns:repeat(2,1fr)}
  .mdcc-tiles-3{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .mdcc-tiles-6{grid-template-columns:repeat(2,1fr)}
  .mdcc-tiles-5{grid-template-columns:repeat(2,1fr)}
  .mdcc-tiles-3{grid-template-columns:repeat(2,1fr)}
  .mdcc-tile .mdcc-num{font-size:22px}
  .ptag-big .ptag-body{font-size:15px;padding:9px 17px 11px}
  .val-total-row .ptag-big .ptag-body{font-size:18px;padding:10px 18px 12px}
  /* Stack total row: anchor centred, tag centred below */
  .val-total-row{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .val-arrow{display:none}
  .val-total-row>.ptag{margin-left:0}
}