:root{
  --ink-900:#070D18;
  --ink-800:#131F35;
  --slate-600:#24314A;
  --slate-400:#4C5D7E;
  --slate-300:#8494B2;
  --luma-300:#FFF2D2;
  --luma-500:#FFC247;
  --luma-700:#FF9A2E;
  --paper:#F6F7F9;

  --display:"Space Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,40px);
  --measure:1120px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
body{
  margin:0;background:var(--ink-900);color:#fff;
  font-family:var(--display);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--luma-500);outline-offset:3px;border-radius:3px;}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);}

/* ── eyebrow / section label ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate-400);
  margin:0 0 20px;
}

/* ── stepped rule: the driving-path cascade as a divider ─────────────── */
.step-rule{display:block;width:100%;height:26px;margin:0;overflow:visible;}
.step-rule path{fill:none;stroke:var(--slate-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.step-rule .lit{stroke:var(--luma-500);stroke-width:3;}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{padding:26px 0 0;}
.nav .row{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;}
.brand svg,.brand img{display:block;width:40px;height:40px;}
.word{font-size:23px;line-height:1;letter-spacing:-0.01em;font-weight:300;white-space:nowrap;}
.word b{font-weight:700;letter-spacing:.015em;}
.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate-300);text-decoration:none;transition:color .18s ease;
}
.nav-links a:hover{color:var(--luma-500);}
@media (max-width:640px){ .nav-links{display:none;} }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{padding:clamp(56px,9vw,104px) 0 0;}
.hero h1{
  font-size:clamp(40px,7.4vw,76px);line-height:1.02;letter-spacing:-0.025em;
  font-weight:300;margin:0;max-width:16ch;
}
.hero h1 .dim{color:var(--slate-300);}
.hero h1 .lit{
  font-weight:700;
  background:linear-gradient(96deg,var(--luma-300) 0%,var(--luma-500) 42%,var(--luma-700) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{
  margin:28px 0 0;max-width:52ch;font-size:clamp(16px,1.7vw,19px);
  line-height:1.6;color:var(--slate-300);
}

/* ── the demo ────────────────────────────────────────────────────────── */
.demo{
  margin-top:clamp(40px,6vw,64px);
  background:linear-gradient(180deg,var(--ink-800) 0%,#0C1526 100%);
  border:1px solid var(--slate-600);border-radius:20px;
  padding:clamp(20px,3.4vw,32px);
}
.demo-head{
  display:flex;flex-wrap:wrap;gap:18px 30px;
  align-items:flex-start;justify-content:space-between;
  padding-bottom:20px;border-bottom:1px solid var(--slate-600);
}
.demo-hint{font-family:var(--mono);font-size:12px;color:var(--slate-400);line-height:1.55;max-width:40ch;margin:0;}
.demo-hint kbd{
  font-family:var(--mono);font-size:11px;background:var(--slate-600);color:#fff;
  border-radius:4px;padding:2px 6px;
}
.readout{text-align:right;flex:0 0 auto;}
.readout .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-400);display:block;margin-bottom:5px;
}
.readout .v{
  font-family:var(--mono);font-size:clamp(20px,3vw,28px);font-weight:500;
  color:var(--luma-500);display:block;line-height:1;
  font-variant-numeric:tabular-nums;
}
.readout .delta{
  font-family:var(--mono);font-size:12px;display:block;margin-top:8px;
  color:var(--slate-300);min-height:1.2em;
}
.readout .delta.slip{color:var(--luma-700);}

/* chart */
.chart{position:relative;margin-top:22px;}
.chart-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.chart-links path{fill:none;stroke:var(--slate-600);stroke-width:1.5;}
.chart-links path.lit{stroke:var(--luma-500);stroke-opacity:.5;stroke-width:2;}

.row{display:grid;grid-template-columns:minmax(96px,132px) 1fr;gap:14px;align-items:center;margin-bottom:7px;}
.row-name{
  font-family:var(--mono);font-size:11.5px;color:var(--slate-300);
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row.is-driving .row-name{color:#fff;}
.track{position:relative;height:26px;}

.bar{
  position:absolute;top:0;height:26px;border:0;padding:0;border-radius:13px;
  background:var(--slate-600);cursor:pointer;
  transition:left .42s cubic-bezier(.22,.61,.36,1),width .42s cubic-bezier(.22,.61,.36,1),
             filter .18s ease,transform .18s ease;
  display:flex;align-items:center;
}
.bar:hover{filter:brightness(1.35);transform:translateY(-1px);}
.bar.is-driving{
  background:linear-gradient(90deg,var(--luma-300) 0%,var(--luma-500) 42%,var(--luma-700) 100%);
}
.bar .dur{
  font-family:var(--mono);font-size:10.5px;color:var(--slate-300);
  padding-inline:11px;pointer-events:none;
}
.bar.is-driving .dur{color:#3A2606;font-weight:500;}
.bar.is-delayed{box-shadow:inset 0 0 0 1.5px var(--luma-300);}

.float{
  position:absolute;top:11px;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--slate-600) 0 5px,transparent 5px 10px);
  transition:left .42s cubic-bezier(.22,.61,.36,1),width .42s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

/* On a phone the label column is competing with the thing it labels. Give the
   track the width back: shorter labels, tighter bars, smaller type. */
@media (max-width:600px){
  .row{grid-template-columns:minmax(58px,72px) 1fr;gap:9px;margin-bottom:6px;}
  .row-name{font-size:9.5px;}
  .track,.bar{height:20px;}
  .bar{border-radius:10px;}
  .bar .dur{font-size:9px;padding-inline:7px;}
  .float{top:8.5px;}
  .demo-head{gap:14px;}
  .readout{text-align:left;}
  .demo-hint{font-size:11px;}
}

.demo-foot{
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--slate-600);
}
.legend{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:11px;color:var(--slate-400);}
.legend span{display:flex;align-items:center;gap:7px;}
.legend i{width:16px;height:8px;border-radius:4px;background:var(--slate-600);display:block;}
.legend i.lit{background:linear-gradient(90deg,var(--luma-500),var(--luma-700));}
.legend i.fl{height:3px;background:repeating-linear-gradient(90deg,var(--slate-600) 0 4px,transparent 4px 8px);}
.reset{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;border:1px solid var(--slate-600);color:var(--slate-300);
  border-radius:999px;padding:8px 16px;cursor:pointer;transition:all .18s ease;
}
.reset:hover{border-color:var(--luma-500);color:var(--luma-500);}
.reset[disabled]{opacity:.32;cursor:default;}
.reset[disabled]:hover{border-color:var(--slate-600);color:var(--slate-300);}

/* ── generic section ─────────────────────────────────────────────────── */
.sec{padding:clamp(64px,10vw,120px) 0 0;}
.sec h2{
  font-size:clamp(28px,4.4vw,46px);line-height:1.08;letter-spacing:-0.02em;
  font-weight:300;margin:0;max-width:20ch;
}
.sec h2 b{font-weight:700;}
.sec .body{margin:22px 0 0;max-width:56ch;font-size:16.5px;line-height:1.65;color:var(--slate-300);}
.sec .body + .body{margin-top:16px;}
.sec .body strong{color:#fff;font-weight:500;}

/* two-column split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }

/* ── spec list: mono key/value, for anything with a fact in it ───────── */
.spec{border-top:1px solid var(--slate-600);margin:0;}
.spec div{
  display:grid;grid-template-columns:minmax(112px,150px) 1fr;gap:10px 22px;
  padding:15px 0;border-bottom:1px solid var(--slate-600);align-items:baseline;
}
.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--luma-500);}
.spec dd{margin:0;font-size:14.5px;color:var(--slate-300);line-height:1.55;}
.spec dd b{color:#fff;font-weight:500;}
@media (max-width:520px){ .spec div{grid-template-columns:1fr;gap:5px;} }

/* ── metric strip ────────────────────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:var(--slate-600);border:1px solid var(--slate-600);border-radius:16px;overflow:hidden;margin-top:38px;}
.metric{background:var(--ink-900);padding:26px 24px;}
.metric .n{
  font-family:var(--mono);font-size:clamp(24px,3.4vw,32px);font-weight:500;color:#fff;
  display:block;line-height:1;font-variant-numeric:tabular-nums;
}
.metric .l{font-family:var(--mono);font-size:11px;color:var(--slate-400);display:block;margin-top:11px;line-height:1.5;}

/* ── platforms ───────────────────────────────────────────────────────── */
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:38px;}
.plat{border:1px solid var(--slate-600);border-radius:16px;padding:26px 24px;background:var(--ink-800);}
.plat h3{margin:0 0 9px;font-size:17px;font-weight:500;}
.plat p{margin:0;font-size:14px;color:var(--slate-300);line-height:1.6;}
.plat .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--luma-500);display:block;margin-bottom:14px;
}

