*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,Menlo,SFMono-Regular,Consolas,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-left-20{left:-5rem}.-right-20{right:-5rem}.bottom-0{bottom:0}.left-1\/2{left:50%}.right-5{right:1.25rem}.top-0{top:0}.top-10{top:2.5rem}.top-2{top:.5rem}.top-5{top:1.25rem}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-1{height:.25rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-3{height:.75rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.min-h-\[78vh\]{min-height:78vh}.min-h-screen{min-height:100vh}.w-11{width:2.75rem}.w-12{width:3rem}.w-24{width:6rem}.w-3{width:.75rem}.w-9{width:2.25rem}.w-\[75\%\]{width:75%}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[260px\]{max-width:260px}.max-w-\[300px\]{max-width:300px}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-rotate-6,.-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-6{--tw-rotate:-6deg}.rotate-6{--tw-rotate:6deg}.rotate-6,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.auto-rows-fr{grid-auto-rows:minmax(0,1fr)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-7{gap:1.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-12{row-gap:3rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-white\/10>:not([hidden])~:not([hidden]){border-color:rgb(255 255 255/.1)}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-\[2\.6rem\]{border-radius:2.6rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-\[3rem\]{border-radius:3rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-\[6px\]{border-width:6px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-accent\/25{border-color:rgb(41 188 229/.25)}.border-accent\/30{border-color:rgb(41 188 229/.3)}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-white\/10{border-color:rgb(255 255 255/.1)}.border-white\/15{border-color:rgb(255 255 255/.15)}.bg-accent{--tw-bg-opacity:1;background-color:rgb(41 188 229/var(--tw-bg-opacity,1))}.bg-accent\/10{background-color:rgb(41 188 229/.1)}.bg-accent\/30{background-color:rgb(41 188 229/.3)}.bg-background{--tw-bg-opacity:1;background-color:rgb(38 45 57/var(--tw-bg-opacity,1))}.bg-background\/85{background-color:rgb(38 45 57/.85)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/20{background-color:rgb(0 0 0/.2)}.bg-black\/25{background-color:rgb(0 0 0/.25)}.bg-black\/30{background-color:rgb(0 0 0/.3)}.bg-elevated{--tw-bg-opacity:1;background-color:rgb(60 67 82/var(--tw-bg-opacity,1))}.bg-positive\/20{background-color:rgb(85 217 155/.2)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(51 57 72/var(--tw-bg-opacity,1))}.bg-surface\/90{background-color:rgb(51 57 72/.9)}.bg-white\/10{background-color:rgb(255 255 255/.1)}.bg-white\/5{background-color:rgb(255 255 255/.05)}.bg-\[radial-gradient\(circle_at_30\%_20\%\2c rgba\(41\2c 188\2c 229\2c \.35\)\2c transparent_60\%\)\]{background-image:radial-gradient(circle at 30% 20%,rgba(41,188,229,.35),transparent 60%)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.bg-grid{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 0)}.from-accent\/10{--tw-gradient-from:rgb(41 188 229/0.1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(41 188 229/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-background{--tw-gradient-from:#262D39 var(--tw-gradient-from-position);--tw-gradient-to:rgb(38 45 57/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-background\/90{--tw-gradient-from:rgb(38 45 57/0.9) var(--tw-gradient-from-position);--tw-gradient-to:rgb(38 45 57/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-background\/95{--tw-gradient-from:rgb(38 45 57/0.95) var(--tw-gradient-from-position);--tw-gradient-to:rgb(38 45 57/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-background\/35{--tw-gradient-to:rgb(38 45 57/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(38 45 57/0.35) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-background\/55{--tw-gradient-to:rgb(38 45 57/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(38 45 57/0.55) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-background\/25{--tw-gradient-to:rgb(38 45 57/0.25) var(--tw-gradient-to-position)}.to-background\/90{--tw-gradient-to:rgb(38 45 57/0.9) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-\[size\:28px_28px\]{background-size:28px 28px}.bg-\[size\:34px_34px\]{background-size:34px 34px}.object-cover{-o-object-fit:cover;object-fit:cover}.object-\[55\%_100\%\]{-o-object-position:55% 100%;object-position:55% 100%}.object-\[55\%_60\%\]{-o-object-position:55% 60%;object-position:55% 60%}.object-center{-o-object-position:center;object-position:center}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-\[\.95\]{line-height:.95}.tracking-\[\.16em\]{letter-spacing:.16em}.tracking-\[\.28em\]{letter-spacing:.28em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-accent{--tw-text-opacity:1;color:rgb(41 188 229/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(244 244 247/var(--tw-text-opacity,1))}.text-muted{--tw-text-opacity:1;color:rgb(168 168 183/var(--tw-text-opacity,1))}.text-positive{--tw-text-opacity:1;color:rgb(85 217 155/var(--tw-text-opacity,1))}.opacity-30{opacity:.3}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-\[0_0_18px_rgba\(34\2c 211\2c 238\2c \.9\)\]{--tw-shadow:0 0 18px rgba(34,211,238,.9);--tw-shadow-colored:0 0 18px var(--tw-shadow-color)}.shadow-\[0_0_18px_rgba\(34\2c 211\2c 238\2c \.9\)\],.shadow-panel{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-panel{--tw-shadow:0 20px 60px rgba(0,0,0,0.28);--tw-shadow-colored:0 20px 60px var(--tw-shadow-color)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-accent\/10{--tw-ring-color:rgb(41 188 229/0.1)}.ring-accent\/30{--tw-ring-color:rgb(41 188 229/0.3)}.blur-2xl{--tw-blur:blur(40px)}.blur-2xl,.brightness-75{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.brightness-75{--tw-brightness:brightness(.75)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{color-scheme:dark}html{scroll-behavior:smooth}body{margin:0;background:#262D39;color:#F4F4F7;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}::-moz-selection{background:rgba(41,188,229,.35)}::selection{background:rgba(41,188,229,.35)}.tabular{font-family:ui-monospace,Menlo,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}.hover\:text-accent:hover{--tw-text-opacity:1;color:rgb(41 188 229/var(--tw-text-opacity,1))}.hover\:text-ink:hover{--tw-text-opacity:1;color:rgb(244 244 247/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[\.72fr_1fr\]{grid-template-columns:.72fr 1fr}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-stretch{align-items:stretch}.md\:justify-between{justify-content:space-between}.md\:p-12{padding:3rem}}@media (min-width:1024px){.lg\:block{display:block}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[\.75fr_1fr\]{grid-template-columns:.75fr 1fr}.lg\:grid-cols-\[\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}.lg\:grid-cols-\[1\.1fr_\.9fr\]{grid-template-columns:1.1fr .9fr}.lg\:grid-cols-\[1fr_\.85fr\]{grid-template-columns:1fr .85fr}.lg\:text-7xl{font-size:4.5rem;line-height:1}}
/* --- Reveal on scroll -------------------------------------------------- *
 * Was framer-motion. The elements start slightly low and transparent and
 * settle when scrolled into view. Anything still hidden when scripting is off
 * would be unreadable, so the hidden state is applied by script and the plain
 * document is fully visible.
 */
.reveal { opacity: 1; }
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Mobile menu ------------------------------------------------------- */
#menu-panel[hidden] { display: none; }

/* Staggered like the original, which offset each card in a grid by 80ms.
   Expressed here as sibling position rather than a per-element delay, so the
   markup carries no animation detail. */
html.js .reveal:nth-child(2)  { transition-delay: .08s; }
html.js .reveal:nth-child(3)  { transition-delay: .16s; }
html.js .reveal:nth-child(4)  { transition-delay: .24s; }
html.js .reveal:nth-child(5)  { transition-delay: .32s; }
html.js .reveal:nth-child(n+6){ transition-delay: .4s;  }

/* --- Screen showcase ---------------------------------------------------- *
 * One app seen six ways, as a single composition rather than a gallery: tabs
 * sit directly above the stage, the phone is the hero of its column, and the
 * copy is centred against it so the two read as one thing.
 *
 * Still radio inputs and no JavaScript. The checked one selects its panel
 * through a sibling combinator, which means keyboard arrows move between tabs
 * for free and there is no state that can drift from what is on screen.
 */
.sc-section {
  max-width: 1150px;
  margin: 0 auto;
  padding: 5rem 1.25rem 6rem;
}

.sc-head { max-width: 46rem; }
.sc-kicker {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #29BCE5;
}
.sc-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
/* The rhythm the section was missing: 20px to the intro, 36px to the tabs,
   32px from the tabs to the stage. It read as disconnected because those gaps
   were all roughly the same and all too large. */
.sc-head p {
  margin: 20px 0 0;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #A8A8B7;
}

.sc-showcase { margin-top: 36px; }

.sc-radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sc-tabs {
  /* The controls sit above the stage whatever the stage paints, so a later
     sibling cannot cover them again. */
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: .5rem;
  /* Scrolls rather than wrapping to a second row, which on a narrow screen
     turned the selector into a block of buttons instead of one control. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.sc-tabs::-webkit-scrollbar { display: none; }

.sc-tab {
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
  padding: .8rem 1.35rem;
  font-size: .9rem;
  font-weight: 700;
  color: #A8A8B7;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.sc-tab:hover { color: #F4F4F7; border-color: rgba(255, 255, 255, .16); }

.sc-stage {
  margin-top: 32px;
  /* Every panel occupies the same cell, so the stage is as tall as the tallest
     and switching cannot make the page jump. It is also what allows a
     cross-fade: display:none cannot be transitioned. */
  display: grid;
}
.sc-panel {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  pointer-events: none;
}
@media (min-width: 900px) {
  .sc-panel { grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr); gap: 3.5rem; }
}

.sc-stage-phone {
  position: relative;
  /* A column, so the note sits under the device rather than beside it - as a
     row it became a flex item next to the phone. The glow and floor are
     absolutely positioned and take no part in this. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sc-glow {
  position: absolute;
  inset: -12% -6% 6%;
  background: radial-gradient(circle at 50% 35%, rgba(41, 188, 229, .16), transparent 62%);
  filter: blur(28px);
  z-index: 0;
  /* Decoration must never take a click. The negative top inset lifts this well
     above the phone - far enough to sit over the leftmost tabs - so without
     this it swallowed presses on Dashboard and Lights. */
  pointer-events: none;
}
/* A floor rather than a drop shadow: the phone should sit somewhere, not
   hover over a card. */
.sc-floor {
  position: absolute;
  left: 50%; bottom: -14px;
  width: 68%; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.sc-phone {
  position: relative;
  z-index: 1;
  width: 320px;
  max-width: 100%;
  border-radius: 2.6rem;
  border: 6px solid #0a0a0c;
  background: #0a0a0c;
  padding: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}
.sc-notch {
  position: absolute;
  left: 50%; top: 11px;
  height: 18px; width: 96px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0a0a0c;
  z-index: 2;
}
.sc-shot { overflow: hidden; border-radius: 2.1rem; }
.sc-shot img { display: block; width: 100%; height: auto; }

.sc-copy { max-width: 36rem; }
.sc-eyebrow {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #29BCE5;
}
.sc-copy h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #F4F4F7;
}
.sc-body { margin: 1rem 0 0; font-size: 1rem; line-height: 1.75; color: #A8A8B7; }

.sc-points { margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sc-points li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .45rem 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #A8A8B7;
}
.sc-points svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .18rem; color: #29BCE5; }

/*
 * Which panel and which tab are active. Written out six times rather than
 * generated: a stylesheet is not a program, and reading it should not require
 * working out what a loop would have produced.
 */
#screen-dashboard:checked ~ .sc-stage #panel-dashboard,
#screen-lights:checked    ~ .sc-stage #panel-lights,
#screen-battery:checked   ~ .sc-stage #panel-battery,
#screen-level:checked     ~ .sc-stage #panel-level,
#screen-maps:checked      ~ .sc-stage #panel-maps,
#screen-weather:checked   ~ .sc-stage #panel-weather {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto;
}

#screen-dashboard:checked ~ .sc-tabs .sc-tab:nth-of-type(1),
#screen-lights:checked    ~ .sc-tabs .sc-tab:nth-of-type(2),
#screen-battery:checked   ~ .sc-tabs .sc-tab:nth-of-type(3),
#screen-level:checked     ~ .sc-tabs .sc-tab:nth-of-type(4),
#screen-maps:checked      ~ .sc-tabs .sc-tab:nth-of-type(5),
#screen-weather:checked   ~ .sc-tabs .sc-tab:nth-of-type(6) {
  background: rgba(41, 188, 229, .12);
  border-color: rgba(41, 188, 229, .5);
  color: #F4F4F7;
}

/* The ring goes on the label, since the input it belongs to is visually
   hidden - and only on the focused one, so tabbing through does not light up
   the whole row. */
#screen-dashboard:focus-visible ~ .sc-tabs .sc-tab:nth-of-type(1),
#screen-lights:focus-visible    ~ .sc-tabs .sc-tab:nth-of-type(2),
#screen-battery:focus-visible   ~ .sc-tabs .sc-tab:nth-of-type(3),
#screen-level:focus-visible     ~ .sc-tabs .sc-tab:nth-of-type(4),
#screen-maps:focus-visible      ~ .sc-tabs .sc-tab:nth-of-type(5),
#screen-weather:focus-visible   ~ .sc-tabs .sc-tab:nth-of-type(6) {
  outline: 2px solid #29BCE5;
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .sc-phone { width: 280px; }
  .sc-panel { gap: 2.5rem; }
}
@media (max-width: 899px) {
  .sc-section { padding: 4rem 1.25rem 5rem; }
  .sc-tabs { justify-content: flex-start; }
  .sc-panel { justify-items: center; text-align: left; }
  .sc-copy { max-width: 34rem; }
  .sc-phone { width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-panel { transition: none; }
}

/* --- Dakila Live ------------------------------------------------------- *
 * Three nodes and what passes between them. The direction of each arrow is
 * the product's safety model made visible: readings come up from anywhere,
 * commands go down only for lighting.
 */
.live-flow {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .live-flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
}

.live-node {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #333948;
  padding: 1.5rem;
  text-align: center;
}
.live-node-title { font-size: 1.125rem; font-weight: 900; color: #F4F4F7; }
.live-node p { margin: .5rem 0 0; font-size: .9rem; line-height: 1.6; color: #A8A8B7; }

.live-arrows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
  padding: .25rem 0;
}
.live-arrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The line itself, drawn rather than imaged so it takes the accent colour. */
.live-arrow::before {
  content: "";
  flex: 1 0 2.5rem;
  height: 2px;
  border-radius: 2px;
}
.live-up { color: #29BCE5; }
.live-up::before { background: linear-gradient(90deg, rgba(41,188,229,.15), #29BCE5); }
.live-down { color: #55D99B; }
.live-down::before { background: linear-gradient(90deg, #55D99B, rgba(85,217,155,.15)); }

/* Stacked, the arrows read top-to-bottom rather than left-to-right, so the
   horizontal rules would point the wrong way. */
@media (max-width: 899px) {
  /* Side by side once stacked, and allowed to break rather than push the
     section wider than the screen. */
  .live-arrows { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; }
  .live-arrow::before { flex-basis: 1.5rem; }
}

.live-flow-note {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: .9rem;
  line-height: 1.7;
  color: #737383;
}

.live-boundary {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) { .live-boundary { grid-template-columns: 1fr 1fr; } }

.live-allowed, .live-denied {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem;
}
.live-allowed { background: rgba(41, 188, 229, .08); border-color: rgba(41, 188, 229, .28); }
.live-denied  { background: #2A313D; }
.live-allowed h3, .live-denied h3 { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 900; }
.live-allowed ul, .live-denied ul { margin: 0; padding-left: 1.1rem; }
.live-allowed li, .live-denied li { margin: .35rem 0; line-height: 1.6; color: #A8A8B7; }
.live-denied p { margin: 1rem 0 0; font-size: .875rem; line-height: 1.7; color: #737383; }

/* --- Smart power ------------------------------------------------------- */
.power-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .power-grid { grid-template-columns: .8fr 1.2fr; } }

.power-phone {
  position: relative;
  width: 250px;
  margin: 0 auto;
  border-radius: 2.2rem;
  border: 5px solid #000;
  background: #000;
  padding: 5px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}
.power-notch {
  position: absolute; left: 50%; top: 9px;
  height: 15px; width: 74px;
  transform: translateX(-50%);
  border-radius: 999px; background: #000; z-index: 1;
}
.power-shot { overflow: hidden; border-radius: 1.8rem; }
.power-shot img { display: block; width: 100%; height: auto; }

.power-stats {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 640px) { .power-stats { grid-template-columns: repeat(4, 1fr); } }

.power-stat {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #333948;
  padding: 1.1rem;
  text-align: center;
}
/* Figures in mono, as the app sets them - and only the figures. */
.power-value {
  display: block;
  font-family: ui-monospace, Menlo, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 700;
  color: #29BCE5;
  line-height: 1.1;
}
.power-value small { font-size: .8rem; color: #A8A8B7; }
.power-key {
  display: block;
  margin-top: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #737383;
}
.power-note { margin-top: 1.5rem; line-height: 1.75; color: #737383; font-size: .95rem; }

/* --- Development log --------------------------------------------------- *
 * The history is worth keeping and not worth the same weight as this month's
 * work, so the older entries fold away behind a summary. <details> does the
 * work, which means it opens with no JavaScript and is findable by in-page
 * search in browsers that expand it to match.
 */
.updates-more { margin-top: 1rem; }
.updates-more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #333948;
  padding: .7rem 1.3rem;
  font-size: .875rem;
  font-weight: 700;
  color: #A8A8B7;
  transition: color .2s ease, border-color .2s ease;
}
.updates-more > summary::-webkit-details-marker { display: none; }
.updates-more > summary:hover { color: #F4F4F7; border-color: rgba(41, 188, 229, .45); }
.updates-more > summary span { font-weight: 400; color: #737383; }
.updates-more[open] > summary { margin-bottom: 1rem; }

/* --- Hero, on a phone --------------------------------------------------- *
 * The desktop hero is unchanged: everything below is inside a media query.
 *
 * What was wrong on a phone was quantity, not styling. Two status pills that
 * both named the same firmware version, a headline, a three-line paragraph and
 * two buttons all competed for one screen, over the brightest part of a
 * photograph. The fix is mostly removal.
 */

/* By default the compact pill and the short copy do not exist. */
.hero-pill-short,
.hero-copy-short,
.hero-copy-note { display: none; }

/* The scrim is a phone concern; on desktop the copy sits beside the vehicle
   rather than on top of it, and the existing diagonal wash is enough. */
.hero-scrim { display: none; }

@media (max-width: 767px) {
  /* A compact header: the logo shrinks, the padding tightens, and the row
     lands at about 72px while the tap targets stay full height. */
  header > div:first-of-type { padding-top: .8rem; padding-bottom: .8rem; }
  header img { height: 2rem; width: 2rem; }
  header a[href="#top"] { font-size: .9rem; letter-spacing: .14em; }

  /*
   * Readable text over a photograph.
   *
   * Bottom-weighted rather than a flat wash, so the vehicle and the sky stay
   * visible while the copy sits on something solid. A second, horizontal pass
   * darkens the leading edge where the text begins.
   */
  .hero-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(20, 24, 31, .92) 0%, rgba(20, 24, 31, .78) 34%,
                      rgba(20, 24, 31, .42) 62%, rgba(20, 24, 31, .12) 100%),
      linear-gradient(to right, rgba(20, 24, 31, .55), rgba(20, 24, 31, 0) 78%);
    pointer-events: none;
  }

  .hero-section {
    /* Not a forced 100vh: svh accounts for Safari's bars, and the content is
       still allowed to grow past it rather than being trapped. */
    min-height: calc(100svh - 72px);
    padding-inline: 20px;
    padding-top: 2.25rem;
    padding-bottom: 3rem;
    align-content: center;
  }

  /* One pill, one line. */
  .hero-status { margin-bottom: 1.1rem; }
  .hero-pill-long,
  .hero-pill-secondary { display: none; }
  .hero-pill-short {
    display: inline;
    font-size: .78rem;
    letter-spacing: .04em;
  }
  .hero-status > div:first-child { padding: .45rem .85rem; }

  .hero-title {
    font-size: clamp(42px, 12vw, 58px);
    line-height: .98;
    letter-spacing: -0.04em;
    font-weight: 800;
    /* Three lines on a 390px screen, from the padded width and balance
       rather than a <br> or a guess at font metrics. */
    text-wrap: balance;
  }

  /* The long paragraph goes; one sentence and a quiet second line replace it. */
  .hero-copy-long { display: none; }
  .hero-copy-short {
    display: block;
    margin: 1.15rem 0 0;
    max-width: 34rem;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
  }
  .hero-copy-note {
    display: block;
    margin: .55rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .58);
  }

  .hero-ctas { margin-top: 1.6rem; gap: .875rem; }
  .hero-cta-primary {
    width: 100%;
    min-height: 58px;
    border-radius: 16px;
    font-size: 1rem;
  }
  /* Secondary reads as secondary: an outline, not a second solid button
     competing with the first. */
  .hero-cta-secondary {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .04);
    font-size: .95rem;
    color: #F4F4F7;
  }

  /* The four capability chips are desktop furniture. On a phone they pushed
     the call to action off the first screen to say what the sections below
     already say. */
  .hero-chips { display: none; }
}

/* Between phone and desktop, keep the richer hero but stop the headline
   running to seven words a line. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-title { font-size: clamp(3rem, 6vw, 3.75rem); letter-spacing: -0.03em; }
  .hero-section { padding-inline: 24px; }
}

/* --- "Actual screenshot" note ------------------------------------------- *
 * Worth saying, because the page previously carried a rendered concept image
 * and most product sites still do. Small enough to be a footnote rather than a
 * claim competing with the screen above it.
 */
.shot-note {
  display: block;
  width: 100%;
  margin-top: .7rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #737383;
  text-align: center;
  white-space: normal;
}
.shot-note .shot-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: .4rem;
  border-radius: 999px;
  background: #29BCE5;
  vertical-align: middle;
}
.shot-dot {
  display: none;
}
/* On the small rotated phones the note would crowd the frame, so it shrinks
   with them rather than being dropped - the claim applies to those too. */
.w-1\/3 .shot-note { font-size: .55rem; letter-spacing: .06em; margin-top: .45rem; gap: .25rem; }

/* --- Footer credit ------------------------------------------------------ */
.footer-credit {
  margin-top: .55rem;
  display: flex;
  align-items: center;
  /* Without this the line cannot break: each run of text between the elements
     becomes its own flex item, so "Built by / Paul Brett Orozco / in the
     Philippines / flag" was pinned to one line and overflowed a phone. */
  flex-wrap: wrap;
  gap: .3rem .45rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #737383;
}
.footer-credit strong { font-weight: 700; color: #A8A8B7; }
/* Drawn rather than an emoji flag: those render as letters on Windows, which
   would leave the sentence trailing off mid-thought. */
.footer-flag {
  width: 20px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* --- Footer, on a phone -------------------------------------------------- *
 * The footer was built for a wide row: a 48px mark, a wide-tracked title and
 * two link groups sitting apart. On a narrow screen the title's letter-spacing
 * alone is wider than the space left beside the mark.
 */
@media (max-width: 639px) {
  footer { padding-left: 20px; padding-right: 20px; }

  /* Let the text column shrink instead of pushing past the viewport - a flex
     child defaults to min-width:auto, which refuses to go below its content. */
  footer .flex.items-center.gap-4 > div { min-width: 0; }

  footer .tracking-\[\.16em\] {
    letter-spacing: .08em;
    font-size: .8125rem;
    line-height: 1.35;
  }

  /* The mark is decoration here; the words matter more at this width. */
  footer img.h-12 { height: 2.25rem; width: 2.25rem; }

  /*
   * Centred, with the mark on top.
   *
   * The footer is a wide row by design - mark beside text, links off to the
   * right. At this width that leaves three differently-aligned blocks; stacking
   * and centring them reads as one thing.
   */
  .footer-identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .9rem;
  }
  .footer-credit { justify-content: center; }
  .footer-links { justify-content: center; gap: 1.5rem; }
  .footer-disclaimer { text-align: center; }
  footer > div:first-of-type { align-items: center; }
}

/* --- Status badges ------------------------------------------------------ *
 * The page makes a promise in its own copy: "Working, testing, in-development,
 * and planned features are labeled clearly." There are 32 of these labels and
 * they were all the same grey pill, so the four states were only distinguished
 * by reading each one. The state is the most scannable thing on a feature card
 * and it was carrying no colour at all.
 *
 * Palette is the existing one - positive green for what runs today, accent for
 * what is being tested, and two weights of neutral for what does not exist yet.
 * The dot is there so the state survives being skimmed at speed, and so colour
 * is not the only carrier of the difference.
 */
.st {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  /* A status token is one word-shape. The dot costs about 10px, which was
     enough to break "IN DEVELOPMENT" over two lines in the tightest rows and
     leave the dot floating beside a two-line block. The label next to the pill
     wraps instead, which several of those rows were already doing. */
  white-space: nowrap;
  border-color: rgba(255, 255, 255, .1);
  transition: border-color .2s ease, color .2s ease;
}
.st::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-radius: 999px;
  background: currentColor;
  /* Optical: the dot reads low against uppercase text sitting on its cap
     height, so it is nudged up rather than mathematically centred. */
  margin-top: -1px;
  flex: 0 0 auto;
}

/* Runs on the vehicle today. The only state that gets the positive colour. */
.st.st-working {
  color: #55D99B;
  border-color: rgba(85, 217, 155, .32);
  background: rgba(85, 217, 155, .09);
}

/* Built, being proven. Accent rather than green - it is not signed off. */
.st.st-testing {
  color: #29BCE5;
  border-color: rgba(41, 188, 229, .32);
  background: rgba(41, 188, 229, .09);
}

/* Under way. Neutral and readable, but with no colour claim on it. */
.st.st-dev {
  color: #A8A8B7;
  border-color: rgba(255, 255, 255, .12);
}

/* Not started. The quietest of the four, because it is the least true. */
.st.st-planned {
  color: #737383;
  border-color: rgba(255, 255, 255, .08);
}

/* --- The FAQ disclosures ------------------------------------------------ *
 * These are real <details> elements, but `list-none` removed the disclosure
 * triangle and nothing replaced it. Seven rows of bold text with dividers and
 * no affordance whatsoever - nothing said they opened, so the answers were
 * effectively hidden. The chevron is drawn from two borders rather than an
 * icon, so it inherits colour and needs no markup change.
 */
#faq summary {
  position: relative;
  padding-right: 2.5rem;
  transition: color .2s ease;
}
#faq summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid #737383;
  border-bottom: 2px solid #737383;
  /* Pointing down when closed. The -70% rather than -50% accounts for the
     rotated square's corner becoming its lowest point. */
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), border-color .2s ease;
}
#faq details[open] > summary { color: #29BCE5; }
#faq details[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: #29BCE5;
}
#faq summary:hover { color: #29BCE5; }
#faq summary:hover::after { border-color: #29BCE5; }

/* --- Calls to action ---------------------------------------------------- *
 * The three accent buttons and the ghost button beside them had no hover and
 * no pressed state - they were painted rectangles. A button that does not
 * acknowledge the cursor reads as a picture of a button.
 */
.hero-cta-primary,
.hero-cta-secondary,
a[class~="bg-accent"] {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              transform .12s ease, box-shadow .25s ease;
}
.hero-cta-primary:hover,
a[class~="bg-accent"]:hover {
  background-color: #4ACBEE;
  /* Tinted to the accent rather than black, so the glow belongs to the button
     instead of looking like a drop shadow from a different light source. */
  box-shadow: 0 10px 30px rgba(41, 188, 229, .22);
}
.hero-cta-secondary:hover {
  border-color: rgba(41, 188, 229, .5);
  color: #29BCE5;
}
.hero-cta-primary:active,
.hero-cta-secondary:active,
a[class~="bg-accent"]:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* --- Keyboard focus ----------------------------------------------------- *
 * There was no focus indicator anywhere except the phone-screenshot tabs, so
 * tabbing through the page was invisible. Not a preference - the page is
 * otherwise unusable without a pointer.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible {
  outline: 2px solid #29BCE5;
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-primary,
  .hero-cta-secondary,
  a[class~="bg-accent"],
  #faq summary::after,
  .st {
    transition: none;
  }
  .hero-cta-primary:active,
  .hero-cta-secondary:active,
  a[class~="bg-accent"]:active {
    transform: none;
  }
}

/* --- Roadmap phase states ----------------------------------------------- *
 * These five labels were all `text-positive`, so "Planned" and "In Development"
 * were painted the same confident green as "Working" - five phases that all
 * looked finished. On a page that makes a point of not promising delivery, the
 * roadmap was the one place quietly doing it.
 *
 * Same four states as the feature badges, minus the pill: these sit as plain
 * text under a heading and a border around them would fight the card.
 */
.rm-state {
  font-weight: 700;
  letter-spacing: .01em;
}
.rm-state.st-working { color: #55D99B; }
.rm-state.st-testing { color: #29BCE5; }
.rm-state.st-dev { color: #A8A8B7; }
.rm-state.st-planned { color: #737383; }

/* --- Footer identity ---------------------------------------------------- *
 * `items-center` centred a 48px mark against a three-line block, which is
 * correct by the maths and looks wrong: the mark floated against the second
 * line with the wordmark it belongs to sitting above it. Anchoring it to the
 * first line reads as a lockup instead of two centred objects.
 * Desktop only - the phone layout stacks and centres these deliberately.
 */
@media (min-width: 768px) {
  .footer-identity { align-items: flex-start; }
  .footer-identity > img { margin-top: -.1rem; }
}

/* --- Hero chips --------------------------------------------------------- *
 * Four equal grid columns forced "Power intelligence" and "Navigation &
 * leveling" onto two lines while their neighbours sat on one, so a row of
 * four identical objects had two different internal layouts. Sizing them to
 * their content costs nothing at this width and reads as deliberate.
 * Above the breakpoint where the author hides them entirely on phones.
 */
@media (min-width: 768px) {
  .hero-chips {
    display: flex;
    flex-wrap: wrap;
  }
}

/* The "actual screenshot" note is a credibility claim, and it was #737383 on
   top of a photograph - present in the markup, invisible in practice. Lifted
   to the muted grey with a shadow to hold it off the image behind. */
.shot-note {
  color: #A8A8B7;
  text-shadow: 0 1px 3px rgba(20, 24, 31, .85);
}

/* ========================================================================= *
 * Instrument pass
 * ========================================================================= *
 * The page had one shape and used it fifteen times: a cyan letterspaced
 * eyebrow, a very bold headline in the system face, a grey paragraph, then a
 * grid of rounded bordered cards. Twenty-four feature cards, five roadmap
 * cards, eighteen update cards - all the same radius, the same hairline, the
 * same padding. Nothing in that vocabulary belonged to a vehicle controller;
 * it would have fitted any product at all, which is the actual problem.
 *
 * What this system borrows instead is the controller's own vocabulary: a
 * channel schedule with GPIO numbers, states that are typed rather than
 * decorated, firmware revisions as the unit of history. The palette does not
 * change - it is the app's, and the screenshots have to sit on it - so the
 * work happens in type, density and structure.
 *
 * Three faces, each with one job:
 *   Archivo, variable width  - display. The width axis is the point: set wide,
 *                              it reads as a stamped panel label rather than
 *                              another bold grotesque.
 *   IBM Plex Mono            - anything the machine said: channel ids, GPIO
 *                              pins, revisions, states, counts.
 *   The system face          - prose, unchanged. It matches the app in the
 *                              screenshots and costs nothing to load.
 */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plexmono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The app's palette, named here so this stylesheet stops repeating hex.
     mobile/src/theme/colors.ts is the source; change it there first. */
  --dk-bg: #262D39;
  --dk-surface: #333948;
  --dk-raised: #3C4352;
  --dk-nested: #2A313D;
  --dk-ink: #F4F4F7;
  --dk-muted: #A8A8B7;
  --dk-dim: #737383;
  --dk-accent: #29BCE5;
  --dk-positive: #55D99B;
  --dk-warning: #F5BE4D;

  /* Two hairlines rather than one: a divider inside a block, and a heavier
     rule that closes a block off. Both are white at low opacity, which is how
     the app draws its borders. */
  --dk-hair: rgba(255, 255, 255, .07);
  --dk-rule: rgba(255, 255, 255, .16);

  --dk-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dk-mono: "IBM Plex Mono", ui-monospace, Menlo, SFMono-Regular, Consolas, monospace;
}

/* --- Display type -------------------------------------------------------- *
 * Every heading was font-black in the system face, which at 48px is just a
 * very heavy Helvetica. Archivo set wide at 700 carries the same weight of
 * voice with a shape of its own, and the width axis gives a scale that gets
 * wider as it gets bigger rather than only larger.
 *
 * The existing Tailwind size classes stay on the markup; only the face,
 * width, weight and tracking are taken over here.
 */
h1,
h2,
h3,
.sc-head h2,
.live-node-title,
.dk-display {
  font-family: var(--dk-display);
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.012em;
}

h1.hero-title {
  font-variation-settings: "wdth" 116;
  font-weight: 800;
  letter-spacing: -0.026em;
}

h2,
.sc-head h2 {
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  line-height: 1.04;
}

h3,
.live-node-title,
.live-allowed h3,
.live-denied h3 {
  font-variation-settings: "wdth" 104;
  font-weight: 650;
  letter-spacing: -0.006em;
}

/* --- Section legends ----------------------------------------------------- *
 * The eyebrow above each headline was a cyan word floating in space. Set in
 * mono and given a rule that runs out from it, it becomes what it always
 * was - a legend labelling the block below it, the way a panel labels a row
 * of terminals - and it stops reading as decoration.
 *
 * Selector matches the existing markup rather than asking every section to
 * carry a new class.
 */
.tracking-\[\.28em\].text-accent,
.sc-kicker {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--dk-mono);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--dk-accent);
}

.tracking-\[\.28em\].text-accent::after,
.sc-kicker::after {
  content: "";
  flex: 1 1 auto;
  /* Stops short of the full 80rem column: a rule that runs the whole way
     reads as a divider between sections, which is not what this is. */
  max-width: 12rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(41, 188, 229, .5), rgba(41, 188, 229, 0));
}

/* --- The capability rail ------------------------------------------------- *
 * Four things the system does, which is what the hero said before and says
 * again. What changed is the object: they were four rounded boxes with a
 * hairline and a tinted fill, sized to their content, so a row of four
 * capabilities read as a row of four buttons that could be pressed - and two
 * of the labels wrapped while the others did not, which made one row look like
 * two different rows.
 *
 * Now they are one rail under the call to action: a rule across the top, a
 * lit tick per capability, and four equal columns. Same four labels, same four
 * icons, no box and no divider.
 */
.dk-caps.hero-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.25rem;
  border-top: 1px solid var(--dk-rule);
}

.dk-cap {
  position: relative;
  /* No divider between the columns: the tick above each label already says
     where one capability ends and the next begins, and the rule was landing a
     few pixels off the end of "Navigation & leveling" - close enough to read as
     a collision rather than a column. The gap does the separating. */
  padding: 1rem 1.75rem 1.1rem 0;
}

.dk-cap:last-of-type { padding-right: 0; }

/* The tick: a short lit segment of the top rule, per capability. It is what
   ties this rail to the rules and ledgers further down the page. */
.dk-cap::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--dk-accent);
}

/* The icon sits above the label rather than beside it. Beside it, the label
   had about 127px to work in and three of the four wrapped to two lines while
   the fourth did not - the same ragged row the boxes produced. Above it, each
   label has the whole column and all four sit on one line. */
.dk-cap-icon {
  display: flex;
  margin-bottom: .6rem;
  color: var(--dk-accent);
}

.dk-cap-icon svg {
  width: 18px;
  height: 18px;
}

.dk-cap-label {
  display: block;
  /* Two lines are reserved: at the narrowest desktop the column is half this
     width and every label wraps, and the row has to stay level when it does. */
  min-height: 2.5em;
  font-size: .9rem;
  letter-spacing: -0.004em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dk-ink);
  /* The rail sits on a photograph. */
  text-shadow: 0 1px 3px rgba(20, 24, 31, .8);
}

/* Between phone and desktop the hero is a single column, so the rail has the
   full width and the four columns hold. Below 1024px the label has room again
   and can sit on one line. */
/* Below 1024px the hero is one column, the rail has the full width, no label
   wraps and the reserved second line would be dead space.
   Above it, "Navigation & leveling" wraps at every desktop width the columns
   actually take - fitting it on one line needs the gap between labels down to
   about 17px, which reads as crowding now that there is no rule in that gap.
   So the wrap stays and the reserve stays with it, and the four columns are
   level whichever of them happens to need two lines. */
@media (min-width: 768px) and (max-width: 1023px) {
  .dk-cap-label { min-height: 0; }
}

/* --- The state ledger ---------------------------------------------------- *
 * Twenty-four cards, each with an icon, a coloured state pill, a bold title
 * and a paragraph, in a three-column grid of equal rounded boxes. Every card
 * was the same weight as every other, so the section said "twenty-four
 * features" and nothing about which of them exist.
 *
 * The page's own promise is that the four states are labelled clearly, so the
 * state becomes the structure: four groups, in order of how true they are,
 * each with a count. Inside a group the rows are a ledger - hairline, icon,
 * title column, description - because a list of things that share a state is a
 * list, not twenty-four separate objects.
 *
 * Colour is unchanged: the .st-* states already carry it, and the group label
 * takes the same colour so a group can be identified without reading it.
 */
.dk-ledger { margin-top: 2.5rem; }

.dk-group + .dk-group { margin-top: 3.25rem; }

.dk-group-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--dk-rule);
}

.dk-group-label {
  font-family: var(--dk-mono);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.dk-group-count {
  font-family: var(--dk-mono);
  font-weight: 500;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--dk-dim);
}

.dk-group[data-state="working"] .dk-group-label { color: var(--dk-positive); }
.dk-group[data-state="testing"] .dk-group-label { color: var(--dk-accent); }
.dk-group[data-state="dev"]     .dk-group-label { color: var(--dk-muted); }
.dk-group[data-state="planned"] .dk-group-label { color: var(--dk-dim); }

.dk-rows { list-style: none; margin: 0; padding: 0; }

.dk-row {
  display: grid;
  grid-template-columns: 1.5rem 14rem minmax(0, 1fr);
  align-items: start;
  gap: 1.4rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--dk-hair);
}

.dk-row-icon { color: var(--dk-accent); }
.dk-row-icon svg { width: 20px; height: 20px; }

/* Planned and in-development rows keep their icon, but it stops claiming the
   accent - the same restraint the state pills already show. */
.dk-group[data-state="dev"] .dk-row-icon,
.dk-group[data-state="planned"] .dk-row-icon { color: var(--dk-dim); }

.dk-row h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--dk-ink);
}

.dk-row p {
  margin: 0;
  /* The grid gives this column everything left of 80rem, which at this size is
     about 150 characters a line. Capped to a measure that can be read. */
  max-width: 68ch;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--dk-muted);
}

@media (max-width: 900px) {
  .dk-row {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: .4rem 1rem;
    padding: 1.05rem 0;
  }
  .dk-row h3 { grid-column: 2; }
  .dk-row p { grid-column: 2; margin-top: .45rem; }
}

/* --- The phase rail ------------------------------------------------------ *
 * Five equal cards for five phases, which is the one place numbering is
 * honest - it is a real sequence - and the one place the layout refused to
 * show it. Nothing in five side-by-side boxes says phase three follows phase
 * two, or which one the work is in now.
 *
 * A rail does both: one line through all five, a marker per phase, and the
 * current phase marked once. The line is the sequence, so the cards can go.
 */
.dk-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 3rem;
}

/* The track sits behind the markers, at their centre height.
   Lit from the start to the phase the work is in and hairline after it, so the
   line itself says how far this has got. Phase centres fall at 10/30/50/70/90%
   of the width; the work is in phase two. */
.dk-rail::before {
  content: "";
  position: absolute;
  top: 6.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(85, 217, 155, .55) 0%, rgba(85, 217, 155, .55) 10%,
    rgba(41, 188, 229, .55) 30%,
    rgba(255, 255, 255, .09) 30.1%, rgba(255, 255, 255, .09) 100%);
}

.dk-phase { padding-right: 1.75rem; }

.dk-phase-mark {
  position: relative;
  z-index: 1;
  /* Pixels rather than rem: the track is a 1px line that has to pass through
     the middle of these, and a fractional centre puts it half a pixel off. */
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--dk-dim);
  background: var(--dk-bg);
}

.dk-phase[data-state="working"] .dk-phase-mark {
  border-color: var(--dk-positive);
  background: var(--dk-positive);
}

.dk-phase[data-state="testing"] .dk-phase-mark {
  border-color: var(--dk-accent);
  background: var(--dk-accent);
}

/* The one phase the work is in. A ring rather than a brighter colour, so the
   state colour still means what it means everywhere else on the page. */
.dk-phase[data-current] .dk-phase-mark {
  box-shadow: 0 0 0 5px rgba(41, 188, 229, .16);
}

.dk-phase-no {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--dk-mono);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--dk-dim);
}

