/**
 * Precision Yard — shared public marketing chrome.
 * Consume var(--pub-py-*) from public-precision-yard-tokens.css only.
 * Clone of Find My Car masthead/card/CTA; DESIGN.md: full-perimeter 1px borders, no left rails.
 */

/* ── Layout wrap ─────────────────────────────────────────────────────────── */
.pub-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px 48px;
}
@media (min-width: 768px) {
    .pub-wrap {
        padding-left: 28px;
        padding-right: 28px;
    }
}

.pub-section {
    margin-bottom: 56px;
}

/* ── Full-bleed Home chapter bands ─────────────────────────────────────────
 * Sit between .pub-wrap blocks (same pattern as .pub-hero / .pub-services).
 * Do not use 100vw breakouts — those cause horizontal scroll.
 * --rules: light chip-bg + cyan top rule; featured-head on light.
 * --parts: pale cyan amber-fill.
 * --tools: navy + hatch; featured-head on-dark.
 */
.pub-band {
    width: 100%;
}

.pub-band-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
}

@media (min-width: 768px) {
    .pub-band-inner {
        padding: 64px 28px;
    }
}

/* Last About / Sell / Prices chapter (.pub-band--parts) fills leftover #main height so
 * body page-bg does not show as a stripe above the navy footer. */
#main:has(.about-page),
#main:has(.sell-page),
#main:has(.prices-page),
#main:has(.rules-page),
#main:has(.fmc-page),
#main:has(.contact-page),
#main:has(.tow-page),
#main:has(.saved-page),
#main:has(.account-page),
#main:has(.pub-inv-page) {
    display: flex;
    flex-direction: column;
}

#main:has(.about-page) #root,
#main:has(.sell-page) #root,
#main:has(.prices-page) #root,
#main:has(.rules-page) #root,
#main:has(.fmc-page) #root,
#main:has(.contact-page) #root,
#main:has(.tow-page) #root,
#main:has(.saved-page) #root,
#main:has(.account-page) #root,
#main:has(.pub-inv-page) #root {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.about-page,
.sell-page,
.prices-page,
.rules-page,
.fmc-page,
.contact-page,
.tow-page,
.saved-page,
.account-page,
.pub-inv-page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.about-page .pub-band--parts,
.sell-page .pub-band--parts,
.prices-page .pub-band--parts,
.rules-page .rules-band--close,
.fmc-page .pub-band--parts,
.contact-page .pub-band--parts,
.tow-page .pub-band--parts,
.saved-page .pub-band--parts,
.account-page .pub-band--parts {
    flex: 1 0 auto;
}

/* About / Sell / Prices / Contact / Find My Car — flat masthead (Rules pattern); lot-stage retired. */
.about-page .pub-masthead .pub-featured-kicker,
.sell-page .pub-masthead .pub-featured-kicker,
.prices-page .pub-masthead .pub-featured-kicker,
.contact-page .pub-masthead .pub-featured-kicker,
.fmc-page .pub-masthead .pub-featured-kicker {
    color: var(--pub-py-masthead-stat-label-muted);
}

.about-page .pub-masthead-inner--wide,
.sell-page .pub-masthead-inner--wide,
.prices-page .pub-masthead-inner--wide,
.contact-page .pub-masthead-inner--wide,
.fmc-page .pub-masthead-inner--wide {
    max-width: 1200px;
}

.about-page .pub-masthead.is-page-motion,
.sell-page .pub-masthead.is-page-motion,
.prices-page .pub-masthead.is-page-motion,
.contact-page .pub-masthead.is-page-motion,
.fmc-page .pub-masthead.is-page-motion {
    background-position: var(--pub-masthead-drift, 0%) 0;
    background-size: 220% 220%;
}

.about-page .pub-masthead-title .word,
.sell-page .pub-masthead-title .word,
.prices-page .pub-masthead-title .word,
.contact-page .pub-masthead-title .word,
.fmc-page .pub-masthead-title .word,
.about-page .pub-masthead-title .char,
.sell-page .pub-masthead-title .char,
.prices-page .pub-masthead-title .char,
.contact-page .pub-masthead-title .char,
.fmc-page .pub-masthead-title .char {
    display: inline-block;
}

.pub-about-lead-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.pub-about-lead-actions .pub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pub-py-control-h);
    color: var(--pub-py-amber);
}

.pub-about-lead-actions .pub-text-link:hover {
    color: var(--pub-py-amber-hover);
}

.pub-about-lead-actions .pub-text-link:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.about-page .pub-band--story {
    background: var(--pub-py-chip-bg);
}

.about-page .pub-about-story {
    max-width: 65ch;
}

.about-page .pub-about-story .pub-featured-lede {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 65ch;
    color: var(--pub-py-secondary);
}

.about-accent {
    position: relative;
    display: inline-block;
    color: var(--pub-py-amber);
}

.about-accent::after {
    content: none;
}

@media (prefers-reduced-motion: no-preference) {
    .about-accent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 3px;
        background: var(--pub-py-amber);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
        /* No-JS fallback: draw shortly after paint. PublicPageMotion overrides below. */
        animation: pub-accent-draw 360ms ease-out 200ms both;
    }
}

.sell-accent {
    position: relative;
    display: inline-block;
    color: var(--pub-py-amber);
}

.sell-accent::after {
    content: none;
}

@media (prefers-reduced-motion: no-preference) {
    .sell-accent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 3px;
        background: var(--pub-py-amber);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
        animation: pub-accent-draw 360ms ease-out 200ms both;
    }
}

/* ── Prices page (masthead + catalog) ────────────────────────────────────── */

.prices-accent {
    position: relative;
    display: inline-block;
    color: var(--pub-py-amber);
}

.prices-accent::after {
    content: none;
}

@media (prefers-reduced-motion: no-preference) {
    .prices-accent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 3px;
        background: var(--pub-py-amber);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
        animation: pub-accent-draw 360ms ease-out 200ms both;
    }
}

.contact-accent {
    position: relative;
    display: inline-block;
    color: var(--pub-py-amber);
}

.contact-accent::after {
    content: none;
}

@media (prefers-reduced-motion: no-preference) {
    .contact-accent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 3px;
        background: var(--pub-py-amber);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
        animation: pub-accent-draw 360ms ease-out 200ms both;
    }
}

.fmc-accent {
    position: relative;
    display: inline-block;
    color: var(--pub-py-amber);
}

.fmc-accent::after {
    content: none;
}

@media (prefers-reduced-motion: no-preference) {
    .fmc-accent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 3px;
        background: var(--pub-py-amber);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
        animation: pub-accent-draw 360ms ease-out 200ms both;
    }
}

/*
 * PublicPageMotion: hold accent underline until H1 char stagger finishes, then draw.
 * Without .is-page-motion the 200ms fallback above still applies.
 */
@media (prefers-reduced-motion: no-preference) {
    .pub-masthead.is-page-motion:not(.is-accent-ready) .about-accent::after,
    .pub-masthead.is-page-motion:not(.is-accent-ready) .sell-accent::after,
    .pub-masthead.is-page-motion:not(.is-accent-ready) .prices-accent::after,
    .pub-masthead.is-page-motion:not(.is-accent-ready) .contact-accent::after,
    .pub-masthead.is-page-motion:not(.is-accent-ready) .fmc-accent::after {
        animation: none;
        transform: scaleX(0);
    }

    .pub-masthead.is-page-motion.is-accent-ready .about-accent::after,
    .pub-masthead.is-page-motion.is-accent-ready .sell-accent::after,
    .pub-masthead.is-page-motion.is-accent-ready .prices-accent::after,
    .pub-masthead.is-page-motion.is-accent-ready .contact-accent::after,
    .pub-masthead.is-page-motion.is-accent-ready .fmc-accent::after {
        animation: pub-accent-draw 360ms ease-out both;
    }
}

/* ── Find My Car (/find-my-car/) — tool + steps + help; masthead above ── */
.fmc-tool {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.fmc-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 60px;
    padding: 16px 20px;
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.fmc-scan-btn:hover {
    background: var(--pub-py-amber-hover);
    box-shadow: var(--pub-py-detail-cta-hover-shadow);
}

.fmc-scan-btn:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.fmc-scan-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.fmc-scan-btn .material-icons {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: normal;
    overflow: hidden;
}

.fmc-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--pub-py-secondary);
    background: var(--pub-py-amber-bg);
    border: 1px solid var(--pub-py-border);
    border-radius: 10px;
}

.fmc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--pub-py-secondary);
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fmc-divider::before,
.fmc-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pub-py-border);
}

.fmc-input-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.fmc-input-row .fmc-input {
    flex: 1;
    min-width: 0;
}

.fmc-input.fmc-input-invalid,
.fmc-input.pub-field--invalid {
    border-color: var(--pub-py-error-border);
}

.fmc-go-btn {
    flex: 0 0 auto;
    width: 100%;
    min-height: 48px;
    min-width: 64px;
    padding: 12px 20px;
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 200ms ease;
}

.fmc-go-btn:hover {
    background: var(--pub-py-amber-hover);
}

.fmc-go-btn:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.fmc-go-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (min-width: 480px) {
    .fmc-input-row {
        flex-direction: row;
        align-items: stretch;
    }

    .fmc-go-btn {
        width: auto;
    }
}

.fmc-fallback {
    margin-top: 10px;
}

.fmc-vehicle-status {
    margin: 16px 0 0;
    min-height: 1.5em;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
}

.fmc-vehicle-status[aria-busy="true"] {
    min-height: 12rem;
}

/*
 * Identity result sits in the same tool card as the form — not a nested note well.
 * Strip .fmc-note chrome (border, amber fill, inset padding) so "Your Vehicle"
 * is not boxed. A top rule is the seam from the identifier field, not an outline.
 */
.fmc-note.fmc-result,
.fmc-result {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding: 20px 0 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--pub-py-border);
    border-radius: 0;
    box-shadow: none;
}

.fmc-result-title {
    margin: 0;
    font-family: var(--pub-py-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--pub-py-headline);
}

/* Programmatic focus after lookup must not leave a persistent ring on the heading.
   Keyboard :focus-visible still uses the public ring (WCAG 2.4.7). */
.fmc-result-title:focus {
    outline: none;
}

.fmc-result-title:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.fmc-vehicle-facts {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.fmc-vehicle-facts > div {
    display: grid;
    grid-template-columns: minmax(7rem, 32%) minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--pub-py-border);
}

.fmc-vehicle-facts > div:first-child {
    padding-top: 0;
}

.fmc-vehicle-facts > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fmc-vehicle-facts dt {
    margin: 0;
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pub-py-secondary);
}

.fmc-vehicle-facts dd {
    margin: 0;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--pub-py-headline);
    overflow-wrap: anywhere;
}

.fmc-fact-empty {
    font-weight: 500;
    color: var(--pub-py-secondary);
}

.fmc-result-note {
    margin: 0;
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
}

.fmc-result-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 4px 0 0;
}

.fmc-result-actions .pub-btn,
.fmc-result-actions .pub-btn--ghost {
    width: 100%;
    justify-content: center;
}

/* Ligature glyphs inherit .pub-btn letter-spacing and inflate the box; pin to 24px. */
.fmc-result-actions .pub-btn .material-icons,
.fmc-result-actions .pub-btn--ghost .material-icons {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: normal;
    overflow: hidden;
}

@media (min-width: 768px) {
    .fmc-note.fmc-result,
    .fmc-result {
        gap: 20px;
        padding-top: 24px;
    }

    .fmc-vehicle-facts > div {
        grid-template-columns: 9rem minmax(0, 1fr);
        column-gap: 24px;
        padding: 14px 0;
    }

    .fmc-vehicle-facts > div:first-child {
        padding-top: 0;
    }

    .fmc-vehicle-facts > div:last-child {
        padding-bottom: 0;
    }

    .fmc-result-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        margin-top: 8px;
    }

    .fmc-result-actions .pub-btn,
    .fmc-result-actions .pub-btn--ghost {
        width: max-content;
        min-width: 0;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Legacy fallback title/body/link kept for any older markup; new result uses .fmc-result-* */
.fmc-fallback-title {
    margin: 0;
    font-family: var(--pub-py-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--pub-py-headline);
}

.fmc-fallback-body {
    margin: 6px 0 0;
    color: var(--pub-py-secondary);
}

.fmc-fallback-link {
    display: inline-block;
    margin-top: 10px;
    min-height: 44px;
    line-height: 44px;
    font-weight: 600;
    color: var(--pub-py-amber-text);
    text-decoration: underline;
}

.fmc-fallback-link:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Band 2 — Guide (pale cyan): Prices close-card pair; no catalog footer offset */
.fmc-page .prices-close,
.contact-page .prices-close {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fmc-scan-btn,
    .fmc-go-btn,
    .fmc-result-actions .pub-btn,
    .fmc-result-actions .pub-btn--ghost {
        transition: none;
    }
}

.prices-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .prices-service-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

.prices-service-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pub-py-card);
    border: 1px solid var(--pub-py-border);
    border-radius: var(--pub-py-radius);
    box-shadow: var(--pub-py-shadow-card);
    padding: 0 0 20px;
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.prices-service-ticket--recommended {
    border-color: var(--pub-py-amber);
    box-shadow: var(--pub-py-shadow-hover);
}

