/* ==========================================================================
   THFX — Design System
   Single stylesheet, no framework, no build step.
   Tokens: architecture §7.1 (color) / §7.2 (type) / §7.3 (grid & breakpoints)

   Thai typography rules enforced globally (§7.2):
     1. never  word-break: break-all  -> uses normal + overflow-wrap: break-word
     2. never  overflow:hidden / fixed height on text containers -> min-height + padding
     3. never  text-overflow: ellipsis
     4. never  letter-spacing / text-transform: uppercase on Thai copy
     5. never  text-align: justify

   Breakpoints (must stay in sync with media queries below):
     XS 360  | SM 480 | MD 768 (table -> card switch) | LG 1024 (desktop nav) | XL 1280
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Metric-matched Thai fallback
   Noto Sans Thai is loaded with font-display: swap, so the fallback paints
   first. Without a size-adjust over-ride the fallback has different vertical
   metrics and the Thai text reflows on swap (a much bigger CLS than Latin).
   The numbers below are Noto Sans Thai's own metrics (ascender 1069,
   descender 293, unitsPerEm 1000) applied to the local fallback face.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'ThaiMetricFallback';
  src: local('LeelawUI'), local('Leelawadee UI'), local('Tahoma'), local('Sarabun');
  size-adjust: 98%;
  ascent-override: 106.9%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* — color — */
  --c-primary: #0F2B5B;
  --c-primary-dark: #081B3A;
  --c-primary-soft: #E8EEF7;
  --c-accent: #0FA37F;
  --c-accent-hover: #0C8A6B;
  --c-accent-soft: #E6F5F0;
  /* WCAG 2.2 · 1.4.3 text contrast (a11y fix). --c-accent (#0FA37F) only reaches
     3.20:1 against white and 2.85:1 against --c-accent-soft, i.e. it fails the
     4.5:1 minimum wherever it is used as a *text* colour or as a filled-button
     background behind white text. --c-accent-ink is the same hue, darkened along
     the same RGB ratio (no hue shift, no new colour): 5.30:1 on white and
     4.71:1 on --c-accent-soft. Never use --c-accent for text or for a fill that
     carries white text; use this token instead. Decorative uses (icons, borders,
     the brand tick) keep --c-accent. */
  --c-accent-ink: #0B7A5F;
  /* Darker still, for the hover state of accent-filled buttons: the inherited
     .btn:hover rule would otherwise lighten the button on hover
     (--c-accent-hover #0C8A6B = 4.32:1 with white) and undo the fix. 7.05:1. */
  --c-accent-ink-hover: #08654D;
  /* USAGE CONSTRAINT — do not delete, and never merge the two greens.
     --c-accent-ink solves exactly one problem: text, or a solid fill carrying
     white text, on a LIGHT surface. On a dark surface the arithmetic changes:
       #0B7A5F (ink)       on #081B3A (--c-primary-dark) = 3.23:1  → clears the
                           3:1 non-text minimum (1.4.11) by 0.23, nothing more
       #0B7A5F (ink)       on #0F2B5B (--c-primary)      = 2.61:1  → fails 3:1
       #08654D (ink-hover) on #081B3A                    = 2.43:1  → fails 3:1
     So on dark surfaces prefer --c-accent (light green) with a dark label, and
     make the hover state LIGHTER, not darker. Never put white text on --c-accent
     (3.20:1). The one current deviation is .cta-block — see section 14 for the
     measured numbers. Merging --c-accent and --c-accent-ink into one token would
     drop light-surface text contrast back to 3.20:1 site-wide: the two greens are
     not a legacy artefact, they are the 1.4.3 fix. */
  --c-bg: #FFFFFF;
  --c-bg-alt: #F5F7FA;
  --c-text: #1F2937;
  --c-text-2: #5B6472;
  --c-border: #E3E8EF;
  --c-warn-bg: #111827;
  --c-warn-text: #FFFFFF;
  --c-warn-icon: #F5A623;
  --c-focus: #1D4ED8;

  /* — type — */
  --font-th: 'Noto Sans Thai', 'ThaiMetricFallback', 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Inter', 'Noto Sans Thai', 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-body: 1rem;          /* 16px, never smaller on mobile */
  --lh-body: 1.75;
  --fs-h1: 1.75rem;         /* 28px mobile */
  --fs-h2: 1.375rem;        /* 22px mobile */
  --fs-h3: 1.125rem;
  --fs-sm: 0.875rem;        /* 14px */
  --fs-xs: 0.8125rem;       /* 13px */
  --fs-2xs: 0.75rem;        /* 12px */

  /* — space / radius / elevation — */
  --pad-x: 1rem;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);

  /* — layout — */
  --container: 1200px;
  --measure: 720px;         /* readable body column */
  --header-h: 64px;
  --header-h-lg: 72px;
  --cta-bar-h: 56px;
  --tap: 44px;              /* minimum touch target */
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-th);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  /* Thai: browser dictionary line breaking — never break-all */
  word-break: normal;
  overflow-wrap: break-word;
  line-break: loose;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  color: var(--c-primary);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.4; }
