/* ---------------------------------------------------------------
   Vesper, vesper.dev
   Shared stylesheet for every page. No cookies, no trackers, no font CDN.
   The only external request is the demo clip, served from
   slides.datameister.ai and fetched only near the viewport.
   Palette: the evening star. Night sky, one pale gold accent.
   --------------------------------------------------------------- */

:root{
  --night-900:#070c17;
  --night-850:#0a1120;

  --paper-50:#f6f7f9;
  --paper-0:#ffffff;

  --star:#f0d6a3;
  --star-line:rgba(240,214,163,.42);
  --gold-ink:#7a5f18;
  --gold-mark:#a2822f;

  --on-night:#eef2fb;
  --on-night-mute:#a8b8d6;
  --on-night-faint:#8b9cbb;
  --line-night:rgba(200,216,248,.14);
  --line-night-soft:rgba(200,216,248,.08);

  --on-paper:#101725;
  --on-paper-mute:#4b5568;
  --line-paper:rgba(16,23,37,.14);
  --line-paper-soft:rgba(16,23,37,.07);

  --sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI","IBM Plex Sans",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","IBM Plex Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --nav-h:60px;
  --wrap:1100px;
  --pad:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--night-900);
  color:var(--on-night);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}

/* --- layout ------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.band{position:relative;padding:clamp(68px,8.5vw,124px) 0}
.band--night{background:var(--night-900);color:var(--on-night)}
.band--paper{background:var(--paper-50);color:var(--on-paper)}
.band--paper-2{background:var(--paper-0);color:var(--on-paper)}
.band--paper + .band--paper-2,
.band--paper-2 + .band--paper{border-top:1px solid var(--line-paper-soft)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
#how{scroll-margin-top:calc(var(--nav-h) + 28px)}

/* --- type --------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--on-night-faint);
  display:flex;align-items:center;gap:10px;
  margin-bottom:22px;
}
.band--paper .eyebrow,.band--paper-2 .eyebrow{color:var(--on-paper-mute)}
.eyebrow::before{
  content:"";width:5px;height:5px;flex:0 0 5px;
  background:var(--star);transform:rotate(45deg);
}
.band--paper .eyebrow::before,.band--paper-2 .eyebrow::before{background:var(--gold-mark)}
h1,h2,h3{font-weight:500;letter-spacing:-.021em;line-height:1.12}
h1{font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-.032em;max-width:19ch}
h2{font-size:clamp(28px,3.9vw,44px);max-width:26ch;line-height:1.08}
h3{font-size:19px;letter-spacing:-.012em;line-height:1.28}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--on-night-mute);max-width:64ch}
.band--paper .lead,.band--paper-2 .lead{color:var(--on-paper-mute)}
.body{color:var(--on-night-mute);max-width:62ch}
.section-head{margin-bottom:clamp(40px,5vw,64px);max-width:72ch}
.section-head .lead{margin-top:20px}

/* --- nav ---------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,12,23,.9);
  border-bottom:1px solid var(--line-night-soft);
  color:var(--on-night);
}
@supports (backdrop-filter:blur(10px)){
  .nav{background:rgba(7,12,23,.7);backdrop-filter:saturate(140%) blur(12px)}
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:baseline;gap:11px;text-decoration:none;flex:0 0 auto}
.wordmark{
  font-size:19px;font-weight:500;letter-spacing:.15em;text-transform:lowercase;
  color:var(--on-night);position:relative;padding-right:14px;
}
.wordmark .glint{position:absolute;right:0;top:0;width:9px;height:9px}
.brand a{text-decoration:none}
.brand-by{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:var(--on-night-faint);white-space:nowrap;
}
.brand-by:hover{color:var(--star)}
.nav-links{
  display:flex;align-items:center;gap:2px;margin-left:auto;
  min-width:0; /* without this, the link row forces the page wider than the phone */
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-night-mute);text-decoration:none;
  padding:9px 11px;white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav-links a:hover{color:var(--on-night)}
.nav-links a[aria-current="true"]{color:var(--star);border-bottom-color:var(--star-line)}
@media (max-width:820px){
  .nav-inner{flex-wrap:wrap;gap:0 18px;padding-top:11px}
  .nav-links{
    margin-left:0;order:3;width:100%;
    border-top:1px solid var(--line-night-soft);
    -webkit-overflow-scrolling:touch;
  }
  .nav-links a{padding:9px 10px 8px}
  .nav-links a:first-child{padding-left:0}
}
@media (max-width:410px){.brand-by{display:none}}

/* --- buttons ------------------------------------------------ */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 22px;text-decoration:none;border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn--star{background:var(--star);color:var(--night-900);font-weight:500}
.btn--star:hover{background:#f9e8c6}
.btn--ghost{border-color:var(--line-night);color:var(--on-night)}
.btn--ghost:hover{border-color:var(--star-line);color:var(--star)}
.btn .arrow{width:14px;height:8px;flex:0 0 14px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--star);color:var(--night-900);
  font-family:var(--mono);font-size:12px;padding:12px 16px;text-decoration:none;
}
.skip:focus{left:8px;top:8px}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--star);outline-offset:3px}
.band--paper :where(a,button):focus-visible,
.band--paper-2 :where(a,button):focus-visible{outline-color:var(--gold-ink)}