.prices-service-media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: visible;
    background: var(--pub-py-masthead-bg);
}

.prices-service-media-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-top-left-radius: var(--pub-py-radius);
    border-top-right-radius: var(--pub-py-radius);
}

.prices-service-media img,
.prices-service-media-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    transition: transform 200ms ease;
}

.prices-service-media-fallback {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--pub-py-masthead-bg) 88%, var(--pub-py-cyan) 12%),
            var(--pub-py-masthead-bg)
        );
}

.prices-service-media-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--pub-py-masthead-bg) 18%, transparent) 0%,
        color-mix(in srgb, var(--pub-py-masthead-bg) 55%, transparent) 100%
    );
}

.prices-service-medallion {
    position: absolute;
    left: 16px;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transform: translateY(50%);
    background: var(--pub-py-card);
    border: 2px solid var(--pub-py-cyan);
    box-shadow: var(--pub-py-shadow-card);
    color: var(--pub-py-amber-600);
}

.prices-service-medallion .material-icons {
    font-size: 24px;
    line-height: 1;
}

.prices-service-body {
    padding: 32px 18px 0;
}

@media (hover: hover) {
    .prices-page:not(.is-service-motion) .prices-service-ticket:hover {
        box-shadow: var(--pub-py-shadow-hover);
        transform: translateY(-4px);
    }

    .prices-page:not(.is-service-motion) .prices-service-ticket:hover .prices-service-media img {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .prices-service-ticket,
    .prices-service-media img {
        transition: none;
    }

    .prices-page:not(.is-service-motion) .prices-service-ticket:hover,
    .prices-page:not(.is-service-motion) .prices-service-ticket:hover .prices-service-media img {
        transform: none;
    }
}

.prices-service-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prices-service-list li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 28px;
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--pub-py-secondary);
}

.prices-service-list li:last-child {
    margin-bottom: 0;
}

.prices-service-list li::before {
    content: 'check_circle';
    font-family: 'Material Icons';
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--pub-py-amber-600);
}

.prices-service-rate {
    margin: 0 0 12px;
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1;
    color: var(--pub-py-amber-600);
}

.prices-service-rate-lead {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

.prices-service-rate > span:not(.prices-service-rate-lead) {
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--pub-py-secondary);
}

.prices-filter-search {
    position: relative;
    width: 100%;
}

.prices-filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--pub-py-muted);
    pointer-events: none;
}

.prices-filter-search-input {
    width: 100%;
    height: var(--pub-py-control-h, 44px);
    min-height: var(--pub-py-control-h, 44px);
    padding: 0 44px 0 40px;
    box-sizing: border-box;
    background: var(--pub-py-filter-input-bg);
    border: 1px solid var(--pub-py-border);
    border-radius: 10px;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    color: var(--pub-py-headline);
    outline: none;
}

.prices-filter-search-input:focus,
.prices-filter-search-input:focus-visible {
    outline: none;
    border-color: var(--pub-py-focus-ring);
    box-shadow: 0 0 0 3px var(--pub-py-amber-focus);
}

/* 44px hit target; visual disc stays 24px via ::before / icon centering */
.prices-filter-search-clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pub-py-control-h, 44px);
    min-height: var(--pub-py-control-h, 44px);
    width: var(--pub-py-control-h, 44px);
    height: var(--pub-py-control-h, 44px);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pub-py-secondary);
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    -webkit-appearance: none;
}

.prices-filter-search-clear::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pub-py-chip-bg);
    pointer-events: none;
}

.prices-filter-search-clear .material-icons {
    position: relative;
    z-index: 1;
    font-size: 14px;
}

.prices-filter-search-clear:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.prices-filter-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: var(--pub-py-control-h, 44px);
    min-height: var(--pub-py-control-h, 44px);
    width: var(--pub-py-control-h, 44px);
    height: var(--pub-py-control-h, 44px);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--pub-py-chip-bg);
    color: var(--pub-py-secondary);
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    -webkit-appearance: none;
}

.prices-filter-drawer-close .material-icons {
    font-size: 20px;
}

.prices-filter-drawer-close:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

#pnp-catalog {
    scroll-margin-top: calc(var(--nav-height, 68px) + 12px + env(safe-area-inset-top, 0px));
}

#root .prices-page .pub-inv-sidebar.prices-filter-sidebar {
    top: calc(var(--nav-height, 68px) + 12px);
    max-height: calc(100vh - var(--nav-height, 68px) - 24px);
    max-height: calc(100dvh - var(--nav-height, 68px) - 24px);
}

.prices-mobile-filter-row {
    margin: 0 0 16px;
}

.prices-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.prices-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--pub-py-control-h, 44px);
    padding: 5px 6px 5px 10px;
    margin: 0;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--pub-py-amber) 38%, transparent);
    background: color-mix(in srgb, var(--pub-py-amber) 7%, transparent);
    color: var(--pub-py-amber-text);
    font-family: var(--pub-py-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    -webkit-appearance: none;
}

.prices-filter-chip .material-icons {
    font-size: 14px;
    line-height: 1;
}

.prices-filter-chip:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.prices-filter-chip-text {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prices-catalog-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}

.prices-catalog-main {
    min-width: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .prices-catalog-layout {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
        margin-top: var(--pub-py-catalog-section-gap, 20px);
    }

    .prices-catalog-main {
        flex: 1 1 0;
        min-width: 0;
    }
}

.prices-catalog-layout .rpt-filter-select,
.prices-catalog-layout .rpt-filter-trigger--py,
.pub-inv-sidebar .rpt-filter-select,
.pub-inv-sidebar .rpt-filter-trigger--py {
    width: 100%;
}

.prices-ticket-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (min-width: 640px) {
    .prices-ticket-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }
}

.prices-ticket {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px;
    background: var(--pub-py-card);
    border: 1px solid var(--pub-py-border);
    border-left: 3px solid transparent;
    border-radius: var(--pub-py-radius);
    box-shadow: var(--pub-py-shadow-card);
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-left-color 150ms ease;
}

@media (hover: hover) {
    .prices-ticket:hover {
        box-shadow: var(--pub-py-shadow-hover);
        transform: translateY(-6px);
        border-left-color: var(--pub-py-amber);
    }
}

@media (prefers-reduced-motion: reduce) {
    .prices-ticket {
        transition: none;
    }

    .prices-ticket:hover {
        transform: none;
        box-shadow: var(--pub-py-shadow-card);
        border-left-color: transparent;
    }
}

.prices-ticket-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.prices-ticket-icon-well {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--pub-py-amber-bg);
    color: var(--pub-py-amber-600);
}

.prices-ticket-icon-well .material-icons {
    font-size: 20px;
    line-height: 1;
}

.prices-ticket-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.prices-ticket-name {
    margin: 0;
    font-family: var(--pub-py-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pub-py-headline);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.05rem * 1.25 * 2);
}

.prices-ticket-total {
    margin: 0;
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    line-height: 1;
    color: var(--pub-py-amber-600);
}

.prices-ticket-total-label {
    margin: 0 0 8px;
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pub-py-secondary);
}

.prices-ticket-stack {
    margin: auto 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--pub-py-border);
}

.prices-ticket-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    line-height: 1.4;
}

.prices-ticket-row:last-child {
    margin-bottom: 0;
}

.prices-ticket-row dt {
    margin: 0;
    color: var(--pub-py-secondary);
    font-weight: 500;
}

.prices-ticket-row dd {
    margin: 0;
    color: var(--pub-py-headline);
    font-weight: 600;
}

.prices-ticket--skeleton {
    min-height: 160px;
    pointer-events: none;
}

.prices-ticket-skel-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--pub-py-chip-bg);
    margin-bottom: 12px;
}

.prices-ticket-skel-line {
    height: 14px;
    border-radius: 6px;
    background: var(--pub-py-chip-bg);
    margin-bottom: 10px;
}

.prices-ticket-skel-line--short {
    width: 40%;
    height: 28px;
}

/* Catalog filter rail skeleton — mirrors ticket shimmer while pricing loads. */
.prices-filter-sidebar--skeleton {
    pointer-events: none;
}

.prices-filter-skel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.prices-filter-skel-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--pub-py-chip-bg);
}

.prices-filter-skel-header-copy {
    flex: 1 1 0;
    min-width: 0;
}

.prices-filter-skel-line {
    height: 16px;
    border-radius: 6px;
    background: var(--pub-py-chip-bg);
    max-width: 7rem;
}

.prices-filter-skel-line--sub {
    height: 12px;
    max-width: 9rem;
    margin-top: 8px;
}

.prices-filter-skel-section {
    margin-bottom: 16px;
}

.prices-filter-skel-section:last-child {
    margin-bottom: 0;
}

.prices-filter-skel-label {
    height: 10px;
    width: 60%;
    max-width: 5.5rem;
    border-radius: 4px;
    background: var(--pub-py-chip-bg);
    margin-bottom: 8px;
}

.prices-filter-skel-control {
    width: 100%;
    height: var(--pub-py-control-h, 44px);
    min-height: var(--pub-py-control-h, 44px);
    border-radius: 10px;
    background: var(--pub-py-chip-bg);
    box-sizing: border-box;
}

.prices-filter-skel-control--toggle {
    width: 7.5rem;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
    .prices-ticket--skeleton .prices-ticket-skel-icon,
    .prices-ticket--skeleton .prices-ticket-skel-line {
        animation: pub-featured-shimmer 1.2s ease-in-out infinite;
    }

    .prices-filter-sidebar--skeleton .prices-filter-skel-icon,
    .prices-filter-sidebar--skeleton .prices-filter-skel-line,
    .prices-filter-sidebar--skeleton .prices-filter-skel-label,
    .prices-filter-sidebar--skeleton .prices-filter-skel-control,
    .prices-mobile-filter-row .prices-filter-skel-control {
        animation: pub-featured-shimmer 1.2s ease-in-out infinite;
    }
}

.prices-empty {
    text-align: center;
    padding: 28px 20px;
    margin-bottom: 24px;
}

.prices-empty .pub-btn {
    margin-top: 12px;
}

.prices-close {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
    margin-top: calc(1.6 * var(--pub-py-catalog-section-gap, 20px));
}

@media (min-width: 768px) {
    .prices-close {
        grid-template-columns: 1.2fr 1fr;
        gap: 20px;
    }
}

.prices-close-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px 16px;
    background: var(--pub-py-card);
    border: 1px solid var(--pub-py-border);
    border-radius: var(--pub-py-radius);
    box-shadow: var(--pub-py-shadow-card);
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .prices-close-panel {
        padding: 28px 24px;
    }
}

.prices-close-cta {
    border-color: var(--pub-py-amber);
    box-shadow: var(--pub-py-shadow-hover);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

@media (hover: hover) {
    .prices-close-cta:hover {
        transform: translateY(-2px);
        box-shadow: var(--pub-py-shadow-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .prices-close-cta {
        transition: none;
    }

    .prices-close-cta:hover {
        transform: none;
    }
}

.prices-close-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.prices-close-icon-well {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--pub-py-amber-bg);
    color: var(--pub-py-amber-600);
}

.prices-close-icon-well .material-icons {
    font-size: 20px;
    line-height: 1;
}

.prices-close-panel-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.prices-close-kicker {
    margin: 0 0 4px;
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-py-secondary);
    line-height: 1.3;
}

.prices-close-title {
    margin: 0;
    font-family: var(--pub-py-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--pub-py-headline);
}

.prices-close-body {
    margin: 0 0 20px;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
    max-width: 42ch;
}

.prices-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prices-info-list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--pub-py-secondary);
}

.prices-info-list li:last-child {
    margin-bottom: 0;
}

.prices-info-list li::before {
    content: 'check';
    font-family: 'Material Icons';
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--pub-py-amber-600);
}

.prices-close-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.prices-close-actions .pub-btn,
.prices-close-actions .pub-btn--ghost {
    width: 100%;
    min-height: 48px;
}

.prices-close-cta .pub-btn--ghost {
    color: var(--pub-py-headline);
    border-color: var(--pub-py-border);
    background: transparent;
}

@media (hover: hover) {
    .prices-close-cta .pub-btn--ghost:hover {
        border-color: var(--pub-py-amber);
        background: var(--pub-py-amber-bg);
        color: var(--pub-py-amber-text);
    }
}

.sell-process {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

@media (min-width: 768px) {
    .sell-process {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }
}

.sell-process-beat {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pub-py-control-h);
    margin: 0;
    padding: 8px 12px;
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pub-py-headline);
    background: var(--pub-py-chip-bg);
    border: 1px solid var(--pub-py-border);
    border-radius: 12px;
}

.sell-process-beat .material-icons {
    font-size: 20px;
    color: var(--pub-py-amber-600);
    flex-shrink: 0;
}

.pub-helper-text {
    transition: color 200ms ease;
}