h3 { font-size: var(--fs-h3); line-height: 1.45; }
h4 { font-size: 1rem; line-height: 1.5; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Hover is a text state too: --c-accent-hover (#0C8A6B) is only 4.32:1 on white,
   below the 4.5:1 AA minimum. --c-accent-ink = 5.30:1 on white / 4.94:1 on
   --c-bg-alt. --c-accent-hover stays in use for *backgrounds* and borders,
   where the 3:1 non-text threshold applies. */
a:hover { color: var(--c-accent-ink); }

strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* --c-focus #1D4ED8 is 6.70:1 on white but only 2.55:1 on the dark blocks
   (#081B3A), under the 3:1 needed to identify the focus state (1.4.11). The ring
   sits 2px outside the control, i.e. on the dark block itself, so switch it to
   white there (17.10:1). Covers every container that paints --c-primary-dark:
   .cta-block (16 pages), .site-footer (26 pages, ~390 links) and .toast
   (2.07:1, one focusable close button). Does not affect light-surface pages. */
.cta-block :focus-visible,
.site-footer :focus-visible,
.toast :focus-visible { outline-color: #FFFFFF; }

/* numbers align in tables / metrics */
.num, .dtable, .metric__value, .calc__result-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 200;
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-primary-dark); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: #cfe0f7; }

.section-head { max-width: var(--measure); margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  /* 4.71:1 on --c-accent-soft (was 2.85:1 with --c-accent) */
  color: var(--c-accent-ink);
  background: var(--c-accent-soft);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}

.lead { font-size: 1.0625rem; color: var(--c-text-2); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.muted { color: var(--c-text-2); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); line-height: 1.6; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Buttons  (CtaButton — 3 sizes x 2 types, §3.5)
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: #fff;
  --btn-bd: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0.7rem 1.15rem;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  /* Thai: allow the label to wrap, never clip it */
  white-space: normal;
  overflow-wrap: break-word;
}
.btn:hover { --btn-bg: var(--c-accent-hover); --btn-bd: var(--c-accent-hover); color: #fff; }
.btn:active { transform: translateY(1px); }

/* Filled CTA: white on --c-accent-ink = 5.30:1 (was 3.20:1 on --c-accent).
   Hover must go darker, not lighter — .btn:hover targets --c-accent-hover,
   which is lighter than this fill and would drop the ratio back to 4.32:1. */
.btn--primary { --btn-bg: var(--c-accent-ink); --btn-bd: var(--c-accent-ink); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--c-accent-ink-hover); --btn-bd: var(--c-accent-ink-hover); --btn-fg: #fff; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-primary); --btn-bd: #C6D2E4; }
.btn--outline:hover { --btn-bg: var(--c-primary-soft); --btn-fg: var(--c-primary); --btn-bd: var(--c-primary); }
.btn--onDark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.45); }
.btn--onDark:hover { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; --btn-bd: #fff; }

.btn--lg { min-height: 52px; padding: 0.85rem 1.5rem; font-size: 1.0625rem; }
.btn--md { min-height: 48px; }
.btn--sm { min-height: var(--tap); padding: 0.5rem 0.85rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn__icon { width: 18px; height: 18px; stroke-width: 1.75; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  min-height: var(--tap);      /* keeps the tap area usable */
  align-content: center;
}
.link-arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. RiskBar  (§6.1 — first element in <body>, dismissible per session)
   -------------------------------------------------------------------------- */
.riskbar {
  background: var(--c-warn-bg);
  color: var(--c-warn-text);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.riskbar__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding-block: 6px;
  max-width: var(--container);
}
.riskbar__icon {
  width: 16px; height: 16px;
  margin-top: 3px;
  color: var(--c-warn-icon);
  stroke-width: 1.75;
}
.riskbar__text { margin: 0; flex: 1 1 auto; }
.riskbar__text strong { font-weight: 700; color: var(--c-warn-icon); }
.riskbar__text a { color: #fff; text-decoration: underline; }
.riskbar__close {
  flex: none;
  width: 28px; height: 28px;
  margin: -2px -6px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #CBD5E1;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.riskbar__close:hover { color: #fff; background: rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   6. Header + desktop nav  (72px -> 64px after 120px scroll)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow .18s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-2); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
  max-width: var(--container);
}
.site-header.is-scrolled .header-inner { min-height: 56px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--c-primary);
  flex: none;
  min-height: var(--tap);
}
.brand:hover { color: var(--c-primary); }
.brand__mark { width: 28px; height: 28px; stroke-width: 1.75; }
.brand__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--c-accent); }

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { color: var(--c-primary); background: var(--c-bg-alt); }
.nav__link.is-current { color: var(--c-primary); font-weight: 700; }
.nav__link.is-current::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  border-radius: 2px;
  background: var(--c-accent);
}
.nav__link { position: relative; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  flex: none;
}

.lang-switch {
  display: none;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.lang-switch:hover { color: var(--c-primary); background: var(--c-bg-alt); }
.lang-switch__on { color: var(--c-primary); }
.lang-switch__sep { color: var(--c-border); font-weight: 400; }

.nav__cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-primary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Mobile menu  (§3.4 — max 2 levels, legal links at the very bottom)
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: #fff;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--pad-x);
  border-bottom: 1px solid var(--c-border);
  flex: none;
}
.mobile-menu__title { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-2); margin: 0; }
.mobile-menu__close {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-primary); font-size: 24px; line-height: 1;
  border-radius: var(--r-sm);
}
.mobile-menu__close:hover { background: var(--c-bg-alt); }

