/* ============================================================
   Volty — design tokens
   Palette bound from the human-approachable direction.
   Dark surfaces + status colours derived with oklch().
   ============================================================ */
:root{
  --bg:      oklch(98% 0.004 240);
  --surface: oklch(100% 0 0);
  --fg:      oklch(20% 0.02 240);
  --muted:   oklch(50% 0.018 240);
  --border:  oklch(90% 0.006 240);
  --accent:  oklch(86% 0.175 95);

  /* derived */
  --accent-text:   oklch(51% 0.13 80);     /* deep gold — yellow is unreadable on light, 5.7:1 */
  --accent-bright: oklch(87% 0.165 97);    /* 12.3:1 on --ink, where yellow belongs */
  --accent-wash:   oklch(96.5% 0.055 98);
  --accent-hover:  oklch(92% 0.16 100);
  --accent-cta:    oklch(86% 0.175 95);    /* 12.3:1 with --on-cta */
  --accent-cta-hi: oklch(93% 0.16 100);    /* hover: contrast rises to 15.3:1 */
  --on-cta:        oklch(18% 0.03 95);

  --ink:        oklch(21% 0.022 245);
  --ink-2:      oklch(26.5% 0.024 245);
  --ink-3:      oklch(32% 0.024 245);
  --ink-line:   oklch(100% 0 0 / 0.10);
  --ink-line-2: oklch(100% 0 0 / 0.16);
  --on-ink:     oklch(97% 0.004 240);
  --on-ink-dim: oklch(76% 0.012 240);

  /* live / available status — deliberately NOT the brand accent */
  --live:        oklch(66% 0.145 162);     /* solid fills: map pin */
  --live-text:   oklch(47% 0.12 162);      /* 6.8:1 on light, 6.2:1 on --live-wash */
  --live-bright: oklch(80% 0.16 160);      /* 9.5:1 on --ink */
  --live-wash:   oklch(96.5% 0.035 165);
  --on-live:     oklch(17% 0.02 160);      /* 6.0:1 on --live */

  --occupied: oklch(72% 0.015 250);        /* "in use" — neutral, sits between live and fault */
  --danger: oklch(60% 0.17 27);

  --font-display: 'Plus Jakarta Sans', 'Söhne', 'Avenir Next', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px;
  --maxw: 1140px;
  --pad: clamp(20px, 5vw, 40px);
  --shadow-1: 0 1px 2px oklch(20% 0.02 240 / .05), 0 4px 14px oklch(20% 0.02 240 / .05);
  --shadow-2: 0 2px 6px oklch(20% 0.02 240 / .06), 0 18px 44px oklch(20% 0.02 240 / .10);
  --ease: cubic-bezier(.22,.68,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  font-weight:400; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent-text); outline-offset:3px; border-radius:6px;
}
.on-ink :where(a,button,input,summary,[tabindex]):focus-visible{ outline-color:var(--accent-bright); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.eyebrow{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.on-ink .eyebrow{ color:var(--on-ink-dim); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.h-display{ font-size:clamp(42px,8.4vw,86px); line-height:1.0; letter-spacing:-.035em; font-weight:800; }
.hero-stop{ display:inline-block; transform:rotate(35deg); transform-origin:50% 70%; }
.h2{ font-size:clamp(30px,4.6vw,50px); line-height:1.08; letter-spacing:-.025em; font-weight:700; }
.h3{ font-size:clamp(20px,2.4vw,25px); line-height:1.2; letter-spacing:-.015em; font-weight:700; }
.lead{ font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:var(--muted); max-width:60ch; }
.on-ink .lead{ color:var(--on-ink-dim); }
.small{ font-size:14px; line-height:1.55; letter-spacing:.01em; }
.cap{ font-size:12.5px; line-height:1.5; letter-spacing:.015em; color:var(--muted); }
.on-ink .cap{ color:var(--on-ink-dim); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  font-family:var(--font-body); font-weight:600; font-size:16px; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn-primary{ background:var(--accent-cta); color:var(--on-cta); box-shadow:0 6px 20px oklch(80% 0.16 95 / .42); }
.btn-primary:hover{ background:var(--accent-cta-hi); color:oklch(13% 0.02 245); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 2px 10px oklch(80% 0.16 95 / .38); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--fg); }
.btn-ghost:hover{ background:oklch(94% 0.006 240); border-color:oklch(84% 0.008 240); }
.on-ink .btn-ghost{ border-color:var(--ink-line-2); color:var(--on-ink); }
.on-ink .btn-ghost:hover{ background:oklch(100% 0 0 / .10); border-color:oklch(100% 0 0 / .3); color:#fff; }
.btn-sm{ min-height:44px; padding:0 20px; font-size:15px; }
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:600; font-size:16px; text-decoration:none; color:var(--fg);
  border-bottom:2px solid transparent; transition:border-color .18s var(--ease);
}
.on-ink .link-arrow{ color:var(--on-ink); }
.link-arrow:hover{ border-bottom-color:currentColor; }
.link-arrow svg{ transition:transform .2s var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.logo-mark{
  width:38px; height:38px; border-radius:12px; background:var(--accent);
  display:grid; place-items:center; flex:none;
  transition:transform .25s var(--ease), background-color .2s var(--ease);
}
.logo:hover .logo-mark{ transform:rotate(-8deg) scale(1.04); background:var(--accent-hover); }
.logo-mark svg{ width:22px; height:22px; color:var(--on-cta); display:block; }
.logo-word{ font-family:var(--font-display); font-weight:800; font-size:23px; letter-spacing:-.03em; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.stuck{ background:oklch(21% 0.022 245 / .88); backdrop-filter:blur(14px); border-bottom-color:var(--ink-line); }
.nav-in{ display:flex; align-items:center; gap:28px; height:78px; }
.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px;
  font-size:15px; font-weight:500; letter-spacing:.005em; text-decoration:none; color:var(--on-ink-dim);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.nav-links a:hover{ background:oklch(100% 0 0 / .09); color:var(--on-ink); }
.nav-cta{ margin-left:6px; }
@media (max-width:880px){ .nav-links{ display:none; } .nav-cta{ margin-left:auto; } }

/* ---------- dark section shell ---------- */
.ink{ background:var(--ink); color:var(--on-ink); position:relative; }
.ink h1,.ink h2,.ink h3{ color:var(--on-ink); }

/* ---------- hero ---------- */
.hero{ padding-bottom:clamp(72px,10vw,120px); position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:min(1400px,140%); height:1px;
  transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--ink-line-2),transparent);
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(32px,5vw,64px); align-items:center; padding-top:clamp(40px,6vw,64px); }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:48px; } }
.chip-live{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 12px; border-radius:999px;
  border:1px solid var(--ink-line-2); background:oklch(100% 0 0 / .05);
  font-size:12.5px; font-weight:600; letter-spacing:.075em; text-transform:uppercase; color:var(--on-ink);
}
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--live-bright); flex:none; box-shadow:0 0 0 0 oklch(80% 0.16 160 / .65); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px oklch(80% 0.16 160 / 0);} 100%{ box-shadow:0 0 0 0 oklch(80% 0.16 160 / 0);} }
.hero h1{ margin:24px 0 0; }
.hero h1 .bolt-word{ color:var(--accent-bright); white-space:nowrap; }
.hero-sub{ margin-top:22px; max-width:52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px; }
.hero-note{ margin-top:16px; font-size:13px; color:var(--on-ink-dim); letter-spacing:.01em; }