.dk-phase[data-current] .dk-phase-no { color: var(--dk-accent); }

.dk-phase h3 {
  margin: .55rem 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.dk-phase-state {
  margin-top: .5rem;
  font-family: var(--dk-mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dk-phase-items {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.dk-phase-items li {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--dk-muted);
  padding: .2rem 0;
}

.dk-phase[data-state="planned"] .dk-phase-items li { color: var(--dk-dim); }

@media (max-width: 900px) {
  /* Vertical, with the track down the left. The sequence is the reason this
     section exists, so it survives the breakpoint rather than becoming five
     stacked blocks. */
  .dk-rail {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 1.6rem;
  }
  .dk-rail::before {
    top: 6.5px;
    bottom: 6.5px;
    left: 6.5px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(85, 217, 155, .55) 0%, rgba(85, 217, 155, .55) 10%,
      rgba(41, 188, 229, .55) 30%,
      rgba(255, 255, 255, .09) 30.1%, rgba(255, 255, 255, .09) 100%);
  }
  .dk-phase { padding: 0 0 2.25rem; }
  .dk-phase-mark { position: absolute; left: 0; margin-top: .1rem; }
  .dk-phase-no { margin-top: 0; }
}

/* --- The firmware log ---------------------------------------------------- *
 * Eighteen update cards in two columns, each one a rounded box with a
 * revision, a state pill, a title, a paragraph and three tag pills. The tags
 * were pills the size of buttons that did nothing, and the revision - the only
 * thing that orders this section - was grey text in a corner.
 *
 * A log puts the revision in its own column and lets the rows share one set of
 * rules. Every entry on this page is work that shipped, so the state pill on
 * each row was saying the same word eighteen times; the revision carries it.
 */
.dk-log {
  margin-top: 2.5rem;
  border-top: 1px solid var(--dk-rule);
}

.dk-log-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 2rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--dk-hair);
}