.pub-helper-text--ready {
    color: var(--pub-py-amber-600);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .pub-helper-text {
        transition: none;
    }
}

#sell-quote {
    scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
}

#sell-intake-form {
    scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
    margin-top: 24px;
}

.sell-page .pub-band--rules .pub-banner {
    margin-bottom: 20px;
}

.sell-page .sell-quote-card .pub-featured-head {
    margin-bottom: 20px;
}

.sell-quote-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

@media (min-width: 768px) {
    .sell-quote-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 32px;
        align-items: center;
    }
}

.sell-quote-copy .sell-process {
    grid-template-columns: 1fr;
    margin-top: 20px;
    margin-bottom: 16px;
}

.sell-quote-copy .pub-btn--ghost {
    margin-top: 4px;
}

.sell-quote-tool {
    padding: 24px 20px;
}

@media (min-width: 768px) {
    .sell-quote-tool {
        padding: 28px 24px;
    }
}

.sell-quote-label-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sell-quote-label {
    margin: 0;
    font-family: var(--pub-py-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pub-py-secondary);
}

.sell-quote-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: var(--pub-py-amber-600);
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
}

.sell-quote-info .material-icons {
    font-size: 20px;
}

.sell-quote-info:hover {
    color: var(--pub-py-headline);
    background: var(--pub-py-amber-fill);
}

.sell-quote-info:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.sell-quote-amount {
    margin: 4px 0 8px;
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 4rem);
    line-height: 1.05;
    color: var(--pub-py-headline);
    min-height: 1.05em;
    font-variant-numeric: tabular-nums;
    transition: opacity 180ms ease;
}

.sell-quote-amount.is-pending {
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .sell-quote-amount {
        transition: none;
    }

    .sell-quote-amount.is-pending {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sell-quote-amount--ready {
        animation: pub-inview-rise 260ms ease-out both;
    }
}

.sell-quote-sub {
    margin: 0 0 16px;
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pub-py-amber-600);
}

.sell-quote-disclaimer,
.sell-quote-fallback {
    margin: 0 0 16px;
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
}

.sell-quote-slider {
    margin-top: 8px;
}

.sell-quote-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.sell-quote-slider-label {
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pub-py-headline);
}

.sell-quote-weight-num {
    width: 7.5rem;
    flex-shrink: 0;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sell-quote-range {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(
        to right,
        var(--pub-py-amber) 0%,
        var(--pub-py-amber) var(--sell-fill, 0%),
        var(--pub-py-border) var(--sell-fill, 0%),
        var(--pub-py-border) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 6px;
    background-position: center;
}

.sell-quote-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
}

.sell-quote-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
}

.sell-quote-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    margin-top: -13px;
    border-radius: 50%;
    background: var(--pub-py-amber);
    border: 2px solid var(--pub-py-card);
    box-shadow: var(--pub-py-shadow-card);
}

.sell-quote-range::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pub-py-amber);
    border: 2px solid var(--pub-py-card);
    box-shadow: var(--pub-py-shadow-card);
}

.sell-quote-range:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.sell-quote-range-ends {
    display: flex;
    justify-content: space-between;
    margin-top: -4px;
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pub-py-muted);
    font-variant-numeric: tabular-nums;
}

.sell-quote-cta {
    width: 100%;
    margin-top: 20px;
}

/* Customer list skeletons (Saved / Tows / Account) — base fill; shimmer below. */
.pub-featured-skeleton-media {
    background: var(--pub-py-skeleton-base, #e2e8f0);
}

.pub-featured-skeleton-line {
    display: block;
    height: 1.125rem;
    width: 72%;
    max-width: 12rem;
    border-radius: 4px;
    background: var(--pub-py-skeleton-base, #e2e8f0);
}

@keyframes pub-featured-shimmer {
    0% {
        background-position: -600px -600px;
    }
    100% {
        background-position: 600px 600px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tow-page .pub-featured-skeleton-line,
    .saved-page .pub-featured-skeleton-line,
    .account-page .pub-featured-skeleton-line {
        background: linear-gradient(
            135deg,
            var(--pub-py-skeleton-mid, #f1f5f9) 25%,
            var(--pub-py-skeleton-base, #e2e8f0) 50%,
            var(--pub-py-skeleton-mid, #f1f5f9) 75%
        );
        background-size: 600px 600px;
        animation: pub-featured-shimmer 1.4s infinite linear;
    }
}

@keyframes pub-inview-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pub-ticket-pulse {
    0% {
        opacity: 1;
    }
    45% {
        opacity: 0.82;
    }
    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tow-page .pub-featured-skeleton-line,
    .saved-page .pub-featured-skeleton-line,
    .account-page .pub-featured-skeleton-line {
        animation: none;
    }

    .tow-page .pub-featured-skeleton-line,
    .saved-page .pub-featured-skeleton-line,
    .account-page .pub-featured-skeleton-line {
        background: var(--pub-py-skeleton-base, #e2e8f0);
    }

}

/* ── No-JS fallback inside #root (P2 Step 19) ────────────────────────────────
 * Only visible when scripts never run. React createRoot replaces #root children. */
.pub-noscript {
    box-sizing: border-box;
    max-width: 40ch;
    margin: 0 auto;
    padding: 20px 16px 28px;
    font-family: var(--pub-py-font-body, 'DM Sans', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-body, #334155);
    text-align: left;
}

.pub-noscript p {
    margin: 0 0 12px;
}

.pub-noscript-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 0;
}

.pub-noscript-link {
    color: var(--pub-py-secondary, #0e7490);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pub-noscript-link:hover,
.pub-noscript-link:focus-visible {
    color: var(--pub-py-amber-600, #d97706);
}

.pub-noscript-sep {
    color: var(--pub-py-muted, #64748b);
}

@media (min-width: 768px) {
    .pub-noscript {
        padding: 28px 20px 36px;
    }
}

/* ── Inventory HTML-first catalog masthead (B3 Step 17) ─────────────────────
 * Catalog H1 paints in HTML; React hydrates #inv-stat-strip / #inv-stat-count.
 * Hide the band on #vehicle= detail (html.pub-inv-detail) so SPA overlay has
 * no double header. Keep 1600px / large title — do not use marketing 1200px. */
html.pub-inv-detail .pub-inv-page > .pub-masthead {
    display: none;
}

.pub-inv-page > .pub-masthead {
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
    border-bottom: none;
}

.pub-inv-page > .pub-masthead::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--pub-py-amber) 0%,
        var(--pub-py-amber-600) 30%,
        var(--pub-py-masthead-rule-fade) 65%,
        transparent 100%
    );
    pointer-events: none;
}

.pub-inv-masthead-inner {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.pub-inv-masthead-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pub-inv-masthead-kicker {
    font-family: var(--pub-py-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--pub-py-amber);
    text-transform: uppercase;
    margin: 0 0 8px;
    opacity: 0.85;
}

.pub-inv-masthead-title {
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
}

.pub-inv-accent {
    color: var(--pub-py-amber);
}

.pub-inv-stat-strip {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 18px);
    margin-top: clamp(12px, 1.5vw, 16px);
    flex-wrap: wrap;
}

.pub-inv-stat-strip[hidden] {
    display: none !important;
}

.pub-inv-stat-item {
    display: flex;
    flex-direction: column;
}

.pub-inv-stat-num {
    font-family: var(--pub-py-font-display);
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 700;
    color: var(--pub-py-amber);
    line-height: 1;
    letter-spacing: -0.01em;
}

.pub-inv-stat-label {
    font-family: var(--pub-py-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pub-py-masthead-stat-label-muted);
    line-height: 1;
    margin-top: 3px;
}

.pub-inv-stat-sep {
    display: block;
    width: 1px;
    height: 26px;
    background: rgba(103, 202, 225, 0.18);
    flex-shrink: 0;
    align-self: center;
}

.pub-inv-stat-count {
    text-align: right;
    flex-shrink: 0;
}

.pub-inv-stat-count-skel {
    display: block;
    width: 88px;
    height: 46px;
    border-radius: 6px;
}

.pub-inv-stat-count-num {
    font-family: var(--pub-py-font-display);
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 700;
    color: var(--pub-py-amber);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.pub-inv-stat-count-label {
    font-family: var(--pub-py-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pub-py-masthead-stat-label-muted);
    margin: 4px 0 0;
}

@media (max-width: 767px) {
    .pub-inv-page > .pub-masthead {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .pub-inv-masthead-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .pub-inv-stat-count {
        text-align: left;
        margin-top: 12px;
    }

    .pub-inv-stat-count-skel {
        width: 64px;
        height: 34px;
    }
}

/* ── Compact catalog masthead, desktop (JACKS-153) ──
 * Above 1024px the band drops from ~166px to ~76px so the table starts higher on first
 * load: kicker on its own line, then title and stat strip side by side in one row, with
 * the in-yard count on the right. Scoped to #inv-masthead, so no other page's
 * .pub-masthead changes. The catalog section gap (layout row + results strip margins,
 * inline in PublicInventoryPage.js) tightens with it, on this page only.
 */
@media (min-width: 1025px) {
    .pub-inv-page {
        --pub-py-catalog-section-gap: 12px;
    }

    .pub-inv-page > #inv-masthead {
        padding: 14px 20px 15px;
    }

    #inv-masthead .pub-inv-masthead-inner {
        align-items: center;
    }

    #inv-masthead .pub-inv-masthead-left {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 28px;
        row-gap: 0;
    }

    #inv-masthead .pub-inv-masthead-kicker {
        flex: 0 0 100%;
        margin: 0 0 4px;
        line-height: 1.2;
    }

    /* Beats .pub-masthead h1 (48px, line-height 1.05, 10px bottom margin). */
    #inv-masthead .pub-inv-masthead-title {
        font-size: clamp(30px, 2.6vw, 38px);
        line-height: 1;
        margin: 0;
    }

    #inv-masthead .pub-inv-stat-strip {
        margin-top: 0;
        padding-left: 28px;
        border-left: 1px solid rgba(103, 202, 225, 0.18);
    }

    #inv-masthead .pub-inv-stat-count-num {
        font-size: clamp(30px, 2.6vw, 38px);
    }

    #inv-masthead .pub-inv-stat-count-label {
        margin-top: 2px;
    }

    #inv-masthead .pub-inv-stat-count-skel {
        width: 72px;
        height: 36px;
    }
}

.pub-inv-part-banner {
    margin: 12px 2px 4px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--pub-py-border);
    background: var(--pub-py-chip-bg);
}

.pub-inv-part-disclaimer {
    margin: 0;
    font-family: var(--pub-py-font-body);
    line-height: 1.45;
}

.pub-inv-part-disclaimer {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--pub-py-secondary);
}

/* ── Masthead (clone .fmc-masthead) ──────────────────────────────────────── */
.pub-masthead {
    background: var(--pub-py-masthead-bg);
    background-image: var(--pub-py-masthead-diagonal-texture);
    color: var(--pub-py-masthead-headline-on-dark);
    padding: 40px 20px 36px;
    border-bottom: 2px solid var(--pub-py-masthead-rule-fade);
}

.pub-masthead-inner {
    max-width: min(640px, 100%);
    margin: 0 auto;
}

.pub-masthead-inner--wide {
    max-width: min(1200px, 100%);
}

.pub-masthead h1,
.pub-masthead-title {
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 6vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    color: var(--pub-py-masthead-headline-on-dark);
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
}

.pub-masthead p,
.pub-masthead-sub {
    font-family: var(--pub-py-font-body);
    color: var(--pub-py-detail-masthead-sub);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    max-width: min(48ch, 100%);
    overflow-wrap: break-word;
}

/* ── Home hero (search overlaid on still; jobs below the photo) ──────────── */
/*
 * Light shopper hero (Cars.com arrangement, Precision Yard tokens).
 * Stage is chip-bg / page-bg; .pub-services below stays navy + hatch.
 */
.pub-hero {
    overflow: hidden;
    background: var(--pub-py-page-bg);
    color: var(--pub-py-headline);
}

.pub-hero-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--pub-py-chip-bg);
    color: var(--pub-py-headline);
}

.pub-hero-inner {
    position: relative;
    z-index: 10;
    max-width: min(720px, 100%);
    margin: 0 auto;
    padding: 40px 20px 20px;
    text-align: center;
}

.pub-hero-lockup,
.pub-hero-form,
.pub-hero-chips {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.pub-hero-lockup {
    margin-bottom: 0;
}

.pub-hero-kicker {
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pub-py-secondary);
    margin: 0 0 8px;
}

.pub-hero h1 {
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    /* Single-line lockup: fluid size so Title Case fits 375px without page scroll. */
    font-size: clamp(1.15rem, 4.8vw + 0.35rem, 3.25rem);
    line-height: 1.15;
    letter-spacing: 0.005em;
    margin: 0;
    color: var(--pub-py-headline);
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow-wrap: normal;
}

.pub-hero-lead {
    color: var(--pub-py-headline);
}

.pub-hero-accent {
    position: relative;
    display: inline-block;
    color: var(--pub-py-amber);
}

