/* ============================================
   Star Tata — styles.css

   The page wears the paint: each Tiago colour sets
   a stage colour for the hero and finance blocks,
   and the buttons and highlights follow it.
   ============================================ */

:root {
    --ink: #16212B;
    --muted: #55626F;
    --line: #D5DBE1;
    --mist: #EEF1F4;
    --paper: #FFFFFF;

    --stage: #CF2A2A;
    --on-stage: #FFFFFF;
    --word: #FFFFFF;

    --wide: 118%;
    --header-h: 76px;
    --gutter: clamp(16px, 4vw, 48px);
}

[data-paint="ocean-blue"] {
    --stage: #0E3543;
    --on-stage: #EAF7FB;
    --word: #D5EEF7;
}

[data-paint="daytona-grey"] {
    --stage: #CF2A2A;
    --on-stage: #FFFFFF;
    --word: #FFFFFF;
}

[data-paint="pristine-white"] {
    --stage: #1662CC;
    --on-stage: #FFFFFF;
    --word: #0B2F66;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Archivo', Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
    word-spacing: .05em;
    overflow-x: hidden;
}

.nowrap { white-space: nowrap; }

img, canvas { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, dl, dd, ul, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
a { color: inherit; }

[hidden] { display: none !important; }

h2 {
    font-size: clamp(2.25rem, 5.4vw, 4.5rem);
    font-style: italic;
    font-weight: 800;
    font-stretch: var(--wide);
    line-height: 1;
    letter-spacing: -0.015em;
}

h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.25;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.section-intro {
    max-width: 58ch;
    margin-top: 20px;
    color: var(--muted);
    font-size: 1.1875rem;
}

.text-link {
    font-weight: 600;
    text-underline-offset: 3px;
}


/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .35s, color .35s, border-color .35s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .65; cursor: progress; }

.btn-stage { background: var(--stage); color: var(--on-stage); }
.btn-on-stage { background: var(--on-stage); color: var(--stage); }
.btn-on-stage-line { border-color: currentColor; color: var(--on-stage); }
.btn-white { background: var(--paper); color: var(--ink); }
.btn-whatsapp { margin-top: 24px; background: #128C4A; color: #fff; }
.btn-full { width: 100%; }


/* ---- Header ---- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    color: var(--on-stage);
    transition: background-color .35s, color .35s, box-shadow .25s;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--header-h);
    padding-inline: var(--gutter);
}

.header-logo { flex: none; }
.header-logo img { width: 158px; height: auto; }
.logo-colour { display: none; }

.site-header.scrolled .logo-colour { display: block; }
.site-header.scrolled .logo-white { display: none; }

.header-nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
    font-weight: 600;
    font-size: 1rem;
}

.header-nav a {
    text-decoration: none;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}
.header-nav a:hover { text-decoration: underline; }

.header-cta {
    min-height: 44px;
    padding: 8px 20px;
    background: var(--on-stage);
    color: var(--stage);
    font-size: 1rem;
}

.site-header.scrolled {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 0 var(--line);
}

.site-header.scrolled .header-cta {
    background: var(--stage);
    color: var(--on-stage);
}


/* ---- Stage ---- */
.stage {
    --word-size: min(23vw, 46svh);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding: calc(var(--header-h) + 4px) var(--gutter) 28px;
    overflow: hidden;
    background: var(--stage);
    color: var(--on-stage);
    transition: background-color .45s, color .45s;
}

.stage-word {
    font-size: var(--word-size);
    font-style: italic;
    font-weight: 900;
    font-stretch: 125%;
    line-height: .8;
    letter-spacing: -0.035em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--word);
    transition: color .45s;
    user-select: none;
}

.turntable {
    --turn: 0deg;
    position: relative;
    z-index: 1;
    flex: none;
    /* Sized from the height left over, so the price and buttons stay above the fold. */
    width: min(100%, max(calc((100svh - 288px - var(--word-size) * 0.46) * 2.624), 560px), 1340px);
    margin: calc(var(--word-size) * -0.34) auto 24px;
}

.car-canvas,
.car-poster {
    width: 100%;
    height: auto;
    aspect-ratio: 1228 / 468;
}