.dk-log-rev {
  font-family: var(--dk-mono);
  font-weight: 600;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--dk-accent);
}

/* Not every entry is a release. The ones that name an area of work rather than
   a version drop the accent, because a version is a fact and an area is a
   heading. */
.dk-log-rev[data-kind="area"] {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dk-muted);
}

/* The unit was printed in full under every one of the eighteen rows. Two
   letters in front of the number say the same thing once. */
.dk-log-rev i {
  font-style: normal;
  font-weight: 500;
  color: var(--dk-dim);
}

.dk-log-row h3 {
  margin: 0;
  max-width: 44ch;
  font-size: 1.15rem;
  line-height: 1.3;
}

.dk-log-row p {
  margin: .6rem 0 0;
  max-width: 70ch;
  line-height: 1.7;
  color: var(--dk-muted);
}

.dk-log-tags {
  margin-top: .9rem;
  font-family: var(--dk-mono);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dk-dim);
}

@media (max-width: 900px) {
  .dk-log-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
    padding: 1.5rem 0;
  }
}

/* The disclosure that holds the older fourteen entries ------------------- *
 * It used to sit under a grid of cards, where a 1rem gap was enough because
 * the card above it had its own border. Under a log it sits between two
 * hairlines, and 1rem put the button's top edge within a few pixels of the
 * rule above it - closed it looked stuck to the last entry, open it looked
 * wedged between two. A control that opens fourteen more entries is a break in
 * the list and needs to read as one.
 *
 * Above: the same distance the log puts between an entry and the next rule.
 * Below, when open: a little more, so the reopened list starts cleanly rather
 * than appearing to belong to the button. */
