/* Autorestage — the landing pages: one per product and one per kind of
 * dealer (car-background-replacement, 360-car-spin, car-video-tour,
 * dealer-branding, independent-dealers, franchise-dealerships, api).
 *
 * Tokens and the shared furniture -- nav, pills, footer, reveals, the spin
 * card, the before/after, the details list, how-it-works, the code card, the
 * numbers band and the dark closing band -- come from style.css and
 * sections.css. This file is only what the landing pages add. Nothing here
 * defines a colour of its own except the dimming laid over a photograph,
 * which sits on a picture, not on a theme (the same rule sections.css keeps). */

/* ── where you are ─────────────────────────────────────────────────────── */
.nav-a[aria-current="page"] { color: var(--ink); }
.mega a[aria-current="page"] { background: var(--accent-soft); }

.crumbs { max-width: var(--wrap); margin: 0 auto clamp(28px, 3.6vw, 48px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: .84rem; color: var(--ink-3); }
.crumbs li + li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 11px 2px 8px; border: solid var(--ink-3); border-width: 1.5px 1.5px 0 0; rotate: 45deg; }
.crumbs a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── hero: the claim on one side, the product itself on the other ──────── */
.lp-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(20px, 3vw, 40px) var(--gut) clamp(72px, 8vw, 128px); }
/* One warm pool of light behind the picture, the way a studio lights a car. */
.lp-hero::before { content: ''; position: absolute; z-index: -1; right: -12%; top: -24%; width: min(1000px, 92vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent); pointer-events: none; }
.lp-hero-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 84px); align-items: center; }
.lp-hero h1 { margin-top: 18px; max-width: 15ch; font-size: clamp(2.3rem, 1.15rem + 3.6vw, 4.5rem); font-weight: 600; line-height: 1.01; letter-spacing: -.052em; text-wrap: balance; }
.lp-hero h1 em { font-style: normal; color: var(--accent-ink); }
.lp-lede { max-width: 46ch; margin-top: 24px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.55; }
.lp-hero .hero-cta { margin-top: 32px; animation: none; }
.lp-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; color: var(--ink-2); font-size: .88rem; }
.lp-facts li { display: inline-flex; align-items: center; gap: 9px; }
.lp-facts li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* The hero settles once, on load: copy first, then the picture. By transform
   alone -- the headline and the picture are the largest paint, and a fade
   from opacity 0 would hold that paint back by the length of the animation
   (the same rule style.css keeps for the home page's headline). */
.lp-copy > * { animation: lp-in .9s var(--ease) both; }
.lp-copy > :nth-child(2) { animation-delay: .05s; }
.lp-copy > :nth-child(3) { animation-delay: .1s; }
.lp-copy > :nth-child(4) { animation-delay: .15s; }
.lp-copy > :nth-child(n+5) { animation-delay: .2s; }
.lp-media { position: relative; min-width: 0; animation: lp-in 1.1s .12s var(--ease) both; }
@keyframes lp-in { from { transform: translateY(14px); } }

/* A picture in a frame: the l radius, the soft shadow, a hairline. */
.lp-frame { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-l), 0 0 0 1px var(--line); }
.lp-frame > img { width: 100%; }
.lp-frame > video { width: 100%; aspect-ratio: 16 / 9; background: var(--night); }
.lp-media .ba { box-shadow: var(--shadow-l), 0 0 0 1px var(--line); }
.lp-media .spin-view { border-radius: 0; }
/* Who made the picture, said where the picture is. */
.lp-cap { max-width: 62ch; margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--accent); color: var(--ink-3); font-size: .84rem; line-height: 1.5; }
.lp-tag { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: oklch(14% .01 265 / .62); color: #fff; font-size: .8rem; font-weight: 500; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* A dashed box laid over one part of a photograph, with its name above it. */
.lp-mark { position: absolute; z-index: 2; border: 1.5px dashed var(--accent); border-radius: 10px; box-shadow: 0 0 0 9999px oklch(14% .01 265 / .16); pointer-events: none; }
.lp-mark span { position: absolute; left: -1.5px; bottom: calc(100% + 8px); padding: 5px 11px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.lp-mark.logo { left: 27%; top: 15.5%; width: 48%; height: 14%; }
.lp-mark.plate { left: 43.4%; top: 64.4%; width: 13.4%; height: 7%; }
.lp-mark.plate span { left: 50%; translate: -50% 0; }

/* ── sections ──────────────────────────────────────────────────────────── */
.lp-sec { padding: var(--sec) var(--gut); }
.lp-alt { background: var(--bg-alt); }
/* A compound word that must not break at its hyphen. */
.nb { white-space: nowrap; }
.sec-sub { max-width: 56ch; margin-top: 18px; color: var(--ink-2); font-size: 1.06rem; }
.sec-head.center .sec-sub { margin-inline: auto; }
.det-grid .more { display: flex; width: fit-content; margin: 10px 0 0; padding: 0; }
/* Names from the API and the console, set as code wherever prose quotes them. */
:where(.det-grid p, .ticks li, .sec-sub, .lp-faq p, .api-copy p) code { padding: 1px 6px; border-radius: 6px; background: var(--line); font: .86em var(--mono); overflow-wrap: anywhere; }
:where(.ticks li, .lp-cap, .sec-sub) a { color: var(--accent-ink); text-underline-offset: 3px; }

/* Copy beside a picture; .flip puts the picture first. */
.lp-split { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.lp-split.flip > :first-child { order: 2; }
.lp-split h2 { margin-top: 18px; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.lp-split-copy > p:not(.eyebrow) { max-width: 50ch; margin-top: 20px; color: var(--ink-2); font-size: 1.05rem; }
.lp-split .ticks { margin-top: 26px; }
.lp-split .more { margin: 26px 0 0; padding: 0; }
.lp-crop { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 12%; }

/* ── one car on six studios: a bento, the first picture large ──────────── */
.lp-gallery { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-gallery figure { position: relative; overflow: hidden; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); }
.lp-gallery figure:first-child { grid-column: span 2; grid-row: span 2; border-radius: var(--r-l); }
.lp-gallery img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.2s var(--ease); }
.lp-gallery figure:hover img { transform: scale(1.04); }
.lp-gallery figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: oklch(14% .01 265 / .7); color: #fff; font-size: .78rem; font-weight: 500; }
.lp-gallery-note { max-width: var(--wrap); margin: 18px auto 0; color: var(--ink-3); font-size: .86rem; }

/* ── the same car, as shot and as listed ───────────────────────────────── */
.lp-pair { position: relative; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); }
.lp-pair figure { position: relative; overflow: hidden; border-radius: var(--r-l); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); }
.lp-pair img { width: 100%; }
.lp-pair .ba-tag.r { left: 16px; right: auto; }
/* The arrow between them: a disc, and the arrow cut from the accent by a mask
   so it takes the theme's accent-ink rather than a colour of its own. */
.lp-pair::before, .lp-pair::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.lp-pair::before { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-l), 0 0 0 1px var(--line); }
.lp-pair::after {
  width: 22px; height: 22px; background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 360: the two ways to make a spin ──────────────────────────────────── */
.lp-ways { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.lp-way { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0 clamp(20px, 3vw, 36px); padding: clamp(24px, 3.2vw, 44px); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); }
.lp-way:first-child { box-shadow: var(--shadow-l), 0 0 0 2px var(--accent); }
.lp-way > div { min-width: 0; }
.lp-way h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.lp-way p { margin-top: 12px; color: var(--ink-2); }
.lp-way .ticks { margin-top: 20px; font-size: .95rem; }
/* Frame positions round the car, drawn as ticks on a ring: 72 from a video,
   six from six photographs. Honest about the difference at a glance. */
.lp-ring { position: relative; width: clamp(88px, 9vw, 120px); aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.lp-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--accent) 0 1.6deg, transparent 1.6deg 5deg); -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 77%); mask: radial-gradient(closest-side, transparent 76%, #000 77%); }
.lp-ring.six::before { background: repeating-conic-gradient(from -4deg, var(--accent) 0 8deg, transparent 8deg 60deg); }
.lp-ring b { display: block; font-size: 1.55rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lp-ring small { display: block; margin-top: 3px; color: var(--ink-3); font-size: .7rem; letter-spacing: .04em; }

/* ── a choice the console offers, drawn rather than screenshotted ──────── */
.lp-ui { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-l), 0 0 0 1px var(--line); }
.lp-ui-h { color: var(--ink-3); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.lp-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 14px; padding: 5px; border-radius: 999px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); }
.lp-seg span { display: grid; place-items: center; min-height: 38px; padding: 4px 10px; border-radius: 999px; color: var(--ink-2); font-size: .88rem; font-weight: 500; text-align: center; line-height: 1.2; }
.lp-seg .on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s), inset 0 0 0 1px var(--line-2); }
.lp-seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-ui-rows { display: grid; gap: 1px; margin-top: 20px; border-radius: var(--r-m); overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.lp-ui-rows p { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 14px 16px; background: var(--surface); color: var(--ink-2); font-size: .92rem; }
.lp-ui-rows b { color: var(--ink); font-weight: 600; }

/* ── what it costs ─────────────────────────────────────────────────────── */
.lp-cost { padding: var(--sec) var(--gut); }
.lp-cost-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.lp-cost h2 { margin-top: 18px; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.lp-cost-copy > p:not(.eyebrow) { max-width: 46ch; margin-top: 18px; color: var(--ink-2); font-size: 1.05rem; }
.lp-inc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 28px; border-radius: var(--r-m); overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.lp-inc li { padding: 18px 16px; background: var(--surface); }
.lp-inc b { display: block; color: var(--accent-ink); font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lp-inc span { display: block; margin-top: 7px; color: var(--ink-2); font-size: .84rem; line-height: 1.38; }
.lp-plans { --d: .08s; overflow: hidden; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-l), 0 0 0 1px var(--line); }
.lp-plans li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; padding: 18px clamp(18px, 2.4vw, 28px); }
.lp-plans li + li { border-top: 1px solid var(--line); }
.lp-plans li.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.lp-plans h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.025em; }
.lp-plans .lp-plan-n { margin-top: 2px; color: var(--ink-3); font-size: .87rem; }
.lp-plans .lp-plan-for { margin-top: 6px; color: var(--accent-ink); font-size: .84rem; font-weight: 500; }
.lp-plans .lp-plan-p { text-align: right; white-space: nowrap; }
.lp-plans .lp-plan-p strong { color: var(--ink); font-size: 1.32rem; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.lp-plans .lp-plan-p small { display: block; color: var(--ink-3); font-size: .78rem; }
.lp-plans-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 16px clamp(18px, 2.4vw, 28px); border-top: 1px solid var(--line); background: var(--bg-alt); color: var(--ink-2); font-size: .9rem; }
.lp-plans-foot .more { margin: 0; padding: 0; }