/* ── closing ─────────────────────────────────────────────────────────── */
.close{padding:clamp(72px,11vw,132px) 0 0;text-align:center;}
.close h2{margin-inline:auto;max-width:22ch;}
.close .body{margin-inline:auto;}

footer{margin-top:clamp(64px,9vw,104px);padding:34px 0 44px;border-top:1px solid var(--slate-600);}
footer .row{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:space-between;}
footer .word{font-size:17px;}
footer p{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--slate-400);}

/* ═══════════════════════════════════════════════════════════════════════
   Multi-page additions. Everything above this line came from the original
   one-page site and is unchanged, so the home page still renders identically.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── nav: current page, and a menu that survives a phone ─────────────── */
.nav-links a[aria-current="page"]{color:var(--luma-500);}
@media (max-width:640px){
  .nav-links{
    display:flex;gap:0 16px;flex-wrap:wrap;
    margin-top:18px;padding-top:16px;border-top:1px solid var(--slate-600);
    width:100%;
  }
  .nav .row{flex-wrap:wrap;}
  .nav-links a{font-size:10.5px;letter-spacing:.06em;}
}

/* ── page header (every page except home) ────────────────────────────── */
.page-head{padding:clamp(44px,7vw,76px) 0 0;}
.page-head h1{
  font-size:clamp(32px,5.6vw,58px);line-height:1.05;letter-spacing:-0.022em;
  font-weight:300;margin:0;max-width:19ch;
}
.page-head h1 b{font-weight:700;}
.page-head .lede{
  margin:24px 0 0;max-width:62ch;font-size:clamp(15.5px,1.6vw,18px);
  line-height:1.62;color:var(--slate-300);
}
.page-head .lede strong{color:#fff;font-weight:500;}

/* ── feature groups ──────────────────────────────────────────────────── */
.group{padding:clamp(48px,7vw,84px) 0 0;}
.group > h2{
  font-size:clamp(23px,3vw,32px);line-height:1.12;letter-spacing:-0.018em;
  font-weight:300;margin:0 0 6px;max-width:24ch;
}
.group > h2 b{font-weight:700;}
.group > .body{margin:14px 0 0;max-width:58ch;font-size:15.5px;line-height:1.62;color:var(--slate-300);}
.group > .body strong{color:#fff;font-weight:500;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin-top:30px;}
.card{
  border:1px solid var(--slate-600);border-radius:15px;padding:22px 21px;
  background:var(--ink-800);display:flex;flex-direction:column;gap:9px;
}
.card h3{margin:0;font-size:15.5px;font-weight:500;line-height:1.35;}
.card p{margin:0;font-size:13.8px;color:var(--slate-300);line-height:1.6;}
.card p b,.card p strong{color:#fff;font-weight:500;}
.card .tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--luma-500);
}
.card.is-soon{border-style:dashed;background:transparent;}
.card.is-soon .tag{color:var(--slate-400);}

/* ── link cards (home → the deeper pages) ────────────────────────────── */
a.card{text-decoration:none;transition:border-color .18s ease,transform .18s ease;}
a.card:hover{border-color:var(--luma-500);transform:translateY(-2px);}
a.card .more{
  font-family:var(--mono);font-size:11px;color:var(--luma-500);margin-top:auto;padding-top:6px;
}

/* ── comparison table ────────────────────────────────────────────────── */
.tablewrap{
  margin-top:34px;overflow-x:auto;border:1px solid var(--slate-600);border-radius:16px;
  -webkit-overflow-scrolling:touch;
}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:13.6px;}
table.cmp th,table.cmp td{
  padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--slate-600);line-height:1.5;
}
table.cmp thead th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-400);font-weight:500;background:var(--ink-800);white-space:nowrap;
}
table.cmp thead th.us{color:var(--luma-500);}
table.cmp tbody th{
  font-weight:400;color:#fff;font-size:13.6px;white-space:nowrap;
}
table.cmp td{color:var(--slate-300);}
table.cmp td.us{color:#fff;background:rgba(255,194,71,.045);}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0;}
/* Specificity note: `table.cmp td` sets the base colour, so these need to
   out-rank it. The accent is spent only where LumaPlan actually wins a row —
   competitor gaps are dimmed rather than lit, and neutral cells stay neutral. */
table.cmp td.us.yes{color:var(--luma-500);}
table.cmp td.no{color:var(--slate-400);}
.tnote{
  margin:14px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--slate-400);
}