.dk-log + .updates-more { margin-top: 1.75rem; }
.updates-more[open] > summary { margin-bottom: 1.5rem; }
.updates-more .dk-log { margin-top: 0; }

/* --- Section headers, in two columns ------------------------------------- *
 * Eleven of these sections open the same way: legend, headline, then an
 * intro paragraph under it, all inside the left two-thirds of an 80rem
 * column with the right third empty. Stacked eleven times it is what makes
 * the page read as a pile of identical slabs.
 *
 * Where a section has both a headline and an intro, they sit side by side and
 * share one baseline: the headline gets its own column and can be large, the
 * intro gets a readable measure, and the empty third disappears. Sections with
 * no intro keep the single column - there is nothing to put beside them.
 */
@media (min-width: 1024px) {
  .dk-hdr-split {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    column-gap: 4rem;
    align-items: end;
  }
  .dk-hdr-split > div:first-child { grid-column: 1 / -1; }
  .dk-hdr-split > h2 { margin: 0; }
  .dk-hdr-split > p {
    /* Sits on the headline's last baseline rather than at the top of the
       column, which is what makes the pair read as one header. */
    margin: 0 0 .45rem;
    max-width: 46ch;
    font-size: 1.05rem;
  }
}

/* --- The three generations ----------------------------------------------- *
 * V1, V2 and V3 were three rounded cards in a row, which said they were three
 * comparable products. They are one product at three ages, and only one of
 * them is on the vehicle.
 *
 * One block, divided: vertical rules rather than borders, the state label
 * carrying the state colour, and no box around anything. Nothing here claims
 * more than the label under it does.
 */
