/* autorestage.com — the public site.
 *
 * Every value here comes from DESIGN.md. Reference a token, never a literal;
 * if a value is missing from the tokens below, it belongs in DESIGN.md first.
 *
 * The posture: the product IS car photography, so the photographs carry the
 * page and the chrome steps out of the way. Near-black floor, one warm accent
 * borrowed from the lighting in the studio sets we generate, zero-radius CTAs
 * because a rectangle reads engineered and a pill reads consumer-tech.
 *
 * No framework and no build step. The whole page is four files. */

:root {
  color-scheme: dark;

  /* ── colour ─────────────────────────────────────────────────────── */
  --canvas:    oklch(6.5% 0.004 265);
  --surface-1: oklch(10.5% 0.006 265);
  --surface-2: oklch(15% 0.008 265);
  --hairline:  oklch(24% 0.008 265);
  --ink:       oklch(96% 0.004 90);
  --ink-dim:   oklch(72% 0.008 265);
  --ink-mute:  oklch(55% 0.01 265);
  --accent:    oklch(78% 0.16 78);

  /* ── type ───────────────────────────────────────────────────────── */
  --serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --sans:  'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --display-xl: clamp(3rem, 1.1rem + 7.6vw, 7.5rem);
  --display-lg: clamp(1.9rem, 1rem + 3.1vw, 3.4rem);
  --title:      clamp(1.05rem, .95rem + .35vw, 1.25rem);
  --lede:       clamp(1.02rem, .96rem + .35vw, 1.2rem);
  --body:       clamp(1rem, .96rem + .2vw, 1.09rem);

  /* ── space: base 4px, every value a multiple ────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 28px; --s7: 40px; --s8: 64px; --s9: 96px;
  --gut: clamp(1.25rem, .6rem + 2.6vw, 4.5rem);
  --section: clamp(4.5rem, 2.6rem + 7vw, 11rem);

  /* ── shape ──────────────────────────────────────────────────────── */
  --r-none: 0px;
  --r-xl:   14px;
  --r-full: 9999px;

  /* ── motion: shared with the console, and not per-component ─────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press:  120ms;
  --fast:   160ms;
  --normal: 220ms;
  --slow:   320ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: var(--body)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Two soft washes so the black reads as a room rather than a void. Fixed and
   non-interactive: this is atmosphere, not an element. */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 70% at 62% -10%, oklch(30% 0.03 78 / .42), transparent 62%),
    radial-gradient(90% 60% at 10% 108%, oklch(24% 0.02 250 / .34), transparent 64%);
}

main, header, footer { position: relative; z-index: 1; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;          /* never bold the serif -- its own contrast does that */
  letter-spacing: -0.015em;
}
h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; padding: var(--s3) var(--s5);
  background: var(--ink); color: var(--canvas); z-index: 99;
}
.skip:focus { left: 0; }

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

/* ── header ─────────────────────────────────────────────────────────── */

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s6); padding: var(--s6) var(--gut) var(--s5);
}
.mark { font-family: var(--serif); font-size: 1.3rem; text-decoration: none; }
.mark span { color: var(--ink-mute); }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.top nav a {
  font-size: .875rem; color: var(--ink-dim); text-decoration: none;
  transition: color var(--fast) var(--ease-out);
}
.top nav a:hover { color: var(--ink); }
.cta-sm {
  border: 1px solid var(--hairline); padding: var(--s2) var(--s4);
  transition: border-color var(--normal) var(--ease-out),
              background var(--normal) var(--ease-out),
              color var(--normal) var(--ease-out);
}
.cta-sm:hover { border-color: var(--ink); background: var(--ink); color: var(--canvas) !important; }
.cta-sm:active { transform: scale(0.97); }

@media (max-width: 560px) { .top nav a:not(.cta-sm) { display: none; } }

/* ── hero ───────────────────────────────────────────────────────────── */

.hero {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(2rem, 1rem + 4vw, 6rem) var(--gut) var(--section);
}
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }

/* The one place the site uses uppercase. 0.16em tracking is what makes a small
   caps label read machined rather than shouted -- under that it just looks
   like shrunken body copy. */
.eyebrow {
  margin: 0 0 var(--s5);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}

