/* =====================================================================
   CADE Technologies: performance package configurator (packages.html)
   A full-height, manufacturer-style configurator: the car on a stage with
   its upgrade slots, a four-step rail on the right and a build bar along
   the bottom. Prices are private: nothing here shows one until the
   customer adds their details (packages-page.js, /api/quote).
   ===================================================================== */
:root {
    --y: #f5c518; --y-rgb: 245, 197, 24;
    --g: #4ade80; --g-rgb: 74, 222, 128;
    --warn: #ffb066; --red: #ff3b3b;
    --bg: #0a0a0a;
    --line: rgba(255, 255, 255, 0.09); --line2: rgba(255, 255, 255, 0.15); --line3: rgba(255, 255, 255, 0.3);
    --dim: #a8a8a8; --dim2: #8c8c8c;
    --fd: 'Orbitron', sans-serif; --fl: 'Rajdhani', sans-serif; --ft: 'Inter', sans-serif;
    --nav-h: 58px; --bar-h: 80px; --rail-w: clamp(440px, 36vw, 560px); --slots-h: calc(48px + clamp(12px, 2vh, 20px));   /* one row of slot chips (syncSlotsH keeps it exact) */
    --pad: clamp(1.2rem, 2vw, 2rem);
    --ease: cubic-bezier(.22, .8, .24, 1);
    /* type and spacing scale: new rules use only these (the older rules move onto them in a later sweep) */
    --t12: .75rem; --t13: .8125rem; --t14: .875rem; --t16: 1rem; --t18: 1.125rem; --t20: 1.25rem; --t28: 1.75rem;
    --caps: .1em; --r: 4px; --cp: 16px;
    --chamfer: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));   /* the part frames' cut corners */
    /* the tier ramp (packages-page.js tierOf: the stage ladder, never a score), always beside the stage's short name */
    --t-s1: #eef1f4; --t-s2: #f5c518; --t-s2p: #ffa21f; --t-s3: #ff5a36; --t-x: #b4bcc5;
    --slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);   /* the slanted slabs: active tab, Next */
}
/* each tier's colour as --tc on whatever carries data-tier (stage cards, the slam) or an is-<tier> class (plates) */
[data-tier="s1"], .is-s1 { --tc: var(--t-s1); }
[data-tier="s2"], .is-s2 { --tc: var(--t-s2); }
[data-tier="s2p"], .is-s2p { --tc: var(--t-s2p); }
[data-tier="s3"], .is-s3 { --tc: var(--t-s3); }
[data-tier="x"], .is-x { --tc: var(--t-x); }
/* a tier plate: the stage's short name in the tier colour on black (a yellow banner can carry it too) */
.sr-plate { display: inline-grid; place-items: center; flex: none; min-width: 34px; height: 26px; padding: 0 7px; background: #0a0a0a; color: var(--tc, #fff); border-left: 3px solid var(--tc, #fff);
    font-family: var(--fd); font-size: var(--t13); font-weight: 900; letter-spacing: .04em; line-height: 1; white-space: nowrap; transform: skewX(-10deg); }

/* The configurator has its own build bar: the site's phone action bar stays down while it's on screen */
body.sr-on .phone-bar.show { transform: translateY(110%); }
body.sr-page { background: var(--bg); }
.sr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(.sr) button { font: inherit; color: inherit; }
.sr :focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }

/* ---------- Layout ---------- */
.sr { position: relative; margin-top: var(--nav-h); background: var(--bg); scroll-margin-top: var(--nav-h); }
.sr-anchor { position: absolute; top: 0; left: 0; scroll-margin-top: var(--nav-h); }
.sr-app {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    grid-template-rows: minmax(0, 1fr) var(--bar-h);
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    min-height: 580px;
}
/* the neon strip across the top of the configurator: flickers on once when a car is picked (packages-page.js) */
.sr-neon { position: absolute; z-index: 9; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; background: var(--y);
    box-shadow: 0 0 6px rgba(var(--y-rgb), .85), 0 0 18px rgba(var(--y-rgb), .35); }
.sr-neon.is-on { animation: srNeon .8s steps(1, end); }
@keyframes srNeon { 0% { opacity: 0; } 12% { opacity: 1; } 18% { opacity: .15; } 26% { opacity: 1; } 34% { opacity: .35; } 44%, 100% { opacity: 1; } }

/* =====================================================================
   STAGE (the car)
   ===================================================================== */
.sr-stage { position: relative; overflow: hidden; background: #050505; isolation: isolate; grid-row: 1; grid-column: 1; }
.sr-photos { position: absolute; inset: 0; will-change: transform; }
.sr-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ease); transform-origin: 58% 56%; }
.sr-photo.is-on { opacity: 1; animation: srKen 26s ease-in-out infinite alternate; }
@keyframes srKen {
    from { transform: scale(1.03) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.8%, -1.2%, 0); }
}
.sr-stage.is-punch .sr-photos { animation: srPunch .9s var(--ease); }
/* a car without a photo of its own (packages-page.js photoFor 'type'): no photo, its code in outline over the stripes its
   card uses, so no other car stands behind its name */
.sr-type { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-end; padding: 0 clamp(24px, 6vw, 96px) 12%; overflow: hidden; pointer-events: none;
    background: repeating-linear-gradient(135deg, #0d0d0d 0 14px, #121212 14px 28px); }
.sr-stage.is-type .sr-type { display: flex; }
.sr-type.is-long { font-size: clamp(3.5rem, 7vw, 7rem); }
.sr-type { font-family: var(--fd); font-weight: 900; font-size: clamp(5rem, 12vw, 11rem); line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 2px rgba(var(--y-rgb), .4); }
@keyframes srPunch { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }

.sr-vig {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        radial-gradient(130% 95% at 62% 42%, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 100%),
        linear-gradient(0deg, rgba(6,6,6,.97) 0%, rgba(6,6,6,.78) 16%, rgba(6,6,6,.18) 44%, rgba(6,6,6,0) 58%),
        linear-gradient(90deg, rgba(6,6,6,.72) 0%, rgba(6,6,6,.25) 32%, rgba(6,6,6,0) 55%),
        linear-gradient(180deg, rgba(6,6,6,.75) 0%, rgba(6,6,6,0) 20%);
    transition: background .4s;
}
/* fine grid "studio floor" over the lower stage */
.sr-floor {
    position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,.9), transparent);
    mask-image: linear-gradient(0deg, rgba(0,0,0,.9), transparent);
}
/* light sweep when the build changes */
.sr-sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 47%, rgba(var(--y-rgb),.12) 50%, rgba(255,255,255,.06) 53%, transparent 65%);
    background-size: 250% 100%; background-position: 120% 0; }
.sr-sweep.is-go { animation: srSweep 1.1s var(--ease); }
@keyframes srSweep { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }

/* stage chrome */
.sr-stage-top { position: absolute; z-index: 4; top: 0; left: 0; max-width: calc(100% - 160px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(18px, 2.6vh, 28px) clamp(20px, 3vw, 44px); pointer-events: none; }
.sr-h1 { margin: 0; font-family: var(--fd); font-size: var(--t14); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #d8d8d8; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; }
.sr-h1 em { font-style: normal; color: var(--y); font-weight: 600; }
.sr-h1 em::before { content: '//'; content: '//' / ''; margin-right: .6rem; color: rgba(255,255,255,.35); }
.sr-ctr { display: none; }   /* flow.js reads its '/ 04' */
.sr-change { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; cursor: pointer; border-radius: var(--r);
    background: rgba(12,12,12,.6); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #e2e2e2;
    font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; transition: border-color .2s, color .2s; }
.sr-change:hover { border-color: var(--y); color: #fff; }
.sr-change svg { color: var(--y); flex: none; }

/* the level-up slam (packages-page.js flashStage): 1.3s, so it is gone by 1.4s from the click */
.sr-flash { --tc: var(--y); position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-66%); display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; }
.sr-flash small { position: relative; z-index: 1; padding: .3em .8em .25em 1.3em; background: #0a0a0a; font-family: var(--fl); font-size: clamp(.8rem, 1.2vw, 1.05rem); font-weight: 700; letter-spacing: .5em; text-transform: uppercase; color: var(--y);
    transform: skewX(-12deg); box-shadow: 4px 4px 0 rgba(var(--y-rgb), .85); }
.sr-flash b { font-family: var(--fd); font-weight: 900; line-height: .9; font-size: clamp(5.5rem, min(15vw, 22vh), 13rem); color: var(--tc); transform: rotate(-6deg);
    text-shadow: 7px 7px 0 #07080c, 0 0 60px rgba(0,0,0,.55); }
.sr-flash.is-name b { font-size: clamp(2.8rem, 7.5vw, 6.5rem); letter-spacing: .02em; }
.sr-flash > span { margin-top: .6rem; padding: .3em 1em; background: var(--tc); font-family: var(--fl); font-size: clamp(.9rem, 1.3vw, 1.15rem); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #0a0a0a;
    transform: skewX(-12deg) rotate(2deg); box-shadow: 5px 5px 0 #07080c; }
.sr-flash i { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: .9rem; padding: 6px 14px; max-width: 90%; background: #0a0a0a; border-left: 3px solid var(--y);
    font-style: normal; font-family: var(--fl); font-size: var(--t16); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.sr-flash i:empty { display: none; }
.sr-flash::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(70vw, 620px); height: min(70vw, 620px); transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 24%, transparent), transparent 72%); }
.sr-flash.is-go { animation: srSlam 1.3s linear forwards; }
.sr-flash.is-go b { animation: srSlamNum .15s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes srSlam { 0% { opacity: 0; } 4%, 74% { opacity: 1; } 100% { opacity: 0; } }
@keyframes srSlamNum { from { transform: scale(2.2) rotate(0); } to { transform: scale(1) rotate(-6deg); } }
/* the caption steps back while the slam is up (on laptops the tags land on it), and comes back as it fades */
.sr-stage.is-flashing .sr-cap, .sr-stage.is-flashing.is-revving .sr-cap { opacity: 0; transition: opacity .12s; }
.sr-stage.is-flashing .sr-vig { background:
        radial-gradient(130% 95% at 50% 45%, rgba(0,0,0,.35) 20%, rgba(0,0,0,.75) 100%),
        linear-gradient(0deg, rgba(6,6,6,.97) 0%, rgba(6,6,6,.78) 16%, rgba(6,6,6,.18) 44%, rgba(6,6,6,0) 58%),
        linear-gradient(90deg, rgba(6,6,6,.72) 0%, rgba(6,6,6,.25) 32%, rgba(6,6,6,0) 55%),
        linear-gradient(180deg, rgba(6,6,6,.75) 0%, rgba(6,6,6,0) 20%); }

/* the part inset (desktop, packages-page.js inset): a card over the dimmed car, clear of the rail; no push or scale */
.sr-inset { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: 0; background: rgba(0,0,0,.5); transition: opacity .18s; }
.sr-inset:empty { display: none; }
.sr-inset.is-on { opacity: 1; transition-duration: .3s; }
.sr-inset-card { position: absolute; top: 92px; right: clamp(20px, 3vw, 44px); width: clamp(220px, 38%, 400px); background: #0c0c0c; clip-path: var(--chamfer); transform: translateX(48px); transition: transform .5s var(--ease); }
.sr-inset.is-on .sr-inset-card { transform: none; }
.sr-inset-card::before { content: ''; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 4px; background: var(--y); }
.sr-inset-ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0a0a; }
.sr-inset-card.is-light .sr-inset-ph { background: #fff; }
.sr-inset-ph img, .sr-inset-ph .sr-bp, .sr-view-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-inset-card.is-light .sr-inset-ph img { object-fit: contain; }
.sr-inset-ph .sr-bp { display: grid; }
.sr-inset-ph .sr-bp svg { width: 72%; height: auto; overflow: visible; }
.sr-inset.is-on .sr-inset-ph > * { animation: srWipe .6s var(--ease) both; }
.sr-inset-tx { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 14px 18px; border-top: 1px solid var(--line2); }
.sr-inset-tx small { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--y); }
.sr-inset-tx b { font-family: var(--fd); font-size: var(--t18); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.15; }
.sr-inset-tx span { font-family: var(--fl); font-size: var(--t14); font-weight: 600; letter-spacing: .04em; color: #d0d0d0; }
.sr-inset-tx em { font-style: normal; font-family: var(--ft); font-size: var(--t12); line-height: 1.45; color: var(--dim2); }

/* the equip toast: desktop, top-centre over the car (phones: a yellow banner, below). Decorative (aria-hidden) */
.sr-toast { position: absolute; z-index: 8; top: 84px; left: 0; right: var(--rail-w); margin: 0 auto; width: max-content; max-width: min(460px, calc(100% - var(--rail-w) - 32px));
    display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; pointer-events: none; opacity: 0; transform: translateY(-12px);
    background: #0b0b0b; border: 1px solid var(--line2); border-left: 3px solid var(--y); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: opacity .25s, transform .4s var(--ease); }
.sr-toast:empty { display: none; }
.sr-toast.is-on { opacity: 1; transform: none; }
.sr-toast-pic .sr-opt-pic { width: 44px; height: 44px; color: var(--y); border-color: rgba(var(--y-rgb), .45); }
.sr-toast-tx, .sr-sheet-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* the small yellow kicker over a title: the toast, the build sheet */
.sr-toast-tx small, .sr-sheet-t small, .sr-sheet-code small, .sr-sheet-gain small { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--y); }
.sr-toast-tx b { font-family: var(--fd); font-size: var(--t14); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.25; }

/* caption (sits above the upgrade slots) */
/* the box hugs its text (right is only the limit), so it covers no more of the car than the words do */
.sr-cap { position: absolute; z-index: 4; left: clamp(20px, 3vw, 44px); bottom: calc(var(--slots-h) + clamp(12px, 2.2vh, 24px)); right: clamp(20px, 3vw, 44px); width: fit-content; transition: opacity .35s; }
.sr-cap-make { display: flex; align-items: center; gap: .75rem; font-family: var(--fl); font-weight: 700; font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--y); }
.sr-cap-make::before { content: ''; width: 30px; height: 1px; background: var(--y); flex: none; }
.sr-cap-title { margin: .55rem 0 .5rem; font-family: var(--fd); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .04em; line-height: .98;
    font-size: clamp(2rem, 4.4vw, 4.4rem); text-shadow: 0 6px 40px rgba(0,0,0,.55); overflow-wrap: anywhere; }
.sr-cap-title.is-l { font-size: clamp(1.8rem, 3.6vw, 3.5rem); }
.sr-cap-title.is-m { font-size: clamp(1.5rem, 2.9vw, 2.75rem); }
.sr-cap-title.is-in { animation: srRise .8s var(--ease); }
@keyframes srRise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.sr-cap-sub { margin: 0; font-family: var(--fl); font-weight: 500; font-size: var(--t16); letter-spacing: var(--caps); text-transform: uppercase; color: #cfcfcf; }
.sr-cap-sub b { color: #fff; font-weight: 700; }

/* gains HUD */
.sr-hud { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1.6rem; margin-top: 1rem; min-height: 0; }
.sr-hud:empty { display: none; }
.sr-hud-ro { display: flex; flex-direction: column; gap: .1rem; }
.sr-hud-ro small { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: rgba(var(--g-rgb), .75); }
.sr-hud-ro b { font-family: var(--fd); font-size: clamp(1.35rem, 2.3vw, 2.1rem); font-weight: 800; color: var(--g); letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(var(--g-rgb), .25); }
.sr-hud-ro.is-abs small { color: rgba(255,255,255,.6); }
.sr-hud-ro.is-abs b { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.sr-hud-ro.is-abs b u { color: rgba(255,255,255,.75); }
.sr-hud-ro b u { text-decoration: none; font-family: var(--fl); font-size: var(--t16); margin-left: .2em; color: rgba(var(--g-rgb), .85); letter-spacing: 0; }
.sr-hud-txt { font-family: var(--fl); font-size: var(--t18); font-weight: 600; letter-spacing: 0; color: var(--g); display: flex; gap: .5rem; align-items: center; }
.sr-hud-txt.is-dim { color: #bdbdbd; font-weight: 500; }
.sr-hud-note { flex-basis: 100%; max-width: 560px; font-family: var(--ft); font-size: var(--t13); line-height: 1.45; color: #c8c8c8; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.sr-hud-txt svg { flex: none; }

@keyframes srChip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* priced badge */
.sr-priced { position: absolute; z-index: 4; left: 50%; top: clamp(128px, 15vh, 140px); transform: translateX(-50%); display: flex; align-items: center; gap: .6rem;   /* under the Rev cluster and its sound-effects pill */
    font-family: var(--fl); font-weight: 700; font-size: var(--t13); letter-spacing: var(--caps); text-transform: uppercase; color: #0a0a0a; background: var(--y); padding: .5rem 1rem; border-radius: var(--r);
    box-shadow: 0 0 40px rgba(var(--y-rgb), .35); animation: srChip .6s var(--ease); white-space: nowrap; }
.sr-priced[hidden] { display: none; }
.sr-priced-ref { white-space: nowrap; }   /* a wrapped badge breaks before the ref, never inside it */
.sr-priced.is-wait { background: #161616; color: var(--y); border: 1px solid rgba(var(--y-rgb), .5); box-shadow: none; }
.sr-priced.is-warn { background: #1d0f08; color: #ffb066; border: 1px solid #ffb066; box-shadow: none; }

/* shift lights */
.sr-shift { position: absolute; z-index: 5; top: 16px; left: clamp(20px, 3vw, 44px); right: 300px; display: flex; justify-content: center; gap: 5px; opacity: 0; transition: opacity .35s; pointer-events: none; }   /* clear of the Rev cluster, top right, at its 1.25x revving scale */
.sr-stage.is-revving .sr-shift { opacity: 1; }
.sr-stage-top, .sr-priced { transition: opacity .35s; }
.sr-stage.is-revving .sr-stage-top, .sr-stage.is-revving .sr-priced { opacity: 0; }
.sr-shift i { flex: 0 1 clamp(14px, 1.6vw, 22px); min-width: 0; height: 6px; border-radius: var(--r); background: rgba(255,255,255,.12); transition: background .05s, box-shadow .05s; }
.sr-shift i.on-g { background: var(--g); box-shadow: 0 0 10px rgba(var(--g-rgb), .8); }
.sr-shift i.on-y { background: var(--y); box-shadow: 0 0 10px rgba(var(--y-rgb), .8); }
.sr-shift i.on-r { background: var(--red); box-shadow: 0 0 12px rgba(255,59,59,.9); }
.sr-shift i.on-b { background: #4da3ff; box-shadow: 0 0 12px rgba(77,163,255,.9); }
.sr-stage.is-revving .sr-vig { background:
        radial-gradient(130% 95% at 62% 42%, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%),
        linear-gradient(0deg, rgba(6,6,6,.97) 0%, rgba(6,6,6,.78) 16%, rgba(6,6,6,.18) 44%, rgba(6,6,6,0) 58%),
        linear-gradient(90deg, rgba(6,6,6,.8) 0%, rgba(6,6,6,.3) 32%, rgba(6,6,6,0) 55%),
        linear-gradient(180deg, rgba(6,6,6,.8) 0%, rgba(6,6,6,0) 20%); }
.sr-stage.is-revving .sr-cap { opacity: .35; transition: opacity .35s; }
.sr-stage.is-limiter .sr-vig { box-shadow: inset 0 0 160px rgba(255,40,40,.35); }

/* =====================================================================
   REV CLUSTER (tacho overlay)
   ===================================================================== */
.sr-cluster { position: absolute; z-index: 5; top: 16px; right: 18px; display: flex; align-items: center; gap: 6px;
    padding: 4px; background: rgba(10,10,10,.5); border: 1px solid var(--line2); border-radius: 40px;
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); transform-origin: 100% 0;
    transition: transform .55s var(--ease), border-color .4s, box-shadow .4s, background .4s; max-width: calc(100% - 32px); }
.sr-cluster[hidden] { display: none; }
.sr-stage.is-revving .sr-cluster { transform: scale(1.25); border-color: rgba(var(--y-rgb), .55); background: rgba(8,8,8,.7); box-shadow: 0 0 60px rgba(var(--y-rgb), .16); }
.sr-tach { position: relative; width: 44px; height: 44px; flex: none; }
.sr-tach svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sr-tach-read, .sr-tach text { display: none; }   /* the RPM readout and the dial numbers are too small to read at this size; the needle and ticks show the rev */
.sr-cluster-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* dark and outlined, the icon in yellow: part of the look, never a second yellow action beside the step's Next */
.sr-rev { margin: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; padding: 0 1rem; min-height: 44px; border-radius: 40px; cursor: pointer;
    background: rgba(10,10,10,.72); border: 1px solid rgba(var(--y-rgb), .6); color: #fff; font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 0 rgba(var(--y-rgb), .5); transition: box-shadow .3s, transform .2s, border-color .2s; }
.sr-rev svg { color: var(--y); }
.sr-rev:hover { border-color: var(--y); box-shadow: 0 0 26px rgba(var(--y-rgb), .3); }
.sr-rev:active { transform: scale(.97); }
.sr-rev.is-live { border-color: var(--y); animation: srShake .08s linear infinite; }
@keyframes srShake { 0% { transform: translate(0,0); } 50% { transform: translate(.7px,-.5px); } 100% { transform: translate(-.6px,.5px); } }
.sr-rev[disabled] { opacity: .5; cursor: not-allowed; }
.sr-rev-stage { display: none; }   /* the stage is in its aria-label */
/* the sound-effects toggle (opt-in): its own labelled pill under the Rev cluster, right-aligned, so it never reads as a
   Rev it mute. Off: a cross on the speaker and 'Off'; on: waves and 'On' in yellow */
.sr-sfx { position: absolute; top: calc(100% + 8px); right: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 11px; border-radius: 40px; cursor: pointer;
    background: rgba(10,10,10,.85); border: 1px solid var(--line3); color: #b0b0b0; font-family: var(--fl); text-align: left; transition: border-color .2s, color .2s; }
.sr-sfx svg { flex: none; }
.sr-sfx-t { display: flex; flex-direction: column; line-height: 1.15; }
.sr-sfx-t > span:first-child { font-size: var(--t12); font-weight: 600; color: #d4d4d4; white-space: nowrap; }
.sr-sfx-st { font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #fff; }
.sr-sfx:hover { border-color: #fff; color: #fff; }
.sr-sfx[data-on="true"] { border-color: rgba(var(--y-rgb), .6); color: var(--y); }
.sr-sfx[data-on="true"] .sr-sfx-st { color: var(--y); }
.sr-sfx .on, .sr-sfx[data-on="true"] .off, .sr-sfx[hidden] { display: none; }
.sr-sfx[data-on="true"] .on { display: inline; }

/* =====================================================================
   UPGRADE SLOTS: the build ledger. One chip per hardware area the build
   changes or offers (in the stage, an optional add-on, or added); the
   stock ones are summed up as '+N stock' (their buttons stay in the DOM)
   ===================================================================== */
.sr-slotbar { grid-row: 1; grid-column: 1; align-self: end; justify-self: start; max-width: 100%; position: relative; z-index: 5; min-width: 0;
    padding: 0 clamp(16px, 2.4vw, 36px) clamp(12px, 2vh, 20px) clamp(20px, 3vw, 44px); pointer-events: none; }
.sr-slotbar > * { pointer-events: auto; }
.sr-slots { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* two lines: the icon, then the area and its state over the part itself (slotState().sub) */
.sr-slot { position: relative; display: inline-grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; min-width: 0; min-height: 48px; padding: 5px 12px 6px 10px;
    text-align: left; cursor: pointer; overflow: hidden; border-radius: var(--r); white-space: nowrap;
    background: rgba(12,12,12,.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line2); transition: border-color .35s, background .35s, transform .2s; }
.sr-slot.is-stock { display: none; }
.sr-slot:hover { transform: translateY(-2px); border-color: var(--line3); }
.sr-slot b { font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b4b4b4; line-height: 1.1; }
.sr-slot-ic { grid-row: 1 / 3; display: grid; place-items: center; flex: none; color: #626262; transition: color .35s, filter .35s; }
.sr-slot-ic svg { width: 16px; height: 16px; }
.sr-slot em { font-style: normal; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8c8c8c; line-height: 1.1; }
.sr-slot small { grid-column: 2 / 4; max-width: 210px; overflow: hidden; text-overflow: ellipsis; font-family: var(--fl); font-size: var(--t12); font-weight: 600; letter-spacing: .02em; color: #c4c4c4; line-height: 1.15; }
.sr-slot.is-option small { color: #a8a8a8; }
/* '+N stock': the stock areas by name in its title and for screen readers (the sr-only text stays inside it) */
.sr-slot-more { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font-family: var(--fl); font-size: var(--t13); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: #a8a8a8; text-shadow: 0 1px 8px rgba(0,0,0,.8); white-space: nowrap; cursor: default; }
.sr-slot-led { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; transition: background .35s, box-shadow .35s; }
.sr-slot.is-stage { border-color: rgba(var(--y-rgb), .55); background: linear-gradient(180deg, rgba(var(--y-rgb), .15), rgba(12,12,12,.8) 75%); }
.sr-slot.is-stage .sr-slot-ic { color: var(--y); filter: drop-shadow(0 0 6px rgba(var(--y-rgb), .6)); }
.sr-slot.is-stage b { color: #fff; }
.sr-slot.is-stage em { color: var(--y); }
.sr-slot.is-stage .sr-slot-led { background: var(--y); box-shadow: 0 0 10px var(--y); }
.sr-slot.is-option { border-style: dashed; border-color: rgba(255,255,255,.3); }
.sr-slot.is-option .sr-slot-ic { color: #a0a0a0; }
.sr-slot.is-option em { color: #e6e6e6; }
.sr-slot.is-option em::before { content: '+ '; color: var(--y); }
.sr-slot.is-added { border-color: var(--y); box-shadow: inset 0 0 0 1px rgba(var(--y-rgb), .5); }
.sr-slot.is-added .sr-slot-ic { color: var(--y); }
.sr-slot.is-added b { color: #fff; }
.sr-slot.is-added em { color: var(--y); }
.sr-slot.is-added .sr-slot-led { background: repeating-linear-gradient(90deg, var(--y) 0 6px, transparent 6px 10px); }
.sr-slot.is-changed { animation: srInstall .9s var(--ease); }
.sr-slot.is-changed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-100%); animation: srSlotSweep .8s ease forwards; pointer-events: none; }
@keyframes srInstall { 0% { transform: translateY(-6px); } 100% { transform: none; } }
@keyframes srSlotSweep { to { transform: translateX(100%); } }
/* the part or option a slot jumped to */
.is-target { animation: srTarget 1.6s var(--ease); }
@keyframes srTarget { 0%, 35% { box-shadow: 0 0 0 2px var(--y), 0 0 30px rgba(var(--y-rgb), .35); } 100% { box-shadow: 0 0 0 2px rgba(var(--y-rgb), 0); } }

/* =====================================================================
   RAIL
   ===================================================================== */
.sr-rail { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 3;
    background: linear-gradient(180deg, #101010 0%, #0b0b0b 100%); border-left: 1px solid var(--line); }

/* step tabs */
.sr-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); flex: none; background: #0e0e0e; }
.sr-tab { position: relative; isolation: isolate; background: none; border: 0; cursor: pointer; padding: 1rem .2rem .9rem; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    color: #8f8f8f; transition: color .25s; min-height: 64px; }
.sr-tab b { font-family: var(--fd); font-size: var(--t12); font-weight: 700; letter-spacing: .04em; color: #808080; transition: color .25s; display: inline-flex; align-items: center; gap: .3rem; }
.sr-tab span { font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; }
/* the build so far under the tabs: car, stage, add-ons */
.sr-tab-sub { display: block; max-width: 100%; padding: 0 .5rem; font-style: normal; font-family: var(--ft); font-size: var(--t12); font-weight: 400; line-height: 1.3; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-tab[aria-selected="true"] .sr-tab-sub { color: var(--dim); }
.sr-tab:hover { color: #cfcfcf; }
.sr-tab.is-done { color: #a9a9a9; }
.sr-tab.is-done b { color: rgba(var(--y-rgb), .6); }
.sr-tab.is-done b::after { content: ''; width: 9px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); }
/* the active step: a slanted yellow slab with black text (clipped inside the tab, so it never widens the row) */
.sr-tab[aria-selected="true"]::before { content: ''; position: absolute; z-index: -1; inset: 8px 6px; background: var(--y); clip-path: var(--slant); }
.sr-tab[aria-selected="true"], .sr-tab[aria-selected="true"] b, .sr-tab[aria-selected="true"] .sr-tab-sub { color: #0a0a0a; }
.sr-tab[aria-selected="true"] b::after { display: none; }
.sr-tab:focus-visible { outline-offset: -3px; }
.sr-tab[aria-selected="true"]:focus-visible { outline-color: #fff; }
.sr-tabs-fill { position: absolute; left: 0; bottom: -1px; height: 2px; pointer-events: none; background: rgba(var(--y-rgb), .25); transition: width .6s var(--ease); }

/* panels */
.sr-panels { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.sr-panel { padding: 1.6rem var(--pad) 2.4rem; }
.sr-panel[hidden] { display: none; }
.sr-panel.is-in { animation: srPanelIn .5s var(--ease); }
.sr-panel.is-in-back { animation: srPanelBack .5s var(--ease); }
@keyframes srPanelIn { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes srPanelBack { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }

.sr-head { margin-bottom: 1.3rem; }
.sr-kicker { display: block; font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--y); }
.sr-h { margin: .45rem 0 .5rem; font-family: var(--fd); font-size: var(--t20); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.2; outline: none; }
.sr-h > span { display: inline-block; transform: skewX(-7deg); transform-origin: 0 100%; }   /* the heading box stays square */
.sr-sub { margin: 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.65; color: var(--dim); font-weight: 300; }
.sr-lbl { display: block; font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #bdbdbd; margin: 0 0 .7rem; }
.sr-lbl small { font-weight: 600; letter-spacing: 0; color: var(--dim2); text-transform: none; font-size: var(--t13); margin-left: .4rem; }
.sr-sec { margin-top: 1.8rem; }
.sr-sec:first-of-type { margin-top: 0; }
.sr-sec[hidden] { display: none; }

/* =====================================================================
   STEP 01: CAR. The showroom: on this step the car stage folds into a
   banner with the range at a glance, and the rail takes the full width:
   a make filter beside a grid of photo cards. A make only filters the
   cards; a card configures that car (packages-page.js). Phones stack the
   same parts: a band, wrapping make chips and one-line card rows
   ===================================================================== */
:root { --banner-h: clamp(84px, 12vh, 112px); }
.sr-app[data-step="0"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--banner-h) minmax(0, 1fr) var(--bar-h); }
.sr-app[data-step="0"] .sr-stage { grid-row: 1; grid-column: 1; }
.sr-app[data-step="0"] .sr-rail { grid-row: 2; grid-column: 1; border-left: 0; }
.sr-app[data-step="0"] .sr-bar { grid-row: 3; }
/* no car is on show yet: no photo, gains, slots, Rev, flash or price badge (swapPhoto() still keeps the photo ready) */
.sr-app[data-step="0"] :is(.sr-photos, .sr-type, .sr-vig, .sr-floor, .sr-sweep, .sr-shift, .sr-slotbar, .sr-cap, .sr-cluster, .sr-flash, .sr-priced, .sr-change) { display: none; }
.sr-app[data-step="0"] .sr-stage::before, .sr-app[data-step="0"] .sr-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.sr-app[data-step="0"] .sr-stage::before { background: url(images/pkg-poster-workshop.jpg) 50% 50% / cover no-repeat; opacity: .4; }
.sr-app[data-step="0"] .sr-stage::after { background: linear-gradient(90deg, rgba(6,6,6,.92) 0%, rgba(6,6,6,.55) 55%, rgba(6,6,6,.8) 100%); }
.sr-app[data-step="0"] .sr-stage-top { inset: 0; max-width: 1480px; margin: 0 auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(20px, 3vw, 44px); }
/* the banner's H1 is the page title; 'Configurator' on its own line under it */
.sr-app[data-step="0"] .sr-h1 { display: block; font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 900; letter-spacing: .04em; line-height: 1.05; color: #fff; }
.sr-app[data-step="0"] .sr-h1 em { display: block; margin-top: 6px; font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: var(--caps); }
.sr-app[data-step="0"] .sr-h1 em::before { content: none; }
.sr-range { display: none; margin: 0; }
.sr-app[data-step="0"] .sr-range { display: flex; gap: 28px; flex: none; }
.sr-range div { display: flex; flex-direction: column-reverse; gap: 2px; text-align: right; }
.sr-range dd { margin: 0; font-family: var(--fd); font-size: var(--t20); font-weight: 800; line-height: 1; color: #fff; }
.sr-range dt { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--dim); }

#srP0 { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 36px; align-items: start; max-width: 1480px; margin: 0 auto; padding: 24px clamp(20px, 3vw, 44px) 40px; }
#srP0[hidden] { display: none; }
.sr-filter { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sr-results { min-width: 0; }
#srP0 .sr-head { margin: 0; }
#srP0 .sr-h { margin: 4px 0 0; font-size: var(--t18); }
#srP0 .sr-sub { display: none; }   /* 'Make not here?' and the 'Not listed' card under every make say the same */
.sr-search { position: relative; display: block; }
.sr-search svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--y); pointer-events: none; }
.sr-search input { width: 100%; font-family: var(--ft); font-size: var(--t14); color: #fff; background: rgba(255,255,255,.035); border: 1px solid var(--line2); border-radius: var(--r); padding: .85rem .75rem .85rem 2.6rem; min-height: 48px; text-overflow: ellipsis; transition: border-color .2s, box-shadow .2s; }
.sr-search input::placeholder { color: #8a8a8a; }
.sr-search input:focus { outline: none; border-color: var(--y); box-shadow: 0 0 0 3px rgba(var(--y-rgb), .14); }

/* the makes, all of them in one list (the count is a number; ' models' is for screen readers) */
.sr-makes { display: flex; flex-direction: column; gap: 0; overflow: visible; border: 0; }
.sr-make { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; cursor: pointer; text-align: left;
    background: none; border: 0; border-left: 2px solid transparent; border-radius: 0 var(--r) var(--r) 0; color: #bdbdbd; transition: color .2s, background .2s, border-color .2s; }
.sr-make b { font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: var(--caps); white-space: nowrap; }
.sr-make > span { font-family: var(--fl); font-size: var(--t13); font-weight: 600; color: var(--dim2); }
.sr-make:hover { color: #fff; background: rgba(255,255,255,.03); }
.sr-make[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.05); border-left-color: var(--y); }
.sr-make[aria-pressed="true"] > span { color: var(--y); }
.sr-make:focus-visible { outline-offset: -2px; }
/* 11 makes or more: tighter rows, so every make stays on screen on a 900px-tall desktop (the tab already says 'Step 01') */
@media (min-width: 901px) and (min-height: 501px) {
    #srP0:has(.sr-make:nth-child(11)) { padding-top: 16px; }
    .sr-filter:has(.sr-make:nth-child(11)) .sr-kicker { display: none; }
    .sr-makes:has(> .sr-make:nth-child(11)) .sr-make { min-height: 36px; }
    /* a list that long is taller than the panel on a 768-800px screen: a sticky column would never scroll its last makes
       out from under the build bar, so it scrolls with the cards */
    .sr-filter:has(.sr-make:nth-child(11)) { position: static; }
}
.sr-makes-more { margin: 0 0 0 14px; font-family: var(--ft); font-size: var(--t13); line-height: 1.5; color: var(--dim2); }
.sr-makes-more a { color: var(--y); text-decoration: underline; text-underline-offset: 2px; }

/* what the cards are: the make and its count, or the search */
.sr-results-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sr-results-t { font-family: var(--fd); font-size: var(--t18); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.sr-results-h.is-search .sr-results-t { font-family: var(--fl); font-size: var(--t16); font-weight: 700; letter-spacing: 0; text-transform: none; }
.sr-find-count { font-family: var(--ft); font-size: var(--t13); color: var(--dim); }
.sr-find-count:empty { display: none; }
/* model families (a make with more than 8 models): desktop, chips that filter the cards; phones, a subhead per family */
.sr-fams { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.sr-fams[hidden] { display: none; }
.sr-fam-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; cursor: pointer; white-space: nowrap; border-radius: var(--r);
    background: rgba(255,255,255,.025); border: 1px solid var(--line2); color: #cfcfcf; font-family: var(--fl); font-size: var(--t14); font-weight: 700; transition: border-color .2s, color .2s, background .2s; }
.sr-fam-btn span { font-size: var(--t13); font-weight: 600; color: var(--dim2); }
.sr-fam-btn:hover { border-color: var(--line3); color: #fff; }
.sr-fam-btn[aria-pressed="true"] { border-color: var(--y); background: rgba(var(--y-rgb), .08); color: #fff; }
.sr-fam-btn[aria-pressed="true"] span { color: var(--y); }
.sr-fam { grid-column: 1 / -1; margin: 10px 0 0; font-family: var(--fl); font-size: var(--t12); line-height: 1; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--dim); }
.sr-fam:first-child { margin-top: 0; }

/* the cards: photo, then the name and 'Configure', then the engine and the stages */
.sr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 14px; align-content: start; }
.sr-tile { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer; overflow: hidden; border-radius: var(--r);
    background: #121212; border: 1px solid var(--line); transition: border-color .3s, transform .35s var(--ease), box-shadow .3s; min-width: 0; }
.sr-tile:hover { border-color: var(--line3); transform: translateY(-2px); }
.sr-tile-ph { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; background: #0b0b0b; }
.sr-tile-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease), filter .4s; filter: saturate(.85) brightness(.85); }
.sr-tile-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,18,18,.9) 0%, rgba(18,18,18,0) 45%); }
.sr-tile:hover .sr-tile-ph img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.sr-tile-ph.is-blank { display: grid; place-items: center; color: #5a5a5a; background: repeating-linear-gradient(135deg, #111 0 10px, #141414 10px 20px); }
.sr-tile-ph.is-blank::after { display: none; }
/* a car without a real photo of it: its name, outlined, over stripes (car-photos.js kind 'detail'); the top padding
   keeps the name clear of the chassis badge (10px + 20px + an 8px gap) and is a floor: 'safe center' never lets a long
   name centre up into it. A card without a badge uses the room for a third line */
.sr-tile-ph.is-type { display: flex; flex-direction: column; justify-content: safe center; gap: 4px; padding: 38px var(--cp) 6px; background: repeating-linear-gradient(135deg, #101010 0 10px, #161616 10px 20px); }
.sr-tile-ph.is-type:not(:has(.sr-tile-code)) { padding-top: 10px; }
.sr-tile-ph.is-type b { position: relative; z-index: 1; font-family: var(--fd); font-size: var(--t28); font-weight: 900; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere;
    color: transparent; -webkit-text-stroke: 1px rgba(var(--y-rgb), .75); }
.sr-tile-ph.is-type b.is-long { font-size: var(--t20); }
.sr-tile-ph.is-type b.is-xlong { font-size: var(--t14); }   /* a list of models (e.g. 320i / 328i / … / 430i): three lines clear of the badge */
.sr-tile-ph.is-type small { position: relative; z-index: 1; line-height: 1.2; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--dim2); }
/* the chassis or engine code, top left of the photo (the check is top right) */
.sr-tile-code { position: absolute; z-index: 1; left: 10px; top: 10px; padding: 3px 6px; border-radius: var(--r); background: rgba(10,10,10,.75); border: 1px solid var(--line2);
    font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); line-height: 1; color: #e6e6e6; }
.sr-tile-body { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px var(--cp) var(--cp); }
.sr-tile-row, .sr-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sr-tile-foot { align-items: flex-end; }
.sr-tile-make { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--y); }
.sr-tile-name { min-width: 0; font-family: var(--fl); font-size: var(--t18); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: 0; }
/* 'Configure' sits at the foot of the photo, beside the name row, so it never takes the name's width */
.sr-tile-go { position: absolute; right: 14px; bottom: 100%; margin-bottom: 8px; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--y); white-space: nowrap; opacity: 0; transition: opacity .25s;
    text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.sr-tile:hover .sr-tile-go, .sr-tile:focus-visible .sr-tile-go, .sr-tile[aria-pressed="true"] .sr-tile-go { opacity: 1; }
.sr-tile-meta { min-width: 0; font-family: var(--fl); font-size: var(--t13); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: #8d8d8d; }
.sr-tile-stages { flex: none; display: flex; gap: 4px; }
.sr-tile-stages i { font-style: normal; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: 0; line-height: 1; color: #cfcfcf; border: 1px solid var(--line2); padding: 4px 6px; border-radius: var(--r); white-space: nowrap; }
.sr-tile-check { position: absolute; top: 10px; right: 10px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--y); color: #0a0a0a;
    transform: scale(0); transition: transform .35s var(--ease); }
.sr-tile[aria-pressed="true"] { border-color: var(--y); box-shadow: 0 0 0 1px var(--y), 0 10px 30px rgba(var(--y-rgb), .12); }
.sr-tile[aria-pressed="true"] .sr-tile-check { transform: scale(1); }
.sr-tile[aria-pressed="true"] .sr-tile-ph img { filter: saturate(1) brightness(1); }
.sr-tile.is-other { border-style: dashed; }
.sr-none { grid-column: 1 / -1; font-family: var(--ft); font-size: var(--t14); line-height: 1.7; color: var(--dim); padding: 1.2rem; border: 1px dashed var(--line2); border-radius: var(--r); }
.sr-none button { background: none; border: 0; padding: 0; color: var(--y); text-decoration: underline; cursor: pointer; }

/* =====================================================================
   STEP 02: STAGE
   ===================================================================== */
.sr-stagecards { display: flex; flex-direction: column; gap: 6px; }
/* compact rows: badge | name, one gain line and one foot line | the stage meter */
.sr-sc { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px; gap: 14px; align-items: center; min-height: 72px; text-align: left; cursor: pointer; padding: 10px var(--cp) 10px 12px; border-radius: var(--r);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); border: 1px solid var(--line); transition: border-color .3s, background .3s, box-shadow .3s; overflow: hidden; }
.sr-sc:hover { border-color: var(--line3); }
.sr-sc::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 0% 0%, rgba(var(--y-rgb), .10), transparent 60%); opacity: 0; transition: opacity .4s; }
.sr-sc[aria-checked="true"] { border-color: var(--y); box-shadow: 0 0 0 1px var(--y), 0 12px 40px rgba(var(--y-rgb), .10); }
.sr-sc[aria-checked="true"]::after { opacity: 1; }
.sr-stagecards.is-swap .sr-sc, .sr-stagecards.is-swap .sr-sc::after { transition: none; }   /* a stage change in place (JS) */
/* the 'Selected' tab on the chosen card (CSS text, silent to screen readers: the radio says it) */
.sr-sc[aria-checked="true"]::before { content: 'Selected'; content: 'Selected' / ''; position: absolute; z-index: 1; top: 0; right: 12px; padding: 2px 8px 3px; background: var(--y); color: #0a0a0a;
    font-family: var(--fl); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; border-radius: 0 0 3px 3px; }
/* the stage sticker in its tier colour (--tc): S1, S2 outlines; S2+, S3 fills; a named package a steel plate */
.sr-sc-badge { --cut: polygon(6% 10%, 30% 0, 52% 6%, 78% 0, 100% 12%, 95% 40%, 100% 66%, 91% 100%, 60% 93%, 34% 100%, 4% 91%, 9% 62%, 0 36%);
    position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 1px; width: 52px; height: 52px; color: var(--tc); filter: drop-shadow(2px 2px 0 #000);
    transition: transform .35s var(--ease); }
.sr-sc-badge::before, .sr-sc-badge::after { content: ''; position: absolute; z-index: -1; clip-path: var(--cut); }
.sr-sc-badge::before { inset: 0; background: var(--tc); }
.sr-sc-badge::after { inset: 2px; background: #111215; }   /* outline tiers: the colour is the rim */
.sr-sc-badge i, .sr-sc-badge b { font-style: normal; font-family: var(--fd); font-weight: 900; line-height: 1; letter-spacing: .02em; transform: skewX(-9deg); }
.sr-sc-badge i { font-size: var(--t20); margin-top: 2px; }
.sr-sc-badge b { font-size: var(--t28); }
.sr-sc-badge b.is-sm { font-size: var(--t16); }
.sr-sc-badge b.is-ic { display: flex; line-height: 0; transform: none; }
.sr-sc-badge small { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-family: var(--fl); font-size: 9px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.sr-sc[data-tier="s2p"] .sr-sc-badge::after, .sr-sc[data-tier="s3"] .sr-sc-badge::after, .sr-sc[data-tier="x"] .sr-sc-badge::after { display: none; }
.sr-sc[data-tier="s2p"] .sr-sc-badge, .sr-sc[data-tier="s3"] .sr-sc-badge, .sr-sc[data-tier="x"] .sr-sc-badge { color: #0a0a0a; }
.sr-sc[data-tier="s3"] .sr-sc-badge { filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 10px rgba(255,90,54,.55)); }
.sr-sc[data-tier="x"] .sr-sc-badge { --cut: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.sr-sc[data-tier="x"] .sr-sc-badge::before { background: linear-gradient(160deg, #d3d9df, var(--t-x) 55%, #939ca6); }
.sr-sc[data-tier="x"] .sr-sc-badge b.is-ic { margin-bottom: 10px; }
.sr-sc[aria-checked="true"] .sr-sc-badge { transform: rotate(-4deg) scale(1.1); }
.sr-sc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-sc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; min-width: 0; }   /* the tag drops under a long name */
.sr-sc-name { min-width: 0; font-family: var(--fl); font-size: var(--t16); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: 0; }
.sr-sc-tag { flex: none; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; padding: 1px 6px; border-radius: var(--r); border: 1px solid; white-space: nowrap; }
.sr-sc-tag.is-spec { color: #cfcfcf; border-color: var(--line2); }
.sr-sc-gl, .sr-sc-foot { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t13); line-height: 1.3; }
.sr-sc-foot { display: flex; min-width: 0; }
.sr-sc-hw { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sr-sc-sep, .sr-sc-ecu, .sr-sc-foot .is-add { flex: none; white-space: pre; }
/* the gain line may wrap (each figure stays whole) so a published figure is never cut */
.sr-sc-gl { white-space: normal; font-family: var(--fl); font-weight: 600; color: var(--g); }
.sr-sc-gl .sr-ro { white-space: nowrap; }
.sr-ro-at { font-size: inherit; font-weight: 600; color: var(--dim); }
.sr-sc-gl.is-dim { color: #9a9a9a; font-weight: 500; }
.sr-ro small { font-size: inherit; font-weight: 600; color: var(--dim); }
.sr-ro b { font-family: var(--fd); font-size: var(--t13); font-weight: 800; color: var(--g); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sr-sc-foot { font-family: var(--fl); font-weight: 600; color: #9a9a9a; letter-spacing: 0; }
.sr-sc-foot .is-add { color: var(--y); }
/* the stage meter: 12 bars with the stage's kind under them (hidden on small phones) */
.sr-meter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sr-meter em { font-style: normal; font-family: var(--fl); font-size: var(--t12); font-weight: 600; color: #9a9a9a; line-height: 1.2; }
.sr-meter-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.sr-meter-bar i { height: 6px; background: rgba(255,255,255,.07); border-radius: 1px; transition: background .3s var(--ease), box-shadow .3s; transition-delay: calc(var(--i) * 35ms); }
.sr-meter-bar i.on { background: linear-gradient(90deg, #d6ac10, var(--y)); }
.sr-meter-bar i.on.hot { background: linear-gradient(90deg, #ff9d2e, #ff5a36); }
.sr-sc[aria-checked="true"] .sr-meter-bar i.on { box-shadow: 0 0 8px rgba(var(--y-rgb), .45); }
.sr-sc[aria-checked="true"] .sr-meter-bar i.on.hot { box-shadow: 0 0 8px rgba(255,110,60,.5); }
/* narrow rails (desktops about 901-1280px wide): a slimmer meter without its label, so the name and figures keep
   their room. Phones drop the meter below, at 560px */
/* Phones size the rows by the viewport (the column is the screen less 2 x 16px, so 399px or less up to 431px): a
   container there would make every stage tap re-check its query (a slower tap) */
@media (min-width: 901px) and (min-height: 501px) { .sr-stagecards { container-type: inline-size; } }
@container (max-width: 399px) {
    .sr-sc { grid-template-columns: 52px minmax(0, 1fr) 56px; gap: 10px; padding-right: 10px; }
    .sr-meter em { display: none; }
    .sr-sc-foot { font-size: var(--t12); }   /* the parts, the ECU and the add-on count stay on the one line */
}
@media (max-width: 431px) {
    .sr-sc { grid-template-columns: 52px minmax(0, 1fr) 56px; gap: 10px; padding-right: 10px; }
    .sr-meter em { display: none; }
    .sr-sc-foot { font-size: var(--t12); }
}

/* the selected stage's contents, as a drawer directly under the rows */
.sr-incl { margin-top: 12px; padding: var(--cp); border: 1px solid rgba(var(--y-rgb), .5); border-radius: var(--r); background: rgba(var(--y-rgb), .02); }
.sr-incl-h { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sr-incl-h h3 { margin: 0; font-family: var(--fd); font-size: var(--t13); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.4; }
.sr-incl-pub { margin: 4px 0 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.45; color: var(--g); }
.sr-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .5rem; }
.sr-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: .6rem; font-family: var(--ft); font-size: var(--t13); line-height: 1.5; color: #dedede; }
.sr-list li svg { color: var(--y); margin-top: .22rem; }
/* the stage's parts: a 44px thumb per part (a photo of that exact part, else its hardware area's icon) */
.sr-list.is-parts { gap: .55rem; }
.sr-list.is-parts li { grid-template-columns: 44px minmax(0, 1fr); gap: .75rem; align-items: center; }
.sr-pt { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 3px; background: #161616; border: 1px solid var(--line2); color: var(--y); font-style: normal; }
.sr-list li .sr-pt svg { margin: 0; }
.sr-pt.is-ph { border-color: rgba(var(--y-rgb), .45); }
.sr-pt.is-light { background: #fff; }
.sr-pt img, .sr-fin-pic img, .sr-opt-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-pt.is-bp { --bpg: 8px; color: rgba(var(--y-rgb), .8); }
.sr-none-hw { font-family: var(--ft); font-size: var(--t13); color: var(--dim); margin: 0 0 1.1rem; }
.sr-more { margin: 0 0 1.2rem; border-top: 1px solid var(--line); }
.sr-more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #cfcfcf; }
.sr-more summary::-webkit-details-marker { display: none; }
.sr-more summary::after { content: '+'; font-family: var(--fd); color: var(--y); transition: transform .25s; }
.sr-more[open] summary::after { transform: rotate(45deg); }
.sr-more summary:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.sr-more.sr-about { margin: 12px 0 0; }
.sr-more.sr-about .sr-desc { margin: 0 0 4px; }

.sr-addons { margin: 0; }
.sr-addchips { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sr-addchips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line2); border-radius: var(--r); font-family: var(--fl); font-size: var(--t13); font-weight: 600; color: #e6e6e6; letter-spacing: 0; }
.sr-addchips em { font-style: normal; font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--g); }
/* a text link on to step 03 (Next in the bar is the step's one main action) */
.sr-addgo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; cursor: pointer; background: transparent; border: 0; color: var(--y);
    font-family: var(--fl); font-size: var(--t14); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--y-rgb), .45); transition: color .2s; }
.sr-addgo:hover { color: #fff; }
.sr-every { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--fl); font-size: var(--t13); font-weight: 600; color: #d0d0d0; }
.sr-every b { flex-basis: 100%; font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #bdbdbd; }
.sr-every span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sr-every svg { color: var(--y); }
.sr-warranty { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.45; color: #b8b8b8; }
.sr-warranty svg { flex: none; color: var(--y); margin-top: 1px; }
.sr-warranty b { color: #fff; font-weight: 600; }
.sr-claims { margin: .6rem 0 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.55; color: #bdbdbd; padding: 12px var(--cp); border-left: 2px solid var(--g); background: rgba(var(--g-rgb), .05); }
.sr-claims b { color: #fff; font-weight: 600; }
.sr-desc { margin: 1rem 0 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.75; color: #9d9d9d; font-weight: 300; }

/* =====================================================================
   STEP 03: ADD-ONS
   ===================================================================== */
/* the downpipe bay (packages-page.js renderDp): the finish's photo (or the blueprint drawing), type and finish cards */
.sr-dpbox { position: relative; margin: 0 0 1.3rem; padding: 14px 14px 12px; border: 1px solid rgba(var(--y-rgb), .35); border-radius: var(--r);
    background: linear-gradient(180deg, rgba(var(--y-rgb), .06), rgba(255,255,255,0) 120px), #0d0d0d; }
.sr-dpbox::before { content: ''; position: absolute; left: -1px; top: -1px; width: 38px; height: 3px; background: var(--y); box-shadow: 0 0 12px rgba(var(--y-rgb), .7); }
.sr-dpbox > .sr-lbl { display: block; margin-bottom: 10px; }
.sr-dpbox .sr-sub-lbl { margin: 0 0 .4rem; }
.sr-dpbox .sr-sub-lbl small { margin-left: 6px; font-family: var(--ft); font-size: var(--t12); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim2); }
.sr-dpbox .sr-dp + .sr-sub-lbl { margin-top: .75rem; }
.sr-view { margin: 0 0 12px; }
.sr-view-ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0a0a; clip-path: var(--chamfer); }
/* studio-white shots: the whole part on white, clear of the tag strip, no shade band */
.sr-view.is-light .sr-view-ph { background: #fff; }
.sr-view.is-light .sr-view-pic { object-fit: contain; box-sizing: border-box; padding: 8px 8px 48px; background: #fff; }
.sr-view-ph::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 32%); }
.sr-view.is-light .sr-view-ph::after { display: none; }
.sr-view-pic.is-in { animation: srWipe .55s var(--ease) both; }
@keyframes srWipe { from { clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%); } to { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); } }
.sr-bp { display: grid; place-items: center; color: rgba(var(--y-rgb), .85); }
/* the blueprint grid: the no-photo viewer, finish tile and part thumb (--bpg: the cell) */
.sr-bp, .sr-pt.is-bp, .sr-fin-pic.is-bp { background: linear-gradient(rgba(var(--y-rgb), .08) 1px, transparent 1px) 0 0 / var(--bpg, 18px) var(--bpg, 18px),
    linear-gradient(90deg, rgba(var(--y-rgb), .08) 1px, transparent 1px) 0 0 / var(--bpg, 18px) var(--bpg, 18px), #0e1013; }
.sr-view-ph .sr-bp svg { width: 62%; height: auto; overflow: visible; }
.sr-view-ph .sr-bp svg[viewBox="0 0 24 24"] { width: 22%; }
.sr-view-tag { position: absolute; z-index: 2; left: 10px; bottom: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; pointer-events: none; }
.sr-view-tag b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; background: var(--y); color: #0a0a0a; font-family: var(--fd); font-size: var(--t13); font-weight: 900; transform: skewX(-10deg); }
.sr-view-tag span { padding: 4px 8px; background: rgba(8,8,8,.85); border: 1px solid var(--line2); color: #fff; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; line-height: 1.1; }
.sr-view-tag span.is-flash { border-color: var(--y); animation: srTagFlash .5s var(--ease); }
@keyframes srTagFlash { from { opacity: .3; transform: scale(1.18); } to { opacity: 1; transform: none; } }
/* the EQUIPPED stamp lands (400ms), holds, and is gone before the second is out; the scan line leads the wipe */
.sr-stamp { position: absolute; z-index: 3; top: 14px; right: 18px; padding: .25em .6em; border: 3px solid var(--y); color: var(--y); background: rgba(8,8,8,.7); font-family: var(--fd); font-size: var(--t16); font-weight: 900;
    letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); opacity: 0; pointer-events: none; box-shadow: 0 0 18px rgba(var(--y-rgb), .45), inset 0 0 12px rgba(var(--y-rgb), .3); }
.sr-scan { position: absolute; z-index: 2; inset: -10% auto -10% 0; width: 100%; opacity: 0; pointer-events: none; transform: translateX(-12%); }
.sr-scan::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--y); box-shadow: 0 0 18px 4px rgba(var(--y-rgb), .7); transform: skewX(-6deg); }
.sr-view.is-equip .sr-scan { animation: srScan .55s var(--ease) both; }
.sr-view.is-equip .sr-stamp { animation: srStamp .75s var(--ease) both; }
@keyframes srScan { 0% { opacity: 1; transform: translateX(-12%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(104%); } }
@keyframes srStamp { 0% { opacity: 0; transform: rotate(-8deg) scale(2.2); } 53% { opacity: 1; transform: rotate(-8deg) scale(1); } 78% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }
.sr-view figcaption { margin-top: 8px; font-family: var(--ft); font-size: var(--t12); line-height: 1.5; color: #b9b9b9; }
.sr-view figcaption em { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid rgba(var(--g-rgb), .6); color: var(--g); font-style: normal; font-family: var(--fl); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; font-size: var(--t12); line-height: 1.5; }
/* the cards: type (a drawing above the name) and finish (the photo above the name) */
.sr-dp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sr-dpcard { position: relative; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; min-height: 56px; padding: 10px 12px; overflow: hidden;
    border: 1px solid var(--line2); border-radius: var(--r); background: #121212; color: #fff; transition: background .25s, color .25s, border-color .25s; }
.sr-dpcard:hover { border-color: var(--line3); background: #171717; }
.sr-dpcard b { font-family: var(--fd); font-size: var(--t14); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sr-dpcard .use { font-family: var(--fl); font-size: var(--t13); font-weight: 600; color: var(--dim); }
.sr-dpcard b, .sr-dpcard .use { line-height: 1.25; }
.sr-dpcard[aria-checked="true"] { background: var(--y); border-color: var(--y); color: #0a0a0a; }
.sr-dpcard[aria-checked="true"] .use { color: #2a2a2a; }
.sr-dpcard[aria-checked="true"]::after { content: ''; position: absolute; z-index: 1; top: -1px; right: -1px; width: 16px; height: 16px; background: #0d0d0d; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sr-dpcard:focus-visible, .sr-dpcard[aria-checked="true"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sr-dia { display: block; line-height: 0; margin-bottom: 4px; }
.sr-dia svg { width: 100%; max-width: 132px; height: auto; overflow: visible; }
svg .wall { fill: none; stroke: #a9a9a9; stroke-width: 2; }
svg .fl { fill: #262626; stroke: #8a8a8a; stroke-width: 1.4; }
svg .cell { fill: none; stroke: #7a7a7a; stroke-width: .9; }
svg .flow { fill: none; stroke: var(--y); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-dpcard[aria-checked="true"] svg .wall { stroke: #0a0a0a; }
.sr-dpcard[aria-checked="true"] svg .fl { fill: #e2b00f; stroke: #0a0a0a; }
.sr-dpcard[aria-checked="true"] svg .cell { stroke: #3a3a3a; }
.sr-dpcard[aria-checked="true"] svg .flow { stroke: #0a0a0a; }
.sr-dpcard.is-run .flow { animation: srFlow .6s var(--ease); }
@keyframes srFlow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.sr-dpnote { margin: 8px 0 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.45; color: var(--dim); }
.sr-dpfin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-dpfin .sr-dpcard { min-height: 48px; padding: 0 0 8px; text-align: center; }
.sr-dpfin .sr-dpcard b, .sr-dpfin .sr-dpcard .use { padding: 0 8px; }
.sr-dpfin .sr-dpcard b { margin-top: 7px; font-size: var(--t13); line-height: 1.2; }
.sr-dpfin .sr-dpcard .use { font-size: var(--t12); line-height: 1.2; }
.sr-fin-pic { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0a0a; }
.sr-fin-pic.is-light { background: #fff; }
.sr-fin-pic.is-bp { --bpg: 10px; color: rgba(var(--y-rgb), .75); }
.sr-dpcard[aria-checked="true"] .sr-fin-pic { box-shadow: inset 0 -3px 0 #0a0a0a; }

/* the intake choice (packages-page.js renderIn): one card per intake, its price status under the description */
.sr-inbox { position: relative; margin: 0 0 1.3rem; padding: 14px 14px 12px; border: 1px solid var(--line2); border-radius: var(--r); background: #0d0d0d; }
.sr-inbox[hidden] { display: none; }
.sr-inbox > .sr-lbl { display: block; margin-bottom: 10px; }
.sr-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sr-incard { position: relative; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; min-height: 56px; padding: 10px 12px; overflow: hidden;
    border: 1px solid var(--line2); border-radius: var(--r); background: #121212; color: #fff; transition: background .25s, color .25s, border-color .25s; }
.sr-incard:hover { border-color: var(--line3); background: #171717; }
.sr-incard b { font-family: var(--fd); font-size: var(--t14); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
.sr-incard .use { font-family: var(--ft); font-size: var(--t12); line-height: 1.4; color: #b9b9b9; }
.sr-in-tag { margin-top: auto; padding-top: 4px; font-style: normal; font-family: var(--fl); font-size: var(--t12); font-weight: 700; line-height: 1.3; color: #d6d6d6; }
.sr-incard[aria-checked="true"] { background: var(--y); border-color: var(--y); color: #0a0a0a; }
.sr-incard[aria-checked="true"] .use, .sr-incard[aria-checked="true"] .sr-in-tag { color: #1a1a1a; }
.sr-incard[aria-checked="true"]::after { content: ''; position: absolute; z-index: 1; top: -1px; right: -1px; width: 16px; height: 16px; background: #0d0d0d; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sr-incard:focus-visible, .sr-incard[aria-checked="true"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 900px), (max-height: 500px) {
    .sr-inbox { padding: 12px 10px 10px; margin-left: -6px; margin-right: -6px; }
    .sr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sr-incard { padding: 8px 10px; }
    .sr-incard b { font-size: var(--t13); overflow-wrap: anywhere; }
}

/* how the car is used: optional one-line chips at the end of the step */
.sr-use { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-usecard { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--cp); cursor: pointer; border-radius: var(--r); background: rgba(255,255,255,.025); border: 1px solid var(--line); color: #f0f0f0; transition: border-color .25s, background .25s; }
.sr-usecard svg, .sr-usecard small { display: none; }
.sr-usecard b { font-family: var(--fl); font-size: var(--t14); font-weight: 700; line-height: 1.15; white-space: nowrap; }
.sr-usecard:hover { border-color: var(--line3); }
.sr-usecard[aria-pressed="true"] { border-color: var(--y); background: rgba(var(--y-rgb), .07); box-shadow: 0 0 0 1px var(--y); }

.sr-opts-group { margin-top: 24px; }
/* two add-ons that replace each other (the crank pair): one fieldset, so they read as one choice */
.sr-xgroup { margin: 0 0 .45rem; padding: 8px 8px 1px; border: 1px dashed var(--line2); border-radius: var(--r); min-width: 0; }
.sr-xgroup legend { padding: 0 6px; font-family: var(--fl); font-size: var(--t13); font-weight: 700; color: #e6e6e6; }
.sr-xgroup legend small { font-size: var(--t13); font-weight: 500; color: var(--dim); margin-left: 4px; }
.sr-opt { border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.02); margin-bottom: .45rem; transition: border-color .25s, background .25s; }
.sr-opt:hover { border-color: var(--line2); }
.sr-opt.is-on { border-color: rgba(var(--y-rgb), .7); background: rgba(var(--y-rgb), .045); box-shadow: inset 3px 0 0 var(--y); }
.sr-opt.is-equip { animation: srEquip .45s var(--ease); }
@keyframes srEquip { 0% { transform: scale(.985); } 55% { transform: scale(1.01); } 100% { transform: none; } }
/* a part card: the kit's photo (or its hardware area's icon), the name with an EQUIPPED tag when on (decorative), the switch */
.sr-opt-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; gap: .8rem; align-items: center; padding: 12px var(--cp) 12px 12px; cursor: pointer; }
.sr-opt-pic { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 3px; background: #141414; border: 1px solid var(--line2); color: #9a9a9a; font-style: normal; }
.sr-opt-pic.is-light { background: #fff; }
.sr-opt.is-on .sr-opt-pic { border-color: var(--y); color: var(--y); }
.sr-opt.is-on .sr-opt-txt b::after { content: 'Equipped'; content: 'Equipped' / ''; display: inline-block; margin-left: 8px; padding: 0 6px; vertical-align: 2px; background: var(--y); color: #0a0a0a;
    font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; line-height: 1.5; transform: skewX(-10deg); }
.sr-opt.is-on[data-group="tune"] .sr-opt-txt b::after { content: 'On'; content: 'On' / ''; }
.sr-opt.is-on[data-group="visit"] .sr-opt-txt b::after { content: 'Added'; content: 'Added' / ''; }
.sr-opt-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sr-opt-txt b { display: block; font-family: var(--fl); font-size: var(--t16); font-weight: 700; color: #f2f2f2; letter-spacing: 0; line-height: 1.25; }
.sr-opt-txt small { display: block; font-family: var(--ft); font-size: var(--t13); line-height: 1.5; color: var(--dim2); margin-top: .1rem; }
.sr-opt-txt a { color: var(--y); }
.sr-opt-tag { display: inline-block; margin: 4px 0 2px; font-style: normal; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--g); border: 1px solid rgba(var(--g-rgb), .4); padding: 1px 6px; border-radius: var(--r); white-space: nowrap; }   /* under the name, so the name keeps the width */
.sr-opt-tag:empty { display: none; }
.sr-opt-txt small a { text-decoration: underline; text-underline-offset: 2px; }   /* links in a note aren't told apart by colour alone */
.sr-opt-row .sr-switch { grid-column: 3; }
.sr-switch { width: 44px; height: 24px; border-radius: 24px; background: #2a2a2a; border: 1px solid #3a3a3a; position: relative; transition: background .25s, border-color .25s; }
.sr-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #9a9a9a; transition: transform .3s var(--ease), background .25s; }
.sr-opt-row input:checked ~ .sr-switch { background: var(--y); border-color: var(--y); }
.sr-opt-row input:checked ~ .sr-switch i { transform: translateX(20px); background: #0a0a0a; }
.sr-opt-row:has(input:focus-visible) { outline: 2px solid var(--y); outline-offset: -2px; border-radius: var(--r); }
.sr-opt-sub { padding: 0 var(--cp) var(--cp); }
.sr-opt-sub[hidden] { display: none; }
.sr-sub-lbl { display: block; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #9a9a9a; margin-bottom: .5rem; }
.sr-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; }
.sr-seg button { background: transparent; border: 0; border-right: 1px solid var(--line2); cursor: pointer; padding: .6rem .3rem; min-height: 46px; display: flex; flex-direction: column; align-items: center; gap: .3rem; color: #a8a8a8; transition: background .2s, color .2s; }
.sr-seg button:last-child { border-right: 0; }
.sr-seg button span { font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; }
.sr-seg .lv { display: flex; gap: 2px; align-items: flex-end; height: 10px; }
.sr-seg .lv i { width: 4px; background: #444; border-radius: 1px; }
.sr-seg .lv i:nth-child(1) { height: 4px; } .sr-seg .lv i:nth-child(2) { height: 7px; } .sr-seg .lv i:nth-child(3) { height: 10px; }
.sr-seg .lv i.on { background: var(--y); }
.sr-seg button[aria-pressed="true"] { background: var(--y); color: #0a0a0a; }
.sr-seg button[aria-pressed="true"] .lv i { background: rgba(0,0,0,.25); }
.sr-seg button[aria-pressed="true"] .lv i.on { background: #0a0a0a; }
.sr-seg button:focus-visible { outline-offset: -3px; }
.sr-seg button[aria-pressed="true"]:focus-visible { outline-color: #0a0a0a; }
.sr-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.sr-map { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: stretch; border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; background: #111; }
.sr-map span { display: grid; place-items: center; font-family: var(--fd); font-size: var(--t12); font-weight: 800; color: #0a0a0a; background: #d9d9d9; }
.sr-map select { appearance: none; -webkit-appearance: none; min-width: 0; font-family: var(--fl); font-size: var(--t14); font-weight: 600; color: #fff; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f5c518' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .6rem center;
    border: 0; padding: .55rem 1.6rem .55rem .6rem; min-height: 42px; cursor: pointer; }
.sr-map select:focus { outline: 2px solid var(--y); outline-offset: -2px; }
.sr-sub-note { display: block; font-family: var(--ft); font-size: var(--t12); color: #8c8c8c; margin-top: .55rem; }

/* =====================================================================
   STEP 04: BREAKDOWN & PRICE
   ===================================================================== */
.sr-spec[hidden] { display: none; }

/* the build sheet above the form (packages-page.js sheetHTML): a count of areas, never a score; no price */
.sr-sum { border: 1px solid var(--line2); border-radius: var(--r); background: #0f0f0f; overflow: hidden; }
.sr-sum:empty { display: none; }
.sr-sheet > summary { list-style: none; cursor: pointer; position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px; align-items: center; padding: 12px 44px 10px var(--cp); }
.sr-sheet > summary::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(120deg, var(--tc), transparent 60%); opacity: .13; }   /* a tint of the tier colour */
.sr-sheet > summary::-webkit-details-marker { display: none; }
.sr-sheet > summary::after { content: '+' / ''; position: absolute; top: 12px; right: 16px; font-family: var(--fd); font-size: var(--t18); color: var(--y); transition: transform .25s; }
.sr-sheet[open] > summary::after { transform: rotate(45deg); }
.sr-sheet-lv { display: flex; flex-direction: column; gap: 7px; width: max-content; min-width: 56px; }
.sr-sheet-lv .sr-plate { height: 40px; font-size: var(--t20); border-left-width: 4px; }
.sr-sheet-lv .sr-plate.is-x { font-size: var(--t14); }   /* a named package (CADERACE) */
.sr-sheet-k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; }
.sr-sheet-t b { font-family: var(--fd); font-size: var(--t16); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; line-height: 1.2; }
.sr-sheet-t > span { font-family: var(--fl); font-size: var(--t14); font-weight: 600; color: #cfcfcf; }
.sr-sheet-count { grid-column: 1 / -1; font-family: var(--fl); font-size: var(--t14); font-weight: 600; color: #cfcfcf; }
.sr-sheet-count b { font-weight: 700; color: #fff; }
.sr-pips { display: flex; gap: 2px; padding-left: 3px; }
.sr-pips i { flex: 1; height: 5px; background: #2a2a2a; transform: skewX(-20deg); }
.sr-pips i.on { background: var(--y); }
.sr-pips i.spec { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--y-rgb), .6); }
.sr-sheet-code { flex: none; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }   /* its own line before it breaks; the plate goes under 'Code' before the plate itself would break */
.sr-sheet-code small { color: var(--dim); }
.sr-sheet-code b { flex: 0 0 auto; max-width: 100%; }   /* whole beside 'Code' or on a line of its own, never squeezed into a break */
.sr-sheet-code b, .sr-bar-code b { position: relative; isolation: isolate; padding: 2px 10px; font-family: var(--fd); font-size: var(--t13); font-weight: 700; letter-spacing: .06em; color: var(--y); overflow-wrap: normal; word-break: keep-all; }   /* the code never breaks mid-code: one line, or only after a '-' on the narrowest screens */
.sr-sheet-code b::before, .sr-bar-code b::before, .sr-bar-code b::after { content: ''; position: absolute; z-index: -1; inset: 0 3px; background: #121212; border: 1px solid rgba(var(--y-rgb), .55); transform: skewX(-12deg); }
.sr-bar-code b::after { background: rgba(var(--y-rgb), .35); opacity: 0; }   /* a new code flashes (below) */
/* every slot: icon (the downpipes: the chosen finish's thumb), name, state, the part; stock ones dimmed */
.sr-sheet-grid { list-style: none; margin: 0; padding: 2px var(--cp) 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sr-sheet-grid li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; align-items: start; padding: 5px 8px 5px 5px; border: 1px solid rgba(var(--y-rgb), .4); border-radius: 3px; }
.sr-sheet-grid .sr-pt { width: 30px; height: 30px; }
.sr-sheet-cell { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.sr-sheet-cell > b { font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; line-height: 1.2; }
.sr-sheet-cell > em { font-style: normal; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--y); }
.sr-sheet-cell > small { flex-basis: 100%; font-family: var(--ft); font-size: var(--t12); line-height: 1.3; color: #c4c4c4; overflow-wrap: anywhere; }
.sr-sheet-up { flex-basis: 100%; margin-top: 1px; font-family: var(--ft); font-size: var(--t12); line-height: 1.3; color: #c4c4c4; overflow-wrap: anywhere; }
.sr-sheet-up b { font-family: var(--fl); font-weight: 700; letter-spacing: .04em; color: var(--tc); }
.sr-sheet-grid li.is-option { border-style: dashed; border-color: var(--line3); }
.sr-sheet-grid li.is-option > .sr-sheet-cell > em { color: #e6e6e6; }
.sr-sheet-grid li.is-stock { border-color: var(--line); }
.sr-sheet-grid li.is-stock .sr-pt { color: #6a6a6a; border-color: var(--line); }
.sr-sheet-grid li.is-stock > .sr-sheet-cell > :is(b, em) { color: #a8a8a8; }
.sr-sheet-grid li.is-stock > .sr-sheet-cell > small { color: #8c8c8c; }
.sr-sheet-gain { margin: 0; padding: 8px var(--cp); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: var(--fl); font-size: var(--t16); font-weight: 700; color: var(--g); }
.sr-sheet-gain.is-dim { font-size: var(--t14); font-weight: 600; color: var(--dim); }
/* the choices line and Edit */
.sr-sum-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 4px 4px 4px var(--cp); border-top: 1px solid var(--line); }
.sr-sum-txt { min-width: 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.4; color: var(--dim); }
/* desktop and tablet: the build bar under the rail already shows this line, so Edit sits beside the gains and the
   details form shows on arrival (1024x768 included); phones keep the line (their bar has no room for it) */
@media (min-width: 901px) and (min-height: 501px) {
    .sr-sum { position: relative; }
    .sr-sum-row { position: absolute; right: 4px; bottom: 0; display: block; padding: 0; border: 0; }
    .sr-sum-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sr-sheet-gain { min-height: 46px; padding-right: 76px; align-items: center; align-content: center; }
}
/* the bar's typographic thumb for a car without a photo of its own: its code in outline over stripes */
.sr-bar-thumb.is-type::after { display: grid; place-items: center; overflow: hidden; background: repeating-linear-gradient(135deg, #101010 0 8px, #171717 8px 16px);
    font-family: var(--fd); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(var(--y-rgb), .8); }
.sr-bar-thumb.is-type.is-long::after { font-size: .6875rem; letter-spacing: 0; }   /* 'McLaren' keeps a margin in the 76px bar thumb */
.sr-sum-edit { min-height: 44px; padding: 0 12px; cursor: pointer; background: transparent; border: 0; color: #cfcfcf; font-family: var(--fl); font-size: var(--t14); font-weight: 700;
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); transition: color .2s; }
.sr-sum-edit:hover { color: var(--y); }
/* the full breakdown, folded under the form: open on desktop, closed on phones (renderSpec) */
.sr-spec { margin-top: 1.1rem; }
.sr-spec-d > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 48px; padding: 0 var(--cp);
    border: 1px solid var(--line); border-radius: var(--r); background: #0f0f0f; font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #e6e6e6; }
.sr-spec-d > summary::-webkit-details-marker { display: none; }
.sr-spec-d > summary span { margin-left: auto; font-family: var(--ft); font-size: var(--t13); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); }
.sr-spec-d > summary::after { content: '+'; font-family: var(--fd); color: var(--y); transition: transform .25s; }
.sr-spec-d[open] > summary { border-radius: var(--r) var(--r) 0 0; }
.sr-spec-d[open] > summary::after { transform: rotate(45deg); }
.sr-spec-card { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: #0f0f0f; overflow: hidden; }
/* the build, line by line: what each line includes, and whether it's included or in the price */
.sr-bd { list-style: none; margin: 0; padding: 0; }
/* the line's name and its value share the first row; the note and parts list run the full width under them */
.sr-bd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .15rem; align-items: start; padding: .7rem var(--cp); border-bottom: 1px solid var(--line); }
.sr-bd-txt { display: contents; }
.sr-bd-txt > b { grid-column: 1; grid-row: 1; font-family: var(--fl); font-size: var(--t16); font-weight: 700; color: #f2f2f2; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; }
.sr-bd-txt > small { grid-column: 1 / -1; font-family: var(--ft); font-size: var(--t12); line-height: 1.5; color: #8d8d8d; }
.sr-bd-row .sr-bd-items { grid-column: 1 / -1; }
.sr-bd-items { list-style: none; margin: .45rem 0 .1rem; padding: 0; display: grid; gap: .3rem; }
.sr-bd-items li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: .5rem; font-family: var(--ft); font-size: var(--t13); line-height: 1.45; color: #cfcfcf; }
.sr-bd-items li svg { color: var(--y); margin-top: .2rem; }
.sr-bd-v { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: .35rem; padding-top: .15rem; font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; white-space: nowrap; color: #aaa; }
.sr-bd-v.is-in { color: var(--g); }
.sr-bd-v.is-lock { color: var(--y); }
.sr-bd-use { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .65rem var(--cp); border-bottom: 1px solid var(--line); font-family: var(--ft); font-size: var(--t13); color: #cfcfcf; }
.sr-bd-use span { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #8a8a8a; }
.sr-bd-use b { font-weight: 600; color: #fff; }
.sr-bd-total { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 12px var(--cp); background: linear-gradient(90deg, rgba(var(--y-rgb), .08), transparent); }
.sr-bd-total > span { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #ddd; white-space: nowrap; }
.sr-bd-total b { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--y); text-align: right; }
.sr-bd-total b svg { flex: none; }
.sr-rrow .sr-bd-items { margin-top: .4rem; }

.sr-quote { margin-top: 1.1rem; padding: var(--cp); border: 1px solid rgba(var(--y-rgb), .45); border-radius: var(--r); background: linear-gradient(180deg, rgba(var(--y-rgb), .07), rgba(var(--y-rgb), .015)); }
.sr-quote.is-done { display: none; }
.sr-quote-head { display: flex; gap: .7rem; color: var(--y); margin-bottom: .4rem; }
.sr-quote-head svg { flex: none; margin-top: .15rem; }
.sr-quote-title { margin: 0; font-family: var(--fd); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #fff; }
.sr-quote-sub { margin: .25rem 0 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.55; color: #9a9a9a; }
.sr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sr-field { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; min-width: 0; }
.sr-field label { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #a8a8a8; }
.sr-field label em { font-style: normal; letter-spacing: 0; text-transform: none; color: #8a8a8a; font-weight: 600; }
.sr-field input, .sr-field select { width: 100%; min-height: 48px; font-family: var(--ft); font-size: var(--t14); color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: .75rem .9rem; transition: border-color .2s, box-shadow .2s; }
.sr-field input::placeholder { color: #7a7a7a; }
.sr-field input:focus, .sr-field select:focus { outline: none; border-color: var(--y); box-shadow: 0 0 0 3px rgba(var(--y-rgb), .14); }
.sr-field input[aria-invalid="true"], .sr-field select[aria-invalid="true"] { border-color: #ff7b7b; }
.sr-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
/* Rego + State: the plate takes the width, the state stays beside it at every size (book.html's .bk-rego-row) */
.sr-field-row.sr-rego-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.sr-field select { appearance: none; padding-right: 2.2rem; cursor: pointer; color-scheme: dark;
    background: rgba(0,0,0,.35) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") no-repeat right .8rem center / 16px; }
.sr-field select option { background: #141414; }
.sr-rego { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.sr-rego::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }
.sr-hint { margin: .45rem 0 0; font-family: var(--ft); font-size: var(--t12); line-height: 1.5; color: #8f8f8f; }
.sr-hint a { color: var(--y); text-decoration: underline; }
.sr-err { margin: .9rem 0 0; font-family: var(--ft); font-size: var(--t13); line-height: 1.55; color: #ffb4b4; background: rgba(255,80,80,.08); border: 1px solid rgba(255,80,80,.3); border-radius: var(--r); padding: .6rem .8rem; }
.sr-err[hidden] { display: none; }
.sr-send { position: relative; overflow: hidden; width: 100%; margin-top: 1.05rem; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: .7rem; cursor: pointer;
    background: var(--y); color: #0a0a0a; border: 0; border-radius: var(--r); font-family: var(--fd); font-size: var(--t13); font-weight: 800; letter-spacing: var(--caps); text-transform: uppercase; transition: box-shadow .3s; }
.sr-send:hover { box-shadow: 0 0 34px rgba(var(--y-rgb), .4); }
.sr-send[disabled] { cursor: progress; }
.sr-send-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #0a0a0a; opacity: .5; }
.sr-send.is-busy .sr-send-prog { animation: srProg 1.4s var(--ease) forwards; }
@keyframes srProg { to { width: 100%; } }
.sr-fine { margin: .8rem 0 0; font-family: var(--ft); font-size: var(--t12); line-height: 1.6; color: #8a8a8a; }
.sr-ts { margin-top: 1rem; min-height: 65px; }
.sr-ts[hidden] { display: none; }
.sr-err button { background: none; border: 0; padding: 0; color: var(--y); text-decoration: underline; cursor: pointer; font-weight: 600; }
.sr-booklink { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .7rem; padding: 12px var(--cp); border: 1px solid var(--line2); border-radius: var(--r); color: #bdbdbd; font-family: var(--ft); font-size: var(--t13); transition: border-color .2s, color .2s; }
.sr-booklink b { font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #fff; white-space: nowrap; }
.sr-booklink:hover { border-color: var(--line3); color: #fff; }
.sr-booklink[hidden] { display: none; }
/* the last car's quote, after a different car is chosen: its car and ref only, no figures */
.sr-prev { margin: 1.1rem 0 0; padding: .6rem var(--cp); border: 1px dashed var(--line2); border-radius: var(--r); font-family: var(--ft); font-size: var(--t13); line-height: 1.5; color: var(--dim); }
.sr-prev[hidden] { display: none; }
.sr-rstatus.is-warn { color: #ffcf99; }
.sr-rstatus.is-wait { color: #bdbdbd; }
/* the site's form messages (contact.js: .cx-err under a field, .cx-fail with Try again, the .cx-done sent panel) in the configurator */
.sr-field .cx-err { margin: 0; }
.sr-quote .cx-fail { margin-top: 1rem; }
.sr-rlead .cx-done, .sr-rlead .cx-fail { margin: 0; }
.sr-fallback { margin-left: .9rem; padding: .7rem 0; background: none; border: 0; color: var(--y); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sr-fallback[disabled] { cursor: progress; opacity: .7; }

.sr-result { margin-top: 1.1rem; border: 1px solid var(--y); border-radius: var(--r); background: #0e0e0e; box-shadow: 0 0 60px rgba(var(--y-rgb), .09); outline: none; overflow: hidden; }
.sr-result[hidden] { display: none; }
.sr-result.is-in { animation: srResult .7s var(--ease); }
@keyframes srResult { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.sr-result-head { padding: var(--cp); border-bottom: 1px solid var(--line); }
.sr-result-head span { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--y); }
.sr-result-head h3 { margin: .3rem 0 .15rem; font-family: var(--fl); font-size: var(--t20); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #fff; line-height: 1.3; }
.sr-nw { font-style: normal; white-space: nowrap; }
.sr-result-head small { font-family: var(--fl); font-size: var(--t13); font-weight: 600; letter-spacing: 0; color: #9a9a9a; }
.sr-rrow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem var(--cp); border-bottom: 1px solid var(--line); font-family: var(--ft); font-size: var(--t13); color: #d6d6d6; }
.sr-rrow > span { min-width: 0; overflow-wrap: anywhere; }
.sr-rrow small { display: block; font-size: var(--t12); color: #7d7d7d; margin-top: .1rem; }
.sr-rrow b { font-family: var(--fd); font-size: var(--t13); color: #fff; white-space: nowrap; font-weight: 700; text-align: right; }
.sr-rrow b small { font-family: var(--ft); font-weight: 400; }
.sr-rrow b.is-q { font-family: var(--fl); font-size: var(--t12); letter-spacing: var(--caps); text-transform: uppercase; color: #aaa; }
.sr-rrow b.is-in { font-family: var(--fl); font-size: var(--t12); letter-spacing: var(--caps); text-transform: uppercase; color: var(--g); }
.sr-rtotal { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: var(--cp); background: linear-gradient(90deg, rgba(var(--y-rgb), .08), transparent); }
.sr-rtotal > span { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #ddd; white-space: nowrap; }
.sr-rtotal div { text-align: right; }
.sr-rtotal b { display: block; font-family: var(--fd); font-size: var(--t28); font-weight: 900; color: var(--y); line-height: 1.05; letter-spacing: .04em; }
.sr-rtotal b.is-text { font-size: var(--t20); line-height: 1.2; text-wrap: balance; }   /* 'Priced by our team' stays on one line */
.sr-rtotal small { display: block; font-family: var(--ft); font-size: var(--t12); color: #9a9a9a; margin-top: .25rem; }
.sr-rnotes { list-style: none; margin: 0; padding: .3rem var(--cp) .5rem; }
.sr-rnotes li { font-family: var(--ft); font-size: var(--t12); line-height: 1.6; color: #8d8d8d; padding: .15rem 0; }
.sr-rstatus { margin: 0; padding: 12px var(--cp); border-top: 1px solid var(--line); font-family: var(--ft); font-size: var(--t13); line-height: 1.55; color: #9ee6b5; }
.sr-ractions { display: flex; gap: .5rem; padding: 0 var(--cp) var(--cp); flex-wrap: wrap; background: linear-gradient(90deg, rgba(var(--y-rgb), .08), transparent); border-bottom: 1px solid var(--line); }   /* one block with .sr-rtotal above it */
.sr-ractions a, .sr-ractions button { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r); cursor: pointer; font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; }
.sr-ractions a { background: var(--y); color: #0a0a0a; border: 1px solid var(--y); }
.sr-ractions button { background: transparent; color: #ddd; border: 1px solid var(--line2); }
.sr-ractions button:hover { border-color: var(--line3); color: #fff; }
.sr-result.is-stale .sr-rtotal b { color: #6f6f6f; }
.sr-stale { margin: 0; padding: 12px var(--cp); font-family: var(--ft); font-size: var(--t13); color: #ffcf99; background: rgba(255,159,67,.08); border-bottom: 1px solid var(--line); }
.sr-stale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sr-stale [data-reprice] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--cp); cursor: pointer; background: var(--y); color: #0a0a0a; border: 0; border-radius: var(--r);
    font-family: var(--fd); font-size: var(--t13); font-weight: 800; letter-spacing: var(--caps); text-transform: uppercase; }
.sr-result.is-stale .sr-ractions a { display: none; }   /* a stale price can't be booked: Update my price comes first */
/* booking fee ($500 book-in + dyno tuner consult) under the price card; hidden while the price is stale */
.sr-book { padding: var(--cp); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--y-rgb), .05), transparent 70%); }
.sr-result.is-stale .sr-book { display: none; }
.sr-book-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.sr-book-head b { font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: #fff; line-height: 1.35; min-width: 0; }
.sr-book-fee { flex: none; font-family: var(--fd); font-size: var(--t16); font-weight: 800; color: var(--y); }
.sr-book-sub { margin: .4rem 0 .8rem; font-family: var(--ft); font-size: var(--t13); line-height: 1.55; color: #b4b4b4; }
.sr-book-open { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--y); border: 1px solid var(--y); border-radius: var(--r);
    font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; }
.sr-book-open:hover, .sr-book-open[aria-expanded="true"] { background: rgba(var(--y-rgb), .1); }
.sr-book-open[hidden], .sr-book-panel[hidden] { display: none; }
.sr-book-panel { margin-top: .9rem; }
.sr-book-pts { list-style: none; margin: 0; padding: 0; }
.sr-book-pts li { position: relative; padding: .15rem 0 .15rem 1rem; font-family: var(--ft); font-size: var(--t12); line-height: 1.6; color: #a9a9a9; }
.sr-book-pts li::before { content: ''; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--y); }
.sr-terms { margin-top: 1rem; }
.sr-check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-family: var(--ft); font-size: var(--t13); line-height: 1.55; color: #d6d6d6; }
.sr-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--y); cursor: pointer; }
.sr-check input[aria-invalid="true"] { outline: 2px solid #ff7b7b; outline-offset: 2px; }
.sr-check a { color: var(--y); text-decoration: underline; text-underline-offset: 2px; }
.sr-terms .cx-err { margin: .45rem 0 0 2.15rem; }
.sr-book-pay { margin-top: 1rem; }
.sr-book-status:empty { display: none; }
.sr-book-status { margin-top: .9rem; }
.sr-book-status .cx-done, .sr-book-status .cx-fail, .sr-book-status .sr-err { margin: 0; }

/* =====================================================================
   BUILD BAR
   ===================================================================== */
.sr-bar { grid-row: 2; grid-column: 1 / -1; position: relative; z-index: 6; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); padding: 0 clamp(16px, 2vw, 28px);
    background: rgba(9,9,9,.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.sr-bar::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: var(--prog, 25%); background: linear-gradient(90deg, rgba(var(--y-rgb), 0), var(--y)); transition: width .6s var(--ease); }
.sr-bar-car { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1 1 auto; }
.sr-bar-thumb { flex: none; width: 76px; height: 48px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line2); background: #111; }
.sr-bar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-bar-thumb.is-type img { display: none; }
.sr-bar-thumb.is-type::after { content: attr(data-t); width: 100%; height: 100%; font-size: var(--t14); }
.sr-bar-txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sr-bar-txt b { font-family: var(--fd); font-size: var(--t13); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-bar-txt span { font-family: var(--fl); font-size: var(--t13); font-weight: 600; letter-spacing: 0; color: #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the spec cells are not shown; the build code (#srCode) shows as a slanted plate on wide desktops (below) */
.sr-bar-specs, .sr-bar-code { display: none; }
@media (min-width: 1200px) and (min-height: 501px) {
    /* between the car and the actions, so a new code never moves the buttons */
    .sr-app:not([data-step="0"]) .sr-bar-code { order: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; padding-right: 18px; border-right: 1px solid var(--line); }
    .sr-bar-act { order: 2; }
    .sr-bar-code span { font-family: var(--fl); font-size: var(--t12); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
    .sr-bar-code b { padding: 3px 12px; white-space: nowrap; }
    .sr-bar-code b.is-new::after { animation: srCodeNew .7s var(--ease); }
}
@keyframes srCodeNew { from { opacity: 1; } to { opacity: 0; } }

/* actions, in tab order: Back, one text action (Skip to price / Talk to us first), then the step's one yellow primary
   (Next; on the price step the CTA: Show my price, Update my price, Book this build) */
.sr-bar-act { flex: none; display: flex; align-items: center; gap: .75rem; }
.sr-back { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: 0 1.1rem; cursor: pointer; border-radius: var(--r);
    background: transparent; border: 1px solid var(--line2); color: #bdbdbd; font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; transition: border-color .25s, color .25s; }
.sr-back:hover { border-color: var(--line3); color: #fff; }
.sr-back[hidden] { display: none; }
.sr-cta, .sr-help { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 .25rem; cursor: pointer; background: transparent; border: 0; color: #cfcfcf;
    font-family: var(--fl); font-size: var(--t14); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); white-space: nowrap; transition: color .2s; }
.sr-cta:hover, .sr-help:hover { color: #fff; text-decoration-color: currentColor; }
.sr-cta svg { display: none; transition: transform .25s; }
.sr-cta[hidden], .sr-help[hidden] { display: none; }
/* the step's primary: a slanted yellow slab (the slab is clipped inside the button, which keeps its square focus ring) */
.sr-next, .sr-app[data-step="3"] .sr-cta { position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: 0 1.6rem; cursor: pointer; border: 0; border-radius: 0;
    background: none; color: #0a0a0a; font-family: var(--fd); font-size: var(--t14); font-weight: 800; letter-spacing: var(--caps); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .2s; }
.sr-next::before, .sr-app[data-step="3"] .sr-cta::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--y); clip-path: var(--slant); }
.sr-next:focus-visible, .sr-app[data-step="3"] .sr-cta:focus-visible { outline-color: #fff; }
.sr-app[data-step="3"] .sr-cta svg { display: block; }
.sr-next svg { flex: none; transition: transform .25s; }
.sr-next:hover, .sr-app[data-step="3"] .sr-cta:hover { color: #0a0a0a; filter: drop-shadow(0 0 16px rgba(var(--y-rgb), .45)); transform: translateY(-1px); }
.sr-next:hover svg, .sr-app[data-step="3"] .sr-cta:hover svg { transform: translateX(3px); }
.sr-next[hidden] { display: none; }
.sr-cta[aria-disabled="true"] { cursor: progress; opacity: .75; filter: none; transform: none; }
/* the price step's Send (or the price card's Book / Update) is on screen: the bar's CTA steps aside (syncCta) */
.sr-app[data-step="3"].is-cta-dup .sr-cta { display: none; }
.sr-cta[aria-disabled="true"] svg { transform: none; }

/* =====================================================================
   BELOW THE CONFIGURATOR
   ===================================================================== */
.sr-after { padding: 5rem 0 4rem; background: #0c0c0c; border-top: 1px solid var(--line); }
.sr-after-h { margin: .6rem 0 2rem; font-family: var(--fd); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.sr-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; margin-bottom: 4rem; }
.sr-intro .sr-after-h { margin-bottom: 1rem; }
.sr-intro p { margin: 0; font-family: var(--ft); font-size: .92rem; line-height: 1.8; color: #a9a9a9; font-weight: 300; max-width: 640px; }
.sr-intro p a { color: var(--y); }
.sr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.sr-stats div { padding: 1.1rem 0 0; display: flex; flex-direction: column-reverse; gap: .2rem; }
.sr-stats dd { margin: 0; font-family: var(--fd); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; color: #fff; letter-spacing: .02em; line-height: 1; }
.sr-stats dt { font-family: var(--fl); font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--y); }

/* FAQ + closing call to action */
.pk-section { padding: 5rem 0; position: relative; }
.pk-section .section-header { margin-bottom: 2.8rem; }
.pk-faq { max-width: 820px; margin: 0 auto; }
.pk-faq details { border-top: 1px solid var(--line); }
.pk-faq details:last-child { border-bottom: 1px solid var(--line); }
.pk-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem .2rem; font-family: var(--font-body); font-size: 1.12rem; font-weight: 600; color: #eee; }
.pk-faq summary::-webkit-details-marker { display: none; }
.pk-faq summary::after { content: '+'; font-family: var(--font-display); color: var(--y); transition: transform .25s; }
.pk-faq details[open] summary::after { transform: rotate(45deg); }
.pk-faq summary:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.pk-faq p { font-family: var(--font-ui); font-size: .86rem; color: #a5a5a5; line-height: 1.75; margin: 0 0 1.3rem; padding: 0 .2rem; font-weight: 300; }
.pk-faq a { color: var(--y); }
.pkg-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.sr-proc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sr-proc li { background: #0c0c0c; padding: 1.7rem 1.4rem; }
.sr-proc b { display: block; font-family: var(--fd); font-size: 1.9rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(var(--y-rgb), .7); margin-bottom: .8rem; }
.sr-proc h3 { margin: 0 0 .5rem; font-family: var(--fl); font-size: .86rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.sr-proc p { margin: 0; font-family: var(--ft); font-size: .8rem; line-height: 1.7; color: #999; font-weight: 300; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Narrower desktops: a wider rail, so the car step's search and the step cards keep their room,
   and the priced badge drops under the title and 'Change car' (centred, it would cover the button) */
@media (max-width: 1280px) {
    :root { --rail-w: clamp(420px, 44vw, 520px); }
    .sr-priced { left: clamp(20px, 3vw, 44px); transform: none; top: calc(clamp(18px, 2.6vh, 28px) + 110px); max-width: calc(100% - 2 * clamp(20px, 3vw, 44px)); white-space: normal; }
    #srP0 { grid-template-columns: 196px minmax(0, 1fr); gap: 0 24px; }
    #srP0 .sr-h { font-size: var(--t16); }   /* 'Choose your car' on one line */
    .sr-tiles { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); }
}
/* Short desktop windows: tighter chrome around the rail, and a tighter caption so the car still shows */
@media (min-width: 901px) and (max-height: 820px) and (min-height: 501px) {
    :root { --bar-h: 68px; }
    .sr-tab { min-height: 54px; padding: .7rem .2rem .6rem; }
    .sr-panel { padding-top: 1.2rem; }
    .sr-head { margin-bottom: 1rem; }
    /* the showroom keeps every make on screen: the tab above already says 'Step 01 · Car', and the bar names the car */
    .sr-app[data-step="0"] .sr-tab-sub { display: none; }
}
/* Desktop windows up to 960px tall: the full make column (575px with ten makes) is taller than the panel above the build
   bar, so it drops the kicker (the tab says 'Step 01') and tightens to 36px rows (about 500px) */
@media (min-width: 901px) and (max-height: 960px) and (min-height: 501px) {
    #srP0 { padding-top: 16px; }
    #srP0 .sr-kicker { display: none; }
    .sr-filter { gap: 10px; }
    .sr-make { min-height: 36px; }
}
/* under 880px even that is taller than the panel: sticky, its last makes and the 'Make not here?' line would never
   scroll out from under the bar, so it scrolls with the cards */
@media (min-width: 901px) and (max-height: 880px) and (min-height: 501px) {
    .sr-filter { position: static; }
}
@media (min-width: 901px) and (max-height: 780px) and (min-height: 501px) {
    .sr-cap-title { font-size: clamp(1.8rem, 3.4vw, 3.2rem); }
    .sr-cap-title.is-l { font-size: clamp(1.6rem, 2.9vw, 2.7rem); }
    .sr-cap-title.is-m { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
    .sr-hud { margin-top: .6rem; }
}
@media (max-width: 900px), (max-height: 500px) {
    .sr-sc[aria-checked="true"] { box-shadow: 0 0 0 1px var(--y); }   /* phones: the ring without the wide glow (a stage tap paints less) */
    :root { --bar-h: 68px; --pad: 16px; }
    /* focus and scrolled-to content stay clear of the fixed nav, sticky step tabs and sticky build bar */
    html { scroll-padding-top: calc(var(--nav-h) + 62px); scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px); }
    .sr-app { display: flex; flex-direction: column; height: auto; min-height: 0; }
    /* the car as a compact band (make, name, engine and the Rev pill), so each step's content sits near the top.
       The gains, chips, counter, tacho and upgrade slots are left to the steps themselves (the slot buttons stay in the
       DOM; step 03 shows the same) */
    .sr-stage { height: 176px; min-height: 0; max-height: none; flex: none; }
    .sr-stage .sr-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .sr-ctr, .sr-hud, .sr-tach, .sr-change { display: none; }   /* the Car tab changes the car */
    /* the slots: a scroll row under the band (stock ones as dimmed tiles), height held from the first paint */
    .sr-slotbar { align-self: stretch; height: 61px; padding: 8px 0; background: #0b0b0b; border-bottom: 1px solid var(--line); pointer-events: auto; flex: none; }
    .sr-slots { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 40px 0 16px; scroll-padding: 0 16px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
    .sr-slots::-webkit-scrollbar { display: none; }
    .sr-slot { flex: none; min-height: 44px; padding: 3px 12px 4px 10px; -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #121212; }
    .sr-slot small { max-width: 180px; }
    .sr-slot.is-stock { display: inline-grid; grid-template-columns: 1fr; width: 44px; padding: 0; place-items: center; opacity: .45; }
    .sr-slot.is-stock :is(b, em, small) { display: none; }
    .sr-slot.is-stock .sr-slot-ic { grid-row: auto; }
    .sr-slot:hover { transform: none; }
    .sr-slot-more { flex: none; width: 1px; min-height: 0; padding: 0; margin-left: -8px; overflow: hidden; }   /* the tiles show the stock areas; the names stay for screen readers */
    .sr-slot-more > [aria-hidden] { display: none; }
    .sr-flash { display: none; }   /* phones: the level-up banner instead (the band is usually off screen) */
    .sr-type, .sr-type.is-long { font-size: 0; }   /* the band is all caption: the stripes only, the name is right there */
    .sr-shift { left: 16px; right: 280px; }   /* clear of the Rev + sound-effects row at its revving scale */
    .sr-cap { left: 16px; right: 16px; bottom: 14px; }
    .sr-cap-make { font-size: var(--t12); letter-spacing: var(--caps); }
    .sr-cap-make::before { width: 18px; }
    .sr-cap-title, .sr-cap-title.is-l, .sr-cap-title.is-m { font-size: clamp(1.25rem, 6vw, 1.6rem); margin: .3rem 0 .25rem; }
    .sr-cap-sub { font-size: var(--t13); letter-spacing: var(--caps); }
    /* the rev cluster is only the Rev pill, top right */
    .sr-cluster { top: 12px; right: 12px; bottom: auto; padding: 0; gap: 0; background: none; border: 0; border-radius: 40px; -webkit-backdrop-filter: none; backdrop-filter: none; transform-origin: 100% 0; }
    .sr-cluster-side { max-width: none; align-items: center; }
    .sr-rev { margin: 0; padding: 0 .9rem; min-height: 44px; font-size: var(--t12); letter-spacing: var(--caps); gap: .4rem; white-space: nowrap; }
    .sr-rev svg { width: 14px; height: 14px; }
    .sr-stage.is-revving .sr-cluster { transform: scale(1.12); background: none; box-shadow: none; }
    /* the sound-effects pill beside Rev it (a tall caption rises to the row under the pill); the priced badge, after a
       quote, takes a row of its own under them and the band grows (fitPriced in JS) to keep the caption clear */
    .sr-sfx { position: static; }
    .sr-priced { top: 64px; left: 16px; transform: none; font-size: var(--t12); letter-spacing: var(--caps); padding: .4rem .7rem; max-width: calc(100% - 32px); white-space: normal; }

    .sr-rail { border-left: 0; display: block; background: #0d0d0d; overflow-x: clip; }   /* the step slide-in can't widen the page */
    /* the fixed nav and the sticky tabs are solid here: nothing scrolling under them shows through */
    .navbar.scrolled { background: #0a0a0a; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .sr-tabs { position: sticky; top: var(--nav-h); z-index: 7; display: flex; overflow-x: auto; scrollbar-width: none; background: #0d0d0d; }
    .sr-tabs::-webkit-scrollbar { display: none; }
    .sr-tab { flex: 1 1 0; min-width: 66px; min-height: 54px; padding: .55rem .1rem .5rem; gap: .12rem; }
    .sr-tab span { font-size: var(--t13); letter-spacing: var(--caps); }
    .sr-tab-sub { display: none; }
    .sr-tab b { font-size: var(--t12); }
    .sr-tab b, .sr-tab span { line-height: 1.15; }   /* the tabs stay 54px tall on the larger type */
    .sr-tabs-fill { display: none; }
    .sr-tab[aria-selected="true"]::before { inset: 6px 4px; }
    .sr-panels { overflow: visible; }
    /* each step fills the screen under the sticky tabs, so the build bar always sits at the foot of the screen after a
       step change, never mid-screen over the next section (30px: the 54px tabs and the 4px gap the heading lands under them
       with, less the panel's top padding) */
    .sr-panel { padding: 1.3rem 16px 1.4rem; min-height: calc(100vh - var(--nav-h) - 30px - var(--bar-h)); min-height: calc(100svh - var(--nav-h) - 30px - var(--bar-h) - env(safe-area-inset-bottom)); }
    .sr-panel .sr-kicker { display: none; }   /* the sticky tab above names the step; a step change lands its heading under it */
    .sr-h { font-size: var(--t18); }
    /* body text is 14px on phones (fine print stays 12px) */
    .sr-sub, .sr-desc, .sr-list li, .sr-claims, .sr-warranty, .sr-dpnote, .sr-opt-txt small, .sr-incl-pub, .sr-none-hw, .sr-quote-sub,
    .sr-sum-txt, .sr-bd-items li, .sr-bd-use, .sr-rrow, .sr-rstatus, .sr-err, .sr-prev { font-size: var(--t14); }

    /* step 01: the banner is a 90px band (the H1 on one line, then '41 models · 10 makes'), every make shows as a
       wrapping chip, and the cards are 80px rows */
    .sr-app[data-step="0"] .sr-stage { height: 90px; }
    .sr-app[data-step="0"] .sr-stage .sr-h1 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; font-size: var(--t18); }
    .sr-app[data-step="0"] .sr-h1 em { display: none; }
    .sr-app[data-step="0"] .sr-stage-top { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 16px; }
    .sr-app[data-step="0"] .sr-range { gap: 0; }
    .sr-app[data-step="0"] .sr-range { align-items: baseline; }
    .sr-range div { flex-direction: row-reverse; align-items: baseline; gap: 5px; }
    .sr-range div + div::after { content: '·'; margin: 0 10px; font-family: var(--fl); font-weight: 700; color: var(--dim); }   /* row-reverse: shows before the number */
    .sr-range div:nth-child(3) { display: none; }
    .sr-range dd { font-size: var(--t16); }
    #srP0 { display: block; max-width: none; padding: 16px 16px 20px; }
    .sr-filter { position: static; gap: 12px; margin-bottom: 14px; }
    #srP0 .sr-kicker, .sr-makes-more { display: none; }
    #srP0 .sr-h { margin: 0; }
    .sr-makes { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .sr-make { width: auto; min-height: 40px; padding: 0 10px; gap: 6px; border: 1px solid var(--line2); border-radius: var(--r); }
    .sr-make b { font-size: var(--t13); letter-spacing: 0; }   /* the chips wrap into as few rows as they can */
    .sr-make[aria-pressed="true"] { border-color: var(--y); background: rgba(var(--y-rgb), .08); }
    .sr-results-h:not(.is-search) { display: none; }   /* the pressed chip names the make; a search keeps its heading */
    .sr-tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
    .sr-tile { flex-direction: row; min-height: 80px; }
    .sr-tile:hover { transform: none; }
    .sr-tile-ph { width: 112px; flex: none; aspect-ratio: auto; }
    .sr-tile-ph img { position: absolute; inset: 0; }
    .sr-tile-ph::after { background: linear-gradient(270deg, rgba(18,18,18,.6), rgba(18,18,18,0) 60%); }
    .sr-tile-body { flex: 1; min-width: 0; justify-content: center; gap: 4px; padding: 8px 34px 8px 12px; }
    .sr-tile-name { font-size: var(--t16); }
    .sr-tile-go { display: none; }
    .sr-tile-foot { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
    .sr-tile-meta { font-size: var(--t12); }
    .sr-tile-check { top: 8px; right: 8px; width: 20px; height: 20px; }
    .sr-tile-ph.is-type { padding: 8px 10px; gap: 2px; }
    .sr-tile-ph.is-type b { font-size: var(--t16); }
    .sr-tile-ph.is-type b.is-long { font-size: var(--t12); }
    .sr-tile-ph.is-type small, .sr-tile-ph.is-type .sr-tile-code { display: none; }   /* the row names the make and the code */
    .sr-tile-code { left: 6px; top: 6px; }

    .sr-bar { position: sticky; bottom: 0; height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom) 12px; gap: .7rem; flex: none;
        background: #090909; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* solid, like the nav and tabs: nothing shows through */
    .sr-bar-thumb { display: none; }
    .sr-bar-txt b { font-size: var(--t12); }
    .sr-bar-txt span { font-size: var(--t12); }
    /* the car shows on step 01 (two lines); after that the bar is only the actions, the primary taking the room */
    .sr-bar-car { flex: 1 1 0; }
    .sr-app:not([data-step="0"]) .sr-bar-car { display: none; }
    .sr-app:not([data-step="0"]) .sr-bar-act { flex: 1; min-width: 0; }
    .sr-bar-act { gap: .5rem; }
    .sr-back { width: 48px; padding: 0; }
    .sr-back span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .sr-help { padding: 0; }   /* one line, like the rest of the bar */
    .sr-next, .sr-app[data-step="3"] .sr-cta { flex: 1; min-width: 0; min-height: 48px; padding: 0 .9rem; gap: .5rem; font-size: var(--t13); }

    .sr-proc { grid-template-columns: 1fr 1fr; }
    .sr-intro { grid-template-columns: 1fr; margin-bottom: 3rem; }
    .sr-after { padding: 3.6rem 0 3rem; }

    /* the downpipe bay fits one screen between the tabs and the build bar: photo, both types, all three finishes */
    .sr-dpbox { padding: 12px 10px 10px; margin-left: -6px; margin-right: -6px; }
    .sr-dpbox > .sr-lbl { margin-bottom: 8px; }
    .sr-view { margin-bottom: 10px; }
    .sr-view figcaption { margin-top: 6px; line-height: 1.4; }
    .sr-dia svg { max-width: 96px; }
    .sr-dpbox .sr-dp + .sr-sub-lbl { margin-top: .6rem; }
    .sr-inset { display: none; }   /* phones: the bay plays the moment itself, and the banner covers an off-screen bay */
    /* the toast: a yellow banner over the build bar, or under the tabs (.is-top, packages-page.js toast) */
    .sr-toast { position: fixed; z-index: 9; top: auto; left: 12px; right: 12px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 10px); width: auto; max-width: none; margin: 0;
        gap: 0; padding: 10px 14px; background: var(--y); border: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); box-shadow: 0 10px 28px rgba(0,0,0,.55); transform: translateY(12px); }
    .sr-toast.is-top { bottom: auto; transform: translateY(-12px); }
    .sr-toast.is-on { transform: none; }
    .sr-toast-pic { display: none; }
    .sr-toast-tx { flex-direction: row; align-items: baseline; gap: 0; white-space: nowrap; overflow: hidden; }
    .sr-toast-tx small, .sr-toast-tx b { font-family: var(--fl); font-size: var(--t14); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0a0a0a; line-height: 1.2; }
    .sr-toast-tx small::after { content: '\00a0·\00a0'; }
    .sr-toast-tx b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    /* the level-up banner wraps rather than cutting a word off (its placement measures its height) */
    .sr-toast.is-level { gap: 10px; padding: 8px 14px 8px 10px; }
    .sr-toast.is-level .sr-toast-tx { display: block; white-space: normal; overflow: visible; line-height: 1.2; }
    .sr-toast.is-level .sr-toast-tx b { overflow: visible; }
    .sr-toast-tx em { display: flex; flex-wrap: wrap; gap: 0 1.1em; margin-top: 2px; font-style: normal; font-family: var(--fl); font-size: var(--t13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0a0a0a; line-height: 1.25; }
}
@media (max-width: 560px) {
    .sr-field-row { grid-template-columns: 1fr; }
    .sr-sc { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
    .sr-sc .sr-meter { display: none; }
    .sr-sc[aria-checked="true"] .sr-sc-top { padding-right: 92px; }   /* the name and tag clear the 'Selected' tab (no meter column here) */
    .sr-dpcard { padding: 8px 10px; }
    .sr-dpcard .use { font-size: var(--t12); }
    .sr-dpfin .sr-dpcard { padding: 0 0 7px; }
    .sr-dpfin .sr-dpcard b, .sr-dpfin .sr-dpcard .use { padding: 0 5px; }
    .sr-proc { grid-template-columns: 1fr; }
    /* one slot per row, the part beside its name where it fits (the open grid stays about a screen tall) */
    .sr-sheet-grid { grid-template-columns: 1fr; gap: 4px; }
    .sr-sheet-cell > small { flex-basis: auto; }
    .sr-sheet-code b { padding: 2px 8px; letter-spacing: .02em; }   /* the longest codes stay on one line at 390 */
    .pk-section { padding: 3.6rem 0; }
    .pkg-cta-actions .btn { width: 100%; justify-content: center; }
}
@media (max-height: 500px) {
    .sr-stage { height: 120px; }
    /* the step tabs on one line, so more of each step is above the build bar */
    .sr-tab { flex-direction: row; justify-content: center; min-height: 44px; padding: .3rem .1rem; gap: .4rem; }
    /* step 01: a one-row band, and the heading for screen readers only (the tab says 'Car'), so the search and every
       make chip are on screen above the build bar */
    .sr-app[data-step="0"] .sr-stage { height: 44px; }
    .sr-app[data-step="0"] .sr-stage-top { flex-direction: row; align-items: center; justify-content: space-between; }
    .sr-app[data-step="0"] .sr-stage .sr-h1 { font-size: var(--t16); }
    #srP0 { padding-top: 6px; }
    .sr-make { min-height: 36px; }   /* with the band and tabs above, two rows of make chips clear the bar at 360px tall */
    #srP0 .sr-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .sr-filter { gap: 8px; }
    .sr-search input { min-height: 44px; padding-top: .6rem; padding-bottom: .6rem; }
    /* the level-up banner sits over the 44px step tabs (packages-page.js toast): two tight lines */
    .sr-toast.is-level { min-height: 44px; padding: 4px 12px 4px 8px; }
    .sr-toast.is-level .sr-toast-tx :is(small, b) { font-size: var(--t13); line-height: 1.15; }
    .sr-toast.is-level .sr-toast-tx em { font-size: var(--t12); line-height: 1.15; }
    .sr-toast.is-level .sr-plate { height: 22px; }
}
/* phone landscape: the bay's photo beside the type and finish cards, so all of it fits the short screen */
@media (max-height: 500px) and (min-width: 600px) {
    #srDp:not([hidden]) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 14px; align-items: start; }
    #srDp > * { grid-column: 2; }
    #srDp > .sr-lbl { grid-column: 1 / -1; }
    #srDp > .sr-view { grid-column: 1; grid-row: 2 / span 5; margin: 0; }
    #srDp .sr-sub-lbl small { display: none; }
    #srDp [data-kind="dp"] .sr-dpcard { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-content: center; column-gap: 10px; row-gap: 1px; padding: 5px 10px; min-height: 44px; }
    #srDp [data-kind="dp"] .sr-dpcard b { font-size: var(--t13); }
    #srDp .sr-dia { grid-row: 1 / 3; align-self: center; width: 54px; margin: 0; }
    #srDp .sr-dia svg { max-width: 54px; }
    #srDp .sr-dpfin .sr-dpcard b { margin-top: 5px; font-size: var(--t12); }
    #srDp .sr-fin-pic { aspect-ratio: 16 / 7; }
    #srDp .sr-sub-lbl { margin-bottom: 4px; }
    #srDp .sr-dp + .sr-sub-lbl { margin-top: 8px; }
}
@media (max-width: 380px) {
    .sr-tab { min-width: 0; }
    .sr-next, .sr-app[data-step="3"] .sr-cta { padding: 0 .7rem; }
    .sr-next svg, .sr-app[data-step="3"] .sr-cta svg { display: none; }
    .sr-maps { grid-template-columns: 1fr; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sr-photo.is-on { animation: none; transform: scale(1.03); }
    .sr-photo { transition: opacity .25s linear; }
    .sr-stage.is-punch .sr-photos, .sr-sweep.is-go, .sr-flash.is-go, .sr-cap-title.is-in,
    .sr-rev.is-live, .sr-result.is-in, .sr-priced { animation: none !important; }
    .sr-panel.is-in, .sr-panel.is-in-back { animation: srFade .2s linear; }
    .sr-stage.is-revving .sr-cluster { transform: none; }
    .sr-tile:hover, .sr-next:hover, .sr-app[data-step="3"] .sr-cta:hover, .sr-slot:hover { transform: none; }
    .sr-slot.is-changed, .sr-slot.is-changed::after, .is-target { animation: none; }
    .sr-sheet > summary::after { transition: none; }
    /* game skin: no slam, neon flicker, sticker tilt or scale; the state and text still change at once */
    .sr-neon.is-on, .sr-flash.is-go b, .sr-bar-code b.is-new::after { animation: none; }
    .sr-sc-badge, .sr-sc[aria-checked="true"] .sr-sc-badge { transition: none; transform: none; }
    .sr-next, .sr-app[data-step="3"] .sr-cta { transition: none; }
    /* equip moments: the state, captions and code change at once; no wipe, scan, stamp, flash, inset or banner motion */
    .sr-view-pic.is-in, .sr-view.is-equip .sr-scan, .sr-view.is-equip .sr-stamp, .sr-view-tag span.is-flash, .sr-dpcard.is-run .flow, .sr-opt.is-equip,
    .sr-inset.is-on .sr-inset-ph > * { animation: none; }
    .sr-stamp, .sr-scan, .sr-inset { display: none; }
    .sr-toast, .sr-toast.is-top, .sr-toast.is-on, .sr-inset-card { transition: none; transform: none; }
    .sr-switch, .sr-switch i { transition: none; }
    .sr-tile:hover .sr-tile-ph img { transform: none; }
    .sr-meter-bar i { transition: none; }
    .sr-tabs-fill, .sr-bar::before { transition: none; }   /* the step change is instant, layout included */
}
@keyframes srFade { from { opacity: 0; } to { opacity: 1; } }

/* Very narrow phones: keep the three finish labels inside their cards */
@media (max-width: 359px) {
    .sr-dpfin .sr-dpcard b, .sr-dpfin .sr-dpcard .use { padding: 0 4px; }
    .sr-dpfin .sr-dpcard b { letter-spacing: 0.04em; overflow-wrap: anywhere; }
}

/* The sections under the configurator skip layout and paint while off screen, so a stage or finish tap only repaints
   the configurator itself (the frame after a tap stays short on phones). They render as they near the viewport */
.sr-after, .pk-section, .pkg-cta-section, .footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }