/* ========================================================== */
/* SMARTREPAIR — XBOX MODEL SELECTOR                  */
/* Internal-page visual system                              */
/* ========================================================== */

body {
    background: #1b1b1d;
}

.xbox-section-shell {
    width: min(calc(100% - clamp(48px, 6vw, 140px)), 1760px);
    margin: 0 auto;
}

.xbox-section-eyebrow {
    display: block;
    margin-bottom: 17px;
    font-family: 'Dosis', sans-serif;
    font-size: clamp(10px, .62vw, 12px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    color: rgba(198,166,103,.86);
}

.xbox-section-title {
    margin: 0;
    font-family: 'Roboto Serif', Georgia, serif;
    font-optical-sizing: auto;
    font-stretch: 90%;
    font-size: clamp(30px, 2.25vw, 43px);
    font-weight: 350;
    line-height: 1.14;
    letter-spacing: -.03em;
    color: #ebe7df;
    text-wrap: balance;
}

.xbox-section-lead {
    max-width: 720px;
    margin: 20px 0 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: clamp(15px, .9vw, 17px);
    font-weight: 400;
    line-height: 1.68;
    color: rgba(190,188,184,.76);
    text-wrap: pretty;
}

/* ========================================================== */
/* HERO                                                       */
/* ========================================================== */

.xbox-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #19191b;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.xbox-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.46'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    mix-blend-mode: soft-light;
    opacity: .02;
}

.xbox-hero__container {
    position: relative;
    z-index: 1;
    width: min(calc(100% - clamp(48px, 6vw, 140px)), 1760px);
    min-height: clamp(410px, 32vw, 500px);
    margin: 0 auto;
    padding: clamp(56px, 4.6vw, 76px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(390px, .72fr);
    align-items: center;
    gap: clamp(58px, 6.5vw, 126px);
}

.xbox-hero__copy {
    min-width: 0;
    max-width: 870px;
}

.xbox-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: 'Dosis', sans-serif;
    font-size: clamp(11px, .7vw, 13px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    color: rgba(198,166,103,.90);
}

.xbox-hero__title {
    max-width: 860px;
    margin: clamp(19px, 1.7vw, 25px) 0 0;
    font-family: 'Roboto Serif', Georgia, serif;
    font-optical-sizing: auto;
    font-stretch: 90%;
    font-size: clamp(36px, 2.8vw, 52px);
    font-weight: 350;
    line-height: 1.18;
    letter-spacing: -.031em;
    text-wrap: balance;
    color: #eeeae3;
}

.xbox-hero__lead {
    max-width: 720px;
    margin: clamp(22px, 1.8vw, 28px) 0 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: clamp(16px, .92vw, 18px);
    font-weight: 400;
    line-height: 1.68;
    color: #bab9b7;
    text-wrap: pretty;
}

.xbox-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 12px;
    margin-top: clamp(28px, 2.3vw, 36px);
    font-family: 'Dosis', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .115em;
    color: rgba(199,198,195,.66);
}

.xbox-hero__meta-line {
    width: 34px;
    height: 1px;
    background: rgba(198,166,103,.64);
}

.xbox-hero__visual {
    position: relative;
    justify-self: end;
    min-width: 0;
    width: min(100%, 650px);
    aspect-ratio: 1.3 / 1;
    display: grid;
    place-items: center;
}

.xbox-hero__frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.xbox-hero__frame::before {
    content: '';
    position: absolute;
    inset: 7% 3% 9%;
    border: 1px solid rgba(255,255,255,.042);
    pointer-events: none;
}

.xbox-hero__image {
    position: relative;
    z-index: 2;
    width: min(96%, 580px);
    max-height: 430px;
    object-fit: contain;
    transform: translate(2%, 4%);
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.23));
}

.xbox-hero__guide {
    position: absolute;
    z-index: 1;
    background: rgba(116,118,122,.16);
    pointer-events: none;
}

.xbox-hero__guide--h {
    left: 9%;
    right: 9%;
    top: 50%;
    height: 1px;
}

.xbox-hero__guide--v {
    top: 13%;
    bottom: 13%;
    left: 50%;
    width: 1px;
}

.xbox-hero__corner {
    position: absolute;
    z-index: 3;
    width: 52px;
    height: 52px;
    pointer-events: none;
}

.xbox-hero__corner--tl {
    top: 7%;
    left: 3%;
    border-top: 1px solid rgba(198,166,103,.62);
    border-left: 1px solid rgba(198,166,103,.62);
}

.xbox-hero__corner--br {
    right: 3%;
    bottom: 9%;
    border-right: 1px solid rgba(198,166,103,.42);
    border-bottom: 1px solid rgba(198,166,103,.42);
}

.xbox-hero__caption {
    position: absolute;
    z-index: 3;
    right: 5%;
    bottom: 4%;
    font-family: 'Dosis', sans-serif;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    color: rgba(151,150,148,.45);
}

/* ========================================================== */
/* IMPORTANT INFORMATION                                      */
/* ========================================================== */

.xbox-support {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #1e1e20 0%, #1b1b1d 100%);
    border-bottom: 1px solid rgba(255,255,255,.045);
    padding: clamp(82px, 6.5vw, 118px) 0 clamp(88px, 7vw, 126px);
}

.xbox-support__heading {
    max-width: 790px;
}

.xbox-support__panel {
    margin-top: clamp(20px, 2.5vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.064);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,.007));
}

.xbox-support__panel-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 26px;
    border-bottom: 1px solid rgba(255,255,255,.046);
    font-family: 'Dosis', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .17em;
    color: rgba(198,166,103,.60);
}

.xbox-support__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xbox-support__item {
    position: relative;
    min-width: 0;
    min-height: 156px;
    padding: 23px 28px 22px;
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-content: start;
    gap: 13px;
    border-right: 1px solid rgba(255,255,255,.046);
    background: linear-gradient(180deg, rgba(255,255,255,.006), transparent 74%);
    transition: background-color .24s ease;
}

.xbox-support__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, rgba(198,166,103,.76), rgba(198,166,103,.12), transparent);
    transform-origin: left center;
    transform: scaleX(.48);
    transition: transform .28s ease;
}

.xbox-support__item:last-child {
    border-right: 0;
}

.xbox-support__item:hover {
    background: rgba(255,255,255,.012);
}

.xbox-support__item:hover::before {
    transform: scaleX(1);
}

.xbox-support__item-mark {
    position: relative;
    padding-top: 2px;
    font-family: 'Dosis', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .09em;
    color: rgba(198,166,103,.74);
}


.xbox-support__item-copy h3 {
    margin: 0;
    font-family: 'Dosis', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .082em;
    text-transform: uppercase;
    color: #e1ddd7;
    transition: color .24s ease;
}

.xbox-support__item:hover .xbox-support__item-copy h3 {
    color: #e9e2d5;
}

.xbox-support__item-copy p {
    margin: 11px 0 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.56;
    color: rgba(196,194,190,.82);
}

