/* ---------- tokens : light ---------- */
:root{
  --ground:#F5F8FC; --surface:#FFFFFF; --surface-2:#E9F0FB; --surface-3:#EDF2F9;
  --ink:#0E1B2E; --ink-soft:#46586F; --ink-faint:#78889E;
  --line:#DBE3EE; --line-strong:#B9C6D8;
  --orange:#D65A07; --orange-soft:#FCE8D6; --orange-line:#F0A567;
  --blue:#12529F; --blue-soft:#E3ECFA; --blue-line:#A9C6EE;
  --good:#16704C; --good-bg:#E0F2E9;
  --warn:#8F5404; --warn-bg:#FBEBD5;
  --bad:#AC3019; --bad-bg:#FBE5DF;
  --shadow:0 1px 2px rgba(14,27,46,.05), 0 10px 26px -14px rgba(14,27,46,.22);
}
/* ---------- tokens : dark ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A1120; --surface:#121C2D; --surface-2:#16243B; --surface-3:#1A2639;
    --ink:#E9EFF8; --ink-soft:#9DAFC6; --ink-faint:#73859E;
    --line:#23314A; --line-strong:#354561;
    --orange:#FF9147; --orange-soft:#38220F; --orange-line:#8A4D1E;
    --blue:#77ABFF; --blue-soft:#132340; --blue-line:#2C4877;
    --good:#4FC893; --good-bg:#103023;
    --warn:#E8AC55; --warn-bg:#33260F;
    --bad:#F28C77; --bad-bg:#361C15;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0A1120; --surface:#121C2D; --surface-2:#16243B; --surface-3:#1A2639;
  --ink:#E9EFF8; --ink-soft:#9DAFC6; --ink-faint:#73859E;
  --line:#23314A; --line-strong:#354561;
  --orange:#FF9147; --orange-soft:#38220F; --orange-line:#8A4D1E;
  --blue:#77ABFF; --blue-soft:#132340; --blue-line:#2C4877;
  --good:#4FC893; --good-bg:#103023;
  --warn:#E8AC55; --warn-bg:#33260F;
  --bad:#F28C77; --bad-bg:#361C15;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Google Sans","Google Sans Text","Noto Sans Thai","Noto Sans",system-ui,sans-serif;
  font-size:18px; line-height:1.8; -webkit-font-smoothing:antialiased;
}
.container{max-width:1180px; margin:0 auto; padding-inline:24px}
h1,h2,h3,h4{font-family:inherit; font-weight:600; text-wrap:balance; line-height:1.3; margin:0; letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0 0 1em; padding-left:1.2em}
li{margin-bottom:.45em}
a{color:var(--blue)}

/* ---------- nav ---------- */
nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.nav{height:68px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.logo{font-weight:700; letter-spacing:.02em; font-size:18px; white-space:nowrap}
.logo span{color:var(--orange)}
.nav-links{display:flex; gap:20px; overflow-x:auto; scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{color:var(--ink-soft); text-decoration:none; font-size:15.5px; font-weight:500; white-space:nowrap}
.nav-links a:hover{color:var(--orange)}
.theme-btn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:9px 16px; cursor:pointer; font:inherit; font-size:14.5px; font-weight:600;
  display:inline-flex; gap:7px; align-items:center; white-space:nowrap;
}
.theme-btn:hover{color:var(--ink); border-color:var(--orange-line)}
.theme-btn:focus-visible, .nav-links a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- hero ---------- */
.hero{padding:86px 0 70px; text-align:center}
.badge{
  display:inline-block; padding:7px 15px; border-radius:999px;
  border:1px solid var(--blue-line); background:var(--blue-soft); color:var(--blue);
  font-size:14px; font-weight:600; letter-spacing:.06em;
}
.hero h1{font-size:clamp(38px,7vw,68px); line-height:1.08; margin:24px auto 18px; max-width:16ch}
.hero .deck{color:var(--ink-soft); font-size:clamp(19px,2.6vw,23px); max-width:60ch; margin:0 auto}
.flowline{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
  margin:32px 0 0; font-family:"Google Sans Code",monospace; font-size:16px; font-weight:500;
}
.flowline b{color:var(--blue); font-weight:500}
.flowline i{color:var(--orange); font-style:normal}
.hero .note{color:var(--ink-soft); font-size:17px; max-width:74ch; margin:26px auto 0; line-height:1.75}
.meta{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; margin-top:28px; font-size:15.5px; color:var(--ink-faint)}
.meta b{color:var(--ink-soft); font-weight:600}

/* ---------- sections ---------- */
section{border-top:1px solid var(--line)}
section > .container{padding-block:74px}
.sec-head{margin-bottom:30px; scroll-margin-top:86px}
.step-tag{
  display:inline-block; font-family:"Google Sans Code",monospace; font-size:14px; font-weight:500;
  letter-spacing:.14em; color:var(--orange); background:var(--orange-soft);
  border-radius:999px; padding:5px 15px; margin-bottom:14px;
}
h2{font-size:clamp(30px,5vw,42px)}
.lead{color:var(--ink-soft); font-size:19.5px; margin:10px 0 0; max-width:74ch}
h3{font-size:23px; margin:40px 0 14px}
h3.first{margin-top:0}
.hint{font-size:16px; color:var(--ink-faint); line-height:1.7}

/* ---------- card grids ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px}
.card .kicker{font-family:"Google Sans Code",monospace; font-size:34px; font-weight:500; color:var(--blue); line-height:1.2; margin-bottom:10px}
.card .kicker.orange{color:var(--orange)}
.card .kicker.good{color:var(--good)}
.card h3{margin:0 0 10px; font-size:21px}
.card p{color:var(--ink-soft); margin:0; font-size:17.5px; line-height:1.7}

/* ---------- big number cards ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px}
.stat small{display:block; color:var(--ink-faint); font-size:15px; font-weight:600; letter-spacing:.04em}
.stat strong{
  display:block; font-family:"Google Sans Code",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4vw,38px); font-weight:500; margin-top:8px; color:var(--blue);
}
.stat.orange strong{color:var(--orange)}
.stat.good strong{color:var(--good)}
.stat .note{color:var(--ink-faint); font-size:15.5px; line-height:1.65; margin-top:8px}

/* ---------- roadmap ---------- */
.roadmap{display:grid; grid-template-columns:1fr 38px 1fr 38px 1fr 38px 1fr 38px 1fr; align-items:stretch}
.rm{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:clamp(20px,2.4vw,24px); min-height:220px; display:flex; flex-direction:column}
.rm .month{font-family:"Google Sans Code",monospace; font-size:clamp(12px,1.6vw,14px); font-weight:600; color:var(--orange); letter-spacing:.08em}
.rm h3{font-size:clamp(18px,2.5vw,22px); margin:10px 0 12px}
.rm ul{padding-left:18px; color:var(--ink-soft); font-size:clamp(14px,2vw,17px); line-height:1.75; margin:0}
.rm li{margin-bottom:.25em}
.rm li::marker{color:var(--line-strong)}
.rm .budget{margin-top:auto; padding-top:14px; margin-bottom:2px; border-top:1px solid var(--line); font-family:"Google Sans Code",monospace; font-size:clamp(13px,1.7vw,15px); color:var(--ink-faint)}
.rm .more-btn{margin-top:12px; padding:9px 15px; font-size:clamp(14px,1.8vw,15.5px)}
.roadmap-sec .lead{font-size:clamp(16px,2.1vw,18px)}
.rm-arrow{display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:26px}

/* ---------- funnel ---------- */
.funnel{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:20px}
.funnel > div{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 14px; text-align:center}
.funnel strong{display:block; font-size:18px; margin-bottom:7px}
.funnel span{color:var(--ink-faint); font-size:15.5px; line-height:1.6}

/* ---------- tables ---------- */
.scroll{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:500px; font-size:17px}
th,td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  background:var(--surface-3); font-weight:600; font-size:14.5px; letter-spacing:.03em;
  color:var(--ink-soft); border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right}
