/* KEY DOLPHIN — kd.css · built 1:1 from Colour & Token System v1.0 + Typography System v1.0 + Handoff §05–07
   Laws: R0 everywhere · no shadows · no gradients · one accent per view · stepped motion · mirror-first */

/* self-hosted fonts (Handoff §8.2) — latin subsets; Plex Sans is one variable file covering 400–600 */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(fonts/ibm-plex-sans-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --signal:#1E49E0; --egyptian:#11368F; --ink:#0E1D33; --paper:#FFFFFF; --bone:#EEE8DF;
  --shallow:#7B93E8; --salt:#B1BBC8; --dune:#D8CBB2; --harbor:#3F5F86;
  --carbon:#111315; --raised:#16263F;
  --lagoon:#177E63; --amber:#B45309; --madder:#B3403A;
  --volt:#D0FF41; --mango:#FFB43A; /* accents · one Volt moment per page · Ink on Volt, never Volt text on Paper */
  --text:var(--ink); --text-2:rgba(14,29,51,.75); --text-3:rgba(14,29,51,.55);
  --border-subtle:rgba(14,29,51,.15); --border-std:rgba(14,29,51,.35);
  --s2:2px; --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px;
  --s48:48px; --s64:64px; --s96:96px; --s128:128px;
  --t-fast:80ms; --t-std:120ms; --t-page:160ms; --t-slow:400ms;
  --cut:cubic-bezier(.2,0,0,1);
  --disp:"Space Grotesk",Arial,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0!important;box-shadow:none!important}
