/* Public site layout. Tokens live in ambionic.css. */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:60px}
.nav ul{display:flex;gap:clamp(12px,2.5vw,28px);list-style:none;margin:0;padding:0;font-size:.9375rem}
.nav ul a{text-decoration:none;color:var(--ink-2)}
.nav ul a:hover{color:var(--ink)}
.nav .btn{padding:.6em 1em;font-size:.875rem}
@media (max-width:820px){.nav ul{display:none}}

section{padding-block:clamp(56px,9vw,112px)}
section+section{border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:14px;max-width:46rem;margin-bottom:clamp(32px,5vw,56px)}
.sec-head p{font-size:var(--step-1);color:var(--ink-2)}

/* Hero */
.hero{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,96px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy{display:grid;gap:22px}
.hero-copy .lede{font-size:var(--step-1);color:var(--ink-2);max-width:34rem}
.hero-copy .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.specs{display:flex;flex-wrap:wrap;gap:8px 20px;font:500 var(--step--1)/1.3 var(--f-mono);color:var(--ink-2);margin-top:8px}
.specs span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
.k-panel{position:relative;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--sunk)}
.k-panel canvas{display:block;width:100%;aspect-ratio:1/1;max-width:100%}
.k-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;font:500 .75rem/1.3 var(--f-mono);letter-spacing:.04em;color:var(--ink-2);background:color-mix(in oklab,var(--paper) 86%,transparent);border-top:1px solid var(--rule)}
.k-cap b{color:var(--ink);font-weight:500}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.k-panel{max-width:520px}}

/* Driver stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--ink)}
.stat{padding:22px 24px 6px 0;display:grid;gap:8px;align-content:start}
.stat b{font:650 var(--step-3)/1 var(--f-display);font-stretch:112%;font-variant-numeric:tabular-nums}
.stat p{color:var(--ink-2);font-size:.9375rem;max-width:22rem}
.stat sup{font:400 .7rem var(--f-mono);color:var(--ink-2)}
.pull{margin-top:clamp(36px,5vw,56px);font:500 var(--step-2)/1.3 var(--f-display);font-stretch:105%;max-width:40rem;text-wrap:balance}

/* Comparison */
.compare th:last-child,.compare td:last-child{background:var(--accent-soft)}
.compare th:last-child{color:var(--accent)}
.compare td:first-child{font:500 var(--step--1)/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);white-space:nowrap}
.compare table{min-width:680px}

/* Principles grid (unordered) */
.grid{display:grid;gap:clamp(20px,3vw,32px) clamp(24px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.item{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--rule)}
.item p{color:var(--ink-2)}

/* Grasp loop (ordered) */
.loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:step}
.loop li{position:relative;padding:22px 22px 0 0;display:grid;gap:8px;align-content:start;counter-increment:step}
.loop li::before{content:counter(step,decimal-leading-zero);font:500 var(--step--1)/1 var(--f-mono);color:var(--accent);padding-bottom:14px;border-bottom:1.5px solid var(--accent)}
.loop li p{color:var(--ink-2);font-size:.9375rem}
@media (max-width:860px){.loop{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
@media (max-width:480px){.loop{grid-template-columns:1fr}}
.aside{margin-top:clamp(32px,5vw,48px);padding:18px 20px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);max-width:46rem;color:var(--ink-2)}
.aside b{color:var(--ink)}

/* Sensor skin */
.skin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start}
.skin-viz{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:18px}
.skin-viz .cells{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.skin-viz .cells i{aspect-ratio:1;border-radius:2px;background:var(--accent);display:block}
.skin-viz .legend{display:flex;justify-content:space-between;margin-top:12px;font:500 .75rem/1.3 var(--f-mono);color:var(--ink-2)}
.skin dl{margin:0;display:grid;gap:20px}
.skin dt{font-family:var(--f-display);font-stretch:112%;font-weight:600;font-size:var(--step-1)}
.skin dd{margin:6px 0 0;color:var(--ink-2)}
@media (max-width:860px){.skin{grid-template-columns:1fr}}

/* Applications */
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.app{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(20px,3vw,28px);display:grid;gap:14px;align-content:start}
.app .tag{font:500 .75rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.app p{color:var(--ink-2)}
.targets{list-style:none;margin:4px 0 0;padding:14px 0 0;border-top:1px dashed var(--rule);display:grid;gap:8px}
.targets li{display:flex;justify-content:space-between;gap:16px;font-size:.9375rem}
.targets li span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.targets-note{font:400 .75rem/1.4 var(--f-mono);color:var(--ink-2)}

/* Roadmap */
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.road::before{content:"";position:absolute;left:0;right:0;top:9px;height:1.5px;background:var(--rule)}
.road li{position:relative;padding:30px 14px 0 0;display:grid;gap:4px;align-content:start}
.road li::before{content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1.5px solid var(--accent)}
.road li.done::before{background:var(--accent)}
.road .m{font:500 .75rem/1 var(--f-mono);color:var(--accent)}
.road b{font-weight:600;font-size:.9375rem}
@media (max-width:860px){
  .road{grid-template-columns:1fr;padding-left:28px}
  .road::before{left:7px;right:auto;top:0;bottom:0;width:1.5px;height:auto}
  .road li{padding:0 0 22px}
  .road li::before{left:-28px;top:0}
}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px)}
.contact address{font-style:normal;display:grid;gap:4px;margin-top:20px;color:var(--ink-2)}
.contact address b{color:var(--ink);font-weight:600}
.contact form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact form .full{grid-column:1/-1}
.contact textarea{min-height:140px;resize:vertical}
.form-status{grid-column:1/-1;min-height:1.4em;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:480px){.contact form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--rule);padding-block:28px;font-size:var(--step--1);color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}