.car-poster {
    position: absolute;
    inset: 0;
}

.car-canvas {
    position: relative;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.car-canvas.is-dragging { cursor: grabbing; }

.car-canvas:focus-visible {
    outline: 3px solid var(--on-stage);
    outline-offset: -3px;
    border-radius: 16px;
}

/* A ring on the floor that turns with the car. Its pointer tracks the nose. */
.turntable-ring {
    position: absolute;
    left: 50%;
    top: 78%;
    width: 74%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    color: var(--on-stage);
    opacity: .55;
    pointer-events: none;
    transform: translate(-50%, -50%) perspective(2400px) rotateX(80deg) rotateZ(calc(var(--turn) + 212deg));
    transition: color .45s;
}

.spin-hint {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    font-size: .9375rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .3s;
}
.spin-hint.is-gone { opacity: 0; }

.stage-foot {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 32px;
    width: 100%;
    max-width: 1440px;
    margin: auto auto 0;
    padding-top: 28px;
}

.stage-from {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
}

.stage-from strong {
    display: block;
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    font-style: italic;
    font-weight: 800;
    font-stretch: var(--wide);
    letter-spacing: -0.015em;
}

.stage-includes {
    max-width: 54ch;
    margin-top: 8px;
    font-size: .9375rem;
    line-height: 1.4;
}

.paint-picker { text-align: center; }

.paint-picker legend {
    width: 100%;
    margin-bottom: 10px;
    font-size: 1rem;
    text-align: center;
}

.paint-options {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.paint-option {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    cursor: pointer;
}

.paint-option input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.paint-chip {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid var(--stage);
    border-radius: 50%;
    background: var(--chip);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--on-stage) 45%, transparent);
    transition: box-shadow .2s, border-color .45s;
}

.paint-option input:checked + .paint-chip {
    box-shadow: 0 0 0 3px var(--on-stage);
}

.paint-option input:focus-visible + .paint-chip {
    outline: 3px solid var(--on-stage);
    outline-offset: 5px;
}

.stage-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.stage :focus-visible { outline-color: var(--on-stage); }


/* ---- The Short Version ---- */
.brief { padding-block: clamp(64px, 9vw, 128px); }

.brief-line {
    max-width: 26em;
    font-size: clamp(1.25rem, 2.5vw, 2.25rem);
    font-weight: 600;
    font-stretch: 106%;
    line-height: 1.16;
    letter-spacing: -0.01em;
}

.cover-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 32px;
    margin-top: clamp(40px, 5vw, 72px);
    padding-top: 24px;
    border-top: 2px solid var(--ink);
}

.cover-list dt { color: var(--muted); font-size: 1rem; }
.cover-list dd { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }


/* ---- Versions ---- */
.versions {
    padding-block: clamp(64px, 9vw, 128px);
    background: var(--mist);
}

.version-table-wrap { margin-top: clamp(32px, 4vw, 56px); }

.version-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--paper);
}

.vt-corner {
    position: sticky;
    top: var(--header-h);
    z-index: 3;
    width: 31%;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
}