html{scroll-behavior:smooth}
body{font:400 16.5px/1.65 var(--sans);color:var(--text);background:var(--paper)}
img,svg{display:block}
a{color:inherit}
::selection{background:var(--signal);color:var(--paper)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---- type scale (Typography §02/§03) ---- */
.h-hero{font:700 clamp(44px,6.5vw,80px)/0.96 var(--disp);letter-spacing:-.02em;text-transform:uppercase;max-width:16ch}
.h1{font:700 clamp(36px,5vw,64px)/0.98 var(--disp);letter-spacing:-.02em;text-transform:uppercase}
.h2{font:700 clamp(30px,3.4vw,44px)/1.05 var(--disp);letter-spacing:-.015em}
.h3{font:700 24px/1.15 var(--disp);letter-spacing:-.01em}
.h4{font:600 20px/1.3 var(--sans)}
.lead{font:400 18px/1.6 var(--sans);max-width:60ch}
.body{max-width:72ch}
.small{font-size:14px;line-height:1.6}
.caption{font-size:12.5px;line-height:1.5;color:var(--text-3)}
.mono-label{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mono-line{font:500 12.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.eyebrow{composes:mono-label}
.muted{color:var(--text-2)}

/* ---- layout ---- */
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px}
section{padding-block:var(--s96)}
@media(max-width:767px){section{padding-block:var(--s64)}}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.split.rev{grid-template-columns:7fr 5fr}
@media(max-width:1023px){.split,.split.rev{grid-template-columns:1fr}}

/* ---- surfaces ---- */
.surf-signal{background:var(--signal);color:var(--paper)}
.surf-signal .muted{color:rgba(255,255,255,.8)}
.surf-ink{background:var(--ink);color:var(--bone)}
.surf-ink .muted{color:rgba(238,232,223,.75)}
.surf-ink .mono-label{color:rgba(238,232,223,.75)}
.eyebrow-signal{color:var(--signal)}
.eyebrow-shallow{color:var(--shallow)}

/* ---- nav ---- */
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:50}
.nav-inner{width:100%;max-width:1160px;margin:0 auto;padding-inline:24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font:500 14px/1 var(--sans);text-decoration:none;padding-block:8px;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--signal);transition:color var(--t-fast) var(--cut)}
.nav-links a[aria-current]{border-bottom-color:var(--signal)}
.lockup{display:flex;align-items:center;gap:14px;text-decoration:none}
.lockup .word{font:500 15px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.menu-btn{display:none;background:none;border:2px solid var(--ink);width:44px;height:44px;font:700 18px var(--sans);cursor:pointer}
@media(max-width:1023px){.nav-links{display:none}.menu-btn{display:block}}
.sheet{position:fixed;inset:0;background:var(--signal);z-index:99;display:none;flex-direction:column;padding:24px}
.sheet.open{display:flex}
.sheet a{font:700 28px/1.4 var(--disp);text-transform:uppercase;color:var(--paper);text-decoration:none;padding-block:12px}
.sheet .btn{margin-top:auto}
.sheet-close{position:absolute;top:20px;inset-inline-end:24px;width:44px;height:44px;background:none;border:2px solid var(--paper);color:var(--paper);font:700 18px var(--sans);line-height:1;cursor:pointer}
[id]{scroll-margin-top:88px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.live-card{display:inline-flex;align-items:stretch;margin-top:28px;background:var(--ink);border:2px solid var(--ink);padding:0;overflow:hidden;text-decoration:none;color:var(--bone);transition:border-color var(--t-fast) var(--cut)}
.live-card:hover{border-color:var(--signal)}
.live-card-txt{font:600 18px/1.2 var(--sans);padding:22px 28px;align-self:center}
.live-card-tile{width:96px;flex:none;background:var(--bone);display:flex;align-items:center;justify-content:center}
.demo-orb-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:128px;height:128px}
.demo-orb{width:128px;height:128px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;background:var(--paper);position:relative;z-index:1}
.wave-ring{position:absolute;top:0;left:0;width:128px;height:128px;border:2px solid var(--signal);opacity:0;pointer-events:none}
.calling .wave-ring{animation:kd-wave 1.8s var(--cut) infinite}
.calling .wave-ring:nth-child(2){animation-delay:.6s}
.calling .wave-ring:nth-child(3){animation-delay:1.2s}
@keyframes kd-wave{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.calling .wave-ring{animation:none}.calling .wave-ring:first-child{opacity:.4;transform:scale(1.4)}}
.tag-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.uc-tag{border:2px solid var(--border-std);background:var(--paper);color:var(--ink);font:500 13px/1 var(--sans);padding:11px 14px;cursor:pointer}
.uc-tag:hover,.uc-tag[aria-pressed="true"]{border-color:var(--signal);color:var(--signal)}
.demo-panel{position:relative;aspect-ratio:16/9;border:2px solid var(--ink);background:var(--ink);display:flex;align-items:center;justify-content:center}
.play-mark{width:72px;height:72px;border:2px solid var(--bone);display:flex;align-items:center;justify-content:center}
.try-live{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border:2px solid var(--bone);background:none;color:var(--bone);font:600 15px/1 var(--sans);cursor:pointer}
.try-live[disabled]{cursor:default;opacity:.75}
.try-live:not([disabled]):hover{background:var(--bone);color:var(--ink)}
.try-live .wave{display:inline-flex;align-items:center;gap:3px;height:18px}
.try-live .wave i{width:3px;height:6px;background:currentColor;display:block}
.try-live .wave i:nth-child(2){height:16px}
.try-live .wave i:nth-child(3){height:10px}
.try-live .wave i:nth-child(4){height:14px}

/* ---- buttons (Handoff §07) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:12px 24px;font:600 15px/1 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background var(--t-fast) var(--cut),color var(--t-fast) var(--cut)}
.btn-primary{background:var(--signal);color:var(--paper)}
.btn[disabled]{opacity:.5;cursor:default}
.btn-primary:hover{background:var(--egyptian)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-on-signal{background:var(--paper);color:var(--ink)}
.btn-on-signal:hover{background:var(--bone)}
.btn-ghost-on-signal{border-color:var(--paper);color:var(--paper)}
.btn-ghost-on-signal:hover{background:var(--paper);color:var(--ink)}
.tlink{font:600 15px/1 var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.tlink .ar{display:inline-block;transition:transform var(--t-std) var(--cut)}
.tlink:hover .ar{transform:translateX(4px)}
@media(max-width:767px){.btn{width:100%}}

/* ---- cards / rows ---- */
.card{border:2px solid var(--ink);padding:var(--s24);background:var(--paper);display:flex;flex-direction:column;gap:12px}
.card:hover .card-title{color:var(--signal);transition:color var(--t-fast) var(--cut)}
.card-title{font:500 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rows{border-top:1px solid var(--border-subtle)}
.row{padding-block:20px;border-bottom:1px solid var(--border-subtle);display:grid;grid-template-columns:220px 1fr;gap:16px}
@media(max-width:767px){.row{grid-template-columns:1fr;gap:4px}}
.field{display:flex;flex-direction:column;gap:4px}
.field .mono-label{color:var(--text-3)}

/* ---- chips & tags ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border:2px solid}
.chip-modeled{color:var(--amber);border-color:var(--amber)}
.chip-run{background:var(--signal);border-color:var(--signal);color:var(--paper)}
.dot{width:8px;height:8px;border-radius:999px!important;background:currentColor}

/* ---- KPI / metric ---- */
.kpi{border:2px solid currentColor;padding:16px 20px;min-height:112px;display:flex;flex-direction:column;gap:8px}
.kpi .val{font:700 44px/1 var(--disp)}
.kpi .val small{font:400 16px var(--sans);opacity:.6}

/* ---- bands ---- */
.band{padding-block:28px}
.band-flex{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

/* ---- element glyphs (2px stroke, geometry only) ---- */
.glyph{width:28px;height:28px;stroke:currentColor;stroke-width:2;fill:none}

/* ---- method blocks ---- */
.blocks{display:grid;grid-template-columns:repeat(3,1fr)}
.blocks>div{border:2px solid var(--ink);margin:-1px;padding:var(--s32);display:flex;flex-direction:column;gap:12px}
@media(max-width:1023px){.blocks{grid-template-columns:1fr}}

/* ---- accordion ---- */
details{border-bottom:1px solid var(--border-subtle)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;font:600 20px/1.3 var(--sans);min-height:44px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:400 24px var(--mono);color:var(--signal)}
details[open] summary:after{content:"✕";font-size:16px}
details .a{padding-bottom:20px;color:var(--text-2);max-width:65ch}

/* ---- forms (Handoff §07 inputs) ---- */
label{display:flex;flex-direction:column;gap:6px}
label .mono-label{color:var(--text-2)}
input,textarea,select{height:48px;border:2px solid var(--border-std);padding:11px 14px;font:400 16px var(--sans);background:var(--paper);color:var(--ink);width:100%}
textarea{height:auto;min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--signal);outline:2px solid rgba(30,73,224,.25)}
/* Grouped dropdowns (signup business type). Customizable-select opt-in
   (appearance: base-select, Chromium 135+) renders the picker as a stylable
   panel: Bone group bands in the mono caption style, indented options,
   Signal checkmark. Unsupported browsers keep their native picker. */
select,select::picker(select){appearance:base-select}
select::picker(select){background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:0;padding:0;max-height:340px;box-shadow:none}
select optgroup{background:transparent;padding:0}
select optgroup legend{font:600 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--text-2);background:var(--bone);padding:9px 14px 7px;margin:0;width:100%}
select option{font:400 15px var(--sans);letter-spacing:normal;text-transform:none;color:var(--ink);background:var(--paper);padding:10px 14px 10px 22px}
select option:hover,select option:focus{background:rgba(30,73,224,.10);outline:none}
select option:checked,select option:checked:focus{background:transparent;color:var(--signal);outline:none;border:0}
select option:checked:hover{background:rgba(30,73,224,.10)}
select option::checkmark{color:var(--signal);margin-inline-end:6px}
form{display:flex;flex-direction:column;gap:20px}

/* ---- tier table ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:1023px){.tiers{grid-template-columns:1fr}}
.tier{border:2px solid var(--ink);display:flex;flex-direction:column}
.tier.featured{border-color:var(--signal)}
.tier.featured .tier-head{background:var(--signal);color:var(--paper)}
.tier-head{padding:16px 20px;border-bottom:2px solid var(--ink)}
.tier.featured .tier-head{border-bottom-color:var(--signal)}
.tier-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.tier .price{font:700 30px/1.05 var(--disp)}
.tier .price small{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:6px;color:var(--text-3)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.5;color:var(--text-2)}
.tier ul li{padding-inline-start:16px;position:relative}
.tier ul li:before{content:"";position:absolute;inset-inline-start:0;top:8px;width:6px;height:6px;background:var(--signal)}
.tier .btn{margin-top:auto}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--bone);padding-block:64px 32px}
footer a{color:var(--bone)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-bottom:48px}
@media(max-width:767px){footer .cols{grid-template-columns:1fr}}
footer .cols a{display:block;text-decoration:none;font-size:14px;padding-block:4px}
footer .cols a:hover{color:var(--shallow)}
.legal{border-top:1px solid rgba(238,232,223,.2);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 9.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(238,232,223,.65)}

/* ---- calculator ---- */
input[type=range]{height:auto;padding:0;border:0;accent-color:var(--signal);width:100%}
.calc-out{font:700 clamp(36px,4vw,52px)/1 var(--disp)}
.calc-row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.calc-row b{font:500 13px var(--mono)}

/* ---- misc ---- */
.sticky-cta{position:fixed;bottom:0;inset-inline:0;z-index:40;display:none;background:var(--ink);padding:12px 16px}
@media(max-width:767px){.sticky-cta{display:flex;gap:12px}.sticky-cta .btn{flex:1}body:has(.sticky-cta){padding-bottom:72px}}
.frame{border:2px solid var(--ink);background:var(--paper);color:var(--ink)}
.panel-egy{background:var(--egyptian);padding:var(--s32)}
hr.rule{border:0;border-top:2px solid var(--ink);margin-block:var(--s48)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}