.statbar{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; margin-top:clamp(48px,6vw,72px); border-top:1px solid var(--ink-line); padding-top:28px; }
@media (max-width:560px){ .statbar{ grid-template-columns:1fr; gap:22px; } }
.stat-n{ font-family:var(--font-display); font-size:clamp(28px,3.4vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-l{ margin-top:9px; font-size:13.5px; line-height:1.45; color:var(--on-ink-dim); max-width:22ch; }
.src{ margin-top:22px; font-size:12px; color:oklch(64% 0.012 240); letter-spacing:.012em; }
.src a{ color:oklch(74% 0.012 240); text-underline-offset:3px; }
.src a:hover{ color:var(--on-ink); }

/* ---------- phone ---------- */
.phone-stage{ position:relative; display:flex; justify-content:center; }
.phone{
  width:min(340px,88vw); border-radius:44px; background:oklch(14% 0.015 245);
  padding:11px; box-shadow:0 40px 90px oklch(10% 0.02 245 / .6), 0 0 0 1px var(--ink-line-2);
  position:relative;
}
.phone-screen{ border-radius:34px; background:var(--surface); overflow:hidden; color:var(--fg); }
.ph-top{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px 6px; font-size:12px; font-weight:600; letter-spacing:.02em; }
.ph-map{ position:relative; height:186px; background:
  radial-gradient(circle at 22% 30%, oklch(94% 0.02 170) 0 22%, transparent 22.5%),
  linear-gradient(oklch(96.5% 0.006 240), oklch(94% 0.006 240)); overflow:hidden; }
.ph-road{ position:absolute; background:oklch(88% 0.006 240); border-radius:99px; }
.pin{
  position:absolute; width:30px; height:30px; border-radius:50% 50% 50% 6px; transform:rotate(-45deg);
  display:grid; place-items:center; box-shadow:0 4px 10px oklch(20% .02 240/.25);
}
.pin svg{ transform:rotate(45deg); width:14px; height:14px; }
.pin-a{ background:var(--live); color:var(--on-live); }
.pin-b{ background:var(--occupied); color:oklch(26% 0.02 250); }
.pin-c{ background:var(--surface); color:var(--muted); border:1px solid var(--border); }
.ph-search{
  position:absolute; left:12px; right:12px; top:12px; display:flex; align-items:center; gap:9px;
  background:var(--surface); border-radius:14px; padding:11px 13px; box-shadow:var(--shadow-1);
  font-size:13px; font-weight:500;
}
.ph-list{ padding:12px; display:grid; gap:8px; }
.ph-chips{ display:flex; gap:6px; padding:0 12px 2px; }
.ph-chip{ font-size:11px; font-weight:600; letter-spacing:.03em; padding:6px 11px; border-radius:999px; background:oklch(95% 0.006 240); color:var(--muted); }
.ph-chip.on{ background:var(--fg); color:var(--surface); }
.ph-card{ border:1px solid var(--border); border-radius:16px; padding:12px 13px; background:var(--surface); }
.ph-card-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ph-name{ font-size:14px; font-weight:600; letter-spacing:-.005em; }
.ph-price{ font-family:var(--font-mono); font-size:14px; font-weight:700; }
.ph-meta{ display:flex; align-items:center; gap:7px; margin-top:7px; font-size:11.5px; color:var(--muted); letter-spacing:.015em; }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--border); flex:none; }
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.075em; text-transform:uppercase;
}
.badge-free{ background:var(--live-wash); color:var(--live-text); }
.badge-busy{ background:oklch(94.5% 0.008 250); color:oklch(44% 0.02 250); }
.badge-off{ background:oklch(96% 0.03 27); color:oklch(45% 0.15 27); }
.badge-i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.float-card{
  position:absolute; background:var(--surface); color:var(--fg); border-radius:var(--r-sm);
  padding:12px 15px; box-shadow:var(--shadow-2); border:1px solid var(--border);
}
@media (max-width:980px){ .float-card{ display:none; } }