.dk-gens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.75rem;
  border-top: 1px solid var(--dk-rule);
}

.dk-gen {
  padding: 1.6rem 2rem 0 0;
  border-right: 1px solid var(--dk-hair);
}

.dk-gen:last-child { border-right: 0; }
.dk-gen:not(:first-child) { padding-left: 2rem; }

.dk-gen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dk-gen-label {
  font-family: var(--dk-mono);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dk-dim);
}

/* The one generation that is on the vehicle today. */
.dk-gen[data-state="working"] .dk-gen-label { color: var(--dk-positive); }

.dk-gen-head svg { width: 20px; height: 20px; color: var(--dk-dim); }
.dk-gen[data-state="working"] .dk-gen-head svg { color: var(--dk-positive); }

.dk-gen h3 {
  margin: 1.1rem 0 0;
  font-size: 1.35rem;
}

.dk-gen p {
  margin: .7rem 0 0;
  max-width: 38ch;
  line-height: 1.65;
  color: var(--dk-muted);
}

@media (max-width: 860px) {
  .dk-gens { grid-template-columns: minmax(0, 1fr); }
  .dk-gen {
    padding: 1.5rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--dk-hair);
  }
  .dk-gen:not(:first-child) { padding-left: 0; }
  .dk-gen:last-child { border-bottom: 0; }
}