h1 { margin: 0 0 var(--s6); font-size: var(--display-xl); line-height: .92; }
h1 em { font-style: italic; color: var(--accent); }

.lede { margin: 0 0 var(--s7); max-width: 34ch; font-size: var(--lede); color: var(--ink-dim); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }

/* Zero radius: the rectangle IS the posture. White fill, never the accent --
   a coloured CTA competes with the cars, which are the actual subject. */
.btn {
  display: inline-block; padding: var(--s3) var(--s6);
  border: 1px solid var(--ink); border-radius: var(--r-none);
  background: var(--ink); color: var(--canvas);
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: transform var(--fast) var(--ease-out),
              background var(--fast) var(--ease-out),
              border-color var(--fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); background: var(--accent); border-color: var(--accent); }
.btn:active { transform: scale(0.97); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn.ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }

.fineprint { margin: 0; font-size: .82rem; color: var(--ink-mute); }

.hero-fig { margin: 0; }
.hero-fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px -30px oklch(0% 0 0 / .9), 0 0 0 1px var(--hairline);
}
.hero-fig figcaption {
  margin-top: var(--s4); font-size: .8rem; color: var(--ink-mute); max-width: 42ch;
}

/* ── section furniture ──────────────────────────────────────────────── */

.sec-head { max-width: 62ch; margin: 0 auto clamp(2rem, 4vw, 3.5rem); text-align: center; }
.sec-head h2 { margin: 0 0 var(--s4); font-size: var(--display-lg); line-height: 1.06; }
.sec-sub { margin: 0; color: var(--ink-dim); font-size: .97rem; }

.work, .does, .api, .end { padding: 0 var(--gut) var(--section); }

/* ── before / after ─────────────────────────────────────────────────── */

.ba {
  position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline);
  --pos: 50%;
  touch-action: pan-y;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-clip { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba-bar {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  background: oklch(96% 0 0 / .9); pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 42px; height: 42px; border-radius: var(--r-full);
  background: oklch(96% 0 0 / .95);
  box-shadow: 0 4px 18px oklch(0% 0 0 / .5);
}
.ba-grip::before, .ba-grip::after {
  content: ''; position: absolute; top: 50%; translate: 0 -50%; border: 5px solid transparent;
}
.ba-grip::before { left: var(--s2);  border-right-color: var(--canvas); }
.ba-grip::after  { right: var(--s2); border-left-color:  var(--canvas); }

/* The range IS the control -- invisible, full-bleed, and therefore keyboard,
   touch and screen-reader native. Painting a div and bolting ARIA onto it
   reimplements, badly, what this already does. */
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; }
.ba-range::-moz-range-thumb { width: 46px; height: 100%; border: 0; }
.ba-range:focus-visible ~ .ba-bar { box-shadow: 0 0 0 2px var(--accent); }

.ba-tag {
  position: absolute; bottom: var(--s4); padding: var(--s1) var(--s3);
  border-radius: var(--r-full);
  font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: oklch(10% 0 0 / .62); backdrop-filter: blur(6px);
  color: var(--ink); pointer-events: none;
}
.ba-tag-l { left: var(--s4); }
.ba-tag-r { right: var(--s4); }

/* ── bento ──────────────────────────────────────────────────────────── */

.bento {
  display: grid; gap: var(--s4); max-width: 1140px; margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .bento { grid-template-columns: 1fr; } }

.cell {
  background: linear-gradient(170deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--hairline); border-radius: var(--r-xl);
  padding: clamp(20px, 2.2vw, 30px);
  transition: border-color var(--normal) var(--ease-out),
              transform var(--normal) var(--ease-out);
}
.cell:hover { border-color: oklch(36% 0.01 265); transform: translateY(-3px); }
.cell h3 { margin: 0 0 var(--s3); font-size: var(--title); }
.cell p { margin: 0; color: var(--ink-dim); font-size: .94rem; }

/* Two columns AND two rows: spanning only columns left a tall image beside one
   short card and a column of dead black under it. */
.cell.wide {
  grid-column: span 2; grid-row: span 2;
  display: grid; grid-template-rows: auto auto 1fr; gap: var(--s5); align-content: start;
}
.cell.wide img {
  width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0;
  border-radius: 9px; box-shadow: 0 0 0 1px var(--hairline);
}
@media (max-width: 900px) { .cell.wide { grid-row: span 1; } }
@media (max-width: 580px) { .cell.wide { grid-column: span 1; } }