/* --- hero --------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 76% 2%,rgba(240,214,163,.08),transparent 62%),
    radial-gradient(900px 700px at 6% 98%,rgba(58,92,168,.17),transparent 66%),
    var(--night-900);
  border-bottom:1px solid var(--line-night-soft);
  padding:clamp(52px,7vw,90px) 0 clamp(56px,7vw,96px);
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:clamp(32px,5vw,64px);align-items:center;
}
@media (max-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  h1{max-width:24ch}
  .hero-figure{width:100%;max-width:520px;margin:0 auto}
}
.hero .lead{margin-top:24px}
.hero .lead strong{font-weight:600;color:var(--on-night)}
.hero-result{
  margin-top:22px;padding-left:16px;border-left:2px solid var(--star-line);
  font-size:16.5px;line-height:1.5;color:var(--on-night);max-width:58ch;
}
.hero-result .k{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--star);margin-bottom:5px;
}
.hero .cta-row{margin-top:32px}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:9px 40px;
  margin-top:clamp(40px,4.5vw,60px);padding-top:22px;
  border-top:1px solid var(--line-night-soft);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-night-faint);
}
.hero-facts li{display:flex;align-items:center;gap:9px}
.hero-facts li::before{content:"";width:4px;height:4px;background:var(--star);transform:rotate(45deg)}
.hero-figure figcaption{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-night-faint);text-align:center;
}

/* --- loop diagram ------------------------------------------- */
.loop{width:100%;height:auto}
.loop-track{fill:none;stroke:rgba(200,216,248,.2);stroke-width:1.25}
.loop-comet{
  fill:none;stroke:var(--star);stroke-width:1.9;stroke-linecap:round;
  stroke-dasharray:110 1090;stroke-dashoffset:0;filter:url(#vs-glow);
}
.loop-node{fill:var(--night-900);stroke:var(--star-line);stroke-width:1.25}
.loop-core{fill:var(--star)}
.loop-label{
  font-family:var(--mono);font-size:15px;letter-spacing:.11em;
  fill:var(--on-night-mute);text-transform:uppercase;
}
.loop-center{
  font-family:var(--mono);font-size:14px;letter-spacing:.24em;
  fill:var(--on-night-faint);text-transform:uppercase;
}
.loop-tick{stroke:rgba(200,216,248,.28);stroke-width:1}
.loop-arrow{fill:rgba(200,216,248,.45)}
.loop-star{fill:#c8d8f8}
@media (max-width:620px){
  .loop-label{font-size:18px;letter-spacing:.05em}
  .loop-center{font-size:16px;letter-spacing:.18em}
}
@media (prefers-reduced-motion:no-preference){
  .loop-comet{animation:vs-travel 17s linear infinite}
}
@keyframes vs-travel{to{stroke-dashoffset:-1200}}

/* --- the change interface ----------------------------------- */
.mark{
  background:rgba(240,214,163,.6);
  box-shadow:0 0 0 .1em rgba(240,214,163,.6);
  color:var(--on-paper);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.iface-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  grid-template-areas:"chat head" "chat body";
  gap:clamp(28px,3.6vw,56px);
  align-items:start;
}
@media (max-width:940px){
  .iface-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "chat" "body";gap:34px}
}
.iface-head{grid-area:head}
.iface-chat{grid-area:chat}
.iface-body{grid-area:body}

.chat{
  background:var(--paper-50);
  border:1px solid var(--line-paper);
  padding:clamp(20px,2.2vw,28px);
}
.chat-title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:6px;
}
.chat-log{display:grid;gap:16px;margin-top:18px}
.chat-log li{display:flex;flex-direction:column;gap:7px}
.chat-log .who{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-paper-mute);
}
.bubble{
  font-family:var(--mono);font-size:13.5px;line-height:1.55;
  padding:13px 16px;border-radius:8px;
  max-width:min(92%,46ch); /* keeps chat proportions when the panel goes full width */
}
.turn--out{align-items:flex-end;text-align:right}
.turn--out .bubble{background:var(--night-900);color:var(--on-night);text-align:left}
.turn--in .bubble{background:var(--paper-0);border:1px solid var(--line-paper);color:var(--on-paper)}
.turn--in .bubble--flag{
  border:1.5px solid var(--gold-mark);
  background:linear-gradient(180deg,rgba(240,214,163,.18),rgba(240,214,163,.05));
}
.bubble-file{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  padding:6px 10px;border:1px solid rgba(238,242,251,.28);border-radius:5px;
  font-size:11.5px;letter-spacing:.03em;color:var(--on-night-mute);
}
.bubble-file svg{width:11px;height:11px;stroke:var(--star);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media (max-width:520px){.bubble{max-width:100%;font-size:13px}}

.steps{display:grid;gap:12px;margin-top:clamp(24px,2.6vw,32px)}
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  border:1px solid var(--line-paper);padding:18px 20px;
}
.step--live{border:1.5px solid var(--gold-mark);background:linear-gradient(180deg,rgba(240,214,163,.12),rgba(240,214,163,0))}
.step-n{
  width:26px;height:26px;display:grid;place-items:center;
  background:var(--night-900);color:var(--on-night);
  font-family:var(--mono);font-size:12px;font-weight:500;
}
.step--live .step-n{background:var(--gold-ink)}
.step-t{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-paper);margin-bottom:7px;
}
.step--live .step-t{color:var(--gold-ink)}
.step p{font-size:15.5px;line-height:1.5;color:var(--on-paper-mute)}
.iface-close{margin-top:26px;font-size:16.5px;line-height:1.55;color:var(--on-paper);max-width:52ch}
.iface-note{
  margin-top:clamp(30px,3.4vw,44px);padding-top:20px;border-top:1px solid var(--line-paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-paper-mute);
}

