/* TuneBible brand additions on top of the locked design stylesheet. */
.platform-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.platform-head h3 { margin: 0; }
.p-icon { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--ink); color: var(--mark-fg); font: 800 18px/1 var(--display); letter-spacing: .02em; }
.p-icon-img { width: 64px; height: 64px; flex: none; object-fit: contain; }
.logo-img { display: block; width: auto; height: 40px; }
.logo-pic, .p-icon-pic { display: inline-flex; align-items: center; }
.pending { color: var(--muted); }
.pending-link { color: var(--muted); }
.pending-link .pending { font-size: .92em; }
.door.is-pending { cursor: default; border-left-color: var(--border); }
.door.is-pending::after { content: "\2013"; color: var(--muted); }
.door.is-pending:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border); }
.site-footer .logo .p-icon { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 520px) { .p-icon, .p-icon-img { width: 52px; height: 52px; } }

/* Trust pages: About, methodology, corrections, privacy, account. */
.trust-hero { padding: 38px 0 36px; background: var(--ink); color: var(--ink-text); border-bottom: 4px solid var(--accent); }
.trust-hero .crumbs { margin: 0 0 14px; color: var(--ink-muted); }
.trust-hero .crumbs a { color: #FFFFFF; }
.trust-hero .kicker { margin: 0 0 8px; color: var(--hero-accent); }
.trust-hero h1 { max-width: 900px; margin: 0 0 12px; color: #FFFFFF; }
.trust-hero .lede { max-width: 780px; margin: 0; color: var(--ink-muted); }
.trust-body { padding-top: 30px; }
.trust-body > h2:first-child { margin-top: 0; }
.trust-body h2 { margin-top: 32px; }
.trust-body p, .trust-body li { max-width: 780px; }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 22px; }
@media (min-width: 700px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
.trust-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.trust-card h3 { margin: 0 0 8px; }
.trust-card p:last-child, .trust-card ul:last-child { margin-bottom: 0; }
.contact-box { margin: 18px 0 6px; padding: 20px 22px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--surface); }
.contact-box p:last-child { margin-bottom: 0; }
.updated-note { margin: 18px 0 22px; padding: 14px 18px; border-left: 4px solid var(--accent-2); border-radius: 0 10px 10px 0; background: var(--surface-2); }
.updated-note b { display: block; margin-bottom: 4px; color: var(--text); font: 700 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.updated-note p { margin: 0; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.foot-links a { color: var(--ink-text); font: 700 12px/1.9 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.foot-links a:hover { color: var(--hero-accent-2); }
.trust-hero .updated-note { background: rgba(255,255,255,.08); border-left-color: var(--hero-accent-2); color: #FFFFFF; }
.trust-hero .updated-note b { color: #FFFFFF; }
.trust-hero .updated-note span { color: var(--ink-muted); }
@media (max-width: 600px) {
  .home-hero { padding: 28px 0 26px; }
  .home-hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .home-hero .lede { font-size: 16px; line-height: 1.5; }
  .home-welcome .hero-actions { gap: 8px; }
  .home-welcome .hero-actions .cta { flex: 1 1 46%; }
  .home-welcome .hero-actions .cta.ghost { display: none; }
}

/* Round-1 fixes: sticky, tap targets, search, cards, figures, socials. */
html, body { overflow-x: clip; }
/* The UA placeholder grey is #757575: 4.25:1 on the light field and 4.12:1
   on the dark field, under the 4.5:1 body-text rule (R8 DeepSeek high 2).
   Use the same themed muted ink the portal already uses. */
.search-form input::placeholder { color: var(--muted); opacity: 1; }
.search-form input::-webkit-input-placeholder { color: var(--muted); opacity: 1; }
.search-form input::-moz-placeholder { color: var(--muted); opacity: 1; }
.site-header { position: sticky; }
.site-footer .foot-links a, .site-footer .cols a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer .foot-links { gap: 4px 16px; }
.hero-actions .cta.ghost { background: transparent; color: var(--ink-text); border-color: rgba(255,255,255,.55); }
.hero-actions .cta.ghost:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.home-welcome .hero-note { margin: 14px 0 0; color: var(--ink-muted); font-size: 14px; }
.social-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.social-icon { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); display: inline-grid; place-items: center; color: var(--muted); background: var(--surface); cursor: pointer; }
.social-icon svg { width: 18px; height: 18px; fill: currentColor; }
.social-row a.social-icon { display: inline-grid; place-items: center; padding: 0; line-height: 1; text-decoration: none; }
.social-icon:hover, .social-icon:focus-visible { border-color: var(--accent); color: var(--text); }
.site-footer .social-icon { background: transparent; border-color: rgba(255,255,255,.24); color: var(--ink-text); }
.site-footer .social-icon:hover, .site-footer .social-icon:focus-visible { border-color: var(--hero-accent-2); color: var(--hero-accent-2); }
.search-panel { max-height: calc(100vh - 64px); overflow: hidden; }
.search-inner { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
.search-results { max-height: min(56vh, 430px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.search-count { margin: 8px 0 0; color: var(--muted); font: 700 12px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.search-results a { min-height: 44px; }
.gcard { padding: 0; }
.gcard-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; color: var(--text); text-decoration: none; border-radius: 10px; }
.gcard-link .gcard-title, .gcard-link .gcard-summary { min-width: 0; overflow-wrap: anywhere; }
.gcard-link .gcard-title { grid-column: 1; }
.gcard-link .gcard-summary { grid-column: 1; }
.gcard-link .gcard-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--p-accent, var(--accent)); font-weight: 700; white-space: nowrap; }
@media (max-width: 380px) {
  .gcard-link { grid-template-columns: minmax(0, 1fr); }
  .gcard-link .gcard-go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; white-space: normal; }
}
.gcard-link:hover { background: var(--surface-2); color: var(--text); }
.gcard-link:hover .gcard-title { text-decoration: underline; }
.svc-cover { display: block; color: inherit; text-decoration: none; }
.svc-cover:hover { color: inherit; }
.svc-cover .cta { margin-top: 10px; }
.svc-files { font-size: 14px; color: var(--muted); }
.svc-fine { font-size: 13px; color: var(--muted); }
.svc-samples { margin: 16px 0 0; font-weight: 600; }
.svc-samples .svc-fine { font-weight: 400; }
.svc-price small { font-weight: 400; color: var(--muted); }
.hub-not-covered { background: var(--surface-2); }
.hub-faq .faq h3 { margin-top: 22px; }
.table-cue { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
/* R9: the UA gives <figure> a 40px side margin.  On a 390px phone that left
   the scroll frame only 244px wide, so the first box label was cut until the
   visitor swiped.  Keep the vertical rhythm but let the frame use the column. */
figure { margin: 40px 0; cursor: zoom-in; }
figure.is-zoomed { position: fixed; inset: 12px; z-index: 90; margin: 0; padding: 14px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lift); cursor: zoom-out; }
figure.is-zoomed img, figure.is-zoomed svg { width: 100%; height: auto; max-height: none; }
/* R10: a diagram keeps its label size at every width, not only on a phone.
   The figure media sits in a keyboard-focusable scroll region and is drawn at
   least 1100 CSS px wide; a 960-unit diagram therefore renders 12px source
   labels at about 13.75px.  The caption stays outside the scroll box. */
.diagram-scroll { max-width: 100%; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.diagram-scroll > svg, .diagram-scroll > img { display: block; width: 1100px !important; max-width: none !important; height: auto !important; }
.diagram-scroll > svg[role="img"] { background: #F3F6F8; border-radius: 10px; }
.diagram-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.diagram-summary { display: block; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.diagram-cue { display: block; margin: 7px 0 0; color: var(--muted); font-size: 13px; }
:is(.home-hero, .hero-band, .hub-hero, .guide-hero, .svc-hero, .trust-hero, .finish-next, .next-custom) .diagram-summary,
:is(.home-hero, .hero-band, .hub-hero, .guide-hero, .svc-hero, .trust-hero, .finish-next, .next-custom) .diagram-cue { color: #FFFFFF; }
html.fig-zoom, html.fig-zoom body { overflow: hidden; }
@media (max-width: 1019px) {
  .toc { gap: 2px 10px; }
  .toc a { display: flex; align-items: center; min-height: 44px; padding: 10px 8px; }
}
@media (max-width: 899px) { .search-panel, .search-inner { max-height: calc(100vh - 62px); } .search-results { max-height: 50vh; } }

/* Honda & Acura: one hub, two clearly separated routes.  The K-series route
   keeps the graphite/red Honda family; the turbo route uses the Civic teal
   family.  Both are typographic engine badges, never manufacturer logos. */
.route-switch { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 24px; }
@media (min-width: 760px) { .route-switch { grid-template-columns: 1fr 1fr; } }
.route-card { display: block; padding: 20px 22px; border: 1px solid var(--border); border-top: 6px solid var(--p, var(--accent)); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.route-card:hover { color: var(--text); border-color: var(--p, var(--accent)); box-shadow: var(--shadow-lift); }
.route-card.is-honda { --p: var(--honda); --p-accent: var(--honda-accent); --p-soft: var(--honda-soft); --p-border: var(--honda-border); background: var(--honda-soft); }
.route-card.is-civic { --p: var(--civic); --p-accent: var(--civic-accent); --p-soft: var(--civic-soft); --p-border: var(--civic-border); background: var(--civic-soft); }
.route-card b { display: block; margin: 4px 0 6px; color: var(--p-accent, var(--accent)); font: 800 clamp(26px, 4vw, 38px)/1 var(--display); letter-spacing: .02em; }
.route-card > span:not(.route-tag):not(.route-go) { display: block; color: var(--text); font-size: 14px; line-height: 1.45; }
.route-tag { display: inline-block; color: var(--p-accent, var(--accent)); font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.route-go { display: block; margin-top: 12px; color: var(--p-accent, var(--accent)); font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.route-band { margin-top: 0; margin-bottom: 24px; padding-top: 30px; padding-bottom: 30px; background: var(--band); border-top: 6px solid var(--p, var(--accent)); border-bottom: 1px solid var(--p-border, var(--border)); }
.route-band.is-honda { --p: var(--honda); --p-accent: var(--honda-accent); --p-soft: var(--honda-soft); --p-border: var(--honda-border); }
.route-band.is-civic { --p: var(--civic); --p-accent: var(--civic-accent); --p-soft: var(--civic-soft); --p-border: var(--civic-border); }
.hub-badge-pair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.route-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; flex-wrap: wrap; }
.route-head h2 { margin: 0; color: var(--p-accent, var(--accent)); }
.route-head .kicker { margin: 0 0 5px; color: var(--p-accent, var(--accent)); }
.route-badge.is-honda { border-color: var(--honda-border); background: var(--honda-soft); color: var(--honda-accent); }
.route-badge.is-civic { border-color: var(--civic-border); background: var(--civic-soft); color: var(--civic-accent); }
.route-lede { max-width: 880px; margin: 0 0 18px; color: var(--text); font-size: 17px; line-height: 1.55; }
.route-band h3 { margin-top: 26px; color: var(--text); }
.route-band .table-wrap { margin: 12px 0 18px; }
.route-band .svc-grid { margin-top: 14px; }
.route-band .svc-card { border-top-color: var(--p, var(--accent)); }
.route-band .svc-card .eyebrow { color: var(--p-accent, var(--accent)); }
.route-band .svc-card li::before { background: var(--p, var(--accent)); }
.route-band .svc-card .cta:not(.alt) { background: var(--p, var(--accent)); color: #FFFFFF; box-shadow: none; }
.route-band .svc-card .cta:not(.alt):hover { color: #FFFFFF; filter: brightness(1.08); }
.route-band .cta:not(.alt) { background: var(--p, var(--accent)); color: #FFFFFF; }
.route-band .cta.alt { color: var(--p-accent, var(--accent)); box-shadow: inset 0 0 0 2px var(--p-border, var(--border)); }
.route-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
@media (min-width: 1080px) { .svc-coverage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Site-wide presentation rollout: scan layers and phone TOC. */
body[data-page] .layout-points { margin: 12px 0 18px; padding-left: 0; list-style: none; }
body[data-page] .layout-points li { position: relative; margin: 7px 0; padding-left: 24px; max-width: 78ch; }
body[data-page] .layout-points li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--p, var(--accent)); }
.process-full-link { margin: 18px 0 0; font-weight: 700; }
.process-signoff-details { margin-top: 18px; }
.process-signoff-details .process-signoff { margin: 0; padding: 0; border: 0; background: transparent; }
.pilot-process-short .process-step { min-height: 0; }
.toc-card > summary.toc-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.toc-card > summary.toc-title::-webkit-details-marker { display: none; }
.toc-card > summary.toc-title::after { content: "+"; font: 700 18px/1 var(--display); }
.toc-card[open] > summary.toc-title::after { content: "−"; }
.toc-card > summary.toc-title:focus-visible { outline: 3px solid var(--p, var(--accent)); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 1019px) { .toc-card > summary.toc-title { margin-bottom: 6px; } .toc-card:not([open]) { padding-bottom: 12px; } }