/* USB4Car — boxed layout design language:
   gray page, ONE big white rounded box containing everything,
   thin-ring sub-panels per section, lime accent, pill buttons. */
:root {
  --page-bg: #f5f5f5;          /* neutral-100 */
  --box-bg: #ffffff;
  --panel-soft: #fafafa;       /* neutral-50 */
  --ink: #171717;              /* neutral-900 */
  --ink-soft: #525252;         /* neutral-600 */
  --muted: #737373;            /* neutral-500 */
  --ring: #e5e7eb;             /* neutral-200 */
  --lime: #a3e635;             /* lime-400 */
  --lime-dark: #84cc16;        /* lime-500 */
  --lime-ink: #4d7c0f;         /* lime-700 */
  --lime-soft: #ecfccb;        /* lime-100 */
  --star: #84cc16;
  --dark: #0a0a0a;             /* neutral-950 */
  --dark-soft: #262626;        /* neutral-800 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #d9f99d; color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============ THE BOX ============ */
.shell { max-width: 1152px; margin: 0 auto; padding: 16px; }
.box {
  background: var(--box-bg);
  border-radius: 24px;
  box-shadow: 0 0 0 1px var(--ring),
              0 1px 0 #e5e7eb,
              0 40px 80px -20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.box-pad { padding-left: 16px; padding-right: 16px; }

/* ============ header (inside the box) ============ */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--ring);
  border-radius: 9999px; padding: 8px 16px 8px 8px;
  font-weight: 600; font-size: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: box-shadow .15s ease;
}
.brand:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.brand-dot {
  width: 28px; height: 28px; border-radius: 9999px;
  background: linear-gradient(to bottom, var(--lime), var(--lime-dark));
  box-shadow: inset 0 0 0 1px rgba(132, 204, 22, 0.4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.nav nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav nav > a.nav-link {
  padding: 8px 14px; border-radius: 9999px;
  font-weight: 500; font-size: 14px; color: var(--ink-soft);
  transition: background .12s ease, color .12s ease;
}
.nav nav > a.nav-link:hover { background: var(--panel-soft); color: var(--ink); }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: #fff;
  border: none; border-radius: 9999px; padding: 10px 20px;
  font-weight: 500; font-size: 14px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: box-shadow .15s ease, background .15s ease;
  font-family: inherit;
}
.btn:hover { background: #000; box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.btn .arr { transform: translateY(-0.5px); }
.btn .winlogo { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.btn-sm .winlogo { width: 12px; height: 12px; }
.btn-ghost {
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ring), 0 1px 2px rgba(0,0,0,0.05);
}
.btn-ghost:hover { background: var(--panel-soft);
                   box-shadow: inset 0 0 0 1px var(--ring), 0 1px 2px rgba(0,0,0,0.05); }
.btn-lime {
  background: linear-gradient(to bottom, var(--lime), var(--lime-dark));
  color: #1a2e05; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(132,204,22,.4), 0 1px 3px rgba(0,0,0,0.15);
}
.btn-lime:hover { background: var(--lime-dark); }
.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 13.5px; }
.btn.full { width: 100%; }

/* ============ sections inside the box ============ */
.section { padding: 0 16px 40px; }
.panel {
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--ring);
  padding: 24px;
}
.panel-soft { background: var(--panel-soft); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.section-head h2 {
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.2;
}
.section-head p { color: var(--ink-soft); margin-top: 12px; font-size: 15.5px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime-soft); color: var(--lime-ink);
  border-radius: 9999px; padding: 5px 13px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(132, 204, 22, 0.25);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 9999px;
  background: var(--lime-dark);
}