/* --- pain-to-value cards -------------------------------------
   Four equal cards. Subgrid puts every icon, pain line and answer on
   the same rows, so the gold rules line up whatever the text length. */
.pv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0 14px}
.pv-card{
  border:1px solid var(--line-paper);background:var(--paper-0);
  padding:24px 22px 22px;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:18px;
}
.pv-pain{
  font-size:18px;line-height:1.35;letter-spacing:-.012em;color:var(--on-paper);
  font-weight:500;min-height:calc(3 * 1.35em);
}
.pv-ans{border-top:2px solid var(--gold-mark);padding-top:14px}
.pv-verb{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:7px;
}
.pv-verb::after{content:" \2192";color:var(--gold-mark)}
.pv-ans p{font-size:14.5px;line-height:1.5;color:var(--on-paper-mute)}
@supports (grid-template-rows:subgrid){.pv-pain{min-height:0}}
@media (max-width:1040px){
  .pv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:860px){
  .pv-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .pv-card{display:flex;flex-direction:row;align-items:flex-start;gap:16px;padding:16px;grid-row:auto}
  .pv-pain{flex:1 1 50%;min-height:0}
  .pv-ans{border-top:0;border-left:2px solid var(--gold-mark);padding:0 0 0 14px;flex:1 1 50%}
}


/* --- form-factor spectrum ------------------------------------ */
.fx-axes{display:flex;flex-direction:column;gap:7px;margin-bottom:44px}
.fx-axis{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--on-paper-mute);
  border:1px solid var(--line-paper);padding:9px 40px 9px 16px;
  background:linear-gradient(90deg,rgba(162,130,47,0),rgba(162,130,47,.14));
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
}
.fx-axis--rev{
  background:linear-gradient(90deg,rgba(162,130,47,.14),rgba(162,130,47,0));
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);
  padding:9px 16px 9px 40px;
}
.fx-axis .hi{color:var(--gold-ink);font-weight:600}
.fx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fx-card{
  border:1px solid var(--line-paper);background:var(--paper-0);
  padding:26px 22px 22px;display:flex;flex-direction:column;
}
.fx-card--dim{opacity:.45;background:transparent}
.fx-card--star{border:2px solid var(--gold-mark);box-shadow:0 0 0 4px rgba(162,130,47,.08)}
.fx-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-paper-mute);margin-bottom:18px;
}
.fx-kicker--gold,.fx-card--star .fx-kicker{color:var(--gold-ink)}
.fx-card svg{height:84px;margin-bottom:20px;stroke:var(--on-paper);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fx-card--star svg{stroke:var(--gold-ink)}
.fx-card h3{font-size:18px;margin-bottom:10px;line-height:1.25}
.fx-card p{font-size:14.5px;line-height:1.5;color:var(--on-paper-mute)}
.fx-eg{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-paper-soft);
  font-size:13px;color:var(--on-paper-mute);font-style:italic;
}
.fx-rail-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.fx-rail{
  grid-column:2 / 5;position:relative;
  border:1px solid var(--star-line);background:rgba(240,214,163,.16);
  padding:13px 18px;display:flex;align-items:center;gap:14px;
  font-size:14.5px;color:var(--on-paper);
}
.fx-rail::before,.fx-rail::after{content:"";position:absolute;top:-13px;width:1px;height:12px;background:var(--gold-mark)}
.fx-rail::before{left:12%}
.fx-rail::after{right:12%}
.fx-rail .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);flex:0 0 auto;
}
.rig-solo{max-width:920px;margin:clamp(44px,5vw,68px) auto 0}
@media (max-width:860px){
  .fx-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .fx-rail-row{grid-template-columns:minmax(0,1fr);margin-top:10px}
  .fx-rail{grid-column:1 / -1;flex-direction:column;align-items:flex-start;gap:6px;font-size:13.5px}
  .fx-rail::before,.fx-rail::after{display:none}
  .fx-axis{font-size:10px}
  /* compact rows: icon left, text right */
  .fx-card{
    display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;
    align-items:start;padding:14px 16px 12px;
  }
  .fx-kicker{grid-column:1 / -1;margin-bottom:10px}
  .fx-card svg{grid-column:1;grid-row:2 / span 2;height:44px;margin:2px 0 0}
  .fx-card h3{grid-column:2;font-size:16px;margin-bottom:5px}
  .fx-card p{grid-column:2;font-size:13.5px}
  .fx-eg{grid-column:2;margin-top:8px;padding-top:8px;font-size:12px}
}