.mobile-menu__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-3) var(--pad-x) var(--sp-8);
  -webkit-overflow-scrolling: touch;
}
.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.mobile-menu__list a:hover { color: var(--c-primary); }
.mobile-menu__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}
.mobile-menu__group > summary::-webkit-details-marker { display: none; }
.mobile-menu__group > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.mobile-menu__group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.mobile-menu__sublist { margin: 0 0 var(--sp-2); padding: 0 0 0 var(--sp-3); list-style: none; }
.mobile-menu__sublist a { min-height: 46px; font-weight: 400; font-size: 0.9375rem; border-bottom: 0; }

.mobile-menu__divider { height: 1px; background: var(--c-border); margin: var(--sp-4) 0; }
.mobile-menu__legal { margin: 0; padding: 0; list-style: none; }
.mobile-menu__legal a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
}
.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}
.mobile-menu__cta { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--sp-6) var(--sp-7); }
.hero__grid { display: grid; gap: var(--sp-5); }
.hero h1 { margin-bottom: var(--sp-3); }
.hero__sub {
  font-size: 1.0625rem;
  color: var(--c-text-2);
  max-width: 34em;
  margin-bottom: var(--sp-5);
}
.hero__actions { margin-bottom: var(--sp-5); }
.hero__footnote {
  font-size: var(--fs-2xs);
  color: var(--c-text-2);
  margin-top: var(--sp-4);
  max-width: 40em;
}