/* --- Keyboard focus on the new controls ---------------------------------- *
 * The existing focus rule targets the elements that were on the page. These
 * are new, and a page that cares about being usable in a vehicle should not
 * lose its focus ring in a redesign.
 */
.dk-log a:focus-visible,
.dk-row a:focus-visible {
  outline: 2px solid var(--dk-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Checklists ---------------------------------------------------------- *
 * Two of these lists were grids of rounded bordered boxes, one box per short
 * phrase - fourteen of them in one section, eight in another. A box that size
 * around two words is furniture, and it made a list of capabilities read as a
 * set of buttons that could be pressed.
 *
 * Same content, list vocabulary: a rule between rows, the check kept because
 * it is what makes these read as "already there", and nothing else.
 */
.dk-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dk-rule);
}

.dk-checks-single { grid-template-columns: minmax(0, 1fr); }

.dk-checks li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--dk-hair);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dk-ink);
}

.dk-checks svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--dk-accent);
}

@media (max-width: 720px) {
  .dk-checks { grid-template-columns: minmax(0, 1fr); }
}

/* --- The screen showcase, aligned ---------------------------------------- *
 * The header was capped at 46rem inside a 1150px section, so the right third
 * of it was empty while the tab row underneath was centred on the full width.
 * Nothing lined up with anything. The header takes the same two-column
 * treatment as the rest of the page and the tabs start where the headline
 * starts.
 */