/* --- target platform (the rig) ------------------------------ */
#platform h2{max-width:42ch}
.rig-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(22px,2.8vw,38px);align-items:start;
}
@media (max-width:940px){.rig-grid{grid-template-columns:minmax(0,1fr)}}
.rig{margin:0}
.rig-frame{
  position:relative;overflow:hidden;
  border:1px solid var(--line-paper);border-radius:5px;
  background:var(--night-900);
}
.rig-video{
  display:block;width:100%;height:auto;aspect-ratio:16/9; /* 1280x720 source, so no layout shift */
  background:var(--night-900);
}
.rig-quote{
  position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);
  font-family:var(--mono);font-size:13px;line-height:1.5;
  padding:11px 14px;border-radius:8px;
  background:rgba(7,12,23,.88);color:var(--on-night);
}
@supports (backdrop-filter:blur(6px)){
  .rig-quote{background:rgba(7,12,23,.72);backdrop-filter:blur(8px)}
}
.rig-btn{
  position:absolute;right:12px;top:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-night);background:rgba(7,12,23,.78);
  border:1px solid var(--line-night);border-radius:3px;
  padding:7px 11px;cursor:pointer;
}
.rig-btn:hover{background:rgba(7,12,23,.94);border-color:var(--star-line);color:var(--star)}
.rig-cap{margin-top:13px;font-size:13.5px;line-height:1.5;font-style:italic;color:var(--on-paper-mute)}
@media (max-width:520px){.rig-quote{font-size:12px;padding:9px 11px;left:10px;bottom:10px}}

.rig-notes{display:grid;gap:clamp(14px,1.7vw,20px)}
.note{
  border:1px solid var(--line-paper);border-top:2px solid var(--gold-mark);
  background:var(--paper-0);padding:clamp(20px,2.2vw,26px);
}
.note--ink{border-top-color:var(--on-paper)}
.note-label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:14px;
}
.note--ink .note-label{color:var(--on-paper)}
.note p{font-size:16px;line-height:1.5;color:var(--on-paper)}
.note p + p{margin-top:12px;color:var(--on-paper-mute)}


/* --- cards -------------------------------------------------- */
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
@media (max-width:900px){.cols-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.cols-2{grid-template-columns:minmax(0,1fr)}}
.card{
  border:1px solid var(--line-paper);
  background:linear-gradient(180deg,rgba(16,23,37,.024),rgba(16,23,37,0));
  padding:clamp(22px,2.4vw,30px);
}
.card h3{margin-bottom:12px}
.card p{color:var(--on-paper-mute);font-size:16px}
.card-mark{width:20px;height:20px;margin-bottom:18px}

/* --- pipeline ----------------------------------------------- */
.pipeline-block{margin-top:clamp(44px,5vw,64px)}
.pipeline-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;padding-bottom:24px;
}
.pipeline-head p{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-paper-mute);
}
.pipeline{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.rail{position:absolute;left:0;top:5px;width:100%;height:1.5px}
.stage{position:relative;padding:22px 14px 0 0}
.stage::before{
  content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--paper-0);border:1.5px solid rgba(16,23,37,.52);
}
.stage::after{
  content:"";position:absolute;left:3.5px;top:3.5px;width:4px;height:4px;
  border-radius:50%;background:rgba(16,23,37,.58);
}
.stage--accent::before{border-color:var(--gold-mark)}
.stage--accent::after{background:var(--gold-mark)}
.stage-index{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  color:rgba(16,23,37,.62);margin-bottom:7px;
}
.stage-name{
  display:block;font-family:var(--mono);font-size:13px;letter-spacing:.05em;
  color:var(--on-paper);font-weight:500;margin-bottom:8px;
}
.stage--accent .stage-name{color:var(--gold-ink)}
.stage-desc{display:block;font-size:13.5px;line-height:1.45;color:var(--on-paper-mute)}
@media (max-width:1000px){
  .pipeline{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .stage{padding:0 0 22px 30px}
  .stage:last-child{padding-bottom:0}
  .stage::before{top:3px}
  .stage::after{top:6.5px}
  .stage:not(:last-child) .stage-desc::after{
    content:"";position:absolute;left:5px;top:19px;bottom:2px;width:1px;
    background:linear-gradient(180deg,rgba(16,23,37,.3),rgba(16,23,37,.1));
  }
  .stage-index{display:inline;margin-right:11px}
  .stage-name{display:inline-block;margin-bottom:5px}
  .stage-desc{max-width:56ch}
}
.posture{
  margin-top:clamp(40px,4.5vw,58px);padding-top:26px;
  border-top:1px solid var(--line-paper);
  display:flex;gap:18px;align-items:flex-start;
}
.posture svg{flex:0 0 20px;width:20px;height:20px;margin-top:4px}
.posture p{font-size:16.5px;color:var(--on-paper);max-width:78ch}
.posture strong{font-weight:500}

/* --- face-off ------------------------------------------------ */
.faceoff-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.faceoff{
  display:grid;grid-template-columns:minmax(128px,150px) repeat(3,minmax(168px,1fr));
  gap:6px;min-width:760px;
}
.fo-h{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 16px;display:flex;align-items:center;
  background:var(--night-850);border:1px solid var(--line-night);color:var(--on-night);
}
.fo-h--star{border:1px solid var(--star-line);color:var(--star);background:rgba(240,214,163,.06)}
.fo-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-night-faint);display:flex;align-items:center;padding-right:8px;
}
.fo-cell{
  display:flex;align-items:flex-start;gap:10px;padding:13px 16px;
  background:var(--night-850);border:1px solid var(--line-night-soft);
  font-size:14.5px;line-height:1.45;color:var(--on-night-mute);
}
.fo-cell--star{border:1px solid var(--star-line);color:var(--on-night);background:rgba(240,214,163,.05)}
.fo-mark{font-weight:600;flex:0 0 auto;color:var(--on-night-faint)}
.fo-cell--star .fo-mark{color:var(--star)}
.fo-foot{
  margin-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--on-night-faint);
}