/* ── checklist (rules, formats, anything enumerable) ─────────────────── */
ul.checks{list-style:none;margin:26px 0 0;padding:0;columns:2;column-gap:34px;}
@media (max-width:720px){ ul.checks{columns:1;} }
ul.checks li{
  break-inside:avoid;padding:9px 0 9px 24px;position:relative;
  font-size:14px;line-height:1.55;color:var(--slate-300);
  border-bottom:1px solid rgba(36,49,74,.6);
}
ul.checks li::before{
  content:"";position:absolute;left:0;top:15px;
  width:9px;height:9px;border-radius:2px;background:var(--luma-500);
}
ul.checks li code{
  font-family:var(--mono);font-size:11px;color:var(--slate-400);
  display:block;margin-top:3px;letter-spacing:.03em;
}

/* ── callout: the honest caveat, used deliberately ───────────────────── */
.note{
  margin-top:32px;border:1px solid var(--slate-600);border-left:3px solid var(--luma-700);
  border-radius:0 14px 14px 0;padding:20px 24px;background:var(--ink-800);
}
.note p{margin:0;font-size:14.2px;line-height:1.65;color:var(--slate-300);}
.note p + p{margin-top:11px;}
.note strong{color:#fff;font-weight:500;}
.note .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--luma-700);display:block;margin-bottom:10px;
}