/* ========================================================== */
/* MODEL SELECTOR                                             */
/* ========================================================== */

.xbox-selector {
    position: relative;
    background: #19191b;
    padding: clamp(86px, 7vw, 126px) 0 clamp(92px, 7.5vw, 138px);
}

.xbox-selector__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
    align-items: center;
    gap: clamp(36px, 5vw, 92px);
}

.xbox-selector__heading .xbox-section-lead {
    margin: 24px 0 0;
    justify-self: end;
}

.xbox-selector__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: clamp(18px, 1.8vw, 28px);
    margin-top: clamp(48px, 4.5vw, 76px);
}

.xbox-model-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-width: 0;
    min-height: 408px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.068);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.007));
    color: inherit;
    text-decoration: none;
    transition: transform .35s ease, box-shadow .35s ease, border-color .28s ease, background-color .28s ease;
}


.xbox-model-card::before {
    content: '';
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: 92px;
    height: 1px;
    background: linear-gradient(90deg, rgba(198,166,103,.82), rgba(198,166,103,.16) 72%, transparent);
    transform-origin: left center;
    transform: scaleX(.56);
    transition: transform .36s cubic-bezier(.22,1,.36,1);
}

.xbox-model-card::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: -150%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.12) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}

.xbox-model-card:hover::after,
.xbox-model-card:focus-visible::after {
    left: 120%;
}

.xbox-model-card:hover,
.xbox-model-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(198,166,103,.28);
    background: linear-gradient(180deg, rgba(198,166,103,.020), rgba(255,255,255,.008));
    box-shadow: 0 10px 18px rgba(0,0,0,.45);
}

.xbox-model-card:hover::before,
.xbox-model-card:focus-visible::before {
    transform: scaleX(1);
}

.xbox-model-card:focus-visible {
    outline: 1px solid rgba(198,166,103,.82);
    outline-offset: 4px;
}

.xbox-model-card__index {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: 21px;
    font-family: 'Dosis', sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .12em;
    color: rgba(151,150,148,.42);
}

.xbox-model-card__visual {
    position: relative;
    z-index: 1;
    height: 278px;
    display: grid;
    place-items: end center;
    padding: 26px 24px 12px;
    border-bottom: 1px solid rgba(255,255,255,.045);
    background: rgba(255,255,255,.004);
}

.xbox-model-card__visual::before {
    display: none;
}

.xbox-model-card__image {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: 94%;
    height: min(246px, 19vw);
    min-height: 190px;
    object-fit: contain;
    transform: translateY(2px);
    transition: transform .34s cubic-bezier(.22,1,.36,1), filter .28s ease;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.18));
}

.xbox-model-card:hover .xbox-model-card__image,
.xbox-model-card:focus-visible .xbox-model-card__image {
    transform: translateY(2px) scale(1.018);
    filter: drop-shadow(0 8px 8px rgba(0,0,0,.20));
}

.xbox-model-card__body {
    position: relative;
    z-index: 1;
    min-height: 130px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 21px 26px 23px;
    background: rgba(0,0,0,.026);
}

.xbox-model-card__family {
    font-family: 'Dosis', sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    color: rgba(198,166,103,.70);
}

.xbox-model-card__body h3 {
    margin: 7px 0 0;
    font-family: 'Roboto Serif', Georgia, serif;
    font-optical-sizing: auto;
    font-stretch: 90%;
    font-size: clamp(21px, 1.3vw, 26px);
    font-weight: 350;
    line-height: 1.16;
    letter-spacing: -.02em;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'lnum' 1, 'pnum' 1;
    color: #e7e2da;
    text-wrap: balance;
    transition: color .24s ease;
}

.xbox-model-card:hover .xbox-model-card__body h3,
.xbox-model-card:focus-visible .xbox-model-card__body h3 {
    color: #f0ebe2;
}

.xbox-model-card__action {
    margin-top: auto;
    padding-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: 'Dosis', sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .13em;
    color: rgba(204,202,198,.72);
    transition: color .24s ease;
}

.xbox-model-card__action svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: rgba(198,166,103,.88);
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    transition: transform .25s ease;
}

.xbox-model-card:hover .xbox-model-card__action,
.xbox-model-card:focus-visible .xbox-model-card__action {
    color: #e0dbd3;
}

.xbox-model-card:hover .xbox-model-card__action svg,
.xbox-model-card:focus-visible .xbox-model-card__action svg {
    transform: translateX(3px);
}

/* ========================================================== */
/* CLOSING ACTION                                             */
/* ========================================================== */

.xbox-selector__next {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    align-items: stretch;
    gap: clamp(34px, 4vw, 72px);
    margin-top: clamp(48px, 5vw, 78px);
    padding: clamp(34px, 3.2vw, 52px) clamp(32px, 3.5vw, 58px);
    border: 1px solid rgba(255,255,255,.082);
    border-radius: 4px;
    background:
        linear-gradient(110deg, rgba(198,166,103,.016), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.019), rgba(255,255,255,.008));
}

.xbox-selector__next::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(198,166,103,.72), rgba(198,166,103,.12) 72%, transparent);
}

.xbox-selector__next-copy {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 720px;
}

.xbox-selector__next-eyebrow {
    display: block;
    margin-bottom: 15px;
    font-family: 'Dosis', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    color: rgba(198,166,103,.82);
}

.xbox-selector__next-copy h3 {
    max-width: 17ch;
    margin: 0;
    font-family: 'Roboto Serif', Georgia, serif;
    font-optical-sizing: auto;
    font-stretch: 90%;
    font-size: clamp(28px, 2.25vw, 42px);
    font-weight: 350;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: #ebe7df;
    text-wrap: balance;
}

.xbox-selector__next-copy p {
    max-width: 620px;
    margin: 16px 0 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(190,188,184,.78);
}

/* CTA button geometry and interaction are provided by
   styles/smartrepair-actions.css. Keep this page responsible
   only for the surrounding Xbox CTA panel. */

/* ========================================================== */
/* RESPONSIVE                                                 */
/* ========================================================== */

@media (max-width: 1279px) {
    .xbox-hero__container {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .66fr);
        gap: clamp(44px, 5vw, 76px);
    }
}

@media (max-width: 1180px) {
    .xbox-support__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xbox-support__item:nth-child(2) {
        border-right: 0;
    }

    .xbox-support__item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.046);
    }

    .xbox-selector__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .xbox-model-card__visual {
        height: 252px;
    }

    .xbox-model-card__image {
        height: 216px;
        min-height: 0;
    }
}