/* --- who it serves ------------------------------------------ */
.serve{border-top:1px solid var(--line-night);padding-top:26px}
.serve h3{font-size:22px;margin-bottom:14px}
.serve p{color:var(--on-night-mute);font-size:16.5px}
.serve p + p{margin-top:14px}
.serve-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.serve-roles{margin:20px 0 0;display:flex;flex-direction:column;gap:9px}
.serve-roles div{display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px;align-items:baseline}
.serve-roles dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--star)}
.serve-roles dd{margin:0;font-size:14px;line-height:1.45;color:var(--on-night-mute)}
.serve-note{margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--on-night-faint)}
.serve-tags li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-night-mute);border:1px solid var(--line-night);padding:6px 10px;
}

/* --- why now ------------------------------------------------ */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-paper)}
.why li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  padding:clamp(26px,3vw,36px) 0;border-bottom:1px solid var(--line-paper);
}
.why li:nth-child(odd){padding-right:clamp(20px,3vw,44px)}
.why li:nth-child(even){padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--line-paper)}
@media (max-width:820px){
  .why{grid-template-columns:minmax(0,1fr)}
  .why li:nth-child(odd),.why li:nth-child(even){padding-left:0;padding-right:0;border-left:0}
}
.why-num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gold-ink);padding-top:5px}
.why h3{margin-bottom:10px}
.why p{color:var(--on-paper-mute);font-size:16px;max-width:52ch}

/* --- proof -------------------------------------------------- */
.company-meta{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-paper-mute);
}
.company-meta li{display:flex;align-items:center;gap:9px}
.company-meta li::before{content:"";width:4px;height:4px;background:var(--gold-mark);transform:rotate(45deg)}
.proof-featured{
  border:1px solid var(--line-paper);border-top:2px solid #c8a44e;
  background:linear-gradient(180deg,rgba(240,214,163,.16),rgba(240,214,163,0));
  padding:clamp(24px,3vw,34px);margin-bottom:clamp(20px,2.4vw,28px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;
}
.proof-featured .badge{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);border:1px solid rgba(122,95,24,.36);padding:6px 9px;white-space:nowrap;
}
.proof-featured p{font-size:clamp(17px,1.5vw,19.5px);line-height:1.5;color:var(--on-paper);max-width:70ch}
.proof-featured a{color:var(--gold-ink);text-decoration-color:rgba(122,95,24,.4)}
.proof-featured .sub{margin-top:12px;font-size:14.5px;color:var(--on-paper-mute)}
@media (max-width:640px){.proof-featured{grid-template-columns:minmax(0,1fr);gap:16px}}
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-paper)}
@media (max-width:760px){.proof-grid{grid-template-columns:minmax(0,1fr)}}
.proof-grid li{background:var(--paper-0);padding:clamp(22px,2.4vw,28px)}
.proof-grid .label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-paper-mute);margin-bottom:12px;
}
.proof-grid p{font-size:16px;color:var(--on-paper);max-width:46ch}

.proof-more{margin-top:28px;font-size:15px;color:var(--on-paper-mute)}
.proof-more a{color:var(--gold-ink)}

/* --- investors ---------------------------------------------- */
.band--investors{
  background:
    radial-gradient(760px 520px at 88% 0%,rgba(240,214,163,.075),transparent 60%),
    var(--night-850);
  border-top:1px solid var(--line-night-soft);
}
.inv-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4.5vw,60px)}
@media (max-width:900px){.inv-grid{grid-template-columns:minmax(0,1fr)}}
.inv-points{border-top:1px solid var(--line-night)}
.inv-points li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  padding:20px 0;border-bottom:1px solid var(--line-night);
}
.inv-points .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--star);padding-top:4px}
.inv-points p{color:var(--on-night-mute);font-size:16px}
.inv-points strong{color:var(--on-night);font-weight:500}
.inv-note{
  margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-night-faint);
}

/* --- contact / footer --------------------------------------- */
.contact{background:var(--night-900);border-top:1px solid var(--line-night-soft);padding-top:clamp(60px,7vw,96px)}
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);align-items:start;
}
@media (max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact h2{max-width:20ch}
.contact-lines{margin-top:8px;display:grid;gap:18px}
.contact-lines dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-night-faint);margin-bottom:5px;
}
.contact-lines dd{margin:0;font-size:17px}
.contact-lines a{color:var(--star);text-decoration:none;border-bottom:1px solid var(--star-line);padding-bottom:1px}
.contact-lines a:hover{border-bottom-color:var(--star)}
.foot{
  margin-top:clamp(52px,6vw,80px);border-top:1px solid var(--line-night-soft);
  padding:24px 0 34px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--on-night-faint);
}
.foot a{color:var(--on-night-mute);text-decoration:none;border-bottom:1px solid var(--line-night)}
.foot a:hover{color:var(--star);border-bottom-color:var(--star-line)}
.foot .push{margin-left:auto}