.ftable td.eq{text-align:right}
td.n,th.n{text-align:left; font-family:"Google Sans Code",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr.total td{background:var(--orange-soft); font-weight:600; border-top:1px solid var(--orange-line)}
tbody tr.total td.n{color:var(--orange); font-size:17.5px}
.ftable td.key{font-family:"Google Sans Code",monospace; color:var(--orange); font-weight:500; white-space:nowrap}
.ftable td.eq{font-family:"Google Sans Code",monospace; white-space:nowrap; color:var(--ink)}
.ftable td.where{color:var(--blue); font-weight:600; white-space:nowrap}
.ftable tfoot td{background:var(--surface-3); border-top:1px solid var(--line-strong); color:var(--ink-soft); font-size:16.5px}
.ftable tfoot td .eqi{font-family:"Google Sans Code",monospace; color:var(--ink)}

/* ---------- pills ---------- */
.pill{display:inline-block; padding:4px 12px; border-radius:999px; font-size:14px; font-weight:600; white-space:nowrap}
.pill.good{background:var(--good-bg); color:var(--good)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}

/* ---------- chart ---------- */
.chart{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 14px 12px; margin-bottom:12px}
.chart svg{display:block; width:100%; height:auto}
.grid-line{stroke:var(--line); stroke-width:1}
.axis-text{fill:var(--ink-faint); font-family:"Google Sans Code",monospace; font-size:13px}
.bar-fixed{fill:var(--line-strong)}
.bar-prop{fill:var(--blue)}
.legend{display:flex; gap:8px 24px; font-size:16px; color:var(--ink-soft); margin-top:6px; flex-wrap:wrap}
.swatch{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:7px; vertical-align:baseline}

/* ---------- callout / gate / explain ---------- */
.callout{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin:0 0 24px}
.callout p:last-child{margin-bottom:0}
.gate{background:var(--blue-soft); border-left:4px solid var(--blue); border-radius:14px; padding:22px 24px; margin:0 0 24px; font-size:17.5px}
.gate b{display:block; margin-bottom:8px; color:var(--blue); font-size:17px}
.gate ul{margin:0; padding-left:1.15em; color:var(--ink-soft)}

/* ---------- simulator ---------- */
.calc{background:var(--surface); border:1px solid var(--line-strong); border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
.calc-head{padding:20px 26px; border-bottom:1px solid var(--line); background:var(--surface-3); display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.calc-head h3{margin:0; font-size:21px}
.calc-body{padding:26px}
.calc-body h3{margin:32px 0 16px; font-size:21px}
.calc-body h3.first{margin-top:0}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px}
.field{display:flex; flex-direction:column}
.field label{font-size:16.5px; font-weight:600; margin-bottom:5px}
.field .fhelp{flex:1 0 auto; font-size:15.5px; color:var(--ink-faint); line-height:1.6; margin-bottom:12px}
.field input{margin-top:auto}
input[type=number]{
  width:100%; padding:13px 15px; font:inherit; font-size:18px;
  font-family:"Google Sans Code",monospace; font-variant-numeric:tabular-nums; text-align:right;
  background:var(--ground); color:var(--ink); border:1px solid var(--line-strong); border-radius:10px;
}
select{
  width:100%; padding:13px 15px; font:inherit; font-size:17px;
  background:var(--ground); color:var(--ink); border:1px solid var(--line-strong); border-radius:10px;
}
input[type=number]:focus-visible, select:focus-visible{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.costlist{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.costlist div{display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:var(--ground); font-size:16.5px}
.costlist div > span{min-width:0}
.costlist b{flex:0 0 auto; white-space:nowrap; font-family:"Google Sans Code",monospace; font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink)}
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.metric{background:var(--surface-2); border-radius:14px; padding:17px 18px}
.metric small{display:block; color:var(--ink-faint); font-size:13.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase}
.metric strong{
  display:block; font-family:"Google Sans Code",monospace; font-variant-numeric:tabular-nums;
  font-size:28px; font-weight:500; margin-top:5px; color:var(--blue);
}
.metric span{display:block; color:var(--ink-soft); font-size:15px; line-height:1.6; margin-top:4px}
.sliders{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px 34px}
.slider .srow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px}
.slider label{font-size:16.5px; font-weight:600; color:var(--ink)}
.slider .sval{
  font-family:"Google Sans Code",monospace; font-variant-numeric:tabular-nums;
  font-size:18px; font-weight:600; color:var(--orange); white-space:nowrap;
}
.slider .shelp{display:block; font-size:14.5px; color:var(--ink-faint); line-height:1.5; margin-top:8px}
input[type=range]{
  width:100%; accent-color:var(--good); height:26px; margin:0; cursor:pointer;
  background:transparent;
}
input[type=range]:focus-visible{outline:2px solid var(--blue); outline-offset:4px; border-radius:6px}
.presets{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px}
.presets .plabel{font-size:15.5px; color:var(--ink-faint); font-weight:600}
.preset-btn{
  border:1px solid var(--line-strong); background:var(--ground); color:var(--ink-soft);
  border-radius:999px; padding:9px 18px; font:inherit; font-size:15px; font-weight:600; cursor:pointer;
}
.preset-btn:hover{border-color:var(--orange-line); color:var(--ink)}
.preset-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

.calc-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.calc-btn{
  border:none; border-radius:12px; cursor:pointer; font:inherit; font-size:18px; font-weight:700;
  padding:15px 34px; background:var(--orange); color:#fff; letter-spacing:.02em;
}
:root[data-theme="dark"] .calc-btn{color:#1A1005}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .calc-btn{color:#1A1005}}
.calc-btn:hover{filter:brightness(1.08)}
.calc-btn:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.calc-btn.dirty{animation:pulse 1.4s ease-in-out infinite}
.calc-dirty{color:var(--orange); font-size:16px; font-weight:600}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,90,7,.55)} 50%{box-shadow:0 0 0 10px rgba(214,90,7,0)}}
@keyframes flashbg{from{background:var(--orange-soft)} to{background:var(--surface-2)}}
@keyframes flashring{from{box-shadow:0 0 0 4px var(--orange)} to{box-shadow:0 0 0 12px transparent}}
.metric.flash{animation:flashbg 1s ease-out}
.verdict.flash{animation:flashring 1s ease-out}
.metric strong.pos{color:var(--good)}
.metric strong.neg{color:var(--bad)}

