:root {
  --accent: #ff2d92;
  --accent-hot: #ff5aaa;
  --accent-deep: #b80d5c;
  --bg: #050507;
  --bg-2: #09090d;
  --surface: rgba(255, 255, 255, .055);
  --surface-strong: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .105);
  --line-strong: rgba(255, 255, 255, .2);
  --ink: #fff;
  --muted: rgba(255, 255, 255, .64);
  --faint: rgba(255, 255, 255, .4);
  --radius: 28px;
  --radius-lg: 42px;
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 45, 146, .08), transparent 27rem),
    radial-gradient(circle at 20% 52%, rgba(83, 54, 255, .07), transparent 34rem),
    var(--bg);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 30px; }
.narrow { max-width: 860px; }
.skip { position: fixed; z-index: 999; left: 14px; top: -80px; padding: 11px 18px; border-radius: 999px; background: #fff; color: #07070a; font-weight: 700; transition: top .2s; }
.skip:focus { top: 14px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Glass navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; padding-top: 14px; pointer-events: none; }
.nav-shell {
  pointer-events: auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 30px;
  width: calc(100% - 32px);
  padding: 9px 10px 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(10, 10, 13, .6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 60px rgba(0,0,0,.24);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.nav.scrolled .nav-shell { background: rgba(8, 8, 11, .82); border-color: rgba(255,255,255,.17); transform: translateY(-2px); }
.brand { display: flex; align-items: center; gap: 11px; font-size: 1rem; font-weight: 720; letter-spacing: -.025em; }
.brand img { border-radius: 10px; box-shadow: 0 8px 22px rgba(255,45,146,.28); }
.nav nav { display: flex; gap: 28px; margin-left: auto; }
.nav nav a { color: var(--muted); font-size: .88rem; font-weight: 550; transition: color .2s; }
.nav nav a:hover { color: #fff; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .86rem; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.nav-cta span { color: var(--accent-hot); }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; isolation: isolate; overflow: hidden; padding: 136px 0 100px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: url("/assets/hero-bg.jpg") center / cover no-repeat; opacity: .38; filter: saturate(.85) contrast(1.08); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,5,7,.96) 0%, rgba(5,5,7,.76) 44%, rgba(5,5,7,.34) 78%, rgba(5,5,7,.76) 100%), linear-gradient(180deg, rgba(5,5,7,.2), rgba(5,5,7,.15) 55%, #050507 100%); }
.hero-aurora { position: absolute; z-index: -1; width: 680px; height: 680px; right: -120px; top: 7%; border-radius: 50%; background: radial-gradient(circle, rgba(255,45,146,.2), rgba(125,63,255,.07) 42%, transparent 67%); filter: blur(6px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: clamp(28px, 3.2vw, 48px); }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: rgba(255,255,255,.54); font-size: .73rem; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
h1 { margin: 0; max-width: 780px; font-size: clamp(3.25rem, 5.4vw, 5.75rem); line-height: .94; letter-spacing: -.065em; font-weight: 760; text-wrap: balance; }
h1 em { display: inline-block; padding-bottom: .08em; margin-bottom: -.08em; white-space: nowrap; font-style: normal; line-height: 1.08; color: transparent; background: linear-gradient(100deg, #fff 10%, #ff8bc3 48%, #ff2d92 88%); background-clip: text; -webkit-background-clip: text; }
.lede { max-width: 36rem; margin: 30px 0 34px; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.58; letter-spacing: -.015em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: .94rem; font-weight: 680; letter-spacing: -.015em; transition: transform .25s var(--ease), filter .25s var(--ease), background .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary { color: #fff; background: linear-gradient(135deg, #ff3f9e, #f41980 60%, #d90b69); box-shadow: 0 12px 40px rgba(255,45,146,.26), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-glass { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.btn-glass:hover { background: rgba(255,255,255,.11); }
.btn-lg { min-height: 58px; padding-inline: 28px; font-size: 1rem; }
.hero-trust { display: flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--faint); font-size: .76rem; }
.hero-trust strong { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.72); font-weight: 600; }
.hero-trust img { width: 18px; height: 18px; border-radius: 5px; }
.hero-trust i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.28); }
.hero-art { position: relative; min-width: 0; min-height: 510px; display: grid; place-items: center; perspective: 1200px; }
.product-halo { position: absolute; inset: 14% 3% 3%; border-radius: 50%; background: radial-gradient(circle, rgba(255,45,146,.18), rgba(114,80,255,.08) 42%, transparent 68%); filter: blur(32px); }
.cp-shot { position: relative; z-index: 2; display: block; width: min(720px, 100%); transform: rotateY(-2deg) rotateX(1deg); transform-origin: 55% 55%; animation: productFloat 7s ease-in-out infinite; }
.cp-shot img { width: 100%; filter: drop-shadow(0 50px 70px rgba(0,0,0,.7)) drop-shadow(0 0 32px rgba(255,45,146,.08)); }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); color: var(--faint); font-size: .66rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.scroll-cue span { position: relative; width: 22px; height: 34px; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 99px; background: #fff; transform: translateX(-50%); animation: scrollDot 1.8s infinite; }
@keyframes productFloat { 0%,100% { transform: rotateY(-2deg) rotateX(1deg) translateY(0); } 50% { transform: rotateY(-1deg) rotateX(.5deg) translateY(-9px); } }
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%,0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,11px); } }

/* Proof strip */
.proof { position: relative; z-index: 3; border-block: 1px solid var(--line); background: rgba(255,255,255,.018); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid > div { min-height: 108px; display: flex; flex-direction: column; justify-content: center; padding: 22px 28px; border-left: 1px solid var(--line); }
.proof-grid > div:last-child { border-right: 1px solid var(--line); }
.proof-grid strong { font-size: .98rem; letter-spacing: -.02em; }
.proof-grid span { margin-top: 4px; color: var(--faint); font-size: .78rem; }

/* Shared sections */
.section { position: relative; padding: 140px 0; }
.section-head { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.sec-title { margin: 0; font-size: clamp(2.45rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.055em; font-weight: 720; }
.sec-title.left, .sec-sub.left { text-align: left; margin-inline: 0; }
.sec-sub { max-width: 640px; margin: 22px auto 0; color: var(--muted); font-size: 1.05rem; letter-spacing: -.01em; }

/* Device showcase */
.showcase { overflow: hidden; padding-top: 100px; }
.showcase::before { content: ""; position: absolute; inset: 8% 0 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,.012), transparent); }
.orb { position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(45px); opacity: .15; pointer-events: none; }
.orb-a { left: -220px; top: 23%; background: linear-gradient(135deg, var(--accent), #4f34ff); }
.showcase-grid { display: grid; grid-template-columns: minmax(420px, .86fr) minmax(0, 1.14fr); align-items: center; gap: 90px; }
.device-stage { position: relative; min-height: 750px; display: grid; place-items: center; }
.device-stage::before { content: ""; position: absolute; width: 82%; height: 82%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: radial-gradient(circle, rgba(255,45,146,.12), transparent 62%); filter: blur(.2px); }
.device-stage picture { position: relative; z-index: 1; display: block; width: min(550px, 100%); margin: -5% 0 -8%; }
.device-stage img { width: 100%; filter: drop-shadow(0 50px 65px rgba(0,0,0,.62)); }
.showcase-copy { max-width: 620px; }
.showcase-copy .sec-title { font-size: clamp(2.6rem, 4.7vw, 4.6rem); }
.feature-list { list-style: none; margin: 42px 0 0; padding: 0; border-top: 1px solid var(--line); }
.feature-list li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.feature-list > li > span { color: var(--accent-hot); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.feature-list strong { display: block; margin-bottom: 4px; font-size: 1rem; letter-spacing: -.02em; }
.feature-list p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Bento feature grid */
.features { isolation: isolate; }
.features::before { content: ""; position: absolute; z-index: -1; inset: 5% 0 15%; background: radial-gradient(circle at 70% 42%, rgba(255,45,146,.08), transparent 33rem); }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bento-card { position: relative; min-height: 390px; overflow: hidden; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 70px rgba(0,0,0,.17); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .35s var(--ease), border-color .35s var(--ease); }
.bento-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.2); }
.bento-wide { grid-column: span 2; min-height: 480px; }
.card-number { position: relative; z-index: 2; color: var(--faint); font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.bento-copy { position: relative; z-index: 3; max-width: 500px; margin-top: auto; }
.bento-copy h3 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.85rem); line-height: 1.03; letter-spacing: -.045em; }
.bento-copy p { max-width: 33rem; margin: 13px 0 0; color: var(--muted); font-size: .94rem; }
.mini-carplay { position: absolute; z-index: 1; width: min(700px, 63%); right: -5%; top: 4%; transform: rotate(-3deg); }
.mini-carplay img { filter: drop-shadow(0 32px 48px rgba(0,0,0,.55)); }
.bento-accent { background: radial-gradient(circle at 72% 14%, rgba(255,86,170,.22), transparent 44%), linear-gradient(145deg, rgba(255,45,146,.11), rgba(255,255,255,.025)); }
.lyric-stack { display: flex; flex-direction: column; gap: 10px; margin: 72px 0 40px; font-size: clamp(1.05rem, 2vw, 1.6rem); letter-spacing: -.035em; }
.lyric-stack span { color: rgba(255,255,255,.28); }
.lyric-stack strong { color: #fff; font-weight: 680; text-shadow: 0 0 24px rgba(255,45,146,.34); }
.search-pill { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 12px; margin: 84px 0 42px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.065); color: rgba(255,255,255,.75); font-size: .9rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 50px rgba(0,0,0,.22); }
.search-pill b { color: var(--accent-hot); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.privacy-mark { align-self: flex-start; margin: 84px 0 42px; padding: 14px 18px; border: 1px solid rgba(99,255,166,.22); border-radius: 999px; background: rgba(58,219,128,.08); color: #78f7ae; font-size: .72rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px rgba(58,219,128,.07); }
.bento-steps { min-height: 470px; scroll-margin-top: 100px; background: radial-gradient(circle at 82% 8%, rgba(255,45,146,.16), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); }
.bento-steps::after { content: ""; position: absolute; width: 420px; height: 420px; right: -190px; bottom: -260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 0 90px rgba(255,45,146,.08); pointer-events: none; }
.bento-steps .bento-copy { max-width: 690px; margin-top: 28px; }
.bento-steps .bento-copy p { max-width: 610px; }
.steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; margin: 48px 0 0; padding: 0; }
.steps li { position: relative; min-height: 185px; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 50px rgba(0,0,0,.16); transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.steps li:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.step-top > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,45,146,.34); border-radius: 50%; background: rgba(255,45,146,.11); color: var(--accent-hot); font-size: .72rem; font-weight: 760; box-shadow: 0 0 24px rgba(255,45,146,.1); }
.step-top small { padding: 6px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.045); color: var(--faint); font-size: .61rem; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; }
.steps strong { margin-top: 32px; font-size: 1.05rem; letter-spacing: -.025em; }
.steps p { margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }

/* Download */
.get { padding-top: 80px; }
.get-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 94px 32px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 45px 120px rgba(0,0,0,.34); }
.get-glow { position: absolute; width: 640px; height: 420px; left: 50%; top: -230px; transform: translateX(-50%); border-radius: 50%; background: rgba(255,45,146,.3); filter: blur(85px); opacity: .66; }
.get-panel > *:not(.get-glow) { position: relative; z-index: 1; }
.get-panel > img { border-radius: 22px; margin-bottom: 30px; box-shadow: 0 24px 54px rgba(255,45,146,.28); }
.get-panel .eyebrow { margin-bottom: 16px; }
.get-panel h2 { margin: 0; font-size: clamp(2.9rem, 6vw, 5.7rem); line-height: .96; letter-spacing: -.065em; }
.get-panel > p:not(.eyebrow) { max-width: 580px; margin: 24px 0 30px; color: var(--muted); font-size: 1.04rem; }
.get-panel small { margin-top: 18px; color: var(--faint); font-size: .72rem; }

/* FAQ */
.faq-section { padding-top: 100px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.035); transition: background .25s, border-color .25s; }
.faq details[open] { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.055); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 22px 58px 22px 24px; font-size: .98rem; font-weight: 630; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 23px; top: 50%; color: var(--faint); font-size: 1.35rem; font-weight: 350; transform: translateY(-52%); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-52%) rotate(45deg); }
.faq p { max-width: 690px; margin: -2px 58px 22px 24px; color: var(--muted); font-size: .9rem; }