/* ---------- generic section ---------- */
.sec{ padding-block:clamp(72px,9vw,124px); }
.sec-head{ max-width:64ch; }
.sec-head .h2{ margin-top:16px; }
.sec-head .lead{ margin-top:20px; }
.sec-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }

/* ---------- fragmentation ---------- */
.frag{ display:grid; grid-template-columns:minmax(0,1.25fr) auto minmax(0,.75fr); gap:clamp(20px,3.4vw,44px); align-items:center; margin-top:clamp(40px,5vw,60px); }
@media (max-width:900px){ .frag{ grid-template-columns:1fr; } .frag-arrow{ transform:rotate(90deg); justify-self:center; } }
.frag-stack{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:520px){ .frag-stack{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.frag-app{
  background:var(--surface); border:1px solid oklch(30% .02 240 / .18); border-radius:var(--r-sm);
  padding:14px 13px; box-shadow:0 1px 2px oklch(20% .02 240/.08); transform-origin:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.frag-app:nth-child(odd){ transform:rotate(-.7deg); }
.frag-app:nth-child(even){ transform:rotate(.7deg); }
.frag-app:hover{ transform:rotate(0deg) translateY(-3px); box-shadow:var(--shadow-1); }
.frag-app b{ display:block; font-family:var(--font-display); font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.frag-app span{ display:block; margin-top:5px; font-size:11.5px; letter-spacing:.02em; color:var(--muted); }
.frag-app:nth-child(1){ background: #c9c9c9; }
.frag-app:nth-child(2){ background: #c9c9c9; }
.frag-app:nth-child(3){ background: #c9c9c9; }
.frag-app:nth-child(4){ background: #c9c9c9; }
.frag-app:nth-child(5){ background: #c9c9c9; }
.frag-app:nth-child(6){ background: #c9c9c9; }
.frag-arrow{ color:var(--muted); }
.frag-one{
  background:var(--ink); color:var(--on-ink); border-radius:var(--r-lg); padding:26px 24px 24px;
  box-shadow:var(--shadow-2);
}
.frag-one .logo-word{ font-size:20px; }
.frag-one p{ margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--on-ink-dim); }
.frag-one ul{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.frag-one li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--on-ink); }
.frag-one li svg{ flex:none; margin-top:2px; color:var(--accent-bright); }

/* ---------- price module ---------- */
.price-panel{
  margin-top:clamp(36px,4.5vw,52px); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-2); overflow:hidden;
}
.price-bar{
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,3vw,32px); border-bottom:1px solid var(--border); background:oklch(99% 0.003 240);
}
.slider-group{ display:flex; align-items:center; gap:16px; flex:1 1 320px; min-width:0; }
.slider-group label{ font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--muted); white-space:nowrap; }
.ink .slider-group label{ color:var(--on-ink-dim); }
input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; flex:1; min-width:120px; height:44px; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:99px; background:var(--border); }
input[type=range]::-moz-range-track{ height:6px; border-radius:99px; background:var(--border); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%;
  background:var(--accent); border:3px solid var(--surface);
  box-shadow:0 0 0 1.5px var(--accent-text), 0 2px 8px oklch(20% .02 240/.28);
  transition:transform .15s var(--ease), background-color .15s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--accent);
  border:3px solid var(--surface); box-shadow:0 0 0 1.5px var(--accent-text), 0 2px 8px oklch(20% .02 240/.28);
}
input[type=range]:hover::-webkit-slider-thumb{ background:var(--accent-hover); transform:scale(1.08); }
.ink input[type=range]::-webkit-slider-runnable-track{ background:var(--ink-line-2); }
.ink input[type=range]::-moz-range-track{ background:var(--ink-line-2); }
.ink input[type=range]::-webkit-slider-thumb{ background:var(--accent-bright); border-color:var(--ink-2); }
.ink input[type=range]::-moz-range-thumb{ background:var(--accent-bright); border-color:var(--ink-2); }
.slider-val{ font-family:var(--font-mono); font-size:15px; font-weight:700; min-width:7.5ch; text-align:right; }
.seg{ display:inline-flex; padding:3px; background:oklch(95% 0.005 240); border-radius:999px; }
.seg button{
  min-height:38px; padding:0 15px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  font-size:13.5px; font-weight:600; letter-spacing:.01em; color:var(--muted);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.seg button:hover{ background:oklch(89% 0.006 240); color:var(--fg); }
.seg button[aria-pressed="true"]{ background:var(--fg); color:var(--surface); }
.seg button[aria-pressed="true"]:hover{ background:oklch(13% 0.02 240); color:var(--surface); }

.plist{ padding:clamp(14px,2.4vw,22px) clamp(14px,3vw,32px) 8px; }
.prow{
  display:grid; grid-template-columns:minmax(140px,1.5fr) minmax(0,2.2fr) 74px 92px;
  align-items:center; gap:clamp(10px,2vw,20px); padding:15px 0; border-bottom:1px solid var(--border);
}
.prow:last-of-type{ border-bottom:0; }
@media (max-width:760px){
  .prow{ grid-template-columns:1fr 74px 92px; grid-template-areas:"n r c" "b b b"; row-gap:10px; }
  .p-name{grid-area:n;} .p-rate{grid-area:r;} .p-cost{grid-area:c;} .p-bar{grid-area:b;}
}
.p-name{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.p-bar{ height:12px; border-radius:99px; background:oklch(95% 0.005 240); overflow:hidden; }
.p-fill{ height:100%; border-radius:99px; background:oklch(80% 0.03 240); transition:width .45s var(--ease), background-color .3s var(--ease); }
.prow.best .p-fill{ background:var(--live-text); }
.prow.avg{ background:oklch(98.5% 0.004 240); }
.prow.avg .p-fill{ background:repeating-linear-gradient(135deg, oklch(78% 0.012 240) 0 6px, oklch(86% 0.008 240) 6px 12px); }
.p-rate,.p-cost{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.p-rate{ font-size:14px; color:var(--muted); }
.p-cost{ font-size:18px; font-weight:700; letter-spacing:-.02em; }
.prow.best .p-cost{ color:var(--live-text); }
.tag-best{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--live-text); background:var(--live-wash); padding:3px 8px; border-radius:999px; }
.price-foot{
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,3vw,32px) 22px; border-top:1px solid var(--border); background:oklch(99% 0.003 240);
}
.saving{ font-size:15px; }
.saving b{ font-family:var(--font-mono); font-size:17px; color:var(--live-text); letter-spacing:-.01em; }

/* ---------- Volty pricing ---------- */
.fee-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); margin-top:clamp(36px,4.5vw,52px); }
@media (max-width:640px){ .fee-grid{ grid-template-columns:1fr; } }
.fee-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(22px,2.8vw,30px); box-shadow:var(--shadow-1); }
.fee-card.featured{ background:var(--ink); border-color:transparent; color:var(--on-ink); box-shadow:var(--shadow-2); }
.fee-card h3{ font-size:21px; letter-spacing:-.02em; }
.fee-card p{ margin-top:10px; font-size:15px; line-height:1.55; color:var(--muted); }
.fee-card.featured p{ color:var(--on-ink-dim); }
.fee-amount{ display:block; margin-top:20px; font-family:var(--font-mono); font-size:clamp(28px,3.5vw,38px); font-weight:700; letter-spacing:-.04em; line-height:1; }
.fee-card.featured .fee-amount{ color:var(--accent-bright); }
.fee-note{ margin-top:clamp(20px,2.5vw,28px); padding:18px 20px; border-left:3px solid var(--accent-text); background:var(--accent-wash); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:15px; line-height:1.6; }
.fee-note b{ font-family:var(--font-mono); }

/* ---------- feature grid ---------- */
.fgrid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); margin-top:clamp(40px,5vw,58px); }
.fcard{
  grid-column:span 4; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,28px); display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:oklch(84% 0.008 240); }