/* ── questions: the heading holds still while the answers scroll ───────── */
.lp-faq { padding: var(--sec) var(--gut); }
.lp-faq-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.lp-faq .sec-head { position: sticky; top: calc(var(--nav-h) + 32px); margin: 0; }
.lp-faq-list { border-bottom: 1px solid var(--line-2); }
.lp-faq details { border-top: 1px solid var(--line-2); }
.lp-faq summary { position: relative; padding: 22px 40px 22px 0; font-size: 1.08rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.4; cursor: pointer; list-style: none; transition: color .2s; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border: solid var(--ink-3); border-width: 0 1.8px 1.8px 0; rotate: 45deg; transition: rotate .3s var(--ease), margin-top .3s var(--ease); }
.lp-faq details[open] summary::after { rotate: -135deg; margin-top: -2px; }
.lp-faq summary:hover { color: var(--accent-ink); }
.lp-faq details p { max-width: 62ch; margin: 0; padding: 0 32px 24px 0; color: var(--ink-2); }
.lp-faq details a { color: var(--accent-ink); text-underline-offset: 3px; }

/* ── the API: endpoints, and a picture with the request laid over it ───── */
.lp-table-wrap { max-width: 1060px; margin: 0 auto; overflow: hidden; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); }
.lp-table { width: 100%; border-collapse: collapse; }
.lp-table th { padding: 15px clamp(14px, 2.2vw, 24px); color: var(--ink-3); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-align: left; text-transform: uppercase; }
.lp-table td { padding: 16px clamp(14px, 2.2vw, 24px); border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; vertical-align: baseline; }
.lp-table td:first-child { width: 1%; white-space: nowrap; }
.lp-table td:nth-child(2) code { white-space: nowrap; }
.lp-table td code { color: var(--ink); font: .88rem var(--mono); overflow-wrap: anywhere; }
.lp-verb { display: inline-block; min-width: 3.6em; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font: 600 .72rem var(--mono); text-align: center; }
.lp-stack { position: relative; }
.lp-stack .lp-frame { width: 80%; margin-left: auto; }
.lp-stack .code { position: relative; z-index: 2; width: 88%; margin-top: -24%; }
.lp-stack .lp-cap { margin-top: 18px; }
.code pre { max-width: 100%; }
/* A one-line embed is one long URL: wrap it in place rather than hide its end
   behind a scrollbar. The copy button copies the text, not the wrapping. */