/* inline SVG UI mock — neutral skeleton, no P/L numbers, no rising candles */
.hero__visual {
  order: -1;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.hero__visual svg { width: 100%; height: auto; }
.hero__visual figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--c-text-2);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. TrustChips
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 12px;
  margin: 0;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.5;
}
.chip svg { width: 16px; height: 16px; color: var(--c-accent); stroke-width: 1.75; }
.chip--plain { background: #fff; }

/* --------------------------------------------------------------------------
   10. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.card__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  flex: none;
}
.card__icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
.card h3 { margin: 0; font-size: 1.0625rem; }
.card p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.7; }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
}
.card__tag {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  line-height: 1.6;
}

.note-card {
  border-left: 3px solid var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.note-card strong { color: var(--c-primary); }
.note-card--warn { border-left-color: var(--c-warn-icon); background: #FFF7E8; }

/* --------------------------------------------------------------------------
   11. StepList
   -------------------------------------------------------------------------- */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-6);
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--c-border);
}
.step:last-child::before { display: none; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 600;
  flex: none;
  z-index: 1;
}
.step__title { margin: 4px 0 var(--sp-2); font-size: 1.0625rem; }
.step__body { min-width: 0; }
.step__body p { font-size: 0.9375rem; line-height: 1.75; }
.step__notice {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text);
}
.step__notice svg { width: 16px; height: 16px; margin-top: 3px; color: var(--c-accent); stroke-width: 1.75; }
.step__notice strong { color: var(--c-primary); }

/* phone screenshot stand-in (pure CSS/SVG, no raster asset) */
.shot {
  margin: var(--sp-3) 0 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  padding: var(--sp-3);
}
.shot svg { width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.shot figcaption { margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--c-text-2); text-align: center; line-height: 1.5; }

/* 3-step overview on the home page */
.step-mini {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, transform .15s ease;
  min-height: var(--tap);
}
.step-mini:hover { border-color: var(--c-accent); transform: translateY(-1px); color: inherit; }
.step-mini__top { display: flex; align-items: center; gap: var(--sp-2); }
.step-mini__num {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: #fff;
  background: var(--c-primary);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  line-height: 1.6;
}
.step-mini h3 { margin: 0; font-size: 1rem; }
.step-mini p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
/* 5.30:1 on #FFFFFF (was 4.32:1 with --c-accent-hover) */
.step-mini__go { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; color: var(--c-accent-ink); }

/* --------------------------------------------------------------------------
   12. DataTable  — table ≥768px, cards <768px (no horizontal scroll)
   -------------------------------------------------------------------------- */
.table-wrap { margin-bottom: var(--sp-3); }

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.dtable caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  padding-bottom: var(--sp-2);
  line-height: 1.6;
}
.dtable th, .dtable td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}
.dtable thead th {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1.5;
  border-bottom: 1px solid #D3DEEC;
}
.dtable tbody tr:last-child th,
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody th { font-weight: 500; color: var(--c-text); }
.dtable tbody tr:nth-child(even) { background: #FBFCFE; }
.dtable .is-good { color: var(--c-accent-ink); font-weight: 500; }

@media (max-width: 767px) {
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; width: 100%; }
  .dtable { border: 0; background: transparent; border-radius: 0; }
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable tbody tr {
    background: #fff !important;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
  }
  .dtable tbody tr:last-child { margin-bottom: 0; }
  .dtable tbody th {
    padding: 0 0 var(--sp-2);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-2);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1.5;
  }
  .dtable tbody td {
    padding: 4px 0;
    border-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--sp-3);
    justify-content: space-between;
  }
  .dtable tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    font-weight: 500;
  }
  .dtable tbody td > * { flex: 0 1 auto; }
}

/* --------------------------------------------------------------------------
   13. FAQ accordion (native <details>, works without JS)
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: visible;   /* never clip Thai stacked vowels */
}
.faq-item[open] { border-color: #C6D2E4; box-shadow: var(--shadow-1); }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-primary);
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-top: 8px;
  margin-left: auto;
  border-right: 2px solid var(--c-text-2);
  border-bottom: 2px solid var(--c-text-2);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: 12px; }
.faq-item > summary:hover { color: var(--c-accent-ink); }
.faq-item__body {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--c-text);
}
.faq-item__body p:first-child { margin-top: 0; }

.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 6px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--c-primary);
}
.anchor-nav a:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }

/* --------------------------------------------------------------------------
   14. CtaBlock (dark closing block)
   -------------------------------------------------------------------------- */
