/* KeyHolder marketing site. Signal tokens from docs/design/keyholder/exports/tokens.json. No external resources. */
:root{
  --primary:#1E40AF;--on-primary:#FFFFFF;--primary-container:#DFE4F4;--on-container:#111827;
  --secondary:#111827;--on-secondary:#FFFFFF;--tertiary:#6D28D9;
  --error:#B91C1C;--error-container:#F7E4E4;
  --surface:#FFFFFF;--on-surface:#111827;--on-variant:#4B5563;--low:#F8FAFC;--high:#EEF2F7;
  --outline:#4B5563;--outline-v:#CBD5E1;
  --exception:#C2410C;--exception-c:#F6E4DD;--success:#047857;--success-c:#DCECE7;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-sheet:22px;
  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;
  --font:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --primary:#86AAFF;--on-primary:#0A1633;--primary-container:#222C41;--on-container:#F1F5F9;
  --secondary:#F1F5F9;--on-secondary:#121822;--tertiary:#C4A8FF;
  --error:#FF8A8A;--error-container:#2E262E;
  --surface:#121822;--on-surface:#F1F5F9;--on-variant:#A3AFC0;--low:#0A0E14;--high:#1A2230;
  --outline:#A3AFC0;--outline-v:#2A3446;
  --exception:#FF9C5E;--exception-c:#332A2A;--success:#3DD6A0;--success-c:#183334;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--on-surface);font:400 1.0625rem/1.55 var(--font)}
img,svg{max-width:100%}
a{color:var(--primary);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:var(--s16);top:-100px;background:var(--secondary);color:var(--on-secondary);padding:var(--s12) var(--s16);border-radius:var(--r-md);z-index:10}
.skip:focus{top:var(--s8)}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 var(--s16)}
h1,h2,h3{line-height:1.2;margin:0 0 var(--s12);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.25rem)}
h2{font-size:clamp(1.5rem,4vw,2.125rem)}
h3{font-size:1.25rem}
p{margin:0 0 var(--s16)}
.lead{font-size:1.25rem;color:var(--on-variant);max-width:40rem}
.muted{color:var(--on-variant)}
.eyebrow{display:inline-block;font-size:.9375rem;font-weight:700;color:var(--on-container);background:var(--primary-container);padding:var(--s4) var(--s12);border-radius:999px;margin-bottom:var(--s16)}
header.top{border-bottom:1px solid var(--outline-v);background:var(--surface)}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8) var(--s16);padding-top:var(--s12);padding-bottom:var(--s12)}
.brand{display:flex;align-items:center;gap:var(--s8);font-weight:700;font-size:1.25rem;color:var(--on-surface);text-decoration:none;margin-right:auto}
.brand svg{width:28px;height:28px}
nav.main{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8)}
nav.main a{color:var(--on-surface);text-decoration:none;padding:var(--s8) var(--s12);border-radius:var(--r-md);min-height:44px;display:inline-flex;align-items:center}
nav.main a:hover{background:var(--high)}
nav.main a[aria-current=page]{background:var(--primary-container);color:var(--on-container);font-weight:700}
.lang{border:1px solid var(--outline);border-radius:999px;padding:var(--s8) var(--s16);min-height:44px;display:inline-flex;align-items:center;color:var(--on-surface);text-decoration:none;font-weight:700}
.lang:hover{background:var(--high)}
main{display:block}
section{padding:var(--s48) 0}
section.alt{background:var(--low);border-top:1px solid var(--outline-v);border-bottom:1px solid var(--outline-v)}
.hero{padding:var(--s48) 0 var(--s32)}
.hero .grid{display:grid;gap:var(--s32);align-items:center}
.cta{display:flex;flex-wrap:wrap;gap:var(--s12);margin:var(--s24) 0 var(--s16)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--s12) var(--s24);border-radius:var(--r-md);font:700 1.0625rem var(--font);text-decoration:none;border:2px solid var(--primary);background:var(--primary);color:var(--on-primary);cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:transparent;color:var(--primary)}
.soon{display:inline-flex;align-items:center;min-height:48px;padding:var(--s12) var(--s16);border:2px dashed var(--outline);border-radius:var(--r-md);color:var(--on-variant);font-weight:700}
.cards{display:grid;gap:var(--s16);grid-template-columns:1fr}
.card{background:var(--surface);border:1px solid var(--outline-v);border-radius:var(--r-lg);padding:var(--s24)}
section.alt .card{background:var(--surface)}
.card svg.ic{width:32px;height:32px;stroke:var(--primary);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--s12)}
.card h3{margin-bottom:var(--s8)}
.card p:last-child{margin-bottom:0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s24)}
.step{display:grid;gap:var(--s16);align-items:center;border:1px solid var(--outline-v);border-radius:var(--r-lg);padding:var(--s24);background:var(--surface)}
.num{display:inline-flex;width:40px;height:40px;border-radius:999px;background:var(--primary);color:var(--on-primary);align-items:center;justify-content:center;font-weight:700;margin-bottom:var(--s8)}
.note{border-left:4px solid var(--primary);background:var(--primary-container);color:var(--on-container);padding:var(--s16);border-radius:var(--r-md)}
.warn{border-left:4px solid var(--exception);background:var(--exception-c);color:var(--on-surface);padding:var(--s16);border-radius:var(--r-md)}
/* Device frames (illustrative, drawn in CSS) */
.devs{display:flex;flex-wrap:wrap;gap:var(--s16);justify-content:center}
.phone{width:220px;border:8px solid var(--secondary);border-radius:32px;background:var(--surface);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18);flex:none}
.phone .bar{height:20px;display:flex;justify-content:center;align-items:center;background:var(--low)}
.phone .bar i{width:56px;height:6px;border-radius:99px;background:var(--outline-v)}
.scr{padding:var(--s12);min-height:340px;font-size:.875rem;line-height:1.35;display:flex;flex-direction:column;gap:var(--s8);background:var(--surface);color:var(--on-surface)}
.scr h4{margin:0;font-size:1.0625rem}
.scr .row{border:1px solid var(--outline-v);border-radius:var(--r-md);padding:var(--s8) var(--s12);background:var(--low)}
.scr .b{display:block;text-align:center;font-weight:700;border-radius:var(--r-md);padding:var(--s12);background:var(--primary);color:var(--on-primary)}
.scr .b.k{background:var(--secondary);color:var(--on-secondary)}
.scr .pill{display:inline-block;font-size:.8125rem;font-weight:700;padding:2px var(--s8);border-radius:99px;background:var(--exception-c);color:var(--exception)}
.scr .pill.ok{background:var(--success-c);color:var(--success)}
.scr .tick{display:flex;gap:var(--s8);align-items:center}
.scr .tick b{width:16px;height:16px;border:2px solid var(--outline);border-radius:4px;flex:none}
.scr .tick b.on{background:var(--success);border-color:var(--success)}
.cap{text-align:center;font-size:.9375rem;color:var(--on-variant);margin-top:var(--s8);max-width:220px}
.fig{margin:0}
/* Forms */
form.demo{display:grid;gap:var(--s16);max-width:34rem}
label{display:block;font-weight:700;margin-bottom:var(--s4)}
input,select,textarea{width:100%;min-height:48px;font:inherit;color:var(--on-surface);background:var(--surface);border:2px solid var(--outline);border-radius:var(--r-md);padding:var(--s8) var(--s12)}
textarea{min-height:96px}
.hint{font-size:.9375rem;color:var(--on-variant);margin:var(--s4) 0 0}
.badge{display:inline-block;font-weight:700;font-size:.875rem;color:var(--exception);background:var(--exception-c);border-radius:99px;padding:var(--s4) var(--s12)}
.tier .price{font:700 1.5rem var(--mono);color:var(--on-variant);border:2px dashed var(--outline);border-radius:var(--r-md);padding:var(--s12);text-align:center;margin:var(--s12) 0}
ul.clean{padding-left:1.25rem;margin:0 0 var(--s16)}
ul.clean li{margin-bottom:var(--s8)}
details{border:1px solid var(--outline-v);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--s8)}
summary{cursor:pointer;font-weight:700;padding:var(--s16);min-height:48px}
details>div{padding:0 var(--s16) var(--s16)}
.search{max-width:34rem;margin-bottom:var(--s16)}
[hidden]{display:none!important}
footer{border-top:1px solid var(--outline-v);background:var(--low);padding:var(--s32) 0;font-size:.9375rem}
footer .wrap{display:grid;gap:var(--s16)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s16)}
footer a{color:var(--on-surface)}
@media (min-width:720px){
  .cards.c2{grid-template-columns:repeat(2,1fr)}
  .cards.c3{grid-template-columns:repeat(3,1fr)}
  .hero .grid{grid-template-columns:1.1fr .9fr}
  .step{grid-template-columns:1fr 260px}
  .wrap{padding:0 var(--s24)}
  section{padding:var(--s64) 0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media (forced-colors:active){.btn,.soon,.card{border:2px solid CanvasText}}
.push{margin-top:auto}
.right{margin-left:auto}
.phone.wide{width:100%;max-width:300px;border-radius:14px}
.mt{margin-top:var(--s24)}
.scr .row.tick{display:flex}