/* Website (Code)/public/assets/css/chauffeur-v2.css
   v3  ·  2026-10-28 MYT

   /chauffeur-v2: page-only rules on top of v2.css. Built after apple.com/macbook-pro (read live at 1440 wide,
   2026-10-28). */

.mbp {
    --mb-g1: linear-gradient(90deg, #d7c3a1 0%, #f3e3c3 50%, #b9945a 100%);     /* champagne */
    --mb-g2: linear-gradient(90deg, #8fb4d9 0%, #dfe9f5 50%, #7d9dc4 100%);     /* steel blue */
    --mb-silver: linear-gradient(180deg, var(--white) 0%, #c9c9ce 55%, var(--ink-3) 100%);
    --mb-cell: var(--ink);
    --mb-blue: var(--focus);
}
.mb-grad-1, .mb-grad-2, .mb-silver { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mb-grad-1 { background-image: var(--mb-g1); } .mb-grad-2 { background-image: var(--mb-g2); } .mb-silver { background-image: var(--mb-silver); }
.mb-btn--blue { background: var(--mb-blue); color: var(--white); }
.mb-btn--blue:hover { background: var(--blue-hover); }

/* Black from the top; the local nav goes dark over it (v2.js, .sec--dark). */
/* The local nav is dark from the top, as on MacBook Pro's dark page. v2.js only darkens it once a dark section is
   under it, which leaves a light bar over the black welcome. */
.mbp .ln, .mbp .ln.is-dark { background: rgba(22, 22, 23, .8); color: var(--on-dark); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16); }
.mbp .ln .ln__tab, .mbp .ln .ln__toggle { color: var(--on-dark); }
.mbp .ln .ln__tab[aria-current="true"]::after { background: var(--bg-alt); }
.mbp .ln .ln__cta { background: var(--bg-alt); color: var(--ink); }
.mbp .ln .ln__cta:hover { background: var(--white); }
@media (max-width: 833px) {
    .mbp .ln .ln__menu { background: rgba(22, 22, 23, .97); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16); }
    .mbp .ln .ln__tab { border-color: var(--hair-dark); }
    .mbp .ln .ln__tab[aria-current="true"] { color: var(--ink-3); }
}

/* ─── 1 · WELCOME ─────────────────────────────────────────────────────────── */

/* Welcome: the product name (28/600), the picture full width, a big headline, one pill and the price. */

.mb-hero { padding: 64px 0 96px; text-align: center; }
.mb-hero__name { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; color: var(--on-dark); }
.mb-hero__media { position: relative; width: min(1260px, 92vw); margin: 40px auto 0; border-radius: 28px; overflow: hidden; }
.mb-hero__media img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: 66% 18%; }
.mb-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 40%); }
.mb-hero__title { margin-top: -0.62em; position: relative; z-index: 1; font-size: 112px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; padding-bottom: .06em; }
.mb-hero__award { margin-top: 18px; color: var(--ink-3); font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; }
.mb-hero__award .fn a, .mb-hero__price .fn a { color: inherit; }
.mb-hero__buy { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 36px; }
.mb-hero__price { color: var(--on-dark); font-size: 17px; }

/* ─── 2 · PRODUCT VIEWER ──────────────────────────────────────────────────── */

/* "Get to know MacBook Pro.": a 48/600 head on #1d1d1f; on the left a column of grey pills (a plus icon and a bold
   word), the chosen one opens to a sentence; on the right a big picture that changes with it. */

.mb-viewer { padding: 120px 0; background: var(--mb-cell); }
.mb-viewer__title { font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em; color: var(--on-dark); }
.mb-viewer__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; margin-top: 56px; }
.mb-viewer__pills { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mb-pill {
    display: flex; align-items: flex-start; gap: 12px; text-align: left;
    padding: 14px 22px 14px 16px; border-radius: 28px;
    background: var(--dark-hover); color: var(--on-dark);
    font-size: 17px; line-height: 1.47059;
    transition: background-color .3s var(--ease-standard);
}
.mb-pill svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--bg-alt); color: var(--ink); stroke-width: 2.4; transition: transform .3s var(--ease-standard); margin-top: -1px; }
.mb-pill:hover { background: var(--hair-dark); }
.mb-pill[aria-expanded="true"] { background: var(--hair-dark); max-width: 420px; }
.mb-pill[aria-expanded="true"] svg { transform: rotate(45deg); }
.mb-viewer__body.is-ready .mb-pill[aria-expanded="false"] .mb-pill__more { display: none; }
.mb-pill__more { color: var(--on-dark-2); }
.mb-viewer__stage { position: relative; aspect-ratio: 16 / 11; border-radius: 28px; overflow: hidden; background: var(--black); }
.mb-viewer__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease-standard); }
.mb-viewer__stage img.is-shown, .mb-viewer__body:not(.is-ready) .mb-viewer__stage img:first-child { opacity: 1; }

