/* Typography standard — ใช้หน้าแรกเป็นแม่แบบร่วมกันทุกหน้า
   โหลดหลัง CSS อื่นเสมอ: ฟอนต์/ขนาด/น้ำหนักอิงบทบาทเดียวกัน
   ข้อความเล็กสุด 13px ที่ขนาดตัวอักษรปกติของเบราว์เซอร์ (ใช้ rem เพื่อรองรับการขยาย)
   300 ยอดเงินหลัก · 400 เนื้อหา/ค่า · 500 metadata · 600 หัวข้อ/ปุ่ม */
html {
  --mos-type-family: var(--pc-sans, 'Inter', 'Noto Sans Thai', system-ui, sans-serif);
  --mos-type-min: .8125rem;
  --mos-type-caption: var(--mos-type-min);
  --mos-type-label: .875rem;
  --mos-type-body: 1rem;
  --mos-type-button: 1rem;
  --mos-type-section: 1.125rem;
  --mos-type-name: 1.125rem;
  --mos-type-page: 1.625rem;
  --mos-type-balance: 1.875rem;
  --mos-type-value: 1rem;
  --mos-type-normal: 400;
  --mos-type-meta: 500;
  --mos-type-strong: 600;
  --mos-type-money-weight: 300;
  --mos-type-muted: #a5a7a3;
}
@media (min-width: 640px) {
  html { --mos-type-name: 1.25rem; --mos-type-balance: 2.25rem; }
}
@media (min-width: 768px) {
  html { --mos-type-label: .9375rem; --mos-type-page: 2rem; }
}
html body[data-page] { font-family: var(--mos-type-family); font-size: var(--mos-type-body); font-weight: var(--mos-type-normal); line-height: 1.7; letter-spacing: normal; word-spacing: normal; }
/* ข้อความไทยในป้ายผสม/แถบประกาศต้องไม่รับ tracking ของตัวอังกฤษ */
html body[data-page] [lang="th"] { letter-spacing: normal; word-spacing: normal; }
html body[data-page] .mos-mixed-label { font-size: var(--mos-type-caption); font-weight: var(--mos-type-meta); line-height: 1.6; letter-spacing: normal; }
html body[data-page] .mos-tracked-latin { letter-spacing: .08em; }
html body[data-page] :is(strong, b) { font-weight: var(--mos-type-strong); }
html body[data-page] :is(.font-semibold, .font-bold, .font-black):where(:not(.text-foil):not(.chip):not(h1.font-deco)) { font-weight: var(--mos-type-strong); }