.pub-hero-accent::after {
    content: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pub-hero-accent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 3px;
        background: var(--pub-py-amber);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
        animation: pub-accent-draw 360ms ease-out 200ms both;
    }
}

@keyframes pub-accent-draw {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.pub-hero-sub {
    font-family: var(--pub-py-font-body);
    color: var(--pub-py-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin: 14px auto 0;
    max-width: 40ch;
}

.pub-hero-form {
    margin: 28px auto 0;
    text-align: left;
}

.pub-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contact form honeypot — hide from everyone (unlike .pub-sr-only, which AT can still reach). */
.pub-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pub-hero-pill-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.pub-parts-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pub-parts-form .pub-hero-search {
    margin-top: 0;
    gap: 8px;
}

.pub-hero-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Two-row Year / Make / Model then Part toolbar (home + /parts/).
 * /parts/ also uses .pub-inv-strip-toolbar for the solid inventory strip card
 * (inventory's strip tokens are desktop-only; mirror them here for all widths). */
.pub-inv-strip-toolbar.pub-parts-toolbar {
    --rpt-filter-radius: var(--pub-py-control-radius, 10px);
    --rft-toolbar-radius: var(--pub-py-radius);
    --rft-toolbar-bg: var(--pub-py-card);
    --rft-toolbar-blur: none;
    --rft-toolbar-shadow: var(--pub-py-shadow-card);
    --rft-toolbar-shadow-active: var(--pub-py-shadow-card);
}

.pub-parts-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--rft-stack-gap, 8px);
    width: 100%;
    min-width: 0;
    padding: var(--rft-pad-y, 14px) var(--rft-pad-x, 14px);
    box-sizing: border-box;
}

.pub-parts-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--rft-affix-gap, 8px);
    width: 100%;
    min-width: 0;
}

.pub-parts-toolbar__row--ymm > * {
    flex: 1 1 10rem;
    min-width: 0;
}

.pub-parts-toolbar__part {
    flex: 1 1 12rem;
    min-width: 0;
}

.pub-parts-toolbar__engine {
    flex: 1 1 10rem;
    min-width: 0;
}

.pub-parts-toolbar__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: var(--pub-py-control-radius, 10px);
    background: var(--pub-py-control-bg, #fff);
    color: var(--pub-py-headline, #0f172a);
    cursor: pointer;
}

.pub-parts-toolbar__go .material-icons {
    font-size: 20px;
    line-height: 1;
}

.pub-parts-toolbar__go:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring, #67cae1);
    outline-offset: 2px;
}

.pub-parts-toolbar__exact {
    flex: 0 0 auto;
    align-self: center;
}

.pub-parts-toolbar__chips {
    width: 100%;
    min-width: 0;
}

.pub-parts-form__toolbar {
    margin: 0;
}

.pub-parts-form__pill-row {
    align-items: center;
}

/* Same capsule metrics as the Vehicles hero pill (padding / height / go button). */
.pub-parts-form__pill.pub-parts-toolbar__part {
    flex: 1 1 12rem;
    align-items: center;
    min-height: 56px;
    padding: 4px;
}

.pub-parts-form__pill .pub-parts-form__submit-wrap {
    flex-shrink: 0;
    align-self: center;
}

.pub-btn.pub-parts-form__submit {
    flex: 0 0 auto;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    white-space: nowrap;
}

.pub-parts-form__ymm .pub-form-group {
    margin-bottom: 0;
    min-width: 0;
    flex: 1 1 10rem;
}

.pub-parts-form__ymm .pub-label {
    color: var(--pub-py-secondary);
}

.pub-hero-pill {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 4px;
    background: var(--pub-py-white);
    border: 1px solid var(--pub-py-border);
    border-radius: 999px;
    box-shadow: var(--pub-py-shadow-card);
    overflow: visible;
}

.pub-hero-pill:focus-within {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
    border-color: var(--pub-py-focus-ring);
}

/* .material-icons (inline-block, loaded later) would pin the glyph to the
   top-left of this well. Two classes keep it centered, same as the parts pill. */
.material-icons.pub-hero-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    margin-left: 4px;
    font-size: 24px;
    font-weight: 400;
    font-synthesis: none;
    line-height: 1;
    color: var(--pub-py-amber);
    pointer-events: none;
}

.pub-hero-pill-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 12px 12px 12px 8px;
    border: none;
    background: transparent;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-headline);
    appearance: none;
    -webkit-appearance: none;
}

.pub-hero-pill-input:focus {
    outline: none;
}

.pub-hero-pill-input::placeholder {
    color: var(--pub-py-secondary);
}

.pub-hero-pill-input::-webkit-search-cancel-button,
.pub-hero-pill-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.pub-btn.pub-hero-search-go {
    flex-shrink: 0;
    width: auto;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    white-space: nowrap;
    /* button.pub-btn { font: inherit } would leave these as body text.
       Both hero submits share one face: body family, button weight. */
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.pub-hero-search {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
}

.pub-hero-search .pub-form-group {
    margin-bottom: 0;
    min-width: 0;
}

.pub-hero-search .pub-label {
    color: var(--pub-py-secondary);
}

/* Same ReportFilterSelect chrome as PublicInventoryPage; keep grid tracks from overflowing. */
.pub-hero-search .dropdown-wrapper {
    min-width: 0;
}

.pub-hero-search .dropdown-trigger {
    cursor: pointer;
}

/*
 * Light floor: opaque white trigger; hover uses solid cyan fill (never translucent
 * --pub-py-amber-bg) and keeps navy label color.
 */
.pub-hero-search .rpt-filter-trigger--py,
.pub-hero-search .rpt-filter-trigger--py:hover:not(.is-open),
.pub-hero-search .rpt-filter-trigger--py.is-open {
    color: var(--pub-py-headline);
}

.pub-hero-search .rpt-filter-trigger--py {
    background-color: var(--pub-py-white);
    border-color: var(--pub-py-border);
}

.pub-hero-search .rpt-filter-trigger--py:hover:not(.is-open) {
    background-color: var(--pub-py-amber-fill, #d7f1f7);
    border-color: var(--pub-py-amber);
}

.pub-hero-search .rpt-filter-trigger--py.is-open {
    background-color: var(--pub-py-white);
}

.pub-hero-search .rpt-filter-trigger--py .rpt-filter-trigger__label {
    color: inherit;
}

.pub-hero-search .rpt-filter-trigger--py .rpt-filter-trigger__icon,
.pub-hero-search .rpt-filter-trigger--py .rpt-filter-trigger__arrow {
    color: var(--pub-py-secondary);
    font-size: 24px;
    font-weight: 400;
    font-synthesis: none;
}

/* 24px glyph fills the 24px well, so shift it 2px to keep the same left edge as the pill icon. */
.pub-hero-search .rpt-filter-trigger--py .rpt-filter-trigger__icon {
    left: 18px;
}

.pub-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

a.pub-hero-chip,
button.pub-hero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pub-py-headline);
    text-decoration: none;
    background: var(--pub-py-white);
    border: 1px solid var(--pub-py-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

a.pub-hero-chip:hover,
button.pub-hero-chip:hover {
    border-color: var(--pub-py-amber);
    background: var(--pub-py-amber-fill, #d7f1f7);
    color: var(--pub-py-headline);
}

button.pub-hero-chip[aria-pressed="true"] {
    border-color: var(--pub-py-amber);
    background: var(--pub-py-amber-fill, #d7f1f7);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--pub-py-amber);
}

a.pub-hero-chip:focus-visible,
button.pub-hero-chip:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

/* Cutout floor: peek off sides; clip on the floor, not the page. */
.pub-hero-floor {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Ground plane under cutouts (spatial, not motion). */
.pub-hero-floor::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 48px;
    background: linear-gradient(
        to top,
        var(--pub-py-chip-bg, #f1f5f9) 0%,
        transparent 100%
    );
    pointer-events: none;
}

.pub-hero-cutout {
    display: block;
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    max-height: 140px;
    /* Match intrinsic WebP ratio (760×507) so the floor does not shift before decode. */
    aspect-ratio: 3 / 2;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 8px 18px rgba(26, 26, 46, 0.18));
}

.pub-hero-cutout--center {
    z-index: 2;
    max-height: 160px;
    flex: 0 0 auto;
    width: min(58vw, 280px);
}

.pub-hero-cutout--side {
    z-index: 1;
    flex: 0 0 auto;
    width: min(42vw, 220px);
    max-height: 130px;
    margin-inline: -12%;
    opacity: 0.92;
}

/* Idle float — atmosphere only; gated by prefers-reduced-motion. */
@keyframes pub-cutout-idle {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes pub-cutout-idle-side-a {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(2px, -4px);
    }
}

@keyframes pub-cutout-idle-side-b {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-2px, -4px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pub-hero-cutout--center {
        animation:
            pub-hero-rise 280ms ease-out both,
            pub-cutout-idle 7s ease-in-out 280ms infinite;
    }

    .pub-hero-floor > .pub-hero-cutout--side:first-child {
        animation:
            pub-hero-rise 280ms ease-out both,
            pub-cutout-idle-side-a 6s ease-in-out 0.68s infinite;
    }

    .pub-hero-floor > .pub-hero-cutout--side:last-child {
        animation:
            pub-hero-rise 280ms ease-out both,
            pub-cutout-idle-side-b 8s ease-in-out 1.48s infinite;
    }

    .pub-hero-floor:hover .pub-hero-cutout,
    .pub-hero-floor:focus-within .pub-hero-cutout {
        animation-play-state: paused;
    }
}

.pub-services {
    background: var(--pub-py-masthead-bg);
    background-image: var(--pub-py-masthead-diagonal-texture);
    color: var(--pub-py-masthead-headline-on-dark);
    padding: 28px 16px 36px;
}

.pub-services-inner {
    max-width: min(1200px, 100%);
    margin: 0 auto;
}

.pub-services-head {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pub-py-masthead-rule-fade);
}

.pub-services-kicker {
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pub-py-amber);
    margin: 0 0 6px;
}

.pub-services-title {
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.15;
    color: var(--pub-py-masthead-headline-on-dark);
    margin: 0;
}

.pub-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.pub-services-grid > * {
    min-width: 0;
}

a.pub-services-card {
    display: flex;
    flex-direction: column;
    min-height: 44px;
    padding: 20px 18px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pub-py-masthead-rule-fade);
    border-radius: var(--pub-py-radius);
    text-decoration: none;
    color: inherit;
    overflow-wrap: break-word;
    cursor: pointer;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

a.pub-services-card:hover {
    border-color: var(--pub-py-amber);
}

a.pub-services-card:hover .pub-services-card-title,
a.pub-services-card:hover .pub-services-cue {
    color: var(--pub-py-amber);
}

a.pub-services-card:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-services-icon {
    font-size: 28px;
    color: var(--pub-py-amber);
    margin-bottom: 10px;
}

.pub-services-card-title {
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--pub-py-masthead-headline-on-dark);
    margin: 0 0 8px;
    transition: color 200ms ease;
}

.pub-services-card-body {
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-masthead-stat-label-muted);
    margin: 0 0 12px;
}

.pub-services-cue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    min-height: 44px;
    font-family: var(--pub-py-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pub-py-amber);
    transition: color 200ms ease;
}

.pub-services-cue .material-icons {
    font-size: 16px;
    transition: transform 200ms ease;
}

button.pub-btn {
    appearance: none;
    font: inherit;
}

/* Pull-N-Pay check-in — light chip-bg + cyan top rule (not photo; Lot owns that).
 * One ticket board (not four hovering SaaS cards). Cells are display-only. */
.pub-band--rules {
    background: var(--pub-py-chip-bg);
    color: var(--pub-py-headline);
    border-top: 2px solid var(--pub-py-amber);
    overflow: hidden;
}

.pub-band--rules .pub-featured-see {
    color: var(--pub-py-amber-600);
}

.pub-band--rules .pub-featured-see:hover {
    color: var(--pub-py-amber-hover);
}

/* Cyan CTA — only interactive control in this chapter */
a.pub-btn.pub-featured-see--rules {
    flex-shrink: 0;
    align-self: flex-start;
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber);
    border: none;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 1rem;
    min-height: 48px;
    padding: 12px 20px;
}

a.pub-btn.pub-featured-see--rules:hover {
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber-hover);
}

a.pub-btn.pub-featured-see--rules:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    a.pub-btn.pub-featured-see--rules {
        align-self: flex-end;
    }
}

.pub-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    background: var(--pub-py-card);
    border: 1px solid var(--pub-py-border);
    border-radius: var(--pub-py-radius);
    box-shadow: var(--pub-py-shadow-card);
    overflow: hidden;
}

.pub-rules-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    min-width: 0;
    padding: 20px 14px;
    text-align: center;
    margin: 0;
    background: transparent;
    border: none;
    border-right: 1px dashed var(--pub-py-border);
    border-bottom: 1px dashed var(--pub-py-border);
    border-radius: 0;
    box-shadow: none;
    cursor: default;
}

/* 2×2 phone: no right edge on col 2; no bottom edge on row 2 */
.pub-rules-item:nth-child(2n) {
    border-right: none;
}