.fcard.wide{ grid-column:span 6; }
.fcard.dark{ background:var(--ink); border-color:transparent; color:var(--on-ink); }
.fcard.dark h3{ color:var(--on-ink); }
.fcard.dark p{ color:var(--on-ink-dim); }
@media (max-width:900px){ .fcard{ grid-column:span 6; } .fcard.wide{ grid-column:span 12; } }
@media (max-width:600px){ .fcard, .fcard.wide{ grid-column:span 12; } }
.ficon{
  width:44px; height:44px; border-radius:13px; background:var(--accent-wash); color:var(--accent-text);
  display:grid; place-items:center; margin-bottom:18px; flex:none;
  transition:background-color .25s var(--ease);
}
.fcard.dark .ficon{ background:oklch(100% 0 0 / .09); color:var(--accent-bright); }
.fcard:hover .ficon{ background:oklch(93% 0.09 98); }
.fcard.dark:hover .ficon{ background:oklch(100% 0 0 / .16); }
.fcard h3{ font-size:19px; letter-spacing:-.015em; }
.fcard p{ margin-top:9px; font-size:15px; line-height:1.55; color:var(--muted); }
.soon{
  display:inline-block; align-self:flex-start; margin-top:16px; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--border); padding:4px 10px; border-radius:999px;
}
.fcard.dark .soon{ color:var(--on-ink-dim); border-color:var(--ink-line-2); }
.fmini{ margin-top:20px; }
.avail-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--ink-line); font-size:13.5px; }
.avail-row .mono{ margin-left:auto; font-size:13px; color:var(--on-ink-dim); }