.version-table thead th {
    position: sticky;
    top: var(--header-h);
    z-index: 3;
    padding: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

.version-pick {
    position: relative;
    display: block;
    height: 100%;
    padding: 18px 20px 16px;
    cursor: pointer;
    transition: background-color .35s, color .35s;
}

.version-pick input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.version-pick:has(input:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
}

.vp-name {
    display: block;
    font-size: clamp(1.25rem, 2.6vw, 2rem);
    font-style: italic;
    font-weight: 800;
    font-stretch: var(--wide);
    line-height: 1.1;
}

.vp-price {
    display: block;
    margin-top: 4px;
    font-size: clamp(1rem, 1.7vw, 1.3125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vp-state {
    display: block;
    height: 1.4em;
    font-size: .875rem;
    font-weight: 700;
    visibility: hidden;
}

th.is-selected .version-pick {
    background: var(--stage);
    color: var(--on-stage);
}
th.is-selected .vp-state { visibility: visible; }

.version-table tbody th {
    padding: 14px 24px 14px 20px;
    border-bottom: 1px solid var(--line);
    font-weight: 500;
    text-align: left;
    vertical-align: top;
}

.version-table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    cursor: pointer;
    transition: background-color .35s;
}

.version-table tbody td.is-selected {
    background: color-mix(in srgb, var(--stage) 11%, white);
}

.vt-yes { font-weight: 600; }
.vt-no { color: var(--muted); }

.every-tiago { margin-top: clamp(40px, 5vw, 64px); }

.every-tiago h3 { font-size: 1.375rem; }

.every-tiago ul {
    columns: 3;
    column-gap: 32px;
    margin-top: 16px;
}

.every-tiago li {
    padding-block: 6px;
    break-inside: avoid;
}


/* ---- Finance ---- */
.finance {
    padding-block: clamp(64px, 9vw, 128px);
    background: var(--stage);
    color: var(--on-stage);
    transition: background-color .45s, color .45s;
}

.finance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px) clamp(40px, 7vw, 112px);
}

.finance-head { grid-column: 1 / -1; }

.finance-head p {
    max-width: 60ch;
    margin-top: 20px;
    font-size: 1.1875rem;
}

.finance :focus-visible { outline-color: var(--on-stage); }

.finance-controls {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.fin-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px 16px;
}

.fin-field label,
.fin-term legend { font-weight: 600; }

.fin-field output {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fin-field input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.fin-field input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right,
        var(--on-stage) var(--fill, 0%),
        color-mix(in srgb, var(--on-stage) 28%, transparent) var(--fill, 0%));
}

.fin-field input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right,
        var(--on-stage) var(--fill, 0%),
        color-mix(in srgb, var(--on-stage) 28%, transparent) var(--fill, 0%));
}

.fin-field input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -11px;
    border: 4px solid var(--stage);
    border-radius: 50%;
    background: var(--on-stage);
    -webkit-appearance: none;
}

.fin-field input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 4px solid var(--stage);
    border-radius: 50%;
    background: var(--on-stage);
}

.fin-term legend { margin-bottom: 12px; }

.term-options,
.interest-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.term-options label,
.interest-options label {
    position: relative;
    flex: 1 1 auto;
    cursor: pointer;
}

.term-options input,
.interest-options input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.term-options span,
.interest-options span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 14px;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.term-options input:checked + span {
    background: var(--on-stage);
    border-color: var(--on-stage);
    color: var(--stage);
}

.term-options input:focus-visible + span,
.interest-options input:focus-visible + span {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.fin-amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    font-size: clamp(3.5rem, 8.5vw, 7rem);
    font-style: italic;
    font-weight: 900;
    font-stretch: var(--wide);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.025em;
}

.fin-amount small {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    letter-spacing: 0;
}

.fin-breakdown {
    margin-block: 24px;
    border-top: 1px solid color-mix(in srgb, var(--on-stage) 45%, transparent);
}

.fin-breakdown div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--on-stage) 45%, transparent);
}

.fin-breakdown dd {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fin-note {
    margin-top: 18px;
    font-size: .9375rem;
    line-height: 1.45;
}


/* ---- Closer Look ---- */
.closer { padding-block: clamp(64px, 9vw, 128px); }

.closer-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px) clamp(16px, 2.4vw, 32px);
    margin-top: clamp(32px, 4vw, 56px);
}

.closer-item img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: var(--mist);
}

.closer-item figcaption { margin-top: 14px; max-width: 46ch; }
.closer-item figcaption p { margin-top: 2px; color: var(--muted); }

.closer-tag {
    display: inline-block;
    margin-top: 8px;
    font-size: .9375rem;
    font-weight: 700;
}

.closer-boot { grid-column: span 7; }
.closer-cabin { grid-column: span 5; }
.closer-airbags { grid-column: span 6; }
.closer-isofix { grid-column: span 6; }
.closer-hill,
.closer-controls,
.closer-amt { grid-column: span 4; }

.closer-hill img,
.closer-controls img,
.closer-amt img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.closer-note {
    max-width: 72ch;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: 20px;
    border-top: 2px solid var(--ink);
}


