500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--sans); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.label { font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.label.accent { color: var(--accent); }
.serif { font-family: var(--display); font-weight: 700; letter-spacing: var(--track-display); }
.h2 { font: 600 var(--fs-h2)/1.08 var(--sans); letter-spacing: -.02em; }
.h3 { font: 600 var(--fs-h3)/1.15 var(--sans); letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; }
.section { padding-block: var(--section); }
.section.tight { padding-block: calc(var(--section) * .6); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.stack > * + * { margin-top: 18px; }
.band { background: var(--band); color: #fff; }
.band .lead, .band .muted { color: var(--on-band); }
.soft { background: var(--surface); }
.warm { background: var(--surface-warm); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: var(--pill); font: 500 15px/1 var(--sans); border: 1.5px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--band); color: #fff; }
.btn-primary:hover { background: var(--band-2); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #fff; color: var(--band); }
.btn-ghost-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.btn:hover .arrow::after, a:hover > .arrow::after { transform: translateX(3px); }
.link { color: var(--info); font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.band .link { color: var(--accent-light); }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top .container { display: flex; align-items: center; gap: 28px; height: 76px; }
.logo { width: 132px; flex: none; }
.nav { display: flex; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav > li > a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--ink); }
.nav > li > a:hover { background: var(--surface); }
.nav ul { margin: 0; padding: 0; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; font: 500 12px var(--mono); }
.lang a { padding: 6px 10px; border-radius: var(--pill); color: var(--muted); }
.lang a.on { background: var(--band); color: #fff; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mega { position: absolute; left: -12px; top: 100%; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 200ms var(--ease); }
.nav > li:hover .mega, .nav > li:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner { width: 640px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mega-inner a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; }
.mega-inner a:hover { background: var(--surface); }
.mega-inner svg { width: 56px; height: 45px; }
.mega-inner b { display: block; font-size: 14px; }
.mega-inner small { color: var(--muted); font-size: 12px; line-height: 1.3; display: block; }
@media (max-width: 1080px) {
  .nav, .top-actions .lang, .top-actions .btn-outline { display: none; }
  .burger { display: inline-grid; place-items: center; }
  .top.open .nav { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: #fff; padding: 12px var(--gutter) 20px; border-bottom: 1px solid var(--line); }
  .top.open .mega { display: none; }
}
@media (max-width: 560px) { .top-actions .btn-primary { display: none; } }

/* hero carousel */
.hero { position: relative; height: min(88vh, 860px); min-height: 600px; background: var(--band); color: #fff; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.slide.on img { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,31,60,.15) 0%, rgba(7,31,60,0) 35%, rgba(7,31,60,.75) 78%, rgba(7,31,60,.92) 100%); }
.hero-copy { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: 64px; }
.hero-copy .container { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
.hero h1 { font: 700 var(--fs-display)/1.0 var(--display); letter-spacing: -.01em; }
.hero h1 em { color: var(--accent-light); }
.hero p { color: var(--on-band); font-size: var(--fs-lead); }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.slide-copy { display: none; } .slide-copy.on { display: block; animation: rise 700ms var(--ease) both; }
.badge { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; margin-bottom: 18px; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: #7FD8A2; box-shadow: 0 0 0 4px rgba(127,216,162,.2); }
.rail { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.rail button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: rgba(255,255,255,.6); font: 500 12px var(--mono); position: relative; }
.rail button::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: rgba(255,255,255,.55); transition: all 200ms; }
.rail button.on { color: #fff; }
.rail button.on::before { inset: 0; background: transparent; border: 1.5px solid rgba(255,255,255,.4); }
.rail button.on span { position: relative; }
.rail button:not(.on) span { display: none; }
.rail svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rail circle { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rail button.on circle { animation: ring 7s linear forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .hero-copy .container { grid-template-columns: 1fr; gap: 12px; } .rail { right: 10px; } }

/* statement + chips */
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.statement h2 { font: 700 var(--fs-h1)/1.04 var(--display); letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--pill); border: 1px solid var(--line); font-size: 14px; background: #fff; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) { .statement { grid-template-columns: 1fr; gap: 20px; } }

/* hotspot scene */
.scene-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: stretch; margin-top: 48px; }
.scene { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #EBEEF3; box-shadow: var(--shadow); }
.scene img { width: 100%; height: auto; }
.hs { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(7,31,60,.88); color: #fff; font: 700 17px/34px var(--display); box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(0,0,0,.25); transition: transform 200ms var(--ease), background 200ms; }
.hs::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: .0; animation: pulse 2.4s var(--ease) infinite; }
.hs:hover, .hs.on { transform: translate(-50%, -50%) scale(1.15); background: var(--accent); color: var(--band); }
.hs.on::after { opacity: 1; }
@keyframes pulse { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.scene-hint { position: absolute; left: 16px; bottom: 14px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: rgba(255,255,255,.85); padding: 7px 12px; border-radius: var(--pill); }
.scene-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.scene-card .ill { background: var(--surface); border-radius: var(--radius); padding: 18px 30px; }
.scene-card .ill svg { width: 100%; height: 170px; }
.scene-card h3 { font: 600 24px/1.2 var(--sans); }
.scene-card .k { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--band); color: #fff; font: 700 16px var(--display); margin-right: 8px; box-shadow: inset 0 0 0 1.5px var(--accent); vertical-align: middle; }
.scene-card p { color: var(--ink-2); }
.scene-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.scene-card li { padding-left: 26px; position: relative; font-size: 15px; }
.scene-card li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 11px; display: grid; place-items: center; font-weight: 700; }
@media (max-width: 960px) { .scene-wrap { grid-template-columns: 1fr; } .hs { width: 28px; height: 28px; font-size: 14px; line-height: 28px; } }

/* tabs (why) */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 36px 0 24px; }
.tabs button { height: 42px; padding: 0 18px; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 14px; transition: all 200ms; }
.tabs button.on { background: #fff; color: var(--band); border-color: #fff; }
.panel { display: none; grid-template-columns: 1fr 1.1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--band-2); min-height: 420px; }
.panel.on { display: grid; animation: rise 500ms var(--ease) both; }
.panel .txt { padding: 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.panel h3 { font: 600 30px/1.15 var(--sans); }
.panel p { color: var(--on-band); }
.panel ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 10px; }
.panel li { padding-left: 28px; position: relative; }
.panel li::before { content: "✓"; position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--band); font-size: 11px; font-weight: 700; display: grid; place-items: center; top: 3px; }
.panel .media { position: relative; background: #0B1220; }
.panel .media img { width: 100%; height: 100%; object-fit: cover; }
.panel .media.ill { background: var(--surface); display: grid; place-items: center; padding: 40px; }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } .panel .txt { padding: 28px; } .panel .media { min-height: 260px; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; counter-reset: s; }
.step { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: #fff; position: relative; }
.step .n { counter-increment: s; font: 700 40px/1 var(--display); color: var(--accent); }
.step .n::before { content: "0" counter(s); }
.step h3 { font: 600 22px/1.2 var(--sans); margin: 14px 0 8px; }
.step p { color: var(--ink-2); font-size: 15px; }
.step svg { height: 120px; margin: 8px auto 0; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* trust pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; margin-top: 48px; }
.pillar { border-left: 1px solid rgba(255,255,255,.18); padding-left: 20px; }
.pillar .label { color: var(--accent); }
.pillar p { margin-top: 8px; color: #fff; font-size: 17px; line-height: 1.45; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* carousel */
.car-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.car-btns { display: flex; gap: 10px; }
.car-btns button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; font-size: 18px; }
.car { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 36px; padding-bottom: 8px; scrollbar-width: none; }
.car::-webkit-scrollbar { display: none; }
.car a { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.car .ph { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.car .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.car a:hover .ph img { transform: scale(1.04); }
.car .ph span { position: absolute; left: 20px; bottom: 18px; color: #fff; font: 600 22px var(--sans); text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.car .ph::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(7,31,60,.7)); }
.car .ph span { z-index: 1; }
.car .more { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 20px; border: 1.5px solid var(--line-strong); border-radius: var(--pill); font-size: 14px; }
@media (max-width: 700px) { .car { grid-auto-columns: 78%; } }

/* product grid */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pcard { background: #fff; border-radius: var(--radius-lg); padding: 26px 26px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: box-shadow 300ms var(--ease), transform 300ms var(--ease); border: 1px solid transparent; }
.pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.pcard h3 { font: 600 20px var(--sans); }
.pcard .link { font-size: 15px; }
.pcard svg { width: 78%; height: 170px; margin-top: 10px; }
.pcard small { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid3 { grid-template-columns: 1fr; } }

/* cta band */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta h2 { font: 600 28px/1.2 var(--sans); }
.cta .big { font: 700 clamp(40px, 5vw, 64px)/1 var(--display); color: #fff; display: inline-flex; align-items: center; gap: 14px; }
.cta .big:hover { color: var(--accent-light); }
.wa { display: inline-flex; align-items: center; gap: 8px; color: var(--on-band); margin-top: 14px; font-size: 15px; }

/* footer */
.foot { padding: 72px 0 36px; border-top: 1px solid var(--line); }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot h4 { font: 600 14px var(--sans); margin-bottom: 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14px; color: var(--ink-2); }
.foot ul a:hover { color: var(--ink); }
.foot .legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.proto { position: fixed; left: 16px; bottom: 16px; z-index: 60; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--warn-bg); color: var(--warn); border: 1px solid #E6D3AA; padding: 7px 12px; border-radius: var(--pill); }
@media (max-width: 900px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* product page */
.phero { padding: 72px 0 0; }
.phero .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.phero h1 { font: 700 var(--fs-display)/1 var(--display); letter-spacing: -.01em; }
.phero .visual { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--surface); box-shadow: var(--shadow-lg); }
.phero .visual img { width: 100%; height: 100%; object-fit: cover; }
.subnav { position: sticky; top: 76px; z-index: 40; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); margin-top: 72px; }
.subnav .container { display: flex; gap: 6px; height: 56px; align-items: center; overflow-x: auto; }
.subnav a { padding: 8px 14px; border-radius: var(--pill); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.subnav a:hover { background: var(--surface); color: var(--ink); }
.subnav .btn { margin-left: auto; }
.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.layer { border-radius: var(--radius-lg); background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.layer svg { height: 150px; margin-bottom: 8px; }
.layer h3 { font: 600 21px var(--sans); }
.layer p { color: var(--ink-2); font-size: 15px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.rev .media { order: 2; }
.split .media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); box-shadow: var(--shadow); position: relative; }
.split .media img { width: 100%; height: 100%; object-fit: cover; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { padding-left: 30px; position: relative; color: var(--ink-2); }
.checks li b { color: var(--ink); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--band); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.four > div { border-top: 2px solid var(--accent); padding-top: 18px; }
.four h3 { font: 600 18px var(--sans); margin-bottom: 8px; }
.four p { color: var(--ink-2); font-size: 15px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.duo > div { border-radius: var(--radius-lg); background: var(--band-2); padding: 32px; }
.duo h3 { font: 600 22px var(--sans); margin: 10px 0 8px; }
.duo p { color: var(--on-band); }
@media (max-width: 900px) {
  .phero .container, .split, .duo { grid-template-columns: 1fr; gap: 32px; }
  .split.rev .media { order: 0; }
  .layers, .four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .layers, .four { grid-template-columns: 1fr; } }

/* console mock (UI shot built in HTML) */
.console { position: absolute; inset: 0; background: #04152B; color: #B9C6D8; display: grid; grid-template-rows: auto auto 1fr; font-size: 12px; }
.console .bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #14345C; font: 500 11px var(--mono); }
.console .bar b { color: #fff; font: 700 16px var(--display); }
.console .live { margin-left: auto; color: #7FD8A2; }
.console .q { margin: 14px 16px 6px; display: flex; align-items: center; gap: 10px; background: #0D2C52; border: 1px solid #1D3E68; border-radius: 10px; padding: 10px 12px; color: #fff; font-size: 13px; }
.console .q::before { content: "⌕"; color: var(--accent); font-size: 16px; }
.console .res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 16px 16px; align-content: start; }
.console .tile { border-radius: 8px; overflow: hidden; background: #0D2C52; border: 1px solid #1D3E68; }
.console .tile .im { aspect-ratio: 16 / 10; background-size: cover; background-position: center; position: relative; }
.console .tile .im::after { content: ""; position: absolute; left: 38%; top: 30%; width: 18%; height: 46%; border: 1.5px solid #F6B73C; border-radius: 3px; }
.console .tile p { padding: 6px 8px; font: 500 10px var(--mono); color: #9DB0CA; }
.console .tile p b { color: #fff; font-weight: 500; }

/* pilot page */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 52px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 6%; right: 6%; top: 27px; height: 2px; background: var(--line-strong); }
.tl { padding: 0 18px; text-align: center; position: relative; }
.tl .dot { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: #fff; border: 2px solid var(--accent); font: 700 22px var(--display); color: var(--band); }
.tl.ai .dot { background: var(--band); color: #fff; }
.tl h3 { font: 600 18px var(--sans); margin-bottom: 6px; }
.tl p { font-size: 14px; color: var(--ink-2); }
.tl .who { display: inline-block; margin-top: 10px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--pill); background: var(--surface); color: var(--ink-2); }
.tl.ai .who { background: var(--info-bg); color: var(--info); }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr 1fr; gap: 36px 0; } .timeline::before { display: none; } }
.note { border-radius: var(--radius); background: var(--warn-bg); border: 1px solid #E6D3AA; padding: 20px 24px; color: #5E4313; font-size: 15px; }
.note b { color: #3E2C0C; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; font: 600 18px var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--accent); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 10px; color: var(--ink-2); max-width: 70ch; }
.form { background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: 32px; display: grid; gap: 14px; box-shadow: var(--shadow-lg); }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.form input, .form select { height: 48px; border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 0 14px; font: inherit; background: #fff; }
.form input:focus, .form select:focus { outline: none; border-color: var(--band); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form small { color: var(--muted); font-size: 12px; }
.form .ok { display: none; background: var(--ok-bg); color: var(--ok); padding: 14px; border-radius: 12px; font-size: 14px; }
.form.sent .ok { display: block; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* product screenshot frame */
.shot { border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.shot .bar { height: 30px; display: flex; gap: 7px; align-items: center; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.shot .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
.phero .shot img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .four[style] { grid-template-columns: 1fr 1fr !important; } }

/* audience mega menu */
.mega-inner.aud { width: 720px; grid-template-columns: repeat(3, 1fr); }
.mega-inner.aud a { grid-template-columns: 1fr; gap: 10px; align-items: start; }
.mega-inner.aud img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }

/* audience cards (home + platform) */
.aud-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.aud-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; }
.aud-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--ease); }
.aud-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,31,60,0) 25%, rgba(7,31,60,.92) 88%); }
.aud-card:hover img { transform: scale(1.04); }
.aud-card .in { padding: 28px; display: grid; gap: 10px; }
.aud-card h3 { font: 700 34px/1.05 var(--display); }
.aud-card p { color: var(--on-band); font-size: 15px; }
.aud-card ul { list-style: none; padding: 0; margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.aud-card li { font-size: 12px; padding: 5px 10px; border-radius: var(--pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); }
.aud-card .link { color: var(--accent-light); }
@media (max-width: 900px) { .aud-cards { grid-template-columns: 1fr; } .aud-card { min-height: 380px; } }

/* 360 diagram */
.ring-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.ring { width: 100%; max-width: 620px; margin: auto; }
.ring a:hover circle.node { fill: var(--surface-warm); stroke: var(--accent); }
.ring text { font-family: var(--sans); }
.layers3 { display: grid; gap: 14px; }
.layers3 > div { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.layers3 .label { padding-top: 4px; }
.layers3 h3 { font: 600 18px var(--sans); margin-bottom: 4px; }
.layers3 p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 960px) { .ring-wrap { grid-template-columns: 1fr; } .layers3 > div { grid-template-columns: 1fr; gap: 6px; } }

/* offer cards (security companies) */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 44px; }
.offer { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.offer .n { font: 700 34px/1 var(--display); color: var(--accent); }
.offer h3 { font: 600 20px/1.2 var(--sans); }
.offer p { color: var(--ink-2); font-size: 15px; }
.offer .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.offer .tags span { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--pill); background: var(--surface); color: var(--ink-2); }
.offer svg { height: 110px; }

/* kit cards */
.kits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.kit { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.kit .top-img { aspect-ratio: 4 / 3; overflow: hidden; }
.kit .top-img img { width: 100%; height: 100%; object-fit: cover; }
.kit .body { padding: 20px; display: grid; gap: 8px; }
.kit h3 { font: 600 19px var(--sans); }
.kit ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.kit li::before { content: "· "; color: var(--accent); font-weight: 700; }
@media (max-width: 960px) { .kits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kits { grid-template-columns: 1fr; } }

/* incident card mock (Command) */
.inc { position: absolute; inset: 0; background: #04152B; color: #B9C6D8; display: grid; grid-template-columns: 1fr 1.25fr; font-size: 12px; }
.inc .queue { border-right: 1px solid #14345C; padding: 12px; display: grid; gap: 8px; align-content: start; }
.inc .qi { border-radius: 8px; padding: 9px 10px; background: #0D2C52; border: 1px solid #1D3E68; display: grid; gap: 3px; }
.inc .qi b { color: #fff; font-weight: 600; font-size: 12px; }
.inc .qi small { font: 500 10px var(--mono); color: #9DB0CA; }
.inc .qi.hot { border-color: #C4362A; box-shadow: inset 3px 0 0 #C4362A; }
.inc .lv { display: inline-block; font: 600 9px var(--mono); padding: 2px 6px; border-radius: 4px; background: #3A1D24; color: #F0A79E; margin-right: 6px; }
.inc .lv.l1 { background: #0D2C52; color: #7FD3FF; }
.inc .detail { padding: 12px; display: grid; gap: 10px; align-content: start; }
.inc .vid { aspect-ratio: 16 / 9; border-radius: 8px; background-size: cover; background-position: center; position: relative; }
.inc .vid::after { content: "● LIVE"; position: absolute; left: 8px; top: 8px; font: 600 9px var(--mono); color: #fff; background: #C4362A; padding: 2px 6px; border-radius: 4px; }
.inc .acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.inc .acts span { text-align: center; padding: 7px 4px; border-radius: 6px; background: #0D2C52; border: 1px solid #1D3E68; font-size: 10px; color: #fff; }
.inc .acts span.go { background: #00E2ED; color: #071F3C; border-color: #00E2ED; font-weight: 600; }
.inc .ai { font-size: 11px; background: #0B2748; border: 1px dashed #24518A; border-radius: 8px; padding: 8px 10px; }
.inc .ai b { color: #00E2ED; font: 600 9px var(--mono); letter-spacing: .1em; display: block; margin-bottom: 3px; }

/* night scenario */
.night { margin-top: 44px; display: grid; gap: 0; position: relative; }
.night::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: rgba(255,255,255,.14); }
.ev { display: grid; grid-template-columns: 96px 110px 1fr; gap: 18px; align-items: baseline; padding: 14px 0; position: relative; }
.ev::before { content: ""; position: absolute; left: 113px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(0,226,237,.25); }
.ev time { font: 500 14px var(--mono); color: var(--on-band); }
.ev .mod { justify-self: start; margin-left: 24px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--pill); background: rgba(255,255,255,.1); color: #fff; }
.ev p { color: #fff; font-size: 17px; }
@media (max-width: 700px) { .night::before, .ev::before { display: none; } .ev { grid-template-columns: 1fr; gap: 6px; } .ev .mod { margin-left: 0; } }
.band .checks li { color: var(--on-band); }
.band .checks li b { color: #fff; }
.band .checks li::before { background: #fff; color: var(--band); }
@media (min-width: 1100px) { .offers { grid-template-columns: repeat(5, 1fr); } .offer { padding: 22px; } .offer svg { height: 90px; } }

/* ===================================================================
   v2: Verkada-grade components (see 06-verkada-teardown.md)
   Real media only, UI shown working, one idea per block.
   =================================================================== */
.h2 { line-height: 1.04; }
.soft { background: var(--cool); }
.deep { background: var(--deep); color: #fff; }
.deep .lead { color: var(--on-band); }
.eyebrow { font: 600 15px/1 var(--sans); color: var(--accent); margin-bottom: 14px; display: block; }
.band .eyebrow, .deep .eyebrow { color: var(--accent-light); }

/* studio product photos: fade into the card colour */
img.prod { width: 100%; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.mega-inner img.prod { width: 56px; height: 56px; border-radius: 10px; background: var(--cool); -webkit-mask-image: none; mask-image: none; }

/* heading left, text + action right */
.split-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
.split-head p { color: var(--ink-2); font-size: 18px; }
.split-head .btn { margin-top: 18px; }
.band .split-head p, .deep .split-head p { color: var(--on-band); }
@media (max-width: 900px) { .split-head { grid-template-columns: 1fr; gap: 16px; } }

/* model grid: name on top, studio photo below */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.models.four-up { grid-template-columns: repeat(4, 1fr); }
.model { background: var(--cool); border-radius: 14px; padding: 28px 24px 0; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform 400ms var(--ease); overflow: hidden; }
.soft .model { background: #F6F7FA; }
.soft .model img.prod { background: var(--cool); border-radius: 50%; }
.model h3 { font: 600 22px/1.2 var(--sans); }
.model p { color: var(--ink-2); font-size: 14px; margin-top: 6px; max-width: 30ch; }
.model .link { margin-top: 10px; font-size: 15px; }
.model img.prod { width: 82%; margin-top: 6px; transition: transform 600ms var(--ease); }
a.model:hover img.prod { transform: scale(1.05); }
@media (max-width: 1000px) { .models, .models.four-up { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .models, .models.four-up { grid-template-columns: 1fr; } }

/* AI media carousel: big dark cards, UI working over real footage */
.aicar { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 40px; scrollbar-width: none; }
.aicar::-webkit-scrollbar { display: none; }
.aicard { scroll-snap-align: start; position: relative; aspect-ratio: 2 / 1; border-radius: 18px; overflow: hidden; background: var(--deep); color: #fff; isolation: isolate; }
.aicard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85) brightness(.75); }
.aicard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,21,43,.85) 0%, rgba(4,21,43,.15) 38%, rgba(4,21,43,0) 60%, rgba(4,21,43,.55) 100%); }
.aicard h3 { position: absolute; left: 40px; top: 36px; max-width: 18ch; font: 600 clamp(24px, 2.6vw, 36px)/1.1 var(--sans); padding-left: 38px; }
.aicard h3::before { content: "✦"; position: absolute; left: 0; top: 2px; color: var(--accent); font-size: .8em; }
.aicard p.cap { position: absolute; left: 40px; bottom: 32px; max-width: 46ch; color: var(--on-band); font-size: 16px; }
@media (min-width: 1100px) { .aicar { grid-auto-columns: 88%; } }
@media (max-width: 700px) { .aicard { aspect-ratio: 4 / 5; } .aicard h3 { left: 22px; top: 24px; } .aicard p.cap { left: 22px; right: 22px; bottom: 22px; } }

/* UI pieces (sharp, translatable, no screenshots) */
.ui-search { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: var(--pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(14px); font: 500 clamp(15px, 1.6vw, 22px)/1 var(--sans); color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35); white-space: nowrap; }
.ui-search::before { content: ""; width: 18px; height: 18px; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 7px 7px 0 -5px #fff; flex: none; }
.ui-search .caret { width: 2px; height: 1.1em; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bbox { position: absolute; border: 2px solid var(--accent); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.bbox span { position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; font: 600 11px/1 var(--mono); background: var(--accent); color: var(--deep); padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.ui-card { position: absolute; background: rgba(4,21,43,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--on-band); box-shadow: 0 24px 60px rgba(0,0,0,.4); display: grid; gap: 8px; min-width: 220px; }
.ui-card b { color: #fff; font-weight: 600; font-size: 14px; }
.ui-card .row { display: flex; align-items: center; gap: 10px; }
.ui-card .dot { width: 8px; height: 8px; border-radius: 50%; background: #7FD8A2; flex: none; }
.ui-card .dot.red { background: #E26A5C; } .ui-card .dot.amber { background: #E2B45C; }
.ui-card .tag { font: 600 10px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 4px; background: rgba(255,255,255,.1); color: #fff; }
.ui-card .tag.red { background: #5A2028; color: #F5B1A8; }
.ui-card .thumb { height: 74px; border-radius: 8px; background-size: cover; background-position: center; }
.ui-card .btns { display: flex; gap: 6px; } .ui-card .btns span { flex: 1; text-align: center; padding: 7px 6px; border-radius: 7px; background: rgba(255,255,255,.08); color: #fff; font-size: 11px; }
.ui-card .btns span.go { background: var(--accent); color: var(--deep); font-weight: 600; }
.ui-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.ui-wave i { width: 3px; border-radius: 2px; background: var(--accent); animation: wave 1.1s var(--ease) infinite alternate; }
@keyframes wave { from { height: 20%; } to { height: 100%; } }
.ui-bubble { position: absolute; max-width: 300px; background: #fff; color: var(--ink); border-radius: 16px 16px 16px 4px; padding: 14px 16px; font-size: 15px; line-height: 1.35; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ui-bubble small { display: block; font: 600 10px var(--mono); letter-spacing: .1em; color: var(--accent); margin-bottom: 6px; }
@media (max-width: 700px) { .ui-card { transform: scale(.82); transform-origin: right bottom; } }

/* immersive dark product hero */
.phero2 { position: relative; background: radial-gradient(120% 80% at 50% 0%, #1D2E50 0%, var(--deep) 60%); color: #fff; text-align: center; padding: 96px 0 0; overflow: hidden; }
.phero2 .eyebrow { color: var(--accent-light); }
.phero2 h1 { font: 700 var(--fs-display)/1 var(--display); max-width: 18ch; margin: 0 auto; }
.phero2 h1 em { color: var(--accent-light); }
.phero2 .lead { color: var(--on-band); margin: 20px auto 0; }
.phero2 .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.stage { position: relative; height: clamp(300px, 34vw, 480px); margin-top: 56px; perspective: 1200px; }
.strip { position: absolute; left: 50%; bottom: -40px; width: 140%; transform: translateX(-50%) rotateX(38deg); transform-origin: bottom; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.strip div { aspect-ratio: 16 / 10; border-radius: 10px; background-size: cover; background-position: center; filter: brightness(.85); box-shadow: 0 20px 50px rgba(0,0,0,.5); position: relative; }
.strip div.hit { outline: 2px solid var(--accent); outline-offset: 3px; filter: none; }
.stage .ui-search { left: 50%; top: 18%; transform: translateX(-50%); }
.stage .ui-card { right: 8%; top: 4%; }
@media (max-width: 700px) { .strip { width: 220%; } .stage .ui-card { display: none; } }

/* engineered: dark product close-up + accordion */
.eng { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 620px; background: var(--deep); color: #fff; }
.eng .ph { position: relative; overflow: hidden; }
.eng .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.eng .txt { padding: 88px clamp(24px, 6vw, 96px) 88px 40px; display: flex; flex-direction: column; justify-content: center; }
.eng h2 { font: 600 var(--fs-h2)/1.04 var(--sans); margin-bottom: 28px; }
.eng details { border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
.eng details:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.eng summary { cursor: pointer; list-style: none; font: 500 19px var(--sans); color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 10px; }
.eng summary::-webkit-details-marker { display: none; }
.eng details[open] summary { color: #fff; }
.eng details[open] summary::before { content: "→"; color: var(--accent); }
.eng details p { color: var(--on-band); margin-top: 10px; font-size: 15px; max-width: 46ch; }
@media (max-width: 900px) { .eng { grid-template-columns: 1fr; } .eng .ph { min-height: 320px; } .eng .txt { padding: 48px var(--gutter); } }

/* promises (our honest substitute for social proof) */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.promise { text-align: center; display: grid; justify-items: center; gap: 10px; }
.promise .ring { width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; font: 700 36px/1 var(--display); color: var(--ink); background: radial-gradient(closest-side, #fff 86%, transparent 87% 100%), conic-gradient(var(--accent) var(--p, 100%), var(--line) 0); }
.promise h3 { font: 600 19px var(--sans); }
.promise p { color: var(--ink-2); font-size: 14px; max-width: 28ch; }
.promise small { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .promises { grid-template-columns: 1fr; } }

/* key-features carousel (smaller UI cards) */
.fcar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 40px) / 3.2)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 40px; scrollbar-width: none; }
.fcar::-webkit-scrollbar { display: none; }
.fcard { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.fcard .scr { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--deep) center / cover; }
.fcard .scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(4,21,43,.5)); }
.fcard .scr > * { z-index: 1; }
.fcard h3 { font: 600 18px var(--sans); margin-top: 8px; }
.fcard p { color: var(--ink-2); font-size: 14px; }
.fcard .link { font-size: 14px; }

/* layer cards with product photos */
.layer img.prod { width: 180px; margin: 0 auto 6px; background: var(--cool); border-radius: 50%; -webkit-mask-image: none; mask-image: none; }
.offer img.prod { width: 120px; background: var(--cool); border-radius: 16px; -webkit-mask-image: none; mask-image: none; }
.kit .top-img img.prod { -webkit-mask-image: none; mask-image: none; }
.scene-card .ill { padding: 0; overflow: hidden; background: var(--cool); }
.scene-card .ill img.prod { width: 62%; margin: 0 auto; -webkit-mask-image: none; mask-image: none; }
.stage { height: clamp(320px, 36vw, 520px); margin-top: 48px; perspective: 900px; }
.strip { width: 150%; bottom: -60px; transform: translateX(-50%) rotateX(24deg); gap: 16px; }
.strip div { border-radius: 14px; }
.stage .ui-search { top: 6%; z-index: 2; }
.stage .ui-card { right: 6%; top: 0; z-index: 2; }
.subnav .btn-primary, .subnav .btn-primary:hover { color: #fff; }
.ui-card, .ui-bubble { text-align: left; }
.stage { height: clamp(300px, 27vw, 410px); margin-top: 56px; perspective: 1000px; }
.strip { top: 84px; bottom: auto; transform: translateX(-50%) rotateX(16deg); transform-origin: top; }
.stage .ui-search { top: 40px; }
.stage .ui-card { top: 0; right: 4%; }
.subnav { background: #fff !important; }

/* sectors (Verkada /solutions/<industry>/ pattern) */
.foot .cols { grid-template-columns: 1.3fr repeat(5, 1fr); }
.mega-inner.sect { width: 860px; grid-template-columns: repeat(4, 1fr); gap: 6px; left: -200px; }
.mega-inner.sect a { grid-template-columns: 44px 1fr; gap: 10px; padding: 8px; background: var(--surface); }
.mega-inner.sect a:hover { background: var(--cool); }
.mega-inner.sect img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.mega-inner.sect b { font-size: 13.5px; font-weight: 500; }
.mega-inner.sect a.all { grid-column: 1 / -1; grid-template-columns: 1fr; text-align: right; background: none; }
.shero { padding-top: 64px; }
.shero .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.shero .iso { background: var(--cool); border-radius: 18px; overflow: hidden; }
.shero .iso img { width: 100%; }
.shero h1 { font: 700 var(--fs-h1)/1.02 var(--display); }
.shero h1 em { color: var(--accent); }
.demo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.demo input { flex: 1; min-width: 200px; height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--pill); padding: 0 20px; font: inherit; }
.demo .ok { display: none; width: 100%; color: var(--ok); font-size: 14px; }
.demo.sent .ok { display: block; }
.ov { margin-top: 44px; border-radius: 18px; overflow: hidden; aspect-ratio: 21 / 9; }
.ov img { width: 100%; height: 100%; object-fit: cover; }
.ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; }
.ov-cols h3 { font: 600 20px var(--sans); margin-bottom: 8px; }
.ov-cols p { color: var(--ink-2); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.cases.four { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.case { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--cool); }
.case img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.case.big img { aspect-ratio: 4 / 5; }
.case:hover img { transform: scale(1.04); }
.case span { padding: 14px 18px; font: 500 15px var(--sans); }
@media (max-width: 960px) { .shero .container, .ov-cols { grid-template-columns: 1fr; } .cases, .cases.four { grid-template-columns: 1fr 1fr; } .mega-inner.sect { width: auto; } }
@media (max-width: 560px) { .cases, .cases.four { grid-template-columns: 1fr; } }
.nav > li > a { white-space: nowrap; padding: 10px 11px; }
.top .container { gap: 20px; }


/* hero stage variants: framed photo or app window rising from the bottom */
.stage.framed { height: clamp(340px, 34vw, 500px); }
.stage .frame { position: absolute; left: 50%; transform: translateX(-50%); width: min(1000px, 94%); top: 70px; bottom: 0; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -20px 80px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; background: #04152B center top / cover; text-align: left; }
.stage .frame .inc { position: absolute; inset: 0; font-size: 13px; }
.stage .frame .inc .qi b { font-size: 13px; }
.stage .frame .inc .vid { aspect-ratio: auto; height: 58%; }
.stage.framed .ui-card { top: 30px; right: 3%; }
.stage.framed .ui-card.l { right: auto; left: 3%; top: 150px; }
.stage.framed .ui-search { top: 0; }
@media (max-width: 700px) { .stage .frame { width: 100%; } }

/* app mock (HTML, fictitious data) */
.app { position: absolute; inset: 0; display: grid; grid-template-columns: 180px 1fr; background: #F4F6F9; color: var(--ink); font-size: 12px; }
.app .side { background: #071F3C; color: #9FB0C9; padding: 16px 12px; display: grid; align-content: start; gap: 4px; }
.app .side b { color: #fff; font: 600 14px var(--sans); letter-spacing: .14em; margin: 0 6px 12px; }
.app .side small { font: 600 9px var(--mono); letter-spacing: .14em; color: #5E7092; margin: 10px 6px 2px; }
.app .side span { padding: 6px 8px; border-radius: 6px; }
.app .side span.on { background: rgba(255,255,255,.1); color: #fff; }
.app .main { padding: 18px 22px; overflow: hidden; }
.app h4 { font: 700 26px/1 var(--display); margin: 0 0 4px; }
.app .sub { color: var(--muted); margin-bottom: 14px; }
.app .grid { display: grid; grid-template-columns: 130px repeat(7, 1fr); gap: 4px; align-items: center; }
.app .grid .h { font: 600 9px var(--mono); color: var(--muted); letter-spacing: .1em; text-align: center; }
.app .grid .n { font-weight: 600; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.app .grid .s { height: 22px; border-radius: 5px; font: 600 9px/22px var(--mono); padding: 0 6px; color: #fff; background: #071F3C; }
.app .grid .s.j { background: #DCE6F5; color: #2E5A8F; }
.app .grid .s.r { background: transparent; color: #A0A8B5; text-align: center; border: 1px dashed #D5DAE2; }
.app .grid .s.cp { background: #E6EFE0; color: #4A7039; }
.app .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.app .kpis div { background: #fff; border-radius: 8px; padding: 10px 12px; border: 1px solid #E3E5E9; }
.app .kpis small { font: 600 9px var(--mono); letter-spacing: .1em; color: var(--muted); display: block; }
.app .kpis strong { font: 700 22px var(--display); }
@media (max-width: 700px) { .app { grid-template-columns: 1fr; } .app .side { display: none; } }

/* SaaS band on home */
.saas-band .frame-static { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.12); }
.mega-inner.two { width: 560px; grid-template-columns: 1fr 1fr; }
.mega-inner a.all { grid-column: 1 / -1; display: block; text-align: right; padding: 8px 12px; }
.deep .checks li { color: var(--on-band); } .deep .checks li b { color: #fff; } .deep .checks li::before { background: #fff; color: var(--deep); }
.stage .frame .inc .vid { aspect-ratio: auto; height: clamp(180px, 18vw, 260px); }
.stage .frame .inc { grid-template-columns: 1fr 1.4fr; }

/* Verkada-style wide mega menu: rail left, panel right */
.has-wide { position: static !important; }
.top .container { position: relative; }
.mega.wide { left: 0; right: 0; top: 100%; padding-top: 0; }
.mega.wide::before { content: ""; position: fixed; left: 0; right: 0; top: 76px; height: var(--mh, 0); background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px rgba(7,31,60,.12); z-index: -1; }
.mega-rail { display: grid; grid-template-columns: 210px 1fr; gap: 32px; padding: 28px 0 36px; background: #fff; }
.rail-l { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding-right: 20px; }
.rail-l small { font: 500 12px var(--sans); color: var(--muted); margin: 14px 0 6px; }
.rail-l small:first-child { margin-top: 0; }
.rail-l a { font: 600 17px/1.2 var(--sans); padding: 6px 0; color: var(--ink); }
.rail-l a.on, .rail-l a:hover { color: var(--info); }
.panel-m { display: none; grid-template-columns: 250px 1fr; gap: 14px; align-items: start; }
.panel-m.on { display: grid; animation: rise 300ms var(--ease) both; }
.ov-card { display: grid; gap: 10px; background: var(--surface); border-radius: 12px; padding: 16px; }
.ov-card b { display: block; font: 600 16px var(--sans); }
.ov-card small { color: var(--muted); font-size: 13px; }
.ov-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.ov-card em { font-style: normal; font-size: 13px; color: var(--info); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tiles.t4 { grid-template-columns: repeat(4, 1fr); }
.panel-m[data-p] .tiles:only-child { grid-column: 1 / -1; }
.tiles a { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border-radius: 10px; padding: 8px 8px 8px 14px; font-size: 14px; min-height: 60px; transition: background 200ms; }
.tiles a:hover { background: var(--cool); }
.tiles img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: none; }
.nav-new::after { content: "NOUVEAU"; margin-left: 6px; font: 600 9px var(--mono); letter-spacing: .08em; color: var(--accent); vertical-align: 2px; }
@media (max-width: 1080px) { .mega.wide { display: none; } }
.mega.wide { position: fixed; left: 0; right: 0; top: 76px; padding: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 40px 60px rgba(7,31,60,.14); transform: none; }
.mega.wide::before { display: none; }
.mega.wide .mega-rail { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; }
.nav > li.has-wide:hover .mega.wide { transform: none; }
.mega-rail.solo { grid-template-columns: 1fr; }
.tiles a.all-t { background: none; justify-content: flex-end; color: var(--info); font-weight: 500; }
.foot .cols { grid-template-columns: 1.3fr repeat(5, 1fr); }

/* use cases: menu columns, index grid, related links */
.panel-m.uc { grid-template-columns: 1fr; }
.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 28px; align-items: start; }
.uc-col h4 { font: 600 14px var(--sans); margin: 0 0 8px; color: var(--ink); }
.uc-col a { display: flex; justify-content: space-between; gap: 8px; background: var(--surface); border-radius: 8px; padding: 10px 14px; margin-bottom: 6px; font-size: 14px; }
.uc-col a:hover { background: var(--cool); }
.uc-col a span { color: var(--info); }
.section .uc-grid { margin-top: 32px; gap: 16px 32px; }
.soft .uc-col a { background: #fff; }
.rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 28px; }
.rel a { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 12px; padding: 18px 20px; font-size: 16px; }
.rel a span { color: var(--info); font-size: 20px; }
.foot .cols { grid-template-columns: 1.2fr repeat(6, 1fr); gap: 24px; }
.uc-menu { display: grid; grid-template-columns: 2fr 2fr; gap: 28px; align-items: start; }
.uc-menu .uc-col.wide > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.uc-menu .uc-rest { column-count: 2; column-gap: 20px; }
.uc-menu .uc-rest .uc-col { break-inside: avoid; margin-bottom: 14px; }
.uc-menu .uc-col a { padding: 8px 12px; margin-bottom: 6px; font-size: 13.5px; }
.nav > li > a { padding: 10px 9px; font-size: 14.5px; }
.top .container { gap: 14px; }


/* phone menu */
.mnav { display: none; }
.burger { flex-direction: column; justify-content: center; gap: 5px; }
.burger i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 250ms var(--ease), opacity 200ms; }
@media (max-width: 1080px) {
  .burger { display: inline-flex; align-items: center; }
  .top.open .nav { display: none; }
  .mnav { display: block; position: fixed; inset: 76px 0 0 0; background: #fff; overflow-y: auto; padding: 8px var(--gutter) 40px; transform: translateX(100%); transition: transform 300ms var(--ease); z-index: 60; }
  .mnav-open .mnav { transform: none; }
  .mnav-open { overflow: hidden; }
  .mnav-open .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mnav-open .burger i:nth-child(2) { opacity: 0; }
  .mnav-open .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mnav details { border-bottom: 1px solid var(--line); }
  .mnav summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 600 20px var(--sans); }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary::after { content: "+"; font-weight: 400; font-size: 24px; color: var(--muted); transition: transform 250ms var(--ease); }
  .mnav details[open] summary::after { transform: rotate(45deg); }
  .mnav details > div { display: flex; flex-direction: column; padding: 0 0 16px; }
  .mnav small { font: 500 12px var(--sans); color: var(--muted); margin: 12px 0 4px; }
  .mnav details a { padding: 9px 0; font-size: 16px; color: var(--ink-2); }
  .mnav-actions { display: grid; gap: 10px; margin-top: 28px; }
  .mnav-actions .btn { justify-content: center; }
  .mnav-actions .lang { display: flex; justify-self: center; margin-top: 6px; }
}
.mnav-open .proto { display: none; }

/* articles (guides) */
.article-hero { padding: 72px 0 32px; }
.article-hero .container, .article .container { max-width: 760px; }
.article-hero h1 { font: 700 clamp(38px, 5vw, 60px)/1.04 var(--display); margin-top: 12px; }
.article-hero .meta { margin-top: 18px; color: var(--muted); font-size: 14px; }
.article-cover { max-width: 1040px; margin: 24px auto 0; border-radius: 18px; overflow: hidden; aspect-ratio: 21 / 9; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article { padding: 56px 0 96px; }
.article p, .article li { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.article p + p { margin-top: 18px; }
.article h2 { font: 600 28px/1.2 var(--sans); margin: 44px 0 14px; color: var(--ink); }
.article ul { padding-left: 22px; margin: 14px 0; }
.article .tip { margin: 28px 0; padding: 20px 24px; border-radius: 14px; background: var(--cool); }
.article .tip b { display: block; margin-bottom: 4px; color: var(--ink); }
.article table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-weight: 600; color: var(--ink); }
/* resources hub cards */
.res-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.res-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.res-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.res-card div { padding: 20px; display: grid; gap: 8px; }
.res-card small { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.res-card h3 { font: 600 19px/1.25 var(--sans); }
.res-card p { color: var(--ink-2); font-size: 14px; }
@media (max-width: 900px) { .res-cards { grid-template-columns: 1fr; } }
.nav > li > a { padding: 10px 8px; font-size: 14px; }

@media (max-width: 1240px) { .top-actions .btn-outline { display: none; } }


/* lead forms */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: flex !important; gap: 10px; align-items: flex-start; font-size: 13px !important; font-weight: 400 !important; color: var(--ink-2); line-height: 1.45; }
.consent input { width: 18px; height: 18px !important; margin-top: 2px; flex: none; accent-color: var(--band); }
.consent a { color: var(--info); text-decoration: underline; }
.form .err, .demo .err { display: none; background: var(--bad-bg); color: var(--bad); padding: 14px; border-radius: 12px; font-size: 14px; }
.form .err a, .demo .err a { text-decoration: underline; }
.form.failed .err, .demo.failed .err { display: block; }
.demo .consent { width: 100%; }
.demo.sent .ok { display: block; }
button[disabled] { opacity: .6; cursor: wait; }

/* cookie banner + legal drafts */
.cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 560px; margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px 20px; display: grid; gap: 12px; font-size: 14px; color: var(--ink-2); }
.cc[hidden] { display: none; }
.cc a { color: var(--info); text-decoration: underline; }
.cc > div { display: flex; gap: 8px; justify-content: flex-end; }
.legal a:hover { color: var(--ink); text-decoration: underline; }
.todo { background: #FFF3CD; color: #7A5B00; padding: 0 4px; border-radius: 4px; }
.todo-note { margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: #FFF3CD; color: #7A5B00; font-size: 14px; }
.article code { font: 13px var(--mono); background: var(--surface); padding: 2px 6px; border-radius: 4px; }


/* ===================================================================
   v3 · "Point Precision" identity (brand/tokens/axia-tokens.css)
   One grotesque family, navy + electric blue, sensor cyan on dark.
   =================================================================== */
h1, .h2, .hero h1, .phero h1, .phero2 h1, .shero h1, .statement h2, .article-hero h1, .cta .big, .aud-card h3 { letter-spacing: var(--track-display); }
.hero h1, .phero2 h1, .phero h1 { font-weight: 700; line-height: .98; }
.cta .big { font-weight: 600; }
/* highlighted words: blue on light, sensor gradient on dark (no more serif italics) */
h1 em, h2 em, .h2 em { font-style: normal; color: var(--accent); }
.hero h1 em, .phero2 h1 em, .band h1 em, .band h2 em, .deep h1 em, .deep h2 em {
  background: linear-gradient(100deg, #00E4ED, #4FB8FF 60%, #7FA6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* accents that sit on dark backgrounds or photos use sensor cyan */
.band .eyebrow, .deep .eyebrow, .phero2 .eyebrow, .eng .eyebrow { color: var(--cyan); }
.ev::before { background: var(--cyan); box-shadow: 0 0 0 4px rgba(0,226,237,.22); }
.eng details[open] summary::before, .aicard h3::before, .ui-bubble small, .ui-search .caret { color: var(--cyan); }
.ui-search .caret { background: var(--cyan); }
.bbox { border-color: var(--cyan); } .bbox span { background: var(--cyan); color: var(--navy); }
.ui-card .btns span.go, .inc .acts span.go { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.ui-wave i { background: var(--cyan); }
.band .link, .deep .link { color: var(--cyan); }
.badge i { background: var(--cyan); box-shadow: 0 0 0 4px rgba(0,226,237,.2); }
/* buttons and links on light */
.btn-primary { background: var(--navy); } .btn-primary:hover { background: var(--blue-600); }
.btn-light { color: var(--navy); }
.link { color: var(--blue-600); }
/* hotspots and step markers take the sensor look */
.hs { background: var(--navy); box-shadow: 0 0 0 2px var(--cyan), 0 6px 16px rgba(7,31,60,.3); font-family: var(--sans); font-weight: 700; font-size: 14px; }
.hs::after { border-color: var(--cyan); }
.hs:hover, .hs.on { background: var(--cyan); color: var(--navy); }
.scene-card .k { box-shadow: inset 0 0 0 1.5px var(--cyan); font-family: var(--sans); font-weight: 700; font-size: 13px; }
.tl .dot { border-color: var(--blue-300); color: var(--navy); font-family: var(--sans); font-weight: 700; }
.tl.ai .dot { background: var(--navy); color: var(--cyan); border-color: var(--navy); }
.promise .ring { background: radial-gradient(closest-side, #fff 86%, transparent 87% 100%), conic-gradient(var(--blue-600) var(--p, 100%), var(--line) 0); font-family: var(--sans); font-weight: 700; }
/* lighter blue washes for soft sections and chips */
.soft { background: var(--surface); }
.chip::before { background: var(--blue-600); }
.label.accent, .eyebrow { color: var(--blue-600); }
.mega-inner.sect a:hover, .tiles a:hover, .uc-col a:hover { background: var(--blue-50); }
.rail-l a.on, .rail-l a:hover { color: var(--blue-600); }
.nav-new::after { color: var(--blue-600); }
.top { background: rgba(255,255,255,.94); }
.logo img { width: 100%; height: auto; display: block; }

/* sectors mega menu: intro rail + 4 grouped columns, all sectors visible */
.rail-l.intro p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rail-l.intro .link { font: 600 14px var(--sans); padding: 0; }
.sect-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sect-col h4 { font: 500 12px var(--sans); color: var(--muted); margin: 0 0 10px; }
.sect-col a { display: flex; align-items: center; gap: 12px; padding: 6px; margin: 0 -6px 2px; border-radius: 10px; font: 500 15px/1.25 var(--sans); color: var(--ink); }
.sect-col a:hover { background: var(--blue-50); color: var(--blue-600); }
.sect-col img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }

/* language switch: compact, always visible on desktop (hidden < 1080px where the phone menu has its own) */
.top-actions .lang a { padding: 5px 9px; }
.demo .consent { display: flex !important; align-items: flex-start; gap: 10px; flex-basis: 100%; }
.demo .consent input { flex: none !important; width: 18px !important; min-width: 0; height: 18px !important; padding: 0 !important; border-radius: 4px; margin: 2px 0 0; }
.demo .consent span { flex: 1; }
.lang a[lang="ar"] { font-family: 'Noto Sans Arabic', var(--sans); font-size: 14px; line-height: 1; }
/* the header always carries "Demander une démo": no second copy in page sub-navigations */
.subnav .btn { display: none; }

/* ---- mobile overflow fixes (22 Oct) ---- */
/* the closed phone menu must not sit off-screen: it widened every page to 2x the viewport */
@media (max-width: 1080px) {
  .mnav { transform: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms var(--ease), visibility 0s linear 200ms; }
  .mnav-open .mnav { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms var(--ease); }
}
/* safety net: nothing may widen the page (clip keeps position: sticky working, unlike hidden) */
html, body { overflow-x: clip; max-width: 100%; }
img, svg, video { max-width: 100%; }

/* ---- phone layout: last word over earlier unconditional rules and inline grid styles ---- */
@media (max-width: 900px) {
  .foot .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
  .split > *, .stack, .form, .shero .container > *, .container > * { min-width: 0; }
  .car-head, .split-head, .cta { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .offers, .ov-cols, .rel, .uc-grid, .form .row, .timeline, .sx-flow, .layers, .four, .duo { grid-template-columns: 1fr !important; }
  .cases, .cases.four, .cases[style] { grid-template-columns: 1fr 1fr !important; }
  .form { padding: 22px; }
  .form input, .form select { min-width: 0; width: 100%; }
  .demo { flex-wrap: wrap; } .demo input[type="tel"] { flex: 1 1 100%; } .demo .btn { width: 100%; }
  .btn { white-space: normal; text-align: center; }
  .legal { flex-direction: column; gap: 8px; }
  .cta .big { font-size: 34px; }
}
/* honeypot: hidden without a far-off offset (which widened RTL pages) */
.hp { position: absolute !important; left: auto !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.form .hp, .demo .hp { width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.consent span { min-width: 0; overflow-wrap: anywhere; }

.subnav a { flex: none; }
@media (max-width: 900px) { .subnav { margin-top: 0; } .subnav .container { height: 50px; } }

/* booking and partner forms: textarea, checkbox chips, three-up row */
.form textarea { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; font: inherit; resize: vertical; min-height: 84px; background: #fff; }
.form textarea:focus { outline: none; border-color: var(--band); }
.form label small { font-weight: 400; }
.form .row.three { grid-template-columns: 1fr 1fr 1fr; }
.form .picks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.form .picks legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.form .picks label { display: block; font-weight: 500; font-size: 13px; cursor: pointer; }
.form .picks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form .picks span { display: inline-block; padding: 8px 13px; border: 1.5px solid var(--line-strong); border-radius: var(--pill); }
.form .picks input:checked + span { background: var(--band); border-color: var(--band); color: #fff; }
.form .picks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.shero.book { padding-top: 48px; }
.shero.book .container { align-items: start; }
.shero.book .stack { position: sticky; top: 140px; }
@media (max-width: 900px) {
  .form .row.three { grid-template-columns: 1fr !important; }
  .shero.book .container { grid-template-columns: 1fr; }
  .shero.book .stack { position: static; }
}
.form input, .form select, .form textarea { box-sizing: border-box; max-width: 100%; }
.form label.consent { display: flex; align-items: flex-start; gap: 10px; }
.form .consent input { width: 18px !important; height: 18px; min-width: 18px; flex: none; margin-top: 2px; padding: 0; }