.journey{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,68px); align-items:center; }
@media (max-width:940px){ .journey{ grid-template-columns:1fr; gap:40px; } }
.planner{
  background:var(--ink-2); border:1px solid var(--ink-line); border-radius:var(--r-xl);
  padding:clamp(22px,3vw,32px); box-shadow:0 30px 70px oklch(10% .02 245 / .45);
}
.planner-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.route-name{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.015em; }
.route-dist{ font-family:var(--font-mono); font-size:13px; color:var(--on-ink-dim); }
.route-strip{ position:relative; margin:30px 0 8px; height:8px; border-radius:99px; background:var(--ink-3); }
.route-done{ position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--accent-bright); transition:width .4s var(--ease); }
.route-end{ position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:var(--ink-3); border:3px solid var(--ink-2); }
.stop-pin{
  position:absolute; top:50%; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%;
  background:var(--accent-bright); color:var(--on-cta); display:grid; place-items:center;
  border:3px solid var(--ink-2); font-family:var(--font-mono); font-size:11px; font-weight:700;
  transition:left .4s var(--ease);
}
.route-labels{ display:flex; justify-content:space-between; font-size:12px; letter-spacing:.03em; color:var(--on-ink-dim); margin-top:16px; }
.planner-out{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; margin-top:26px; border-top:1px solid var(--ink-line); padding-top:22px; }
@media (max-width:440px){ .planner-out{ grid-template-columns:1fr 1fr; row-gap:20px; } }
.po-n{ font-family:var(--font-display); font-size:clamp(24px,3vw,30px); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.po-l{ margin-top:7px; font-size:12.5px; letter-spacing:.02em; color:var(--on-ink-dim); }
.assump{ margin-top:22px; padding-top:18px; border-top:1px solid var(--ink-line); font-size:12px; line-height:1.6; color:oklch(66% .012 240); }
.assump b{ color:var(--on-ink-dim); font-weight:600; }

/* ---------- history ---------- */
.acct{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:940px){ .acct{ grid-template-columns:1fr; gap:36px; } }
.receipt{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-2); overflow:hidden; }
.receipt-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); }
.receipt-top h3{ font-size:16px; letter-spacing:-.01em; }
.rrow{ display:grid; grid-template-columns:minmax(0,1fr) 78px 80px; gap:14px; align-items:center; padding:15px 24px; border-bottom:1px solid var(--border); transition:background-color .18s var(--ease); }
.rrow:hover{ background:oklch(97% 0.004 240); }
.rr-name{ font-size:15px; font-weight:500; letter-spacing:-.005em; }
.rr-sub{ font-size:12px; color:var(--muted); letter-spacing:.02em; margin-top:3px; }
.rr-kwh{ font-family:var(--font-mono); font-size:13px; color:var(--muted); text-align:right; }
.rr-amt{ font-family:var(--font-mono); font-size:16px; font-weight:700; text-align:right; letter-spacing:-.02em; }
.receipt-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:20px 24px; background:oklch(99% .003 240); }
.receipt-foot .tot{ font-family:var(--font-mono); font-size:24px; font-weight:700; letter-spacing:-.03em; }
.checklist{ margin:26px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.5; }
.checklist svg{ flex:none; margin-top:3px; color:var(--accent-text); }