/* Utility sizes use the same scale instead of varying per page. Brand display is kept separate. */
html body[data-page] :is(.text-xs, [class~="text-[9px]"], [class~="text-[10px]"], [class~="text-[11px]"], [class~="text-[12px]"], [class~="text-[13px]"], small) {
  font-size: var(--mos-type-caption); line-height: 1.6;
}
html body[data-page] .text-sm { font-size: var(--mos-type-label); line-height: 1.6; }
html body[data-page] .text-base { font-size: var(--mos-type-body); line-height: 1.5; }
html body[data-page] .text-lg:where(:not(.text-foil):not(.chip)) { font-size: var(--mos-type-section); line-height: 1.5; }
html body[data-page] .text-xl:where(:not(.text-foil):not(.chip)) { font-size: 1.25rem; line-height: 1.4; }
html body[data-page] .text-2xl:where(:not(.text-foil):not(.chip)) { font-size: 1.5rem; line-height: 1.4; }
html body[data-page] .text-3xl:where(:not(.text-foil):not(.chip)) { font-size: 1.875rem; line-height: 1.3; }
html body[data-page] .text-4xl:where(:not(.text-foil):not(.chip)) { font-size: 2.25rem; line-height: 1.25; }
@media (min-width: 640px) {
  html body[data-page] [class~="sm:text-xl"]:not(.text-foil) { font-size: var(--mos-type-name); line-height: 1.4; }
}
html body[data-page] :is(.text-muted-foreground, .text-ivory-muted) { color: var(--mos-type-muted); }
html body[data-page] :is(input[data-slot="input"], select, textarea, code, .font-mono) {
  font-family: var(--mos-type-family); font-size: var(--mos-type-body); font-weight: var(--mos-type-normal); line-height: 1.5;
}
html body[data-page] label.font-display { font-size: var(--mos-type-label); font-weight: var(--mos-type-strong); line-height: 1.6; }
html body[data-page] :is(code, .font-mono) { overflow-wrap: anywhere; }
html body[data-page^="referral"] main .truncate.text-sm {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
html body[data-page] :is([data-slot="button"], form button[type="submit"], .pv-action, .pv-logout, .mos-logout) {
  font-family: var(--mos-type-family); font-size: var(--mos-type-button); font-weight: var(--mos-type-strong); line-height: 1.5;
}
html body[data-page] [role="tab"] { font-family: var(--mos-type-family); font-size: var(--mos-type-body); font-weight: var(--mos-type-meta); line-height: 1.5; }
html body[data-page] [role="tab"][aria-selected="true"] { font-weight: var(--mos-type-strong); }
html body[data-page] main h2 { font-family: var(--mos-type-family); font-size: var(--mos-type-section); font-weight: var(--mos-type-strong); line-height: 1.5; }
html body[data-page] main h3 { font-family: var(--mos-type-family); font-size: var(--mos-type-body); font-weight: var(--mos-type-strong); line-height: 1.5; }

/* Shared page heading: same geometry on every section page. */
html body[data-page] .mos-page-heading .mos-page-title { margin: 0; font-family: var(--mos-type-family); font-size: var(--mos-type-page); font-weight: var(--mos-type-meta); line-height: 1.4; letter-spacing: normal; }
html body[data-page] :is(.mos-page-eyebrow, .mos-heading-colon, .mos-heading-note, .mos-heading-back) { font-size: var(--mos-type-caption); line-height: inherit; }
html body[data-page] .mos-page-eyebrow { font-weight: var(--mos-type-meta); letter-spacing: .08em; }
html body[data-page] .mos-page-subtitle { display: inline; min-height: 0; font-size: var(--mos-type-label); font-weight: var(--mos-type-normal); line-height: inherit; letter-spacing: normal; }
html body[data-page] :is(.mos-heading-meta, .mos-heading-context) { font-size: var(--mos-type-label); line-height: 1.6; }
html body[data-page] .mos-heading-meta { min-height: calc(var(--mos-type-label) * 1.6 + 2px); }
@media (max-width: 767px) {
  html body[data-page] .mos-heading-context { min-height: calc(var(--mos-type-label) * 1.6 * 2); }
}

/* Home reference: large wallet amount, normal values, member name, labels. */
html body[data-page] main .text-foil.tabular-nums {
  font-family: var(--mos-type-family); font-size: var(--mos-type-balance); font-weight: var(--mos-type-money-weight); line-height: 1.25;
}
/* คอลัมน์กระเป๋าแคบช่วงคอมเล็ก: ให้สกุลเงินและยอดตัวอย่างอยู่บรรทัดเดียว */
@media (min-width: 1024px) and (max-width: 1199px) {
  html body[data-page="index"] main .mos-home-balance.text-foil.tabular-nums { font-size: clamp(1.625rem, 2.6vw, 2rem); white-space: nowrap; }
}
html body[data-page] main .font-deco:is(.tabular-nums, .text-gold-1, .text-brand):not(.text-foil):not(.chip):not([class*="tracking-[0.3em]"]) {
  font-family: var(--mos-type-family); font-size: var(--mos-type-value); font-weight: var(--mos-type-normal); line-height: 1.5;
}
html body[data-page] main .font-deco[class*="tracking-[0.3em]"] { font-size: var(--mos-type-caption); font-weight: var(--mos-type-meta); line-height: 1.6; }
html body[data-page="index"] main .font-display.text-ivory,
html body[data-page="profile"] [data-profile-view="v1"] .font-display.text-ivory,
html body[data-page] .profile-v2 .pv-member-name {
  font-family: var(--mos-type-family); font-size: var(--mos-type-name); font-weight: var(--mos-type-strong); line-height: 1.4;
}
html body[data-page="index"] main .font-deco.text-sm,
html body[data-page="profile"] [data-profile-view="v1"] .font-deco.text-sm,
html body[data-page] .profile-v2 .pv-phone { font-size: var(--mos-type-label); font-weight: var(--mos-type-meta); line-height: 1.6; letter-spacing: .08em; }
html body[data-page="index"] main a.rounded-3xl .font-display { font-size: var(--mos-type-label); font-weight: var(--mos-type-strong); line-height: 1.6; }

/* Account v2 uses exactly the same roles and sizes as home, including the smallest text. */
html body[data-page] .profile-v2 :is(.pv-eyebrow, .pv-member-top > span, .pv-tier, .pv-member-id, .pv-progress-label, .pv-joined, .pv-metric dt, .pv-service-copy small, .pv-concierge small, .pv-wallet-caption, .pv-balance small, .pv-signature) {
  font-family: var(--mos-type-family); font-size: var(--mos-type-caption); font-weight: var(--mos-type-normal); line-height: 1.6;
}
html body[data-page] .profile-v2 :is(.pv-eyebrow, .pv-tier, .pv-member-top > span) { font-weight: var(--mos-type-meta); }
html body[data-page] .profile-v2 :is(.pv-wallet-label, .pv-bank-name) { font-family: var(--mos-type-family); font-size: var(--mos-type-label); font-weight: var(--mos-type-normal); line-height: 1.6; }
html body[data-page] .profile-v2 :is(.pv-service-copy strong, .pv-concierge strong) { font-family: var(--mos-type-family); font-size: var(--mos-type-label); font-weight: var(--mos-type-strong); line-height: 1.6; }
html body[data-page] .profile-v2 .pv-service-copy :is(strong, small) { line-height: 1.5; letter-spacing: normal; }
html body[data-page] .profile-v2 :is(.pv-info-heading h2, .pv-services-heading h2, .pv-bank-heading) { font-family: var(--mos-type-family); font-size: var(--mos-type-section); font-weight: var(--mos-type-strong); line-height: 1.5; }
html body[data-page] .profile-v2 :is(.pv-metric dd, .pv-account-number, .pv-member-id strong) { font-family: var(--mos-type-family); font-size: var(--mos-type-value); font-weight: var(--mos-type-normal); line-height: 1.5; }
html body[data-page] .profile-v2 .pv-balance { font-family: var(--mos-type-family); font-size: var(--mos-type-balance); font-weight: var(--mos-type-money-weight); line-height: 1.25; }
html body[data-page] .profile-v2 .pv-currency { font-size: inherit; font-weight: inherit; }
html body[data-page] .profile-v2 .pv-avatar { font-family: var(--mos-type-family); font-size: 1.625rem; font-weight: var(--mos-type-strong); }
html body[data-page] .profile-v2 :is(.pv-wallet-label, .pv-phone, .pv-progress-label, .pv-member-id, .pv-joined, .pv-metric dt, .pv-service-copy small, .pv-concierge small, .pv-wallet-caption) { color: var(--mos-type-muted); }
html body[data-page="profile"] [data-profile-view="v1"] dl dt { font-size: var(--mos-type-caption); font-weight: var(--mos-type-normal); line-height: 1.6; }
html body[data-page="profile"] [data-profile-view="v1"] dl dd { font-size: var(--mos-type-value); font-weight: var(--mos-type-normal); line-height: 1.5; }
html body[data-page="profile"] [data-profile-view="v1"] dl > div:nth-child(2) dd { font-size: var(--mos-type-caption); line-height: 1.6; }
html body[data-page="profile"] [data-profile-view="v1"] .rounded-2xl .text-xs { font-size: var(--mos-type-label); }
html body[data-page="profile"] [data-profile-view="v1"] ul a > span.flex-1 { font-size: var(--mos-type-label); font-weight: var(--mos-type-strong); line-height: 1.6; }

/* Header / footer text is never smaller than the shared minimum, including mobile navigation. */
html body[data-page] header .animate-marquee { font-size: var(--mos-type-caption); font-weight: var(--mos-type-meta); line-height: 1.5; }
html body[data-page] header nav[aria-label="เมนูหลัก"] a { font-size: .875rem; font-weight: var(--mos-type-normal); line-height: 26px; }
html body[data-page] header nav[aria-label="เมนูหลัก"] a[aria-current="page"] { font-weight: var(--mos-type-meta); }
html body[data-page] .mos-heading-back { line-height: 1.6; }
html body[data-page] [role="dialog"] nav[aria-label="เมนูหลัก"] a { font-size: .9375rem; line-height: 1.6; }
html body[data-page] nav[aria-label="เมนูด่วน"] :is(a, span) { font-size: var(--mos-type-caption); font-weight: var(--mos-type-meta); line-height: 1.6; }
html body[data-page] nav[aria-label="เมนูด่วน"] .text-brand { font-weight: var(--mos-type-strong); }
html body[data-page] footer :is(p, nav) { font-size: var(--mos-type-caption); font-weight: var(--mos-type-normal); line-height: 1.7; }
html body[data-page] footer .text-ivory-muted { color: var(--mos-type-muted); }
html body[data-page] button.foil-frame .chip { font-size: var(--mos-type-caption); font-weight: var(--mos-type-meta); }
html body[data-page] .pp-toast { font-family: var(--mos-type-family); font-size: var(--mos-type-label); font-weight: var(--mos-type-meta); line-height: 1.6; }

/* Serif remains for the existing brand/logo/advertising display roles used on home. */
html body[data-page] :is(h1.font-deco, button.foil-frame .text-foil.font-deco) { font-size: var(--mos-type-balance); font-weight: 400; }