@media (min-width: 1024px) {
  .sc-head {
    max-width: none;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    column-gap: 4rem;
    align-items: end;
  }
  .sc-head .sc-kicker { grid-column: 1 / -1; }
  .sc-head h2 { margin: 0; }
  .sc-head p { margin: 0 0 .45rem; max-width: 46ch; }
  .sc-tabs { justify-content: flex-start; }
}

/* --- Dakila Live, without the boxes -------------------------------------- *
 * This section is a diagram: three nodes, and what is allowed to travel each
 * way between them. It was drawn as five rounded panels, which by this point
 * in the page is the one place still speaking the old vocabulary - and a box
 * around a node is not what makes it a node. The arrows already carry the
 * meaning, so the panels can go.
 *
 * The permission lists keep their distinction, moved from a filled background
 * to a rule down the left: accent where a command may travel over the
 * internet, neutral where it may not.
 */
.live-node {
  border: 0;
  border-top: 1px solid var(--dk-rule);
  border-radius: 0;
  background: none;
  padding: 1.1rem 1.5rem 0 0;
  text-align: left;
}

.live-node-title { font-size: 1.1rem; }
.live-node p { max-width: 30ch; }

/* The node the vehicle is, marked once - it is the only one of the three that
   is hardware, and the only one the reader owns. */
