:root {
    --color-primary: #179C99;
    --color-primary-dark: #0F7472;
    --color-primary-soft: #E7F7F6;
    --color-dark: #0B0F14;
    --color-charcoal: #151A1F;
    --color-text: #1F2933;
    --color-muted: #667085;
    --color-border: #E5E7EB;
    --color-background: #FFFFFF;
    --color-soft: #F6F8FA;
    --color-success: #1B8F5A;
    --color-warning: #A66A00;
    --color-danger: #B42318;
    --color-black: var(--color-dark);
    --color-gray-900: var(--color-charcoal);
    --color-gray-700: var(--color-text);
    --color-gray-500: var(--color-muted);
    --color-gray-200: var(--color-border);
    --color-gray-100: var(--color-soft);
    --color-white: var(--color-background);
    --shadow-soft: 0 18px 48px rgba(11, 15, 20, 0.08);
    --oc-primary: #179C99;
    --oc-primary-900: #063F3E;
    --oc-primary-800: #0B5F5C;
    --oc-primary-700: #10817E;
    --oc-primary-600: #179C99;
    --oc-primary-500: #24B8B4;
    --oc-primary-300: #7EDAD7;
    --oc-primary-200: #BDEDEA;
    --oc-primary-100: #DFF7F5;
    --oc-primary-50: #F0FBFA;
    --oc-ink: #102022;
    --oc-text: #1F2933;
    --oc-muted: #667085;
    --oc-line: #DCEDEA;
    --oc-bg: #FFFFFF;
    --oc-bg-soft: #F7FBFA;
    --oc-accent-yellow: #FFD166;
    --oc-accent-coral: #FF7A59;
    --oc-accent-sky: #72D6FF;
    --oc-radius-sm: 12px;
    --oc-radius-md: 18px;
    --oc-radius-lg: 28px;
    --oc-radius-xl: 36px;
    --oc-shadow-sm: 0 8px 24px rgba(16, 32, 34, 0.08);
    --oc-shadow-md: 0 18px 48px rgba(16, 32, 34, 0.12);
    --oc-shadow-primary: 0 18px 44px rgba(23, 156, 153, 0.24);
    color-scheme: light;
}

/* Restore service page: compact, readable application flow */
.restore-service-page--refined {
    background:
        radial-gradient(circle at 10% 12%, rgba(223, 247, 245, 0.9), transparent 34rem),
        linear-gradient(180deg, #ffffff 0%, #f7fbfa 48%, #ffffff 100%);
}

.restore-service-page--refined .page-hero {
    background: linear-gradient(135deg, #f8fdfc 0%, #ffffff 58%, #e9f8f6 100%);
    color: var(--oc-ink, #102022);
    overflow: hidden;
}

.restore-service-page--refined .page-hero::before {
    opacity: 0.32;
    background:
        radial-gradient(circle at 18% 20%, rgba(23, 156, 153, 0.16), transparent 22rem),
        radial-gradient(circle at 88% 6%, rgba(255, 209, 102, 0.2), transparent 18rem);
}

.restore-service-page--refined .page-hero .eyebrow,
.restore-service-page--refined .page-hero h1,
.restore-service-page--refined .page-hero p {
    color: var(--oc-ink, #102022);
}

.restore-hero-photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.18);
    border-radius: 32px;
    box-shadow: 0 24px 54px rgba(16, 32, 34, 0.13);
    background: #dff7f5;
}

.restore-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.restore-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 32, 34, 0) 42%, rgba(16, 32, 34, 0.56) 100%);
    pointer-events: none;
}

.restore-hero-photo figcaption {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 1;
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 34px rgba(16, 32, 34, 0.16);
    backdrop-filter: blur(14px);
}

.restore-hero-photo figcaption span {
    color: var(--oc-primary-800, #0b5f5c);
    font-size: 0.78rem;
    font-weight: 800;
}

.restore-hero-photo figcaption strong {
    color: var(--oc-ink, #102022);
    font-size: 0.98rem;
    line-height: 1.55;
}

.restore-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

.restore-service-page--refined .section__header {
    max-width: 760px;
}

.restore-check-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 22px;
    align-items: stretch;
}

.restore-check-main,
.restore-condition-panel,
.restore-agreement-panel--linear,
.restore-form-side,
.restore-service-page--refined .restore-service-form {
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 40px rgba(16, 32, 34, 0.08);
}

.restore-check-main {
    padding: 28px;
}

.restore-check-main h3 {
    margin: 24px 0 8px;
    color: var(--oc-ink, #102022);
    font-size: 1.05rem;
    line-height: 1.5;
}

.restore-check-main h3:first-child {
    margin-top: 0;
}

.restore-check-main > p {
    margin: 0;
    color: var(--oc-text, #1f2933);
    font-size: 1rem;
    line-height: 1.85;
}

.restore-compact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.restore-compact-list li {
    position: relative;
    padding: 12px 14px 12px 34px;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 16px;
    background: var(--oc-primary-50, #f0fbfa);
    color: var(--oc-text, #1f2933);
    font-size: 0.91rem;
    line-height: 1.55;
}

.restore-compact-list li::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--oc-primary, #179c99);
}

.restore-muted {
    margin-top: 18px !important;
    color: var(--oc-muted, #667085) !important;
    font-size: 0.88rem !important;
}

.restore-condition-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(180deg, #063f3e 0%, #0b5f5c 100%);
    color: #ffffff;
}

.restore-condition-panel dl {
    display: grid;
    gap: 14px;
    margin: 0;
}

.restore-condition-panel dl div {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.restore-condition-panel dl div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.restore-condition-panel dt {
    color: #dff7f5;
    font-size: 0.82rem;
    font-weight: 800;
}

.restore-condition-panel dd {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.94rem;
    line-height: 1.7;
}

.restore-condition-panel .button {
    align-self: flex-start;
    background: #ffffff;
    color: var(--oc-primary-900, #063f3e);
    box-shadow: none;
}

.restore-flow-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(16, 32, 34, 0.08);
}

.restore-flow-strip div {
    min-height: 168px;
    padding: 24px;
    border-right: 1px solid var(--oc-line, #dcedea);
}

.restore-flow-strip div:last-child {
    border-right: 0;
}

.restore-flow-strip span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: var(--oc-primary-100, #dff7f5);
    color: var(--oc-primary-800, #0b5f5c);
    font-size: 0.84rem;
    font-weight: 900;
}

.restore-flow-strip strong {
    display: block;
    color: var(--oc-ink, #102022);
    font-size: 1rem;
    line-height: 1.45;
}

.restore-flow-strip p {
    margin: 9px 0 0;
    color: var(--oc-muted, #667085);
    font-size: 0.88rem;
    line-height: 1.7;
}

.restore-agreement-panel--linear {
    padding: 10px 28px;
}

.restore-agreement-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.restore-agreement-list li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--oc-line, #dcedea);
}

.restore-agreement-list li:last-child {
    border-bottom: 0;
}

.restore-agreement-list li > span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--oc-primary, #179c99);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
}

.restore-agreement-list h3 {
    margin: 0 0 7px;
    color: var(--oc-ink, #102022);
    font-size: 1rem;
    line-height: 1.5;
}

.restore-agreement-list p {
    margin: 0;
    color: var(--oc-text, #1f2933);
    font-size: 0.92rem;
    line-height: 1.85;
}

.restore-agreement-note {
    margin: 4px 0 22px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--oc-primary-50, #f0fbfa);
    color: var(--oc-primary-900, #063f3e);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.7;
}

.restore-form-layout--refined {
    grid-template-columns: minmax(260px, 0.35fr) minmax(0, 0.65fr);
    align-items: start;
}

.restore-form-layout--refined .restore-form-side {
    position: sticky;
    top: 92px;
    padding: 24px;
}

.restore-form-side h3 {
    margin: 0 0 10px;
    font-size: 1.08rem;
}

.restore-form-side p,
.restore-form-side li {
    font-size: 0.88rem;
    line-height: 1.75;
}

.restore-form-side dl {
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: var(--oc-bg-soft, #f7fbfa);
}

.restore-form-side dd {
    word-break: break-word;
}

.restore-service-page--refined .restore-service-form {
    padding: 28px;
}

.restore-service-page--refined .restore-service-form .form-grid {
    gap: 16px;
}

.restore-service-page--refined .privacy-check {
    border-radius: 18px;
    background: var(--oc-primary-50, #f0fbfa);
}

@media (max-width: 980px) {
    .restore-check-layout,
    .restore-form-layout--refined {
        grid-template-columns: 1fr;
    }

    .restore-form-layout--refined .restore-form-side {
        position: static;
    }

    .restore-flow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .restore-flow-strip div:nth-child(2) {
        border-right: 0;
    }

    .restore-flow-strip div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--oc-line, #dcedea);
    }
}

/* Compatibility disclaimer as plain notice text. Must remain at EOF. */
.compatibility-page .compat-fitment-disclaimer {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: clamp(16px, 2.4vw, 28px) auto clamp(20px, 3vw, 36px) !important;
    padding: 14px 0 !important;
    gap: 10px !important;
    border: 0 !important;
    border-top: 1px solid var(--oc-line, #DCEDEA) !important;
    border-bottom: 1px solid var(--oc-line, #DCEDEA) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.compatibility-page .compat-fitment-disclaimer__lead {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
}

.compatibility-page .compat-fitment-disclaimer__lead > span {
    display: block !important;
    min-height: 0 !important;
    width: fit-content !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-fitment-disclaimer h2 {
    font-size: clamp(18px, 2vw, 24px) !important;
}

.compatibility-page .compat-fitment-disclaimer p {
    font-size: 12px !important;
    line-height: 1.65 !important;
}

.compatibility-page .compat-fitment-disclaimer__points {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.35fr) !important;
    gap: 0 !important;
    border-top: 1px solid rgba(220, 237, 234, 0.78) !important;
    padding-top: 10px !important;
}

.compatibility-page .compat-fitment-disclaimer__points > div {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 14px !important;
}

.compatibility-page .compat-fitment-disclaimer__points > div:first-child {
    padding-left: 0 !important;
}

.compatibility-page .compat-fitment-disclaimer__points > div + div {
    border-left: 1px solid rgba(220, 237, 234, 0.86) !important;
}

.compatibility-page .compat-fitment-disclaimer__points span {
    font-size: 11px !important;
}

.compatibility-page .compat-fitment-disclaimer__points strong {
    margin-top: 3px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-fitment-disclaimer__points p {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.58 !important;
}

.compatibility-page .compat-fitment-disclaimer__links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin-top: 8px !important;
}

.compatibility-page .compat-fitment-disclaimer__links a {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-fitment-disclaimer {
        width: min(100% - 18px, 1180px) !important;
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        padding: 11px 0 !important;
        gap: 8px !important;
    }

    .compatibility-page .compat-fitment-disclaimer h2 {
        font-size: 18px !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points {
        grid-template-columns: 1fr !important;
        padding-top: 8px !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div,
    .compatibility-page .compat-fitment-disclaimer__points > div:first-child {
        grid-column: auto !important;
        padding: 7px 0 !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div:first-child {
        padding-top: 0 !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div + div {
        border-top: 1px solid rgba(220, 237, 234, 0.86) !important;
        border-left: 0 !important;
    }

    .compatibility-page .compat-fitment-disclaimer__links {
        display: flex !important;
        gap: 8px 12px !important;
    }

.compatibility-page .compat-fitment-disclaimer__links a {
    justify-content: flex-start !important;
    min-height: 0 !important;
    text-align: left !important;
}
}

/* Compatibility first-visit notice modal. */
.fitment-notice-open,
.fitment-notice-open body {
    overflow: hidden !important;
}

.fitment-first-notice {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(14px, 3vw, 28px) !important;
    opacity: 1 !important;
    transition: opacity 180ms ease !important;
}

.fitment-first-notice[hidden] {
    display: none !important;
}

.fitment-first-notice[aria-hidden="true"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.fitment-first-notice__overlay {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(7, 18, 20, 0.58) !important;
    backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
}

.fitment-first-notice__dialog {
    position: relative !important;
    display: grid !important;
    width: min(100%, 620px) !important;
    max-height: min(86vh, 720px) !important;
    overflow: auto !important;
    gap: 16px !important;
    border: 1px solid rgba(189, 237, 234, 0.82) !important;
    border-radius: 22px !important;
    background: #FFFFFF !important;
    color: var(--oc-ink, #102022) !important;
    padding: clamp(20px, 3vw, 30px) !important;
    box-shadow: 0 28px 72px rgba(7, 18, 20, 0.28) !important;
}

.fitment-first-notice__dialog:focus {
    outline: none !important;
}

.fitment-first-notice__close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: inline-grid !important;
    width: 36px !important;
    height: 36px !important;
    place-items: center !important;
    border: 1px solid var(--oc-line, #DCEDEA) !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: var(--oc-ink, #102022) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.fitment-first-notice__close:hover,
.fitment-first-notice__close:focus-visible {
    border-color: var(--oc-primary, #179C99) !important;
    outline: 3px solid rgba(23, 156, 153, 0.2) !important;
    outline-offset: 2px !important;
}

.fitment-first-notice__header {
    display: grid !important;
    gap: 7px !important;
    padding-right: 34px !important;
}

.fitment-first-notice__header span {
    color: var(--oc-primary-700, #0B5F5C) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.fitment-first-notice__header h2 {
    margin: 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-size: clamp(22px, 3vw, 30px) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
}

.fitment-first-notice__header p {
    margin: 0 !important;
    color: var(--oc-muted, #667085) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.75 !important;
}

.fitment-first-notice__list {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--oc-line, #DCEDEA) !important;
    border-bottom: 1px solid var(--oc-line, #DCEDEA) !important;
    list-style: none !important;
}

.fitment-first-notice__list li {
    display: grid !important;
    gap: 5px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--oc-line, #DCEDEA) !important;
}

.fitment-first-notice__list li:last-child {
    border-bottom: 0 !important;
}

.fitment-first-notice__list strong {
    color: var(--oc-ink, #102022) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
}

.fitment-first-notice__list span {
    color: var(--oc-text, #1F2933) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.75 !important;
}

.fitment-first-notice__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

.fitment-first-notice__actions .button {
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
}

@media (max-width: 640px) {
    .fitment-first-notice {
        align-items: end !important;
        padding: 10px !important;
    }

    .fitment-first-notice__dialog {
        width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        gap: 12px !important;
        border-radius: 18px !important;
        padding: 17px !important;
    }

    .fitment-first-notice__close {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .fitment-first-notice__header {
        gap: 5px !important;
        padding-right: 34px !important;
    }

    .fitment-first-notice__header h2 {
        font-size: 20px !important;
    }

    .fitment-first-notice__header p {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    .fitment-first-notice__list li {
        padding: 10px 0 !important;
    }

    .fitment-first-notice__list strong {
        font-size: 13px !important;
    }

    .fitment-first-notice__list span {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    .fitment-first-notice__actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .fitment-first-notice__actions .button {
        width: 100% !important;
        min-height: 44px !important;
        white-space: normal !important;
    }
}

/* Restore service page final overrides */
.restore-service-page--refined .page-hero {
    background: linear-gradient(135deg, #f8fdfc 0%, #ffffff 58%, #e9f8f6 100%) !important;
    color: var(--oc-ink, #102022);
}

.restore-service-page--refined .page-hero .eyebrow,
.restore-service-page--refined .page-hero h1,
.restore-service-page--refined .page-hero p {
    color: var(--oc-ink, #102022);
}

.restore-service-page--refined .restore-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

.restore-service-page--refined .restore-check-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 22px;
    align-items: stretch;
}

.restore-service-page--refined .restore-check-main,
.restore-service-page--refined .restore-condition-panel,
.restore-service-page--refined .restore-agreement-panel--linear,
.restore-service-page--refined .restore-form-side,
.restore-service-page--refined .restore-service-form {
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 40px rgba(16, 32, 34, 0.08);
}

.restore-service-page--refined .restore-check-main {
    padding: 28px;
}

.restore-service-page--refined .restore-condition-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(180deg, #063f3e 0%, #0b5f5c 100%);
    color: #ffffff;
}

.restore-service-page--refined .restore-flow-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(16, 32, 34, 0.08);
}

.restore-service-page--refined .restore-flow-strip div {
    min-height: 168px;
    padding: 24px;
    border-right: 1px solid var(--oc-line, #dcedea);
}

.restore-service-page--refined .restore-flow-strip div:last-child {
    border-right: 0;
}

.restore-service-page--refined .restore-agreement-panel--linear {
    padding: 10px 28px;
}

.restore-service-page--refined .restore-agreement-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.restore-service-page--refined .restore-agreement-list li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--oc-line, #dcedea);
}

.restore-service-page--refined .restore-agreement-list li:last-child {
    border-bottom: 0;
}

.restore-service-page--refined .restore-agreement-list li > span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--oc-primary, #179c99);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
}

.restore-service-page--refined .restore-agreement-list h3 {
    margin: 0 0 7px;
    color: var(--oc-ink, #102022);
    font-size: 1rem;
    line-height: 1.5;
}

.restore-service-page--refined .restore-agreement-list p {
    margin: 0;
    color: var(--oc-text, #1f2933);
    font-size: 0.92rem;
    line-height: 1.85;
}

.restore-service-page--refined .restore-form-layout--refined {
    grid-template-columns: minmax(260px, 0.35fr) minmax(0, 0.65fr);
    align-items: start;
}

.restore-service-page--refined .restore-form-layout--refined .restore-form-side {
    position: sticky;
    top: 92px;
    padding: 24px;
}

.restore-service-page--refined .restore-service-form {
    padding: 28px;
}

@media (max-width: 980px) {
    .restore-service-page--refined .restore-check-layout,
    .restore-service-page--refined .restore-form-layout--refined {
        grid-template-columns: 1fr;
    }

    .restore-service-page--refined .restore-form-layout--refined .restore-form-side {
        position: static;
    }

    .restore-service-page--refined .restore-flow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .restore-service-page--refined .restore-section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .restore-service-page--refined .restore-check-main,
    .restore-service-page--refined .restore-condition-panel,
    .restore-service-page--refined .restore-service-form {
        padding: 18px;
    }

    .restore-service-page--refined .restore-compact-list,
    .restore-service-page--refined .restore-flow-strip {
        grid-template-columns: 1fr;
    }

    .restore-service-page--refined .restore-flow-strip div,
    .restore-service-page--refined .restore-flow-strip div:nth-child(2) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--oc-line, #dcedea);
        padding: 18px;
    }

    .restore-service-page--refined .restore-agreement-list li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 17px 0;
    }
}

/* TOP continuity pass: make the refreshed home page read as one soft canvas. */
body.is-home-page .home-page.home-page--refresh {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(ellipse at 12% 2%, rgba(126, 218, 215, 0.22), transparent 28rem),
        radial-gradient(ellipse at 88% 14%, rgba(255, 209, 102, 0.13), transparent 26rem),
        radial-gradient(ellipse at 24% 58%, rgba(114, 214, 255, 0.11), transparent 30rem),
        linear-gradient(180deg, #ffffff 0%, #f7fbfa 38%, #f0fbfa 68%, #ffffff 100%) !important;
}

body.is-home-page .home-page.home-page--refresh::before {
    content: "";
    position: absolute;
    inset: -6rem -12vw;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 14%, rgba(23, 156, 153, 0.12), transparent 24rem),
        radial-gradient(ellipse at 76% 34%, rgba(255, 255, 255, 0.9), transparent 20rem),
        radial-gradient(ellipse at 84% 70%, rgba(23, 156, 153, 0.09), transparent 26rem);
    filter: blur(2px);
    transform: translate3d(0, 0, 0);
    animation: homeCanvasDrift 30s ease-in-out infinite alternate;
}

body.is-home-page .home-page.home-page--refresh::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(115deg, transparent 0 40%, rgba(23, 156, 153, 0.055) 48%, transparent 62%),
        linear-gradient(245deg, transparent 0 50%, rgba(255, 209, 102, 0.06) 58%, transparent 72%);
    background-size: 130% 46rem, 150% 54rem;
    background-position: center 4rem, center 42rem;
    opacity: 0.72;
}

@keyframes homeCanvasDrift {
    from {
        transform: translate3d(-1.5%, -0.5%, 0) scale(1);
    }
    to {
        transform: translate3d(1.5%, 0.8%, 0) scale(1.025);
    }
}

body.is-home-page .home-page.home-page--refresh .home-hero,
body.is-home-page .home-page.home-page--refresh .home-news-ticker,
body.is-home-page .home-page.home-page--refresh .home-section,
body.is-home-page .home-page.home-page--refresh .home-fitment-section,
body.is-home-page .home-page.home-page--refresh .home-support-section,
body.is-home-page .home-page.home-page--refresh .home-final-section {
    background: transparent !important;
}

body.is-home-page .home-page.home-page--refresh .home-section {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none;
}

body.is-home-page .home-page.home-page--refresh .home-section::before,
body.is-home-page .home-page.home-page--refresh .home-section::after {
    display: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero {
    overflow: visible !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero::before {
    width: min(48vw, 620px) !important;
    height: min(48vw, 620px) !important;
    right: -14vw !important;
    top: 8% !important;
    bottom: auto !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(23, 156, 153, 0.12), transparent 68%) !important;
    clip-path: none !important;
    opacity: 1 !important;
    animation: homeCanvasDrift 26s ease-in-out infinite alternate !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero::after {
    display: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__grid {
    opacity: 0.08 !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 70%, transparent 100%) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__panel {
    display: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__inner {
    min-height: clamp(560px, 68vh, 700px) !important;
    padding-top: clamp(48px, 6.5vw, 78px) !important;
    padding-bottom: clamp(42px, 5vw, 62px) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__content {
    max-width: 660px !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero h1 {
    max-width: 12em !important;
    margin: 20px 0 16px !important;
    font-size: clamp(42px, 4.35vw, 58px) !important;
    line-height: 1.16 !important;
    word-break: keep-all !important;
    line-break: strict;
    overflow-wrap: normal !important;
    text-wrap: balance;
}

body.is-home-page .home-page.home-page--refresh .home-hero h1 span {
    display: block !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__lead {
    display: grid !important;
    gap: 4px !important;
    max-width: 42em !important;
    margin: 0 !important;
    color: var(--oc-text, #1f2933) !important;
    font-size: clamp(14px, 1.05vw, 15.5px) !important;
    line-height: 1.82 !important;
    word-break: normal !important;
    line-break: strict;
    overflow-wrap: break-word !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__lead span {
    display: block !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__routes {
    max-width: 600px !important;
    margin-top: 24px !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route {
    min-height: 74px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker {
    margin-top: 0 !important;
    margin-bottom: clamp(28px, 4vw, 52px) !important;
}

body.is-home-page .home-page.home-page--refresh .home-fitment-section {
    padding-top: clamp(58px, 7vw, 86px) !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-section :where(.section__header h2, .section__lead, .eyebrow) {
    color: var(--oc-ink, #102022) !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-section .section__lead {
    color: var(--oc-muted, #667085) !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-lead--refresh {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 86% 8%, rgba(126, 218, 215, 0.22), transparent 18rem),
        linear-gradient(135deg, #063f3e 0%, #0b5f5c 100%) !important;
    padding: clamp(22px, 4vw, 34px);
    box-shadow: 0 24px 58px rgba(16, 32, 34, 0.12);
}

body.is-home-page .home-page.home-page--refresh .home-support-lead--refresh :where(h3, p, .eyebrow) {
    color: #ffffff !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-image {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
}

@media (max-width: 1024px) {
    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        min-height: auto !important;
    }
}

@media (max-width: 760px) {
    body.is-home-page .home-page.home-page--refresh {
        background:
            radial-gradient(ellipse at 18% 0%, rgba(126, 218, 215, 0.18), transparent 20rem),
            radial-gradient(ellipse at 90% 20%, rgba(255, 209, 102, 0.12), transparent 18rem),
            linear-gradient(180deg, #ffffff 0%, #f7fbfa 46%, #ffffff 100%) !important;
    }

    body.is-home-page .home-page.home-page--refresh::before {
        animation: none;
        opacity: 0.8;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero h1 {
        max-width: 10.5em !important;
        margin-top: 18px !important;
        font-size: clamp(30px, 8.4vw, 38px) !important;
        line-height: 1.18 !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__lead {
        gap: 3px !important;
        font-size: 13px !important;
        line-height: 1.72 !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__routes {
        margin-top: 20px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__route {
        min-height: 76px !important;
        padding: 14px 42px 14px 14px !important;
        border-radius: 22px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-news-ticker {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-section {
        padding-block: 48px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-support-lead--refresh {
        border-radius: 26px;
        padding: 18px;
    }
}

@media (max-width: 1040px) {
    .mobile-fixed-cta {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 80;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        border-top: 1px solid rgba(189, 237, 234, 0.9);
        background: rgba(255, 255, 255, 0.96);
        padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
        box-shadow: 0 -14px 34px rgba(16, 32, 34, 0.12);
        backdrop-filter: blur(14px);
    }

    .mobile-fixed-cta__item,
    .mobile-fixed-cta a {
        display: flex !important;
        min-width: 0;
        min-height: 50px !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
        border-radius: 18px !important;
        background: #FFFFFF !important;
        color: var(--oc-primary-900, #063F3E) !important;
        box-shadow: 0 10px 22px rgba(16, 32, 34, 0.07) !important;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }

    .mobile-fixed-cta__item--primary,
    .mobile-fixed-cta a.mobile-fixed-cta__item--primary {
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C)) !important;
        color: #FFFFFF !important;
        box-shadow: 0 14px 30px rgba(23, 156, 153, 0.22) !important;
    }

    .mobile-fixed-cta__label {
        display: block;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .mobile-fixed-cta__note {
        display: block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0;
        opacity: 0.78;
        white-space: nowrap;
    }

    .mobile-fixed-cta a:focus-visible {
        outline: 3px solid rgba(23, 156, 153, 0.34);
        outline-offset: 2px;
    }
}

@media (max-width: 420px) {
    .mobile-fixed-cta {
        gap: 5px;
        padding-inline: max(7px, env(safe-area-inset-left)) max(7px, env(safe-area-inset-right));
    }

    .mobile-fixed-cta__item,
    .mobile-fixed-cta a {
        min-height: 46px !important;
        border-radius: 15px !important;
    }

    .mobile-fixed-cta__label {
        font-size: 12px;
    }

    .mobile-fixed-cta__note {
        font-size: 9px;
    }
}

@media (min-width: 1041px) {
    .mobile-fixed-cta {
        display: none !important;
    }
}

/* Mobile hamburger drawer override.
   This block intentionally sits at the end because older mobile menu rules exist above. */
@media (max-width: 1040px) {
    .mobile-nav {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 140 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .mobile-nav__drawer,
    .mobile-nav details {
        position: relative !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 1px solid rgba(189, 237, 234, 0.95) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 12px 28px rgba(16, 32, 34, 0.12) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        cursor: pointer !important;
        list-style: none !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        backdrop-filter: blur(14px);
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease !important;
    }

    .mobile-nav__trigger::-webkit-details-marker,
    .mobile-nav summary::-webkit-details-marker,
    .mobile-nav__trigger::after,
    .mobile-nav summary::after {
        display: none !important;
        content: none !important;
    }

    .mobile-nav__trigger-icon {
        display: grid !important;
        width: 18px !important;
        gap: 4px !important;
    }

    .mobile-nav__trigger-icon span {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transform-origin: center !important;
        transition: transform 180ms ease, opacity 180ms ease !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger,
    .mobile-nav__trigger:hover,
    .mobile-nav__trigger:focus-visible {
        border-color: var(--oc-primary-300, #7EDAD7) !important;
        background: var(--oc-primary-50, #F0FBFA) !important;
        box-shadow: 0 16px 34px rgba(23, 156, 153, 0.18) !important;
        transform: translateY(-1px) !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-nav__trigger:focus-visible {
        outline: 3px solid rgba(23, 156, 153, 0.28) !important;
        outline-offset: 3px !important;
    }

    .mobile-nav__panel {
        position: fixed !important;
        top: calc(62px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        display: grid !important;
        width: min(360px, calc(100vw - 20px)) !important;
        max-height: min(74dvh, 640px) !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
        border: 1px solid rgba(189, 237, 234, 0.95) !important;
        border-radius: 24px !important;
        background: radial-gradient(circle at 12% 0%, rgba(223, 247, 245, 0.92), transparent 14rem), #FFFFFF !important;
        box-shadow: 0 24px 64px rgba(16, 32, 34, 0.18) !important;
        padding: 14px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-8px) scale(0.98) !important;
        transform-origin: top right !important;
        visibility: hidden !important;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__panel {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
        visibility: visible !important;
    }

    .mobile-nav__panel-head {
        display: grid !important;
        gap: 3px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid var(--oc-line, #DCEDEA) !important;
        padding: 3px 4px 12px !important;
    }

    .mobile-nav__panel-head strong {
        color: var(--oc-ink, #102022) !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1.35 !important;
    }

    .mobile-nav__panel-head span {
        color: var(--oc-muted, #667085) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.55 !important;
    }

    .mobile-nav nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .mobile-nav__group {
        margin: 12px 4px 2px !important;
        border: 0 !important;
        color: var(--oc-primary-800, #0B5F5C) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.35 !important;
    }

    .mobile-nav a,
    .mobile-nav a.mobile-nav__store {
        display: flex !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: space-between !important;
        border: 1px solid var(--oc-line, #DCEDEA) !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: none !important;
        color: var(--oc-text, #1F2933) !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.45 !important;
        text-decoration: none !important;
        transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease !important;
    }

    .mobile-nav a::after {
        content: "" !important;
        width: 7px !important;
        height: 7px !important;
        flex: 0 0 auto !important;
        margin-left: 10px !important;
        border-right: 2px solid var(--oc-primary, #179C99) !important;
        border-bottom: 2px solid var(--oc-primary, #179C99) !important;
        transform: rotate(-45deg) !important;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible,
    .mobile-nav a.mobile-nav__store:hover,
    .mobile-nav a.mobile-nav__store:focus-visible {
        border-color: var(--oc-primary-300, #7EDAD7) !important;
        background: var(--oc-primary-50, #F0FBFA) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        transform: translateY(-1px) !important;
    }

    .mobile-nav a.mobile-nav__store {
        margin-top: 8px !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C)) !important;
        color: #FFFFFF !important;
    }

    .mobile-nav a.mobile-nav__store::after {
        border-color: #FFFFFF !important;
    }
}

@media (max-width: 420px) {
    .mobile-nav {
        top: calc(9px + env(safe-area-inset-top)) !important;
        right: max(9px, env(safe-area-inset-right)) !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        min-height: 42px !important;
        padding-inline: 12px !important;
    }

    .mobile-nav__trigger-text {
        font-size: 11px !important;
    }

    .mobile-nav__panel {
        top: calc(57px + env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        width: min(342px, calc(100vw - 16px)) !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }
}

@media (min-width: 1041px) {
    .mobile-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav__trigger,
    .mobile-nav__trigger-icon span,
    .mobile-nav__panel,
    .mobile-nav a {
        transition: none !important;
    }
}

/* Compatibility result page: grouped vehicle detail view */
.compatibility-page .fitment-results--simple {
    max-width: 1120px;
    margin-inline: auto;
}

.compatibility-page .fitment-results--simple .fitment-results__header {
    align-items: flex-end;
    border: 1px solid rgba(220, 237, 234, 0.9);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(240, 251, 250, 0.96), rgba(255, 255, 255, 0.96));
    padding: 18px 20px;
}

.compatibility-page .fitment-results--simple .fitment-results__header h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: 0;
}

.compatibility-page .fitment-simple-card {
    border-radius: 28px;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.09);
}

.compatibility-page .fitment-simple-card__header {
    align-items: flex-start;
    padding: 22px 24px;
}

.compatibility-page .fitment-simple-card__header h3 {
    overflow-wrap: anywhere;
    font-size: clamp(20px, 2.1vw, 28px);
}

.compatibility-page .fitment-simple-sections {
    gap: 0;
}

.compatibility-page .fitment-simple-section {
    gap: 16px;
    padding: 18px 22px 20px;
}

.compatibility-page .fitment-simple-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF);
    padding: 14px 16px;
}

.compatibility-page .fitment-simple-section__head span {
    display: block;
    margin-bottom: 4px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .fitment-simple-section__head h4 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .fitment-simple-section__head h4 small {
    display: inline-block;
    margin-left: 8px;
    color: var(--oc-muted, #667085);
    font-size: 0.75em;
    font-weight: 800;
}

.compatibility-page .fitment-simple-section__meta {
    grid-template-columns: minmax(160px, 0.95fr) minmax(150px, 0.75fr) minmax(240px, 1.3fr);
}

.compatibility-page .fitment-simple-section__meta strong {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.compatibility-page .fitment-product-lines {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.compatibility-page .fitment-product-line {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    border-color: rgba(189, 237, 234, 0.95);
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.045);
}

.compatibility-page .fitment-product-line p,
.compatibility-page .fitment-product-line__actions {
    grid-column: 1 / -1;
}

.compatibility-page .fitment-product-line__actions {
    justify-content: flex-start;
}

.compatibility-page .fitment-product-line__actions a {
    min-height: 34px;
    padding: 8px 12px;
}

@media (max-width: 900px) {
    .compatibility-page .fitment-results--simple .fitment-results__header {
        align-items: flex-start;
        padding: 16px;
    }

    .compatibility-page .fitment-simple-section__head,
    .compatibility-page .fitment-product-line {
        grid-template-columns: 1fr;
    }

    .compatibility-page .fitment-simple-section__head {
        flex-direction: column;
    }

    .compatibility-page .fitment-simple-section__meta,
    .compatibility-page .fitment-product-lines {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .fitment-results--simple {
        gap: 14px;
    }

    .compatibility-page .fitment-results--simple .fitment-results__header,
    .compatibility-page .fitment-simple-card {
        border-radius: 20px;
    }

    .compatibility-page .fitment-simple-card__header,
    .compatibility-page .fitment-simple-section {
        padding: 16px;
    }

    .compatibility-page .fitment-product-line__actions a {
        flex: 1 1 132px;
    }
}

/* Compatibility index detail refinement */
.compatibility-page .compat-search__flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    list-style: none !important;
}

.compatibility-page .compat-search__flow li {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    align-items: center !important;
    min-height: 72px !important;
    border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #F7FBFA, #FFFFFF) !important;
    padding: 12px !important;
}

.compatibility-page .compat-search__flow li > span {
    display: grid !important;
    grid-row: 1 / span 2 !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--oc-primary, #179C99) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .compat-search__flow strong,
.compatibility-page .compat-search__flow small {
    display: block !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.compatibility-page .compat-search__flow strong {
    color: var(--oc-ink, #102022) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.compatibility-page .compat-search__flow small {
    color: var(--oc-muted, #667085) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

.compatibility-page .compat-search__grid--nav {
    grid-template-columns: minmax(180px, 0.95fr) minmax(240px, 1.35fr) minmax(160px, 0.75fr) !important;
}

.compatibility-page .compat-search__manual-field {
    grid-column: 1 / -1 !important;
    background: #F7FBFA !important;
}

.compatibility-page .compatibility-manufacturer-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.compatibility-page .compatibility-manufacturer-link-card {
    display: flex;
    min-height: 154px;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--oc-ink, #102022);
    padding: 18px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.065);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.compatibility-page .compatibility-manufacturer-link-card:hover,
.compatibility-page .compatibility-manufacturer-link-card:focus-visible {
    border-color: var(--oc-primary, #179C99);
    box-shadow: 0 18px 42px rgba(16, 32, 34, 0.1);
    transform: translateY(-2px);
}

.compatibility-page .compatibility-manufacturer-link-card:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.26);
    outline-offset: 3px;
}

.compatibility-page .compatibility-manufacturer-link-card span {
    display: block;
    color: var(--oc-primary-700, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.compatibility-page .compatibility-manufacturer-link-card h3 {
    margin: 5px 0 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.compatibility-page .compatibility-manufacturer-link-card small {
    display: block;
    margin-top: 7px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.compatibility-page .compatibility-manufacturer-link-card > strong {
    display: inline-flex;
    width: fit-content;
    min-height: 36px;
    align-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #F7FBFA;
    color: var(--oc-primary-700, #0B5F5C);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .compatibility-maker-board {
    align-items: start !important;
}

.compatibility-page .compatibility-maker-board--nav .compatibility-maker-card {
    height: fit-content !important;
}

.compatibility-page .compatibility-maker-board--nav .compatibility-maker-card__body {
    max-height: 340px;
}

.compatibility-page .compatibility-bottom-phone-cta {
    margin-bottom: 22px;
}

.compatibility-page .compatibility-bottom-phone-cta .phone-cta {
    margin: 0;
}

@media (max-width: 980px) {
    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compatibility-page .compat-search__grid--nav {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .compatibility-page .compat-search__flow {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__flow li {
        min-height: 62px !important;
        border-radius: 16px !important;
        padding: 10px !important;
    }

    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: 1fr;
    }

    .compatibility-page .compatibility-manufacturer-link-card {
        min-height: 132px;
        border-radius: 20px;
        padding: 16px;
    }
}

/* Compatibility page final UX pass. Keep this last so older compatibility blocks cannot dilute the search-first layout. */
.compatibility-page .compat-hero__inner {
    width: min(1180px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr) !important;
    gap: clamp(24px, 5vw, 58px) !important;
    padding: clamp(44px, 6vw, 74px) 0 24px !important;
}

.compatibility-page .compat-hero__copy h1 {
    max-width: 12.5em !important;
    font-size: clamp(34px, 5.2vw, 62px) !important;
    line-height: 1.12 !important;
}

.compatibility-page .compat-hero__image-card {
    width: min(100%, 440px) !important;
    border-radius: 28px !important;
}

.compatibility-page .compat-hero__image-card img {
    height: clamp(240px, 30vw, 350px) !important;
}

.compatibility-page .compat-hero__quick,
.compatibility-page .compatibility-search-section .section__inner,
.compatibility-page .compatibility-maker-section .section__inner {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
}

.compatibility-page .compat-hero__quick {
    gap: 10px !important;
    padding-bottom: clamp(30px, 4vw, 48px) !important;
}

.compatibility-page .compat-hero__quick a {
    min-height: 92px !important;
    border-radius: 20px !important;
    padding: 15px 18px !important;
}

.compatibility-page .compatibility-search-section--primary {
    padding-top: clamp(28px, 5vw, 54px) !important;
}

.compatibility-page .compatibility-workbench {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.12fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.compatibility-page .compatibility-workbench__form {
    position: sticky !important;
    top: 86px !important;
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-search {
    display: grid !important;
    gap: 18px !important;
    border-radius: 24px !important;
    padding: clamp(18px, 2.5vw, 24px) !important;
}

.compatibility-page .compat-search__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.compatibility-page .compat-guided-search {
    gap: 14px !important;
}

.compatibility-page .compat-search__flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.compatibility-page .compat-search__flow li {
    min-height: 64px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    border-radius: 16px !important;
    padding: 10px !important;
}

.compatibility-page .compat-search__flow li > span {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
}

.compatibility-page .compat-search__grid--guided,
.compatibility-page .compat-search__grid--nav {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.compatibility-page .compat-search__selection {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.compatibility-page .compat-search__selection div,
.compatibility-page .compatibility-result-preview div {
    min-width: 0 !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 15px !important;
    background: #F7FBFA !important;
    padding: 10px 12px !important;
}

.compatibility-page .compat-search__selection span,
.compatibility-page .compatibility-result-preview small {
    display: block !important;
    margin-bottom: 3px !important;
    color: #0B5F5C !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search__selection strong,
.compatibility-page .compatibility-result-preview b {
    display: block !important;
    overflow-wrap: anywhere !important;
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-search__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.compatibility-page .compatibility-inline-results {
    min-width: 0 !important;
    margin-top: 0 !important;
    scroll-margin-top: 92px !important;
}

.compatibility-page .compatibility-workbench .fitment-results--simple {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

.compatibility-page .compatibility-inline-placeholder {
    min-height: 100% !important;
    border-style: solid !important;
    border-radius: 24px !important;
    padding: clamp(20px, 3vw, 28px) !important;
}

.compatibility-page .compatibility-inline-placeholder--primary {
    min-height: 430px !important;
}

.compatibility-page .compatibility-result-preview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.compatibility-page .compatibility-manufacturer-link-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.compatibility-page .compatibility-manufacturer-link-card {
    min-height: 132px !important;
    border-radius: 18px !important;
    padding: 14px !important;
}

.compatibility-page .compatibility-manufacturer-link-card__counts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.compatibility-page .compatibility-manufacturer-link-card__counts span {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 999px !important;
    background: #F7FBFA !important;
    color: #102022 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .compatibility-maker-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.compatibility-page .fitment-status-guide {
    margin: 0 18px 16px !important;
}

.compatibility-page .vehicle-fitment-year-cards {
    gap: 12px !important;
    margin: 0 18px 18px !important;
}

@media (max-width: 1080px) {
    .compatibility-page .compatibility-workbench {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compatibility-workbench__form {
        position: static !important;
    }

    .compatibility-page .compatibility-inline-placeholder--primary {
        min-height: auto !important;
    }

    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .compatibility-page .compatibility-maker-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .compatibility-page .compat-hero__inner {
        grid-template-columns: 1fr !important;
        width: min(100% - 30px, 1180px) !important;
        padding-top: 34px !important;
    }

    .compatibility-page .compat-hero__visual {
        justify-items: stretch !important;
    }

    .compatibility-page .compat-hero__image-card {
        width: 100% !important;
    }

    .compatibility-page .compat-hero__status-card {
        position: static !important;
        max-width: none !important;
    }

    .compatibility-page .compat-hero__quick,
    .compatibility-page .compatibility-search-section .section__inner,
    .compatibility-page .compatibility-maker-section .section__inner {
        width: min(100% - 30px, 1180px) !important;
    }

    .compatibility-page .compat-hero__quick,
    .compatibility-page .compat-search__flow,
    .compatibility-page .compat-search__selection,
    .compatibility-page .compatibility-result-preview,
    .compatibility-page .compatibility-manufacturer-link-grid,
    .compatibility-page .compatibility-maker-board {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__header,
    .compatibility-page .vehicle-fitment-year-card__head {
        display: grid !important;
    }

    .compatibility-page .compat-search__header .button,
    .compatibility-page .compat-search__actions .button {
        width: 100% !important;
    }

    .compatibility-page .compat-search__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* Compatibility page final interaction polish. Must remain at EOF. */
.compatibility-page .compat-hero__quick a:first-child {
    border-color: rgba(23, 156, 153, 0.55) !important;
    background: linear-gradient(135deg, #E9F8F7, #FFFFFF) !important;
    box-shadow: 0 16px 38px rgba(23, 156, 153, 0.16) !important;
}

.compatibility-page .compat-search--vehicle {
    border: 2px solid rgba(23, 156, 153, 0.34) !important;
    box-shadow: 0 20px 54px rgba(16, 32, 34, 0.11) !important;
}

.compatibility-page .compat-search__required-callout {
    display: grid !important;
    gap: 4px !important;
    border: 1px solid rgba(23, 156, 153, 0.22) !important;
    border-left: 5px solid #179C99 !important;
    border-radius: 16px !important;
    background: #F0FBFA !important;
    padding: 12px 14px !important;
}

.compatibility-page .compat-search__required-callout strong,
.compatibility-page .compat-search__required-callout span {
    display: block !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.compatibility-page .compat-search__required-callout strong {
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.compatibility-page .compat-search__required-callout span {
    color: #4A5568 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.compatibility-page .form-field--priority span em {
    display: inline-flex !important;
    min-height: 20px !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: #102022 !important;
    color: #FFFFFF !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    vertical-align: 1px !important;
}

.compatibility-page .compat-search__actions--primary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(112px, auto) !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(16, 32, 34, 0.12) !important;
    border-radius: 18px !important;
    background: #102022 !important;
    padding: 12px !important;
}

.compatibility-page .compat-search__submit-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-search__submit-copy strong {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-search__submit-copy span {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.5 !important;
}

.compatibility-page .compat-search__actions--primary .button {
    min-height: 44px !important;
    white-space: nowrap !important;
}

.compatibility-page .compat-search__primary-submit {
    min-width: 150px !important;
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.24) !important;
}

.compatibility-page .compat-search__actions--primary .button--secondary {
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.compatibility-page .compat-search__actions--primary .button[disabled] {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: #DCEDEA !important;
    color: #667085 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.68 !important;
}

.compatibility-page .compat-search__error {
    margin: -4px 0 0 !important;
    border: 1px solid rgba(185, 56, 21, 0.28) !important;
    border-radius: 14px !important;
    background: #FFF8F6 !important;
    color: #8A2D16 !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
}

.compatibility-page .vehicle-fitment-year-card__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions {
    display: grid !important;
    grid-template-columns: minmax(138px, auto) 96px !important;
    align-items: center !important;
    gap: 8px !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge {
    justify-content: center !important;
    min-width: 138px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge span {
    min-width: 34px !important;
    min-height: 20px !important;
    font-size: 10px !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle {
    width: 96px !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 10px !important;
}

.compatibility-page .vehicle-fitment-product-card {
    grid-template-rows: auto minmax(48px, 1fr) auto !important;
}

.compatibility-page .vehicle-fitment-product-card__actions,
.compatibility-page .fitment-product-line__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
}

.compatibility-page .vehicle-fitment-product-card__actions a,
.compatibility-page .fitment-product-line__actions a {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    text-align: center !important;
}

.compatibility-page .fitment-product-line {
    align-content: start !important;
    min-height: 178px !important;
}

.compatibility-page .fitment-product-line p,
.compatibility-page .fitment-product-line__actions {
    grid-column: 1 / -1 !important;
}

.compatibility-page .fitment-product-line__actions {
    align-self: end !important;
    justify-content: stretch !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-search__actions--primary {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__submit-copy {
        text-align: center !important;
    }

    .compatibility-page .compat-search__primary-submit {
        min-width: 0 !important;
    }

    .compatibility-page .vehicle-fitment-year-card__head {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: minmax(0, 1fr) 92px !important;
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge {
        min-width: 0 !important;
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle {
        width: 92px !important;
    }
}

@media (max-width: 420px) {
    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle {
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-product-card__actions,
    .compatibility-page .fitment-product-line__actions {
        grid-template-columns: 1fr !important;
    }
}

/* Compatibility search clarity and result alignment pass. */
.compatibility-page .compat-hero__quick a:first-child {
    border-color: rgba(23, 156, 153, 0.55) !important;
    background: linear-gradient(135deg, #E9F8F7, #FFFFFF) !important;
    box-shadow: 0 16px 38px rgba(23, 156, 153, 0.16) !important;
}

.compatibility-page .compat-search--vehicle {
    border: 2px solid rgba(23, 156, 153, 0.34) !important;
    box-shadow: 0 20px 54px rgba(16, 32, 34, 0.11) !important;
}

.compatibility-page .compat-search__required-callout {
    display: grid !important;
    gap: 4px !important;
    border: 1px solid rgba(23, 156, 153, 0.22) !important;
    border-left: 5px solid #179C99 !important;
    border-radius: 16px !important;
    background: #F0FBFA !important;
    padding: 12px 14px !important;
}

.compatibility-page .compat-search__required-callout strong,
.compatibility-page .compat-search__required-callout span {
    display: block !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.compatibility-page .compat-search__required-callout strong {
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.compatibility-page .compat-search__required-callout span {
    color: #4A5568 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.compatibility-page .form-field--priority span em {
    display: inline-flex !important;
    min-height: 20px !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: #102022 !important;
    color: #FFFFFF !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    vertical-align: 1px !important;
}

.compatibility-page .compat-search__actions--primary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(112px, auto) !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(16, 32, 34, 0.12) !important;
    border-radius: 18px !important;
    background: #102022 !important;
    padding: 12px !important;
}

.compatibility-page .compat-search__submit-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-search__submit-copy strong {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-search__submit-copy span {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.5 !important;
}

.compatibility-page .compat-search__actions--primary .button {
    min-height: 44px !important;
    white-space: nowrap !important;
}

.compatibility-page .compat-search__primary-submit {
    min-width: 150px !important;
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.24) !important;
}

.compatibility-page .compat-search__actions--primary .button--secondary {
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.compatibility-page .compat-search__actions--primary .button[disabled] {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: #DCEDEA !important;
    color: #667085 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.68 !important;
}

.compatibility-page .compat-search__error {
    margin: -4px 0 0 !important;
    border: 1px solid rgba(185, 56, 21, 0.28) !important;
    border-radius: 14px !important;
    background: #FFF8F6 !important;
    color: #8A2D16 !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
}

.compatibility-page .vehicle-fitment-year-card__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions {
    display: grid !important;
    grid-template-columns: minmax(138px, auto) 96px !important;
    align-items: center !important;
    gap: 8px !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge {
    justify-content: center !important;
    min-width: 138px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge span {
    min-width: 34px !important;
    min-height: 20px !important;
    font-size: 10px !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle {
    width: 96px !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 10px !important;
}

.compatibility-page .vehicle-fitment-product-card {
    grid-template-rows: auto minmax(48px, 1fr) auto !important;
}

.compatibility-page .vehicle-fitment-product-card__actions,
.compatibility-page .fitment-product-line__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
}

.compatibility-page .vehicle-fitment-product-card__actions a,
.compatibility-page .fitment-product-line__actions a {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    text-align: center !important;
}

.compatibility-page .fitment-product-line {
    align-content: start !important;
    min-height: 178px !important;
}

.compatibility-page .fitment-product-line p,
.compatibility-page .fitment-product-line__actions {
    grid-column: 1 / -1 !important;
}

.compatibility-page .fitment-product-line__actions {
    align-self: end !important;
    justify-content: stretch !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-search__actions--primary {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__submit-copy {
        text-align: center !important;
    }

    .compatibility-page .compat-search__primary-submit {
        min-width: 0 !important;
    }

    .compatibility-page .vehicle-fitment-year-card__head {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: minmax(0, 1fr) 92px !important;
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge {
        min-width: 0 !important;
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle {
        width: 92px !important;
    }
}

@media (max-width: 420px) {
    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle {
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-product-card__actions,
    .compatibility-page .fitment-product-line__actions {
        grid-template-columns: 1fr !important;
    }
}

/* Compatibility index UX refresh: keep the search path visually dominant. */
.compatibility-page {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 46%, #FFFFFF 100%) !important;
}

.compatibility-page .compat-hero {
    border-bottom: 1px solid rgba(220, 237, 234, 0.9) !important;
    background:
        linear-gradient(135deg, #FFFFFF 0%, #F0FBFA 74%, #FFFFFF 100%) !important;
}

.compatibility-page .compat-hero::before,
.compatibility-page .compat-hero::after {
    display: none !important;
}

.compatibility-page .compat-hero__inner {
    width: min(1180px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr) !important;
    gap: clamp(24px, 5vw, 58px) !important;
    padding: clamp(44px, 6vw, 74px) 0 24px !important;
}

.compatibility-page .compat-hero__copy {
    gap: 15px !important;
}

.compatibility-page .compat-hero__copy h1 {
    max-width: 12.5em !important;
    font-size: clamp(34px, 5.2vw, 62px) !important;
    line-height: 1.12 !important;
}

.compatibility-page .compat-hero__lead {
    max-width: 720px !important;
    font-size: clamp(14px, 1.35vw, 17px) !important;
    line-height: 1.85 !important;
}

.compatibility-page .compat-hero__actions {
    margin-top: 4px !important;
}

.compatibility-page .compat-hero__actions .button {
    min-height: 46px !important;
}

.compatibility-page .compat-hero__image-card {
    width: min(100%, 440px) !important;
    border-radius: 28px !important;
}

.compatibility-page .compat-hero__image-card::before {
    border-radius: 21px !important;
    inset: 12px !important;
}

.compatibility-page .compat-hero__image-card img {
    height: clamp(240px, 30vw, 350px) !important;
}

.compatibility-page .compat-hero__status-card {
    right: 16px !important;
    bottom: -18px !important;
    max-width: min(320px, calc(100% - 32px)) !important;
    border-radius: 18px !important;
    padding: 13px 15px !important;
}

.compatibility-page .compat-hero__quick {
    width: min(1180px, calc(100% - 40px)) !important;
    gap: 10px !important;
    padding-bottom: clamp(30px, 4vw, 48px) !important;
}

.compatibility-page .compat-hero__quick a {
    min-height: 92px !important;
    border-radius: 20px !important;
    padding: 15px 18px !important;
}

.compatibility-page .compat-hero__quick span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
}

.compatibility-page .compatibility-search-section--primary {
    padding-top: clamp(28px, 5vw, 54px) !important;
}

.compatibility-page .compatibility-search-section .section__inner,
.compatibility-page .compatibility-maker-section .section__inner {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
}

.compatibility-page .compatibility-workbench {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.12fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.compatibility-page .compatibility-workbench__form {
    position: sticky !important;
    top: 86px !important;
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-search {
    display: grid !important;
    gap: 18px !important;
    border-color: rgba(189, 237, 234, 0.95) !important;
    border-radius: 24px !important;
    padding: clamp(18px, 2.5vw, 24px) !important;
    box-shadow: 0 16px 42px rgba(16, 32, 34, 0.075) !important;
}

.compatibility-page .compat-search__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border-bottom: 1px solid #DCEDEA !important;
    padding-bottom: 16px !important;
}

.compatibility-page .compat-search__header h2 {
    margin: 0 !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search__header p:not(.eyebrow) {
    max-width: 620px !important;
    margin: 7px 0 0 !important;
}

.compatibility-page .compat-guided-search {
    gap: 14px !important;
}

.compatibility-page .compat-search__flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.compatibility-page .compat-search__flow li {
    min-height: 64px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    border-radius: 16px !important;
    padding: 10px !important;
}

.compatibility-page .compat-search__flow li > span {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
}

.compatibility-page .compat-search__grid--guided {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.compatibility-page .compat-search__grid--nav {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.compatibility-page .form-field--priority,
.compatibility-page .compat-search__manual-field {
    border-color: #BDEDEA !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    padding: 12px !important;
}

.compatibility-page .form-field--priority select,
.compatibility-page .compat-search__manual-field input {
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
}

.compatibility-page .compat-search__selection {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.compatibility-page .compat-search__selection div {
    min-width: 0 !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 15px !important;
    background: #F7FBFA !important;
    padding: 10px 12px !important;
}

.compatibility-page .compat-search__selection span,
.compatibility-page .compatibility-result-preview small {
    display: block !important;
    margin-bottom: 3px !important;
    color: #0B5F5C !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search__selection strong,
.compatibility-page .compatibility-result-preview b {
    display: block !important;
    overflow-wrap: anywhere !important;
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-search__inline-note {
    border-radius: 15px !important;
    padding: 11px 12px !important;
}

.compatibility-page .compat-search__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    border-top: 1px solid #DCEDEA !important;
    padding-top: 16px !important;
}

.compatibility-page .compat-search__actions .button {
    min-height: 46px !important;
}

.compatibility-page .compatibility-inline-results {
    min-width: 0 !important;
    margin-top: 0 !important;
    scroll-margin-top: 92px !important;
}

.compatibility-page .compatibility-workbench .fitment-results--simple {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

.compatibility-page .compatibility-inline-placeholder {
    min-height: 100% !important;
    align-content: start !important;
    border-style: solid !important;
    border-radius: 24px !important;
    padding: clamp(20px, 3vw, 28px) !important;
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.06) !important;
}

.compatibility-page .compatibility-inline-placeholder--primary {
    min-height: 430px !important;
}

.compatibility-page .compatibility-result-preview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.compatibility-page .compatibility-result-preview div {
    border: 1px solid #DCEDEA !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    padding: 13px !important;
}

.compatibility-page .fitment-results--simple .fitment-results__header {
    border-radius: 22px !important;
    padding: 16px 18px !important;
}

.compatibility-page .fitment-results--simple .fitment-results__header h2 {
    font-size: clamp(20px, 2.2vw, 28px) !important;
}

.compatibility-page .fitment-simple-card {
    border-radius: 24px !important;
}

.compatibility-page .fitment-simple-card__header {
    padding: 18px 20px !important;
}

.compatibility-page .fitment-status-guide {
    margin: 0 18px 16px !important;
    border-radius: 17px !important;
    padding: 12px !important;
}

.compatibility-page .vehicle-fitment-year-cards {
    gap: 12px !important;
    margin: 0 18px 18px !important;
}

.compatibility-page .vehicle-fitment-year-card {
    border-radius: 18px !important;
}

.compatibility-page .vehicle-fitment-year-card__head {
    padding: 16px !important;
}

.compatibility-page .vehicle-fitment-year-card__body {
    padding: 14px !important;
}

.compatibility-page .vehicle-fitment-grade-matrix-panel {
    border-radius: 16px !important;
    padding: 12px !important;
}

.compatibility-page .vehicle-fitment-products-detail > summary {
    min-height: 46px !important;
}

.compatibility-page .compatibility-manufacturer-link-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.compatibility-page .compatibility-manufacturer-link-card {
    min-height: 132px !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.055) !important;
}

.compatibility-page .compatibility-manufacturer-link-card h3 {
    font-size: clamp(16px, 1.6vw, 21px) !important;
}

.compatibility-page .compatibility-manufacturer-link-card__counts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.compatibility-page .compatibility-manufacturer-link-card__counts span {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 999px !important;
    background: #F7FBFA !important;
    color: #102022 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .compatibility-maker-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.compatibility-page .compatibility-maker-card {
    border-radius: 18px !important;
}

.compatibility-page .compatibility-maker-card summary {
    padding: 15px 16px !important;
}

.compatibility-page .compatibility-bottom-phone-cta {
    margin-bottom: 18px !important;
}

@media (max-width: 1080px) {
    .compatibility-page .compatibility-workbench {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compatibility-workbench__form {
        position: static !important;
    }

    .compatibility-page .compatibility-inline-placeholder--primary {
        min-height: auto !important;
    }

    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .compatibility-page .compatibility-maker-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .compatibility-page .compat-hero__inner {
        grid-template-columns: 1fr !important;
        width: min(100% - 30px, 1180px) !important;
        padding-top: 34px !important;
    }

    .compatibility-page .compat-hero__visual {
        justify-items: stretch !important;
    }

    .compatibility-page .compat-hero__image-card {
        width: 100% !important;
    }

    .compatibility-page .compat-hero__status-card {
        position: static !important;
        max-width: none !important;
    }

    .compatibility-page .compat-hero__quick,
    .compatibility-page .compatibility-search-section .section__inner,
    .compatibility-page .compatibility-maker-section .section__inner {
        width: min(100% - 30px, 1180px) !important;
    }

    .compatibility-page .compat-hero__quick,
    .compatibility-page .compat-search__flow,
    .compatibility-page .compat-search__selection,
    .compatibility-page .compatibility-result-preview,
    .compatibility-page .compatibility-manufacturer-link-grid,
    .compatibility-page .compatibility-maker-board {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__header {
        display: grid !important;
    }

    .compatibility-page .compat-search__header .button {
        width: 100% !important;
    }

    .compatibility-page .compat-search__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__actions .button {
        width: 100% !important;
    }

    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 12px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__head {
        display: grid !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        width: 100% !important;
    }
}

@media (max-width: 420px) {
    .compatibility-page .compat-hero__copy h1 {
        font-size: 31px !important;
    }

    .compatibility-page .compat-search,
    .compatibility-page .compatibility-inline-placeholder,
    .compatibility-page .fitment-simple-card {
        border-radius: 18px !important;
    }

    .compatibility-page .compat-hero__quick a {
        min-height: 82px !important;
    }
}

.compatibility-page .vehicle-fitment-matrix-panel {
    display: grid;
    gap: 14px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 16px;
}

.compatibility-page .vehicle-fitment-grade-panel {
    display: grid;
    gap: 14px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-left: 5px solid #667085;
    border-radius: 18px;
    background: #F7FBFA;
    padding: 14px;
}

.compatibility-page .vehicle-fitment-grade-panel--ok {
    border-left-color: #179C99;
}

.compatibility-page .vehicle-fitment-grade-panel--conditional {
    border-left-color: #C47A00;
}

.compatibility-page .vehicle-fitment-grade-panel--ng {
    border-left-color: #B93815;
}

.compatibility-page .vehicle-fitment-grade-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    padding-bottom: 12px;
}

.compatibility-page .vehicle-fitment-grade-panel__head div {
    min-width: 0;
}

.compatibility-page .vehicle-fitment-grade-panel__head span {
    display: block;
    margin-bottom: 4px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .vehicle-fitment-grade-panel__head strong {
    display: block;
    color: var(--oc-ink, #102022);
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-grade-matrix-panel {
    display: grid;
    gap: 14px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 16px;
}

.compatibility-page .vehicle-fitment-grade-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 14px;
    background: #FFFFFF;
}

.compatibility-page .vehicle-fitment-grade-matrix-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

.compatibility-page .vehicle-fitment-grade-matrix-table th,
.compatibility-page .vehicle-fitment-grade-matrix-table td {
    border-right: 1px solid var(--oc-line, #DCEDEA);
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    padding: 13px;
    text-align: left;
    vertical-align: top;
}

.compatibility-page .vehicle-fitment-grade-matrix-table tr:last-child th,
.compatibility-page .vehicle-fitment-grade-matrix-table tr:last-child td {
    border-bottom: 0;
}

.compatibility-page .vehicle-fitment-grade-matrix-table th:last-child,
.compatibility-page .vehicle-fitment-grade-matrix-table td:last-child {
    border-right: 0;
}

.compatibility-page .vehicle-fitment-grade-matrix-table thead th {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-ink, #102022);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-grade-matrix-table thead th:not(:first-child) {
    min-width: 170px;
    border-left: 1px solid rgba(23, 156, 153, 0.18);
    background: linear-gradient(180deg, #EAF8F7 0%, #FFFFFF 100%);
    text-align: center;
    box-shadow: inset 0 -3px 0 rgba(23, 156, 153, 0.16);
}

.compatibility-page .vehicle-fitment-grade-matrix-table thead th:not(:first-child) strong {
    display: block;
    margin-top: 6px;
    color: var(--oc-ink, #102022);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-grade-matrix-table__product-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(23, 156, 153, 0.24);
    border-radius: 999px;
    background: rgba(23, 156, 153, 0.1);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .vehicle-fitment-grade-matrix-table thead th:first-child,
.compatibility-page .vehicle-fitment-grade-matrix-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 260px;
    min-width: 260px;
}

.compatibility-page .vehicle-fitment-grade-matrix-table thead th:first-child {
    z-index: 2;
}

.compatibility-page .vehicle-fitment-grade-matrix-table tbody th {
    background: #FFFFFF;
    border-left: 5px solid #667085;
}

.compatibility-page .vehicle-fitment-grade-matrix-table__row--ok th {
    border-left-color: #179C99;
}

.compatibility-page .vehicle-fitment-grade-matrix-table__row--conditional th {
    border-left-color: #C47A00;
}

.compatibility-page .vehicle-fitment-grade-matrix-table__row--ng th {
    border-left-color: #B93815;
}

.compatibility-page .vehicle-fitment-grade-matrix-table tbody th strong,
.compatibility-page .vehicle-fitment-grade-matrix-table tbody th small {
    display: block;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-grade-matrix-table tbody th strong {
    color: var(--oc-ink, #102022);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-grade-matrix-table tbody th small {
    margin-top: 5px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell {
    min-width: 150px;
    border-left: 1px solid rgba(16, 32, 34, 0.04);
    background: #FFFFFF;
    text-align: center;
}

.compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell--ok {
    background: rgba(23, 156, 153, 0.07);
}

.compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell--conditional {
    background: #FFF8E5;
}

.compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell--ng {
    background: #FFF3F1;
}

.compatibility-page .vehicle-fitment-grade-matrix-table__cell small {
    display: block;
    margin-top: 8px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.compatibility-page .vehicle-fitment-products-detail {
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 16px;
    background: #FFFFFF;
}

.compatibility-page .vehicle-fitment-products-detail > summary {
    cursor: pointer;
    list-style: none;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 900;
}

.compatibility-page .vehicle-fitment-products-detail > summary::-webkit-details-marker {
    display: none;
}

.compatibility-page .vehicle-fitment-products-detail[open] > summary {
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
}

.compatibility-page .vehicle-fitment-products-detail .vehicle-fitment-products-panel {
    border: 0;
    border-radius: 0;
}

.compatibility-page .vehicle-fitment-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 14px;
    background: #FFFFFF;
}

.compatibility-page .vehicle-fitment-matrix-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}

.compatibility-page .vehicle-fitment-matrix-table th,
.compatibility-page .vehicle-fitment-matrix-table td {
    min-width: 150px;
    border-right: 1px solid var(--oc-line, #DCEDEA);
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.compatibility-page .vehicle-fitment-matrix-table th:last-child,
.compatibility-page .vehicle-fitment-matrix-table td:last-child {
    border-right: 0;
}

.compatibility-page .vehicle-fitment-matrix-table tr:last-child td {
    border-bottom: 0;
}

.compatibility-page .vehicle-fitment-matrix-table th {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-ink, #102022);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-matrix-table__cell {
    background: #FFFFFF;
}

.compatibility-page .vehicle-fitment-matrix-table__cell--ok {
    background: rgba(23, 156, 153, 0.07);
}

.compatibility-page .vehicle-fitment-matrix-table__cell--conditional {
    background: #FFF8E5;
}

.compatibility-page .vehicle-fitment-matrix-table__cell--ng {
    background: #FFF3F1;
}

.compatibility-page .vehicle-fitment-matrix-table__cell small {
    display: block;
    margin-top: 8px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .compatibility-page .vehicle-fitment-matrix-panel {
        border-radius: 16px;
        padding: 12px;
    }

    .compatibility-page .vehicle-fitment-grade-panel {
        border-radius: 16px;
        padding: 12px;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-panel {
        border-radius: 16px;
        padding: 12px;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table {
        min-width: 760px;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table thead th:first-child,
    .compatibility-page .vehicle-fitment-grade-matrix-table tbody th {
        width: 210px;
        min-width: 210px;
    }

    .compatibility-page .vehicle-fitment-grade-panel__head {
        display: grid;
    }

    .compatibility-page .vehicle-fitment-matrix-table {
        min-width: 680px;
    }
}

/* Compatibility index refinement */
.compatibility-page .compatibility-search-section .section__inner,
.compatibility-page .compatibility-maker-section .section__inner {
    max-width: 1120px;
}

.compatibility-page .compat-search {
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 28px;
    background: #FFFFFF;
    padding: clamp(18px, 3vw, 28px);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
}

.compatibility-page .compat-search__header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(220, 237, 234, 0.95);
    padding-bottom: 18px;
}

.compatibility-page .compat-search__header h2 {
    color: #102022;
    font-size: clamp(22px, 2.3vw, 30px);
    line-height: 1.35;
    letter-spacing: 0;
}

.compatibility-page .compat-search__header p:not(.eyebrow) {
    max-width: 720px;
    color: #4A5568;
    font-size: 14px;
    line-height: 1.85;
}

.compatibility-page .compat-search__grid--guided {
    grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.2fr) minmax(160px, 0.7fr);
}

.compatibility-page .compat-search__grid--nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.compatibility-page .compat-search__inline-note {
    margin: 0;
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: #F7FBFA;
    color: #4A5568;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.7;
}

.compatibility-page .compat-search__actions {
    align-items: center;
    border-top: 1px solid rgba(220, 237, 234, 0.95);
    padding-top: 18px;
}

.compatibility-page .compatibility-inline-results {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 22px;
    scroll-margin-top: 90px;
}

.compatibility-page .compatibility-inline-results.is-loading {
    opacity: 0.58;
    pointer-events: none;
}

.compatibility-page .compatibility-inline-results.is-loading::after {
    content: "検索結果を更新しています";
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(16, 32, 34, 0.08);
}

.compatibility-page .compatibility-inline-placeholder {
    display: grid;
    gap: 8px;
    border: 1px dashed #BDEDEA;
    border-radius: 24px;
    background: linear-gradient(135deg, #F7FBFA, #FFFFFF);
    padding: 22px;
}

.compatibility-page .compatibility-inline-placeholder span {
    width: fit-content;
    border-radius: 999px;
    background: #E9F8F7;
    color: #0B5F5C;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .compatibility-inline-placeholder strong {
    color: #102022;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.45;
}

.compatibility-page .compatibility-inline-placeholder p {
    max-width: 680px;
    margin: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.75;
}

.compatibility-page .compatibility-maker-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.compatibility-page .compatibility-maker-card {
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.075);
}

.compatibility-page .compatibility-maker-card summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, #F0FBFA, #FFFFFF);
    padding: 18px 20px;
}

.compatibility-page .compatibility-maker-card summary::-webkit-details-marker {
    display: none;
}

.compatibility-page .compatibility-maker-card summary:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.28);
    outline-offset: -3px;
}

.compatibility-page .compatibility-maker-card summary > div {
    min-width: 0;
}

.compatibility-page .compatibility-maker-card summary span {
    display: block;
    margin-bottom: 4px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .compatibility-maker-card summary h3 {
    margin: 0;
    color: #102022;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.compatibility-page .compatibility-maker-card summary small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.compatibility-page .compatibility-maker-card summary b {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #179C99;
    box-shadow: 0 8px 18px rgba(16, 32, 34, 0.06);
}

.compatibility-page .compatibility-maker-card summary b::before {
    content: "+";
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.compatibility-page .compatibility-maker-card[open] summary b::before {
    content: "-";
}

.compatibility-page .compatibility-maker-card__body {
    display: grid;
    gap: 8px;
    max-height: 430px;
    overflow: auto;
    border-top: 1px solid #DCEDEA;
    padding: 12px;
}

.compatibility-page .compatibility-fitment-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 58px;
    border: 1px solid #DCEDEA;
    border-radius: 16px;
    background: #FFFFFF;
    color: #102022;
    padding: 10px 12px;
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.compatibility-page .compatibility-fitment-row:hover {
    border-color: #179C99;
    background: #F7FBFA;
    transform: translateY(-1px);
}

.compatibility-page .compatibility-fitment-row__mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #F2F5F5;
    color: #667085;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.compatibility-page .compatibility-fitment-row--ok .compatibility-fitment-row__mark {
    background: #E9F8F7;
    color: #0B7F7C;
}

.compatibility-page .compatibility-fitment-row--conditional .compatibility-fitment-row__mark {
    background: #FFF5E1;
    color: #A86500;
}

.compatibility-page .compatibility-fitment-row--ng .compatibility-fitment-row__mark {
    background: #FFF0EA;
    color: #B93815;
}

.compatibility-page .compatibility-fitment-row strong,
.compatibility-page .compatibility-fitment-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.compatibility-page .compatibility-fitment-row strong {
    color: #102022;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .compatibility-fitment-row small {
    margin-top: 3px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.compatibility-page .compatibility-maker-card__empty {
    border: 1px dashed #BDEDEA;
    border-radius: 16px;
    background: #F7FBFA;
    color: #667085;
    padding: 14px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .compatibility-page .compat-search__header {
        display: grid;
    }

    .compatibility-page .compat-search__grid--guided,
    .compatibility-page .compat-search__grid--nav,
    .compatibility-page .compatibility-maker-board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .compat-search,
    .compatibility-page .compatibility-maker-card,
    .compatibility-page .compatibility-inline-placeholder {
        border-radius: 20px;
    }

    .compatibility-page .compat-search__steps {
        gap: 0;
    }

    .compatibility-page .compat-search__actions .button {
        width: 100%;
    }

    .compatibility-page .compatibility-maker-card summary {
        padding: 16px;
    }

    .compatibility-page .compatibility-maker-card__body {
        max-height: 360px;
    }

    .compatibility-page .compatibility-fitment-row {
        grid-template-columns: 34px minmax(0, 1fr);
        border-radius: 14px;
        padding: 9px 10px;
    }

    .compatibility-page .compatibility-fitment-row__mark {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .compatibility-page .compatibility-inline-results.is-loading::after {
        position: static;
        width: fit-content;
        margin: 0 0 10px;
    }
}

/* Final vehicle fitment UX: year-first cards with a table fallback for cached views. */
.compatibility-page .fitment-status-guide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 24px 18px;
    border: 1px solid #BDEDEA;
    border-radius: 20px;
    background: #FFFFFF;
    padding: 14px 16px;
    box-shadow: 0 10px 28px rgba(16, 32, 34, 0.06);
}

.compatibility-page .fitment-status-guide strong {
    color: #063F3E;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .fitment-status-guide span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    border: 1px solid #DCEDEA;
    border-radius: 999px;
    background: #F7FBFA;
    color: #1F2933;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.compatibility-page .fitment-status-guide b {
    display: inline-grid;
    min-width: 36px;
    min-height: 22px;
    place-items: center;
    border-radius: 999px;
    background: #179C99;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .vehicle-fitment-year-cards {
    display: grid;
    gap: 16px;
    margin: 0 24px 24px;
}

.compatibility-page .vehicle-fitment-year-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #DCEDEA;
    border-left: 6px solid #667085;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.compatibility-page .vehicle-fitment-year-card::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -3px;
    width: 12px;
    height: 54px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.18;
}

.compatibility-page .vehicle-fitment-year-card--ok {
    border-left-color: #179C99;
    color: #179C99;
}

.compatibility-page .vehicle-fitment-year-card--conditional {
    border-left-color: #C47A00;
    color: #C47A00;
}

.compatibility-page .vehicle-fitment-year-card--ng {
    border-left-color: #B93815;
    color: #B93815;
}

.compatibility-page .vehicle-fitment-year-card--unknown {
    border-left-color: #667085;
    color: #667085;
}

.compatibility-page .vehicle-fitment-year-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #DCEDEA;
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 247, 245, 0.92), transparent 14rem),
        linear-gradient(135deg, #F0FBFA, #FFFFFF);
    padding: 18px 20px;
}

.compatibility-page .vehicle-fitment-year-card__head span,
.compatibility-page .vehicle-fitment-condition-panel__title span,
.compatibility-page .vehicle-fitment-products-panel__head span {
    display: block;
    margin-bottom: 4px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.compatibility-page .vehicle-fitment-year-card__head h4 {
    margin: 0;
    color: #102022;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}

.compatibility-page .vehicle-fitment-year-card__head small {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.compatibility-page .vehicle-fitment-year-card__body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.compatibility-page .vehicle-fitment-condition-panel,
.compatibility-page .vehicle-fitment-products-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.compatibility-page .vehicle-fitment-condition-panel {
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: #F7FBFA;
    padding: 14px;
}

.compatibility-page .vehicle-fitment-condition-panel__title strong,
.compatibility-page .vehicle-fitment-products-panel__head strong {
    display: block;
    color: #102022;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-products-panel {
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: #FFFFFF;
    padding: 14px;
}

.compatibility-page .vehicle-fitment-products-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.compatibility-page .vehicle-fitment-year-card__meta {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(220px, 1.4fr);
    gap: 10px;
    margin: 0;
}

.compatibility-page .vehicle-fitment-year-card__meta div {
    min-width: 0;
    border: 1px solid #DCEDEA;
    border-radius: 14px;
    background: #FFFFFF;
    padding: 12px 14px;
}

.compatibility-page .vehicle-fitment-year-card__meta dt {
    margin: 0 0 5px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-year-card__meta dd {
    margin: 0;
    color: #1F2933;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
}

.compatibility-page .vehicle-fitment-product-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(247, 251, 250, 0.9) 100%);
    padding: 15px;
}

.compatibility-page .vehicle-fitment-product-card--ok {
    border-color: rgba(23, 156, 153, 0.38);
}

.compatibility-page .vehicle-fitment-product-card--conditional {
    border-color: rgba(196, 122, 0, 0.32);
}

.compatibility-page .vehicle-fitment-product-card--ng {
    border-color: rgba(185, 56, 21, 0.28);
}

.compatibility-page .vehicle-fitment-product-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.compatibility-page .vehicle-fitment-product-card__top > div {
    min-width: 0;
}

.compatibility-page .vehicle-fitment-product-card__top span,
.compatibility-page .vehicle-fitment-product-card--empty span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 7px;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.compatibility-page .vehicle-fitment-product-card h5 {
    margin: 0;
    color: #102022;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-product-card p {
    margin: 0;
    color: #1F2933;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.72;
}

.compatibility-page .vehicle-fitment-product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.compatibility-page .vehicle-fitment-product-card__actions a,
.compatibility-page .vehicle-fitment-product-card--empty a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.compatibility-page .vehicle-fitment-product-card__actions a:last-child {
    border-color: #179C99;
    background: #179C99;
    color: #FFFFFF;
}

.compatibility-page .vehicle-fitment-product-card--empty {
    border-style: dashed;
    background: #F0FBFA;
}

.compatibility-page .vehicle-fitment-product-card--empty strong {
    color: #102022;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-product-card .fitment-badge {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 12px;
}

.compatibility-page .vehicle-fitment-product-card .fitment-badge span {
    min-width: 30px;
    min-height: 20px;
    font-size: 10px;
}

.compatibility-page .fitment-year-matrix {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.compatibility-page .fitment-year-matrix table,
.compatibility-page .fitment-year-matrix thead,
.compatibility-page .fitment-year-matrix tbody,
.compatibility-page .fitment-year-matrix tr,
.compatibility-page .fitment-year-matrix th,
.compatibility-page .fitment-year-matrix td {
    display: block;
    width: 100%;
    min-width: 0;
}

.compatibility-page .fitment-year-matrix table {
    border-spacing: 0;
}

.compatibility-page .fitment-year-matrix thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.compatibility-page .fitment-year-matrix tbody {
    display: grid;
    gap: 16px;
}

.compatibility-page .fitment-year-matrix tr {
    overflow: hidden;
    border: 1px solid #DCEDEA;
    border-left: 6px solid #667085;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--ok) {
    border-left-color: #179C99;
}

.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--conditional) {
    border-left-color: #C47A00;
}

.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--ng) {
    border-left-color: #B93815;
}

.compatibility-page .fitment-year-matrix td {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid #DCEDEA;
    padding: 14px 16px;
    color: #1F2933;
    font-size: 13px;
    line-height: 1.65;
}

.compatibility-page .fitment-year-matrix td:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 247, 245, 0.92), transparent 14rem),
        linear-gradient(135deg, #F0FBFA, #FFFFFF);
}

.compatibility-page .fitment-year-matrix td:first-child::before {
    content: "年式";
}

.compatibility-page .fitment-year-matrix td::before {
    content: attr(data-label);
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.5;
}

.compatibility-page .fitment-year-matrix td:first-child strong {
    margin: 0;
    color: #102022;
    font-size: clamp(19px, 2.1vw, 26px);
    font-weight: 900;
}

.compatibility-page .fitment-year-matrix td:last-child {
    display: block;
    border-bottom: 0;
    background: #FFFFFF;
}

.compatibility-page .fitment-year-matrix td:last-child::before {
    display: block;
    margin-bottom: 12px;
}

.compatibility-page .fitment-product-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
}

.compatibility-page .fitment-product-pill {
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(247, 251, 250, 0.9) 100%);
    padding: 15px;
}

.compatibility-page .fitment-product-pill__actions a,
.compatibility-page .fitment-product-pill--empty a {
    min-height: 36px;
    padding: 8px 13px;
}

@media (max-width: 900px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 18px;
    }

    .compatibility-page .vehicle-fitment-year-card__meta,
    .compatibility-page .fitment-product-pills {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 16px;
    }

    .compatibility-page .fitment-status-guide {
        align-items: stretch;
        border-radius: 18px;
    }

    .compatibility-page .fitment-status-guide span {
        flex: 1 1 100%;
    }

    .compatibility-page .vehicle-fitment-year-card,
    .compatibility-page .fitment-year-matrix tr {
        border-radius: 18px;
    }

    .compatibility-page .vehicle-fitment-year-card__head,
    .compatibility-page .vehicle-fitment-products-panel__head,
    .compatibility-page .vehicle-fitment-product-card__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .compatibility-page .vehicle-fitment-year-card__body,
    .compatibility-page .vehicle-fitment-condition-panel,
    .compatibility-page .vehicle-fitment-products-panel {
        padding: 12px;
    }

    .compatibility-page .vehicle-fitment-products-grid {
        grid-template-columns: 1fr;
    }

    .compatibility-page .vehicle-fitment-product-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .compatibility-page .vehicle-fitment-product-card__actions a,
    .compatibility-page .vehicle-fitment-product-card--empty a {
        width: 100%;
    }

    .compatibility-page .fitment-year-matrix td {
        grid-template-columns: 96px minmax(0, 1fr);
        padding: 12px;
    }

    .compatibility-page .fitment-year-matrix td:first-child {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Final vehicle fitment UX: year-first cards with a table fallback for cached views. */
.compatibility-page .fitment-status-guide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 24px 18px;
    border: 1px solid #BDEDEA;
    border-radius: 20px;
    background: #FFFFFF;
    padding: 14px 16px;
    box-shadow: 0 10px 28px rgba(16, 32, 34, 0.06);
}

.compatibility-page .fitment-status-guide strong {
    color: #063F3E;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .fitment-status-guide span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    border: 1px solid #DCEDEA;
    border-radius: 999px;
    background: #F7FBFA;
    color: #1F2933;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.compatibility-page .fitment-status-guide b {
    display: inline-grid;
    min-width: 36px;
    min-height: 22px;
    place-items: center;
    border-radius: 999px;
    background: #179C99;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .vehicle-fitment-year-cards {
    display: grid;
    gap: 16px;
    margin: 0 24px 24px;
}

.compatibility-page .vehicle-fitment-year-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #DCEDEA;
    border-left: 6px solid #667085;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.compatibility-page .vehicle-fitment-year-card::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -3px;
    width: 12px;
    height: 54px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.18;
}

.compatibility-page .vehicle-fitment-year-card--ok {
    border-left-color: #179C99;
    color: #179C99;
}

.compatibility-page .vehicle-fitment-year-card--conditional {
    border-left-color: #C47A00;
    color: #C47A00;
}

.compatibility-page .vehicle-fitment-year-card--ng {
    border-left-color: #B93815;
    color: #B93815;
}

.compatibility-page .vehicle-fitment-year-card--unknown {
    border-left-color: #667085;
    color: #667085;
}

.compatibility-page .vehicle-fitment-year-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #DCEDEA;
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 247, 245, 0.92), transparent 14rem),
        linear-gradient(135deg, #F0FBFA, #FFFFFF);
    padding: 18px 20px;
}

.compatibility-page .vehicle-fitment-year-card__head span,
.compatibility-page .vehicle-fitment-condition-panel__title span,
.compatibility-page .vehicle-fitment-products-panel__head span {
    display: block;
    margin-bottom: 4px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.compatibility-page .vehicle-fitment-year-card__head h4 {
    margin: 0;
    color: #102022;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}

.compatibility-page .vehicle-fitment-year-card__head small {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.compatibility-page .vehicle-fitment-year-card__body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.compatibility-page .vehicle-fitment-condition-panel,
.compatibility-page .vehicle-fitment-products-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.compatibility-page .vehicle-fitment-condition-panel {
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: #F7FBFA;
    padding: 14px;
}

.compatibility-page .vehicle-fitment-condition-panel__title strong,
.compatibility-page .vehicle-fitment-products-panel__head strong {
    display: block;
    color: #102022;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-products-panel {
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: #FFFFFF;
    padding: 14px;
}

.compatibility-page .vehicle-fitment-products-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.compatibility-page .vehicle-fitment-year-card__meta {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(220px, 1.4fr);
    gap: 10px;
    margin: 0;
}

.compatibility-page .vehicle-fitment-year-card__meta div {
    min-width: 0;
    border: 1px solid #DCEDEA;
    border-radius: 14px;
    background: #FFFFFF;
    padding: 12px 14px;
}

.compatibility-page .vehicle-fitment-year-card__meta dt {
    margin: 0 0 5px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-year-card__meta dd {
    margin: 0;
    color: #1F2933;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
}

.compatibility-page .vehicle-fitment-product-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(247, 251, 250, 0.9) 100%);
    padding: 15px;
}

.compatibility-page .vehicle-fitment-product-card--ok {
    border-color: rgba(23, 156, 153, 0.38);
}

.compatibility-page .vehicle-fitment-product-card--conditional {
    border-color: rgba(196, 122, 0, 0.32);
}

.compatibility-page .vehicle-fitment-product-card--ng {
    border-color: rgba(185, 56, 21, 0.28);
}

.compatibility-page .vehicle-fitment-product-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.compatibility-page .vehicle-fitment-product-card__top > div {
    min-width: 0;
}

.compatibility-page .vehicle-fitment-product-card__top span,
.compatibility-page .vehicle-fitment-product-card--empty span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 7px;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.compatibility-page .vehicle-fitment-product-card h5 {
    margin: 0;
    color: #102022;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-product-card p {
    margin: 0;
    color: #1F2933;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.72;
}

.compatibility-page .vehicle-fitment-product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.compatibility-page .vehicle-fitment-product-card__actions a,
.compatibility-page .vehicle-fitment-product-card--empty a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.compatibility-page .vehicle-fitment-product-card__actions a:last-child {
    border-color: #179C99;
    background: #179C99;
    color: #FFFFFF;
}

.compatibility-page .vehicle-fitment-product-card--empty {
    border-style: dashed;
    background: #F0FBFA;
}

.compatibility-page .vehicle-fitment-product-card--empty strong {
    color: #102022;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-product-card .fitment-badge {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 12px;
}

.compatibility-page .vehicle-fitment-product-card .fitment-badge span {
    min-width: 30px;
    min-height: 20px;
    font-size: 10px;
}

.compatibility-page .fitment-year-matrix {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.compatibility-page .fitment-year-matrix table,
.compatibility-page .fitment-year-matrix thead,
.compatibility-page .fitment-year-matrix tbody,
.compatibility-page .fitment-year-matrix tr,
.compatibility-page .fitment-year-matrix th,
.compatibility-page .fitment-year-matrix td {
    display: block;
    width: 100%;
    min-width: 0;
}

.compatibility-page .fitment-year-matrix table {
    border-spacing: 0;
}

.compatibility-page .fitment-year-matrix thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.compatibility-page .fitment-year-matrix tbody {
    display: grid;
    gap: 16px;
}

.compatibility-page .fitment-year-matrix tr {
    overflow: hidden;
    border: 1px solid #DCEDEA;
    border-left: 6px solid #667085;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--ok) {
    border-left-color: #179C99;
}

.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--conditional) {
    border-left-color: #C47A00;
}

.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--ng) {
    border-left-color: #B93815;
}

.compatibility-page .fitment-year-matrix td {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid #DCEDEA;
    padding: 14px 16px;
    color: #1F2933;
    font-size: 13px;
    line-height: 1.65;
}

.compatibility-page .fitment-year-matrix td:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 247, 245, 0.92), transparent 14rem),
        linear-gradient(135deg, #F0FBFA, #FFFFFF);
}

.compatibility-page .fitment-year-matrix td:first-child::before {
    content: "年式";
}

.compatibility-page .fitment-year-matrix td::before {
    content: attr(data-label);
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.5;
}

.compatibility-page .fitment-year-matrix td:first-child strong {
    margin: 0;
    color: #102022;
    font-size: clamp(19px, 2.1vw, 26px);
    font-weight: 900;
}

.compatibility-page .fitment-year-matrix td:last-child {
    display: block;
    border-bottom: 0;
    background: #FFFFFF;
}

.compatibility-page .fitment-year-matrix td:last-child::before {
    display: block;
    margin-bottom: 12px;
}

.compatibility-page .fitment-product-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
}

.compatibility-page .fitment-product-pill {
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(247, 251, 250, 0.9) 100%);
    padding: 15px;
}

.compatibility-page .fitment-product-pill__actions a,
.compatibility-page .fitment-product-pill--empty a {
    min-height: 36px;
    padding: 8px 13px;
}

@media (max-width: 900px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 18px;
    }

    .compatibility-page .vehicle-fitment-year-card__meta,
    .compatibility-page .fitment-product-pills {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 16px;
    }

    .compatibility-page .fitment-status-guide {
        align-items: stretch;
        border-radius: 18px;
    }

    .compatibility-page .fitment-status-guide span {
        flex: 1 1 100%;
    }

    .compatibility-page .vehicle-fitment-year-card,
    .compatibility-page .fitment-year-matrix tr {
        border-radius: 18px;
    }

    .compatibility-page .vehicle-fitment-year-card__head,
    .compatibility-page .vehicle-fitment-products-panel__head,
    .compatibility-page .vehicle-fitment-product-card__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .compatibility-page .vehicle-fitment-year-card__body,
    .compatibility-page .vehicle-fitment-condition-panel,
    .compatibility-page .vehicle-fitment-products-panel {
        padding: 12px;
    }

    .compatibility-page .vehicle-fitment-products-grid {
        grid-template-columns: 1fr;
    }

    .compatibility-page .vehicle-fitment-product-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .compatibility-page .vehicle-fitment-product-card__actions a,
    .compatibility-page .vehicle-fitment-product-card--empty a {
        width: 100%;
    }

    .compatibility-page .fitment-year-matrix td {
        grid-template-columns: 96px minmax(0, 1fr);
        padding: 12px;
    }

    .compatibility-page .fitment-year-matrix td:first-child {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Compatibility vehicle detail: framed year/product results for all model pages */
.compatibility-page .fitment-status-guide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 24px 18px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 20px;
    background: #FFFFFF;
    padding: 14px 16px;
    box-shadow: 0 10px 28px rgba(16, 32, 34, 0.06);
}

.compatibility-page .fitment-status-guide strong {
    color: var(--oc-primary-900, #063F3E);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .fitment-status-guide span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 999px;
    background: var(--oc-bg-soft, #F7FBFA);
    color: var(--oc-text, #1F2933);
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.compatibility-page .fitment-status-guide b {
    display: inline-grid;
    min-width: 36px;
    min-height: 22px;
    place-items: center;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .vehicle-fitment-year-cards {
    display: grid;
    gap: 16px;
    margin: 0 24px 24px;
}

.compatibility-page .vehicle-fitment-year-card {
    overflow: hidden;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-left: 5px solid var(--oc-muted, #667085);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.compatibility-page .vehicle-fitment-year-card--ok {
    border-left-color: #179C99;
}

.compatibility-page .vehicle-fitment-year-card--conditional {
    border-left-color: #C47A00;
}

.compatibility-page .vehicle-fitment-year-card--ng {
    border-left-color: #B93815;
}

.compatibility-page .vehicle-fitment-year-card--unknown {
    border-left-color: #667085;
}

.compatibility-page .vehicle-fitment-year-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 247, 245, 0.88), transparent 14rem),
        linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF);
    padding: 18px 20px;
}

.compatibility-page .vehicle-fitment-year-card__head span {
    display: block;
    margin-bottom: 4px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.compatibility-page .vehicle-fitment-year-card__head h4 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}

.compatibility-page .vehicle-fitment-year-card__head small {
    display: block;
    margin-top: 5px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.compatibility-page .vehicle-fitment-year-card__meta {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(220px, 1.4fr);
    gap: 1px;
    margin: 0;
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    background: var(--oc-line, #DCEDEA);
}

.compatibility-page .vehicle-fitment-year-card__meta div {
    min-width: 0;
    background: #FFFFFF;
    padding: 14px 16px;
}

.compatibility-page .vehicle-fitment-year-card__meta dt {
    margin: 0 0 5px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-year-card__meta dd {
    margin: 0;
    color: var(--oc-text, #1F2933);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
    padding: 16px;
}

.compatibility-page .vehicle-fitment-product-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(247, 251, 250, 0.9) 100%);
    padding: 15px;
}

.compatibility-page .vehicle-fitment-product-card--ok {
    border-color: rgba(23, 156, 153, 0.34);
}

.compatibility-page .vehicle-fitment-product-card--conditional {
    border-color: rgba(196, 122, 0, 0.28);
}

.compatibility-page .vehicle-fitment-product-card--ng {
    border-color: rgba(185, 56, 21, 0.24);
}

.compatibility-page .vehicle-fitment-product-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.compatibility-page .vehicle-fitment-product-card__top > div {
    min-width: 0;
}

.compatibility-page .vehicle-fitment-product-card__top span,
.compatibility-page .vehicle-fitment-product-card--empty span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 7px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.compatibility-page .vehicle-fitment-product-card h5 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-product-card p {
    margin: 0;
    color: var(--oc-text, #1F2933);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.72;
}

.compatibility-page .vehicle-fitment-product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.compatibility-page .vehicle-fitment-product-card__actions a,
.compatibility-page .vehicle-fitment-product-card--empty a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.compatibility-page .vehicle-fitment-product-card__actions a:last-child {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
}

.compatibility-page .vehicle-fitment-product-card--empty {
    border-style: dashed;
    background: var(--oc-primary-50, #F0FBFA);
}

.compatibility-page .vehicle-fitment-product-card--empty strong {
    color: var(--oc-ink, #102022);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-product-card .fitment-badge {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 12px;
}

.compatibility-page .vehicle-fitment-product-card .fitment-badge span {
    min-width: 30px;
    min-height: 20px;
    font-size: 10px;
}

@media (max-width: 900px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 18px;
    }

    .compatibility-page .vehicle-fitment-year-card__meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 16px;
    }

    .compatibility-page .fitment-status-guide {
        align-items: stretch;
        border-radius: 18px;
    }

    .compatibility-page .fitment-status-guide span {
        flex: 1 1 100%;
    }

    .compatibility-page .vehicle-fitment-year-card {
        border-radius: 18px;
    }

    .compatibility-page .vehicle-fitment-year-card__head,
    .compatibility-page .vehicle-fitment-product-card__top {
        flex-direction: column;
    }

    .compatibility-page .vehicle-fitment-products-grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .compatibility-page .vehicle-fitment-product-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .compatibility-page .vehicle-fitment-product-card__actions a,
    .compatibility-page .vehicle-fitment-product-card--empty a {
        width: 100%;
    }
}

/* Compatibility model detail refinement */
.compatibility-page .compatibility-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 22px;
    align-items: stretch;
    max-width: 1120px;
    margin-inline: auto;
}

.compatibility-page .compatibility-summary > div:first-child,
.compatibility-page .status-list {
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.07);
}

.compatibility-page .compatibility-summary > div:first-child {
    padding: clamp(22px, 3vw, 34px);
}

.compatibility-page .compatibility-summary h2 {
    margin: 0 0 10px;
    color: var(--oc-ink, #102022);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.28;
    letter-spacing: 0;
}

.compatibility-page .compatibility-summary p {
    max-width: 720px;
    margin: 0;
    color: var(--oc-text, #1F2933);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.9;
}

.compatibility-page .status-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    padding: 0;
}

.compatibility-page .status-list div {
    min-width: 0;
    margin: 0;
    padding: 18px;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #fff);
}

.compatibility-page .status-list dt {
    margin: 0 0 6px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.compatibility-page .status-list dd {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.compatibility-page .fitment-series-note {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 24px 18px;
    padding: 12px 14px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #fff);
    color: var(--oc-primary-900, #063F3E);
}

.compatibility-page .fitment-series-note span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .fitment-series-note strong {
    color: var(--oc-primary-900, #063F3E);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .fitment-series-note small {
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.compatibility-page .fitment-product-line {
    min-height: 0;
    padding: 15px;
    border-radius: 18px;
    background: #fff;
}

.compatibility-page .fitment-product-line__name {
    min-width: 0;
}

.compatibility-page .fitment-product-line__name strong {
    display: block;
    color: var(--oc-ink, #102022);
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.compatibility-page .fitment-product-line__name span {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.compatibility-page .fitment-product-line p {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    line-height: 1.65;
}

.compatibility-page .fitment-product-line__actions a {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.compatibility-page .fitment-product-line__actions a:first-child {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
}

.compatibility-page .fitment-product-line__actions a:last-child {
    background: var(--oc-primary, #179C99);
    color: #fff;
}

.compatibility-page .fitment-product-line--empty {
    border-style: dashed;
    background: rgba(240, 251, 250, 0.72);
}

.compatibility-page .compatibility-model-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    max-width: 1120px;
    margin-inline: auto;
}

.compatibility-page .compatibility-model-product {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, var(--oc-primary-50, #F0FBFA));
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.06);
}

.compatibility-page .compatibility-model-product span {
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.compatibility-page .compatibility-model-product strong {
    color: var(--oc-ink, #102022);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.compatibility-page .compatibility-model-product div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compatibility-page .compatibility-model-product a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--oc-primary-800, #0B5F5C);
    background: #fff;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.compatibility-page .compatibility-model-product a:last-child {
    color: #fff;
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
}

.compatibility-page .fitment-year-matrix {
    margin: 0 24px 24px;
    overflow-x: auto;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 22px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.compatibility-page .fitment-year-matrix table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

.compatibility-page .fitment-year-matrix th,
.compatibility-page .fitment-year-matrix td {
    padding: 15px 14px;
    border-bottom: 1px solid rgba(220, 237, 234, 0.9);
    text-align: left;
    vertical-align: top;
}

.compatibility-page .fitment-year-matrix th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #fff);
    color: var(--oc-primary-900, #063F3E);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.compatibility-page .fitment-year-matrix tbody tr:last-child td {
    border-bottom: 0;
}

.compatibility-page .fitment-year-matrix tbody tr:hover td {
    background: rgba(240, 251, 250, 0.45);
}

.compatibility-page .fitment-year-matrix td {
    color: var(--oc-text, #1F2933);
    font-size: 13px;
    line-height: 1.65;
}

.compatibility-page .fitment-year-matrix td:first-child {
    width: 150px;
}

.compatibility-page .fitment-year-matrix td:nth-child(2) {
    width: 150px;
}

.compatibility-page .fitment-year-matrix td:nth-child(3) {
    width: 150px;
}

.compatibility-page .fitment-year-matrix td:nth-child(4) {
    width: 210px;
}

.compatibility-page .fitment-year-matrix td:first-child strong {
    display: block;
    margin-bottom: 8px;
    color: var(--oc-ink, #102022);
    font-size: 14px;
    line-height: 1.45;
}

.compatibility-page .fitment-product-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 10px;
    min-width: 0;
}

.compatibility-page .fitment-product-pill {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, var(--oc-primary-50, #F0FBFA));
}

.compatibility-page .fitment-product-pill__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.compatibility-page .fitment-product-pill__head strong,
.compatibility-page .fitment-product-pill--empty strong {
    display: block;
    color: var(--oc-ink, #102022);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.compatibility-page .fitment-product-pill__head span,
.compatibility-page .fitment-product-pill--empty span {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--oc-primary-800, #0B5F5C);
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.3;
}

.compatibility-page .fitment-product-pill p {
    margin: 0;
    color: var(--oc-primary-900, #063F3E);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.compatibility-page .fitment-product-pill__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.compatibility-page .fitment-product-pill__actions a,
.compatibility-page .fitment-product-pill--empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    background: #fff;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.compatibility-page .fitment-product-pill__actions a:last-child {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #fff;
}

.compatibility-page .fitment-product-pill--empty {
    border-style: dashed;
}

@media (max-width: 900px) {
    .compatibility-page .compatibility-summary {
        grid-template-columns: 1fr;
    }

    .compatibility-page .fitment-series-note {
        margin-inline: 16px;
        border-radius: 18px;
    }

    .compatibility-page .fitment-year-matrix {
        margin-inline: 16px;
    }
}

@media (max-width: 560px) {
    .compatibility-page .compatibility-summary > div:first-child,
    .compatibility-page .status-list {
        border-radius: 20px;
    }

    .compatibility-page .status-list {
        grid-template-columns: 1fr;
    }

    .compatibility-page .status-list div {
        padding: 14px;
    }

    .compatibility-page .fitment-series-note {
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
    }

    .compatibility-page .fitment-product-line__actions a,
    .compatibility-page .compatibility-model-product a {
        flex: 1 1 130px;
    }

    .compatibility-page .fitment-year-matrix {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .compatibility-page .fitment-year-matrix table,
    .compatibility-page .fitment-year-matrix thead,
    .compatibility-page .fitment-year-matrix tbody,
    .compatibility-page .fitment-year-matrix tr,
    .compatibility-page .fitment-year-matrix th,
    .compatibility-page .fitment-year-matrix td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .compatibility-page .fitment-year-matrix thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .compatibility-page .fitment-year-matrix tr {
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid var(--oc-line, #DCEDEA);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 26px rgba(16, 32, 34, 0.06);
    }

    .compatibility-page .fitment-year-matrix td {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        border-bottom: 1px solid rgba(220, 237, 234, 0.9);
        font-size: 12px;
    }

    .compatibility-page .fitment-year-matrix td::before {
        content: attr(data-label);
        color: var(--oc-primary-800, #0B5F5C);
        font-size: 11px;
        font-weight: 900;
        line-height: 1.5;
    }

    .compatibility-page .fitment-year-matrix td:last-child {
        display: block;
        border-bottom: 0;
    }

    .compatibility-page .fitment-year-matrix td:last-child::before {
        display: block;
        margin-bottom: 10px;
    }

    .compatibility-page .fitment-product-pills {
        grid-template-columns: 1fr;
    }
}

/* Compatibility page final pass: keep search and results compact/readable */
.compatibility-page .compat-search {
    border: 1px solid var(--oc-line, #DCEDEA) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.22), transparent 260px),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%) !important;
    padding: clamp(18px, 3vw, 30px) !important;
    box-shadow: 0 16px 44px rgba(16, 32, 34, 0.08) !important;
}

.compatibility-page .compat-search__header,
.compatibility-page .compat-search__actions {
    position: relative !important;
    z-index: 1 !important;
}

.compatibility-page .compat-search__header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 20px !important;
}

.compatibility-page .compat-search__header h2 {
    margin: 4px 0 6px !important;
    color: var(--oc-ink, #102022) !important;
    font-size: clamp(22px, 2.5vw, 30px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

.compatibility-page .compat-search__header p:not(.eyebrow) {
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--oc-text, #1F2933) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

.compatibility-page .compat-search__steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.compatibility-page .compat-search__steps span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    padding: 7px 12px !important;
    color: var(--oc-primary-900, #063F3E) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.compatibility-page .compat-search__steps b {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: var(--oc-primary, #179C99) !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
}

.compatibility-page .compat-search__grid--guided,
.compatibility-page .compat-search__grid--nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.compatibility-page .compat-search__grid--advanced {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.compatibility-page .form-field {
    min-width: 0 !important;
}

.compatibility-page .form-field span {
    color: var(--oc-primary-900, #063F3E) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
}

.compatibility-page .form-field input,
.compatibility-page .form-field select,
.compatibility-page .form-field textarea {
    width: 100% !important;
    min-height: 48px !important;
    border: 1px solid var(--oc-line, #DCEDEA) !important;
    border-radius: 15px !important;
    background-color: #FFFFFF !important;
    color: var(--oc-text, #1F2933) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.compatibility-page .fitment-results--simple {
    display: grid !important;
    gap: 16px !important;
}

.compatibility-page .fitment-results--simple .fitment-results__header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
    border-radius: 24px !important;
    background: #FFFFFF !important;
    padding: 18px 20px !important;
    box-shadow: 0 10px 30px rgba(16, 32, 34, 0.07) !important;
}

.compatibility-page .fitment-results--simple .fitment-results__header h2 {
    margin: 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    line-height: 1.35 !important;
}

.compatibility-page .fitment-simple-list {
    display: grid !important;
    gap: 16px !important;
}

.compatibility-page .fitment-simple-card {
    overflow: hidden !important;
    border: 1px solid var(--oc-line, #DCEDEA) !important;
    border-radius: 24px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 34px rgba(16, 32, 34, 0.08) !important;
}

.compatibility-page .fitment-simple-card__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background:
        linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF) !important;
    padding: 18px 20px !important;
}

.compatibility-page .fitment-simple-card__header h3 {
    margin: 3px 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
}

.compatibility-page .fitment-simple-card__header p,
.compatibility-page .fitment-simple-card__header span {
    margin: 0 !important;
    color: var(--oc-muted, #667085) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
}

.compatibility-page .fitment-simple-section {
    display: grid !important;
    gap: 12px !important;
    border-top: 1px solid var(--oc-line, #DCEDEA) !important;
    padding: 16px 20px 18px !important;
}

.compatibility-page .fitment-simple-section__meta {
    display: grid !important;
    grid-template-columns: minmax(120px, 0.8fr) minmax(120px, 0.8fr) minmax(180px, 1.4fr) !important;
    gap: 9px !important;
}

.compatibility-page .fitment-simple-section__meta div {
    min-width: 0 !important;
    border: 1px solid rgba(220, 237, 234, 0.95) !important;
    border-radius: 14px !important;
    background: var(--oc-bg-soft, #F7FBFA) !important;
    padding: 10px 12px !important;
}

.compatibility-page .fitment-simple-section__meta span {
    display: block !important;
    margin-bottom: 2px !important;
    color: var(--oc-primary-800, #0B5F5C) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.compatibility-page .fitment-simple-section__meta strong {
    display: block !important;
    overflow-wrap: anywhere !important;
    color: var(--oc-text, #1F2933) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.compatibility-page .fitment-product-lines {
    display: grid !important;
    gap: 9px !important;
}

.compatibility-page .fitment-product-line {
    display: grid !important;
    grid-template-columns: minmax(170px, 1.1fr) auto minmax(190px, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid rgba(220, 237, 234, 0.95) !important;
    border-radius: 17px !important;
    background: #FFFFFF !important;
    padding: 12px !important;
}

.compatibility-page .fitment-product-line__name strong {
    color: var(--oc-ink, #102022) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.compatibility-page .fitment-product-line__name span,
.compatibility-page .fitment-product-line p {
    margin: 0 !important;
    color: var(--oc-muted, #667085) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
}

.compatibility-page .fitment-product-line__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 7px !important;
}

.compatibility-page .fitment-product-line__actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.compatibility-page .fitment-product-line__actions a:first-child {
    border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
    background: #FFFFFF !important;
    color: var(--oc-primary-800, #0B5F5C) !important;
}

.compatibility-page .fitment-product-line__actions a:last-child {
    border: 1px solid var(--oc-primary, #179C99) !important;
    background: var(--oc-primary, #179C99) !important;
    color: #FFFFFF !important;
}

@media (max-width: 980px) {
    .compatibility-page .compat-search__header,
    .compatibility-page .fitment-results--simple .fitment-results__header,
    .compatibility-page .fitment-simple-card__header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .compatibility-page .compat-search__grid--guided,
    .compatibility-page .compat-search__grid--nav,
    .compatibility-page .compat-search__grid--advanced,
    .compatibility-page .fitment-simple-section__meta,
    .compatibility-page .fitment-product-line {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .fitment-product-line__actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 560px) {
    .compatibility-page .compat-search,
    .compatibility-page .fitment-simple-card,
    .compatibility-page .fitment-results--simple .fitment-results__header {
        border-radius: 20px !important;
    }

    .compatibility-page .compat-search__header h2,
    .compatibility-page .fitment-results--simple .fitment-results__header h2 {
        font-size: 20px !important;
    }

    .compatibility-page .compat-search__actions,
    .compatibility-page .fitment-product-line__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .fitment-product-line__actions a {
        width: 100% !important;
    }
}

/* Compatibility search: simple, readable result view */
.compatibility-page .form-field__hint {
    display: block;
    margin-top: 6px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.compatibility-page .fitment-results--simple {
    display: grid;
    gap: 18px;
}

.compatibility-page .fitment-results--simple .fitment-results__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.compatibility-page .fitment-results--simple .fitment-results__header h2 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
}

.compatibility-page .fitment-results--simple .fitment-results__header p:last-child,
.compatibility-page .fitment-results__notice {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.compatibility-page .fitment-simple-list {
    display: grid;
    gap: 18px;
}

.compatibility-page .fitment-simple-card {
    overflow: hidden;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 38px rgba(16, 32, 34, 0.08);
}

.compatibility-page .fitment-simple-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(223, 247, 245, 0.9), transparent 14rem),
        linear-gradient(135deg, rgba(240, 251, 250, 0.92), rgba(255, 255, 255, 0.95));
}

.compatibility-page .fitment-simple-card__header p,
.compatibility-page .fitment-simple-card__header span {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
}

.compatibility-page .fitment-simple-card__header h3 {
    margin: 4px 0 2px;
    color: var(--oc-ink, #102022);
    font-size: clamp(19px, 2.1vw, 26px);
    line-height: 1.35;
}

.compatibility-page .fitment-simple-sections {
    display: grid;
}

.compatibility-page .fitment-simple-section {
    display: grid;
    gap: 14px;
    padding: 20px 24px 22px;
    border-top: 1px solid var(--oc-line, #DCEDEA);
}

.compatibility-page .fitment-simple-section__meta {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.8fr) minmax(220px, 1.4fr);
    gap: 10px;
}

.compatibility-page .fitment-simple-section__meta div {
    min-width: 0;
    border: 1px solid rgba(220, 237, 234, 0.9);
    border-radius: 16px;
    background: var(--oc-bg-soft, #F7FBFA);
    padding: 11px 13px;
}

.compatibility-page .fitment-simple-section__meta span {
    display: block;
    margin-bottom: 3px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.compatibility-page .fitment-simple-section__meta strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--oc-text, #1F2933);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

.compatibility-page .fitment-product-lines {
    display: grid;
    gap: 10px;
}

.compatibility-page .fitment-product-line {
    display: grid;
    grid-template-columns: minmax(180px, 1.15fr) auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 14px;
}

.compatibility-page .fitment-product-line__name {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.compatibility-page .fitment-product-line__name strong {
    overflow-wrap: anywhere;
    color: var(--oc-ink, #102022);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .fitment-product-line__name span,
.compatibility-page .fitment-product-line p {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.65;
}

.compatibility-page .fitment-product-line__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.compatibility-page .fitment-product-line__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.compatibility-page .fitment-product-line__actions a:first-child {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.compatibility-page .fitment-product-line__actions a:last-child {
    border: 1px solid var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
}

.compatibility-page .fitment-empty-state {
    display: grid;
    gap: 12px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 26px;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF);
    padding: clamp(24px, 4vw, 38px);
    box-shadow: 0 12px 34px rgba(16, 32, 34, 0.08);
}

.compatibility-page .fitment-empty-state h2,
.compatibility-page .fitment-empty-state p {
    margin: 0;
}

.compatibility-page .fitment-empty-state h2 {
    color: var(--oc-ink, #102022);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.35;
}

.compatibility-page .fitment-empty-state p:not(.eyebrow) {
    max-width: 720px;
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .compatibility-page .fitment-results--simple .fitment-results__header,
    .compatibility-page .fitment-simple-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .compatibility-page .fitment-simple-section__meta,
    .compatibility-page .fitment-product-line {
        grid-template-columns: 1fr;
    }

    .compatibility-page .fitment-product-line__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .compatibility-page .fitment-simple-card {
        border-radius: 20px;
    }

    .compatibility-page .fitment-simple-card__header,
    .compatibility-page .fitment-simple-section {
        padding: 18px;
    }

    .compatibility-page .fitment-product-line__actions a {
        flex: 1 1 140px;
    }
}

/* Product detail: mobile-only confirmation point flow */
.premium-mobile-point-cta,
.premium-mobile-point-float {
    display: none;
}

@media (max-width: 760px) {
    .premium-inline-trigger--feature-top,
    .premium-inline-trigger--app-top {
        display: none !important;
    }

    .premium-mobile-point-cta {
        display: block;
        grid-column: 1 / -1;
        width: 100%;
        margin-top: clamp(18px, 5vw, 28px);
    }

    .premium-mobile-point-cta .premium-inline-trigger {
        display: flex;
        width: 100%;
        min-height: 52px;
        margin-top: 0;
        border-radius: 999px;
        padding: 12px 18px;
        font-size: 14px;
        line-height: 1.35;
    }

    .premium-mobile-point-float {
        position: fixed;
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(86px + env(safe-area-inset-bottom));
        left: max(14px, env(safe-area-inset-left));
        z-index: 960;
        display: block;
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .premium-mobile-point-float.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .premium-mobile-point-float__button {
        display: grid;
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 12px;
        align-items: center;
        border: 1px solid rgba(189, 237, 234, 0.94);
        border-radius: 999px;
        background:
            linear-gradient(135deg, rgba(240, 251, 250, 0.98), rgba(255, 255, 255, 0.96)),
            #FFFFFF;
        box-shadow: 0 18px 42px rgba(16, 32, 34, 0.18), 0 10px 28px rgba(23, 156, 153, 0.12);
        color: var(--oc-ink, #102022);
        padding: 10px 14px 10px 12px;
        font: inherit;
        text-align: left;
        cursor: pointer;
        backdrop-filter: blur(14px);
    }

    .premium-mobile-point-float__button::after {
        content: "";
        position: absolute;
        right: 17px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--oc-primary, #179C99);
        border-right: 2px solid var(--oc-primary, #179C99);
        transform: translateY(-50%) rotate(45deg);
    }

    .premium-mobile-point-float__button span {
        display: inline-flex;
        min-height: 30px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--oc-primary, #179C99);
        color: #FFFFFF;
        padding: 5px 10px;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    .premium-mobile-point-float__button strong {
        display: block;
        overflow: hidden;
        padding-right: 18px;
        color: var(--oc-primary-900, #063F3E);
        font-size: 13px;
        font-weight: 900;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .premium-mobile-point-float__button:focus-visible {
        outline: 3px solid rgba(23, 156, 153, 0.24);
        outline-offset: 3px;
    }
}

@media (max-width: 420px) {
    .premium-mobile-point-float {
        right: 10px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        left: 10px;
    }

    .premium-mobile-point-float__button {
        padding: 9px 13px 9px 10px;
    }

    .premium-mobile-point-float__button span {
        padding-inline: 8px;
        font-size: 10px;
    }

    .premium-mobile-point-float__button strong {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-mobile-point-float {
        transition: none !important;
    }
}

/* Final mobile menu override. Keep this after the fixed CTA rules so the old full-width mobile menu never reappears. */
@media (max-width: 1040px) {
    .mobile-nav {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 140 !important;
        display: block !important;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .mobile-nav__drawer,
    .mobile-nav details {
        position: relative !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        border: 1px solid rgba(189, 237, 234, 0.92) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 12px 28px rgba(16, 32, 34, 0.12) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        padding: 0 14px !important;
    }

    .mobile-nav__panel {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        display: grid !important;
        width: min(360px, calc(100vw - 20px)) !important;
        max-height: min(74dvh, 640px) !important;
        overflow: auto !important;
        border: 1px solid rgba(189, 237, 234, 0.92) !important;
        border-radius: 24px !important;
        background: radial-gradient(circle at 12% 0%, rgba(223, 247, 245, 0.92), transparent 14rem), #FFFFFF !important;
        box-shadow: 0 24px 64px rgba(16, 32, 34, 0.18) !important;
        padding: 14px !important;
    }

    .mobile-nav nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        padding: 0 !important;
    }

    .mobile-nav a,
    .mobile-nav a.mobile-nav__store {
        min-height: 42px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 420px) {
    .mobile-nav {
        top: calc(9px + env(safe-area-inset-top)) !important;
        right: max(9px, env(safe-area-inset-right)) !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        min-height: 42px !important;
        padding-inline: 12px !important;
    }

    .mobile-nav__panel {
        top: calc(58px + env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        width: min(342px, calc(100vw - 16px)) !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }
}

@media (min-width: 1041px) {
    .mobile-nav {
        display: none !important;
    }
}

/* Final mobile menu override. This stays at the end so older mobile nav rules cannot recreate the full-width top bar. */
@media (max-width: 1040px) {
    .mobile-nav {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 140 !important;
        display: block !important;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .mobile-nav__drawer,
    .mobile-nav details {
        position: relative !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        border: 1px solid rgba(189, 237, 234, 0.92) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 12px 28px rgba(16, 32, 34, 0.12) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        padding: 0 14px !important;
    }

    .mobile-nav__panel {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        display: grid !important;
        width: min(360px, calc(100vw - 20px)) !important;
        max-height: min(74dvh, 640px) !important;
        overflow: auto !important;
        border: 1px solid rgba(189, 237, 234, 0.92) !important;
        border-radius: 24px !important;
        background: radial-gradient(circle at 12% 0%, rgba(223, 247, 245, 0.92), transparent 14rem), #FFFFFF !important;
        box-shadow: 0 24px 64px rgba(16, 32, 34, 0.18) !important;
        padding: 14px !important;
    }

    .mobile-nav nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        padding: 0 !important;
    }

    .mobile-nav a,
    .mobile-nav a.mobile-nav__store {
        min-height: 42px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 420px) {
    .mobile-nav {
        top: calc(9px + env(safe-area-inset-top)) !important;
        right: max(9px, env(safe-area-inset-right)) !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        min-height: 42px !important;
        padding-inline: 12px !important;
    }

    .mobile-nav__panel {
        top: calc(58px + env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        width: min(342px, calc(100vw - 16px)) !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }
}

@media (min-width: 1041px) {
    .mobile-nav {
        display: none !important;
    }
}

/* Mobile menu drawer: keep the header compact and open navigation only when needed. */
@media (max-width: 1040px) {
    .mobile-nav {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: auto !important;
        z-index: 140 !important;
        display: block !important;
        width: auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .mobile-nav__drawer,
    .mobile-nav details {
        position: relative !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        display: inline-flex !important;
        min-width: 0 !important;
        min-height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        border: 1px solid rgba(189, 237, 234, 0.92) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 12px 28px rgba(16, 32, 34, 0.12) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        cursor: pointer !important;
        list-style: none !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        backdrop-filter: blur(14px);
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
    }

    .mobile-nav__trigger::-webkit-details-marker,
    .mobile-nav summary::-webkit-details-marker {
        display: none !important;
    }

    .mobile-nav__trigger::after,
    .mobile-nav summary::after {
        display: none !important;
        content: none !important;
    }

    .mobile-nav__trigger:hover,
    .mobile-nav__trigger:focus-visible,
    .mobile-nav__drawer[open] .mobile-nav__trigger {
        border-color: var(--oc-primary-300, #7EDAD7) !important;
        background: var(--oc-primary-50, #F0FBFA) !important;
        box-shadow: 0 16px 34px rgba(23, 156, 153, 0.18) !important;
        transform: translateY(-1px);
    }

    .mobile-nav__trigger:focus-visible {
        outline: 3px solid rgba(23, 156, 153, 0.28) !important;
        outline-offset: 3px !important;
    }

    .mobile-nav__trigger-icon {
        display: grid;
        width: 18px;
        gap: 4px;
    }

    .mobile-nav__trigger-icon span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .mobile-nav__trigger-text {
        display: inline-block;
        white-space: nowrap;
    }

    .mobile-nav__panel {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        display: grid !important;
        width: min(360px, calc(100vw - 20px)) !important;
        max-height: min(74dvh, 640px) !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        border: 1px solid rgba(189, 237, 234, 0.92) !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(223, 247, 245, 0.92), transparent 14rem),
            #FFFFFF !important;
        box-shadow: 0 24px 64px rgba(16, 32, 34, 0.18) !important;
        padding: 14px !important;
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
        transform-origin: top right;
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .mobile-nav__drawer[open] .mobile-nav__panel {
        opacity: 1;
        transform: translateY(0) scale(1);
        visibility: visible;
    }

    .mobile-nav__panel-head {
        display: grid;
        gap: 3px;
        border-bottom: 1px solid var(--oc-line, #DCEDEA);
        margin-bottom: 10px;
        padding: 3px 4px 12px;
    }

    .mobile-nav__panel-head strong {
        color: var(--oc-ink, #102022);
        font-size: 16px;
        font-weight: 900;
        line-height: 1.35;
    }

    .mobile-nav__panel-head span {
        color: var(--oc-muted, #667085);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.55;
    }

    .mobile-nav nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        padding: 0 !important;
    }

    .mobile-nav__group {
        margin: 12px 4px 2px !important;
        border-bottom: 0 !important;
        color: var(--oc-primary-800, #0B5F5C) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.35 !important;
    }

    .mobile-nav a,
    .mobile-nav a.mobile-nav__store {
        display: flex !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: space-between !important;
        border: 1px solid var(--oc-line, #DCEDEA) !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: none !important;
        color: var(--oc-text, #1F2933) !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.45 !important;
        text-decoration: none !important;
        transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .mobile-nav a::after {
        content: "";
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        margin-left: 10px;
        border-right: 2px solid var(--oc-primary, #179C99);
        border-bottom: 2px solid var(--oc-primary, #179C99);
        transform: rotate(-45deg);
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible,
    .mobile-nav a.mobile-nav__store:hover,
    .mobile-nav a.mobile-nav__store:focus-visible {
        border-color: var(--oc-primary-300, #7EDAD7) !important;
        background: var(--oc-primary-50, #F0FBFA) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        transform: translateY(-1px);
    }

    .mobile-nav a.mobile-nav__store {
        margin-top: 8px !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C)) !important;
        color: #FFFFFF !important;
    }

    .mobile-nav a.mobile-nav__store::after {
        border-color: #FFFFFF;
    }
}

@media (max-width: 420px) {
    .mobile-nav {
        top: calc(9px + env(safe-area-inset-top)) !important;
        right: max(9px, env(safe-area-inset-right)) !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        min-height: 42px !important;
        padding-inline: 12px !important;
    }

    .mobile-nav__trigger-text {
        font-size: 11px;
    }

    .mobile-nav__panel {
        top: calc(58px + env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        width: min(342px, calc(100vw - 16px)) !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }
}

@media (min-width: 1041px) {
    .mobile-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav__trigger,
    .mobile-nav__trigger-icon span,
    .mobile-nav__panel,
    .mobile-nav a {
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-home-page .home-page.home-page--refresh::before,
    body.is-home-page .home-page.home-page--refresh .home-hero::before {
        animation: none !important;
    }
}

@media (max-width: 720px) {
    .restore-service-page--refined .page-hero__inner,
    .restore-service-page--refined .section__inner {
        width: min(100% - 30px, 1120px);
    }

    .restore-hero-photo {
        min-height: 280px;
        border-radius: 24px;
    }

    .restore-hero-photo figcaption {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 12px;
        border-radius: 16px;
    }

    .restore-section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .restore-check-main,
    .restore-condition-panel,
    .restore-agreement-panel--linear,
    .restore-form-side,
    .restore-service-page--refined .restore-service-form {
        border-radius: 22px;
    }

    .restore-check-main,
    .restore-condition-panel,
    .restore-service-page--refined .restore-service-form {
        padding: 18px;
    }

    .restore-compact-list,
    .restore-flow-strip {
        grid-template-columns: 1fr;
    }

    .restore-flow-strip div,
    .restore-flow-strip div:nth-child(2) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--oc-line, #dcedea);
        padding: 18px;
    }

    .restore-flow-strip div:last-child {
        border-bottom: 0;
    }

    .restore-agreement-panel--linear {
        padding: 6px 18px;
    }

    .restore-agreement-list li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 17px 0;
    }

    .restore-agreement-list li > span {
        width: 34px;
        height: 34px;
        font-size: 0.72rem;
    }

    .restore-agreement-list h3 {
        font-size: 0.94rem;
    }

    .restore-agreement-list p,
    .restore-form-side p,
    .restore-form-side li {
        font-size: 0.84rem;
        line-height: 1.78;
    }

    .restore-service-page--refined .restore-service-form .finder-form__actions {
        grid-template-columns: 1fr;
    }
}

/* TOP refresh: concise flow, softer brand color, mobile-first readability */
.home-page {
    --home-ink: #102022;
    --home-text: #1F2933;
    --home-muted: #667085;
    --home-line: #DCEDEA;
    --home-mint: #F0FBFA;
    --home-soft: #F7FBFA;
    background:
        radial-gradient(circle at 10% 4%, rgba(126, 218, 215, 0.22), transparent 24rem),
        radial-gradient(circle at 90% 18%, rgba(255, 209, 102, 0.18), transparent 22rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 46%, #FFFFFF 100%);
    color: var(--home-text);
    font-family: "Noto Sans JP", "Noto Sans", system-ui, sans-serif;
    line-break: strict;
}

.home-page .section__inner,
.home-news-ticker {
    width: min(1120px, calc(100% - 40px));
}

.home-page p,
.home-page li,
.home-page small {
    font-size: 14px;
    line-height: 1.78;
    color: var(--home-muted);
}

.home-page h1,
.home-page h2,
.home-page h3,
.home-page strong {
    color: var(--home-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.home-page .section__header {
    max-width: 760px;
    margin-bottom: 28px;
}

.home-page .section__header h2 {
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.28;
    letter-spacing: 0;
}

.home-page .section__lead {
    max-width: 680px;
    font-size: 15px;
}

.home-hero {
    min-height: min(760px, calc(100svh - 86px));
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(240, 251, 250, 0.46) 100%),
        radial-gradient(circle at 74% 24%, rgba(126, 218, 215, 0.34), transparent 20rem),
        #FFFFFF;
    color: var(--home-ink);
}

.home-hero::before {
    background:
        radial-gradient(circle at 28% 30%, rgba(23, 156, 153, 0.08), transparent 16rem),
        radial-gradient(circle at 82% 78%, rgba(114, 214, 255, 0.18), transparent 18rem);
    opacity: 1;
}

.home-hero::after {
    background: linear-gradient(120deg, transparent 0%, rgba(23, 156, 153, 0.08) 46%, transparent 72%);
    opacity: 0.5;
    filter: blur(12px);
}

.home-hero__grid,
.home-hero__panel--back {
    opacity: 0.14;
}

.home-hero__inner {
    min-height: min(760px, calc(100svh - 86px));
    padding: clamp(48px, 7vw, 88px) 0 clamp(44px, 6vw, 76px);
    gap: clamp(28px, 4vw, 56px);
}

.home-hero__trust {
    width: fit-content;
    border: 1px solid rgba(23, 156, 153, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    padding: 8px 14px;
    color: #0B5F5C;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 26px rgba(16, 32, 34, 0.08);
}

.home-hero h1 {
    margin: 22px 0 18px;
    color: var(--home-ink);
    font-size: clamp(42px, 6.2vw, 78px);
    line-height: 1.08;
    letter-spacing: 0;
}

.home-hero__lead {
    max-width: 620px;
    color: var(--home-text);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.9;
}

.home-hero__routes {
    grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(0, 0.94fr));
    gap: 12px;
    margin-top: 28px;
}

.home-hero__route {
    min-height: 132px;
    border: 1px solid rgba(189, 237, 234, 0.88);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.08);
    color: var(--home-ink);
}

.home-hero__route--primary {
    background: linear-gradient(135deg, #179C99, #0B5F5C);
    color: #FFFFFF;
    box-shadow: 0 18px 44px rgba(23, 156, 153, 0.24);
}

.home-hero__route--primary strong,
.home-hero__route--primary small,
.home-hero__route--primary span {
    color: #FFFFFF;
}

.home-hero__route span {
    color: #179C99;
    font-size: 12px;
}

.home-hero__route strong {
    font-size: 16px;
    line-height: 1.42;
}

.home-hero__route small {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--home-muted);
}

.home-visual__photo {
    aspect-ratio: 16 / 10;
    max-height: 460px;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 34px;
    background: linear-gradient(180deg, #FFFFFF, #F0FBFA);
    box-shadow: 0 24px 58px rgba(16, 32, 34, 0.13);
}

.home-visual__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.home-news-ticker {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: -26px auto 26px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    padding: 10px 12px 10px 18px;
    box-shadow: 0 16px 42px rgba(16, 32, 34, 0.1);
    backdrop-filter: blur(16px);
}

.home-news-ticker__head {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
}

.home-news-ticker__head span {
    border-radius: 999px;
    background: #DFF7F5;
    padding: 7px 12px;
    color: #0B5F5C;
    font-size: 12px;
    font-weight: 900;
}

.home-news-ticker__head a {
    color: #0B5F5C;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.home-news-ticker__viewport {
    overflow: hidden;
    min-width: 0;
}

.home-news-ticker__track {
    display: flex;
    width: max-content;
    gap: 10px;
    animation: homeTicker 34s linear infinite;
}

.home-news-ticker:hover .home-news-ticker__track {
    animation-play-state: paused;
}

.home-news-ticker__item {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-width: 330px;
    border: 1px solid rgba(220, 237, 234, 0.9);
    border-radius: 999px;
    background: #F7FBFA;
    padding: 9px 14px;
    text-decoration: none;
}

.home-news-ticker__item time,
.home-news-ticker__item span {
    color: #10817E;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.home-news-ticker__item strong {
    overflow: hidden;
    color: var(--home-text);
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes homeTicker {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

.home-about-layout,
.home-fitment-layout--refresh,
.home-support-lead--refresh,
.home-store-simple {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.78fr);
    gap: clamp(22px, 4vw, 44px);
    align-items: center;
}

.home-about-copy {
    display: grid;
    gap: 16px;
}

.home-about-copy__label {
    width: fit-content;
    border-radius: 999px;
    background: #DFF7F5;
    padding: 8px 13px;
    color: #0B5F5C !important;
    font-size: 12px !important;
    font-weight: 900;
}

.home-about-copy h2,
.home-support-copy h3,
.home-store-simple h3 {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 44px);
    line-height: 1.32;
}

.home-about-copy p:not(.home-about-copy__label),
.home-support-copy p,
.home-store-simple p {
    max-width: 680px;
    margin: 0;
    font-size: 15px;
    line-height: 1.86;
}

.home-app-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-app-pills span {
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    padding: 9px 13px;
    color: #0B5F5C;
    font-size: 12.5px;
    font-weight: 800;
}

.home-about-visual,
.home-support-image,
.home-store-simple figure {
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.1);
}

.home-about-visual img,
.home-support-image img,
.home-store-simple img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.home-safety-note {
    margin-top: 18px;
    border-left: 4px solid #179C99;
    padding: 8px 0 8px 14px;
    font-size: 12.8px !important;
}

.home-fitment-section {
    background: linear-gradient(180deg, #F0FBFA 0%, #FFFFFF 100%);
}

.home-fitment-layout--refresh {
    align-items: stretch;
}

.home-fitment-panel {
    display: grid;
    gap: 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.9);
}

.home-carplay-check {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.22), transparent 12rem),
        #FFFFFF;
    padding: 22px;
    box-shadow: 0 10px 26px rgba(16, 32, 34, 0.07);
}

.home-carplay-check__head {
    display: grid;
    gap: 8px;
}

.home-carplay-check__head span,
.home-purpose-card span,
.home-featured-product span {
    width: fit-content;
    border-radius: 999px;
    background: #DFF7F5;
    padding: 6px 11px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.home-carplay-check__head h3 {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.42;
}

.home-carplay-check__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-carplay-check__buttons button,
.home-guide-card {
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-carplay-check__buttons button {
    padding: 10px 16px;
}

.home-carplay-check__buttons button.is-active {
    border-color: #179C99;
    background: #179C99;
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(23, 156, 153, 0.22);
}

.home-carplay-check__result {
    border: 1px solid #DCEDEA;
    border-radius: 22px;
    background: #F7FBFA;
    padding: 18px;
}

.home-carplay-check__result strong {
    display: block;
    margin-bottom: 7px;
    color: #063F3E;
    font-size: 17px;
}

.home-carplay-check__result p {
    margin: 0 0 12px;
    font-size: 13.5px;
}

.home-carplay-check__result div {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.home-fitment-assist {
    display: grid;
    align-content: start;
    gap: 14px;
    color: var(--home-text);
}

.home-fitment-assist__photo {
    overflow: hidden;
    margin: 0;
    border-radius: 24px;
}

.home-fitment-assist__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.home-fitment-assist h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.45;
}

.home-purpose-section {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 100%);
}

.home-purpose-grid {
    display: grid;
    grid-template-columns: 1.14fr 0.86fr;
    gap: 18px;
}

.home-purpose-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 30px;
    background: #FFFFFF;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-purpose-card--featured {
    grid-row: span 2;
    grid-template-columns: 1fr;
    align-content: start;
    background:
        radial-gradient(circle at 90% 8%, rgba(126, 218, 215, 0.28), transparent 14rem),
        #FFFFFF;
}

.home-purpose-card:hover,
.home-featured-product:hover,
.home-guide-card:hover,
.home-official-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.11);
}

.home-purpose-card figure {
    overflow: hidden;
    margin: 0;
    border-radius: 22px;
    background: #F0FBFA;
}

.home-purpose-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.16 / 1;
    object-fit: contain;
}

.home-purpose-card--featured img {
    aspect-ratio: 16 / 10;
}

.home-purpose-card h3,
.home-featured-product h3 {
    margin: 10px 0 8px;
    font-size: 20px;
    line-height: 1.45;
}

.home-purpose-card p,
.home-featured-product p {
    margin: 0 0 12px;
    font-size: 13.5px;
}

.home-guide-feature {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-radius: 30px;
}

.home-guide-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 63, 62, 0.74), rgba(6, 63, 62, 0.14));
}

.home-guide-feature > div {
    z-index: 1;
}

.home-guide-feature h3,
.home-guide-feature p {
    color: #FFFFFF;
}

.home-guide-grid--modal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.home-guide-card {
    display: grid;
    gap: 8px;
    justify-items: start;
    min-height: 150px;
    border-radius: 24px;
    padding: 18px;
    text-align: left;
}

.home-guide-card span {
    color: #10817E;
    font-size: 11px;
    font-weight: 900;
}

.home-guide-card strong {
    font-size: 16px;
    line-height: 1.5;
}

.home-guide-card small {
    align-self: end;
    color: #0B5F5C;
    font-size: 12px;
    font-weight: 900;
}

.home-featured-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-featured-product {
    overflow: hidden;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-featured-product figure {
    margin: 0;
    background: #F0FBFA;
}

.home-featured-product img {
    display: block;
    width: 100%;
    aspect-ratio: 1.08 / 1;
    object-fit: contain;
}

.home-featured-product > div {
    display: grid;
    gap: 6px;
    padding: 20px;
}

.home-featured-product__actions,
.home-support-actions,
.home-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.home-support-section {
    background: linear-gradient(135deg, #063F3E 0%, #0B5F5C 100%);
}

.home-support-section .section__header h2,
.home-support-section .section__lead,
.home-support-copy h3,
.home-support-copy p {
    color: #FFFFFF;
}

.home-support-copy {
    display: grid;
    gap: 14px;
    padding: 10px 0;
}

.home-support-copy .eyebrow {
    color: #BDEDEA;
}

.home-store-simple {
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 32px;
    background: #FFFFFF;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.07);
}

.home-store-simple figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.home-official-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-official-card {
    display: grid;
    gap: 10px;
    border: 1px solid #DCEDEA;
    border-radius: 28px;
    background: #FFFFFF;
    padding: 22px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-official-card span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    background: #179C99;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 900;
}

.home-official-card strong {
    font-size: 18px;
}

.home-official-card p {
    margin: 0;
    font-size: 13.5px;
}

.home-final-section {
    border-top: 0;
    background:
        radial-gradient(circle at 16% 16%, rgba(126, 218, 215, 0.3), transparent 18rem),
        #F0FBFA;
}

.home-final-actions {
    justify-content: center;
}

.home-guide-modal[hidden] {
    display: none;
}

.home-guide-modal {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.home-guide-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(16, 32, 34, 0.42);
    cursor: pointer;
}

.home-guide-modal__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(640px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 30px;
    background: #FFFFFF;
    padding: 28px;
    box-shadow: 0 28px 80px rgba(16, 32, 34, 0.22);
}

.home-guide-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #DCEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #102022;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.home-guide-modal__panel h2 {
    margin: 0;
    padding-right: 34px;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.36;
}

.home-guide-modal__panel p,
.home-guide-modal__panel li {
    font-size: 14px;
    line-height: 1.78;
}

.home-guide-modal__panel ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.25em;
}

.home-guide-modal__panel .button {
    width: fit-content;
    margin-top: 4px;
}

body.is-home-guide-modal-open {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .home-hero__inner,
    .home-about-layout,
    .home-fitment-layout--refresh,
    .home-support-lead--refresh,
    .home-store-simple {
        grid-template-columns: 1fr;
    }

    .home-visual__photo {
        max-height: 420px;
    }

    .home-purpose-grid {
        grid-template-columns: 1fr;
    }

    .home-purpose-card,
    .home-purpose-card--featured {
        grid-row: auto;
        grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr);
    }

    .home-guide-grid--modal,
    .home-featured-products,
    .home-official-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .home-page .section__inner,
    .home-news-ticker {
        width: min(100% - 28px, 1120px);
    }

    .home-section {
        padding: 52px 0;
    }

    .home-page .section__header {
        margin-bottom: 20px;
    }

    .home-page .section__header h2 {
        font-size: 25px;
        line-height: 1.36;
    }

    .home-page .section__lead,
    .home-page p,
    .home-page li,
    .home-page small {
        font-size: 13.2px;
        line-height: 1.72;
    }

    .home-hero,
    .home-hero__inner {
        min-height: auto;
    }

    .home-hero__inner {
        padding: 42px 0 54px;
    }

    .home-hero h1 {
        font-size: clamp(34px, 11vw, 48px);
        line-height: 1.13;
    }

    .home-hero__lead {
        font-size: 13.8px;
        line-height: 1.78;
    }

    .home-hero__routes {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-hero__route {
        min-height: auto;
        border-radius: 20px;
        padding: 16px;
    }

    .home-hero__route strong {
        font-size: 15px;
    }

    .home-visual__photo {
        max-height: 320px;
        border-radius: 24px;
    }

    .home-news-ticker {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: -20px;
        border-radius: 24px;
        padding: 14px;
    }

    .home-news-ticker__item {
        min-width: 280px;
    }

    .home-about-copy h2,
    .home-support-copy h3,
    .home-store-simple h3 {
        font-size: 24px;
        line-height: 1.38;
    }

    .home-about-visual,
    .home-support-image,
    .home-store-simple figure,
    .home-store-simple,
    .home-fitment-panel,
    .home-carplay-check,
    .home-featured-product,
    .home-purpose-card,
    .home-official-card {
        border-radius: 22px;
    }

    .home-carplay-check,
    .home-featured-product > div,
    .home-official-card,
    .home-guide-modal__panel {
        padding: 18px;
    }

    .home-purpose-card,
    .home-purpose-card--featured {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .home-purpose-card img {
        aspect-ratio: 16 / 10;
    }

    .home-guide-feature {
        min-height: 220px;
        border-radius: 22px;
    }

    .home-guide-feature > div {
        max-width: none;
        padding: 18px;
    }

    .home-guide-feature h3 {
        font-size: 20px;
    }

    .home-guide-grid--modal,
    .home-featured-products,
    .home-official-grid {
        grid-template-columns: 1fr;
    }

    .home-guide-card {
        min-height: auto;
        border-radius: 20px;
        padding: 16px;
    }

    .home-featured-product img {
        aspect-ratio: 16 / 10;
    }

    .home-support-actions,
    .home-final-actions,
    .home-store-simple .section-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .home-support-actions .button,
    .home-final-actions .button,
    .home-store-simple .button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-news-ticker__track {
        animation: none;
    }

    .home-purpose-card,
    .home-featured-product,
    .home-guide-card,
    .home-official-card {
        transition: none;
    }
}

.finder-choice input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.home-page {
    --home-ink: #F8FAFC;
    --home-muted: rgba(248, 250, 252, 0.72);
    --home-line: rgba(23, 156, 153, 0.34);
    --home-glass: rgba(255, 255, 255, 0.08);
    --home-glass-border: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 36%, #FFFFFF 100%);
}

.home-page .section__inner,
.home-hero__inner {
    width: min(1180px, calc(100% - 48px));
}

.home-hero {
    position: relative;
    isolation: isolate;
    min-height: 80vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 22%, rgba(23, 156, 153, 0.24), transparent 32%),
        radial-gradient(circle at 24% 80%, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(135deg, #0B0F14 0%, #111820 46%, #07090D 100%);
    color: var(--home-ink);
}

.home-hero::before,
.home-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.home-hero::before {
    inset: auto -10% -22% 28%;
    height: 46%;
    transform: skewY(-8deg);
    background: linear-gradient(90deg, rgba(23, 156, 153, 0.18), rgba(255, 255, 255, 0.04));
    clip-path: polygon(0 26%, 100% 0, 100% 68%, 8% 100%);
    opacity: 0.9;
    animation: homePanelFloat 14s ease-in-out infinite;
}

.home-hero::after {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 82%, transparent 100%);
    opacity: 0.36;
    animation: homeGridDrift 24s linear infinite;
}

.home-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 34% 18% at 18% 18%, rgba(23, 156, 153, 0.14), transparent 74%),
        radial-gradient(ellipse 30% 16% at 78% 26%, rgba(255, 255, 255, 0.1), transparent 72%),
        radial-gradient(ellipse 42% 20% at 54% 78%, rgba(23, 156, 153, 0.12), transparent 76%);
    background-size: auto;
    filter: blur(10px);
    animation: homeSignalField 18s ease-in-out infinite;
}

.home-hero__panel {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.34);
}

.home-hero__panel--back {
    top: 15%;
    right: -8%;
    width: 48%;
    height: 68%;
    transform: skewX(-14deg) rotate(-4deg);
    border-radius: 18px;
    animation: homeBackPanelFloat 18s ease-in-out infinite;
}

.home-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.88fr);
    gap: 64px;
    align-items: center;
    min-height: 80vh;
    margin: 0 auto;
    padding: 88px 0 92px;
}

.home-hero__content {
    max-width: 720px;
}

.home-hero__trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--home-ink);
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(16px);
}

.home-hero__trust::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-primary);
    box-shadow: 0 0 18px rgba(23, 156, 153, 0.86);
    animation: homePulse 3.8s ease-in-out infinite;
}

.home-hero h1 {
    max-width: 720px;
    margin-bottom: 22px;
    color: var(--home-ink);
    font-size: 56px;
    line-height: 1.18;
}

.home-hero h1 span {
    display: block;
}

.home-hero__lead {
    max-width: 680px;
    margin-bottom: 0;
    color: var(--home-muted);
    font-size: 18px;
    line-height: 2;
}

.home-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.home-hero__badges span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.home-hero .button {
    position: relative;
    overflow: hidden;
    min-height: 52px;
    border-radius: 10px;
    padding-inline: 20px;
    transform: translateZ(0);
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

.home-hero .button::after,
.home-page .cta-panel .button::after,
.home-page .phone-cta__number::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transition: transform 0.72s ease;
}

.home-hero .button:hover::after,
.home-page .cta-panel .button:hover::after,
.home-page .phone-cta__number:hover::after {
    transform: translateX(120%) skewX(-18deg);
}

.home-hero .button:hover,
.home-page .cta-panel .button:hover,
.home-page .phone-cta__number:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(23, 156, 153, 0.22);
}

.home-hero .button--secondary {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--home-ink);
    backdrop-filter: blur(16px);
}

.home-hero .button--secondary:hover {
    border-color: rgba(23, 156, 153, 0.64);
    color: var(--home-ink);
}

.home-hero__phone-note {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    font-weight: 700;
}

.home-cockpit {
    position: relative;
    min-height: 520px;
}

.home-cockpit__device {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(440px, 92%);
    transform: translateY(-50%) perspective(1200px) rotateY(-10deg) rotateX(3deg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        rgba(11, 15, 20, 0.72);
    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    padding: 18px;
    backdrop-filter: blur(18px);
    animation: homeDeviceFloat 12s ease-in-out infinite;
}

.home-cockpit__topbar {
    width: 76px;
    height: 6px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.home-cockpit__screen {
    display: grid;
    gap: 10px;
    min-height: 236px;
    align-content: center;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(145deg, #0E151B, #111D24 58%, #081014);
    background-size: 36px 36px, 36px 36px, auto;
    color: var(--home-ink);
    padding: 32px;
    animation: homeScreenGrid 18s linear infinite;
}

.home-cockpit__screen span,
.home-cockpit__screen small,
.home-cockpit__glass span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 700;
}

.home-cockpit__screen strong {
    color: var(--home-ink);
    font-size: 32px;
    line-height: 1.28;
}

.home-cockpit__status {
    display: grid;
    grid-template-columns: 1fr 0.72fr 0.52fr;
    gap: 10px;
    margin-top: 14px;
}

.home-cockpit__status i {
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(23, 156, 153, 0.22), rgba(255, 255, 255, 0.05));
    animation: homeStatusGlow 5.5s ease-in-out infinite;
}

.home-cockpit__status i:nth-child(2) {
    animation-delay: 0.8s;
}

.home-cockpit__status i:nth-child(3) {
    animation-delay: 1.5s;
}

.home-cockpit__arc {
    position: absolute;
    border: 1px solid rgba(23, 156, 153, 0.46);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: homeArcFloat 18s linear infinite;
}

.home-cockpit__arc--outer {
    inset: 42px 22px auto auto;
    width: 410px;
    height: 410px;
}

.home-cockpit__arc--inner {
    inset: 128px 96px auto auto;
    width: 238px;
    height: 238px;
    opacity: 0.64;
    animation-duration: 24s;
    animation-direction: reverse;
}

.home-cockpit__line {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, rgba(23, 156, 153, 0.88), transparent);
    animation: homeSignal 5.8s ease-in-out infinite;
}

.home-cockpit__line--a {
    top: 36%;
    left: 10%;
    width: 360px;
    transform: rotate(-16deg);
}

.home-cockpit__line--b {
    right: 5%;
    bottom: 24%;
    width: 310px;
    transform: rotate(13deg);
    animation-delay: 1.4s;
}

.home-cockpit__glass {
    position: absolute;
    display: grid;
    gap: 4px;
    min-width: 162px;
    border: 1px solid var(--home-glass-border);
    border-radius: 16px;
    background: var(--home-glass);
    color: var(--home-ink);
    padding: 14px 16px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
    animation: homeGlassFloat 13s ease-in-out infinite;
}

.home-cockpit__glass strong {
    font-size: 20px;
}

.home-cockpit__glass--fitment {
    top: 18%;
    left: 0;
}

.home-cockpit__glass--support {
    right: 2%;
    bottom: 12%;
    animation-delay: 1.2s;
}

.home-section {
    position: relative;
    overflow: hidden;
}

.home-section .section__header {
    margin-bottom: 36px;
}

.home-section .section__header h2 {
    font-size: 36px;
    line-height: 1.32;
}

.home-section .eyebrow {
    color: var(--color-primary-dark);
    text-transform: none;
}

.home-section::before {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 44px;
    transform: skewY(-1.5deg);
    transform-origin: right bottom;
    background: rgba(246, 248, 250, 0.7);
    pointer-events: none;
}

.home-trust-section {
    margin-top: -46px;
    padding-top: 0;
    z-index: 3;
}

.home-trust-section::before,
.home-final-section::before,
.home-news-section::before,
.home-official-section::before {
    display: none;
}

.home-trust-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 250, 0.92)),
        #FFFFFF;
    box-shadow: 0 26px 72px rgba(11, 15, 20, 0.12);
}

.home-trust-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(23, 156, 153, 0.24);
    border-radius: 50%;
}

.home-fitment-section {
    padding-top: 92px;
    background: linear-gradient(180deg, #FFFFFF, #F6F8FA);
}

.home-fitment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
    gap: 20px;
    align-items: stretch;
}

.home-fitment-panel {
    position: relative;
    min-width: 0;
}

.home-fitment-panel::before {
    content: "";
    position: absolute;
    inset: -14px 12% auto 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.home-fitment-panel .search-form {
    position: relative;
    overflow: hidden;
    border-color: rgba(23, 156, 153, 0.24);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 250, 0.92));
    box-shadow: 0 28px 76px rgba(11, 15, 20, 0.12);
    padding: 30px;
}

.home-fitment-panel .search-form::after {
    content: "";
    position: absolute;
    right: -76px;
    bottom: -112px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(23, 156, 153, 0.2);
    border-radius: 50%;
}

.home-fitment-panel .form-field input:focus,
.home-fitment-panel .form-field select:focus {
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 4px rgba(23, 156, 153, 0.12),
        inset 0 -2px 0 rgba(23, 156, 153, 0.52);
    transform: translateY(-1px);
}

.home-fitment-panel .search-form__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.home-fitment-assist {
    display: grid;
    align-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(21, 26, 31, 0.96), rgba(11, 15, 20, 0.96));
    color: var(--home-ink);
    box-shadow: 0 28px 76px rgba(11, 15, 20, 0.14);
    padding: 28px;
}

.home-fitment-assist h3 {
    color: var(--home-ink);
}

.home-fitment-assist p {
    color: rgba(255, 255, 255, 0.72);
}

.home-fitment-assist .button--secondary {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--home-ink);
}

.home-fitment-assist__time {
    color: var(--color-primary) !important;
    font-weight: 700;
}

.home-fitment-tags {
    grid-column: 1 / -1;
}

.home-fitment-tags > div {
    position: relative;
    overflow: hidden;
    border-color: rgba(23, 156, 153, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
}

.home-page .filter-chip {
    transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.home-page .filter-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(23, 156, 153, 0.12);
}

.home-finder-section {
    background:
        linear-gradient(145deg, #0B0F14 0%, #151A1F 54%, #0F141A 100%);
    color: var(--home-ink);
}

.home-finder-section .section__header h2,
.home-finder-section h3 {
    color: var(--home-ink);
}

.home-finder-section .section__lead,
.home-finder-section p {
    color: rgba(255, 255, 255, 0.72);
}

.home-finder-section::before {
    background: #FFFFFF;
}

.home-finder-layout {
    display: grid;
    gap: 22px;
}

.home-finder-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-finder-flow article {
    position: relative;
    min-height: 208px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
    padding: 24px;
    backdrop-filter: blur(14px);
}

.home-finder-flow article::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -42px;
    width: 136px;
    height: 136px;
    border: 1px solid rgba(23, 156, 153, 0.28);
    transform: rotate(18deg);
}

.home-finder-flow span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 26px;
    border: 1px solid rgba(23, 156, 153, 0.46);
    border-radius: 12px;
    background: rgba(23, 156, 153, 0.14);
    color: var(--color-primary);
    font-weight: 700;
}

.home-finder-panel {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.home-finder-panel .button {
    flex: 0 0 auto;
}

.home-series-section {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%);
}

.home-series-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.78fr 0.78fr;
    grid-auto-rows: minmax(214px, auto);
    gap: 18px;
}

.home-series-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(11, 15, 20, 0.08);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 24px 64px rgba(11, 15, 20, 0.08);
    padding: 24px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}

.home-series-card:hover,
.home-page .support-card:hover,
.home-page .product-card:hover,
.home-page .store-card:hover,
.home-page .news-card:hover {
    transform: translateY(-5px);
    border-color: rgba(23, 156, 153, 0.38);
    box-shadow: 0 30px 78px rgba(11, 15, 20, 0.13);
}

.home-series-card:hover .home-series-card__device,
.home-page .product-card:hover .product-card__media {
    border-color: rgba(23, 156, 153, 0.42);
    filter: saturate(1.08);
}

.home-series-card--featured {
    grid-row: span 2;
    grid-template-columns: 1fr;
    align-content: end;
    min-height: 446px;
    background:
        radial-gradient(circle at 82% 20%, rgba(23, 156, 153, 0.22), transparent 34%),
        linear-gradient(145deg, #151A1F, #0B0F14);
    color: var(--home-ink);
}

.home-series-card--featured h3 {
    color: var(--home-ink);
    font-size: 34px;
}

.home-series-card--featured p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.72);
}

.home-series-card__device {
    display: grid;
    width: 104px;
    height: 132px;
    place-items: center;
    border: 1px solid rgba(23, 156, 153, 0.24);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(23, 156, 153, 0.12), rgba(11, 15, 20, 0.04)),
        var(--color-soft);
}

.home-series-card--featured .home-series-card__device {
    width: 100%;
    height: 220px;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.24) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        rgba(255, 255, 255, 0.06);
    background-size: 32px 32px;
}

.home-series-card__device span {
    width: 58%;
    height: 46%;
    border: 1px solid rgba(23, 156, 153, 0.46);
    border-radius: 12px;
    background: rgba(23, 156, 153, 0.12);
}

.home-guide-section,
.home-store-section,
.home-news-section,
.home-official-section {
    background: #FFFFFF;
}

.home-guide-grid .support-card,
.home-support-topics .support-card,
.home-official-section .support-card,
.home-store-grid .store-card,
.home-news-section .news-card {
    border-radius: 16px;
    transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}

.home-guide-grid .support-card:nth-child(2n) {
    transform: translateY(18px);
}

.home-products-section {
    background:
        linear-gradient(180deg, #F6F8FA 0%, #FFFFFF 100%);
}

.home-product-grid {
    align-items: stretch;
}

.home-product-grid .product-card {
    border-radius: 18px;
    transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}

.home-product-grid .product-card__media {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(11, 15, 20, 0.07) 1px, transparent 1px),
        #F6F8FA;
    background-size: 34px 34px;
}

.home-product-grid .product-card__media::after {
    content: "";
    position: absolute;
    width: 56%;
    height: 44%;
    border: 1px solid rgba(23, 156, 153, 0.34);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
}

.home-support-section {
    background:
        radial-gradient(circle at 88% 16%, rgba(23, 156, 153, 0.16), transparent 26%),
        linear-gradient(145deg, #0B0F14, #151A1F);
    color: var(--home-ink);
}

.home-support-section .section__header h2,
.home-support-section h3 {
    color: var(--home-ink);
}

.home-support-section .section__lead {
    color: rgba(255, 255, 255, 0.72);
}

.home-support-section::before {
    background: #FFFFFF;
}

.home-support-section .phone-cta {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(23, 156, 153, 0.26), rgba(255, 255, 255, 0.06)),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.26);
}

.home-support-section .phone-cta::before {
    content: "";
    position: absolute;
    inset: -80px auto auto -40px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(23, 156, 153, 0.24);
    border-radius: 50%;
}

.home-support-topics {
    margin-top: 20px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-support-topics .support-card {
    min-height: 180px;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: var(--home-ink);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.home-support-topics .support-card h3 {
    color: var(--home-ink);
}

.home-support-topics .support-card p {
    color: rgba(255, 255, 255, 0.68);
}

.home-store-section .store-card,
.home-news-section .news-card,
.home-official-section .support-card {
    box-shadow: 0 22px 58px rgba(11, 15, 20, 0.08);
}

.home-final-section {
    padding-bottom: 100px;
    background:
        linear-gradient(135deg, #FFFFFF 0%, #F6F8FA 100%);
}

.home-final-cta {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.72fr);
}

.home-final-cta .cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.home-final-cta .cta-panel:first-child {
    border-color: rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 86% 20%, rgba(23, 156, 153, 0.2), transparent 30%),
        linear-gradient(145deg, #151A1F, #0B0F14);
    color: var(--home-ink);
}

.home-final-cta .cta-panel:first-child h2 {
    color: var(--home-ink);
}

.home-final-cta .cta-panel:first-child p {
    color: rgba(255, 255, 255, 0.72);
}

.home-reveal {
    will-change: transform, opacity;
}

.home-motion-ready .home-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.72s ease, transform 0.72s ease;
}

.home-motion-ready .home-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-motion-ready .home-hero__trust,
.home-motion-ready .home-hero h1 span,
.home-motion-ready .home-hero__lead,
.home-motion-ready .home-hero__badges,
.home-motion-ready .home-hero__actions,
.home-motion-ready .home-hero__phone-note,
.home-motion-ready .home-cockpit {
    animation: homeHeroIn 0.76s ease both;
}

.home-motion-ready .home-hero__trust {
    animation-delay: 0.06s;
}

.home-motion-ready .home-hero h1 span:first-child {
    animation-delay: 0.16s;
}

.home-motion-ready .home-hero h1 span:last-child {
    animation-delay: 0.26s;
}

.home-motion-ready .home-hero__lead {
    animation-delay: 0.38s;
}

.home-motion-ready .home-hero__badges {
    animation-delay: 0.48s;
}

.home-motion-ready .home-hero__actions {
    animation-delay: 0.58s;
}

.home-motion-ready .home-hero__phone-note {
    animation-delay: 0.68s;
}

.home-motion-ready .home-cockpit {
    animation-delay: 0.42s;
}

.home-motion-ready .home-reveal .home-reveal-child {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.64s ease, transform 0.64s ease;
    transition-delay: var(--home-stagger, 0ms);
}

.home-motion-ready .home-reveal.is-visible .home-reveal-child {
    opacity: 1;
    transform: translateY(0);
}

@keyframes homeGridDrift {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 64px 64px, 64px 64px;
    }
}

@keyframes homeArcFloat {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes homeSignal {
    0%,
    100% {
        opacity: 0.28;
        filter: saturate(0.8);
        background-position: -160px 0;
    }
    50% {
        opacity: 0.88;
        filter: saturate(1.1);
        background-position: 160px 0;
    }
}

@keyframes homeHeroIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes homeSignalField {
    0%,
    100% {
        background-position: 0 0, 0 0, 0% 0;
        opacity: 0.84;
    }
    50% {
        background-position: 0 0, 0 0, 100% 0;
        opacity: 1;
    }
}

@keyframes homePanelFloat {
    0%,
    100% {
        transform: skewY(-8deg) translate3d(0, 0, 0);
    }
    50% {
        transform: skewY(-8deg) translate3d(0, -12px, 0);
    }
}

@keyframes homeBackPanelFloat {
    0%,
    100% {
        transform: skewX(-14deg) rotate(-4deg) translate3d(0, 0, 0);
    }
    50% {
        transform: skewX(-14deg) rotate(-4deg) translate3d(-8px, -12px, 0);
    }
}

@keyframes homeDeviceFloat {
    0%,
    100% {
        transform: translateY(-50%) perspective(1200px) rotateY(-10deg) rotateX(3deg) translate3d(0, 0, 0);
    }
    50% {
        transform: translateY(-50%) perspective(1200px) rotateY(-10deg) rotateX(3deg) translate3d(0, -10px, 0);
    }
}

@keyframes homeScreenGrid {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 36px 0, 0 36px, 0 0;
    }
}

@keyframes homeStatusGlow {
    0%,
    100% {
        opacity: 0.54;
    }
    50% {
        opacity: 1;
    }
}

@keyframes homeGlassFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -8px, 0);
    }
}

@keyframes homePulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.82;
    }
    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero::before,
    .home-hero::after,
    .home-hero__grid,
    .home-hero__panel--back,
    .home-hero__trust::before,
    .home-cockpit__device,
    .home-cockpit__screen,
    .home-cockpit__status i,
    .home-cockpit__arc,
    .home-cockpit__line,
    .home-cockpit__glass,
    .home-motion-ready .home-hero__trust,
    .home-motion-ready .home-hero h1 span,
    .home-motion-ready .home-hero__lead,
    .home-motion-ready .home-hero__badges,
    .home-motion-ready .home-hero__actions,
    .home-motion-ready .home-hero__phone-note,
    .home-motion-ready .home-cockpit {
        animation: none;
    }

    .home-motion-ready .home-reveal,
    .home-motion-ready .home-reveal .home-reveal-child,
    .home-motion-ready .home-hero__trust,
    .home-motion-ready .home-hero h1 span,
    .home-motion-ready .home-hero__lead,
    .home-motion-ready .home-hero__badges,
    .home-motion-ready .home-hero__actions,
    .home-motion-ready .home-hero__phone-note,
    .home-motion-ready .home-cockpit {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .home-series-card,
    .home-page .support-card,
    .home-page .product-card,
    .home-page .store-card,
    .home-page .news-card {
        transition: none;
    }
}

.finder-choice span {
    color: var(--color-dark);
    font-weight: 700;
}

.finder-choice small {
    color: var(--color-muted);
    line-height: 1.6;
}

.finder-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.finder-form__actions,
.finder-result-summary,
.finder-result-summary__actions,
.finder-product-card__header,
.finder-product-card__actions {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.finder-form__actions {
    flex-wrap: wrap;
}

.finder-result-summary {
    justify-content: space-between;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.finder-result-summary h2 {
    margin-bottom: 8px;
}

.finder-result-summary__actions,
.finder-product-card__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.finder-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.finder-product-card {
    display: grid;
    align-content: start;
    gap: 18px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.finder-product-card__header {
    justify-content: space-between;
}

.finder-product-card__header h3 {
    margin-bottom: 0;
}

.finder-product-card__section {
    display: grid;
    gap: 8px;
}

.finder-product-card__section h4 {
    margin: 0;
    font-size: 15px;
}

.finder-product-card__section ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 1.2em;
    color: var(--color-text);
}

.site-footer {
    margin-top: 32px;
    background: var(--color-dark);
    color: var(--color-background);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1fr;
    gap: 32px;
    padding: 48px 0;
}

.site-logo--footer {
    color: var(--color-background);
}

.site-logo--footer small,
.site-footer p,
.site-footer__links a {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer__label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.site-footer__phone {
    margin-bottom: 6px;
    color: var(--color-background);
    font-size: 20px;
    font-weight: 700;
}

.site-footer__links {
    align-items: flex-start;
    flex-direction: column;
}

@media (max-width: 1040px) {
    .site-nav,
    .site-header__actions {
        display: none;
    }

    body {
        padding-bottom: 66px;
    }

    .mobile-nav {
        display: block;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-background);
    }

    .mobile-nav details {
        width: min(1120px, calc(100% - 40px));
        margin: 0 auto;
        padding: 10px 0;
    }

    .mobile-nav summary {
        min-height: 44px;
        cursor: pointer;
        color: var(--color-dark);
        font-weight: 700;
    }

    .mobile-nav nav {
        display: grid;
        gap: 10px;
        padding: 10px 0 16px;
    }

    .mobile-nav a {
        display: flex;
        min-height: 44px;
        align-items: center;
        color: var(--color-text);
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-fixed-cta {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--color-border);
        background: var(--color-background);
        box-shadow: 0 -12px 28px rgba(11, 15, 20, 0.08);
    }

    .mobile-fixed-cta a {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: center;
        color: var(--color-dark);
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }

    .mobile-fixed-cta a:first-child {
        background: var(--color-primary);
        color: var(--color-background);
    }

    .page-hero__inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .page-hero__visual {
        justify-content: flex-start;
    }

    .home-page .section__inner,
    .home-hero__inner {
        width: min(1180px, calc(100% - 40px));
    }

    .home-hero,
    .home-hero__inner {
        min-height: auto;
    }

    .home-hero__inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 72px 0 84px;
    }

    .home-hero h1 {
        font-size: 44px;
    }

    .home-cockpit {
        min-height: 420px;
    }

    .home-cockpit__device {
        right: 8%;
        width: min(420px, 82%);
    }

    .home-cockpit__glass--fitment {
        left: 6%;
    }

    .home-fitment-layout,
    .home-finder-flow,
    .home-series-grid,
    .home-final-cta {
        grid-template-columns: 1fr;
    }

    .home-fitment-panel .search-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-series-card,
    .home-series-card--featured {
        grid-row: auto;
        min-height: auto;
    }

    .home-series-card--featured {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .home-series-card--featured .home-series-card__device {
        width: 180px;
        height: 180px;
    }

    .home-support-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-grid--2,
    .card-grid--3,
    .card-grid--4,
    .feature-grid,
    .product-grid,
    .series-grid,
    .support-topic-grid,
    .support-menu-grid,
    .support-article-grid,
    .manual-grid,
    .company-profile-grid,
    .partner-grid,
    .corporate-flow,
    .corporate-asset-grid,
    .popular-link-grid,
    .policy-layout,
    .product-tabs,
    .purpose-filter-grid,
    .product-search,
    .product-detail-lead,
    .feature-list-grid,
    .contact-layout--wide,
    .compat-search__grid,
    .compat-search__grid--nav,
    .fitment-card__meta,
    .compatibility-chip-grid,
    .compatibility-product-grid,
    .finder-choice-grid,
    .finder-choice-grid--purpose,
    .finder-vehicle-grid,
    .finder-result-grid,
    .contact-layout,
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .compat-search__header,
    .fitment-results__header,
    .fitment-card__header,
    .compatibility-link-layout,
    .compatibility-summary,
    .finder-result-summary,
    .finder-product-card__header {
        flex-direction: column;
    }

    .fitment-card__meta div,
    .fitment-card__meta div:nth-child(4n) {
        border-right: 0;
    }

    .search-form__grid,
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .site-header__inner,
    .site-footer__inner,
    .section__inner,
    .page-hero__inner,
    .breadcrumbs ol,
    .mobile-nav details {
        width: min(1120px, calc(100% - 28px));
    }

    .site-header__inner {
        min-height: 64px;
    }

    .page-hero__inner {
        padding: 56px 0 48px;
    }

    .home-page .section__inner,
    .home-hero__inner {
        width: min(1180px, calc(100% - 28px));
    }

    .home-hero__inner {
        padding: 46px 0 62px;
    }

    .home-hero h1 {
        font-size: 34px;
        line-height: 1.28;
        margin-bottom: 18px;
    }

    .home-hero__lead {
        font-size: 15px;
        line-height: 1.82;
    }

    .home-hero__trust {
        align-items: flex-start;
        border-radius: 12px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .home-hero__badges {
        gap: 8px;
        margin-top: 22px;
    }

    .home-hero__badges span {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .home-hero__actions {
        display: grid;
        gap: 10px;
        margin-top: 26px;
    }

    .home-hero .button {
        width: 100%;
        min-height: 50px;
        white-space: normal;
    }

    .home-hero__phone-note {
        display: none;
    }

    .home-cockpit {
        min-height: 330px;
    }

    .home-cockpit__device {
        right: 0;
        left: 0;
        width: 100%;
        margin: 0 auto;
        transform: translateY(-50%);
        animation: none;
    }

    .home-cockpit__screen {
        min-height: 176px;
        padding: 24px;
        animation-duration: 28s;
    }

    .home-cockpit__screen strong {
        font-size: 24px;
    }

    .home-cockpit__arc--outer {
        width: 280px;
        height: 280px;
        right: -28px;
    }

    .home-cockpit__arc--inner {
        width: 168px;
        height: 168px;
        right: 38px;
    }

    .home-cockpit__line,
    .home-cockpit__glass {
        display: none;
    }

    .home-cockpit__arc {
        animation-duration: 32s;
    }

    .home-hero::before,
    .home-hero__panel--back {
        animation: none;
    }

    .mobile-fixed-cta a {
        min-height: 56px;
        padding: 8px 4px;
    }

    .home-section .section__header h2 {
        font-size: 28px;
    }

    .home-trust-section {
        margin-top: -28px;
    }

    .home-fitment-panel .search-form,
    .home-fitment-assist {
        padding: 22px;
    }

    .home-fitment-panel .search-form__grid,
    .home-support-topics {
        grid-template-columns: 1fr;
    }

    .home-finder-flow {
        gap: 12px;
    }

    .home-finder-flow article {
        min-height: auto;
    }

    .home-series-card,
    .home-series-card--featured {
        grid-template-columns: 1fr;
    }

    .home-series-card--featured .home-series-card__device,
    .home-series-card__device {
        width: 100%;
        height: 150px;
    }

    .home-guide-grid .support-card:nth-child(2n) {
        transform: none;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 25px;
    }

    .section {
        padding: 56px 0;
    }

    .page-hero__actions,
    .cta-panel__actions,
    .cta-panel,
    .phone-cta,
    .brand-trust,
    .finder-band,
    .fitment-result,
    .fitment-card__actions,
    .compat-search__actions,
    .finder-form__actions,
    .finder-result-summary__actions,
    .finder-product-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .brand-trust,
    .finder-band,
    .text-block {
        padding: 22px;
    }

    .section-actions {
        flex-direction: column;
    }

    .product-search__actions {
        flex-direction: column;
    }

    .search-form__grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field--wide {
        grid-column: auto;
    }

    .button,
    .phone-cta__number {
        width: 100%;
    }

    .compat-search,
    .fitment-card,
    .compatibility-summary,
    .finder-form,
    .finder-product-card,
    .finder-result-summary {
        padding: 22px;
    }

    .status-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .spec-table div {
        grid-template-columns: 1fr;
    }
}


/* TOP bright mobility tech refresh */
.home-page {
    --home-ink: #102022;
    --home-muted: #667085;
    --home-line: #DCEDEA;
    --home-mint: #DFF7F5;
    --home-pale: #F0FBFA;
    --home-soft: #F7FBFA;
    --home-warm: #FFD166;
    --home-coral: #FF7A59;
    --home-sky: #72D6FF;
    overflow-x: clip;
    background:
        linear-gradient(180deg, #F7FBFA 0%, #FFFFFF 22%, #F7FBFA 62%, #FFFFFF 100%);
    color: var(--home-ink);
}

.home-page .section__inner,
.home-hero__inner {
    width: min(1180px, calc(100% - 48px));
}

.home-hero {
    position: relative;
    isolation: isolate;
    min-height: 760px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 16%, rgba(114, 214, 255, 0.22), transparent 28%),
        radial-gradient(circle at 12% 18%, rgba(223, 247, 245, 0.92), transparent 34%),
        linear-gradient(180deg, #FFFFFF 0%, #F0FBFA 100%);
    color: var(--home-ink);
}

.home-hero::before,
.home-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.home-hero::before {
    right: -12%;
    bottom: -26%;
    width: 62%;
    height: 54%;
    transform: rotate(-5deg);
    border-radius: 52px;
    background:
        linear-gradient(135deg, rgba(23, 156, 153, 0.12), rgba(255, 209, 102, 0.18));
    clip-path: polygon(5% 18%, 100% 0, 92% 78%, 0 100%);
    opacity: 0.82;
    animation: homeBrightPanelFloat 12s ease-in-out infinite;
}

.home-hero::after {
    inset: auto 0 0 0;
    height: 110px;
    background:
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.84)),
        linear-gradient(90deg, transparent 0 12%, rgba(23, 156, 153, 0.18) 12% 13%, transparent 13% 36%, rgba(23, 156, 153, 0.12) 36% 37%, transparent 37% 100%);
}

.home-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.09) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 156, 153, 0.07) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
    opacity: 0.42;
}

.home-hero__panel--back {
    top: 14%;
    right: 5%;
    z-index: -1;
    width: 36%;
    height: 62%;
    transform: rotate(-4deg);
    border: 1px solid rgba(23, 156, 153, 0.14);
    border-radius: 44px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(223, 247, 245, 0.62));
    box-shadow: 0 28px 80px rgba(23, 156, 153, 0.12);
    animation: homeBrightPanelFloat 14s ease-in-out infinite;
}

.home-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1fr);
    gap: 58px;
    align-items: center;
    min-height: 760px;
    margin: 0 auto;
    padding: 86px 0 96px;
}

.home-hero__content {
    max-width: 680px;
}

.home-hero__trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    border: 1px solid rgba(23, 156, 153, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--home-ink);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(23, 156, 153, 0.1);
}

.home-hero__trust::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 6px rgba(23, 156, 153, 0.12);
    animation: homeSoftPulse 4s ease-in-out infinite;
}

.home-hero h1 {
    max-width: 700px;
    margin-bottom: 22px;
    color: var(--home-ink);
    font-size: 58px;
    line-height: 1.16;
    letter-spacing: 0;
}

.home-hero h1 span {
    display: block;
}

.home-hero__lead {
    max-width: 660px;
    color: #344054;
    font-size: 17px;
    line-height: 2;
}

.home-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.home-hero__badges span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid rgba(23, 156, 153, 0.18);
    border-radius: 999px;
    background: #FFFFFF;
    color: #305152;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(23, 156, 153, 0.08);
}

.home-hero__badges span:nth-child(2) {
    border-color: rgba(255, 209, 102, 0.54);
    background: rgba(255, 245, 214, 0.92);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.home-page .button,
.home-page .phone-cta__number {
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.home-page .button:hover,
.home-page .phone-cta__number:hover {
    transform: translateY(-2px) scale(1.018);
    box-shadow: 0 16px 34px rgba(23, 156, 153, 0.16);
}

.home-hero .button {
    min-height: 54px;
    padding-inline: 22px;
    box-shadow: 0 14px 34px rgba(23, 156, 153, 0.16);
}

.home-hero .button--secondary {
    border-color: rgba(23, 156, 153, 0.22);
    background: rgba(255, 255, 255, 0.84);
    color: var(--home-ink);
}

.home-hero__phone-note {
    margin: 16px 0 0;
    color: var(--home-muted);
    font-size: 13px;
    font-weight: 800;
}

.home-illustration {
    position: relative;
    min-height: 540px;
}

.home-illustration::before {
    content: "";
    position: absolute;
    inset: 34px 0 28px 24px;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 48px;
    background:
        radial-gradient(circle at 82% 20%, rgba(255, 209, 102, 0.28), transparent 24%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(223, 247, 245, 0.86));
    box-shadow: 0 28px 80px rgba(23, 156, 153, 0.12);
}

.home-illustration__sun {
    position: absolute;
    top: 42px;
    right: 64px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--home-warm);
    box-shadow: 0 18px 44px rgba(255, 209, 102, 0.28);
    opacity: 0.9;
}

.home-illustration__car {
    position: absolute;
    right: 58px;
    bottom: 74px;
    width: 390px;
    height: 140px;
    animation: homeCarBob 7s ease-in-out infinite;
}

.home-illustration__car-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 86px;
    border: 4px solid #102022;
    border-radius: 42px 64px 34px 34px;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.16), rgba(255, 255, 255, 0.9)),
        #FFFFFF;
    box-shadow: 0 22px 38px rgba(16, 32, 34, 0.12);
}

.home-illustration__car-roof {
    position: absolute;
    left: 76px;
    bottom: 80px;
    width: 178px;
    height: 62px;
    border: 4px solid #102022;
    border-bottom: 0;
    border-radius: 62px 82px 0 0;
    background: rgba(114, 214, 255, 0.22);
}

.home-illustration__car-roof::after {
    content: "";
    position: absolute;
    right: 34px;
    bottom: 12px;
    width: 48px;
    height: 30px;
    border-radius: 10px;
    background: rgba(23, 156, 153, 0.18);
}

.home-illustration__wheel {
    position: absolute;
    bottom: 0;
    width: 52px;
    height: 52px;
    border: 8px solid #102022;
    border-radius: 50%;
    background: #FFFFFF;
}

.home-illustration__wheel--left {
    left: 58px;
}

.home-illustration__wheel--right {
    right: 62px;
}

.home-illustration__dashboard {
    position: absolute;
    top: 132px;
    left: 56px;
    width: 360px;
    border: 4px solid #102022;
    border-radius: 34px;
    background: #FFFFFF;
    box-shadow: 0 26px 62px rgba(16, 32, 34, 0.14);
    padding: 20px;
}

.home-illustration__screen {
    display: grid;
    gap: 14px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, var(--home-pale), #FFFFFF);
    padding: 18px;
}

.home-illustration__screen-top {
    width: 88px;
    height: 10px;
    border-radius: 999px;
    background: rgba(23, 156, 153, 0.24);
}

.home-illustration__screen-main {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 12px;
}

.home-illustration__play,
.home-illustration__map,
.home-illustration__check {
    position: relative;
    min-height: 92px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px rgba(23, 156, 153, 0.16);
}

.home-illustration__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -50%);
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 28px solid var(--color-primary);
}

.home-illustration__map::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, transparent 0 44%, rgba(23, 156, 153, 0.28) 44% 48%, transparent 48%),
        linear-gradient(45deg, transparent 0 52%, rgba(114, 214, 255, 0.36) 52% 56%, transparent 56%),
        var(--home-pale);
}

.home-illustration__check {
    grid-column: 1 / -1;
    min-height: 54px;
    background: rgba(23, 156, 153, 0.1);
}

.home-illustration__check::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 16px;
    width: 22px;
    height: 12px;
    transform: rotate(-45deg);
    border-left: 4px solid var(--color-primary);
    border-bottom: 4px solid var(--color-primary);
}

.home-illustration__screen-bars {
    display: grid;
    grid-template-columns: 1fr 0.7fr 0.48fr;
    gap: 10px;
}

.home-illustration__screen-bars span {
    height: 12px;
    border-radius: 999px;
    background: rgba(23, 156, 153, 0.2);
}

.home-illustration__phone {
    position: absolute;
    right: 34px;
    top: 188px;
    width: 108px;
    height: 186px;
    border: 4px solid #102022;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 20px 42px rgba(16, 32, 34, 0.14);
    padding: 14px;
    animation: homeGentleFloat 6s ease-in-out infinite;
}

.home-illustration__phone span {
    display: block;
    height: 118px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(23, 156, 153, 0.18), rgba(114, 214, 255, 0.2)),
        var(--home-pale);
}

.home-illustration__phone i {
    display: block;
    width: 34px;
    height: 6px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: rgba(16, 32, 34, 0.18);
}

.home-illustration__cable {
    position: absolute;
    left: 390px;
    top: 296px;
    width: 150px;
    height: 58px;
    border-top: 5px solid var(--color-primary);
    border-right: 5px solid var(--color-primary);
    border-radius: 0 28px 0 0;
    transform-origin: left center;
    animation: homeCableGrow 1.2s ease 0.55s both;
}

.home-illustration__cable::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -7px;
    width: 26px;
    height: 18px;
    border-radius: 6px;
    background: var(--color-primary);
}

.home-illustration__product {
    position: absolute;
    left: 34px;
    bottom: 84px;
    width: 102px;
    height: 118px;
    border: 4px solid #102022;
    border-radius: 18px;
    background:
        linear-gradient(145deg, #FFFFFF, var(--home-mint));
    box-shadow: 0 20px 42px rgba(16, 32, 34, 0.12);
}

.home-illustration__product span {
    position: absolute;
    inset: 24px 18px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(23, 156, 153, 0.22), rgba(255, 255, 255, 0.82));
}

.home-illustration__bubble {
    position: absolute;
    display: grid;
    z-index: 2;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 2px solid rgba(23, 156, 153, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 38px rgba(16, 32, 34, 0.1);
    animation: homeGentleFloat 7s ease-in-out infinite;
}

.home-illustration__bubble span {
    display: block;
}

.home-illustration__bubble--check {
    left: 4px;
    top: 78px;
}

.home-illustration__bubble--wifi {
    right: 172px;
    top: 72px;
    animation-delay: 0.9s;
}

.home-illustration__bubble--pin {
    right: 16px;
    bottom: 120px;
    animation-delay: 1.4s;
}

.home-illustration__bubble--check span::before {
    content: "";
    display: block;
    width: 26px;
    height: 14px;
    transform: rotate(-45deg);
    border-left: 5px solid var(--color-primary);
    border-bottom: 5px solid var(--color-primary);
}

.home-illustration__bubble--wifi span {
    position: relative;
    width: 34px;
    height: 26px;
}

.home-illustration__bubble--wifi span::before,
.home-illustration__bubble--wifi span::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--home-sky);
    border-radius: 50%;
}

.home-illustration__bubble--wifi span::before {
    top: 2px;
    width: 34px;
    height: 34px;
}

.home-illustration__bubble--wifi span::after {
    top: 12px;
    width: 18px;
    height: 18px;
}

.home-illustration__bubble--pin span {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50% 50% 50% 0;
    background: var(--home-coral);
    transform: rotate(-45deg);
}

.home-illustration__bubble--pin span::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #FFFFFF;
}

.home-section {
    position: relative;
    overflow: hidden;
}

.home-section::before {
    display: none;
}

.home-section .section__header {
    margin-bottom: 34px;
}

.home-section .section__header h2 {
    color: var(--home-ink);
    font-size: 36px;
    line-height: 1.34;
}

.home-section .section__lead {
    color: var(--home-muted);
}

.home-section .eyebrow {
    color: var(--color-primary);
    letter-spacing: 0;
    text-transform: none;
}

.home-trust-section {
    z-index: 3;
    margin-top: -44px;
    padding-top: 0;
}

.home-trust-card {
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 64px rgba(23, 156, 153, 0.11);
}

.home-trust-card::after {
    right: 28px;
    top: 22px;
    width: 110px;
    height: 110px;
    border-color: rgba(23, 156, 153, 0.16);
}

.home-fitment-section {
    padding-top: 92px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--home-pale) 100%);
}

.home-fitment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
    gap: 22px;
}

.home-fitment-panel .search-form {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.2);
    border-radius: 30px;
    background:
        radial-gradient(circle at 94% 10%, rgba(255, 209, 102, 0.2), transparent 22%),
        linear-gradient(145deg, #FFFFFF 0%, #F0FBFA 100%);
    box-shadow: 0 24px 64px rgba(23, 156, 153, 0.1);
    padding: 30px;
}

.home-fitment-panel .search-form::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: 24px;
    width: 84px;
    height: 40px;
    border: 3px solid rgba(23, 156, 153, 0.2);
    border-radius: 26px 36px 18px 18px;
    background: rgba(255, 255, 255, 0.44);
}

.home-fitment-panel .search-form__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.home-fitment-panel .form-field input:focus,
.home-fitment-panel .form-field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(23, 156, 153, 0.13);
}

.home-fitment-assist {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 122, 89, 0.18), transparent 30%),
        #FFFFFF;
    color: var(--home-ink);
    box-shadow: 0 24px 64px rgba(16, 32, 34, 0.08);
    padding: 28px;
}

.home-fitment-assist__icon {
    display: block;
    width: 70px;
    height: 58px;
    border: 3px solid var(--color-primary);
    border-radius: 22px 28px 18px 18px;
    background: rgba(23, 156, 153, 0.1);
}

.home-fitment-assist__icon::before,
.home-fitment-assist__icon::after {
    content: "";
    position: absolute;
}

.home-fitment-assist__icon::before {
    left: 44px;
    top: 48px;
    width: 24px;
    height: 12px;
    transform: rotate(-45deg);
    border-left: 4px solid var(--color-primary);
    border-bottom: 4px solid var(--color-primary);
}

.home-fitment-assist h3 {
    color: var(--home-ink);
}

.home-fitment-assist p {
    color: var(--home-muted);
}

.home-fitment-assist__time {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: rgba(255, 209, 102, 0.26);
    color: #614B00 !important;
    padding: 6px 12px;
    font-weight: 800;
}

.home-fitment-assist .button--secondary {
    border-color: rgba(23, 156, 153, 0.24);
    background: var(--home-pale);
    color: var(--home-ink);
}

.home-fitment-tags {
    grid-column: 1 / -1;
}

.home-fitment-tags > div {
    border: 1px solid rgba(23, 156, 153, 0.15);
    border-radius: 26px;
    background: #FFFFFF;
    box-shadow: 0 18px 42px rgba(23, 156, 153, 0.07);
}

.home-page .filter-chip {
    border-radius: 999px;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.home-page .filter-chip:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(23, 156, 153, 0.34);
    background: var(--home-pale);
    box-shadow: 0 10px 24px rgba(23, 156, 153, 0.1);
}

.home-finder-section {
    background:
        linear-gradient(180deg, var(--home-pale) 0%, #FFFFFF 100%);
    color: var(--home-ink);
}

.home-finder-section .section__header h2,
.home-finder-section h3 {
    color: var(--home-ink);
}

.home-finder-section .section__lead,
.home-finder-section p {
    color: var(--home-muted);
}

.home-finder-layout {
    display: grid;
    gap: 22px;
}

.home-finder-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-intent-card,
.home-finder-flow article {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 242px;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.07);
    padding: 24px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.home-intent-card:hover {
    transform: translateY(-6px) rotate(-0.7deg);
    border-color: rgba(23, 156, 153, 0.32);
    box-shadow: 0 28px 64px rgba(23, 156, 153, 0.13);
}

.home-intent-card > span {
    position: relative;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 20px;
    background: var(--home-pale);
}

.home-intent-card--play > span::before {
    content: "";
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid var(--color-primary);
}

.home-intent-card--wireless > span::before,
.home-intent-card--wireless > span::after {
    content: "";
    position: absolute;
    border: 4px solid transparent;
    border-top-color: var(--home-sky);
    border-radius: 50%;
}

.home-intent-card--wireless > span::before {
    width: 34px;
    height: 34px;
}

.home-intent-card--wireless > span::after {
    width: 18px;
    height: 18px;
    margin-top: 14px;
}

.home-intent-card--screen > span::before {
    content: "";
    width: 32px;
    height: 22px;
    border: 4px solid var(--color-primary);
    border-radius: 8px;
}

.home-intent-card--expand > span::before {
    content: "";
    width: 28px;
    height: 22px;
    border: 4px solid var(--home-coral);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

.home-intent-card h3 {
    margin-bottom: 10px;
}

.home-finder-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border: 1px solid rgba(23, 156, 153, 0.18);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(223, 247, 245, 0.78));
    box-shadow: 0 18px 46px rgba(23, 156, 153, 0.08);
}

.home-series-section {
    background: #FFFFFF;
}

.home-series-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr;
    grid-auto-rows: minmax(210px, auto);
    gap: 18px;
}

.home-series-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 20px 52px rgba(16, 32, 34, 0.07);
    padding: 24px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-series-card:nth-child(3n) {
    transform: translateY(18px);
}

.home-series-card:hover,
.home-page .support-card:hover,
.home-page .product-card:hover,
.home-page .store-card:hover,
.home-page .news-card:hover {
    transform: translateY(-6px);
    border-color: rgba(23, 156, 153, 0.34);
    box-shadow: 0 28px 68px rgba(23, 156, 153, 0.12);
}

.home-series-card--featured {
    grid-row: span 2;
    grid-template-columns: 1fr;
    align-content: end;
    min-height: 438px;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 209, 102, 0.28), transparent 30%),
        linear-gradient(145deg, var(--home-pale), #FFFFFF);
}

.home-series-card--featured h3 {
    color: var(--home-ink);
    font-size: 34px;
}

.home-series-card--featured p:not(.eyebrow) {
    color: var(--home-muted);
}

.home-series-card__device {
    position: relative;
    display: grid;
    width: 104px;
    height: 118px;
    place-items: center;
    border-radius: 26px;
    background: var(--home-pale);
}

.home-series-card--featured .home-series-card__device {
    width: 100%;
    height: 214px;
    background:
        linear-gradient(135deg, rgba(23, 156, 153, 0.16), rgba(114, 214, 255, 0.16)),
        #FFFFFF;
}

.home-series-card__device span {
    position: relative;
    width: 56%;
    height: 48%;
    border: 4px solid var(--color-primary);
    border-radius: 18px;
    background: #FFFFFF;
}

.home-series-card__device--play span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid var(--home-coral);
}

.home-series-card__device--wireless span::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 14px;
    width: 26px;
    height: 26px;
    border: 4px solid transparent;
    border-top-color: var(--home-sky);
    border-radius: 50%;
}

.home-series-card__device--screen span {
    width: 68%;
    height: 42%;
}

.home-series-card__device--expand span {
    border-color: var(--home-coral);
}

.home-series-card__device--box span {
    transform: rotate(-5deg);
    border-color: var(--home-warm);
}

.home-guide-section,
.home-store-section,
.home-news-section,
.home-official-section {
    background: #FFFFFF;
}

.home-guide-grid .support-card,
.home-support-topics .support-card,
.home-official-section .support-card,
.home-store-grid .store-card,
.home-news-section .news-card,
.home-product-grid .product-card {
    border-radius: 28px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-guide-grid .support-card:nth-child(2n) {
    transform: translateY(18px);
}

.home-products-section {
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--home-soft) 100%);
}

.home-product-grid {
    align-items: stretch;
}

.home-product-card {
    overflow: hidden;
}

.home-product-card__media {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 209, 102, 0.24), transparent 28%),
        linear-gradient(145deg, var(--home-pale), #FFFFFF);
}

.home-product-card__media::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 42%;
    border: 4px solid rgba(23, 156, 153, 0.42);
    border-radius: 22px;
    background: #FFFFFF;
}

.home-product-card__media::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: 20%;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--home-coral);
    opacity: 0.84;
}

.home-support-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 209, 102, 0.22), transparent 26%),
        linear-gradient(180deg, #FFFDF7 0%, #FFFFFF 100%);
    color: var(--home-ink);
}

.home-support-section .section__header h2,
.home-support-section h3 {
    color: var(--home-ink);
}

.home-support-section .section__lead,
.home-support-section p {
    color: var(--home-muted);
}

.home-support-section .phone-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 122, 89, 0.22);
    border-radius: 32px;
    background:
        radial-gradient(circle at 92% 16%, rgba(255, 122, 89, 0.18), transparent 28%),
        linear-gradient(135deg, #FFFFFF 0%, #FFF7E4 100%);
    box-shadow: 0 24px 64px rgba(255, 122, 89, 0.08);
}

.home-support-section .phone-cta::before {
    content: "";
    position: absolute;
    right: 34px;
    top: 28px;
    width: 62px;
    height: 62px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, var(--home-coral), var(--home-warm));
    opacity: 0.18;
}

.home-support-topics {
    margin-top: 20px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-support-topics .support-card {
    min-height: 178px;
    border-color: rgba(23, 156, 153, 0.14);
    background: #FFFFFF;
    color: var(--home-ink);
    box-shadow: 0 18px 44px rgba(16, 32, 34, 0.06);
}

.home-store-section .store-card,
.home-news-section .news-card,
.home-official-section .support-card {
    box-shadow: 0 18px 44px rgba(16, 32, 34, 0.06);
}

.home-final-section {
    padding-bottom: 100px;
    background:
        linear-gradient(180deg, var(--home-soft) 0%, #FFFFFF 100%);
}

.home-final-cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.home-final-cta .cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
}

.home-final-cta .cta-panel:first-child {
    border-color: rgba(23, 156, 153, 0.18);
    background:
        radial-gradient(circle at 92% 20%, rgba(114, 214, 255, 0.22), transparent 28%),
        linear-gradient(145deg, #FFFFFF 0%, var(--home-pale) 100%);
    color: var(--home-ink);
}

.home-final-cta .cta-panel:first-child h2,
.home-final-cta .cta-panel:first-child p {
    color: inherit;
}

.home-motion-ready .home-illustration {
    animation: homeBrightIn 0.82s ease 0.36s both;
}

.home-motion-ready .home-reveal .home-reveal-child {
    transform: translateY(22px) scale(0.985);
}

.home-motion-ready .home-reveal.is-visible .home-reveal-child {
    transform: translateY(0) scale(1);
}

@keyframes homeBrightIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes homeCableGrow {
    0% {
        opacity: 0;
        transform: scaleX(0.2);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes homeGentleFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes homeCarBob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes homeBrightPanelFloat {
    0%,
    100% {
        transform: rotate(-5deg) translateY(0);
    }
    50% {
        transform: rotate(-5deg) translateY(-10px);
    }
}

@keyframes homeSoftPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.86;
    }
    50% {
        transform: scale(1.14);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero::before,
    .home-hero__panel--back,
    .home-hero__trust::before,
    .home-illustration,
    .home-illustration__car,
    .home-illustration__phone,
    .home-illustration__bubble,
    .home-illustration__cable,
    .home-motion-ready .home-illustration {
        animation: none !important;
    }

    .home-motion-ready .home-reveal,
    .home-motion-ready .home-reveal .home-reveal-child,
    .home-motion-ready .home-illustration {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 1040px) {
    .home-hero,
    .home-hero__inner {
        min-height: auto;
    }

    .home-hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 72px 0 86px;
    }

    .home-hero h1 {
        font-size: 44px;
    }

    .home-illustration {
        min-height: 500px;
    }

    .home-illustration::before {
        inset: 12px 0 18px 0;
    }

    .home-illustration__dashboard {
        left: 8%;
    }

    .home-illustration__car {
        right: 7%;
    }

    .home-fitment-layout,
    .home-finder-flow,
    .home-series-grid,
    .home-final-cta {
        grid-template-columns: 1fr;
    }

    .home-fitment-panel .search-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-series-card,
    .home-series-card--featured {
        grid-row: auto;
        min-height: auto;
    }

    .home-series-card:nth-child(3n) {
        transform: none;
    }

    .home-series-card--featured {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .home-series-card--featured .home-series-card__device {
        width: 180px;
        height: 180px;
    }

    .home-support-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .home-page .section__inner,
    .home-hero__inner {
        width: min(1180px, calc(100% - 28px));
    }

    .home-hero {
        min-height: auto;
    }

    .home-hero__inner {
        gap: 24px;
        padding: 44px 0 64px;
    }

    .home-hero h1 {
        font-size: 34px;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .home-hero__lead {
        font-size: 15px;
        line-height: 1.82;
    }

    .home-hero__trust {
        align-items: flex-start;
        border-radius: 18px;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .home-hero__badges {
        gap: 8px;
        margin-top: 22px;
    }

    .home-hero__badges span {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .home-hero__actions {
        display: grid;
        gap: 10px;
        margin-top: 26px;
    }

    .home-hero .button {
        width: 100%;
        min-height: 50px;
        white-space: normal;
    }

    .home-hero__phone-note {
        display: none;
    }

    .home-illustration {
        min-height: 360px;
    }

    .home-illustration::before {
        inset: 0;
        border-radius: 32px;
    }

    .home-illustration__sun {
        top: 22px;
        right: 30px;
        width: 56px;
        height: 56px;
    }

    .home-illustration__dashboard {
        left: 16px;
        top: 76px;
        width: min(272px, calc(100% - 76px));
        border-width: 3px;
        border-radius: 24px;
        padding: 14px;
    }

    .home-illustration__screen {
        gap: 10px;
        border-radius: 18px;
        padding: 12px;
    }

    .home-illustration__play,
    .home-illustration__map {
        min-height: 66px;
    }

    .home-illustration__check {
        min-height: 42px;
    }

    .home-illustration__phone {
        right: 16px;
        top: 148px;
        width: 76px;
        height: 132px;
        border-width: 3px;
        border-radius: 18px;
        padding: 10px;
    }

    .home-illustration__phone span {
        height: 82px;
    }

    .home-illustration__cable {
        left: 246px;
        top: 230px;
        width: 78px;
        height: 42px;
        border-top-width: 4px;
        border-right-width: 4px;
    }

    .home-illustration__car {
        right: 16px;
        bottom: 28px;
        width: 272px;
        height: 98px;
    }

    .home-illustration__car-body {
        height: 60px;
        border-width: 3px;
        border-radius: 30px 42px 22px 22px;
    }

    .home-illustration__car-roof {
        left: 54px;
        bottom: 58px;
        width: 124px;
        height: 42px;
        border-width: 3px;
    }

    .home-illustration__wheel {
        width: 38px;
        height: 38px;
        border-width: 6px;
    }

    .home-illustration__wheel--left {
        left: 42px;
    }

    .home-illustration__wheel--right {
        right: 42px;
    }

    .home-illustration__product,
    .home-illustration__bubble--pin {
        display: none;
    }

    .home-illustration__bubble {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .home-illustration__bubble--check {
        left: 10px;
        top: 24px;
    }

    .home-illustration__bubble--wifi {
        right: 98px;
        top: 34px;
    }

    .home-section .section__header h2 {
        font-size: 28px;
    }

    .home-trust-section {
        margin-top: -22px;
    }

    .home-fitment-panel .search-form,
    .home-fitment-assist {
        padding: 22px;
        border-radius: 24px;
    }

    .home-fitment-panel .search-form__grid,
    .home-support-topics {
        grid-template-columns: 1fr;
    }

    .home-finder-flow {
        gap: 12px;
    }

    .home-intent-card,
    .home-finder-flow article {
        min-height: auto;
        border-radius: 24px;
    }

    .home-finder-panel {
        align-items: stretch;
        flex-direction: column;
        border-radius: 24px;
    }

    .home-series-card,
    .home-series-card--featured {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .home-series-card--featured .home-series-card__device,
    .home-series-card__device {
        width: 100%;
        height: 150px;
    }

    .home-guide-grid .support-card:nth-child(2n) {
        transform: none;
    }
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    background: var(--color-background);
    color: var(--color-text);
    font-family: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--color-background);
    font-size: 16px;
    line-height: 1.75;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.35);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: 12px;
    z-index: 100;
    transform: translateY(-160%);
    border-radius: 6px;
    background: var(--color-dark);
    color: var(--color-background);
    padding: 8px 12px;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
}

.site-header__inner,
.site-footer__inner,
.section__inner,
.page-hero__inner,
.breadcrumbs ol {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 24px;
}

.site-logo {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0;
    color: var(--color-dark);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
}

.site-logo span {
    font-size: 23px;
}

.site-logo small {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.site-nav,
.site-header__actions,
.site-footer__links,
.page-hero__actions,
.cta-panel__actions,
.product-card__actions,
.news-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.site-nav {
    flex: 1;
    justify-content: center;
}

.site-nav > a,
.site-footer__links a,
.text-link,
.mega-menu summary {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

.site-nav > a:hover,
.site-footer__links a:hover,
.text-link:hover,
.mega-menu summary:hover {
    color: var(--color-primary-dark);
}

.mega-menu {
    position: relative;
}

.mega-menu summary {
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.mega-menu summary::-webkit-details-marker {
    display: none;
}

.mega-menu summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.mega-menu__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 18px;
    width: min(760px, calc(100vw - 40px));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: var(--shadow-soft);
    padding: 18px;
    transform: translateX(-50%);
}

.mega-menu__intro {
    border-radius: 8px;
    background: var(--color-dark);
    color: var(--color-background);
    padding: 22px;
}

.mega-menu__intro span,
.mega-menu__item span,
.product-card__category,
.store-card__type,
.support-card span,
.news-card__meta,
.eyebrow {
    color: var(--color-primary-dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.mega-menu__intro strong,
.mega-menu__item strong {
    display: block;
    margin: 8px 0;
    font-size: 18px;
}

.mega-menu__intro p,
.mega-menu__item small {
    color: rgba(255, 255, 255, 0.72);
}

.mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mega-menu__item {
    display: grid;
    min-height: 132px;
    align-content: start;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    text-decoration: none;
}

.mega-menu__item:hover {
    border-color: rgba(23, 156, 153, 0.45);
    background: var(--color-primary-soft);
}

.mega-menu__item small {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6;
}

.button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.button--primary {
    background: var(--color-primary);
    color: var(--color-background);
}

.button--primary:hover {
    background: var(--color-primary-dark);
}

.button--secondary,
.button--ghost {
    border-color: var(--color-border);
    background: var(--color-background);
    color: var(--color-dark);
}

.button--secondary:hover,
.button--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.header-phone-cta {
    display: grid;
    min-height: 48px;
    align-content: center;
    border-radius: 8px;
    background: var(--color-dark);
    color: var(--color-background);
    padding: 8px 14px;
    text-decoration: none;
}

.header-phone-cta span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.header-phone-cta small {
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
    font-weight: 700;
}

.mobile-nav,
.mobile-fixed-cta {
    display: none;
}

.breadcrumbs {
    background: var(--color-soft);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 12px 0;
    color: var(--color-muted);
    font-size: 14px;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
}

.breadcrumbs a {
    text-decoration: none;
}

.page-hero {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-soft);
}

.page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
    gap: 56px;
    align-items: center;
    padding: 92px 0 76px;
}

.page-hero__content {
    min-width: 0;
}

.eyebrow {
    margin: 0 0 12px;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 880px;
    margin-bottom: 18px;
    color: var(--color-dark);
    font-size: 44px;
    line-height: 1.25;
}

h2 {
    margin-bottom: 16px;
    color: var(--color-dark);
    font-size: 32px;
    line-height: 1.35;
}

h3 {
    margin-bottom: 10px;
    color: var(--color-charcoal);
    font-size: 21px;
    line-height: 1.45;
}

.page-hero__lead,
.section__lead,
.search-form__header p,
.support-card p,
.support-menu-card p,
.support-article-card p,
.manual-card p,
.product-card p,
.store-card p,
.news-card p,
.cta-panel p,
.phone-cta p,
.text-block p,
.fitment-result p {
    color: var(--color-muted);
}

.page-hero__lead {
    max-width: 760px;
    font-size: 18px;
}

.page-hero__actions,
.hero-badges {
    margin-top: 28px;
    flex-wrap: wrap;
}

.hero-badges {
    display: flex;
    gap: 10px;
}

.hero-badges span,
.filter-chip {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-background);
    color: var(--color-text);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.page-hero__visual {
    display: flex;
    justify-content: flex-end;
}

.brand-device {
    width: min(360px, 100%);
    border: 1px solid rgba(21, 26, 31, 0.16);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: var(--shadow-soft);
    padding: 18px;
}

.brand-device__bar {
    width: 72px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
}

.brand-device__screen {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    border-radius: 8px;
    background: var(--color-dark);
    color: var(--color-background);
    padding: 28px;
}

.brand-device__screen span {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
}

.brand-device__screen strong {
    font-size: 28px;
}

.brand-device__screen small {
    color: rgba(255, 255, 255, 0.72);
}

.brand-device__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.brand-device__row i {
    display: block;
    height: 54px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-soft);
}

.section {
    padding: 80px 0;
}

.section + .section {
    padding-top: 0;
}

.section__header {
    max-width: 800px;
    margin-bottom: 30px;
}

.card-grid,
.feature-grid,
.product-grid,
.form-grid,
.search-form__grid {
    display: grid;
    gap: 18px;
}

.card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--3,
.feature-grid,
.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.series-grid,
.support-topic-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.brand-trust,
.finder-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: var(--shadow-soft);
    padding: 30px;
}

.brand-trust h2,
.finder-band h3 {
    margin-bottom: 8px;
}

.brand-trust p:last-child,
.finder-band p:last-child {
    margin-bottom: 0;
}

.popular-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.popular-link-grid > div {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-soft);
    padding: 20px;
}

.popular-link-grid h3 {
    margin-bottom: 14px;
    font-size: 18px;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.cta-stack,
.policy-layout {
    display: grid;
    gap: 18px;
}

.policy-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-block {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 24px;
}

.product-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.product-tab,
.purpose-filter {
    display: grid;
    gap: 6px;
    min-height: 92px;
    align-content: start;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 16px;
    text-decoration: none;
}

.product-tab span,
.purpose-filter span {
    color: var(--color-dark);
    font-weight: 700;
}

.product-tab small,
.purpose-filter small {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6;
}

.product-tab:hover,
.product-tab.is-active,
.purpose-filter:hover,
.purpose-filter.is-active {
    border-color: rgba(23, 156, 153, 0.5);
    background: var(--color-primary-soft);
}

.product-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr) auto;
    gap: 16px;
    align-items: end;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.product-search__actions {
    display: flex;
    gap: 10px;
}

.purpose-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.empty-state,
.product-detail-note,
.product-check-panel {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: var(--shadow-soft);
    padding: 28px;
}

.product-detail-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
    gap: 24px;
    align-items: start;
}

.feature-list-grid,
.step-list {
    display: grid;
    gap: 14px;
}

.feature-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-list-item,
.step-list div {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 18px;
}

.feature-list-item span,
.step-list span {
    display: inline-grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.feature-list-item p,
.step-list p {
    margin-bottom: 0;
}

.product-check-panel {
    display: grid;
    gap: 18px;
}

.product-check-panel ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 1.2em;
}

.spec-table {
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-background);
}

.spec-table div {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-bottom: 1px solid var(--color-border);
}

.spec-table div:last-child {
    border-bottom: 0;
}

.spec-table dt,
.spec-table dd {
    margin: 0;
    padding: 16px 18px;
}

.spec-table dt {
    background: var(--color-soft);
    color: var(--color-muted);
    font-weight: 700;
}

.included-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.included-list span {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-background);
    padding: 8px 14px;
    font-weight: 700;
}

.support-card,
.product-card,
.store-card,
.news-card,
.search-form,
.contact-form,
.cta-panel,
.phone-cta,
.fitment-result,
.info-panel,
.notice {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
}

.support-card,
.store-card,
.news-card,
.info-panel,
.notice {
    padding: 24px;
}

.support-card,
.store-card,
.news-card,
.product-card,
.search-form,
.contact-form,
.cta-panel,
.phone-cta,
.fitment-result {
    box-shadow: var(--shadow-soft);
}

.support-card {
    display: grid;
    align-content: start;
    min-height: 210px;
}

.support-menu-grid,
.support-article-grid,
.manual-grid {
    display: grid;
    gap: 18px;
}

.support-menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.support-article-grid,
.manual-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-menu-card,
.support-article-card,
.manual-card {
    display: grid;
    align-content: start;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text);
    padding: 22px;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.support-menu-card {
    min-height: 188px;
}

.support-menu-card:hover,
.support-article-card:hover,
.manual-card:hover {
    border-color: rgba(23, 156, 153, 0.48);
    background: var(--color-primary-soft);
}

.support-menu-card span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    background: var(--color-soft);
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.support-menu-card h3,
.support-article-card h3,
.manual-card h3 {
    color: var(--color-dark);
    margin-bottom: 0;
}

.support-article-card__meta {
    display: grid;
    gap: 8px;
    margin: 0;
}

.support-article-card__meta div {
    display: grid;
    grid-template-columns: 94px 1fr;
    gap: 10px;
}

.support-article-card__meta dt {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.support-article-card__meta dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 700;
}

.manual-card {
    min-height: 168px;
}

.support-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(126, 218, 215, 0.22), transparent 28%),
        radial-gradient(circle at 88% 36%, rgba(255, 209, 102, 0.16), transparent 24%),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-bg-soft) 38%, #FFFFFF 100%);
}

.support-page .page-hero {
    background:
        linear-gradient(135deg, rgba(240, 251, 250, 0.96), rgba(255, 255, 255, 0.88)),
        radial-gradient(circle at 82% 18%, rgba(23, 156, 153, 0.22), transparent 30%);
}

.support-page .page-hero__inner,
.support-page .section__inner {
    width: min(1160px, calc(100% - 48px));
}

.support-page .page-hero__content h1,
.support-page .section__header h2 {
    color: var(--oc-ink);
    letter-spacing: 0;
}

.support-page .eyebrow {
    color: var(--oc-primary-700);
}

.support-page .hero-badges span {
    border-color: var(--oc-primary-200);
    background: #FFFFFF;
    color: var(--oc-primary-800);
}

.support-section {
    position: relative;
}

.support-section + .support-section {
    margin-top: 0;
}

.support-page--simple .page-hero {
    border-bottom: 1px solid rgba(189, 237, 234, 0.72);
}

.support-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.support-flow-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-height: 220px;
    border: 1px solid var(--oc-line);
    border-radius: 30px;
    background: #FFFFFF;
    padding: 26px;
    color: var(--oc-text);
    text-decoration: none;
    box-shadow: var(--oc-shadow-sm);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.support-flow-card:hover {
    border-color: var(--oc-primary-300);
    box-shadow: var(--oc-shadow-md);
    transform: translateY(-3px);
}

.support-flow-card > span {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    background: var(--oc-primary-100);
    color: var(--oc-primary-800);
    font-weight: 900;
}

.support-flow-card h3,
.support-simple-panel h3,
.support-notice-panel h3,
.support-contact-panel h3 {
    margin: 0;
    color: var(--oc-ink);
    line-height: 1.45;
    letter-spacing: 0;
}

.support-flow-card p,
.support-simple-panel p,
.support-notice-panel p {
    margin: 10px 0 0;
    color: var(--oc-muted);
    line-height: 1.85;
}

.support-flow-card strong {
    display: inline-flex;
    width: fit-content;
    margin-top: 18px;
    color: var(--oc-primary-800);
    font-size: 14px;
}

.support-simple-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: 22px;
    align-items: start;
    border: 1px solid var(--oc-line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 0% 0%, rgba(126, 218, 215, 0.2), transparent 28%),
        #FFFFFF;
    padding: 28px;
    box-shadow: var(--oc-shadow-sm);
}

.support-simple-panel__intro {
    display: grid;
    gap: 16px;
    align-content: start;
}

.support-simple-list,
.support-qa-compact-list {
    display: grid;
    gap: 12px;
}

.support-simple-list__item,
.support-qa-compact-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border: 1px solid var(--oc-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    padding: 16px;
    color: var(--oc-text);
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.support-simple-list__item:hover,
.support-qa-compact-list a:hover {
    border-color: var(--oc-primary-300);
    background: var(--oc-primary-50);
    transform: translateY(-2px);
}

.support-simple-list__item > span,
.support-qa-compact-list span {
    display: inline-grid;
    min-width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: var(--oc-primary-100);
    color: var(--oc-primary-800);
    font-weight: 900;
}

.support-simple-list__item strong,
.support-qa-compact-list strong {
    display: block;
    color: var(--oc-ink);
    line-height: 1.55;
}

.support-simple-list__item p {
    margin: 4px 0 0;
    color: var(--oc-muted);
    font-size: 14px;
    line-height: 1.7;
}

.support-symptom-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.support-symptom-list__item {
    display: grid;
    gap: 4px;
    border: 1px solid var(--oc-line);
    border-radius: 999px;
    background: #FFFFFF;
    padding: 14px 18px;
    color: var(--oc-text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.05);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.support-symptom-list__item:hover {
    border-color: var(--oc-primary-300);
    background: var(--oc-primary-50);
    transform: translateY(-2px);
}

.support-symptom-list__item strong {
    color: var(--oc-primary-800);
    font-size: 15px;
}

.support-symptom-list__item span {
    color: var(--oc-muted);
    font-size: 13px;
    line-height: 1.45;
}

.support-qa-teaser,
.support-notice-panel,
.support-contact-panel {
    margin-top: 22px;
    border: 1px solid var(--oc-line);
    border-radius: 32px;
    background: #FFFFFF;
    padding: 26px;
    box-shadow: var(--oc-shadow-sm);
}

.support-qa-teaser {
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.16), transparent 32%),
        #FFFFFF;
}

.support-notice-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin-top: 0;
    background:
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
}

.support-contact-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.64fr) minmax(0, 1.36fr);
    gap: 22px;
    margin-top: 0;
}

.support-contact-panel__copy {
    display: grid;
    gap: 16px;
    align-content: start;
    border-radius: 26px;
    background: var(--oc-primary-50);
    padding: 24px;
}

.support-contact-panel__copy ul {
    margin: 0;
    padding-left: 1.1em;
    color: var(--oc-text);
    line-height: 1.9;
}

.support-contact-panel__actions {
    display: grid;
    gap: 16px;
}

.support-contact-panel__actions .phone-cta,
.support-contact-panel__actions .cta-panel {
    margin: 0;
}

.support-route-grid,
.support-guide-grid,
.support-qa-grid,
.support-restore-grid,
.support-contact-list {
    display: grid;
    gap: 18px;
}

.support-route-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.support-route-card,
.support-guide-card,
.support-qa-card,
.support-contact-card,
.support-restore-card,
.support-guide-feature,
.support-restore-panel {
    border: 1px solid var(--oc-line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--oc-text);
    box-shadow: var(--oc-shadow-sm);
}

.support-route-card,
.support-guide-card,
.support-qa-card,
.support-contact-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 190px;
    padding: 24px;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.support-route-card:hover,
.support-guide-card:hover,
.support-qa-card:hover,
.support-contact-card:hover {
    border-color: var(--oc-primary-300);
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-md);
    transform: translateY(-3px);
}

.support-route-card span {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 16px;
    background: var(--oc-primary-100);
    color: var(--oc-primary-800);
    font-weight: 800;
}

.support-route-card h3,
.support-guide-card h3,
.support-qa-card h3,
.support-contact-card h3,
.support-restore-card h3,
.support-guide-feature h3 {
    margin: 0;
    color: var(--oc-ink);
    line-height: 1.45;
}

.support-route-card p,
.support-guide-card p,
.support-qa-card p,
.support-contact-card p,
.support-restore-card p,
.support-guide-feature p {
    margin: 0;
    color: var(--oc-muted);
    line-height: 1.8;
}

.support-guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
    gap: 24px;
    align-items: stretch;
}

.support-guide-feature {
    position: relative;
    display: grid;
    gap: 26px;
    overflow: hidden;
    min-height: 420px;
    padding: 32px;
    background:
        linear-gradient(145deg, var(--oc-primary-900), var(--oc-primary-700)),
        var(--oc-primary-900);
    color: #FFFFFF;
}

.support-guide-feature::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 34px solid rgba(255, 255, 255, 0.12);
}

.support-guide-feature span {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    padding: 8px 14px;
    color: #FFFFFF;
    font-weight: 800;
}

.support-guide-feature h3,
.support-guide-feature p {
    position: relative;
    z-index: 1;
    color: #FFFFFF;
}

.support-guide-feature p {
    color: rgba(255, 255, 255, 0.82);
}

.support-guide-visual {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-self: end;
}

.support-guide-visual i,
.support-guide-visual strong,
.support-guide-visual span,
.support-guide-visual em {
    min-height: 84px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 800;
}

.support-guide-visual i::before {
    content: "";
    width: 48px;
    height: 16px;
    border-radius: 999px;
    background: var(--oc-accent-yellow);
    box-shadow: 0 0 0 12px rgba(255, 209, 102, 0.14);
}

.support-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-guide-card ul,
.support-restore-card ul,
.support-restore-card ol,
.support-check-list {
    margin: 0;
    padding-left: 1.1em;
    color: var(--oc-text);
    line-height: 1.9;
}

.support-guide-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.support-guide-card li {
    border-radius: 999px;
    background: var(--oc-primary-50);
    color: var(--oc-primary-800);
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 800;
}

.support-guide-doc-preview {
    margin-top: 24px;
    border: 1px solid var(--oc-line);
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.2), transparent 32%),
        #FFFFFF;
    padding: 24px;
    box-shadow: var(--oc-shadow-sm);
}

.support-guide-doc-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.support-guide-doc-mini {
    display: grid;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--oc-line);
    border-radius: 22px;
    background: var(--oc-primary-50);
    padding: 12px;
    color: var(--oc-text);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.support-guide-doc-mini:hover {
    transform: translateY(-3px);
    border-color: var(--oc-primary-300);
    box-shadow: var(--oc-shadow-sm);
}

.support-guide-doc-mini img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    object-fit: cover;
    background: #FFFFFF;
}

.support-guide-doc-mini span {
    width: fit-content;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
}

.support-guide-doc-mini strong {
    color: var(--oc-ink);
    font-size: 14px;
    line-height: 1.55;
}

.support-guide-doc-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
    gap: 28px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--oc-line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 10% 15%, rgba(255, 209, 102, 0.2), transparent 24%),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
    padding: 30px;
    box-shadow: var(--oc-shadow-md);
}

.support-guide-doc-feature__copy {
    display: grid;
    gap: 16px;
}

.support-guide-doc-feature__copy span,
.support-guide-doc-section__heading span {
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-100);
    color: var(--oc-primary-800);
    padding: 8px 13px;
    font-weight: 800;
}

.support-guide-doc-feature__copy h3 {
    margin: 0;
    color: var(--oc-ink);
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1.35;
    letter-spacing: 0;
}

.support-guide-doc-feature__copy p {
    margin: 0;
    color: var(--oc-text);
    line-height: 1.9;
}

.support-guide-doc-feature__copy ul,
.support-guide-doc-card__body ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support-guide-doc-feature__copy li,
.support-guide-doc-card__body li {
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800);
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 800;
}

.support-guide-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.support-guide-doc-feature__image {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--oc-line);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm);
}

.support-guide-doc-feature__image img {
    display: block;
    width: 100%;
    height: auto;
}

.support-guide-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
}

.support-guide-category-nav a {
    border: 1px solid var(--oc-primary-200);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800);
    padding: 9px 14px;
    text-decoration: none;
    font-weight: 800;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.support-guide-category-nav a:hover {
    transform: translateY(-2px);
    border-color: var(--oc-primary-500);
    background: var(--oc-primary-50);
}

.support-guide-doc-sections {
    display: grid;
    gap: 28px;
}

.support-guide-doc-section {
    display: grid;
    gap: 16px;
    scroll-margin-top: 96px;
}

.support-guide-doc-section__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.support-guide-doc-section__heading h3 {
    margin: 0;
    color: var(--oc-ink);
    font-size: clamp(22px, 2.4vw, 32px);
}

.support-guide-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.support-guide-doc-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
    gap: 18px;
    border: 1px solid var(--oc-line);
    border-radius: 28px;
    background: #FFFFFF;
    padding: 16px;
    box-shadow: var(--oc-shadow-sm);
}

.support-guide-doc-card__thumb {
    display: block;
    overflow: hidden;
    align-self: start;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    background: var(--oc-primary-50);
}

.support-guide-doc-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.support-guide-doc-card__thumb:hover img {
    transform: scale(1.025);
}

.support-guide-doc-card__body {
    display: grid;
    gap: 12px;
    align-content: start;
}

.support-guide-doc-card__body h4 {
    margin: 0;
    color: var(--oc-ink);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.45;
    letter-spacing: 0;
}

.support-guide-doc-card__body p {
    margin: 0;
    color: var(--oc-muted);
    line-height: 1.8;
}

.support-guide-doc-card__body dl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.support-guide-doc-card__body dl div {
    min-width: 92px;
    border-radius: 16px;
    background: var(--oc-bg-soft);
    padding: 10px 12px;
}

.support-guide-doc-card__body dt {
    color: var(--oc-muted);
    font-size: 12px;
    font-weight: 700;
}

.support-guide-doc-card__body dd {
    margin: 2px 0 0;
    color: var(--oc-ink);
    font-weight: 800;
}

.support-qa-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.support-qa-card {
    min-height: 210px;
    background: linear-gradient(180deg, #FFFFFF, var(--oc-primary-50));
}

.support-qa-card span {
    align-self: end;
    color: var(--oc-primary-700);
    font-weight: 800;
}

.support-faq-preview {
    margin-top: 24px;
    border: 1px solid var(--oc-line);
    border-radius: 32px;
    background: #FFFFFF;
    padding: 26px;
    box-shadow: var(--oc-shadow-sm);
}

.support-faq-preview__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.support-faq-preview__heading h3 {
    margin: 0;
    color: var(--oc-ink);
}

.support-faq-preview__heading p,
.support-qa-library-intro p {
    margin: 6px 0 0;
    color: var(--oc-muted);
    line-height: 1.8;
}

.support-faq-preview--qa {
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.22), transparent 34%),
        #FFFFFF;
}

.support-qa-library {
    display: grid;
    gap: 16px;
}

.support-qa-library-intro {
    max-width: 820px;
    margin-bottom: 22px;
}

.support-page--faq .page-hero {
    background:
        radial-gradient(circle at 84% 16%, rgba(255, 209, 102, 0.12), transparent 24rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
}

.support-hero-photo--faq img {
    object-position: 68% center;
}

.support-hero-photo--faq::after {
    background:
        linear-gradient(180deg, rgba(16, 32, 34, 0) 46%, rgba(16, 32, 34, 0.46) 100%),
        radial-gradient(circle at 18% 18%, rgba(23, 156, 153, 0.18), transparent 36%);
}

.support-faq-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.support-faq-nav-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    align-items: start;
    min-height: 132px;
    border: 1px solid var(--oc-line);
    border-radius: 24px;
    background: #FFFFFF;
    padding: 18px;
    color: var(--oc-text);
    text-decoration: none;
    box-shadow: var(--oc-shadow-sm);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.support-faq-nav-card:hover,
.support-faq-nav-card:focus-visible,
.support-faq-nav-card.is-active {
    border-color: var(--oc-primary-300);
    background:
        radial-gradient(circle at 94% 10%, rgba(255, 209, 102, 0.16), transparent 7rem),
        var(--oc-primary-50);
    transform: translateY(-2px);
    box-shadow: var(--oc-shadow-md);
}

.support-faq-nav-card span {
    display: inline-grid;
    grid-row: span 2;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 14px;
    background: var(--oc-primary-100);
    color: var(--oc-primary-800);
    font-size: 12px;
    font-weight: 900;
}

.support-faq-nav-card.is-active span {
    background: var(--oc-primary);
    color: #FFFFFF;
}

.support-faq-nav-card strong {
    color: var(--oc-ink);
    font-size: 16px;
    line-height: 1.45;
}

.support-faq-nav-card small {
    grid-column: 2;
    color: var(--oc-muted);
    font-size: 12.5px;
    line-height: 1.7;
}

.support-faq-current {
    margin: 18px 0 0;
    border: 1px solid var(--oc-primary-200);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 14px 16px;
    color: var(--oc-primary-900);
    font-size: 13px;
    line-height: 1.7;
}

.support-qa-detail {
    overflow: hidden;
    border: 1px solid var(--oc-line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--oc-shadow-sm);
}

.support-qa-detail[open] {
    border-color: var(--oc-primary-200);
    box-shadow: var(--oc-shadow-md);
}

.support-qa-detail summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 74px;
    padding: 18px 22px;
    color: var(--oc-ink);
    cursor: pointer;
    list-style: none;
}

.support-qa-detail summary::-webkit-details-marker {
    display: none;
}

.support-qa-detail summary::after {
    content: "";
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--oc-primary-700);
    border-bottom: 2px solid var(--oc-primary-700);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.support-qa-detail[open] summary::after {
    transform: rotate(225deg);
}

.support-qa-detail__number {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    background: var(--oc-primary-700);
    color: #FFFFFF;
    font-weight: 900;
    letter-spacing: 0;
}

.support-qa-detail summary strong {
    display: block;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.55;
    letter-spacing: 0;
}

.support-qa-detail__heading {
    display: grid;
    gap: 5px;
}

.support-qa-detail summary em {
    justify-self: start;
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-50);
    color: var(--oc-primary-800);
    padding: 5px 10px;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.support-qa-detail__body {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: 22px;
    padding: 0 22px 22px;
}

.support-qa-detail__text {
    display: grid;
    align-content: start;
    gap: 18px;
    border-radius: 24px;
    background: var(--oc-bg-soft);
    padding: 22px;
}

.support-qa-detail__text > p {
    margin: 0;
    color: var(--oc-text);
    line-height: 1.9;
}

.support-qa-detail__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.support-qa-detail__columns > div {
    border: 1px solid var(--oc-line);
    border-radius: 20px;
    background: #FFFFFF;
    padding: 16px;
}

.support-qa-detail h4 {
    margin: 0 0 10px;
    color: var(--oc-primary-800);
    font-size: 15px;
}

.support-qa-detail ol,
.support-qa-detail ul {
    margin: 0;
    padding-left: 1.2em;
    color: var(--oc-text);
    line-height: 1.85;
}

.support-qa-detail li + li {
    margin-top: 6px;
}

.support-qa-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.support-qa-detail__image {
    display: grid;
    margin: 0;
    align-self: start;
    overflow: hidden;
    border: 1px solid var(--oc-line);
    border-radius: 24px;
    background:
        linear-gradient(180deg, #FFFFFF, var(--oc-primary-50));
    box-shadow: var(--oc-shadow-sm);
}

.support-qa-detail__image a {
    display: block;
    padding: 10px;
}

.support-qa-detail__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    background: #FFFFFF;
}

.support-qa-detail__image figcaption {
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--oc-line);
    padding: 14px 16px 16px;
}

.support-qa-detail__image figcaption span {
    color: var(--oc-primary-800);
    font-size: 11px;
    font-weight: 900;
}

.support-qa-detail__image figcaption strong {
    color: var(--oc-ink);
    font-size: 13px;
    line-height: 1.55;
}

.support-qa-detail__image figcaption small {
    color: var(--oc-muted);
    font-size: 12px;
}

.support-qa-library--compact {
    gap: 12px;
}

.support-qa-library--compact .support-qa-detail {
    border-radius: 22px;
}

.support-qa-library--compact .support-qa-detail summary {
    min-height: 68px;
    padding: 14px 16px;
}

.support-qa-library--compact .support-qa-detail__number {
    width: 44px;
    height: 44px;
    border-radius: 15px;
}

.support-qa-library--compact .support-qa-detail__body {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
}

.support-qa-library--compact .support-qa-detail__text {
    padding: 18px;
}

.support-restore-panel {
    overflow: hidden;
    padding: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 89, 0.13), transparent 30%),
        linear-gradient(180deg, #FFFFFF, var(--oc-primary-50));
}

.support-restore-panel__intro {
    display: grid;
    gap: 12px;
    max-width: 780px;
    margin-bottom: 24px;
}

.support-restore-panel__intro span {
    width: fit-content;
    border-radius: 999px;
    background: rgba(255, 122, 89, 0.12);
    color: #B93815;
    padding: 8px 14px;
    font-weight: 800;
}

.support-restore-panel__intro h3 {
    margin: 0;
    color: var(--oc-ink);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.45;
}

.support-restore-panel__intro p {
    margin: 0;
    color: var(--oc-text);
    line-height: 1.9;
}

.support-restore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-restore-card {
    display: grid;
    gap: 22px;
    padding: 26px;
}

.support-restore-card .eyebrow {
    margin: 0 0 8px;
}

.support-restore-card__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.support-restore-card h4 {
    margin: 0 0 8px;
    color: var(--oc-primary-800);
}

.support-restore-notes {
    border-radius: 22px;
    background: var(--oc-bg-soft);
    padding: 18px;
}

.support-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start;
}

.support-contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-contact-card {
    min-height: 150px;
}

.support-page .phone-cta,
.support-page .cta-panel {
    border-color: var(--oc-line);
    border-radius: 28px;
    box-shadow: var(--oc-shadow-sm);
}

.support-page .support-article-card {
    border-color: var(--oc-line);
    border-radius: 24px;
}

.support-faq-check-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: center;
    margin-bottom: 22px;
    border: 1px solid var(--oc-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 209, 102, 0.16), transparent 9rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
    padding: 22px;
    box-shadow: var(--oc-shadow-sm);
}

.support-faq-check-intro p {
    margin: 0;
    color: var(--oc-muted);
    font-size: 13.5px;
    line-height: 1.8;
}

.support-section--faq-check .support-article-card {
    border-color: var(--oc-line);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm);
}

.support-section--faq-check .support-article-card .text-link {
    color: var(--oc-primary-800);
    font-weight: 800;
}

@media (max-width: 1024px) {
    .support-faq-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-flow-grid,
    .support-symptom-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-simple-panel,
    .support-contact-panel {
        grid-template-columns: 1fr;
    }

    .support-notice-panel {
        grid-template-columns: 1fr;
    }

    .support-route-grid,
    .support-qa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-guide-layout,
    .support-guide-doc-feature,
    .support-contact-layout {
        grid-template-columns: 1fr;
    }

    .support-guide-doc-row,
    .support-guide-doc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-guide-doc-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .support-page .page-hero__inner,
    .support-page .section__inner {
        width: min(100% - 32px, 1160px);
    }

    .support-flow-grid,
    .support-symptom-list,
    .support-simple-panel,
    .support-contact-panel,
    .support-notice-panel {
        grid-template-columns: 1fr;
    }

    .support-flow-card,
    .support-simple-panel,
    .support-qa-teaser,
    .support-notice-panel,
    .support-contact-panel {
        border-radius: 22px;
        padding: 20px;
    }

    .support-flow-card {
        min-height: 0;
    }

    .support-symptom-list__item {
        border-radius: 18px;
    }

    .support-route-grid,
    .support-guide-grid,
    .support-guide-doc-row,
    .support-guide-doc-grid,
    .support-qa-grid,
    .support-restore-grid,
    .support-contact-list,
    .support-restore-card__columns {
        grid-template-columns: 1fr;
    }

    .support-route-card,
    .support-guide-card,
    .support-qa-card,
    .support-contact-card,
    .support-restore-card,
    .support-guide-feature,
    .support-restore-panel,
    .support-faq-preview,
    .support-guide-doc-preview,
    .support-guide-doc-feature,
    .support-guide-doc-card,
    .support-qa-detail {
        border-radius: 22px;
        padding: 20px;
    }

    .support-qa-detail {
        padding: 0;
    }

    .support-faq-preview__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-qa-detail summary {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        padding: 16px;
    }

    .support-faq-check-intro {
        grid-template-columns: 1fr;
        border-radius: 22px;
        padding: 18px;
    }

    .support-faq-check-intro .button {
        width: 100%;
        justify-content: center;
    }

    .support-qa-detail summary::after {
        grid-column: 2;
        justify-self: end;
        margin-top: -28px;
    }

    .support-faq-nav {
        grid-template-columns: 1fr;
    }

    .support-faq-nav-card {
        min-height: 0;
        border-radius: 20px;
        padding: 16px;
    }

    .support-faq-nav-card strong {
        font-size: 15px;
    }

    .support-faq-nav-card small {
        font-size: 12.2px;
    }

    .support-qa-detail__heading {
        gap: 4px;
    }

    .support-qa-detail summary strong {
        font-size: 14.5px;
        line-height: 1.55;
    }

    .support-qa-detail summary em {
        justify-self: start;
        font-size: 11.5px;
    }

    .support-qa-detail__body,
    .support-qa-detail__columns {
        grid-template-columns: 1fr;
    }

    .support-qa-detail__body {
        padding: 0 16px 16px;
    }

    .support-qa-detail__text,
    .support-qa-detail__image {
        border-radius: 18px;
    }

    .support-qa-detail__image a {
        padding: 8px;
    }

    .support-qa-detail__image img {
        border-radius: 14px;
    }

    .support-qa-detail__image figcaption {
        padding: 12px 14px 14px;
    }

    .support-guide-feature {
        min-height: 0;
    }

    .support-guide-doc-feature__image,
    .support-guide-doc-card__thumb {
        border-radius: 18px;
    }

    .support-guide-doc-section__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-guide-visual {
        grid-template-columns: 1fr 1fr;
    }
}

.company-statement,
.company-support-panel,
.partner-card,
.corporate-flow article,
.corporate-asset-grid article {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: var(--shadow-soft);
}

.company-statement {
    display: grid;
    gap: 16px;
    padding: 30px;
}

.company-statement h2 {
    max-width: 920px;
}

.company-statement p:last-child {
    max-width: 880px;
    margin-bottom: 0;
    color: var(--color-muted);
}

.company-statement__items,
.corporate-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.company-statement__items span,
.corporate-chip-grid span {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    border: 1px solid rgba(23, 156, 153, 0.28);
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 700;
}

.company-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 22px;
    align-items: start;
}

.company-support-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.partner-grid,
.corporate-flow,
.corporate-asset-grid {
    display: grid;
    gap: 18px;
}

.partner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partner-card {
    display: flex;
    gap: 16px;
    align-items: center;
    min-height: 132px;
    padding: 20px;
}

.partner-card__logo {
    display: grid;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-soft);
}

.partner-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.partner-card__logo span {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.partner-card h3 {
    margin-bottom: 4px;
}

.partner-card p {
    margin-bottom: 8px;
    color: var(--color-muted);
}

.corporate-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.corporate-flow article,
.corporate-asset-grid article {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
}

.corporate-flow span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.corporate-flow h3,
.corporate-asset-grid h3 {
    margin-bottom: 0;
}

.corporate-flow p,
.corporate-asset-grid p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.corporate-asset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-card span,
.product-card__category,
.store-card__type {
    display: block;
    margin-bottom: 10px;
}

.product-card {
    overflow: hidden;
}

.product-card__media {
    display: grid;
    aspect-ratio: 16 / 9;
    place-items: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-soft);
    color: var(--color-primary-dark);
    font-weight: 700;
}

.product-card__body {
    padding: 24px;
}

.product-card__features {
    display: grid;
    gap: 6px;
    margin: 18px 0 0;
    padding-left: 1.1em;
    color: var(--color-text);
}

.product-card__actions {
    flex-wrap: wrap;
    margin-top: 18px;
}

.text-link {
    color: var(--color-primary-dark);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.filter-chip:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.search-form,
.contact-form {
    display: grid;
    gap: 22px;
    padding: 24px;
}

.search-form__header {
    max-width: 720px;
}

.search-form__grid,
.form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.search-form__action {
    align-self: end;
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field--wide {
    grid-column: 1 / -1;
}

.form-field span,
.privacy-check {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
}

.form-field em {
    color: var(--color-danger);
    font-style: normal;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text);
    padding: 10px 12px;
}

.form-field textarea {
    resize: vertical;
}

.field-error {
    color: var(--color-danger);
    font-size: 13px;
}

.privacy-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.privacy-check input {
    width: 18px;
    height: 18px;
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 24px;
    align-items: start;
}

.contact-layout--wide {
    grid-template-columns: minmax(260px, 0.5fr) minmax(0, 1.5fr);
}

.contact-side {
    display: grid;
    gap: 16px;
}

.contact-form--phase9 {
    position: relative;
}

.support-check-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding-left: 1.2em;
    color: var(--color-text);
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Contact page */
.contact-page,
.privacy-policy-page {
    --page-primary: #179C99;
    --page-primary-dark: #0B5F5C;
    --page-primary-soft: #F0FBFA;
    --page-line: #DCEDEA;
    --page-ink: #102022;
    --page-muted: #667085;
}

.contact-section,
.policy-section {
    background: transparent;
}

.contact-label,
.policy-label {
    margin: 0 0 10px;
    color: var(--page-primary-dark);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
}

.contact-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
}

.contact-path-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 184px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.2), transparent 10rem),
        #FFFFFF;
    box-shadow: 0 16px 40px rgba(16, 32, 34, 0.07);
    padding: clamp(18px, 2.5vw, 26px);
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.contact-path-card span {
    width: fit-content;
    border-radius: 999px;
    background: var(--page-primary-soft);
    color: var(--page-primary-dark);
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 850;
}

.contact-path-card h2,
.contact-phone-band h2,
.contact-info-panel h2,
.policy-lead-card h2,
.policy-contact-card h2 {
    margin: 0;
    color: var(--page-ink);
    font-size: clamp(20px, 2.3vw, 28px);
    line-height: 1.48;
    letter-spacing: 0;
}

.contact-path-card p,
.contact-phone-band p,
.contact-info-panel li,
.contact-business-link span,
.policy-lead-card p,
.policy-meta dd,
.policy-article-section p,
.policy-article-section li,
.policy-contact-card p {
    margin: 0;
    color: var(--page-muted);
    font-size: 13px;
    line-height: 1.78;
}

.contact-path-card:hover,
.contact-path-card:focus-visible,
.contact-business-link:hover,
.contact-business-link:focus-visible {
    border-color: rgba(23, 156, 153, 0.48);
    box-shadow: 0 20px 50px rgba(23, 156, 153, 0.12);
    transform: translateY(-2px);
}

.contact-phone-band,
.policy-contact-card,
.policy-lead-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(18px, 4vw, 42px);
    align-items: center;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 32px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 209, 102, 0.18), transparent 13rem),
        linear-gradient(135deg, #FFFFFF 0%, #F7FBFA 100%);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.08);
    padding: clamp(22px, 4vw, 34px);
}

.contact-phone-band p:not(.contact-label),
.policy-lead-card p,
.policy-contact-card p {
    max-width: 780px;
    margin-top: 10px;
}

.contact-page-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 42px);
    align-items: start;
}

.contact-page-side {
    display: grid;
    gap: 14px;
}

.contact-info-panel,
.contact-page-form {
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 42px rgba(16, 32, 34, 0.07);
    padding: clamp(20px, 3vw, 28px);
}

.contact-info-panel--soft {
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.18), transparent 12rem),
        var(--page-primary-soft);
}

.contact-info-panel ul {
    display: grid;
    gap: 9px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.contact-info-panel li {
    position: relative;
    padding-left: 18px;
}

.contact-info-panel li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--page-primary);
}

.contact-business-link {
    display: grid;
    gap: 6px;
    border-top: 1px solid rgba(23, 156, 153, 0.16);
    padding: 16px 0;
    color: inherit;
    text-decoration: none;
}

.contact-business-link:first-of-type {
    margin-top: 8px;
}

.contact-business-link:last-child {
    padding-bottom: 0;
}

.contact-business-link strong {
    color: var(--page-ink);
    font-size: 15px;
    line-height: 1.5;
}

.contact-business-link b {
    color: var(--page-primary-dark);
    font-size: 12.5px;
    line-height: 1.5;
}

.contact-page-form .form-grid {
    gap: 14px;
}

.contact-page-form .form-field input,
.contact-page-form .form-field select,
.contact-page-form .form-field textarea {
    border-color: rgba(220, 237, 234, 0.95);
    border-radius: 14px;
    background: #FFFFFF;
}

.contact-page-form .form-field input:focus,
.contact-page-form .form-field select:focus,
.contact-page-form .form-field textarea:focus {
    border-color: rgba(23, 156, 153, 0.72);
    box-shadow: 0 0 0 4px rgba(23, 156, 153, 0.12);
    outline: 0;
}

.form-help {
    color: var(--page-muted);
    font-size: 12px;
    line-height: 1.65;
}

/* Contact page refinement */
.contact-page {
    background:
        radial-gradient(ellipse at 10% 2%, rgba(126, 218, 215, 0.2), transparent 30rem),
        radial-gradient(ellipse at 92% 22%, rgba(255, 209, 102, 0.1), transparent 24rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 48%, #FFFFFF 100%);
}

.contact-page .page-hero {
    background: transparent;
}

.contact-page .page-hero__inner,
.contact-page .section__inner {
    width: min(1120px, calc(100% - 48px));
}

.contact-page .page-hero__inner {
    align-items: center;
    gap: clamp(30px, 5vw, 66px);
}

.contact-page .page-hero h1 {
    color: var(--page-ink);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.18;
    letter-spacing: 0;
}

.contact-page .page-hero__lead {
    max-width: 660px;
    color: var(--page-muted);
    font-size: 14.5px;
    line-height: 1.9;
}

.contact-page .hero-badges span {
    border-color: rgba(23, 156, 153, 0.24);
    background: var(--page-primary-soft);
    color: var(--page-primary-dark);
}

.contact-hero-photo img {
    object-position: center;
}

.contact-hero-photo figcaption {
    max-width: 390px;
}

.contact-section {
    padding-block: clamp(48px, 6vw, 76px);
}

.contact-section + .contact-section {
    padding-top: 0;
}

.contact-intake-panel {
    display: grid;
    grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: stretch;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 32px;
    background:
        radial-gradient(circle at 8% 12%, rgba(126, 218, 215, 0.2), transparent 16rem),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.075);
    padding: clamp(22px, 4vw, 34px);
}

.contact-intake-copy {
    display: grid;
    align-content: center;
    gap: 10px;
}

.contact-intake-copy h2 {
    margin: 0;
    color: var(--page-ink);
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.38;
    letter-spacing: 0;
}

.contact-intake-copy p:not(.contact-label) {
    margin: 0;
    color: var(--page-muted);
    font-size: 13.5px;
    line-height: 1.85;
}

.contact-route-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 24px;
    background: #FFFFFF;
}

.contact-route-row {
    display: grid;
    grid-template-columns: 54px 132px minmax(0, 1fr) 34px;
    gap: 14px;
    align-items: center;
    border-top: 1px solid rgba(220, 237, 234, 0.95);
    color: inherit;
    padding: 18px 20px;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease;
}

.contact-route-row:first-child {
    border-top: 0;
}

.contact-route-row:hover,
.contact-route-row:focus-visible {
    background: var(--page-primary-soft);
    transform: translateX(2px);
    outline: 0;
}

.contact-route-row__number {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    background: var(--page-primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 850;
}

.contact-route-row__label {
    color: var(--page-primary-dark);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.contact-route-row__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.contact-route-row__body strong {
    color: var(--page-ink);
    font-size: 15px;
    line-height: 1.55;
}

.contact-route-row__body small {
    color: var(--page-muted);
    font-size: 12.5px;
    line-height: 1.65;
}

.contact-route-row__arrow {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--page-primary-dark);
    font-size: 17px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(189, 237, 234, 0.95);
}

.contact-phone-band {
    background:
        radial-gradient(circle at 95% 8%, rgba(255, 122, 89, 0.12), transparent 12rem),
        linear-gradient(135deg, #FFFFFF 0%, #F0FBFA 100%);
}

.contact-phone-band .button {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .contact-page .page-hero__inner,
    .contact-intake-panel {
        grid-template-columns: 1fr;
    }

    .contact-route-row {
        grid-template-columns: 50px minmax(0, 1fr) 34px;
        align-items: start;
    }

    .contact-route-row__number {
        grid-row: 1 / 3;
    }

    .contact-route-row__label,
    .contact-route-row__body {
        grid-column: 2;
    }

    .contact-route-row__arrow {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

@media (max-width: 760px) {
    .contact-page .page-hero__inner,
    .contact-page .section__inner {
        width: min(100% - 28px, 1120px);
    }

    .contact-page .page-hero h1 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .contact-page .page-hero__lead,
    .contact-intake-copy p:not(.contact-label) {
        font-size: 12.8px;
        line-height: 1.78;
    }

    .contact-intake-panel {
        border-radius: 22px;
        padding: 18px;
    }

    .contact-intake-copy h2 {
        font-size: 21px;
    }

    .contact-route-list {
        border-radius: 18px;
    }

    .contact-route-row {
        grid-template-columns: 42px minmax(0, 1fr) 30px;
        gap: 10px;
        padding: 15px 14px;
    }

    .contact-route-row__number {
        width: 34px;
        height: 34px;
        font-size: 11px;
    }

    .contact-route-row__body strong {
        font-size: 13.6px;
        line-height: 1.55;
    }

    .contact-route-row__body small {
        font-size: 12px;
        line-height: 1.6;
    }

    .contact-route-row__arrow {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
}

/* Privacy policy page */
.policy-layout--article {
    display: grid;
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 44px);
    align-items: start;
}

.policy-meta {
    display: grid;
    gap: 10px;
    min-width: min(320px, 100%);
    margin: 0;
}

.policy-meta div {
    border: 1px solid rgba(220, 237, 234, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    padding: 14px 16px;
}

.policy-meta dt {
    margin: 0 0 4px;
    color: var(--page-primary-dark);
    font-size: 12px;
    font-weight: 850;
}

.policy-nav {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.06);
    padding: 18px;
}

.policy-nav a {
    border-radius: 14px;
    color: var(--page-ink);
    padding: 9px 10px;
    font-size: 12.8px;
    font-weight: 750;
    line-height: 1.5;
    text-decoration: none;
}

.policy-nav a:hover,
.policy-nav a:focus-visible {
    background: var(--page-primary-soft);
    color: var(--page-primary-dark);
}

.policy-article {
    display: grid;
    gap: 14px;
}

.policy-article-section {
    scroll-margin-top: 110px;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.055);
    padding: clamp(20px, 3vw, 30px);
}

.policy-article-section h2 {
    margin: 0 0 12px;
    color: var(--page-ink);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
    letter-spacing: 0;
}

.policy-article-section ul {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.policy-article-section li {
    position: relative;
    padding-left: 18px;
}

.policy-article-section li::before {
    content: "";
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--page-primary);
}

@media (max-width: 980px) {
    .contact-path-grid,
    .contact-page-layout,
    .policy-layout--article,
    .contact-phone-band,
    .policy-contact-card,
    .policy-lead-card {
        grid-template-columns: 1fr;
    }

    .policy-nav {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .policy-nav .policy-label {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .contact-path-card,
    .contact-phone-band,
    .contact-info-panel,
    .contact-page-form,
    .policy-lead-card,
    .policy-nav,
    .policy-article-section,
    .policy-contact-card {
        border-radius: 22px;
    }

    .contact-section,
    .policy-section {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    .contact-path-card {
        min-height: 0;
    }

    .contact-path-card h2,
    .contact-phone-band h2,
    .contact-info-panel h2,
    .policy-lead-card h2,
    .policy-contact-card h2 {
        font-size: 19px;
        line-height: 1.48;
    }

    .contact-path-card p,
    .contact-phone-band p,
    .contact-info-panel li,
    .contact-business-link span,
    .policy-lead-card p,
    .policy-meta dd,
    .policy-article-section p,
    .policy-article-section li,
    .policy-contact-card p {
        font-size: 12.6px;
        line-height: 1.72;
    }

    .contact-page-form {
        padding: 18px;
    }

    .contact-page-form .form-grid {
        grid-template-columns: 1fr;
    }

    .policy-nav {
        grid-template-columns: 1fr;
    }
}

/* Privacy policy page refinement */
.privacy-policy-page {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(126, 218, 215, 0.16), transparent 30rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 54%, #FFFFFF 100%);
}

.privacy-hero-photo img {
    object-position: center;
}

.privacy-policy-page .policy-section {
    padding-block: clamp(46px, 6vw, 76px);
}

.privacy-policy-page .policy-section + .policy-section {
    padding-top: 0;
}

.privacy-policy-page .policy-lead-card {
    display: grid;
    gap: 22px;
    max-width: 980px;
    margin-inline: auto;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 32px;
    background:
        radial-gradient(circle at 96% 8%, rgba(126, 218, 215, 0.22), transparent 15rem),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.075);
    padding: clamp(24px, 4vw, 38px);
}

.privacy-policy-page .policy-lead-card h2 {
    max-width: 760px;
    margin-top: 0;
}

.privacy-policy-page .policy-lead-card p:not(.policy-label) {
    max-width: 840px;
}

.policy-lead-meta {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.75fr);
    gap: 12px;
    width: min(100%, 720px);
    margin: 0;
}

.policy-lead-meta div {
    min-width: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 13px 15px;
}

.policy-lead-meta dt {
    margin-bottom: 4px;
    color: var(--page-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.policy-lead-meta dd {
    margin: 0;
    color: var(--page-primary-dark);
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.policy-document-layout {
    max-width: 980px;
}

.policy-document {
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.075);
    overflow: hidden;
}

.policy-document .policy-article-section {
    border: 0;
    border-bottom: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 0;
    box-shadow: none;
    padding: clamp(22px, 3.6vw, 34px);
}

.policy-document .policy-article-section:last-child {
    border-bottom: 0;
}

.policy-document .policy-article-section h2 {
    margin-bottom: 10px;
    font-size: clamp(18px, 2.1vw, 25px);
}

.privacy-policy-page .policy-contact-card {
    max-width: 980px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 96% 8%, rgba(126, 218, 215, 0.2), transparent 16rem),
        #FFFFFF;
}

.privacy-policy-page .policy-contact-card .button {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .policy-lead-meta {
        width: 100%;
    }

    .privacy-policy-page .policy-contact-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .privacy-policy-page .policy-section {
        padding-block: 46px;
    }

    .privacy-policy-page .policy-lead-card {
        border-radius: 24px;
        padding: 22px;
    }

    .policy-lead-meta {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .policy-lead-meta div {
        border-radius: 16px;
        padding: 12px 14px;
    }

    .policy-lead-meta dd {
        font-size: 12px;
    }

    .policy-document,
    .privacy-policy-page .policy-contact-card {
        border-radius: 22px;
    }

    .policy-document .policy-article-section {
        padding: 19px;
    }
}

.notice {
    background: var(--color-primary-soft);
}

.notice--danger {
    border-color: rgba(180, 35, 24, 0.28);
    background: #FFF0EE;
}

.notice ul {
    margin: 8px 0 0;
    padding-left: 1.2em;
}

.cta-panel,
.phone-cta,
.fitment-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
}

.phone-cta {
    background: var(--color-dark);
    color: var(--color-background);
}

.phone-cta h2 {
    color: var(--color-background);
}

.phone-cta p {
    color: rgba(255, 255, 255, 0.76);
}

.phone-cta__meta {
    font-weight: 700;
}

.phone-cta__number {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-background);
    padding: 12px 18px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.fitment-result {
    margin-bottom: 18px;
}

.fitment-badge {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.fitment-badge span {
    display: inline-grid;
    min-width: 34px;
    min-height: 22px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 11px;
}

.fitment-badge--ok {
    background: #EAF7F0;
    color: var(--color-success);
}

.fitment-badge--conditional {
    background: #FFF6E5;
    color: var(--color-warning);
}

.fitment-badge--ng {
    background: #FFF0EE;
    color: var(--color-danger);
}

.fitment-badge--unknown {
    background: var(--color-soft);
    color: var(--color-muted);
}

.faq-accordion {
    display: grid;
    gap: 12px;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
}

.faq-item summary {
    min-height: 56px;
    cursor: pointer;
    padding: 16px 18px;
    color: var(--color-dark);
    font-weight: 700;
}

.faq-item div {
    border-top: 1px solid var(--color-border);
    padding: 18px;
}

.faq-item p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.news-card__meta {
    gap: 10px;
    margin-bottom: 12px;
}

.store-card__phone {
    color: var(--color-dark);
    font-weight: 700;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.pagination a,
.pagination span,
.pagination strong {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 8px 12px;
    text-decoration: none;
}

.pagination span {
    color: var(--color-muted);
}

.status-list {
    display: grid;
    gap: 16px;
    margin: 0;
}

.status-list div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
}

.status-list dt {
    color: var(--color-muted);
    font-weight: 700;
}

.status-list dd {
    margin: 0;
}

.text-block {
    max-width: 820px;
}

.compat-search {
    display: grid;
    gap: 24px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.compat-search__header,
.fitment-results__header,
.fitment-card__header,
.fitment-card__actions,
.compatibility-link-layout,
.compatibility-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.compat-search__header h2,
.fitment-results__header h2,
.fitment-card__header h3 {
    margin-bottom: 8px;
}

.fitment-card__header h3 span {
    display: inline-block;
    margin-left: 6px;
    color: var(--color-muted);
    font-size: 16px;
}

.compat-search__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.compat-search__grid--nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compat-search__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.compatibility-notice {
    margin-top: 18px;
}

.fitment-results {
    display: grid;
    gap: 22px;
}

.fitment-results__header {
    align-items: end;
}

.fitment-results__header p:last-child {
    color: var(--color-muted);
    font-weight: 700;
}

.fitment-card-list {
    display: grid;
    gap: 18px;
}

.fitment-card {
    display: grid;
    gap: 22px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.fitment-card__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 0;
}

.fitment-card__meta div {
    min-width: 0;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 14px;
}

.fitment-card__meta div:nth-child(4n) {
    border-right: 0;
}

.fitment-card__meta dt {
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.fitment-card__meta dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 700;
    word-break: break-word;
}

.fitment-card__notes {
    display: grid;
    gap: 7px;
    border-left: 3px solid var(--color-primary);
    background: var(--color-soft);
    padding: 16px 18px;
}

.fitment-card__notes strong {
    color: var(--color-dark);
}

.fitment-card__notes span {
    width: fit-content;
    border: 1px solid rgba(23, 156, 153, 0.28);
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
}

.fitment-card__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.compatibility-empty {
    text-align: left;
}

.compatibility-result-cta {
    margin-top: 24px;
}

.compatibility-link-layout {
    align-items: stretch;
}

.compatibility-link-layout > .text-block {
    flex: 0 0 36%;
}

.compatibility-chip-grid {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.compatibility-chip {
    display: grid;
    min-height: 92px;
    align-content: center;
    gap: 6px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 18px;
    color: var(--color-dark);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.compatibility-chip:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.compatibility-chip span {
    font-size: 18px;
    font-weight: 700;
}

.compatibility-chip small {
    color: var(--color-muted);
    font-weight: 700;
}

.compatibility-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.compatibility-product {
    display: grid;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.compatibility-product .section-actions {
    margin-top: 8px;
}

.compatibility-summary {
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.compatibility-summary > div {
    max-width: 620px;
}

.finder-form {
    display: grid;
    gap: 26px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.finder-fieldset {
    display: grid;
    gap: 16px;
    border: 0;
    margin: 0;
    padding: 0;
}

.finder-fieldset legend {
    margin-bottom: 14px;
    color: var(--color-dark);
    font-size: 18px;
    font-weight: 700;
}

.finder-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.finder-choice-grid--purpose {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finder-choice {
    display: grid;
    min-height: 132px;
    align-content: start;
    gap: 9px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    padding: 16px;
    cursor: pointer;
}

.finder-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* TOP brand color and real image integration */
.home-page {
    --home-ink: var(--oc-ink);
    --home-muted: var(--oc-muted);
    --home-line: var(--oc-line);
    --home-mint: var(--oc-primary-100);
    --home-pale: var(--oc-primary-50);
    --home-soft: var(--oc-bg-soft);
    --home-warm: var(--oc-accent-yellow);
    --home-coral: var(--oc-accent-coral);
    --home-sky: var(--oc-accent-sky);
    background:
        radial-gradient(circle at 88% 8%, rgba(126, 218, 215, 0.28), transparent 30%),
        linear-gradient(180deg, var(--oc-primary-50) 0%, #FFFFFF 26%, var(--oc-bg-soft) 62%, #FFFFFF 100%);
    color: var(--oc-text);
}

.home-page img {
    display: block;
    max-width: 100%;
}

.home-page .button,
.home-page .phone-cta__number {
    min-height: 48px;
    border-radius: 999px;
    font-weight: 800;
}

.home-page .button--primary,
.home-page .phone-cta__number {
    border-color: var(--oc-primary);
    background: var(--oc-primary);
    color: #FFFFFF;
    box-shadow: var(--oc-shadow-primary);
}

.home-page .button--primary:hover,
.home-page .phone-cta__number:hover {
    border-color: var(--oc-primary-700);
    background: var(--oc-primary-700);
}

.home-page .button--secondary,
.home-page .button--ghost {
    border-color: var(--oc-primary-200);
    background: #FFFFFF;
    color: var(--oc-primary-800);
}

.home-page .button--secondary:hover,
.home-page .button--ghost:hover {
    border-color: var(--oc-primary-500);
    background: var(--oc-primary-50);
    color: var(--oc-primary-900);
}

.home-page .button {
    position: relative;
    overflow: hidden;
}

.home-page .phone-cta__number {
    position: relative;
    overflow: hidden;
}

.home-page .button::after,
.home-page .phone-cta__number::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -54%;
    width: 42%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
    transition: left 0.42s ease;
}

.home-page .button:hover::after,
.home-page .phone-cta__number:hover::after {
    left: 112%;
}

.home-section {
    padding-top: 92px;
    padding-bottom: 92px;
}

.home-section .section__header {
    position: relative;
    max-width: 760px;
}

.home-section .section__header::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--oc-primary), var(--oc-primary-300));
}

.home-section .eyebrow,
.home-page .product-card__category,
.home-page .store-card__type,
.home-page .support-card span {
    color: var(--oc-primary-800);
}

.home-guide-grid .support-card,
.home-support-topics .support-card,
.home-official-section .support-card,
.home-store-grid .store-card,
.home-news-section .news-card,
.home-product-grid .product-card,
.home-intent-card,
.home-series-card {
    border: 1px solid var(--oc-line);
    border-radius: var(--oc-radius-lg);
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm);
}

.home-guide-grid .support-card:hover,
.home-support-topics .support-card:hover,
.home-official-section .support-card:hover,
.home-store-grid .store-card:hover,
.home-news-section .news-card:hover,
.home-product-grid .product-card:hover,
.home-intent-card:hover,
.home-series-card:hover {
    border-color: var(--oc-primary-300);
    box-shadow: var(--oc-shadow-md);
}

.home-hero {
    min-height: 780px;
    background:
        radial-gradient(circle at 82% 14%, rgba(114, 214, 255, 0.22), transparent 25%),
        radial-gradient(circle at 10% 18%, rgba(223, 247, 245, 0.92), transparent 34%),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
}

.home-hero__inner {
    min-height: 780px;
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1fr);
}

.home-hero__trust,
.home-hero__badges span {
    border-color: var(--oc-primary-200);
    color: var(--oc-primary-900);
}

.home-hero__trust::before {
    background: var(--oc-primary);
    box-shadow: 0 0 0 7px rgba(23, 156, 153, 0.14);
}

.home-hero__panel--back {
    border-color: var(--oc-primary-200);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(223, 247, 245, 0.8));
}

.home-visual {
    position: relative;
    min-height: 560px;
}

.home-visual__photo {
    position: absolute;
    inset: 64px 0 auto 18px;
    z-index: 2;
    overflow: hidden;
    margin: 0;
    border: 8px solid #FFFFFF;
    border-radius: 38px;
    background: #FFFFFF;
    box-shadow: 0 30px 80px rgba(16, 32, 34, 0.16);
}

.home-visual__photo img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    object-position: center;
}

.home-visual__product {
    position: absolute;
    right: 28px;
    bottom: 42px;
    z-index: 3;
    width: min(176px, 32%);
    overflow: hidden;
    border: 1px solid var(--oc-primary-200);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 22px 54px rgba(16, 32, 34, 0.14);
    padding: 12px;
    animation: homeGentleFloat 7s ease-in-out infinite;
}

.home-visual__product img {
    width: 100%;
    height: 152px;
    border-radius: 22px;
    object-fit: cover;
    object-position: 44% 42%;
}

.home-visual__status {
    position: absolute;
    left: 0;
    bottom: 78px;
    z-index: 4;
    display: grid;
    gap: 2px;
    border: 1px solid var(--oc-primary-200);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(23, 156, 153, 0.13);
    padding: 14px 18px;
}

.home-visual__status span {
    color: var(--oc-primary-700);
    font-size: 12px;
    font-weight: 900;
}

.home-visual__status strong {
    color: var(--oc-ink);
    font-size: 15px;
}

.home-visual__shape {
    position: absolute;
    pointer-events: none;
}

.home-visual__shape--mint {
    inset: 18px 20px 36px 38px;
    border-radius: 44px;
    background: linear-gradient(145deg, rgba(223, 247, 245, 0.9), rgba(255, 255, 255, 0.72));
    clip-path: polygon(7% 0, 100% 8%, 92% 100%, 0 86%);
    box-shadow: 0 24px 70px rgba(23, 156, 153, 0.12);
}

.home-visual__shape--yellow {
    right: 18px;
    top: 22px;
    width: 96px;
    height: 96px;
    border-radius: 32px;
    background: rgba(255, 209, 102, 0.62);
    transform: rotate(12deg);
}

.home-visual__line {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    border-color: var(--oc-primary);
    opacity: 0.78;
}

.home-visual__line--a {
    left: 34px;
    top: 40px;
    width: 44%;
    height: 92px;
    border-top: 4px solid var(--oc-primary);
    border-left: 4px solid var(--oc-primary);
    border-radius: 30px 0 0 0;
    animation: homeCableGrow 1.2s ease 0.45s both;
}

.home-visual__line--b {
    right: 64px;
    bottom: 124px;
    width: 180px;
    height: 76px;
    border-right: 4px solid var(--oc-primary-500);
    border-bottom: 4px solid var(--oc-primary-500);
    border-radius: 0 0 28px 0;
    animation: homeCableGrow 1.2s ease 0.7s both;
}

.home-motion-ready .home-visual {
    animation: homeBrightIn 0.82s ease 0.32s both;
}

.home-fitment-section,
.home-finder-section {
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
}

.home-fitment-panel .search-form {
    border-color: var(--oc-primary-200);
    border-radius: var(--oc-radius-xl);
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 209, 102, 0.18), transparent 24%),
        linear-gradient(145deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
    box-shadow: var(--oc-shadow-primary);
}

.home-fitment-panel .search-form::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background: linear-gradient(180deg, var(--oc-primary), var(--oc-primary-300));
}

.home-fitment-assist {
    border-color: var(--oc-primary-200);
    border-radius: var(--oc-radius-xl);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 122, 89, 0.14), transparent 28%),
        #FFFFFF;
}

.home-fitment-assist__photo {
    overflow: hidden;
    margin: 2px 0 4px;
    border-radius: 22px;
    background: var(--oc-primary-50);
}

.home-fitment-assist__photo img {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
}

.home-fitment-tags > div,
.home-page .filter-chip {
    border-color: var(--oc-primary-200);
}

.home-page .filter-chip {
    background: #FFFFFF;
    color: var(--oc-primary-800);
    font-weight: 800;
}

.home-page .filter-chip:hover {
    border-color: var(--oc-primary);
    background: var(--oc-primary-50);
    color: var(--oc-primary-900);
}

.home-finder-panel {
    border-color: var(--oc-primary-200);
    background:
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
}

.home-intent-card > span {
    background: var(--oc-primary-50);
    box-shadow: inset 0 0 0 1px var(--oc-primary-200);
}

.home-series-section {
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-bg-soft) 100%);
}

.home-series-card {
    border-radius: var(--oc-radius-lg);
}

.home-series-card--featured {
    background:
        radial-gradient(circle at 82% 14%, rgba(255, 209, 102, 0.22), transparent 28%),
        linear-gradient(145deg, var(--oc-primary-50), #FFFFFF);
}

.home-series-card__device {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200);
    background: var(--oc-primary-50);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.home-series-card__device img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-series-card--featured .home-series-card__device img {
    object-position: center;
}

.home-guide-feature,
.home-support-lead,
.home-store-layout {
    display: grid;
    gap: 22px;
    margin-bottom: 28px;
}

.home-guide-feature {
    grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200);
    border-radius: var(--oc-radius-xl);
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm);
    padding: 18px;
}

.home-guide-feature img {
    width: 100%;
    height: 220px;
    border-radius: 24px;
    object-fit: cover;
}

.home-guide-feature h3 {
    margin-bottom: 8px;
    color: var(--oc-ink);
    font-size: 24px;
}

.home-guide-feature p {
    margin: 0;
    color: var(--oc-muted);
}

.home-products-section {
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
}

.home-product-card__media {
    background: var(--oc-primary-50);
}

.home-product-card__media::before,
.home-product-card__media::after {
    content: none;
}

.home-product-card__media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.home-product-card .product-card__category {
    border: 1px solid var(--oc-primary-200);
    border-radius: 999px;
    background: var(--oc-primary-50);
    padding: 4px 10px;
}

.home-support-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 209, 102, 0.18), transparent 28%),
        linear-gradient(180deg, #FFFFFF 0%, #FFFDF7 100%);
}

.home-support-lead {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.35fr);
    align-items: stretch;
}

.home-support-image,
.home-store-image {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200);
    border-radius: var(--oc-radius-xl);
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm);
}

.home-support-image img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}

.home-support-section .phone-cta {
    height: 100%;
    border-color: rgba(255, 122, 89, 0.2);
    box-shadow: var(--oc-shadow-sm);
}

.home-store-section,
.home-news-section,
.home-official-section {
    background: #FFFFFF;
}

.home-store-layout {
    grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
    align-items: stretch;
}

.home-store-image img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    object-position: 100% center;
}

.home-final-section {
    background:
        linear-gradient(180deg, var(--oc-primary-50) 0%, #FFFFFF 100%);
}

.home-final-cta .cta-panel {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 22px;
    border-color: var(--oc-primary-200);
    border-radius: var(--oc-radius-xl);
    padding: 32px;
}

.home-final-cta .cta-panel > div {
    min-width: 0;
}

.home-final-cta .cta-panel p {
    max-width: 100%;
}

.home-final-cta .cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-final-cta .cta-panel:first-child {
    background:
        radial-gradient(circle at 92% 20%, rgba(114, 214, 255, 0.18), transparent 28%),
        linear-gradient(145deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .home-motion-ready .home-visual,
    .home-visual__product,
    .home-visual__line {
        animation: none !important;
    }
}

@media (max-width: 1040px) {
    .home-hero,
    .home-hero__inner {
        min-height: auto;
    }

    .home-hero__inner {
        grid-template-columns: 1fr;
    }

    .home-visual {
        min-height: 520px;
    }

    .home-guide-feature,
    .home-support-lead,
    .home-store-layout {
        grid-template-columns: 1fr;
    }

    .home-store-image img {
        min-height: 220px;
    }
}

@media (max-width: 640px) {
    .home-section {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .home-visual {
        min-height: 380px;
    }

    .home-visual__photo {
        inset: 28px 0 auto;
        border-width: 6px;
        border-radius: 28px;
    }

    .home-visual__photo img {
        height: 258px;
    }

    .home-visual__product {
        right: 10px;
        bottom: 18px;
        width: 124px;
        border-radius: 22px;
        padding: 8px;
    }

    .home-visual__product img {
        height: 108px;
        border-radius: 16px;
    }

    .home-visual__status {
        left: 8px;
        bottom: 36px;
        max-width: calc(100% - 154px);
        border-radius: 18px;
        padding: 10px 12px;
    }

    .home-visual__status strong {
        font-size: 13px;
        line-height: 1.4;
    }

    .home-visual__line--a {
        left: 18px;
        top: 14px;
        height: 50px;
    }

    .home-visual__line--b {
        right: 44px;
        bottom: 90px;
        width: 84px;
        height: 48px;
    }

    .home-guide-feature,
    .home-fitment-panel .search-form,
    .home-fitment-assist,
    .home-support-image,
    .home-store-image {
        border-radius: 24px;
    }

    .home-trust-card h2 {
        font-size: clamp(22px, 6.4vw, 28px);
        line-height: 1.38;
        word-break: keep-all;
    }

    .home-guide-feature img,
    .home-product-card__media img {
        height: 190px;
    }
}

/* TOP cleanup: stabilize layout, frames, and image fit */
.home-page .section__inner,
.home-hero__inner {
    width: min(1180px, calc(100% - 56px));
}

.home-section {
    padding-top: 78px;
    padding-bottom: 78px;
}

.home-fitment-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
        "panel assist"
        "tags assist";
    gap: 24px;
}

.home-fitment-panel {
    grid-area: panel;
}

.home-fitment-assist {
    grid-area: assist;
}

.home-fitment-tags {
    grid-area: tags;
}

.home-fitment-panel .search-form,
.home-fitment-assist,
.home-fitment-tags > div,
.home-guide-feature,
.home-product-grid .product-card,
.home-support-section .phone-cta,
.home-store-image,
.home-store-grid .store-card,
.home-final-cta .cta-panel {
    border-radius: 24px;
}

.home-fitment-assist {
    min-height: 0;
    padding: 24px;
}

.home-fitment-assist__photo {
    height: 164px;
    margin: 0 0 6px;
}

.home-fitment-assist__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.home-fitment-tags {
    margin-top: 0;
}

.home-fitment-panel .search-form__grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
    align-items: end;
}

.home-series-grid {
    grid-template-columns: 1.12fr 0.94fr 0.94fr;
    gap: 20px;
}

.home-series-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    min-height: 230px;
    padding: 22px;
}

.home-series-card--featured {
    grid-template-columns: 1fr;
    min-height: 480px;
    padding: 24px;
}

.home-series-card__device {
    width: 96px;
    height: 96px;
    border-radius: 22px;
}

.home-series-card--featured .home-series-card__device {
    width: 100%;
    height: 190px;
}

.home-series-card--wireless .home-series-card__device img,
.home-series-card--screen .home-series-card__device img,
.home-series-card--box .home-series-card__device img {
    padding: 10px;
    background: #FFFFFF;
    object-fit: contain;
}

.home-series-card--featured .home-series-card__device img,
.home-series-card--expand .home-series-card__device img {
    object-fit: cover;
}

.home-guide-feature {
    grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1fr);
}

.home-guide-feature img {
    height: 190px;
}

.home-products-section .section__lead {
    max-width: 760px;
}

.home-product-card__media img {
    height: 180px;
}

.home-support-lead {
    grid-template-columns: minmax(0, 1fr) 260px;
}

.home-support-section .phone-cta {
    align-items: center;
    min-height: 260px;
    border: 1px solid rgba(255, 122, 89, 0.2);
    background:
        radial-gradient(circle at 92% 14%, rgba(255, 209, 102, 0.28), transparent 28%),
        linear-gradient(135deg, #FFFFFF 0%, #FFF8E8 100%);
    color: var(--oc-text);
    padding: 32px;
}

.home-support-section .phone-cta > * {
    position: relative;
    z-index: 1;
}

.home-support-section .phone-cta .eyebrow {
    color: var(--oc-primary-800);
}

.home-support-section .phone-cta h2 {
    color: var(--oc-ink);
}

.home-support-section .phone-cta p {
    color: var(--oc-muted);
}

.home-support-section .phone-cta__meta {
    display: inline-flex;
    width: fit-content;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(255, 209, 102, 0.34);
    color: var(--oc-primary-900);
    padding: 6px 12px;
}

.home-support-section .phone-cta__number {
    flex: 0 0 auto;
    background: var(--oc-primary);
    color: #FFFFFF;
}

.home-support-image img {
    min-height: 220px;
    object-position: center;
}

.home-store-layout {
    grid-template-columns: 300px minmax(0, 1fr);
}

.home-store-image {
    background: var(--oc-primary-50);
    padding: 18px;
}

.home-store-image img {
    min-height: 220px;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1040px) {
    .home-page .section__inner,
    .home-hero__inner {
        width: min(1180px, calc(100% - 40px));
    }

    .home-fitment-layout,
    .home-series-grid,
    .home-guide-feature,
    .home-support-lead,
    .home-store-layout {
        grid-template-columns: 1fr;
    }

    .home-fitment-layout {
        grid-template-areas:
            "panel"
            "assist"
            "tags";
    }

    .home-fitment-panel .search-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-series-card,
    .home-series-card--featured {
        grid-template-columns: 140px minmax(0, 1fr);
        min-height: 0;
    }

    .home-series-card--featured .home-series-card__device,
    .home-series-card__device {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 640px) {
    .home-page .section__inner,
    .home-hero__inner {
        width: min(1180px, calc(100% - 28px));
    }

    .home-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .home-fitment-panel .search-form__grid {
        grid-template-columns: 1fr;
    }

    .home-fitment-assist__photo,
    .home-guide-feature img,
    .home-product-card__media img,
    .home-store-image img {
        height: 170px;
        min-height: 0;
    }

    .home-series-card,
    .home-series-card--featured {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }

    .home-series-card--featured .home-series-card__device,
    .home-series-card__device {
        width: 100%;
        height: 156px;
    }

    .home-support-lead {
        gap: 16px;
    }

    .home-motion-ready .home-hero__trust,
    .home-motion-ready .home-hero h1 span,
    .home-motion-ready .home-hero__lead,
    .home-motion-ready .home-hero__badges,
    .home-motion-ready .home-hero__actions,
    .home-motion-ready .home-hero__phone-note,
    .home-motion-ready .home-visual {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .home-motion-ready .home-reveal,
    .home-motion-ready .home-reveal .home-reveal-child {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* TOP final readability and interaction pass */
.is-home-page .header-phone-cta small,
.home-page .phone-cta__meta,
.home-page .home-hero__phone-note,
.home-page .home-fitment-assist__time {
    display: none !important;
}

.home-page,
.home-page h1,
.home-page h2,
.home-page h3,
.home-page strong {
    color: var(--oc-ink);
}

.home-page p,
.home-page li,
.home-page .section__lead,
.home-page .support-card p,
.home-page .store-card p,
.home-page .news-card p,
.home-page .product-card p,
.home-page .search-form p {
    color: var(--oc-text) !important;
}

.home-page .eyebrow,
.home-page .support-card span,
.home-page .product-card__category,
.home-page .store-card__type {
    color: var(--oc-primary-800) !important;
}

.home-page .text-link {
    color: var(--oc-primary-800);
}

.home-page .text-link:hover {
    color: var(--oc-primary-900);
}

.home-page .section__header {
    margin-bottom: 34px;
}

.home-page .section__header h2 {
    color: var(--oc-ink);
    letter-spacing: 0;
}

.home-page .section__header p {
    max-width: 720px;
    color: var(--oc-text) !important;
}

.home-page .home-guide-grid .support-card,
.home-page .home-support-topics .support-card,
.home-page .home-official-section .support-card,
.home-page .home-store-grid .store-card,
.home-page .home-news-section .news-card,
.home-page .home-product-grid .product-card,
.home-page .home-intent-card,
.home-page .home-series-card {
    color: var(--oc-text);
}

.home-page .home-support-topics {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
}

.home-page .home-support-topics .support-card {
    min-height: 0;
    background: #FFFFFF;
    padding: 22px;
}

.home-page .home-support-topics .support-card p {
    color: var(--oc-text) !important;
}

.home-page .home-support-topics .support-card h3 {
    color: var(--oc-ink);
}

.home-page .home-visual__photo,
.home-page .home-visual__product {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-motion-ready .home-hero .home-reveal,
.home-motion-ready .home-hero__trust,
.home-motion-ready .home-hero h1 span,
.home-motion-ready .home-hero__lead,
.home-motion-ready .home-hero__badges,
.home-motion-ready .home-hero__actions,
.home-motion-ready .home-hero__phone-note,
.home-motion-ready .home-visual {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.home-page .home-visual.is-tilting .home-visual__photo {
    transform: perspective(900px) rotateX(var(--home-tilt-y, 0deg)) rotateY(var(--home-tilt-x, 0deg));
}

.home-page .home-visual.is-tilting .home-visual__product {
    transform: translate3d(0, -6px, 0) scale(1.02);
}

.home-page .home-finder-layout--interactive {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: 24px;
    align-items: stretch;
}

.home-page .home-finder-main {
    display: grid;
    gap: 22px;
}

.home-page .home-finder-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.home-page .home-intent-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px 16px;
    width: 100%;
    min-height: 150px;
    border: 1px solid var(--oc-primary-200);
    background:
        radial-gradient(circle at 96% 14%, rgba(126, 218, 215, 0.22), transparent 26%),
        #FFFFFF;
    color: var(--oc-text);
    padding: 20px;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.home-page .home-intent-card::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 34%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--oc-primary-300), transparent);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

.home-page .home-intent-card > span {
    grid-row: span 2;
    width: 54px;
    height: 54px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, #FFFFFF, var(--oc-primary-100));
    box-shadow: inset 0 0 0 1px var(--oc-primary-200);
}

.home-page .home-intent-card strong {
    align-self: end;
    color: var(--oc-ink);
    font-size: 19px;
    line-height: 1.5;
}

.home-page .home-intent-card p {
    grid-column: 2;
    margin: 0;
    color: var(--oc-text) !important;
    line-height: 1.75;
}

.home-page .home-intent-card:hover,
.home-page .home-intent-card:focus-visible,
.home-page .home-intent-card.is-active {
    border-color: var(--oc-primary);
    background:
        radial-gradient(circle at 96% 14%, rgba(255, 209, 102, 0.24), transparent 25%),
        linear-gradient(135deg, #FFFFFF, var(--oc-primary-50));
    box-shadow: var(--oc-shadow-primary);
    transform: translateY(-4px);
}

.home-page .home-intent-card:hover::after,
.home-page .home-intent-card:focus-visible::after,
.home-page .home-intent-card.is-active::after {
    opacity: 1;
    transform: translateX(0);
}

.home-page .home-finder-preview {
    position: sticky;
    top: 98px;
    align-self: start;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200);
    border-radius: var(--oc-radius-xl);
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 209, 102, 0.24), transparent 28%),
        linear-gradient(180deg, #FFFFFF, var(--oc-primary-50));
    box-shadow: var(--oc-shadow-sm);
}

.home-page .home-finder-preview::before {
    content: "";
    position: absolute;
    inset: 20px 22px auto auto;
    width: 86px;
    height: 86px;
    border-top: 4px solid var(--oc-primary);
    border-right: 4px solid var(--oc-primary);
    border-radius: 0 26px 0 0;
    opacity: 0.64;
    animation: homeSignalCorner 3.8s ease-in-out infinite;
}

.home-page .home-finder-preview figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-bottom: 1px solid var(--oc-primary-200);
    background: var(--oc-primary-50);
}

.home-page .home-finder-preview img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: opacity 0.22s ease, transform 0.42s ease;
}

.home-page .home-finder-preview:hover img {
    transform: scale(1.035);
}

.home-page .home-finder-preview__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    padding: 24px;
}

.home-page .home-finder-preview h3 {
    margin: 0;
    color: var(--oc-ink);
    font-size: 24px;
}

.home-page .home-finder-preview p {
    margin: 0;
    color: var(--oc-text) !important;
}

.home-page .home-finder-preview ul {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.home-page .home-finder-preview li {
    position: relative;
    color: var(--oc-text) !important;
    padding-left: 24px;
}

.home-page .home-finder-preview li::before {
    content: "";
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--oc-primary);
    box-shadow: 0 0 0 5px var(--oc-primary-100);
    transform: translateY(-50%);
}

.home-page .home-finder-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--oc-primary-200);
    border-radius: var(--oc-radius-lg);
    padding: 24px;
}

.home-page .home-support-section .phone-cta {
    background:
        radial-gradient(circle at 94% 16%, rgba(255, 209, 102, 0.25), transparent 28%),
        linear-gradient(135deg, #FFFFFF 0%, #FFFDF5 100%);
}

.home-page .home-support-section .phone-cta p {
    color: var(--oc-text) !important;
}

.home-page .home-final-cta .cta-panel:first-child,
.home-page .home-final-cta .cta-panel:first-child h2,
.home-page .home-final-cta .cta-panel:first-child p {
    color: var(--oc-ink) !important;
}

@keyframes homeSignalCorner {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.44;
    }
    50% {
        transform: translate3d(-8px, 8px, 0);
        opacity: 0.84;
    }
}

@media (max-width: 1040px) {
    .home-page .home-finder-layout--interactive {
        grid-template-columns: 1fr;
    }

    .home-page .home-finder-preview {
        position: relative;
        top: auto;
    }

    .home-page .home-support-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .home-page .home-finder-flow {
        grid-template-columns: 1fr;
    }

    .home-page .home-intent-card {
        min-height: 0;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 18px;
    }

    .home-page .home-intent-card > span {
        width: 48px;
        height: 48px;
        border-radius: 18px;
    }

    .home-page .home-intent-card p {
        grid-column: 1 / -1;
    }

    .home-page .home-finder-preview img {
        height: 190px;
    }

    .home-page .home-finder-panel {
        display: grid;
    }

    .home-page .home-support-topics {
        grid-template-columns: 1fr;
    }

    .home-page .home-support-section .phone-cta {
        display: grid;
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .home-finder-preview::before,
    .home-page .home-visual__product {
        animation: none !important;
    }

    .home-page .home-intent-card,
    .home-page .home-finder-preview img,
    .home-page .home-visual__photo,
    .home-page .home-visual__product {
        transform: none !important;
        transition: none !important;
    }
}

/* Compatibility responsive and product-specific fitment details */
.fitment-card__conditions {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(23, 156, 153, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 251, 250, 0.95), rgba(255, 255, 255, 0.98));
    padding: 16px 18px;
}

.fitment-card__conditions strong {
    color: #063f3e;
    font-size: 15px;
}

.fitment-card__conditions ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fitment-card__conditions li {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.fitment-card__conditions li span {
    width: fit-content;
    border-radius: 999px;
    background: rgba(23, 156, 153, 0.12);
    color: #0b5f5c;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.fitment-card__conditions li p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.75;
}

@media (max-width: 900px) {
    .compat-search,
    .fitment-card,
    .compatibility-summary,
    .compatibility-product {
        border-radius: 18px;
    }

    .compat-search__grid,
    .compat-search__grid--nav,
    .fitment-card__meta,
    .compatibility-chip-grid,
    .compatibility-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fitment-card__meta div:nth-child(2n),
    .fitment-card__meta div:nth-child(4n) {
        border-right: 0;
    }

    .compatibility-link-layout,
    .compatibility-summary,
    .fitment-results__header {
        flex-direction: column;
    }

    .compatibility-link-layout > .text-block {
        flex-basis: auto;
    }
}

@media (max-width: 640px) {
    .compat-search {
        gap: 18px;
        padding: 20px;
    }

    .compat-search__header,
    .fitment-card__header,
    .fitment-card__actions,
    .compat-search__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .compat-search__header .button,
    .compat-search__actions .button,
    .fitment-card__actions .button,
    .compatibility-empty .button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    .compat-search__grid,
    .compat-search__grid--nav,
    .fitment-card__meta,
    .compatibility-chip-grid,
    .compatibility-product-grid {
        grid-template-columns: 1fr;
    }

    .fitment-card {
        gap: 18px;
        padding: 18px;
        border-radius: 18px;
    }

    .fitment-card__header h3 {
        font-size: 20px;
        line-height: 1.45;
    }

    .fitment-card__header h3 span {
        display: block;
        margin: 6px 0 0;
        font-size: 14px;
    }

    .fitment-card__meta {
        border-radius: 16px;
    }

    .fitment-card__meta div,
    .fitment-card__meta div:nth-child(2n),
    .fitment-card__meta div:nth-child(4n) {
        border-right: 0;
    }

    .fitment-card__meta div:last-child {
        border-bottom: 0;
    }

    .fitment-card__meta dd {
        overflow-wrap: anywhere;
        font-size: 15px;
        line-height: 1.55;
    }

    .fitment-card__notes,
    .fitment-card__conditions {
        border-radius: 16px;
        padding: 14px;
    }

    .fitment-card__conditions li {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .compatibility-chip {
        min-height: auto;
        border-radius: 16px;
        padding: 16px;
    }

    .compatibility-product {
        border-radius: 18px;
        padding: 18px;
    }

    body {
        overflow-x: hidden;
    }
}

/* Product pages refresh: bright car-life tech product information */
.product-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 0%, rgba(223, 247, 245, 0.92), transparent 31rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 46%, #FFFFFF 100%);
}

.product-page .page-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--oc-primary-200, #BDEDEA);
    background:
        radial-gradient(circle at 82% 18%, rgba(114, 214, 255, 0.18), transparent 18rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 72%, #FFFFFF 100%);
}

.product-page .page-hero::after {
    content: "";
    position: absolute;
    right: max(24px, calc((100vw - 1120px) / 2));
    bottom: 40px;
    width: min(340px, 30vw);
    height: 150px;
    border: 3px solid rgba(23, 156, 153, 0.14);
    border-radius: 999px;
    pointer-events: none;
    transform: rotate(-9deg);
}

.product-page .page-hero__inner {
    position: relative;
    z-index: 1;
}

.product-page h1,
.product-page h2,
.product-page h3,
.product-page h4,
.product-page strong {
    color: var(--oc-ink, #102022);
}

.product-page p,
.product-page li,
.product-page .section__lead,
.product-page .page-hero__lead {
    color: var(--oc-muted, #667085);
}

.product-page .eyebrow {
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 6px 12px;
    text-transform: none;
    letter-spacing: 0;
}

.product-page .hero-badges span,
.product-page .product-hero__badges span,
.product-page .included-list span {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.product-page .button {
    border-radius: 999px;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-page .button--primary {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
}

.product-page .button--primary:hover {
    border-color: var(--oc-primary-700, #10817E);
    background: var(--oc-primary-700, #10817E);
    transform: translateY(-2px);
}

.product-page .button--secondary,
.product-page .button--ghost {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.product-page .button--secondary:hover,
.product-page .button--ghost:hover {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-900, #063F3E);
    transform: translateY(-2px);
}

.product-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--oc-primary-200, #BDEDEA);
    background:
        radial-gradient(circle at 82% 10%, rgba(126, 218, 215, 0.38), transparent 20rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 66%, #FFFFFF 100%);
}

.product-hero::before,
.product-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.product-hero::before {
    right: 8%;
    top: 80px;
    width: 170px;
    height: 170px;
    border-radius: 44px;
    background: linear-gradient(135deg, rgba(23, 156, 153, 0.13), rgba(255, 255, 255, 0.66));
    transform: rotate(12deg);
}

.product-hero::after {
    right: max(24px, calc((100vw - 1120px) / 2));
    bottom: 42px;
    width: min(430px, 34vw);
    height: 180px;
    border: 3px solid rgba(23, 156, 153, 0.16);
    border-radius: 999px;
    transform: rotate(-10deg);
}

.product-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(340px, 0.82fr);
    gap: clamp(34px, 6vw, 72px);
    align-items: center;
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(64px, 9vw, 104px) 0 clamp(56px, 8vw, 88px);
}

.product-hero__content {
    min-width: 0;
}

.product-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1.12;
}

.product-hero__lead {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--oc-text, #1F2933);
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.9;
}

.product-hero__badges,
.product-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.product-hero__badges span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 800;
}

.product-hero__visual {
    position: relative;
    min-height: 430px;
}

.product-hero__visual figure {
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: var(--oc-radius-xl, 36px);
    background:
        radial-gradient(circle at 20% 12%, rgba(255, 209, 102, 0.22), transparent 24%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    padding: 18px;
}

.product-hero__visual figure::before {
    content: "";
    position: absolute;
    inset: 20px 24px 32px 28px;
    border: 3px solid rgba(23, 156, 153, 0.12);
    border-radius: 34px;
    pointer-events: none;
}

.product-hero__visual img {
    display: block;
    width: 100%;
    height: min(380px, 46vw);
    border-radius: 28px;
    object-fit: cover;
    object-position: center;
}

.product-hero__check {
    position: absolute;
    z-index: 3;
    left: -18px;
    bottom: 26px;
    display: grid;
    gap: 4px;
    max-width: min(280px, 80%);
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(23, 156, 153, 0.15);
    padding: 14px 18px;
}

.product-hero__check span {
    color: var(--oc-primary-700, #10817E);
    font-size: 12px;
    font-weight: 900;
}

.product-hero__check strong {
    font-size: 16px;
}

.product-hero__stats {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: -18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(320px, 78%);
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(23, 156, 153, 0.14);
    padding: 12px;
    backdrop-filter: blur(12px);
}

.product-hero__stats div {
    border-radius: 16px;
    background: var(--oc-primary-50, #F0FBFA);
    padding: 10px 12px;
}

.product-hero__stats span {
    display: block;
    color: var(--oc-muted, #667085);
    font-size: 11px;
    font-weight: 800;
}

.product-hero__stats strong {
    display: block;
    margin-top: 2px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 15px;
}

.product-page .product-tabs {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.product-page .product-tab,
.product-page .purpose-filter,
.product-page .product-search,
.product-page .empty-state,
.product-page .product-detail-note,
.product-page .product-check-panel,
.product-page .product-card,
.product-page .text-block,
.product-page .cta-panel,
.product-page .phone-cta {
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 26px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.product-page .product-tab,
.product-page .purpose-filter {
    min-height: 118px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-page .product-tab span,
.product-page .purpose-filter span {
    color: var(--oc-ink, #102022);
}

.product-page .product-tab:hover,
.product-page .product-tab.is-active,
.product-page .purpose-filter:hover,
.product-page .purpose-filter.is-active {
    border-color: var(--oc-primary, #179C99);
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
    transform: translateY(-2px);
}

.product-page .product-search {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr) auto;
    background:
        radial-gradient(circle at 94% 12%, rgba(255, 209, 102, 0.16), transparent 28%),
        linear-gradient(135deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.product-page .form-field input,
.product-page .form-field select,
.product-page .form-field textarea {
    min-height: 50px;
    border-color: var(--oc-line, #DCEDEA);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--oc-text, #1F2933);
}

.product-page .form-field input:focus,
.product-page .form-field select:focus,
.product-page .form-field textarea:focus {
    outline: 0;
    border-color: var(--oc-primary, #179C99);
    box-shadow: 0 0 0 4px rgba(23, 156, 153, 0.14);
}

.product-page .purpose-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.product-page .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.product-page .product-card {
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-page .product-card:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-3px);
}

.product-page .product-card__media {
    position: relative;
    overflow: hidden;
    border-bottom-color: var(--oc-primary-200, #BDEDEA);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 209, 102, 0.2), transparent 25%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.product-page .product-card__media::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 86px;
    height: 42px;
    border: 3px solid rgba(23, 156, 153, 0.12);
    border-radius: 999px;
    pointer-events: none;
}

.product-page .product-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease;
}

.product-page .product-card:hover .product-card__media img {
    transform: scale(1.035);
}

.product-page .product-card__category {
    color: var(--oc-primary-800, #0B5F5C);
}

.product-page .product-card__features {
    padding-left: 0;
    list-style: none;
}

.product-page .product-card__features li {
    position: relative;
    padding-left: 18px;
}

.product-page .product-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oc-primary, #179C99);
}

.product-page .text-link {
    color: var(--oc-primary-800, #0B5F5C);
    font-weight: 800;
}

.product-page .product-detail-lead {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
}

.product-page .product-detail-copy,
.product-page .product-advice-card {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: clamp(22px, 3vw, 30px);
}

.product-page .product-detail-note {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 209, 102, 0.18), transparent 38%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.product-page .feature-list-item,
.product-page .step-list div {
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.product-page .feature-list-item span,
.product-page .step-list span {
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
}

.product-page .product-check-panel {
    gap: 20px;
    background:
        linear-gradient(135deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.product-page .product-check-panel ul {
    padding-left: 0;
    list-style: none;
}

.product-page .product-check-panel li {
    position: relative;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 13px 16px 13px 42px;
    color: var(--oc-text, #1F2933);
    font-weight: 700;
}

.product-page .product-check-panel li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 17px;
    width: 12px;
    height: 7px;
    border-left: 3px solid var(--oc-primary, #179C99);
    border-bottom: 3px solid var(--oc-primary, #179C99);
    transform: rotate(-45deg);
}

.product-page .spec-table {
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 26px;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.product-page .spec-table div {
    border-bottom-color: var(--oc-line, #DCEDEA);
}

.product-page .spec-table dt {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
}

.product-page .included-list span {
    min-height: 42px;
    font-weight: 800;
}

.product-detail-page--p3-pro .product-hero {
    background:
        radial-gradient(circle at 84% 12%, rgba(255, 209, 102, 0.18), transparent 18rem),
        radial-gradient(circle at 8% 18%, rgba(126, 218, 215, 0.32), transparent 22rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 68%, #FFFFFF 100%);
}

.product-detail-page--p3-pro .product-hero__visual figure {
    background:
        radial-gradient(circle at 20% 12%, rgba(255, 209, 102, 0.22), transparent 26%),
        radial-gradient(circle at 80% 88%, rgba(114, 214, 255, 0.12), transparent 30%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.product-detail-page--p3-pro .product-hero__visual img {
    object-fit: contain;
    background: #FFFFFF;
}

.product-detail-page--p3-pro.p3-has-js .product-hero__content > *,
.product-detail-page--p3-pro.p3-has-js .product-hero__visual {
    opacity: 0;
    animation: p3HeroIn 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.product-detail-page--p3-pro.p3-has-js .product-hero__content > *:nth-child(1) {
    animation-delay: 60ms;
}

.product-detail-page--p3-pro.p3-has-js .product-hero__content > *:nth-child(2) {
    animation-delay: 150ms;
}

.product-detail-page--p3-pro.p3-has-js .product-hero__content > *:nth-child(3) {
    animation-delay: 240ms;
}

.product-detail-page--p3-pro.p3-has-js .product-hero__content > *:nth-child(4) {
    animation-delay: 330ms;
}

.product-detail-page--p3-pro.p3-has-js .product-hero__content > *:nth-child(5) {
    animation-delay: 420ms;
}

.product-detail-page--p3-pro.p3-has-js .product-hero__visual {
    animation-delay: 280ms;
}

.product-detail-page--p3-pro .product-hero__visual figure::before {
    animation: p3HeroRing 9s ease-in-out infinite;
}

.product-detail-page--p3-pro.p3-has-js [data-p3-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--p3-delay, 0ms),
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--p3-delay, 0ms);
}

.product-detail-page--p3-pro.p3-has-js [data-p3-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.p3-scroll-story {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 10% 10%, rgba(126, 218, 215, 0.28), transparent 22rem),
        radial-gradient(circle at 90% 50%, rgba(255, 209, 102, 0.12), transparent 18rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
    padding: clamp(72px, 9vw, 128px) 0;
}

.p3-scroll-story::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}

.p3-scroll-story__inner {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

.p3-scroll-story__header {
    max-width: 780px;
    margin-bottom: clamp(34px, 5vw, 58px);
}

.p3-scroll-story__header h2 {
    margin: 14px 0 14px;
    color: var(--oc-ink, #102022);
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.16;
    letter-spacing: 0;
}

.p3-scroll-story__header p:not(.eyebrow) {
    color: var(--oc-text, #1F2933);
    font-size: 17px;
    line-height: 1.9;
}

.p3-scroll-story__body {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.p3-scroll-story__rail {
    position: sticky;
    top: 108px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 18px;
    min-height: 320px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 20px;
}

.p3-scroll-story__progress {
    overflow: hidden;
    width: 8px;
    min-height: 270px;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
}

.p3-scroll-story__progress span {
    display: block;
    width: 100%;
    height: 25%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--oc-primary, #179C99), var(--oc-primary-700, #10817E));
    transition: height 420ms ease;
}

.p3-scroll-story__status {
    align-self: end;
}

.p3-scroll-story__status span {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-weight: 900;
}

.p3-scroll-story__status strong {
    display: block;
    margin-top: 14px;
    color: var(--oc-ink, #102022);
    line-height: 1.5;
}

.p3-scroll-story__chapters {
    display: grid;
    gap: clamp(26px, 5vw, 56px);
}

.p3-scroll-chapter {
    display: grid;
    grid-template-columns: minmax(320px, 0.56fr) minmax(0, 0.44fr);
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    min-height: clamp(560px, 72vh, 760px);
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: clamp(28px, 4vw, 44px);
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 209, 102, 0.14), transparent 26%),
        rgba(255, 255, 255, 0.92);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: clamp(16px, 3vw, 32px);
    transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.p3-scroll-chapter:nth-child(even) {
    grid-template-columns: minmax(0, 0.44fr) minmax(320px, 0.56fr);
    background:
        radial-gradient(circle at 12% 16%, rgba(126, 218, 215, 0.22), transparent 30%),
        rgba(255, 255, 255, 0.92);
}

.p3-scroll-chapter:nth-child(even) figure {
    order: 2;
}

.p3-scroll-chapter.is-active {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
}

.p3-scroll-chapter figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: clamp(24px, 4vw, 36px);
    background: var(--oc-primary-50, #F0FBFA);
}

.p3-scroll-chapter figure::after {
    content: "";
    position: absolute;
    inset: auto 22px 22px auto;
    width: 130px;
    height: 54px;
    border: 3px solid rgba(23, 156, 153, 0.18);
    border-radius: 999px;
}

.p3-scroll-chapter img {
    display: block;
    width: 100%;
    height: clamp(360px, 50vw, 610px);
    object-fit: cover;
    transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.p3-scroll-chapter.is-active img {
    transform: scale(1.035);
}

.p3-scroll-chapter__copy span {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-weight: 900;
}

.p3-scroll-chapter__copy h3 {
    margin: 20px 0 14px;
    color: var(--oc-ink, #102022);
    font-size: clamp(28px, 4.2vw, 48px);
    line-height: 1.18;
    letter-spacing: 0;
}

.p3-scroll-chapter__copy p {
    color: var(--oc-text, #1F2933);
    font-size: 16px;
    line-height: 1.9;
}

.p3-scroll-chapter__copy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.p3-scroll-chapter__copy li {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
}

.p3-pro-showcase {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 6%, rgba(255, 209, 102, 0.16), transparent 18rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
}

.p3-pro-showcase::before {
    content: "";
    position: absolute;
    left: max(24px, calc((100vw - 1120px) / 2));
    top: 78px;
    width: 118px;
    height: 118px;
    border: 18px solid rgba(23, 156, 153, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.p3-pro-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 18px;
}

.p3-pro-gallery--single {
    grid-template-columns: 1fr;
}

.p3-pro-gallery-card {
    display: grid;
    grid-template-columns: minmax(130px, 0.42fr) minmax(0, 0.58fr);
    gap: 18px;
    align-items: center;
    min-height: 230px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 16px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.p3-pro-gallery-card:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-3px);
}

.p3-pro-gallery-card--wide {
    grid-row: span 3;
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 100%;
}

.p3-pro-gallery--single .p3-pro-gallery-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(320px, 0.42fr);
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
}

.p3-pro-gallery-card figure {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 24px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 209, 102, 0.2), transparent 28%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.p3-pro-gallery-card img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: contain;
    transition: transform 240ms ease;
}

.p3-pro-gallery-card--wide img {
    height: min(520px, 44vw);
    min-height: 360px;
}

.p3-pro-gallery--single .p3-pro-gallery-card--wide img {
    height: min(620px, 54vw);
    min-height: 460px;
    object-fit: contain;
}

.p3-pro-gallery-card:hover img {
    transform: scale(1.025);
}

.p3-pro-gallery-card span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
}

.p3-pro-gallery-card h3 {
    margin: 12px 0 8px;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.32;
}

.p3-pro-gallery-card:not(.p3-pro-gallery-card--wide) h3 {
    font-size: 20px;
}

.p3-pro-gallery-card p {
    margin: 0;
    color: var(--oc-text, #1F2933);
    line-height: 1.85;
}

.p3-pro-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.p3-pro-highlight-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 209, 102, 0.16), transparent 34%),
        #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 26px;
}

.p3-pro-highlight-card::after {
    content: "";
    position: absolute;
    right: -26px;
    bottom: -30px;
    width: 108px;
    height: 108px;
    border: 16px solid rgba(23, 156, 153, 0.08);
    border-radius: 50%;
}

.p3-pro-highlight-card span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-weight: 900;
}

.p3-pro-highlight-card h3 {
    margin: 18px 0 10px;
    font-size: 21px;
}

.p3-pro-highlight-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 1.85;
}

.p3-pro-feature-board {
    display: grid;
    gap: 22px;
}

.p3-pro-feature-panel {
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 32px;
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 209, 102, 0.16), transparent 24%),
        #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: clamp(16px, 2.6vw, 26px);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.p3-pro-feature-panel--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
}

.p3-pro-feature-panel--reverse figure {
    order: 2;
}

.p3-pro-feature-panel:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-2px);
}

.p3-pro-feature-panel figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 16%, rgba(126, 218, 215, 0.24), transparent 28%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.p3-pro-feature-panel figure::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 108px;
    height: 52px;
    border: 3px solid rgba(23, 156, 153, 0.16);
    border-radius: 999px;
    pointer-events: none;
}

.p3-pro-feature-panel img {
    display: block;
    width: 100%;
    height: clamp(260px, 34vw, 410px);
    object-fit: cover;
    object-position: center;
    transition: transform 260ms ease;
}

.p3-pro-feature-panel:hover img {
    transform: scale(1.025);
}

.p3-pro-feature-panel__body h3 {
    margin: 14px 0 12px;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.34;
}

.p3-pro-feature-panel__body > p:not(.eyebrow) {
    color: var(--oc-text, #1F2933);
    line-height: 1.95;
}

.p3-pro-feature-panel__body ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.p3-pro-feature-panel__body li {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
}

.p3-pro-detail-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-top: 24px;
    border: 1px solid var(--oc-primary, #179C99);
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    padding: 10px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.p3-pro-detail-trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.p3-pro-detail-trigger:hover,
.p3-pro-detail-trigger:focus-visible {
    border-color: var(--oc-primary-700, #10817E);
    background: var(--oc-primary-700, #10817E);
    transform: translateY(-2px);
}

.p3-pro-detail-trigger:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.22);
    outline-offset: 3px;
}

.p3-pro-detail-trigger--light {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    box-shadow: none;
}

.p3-pro-detail-trigger--light:hover,
.p3-pro-detail-trigger--light:focus-visible {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-900, #063F3E);
}

.p3-pro-deep-section {
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 209, 102, 0.16), transparent 18rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-bg-soft, #F7FBFA) 100%);
}

.p3-pro-deep-grid {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 18px;
}

.p3-pro-deep-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.p3-pro-deep-card:first-child {
    grid-row: span 2;
}

.p3-pro-deep-card:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-3px);
}

.p3-pro-deep-card figure {
    overflow: hidden;
    margin: 0;
    background: var(--oc-primary-50, #F0FBFA);
}

.p3-pro-deep-card img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 280ms ease;
}

.p3-pro-deep-card:first-child img {
    height: 430px;
}

.p3-pro-deep-card:hover img {
    transform: scale(1.025);
}

.p3-pro-deep-card > div {
    padding: 24px;
}

.p3-pro-deep-card span {
    display: inline-flex;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 900;
}

.p3-pro-deep-card h3 {
    margin: 14px 0 10px;
    color: var(--oc-ink, #102022);
    font-size: clamp(21px, 2.6vw, 31px);
    line-height: 1.35;
}

.p3-pro-deep-card p {
    margin: 0;
    color: var(--oc-text, #1F2933);
    line-height: 1.85;
}

.p3-pro-app-section {
    background:
        radial-gradient(circle at 88% 8%, rgba(114, 214, 255, 0.12), transparent 17rem),
        linear-gradient(180deg, var(--oc-primary-50, #F0FBFA) 0%, #FFFFFF 100%);
}

.p3-pro-app-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 36px;
    background:
        radial-gradient(circle at 16% 16%, rgba(255, 209, 102, 0.18), transparent 26%),
        rgba(255, 255, 255, 0.9);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: clamp(20px, 4vw, 38px);
}

.p3-pro-app-screen {
    position: relative;
    min-height: 370px;
    border: 12px solid var(--oc-ink, #102022);
    border-radius: 38px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.74) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.74) 1px, transparent 1px),
        linear-gradient(135deg, var(--oc-primary-900, #063F3E), var(--oc-primary, #179C99));
    background-size: 42px 42px, 42px 42px, auto;
    box-shadow: 0 24px 54px rgba(16, 32, 34, 0.18);
}

.p3-pro-app-screen span,
.p3-pro-app-screen i,
.p3-pro-app-screen b {
    position: absolute;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.12);
}

.p3-pro-app-screen span {
    left: 26px;
    top: 32px;
    width: 45%;
    height: 118px;
}

.p3-pro-app-screen i {
    right: 24px;
    top: 48px;
    width: 34%;
    height: 158px;
}

.p3-pro-app-screen b {
    left: 38px;
    right: 38px;
    bottom: 34px;
    height: 92px;
}

.p3-pro-app-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.p3-pro-app-tile {
    display: grid;
    min-height: 118px;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: #FFFFFF;
    color: var(--oc-primary-900, #063F3E);
    padding: 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.06);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.p3-pro-app-tile:hover,
.p3-pro-app-tile:focus-visible {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
    transform: translateY(-4px) rotate(-1deg);
}

.p3-pro-app-tile:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.22);
    outline-offset: 3px;
}

.p3-pro-safety-note {
    margin: 16px 0 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    line-height: 1.8;
}

.p3-pro-flow-section {
    background:
        radial-gradient(circle at 8% 14%, rgba(114, 214, 255, 0.13), transparent 18rem),
        linear-gradient(180deg, var(--oc-primary-50, #F0FBFA) 0%, #FFFFFF 100%);
}

.p3-pro-connection-flow {
    display: grid;
    grid-template-columns: minmax(360px, 0.94fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 44px);
    align-items: center;
}

.p3-pro-connection-flow__visual {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 42% 42%, rgba(255, 209, 102, 0.16), transparent 24%),
        #FFFFFF;
    background-size: 34px 34px, 34px 34px, auto, auto;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.p3-pro-flow-device {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 168px;
    height: 168px;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 20px 42px rgba(23, 156, 153, 0.18);
    transform: translate(-50%, -50%);
}

.p3-pro-flow-device img {
    width: 136px;
    height: 136px;
    object-fit: contain;
}

.p3-pro-flow-device span {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 24px;
    font-weight: 900;
}

.p3-pro-flow-node {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 132px;
    min-height: 82px;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.p3-pro-flow-node span {
    color: var(--oc-primary-800, #0B5F5C);
    font-weight: 900;
}

.p3-pro-flow-node--car {
    left: 32px;
    top: 64px;
}

.p3-pro-flow-node--phone {
    right: 32px;
    top: 62px;
}

.p3-pro-flow-node--monitor {
    right: 56px;
    bottom: 58px;
}

.p3-pro-flow-line {
    position: absolute;
    z-index: 1;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--oc-primary, #179C99), transparent);
    opacity: 0.78;
}

.p3-pro-flow-line--one {
    left: 142px;
    top: 132px;
    width: 220px;
    transform: rotate(17deg);
}

.p3-pro-flow-line--two {
    right: 132px;
    top: 142px;
    width: 210px;
    transform: rotate(-16deg);
}

.p3-pro-flow-signal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 282px;
    height: 282px;
    border: 2px solid rgba(23, 156, 153, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: p3SignalPulse 4.5s ease-in-out infinite;
}

.p3-pro-connection-flow__steps {
    display: grid;
    gap: 14px;
}

.p3-pro-connection-flow__steps article {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 20px;
}

.p3-pro-connection-flow__steps span {
    display: inline-flex;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
}

.p3-pro-connection-flow__steps h3 {
    margin: 10px 0 7px;
    font-size: 19px;
}

.p3-pro-connection-flow__steps p {
    margin: 0;
    line-height: 1.8;
}

.p3-pro-check-layout,
.p3-pro-spec-layout,
.p3-pro-package-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.44fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 30px);
    align-items: start;
}

.p3-pro-check-layout--text {
    grid-template-columns: 1fr;
}

.p3-pro-check-layout figure,
.p3-pro-spec-visual,
.p3-pro-package-layout figure {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 30px;
    background:
        radial-gradient(circle at 20% 16%, rgba(255, 209, 102, 0.18), transparent 28%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.p3-pro-check-layout img,
.p3-pro-package-layout img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.p3-pro-check-cards,
.p3-pro-package-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.p3-pro-check-cards article,
.p3-pro-package-notes article {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 20px;
}

.p3-pro-check-cards span {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-weight: 900;
}

.p3-pro-check-cards h3,
.p3-pro-package-notes h3 {
    margin: 12px 0 8px;
    font-size: 18px;
}

.p3-pro-check-cards p,
.p3-pro-package-notes p {
    margin: 0;
    line-height: 1.8;
}

.p3-pro-spec-layout {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.38fr);
}

.p3-pro-spec-visual {
    position: sticky;
    top: 92px;
    padding: 18px;
}

.p3-pro-spec-visual figure {
    margin: 0;
}

.p3-pro-spec-visual img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: contain;
}

.p3-pro-spec-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.p3-pro-spec-badges span {
    display: grid;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 10px;
    font-weight: 900;
}

.p3-pro-spec-badges small {
    color: var(--oc-muted, #667085);
    font-size: 11px;
    font-weight: 800;
}

.p3-pro-package-layout {
    grid-template-columns: minmax(300px, 0.5fr) minmax(0, 1fr);
}

.p3-pro-package-layout img {
    object-fit: contain;
    padding: 16px;
}

.p3-pro-package-notes {
    grid-template-columns: 1fr;
}

.p3-pro-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.p3-pro-usage-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.p3-pro-usage-grid article::before {
    content: "";
    position: absolute;
    right: -36px;
    top: -42px;
    width: 132px;
    height: 132px;
    border: 18px solid rgba(23, 156, 153, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.p3-pro-usage-grid article::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 20px;
    width: 84px;
    height: 42px;
    border: 3px solid rgba(23, 156, 153, 0.12);
    border-radius: 999px;
    pointer-events: none;
}

.p3-pro-usage-grid article:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-2px);
}

.p3-pro-usage-grid figure {
    overflow: hidden;
    margin: 0;
    background: var(--oc-primary-50, #F0FBFA);
}

.p3-pro-usage-grid img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.p3-pro-usage-grid div {
    position: relative;
    z-index: 1;
    padding: 22px;
}

.p3-pro-usage-grid span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-weight: 900;
}

.p3-pro-usage-grid h3 {
    margin: 14px 0 9px;
    font-size: 20px;
}

.p3-pro-usage-grid p {
    margin: 0;
    line-height: 1.85;
}

@keyframes p3SignalPulse {
    0%, 100% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.96);
    }

    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes p3HeroIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes p3HeroRing {
    0%, 100% {
        transform: scale(0.98);
        opacity: 0.38;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.7;
    }
}

.p3-pro-compare {
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.p3-pro-compare__head,
.p3-pro-compare__row {
    display: grid;
    grid-template-columns: minmax(170px, 0.9fr) repeat(2, minmax(150px, 1fr));
    align-items: center;
}

.p3-pro-compare__head span,
.p3-pro-compare__row span,
.p3-pro-compare__row strong {
    min-width: 0;
    padding: 17px 20px;
}

.p3-pro-compare__head {
    background: var(--oc-primary-900, #063F3E);
}

.p3-pro-compare__head span {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
}

.p3-pro-compare__row + .p3-pro-compare__row {
    border-top: 1px solid var(--oc-line, #DCEDEA);
}

.p3-pro-compare__row span:first-child {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    font-weight: 900;
}

.p3-pro-compare__row strong {
    color: var(--oc-primary-800, #0B5F5C);
}

.p3-pro-compare__note {
    margin: 14px 0 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
}

.p3-modal-open {
    overflow: hidden;
}

.p3-product-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.p3-product-modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.p3-product-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 34, 0.58);
    backdrop-filter: blur(8px);
}

.p3-product-modal__dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 32px;
    background:
        radial-gradient(circle at 86% 10%, rgba(255, 209, 102, 0.16), transparent 12rem),
        #FFFFFF;
    box-shadow: 0 26px 80px rgba(16, 32, 34, 0.28);
    padding: clamp(24px, 5vw, 40px);
    transform: translateY(14px) scale(0.98);
    transition: transform 200ms ease;
}

.p3-product-modal[aria-hidden="false"] .p3-product-modal__dialog {
    transform: translateY(0) scale(1);
}

.p3-product-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-900, #063F3E);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.p3-product-modal__dialog h2 {
    margin: 16px 42px 12px 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(25px, 4vw, 36px);
    line-height: 1.28;
}

.p3-product-modal__dialog p:not(.eyebrow) {
    color: var(--oc-text, #1F2933);
    line-height: 1.9;
}

.p3-product-modal__dialog ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.p3-product-modal__dialog li {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 900px) {
    .product-hero__inner {
        grid-template-columns: 1fr;
    }

    .product-hero__visual {
        min-height: auto;
    }

    .product-page .product-search,
    .product-page .product-detail-lead {
        grid-template-columns: 1fr;
    }

    .product-page .feature-list-grid {
        grid-template-columns: 1fr;
    }

    .p3-pro-gallery,
    .p3-pro-highlight-grid {
        grid-template-columns: 1fr;
    }

    .p3-scroll-story__body,
    .p3-scroll-chapter,
    .p3-scroll-chapter:nth-child(even),
    .p3-pro-deep-grid,
    .p3-pro-app-shell,
    .p3-pro-feature-panel,
    .p3-pro-feature-panel--reverse,
    .p3-pro-connection-flow,
    .p3-pro-check-layout,
    .p3-pro-spec-layout,
    .p3-pro-package-layout,
    .p3-pro-check-cards,
    .p3-pro-usage-grid {
        grid-template-columns: 1fr;
    }

    .p3-scroll-story__rail {
        display: none;
    }

    .p3-scroll-story__progress {
        width: 100%;
        min-height: 8px;
        height: 8px;
    }

    .p3-scroll-story__progress span {
        width: 25%;
        height: 100%;
    }

    .p3-scroll-chapter,
    .p3-scroll-chapter:nth-child(even) {
        min-height: auto;
    }

    .p3-scroll-chapter:nth-child(even) figure {
        order: 0;
    }

    .p3-pro-deep-card:first-child {
        grid-row: auto;
    }

    .p3-pro-app-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .p3-pro-feature-panel--reverse figure {
        order: 0;
    }

    .p3-pro-spec-visual {
        position: relative;
        top: auto;
    }

    .p3-pro-gallery-card--wide {
        grid-row: auto;
    }

    .p3-pro-gallery--single .p3-pro-gallery-card--wide {
        grid-template-columns: 1fr;
    }

    .p3-pro-gallery-card--wide img {
        height: 360px;
        min-height: 0;
    }

    .p3-pro-deep-card:first-child img {
        height: 300px;
    }
}

@media (max-width: 640px) {
    .product-page .page-hero__inner,
    .product-hero__inner,
    .product-page .section__inner {
        width: min(1120px, calc(100% - 28px));
    }

    .product-page .page-hero::after,
    .product-hero::before,
    .product-hero::after {
        opacity: 0.36;
    }

    .product-page .page-hero h1,
    .product-hero h1 {
        font-size: 32px;
    }

    .product-hero__actions,
    .product-page .page-hero__actions,
    .product-page .product-search__actions,
    .product-page .cta-panel__actions {
        align-items: stretch;
    }

    .product-hero__actions .button,
    .product-page .page-hero__actions .button,
    .product-page .product-search__actions .button,
    .product-page .cta-panel__actions .button,
    .product-page .phone-cta__number {
        width: 100%;
        min-height: 48px;
        white-space: normal;
        text-align: center;
    }

    .product-hero__visual img {
        height: 250px;
    }

    .product-hero__check {
        position: relative;
        left: auto;
        bottom: auto;
        max-width: 100%;
        margin-top: 12px;
    }

    .product-hero__stats {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 12px;
    }

    .product-page .product-tabs,
    .product-page .purpose-filter-grid,
    .product-page .product-grid {
        grid-template-columns: 1fr;
    }

    .product-page .product-card__media img {
        min-height: 200px;
    }

    .product-page .spec-table div {
        grid-template-columns: 1fr;
    }

    .p3-pro-gallery-card {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .p3-pro-gallery-card img,
    .p3-pro-gallery-card--wide img {
        height: 260px;
    }

    .p3-pro-gallery--single .p3-pro-gallery-card--wide img {
        height: 300px;
        min-height: 0;
    }

    .p3-scroll-story {
        padding: 60px 0;
    }

    .p3-scroll-story__inner {
        width: min(1120px, calc(100% - 28px));
    }

    .p3-scroll-story__header h2 {
        font-size: 30px;
    }

    .p3-scroll-story__rail {
        padding: 16px;
    }

    .p3-scroll-chapter {
        border-radius: 26px;
        padding: 14px;
    }

    .p3-scroll-chapter img {
        height: 280px;
    }

    .p3-scroll-chapter__copy h3 {
        font-size: 25px;
    }

    .p3-pro-deep-card img,
    .p3-pro-deep-card:first-child img {
        height: 250px;
    }

    .p3-pro-app-screen {
        min-height: 270px;
        border-width: 9px;
        border-radius: 30px;
    }

    .p3-pro-app-tiles {
        grid-template-columns: 1fr;
    }

    .p3-pro-app-tile {
        min-height: 76px;
    }

    .p3-pro-feature-panel {
        border-radius: 26px;
        padding: 14px;
    }

    .p3-pro-feature-panel img {
        height: 260px;
    }

    .p3-pro-feature-panel__body h3 {
        font-size: 24px;
    }

    .p3-pro-connection-flow__visual {
        min-height: 360px;
    }

    .p3-pro-flow-device {
        width: 130px;
        height: 130px;
    }

    .p3-pro-flow-device img {
        width: 104px;
        height: 104px;
    }

    .p3-pro-flow-node {
        width: 112px;
        min-height: 68px;
        border-radius: 20px;
        font-size: 13px;
    }

    .p3-pro-flow-node--car {
        left: 14px;
        top: 52px;
    }

    .p3-pro-flow-node--phone {
        right: 14px;
        top: 54px;
    }

    .p3-pro-flow-node--monitor {
        right: 22px;
        bottom: 42px;
    }

    .p3-pro-flow-line--one {
        left: 96px;
        top: 116px;
        width: 130px;
    }

    .p3-pro-flow-line--two {
        right: 92px;
        top: 116px;
        width: 128px;
    }

    .p3-pro-flow-signal {
        width: 210px;
        height: 210px;
    }

    .p3-pro-check-layout img,
    .p3-pro-package-layout img {
        min-height: 260px;
    }

    .p3-pro-spec-visual img,
    .p3-pro-usage-grid img {
        height: 220px;
    }

    .p3-pro-compare {
        overflow-x: auto;
    }

    .p3-pro-compare__head,
    .p3-pro-compare__row {
        grid-template-columns: 140px 160px 150px;
        min-width: 450px;
    }

    .p3-product-modal {
        padding: 14px;
    }

    .p3-product-modal__dialog {
        border-radius: 24px;
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-page .button,
    .product-page .product-tab,
    .product-page .purpose-filter,
    .product-page .product-card,
    .product-page .product-card__media img,
    .p3-pro-gallery-card,
    .p3-pro-gallery-card img,
    .p3-pro-feature-panel,
    .p3-pro-feature-panel img,
    .p3-scroll-chapter,
    .p3-scroll-chapter img,
    .p3-pro-deep-card,
    .p3-pro-deep-card img,
    .p3-pro-detail-trigger,
    .p3-pro-app-tile,
    .p3-product-modal,
    .p3-product-modal__dialog,
    .p3-pro-usage-grid article,
    .p3-pro-flow-signal {
        transition: none !important;
        animation: none !important;
    }

    .product-detail-page--p3-pro.p3-has-js .product-hero__content > *,
    .product-detail-page--p3-pro.p3-has-js .product-hero__visual {
        opacity: 1 !important;
        transform: none !important;
    }

    .product-page .button:hover,
    .product-page .product-tab:hover,
    .product-page .purpose-filter:hover,
    .product-page .product-card:hover,
    .product-page .product-card:hover .product-card__media img,
    .p3-pro-gallery-card:hover,
    .p3-pro-gallery-card:hover img,
    .p3-pro-feature-panel:hover,
    .p3-pro-feature-panel:hover img,
    .p3-scroll-chapter.is-active img,
    .p3-pro-deep-card:hover,
    .p3-pro-deep-card:hover img,
    .p3-pro-detail-trigger:hover,
    .p3-pro-app-tile:hover,
    .p3-pro-usage-grid article:hover {
        transform: none !important;
    }

    .product-detail-page--p3-pro.p3-has-js [data-p3-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Premium product page: reusable base for image-led product detail pages */
.premium-product-page {
    overflow: clip;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 4%, rgba(223, 247, 245, 0.95), transparent 28rem),
        radial-gradient(circle at 90% 18%, rgba(255, 209, 102, 0.15), transparent 20rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-bg-soft, #F7FBFA) 42%, #FFFFFF 100%);
    color: var(--oc-text, #1F2933);
    line-break: strict;
    word-break: normal;
}

.premium-product-page img {
    max-width: 100%;
}

.premium-image-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 220px;
    place-items: center;
    align-content: center;
    gap: 10px;
    border: 2px dashed var(--oc-primary-200, #BDEDEA);
    border-radius: inherit;
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 209, 102, 0.14), transparent 26%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    color: var(--oc-primary-900, #063F3E);
    padding: 24px;
    text-align: center;
}

.premium-image-placeholder span {
    display: inline-flex;
    min-width: 76px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
}

.premium-image-placeholder strong {
    color: var(--oc-ink, #102022);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.35;
}

.premium-image-placeholder p {
    max-width: 24em;
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    line-height: 1.7;
}

.premium-product-page a:focus-visible,
.premium-product-page button:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.26);
    outline-offset: 4px;
}

#premium-overview,
#premium-apps,
#premium-plug,
#premium-fitment,
#premium-assurance,
#premium-specifications {
    scroll-margin-top: 112px;
}

.premium-product-nav {
    position: fixed;
    left: 50%;
    top: 14px;
    z-index: 920;
    width: min(820px, calc(100% - 28px));
    transform: translateX(-50%);
}

.premium-product-page.premium-has-js .premium-product-nav {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -14px);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-product-page.premium-has-js.is-product-nav-visible .premium-product-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.premium-product-nav__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto auto;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(189, 237, 234, 0.86);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 52px rgba(16, 32, 34, 0.16);
    backdrop-filter: blur(18px);
    padding: 8px;
}

.premium-product-nav__brand {
    min-width: 0;
    overflow: hidden;
    color: var(--oc-ink, #102022);
    padding: 0 10px 0 14px;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-product-nav__toggle {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.premium-product-nav__toggle span {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}

.premium-product-nav__toggle[aria-expanded="true"] span {
    transform: translateY(2px) rotate(-135deg);
}

.premium-product-nav__toggle:hover,
.premium-product-nav__toggle:focus-visible {
    border-color: var(--oc-primary-300, #7EDAD7);
    background: var(--oc-primary-50, #F0FBFA);
    transform: translateY(-1px);
}

.premium-product-nav__menu {
    position: absolute;
    right: 88px;
    top: calc(100% + 10px);
    display: grid;
    min-width: min(410px, calc(100vw - 36px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 70px rgba(16, 32, 34, 0.18);
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.premium-product-nav__menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.premium-product-nav__menu a {
    border-radius: 16px;
    color: var(--oc-text, #1F2933);
    padding: 12px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.premium-product-nav__menu a:hover,
.premium-product-nav__menu a:focus-visible {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    transform: translateY(-1px);
}

.premium-product-nav .button {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
    white-space: nowrap;
}

.premium-product-nav__fitment {
    border-color: var(--oc-primary-200, #BDEDEA);
}

.premium-product-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 900;
}

.premium-product-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    box-shadow: 0 0 0 5px rgba(23, 156, 153, 0.12);
}

.premium-product-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(44px, 6.5vw, 82px) 0 clamp(34px, 5.5vw, 68px);
}

.premium-product-hero::before {
    content: "";
    position: absolute;
    inset: auto -12% -20% 34%;
    z-index: -1;
    height: 44%;
    border-radius: 80px;
    background: linear-gradient(105deg, rgba(23, 156, 153, 0.14), rgba(255, 255, 255, 0.46));
    transform: rotate(-6deg);
    transform-origin: center;
    animation: premiumHeroPanelDrift 13s ease-in-out infinite;
}

.premium-product-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 74%, transparent 100%);
    opacity: 0.52;
    animation: premiumHeroGridDrift 22s linear infinite;
}

.premium-product-hero__inner,
.premium-section__inner,
.premium-spec-strip__inner,
.premium-fitment-cta__inner,
.premium-final-cta__inner,
.premium-visual-section__inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.premium-product-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(26px, 4.5vw, 58px);
    align-items: center;
}

.premium-product-hero__copy h1 {
    margin: 16px 0 12px;
    color: var(--oc-ink, #102022);
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1.04;
    letter-spacing: 0;
    overflow-wrap: normal;
    text-wrap: pretty;
}

.premium-product-hero__catch {
    margin: 0;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: clamp(24px, 2.7vw, 32px);
    font-weight: 900;
    line-height: 1.24;
    text-wrap: pretty;
}

.premium-product-hero__lead {
    max-width: 660px;
    margin: 20px 0 0;
    color: var(--oc-text, #1F2933);
    font-size: clamp(15px, 1.32vw, 17px);
    line-height: 1.82;
}

.premium-product-hero__notice {
    display: grid;
    gap: 6px;
    max-width: 640px;
    margin-top: 18px;
    padding: 16px 18px;
    color: var(--oc-primary-900, #063F3E);
    background: linear-gradient(135deg, rgba(240, 251, 250, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.premium-product-hero__notice strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.premium-product-hero__notice strong::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    box-shadow: 0 0 0 5px rgba(23, 156, 153, 0.12);
}

.premium-product-hero__notice span {
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    line-height: 1.7;
}

.premium-product-hero__actions,
.premium-fitment-cta__actions,
.premium-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.premium-product-page.premium-has-js .premium-product-hero__actions .button {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    animation: premiumHeroFloatIn 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.premium-product-page.premium-has-js .premium-product-hero__actions .button:nth-child(1) {
    animation-delay: 260ms;
}

.premium-product-page.premium-has-js .premium-product-hero__actions .button:nth-child(2) {
    animation-delay: 360ms;
}

.premium-product-page.premium-has-js .premium-product-hero__actions .button:nth-child(3) {
    animation-delay: 460ms;
}

.premium-product-hero__visual {
    position: relative;
    min-height: clamp(390px, 46vw, 560px);
}

.premium-product-hero__orb {
    position: absolute;
    inset: 8% 2% 8% 8%;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 48px;
    background:
        radial-gradient(circle at 24% 16%, rgba(255, 209, 102, 0.2), transparent 22%),
        radial-gradient(circle at 82% 78%, rgba(114, 214, 255, 0.14), transparent 22%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    animation: premiumHeroOrbLift 9s ease-in-out infinite;
}

.premium-product-hero__orb::before,
.premium-product-hero__orb::after {
    content: "";
    position: absolute;
    border: 3px solid rgba(23, 156, 153, 0.16);
    border-radius: 999px;
    pointer-events: none;
}

.premium-product-hero__orb::before {
    right: 9%;
    top: 9%;
    width: 140px;
    height: 58px;
    animation: premiumHeroRingFloat 12s ease-in-out infinite;
}

.premium-product-hero__orb::after {
    left: 9%;
    bottom: 9%;
    width: 190px;
    height: 190px;
    animation: premiumHeroRingFloat 15s ease-in-out infinite reverse;
}

.premium-product-hero__product,
.premium-product-hero__scene {
    position: absolute;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
}

.premium-product-hero__product {
    left: 4%;
    top: 6%;
    z-index: 2;
    display: grid;
    width: min(450px, 74%);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 44px;
}

.premium-product-hero__product img {
    width: 94%;
    height: 94%;
    object-fit: contain;
}

.premium-product-page--mirror-touch .premium-product-hero__product {
    width: min(520px, 82%);
    aspect-ratio: 3 / 2;
    border-radius: 36px;
}

.premium-product-page--mirror-touch .premium-product-hero__product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-product-page.premium-has-js .premium-product-hero__product img {
    opacity: 0;
    transform: translateY(22px) scale(0.955);
    animation: premiumProductRise 960ms cubic-bezier(0.22, 1, 0.36, 1) 220ms forwards;
}

.premium-product-hero__scene {
    right: 0;
    bottom: 8%;
    z-index: 3;
    width: min(330px, 52%);
    border-radius: 32px;
}

.premium-product-hero__scene img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.premium-product-page.premium-has-js .premium-product-hero__scene,
.premium-product-page.premium-has-js .premium-product-hero__badge {
    opacity: 0;
    transform: translateY(16px);
    animation: premiumHeroFloatIn 760ms cubic-bezier(0.22, 1, 0.36, 1) 520ms forwards;
}

.premium-product-page.premium-has-js .premium-product-hero__badge {
    animation-delay: 680ms;
}

.premium-product-hero__badge {
    position: absolute;
    right: 8%;
    top: 12%;
    z-index: 4;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 14px 16px;
}

.premium-product-hero__badge span {
    display: block;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 900;
}

.premium-product-hero__badge strong {
    display: block;
    margin-top: 3px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 18px;
}

.premium-spec-strip {
    position: relative;
    z-index: 2;
    padding: 0 0 clamp(42px, 5.5vw, 66px);
}

.premium-spec-strip__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.premium-spec-item {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 20px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.premium-spec-item::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--oc-primary, #179C99), var(--oc-primary-200, #BDEDEA));
    opacity: 0;
    transform: scaleX(0.32);
    transform-origin: left center;
    transition: opacity 420ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-spec-item:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-3px);
}

.premium-spec-item.is-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.premium-spec-item strong {
    display: block;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1;
}

.premium-spec-item span {
    display: block;
    margin-top: 10px;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    font-weight: 900;
}

.premium-section,
.premium-visual-section,
.premium-fitment-cta,
.premium-final-cta {
    position: relative;
    padding: clamp(56px, 7vw, 96px) 0;
}

.premium-section--white {
    background: #FFFFFF;
}

.premium-section--mint {
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 209, 102, 0.14), transparent 20rem),
        linear-gradient(180deg, var(--oc-primary-50, #F0FBFA), #FFFFFF);
}

.premium-section--soft {
    background: var(--oc-bg-soft, #F7FBFA);
}

.premium-section__heading {
    max-width: 760px;
    margin-bottom: clamp(24px, 3.5vw, 40px);
}

.premium-section__heading h2,
.premium-visual-section__copy h2,
.premium-fitment-cta__body h2,
.premium-final-cta h2,
.premium-spec-layout h2 {
    margin: 14px 0 12px;
    color: var(--oc-ink, #102022);
    font-size: clamp(28px, 3.35vw, 42px);
    line-height: 1.2;
    letter-spacing: 0;
    text-wrap: pretty;
}

.premium-section__heading p:not(.premium-product-eyebrow),
.premium-visual-section__copy > p,
.premium-fitment-cta__body > p,
.premium-final-cta p:not(.premium-product-eyebrow),
.premium-spec-visual p {
    color: var(--oc-text, #1F2933);
    font-size: 15.5px;
    line-height: 1.78;
}

.premium-can-do-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 18px;
}

.premium-can-do-card {
    display: grid;
    grid-template-columns: minmax(210px, 0.46fr) minmax(0, 0.54fr);
    gap: 20px;
    align-items: center;
    overflow: hidden;
    min-height: 300px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 34px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 209, 102, 0.14), transparent 26%),
        #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 18px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.premium-can-do-card:first-child {
    grid-row: span 2;
    grid-template-columns: 1fr;
}

.premium-can-do-card:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-3px);
}

.premium-can-do-card figure {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 26px;
    background: var(--oc-primary-50, #F0FBFA);
}

.premium-can-do-card img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 260ms ease;
}

.premium-can-do-card:first-child img {
    height: 460px;
}

.premium-can-do-card:hover img {
    transform: scale(1.025);
}

.premium-can-do-card span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-weight: 900;
}

.premium-can-do-card h3 {
    margin: 14px 0 9px;
    color: var(--oc-ink, #102022);
    font-size: clamp(20px, 2.2vw, 27px);
    line-height: 1.38;
    text-wrap: pretty;
}

.premium-can-do-card p {
    margin: 0;
    line-height: 1.74;
}

.premium-app-showcase {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1.14fr);
    gap: clamp(26px, 5vw, 64px);
    align-items: center;
}

.premium-app-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.premium-app-tile {
    position: relative;
    overflow: hidden;
    min-height: 158px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 18px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.premium-app-tile::after {
    content: "";
    position: absolute;
    right: -42px;
    top: -42px;
    width: 118px;
    height: 118px;
    border-radius: 40px;
    background: var(--app-soft, var(--oc-primary-50, #F0FBFA));
    transform: rotate(14deg);
}

.premium-app-tile:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-4px);
}

.premium-app-tile strong,
.premium-app-tile small,
.premium-app-icon {
    position: relative;
    z-index: 1;
}

.premium-app-tile strong {
    display: block;
    margin-top: 18px;
    color: var(--oc-ink, #102022);
    font-size: 18px;
    line-height: 1.32;
    text-wrap: pretty;
}

.premium-app-tile small {
    display: inline-flex;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
}

.premium-app-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    background: var(--app-color, var(--oc-primary, #179C99));
    color: #FFFFFF;
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.2);
}

.premium-app-icon i {
    display: block;
    position: relative;
}

.premium-app-icon--play i {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid currentColor;
}

.premium-app-icon--pin i {
    width: 20px;
    height: 20px;
    border: 5px solid currentColor;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.premium-app-icon--pin i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.premium-app-icon--music i {
    width: 22px;
    height: 26px;
    border-right: 5px solid currentColor;
    border-top: 5px solid currentColor;
    transform: skewY(-8deg);
}

.premium-app-icon--music i::before,
.premium-app-icon--music i::after {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
}

.premium-app-icon--music i::before {
    left: -6px;
}

.premium-app-icon--music i::after {
    right: -8px;
}

.premium-app-icon--screen i {
    width: 26px;
    height: 20px;
    border: 4px solid currentColor;
    border-radius: 6px;
}

.premium-app-icon--screen i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 14px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
}

.premium-app-icon--cone i {
    width: 22px;
    height: 22px;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-bottom: 28px solid currentColor;
    transform: translateY(-3px);
}

.premium-app-tile--coral {
    --app-color: var(--oc-accent-coral, #FF7A59);
    --app-soft: rgba(255, 122, 89, 0.12);
}

.premium-app-tile--sky {
    --app-color: #1F9FD6;
    --app-soft: rgba(114, 214, 255, 0.18);
}

.premium-app-tile--green {
    --app-color: var(--oc-primary, #179C99);
    --app-soft: var(--oc-primary-100, #DFF7F5);
}

.premium-app-tile--blue {
    --app-color: #2877D8;
    --app-soft: rgba(114, 214, 255, 0.16);
}

.premium-app-tile--dark {
    --app-color: var(--oc-ink, #102022);
    --app-soft: rgba(16, 32, 34, 0.08);
}

.premium-app-tile--yellow {
    --app-color: #D99612;
    --app-soft: rgba(255, 209, 102, 0.2);
}

.premium-app-notes {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.premium-app-notes li {
    position: relative;
    color: var(--oc-text, #1F2933);
    line-height: 1.72;
    padding-left: 28px;
}

.premium-app-notes li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.7em;
    width: 12px;
    height: 7px;
    border-left: 3px solid var(--oc-primary, #179C99);
    border-bottom: 3px solid var(--oc-primary, #179C99);
    transform: rotate(-45deg);
}

.premium-visual-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 14%, rgba(126, 218, 215, 0.2), transparent 22rem),
        #FFFFFF;
}

.premium-visual-section:nth-of-type(odd) {
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 209, 102, 0.13), transparent 18rem),
        var(--oc-bg-soft, #F7FBFA);
}

.premium-visual-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.premium-visual-section--reverse .premium-visual-section__inner {
    grid-template-columns: minmax(420px, 1.12fr) minmax(0, 0.88fr);
}

.premium-visual-section--reverse .premium-visual-section__copy {
    order: 2;
}

.premium-visual-section__media {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: clamp(30px, 4vw, 48px);
    background:
        radial-gradient(circle at 20% 16%, rgba(255, 209, 102, 0.16), transparent 25%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateZ(0);
    transition:
        border-color 360ms ease,
        box-shadow 360ms ease,
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-visual-section__media::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 138px;
    height: 56px;
    border: 3px solid rgba(23, 156, 153, 0.16);
    border-radius: 999px;
}

.premium-visual-section__media img {
    display: block;
    width: 100%;
    height: clamp(360px, 46vw, 560px);
    object-fit: cover;
    transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-visual-section__media--variants {
    padding: clamp(14px, 2vw, 22px);
}

.premium-visual-section__media--variants::after {
    right: auto;
    left: 50%;
    bottom: 24px;
    width: 68%;
    max-width: 360px;
    height: 42px;
    transform: translateX(-50%);
}

.premium-design-variants {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 18px);
}

.premium-design-variant {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.08);
}

.premium-design-variant img {
    height: clamp(260px, 28vw, 420px);
    object-fit: cover;
}

.premium-design-variant figcaption {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.premium-design-variant strong {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 18px;
    line-height: 1.35;
}

.premium-design-variant span {
    color: var(--oc-text, #1F2933);
    font-size: 13.5px;
    line-height: 1.7;
}

.premium-visual-section--performance .premium-visual-section__media img,
.premium-visual-section--hdmi .premium-visual-section__media img {
    object-fit: contain;
    padding: clamp(12px, 2vw, 24px);
}

.premium-product-page--mirror-touch .premium-visual-section--wireless-carplay .premium-visual-section__media {
    background: #FFFFFF;
}

.premium-product-page--mirror-touch .premium-visual-section--wireless-carplay .premium-visual-section__media img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #FFFFFF;
}

.premium-product-page--mirror-touch .premium-visual-section--wireless-carplay .premium-visual-section__media:hover img {
    transform: none;
}

.premium-product-page--mini-adapter .premium-visual-section__media,
.premium-product-page--mini-adapter .premium-connection-photo,
.premium-product-page--mini-adapter .premium-fitment-cta figure,
.premium-product-page--mini-adapter .premium-package-visual,
.premium-product-page--mini-adapter .premium-spec-visual {
    background:
        radial-gradient(circle at 18% 14%, rgba(223, 247, 245, 0.8), transparent 32%),
        #FFFFFF;
}

.premium-product-page--mini-adapter .premium-visual-section__media img,
.premium-product-page--mini-adapter .premium-connection-photo img,
.premium-product-page--mini-adapter .premium-fitment-cta figure img,
.premium-product-page--mini-adapter .premium-package-visual img,
.premium-product-page--mini-adapter .premium-spec-visual img {
    height: auto;
    max-height: min(620px, 72vh);
    object-fit: contain;
    object-position: center;
    padding: clamp(10px, 1.8vw, 22px);
}

.premium-product-page--mini-adapter .premium-connection-photo {
    min-height: 0;
}

.premium-product-page--mini-adapter .premium-connection-photo::after {
    background: linear-gradient(180deg, transparent 62%, rgba(16, 32, 34, 0.16) 100%);
}

.premium-product-page--mini-adapter .premium-visual-section__media:hover img {
    transform: none;
}

.premium-visual-section__media:hover img {
    transform: scale(1.025);
}

.premium-visual-section.is-feature-active .premium-visual-section__media {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: 0 28px 70px rgba(16, 32, 34, 0.14);
    transform: translateY(-4px);
}

.premium-visual-section.is-feature-active .premium-product-eyebrow {
    background: var(--oc-primary-100, #DFF7F5);
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.13);
}

@media (min-width: 1041px) {
    .premium-visual-section {
        display: flex;
        min-height: 94vh;
        align-items: center;
    }

    .premium-visual-section__media[data-premium-sticky-media] {
        position: sticky;
        top: clamp(68px, 7vw, 92px);
    }

    .premium-visual-section__copy {
        align-self: center;
    }
}

.premium-visual-section__media--illustration {
    display: grid;
    min-height: clamp(360px, 46vw, 560px);
    place-items: center;
}

.premium-cloud-visual {
    position: relative;
    width: min(520px, 84%);
    aspect-ratio: 1.08;
}

.premium-cloud-visual__sim,
.premium-cloud-visual__phone,
.premium-cloud-visual__car {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    font-weight: 900;
}

.premium-cloud-visual__sim {
    left: 50%;
    top: 50%;
    width: 144px;
    height: 180px;
    border-radius: 28px 28px 36px 36px;
    transform: translate(-50%, -50%);
}

.premium-cloud-visual__sim::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 18px;
    width: 30px;
    height: 30px;
    border-top: 12px solid var(--oc-primary-100, #DFF7F5);
    border-left: 12px solid transparent;
}

.premium-cloud-visual__phone {
    left: 0;
    bottom: 12%;
    width: 120px;
    height: 180px;
    border-radius: 30px;
}

.premium-cloud-visual__car {
    right: 0;
    top: 11%;
    width: 190px;
    height: 118px;
    border-radius: 28px;
}

.premium-cloud-visual__wifi {
    position: absolute;
    left: 50%;
    top: 8%;
    width: 190px;
    height: 190px;
    border: 4px solid rgba(23, 156, 153, 0.16);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    transform: translateX(-50%) rotate(-45deg);
}

.premium-cloud-visual i,
.premium-cloud-visual b {
    position: absolute;
    z-index: 1;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--oc-primary, #179C99), transparent);
    background-size: 220% 100%;
    animation: premiumSignalFlow 8s linear infinite;
}

.premium-cloud-visual i {
    left: 100px;
    bottom: 35%;
    width: 220px;
    transform: rotate(-18deg);
}

.premium-cloud-visual b {
    right: 90px;
    top: 39%;
    width: 210px;
    transform: rotate(18deg);
}

.premium-chip-list,
.premium-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.premium-chip-list li,
.premium-check-list li,
.premium-package-list span {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 900;
}

.premium-check-list {
    display: grid;
}

.premium-check-list li {
    position: relative;
    border-radius: 18px;
    background: #FFFFFF;
    padding-left: 40px;
}

.premium-check-list li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 15px;
    width: 12px;
    height: 7px;
    border-left: 3px solid var(--oc-primary, #179C99);
    border-bottom: 3px solid var(--oc-primary, #179C99);
    transform: rotate(-45deg);
}

.premium-inline-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 28px;
    border: 1px solid var(--oc-primary, #179C99);
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    padding: 10px 18px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.premium-inline-trigger:hover,
.premium-inline-trigger:focus-visible {
    border-color: var(--oc-primary-700, #10817E);
    background: var(--oc-primary-700, #10817E);
    transform: translateY(-2px);
}

.premium-inline-trigger:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.22);
    outline-offset: 3px;
}

.premium-connection-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(0, 0.82fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.premium-connection-map {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 42px;
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 156, 153, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 48% 50%, rgba(255, 209, 102, 0.16), transparent 24%),
        #FFFFFF;
    background-size: 36px 36px, 36px 36px, auto, auto;
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
}

.premium-connection-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.premium-connection-line {
    fill: none;
    stroke: var(--oc-primary, #179C99);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: var(--premium-line-length, 12 12);
    stroke-dashoffset: var(--premium-line-length, 0);
    opacity: 0.78;
    transition: stroke-dashoffset 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-connection-line--two {
    transition-delay: 220ms;
}

.premium-connection-line--three {
    transition-delay: 420ms;
}

.premium-connection-map.is-connection-drawn .premium-connection-line {
    stroke-dashoffset: 0 !important;
}

.premium-connection-photo {
    position: relative;
    overflow: hidden;
    margin: 0;
    min-height: 500px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 42px;
    background:
        radial-gradient(circle at 18% 18%, rgba(223, 247, 245, 0.8), transparent 32%),
        #FFFFFF;
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
}

.premium-connection-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 48%, rgba(16, 32, 34, 0.26) 100%),
        linear-gradient(90deg, rgba(23, 156, 153, 0.2), transparent 42%);
}

.premium-connection-photo img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.premium-connection-photo figcaption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    width: fit-content;
    max-width: calc(100% - 44px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--oc-ink, #102022);
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
    backdrop-filter: blur(12px);
}

.premium-product-page.premium-has-js .premium-connection-photo {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition:
        opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.premium-product-page.premium-has-js .premium-connection-photo.is-connection-drawn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.premium-connection-pulse {
    fill: none;
    stroke: rgba(23, 156, 153, 0.16);
    stroke-width: 4;
    animation: premiumPulse 5s ease-in-out infinite;
}

.premium-connection-device,
.premium-connection-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.premium-product-page.premium-has-js .premium-connection-device {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.96);
    transition:
        opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-product-page.premium-has-js .premium-connection-node {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-product-page.premium-has-js .premium-connection-map.is-connection-drawn .premium-connection-device {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.premium-product-page.premium-has-js .premium-connection-map.is-connection-drawn .premium-connection-node {
    opacity: 1;
    transform: translateY(0);
}

.premium-product-page.premium-has-js .premium-connection-map.is-connection-drawn .premium-connection-node--usb {
    transition-delay: 120ms;
}

.premium-product-page.premium-has-js .premium-connection-map.is-connection-drawn .premium-connection-node--screen {
    transition-delay: 320ms;
}

.premium-product-page.premium-has-js .premium-connection-map.is-connection-drawn .premium-connection-node--phone {
    transition-delay: 520ms;
}

.premium-product-page.premium-has-js .premium-connection-map.is-connection-drawn .premium-connection-node--hdmi {
    transition-delay: 700ms;
}

.premium-connection-device {
    left: 50%;
    top: 50%;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.premium-connection-device img {
    width: 126px;
    height: 126px;
    object-fit: contain;
}

.premium-connection-device span {
    position: absolute;
    bottom: 20px;
    color: var(--oc-primary-900, #063F3E);
    font-size: 13px;
    font-weight: 900;
}

.premium-connection-node {
    width: 142px;
    min-height: 80px;
    border-radius: 24px;
}

.premium-connection-node span {
    color: var(--oc-primary-800, #0B5F5C);
    font-weight: 900;
}

.premium-connection-node--usb {
    left: 38px;
    top: 80px;
}

.premium-connection-node--screen {
    right: 42px;
    top: 92px;
}

.premium-connection-node--phone {
    left: 62px;
    bottom: 68px;
}

.premium-connection-node--hdmi {
    right: 58px;
    bottom: 76px;
}

.premium-connection-steps {
    display: grid;
    gap: 14px;
}

.premium-connection-steps article {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 20px;
}

.premium-connection-steps span {
    display: inline-flex;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
}

.premium-connection-steps h3 {
    margin: 10px 0 7px;
    color: var(--oc-ink, #102022);
    font-size: 20px;
    line-height: 1.38;
    text-wrap: balance;
}

.premium-connection-steps p {
    margin: 0;
    line-height: 1.68;
}

.premium-fitment-cta {
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 122, 89, 0.1), transparent 19rem),
        linear-gradient(180deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.premium-fitment-cta__inner {
    display: grid;
    grid-template-columns: minmax(320px, 0.48fr) minmax(0, 0.52fr);
    gap: clamp(24px, 5vw, 58px);
    align-items: center;
}

.premium-fitment-cta figure,
.premium-package-visual,
.premium-spec-visual {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 36px;
    background:
        radial-gradient(circle at 22% 16%, rgba(255, 209, 102, 0.16), transparent 25%),
        #FFFFFF;
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
}

.premium-fitment-cta figure img {
    display: block;
    width: 100%;
    height: clamp(360px, 44vw, 560px);
    object-fit: cover;
}

.premium-fitment-cta__note {
    margin: 18px 0 0;
    color: var(--oc-muted, #667085);
    font-size: 14px;
    font-weight: 800;
}

.premium-assurance-section {
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 209, 102, 0.12), transparent 18rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
}

.premium-assurance-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
    gap: clamp(26px, 5vw, 62px);
    align-items: center;
}

.premium-assurance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.premium-assurance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.premium-assurance-card {
    position: relative;
    overflow: hidden;
    min-height: 218px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 22px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.premium-assurance-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 110px;
    height: 110px;
    border-radius: 34px;
    background: var(--oc-primary-100, #DFF7F5);
    transform: rotate(12deg);
}

.premium-assurance-card:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-3px);
}

.premium-assurance-card span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 76px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 900;
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
}

.premium-assurance-card h3,
.premium-assurance-card p {
    position: relative;
    z-index: 1;
}

.premium-assurance-card h3 {
    margin: 18px 0 10px;
    color: var(--oc-ink, #102022);
    font-size: 20px;
    line-height: 1.4;
    text-wrap: balance;
}

.premium-assurance-card p {
    margin: 0;
    color: var(--oc-text, #1F2933);
    line-height: 1.7;
}

.premium-package-layout,
.premium-spec-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    gap: clamp(26px, 5vw, 62px);
    align-items: center;
}

.premium-package-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.premium-package-visual img {
    display: block;
    width: 100%;
    height: clamp(400px, 52vw, 640px);
    object-fit: contain;
    padding: clamp(14px, 2vw, 24px);
}

.premium-spec-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    align-items: start;
}

.premium-spec-table {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.premium-spec-table div {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
}

.premium-spec-table div + div {
    border-top: 1px solid var(--oc-line, #DCEDEA);
}

.premium-spec-table dt,
.premium-spec-table dd {
    margin: 0;
    padding: 18px 22px;
}

.premium-spec-table dt {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    font-weight: 900;
}

.premium-spec-table dd {
    color: var(--oc-text, #1F2933);
    font-weight: 700;
}

.premium-spec-visual {
    position: sticky;
    top: 96px;
    padding: 18px;
}

.premium-spec-visual img {
    display: block;
    width: 100%;
    height: 310px;
    object-fit: contain;
}

.premium-spec-visual div {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 22px;
    background: var(--oc-primary-50, #F0FBFA);
    padding: 18px;
}

.premium-spec-visual strong {
    color: var(--oc-primary-900, #063F3E);
    font-size: 18px;
}

.premium-comparison {
    overflow-x: auto;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.premium-comparison table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.premium-comparison th,
.premium-comparison td {
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    padding: 18px 20px;
    text-align: left;
    vertical-align: top;
}

.premium-comparison thead th {
    background: var(--oc-primary-900, #063F3E);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
}

.premium-comparison tbody th {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    font-weight: 900;
}

.premium-comparison tbody td {
    color: var(--oc-text, #1F2933);
    font-weight: 700;
}

.premium-faq {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: clamp(12px, 2vw, 18px);
}

.premium-final-cta {
    background:
        radial-gradient(circle at 12% 26%, rgba(255, 209, 102, 0.16), transparent 18rem),
        linear-gradient(135deg, var(--oc-primary-900, #063F3E), var(--oc-primary-800, #0B5F5C));
    color: #FFFFFF;
}

.premium-final-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
}

.premium-final-cta .premium-product-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.premium-final-cta h2 {
    color: #FFFFFF;
}

.premium-final-cta p:not(.premium-product-eyebrow) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.86);
}

.premium-final-cta__actions {
    justify-content: flex-end;
}

.premium-final-cta__actions .button--secondary {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.premium-modal-open {
    overflow: hidden;
}

.premium-product-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.premium-product-modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.premium-product-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 34, 0.58);
    backdrop-filter: blur(8px);
}

.premium-product-modal__dialog {
    position: relative;
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 32px;
    background:
        radial-gradient(circle at 86% 10%, rgba(255, 209, 102, 0.16), transparent 12rem),
        #FFFFFF;
    box-shadow: 0 26px 80px rgba(16, 32, 34, 0.28);
    padding: clamp(24px, 5vw, 40px);
    transform: translateY(14px) scale(0.98);
    transition: transform 200ms ease;
}

.premium-product-modal[aria-hidden="false"] .premium-product-modal__dialog {
    transform: translateY(0) scale(1);
}

.premium-product-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-900, #063F3E);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.premium-product-modal__dialog h2 {
    margin: 16px 42px 12px 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(25px, 4vw, 36px);
    line-height: 1.28;
}

.premium-product-modal__dialog p:not(.premium-product-eyebrow) {
    color: var(--oc-text, #1F2933);
    line-height: 1.75;
}

.premium-product-modal__content {
    display: grid;
    grid-template-columns: minmax(260px, 0.44fr) minmax(0, 0.56fr);
    gap: clamp(18px, 4vw, 30px);
    align-items: start;
}

.premium-product-modal__content--no-image {
    grid-template-columns: minmax(0, 1fr);
}

.premium-product-modal__image {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 209, 102, 0.14), transparent 24%),
        var(--oc-primary-50, #F0FBFA);
}

.premium-product-modal__image img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.premium-product-modal__sections {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.premium-product-modal__sections article {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 14px;
}

.premium-product-modal__sections h3 {
    margin: 0 0 6px;
    color: var(--oc-primary-900, #063F3E);
    font-size: 16px;
    line-height: 1.4;
}

.premium-product-modal__sections p {
    margin: 0;
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    line-height: 1.8;
}

.premium-product-modal__dialog ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.premium-product-modal__dialog li {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
}

.premium-product-modal--app .premium-product-modal__dialog {
    width: min(980px, 100%);
    background:
        radial-gradient(circle at 90% 6%, rgba(255, 209, 102, 0.16), transparent 12rem),
        radial-gradient(circle at 8% 18%, rgba(23, 156, 153, 0.13), transparent 16rem),
        #FFFFFF;
}

.premium-product-modal--app .premium-product-modal__dialog h2 {
    max-width: 760px;
}

.premium-product-modal--app .premium-product-modal__text {
    display: grid;
    gap: 18px;
}

.premium-product-modal--app [data-premium-modal-body] {
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF 72%);
    color: var(--oc-primary-900, #063F3E);
    padding: clamp(16px, 3vw, 22px);
    font-size: clamp(15px, 1.8vw, 17px);
    font-weight: 800;
    line-height: 1.9;
}

.premium-product-modal--app .premium-product-modal__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
}

.premium-product-modal--app .premium-product-modal__sections article {
    position: relative;
    min-height: 158px;
    border-color: rgba(23, 156, 153, 0.18);
    border-radius: 24px;
    background:
        linear-gradient(180deg, #FFFFFF, rgba(240, 251, 250, 0.76));
    padding: 20px 18px 18px 58px;
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.07);
}

.premium-product-modal--app .premium-product-modal__sections article:nth-child(5) {
    grid-column: 1 / -1;
    min-height: 0;
}

.premium-product-modal--app .premium-product-modal__sections article::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 21px;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    background: var(--oc-primary, #179C99);
    box-shadow: 0 10px 20px rgba(23, 156, 153, 0.24);
}

.premium-product-modal--app .premium-product-modal__sections article::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 30px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(-45deg);
}

.premium-product-modal--app .premium-product-modal__sections h3 {
    color: var(--oc-primary-900, #063F3E);
    font-size: clamp(16px, 1.7vw, 18px);
}

.premium-product-modal--app .premium-product-modal__sections p {
    color: var(--oc-text, #1F2933);
    font-size: 14.5px;
    line-height: 1.85;
}

.premium-product-modal--app .premium-product-modal__dialog ul {
    margin-top: 2px;
}

.premium-product-modal--app .premium-product-modal__dialog li {
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(16, 32, 34, 0.05);
}

.premium-product-modal--device .premium-product-modal__dialog {
    width: min(1040px, 100%);
    background:
        radial-gradient(circle at 92% 8%, rgba(114, 214, 255, 0.13), transparent 13rem),
        radial-gradient(circle at 8% 16%, rgba(23, 156, 153, 0.13), transparent 15rem),
        #FFFFFF;
}

.premium-product-modal--device [data-premium-modal-body] {
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF 76%);
    color: var(--oc-primary-900, #063F3E);
    padding: clamp(16px, 3vw, 22px);
    font-size: clamp(15px, 1.8vw, 17px);
    font-weight: 800;
    line-height: 1.9;
}

.premium-product-modal--device .premium-product-modal__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
}

.premium-product-modal--device .premium-product-modal__sections article {
    border-color: rgba(23, 156, 153, 0.18);
    border-radius: 24px;
    background: linear-gradient(180deg, #FFFFFF, rgba(240, 251, 250, 0.78));
    padding: 18px;
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.07);
}

.premium-product-modal--device .premium-product-modal__sections article:last-child {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    background:
        linear-gradient(135deg, rgba(255, 209, 102, 0.16), rgba(240, 251, 250, 0.84)),
        #FFFFFF;
}

.premium-product-modal--device .premium-product-modal__sections h3 {
    color: var(--oc-primary-900, #063F3E);
    font-size: clamp(16px, 1.7vw, 18px);
}

.premium-product-modal--device .premium-product-modal__sections p {
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    line-height: 1.75;
}

.premium-product-modal--device .premium-device-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.premium-product-modal--device .premium-device-list li {
    border: 1px solid rgba(23, 156, 153, 0.22);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    box-shadow: 0 6px 14px rgba(16, 32, 34, 0.05);
}

.premium-device-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-primary, #179C99);
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.18);
}

.premium-device-link:hover,
.premium-device-link:focus-visible {
    background: var(--oc-primary-700, #10817E);
    color: #FFFFFF;
}

.premium-product-page.premium-has-js [data-premium-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 640ms cubic-bezier(0.22, 1, 0.36, 1) var(--premium-delay, 0ms),
        transform 640ms cubic-bezier(0.22, 1, 0.36, 1) var(--premium-delay, 0ms);
}

.premium-product-page.premium-has-js [data-premium-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.premium-product-page.premium-has-js [data-premium-stagger-item] {
    transition-delay:
        calc(var(--premium-delay, 0ms) + var(--premium-stagger, 0ms)),
        calc(var(--premium-delay, 0ms) + var(--premium-stagger, 0ms));
}

@keyframes premiumHeroPanelDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-6deg);
    }

    50% {
        transform: translate3d(-16px, -12px, 0) rotate(-4deg);
    }
}

@keyframes premiumHeroGridDrift {
    to {
        background-position: 56px 28px, 28px 56px;
    }
}

@keyframes premiumHeroOrbLift {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@keyframes premiumHeroRingFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(8px, -8px, 0) rotate(4deg);
    }
}

@keyframes premiumProductRise {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes premiumHeroFloatIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes premiumSignalFlow {
    to {
        background-position: 220% 0;
    }
}

@keyframes premiumPulse {
    0%, 100% {
        opacity: 0.42;
        transform: scale(0.98);
        transform-origin: center;
    }

    50% {
        opacity: 0.85;
        transform: scale(1.04);
        transform-origin: center;
    }
}

@media (max-width: 1040px) {
    .premium-spec-strip__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .premium-product-hero__inner,
    .premium-visual-section__inner,
    .premium-visual-section--reverse .premium-visual-section__inner,
    .premium-app-showcase,
    .premium-connection-layout,
    .premium-fitment-cta__inner,
    .premium-assurance-layout,
    .premium-package-layout,
    .premium-spec-layout,
    .premium-final-cta__inner {
        grid-template-columns: 1fr;
    }

    .premium-visual-section--reverse .premium-visual-section__copy {
        order: 0;
    }

    .premium-product-hero__visual {
        min-height: 580px;
    }

    .premium-app-grid,
    .premium-assurance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-final-cta__actions {
        justify-content: flex-start;
    }

    .premium-spec-visual {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .premium-product-hero__inner,
    .premium-section__inner,
    .premium-spec-strip__inner,
    .premium-fitment-cta__inner,
    .premium-final-cta__inner,
    .premium-visual-section__inner {
        width: min(1180px, calc(100% - 28px));
    }

    .premium-product-nav {
        top: 10px;
        width: min(460px, calc(100% - 16px));
    }

    .premium-product-nav__inner {
        grid-template-columns: minmax(0, 1fr) auto auto;
        border-radius: 24px;
        padding: 6px;
    }

    .premium-product-nav__brand {
        padding-left: 10px;
        font-size: 13px;
    }

    .premium-product-nav__toggle {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .premium-product-nav__fitment {
        display: none;
    }

    .premium-product-nav .button {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .premium-product-nav__menu {
        right: 0;
        min-width: min(330px, calc(100vw - 28px));
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .premium-product-hero {
        padding-top: 42px;
    }

    .premium-product-hero__copy h1 {
        font-size: 36px;
        line-height: 1.08;
    }

    .premium-product-hero__catch {
        font-size: 25px;
        line-height: 1.28;
    }

    .premium-product-hero__lead,
    .premium-section__heading p:not(.premium-product-eyebrow),
    .premium-visual-section__copy > p,
    .premium-fitment-cta__body > p,
    .premium-can-do-card p,
    .premium-connection-steps p,
    .premium-assurance-card p {
        font-size: 15px;
        line-height: 1.72;
    }

    .premium-product-hero__actions,
    .premium-fitment-cta__actions,
    .premium-final-cta__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .premium-product-hero__actions .button,
    .premium-fitment-cta__actions .button,
    .premium-final-cta__actions .button {
        width: 100%;
        min-height: 50px;
        white-space: normal;
        text-align: center;
    }

    .premium-product-hero__visual {
        min-height: 430px;
    }

    .premium-product-hero__orb {
        inset: 0;
        border-radius: 34px;
        animation: none;
    }

    .premium-product-hero__orb::before,
    .premium-product-hero__orb::after,
    .premium-product-hero::before,
    .premium-product-hero::after {
        animation: none;
    }

    .premium-product-hero__product {
        left: 50%;
        top: 26px;
        width: min(320px, 82%);
        border-radius: 32px;
        transform: translateX(-50%);
    }

    .premium-product-hero__scene {
        right: 18px;
        bottom: 28px;
        width: min(230px, 62%);
        border-radius: 24px;
    }

    .premium-product-hero__scene img {
        height: 150px;
    }

    .premium-product-hero__badge {
        left: 18px;
        right: auto;
        top: auto;
        bottom: 34px;
    }

    .premium-spec-strip__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .premium-spec-item {
        min-height: 96px;
        border-radius: 22px;
        padding: 16px;
    }

    .premium-app-grid,
    .premium-assurance-grid {
        grid-template-columns: 1fr;
    }

    .premium-app-tile,
    .premium-assurance-card {
        min-height: auto;
        border-radius: 24px;
    }

    .premium-section,
    .premium-visual-section,
    .premium-fitment-cta,
    .premium-final-cta {
        padding: 64px 0;
    }

    .premium-section__heading h2,
    .premium-visual-section__copy h2,
    .premium-fitment-cta__body h2,
    .premium-final-cta h2,
    .premium-spec-layout h2 {
        font-size: 29px;
        line-height: 1.22;
    }

    .premium-can-do-grid,
    .premium-can-do-card,
    .premium-can-do-card:first-child {
        grid-template-columns: 1fr;
    }

    .premium-can-do-card,
    .premium-visual-section__media,
    .premium-fitment-cta figure,
    .premium-package-visual,
    .premium-spec-visual,
    .premium-comparison,
    .premium-faq {
        border-radius: 26px;
    }

    .premium-can-do-card:first-child {
        grid-row: auto;
    }

    .premium-can-do-card img,
    .premium-can-do-card:first-child img,
    .premium-visual-section__media img,
    .premium-fitment-cta figure img,
    .premium-package-visual img {
        height: 280px;
    }

    .premium-design-variants {
        grid-template-columns: 1fr;
    }

    .premium-design-variant img {
        height: 260px;
    }

    .premium-visual-section__media--illustration {
        min-height: 320px;
    }

    .premium-cloud-visual {
        width: min(360px, 90%);
    }

    .premium-cloud-visual__sim {
        width: 104px;
        height: 136px;
        border-radius: 22px 22px 28px 28px;
    }

    .premium-cloud-visual__phone {
        width: 86px;
        height: 130px;
        border-radius: 22px;
    }

    .premium-cloud-visual__car {
        width: 132px;
        height: 84px;
        border-radius: 22px;
    }

    .premium-visual-section--performance .premium-visual-section__media img,
    .premium-visual-section--hdmi .premium-visual-section__media img {
        padding: 10px;
    }

    .premium-connection-map {
        min-height: 390px;
        border-radius: 28px;
    }

    .premium-connection-photo {
        min-height: auto;
        border-radius: 28px;
    }

    .premium-connection-photo img {
        height: 360px;
    }

    .premium-connection-photo figcaption {
        position: static;
        width: auto;
        max-width: none;
        border: 0;
        border-top: 1px solid var(--oc-primary-200, #BDEDEA);
        border-radius: 0;
        background: #FFFFFF;
        padding: 14px 16px;
        backdrop-filter: none;
    }

    .premium-connection-device {
        width: 126px;
        height: 126px;
    }

    .premium-connection-device img {
        width: 88px;
        height: 88px;
    }

    .premium-connection-node {
        width: 112px;
        min-height: 64px;
        border-radius: 20px;
        font-size: 13px;
    }

    .premium-connection-node--usb {
        left: 14px;
        top: 58px;
    }

    .premium-connection-node--screen {
        right: 14px;
        top: 64px;
    }

    .premium-connection-node--phone {
        left: 18px;
        bottom: 58px;
    }

    .premium-connection-node--hdmi {
        right: 18px;
        bottom: 58px;
    }

    .premium-spec-table div {
        grid-template-columns: 1fr;
    }

    .premium-spec-table dt,
    .premium-spec-table dd {
        padding: 14px 16px;
    }

    .premium-spec-visual img {
        height: 250px;
    }

    .premium-comparison table {
        min-width: 680px;
    }

    .premium-product-modal {
        padding: 14px;
    }

    .premium-product-modal__dialog {
        border-radius: 24px;
        padding: 22px;
    }

    .premium-product-modal__content {
        grid-template-columns: 1fr;
    }

    .premium-product-modal--app .premium-product-modal__dialog {
        width: 100%;
    }

    .premium-product-modal--app [data-premium-modal-body] {
        border-radius: 20px;
        padding: 15px;
        font-size: 14px;
        line-height: 1.85;
    }

    .premium-product-modal--app .premium-product-modal__sections {
        grid-template-columns: 1fr;
    }

    .premium-product-modal--app .premium-product-modal__sections article,
    .premium-product-modal--app .premium-product-modal__sections article:nth-child(5) {
        grid-column: auto;
        min-height: 0;
        border-radius: 20px;
        padding: 17px 16px 16px 54px;
    }

    .premium-product-modal--app .premium-product-modal__dialog li {
        font-size: 12px;
    }

    .premium-product-modal--device .premium-product-modal__dialog {
        width: 100%;
    }

    .premium-product-modal--device [data-premium-modal-body] {
        border-radius: 20px;
        padding: 15px;
        font-size: 14px;
        line-height: 1.85;
    }

    .premium-product-modal--device .premium-product-modal__sections {
        grid-template-columns: 1fr;
    }

    .premium-product-modal--device .premium-product-modal__sections article,
    .premium-product-modal--device .premium-product-modal__sections article:last-child {
        grid-column: auto;
        border-radius: 20px;
        padding: 16px;
    }

    .premium-product-modal--device .premium-device-list {
        gap: 7px;
    }

    .premium-product-modal--device .premium-device-list li {
        font-size: 11.5px;
        padding: 7px 9px;
    }

    .premium-product-modal__image img {
        height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-product-page *,
    .premium-product-page *::before,
    .premium-product-page *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .premium-product-page.premium-has-js [data-premium-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .premium-product-page.premium-has-js .premium-product-hero__actions .button,
    .premium-product-page.premium-has-js .premium-product-hero__product img,
    .premium-product-page.premium-has-js .premium-product-hero__scene,
    .premium-product-page.premium-has-js .premium-product-hero__badge {
        opacity: 1 !important;
        transform: none !important;
    }

    .premium-product-page.premium-has-js .premium-connection-device {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }

    .premium-product-page.premium-has-js .premium-connection-node {
        opacity: 1 !important;
        transform: none !important;
    }

    .premium-product-page.premium-has-js .premium-connection-photo {
        opacity: 1 !important;
        transform: none !important;
    }

    .premium-connection-line {
        stroke-dashoffset: 0 !important;
    }
}

.phone-triage-open {
    overflow: hidden;
}

.phone-triage {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.phone-triage[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.phone-triage__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 34, 0.58);
    backdrop-filter: blur(10px);
}

.phone-triage__dialog {
    position: relative;
    width: min(920px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(240, 251, 250, 0.92), rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 86% 6%, rgba(255, 209, 102, 0.16), transparent 12rem),
        radial-gradient(circle at 8% 94%, rgba(126, 218, 215, 0.2), transparent 16rem),
        #FFFFFF;
    box-shadow: 0 30px 90px rgba(16, 32, 34, 0.28);
    padding: clamp(22px, 4vw, 38px);
    transform: translateY(14px) scale(0.98);
    transition: transform 200ms ease;
}

.phone-triage[aria-hidden="false"] .phone-triage__dialog {
    transform: translateY(0) scale(1);
}

.phone-triage__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-900, #063F3E);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.phone-triage__header {
    max-width: 760px;
    padding-right: 52px;
}

.phone-triage__eyebrow,
.phone-triage__result span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 900;
}

.phone-triage__header h2 {
    margin: 16px 0 10px;
    color: var(--oc-ink, #102022);
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.2;
    text-wrap: balance;
}

.phone-triage__header p:not(.phone-triage__eyebrow),
.phone-triage__result p,
.phone-triage__result li {
    color: var(--oc-text, #1F2933);
    line-height: 1.72;
}

.phone-triage__flow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.phone-triage__flow span {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
}

.phone-triage__flow span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -8px;
    width: 8px;
    height: 1px;
    background: var(--oc-primary-200, #BDEDEA);
}

.phone-triage__flow--panel {
    margin: -4px 0 14px;
}

.phone-triage__flow--panel span {
    background: var(--oc-primary-50, #F0FBFA);
}

.phone-triage__panel {
    display: none;
    margin-top: 24px;
}

.phone-triage__panel.is-active {
    display: block;
}

.phone-triage__question {
    margin: 0 0 14px;
    color: var(--oc-primary-900, #063F3E);
    font-size: 18px;
    font-weight: 900;
}

.phone-triage__hint {
    margin: -5px 0 16px;
    color: var(--oc-muted, #667085);
    font-size: 14px;
    line-height: 1.7;
}

.phone-triage__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.phone-triage__choices--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phone-triage__choices--sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phone-triage__choices--topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phone-triage__choices button,
.phone-triage__back {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--oc-ink, #102022);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 18px;
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.phone-triage__choices button {
    display: grid;
    min-height: 132px;
    align-content: start;
    gap: 9px;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(240, 251, 250, 0.88)),
        #FFFFFF;
}

.phone-triage__choices button[data-phone-triage-goto="source-other"] {
    border-color: rgba(255, 122, 89, 0.28);
    background:
        linear-gradient(140deg, #FFFFFF, rgba(255, 122, 89, 0.06)),
        #FFFFFF;
}

.phone-triage__choices button[data-phone-triage-goto="source-yenkilo"] {
    background:
        linear-gradient(140deg, #FFFFFF, rgba(114, 214, 255, 0.08)),
        #FFFFFF;
}

.phone-triage__choices button[data-phone-triage-goto="business"] {
    background:
        linear-gradient(140deg, #FFFFFF, rgba(114, 214, 255, 0.08)),
        #FFFFFF;
}

.phone-triage__choice-number {
    display: inline-grid;
    width: fit-content;
    min-width: 38px;
    min-height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.phone-triage__choices button[data-phone-triage-goto="source-other"] .phone-triage__choice-number {
    background: rgba(255, 122, 89, 0.12);
    color: #B5472F;
}

.phone-triage__choices button strong {
    display: block;
    color: var(--oc-ink, #102022);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.38;
}

.phone-triage__choices button small {
    display: block;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.phone-triage__choices button:hover,
.phone-triage__choices button:focus-visible,
.phone-triage__back:hover,
.phone-triage__back:focus-visible {
    border-color: var(--oc-primary-300, #7EDAD7);
    background: var(--oc-primary-50, #F0FBFA);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-2px);
}

.phone-triage__choices button[data-phone-triage-goto="source-other"]:hover,
.phone-triage__choices button[data-phone-triage-goto="source-other"]:focus-visible {
    border-color: rgba(255, 122, 89, 0.45);
    background:
        linear-gradient(140deg, #FFFFFF, rgba(255, 122, 89, 0.1)),
        #FFFFFF;
}

.phone-triage__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 13px;
}

.phone-triage__back::before {
    content: "←";
    font-size: 14px;
}

.phone-triage__result {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background:
        linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF 44%),
        #FFFFFF;
    padding: clamp(20px, 3vw, 28px);
    box-shadow: 0 18px 44px rgba(16, 32, 34, 0.08);
}

.phone-triage__result--maker {
    border-color: rgba(255, 122, 89, 0.28);
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 122, 89, 0.1), transparent 13rem),
        #FFFFFF;
}

.phone-triage__result--business {
    background:
        radial-gradient(circle at 88% 0%, rgba(114, 214, 255, 0.12), transparent 13rem),
        #FFFFFF;
}

.phone-triage__result h3 {
    margin: 16px 0 10px;
    color: var(--oc-ink, #102022);
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.28;
    text-wrap: balance;
}

.phone-triage__result ul {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.phone-triage__result li {
    position: relative;
    padding-left: 26px;
}

.phone-triage__result li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.75em;
    width: 11px;
    height: 7px;
    border-left: 3px solid var(--oc-primary, #179C99);
    border-bottom: 3px solid var(--oc-primary, #179C99);
    transform: rotate(-45deg);
}

.phone-triage__result--maker li::before {
    border-color: var(--oc-accent-coral, #FF7A59);
}

.phone-triage__source-preview {
    margin: 18px 0 0;
    overflow: hidden;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.phone-triage__source-preview--maker {
    border-color: rgba(255, 122, 89, 0.26);
    box-shadow: 0 14px 34px rgba(181, 71, 47, 0.09);
}

.phone-triage__source-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

.phone-triage__source-preview figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--oc-line, #DCEDEA);
    background: rgba(240, 251, 250, 0.78);
    padding: 12px 14px;
    color: var(--oc-primary-900, #063F3E);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.5;
}

.phone-triage__source-preview figcaption span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
}

.phone-triage__source-preview--maker figcaption {
    background: rgba(255, 250, 248, 0.96);
    color: #B5472F;
}

.phone-triage__source-visit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 251, 250, 0.9)),
        #FFFFFF;
    padding: 12px;
}

.phone-triage__source-visit span {
    min-width: 0;
    color: var(--oc-primary-900, #063F3E);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.55;
}

.phone-triage__source-visit .button {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 16px;
    font-size: 13px;
}

.phone-triage__source-visit--maker {
    border-color: rgba(255, 122, 89, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 248, 0.94)),
        #FFFFFF;
}

.phone-triage__source-visit--maker span {
    color: #B5472F;
}

.phone-triage__source-card {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(240, 251, 250, 0.92), #FFFFFF 58%),
        #FFFFFF;
    padding: clamp(16px, 2.4vw, 22px);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.07);
}

.phone-triage__source-card strong {
    color: var(--oc-primary-900, #063F3E);
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.45;
}

.phone-triage__source-card span {
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
}

.phone-triage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.phone-triage__actions .button {
    min-height: 48px;
}

.phone-triage__actions--contact {
    align-items: start;
    margin-top: 16px;
}

.phone-triage__actions--contact > .button {
    justify-content: center;
    min-width: min(220px, 100%);
    box-shadow: 0 10px 24px rgba(16, 32, 34, 0.06);
}

.phone-triage__call {
    display: grid;
    min-width: min(260px, 100%);
    gap: 10px;
}

.phone-triage__call .button {
    justify-content: center;
    width: 100%;
}

.phone-triage__number {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 12px 14px;
    box-shadow: 0 10px 24px rgba(16, 32, 34, 0.08);
}

.phone-triage__number[hidden] {
    display: none;
}

.phone-triage__number span {
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 900;
}

.phone-triage__number a {
    color: var(--oc-primary-900, #063F3E);
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 950;
    line-height: 1.2;
    text-decoration: none;
}

.phone-triage__number--maker {
    border-color: rgba(255, 122, 89, 0.28);
    background: rgba(255, 250, 248, 0.96);
}

.phone-triage__number--maker a {
    color: #B5472F;
}

.phone-triage__notice {
    margin: 12px 0 0;
    border: 1px solid rgba(255, 122, 89, 0.28);
    border-radius: 16px;
    background: rgba(255, 250, 248, 0.96);
    color: #8F321E !important;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65 !important;
}

.phone-triage button:focus-visible,
.phone-triage a:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.24);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .phone-triage {
        align-items: end;
        padding: 8px;
    }

    .phone-triage__dialog {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 20px;
        padding: 14px;
    }

    .phone-triage__header {
        padding-right: 34px;
    }

    .phone-triage__close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    .phone-triage__eyebrow,
    .phone-triage__result span {
        padding: 5px 9px;
        font-size: 11px;
    }

    .phone-triage__flow span:not(:last-child)::after {
        display: none;
    }

    .phone-triage__header h2 {
        margin: 8px 0 5px;
        font-size: 21px;
        line-height: 1.32;
    }

    .phone-triage__header p:not(.phone-triage__eyebrow) {
        margin: 0;
        font-size: 12.5px;
        line-height: 1.55;
    }

    .phone-triage__flow {
        gap: 5px;
        margin-top: 9px;
    }

    .phone-triage__flow--panel {
        margin: -2px 0 9px;
    }

    .phone-triage__flow span {
        padding: 5px 8px;
        font-size: 10.5px;
    }

    .phone-triage__panel {
        margin-top: 12px;
    }

    .phone-triage__question {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .phone-triage__choices,
    .phone-triage__choices--compact,
    .phone-triage__choices--topics,
    .phone-triage__choices--sources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .phone-triage__choices--topics button:nth-child(3) {
        grid-column: 1 / -1;
        min-height: 82px;
    }

    .phone-triage__choices button {
        min-height: 94px;
        border-radius: 14px;
        gap: 5px;
        padding: 10px;
    }

    .phone-triage__choice-number {
        min-width: 30px;
        min-height: 22px;
        padding: 3px 7px;
        font-size: 10px;
    }

    .phone-triage__choices button strong {
        font-size: 12.5px;
        line-height: 1.34;
    }

    .phone-triage__choices button small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 10.8px;
        line-height: 1.45;
    }

    .phone-triage__back {
        margin-bottom: 8px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .phone-triage__result {
        border-radius: 18px;
        padding: 13px;
    }

    .phone-triage__result h3 {
        margin: 9px 0 5px;
        font-size: 17px;
        line-height: 1.35;
    }

    .phone-triage__result p,
    .phone-triage__result li {
        font-size: 12px;
        line-height: 1.55;
    }

    .phone-triage__result ul {
        gap: 5px;
        margin-top: 10px;
    }

    .phone-triage__result li {
        padding-left: 20px;
    }

    .phone-triage__result li::before {
        width: 9px;
        height: 6px;
        border-left-width: 2px;
        border-bottom-width: 2px;
    }

    .phone-triage__actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }

    .phone-triage__actions--contact {
        position: sticky;
        top: -1px;
        z-index: 2;
        margin: 9px -4px 0;
        border: 1px solid rgba(189, 237, 234, 0.84);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        padding: 8px;
        box-shadow: 0 10px 26px rgba(16, 32, 34, 0.12);
    }

    .phone-triage__source-preview {
        margin-top: 10px;
        border-radius: 14px;
    }

    .phone-triage__source-preview img {
        max-height: 118px;
        object-fit: cover;
    }

    .phone-triage__source-preview figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding: 8px 10px;
        font-size: 11.5px;
    }

    .phone-triage__source-preview figcaption span {
        font-size: 10.8px;
    }

    .phone-triage__source-visit {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        margin-top: 8px;
        border-radius: 14px;
        padding: 9px;
    }

    .phone-triage__source-visit span {
        font-size: 11.5px;
        line-height: 1.45;
    }

    .phone-triage__source-visit .button {
        width: 100%;
        min-height: 38px;
        justify-content: center;
        padding-inline: 10px;
        text-align: center;
    }

    .phone-triage__source-card {
        gap: 6px;
        margin-top: 10px;
        border-radius: 14px;
        padding: 11px;
    }

    .phone-triage__source-card strong {
        font-size: 13px;
        line-height: 1.42;
    }

    .phone-triage__source-card span {
        font-size: 11.5px;
        line-height: 1.55;
    }

    .phone-triage__actions .button {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        padding-inline: 8px;
        font-size: 12.5px;
        text-align: center;
        white-space: normal;
    }

    .phone-triage__call {
        display: contents;
    }

    .phone-triage__number {
        grid-column: 1 / -1;
        justify-content: center;
        border-radius: 14px;
        padding: 9px 10px;
        text-align: center;
    }

    .phone-triage__number a {
        font-size: 18px;
    }

    .phone-triage__notice {
        margin-top: 9px;
        border-radius: 14px;
        padding: 9px 10px;
        font-size: 11.5px;
        line-height: 1.55 !important;
    }
}

/* Compatibility page refresh: grouped vehicle cards and bright brand UI */
.compatibility-page {
    overflow: clip;
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(223, 247, 245, 0.9), transparent 34rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 42%, #FFFFFF 100%);
}

.compat-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(189, 237, 234, 0.7);
    background:
        radial-gradient(circle at 12% 18%, rgba(126, 218, 215, 0.35), transparent 28rem),
        radial-gradient(circle at 88% 12%, rgba(255, 209, 102, 0.18), transparent 22rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 68%, #FFFFFF 100%);
}

.compat-hero::before,
.compat-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.compat-hero::before {
    inset: auto -14vw -120px auto;
    width: min(520px, 52vw);
    aspect-ratio: 1;
    border: 34px solid rgba(23, 156, 153, 0.08);
    border-radius: 50%;
}

.compat-hero::after {
    top: 14%;
    left: 49%;
    width: 280px;
    height: 120px;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 999px;
    transform: rotate(-13deg);
}

.compat-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1180px, calc(100% - 48px));
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.8fr);
    gap: clamp(32px, 6vw, 76px);
    align-items: center;
    margin: 0 auto;
    padding: clamp(58px, 8vw, 96px) 0 34px;
}

.compat-hero__copy {
    display: grid;
    align-content: start;
    gap: 18px;
}

.compat-hero__copy h1 {
    max-width: 11em;
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(40px, 6.1vw, 76px);
    letter-spacing: 0;
    line-height: 1.08;
}

.compat-hero__lead {
    max-width: 680px;
    margin: 0;
    color: var(--oc-text, #1F2933);
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.95;
}

.compat-hero__trust {
    width: fit-content;
    margin: 2px 0 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 900;
}

.compat-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.compat-hero__actions .button {
    min-height: 48px;
}

.compat-hero__visual {
    position: relative;
    display: grid;
    justify-items: end;
    gap: 14px;
}

.compat-hero__image-card {
    position: relative;
    width: min(100%, 520px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 34px;
    background: #FFFFFF;
    box-shadow: 0 26px 70px rgba(16, 32, 34, 0.13);
}

.compat-hero__image-card::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(23, 156, 153, 0.22);
    border-radius: 26px;
    pointer-events: none;
}

.compat-hero__image-card img {
    display: block;
    width: 100%;
    height: clamp(280px, 36vw, 430px);
    object-fit: cover;
}

.compat-hero__status-card {
    position: absolute;
    right: 22px;
    bottom: -24px;
    display: grid;
    max-width: min(340px, calc(100% - 44px));
    gap: 4px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 44px rgba(16, 32, 34, 0.12);
    padding: 16px 18px;
    backdrop-filter: blur(12px);
}

.compat-hero__status-card span {
    color: var(--oc-primary-700, #10817E);
    font-size: 12px;
    font-weight: 900;
}

.compat-hero__status-card strong {
    color: var(--oc-ink, #102022);
    font-size: 14px;
    line-height: 1.55;
}

.compat-hero__quick {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(1180px, calc(100% - 48px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 auto;
    padding: 0 0 clamp(42px, 5vw, 72px);
}

.compat-hero__quick a {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 12px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    padding: 18px 20px;
    color: var(--oc-text, #1F2933);
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.compat-hero__quick a::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--oc-primary-700, #10817E);
    border-bottom: 2px solid var(--oc-primary-700, #10817E);
    transform: translateY(-50%) rotate(-45deg);
}

.compat-hero__quick a:hover {
    border-color: var(--oc-primary, #179C99);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
    transform: translateY(-2px);
}

.compat-hero__quick span {
    grid-row: span 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 16px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 13px;
    font-weight: 900;
}

.compat-hero__quick strong {
    padding-right: 22px;
    color: var(--oc-ink, #102022);
    font-size: 16px;
    line-height: 1.35;
}

.compat-hero__quick small {
    padding-right: 22px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.compat-guided-search {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.compat-search__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: #FFFFFF;
}

.compat-search__steps span {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--oc-primary-900, #063F3E);
    font-size: 14px;
    font-weight: 900;
}

.compat-search__steps span:not(:last-child) {
    border-right: 1px solid var(--oc-line, #DCEDEA);
}

.compat-search__steps b {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    font-size: 13px;
}

.compatibility-page .compat-search__grid--guided {
    grid-template-columns: 1.05fr 1.4fr 0.9fr;
    gap: 14px;
}

.compatibility-page .form-field--priority {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    padding: 14px;
}

.compatibility-page .form-field--priority span {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 13px;
}

.compatibility-page .form-field--priority select {
    min-height: 58px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 800;
}

.compat-search__advanced {
    border: 1px dashed rgba(23, 156, 153, 0.45);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.68);
}

.compat-search__advanced summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 16px 52px 16px 18px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 14px;
    font-weight: 900;
}

.compat-search__advanced summary::-webkit-details-marker {
    display: none;
}

.compat-search__advanced summary::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-64%) rotate(45deg);
    transition: transform 180ms ease;
}

.compat-search__advanced[open] summary::after {
    transform: translateY(-34%) rotate(225deg);
}

.compatibility-page .compat-search__grid--advanced {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px dashed rgba(23, 156, 153, 0.32);
    padding: 16px;
}

.compatibility-page .page-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--oc-primary-200, #BDEDEA);
    background:
        radial-gradient(circle at 82% 20%, rgba(126, 218, 215, 0.38), transparent 19rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 64%, #FFFFFF 100%);
}

.compatibility-page .page-hero::before,
.compatibility-page .page-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.compatibility-page .page-hero::before {
    right: max(32px, calc((100vw - 1120px) / 2));
    bottom: 34px;
    width: min(420px, 34vw);
    height: 180px;
    border: 3px solid rgba(23, 156, 153, 0.16);
    border-radius: 999px;
    transform: rotate(-10deg);
}

.compatibility-page .page-hero::after {
    right: 12%;
    top: 62px;
    width: 180px;
    height: 180px;
    border-radius: 42px;
    background:
        linear-gradient(135deg, rgba(23, 156, 153, 0.14), rgba(255, 255, 255, 0.7));
    transform: rotate(12deg);
}

.compatibility-page .page-hero__inner {
    position: relative;
    z-index: 1;
}

.compatibility-page .page-hero h1,
.compatibility-page .page-hero h2,
.compatibility-page .page-hero h3,
.compatibility-page .compat-search h2,
.compatibility-page .fitment-results h2,
.compatibility-page .vehicle-fitment-card h3,
.compatibility-page .vehicle-fitment-product h4 {
    color: var(--oc-ink, #102022);
}

.compatibility-page .page-hero__lead,
.compatibility-page .compat-search p,
.compatibility-page .vehicle-fitment-card__title p,
.compatibility-page .vehicle-fitment-card__cta p,
.compatibility-page .vehicle-fitment-product__notes p {
    color: var(--oc-muted, #667085);
}

.compatibility-page .eyebrow {
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 6px 12px;
    text-transform: none;
    letter-spacing: 0;
}

.compatibility-page .hero-badges span,
.compatibility-page .compatibility-chip,
.compatibility-page .vehicle-fitment-card__chips span,
.compatibility-page .fitment-status-count {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.compatibility-page .button {
    border-radius: 999px;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.compatibility-page .button--primary {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
}

.compatibility-page .button--primary:hover {
    border-color: var(--oc-primary-700, #10817E);
    background: var(--oc-primary-700, #10817E);
    transform: translateY(-2px);
}

.compatibility-page .button--secondary,
.compatibility-page .button--ghost {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.compatibility-page .button--secondary:hover,
.compatibility-page .button--ghost:hover {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-900, #063F3E);
    transform: translateY(-2px);
}

.compatibility-page .brand-device {
    position: relative;
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--oc-shadow-md, 0 18px 48px rgba(16, 32, 34, 0.12));
}

.compatibility-page .brand-device::before {
    content: "";
    position: absolute;
    inset: -20px -24px auto auto;
    width: 138px;
    height: 138px;
    border: 3px solid var(--oc-primary-300, #7EDAD7);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
}

.compatibility-page .brand-device__screen {
    border-radius: 26px;
    background:
        linear-gradient(135deg, var(--oc-primary-900, #063F3E), var(--oc-primary-700, #10817E));
}

.compatibility-page .brand-device__screen span {
    color: var(--oc-primary-100, #DFF7F5);
}

.compatibility-page .brand-device__row i {
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 20px;
    background: var(--oc-primary-50, #F0FBFA);
}

.compatibility-page .section:nth-of-type(even) {
    background: rgba(247, 251, 250, 0.76);
}

.compatibility-page .compat-search {
    position: relative;
    overflow: hidden;
    gap: 26px;
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: var(--oc-radius-xl, 36px);
    background:
        linear-gradient(135deg, rgba(240, 251, 250, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.compatibility-page .compat-search::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -58px;
    width: 190px;
    height: 190px;
    border: 26px solid rgba(23, 156, 153, 0.1);
    border-radius: 50%;
}

.compatibility-page .compat-search__header,
.compatibility-page .fitment-results__header,
.compatibility-page .compatibility-summary {
    align-items: flex-end;
}

.compatibility-page .compat-search__grid {
    position: relative;
    z-index: 1;
}

.compatibility-page .form-field input,
.compatibility-page .form-field select,
.compatibility-page .form-field textarea {
    min-height: 50px;
    border-color: var(--oc-line, #DCEDEA);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--oc-text, #1F2933);
    box-shadow: 0 1px 0 rgba(16, 32, 34, 0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.compatibility-page .form-field input:focus,
.compatibility-page .form-field select:focus,
.compatibility-page .form-field textarea:focus {
    outline: 0;
    border-color: var(--oc-primary, #179C99);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(23, 156, 153, 0.14);
}

.compatibility-page .fitment-results__header {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.86);
    padding: 18px 20px;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.compatibility-page .fitment-results__header p:last-child {
    margin: 0;
    color: var(--oc-primary-800, #0B5F5C);
}

.vehicle-fitment-list {
    display: grid;
    gap: 24px;
}

.vehicle-fitment-card {
    position: relative;
    display: grid;
    gap: 22px;
    overflow: hidden;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: var(--oc-radius-xl, 36px);
    background: #FFFFFF;
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.vehicle-fitment-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg, var(--oc-primary, #179C99), var(--oc-primary-300, #7EDAD7));
}

.vehicle-fitment-card__cta,
.vehicle-fitment-product__head,
.vehicle-fitment-product__actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.vehicle-fitment-card__top {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
}

.vehicle-fitment-card__media {
    position: relative;
    overflow: hidden;
    min-height: 172px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 26px;
    background:
        radial-gradient(circle at 20% 20%, rgba(126, 218, 215, 0.36), transparent 42%),
        var(--oc-primary-50, #F0FBFA);
    margin: 0;
}

.vehicle-fitment-card__media::after {
    content: "";
    position: absolute;
    inset: auto -18px -42px auto;
    width: 112px;
    height: 112px;
    border: 18px solid rgba(23, 156, 153, 0.13);
    border-radius: 50%;
}

.vehicle-fitment-card__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 172px;
    object-fit: cover;
}

.vehicle-fitment-card__title {
    max-width: 760px;
}

.vehicle-fitment-card__title h3 {
    margin-bottom: 10px;
    font-size: clamp(24px, 3vw, 32px);
}

.vehicle-fitment-card__summary {
    display: grid;
    justify-items: end;
    gap: 10px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.vehicle-fitment-card__facts,
.vehicle-fitment-year__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 22px;
    background: var(--oc-line, #DCEDEA);
    margin: 0;
}

.vehicle-fitment-card__facts div,
.vehicle-fitment-year__meta div {
    min-width: 0;
    background: #FFFFFF;
    padding: 14px 16px;
}

.vehicle-fitment-card__facts dt,
.vehicle-fitment-year__meta dt {
    margin-bottom: 6px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
}

.vehicle-fitment-card__facts dd,
.vehicle-fitment-year__meta dd {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.vehicle-fitment-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.vehicle-fitment-card__chips span,
.fitment-status-count {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 800;
}

.vehicle-fitment-year-list {
    display: grid;
    gap: 14px;
}

.vehicle-fitment-year {
    overflow: hidden;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 26px;
    background: var(--oc-primary-50, #F0FBFA);
}

.vehicle-fitment-year[open] {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    box-shadow: 0 16px 36px rgba(16, 32, 34, 0.08);
}

.vehicle-fitment-year summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    cursor: pointer;
    list-style: none;
    padding: 18px 20px;
}

.vehicle-fitment-year summary::-webkit-details-marker {
    display: none;
}

.vehicle-fitment-year summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--oc-primary-700, #10817E);
    border-bottom: 2px solid var(--oc-primary-700, #10817E);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.vehicle-fitment-year[open] summary::after {
    transform: rotate(225deg);
}

.vehicle-fitment-year__title {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.vehicle-fitment-year__title strong {
    color: var(--oc-ink, #102022);
    font-size: 18px;
}

.vehicle-fitment-year__title small {
    color: var(--oc-muted, #667085);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vehicle-fitment-year__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.fitment-status-count--ok {
    background: #E9F8F2;
    color: #087443;
}

.fitment-status-count--conditional {
    border-color: rgba(255, 209, 102, 0.7);
    background: #FFF7DF;
    color: #8A6100;
}

.fitment-status-count--ng {
    border-color: rgba(255, 122, 89, 0.45);
    background: #FFF0EC;
    color: #B93815;
}

.fitment-status-count--unknown {
    background: #F3F7F7;
    color: var(--oc-muted, #667085);
}

.vehicle-fitment-year__body {
    display: grid;
    gap: 18px;
    border-top: 1px solid var(--oc-line, #DCEDEA);
    padding: 20px;
}

.vehicle-fitment-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vehicle-fitment-product {
    display: grid;
    align-content: start;
    gap: 14px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 24px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(240, 251, 250, 0.72) 100%);
    padding: 18px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.vehicle-fitment-product:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
    transform: translateY(-2px);
}

.vehicle-fitment-product__head {
    align-items: flex-start;
}

.vehicle-fitment-product__head p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 7px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 12px;
    font-weight: 800;
}

.vehicle-fitment-product__head p span {
    border-radius: 999px;
    background: var(--oc-accent-yellow, #FFD166);
    color: var(--oc-ink, #102022);
    padding: 2px 8px;
}

.vehicle-fitment-product__head h4 {
    margin: 0;
    font-size: 18px;
}

.vehicle-fitment-product__status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    border-radius: 18px;
    background: rgba(240, 251, 250, 0.72);
    padding: 10px;
}

.vehicle-fitment-product__status-list .fitment-status-count {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 11px;
}

.vehicle-fitment-product__conditions {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vehicle-fitment-product__conditions li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    line-height: 1.7;
}

.vehicle-fitment-product__conditions span {
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.vehicle-fitment-product__scope {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    padding: 12px 14px;
}

.vehicle-fitment-product__scope strong {
    color: var(--oc-primary-900, #063F3E);
    font-size: 13px;
}

.vehicle-fitment-product__scope div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.vehicle-fitment-product__scope span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-text, #1F2933);
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.vehicle-fitment-product__notes {
    display: grid;
    gap: 6px;
    border-left: 4px solid var(--oc-primary, #179C99);
    border-radius: 18px;
    background: #FFFFFF;
    padding: 13px 15px;
}

.vehicle-fitment-product__notes strong {
    color: var(--oc-ink, #102022);
}

.vehicle-fitment-product__notes p {
    margin: 0;
    line-height: 1.75;
}

.vehicle-fitment-product__notes span {
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
}

.vehicle-fitment-product__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.vehicle-fitment-product__actions .button {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
}

.vehicle-fitment-card__cta {
    align-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 26px;
    background:
        linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF);
    padding: 18px 20px;
}

.vehicle-fitment-card__cta strong {
    display: block;
    margin-bottom: 4px;
    color: var(--oc-primary-900, #063F3E);
    font-size: 18px;
}

.vehicle-fitment-card__cta > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fitment-subheading {
    margin: 6px 0 0;
}

.compatibility-page .fitment-card,
.compatibility-page .compatibility-product,
.compatibility-page .compatibility-summary,
.compatibility-page .compatibility-chip {
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    box-shadow: var(--oc-shadow-sm, 0 8px 24px rgba(16, 32, 34, 0.08));
}

.compatibility-page .fitment-card__meta {
    border-color: var(--oc-line, #DCEDEA);
    border-radius: 20px;
}

.compatibility-page .fitment-card__notes,
.compatibility-page .fitment-card__conditions {
    border-radius: 18px;
}

.compatibility-page .compatibility-chip {
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.compatibility-page .compatibility-chip:hover {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary-50, #F0FBFA);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .compat-hero::after {
        left: auto;
        right: 12px;
        opacity: 0.45;
    }

    .compat-hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 52px 0 28px;
    }

    .compat-hero__copy h1 {
        max-width: 12em;
    }

    .compat-hero__visual {
        justify-items: stretch;
    }

    .compat-hero__image-card {
        width: 100%;
    }

    .compat-hero__status-card {
        right: 18px;
        bottom: 18px;
    }

    .compat-hero__quick {
        grid-template-columns: 1fr;
    }

    .compatibility-page .compat-search__grid--guided,
    .compatibility-page .compat-search__grid--advanced {
        grid-template-columns: 1fr;
    }

    .compatibility-page .page-hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 64px 0 54px;
    }

    .compatibility-page .page-hero__visual {
        justify-content: flex-start;
    }

    .vehicle-fitment-card__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .vehicle-fitment-card__top {
        grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    }

    .vehicle-fitment-card__summary {
        grid-column: 1 / -1;
    }

    .vehicle-fitment-card__summary {
        justify-items: start;
        white-space: normal;
    }

    .vehicle-fitment-card__facts,
    .vehicle-fitment-year__meta,
    .vehicle-fitment-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .compat-hero::before {
        width: 320px;
        border-width: 20px;
    }

    .compat-hero__inner,
    .compat-hero__quick {
        width: min(1120px, calc(100% - 28px));
    }

    .compat-hero__inner {
        gap: 22px;
        padding: 38px 0 22px;
    }

    .compat-hero__copy {
        gap: 14px;
    }

    .compat-hero__copy h1 {
        font-size: clamp(34px, 11vw, 44px);
        line-height: 1.12;
    }

    .compat-hero__lead {
        font-size: 14px;
        line-height: 1.82;
    }

    .compat-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .compat-hero__actions .button {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .compat-hero__image-card {
        border-radius: 24px;
    }

    .compat-hero__image-card img {
        height: min(64vw, 320px);
        min-height: 220px;
    }

    .compat-hero__status-card {
        position: static;
        max-width: none;
        margin-top: -8px;
        border-radius: 20px;
    }

    .compat-hero__quick {
        padding-bottom: 40px;
    }

    .compat-hero__quick a {
        grid-template-columns: auto minmax(0, 1fr);
        border-radius: 20px;
        padding: 15px 16px;
    }

    .compat-search__steps {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .compat-search__steps span {
        min-height: 48px;
        justify-content: flex-start;
        padding: 0 16px;
    }

    .compat-search__steps span:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--oc-line, #DCEDEA);
    }

    .compatibility-page .form-field--priority {
        border-radius: 18px;
        padding: 12px;
    }

    .compatibility-page .form-field--priority select {
        min-height: 52px;
        font-size: 15px;
    }

    .compatibility-page .page-hero::before,
    .compatibility-page .page-hero::after {
        opacity: 0.4;
    }

    .compatibility-page .page-hero__inner,
    .compatibility-page .section__inner {
        width: min(1120px, calc(100% - 28px));
    }

    .compatibility-page .page-hero h1 {
        font-size: 32px;
    }

    .compatibility-page .page-hero__actions,
    .compatibility-page .compat-search__actions {
        align-items: stretch;
    }

    .compatibility-page .page-hero__actions .button,
    .compatibility-page .compat-search__actions .button,
    .vehicle-fitment-product__actions .button,
    .vehicle-fitment-card__cta .button {
        width: 100%;
        min-height: 48px;
        white-space: normal;
        text-align: center;
    }

    .compatibility-page .compat-search,
    .vehicle-fitment-card {
        border-radius: 26px;
    }

    .vehicle-fitment-card__top {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vehicle-fitment-card__media {
        min-height: 210px;
    }

    .vehicle-fitment-card__media img {
        min-height: 210px;
    }

    .vehicle-fitment-card__facts,
    .vehicle-fitment-year__meta,
    .vehicle-fitment-products {
        grid-template-columns: 1fr;
    }

    .vehicle-fitment-year summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .vehicle-fitment-year summary::after {
        position: absolute;
        right: 20px;
        top: 24px;
    }

    .vehicle-fitment-year__badges {
        justify-content: flex-start;
        padding-right: 24px;
    }

    .vehicle-fitment-product__head {
        flex-direction: column;
    }

    .vehicle-fitment-product__conditions li {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .compatibility-page .button,
    .compatibility-page .compatibility-chip,
    .vehicle-fitment-product,
    .vehicle-fitment-year summary::after,
    .compat-hero__quick a,
    .compat-search__advanced summary::after {
        transition: none !important;
    }

    .compatibility-page .button:hover,
    .compatibility-page .compatibility-chip:hover,
    .vehicle-fitment-product:hover,
    .compat-hero__quick a:hover {
        transform: none !important;
    }
}

@media (max-width: 640px) {
    .home-page .home-hero__panel--back {
        right: 18px;
        width: min(180px, 44vw);
        height: 38%;
        opacity: 0.72;
        animation: none;
        transform: none !important;
    }
}

/* Keep mobile navigation rules last after the TOP refresh block. */
@media (max-width: 1040px) {
    .site-nav,
    .site-header__actions {
        display: none;
    }

    body {
        padding-bottom: 66px;
    }

    .mobile-nav {
        display: block;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-background);
    }

    .mobile-nav details {
        width: min(1120px, calc(100% - 40px));
        margin: 0 auto;
        padding: 10px 0;
    }

    .mobile-nav summary {
        min-height: 44px;
        cursor: pointer;
        color: var(--color-dark);
        font-weight: 700;
    }

    .mobile-nav nav {
        display: grid;
        gap: 10px;
        padding: 10px 0 16px;
    }

    .mobile-nav a {
        display: flex;
        min-height: 44px;
        align-items: center;
        color: var(--color-text);
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-fixed-cta {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--color-border);
        background: var(--color-background);
        box-shadow: 0 -12px 28px rgba(11, 15, 20, 0.08);
    }

    .mobile-fixed-cta a {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: center;
        color: var(--color-dark);
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }

    .mobile-fixed-cta a:first-child {
        background: var(--color-primary);
        color: var(--color-background);
    }
}

@media (max-width: 640px) {
    .mobile-nav details {
        width: min(1120px, calc(100% - 28px));
    }

    .mobile-fixed-cta a {
        min-height: 56px;
        padding: 8px 4px;
    }
}

/* Shared header / footer refresh aligned with the bright Ottocast brand UI. */
.site-header {
    top: 0;
    border-bottom: 1px solid rgba(189, 237, 234, 0.76);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
        rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 44px rgba(16, 32, 34, 0.07);
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--oc-primary, #179C99), var(--oc-primary-300, #7EDAD7), var(--oc-accent-yellow, #FFD166));
}

.site-header__inner,
.site-footer__inner {
    width: min(1180px, calc(100% - 48px));
}

.site-header__inner {
    min-height: 82px;
    gap: 20px;
}

.site-logo {
    position: relative;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    color: var(--oc-ink, #102022);
}

.site-logo__mark {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 16px;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.9), transparent 34%),
        linear-gradient(145deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C));
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.22);
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.site-logo__text {
    display: grid;
    gap: 1px;
}

.site-logo span:not(.site-logo__mark):not(.site-logo__text) {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0;
}

.site-logo small {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 12px;
    font-weight: 900;
}

.site-nav {
    justify-content: center;
    border: 1px solid rgba(220, 237, 234, 0.88);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    padding: 7px;
}

.site-nav > a,
.mega-menu summary {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border-radius: 999px;
    color: var(--oc-text, #1F2933);
    padding: 0 13px;
    font-size: 14px;
    font-weight: 900;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.site-nav > a:hover,
.site-nav > a:focus-visible,
.mega-menu summary:hover,
.mega-menu summary:focus-visible {
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
}

.mega-menu summary::after {
    border-width: 0 2px 2px 0;
    color: var(--oc-primary, #179C99);
}

.mega-menu__panel {
    top: calc(100% + 16px);
    grid-template-columns: 0.88fr 1.12fr;
    gap: 16px;
    width: min(780px, calc(100vw - 48px));
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background:
        radial-gradient(circle at 8% 6%, rgba(223, 247, 245, 0.92), transparent 16rem),
        #FFFFFF;
    box-shadow: 0 28px 80px rgba(16, 32, 34, 0.16);
    padding: 16px;
}

.mega-menu__intro {
    overflow: hidden;
    border: 1px solid rgba(126, 218, 215, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 14%, rgba(255, 209, 102, 0.18), transparent 9rem),
        linear-gradient(145deg, var(--oc-primary-900, #063F3E), var(--oc-primary-800, #0B5F5C));
    color: #FFFFFF;
    padding: 24px;
}

.mega-menu__intro span,
.mega-menu__item span {
    color: var(--oc-primary-200, #BDEDEA);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.mega-menu__intro strong {
    margin: 8px 0;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1.35;
}

.mega-menu__intro p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.72;
}

.mega-menu__item {
    min-height: 128px;
    border-color: var(--oc-line, #DCEDEA);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    padding: 17px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.mega-menu__item:hover,
.mega-menu__item:focus-visible {
    border-color: var(--oc-primary-300, #7EDAD7);
    background: var(--oc-primary-50, #F0FBFA);
    box-shadow: 0 16px 36px rgba(16, 32, 34, 0.1);
    transform: translateY(-2px);
}

.mega-menu__item span {
    color: var(--oc-primary-800, #0B5F5C);
}

.mega-menu__item strong {
    color: var(--oc-ink, #102022);
    font-size: 17px;
}

.mega-menu__item small {
    color: var(--oc-muted, #667085);
}

.site-header__actions {
    gap: 10px;
}

.site-header__actions .button {
    min-height: 46px;
    border-color: var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    box-shadow: 0 10px 26px rgba(16, 32, 34, 0.06);
    padding-inline: 17px;
}

.site-header__actions .button:hover,
.site-header__actions .button:focus-visible {
    border-color: var(--oc-primary-300, #7EDAD7);
    background: var(--oc-primary-50, #F0FBFA);
}

.header-phone-cta {
    min-height: 50px;
    border: 1px solid rgba(255, 122, 89, 0.2);
    border-radius: 999px;
    background:
        linear-gradient(135deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C));
    box-shadow: var(--oc-shadow-primary, 0 18px 44px rgba(23, 156, 153, 0.24));
    color: #FFFFFF;
    padding: 9px 18px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.header-phone-cta:hover,
.header-phone-cta:focus-visible {
    color: #FFFFFF;
    box-shadow: 0 18px 44px rgba(23, 156, 153, 0.3);
    transform: translateY(-1px);
}

.header-phone-cta span {
    font-size: 13px;
    font-weight: 900;
}

.header-phone-cta small {
    color: rgba(255, 255, 255, 0.82);
}

.site-footer {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    border-top: 1px solid rgba(126, 218, 215, 0.24);
    background:
        radial-gradient(circle at 12% 0%, rgba(36, 184, 180, 0.32), transparent 24rem),
        radial-gradient(circle at 92% 12%, rgba(255, 209, 102, 0.12), transparent 18rem),
        linear-gradient(145deg, var(--oc-primary-900, #063F3E), #0A2221 58%, #071817);
    color: #FFFFFF;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 76%);
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.85fr) minmax(0, 1.35fr);
    gap: 24px;
    padding: clamp(54px, 7vw, 82px) 0;
}

.site-footer__brand,
.site-footer__contact,
.site-footer__links {
    border: 1px solid rgba(189, 237, 234, 0.18);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 54px rgba(0, 0, 0, 0.16);
    padding: clamp(22px, 3vw, 28px);
}

.site-logo--footer {
    color: #FFFFFF;
}

.site-logo--footer .site-logo__mark {
    border-color: rgba(189, 237, 234, 0.24);
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.88), transparent 34%),
        linear-gradient(145deg, var(--oc-primary-500, #24B8B4), var(--oc-primary, #179C99));
}

.site-logo--footer small,
.site-footer p,
.site-footer__links a {
    color: rgba(255, 255, 255, 0.76);
}

.site-footer__company {
    margin: 22px 0 8px;
    color: #FFFFFF !important;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.55;
}

.site-footer__lead {
    max-width: 32em;
    margin: 0;
    line-height: 1.85;
}

.site-footer__badges,
.site-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.site-footer__badges span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    border: 1px solid rgba(189, 237, 234, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--oc-primary-100, #DFF7F5);
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 900;
}

.site-footer__label {
    margin: 0 0 10px;
    color: var(--oc-primary-200, #BDEDEA);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.site-footer__phone {
    margin: 0 0 12px;
    color: #FFFFFF !important;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.25;
}

.site-footer__phone--text {
    max-width: 9em;
    font-size: clamp(21px, 2.2vw, 28px);
}

.site-footer__actions a,
.site-footer__links a {
    text-decoration: none;
}

.site-footer__actions a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(189, 237, 234, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    padding: 8px 14px;
    font-weight: 900;
}

.site-footer__actions a:first-child {
    border-color: transparent;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.site-footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.site-footer__links > div {
    display: grid;
    align-content: start;
    gap: 9px;
}

.site-footer__links a {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.45;
    white-space: nowrap;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__actions a:hover,
.site-footer__actions a:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 1120px) {
    .site-header__inner,
    .site-footer__inner {
        width: min(1180px, calc(100% - 32px));
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .site-footer__links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1040px) {
    .site-header__inner {
        min-height: 70px;
    }

    .mobile-nav {
        border-bottom: 1px solid var(--oc-line, #DCEDEA);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 251, 250, 0.9)),
            #FFFFFF;
        box-shadow: 0 14px 36px rgba(16, 32, 34, 0.06);
    }

    .mobile-nav details {
        width: min(1180px, calc(100% - 32px));
    }

    .mobile-nav summary {
        display: flex;
        min-height: 52px;
        align-items: center;
        justify-content: space-between;
        color: var(--oc-primary-900, #063F3E);
        font-weight: 900;
    }

    .mobile-nav summary::after {
        content: "";
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--oc-primary, #179C99);
        border-bottom: 2px solid var(--oc-primary, #179C99);
        transform: rotate(45deg) translateY(-2px);
    }

    .mobile-nav details[open] summary::after {
        transform: rotate(225deg) translate(-2px, -2px);
    }

    .mobile-nav nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 8px 0 18px;
    }

    .mobile-nav a {
        min-height: 48px;
        border: 1px solid var(--oc-line, #DCEDEA);
        border-radius: 16px;
        background: #FFFFFF;
        color: var(--oc-text, #1F2933);
        padding: 10px 12px;
        box-shadow: 0 8px 20px rgba(16, 32, 34, 0.05);
    }

    .mobile-fixed-cta {
        z-index: 60;
        gap: 8px;
        border-top: 1px solid rgba(189, 237, 234, 0.84);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 -16px 42px rgba(16, 32, 34, 0.12);
        padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
        backdrop-filter: blur(14px);
    }

    .mobile-fixed-cta a {
        min-height: 48px;
        border: 1px solid var(--oc-line, #DCEDEA);
        border-radius: 999px;
        background: #FFFFFF;
        color: var(--oc-primary-800, #0B5F5C);
        font-size: 13px;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(16, 32, 34, 0.08);
    }

    .mobile-fixed-cta a:first-child {
        border-color: transparent;
        background: linear-gradient(135deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C));
        color: #FFFFFF;
    }
}

@media (max-width: 760px) {
    .site-logo__mark {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .site-logo span:not(.site-logo__mark):not(.site-logo__text) {
        font-size: 21px;
    }

    .site-footer__inner {
        width: min(1180px, calc(100% - 28px));
        padding: 44px 0 96px;
    }

    .site-footer__brand,
    .site-footer__contact,
    .site-footer__links {
        border-radius: 24px;
        padding: 22px;
    }

    .site-footer__links {
        grid-template-columns: 1fr;
    }

    .site-footer__links a {
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .mobile-nav nav {
        grid-template-columns: 1fr;
    }

    .mobile-fixed-cta a {
        min-height: 46px;
        padding: 8px 5px;
        font-size: 12px;
    }
}

/* Simple shared header / footer reset. */
.site-header {
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
}

.site-header::before {
    display: none;
}

.site-header__inner {
    min-height: 72px;
}

.site-logo,
.site-logo--footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.site-header .site-logo {
    align-items: center;
    min-width: 136px;
}

.site-logo__image {
    display: block;
    width: clamp(132px, 12vw, 172px);
    height: auto;
    max-height: 31px;
    object-fit: contain;
}

.site-logo span {
    color: var(--oc-ink, #102022);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.site-logo small {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
}

.site-nav {
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.site-nav > a,
.mega-menu summary {
    min-height: 40px;
    border-radius: 0;
    background: transparent;
    color: var(--oc-text, #1F2933);
    padding: 0 6px;
    font-size: 14px;
    font-weight: 800;
}

.site-nav > a:hover,
.site-nav > a:focus-visible,
.mega-menu summary:hover,
.mega-menu summary:focus-visible {
    background: transparent;
    color: var(--oc-primary-800, #0B5F5C);
}

.mega-menu__panel {
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 20px 54px rgba(16, 32, 34, 0.12);
}

.mega-menu__intro {
    border-radius: 16px;
    background: var(--oc-primary-900, #063F3E);
}

.mega-menu__item {
    min-height: 116px;
    border-radius: 14px;
    box-shadow: none;
}

.site-header__actions .button {
    min-height: 42px;
    border-color: var(--oc-line, #DCEDEA);
    background: #FFFFFF;
    box-shadow: none;
    padding-inline: 16px;
}

.header-phone-cta {
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    box-shadow: none;
    padding: 9px 16px;
}

.header-phone-cta:hover,
.header-phone-cta:focus-visible {
    background: var(--oc-primary-800, #0B5F5C);
    box-shadow: none;
    transform: none;
}

.header-phone-cta small {
    display: none;
}

.site-footer {
    margin-top: 0;
    border-top: 1px solid rgba(189, 237, 234, 0.2);
    background: var(--oc-primary-900, #063F3E);
}

.site-footer::before {
    display: none;
}

.site-footer__inner {
    grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.5fr);
    gap: clamp(28px, 4vw, 54px);
    padding: clamp(44px, 6vw, 64px) 0;
}

.site-footer__brand,
.site-footer__links {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.site-logo--footer span {
    color: #FFFFFF;
}

.site-logo--footer small,
.site-footer p,
.site-footer__links a {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer__company {
    margin: 20px 0 8px;
    font-size: 16px;
}

.site-footer__lead {
    max-width: 30em;
    line-height: 1.8;
}

.site-footer__label {
    color: var(--oc-primary-200, #BDEDEA);
    font-size: 12px;
}

.site-footer__phone {
    font-size: clamp(20px, 2vw, 25px);
}

.site-footer__phone--text {
    max-width: none;
    font-size: clamp(18px, 1.5vw, 21px);
}

.site-footer__badges {
    display: none;
}

.site-footer__actions {
    gap: 10px;
    margin-top: 18px;
}

.site-footer__actions a {
    min-height: 40px;
    border-color: rgba(189, 237, 234, 0.3);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #FFFFFF;
    padding: 8px 13px;
}

.site-footer__actions a:first-child {
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.site-footer__links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
}

.site-footer__links > div {
    gap: 8px;
}

.site-footer__links a {
    min-height: 28px;
    font-weight: 700;
    white-space: normal;
}

.site-footer__bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    border-top: 1px solid rgba(189, 237, 234, 0.18);
    padding: 18px 0 24px;
}

.site-footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 1120px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .site-footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__bottom {
        width: min(1180px, calc(100% - 32px));
    }
}

@media (max-width: 1040px) {
    .site-header__inner {
        min-height: 64px;
    }

    .mobile-nav {
        border-bottom: 1px solid var(--oc-line, #DCEDEA);
        background: #FFFFFF;
        box-shadow: none;
    }

    .mobile-nav summary {
        min-height: 48px;
    }

    .mobile-nav nav {
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid var(--oc-line, #DCEDEA);
        padding: 0;
    }

    .mobile-nav a {
        min-height: 46px;
        border: 0;
        border-bottom: 1px solid var(--oc-line, #DCEDEA);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 10px 0;
    }

    .mobile-fixed-cta {
        gap: 6px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -8px 24px rgba(16, 32, 34, 0.08);
        padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    }

    .mobile-fixed-cta a {
        min-height: 44px;
        border-radius: 999px;
        box-shadow: none;
    }
}

@media (max-width: 760px) {
    .site-header .site-logo {
        min-width: 118px;
    }

    .site-logo__image {
        width: 124px;
        max-height: 24px;
    }

    .site-logo span {
        font-size: 22px;
    }

    .site-footer__inner {
        padding: 40px 0 92px;
    }

    .site-footer__bottom {
        width: min(1180px, calc(100% - 28px));
        padding-bottom: 104px;
    }

    .site-footer__links {
        grid-template-columns: 1fr;
    }
}

/* Product index cleanup: keep product cards compact and images proportional. */
.product-index-page .section {
    padding-block: clamp(48px, 6vw, 72px);
}

.product-index-page .section + .section {
    padding-top: clamp(20px, 3vw, 34px);
}

.product-index-page .product-tabs {
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 14px;
}

.product-index-page .product-tab,
.product-index-page .purpose-filter {
    min-height: auto;
    border-radius: 22px;
    padding: 18px;
}

.product-index-page .product-tab small,
.product-index-page .purpose-filter small {
    display: block;
    margin-top: 6px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    line-height: 1.55;
}

.product-index-page .product-search {
    align-items: end;
    gap: 16px;
    border-radius: 28px;
    padding: clamp(18px, 2.6vw, 28px);
}

.product-index-page .product-search__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-index-page .purpose-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.product-index-page .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 22px;
    align-items: stretch;
}

.product-index-page .product-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 12px 34px rgba(16, 32, 34, 0.08);
}

.product-index-page .product-card__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    padding: clamp(14px, 2vw, 20px);
}

.product-index-page .product-card__media::after {
    content: none;
    display: none;
}

.product-index-page .product-card__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
}

.product-index-page .product-card:hover .product-card__media img {
    transform: scale(1.025);
}

.product-index-page .product-card__body {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px;
    min-width: 0;
    padding: 20px;
}

.product-index-page .product-card__category {
    width: fit-content;
    margin: 0;
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
}

.product-index-page .product-card h3 {
    margin: 0;
    font-size: clamp(18px, 1.65vw, 22px);
    line-height: 1.35;
    letter-spacing: 0;
}

.product-index-page .product-card__body > p {
    display: -webkit-box;
    min-height: calc(1.72em * 2);
    margin: 0;
    overflow: hidden;
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    line-height: 1.72;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.product-index-page .product-card__features {
    gap: 7px;
    margin: 4px 0 0;
}

.product-index-page .product-card__features li {
    color: var(--oc-muted, #667085);
    font-size: 13px;
    line-height: 1.5;
}

.product-index-page .product-card__actions {
    align-self: end;
    display: grid;
    grid-template-columns: 0.85fr 1.3fr 1fr;
    gap: 6px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--oc-line, #DCEDEA);
}

.product-index-page .product-card__actions .text-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.product-index-page .product-card__actions .text-link:first-child {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(23, 156, 153, 0.2);
}

.product-index-page .product-card__actions .text-link:hover,
.product-index-page .product-card__actions .text-link:focus-visible {
    border-color: var(--oc-primary-700, #10817E);
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-900, #063F3E);
    transform: translateY(-1px);
}

.product-index-page .product-card__actions .text-link:first-child:hover,
.product-index-page .product-card__actions .text-link:first-child:focus-visible {
    background: var(--oc-primary-700, #10817E);
    color: #FFFFFF;
}

@media (max-width: 1020px) {
    .product-index-page .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .product-index-page .section {
        padding-block: 42px;
    }

    .product-index-page .product-search,
    .product-index-page .product-grid,
    .product-index-page .purpose-filter-grid {
        grid-template-columns: 1fr;
    }

    .product-index-page .product-card__media {
        aspect-ratio: 16 / 11;
        padding: 14px;
    }

    .product-index-page .product-card__body {
        padding: 18px;
    }

    .product-index-page .product-card__actions {
        grid-template-columns: 1fr;
    }

    .product-index-page .product-card__actions .text-link:first-child {
        grid-column: auto;
    }
}

/* TOP hero refresh: use the supplied product lineup image as the main visual. */
.home-page .home-hero {
    min-height: clamp(660px, 80vh, 820px);
    background: #EAFBFC;
}

.home-page .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 36%, rgba(255, 255, 255, 0.38) 66%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, rgba(240, 251, 250, 0.78) 0%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.68) 100%);
    clip-path: none;
    opacity: 1;
    transform: none;
    animation: none;
}

.home-page .home-hero::after {
    z-index: 1;
    height: 190px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.home-page .home-hero__grid,
.home-page .home-hero__panel--back,
.home-page .home-hero__badges,
.home-page .home-hero__actions,
.home-page .home-visual__shape,
.home-page .home-visual__product,
.home-page .home-visual__status,
.home-page .home-visual__line {
    display: none !important;
}

.home-page .home-hero__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: min(1240px, calc(100% - 56px));
    min-height: clamp(660px, 80vh, 820px);
    padding: clamp(50px, 7vh, 86px) 0 clamp(78px, 9vh, 112px);
}

.home-page .home-hero__content {
    position: relative;
    z-index: 3;
    max-width: 680px;
}

.home-page .home-hero__trust {
    margin-bottom: 24px;
    border-color: rgba(23, 156, 153, 0.34);
    background: rgba(255, 255, 255, 0.92);
    color: var(--oc-primary-900, #063F3E);
    box-shadow: 0 12px 32px rgba(23, 156, 153, 0.12);
}

.home-page .home-hero__trust::before {
    background: var(--oc-primary, #179C99);
}

.home-page .home-hero h1 {
    max-width: 720px;
    margin-bottom: 22px;
    color: var(--oc-ink, #102022);
    font-size: clamp(40px, 5.3vw, 64px);
    line-height: 1.1;
}

.home-page .home-hero__lead {
    max-width: 650px;
    color: var(--oc-text, #1F2933) !important;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.82;
}

.home-hero__routes {
    display: grid;
    gap: 8px;
    max-width: 620px;
    margin-top: 24px;
}

.home-hero__route {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 14px;
    align-items: center;
    min-height: 66px;
    border: 1px solid rgba(189, 237, 234, 0.96);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
    color: var(--oc-ink, #102022);
    padding: 10px 46px 10px 13px;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.home-hero__route::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.62;
    transform: translateY(-50%) rotate(-45deg);
}

.home-hero__route span {
    display: grid;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 12px;
    font-weight: 900;
}

.home-hero__route strong {
    color: var(--oc-ink, #102022);
    font-size: 16px;
    line-height: 1.4;
}

.home-hero__route small {
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.home-hero__route--primary {
    border-color: rgba(23, 156, 153, 0.56);
    background: rgba(240, 251, 250, 0.94);
}

.home-hero__route--primary span {
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
}

.home-hero__route:hover,
.home-hero__route:focus-visible {
    border-color: var(--oc-primary, #179C99);
    background: #FFFFFF;
    box-shadow: 0 18px 44px rgba(23, 156, 153, 0.18);
    color: var(--oc-primary-900, #063F3E);
    transform: translateY(-2px);
}

.home-page .home-visual {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 100vw;
    min-height: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

.home-page .home-visual__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #EAFBFC;
    box-shadow: none;
}

.home-page .home-visual__photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center bottom;
}

.home-page .home-visual.is-tilting .home-visual__photo {
    transform: none;
}

@media (max-width: 900px) {
    .home-page .home-hero,
    .home-page .home-hero__inner {
        min-height: 760px;
    }

    .home-page .home-hero::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.24) 78%, rgba(255, 255, 255, 0) 100%);
    }

    .home-page .home-hero__inner {
        width: min(1240px, calc(100% - 32px));
        padding-top: 62px;
        padding-bottom: 70px;
    }

    .home-page .home-hero__content {
        max-width: 100%;
    }

    .home-page .home-hero__lead {
        max-width: 36em;
    }

    .home-hero__routes {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .home-page .home-hero,
    .home-page .home-hero__inner {
        min-height: 790px;
    }

    .home-page .home-hero__inner {
        padding-top: 42px;
    }

    .home-page .home-hero h1 {
        font-size: clamp(36px, 11vw, 48px);
    }

    .home-page .home-hero__lead {
        font-size: 14px;
        line-height: 1.8;
    }

    .home-hero__route {
        grid-template-columns: 36px minmax(0, 1fr);
        min-height: 72px;
        border-radius: 18px;
        padding: 12px 36px 12px 12px;
    }

    .home-hero__route span {
        width: 36px;
        height: 36px;
    }

    .home-hero__route strong {
        font-size: 14px;
    }

    .home-hero__route small {
        font-size: 11px;
    }

    .home-page .home-visual__photo img {
        object-position: center bottom;
    }
}

/* TOP hero containment fix: keep the supplied image prominent without breaking layout. */
.home-page .home-hero {
    min-height: auto;
    background:
        radial-gradient(circle at 82% 18%, rgba(126, 218, 215, 0.2), transparent 26rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
}

.home-page .home-hero::before,
.home-page .home-hero::after {
    display: none;
}

.home-page .home-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.04fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
    width: min(1180px, calc(100% - 56px));
    min-height: auto;
    padding: clamp(42px, 5.6vw, 70px) 0 clamp(46px, 5.8vw, 72px);
}

.home-page .home-hero__content {
    max-width: 630px;
}

.home-page .home-hero h1 {
    max-width: 640px;
    margin-bottom: 18px;
    font-size: clamp(40px, 4.7vw, 58px);
}

.home-page .home-hero__lead {
    max-width: 600px;
    line-height: 1.72;
}

.home-hero__routes {
    max-width: 590px;
    gap: 8px;
    margin-top: 20px;
}

.home-hero__route {
    min-height: 58px;
    padding: 8px 44px 8px 12px;
}

.home-hero__route span {
    width: 36px;
    height: 36px;
}

.home-hero__route strong {
    font-size: 15px;
}

.home-hero__route small {
    font-size: 11px;
}

.home-page .home-visual {
    position: relative;
    inset: auto;
    left: auto;
    z-index: 2;
    width: auto;
    min-height: 0;
    pointer-events: auto;
    transform: none !important;
}

.home-page .home-visual__photo {
    position: relative;
    inset: auto;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 10.5;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 34px;
    background: var(--oc-primary-50, #F0FBFA);
    box-shadow: 0 24px 66px rgba(16, 32, 34, 0.12);
}

.home-page .home-visual__photo::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 26px;
    pointer-events: none;
}

.home-page .home-visual__photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center bottom;
}

@media (max-width: 1040px) {
    .home-page .home-hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(1180px, calc(100% - 40px));
        padding-top: 52px;
    }

    .home-page .home-hero__content,
    .home-page .home-hero__lead,
    .home-hero__routes {
        max-width: 100%;
    }

    .home-page .home-visual__photo {
        aspect-ratio: 16 / 9;
        border-radius: 28px;
    }
}

@media (max-width: 640px) {
    .home-page .home-hero,
    .home-page .home-hero__inner {
        min-height: auto;
    }

    .home-page .home-hero__inner {
        width: min(1180px, calc(100% - 28px));
        gap: 22px;
        padding: 38px 0 44px;
    }

    .home-page .home-hero h1 {
        font-size: clamp(34px, 10vw, 44px);
    }

    .home-page .home-visual__photo {
        aspect-ratio: 4 / 3;
        border-radius: 24px;
    }

    .home-page .home-visual__photo::before {
        inset: 12px;
        border-radius: 18px;
    }
}

/* Header mega menu preview: right-side links update the image and copy on the left. */
@media (min-width: 1041px) {
    .mega-menu {
        position: relative;
    }

    .mega-menu summary {
        position: relative;
        z-index: 2;
    }

    .mega-menu[open] summary,
    .mega-menu:hover summary,
    .mega-menu:focus-within summary {
        color: var(--oc-primary-800, #0B5F5C);
    }

    .mega-menu[open] summary::after,
    .mega-menu:hover summary::after,
    .mega-menu:focus-within summary::after {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    .mega-menu__panel {
        top: calc(100% + 14px);
        left: 50%;
        z-index: 80;
        display: grid;
        grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1.14fr);
        gap: 12px;
        width: min(680px, calc(100vw - 48px));
        border: 1px solid var(--oc-primary-200, #BDEDEA);
        border-radius: 24px;
        background:
            radial-gradient(circle at 8% 4%, rgba(223, 247, 245, 0.96), transparent 15rem),
            linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
        box-shadow: 0 26px 72px rgba(16, 32, 34, 0.16);
        padding: 12px;
        transform: translateX(-40%);
    }

    .mega-menu__panel::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 39%;
        width: 16px;
        height: 16px;
        border-top: 1px solid var(--oc-primary-200, #BDEDEA);
        border-left: 1px solid var(--oc-primary-200, #BDEDEA);
        background: #FFFFFF;
        transform: rotate(45deg);
    }

    .mega-menu__preview {
        position: relative;
        overflow: hidden;
        min-width: 0;
        border: 1px solid rgba(189, 237, 234, 0.86);
        border-radius: 22px;
        background:
            radial-gradient(circle at 88% 12%, rgba(255, 209, 102, 0.18), transparent 8rem),
            #FFFFFF;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
        padding: 12px;
    }

    .mega-menu__preview::after {
        content: "";
        position: absolute;
        inset: auto -32px -38px auto;
        width: 150px;
        height: 150px;
        border: 1px solid rgba(23, 156, 153, 0.2);
        border-radius: 999px;
        pointer-events: none;
    }

    .mega-menu__preview-figure {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 9.4;
        margin: 0;
        border-radius: 18px;
        background: var(--oc-primary-50, #F0FBFA);
    }

    .mega-menu__preview-figure::before {
        content: "";
        position: absolute;
        inset: 10px;
        z-index: 1;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 14px;
        pointer-events: none;
    }

    .mega-menu__preview-figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.01);
        transition: opacity 180ms ease, transform 280ms ease;
    }

    .mega-menu__preview-copy {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 6px;
        padding: 14px 6px 4px;
        transition: opacity 180ms ease, transform 220ms ease;
    }

    .mega-menu__preview-copy span {
        color: var(--oc-primary-800, #0B5F5C);
        font-size: 12px;
        font-weight: 900;
    }

    .mega-menu__preview-copy strong {
        color: var(--oc-ink, #102022);
        font-size: 22px;
        font-weight: 900;
        line-height: 1.35;
    }

    .mega-menu__preview-copy p {
        max-width: 28em;
        margin: 0;
        color: var(--oc-muted, #667085);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.75;
    }

    .mega-menu__preview.is-preview-changing .mega-menu__preview-figure img,
    .mega-menu__preview.is-preview-changing .mega-menu__preview-copy {
        opacity: 0.28;
        transform: translateY(4px);
    }

    .mega-menu__preview.is-preview-ready .mega-menu__preview-figure img {
        transform: scale(1.045);
    }

    .mega-menu__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        min-width: 0;
    }

    .mega-menu__item {
        position: relative;
        min-width: 0;
        min-height: 0;
        border: 1px solid var(--oc-line, #DCEDEA);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.92);
        padding: 12px 38px 12px 14px;
        transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .mega-menu__item::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 18px;
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        color: var(--oc-primary, #179C99);
        opacity: 0.56;
        transform: translateY(-50%) rotate(45deg);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .mega-menu__item:hover,
    .mega-menu__item:focus-visible,
    .mega-menu__item.is-active {
        border-color: var(--oc-primary-300, #7EDAD7);
        background: #FFFFFF;
        box-shadow: 0 14px 34px rgba(16, 32, 34, 0.1);
        transform: translateX(3px);
    }

    .mega-menu__item:hover::after,
    .mega-menu__item:focus-visible::after,
    .mega-menu__item.is-active::after {
        opacity: 1;
        transform: translate(3px, -50%) rotate(45deg);
    }

    .mega-menu__item span {
        color: var(--oc-primary-800, #0B5F5C);
        font-size: 12px;
        font-weight: 900;
    }

    .mega-menu__item strong {
        margin: 5px 0 4px;
        color: var(--oc-ink, #102022);
        font-size: 16px;
        line-height: 1.42;
    }

    .mega-menu__item small {
        display: block;
        color: var(--oc-muted, #667085);
        font-size: 12px;
        line-height: 1.6;
    }
}

@media (max-width: 1040px) {
    .mega-menu__preview {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mega-menu summary,
    .mega-menu__preview-figure img,
    .mega-menu__preview-copy,
    .mega-menu__item,
    .mega-menu__item::after {
        transition: none !important;
        transform: none !important;
    }
}

/* TOP soft connected background: keep the page feeling like one continuous canvas. */
body.is-home-page {
    background: #F8FCFB;
}

.home-page {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(circle at 14% 8%, rgba(223, 247, 245, 0.95), transparent 32rem),
        radial-gradient(circle at 88% 22%, rgba(126, 218, 215, 0.26), transparent 28rem),
        radial-gradient(circle at 20% 54%, rgba(255, 209, 102, 0.11), transparent 24rem),
        radial-gradient(circle at 86% 74%, rgba(114, 214, 255, 0.12), transparent 26rem),
        linear-gradient(180deg, #FFFFFF 0%, #F5FCFB 22%, #FFFFFF 46%, #F2FBFA 72%, #FFFFFF 100%) !important;
}

.home-page::before,
.home-page::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.home-page::before {
    inset: -7% -12%;
    background:
        radial-gradient(ellipse 34% 14% at 18% 12%, rgba(23, 156, 153, 0.15), transparent 74%),
        radial-gradient(ellipse 28% 16% at 84% 22%, rgba(126, 218, 215, 0.18), transparent 72%),
        radial-gradient(ellipse 36% 13% at 24% 48%, rgba(255, 209, 102, 0.1), transparent 76%),
        radial-gradient(ellipse 30% 15% at 82% 66%, rgba(114, 214, 255, 0.12), transparent 72%),
        radial-gradient(ellipse 38% 14% at 42% 90%, rgba(23, 156, 153, 0.09), transparent 76%);
    filter: blur(10px);
    opacity: 0.9;
    transform-origin: 50% 45%;
    animation: homeSoftCanvas 42s ease-in-out infinite alternate;
}

.home-page::after {
    top: 5%;
    left: 50%;
    width: min(1120px, 108vw);
    height: 88%;
    border-radius: 48% 52% 44% 56%;
    background:
        radial-gradient(ellipse 42% 18% at 52% 12%, rgba(223, 247, 245, 0.5), transparent 76%),
        radial-gradient(ellipse 28% 14% at 18% 44%, rgba(126, 218, 215, 0.16), transparent 74%),
        radial-gradient(ellipse 34% 15% at 78% 78%, rgba(255, 122, 89, 0.07), transparent 78%);
    filter: blur(18px);
    opacity: 0.62;
    transform: translateX(-50%) rotate(-3deg);
    animation: homeSoftLoop 48s ease-in-out infinite alternate;
}

.home-page > * {
    position: relative;
    z-index: 1;
}

.home-page .home-hero,
.home-page .home-section,
.home-page .home-fitment-section,
.home-page .home-finder-section,
.home-page .home-series-section,
.home-page .home-guide-section,
.home-page .home-products-section,
.home-page .home-support-section,
.home-page .home-store-section,
.home-page .home-news-section,
.home-page .home-official-section,
.home-page .home-final-section {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    color: var(--oc-text, #1F2933);
}

.home-page .home-section::before,
.home-page .home-hero::before,
.home-page .home-hero::after,
.home-page .home-fitment-panel::before {
    display: none !important;
}

.home-page .section {
    background: transparent !important;
}

.home-page .section + .section {
    margin-top: 0;
}

.home-page .section__inner {
    position: relative;
}

.home-page .section__inner::before {
    content: "";
    position: absolute;
    inset: -22px -24px auto auto;
    z-index: -1;
    width: min(280px, 34vw);
    height: min(140px, 18vw);
    border-radius: 999px;
    background: radial-gradient(ellipse, rgba(223, 247, 245, 0.42), transparent 68%);
    opacity: 0.82;
    pointer-events: none;
    animation: homeSoftHalo 28s ease-in-out infinite alternate;
}

.home-page .section__header h2,
.home-page .home-finder-section .section__header h2,
.home-page .home-support-section .section__header h2,
.home-page .home-finder-section h3,
.home-page .home-support-section h3 {
    color: var(--oc-ink, #102022) !important;
}

.home-page .section__lead,
.home-page .home-finder-section .section__lead,
.home-page .home-support-section .section__lead,
.home-page .home-finder-section p,
.home-page .home-support-section p {
    color: var(--oc-muted, #667085) !important;
}

.home-page .section__header {
    position: relative;
}

.home-page .section__header::after {
    content: "";
    display: block;
    width: 76px;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--oc-primary, #179C99), rgba(126, 218, 215, 0.18));
}

.home-page .home-trust-section {
    margin-top: 0;
    padding-top: clamp(34px, 5vw, 58px);
}

.home-page .home-hero {
    background: transparent !important;
}

.home-page .home-hero__grid {
    inset: -12% -8%;
    background:
        radial-gradient(ellipse 36% 20% at 18% 24%, rgba(223, 247, 245, 0.84), transparent 74%),
        radial-gradient(ellipse 26% 16% at 76% 18%, rgba(126, 218, 215, 0.34), transparent 72%),
        radial-gradient(ellipse 42% 18% at 54% 72%, rgba(23, 156, 153, 0.12), transparent 76%),
        radial-gradient(ellipse 30% 16% at 84% 86%, rgba(114, 214, 255, 0.12), transparent 72%);
    background-size: auto;
    filter: blur(12px);
    mask-image: none;
    opacity: 0.82;
    transform-origin: 52% 42%;
    animation: homeHeroSoftDrift 40s ease-in-out infinite alternate;
}

.home-page .home-hero__panel--back {
    border: 0;
    border-radius: 46% 54% 42% 58%;
    background:
        radial-gradient(ellipse 48% 30% at 42% 34%, rgba(255, 255, 255, 0.72), transparent 74%),
        radial-gradient(ellipse 38% 28% at 68% 62%, rgba(23, 156, 153, 0.14), transparent 76%),
        radial-gradient(ellipse 34% 24% at 24% 78%, rgba(255, 209, 102, 0.1), transparent 78%);
    box-shadow: none;
    filter: blur(8px);
    opacity: 0.62;
    transform: rotate(-2deg) scale(1);
    animation: homeHeroBlobDrift 36s ease-in-out infinite alternate;
}

.home-page .home-visual__photo,
.home-page .home-trust-card,
.home-page .home-fitment-panel .search-form,
.home-page .home-fitment-tags > div,
.home-page .home-finder-panel,
.home-page .home-finder-flow article,
.home-page .home-series-card,
.home-page .support-card,
.home-page .product-card,
.home-page .store-card,
.home-page .news-card,
.home-page .phone-cta,
.home-page .cta-panel {
    border-color: rgba(189, 237, 234, 0.84);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84)),
        rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 50px rgba(16, 32, 34, 0.08);
    backdrop-filter: blur(10px);
}

.home-page .home-fitment-assist {
    border: 1px solid rgba(189, 237, 234, 0.92);
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 209, 102, 0.16), transparent 9rem),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    color: var(--oc-text, #1F2933);
    box-shadow: 0 18px 50px rgba(16, 32, 34, 0.08);
}

.home-page .home-fitment-assist h3,
.home-page .home-fitment-assist p {
    color: var(--oc-ink, #102022) !important;
}

.home-page .home-fitment-assist p {
    color: var(--oc-muted, #667085) !important;
}

.home-page .home-fitment-assist .button--secondary {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
}

.home-page .home-finder-flow article,
.home-page .home-support-topics .support-card {
    color: var(--oc-text, #1F2933);
}

.home-page .home-finder-flow article::after {
    border-color: rgba(23, 156, 153, 0.18);
    border-radius: 32px;
}

.home-page .home-finder-flow span {
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
}

.home-page .home-finder-panel {
    box-shadow: 0 18px 50px rgba(16, 32, 34, 0.08);
}

.home-page .home-support-section .phone-cta {
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 122, 89, 0.12), transparent 11rem),
        linear-gradient(135deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    color: var(--oc-text, #1F2933);
}

.home-page .home-support-section .phone-cta::before {
    border-color: rgba(23, 156, 153, 0.12);
}

.home-page .home-support-topics .support-card h3,
.home-page .home-support-topics .support-card p {
    color: inherit !important;
}

.home-page .home-support-topics .support-card p {
    color: var(--oc-muted, #667085) !important;
}

.home-page .home-series-card--featured,
.home-page .home-final-cta .cta-panel:first-child {
    border-color: rgba(23, 156, 153, 0.22);
    background:
        radial-gradient(circle at 88% 14%, rgba(23, 156, 153, 0.14), transparent 13rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 251, 250, 0.88));
    color: var(--oc-text, #1F2933);
}

.home-page .home-series-card--featured h3,
.home-page .home-final-cta .cta-panel:first-child h2 {
    color: var(--oc-ink, #102022);
}

.home-page .home-series-card--featured p:not(.eyebrow),
.home-page .home-final-cta .cta-panel:first-child p {
    color: var(--oc-muted, #667085);
}

.home-page .home-series-card--featured .home-series-card__device {
    background:
        linear-gradient(90deg, rgba(23, 156, 153, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 156, 153, 0.1) 1px, transparent 1px),
        rgba(240, 251, 250, 0.92);
    background-size: 34px 34px;
}

@keyframes homeSoftCanvas {
    0% {
        transform: translate3d(-1.5%, 0, 0) scale(1);
        opacity: 0.78;
    }
    45% {
        transform: translate3d(1%, -1.4%, 0) scale(1.018);
        opacity: 0.94;
    }
    100% {
        transform: translate3d(2%, -2.2%, 0) scale(1.035);
        opacity: 0.86;
    }
}

@keyframes homeSoftLoop {
    0% {
        transform: translateX(-50%) rotate(-3deg) scale(1);
        border-radius: 48% 52% 44% 56%;
    }
    50% {
        transform: translateX(-50%) rotate(1deg) scale(1.035);
        border-radius: 54% 46% 50% 50%;
    }
    100% {
        transform: translateX(-50%) rotate(4deg) scale(1.065);
        border-radius: 44% 56% 58% 42%;
    }
}

@keyframes homeSoftHalo {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.58;
    }
    100% {
        transform: translate3d(-18px, 12px, 0) scale(1.12);
        opacity: 0.9;
    }
}

@keyframes homeHeroSoftDrift {
    0% {
        transform: translate3d(-1.2%, 0, 0) scale(1);
        opacity: 0.72;
    }
    48% {
        transform: translate3d(1.4%, -1%, 0) scale(1.02);
        opacity: 0.88;
    }
    100% {
        transform: translate3d(2.2%, -1.8%, 0) scale(1.04);
        opacity: 0.8;
    }
}

@keyframes homeHeroBlobDrift {
    0% {
        transform: rotate(-2deg) translate3d(0, 0, 0) scale(1);
        border-radius: 46% 54% 42% 58%;
    }
    50% {
        transform: rotate(1deg) translate3d(-10px, 8px, 0) scale(1.04);
        border-radius: 54% 46% 50% 50%;
    }
    100% {
        transform: rotate(3deg) translate3d(-18px, 14px, 0) scale(1.08);
        border-radius: 42% 58% 56% 44%;
    }
}

@media (max-width: 760px) {
    .home-page::before {
        opacity: 0.56;
        animation-duration: 34s;
    }

    .home-page::after {
        width: 118vw;
        opacity: 0.26;
    }

    .home-page .section__inner::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page::before,
    .home-page::after,
    .home-page .section__inner::before,
    .home-page .home-hero__grid,
    .home-page .home-hero__panel--back {
        animation: none !important;
    }
}

/* News archive page: aligned with the bright TOP design language. */
.news-page {
    --news-primary: #179C99;
    --news-primary-dark: #063F3E;
    --news-primary-mid: #0B5F5C;
    --news-primary-soft: #DFF7F5;
    --news-primary-pale: #F0FBFA;
    --news-ink: #102022;
    --news-text: #1F2933;
    --news-muted: #667085;
    --news-line: #DCEDEA;
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: var(--news-text);
    background:
        radial-gradient(ellipse 38% 18% at 15% 6%, rgba(223, 247, 245, 0.86), transparent 74%),
        radial-gradient(ellipse 28% 16% at 88% 22%, rgba(126, 218, 215, 0.24), transparent 72%),
        radial-gradient(ellipse 34% 16% at 80% 76%, rgba(255, 209, 102, 0.12), transparent 74%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 44%, #FFFFFF 100%);
}

body.is-news-page .mobile-fixed-cta {
    display: none;
}

.news-page::before,
.news-page::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.news-page::before {
    inset: 0 -8%;
    background:
        radial-gradient(ellipse 30% 12% at 24% 26%, rgba(23, 156, 153, 0.1), transparent 74%),
        radial-gradient(ellipse 34% 12% at 72% 54%, rgba(114, 214, 255, 0.1), transparent 76%),
        radial-gradient(ellipse 28% 10% at 38% 88%, rgba(23, 156, 153, 0.08), transparent 74%);
    filter: blur(12px);
    animation: newsSoftDrift 46s ease-in-out infinite alternate;
}

.news-page::after {
    top: 10%;
    left: 50%;
    width: min(1050px, 112vw);
    height: 70%;
    transform: translateX(-50%) rotate(-2deg);
    border-radius: 46% 54% 48% 52%;
    background:
        radial-gradient(ellipse 44% 18% at 48% 16%, rgba(223, 247, 245, 0.56), transparent 76%),
        radial-gradient(ellipse 30% 15% at 18% 68%, rgba(23, 156, 153, 0.12), transparent 74%);
    filter: blur(20px);
    opacity: 0.7;
    animation: newsSoftBlob 52s ease-in-out infinite alternate;
}

.news-hero,
.news-section {
    position: relative;
}

.news-hero {
    padding: clamp(62px, 8vw, 110px) 0 clamp(42px, 6vw, 76px);
}

.news-hero__inner,
.news-section .section__inner {
    width: min(1180px, calc(100% - 48px));
}

.news-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.86fr);
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
    margin: 0 auto;
}

.news-hero__content {
    display: grid;
    gap: 22px;
}

.news-label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--news-primary-mid);
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.07);
}

.news-label::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--news-primary);
    box-shadow: 0 0 0 5px rgba(23, 156, 153, 0.12);
}

.news-hero h1 {
    margin: 0;
    color: var(--news-ink);
    font-size: clamp(2.35rem, 6vw, 5.2rem);
    line-height: 1.04;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: normal;
}

.news-hero h1 span {
    display: block;
}

.news-hero__content > p:not(.news-label) {
    max-width: 690px;
    margin: 0;
    color: var(--news-text);
    font-size: clamp(1rem, 1.8vw, 1.22rem);
    line-height: 2;
}

.news-hero__actions,
.news-bottom-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.news-hero__actions a,
.news-bottom-cta__actions a,
.news-side-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--news-primary-mid);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.07);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.news-hero__actions a:first-child,
.news-bottom-cta__actions a:first-child {
    border-color: var(--news-primary);
    background: var(--news-primary);
    color: #FFFFFF;
    box-shadow: 0 18px 44px rgba(23, 156, 153, 0.22);
}

.news-hero__actions a:hover,
.news-hero__actions a:focus-visible,
.news-bottom-cta__actions a:hover,
.news-bottom-cta__actions a:focus-visible,
.news-side-cta a:hover,
.news-side-cta a:focus-visible {
    transform: translateY(-2px);
    border-color: var(--news-primary);
    background: var(--news-primary-pale);
    box-shadow: 0 18px 42px rgba(16, 32, 34, 0.1);
}

.news-hero__actions a:first-child:hover,
.news-hero__actions a:first-child:focus-visible,
.news-bottom-cta__actions a:first-child:hover,
.news-bottom-cta__actions a:first-child:focus-visible {
    background: var(--news-primary-mid);
    color: #FFFFFF;
}

.news-hero__visual {
    display: grid;
    gap: 18px;
}

.news-hero__photo {
    position: relative;
    min-height: clamp(280px, 29vw, 390px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 34px;
    background: var(--news-primary-pale);
    box-shadow: 0 22px 58px rgba(16, 32, 34, 0.11);
}

.news-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 44%, rgba(6, 63, 62, 0.5) 100%),
        radial-gradient(circle at 14% 16%, rgba(23, 156, 153, 0.18), transparent 18rem);
    pointer-events: none;
}

.news-hero__photo img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
}

.news-hero__photo figcaption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 1;
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.12);
    backdrop-filter: blur(10px);
}

.news-hero__photo figcaption strong {
    color: var(--news-ink);
    font-size: 0.96rem;
    line-height: 1.45;
}

.news-hero__photo figcaption span {
    color: var(--news-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.news-hero__feature {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 360px;
    padding: clamp(28px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 34px;
    background:
        radial-gradient(circle at 86% 10%, rgba(255, 209, 102, 0.18), transparent 10rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 251, 250, 0.9));
    box-shadow: 0 22px 58px rgba(16, 32, 34, 0.1);
}

.news-hero__visual .news-hero__feature {
    min-height: auto;
    padding: clamp(20px, 3vw, 28px);
    border-radius: 28px;
}

.news-hero__feature::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 250px;
    height: 250px;
    border-radius: 48% 52% 46% 54%;
    background:
        radial-gradient(circle at 44% 42%, rgba(23, 156, 153, 0.2), transparent 56%),
        rgba(223, 247, 245, 0.56);
    filter: blur(2px);
}

.news-hero__feature > * {
    position: relative;
    z-index: 1;
}

.news-hero__feature summary {
    display: grid;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}

.news-hero__feature summary::-webkit-details-marker {
    display: none;
}

.news-hero__feature summary:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.28);
    outline-offset: 8px;
    border-radius: 20px;
}

.news-hero__feature summary b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--news-primary-mid);
    font-size: 0.86rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.07);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.news-hero__feature summary b::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 8px;
    transform: rotate(45deg) translateY(-2px);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transition: transform 180ms ease;
}

.news-hero__feature[open] summary b {
    background: var(--news-primary-pale);
    border-color: rgba(23, 156, 153, 0.38);
}

.news-hero__feature[open] summary b {
    font-size: 0;
}

.news-hero__feature[open] summary b::before {
    content: "閉じる";
    font-size: 0.86rem;
}

.news-hero__feature[open] summary b::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.news-hero__feature:hover summary b {
    transform: translateY(-2px);
    border-color: var(--news-primary);
    background: var(--news-primary-pale);
}

.news-hero__feature-body {
    display: grid;
    gap: 12px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(220, 237, 234, 0.95);
}

.news-hero__feature span,
.news-update-card span,
.news-timeline-card .news-card__meta span {
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(23, 156, 153, 0.1);
    color: var(--news-primary-mid);
    font-size: 0.82rem;
    font-weight: 800;
}

.news-hero__feature time {
    color: var(--news-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.news-hero__feature h2 {
    margin: 0;
    color: var(--news-ink);
    font-size: clamp(1.55rem, 3vw, 2.4rem);
    line-height: 1.35;
}

.news-hero__visual .news-hero__feature h2 {
    font-size: clamp(1.22rem, 2vw, 1.65rem);
    line-height: 1.42;
}

.news-hero__feature p,
.news-update-card p,
.news-timeline-card p,
.news-archive-side p,
.news-bottom-cta p {
    margin: 0;
    color: var(--news-muted);
    line-height: 1.85;
}

.news-section {
    padding: clamp(44px, 7vw, 84px) 0;
    background: transparent;
}

.news-section .section__header h2 {
    color: var(--news-ink);
}

.news-section .section__lead {
    max-width: 720px;
    color: var(--news-muted);
}

.news-update-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-update-card,
.news-archive-side,
.news-timeline-card,
.news-bottom-cta {
    border: 1px solid rgba(189, 237, 234, 0.88);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.08);
    backdrop-filter: blur(10px);
}

.news-update-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 220px;
    padding: 26px;
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.news-update-card:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.3);
    outline-offset: 5px;
}

.news-update-card:hover {
    transform: translateY(-3px);
    border-color: rgba(23, 156, 153, 0.36);
    box-shadow: 0 24px 58px rgba(16, 32, 34, 0.11);
}

.news-update-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.news-update-card strong {
    color: var(--news-primary);
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1;
    white-space: nowrap;
}

.news-update-card h2,
.news-timeline-card h2,
.news-timeline-card h3,
.news-bottom-cta h2 {
    margin: 0;
    color: var(--news-ink);
    line-height: 1.38;
}

.news-update-card h2::after {
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--news-primary);
    opacity: 0.8;
}

.news-update-card--product {
    background:
        radial-gradient(circle at 90% 10%, rgba(23, 156, 153, 0.14), transparent 9rem),
        rgba(255, 255, 255, 0.94);
}

.news-update-card--fitment {
    background:
        radial-gradient(circle at 90% 10%, rgba(114, 214, 255, 0.16), transparent 9rem),
        rgba(255, 255, 255, 0.94);
}

.news-update-card--software {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 209, 102, 0.18), transparent 9rem),
        rgba(255, 255, 255, 0.94);
}

.news-category-sections {
    display: grid;
    gap: clamp(24px, 4vw, 42px);
}

.news-category-block {
    display: grid;
    grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 36px);
    align-items: start;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.07);
    backdrop-filter: blur(10px);
}

.news-category-block--product {
    background:
        radial-gradient(circle at 96% 8%, rgba(23, 156, 153, 0.1), transparent 14rem),
        rgba(255, 255, 255, 0.9);
}

.news-category-block--software {
    background:
        radial-gradient(circle at 96% 8%, rgba(255, 209, 102, 0.14), transparent 14rem),
        rgba(255, 255, 255, 0.9);
}

.news-category-block--fitment {
    background:
        radial-gradient(circle at 96% 8%, rgba(114, 214, 255, 0.13), transparent 14rem),
        rgba(255, 255, 255, 0.9);
}

.news-category-block__head {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 14px;
}

.news-category-block__head span {
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(23, 156, 153, 0.1);
    color: var(--news-primary-mid);
    font-size: 0.82rem;
    font-weight: 800;
}

.news-category-block__head h2 {
    margin: 0;
    color: var(--news-ink);
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    line-height: 1.35;
}

.news-category-block__head p {
    margin: 0;
    color: var(--news-muted);
    line-height: 1.85;
}

.news-category-block__list {
    display: grid;
    gap: 14px;
}

.news-archive-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: start;
}

.news-archive-side {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 20px;
    padding: 26px;
}

.news-archive-side ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-archive-side li {
    position: relative;
    padding-left: 24px;
    color: var(--news-text);
    line-height: 1.7;
    font-weight: 700;
}

.news-archive-side li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--news-primary);
    box-shadow: 0 0 0 5px rgba(23, 156, 153, 0.11);
}

.news-side-cta {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
    background: var(--news-primary-pale);
}

.news-side-cta strong {
    color: var(--news-ink);
}

.news-side-cta a {
    width: fit-content;
    min-height: 42px;
    padding-inline: 16px;
}

.news-timeline {
    position: relative;
    display: grid;
    gap: 16px;
}

.news-timeline::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 18px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(23, 156, 153, 0), rgba(23, 156, 153, 0.36), rgba(23, 156, 153, 0));
}

.news-timeline-card {
    position: relative;
    display: grid;
    gap: 12px;
    margin-left: 42px;
    padding: 24px 26px;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.news-timeline-card[open] {
    border-color: rgba(23, 156, 153, 0.32);
    box-shadow: 0 24px 58px rgba(16, 32, 34, 0.11);
}

.news-timeline-card::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -33px;
    width: 14px;
    height: 14px;
    border: 4px solid #FFFFFF;
    border-radius: 999px;
    background: var(--news-primary);
    box-shadow: 0 0 0 5px rgba(23, 156, 153, 0.13);
}

.news-timeline-card:hover {
    transform: translateY(-2px);
    border-color: rgba(23, 156, 153, 0.28);
    box-shadow: 0 24px 58px rgba(16, 32, 34, 0.11);
}

.news-timeline-card summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.news-timeline-card summary::-webkit-details-marker {
    display: none;
}

.news-timeline-card summary:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.28);
    outline-offset: 8px;
    border-radius: 18px;
}

.news-timeline-card__summary {
    display: grid;
    gap: 12px;
}

.news-timeline-card__title {
    color: var(--news-ink);
    font-size: clamp(1.18rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.42;
}

.news-timeline-card__lead {
    color: var(--news-muted);
    line-height: 1.85;
}

.news-timeline-card__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--news-primary-mid);
    font-size: 0.86rem;
    font-weight: 800;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.news-timeline-card__toggle::before {
    content: "詳しく見る";
}

.news-timeline-card__toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 8px;
    transform: rotate(45deg) translateY(-2px);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transition: transform 180ms ease;
}

.news-timeline-card[open] .news-timeline-card__toggle {
    background: var(--news-primary-pale);
    border-color: rgba(23, 156, 153, 0.38);
}

.news-timeline-card[open] .news-timeline-card__toggle::before {
    content: "閉じる";
}

.news-timeline-card[open] .news-timeline-card__toggle::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.news-timeline-card__body {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(220, 237, 234, 0.95);
}

.news-timeline-card__body p {
    margin: 0;
    color: var(--news-text);
    line-height: 1.95;
}

.news-timeline-card .news-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.news-timeline-card .news-card__meta time {
    color: var(--news-muted);
    font-weight: 800;
}

.news-timeline-card--fitment::before {
    background: var(--oc-accent-sky, #72D6FF);
}

.news-timeline-card--software::before {
    background: var(--oc-accent-yellow, #FFD166);
}

.news-empty {
    padding: 22px;
    border: 1px dashed rgba(23, 156, 153, 0.28);
    border-radius: 22px;
    background: rgba(240, 251, 250, 0.66);
}

.news-empty p {
    margin: 0;
    color: var(--news-muted);
    font-weight: 700;
}

.news-bottom-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: clamp(28px, 5vw, 42px);
    background:
        radial-gradient(circle at 92% 16%, rgba(23, 156, 153, 0.16), transparent 12rem),
        linear-gradient(135deg, #FFFFFF, var(--news-primary-pale));
}

.news-bottom-cta > div:first-child {
    display: grid;
    gap: 14px;
}

.news-bottom-cta__actions {
    justify-content: flex-end;
}

@keyframes newsSoftDrift {
    0% {
        transform: translate3d(-1.5%, 0, 0) scale(1);
        opacity: 0.72;
    }
    100% {
        transform: translate3d(2%, -1.6%, 0) scale(1.04);
        opacity: 0.9;
    }
}

@keyframes newsSoftBlob {
    0% {
        transform: translateX(-50%) rotate(-2deg) scale(1);
        border-radius: 46% 54% 48% 52%;
    }
    100% {
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        border-radius: 54% 46% 58% 42%;
    }
}

@media (max-width: 900px) {
    .news-hero__inner,
    .news-archive-layout,
    .news-category-block,
    .news-bottom-cta {
        grid-template-columns: 1fr;
    }

    .news-update-grid {
        grid-template-columns: 1fr;
    }

    .news-archive-side {
        position: relative;
        top: auto;
    }

    .news-category-block__head {
        position: relative;
        top: auto;
    }

    .news-hero__visual {
        gap: 16px;
    }

    .news-bottom-cta__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .news-hero {
        padding-top: 44px;
    }

    .news-hero__inner,
    .news-section .section__inner {
        width: min(100% - 30px, 1180px);
    }

    .news-hero__feature,
    .news-hero__photo,
    .news-update-card,
    .news-archive-side,
    .news-category-block,
    .news-timeline-card,
    .news-bottom-cta {
        border-radius: 24px;
    }

    .news-hero__actions a,
    .news-bottom-cta__actions a {
        width: 100%;
    }

    .news-timeline::before {
        left: 9px;
    }

    .news-timeline-card {
        margin-left: 28px;
        padding: 22px;
    }

    .news-timeline-card::before {
        left: -27px;
    }

    .news-timeline-card summary {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .news-timeline-card__toggle {
        width: fit-content;
        min-width: 112px;
    }

    .news-hero__photo {
        min-height: 250px;
    }

    .news-hero__photo figcaption {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-page::before,
    .news-page::after {
        animation: none !important;
    }
}

/* Product listing page: compact, image-led catalog layout */
.product-list-page {
    background:
        radial-gradient(circle at 7% 7%, rgba(223, 247, 245, 0.82), transparent 26rem),
        radial-gradient(circle at 95% 22%, rgba(114, 214, 255, 0.16), transparent 22rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 52%, #FFFFFF 100%);
}

.product-list-section__inner,
.product-list-hero__inner {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.product-list-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 92px) 0 clamp(36px, 5vw, 62px);
}

.product-list-hero::before {
    content: "";
    position: absolute;
    inset: auto -12% -34% 30%;
    height: 420px;
    border-radius: 50%;
    background: rgba(126, 218, 215, 0.18);
    filter: blur(2px);
    transform: rotate(-4deg);
    pointer-events: none;
}

.product-list-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr);
    gap: clamp(34px, 6vw, 78px);
    align-items: center;
}

.product-list-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.product-list-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oc-primary, #179C99);
}

.product-list-hero h1 {
    max-width: 8.8em;
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(40px, 6.3vw, 76px);
    line-height: 1.08;
    letter-spacing: 0;
}

.product-list-hero__copy > p:not(.product-list-eyebrow) {
    max-width: 39em;
    margin: 22px 0 0;
    color: var(--oc-text, #1F2933);
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.95;
}

.product-list-hero__actions,
.product-list-search__actions,
.product-list-before-buy__actions,
.product-list-empty > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-list-hero__actions {
    margin-top: 28px;
}

.product-list-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-list-button--primary {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    box-shadow: 0 14px 34px rgba(23, 156, 153, 0.22);
}

.product-list-button:hover,
.product-list-button:focus-visible {
    border-color: var(--oc-primary-700, #10817E);
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-900, #063F3E);
    transform: translateY(-2px);
}

.product-list-button--primary:hover,
.product-list-button--primary:focus-visible {
    background: var(--oc-primary-700, #10817E);
    color: #FFFFFF;
}

.product-list-hero__visual {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 34px;
    background:
        radial-gradient(circle at 22% 14%, rgba(255, 209, 102, 0.18), transparent 18rem),
        linear-gradient(145deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
    box-shadow: 0 22px 58px rgba(16, 32, 34, 0.13);
    padding: clamp(14px, 2vw, 22px);
}

.product-list-hero__visual::before {
    content: "";
    position: absolute;
    inset: 10% 7% 18% 7%;
    border: 3px solid rgba(23, 156, 153, 0.12);
    border-radius: 999px;
    pointer-events: none;
    transform: rotate(-5deg);
}

.product-list-hero__visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(280px, 35vw, 430px);
    border-radius: 26px;
    object-fit: cover;
    object-position: center 72%;
}

.product-list-hero__visual figcaption {
    position: absolute;
    z-index: 2;
    right: clamp(18px, 3vw, 32px);
    bottom: clamp(18px, 3vw, 32px);
    display: grid;
    gap: 3px;
    min-width: 180px;
    border: 1px solid rgba(189, 237, 234, 0.96);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 34px rgba(16, 32, 34, 0.12);
    padding: 13px 16px;
}

.product-list-hero__visual figcaption span {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 12px;
    font-weight: 900;
}

.product-list-hero__visual figcaption strong {
    color: var(--oc-ink, #102022);
    font-size: 18px;
}

.product-list-finder,
.product-list-results,
.product-list-before-buy {
    padding: clamp(42px, 6vw, 76px) 0;
}

.product-list-heading h2 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.18;
    letter-spacing: 0;
}

.product-list-heading p:not(.product-list-eyebrow) {
    max-width: 44em;
    margin: 14px 0 0;
    color: var(--oc-muted, #667085);
    font-size: 15px;
    line-height: 1.8;
}

.product-list-category-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.product-list-category,
.product-list-purpose {
    display: grid;
    align-content: center;
    min-width: 0;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 20px;
    background: #FFFFFF;
    color: var(--oc-text, #1F2933);
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-list-category {
    min-height: 92px;
    padding: 15px;
}

.product-list-category span {
    color: var(--oc-ink, #102022);
    font-size: 15px;
    font-weight: 900;
}

.product-list-category small {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: var(--oc-muted, #667085);
    font-size: 11px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-list-category:hover,
.product-list-category:focus-visible,
.product-list-category.is-active,
.product-list-purpose:hover,
.product-list-purpose:focus-visible,
.product-list-purpose.is-active {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary-50, #F0FBFA);
    box-shadow: 0 12px 28px rgba(23, 156, 153, 0.14);
    transform: translateY(-2px);
}

.product-list-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr) auto;
    gap: 14px;
    align-items: end;
    margin-top: 18px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 28px;
    background:
        radial-gradient(circle at 95% 12%, rgba(255, 209, 102, 0.18), transparent 24%),
        linear-gradient(135deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    box-shadow: 0 14px 40px rgba(16, 32, 34, 0.08);
    padding: clamp(18px, 2.5vw, 28px);
}

.product-list-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.product-list-field span {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 12px;
    font-weight: 900;
}

.product-list-field input,
.product-list-field select {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--oc-text, #1F2933);
    font: inherit;
    padding: 0 14px;
}

.product-list-field input:focus,
.product-list-field select:focus {
    outline: none;
    border-color: var(--oc-primary, #179C99);
    box-shadow: 0 0 0 4px rgba(23, 156, 153, 0.14);
}

.product-list-purpose-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.product-list-purpose {
    min-height: 38px;
    align-items: center;
    border-radius: 999px;
    padding: 8px 13px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 13px;
    font-weight: 900;
}

.product-list-results {
    background: rgba(255, 255, 255, 0.64);
}

.product-list-results__head {
    display: flex;
    gap: 24px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 24px;
}

.product-list-count {
    display: grid;
    min-width: 94px;
    justify-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.08);
    padding: 12px 16px;
}

.product-list-count span {
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.product-list-count small {
    margin-top: 4px;
    color: var(--oc-muted, #667085);
    font-size: 11px;
    font-weight: 900;
}

.product-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: clamp(18px, 2.4vw, 26px);
    align-items: stretch;
}

.product-list-card {
    display: grid;
    grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
    min-height: 300px;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--oc-line, #DCEDEA);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 12px 34px rgba(16, 32, 34, 0.08);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-list-card:hover {
    border-color: var(--oc-primary-300, #7EDAD7);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.12);
    transform: translateY(-3px);
}

.product-list-card__media {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-width: 0;
    border-right: 1px solid var(--oc-line, #DCEDEA);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 209, 102, 0.18), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(126, 218, 215, 0.28), transparent 30%),
        linear-gradient(145deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
    padding: 18px;
    text-decoration: none;
}

.product-list-card__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 226px;
    object-fit: contain;
    object-position: center;
    transition: transform 220ms ease;
}

.product-list-card:hover .product-list-card__media img {
    transform: scale(1.035);
}

.product-list-card__media span {
    color: var(--oc-primary-700, #10817E);
    font-weight: 900;
}

.product-list-card__body {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px;
    min-width: 0;
    padding: 22px;
}

.product-list-card__meta span {
    display: inline-flex;
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
}

.product-list-card h3 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.32;
    letter-spacing: 0;
}

.product-list-card h3 a {
    color: inherit;
    text-decoration: none;
}

.product-list-card h3 a:hover,
.product-list-card h3 a:focus-visible {
    color: var(--oc-primary-800, #0B5F5C);
}

.product-list-card__body > p {
    display: -webkit-box;
    min-height: calc(1.7em * 2);
    margin: 0;
    overflow: hidden;
    color: var(--oc-text, #1F2933);
    font-size: 14px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-list-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-content: start;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.product-list-card__features li {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.product-list-card__actions {
    align-self: end;
    display: grid;
    grid-template-columns: 1fr 0.86fr 1fr;
    gap: 7px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--oc-line, #DCEDEA);
}

.product-list-card__button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--oc-primary-800, #0B5F5C);
    padding: 8px 9px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.product-list-card__button--primary {
    border-color: var(--oc-primary, #179C99);
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
}

.product-list-card__button:hover,
.product-list-card__button:focus-visible {
    border-color: var(--oc-primary-700, #10817E);
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-900, #063F3E);
    transform: translateY(-1px);
}

.product-list-card__button--primary:hover,
.product-list-card__button--primary:focus-visible {
    background: var(--oc-primary-700, #10817E);
    color: #FFFFFF;
}

.product-list-empty,
.product-list-before-buy__panel {
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: 0 14px 40px rgba(16, 32, 34, 0.08);
    padding: clamp(24px, 4vw, 42px);
}

.product-list-empty h2,
.product-list-before-buy__panel h2 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.24;
}

.product-list-empty p,
.product-list-before-buy__panel p:not(.product-list-eyebrow) {
    max-width: 44em;
    color: var(--oc-muted, #667085);
    line-height: 1.8;
}

.product-list-before-buy__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    background:
        radial-gradient(circle at 96% 12%, rgba(255, 122, 89, 0.1), transparent 18rem),
        linear-gradient(135deg, #FFFFFF, var(--oc-primary-50, #F0FBFA));
}

.product-list-before-buy__actions {
    justify-content: flex-end;
    max-width: 360px;
}

@media (max-width: 1040px) {
    .product-list-hero__inner,
    .product-list-before-buy__panel {
        grid-template-columns: 1fr;
    }

    .product-list-category-bar {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .product-list-category {
        flex: 0 0 min(230px, 72vw);
        scroll-snap-align: start;
    }

    .product-list-search {
        grid-template-columns: 1fr 1fr;
    }

    .product-list-search__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .product-list-section__inner,
    .product-list-hero__inner {
        width: min(100% - 30px, 1180px);
    }

    .product-list-hero {
        padding-top: 42px;
    }

    .product-list-hero h1 {
        max-width: none;
        font-size: clamp(36px, 11vw, 52px);
    }

    .product-list-hero__actions .product-list-button,
    .product-list-search__actions .product-list-button,
    .product-list-before-buy__actions .product-list-button,
    .product-list-empty .product-list-button {
        width: 100%;
    }

    .product-list-hero__visual,
    .product-list-empty,
    .product-list-before-buy__panel {
        border-radius: 24px;
    }

    .product-list-hero__visual img {
        height: 260px;
        object-position: center bottom;
    }

    .product-list-hero__visual figcaption {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 12px;
    }

    .product-list-finder,
    .product-list-results,
    .product-list-before-buy {
        padding: 42px 0;
    }

    .product-list-search {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .product-list-results__head {
        display: grid;
        gap: 16px;
        align-items: start;
    }

    .product-list-count {
        width: fit-content;
        min-width: 84px;
    }

    .product-list-grid {
        grid-template-columns: 1fr;
    }

    .product-list-card {
        grid-template-columns: 1fr;
        grid-template-rows: 190px 1fr;
        border-radius: 24px;
    }

    .product-list-card__media {
        border-right: 0;
        border-bottom: 1px solid var(--oc-line, #DCEDEA);
        padding: 14px;
    }

    .product-list-card__media img {
        max-height: 160px;
    }

    .product-list-card__body {
        padding: 18px;
    }

    .product-list-card__actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-list-button,
    .product-list-category,
    .product-list-purpose,
    .product-list-card,
    .product-list-card__media img,
    .product-list-card__button {
        transition: none !important;
    }

    .product-list-button:hover,
    .product-list-category:hover,
    .product-list-purpose:hover,
    .product-list-card:hover,
    .product-list-card__button:hover {
        transform: none !important;
    }
}

/* Global typography refinement: keep the brand UI calm and readable. */
:where(
    h1,
    h2,
    h3,
    h4,
    p,
    li,
    dt,
    dd,
    a,
    button,
    summary,
    label,
    input,
    select,
    textarea
) {
    letter-spacing: 0;
    line-break: strict;
    word-break: normal;
}

:where(
    h1,
    h2,
    h3,
    .page-hero__content h1,
    .home-page .home-hero h1,
    .product-list-hero h1,
    .premium-product-hero h1,
    .news-hero h1,
    .section__header h2,
    .product-list-heading h2,
    .premium-product-section h2,
    .p3-scroll-story__header h2,
    .p3-pro-feature-panel__body h3
) {
    text-wrap: balance;
    overflow-wrap: break-word;
}

:where(
    p,
    li,
    .page-hero__lead,
    .home-page .home-hero__lead,
    .section__lead,
    .product-list-hero__copy > p:not(.product-list-eyebrow),
    .premium-product-hero__lead,
    .premium-product-hero__catch,
    .premium-product-section p,
    .p3-pro-feature-panel__body > p:not(.eyebrow),
    .p3-pro-deep-card p,
    .p3-pro-check-cards p,
    .p3-product-modal__dialog p:not(.eyebrow),
    .support-flow-card p,
    .support-simple-panel p,
    .news-hero__content > p:not(.news-label),
    .news-timeline-card__lead
) {
    text-wrap: pretty;
}

@media (min-width: 761px) {
    body {
        font-size: 15px;
        line-height: 1.75;
    }

    .page-hero__content h1,
    .page-hero h1 {
        font-size: clamp(36px, 4vw, 56px) !important;
        line-height: 1.2 !important;
    }

    .home-page .home-hero h1 {
        font-size: clamp(42px, 4.8vw, 62px) !important;
        line-height: 1.12 !important;
    }

    .product-list-hero h1,
    .premium-product-hero h1,
    .news-hero h1 {
        font-size: clamp(38px, 4.7vw, 64px) !important;
        line-height: 1.12 !important;
    }

    .section__header h2,
    .home-page .section__header h2,
    .product-list-heading h2,
    .premium-product-section h2,
    .p3-scroll-story__header h2,
    .news-section .section__header h2 {
        font-size: clamp(27px, 2.7vw, 40px) !important;
        line-height: 1.34 !important;
    }

    .section__lead,
    .page-hero__lead,
    .home-page .home-hero__lead,
    .product-list-hero__copy > p:not(.product-list-eyebrow),
    .premium-product-hero__lead,
    .news-hero__content > p:not(.news-label) {
        font-size: clamp(14px, 1.2vw, 17px) !important;
        line-height: 1.82 !important;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 14px;
        line-height: 1.72;
    }

    .page-hero,
    .product-list-hero,
    .premium-product-hero,
    .news-hero {
        padding-top: 36px !important;
        padding-bottom: 34px !important;
    }

    .home-page .home-hero,
    .home-page .home-hero__inner {
        min-height: auto !important;
    }

    .home-page .home-hero {
        padding-top: 38px !important;
        padding-bottom: 32px !important;
    }

    .page-hero__content,
    .home-page .home-hero__content,
    .premium-product-hero__copy,
    .product-list-hero__copy,
    .news-hero__content {
        gap: 14px !important;
    }

    .page-hero__content h1,
    .page-hero h1 {
        font-size: clamp(26px, 7.1vw, 35px) !important;
        line-height: 1.24 !important;
    }

    .home-page .home-hero h1 {
        font-size: clamp(30px, 8.4vw, 40px) !important;
        line-height: 1.16 !important;
    }

    .product-list-hero h1,
    .premium-product-hero h1,
    .news-hero h1 {
        font-size: clamp(29px, 8vw, 39px) !important;
        line-height: 1.18 !important;
    }

    .section,
    .home-section,
    .product-list-finder,
    .product-list-results,
    .product-list-before-buy,
    .premium-product-section,
    .news-section {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    .section__header,
    .home-page .section__header,
    .product-list-heading {
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    .section__header h2,
    .home-page .section__header h2,
    .product-list-heading h2,
    .premium-product-section h2,
    .p3-scroll-story__header h2,
    .news-section .section__header h2,
    .product-list-empty h2,
    .product-list-before-buy__panel h2,
    .news-update-card h2,
    .news-timeline-card h2,
    .news-bottom-cta h2 {
        font-size: clamp(21px, 5.7vw, 29px) !important;
        line-height: 1.38 !important;
    }

    .section__lead,
    .page-hero__lead,
    .home-page .home-hero__lead,
    .product-list-hero__copy > p:not(.product-list-eyebrow),
    .premium-product-hero__lead,
    .premium-product-hero__catch,
    .premium-product-section p,
    .p3-pro-feature-panel__body > p:not(.eyebrow),
    .news-hero__content > p:not(.news-label),
    .news-timeline-card__lead,
    .support-flow-card p,
    .support-simple-panel p {
        font-size: 14px !important;
        line-height: 1.74 !important;
    }

    .home-hero__route strong,
    .product-list-card h3,
    .premium-product-card h3,
    .p3-pro-feature-panel__body h3,
    .p3-pro-deep-card h3,
    .p3-pro-check-cards h3,
    .support-flow-card h3,
    .news-timeline-card__title {
        font-size: clamp(16px, 4.3vw, 20px) !important;
        line-height: 1.42 !important;
    }

    .button,
    .product-list-button,
    .product-list-card__button,
    .premium-product-nav .button,
    .premium-product-hero__actions .button,
    .premium-product-final__actions .button,
    .news-hero__actions a,
    .news-bottom-cta__actions a,
    .site-footer__actions a {
        min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .card,
    .support-flow-card,
    .support-simple-panel,
    .support-qa-teaser,
    .support-notice-panel,
    .support-contact-panel,
    .product-list-card__body,
    .product-list-empty,
    .product-list-before-buy__panel,
    .premium-product-modal__dialog,
    .news-update-card,
    .news-timeline-card,
    .news-archive-side,
    .news-bottom-cta {
        padding: 18px !important;
    }

    .support-flow-card {
        gap: 12px !important;
    }

    .support-flow-card > span {
        width: 42px !important;
        height: 42px !important;
        font-size: 15px !important;
    }

    .product-list-category,
    .product-list-purpose,
    .home-hero__route {
        font-size: 13px !important;
    }

    .product-list-field input,
    .product-list-field select,
    input,
    select,
    textarea {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .page-hero__content h1,
    .page-hero h1 {
        font-size: clamp(24px, 7.4vw, 32px) !important;
    }

    .home-page .home-hero h1 {
        font-size: clamp(29px, 8.8vw, 37px) !important;
    }

    .product-list-hero h1,
    .premium-product-hero h1,
    .news-hero h1 {
        font-size: clamp(27px, 8.3vw, 36px) !important;
    }

    .home-hero__routes,
    .product-list-hero__actions,
    .premium-product-hero__actions,
    .page-hero__actions,
    .news-hero__actions {
        gap: 9px !important;
    }

    .mobile-fixed-cta a {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
}

/* Final reading-density pass: smaller, steadier type for real mobile browsing. */
:where(h1, h2, h3, .section__lead, .page-hero__lead, .premium-product-hero__lead, .product-list-hero__copy > p, .news-hero__content > p) {
    word-break: auto-phrase;
}

@media (min-width: 761px) {
    .home-page .home-hero h1 {
        font-size: clamp(38px, 4.4vw, 56px) !important;
    }

    .product-list-hero h1,
    .premium-product-hero h1,
    .news-hero h1 {
        font-size: clamp(34px, 4vw, 56px) !important;
    }

    .premium-section__heading h2,
    .premium-visual-section__copy h2,
    .premium-fitment-cta__body h2,
    .premium-final-cta h2,
    .premium-spec-layout h2,
    .p3-scroll-story__header h2 {
        font-size: clamp(26px, 3vw, 42px) !important;
        line-height: 1.32 !important;
    }
}

@media (max-width: 760px) {
    .page-hero__inner {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .page-hero__content,
    .page-hero__lead,
    .page-hero h1,
    .page-hero__actions {
        width: 100% !important;
        min-width: 0 !important;
    }

    .page-hero__visual {
        width: min(100%, 320px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: auto !important;
    }

    body {
        font-size: 13.5px;
        line-height: 1.72;
    }

    .home-page .home-hero h1 {
        max-width: 12em;
        font-size: clamp(28px, 7.9vw, 34px) !important;
        line-height: 1.22 !important;
    }

    .product-list-hero h1,
    .premium-product-hero h1,
    .premium-product-hero__copy h1,
    .news-hero h1,
    .page-hero__content h1,
    .page-hero h1 {
        font-size: clamp(25px, 7.1vw, 32px) !important;
        line-height: 1.24 !important;
    }

    .premium-product-hero__catch {
        font-size: clamp(18px, 5vw, 21px) !important;
        line-height: 1.45 !important;
    }

    .section__header h2,
    .home-page .section__header h2,
    .product-list-heading h2,
    .product-list-empty h2,
    .product-list-before-buy__panel h2,
    .premium-product-section h2,
    .premium-section__heading h2,
    .premium-visual-section__copy h2,
    .premium-fitment-cta__body h2,
    .premium-final-cta h2,
    .premium-spec-layout h2,
    .p3-scroll-story__header h2,
    .news-section .section__header h2,
    .news-update-card h2,
    .news-timeline-card h2,
    .news-bottom-cta h2,
    .phone-triage-modal h2 {
        font-size: clamp(20px, 5.25vw, 25px) !important;
        line-height: 1.44 !important;
    }

    .premium-can-do-card h3,
    .premium-feature-card h3,
    .premium-app-tile h3,
    .premium-assurance-card h3,
    .premium-faq summary,
    .p3-pro-feature-panel__body h3,
    .p3-pro-deep-card h3,
    .p3-pro-check-cards h3,
    .support-flow-card h3,
    .support-simple-list__item strong,
    .support-symptom-list__item strong,
    .product-list-card h3,
    .news-timeline-card__title {
        font-size: clamp(15.5px, 4.1vw, 19px) !important;
        line-height: 1.48 !important;
    }

    .section__lead,
    .page-hero__lead,
    .home-page .home-hero__lead,
    .product-list-hero__copy > p:not(.product-list-eyebrow),
    .product-list-heading p,
    .premium-product-hero__lead,
    .premium-section__heading p:not(.premium-product-eyebrow),
    .premium-visual-section__copy > p,
    .premium-fitment-cta__body > p,
    .premium-can-do-card p,
    .premium-connection-steps p,
    .premium-assurance-card p,
    .premium-product-section p,
    .news-hero__content > p:not(.news-label),
    .news-timeline-card__lead,
    .support-flow-card p,
    .support-simple-panel p,
    .support-faq-preview p {
        font-size: 13.5px !important;
        line-height: 1.76 !important;
    }

    .premium-section,
    .premium-visual-section,
    .premium-fitment-cta,
    .premium-final-cta {
        padding-top: 46px !important;
        padding-bottom: 46px !important;
    }

    .product-list-finder,
    .product-list-results,
    .product-list-before-buy,
    .support-section,
    .news-section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .premium-product-hero__actions .button,
    .premium-fitment-cta__actions .button,
    .premium-final-cta__actions .button,
    .button,
    .product-list-button,
    .product-list-card__button,
    .news-hero__actions a,
    .news-bottom-cta__actions a {
        min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 12.5px !important;
    }

    .premium-product-nav__brand,
    .premium-product-nav__toggle,
    .premium-product-nav .button {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .home-page .home-hero h1 {
        font-size: clamp(27px, 8.2vw, 33px) !important;
    }

    .product-list-hero h1,
    .premium-product-hero h1,
    .premium-product-hero__copy h1,
    .news-hero h1,
    .page-hero__content h1,
    .page-hero h1 {
        font-size: clamp(24px, 7.4vw, 30px) !important;
    }

    .section__header h2,
    .home-page .section__header h2,
    .product-list-heading h2,
    .premium-section__heading h2,
    .premium-visual-section__copy h2,
    .premium-fitment-cta__body h2,
    .premium-final-cta h2,
    .premium-spec-layout h2,
    .p3-scroll-story__header h2,
    .news-section .section__header h2,
    .support-section .section__header h2 {
        font-size: clamp(19px, 5.4vw, 23px) !important;
    }
}

@media (max-width: 760px) {
    .home-trust-card h2,
    .brand-trust h2 {
        font-size: clamp(19px, 5vw, 22px) !important;
        line-height: 1.48 !important;
    }

    .home-fitment-assist h3,
    .home-fitment-tags h3,
    .home-finder-panel h3,
    .home-finder-preview h3,
    .home-series-card h3,
    .home-series-card--featured h3 {
        font-size: clamp(15.5px, 4.1vw, 18px) !important;
        line-height: 1.52 !important;
    }

    .home-intent-card strong,
    .home-hero__route strong {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .phone-triage__header h2 {
        font-size: clamp(20px, 5.2vw, 23px) !important;
        line-height: 1.42 !important;
    }

    .phone-triage__question {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .phone-triage__choices button strong,
    .phone-triage__result h3 {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .phone-triage__choices button small,
    .phone-triage__header p:not(.phone-triage__eyebrow),
    .phone-triage__result p,
    .phone-triage__result li {
        font-size: 12.5px !important;
        line-height: 1.65 !important;
    }
}

@media (min-width: 761px) {
    .home-page .home-hero h1 {
        font-size: clamp(36px, 4vw, 52px) !important;
    }

    .product-list-hero h1 {
        max-width: 11em !important;
        font-size: clamp(32px, 3.5vw, 48px) !important;
        line-height: 1.16 !important;
    }

    .premium-product-hero h1,
    .premium-product-hero__copy h1,
    .news-hero h1,
    .page-hero__content h1,
    .page-hero h1 {
        font-size: clamp(32px, 3.6vw, 48px) !important;
        line-height: 1.18 !important;
    }

    .section__header h2,
    .home-page .section__header h2,
    .product-list-heading h2,
    .product-list-empty h2,
    .product-list-before-buy__panel h2,
    .news-section .section__header h2,
    .news-update-card h2,
    .news-timeline-card h2,
    .news-bottom-cta h2,
    .phone-triage__header h2 {
        font-size: clamp(24px, 2.5vw, 34px) !important;
        line-height: 1.38 !important;
    }

    .premium-section__heading h2,
    .premium-visual-section__copy h2,
    .premium-fitment-cta__body h2,
    .premium-final-cta h2,
    .premium-spec-layout h2,
    .p3-scroll-story__header h2 {
        font-size: clamp(24px, 2.45vw, 32px) !important;
        line-height: 1.38 !important;
    }

    .premium-can-do-card h3,
    .premium-feature-card h3,
    .premium-app-tile h3,
    .premium-assurance-card h3,
    .p3-pro-feature-panel__body h3,
    .p3-pro-deep-card h3,
    .p3-pro-check-cards h3 {
        font-size: clamp(18px, 1.8vw, 23px) !important;
        line-height: 1.42 !important;
    }

    .section__lead,
    .page-hero__lead,
    .home-page .home-hero__lead,
    .product-list-hero__copy > p:not(.product-list-eyebrow),
    .premium-product-hero__lead,
    .premium-section__heading p:not(.premium-product-eyebrow),
    .premium-visual-section__copy > p,
    .news-hero__content > p:not(.news-label),
    .support-flow-card p,
    .support-simple-panel p {
        font-size: clamp(14px, 1.05vw, 16px) !important;
        line-height: 1.82 !important;
    }

    .search-form__header h3,
    .home-fitment-panel .search-form__header h3 {
        font-size: clamp(18px, 1.6vw, 21px) !important;
        line-height: 1.45 !important;
    }

    .news-hero__feature h2 {
        font-size: clamp(24px, 2.5vw, 32px) !important;
        line-height: 1.38 !important;
    }
}

@media (max-width: 760px) {
    .search-form__header h3,
    .home-fitment-panel .search-form__header h3 {
        font-size: clamp(16px, 4.2vw, 18px) !important;
        line-height: 1.52 !important;
    }

    .news-hero__feature h2 {
        font-size: clamp(20px, 5.2vw, 22px) !important;
        line-height: 1.45 !important;
    }
}

/* News page density refinement: keep the same direction, reduce oversized cards and blank space. */
.news-page .news-hero {
    padding: clamp(44px, 6vw, 78px) 0 clamp(28px, 4.5vw, 54px);
}

.news-page .news-hero__inner,
.news-page .news-section .section__inner {
    width: min(1120px, calc(100% - 44px));
}

.news-page .news-hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(330px, 0.72fr);
    gap: clamp(22px, 4vw, 46px);
}

.news-page .news-hero__content {
    gap: 16px;
}

.news-page .news-label {
    padding: 7px 13px;
    font-size: 0.78rem;
}

.news-page .news-hero__content > p:not(.news-label) {
    max-width: 620px;
    line-height: 1.76 !important;
}

.news-page .news-hero__actions,
.news-page .news-bottom-cta__actions {
    gap: 10px;
}

.news-page .news-hero__actions a,
.news-page .news-bottom-cta__actions a,
.news-page .news-side-cta a {
    min-height: 42px;
    padding-inline: 16px;
    font-size: 0.9rem;
}

.news-page .news-hero__visual {
    gap: 14px;
}

.news-page .news-hero__panel {
    position: relative;
    display: grid;
    gap: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 34px;
    background:
        radial-gradient(circle at 88% 8%, rgba(23, 156, 153, 0.13), transparent 12rem),
        rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 52px rgba(16, 32, 34, 0.1);
}

.news-page .news-hero__panel::before {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -58px;
    width: 170px;
    height: 170px;
    border-radius: 48% 52% 46% 54%;
    background: rgba(223, 247, 245, 0.72);
    pointer-events: none;
}

.news-page .news-hero__photo {
    min-height: clamp(230px, 24vw, 320px);
    border-radius: 28px;
    box-shadow: 0 16px 38px rgba(16, 32, 34, 0.09);
}

.news-page .news-hero__panel .news-hero__photo {
    border: 0;
    border-radius: 26px;
    box-shadow: none;
}

.news-page .news-hero__photo figcaption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
}

.news-page .news-hero__photo figcaption strong {
    font-size: 0.9rem;
}

.news-page .news-hero__photo figcaption span {
    font-size: 0.78rem;
    line-height: 1.5;
}

.news-page .news-hero__visual .news-hero__feature {
    gap: 10px;
    padding: clamp(16px, 2.3vw, 22px);
    border-radius: 24px;
    box-shadow: 0 16px 36px rgba(16, 32, 34, 0.08);
}

.news-page .news-hero__panel .news-hero__feature {
    margin: 10px 2px 2px;
    padding: 10px 4px 2px;
    border: 0;
    border-top: 1px solid rgba(220, 237, 234, 0.96);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.news-page .news-hero__panel .news-hero__feature::after {
    display: none;
}

.news-page .news-hero__feature summary {
    gap: 10px;
}

.news-page .news-hero__panel .news-hero__feature summary {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 7px 10px;
    align-items: center;
}

.news-page .news-hero__feature summary b {
    min-height: 36px;
    padding-inline: 13px;
    font-size: 0.8rem;
}

.news-page .news-hero__panel .news-hero__feature summary b {
    grid-column: 4;
    grid-row: 1 / span 3;
    align-self: center;
    white-space: nowrap;
}

.news-page .news-hero__feature[open] summary b::before {
    font-size: 0.8rem;
}

.news-page .news-hero__feature-body {
    gap: 10px;
    margin-top: 2px;
    padding-top: 14px;
}

.news-page .news-hero__visual .news-hero__feature h2,
.news-page .news-update-card h2,
.news-page .news-timeline-card__title,
.news-page .news-category-block__head h2 {
    line-height: 1.42 !important;
}

.news-page .news-hero__visual .news-hero__feature h2 {
    font-size: clamp(1.08rem, 1.65vw, 1.38rem) !important;
}

.news-page .news-hero__panel .news-hero__feature h2 {
    grid-column: 1 / 4;
    font-size: clamp(0.98rem, 1.35vw, 1.14rem) !important;
}

.news-page .news-hero__panel .news-hero__feature p {
    grid-column: 1 / 4;
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.58;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-page .news-hero__panel .news-hero__feature-body {
    margin-top: 10px;
    padding: 12px 2px 0;
}

.news-page .news-section {
    padding: clamp(30px, 5vw, 58px) 0;
}

.news-page .news-section .section__header {
    margin-bottom: clamp(18px, 3vw, 26px);
}

.news-page .news-section .section__lead {
    max-width: 620px;
    line-height: 1.72;
}

.news-page .news-update-grid {
    gap: 14px;
}

.news-page .news-update-card {
    gap: 12px;
    min-height: 168px;
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.07);
}

.news-page .news-update-card > div {
    gap: 12px;
}

.news-page .news-update-card span,
.news-page .news-category-block__head span,
.news-page .news-timeline-card .news-card__meta span {
    padding: 6px 10px;
    font-size: 0.76rem;
}

.news-page .news-update-card strong {
    font-size: clamp(0.98rem, 1.35vw, 1.2rem);
}

.news-page .news-update-card h2 {
    font-size: clamp(1.05rem, 1.35vw, 1.22rem) !important;
}

.news-page .news-update-card h2::after {
    width: 30px;
    height: 2px;
    margin-top: 9px;
}

.news-page .news-update-card p,
.news-page .news-category-block__head p,
.news-page .news-timeline-card__lead {
    font-size: 0.92rem;
    line-height: 1.68 !important;
}

.news-page .news-update-card p,
.news-page .news-timeline-card__lead {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-page .news-category-sections {
    gap: clamp(18px, 3vw, 28px);
}

.news-page .news-category-block {
    grid-template-columns: minmax(205px, 0.28fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 28px);
    padding: clamp(18px, 3vw, 28px);
    border-radius: 28px;
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.065);
}

.news-page .news-category-block__head {
    gap: 10px;
}

.news-page .news-category-block__head h2 {
    font-size: clamp(1.08rem, 1.6vw, 1.36rem) !important;
}

.news-page .news-category-block__list {
    gap: 11px;
}

.news-page .news-timeline::before {
    left: 14px;
}

.news-page .news-timeline-card {
    gap: 10px;
    margin-left: 34px;
    padding: 18px 20px;
    border-radius: 24px;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.07);
}

.news-page .news-timeline-card::before {
    top: 24px;
    left: -27px;
    width: 12px;
    height: 12px;
    border-width: 3px;
}

.news-page .news-timeline-card summary {
    gap: 14px;
}

.news-page .news-timeline-card__summary {
    gap: 9px;
}

.news-page .news-timeline-card__title {
    font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
}

.news-page .news-timeline-card__toggle {
    min-width: 88px;
    min-height: 36px;
    padding-inline: 12px;
    font-size: 0.78rem;
}

.news-page .news-timeline-card__body {
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
}

.news-page .news-timeline-card__body p {
    font-size: 0.95rem;
    line-height: 1.78;
}

@media (max-width: 900px) {
    .news-page .news-hero__inner,
    .news-page .news-category-block {
        grid-template-columns: 1fr;
    }

    .news-page .news-update-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .news-page .news-update-card {
        min-width: min(280px, 78vw);
        scroll-snap-align: start;
    }

    .news-page .news-category-block__head {
        position: relative;
        top: auto;
    }
}

@media (max-width: 640px) {
    .news-page .news-hero {
        padding-top: 30px !important;
        padding-bottom: 26px !important;
    }

    .news-page .news-hero__inner,
    .news-page .news-section .section__inner {
        width: min(100% - 28px, 1120px);
    }

    .news-page .news-hero__actions a,
    .news-page .news-bottom-cta__actions a {
        width: auto;
        flex: 1 1 150px;
    }

    .news-page .news-hero__photo {
        min-height: 210px;
    }

    .news-page .news-hero__panel {
        padding: 10px;
        border-radius: 26px;
    }

    .news-page .news-hero__photo figcaption {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 11px 12px;
    }

    .news-page .news-hero__photo figcaption span {
        display: none;
    }

    .news-page .news-hero__panel .news-hero__feature {
        margin-top: 8px;
    }

    .news-page .news-hero__panel .news-hero__feature summary {
        grid-template-columns: 1fr auto;
        gap: 8px 10px;
    }

    .news-page .news-hero__panel .news-hero__feature summary span,
    .news-page .news-hero__panel .news-hero__feature time,
    .news-page .news-hero__panel .news-hero__feature h2,
    .news-page .news-hero__panel .news-hero__feature p {
        grid-column: 1 / -1;
    }

    .news-page .news-hero__panel .news-hero__feature summary b {
        grid-column: 1 / -1;
        grid-row: auto;
        width: fit-content;
        min-height: 34px;
    }

    .news-page .news-section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .news-page .news-update-grid {
        gap: 12px;
    }

    .news-page .news-update-card {
        min-height: 150px;
        padding: 16px !important;
    }

    .news-page .news-category-block {
        padding: 16px !important;
        border-radius: 22px;
    }

    .news-page .news-timeline::before {
        left: 8px;
    }

    .news-page .news-timeline-card {
        margin-left: 24px;
        padding: 16px !important;
        border-radius: 22px;
    }

    .news-page .news-timeline-card::before {
        left: -22px;
    }

    .news-page .news-timeline-card summary {
        gap: 12px;
    }

    .news-page .news-timeline-card__toggle {
        min-width: 98px;
    }
}

/* Support page: cleaner routes, recovery application, and contact chooser */
.support-page .page-hero__visual {
    align-self: stretch;
}

.support-hero-photo {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 34px;
    background: var(--oc-primary-50);
    box-shadow: var(--oc-shadow-md);
}

.support-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(16, 32, 34, 0) 38%, rgba(16, 32, 34, 0.58) 100%),
        radial-gradient(circle at 12% 16%, rgba(23, 156, 153, 0.22), transparent 34%);
    pointer-events: none;
}

.support-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: 48% center;
}

.support-hero-photo figcaption {
    position: absolute;
    z-index: 1;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: grid;
    gap: 6px;
    max-width: 420px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    padding: 16px;
    color: var(--oc-ink);
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.14);
}

.support-hero-photo figcaption span {
    color: var(--oc-primary-800);
    font-size: 12px;
    font-weight: 800;
}

.support-hero-photo figcaption strong {
    font-size: 18px;
    line-height: 1.45;
}

.support-flow-grid--focused {
    gap: 16px;
}

.support-flow-card--compact {
    min-height: auto;
    border-radius: 26px;
    padding: 22px;
}

.support-flow-card--compact > span {
    width: 44px;
    height: 44px;
    border-radius: 15px;
}

.support-simple-panel--calm {
    grid-template-columns: minmax(260px, 0.66fr) minmax(0, 1.34fr);
}

.support-restore-panel--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    gap: 24px;
    overflow: hidden;
    border: 1px solid var(--oc-line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 10% 10%, rgba(126, 218, 215, 0.22), transparent 30%),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
    padding: 28px;
    box-shadow: var(--oc-shadow-sm);
}

.support-restore-panel__main {
    display: grid;
    gap: 18px;
    align-content: start;
}

.support-restore-panel__label {
    width: fit-content;
    margin: 0;
    border-radius: 999px;
    background: #FFFFFF;
    padding: 7px 12px;
    color: var(--oc-primary-800);
    font-size: 12px;
    font-weight: 800;
}

.support-restore-panel__main h3,
.support-restore-agreement h3 {
    margin: 0;
    color: var(--oc-ink);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.45;
}

.support-restore-panel__main p {
    margin: 0;
    color: var(--oc-text);
    line-height: 1.86;
}

.support-restore-symptoms {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.support-restore-symptoms span {
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: #FFFFFF;
    padding: 8px 12px;
    color: var(--oc-primary-800);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
}

.support-restore-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.support-restore-steps div {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(189, 237, 234, 0.88);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    padding: 16px;
}

.support-restore-steps span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: var(--oc-primary);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
}

.support-restore-steps strong {
    color: var(--oc-ink);
    line-height: 1.4;
}

.support-restore-steps small {
    color: var(--oc-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

.support-restore-agreement {
    display: grid;
    gap: 16px;
    align-content: start;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 28px;
    background: #FFFFFF;
    padding: 22px;
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.08);
}

.support-restore-agreement h3 {
    font-size: clamp(17px, 1.6vw, 21px);
}

.support-restore-agreement ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support-restore-agreement li {
    position: relative;
    padding-left: 24px;
    color: var(--oc-text);
    font-size: 14px;
    line-height: 1.72;
}

.support-restore-agreement li::before {
    content: "";
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--oc-primary);
    box-shadow: 0 0 0 5px var(--oc-primary-100);
}

.support-restore-apply {
    display: grid;
    gap: 14px;
    margin-top: 2px;
}

.support-restore-apply label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid var(--oc-line);
    border-radius: 18px;
    background: var(--oc-primary-50);
    padding: 13px;
    color: var(--oc-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.62;
}

.support-restore-apply input {
    margin-top: 4px;
    accent-color: var(--oc-primary);
}

.support-contact-panel--single {
    grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1fr);
    align-items: center;
}

.support-contact-panel__summary {
    display: grid;
    justify-items: start;
    gap: 16px;
}

.support-contact-panel__summary p {
    margin: 0;
    color: var(--oc-text);
    line-height: 1.78;
}

.support-choice-open {
    overflow: hidden;
}

.support-choice-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
}

.support-choice-modal[aria-hidden="false"] {
    display: block;
}

.support-choice-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 34, 0.5);
    backdrop-filter: blur(8px);
}

.support-choice-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin: 24px auto;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 32px;
    background: #FFFFFF;
    padding: 28px;
    color: var(--oc-text);
    box-shadow: 0 30px 80px rgba(16, 32, 34, 0.22);
}

.support-choice-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--oc-line);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--oc-ink);
    cursor: pointer;
}

.support-choice-modal__eyebrow {
    margin: 0 0 8px;
    color: var(--oc-primary-800);
    font-size: 12px;
    font-weight: 800;
}

.support-choice-modal h2 {
    margin: 0;
    max-width: calc(100% - 44px);
    color: var(--oc-ink);
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.36;
}

.support-choice-modal h2 + p {
    margin: 12px 0 0;
    color: var(--oc-muted);
    line-height: 1.78;
}

.support-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.support-choice-card {
    display: grid;
    gap: 8px;
    min-height: 148px;
    border: 1px solid var(--oc-line);
    border-radius: 24px;
    background: var(--oc-primary-50);
    padding: 18px;
    color: var(--oc-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.support-choice-card:hover,
.support-choice-card:focus-visible {
    border-color: var(--oc-primary-300);
    background: #FFFFFF;
    box-shadow: var(--oc-shadow-sm);
    transform: translateY(-2px);
    outline: none;
}

.support-choice-card span {
    width: fit-content;
    border-radius: 999px;
    background: #FFFFFF;
    padding: 5px 10px;
    color: var(--oc-primary-800);
    font-size: 12px;
    font-weight: 900;
}

.support-choice-card strong {
    color: var(--oc-ink);
    font-size: 16px;
    line-height: 1.45;
}

.support-choice-card small {
    color: var(--oc-muted);
    font-size: 13px;
    line-height: 1.62;
}

.support-restore-apply p {
    margin: 0;
    color: var(--oc-muted);
    font-size: 13px;
    line-height: 1.7;
}

.restore-service-page {
    background:
        radial-gradient(circle at 12% 4%, rgba(126, 218, 215, 0.2), transparent 28rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--oc-bg-soft) 52%, #FFFFFF 100%);
}

.restore-service-page .page-hero {
    background: transparent;
}

.restore-hero-card {
    display: grid;
    gap: 10px;
    width: min(100%, 420px);
    min-height: 260px;
    align-content: center;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 34px;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 209, 102, 0.26), transparent 8rem),
        linear-gradient(145deg, #FFFFFF 0%, var(--oc-primary-50) 100%);
    padding: 32px;
    color: var(--oc-ink);
    box-shadow: var(--oc-shadow-sm);
}

.restore-hero-card p,
.restore-hero-card span {
    margin: 0;
}

.restore-hero-card p {
    width: fit-content;
    border-radius: 999px;
    background: #FFFFFF;
    padding: 7px 12px;
    color: var(--oc-primary-800);
    font-size: 12px;
    font-weight: 900;
}

.restore-hero-card strong {
    max-width: 12em;
    color: var(--oc-ink);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.16;
}

.restore-hero-card span {
    color: var(--oc-muted);
    font-size: 14px;
    line-height: 1.7;
}

.restore-section {
    position: relative;
}

.restore-service-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
    gap: 28px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 32px;
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.22), transparent 14rem),
        #FFFFFF;
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 14px 38px rgba(16, 32, 34, 0.08);
}

.restore-overview-copy {
    display: grid;
    gap: 14px;
    color: var(--oc-text);
}

.restore-overview-copy p,
.restore-overview-copy ul,
.restore-overview-note p {
    margin: 0;
}

.restore-overview-copy p {
    font-size: 14px;
    line-height: 1.9;
}

.restore-overview-copy h3,
.restore-overview-note h3 {
    margin: 12px 0 0;
    color: var(--oc-ink);
    font-size: 18px;
    line-height: 1.5;
}

.restore-overview-copy ul {
    display: grid;
    gap: 7px;
    padding-left: 1.2em;
    color: var(--oc-text);
    font-size: 13.5px;
    line-height: 1.78;
}

.restore-muted {
    color: var(--oc-muted) !important;
    font-size: 13px !important;
}

.restore-overview-note {
    display: grid;
    gap: 14px;
    align-content: start;
    border-left: 1px solid var(--oc-line);
    padding-left: 24px;
}

.restore-overview-note p {
    color: var(--oc-muted);
    font-size: 13.5px;
    line-height: 1.8;
}

.restore-overview-note .button {
    width: fit-content;
}

.restore-section--notice {
    background:
        linear-gradient(180deg, var(--oc-primary-50), #FFFFFF);
}

.restore-flow-panel,
.restore-agreement-panel {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    padding: 26px;
    box-shadow: 0 12px 34px rgba(16, 32, 34, 0.07);
}

.restore-flow-panel > p,
.restore-agreement-panel > p {
    max-width: 760px;
    margin: 0;
    color: var(--oc-text);
    font-size: 14px;
    line-height: 1.8;
}

.restore-flow-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.restore-flow-list li {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    padding: 0 18px;
}

.restore-flow-list li:not(:last-child) {
    border-right: 1px solid var(--oc-line);
}

.restore-flow-list span {
    display: inline-grid;
    grid-row: span 2;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: var(--oc-primary);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
}

.restore-flow-list strong {
    color: var(--oc-ink);
    font-size: 15px;
    line-height: 1.45;
}

.restore-flow-list small {
    color: var(--oc-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

.restore-agreement-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.restore-agreement-list li {
    display: grid;
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    gap: 18px;
    border-top: 1px solid var(--oc-line);
    padding: 16px 0;
}

.restore-agreement-list li:last-child {
    border-bottom: 1px solid var(--oc-line);
}

.restore-agreement-list h3 {
    margin: 0;
    color: var(--oc-primary-900);
    font-size: 14px;
    line-height: 1.55;
}

.restore-agreement-list p {
    margin: 0;
    color: var(--oc-text);
    font-size: 13.5px;
    line-height: 1.78;
}

.restore-agreement-final {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    border-radius: 18px;
    background: var(--oc-primary-50);
    padding: 14px 16px;
    color: var(--oc-ink);
}

.restore-agreement-final strong {
    color: var(--oc-primary-900);
    font-size: 14px;
}

.restore-agreement-final span {
    color: var(--oc-muted);
    font-size: 13px;
    line-height: 1.6;
}

.restore-form-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.restore-form-side {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.26), transparent 10rem),
        #FFFFFF;
    padding: 24px;
    box-shadow: var(--oc-shadow-sm);
}

.restore-form-side h3,
.restore-form-side p {
    margin: 0;
}

.restore-form-side h3 {
    color: var(--oc-ink);
    font-size: 18px;
    line-height: 1.55;
}

.restore-form-side p,
.restore-form-side li {
    color: var(--oc-muted);
    font-size: 13.5px;
    line-height: 1.78;
}

.restore-form-side dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.restore-form-side dt {
    color: var(--oc-primary-800);
    font-size: 12px;
    font-weight: 900;
}

.restore-form-side dd {
    overflow-wrap: anywhere;
    margin: 0 0 6px;
    border: 1px solid var(--oc-line);
    border-radius: 16px;
    background: var(--oc-primary-50);
    padding: 12px;
    color: var(--oc-ink);
    font-size: 13px;
    line-height: 1.7;
}

.restore-form-side ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.15em;
}

.restore-service-form {
    border: 1px solid var(--oc-line);
    border-radius: 28px;
    background: #FFFFFF;
    padding: 24px;
    box-shadow: var(--oc-shadow-sm);
}

.restore-service-form .form-grid {
    gap: 16px;
}

.restore-service-form .form-field span,
.restore-service-form .privacy-check {
    font-size: 13.5px;
}

.restore-service-form .form-field input,
.restore-service-form .form-field select,
.restore-service-form .form-field textarea {
    border-color: var(--oc-line);
    border-radius: 16px;
    background: #FFFFFF;
}

.restore-service-form .form-field input:focus,
.restore-service-form .form-field select:focus,
.restore-service-form .form-field textarea:focus {
    border-color: var(--oc-primary);
    box-shadow: 0 0 0 4px rgba(23, 156, 153, 0.14);
    outline: none;
}

.restore-consent-check {
    border-color: var(--oc-primary-300);
    background: var(--oc-primary-50);
}

@media (max-width: 900px) {
    .support-restore-panel--featured,
    .support-contact-panel--single,
    .support-simple-panel--calm,
    .restore-service-overview,
    .restore-form-layout {
        grid-template-columns: 1fr;
    }

    .restore-flow-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .restore-overview-note {
        border-left: 0;
        border-top: 1px solid var(--oc-line);
        padding-top: 20px;
        padding-left: 0;
    }

    .restore-agreement-list li {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .support-restore-steps {
        grid-template-columns: 1fr;
    }

    .restore-form-side {
        position: static;
    }
}

@media (max-width: 760px) {
    .support-hero-photo {
        min-height: 230px;
        border-radius: 24px;
    }

    .support-hero-photo img {
        min-height: 230px;
    }

    .support-hero-photo figcaption {
        right: 12px;
        bottom: 12px;
        left: 12px;
        border-radius: 18px;
        padding: 12px;
    }

    .support-hero-photo figcaption strong {
        font-size: 14px;
    }

    .support-flow-grid--focused,
    .support-symptom-list,
    .support-choice-grid,
    .restore-flow-list {
        grid-template-columns: 1fr;
    }

    .support-flow-card--compact,
    .support-restore-panel--featured,
    .support-contact-panel--single,
    .support-choice-modal__dialog,
    .restore-service-overview,
    .restore-flow-panel,
    .restore-agreement-panel,
    .restore-service-form,
    .restore-form-side {
        border-radius: 22px;
        padding: 18px;
    }

    .support-restore-panel__main h3 {
        font-size: 20px;
    }

    .support-restore-panel__main p,
    .support-contact-panel__summary p,
    .support-choice-modal h2 + p {
        font-size: 13.5px;
        line-height: 1.72;
    }

    .support-restore-agreement li,
    .support-restore-apply label,
    .support-choice-card small {
        font-size: 12.8px;
    }

    .support-choice-modal__dialog {
        width: min(100% - 20px, 720px);
        max-height: calc(100vh - 20px);
        margin: 10px auto;
    }

    .support-choice-card {
        min-height: 126px;
        border-radius: 20px;
        padding: 16px;
    }

    .restore-hero-card {
        min-height: 210px;
        border-radius: 24px;
        padding: 22px;
    }

    .restore-flow-list li {
        border-right: 0 !important;
        border-top: 1px solid var(--oc-line);
        padding: 14px 0;
    }

    .restore-flow-list strong {
        font-size: 15.5px;
    }

    .restore-flow-list small,
    .restore-agreement-list p,
    .restore-overview-copy p,
    .restore-overview-copy ul,
    .restore-form-side p,
    .restore-form-side li {
        font-size: 13px;
        line-height: 1.72;
    }

    .restore-service-form .finder-form__actions {
        grid-template-columns: 1fr;
    }
}

/* TOP refresh final overrides: keep the latest home design above older home rules. */
body.is-home-page .home-page {
    --home-ink: #102022 !important;
    --home-text: #1F2933 !important;
    --home-muted: #667085 !important;
    --home-line: #DCEDEA !important;
    --home-mint: #F0FBFA !important;
    --home-soft: #F7FBFA !important;
    background:
        radial-gradient(circle at 10% 4%, rgba(126, 218, 215, 0.2), transparent 24rem),
        radial-gradient(circle at 90% 18%, rgba(255, 209, 102, 0.16), transparent 22rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 46%, #FFFFFF 100%) !important;
    color: #1F2933 !important;
}

body.is-home-page .home-page .section__inner,
body.is-home-page .home-news-ticker,
body.is-home-page .home-hero__inner {
    width: min(1120px, calc(100% - 40px)) !important;
}

body.is-home-page .home-page h1,
body.is-home-page .home-page h2,
body.is-home-page .home-page h3,
body.is-home-page .home-page strong {
    color: #102022 !important;
    letter-spacing: 0 !important;
}

body.is-home-page .home-page p,
body.is-home-page .home-page li,
body.is-home-page .home-page small,
body.is-home-page .home-page .section__lead {
    color: #667085 !important;
    font-size: 14px;
    line-height: 1.78;
}

body.is-home-page .home-hero {
    min-height: min(760px, calc(100svh - 86px)) !important;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 44%, rgba(240, 251, 250, 0.5) 100%),
        radial-gradient(circle at 74% 24%, rgba(126, 218, 215, 0.34), transparent 20rem),
        #FFFFFF !important;
    color: #102022 !important;
}

body.is-home-page .home-hero::before {
    background:
        radial-gradient(circle at 28% 30%, rgba(23, 156, 153, 0.08), transparent 16rem),
        radial-gradient(circle at 82% 78%, rgba(114, 214, 255, 0.18), transparent 18rem) !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
}

body.is-home-page .home-hero::after {
    background: linear-gradient(120deg, transparent 0%, rgba(23, 156, 153, 0.08) 46%, transparent 72%) !important;
    opacity: 0.45 !important;
    mask-image: none !important;
}

body.is-home-page .home-hero__inner {
    min-height: min(760px, calc(100svh - 86px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr) !important;
    gap: clamp(28px, 4vw, 56px) !important;
    padding: clamp(48px, 7vw, 88px) 0 clamp(44px, 6vw, 76px) !important;
}

body.is-home-page .home-hero__trust {
    border: 1px solid rgba(23, 156, 153, 0.22) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: #0B5F5C !important;
    box-shadow: 0 10px 26px rgba(16, 32, 34, 0.08) !important;
}

body.is-home-page .home-hero h1 {
    margin: 22px 0 18px !important;
    color: #102022 !important;
    font-size: clamp(42px, 5.3vw, 72px) !important;
    line-height: 1.1 !important;
}

body.is-home-page .home-hero__lead {
    max-width: 620px !important;
    color: #1F2933 !important;
    font-size: clamp(15px, 1.35vw, 17px) !important;
    line-height: 1.88 !important;
}

body.is-home-page .home-hero__routes {
    grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(0, 0.94fr)) !important;
    gap: 12px !important;
    margin-top: 28px !important;
}

body.is-home-page .home-hero__route {
    min-height: 132px !important;
    border: 1px solid rgba(189, 237, 234, 0.88) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #102022 !important;
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.08) !important;
}

body.is-home-page .home-hero__route--primary {
    background: linear-gradient(135deg, #179C99, #0B5F5C) !important;
    color: #FFFFFF !important;
    box-shadow: 0 18px 44px rgba(23, 156, 153, 0.24) !important;
}

body.is-home-page .home-hero__route--primary strong,
body.is-home-page .home-hero__route--primary small,
body.is-home-page .home-hero__route--primary span {
    color: #FFFFFF !important;
}

body.is-home-page .home-hero__route strong {
    color: #102022 !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
}

body.is-home-page .home-hero__route small {
    color: #667085 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

body.is-home-page .home-hero__route span {
    color: #179C99 !important;
}

body.is-home-page .home-visual__photo {
    aspect-ratio: 16 / 10 !important;
    max-height: 460px !important;
    border: 1px solid rgba(189, 237, 234, 0.92) !important;
    border-radius: 34px !important;
    background: linear-gradient(180deg, #FFFFFF, #F0FBFA) !important;
    box-shadow: 0 24px 58px rgba(16, 32, 34, 0.13) !important;
}

body.is-home-page .home-visual__photo::before {
    display: none !important;
}

body.is-home-page .home-visual__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
}

body.is-home-page .home-about-section,
body.is-home-page .home-purpose-section,
body.is-home-page .home-products-section,
body.is-home-page .home-store-section,
body.is-home-page .home-official-section {
    background: transparent !important;
}

body.is-home-page .home-fitment-section {
    background: linear-gradient(180deg, #F0FBFA 0%, #FFFFFF 100%) !important;
}

body.is-home-page .home-support-section {
    background: linear-gradient(135deg, #063F3E 0%, #0B5F5C 100%) !important;
}

body.is-home-page .home-support-section .section__header h2,
body.is-home-page .home-support-section .section__lead,
body.is-home-page .home-support-copy h3,
body.is-home-page .home-support-copy p {
    color: #FFFFFF !important;
}

body.is-home-page .home-featured-product img,
body.is-home-page .home-purpose-card img {
    object-fit: contain !important;
}

body.is-home-page .home-news-ticker__item strong,
body.is-home-page .home-purpose-card h3,
body.is-home-page .home-featured-product h3,
body.is-home-page .home-official-card strong,
body.is-home-page .home-guide-card strong,
body.is-home-page .home-carplay-check__result strong {
    color: #102022 !important;
}

body.is-home-page .home-safety-note {
    color: #667085 !important;
}

@media (max-width: 1024px) {
    body.is-home-page .home-hero__inner {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    body.is-home-page .home-page .section__inner,
    body.is-home-page .home-news-ticker,
    body.is-home-page .home-hero__inner {
        width: min(100% - 28px, 1120px) !important;
    }

    body.is-home-page .home-page .section__header h2 {
        font-size: 25px !important;
        line-height: 1.36 !important;
    }

    body.is-home-page .home-page p,
    body.is-home-page .home-page li,
    body.is-home-page .home-page small,
    body.is-home-page .home-page .section__lead {
        font-size: 13.2px !important;
        line-height: 1.72 !important;
    }

    body.is-home-page .home-hero,
    body.is-home-page .home-hero__inner {
        min-height: auto !important;
    }

    body.is-home-page .home-hero {
        padding: 0 !important;
    }

    body.is-home-page .home-hero__inner {
        padding: 42px 0 54px !important;
    }

    body.is-home-page .home-hero h1 {
        font-size: clamp(34px, 10.5vw, 46px) !important;
        line-height: 1.13 !important;
    }

    body.is-home-page .home-hero__lead {
        font-size: 13.8px !important;
        line-height: 1.78 !important;
    }

    body.is-home-page .home-hero__routes {
        grid-template-columns: 1fr !important;
    }

    body.is-home-page .home-hero__route {
        min-height: auto !important;
        border-radius: 20px !important;
        padding: 16px !important;
    }

    body.is-home-page .home-visual__photo {
        max-height: 320px !important;
        border-radius: 24px !important;
    }
}

/* TOP stability pass: isolate the refreshed top page from older home styles. */
body.is-home-page .home-page.home-page--refresh {
    --oc-primary: #179C99;
    --oc-primary-dark: #0B5F5C;
    --oc-primary-soft: #F0FBFA;
    --oc-primary-line: #BDEDEA;
    --oc-ink: #102022;
    --oc-text: #1F2933;
    --oc-muted: #667085;
    --oc-line: #DCEDEA;
    position: relative;
    overflow: hidden;
    color: var(--oc-text) !important;
    font-family: "Noto Sans JP", "Noto Sans", system-ui, sans-serif !important;
    background:
        radial-gradient(ellipse at 18% 5%, rgba(126, 218, 215, 0.2), transparent 30rem),
        radial-gradient(ellipse at 85% 20%, rgba(255, 209, 102, 0.13), transparent 26rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 42%, #FFFFFF 78%) !important;
}

body.is-home-page .home-page.home-page--refresh *,
body.is-home-page .home-page.home-page--refresh *::before,
body.is-home-page .home-page.home-page--refresh *::after {
    box-sizing: border-box;
}

body.is-home-page .home-page.home-page--refresh .section__inner,
body.is-home-page .home-page.home-page--refresh .home-hero__inner,
body.is-home-page .home-page.home-page--refresh .home-news-ticker {
    width: min(1120px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
}

body.is-home-page .home-page.home-page--refresh :where(h1, h2, h3, strong) {
    color: var(--oc-ink) !important;
    letter-spacing: 0 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

body.is-home-page .home-page.home-page--refresh :where(p, li, small) {
    color: var(--oc-muted) !important;
    letter-spacing: 0 !important;
    line-height: 1.78 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero {
    min-height: auto !important;
    padding: 0 !important;
    background:
        radial-gradient(ellipse at 75% 42%, rgba(126, 218, 215, 0.24), transparent 28rem),
        linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 45%, rgba(240, 251, 250, 0.62) 100%) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero::after {
    opacity: 0.26 !important;
    filter: blur(2px);
}

body.is-home-page .home-page.home-page--refresh .home-hero__grid,
body.is-home-page .home-page.home-page--refresh .home-hero__panel {
    opacity: 0.18 !important;
    pointer-events: none;
}

body.is-home-page .home-page.home-page--refresh .home-hero__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.9fr) !important;
    align-items: center !important;
    gap: clamp(32px, 5vw, 68px) !important;
    min-height: clamp(620px, 74vh, 760px) !important;
    padding: clamp(52px, 7vw, 86px) 0 clamp(44px, 6vw, 72px) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__trust {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(23, 156, 153, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--oc-primary-dark) !important;
    box-shadow: 0 10px 28px rgba(16, 32, 34, 0.08) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__trust::before {
    width: 10px !important;
    height: 10px !important;
    background: var(--oc-primary) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero h1 {
    display: grid !important;
    gap: 8px !important;
    margin: 24px 0 18px !important;
    font-size: clamp(42px, 4.7vw, 60px) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero h1 span {
    display: block !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__lead {
    max-width: 620px !important;
    color: var(--oc-text) !important;
    font-size: clamp(14.5px, 1.2vw, 16.5px) !important;
    line-height: 1.88 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__routes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 28px !important;
    max-width: 560px !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas:
        "num title"
        "num desc" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 78px !important;
    min-width: 0 !important;
    padding: 16px 46px 16px 16px !important;
    border: 1px solid rgba(189, 237, 234, 0.9) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--oc-ink) !important;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.07) !important;
    text-decoration: none !important;
    transform: translateZ(0);
}

body.is-home-page .home-page.home-page--refresh .home-hero__route::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    bottom: auto !important;
    width: 9px !important;
    height: 9px !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: translateY(-50%) rotate(-45deg) !important;
    opacity: 0.62 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route span {
    grid-area: num !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--oc-primary-soft) !important;
    color: var(--oc-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route strong {
    grid-area: title !important;
    align-self: end !important;
    color: var(--oc-ink) !important;
    font-size: 15px !important;
    line-height: 1.38 !important;
    white-space: normal !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route small {
    grid-area: desc !important;
    display: block !important;
    padding-right: 0 !important;
    color: var(--oc-muted) !important;
    font-size: 12px !important;
    line-height: 1.62 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route--primary {
    background: linear-gradient(135deg, var(--oc-primary), var(--oc-primary-dark)) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 18px 42px rgba(23, 156, 153, 0.24) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route--primary span {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route--primary strong,
body.is-home-page .home-page.home-page--refresh .home-hero__route--primary small {
    color: #FFFFFF !important;
}

body.is-home-page .home-page.home-page--refresh .home-visual__photo {
    display: block !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    max-height: 430px !important;
    overflow: hidden !important;
    border: 1px solid rgba(189, 237, 234, 0.92) !important;
    border-radius: 34px !important;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--oc-primary-soft) 100%) !important;
    box-shadow: 0 24px 56px rgba(16, 32, 34, 0.13) !important;
}

body.is-home-page .home-page.home-page--refresh .home-visual__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker {
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: -24px !important;
    margin-bottom: clamp(36px, 5vw, 64px) !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(189, 237, 234, 0.9) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 16px 42px rgba(16, 32, 34, 0.08) !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__head {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    white-space: nowrap !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__head span {
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: var(--oc-primary-soft) !important;
    color: var(--oc-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__head a {
    color: var(--oc-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__viewport {
    min-width: 0 !important;
    overflow: hidden !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__track {
    display: flex !important;
    gap: 12px !important;
    min-width: max-content !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 360px !important;
    max-width: 440px !important;
    padding: 9px 13px !important;
    border: 1px solid rgba(189, 237, 234, 0.72) !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: var(--oc-text) !important;
    text-decoration: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__item time,
body.is-home-page .home-page.home-page--refresh .home-news-ticker__item span {
    flex: 0 0 auto !important;
    color: var(--oc-primary-dark) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker__item strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--oc-text) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.is-home-page .home-page.home-page--refresh .home-section {
    padding-block: clamp(58px, 8vw, 92px) !important;
    background: transparent !important;
}

body.is-home-page .home-page.home-page--refresh .home-fitment-section {
    background: linear-gradient(180deg, rgba(240, 251, 250, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%) !important;
}

body.is-home-page .home-page.home-page--refresh .section__header {
    margin-bottom: clamp(26px, 4vw, 40px) !important;
}

body.is-home-page .home-page.home-page--refresh .section__header h2 {
    font-size: clamp(28px, 3.4vw, 42px) !important;
    line-height: 1.28 !important;
}

body.is-home-page .home-page.home-page--refresh .section__lead {
    max-width: 720px !important;
    color: var(--oc-muted) !important;
    font-size: 14px !important;
}

body.is-home-page .home-page.home-page--refresh :where(.home-purpose-card, .home-guide-card, .home-featured-product, .home-official-card, .home-store-simple, .home-carplay-check, .home-fitment-assist, .search-form) {
    border-color: rgba(189, 237, 234, 0.82) !important;
    box-shadow: 0 16px 38px rgba(16, 32, 34, 0.07) !important;
}

body.is-home-page .home-page.home-page--refresh :where(.home-purpose-card, .home-featured-product) figure {
    overflow: hidden !important;
    border-radius: 22px !important;
    background: var(--oc-primary-soft) !important;
}

body.is-home-page .home-page.home-page--refresh :where(.home-purpose-card, .home-featured-product) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-section {
    background: linear-gradient(135deg, #063F3E 0%, #0B5F5C 100%) !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-section :where(h2, h3, p, .section__lead, .eyebrow) {
    color: #FFFFFF !important;
}

body.is-home-page .home-page.home-page--refresh .home-guide-feature {
    background: #FFFFFF !important;
    border: 1px solid rgba(189, 237, 234, 0.82) !important;
    box-shadow: 0 16px 38px rgba(16, 32, 34, 0.07) !important;
}

body.is-home-page .home-page.home-page--refresh .home-guide-feature::after {
    display: none !important;
    content: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-guide-feature img {
    opacity: 1 !important;
    filter: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-guide-feature > div {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--oc-ink) !important;
}

body.is-home-page .home-page.home-page--refresh .home-guide-feature :where(h3, p) {
    color: var(--oc-ink) !important;
}

body.is-home-page .home-page.home-page--refresh .home-guide-feature p {
    color: var(--oc-muted) !important;
}

body.is-home-page .home-page.home-page--refresh .home-carplay-series,
body.is-home-page .home-page.home-page--refresh .home-carplay-check__links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

body.is-home-page .home-page.home-page--refresh .home-carplay-series__item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(23, 156, 153, 0.24) !important;
    border-radius: 999px !important;
    background: var(--oc-primary-soft) !important;
    color: var(--oc-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body.is-home-page.home-motion-ready .home-page.home-page--refresh .home-reveal,
body.is-home-page.home-motion-ready .home-page.home-page--refresh .home-reveal .home-reveal-child,
html.home-motion-ready body.is-home-page .home-page.home-page--refresh .home-reveal,
html.home-motion-ready body.is-home-page .home-page.home-page--refresh .home-reveal .home-reveal-child {
    opacity: 1 !important;
    transform: none !important;
}

body.is-home-page .home-guide-modal[hidden] {
    display: none !important;
}

body.is-home-page .home-guide-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    padding: clamp(16px, 3vw, 32px) !important;
    background: transparent !important;
}

body.is-home-page .home-guide-modal__backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: rgba(16, 32, 34, 0.48) !important;
    backdrop-filter: blur(8px) !important;
}

body.is-home-page .home-guide-modal__panel {
    position: relative !important;
    z-index: 1 !important;
    width: min(680px, calc(100vw - 32px)) !important;
    max-height: min(720px, calc(100dvh - 32px)) !important;
    overflow: auto !important;
    border: 1px solid rgba(189, 237, 234, 0.95) !important;
    border-radius: 28px !important;
    background: #FFFFFF !important;
    padding: clamp(22px, 4vw, 34px) !important;
    box-shadow: 0 32px 90px rgba(16, 32, 34, 0.28) !important;
    transform: none !important;
}

body.is-home-page .home-guide-modal__panel h2 {
    color: var(--oc-ink, #102022) !important;
}

body.is-home-page .home-guide-modal__panel p,
body.is-home-page .home-guide-modal__panel li {
    color: var(--oc-muted, #667085) !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-grid--social {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 132px !important;
    padding: 22px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--oc-ink) !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__icon,
body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__arrow {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px rgba(16, 32, 34, 0.11) !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__icon svg {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--youtube .home-official-card__icon {
    background: #FF0033 !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--tiktok .home-official-card__icon {
    background: #111827 !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--instagram .home-official-card__icon {
    background:
        radial-gradient(circle at 30% 110%, #FFD166 0 18%, transparent 42%),
        radial-gradient(circle at 15% 15%, #72D6FF 0 18%, transparent 42%),
        linear-gradient(135deg, #7C3AED 0%, #F97316 52%, #FF2D55 100%) !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__content {
    display: grid !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    gap: 5px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__content strong {
    color: var(--oc-ink) !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__content p {
    margin: 0 !important;
    color: var(--oc-muted) !important;
    font-size: 12.8px !important;
    line-height: 1.68 !important;
}

body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__arrow {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(23, 156, 153, 0.22) !important;
    border-radius: 999px !important;
    background: var(--oc-primary-soft) !important;
    color: var(--oc-primary-dark) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

@media (hover: hover) {
    body.is-home-page .home-page.home-page--refresh :where(.home-hero__route, .home-purpose-card, .home-guide-card, .home-featured-product, .home-official-card):hover {
        transform: translateY(-3px) !important;
    }
}

@media (max-width: 1024px) {
    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__routes {
        max-width: none !important;
    }
}

@media (max-width: 760px) {
    body.is-home-page .home-page.home-page--refresh .section__inner,
    body.is-home-page .home-page.home-page--refresh .home-hero__inner,
    body.is-home-page .home-page.home-page--refresh .home-news-ticker {
        width: min(100% - 28px, 1120px) !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        gap: 24px !important;
        padding: 40px 0 44px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero h1 {
        gap: 5px !important;
        margin: 22px 0 16px !important;
        font-size: clamp(32px, 8.8vw, 38px) !important;
        line-height: 1.16 !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__lead {
        font-size: 13.5px !important;
        line-height: 1.76 !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-official-grid--social {
        grid-template-columns: 1fr !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-official-card--social {
        grid-template-columns: 48px minmax(0, 1fr) 30px !important;
        gap: 12px !important;
        min-height: 108px !important;
        padding: 18px !important;
        border-radius: 24px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__content strong {
        font-size: 15.5px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-official-card--social .home-official-card__content p {
        font-size: 12.5px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__routes {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 22px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__route {
        min-height: 86px !important;
        border-radius: 24px !important;
        padding: 15px 16px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__route strong {
        font-size: 14.5px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__route small {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-visual__photo {
        aspect-ratio: 16 / 10.5 !important;
        max-height: none !important;
        border-radius: 22px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-news-ticker {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: -8px !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-news-ticker__head {
        justify-content: space-between !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-news-ticker__item {
        min-width: 290px !important;
        max-width: 320px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-news-ticker__item time {
        display: none !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-section {
        padding-block: 52px !important;
    }

    body.is-home-page .home-page.home-page--refresh .section__header h2 {
        font-size: 24px !important;
        line-height: 1.36 !important;
    }
}

@media (max-width: 420px) {
    body.is-home-page .home-page.home-page--refresh .home-hero__trust {
        font-size: 11.5px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero h1 {
        font-size: clamp(30px, 8.4vw, 36px) !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__route {
        grid-template-columns: 32px minmax(0, 1fr) !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__route span {
        width: 32px !important;
        height: 32px !important;
    }
}

/* TOP final visual pass: smooth background and clean hero text wrapping. */
body.is-home-page .home-page.home-page--refresh {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(ellipse at 12% 2%, rgba(126, 218, 215, 0.22), transparent 28rem),
        radial-gradient(ellipse at 88% 14%, rgba(255, 209, 102, 0.13), transparent 26rem),
        radial-gradient(ellipse at 24% 58%, rgba(114, 214, 255, 0.11), transparent 30rem),
        linear-gradient(180deg, #ffffff 0%, #f7fbfa 38%, #f0fbfa 68%, #ffffff 100%) !important;
}

body.is-home-page .home-page.home-page--refresh::before {
    content: "";
    position: absolute;
    inset: -6rem -12vw;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 14%, rgba(23, 156, 153, 0.12), transparent 24rem),
        radial-gradient(ellipse at 76% 34%, rgba(255, 255, 255, 0.9), transparent 20rem),
        radial-gradient(ellipse at 84% 70%, rgba(23, 156, 153, 0.09), transparent 26rem);
    filter: blur(2px);
    animation: homeCanvasDrift 30s ease-in-out infinite alternate;
}

body.is-home-page .home-page.home-page--refresh::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(115deg, transparent 0 40%, rgba(23, 156, 153, 0.055) 48%, transparent 62%),
        linear-gradient(245deg, transparent 0 50%, rgba(255, 209, 102, 0.06) 58%, transparent 72%);
    background-size: 130% 46rem, 150% 54rem;
    background-position: center 4rem, center 42rem;
    opacity: 0.72;
}

body.is-home-page .home-page.home-page--refresh .home-hero,
body.is-home-page .home-page.home-page--refresh .home-news-ticker,
body.is-home-page .home-page.home-page--refresh .home-section,
body.is-home-page .home-page.home-page--refresh .home-fitment-section,
body.is-home-page .home-page.home-page--refresh .home-support-section,
body.is-home-page .home-page.home-page--refresh .home-final-section {
    background: transparent !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero {
    overflow: visible !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero::before {
    width: min(48vw, 620px) !important;
    height: min(48vw, 620px) !important;
    right: -14vw !important;
    top: 8% !important;
    bottom: auto !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(23, 156, 153, 0.12), transparent 68%) !important;
    clip-path: none !important;
    opacity: 1 !important;
    animation: homeCanvasDrift 26s ease-in-out infinite alternate !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero::after {
    display: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__grid {
    opacity: 0.08 !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 70%, transparent 100%) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__panel {
    display: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__inner {
    min-height: clamp(560px, 68vh, 700px) !important;
    padding-top: clamp(48px, 6.5vw, 78px) !important;
    padding-bottom: clamp(42px, 5vw, 62px) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__content {
    max-width: 660px !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero h1 {
    max-width: 12em !important;
    margin: 20px 0 16px !important;
    font-size: clamp(42px, 4.35vw, 58px) !important;
    line-height: 1.16 !important;
    word-break: normal !important;
    line-break: strict;
    overflow-wrap: normal !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero h1 span {
    display: block !important;
    white-space: normal !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__lead {
    display: grid !important;
    gap: 4px !important;
    max-width: 42em !important;
    margin: 0 !important;
    color: var(--oc-text, #1f2933) !important;
    font-size: clamp(14px, 1.05vw, 15.5px) !important;
    line-height: 1.82 !important;
    word-break: normal !important;
    line-break: strict;
    overflow-wrap: break-word !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__lead span {
    display: block !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__routes {
    max-width: 600px !important;
    margin-top: 24px !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route {
    min-height: 74px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

body.is-home-page .home-page.home-page--refresh .home-news-ticker {
    margin-top: 0 !important;
    margin-bottom: clamp(28px, 4vw, 52px) !important;
}

body.is-home-page .home-page.home-page--refresh .home-fitment-section {
    padding-top: clamp(58px, 7vw, 86px) !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-section :where(.section__header h2, .section__lead, .eyebrow) {
    color: var(--oc-ink, #102022) !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-section .section__lead {
    color: var(--oc-muted, #667085) !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-lead--refresh {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23, 156, 153, 0.16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 86% 8%, rgba(126, 218, 215, 0.22), transparent 18rem),
        linear-gradient(135deg, #063f3e 0%, #0b5f5c 100%) !important;
    padding: clamp(22px, 4vw, 34px);
    box-shadow: 0 24px 58px rgba(16, 32, 34, 0.12);
}

body.is-home-page .home-page.home-page--refresh .home-support-lead--refresh :where(h3, p, .eyebrow) {
    color: #ffffff !important;
}

body.is-home-page .home-page.home-page--refresh .home-support-image {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
}

@media (max-width: 1024px) {
    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        min-height: auto !important;
    }
}

@media (max-width: 760px) {
    body.is-home-page .home-page.home-page--refresh {
        background:
            radial-gradient(ellipse at 18% 0%, rgba(126, 218, 215, 0.18), transparent 20rem),
            radial-gradient(ellipse at 90% 20%, rgba(255, 209, 102, 0.12), transparent 18rem),
            linear-gradient(180deg, #ffffff 0%, #f7fbfa 46%, #ffffff 100%) !important;
    }

    body.is-home-page .home-page.home-page--refresh::before {
        animation: none;
        opacity: 0.8;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero h1 {
        max-width: 10.5em !important;
        margin-top: 18px !important;
        font-size: clamp(30px, 8.4vw, 38px) !important;
        line-height: 1.18 !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__lead {
        gap: 3px !important;
        font-size: 13px !important;
        line-height: 1.72 !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__routes {
        margin-top: 20px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__route {
        min-height: 76px !important;
        padding: 14px 42px 14px 14px !important;
        border-radius: 22px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-news-ticker {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-section {
        padding-block: 48px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-support-lead--refresh {
        border-radius: 26px;
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-home-page .home-page.home-page--refresh::before,
    body.is-home-page .home-page.home-page--refresh .home-hero::before {
        animation: none !important;
    }
}

/* TOP seam fix: final override after legacy home styles. */
body.is-home-page .home-page.home-page--refresh .home-section,
body.is-home-page .home-page.home-page--refresh .home-fitment-section,
body.is-home-page .home-page.home-page--refresh .home-support-section,
body.is-home-page .home-page.home-page--refresh .home-final-section {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none;
}

body.is-home-page .home-page.home-page--refresh .home-section::before,
body.is-home-page .home-page.home-page--refresh .home-section::after {
    display: none !important;
    content: none !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero h1,
body.is-home-page .home-page.home-page--refresh .home-hero h1 span {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
}

/* TOP hero readability and continuous page canvas. */
body.is-home-page .home-page.home-page--refresh {
    background:
        radial-gradient(ellipse at 50% 3%, rgba(126, 218, 215, 0.28), transparent 34rem),
        linear-gradient(180deg,
            #ffffff 0%,
            #f2fbfa 14%,
            #ffffff 30%,
            #f6fbfa 46%,
            #eefaf8 62%,
            #ffffff 78%,
            #f7fbfa 100%) !important;
}

body.is-home-page .home-page.home-page--refresh::before {
    inset: -4rem -8vw !important;
    background:
        radial-gradient(ellipse at 46% 9%, rgba(23, 156, 153, 0.14), transparent 26rem),
        radial-gradient(ellipse at 54% 38%, rgba(255, 209, 102, 0.09), transparent 30rem),
        radial-gradient(ellipse at 48% 70%, rgba(114, 214, 255, 0.1), transparent 34rem) !important;
}

body.is-home-page .home-page.home-page--refresh::after {
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(23, 156, 153, 0.055) 18%,
            transparent 34%,
            rgba(255, 209, 102, 0.055) 52%,
            transparent 68%,
            rgba(23, 156, 153, 0.05) 84%,
            transparent 100%) !important;
    opacity: 0.9 !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr) !important;
    grid-template-areas:
        "copy visual"
        "routes visual" !important;
    gap: clamp(22px, 4vw, 48px) clamp(30px, 5vw, 70px) !important;
    align-items: center !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__content {
    grid-area: copy !important;
    align-self: end !important;
}

body.is-home-page .home-page.home-page--refresh .home-visual {
    grid-area: visual !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__routes {
    grid-area: routes !important;
    align-self: start !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route {
    color: var(--oc-ink, #102022) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route span {
    background: var(--oc-primary-50, #f0fbfa) !important;
    color: var(--oc-primary-800, #0b5f5c) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route strong {
    color: var(--oc-ink, #102022) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route small {
    color: var(--oc-muted, #667085) !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route--primary {
    border-color: rgba(23, 156, 153, 0.55) !important;
    background: linear-gradient(135deg, #179c99 0%, #0b5f5c 100%) !important;
    box-shadow: 0 18px 44px rgba(23, 156, 153, 0.24) !important;
    color: #ffffff !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route--primary span {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

body.is-home-page .home-page.home-page--refresh .home-hero__route--primary strong,
body.is-home-page .home-page.home-page--refresh .home-hero__route--primary small {
    color: #ffffff !important;
}

@media (max-width: 980px) {
    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "copy"
            "visual"
            "routes" !important;
        gap: 22px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-visual {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 760px) {
    body.is-home-page .home-page.home-page--refresh {
        background:
            radial-gradient(ellipse at 50% 0%, rgba(126, 218, 215, 0.22), transparent 20rem),
            linear-gradient(180deg, #ffffff 0%, #f2fbfa 20%, #ffffff 42%, #f0fbfa 70%, #ffffff 100%) !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__inner {
        gap: 18px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-visual__photo {
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    body.is-home-page .home-page.home-page--refresh .home-visual__photo img {
        display: block;
        width: 100%;
        max-height: 260px;
        object-fit: cover;
        object-position: center bottom;
    }

    body.is-home-page .home-page.home-page--refresh .home-hero__routes {
        margin-top: 0 !important;
    }
}

@media (max-width: 760px) {
    .page-hero__inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .page-hero__content {
        display: contents !important;
    }

    .page-hero__content .eyebrow {
        order: 1;
    }

    .page-hero__content h1 {
        order: 2;
    }

    .page-hero__lead {
        order: 3;
    }

    .hero-badges {
        order: 4;
    }

    .page-hero__visual {
        order: 5;
        justify-content: stretch !important;
    }

    .page-hero__actions {
        order: 6;
        margin-top: 0 !important;
    }
}

/* Product finder refresh */
.product-finder-page {
    --pf-primary: #179C99;
    --pf-primary-dark: #0B5F5C;
    --pf-primary-soft: #F0FBFA;
    --pf-primary-line: #BDEDEA;
    --pf-ink: #102022;
    --pf-text: #1F2933;
    --pf-muted: #667085;
    --pf-line: #DCEDEA;
    --pf-bg: #FFFFFF;
    color: var(--pf-text);
    background:
        radial-gradient(ellipse at 14% 2%, rgba(126, 218, 215, 0.18), transparent 28rem),
        radial-gradient(ellipse at 86% 10%, rgba(255, 209, 102, 0.12), transparent 24rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 42%, #FFFFFF 100%);
    overflow: hidden;
}

.finder-hero-refresh {
    position: relative;
    padding: clamp(54px, 7vw, 86px) 0 clamp(42px, 6vw, 72px);
}

.finder-hero-refresh::before {
    content: "";
    position: absolute;
    inset: 10% -8% auto auto;
    width: min(520px, 56vw);
    aspect-ratio: 1;
    border-radius: 48% 52% 42% 58%;
    background: rgba(223, 247, 245, 0.78);
    filter: blur(2px);
    animation: finderSoftFloat 12s ease-in-out infinite alternate;
    pointer-events: none;
}

.finder-hero-refresh__inner,
.product-finder-page .section__inner {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.finder-hero-refresh__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.finder-hero-refresh__copy {
    max-width: 680px;
}

.finder-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--pf-primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.finder-label::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pf-primary);
    box-shadow: 0 0 0 5px rgba(23, 156, 153, 0.12);
}

.finder-hero-refresh h1 {
    margin: 0;
    color: var(--pf-ink);
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.18;
    letter-spacing: 0;
}

.finder-hero-refresh p {
    max-width: 620px;
    color: var(--pf-muted);
    font-size: 15px;
    line-height: 1.88;
}

.finder-hero-refresh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.finder-hero-visual {
    position: relative;
    min-height: 390px;
    border: 1px solid rgba(189, 237, 234, 0.86);
    border-radius: 36px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 251, 250, 0.94)),
        radial-gradient(circle at 20% 20%, rgba(114, 214, 255, 0.18), transparent 11rem);
    box-shadow: 0 26px 64px rgba(16, 32, 34, 0.12);
    overflow: hidden;
}

.finder-hero-visual::before,
.finder-hero-visual::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.finder-hero-visual::before {
    inset: 34px auto auto 34px;
    width: 180px;
    height: 180px;
    border: 2px solid rgba(23, 156, 153, 0.18);
}

.finder-hero-visual::after {
    right: -56px;
    bottom: -56px;
    width: 220px;
    height: 220px;
    background: rgba(23, 156, 153, 0.11);
}

.finder-hero-visual__screen {
    position: absolute;
    inset: 64px 42px auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-height: 150px;
    padding: 22px;
    border: 10px solid #102022;
    border-radius: 28px;
    background: linear-gradient(145deg, #102022 0%, #203539 100%);
    box-shadow: 0 20px 42px rgba(16, 32, 34, 0.22);
}

.finder-hero-visual__screen span {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 18px;
    height: 6px;
    border-radius: 999px;
    background: rgba(126, 218, 215, 0.32);
}

.finder-hero-visual__screen strong {
    display: grid;
    place-items: center;
    min-height: 74px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-size: 14px;
}

.finder-hero-visual__device {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--pf-primary-dark);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 16px 38px rgba(16, 32, 34, 0.13);
}

.finder-hero-visual__device--aibox {
    left: 46px;
    bottom: 62px;
    width: 106px;
    height: 86px;
}

.finder-hero-visual__device--screen {
    right: 42px;
    bottom: 68px;
    width: 132px;
    height: 72px;
}

.finder-hero-visual__line {
    position: absolute;
    left: 138px;
    right: 128px;
    bottom: 109px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--pf-primary), transparent);
}

.finder-hero-visual__note {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    white-space: nowrap;
    border: 1px solid rgba(23, 156, 153, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--pf-primary-dark);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
}

.product-finder-page .section {
    background: transparent;
    padding-block: clamp(54px, 7vw, 86px);
}

.product-finder-page .section__header {
    margin-bottom: clamp(24px, 4vw, 38px);
}

.product-finder-page .section__header h2 {
    color: var(--pf-ink);
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.35;
    letter-spacing: 0;
}

.product-finder-page .section__lead {
    max-width: 720px;
    color: var(--pf-muted);
    font-size: 14px;
    line-height: 1.84;
}

.finder-question-section {
    background: linear-gradient(180deg, rgba(240, 251, 250, 0.96), rgba(255, 255, 255, 0.95)) !important;
}

.finder-step-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.finder-step-strip span {
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 1px solid rgba(23, 156, 153, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--pf-primary-dark);
    font-size: 12px;
    font-weight: 800;
}

.product-finder-page .finder-form--refreshed {
    gap: clamp(24px, 4vw, 34px);
    border: 1px solid rgba(189, 237, 234, 0.86);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.94);
    padding: clamp(22px, 4vw, 34px);
    box-shadow: 0 22px 56px rgba(16, 32, 34, 0.09);
}

.product-finder-page .finder-fieldset legend {
    color: var(--pf-ink);
    font-size: 17px;
    font-weight: 850;
    line-height: 1.5;
}

.product-finder-page .finder-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.product-finder-page .finder-choice-grid--purpose {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-finder-page .finder-choice--refreshed {
    position: relative;
    min-height: 152px;
    gap: 9px;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 26px;
    background: #FFFFFF;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.06);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.product-finder-page .finder-choice--refreshed input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-finder-page .finder-choice--refreshed::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(23, 156, 153, 0.35);
    border-radius: 999px;
    background: #FFFFFF;
}

.product-finder-page .finder-choice--refreshed:has(input:checked) {
    border-color: rgba(23, 156, 153, 0.62);
    background: var(--pf-primary-soft);
    box-shadow: 0 18px 42px rgba(23, 156, 153, 0.14);
}

.product-finder-page .finder-choice--refreshed:has(input:checked)::after {
    border-color: var(--pf-primary);
    background:
        radial-gradient(circle at center, #FFFFFF 0 32%, transparent 34%),
        var(--pf-primary);
}

.product-finder-page .finder-choice--refreshed:focus-within {
    outline: 3px solid rgba(23, 156, 153, 0.2);
    outline-offset: 3px;
}

.product-finder-page .finder-choice__mark {
    display: inline-grid;
    width: fit-content;
    min-width: 54px;
    place-items: center;
    border-radius: 999px;
    background: var(--pf-primary-soft);
    color: var(--pf-primary-dark);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.product-finder-page .finder-choice__title {
    color: var(--pf-ink);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.55;
}

.product-finder-page .finder-choice--refreshed small {
    color: var(--pf-muted);
    font-size: 12px;
    line-height: 1.68;
}

.finder-form__actions--refreshed {
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

.finder-result-section {
    background: #FFFFFF !important;
}

.finder-result-summary--refreshed {
    align-items: center;
    border: 1px solid rgba(189, 237, 234, 0.88);
    border-radius: 30px;
    background:
        radial-gradient(circle at 7% 18%, rgba(126, 218, 215, 0.16), transparent 14rem),
        #FFFFFF;
    padding: clamp(22px, 4vw, 32px);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
}

.finder-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.finder-category-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid rgba(23, 156, 153, 0.22);
    border-radius: 999px;
    background: var(--pf-primary-soft);
    color: var(--pf-primary-dark);
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 850;
}

.finder-result-grid--refreshed {
    grid-template-columns: 1fr;
    gap: 22px;
}

.finder-focus-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 26px);
    margin: 18px 0 24px;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(240, 251, 250, 0.96), rgba(255, 255, 255, 0.94)),
        #FFFFFF;
    padding: clamp(18px, 3vw, 26px);
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.065);
}

.finder-focus-panel__copy {
    display: grid;
    align-content: center;
    gap: 8px;
}

.finder-focus-panel__copy h3 {
    margin: 0;
    color: var(--pf-ink);
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.45;
}

.finder-focus-panel__copy p:not(.finder-label) {
    margin: 0;
    color: var(--pf-muted);
    font-size: 13px;
    line-height: 1.75;
}

.finder-focus-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.finder-focus-list div {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 118px;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 20px;
    background: #FFFFFF;
    padding: 14px;
}

.finder-focus-list dt {
    color: var(--pf-primary-dark);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.finder-focus-list dd {
    margin: 0;
    color: var(--pf-text);
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.55;
}

.finder-product-card--refreshed {
    grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(189, 237, 234, 0.88);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.96);
    padding: clamp(18px, 3vw, 26px);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
}

.finder-product-card__image {
    align-self: stretch;
    display: grid;
    place-items: center;
    min-height: 230px;
    margin: 0;
    border-radius: 26px;
    background: linear-gradient(180deg, #FFFFFF, var(--pf-primary-soft));
    overflow: hidden;
}

.finder-product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 290px;
    object-fit: contain;
    padding: 16px;
}

.finder-product-card__body {
    display: grid;
    gap: 16px;
}

.finder-product-card--refreshed .finder-product-card__header {
    align-items: flex-start;
}

.finder-product-card--refreshed h3 {
    color: var(--pf-ink);
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.35;
}

.finder-product-card--refreshed p,
.finder-product-card--refreshed li {
    color: var(--pf-muted);
    font-size: 13px;
    line-height: 1.78;
}

.finder-product-card__lead {
    margin: 0;
    color: var(--pf-text) !important;
    font-size: 14px !important;
    font-weight: 650;
    line-height: 1.8 !important;
}

.finder-spec-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finder-spec-list span {
    display: grid;
    gap: 3px;
    min-width: 118px;
    border: 1px solid rgba(23, 156, 153, 0.2);
    border-radius: 16px;
    background: rgba(240, 251, 250, 0.86);
    padding: 10px 12px;
}

.finder-spec-list small {
    color: var(--pf-primary-dark);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
}

.finder-spec-list strong {
    color: var(--pf-ink);
    font-size: 12.8px;
    font-weight: 850;
    line-height: 1.35;
}

.finder-product-card--refreshed .finder-product-card__section {
    border: 1px solid rgba(220, 237, 234, 0.92);
    border-radius: 22px;
    background: #FFFFFF;
    padding: 16px;
}

.finder-product-card__section--reason {
    background: linear-gradient(135deg, #FFFFFF, rgba(240, 251, 250, 0.86)) !important;
}

.finder-product-card__section--reason p {
    margin: 8px 0 0;
}

.finder-product-card__section--notice {
    background: var(--pf-primary-soft) !important;
}

.finder-product-card--refreshed .finder-product-card__section h4 {
    color: var(--pf-ink);
    font-size: 14px;
    font-weight: 850;
}

.finder-product-card--refreshed .finder-product-card__actions {
    justify-content: flex-start;
}

.finder-empty-state {
    border-radius: 30px;
}

.finder-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.finder-guide-card {
    display: grid;
    gap: 9px;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 28px;
    background: #FFFFFF;
    padding: 22px;
    color: var(--pf-text);
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.finder-guide-card span {
    display: inline-grid;
    width: fit-content;
    place-items: center;
    border-radius: 999px;
    background: var(--pf-primary-soft);
    color: var(--pf-primary-dark);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 900;
}

.finder-guide-card strong {
    color: var(--pf-ink);
    font-size: 17px;
    line-height: 1.45;
}

.finder-guide-card p {
    margin: 0;
    color: var(--pf-muted);
    font-size: 13px;
    line-height: 1.76;
}

@media (hover: hover) {
    .product-finder-page .finder-choice--refreshed:hover,
    .finder-guide-card:hover,
    .finder-product-card--refreshed:hover {
        transform: translateY(-3px);
    }
}

@keyframes finderSoftFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-18px, 16px, 0) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .finder-hero-refresh::before {
        animation: none;
    }

    .product-finder-page .finder-choice--refreshed,
    .finder-guide-card,
    .finder-product-card--refreshed {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .finder-hero-refresh__inner {
        grid-template-columns: 1fr;
    }

    .finder-hero-visual {
        min-height: 340px;
    }

    .product-finder-page .finder-choice-grid,
    .product-finder-page .finder-choice-grid--purpose,
    .finder-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finder-product-card--refreshed {
        grid-template-columns: 1fr;
    }

    .finder-focus-panel {
        grid-template-columns: 1fr;
    }

    .finder-focus-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .finder-hero-refresh__inner,
    .product-finder-page .section__inner {
        width: min(100% - 28px, 1120px);
    }

    .finder-hero-refresh {
        padding: 40px 0 50px;
    }

    .finder-hero-refresh h1 {
        font-size: clamp(28px, 8.2vw, 38px);
        line-height: 1.24;
    }

    .finder-hero-refresh p,
    .product-finder-page .section__lead {
        font-size: 13px;
        line-height: 1.76;
    }

    .finder-hero-refresh__actions,
    .finder-form__actions--refreshed,
    .finder-result-summary__actions,
    .finder-product-card--refreshed .finder-product-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .finder-focus-panel {
        border-radius: 22px;
        padding: 16px;
    }

    .finder-focus-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .finder-focus-list div {
        min-height: 0;
        border-radius: 16px;
        padding: 12px;
    }

    .finder-spec-list span {
        min-width: calc(50% - 4px);
        border-radius: 14px;
        padding: 9px 10px;
    }

    .finder-hero-visual {
        min-height: 280px;
        border-radius: 26px;
    }

    .finder-hero-visual__screen {
        inset: 38px 24px auto;
        min-height: 122px;
        padding: 15px;
        border-width: 8px;
        border-radius: 24px;
    }

    .finder-hero-visual__screen strong {
        min-height: 60px;
        font-size: 12px;
    }

    .finder-hero-visual__device--aibox {
        left: 26px;
        bottom: 60px;
        width: 88px;
        height: 70px;
    }

    .finder-hero-visual__device--screen {
        right: 24px;
        bottom: 66px;
        width: 106px;
        height: 62px;
    }

    .finder-hero-visual__line {
        left: 100px;
        right: 92px;
        bottom: 96px;
    }

    .finder-step-strip,
    .product-finder-page .finder-choice-grid,
    .product-finder-page .finder-choice-grid--purpose,
    .finder-guide-grid {
        grid-template-columns: 1fr;
    }

    .product-finder-page .finder-form--refreshed {
        border-radius: 26px;
        padding: 20px;
    }

    .product-finder-page .finder-fieldset legend {
        font-size: 15.5px;
    }

    .product-finder-page .finder-choice--refreshed {
        min-height: auto;
        border-radius: 22px;
        padding: 16px 48px 16px 16px;
    }

    .finder-result-summary--refreshed,
    .finder-product-card--refreshed {
        border-radius: 26px;
        padding: 18px;
    }

    .finder-product-card__image {
        min-height: 190px;
        border-radius: 22px;
    }
}

@media (max-width: 430px) {
    .finder-hero-visual__note {
        white-space: normal;
        text-align: center;
        width: calc(100% - 48px);
    }

    .finder-product-card__image img {
        max-height: 230px;
    }
}

/* Product finder usability pass */
.product-finder-page .finder-hero-refresh::before {
    display: none;
}

.product-finder-page .finder-hero-refresh__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.96fr);
    gap: clamp(28px, 4.6vw, 58px);
}

.finder-hero-photo {
    position: relative;
    min-height: 360px;
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 34px;
    background: #FFFFFF;
    box-shadow: 0 22px 54px rgba(16, 32, 34, 0.12);
    overflow: hidden;
    isolation: isolate;
}

.finder-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.03) contrast(1.02);
}

.finder-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 32, 34, 0) 46%, rgba(16, 32, 34, 0.54) 100%);
    pointer-events: none;
}

.finder-hero-photo figcaption {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    z-index: 2;
    display: grid;
    gap: 4px;
    max-width: 430px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 14px 16px;
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.16);
    backdrop-filter: blur(10px);
}

.finder-hero-photo figcaption strong {
    color: var(--pf-ink);
    font-size: 15px;
    line-height: 1.45;
}

.finder-hero-photo figcaption span {
    color: var(--pf-muted);
    font-size: 12.5px;
    line-height: 1.65;
}

.product-finder-page .finder-form--refreshed {
    gap: clamp(18px, 3vw, 26px);
    border-radius: 28px;
    padding: clamp(18px, 3.4vw, 30px);
}

.product-finder-page .finder-fieldset {
    display: grid;
    gap: 12px;
}

.finder-choice-list {
    display: grid;
    gap: 9px;
}

.finder-choice-list--purpose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finder-option-row {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    padding: 13px 16px;
    color: var(--pf-text);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.finder-option-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.finder-option-row::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid rgba(23, 156, 153, 0.34);
    border-radius: 999px;
    background: #FFFFFF;
    justify-self: end;
}

.finder-option-row:has(input:checked) {
    border-color: rgba(23, 156, 153, 0.7);
    background: var(--pf-primary-soft);
    box-shadow: 0 10px 24px rgba(23, 156, 153, 0.1);
}

.finder-option-row:has(input:checked)::after {
    border-color: var(--pf-primary);
    background:
        radial-gradient(circle at center, #FFFFFF 0 32%, transparent 34%),
        var(--pf-primary);
}

.finder-option-row:focus-within {
    outline: 3px solid rgba(23, 156, 153, 0.18);
    outline-offset: 3px;
}

.finder-option-row__mark {
    display: inline-grid;
    place-items: center;
    min-width: 62px;
    min-height: 34px;
    border-radius: 999px;
    background: var(--pf-primary-soft);
    color: var(--pf-primary-dark);
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.finder-option-row__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.finder-option-row__body strong {
    color: var(--pf-ink);
    font-size: 13.8px;
    font-weight: 850;
    line-height: 1.48;
}

.finder-option-row__body small {
    color: var(--pf-muted);
    font-size: 12px;
    line-height: 1.58;
}

.finder-guide-list {
    display: grid;
    gap: 10px;
}

.finder-guide-row {
    display: grid;
    grid-template-columns: 64px minmax(164px, 0.34fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 20px;
    background: #FFFFFF;
    padding: 16px;
    color: var(--pf-text);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(16, 32, 34, 0.055);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.finder-guide-row span {
    display: inline-grid;
    place-items: center;
    min-height: 34px;
    border-radius: 999px;
    background: var(--pf-primary-soft);
    color: var(--pf-primary-dark);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.finder-guide-row strong {
    color: var(--pf-ink);
    font-size: 15px;
    line-height: 1.5;
}

.finder-guide-row p {
    margin: 0;
    color: var(--pf-muted);
    font-size: 12.8px;
    line-height: 1.65;
}

@media (hover: hover) {
    .finder-option-row:hover,
    .finder-guide-row:hover {
        transform: translateY(-2px);
        border-color: rgba(23, 156, 153, 0.48);
        box-shadow: 0 14px 30px rgba(16, 32, 34, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .finder-hero-photo,
    .finder-option-row,
    .finder-guide-row {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .product-finder-page .finder-hero-refresh__inner {
        grid-template-columns: 1fr;
    }

    .finder-choice-list--purpose {
        grid-template-columns: 1fr;
    }

    .finder-guide-row {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .finder-guide-row p {
        grid-column: 2 / -1;
    }
}

@media (max-width: 760px) {
    .finder-hero-photo {
        min-height: 268px;
        border-radius: 26px;
    }

    .finder-hero-photo img {
        min-height: 268px;
    }

    .finder-hero-photo figcaption {
        right: 14px;
        bottom: 14px;
        left: 14px;
        border-radius: 16px;
        padding: 11px 12px;
    }

    .finder-hero-photo figcaption strong {
        font-size: 13px;
    }

    .finder-hero-photo figcaption span {
        font-size: 11.5px;
    }

    .finder-step-strip {
        gap: 8px;
    }

    .finder-step-strip span {
        min-height: 38px;
        font-size: 11.5px;
    }

    .product-finder-page .finder-form--refreshed {
        border-radius: 22px;
        padding: 16px;
    }

    .finder-option-row {
        grid-template-columns: 54px minmax(0, 1fr) 18px;
        gap: 10px;
        min-height: 66px;
        border-radius: 15px;
        padding: 11px 12px;
    }

    .finder-option-row__mark {
        min-width: 48px;
        min-height: 30px;
        font-size: 10px;
    }

    .finder-option-row__body strong {
        font-size: 12.8px;
        line-height: 1.42;
    }

    .finder-option-row__body small {
        font-size: 11.2px;
        line-height: 1.5;
    }

    .finder-guide-row {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
        border-radius: 16px;
        padding: 13px;
    }

    .finder-guide-row strong {
        font-size: 13.5px;
    }

    .finder-guide-row p {
        font-size: 11.8px;
    }
}

/* Company page refresh */
.company-page {
    --company-primary: #179C99;
    --company-primary-dark: #0B5F5C;
    --company-primary-soft: #F0FBFA;
    --company-line: #DCEDEA;
    --company-ink: #102022;
    --company-text: #1F2933;
    --company-muted: #667085;
    background:
        radial-gradient(ellipse at 12% 4%, rgba(126, 218, 215, 0.18), transparent 30rem),
        radial-gradient(ellipse at 88% 24%, rgba(255, 209, 102, 0.1), transparent 24rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 52%, #FFFFFF 100%);
    color: var(--company-text);
}

.company-page .page-hero {
    background: transparent;
}

.company-page .page-hero__inner,
.company-page .section__inner {
    width: min(1120px, calc(100% - 48px));
}

.company-page .page-hero__inner {
    align-items: center;
    gap: clamp(30px, 5vw, 66px);
}

.company-page .page-hero h1 {
    color: var(--company-ink);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.18;
    letter-spacing: 0;
}

.company-page .page-hero__lead {
    max-width: 660px;
    color: var(--company-muted);
    font-size: 14.5px;
    line-height: 1.9;
}

.company-page .hero-badges span {
    border-color: rgba(23, 156, 153, 0.24);
    background: var(--company-primary-soft);
    color: var(--company-primary-dark);
}

.company-hero-photo {
    position: relative;
    min-height: 340px;
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: 0 22px 54px rgba(16, 32, 34, 0.12);
    overflow: hidden;
}

.company-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    object-position: center;
}

.company-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 32, 34, 0) 46%, rgba(16, 32, 34, 0.58) 100%);
    pointer-events: none;
}

.company-hero-photo figcaption {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 1;
    display: grid;
    gap: 4px;
    max-width: 430px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    padding: 13px 15px;
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.16);
    backdrop-filter: blur(10px);
}

.company-hero-photo strong {
    color: var(--company-ink);
    font-size: 14px;
    line-height: 1.5;
}

.company-hero-photo span {
    color: var(--company-muted);
    font-size: 12px;
    line-height: 1.65;
}

.company-page .company-section {
    background: transparent;
    padding-block: clamp(48px, 6vw, 78px);
}

.company-page .section__header {
    margin-bottom: clamp(22px, 3vw, 34px);
}

.company-page .section__header h2 {
    color: var(--company-ink);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.35;
    letter-spacing: 0;
}

.company-page .section__lead {
    max-width: 760px;
    color: var(--company-muted);
    font-size: 13.5px;
    line-height: 1.85;
}

.company-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--company-primary-dark);
    font-size: 12px;
    font-weight: 850;
}

.company-label::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--company-primary);
    box-shadow: 0 0 0 5px rgba(23, 156, 153, 0.12);
}

.company-lead-panel {
    max-width: 920px;
    border-left: 4px solid var(--company-primary);
    border-radius: 0 28px 28px 0;
    background: rgba(255, 255, 255, 0.72);
    padding: clamp(22px, 4vw, 38px);
}

.company-lead-panel h2 {
    margin: 0 0 14px;
    color: var(--company-ink);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.38;
    letter-spacing: 0;
}

.company-lead-panel p:not(.company-label) {
    max-width: 820px;
    margin: 0 0 12px;
    color: var(--company-text);
    font-size: 14px;
    line-height: 1.9;
}

.company-lead-panel p:last-child {
    margin-bottom: 0;
}

.company-assurance-list {
    display: grid;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.company-assurance-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
    padding: 22px clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--company-line);
}

.company-assurance-row:last-child {
    border-bottom: 0;
}

.company-assurance-row > span {
    align-self: start;
    display: inline-flex;
    width: fit-content;
    min-height: 34px;
    align-items: center;
    border-radius: 999px;
    background: var(--company-primary-soft);
    color: var(--company-primary-dark);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 850;
}

.company-assurance-row h3 {
    margin: 0 0 6px;
    color: var(--company-ink);
    font-size: 17px;
    line-height: 1.5;
}

.company-assurance-row p {
    margin: 0;
    color: var(--company-muted);
    font-size: 13px;
    line-height: 1.8;
}

.company-brand-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
}

.company-brand-image {
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 32px;
    background: linear-gradient(180deg, #FFFFFF, var(--company-primary-soft));
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.company-brand-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.company-brand-copy > p {
    margin: 0 0 20px;
    color: var(--company-text);
    font-size: 14px;
    line-height: 1.9;
}

.company-brand-points {
    display: grid;
    gap: 10px;
}

.company-brand-points div {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(220, 237, 234, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    padding: 15px 16px;
}

.company-brand-points strong {
    color: var(--company-ink);
    font-size: 14px;
    line-height: 1.5;
}

.company-brand-points span {
    color: var(--company-muted);
    font-size: 12.5px;
    line-height: 1.75;
}

.company-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 24px;
    align-items: start;
}

.company-info-table {
    display: grid;
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.07);
    overflow: hidden;
}

.company-info-table__row {
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    gap: 18px;
    border-bottom: 1px solid var(--company-line);
    padding: 17px 22px;
}

.company-info-table__row:last-child {
    border-bottom: 0;
}

.company-info-table dt {
    color: var(--company-muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.7;
}

.company-info-table dd {
    margin: 0;
    color: var(--company-ink);
    font-size: 13.5px;
    line-height: 1.75;
}

.company-info-table a {
    color: var(--company-primary-dark);
    font-weight: 800;
    text-decoration: none;
}

.company-profile-note {
    display: grid;
    gap: 16px;
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 28px;
    background: #FFFFFF;
    padding: 16px;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.07);
}

.company-profile-note img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    object-fit: cover;
}

.company-profile-note h3 {
    margin: 0 0 8px;
    color: var(--company-ink);
    font-size: 18px;
    line-height: 1.45;
}

.company-profile-note p:not(.company-label) {
    margin: 0;
    color: var(--company-muted);
    font-size: 13px;
    line-height: 1.8;
}

.company-partner-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    border: 1px solid rgba(220, 237, 234, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    padding: clamp(16px, 3vw, 24px);
}

.company-partner-item {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(220, 237, 234, 0.78);
    padding: 11px 8px 11px 18px;
}

.company-partner-item::before {
    content: "";
    position: absolute;
    top: 1.35em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--company-primary);
}

.company-partner-item h3 {
    margin: 0;
    color: var(--company-ink);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.65;
}

.company-partner-item p {
    margin: 3px 0 0;
    color: var(--company-muted);
    font-size: 12px;
    line-height: 1.55;
}

.company-contact-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    border: 1px solid rgba(23, 156, 153, 0.24);
    border-radius: 32px;
    background:
        radial-gradient(circle at 12% 20%, rgba(126, 218, 215, 0.22), transparent 16rem),
        linear-gradient(135deg, #FFFFFF, #F0FBFA);
    padding: clamp(22px, 4vw, 36px);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
}

.company-contact-band h2 {
    margin: 0 0 10px;
    color: var(--company-ink);
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.38;
}

.company-contact-band p:not(.company-label) {
    max-width: 700px;
    margin: 0;
    color: var(--company-muted);
    font-size: 13.5px;
    line-height: 1.8;
}

.company-contact-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 1024px) {
    .company-page .page-hero__inner,
    .company-brand-layout,
    .company-profile-layout,
    .company-contact-band {
        grid-template-columns: 1fr;
    }

    .company-contact-band__actions {
        justify-content: flex-start;
    }

    .company-partner-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .company-page .page-hero__inner,
    .company-page .section__inner {
        width: min(100% - 28px, 1120px);
    }

    .company-page .page-hero h1 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .company-page .page-hero__lead,
    .company-page .section__lead,
    .company-lead-panel p:not(.company-label) {
        font-size: 12.8px;
        line-height: 1.78;
    }

    .company-hero-photo {
        min-height: 260px;
        border-radius: 24px;
    }

    .company-hero-photo img {
        min-height: 260px;
    }

    .company-hero-photo figcaption {
        right: 14px;
        bottom: 14px;
        left: 14px;
        border-radius: 16px;
        padding: 11px 12px;
    }

    .company-lead-panel {
        border-left-width: 3px;
        border-radius: 0 20px 20px 0;
        padding: 20px;
    }

    .company-lead-panel h2,
    .company-page .section__header h2,
    .company-contact-band h2 {
        font-size: 22px;
    }

    .company-assurance-row {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 18px;
    }

    .company-brand-image,
    .company-info-table,
    .company-profile-note,
    .company-contact-band,
    .company-assurance-list {
        border-radius: 22px;
    }

    .company-info-table__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 16px;
    }

    .company-partner-list {
        grid-template-columns: 1fr;
        border-radius: 20px;
        padding: 10px 14px;
    }

    .company-partner-item {
        padding: 10px 4px 10px 16px;
    }

.company-contact-band__actions,
.company-contact-band__actions .button {
        width: 100%;
    }
}

/* Global navigation refinement: keep header concise and footer scannable. */
.site-nav {
    gap: clamp(12px, 1.6vw, 22px);
}

.site-nav > a,
.mega-menu summary {
    position: relative;
    color: var(--oc-ink, #102022);
    font-size: 13.5px;
    letter-spacing: 0;
    white-space: nowrap;
}

.site-nav > a::after,
.mega-menu summary::before {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 3px;
    left: 6px;
    display: block;
    width: 0;
    height: 2px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    transition: width 180ms ease;
}

.site-nav > a:hover::after,
.site-nav > a:focus-visible::after,
.mega-menu:hover summary::before,
.mega-menu:focus-within summary::before,
.mega-menu[open] summary::before {
    width: 100%;
}

.site-header__actions {
    gap: 8px;
}

.site-header__actions .button,
.header-phone-cta {
    font-size: 13px;
    font-weight: 850;
}

.header-phone-cta span {
    white-space: nowrap;
}

.header-corporate-menu {
    position: relative;
    z-index: 12;
}

.header-corporate-menu__trigger {
    display: inline-flex;
    min-height: 42px;
    cursor: pointer;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    list-style: none;
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.header-corporate-menu__trigger::-webkit-details-marker {
    display: none;
}

.header-corporate-menu__trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}

.header-corporate-menu[open] .header-corporate-menu__trigger::after {
    transform: translateY(2px) rotate(225deg);
}

.header-corporate-menu__trigger span {
    white-space: nowrap;
}

.header-corporate-menu__trigger small {
    display: none;
}

.header-corporate-menu__trigger:hover,
.header-corporate-menu__trigger:focus-visible,
.header-corporate-menu[open] .header-corporate-menu__trigger {
    background: var(--oc-primary-800, #0B5F5C);
    box-shadow: 0 12px 30px rgba(23, 156, 153, 0.22);
    outline: 0;
}

.header-corporate-menu__trigger:focus-visible {
    outline: 3px solid rgba(126, 218, 215, 0.45);
    outline-offset: 3px;
}

.header-corporate-menu__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: grid;
    width: min(340px, calc(100vw - 40px));
    gap: 8px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 8%, rgba(223, 247, 245, 0.94), transparent 13rem),
        #FFFFFF;
    box-shadow: 0 22px 60px rgba(16, 32, 34, 0.16);
    padding: 10px;
}

.header-corporate-menu__panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 26px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--oc-primary-200, #BDEDEA);
    border-left: 1px solid var(--oc-primary-200, #BDEDEA);
    background: #FFFFFF;
    transform: rotate(45deg);
}

.header-corporate-menu__item {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: var(--oc-ink, #102022);
    padding: 13px 14px;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.header-corporate-menu__item span {
    color: var(--oc-ink, #102022);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

.header-corporate-menu__item small {
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.header-corporate-menu__item:hover,
.header-corporate-menu__item:focus-visible {
    border-color: var(--oc-primary-200, #BDEDEA);
    background: var(--oc-primary-50, #F0FBFA);
    outline: 0;
    transform: translateY(-1px);
}

.site-footer__brand {
    max-width: 390px;
}

.site-footer__links {
    align-items: start;
    grid-template-columns: minmax(160px, 1.12fr) minmax(170px, 1.18fr) minmax(145px, 0.9fr) minmax(155px, 0.95fr);
    gap: clamp(20px, 2.8vw, 40px);
}

.site-footer__links > div {
    gap: 7px;
}

.site-footer__label {
    margin-bottom: 6px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.site-footer__links a {
    min-height: 26px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.55;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
    color: #FFFFFF;
}

.mobile-nav__group {
    margin: 0;
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 11px 0 9px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.mobile-nav a.mobile-nav__store {
    margin-top: 14px;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-bottom: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    justify-content: center;
    padding-inline: 18px;
}

@media (min-width: 1041px) {
    .mega-menu__panel {
        transform: translateX(-34%);
    }
}

@media (max-width: 1180px) and (min-width: 1041px) {
    .site-nav {
        gap: 12px;
    }

    .site-nav > a,
    .mega-menu summary {
        font-size: 13px;
    }

    .site-header__actions .button {
        padding-inline: 12px;
    }
}

@media (max-width: 1120px) {
    .site-footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1040px) {
    .mobile-nav nav {
        padding: 0 18px 18px;
    }

    .mobile-nav a {
        padding: 11px 0;
        font-size: 13px;
    }
}

@media (max-width: 760px) {
    .site-footer__lead {
        max-width: 100%;
        font-size: 12.5px;
    }

    .site-footer__links {
        gap: 22px;
    }

    .site-footer__links a {
        font-size: 12.8px;
    }
}

/* Dealer partner page */
.dealer-page {
    --dealer-primary: #179C99;
    --dealer-primary-dark: #0B5F5C;
    --dealer-soft: #F0FBFA;
    --dealer-line: #DCEDEA;
    --dealer-ink: #102022;
    --dealer-muted: #667085;
}

.dealer-page .page-hero__lead {
    max-width: 700px;
}

.dealer-hero-photo img {
    object-position: center;
}

.dealer-section {
    background: transparent;
}

.dealer-lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.9fr);
    gap: clamp(20px, 4vw, 42px);
    align-items: stretch;
}

.dealer-lead-panel {
    max-width: none;
}

.dealer-note-panel,
.dealer-form-note {
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.07);
    padding: clamp(20px, 3vw, 30px);
}

.dealer-chip-grid {
    gap: 9px;
}

.dealer-chip-grid span {
    min-height: 36px;
    background: #FFFFFF;
    font-size: 12.5px;
}

.dealer-support-list {
    display: grid;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.dealer-support-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 30px);
    border-bottom: 1px solid var(--dealer-line);
    padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 34px);
}

.dealer-support-row:last-child {
    border-bottom: 0;
}

.dealer-support-row > span {
    display: inline-flex;
    width: fit-content;
    min-height: 32px;
    align-items: center;
    border-radius: 999px;
    background: var(--dealer-soft);
    color: var(--dealer-primary-dark);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 850;
}

.dealer-support-row h3,
.dealer-assurance-list h3,
.dealer-collaboration h3 {
    margin: 0 0 7px;
    color: var(--dealer-ink);
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;
}

.dealer-support-row p,
.dealer-assurance-list p,
.dealer-collaboration p,
.dealer-form-note p {
    margin: 0;
    color: var(--dealer-muted);
    font-size: 13px;
    line-height: 1.82;
}

.dealer-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.dealer-flow article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 205px;
    border-right: 1px solid var(--dealer-line);
    padding: 24px 20px;
}

.dealer-flow article:last-child {
    border-right: 0;
}

.dealer-flow article::after {
    content: "";
    position: absolute;
    top: 43px;
    right: -7px;
    z-index: 1;
    width: 13px;
    height: 13px;
    border-top: 1px solid var(--dealer-line);
    border-right: 1px solid var(--dealer-line);
    background: #FFFFFF;
    transform: rotate(45deg);
}

.dealer-flow article:last-child::after {
    display: none;
}

.dealer-flow span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    background: var(--dealer-primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
}

.dealer-flow h3 {
    margin: 6px 0 0;
    color: var(--dealer-ink);
    font-size: 15px;
    line-height: 1.45;
}

.dealer-flow p {
    margin: 0;
    color: var(--dealer-muted);
    font-size: 12.5px;
    line-height: 1.75;
}

.dealer-assurance-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(22px, 4vw, 44px);
    align-items: stretch;
}

.dealer-assurance-image {
    min-height: 360px;
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.dealer-assurance-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
}

.dealer-assurance-list {
    display: grid;
    gap: 12px;
}

.dealer-assurance-list article,
.dealer-collaboration > div {
    border: 1px solid rgba(220, 237, 234, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    padding: clamp(18px, 3vw, 24px);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.06);
}

.dealer-collaboration {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dealer-contact-layout {
    align-items: start;
}

.dealer-contact-side {
    display: grid;
    gap: 14px;
}

.dealer-form-note h3 {
    margin: 0 0 12px;
    color: var(--dealer-ink);
    font-size: 17px;
    line-height: 1.45;
}

.dealer-form-note--soft {
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 209, 102, 0.16), transparent 10rem),
        var(--dealer-soft);
}

.dealer-contact-form {
    border-radius: 30px;
}

@media (max-width: 1080px) {
    .dealer-flow {
        grid-template-columns: 1fr;
    }

    .dealer-flow article {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--dealer-line);
        padding: 20px;
    }

    .dealer-flow article:last-child {
        border-bottom: 0;
    }

    .dealer-flow article::after {
        display: none;
    }
}

@media (max-width: 900px) {
    .dealer-lead-grid,
    .dealer-assurance-layout,
    .dealer-collaboration {
        grid-template-columns: 1fr;
    }

    .dealer-assurance-image,
    .dealer-assurance-image img {
        min-height: 280px;
    }
}

@media (max-width: 760px) {
    .dealer-support-row {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 18px;
    }

    .dealer-support-row h3,
    .dealer-assurance-list h3,
    .dealer-collaboration h3,
    .dealer-form-note h3 {
        font-size: 15.5px;
    }

    .dealer-support-row p,
    .dealer-assurance-list p,
    .dealer-collaboration p,
    .dealer-flow p,
    .dealer-form-note p {
        font-size: 12.6px;
        line-height: 1.72;
    }

    .dealer-note-panel,
    .dealer-form-note,
    .dealer-support-list,
    .dealer-flow,
    .dealer-assurance-image,
    .dealer-assurance-list article,
    .dealer-collaboration > div,
    .dealer-contact-form {
        border-radius: 22px;
    }

    .dealer-chip-grid span {
        min-height: 34px;
        font-size: 12px;
    }
}

/* Media and press page */
.media-page {
    --media-primary: #179C99;
    --media-primary-dark: #0B5F5C;
    --media-soft: #F0FBFA;
    --media-line: #DCEDEA;
    --media-ink: #102022;
    --media-muted: #667085;
}

.media-page .page-hero__lead {
    max-width: 720px;
}

.media-hero-photo img {
    object-position: center;
}

.media-section {
    background: transparent;
}

.media-lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    gap: clamp(20px, 4vw, 42px);
    align-items: stretch;
}

.media-lead-panel {
    max-width: none;
}

.media-request-panel,
.media-form-note,
.media-notice-panel {
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.07);
    padding: clamp(20px, 3vw, 30px);
}

.media-chip-grid {
    gap: 9px;
}

.media-chip-grid span {
    min-height: 36px;
    background: #FFFFFF;
    font-size: 12.5px;
}

.media-coverage-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 34px;
    background:
        radial-gradient(circle at 12% 18%, rgba(126, 218, 215, 0.2), transparent 17rem),
        linear-gradient(135deg, #FFFFFF 0%, #F7FBFA 100%);
    padding: clamp(18px, 3vw, 32px);
    box-shadow: 0 20px 50px rgba(16, 32, 34, 0.09);
}

.media-coverage-feature figure {
    margin: 0;
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(220, 237, 234, 0.92);
    overflow: hidden;
}

.media-coverage-feature img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

.media-coverage-feature h2 {
    margin: 0 0 12px;
    color: var(--media-ink);
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.34;
    letter-spacing: 0;
}

.media-coverage-feature p:not(.company-label) {
    margin: 0;
    color: var(--media-muted);
    font-size: 13.5px;
    line-height: 1.86;
}

.media-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.media-link-list a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    border: 1px solid rgba(189, 237, 234, 0.96);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--media-primary-dark);
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 850;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.media-link-list a:hover,
.media-link-list a:focus-visible {
    border-color: rgba(23, 156, 153, 0.46);
    background: var(--media-soft);
    transform: translateY(-1px);
}

.media-coverage-detail {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: start;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    padding: clamp(16px, 3vw, 22px);
}

.media-coverage-detail__copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.media-coverage-detail h3 {
    margin: 0;
    color: var(--media-ink);
    font-size: 17px;
    line-height: 1.5;
}

.media-coverage-facts {
    display: grid;
    gap: 8px;
    margin: 0;
}

.media-coverage-facts div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid rgba(220, 237, 234, 0.9);
    padding-bottom: 8px;
}

.media-coverage-facts div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.media-coverage-facts dt {
    color: var(--media-primary-dark);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.6;
}

.media-coverage-facts dd {
    margin: 0;
    color: var(--media-ink);
    font-size: 12.8px;
    line-height: 1.65;
}

.media-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    align-self: start;
    border-radius: 20px;
    background: #102022;
    overflow: hidden;
}

.media-video-embed iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-support-list {
    display: grid;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.media-support-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 30px);
    border-bottom: 1px solid var(--media-line);
    padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 34px);
}

.media-support-row:last-child {
    border-bottom: 0;
}

.media-support-row > span {
    display: inline-flex;
    width: fit-content;
    min-height: 32px;
    align-items: center;
    border-radius: 999px;
    background: var(--media-soft);
    color: var(--media-primary-dark);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 850;
}

.media-support-row h3,
.media-creator-points h3,
.media-form-note h3 {
    margin: 0 0 7px;
    color: var(--media-ink);
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;
}

.media-support-row p,
.media-creator-points p,
.media-form-note p,
.media-notice-panel p {
    margin: 0;
    color: var(--media-muted);
    font-size: 13px;
    line-height: 1.82;
}

.media-creator-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    gap: clamp(22px, 4vw, 44px);
    align-items: stretch;
}

.media-creator-image {
    min-height: 360px;
    margin: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.media-creator-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
}

.media-creator-points {
    display: grid;
    gap: 12px;
}

.media-creator-intro,
.media-creator-points article {
    border: 1px solid rgba(220, 237, 234, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    padding: clamp(18px, 3vw, 24px);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.06);
}

.media-creator-intro {
    background:
        radial-gradient(circle at 94% 10%, rgba(255, 209, 102, 0.18), transparent 10rem),
        var(--media-soft);
}

.media-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
    overflow: hidden;
}

.media-flow article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 188px;
    border-right: 1px solid var(--media-line);
    padding: 24px 20px;
}

.media-flow article:last-child {
    border-right: 0;
}

.media-flow article::after {
    content: "";
    position: absolute;
    top: 43px;
    right: -7px;
    z-index: 1;
    width: 13px;
    height: 13px;
    border-top: 1px solid var(--media-line);
    border-right: 1px solid var(--media-line);
    background: #FFFFFF;
    transform: rotate(45deg);
}

.media-flow article:last-child::after {
    display: none;
}

.media-flow span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    background: var(--media-primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
}

.media-flow h3 {
    margin: 6px 0 0;
    color: var(--media-ink);
    font-size: 15px;
    line-height: 1.45;
}

.media-flow p {
    margin: 0;
    color: var(--media-muted);
    font-size: 12.5px;
    line-height: 1.75;
}

.media-notice-panel {
    display: grid;
    gap: 10px;
}

.media-notice-panel p {
    position: relative;
    padding-left: 20px;
}

.media-notice-panel p::before {
    content: "";
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--media-primary);
}

.media-contact-layout {
    align-items: start;
}

.media-contact-side {
    display: grid;
    gap: 14px;
}

.media-form-note--soft {
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 209, 102, 0.16), transparent 10rem),
        var(--media-soft);
}

.media-contact-form {
    border-radius: 30px;
}

@media (max-width: 1080px) {
    .media-flow {
        grid-template-columns: 1fr;
    }

    .media-flow article {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--media-line);
        padding: 20px;
    }

    .media-flow article:last-child {
        border-bottom: 0;
    }

    .media-flow article::after {
        display: none;
    }
}

@media (max-width: 900px) {
    .media-lead-grid,
    .media-coverage-feature,
    .media-coverage-detail,
    .media-creator-layout {
        grid-template-columns: 1fr;
    }

    .media-creator-image,
    .media-creator-image img {
        min-height: 280px;
    }
}

@media (max-width: 760px) {
    .media-request-panel,
    .media-form-note,
    .media-notice-panel,
    .media-coverage-feature,
    .media-coverage-detail,
    .media-support-list,
    .media-creator-image,
    .media-creator-intro,
    .media-creator-points article,
    .media-flow,
    .media-contact-form {
        border-radius: 22px;
    }

    .media-chip-grid span {
        min-height: 34px;
        font-size: 12px;
    }

    .media-coverage-feature {
        padding: 14px;
    }

    .media-coverage-feature h2 {
        font-size: 22px;
    }

    .media-coverage-detail h3 {
        font-size: 15.5px;
    }

    .media-coverage-facts div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .media-coverage-feature p:not(.company-label),
    .media-support-row p,
    .media-coverage-detail__copy p,
    .media-creator-points p,
    .media-form-note p,
    .media-notice-panel p,
    .media-flow p {
        font-size: 12.6px;
        line-height: 1.72;
    }

    .media-support-row {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 18px;
    }

    .media-support-row h3,
    .media-creator-points h3,
    .media-form-note h3 {
        font-size: 15.5px;
    }

    .media-link-list a {
        width: 100%;
        justify-content: center;
    }
}

/* Manuals page: compact, image-led support guide layout */
.manuals-page .page-hero {
    background:
        radial-gradient(circle at 12% 16%, rgba(223, 247, 245, 0.82), transparent 26rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--oc-primary-50, #F0FBFA) 100%);
}

.manuals-page .page-hero__inner,
.manuals-page .section__inner {
    width: min(1120px, calc(100% - 44px));
}

.manuals-page .page-hero__content h1 {
    max-width: 9em;
}

.manuals-page .page-hero__lead {
    max-width: 620px;
}

.manuals-hero-photo {
    position: relative;
    width: min(430px, 100%);
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: 0 20px 50px rgba(16, 32, 34, 0.1);
}

.manuals-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 48%, rgba(6, 63, 62, 0.44) 100%),
        radial-gradient(circle at 18% 18%, rgba(23, 156, 153, 0.14), transparent 14rem);
    pointer-events: none;
}

.manuals-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.manuals-hero-photo figcaption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 1;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 28px rgba(16, 32, 34, 0.1);
    backdrop-filter: blur(10px);
}

.manuals-hero-photo figcaption strong {
    display: block;
    color: var(--oc-ink, #102022);
    font-size: 0.9rem;
    line-height: 1.55;
}

.manuals-section {
    padding-top: clamp(36px, 5vw, 64px);
    padding-bottom: clamp(36px, 5vw, 64px);
}

.manuals-section .section__header {
    max-width: 720px;
    margin-bottom: 22px;
}

.manuals-section .section__lead {
    max-width: 660px;
    line-height: 1.72;
}

.manuals-guide-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 18px;
    align-items: stretch;
}

.manuals-primary-guide,
.manuals-category-link,
.manuals-doc-section,
.manuals-doc-item,
.manuals-product-item {
    border: 1px solid var(--oc-line, #DCEDEA);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 32px rgba(16, 32, 34, 0.065);
}

.manuals-primary-guide {
    display: grid;
    gap: 13px;
    align-content: start;
    padding: 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 218, 215, 0.2), transparent 12rem),
        #FFFFFF;
}

.manuals-primary-guide > span,
.manuals-doc-section__heading span,
.manuals-doc-item__meta {
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 800;
}

.manuals-primary-guide h3 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(1.18rem, 1.7vw, 1.42rem);
    line-height: 1.45;
}

.manuals-primary-guide p,
.manuals-category-link p,
.manuals-doc-section__heading p,
.manuals-doc-item__body p,
.manuals-product-item span {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 0.92rem;
    line-height: 1.72;
}

.manuals-primary-guide ul,
.manuals-doc-item__body ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manuals-primary-guide li,
.manuals-doc-item__body li {
    border-radius: 999px;
    background: var(--oc-primary-50, #F0FBFA);
    color: var(--oc-primary-800, #0B5F5C);
    padding: 6px 9px;
    font-size: 0.76rem;
    font-weight: 800;
}

.manuals-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 3px;
}

.manuals-action-row .button,
.manuals-doc-item__actions .button {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 0.82rem;
}

.manuals-category-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.manuals-category-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px 10px;
    align-items: center;
    padding: 14px;
    border-radius: 22px;
    color: var(--oc-text, #1F2933);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.manuals-category-link:hover,
.manuals-category-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--oc-primary-300, #7EDAD7);
    background: var(--oc-primary-50, #F0FBFA);
    box-shadow: 0 16px 38px rgba(16, 32, 34, 0.09);
}

.manuals-category-link > span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: var(--oc-primary-100, #DFF7F5);
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 0.78rem;
    font-weight: 900;
}

.manuals-category-link strong {
    color: var(--oc-ink, #102022);
    font-size: 0.98rem;
    line-height: 1.42;
}

.manuals-category-link small {
    justify-self: end;
    color: var(--oc-primary-700, #10817E);
    font-size: 0.78rem;
    font-weight: 800;
}

.manuals-category-link p {
    grid-column: 2 / 4;
    font-size: 0.84rem;
    line-height: 1.58;
}

.manuals-doc-sections {
    display: grid;
    gap: 18px;
}

.manuals-doc-section {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    scroll-margin-top: 96px;
}

.manuals-doc-section__heading {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(260px, 1fr);
    gap: 14px;
    align-items: end;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--oc-line, #DCEDEA);
}

.manuals-doc-section__heading > div {
    display: grid;
    gap: 8px;
}

.manuals-doc-section__heading h3 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(1.12rem, 1.8vw, 1.4rem);
    line-height: 1.45;
}

.manuals-doc-list {
    display: grid;
    gap: 10px;
}

.manuals-doc-item {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-radius: 22px;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.manuals-doc-item:hover {
    transform: translateY(-2px);
    border-color: var(--oc-primary-300, #7EDAD7);
    background: #FFFFFF;
}

.manuals-doc-item__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: var(--oc-primary-50, #F0FBFA);
}

.manuals-doc-item__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.manuals-doc-item__thumb:hover img {
    transform: scale(1.025);
}

.manuals-doc-item__body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.manuals-doc-item__body h4 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.45;
}

.manuals-doc-item__body > p:not(.manuals-doc-item__meta) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.manuals-doc-item__actions {
    display: grid;
    gap: 8px;
    justify-items: end;
    min-width: 150px;
}

.manuals-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.manuals-text-link:hover,
.manuals-text-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.manuals-product-list {
    display: grid;
    gap: 10px;
}

.manuals-product-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 22px;
}

.manuals-product-item p {
    margin: 0 0 4px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 0.78rem;
    font-weight: 800;
}

.manuals-product-item h3 {
    margin: 0 0 4px;
    color: var(--oc-ink, #102022);
    font-size: 1rem;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .manuals-guide-layout,
    .manuals-doc-section__heading {
        grid-template-columns: 1fr;
    }

    .manuals-doc-item {
        grid-template-columns: 116px minmax(0, 1fr);
    }

    .manuals-doc-item__actions {
        grid-column: 2;
        grid-template-columns: repeat(2, max-content);
        justify-content: start;
        justify-items: start;
    }
}

@media (max-width: 720px) {
    .manuals-page .page-hero__inner,
    .manuals-page .section__inner {
        width: min(100% - 30px, 1120px);
    }

    .manuals-hero-photo {
        width: min(100%, 340px);
        border-radius: 24px;
    }

    .manuals-hero-photo figcaption {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 11px 12px;
        border-radius: 17px;
    }

    .manuals-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .manuals-category-list {
        grid-template-columns: 1fr;
    }

    .manuals-primary-guide,
    .manuals-doc-section,
    .manuals-doc-item,
    .manuals-product-item {
        border-radius: 20px;
    }

    .manuals-primary-guide,
    .manuals-doc-section {
        padding: 16px;
    }

    .manuals-doc-item {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 11px;
        padding: 10px;
    }

    .manuals-doc-item__thumb {
        border-radius: 14px;
    }

    .manuals-doc-item__actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        justify-items: stretch;
        min-width: 0;
    }

    .manuals-doc-item__actions .button {
        width: 100%;
    }

    .manuals-product-item {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .manuals-product-item .manuals-text-link {
        justify-content: flex-start;
    }
}

/* Restore service page final overrides */
.restore-service-page--refined .page-hero {
    background: linear-gradient(135deg, #f8fdfc 0%, #ffffff 58%, #e9f8f6 100%) !important;
    color: var(--oc-ink, #102022);
}

.restore-service-page--refined .page-hero .eyebrow,
.restore-service-page--refined .page-hero h1,
.restore-service-page--refined .page-hero p {
    color: var(--oc-ink, #102022);
}

.restore-service-page--refined .restore-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

.restore-service-page--refined .restore-check-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 22px;
    align-items: stretch;
}

.restore-service-page--refined .restore-check-main,
.restore-service-page--refined .restore-condition-panel,
.restore-service-page--refined .restore-agreement-panel--linear,
.restore-service-page--refined .restore-form-side,
.restore-service-page--refined .restore-service-form {
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 40px rgba(16, 32, 34, 0.08);
}

.restore-service-page--refined .restore-check-main {
    padding: 28px;
}

.restore-service-page--refined .restore-condition-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(180deg, #063f3e 0%, #0b5f5c 100%);
    color: #ffffff;
}

.restore-service-page--refined .restore-flow-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(16, 32, 34, 0.08);
}

.restore-service-page--refined .restore-flow-strip div {
    min-height: 168px;
    padding: 24px;
    border-right: 1px solid var(--oc-line, #dcedea);
}

.restore-service-page--refined .restore-flow-strip div:last-child {
    border-right: 0;
}

.restore-service-page--refined .restore-agreement-panel--linear {
    padding: 10px 28px;
}

.restore-service-page--refined .restore-agreement-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.restore-service-page--refined .restore-agreement-list li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--oc-line, #dcedea);
}

.restore-service-page--refined .restore-agreement-list li:last-child {
    border-bottom: 0;
}

.restore-service-page--refined .restore-agreement-list li > span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--oc-primary, #179c99);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
}

.restore-service-page--refined .restore-agreement-list h3 {
    margin: 0 0 7px;
    color: var(--oc-ink, #102022);
    font-size: 1rem;
    line-height: 1.5;
}

.restore-service-page--refined .restore-agreement-list p {
    margin: 0;
    color: var(--oc-text, #1f2933);
    font-size: 0.92rem;
    line-height: 1.85;
}

.restore-service-page--refined .restore-form-layout--refined {
    grid-template-columns: minmax(260px, 0.35fr) minmax(0, 0.65fr);
    align-items: start;
}

.restore-service-page--refined .restore-form-layout--refined .restore-form-side {
    position: sticky;
    top: 92px;
    padding: 24px;
}

.restore-service-page--refined .restore-service-form {
    padding: 28px;
}

@media (max-width: 980px) {
    .restore-service-page--refined .restore-check-layout,
    .restore-service-page--refined .restore-form-layout--refined {
        grid-template-columns: 1fr;
    }

    .restore-service-page--refined .restore-form-layout--refined .restore-form-side {
        position: static;
    }

    .restore-service-page--refined .restore-flow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .restore-service-page--refined .restore-section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .restore-service-page--refined .restore-check-main,
    .restore-service-page--refined .restore-condition-panel,
    .restore-service-page--refined .restore-service-form {
        padding: 18px;
    }

    .restore-service-page--refined .restore-compact-list,
    .restore-service-page--refined .restore-flow-strip {
        grid-template-columns: 1fr;
    }

    .restore-service-page--refined .restore-flow-strip div,
    .restore-service-page--refined .restore-flow-strip div:nth-child(2) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--oc-line, #dcedea);
        padding: 18px;
    }

    .restore-service-page--refined .restore-agreement-list li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 17px 0;
    }
}
/* Stores page refinement */
.stores-hero-photo img {
    object-position: center;
}

.stores-section {
    background: transparent;
    padding-block: clamp(38px, 5vw, 68px);
}

.stores-section .section__inner {
    width: min(1120px, calc(100% - 48px));
}

.stores-section .section__header {
    margin-bottom: clamp(20px, 3vw, 32px);
}

.stores-section .section__header h2 {
    color: var(--oc-ink, #102022);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.35;
    letter-spacing: 0;
}

.stores-section .section__lead {
    max-width: 780px;
    color: var(--oc-muted, #667085);
    font-size: 13.5px;
    line-height: 1.85;
}

.stores-benefit-panel,
.stores-directory,
.stores-guidance-band {
    border: 1px solid rgba(189, 237, 234, 0.9);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 44px rgba(16, 32, 34, 0.08);
}

.stores-benefit-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
    padding: clamp(24px, 4vw, 40px);
    background:
        radial-gradient(circle at 8% 8%, rgba(126, 218, 215, 0.24), transparent 17rem),
        linear-gradient(135deg, #ffffff 0%, #f0fbfa 100%);
}

.stores-benefit-copy {
    display: grid;
    gap: 14px;
}

.stores-benefit-copy h2,
.stores-directory__head h2,
.stores-guidance-band h2 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(22px, 2.8vw, 34px);
    line-height: 1.42;
    letter-spacing: 0;
}

.stores-benefit-copy p:not(.company-label),
.stores-guidance-band p:not(.company-label) {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 13.5px;
    line-height: 1.85;
}

.stores-benefit-actions,
.stores-guidance-band__actions,
.stores-directory-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stores-benefit-list {
    display: grid;
    gap: 10px;
}

.stores-benefit-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border: 1px solid rgba(189, 237, 234, 0.82);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    padding: 16px 18px;
}

.stores-benefit-row > span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: var(--oc-primary, #179c99);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.18);
}

.stores-benefit-row h3 {
    margin: 0 0 4px;
    color: var(--oc-ink, #102022);
    font-size: 16px;
    line-height: 1.45;
}

.stores-benefit-row p,
.stores-benefit-note {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    line-height: 1.75;
}

.stores-benefit-note {
    border-radius: 18px;
    background: rgba(255, 209, 102, 0.18);
    color: #6b4b00;
    padding: 12px 14px;
}

.stores-directory {
    padding: clamp(20px, 3vw, 30px);
}

.stores-directory__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
}

.stores-directory__head h2 {
    font-size: clamp(21px, 2.4vw, 30px);
}

.stores-directory-search {
    display: grid;
    gap: 8px;
}

.stores-directory-search span,
.stores-filter-group > span {
    color: var(--oc-primary-800, #0b5f5c);
    font-size: 12px;
    font-weight: 850;
}

.stores-directory-search input {
    width: 100%;
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 999px;
    background: #fff;
    color: var(--oc-text, #1f2933);
    font: inherit;
    font-size: 13.5px;
    padding: 13px 16px;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.stores-directory-search input:focus {
    border-color: var(--oc-primary, #179c99);
    box-shadow: 0 0 0 4px rgba(23, 156, 153, 0.12);
}

.stores-directory-filters {
    display: grid;
    gap: 14px;
    border-block: 1px solid rgba(220, 237, 234, 0.95);
    padding: 16px 0;
    margin-bottom: 12px;
}

.stores-filter-group {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.stores-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stores-filter-button {
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: #fff;
    color: var(--oc-primary-800, #0b5f5c);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    padding: 10px 14px;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.stores-filter-button:hover,
.stores-filter-button:focus-visible {
    border-color: var(--oc-primary, #179c99);
    background: var(--oc-primary-50, #f0fbfa);
    transform: translateY(-1px);
}

.stores-filter-button[aria-pressed="true"] {
    border-color: var(--oc-primary, #179c99);
    background: var(--oc-primary, #179c99);
    color: #fff;
}

.stores-directory-summary {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
    color: var(--oc-muted, #667085);
    font-size: 12.5px;
    font-weight: 750;
}

.stores-directory-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stores-directory-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    align-items: start;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    padding: 16px;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.stores-directory-card:hover {
    border-color: rgba(23, 156, 153, 0.28);
    box-shadow: 0 14px 32px rgba(16, 32, 34, 0.08);
    transform: translateY(-2px);
}

.stores-directory-card[hidden] {
    display: none;
}

.stores-directory-card__top {
    display: grid;
    gap: 9px;
}

.stores-directory-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stores-directory-card__badge {
    width: fit-content;
    border-radius: 999px;
    background: var(--oc-primary-50, #f0fbfa);
    color: var(--oc-primary-800, #0b5f5c);
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 850;
}

.stores-directory-card__badge--online {
    background: var(--oc-primary, #179c99);
    color: #fff;
}

.stores-directory-card h3 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: 16px;
    line-height: 1.45;
}

.stores-directory-card__body {
    display: grid;
    gap: 8px;
}

.stores-directory-card__body p,
.stores-directory-card__meta {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    line-height: 1.7;
}

.stores-directory-card__meta {
    display: grid;
    gap: 6px;
}

.stores-directory-card__meta div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px;
}

.stores-directory-card__meta dt {
    color: var(--oc-primary-800, #0b5f5c);
    font-weight: 800;
}

.stores-directory-card__meta dd {
    margin: 0;
}

.stores-directory-card__note {
    color: var(--oc-text, #1f2933) !important;
    font-weight: 650;
}

.stores-directory-card__actions {
    justify-content: flex-start;
    margin-top: auto;
    min-width: 0;
}

.stores-directory-card__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: #fff;
    color: var(--oc-primary-800, #0b5f5c);
    font-size: 12.5px;
    font-weight: 850;
    padding: 9px 13px;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.stores-directory-card__actions a:hover,
.stores-directory-card__actions a:focus-visible {
    border-color: var(--oc-primary, #179c99);
    background: var(--oc-primary-50, #f0fbfa);
    transform: translateY(-1px);
}

.stores-empty {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 20px;
    background: var(--oc-primary-50, #f0fbfa);
    color: var(--oc-primary-800, #0b5f5c);
    font-size: 13px;
    font-weight: 750;
    padding: 18px;
}

.stores-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid rgba(220, 237, 234, 0.95);
    margin-top: 18px;
    padding-top: 18px;
}

.stores-pagination[hidden] {
    display: none;
}

.stores-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.stores-pagination__button {
    min-width: 42px;
    min-height: 40px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 999px;
    background: #fff;
    color: var(--oc-primary-800, #0b5f5c);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1;
    padding: 10px 14px;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.stores-pagination__button:hover,
.stores-pagination__button:focus-visible {
    border-color: var(--oc-primary, #179c99);
    background: var(--oc-primary-50, #f0fbfa);
    transform: translateY(-1px);
}

.stores-pagination__button[aria-current="page"] {
    border-color: var(--oc-primary, #179c99);
    background: var(--oc-primary, #179c99);
    color: #fff;
}

.stores-pagination__button:disabled {
    cursor: not-allowed;
    opacity: 0.46;
    transform: none;
}

.stores-pagination__dots {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--oc-muted, #667085);
    font-size: 12.5px;
    font-weight: 850;
    padding-inline: 2px;
}

.stores-guidance-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: clamp(22px, 4vw, 36px);
    background:
        radial-gradient(circle at 9% 18%, rgba(255, 209, 102, 0.16), transparent 16rem),
        linear-gradient(135deg, #ffffff 0%, #f0fbfa 100%);
}

.stores-guidance-band__actions {
    justify-content: flex-end;
}

@media (max-width: 1040px) {
    .stores-benefit-panel,
    .stores-guidance-band {
        grid-template-columns: 1fr;
    }

    .stores-guidance-band__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 960px) {
    .stores-directory-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .stores-directory__head,
    .stores-filter-group {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 760px) {
    .stores-section .section__inner {
        width: min(100% - 28px, 1120px);
    }

    .stores-section {
        padding-block: 32px;
    }

    .stores-benefit-panel,
    .stores-directory,
    .stores-guidance-band {
        border-radius: 24px;
        padding: 18px;
    }

    .stores-benefit-row {
        grid-template-columns: 38px minmax(0, 1fr);
        border-radius: 18px;
        padding: 14px;
    }

    .stores-benefit-row > span {
        width: 36px;
        height: 36px;
        border-radius: 14px;
    }

    .stores-directory-card {
        border-radius: 20px;
        gap: 12px;
        padding: 16px;
    }

    .stores-directory-summary {
        justify-content: flex-start;
    }

    .stores-directory-card__meta div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .stores-filter-buttons {
        gap: 7px;
    }

    .stores-filter-button {
        font-size: 12px;
        padding: 9px 11px;
    }

    .stores-benefit-actions,
    .stores-benefit-actions .button,
    .stores-guidance-band__actions,
    .stores-guidance-band__actions .button,
    .stores-directory-card__actions,
    .stores-directory-card__actions a {
        width: 100%;
    }

    .stores-pagination {
        justify-content: stretch;
    }

    .stores-pagination__button {
        flex: 1 1 auto;
    }

    .stores-pagination__pages {
        order: 3;
        width: 100%;
    }
}

/* Final mobile hero spacing adjustments */
@media (max-width: 760px) {
    .page-hero {
        padding-top: 0 !important;
    }

    .page-hero__inner {
        padding-top: 24px !important;
        padding-bottom: 36px !important;
    }

    .page-hero h1,
    .page-hero__content h1 {
        font-size: clamp(28px, 8.4vw, 38px) !important;
        line-height: 1.24 !important;
        letter-spacing: 0 !important;
    }

    .page-hero__lead,
    .page-hero__content > p {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    .page-hero__visual {
        margin-top: 0 !important;
    }

    .finder-hero-refresh {
        padding: 24px 0 34px !important;
    }

    .finder-hero-refresh__inner {
        width: min(100% - 30px, 1120px) !important;
        gap: 18px !important;
    }

    .finder-hero-refresh h1 {
        font-size: clamp(28px, 8.6vw, 38px) !important;
        line-height: 1.24 !important;
    }

    .finder-hero-refresh__copy > p {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    .finder-hero-refresh__actions {
        margin-top: 16px !important;
    }
}

/* Compatibility nav page */
.compatibility-page--nav {
    background:
        radial-gradient(circle at 12% 4%, rgba(126, 218, 215, 0.24), transparent 22rem),
        linear-gradient(180deg, #ffffff 0%, var(--oc-primary-50, #f0fbfa) 48%, #ffffff 100%);
}

.compat-nav-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
    gap: clamp(26px, 5vw, 64px);
    align-items: center;
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
    padding: clamp(34px, 6vw, 76px) 0 clamp(34px, 6vw, 64px);
}

.compat-nav-hero__copy {
    display: grid;
    gap: 18px;
}

.compat-nav-hero h1 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(36px, 5.2vw, 68px);
    line-height: 1.14;
    letter-spacing: 0;
}

.compat-nav-hero__copy > p:not(.eyebrow) {
    max-width: 680px;
    margin: 0;
    color: var(--oc-text, #1f2933);
    font-size: clamp(14px, 1.35vw, 16px);
    line-height: 1.9;
}

.compat-nav-hero__actions,
.compat-nav-notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.compat-nav-hero__media {
    position: relative;
    margin: 0;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(16, 32, 34, 0.12);
}

.compat-nav-hero__media::before {
    content: "";
    position: absolute;
    inset: auto -18% -32% 16%;
    height: 58%;
    border-radius: 999px;
    background: rgba(23, 156, 153, 0.15);
    transform: rotate(-8deg);
    pointer-events: none;
}

.compat-nav-hero__media img {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

.compat-nav-section {
    padding: clamp(38px, 7vw, 76px) 0;
}

.compat-nav-section--soft {
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 209, 102, 0.16), transparent 20rem),
        var(--oc-primary-50, #f0fbfa);
}

.compat-nav-section--notice {
    padding-bottom: clamp(54px, 8vw, 90px);
}

.compat-nav-section__inner {
    width: min(100% - 48px, 1120px);
    margin: 0 auto;
}

.compat-nav-overview,
.compat-nav-maker-layout,
.compat-nav-notice {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: clamp(22px, 4vw, 48px);
    align-items: center;
}

.compat-nav-section__copy,
.compat-nav-section__heading {
    display: grid;
    gap: 14px;
}

.compat-nav-section h2 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(25px, 3.2vw, 42px);
    line-height: 1.28;
    letter-spacing: 0;
}

.compat-nav-section__copy p,
.compat-nav-section__heading p,
.compat-nav-notice p {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 14px;
    line-height: 1.9;
}

.compat-nav-checklist {
    display: grid;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.compat-nav-checklist li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid var(--oc-line, #dcedea);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--oc-text, #1f2933);
    font-size: 13.5px;
    line-height: 1.65;
    box-shadow: 0 10px 26px rgba(16, 32, 34, 0.05);
}

.compat-nav-checklist span {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--oc-primary, #179c99);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.compat-nav-sample {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.92);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.09);
}

.compat-nav-sample img {
    display: block;
    width: 100%;
    height: auto;
}

.compat-nav-sample figcaption {
    margin: 0;
    padding: 14px 18px 18px;
    color: var(--oc-muted, #667085);
    font-size: 12.5px;
    line-height: 1.7;
}

.compat-nav-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.compat-nav-type,
.compat-nav-maker-panels article {
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.compat-nav-type {
    padding: 22px;
}

.compat-nav-type > span {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 15px;
    background: var(--oc-primary-100, #dff7f5);
    color: var(--oc-primary-800, #0b5f5c);
    font-size: 13px;
    font-weight: 900;
}

.compat-nav-type h3,
.compat-nav-maker-panels h3 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: 18px;
    line-height: 1.45;
}

.compat-nav-type p,
.compat-nav-type small {
    margin: 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    line-height: 1.8;
}

.compat-nav-type small {
    color: var(--oc-primary-800, #0b5f5c);
    font-weight: 750;
}

.compat-nav-maker-panels {
    display: grid;
    gap: 16px;
}

.compat-nav-maker-panels article {
    padding: 20px;
}

.compat-nav-maker-panels article > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compat-nav-maker-panels span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 999px;
    background: var(--oc-primary-50, #f0fbfa);
    color: var(--oc-primary-800, #0b5f5c);
    font-size: 12.5px;
    font-weight: 850;
    padding: 8px 12px;
}

.compat-nav-notice {
    align-items: start;
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 122, 89, 0.12), transparent 17rem),
        linear-gradient(135deg, #ffffff 0%, var(--oc-primary-50, #f0fbfa) 100%);
    box-shadow: 0 20px 48px rgba(16, 32, 34, 0.08);
}

.compat-nav-notice__actions {
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .compat-nav-hero,
    .compat-nav-overview,
    .compat-nav-maker-layout,
    .compat-nav-notice {
        grid-template-columns: 1fr;
    }

    .compat-nav-type-grid {
        grid-template-columns: 1fr;
    }

    .compat-nav-notice__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .compat-nav-hero,
    .compat-nav-section__inner {
        width: min(100% - 30px, 1120px);
    }

    .compat-nav-hero {
        padding-top: 24px;
        gap: 20px;
    }

    .compat-nav-hero h1 {
        font-size: clamp(29px, 8.7vw, 40px);
        line-height: 1.22;
    }

    .compat-nav-hero__copy > p:not(.eyebrow),
    .compat-nav-section__copy p,
    .compat-nav-section__heading p,
    .compat-nav-notice p {
        font-size: 13px;
        line-height: 1.75;
    }

    .compat-nav-hero__actions .button,
    .compat-nav-notice__actions,
    .compat-nav-notice__actions .button {
        width: 100%;
    }

    .compat-nav-hero__media {
        min-height: 245px;
        border-radius: 24px;
    }

    .compat-nav-hero__media img {
        min-height: 245px;
    }

    .compat-nav-section {
        padding: 34px 0;
    }

    .compat-nav-section h2 {
        font-size: clamp(23px, 7vw, 32px);
    }

    .compat-nav-type,
    .compat-nav-maker-panels article,
    .compat-nav-notice {
        border-radius: 22px;
        padding: 18px;
    }
}

/* Production readability polish */
@supports (text-wrap: pretty) {
    h1,
    h2,
    h3,
    .page-hero__lead,
    .section__lead,
    .product-hero__lead {
        text-wrap: pretty;
    }
}

body {
    line-break: strict;
}

p,
li,
dd,
figcaption,
.section__lead,
.page-hero__lead {
    overflow-wrap: anywhere;
}

@media (min-width: 761px) and (max-width: 1180px) {
    .page-hero__inner {
        gap: clamp(26px, 4vw, 44px) !important;
        padding-top: clamp(48px, 7vw, 72px) !important;
        padding-bottom: clamp(44px, 6vw, 64px) !important;
    }

    .page-hero h1,
    .page-hero__content h1 {
        font-size: clamp(34px, 4.5vw, 48px) !important;
        line-height: 1.22 !important;
        letter-spacing: 0 !important;
    }

    .page-hero__lead,
    .page-hero__content > p,
    .section__lead {
        font-size: clamp(14px, 1.55vw, 16px) !important;
        line-height: 1.82 !important;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 14px;
    }

    body:not(.home-page) .page-hero,
    body:not(.is-home-page) .page-hero {
        padding-top: 0 !important;
    }

    .page-hero__inner {
        gap: 18px !important;
        padding-top: 22px !important;
        padding-bottom: 34px !important;
    }

    .page-hero h1,
    .page-hero__content h1,
    .product-hero h1,
    .finder-hero-refresh h1,
    .compat-nav-hero h1 {
        font-size: clamp(27px, 8vw, 36px) !important;
        line-height: 1.24 !important;
        letter-spacing: 0 !important;
    }

    .page-hero__lead,
    .page-hero__content > p,
    .product-hero__lead,
    .finder-hero-refresh__copy > p,
    .compat-nav-hero__copy > p:not(.eyebrow),
    .section__lead,
    .section__header p {
        font-size: 13px !important;
        line-height: 1.78 !important;
    }

    .section,
    .product-section,
    .stores-section,
    .compat-nav-section {
        padding-block: clamp(32px, 9vw, 46px) !important;
    }

    .section__header h2,
    .section h2,
    .product-section h2,
    .compat-nav-section h2 {
        font-size: clamp(22px, 6.7vw, 30px) !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
    }

    .button,
    .text-link,
    .stores-filter-button,
    .filter-chip {
        min-height: 42px;
    }

    .card,
    .product-card,
    .support-article-card,
    .manual-card,
    .news-card,
    .store-card {
        border-radius: 20px !important;
    }
}

/* Final mobile fixed CTA: prioritize compatibility search for mobile visitors. */
@media (max-width: 1040px) {
    .mobile-fixed-cta {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 80 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        border-top: 1px solid rgba(189, 237, 234, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)) !important;
        box-shadow: 0 -14px 34px rgba(16, 32, 34, 0.12) !important;
        backdrop-filter: blur(14px);
    }

    .mobile-fixed-cta__item,
    .mobile-fixed-cta a {
        display: flex !important;
        min-width: 0 !important;
        min-height: 50px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
        border-radius: 18px !important;
        background: #FFFFFF !important;
        color: var(--oc-primary-900, #063F3E) !important;
        box-shadow: 0 10px 22px rgba(16, 32, 34, 0.07) !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    .mobile-fixed-cta__item--primary,
    .mobile-fixed-cta a.mobile-fixed-cta__item--primary {
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C)) !important;
        color: #FFFFFF !important;
        box-shadow: 0 14px 30px rgba(23, 156, 153, 0.22) !important;
    }

    .mobile-fixed-cta__label {
        display: block !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    .mobile-fixed-cta__note {
        display: block !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        opacity: 0.78 !important;
        white-space: nowrap !important;
    }

    .mobile-fixed-cta a:focus-visible {
        outline: 3px solid rgba(23, 156, 153, 0.34) !important;
        outline-offset: 2px !important;
    }
}

@media (max-width: 420px) {
    .mobile-fixed-cta {
        gap: 5px !important;
        padding-inline: max(7px, env(safe-area-inset-left)) max(7px, env(safe-area-inset-right)) !important;
    }

    .mobile-fixed-cta__item,
    .mobile-fixed-cta a {
        min-height: 46px !important;
        border-radius: 15px !important;
    }

    .mobile-fixed-cta__label {
        font-size: 12px !important;
    }

    .mobile-fixed-cta__note {
        font-size: 9px !important;
    }
}

@media (min-width: 1041px) {
    .mobile-fixed-cta {
        display: none !important;
    }
}

/* Mobile hamburger drawer override.
   This stays at the end so legacy mobile menu rules cannot recreate a full-width top bar. */
@media (max-width: 1040px) {
    .mobile-nav {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 140 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .mobile-nav__drawer,
    .mobile-nav details {
        position: relative !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 1px solid rgba(189, 237, 234, 0.95) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 12px 28px rgba(16, 32, 34, 0.12) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        cursor: pointer !important;
        list-style: none !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        backdrop-filter: blur(14px);
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease !important;
    }

    .mobile-nav__trigger::-webkit-details-marker,
    .mobile-nav summary::-webkit-details-marker,
    .mobile-nav__trigger::after,
    .mobile-nav summary::after {
        display: none !important;
        content: none !important;
    }

    .mobile-nav__trigger-icon {
        display: grid !important;
        width: 18px !important;
        gap: 4px !important;
    }

    .mobile-nav__trigger-icon span {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transform-origin: center !important;
        transition: transform 180ms ease, opacity 180ms ease !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger,
    .mobile-nav__trigger:hover,
    .mobile-nav__trigger:focus-visible {
        border-color: var(--oc-primary-300, #7EDAD7) !important;
        background: var(--oc-primary-50, #F0FBFA) !important;
        box-shadow: 0 16px 34px rgba(23, 156, 153, 0.18) !important;
        transform: translateY(-1px) !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__trigger-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-nav__trigger:focus-visible {
        outline: 3px solid rgba(23, 156, 153, 0.28) !important;
        outline-offset: 3px !important;
    }

    .mobile-nav__panel {
        position: fixed !important;
        top: calc(62px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        display: grid !important;
        width: min(360px, calc(100vw - 20px)) !important;
        max-height: min(74dvh, 640px) !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
        border: 1px solid rgba(189, 237, 234, 0.95) !important;
        border-radius: 24px !important;
        background: radial-gradient(circle at 12% 0%, rgba(223, 247, 245, 0.92), transparent 14rem), #FFFFFF !important;
        box-shadow: 0 24px 64px rgba(16, 32, 34, 0.18) !important;
        padding: 14px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-8px) scale(0.98) !important;
        transform-origin: top right !important;
        visibility: hidden !important;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
    }

    .mobile-nav__drawer[open] .mobile-nav__panel {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
        visibility: visible !important;
    }

    .mobile-nav__panel-head {
        display: grid !important;
        gap: 3px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid var(--oc-line, #DCEDEA) !important;
        padding: 3px 4px 12px !important;
    }

    .mobile-nav__panel-head strong {
        color: var(--oc-ink, #102022) !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1.35 !important;
    }

    .mobile-nav__panel-head span {
        color: var(--oc-muted, #667085) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.55 !important;
    }

    .mobile-nav nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .mobile-nav__group {
        margin: 12px 4px 2px !important;
        border: 0 !important;
        color: var(--oc-primary-800, #0B5F5C) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.35 !important;
    }

    .mobile-nav a,
    .mobile-nav a.mobile-nav__store {
        display: flex !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: space-between !important;
        border: 1px solid var(--oc-line, #DCEDEA) !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: none !important;
        color: var(--oc-text, #1F2933) !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.45 !important;
        text-decoration: none !important;
        transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease !important;
    }

    .mobile-nav a::after {
        content: "" !important;
        width: 7px !important;
        height: 7px !important;
        flex: 0 0 auto !important;
        margin-left: 10px !important;
        border-right: 2px solid var(--oc-primary, #179C99) !important;
        border-bottom: 2px solid var(--oc-primary, #179C99) !important;
        transform: rotate(-45deg) !important;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible,
    .mobile-nav a.mobile-nav__store:hover,
    .mobile-nav a.mobile-nav__store:focus-visible {
        border-color: var(--oc-primary-300, #7EDAD7) !important;
        background: var(--oc-primary-50, #F0FBFA) !important;
        color: var(--oc-primary-900, #063F3E) !important;
        transform: translateY(-1px) !important;
    }

    .mobile-nav a.mobile-nav__store {
        margin-top: 8px !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--oc-primary, #179C99), var(--oc-primary-800, #0B5F5C)) !important;
        color: #FFFFFF !important;
    }

    .mobile-nav a.mobile-nav__store::after {
        border-color: #FFFFFF !important;
    }
}

@media (max-width: 420px) {
    .mobile-nav {
        top: calc(9px + env(safe-area-inset-top)) !important;
        right: max(9px, env(safe-area-inset-right)) !important;
    }

    .mobile-nav__trigger,
    .mobile-nav summary {
        min-height: 42px !important;
        padding-inline: 12px !important;
    }

    .mobile-nav__trigger-text {
        font-size: 11px !important;
    }

    .mobile-nav__panel {
        top: calc(57px + env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        width: min(342px, calc(100vw - 16px)) !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }
}

@media (min-width: 1041px) {
    .mobile-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav__trigger,
    .mobile-nav__trigger-icon span,
    .mobile-nav__panel,
    .mobile-nav a {
        transition: none !important;
    }
}

/* Compatibility index final override */
.compatibility-page .compatibility-search-section .section__inner,
.compatibility-page .compatibility-maker-section .section__inner {
    max-width: 1120px;
}

.compatibility-page .compat-search {
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 28px;
    background: #FFFFFF;
    padding: clamp(18px, 3vw, 28px);
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.08);
}

.compatibility-page .compat-search__header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(220, 237, 234, 0.95);
    padding-bottom: 18px;
}

.compatibility-page .compat-search__grid--guided {
    grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.2fr) minmax(160px, 0.7fr);
}

.compatibility-page .compat-search__grid--nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.compatibility-page .compat-search__inline-note {
    margin: 0;
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: #F7FBFA;
    color: #4A5568;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.7;
}

.compatibility-page .compat-search__actions {
    align-items: center;
    border-top: 1px solid rgba(220, 237, 234, 0.95);
    padding-top: 18px;
}

.compatibility-page .compatibility-inline-results {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 22px;
    scroll-margin-top: 90px;
}

.compatibility-page .compatibility-inline-results.is-loading {
    opacity: 0.58;
    pointer-events: none;
}

.compatibility-page .compatibility-inline-results.is-loading::after {
    content: "検索結果を更新しています";
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(16, 32, 34, 0.08);
}

.compatibility-page .compatibility-inline-placeholder {
    display: grid;
    gap: 8px;
    border: 1px dashed #BDEDEA;
    border-radius: 24px;
    background: linear-gradient(135deg, #F7FBFA, #FFFFFF);
    padding: 22px;
}

.compatibility-page .compatibility-inline-placeholder span {
    width: fit-content;
    border-radius: 999px;
    background: #E9F8F7;
    color: #0B5F5C;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .compatibility-inline-placeholder strong {
    color: #102022;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.45;
}

.compatibility-page .compatibility-inline-placeholder p {
    max-width: 680px;
    margin: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.75;
}

.compatibility-page .compatibility-maker-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.compatibility-page .compatibility-maker-card {
    overflow: hidden;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.075);
}

.compatibility-page .compatibility-maker-card summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, #F0FBFA, #FFFFFF);
    padding: 18px 20px;
}

.compatibility-page .compatibility-maker-card summary::-webkit-details-marker {
    display: none;
}

.compatibility-page .compatibility-maker-card summary:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.28);
    outline-offset: -3px;
}

.compatibility-page .compatibility-maker-card summary > div {
    min-width: 0;
}

.compatibility-page .compatibility-maker-card summary span {
    display: block;
    margin-bottom: 4px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .compatibility-maker-card summary h3 {
    margin: 0;
    color: #102022;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.compatibility-page .compatibility-maker-card summary small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.compatibility-page .compatibility-maker-card summary b {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #179C99;
    box-shadow: 0 8px 18px rgba(16, 32, 34, 0.06);
}

.compatibility-page .compatibility-maker-card summary b::before {
    content: "+";
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.compatibility-page .compatibility-maker-card[open] summary b::before {
    content: "-";
}

.compatibility-page .compatibility-maker-card__body {
    display: grid;
    gap: 8px;
    max-height: 430px;
    overflow: auto;
    border-top: 1px solid #DCEDEA;
    padding: 12px;
}

.compatibility-page .compatibility-fitment-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 58px;
    border: 1px solid #DCEDEA;
    border-radius: 16px;
    background: #FFFFFF;
    color: #102022;
    padding: 10px 12px;
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.compatibility-page .compatibility-fitment-row:hover {
    border-color: #179C99;
    background: #F7FBFA;
    transform: translateY(-1px);
}

.compatibility-page .compatibility-fitment-row__mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #F2F5F5;
    color: #667085;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.compatibility-page .compatibility-fitment-row--ok .compatibility-fitment-row__mark {
    background: #E9F8F7;
    color: #0B7F7C;
}

.compatibility-page .compatibility-fitment-row--conditional .compatibility-fitment-row__mark {
    background: #FFF5E1;
    color: #A86500;
}

.compatibility-page .compatibility-fitment-row--ng .compatibility-fitment-row__mark {
    background: #FFF0EA;
    color: #B93815;
}

.compatibility-page .compatibility-fitment-row strong,
.compatibility-page .compatibility-fitment-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.compatibility-page .compatibility-fitment-row strong {
    color: #102022;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .compatibility-fitment-row small {
    margin-top: 3px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.compatibility-page .compatibility-maker-card__empty {
    border: 1px dashed #BDEDEA;
    border-radius: 16px;
    background: #F7FBFA;
    color: #667085;
    padding: 14px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .compatibility-page .compat-search__header {
        display: grid;
    }

    .compatibility-page .compat-search__grid--guided,
    .compatibility-page .compat-search__grid--nav,
    .compatibility-page .compatibility-maker-board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .compat-search,
    .compatibility-page .compatibility-maker-card,
    .compatibility-page .compatibility-inline-placeholder {
        border-radius: 20px;
    }

    .compatibility-page .compat-search__steps {
        gap: 0;
    }

    .compatibility-page .compat-search__actions .button {
        width: 100%;
    }

    .compatibility-page .compatibility-maker-card summary {
        padding: 16px;
    }

    .compatibility-page .compatibility-maker-card__body {
        max-height: 360px;
    }

    .compatibility-page .compatibility-fitment-row {
        grid-template-columns: 34px minmax(0, 1fr);
        border-radius: 14px;
        padding: 9px 10px;
    }

    .compatibility-page .compatibility-fitment-row__mark {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .compatibility-page .compatibility-inline-results.is-loading::after {
        position: static;
        width: fit-content;
        margin: 0 0 10px;
    }
}

/* Compatibility result page final override */
/* Vehicle fitment card guarantee: applies to new cards and cached table markup. */
.compatibility-page .fitment-status-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 24px 18px;
    border: 1px solid #BDEDEA;
    border-radius: 20px;
    background: #FFFFFF;
    padding: 14px 16px;
    box-shadow: 0 10px 28px rgba(16, 32, 34, 0.06);
}

.compatibility-page .fitment-status-guide span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    border: 1px solid #DCEDEA;
    border-radius: 999px;
    background: #F7FBFA;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
}

.compatibility-page .fitment-status-guide b {
    display: inline-grid;
    min-width: 36px;
    min-height: 22px;
    place-items: center;
    border-radius: 999px;
    background: #179C99;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .vehicle-fitment-year-cards {
    display: grid;
    gap: 16px;
    margin: 0 24px 24px;
}

.compatibility-page .vehicle-fitment-year-card,
.compatibility-page .fitment-year-matrix tr {
    overflow: hidden;
    border: 1px solid #DCEDEA;
    border-left: 6px solid #667085;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(16, 32, 34, 0.08);
}

.compatibility-page .vehicle-fitment-year-card--ok,
.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--ok) {
    border-left-color: #179C99;
}

.compatibility-page .vehicle-fitment-year-card--conditional,
.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--conditional) {
    border-left-color: #C47A00;
}

.compatibility-page .vehicle-fitment-year-card--ng,
.compatibility-page .fitment-year-matrix tr:has(.fitment-badge--ng) {
    border-left-color: #B93815;
}

.compatibility-page .vehicle-fitment-year-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 0;
    background: linear-gradient(135deg, #F0FBFA, #FFFFFF);
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.compatibility-page .vehicle-fitment-year-card__head::-webkit-details-marker {
    display: none;
}

.compatibility-page .vehicle-fitment-year-card__head:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.28);
    outline-offset: -3px;
}

.compatibility-page .vehicle-fitment-year-card[open] .vehicle-fitment-year-card__head {
    border-bottom: 1px solid #DCEDEA;
}

.compatibility-page .vehicle-fitment-year-card__head > div:first-child {
    min-width: 0;
}

.compatibility-page .vehicle-fitment-year-card__head > div:first-child > span {
    display: block;
    margin-bottom: 4px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .vehicle-fitment-year-card__head > div:first-child > h4 {
    margin: 0;
    color: #102022;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-year-card__head > div:first-child > small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.compatibility-page .vehicle-fitment-year-card__toggle {
    display: inline-flex;
    min-width: 92px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(16, 32, 34, 0.06);
}

.compatibility-page .vehicle-fitment-year-card__toggle::before {
    content: "詳細";
}

.compatibility-page .vehicle-fitment-year-card__toggle::after {
    content: "+";
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    background: #179C99;
    color: #FFFFFF;
    font-size: 13px;
    line-height: 1;
}

.compatibility-page .vehicle-fitment-year-card[open] .vehicle-fitment-year-card__toggle::before {
    content: "閉じる";
}

.compatibility-page .vehicle-fitment-year-card[open] .vehicle-fitment-year-card__toggle::after {
    content: "-";
}

.compatibility-page .vehicle-fitment-year-card__body {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: #FFFFFF;
}

.compatibility-page .vehicle-fitment-condition-panel,
.compatibility-page .vehicle-fitment-products-panel {
    display: grid;
    gap: 12px;
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: #FFFFFF;
    padding: 14px;
}

.compatibility-page .vehicle-fitment-condition-panel {
    background: #F7FBFA;
}

.compatibility-page .vehicle-fitment-condition-panel__title,
.compatibility-page .vehicle-fitment-products-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.compatibility-page .vehicle-fitment-condition-panel__title span,
.compatibility-page .vehicle-fitment-products-panel__head span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: #E9F8F7;
    color: #0B5F5C;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .vehicle-fitment-condition-panel__title strong,
.compatibility-page .vehicle-fitment-products-panel__head strong {
    color: #102022;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-year-card__meta,
.compatibility-page .vehicle-fitment-products-grid {
    display: grid;
    gap: 10px;
}

.compatibility-page .vehicle-fitment-year-card__meta {
    grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(220px, 1.4fr);
    margin: 0;
}

.compatibility-page .vehicle-fitment-year-card__meta div,
.compatibility-page .vehicle-fitment-product-card,
.compatibility-page .fitment-product-pill {
    border: 1px solid #DCEDEA;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(247, 251, 250, 0.9) 100%);
    padding: 14px;
}

.compatibility-page .vehicle-fitment-year-card__meta dt {
    margin-bottom: 5px;
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .vehicle-fitment-year-card__meta dd {
    margin: 0;
    color: #1F2933;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.compatibility-page .vehicle-fitment-products-grid,
.compatibility-page .fitment-product-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
}

.compatibility-page .vehicle-fitment-product-card {
    display: grid;
    gap: 12px;
    align-content: start;
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.045);
}

.compatibility-page .vehicle-fitment-product-card--ok {
    border-color: rgba(23, 156, 153, 0.45);
}

.compatibility-page .vehicle-fitment-product-card--conditional {
    border-color: rgba(196, 122, 0, 0.38);
}

.compatibility-page .vehicle-fitment-product-card--unknown {
    border-color: rgba(102, 112, 133, 0.34);
}

.compatibility-page .vehicle-fitment-product-card--ng {
    border-color: rgba(185, 56, 21, 0.34);
    background: #FFF8F6;
}

.compatibility-page .vehicle-fitment-product-card__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.compatibility-page .vehicle-fitment-product-card__top span,
.compatibility-page .vehicle-fitment-product-card--empty span {
    display: block;
    margin-bottom: 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .vehicle-fitment-product-card h5 {
    margin: 0;
    color: #102022;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .vehicle-fitment-product-card p {
    margin: 0;
    color: #4A5568;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.compatibility-page .vehicle-fitment-product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compatibility-page .vehicle-fitment-product-card__actions a,
.compatibility-page .vehicle-fitment-product-card--empty a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #BDEDEA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B5F5C;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.compatibility-page .vehicle-fitment-product-card__actions a:last-child {
    border-color: #179C99;
    background: #179C99;
    color: #FFFFFF;
}

.compatibility-page .vehicle-fitment-product-card--empty {
    justify-items: start;
}

.compatibility-page .vehicle-fitment-product-card--empty strong {
    color: #102022;
    font-size: 15px;
    font-weight: 900;
}

.compatibility-page .vehicle-fitment-grade-matrix-empty {
    display: grid;
    gap: 5px;
    border: 1px solid #DCEDEA;
    border-radius: 14px;
    background: #F7FBFA;
    padding: 14px;
}

.compatibility-page .vehicle-fitment-grade-matrix-empty strong {
    color: #102022;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.5;
}

.compatibility-page .vehicle-fitment-grade-matrix-empty span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.compatibility-page .vehicle-fitment-products-detail--ng > summary {
    border-color: rgba(185, 56, 21, 0.26);
    background: #FFF8F6;
    color: #8A2D16;
}

.compatibility-page .vehicle-fitment-products-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.compatibility-page .fitment-year-matrix {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.compatibility-page .fitment-year-matrix table,
.compatibility-page .fitment-year-matrix thead,
.compatibility-page .fitment-year-matrix tbody,
.compatibility-page .fitment-year-matrix tr,
.compatibility-page .fitment-year-matrix th,
.compatibility-page .fitment-year-matrix td {
    display: block;
    width: 100%;
    min-width: 0;
}

.compatibility-page .fitment-year-matrix thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.compatibility-page .fitment-year-matrix tbody {
    display: grid;
    gap: 16px;
}

.compatibility-page .fitment-year-matrix td {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid #DCEDEA;
    padding: 14px 16px;
    color: #1F2933;
    font-size: 13px;
    line-height: 1.65;
}

.compatibility-page .fitment-year-matrix td::before {
    content: attr(data-label);
    color: #0B5F5C;
    font-size: 11px;
    font-weight: 900;
}

.compatibility-page .fitment-year-matrix td:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #F0FBFA, #FFFFFF);
}

.compatibility-page .fitment-year-matrix td:first-child::before {
    content: "年式";
}

.compatibility-page .fitment-year-matrix td:last-child {
    display: block;
    border-bottom: 0;
}

.compatibility-page .fitment-year-matrix td:last-child::before {
    display: block;
    margin-bottom: 12px;
}

@media (max-width: 900px) {
    .compatibility-page .vehicle-fitment-year-card__meta,
    .compatibility-page .vehicle-fitment-products-grid,
    .compatibility-page .fitment-product-pills {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-inline: 16px;
    }

    .compatibility-page .vehicle-fitment-year-card__head {
        flex-direction: column;
        padding: 16px;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        width: 100%;
        justify-content: space-between;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle {
        min-width: 82px;
        min-height: 34px;
    }

    .compatibility-page .vehicle-fitment-year-card__body {
        padding: 12px;
    }

    .compatibility-page .vehicle-fitment-condition-panel,
    .compatibility-page .vehicle-fitment-products-panel,
    .compatibility-page .vehicle-fitment-year-card__meta div,
    .compatibility-page .vehicle-fitment-product-card {
        border-radius: 14px;
    }

    .compatibility-page .vehicle-fitment-product-card__top {
        grid-template-columns: 1fr;
    }

    .compatibility-page .vehicle-fitment-product-card__actions a,
    .compatibility-page .vehicle-fitment-product-card--empty a {
        flex: 1 1 120px;
    }

    .compatibility-page .fitment-year-matrix td {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

.compatibility-page .fitment-results--simple {
    max-width: 1120px;
    margin-inline: auto;
    gap: 18px;
}

.compatibility-page .fitment-results--simple .fitment-results__header {
    align-items: flex-end;
    border: 1px solid rgba(220, 237, 234, 0.9);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(240, 251, 250, 0.96), rgba(255, 255, 255, 0.96));
    padding: 18px 20px;
}

.compatibility-page .fitment-results--simple .fitment-results__header h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: 0;
}

.compatibility-page .fitment-simple-card {
    border-radius: 28px;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.09);
}

.compatibility-page .fitment-simple-card__header {
    align-items: flex-start;
    padding: 22px 24px;
}

.compatibility-page .fitment-simple-card__header h3 {
    overflow-wrap: anywhere;
    font-size: clamp(20px, 2.1vw, 28px);
}

.compatibility-page .fitment-simple-sections {
    gap: 0;
}

.compatibility-page .fitment-simple-section {
    gap: 16px;
    padding: 18px 22px 20px;
}

.compatibility-page .fitment-simple-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--oc-primary-50, #F0FBFA), #FFFFFF);
    padding: 14px 16px;
}

.compatibility-page .fitment-simple-section__head span {
    display: block;
    margin-bottom: 4px;
    color: var(--oc-primary-800, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .fitment-simple-section__head h4 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .fitment-simple-section__head h4 small {
    display: inline-block;
    margin-left: 8px;
    color: var(--oc-muted, #667085);
    font-size: 0.75em;
    font-weight: 800;
}

.compatibility-page .fitment-simple-section__meta {
    grid-template-columns: minmax(160px, 0.95fr) minmax(150px, 0.75fr) minmax(240px, 1.3fr);
}

.compatibility-page .fitment-simple-section__meta strong {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.compatibility-page .fitment-product-lines {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.compatibility-page .fitment-product-line {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    border-color: rgba(189, 237, 234, 0.95);
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.045);
}

.compatibility-page .fitment-product-line p,
.compatibility-page .fitment-product-line__actions {
    grid-column: 1 / -1;
}

.compatibility-page .fitment-product-line__actions {
    justify-content: flex-start;
}

.compatibility-page .fitment-product-line__actions a {
    min-height: 34px;
    padding: 8px 12px;
}

@media (max-width: 900px) {
    .compatibility-page .fitment-results--simple .fitment-results__header {
        align-items: flex-start;
        padding: 16px;
    }

    .compatibility-page .fitment-simple-section__head {
        flex-direction: column;
    }

    .compatibility-page .fitment-simple-section__meta,
    .compatibility-page .fitment-product-lines,
    .compatibility-page .fitment-product-line {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compatibility-page .fitment-results--simple {
        gap: 14px;
    }

    .compatibility-page .fitment-results--simple .fitment-results__header,
    .compatibility-page .fitment-simple-card {
        border-radius: 20px;
    }

    .compatibility-page .fitment-simple-card__header,
    .compatibility-page .fitment-simple-section {
        padding: 16px;
    }

    .compatibility-page .fitment-product-line__actions a {
        flex: 1 1 132px;
    }
}

/* Compatibility index detail refinement: final cascade */
.compatibility-page .compat-search__flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    list-style: none !important;
}

.compatibility-page .compat-search__flow li {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    align-items: center !important;
    min-height: 72px !important;
    border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #F7FBFA, #FFFFFF) !important;
    padding: 12px !important;
}

.compatibility-page .compat-search__flow li > span {
    display: grid !important;
    grid-row: 1 / span 2 !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--oc-primary, #179C99) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .compat-search__flow strong,
.compatibility-page .compat-search__flow small {
    display: block !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.compatibility-page .compat-search__flow strong {
    color: var(--oc-ink, #102022) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.compatibility-page .compat-search__flow small {
    color: var(--oc-muted, #667085) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

.compatibility-page .compat-search__grid--nav {
    grid-template-columns: minmax(180px, 0.95fr) minmax(240px, 1.35fr) minmax(160px, 0.75fr) !important;
}

.compatibility-page .compat-search__manual-field {
    grid-column: 1 / -1 !important;
    background: #F7FBFA !important;
}

.compatibility-page .compatibility-manufacturer-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.compatibility-page .compatibility-manufacturer-link-card {
    display: flex;
    min-height: 154px;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(189, 237, 234, 0.95);
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--oc-ink, #102022);
    padding: 18px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.065);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.compatibility-page .compatibility-manufacturer-link-card:hover,
.compatibility-page .compatibility-manufacturer-link-card:focus-visible {
    border-color: var(--oc-primary, #179C99);
    box-shadow: 0 18px 42px rgba(16, 32, 34, 0.1);
    transform: translateY(-2px);
}

.compatibility-page .compatibility-manufacturer-link-card:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.26);
    outline-offset: 3px;
}

.compatibility-page .compatibility-manufacturer-link-card span {
    display: block;
    color: var(--oc-primary-700, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.compatibility-page .compatibility-manufacturer-link-card h3 {
    margin: 5px 0 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.compatibility-page .compatibility-manufacturer-link-card small {
    display: block;
    margin-top: 7px;
    color: var(--oc-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.compatibility-page .compatibility-manufacturer-link-card > strong {
    display: inline-flex;
    width: fit-content;
    min-height: 36px;
    align-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #F7FBFA;
    color: var(--oc-primary-700, #0B5F5C);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .compatibility-maker-board {
    align-items: start !important;
}

.compatibility-page .compatibility-maker-board--nav .compatibility-maker-card {
    height: fit-content !important;
}

.compatibility-page .compatibility-maker-board--nav .compatibility-maker-card__body {
    max-height: 340px;
}

.compatibility-page .compatibility-bottom-phone-cta {
    margin-bottom: 22px;
}

.compatibility-page .compatibility-bottom-phone-cta .phone-cta {
    margin: 0;
}

@media (max-width: 980px) {
    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compatibility-page .compat-search__grid--nav {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .compatibility-page .compat-search__flow {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__flow li {
        min-height: 62px !important;
        border-radius: 16px !important;
        padding: 10px !important;
    }

    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: 1fr;
    }

    .compatibility-page .compatibility-manufacturer-link-card {
        min-height: 132px;
        border-radius: 20px;
        padding: 16px;
    }
}

/* Compatibility page final UX pass. This must remain at EOF. */
.compatibility-page .compat-hero__inner {
    width: min(1180px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr) !important;
    gap: clamp(24px, 5vw, 58px) !important;
    padding: clamp(44px, 6vw, 74px) 0 24px !important;
}

.compatibility-page .compat-hero__copy h1 {
    max-width: 12.5em !important;
    font-size: clamp(34px, 5.2vw, 62px) !important;
    line-height: 1.12 !important;
}

.compatibility-page .compat-hero__image-card {
    width: min(100%, 440px) !important;
    border-radius: 28px !important;
}

.compatibility-page .compat-hero__image-card img {
    height: clamp(240px, 30vw, 350px) !important;
}

.compatibility-page .compat-hero__quick,
.compatibility-page .compatibility-search-section .section__inner,
.compatibility-page .compatibility-maker-section .section__inner {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
}

.compatibility-page .compat-hero__quick {
    gap: 10px !important;
    padding-bottom: clamp(30px, 4vw, 48px) !important;
}

.compatibility-page .compat-hero__quick a {
    min-height: 92px !important;
    border-radius: 20px !important;
    padding: 15px 18px !important;
}

.compatibility-page .compatibility-search-section--primary {
    padding-top: clamp(28px, 5vw, 54px) !important;
}

.compatibility-page .compatibility-workbench {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.12fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.compatibility-page .compatibility-workbench__form {
    position: sticky !important;
    top: 86px !important;
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-search {
    display: grid !important;
    gap: 18px !important;
    border-radius: 24px !important;
    padding: clamp(18px, 2.5vw, 24px) !important;
}

.compatibility-page .compat-search__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.compatibility-page .compat-search__flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.compatibility-page .compat-search__flow li {
    min-height: 64px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    border-radius: 16px !important;
    padding: 10px !important;
}

.compatibility-page .compat-search__flow li > span {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
}

.compatibility-page .compat-search__grid--guided,
.compatibility-page .compat-search__grid--nav {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.compatibility-page .compat-search__selection {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.compatibility-page .compat-search__selection div,
.compatibility-page .compatibility-result-preview div {
    min-width: 0 !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 15px !important;
    background: #F7FBFA !important;
    padding: 10px 12px !important;
}

.compatibility-page .compat-search__selection span,
.compatibility-page .compatibility-result-preview small {
    display: block !important;
    margin-bottom: 3px !important;
    color: #0B5F5C !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search__selection strong,
.compatibility-page .compatibility-result-preview b {
    display: block !important;
    overflow-wrap: anywhere !important;
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-search__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.compatibility-page .compatibility-inline-results {
    min-width: 0 !important;
    margin-top: 0 !important;
    scroll-margin-top: 92px !important;
}

.compatibility-page .compatibility-workbench .fitment-results--simple {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

.compatibility-page .compatibility-inline-placeholder {
    min-height: 100% !important;
    border-style: solid !important;
    border-radius: 24px !important;
    padding: clamp(20px, 3vw, 28px) !important;
}

.compatibility-page .compatibility-inline-placeholder--primary {
    min-height: 430px !important;
}

.compatibility-page .compatibility-result-preview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.compatibility-page .compatibility-manufacturer-link-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.compatibility-page .compatibility-manufacturer-link-card {
    min-height: 132px !important;
    border-radius: 18px !important;
    padding: 14px !important;
}

.compatibility-page .compatibility-manufacturer-link-card__counts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.compatibility-page .compatibility-manufacturer-link-card__counts span {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 999px !important;
    background: #F7FBFA !important;
    color: #102022 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .compatibility-maker-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.compatibility-page .fitment-status-guide {
    margin: 0 18px 16px !important;
}

.compatibility-page .vehicle-fitment-year-cards {
    gap: 12px !important;
    margin: 0 18px 18px !important;
}

@media (max-width: 1080px) {
    .compatibility-page .compatibility-workbench {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compatibility-workbench__form {
        position: static !important;
    }

    .compatibility-page .compatibility-inline-placeholder--primary {
        min-height: auto !important;
    }

    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .compatibility-page .compatibility-maker-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .compatibility-page .compat-hero__inner {
        grid-template-columns: 1fr !important;
        width: min(100% - 30px, 1180px) !important;
        padding-top: 34px !important;
    }

    .compatibility-page .compat-hero__visual {
        justify-items: stretch !important;
    }

    .compatibility-page .compat-hero__image-card {
        width: 100% !important;
    }

    .compatibility-page .compat-hero__status-card {
        position: static !important;
        max-width: none !important;
    }

    .compatibility-page .compat-hero__quick,
    .compatibility-page .compatibility-search-section .section__inner,
    .compatibility-page .compatibility-maker-section .section__inner {
        width: min(100% - 30px, 1180px) !important;
    }

    .compatibility-page .compat-hero__quick,
    .compatibility-page .compat-search__flow,
    .compatibility-page .compat-search__selection,
    .compatibility-page .compatibility-result-preview,
    .compatibility-page .compatibility-manufacturer-link-grid,
    .compatibility-page .compatibility-maker-board {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__header,
    .compatibility-page .vehicle-fitment-year-card__head {
        display: grid !important;
    }

    .compatibility-page .compat-search__header .button,
    .compatibility-page .compat-search__actions .button {
        width: 100% !important;
    }

    .compatibility-page .compat-search__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}
/* Compatibility page final interaction polish. Must remain at EOF. */
.compatibility-page .compat-hero__quick a:first-child {
    border-color: rgba(23, 156, 153, 0.55) !important;
    background: linear-gradient(135deg, #E9F8F7, #FFFFFF) !important;
    box-shadow: 0 16px 38px rgba(23, 156, 153, 0.16) !important;
}

.compatibility-page .compat-search--vehicle {
    border: 2px solid rgba(23, 156, 153, 0.34) !important;
    box-shadow: 0 20px 54px rgba(16, 32, 34, 0.11) !important;
}

.compatibility-page .compat-search__required-callout {
    display: grid !important;
    gap: 4px !important;
    border: 1px solid rgba(23, 156, 153, 0.22) !important;
    border-left: 5px solid #179C99 !important;
    border-radius: 16px !important;
    background: #F0FBFA !important;
    padding: 12px 14px !important;
}

.compatibility-page .compat-search__required-callout strong,
.compatibility-page .compat-search__required-callout span {
    display: block !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.compatibility-page .compat-search__required-callout strong {
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.compatibility-page .compat-search__required-callout span {
    color: #4A5568 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.compatibility-page .form-field--priority span em {
    display: inline-flex !important;
    min-height: 20px !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: #102022 !important;
    color: #FFFFFF !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    vertical-align: 1px !important;
}

.compatibility-page .compat-search__actions--primary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(112px, auto) !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(16, 32, 34, 0.12) !important;
    border-radius: 18px !important;
    background: #102022 !important;
    padding: 12px !important;
}

.compatibility-page .compat-search__submit-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-search__submit-copy strong {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-search__submit-copy span {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.5 !important;
}

.compatibility-page .compat-search__actions--primary .button {
    min-height: 44px !important;
    white-space: nowrap !important;
}

.compatibility-page .compat-search__primary-submit {
    min-width: 150px !important;
    box-shadow: 0 12px 26px rgba(23, 156, 153, 0.24) !important;
}

.compatibility-page .compat-search__actions--primary .button--secondary {
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.compatibility-page .compat-search__actions--primary .button[disabled] {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: #DCEDEA !important;
    color: #667085 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.68 !important;
}

.compatibility-page .compat-search__error {
    margin: -4px 0 0 !important;
    border: 1px solid rgba(185, 56, 21, 0.28) !important;
    border-radius: 14px !important;
    background: #FFF8F6 !important;
    color: #8A2D16 !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
}

.compatibility-page .vehicle-fitment-year-card__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions {
    display: grid !important;
    grid-template-columns: minmax(138px, auto) 96px !important;
    align-items: center !important;
    gap: 8px !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge {
    justify-content: center !important;
    min-width: 138px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge span {
    min-width: 34px !important;
    min-height: 20px !important;
    font-size: 10px !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle {
    width: 96px !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 10px !important;
}

.compatibility-page .vehicle-fitment-product-card {
    grid-template-rows: auto minmax(48px, 1fr) auto !important;
}

.compatibility-page .vehicle-fitment-product-card__actions,
.compatibility-page .fitment-product-line__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
}

.compatibility-page .vehicle-fitment-product-card__actions a,
.compatibility-page .fitment-product-line__actions a {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    text-align: center !important;
}

.compatibility-page .fitment-product-line {
    align-content: start !important;
    min-height: 178px !important;
}

.compatibility-page .fitment-product-line p,
.compatibility-page .fitment-product-line__actions {
    grid-column: 1 / -1 !important;
}

.compatibility-page .fitment-product-line__actions {
    align-self: end !important;
    justify-content: stretch !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-search__actions--primary {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search__submit-copy {
        text-align: center !important;
    }

    .compatibility-page .compat-search__primary-submit {
        min-width: 0 !important;
    }

    .compatibility-page .vehicle-fitment-year-card__head {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: minmax(0, 1fr) 92px !important;
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions .fitment-badge {
        min-width: 0 !important;
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle {
        width: 92px !important;
    }
}

@media (max-width: 420px) {
    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle {
        width: 100% !important;
    }

    .compatibility-page .vehicle-fitment-product-card__actions,
    .compatibility-page .fitment-product-line__actions {
        grid-template-columns: 1fr !important;
    }
}
/* Compatibility result card final alignment. Must remain at EOF. */
.compatibility-page .vehicle-fitment-year-card__summary-actions {
    display: grid !important;
    grid-template-columns: 132px 104px !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.compatibility-page .vehicle-fitment-year-card__status,
.compatibility-page .vehicle-fitment-year-card__toggle {
    display: grid !important;
    min-width: 0 !important;
    min-height: 44px !important;
    align-items: center !important;
    border: 1px solid #BDEDEA !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    padding: 7px 10px !important;
}

.compatibility-page .vehicle-fitment-year-card__status {
    gap: 2px !important;
}

.compatibility-page .vehicle-fitment-year-card__status > span {
    display: block !important;
    color: #667085 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

.compatibility-page .vehicle-fitment-year-card__status > strong {
    display: block !important;
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.compatibility-page .vehicle-fitment-year-card__status--ok {
    border-color: rgba(23, 156, 153, 0.42) !important;
    background: #E9F8F7 !important;
}

.compatibility-page .vehicle-fitment-year-card__status--conditional {
    border-color: rgba(196, 122, 0, 0.34) !important;
    background: #FFF8EA !important;
}

.compatibility-page .vehicle-fitment-year-card__status--ng {
    border-color: rgba(185, 56, 21, 0.34) !important;
    background: #FFF8F6 !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle {
    grid-template-columns: minmax(0, 1fr) 20px !important;
    width: auto !important;
    justify-content: stretch !important;
    gap: 7px !important;
    color: #0B5F5C !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle::before,
.compatibility-page .vehicle-fitment-year-card__toggle::after {
    content: none !important;
    display: none !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle > span {
    display: block !important;
    color: #0B5F5C !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle > b {
    display: grid !important;
    width: 20px !important;
    height: 20px !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #179C99 !important;
    color: #FFFFFF !important;
}

.compatibility-page .vehicle-fitment-year-card__toggle > b::before {
    content: "+" !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .vehicle-fitment-year-card[open] .vehicle-fitment-year-card__toggle > b::before {
    content: "-" !important;
}

.compatibility-page .fitment-product-lines--nav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 12px !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto minmax(46px, 1fr) auto !important;
    gap: 10px 12px !important;
    min-height: 188px !important;
    align-content: stretch !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    padding: 14px !important;
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.045) !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line--ok {
    border-color: rgba(23, 156, 153, 0.42) !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line--conditional {
    border-color: rgba(196, 122, 0, 0.34) !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line--ng {
    border-color: rgba(185, 56, 21, 0.34) !important;
    background: #FFF8F6 !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line__name {
    min-width: 0 !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-badge {
    justify-self: end !important;
    align-self: start !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line p {
    grid-column: 1 / -1 !important;
    align-self: start !important;
    margin: 0 !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line__actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    align-self: end !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line__actions a {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 9px 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line__actions a:first-child {
    border: 1px solid #BDEDEA !important;
    background: #FFFFFF !important;
    color: #0B5F5C !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line__actions a:last-child {
    border: 1px solid #179C99 !important;
    background: #179C99 !important;
    color: #FFFFFF !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line--empty {
    grid-template-columns: 1fr !important;
    background: #F7FBFA !important;
}

.compatibility-page .fitment-product-lines--nav .fitment-product-line--empty .fitment-product-line__actions {
    grid-template-columns: minmax(0, 220px) !important;
}

@media (max-width: 760px) {
    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: 1fr 104px !important;
        width: 100% !important;
    }

    .compatibility-page .fitment-product-lines--nav {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 420px) {
    .compatibility-page .vehicle-fitment-year-card__summary-actions,
    .compatibility-page .fitment-product-lines--nav .fitment-product-line__actions,
    .compatibility-page .fitment-product-lines--nav .fitment-product-line--empty .fitment-product-line__actions {
        grid-template-columns: 1fr !important;
    }
}

/* Compatibility vehicle search clarity and mobile result width. Must remain at EOF. */
.compatibility-page .compat-search--vehicle {
    display: grid !important;
    gap: 16px !important;
    border: 2px solid rgba(23, 156, 153, 0.3) !important;
    border-radius: 24px !important;
    padding: 20px !important;
    box-shadow: 0 18px 44px rgba(16, 32, 34, 0.09) !important;
}

.compatibility-page .compat-search--vehicle .compat-search__header--focused {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 14px !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.compatibility-page .compat-search--vehicle .compat-search__header--focused h2 {
    margin-bottom: 6px !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search--vehicle .compat-search__header--focused p:not(.eyebrow) {
    max-width: 42em !important;
    margin: 0 !important;
    color: #4A5568 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.7 !important;
}

.compatibility-page .compat-search--vehicle .compat-guided-search,
.compatibility-page .compat-search--vehicle .compat-search__flow,
.compatibility-page .compat-search--vehicle .compat-search__required-callout,
.compatibility-page .compat-search--vehicle .compat-search__selection,
.compatibility-page .compat-search--vehicle .compat-search__inline-note,
.compatibility-page .compat-search--vehicle .compat-search__submit-copy {
    display: none !important;
}

.compatibility-page .compat-search--vehicle .compat-search__body,
.compatibility-page .compat-search--vehicle .compat-search__grid--vehicle {
    display: grid !important;
    gap: 12px !important;
}

.compatibility-page .compat-search--vehicle .compat-search__grid--vehicle {
    grid-template-columns: 1fr !important;
}

.compatibility-page .compat-search--vehicle .form-field--priority {
    display: grid !important;
    gap: 8px !important;
}

.compatibility-page .compat-search--vehicle .form-field--priority > span {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #102022 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search--vehicle .form-field--priority select {
    min-height: 54px !important;
    border: 2px solid #BDEDEA !important;
    border-radius: 16px !important;
    background-color: #FFFFFF !important;
    color: #102022 !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.04) !important;
}

.compatibility-page .compat-search--vehicle .form-field--priority select:focus {
    border-color: #179C99 !important;
    outline: 3px solid rgba(23, 156, 153, 0.2) !important;
    outline-offset: 2px !important;
}

.compatibility-page .compat-search--vehicle .form-field--priority span em {
    min-height: 22px !important;
    border-radius: 999px !important;
    background: #102022 !important;
    color: #FFFFFF !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .compat-search--vehicle .form-field__optional {
    border: 1px solid #DCEDEA !important;
    background: #F7FBFA !important;
    color: #667085 !important;
}

.compatibility-page .compat-search--vehicle .compat-search__actions--vehicle {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-top: 1px solid #DCEDEA !important;
    padding-top: 16px !important;
}

.compatibility-page .compat-search--vehicle .compat-search__primary-submit {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 30px rgba(23, 156, 153, 0.22) !important;
}

.compatibility-page .compat-search--vehicle .compat-search__primary-submit[disabled] {
    border-color: #DCEDEA !important;
    background: #E8EEEE !important;
    color: #667085 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
}

.compatibility-page .compat-search--vehicle .compat-search__clear-link {
    justify-self: center !important;
    color: #0B5F5C !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

.compatibility-page .compat-search--vehicle .compat-search__clear-link:hover {
    text-decoration: underline !important;
}

@media (max-width: 1080px) {
    .compatibility-page .compat-search--vehicle .compat-search__header--focused {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search--vehicle .compat-search__header--focused .button {
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    .compatibility-page .compat-hero__quick,
    .compatibility-page .compatibility-search-section .section__inner,
    .compatibility-page .compatibility-maker-section .section__inner {
        width: min(100% - 16px, 1180px) !important;
    }

    .compatibility-page .compatibility-workbench {
        gap: 12px !important;
    }

    .compatibility-page .compat-search--vehicle {
        border-radius: 18px !important;
        padding: 14px !important;
    }

    .compatibility-page .compat-search--vehicle .compat-search__header--focused h2 {
        font-size: 22px !important;
    }

    .compatibility-page .compat-search--vehicle .form-field--priority select {
        min-height: 50px !important;
    }

    .compatibility-page .compatibility-inline-results,
    .compatibility-page .fitment-results--simple {
        width: 100% !important;
        max-width: none !important;
    }

    .compatibility-page .fitment-results--simple .fitment-results__header,
    .compatibility-page .fitment-simple-card {
        border-radius: 16px !important;
    }

    .compatibility-page .fitment-results--simple .fitment-results__header,
    .compatibility-page .fitment-simple-card__header,
    .compatibility-page .fitment-simple-section {
        padding: 14px !important;
    }

    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-right: 6px !important;
        margin-left: 6px !important;
    }

    .compatibility-page .vehicle-fitment-year-card {
        border-left-width: 4px !important;
        border-radius: 16px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__head {
        gap: 12px !important;
        padding: 14px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__head > div:first-child > h4 {
        font-size: 18px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: minmax(0, 1fr) 96px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__body,
    .compatibility-page .vehicle-fitment-grade-matrix-panel,
    .compatibility-page .vehicle-fitment-condition-panel,
    .compatibility-page .vehicle-fitment-products-panel {
        padding: 10px !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-wrap {
        margin-right: -2px !important;
        margin-left: -2px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table {
        min-width: 720px !important;
    }
}

@media (max-width: 420px) {
    .compatibility-page .fitment-status-guide,
    .compatibility-page .vehicle-fitment-year-cards {
        margin-right: 2px !important;
        margin-left: 2px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__summary-actions {
        grid-template-columns: minmax(0, 1fr) 90px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__status,
    .compatibility-page .vehicle-fitment-year-card__toggle {
        min-height: 40px !important;
        padding: 6px 8px !important;
    }

    .compatibility-page .vehicle-fitment-year-card__toggle > span {
        font-size: 12px !important;
    }
}

/* Compatibility mobile grade matrix cards. Must remain at EOF. */
.compatibility-page .vehicle-fitment-grade-matrix-table__mobile-product {
    display: none !important;
}

@media (max-width: 760px) {
    .compatibility-page .vehicle-fitment-grade-matrix-wrap {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table,
    .compatibility-page .vehicle-fitment-grade-matrix-table thead,
    .compatibility-page .vehicle-fitment-grade-matrix-table tbody,
    .compatibility-page .vehicle-fitment-grade-matrix-table tr,
    .compatibility-page .vehicle-fitment-grade-matrix-table th,
    .compatibility-page .vehicle-fitment-grade-matrix-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table tbody {
        display: grid !important;
        gap: 10px !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table tr {
        display: grid !important;
        gap: 8px !important;
        border: 1px solid #DCEDEA !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;
        padding: 10px !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table th,
    .compatibility-page .vehicle-fitment-grade-matrix-table td {
        border: 0 !important;
        padding: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table thead th:first-child,
    .compatibility-page .vehicle-fitment-grade-matrix-table tbody th {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table tbody th {
        border-left: 4px solid #667085 !important;
        border-radius: 12px !important;
        background: #F7FBFA !important;
        padding: 10px 10px 10px 12px !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__row--ok th {
        border-left-color: #179C99 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__row--conditional th {
        border-left-color: #C47A00 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__row--ng th {
        border-left-color: #B93815 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px 10px !important;
        align-items: center !important;
        min-width: 0 !important;
        border: 1px solid #DCEDEA !important;
        border-radius: 12px !important;
        padding: 10px !important;
        text-align: left !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__mobile-product {
        display: block !important;
        min-width: 0 !important;
        color: #102022 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell .fitment-badge {
        justify-self: end !important;
        min-width: 74px !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__cell small {
        grid-column: 1 / -1 !important;
        margin-top: 0 !important;
        text-align: left !important;
    }
}

/* Compatibility mobile matrix compact scroll restore. Must remain at EOF. */
@media (max-width: 760px) {
    .compatibility-page .vehicle-fitment-grade-matrix-wrap {
        overflow-x: auto !important;
        border: 1px solid #DCEDEA !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table {
        display: table !important;
        width: 100% !important;
        min-width: 680px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table thead {
        position: static !important;
        display: table-header-group !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table tbody {
        display: table-row-group !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table tr {
        display: table-row !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table th,
    .compatibility-page .vehicle-fitment-grade-matrix-table td {
        display: table-cell !important;
        width: auto !important;
        min-width: 118px !important;
        border-right: 1px solid #DCEDEA !important;
        border-bottom: 1px solid #DCEDEA !important;
        border-radius: 0 !important;
        padding: 10px !important;
        vertical-align: top !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table tr:last-child th,
    .compatibility-page .vehicle-fitment-grade-matrix-table tr:last-child td {
        border-bottom: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table th:last-child,
    .compatibility-page .vehicle-fitment-grade-matrix-table td:last-child {
        border-right: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table thead th:first-child,
    .compatibility-page .vehicle-fitment-grade-matrix-table tbody th {
        position: sticky !important;
        left: 0 !important;
        z-index: 1 !important;
        width: 170px !important;
        min-width: 170px !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table thead th:first-child {
        z-index: 2 !important;
        background: #F0FBFA !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table tbody th {
        border-left: 4px solid #667085 !important;
        background: #FFFFFF !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__row--ok th {
        border-left-color: #179C99 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__row--conditional th {
        border-left-color: #C47A00 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__row--ng th {
        border-left-color: #B93815 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell {
        display: table-cell !important;
        min-width: 118px !important;
        border-left: 1px solid rgba(16, 32, 34, 0.04) !important;
        border-radius: 0 !important;
        text-align: center !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__mobile-product {
        display: none !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table td.vehicle-fitment-grade-matrix-table__cell .fitment-badge {
        min-width: 0 !important;
    }

    .compatibility-page .vehicle-fitment-grade-matrix-table__cell small {
        display: block !important;
        margin-top: 6px !important;
        text-align: center !important;
    }
}

/* Compatibility vehicle search wide workspace reset. Must remain at EOF. */
.compatibility-page .compatibility-search-section--primary .section__inner {
    width: min(100% - 32px, 1360px) !important;
    max-width: 1360px !important;
}

.compatibility-page .compatibility-search-section--primary .compatibility-workbench {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.compatibility-page .compatibility-search-section--primary .compatibility-workbench__form {
    position: static !important;
    top: auto !important;
    display: grid !important;
    gap: 10px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle {
    display: grid !important;
    grid-template-columns: minmax(170px, 0.52fr) minmax(0, 1.65fr) minmax(178px, 0.46fr) !important;
    gap: 12px 14px !important;
    align-items: end !important;
    border-radius: 18px !important;
    padding: 14px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused {
    display: block !important;
    grid-column: 1 !important;
    align-self: center !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused h2 {
    margin: 2px 0 4px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused p:not(.eyebrow) {
    max-width: 18em !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__body {
    grid-column: 2 !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__grid--vehicle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(118px, 0.72fr) !important;
    gap: 10px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority {
    gap: 6px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority > span {
    font-size: 12px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority select {
    min-height: 48px !important;
    border-radius: 14px !important;
    padding-inline: 12px !important;
    font-size: 15px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority span em {
    min-height: 20px !important;
    padding: 3px 7px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__actions--vehicle {
    grid-column: 3 !important;
    align-self: end !important;
    gap: 6px !important;
    border-top: 0 !important;
    padding-top: 0 !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__primary-submit {
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__clear-link {
    min-height: 18px !important;
    font-size: 11px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__error {
    grid-column: 1 / -1 !important;
}

.compatibility-page .compatibility-search-section--primary .compatibility-notice {
    margin-top: 0 !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.compatibility-page .compatibility-search-section--primary .compatibility-inline-results,
.compatibility-page .compatibility-search-section--primary .fitment-results--simple,
.compatibility-page .compatibility-search-section--primary .fitment-simple-card {
    width: 100% !important;
    max-width: none !important;
}

.compatibility-page .compatibility-search-section--primary .fitment-results--simple .fitment-results__header {
    border-radius: 18px !important;
    padding: 16px 18px !important;
}

.compatibility-page .compatibility-search-section--primary .fitment-simple-card {
    border-radius: 18px !important;
}

.compatibility-page .compatibility-search-section--primary .fitment-simple-card__header {
    padding: 16px 18px !important;
}

.compatibility-page .compatibility-search-section--primary .fitment-status-guide,
.compatibility-page .compatibility-search-section--primary .vehicle-fitment-year-cards {
    margin-right: 14px !important;
    margin-left: 14px !important;
}

.compatibility-page .compatibility-search-section--primary .vehicle-fitment-year-card__head {
    padding: 16px 18px !important;
}

.compatibility-page .compatibility-search-section--primary .vehicle-fitment-year-card__body {
    padding: 14px !important;
}

.compatibility-page .compatibility-search-section--primary .vehicle-fitment-grade-matrix-table {
    min-width: 980px !important;
}

@media (max-width: 1100px) {
    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused,
    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__body,
    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__actions--vehicle {
        grid-column: 1 !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused p:not(.eyebrow) {
        max-width: none !important;
    }
}

@media (max-width: 760px) {
    .compatibility-page .compatibility-search-section--primary .section__inner {
        width: min(100% - 12px, 1360px) !important;
    }

    .compatibility-page .compatibility-search-section--primary {
        padding-top: 22px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle {
        gap: 10px !important;
        border-radius: 16px !important;
        padding: 10px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused h2 {
        font-size: 18px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused p:not(.eyebrow) {
        font-size: 11px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__grid--vehicle {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority select {
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__primary-submit {
        min-height: 48px !important;
        border-radius: 12px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compatibility-notice {
        padding: 9px 10px !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-results--simple .fitment-results__header,
    .compatibility-page .compatibility-search-section--primary .fitment-simple-card__header {
        padding: 12px !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-status-guide,
    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-year-cards {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-year-card__head {
        padding: 12px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-year-card__body,
    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-grade-matrix-panel,
    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-condition-panel,
    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-products-panel {
        padding: 8px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-grade-matrix-table {
        min-width: 640px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-grade-matrix-table thead th:first-child,
    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-grade-matrix-table tbody th {
        width: 148px !important;
        min-width: 148px !important;
    }
}

/* Compatibility compact vehicle fields. Must remain at EOF. */
.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused {
    margin-bottom: 0 !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .eyebrow {
    margin-bottom: 2px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused h2 {
    margin: 0 0 3px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused p:not(.eyebrow) {
    margin: 0 !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority {
    min-height: 0 !important;
    border-radius: 14px !important;
    padding: 7px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority > span {
    min-height: 20px !important;
}

.compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority select {
    width: 100% !important;
    min-height: 44px !important;
}

@media (max-width: 760px) {
    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__header--focused p:not(.eyebrow) {
        display: none !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__grid--vehicle {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__grid--vehicle .form-field--priority:nth-child(3) {
        grid-column: 1 / -1 !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority {
        gap: 4px !important;
        padding: 5px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority > span {
        min-height: 16px !important;
        font-size: 11px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority span em {
        min-height: 17px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .form-field--priority select {
        min-height: 40px !important;
        padding-inline: 8px !important;
        font-size: 14px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__primary-submit {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__clear-link {
        display: none !important;
    }

    .compatibility-page .compatibility-search-section--primary .compatibility-notice {
        display: none !important;
    }
}

/* Compatibility mobile usability rebuild. Must remain at EOF. */
.compatibility-page .vehicle-fitment-mobile-grade-list {
    display: none !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-hero__inner {
        width: min(100% - 12px, 1180px) !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding-top: 18px !important;
    }

    .compatibility-page .compat-hero__copy {
        gap: 10px !important;
    }

    .compatibility-page .compat-hero__copy h1 {
        max-width: none !important;
        margin: 0 !important;
        font-size: 25px !important;
        line-height: 1.25 !important;
    }

    .compatibility-page .compat-hero__lead {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    .compatibility-page .compat-hero__trust {
        display: none !important;
    }

    .compatibility-page .compat-hero__visual {
        display: none !important;
    }

    .compatibility-page .compat-hero__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .compatibility-page .compat-hero__actions .button {
        min-height: 42px !important;
        border-radius: 12px !important;
        padding: 9px 10px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    .compatibility-page .compat-hero__quick {
        width: min(100% - 12px, 1180px) !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding-bottom: 14px !important;
    }

    .compatibility-page .compat-hero__quick a {
        min-height: 54px !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 3px 6px !important;
        border-radius: 12px !important;
        padding: 7px 8px !important;
    }

    .compatibility-page .compat-hero__quick a::after,
    .compatibility-page .compat-hero__quick small {
        display: none !important;
    }

    .compatibility-page .compat-hero__quick span {
        width: 22px !important;
        height: 22px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    .compatibility-page .compat-hero__quick strong {
        padding-right: 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .compatibility-page .compatibility-search-section--primary .section__header {
        margin-bottom: 10px !important;
        text-align: left !important;
    }

    .compatibility-page .compatibility-search-section--primary .section__header .eyebrow {
        margin-bottom: 3px !important;
        font-size: 10px !important;
    }

    .compatibility-page .compatibility-search-section--primary .section__header h2 {
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    .compatibility-page .compatibility-search-section--primary .section__lead {
        display: none !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-results--simple .fitment-results__header {
        display: grid !important;
        gap: 5px !important;
        padding: 10px !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-results--simple .fitment-results__header h2 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-results--simple .fitment-results__header p:last-child {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-simple-card__header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-simple-card__header h3 {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-status-guide {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        border-radius: 12px !important;
        padding: 7px !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-status-guide strong {
        display: none !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-status-guide span {
        display: grid !important;
        min-height: 38px !important;
        justify-items: center !important;
        gap: 3px !important;
        border-radius: 10px !important;
        padding: 5px 4px !important;
        text-align: center !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    .compatibility-page .compatibility-search-section--primary .fitment-status-guide b {
        min-width: 28px !important;
        min-height: 18px !important;
        font-size: 10px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-grade-matrix-wrap {
        display: none !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-list {
        display: grid !important;
        gap: 8px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-products-panel__head {
        gap: 5px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-products-panel__head strong {
        font-size: 13px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card {
        display: grid !important;
        gap: 8px !important;
        border: 1px solid #DCEDEA !important;
        border-left: 4px solid #667085 !important;
        border-radius: 12px !important;
        background: #FFFFFF !important;
        padding: 9px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card--ok {
        border-left-color: #179C99 !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card--conditional {
        border-left-color: #C47A00 !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card--ng {
        border-left-color: #B93815 !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: start !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card header span,
    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card header small {
        display: block !important;
        color: #667085 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.45 !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card header strong {
        display: block !important;
        color: #102022 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product {
        display: grid !important;
        gap: 5px !important;
        min-width: 0 !important;
        min-height: 62px !important;
        align-content: start !important;
        border: 1px solid #DCEDEA !important;
        border-radius: 10px !important;
        background: #F7FBFA !important;
        padding: 7px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product--ok {
        border-color: rgba(23, 156, 153, 0.38) !important;
        background: #F0FBFA !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product--conditional {
        border-color: rgba(196, 122, 0, 0.34) !important;
        background: #FFF8EA !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product--ng {
        border-color: rgba(185, 56, 21, 0.3) !important;
        background: #FFF8F6 !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product > strong {
        min-width: 0 !important;
        color: #102022 !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product .fitment-badge {
        width: fit-content !important;
        min-height: 22px !important;
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product .fitment-badge span {
        min-width: 24px !important;
        min-height: 16px !important;
        font-size: 9px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product > small {
        color: #4A5568 !important;
        font-size: 10px !important;
        font-weight: 750 !important;
        line-height: 1.35 !important;
    }
}

/* Compatibility mobile product chip scroller. Must remain at EOF. */
@media (max-width: 760px) {
    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card {
        gap: 7px !important;
        padding: 8px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-grade-card header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product-grid {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product {
        flex: 0 0 132px !important;
        min-height: 72px !important;
        scroll-snap-align: start !important;
    }

    .compatibility-page .compatibility-search-section--primary .vehicle-fitment-mobile-product > strong {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* Compatibility required year, nav parity, and contact triage. Must remain at EOF. */
.compatibility-page .compatibility-bottom-contact-cta {
    margin-bottom: 22px !important;
}

.compatibility-page .compatibility-contact-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    border: 1px solid rgba(189, 237, 234, 0.95) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #F0FBFA, #FFFFFF) !important;
    padding: 20px !important;
    box-shadow: 0 14px 36px rgba(16, 32, 34, 0.07) !important;
}

.compatibility-page .compatibility-contact-panel h2 {
    margin: 2px 0 6px !important;
    color: #102022 !important;
    font-size: clamp(22px, 2.2vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

.compatibility-page .compatibility-contact-panel p:not(.eyebrow) {
    max-width: 48em !important;
    margin: 0 !important;
    color: #4A5568 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.75 !important;
}

.compatibility-page .compatibility-contact-panel__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    min-width: min(100%, 360px) !important;
}

.compatibility-page .compatibility-contact-panel__actions .button {
    min-height: 48px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
}

.compatibility-page #nav-search .section__inner {
    width: min(100% - 32px, 1360px) !important;
    max-width: 1360px !important;
}

.compatibility-page .compatibility-workbench--nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.compatibility-page .compatibility-workbench--nav .compatibility-workbench__form {
    position: static !important;
    top: auto !important;
}

.compatibility-page .compat-search--nav {
    display: grid !important;
    grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.75fr) minmax(170px, 0.48fr) !important;
    gap: 12px 14px !important;
    align-items: end !important;
    border: 2px solid rgba(23, 156, 153, 0.22) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    padding: 14px !important;
    box-shadow: 0 16px 38px rgba(16, 32, 34, 0.08) !important;
}

.compatibility-page .compat-search--nav .compat-search__header--focused {
    display: block !important;
    grid-column: 1 !important;
    align-self: center !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.compatibility-page .compat-search--nav .compat-search__header--focused h2 {
    margin: 2px 0 4px !important;
    color: #102022 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search--nav .compat-search__header--focused p:not(.eyebrow) {
    max-width: 19em !important;
    margin: 0 !important;
    color: #4A5568 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.55 !important;
}

.compatibility-page .compat-search--nav .compat-search__grid--nav {
    display: grid !important;
    grid-column: 2 !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(118px, 0.72fr) !important;
    gap: 10px !important;
}

.compatibility-page .compat-search--nav .form-field {
    display: grid !important;
    gap: 6px !important;
    min-height: 0 !important;
    border-radius: 14px !important;
    background: #F7FBFA !important;
    padding: 7px !important;
}

.compatibility-page .compat-search--nav .form-field > span {
    display: block !important;
    min-height: 20px !important;
    color: #102022 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-search--nav .form-field select,
.compatibility-page .compat-search--nav .form-field input {
    width: 100% !important;
    min-height: 44px !important;
    border: 2px solid #BDEDEA !important;
    border-radius: 14px !important;
    background-color: #FFFFFF !important;
    color: #102022 !important;
    padding-inline: 12px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 22px rgba(16, 32, 34, 0.04) !important;
}

.compatibility-page .compat-search--nav .form-field select:focus,
.compatibility-page .compat-search--nav .form-field input:focus {
    border-color: #179C99 !important;
    outline: 3px solid rgba(23, 156, 153, 0.2) !important;
    outline-offset: 2px !important;
}

.compatibility-page .compat-search--nav .form-field__hint {
    display: none !important;
}

.compatibility-page .compat-search--nav .compat-search__manual-field {
    grid-column: 1 / -1 !important;
}

.compatibility-page .compat-search--nav .compat-search__actions {
    display: grid !important;
    grid-column: 3 !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-self: end !important;
}

.compatibility-page .compat-search--nav .compat-search__actions .button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    padding-inline: 12px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.compatibility-page .compat-search--nav .compat-search__actions .button--secondary {
    min-height: 30px !important;
    border: 0 !important;
    background: transparent !important;
    color: #0B5F5C !important;
    box-shadow: none !important;
    font-size: 11px !important;
}

.compatibility-page .compatibility-workbench--nav .compatibility-inline-results,
.compatibility-page .compatibility-workbench--nav .fitment-results--simple,
.compatibility-page .compatibility-workbench--nav .fitment-simple-card {
    width: 100% !important;
    max-width: none !important;
}

.compatibility-page .compatibility-workbench--nav .fitment-results--simple .fitment-results__header {
    border-radius: 18px !important;
    padding: 16px 18px !important;
}

.compatibility-page .compatibility-workbench--nav .fitment-simple-card {
    border-radius: 18px !important;
}

.compatibility-page .compatibility-workbench--nav .fitment-simple-card__header,
.compatibility-page .compatibility-workbench--nav .fitment-simple-section {
    padding: 16px 18px !important;
}

.compatibility-page .compatibility-workbench--nav .fitment-simple-section__head--nav {
    margin-bottom: 2px !important;
}

.compatibility-page .compatibility-workbench--nav .fitment-simple-section__meta {
    grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 0.55fr) minmax(240px, 1.2fr) !important;
}

.compatibility-page .compatibility-workbench--nav .fitment-product-lines--nav {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

@media (max-width: 1100px) {
    .compatibility-page .compat-search--nav {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-search--nav .compat-search__header--focused,
    .compatibility-page .compat-search--nav .compat-search__grid--nav,
    .compatibility-page .compat-search--nav .compat-search__actions {
        grid-column: 1 !important;
    }

    .compatibility-page .compat-search--nav .compat-search__header--focused p:not(.eyebrow) {
        max-width: none !important;
    }
}

@media (max-width: 760px) {
    .compatibility-page #nav-search .section__inner {
        width: min(100% - 12px, 1360px) !important;
    }

    .compatibility-page .compat-search--nav {
        gap: 10px !important;
        border-radius: 16px !important;
        padding: 10px !important;
    }

    .compatibility-page .compat-search--nav .compat-search__header--focused h2 {
        font-size: 18px !important;
    }

    .compatibility-page .compat-search--nav .compat-search__header--focused p:not(.eyebrow) {
        display: none !important;
    }

    .compatibility-page .compat-search--nav .compat-search__grid--nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .compatibility-page .compat-search--nav .compat-search__grid--nav .form-field:nth-child(2),
    .compatibility-page .compat-search--nav .compat-search__manual-field {
        grid-column: 1 / -1 !important;
    }

    .compatibility-page .compat-search--nav .form-field {
        gap: 4px !important;
        padding: 5px !important;
    }

    .compatibility-page .compat-search--nav .form-field > span {
        min-height: 16px !important;
        font-size: 11px !important;
    }

    .compatibility-page .compat-search--nav .form-field select,
    .compatibility-page .compat-search--nav .form-field input {
        min-height: 40px !important;
        padding-inline: 8px !important;
        font-size: 14px !important;
    }

    .compatibility-page .compat-search--nav .compat-search__actions .button {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .compatibility-page .compat-search--nav .compat-search__actions .button--secondary {
        display: none !important;
    }

    .compatibility-page .compatibility-workbench--nav .fitment-results--simple .fitment-results__header,
    .compatibility-page .compatibility-workbench--nav .fitment-simple-card__header,
    .compatibility-page .compatibility-workbench--nav .fitment-simple-section {
        padding: 12px !important;
    }

    .compatibility-page .compatibility-workbench--nav .fitment-simple-section__meta,
    .compatibility-page .compatibility-workbench--nav .fitment-product-lines--nav {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compatibility-contact-panel {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        border-radius: 18px !important;
        padding: 14px !important;
    }

    .compatibility-page .compatibility-contact-panel h2 {
        font-size: 20px !important;
    }

    .compatibility-page .compatibility-contact-panel p:not(.eyebrow) {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    .compatibility-page .compatibility-contact-panel__actions {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }

    .compatibility-page .compatibility-contact-panel__actions .button {
        min-height: 44px !important;
        white-space: normal !important;
    }
}

/* Compatibility mobile hero, support links, and nav result parity. Must remain at EOF. */
.compatibility-page .fitment-simple-card--nav .fitment-status-guide--nav,
.compatibility-page .fitment-simple-card--nav .vehicle-fitment-year-cards--nav {
    margin-right: 14px !important;
    margin-left: 14px !important;
}

.compatibility-page .nav-fitment-condition-panel {
    display: grid !important;
    gap: 12px !important;
}

.compatibility-page .nav-fitment-condition-panel .vehicle-fitment-year-card__meta {
    display: grid !important;
    grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1.15fr) minmax(180px, 0.9fr) !important;
    gap: 10px !important;
}

.compatibility-page .nav-fitment-condition-panel .vehicle-fitment-year-card__meta div {
    min-width: 0 !important;
}

.compatibility-page .nav-fitment-condition-panel .vehicle-fitment-year-card__meta strong {
    overflow-wrap: anywhere !important;
}

.compatibility-page .compatibility-support-links {
    align-items: stretch !important;
}

.compatibility-page .compatibility-support-links .support-card {
    display: grid !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-content: start !important;
    gap: 10px !important;
    border-radius: 18px !important;
}

.compatibility-page .compatibility-support-links .support-card h3,
.compatibility-page .compatibility-support-links .support-card p {
    overflow-wrap: anywhere !important;
}

.compatibility-page .compatibility-support-links .support-card .text-link {
    align-self: end !important;
    width: fit-content !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-hero {
        overflow: hidden !important;
    }

    .compatibility-page .compat-hero__inner {
        gap: 10px !important;
        padding-top: 14px !important;
    }

    .compatibility-page .compat-hero__copy {
        gap: 9px !important;
    }

    .compatibility-page .compat-hero__copy h1 {
        font-size: 24px !important;
        line-height: 1.28 !important;
    }

    .compatibility-page .compat-hero__lead {
        -webkit-line-clamp: 3 !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .compatibility-page .compat-hero__visual {
        display: grid !important;
        justify-items: stretch !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .compatibility-page .compat-hero__image-card {
        width: 100% !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 26px rgba(16, 32, 34, 0.1) !important;
    }

    .compatibility-page .compat-hero__image-card::before {
        inset: 7px !important;
        border-radius: 12px !important;
    }

    .compatibility-page .compat-hero__image-card img {
        width: 100% !important;
        height: 118px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .compatibility-page .compat-hero__status-card {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        max-width: none !important;
        gap: 2px !important;
        border-radius: 14px !important;
        padding: 9px 11px !important;
        box-shadow: 0 8px 20px rgba(16, 32, 34, 0.08) !important;
    }

    .compatibility-page .compat-hero__status-card span {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .compatibility-page .compat-hero__status-card strong {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .compatibility-page .compat-hero__quick {
        display: flex !important;
        width: min(100% - 12px, 1180px) !important;
        gap: 7px !important;
        overflow-x: auto !important;
        padding-bottom: 12px !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
    }

    .compatibility-page .compat-hero__quick a {
        flex: 0 0 150px !important;
        min-height: 56px !important;
        scroll-snap-align: start !important;
    }

    .compatibility-page .compatibility-after-search-section .section__inner {
        width: min(100% - 16px, 1180px) !important;
    }

    .compatibility-page .compatibility-support-links.card-grid--3 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .compatibility-page .compatibility-support-links .support-card {
        gap: 6px !important;
        border-radius: 16px !important;
        padding: 13px !important;
    }

    .compatibility-page .compatibility-support-links .support-card span {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .compatibility-page .compatibility-support-links .support-card h3 {
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .compatibility-page .compatibility-support-links .support-card p {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    .compatibility-page .compatibility-support-links .support-card .text-link {
        min-height: 28px !important;
        font-size: 12px !important;
    }

    .compatibility-page .fitment-simple-card--nav .fitment-status-guide--nav,
    .compatibility-page .fitment-simple-card--nav .vehicle-fitment-year-cards--nav {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .compatibility-page .nav-fitment-condition-panel .vehicle-fitment-year-card__meta {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .fitment-simple-card--nav .vehicle-fitment-product-card__actions {
        grid-template-columns: 1fr !important;
    }
}

/* Compatibility disclaimer and mobile manufacturer grid. Must remain at EOF. */
.compatibility-page .compat-fitment-disclaimer {
    display: grid;
    width: min(1180px, calc(100% - 40px));
    margin: clamp(18px, 3vw, 30px) auto clamp(22px, 4vw, 42px);
    gap: 14px;
    border: 1px solid rgba(23, 156, 153, 0.26);
    border-left: 6px solid var(--oc-primary, #179C99);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(23, 156, 153, 0.11), rgba(255, 255, 255, 0.95) 45%),
        #FFFFFF;
    padding: clamp(16px, 2.4vw, 24px);
    box-shadow: 0 18px 48px rgba(16, 32, 34, 0.08);
}

.compatibility-page .compat-fitment-disclaimer__lead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.compatibility-page .compat-fitment-disclaimer__lead > span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border-radius: 999px;
    background: var(--oc-primary, #179C99);
    color: #FFFFFF;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.compatibility-page .compat-fitment-disclaimer h2 {
    margin: 0;
    color: var(--oc-ink, #102022);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.35;
}

.compatibility-page .compat-fitment-disclaimer p {
    margin: 6px 0 0;
    color: var(--oc-muted, #667085);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.75;
}

.compatibility-page .compat-fitment-disclaimer__points {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr) minmax(0, 1.24fr);
    gap: 10px;
}

.compatibility-page .compat-fitment-disclaimer__points > div {
    min-width: 0;
    border: 1px solid rgba(220, 237, 234, 0.95);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 13px;
}

.compatibility-page .compat-fitment-disclaimer__points span {
    display: block;
    color: var(--oc-primary-700, #0B5F5C);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.compatibility-page .compat-fitment-disclaimer__points strong {
    display: block;
    margin-top: 4px;
    color: var(--oc-ink, #102022);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compatibility-page .compat-fitment-disclaimer__points p {
    font-size: 12px;
    line-height: 1.65;
}

.compatibility-page .compat-fitment-disclaimer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.compatibility-page .compat-fitment-disclaimer__links a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border: 1px solid var(--oc-primary-200, #BDEDEA);
    border-radius: 999px;
    background: #F7FBFA;
    color: var(--oc-primary-700, #0B5F5C);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
}

.compatibility-page .compat-fitment-disclaimer__links a:hover,
.compatibility-page .compat-fitment-disclaimer__links a:focus-visible {
    border-color: var(--oc-primary, #179C99);
    background: #FFFFFF;
    outline: none;
}

@media (max-width: 900px) {
    .compatibility-page .compat-fitment-disclaimer__points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .compatibility-page .compat-fitment-disclaimer {
        width: min(100% - 18px, 1180px);
        margin-top: 12px;
        margin-bottom: 20px;
        gap: 8px;
        border-left-width: 4px;
        border-radius: 18px;
        padding: 11px;
    }

    .compatibility-page .compat-fitment-disclaimer__lead {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .compatibility-page .compat-fitment-disclaimer__lead > span {
        width: fit-content;
        min-height: 26px;
        padding: 5px 9px;
        font-size: 11px;
    }

    .compatibility-page .compat-fitment-disclaimer h2 {
        font-size: 18px;
    }

    .compatibility-page .compat-fitment-disclaimer p {
        font-size: 11px;
        line-height: 1.58;
    }

    .compatibility-page .compat-fitment-disclaimer__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div {
        border-radius: 13px;
        padding: 8px;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div:nth-child(3) {
        grid-column: 1 / -1;
    }

    .compatibility-page .compat-fitment-disclaimer__points strong {
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.35;
    }

    .compatibility-page .compat-fitment-disclaimer__points span {
        font-size: 10px;
    }

    .compatibility-page .compat-fitment-disclaimer__points p {
        margin-top: 3px;
        font-size: 10.5px;
        line-height: 1.5;
    }

    .compatibility-page .compat-fitment-disclaimer__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compatibility-page .compat-fitment-disclaimer__links a {
        justify-content: center;
        min-height: 34px;
        padding-inline: 6px;
        text-align: center;
    }

    .compatibility-page .compatibility-manufacturer-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .compatibility-page .compatibility-manufacturer-link-card {
        min-height: 124px !important;
        gap: 8px !important;
        border-radius: 15px !important;
        padding: 10px !important;
    }

    .compatibility-page .compatibility-manufacturer-link-card h3 {
        margin-top: 3px !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    .compatibility-page .compatibility-manufacturer-link-card small {
        margin-top: 4px !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    .compatibility-page .compatibility-manufacturer-link-card__counts {
        gap: 4px !important;
    }

    .compatibility-page .compatibility-manufacturer-link-card__counts span {
        min-height: 22px !important;
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    .compatibility-page .compatibility-manufacturer-link-card > strong {
        width: 100% !important;
        min-height: 30px !important;
        justify-content: center !important;
        padding: 5px 6px !important;
        font-size: 11px !important;
        text-align: center !important;
    }
}

/* Compatibility mobile clear actions and plain notice label. Must remain at EOF. */
.compatibility-page .compat-fitment-disclaimer__lead {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

.compatibility-page .compat-fitment-disclaimer__lead > span {
    display: block !important;
    min-height: 0 !important;
    width: fit-content !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

@media (max-width: 760px) {
    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__actions--vehicle,
    .compatibility-page .compat-search--nav .compat-search__actions {
        gap: 8px !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__clear-link,
    .compatibility-page .compat-search--nav .compat-search__actions .button--secondary {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
        border-radius: 999px !important;
        background: #F7FBFA !important;
        color: var(--oc-primary-700, #0B5F5C) !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__clear-link:hover,
    .compatibility-page .compatibility-search-section--primary .compat-search--vehicle .compat-search__clear-link:focus-visible,
    .compatibility-page .compat-search--nav .compat-search__actions .button--secondary:hover,
    .compatibility-page .compat-search--nav .compat-search__actions .button--secondary:focus-visible {
        border-color: var(--oc-primary, #179C99) !important;
        background: #FFFFFF !important;
        outline: 3px solid rgba(23, 156, 153, 0.18) !important;
        outline-offset: 2px !important;
    }
}

/* Compatibility disclaimer as plain notice text. Must remain at EOF. */
.compatibility-page .compat-fitment-disclaimer {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: clamp(16px, 2.4vw, 28px) auto clamp(20px, 3vw, 36px) !important;
    padding: 14px 0 !important;
    gap: 10px !important;
    border: 0 !important;
    border-top: 1px solid var(--oc-line, #DCEDEA) !important;
    border-bottom: 1px solid var(--oc-line, #DCEDEA) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.compatibility-page .compat-fitment-disclaimer__lead {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
}

.compatibility-page .compat-fitment-disclaimer__lead > span {
    display: block !important;
    min-height: 0 !important;
    width: fit-content !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-fitment-disclaimer h2 {
    font-size: clamp(18px, 2vw, 24px) !important;
}

.compatibility-page .compat-fitment-disclaimer p {
    font-size: 12px !important;
    line-height: 1.65 !important;
}

.compatibility-page .compat-fitment-disclaimer__points {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.35fr) !important;
    gap: 0 !important;
    border-top: 1px solid rgba(220, 237, 234, 0.78) !important;
    padding-top: 10px !important;
}

.compatibility-page .compat-fitment-disclaimer__points > div {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 14px !important;
}

.compatibility-page .compat-fitment-disclaimer__points > div:first-child {
    padding-left: 0 !important;
}

.compatibility-page .compat-fitment-disclaimer__points > div + div {
    border-left: 1px solid rgba(220, 237, 234, 0.86) !important;
}

.compatibility-page .compat-fitment-disclaimer__points span {
    font-size: 11px !important;
}

.compatibility-page .compat-fitment-disclaimer__points strong {
    margin-top: 3px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-fitment-disclaimer__points p {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.58 !important;
}

.compatibility-page .compat-fitment-disclaimer__links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin-top: 8px !important;
}

.compatibility-page .compat-fitment-disclaimer__links a {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-fitment-disclaimer {
        width: min(100% - 18px, 1180px) !important;
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        padding: 11px 0 !important;
        gap: 8px !important;
    }

    .compatibility-page .compat-fitment-disclaimer h2 {
        font-size: 18px !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points {
        grid-template-columns: 1fr !important;
        padding-top: 8px !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div,
    .compatibility-page .compat-fitment-disclaimer__points > div:first-child {
        grid-column: auto !important;
        padding: 7px 0 !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div:first-child {
        padding-top: 0 !important;
    }

    .compatibility-page .compat-fitment-disclaimer__points > div + div {
        border-top: 1px solid rgba(220, 237, 234, 0.86) !important;
        border-left: 0 !important;
    }

    .compatibility-page .compat-fitment-disclaimer__links {
        display: flex !important;
        gap: 8px 12px !important;
    }

    .compatibility-page .compat-fitment-disclaimer__links a {
        justify-content: flex-start !important;
        min-height: 0 !important;
        text-align: left !important;
    }
}

/* Compatibility disclaimer notice trigger. */
.compatibility-page .compat-fitment-disclaimer__notice-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(23, 156, 153, 0.32) !important;
    border-radius: 999px !important;
    background: var(--oc-primary, #179C99) !important;
    color: #FFFFFF !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 20px rgba(23, 156, 153, 0.18) !important;
}

.compatibility-page .compat-fitment-disclaimer__notice-button:hover,
.compatibility-page .compat-fitment-disclaimer__notice-button:focus-visible {
    background: var(--oc-primary-700, #0B5F5C) !important;
    outline: 3px solid rgba(23, 156, 153, 0.18) !important;
    outline-offset: 2px !important;
}

@media (max-width: 760px) {
    .compatibility-page .compat-fitment-disclaimer__notice-button {
        width: auto !important;
        min-height: 34px !important;
        padding: 8px 12px !important;
    }
}

/* Manufacturer compatibility page refinement. */
.compatibility-page .compat-seo-guide {
    padding: clamp(26px, 5vw, 54px) 0 !important;
    background: #FFFFFF !important;
}

.compatibility-page .compat-seo-guide__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr) !important;
    gap: clamp(18px, 4vw, 38px) !important;
    align-items: stretch !important;
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
}

.compatibility-page .compat-seo-guide__copy,
.compatibility-page .compat-seo-guide__panel {
    min-width: 0 !important;
}

.compatibility-page .compat-seo-guide__copy {
    display: grid !important;
    align-content: center !important;
    gap: 12px !important;
}

.compatibility-page .compat-seo-guide__copy h2,
.compatibility-page .compat-seo-guide__panel h3 {
    margin: 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.28 !important;
}

.compatibility-page .compat-seo-guide__copy h2 {
    font-size: clamp(24px, 3vw, 36px) !important;
}

.compatibility-page .compat-seo-guide__panel h3 {
    font-size: clamp(19px, 2vw, 24px) !important;
}

.compatibility-page .compat-seo-guide__copy p {
    max-width: 68ch !important;
    margin: 0 !important;
    color: var(--oc-text, #1F2933) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.84 !important;
}

.compatibility-page .compat-seo-guide__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 6px !important;
}

.compatibility-page .compat-seo-guide__panel {
    border: 1px solid rgba(220, 237, 234, 0.95) !important;
    border-radius: 18px !important;
    background: #F7FBFA !important;
    padding: clamp(18px, 3vw, 26px) !important;
    box-shadow: 0 16px 38px rgba(16, 32, 34, 0.06) !important;
}

.compatibility-page .compat-seo-guide__panel dl {
    display: grid !important;
    gap: 12px !important;
    margin: 16px 0 0 !important;
}

.compatibility-page .compat-seo-guide__panel dl div {
    display: grid !important;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    margin: 0 !important;
}

.compatibility-page .compat-seo-guide__panel dt,
.compatibility-page .compat-seo-guide__panel dd {
    margin: 0 !important;
    line-height: 1.68 !important;
}

.compatibility-page .compat-seo-guide__panel dt {
    color: var(--oc-primary-700, #0B5F5C) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.compatibility-page .compat-seo-guide__panel dd {
    color: var(--oc-text, #1F2933) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

.not-found-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    width: min(920px, 100%) !important;
    margin: 18px auto 0 !important;
}

.not-found-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    padding: 9px 15px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

@media (max-width: 640px) {
    .not-found-links {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .not-found-links a {
        width: 100% !important;
    }
}

.compatibility-page .compat-manufacturer-overview,
.compatibility-page .compat-manufacturer-models {
    padding: clamp(28px, 5vw, 58px) 0 !important;
}

.compatibility-page .compat-manufacturer-overview {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 100%) !important;
}

.compatibility-page .compat-manufacturer-overview__inner,
.compatibility-page .compat-manufacturer-models__inner {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
}

.compatibility-page .compat-manufacturer-overview__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr) !important;
    gap: clamp(18px, 4vw, 42px) !important;
    align-items: stretch !important;
}

.compatibility-page .compat-manufacturer-overview__copy {
    display: grid !important;
    align-content: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-manufacturer-overview__copy h2,
.compatibility-page .compat-manufacturer-models__head h2 {
    margin: 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-size: clamp(26px, 3.4vw, 42px) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.24 !important;
}

.compatibility-page .compat-manufacturer-overview__copy p,
.compatibility-page .compat-manufacturer-models__head p,
.compatibility-page .compat-manufacturer-model-card p {
    margin: 0 !important;
    color: var(--oc-text, #1F2933) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.82 !important;
}

.compatibility-page .compat-manufacturer-overview__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 4px !important;
}

.compatibility-page .compat-manufacturer-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: 1px solid rgba(220, 237, 234, 0.95) !important;
    border-radius: 24px !important;
    background: rgba(220, 237, 234, 0.95) !important;
    box-shadow: 0 18px 46px rgba(16, 32, 34, 0.07) !important;
}

.compatibility-page .compat-manufacturer-stats div {
    display: grid !important;
    align-content: center !important;
    min-height: 116px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    padding: 18px !important;
}

.compatibility-page .compat-manufacturer-stats dt {
    margin: 0 0 6px !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
}

.compatibility-page .compat-manufacturer-stats dd {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    margin: 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-size: clamp(26px, 4vw, 38px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.compatibility-page .compat-manufacturer-stats dd span {
    color: var(--oc-muted, #667085) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.compatibility-page .compat-manufacturer-models__head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.compatibility-page .compat-manufacturer-models__head > div {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.compatibility-page .compat-manufacturer-models__head > a {
    display: inline-flex !important;
    min-height: 40px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--oc-primary-200, #BDEDEA) !important;
    border-radius: 999px !important;
    background: #F7FBFA !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.compatibility-page .compat-manufacturer-model-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.compatibility-page .compat-manufacturer-model-card {
    display: grid !important;
    min-width: 0 !important;
    min-height: 246px !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
    border: 1px solid rgba(220, 237, 234, 0.95) !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    color: var(--oc-ink, #102022) !important;
    padding: 18px !important;
    text-decoration: none !important;
    box-shadow: 0 12px 30px rgba(16, 32, 34, 0.06) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

.compatibility-page .compat-manufacturer-model-card:hover,
.compatibility-page .compat-manufacturer-model-card:focus-visible {
    border-color: var(--oc-primary, #179C99) !important;
    box-shadow: 0 18px 42px rgba(16, 32, 34, 0.1) !important;
    transform: translateY(-2px) !important;
}

.compatibility-page .compat-manufacturer-model-card:focus-visible {
    outline: 3px solid rgba(23, 156, 153, 0.22) !important;
    outline-offset: 3px !important;
}

.compatibility-page .compat-manufacturer-model-card__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.compatibility-page .compat-manufacturer-model-card__top span {
    color: var(--oc-primary-700, #0B5F5C) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-manufacturer-model-card__top b {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 999px !important;
    background: #F7FBFA !important;
    color: var(--oc-muted, #667085) !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.compatibility-page .compat-manufacturer-model-card--ok .compat-manufacturer-model-card__top b {
    border-color: rgba(23, 156, 153, 0.28) !important;
    background: #E9F8F6 !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
}

.compatibility-page .compat-manufacturer-model-card--conditional .compat-manufacturer-model-card__top b {
    border-color: rgba(180, 126, 0, 0.22) !important;
    background: #FFF8E7 !important;
    color: #8A5A00 !important;
}

.compatibility-page .compat-manufacturer-model-card--ng .compat-manufacturer-model-card__top b {
    border-color: rgba(176, 0, 32, 0.18) !important;
    background: #FFF1F3 !important;
    color: #9F1239 !important;
}

.compatibility-page .compat-manufacturer-model-card h3 {
    margin: 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-size: clamp(21px, 2.3vw, 30px) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
}

.compatibility-page .compat-manufacturer-model-card p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

.compatibility-page .compat-manufacturer-model-card dl {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

.compatibility-page .compat-manufacturer-model-card dl div {
    min-width: 0 !important;
    border: 1px solid #DCEDEA !important;
    border-radius: 14px !important;
    background: #F7FBFA !important;
    padding: 9px 10px !important;
}

.compatibility-page .compat-manufacturer-model-card dt {
    margin: 0 0 3px !important;
    color: var(--oc-primary-700, #0B5F5C) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
}

.compatibility-page .compat-manufacturer-model-card dd {
    margin: 0 !important;
    color: var(--oc-ink, #102022) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.compatibility-page .compat-manufacturer-model-card > strong {
    display: inline-flex !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--oc-primary, #179C99) !important;
    color: #FFFFFF !important;
    padding: 8px 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.compatibility-page .compat-entity-hero-media {
    position: relative !important;
    display: block !important;
    width: min(100%, 470px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(189, 237, 234, 0.86) !important;
    border-radius: 28px !important;
    background: #FFFFFF !important;
    box-shadow: 0 24px 60px rgba(16, 32, 34, 0.16) !important;
}

.compatibility-page .compat-entity-hero-media img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    object-fit: cover !important;
}

.compatibility-page .compat-entity-hero-media figcaption {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    max-width: calc(100% - 28px) !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--oc-ink, #102022) !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    backdrop-filter: blur(10px) !important;
}

@media (max-width: 980px) {
    .compatibility-page .compat-seo-guide__inner,
    .compatibility-page .compat-manufacturer-overview__inner {
        grid-template-columns: 1fr !important;
    }

    .compatibility-page .compat-manufacturer-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .compatibility-page .compat-seo-guide,
    .compatibility-page .compat-manufacturer-overview,
    .compatibility-page .compat-manufacturer-models {
        padding: 24px 0 !important;
    }

    .compatibility-page .compat-seo-guide__inner,
    .compatibility-page .compat-manufacturer-overview__inner,
    .compatibility-page .compat-manufacturer-models__inner {
        width: min(100% - 24px, 1180px) !important;
    }

    .compatibility-page .compat-seo-guide__copy h2,
    .compatibility-page .compat-manufacturer-overview__copy h2,
    .compatibility-page .compat-manufacturer-models__head h2 {
        font-size: 24px !important;
    }

    .compatibility-page .compat-seo-guide__copy p,
    .compatibility-page .compat-manufacturer-overview__copy p,
    .compatibility-page .compat-manufacturer-models__head p {
        font-size: 13px !important;
        line-height: 1.72 !important;
    }

    .compatibility-page .compat-seo-guide__actions,
    .compatibility-page .compat-manufacturer-overview__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .compatibility-page .compat-seo-guide__actions .button,
    .compatibility-page .compat-manufacturer-overview__actions .button,
    .compatibility-page .compat-manufacturer-overview__actions .compat-fitment-disclaimer__notice-button {
        width: 100% !important;
        min-height: 42px !important;
    }

    .compatibility-page .compat-seo-guide__panel {
        border-radius: 16px !important;
        padding: 16px !important;
    }

    .compatibility-page .compat-seo-guide__panel dl div {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }

    .compatibility-page .compat-manufacturer-stats div {
        min-height: 86px !important;
        padding: 13px !important;
    }

    .compatibility-page .compat-manufacturer-stats dd {
        font-size: 25px !important;
    }

    .compatibility-page .compat-manufacturer-models__head {
        display: grid !important;
        align-items: start !important;
        gap: 10px !important;
    }

    .compatibility-page .compat-manufacturer-models__head > a {
        width: fit-content !important;
        min-height: 36px !important;
    }

    .compatibility-page .compat-manufacturer-model-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .compatibility-page .compat-manufacturer-model-card {
        min-height: 0 !important;
        gap: 10px !important;
        border-radius: 18px !important;
        padding: 15px !important;
    }

    .compatibility-page .compat-manufacturer-model-card h3 {
        font-size: 22px !important;
    }

    .compatibility-page .compat-manufacturer-model-card p {
        -webkit-line-clamp: 2 !important;
        font-size: 12px !important;
        line-height: 1.62 !important;
    }

    .compatibility-page .compat-entity-hero-media {
        width: 100% !important;
        border-radius: 20px !important;
    }

    .compatibility-page .compat-entity-hero-media img {
        aspect-ratio: 16 / 10 !important;
    }

    .compatibility-page .compat-entity-hero-media figcaption {
        left: 10px !important;
        bottom: 10px !important;
        max-width: calc(100% - 20px) !important;
        font-size: 11px !important;
    }
}

.compatibility-page .vehicle-fitment-products-panel--model {
    max-width: 1120px !important;
    margin-inline: auto !important;
    padding: 18px !important;
}

.compatibility-page .vehicle-fitment-products-grid--model {
    align-items: stretch !important;
}

.compatibility-page .vehicle-fitment-products-grid--model .vehicle-fitment-product-card {
    grid-template-rows: auto minmax(48px, 1fr) auto !important;
}

@media (max-width: 640px) {
    .compatibility-page .vehicle-fitment-products-panel--model {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .compatibility-page .vehicle-fitment-products-grid--model {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .compatibility-page .vehicle-fitment-products-grid--model .vehicle-fitment-product-card {
        gap: 10px !important;
        border-radius: 14px !important;
        padding: 12px !important;
        min-height: 0 !important;
    }
}

/* Sitewide typography refinement
   Keep this block at the end so common text rules win over older page patches. */
:root {
    --oc-type-body: 16px;
    --oc-type-body-mobile: 15.5px;
    --oc-type-small: 13px;
    --oc-type-caption: 12.5px;
    --oc-type-hero: 52px;
    --oc-type-page-title: 44px;
    --oc-type-section-title: 30px;
    --oc-type-card-title: 20px;
    --oc-type-ui: 15px;
    --oc-leading-body: 1.82;
    --oc-leading-compact: 1.62;
    --oc-leading-heading: 1.34;
    --oc-text-measure: 46em;
    --oc-wide-measure: 64em;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    color: var(--oc-text, #1F2933);
    font-family: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--oc-type-body);
    line-height: var(--oc-leading-body);
    letter-spacing: 0 !important;
}

body * {
    letter-spacing: 0 !important;
}

main :where(p, li, dd, summary, small, figcaption, label, input, select, textarea, button, a) {
    line-break: strict;
    overflow-wrap: break-word;
    word-break: normal;
}

main :where(p, li, dd) {
    line-height: var(--oc-leading-body) !important;
}

main :where(small, figcaption, .form-help, .field-error) {
    font-size: var(--oc-type-caption) !important;
    line-height: var(--oc-leading-compact) !important;
}

main :where(h1, h2, h3, h4, h5, h6) {
    color: var(--oc-ink, var(--color-dark));
    line-height: var(--oc-leading-heading) !important;
    line-break: strict;
    overflow-wrap: normal;
    word-break: normal;
    word-break: auto-phrase;
    text-wrap: balance;
}

:where(.page-hero, .product-hero, .compat-hero, .product-list-hero, .finder-hero-refresh, .news-hero, .home-hero) h1 {
    font-size: var(--oc-type-hero) !important;
    line-height: 1.16 !important;
}

:where(.page-hero__lead, .product-hero__lead, .compat-hero__lead, .product-list-hero__copy > p, .finder-hero-refresh__copy > p, .news-hero__content > p, .home-hero__lead) {
    max-width: var(--oc-text-measure) !important;
    font-size: 17px !important;
    line-height: 1.84 !important;
}

:where(.section__header, .product-list-heading, .compat-manufacturer-models__head, .news-category-block__head, .manuals-doc-section__heading, .stores-directory__head) {
    max-width: var(--oc-wide-measure) !important;
}

:where(.section__header h2, .product-list-heading h2, .compat-manufacturer-overview__copy h2, .compat-manufacturer-models__head h2, .news-category-block__head h2, .stores-benefit-copy h2, .contact-intake-copy h2, .contact-phone-band h2, .policy-lead-card h2, .policy-article-section h2, .support-simple-panel__intro h3, .support-restore-panel h3) {
    font-size: var(--oc-type-section-title) !important;
    line-height: 1.36 !important;
}

:where(.section__lead, .section__header > p, .product-list-heading > p, .compat-manufacturer-overview__copy > p, .compat-manufacturer-models__head p, .news-category-block__head p, .stores-benefit-copy > p, .stores-directory__head > p, .contact-intake-copy > p, .policy-lead-card p, .policy-article-section p) {
    max-width: var(--oc-text-measure) !important;
    font-size: var(--oc-type-body) !important;
    line-height: var(--oc-leading-body) !important;
}

:where(.product-card, .product-list-card, .support-card, .news-card, .store-card, .stores-directory-card, .support-flow-card, .support-choice-card, .manuals-category-link, .manuals-doc-item, .finder-option-row, .finder-product-card, .compatibility-manufacturer-link-card, .compat-manufacturer-model-card, .vehicle-fitment-product-card, .phone-triage__result, .contact-route-row, .home-purpose-card, .home-guide-card, .home-featured-product, .home-official-card) {
    text-align: left;
}

:where(.product-card, .product-list-card, .support-card, .news-card, .store-card, .stores-directory-card, .support-flow-card, .support-choice-card, .manuals-category-link, .manuals-doc-item, .finder-option-row, .finder-product-card, .compatibility-manufacturer-link-card, .compat-manufacturer-model-card, .vehicle-fitment-product-card, .phone-triage__result, .contact-route-row, .home-purpose-card, .home-featured-product, .home-official-card) :where(p, li, small, dd) {
    font-size: 15px !important;
    line-height: 1.76 !important;
}

:where(.product-card, .product-list-card, .support-card, .news-card, .store-card, .stores-directory-card, .support-flow-card, .support-choice-card, .manuals-category-link, .manuals-doc-item, .finder-product-card, .compatibility-manufacturer-link-card, .compat-manufacturer-model-card, .vehicle-fitment-product-card, .phone-triage__result, .contact-route-row, .home-purpose-card, .home-featured-product, .home-official-card) :where(h3, h4, strong) {
    line-height: 1.42 !important;
}

:where(.product-card h3, .product-list-card h3, .support-card h3, .news-card h3, .store-card h3, .stores-directory-card h3, .support-flow-card h3, .manuals-doc-item h4, .finder-product-card h3, .compat-manufacturer-model-card h3, .vehicle-fitment-product-card h5, .home-purpose-card h3, .home-featured-product h3) {
    font-size: var(--oc-type-card-title) !important;
}

:where(.product-card p, .product-list-card p, .support-card p, .news-card p, .store-card p, .stores-directory-card__note, .support-flow-card p, .manuals-doc-item p, .finder-product-card__lead, .compat-manufacturer-model-card p, .vehicle-fitment-product-card p, .home-purpose-card p, .home-featured-product p, .home-official-card p) {
    margin-top: 8px !important;
}

:where(.eyebrow, .product-list-eyebrow, .finder-label, .news-label, .contact-label, .policy-label, .product-card__category, .store-card__type, .stores-directory-card__badge, .news-card__meta, .hero-badges span, .product-hero__badges span, .fitment-badge, .phone-triage__eyebrow) {
    font-size: var(--oc-type-caption) !important;
    line-height: 1.45 !important;
}

:where(.button, button.button, .product-list-button, .product-list-card__button, .text-link, .manuals-text-link, .phone-cta__number, .compat-fitment-disclaimer__notice-button, .stores-filter-button, .stores-pagination__button) {
    font-size: var(--oc-type-ui) !important;
    line-height: 1.35 !important;
    text-align: center;
}

:where(input, select, textarea, button) {
    font: inherit;
}

:where(.form-field span, .form-field label, .product-list-field span, .stores-filter-group > span, .phone-triage__choice-number) {
    font-size: var(--oc-type-small) !important;
    line-height: 1.5 !important;
}

:where(.faq-item summary, .support-qa-detail summary, .news-timeline-card summary, .compatibility-maker-card summary) {
    font-size: 16px !important;
    line-height: 1.62 !important;
}

:where(.faq-item p, .support-qa-detail__text p, .news-timeline-card__body p, .phone-triage__dialog p, .phone-triage__dialog li, .support-choice-modal__dialog p, .support-choice-modal__dialog small) {
    font-size: 15.5px !important;
    line-height: 1.82 !important;
}

:where(.cta-panel, .phone-cta, .compatibility-contact-cta, .stores-guidance-band, .company-contact-band, .contact-phone-band) :where(p) {
    max-width: var(--oc-text-measure) !important;
    font-size: 15.5px !important;
    line-height: 1.78 !important;
}

.compatibility-page .compat-fitment-disclaimer p,
.compatibility-page .compat-fitment-disclaimer__points p {
    font-size: 13.5px !important;
    line-height: 1.76 !important;
}

.compatibility-page .compat-fitment-disclaimer__lead > span,
.compatibility-page .compat-fitment-disclaimer__points span {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.compatibility-page .compat-fitment-disclaimer__points strong {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

:where(.site-footer, .site-header, .mega-menu, .mobile-nav, .mobile-fixed-cta) :where(a, p, span, small, strong, summary) {
    line-height: 1.55 !important;
}

:where(.site-footer__lead, .site-footer__bottom p) {
    font-size: 13px !important;
    line-height: 1.7 !important;
}

@media (max-width: 1024px) {
    :root {
        --oc-type-hero: 44px;
        --oc-type-page-title: 38px;
        --oc-type-section-title: 28px;
    }

    :where(.page-hero__lead, .product-hero__lead, .compat-hero__lead, .product-list-hero__copy > p, .finder-hero-refresh__copy > p, .news-hero__content > p, .home-hero__lead) {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --oc-type-hero: 36px;
        --oc-type-page-title: 34px;
        --oc-type-section-title: 25px;
        --oc-type-card-title: 18px;
    }

    body {
        font-size: var(--oc-type-body-mobile);
        line-height: 1.78;
    }

    :where(.section__lead, .section__header > p, .product-list-heading > p, .compat-manufacturer-overview__copy > p, .compat-manufacturer-models__head p, .news-category-block__head p, .stores-benefit-copy > p, .stores-directory__head > p, .contact-intake-copy > p, .policy-lead-card p, .policy-article-section p) {
        font-size: var(--oc-type-body-mobile) !important;
        line-height: 1.78 !important;
    }
}

@media (max-width: 640px) {
    :root {
        --oc-type-hero: 30px;
        --oc-type-page-title: 31px;
        --oc-type-section-title: 23px;
        --oc-type-card-title: 17px;
        --oc-type-ui: 14.5px;
    }

    :where(.page-hero, .product-hero, .compat-hero, .product-list-hero, .finder-hero-refresh, .news-hero, .home-hero) h1 {
        line-height: 1.2 !important;
        text-wrap: pretty;
    }

    :where(.page-hero__lead, .product-hero__lead, .compat-hero__lead, .product-list-hero__copy > p, .finder-hero-refresh__copy > p, .news-hero__content > p, .home-hero__lead) {
        font-size: 15.5px !important;
        line-height: 1.78 !important;
    }

    :where(.product-card, .product-list-card, .support-card, .news-card, .store-card, .stores-directory-card, .support-flow-card, .support-choice-card, .manuals-category-link, .manuals-doc-item, .finder-option-row, .finder-product-card, .compatibility-manufacturer-link-card, .compat-manufacturer-model-card, .vehicle-fitment-product-card, .phone-triage__result, .contact-route-row, .home-purpose-card, .home-featured-product, .home-official-card) :where(p, li, small, dd) {
        font-size: 14.5px !important;
        line-height: 1.72 !important;
    }

    :where(.button, button.button, .product-list-button, .product-list-card__button, .text-link, .manuals-text-link, .phone-cta__number, .compat-fitment-disclaimer__notice-button, .stores-filter-button, .stores-pagination__button) {
        white-space: nowrap !important;
    }
}

/* Japanese line-break correction
   Keep short Japanese labels together; reserve aggressive wrapping for tokens. */
main :where(h1, h2, h3, h4, h5, h6,
    .section__header h2,
    .product-list-heading h2,
    .product-list-card h3,
    .product-card h3,
    .support-card h3,
    .support-flow-card h3,
    .support-choice-card h3,
    .manuals-category-link strong,
    .manuals-doc-item h4,
    .manuals-product-item h3,
    .finder-product-card h3,
    .compatibility-manufacturer-link-card strong,
    .compat-manufacturer-model-card h3,
    .vehicle-fitment-product-card h5,
    .store-card h3,
    .stores-directory-card h3,
    .news-card h3,
    .home-purpose-card h3,
    .home-guide-card h3,
    .home-featured-product h3,
    .cta-panel h2,
    .phone-cta h2,
    .compatibility-contact-cta h2,
    .phone-triage__dialog h2,
    .support-choice-modal__dialog h2) {
    line-break: strict !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    word-break: auto-phrase !important;
    text-wrap: balance;
}

:where(.button,
    button.button,
    .product-list-button,
    .product-list-card__button,
    .text-link,
    .manuals-text-link,
    .phone-cta__number,
    .compat-fitment-disclaimer__notice-button,
    .stores-filter-button,
    .stores-pagination__button,
    .site-nav > a,
    .site-nav > .mega-menu > summary,
    .site-footer__links a,
    .mobile-nav__panel nav a,
    .mobile-fixed-cta__label,
    .mobile-fixed-cta__note,
    .mega-menu__item strong,
    .mega-menu__item span,
    .mega-menu__preview-copy strong,
    .hero-badges span,
    .product-hero__badges span,
    .fitment-badge,
    .finder-label,
    .product-list-eyebrow,
    .news-label,
    .contact-label,
    .policy-label) {
    max-width: 100%;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.mega-menu__item,
.mega-menu__item small,
.mega-menu__preview-copy p {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

main :where(p, li, dd, summary, small, figcaption, label) {
    line-break: strict !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

main :where(code, pre, kbd, samp, .oc-break-token, [data-break-token]) {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

@media (max-width: 430px) {
    :root {
        --oc-type-hero: 28px;
        --oc-type-page-title: 29px;
        --oc-type-section-title: 22px;
    }

    :where(.page-hero, .product-hero, .compat-hero, .product-list-hero, .finder-hero-refresh, .news-hero, .home-hero) h1 {
        line-height: 1.24 !important;
    }
}

@media (max-width: 390px) {
    :root {
        --oc-type-hero: 27px;
        --oc-type-page-title: 28px;
        --oc-type-section-title: 21px;
    }
}

@media (max-width: 430px) {
    .manuals-page .page-hero h1,
    .support-page--faq .page-hero h1,
    .stores-page .page-hero h1 {
        white-space: nowrap !important;
    }
}

.manuals-page .page-hero h1 {
    max-width: min(100%, 12em) !important;
    white-space: nowrap !important;
}

/* Final Japanese line QA fixes
   Prevent old high-specificity page rules from reintroducing awkward breaks. */
.compatibility-page :where(
    .compatibility-manufacturer-link-card h3,
    .compatibility-maker-card summary h3,
    .compat-manufacturer-model-card h3,
    .compat-nav-maker-panels h3,
    .vehicle-fitment-product-card h5,
    .support-category-card h3
) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    word-break: auto-phrase !important;
}

.compatibility-page .compatibility-maker-card summary h3,
.compatibility-page .compatibility-manufacturer-link-card h3,
.compatibility-page .compat-manufacturer-model-card h3,
.compatibility-page .fitment-simple-card__header h3,
.compatibility-page .vehicle-fitment-year-card__head > div:first-child > h4,
.compatibility-page .vehicle-fitment-product-card h5,
.compatibility-page .compatibility-support-links .support-card h3 {
    overflow-wrap: normal !important;
    word-break: normal !important;
    word-break: auto-phrase !important;
}

.compatibility-page .compatibility-fitment-row strong,
.compatibility-page .compatibility-fitment-row small,
.compatibility-page .compat-search__flow strong,
.compatibility-page .compat-search__flow small,
.compatibility-page .compat-search__selection strong,
.compatibility-page .compatibility-result-preview b,
.compatibility-page .nav-fitment-condition-panel .vehicle-fitment-year-card__meta strong,
.compatibility-page .compatibility-support-links .support-card p {
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.compatibility-manufacturer-link-card__name {
    display: grid !important;
    gap: 3px !important;
    align-content: start !important;
}

.compatibility-manufacturer-link-card__name > span,
.compatibility-manufacturer-link-card__name > small {
    display: block !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.compatibility-manufacturer-link-card__name > span {
    font-size: inherit !important;
    line-height: 1.18 !important;
}

.compatibility-manufacturer-link-card__name > small {
    margin: 0 !important;
    color: var(--oc-muted, #667085) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

@media (max-width: 430px) {
    main :where(
        h2,
        .section__header h2,
        .product-list-heading h2,
        .compat-manufacturer-overview__copy h2,
        .compat-manufacturer-models__head h2,
        .news-category-block__head h2,
        .stores-benefit-copy h2,
        .contact-intake-copy h2,
        .contact-phone-band h2,
        .policy-lead-card h2,
        .policy-article-section h2
    ) {
        font-size: clamp(20px, 5.45vw, 22px) !important;
        line-height: 1.34 !important;
    }

    .compatibility-page .compatibility-manufacturer-link-card h3 {
        font-size: 15px !important;
        line-height: 1.22 !important;
    }

    .compatibility-manufacturer-link-card__name > small {
        font-size: 10.5px !important;
    }
}

@media (max-width: 760px) {
    .phone-triage__header h2 {
        font-size: clamp(18px, 4.9vw, 21px) !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    .phone-triage__choices,
    .phone-triage__choices--compact,
    .phone-triage__choices--topics,
    .phone-triage__choices--sources {
        grid-template-columns: 1fr !important;
    }

    .phone-triage__choices--topics button:nth-child(3) {
        grid-column: auto !important;
        min-height: 0 !important;
    }

    .phone-triage__choices button {
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        min-height: 0 !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        padding: 10px 12px !important;
    }

    .phone-triage__choice-number {
        grid-row: 1 / span 2 !important;
    }

    .phone-triage__choices button strong,
    .phone-triage__choices button small {
        min-width: 0 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .phone-triage__choices button strong {
        white-space: nowrap !important;
    }

    .phone-triage__choices button small {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: initial !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 760px) {
    .dealer-page .contact-layout--wide,
    .media-page .contact-layout--wide,
    .dealer-page .dealer-contact-layout,
    .media-page .media-contact-layout,
    .dealer-page .form-grid,
    .media-page .form-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .dealer-page .dealer-contact-form,
    .media-page .media-contact-form,
    .dealer-page .form-field,
    .media-page .form-field,
    .dealer-page .form-field input,
    .dealer-page .form-field select,
    .dealer-page .form-field textarea,
    .media-page .form-field input,
    .media-page .form-field select,
    .media-page .form-field textarea {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}