/* Measured, not guessed — and the one place the two-green rule bites.
   Surface here is --c-primary-dark #081B3A (not --c-primary #0F2B5B). A
   .btn--primary placed in this block fills with --c-accent-ink #0B7A5F, so the
   button's own boundary measures 3.23:1 (passes 1.4.11 by 0.23); on hover the
   fill moves to --c-accent-ink-hover #08654D = 2.43:1, under the 3:1 minimum.
   14 pages did this at the time of writing. The white label stays at 5.30:1 /
   7.05:1, so nothing becomes unreadable — only the button outline dissolves into
   the block on hover. FIXED below by switching this surface to a #FFFFFF fill
   (17.10:1 boundary, 5.30:1 label) with an --c-accent-soft hover (15.21:1 /
   4.71:1). Rejected alternative: --c-accent #0FA37F fill + #081B3A label passes
   1.4.11 (5.35:1) but its #0C8A6B hover drops the label to 3.96:1, breaking
   1.4.3 — don't reintroduce it. Do not "fix" either state by lowering the
   threshold. Scoped to .cta-block on purpose: the 130 light-surface
   .btn--primary instances elsewhere are untouched. */
.cta-block {
  background: var(--c-primary-dark);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.cta-block h2 { color: #fff; margin-bottom: var(--sp-2); }
.cta-block p { color: #C7D5E8; max-width: 44em; margin: 0 auto var(--sp-4); font-size: 0.9375rem; }
.cta-block .btn-row { justify-content: center; }
/* Dark-surface CTA: see the measurement note above section 14. */
.cta-block .btn--primary { --btn-bg: #FFFFFF; --btn-bd: #FFFFFF; --btn-fg: var(--c-accent-ink); }
.cta-block .btn--primary:hover { --btn-bg: var(--c-accent-soft); --btn-bd: var(--c-accent-soft); --btn-fg: var(--c-accent-ink); }
.cta-block__note { margin-top: var(--sp-3); font-size: var(--fs-2xs); color: #9FB3CE; }

/* inline CTA strip between steps */
.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--c-accent-soft);
  border: 1px solid #C9E9DF;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-block: var(--sp-5);
}
.cta-strip p { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--c-primary); }
.cta-strip .btn { flex: none; }

/* --------------------------------------------------------------------------
   15. SourceNote / disclosure
   -------------------------------------------------------------------------- */
.sourcenote {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--c-bg-alt);
  border: 1px dashed #D3DEEC;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--c-text-2);
  margin-top: var(--sp-3);
}
.sourcenote svg { width: 15px; height: 15px; margin-top: 3px; color: var(--c-text-2); stroke-width: 1.75; flex: none; }
.sourcenote a { color: var(--c-primary); }
.sourcenote strong { color: var(--c-text); font-weight: 500; }

.disclosure {
  border-top: 1px solid var(--c-border);
  padding-block: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-2);
}
.disclosure svg { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; margin-right: 6px; }

.updated {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.updated svg { width: 14px; height: 14px; stroke-width: 1.75; }

/* --------------------------------------------------------------------------
   16. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-2);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: #A9B4C4; }
.breadcrumb a { color: var(--c-text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 500; }

/* --------------------------------------------------------------------------
   17. Decision tree / formula blocks / misc content bits
   -------------------------------------------------------------------------- */
.tree { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.tree__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-3);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.tree__icon { width: 24px; height: 24px; color: var(--c-accent); stroke-width: 1.75; margin-top: 2px; }
.tree__q { font-weight: 500; color: var(--c-primary); margin: 0 0 4px; font-size: 0.9375rem; }
.tree__a { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.7; }
.tree__a strong { color: var(--c-text); }

.formula {
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  line-height: 1.7;
  overflow-wrap: break-word;
  white-space: normal;
}

.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-2);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.checklist svg { width: 22px; height: 22px; color: var(--c-accent); stroke-width: 1.75; margin-top: 3px; }
.checklist strong { color: var(--c-primary); display: block; }

.channel-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.channel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.channel svg { width: 22px; height: 22px; color: var(--c-primary); stroke-width: 1.75; }
.channel span { min-width: 0; }
.channel small { display: block; color: var(--c-text-2); font-size: var(--fs-2xs); }

/* --------------------------------------------------------------------------
   18. Calculators
   -------------------------------------------------------------------------- */