.code.wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lp-cost-grid, .lp-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-faq .sec-head { position: static; }
  .lp-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lp-hero-grid, .lp-split { grid-template-columns: minmax(0, 1fr); }
  .lp-split.flip > :first-child { order: 0; }
  .lp-hero h1 { max-width: 18ch; }
  .lp-stack .lp-frame { width: 92%; }
  .lp-stack .code { width: 100%; margin-top: -14%; }
}
@media (max-width: 760px) {
  /* Two columns, the first and the last picture full width: 1, 2, 2, 1. */
  .lp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lp-gallery figure:first-child { grid-row: auto; }
  .lp-gallery figure:last-child { grid-column: span 2; }
  .lp-gallery figure:not(:first-child):not(:last-child) figcaption { left: 8px; bottom: 8px; padding: 4px 9px; font-size: .72rem; }
  .lp-pair { grid-template-columns: minmax(0, 1fr); }
  .lp-pair::after { rotate: 90deg; }
  .lp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lp-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 16px; border-top: 1px solid var(--line); }
  .lp-table tbody tr:first-child { border-top: 0; }
  .lp-table td { padding: 0; border: 0; }
  .lp-table td:first-child { width: auto; }
  .lp-table td:last-child { grid-column: 1 / -1; }
  .lp-ui-rows p { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 600px) {
  .lp-way { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .lp-inc { grid-template-columns: minmax(0, 1fr); }
  .lp-inc li { display: flex; align-items: baseline; gap: 14px; }
  .lp-inc span { margin-top: 0; }
  .lp-seg { border-radius: var(--r-m); grid-template-columns: minmax(0, 1fr); }
  .lp-seg span { border-radius: var(--r-s); }
}
@media (max-width: 520px) {
  /* The calls to action carry their terms ("3 vehicles, no card"), which is
     wider than a phone allows on one line: full width, and free to wrap. */
  .lp-hero .hero-cta .pill, .end .hero-cta .pill { width: 100%; height: auto; min-height: 54px; padding-block: 12px; white-space: normal; text-align: center; line-height: 1.25; }
  .lp-stack .lp-frame { width: 100%; }
  .lp-stack .code { margin-top: -10%; }
  /* On a phone a code sample wraps where it must rather than hiding its
     right half behind a sideways scroll. */
  .lp-hero .code pre, .api .code pre { padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-copy > *, .lp-media { animation: none; }
}
@media print {
  .lp-copy > *, .lp-media { animation: none !important; opacity: 1 !important; transform: none !important; }
}