@font-face {
  font-family: "Russo One";
  src: url("/fonts/strata/russo-one-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/strata/manrope-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #0c0e10;
  --surface: #15181b;
  --text: #f4f5f5;
  --muted: #a7adb4;
  --orange: #ff6428;
  --line: #30353b;
  --brand: "Russo One", "Arial Black", sans-serif;
  --body: "Manrope", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; color: var(--text); background: var(--ink); font: 1rem/1.7 var(--body); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
::selection { background: var(--orange); color: var(--ink); }
[hidden] { display: none !important; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
.shell { width: min(calc(100% - 6rem), 1280px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -8rem; left: 1rem; padding: .75rem 1rem; background: var(--orange); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; background: #0c0e10ed; border-bottom: 1px solid #ffffff13; backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; min-height: 88px; gap: 3rem; }
.wordmark { width: 205px; flex: none; }
/* Links never break mid-label; if a row is ever too narrow, a whole link moves down instead of overflowing. */
.main-nav { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-left: auto; font-size: .9375rem; font-weight: 550; }
.main-nav a { position: relative; padding: .65rem 0; color: #c4c9cd; white-space: nowrap; transition: color .2s; }
.main-nav a::after { content: ""; position: absolute; height: 2px; bottom: .15rem; left: 0; right: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.main-nav a:focus-visible::after { transform: scaleX(1); }
.header-signin { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.65rem; min-width: 155px; min-height: 47px; padding: .7rem 1.1rem; color: #111; background: var(--orange); font-weight: 750; font-size: .9375rem; border-radius: 3px; transition: background .2s, box-shadow .2s; }
.button-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; font-size: 1.3rem; flex: none; }
.button-label { white-space: nowrap; }
.hero { position:relative; overflow:hidden; background:var(--ink); }
.hero-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:center; gap:3rem; padding-block:4.7rem 3.5rem; }
.eyebrow, .overline { font:500 .8125rem/1.7 var(--body); letter-spacing:.1em; color:var(--orange); margin:0 0 1.5rem; text-transform:uppercase; }
.brand-dash { display:inline-block; width:25px; height:4px; margin-right:.55rem; vertical-align:middle; background:var(--orange); transform:skewX(-28deg); }
h1 { font:400 clamp(2.5rem,4.3vw,4.65rem)/1.17 var(--brand); text-transform:uppercase; letter-spacing:-.02em; margin:0; }
.headline-line { display:block; width:max-content; max-width:100%; }
h1 em { font-style:normal; color:var(--orange); margin-left:clamp(1rem,2.5vw,2.7rem); }
.hero-copy { max-width:365px; justify-self:end; padding-top:2.3rem; }
.hero-copy p { color:#b6bdc4; font-size:1rem; line-height:1.8; margin-bottom:1rem; }
.hero-copy .hero-intro { color:#e6eaed; font-size:1.0625rem; line-height:1.7; margin-bottom:.65rem; }
.platform-note { display:block; margin-top:1.15rem; font-size:.875rem; color:#929ca5; }
.platform-note span { margin:0 .45rem; color:var(--orange); }
/* The picture's height follows the width up to 960px, so every desktop width shows the same framing: from the sunset
   (24% of the four-car picture) to a short stretch of road below the wheels (74%). The earlier 540px cap cropped it to a
   strip around the cars above about 1590px. The bottom shade starts below the wheels so it never dims the cars. */
.hero-media { position:relative; height:clamp(320px,28.5vw,960px); background:#211b16; }
.hero-media picture, .hero-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.hero-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0c0e10 0%,#0c0e1070 6%,transparent 22%,transparent 80%,#0c0e1099 100%); }
.hero-baseline { position:absolute; z-index:1; bottom:1.5rem; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#d2d8dd; font-size:.75rem; letter-spacing:.1em; }
.hero-baseline > span:last-child { font-size:.875rem; letter-spacing:.12em; }
.hero-baseline i { color:var(--orange); font-style:normal; margin:0 .7rem; }
.section { padding-block: 6rem; }
.section-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: end; margin-bottom: 3.2rem; }
h2 { font: 400 clamp(2rem, 3.05vw, 3rem)/1.2 var(--brand); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 0; }
.text-offset { display: inline-block; margin-left: clamp(1rem, 3vw, 3rem); color: var(--muted); }
.section-lead { color: #b6bcc2; font-size: 1.0625rem; line-height: 1.85; margin: 0 0 .35rem; max-width: 460px; }
.modules-section { background: #14171a; border-block: 1px solid #2a2f34; }
.setup-section { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; padding-block: 5rem; }
.setup-heading h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.setup-steps { list-style: none; padding: 0; margin: 0; }
.setup-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.setup-steps li:first-child { padding-top: 0; }
.setup-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.step-index { font: 400 .875rem/1.7 var(--brand); color: var(--orange); padding-top: .13rem; }
.setup-steps h3 { font-size: 1.0625rem; font-weight: 650; margin-bottom: .4rem; }
.setup-steps p { color: var(--muted); font-size: .9375rem; line-height: 1.8; margin-bottom: 0; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 105px; }
.footer-inner img { width: 145px; }
.footer-inner > span { color: #929aa4; font-size: .8125rem; }
.footer-platform { text-transform: uppercase; letter-spacing: .07em; }
.navigation-status, .hero-loading { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; color: var(--text); background: #181b1ef5; border: 1px solid #ff642860; border-radius: 4px; font-size: .9375rem; }
.navigation-status { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30; pointer-events: none; box-shadow: 0 10px 35px #0005; animation: status-enter .2s ease-out both; }
.hero-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.strata-spinner { position: relative; display: inline-block; width: 1.4rem; height: 1.4rem; flex: none; color: var(--orange); }
.strata-spinner::before, .strata-spinner::after, .is-loading .button-icon::before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-top-color: transparent; border-left-color: transparent; border-radius: 50%; animation: strata-spin .75s linear infinite; }
.strata-spinner::after { inset: 5px; opacity: .55; animation-direction: reverse; animation-duration: 1.1s; }
.is-loading .button-icon { position: relative; font-size: 0; }
.landing-icon { display:inline-block; width:20px; height:20px; flex:none; vertical-align:middle; }
.button-icon .landing-icon { width:100%; height:100%; }
.is-loading .button-icon .landing-icon { visibility:hidden; }
main, .site-header, .site-footer { transition: opacity .2s ease-out, translate .25s cubic-bezier(.22,1,.36,1); }
.portal-is-opening main, .portal-is-opening .site-header, .portal-is-opening .site-footer { opacity: .76; translate: 0 -4px; }
@keyframes strata-spin { to { transform: rotate(360deg); } }
@keyframes status-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { color: #fff; }
  .main-nav a:hover::after { transform: scaleX(1); }
  .header-signin:hover { background: #ff7f49; box-shadow: 0 5px 24px #ff642826; }
}
@media (min-width: 1700px) {
}
@media (max-width: 1100px) {
  .shell { width: calc(100% - 4rem); }
  .header-inner { gap: 2.2rem; }
  .section { padding-block: 4.8rem; }
  .section-heading { gap: 2.5rem; }
  .setup-section { gap: 2.5rem; }
}
/* 761–900px: tighter header gaps. With five links the nav takes its own row here instead; see the five-link rules at
   the end of this file. The phone block below sets its own gaps at 760px and narrower. */
@media (max-width: 900px) {
  .header-inner { gap: 1.25rem; }
  .main-nav { gap: 1.25rem; }
}
@media (max-width: 760px) {
  #desktop-demo { display: none; }
  html { scroll-padding-top: 7.5rem; }
  .shell { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 76px; gap: 1rem; flex-wrap: wrap; padding-block: 1rem .8rem; }
  .wordmark { width: 157px; }
  .header-signin { margin-left: auto; min-width: 133px; min-height: 42px; padding: .6rem .8rem; gap: .7rem; font-size: .875rem; }
  .main-nav { order: 3; margin-left: 0; gap: 1.6rem; width: 100%; font-size: .875rem; }
  .main-nav a { padding: .1rem 0; }
  .main-nav a::after { bottom: -.3rem; }
  h1 em { margin-left: 1rem; }
  .eyebrow { font-size: .75rem; letter-spacing: .07em; }
  .brand-dash { width: 18px; margin-right: .3rem; }
  .section { padding-block: 3.6rem; }
  .section-heading { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.3rem; }
  h2 { font-size: clamp(1.7rem, 5.8vw, 2.3rem); }
  .section-lead { font-size: 1rem; max-width: 560px; }
  .feature, .feature:first-child, .feature:last-child { padding: 1.5rem 0; border-right: 0; border-top: 1px solid var(--line); }
  .setup-section { grid-template-columns: 1fr; gap: 2.2rem; padding-block: 3.6rem; }
  .setup-heading h2 { font-size: 1.8rem; }
  .footer-inner { flex-wrap: wrap; padding-block: 1.6rem; gap: 1.3rem; }
  .footer-inner img { width: 135px; }
  .footer-platform { display: none; }
  .navigation-status { right: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); }
}
/* Touch: 45px-tall nav links. The equal negative margin keeps the sticky header's height and the text position. */
@media (max-width: 760px) and (pointer: coarse) {
  .main-nav a { padding-block: calc(.1rem + 9px); margin-block: -9px; }
  .main-nav a::after { bottom: calc(9px - .3rem); }
}
/* Touch: the logo link is only as tall as the logo (21px at 140px wide, 23px at 157px, 30px at 205px). The same equal
   padding and negative margin make it a 44px+ target at every width without moving the logo or resizing the header. */
@media (pointer: coarse) {
  .wordmark { padding-block: 12px; margin-block: -12px; }
}
@media (max-width: 380px) {
  .shell { width: calc(100% - 2rem); }
  .wordmark { width: 140px; }
  .header-signin { min-width: 124px; padding-inline: .7rem; }
  .header-inner { column-gap: .5rem; }
  /* The five-link rules at the end of this file replace this gap. */
  .main-nav { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .portal-is-opening main, .portal-is-opening .site-header, .portal-is-opening .site-footer { opacity: 1; translate: none; }
}

/* Brand lineup: owner-defined availability, with the longer roadmap disclosed on demand. */
.lineup-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.8rem; }
.lineup-heading h2 { margin:0; }
.lineup-heading > p { color:var(--muted); font-size:1rem; line-height:1.8; margin:0 0 .25rem; }
.lineup-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:1.2rem; align-items:start; }
.lineup-brand { position:relative; border:1px solid #333c42; border-radius:12px; background:#0d1114; overflow:hidden; }
.lineup-mercedes { padding:2rem 2rem 0; border-top:2px solid #77c9a0; }
.lineup-brand-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1.6rem; border-bottom:1px solid #293238; }
.lineup-brand h3 { font:400 clamp(1.25rem,2vw,1.7rem)/1.3 var(--brand); letter-spacing:-.025em; margin:0; }
.lineup-status { display:inline-flex; align-items:center; gap:.5rem; font:600 .875rem/1.4 var(--body); white-space:nowrap; }
.lineup-status-live { color:#96e5b9; margin:0 0 1.3rem; }
.lineup-check { display:inline-grid; place-items:center; width:1.2rem; height:1.2rem; border:1px solid #558c6d; border-radius:50%; font-size:.8rem; }
.lineup-available { padding:1.7rem 0 1.9rem; }
.lineup-group h5, .lineup-compact-module > span:first-child { margin:0 0 .7rem; color:#a0aeb7; font:500 .875rem/1.5 var(--body); }
.lineup-modules { display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; padding:0; margin:0; }
.lineup-modules li { padding:.6rem .8rem; border:1px solid #36424b; border-radius:5px; background:#161d22; color:#dde4e9; font:600 .9375rem/1.35 var(--body); overflow-wrap:anywhere; }
.lineup-available .lineup-modules li { background:#14231d; color:#b3f0ce; border-color:#345341; }
.lineup-paired { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin-top:1.5rem; }
.lineup-roadmap { border-top:1px solid #303a42; }
.lineup-roadmap summary { min-height:4.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; cursor:pointer; color:#e2e8ec; font-size:1rem; font-weight:600; }
.lineup-roadmap summary::-webkit-details-marker { display:none; }
.lineup-roadmap summary:focus-visible { outline:2px solid var(--orange); outline-offset:5px; border-radius:3px; }
.lineup-roadmap-title { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1rem; }
.lineup-roadmap-title > span { font-size:.875rem; color:#96a3ad; font-weight:400; }
.lineup-disclosure { color:var(--orange); font-size:1.5rem; line-height:1; transition:transform .22s ease; }
.lineup-roadmap[open] .lineup-disclosure { transform:rotate(45deg); }
.lineup-roadmap-body { padding:.3rem 0 1.8rem; }
.lineup-roadmap[open] .lineup-roadmap-body { animation:lineup-enter .22s ease-out; }
@keyframes lineup-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.lineup-roadmap-body .lineup-group + .lineup-group { margin-top:1.5rem; }
.lineup-roadmap-body .lineup-modules li { font-size:.875rem; font-weight:500; padding:.5rem .65rem; }
.lineup-next { display:grid; gap:1.2rem; }
/* The right column fills the row so its last card ends level with the Mercedes card. When the right column is the
   taller one, the Mercedes card grows to match and keeps "Coming soon" at its foot. */
@media(min-width:761px) {
 .lineup-next { align-self:stretch; grid-template-rows:auto auto 1fr; }
 .lineup-mercedes { align-self:stretch; display:flex; flex-direction:column; }
 .lineup-mercedes .lineup-available { flex:1 0 auto; }
}
.lineup-lamborghini, .lineup-aston, .lineup-mclaren { padding:1.6rem 1.7rem; }
/* Aston Martin is live: the Mercedes card's green top line, over a glow in its own teal. */
.lineup-aston { border-top:2px solid #77c9a0; background:radial-gradient(130% 150% at 0% 0%, rgba(86,176,158,.17), transparent 58%), linear-gradient(120deg,#142020,#0d1114 80%); }
.lineup-mclaren { background:linear-gradient(120deg,#261b16,#0d1114 80%); }
/* Lamborghini is live: the Mercedes card's green top line, over a gold glow. */
.lineup-lamborghini { border-top:2px solid #77c9a0; background:radial-gradient(130% 150% at 0% 0%, rgba(214,162,62,.17), transparent 58%), linear-gradient(120deg,#1c1a10,#0d1114 78%); }
.lineup-compact-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.lineup-compact-header h3 { font-size:1.3rem; }
.lineup-status-soon { color:#b5bdc5; font-size:.8125rem; padding:.3rem .6rem; border:1px solid #4b5157; border-radius:20px; }
.lineup-vehicle { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:1.3rem; color:#edf1f4; margin:0 0 1.2rem; }
.lineup-compact-module { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem; }
.lineup-compact-module > span:first-child { margin:0; }
.lineup-compact-module + .lineup-compact-module { margin-top:1rem; }
/* Lamborghini and Aston Martin are live: the same "Available now" and green chips as the Mercedes card, where the other
   cards show their status. */
.lineup-lamborghini .lineup-compact-header .lineup-status-live, .lineup-aston .lineup-compact-header .lineup-status-live { margin:0; }
.lineup-lamborghini .lineup-modules li, .lineup-aston .lineup-modules li { background:#14231d; color:#b3f0ce; border-color:#345341; }
.lineup-access-note { margin:0 0 0 auto; color:#a0aeb7; font:500 .8125rem/1.5 var(--body); }
@media (hover:hover) and (pointer:fine) {
 .lineup-roadmap summary:hover { color:#ff966b; }
}
@media(max-width:1050px) {
 .lineup-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
 .lineup-mercedes { padding:1.5rem 1.5rem 0; }
 .lineup-lamborghini, .lineup-aston, .lineup-mclaren { padding:1.4rem; }
 .lineup-compact-header { align-items:flex-start; flex-direction:column; gap:.7rem; }
}
@media(max-width:760px) {
 .lineup-heading { align-items:flex-start; flex-direction:column; gap:1.3rem; margin-bottom:2rem; }
 .lineup-grid { grid-template-columns:1fr; }
 .lineup-next { grid-template-columns:1fr 1fr; }
 .lineup-lamborghini { grid-column:1 / -1; }
 .lineup-brand h3 { font-size:1.3rem; }
 .lineup-compact-module { flex-direction:column; align-items:flex-start; }
 .lineup-access-note { margin-left:0; }
 .lineup-desktop-break { display:none; }
}
@media(max-width:520px) {
 .lineup-next { grid-template-columns:1fr; }
 .lineup-compact-header { flex-direction:row; align-items:center; }
 .lineup-compact-module { flex-direction:row; align-items:center; }
 .lineup-mercedes { padding:1.25rem 1.25rem 0; }
 .lineup-paired { gap:1rem; }
 .lineup-compact-header h3 { font-size:1.15rem; }
 .lineup-modules li { font-size:.875rem; }
 .lineup-lamborghini .lineup-compact-header, .lineup-aston .lineup-compact-header { flex-wrap:wrap; row-gap:.7rem; }
 .lineup-modules .module-trigger { overflow-wrap:normal; }
}
@media(max-width:420px) { .lineup-paired { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .lineup-disclosure { transition:none; } }

/* Lead with tuner operations; show the vehicle-side workflow after the portal features. */
.overview-section .desktop-demo { margin:3.5rem 0 0; }

/* Reference composition: an open introduction, focused feature rows, and a clear closing action. */
.header-signin { background:transparent; color:#e6eaed; border:1px solid #3b4249; min-width:112px; gap:1.5rem; }
.header-signin .button-icon { color:var(--orange); }
.platform-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(3rem,8vw,8rem); }
.platform-intro h2 { margin:0 0 1.6rem; }
.platform-intro > p:last-child { max-width:420px; color:var(--muted); font-size:1rem; line-height:1.9; margin:0; }
.platform-features { padding-top:.2rem; }
.platform-feature { display:grid; grid-template-columns:24px minmax(0,1fr); gap:1.1rem; padding:1.7rem 0; border-top:1px solid var(--line); }
.platform-feature:last-child { border-bottom:1px solid var(--line); }
.platform-feature-index { color:var(--orange); font-size:.75rem; padding-top:.25rem; }
.platform-feature h3 { margin:0 0 .7rem; font-size:1.2rem; font-weight:650; letter-spacing:-.025em; }
.platform-feature p { color:var(--muted); font-size:1rem; line-height:1.85; margin:0 0 1rem; }
.platform-feature-note { color:#909aa3; font-size:.75rem; letter-spacing:.09em; }
.lineup-heading > p { max-width:440px; }
.setup-section { grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); gap:4rem; padding-block:5.5rem; }
.setup-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; }
.setup-steps li, .setup-steps li:first-child, .setup-steps li:last-child { display:block; padding:1.25rem 0 0; border:0; border-top:1px solid var(--line); }
.setup-steps .step-index { display:block; padding:0; margin-bottom:1.4rem; color:var(--orange); }
.setup-steps h3 { margin-bottom:.75rem; }
.setup-heading h2 { font-size:clamp(1.75rem,2.6vw,2.5rem); }
.connection-banner { background:var(--orange); color:#111518; }
.connection-inner { display:flex; align-items:center; justify-content:space-between; gap:3rem; padding-block:3.5rem; }
.connection-banner .eyebrow { color:#4b261b; margin-bottom:1rem; font-size:.75rem; }
.connection-banner h2 { font-size:clamp(2rem,3vw,3rem); }
.connection-button { display:inline-flex; align-items:center; justify-content:space-between; gap:3rem; min-height:52px; padding:.85rem 1.2rem; background:#101417; color:#f4f5f5; border:1px solid #101417; border-radius:4px; font-size:.9375rem; font-weight:650; transition:background .2s,box-shadow .2s; }
@media(hover:hover) and (pointer:fine) { .header-signin:hover { background:#1a1e22; color:#fff; box-shadow:none; } .connection-button:hover { background:#262d33; box-shadow:0 7px 22px #70200540; } }
@media(max-width:1050px) {
 .hero-layout { gap:2rem; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
 .platform-story { gap:3rem; }
 .setup-section { grid-template-columns:1fr; gap:2.5rem; }
}
@media(max-width:760px) {
 .hero-layout { grid-template-columns:minmax(0,1fr); gap:1.6rem; padding-block:3rem 2.4rem; }
 .hero-copy { max-width:470px; justify-self:start; padding:0 0 0 1rem; border-left:2px solid var(--orange); }
 .hero h1 { font-size:clamp(1.9rem,6.4vw,3rem); }
 /* Phones: 2:1 from the top of the sky, so about a quarter less road shows than in the full 16:9 picture. */
 .hero-media { height:auto; aspect-ratio:2 / 1; }
 .hero-media img { object-position:center top; }
 .hero-baseline { font-size:.625rem; gap:.7rem; }
 .hero-baseline > span:last-child { font-size:.75rem; }
 .hero-baseline i { margin:0 .35rem; }
 .platform-story { grid-template-columns:1fr; gap:2rem; }
 .platform-intro > p:last-child { max-width:560px; }
 .connection-inner { padding-block:2.6rem; gap:2rem; flex-wrap:wrap; }
}
@media(max-width:520px) {
 .header-signin { min-width:108px; padding-inline:.8rem; }
 .hero h1 { font-size:clamp(1.65rem,7.1vw,2.3rem); }
 .hero .eyebrow { font-size:.7rem; letter-spacing:.07em; }
 .hero-media { height:auto; aspect-ratio:2 / 1; }
 .hero-baseline > span:first-child { max-width:125px; }
 .setup-steps { grid-template-columns:1fr; gap:1.8rem; }
 .setup-steps li, .setup-steps li:first-child, .setup-steps li:last-child { display:grid; grid-template-columns:24px minmax(0,1fr); gap:1rem; }
 .setup-steps .step-index { margin:0; padding-top:.1rem; }
 .connection-button { width:100%; }
}

/* Header with five links (Wi-Fi Flasher, 2026-10-21). These rules must stay after every other header rule in this file:
   they override the 1100/900/760/380px blocks above at equal specificity.
   At 761–900px the logo, five links and Sign in no longer share one row, so the links take their own row as on phones.
   Phones show "Flasher" (the full name stays for screen readers) and spread the five links across the row. */
@media (min-width: 901px) and (max-width: 1060px) {
  .header-inner { gap: 1.5rem; }
  .main-nav { gap: 1.5rem; }
}
@media (min-width: 761px) and (max-width: 900px) {
  html { scroll-padding-top: 8rem; }
  .header-inner { flex-wrap: wrap; row-gap: .35rem; min-height: 0; padding-block: 1.1rem .85rem; }
  .header-signin { margin-left: auto; }
  .main-nav { order: 3; width: 100%; margin-left: 0; gap: 2rem; }
  .main-nav a { padding-block: .3rem; }
}
@media (max-width: 480px) {
  .nav-label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .main-nav { justify-content: space-between; column-gap: .75rem; }
}
@media (max-width: 380px) {
  .main-nav { column-gap: .5rem; font-size: .8125rem; }
}
/* 320–340px: five links fill the row; a smaller size keeps them clearly apart. */
@media (max-width: 340px) {
  .main-nav { font-size: .75rem; }
}
/* Touch: keep the page's 45px nav targets in the new layouts. The equal negative margin keeps the header's height. */
@media (min-width: 761px) and (max-width: 900px) and (pointer: coarse) {
  .main-nav a { padding-block: calc(.3rem + 5px); margin-block: -5px; }
  .main-nav a::after { bottom: calc(.15rem + 5px); }
}
@media (max-width: 380px) and (pointer: coarse) {
  .main-nav a { padding-block: calc(.1rem + 10px); margin-block: -10px; }
  .main-nav a::after { bottom: calc(10px - .3rem); }
}