.calc {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-5);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.calc > h2, .calc > h3 { margin-top: 0; }
.calc__desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.7; }
.calc__form { display: grid; gap: var(--sp-3); }
.calc__field { display: grid; gap: 4px; }
.calc__field label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); line-height: 1.6; }
.calc__field input,
.calc__field select {
  min-height: 48px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #C6D2E4;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-num);
  font-size: 1rem;
  line-height: 1.5;
}
.calc__field input:focus,
.calc__field select:focus { border-color: var(--c-primary); outline: 2px solid rgba(15,43,91,.15); outline-offset: 0; }
.calc__field .hint { font-size: var(--fs-2xs); color: var(--c-text-2); line-height: 1.5; }

.calc__result {
  margin-top: var(--sp-4);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.calc__result dl { margin: 0; display: grid; gap: var(--sp-2); }
.calc__result-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed #D3DEEC;
}
.calc__result-row:last-child { border-bottom: 0; padding-bottom: 0; }
.calc__result-row dt { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.calc__result-row dd {
  margin: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-primary);
}
.calc__result-row--hero dd { color: var(--c-accent-hover); font-size: 1.25rem; }
.calc__disclaimer {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-primary-dark);
  color: #C7D5E8;
  margin-top: var(--sp-7);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.site-footer a { color: #DCE7F5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6) var(--sp-5);
}
.footer-brand { max-width: 34em; }
.footer-brand .brand { color: #fff; margin-bottom: var(--sp-3); }
.footer-brand .brand__name em { color: #4FD1AE; }
.footer-brand .brand__mark { color: #fff; }
.footer-brand p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.footer-brand p:last-child { margin-bottom: 0; }

.footer-col h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--sp-3);
  line-height: 1.5;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin: 0; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-sm);
  color: #C7D5E8;
}
.footer-col a:hover { color: #fff; }

.footer-legalnote {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: #9FB3CE;
}
.footer-legalnote p { margin: 0 0 var(--sp-2); }
.footer-legalnote p:last-child { margin-bottom: 0; }
.footer-legalnote a { color: #C7D5E8; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  font-size: var(--fs-xs);
  color: #9FB3CE;
}
.footer-bottom__copy { margin: 0; }
.footer-bottom__sep { color: rgba(255,255,255,.22); }

/* --------------------------------------------------------------------------
   20. Mobile sticky CTA bar (56px + safe area)
   -------------------------------------------------------------------------- */
.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 6px var(--pad-x) calc(6px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 10px rgba(16,24,40,.07);
}
.mobile-cta-bar .btn { flex: 1 1 auto; min-height: 44px; font-size: 0.9375rem; }
.mobile-cta-bar__alt {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}

/* space so the fixed bars never cover the last content */
.has-mobile-cta { padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px) + 12px); }