/* --- scroll reveal -------------------------------------------
   Only hidden when the .js-anim class is set by the head script,
   so the page is fully readable without JavaScript.             */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .js-anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
  .js-anim .reveal.in{opacity:1;transform:none}
  .js-anim .reveal[data-d="1"]{transition-delay:.07s}
  .js-anim .reveal[data-d="2"]{transition-delay:.14s}
  .js-anim .reveal[data-d="3"]{transition-delay:.21s}
}
@media print{
  .nav{position:static}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ---------------------------------------------------------------
   Page components: use cases, payback, fit-check, contact form,
   FAQ, about. Built only from the tokens above. No new colours,
   no webfonts, square corners.
   --------------------------------------------------------------- */

/* nav: the two calls to action sit after the section links */
.nav-cta{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.nav-cta .btn{padding:10px 14px;font-size:11.5px}
.nav-cta .btn .tag{font-size:10px;letter-spacing:.08em;color:var(--star);border-left:1px solid var(--line-night);padding-left:9px}
@media (max-width:1120px){.nav-cta .btn--ghost{display:none}}
@media (max-width:820px){.nav-cta{margin-left:auto}}
@media (max-width:420px){.nav-cta .btn{padding:9px 10px;font-size:10.5px}}

/* hero facts as links */
.hero-facts a{text-decoration:none;color:inherit;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.hero-facts a:hover{color:var(--star);border-bottom-color:var(--star-line)}
.subhero{padding:clamp(52px,7vw,90px) 0 clamp(48px,6vw,72px)}
.subhero .lead{margin-top:24px}
.crumb{display:inline-block;margin-bottom:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-faint);text-decoration:none}
.crumb:hover{color:var(--star)}

/* plant map figure (hero) */
.floor-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-night-faint);padding-bottom:10px;border-bottom:1px solid var(--line-night-soft)}
.floor-head b{color:var(--star);font-weight:500}
#floor-svg{width:100%;height:auto;margin-top:10px}
#floor-svg .grid{stroke:var(--line-night-soft);stroke-width:1}
#floor-svg .belt{fill:var(--line-night)}
#floor-svg .belt-flow{stroke:rgba(200,216,248,.22);stroke-width:2;stroke-dasharray:6 10}
#floor-svg .aisle{stroke:var(--star-line);stroke-width:1.2;stroke-dasharray:8 8;fill:none}
#floor-svg .st rect{transition:fill .5s ease,stroke .5s ease}
#floor-svg .st.classic rect{fill:var(--night-850);stroke:var(--line-night)}
#floor-svg .st.manual rect{fill:transparent;stroke:var(--on-night-faint);stroke-width:1.2;stroke-dasharray:4 3}
#floor-svg .st.vesper rect{fill:var(--star);stroke:var(--star);filter:drop-shadow(0 0 6px rgba(240,214,163,.45))}
#floor-svg .st text{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;fill:var(--on-night-faint)}
#floor-svg .st.vesper text{fill:var(--on-night)}
#floor-svg .st .tick{opacity:0;transition:opacity .4s;stroke:var(--night-900);stroke-width:2.2;fill:none}
#floor-svg .st.vesper .tick{opacity:1}
#floor-svg .bot{transition:transform 1s cubic-bezier(.5,0,.3,1)}
#floor-svg .bot .body{fill:var(--night-900);stroke:var(--star);stroke-width:1.6}
#floor-svg .bot .core{fill:var(--star)}
#floor-svg .pulse{fill:none;stroke:var(--star);stroke-width:1.4;opacity:0}
#floor-svg .pulse.go{animation:fl-pulse .9s ease-out}
@keyframes fl-pulse{from{opacity:.9;r:12}to{opacity:0;r:34}}
@media (prefers-reduced-motion:no-preference){#floor-svg .belt-flow{animation:fl-flow 1.6s linear infinite}}
@keyframes fl-flow{to{stroke-dashoffset:-32}}
.floor-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-faint)}
.lg{display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px}
.lg.classic{background:var(--night-850);border:1px solid var(--line-night)}
.lg.manual{border:1.2px dashed var(--on-night-faint)}
.lg.vesper{background:var(--star)}

/* statement band */
.statement .section-head{margin-bottom:0}

/* use cases list: the site's .why list, six rows */
.why h3{margin-bottom:8px}
.uc-proof{margin-top:clamp(40px,4.5vw,58px)}
.rig-frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rig-frame .rig-video{aspect-ratio:16/9}
.proof-more a{text-underline-offset:3px}

/* payback chart */
.pay-num{font-size:clamp(56px,8vw,96px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--on-paper)}
.pay-num small{font-size:.28em;letter-spacing:0;color:var(--on-paper-mute);margin-left:10px;font-weight:400}
.pay-list{margin-top:26px;display:grid;gap:10px}
.pay-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;font-size:16px;color:var(--on-paper)}
.pay-list li::before{content:"";width:5px;height:5px;margin-top:10px;background:var(--gold-mark);transform:rotate(45deg)}
.bars{display:grid;gap:18px;margin-top:6px}
.bar-label{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--on-paper);margin-bottom:6px}
.bar-label span:last-child{font-family:var(--mono);font-size:12.5px;color:var(--on-paper-mute)}
.track{position:relative;height:18px;background:var(--line-paper-soft)}
.fill{position:absolute;left:0;top:0;bottom:0}
.fill.robot{background:var(--on-paper)}
.fill.integ{background:var(--gold-mark)}
.fill.range{background:repeating-linear-gradient(135deg,rgba(162,130,47,.5) 0 6px,rgba(162,130,47,.18) 6px 12px)}
.axis{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--on-paper-mute)}
.note .src{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;line-height:1.5;color:var(--on-paper-mute)}