.live-flow > .live-node:first-child { border-top-color: rgba(41, 188, 229, .5); }

.live-arrow {
  font-family: var(--dk-mono);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .16em;
}

.live-flow-note {
  text-align: left;
  font-family: var(--dk-mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--dk-dim);
}

.live-allowed,
.live-denied {
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, .12);
  border-radius: 0;
  background: none;
  padding: .2rem 0 .2rem 1.4rem;
}

.live-allowed { border-left-color: var(--dk-accent); }

.live-allowed h3,
.live-denied h3 { font-size: 1.05rem; }

.live-allowed ul,
.live-denied ul { padding-left: 0; }

.live-allowed li,
.live-denied li { line-height: 1.7; }

/* Centring three nodes of different heights put their titles on three
   different lines and their rules at three different distances from the text.
   Aligned to the top, the rules read as one bus. */
@media (min-width: 900px) {
  .live-flow { align-items: start; }
  .live-arrows { padding-top: 1.1rem; }
}

/* Each permission rule stops at its own last item rather than being stretched
   to the height of the taller column. */
.live-boundary { align-items: start; }


/* --- The hero, on a phone ------------------------------------------------ *
 * Two things the display face and the new strip broke, both of them decisions
 * this page had already made deliberately.
 *
 * The rail is desktop furniture, as the chips were: on a phone four columns in
 * 390px collide, and the call to action has to stay on the first screen. The
 * rule that hid the chips is a single class and this one is two, so it has to
 * be said again here.
 *
 * And the headline was tuned to three lines at 390px in the system face. Set
 * wide, Archivo takes four. The width axis comes back to normal on a phone,
 * where there is no room to spend on it and no other display type beside it to
 * be consistent with.
 */
@media (max-width: 767px) {
  .dk-caps.hero-chips { display: none; }

  h1.hero-title {
    font-variation-settings: "wdth" 98;
    font-size: clamp(38px, 10.8vw, 54px);
  }
}