/* TuneBible prototype. Signal Blue. One stylesheet, no framework. */

:root {
  --bg: #F3F6F8;
  --surface: #FFFFFF;
  --surface-2: #E8EEF2;
  --border: #D6E0E7;
  --text: #0F1B26;
  --muted: #52616F;
  --accent: #0B5CAB;
  --accent-2: #A65300;
  --accent-ink: #FFFFFF;
  --success: #17663A;
  --warn: #8A5300;
  --danger: #B42318;
  --chip: #E4EDF3;
  --ink: #0A141D;
  --ink-text: #F2F6F9;
  --ink-muted: #A9B7C3;
  --hero-accent: #6FB3FF;
  --hero-accent-2: #FFB454;
  --mark-fg: #FFB454;
  --link: #0B5CAB;
  --link-hover: #084782;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(10, 20, 29, .06), 0 8px 24px rgba(10, 20, 29, .06);
  --shadow-lift: 0 2px 4px rgba(10, 20, 29, .08), 0 16px 36px rgba(10, 20, 29, .12);
  --maxw: 1160px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A1118;
    --surface: #121C25;
    --surface-2: #17232E;
    --border: #263541;
    --text: #E8EFF5;
    --muted: #9FB0BF;
    --accent: #6FB3FF;
    --accent-2: #FFB454;
    --accent-ink: #06121E;
    --success: #5BD68A;
    --warn: #F5C04A;
    --danger: #FF8A80;
    --chip: #1B2934;
    --ink: #060C12;
    --ink-text: #F2F6F9;
    --ink-muted: #9FB0BF;
    --mark-fg: #FFB454;
    --link: #6FB3FF;
    --link-hover: #A9D1FF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 36px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.62 var(--font);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
p { margin: 0 0 14px; }
strong, b { font-weight: 700; }
small { font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); color: var(--text); padding: 10px 14px; z-index: 100; border-radius: 8px; box-shadow: var(--shadow); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hero-band :focus-visible,
.tune-box :focus-visible,
.site-footer :focus-visible { outline-color: var(--hero-accent-2); }
section[id], article[id], div[id], h2[id], h3[id] { scroll-margin-top: 84px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 2px 12px rgba(10, 20, 29, .06);
}
.site-header .wrap { display: flex; align-items: center; gap: 10px; min-height: 62px; flex-wrap: nowrap; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); flex: none; }
.logo:hover { color: var(--text); }
.logo .mark {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--mark-fg);
  font: 800 16px/1 var(--display); letter-spacing: .02em;
}
.logo .wm { font: italic 900 23px/1 var(--display); letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; }
.logo .t { color: var(--accent); }
.logo .b { color: var(--text); }

.hdr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.menu-btn, .search-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  min-height: 42px;
  padding: 0 12px;
  font: 600 14px/1 var(--font);
  cursor: pointer;
}
.menu-btn:hover, .search-btn:hover { border-color: var(--accent); color: var(--accent); }
.search-btn { width: 42px; padding: 0; font-size: 0; position: relative; }
.search-btn::before {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: absolute; left: 12px; top: 12px;
}
.search-btn::after {
  content: "";
  width: 7px; height: 2px;
  background: currentColor;
  position: absolute; left: 26px; top: 28px;
  transform: rotate(45deg);
  border-radius: 2px;
}

.nav {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 14px 26px rgba(10, 20, 29, .14);
  padding: 6px 12px 12px;
  flex-direction: column;
  margin: 0;
}
.nav.open { display: flex; }
.nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  text-decoration: none;
  font: 600 16px/1.2 var(--font);
  white-space: normal;
}
.nav a:last-child { border-bottom: 0; }
.nav a:hover { color: var(--accent); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 4px 0 0 var(--accent); }

.search-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 18px 30px rgba(10, 20, 29, .16);
  z-index: 2;
}
.search-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 16px 18px; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-form label { font: 700 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: none; }
.search-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.2 var(--font);
}
.search-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.search-results { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 2px; }
.search-results a { display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.search-results a:hover { background: var(--surface-2); }
.search-results b { display: block; font-size: 15px; line-height: 1.25; }
.search-results span { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }

@media (min-width: 900px) {
  .site-header .wrap { min-height: 68px; gap: 16px; }
  .hdr-actions { margin-left: 0; order: 3; }
  .menu-btn { display: none; }
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav a {
    min-height: 42px;
    padding: 8px 11px;
    border: 0;
    border-radius: 8px;
    font: 700 14px/1 var(--display);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); border-radius: 8px 8px 0 0; }
  .search-btn { order: 4; }
  .search-panel { top: 100%; }
}