/* ── api ────────────────────────────────────────────────────────────── */

.api {
  display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  max-width: 1140px; margin: 0 auto;
}
@media (max-width: 900px) { .api { grid-template-columns: 1fr; } }

.api h2 { margin: 0 0 var(--s4); font-size: var(--display-lg); line-height: 1.08; }
.api-copy p { color: var(--ink-dim); max-width: 46ch; }

.ticks { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: var(--s6); margin-bottom: var(--s2);
  color: var(--ink-dim); font-size: .93rem;
}
.ticks li::before {
  content: ''; position: absolute; left: var(--s1); top: .62em;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  rotate: -45deg;
}

.code {
  margin: 0; padding: clamp(18px, 2vw, 26px); overflow-x: auto;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  font: .84rem/1.75 var(--mono); color: var(--ink-dim);
  white-space: pre; tab-size: 2;
}
.code .c { color: var(--ink-mute); }
.code .s { color: var(--accent); }

/* ── end ────────────────────────────────────────────────────────────── */

.end { text-align: center; }
.end h2 { margin: 0 0 var(--s3); font-size: var(--display-lg); }
.end p { margin: 0 0 var(--s6); color: var(--ink-dim); }

.foot {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  align-items: baseline; justify-content: space-between;
  padding: var(--s6) var(--gut); border-top: 1px solid var(--hairline);
  font-size: .84rem; color: var(--ink-mute);
}
.foot p { margin: 0; }
.foot .mark { font-size: 1rem; }

/* ── motion off ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:hover, .btn.ghost:hover, .cell:hover { transform: none; }
}

/* ═════════════════════ the live spin in the hero ═════════════════════════
   The product itself, turned by the visitor's own hand. It replaces a still
   photograph, so it has to arrive as fast as one: the poster is the preloaded
   hero image and carries the first paint, and the iframe is only attached when
   the figure scrolls into view (app.281bcc840e.js). Until then this costs one image, the
   same as before.                                                          */
.spin-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg, 14px); overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 1px 0 var(--hairline) inset, 0 30px 80px -40px rgb(0 0 0 / .9);
}
.spin-stage > img,
.spin-stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.spin-stage > img { object-fit: cover; }
/* Once the real spin is mounted the poster stays beneath it as the backdrop,
   so a slow frame fetch never shows the page's black through the figure. */
.spin-stage[data-live] > iframe {
  z-index: 1; opacity: 0;
  transition: opacity 420ms var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.spin-stage[data-ready] > iframe { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .spin-stage[data-live] > iframe { transition: none; }
}

/* ═════════════════════════════ proof band ════════════════════════════════
   Where a SaaS page puts a customer count. We have none worth printing, so
   these are four facts about the product instead -- each one checkable on this
   page or in the console, none of them a claim about anybody's business.    */
.band {
  border-block: 1px solid var(--hairline);
  padding-block: clamp(1.6rem, 1rem + 2vw, 2.6rem);
}
.band dl {
  margin: 0 auto; max-width: var(--measure-wide, 1180px); padding-inline: var(--gutter, 24px);
  display: grid; gap: clamp(1.2rem, .6rem + 2vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.band div { display: flex; flex-direction: column; gap: 6px; }
.band dt {
  font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1; color: var(--ink); letter-spacing: -.015em;
}
.band dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-mute); max-width: 24ch; }

/* ════════════════════════════ built for ═════════════════════════════════ */
.who { padding-block: var(--section, clamp(4rem, 3rem + 5vw, 8rem)); }
.who-grid {
  margin: 0 auto; max-width: var(--measure-wide, 1180px); padding-inline: var(--gutter, 24px);
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.who-grid article {
  padding: clamp(1.2rem, 1rem + .8vw, 1.9rem);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg, 14px);
  background: var(--surface-1);
}
.who-grid h3 {
  margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); letter-spacing: -.01em; color: var(--ink);
}
.who-grid p { margin: 0; color: var(--ink-dim); font-size: .97rem; line-height: 1.6; }
.who-cta {
  margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) auto 0; max-width: var(--measure-wide, 1180px);
  padding-inline: var(--gutter, 24px);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}