/* carwhisperer.app, marketing pages (home, comparison). Legal pages keep common.css.
   Motion follows Emil Kowalski's rules: transform and opacity (plus clip-path) only, strong custom
   curves, never ease-in, reveals fire once, hover only where a mouse can hover, and a gentler
   variant for prefers-reduced-motion instead of none. */

@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/public-sans-latin-700-normal.woff2") format("woff2"); }

:root {
    --blue: #004EFF;        /* brand blue, the app icon */
    --blue-deep: #0036B8;
    --blue-night: #0A1F5C;
    --pulse: #FF9800;       /* the heartbeat line of the icon; decoration only, never text on white */
    --paper: #F4F7FC;
    --white: #FFFFFF;
    --ink: #0E1E3A;
    --steel: #4E5E7A;
    --line: #D6DFEE;
    --stage: #EAF0FF;       /* soft blue behind app screenshots */
    --display: "Montserrat", "Arial Black", system-ui, sans-serif;
    --text: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --measure: 64ch;
    --wrap: 1160px;
    --gutter: 20px;
    --radius-l: 28px;
    --radius-m: 20px;
    --card-shadow: 0 1px 2px rgba(14, 30, 58, 0.04), 0 14px 36px -14px rgba(14, 30, 58, 0.16);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* entering, pressing */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* moving on screen, drawing */
    interpolate-size: allow-keywords;                   /* lets the FAQ animate to its natural height */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--pulse); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; }