.pub-rules-item:nth-child(n + 3) {
    border-bottom: none;
}

.pub-rules-value-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}

.pub-rules-value {
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--pub-py-amber-600);
    margin: 0;
    overflow-wrap: break-word;
}

.pub-rules-icon {
    font-size: 18px;
    line-height: 1;
    color: var(--pub-py-amber-600);
    margin: 0;
    flex-shrink: 0;
}

.pub-rules-label {
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--pub-py-secondary);
    margin: 8px 0 0;
}

/* Shop by part — full-bleed pale cyan */
.pub-band--parts {
    background: var(--pub-py-amber-fill);
    color: var(--pub-py-headline);
    overflow: hidden;
}

.pub-band--parts .pub-featured-see {
    color: var(--pub-py-amber-600);
}

.pub-band--parts .pub-featured-see:hover {
    color: var(--pub-py-amber-hover);
}

/* Yard tools — navy + hatch; featured-head on-dark (mirror lot); cyan rule like FMC masthead.
 * No border-bottom: Home tools abuts .public-footer; the footer ::before rule is the seam
 * (avoids a double hairline + a #f8fafc gap from footer margin-top). */
.pub-band--tools {
    background: var(--pub-py-masthead-bg);
    background-image: var(--pub-py-masthead-diagonal-texture);
    color: var(--pub-py-masthead-headline-on-dark);
    border-top: 2px solid var(--pub-py-masthead-rule-fade);
    border-bottom: none;
    overflow: hidden;
}

.pub-band--tools .pub-featured-kicker {
    color: var(--pub-py-masthead-stat-label-muted);
}

.pub-band--tools .pub-section-title--row {
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--pub-py-masthead-headline-on-dark);
    text-align: left;
    margin: 0;
}

.pub-band--tools .pub-featured-lede {
    color: var(--pub-py-masthead-stat-label-muted);
    max-width: 48ch;
}

.pub-band--tools .pub-featured-see {
    color: var(--pub-py-amber);
}

.pub-band--tools .pub-featured-see:hover {
    color: var(--pub-py-amber-hover);
}

.pub-band--tools .pub-featured-see:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-featured-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pub-featured-copy {
    flex: 1 1 14rem;
    min-width: 0;
}

.pub-featured-kicker {
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pub-py-secondary);
    margin: 0 0 6px;
}

.pub-section-title--row {
    text-align: left;
    margin: 0;
}

.pub-featured-lede {
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
    margin: 8px 0 0;
    max-width: 48ch;
}

/* Catalog lede is a single marketing line — do not inherit the 48ch wrap.
 * Mobile keeps normal wrap so the band never horizontal-scrolls (<768px). */
.prices-page .prices-catalog-lede {
    max-width: none;
}

@media (min-width: 768px) {
    .prices-page .prices-catalog-lede {
        white-space: nowrap;
    }
}

.pub-featured-see {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    font-family: var(--pub-py-font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--pub-py-amber-600);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pub-featured-see:hover {
    color: var(--pub-py-headline);
}

.pub-featured-see:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-featured-model {
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--pub-py-secondary);
    margin: 2px 0 0;
    overflow-wrap: break-word;
}

.pub-featured-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 8px 0 0;
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pub-py-slate-700);
}

.pub-featured-meta--muted {
    color: var(--pub-py-secondary);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.pub-featured-meta .material-icons {
    font-size: 14px;
    color: var(--pub-py-location-muted-icon);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .pub-hero-inner {
        padding: 56px 28px 24px;
        max-width: min(760px, 100%);
    }

    .pub-hero-sub {
        margin-top: 16px;
    }

    .pub-hero-form {
        margin-top: 32px;
    }

    /* Year / Make / Model (Part moved to the hero's Parts mode, JACKS-188). */
    .pub-hero-search {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .pub-hero-floor {
        margin-top: 12px;
    }

    .pub-hero-cutout--center {
        width: min(36vw, 420px);
        max-height: 220px;
    }

    .pub-hero-cutout--side {
        width: min(30vw, 360px);
        max-height: 190px;
        margin-inline: -6%;
    }

    .pub-services {
        padding: 36px 28px 48px;
    }

    .pub-services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .pub-rules {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .pub-rules-item {
        border-bottom: none;
        border-right: 1px dashed var(--pub-py-border);
    }

    .pub-rules-item:nth-child(2n) {
        border-right: 1px dashed var(--pub-py-border);
    }

    .pub-rules-item:nth-child(n + 3) {
        border-bottom: none;
    }

    .pub-rules-item:last-child {
        border-right: none;
    }

}

@media (min-width: 1024px) {
}

@media (prefers-reduced-motion: no-preference) {
    .pub-hero-inner > * {
        animation: pub-hero-rise 280ms ease-out both;
    }

    .pub-hero-inner > .pub-hero-lockup {
        animation-delay: 0ms;
    }

    .pub-hero-inner > .pub-hero-form {
        animation-delay: 80ms;
    }

    .pub-hero-inner > .pub-hero-chips {
        animation-delay: 140ms;
    }
}

@keyframes pub-hero-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-hero-inner > * {
        animation: none;
    }
}

/* ── Card — full-perimeter border, never a left-accent rail ──────────────── */
.pub-card {
    background: var(--pub-py-card);
    border: 1px solid var(--pub-py-border);
    border-radius: var(--pub-py-radius);
    box-shadow: var(--pub-py-shadow-card);
    padding: 20px 16px;
    overflow-wrap: break-word;
    min-width: 0;
}
@media (min-width: 768px) {
    .pub-card {
        padding: 28px 24px;
    }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.pub-btn,
.pub-btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px; /* marketing CTA; token floor is --pub-py-control-h (44px) */
    min-width: var(--pub-py-control-h);
    max-width: 100%;
    padding: 12px 20px;
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: normal;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease,
        border-color 200ms ease;
}

.pub-btn {
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber);
    border: none;
}

.pub-btn:hover {
    background: var(--pub-py-amber-hover);
    box-shadow: var(--pub-py-detail-cta-hover-shadow);
}

.pub-btn--ghost {
    color: var(--pub-py-amber-600);
    background: transparent;
    border: 1px solid var(--pub-py-amber);
}

.pub-btn--ghost:hover {
    color: var(--pub-py-headline);
    background: var(--pub-py-amber-bg);
    border-color: var(--pub-py-amber-hover);
}

.pub-btn:focus-visible,
.pub-btn--ghost:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-btn:disabled,
.pub-btn[disabled],
.pub-btn--ghost:disabled,
.pub-btn--ghost[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.pub-label {
    display: block;
    font-family: var(--pub-py-font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pub-py-secondary);
    margin-bottom: 8px;
}

.pub-field {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: var(--pub-py-font-body);
    font-size: 1rem; /* 16px keeps iOS from zooming on focus */
    line-height: 1.5;
    color: var(--pub-py-headline);
    background: var(--pub-py-white);
    border: 1px solid var(--pub-py-border);
    border-radius: 10px;
}

.pub-field::placeholder {
    color: var(--pub-py-muted);
}

.pub-field:focus {
    outline: none;
    border-color: var(--pub-py-focus-ring);
    box-shadow: 0 0 0 3px var(--pub-py-amber-focus);
}

.pub-field:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-field[aria-invalid="true"],
.pub-field.pub-field--invalid {
    border-color: var(--pub-py-error-border);
}

.sell-page .pub-form-group.is-invalid .rpt-filter-trigger--py,
.sell-page .pub-form-group.is-invalid .rpt-filter-trigger--py:hover:not(.is-open),
.sell-page .pub-form-group.is-invalid .rpt-filter-trigger--py.is-active:not(.is-open) {
    border-color: var(--pub-py-error-border);
}

.sell-page .pub-form-row,
.sell-page .pub-form-group,
.sell-page .sell-quote-card,
.sell-page .sell-quote-tool {
    overflow: visible;
    min-width: 0;
}

.sell-ymm-combobox {
    position: relative;
    width: 100%;
    min-width: 0;
}

.sell-ymm-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
    background: var(--pub-py-white);
    border: 1px solid var(--pub-py-border);
    border-radius: 10px;
    box-shadow: var(--pub-py-shadow-card);
}

.sell-ymm-option {
    padding: 10px 12px;
    min-height: var(--pub-py-control-h);
    display: flex;
    align-items: center;
    border-radius: 7px;
    cursor: pointer;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--pub-py-headline);
}

.sell-ymm-option.is-active,
.sell-ymm-option:hover {
    background: var(--pub-py-amber-fill);
}

.sell-ymm-option--create {
    color: var(--pub-py-amber-600);
}

.sell-ymm-match {
    font-weight: 700;
    color: var(--pub-py-amber-600);
}

@media (prefers-reduced-motion: reduce) {
    .sell-ymm-option {
        transition: none;
    }
}

.pub-field-error {
    margin: 8px 0 0;
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--pub-py-error-title);
}

textarea.pub-field {
    min-height: 120px;
    resize: vertical;
}

.pub-form-group {
    margin-bottom: 16px;
}

.pub-form-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--pub-py-headline);
    margin: 8px 0 16px;
}

.pub-helper-text {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--pub-py-muted);
}

.pub-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .pub-form-row {
        grid-template-columns: 1fr 1fr;
    }
    .pub-form-row--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ── Typography / icon helpers ───────────────────────────────────────────── */
.pub-section-title {
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.15;
    color: var(--pub-py-headline);
    text-align: center;
    margin: 0 0 28px;
    overflow-wrap: break-word;
}

.pub-card-title {
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--pub-py-headline);
    margin: 0 0 10px;
    max-width: 100%;
    overflow-wrap: break-word;
}

.pub-card-body {
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pub-py-secondary);
    margin: 0 0 16px;
    overflow-wrap: break-word;
}

.pub-icon {
    color: var(--pub-py-amber-600);
    font-size: 32px;
    line-height: 1;
}

a.pub-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    text-decoration: none;
    color: inherit;
    gap: 8px;
    min-height: 44px;
    padding: 20px 12px;
}

a.pub-card .pub-icon,
a.pub-card .pub-card-title {
    max-width: 100%;
}

a.pub-card:hover {
    border-color: var(--pub-py-amber);
}

a.pub-card:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-text-link {
    color: var(--pub-py-amber-600);
    font-weight: 600;
    text-decoration: none;
}

.pub-text-link:hover {
    color: var(--pub-py-headline);
}

.pub-text-link:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

/* ── Grids (CSS instead of windowWidth JS) ───────────────────────────────── */
.pub-grid {
    display: grid;
    gap: 20px;
}

.pub-grid > * {
    min-width: 0; /* let 2-col tiles shrink at 375px instead of overflowing */
}

.pub-grid--2-3-4 {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .pub-grid--2-3-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .pub-grid--2-3-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pub-grid--1-2 {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .pub-grid--1-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.pub-grid--auto-3 {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .pub-grid--auto-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pub-grid--parts {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .pub-grid--parts {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .pub-grid--parts {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Banners (token colors only — no Material hex) ───────────────────────── */
.pub-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--pub-py-border);
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    line-height: 1.45;
    margin-bottom: 16px;
}

.pub-banner--ok {
    background: var(--pub-py-amber-bg);
    color: var(--pub-py-headline);
    border-color: var(--pub-py-amber);
}

.pub-banner--error {
    background: var(--pub-py-error-bg);
    color: var(--pub-py-error-title);
    border-color: var(--pub-py-error-border);
}

/* ── Search + pager ──────────────────────────────────────────────────────── */
.pub-search {
    position: relative;
    margin-bottom: 24px;
}

.pub-search .pub-field {
    padding-left: 44px;
    padding-right: 44px;
}

.pub-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pub-py-muted);
    pointer-events: none;
}

.pub-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--pub-py-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pub-search-clear:hover {
    color: var(--pub-py-headline);
}

.pub-search-clear:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.pub-pager .pub-btn,
.pub-pager .pub-btn--ghost {
    min-width: 44px;
    padding: 8px 12px;
}

.prices-pagination {
    margin: 8px 0 24px;
}

.prices-pagination .pagination-container {
    border-radius: var(--pub-py-radius);
    border: 1px solid var(--pub-py-border);
}

/* ── Yard map aerial ─────────────────────────────────────────────────────── */
.pub-yard-map-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--pub-py-radius);
    border: 1px solid var(--pub-py-border);
}

.pub-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pub-info-row .material-icons {
    color: var(--pub-py-amber-600);
    font-size: 22px;
    line-height: 1.2;
}

/* ── Modal overlay (Sell estimate) ───────────────────────────────────────── */
.pub-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2500; /* Above sticky .public-nav (1000) and skip-link (2000); below Yard Assistant (3900+) */
}

.pub-modal-backdrop .pub-card {
    max-width: 480px;
    width: 100%;
}

.pub-modal-card {
    text-align: center;
}

/* Form dialogs (Find My Car Enter Manually) — left-align; Sell estimate stays centered. */
.pub-modal-card--form {
    text-align: left;
}