/* ── status pills (roadmap) ──────────────────────────────────────────── */
.phases{margin-top:34px;border-top:1px solid var(--slate-600);}
.phase{
  display:grid;grid-template-columns:118px 1fr;gap:10px 24px;
  padding:20px 0;border-bottom:1px solid var(--slate-600);align-items:start;
}
@media (max-width:640px){ .phase{grid-template-columns:1fr;gap:9px;} }
.phase h3{margin:0 0 7px;font-size:16px;font-weight:500;line-height:1.35;}
.phase p{margin:0;font-size:14px;color:var(--slate-300);line-height:1.6;}
.pill{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--slate-600);border-radius:999px;padding:5px 11px;
  color:var(--slate-400);display:inline-block;white-space:nowrap;
}
.pill.shipped{border-color:var(--luma-500);color:var(--luma-500);}
.pill.wip{border-color:var(--slate-400);color:var(--slate-300);}

/* ── footer, now that it carries navigation ──────────────────────────── */
footer .cols{
  display:grid;grid-template-columns:1.4fr repeat(2,minmax(120px,auto));
  gap:28px 40px;align-items:start;
}
@media (max-width:640px){ footer .cols{grid-template-columns:1fr 1fr;} }
footer .col h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-400);margin:0 0 13px;font-weight:500;
}
footer .col a{
  display:block;font-size:13.5px;color:var(--slate-300);text-decoration:none;
  padding:4px 0;transition:color .18s ease;
}
footer .col a:hover{color:var(--luma-500);}
footer .tagline{margin-top:26px;padding-top:20px;border-top:1px solid var(--slate-600);}