h1 { font-weight: 800; font-size: clamp(2.35rem, 8.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-weight: 800; font-size: clamp(1.95rem, 4.4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; }
h3 { font-weight: 700; font-size: 1.18rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: var(--measure); }
.lead { font-size: 1.15rem; line-height: 1.55; }
.muted { color: var(--steel); }
.small { font-size: 0.9rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
    font-family: var(--text); font-weight: 700; font-size: 0.78rem; line-height: 1;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--pulse); }
.eyebrow.on-dark { color: rgba(255, 255, 255, 0.86); }

/* ---------- header: a floating glass pill with the site navigation ----------
   Wide screens: the menu sits in the pill, a highlight glides from item to item, "Car noises" opens
   a small panel, the item of the chapter you are reading turns blue. Phones and small tablets: a
   menu button opens a panel with three groups; the pill steps aside while you scroll down and comes
   back as soon as you scroll up, like the toolbar in Safari. */
.site-head {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60; pointer-events: none;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    transition: transform 260ms var(--ease-out);
}
.site-head.head-hidden { transform: translateY(calc(-100% - 12px)); transition-duration: 220ms; }
.head-pill {
    pointer-events: auto; position: relative;
    max-width: calc(var(--wrap) - 16px); margin: 0 auto; min-height: 56px;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 6px 6px 12px; border-radius: 999px; color: var(--ink);
    background: rgba(255, 255, 255, 0.76);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 10px 30px -12px rgba(2, 10, 40, 0.28);
}
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.head-get { display: none; background: var(--blue); color: var(--white); font-weight: 700; font-size: 0.92rem; text-decoration: none; padding: 10px 18px; border-radius: 999px; white-space: nowrap; }

/* wide: the navigation in the pill */
.head-nav { display: none; position: relative; z-index: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; position: relative; z-index: 1; }
.nav-item {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 999px; background: none;
    font-family: var(--text); font-weight: 600; font-size: 0.92rem; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: color 200ms ease;
}
.nav-item[aria-current] { color: var(--blue); }
.nav-item svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-hl {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 999px; background: rgba(14, 30, 58, 0.07);
    opacity: 0; clip-path: inset(0 100% 0 0 round 999px);
    transition: clip-path 260ms var(--ease-out), opacity 160ms ease;
}
.nav-hl.on { opacity: 1; }
.nav-hl.jump { transition: opacity 160ms ease; }
.nav-group { position: relative; }
.nav-drop {
    position: absolute; top: calc(100% + 14px); left: 50%; width: 320px; padding: 8px;
    background: var(--white); border-radius: 22px; box-shadow: 0 24px 60px -20px rgba(2, 10, 40, 0.4), 0 0 0 1px rgba(14, 30, 58, 0.06);
    transform-origin: 50% 0; opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(0.97);
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms;
}
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* lets the pointer travel from the button to the panel */
.nav-group.open .nav-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
.nav-drop a {
    display: block; padding: 12px 14px; border-radius: 15px; color: var(--ink); text-decoration: none;
    opacity: 0; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease, background-color 150ms ease;
}
.nav-group.open .nav-drop a {
    opacity: 1; transform: none;
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background-color 150ms ease;
    transition-delay: calc(30ms + var(--i, 0) * 35ms), calc(30ms + var(--i, 0) * 35ms), 0ms;
}
.nav-drop b { display: block; font-family: var(--display); font-weight: 700; font-size: 0.98rem; }
.nav-drop span { display: block; margin-top: 2px; color: var(--steel); font-size: 0.86rem; }
.nav-drop a[aria-current="page"] b { color: var(--blue); }
.nav-drop a:active { background: var(--stage); }

/* phones and small tablets: the menu button and its panel */
.menu-btn { position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(14, 30, 58, 0.06); cursor: pointer; }
.menu-btn span { position: absolute; left: 13px; right: 13px; top: 21px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 220ms var(--ease-out); }
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-open .menu-btn span:first-child { transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: rotate(-45deg); }
.menu-panel {
    position: absolute; top: calc(100% + 8px); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    max-width: 520px; margin-left: auto; max-height: calc(100svh - 96px); overflow: auto; overscroll-behavior: contain;
    padding: 6px 8px 8px; background: var(--white); border-radius: 26px;
    box-shadow: 0 30px 70px -24px rgba(2, 10, 40, 0.5), 0 0 0 1px rgba(14, 30, 58, 0.06);
    transform-origin: calc(100% - 28px) 0; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97);
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
.menu-open .menu-panel { pointer-events: auto; opacity: 1; visibility: visible; transform: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s; }
.menu-group { padding: 4px 0 6px; opacity: 0; transform: translateY(8px); transition: opacity 120ms ease, transform 120ms ease; }
.menu-group + .menu-group { border-top: 1px solid var(--line); }
.menu-open .menu-group { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); transition-delay: calc(50ms + var(--g, 0) * 50ms); }
.menu-title { margin: 12px 12px 4px; font-family: var(--text); font-weight: 700; font-size: 0.72rem; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.menu-panel a { display: block; padding: 12px; border-radius: 14px; color: var(--ink); font-weight: 600; text-decoration: none; transition: background-color 150ms ease; }
.menu-panel a[aria-current="page"] { color: var(--blue); }
.menu-panel a:active { background: rgba(14, 30, 58, 0.06); }
.menu-panel a.menu-get { margin: 8px 4px 2px; text-align: center; background: var(--blue); color: var(--white); font-weight: 700; }
.menu-panel a.menu-get:active { background: var(--blue-deep); color: var(--white); }

@media (max-width: 359px) { .brand span { display: none; } }
@media (min-width: 1000px) {
    .site-head { view-transition-name: site-head; }
    .head-nav { display: block; }
    .head-get { display: inline-block; margin-left: 6px; }
    .menu-btn, .menu-panel { display: none; }
    .site-head.head-hidden { transform: none; }
}

/* ---------- hero: the one bold moment, the icon's pulse line running through ---------- */
.cover {
    position: relative; z-index: 0; overflow: hidden; color: var(--white);
    background:
        radial-gradient(90% 70% at 88% 0%, rgba(92, 145, 255, 0.55) 0%, rgba(92, 145, 255, 0) 62%),
        radial-gradient(70% 60% at 0% 100%, rgba(10, 31, 92, 0.55) 0%, rgba(10, 31, 92, 0) 70%),
        linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
}
.cover::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #020A24; opacity: 0; pointer-events: none; }
.hero { padding: 100px 0 0; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 28px; }
.hero h1 { color: var(--white); }
.h1-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.h1-line > span { display: block; text-wrap: balance; }
.hero .lead { color: rgba(255, 255, 255, 0.9); margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 30px 0 10px; }
.badge-link { display: inline-block; line-height: 0; border-radius: 10px; }
.badge-link img { height: 52px; width: auto; }
.hero-note { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; margin: 0; }
.hero-copy { position: relative; z-index: 2; }

.pulse { position: absolute; pointer-events: none; overflow: visible; }
.pulse path { fill: none; stroke: var(--pulse); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pulse .glow { stroke: rgba(255, 176, 64, 0.26); stroke-width: 12; }
.pulse.wide { display: none; left: calc(50% - 50vw); bottom: 84px; width: 100vw; height: 120px; z-index: 1; }
.pulse.narrow { top: -86px; left: 50%; width: 100vw; height: 100px; transform: translateX(-50%); z-index: 1; }

.hero-phone { position: relative; z-index: 2; justify-self: center; width: min(290px, 74vw); margin: 92px 0 -2px; }

/* device frame drawn in CSS around a real screenshot */
.device { position: relative; background: #0B1426; border-radius: 44px 44px 0 0; padding: 12px 12px 0; box-shadow: 0 30px 70px -10px rgba(4, 16, 60, 0.5); }
.device img { border-radius: 33px 33px 0 0; width: 100%; aspect-ratio: 660 / 1100; object-fit: cover; object-position: top; }
.device.whole { border-radius: 46px; padding: 11px; box-shadow: 0 30px 60px -20px rgba(14, 30, 58, 0.35), 0 0 0 1px rgba(14, 30, 58, 0.08); }
.device.whole img { border-radius: 35px; aspect-ratio: 660 / 1434; }

@media (min-width: 860px) {
    .hero { padding-top: 132px; min-height: min(calc(100svh - 8px), 960px); display: flex; }
    .hero-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
    .hero h1 { font-size: clamp(3rem, 4.5vw, 4.1rem); }
    .hero-copy { align-self: center; padding-bottom: 130px; }
    .hero-phone { width: clamp(300px, 26vw, 360px); justify-self: end; margin: 0 0 -2px; }
    .pulse.wide { display: block; }
    .pulse.narrow { display: none; }
}

/* ---------- the sheet: everything after the hero slides over it like an iOS sheet ---------- */
.sheet {
    position: relative; z-index: 1; margin-top: -36px; padding-bottom: clamp(12px, 2vw, 24px);
    background: var(--paper); border-radius: 36px 36px 0 0;
    box-shadow: 0 -18px 50px -10px rgba(2, 10, 40, 0.28);
}
.chapter { padding-top: clamp(76px, 10vw, 136px); }
.chapter-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.chapter-head .lead { margin-top: 18px; }

/* ---------- how it works: a numbered thread; on wide screens one phone follows the steps ---------- */
.story { position: relative; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: step; }
.steps::before, .steps::after { content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: var(--line); }
.steps::after { background: var(--blue); transform-origin: 50% 0; transform: scaleY(0); display: none; }
.step { counter-increment: step; position: relative; padding: 0 0 56px 68px; }
.step:last-child { padding-bottom: 0; }
.step-text { position: relative; max-width: 460px; }
.step-text::before {
    content: counter(step);
    position: absolute; left: -68px; top: -6px;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 800; font-size: 1.15rem;
    color: var(--white); background: var(--blue);
    box-shadow: 0 0 0 6px var(--paper);
}
.step h3 { font-size: 1.35rem; margin-bottom: 8px; }
.step p { margin: 0; color: var(--steel); font-size: 1.05rem; }
.step-shot { margin: 28px 0 0; width: min(250px, 64vw); }
.story-phone { display: none; }
.screens { position: relative; aspect-ratio: 660 / 1434; border-radius: 35px; overflow: hidden; background: var(--white); }
.screens .screen { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0s 420ms; }
.screens .screen.is-active { z-index: 2; opacity: 1; transition: opacity 420ms ease; }

@media (min-width: 960px) {
    .story { --phone-w: min(310px, calc((100vh - 180px) * 0.44)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 96px; }
    .step { min-height: 66vh; display: flex; align-items: center; padding-bottom: 0; }
    .step h3 { font-size: 1.6rem; }
    .step p { font-size: 1.12rem; }
    .step-shot { display: none; }
    .story-phone { display: block; position: sticky; top: calc(50vh - (var(--phone-w) * 2.173 + 22px) / 2 + 20px); align-self: start; width: var(--phone-w); margin-right: 40px; }
    .steps::before, .steps::after { top: 33vh; bottom: 33vh; }
    .js .story .step-text.in { transition: opacity 320ms ease, transform 900ms var(--ease-out); }
    .js .story .step:not(.is-active) .step-text.in { opacity: 0.3; }
}

/* ---------- bento: what you get before the repair ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: var(--white); border-radius: var(--radius-l); padding: 28px 28px 0;
    box-shadow: var(--card-shadow);
}
.tile:not(:has(.tile-shot)) { padding-bottom: 28px; }
.tile h3 { font-size: 1.3rem; margin-bottom: 8px; }
.tile p { color: var(--steel); margin: 0; }
.tile-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--stage); display: grid; place-items: center; margin-bottom: 18px; }
.tile-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile-shot {
    flex: 1; min-height: 250px; max-height: 300px; margin: 24px -28px 0; padding: 28px 28px 0;
    display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
    background: linear-gradient(180deg, var(--stage) 0%, #DDE8FF 100%);
}
.tile-shot img { width: min(100%, 330px); border-radius: 16px; box-shadow: 0 16px 34px -12px rgba(14, 30, 58, 0.3), 0 0 0 1px rgba(14, 30, 58, 0.05); background: var(--white); }
.tile-parts .tile-shot img, .tile-shops .tile-shot img { background: transparent; }

@media (min-width: 960px) {
    .bento {
        grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
        grid-template-areas: "parts parts report" "quote shops shops" "recall shops shops";
    }
    .tile-parts { grid-area: parts; }
    .tile-report { grid-area: report; }
    .tile-quote { grid-area: quote; }
    .tile-shops { grid-area: shops; }
    .tile-recall { grid-area: recall; }
    .tile { padding: 32px 32px 0; }
    .tile:not(:has(.tile-shot)) { padding-bottom: 32px; }
    .tile-wide { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px; min-height: 460px; padding: 0; }
    .tile-wide .tile-text { padding: 40px 12px 40px 40px; align-self: center; }
    .tile-wide .tile-shot { margin: 0; max-height: none; padding: 40px 36px 0; }
    .tile-wide .tile-shot img { width: min(100%, 360px); }
    .tile-report .tile-shot { max-height: none; margin: 24px -32px 0; padding: 32px 32px 0; }
    .tile-shops { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
    .tile-shops .tile-shot { order: -1; }
}

/* ---------- what it can't do: one calm card, row by row ---------- */
.limits { list-style: none; margin: 0; padding: 8px 24px; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--card-shadow); max-width: 900px; }
.limits li { position: relative; padding: 18px 0 18px 44px; }
.limits li + li { border-top: 1px solid var(--line); }
.limits li::before {
    content: ""; position: absolute; left: 0; top: 18px; width: 28px; height: 28px; border-radius: 50%;
    background: #EEF1F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M10 10l8 8M18 10l-8 8' stroke='%234E5E7A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.limits strong { display: block; font-weight: 700; }
.limits span { color: var(--steel); }
@media (min-width: 760px) {
    .limits { padding: 8px 36px; }
    .limits li { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; padding: 22px 0 22px 48px; }
    .limits li::before { top: 22px; }
}
.link-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 900px; margin-top: 16px; padding: 22px 28px; border-radius: var(--radius-m);
    background: var(--blue); color: var(--white); text-decoration: none;
    font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1.3;
}
.link-card small { display: block; font-family: var(--text); font-weight: 600; font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 2px; }
.link-card svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- prices ---------- */
.prices { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.prices li { position: relative; background: var(--white); border-radius: var(--radius-l); padding: 26px 28px; box-shadow: var(--card-shadow); display: grid; gap: 6px; }
.prices b { font-family: var(--display); font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prices em { font-style: normal; font-family: var(--text); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; color: #7A4100; background: #FFEFD6; padding: 5px 10px; border-radius: 999px; }
.prices .amount { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.03em; }
.prices .amount span { font-size: 1rem; letter-spacing: 0; color: var(--steel); font-weight: 700; }
.prices small { color: var(--steel); font-size: 0.92rem; }
.prices .trial { box-shadow: 0 0 0 2px var(--blue), var(--card-shadow); }
@media (min-width: 760px) { .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .prices li { padding: 32px; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; } }
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    cursor: pointer; list-style: none; padding: 20px 48px 20px 0; position: relative;
    font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 2.5px; margin-top: -1.25px;
    border-radius: 2px; background: var(--blue); transition: transform 220ms var(--ease-out);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details > div { padding: 0 0 20px; color: var(--steel); }
.faq details > div p:last-child { margin-bottom: 0; }
/* open and close: height + opacity, 220ms (a layout animation, so kept short) */
@supports selector(::details-content) {
    .faq details::details-content {
        block-size: 0; opacity: 0; overflow: clip;
        transition: block-size 220ms var(--ease-out), opacity 220ms var(--ease-out), content-visibility 220ms allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
        .faq details::details-content { transition: opacity 180ms ease, content-visibility 180ms allow-discrete; block-size: auto; }
    }
}
@supports not selector(::details-content) {
    @media (prefers-reduced-motion: no-preference) {
        .faq details[open] > div { animation: faq-open 220ms var(--ease-out); }
    }
}
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- closing call to action: a dark panel, the pulse draws once more ---------- */
.closer {
    position: relative; overflow: hidden; text-align: center; color: var(--white);
    max-width: calc(var(--wrap) + 40px);
    margin: clamp(88px, 11vw, 144px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    padding: clamp(64px, 9vw, 112px) 24px clamp(120px, 12vw, 150px);
    border-radius: 32px;
    background:
        radial-gradient(80% 90% at 85% 0%, rgba(0, 78, 255, 0.55) 0%, rgba(0, 78, 255, 0) 65%),
        var(--blue-night);
}
@media (min-width: 1204px) { .closer { margin-left: auto; margin-right: auto; } }
.closer-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.closer h2 { color: var(--white); }
.closer p { color: rgba(255, 255, 255, 0.84); margin: 16px auto 0; font-size: 1.1rem; }
.closer .hero-cta { justify-content: center; margin: 32px 0 0; }
.closer-pulse { left: 0; bottom: 30px; width: 100%; height: 90px; z-index: 0; }

/* ---------- comparison page ---------- */
.page-intro { padding: 112px 0 84px; }
.page-intro h1 { color: var(--white); font-size: clamp(2.1rem, 5.4vw, 3.6rem); max-width: 18ch; text-wrap: balance; }
.page-intro .lead { color: rgba(255, 255, 255, 0.9); margin-top: 20px; }
.page-intro .updated { color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; margin: 20px 0 0; }
.crumbs { font-size: 0.88rem; margin-bottom: 22px; color: rgba(255, 255, 255, 0.78); }
.crumbs a { color: rgba(255, 255, 255, 0.92); }

.table-card { background: var(--white); border-radius: var(--radius-l); box-shadow: var(--card-shadow); padding: 8px 8px 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.95rem; }
.compare caption { text-align: left; font-size: 0.9rem; color: var(--steel); padding-bottom: 10px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--display); font-weight: 800; font-size: 1rem; border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 700; width: 20%; color: var(--ink); }
.compare td { width: 26.6%; }
.compare .ours { background: var(--stage); }
.compare thead .ours { color: var(--blue-deep); border-radius: 14px 14px 0 0; }
.yes, .no { font-weight: 700; }
.no { color: var(--steel); }
.scroll-hint { font-size: 0.85rem; color: var(--steel); margin-top: 12px; }
@media (min-width: 900px) { .scroll-hint { display: none; } }

.situations { display: grid; gap: 0; max-width: 900px; margin: 0; padding: 8px 28px; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--card-shadow); }
.situations dt { font-family: var(--display); font-weight: 700; font-size: 1.08rem; padding-top: 20px; }
.situations dd { margin: 6px 0 0; padding-bottom: 20px; color: var(--steel); }
.situations dd + dt { border-top: 1px solid var(--line); }
.situations dd.stop { color: var(--ink); border-left: 4px solid var(--pulse); padding-left: 14px; }
.callout { border-radius: var(--radius-m); background: var(--stage); padding: 20px 24px; max-width: 900px; margin-top: 16px; }
.callout p:last-child { margin-bottom: 0; }

/* comparison table on phones: one card per question, the three answers labeled underneath */
@media (max-width: 719px) {
    .table-card { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
    .table-scroll { overflow: visible; }
    table.compare { min-width: 0; }
    .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
    .compare tr { background: var(--white); border-radius: var(--radius-m); margin-bottom: 14px; overflow: hidden; box-shadow: var(--card-shadow); }
    .compare tbody th { font-family: var(--display); font-size: 1.05rem; padding: 16px 18px 6px; border-bottom: 0; width: auto; }
    .compare td { padding: 8px 18px 12px; border-bottom: 0; }
    .compare td + td { border-top: 1px solid var(--line); }
    .compare td::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 700; color: var(--steel); margin-bottom: 2px; }
    .compare td.ours::before { color: var(--blue-deep); }
    .scroll-hint { display: none; }
}

/* ---------- car noise guides (/car-noises/) ---------- */
.byline { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; margin: 20px 0 0; max-width: 62ch; }

/* can I still drive: three levels, colour carries meaning together with the words, never alone */
.drive-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.drive-check li { background: var(--white); border-radius: var(--radius-l); padding: 24px 26px; box-shadow: var(--card-shadow); border-top: 6px solid #1E9E5A; }
.drive-check li.soon { border-top-color: #E0A100; }
.drive-check li.stop { border-top-color: #D93025; background: #FFF7F6; }
.drive-check b { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.12rem; margin-bottom: 8px; }
.drive-check b::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #1E9E5A; }
.drive-check .soon b::before { background: #E0A100; }
.drive-check .stop b::before { background: #D93025; }
.drive-check p { margin: 0; color: var(--steel); }
.drive-check .stop p { color: var(--ink); }
@media (min-width: 860px) { .drive-check { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .drive-check li { padding: 28px; } }

/* plain two- or three-column guide tables; on phones every row becomes a card */
table.guide { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.guide thead th { font-family: var(--display); font-weight: 800; font-size: 0.98rem; border-bottom: 2px solid var(--ink); }
.guide tbody th { font-weight: 700; color: var(--ink); width: 42%; }
.guide td { color: var(--steel); }
.guide tr:last-child > * { border-bottom: 0; }
.guide.cost tbody th { width: 40%; }
.guide.cost td { color: var(--ink); white-space: nowrap; }
@media (max-width: 719px) {
    .guide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .guide tbody, .guide tr, .guide th, .guide td { display: block; width: auto; }
    .guide tr { background: var(--white); border-radius: var(--radius-m); margin-bottom: 12px; box-shadow: var(--card-shadow); }
    .guide tbody th, .guide.cost tbody th { padding: 16px 18px 4px; border-bottom: 0; width: auto; }
    .guide td { padding: 0 18px 16px; border-bottom: 0; white-space: normal; }
    .guide td[data-label] { padding: 4px 18px 12px; }
    .guide td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 700; color: var(--steel); }
}
.table-note { margin-top: 14px; }

/* listen: words on one side, the tap-to-play Short on the other */
.listen { display: grid; gap: 32px; align-items: center; }
.listen p:last-child { margin-bottom: 0; }
@media (min-width: 860px) { .listen { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }
.short { margin: 0; justify-self: center; width: min(300px, 76vw); }
.short-play, .short-frame { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #0B1426; box-shadow: 0 24px 50px -18px rgba(14, 30, 58, 0.45); }
.short-play { position: relative; padding: 0; border: 0; cursor: pointer; font: inherit; color: var(--white); }
.short-play img { width: 100%; height: 100%; object-fit: cover; }
.short-play .play {
    position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(8, 24, 76, 0.72);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.35);
}
.short-play .play svg { width: 28px; height: 28px; margin-left: 4px; fill: var(--white); }
.short-frame { border: 0; }
.short figcaption { font-size: 0.85rem; color: var(--steel); text-align: center; margin-top: 12px; }

/* what you can check yourself / please don't */
.check-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .check-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; } }
.check-card { background: var(--white); border-radius: var(--radius-l); padding: 26px 28px; box-shadow: var(--card-shadow); }
.check-card.donts { background: #FFF7F6; }
.check-card h3 { margin-bottom: 6px; }
.check-card > p { color: var(--steel); margin: 0 0 16px; }
.check-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.check-card li { position: relative; padding-left: 40px; }
.check-card li::before { content: ""; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; }
.dos li::before { background: var(--stage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.5l3.2 3.2L18 9.8' fill='none' stroke='%23004EFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; }
.donts li::before { background: #FDE3E0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M9.5 9.5l7 7M16.5 9.5l-7 7' stroke='%23B3261E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px no-repeat; }
.check-card li strong { display: block; }
.check-card li span { color: var(--steel); }

/* how to record: four numbered cards */
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: how; }
.howto li { counter-increment: how; background: var(--white); border-radius: var(--radius-l); padding: 24px 26px; box-shadow: var(--card-shadow); }
.howto li::before {
    content: counter(how); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 14px;
    background: var(--blue); color: var(--white); font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.howto b { display: block; font-family: var(--display); font-size: 1.08rem; line-height: 1.3; margin-bottom: 6px; }
.howto span { color: var(--steel); }
@media (min-width: 760px) { .howto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .howto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* three plain numbers (no counting up: the reader wants the figure, not a show) */
.stats { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.stats li { background: var(--white); border-radius: var(--radius-l); padding: 24px 26px; box-shadow: var(--card-shadow); }
.stats b { display: block; font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.03em; color: var(--blue-deep); }
.stats span { display: block; margin-top: 8px; color: var(--steel); }

/* noise cards: the hub and the homepage section */
.noise-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .noise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.noise-card { display: flex; flex-direction: column; gap: 8px; height: 100%; background: var(--white); border-radius: var(--radius-l); padding: 26px 28px; box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; }
.noise-card .noise-name { font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1.25; }
.noise-card .noise-usually { font-size: 0.9rem; font-weight: 700; color: var(--blue-deep); }
.noise-card p { margin: 0; color: var(--steel); }
.noise-card .more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); }
.noise-card .more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.noise-card .more.later { color: var(--steel); font-weight: 600; }
.safety-note { border-radius: var(--radius-m); background: #FFF7F6; border-left: 4px solid #D93025; padding: 18px 22px; max-width: 900px; margin-top: 20px; }
.safety-note p { margin: 0; }
.related { display: grid; gap: 12px; max-width: 900px; }
.related .link-card { margin-top: 0; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding: 44px 0 calc(100px + env(safe-area-inset-bottom, 0px)); font-size: 0.92rem; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; }
.site-foot a { color: var(--white); text-decoration: none; }
.site-foot button.linklike { background: none; border: 0; padding: 0; color: var(--white); font: inherit; cursor: pointer; }
.site-foot p { margin: 0; max-width: none; }
@media (min-width: 860px) { .site-foot { padding-bottom: 44px; } }

/* ---------- sticky App Store bar on phones, shown once no other download button is in view ---------- */
.sticky-get {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 -8px 24px rgba(14, 30, 58, 0.1);
    transform: translateY(110%); transition: transform 180ms var(--ease-out);
}
.sticky-get.show { transform: translateY(0); transition-duration: 280ms; }
.sticky-get span { font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.sticky-get img { height: 40px; width: auto; }
@media (min-width: 860px) { .sticky-get { display: none; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.table-scroll:focus-visible { outline: 3px solid var(--pulse); outline-offset: 4px; }

/* =====================================================================================
   MOTION
   ===================================================================================== */

/* 1. Hero, once on load (first visit, delight budget). Lines rise out of their own mask, the copy
      follows, the phone lifts out of the hero's lower edge, then the pulse draws across.
      The phone only moves, it never fades, so the largest image paints at once. */
@media (prefers-reduced-motion: no-preference) {
    .hero .eyebrow { animation: fade-up 700ms var(--ease-out) both; }
    .h1-line > span { animation: line-up 950ms var(--ease-out) both; animation-delay: 60ms; }
    .h1-line + .h1-line > span { animation-delay: 150ms; }
    .hero .lead { animation: rise 900ms var(--ease-out) both; }   /* moves, never invisible: it is the largest text, Google times the page by it */
    .hero .hero-cta { animation: fade-up 800ms var(--ease-out) 340ms both; }
    .hero-phone .device { animation: phone-up 1200ms var(--ease-out) 120ms both; }
    .hero .pulse { animation: wipe 1.6s var(--ease-in-out) 450ms both; }
    .page-intro .cover-inner > * { animation: rise 900ms var(--ease-out) both; }
    .page-intro .cover-inner > :nth-child(2) { animation-delay: 60ms; }
    .page-intro .cover-inner > :nth-child(3) { animation-delay: 120ms; }
    .page-intro .cover-inner > :nth-child(4) { animation-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-copy, .page-intro .cover-inner { animation: fade 400ms ease both; }
}
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise { from { transform: translateY(14px); } }
@keyframes phone-up { from { transform: translateY(22%); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes fade { from { opacity: 0; } }

/* 2. Hero to content, tied 1:1 to the scroll: the sheet slides over while the hero sinks back and
      dims, like a parent view behind an iOS sheet. Runs on the compositor; browsers without
      scroll-driven animations simply scroll. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .cover { view-timeline: --cover block; }
        .cover-inner {
            transform-origin: 50% 100%;
            animation: sink linear both;
            animation-timeline: --cover;
            animation-range: exit 0% exit 100%;
        }
        .cover::after { animation: dim linear both; animation-timeline: --cover; animation-range: exit 0% exit 100%; }

        /* the thread through the three steps fills to wherever the reader is */
        .steps { view-timeline: --steps block; }
        .steps::after { display: block; animation: fill linear both; animation-timeline: --steps; animation-range: entry 50% exit 50%; }
        /* wide screens: the line runs from the first to the last step's middle (33vh inset each end) */
        @media (min-width: 960px) { .steps::after { animation-range: entry 83% exit 17%; } }
    }
}
@keyframes sink { to { transform: translateY(16%) scale(0.94); } }
@keyframes dim { to { opacity: 0.5; } }
@keyframes fill { to { transform: scaleY(1); } }

/* 3. Chapters arrive once as they scroll in (js/site.js adds .in); groups stagger 60ms.
      Without JavaScript nothing is hidden. */
.js [data-reveal] { opacity: 0; transform: translateY(20px); }
.js [data-reveal].in {
    opacity: 1; transform: none;
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
}
/* the app screen inside a tile rises a little further than the tile: it slides out of its tray */
.js .tile[data-reveal] .tile-shot img { transform: translateY(40px); }
.js .tile[data-reveal].in .tile-shot img { transform: none; transition: transform 1100ms var(--ease-out) calc(var(--i, 0) * 60ms + 120ms); }
/* the closing pulse draws when the panel arrives (a clip-path wipe, left to right) */
@media (prefers-reduced-motion: no-preference) {
    .js .closer .pulse { clip-path: inset(0 100% 0 0); }
    .js .closer.in .pulse { clip-path: inset(0); transition: clip-path 1.6s var(--ease-in-out) 250ms; }
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal], .js .tile[data-reveal] .tile-shot img { transform: none; }
    .js [data-reveal].in { transition: opacity 300ms ease; transition-delay: 0ms; }
    .screens .screen.is-active { transition-duration: 200ms; }
}

/* 4. Page to page (home and comparison): a short cross-fade, the header stays put */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

/* ---------- touch and press: feedback on press, hover only where a mouse can hover ---------- */
a, button, summary { touch-action: manipulation; }
.badge-link, .faq summary, button.linklike, .brand, .head-get, .link-card, a.noise-card, .short-play, .nav-item, .menu-btn, .menu-panel a {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.badge-link, .head-get, .link-card, a.noise-card, .short-play { transition: transform 140ms var(--ease-out); }
.badge-link:active, .head-get:active { transform: scale(0.97); }
.link-card:active, a.noise-card:active, .short-play:active { transform: scale(0.985); }
a.noise-card:active { color: var(--ink); }
.faq summary { transition: color 150ms ease; }
.faq summary:active { color: var(--blue-deep); }
a:active { color: var(--blue-deep); }
.link-card:active { color: var(--white); }
.brand:active, .nav-item:active { color: var(--ink); }
.nav-item:active { background: rgba(14, 30, 58, 0.06); }
.head-get:active { color: var(--white); }
@media (hover: hover) and (pointer: fine) {
    a:hover { color: var(--blue-deep); }
    .brand:hover { color: var(--ink); }
    .head-get { transition: transform 140ms var(--ease-out), background-color 150ms ease; }
    .head-get:hover { color: var(--white); background: var(--blue-deep); }
    .link-card:hover { color: var(--white); }
    .link-card svg { transition: transform 200ms var(--ease-out); }
    .link-card:hover svg { transform: translateX(4px); }
    a.noise-card:hover { color: var(--ink); }
    .nav-item:hover, .nav-drop a:hover b { color: var(--ink); }
    .nav-item[aria-current]:hover { color: var(--blue); }
    .nav-drop a:hover { background: var(--stage); }
    .menu-panel a:hover { background: rgba(14, 30, 58, 0.05); color: var(--ink); }
    .menu-panel a.menu-get:hover { background: var(--blue-deep); color: var(--white); }
    .menu-btn { transition: background-color 150ms ease; }
    .menu-btn:hover { background: rgba(14, 30, 58, 0.1); }
    .noise-card .more svg { transition: transform 200ms var(--ease-out); }
    a.noise-card:hover .more svg { transform: translateX(4px); }
    .short-play .play { transition: background-color 150ms ease; }
    .short-play:hover .play { background: rgba(0, 78, 255, 0.85); }
    .faq summary:hover { color: var(--blue-deep); }
    .site-foot a:hover, .site-foot button.linklike:hover { text-decoration: underline; color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
    .badge-link, .head-get, .link-card, a.noise-card, .short-play { transition: none; }
    .badge-link:active, .head-get:active, .link-card:active, a.noise-card:active, .short-play:active { transform: none; opacity: 0.85; }
    .sticky-get { transform: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s 200ms; }
    /* the menu keeps its cross-fades, nothing moves or scales */
    .site-head, .site-head.head-hidden { transform: none; transition: opacity 200ms ease, visibility 0s; }
    .site-head.head-hidden { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s 200ms; }
    .nav-drop, .nav-group.open .nav-drop { transform: translate(-50%, 0); }
    .nav-drop a, .nav-group.open .nav-drop a, .menu-group, .menu-open .menu-group { transform: none; transition-delay: 0ms; }
    .menu-panel, .menu-open .menu-panel { transform: none; }
    .nav-hl { transition: opacity 160ms ease; }
    .menu-btn span { transition: none; }
    .sticky-get.show { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
}