.verdict{margin-top:24px; border-radius:16px; padding:22px 24px; border:1px solid transparent; border-left-width:6px}
.verdict.good{background:var(--good-bg); border-color:var(--good)}
.verdict.warn{background:var(--warn-bg); border-color:var(--warn)}
.verdict.bad{background:var(--bad-bg); border-color:var(--bad)}
.verdict .vhead{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.verdict .vtitle{font-size:25px; font-weight:600}
.verdict.good .vtitle{color:var(--good)}
.verdict.warn .vtitle{color:var(--warn)}
.verdict.bad .vtitle{color:var(--bad)}
.verdict p{margin:0 0 8px; font-size:16.5px}
.verdict p:last-child{margin-bottom:0}
.verdict .diag{font-size:15.5px; color:var(--ink-soft)}

/* ---------- rules ---------- */
.rules{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px}
.rule{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px}
.rule b{display:block; margin-bottom:8px; font-size:17.5px}
.rule span{color:var(--ink-soft); font-size:17px; line-height:1.7}

/* ---------- investor block ---------- */
.investor{
  background:linear-gradient(135deg, var(--blue-soft), var(--surface));
  border:1px solid var(--blue-line); border-radius:24px; padding:40px;
}
.investor .quote{font-size:clamp(25px,3.6vw,34px); line-height:1.45; margin:0 0 22px; font-weight:600; max-width:26ch}
.investor p{color:var(--ink-soft); max-width:70ch}
.investor p:last-child{margin-bottom:0}

/* ---------- more button + modal ---------- */
.more-btn{
  margin-top:14px; align-self:flex-start; border:1px solid var(--line-strong); background:var(--ground);
  color:var(--blue); border-radius:999px; padding:12px 20px; font:inherit; font-size:15.5px; font-weight:600; cursor:pointer;
}
.more-btn:hover{border-color:var(--blue); background:var(--blue-soft)}
.more-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
dialog.modal{
  border:none; padding:0; max-width:700px; width:calc(100% - 32px);
  border-radius:22px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
}
dialog.modal::backdrop{background:rgba(5,11,22,.62)}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:26px 28px 0}
.modal-kicker{font-family:"Google Sans Code",monospace; font-size:14.5px; font-weight:600; color:var(--orange); letter-spacing:.06em}
.modal-head h3{margin:6px 0 0; font-size:26px}
.modal-close{
  flex:none; width:42px; height:42px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--ground); color:var(--ink-soft); font:inherit; font-size:20px; line-height:1;
}
.modal-close:hover{color:var(--ink); border-color:var(--orange-line)}
.modal-body{padding:18px 28px 28px; max-height:68vh; overflow-y:auto; font-size:17.5px}
.modal-body ul{padding-left:20px; color:var(--ink-soft)}
.modal-body li{margin-bottom:.6em}
.modal-body h4{font-size:18px; margin:20px 0 8px; color:var(--blue)}
.modal-body h4:first-child{margin-top:0}
.modal-body p:last-child, .modal-body ul:last-child{margin-bottom:0}