/* safety strip on night */
.inv-points.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px);border-top:0}
.inv-points.cols li{border-top:1px solid var(--line-night);border-bottom:0}
@media (max-width:760px){.inv-points.cols{grid-template-columns:minmax(0,1fr)}}
.band--night .cta-row{margin-top:30px}

/* pipelines with more than three stages */
.pipeline--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pipeline--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
@media (max-width:1000px){.pipeline--4,.pipeline--5{grid-template-columns:minmax(0,1fr)}}
.stage-meta{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.slots{display:flex;gap:4px;margin-top:8px}
.slots i{width:18px;height:5px;background:var(--gold-mark)}
.slots i.taken{background:var(--line-paper)}

/* example switcher */
.ex-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.ex-head .section-head{margin-bottom:clamp(32px,4vw,48px)}
.seg{display:inline-flex;border:1px solid var(--line-paper);flex:0 0 auto}
.seg button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;background:transparent;color:var(--on-paper-mute);border:0;cursor:pointer}
.seg button+button{border-left:1px solid var(--line-paper)}
.seg button[aria-pressed="true"]{background:var(--night-900);color:var(--on-night)}
.seg button:not([aria-pressed="true"]):hover{color:var(--on-paper)}
.ex[hidden]{display:none!important}
.note ol{display:grid;gap:10px;counter-reset:n}
.note ol li{counter-increment:n;display:grid;grid-template-columns:28px minmax(0,1fr);font-size:15.5px;line-height:1.5;color:var(--on-paper)}
.note ol li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gold-ink);padding-top:4px}
.note--ink ol li{color:var(--on-paper-mute)}
.note--ink ol li::before{color:var(--on-paper-mute)}
.ex .iface-grid{margin-top:clamp(36px,4vw,52px);grid-template-areas:"chat body";grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:940px){.ex .iface-grid{grid-template-areas:"chat" "body";grid-template-columns:minmax(0,1fr)}}

/* pain-value cards with a line icon */
.pv-ic{width:auto;height:40px;justify-self:center;stroke:var(--on-paper);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv-ic .on{fill:var(--gold-mark);stroke:var(--gold-mark)}
.pv-ic .tk{stroke:var(--paper-0);stroke-width:2}
.pv-ans p+p{margin-top:8px}
@media (max-width:860px){.pv-ic{display:none}}

/* FAQ */
.faq{border-top:1px solid var(--line-paper);max-width:820px}
.faq details{border-bottom:1px solid var(--line-paper)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-size:19px;font-weight:500;letter-spacing:-.012em;color:var(--on-paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--gold-ink);flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 22px;color:var(--on-paper-mute);max-width:66ch}

/* about */
.duo{position:relative}
.duo img{display:block;width:100%;height:auto;border:1px solid var(--line-night-soft)}
.duo .tag{position:absolute;font-family:var(--mono);font-size:12px;line-height:1.4;padding:9px 12px;border-radius:8px;background:rgba(7,12,23,.78);color:var(--on-night)}
@supports (backdrop-filter:blur(6px)){.duo .tag{backdrop-filter:blur(8px)}}
.duo .tag b{display:block;font-weight:500}
.duo .tag span{color:var(--star);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.founder .shot{aspect-ratio:5/4;max-width:100%;overflow:hidden;background:var(--night-900);margin-bottom:22px}
.founder .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.founder .role{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.founder h3{font-size:24px;margin-bottom:14px}
.founder ul{display:grid;gap:9px;border-top:1px solid var(--line-paper);padding-top:16px}
.founder li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;font-size:15.5px;color:var(--on-paper-mute)}
.founder li::before{content:"";width:5px;height:5px;margin-top:10px;background:var(--gold-mark);transform:rotate(45deg)}

/* night forms: contact form, fit-check, country picker */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border:1px solid var(--line-night);background:var(--night-850);padding:clamp(20px,2.6vw,30px)}
.form .full{grid-column:1/-1}
.fld{display:grid;gap:7px;align-content:start;min-width:0}
.fld>label,.fld>span.l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-night-faint)}
.opt-l{text-transform:none;letter-spacing:0;color:var(--on-night-faint)}
.form input,.form select,.form textarea{font-family:var(--sans);font-size:16px;color:var(--on-night);background:var(--night-900);border:1px solid var(--line-night);padding:11px 12px;width:100%;border-radius:0}
.form input,.form select{height:46px}
.form textarea{min-height:100px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:var(--on-night-faint)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--star);outline-offset:0;border-color:var(--star-line)}
.form select{color-scheme:dark}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.form-foot button.btn{cursor:pointer}
.err{color:var(--star);font-size:14px}
.attached{grid-column:1/-1;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--star);border:1px solid var(--star-line);padding:10px 12px}
.sent{grid-column:1/-1;display:grid;gap:14px}
.sent h3{font-size:22px}
.sent pre{margin:0;background:var(--night-900);border:1px solid var(--line-night);padding:14px;font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;color:var(--on-night-mute);overflow-x:auto}
.sent .small{font-size:14px;color:var(--on-night-faint)}
@media (max-width:560px){.form{grid-template-columns:minmax(0,1fr)}}

