/* ==========================================================================
   Fin Infinity — Design tokens & components  ·  v1.0 (Oct 2026)
   Source of truth for every client page, tool and PDF.
   Load fonts in <head> BEFORE this file:
   <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand — do not change */
  --navy:#172446;          /* primary: hero, headings ink, primary buttons */
  --green:#2E9E5B;         /* positive / recommended / "our plan" highlight */
  --pink:#E11D74;          /* accent only: section bar, note rule, focus ring */
  --paper:#F4F6F9;         /* page background */

  /* Semantic surfaces & text */
  --bg:var(--paper);
  --surface:#FFFFFF;
  --raised:#ECF0F6;
  --ink:#172446;
  --ink-2:#45587A;
  --ink-3:#76869F;
  --line:#D9E1EC;
  --line-soft:#E8EDF4;

  /* Hero (always navy, both themes) */
  --hero-bg:var(--navy);
  --hero-eyebrow:#92A6C6;
  --hero-lede:#C6D4E8;

  /* Data series & status */
  --s1:#2E9E5B;            /* series 1 (green) */
  --s2:#3A6FB0;            /* series 2 (steel blue) */
  --ok:#2E9E5B;
  --warn:#B4531A;
  --crit:#C0392B;

  /* Type */
  --font-display:'Prompt','Noto Sans Thai',system-ui,sans-serif;
  --font-body:'Sarabun','Noto Sans Thai',system-ui,sans-serif;

  /* Shape & space */
  --r-sm:9px; --r-md:12px; --r-lg:14px; --r-pill:999px;
  --wrap:900px; --gutter:20px; --section-gap:44px; --card-pad:22px;

  color-scheme:light;
}

