/*
 * HoneyRuns marketing site: the one stylesheet.
 * Every page under landing/ links this file (via partials/head.html), so tokens,
 * nav, footer, buttons, type, prose and the app mockup components live here once.
 * App mockups use the product's own tokens (honeyruns-nextjs/src/lib/precision-tokens.ts).
 */
:root{
  --paper:#FAF8F3;--paper-2:#F3EDE0;--tint:#F4F0E8;--ink:#18160F;--ink-2:#5D574E;--ink-3:#6B645A;
  --rule:#E2DDD5;--rule-2:#D8D3CC;
  --honey:#FDB813;--honey-2:#F5A623;--honey-ink:#8C5700;
  --night:#18160F;--night-ink:#F3EDE0;--night-ink-2:#BCB3A2;--night-rule:#38332A;
  /* app tokens (honeyruns-nextjs/src/lib/precision-tokens.ts) */
  --p-routine-bg:#E6F1FB;--p-routine:#1A5FA6;--p-fault-bg:#FFEBE9;--p-fault:#A72724;--p-req-bg:#E6F4EA;--p-req:#1F6B3A;
  --sx-over:#A72724;--sx-soon:#8B5600;--bub-riggs:#F1EDE5;--bub-you:#F7E7BC;--wash:rgba(24,22,15,.04);
  --sans:"Overpass",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --app:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,40px);--max:1180px;--nav-h:72px;--sec-pad:clamp(64px,9vw,120px);
  --float:0 24px 48px -24px rgba(44,24,16,.28),0 2px 6px -2px rgba(44,24,16,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  --honey-wash:#FBEFD6;--honey-mark:rgba(253,184,19,.8);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
p,li{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.label{font:600 .75rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--honey-ink);outline-offset:3px;border-radius:6px}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;white-space:nowrap;min-height:48px;padding:.2em 24px 0;border-radius:999px;border:1px solid transparent;font:700 1rem/1 var(--sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#2E2A21}
.btn-line{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-line:hover{border-color:var(--ink)}
.btn-honey{background:var(--honey);color:var(--ink)}
.btn-honey:hover{background:var(--honey-2)}
.btn-ghost-night{background:transparent;color:var(--night-ink);border-color:var(--night-rule)}
.btn-ghost-night:hover{border-color:var(--night-ink)}
.btn-sm{min-height:40px;padding:.2em 18px 0;font-size:.95rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,243,.94);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.logo{font:800 1.65rem/1 var(--sans);letter-spacing:-.03em;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.logo .h{color:#E9A70B}
/* Overpass sits its capitals above the middle of the line box (deep descender), so lift the mark
   by that offset to center it on the capitals rather than on the line box. */
.logo svg{width:30px;height:24px;transform:translateY(-.1em)}
.nav-links{display:flex;gap:4px;margin-left:8px}
/* Overpass sits its capitals ~.1em above the line box's middle (deep descender): 2px more on top centers them in the pill. */
.nav-links a,.nav-end .login{font-weight:600;font-size:.95rem;color:var(--ink-2);text-decoration:none;padding:11px 12px 9px;border-radius:999px}
.nav-links a:hover,.nav-end .login:hover{background:var(--paper-2);color:var(--ink)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:6px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{background:var(--paper-2)}
.menu-panel{position:absolute;right:0;top:52px;width:min(86vw,320px);background:var(--paper);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--float);padding:8px;display:grid}
.menu-panel a{padding:14px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.menu-panel a:hover{background:var(--paper-2)}
@media (max-width:900px){.nav-links,.nav-end .login{display:none}.menu{display:block}.nav-in{gap:10px}}
@media (max-width:480px){.logo{font-size:1.4rem}.logo svg{width:26px;height:21px}.nav-end .btn-sm{padding:.2em 14px 0}}
@media (max-width:370px){.logo{font-size:1.2rem;gap:7px}.logo svg{width:22px;height:18px}.nav-end{gap:2px}.nav-end .btn-sm{padding:.2em 12px 0;font-size:.88rem}}

/* hero */
.hero{padding:clamp(16px,2.2vw,28px) 0 clamp(32px,4vw,56px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy card" "logos card";grid-template-rows:auto 1fr;column-gap:clamp(28px,4.5vw,64px);row-gap:0;align-items:start}
.hero-copy{grid-area:copy}.hero-card{grid-area:card}.logos{grid-area:logos}
/* A hero with no quote under the copy centers its copy against the app card. */
@media (min-width:981px){.hero-grid:not(:has(> .logos)) > .hero-copy{grid-row:1/-1;align-self:center}}
.hero h1{font-size:clamp(2.15rem,1.1rem + 3.6vw,3.85rem);line-height:1.02;letter-spacing:-.035em;max-width:15.5ch}
.hero h1 .shop,mark{background:linear-gradient(180deg,transparent 70%,var(--honey-mark) 70%,var(--honey-mark) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:inherit}
.lede{margin-top:clamp(18px,2.4vw,26px);font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.5;max-width:38ch}
.cta-row{margin-top:clamp(22px,3vw,30px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.fine{margin-top:14px;font-size:.9rem;color:var(--ink-3);max-width:46ch}
.logos{margin-top:clamp(28px,3.5vw,44px)}
.logo-row{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.logo-row img{width:auto}
.logo-row span{font-size:.88rem;color:var(--ink-3)}
.running{font-size:1.02rem;line-height:1.45;color:var(--ink);max-width:44ch}
.running b{font-weight:700}
/* Where Riggs runs: the sentence on the left, the logos on the right */
.proofbar{margin-top:clamp(36px,5vw,64px);padding-top:clamp(20px,2.5vw,28px);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:18px clamp(28px,4.5vw,64px);align-items:center}
.proofbar .running{max-width:30ch;font-size:clamp(1.15rem,1rem + .5vw,1.35rem);line-height:1.35}
.proofbar .logo-row{margin-top:0;justify-content:space-between;gap:18px 26px}
@media (max-width:900px){.proofbar{grid-template-columns:1fr}.proofbar .logo-row{justify-content:flex-start}}

/* The hero app floats on the page with the shared soft shadow. */
.hero-card{display:flex;justify-content:flex-end}
.hero-card > .app{width:100%;max-width:560px}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "logos";row-gap:28px}.hero-grid:not(:has(> .logos)){grid-template-areas:"copy" "card";grid-template-rows:auto auto}.hero h1{max-width:17ch}.logos{margin-top:0}.hero-card{justify-content:stretch}}

/* app frame: drawn from the app's own components */
.app{font-family:var(--app);color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:20px;box-shadow:var(--float);overflow:hidden;letter-spacing:0}
.app b,.app strong{font-weight:600}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font:500 13px/20px var(--app);white-space:nowrap}
.p-routine{background:var(--p-routine-bg);color:var(--p-routine)}
.p-fault{background:var(--p-fault-bg);color:var(--p-fault)}
.p-req{background:var(--p-req-bg);color:var(--p-req)}
.sx-over{color:var(--sx-over)}.sx-soon{color:var(--sx-soon)}
.abtn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border-radius:999px;font:500 14px/1 var(--app);border:1px solid transparent;cursor:pointer;white-space:nowrap}
.abtn-ink{background:var(--ink);color:#fff}
.abtn-ink:hover{background:#2A2620}
.abtn-out{background:#fff;color:var(--ink);border-color:var(--rule-2)}
.abtn:disabled{cursor:default;background:var(--wash);color:var(--ink-2)}
.slabel{display:flex;align-items:center;gap:8px;height:32px;font:500 11px/1 var(--app);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.slabel span{background:var(--wash);border-radius:6px;padding:3px 6px;font-size:11px;letter-spacing:0}
.tile{border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.tile > * + *{border-top:1px solid var(--rule)}

/* run chat (hero) */
/* The hero app is drawn as the app's run panel (RunSlidePanel + RiggsRunHeader + RunAgentChat):
   it slides in from the right edge, x on the left, Riggs over the vehicle pill, Chat | Activity on the right. */
.app.panel{border-radius:24px 0 0 24px;border-right:0;box-shadow:-8px 0 24px -8px rgba(44,24,16,.18),0 24px 48px -24px rgba(44,24,16,.2)}
.panel-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:8px;padding:14px 18px 6px}
.xbtn{width:44px;height:44px;border-radius:999px;background:var(--paper);box-shadow:0 4px 8px -1px rgba(44,24,16,.10),0 2px 4px -1px rgba(44,24,16,.06);display:grid;place-items:center;color:var(--ink-2)}
.xbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.who{display:flex;flex-direction:column;align-items:center;min-width:0}
.who > svg{width:46px;height:42px}
.ctx{margin-top:2px;display:inline-flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:0 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);box-shadow:0 4px 8px -1px rgba(44,24,16,.10),0 2px 4px -1px rgba(44,24,16,.06);font:600 14px/1.45 var(--app);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx i{font-style:normal;color:var(--ink-3)}
.seg{justify-self:end;display:flex;padding:2px;border:1px solid var(--rule);border-radius:999px;background:var(--paper)}
.seg > *{appearance:none;border:0;background:none;cursor:pointer;min-height:40px;padding:0 12px;border-radius:999px;font:400 14px/40px var(--app);color:var(--ink-2)}
.seg > [aria-selected=true],.seg > .on{background:var(--paper-2);color:var(--ink);font-weight:500}
.panel .chat,.panel .activity,.panel .compose{width:100%;max-width:580px;margin-inline:auto}
.copy{display:flex;align-items:center;gap:6px;margin:6px 0 0 8px;font:400 13px var(--app);color:var(--ink-3)}
.copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.panel .btn-approve,.panel .act .abtn{text-transform:uppercase;letter-spacing:.04em;min-height:42px;padding:0 20px}
.panel .compose{border-top:0;padding:6px 18px 18px}
.panel .chips-row{justify-content:center}
.panel .input{justify-content:flex-start;min-height:52px;padding:0 6px}
.panel .input b{flex:none;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font:300 22px/1 var(--app);color:var(--ink-2)}
.panel .input span{flex:1;min-width:0;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:981px){.hero{overflow-x:clip}.hero-card{margin-right:calc(-1 * max(var(--gutter),(100vw - var(--max)) / 2 + var(--gutter)))}.hero-card > .app.panel{max-width:none}}
@media (max-width:980px){.app.panel{border-radius:20px;border-right:1px solid var(--rule-2)}}
/* Activity: the run's timeline, the app's rail and dot with who, what and when */
.activity{min-height:clamp(280px,24vw,320px);max-height:clamp(280px,24vw,320px);overflow-y:auto;padding:18px 18px 8px}
.activity[hidden],.chat[hidden]{display:none}
.ev{position:relative;padding:0 0 16px 22px;font:400 13.5px/1.45 var(--app);color:var(--ink-2)}
.ev::before{content:"";position:absolute;left:3px;top:14px;bottom:0;width:1px;background:var(--rule)}
.ev:last-child::before{display:none}
.ev::after{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:99px;background:var(--rule-2)}
.ev.riggs::after{background:var(--honey)}
.ev b{font-weight:600;color:var(--ink)}
.ev time{display:block;font-size:12px;color:var(--ink-3)}
html.js .ev.later:not(.show){display:none}
html.js .ev.later.show{animation:rise .6s var(--ease) both}
.chat{min-height:clamp(280px,24vw,320px);overflow-y:auto;padding:16px 14px 18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:92%}
.bub{border-radius:22px;padding:13px 17px;font:400 15.5px/1.6 var(--app)}
.bub-r{background:var(--bub-riggs)}
.bub-u{background:var(--bub-you)}
.bub .work{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.bub .act{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bub .note{font-size:12px;color:var(--ink-3)}
.quiet{align-self:center;font:500 12px/1.4 var(--app);color:var(--ink-3);padding:2px 10px}
.doc{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--ink-2)}
.doc svg{width:14px;height:14px}
html.js .later:not(.show){display:none}
html.js .later.show{animation:rise .6s var(--ease) both}
.typing{display:none;align-self:flex-start;gap:4px;padding:14px 16px;border-radius:22px;background:var(--bub-riggs)}
.typing.on{display:inline-flex}
.typing i{width:6px;height:6px;border-radius:99px;background:var(--ink-3);opacity:.35;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html.js .intro{animation:rise .7s var(--ease) both}
  html.js .intro:nth-child(2){animation-delay:.08s}
  html.js .intro:nth-child(3){animation-delay:.16s}
}
@media (prefers-reduced-motion:reduce){html.js .later.show{animation:none}.typing i{animation:none}.chat{scroll-behavior:auto}}
.night :focus-visible,.close :focus-visible{outline-color:var(--honey)}
.compose{padding:10px 14px 14px;border-top:1px solid var(--rule);pointer-events:none}
.chips-row span,.input{opacity:.7}
.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips-row span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(24,22,15,.10);background:#fff;font:500 12.5px/1 var(--app);color:rgba(24,22,15,.8)}
.input{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 6px 0 16px;border-radius:999px;border:1px solid var(--rule-2);background:#fff;font:400 14px/1 var(--app);color:var(--ink-3)}
.input i{width:32px;height:32px;border-radius:999px;background:var(--wash);display:grid;place-items:center;font-style:normal;color:var(--ink-3)}
.chat > *{flex-shrink:0}
#run.done .chips-row{visibility:hidden}
/* The demo's Approve invites a click with a honey ring until it's pressed. */
.btn-approve:not(:disabled){box-shadow:0 0 0 3px rgba(253,184,19,.55)}
@media (prefers-reduced-motion:no-preference){.btn-approve:not(:disabled){animation:invite 2.4s var(--ease) infinite}}
@keyframes invite{0%{box-shadow:0 0 0 0 rgba(253,184,19,.75)}70%,100%{box-shadow:0 0 0 12px rgba(253,184,19,0)}}
@media (max-width:480px){.seg > *{padding:0 9px}.chat{min-height:0}.chips-row span:nth-child(2){display:none}.btn-approve{min-height:44px}}

/* sections */
/* A #link lands with the section's label 32px under the nav, not the section's top padding. */
.sec{padding:var(--sec-pad) 0;border-top:1px solid var(--rule)}
.sec[id]{scroll-margin-top:calc(16px - var(--sec-pad))}
.h2{font-size:clamp(2rem,1.25rem + 2.4vw,3.1rem);line-height:1.03;letter-spacing:-.03em;margin-top:14px;max-width:20ch}
/* A centered section head: one line on desktop, centered over what follows */
.sec-head{text-align:center}
.sec-head .h2{max-width:none;margin-inline:auto}
.sec-head p{margin:16px auto 0;max-width:52ch;color:var(--ink-2);font-size:1.08rem}

/* how it works */
.steps{margin-top:clamp(40px,6vw,72px);display:grid;gap:clamp(56px,8vw,104px)}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center}
.step:nth-child(even) .step-copy{order:2}
.step h3{font-size:clamp(1.5rem,1.15rem + 1.2vw,2.1rem);line-height:1.1;letter-spacing:-.025em;margin-top:10px}
/* Headings that open their block (no eyebrow above) sit flush. */
:is(.h2,.step h3,.never-title h2):first-child{margin-top:0}
.step-copy > p:not(.label){margin-top:14px;color:var(--ink-2);max-width:44ch}
.step-copy > .proof{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);font-weight:700;max-width:44ch;line-height:1.4;color:var(--ink)}
@media (max-width:900px){.step{grid-template-columns:1fr}.step:nth-child(even) .step-copy{order:0}}

/* review queue */
.queue{padding:18px}
.qrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 16px;min-height:56px}
.qrow .v{font:600 15px/20px var(--app);letter-spacing:-.01em}
.qrow .pills{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.qplan{display:flex;align-items:flex-start;gap:8px;padding:0 16px 14px;font:400 14.5px/1.4 var(--app)}
.qplan svg{width:26px;height:24px;flex:none;margin-top:-2px}
.qwrap{border-top:0}
.prog{display:flex;align-items:center;gap:12px;padding:12px 16px}
.prog .v{font:600 15px/20px var(--app)}
.prog .sub{font:400 13px/18px var(--app);color:var(--ink-2)}
.track{margin-left:auto;text-align:left}
.dots{display:flex;align-items:center}
.dots i{width:8px;height:8px;border-radius:99px;border:1px solid var(--rule-2);display:block}
.dots i.done{background:var(--ink);border-color:var(--ink)}
.dots i.now{border:2px solid var(--ink);box-shadow:0 0 0 3px rgba(24,22,15,.12)}
.dots b{display:block;width:12px;height:1px;background:var(--rule)}
.track small{display:block;margin-top:6px;font:400 11px/1 var(--app);color:var(--ink-3)}
@media (max-width:520px){.qrow{grid-template-columns:minmax(0,1fr) auto}.qrow .pills{grid-column:1/-1;grid-row:2}.queue{padding:12px}}

/* text thread */
.thread{padding:18px 16px 8px;display:flex;flex-direction:column}
.sms{display:flex;flex-direction:column;margin-bottom:12px}
.sms.out{align-items:flex-end}
.sms.in{align-items:flex-start}
.sms .b{max-width:82%;padding:10px 12px;border-radius:16px;font:400 14.5px/1.45 var(--app)}
.sms.out .b{background:var(--ink);color:#fff}
.sms.in .b{background:#fff;border:1px solid var(--rule-2)}
.sms .m{margin-top:4px;font:400 12px/1.3 var(--app);color:var(--ink-3)}
.sms .by{display:flex;align-items:center;gap:6px;margin-bottom:4px;font:600 11px/1 var(--app);color:var(--honey-ink)}
.sms .by svg{width:16px;height:15px}
.call{margin:2px 0 14px;border-radius:16px;background:var(--wash);padding:12px 16px}
.call p{font:500 14px/1.4 var(--app)}
.call small{display:block;margin-top:2px;font:400 12px/1.4 var(--app);color:var(--ink-3)}

/* invoice review */
.inv{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.paper{background:var(--tint);border-right:1px solid var(--rule);padding:18px;display:flex;align-items:center;justify-content:center}
.sheet{width:100%;max-width:220px;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px 14px;box-shadow:0 8px 20px -12px rgba(44,24,16,.35);font:500 10px/1.5 var(--app);color:var(--ink-2)}
.sheet strong{display:block;font-size:11px;color:var(--ink);letter-spacing:.02em}
.sheet .ln{display:flex;justify-content:space-between;gap:6px;border-top:1px dotted var(--rule-2);padding-top:3px;margin-top:3px}
.sheet .tot{font-weight:600;color:var(--ink);border-top:1px solid var(--ink-3)}
.form{padding:18px}
.flabel{font:500 11px/1 var(--app);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fields div{display:grid;gap:6px}
.slot{min-height:38px;display:flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--wash);font:400 14px/1.2 var(--app);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lines{margin-top:16px}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--rule);font:400 14px/1.35 var(--app)}
.line .to{grid-column:1;font-size:12.5px;color:var(--ink-2)}
.line .to b{font-weight:500;color:var(--ink)}
.line .amt{grid-row:1;grid-column:2;font-variant-numeric:tabular-nums}
.line .add{color:var(--honey-ink);font-weight:500}
.save{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:400 12px/1.3 var(--app);color:var(--ink-3)}
@media (max-width:560px){.inv{grid-template-columns:1fr}.paper{border-right:0;border-bottom:1px solid var(--rule)}.sheet{max-width:240px}}

/* guardrails: centered title over the four "never"s, two by two */
.night{background:var(--night);color:var(--night-ink);border-top:0}
.night .label{color:var(--night-ink-2)}
.never-grid{display:grid;gap:clamp(32px,5vw,56px)}
.never-title{text-align:center}
.never-title h2{font-size:clamp(2.4rem,1.3rem + 3.4vw,3.6rem);line-height:.95;letter-spacing:-.04em;margin-top:14px}
.never-title h2 em{font-style:normal;color:inherit}
.never-title p{margin:20px auto 0;color:var(--night-ink-2);max-width:44ch}
.never{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4.5vw,64px)}
.never li{padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--night-rule)}
.never strong{display:block;font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.never span{display:block;margin-top:6px;color:var(--night-ink-2);max-width:46ch}
.never:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.never,.never:has(> li:nth-child(3):last-child){grid-template-columns:1fr}}

/* pricing: centered head, the card centered under it */
.price-grid{display:grid;justify-items:center;gap:clamp(28px,4vw,48px);text-align:center}
.price-copy .h2{max-width:none}
.price-copy > p:not(.label){margin:18px auto 0;color:var(--ink-2);max-width:52ch;font-size:1.08rem}
.price-card{width:100%;max-width:560px;text-align:left;border:1px solid var(--rule-2);border-radius:24px;padding:clamp(24px,3vw,36px)}
.amount{display:flex;align-items:baseline;gap:10px}
.amount b{font:800 clamp(3.2rem,2.4rem + 2.6vw,4.6rem)/1 var(--sans);letter-spacing:-.04em}
.amount span{color:var(--ink-2);font-weight:600;line-height:1.25}
.incl{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
.incl li{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:1rem;line-height:1.4}
.incl li svg{width:18px;height:18px;margin-top:2px;color:var(--honey-ink)}
.price-card .cta-row{margin-top:24px}
.price-card .fine{margin-top:16px}
@media (max-width:480px){.price-card .btn{flex:1 1 100%}}
.example{margin-top:10px;font-size:.95rem;color:var(--ink-2)}
.price-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%;max-width:980px;text-align:left}
@media (max-width:820px){.price-cards{grid-template-columns:1fr}}
.price-cards .price-card{max-width:none;display:flex;flex-direction:column}
.price-cards .price-card .cta-row{margin-top:auto;padding-top:24px}
.tier{font-weight:700;margin:0 0 10px;color:var(--ink-2);font-size:1.05rem}
.amount b.word{font-size:clamp(2rem,1.6rem + 1.4vw,2.8rem)}

/* faq: centered head over one centered column */
.faq-grid{display:grid;gap:clamp(28px,4vw,48px);max-width:860px;margin-inline:auto}
.faq-grid > div:first-child{text-align:center}
.faq-grid .h2{font-size:clamp(1.85rem,1.2rem + 1.6vw,2.55rem);max-width:none}
.qa{border-bottom:1px solid var(--rule)}
.qa:first-child{border-top:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:16px;align-items:center;padding:20px 0;font-weight:700;font-size:1.1rem;line-height:1.35;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary > span:first-child{padding-top:.12em}
.qa summary .pm{position:relative;width:28px;height:28px;border-radius:99px;border:1px solid var(--rule-2);color:var(--ink);transition:transform .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.qa summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa summary:hover .pm{background:var(--paper-2)}
.qa[open] summary .pm{transform:rotate(45deg);background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qa .a{padding:0 44px 24px 0;color:var(--ink-2);max-width:64ch}
.qa .a .a-cta{margin-top:16px}

/* closing */
.close{background:var(--night);color:var(--night-ink);padding:clamp(64px,9vw,120px) 0}
.close{text-align:center}
.close .cta-row{justify-content:center}
.close h2{font-size:clamp(2.1rem,1.2rem + 3vw,3.4rem);line-height:1;letter-spacing:-.035em;max-width:16ch;margin-inline:auto}
.close h2 em{font-style:normal;color:inherit}
.close p{margin:20px auto 0;font-size:1.15rem;color:var(--night-ink-2);max-width:44ch}
.close .fine{color:var(--night-ink-2)}

/* footer */
.foot{padding:48px 0 56px;font-size:.92rem;background:var(--night);color:var(--night-ink-2)}
.foot .logo{color:var(--night-ink)}
.foot .label{color:var(--night-ink-2);opacity:.75}
.foot :focus-visible{outline-color:var(--honey)}
main:has(> .close:last-child) + .foot{padding-top:0}
main:has(> .close:last-child) + .foot .foot-grid{border-top:1px solid var(--night-rule);padding-top:48px}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px}
.foot nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.foot nav > div{display:grid;gap:6px;align-content:start}
.foot nav .label{margin-bottom:6px}
.foot nav a{text-decoration:none;padding:4px 0}
.foot nav a:hover{color:var(--night-ink);text-decoration:underline}
.foot .small{margin-top:14px;color:var(--night-ink-2);font-size:.85rem}
.foot .geo{display:flex;align-items:center;gap:10px}
.foot .geo + .geo{margin-top:8px}
.foot .geo svg{width:24px;flex:none}
.foot .tx-mark{height:23px}
.foot .us-mark{height:16px}
.foot .geo path,.foot .geo rect,.foot .geo line{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.foot .geo circle{fill:var(--honey)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}.foot nav{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

/* ── Inner pages: shared page header, prose, cards, forms ───────────────── */
.page-head{padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,48px)}
.page-head h1{font-size:clamp(2.1rem,1.2rem + 3vw,3.4rem);line-height:1.04;letter-spacing:-.033em;margin-top:14px;max-width:20ch}
.page-head .lede{max-width:52ch}
.page-head .meta{margin-top:18px;font-size:.92rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 14px}
.crumbs{font-size:.9rem;color:var(--ink-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.narrow{max-width:760px}
.page-body{padding-bottom:clamp(56px,8vw,112px)}

/* Long-form text: blog posts, legal pages, support */
.prose{font-size:1.08rem;line-height:1.7;color:var(--ink);max-width:68ch}
.prose > * + *{margin-top:1.05em}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);line-height:1.15;letter-spacing:-.025em;margin-top:2em}
.prose h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;margin-top:1.6em}
.prose h4{font-size:1.05rem;margin:1.4em 0 0}
.prose h2 + *,.prose h3 + *{margin-top:.6em}
.prose a{color:var(--honey-ink);text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--ink-3)}
.prose strong{font-weight:700}
.prose blockquote{margin-left:0;padding:4px 0 4px 20px;border-left:1px solid var(--rule-2);color:var(--ink-2);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.2em 0}
.prose code{font:500 .9em var(--mono);background:var(--tint);border-radius:6px;padding:1px 6px}
.prose pre{background:var(--tint);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose thead th{font:600 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:2px solid var(--ink)}
.prose img{max-width:100%;height:auto;border-radius:14px}
.prose figure{margin:1.6em 0}
.prose figcaption{margin-top:8px;font-size:.88rem;color:var(--ink-3)}

/* Card list (blog index, related posts): hairline rows, no floating boxes */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:0 clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
.card{display:block;padding:24px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.card h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.015em}
.card p{margin-top:8px;color:var(--ink-2);font-size:.98rem;line-height:1.5}
.card .meta{margin-top:12px;font-size:.85rem;color:var(--ink-3)}
.card:hover h3{text-decoration:underline;text-underline-offset:3px}

/* Forms (support, ROI, verify): white pressable fields on the warm canvas */
.field{display:grid;gap:6px}
.field label,.field .flabel{font:600 .74rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--rule-2);border-radius:14px;background:#fff;font:400 1rem/1.4 var(--sans);color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235D574E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px}
.field select:hover{border-color:var(--ink-3)}

/* Section bands reused by inner pages */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rows > li{display:grid;grid-template-columns:minmax(140px,3fr) minmax(0,8fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.rows > li > :first-child{font-weight:700}
.rows > li > :last-child{color:var(--ink-2)}
@media (max-width:900px){.split{grid-template-columns:1fr}.rows > li{grid-template-columns:1fr;gap:4px}}

/* Facts page (/agents/): definition rows, software status, plain links */
.facts{margin:0;border-top:2px solid var(--ink)}
.facts > div{display:grid;grid-template-columns:minmax(120px,3fr) minmax(0,8fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.facts dt{font:600 .74rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.facts dd{margin:0}
.status{width:100%;border-collapse:collapse;margin-top:40px;font-size:.98rem}
.status caption{text-align:left;font-weight:800;font-size:1.25rem;letter-spacing:-.015em;padding-bottom:12px}
.status th,.status td{text-align:left;padding:13px 12px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.status thead th{font:600 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:2px solid var(--ink)}
.status td:last-child{color:var(--ink-2)}
.chip{display:inline-flex;font:500 .8rem/1 var(--sans);padding:6px 10px 5px;border-radius:999px;border:1px solid;white-space:nowrap}
.c-ok{background:#EAF1E4;color:#3F6332;border-color:#C9DABD}
.c-amb{background:#FBEFD6;color:#8B5600;border-color:#EBD19C}
.c-neu{background:#F3F0EA;color:#68625B;border-color:#D8D3CC}
.code{margin-top:18px;font:500 .82rem/1.6 var(--mono);background:var(--tint);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;overflow-x:auto;white-space:pre}
.links{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.links a{font:600 .8rem/1 var(--mono);text-decoration:none;border:1px solid var(--rule-2);border-radius:999px;padding:11px 14px}
.links a:hover{background:var(--paper-2)}
@media (max-width:700px){.facts > div{grid-template-columns:1fr;gap:4px}.status thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.status tr{display:grid;grid-template-columns:1fr auto;padding:12px 0;border-bottom:1px solid var(--rule)}.status td,.status th{border:0;padding:2px 0}.status td:last-child{grid-column:1/-1}}

/* Small shared pieces promoted from pages */
.hero-copy > .label{margin-bottom:16px}
.tile + .slabel{margin-top:20px}
.msg.you{align-self:flex-end}
.fields .wide{grid-column:1/-1}
.sheet .ln.first{margin-top:8px}

/* Legal callouts and form states (privacy, terms, security, sub-processors, support, verify) */
.prose .note{background:var(--tint);border-radius:14px;padding:16px 20px}
.prose .note > * + *{margin-top:.8em}
.prose .note > :first-child{margin-top:0}
.form-msg{margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--paper-2);font-size:.98rem}
.form-msg[data-state=success]{background:var(--p-req-bg);color:var(--p-req)}
.form-msg[data-state=error]{background:var(--p-fault-bg);color:var(--p-fault)}
.field-error{color:var(--p-fault);font-size:.92rem}
.field input[aria-invalid=true]{border-color:var(--p-fault)}
.check{display:flex;align-items:flex-start;gap:12px}
.check input{flex:none;width:20px;height:20px;margin:5px 0 0;accent-color:var(--ink)}

/* ROI calculator: range input and a right-aligned ledger */
.calc-form{display:grid;gap:22px}
.calc-result .amount{margin-top:14px}
.field input[type=range]{min-height:0;height:28px;padding:0;border:0;background:none;accent-color:var(--ink);cursor:pointer}
.range-row{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--ink-3)}
.range-row output{font-weight:700;color:var(--ink)}
.rows.ledger{margin-top:24px}
.rows.ledger > li{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;padding:14px 0}
.rows.ledger > li > :first-child{font-weight:400;color:var(--ink-2)}
.rows.ledger > li > :last-child{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.rows.ledger > li.total{margin-top:-1px;border-top:2px solid var(--ink);border-bottom:0}
.rows.ledger > li.total > *{font-weight:800;color:var(--ink)}

/* EV charging map (/ev-charging-map/): Mapbox needs a sized stage; its controls and popups use the site tokens */
.map-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px;padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(16px,2vw,24px)}
.map-head h1{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);line-height:1.08;letter-spacing:-.03em;margin-top:10px}
.map-head .fine{margin-top:0;max-width:50ch}
.map-stage{position:relative;height:clamp(420px,calc(100svh - 220px),880px);background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#map{position:absolute;inset:0;transform:translateZ(0);touch-action:pan-x pan-y}
.suggested-card{position:absolute;left:16px;bottom:40px;z-index:2;display:flex;align-items:center;gap:16px;width:max-content;max-width:min(420px,calc(100% - 96px));padding:12px 18px;background:var(--paper);color:var(--ink);border:1px solid var(--rule-2);border-radius:16px;box-shadow:var(--float);font:inherit;text-align:left;cursor:pointer;transition:border-color .18s var(--ease)}
.suggested-card:hover{border-color:var(--ink)}
.suggested-card.hidden{display:none}
.suggested-content{min-width:0}
.suggested-content > span{display:block}
.suggested-name{margin-top:4px;font-weight:700;font-size:1rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggested-details{font-size:.88rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.suggested-arrow{font-weight:700;font-size:1.1rem}
.mapboxgl-popup-content{padding:16px;border-radius:16px;box-shadow:var(--float);min-width:280px;max-width:320px;font-family:var(--sans);color:var(--ink)}
.popup-title{font-size:1.05rem;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin:6px 0}
.popup-address{font-size:.88rem;line-height:1.4;color:var(--ink-2);margin-bottom:12px}
.popup-detail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.88rem;margin-bottom:6px}
.popup-actions{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.popup-actions .btn{width:100%}
.mapboxgl-popup-close-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:8px;font-size:24px;color:var(--ink-3);border-radius:0 16px 0 12px}
.mapboxgl-popup-close-button:hover{background-color:var(--paper-2);color:var(--ink)}
.map-stage .mapboxgl-ctrl-bottom-right{bottom:20px;right:20px}
.map-stage .mapboxgl-ctrl-group,.map-stage .mapboxgl-ctrl-group:not(:empty){background:transparent;border:0;box-shadow:none}
.map-stage .mapboxgl-ctrl-group > button{width:48px;height:48px;margin-bottom:8px;background-color:var(--paper);border:1px solid var(--rule-2);border-radius:12px;box-shadow:0 2px 8px rgba(24,22,15,.08);transition:background-color .18s var(--ease),border-color .18s var(--ease)}
.map-stage .mapboxgl-ctrl-group > button + button{border-top:1px solid var(--rule-2)}
.map-stage .mapboxgl-ctrl-group > button:not(:disabled):hover{background-color:var(--paper-2);border-color:var(--ink)}
.map-stage .mapboxgl-ctrl-group > button:focus:first-child,.map-stage .mapboxgl-ctrl-group > button:focus:last-child,.map-stage .mapboxgl-ctrl-group > button:focus:only-child{border-radius:12px}
.map-stage .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,.map-stage .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-size:22px 22px}
.map-stage .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-size:28px 28px}
.map-stage .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-size:24px 24px}
.map-stage .mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active{border-color:var(--ink)}
.map-stage .mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error{background-color:var(--p-fault-bg);border-color:var(--p-fault)}
@media (max-width:768px){
  .map-stage{height:clamp(420px,calc(100svh - 200px),880px)}
  .suggested-card{left:12px;padding:10px 14px}
  .map-stage .mapboxgl-ctrl-bottom-right{bottom:16px;right:16px}
  .map-stage .mapboxgl-ctrl-group > button{width:44px;height:44px;margin-bottom:6px}
  .map-stage .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,.map-stage .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-size:20px 20px}
  .map-stage .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-size:26px 26px}
  .map-stage .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-size:22px 22px}
  .mapboxgl-popup-content{min-width:0;max-width:calc(100vw - 40px);width:280px}
  .mapboxgl-popup-tip{border-width:8px}
}
@media (max-width:375px){.mapboxgl-popup-content{width:calc(100vw - 32px);padding:12px}}