/* --------------------------------------------------------------------------
   21. Cookie banner (default = deny, 3 options)
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -6px 24px rgba(16,24,40,.14);
  padding: var(--sp-4) var(--pad-x) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  max-height: 70vh;
  overflow-y: auto;
}
.cookie[hidden] { display: none; }
.cookie__inner { max-width: var(--container); margin-inline: auto; }
.cookie h2 { font-size: 1rem; margin: 0 0 var(--sp-2); }
.cookie p { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.7; margin: 0 0 var(--sp-3); }
.cookie p a { color: var(--c-primary); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cookie__actions .btn { flex: 1 1 140px; }

.cookie__settings { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.cookie__settings[hidden] { display: none; }
.cookie__row { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; }
.cookie__row input[type="checkbox"] {
  width: 22px; height: 22px;
  margin: 2px 0 0;
  accent-color: var(--c-accent);
  flex: none;
}
.cookie__row label { font-size: var(--fs-sm); line-height: 1.6; }
.cookie__row small { display: block; color: var(--c-text-2); font-size: var(--fs-2xs); }

/* --------------------------------------------------------------------------
   22. Outbound notice toast (one-time, non-blocking)
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 110;
  max-width: 420px;
  margin-inline: auto;
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  box-shadow: 0 8px 24px rgba(8,27,58,.35);
  font-size: var(--fs-sm);
  line-height: 1.65;
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast p { margin: 0; }
.toast__close {
  flex: none;
  width: 28px; height: 28px;
  margin: -2px -4px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #C7D5E8;
  font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--r-sm);
}
.toast__close:hover { color: #fff; background: rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   23. Fade-in on scroll (progressive enhancement, no layout shift)
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; }
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. Breakpoints — SM 480
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  :root { --pad-x: 1.25rem; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .channel-row { grid-template-columns: repeat(2, 1fr); }
  .cta-block { padding: var(--sp-7) var(--sp-6); }
}

/* --------------------------------------------------------------------------
   25. Breakpoints — MD 768 (tables switch to cards below this)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --pad-x: 1.5rem;
    --fs-h1: 2.125rem;
    --fs-h2: 1.625rem;
  }
  .section { padding-block: var(--sp-8); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .channel-row { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .footer-brand { grid-column: 1 / -1; }
  .hero { padding-block: var(--sp-7) var(--sp-8); }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--sp-6); }
  .hero__visual { order: 0; }
  .calc__form { grid-template-columns: repeat(2, 1fr); }
  .calc__form .calc__field--full { grid-column: 1 / -1; }
  .calc__form .btn { grid-column: 1 / -1; justify-self: start; }
  .cookie__actions .btn { flex: 0 0 auto; }
  .footer-bottom { justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   26. Breakpoints — LG 1024 (desktop nav appears)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 1.75rem;
    --header-h: 72px;
  }
  .nav { display: block; }
  .nav__cta { display: inline-flex; }
  .lang-switch { display: inline-flex; }
  .menu-toggle { display: none; }
  .header-inner { min-height: var(--header-h); gap: var(--sp-4); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .mobile-cta-bar { display: none; }
  .has-mobile-cta { padding-bottom: 0; }
  .toast { bottom: var(--sp-5); }
  .hero__grid { gap: var(--sp-7); }
  .about-grid { grid-template-columns: 1.5fr 1fr; }
}

/* --------------------------------------------------------------------------
   27. Breakpoints — XL 1280
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root { --pad-x: 2rem; }
}

/* --------------------------------------------------------------------------
   28. Motion / print / forced colors
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .mobile-cta-bar, .cookie, .toast, .riskbar__close, .menu-toggle { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .faq-item { border: 1px solid CanvasText; }
}


/* --------------------------------------------------------------------------
   29. Utilities (replace inline styles scattered in the markup)
   -------------------------------------------------------------------------- */
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.maxw-44 { max-width: 44em; }
.maxw-520 { max-width: 520px; }
.steps--cont { margin-top: 0; }

/* --------------------------------------------------------------------------
   30. RiskBar on very small screens
   The Thai warning sentence is a compliance item and must stay verbatim (§6.1),
   so it cannot be trimmed to fit the 44px target on a 360px viewport.
   We compress the type instead of cutting the sentence; it lands around 60-70px
   tall on a 360px screen — an accepted, documented deviation.
   -------------------------------------------------------------------------- */
@media (max-width: 559px) {
  .riskbar { font-size: 0.75rem; line-height: 1.45; }
  .riskbar__inner { padding-block: 5px; gap: 6px; }
  .riskbar__icon { width: 14px; height: 14px; margin-top: 2px; }
  .riskbar__close { width: 26px; height: 26px; margin-top: -3px; }
}

/* --------------------------------------------------------------------------
   31. EntityFactBlock (§6.9) + 5-card auto-fit grid
   -------------------------------------------------------------------------- */
.grid--auto { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.entity {
  margin-top: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.entity > h2 { font-size: 1.125rem; margin-bottom: var(--sp-3); }
.entity__field { padding-top: var(--sp-3); border-top: 1px dashed #D3DEEC; }
.entity__field + .entity__field { margin-top: var(--sp-3); }
.entity__label { margin: 0 0 4px; font-size: 0.9375rem; font-weight: 500; color: var(--c-primary); }
.entity__text { margin: 0; font-size: var(--fs-sm); line-height: 1.75; color: var(--c-text); }
.entity__disclaimer {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-alt);
  border-left: 3px solid #C6D2E4;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text);
}
.entity__src { margin: 6px 0 0; font-size: var(--fs-2xs); color: var(--c-text-2); line-height: 1.6; }
.entity__src a { color: var(--c-text-2); }
/* Evidence-basis line: used instead of a citation when the only source we found
   is not an official Exness domain (§6.10). No truncation, no fixed height —
   Thai text must be allowed to wrap freely. */
.entity__basis { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--c-border); font-size: var(--fs-2xs); color: var(--c-text-2); line-height: 1.7; }
.entity__note {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-2xs);
  color: var(--c-text-2);
  line-height: 1.65;
}
.entity .dtable caption { display: none; }   /* the same sentence already shows above the table */

