/* ============================================================
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 (2026-08-13): Anuphan (display: h1-h3, buttons, th,
stat numerals) + IBM Plex Sans Thai (everything else). Measured off
/medical-tourism: two families, zero serif. --font-serif is the lever --
h1/h2 below read it with !important, so --font-display alone moves nothing. --- */
:root{
--font-display:"Anuphan",system-ui,sans-serif;
--font-serif:"Anuphan",system-ui,sans-serif;
--font-body:"IBM Plex Sans Thai","Sarabun",system-ui,sans-serif;
--font-mono:"IBM Plex Sans Thai","Sarabun",system-ui,sans-serif;
}
/* ============================================================
COLLAPSED DESIGN TOKENS — v3 (2026-08-13)
Derived from /medical-tourism (Shane: "i really like this page the most
of all", 13 ส.ค.) and cross-checked against the futuredesigner.io
teardown in design/WEBSITE-REFERENCE-SPEC-2026-08-13.md.
Where the two disagree, /medical-tourism wins — it is already in our
palette, already Thai, already shipped, already approved.
🔴 DECLARATION-ONLY. Every name below is NEW, so defining them here
changes NOTHING on any page that does not reference them. A page opts
in with `class="tok-v3"` on . index.html is the pilot; the other
28 pages are untouched until the pilot is approved.
NOT in this set on purpose: anything that paints a .lit box. Elevation
for .lit lives in glow3.css and only in glow3.css
(feedback_zipai_glow_is_one_shared_file). The gold ring was RETIRED
there on 2026-08-13 (Shane: "i like the flat clean look") and replaced
with a hairline + this same 4-layer stack. Nothing in this file
overrides a .lit box-shadow.
============================================================ */
:root{
/* --- radius: 4 steps. MT ships 10px cards / 20px media / 999 pills.
futuredesigner ships 4/12/16/999. MT wins on cards+media; the
4px chip step is kept because both use a small step for labels. --- */
--r3-chip : 6px; /* micro-labels, ticks, inline stamps */
--r3-card : 10px; /* every card / panel / box (MT .blk .pf .vs-col) */
--r3-media: 20px; /* photos, video frames, bands (MT .heroimg .figwide) */
--r3-pill : 999px; /* buttons, chips, FABs */
/* --- shadow: ONE 4-layer stack, ink-tinted, alpha ≤ .06 per layer.
The reference's 4-layer physics, translated for a bright ground:
layer COUNT + tint carries the depth, never alpha (spec §6).
Theirs peaks at α .60 — that reads as dirt on #FFFDF8. --- */
--sh3-1: 0 1px 2px rgba(28,35,33,.045),
0 8px 18px rgba(28,35,33,.045),
0 26px 42px rgba(28,35,33,.035),
0 62px 82px rgba(28,35,33,.025);
/* raised state — same 4 layers, pushed one step, still ≤ α .06 */
--sh3-2: 0 2px 4px rgba(28,35,33,.055),
0 12px 26px rgba(28,35,33,.055),
0 38px 60px rgba(28,35,33,.045),
0 84px 104px rgba(28,35,33,.03);
/* the ONE accent glow: LINE green CTA only. Gold stays reserved for
the glow3 ring, per spec §6 — mint for action, gold for the ring. */
--sh3-cta: 0 8px 26px rgba(6,199,85,.30);
/* --- motion: one easing, two durations. Reference measured 500ms
reveal / 150ms hover; ours ran 1150ms / 520ms. --- */
--ease3 : cubic-bezier(.33,.9,.28,1);
--dur3-reveal: 500ms;
--dur3-hover : 150ms;
/* --- rhythm: --sec-y already exists in premium.css and is already
driving `.premium section`. This adds the missing horizontal
half so section padding is ONE pair, not seven. --- */
--sec-x: clamp(20px,2.4vw,32px);
}
body{font-family:var(--font-body);font-size:1.02rem;line-height:1.625;font-variant-numeric:lining-nums tabular-nums}
h1{font-family:var(--font-serif)!important;font-weight:500!important;font-variant-numeric:lining-nums tabular-nums}
h2,.h2{font-family:var(--font-serif)!important;font-weight:600!important;letter-spacing:-0.02em;font-variant-numeric:lining-nums tabular-nums}
h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.15;letter-spacing:-0.01em}
/* ONE h2 size, 2026-08-13. Audit found /google-maps rendering h2 at TEN
distinct sizes from 12px to 44.8px, three of them smaller than its largest
h3 -- visual hierarchy contradicting document structure. Value is the
measured reference: 30px desktop / 21px mobile. Heading TAGS are unchanged;
this is a size fix, not a structure fix.
`.clients-wall h2` keeps its 12px eyebrow treatment on purpose -- it labels
a logo strip, it does not open a section. */
h2,.h2{font-size:clamp(21px,2.2vw,30px);line-height:1.25}
/* h3 moved to --font-display 2026-08-13: the reference runs h3 as Anuphan 800,
and /medical-tourism was the only page getting it (via a page-local rule).
Both tokens are sans now, so this is a family swap, not a serif reintroduction. */
h3,h4,h5,summary,button,.logo{font-family:var(--font-display)!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}
.logo{flex-shrink:0}
.nav-pages{display:flex!important;flex-wrap:wrap;flex:1;min-width:0;margin:0 10px;gap:clamp(4px,0.65vw,10px);justify-content:flex-end;position:static;flex-direction:row;overflow:visible}
.nav-pages a{font-size:clamp(10.5px,0.9vw,12.5px);font-weight:700;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}
/* .nav-more = vertical spoke links. Hidden on desktop so the visible nav stays at
11 (HEADER-SPEC rule 2, wrap/CRO cap). Visible ≤1200px because the hamburger
hides them behind a tap, where extra entries cost nothing. */
.nav-pages a.nav-more{display:none!important}
}
/* mobile/tablet: hamburger + VERTICAL stacked menu (Shane's requirement — never horizontal scroll) */
/* btn-line.sm stays visible alongside burger — logo(84px)+burger(44px)+btn-line(123px)+gaps=271px < 335px at 375px */
@media (max-width:1200px){
header{position:sticky!important}
.nav-burger{display:flex}
.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:10px 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}}
/* FIX 3 — CTA glow (2026-07-26) */
.btn-line:not(.sm){box-shadow:0 8px 26px rgba(6,199,85,.30)}
.btn-line:not(.sm):hover{box-shadow:0 14px 36px rgba(6,199,85,.45)}
/* ============================================================
HORMOZI OFFER STACK (2026-07-21) + MDCC PROOF CARD SYSTEM
============================================================ */
/* ---------- Price-tag hanging badges (rounded label, nose-left) ---------- */
/* text */
/* red = final/discount/free prices */
/* emerald kept for non-price contexts only */
/* amber kept for legacy — do not use on new cards */
/* bigger size for CTAs */
/* label lines inside a tag */
/* ---------- Value anchor chips (per line-item) ---------- */
/* HTML: ปกติ ฿3,500 — ONLY number inside */
.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}
/* ---------- val-badge: flat emerald free-value pill (s183 — replaces red ptag on the free-audit anchor) ---------- */
/* HTML: ฟรีมูลค่า ฿2,500 */
.val-badge{display:inline-flex;align-items:baseline;gap:9px;background:#e9f6f0;color:#0D8A5A;border:2px solid rgba(13,138,90,.45);border-radius:999px;font-family:'Sarabun',system-ui,sans-serif;font-weight:800;font-size:18px;padding:6px 20px 8px;white-space:nowrap;vertical-align:middle;line-height:1.4}
.val-badge b{font-size:22px;font-weight:900;color:#0D8A5A}
.val-badge .vb-val{font-size:16px;font-weight:800;opacity:.95}
@media(max-width:520px){.val-badge{font-size:15px;padding:4px 15px 6px}.val-badge b{font-size:18px}.val-badge .vb-val{font-size:13.5px}}
/* ---------- 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{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{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 ---------- */
/* ---------- Total anchor row (blue anchor → red big price) ---------- */
/* HTML: รวมมูลค่ากว่า ฿11,000 → ptag-red ptag-big */
.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 */
/* 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