footer{border-top:1px solid var(--line); background:var(--surface)}
footer .container{padding-block:36px 52px; font-size:15.5px; color:var(--ink-faint)}

@media (max-width:980px){
  .grid{grid-template-columns:1fr 1fr}
  .roadmap{grid-template-columns:1fr}
  .rm{min-height:0}
  .rm-arrow{height:42px; font-size:24px}
  .rm-arrow::after{content:"↓"}
  .rm-arrow span{display:none}
  .funnel{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .container{padding-inline:20px}
  .scroll{border-radius:12px}
  table{min-width:0; font-size:13.5px}
  th,td{padding:10px 11px}
  td.n,th.n{white-space:normal}
  section > .container{padding-block:52px}
  .hero{padding:56px 0 46px}
  .grid,.grid.two,.stats,.rules{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .funnel{grid-template-columns:1fr}
  .investor{padding:26px 22px}
  .nav{height:auto; padding-block:12px; flex-wrap:wrap; row-gap:10px}
  .nav-links{order:3; width:100%; gap:18px; padding-bottom:2px; margin-inline:-20px; padding-inline:20px; -webkit-overflow-scrolling:touch}
  .nav-links a{font-size:16px}
  .sec-head{scroll-margin-top:118px}
  .calc-body{padding:20px}
  .calc-head{padding:18px 20px}
  dialog.modal{
    width:100%; max-width:none; margin:auto auto 0; border-radius:22px 22px 0 0;
    max-height:88vh; padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .modal-head{padding:22px 22px 0}
  .modal-head h3{font-size:23px}
  .modal-body{padding:16px 22px 26px; max-height:70vh}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
@media (max-width:620px){.calc-btn{width:100%}}

/* ---------- export PDF button ---------- */
.pdf-btn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:9px 16px; cursor:pointer; font:inherit; font-size:14.5px;
  font-weight:600; white-space:nowrap; margin-right:8px;
}
.pdf-btn:hover{color:var(--ink); border-color:var(--orange-line)}
.pdf-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

.pdf-cta{
  margin-top:24px; border:none; border-radius:12px; cursor:pointer; font:inherit;
  font-size:17px; font-weight:700; padding:15px 30px; background:var(--orange); color:#fff;
}
:root[data-theme="dark"] .pdf-cta{color:#1A1005}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pdf-cta{color:#1A1005}}
.pdf-cta:hover{filter:brightness(1.08)}
.pdf-cta:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
@media (max-width:620px){.pdf-cta{width:100%}}

/* ---------- print-only elements ---------- */
.print-only{display:none}

/* ---------- print / export to PDF ---------- */
@media print{
  /* force the light palette — dark backgrounds waste toner and print grey */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]){
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F5FA; --surface-3:#F2F5FA;
    --ink:#101820; --ink-soft:#3C4653; --ink-faint:#5C6773;
    --line:#C9D2DD; --line-strong:#9AA6B4;
    --orange:#B84E06; --orange-soft:#FBEADB; --orange-line:#D9955A;
    --blue:#0E4787; --blue-soft:#E8EFF9; --blue-line:#9BBBE2;
    --good:#0F5C3E; --good-bg:#E4F2EB; --bad:#8E2814; --bad-bg:#FAE7E2;
    --warn:#75440A; --warn-bg:#FAEEDA; --shadow:none;
  }
  @page{margin:14mm}
  html,body{background:#fff}
  body{font-size:11pt; line-height:1.55}
  nav, footer, .no-print, .pdf-btn, .pdf-cta, .theme-btn, .more-btn, .rm-arrow{display:none !important}

  /* modal detail becomes inline appendix so the PDF carries the full plan */
  .more[hidden]{display:block !important; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
  .more h4{font-size:11pt; margin:10px 0 5px; color:var(--blue)}
  .more ul{padding-left:16px; margin:0 0 8px}
  .more li{margin-bottom:2px}

  .hero{padding:0 0 16pt; text-align:left}
  .hero h1{font-size:26pt; max-width:none; margin:10pt 0 6pt}
  .hero .deck{font-size:12pt; max-width:none; margin:0}
  .hero .note{font-size:10.5pt; margin:10pt 0 0; max-width:none}
  .meta{justify-content:flex-start; margin-top:10pt; font-size:9.5pt}
  .flowline{justify-content:flex-start; margin-top:10pt; font-size:10pt}
  .badge{font-size:9pt; padding:3px 9px}

  section{border-top:1px solid var(--line-strong); break-inside:auto}
  section > .container{padding-block:14pt}
  .container{max-width:none; padding-inline:0}
  h2{font-size:17pt}
  h3{font-size:12.5pt; margin:14pt 0 6pt}
  .lead{font-size:11pt; margin:4pt 0 10pt}
  .step-tag{font-size:9pt; padding:2px 10px}

  .roadmap{grid-template-columns:1fr; gap:8pt}
  .rm{min-height:0; padding:12pt; break-inside:avoid}
  .rm h3{font-size:12pt}
  .rm ul{font-size:10pt}

  .stats{grid-template-columns:repeat(3,1fr); gap:8pt}
  .stat{padding:10pt; break-inside:avoid}
  .stat strong{font-size:18pt}

  .scroll{overflow:visible; border:1px solid var(--line-strong)}
  table{min-width:0; font-size:9.5pt}
  th,td{padding:5pt 7pt}
  .card,.rm,.stat,.callout,.gate,.investor,table,.chart,.funnel > div{break-inside:avoid}
  .sec-head{break-after:avoid}
  .investor{background:none; border:1px solid var(--line-strong); padding:14pt}
  .investor .quote{font-size:15pt}
  a{color:inherit; text-decoration:none}
  a[href^="#"]::after{content:""}
}

/* ---------- report cover + layout for print ---------- */
@media print{
  .print-only{display:block}
  .hero{display:none !important}

  /* cover */
  .print-cover{
    break-after:page; height:246mm; display:flex; flex-direction:column;
    padding-top:6mm;
  }
  .pc-rule{height:6pt; background:var(--orange); width:64mm; margin-bottom:16mm}
  .pc-eyebrow{
    font-size:9pt; letter-spacing:.18em; text-transform:uppercase;
    color:var(--orange); font-weight:700;
  }
  .pc-title{
    font-size:44pt; line-height:1.04; font-weight:700; letter-spacing:-.02em;
    margin:8mm 0 0; color:var(--ink);
  }
  .pc-sub{
    font-size:13pt; color:var(--ink-soft); margin:6mm 0 0; max-width:130mm; line-height:1.5;
  }
  .pc-kpi{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    margin-top:auto; border-top:1.5pt solid var(--ink); border-bottom:1pt solid var(--line-strong);
  }
  .pc-kpi > div{padding:6mm 6mm 6mm 0; border-right:1px solid var(--line)}
  .pc-kpi > div:last-child{border-right:none; padding-right:0}
  .pc-kpi small{
    display:block; font-size:8.5pt; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:700;
  }
  .pc-kpi strong{
    display:block; font-family:"Google Sans Code",monospace; font-variant-numeric:tabular-nums;
    font-size:22pt; font-weight:500; color:var(--orange); margin:2mm 0 1.5mm; line-height:1;
  }
  .pc-kpi span{display:block; font-size:9pt; color:var(--ink-soft); line-height:1.4}

  .pc-cols{display:grid; grid-template-columns:1.45fr 1fr; gap:12mm; margin-top:10mm}
  .pc-toc h2{font-size:11pt; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4mm}
  .pc-toc ol{list-style:none; counter-reset:toc; margin:0; padding:0}
  .pc-toc li{
    counter-increment:toc; padding:3mm 0; border-bottom:1px solid var(--line);
    display:grid; grid-template-columns:10mm 1fr;
  }
  .pc-toc li::before{
    content:counter(toc,decimal-leading-zero);
    font-family:"Google Sans Code",monospace; color:var(--orange); font-weight:600; font-size:10pt;
  }
  .pc-toc li span{display:block; font-size:12pt; font-weight:600}
  .pc-toc li em{display:block; grid-column:2; font-style:normal; font-size:9.5pt; color:var(--ink-soft); margin-top:1mm}
  .pc-meta{align-self:start}
  .pc-meta > div{padding:3mm 0; border-bottom:1px solid var(--line)}
  .pc-meta span{
    display:block; font-size:8.5pt; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:700; margin-bottom:1mm;
  }
  .pc-meta b{font-size:10.5pt; font-weight:600}
  .pc-foot{
    margin-top:8mm; padding-top:4mm; border-top:1px solid var(--line);
    font-size:8.5pt; color:var(--ink-faint); line-height:1.5;
  }

  /* section headers get a numbered rule, each starts on its own page */
  section{break-before:page; border-top:none}
  section:first-of-type{break-before:auto}
  .sec-head{
    position:relative; border-top:1.5pt solid var(--ink); padding-top:5mm;
    margin-bottom:7mm; break-after:avoid;
  }
  .print-num{
    font-family:"Google Sans Code",monospace; font-size:9.5pt; font-weight:700;
    color:var(--orange); letter-spacing:.1em; margin-bottom:2mm;
  }
  .step-tag{display:none}
  h2{font-size:20pt; letter-spacing:-.01em}
  .lead{font-size:10.5pt; color:var(--ink-soft)}

  /* financial tables read better right-aligned on paper */
  td.n, th.n{text-align:right}
  td.n.r, th.n.r{text-align:right}
  thead{display:table-header-group}
  tr.total td{border-top:1.2pt solid var(--ink)}
}