@media (max-width: 900px) {
    .xbox-hero__container {
        width: min(calc(100% - 48px), 760px);
        min-height: 0;
        padding: 58px 0 66px;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .xbox-hero__copy {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .xbox-hero__title,
    .xbox-hero__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .xbox-hero__meta {
        justify-content: center;
    }

    .xbox-hero__visual {
        justify-self: center;
        width: min(100%, 570px);
    }

    .xbox-hero__image {
        width: min(92%, 520px);
        max-height: 400px;
        transform: translate(1%, 3%);
    }

    .xbox-selector__heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .xbox-selector__heading .xbox-section-lead {
        justify-self: start;
        margin: 0;
    }
}

@media (max-width: 820px) {
    .xbox-selector__next {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 680px) {
    .xbox-section-shell {
        width: calc(100% - 40px);
    }

    .xbox-support {
        padding: 68px 0 76px;
    }

    .xbox-support__panel-head {
        padding: 0 20px;
    }

    .xbox-support__items {
        grid-template-columns: 1fr;
    }

    .xbox-support__item,
    .xbox-support__item:nth-child(2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.046);
    }

    .xbox-support__item:last-child {
        border-bottom: 0;
    }

    .xbox-selector {
        padding: 72px 0 86px;
    }

    .xbox-selector__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .xbox-model-card {
        width: 100%;
        min-height: 0;
    }

    .xbox-model-card__visual {
        height: 244px;
    }

    .xbox-model-card__image {
        height: 208px;
        max-width: 90%;
    }

    .xbox-model-card__body {
        min-height: 126px;
    }
}

@media (max-width: 520px) {
    .xbox-hero__container {
        width: calc(100% - 36px);
        padding: 48px 0 56px;
        gap: 32px;
    }

    .xbox-hero__title {
        font-size: clamp(31px, 9vw, 38px);
        line-height: 1.18;
    }

    .xbox-hero__lead {
        font-size: 16px;
    }

    .xbox-hero__meta {
        gap: 8px 9px;
        font-size: 9px;
    }

    .xbox-hero__visual {
        width: min(100%, 450px);
    }

    .xbox-hero__image {
        width: 95%;
        max-height: none;
        transform: translateY(1%);
    }

    .xbox-hero__caption {
        display: none;
    }

    .xbox-section-shell {
        width: calc(100% - 32px);
    }

    .xbox-section-title {
        font-size: clamp(28px, 8.4vw, 34px);
    }

    .xbox-support__panel {
        margin-top: 28px;
    }

    .xbox-support__panel-head {
        min-height: 34px;
        padding: 0 18px;
        font-size: 8px;
    }

    .xbox-support__item {
        padding: 22px 20px 21px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 12px;
        align-content: center;
    }

    .xbox-support__item-copy p {
        font-size: 14px;
        line-height: 1.55;
    }

    .xbox-model-card__visual {
        height: 220px;
        padding: 22px 20px 10px;
    }

    .xbox-model-card__image {
        height: 184px;
    }

    .xbox-model-card__body {
        padding: 21px 22px 22px;
    }

    .xbox-selector__next {
        margin-top: 42px;
        padding: 31px 24px 30px;
    }

    .xbox-selector__next-copy h3 {
        max-width: none;
        font-size: clamp(27px, 8vw, 34px);
    }
}

@media (hover: none), (pointer: coarse) {
    .xbox-support__item:hover {
        background: linear-gradient(180deg, rgba(255,255,255,.006), transparent 74%);
    }

    .xbox-support__item:hover::before {
        transform: scaleX(.48);
    }

    .xbox-support__item:hover .xbox-support__item-copy h3 {
        color: #e1ddd7;
    }

    .xbox-model-card:hover {
        transform: none;
        box-shadow: none;
        border-color: rgba(255,255,255,.068);
        background: linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.007));
    }

    .xbox-model-card:hover::after {
        left: -150%;
    }

    .xbox-model-card:hover::before {
        transform: scaleX(.56);
    }

    .xbox-model-card:hover .xbox-model-card__image {
        transform: translateY(2px);
        filter: drop-shadow(0 6px 6px rgba(0,0,0,.18));
    }

    .xbox-model-card:hover .xbox-model-card__body h3 {
        color: #e7e2da;
    }

    .xbox-model-card:hover .xbox-model-card__action {
        color: rgba(204,202,198,.72);
    }

    .xbox-model-card:hover .xbox-model-card__action svg {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xbox-model-card,
    .xbox-model-card::before,
    .xbox-model-card::after,
    .xbox-model-card__image,
    .xbox-model-card__action,
    .xbox-model-card__action svg,
    .xbox-support__item,
    .xbox-support__item::before,
    .xbox-support__item-copy h3 {
        transition: none !important;
    }
}

@media (min-width: 2200px) {
    .xbox-hero__container,
    .xbox-section-shell {
        max-width: 1840px;
    }

    .xbox-model-card {
        min-height: 430px;
    }

    .xbox-model-card__visual {
        height: 290px;
    }

    .xbox-model-card__image {
        height: 254px;
    }
}


/* ========================================================== */
/* XBOX HERO PASS — SMOKED TITANIUM + STEEL BLUE — 2026-10-04 */
/* Hero/header only. Remaining sections keep their current     */
/* geometry until their individual redesign passes.            */
/* ========================================================== */

@font-face {
    font-family: 'Xbox Adobe Clean Regular';
    src: url('../fonts/AdobeClean-Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* Header parity with the completed SMARTREPAIR pages. */
.site-header {
    background: rgba(37, 43, 48, .982);
    border-bottom-color: rgba(222, 227, 230, .075);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .20),
        0 1px 2px rgba(0, 0, 0, .26);
}

.brand-smart { color: #a4b9c8; }
.brand-repair { color: #efeee9; }

.site-nav__link {
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .050em;
    color: rgba(205, 208, 204, .78);
}

.site-nav__link:hover,
.site-nav__link.current { color: #efeee9; }

.site-nav__link::before,
.site-nav__link::after,
.site-nav__active-dot { background: #7b96ad; }

.site-nav__link:focus-visible { color: #f0f0ec; }
.menu-button span { background: rgba(239, 238, 233, .83); }

@media (max-width: 1279px) {
    [data-mobile-overlay] .header-container { background: rgba(37, 43, 48, .992); }

    [data-mobile-overlay] .menu-button:hover,
    [data-mobile-overlay] .menu-button.open {
        background: rgba(123, 150, 173, .105);
        box-shadow: inset 0 0 0 1px rgba(161, 182, 197, .22);
    }

    [data-mobile-overlay] .menu-button.open span { background: #a1b6c5; }
    [data-mobile-overlay] .menu-button:focus-visible { outline-color: #a1b6c5; }

    [data-mobile-overlay] .mobile-menu-backdrop {
        background: rgba(21, 25, 29, .68);
        backdrop-filter: blur(6px);
    }

    [data-mobile-overlay] .mobile-menu {
        background: linear-gradient(155deg, #394147, #2b3237 72%);
        border-color: rgba(222, 227, 230, .105);
        box-shadow: 0 22px 62px rgba(9, 12, 15, .33);
    }

    [data-mobile-overlay] .mobile-menu__nav a {
        font-family: 'Barlow Semi Condensed', Arial, sans-serif;
        font-weight: 400;
        letter-spacing: .050em;
        color: #cdd0cc;
    }

    [data-mobile-overlay] .mobile-menu__nav a:hover {
        color: #efeee9;
        background: rgba(161, 182, 197, .062);
    }

    [data-mobile-overlay] .mobile-menu__nav a.current {
        color: #c6d5df;
        background: linear-gradient(90deg, rgba(123, 150, 173, .17), rgba(123, 150, 173, .04));
    }

    [data-mobile-overlay] .mobile-menu__nav a.current::before { background: #7b96ad; }

    [data-mobile-overlay] .mobile-menu__nav a:focus-visible {
        outline-color: rgba(161, 182, 197, .72);
        color: #d5dfe5;
        background: rgba(123, 150, 173, .09);
    }
}

.xbox-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #2f363b 0%, #2c3237 49%, #292f34 100%);
    border-bottom: 1px solid rgba(222, 227, 230, .070);
}

.xbox-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.52'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    mix-blend-mode: soft-light;
    opacity: .014;
}

.xbox-hero__container {
    position: relative;
    z-index: 1;
    width: min(calc(100% - clamp(48px, 6vw, 140px)), 1760px);
    min-height: clamp(450px, 33vw, 550px);
    margin: 0 auto;
    padding: clamp(68px, 5.35vw, 90px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(390px, .78fr);
    align-items: center;
    gap: clamp(62px, 6.8vw, 132px);
}

.xbox-hero__copy {
    min-width: 0;
    max-width: 910px;
}

.xbox-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: clamp(12px, .72vw, 13px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .105em;
    color: #a1b6c5;
}

.xbox-hero__eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    flex: 0 0 26px;
    background: #7b96ad;
}

.xbox-hero__title {
    max-width: 860px;
    margin: 24px 0 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-optical-sizing: auto;
    font-stretch: normal;
    font-size: clamp(40px, 3.35vw, 58px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -.025em;
    text-wrap: balance;
    color: #efeee9;
}

.xbox-hero__lead {
    max-width: 740px;
    margin: 26px 0 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: clamp(15.5px, .98vw, 17px);
    font-weight: 400;
    line-height: 1.68;
    letter-spacing: .002em;
    color: #c3c7c5;
    text-wrap: pretty;
}

.xbox-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: clamp(29px, 2.35vw, 37px);
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .095em;
    color: rgba(205, 208, 204, .62);
}

.xbox-hero__meta-line {
    width: 28px;
    height: 1px;
    background: rgba(161, 182, 197, .44);
}

.xbox-hero__visual {
    position: relative;
    justify-self: end;
    min-width: 0;
    width: min(100%, 680px);
    aspect-ratio: 1.3 / 1;
    display: grid;
    place-items: center;
    transform: translateY(3px);
}

.xbox-hero__frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.xbox-hero__frame::before,
.xbox-hero__frame::after {
    content: none !important;
    display: none !important;
}

.xbox-hero__image {
    position: relative;
    z-index: 1;
    inset: auto;
    display: block;
    width: min(100%, 620px);
    height: auto;
    max-width: 100%;
    max-height: 440px;
    object-fit: contain;
    object-position: center center;
    transform: none;
    filter: drop-shadow(0 6px 5px rgba(5, 8, 10, .24));
}

/* Detached legacy registration marks/caption are retired in the new hero. */
.xbox-hero__guide,
.xbox-hero__corner,
.xbox-hero__caption { display: none !important; }

/* Adobe Clean Light is not used on selector pages. */
.xbox-section-lead,
.xbox-support__item-copy p,
.xbox-selector__next-copy p {
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-weight: 400;
}

@media (max-width: 1279px) {
    .xbox-hero__container {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .68fr);
        gap: clamp(48px, 5vw, 80px);
    }

    .xbox-hero__visual { width: min(100%, 600px); }
}

@media (max-width: 900px) {
    .xbox-hero__container {
        width: min(calc(100% - 48px), 900px);
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 62px 0 66px;
    }

    .xbox-hero__copy {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .xbox-hero__eyebrow,
    .xbox-hero__meta { justify-content: center; }

    .xbox-hero__title,
    .xbox-hero__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .xbox-hero__title {
        max-width: 720px;
        font-size: clamp(34px, 5.2vw, 44px);
        line-height: 1.18;
    }

    .xbox-hero__lead { max-width: 660px; }
    .xbox-hero__visual { display: none; }
}

@media (max-width: 767px) {
    .xbox-hero__container {
        width: calc(100% - 40px);
        padding: 54px 0 58px;
    }

    .xbox-hero__title {
        max-width: 650px;
        font-size: clamp(30px, 6.4vw, 38px);
        line-height: 1.20;
    }

    .xbox-hero__lead {
        max-width: 610px;
        font-size: 16px;
        line-height: 1.64;
    }

    .xbox-hero__meta {
        margin-top: 25px;
        gap: 8px 10px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .xbox-hero__container {
        width: calc(100% - 28px);
        padding: 48px 0 52px;
    }

    .xbox-hero__title {
        margin-top: 20px;
        font-size: 29px;
        line-height: 1.22;
    }

    .xbox-hero__lead {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.62;
    }

    .xbox-hero__meta {
        margin-top: 22px;
        font-size: 9.5px;
        letter-spacing: .085em;
    }
}

@media (max-width: 360px) {
    .xbox-hero__container {
        width: calc(100% - 24px);
        padding: 44px 0 48px;
    }

    .xbox-hero__title { font-size: 27px; }

    .xbox-hero__lead {
        font-size: 14px;
        line-height: 1.60;
    }

    .xbox-hero__meta-line { display: none; }
}

@media (min-width: 2560px) {
    .xbox-hero__container {
        width: min(calc(100% - 120px), 2100px);
        max-width: none;
        min-height: 590px;
        gap: clamp(110px, 7vw, 170px);
    }

    .xbox-hero__copy { max-width: 1030px; }
    .xbox-hero__title { max-width: 980px; font-size: 62px; }
    .xbox-hero__lead { max-width: 780px; font-size: 18px; }
    .xbox-hero__visual { width: min(100%, 760px); }
}

/* ========================================================== */
/* SITE-WIDE EYEBROW CLEANUP — NO DECORATIVE LEADING DASH     */
/* ========================================================== */
.xbox-hero__eyebrow::before {
    content: none !important;
    display: none !important;
}

/* Keep the Xbox hero artwork visible at every viewport. */
@media (max-width: 900px) {
    .xbox-hero__container {
        gap: 30px;
    }

    .xbox-hero__visual {
        display: grid !important;
        justify-self: center;
        width: min(100%, 560px);
        margin-top: 4px;
        transform: none;
    }

    .xbox-hero__image {
        width: min(94%, 520px);
        max-height: 380px;
        transform: none;
    }
}

@media (max-width: 767px) {
    .xbox-hero__visual {
        width: min(100%, 500px);
        margin-top: 2px;
    }

    .xbox-hero__image {
        width: min(94%, 460px);
        max-height: 330px;
    }
}

@media (max-width: 480px) {
    .xbox-hero__container {
        gap: 24px;
    }

    .xbox-hero__visual {
        width: 100%;
        margin-top: 0;
    }

    .xbox-hero__image {
        width: 94%;
        max-height: 280px;
    }
}


/* ========================================================== */
/* XBOX REPAIR — IMPORTANT INFORMATION / TITANIUM BOARD       */
/* ========================================================== */

.xbox-support {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(92px, 7vw, 126px) 0 clamp(100px, 7.5vw, 136px);
    background: linear-gradient(180deg, #30373d 0%, #2d3439 50%, #2b3136 100%);
    border-bottom: 0;
}

.xbox-support::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, rgba(255,255,255,.016) 0%, transparent 30%, transparent 72%, rgba(0,0,0,.040) 100%);
}

.xbox-support .xbox-section-shell {
    position: relative;
    z-index: 1;
}

.xbox-support__heading {
    max-width: 810px;
    margin-bottom: clamp(46px, 4.4vw, 66px);
}

.xbox-support .xbox-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .13em;
    color: #a1b6c5;
}

.xbox-support .xbox-section-eyebrow::before {
    content: none !important;
    display: none !important;
}

.xbox-support .xbox-section-title {
    max-width: 780px;
    margin-top: 20px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(34px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.027em;
    color: #efeee9;
}

.xbox-support .xbox-section-lead {
    max-width: 710px;
    margin-top: 19px;
    font-family: 'AdobeClean-Regular', Arial, sans-serif;
    font-size: clamp(16px, .92vw, 18px);
    font-weight: 400;
    line-height: 1.68;
    color: #cdd0cc;
}

.xbox-support__panel {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    border: 1px solid rgba(255,255,255,.072);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(255,255,255,.022) 0%, rgba(255,255,255,.008) 48%, rgba(0,0,0,.018) 100%), #343b41;
    box-shadow:
        0 6px 10px -5px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.xbox-support__panel::before {
    content: none;
    display: none;
}

.xbox-support__panel-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 0 clamp(28px, 2.4vw, 42px);
    border-bottom: 1px solid rgba(255,255,255,.052);
    background: rgba(18,22,25,.15);
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .13em;
    color: #a1b6c5;
}

.xbox-support__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xbox-support__item {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: clamp(220px, 14vw, 258px);
    padding: clamp(34px, 2.8vw, 46px) clamp(26px, 2.4vw, 40px) clamp(30px, 2.5vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.050);
    background: transparent;
    transition: background-color 300ms ease, box-shadow 300ms ease;
}

.xbox-support__item:last-child {
    border-right: 0;
}

.xbox-support__item::before {
    content: none;
    display: none;
}

.xbox-support__item::after {
    content: '';
    position: absolute;
    top: -42%;
    left: -62%;
    width: 28%;
    height: 190%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.010) 28%, rgba(255,255,255,.070) 48%, rgba(255,255,255,.014) 66%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 900ms cubic-bezier(.22, 1, .36, 1);
}

.xbox-support__item:hover,
.xbox-support__item:focus-within {
    background: rgba(255,255,255,.015);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.016);
}

.xbox-support__item:hover::after,
.xbox-support__item:focus-within::after {
    left: 138%;
}

.xbox-support__item-mark {
    position: relative;
    z-index: 2;
    padding-top: 0;
    margin: 0 0 27px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(38px, 2.7vw, 54px);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.042em;
    color: #efeee9;
}

.xbox-support__item-copy {
    position: relative;
    z-index: 2;
}

.xbox-support__item-copy h3 {
    margin: 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: clamp(18px, 1vw, 20px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .015em;
    text-transform: none;
    color: #e7e8e5;
    transition: none;
}

.xbox-support__item:hover .xbox-support__item-copy h3,
.xbox-support__item:focus-within .xbox-support__item-copy h3 {
    color: #e7e8e5;
}

.xbox-support__item-copy p {
    margin: 10px 0 0;
    font-family: 'AdobeClean-Regular', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.54;
    color: #a5aaa8;
}

@media (max-width: 1180px) {
    .xbox-support__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xbox-support__item {
        min-height: 220px;
    }

    .xbox-support__item:nth-child(2) {
        border-right: 0;
    }

    .xbox-support__item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.050);
    }
}

@media (max-width: 820px) {
    .xbox-support {
        padding: 78px 0 86px;
    }

    .xbox-support__heading {
        margin-bottom: 42px;
    }

    .xbox-support__panel-head {
        min-height: 0;
        padding: 17px 28px;
    }
}

@media (max-width: 680px) {
    .xbox-support {
        padding: 68px 0 74px;
    }

    .xbox-support__heading {
        margin-bottom: 34px;
    }

    .xbox-support .xbox-section-eyebrow {
        gap: 0;
        font-size: 11px;
    }

    .xbox-support .xbox-section-title {
        margin-top: 17px;
        font-size: clamp(29px, 8vw, 35px);
    }

    .xbox-support .xbox-section-lead {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.64;
    }

    .xbox-support__panel-head {
        padding: 16px 22px;
    }

    .xbox-support__items {
        grid-template-columns: 1fr;
    }

    .xbox-support__item,
    .xbox-support__item:nth-child(2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.050);
        padding: 30px 24px 28px;
    }

    .xbox-support__item:last-child {
        border-bottom: 0;
    }

    .xbox-support__item-mark {
        margin-bottom: 20px;
        font-size: 38px;
    }
}

@media (max-width: 360px) {
    .xbox-support__panel-head {
        padding-left: 18px;
        padding-right: 18px;
    }

    .xbox-support__item,
    .xbox-support__item:nth-child(2) {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (hover: none), (pointer: coarse) {
    .xbox-support__item:hover {
        background: transparent;
        box-shadow: none;
    }

    .xbox-support__item:hover::after {
        left: -62%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xbox-support__item,
    .xbox-support__item::after {
        transition: none !important;
    }
}

/* ========================================================== */
/* XBOX REPAIR — MODEL SELECTOR / TITANIUM CARDS — 2026-10-04 */
/* ========================================================== */

.xbox-selector {
    position: relative;
    isolation: isolate;
    padding: clamp(92px, 7.2vw, 132px) 0 clamp(100px, 7.8vw, 142px);
    background: linear-gradient(180deg, #2b3136 0%, #292f34 100%);
}

.xbox-selector::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, rgba(255,255,255,.012) 0%, transparent 30%, transparent 74%, rgba(0,0,0,.035) 100%);
}

.xbox-selector .xbox-section-shell {
    position: relative;
    z-index: 1;
}

.xbox-selector__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
    align-items: end;
    gap: clamp(40px, 5vw, 92px);
}

.xbox-selector .xbox-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .13em;
    color: #a1b6c5;
}

.xbox-selector .xbox-section-eyebrow::before {
    content: none !important;
    display: none !important;
}

.xbox-selector .xbox-section-title {
    max-width: 790px;
    margin-top: 20px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(34px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.027em;
    color: #efeee9;
}

.xbox-selector__heading .xbox-section-lead {
    max-width: 620px;
    margin: 0;
    justify-self: end;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: clamp(16px, .92vw, 18px);
    font-weight: 400;
    line-height: 1.68;
    color: #cdd0cc;
}

.xbox-selector__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: clamp(18px, 1.55vw, 26px);
    margin-top: clamp(52px, 4.8vw, 78px);
}

.xbox-model-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    min-height: clamp(410px, 25vw, 460px);
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.072);
    border-radius: 4px;
    background: linear-gradient(180deg, #343b40 0%, #30363b 100%);
    box-shadow:
        0 5px 9px -5px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 320ms ease;
}

/* No decorative top hairline on cards. */
.xbox-model-card::before,
.xbox-model-card:hover::before,
.xbox-model-card:focus-visible::before {
    content: none !important;
    display: none !important;
}

.xbox-model-card::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: -38%;
    left: -72%;
    width: 30%;
    height: 184%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.010) 28%, rgba(255,255,255,.080) 49%, rgba(255,255,255,.016) 67%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 900ms cubic-bezier(.22,1,.36,1);
}

.xbox-model-card:hover,
.xbox-model-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(123,150,173,.34);
    background: linear-gradient(180deg, #363d43 0%, #31383d 100%);
    box-shadow:
        0 8px 13px -6px rgba(0,0,0,.58),
        inset 0 1px 0 rgba(255,255,255,.032);
}

.xbox-model-card:hover::after,
.xbox-model-card:focus-visible::after {
    left: 142%;
}

.xbox-model-card:focus-visible {
    outline: 1px solid rgba(123,150,173,.85);
    outline-offset: 4px;
}

.xbox-model-card__index {
    position: absolute;
    z-index: 5;
    top: 22px;
    right: 23px;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .13em;
    color: rgba(161,182,197,.58);
}

.xbox-model-card__visual {
    position: relative;
    z-index: 1;
    height: clamp(270px, 17.2vw, 306px);
    display: grid;
    place-items: end center;
    padding: 28px 24px 14px;
    border-bottom: 1px solid rgba(255,255,255,.052);
    background: rgba(0,0,0,.025);
}

.xbox-model-card__visual::before {
    display: none;
}

.xbox-model-card__image {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: 94%;
    height: min(252px, 15.7vw);
    min-height: 196px;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transform: translateY(2px);
    transform-origin: center bottom;
    transition: transform 500ms cubic-bezier(.22,1,.36,1);
}

.xbox-model-card:hover .xbox-model-card__image,
.xbox-model-card:focus-visible .xbox-model-card__image {
    transform: translateY(0) scale(1.022);
    filter: none;
}

.xbox-model-card__body {
    position: relative;
    z-index: 2;
    min-height: 142px;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 23px 27px 25px;
    background: rgba(0,0,0,.035);
}

.xbox-model-card__family {
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .13em;
    color: #a1b6c5;
}

.xbox-model-card__body h3 {
    margin: 8px 0 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: clamp(23px, 1.45vw, 28px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: .018em;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'lnum' 1, 'pnum' 1;
    color: #efeee9;
    text-wrap: balance;
    transition: color 240ms ease;
}

.xbox-model-card:hover .xbox-model-card__body h3,
.xbox-model-card:focus-visible .xbox-model-card__body h3 {
    color: #f5f4f0;
}

.xbox-model-card__action {
    margin-top: auto;
    padding-top: 19px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    color: #cdd0cc;
    transition: color 240ms ease;
}

.xbox-model-card__action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #748DA3;
    stroke-width: 1.55;
    stroke-linecap: square;
    stroke-linejoin: miter;
    transition: transform 280ms cubic-bezier(.22,1,.36,1), stroke 240ms ease;
}

.xbox-model-card:hover .xbox-model-card__action,
.xbox-model-card:focus-visible .xbox-model-card__action {
    color: #efeee9;
}

.xbox-model-card:hover .xbox-model-card__action svg,
.xbox-model-card:focus-visible .xbox-model-card__action svg {
    transform: translateX(4px);
    stroke: #a1b6c5;
}

@media (max-width: 900px) {
    .xbox-selector__heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .xbox-selector__heading .xbox-section-lead {
        justify-self: start;
        max-width: 680px;
    }
}

@media (max-width: 680px) {
    .xbox-selector {
        padding: 72px 0 86px;
    }

    .xbox-selector .xbox-section-eyebrow {
        gap: 0;
        font-size: 11px;
    }

    .xbox-selector .xbox-section-title {
        margin-top: 17px;
        font-size: clamp(29px, 8vw, 35px);
    }

    .xbox-selector__heading .xbox-section-lead {
        font-size: 15px;
        line-height: 1.64;
    }

    .xbox-selector__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .xbox-model-card {
        width: 100%;
        min-height: 0;
    }

    .xbox-model-card__visual {
        height: 252px;
        padding: 24px 20px 12px;
    }

    .xbox-model-card__image {
        height: 214px;
        max-width: 91%;
        min-height: 0;
    }

    .xbox-model-card__body {
        min-height: 132px;
        padding: 22px 23px 24px;
    }
}

@media (max-width: 420px) {
    .xbox-model-card__visual {
        height: 224px;
    }

    .xbox-model-card__image {
        height: 188px;
    }

    .xbox-model-card__body h3 {
        font-size: 23px;
    }
}

@media (min-width: 2560px) {
    .xbox-selector {
        padding-top: 132px;
        padding-bottom: 152px;
    }

    .xbox-selector .xbox-section-title {
        font-size: 52px;
    }

    .xbox-selector__heading .xbox-section-lead {
        max-width: 690px;
        font-size: 19px;
    }

    .xbox-model-card {
        min-height: 480px;
    }

    .xbox-model-card__visual {
        height: 324px;
    }

    .xbox-model-card__image {
        height: 282px;
    }
}

@media (hover: none), (pointer: coarse) {
    .xbox-model-card:hover {
        transform: none;
        border-color: rgba(255,255,255,.072);
        background: linear-gradient(180deg, #343b40 0%, #30363b 100%);
        box-shadow:
            0 5px 9px -5px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.025);
    }

    .xbox-model-card:hover::after {
        left: -72%;
    }

    .xbox-model-card:hover .xbox-model-card__image {
        transform: translateY(2px);
        filter: none;
    }

    .xbox-model-card:hover .xbox-model-card__body h3 {
        color: #efeee9;
    }

    .xbox-model-card:hover .xbox-model-card__action {
        color: #cdd0cc;
    }

    .xbox-model-card:hover .xbox-model-card__action svg {
        transform: none;
        stroke: #748DA3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xbox-model-card,
    .xbox-model-card::after,
    .xbox-model-card__image,
    .xbox-model-card__body h3,
    .xbox-model-card__action,
    .xbox-model-card__action svg {
        transition: none !important;
    }
}

/* ========================================================== */
/* XBOX CLOSING CTA — FINISHED SITE SYSTEM — 2026-10-04      */
/* ========================================================== */

.xbox-selector__next {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: center;
    gap: clamp(42px, 5vw, 86px);
    margin-top: clamp(62px, 5.5vw, 88px);
    padding: clamp(40px, 3.8vw, 58px) clamp(38px, 4vw, 66px);
    border: 1px solid rgba(222, 227, 230, .095);
    border-radius: 5px;
    background: linear-gradient(180deg, #32393f 0%, #30373d 100%);
    box-shadow:
        0 6px 10px -5px rgba(0, 0, 0, .52),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

/* Retire the legacy coloured side rail. */
.xbox-selector__next::before {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.xbox-selector__next-copy {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 760px;
}

.xbox-selector__next-eyebrow {
    display: block;
    margin: 0 0 18px;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .145em;
    color: #a1b6c5;
}

.xbox-selector__next-eyebrow::before {
    content: none !important;
    display: none !important;
}

.xbox-selector__next-copy h3 {
    max-width: 680px;
    margin: 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(32px, 2.45vw, 46px);
    font-weight: 400;
    line-height: 1.10;
    letter-spacing: -.028em;
    color: #efeee9;
    text-wrap: balance;
}

.xbox-selector__next-copy p {
    max-width: 660px;
    margin: 18px 0 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: clamp(15.5px, .9vw, 17px);
    font-weight: 400;
    line-height: 1.66;
    color: #cdd0cc;
    text-wrap: pretty;
}

.xbox-selector__next .smartrepair-actions {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-self: center;
}

.xbox-selector__next .smartrepair-action {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 0;
    display: grid;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(161, 182, 197, .26);
    border-radius: 3px;
    background: rgba(18, 22, 25, .18);
    color: #e5e7e4;
    text-decoration: none;
    transform: none;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    transition:
        border-color 260ms ease,
        background-color 260ms ease,
        transform 280ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 280ms ease;
}

.xbox-selector__next .smartrepair-action--forward {
    grid-template-columns: minmax(0, 1fr) 54px;
    background: rgba(116, 141, 163, .12);
    border-color: rgba(116, 141, 163, .38);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .22),
        0 1px 2px rgba(0, 0, 0, .28);
}

.xbox-selector__next .smartrepair-action--back {
    grid-template-columns: 54px minmax(0, 1fr);
    background: rgba(18, 22, 25, .12);
    border-color: rgba(222, 227, 230, .105);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .18),
        0 1px 2px rgba(0, 0, 0, .24);
}

.xbox-selector__next .smartrepair-action > span {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: .095em;
    color: inherit;
}

.xbox-selector__next .smartrepair-action svg {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 100%;
    padding: 17px;
    fill: none;
    stroke: #a1b6c5;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        transform 300ms cubic-bezier(.22, 1, .36, 1),
        background-color 260ms ease,
        stroke 260ms ease;
}

.xbox-selector__next .smartrepair-action--forward svg {
    border-left: 1px solid rgba(161, 182, 197, .18);
    background: rgba(116, 141, 163, .08);
}

.xbox-selector__next .smartrepair-action--back svg {
    border-right: 1px solid rgba(222, 227, 230, .075);
    background: rgba(18, 22, 25, .10);
}

.xbox-selector__next .smartrepair-action::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -60%;
    left: -58%;
    width: 34%;
    height: 220%;
    pointer-events: none;
    background: linear-gradient(
        108deg,
        transparent 0%,
        rgba(239, 238, 233, .016) 23%,
        rgba(239, 238, 233, .10) 36%,
        rgba(239, 238, 233, .25) 47%,
        rgba(239, 238, 233, .34) 50%,
        rgba(239, 238, 233, .25) 53%,
        rgba(239, 238, 233, .10) 64%,
        rgba(239, 238, 233, .016) 77%,
        transparent 100%
    );
    transform: skewX(-14deg);
    transition: left 520ms cubic-bezier(.22, 1, .36, 1);
}

.xbox-selector__next .smartrepair-action::after {
    content: none !important;
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .xbox-selector__next .smartrepair-action:hover,
    .xbox-selector__next .smartrepair-action:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(161, 182, 197, .52);
        background: rgba(116, 141, 163, .16);
        box-shadow: 0 7px 14px -5px rgba(0, 0, 0, .48);
        color: #efeee9;
    }

    .xbox-selector__next .smartrepair-action:hover::before,
    .xbox-selector__next .smartrepair-action:focus-visible::before {
        left: 128%;
    }

    .xbox-selector__next .smartrepair-action--forward:hover svg,
    .xbox-selector__next .smartrepair-action--forward:focus-visible svg {
        transform: translateX(2px);
        background: rgba(116, 141, 163, .14);
        stroke: #c3d1db;
    }

    .xbox-selector__next .smartrepair-action--back:hover svg,
    .xbox-selector__next .smartrepair-action--back:focus-visible svg {
        transform: translateX(-2px);
        background: rgba(116, 141, 163, .08);
        stroke: #c3d1db;
    }
}

.xbox-selector__next .smartrepair-action:focus-visible {
    outline: 1px solid rgba(161, 182, 197, .78);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .xbox-selector__next {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 38px 36px;
    }

    .xbox-selector__next-copy { max-width: 720px; }
    .xbox-selector__next .smartrepair-actions { max-width: 440px; }
}

@media (max-width: 560px) {
    .xbox-selector__next {
        gap: 30px;
        margin-top: 44px;
        padding: 30px 24px;
        border-radius: 4px;
    }

    .xbox-selector__next-eyebrow {
        margin-bottom: 16px;
        font-size: 10.5px;
    }

    .xbox-selector__next-copy h3 {
        max-width: none;
        font-size: clamp(29px, 8vw, 35px);
        line-height: 1.14;
    }

    .xbox-selector__next-copy p {
        margin-top: 15px;
        font-size: 15px;
        line-height: 1.62;
    }

    .xbox-selector__next .smartrepair-action { min-height: 52px; }
    .xbox-selector__next .smartrepair-action--forward { grid-template-columns: minmax(0, 1fr) 50px; }
    .xbox-selector__next .smartrepair-action--back { grid-template-columns: 50px minmax(0, 1fr); }

    .xbox-selector__next .smartrepair-action > span {
        padding: 0 16px;
        font-size: 10.5px;
        letter-spacing: .085em;
    }

    .xbox-selector__next .smartrepair-action svg {
        width: 50px;
        padding: 16px;
    }
}

@media (max-width: 360px) {
    .xbox-selector__next { padding: 27px 20px; }

    .xbox-selector__next .smartrepair-action > span {
        padding-left: 13px;
        padding-right: 13px;
        font-size: 10px;
        letter-spacing: .07em;
    }
}

@media (min-width: 2560px) {
    .xbox-selector__next {
        grid-template-columns: minmax(0, 1fr) 430px;
        gap: 100px;
        margin-top: 92px;
        padding: 66px 76px;
    }

    .xbox-selector__next-eyebrow { font-size: 12px; }
    .xbox-selector__next-copy h3 { font-size: 50px; }

    .xbox-selector__next-copy p {
        max-width: 720px;
        font-size: 18px;
    }

    .xbox-selector__next .smartrepair-action { min-height: 58px; }
    .xbox-selector__next .smartrepair-action > span { font-size: 12px; }
}

@media (hover: none), (pointer: coarse) {
    .xbox-selector__next .smartrepair-action::before { display: none; }
    .xbox-selector__next .smartrepair-action:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .xbox-selector__next .smartrepair-action,
    .xbox-selector__next .smartrepair-action::before,
    .xbox-selector__next .smartrepair-action svg {
        transition: none !important;
        transform: none !important;
    }
}


/* ========================================================== */
/* XBOX — FLAT SECTION MATERIAL / NO BACKGROUND REFLECTIONS    */
/* ========================================================== */
/* Remove broad decorative light washes; keep local card sweep interactions. */
.xbox-support::before,
.xbox-selector::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

.xbox-support__panel {
    background: #343b41;
}

/* ========================================================== */
/* FOOTER — FINISHED SITE PARITY                              */
/* ========================================================== */
.site-footer {
    background: linear-gradient(180deg, #24292e 0%, #22272c 100%);
    border-top: 1px solid rgba(222, 227, 230, .085);
    box-shadow: none;
}

.site-footer .site-footer__main {
    grid-template-columns:
        minmax(250px, 1.28fr)
        minmax(160px, .88fr)
        minmax(170px, .92fr)
        minmax(220px, 1fr);
    align-items: start;
    gap: clamp(36px, 4.2vw, 76px);
    padding: clamp(72px, 6vw, 98px) 0 clamp(62px, 5vw, 82px);
}

.site-footer .site-footer__brand {
    grid-column: auto;
    max-width: 350px;
    margin: 0;
    justify-self: start;
    text-align: left;
}

.site-footer .site-footer__logo {
    font-size: clamp(29px, 1.75vw, 33px);
    line-height: 1;
    letter-spacing: 1.1px;
}

.site-footer .site-footer__logo-smart { color: #9aaebd; }
.site-footer .site-footer__logo-repair { color: #ecebe7; }

.site-footer .site-footer__description {
    max-width: 34ch;
    margin: 24px 0 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: .002em;
    color: #aeb4b4;
    text-align: left;
}

.site-footer .site-footer__heading {
    position: relative;
    margin: 2px 0 22px;
    padding-bottom: 14px;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .115em;
    color: #cbd0d1;
}

.site-footer .site-footer__heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 1px;
    background: #748da3;
    opacity: .72;
}

.site-footer .site-footer__links {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer .site-footer__links a,
.site-footer .site-footer__phone,
.site-footer .site-footer__email,
.site-footer .site-footer__direct a,
.site-footer .site-footer__location {
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.45;
}

.site-footer .site-footer__links a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 36px;
    padding: 5px 0;
    color: #b9bfbd;
    text-decoration: none;
    transition: color 180ms ease;
}

.site-footer .site-footer__links a:hover,
.site-footer .site-footer__links a[aria-current='page'] { color: #ecebe7; }

.site-footer .site-footer__contact-list { gap: 7px; }
.site-footer .site-footer__location { color: #929a9a; }

.site-footer .site-footer__phone,
.site-footer .site-footer__email {
    width: fit-content;
    color: #c3c7c5;
    text-decoration: none;
    transition: color 180ms ease;
}

.site-footer .site-footer__phone:hover,
.site-footer .site-footer__email:hover { color: #ecebe7; }

.site-footer .site-footer__direct {
    margin-top: 3px;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
}

.site-footer .site-footer__direct a {
    color: #9aaebd;
    text-decoration: none;
    transition: color 180ms ease;
}
.site-footer .site-footer__direct a:hover { color: #c7d6df; }
.site-footer .site-footer__direct span { color: rgba(198, 200, 197, .34); }

.site-footer .site-footer__bottom {
    min-height: 76px;
    padding: 24px 0 27px;
    border-top: 1px solid rgba(222, 227, 230, .10);
}

.site-footer .site-footer__copyright {
    margin: 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .04em;
    color: #929a9a;
    text-align: left;
}

.site-footer .site-footer__credit {
    margin: 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .075em;
    color: rgba(154, 174, 189, .78);
    text-align: right;
    flex-wrap: wrap;
}

.site-footer .site-footer__credit-name {
    color: inherit;
    text-decoration: none;
    transition: color 180ms ease;
}
.site-footer .site-footer__credit-name:hover { color: #c7d6df; text-decoration: none; }
.site-footer .site-footer__credit-name:focus-visible { color: #d7e1e7; }
.site-footer a:focus-visible { outline-color: #a1b6c5; }

/* Approved footer contact hierarchy. */
.site-footer .site-footer__phone {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 40px;
    margin: 0;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .025em;
    color: #ecebe7;
    text-decoration: none;
    transition: color 170ms ease;
}

.site-footer .site-footer__location {
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.65;
    color: #9ea4a3;
}

.site-footer .site-footer__direct {
    display: flex;
    align-items: center;
    gap: 17px;
    margin: 0;
    font-family: inherit;
}
.site-footer .site-footer__direct span { display: none; }
.site-footer .site-footer__direct a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .025em;
    color: #9aaebd;
}

.site-footer .site-footer__email {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 36px;
    margin: 0;
    font-family: 'Xbox Adobe Clean Regular', 'AdobeClean-Regular', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #c0c5c3;
    overflow-wrap: anywhere;
}

@media (max-width: 1199px) {
    .site-footer .site-footer__main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 42px 32px;
    }
    .site-footer .site-footer__brand { grid-column: 1 / -1; max-width: 470px; }
    .site-footer .site-footer__description { max-width: 46ch; }
    .site-footer .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 9px; }
    .site-footer .site-footer__credit { text-align: left; justify-content: flex-start; }
}

@media (max-width: 767px) {
    .site-footer .site-footer__container { width: calc(100% - 40px); }
    .site-footer .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 24px;
        padding: 60px 0 44px;
    }
    .site-footer .site-footer__brand { grid-column: 1 / -1; }
    .site-footer .site-footer__contact {
        grid-column: 1 / -1;
        padding-top: 30px;
        border-top: 1px solid rgba(222, 227, 230, .075);
    }
}

@media (max-width: 680px) {
    .site-footer .site-footer__phone { min-height: 44px; }
}

@media (max-width: 520px) {
    .site-footer .site-footer__main {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 56px 0 40px;
    }
    .site-footer .site-footer__brand,
    .site-footer .site-footer__contact { grid-column: auto; }
    .site-footer .site-footer__contact { padding-top: 32px; }
    .site-footer .site-footer__bottom { padding: 22px 0 24px; }
    .site-footer .site-footer__copyright,
    .site-footer .site-footer__credit { width: 100%; }
}