/* Dark theme — follows OS unless data-theme="light" is set on <html> */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C1322; --surface:#141E31; --raised:#1C2940;
    --ink:#E9EFF8; --ink-2:#A9B9D2; --ink-3:#7C8DA8;
    --line:#26344C; --line-soft:#1E2B40;
    --s1:#3FA865; --s2:#5A8FCC;
    --ok:#3FA865; --warn:#D98B4A; --crit:#E07A6E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1322; --surface:#141E31; --raised:#1C2940;
  --ink:#E9EFF8; --ink-2:#A9B9D2; --ink-3:#7C8DA8;
  --line:#26344C; --line-soft:#1E2B40;
  --s1:#3FA865; --s2:#5A8FCC;
  --ok:#3FA865; --warn:#D98B4A; --crit:#E07A6E;
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,.dsp{font-family:var(--font-display);font-weight:600;text-wrap:balance;letter-spacing:.1px}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);padding-block:0 64px}
.num,td,.v,.amt{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* ---------- 3. Hero ---------- */
.hero{background:var(--hero-bg);color:#fff;padding-inline:var(--gutter);padding-block:42px 36px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%,rgba(255,255,255,.12),transparent 64%);pointer-events:none}
.hero-in{max-width:var(--wrap);margin:0 auto;position:relative}
.logo{display:block;height:34px;width:auto;max-width:70vw}
.eyebrow{font-family:var(--font-display);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--hero-eyebrow);margin:12px 0 8px}
.hero h1{font-size:clamp(28px,5.6vw,40px);margin:0 0 12px;line-height:1.25;color:#fff}
.hero .lede{margin:0;color:var(--hero-lede);max-width:54ch;font-size:17.5px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fact{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#E6EDF8;
  padding:5px 13px;border-radius:var(--r-pill);font-size:13.5px}

/* ---------- 4. Sections & headings ---------- */
section{margin-top:var(--section-gap)}
h2{font-size:clamp(20px,3.5vw,25px);margin:0 0 10px;display:flex;align-items:baseline;gap:11px}
h2::before{content:"";width:4px;align-self:stretch;background:var(--pink);border-radius:2px;flex:0 0 4px}
h3{font-size:18px;margin:0 0 10px}
.sub{color:var(--ink-2);margin:0 0 20px;max-width:66ch}

/* ---------- 5. Cards & grid ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--card-pad)}
.card p{color:var(--ink-2)}
.card.accent-s1{border-top:4px solid var(--s1)}
.card.accent-s2{border-top:4px solid var(--s2)}
.card.accent-warn{border-top:4px solid var(--warn)}
.grid{display:grid;gap:14px}
@media(min-width:730px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}

/* Numbered step */
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  display:flex;gap:18px;align-items:flex-start;min-width:0}
.step .n{flex:0 0 42px;height:42px;border-radius:var(--r-md);background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:19px}
.step .body{min-width:0;flex:1}
.step h3{margin:2px 0 6px;font-size:19px}
.step p{margin:0 0 10px;color:var(--ink-2);font-size:16px;line-height:1.7}
.step p:last-child{margin-bottom:0}

/* ---------- 6. Interactive tool ---------- */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.tool label{display:block;font-family:var(--font-display);font-weight:600;font-size:15px;margin-bottom:4px}
.tool .hint{font-size:14px;color:var(--ink-3);margin:0 0 14px}
input[type=range]{width:100%;accent-color:var(--green);height:28px}

/* Segmented buttons */
.terms{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
.terms button{font-family:var(--font-display);font-weight:600;font-size:15px;padding:9px 20px;border-radius:10px;
  border:1px solid var(--line);background:var(--raised);color:var(--ink-2);cursor:pointer}
.terms button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Readout tiles (KPI) */
.readout{display:grid;gap:14px;margin-top:8px}
@media(min-width:620px){.readout{grid-template-columns:1fr 1fr}}
.ro{background:var(--raised);border-radius:var(--r-md);padding:16px 18px}
.ro .t{font-family:var(--font-display);font-size:13px;letter-spacing:.6px;color:var(--ink-3);text-transform:uppercase}
.ro .v{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1.25;margin-top:4px}
.ro .s{font-size:14px;color:var(--ink-2);margin-top:4px}
.ro.green .v{color:var(--ok)}
.ro.blue .v{color:var(--s2)}
.tier{margin-top:16px;padding:14px 18px;border-radius:var(--r-md);background:var(--raised);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:15px;color:var(--ink-2)}
.tier b{font-family:var(--font-display);color:var(--ink);font-size:17px}

/* Split bar */
.bar{display:flex;height:34px;border-radius:var(--r-sm);overflow:hidden;background:var(--raised);border:1px solid var(--line)}
.bar .seg{display:grid;place-items:center;min-width:0;font-family:var(--font-display);font-weight:600;
  font-size:12.5px;color:#fff;overflow:hidden;white-space:nowrap;transition:flex-basis .12s ease}
.bar .seg.s1{background:var(--s1)} .bar .seg.s2{background:var(--s2)}

/* Big-number comparison */
.gapwrap{display:grid;gap:14px}
@media(min-width:720px){.gapwrap{grid-template-columns:1fr 1fr;align-items:stretch}}
.gapcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  display:flex;flex-direction:column;justify-content:center;min-width:0}
.gapcard.now{border-top:4px solid var(--warn)}
.gapcard.after{border-top:4px solid var(--ok)}
.gapcard .t{font-family:var(--font-display);font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.gapcard .v{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:8px 0 2px;font-size:clamp(30px,7.5vw,46px)}
.gapcard.now .v{color:var(--warn)}
.gapcard.after .v{color:var(--ok)}
.gapcard .per{font-size:15.5px;color:var(--ink-2);margin-top:6px}

/* ---------- 7. Tables ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:16px}
th,td{padding:12px 15px;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{background:var(--raised);font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
thead th.plan{background:color-mix(in srgb,var(--green) 16%,var(--raised))}
tbody td.plan{background:color-mix(in srgb,var(--green) 8%,transparent);font-weight:600}
tbody tr:last-child td{border-bottom:none}
tr.mark td{background:color-mix(in srgb,var(--green) 10%,transparent);font-weight:600}
table.wrapcells th,table.wrapcells td{white-space:normal;vertical-align:top;line-height:1.5}
table.wrapcells th:first-child,table.wrapcells td:first-child{width:22%;min-width:140px}
.gn{color:var(--ok);font-weight:600}.rd{color:var(--crit);font-weight:600}.wn{color:var(--warn);font-weight:600}

/* ---------- 8. Callouts & lists ---------- */
.note{background:var(--raised);border-left:3px solid var(--pink);border-radius:0 10px 10px 0;
  padding:15px 19px;font-size:16px;color:var(--ink-2);line-height:1.7}
.note strong{color:var(--ink)}
.note.warn{border-left-color:var(--warn)}
.note.ok{border-left-color:var(--green)}

.pts{list-style:none;margin:14px 0 0;padding:0;font-size:15.5px}
.pts li{padding-left:24px;position:relative;margin-bottom:8px;color:var(--ink-2);line-height:1.65}
.pts li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pts li.minus::before{background:var(--warn);border-radius:1px;height:3px;top:13px;width:9px;left:5px}

.quote{background:var(--navy);color:#E7EEF9;border-radius:var(--r-lg);padding:28px;font-size:18px;line-height:1.9}
.quote p{margin:0}
.quote cite{display:block;margin-top:14px;font-size:13.5px;color:var(--hero-eyebrow);font-style:normal}

.ask{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);padding:22px}
.ask ul{list-style:none;margin:0;padding:0;font-size:16px}
.ask li{padding-left:30px;position:relative;margin-bottom:11px;color:var(--ink-2);line-height:1.65}
.ask li::before{content:"";position:absolute;left:2px;top:4px;width:17px;height:17px;border-radius:5px;border:2px solid var(--ink-3)}

/* Disclosures */
.disc{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.75}
.disc li{margin-bottom:8px}
.disc li::marker{color:var(--ink-3)}

/* ---------- 9. Footer (mandatory on client materials) ---------- */
footer{margin-top:52px;border-top:1px solid var(--line);padding-top:22px;color:var(--ink-3);font-size:13.5px;line-height:1.75}
footer .nm{font-family:var(--font-display);color:var(--ink);font-weight:600;font-size:15px}

/* ---------- 10. Dark-theme component tweaks ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .step .n{background:var(--raised);color:var(--ink)}
  :root:not([data-theme="light"]) .bar .seg{color:#0A1120}
  :root:not([data-theme="light"]) .terms button[aria-pressed="true"]{background:var(--s1);border-color:var(--s1);color:#07130B}
}
:root[data-theme="dark"] .step .n{background:var(--raised);color:var(--ink)}
:root[data-theme="dark"] .bar .seg{color:#0A1120}
:root[data-theme="dark"] .terms button[aria-pressed="true"]{background:var(--s1);border-color:var(--s1);color:#07130B}

/* ---------- 11. Print / PDF (A4) ---------- */
@page{size:A4;margin:14mm 12mm}
@media print{
  :root{color-scheme:light}
  body{font-size:14.5px;background:#fff}
  .no-print{display:none!important}
  .hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card,.step,.note,.quote,.tw,.gapcard,.ro{break-inside:avoid}
  h2{break-after:avoid}
  .tw{overflow:visible} table{min-width:0}
}