/* ─── 3 to 6 · PRODUCT STORIES ────────────────────────────────────────────── */

/* Product stories: a 24/600 grey category ("Performance"), a 56/600 gradient headline, a 21px paragraph,
   then a bento of #1d1d1f cells (28px corners): a small label, a huge gradient number, a line. */

.mb-story { padding: 140px 0 120px; overflow-x: clip; }     /* the light behind the car must not widen the page */
.mb-story__cat { color: var(--ink-3); font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; }
.mb-story__title { max-width: 900px; margin-top: 10px; font-size: 64px; line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em; padding-bottom: .06em; }
.mb-story__copy { max-width: 760px; margin-top: 28px; color: var(--ink-3); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }
.mb-story__copy strong { color: var(--on-dark); }

.mb-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.mb-cell {
    display: flex; flex-direction: column;
    min-height: 300px; padding: 36px 34px;
    border-radius: 28px; background: var(--mb-cell); color: var(--on-dark);
}
.mb-cell--photo { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; }
.mb-cell--photo { background: var(--surface-dark); }
.mb-cell--photo img { width: 100%; height: 100%; object-fit: contain; }   /* a 2:1 photo: never cut the car */
.mb-cell--wide { grid-column: span 3; min-height: 0; }
.mb-cell__pre { color: var(--ink-3); font-size: 17px; line-height: 1.23536; font-weight: 600; }
.mb-cell__big { margin: auto 0 0; padding-top: 24px; font-size: 72px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; padding-bottom: .06em; }
.mb-cell__post { margin-top: 10px; color: var(--ink-3); font-size: 17px; line-height: 1.47059; }
.mb-cell__icon { width: 36px; height: 36px; color: var(--on-dark); margin-bottom: auto; }
.mb-cell__head { margin-top: 28px; font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; }
.mb-cell .fn a { color: inherit; }
.mb-cell .price__value { margin: 0; font-size: inherit; line-height: inherit; }

/* Occasions: two tall pictures with "+", then three lines */
.mb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.mb-duo__media { position: relative; aspect-ratio: 6 / 5; border-radius: 28px; overflow: hidden; background: var(--mb-cell); }
.mb-duo__media img { width: 100%; height: 100%; object-fit: cover; }
.mb-duo__copy { margin-top: 24px; max-width: 560px; color: var(--ink-3); font-size: 19px; line-height: 1.42; }
.mb-duo__copy strong { color: var(--on-dark); }
.mb-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hair-dark); }
.mb-three li { display: flex; gap: 14px; }
.mb-three svg { flex: none; width: 28px; height: 28px; color: var(--on-dark); }
.mb-three p { color: var(--ink-3); }
.mb-three strong { color: var(--on-dark); }