/* ============ hero ============ */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center; padding: 8px 16px 40px;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 56px); font-weight: 600;
  line-height: 1.05; letter-spacing: -0.03em; margin: 22px 0 16px;
}
.hero .lead { font-size: 16.5px; color: var(--ink-soft); max-width: 470px; }
.hero .lead strong { color: var(--ink); font-weight: 700; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.hero-note { color: var(--muted); font-size: 13.5px; }

/* dark app-window showcase */
.show-card {
  background: var(--dark); color: #f5f5f5;
  border-radius: 16px; padding: 18px 22px 22px;
  box-shadow: inset 0 0 0 1px var(--dark-soft),
              0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.show-top { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.show-top i { width: 10px; height: 10px; border-radius: 9999px; display: inline-block; }
.show-top i:nth-child(1) { background: #ff5f57; }
.show-top i:nth-child(2) { background: #febc2e; }
.show-top i:nth-child(3) { background: #28c840; }
.show-top .show-title {
  margin-left: auto; font-size: 11.5px; color: #a3a3a3;
  box-shadow: inset 0 0 0 1px #333; border-radius: 9999px; padding: 3px 11px;
}
.show-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid #1f1f1f;
  font-size: 14px;
}
.show-row:last-of-type { border-bottom: none; }
.show-row .k { color: #a3a3a3; }
.show-row .v { font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 9999px; padding: 3px 11px;
  font-size: 12px; font-weight: 600;
}
.chip-green { background: var(--lime); color: #1a2e05; }
.chip-soft { background: var(--lime-soft); color: var(--lime-ink); }
.chip-amber { background: #fef3c7; color: #92400e; }
.show-done {
  margin-top: 16px; background: #052e16; color: var(--lime);
  border-radius: 10px; padding: 11px 15px;
  font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; gap: 9px;
}
.show-bar { height: 5px; border-radius: 9999px; background: #262626;
            margin-top: 14px; overflow: hidden; }
.show-bar i { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--lime-dark), var(--lime));
  border-radius: 9999px; }

/* quote strip (soft panel, like their testimonial strip) */
.quote-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.quote-strip .stars { flex: 1; text-align: center; }
.avatar {
  width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(to bottom, var(--lime), var(--lime-dark));
  color: #1a2e05;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.avatar-photo {
  width: 74px; height: 74px; border-radius: 9999px; flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ring),
              0 8px 18px rgba(15,25,40,0.18);
}
.quote-side { display: flex; flex-direction: column; align-items: center;
              gap: 6px; }
.see-reviews {
  font-size: 13px; font-weight: 600; color: var(--lime-ink);
  background: var(--lime-soft); border-radius: 9999px; padding: 6px 14px;
  box-shadow: inset 0 0 0 1px rgba(132,204,22,0.3);
  transition: background .15s ease;
}
.see-reviews:hover { background: #dbf3ab; }
.quote-strip p { font-size: 14.5px; color: var(--ink-soft); max-width: 520px; }
.quote-strip .who { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ============ steps ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card {
  border-radius: 12px; padding: 24px;
  box-shadow: inset 0 0 0 1px var(--ring);
  background: #fff;
}
.step-num {
  width: 36px; height: 36px; border-radius: 9999px;
  background: linear-gradient(to bottom, var(--lime), var(--lime-dark));
  color: #1a2e05;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; margin-bottom: 16px;
}
.step-card h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 7px;
                letter-spacing: -0.01em; }
.step-card p { color: var(--ink-soft); font-size: 14px; }

/* ============ split feature panel ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
         align-items: center; }
.split h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 600;
            letter-spacing: -0.02em; margin: 14px 0 12px; }
.split .desc { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; }
.split img { border-radius: 16px;
             box-shadow: 0 0 0 1px var(--ring),
                         0 20px 40px -20px rgba(0,0,0,0.25); }
.check-list { list-style: none; }
.check-list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 7px 0; font-size: 14.5px; color: var(--ink-soft);
}
.check-list .tick {
  width: 20px; height: 20px; border-radius: 9999px; flex-shrink: 0;
  background: var(--lime-soft); color: var(--lime-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; margin-top: 2px;
  box-shadow: inset 0 0 0 1px rgba(132, 204, 22, 0.25);
}

/* ============ cars: checker + stat band + scrolling marquee ============ */
.car-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 640px; margin: 26px auto 34px;
  background: var(--panel-soft); border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--ring);
  overflow: hidden;
}
.car-stat {
  padding: 18px 10px; text-align: center;
}
.car-stat + .car-stat { border-left: 1px solid var(--ring); }
.car-stat b { display: block; font-size: 26px; font-weight: 700;
              letter-spacing: -0.02em; color: var(--lime-ink); }
.car-stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* live "check your car" search */
.car-check { max-width: 620px; margin: 0 auto; }
.car-check .cc-label, .panel .car-check .cc-label {
  display: inline-flex; width: auto; align-items: center; gap: 8px;
  background: var(--lime-soft); color: var(--lime-ink);
  border-radius: 9999px; padding: 5px 13px; margin: 0 auto 12px;
  font-size: 12.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(132, 204, 22, 0.25);
}
.cc-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 9999px;
  background: var(--lime-dark);
}
.car-check { text-align: center; }
.cc-box {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: #fff; border-radius: 9999px; padding: 8px 12px 8px 22px;
  box-shadow: inset 0 0 0 2px var(--lime),
              0 10px 26px -12px rgba(101,163,13,0.45);
  transition: box-shadow .15s ease;
}
.cc-box:focus-within {
  box-shadow: inset 0 0 0 2px var(--lime-dark),
              0 10px 26px -8px rgba(101,163,13,0.5);
}
.cc-icon { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.cc-box input, .panel .cc-box input[type="text"] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
  padding: 10px 10px 10px 0; margin: 0; width: auto; border-radius: 0;
}
.cc-box input::placeholder { color: var(--muted); font-weight: 400; }
.cc-results {
  margin-top: 10px; background: #fff; border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--ring), 0 10px 24px rgba(15,25,40,0.08);
  padding: 6px; text-align: left;
}
.cc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 14px; border-radius: 11px; font-size: 14px;
}
.cc-row + .cc-row { border-top: 1px solid var(--ring); border-radius: 0; }
.cc-name { font-weight: 600; color: var(--ink); min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-chip {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700;
  background: var(--lime-soft); color: var(--lime-ink);
  box-shadow: inset 0 0 0 1px rgba(132,204,22,0.3);
  border-radius: 9999px; padding: 4px 11px; white-space: nowrap;
}
.cc-chip-blue { background: #e0f2fe; color: #075985;
                box-shadow: inset 0 0 0 1px rgba(14,165,233,0.25); }
.cc-universal { align-items: flex-start; }
.cc-universal .cc-chip-blue { order: 2; }
.cc-text { flex: 1; color: var(--ink-soft); line-height: 1.55; }
.cc-more { padding: 9px 14px; font-size: 12.5px; color: var(--muted);
           border-top: 1px solid var(--ring); }

.car-marquee {
  overflow: hidden; display: grid; gap: 12px; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent,
      #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent,
      #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; gap: 10px; width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track.reverse { animation-direction: reverse;
                         animation-duration: 44s; }
.car-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--ring);
  border-radius: 9999px; padding: 10px 20px; white-space: nowrap;
  color: var(--ink-soft); font-weight: 600; font-size: 14px;
}
.marquee-track span::before {
  content: ""; width: 7px; height: 7px; border-radius: 9999px;
  background: var(--lime); box-shadow: 0 0 0 1px rgba(132,204,22,0.4);
}
@keyframes marquee { to { transform: translateX(-50%); } }

.car-note {
  text-align: center; color: var(--muted); font-size: 14px;
  margin-top: 26px;
}
.who-link { color: var(--lime-ink); font-weight: 600; }
.who-link:hover { text-decoration: underline; }

/* knowledge-base teaser under the car checker */
.help-teaser {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 900px; margin: 34px auto 0;
}
.ht-card {
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border-radius: 16px; padding: 24px 26px;
  box-shadow: inset 0 0 0 1px var(--ring),
              0 12px 28px -18px rgba(15,25,40,0.25);
}
.ht-head p { font-size: 13.5px; color: var(--muted); margin-top: 12px;
             line-height: 1.55; }
.ht-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-chips a {
  background: var(--panel-soft); border-radius: 9999px; padding: 9px 16px;
  box-shadow: inset 0 0 0 1px var(--ring);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: box-shadow .15s ease, color .15s ease, background .15s ease;
}
.ht-chips a:hover { box-shadow: inset 0 0 0 2px var(--lime-dark);
                    background: #fff; color: var(--ink); }
.ht-all {
  margin-top: auto; align-self: flex-start;
  font-size: 13px; font-weight: 700; color: var(--lime-ink);
}
.ht-all:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .help-teaser { grid-template-columns: 1fr; }
  .ht-card { padding: 20px 18px; align-items: center; text-align: center; }
  .ht-chips { justify-content: center; }
  .ht-all { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ============ reviews (gradient cards, like reference) ============ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card {
  border-radius: 16px; padding: 24px;
  transition: box-shadow .25s ease;
}
.review-card:hover { box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15); }
.review-lime {
  background: linear-gradient(135deg, #f7fee7, #ecfdf5 55%, #ecfccb);
  box-shadow: inset 0 0 0 1px rgba(190, 242, 100, 0.6);
}
.review-blue {
  background: linear-gradient(135deg, #eff6ff, #faf5ff 55%, #fce7f3);
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.6);
}
.review-amber {
  background: linear-gradient(135deg, #fffbeb, #fff7ed 55%, #fef3c7);
  box-shadow: inset 0 0 0 1px rgba(253, 230, 138, 0.6);
}
.review-top { display: flex; align-items: center;
              justify-content: space-between; margin-bottom: 12px; }
.stars { color: var(--star); font-size: 13.5px; letter-spacing: 2px; }
.review-card h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 7px; }
.review-card p { color: var(--ink-soft); font-size: 13.5px; }
.review-who { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.review-who .avatar { width: 38px; height: 38px; font-size: 13px; }
.review-who .name { font-weight: 600; font-size: 13.5px; }
.review-who .role { color: var(--muted); font-size: 12.5px; }

/* ============ pricing ============ */
.pricing { display: grid; grid-template-columns: repeat(2, 1fr);
           gap: 20px; max-width: 820px; margin: 0 auto; }
.price-card {
  border-radius: 12px; padding: 28px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--ring);
  display: flex; flex-direction: column; position: relative;
}
.price-card.hot {
  background: var(--dark-soft); color: #fff;
  box-shadow: inset 0 0 0 1px var(--dark-soft),
              0 20px 40px -20px rgba(0,0,0,0.4);
}
.price-card.hot .for, .price-card.hot .check-list li { color: #d4d4d4; }
.price-card.hot .price small { color: #a3a3a3; }
.hot-badge {
  position: absolute; top: 20px; right: 20px;
  background: var(--lime); color: #1a2e05;
  border-radius: 9999px; padding: 3px 12px;
  font-size: 11.5px; font-weight: 700;
}
.price-card h3 { font-size: 17px; font-weight: 600; }
.price-card .for { color: var(--muted); font-size: 13.5px; margin: 3px 0 16px; }
.price { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.price small { font-size: 13.5px; color: var(--muted); font-weight: 400; }
.price-card .check-list { margin: 16px 0 22px; flex: 1; }
.price-card .check-list li { padding: 5px 0; font-size: 13.5px; }

/* ============ FAQ ============ */
.faq { max-width: 680px; margin: 0 auto; }
.faq details {
  background: #fff; box-shadow: inset 0 0 0 1px var(--ring);
  border-radius: 12px; padding: 16px 22px; margin-bottom: 10px;
}
.faq summary {
  font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 19px;
                      flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); font-size: 14px; margin-top: 10px; }

/* ============ big CTA (dark with lime radial glow) ============ */
.brand-logo { border-radius: 7px; display: inline-block;
              vertical-align: -6px; }

/* ============ SEO guide pages ============ */
.guide-hero {
  max-width: 760px; margin: 0 auto; padding: 16px 16px 40px;
  text-align: center;
}
/* hero with illustration: two columns on desktop */
.guide-hero.has-img {
  max-width: 1040px; display: grid; gap: 36px;
  grid-template-columns: 1.25fr 0.75fr; align-items: center;
  text-align: left;
}
.guide-hero.has-img .crumbs { justify-content: flex-start; }
.guide-hero-img {
  width: 100%; border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--ring), 0 18px 36px -18px rgba(15,25,40,0.25);
}
@media (max-width: 899px) {
  .guide-hero.has-img { grid-template-columns: 1fr; text-align: center;
                        gap: 24px; }
  .guide-hero.has-img .crumbs { justify-content: center; }
  .guide-hero-img { max-width: 420px; margin: 0 auto; }
}
.guide-hero h1 {
  font-size: clamp(28px, 4vw, 42px); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.028em; margin: 18px 0 16px;
}
.guide-hero .lead {
  font-size: 16px; color: var(--ink-soft); line-height: 1.65;
}
.crumbs {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); flex-wrap: wrap;
}
.crumbs a { color: var(--ink-soft); font-weight: 600; }
.crumbs a:hover { color: var(--lime-ink); }

.quick-answer { max-width: 720px; margin: 0 auto; padding: 8px 4px;
                text-align: center; }
.qa-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime-soft); color: var(--lime-ink);
  border-radius: 9999px; padding: 5px 13px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(132, 204, 22, 0.25);
}
.qa-badge::before {
  content: "✓"; font-weight: 800;
}
.quick-answer p { font-size: 16px; color: var(--ink); line-height: 1.7;
                  font-weight: 500; }

.format-table {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ring);
  font-size: 14px;
}
.ft-row {
  display: grid; grid-template-columns: 0.8fr 1fr 1.1fr 1.1fr;
  gap: 14px; padding: 13px 18px; align-items: center;
}
.ft-row + .ft-row { border-top: 1px solid var(--ring); }
.ft-head {
  background: var(--panel-soft); font-size: 12px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.ft-era { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ft-plays { font-weight: 600; color: var(--lime-ink); }
.ft-row span { color: var(--ink-soft); }
.ft-row.ft-head span { color: var(--muted); }
.ft-note { max-width: 720px; margin: 18px auto 0; text-align: center;
           font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.ft-note a { color: var(--lime-ink); font-weight: 600;
             text-decoration: underline; }

.symptom-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 720px; margin: -10px auto 26px;
}
.symptom-nav a {
  background: #fff; border-radius: 9999px; padding: 8px 16px;
  box-shadow: inset 0 0 0 1px var(--ring);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: box-shadow .15s ease, color .15s ease;
}
.symptom-nav a:hover {
  box-shadow: inset 0 0 0 2px var(--lime-dark);
  color: var(--ink);
}
.problem-card { scroll-margin-top: 24px; }

.problem-list { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.problem-card {
  background: #fff; border-radius: 14px; padding: 20px 22px;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.problem-card h3 { font-size: 16px; font-weight: 600;
                   letter-spacing: -0.01em; margin-bottom: 10px; }
.problem-card p { font-size: 14px; color: var(--ink-soft);
                  line-height: 1.65; }
.problem-card .p-why { margin-bottom: 8px; }
.problem-card .p-fix {
  background: var(--lime-soft); border-radius: 10px; padding: 10px 14px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(132,204,22,0.2);
}
.problem-card .p-fix .tick { color: var(--lime-ink); font-weight: 800;
                             margin-right: 2px; }

.step-list { margin: 18px 0 0 0; padding: 0; list-style: none;
             counter-reset: gstep; display: grid; gap: 12px; }
.step-list li {
  counter-increment: gstep; position: relative; padding-left: 42px;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.6;
}
.step-list li::before {
  content: counter(gstep); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 9999px;
  background: var(--lime-soft); color: var(--lime-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(132,204,22,0.25);
}

.guide-cta-card {
  background: var(--panel-soft); border-radius: 16px; padding: 30px 28px;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.guide-cta-card h2 {
  font-size: clamp(22px, 3vw, 28px); font-weight: 600;
  letter-spacing: -0.02em; margin: 14px 0 12px;
}
.guide-cta-card .desc { font-size: 14.5px; color: var(--ink-soft);
                        line-height: 1.65; }
.guide-cta-wide { text-align: center; max-width: 720px; margin: 0 auto; }
.guide-cta-wide .hero-cta { justify-content: center; }

.model-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.model-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border-radius: 14px; padding: 20px 22px;
  box-shadow: inset 0 0 0 1px var(--ring);
  transition: box-shadow .15s ease, transform .15s ease;
}
.model-card:hover {
  box-shadow: inset 0 0 0 2px var(--lime-dark),
              0 10px 22px rgba(15,25,40,0.08);
  transform: translateY(-2px);
}
.model-card-static { background: var(--panel-soft); }
.model-card-static:hover { box-shadow: inset 0 0 0 1px var(--ring);
                           transform: none; }
.model-card h3 { font-size: 15.5px; font-weight: 600;
                 letter-spacing: -0.01em; color: var(--ink); }
.model-card p { font-size: 13px; color: var(--ink-soft);
                line-height: 1.55; flex: 1; }
.model-more { font-size: 13px; font-weight: 700; color: var(--lime-ink); }

@media (max-width: 720px) {
  /* stack the table rows as labeled cards on small screens */
  .ft-head { display: none; }
  .ft-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .ft-row span:nth-child(2)::before { content: "Radio: "; color: var(--muted); font-weight: 600; }
  .ft-row span:nth-child(3)::before { content: "Plays: "; color: var(--muted); font-weight: 600; }
  .ft-row span:nth-child(4)::before { content: "Stick: "; color: var(--muted); font-weight: 600; }
}

.big-cta {
  position: relative; overflow: hidden;
  background: #171717; color: #fff;
  border-radius: 16px; padding: 48px 32px; text-align: center;
}
.big-cta::before {
  content: ""; position: absolute; inset: -8px; opacity: 0.2;
  background:
    radial-gradient(600px circle at 20% 20%, #84cc16, transparent 40%),
    radial-gradient(600px circle at 80% 80%, #22c55e, transparent 45%);
  pointer-events: none;
}
.big-cta > * { position: relative; }
.big-cta h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 600;
              letter-spacing: -0.02em; }
.big-cta p { color: #a3a3a3; margin: 10px 0 24px; font-size: 15px; }
.big-cta .btn-ghost { background: transparent; color: #fff;
                      box-shadow: inset 0 0 0 1px #404040; }
.big-cta .btn-ghost:hover { background: #262626; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ narrow pages (buy / license / download) ============ */
.page-narrow { max-width: 560px; margin: 0 auto; padding: 28px 16px 64px; }
.page-narrow h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 600;
                  letter-spacing: -0.025em; margin-bottom: 20px; }
.page-narrow .panel { padding: 30px; }
.panel p { color: var(--ink-soft); font-size: 14.5px; }
form label, .panel label { display: block; margin: 16px 0 7px; font-weight: 600; font-size: 13.5px; }
form input[type="email"], form input[type="text"],
.panel input[type="email"], .panel input[type="text"] {
  width: 100%; padding: 12px 18px; border-radius: 9999px;
  border: 1px solid var(--ring); background: var(--panel-soft);
  color: var(--ink); font-size: 14.5px; font-family: inherit;
  margin-bottom: 14px; outline: none;
}
form input:focus { border-color: var(--lime-dark);
                   box-shadow: 0 0 0 3px var(--lime-soft); }

.license-key {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 19px; font-weight: 700; letter-spacing: 1px;
  background: var(--lime-soft); color: var(--lime-ink);
  border: 2px dashed var(--lime-dark);
  border-radius: 12px; padding: 16px; text-align: center; margin: 18px 0;
  user-select: all;
}
.devices { width: 100%; border-collapse: collapse; margin: 14px 0; }
.devices th, .devices td {
  text-align: left; padding: 11px 8px; font-size: 13.5px;
  border-bottom: 1px solid var(--ring);
}
.devices th { color: var(--muted); font-size: 11.5px;
              text-transform: uppercase; letter-spacing: .06em; }

.flash-wrap { padding: 14px 16px 0; }
.flash {
  background: var(--lime-soft); color: var(--lime-ink);
  box-shadow: inset 0 0 0 1px rgba(132,204,22,.35);
  border-radius: 12px; padding: 12px 18px; margin-bottom: 8px;
  font-weight: 600; font-size: 13.5px;
}
.checkout-error {
  background: #fef2f2; color: #b91c1c;
  box-shadow: inset 0 0 0 1px rgba(185,28,28,0.25);
  border-radius: 12px; padding: 12px 16px; margin-top: 12px;
  font-size: 13.5px; font-weight: 600;
}
#paypal-buttons { margin-top: 6px; }
hr { border: none; border-top: 1px solid var(--ring); margin: 22px 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* ============ footer (inside the box) ============ */
.footer {
  border-top: 1px solid var(--ring);
  background: rgba(250, 250, 250, 0.5);
  padding: 28px 32px;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px;
                font-weight: 600; font-size: 14px; }
.footer-brand .brand-dot { width: 24px; height: 24px; font-size: 11px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.footer-links a:hover { color: var(--ink); }
.footer .muted { font-size: 12px; }

/* ================================================================
   HERO ANIMATION — one 12s master timeline, four acts:
   USB slides in -> radio scans -> green check -> music plays.
   Everything below shares var(--cycle) so the acts stay in sync.
   ================================================================ */
.anim-card {
  --cycle: 12s;
  position: relative;
  background: var(--card);
  border-radius: 24px;
  padding: 44px 36px 40px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ring),
              0 40px 80px -24px rgba(15, 25, 40, 0.18);
}
.anim-card::before {
  /* soft lime ambience on the light surface */
  content: ""; position: absolute; inset: -10%; opacity: 0.10;
  background:
    radial-gradient(420px circle at 15% 12%, #84cc16, transparent 42%),
    radial-gradient(420px circle at 88% 90%, #22c55e, transparent 46%);
  pointer-events: none;
}
.anim-scene {
  position: relative; height: 330px;
  animation: scene-master var(--cycle) linear infinite;
}
@keyframes scene-master {
  0% { opacity: 0; } 3% { opacity: 1; }
  96% { opacity: 1; } 100% { opacity: 0; }
}

/* ---------------- head unit ---------------- */
.head-unit {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: min(420px, 92%);
  background: linear-gradient(180deg, #f6f7f9, #dfe1e6 72%, #eaecef);
  border-radius: 18px; padding: 18px 20px 16px;
  box-shadow: inset 0 1px 0 #ffffff,
              inset 0 0 0 1px #c7cbd3,
              0 22px 40px -18px rgba(25, 35, 55, 0.35);
}
.unit-brand {
  font-size: 9px; font-weight: 700; letter-spacing: 3px;
  color: #99a0ac; text-align: center; margin-bottom: 10px;
}

/* ---------------- screen ---------------- */
.unit-screen {
  /* the display stays dark like a real head unit — crisp contrast on the
     light aluminum fascia */
  position: relative; height: 132px;
  background: #101411;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #2a2f33, inset 0 6px 18px rgba(0,0,0,0.85),
              0 1px 0 #ffffff;
  overflow: hidden;
  animation: screen-wake var(--cycle) linear infinite;
}
@keyframes screen-wake {
  0%, 15% { background: #101411; }
  19%, 94% { background: #0c1608;
             box-shadow: inset 0 0 0 2px #3d5216,
                         inset 0 6px 18px rgba(0,0,0,0.6),
                         0 0 22px rgba(132,204,22,0.28), 0 1px 0 #ffffff; }
  100% { background: #101411; }
}
.unit-screen::after {
  /* glass reflection */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%,
              rgba(255,255,255,0.05) 46%, rgba(255,255,255,0.02) 55%,
              transparent 58%);
  pointer-events: none;
}
.scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0;
}

/* -- act 0: idle -- */
.scr-idle { animation: act-idle var(--cycle) linear infinite; }
@keyframes act-idle {
  0%, 17% { opacity: 1; } 20%, 100% { opacity: 0; }
}
.idle-label {
  color: #3f4a3f; font-size: 12px; font-weight: 700; letter-spacing: 4px;
  font-family: ui-monospace, Consolas, monospace;
  animation: idle-blink 2.4s ease-in-out infinite;
}
@keyframes idle-blink { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* -- act 1: scanning -- */
.scr-scan { gap: 9px; animation: act-scan var(--cycle) linear infinite; }
@keyframes act-scan {
  0%, 19% { opacity: 0; }
  22%, 45% { opacity: 1; }
  48%, 100% { opacity: 0; }
}
.scan-ring {
  width: 30px; height: 30px; border-radius: 9999px;
  border: 3px solid rgba(163,230,53,0.18);
  border-top-color: var(--lime);
  animation: ring-spin 0.9s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
.scan-text {
  color: #d9f99d; font-size: 13.5px; font-weight: 600;
  font-family: ui-monospace, Consolas, monospace;
}
.scan-text span { animation: dot-blink 1.2s infinite; }
.scan-text .d2 { animation-delay: 0.2s; }
.scan-text .d3 { animation-delay: 0.4s; }
@keyframes dot-blink { 0%, 60%, 100% { opacity: 0.15; } 30% { opacity: 1; } }
.scan-sub {
  color: #557522; font-size: 11px; font-weight: 600; letter-spacing: 1px;
  font-family: ui-monospace, Consolas, monospace;
  animation: sub-rise var(--cycle) linear infinite;
}
@keyframes sub-rise {
  0%, 30% { opacity: 0; transform: translateY(5px); }
  34%, 45% { opacity: 1; transform: translateY(0); }
  48%, 100% { opacity: 0; }
}
.scan-shimmer {
  position: absolute; top: 0; bottom: 0; width: 46%;
  background: linear-gradient(100deg, transparent,
              rgba(163,230,53,0.08) 45%, rgba(163,230,53,0.14) 50%,
              rgba(163,230,53,0.08) 55%, transparent);
  animation: shimmer-sweep 1.5s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0% { left: -50%; } 100% { left: 105%; }
}

/* -- act 2: checkmark -- */
.scr-check { gap: 8px; animation: act-check var(--cycle) linear infinite; }
@keyframes act-check {
  0%, 46% { opacity: 0; }
  49%, 60% { opacity: 1; }
  63%, 100% { opacity: 0; }
}
.check-svg {
  width: 62px; height: 62px;
  animation: check-pop var(--cycle) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes check-pop {
  0%, 47% { transform: scale(0.4); }
  52%, 100% { transform: scale(1); }
}
.check-circle {
  fill: rgba(163,230,53,0.10); stroke: var(--lime); stroke-width: 4;
  stroke-dasharray: 189; stroke-dashoffset: 189;
  transform-origin: center; transform: rotate(-90deg);
  animation: circle-draw var(--cycle) linear infinite;
}
@keyframes circle-draw {
  0%, 47% { stroke-dashoffset: 189; }
  55%, 100% { stroke-dashoffset: 0; }
}
.check-tick {
  fill: none; stroke: var(--lime); stroke-width: 6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 42; stroke-dashoffset: 42;
  animation: tick-draw var(--cycle) linear infinite;
  filter: drop-shadow(0 0 6px rgba(163,230,53,0.6));
}
@keyframes tick-draw {
  0%, 52% { stroke-dashoffset: 42; }
  57%, 100% { stroke-dashoffset: 0; }
}
.check-text {
  color: #d9f99d; font-size: 13px; font-weight: 700; letter-spacing: 2px;
  font-family: ui-monospace, Consolas, monospace; text-transform: uppercase;
}

/* -- act 3: playing -- */
.scr-play {
  justify-content: center; gap: 12px; padding: 0 22px;
  align-items: stretch;
  animation: act-play var(--cycle) linear infinite;
}
@keyframes act-play {
  0%, 61% { opacity: 0; }
  64%, 95% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
.play-head { display: flex; align-items: center; gap: 12px; }
.play-icon {
  width: 30px; height: 30px; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(to bottom, var(--lime), var(--lime-dark));
  color: #1a2e05; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(163,230,53,0.45);
  animation: icon-pulse 1.8s ease-in-out infinite;
}
@keyframes icon-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(163,230,53,0.35); }
  50% { box-shadow: 0 0 20px rgba(163,230,53,0.65); }
}
.play-meta { flex: 1; min-width: 0; }
.play-title {
  color: #f0fdf4; font-size: 14.5px; font-weight: 700;
  animation: meta-in var(--cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.play-artist {
  color: #557522; font-size: 11.5px; font-weight: 600;
  animation: meta-in var(--cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes meta-in {
  0%, 62% { transform: translateX(-10px); opacity: 0; }
  66%, 100% { transform: translateX(0); opacity: 1; }
}

/* equalizer */
.eq { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.eq i {
  width: 4px; border-radius: 2px;
  background: linear-gradient(to top, var(--lime-dark), var(--lime));
  transform-origin: bottom; height: 100%;
  box-shadow: 0 0 6px rgba(163,230,53,0.35);
}
.eq i:nth-child(1) { animation: eq-bounce 0.86s ease-in-out infinite; }
.eq i:nth-child(2) { animation: eq-bounce 1.12s ease-in-out -0.30s infinite; }
.eq i:nth-child(3) { animation: eq-bounce 0.74s ease-in-out -0.14s infinite; }
.eq i:nth-child(4) { animation: eq-bounce 1.02s ease-in-out -0.52s infinite; }
.eq i:nth-child(5) { animation: eq-bounce 0.92s ease-in-out -0.24s infinite; }
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.25); }
  35% { transform: scaleY(1); }
  55% { transform: scaleY(0.45); }
  75% { transform: scaleY(0.85); }
}

.play-progress {
  height: 4px; border-radius: 9999px; background: #1d2413; overflow: hidden;
}
.play-progress i {
  display: block; height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--lime-dark), var(--lime));
  animation: progress-fill var(--cycle) linear infinite;
}
@keyframes progress-fill {
  0%, 63% { width: 2%; } 95%, 100% { width: 58%; }
}
.play-times {
  display: flex; justify-content: space-between;
  color: #4a5c28; font-size: 10px; font-weight: 600;
  font-family: ui-monospace, Consolas, monospace;
}

/* ---------------- controls row ---------------- */
.unit-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 0 4px;
}
.unit-knob {
  width: 34px; height: 34px; border-radius: 9999px;
  background: radial-gradient(circle at 32% 28%, #ffffff, #c8ccd4 70%);
  box-shadow: inset 0 0 0 1px #b4b9c2, inset 0 1px 1px #ffffff,
              0 3px 6px rgba(25, 35, 55, 0.28);
  position: relative;
}
.unit-knob::after {
  content: ""; position: absolute; top: 5px; left: 50%;
  width: 2.5px; height: 8px; margin-left: -1px; border-radius: 2px;
  background: #848b97;
}
.unit-knob.small { width: 26px; height: 26px; }
.unit-keys { display: flex; gap: 8px; }
.unit-keys i {
  width: 30px; height: 9px; border-radius: 4px;
  background: linear-gradient(180deg, #f0f1f4, #d4d7dd);
  box-shadow: inset 0 0 0 1px #c2c6cd, inset 0 1px 0 #ffffff;
}

/* ---------------- USB port + stick ----------------
   Insertion illusion: the stick sits BELOW the port housing in the stacking
   order, so as it slides left its silver plug disappears behind the housing
   exactly where the dark slot is drawn — like it went inside. Seated, only
   the lime body remains visible, sticking out of the slot. */
.usb-port {
  position: absolute; right: 22px; bottom: -13px;
  width: 66px; height: 26px; border-radius: 8px;
  background: linear-gradient(180deg, #eef0f3, #d6d9df);
  box-shadow: inset 0 0 0 1px #c2c6cd, inset 0 1px 0 #ffffff,
              0 8px 16px rgba(25, 35, 55, 0.28);
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0; padding: 0 4px 0 9px;
  z-index: 3;
}
.port-led {
  width: 5px; height: 5px; border-radius: 9999px; background: #b9bec7;
  animation: led-on var(--cycle) linear infinite;
  margin-right: 9px; flex-shrink: 0;
}
.port-slot {
  /* the dark opening the stick slides into (at the housing's right side) */
  flex: 1; height: 12px; border-radius: 2.5px;
  background: #14171c;
  box-shadow: inset 0 1px 2px #000, inset 0 0 0 1px #3a3f47;
}
@keyframes led-on {
  0%, 16.5% { background: #b9bec7; box-shadow: none; }
  18%, 94% { background: var(--lime-dark);
             box-shadow: 0 0 8px rgba(132,204,22,0.9); }
  100% { background: #b9bec7; box-shadow: none; }
}

.usb-stick {
  /* Seated: the plug is hidden behind the housing and the lime body
     emerges exactly at the dark slot's right edge. */
  position: absolute; right: -26px; bottom: -10.5px;
  display: flex; align-items: center;
  filter: drop-shadow(0 8px 12px rgba(25, 35, 55, 0.35));
  animation: usb-dock var(--cycle) cubic-bezier(0.16, 1, 0.3, 1) infinite;
  z-index: 2;
}
@keyframes usb-dock {
  0%, 5% { transform: translate(150px, 52px) rotate(9deg); opacity: 0;
           animation-timing-function: cubic-bezier(0.4, 0.4, 0.3, 1); }
  7% { opacity: 1; }
  14.5% { transform: translate(8px, 1px) rotate(0deg);    /* long glide in  */
          animation-timing-function: ease-in-out; }
  16.5% { transform: translate(-2px, 0); }                /* push into slot */
  18%, 100% { transform: translate(0, 0); }               /* click back,    
                                                             fully seated   */
}
.usb-plug {
  width: 17px; height: 13px;
  background: linear-gradient(180deg, #d9dde3, #9aa1ab);
  border-radius: 2px 0 0 2px;
  box-shadow: inset 0 0 0 1px #7c828c;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.5px;
}
.usb-plug i { width: 7px; height: 2px; background: #566; border-radius: 1px; }
.usb-body {
  width: 52px; height: 21px;
  background: linear-gradient(180deg, #b7ee56, #84cc16);
  border-radius: 3px 6px 6px 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45),
              inset 0 -2px 3px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
  color: #2c4708; font-size: 11px; font-weight: 800;
}

/* ---------------- floating notes ---------------- */
.anim-notes {
  position: absolute; left: 50%; top: 0; width: min(420px, 92%);
  transform: translateX(-50%); height: 100%;
  pointer-events: none;
  animation: act-play var(--cycle) linear infinite; /* same window as music */
}
.note {
  /* music drifting up from the stick / right side of the radio */
  position: absolute; bottom: 86px; color: var(--lime-dark);
  text-shadow: 0 0 10px rgba(132,204,22,0.45);
  opacity: 0;
}
.note.n1 { right: 7%; font-size: 17px;
           animation: note-rise 2.6s ease-out 0.2s infinite; }
.note.n2 { right: 1%; font-size: 13px;
           animation: note-rise 3.1s ease-out 1.3s infinite; }
.note.n3 { right: 13%; font-size: 12px;
           animation: note-rise 2.9s ease-out 2.1s infinite; }
@keyframes note-rise {
  0% { transform: translateY(0) rotate(-6deg) scale(0.85); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translateY(-110px) rotate(10deg) scale(1.12); opacity: 0; }
}

/* ================================================================
   FIX-EVERYTHING ANIMATION — 10s master timeline:
   problems listed -> button pressed -> lime sweep repairs each row
   one by one -> "all fixed" banner. Pure CSS, seamless loop.
   ================================================================ */
.fix-card {
  --fixc: 10s;
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 480px; margin: 0 auto;
  box-shadow: 0 0 0 1px var(--ring),
              0 30px 60px -22px rgba(15, 25, 40, 0.25);
  overflow: hidden;
}
.fix-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  border-color: var(--ring);
}
.fix-chrome i {
  width: 10px; height: 10px; border-radius: 9999px; display: inline-block;
}
.fix-chrome i:nth-child(1) { background: #ff5f57; }
.fix-chrome i:nth-child(2) { background: #febc2e; }
.fix-chrome i:nth-child(3) { background: #28c840; }
.fix-title { margin-left: 6px; font-size: 12px; font-weight: 700;
             color: var(--muted); }
/* Before/after states stack in the same grid cell: the container always
   reserves the width of the larger state, so nothing can ever overlap. */
.fix-count { margin-left: auto; display: grid; justify-items: end;
             font-size: 12px; font-weight: 700;
             animation: fix-reset var(--fixc) linear infinite; }
.fc-before, .fc-after { grid-area: 1 / 1; white-space: nowrap; }
.fc-before { color: #b45309; }
.fc-after { color: var(--lime-ink, #4d7c0f); }
.fix-count .fc-before { animation: fx-b-60 var(--fixc) linear infinite; }
.fix-count .fc-after { animation: fx-a-60 var(--fixc) linear infinite; }

/* ---------------- rows ---------------- */
.fix-list { position: relative; padding: 8px 10px;
            animation: fix-reset var(--fixc) linear infinite; }
.fix-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: 10px;
}
.fix-row + .fix-row { margin-top: 2px; }
.fix-ico {
  width: 26px; height: 26px; border-radius: 9999px; flex-shrink: 0;
  background: var(--lime-soft); color: var(--lime-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.fix-name { display: grid; flex: 1; min-width: 0; font-size: 13.5px;
            font-weight: 600; color: var(--ink); }
.fn-before, .fn-after, .fn-static {
  grid-area: 1 / 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.fix-chip { display: grid; justify-items: end; flex-shrink: 0;
            font-size: 11.5px; font-weight: 700; }
.ch-before, .ch-after {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center;
  border-radius: 9999px; padding: 3px 10px;
  white-space: nowrap; height: fit-content;
}
.ch-before { background: #fef3c7; color: #92400e; }
.ch-after { background: var(--lime-soft); color: var(--lime-ink);
            box-shadow: inset 0 0 0 1px rgba(132,204,22,0.3); }
.fix-row.r3 .ch-before { background: #fee2e2; color: #b91c1c; }

/* staggered flips: r1 24%, r2 31%, r3 38%, r4 45%, r5 52% */
.r1 .fn-before, .r1 .ch-before { animation: fx-b-24 var(--fixc) linear infinite; }
.r1 .fn-after,  .r1 .ch-after  { animation: fx-a-24 var(--fixc) linear infinite; }
.r2 .ch-before { animation: fx-b-31 var(--fixc) linear infinite; }
.r2 .ch-after  { animation: fx-a-31 var(--fixc) linear infinite; }
.r3 .ch-before { animation: fx-b-38 var(--fixc) linear infinite; }
.r3 .ch-after  { animation: fx-a-38 var(--fixc) linear infinite; }
.r4 .fn-before, .r4 .ch-before { animation: fx-b-45 var(--fixc) linear infinite; }
.r4 .fn-after,  .r4 .ch-after  { animation: fx-a-45 var(--fixc) linear infinite; }
.r5 .ch-before { animation: fx-b-52 var(--fixc) linear infinite; }
.r5 .ch-after  { animation: fx-a-52 var(--fixc) linear infinite; }

@keyframes fx-b-24 { 0%, 24% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes fx-a-24 { 0%, 24% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes fx-b-31 { 0%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes fx-a-31 { 0%, 31% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes fx-b-38 { 0%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes fx-a-38 { 0%, 38% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes fx-b-45 { 0%, 45% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes fx-a-45 { 0%, 45% { opacity: 0; } 47%, 100% { opacity: 1; } }
@keyframes fx-b-52 { 0%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes fx-a-52 { 0%, 52% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes fx-b-60 { 0%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes fx-a-60 { 0%, 60% { opacity: 0; } 62%, 100% { opacity: 1; } }

/* removed rows (duplicate / broken) dim out once handled */
.fix-row.r2 { animation: fx-dim-31 var(--fixc) linear infinite; }
.fix-row.r3 { animation: fx-dim-38 var(--fixc) linear infinite; }
@keyframes fx-dim-31 { 0%, 31% { opacity: 1; } 34%, 100% { opacity: 0.42; } }
@keyframes fx-dim-38 { 0%, 38% { opacity: 1; } 41%, 100% { opacity: 0.42; } }

/* repaired rows glow briefly when their fix lands */
.fix-row.r1 { animation: fx-glow-24 var(--fixc) linear infinite; }
.fix-row.r4 { animation: fx-glow-45 var(--fixc) linear infinite; }
.fix-row.r5 { animation: fx-glow-52 var(--fixc) linear infinite; }
@keyframes fx-glow-24 {
  0%, 23%, 30%, 100% { background: transparent; }
  25% { background: rgba(163,230,53,0.18); }
}
@keyframes fx-glow-45 {
  0%, 44%, 51%, 100% { background: transparent; }
  46% { background: rgba(163,230,53,0.18); }
}
@keyframes fx-glow-52 {
  0%, 51%, 58%, 100% { background: transparent; }
  53% { background: rgba(163,230,53,0.18); }
}

/* lime scan line sweeping down the list while fixing */
.fix-sweep {
  position: absolute; left: 8px; right: 8px; top: 0; height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent,
              var(--lime) 30%, var(--lime) 70%, transparent);
  box-shadow: 0 0 14px rgba(163,230,53,0.7);
  opacity: 0;
  animation: fx-sweep var(--fixc) linear infinite;
}
@keyframes fx-sweep {
  0%, 18% { top: 4px; opacity: 0; }
  20% { opacity: 1; }
  56% { top: calc(100% - 8px); opacity: 1; }
  60%, 100% { top: calc(100% - 8px); opacity: 0; }
}

/* ---------------- footer: button press -> done banner ---------------- */
.fix-footer { position: relative; padding: 6px 18px 18px; height: 66px;
              animation: fix-reset var(--fixc) linear infinite; }
.fix-btn {
  position: absolute; inset: 6px 18px 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to bottom, var(--lime), var(--lime-dark));
  color: #1a2e05; border-radius: 9999px;
  font-size: 14.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(132,204,22,.4),
              0 4px 12px rgba(132,204,22,0.35);
  animation: fx-press var(--fixc) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes fx-press {
  0%, 14% { transform: scale(1); opacity: 1; filter: brightness(1); }
  16% { transform: scale(0.94); filter: brightness(1.15); }
  18% { transform: scale(1); }
  60%, 63% { opacity: 1; }
  66%, 100% { opacity: 0; transform: scale(0.98); }
}
.fix-done {
  position: absolute; inset: 6px 18px 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-soft); color: var(--lime-ink);
  border-radius: 9999px; font-size: 14px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(132,204,22,0.35);
  opacity: 0;
  animation: fx-done var(--fixc) linear infinite;
}
@keyframes fx-done {
  0%, 64% { opacity: 0; transform: translateY(6px); }
  68%, 96% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

/* seamless loop: inner content fades at the cycle seam */
@keyframes fix-reset {
  0% { opacity: 0; } 3% { opacity: 1; }
  96% { opacity: 1; } 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fix-card * { animation: none !important; }
  .fn-before, .ch-before, .fix-btn, .fix-sweep, .fc-before { opacity: 0; }
  .fn-after, .ch-after, .fix-done, .fc-after { opacity: 1; }
  .fix-row.r2, .fix-row.r3 { opacity: 0.42; }
  .fix-list, .fix-footer, .fix-count { opacity: 1; }
}

/* accessibility: show the finished playing state without motion */
@media (prefers-reduced-motion: reduce) {
  .anim-card *, .anim-scene { animation: none !important; }
  .anim-scene, .scr-play, .anim-notes { opacity: 1; }
  .scr-idle, .scr-scan, .scr-check { opacity: 0; }
  .usb-stick { transform: translate(3px, 0); }
  .port-led { background: var(--lime); }
  .play-progress i { width: 42%; }
  .eq i { transform: scaleY(0.7); }
  .play-title, .play-artist { transform: none; opacity: 1; }
  .note { opacity: 0; }
}

/* ============ responsive ============ */
@media (min-width: 640px) {
  .shell { padding: 24px; }
  .nav { padding: 16px 24px; }
  .section, .hero { padding-left: 24px; padding-right: 24px; }
  .panel { padding: 28px; }
  .footer { padding: 28px 24px; }
}
@media (min-width: 900px) {
  .shell { padding: 40px; }
  .nav { padding: 18px 32px; }
  .section { padding-left: 32px; padding-right: 32px; padding-bottom: 48px; }
  .hero { padding: 8px 32px 52px; }
  .panel { padding: 28px; }
  .footer { padding: 30px 32px; }
}
@media (max-width: 899px) {
  /* single column — and center everything that was left-aligned */
  .hero { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .steps, .reviews { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .split .check-list { max-width: 420px; margin: 0 auto; text-align: left; }
  .split img { max-width: 480px; margin: 0 auto; }
  .pricing { grid-template-columns: 1fr; }
  .step-card { text-align: center; }
  .review-card { text-align: center; }
  .review-who { justify-content: center; }
  .price-card { text-align: center; }
  .price-card .check-list { max-width: 300px; margin-left: auto;
                            margin-right: auto; text-align: left; }
  .hot-badge { top: -12px; right: 50%; transform: translateX(50%); }
  .quote-strip { flex-direction: column; text-align: center; }
  .quote-strip .who { text-align: center; }
}

/* ---- small phones: tighter box, compact nav, full-width CTAs ---- */
@media (max-width: 640px) {
  .shell { padding: 10px; }
  .box { border-radius: 18px; }

  /* Header: one tidy row — brand + the two actions. The text links move
     out of the way (Help stays reachable via the footer and page links). */
  .nav { flex-wrap: nowrap; gap: 8px; padding: 12px; }
  .nav nav { flex-wrap: nowrap; gap: 6px; }
  .nav nav > a.nav-link { display: none; }
  .brand { padding: 6px 12px 6px 6px; font-size: 13px; }
  .brand .brand-logo { width: 24px; height: 24px; vertical-align: -7px; }
  .nav .btn-sm { padding: 8px 13px; font-size: 12.5px; white-space: nowrap; }
  .nav .btn-sm .winlogo { display: none; }
  .nav .btn-sm .arr { display: none; }

  .section { padding-left: 12px; padding-right: 12px; padding-bottom: 28px; }
  .hero { padding: 4px 14px 32px; gap: 26px; }
  .hero h1 { font-size: clamp(31px, 8.6vw, 40px); }
  .hero .lead { font-size: 15.5px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px;
              max-width: 320px; margin-left: auto; margin-right: auto; }
  .hero-note { font-size: 12.5px; }

  .panel { padding: 20px 16px; }
  .section-head { margin-bottom: 26px; }
  .section-head h2 { font-size: 23px; }

  .anim-card { padding: 26px 12px 30px; }
  .anim-scene { height: 300px; }
  .head-unit { width: 84%; }

  /* Cars section on phones */
  .cc-box { padding: 5px 8px 5px 16px; }
  .cc-box input { font-size: 14px; padding: 9px 8px 9px 0; }
  .car-stats { margin: 22px auto 28px; }
  .car-stat { padding: 14px 6px; }
  .car-stat b { font-size: 21px; }
  .car-stat span { font-size: 11px; }
  .marquee-track span { padding: 8px 15px; font-size: 13px; }

  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .big-cta { padding: 36px 20px; }
  .cta-row { flex-direction: column; align-items: stretch;
             max-width: 320px; margin: 0 auto; }

  /* Footer: centered stack with clear rhythm */
  .footer { padding: 26px 16px; }
  .footer-inner { flex-direction: column; text-align: center; gap: 14px; }
  .footer-links { justify-content: center; gap: 8px 18px; }
  .footer .muted { max-width: 260px; margin: 0 auto; line-height: 1.5; }

  .devices { font-size: 12.5px; }
  .page-narrow { padding: 22px 14px 48px; }
}