/* LCP safety: reserve vertical space so the Noto Sans Thai swap does not shift
   the hero copy (Thai line-height 1.75 makes the reflow worse than Latin). */
.hero__copy { min-height: 320px; }
@media (min-width: 768px) { .hero__copy { min-height: 360px; } }

/* --------------------------------------------------------------------------
   17. Forms (inquiry form on /contact/)
   Static-site form: no server collects anything by default. Every control is
   48px+ tall, labels are always visible (never placeholder-only), and the
   consent checkbox is a real <input required>, so the form cannot be sent
   without it even if JavaScript fails.
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); max-width: 660px; }
.form__row { display: grid; gap: var(--sp-4); }
.form__field { display: grid; gap: 6px; }
.form__field > label,
.form__legend { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); line-height: 1.6; }
.form__req { color: #B42318; font-weight: 400; }
.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: var(--r-md);
  -webkit-appearance: none;
  appearance: none;
}
.form__field textarea { min-height: 136px; resize: vertical; }
.form__field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--c-primary);
  outline: 2px solid rgba(15, 43, 91, 0.15);
  outline-offset: 0;
}
.form__hint { font-size: var(--fs-2xs); color: var(--c-text-2); line-height: 1.6; }
.form__check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text);
}
.form__check input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 3px 0 0;
  accent-color: var(--c-primary);
}
.form__error {
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: #B42318;
}
.form__field.is-invalid input,
.form__field.is-invalid select,
.form__field.is-invalid textarea { border-color: #B42318; }
.form__status {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.form__status--warn { background: #FFF7E8; }
/* Honeypot: hidden from sighted users and from screen readers, never from bots.
   Positioned off-canvas instead of overflow:hidden so no text is ever clipped. */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form__note { margin: 0; font-size: var(--fs-xs); color: var(--c-text-2); line-height: 1.7; }

/* --------------------------------------------------------------------------
   18. Editorial (blog / articles / author box)
   -------------------------------------------------------------------------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  line-height: 1.7;
}
.post-meta__sep { color: #C2CBD8; }
.post-meta a { color: var(--c-text-2); text-decoration: underline; }

.authorbox {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.authorbox h2,
.authorbox h3 { margin: 0 0 var(--sp-2); font-size: 1rem; }
.authorbox p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.75; color: var(--c-text-2); }
.authorbox p:last-child { margin-bottom: 0; }
.authorbox strong { color: var(--c-text); }

.post-list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.post-list > li { display: contents; }
.post-card__cat { align-self: flex-start; }
.post-card__more {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-primary);
}
.post-card { color: inherit; }
.post-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow-2); }

.related { margin-top: var(--sp-6); }
.related h2 { font-size: 1.125rem; }

.legal-toc { margin: 0 0 var(--sp-5); }
.legal-toc ol { margin: 0; padding-left: 1.25rem; }
.legal-toc li { margin-bottom: 6px; font-size: var(--fs-sm); line-height: 1.7; }

/* Whole-card link target: one anchor, full-card hit area (>=44px on every
   viewport) without nesting interactive elements inside another link. */
.post-card { position: relative; }
.post-card h3 a { color: inherit; }
.post-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}
.post-card h3 a:focus-visible::after { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Body-visible affiliate disclosure band (audit C9-3: must appear before
   <footer>). Never collapsed into footer fine print - readers must be able to
   see it without scrolling to the bottom of the page source. */
.disclosure-block { display: grid; gap: var(--sp-3); max-width: var(--measure); }
.disclosure-block p { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--c-text-2); }
.disclosure-block p:first-child { color: var(--c-text); }

/* "อ่านต่อ" strip used to give every article at least one inbound link from a
   non-blog page (audit C4). Anchor text is descriptive on purpose. */
.readnext { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.readnext li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.readnext svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--c-accent); stroke-width: 1.75; }
.readnext a { font-size: var(--fs-sm); font-weight: 500; line-height: 1.7; }
@media (min-width: 768px) { .readnext { grid-template-columns: repeat(2, minmax(0, 1fr)); } }