.pub-modal-card:focus {
    outline: none;
}

.pub-modal-card:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-modal-icon {
    font-size: 48px;
}

.pub-modal-amount {
    font-size: 2rem;
    margin: 8px 0 12px;
}

/* Find My Car — Enter Manually dialog sits above the public scanner (z-index 2600). */
.fmc-manual-backdrop {
    z-index: 2700;
}

.fmc-manual-form {
    margin-top: 16px;
}

.fmc-manual-form .pub-field {
    margin-bottom: 0;
}

.fmc-manual-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.fmc-manual-actions .pub-btn,
.fmc-manual-actions .pub-btn--ghost {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    touch-action: manipulation;
    cursor: pointer;
}

@media (min-width: 480px) {
    .fmc-manual-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .fmc-manual-actions .pub-btn,
    .fmc-manual-actions .pub-btn--ghost {
        width: auto;
        min-width: 7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fmc-manual-actions .pub-btn,
    .fmc-manual-actions .pub-btn--ghost {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pub-modal-card .pub-modal-amount {
        animation: pub-inview-rise 260ms ease-out both;
    }
}

/* ── Home Yard tools teasers (Find My Car / Assistant) ───────────────────────
 * Lobby announce after shop-by-part: still + name + lede + one CTA.
 * Whole card is the hit target (link or button). Tokens only; no form/scan clone.
 * FAB clearance lives on .public-footer (canonical NAP), not a Home visit band.
 */
.pub-overview-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .pub-overview-pair {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }

    .pub-overview-pair > :only-child {
        grid-column: 1 / -1;
        max-width: 36rem;
    }
}

a.pub-overview-card,
button.pub-overview-card {
    appearance: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 44px;
    height: 100%;
    padding: 0;
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

a.pub-overview-card:hover,
button.pub-overview-card:hover {
    box-shadow: var(--pub-py-shadow-hover);
    border-color: var(--pub-py-amber);
}

a.pub-overview-card:hover .pub-card-title,
a.pub-overview-card:hover .pub-overview-cue,
button.pub-overview-card:hover .pub-card-title,
button.pub-overview-card:hover .pub-overview-cue {
    color: var(--pub-py-amber-600);
}

a.pub-overview-card:focus-visible,
button.pub-overview-card:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.pub-overview-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--pub-py-chip-bg);
    overflow: hidden;
    flex: 0 0 auto;
}

.pub-overview-media--empty {
    background-color: var(--pub-py-masthead-bg);
    background-image: var(--pub-py-masthead-diagonal-texture);
    color: var(--pub-py-amber);
}

.pub-overview-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-overview-media .material-icons {
    font-size: 40px;
    line-height: 1;
    color: var(--pub-py-amber);
}

.pub-overview-media svg {
    width: 40px;
    height: 40px;
    display: block;
    color: var(--pub-py-amber);
}

.pub-overview-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    padding: 16px 16px 14px;
    min-width: 0;
}

@media (min-width: 768px) {
    .pub-overview-body {
        padding: 20px 20px 16px;
    }
}

.pub-overview-card .pub-card-title {
    margin: 0;
    transition: color 200ms ease;
}

.pub-overview-lede {
    font-family: var(--pub-py-font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
    margin: 0;
    max-width: 48ch;
}

.pub-overview-cue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    min-height: 44px;
    font-family: var(--pub-py-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pub-py-amber-600);
    transition: color 200ms ease;
}

.pub-overview-cue .material-icons {
    font-size: 16px;
    line-height: 1;
    transition: transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    a.pub-overview-card,
    button.pub-overview-card,
    .pub-overview-card .pub-card-title,
    .pub-overview-cue {
        transition: none;
    }

    a.pub-overview-card:hover,
    button.pub-overview-card:hover {
        box-shadow: var(--pub-py-shadow-card);
    }

    .pub-overview-media img {
        animation: none;
    }
}

/* Site footer — canonical NAP (business_info); FAB clearance for Yard Assistant */
.public-footer {
    flex-shrink: 0;
    /* Light pages (.pub-wrap) already pad the bottom; this only separates light
       content from the navy footer. Do not leave a page-bg stripe between two
       navy bands (Home tools → footer). */
    margin-top: 48px;
    background-color: var(--pub-py-masthead-bg);
    color: var(--pub-py-masthead-stat-label-muted);
    /* Clear Yard Assistant FAB so legal/links stay tappable */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Home tools (navy) and About / Sell / Prices / Rules parts (pale cyan) abut footer; no #f8fafc gap. */
#main:has(.home-page) + .public-footer,
#main:has(.about-page) + .public-footer,
#main:has(.sell-page) + .public-footer,
#main:has(.prices-page) + .public-footer,
#main:has(.rules-page) + .public-footer,
#main:has(.fmc-page) + .public-footer,
#main:has(.contact-page) + .public-footer,
#main:has(.tow-page) + .public-footer,
#main:has(.saved-page) + .public-footer,
#main:has(.account-page) + .public-footer,
#main:has(.pub-inv-page) + .public-footer {
    margin-top: 0;
}

.public-footer::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--pub-py-amber) 0%,
        color-mix(in srgb, var(--pub-py-amber) 70%, transparent) 22%,
        var(--pub-py-masthead-rule-fade) 60%,
        transparent 100%
    );
}

.public-footer-inner {
    max-width: min(1200px, 100%);
    margin: 0 auto;
    padding: 28px 20px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

@media (min-width: 768px) {
    .public-footer-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
        padding: 36px 28px 20px;
    }
}

.public-footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.public-footer-name {
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.2;
    color: var(--pub-py-masthead-headline-on-dark);
    margin: 0;
}

.public-footer-heading {
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-py-amber);
    margin: 0 0 4px;
}

.public-footer-text {
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pub-py-masthead-stat-label-muted);
    margin: 0;
}

.public-footer-address {
    display: block;
    margin: 0;
    font-style: normal;
}

a.public-footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--pub-py-amber);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 200ms ease;
}

a.public-footer-link:hover {
    color: var(--pub-py-masthead-headline-on-dark);
}

a.public-footer-link:focus-visible {
    outline: 2px solid var(--pub-py-amber);
    outline-offset: 2px;
    border-radius: 4px;
}

.public-footer-legal {
    max-width: min(1200px, 100%);
    margin: 0 auto;
    padding: 14px 20px 8px;
    font-family: var(--pub-py-font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--pub-py-masthead-stat-label-muted);
    border-top: 1px solid var(--pub-py-masthead-rule-fade);
}