.phone-wrap{display:grid;grid-template-columns:auto minmax(0,1fr)}
.cc{position:relative;display:block}
.cc-btn{height:46px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line-night);border-right:0;background:var(--night-850);color:var(--on-night);font-family:var(--mono);font-size:13px;cursor:pointer;white-space:nowrap}
.cc-btn:hover{color:var(--star)}
.cc-btn svg{width:11px;height:11px;color:var(--on-night-faint)}
.cc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cc-flag,.cc-f{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:17px;line-height:1}
.cc-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(320px,80vw);background:var(--night-850);border:1px solid var(--line-night);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);display:block}
.cc-panel[hidden]{display:none!important}
.cc-sbox{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line-night)}
.cc-sbox svg{width:15px;height:15px;color:var(--on-night-faint);flex:none}
.form .cc-sbox input{border:0;background:transparent;height:34px;padding:0;font-size:15px}
.form .cc-sbox input:focus{outline:none}
.cc-list{margin:0;padding:6px;max-height:280px;overflow-y:auto}
.cc-group{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-faint);padding:10px 10px 4px}
.cc-opt{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;cursor:pointer;font-size:15px;color:var(--on-night)}
.cc-opt.act{background:rgba(240,214,163,.08)}
.cc-opt[aria-selected="true"] .cc-n{color:var(--star)}
.cc-c{font-family:var(--mono);font-size:12.5px;color:var(--on-night-faint)}
.cc-empty{padding:14px 10px;color:var(--on-night-faint);font-size:14.5px}

.fit-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,60px);align-items:start}
@media (max-width:900px){.fit-grid{grid-template-columns:minmax(0,1fr)}}
.fit-side ul{margin-top:26px;display:grid;gap:10px}
.fit-side li{display:flex;gap:10px;align-items:baseline;font-size:15.5px;color:var(--on-night-mute)}
.fit-side li::before{content:"";width:5px;height:5px;flex:0 0 5px;background:var(--star);transform:rotate(45deg);position:relative;top:-2px}
.quiz{border:1px solid var(--line-night);background:var(--night-850);padding:clamp(20px,2.6vw,30px);min-width:0}
.q-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-night-faint)}
.progress{height:2px;background:var(--line-night);margin:12px 0 24px}
.progress i{display:block;height:100%;background:var(--star);width:0;transition:width .3s ease}
.q-title{font-size:22px;font-weight:500;letter-spacing:-.012em;color:var(--on-night)}
.q-help{font-size:15px;color:var(--on-night-mute);margin-top:6px}
.opts{display:grid;gap:8px;margin-top:20px}
.opt{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;text-align:left;width:100%;padding:14px 16px;border:1px solid var(--line-night);background:transparent;font-family:var(--sans);font-size:15.5px;line-height:1.4;color:var(--on-night);cursor:pointer}
.opt:hover{border-color:var(--star-line)}
.opt[aria-pressed="true"]{border-color:var(--star-line);background:rgba(240,214,163,.06);color:var(--star)}
.opt .r{width:9px;height:9px;margin-top:6px;border:1px solid var(--on-night-faint);transform:rotate(45deg)}
.opt[aria-pressed="true"] .r{background:var(--star);border-color:var(--star)}
.opt small{display:block;font-size:13.5px;color:var(--on-night-faint);margin-top:2px}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}
.q-nav .qhint{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-faint)}
.linkbtn{background:none;border:0;padding:6px 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-mute);cursor:pointer;border-bottom:1px solid var(--line-night)}
.linkbtn:hover{color:var(--star)}
.linkbtn[disabled]{visibility:hidden}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--star-line);color:var(--star)}
.pill.low{border-color:var(--line-night);color:var(--on-night-mute)}
.verdict{font-size:clamp(24px,3vw,30px);font-weight:500;letter-spacing:-.02em;color:var(--on-night)}
.meter{height:2px;background:var(--line-night);margin-top:16px;position:relative}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--star)}
.reasons{margin-top:20px;display:grid;gap:10px}
.reasons li{display:grid;grid-template-columns:20px minmax(0,1fr);font-size:15px;color:var(--on-night-mute)}
.reasons li.plus::before{content:"\2713";color:var(--star)}
.reasons li.minus::before{content:"\2715";color:var(--on-night-faint)}
.result .next{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-night);display:grid;gap:16px}
.result .next p{font-size:15.5px;color:var(--on-night)}
.result .acts{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* footer pitch hidden where the page already is the form */
.contact.bare{padding-top:0}
.contact.bare .contact-grid{display:none}
.contact.bare .foot{margin-top:0}
.contact .contact-lines .lk a{color:var(--on-night);border-bottom-color:var(--line-night);margin-right:14px;display:inline-block;margin-bottom:4px}
.contact .contact-lines .lk a:hover{color:var(--star);border-bottom-color:var(--star-line)}

/* --- shared extras ------------------------------------------ */
[hidden]{display:none!important}
.form-note{grid-column:1/-1;font-size:13px;line-height:1.5;color:var(--on-night-faint)}
.form-note a{color:var(--on-night-mute)}
.noscript-note{margin-top:18px;font-size:15px;color:var(--on-night-mute)}
.noscript-note a{color:var(--star)}