/* Shared visual language for the home, product pages and agent guide.
   Product-specific chart colours and calculator rules stay in each page. */
:root {
  --site-sans: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--site-sans);
  --font-body: var(--site-sans);
  --display: var(--site-sans);
  --body: var(--site-sans);
  --serif: var(--site-sans);
  --sans: var(--site-sans);
  --site-bg: #f5f5f7;
  --site-paper: #fff;
  --site-soft: #e8e8ed;
  --site-ink: #1d1d1f;
  --site-muted: #646469;
  --site-line: #dedee3;
  --site-blue: #0066cc;
  --site-nav: rgba(250, 250, 252, .86);
  --site-health: #f5e9df;
  --site-health-ink: #39251e;
  --site-header-height: 66px;
  --site-section-nav-height: 60px;
}
:root[data-theme='dark'] {
  --site-bg: #101012; --site-paper: #1b1b1e; --site-soft: #303035;
  --site-ink: #f5f5f7; --site-muted: #aaaab2; --site-line: #36363a;
  --site-blue: #6db2ff; --site-nav: rgba(22, 22, 24, .88);
  --site-health: #352822; --site-health-ink: #f4e6dc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --site-bg: #101012; --site-paper: #1b1b1e; --site-soft: #303035;
    --site-ink: #f5f5f7; --site-muted: #aaaab2; --site-line: #36363a;
    --site-blue: #6db2ff; --site-nav: rgba(22, 22, 24, .88);
    --site-health: #352822; --site-health-ink: #f4e6dc;
  }
}
@media screen {
  :root[data-page] {
    color-scheme: light;
    --bg: var(--site-bg); --bg-alt: var(--site-soft);
    --paper: var(--site-paper); --surface: var(--site-paper);
    --surface-2: var(--site-bg); --soft: var(--site-soft);
    --ink: var(--site-ink); --ink-2: var(--site-muted); --ink-soft: var(--site-muted);
    --line: var(--site-line); --line-strong: var(--site-line);
    --r: 26px; --r-sm: 14px; --wrap: 1136px;
    --shadow: none;
  }
  :root[data-theme='dark'] { color-scheme: dark; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; } }
  body { font-family: var(--site-sans); background: var(--site-bg); color: var(--site-ink); }
  h1, h2, h3 { font-family: var(--site-sans); font-weight: 600; letter-spacing: -.035em; line-height: 1.35; }
  button, input, select { font-family: var(--site-sans); }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--site-blue); outline-offset: 4px; }

  /* One text wordmark and navigation treatment across all pages. */
  .site-bar {
    position: sticky; top: 0; z-index: 40; padding: 0;
    background: var(--site-nav); color: var(--site-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--site-line) 65%, transparent);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  }
  .site-bar .site-shell {
    width: 100%; max-width: 1200px; min-height: var(--site-header-height);
    margin-inline: auto; padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
  }
  .site-bar .site-brand {
    display: flex; align-items: center; gap: 10px; flex: none;
    color: var(--site-ink); font: 600 17px/1.35 var(--site-sans);
    letter-spacing: -.5px; text-decoration: none;
  }
  .site-bar .brand-collab { font: 400 13px/1.35 var(--site-sans); letter-spacing: 0; color: var(--site-muted); white-space: nowrap; }
  .site-actions, .site-links { display: flex; align-items: center; gap: 12px; }
  .site-page { color: var(--site-muted); font-size: 12px; margin-right: 5px; }
  .site-home, .site-links > a {
    font: 400 13px/1.4 var(--site-sans); color: var(--site-ink);
    text-decoration: none; white-space: nowrap; padding: 8px 5px;
  }
  .site-home:hover, .site-links > a:hover { color: var(--site-blue); }
  .site-bar .site-home-primary, .site-links > .site-home { padding: 8px 15px; background: var(--site-ink); color: var(--site-paper); border-radius: 25px; }
  .site-bar .tbtn { color: var(--site-ink); border: 1px solid var(--site-line); background: transparent; padding: 8px 12px; font: 400 12px/1.3 var(--site-sans); }
  .site-bar .tbtn:hover { background: var(--site-soft); }
  .site-bar .tbtn svg { width: 15px; height: 15px; }
  .site-bar .nav-links { font-family: var(--site-sans); }
  :root:not([data-page='home']) { scroll-padding-top: calc(var(--site-header-height) + var(--site-section-nav-height) + 16px); }
  .chapnav, .toc { top: var(--site-header-height); z-index: 30; background: var(--site-nav); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
  .chapnav .wrap, .toc .wrap { min-height: var(--site-section-nav-height); align-items: center; }
  .chapnav a, .toc a { font-family: var(--site-sans); font-size: 13px; }

  /* Space, generous radii and quieter borders leave the numbers in focus. */
  .card, .sc-card, .snapshot-card, .calc-card, .lab, .recommendation-card { border-radius: 26px; box-shadow: none; }
  .card, .sc-card, .snapshot-card, .calc-card { border-color: transparent; }
  .card, .sc-card { background: var(--site-paper); }
  .card-h, .card h3, .lab h3 { letter-spacing: -.02em; }
  .btn, .button, .btn.primary { border-radius: 999px; font-family: var(--site-sans); font-weight: 500; box-shadow: none; }
  .button { padding-inline: 23px; }
  .btn-outline, .button.ghost { background: var(--site-paper); border-color: var(--site-line); color: var(--site-ink); }
  .money, input[type='number'], select { border-radius: 14px; }
  .chip span { border-radius: 999px; }
  .hero h1 { font-family: var(--site-sans); font-weight: 600; letter-spacing: -.045em; line-height: 1.35; }
  .chap h2 { letter-spacing: -.035em; line-height: 1.35; }
  .eyebrow { font-size: 12px; font-weight: 500; }
  .chap, .calc { padding-block: 88px; }

  /* Smart Index keeps the blue stage and distinct guarantee/bonus colours. */
  [data-page='smart'] .hero {
    background: radial-gradient(ellipse at 85% 65%, #184886 0%, transparent 57%), #071b3b;
    padding: 72px 0 64px;
  }
  [data-page='smart'] .hero h1 { max-width: 28ch; font-size: clamp(36px, 4.5vw, 60px); }
  [data-page='smart'] .hero h1 em { color: #a5c9ff; }
  [data-page='smart'] .hero-line { opacity: .15; }
  [data-page='smart'] .hero-outcome { border-radius: 30px; background: #ffffff08; border-color: #a5c9ff30; padding: 30px 34px; }
  [data-page='smart'] .outcome-split > div { border-radius: 18px; }
  [data-page='smart'] .btn-gold { background: #0071e3; color: #fff; }
  [data-page='smart'] .btn-ghost { border-color: #a5c9ff70; }
  [data-page='smart'] .kicker { font-size: 13px; font-weight: 500; }
  [data-page='smart'] .kicker .n { color: var(--site-blue); }

  /* Double Care shares the warm surface of its homepage card. */
  [data-page='health'] .hero { background: var(--site-health); color: var(--site-health-ink); padding: 72px 0 64px; }
  [data-page='health'] .hero h1 { max-width: 24ch; font-size: clamp(38px, 4.7vw, 64px); }
  [data-page='health'] .hero h1 em { color: var(--coral-ink); }
  [data-page='health'] .hero-sub { color: var(--site-health-ink); opacity: .8; }
  [data-page='health'] .hero-art { opacity: .2; }
  [data-page='health'] .eyebrow { border: 0; background: transparent; padding: 0; color: var(--site-health-ink); }
  [data-page='health'] .eyebrow::before { display: none; }
  [data-page='health'] .hstat { border-color: transparent; background: var(--site-paper); border-radius: 24px; }
  [data-page='health'] .hero .btn-main { background: #0071e3; color: #fff; }
  [data-page='health'] .btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--site-health-ink) 28%, transparent); color: var(--site-health-ink); }

  /* The guide remains deliberately readable, with formulas behind disclosures. */
  [data-page='lab'] .hero { background: var(--site-bg); color: var(--site-ink); padding: 72px 0 64px; }
  [data-page='lab'] .hero:after { display: none; }
  [data-page='lab'] .hero h1 { font-size: clamp(38px, 4.7vw, 64px); }
  [data-page='lab'] .hero h1 em { color: var(--site-blue); }
  [data-page='lab'] .hero .kicker { color: var(--site-muted); letter-spacing: .03em; }
  [data-page='lab'] .hero .intro { color: var(--site-muted); }
  [data-page='lab'] .hero-meta { color: var(--site-muted); }
  [data-page='lab'] .hero-meta span { border: 1px solid var(--site-line); padding: 6px 12px; border-radius: 25px; font-size: 12px; }
  [data-page='lab'] .hero-start { background: #0071e3; color: #fff; border-color: transparent; padding: 12px 23px; }
  [data-page='lab'] .num { color: var(--site-blue); }
  [data-page='lab'] .lab { border-color: var(--site-line); }
  [data-page='lab'] .lab-head { background: var(--site-bg); }
  [data-page='lab'] .deeper { border-radius: 16px; }
  [data-page='lab'] .btn[aria-pressed='true'], [data-page='lab'] .btn.primary { background: #0071e3; border-color: #0071e3; color: #fff; }
  [data-page='lab'] .say { border-radius: 18px; }

  /* Legacy Lens adopts the same typography, surfaces and both colour schemes. */
  [data-page='legacy'] { --teal: var(--site-blue); --teal-pale: var(--site-soft); --sky: var(--site-bg); --muted: var(--site-soft); }
  [data-page='legacy'] .shell { width: min(1136px, calc(100% - 64px)); }
  [data-page='legacy'] section[id] { scroll-margin-top: 0; }
  [data-page='legacy'] .hero { background: var(--site-bg); padding: 72px 0 48px; text-align: center; }
  [data-page='legacy'] .hero:before { display: none; }
  [data-page='legacy'] .hero h1 { margin: 17px auto 22px; font-size: clamp(38px, 4.7vw, 64px); color: var(--site-ink); }
  [data-page='legacy'] .hero .lede { margin-inline: auto; max-width: 760px; color: var(--site-muted); line-height: 1.8; }
  [data-page='legacy'] .eyebrow { background: transparent; padding: 0; color: var(--site-muted); font-weight: 500; letter-spacing: .025em; }
  [data-page='legacy'] .eyebrow:before { display: none; }
  [data-page='legacy'] .snapshot { padding-top: 8px; }
  [data-page='legacy'] .snapshot-grid { gap: 18px; }
  [data-page='legacy'] .snapshot-card, [data-page='legacy'] .source-list a, [data-page='legacy'] .question { background: var(--site-paper); }
  [data-page='legacy'] .snapshot-card:after { color: var(--site-soft); font-weight: 500; }
  [data-page='legacy'] .snapshot-card h3, [data-page='legacy'] .question b, [data-page='legacy'] .source-list a, [data-page='legacy'] .source-button { color: var(--site-ink); }
  [data-page='legacy'] .snapshot-meta, [data-page='legacy'] .snapshot-card:last-child .snapshot-meta { color: var(--site-blue); }
  [data-page='legacy'] .plan-tag, [data-page='legacy'] .snapshot-card:last-child .plan-tag { color: var(--site-blue); border-radius: 25px; }
  [data-page='legacy'] .section-title, [data-page='legacy'] .path-note h3, [data-page='legacy'] .sources h2, [data-page='legacy'] .legacy-context h3 { color: var(--site-ink); }
  [data-page='legacy'] .comparison { background: #071b3b; }
  [data-page='legacy'] .comparison .section-title { color: #f5f5f7; }
  [data-page='legacy'] .path-note, [data-page='legacy'] .legacy-context { background: var(--site-paper); border-color: var(--site-line); border-radius: 24px; }
  [data-page='legacy'] .path-note p, [data-page='legacy'] label, [data-page='legacy'] .mini-metric span { color: var(--site-muted); }
  [data-page='legacy'] .question { border-radius: 18px; border-color: transparent; padding: 20px; }
  [data-page='legacy'] .question-num { border-radius: 50%; }
  [data-page='legacy'] .mini-metric { background: var(--site-bg); border-radius: 16px; }
  [data-page='legacy'] .mini-metric b, [data-page='legacy'] .quote-table .saving-cell strong { color: var(--site-blue); }
  [data-page='legacy'] .table-wrap { border-radius: 24px; }
  [data-page='legacy'] .quote-table, [data-page='legacy'] .focus-table { background: var(--site-paper); }
  [data-page='legacy'] .quote-table .prime-cell { background: var(--site-bg); }
  [data-page='legacy'] .quote-table .saving-cell { background: var(--site-soft); }
  [data-page='legacy'] .quote-table thead, [data-page='legacy'] .focus-table thead { background: #102b55; }
  [data-page='legacy'] .quote-unit { color: var(--site-muted); }
  [data-page='legacy'] .calc-heading { background: #071b3b; padding: 27px; }
  [data-page='legacy'] .calc-heading h2 { color: white; }
  [data-page='legacy'] .calculator { padding: 27px; }
  [data-page='legacy'] input, [data-page='legacy'] select { background: var(--site-bg); color: var(--site-ink); border-color: var(--site-line); border-radius: 14px; }
  [data-page='legacy'] .button { background: #0071e3; color: white; font-weight: 500; }
  [data-page='legacy'] .button.ghost { background: transparent; color: var(--site-ink); border-color: var(--site-line); }
  [data-page='legacy'] .result-panel { background: var(--site-soft); border-radius: 20px; padding: 20px; }
  [data-page='legacy'] .result-plan b, [data-page='legacy'] .metric-value { color: var(--site-ink); }
  [data-page='legacy'] .result-plan span, [data-page='legacy'] .metric-label, [data-page='legacy'] .metric-sub { color: var(--site-muted); }
  [data-page='legacy'] .recommendation-card { background: #071b3b; }
  [data-page='legacy'] .source-list a { border-radius: 16px; border-color: transparent; font-weight: 500; }
  [data-page='legacy'] footer { background: var(--site-bg); color: var(--site-muted); }
  [data-page='legacy'] :is(.plan-tag, .snapshot-meta, .section-kicker, label, .source-button, .metric-value) { font-weight: 500; }

  @media (max-width: 900px) {
    .site-bar .site-shell { padding-inline: 24px; }
    .site-bar .site-brand { flex-direction: column; align-items: flex-start; gap: 0; }
    .site-bar .brand-collab { font-size: 11px; }
    .site-page { display: none; }
    .site-links { gap: 6px; }
  }
  @media (max-width: 650px) {
    :root { --site-header-height: 60px; --site-section-nav-height: 56px; }
    .site-bar .site-shell { min-height: 60px; padding-inline: 20px; gap: 12px; }
    .site-bar .site-brand { font-size: 15px; }
    .site-actions { gap: 6px; }
    .site-bar .tbtn { padding: 8px 10px; min-height: 34px; }
    .site-bar .tbl, .site-links > a:not(.site-home) { display: none; }
    .site-home { font-size: 12px; padding-inline: 3px; }
    .site-bar .site-home-primary, .site-links > .site-home { padding: 7px 12px; }
    .site-bar .nav-links .nav-cta { padding: 6px 12px; }
    .chapnav .wrap, .toc .wrap { padding-block: 9px; }
    .chapnav a { padding-inline: 10px; font-size: 12px; }
    .toc .wrap { gap: 20px; }
    .chap, .calc { padding-block: 56px; }
    .card, .sc-card, .snapshot-card, .calc-card, .lab { border-radius: 22px; }
    [data-page='smart'] .hero, [data-page='health'] .hero, [data-page='lab'] .hero { padding-block: 44px 48px; }
    [data-page='smart'] .hero h1, [data-page='health'] .hero h1, [data-page='lab'] .hero h1 { font-size: 38px; }
    [data-page='smart'] .hero-outcome { padding: 24px 20px; border-radius: 24px; }
    [data-page='smart'] .outcome-total { font-size: clamp(38px, 10vw, 52px); }
    [data-page='lab'] .hero-meta { gap: 8px; }
    [data-page='lab'] .hero .intro { font-size: 17px; }
    [data-page='legacy'] .shell { width: calc(100% - 40px); }
    [data-page='legacy'] .hero { padding-block: 44px 32px; }
    [data-page='legacy'] .hero h1 { font-size: 38px; }
    [data-page='legacy'] .calc-heading, [data-page='legacy'] .calculator { padding: 23px 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}
@media print {
  .site-bar { display: none; }
}
@media screen {
  .chapnav a.calc, .chapnav a.calc.on { background: #0071e3; color: #fff; }
  [data-page='lab'] .wrap { max-width: 1184px; }
  [data-page='health'] .hero-art { opacity: .45; }
  @media (max-width: 900px) { :root { --gutter: 24px; } }
  @media (max-width: 650px) {
    :root { --gutter: 20px; }
    [data-page='lab'] .wrap { padding-inline: 20px; }
    [data-page='health'] .hero-art { opacity: .13; }
  }
}
@media screen {
  [data-page='legacy'] { scroll-padding-top: calc(var(--site-header-height) + 16px); }
}
@media print {
  :root[data-page] {
    color-scheme: light;
    --bg: #fff; --bg-alt: #fff; --surface: #fff; --surface-2: #f5f5f7;
    --paper: #fff; --soft: #f5f5f7; --ink: #1d1d1f;
    --ink-2: #646469; --ink-soft: #646469; --muted: #646469;
    --line: #dedee3; --line-strong: #dedee3;
  }
  body { background: #fff; }
}
@media screen {
  [data-page='lab'] .hero .intro br { display: initial; }
  @media (max-width: 650px) {
    [data-page='lab'] .section-head { grid-template-columns: 34px 1fr; gap: 14px; }
    [data-page='lab'] .section-head h2 { font-size: 24px; }
  }
}
@media print {
  :root[data-page='legacy'] { --muted: #f5f5f7; }
}