/* Rates: the car lit from behind, on black */
.mb-car { position: relative; width: min(760px, 87.5vw); margin: 72px auto 0; text-align: center; }
.mb-car::before { content: ''; position: absolute; inset: -10% -20% 10%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, rgba(0, 0, 0, 0)); }
.mb-car img { position: relative; width: 100%; height: auto; }
.mb-car figcaption { position: relative; margin-top: 18px; color: var(--ink-3); font-size: 17px; font-weight: 600; }
.mb-bento--rates { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
.mb-bento--rates .mb-cell { min-height: 260px; }
/* Prices line up across the row: a fixed gap under the label, whatever the note's line count. */
.mb-bento--rates .mb-cell__big { margin-top: 44px; padding-top: 0; font-size: 48px; line-height: 1.08; }
.mb-rates__cta { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 48px; }
.mb-rates__cta .more, .mb-how .link { color: var(--link-dark); }

/* How it works: silver numbers */
.mb-how { padding-bottom: 160px; }
.mb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.mb-steps li { padding: 40px 36px 44px; border-radius: 28px; background: var(--mb-cell); }
.mb-steps__n { display: block; font-size: 88px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.mb-steps h3 { margin: 22px 0 8px; font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; color: var(--on-dark); }
.mb-steps p { color: var(--ink-3); }

/* After the stories the page turns light (#f5f5f7) for "Why Apple is the best place to shop": the v2.css
   cards, FAQ and closer, unchanged. */

/* ─── BREAKPOINTS ─────────────────────────────────────────────────────────── */

@media (max-width: 1068px) {
    .mb-hero__title { font-size: 88px; }
    .mb-viewer__title { font-size: 40px; line-height: 1.1; }
    .mb-viewer__body { grid-template-columns: 1fr; }
    .mb-viewer__stage { order: -1; }
    .mb-viewer__pills { flex-direction: row; flex-wrap: wrap; }
    .mb-pill[aria-expanded="true"] { max-width: none; }
    .mb-story__title { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
    .mb-bento { grid-template-columns: 1fr 1fr; }
    .mb-cell--photo { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
    .mb-cell--wide { grid-column: span 2; }
    .mb-bento--rates { grid-template-columns: 1fr 1fr; }
    .mb-three { grid-template-columns: 1fr; gap: 24px; }
    .mb-steps { grid-template-columns: 1fr; }
}
@media (max-width: 734px) {
    .mb-hero { padding: 40px 0 72px; }
    .mb-hero__name { font-size: 21px; }
    .mb-hero__media { border-radius: 20px; margin-top: 28px; }
    .mb-hero__media img { aspect-ratio: 4 / 5; object-position: 74% 20%; }
    .mb-hero__title { font-size: 56px; line-height: 1.07; }
    .mb-hero__award { font-size: 17px; }
    .mb-viewer, .mb-story { padding: 88px 0; }
    .mb-viewer__title, .mb-story__title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .mb-story__cat { font-size: 19px; }
    .mb-story__copy, .mb-duo__copy { font-size: 17px; line-height: 1.47059; }
    .mb-viewer__stage, .mb-duo__media, .mb-cell { border-radius: 20px; }
    .mb-bento, .mb-bento--rates, .mb-duo { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
    .mb-cell--photo, .mb-cell--wide { grid-column: auto; }
    .mb-cell { min-height: 0; padding: 28px 26px; }
    .mb-cell__big { font-size: 56px; }
    .mb-rates__cta { flex-direction: column; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .mb-pill, .mb-pill svg, .mb-viewer__stage img { transition: none; }
}

/* ─── CHAUFFEUR CAR PAGES ────────────────────────────────────────────────── */

/* Shared by the car pages (public/chauffeur-car-v2/_template.html) and the "Choose your car" row on /chauffeur/:
   a wrapping row of Apple "more" links. */
.cc-others { padding: var(--pad, 100px) 0; }
.cc-others__list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px 36px; margin-top: 32px; font-size: 19px; }
.mb-rates .cc-others__list { justify-content: center; margin-top: 36px; }
.mb-rates .cc-others__list .more { color: var(--link-dark); }
@media (max-width: 734px) { .cc-others__list { flex-direction: column; gap: 14px; font-size: 17px; } }
/* The car pages' hero is the cut-out side view on black (no crop, no shade). The studio photograph sits under the
   rate card's headline at its own 4:5. */
.mb-hero__media.cc-cutout { overflow: visible; border-radius: 0; width: min(1100px, 92vw); }
.mb-hero:has(.cc-cutout) { overflow-x: clip; }   /* the glow behind the car is wider than a phone */
.mb-hero__media.cc-cutout::after { display: none; }
/* Most chauffeur cars are black, so light them from behind as .mb-car::before does for the S-Class on /chauffeur/. */
.mb-hero__media.cc-cutout::before { content: ''; position: absolute; inset: -6% -14% 4%; background: radial-gradient(closest-side, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 55%, rgba(0, 0, 0, 0)); }
.mb-hero__media.cc-cutout img { position: relative; }
.mb-hero__media.cc-cutout img { aspect-ratio: 2 / 1; object-fit: contain; object-position: 50% 100%; }
.cc-photo { margin: 56px auto 0; max-width: 560px; text-align: center; }
.cc-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.cc-photo figcaption { margin-top: 18px; color: var(--ink-3); font-size: 17px; font-weight: 600; }
@media (max-width: 734px) {
    .mb-hero__media.cc-cutout img { aspect-ratio: 2 / 1; }
    .cc-photo img { border-radius: 20px; }
}