@media (min-width: 768px) {
    .public-footer-legal {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.public-footer-link {
        transition: none;
    }
}

/* ── Home alive motion: hover lift + scroll inview (Precision Yard) ─────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.pub-hero-chip:hover,
    button.pub-hero-chip:hover {
        transform: translateY(-2px);
        box-shadow: var(--pub-py-shadow-card);
    }

    button.pub-hero-chip[aria-pressed="true"]:hover {
        box-shadow: inset 0 0 0 1px var(--pub-py-amber), var(--pub-py-shadow-card);
    }

    a.pub-services-card:hover,
    a.pub-overview-card:hover,
    button.pub-overview-card:hover {
        transform: translateY(-4px);
    }

    a.pub-services-card:hover .pub-services-cue .material-icons,
    a.pub-overview-card:hover .pub-overview-cue .material-icons,
    button.pub-overview-card:hover .pub-overview-cue .material-icons {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Hide until IntersectionObserver sets data-inview="1".
       Scoped to html.pub-js (H7) so no-JS / failed scripts leave chapters visible. */
    html.pub-js .home-page .pub-services:not([data-inview="1"]) .pub-services-head,
    html.pub-js .home-page .pub-services:not([data-inview="1"]) .pub-services-card,
    html.pub-js .home-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .home-page .pub-band--rules:not([data-inview="1"]) .pub-rules-item,
    html.pub-js .home-page .pub-band--tools:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .home-page .pub-band--tools:not([data-inview="1"]) a.pub-overview-card,
    html.pub-js .home-page .pub-band--tools:not([data-inview="1"]) button.pub-overview-card {
        opacity: 0;
    }

    .home-page .pub-services[data-inview="1"] .pub-services-head,
    .home-page .pub-services[data-inview="1"] .pub-services-card,
    .home-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .home-page .pub-band--rules[data-inview="1"] .pub-rules-item,
    .home-page .pub-band--tools[data-inview="1"] .pub-featured-head,
    .home-page .pub-band--tools[data-inview="1"] a.pub-overview-card,
    .home-page .pub-band--tools[data-inview="1"] button.pub-overview-card {
        animation: pub-inview-rise 260ms ease-out backwards;
    }

    .home-page .pub-services[data-inview="1"] .pub-services-head,
    .home-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .home-page .pub-band--tools[data-inview="1"] .pub-featured-head {
        animation-delay: 0ms;
    }

    .home-page .pub-services[data-inview="1"] .pub-services-card:nth-child(1) {
        animation-delay: 0ms;
    }
    .home-page .pub-services[data-inview="1"] .pub-services-card:nth-child(2) {
        animation-delay: 40ms;
    }
    .home-page .pub-services[data-inview="1"] .pub-services-card:nth-child(3) {
        animation-delay: 80ms;
    }
    .home-page .pub-services[data-inview="1"] .pub-services-card:nth-child(4) {
        animation-delay: 120ms;
    }

    .home-page .pub-band--rules[data-inview="1"] .pub-rules-item {
        animation-delay: calc(var(--rules-i, 0) * 40ms);
    }

    .home-page .pub-band--tools[data-inview="1"] .pub-overview-pair > *:nth-child(1) {
        animation-delay: 0ms;
    }
    .home-page .pub-band--tools[data-inview="1"] .pub-overview-pair > *:nth-child(2) {
        animation-delay: 40ms;
    }

    html.pub-js .about-page .pub-band--story:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .about-page .pub-band--story:not([data-inview="1"]) .pub-about-story,
    html.pub-js .about-page .pub-band--parts:not([data-inview="1"]) .pub-rules-item,
    html.pub-js .sell-page .pub-band--rules:not([data-inview="1"]) .sell-quote-split,
    html.pub-js .sell-page .pub-band--rules:not([data-inview="1"]) .sell-quote-tool,
    html.pub-js .sell-page .pub-band--rules:not([data-inview="1"]) .sell-quote-card,
    html.pub-js .sell-page .pub-band--rules:not([data-inview="1"]) .sell-process-beat,
    html.pub-js .sell-page .pub-band--rules:not([data-inview="1"]) .pub-form-heading,
    html.pub-js .sell-page .pub-band--parts:not([data-inview="1"]) .pub-rules-item,
    html.pub-js .rules-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .rules-page .pub-band--rules:not([data-inview="1"]) .rules-board-cell,
    html.pub-js .rules-page .rules-band--wear:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .rules-page .rules-band--wear:not([data-inview="1"]) .rules-board-cell,
    html.pub-js .rules-page .pub-band--parts:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .rules-page .pub-band--parts:not([data-inview="1"]) .rules-board-cell,
    html.pub-js .rules-page .rules-band--notice:not([data-inview="1"]) .rules-board,
    html.pub-js .rules-page .rules-band--close:not([data-inview="1"]) .rules-close,
    html.pub-js .fmc-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .fmc-page .pub-band--rules:not([data-inview="1"]) .fmc-tool,
    html.pub-js .fmc-page .pub-band--parts:not([data-inview="1"]) .prices-close,
    html.pub-js .contact-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .contact-page .pub-band--rules:not([data-inview="1"]) .contact-form-card,
    html.pub-js .contact-page .pub-band--parts:not([data-inview="1"]) .prices-close {
        opacity: 0;
    }

    .about-page .pub-band--story[data-inview="1"] .pub-featured-head,
    .about-page .pub-band--story[data-inview="1"] .pub-about-story,
    .sell-page .pub-band--rules[data-inview="1"] .sell-quote-split,
    .sell-page .pub-band--rules[data-inview="1"] .sell-quote-tool,
    .sell-page .pub-band--rules[data-inview="1"] .sell-quote-card,
    .sell-page .pub-band--rules[data-inview="1"] .sell-process-beat,
    .sell-page .pub-band--rules[data-inview="1"] .pub-form-heading,
    .sell-page .pub-band--parts[data-inview="1"] .pub-rules-item,
    .rules-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .rules-page .pub-band--rules[data-inview="1"] .rules-board-cell,
    .rules-page .rules-band--wear[data-inview="1"] .pub-featured-head,
    .rules-page .rules-band--wear[data-inview="1"] .rules-board-cell,
    .rules-page .pub-band--parts[data-inview="1"] .pub-featured-head,
    .rules-page .pub-band--parts[data-inview="1"] .rules-board-cell,
    .rules-page .rules-band--notice[data-inview="1"] .rules-board,
    .rules-page .rules-band--close[data-inview="1"] .rules-close,
    .fmc-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .fmc-page .pub-band--rules[data-inview="1"] .fmc-tool,
    .fmc-page .pub-band--parts[data-inview="1"] .prices-close,
    .contact-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .contact-page .pub-band--rules[data-inview="1"] .contact-form-card,
    .contact-page .pub-band--parts[data-inview="1"] .prices-close {
        animation: pub-inview-rise 260ms ease-out backwards;
    }

    .about-page .pub-band--parts[data-inview="1"] .pub-rules-item {
        animation:
            pub-inview-rise 260ms ease-out backwards,
            pub-ticket-pulse 600ms ease backwards;
        animation-delay:
            calc(var(--rules-i, 0) * 40ms),
            calc(var(--rules-i, 0) * 40ms + 280ms);
    }

    .sell-page .pub-band--parts[data-inview="1"] .pub-rules-item {
        animation-delay: calc(var(--rules-i, 0) * 40ms);
    }

    .rules-page .pub-band--rules[data-inview="1"] .rules-board-cell,
    .rules-page .rules-band--wear[data-inview="1"] .rules-board-cell,
    .rules-page .pub-band--parts[data-inview="1"] .rules-board-cell {
        animation-delay: calc(var(--rules-i, 0) * 40ms);
    }

    .sell-page .pub-band--rules[data-inview="1"] .sell-process-beat {
        animation-delay: calc(var(--sell-i, 0) * 40ms + 80ms);
    }

    .sell-page .pub-band--rules[data-inview="1"] .pub-form-heading {
        animation-delay: calc((var(--sell-i, 0) + 3) * 40ms + 80ms);
    }

    html.pub-js .prices-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .prices-page .pub-band--rules:not([data-inview="1"]) .prices-service-ticket,
    html.pub-js .prices-page .pub-band--parts:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .prices-page .pub-band--parts:not([data-inview="1"]) .prices-filter-sidebar,
    html.pub-js .prices-page .pub-band--parts:not([data-inview="1"]) .prices-mobile-filter-row,
    html.pub-js .prices-page .pub-band--parts:not([data-inview="1"]) .prices-ticket,
    html.pub-js .prices-page .pub-band--parts:not([data-inview="1"]) .prices-close {
        opacity: 0;
    }

    .prices-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .prices-page .pub-band--rules[data-inview="1"] .prices-service-ticket,
    .prices-page .pub-band--parts[data-inview="1"] .pub-featured-head,
    .prices-page .pub-band--parts[data-inview="1"] .prices-filter-sidebar,
    .prices-page .pub-band--parts[data-inview="1"] .prices-mobile-filter-row,
    .prices-page .pub-band--parts[data-inview="1"] .prices-ticket,
    .prices-page .pub-band--parts[data-inview="1"] .prices-close {
        animation: pub-inview-rise 260ms ease-out backwards;
    }

    .prices-page .pub-band--rules[data-inview="1"] .prices-service-ticket:nth-child(1) {
        animation-delay: 40ms;
    }

    .prices-page .pub-band--rules[data-inview="1"] .prices-service-ticket:nth-child(2) {
        animation-delay: 80ms;
    }

    html.pub-js .tow-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .tow-page .pub-band--rules:not([data-inview="1"]) .pub-rules-item,
    html.pub-js .tow-page .pub-band--rules:not([data-inview="1"]) .pub-card,
    html.pub-js .tow-page .pub-band--parts:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .tow-page .pub-band--parts:not([data-inview="1"]) .pub-rules-item {
        opacity: 0;
    }

    .tow-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .tow-page .pub-band--rules[data-inview="1"] .pub-card,
    .tow-page .pub-band--parts[data-inview="1"] .pub-featured-head {
        animation: pub-inview-rise 260ms ease-out backwards;
    }

    .tow-page .pub-band--rules[data-inview="1"] .pub-rules-item,
    .tow-page .pub-band--parts[data-inview="1"] .pub-rules-item {
        animation:
            pub-inview-rise 260ms ease-out backwards,
            pub-ticket-pulse 600ms ease backwards;
        animation-delay:
            calc(var(--rules-i, 0) * 40ms),
            calc(var(--rules-i, 0) * 40ms + 280ms);
    }

    html.pub-js .saved-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .saved-page .pub-band--rules:not([data-inview="1"]) .pub-rules-item,
    html.pub-js .saved-page .pub-band--rules:not([data-inview="1"]) .pub-card,
    html.pub-js .saved-page .pub-band--parts:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .saved-page .pub-band--parts:not([data-inview="1"]) .pub-rules-item,
    html.pub-js .account-page .pub-band--rules:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .account-page .pub-band--rules:not([data-inview="1"]) .pub-rules-item,
    html.pub-js .account-page .pub-band--rules:not([data-inview="1"]) .pub-card,
    html.pub-js .account-page .pub-band--parts:not([data-inview="1"]) .pub-featured-head,
    html.pub-js .account-page .pub-band--parts:not([data-inview="1"]) .pub-rules-item {
        opacity: 0;
    }

    .saved-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .saved-page .pub-band--rules[data-inview="1"] .pub-card,
    .saved-page .pub-band--parts[data-inview="1"] .pub-featured-head,
    .account-page .pub-band--rules[data-inview="1"] .pub-featured-head,
    .account-page .pub-band--rules[data-inview="1"] .pub-card,
    .account-page .pub-band--parts[data-inview="1"] .pub-featured-head {
        animation: pub-inview-rise 260ms ease-out backwards;
    }

    .saved-page .pub-band--rules[data-inview="1"] .pub-rules-item,
    .saved-page .pub-band--parts[data-inview="1"] .pub-rules-item,
    .account-page .pub-band--rules[data-inview="1"] .pub-rules-item,
    .account-page .pub-band--parts[data-inview="1"] .pub-rules-item {
        animation:
            pub-inview-rise 260ms ease-out backwards,
            pub-ticket-pulse 600ms ease backwards;
        animation-delay:
            calc(var(--rules-i, 0) * 40ms),
            calc(var(--rules-i, 0) * 40ms + 280ms);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-btn,
    .pub-btn--ghost,
    .pub-field,
    a.pub-card,
    a.pub-hero-chip,
    button.pub-hero-chip,
    a.pub-services-card,
    a.pub-overview-card,
    button.pub-overview-card,
    .pub-services-card-title,
    .pub-services-cue,
    .pub-services-cue .material-icons,
    .pub-overview-cue,
    .pub-overview-cue .material-icons,
    .pub-hero-inner,
    .pub-hero-inner > *,
    .pub-hero-cutout,
    .pub-hero-cutout--center,
    .pub-hero-cutout--side,
    .pub-overview-media img,
    .pub-hero-accent::after,
    .home-page .pub-services-head,
    .home-page .pub-featured-head,
    .home-page .pub-services-card,
    .home-page .pub-rules-item,
    .home-page a.pub-overview-card,
    .home-page button.pub-overview-card,
    .about-page .pub-featured-head,
    .about-page .pub-about-story,
    .about-page .pub-rules-item,
    .about-page .pub-masthead,
    .about-accent::after,
    .sell-page .pub-featured-head,
    .sell-page .sell-quote-split,
    .sell-page .sell-quote-tool,
    .sell-page .sell-quote-card,
    .sell-page .sell-quote-amount--ready,
    .sell-page .sell-process-beat,
    .sell-page .pub-form-heading,
    .sell-page .pub-rules-item,
    .sell-page .pub-masthead,
    .sell-accent::after,
    .prices-page .pub-featured-head,
    .prices-page .prices-service-ticket,
    .prices-page .prices-filter-sidebar,
    .prices-page .prices-mobile-filter-row,
    .prices-page .prices-ticket,
    .prices-page .prices-close,
    .prices-page .pub-rules-item,
    .prices-page .pub-masthead,
    .prices-accent::after,
    .contact-accent::after,
    .tow-page .pub-featured-head,
    .tow-page .pub-rules-item,
    .tow-page .pub-card,
    .saved-page .pub-featured-head,
    .saved-page .pub-rules-item,
    .saved-page .pub-card,
    .account-page .pub-featured-head,
    .account-page .pub-rules-item,
    .account-page .pub-card,
    .rules-page .pub-featured-head,
    .rules-page .rules-board-cell,
    .rules-page .rules-board,
    .rules-page .rules-close,
    .rules-accent::after,
    .fmc-page .pub-featured-head,
    .fmc-page .fmc-tool,
    .fmc-page .prices-close,
    .fmc-page .pub-masthead,
    .fmc-accent::after,
    .contact-page .pub-featured-head,
    .contact-page .contact-form-card,
    .contact-page .prices-close,
    .contact-page .pub-masthead,
    .pub-modal-card .pub-modal-amount {
        transition: none;
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* Pull-N-Pay Rules (/pull-n-pay/rules/) — masthead + journey bands; not lot-stage. */
.pull-n-pay-rules-page .pub-masthead .pub-featured-kicker,
.rules-page .pub-masthead .pub-featured-kicker {
    color: var(--pub-py-masthead-stat-label-muted);
}

.rules-accent {
    position: relative;
    display: inline-block;
    color: var(--pub-py-amber);
}

.rules-accent::after {
    content: none;
}

@media (prefers-reduced-motion: no-preference) {
    .rules-accent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 3px;
        background: var(--pub-py-amber);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
        animation: pub-accent-draw 360ms ease-out 200ms both;
    }
}

.rules-page .pub-masthead-inner--wide {
    max-width: 1200px;
}

.rules-jump-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.rules-jump-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--pub-py-masthead-rule-fade);
    border-radius: 999px;
    background: transparent;
    color: var(--pub-py-masthead-headline-on-dark);
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

@media (hover: hover) {
    .rules-jump-chip:hover {
        background: var(--pub-py-amber-bg);
        border-color: var(--pub-py-amber);
        color: var(--pub-py-amber);
    }
}

.rules-jump-chip:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

#rules-enter,
#rules-wear,
#rules-dont,
#rules-notice {
    scroll-margin-top: calc(var(--nav-height, 68px) + 12px + env(safe-area-inset-top, 0px));
}

.rules-band--wear {
    background: var(--pub-py-chip-bg);
}

.rules-band--notice {
    background: var(--pub-py-page-bg);
}

/* Rules ticket boards — one perimeter; dashed cells; never reuse .pub-rules (4-cell only) */
.rules-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
    background: var(--pub-py-card);
    border: 1px solid var(--pub-py-border);
    border-radius: var(--pub-py-radius);
    box-shadow: var(--pub-py-shadow-card);
    overflow: hidden;
}

@media (min-width: 600px) {
    .rules-board:not(.rules-board--notice) {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .rules-board:not(.rules-board--notice) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.rules-board-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 16px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--pub-py-border);
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    overflow-wrap: break-word;
}

/* 1-col: no right edge; last cell no bottom */
.rules-board[data-count="6"] .rules-board-cell:last-child,
.rules-board[data-count="8"] .rules-board-cell:last-child,
.rules-board--notice .rules-board-cell {
    border-bottom: none;
    border-right: none;
}

@media (min-width: 600px) {
    .rules-board:not(.rules-board--notice) .rules-board-cell {
        border-right: 1px dashed var(--pub-py-border);
        border-bottom: 1px dashed var(--pub-py-border);
    }

    /* 2-col: drop right on even cells */
    .rules-board:not(.rules-board--notice) .rules-board-cell:nth-child(2n) {
        border-right: none;
    }

    /* 6 cells → last row starts at 5; 8 cells → last row starts at 7 */
    .rules-board[data-count="6"] .rules-board-cell:nth-child(n + 5),
    .rules-board[data-count="8"] .rules-board-cell:nth-child(n + 7) {
        border-bottom: none;
    }
}

@media (min-width: 1024px) {
    .rules-board:not(.rules-board--notice) .rules-board-cell {
        border-right: 1px dashed var(--pub-py-border);
        border-bottom: 1px dashed var(--pub-py-border);
    }

    /* Reset 2-col even rule; 3-col drop right on every 3rd and last cell */
    .rules-board:not(.rules-board--notice) .rules-board-cell:nth-child(2n) {
        border-right: 1px dashed var(--pub-py-border);
    }

    .rules-board:not(.rules-board--notice) .rules-board-cell:nth-child(3n),
    .rules-board:not(.rules-board--notice) .rules-board-cell:last-child {
        border-right: none;
    }

    /* 6 cells → last row starts at 4 (2×3); 8 cells → last row starts at 7 (3+3+2) */
    .rules-board[data-count="6"] .rules-board-cell:nth-child(n + 4),
    .rules-board[data-count="8"] .rules-board-cell:nth-child(n + 7) {
        border-bottom: none;
    }
}

.rules-board-kicker {
    margin: 0 0 8px;
    font-family: var(--pub-py-font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pub-py-muted);
    line-height: 1;
}

.rules-board-value-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0 0 8px;
}

.rules-board-icon {
    font-size: 18px;
    line-height: 1;
    color: var(--pub-py-amber-600);
    flex-shrink: 0;
}

.rules-board-value {
    margin: 0;
    font-family: var(--pub-py-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--pub-py-amber-600);
    overflow-wrap: break-word;
}

.rules-board-title {
    margin: 0 0 6px;
    font-family: var(--pub-py-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pub-py-headline);
}

.rules-board-body {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
    overflow-wrap: break-word;
}

.rules-board--ban .rules-board-icon,
.rules-board--ban .rules-board-value {
    color: var(--pub-py-state-error-medallion-icon);
}

.rules-board--ban .rules-board-title {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.rules-board--notice {
    max-width: 720px;
    margin: 0 auto;
    grid-template-columns: 1fr;
}

.rules-board-cell--notice {
    padding: 24px 20px;
    border: none;
}

@media (min-width: 768px) {
    .rules-board-cell--notice {
        padding: 28px 28px;
    }
}

.rules-notice-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.rules-notice-medallion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pub-py-state-neutral-medallion-bg);
    color: var(--pub-py-state-neutral-medallion-icon);
    box-shadow: 0 0 0 8px var(--pub-py-state-neutral-medallion-halo);
}

.rules-notice-medallion .material-icons {
    font-size: 24px;
    line-height: 1;
}

.rules-notice-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.rules-notice-copy .pub-featured-kicker {
    margin: 0 0 4px;
    color: var(--pub-py-secondary);
}

.rules-notice-title {
    margin: 0;
    font-family: var(--pub-py-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--pub-py-headline);
}

.rules-notice-body {
    margin: 0 0 12px;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
    overflow-wrap: break-word;
}

/* Close — flat on pale-cyan band; no nested white card */
.rules-close {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 8px 0 4px;
    text-align: center;
    overflow-wrap: break-word;
}

.rules-close-kicker {
    margin: 0 0 4px;
    font-family: var(--pub-py-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-py-secondary);
    line-height: 1.3;
}

.rules-close-title {
    margin: 0 0 8px;
    font-family: var(--pub-py-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--pub-py-headline);
}

.rules-close-body {
    margin: 0 auto 20px;
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pub-py-secondary);
    max-width: 42ch;
}

.rules-close-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.rules-close-actions .pub-btn,
.rules-close-actions .pub-btn--ghost {
    width: 100%;
    min-height: 48px;
}

@media (min-width: 480px) {
    .rules-close-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .rules-close-actions .pub-btn,
    .rules-close-actions .pub-btn--ghost {
        width: auto;
        flex: 0 1 auto;
        min-width: 160px;
    }
}

.tow-page .pub-masthead .pub-featured-kicker {
    color: var(--pub-py-masthead-stat-label-muted);
}

.tow-page .pub-masthead .pub-btn--ghost {
    color: var(--pub-py-masthead-headline-on-dark);
    border-color: var(--pub-py-amber);
}

.tow-page .pub-masthead .pub-btn--ghost:hover {
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber);
    border-color: var(--pub-py-amber);
}

.tow-masthead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    touch-action: manipulation;
}

.tow-page .pub-band--rules .pub-grid,
.tow-page .pub-band--rules .pub-banner,
.tow-page .pub-band--rules .tow-empty {
    margin-top: 24px;
}

.tow-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.tow-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.tow-card-copy {
    min-width: 0;
    flex: 1;
}

.tow-card .pub-card-title {
    margin-bottom: 6px;
}

.tow-card-meta {
    margin-top: 0;
}

.tow-card-amount {
    font-family: var(--pub-py-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pub-py-headline);
    margin: 8px 0 0;
}

.tow-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--pub-py-border);
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pub-py-headline);
    background: var(--pub-py-chip-bg);
}

.tow-status .material-icons {
    font-size: 18px;
    line-height: 1;
}

.tow-status--progress {
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber-fill);
    border-color: var(--pub-py-amber);
}

.tow-status--ok {
    color: var(--pub-py-headline);
    background: var(--pub-py-amber-fill);
    border-color: var(--pub-py-border);
}

.tow-status--error {
    color: var(--pub-py-error-title);
    background: var(--pub-py-state-error-medallion-bg);
    border-color: var(--pub-py-error-border);
}

.tow-status--error .material-icons {
    color: var(--pub-py-state-error-medallion-icon);
}

.tow-empty {
    text-align: center;
}

.tow-empty .pub-icon {
    display: block;
    margin: 0 auto 8px;
}

.tow-alert-title {
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--pub-py-error-title);
    margin: 0 0 6px;
}

.tow-page .pub-banner .pub-card-body {
    margin-bottom: 12px;
}

@media (hover: hover) {
    .tow-page .tow-card:not(.tow-card--skeleton):not(.tow-empty):hover {
        transform: translateY(-4px);
        box-shadow: var(--pub-py-shadow-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tow-card {
        transition: none;
    }
}

/* Saved vehicles (/account/saved/) — masthead + rules + parts; not lot-stage. */
.saved-page .pub-masthead .pub-featured-kicker {
    color: var(--pub-py-masthead-stat-label-muted);
}

.saved-page .pub-masthead .pub-btn--ghost {
    color: var(--pub-py-masthead-headline-on-dark);
    border-color: var(--pub-py-amber);
}

.saved-page .pub-masthead .pub-btn--ghost:hover {
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber);
    border-color: var(--pub-py-amber);
}

.saved-masthead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    touch-action: manipulation;
}

.saved-page .pub-band--rules .pub-grid,
.saved-page .pub-band--rules .pub-banner,
.saved-page .pub-band--rules .saved-empty,
.saved-page .pub-band--rules .saved-list {
    margin-top: 24px;
}

.saved-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.saved-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-right: 52px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.saved-card-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.saved-card-link:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
    border-radius: 8px;
}

.saved-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.saved-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pub-py-chip-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.saved-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.saved-thumb--gone {
    background: var(--pub-py-state-error-medallion-bg);
}

.saved-thumb--gone .material-icons {
    color: var(--pub-py-state-error-medallion-icon);
}

.saved-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.saved-card .pub-card-title {
    margin: 0;
    font-size: 1.25rem;
}

.saved-vin,
.saved-specs {
    font-family: var(--pub-py-font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--pub-py-secondary);
}

.saved-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: var(--pub-py-font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber-fill);
    border: 1px solid var(--pub-py-amber);
}

.saved-yard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.saved-yard-bit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--pub-py-border);
    background: var(--pub-py-chip-bg);
    font-family: var(--pub-py-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pub-py-headline);
}

.saved-yard-bit .material-icons {
    font-size: 16px;
    line-height: 1;
    color: var(--pub-py-amber-600);
}

.saved-yard-bit--zone {
    background: var(--pub-py-amber-fill);
    border-color: var(--pub-py-amber);
}

.saved-since {
    font-family: var(--pub-py-font-body);
    font-size: 0.8125rem;
    color: var(--pub-py-secondary);
}

.saved-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pub-py-border);
    border-radius: 10px;
    background: var(--pub-py-card);
    color: var(--pub-py-headline);
    cursor: pointer;
    touch-action: manipulation;
}

.saved-remove .material-icons {
    font-size: 20px;
    line-height: 1;
}

.saved-remove:hover:not(:disabled) {
    border-color: var(--pub-py-amber);
    background: var(--pub-py-amber-fill);
}

.saved-remove:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

.saved-remove:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.saved-card--busy {
    opacity: 0.6;
}

.saved-card--gone {
    background: var(--pub-py-error-bg);
    border-color: var(--pub-py-error-border);
}

.saved-undo {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.saved-empty {
    text-align: center;
}

.saved-empty .pub-icon {
    display: block;
    margin: 0 auto 8px;
}

.saved-alert-title {
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--pub-py-error-title);
    margin: 0 0 6px;
}

.saved-page .pub-banner .pub-card-body {
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .saved-thumb {
        width: 116px;
        height: 88px;
    }
}

@media (hover: hover) {
    .saved-page .saved-card:not(.saved-card--skeleton):not(.saved-card--gone):hover {
        transform: translateY(-4px);
        box-shadow: var(--pub-py-shadow-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .saved-card {
        transition: none;
    }
}

/* Account hub (/account/) — masthead + rules + parts; not lot-stage. */
.account-page .pub-masthead .pub-featured-kicker {
    color: var(--pub-py-masthead-stat-label-muted);
}

.account-page .pub-masthead .pub-btn--ghost {
    color: var(--pub-py-masthead-headline-on-dark);
    border-color: var(--pub-py-amber);
}

.account-page .pub-masthead .pub-btn--ghost:hover {
    color: var(--pub-py-amber-text);
    background: var(--pub-py-amber);
    border-color: var(--pub-py-amber);
}

.account-masthead-id {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    margin-top: 8px;
}

.account-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--pub-py-masthead-bg);
    background: var(--pub-py-amber);
}

.account-masthead-copy {
    min-width: 0;
}

.account-masthead-copy h1 {
    overflow-wrap: break-word;
}

.account-masthead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    touch-action: manipulation;
}

.account-page .pub-band--rules .pub-grid,
.account-page .pub-band--rules .account-soon-note,
.account-page .pub-band--rules .account-profile {
    margin-top: 24px;
}

.account-page a.account-tile,
.account-page button.account-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: inherit;
    gap: 12px;
    min-height: 44px;
    width: 100%;
    padding: 16px;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--pub-py-card);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.account-page a.account-tile:focus-visible,
.account-page button.account-tile:focus-visible {
    outline: 3px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}
    flex-shrink: 0;
    font-size: 28px;
}

.account-tile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.account-tile-title {
    display: block;
    font-family: var(--pub-py-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--pub-py-headline);
}

.account-tile-desc {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--pub-py-muted);
}

.account-tile-go {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--pub-py-muted);
}

.account-profile-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 44px;
    padding: 12px 0;
    border-top: 1px solid var(--pub-py-border);
}

.account-profile-label {
    font-weight: 600;
    color: var(--pub-py-headline);
}

.account-profile-value {
    overflow-wrap: break-word;
    color: var(--pub-py-secondary);
}

.account-profile-form {
    margin-top: 8px;
}

.account-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .account-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.375rem;
    }

    .account-profile-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .account-profile-value {
        text-align: right;
        max-width: 62%;
    }

    .account-profile-actions {
        flex-direction: row;
    }

    .account-profile-actions .pub-btn {
        width: auto;
        min-width: 150px;
    }
}

@media (hover: hover) {
    .account-page a.account-tile:hover,
    .account-page button.account-tile:hover {
        transform: translateY(-4px);
        box-shadow: var(--pub-py-shadow-hover);
        border-color: var(--pub-py-amber);
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-page a.account-tile,
    .account-page button.account-tile {
        transition: none;
    }
}

/* ── Home hero Vehicles · Parts toggle (JACKS-187) ─────────────────────────────
   Subtle by design: Vehicles stays the headline search. The control is a small
   low-contrast segmented pill. The selected segment is a white card with a
   headline-colored border (>=3:1 against the track), so its state is visible
   without leaning on color alone. Both panels share one grid cell, so the hero
   keeps the height of the taller panel and doesn't jump when switching. */
.pub-hero-mode {
    display: inline-flex;
    gap: 2px;
    margin: 24px auto 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--pub-py-chip-bg);
    border: 1px solid var(--pub-py-border);
}

.pub-hero-mode__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 88px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--pub-py-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--pub-py-secondary);
    text-decoration: none;
    cursor: pointer;
}

.pub-hero-mode__tab[aria-selected="true"] {
    background: var(--pub-py-card);
    color: var(--pub-py-headline);
    border-color: var(--pub-py-headline);
    box-shadow: var(--pub-py-shadow-card);
}

.pub-hero-mode__tab:hover:not([aria-selected="true"]) {
    color: var(--pub-py-headline);
}

.pub-hero-mode__tab:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .pub-hero-mode__tab {
        min-height: 36px;
    }
}

.pub-hero-panels {
    display: grid;
}

.pub-hero-panel {
    grid-area: 1 / 1;
    min-width: 0;
}

.pub-hero-mode + .pub-hero-panels .pub-hero-form {
    margin-top: 16px;
}

.pub-hero-panel--parts {
    max-width: 40rem;
    width: 100%;
    margin: 16px auto 0;
    text-align: left;
}

/* Inactive panel keeps its box (stable height) but is invisible, unfocusable and hidden from AT. */
.pub-hero-panels[data-hero-mode="vehicles"] .pub-hero-panel--parts,
.pub-hero-panels[data-hero-mode="parts"] .pub-hero-panel--vehicles {
    visibility: hidden;
    pointer-events: none;
}

/* No-JS fallback form. Kept compact (2 columns from 480px) because the hidden Parts panel
   shares the grid cell with Vehicles: a tall fallback would stretch the hero for every
   visitor until the real form mounts. */
.pub-hero-parts-fallback {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 12px;
}

.pub-hero-parts-fallback__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pub-hero-parts-fallback .pub-field {
    min-height: 44px;
    box-sizing: border-box;
}

@media (min-width: 480px) {
    .pub-hero-parts-fallback {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: dense;
    }
    .pub-hero-parts-fallback > .pub-btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pub-hero-panel {
        transition: opacity 160ms ease;
    }
    .pub-hero-panels[data-hero-mode="vehicles"] .pub-hero-panel--parts,
    .pub-hero-panels[data-hero-mode="parts"] .pub-hero-panel--vehicles {
        opacity: 0;
    }
}