/* Footer */
.foot { padding: 54px 0 42px; border-top: 1px solid var(--line); background: rgba(255,255,255,.012); }
.foot-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px 28px; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-weight: 700; letter-spacing: -.02em; }
.foot-brand img { border-radius: 9px; }
.foot nav { display: flex; gap: 24px; grid-column: 2; grid-row: 1; }
.foot nav a { color: var(--muted); font-size: .82rem; transition: color .2s; }
.foot nav a:hover { color: #fff; }
.copy { margin: 0 0 0 42px; color: var(--faint); font-size: .75rem; }
.legal { grid-column: 1 / -1; margin: 20px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: rgba(255,255,255,.28); font-size: .65rem; line-height: 1.6; }

/* Motion */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.bento .reveal:nth-child(2) { transition-delay: .08s; }
.bento .reveal:nth-child(3) { transition-delay: .12s; }
.bento .reveal:nth-child(4) { transition-delay: .16s; }

@media (max-width: 1050px) {
  .showcase-grid { gap: 45px; grid-template-columns: minmax(370px, .85fr) minmax(0, 1.15fr); }
  .device-stage { min-height: 650px; }
}

@media (max-width: 980px) {
  .hero { min-height: auto; padding: 138px 0 88px; }
  .hero::after { background: linear-gradient(180deg, rgba(5,5,7,.66), rgba(5,5,7,.76) 55%, #050507 100%); }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { max-width: 680px; margin-inline: auto; }
  .lede { margin-inline: auto; }
  .cta-row, .hero-trust { justify-content: center; }
  .hero-art { min-height: 420px; margin-top: 18px; }
  .cp-shot { width: min(720px, 100%); }
  .scroll-cue { display: none; }
}

@media (max-width: 860px) {
  .wrap { padding-inline: 22px; }
  .nav-shell { min-height: 58px; }
  .nav nav { display: none; }
  .nav-cta { margin-left: auto; }
  .hero { min-height: auto; padding: 138px 0 94px; }
  .hero::after { background: linear-gradient(180deg, rgba(5,5,7,.66), rgba(5,5,7,.76) 55%, #050507 100%); }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { max-width: 680px; margin-inline: auto; }
  .lede { margin-inline: auto; }
  .cta-row, .hero-trust { justify-content: center; }
  .hero-art { min-height: 430px; margin-top: 25px; }
  .cp-shot { width: min(720px, 108%); }
  .scroll-cue { display: none; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid > div:nth-child(3) { border-top: 1px solid var(--line); }
  .proof-grid > div:nth-child(4) { border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
  .section { padding: 100px 0; }
  .showcase-grid { grid-template-columns: 1fr; gap: 30px; }
  .device-stage { min-height: 610px; order: 2; }
  .device-stage picture { width: min(470px, 88%); }
  .showcase-copy { max-width: 680px; margin-inline: auto; }
  .mini-carplay { width: 74%; right: -12%; top: 8%; }

  /* The portrait lyric artwork needs its own row on smaller screens. */
  .bento-wide:first-child { min-height: auto; }
  .bento-wide:first-child .mini-carplay { position: relative; inset: auto; order: 1; width: min(390px, 100%); margin: 24px auto 0; transform: none; }
  .bento-wide:first-child .bento-copy { order: 2; margin-top: 24px; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 17px; }
  .nav { padding-top: 9px; }
  .nav-shell { width: calc(100% - 18px); padding-left: 9px; }
  .brand span { display: none; }
  .nav-cta { padding: 9px 14px; }
  .hero { padding-top: 118px; }
  h1 { font-size: clamp(2.75rem, 13vw, 3.65rem); letter-spacing: -.07em; }
  .lede { margin-top: 23px; font-size: 1rem; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }
  .hero-trust { flex-wrap: wrap; }
  .hero-art { min-height: 275px; margin-top: 20px; }
  .cp-shot { width: 100%; max-width: none; }
  .proof-grid > div { min-height: 94px; padding: 18px 15px; }
  .proof-grid strong { font-size: .89rem; }
  .proof-grid span { font-size: .71rem; }
  .section { padding: 80px 0; }
  .sec-title, .showcase-copy .sec-title { font-size: clamp(2.45rem, 12vw, 3.35rem); }
  .device-stage { min-height: 500px; }
  .device-stage picture { width: min(380px, 98%); }
  .feature-list { margin-top: 32px; }
  .feature-list li { grid-template-columns: 38px 1fr; gap: 10px; }
  .bento { grid-template-columns: 1fr; }
  .bento-wide { grid-column: auto; }
  .bento-card { min-height: 360px; padding: 24px; }
  .bento-wide:first-child { min-height: auto; }
  .mini-carplay { top: 12%; right: -21%; width: 108%; }
  .lyric-stack { margin-top: 68px; }
  .steps { grid-template-columns: 1fr; margin-top: 34px; }
  .steps li { min-height: 165px; }
  .bento-steps { min-height: auto; }
  .get-panel { padding: 70px 22px; border-radius: 28px; }
  .get-panel h2 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .btn-lg { width: 100%; }
  .faq summary { padding: 20px 50px 20px 19px; }
  .faq p { margin: -2px 22px 20px 19px; }
  .foot-inner { display: flex; flex-direction: column; align-items: flex-start; }
  .copy { margin-left: 0; }
  .foot nav { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}