/* ---------- roadmap ---------- */
.rm-status{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.085em;
  text-transform:uppercase; white-space:nowrap; border:1px solid transparent;
}
.rm-status.is-now{ background:var(--live-wash); color:var(--live-text); border-color:oklch(88% .055 165); }
.rm-status.is-now .pulse{ width:8px; height:8px; background:var(--live); box-shadow:0 0 0 0 oklch(66% .145 162 / .55); }
.rm-status.is-planned{ background:oklch(96.5% .004 240); color:var(--muted); border-color:var(--border); }
.rm-status.is-later{ background:transparent; color:var(--muted); border-color:var(--border); }
.rm-order{ font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--fg); }
.rm-status-set{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; min-width:0; }

/* stage viewer — one card, swapped by the timeline below it */
.rm-now{
  margin-top:clamp(30px,3.6vw,44px); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-2); overflow:hidden; scroll-margin-top:100px;
}
.rm-rail{ display:block; height:4px; background:oklch(88% .008 240); transition:background-color .3s var(--ease); }
.rm-now[data-active="discover"] .rm-rail{ background:var(--accent); }
.rm-now-in{ padding:clamp(22px,2.8vw,38px); }
.rm-vp[hidden]{ display:none; }
.rm-vp{ animation:rmIn .34s var(--ease) both; }
@keyframes rmIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .rm-vp{ animation:none; } }
.rm-now-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; }
.rm-count{ font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.rm-now-title{ font-size:clamp(32px,4.4vw,50px); font-weight:800; letter-spacing:-.03em; line-height:1.03; }
.rm-now-lead{ margin-top:15px; font-size:clamp(16px,1.5vw,18px); line-height:1.6; color:var(--muted); max-width:48ch; }

/* two columns: the argument on the left, the shipping list on the right */
.rm-vp-body{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(20px,2.6vw,34px); margin-top:clamp(18px,2.2vw,26px);
}
.rm-vp-main{ min-width:0; }
@media (max-width:900px){ .rm-vp-body{ grid-template-columns:1fr; gap:26px; } }
.rm-why{ margin-top:clamp(20px,2.4vw,28px); padding-top:clamp(18px,2.2vw,24px); border-top:1px solid var(--border); }
.rm-why h4{ font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.rm-why p{ margin-top:10px; font-size:15px; line-height:1.6; max-width:56ch; }
.rm-groups{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px); align-content:start; min-width:0;
  padding-left:clamp(20px,2.6vw,34px); border-left:1px solid var(--border);
}
@media (max-width:900px){
  .rm-groups{ padding-left:0; border-left:0; padding-top:26px; border-top:1px solid var(--border); }
}
.rm-group h4{ font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.rm-feats{ margin:10px 0 0; padding:0; list-style:none; }
.rm-feats li{
  display:flex; gap:9px; align-items:flex-start; font-size:14.5px; line-height:1.45;
  padding:7px 0; border-top:1px solid var(--border); letter-spacing:-.005em; overflow-wrap:anywhere;
}
.rm-feats li svg{ flex:none; margin-top:2px; color:var(--live-text); }
.rm-tick{ flex:none; width:5px; height:5px; border-radius:50%; margin-top:7px; background:oklch(78% .01 240); }
.rm-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px;
  margin-top:clamp(18px,2.2vw,24px); padding-top:clamp(15px,1.8vw,20px); border-top:1px solid var(--border);
  font-size:13.5px; line-height:1.5; color:var(--muted);
}
.rm-note p{ max-width:52ch; }
.rm-note .link-arrow{ font-size:14.5px; }

/* horizontal progression — the selector for the card above */
.rm-line{ margin-top:clamp(32px,3.8vw,50px); }
.rm-line-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 24px; }
.rm-line-cap{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.rm-line-hint{ font-size:12.5px; line-height:1.5; letter-spacing:.015em; color:var(--muted); }
.rm-track{
  list-style:none; margin:22px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.6vw,22px);
}
.rm-node{ position:relative; padding-top:22px; min-width:0; --tl:var(--border); --nm:var(--fg); }
.rm-node::before{
  content:""; position:absolute; left:8px; top:7px; right:calc(-1 * clamp(10px,1.6vw,22px));
  height:2px; background:var(--tl);
}
.rm-node:last-child::before{ content:none; }
.rm-dot{
  position:absolute; left:0; top:0; width:16px; height:16px; border-radius:50%;
  background:var(--bg); border:2.5px solid var(--tl);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.rm-node:nth-child(2){ --tl:oklch(72% .012 240); --nm:oklch(27.5% .020 240); }
.rm-node:nth-child(3){ --tl:oklch(80% .009 240); --nm:oklch(35% .019 240); }
.rm-node:nth-child(4){ --tl:oklch(86% .007 240); --nm:oklch(42.5% .019 240); }
.rm-node:nth-child(5){ --tl:oklch(90% .006 240); --nm:var(--muted); }
.rm-node.is-now{ --tl:var(--accent); }
.rm-node.is-now::before{ background:oklch(72% .012 240); }
.rm-node.is-now .rm-dot{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px var(--accent-wash); }
.rm-node-btn{
  width:100%; display:block; text-align:left; background:none; border:0; cursor:pointer;
  padding:12px 13px 15px; margin:0 -13px; border-radius:16px;
  box-shadow:inset 0 0 0 1px transparent;
  transition:background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.rm-node-btn:hover{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.rm-node:has(.rm-node-btn:hover) .rm-dot{ transform:scale(1.15); }
.rm-node.is-open .rm-node-btn{
  background:var(--surface); cursor:default;
  box-shadow:inset 0 0 0 1px var(--border), 0 1px 2px oklch(20% .02 240/.05), 0 8px 22px oklch(20% .02 240/.07);
}
.rm-node.is-open .rm-dot{ transform:scale(1.15); }
.rm-no{ display:block; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.06em; color:var(--muted); }
.rm-node-name{
  display:block; margin-top:8px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(17px,1.9vw,21px); letter-spacing:-.02em; line-height:1.15; color:var(--nm);
}
.rm-node-desc{ display:block; margin-top:9px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.rm-when{ display:block; margin-top:12px; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){
  .rm-track{ grid-template-columns:1fr; gap:2px; }
  .rm-node{ padding:0 0 6px 30px; }
  .rm-node::before{ left:7px; top:20px; right:auto; bottom:-8px; width:2px; height:auto; }
  .rm-node-btn{ margin:0; padding:10px 12px 12px; }
  .rm-node-desc{ max-width:48ch; }
  .rm-node:last-child{ padding-bottom:0; }
}

/* ---------- waitlist ---------- */
.cta-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:880px){ .cta-wrap{ grid-template-columns:1fr; gap:36px; } }
.form-card{ background:var(--ink-2); border:1px solid var(--ink-line); border-radius:var(--r-xl); padding:clamp(24px,3vw,34px); }
.field{ display:block; }
.field + .field{ margin-top:16px; }
.field span{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.075em; text-transform:uppercase; color:var(--on-ink-dim); margin-bottom:9px; }
.field input, .field select{
  width:100%; min-height:52px; padding:0 16px; border-radius:14px; font-family:var(--font-body); font-size:16px;
  background:oklch(100% 0 0 / .06); border:1px solid var(--ink-line-2); color:var(--on-ink);
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,oklch(76% .012 240) 50%),linear-gradient(135deg,oklch(76% .012 240) 50%,transparent 50%); background-position:calc(100% - 21px) 24px, calc(100% - 15px) 24px; background-size:6px 6px; background-repeat:no-repeat; }
.field select option{ background:var(--ink-2); color:var(--on-ink); }
.field input::placeholder{ color:oklch(60% .012 240); }
.field input:hover, .field select:hover{ background:oklch(100% 0 0 / .10); border-color:oklch(100% 0 0 / .26); }
.field input:focus{ outline:none; border-color:var(--accent-bright); background:oklch(100% 0 0 / .10); }
.err{ display:none; margin-top:9px; font-size:13px; color:oklch(80% .13 30); }
.field.invalid input{ border-color:oklch(70% .16 27); }
.field.invalid .err{ display:block; }
.form-card .btn{ width:100%; margin-top:22px; }
.form-fine{ margin-top:16px; font-size:12.5px; line-height:1.55; color:oklch(66% .012 240); }
.form-done{ display:none; text-align:center; padding:16px 0 6px; }
.form-card.done .form-body{ display:none; }
.form-card.done .form-done{ display:block; }
.done-mark{ width:56px; height:56px; border-radius:50%; background:var(--accent-bright); color:var(--on-cta); display:grid; place-items:center; margin:0 auto 18px; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--on-ink); border-top:1px solid var(--ink-line); }
.foot-in{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:36px; padding-block:clamp(44px,5vw,64px) 32px; }
@media (max-width:760px){ .foot-in{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1 / -1; } }
.foot h4{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--on-ink-dim); }
.foot ul{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.foot a{ font-size:14.5px; color:var(--on-ink-dim); text-decoration:none; transition:color .16s var(--ease); }
.foot a:hover{ color:var(--on-ink); text-decoration:underline; text-underline-offset:3px; }
.foot-brand p{ margin-top:16px; font-size:14px; line-height:1.6; color:var(--on-ink-dim); max-width:38ch; }
.foot-legal{ border-top:1px solid var(--ink-line); padding-block:24px 40px; display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:12.5px; line-height:1.6; color:oklch(64% .012 240); }
.foot-legal a{ font-size:12.5px; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:99; background:var(--accent-cta); color:var(--on-cta); padding:12px 20px; border-radius:999px; font-weight:600; }
.skip:focus{ left:16px; }

/* ---------- full-width feature card ---------- */
.fcard.full{ grid-column:span 12; }
.fcard.row{ flex-direction:row; align-items:flex-start; gap:clamp(18px,2.4vw,26px); }
.fcard.row .ficon{ margin-bottom:0; }
@media (max-width:640px){ .fcard.row{ flex-direction:column; } .fcard.row .ficon{ margin-bottom:16px; } }

/* ---------- narrow-viewport overflow guards ---------- */
.prow > *, .rrow > *{ min-width:0; }
.p-name, .rr-name, .rr-sub{ overflow-wrap:anywhere; }
.journey, .acct, .cta-wrap, .hero-grid, .frag{ min-width:0; }

/* ---------- box hover motion ---------- */
.price-panel, .fee-card, .fee-note, .fcard, .planner, .receipt, .rm-now, .form-card, .float-card, .ph-card, .ph-search, .frag-one, .rm-node-btn{
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.price-panel:hover, .fee-card:hover, .fee-note:hover, .fcard:hover, .planner:hover, .receipt:hover, .rm-now:hover, .form-card:hover, .float-card:hover, .ph-card:hover, .ph-search:hover, .frag-one:hover, .rm-node-btn:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 28px oklch(72% 0.01 240 / .28);
}
.frag-app:hover{ transform:rotate(0deg) translateY(-5px); box-shadow:0 14px 28px oklch(72% 0.01 240 / .28); }