/* ---- Specs ---- */
.specs {
    padding-block: clamp(64px, 9vw, 128px);
    background: var(--mist);
}

.specs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 32px;
}

.spec-list {
    columns: 3;
    column-gap: clamp(24px, 4vw, 56px);
    margin-top: clamp(24px, 3vw, 40px);
}

.spec-list div {
    padding-block: 12px;
    border-bottom: 1px solid var(--line);
    break-inside: avoid;
}

.spec-list dt { color: var(--muted); font-size: .9375rem; }
.spec-list dd { font-weight: 600; line-height: 1.35; }


/* ---- Road Band ---- */
.road-band {
    position: relative;
    background: #0E2A33;
    color: var(--paper);
}

.road-band img {
    width: 100%;
    height: auto;
}

.road-copy {
    position: absolute;
    inset: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
    padding-bottom: clamp(32px, 6vw, 88px);
    transform: translateX(-50%);
}

.road-copy h2 { max-width: 7em; }


/* ---- Book ---- */
.book { padding-block: clamp(64px, 9vw, 128px); }

.book-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px clamp(40px, 7vw, 112px);
    align-items: start;
}

.your-tiago { margin-top: 24px; }

.your-tiago img {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-left: -6%;
}

.your-change {
    margin-top: 4px;
    color: var(--muted);
    font-size: .9375rem;
}

.dealer-details {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 2px solid var(--ink);
}

.dealer-details p + p { margin-top: 4px; }
.dealer-name { font-weight: 700; }

.interest-picker legend { margin-bottom: 12px; font-weight: 600; }

.interest-options input:checked + span {
    background: var(--stage);
    border-color: var(--stage);
    color: var(--on-stage);
}

.interest-options span { border-color: var(--line); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.form-group { margin-top: 20px; }

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.optional { color: var(--muted); font-weight: 400; }

.form-group input,
.form-group textarea {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 2px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    transition: border-color .15s;
}

.form-group input:hover,
.form-group textarea:hover { border-color: var(--muted); }

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--ink);
    outline: none;
}

.form-group input[aria-invalid="true"] { border-color: #B3261E; }

.field-error {
    margin-top: 6px;
    color: #B3261E;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.book-form .btn-full { margin-top: 28px; }

.form-consent {
    margin-top: 12px;
    color: var(--muted);
    font-size: .9375rem;
    text-align: center;
}

.form-status {
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 4px solid #B3261E;
    background: #FCEEED;
    color: #8C1D18;
    font-weight: 600;
}

.book-done {
    padding: clamp(28px, 4vw, 48px);
    border-radius: 6px;
    background: var(--stage);
    color: var(--on-stage);
    transition: background-color .45s, color .45s;
}

.book-done:focus { outline: none; }

.book-done h3 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-style: italic;
    font-weight: 800;
    font-stretch: var(--wide);
}

.book-done p { margin-top: 12px; font-size: 1.1875rem; }

.map-wrap { height: clamp(280px, 38vw, 460px); }

.map-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ---- Footer ---- */
.site-footer {
    padding-block: 56px;
    background: var(--ink);
    color: #DDE3E8;
}

.footer-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px 64px;
    align-items: center;
}

.footer-logos {
    display: flex;
    align-items: center;
    gap: 32px;
}

.footer-logos img:first-child { width: 150px; height: auto; }
.footer-logos img:last-child { width: 170px; height: auto; }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 24px;
    font-weight: 600;
}

.footer-nav a { text-underline-offset: 3px; }

.footer-legal {
    grid-column: 1 / -1;
    max-width: 90ch;
    padding-top: 24px;
    border-top: 1px solid #3A4753;
    font-size: .9375rem;
    line-height: 1.5;
}