/* ---------- hero ---------- */
.hero-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 1px solid var(--border);
}
.hero-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
  pointer-events: none;
}
.hero-band .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-top: 38px;
  padding-bottom: 42px;
}
.hero-band .kicker {
  margin: 0 0 12px;
  color: var(--hero-accent);
  font: 700 13px/1 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-band h1 {
  margin: 0 0 16px;
  color: #FFFFFF;
  font: 800 clamp(32px, 10vw, 78px)/.94 var(--display);
  text-transform: none;
  letter-spacing: -.01em;
}
.hero-band h1 em { font-style: normal; color: var(--hero-accent-2); }
.hero-band .lede { max-width: 600px; margin: 0 0 8px; color: var(--ink-muted); font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-band .fine { margin: 14px 0 0; color: var(--ink-muted); font-size: 13px; max-width: 560px; }

.hero-panel {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 18px 18px 8px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .35);
  align-self: start;
}
.hero-panel h2 {
  display: block;
  margin: 0 0 4px;
  color: #FFFFFF;
  font: 700 21px/1.1 var(--display);
  letter-spacing: .01em;
  text-transform: none;
}
.hero-panel h2::before { display: none; }
.hero-panel .panel-sub { margin: 0 0 12px; color: var(--ink-muted); font-size: 13px; }
.quick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--ink-text);
  text-decoration: none;
}
.quick-row:hover { color: #FFFFFF; }
.quick-row:hover .quick-go { color: var(--hero-accent-2); transform: translateX(2px); }
.quick-row b { font: 700 18px/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.quick-row span { color: var(--ink-muted); font-size: 13px; line-height: 1.3; }
.quick-row .quick-go { grid-row: 1 / span 2; grid-column: 2; color: var(--hero-accent); font: 700 20px/1 var(--display); transition: transform .15s, color .15s; }
.quick-row.is-next { cursor: default; }
.quick-row.is-next .quick-go { color: var(--ink-muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

@media (min-width: 880px) {
  .hero-band .wrap { grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-top: 62px; padding-bottom: 66px; }
  .hero-band h1 { font-size: clamp(56px, 6vw, 88px); }
  .hero-panel { padding: 22px 22px 10px; }
}

/* ---------- buttons ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font: 700 16px/1 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.cta:hover { color: var(--accent-ink); filter: brightness(1.08); transform: translateY(-1px); }
.cta.alt { background: transparent; color: var(--ink-text); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34); }
.cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }
.hero-band .cta.alt { color: #FFFFFF; }
.hero-band .cta:not(.alt) { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 0 1px var(--hero-accent); }
main .cta.alt { color: var(--text); box-shadow: inset 0 0 0 2px var(--border); }
main .cta.alt:hover { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.tune-box .cta.alt { color: #FFFFFF; }
.cta.amber { background: var(--accent-2); color: var(--accent-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-2) 30%, transparent); }
.cta.amber:hover { color: var(--accent-ink); }
.cta.small { min-height: 40px; padding: 9px 14px; font-size: 14px; }

/* ---------- fact band ---------- */
.fact-band { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.fact-band .wrap { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.fact b { display: block; color: var(--text); font: 800 27px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.fact span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.4; }
@media (min-width: 700px) { .fact-band .wrap { grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 22px; padding-bottom: 22px; } }

/* ---------- content ---------- */
main { display: block; padding: 0 0 34px; }
.section { padding: 38px 0 8px; }
.section.tight { padding-top: 26px; }
.section-head { max-width: 760px; margin-bottom: 18px; }
.kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font: 700 13px/1 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1 {
  margin: 6px 0 14px;
  color: var(--text);
  font: 800 clamp(34px, 5.5vw, 56px)/1 var(--display);
  letter-spacing: 0;
  text-transform: none;
}
h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px 0 12px;
  color: var(--text);
  font: 800 29px/1.05 var(--display);
  letter-spacing: .01em;
  text-transform: none;
}
h2::before { content: ""; width: 6px; height: 25px; flex: none; border-radius: 2px; background: var(--accent); }
h3 { margin: 22px 0 7px; color: var(--text); font: 700 21px/1.2 var(--display); letter-spacing: .01em; }
h4 { margin: 18px 0 6px; color: var(--text); font: 700 16px/1.3 var(--font); }
.lede { max-width: 780px; margin: 0 0 8px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.section-head .lede { margin-bottom: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }

.crumbs {
  margin: 18px 0 2px;
  color: var(--muted);
  font: 600 12px/1.4 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
}
a.card { transition: transform .15s, box-shadow .15s, border-color .15s; }
a.card:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--text); box-shadow: var(--shadow-lift); }
.card .eyebrow { margin: 0 0 6px; color: var(--accent); font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.card h3 { margin: 0 0 6px; font-size: 23px; line-height: 1.08; }
.card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.card .meta { margin-top: auto; padding-top: 14px; color: var(--muted); font-size: 13px; }
.card .go { margin-top: 12px; color: var(--accent); font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.card .tag { align-self: flex-start; margin-bottom: 10px; }
.card.platform { min-height: 190px; border-top: 4px solid var(--accent); }
.card.platform .code { color: var(--muted); font: 600 12px/1.4 var(--mono); letter-spacing: .01em; }
.card.platform.is-next { border-top-color: var(--border); border-style: dashed; background: var(--surface-2); }
.card.platform.is-next .go { color: var(--muted); }
.card.platform.is-ls { border-top-color: var(--accent-2); }
.card.guide { border-left: 4px solid var(--border); }
.card.guide.live { border-left-color: var(--accent); }
.card.guide.is-next { border-style: dashed; }

.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font: 600 12px/1.35 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chip.live { background: var(--chip); color: var(--success); }
.chip.free { background: var(--chip); color: var(--accent-2); }
.chip.next { background: var(--surface-2); color: var(--muted); }

/* ---------- service cards ---------- */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.svc-card.free { border-top-color: var(--accent-2); }
.svc-card .eyebrow { margin: 0 0 5px; color: var(--accent); font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.svc-card.free .eyebrow { color: var(--accent-2); }
.svc-card h3 { margin: 0 0 4px; font-size: 27px; line-height: 1; }
.svc-price { margin: 0 0 10px; color: var(--text); font: 800 34px/1 var(--display); letter-spacing: .01em; }
.svc-price small { color: var(--muted); font: 600 13px/1.3 var(--font); letter-spacing: 0; }
.svc-card ul { list-style: none; margin: 6px 0 16px; padding: 0; }
.svc-card li { position: relative; margin: 0 0 7px; padding-left: 17px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.svc-card li::before { content: ""; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }
.svc-card.free li::before { background: var(--accent-2); }
.svc-card .cta { margin-top: auto; align-self: flex-start; }

/* ---------- callouts ---------- */
.note {
  margin: 18px 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 9px;
  background: var(--surface);
  font-size: 15px;
}
.note > :last-child { margin-bottom: 0; }
.note h3, .note h4 { margin-top: 0; }
.note.warn { border-left-color: var(--warn); }
.note.stop { border-left-color: var(--danger); }
.note.good { border-left-color: var(--success); }
.note .label { display: block; margin-bottom: 3px; color: var(--accent); font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.note.warn .label { color: var(--warn); }
.note.stop .label { color: var(--danger); }
.note.good .label { color: var(--success); }

.tune-box {
  margin: 28px 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 6px solid var(--accent-2);
  border-radius: 14px;
  background: var(--ink);
  color: var(--ink-text);
  box-shadow: var(--shadow-lift);
}
.tune-box h2 { margin: 0 0 8px; color: #FFFFFF; font-size: 30px; }
.tune-box h2::before { background: var(--accent-2); }
.tune-box p { color: var(--ink-muted); }
.tune-box .tune-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.tune-box .tune-points span { padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: var(--ink-text); font-size: 13px; }
.tune-box .cta.alt { color: #FFFFFF; }
@media (min-width: 760px) { .tune-box { padding: 28px 30px; } }

/* ---------- tables ---------- */
.table-wrap {
  margin: 16px 0 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table.data { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
table.data caption { padding: 11px 13px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 14px; text-align: left; }
table.data th {
  padding: 10px 12px;
  background: var(--ink);
  color: #FFFFFF;
  font: 600 12px/1.2 var(--font);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}
table.data td { padding: 10px 12px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data tbody tr:first-child td { border-top: 0; }
table.data tbody tr:nth-child(even) td { background: var(--surface-2); }
table.data code, code { font-family: var(--mono); font-size: .9em; }
code { padding: 2px 5px; border-radius: 5px; background: var(--chip); color: var(--text); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .nowrap { white-space: nowrap; }

/* ---------- lists ---------- */
ol.steps { counter-reset: step; list-style: none; margin: 14px 0 20px; padding: 0; }
ol.steps > li { position: relative; margin: 0 0 16px; padding-left: 44px; }
ol.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 15px/1 var(--display);
}
ol.steps > li > b:first-child, ol.steps > li > strong:first-child { display: inline-block; margin-bottom: 2px; }
ul.ticks { list-style: none; margin: 10px 0 18px; padding: 0; }
ul.ticks li { position: relative; margin: 0 0 7px; padding-left: 17px; }
ul.ticks li::before { content: ""; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }
ul.plain { margin: 10px 0 18px; padding-left: 20px; }
ul.plain li, ol.plain li { margin: 0 0 6px; }
.checklist { list-style: none; margin: 12px 0 20px; padding: 0; }
.checklist li { position: relative; margin: 0 0 8px; padding-left: 24px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .18em; width: 13px; height: 13px; border: 2px solid var(--border); border-radius: 3px; background: var(--surface); }

/* ---------- guide ---------- */
.guide-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.guide-text { max-width: 840px; }
.guide-text > p, .guide-text > ul, .guide-text > ol { max-width: 760px; }
.guide-text h2 { scroll-margin-top: 84px; }
.guide-text h3 { scroll-margin-top: 84px; }
.guide-text table.data { font-size: 14px; }
.guide-text .table-wrap { max-width: 900px; }
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 14px 0 20px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.8;
}
.toc a { color: var(--text); text-decoration: none; font-weight: 600; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.faq h3 { margin-top: 22px; }
.faq p { margin-top: 0; max-width: 760px; }
.pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }

/* ---------- revision 2: doors, guide path, finder ---------- */
.home-services { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.home-services a { font-weight: 600; }

.doors { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 20px; }
.door {
  position: relative;
  display: block;
  padding: 15px 42px 15px 17px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.door:hover { color: var(--text); border-color: var(--accent); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.door b { display: block; font: 700 22px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.door span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.door::after { content: "\2192"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--accent); font: 700 20px/1 var(--display); }
@media (min-width: 760px) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .door { min-height: 112px; padding: 16px 17px 34px; }
  .door::after { right: 15px; top: auto; bottom: 12px; transform: none; }
}

.guide-path { counter-reset: guide; list-style: none; margin: 14px 0 18px; padding: 0; border-top: 1px solid var(--border); }
.guide-path li { position: relative; margin: 0; padding: 12px 0 12px 46px; border-bottom: 1px solid var(--border); }
.guide-path li::before {
  counter-increment: guide;
  content: counter(guide);
  position: absolute; left: 0; top: 12px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 14px/1 var(--display);
}
.guide-path a { font-weight: 700; }
.guide-path .pending { color: var(--text); font-weight: 600; }
.guide-path li.is-pending { color: var(--muted); }

.finder { margin: 16px 0 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.finder summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  cursor: pointer;
  color: var(--text);
  font: 700 15px/1.25 var(--font);
  list-style: none;
}
.finder summary::-webkit-details-marker { display: none; }
.finder summary::before {
  content: "+";
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--accent);
  font: 700 16px/1 var(--font);
}
.finder[open] summary::before { content: "\2212"; }
.finder[open] summary { border-bottom: 1px solid var(--border); }
.finder > p, .finder > .table-wrap, .finder > .note { margin-left: 15px; margin-right: 15px; }
.finder > p { margin-top: 14px; }
.finder > .table-wrap { margin-top: 12px; }
.finder > :last-child { margin-bottom: 15px; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 30px;
  padding: 34px 0 24px;
  border-top: 3px solid var(--accent);
  background: var(--ink);
  color: var(--ink-muted);
  font-size: 14px;
}
.site-footer .cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 700px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; } }
.site-footer .logo { margin-bottom: 9px; }
.site-footer .logo .mark { background: var(--accent); color: var(--accent-ink); }
.site-footer .logo .t { color: var(--hero-accent-2); }
.site-footer .logo .b { color: #FFFFFF; }
.site-footer p { margin: 0 0 10px; color: var(--ink-muted); }
.site-footer .foot-h { margin: 2px 0 8px; color: #FFFFFF; font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.site-footer a { display: inline-block; padding: 2px 0; color: var(--ink-text); text-decoration: none; line-height: 1.9; }
.site-footer a:hover { color: var(--hero-accent-2); }
.site-footer .fine { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); color: var(--ink-muted); font-size: 12px; }
.site-footer .fine a { color: var(--ink-text); text-decoration: underline; }

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .site-footer, .search-panel, .toc, .hero-actions, .cta { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .hero-band { background: #FFFFFF; color: #000000; border-bottom: 1px solid #000000; }
  .hero-band h1, .hero-band .lede, .hero-band .kicker { color: #000000; }
  .note, .table-wrap, .card { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   TuneBible design v3 (2026-11-05)
   Contrast rhythm, platform colour families, and a guide page with a summary
   and a sticky contents rail.  Signal Blue stays the TuneBible accent.
   ========================================================================== */

:root {
  --band: #E7EEF3;
  --band-2: #F7F9FB;
  --warn-bg: #FFF6E6;
  --danger-bg: #FDECEA;
  --good-bg: #EAF7EF;
  --report-muted: #EAF2FB;

  /* Mopar: crimson, paired with charcoal in the badge. */
  --mopar: #8C1D2F;
  --mopar-accent: #8C1D2F;
  --mopar-soft: #F6E6E9;
  --mopar-border: #E2C4C9;

  /* Ford: deep oval navy, deliberately darker than Signal Blue. */
  --ford: #24425F;
  --ford-accent: #24425F;
  --ford-soft: #E8EFF5;
  --ford-border: #C6D6E4;

  /* Honda: graphite/steel plate with a red accent, not Mopar red. */
  --honda: #3E4A55;
  --honda-accent: #B42318;
  --honda-soft: #EDF1F4;
  --honda-border: #CBD5DD;
}

@media (prefers-color-scheme: dark) {
  :root {
    --band: #101A23;
    --band-2: #0D151D;
    --warn-bg: #2A2113;
    --danger-bg: #2A1517;
    --good-bg: #12251A;
    --report-muted: #0B1B2B;

    --mopar: #7E1B2B;
    --mopar-accent: #FF9AA8;
    --mopar-soft: #2A161B;
    --mopar-border: #5A2730;

    --ford: #1E3A55;
    --ford-accent: #9CC3EC;
    --ford-soft: #16232F;
    --ford-border: #2C4459;

    --honda: #2B3540;
    --honda-accent: #FF8A80;
    --honda-soft: #1A222B;
    --honda-border: #3D4A56;
  }
}

body[data-platform="mopar"] {
  --p: var(--mopar); --p-accent: var(--mopar-accent);
  --p-soft: var(--mopar-soft); --p-border: var(--mopar-border);
}
body[data-platform="ford"] {
  --p: var(--ford); --p-accent: var(--ford-accent);
  --p-soft: var(--ford-soft); --p-border: var(--ford-border);
}
body[data-platform="honda"] {
  --p: var(--honda); --p-accent: var(--honda-accent);
  --p-soft: var(--honda-soft); --p-border: var(--honda-border);
}
/* The turbo Civic hub had no platform fill, so in dark mode it fell back to
   the bright Signal Blue accent and white text lost contrast.  Use the Civic
   teal family in both themes. */
body[data-platform="civic"] {
  --p: var(--civic); --p-accent: var(--civic-accent);
  --p-soft: var(--civic-soft); --p-border: var(--civic-border);
}

/* ---------- home: dark hero, light next steps, tinted platform band ---------- */
.home-hero {
  position: relative;
  overflow: hidden;
  padding: 52px 0 46px;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 4px solid var(--accent);
}
.home-hero .wrap { position: relative; z-index: 1; }
.hero-kicker { margin: 0 0 10px; color: var(--hero-accent); }
.home-hero h1 {
  max-width: 980px;
  margin: 0 0 18px;
  color: #FFFFFF;
  font-size: clamp(38px, 5.8vw, 70px);
  line-height: .94;
}
.home-hero .lede { max-width: 730px; color: var(--ink-muted); font-size: 19px; }
main .home-hero .cta.alt {
  color: #FFFFFF;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42);
}
main .home-hero .cta.alt:hover {
  color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

.next-steps {
  padding: 42px 0 40px;
  background: var(--band-2);
  border-bottom: 1px solid var(--border);
}
.next-steps h2 { margin-top: 0; }
.next-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 18px; }
@media (min-width: 780px) { .next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.next-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 23px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.next-card:hover { transform: translateY(-3px); color: var(--text); box-shadow: var(--shadow-lift); }
.next-num {
  color: var(--muted);
  font: 800 13px/1 var(--display);
  letter-spacing: .16em;
}
.next-card h3 {
  margin: 12px 0 9px;
  font: 800 30px/1 var(--display);
  letter-spacing: .01em;
  text-transform: none;
}
.next-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.next-card .go {
  margin-top: auto;
  padding-top: 18px;
  color: var(--accent);
  font: 700 13px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.next-report { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.next-report:hover { color: var(--accent-ink); }
.next-report .next-num,
.next-report h3,
.next-report .go { color: var(--accent-ink); }
.next-report p { color: var(--report-muted); }
.next-guide {
  border-top: 7px solid var(--mopar);
  background:
    linear-gradient(90deg, var(--mopar) 0 33.33%, var(--ford) 33.33% 66.66%, var(--honda) 66.66% 100%) top / 100% 7px no-repeat,
    var(--surface);
}
.next-guide h3 { color: var(--ford-accent); }
.next-custom { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.next-custom:hover { color: #FFFFFF; border-color: var(--accent-2); }
.next-custom .next-num { color: var(--hero-accent-2); }
.next-custom h3 { color: #FFFFFF; }
.next-custom p { color: var(--ink-muted); }
.next-custom .go { color: var(--hero-accent-2); }

.platform-band {
  padding: 42px 0 40px;
  background: var(--band);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.platform-band h2 { margin-top: 0; }
.platform-band .grid { margin-top: 18px; }
.card.platform { min-height: 214px; border-top-width: 6px; }
.card.platform h3 { font-size: 28px; }
.card.platform p { color: var(--muted); }
.plt-mopar { background: var(--mopar-soft); border-color: var(--mopar-border); border-top-color: var(--mopar); }
.plt-mopar h3, .plt-mopar .go { color: var(--mopar-accent); }
.plt-ford { background: var(--ford-soft); border-color: var(--ford-border); border-top-color: var(--ford); }
.plt-ford h3, .plt-ford .go { color: var(--ford-accent); }
.plt-honda { background: var(--honda-soft); border-color: var(--honda-border); border-top-color: var(--honda); }
.plt-honda h3, .plt-honda .go { color: var(--honda-accent); }
.plt-ls { background: var(--surface-2); border-top-color: var(--muted); }
a.card.plt-mopar:hover { border-color: var(--mopar); }
a.card.plt-ford:hover { border-color: var(--ford); }
a.card.plt-honda:hover { border-color: var(--honda); }

.home-close {
  padding: 42px 0 46px;
  background: var(--ink);
  color: var(--ink-text);
  border-top: 4px solid var(--accent);
}
.home-close h2 { margin-top: 0; color: #FFFFFF; }
.home-close .kicker { color: var(--hero-accent-2); }
.home-close .home-services { color: var(--ink-muted); font-size: 16px; }
.home-close .home-services a { color: var(--hero-accent); }
.home-close .muted { color: var(--ink-muted); }

/* ---------- hub: colour band, start path, facts box, guide cards ---------- */
.hub-hero {
  position: relative;
  overflow: hidden;
  margin: 12px 0 26px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--p, var(--accent)) 70%, #000);
  border-radius: 18px;
  background: var(--p, var(--accent));
  color: #FFFFFF;
  box-shadow: var(--shadow-lift);
}
.hub-hero > * { position: relative; z-index: 1; }
.hub-kicker {
  margin: 0 0 8px;
  color: #FFFFFF;
  font: 700 12px/1 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hub-hero h1 { margin: 0 0 14px; color: #FFFFFF; }
.hub-hero .lede { max-width: 900px; margin: 0; color: #FFFFFF; }
.hub-hero .lede a, .guide-hero .lede a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.hub-badge-row { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.hub-badge { display: block; width: 64px; height: 64px; flex: none; }
.hub-badge img { display: block; width: 64px; height: 64px; }
.hub-badge-row .hub-kicker { margin: 0; }
@media (max-width: 520px) {
  .hub-badge, .hub-badge img { width: 52px; height: 52px; }
  .hub-badge-row { gap: 11px; margin-bottom: 12px; }
}

.start-here {
  margin: 0 0 22px;
  padding: 24px;
  border: 1px solid var(--p-border, var(--border));
  border-radius: 18px;
  background: var(--p-soft, var(--surface-2));
}
.start-here .kicker { color: var(--p-accent, var(--accent)); }
.start-here h2 { margin-top: 0; color: var(--p-accent, var(--accent)); }
.start-here h2::before { background: var(--p, var(--accent)); }
.start-path {
  counter-reset: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 880px) { .start-path { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.start-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 5px 13px;
  align-items: start;
  height: 100%;
  padding: 17px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--p, var(--accent));
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.start-card:hover { transform: translateY(-2px); color: var(--text); border-color: var(--p, var(--accent)); box-shadow: var(--shadow-lift); }
.start-num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--p, var(--accent));
  color: #FFFFFF;
  font: 800 17px/1 var(--display);
}
.start-body b {
  display: block;
  color: var(--text);
  font: 700 21px/1.05 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.start-body span { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.42; }
.start-go {
  grid-column: 2;
  margin-top: 8px;
  color: var(--p-accent, var(--accent));
  font: 700 12px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hub-facts {
  margin: 8px 0 22px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--band);
}
.hub-facts h2 { margin-top: 0; color: var(--p-accent, var(--accent)); }
.hub-facts h2::before { background: var(--p, var(--accent)); }
.facts-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
@media (min-width: 760px) { .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact-panel {
  padding: 19px 20px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--p, var(--accent));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.fact-panel h3 { margin: 0 0 6px; color: var(--p-accent, var(--accent)); font-size: 22px; }
.fact-panel ul.ticks { margin-bottom: 0; }
.fact-panel ul.ticks li::before { background: var(--p, var(--accent)); }

.doors-compact { margin: 18px 0 20px; }
.doors-compact .door { padding: 13px 40px 13px 15px; border-left-width: 4px; }
.doors-compact .door b { font-size: 18px; }
.doors-compact .door span { font-size: 13px; }
.finder-compact { margin-bottom: 22px; }

/* Guide list as cards, numbered by the platform colour. */
.guide-path {
  counter-reset: guide;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 20px;
  padding: 0;
  border-top: 0;
  list-style: none;
}
@media (min-width: 760px) { .guide-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-path li {
  position: relative;
  margin: 0;
  padding: 17px 18px 15px 60px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--p, var(--accent));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.guide-path li::before {
  counter-increment: guide;
  content: counter(guide);
  position: absolute;
  left: 16px;
  top: 18px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p, var(--accent));
  color: #FFFFFF;
  font: 700 14px/1 var(--display);
}
.guide-path .gcard-title {
  display: block;
  color: var(--text);
  font: 700 20px/1.1 var(--display);
  letter-spacing: .01em;
  text-transform: none;
  text-decoration: none;
}
.guide-path a.gcard-title:hover { color: var(--p-accent, var(--accent)); }
.gcard-summary { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.gcard-go {
  display: block;
  margin-top: 10px;
  color: var(--p-accent, var(--accent));
  font: 700 12px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.guide-path li.is-pending { opacity: .72; }
.guide-path li.is-pending::before { background: var(--muted); }

/* ---------- guide: head, summary, sticky contents, section cards ---------- */
.guide-head {
  margin: 6px 0 20px;
  padding: 4px 0 2px 22px;
  border-left: 7px solid var(--p, var(--accent));
}
.guide-head h1 { margin-top: 0; }
.guide-head .lede { max-width: 860px; }

.guide-summary {
  margin: 18px 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--p-border, var(--border));
  border-radius: 14px;
  background: var(--p-soft, var(--surface-2));
  box-shadow: var(--shadow);
}
.summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 4px; }
.summary-kicker { margin: 0; color: var(--p-accent, var(--accent)); font-size: 14px; }
.read-time {
  flex: 0 1 auto;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--p-border, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 600 11px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.summary-points { display: grid; grid-template-columns: 1fr; gap: 7px 22px; margin: 10px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .summary-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.summary-points li { position: relative; padding-left: 17px; color: var(--text); font-size: 14px; line-height: 1.45; }
.summary-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--p-accent, var(--accent));
}

.guide-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.guide-main { min-width: 0; }
@media (min-width: 1020px) {
  .guide-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; }
  .guide-aside { position: sticky; top: 88px; }
}
.toc-card {
  padding: 15px;
  border: 1px solid var(--border);
  border-top: 5px solid var(--p, var(--accent));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.toc-title { margin: 0 0 8px; color: var(--p-accent, var(--accent)); font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.toc { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 1.35; }
.toc a { display: block; padding: 6px 8px; border-radius: 7px; color: var(--text); font-weight: 600; text-decoration: none; }
.toc a:hover { background: var(--p-soft, var(--surface-2)); color: var(--p-accent, var(--accent)); text-decoration: none; }
.toc-cta { width: 100%; margin-top: 12px; }
@media (max-width: 1019px) {
  .toc-card { padding: 12px; }
  .toc { flex-direction: row; flex-wrap: wrap; gap: 3px 14px; }
  .toc a { padding: 4px 2px; }
  .toc-cta { width: auto; margin-top: 10px; }
}

.guide-intro { margin-bottom: 16px; }
.guide-intro > .note:first-child { margin-top: 0; }
.gsec {
  margin: 0 0 16px;
  padding: 22px 22px 6px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--p, var(--accent));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.gsec > h2:first-child { margin-top: 0; }
.gsec h2::before { background: var(--p, var(--accent)); }
.gsec h3 { margin-top: 24px; }
.gsec > :last-child { margin-bottom: 16px; }
.gsec .table-wrap { margin-top: 14px; }
.gsec .note { margin: 16px 0; }

.note {
  border-radius: 10px;
  border-left-width: 5px;
  background: var(--surface-2);
  color: var(--text);
}
.note .label { color: var(--p-accent, var(--accent)); }
.note.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.note.stop { background: var(--danger-bg); border-left-color: var(--danger); }
.note.good { background: var(--good-bg); border-left-color: var(--success); }
.note.warn .label { color: var(--warn); }
.note.stop .label { color: var(--danger); }
.note.good .label { color: var(--success); }

.guide-prev { margin: 20px 0 10px; font-size: 14px; }
.guide-finish { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 0; }
.guide-finish > *, .finish-next, .report-card { min-width: 0; }
.guide-finish b, .guide-finish p, .guide-finish a { overflow-wrap: anywhere; }
@media (min-width: 760px) { .guide-finish { grid-template-columns: 1.15fr .85fr; } }
.finish-next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  border: 1px solid var(--p, var(--accent));
  border-radius: 14px;
  background: var(--p, var(--accent));
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.finish-next:hover { color: #FFFFFF; filter: brightness(1.06); }
.finish-next b { margin: 6px 0; color: #FFFFFF; font: 800 27px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.finish-next > span:last-child { color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.45; }
.finish-kicker { color: rgba(255, 255, 255, .82); font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.report-card {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.report-card p { margin: 8px 0 14px; color: var(--muted); }
.report-card .finish-kicker { color: var(--accent); }

/* ---------- services rhythm ---------- */
/* Bands are explicit classes.  Do not colour by section position: the
   nth-of-type rule used to repaint the ink Full Custom band near-white. */
main[data-kind="services"] .section.svc-band { padding-top: 40px; padding-bottom: 34px; }

/* ---------- small-screen and print ---------- */
@media (max-width: 620px) {
  .home-hero { padding: 38px 0 36px; }
  .home-hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .next-card { min-height: 0; }
  .start-here, .hub-facts, .hub-hero { padding: 19px; border-radius: 14px; }
  .guide-head { padding-left: 16px; border-left-width: 5px; }
  .gsec { padding: 18px 16px 4px; }
  .guide-path li { padding-left: 54px; }
  .summary-head { align-items: flex-start; }
}
@media print {
  .home-hero, .home-close, .hub-hero, .finish-next, .next-custom { background: #FFFFFF !important; color: #000000 !important; }
  .home-hero h1, .home-hero .lede, .hub-hero h1, .hub-hero .lede, .finish-next b { color: #000000 !important; }
  .guide-aside, .toc-card { display: none !important; }
  .gsec, .guide-summary, .note, .start-card, .guide-path li { break-inside: avoid; box-shadow: none; }
}

/* v3 follow-up: keep long FAQ blocks inside a card and stop wide tables
   from pushing the card past the viewport on phones. */
.next-guide h3 { color: var(--text); }
.guide-main { max-width: 880px; }
.gsec { min-width: 0; }
.gsec .table-wrap, .hub-facts .table-wrap { max-width: 100%; }
.faq {
  margin: 12px 0 18px;
  padding: 4px 22px 18px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--p, var(--accent));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.faq h3 { margin-top: 18px; }
.finder .faq { box-shadow: none; }

/* ==========================================================================
   TuneBible design v4 (2026-11-05, review feedback)
   Platform-first home, platform-owned services, and the same banded contrast
   on services, hubs, guides and trust pages.
   ========================================================================== */

:root {
  --ls: #121418;
  --ls-accent: #D7261E;
  --ls-on-dark: #FF8A80;
  --ls-soft: #F3EBE9;
  --ls-border: #D9C4C0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ls: #0B0D10;
    --ls-accent: #FF6B61;
    --ls-on-dark: #FFB4AD;
    --ls-soft: #1D1818;
    --ls-border: #4A2B29;
  }
}

html, body { overflow-x: hidden; }
.section-lede { max-width: 720px; margin: -4px 0 20px; color: var(--muted); font-size: 16px; }

/* ---------- home: platform-first ---------- */
.platform-band { padding: 44px 0 46px; }
.platform-band .kicker { margin-bottom: 4px; }
.platform-band h2 { margin: 0 0 4px; }
.card.platform .go { margin-top: auto; padding-top: 14px; }

.plt-ls {
  background: var(--ls);
  border-color: var(--ls);
  border-top-color: var(--ls-accent);
}
.plt-ls h3 { color: #FFFFFF; }
.plt-ls p { color: var(--ink-muted); }
.plt-ls .go { color: var(--ls-on-dark); }
a.card.plt-ls:hover { border-color: var(--ls-accent); }

.home-service-band {
  padding: 42px 0 44px;
  background: var(--band-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-service-band .svc-grid { margin-top: 20px; }
.svc-grid-2 { max-width: 920px; }
@media (min-width: 700px) { .svc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- platform pages: colour bands, services, buttons ---------- */
.hub-band {
  margin: 28px calc(50% - 50vw);
  padding: 30px max(16px, calc((100vw - var(--maxw)) / 2 + 16px));
  border-top: 1px solid var(--p-border, var(--border));
  border-bottom: 1px solid var(--p-border, var(--border));
}
.hub-actions { margin-top: 20px; }
main .hub-hero .cta:not(.alt) {
  background: #FFFFFF;
  color: var(--p, var(--accent));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
main .hub-hero .cta:not(.alt):hover { color: var(--p, var(--accent)); filter: brightness(.96); }
main .hub-hero .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
main .hub-hero .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }

.start-here.hub-start {
  margin: 0 calc(50% - 50vw) 28px;
  padding: 30px max(16px, calc((100vw - var(--maxw)) / 2 + 16px));
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
.hub-facts.hub-facts-band {
  margin: 0 calc(50% - 50vw) 28px;
  padding: 30px max(16px, calc((100vw - var(--maxw)) / 2 + 16px));
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
  background: var(--band);
}
.hub-facts-band .fact-panel { background: var(--surface); }

.hub-services {
  margin-top: 0;
  margin-bottom: 30px;
  background: var(--p, var(--accent));
  color: #FFFFFF;
  border-top: 4px solid color-mix(in srgb, var(--p, var(--accent)) 70%, #000);
  border-bottom: 4px solid color-mix(in srgb, var(--p, var(--accent)) 70%, #000);
}
.hub-services .kicker { color: #FFFFFF; }
.hub-services h2 { margin-top: 0; color: #FFFFFF; }
.hub-services h2::before { background: #FFFFFF; }
.hub-band-lede { max-width: 720px; margin: 0 0 20px; color: #FFFFFF; }
.hub-services .svc-grid { margin-top: 18px; }
.hub-services .svc-card {
  color: var(--text);
  border-top-color: var(--p, var(--accent));
  border-color: var(--p-border, var(--border));
}
.hub-services .svc-card h3 { color: var(--text); }
.hub-services .svc-card p { color: var(--muted); }
.hub-services .svc-card .svc-price { color: var(--text); }
.hub-services .svc-card .eyebrow { color: var(--p-accent, var(--accent)); }
.hub-services .svc-card li::before { background: var(--p, var(--accent)); }
.hub-services .svc-card .cta:not(.alt) {
  background: var(--p, var(--accent));
  color: #FFFFFF;
  box-shadow: none;
}
.hub-services .svc-card .cta:not(.alt):hover { color: #FFFFFF; filter: brightness(1.08); }
.hub-services .svc-card.is-closed { border-style: dashed; background: var(--surface-2); }
.hub-services .svc-card.is-closed .eyebrow { color: var(--muted); }
.hub-services .svc-card.is-closed .cta {
  background: transparent;
  color: var(--p-accent, var(--accent));
  box-shadow: inset 0 0 0 2px var(--p-border, var(--border));
}
.hub-services .svc-card.is-closed .cta:hover { color: var(--p-accent, var(--accent)); filter: none; }

/* Platform buttons and accents keep the platform family, not Signal Blue. */
body[data-platform]:not([data-platform=""]) main .cta:not(.alt) {
  background: var(--p, var(--accent));
  color: #FFFFFF;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--p, var(--accent)) 26%, transparent);
}
body[data-platform]:not([data-platform=""]) main .cta:not(.alt):hover { color: #FFFFFF; }
body[data-platform]:not([data-platform=""]) main .cta.alt { color: var(--p-accent, var(--accent)); box-shadow: inset 0 0 0 2px var(--p-border, var(--border)); }
body[data-platform]:not([data-platform=""]) main .cta.alt:hover { color: var(--p-accent, var(--accent)); box-shadow: inset 0 0 0 2px var(--p, var(--accent)); }
body[data-platform]:not([data-platform=""]) main .toc-cta { background: var(--p, var(--accent)); color: #FFFFFF; }
body[data-platform]:not([data-platform=""]) main .hub-hero .cta:not(.alt) {
  background: #FFFFFF;
  color: var(--p, var(--accent));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
body[data-platform]:not([data-platform=""]) main .hub-hero .cta:not(.alt):hover { color: var(--p, var(--accent)); filter: brightness(.96); }
body[data-platform]:not([data-platform=""]) main .hub-hero .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
body[data-platform]:not([data-platform=""]) main .hub-hero .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }

/* Ink sign-off bands keep white outline buttons on platform pages. */
body[data-platform]:not([data-platform=""]) main .process-signoff .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
body[data-platform]:not([data-platform=""]) main .process-signoff .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }

/* ---------- guide: platform hero and alternating section cards ---------- */
main[data-kind="guide"] { background: var(--band-2); }
.guide-head.guide-hero {
  margin: 6px 0 22px;
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--p, var(--accent)) 74%, #000);
  border-left: 0;
  border-radius: 18px;
  background: var(--p, var(--accent));
  color: #FFFFFF;
  box-shadow: var(--shadow-lift);
}
.guide-hero h1 { margin-top: 0; color: #FFFFFF; }
.guide-hero .lede { max-width: 880px; color: rgba(255, 255, 255, .9); }
.guide-hero .guide-summary {
  margin: 18px 0 0;
  color: var(--text);
  border-color: rgba(255, 255, 255, .35);
  background: var(--surface);
}
.guide-hero .guide-summary .summary-kicker { color: var(--p-accent, var(--accent)); }
.guide-hero .summary-points li::before { background: var(--p, var(--accent)); }
.guide-main .gsec:nth-of-type(even) {
  background: var(--p-soft, var(--surface-2));
  border-color: var(--p-border, var(--border));
}
.guide-main .faq { background: var(--surface); }

/* ---------- services page: hero, jump cards, bands, card groups ---------- */
.svc-hero {
  padding: 38px 0 40px;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 4px solid var(--accent);
}
.svc-hero h1 { margin-top: 0; color: #FFFFFF; }
.svc-hero .lede { max-width: 830px; color: var(--ink-muted); }
.svc-hero .kicker { color: var(--hero-accent); }
.svc-hero .crumbs { color: var(--ink-muted); }
.svc-hero .crumbs a { color: #FFFFFF; }
.svc-hero .note { background: #121C25; border-color: #263541; color: var(--ink-text); }
.svc-hero .note p { color: var(--ink-muted); }
.svc-hero .note .label { color: var(--hero-accent-2); }

.svc-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.svc-plat {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 700 12px/1.2 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.svc-plat.is-mopar { background: var(--mopar-soft); border-color: var(--mopar-border); color: var(--mopar-accent); }
.svc-plat.is-ford { background: var(--ford-soft); border-color: var(--ford-border); color: var(--ford-accent); }
.svc-plat.is-honda { background: var(--honda-soft); border-color: var(--honda-border); color: var(--honda-accent); }

.svc-jump { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
@media (min-width: 760px) { .svc-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-jump-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.svc-jump-card:hover { transform: translateY(-2px); color: var(--text); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.svc-jump-card .eyebrow { margin: 0 0 3px; color: var(--accent-2); font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.svc-jump-card b { color: var(--text); font: 800 24px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.svc-jump-card span:last-child { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.4; }

main .svc-band { padding: 44px 0 40px; border-bottom: 1px solid var(--border); }
main .svc-band-light { background: var(--surface); }
main .svc-band-tint { background: var(--band); }
main .svc-band-ink { background: var(--ink); color: var(--ink-text); }
.svc-band-ink h2, .svc-band-ink h3 { color: #FFFFFF; }
.svc-band-ink p, .svc-band-ink li { color: var(--ink-muted); }
.svc-band-ink .lede { color: var(--ink-text); }
.svc-band-ink .note { background: #121C25; border-color: #263541; color: var(--ink-text); }
.svc-band-ink .note p { color: var(--ink-muted); }
.svc-band-ink .note .label { color: var(--hero-accent-2); }
.svc-band-ink .note.stop { background: #2A1517; border-left-color: var(--danger); }
.svc-band-ink ul.ticks li::before { background: var(--hero-accent-2); }
.svc-band-ink .svc-block { background: #121C25; border-color: #263541; border-top-color: var(--accent-2); }
.svc-band-ink .svc-block h3 { color: #FFFFFF; }
.svc-band-ink .svc-block p, .svc-band-ink .svc-block li { color: var(--ink-muted); }
.svc-band-ink .svc-block p.eyebrow { color: var(--hero-accent-2); }

.svc-blocks { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0; }
@media (min-width: 840px) { .svc-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-block {
  min-width: 0;
  padding: 20px 22px 6px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.svc-block > h3:first-child { margin-top: 0; }
.svc-block > :last-child { margin-bottom: 16px; }
.svc-platform-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 20px 0 8px; }
@media (min-width: 840px) { .svc-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-platform-note .eyebrow { margin: 0 0 6px; color: var(--accent-2); font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.svc-band-ink .svc-platform-note .eyebrow { color: var(--hero-accent-2); }

.svc-faq {
  margin: 18px 0 0;
  padding: 4px 22px 18px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.svc-faq h3 { margin-top: 20px; }
.svc-final { padding-top: 34px; padding-bottom: 38px; }

/* ---------- trust pages: dark hero and card sections ---------- */
main[data-kind="about"], main[data-kind="methodology"], main[data-kind="corrections"],
main[data-kind="privacy"], main[data-kind="account"] { background: var(--band-2); }
.trust-hero {
  padding: 38px 0 36px;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 4px solid var(--accent);
}
.trust-hero h1 { margin-top: 0; color: #FFFFFF; }
.trust-hero .lede { max-width: 820px; color: var(--ink-muted); }
.trust-hero .kicker { color: var(--hero-accent); }
.trust-hero .crumbs { color: var(--ink-muted); }
.trust-hero .crumbs a { color: #FFFFFF; }
.trust-hero .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.trust-hero .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }
/* Diagrams are drawn on a light plate in both themes: their labels are a
   fixed ink palette, so the plate keeps inherited text readable when the
   page itself is dark.  A diagram with its own full-bleed dark background
   paints over this plate. */
figure > svg[role="img"] { background: #F3F6F8; border-radius: 10px; }
.trust-body { padding-top: 30px; padding-bottom: 18px; }
.trust-intro { margin: 0 0 16px; }
.trust-section {
  margin: 0 0 16px;
  padding: 22px 24px 8px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.trust-section:nth-of-type(even) { background: var(--band); border-left-color: var(--accent-2); }
.trust-section h2:first-child { margin-top: 0; }
.trust-section > :last-child { margin-bottom: 16px; }
.trust-section .contact-box { margin-top: 14px; }

/* ---------- small screens and print ---------- */
@media (max-width: 620px) {
  .hub-band, .start-here.hub-start, .hub-facts.hub-facts-band {
    padding-left: 16px;
    padding-right: 16px;
  }
  .svc-hero { padding: 30px 0 32px; }
  .guide-head.guide-hero { padding: 20px 18px; }
  .trust-hero { padding: 30px 0 30px; }
  .trust-section { padding: 18px 17px 4px; }
}
@media print {
  .hub-band, .start-here.hub-start, .hub-facts.hub-facts-band {
    margin: 0;
    padding: 0;
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  .hub-services, .svc-band-ink, .svc-hero, .trust-hero, .guide-hero { background: #FFFFFF !important; color: #000000 !important; }
  .hub-services h2, .svc-band-ink h2, .svc-band-ink h3, .svc-hero h1,
  .trust-hero h1, .guide-hero h1, .guide-hero .lede { color: #000000 !important; }
  .svc-block, .trust-section, .svc-card { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   TuneBible design v4, round 2 (2026-11-05)
   Fixes the services ink band and the LS tile body contrast, then adds the
   welcome hero, Our story/Contact, the designed account page, the process
   band and the two sample pages.
   ========================================================================== */

/* LS tile body: .card.platform p used to win over .plt-ls p. */
.card.platform.plt-ls p { color: var(--ink-muted); }
.card.platform.plt-ls h3 { color: #FFFFFF; }
.home-process-link { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.home-process-link a {
  color: var(--accent);
  font: 700 13px/1.3 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.home-process-link a:hover { color: var(--link-hover); text-decoration: underline; }

/* Header: five items must still fit above the mobile menu breakpoint. */
@media (min-width: 900px) and (max-width: 1140px) {
  .site-header .wrap { gap: 8px; }
  .nav a { padding: 8px 8px; font-size: 13px; letter-spacing: .04em; }
  .logo .wm { font-size: 21px; }
}

/* ---------- services: sample links, platform coverage cards ---------- */
.svc-samples { margin: 16px 0 0; color: #FFFFFF; font-size: 14px; }
.svc-samples a { color: #FFFFFF; font-weight: 600; }
.svc-samples a:hover { color: var(--hero-accent-2); }
.svc-samples .sample-coming { color: var(--ink-muted); font-weight: 600; }
.svc-coverage { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 10px; }
@media (min-width: 820px) { .svc-coverage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-cover {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-top: 6px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.svc-cover h3 { margin: 0 0 6px; color: var(--text); font-size: 23px; }
.svc-cover p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.svc-cover .cta { margin-top: auto; align-self: flex-start; }
.svc-cover.is-mopar { border-top-color: var(--mopar); }
.svc-cover.is-mopar .eyebrow { color: var(--mopar-accent); }
.svc-cover.is-ford { border-top-color: var(--ford); }
.svc-cover.is-ford .eyebrow { color: var(--ford-accent); }
.svc-cover.is-honda { border-top-color: var(--honda); }
.svc-cover.is-honda .eyebrow { color: var(--honda-accent); }
.svc-cover.is-mopar .cta { background: var(--mopar); color: #FFFFFF; }
.svc-cover.is-ford .cta { background: var(--ford); color: #FFFFFF; }
.svc-cover.is-honda .cta { background: var(--honda); color: #FFFFFF; }
main .svc-band-ink .svc-cover { background: var(--surface); color: var(--text); }
.svc-band-ink .svc-cover h3 { color: var(--text); }
.svc-band-ink .svc-cover p { color: var(--muted); }
.svc-band-ink .svc-cover .eyebrow { color: var(--accent-2); }
.svc-band-ink .svc-cover.is-mopar .eyebrow { color: var(--mopar-accent); }
.svc-band-ink .svc-cover.is-ford .eyebrow { color: var(--ford-accent); }
.svc-band-ink .svc-cover.is-honda .eyebrow { color: var(--honda-accent); }

/* Ford and Honda availability cards keep their own brand accent. */
.svc-platform-note.is-ford { border-top-color: var(--ford); }
.svc-platform-note.is-honda { border-top-color: var(--honda); }
.svc-band-ink .svc-platform-note.is-mopar .eyebrow { color: #FF9AA8; }
.svc-band-ink .svc-platform-note.is-ford .eyebrow { color: #9CC3EC; }
.svc-band-ink .svc-platform-note.is-honda .eyebrow { color: #FF8A80; }
.svc-platform-note.is-mopar { border-top-color: var(--mopar); }

/* ---------- shared process band ---------- */
.process-band {
  margin: 30px 0 0;
  padding: 34px 0 36px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--band);
}
.process-band h2 { margin-top: 0; }
.process-band .section-lede { margin-bottom: 0; }
.process-count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.process-count b { color: var(--accent); font: 800 42px/1 var(--display); letter-spacing: .01em; }
.process-count span { max-width: 650px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 720px) { .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.process-step {
  position: relative;
  min-width: 0;
  padding: 18px 18px 16px 58px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.process-step:nth-child(3n+1) { border-top-color: var(--mopar); }
.process-step:nth-child(3n+2) { border-top-color: var(--ford); }
.process-step:nth-child(3n) { border-top-color: var(--honda); }
.process-num {
  position: absolute;
  left: 16px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font: 700 14px/1 var(--display);
}
.process-step:nth-child(3n+1) .process-num { background: var(--mopar); }
.process-step:nth-child(3n+2) .process-num { background: var(--ford); }
.process-step:nth-child(3n) .process-num { background: var(--honda); }
body[data-platform]:not([data-platform=""]) .process-num { background: var(--p, var(--accent)); }
body[data-platform]:not([data-platform=""]) .process-step { border-top-color: var(--p, var(--accent)); }
.process-step h3 { margin: 0 0 5px; font-size: 20px; line-height: 1.1; }
.process-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.process-signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0 0;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--ink-text);
  box-shadow: var(--shadow-lift);
}
.process-signoff > div:first-child { flex: 1 1 420px; }
.process-signoff .eyebrow { margin: 0 0 5px; color: var(--hero-accent-2); font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.process-signoff h3 { margin: 0 0 6px; color: #FFFFFF; font-size: 24px; }
.process-signoff p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.process-links { display: flex; flex-wrap: wrap; gap: 8px; }
.process-links .sample-coming { cursor: default; }
.process-links .cta.sample-coming:hover { filter: none; transform: none; }
.process-signoff .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.process-signoff .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }

/* ---------- contact ---------- */
.contact-band-light { background: var(--surface); }
.contact-band-tint { background: var(--band); }
.contact-band-ink { background: var(--ink); color: var(--ink-text); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .contact-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 840px) { .contact-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-card {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.contact-card h2, .contact-card h3 { margin-top: 0; }
.contact-card h2 { font-size: 28px; overflow-wrap: anywhere; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-primary { border-top-color: var(--accent-2); }
.contact-primary h2 { color: var(--accent); }
.contact-muted { background: var(--surface-2); border-top-color: var(--border); }
.contact-band-ink h2 { color: #FFFFFF; }
.contact-band-ink .section-lede, .contact-band-ink p { color: var(--ink-muted); }
.contact-band-ink .contact-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.contact-final > div:first-child { flex: 1 1 460px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-band-ink .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.contact-band-ink .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }

/* ---------- account: designed bands, not a text page ---------- */
main[data-kind="account"] { background: var(--band-2); }
.acct-hero {
  padding: 40px 0 38px;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 4px solid var(--accent);
}
.acct-hero h1 { margin-top: 0; color: #FFFFFF; }
.acct-hero .lede { max-width: 760px; color: var(--ink-muted); }
.acct-hero .kicker { color: var(--hero-accent); }
.acct-hero .crumbs { color: var(--ink-muted); }
.acct-hero .crumbs a { color: #FFFFFF; }
.acct-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.acct-status span {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  color: #FFFFFF;
  font: 700 12px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.acct-band { padding: 42px 0 38px; border-bottom: 1px solid var(--border); }
.acct-band-light { background: var(--surface); }
.acct-band-tint { background: var(--band); }
.acct-band-platforms { background: var(--ink); color: var(--ink-text); }
.acct-band-platforms h2, .acct-band-platforms h3 { color: #FFFFFF; }
.acct-band-platforms .kicker { color: var(--hero-accent-2); }
.acct-band-platforms .section-lede { color: var(--ink-muted); }
.acct-band-ink { background: var(--ink); color: var(--ink-text); }
.acct-band-ink h2 { color: #FFFFFF; }
.acct-band-ink p { color: var(--ink-muted); }
.acct-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
@media (min-width: 700px) {
  .acct-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) { .acct-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acct-card {
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.acct-card h3 { margin: 0 0 6px; }
.acct-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.acct-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 14px/1 var(--display);
}
.acct-note {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-left: 4px solid var(--accent-2);
  border-radius: 0 10px 10px 0;
  background: var(--band);
  color: var(--muted);
  font-size: 14px;
}
.acct-card-list ul.ticks li { color: var(--muted); }
.acct-plat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-top: 6px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.acct-plat:hover { transform: translateY(-2px); color: var(--text); box-shadow: var(--shadow-lift); }
.acct-plat h3 { margin: 0 0 6px; color: var(--text); font-size: 24px; }
.acct-plat p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.acct-plat .go { margin-top: auto; padding-top: 14px; font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.acct-plat.is-mopar { border-top-color: var(--mopar); }
.acct-plat.is-mopar .eyebrow, .acct-plat.is-mopar .go { color: var(--mopar-accent); }
.acct-plat.is-ford { border-top-color: var(--ford); }
.acct-plat.is-ford .eyebrow, .acct-plat.is-ford .go { color: var(--ford-accent); }
.acct-plat.is-honda { border-top-color: var(--honda); }
.acct-plat.is-honda .eyebrow, .acct-plat.is-honda .go { color: var(--honda-accent); }
.acct-plat.is-civic { border-top-color: var(--civic); }
.acct-plat.is-civic .eyebrow, .acct-plat.is-civic .go { color: var(--civic-accent); }
.acct-band-platforms .acct-plat { background: var(--surface); }
.acct-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.acct-final > div:first-child { flex: 1 1 460px; }
.acct-links { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-band-ink .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.acct-band-ink .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }

/* ---------- sample pages: report and Full Custom package ---------- */
.sample-hero {
  padding: 42px 0 38px;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 5px solid var(--accent);
}
.sample-hero.is-mopar { border-bottom-color: var(--mopar); }
.sample-hero.is-ford { border-bottom-color: var(--ford); }
.sample-hero.is-honda { border-bottom-color: var(--honda); }
.sample-hero h1 { max-width: 980px; margin-top: 0; color: #FFFFFF; }
.sample-hero .lede { max-width: 850px; color: var(--ink-muted); }
.sample-hero .kicker { color: var(--hero-accent); }
.sample-hero .crumbs { color: var(--ink-muted); }
.sample-hero .crumbs a { color: #FFFFFF; }
.sample-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.sample-meta span {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #FFFFFF;
  font: 700 12px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sample-band { padding: 40px 0 38px; border-bottom: 1px solid var(--border); }
.sample-band-light { background: var(--surface); }
.sample-band-tint { background: var(--band); }
.sample-band-ink { background: var(--ink); color: var(--ink-text); }
.sample-band-ink h2 { color: #FFFFFF; }
.sample-band-ink p { color: var(--ink-muted); }
.sample-grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 820px) { .sample-grid-2 { grid-template-columns: 1.1fr .9fr; } }
.sample-card {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sample-card h2 { margin-top: 0; font-size: 25px; }
.sample-card h3 { margin-top: 0; }
.sample-card p:last-child { margin-bottom: 0; }
.sample-goal { border-top-color: var(--mopar); }
.sample-goal .eyebrow { color: var(--mopar-accent); }
.sample-table-wrap { max-width: 100%; margin: 16px 0 0; overflow-x: auto; }
.sample-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; }
.sample-table caption {
  caption-side: top;
  padding: 0 0 8px;
  color: var(--muted);
  font: 700 12px/1.3 var(--display);
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}
.sample-table th, .sample-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.sample-table th { background: var(--surface-2); color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.sample-table tr:last-child td { border-bottom: 0; }
.sample-meta-line { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.status { font-weight: 700; white-space: nowrap; }
.status.ok { color: var(--success); }
.status.watch { color: var(--warn); }
.status.fix { color: var(--danger); }
.sample-findings { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 860px) { .sample-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sample-finding {
  min-width: 0;
  padding: 18px 20px 14px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sample-finding.watch { border-left-color: var(--warn); }
.sample-finding.info { border-left-color: var(--success); }
.finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.finding-head h3 { margin: 0; font-size: 21px; }
.tag {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 700 11px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tag.watch { color: var(--warn); border-color: var(--warn); }
.tag.info { color: var(--success); border-color: var(--success); }
.sample-finding p { margin: 0 0 9px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sample-finding p b { color: var(--text); }
.sample-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: sample-step; display: grid; gap: 12px; }
.sample-steps li { position: relative; padding: 16px 18px 14px 56px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1.5; }
.sample-steps li::before { counter-increment: sample-step; content: counter(sample-step); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mopar); color: #FFFFFF; font: 700 13px/1 var(--display); }
.sample-steps b { color: var(--text); }
.sample-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.sample-final > div:first-child { flex: 1 1 500px; }
.sample-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sample-band-ink .cta.alt { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.sample-band-ink .cta.alt:hover { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }

/* Full Custom sample package */
.fc-platforms, .fc-get-grid, .fc-closed-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 820px) {
  .fc-platforms, .fc-get-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-closed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fc-plat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-top: 6px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.fc-plat h3 { margin: 0 0 6px; color: var(--text); font-size: 24px; }
.fc-plat p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.fc-plat .cta { margin-top: auto; align-self: flex-start; }
.fc-plat.is-mopar { border-top-color: var(--mopar); }
.fc-plat.is-mopar .eyebrow { color: var(--mopar-accent); }
.fc-plat.is-mopar .cta { background: var(--mopar); color: #FFFFFF; }
.fc-plat.is-ford { border-top-color: var(--ford); }
.fc-plat.is-ford .eyebrow { color: var(--ford-accent); }
.fc-plat.is-ford .cta { background: var(--ford); color: #FFFFFF; }
.fc-plat.is-honda { border-top-color: var(--honda); }
.fc-plat.is-honda .eyebrow { color: var(--honda-accent); }
.fc-plat.is-honda .cta { background: var(--honda); color: #FFFFFF; }
.fc-get {
  position: relative;
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.fc-get:nth-child(1) { border-top-color: var(--mopar); }
.fc-get:nth-child(2) { border-top-color: var(--ford); }
.fc-get:nth-child(3) { border-top-color: var(--honda); }
.fc-get:nth-child(4) { border-top-color: var(--accent-2); }
.fc-get h3 { margin: 0 0 6px; }
.fc-get p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.fc-num { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font: 700 13px/1 var(--display); }
.fc-get:nth-child(1) .fc-num { background: var(--mopar); }
.fc-get:nth-child(2) .fc-num { background: var(--ford); }
.fc-get:nth-child(3) .fc-num { background: var(--honda); }
.fc-get:nth-child(4) .fc-num { background: var(--accent-2); color: var(--accent-ink); }
.fc-note { margin: 16px 0 0; padding: 12px 15px; border-left: 4px solid var(--accent-2); border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.sample-band-tint .fc-plat, .sample-band-tint .fc-get { background: var(--surface); }

@media (max-width: 620px) {
  .process-band, .acct-band, .contact-band, .sample-band { padding-top: 30px; padding-bottom: 30px; }
  .process-step { padding-left: 54px; }
  .sample-hero, .acct-hero { padding: 30px 0 30px; }
  .sample-card, .contact-card, .acct-card, .fc-plat, .fc-get { padding: 17px 16px; }
}
@media print {
  .process-band, .acct-band, .contact-band, .sample-band { background: #FFFFFF !important; color: #000000 !important; }
  .process-signoff { background: #FFFFFF !important; color: #000000 !important; }
  .process-signoff h3, .process-signoff p, .process-count b,
  .sample-band-ink h2, .sample-band-ink p, .acct-band-ink h2, .acct-band-ink p { color: #000000 !important; }
}

/* Shared small label used by the new cards and sample pages. */
.eyebrow { margin: 0 0 6px; color: var(--accent); font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.story-lede p { max-width: 840px; color: var(--text); font-size: 19px; line-height: 1.55; }

/* Full Custom package: four cards, 2x2 on tablet and one row on wide screens. */
@media (min-width: 820px) { .fc-get-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .fc-get-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Data tables become readable cards on phones instead of a clipped 5-column grid. */
@media (max-width: 640px) {
  .sample-table-wrap { overflow-x: visible; }
  .sample-table { display: block; width: 100%; background: transparent; }
  .sample-table caption { display: block; width: 100%; padding-bottom: 6px; white-space: normal; }
  .sample-table thead { display: none; }
  .sample-table tbody, .sample-table tr, .sample-table td { display: block; width: 100%; }
  .sample-table tr {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }
  .sample-table td { border: 0; padding: 3px 0; }
  .sample-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font: 700 10px/1.3 var(--display);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .sample-table tr:last-child td { border-bottom: 0; }
}


/* Round-2 fixes: contrast, targets and the narrowest header. */
.svc-hero .svc-chooser-line a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.svc-hero .svc-chooser-line { color: var(--ink-muted); }
.trust-hero .updated-note, .trust-hero .updated-note b { color: #FFFFFF; }
.trust-hero .updated-note span { color: #D7E2EA; }
.svc-samples .svc-fine { color: var(--ink-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
/* A support address is longer than a 195px CSS line; let it break instead of
   pushing the page sideways at 200% zoom. */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.process-count b { font-size: clamp(26px, 14vw, 42px); }
.menu-btn, .search-btn { min-width: 44px; min-height: 44px; }
.search-btn { width: 44px; }
.search-btn::before { left: 13px; top: 13px; }
.search-btn::after { left: 27px; top: 29px; }
.cta.small { min-height: 44px; }
.guide-service {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 16px 0 18px; padding: 14px 16px;
  border: 1px solid var(--p-border, var(--border));
  border-left: 5px solid var(--p, var(--accent));
  border-radius: 12px; background: var(--p-soft, var(--surface-2));
}
.guide-service p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.4; }
.guide-service b { color: var(--p-accent, var(--accent)); }
.guide-service .cta { margin-left: auto; }
.guide-service .svc-fine { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 12px; }
@media (max-width: 620px) {
  .guide-service .cta { margin-left: 0; }
}
@media (max-width: 380px) {
  .site-header .wrap { gap: 4px; }
  /* The built brand logo is a 200x48 lockup, not a .wm wordmark.  Hide the
     lockup at the 195px CSS width a 390px phone gets at 200% zoom and leave a
     compact, still-clickable home mark so Search and Menu always fit. */
  .site-header .logo-pic, .site-header .logo-img,
  .site-header .logo .wm, .site-header .logo .mark { display: none; }
  .site-header .logo { gap: 0; flex: none; }
  .site-header .logo::before {
    content: "TB";
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--ink); color: var(--mark-fg);
    font: 800 14px/1 var(--display); letter-spacing: .01em;
  }
  .hdr-actions { gap: 4px; }
  .site-header .menu-btn { min-width: 0; padding: 0 10px; }
}

.back-top { margin: 22px 0 6px; }
.back-top a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; font-weight: 600; }

/* The social accounts exist before the profiles do; say so in plain text, not
   only in a title or aria-label a phone visitor never sees.  The footer line
   sits on dark ink; the About/Contact cards are light, so use --muted there. */
.social-note { margin: 6px 0 0; color: var(--ink-muted); font-size: 12px; }
main .social-note { color: var(--muted); }

/* 195 px is a 390 px phone at 200% zoom.  At that width a long table or email
   token must break rather than sit under the page's overflow clip. */
@media (max-width: 380px) {
  body { overflow-wrap: anywhere; }
  .guide-layout, .guide-finish, .trust-body, .contact-box, .summary-head { min-width: 0; }
  .status { white-space: normal; }
}

/* ---------- Turbo Civic (round 4) ---------- */
:root {
  --civic: #0E6E6A;
  --civic-accent: #0B5B57;
  --civic-soft: #E3F2F0;
  --civic-border: #B9DCD7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --civic: #177F78;
    --civic-accent: #8FE0D6;
    --civic-soft: #152B29;
    --civic-border: #2E5B57;
  }
}
.plt-civic { background: var(--civic-soft); border-color: var(--civic-border); border-top-color: var(--civic); }
.plt-civic h3, .plt-civic .go { color: var(--civic-accent); }
a.card.plt-civic:hover { border-color: var(--civic); }
.p-icon-civic { font-size: 14px; letter-spacing: 0; line-height: 1.05; text-align: center; }
.hub-badge-text {
  display: inline-grid; place-items: center; width: 64px; height: 64px; padding: 0 3px;
  border: 1.5px solid var(--civic-accent); border-radius: 10px; background: var(--civic-soft);
  color: var(--civic-accent); font: 800 17px/1.02 var(--display); letter-spacing: .02em;
  text-align: center; text-transform: uppercase;
}
@media (max-width: 600px) {
  .hub-badge-text { width: 52px; height: 52px; font-size: 14px; }
}
.svc-plat.is-civic { background: var(--civic-soft); border-color: var(--civic-border); color: var(--civic-accent); }
.svc-cover.is-civic { border-top-color: var(--civic); }
.svc-cover.is-civic .eyebrow { color: var(--civic-accent); }
.svc-cover.is-civic .cta { background: var(--civic); color: #FFFFFF; }
@media (min-width: 1080px) { .svc-coverage { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1079px) { .svc-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sister-site {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 16px 18px; border: 1px solid var(--border);
  border-left: 4px solid var(--ls-accent); border-radius: 12px; background: var(--surface);
}
.sister-site .p-icon, .sister-site .p-icon-img, .sister-site .p-icon-pic { width: 48px; height: 48px; font-size: 14px; }
.sister-site p { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sister-site p b { color: var(--text); }
.published { margin: 10px 0 0; color: var(--muted); font: 600 13px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
/* Hero fills are dark in both themes, so the date must be white rather than
   --muted.  The previous #52616F was 1.05-1.63:1 on the hub colours. */
.guide-hero .published, .hub-hero .published { color: #FFFFFF; }
.hub-hero .published { margin-top: 12px; }
@media print {
  .published, .hub-kicker, .hub-band-lede,
  .hub-hero .lede, .guide-hero .lede,
  .hub-hero .lede a, .guide-hero .lede a { color: #000000 !important; }
}

/* ==========================================================================
   LSSwapBible component port — 2026-11-06
   Source: site/static/css/site.css: tokens, hero, CTA, cards, chips, headings.
   Keep the existing TuneBible layout and platform fills. Public-page scope
   leaves the shared ordering portal untouched. No new fonts, images or JS.
   ========================================================================== */
@media screen {
  body[data-page] {
    color-scheme: dark;
    --bg: #0A1118;
    --surface: #141F2B;
    --surface-2: #1A2938;
    --border: #34485A;
    --text: #EDF3F8;
    --muted: #B1C0CD;
    --accent: #6FB3FF;
    --accent-2: #FFB454;
    --accent-ink: #06121E;
    --link: #8FC5FF;
    --link-hover: #C5E1FF;
    --chip: #1A2938;
    --ink: #070D14;
    --ink-2: #111B26;
    --ink-3: #1C2A39;
    --ink-text: #F2F6F9;
    --ink-muted: #B1C0CD;
    --band: #101D2B;
    --band-2: #0D1620;
    --success: #74DEA0;
    --warn: #FFD078;
    --danger: #FFAAA2;
    --warn-bg: #2A2113;
    --danger-bg: #2A1517;
    --good-bg: #12251A;
    --report-muted: #06121E;
    --mopar: #8C1D2F;
    --mopar-accent: #FFADB9;
    --mopar-soft: #281820;
    --mopar-border: #673541;
    --ford: #24425F;
    --ford-accent: #A8D0FA;
    --ford-soft: #101F30;
    --ford-border: #365673;
    --honda: #3E4A55;
    --honda-accent: #FFAAA2;
    --honda-soft: #20252E;
    --honda-border: #485362;
    --civic: #0E6E6A;
    --civic-accent: #9BE5DB;
    --civic-soft: #112A29;
    --civic-border: #35615D;
    --glow: var(--p-accent, var(--hero-accent));
    --glow-soft: color-mix(in srgb, var(--glow) 14%, transparent);
    --glow-edge: color-mix(in srgb, var(--glow) 32%, transparent);
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.24);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.4);
  }

  /* Source hero: 32px masked grid, radial accent light, raised emblem. */
  body[data-page] :is(.home-hero, .hub-hero, .guide-hero, .svc-hero, .trust-hero, .sample-hero, .acct-hero) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--ink);
    background-image: radial-gradient(ellipse at 90% 0%, var(--glow-soft), transparent 65%),
      linear-gradient(130deg, var(--ink-2), var(--ink));
    border-color: var(--glow-edge);
    box-shadow: inset 0 -1px var(--glow-edge), 0 12px 40px rgba(0,0,0,.24);
  }
  body[data-page] :is(.home-hero, .hub-hero, .guide-hero, .svc-hero, .trust-hero, .sample-hero, .acct-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  }
  body[data-page] .hub-hero {
    background-image: radial-gradient(ellipse at 100% 0%, var(--glow-soft), transparent 65%),
      linear-gradient(120deg, color-mix(in srgb, var(--p) 38%, var(--ink)), var(--ink));
  }
  body[data-page] :is(.hub-badge, .hub-badge-text, .p-icon-img, .p-icon-pic) {
    filter: drop-shadow(0 8px 20px var(--glow-edge));
  }
  body[data-page] .home-hero h1 { font-size: clamp(38px, 5.8vw, 78px); letter-spacing: -.01em; }
  body[data-page] h2::before { box-shadow: 0 0 14px var(--glow-edge); }

  /* Explicit alternating bands; no content-position selectors. */
  body[data-page] :is(.next-steps, .hub-facts, .svc-band-light, .contact-band-light, .sample-band-light, .acct-band-light) {
    background-color: var(--band-2);
    background-image: linear-gradient(155deg, var(--band-2), var(--ink));
  }
  body[data-page] :is(.platform-band, .start-here, .process-band, .svc-band-tint, .contact-band-tint, .sample-band-tint, .acct-band-tint) {
    background-color: var(--band);
    background-image: linear-gradient(120deg, var(--band), var(--band-2));
  }
  body[data-page] :is(.home-close, .svc-band-ink, .contact-band-ink, .sample-band-ink, .process-signoff) {
    background-color: var(--ink);
    background-image: radial-gradient(ellipse at 100% 0%, var(--glow-soft), transparent 65%),
      linear-gradient(135deg, var(--ink-2), var(--ink));
  }

  /* Source card surface, lift, icon chip and accent edge. The opaque base
     keeps glass highlights predictable for contrast without backdrop blur. */
  body[data-page] :is(.card, .next-card, .start-card, .fact-panel, .gcard, .toc-card, .gsec,
    .trust-card, .contact-card, .sample-card, .sample-finding, .process-step, .svc-cover,
    .svc-card, .fc-plat, .fc-get, .acct-card, .report-card, .door) {
    background-image: linear-gradient(145deg, rgba(255,255,255,.035), transparent 55%);
    box-shadow: inset 0 1px rgba(255,255,255,.07), var(--shadow);
  }
  body[data-page] :is(.plt-mopar, .is-mopar) { --glow: var(--mopar-accent); --button: var(--mopar); }
  body[data-page] :is(.plt-ford, .is-ford) { --glow: var(--ford-accent); --button: var(--ford); }
  body[data-page] :is(.plt-honda, .is-honda) { --glow: var(--honda-accent); --button: var(--honda); }
  body[data-page] :is(.plt-civic, .is-civic) { --glow: var(--civic-accent); --button: var(--civic); }
  body[data-page] :is(.card.platform, .start-card, .guide-summary, .contact-primary) {
    box-shadow: inset 0 1px rgba(255,255,255,.07), var(--shadow), 0 6px 24px color-mix(in srgb, var(--glow) 9%, transparent);
  }
  body[data-page] :is(.chip, .status, .read-time, .svc-plat, .hub-badge-text) {
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 3px 12px rgba(0,0,0,.18);
  }
  body[data-page] .card .ico {
    background: var(--ink-2);
    color: var(--glow);
    border: 1px solid var(--glow-edge);
    box-shadow: 0 6px 18px var(--glow-soft);
  }

  /* Source CTA: accent shadow, 10px corners, .15s lift. */
  body[data-page] .cta {
    border-radius: 10px;
    box-shadow: 0 6px 18px var(--glow-soft);
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  body[data-page] .cta:not(.alt):not(.ghost) { background-color: var(--button, var(--p, #0B5CAB)); color: #FFFFFF; }
  body[data-page] .next-report { background-color: #0B5CAB; color: #FFFFFF; }
  body[data-page] .next-report :is(.next-num, h3, p, .go) { color: #FFFFFF; }
  body[data-page] :is(.process-num, .fc-num) { color: var(--accent-ink); }
  body[data-page] .process-step .process-num,
  body[data-page] .fc-get:not(:nth-child(4)) .fc-num { color: #FFFFFF; }
  body[data-page]:not([data-platform=""]) .process-num { color: #FFFFFF; }
  body[data-page] .site-header { background: var(--ink-2); border-bottom-width: 2px; }
  body[data-page] .site-header .nav { background-color: var(--ink-2); }
  body[data-page] .site-header { box-shadow: 0 2px 20px rgba(0,0,0,.3), 0 1px 12px var(--glow-soft); }

  @media (hover: hover) {
    body[data-page] :is(a.card, .next-card, .start-card, .door, a.svc-cover):hover {
      transform: translateY(-3px);
      border-color: var(--glow);
      box-shadow: var(--shadow-lift), 0 0 24px color-mix(in srgb, var(--glow) 18%, transparent);
    }
    body[data-page] .cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px var(--glow-edge);
    }
  }
  @media (max-width: 600px) {
    body[data-page] .home-hero h1 { font-size: clamp(34px, 11vw, 46px); }
  }
}
/* Static glows never animate. Disable hover displacement as well as transitions
   for visitors requesting reduced motion (source component accessibility). */
@media (prefers-reduced-motion: reduce) {
  body[data-page] .cta, body[data-page] .cta:hover,
  body[data-page] :is(a.card, .next-card, .start-card, .door, a.svc-cover):hover {
    transform: none;
    transition: none;
  }
}

@media screen {
  body[data-page] .card.platform { border-top-color: var(--glow); }
  body[data-page] :is(.card.platform, .svc-cover, .fc-plat, .acct-plat, .sample-hero) {
    --glow-soft: color-mix(in srgb, var(--glow) 14%, transparent);
    --glow-edge: color-mix(in srgb, var(--glow) 32%, transparent);
  }
}

/* Raul's presentation pilot: only explicitly marked pilot components. */
@media screen {
  body[data-page] .pilot-start-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
  body[data-page] .pilot-start-actions .cta { margin: 0; text-align: center; white-space: normal; }
  body[data-page] .pilot-badge { display: block; width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px solid var(--glow-edge); border-radius: 10px; background: var(--ink-2); color: var(--text); }
  body[data-page] .pilot-details { margin: 16px 0; border: 1px solid var(--glow-edge); border-radius: 12px; background: var(--ink-2); color: var(--text); overflow: hidden; }
  body[data-page] .pilot-details > summary { padding: 18px 20px; font-weight: 700; cursor: pointer; color: var(--text); line-height: 1.5; }
  body[data-page] .pilot-details > summary span { display: block; margin-top: 8px; font-weight: 400; color: var(--muted); }
  body[data-page] .pilot-details[open] { border-color: var(--glow); box-shadow: 0 0 18px var(--glow-soft); }
  body[data-page] .pilot-details[open] > summary { border-bottom: 1px solid var(--glow-edge); }
  body[data-page] .pilot-details > summary:focus-visible { outline: 3px solid var(--glow); outline-offset: -5px; border-radius: 10px; }
  body[data-page] .pilot-answer { padding: 4px 20px 18px; max-width: 78ch; }
  body[data-page] .pilot-answer p { max-width: 72ch; }
  body[data-page] .pilot-files { width: 100%; table-layout: fixed; margin: 24px 0; }
  body[data-page] .pilot-files th:first-child { width: 28%; }
  body[data-page] .pilot-files :is(th,td) { white-space: normal; overflow-wrap: anywhere; }
  body[data-page] .pilot-files caption { text-align: left; font-weight: 700; padding: 10px 0; }
  body[data-page] .pilot-start-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  body[data-page] .pilot-process-short .process-step { min-height: 0; }
  body[data-page] .pilot-coverage { color: var(--text); border-left: 3px solid var(--glow); padding-left: 14px; max-width: 70ch; }
  body[data-page="services"] :is(#tune-report,#log-analyzer) > .wrap > p { max-width: 76ch; }
  @media (max-width: 600px) {
    body[data-page] .pilot-start-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    body[data-page] .pilot-start-actions .cta { font-size: 13px; padding: 12px 8px; }
    body[data-page] .pilot-start-steps { grid-template-columns: 1fr; }
    body[data-page="hub"][data-platform="mopar"] .hub-hero { padding: 24px 20px; }
    body[data-platform="mopar"] .hub-hero h1 { font-size: 32px; }
    body[data-platform="mopar"] .hub-hero .lede { font-size: 16px; line-height: 1.55; }
    body[data-platform="mopar"] .hub-actions { margin-top: 16px; }
  }
}

/* ---------- R13: first-screen facts, route choice, tap targets, zoom ---------- */
.glance {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 14px;
  background: rgba(4, 11, 17, .30);
  color: #FFFFFF;
}
.glance-kicker {
  margin: 0 0 6px;
  color: #FFFFFF;
  font: 700 12px/1.1 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.glance-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 8px;
  color: #FFFFFF;
  font: 700 16px/1.2 var(--display);
}
.glance-price s { color: #D7E2EA; }
.glance-price b { font-size: 30px; line-height: 1; }
.glance-price span {
  color: #D7E2EA;
  font: 600 12px/1.2 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.glance-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #EAF1F7;
  font-size: 13px;
  line-height: 1.35;
}
.glance-facts li { margin: 0; }
.glance-facts b { color: #FFFFFF; }
.glance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.glance-actions .cta {
  margin: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}
.glance-routes { display: grid; grid-template-columns: 1fr; gap: 10px; }
.glance-route {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
}
.glance-route h3, .glance-route-name { margin: 0 0 2px; color: #FFFFFF; font-size: 20px; line-height: 1.15; }
.glance-route-name b { font-weight: 800; }
.glance-route .glance-price { margin-bottom: 6px; }
.glance-route .glance-price b { font-size: 24px; }
.glance-route .glance-facts { font-size: 12.5px; }
.glance-route .glance-actions { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
  .glance-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glance-routes { grid-template-columns: 1fr 1fr; }
  .glance-route .glance-actions { grid-template-columns: 1fr 1fr; }
}

/* "On this page" and FAQ summaries are real tap targets in both orientations. */
.toc-card > summary.toc-title,
summary.toc-title {
  display: block;
  min-height: 44px;
  margin: 0 0 4px;
  padding: 12px 0;
  cursor: pointer;
}
.pilot-details.pilot-faq > summary { min-height: 44px; }

/* Guide sections fold on a phone, one at a time, with the words still in HTML. */
.gsec-toggle { display: none; }
.back-top-fixed { display: none; }
@media (max-width: 700px) {
  .gsec-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 2px 0 10px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font: 700 12px/1 var(--display);
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .gsec.is-collapsed .gsec-body { display: none; }
  .gsec-toggle:focus-visible { outline: 3px solid var(--p, var(--accent)); outline-offset: 2px; }
  .back-top-fixed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 999px;
    background: #FFFFFF;
    color: #0A141D;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .30);
    font: 700 12px/1 var(--display);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

/* Short landscape screens keep the H1, the facts line and the buttons. */
@media (max-height: 560px) {
  .hub-hero, .svc-hero { padding-top: 12px; padding-bottom: 12px; }
  .hub-hero h1, .svc-hero h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.12; margin-bottom: 8px; }
  .hub-hero .lede, .svc-hero .lede,
  .hub-hero .published, .guide-hero .lede, .guide-hero .published { display: none; }
  .hub-badge-row { margin-bottom: 6px; }
  .hub-badge, .hub-badge img { width: 40px; height: 40px; }
  .glance { margin-top: 8px; padding: 10px 12px; }
  .glance-facts { font-size: 12px; }
  .glance-price b { font-size: 24px; }
  .hub-actions { margin-top: 10px; }
  .pilot-coverage { margin: 8px 0 0; font-size: 13px; }
}

/* 195 px is a 390 px phone at 200% zoom: keep the hero readable and tappable. */
@media (max-width: 260px) {
  .hub-hero h1, .svc-hero h1, .guide-hero h1 { font-size: 24px; line-height: 1.15; }
  .hub-hero .lede, .svc-hero .lede, .guide-hero .lede,
  .hub-hero .published, .guide-hero .published { display: none; }
  .hub-badge-row { display: none; }
  .glance { padding: 8px 10px; }
  .glance-facts { font-size: 12px; }
  .glance-facts li:nth-child(3) { display: none; }
  .glance-actions, .glance-route .glance-actions { grid-template-columns: 1fr; gap: 6px; }
  .glance-actions .cta { font-size: 12px; padding: 8px 6px; }
  .hub-actions .cta { font-size: 12px; padding: 8px 6px; }
}

/* R13: compact two-route Honda choice and short-viewport/zoom guards. */
.glance-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.glance-route-grid .glance-route { padding: 10px 11px; }
.glance-route-grid .glance-route h3, .glance-route-grid .glance-route-name { font-size: 18px; }
.glance-route-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 8px; color: #EAF1F7; font-size: 12px; line-height: 1.3; }
.glance-route-meta span { color: #D7E2EA; }
.glance-route-grid .glance-actions { grid-template-columns: 1fr; gap: 6px; margin-top: 0; }
.glance-route-grid .glance-actions .cta { font-size: 12px; padding: 8px 6px; }
.glance-shared { margin-bottom: 2px; }

@media (max-height: 560px) {
  body[data-page] .hub-hero .hub-badge-row { display: none; }
  body[data-page] .hub-hero h1 { font-size: clamp(22px, 3.6vw, 30px); }
  body[data-page] .glance { margin-top: 6px; padding: 8px 10px; }
  body[data-page] .glance-price { margin-bottom: 4px; }
  body[data-page] .glance-price b { font-size: 22px; }
  body[data-page] .glance-route-grid .glance-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 260px) {
  body[data-page] .hub-hero h1,
  body[data-page] .svc-hero h1,
  body[data-page] .guide-hero h1 { font-size: 18px; line-height: 1.12; margin-bottom: 6px; }
  body[data-page] .glance-route-grid { grid-template-columns: 1fr; }
  body[data-page] .glance-facts > li:nth-child(n+2) { display: none; }
  body[data-page] .glance-price b { font-size: 22px; }
  body[data-page] .glance-route-grid .glance-actions { grid-template-columns: 1fr; }
}

/* R13: the shortest landscape and 200%-zoom heroes keep one key line plus a
   working start button instead of stacking the full fact list. */
@media (max-height: 560px) {
  body[data-page] .glance { margin-top: 4px; }
  body[data-page] .glance-shared li:nth-child(n+2),
  body[data-page] .glance-route-meta { display: none; }
  body[data-page] .glance-route-grid .glance-route { padding: 8px 9px; }
  body[data-page] .glance-route-grid .glance-route h3,
  body[data-page] .glance-route-grid .glance-route-name { font-size: 16px; margin-bottom: 6px; }
}
@media (max-width: 260px) {
  body[data-page] .glance-facts { display: none; }
  body[data-page] .glance-price s,
  body[data-page] .glance-price span { display: none; }
  body[data-page] .glance-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  body[data-page] .glance-actions .cta { font-size: 11px; padding: 6px 4px; }
  body[data-page] .glance-route-grid .glance-route-meta { display: none; }
}
@media (max-width: 260px) {
  body[data-page] .glance-kicker { display: none; }
  body[data-page] .hub-hero,
  body[data-page] .svc-hero { padding-top: 8px; padding-bottom: 8px; }
  body[data-page] .glance { padding: 6px 8px; }
  body[data-page] .glance-price { margin-bottom: 2px; font-size: 14px; }
}
@media (max-height: 560px) {
  body[data-page] .glance-shared { display: none; }
  body[data-page] .glance-routes .glance-kicker { display: none; }
}