@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; }
.main-nav { display: flex; gap: 2.2rem; margin-left: auto; font-size: .9375rem; font-weight: 550; }
.main-nav a { position: relative; padding: .65rem 0; color: #c4c9cd; 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); }
.hero-media { position:relative; height:clamp(320px,34vw,540px); background:#211b16; }
.hero-media picture, .hero-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 61%; }
.hero-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0c0e10 0%,#0c0e1070 6%,transparent 22%,transparent 67%,#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; }
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; }
}
@media (max-width: 760px) {
  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); }
}
@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; }
}
@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; }
.lineup-aston, .lineup-mclaren { padding:1.6rem 1.7rem; }
.lineup-aston { background:linear-gradient(120deg,#142020,#0d1114 80%); }
.lineup-mclaren { background:linear-gradient(120deg,#261b16,#0d1114 80%); }
.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-tcu-preview { margin-top:1rem; }
@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-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-brand h3 { font-size:1.3rem; }
 .lineup-compact-module { flex-direction:column; align-items:flex-start; }
 .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; }
}
@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: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); }
 .hero-media { height:auto; aspect-ratio:16 / 9; }
 .hero-media img { object-position:center; }
 .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:16 / 9; }
 .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%; }
}