.site-footer :focus-visible { outline-color: #fff; }


/* ---- Mobile Bar ---- */
.mobile-bar { display: none; }


/* ---- Tablet ---- */
@media (max-width: 1100px) {
    .header-nav { display: none; }
    .header-cta { margin-left: auto; }

    .stage-foot {
        grid-template-columns: 1fr auto;
        gap: 24px;
    }

    .paint-picker { grid-column: 2; grid-row: 1; }
    .stage-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .finance-grid,
    .book-grid { grid-template-columns: minmax(0, 1fr); }

    .spec-list { columns: 2; }

    .your-tiago img { margin-left: 0; }
}


/* ---- Portrait Tablet ---- */
@media (max-width: 1100px) and (orientation: portrait) {
    .stage-word { margin-top: auto; }

    /* The frames have wide transparent margins, so let them run past the edges. */
    .turntable {
        width: 150vw;
        margin-left: calc(50% - 75vw);
        margin-right: 0;
        margin-top: calc(var(--word-size) * -0.26);
    }

    .turntable-ring { width: 58%; }

    .spin-hint { top: 96%; }
}


/* ---- Mobile ---- */
@media (max-width: 720px) {
    :root { --header-h: 64px; }

    body { font-size: 1rem; }

    .header-logo img { width: 124px; }
    .header-cta { padding-inline: 14px; font-size: .9375rem; }

    .stage { --word-size: 23vw; padding-top: calc(var(--header-h) + 8px); }

    .stage-word { margin-top: auto; }

    .turntable {
        width: 158vw;
        margin-left: calc(50% - 79vw);
        margin-right: 0;
        margin-top: calc(var(--word-size) * -0.26);
    }

    .turntable-ring { width: 58%; }

    .spin-hint { top: 96%; }

    .stage-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-top: 16px;
    }

    .paint-picker {
        grid-column: auto;
        grid-row: 1;
    }

    .stage-actions {
        grid-column: auto;
        flex-direction: column;
    }
    .stage-actions .btn { width: 100%; }

    .stage-price { text-align: center; }
    .stage-includes { margin-inline: auto; }

    .cover-list { grid-template-columns: 1fr 1fr; }

    .version-table,
    .version-table tbody,
    .version-table tr { display: block; }

    .version-table thead {
        position: sticky;
        top: var(--header-h);
        z-index: 3;
        display: block;
    }

    .version-table thead tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: var(--paper);
        border-bottom: 2px solid var(--ink);
    }

    .vt-corner { display: none; }

    .version-table thead th {
        position: static;
        display: block;
        border-bottom: 0;
    }

    .version-pick { padding: 12px 10px 8px; }
    .vp-price { font-size: .9375rem; }
    .vp-state { font-size: .8125rem; }

    .version-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid var(--line);
    }

    .version-table tbody th {
        grid-column: 1 / -1;
        padding: 12px 10px 2px;
        border-bottom: 0;
        font-weight: 700;
    }

    .version-table tbody td {
        display: block;
        padding: 2px 10px 12px;
        border-bottom: 0;
        font-size: .9375rem;
        line-height: 1.35;
    }

    .every-tiago ul { columns: 1; }

    .term-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .term-options span { padding-inline: 2px; font-size: .9375rem; }

    .closer-boot,
    .closer-cabin,
    .closer-airbags,
    .closer-isofix,
    .closer-hill,
    .closer-controls,
    .closer-amt { grid-column: 1 / -1; }

    .spec-list { columns: 1; }

    /* The phone photo has open sky above the car, so the words go there. */
    .road-copy {
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding-block: 24px 0;
        text-align: center;
    }
    .road-copy h2 { max-width: none; font-size: 1.875rem; }

    .form-row { grid-template-columns: minmax(0, 1fr); }

    .interest-options { display: grid; grid-template-columns: minmax(0, 1fr); }

    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-nav { justify-content: flex-start; }

    .site-footer { padding-bottom: 104px; }

    .mobile-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--paper);
        box-shadow: 0 -1px 0 var(--line);
        transform: translateY(110%);
        transition: transform .25s;
    }
    .mobile-bar.is-visible { transform: none; }

    .mobile-bar p { line-height: 1.2; }
    .mobile-bar strong { display: block; font-size: 1.125rem; }
    .mobile-bar span { font-size: .875rem; color: var(--muted); }
    .mobile-bar .btn { min-height: 46px; padding: 8px 18px; font-size: .9375rem; }
}


/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}