/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · mobile detailing price tool (demo)

   The junk removal demo's look (public/tools/junk/junk.css) in the
   detailing trade's colour: Apple's clarity (system type, generous space,
   white cards, soft depth) with one lively accent, a teal to deep blue
   gradient from the detailing tile on the home page (oklch 0.52 0.13 196),
   used for the progress, the price, the chosen options and the one button.

   Designed at 390px first. From 960px up the live estimate moves into a
   sticky card beside the steps; below that it rides in the bottom dock.

   Loaded by public/tools/detailing/quote.html and its French twin,
   soumission.html. Zero em dashes.
   ═══ */

:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --well: #f2f2f6;
  --glass: rgba(255, 255, 255, 0.72);
  --hair: rgba(29, 29, 31, 0.07);
  --hair-2: rgba(29, 29, 31, 0.12);
  --ink: #1d1d1f;
  --body: #3a3a3f;
  --muted: #6e6e76;
  --faint: #a1a1a8;
  --leaf: #007e81;
  --teal: #0a6f9e;
  --accent: #007e81;
  --grad: linear-gradient(120deg, #0b8f8a 0%, #04818f 55%, #0a6f9e 100%);
  --accent-soft: rgba(0, 126, 129, 0.09);
  --accent-ring: rgba(0, 126, 129, 0.22);
  --ok: #1fb866;
  --err: #d70015;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r: 20px;
  --r-sm: 14px;
  --shadow: 0 1px 2px rgba(29, 29, 31, 0.04), 0 8px 24px rgba(29, 29, 31, 0.06);
  --shadow-lg: 0 2px 6px rgba(29, 29, 31, 0.04), 0 24px 60px rgba(10, 60, 75, 0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.mv {
  min-height: 100dvh;
  background:
    radial-gradient(640px 420px at 0% -80px, rgba(0, 135, 140, 0.20), transparent 70%),
    radial-gradient(760px 480px at 100% -40px, rgba(10, 111, 158, 0.17), transparent 70%),
    radial-gradient(600px 400px at 70% 110%, rgba(240, 190, 60, 0.08), transparent 70%),
    var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }

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

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

/* gradient text, for the few words that carry the accent */
.kicker,
.est__price,
.dock__price,
.summary__p {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── top bar ───────────────────────────────────────────────────────────── */

.mv-top {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* the lockup is one outlined SVG, so the name scales with the mark and can
   never truncate or wrap */
.brand__logo {
  display: block;
  flex: 0 0 auto;
  height: 38px;
  width: auto;
  aspect-ratio: 225 / 64;
}

.brand__tag {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 2px;
}

.mv-top__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.mv-top__meta::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31, 184, 102, 0.18);
}

/* ── layout ────────────────────────────────────────────────────────────── */

.mv-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px 0;
}

.mv-main { min-width: 0; }

.mv-side { display: none; }

@media (min-width: 960px) {
  .mv-top { padding-top: 24px; }
  .mv-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: start;
    padding-top: 20px;
  }
  .mv-side {
    display: block;
    position: sticky;
    top: 24px;
  }
}

.mv-side[hidden] { display: none; }

@media (min-width: 960px) {
  .mv-shell.is-solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
}

/* ── progress ──────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 10px 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.steps li {
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.steps li::before {
  content: "";
  height: 5px;
  border-radius: 5px;
  background: rgba(29, 29, 31, 0.08);
  background-size: 400% 100%;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* one gradient runs across the whole bar, each segment shows its slice */
.steps li.is-done::before,
.steps li.is-current::before { background-image: var(--grad); }
.steps li[data-dot="1"]::before { background-position: 0 0; }
.steps li[data-dot="2"]::before { background-position: 33.3% 0; }
.steps li[data-dot="3"]::before { background-position: 66.6% 0; }
.steps li[data-dot="4"]::before { background-position: 100% 0; }
.steps li.is-current::before { box-shadow: 0 2px 10px rgba(5, 120, 140, 0.45); }
.steps li.is-current { color: var(--ink); font-weight: 600; }
.steps li.is-done { color: var(--body); }

.steps__n { opacity: 0.55; margin-right: 4px; }

/* ── steps ─────────────────────────────────────────────────────────────── */

.step[hidden] { display: none; }

.step { animation: stepIn 0.5s var(--ease); }

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

.kicker {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.step__h {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(32px, 8.4vw, 48px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.step__h:focus { outline: none; }

.step__lede {
  margin: 0 0 26px;
  text-wrap: pretty;
  color: var(--muted);
  font-size: 17px;
}

.group {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
  min-width: 0;
}

.group__label,
.group legend,
.field label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.group__hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}

.row2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 560px) {
  .row2 { grid-template-columns: 1fr 1fr; }
}

.field { margin: 0 0 16px; min-width: 0; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-2);
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--faint); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.input[type="date"] { color-scheme: light; }

.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.textarea { min-height: 96px; resize: vertical; }

.field.has-error .input,
.field.has-error .select { border-color: var(--err); box-shadow: 0 0 0 4px rgba(215, 0, 21, 0.1); }

.err {
  display: none;
  margin: 6px 0 0;
  color: var(--err);
  font-size: 13px;
}

.field.has-error .err,
.group.has-error .err { display: block; }

/* chosen options: a white card with a gradient ring */
.tile input:checked + span,
.chip input:checked + span {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 6px 18px rgba(0, 126, 129, 0.18);
}

/* home size tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (min-width: 700px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
}

.tile { position: relative; }

.tile input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.tile span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 66px;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hair);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tile small {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}

.tile input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tile input:active + span { transform: scale(0.97); }

/* load sizes: two across on a phone, four on a wide screen */
.tiles--load { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tiles--load { grid-template-columns: repeat(4, 1fr); } }
.tiles--load .tile span { min-height: 62px; }

/* ── what needs to go: one tap adds a thing ────────────────────────────── */

.things {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (min-width: 700px) {
  .things { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .pics { grid-template-columns: repeat(6, 1fr); }
}

.thing { position: relative; }

.thing__add {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  padding: 5px 5px 9px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hair);
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s;
  touch-action: manipulation;
}

.thing__add:active { transform: scale(0.96); }

/* a real photo of the thing, filling the top of the tile */
.thing__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--well);
}

.thing__name { padding: 0 2px; }

.thing.has-count .thing__add {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 6px 18px rgba(0, 126, 129, 0.18);
}

.thing.has-count .thing__name { color: var(--accent); }

.thing__n {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  display: none;
  place-items: center;
  background: var(--grad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px rgba(5, 120, 140, 0.35);
  pointer-events: none;
}

.thing.has-count .thing__n { display: grid; }
.thing__n.bump { animation: bump 0.28s var(--ease); }

@keyframes bump {
  40% { transform: scale(1.3); }
}

.thing__less {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.thing.has-count .thing__less { display: grid; }
.thing__less:active { transform: scale(0.9); }

.thing__heavy {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

/* ── photos ────────────────────────────────────────────────────────────── */

.snap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r);
  border: 1.5px dashed rgba(0, 126, 129, 0.35);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.snap:hover { border-color: var(--accent); background: #fff; }

.snap input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.snap input:focus-visible + .snap__ic { outline: 2px solid var(--accent); outline-offset: 3px; }

.snap__ic {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 20px rgba(5, 120, 140, 0.3);
}

.snap__t { display: block; color: var(--ink); font-weight: 650; font-size: 16px; }
.snap__s { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; }

.pics {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pics:empty { display: none; }

.pic {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--well);
  animation: pop 0.4s var(--ease);
}

.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pic button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(29, 29, 31, 0.62);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pics__note { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

/* ── where and when ────────────────────────────────────────────────────── */

.chips--3 { grid-template-columns: repeat(3, 1fr); }
.chips--3 .chip span { align-items: center; text-align: center; padding: 8px 6px; }

.pickday { margin-top: 10px; }
.pickday[hidden] { display: none; }

.group.has-error .chip span { border-color: rgba(215, 0, 21, 0.45); }

/* extras on the price card */
.adds {
  list-style: none;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--hair);
  font-size: 13.5px;
}

.adds li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--body); }
.adds li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adds__k { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.summary.summary--job { display: block; }
.summary__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.summary__job:empty { display: none; }
.summary__job { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.summary__job .est__thumbs { margin-bottom: 10px; }
.summary__list { margin: 0; color: var(--body); font-size: 14px; line-height: 1.45; }

.est__thumbs { display: flex; gap: 6px; margin: 0 0 12px; }
.est__thumbs img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--hair); }
.est__thumbs span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px;
  border-radius: 10px; background: var(--well); color: var(--muted); font-size: 13px; font-weight: 600;
}

/* ── the estimate card ─────────────────────────────────────────────────── */

.est {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

/* the glow behind the price */
.est::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -90px; left: -60px;
  width: 360px; height: 240px;
  background:
    radial-gradient(closest-side at 35% 55%, rgba(0, 135, 140, 0.30), transparent),
    radial-gradient(closest-side at 70% 50%, rgba(10, 111, 158, 0.26), transparent);
  filter: blur(24px);
  pointer-events: none;
}

.est__k {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.est__price {
  display: inline-block;
  margin: 4px 0 4px;
  font-size: clamp(34px, 9vw, 42px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

.est__sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }

.est__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}

.stat {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--hair);
}

.stat__v {
  display: block;
  color: var(--ink);
  font-weight: 650;
  font-size: 19px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat__l { display: block; color: var(--muted); font-size: 12.5px; }

.truck {
  margin: 0 0 14px;
  padding: 12px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--hair);
}

.truck__top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
  margin-bottom: 9px;
}

.truck__top span:last-child { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.truck__bar {
  height: 8px;
  border-radius: 8px;
  background: rgba(29, 29, 31, 0.07);
  overflow: hidden;
}

.truck__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 8px;
  background: var(--grad);
  transition: width 0.6s var(--ease);
}

.lines {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--hair);
  font-size: 14px;
}

.lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  color: var(--body);
}

.lines li span:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.est__note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--body);
  font-size: 12.5px;
  line-height: 1.45;
}

.est__note b { color: var(--accent); font-weight: 650; }

.est__empty { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* ── booking step ──────────────────────────────────────────────────────── */

.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  background: var(--card);
  box-shadow: var(--shadow);
}

.summary__p { display: inline-block; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.summary__s { color: var(--muted); font-size: 13px; }

.chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.chip { position: relative; }

.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.chip span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hair);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.chip small { font-weight: 400; font-size: 12px; color: var(--muted); }

.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 8px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: var(--card);
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
}

.consent input {
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

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

.form-err {
  display: none;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(215, 0, 21, 0.06);
  border: 1px solid rgba(215, 0, 21, 0.2);
  color: #a3000f;
  font-size: 14px;
}

.form-err.is-on { display: block; }

/* ── success ───────────────────────────────────────────────────────────── */

.done {
  text-align: center;
  padding: 28px 8px 12px;
}

.done__icon {
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 16px 40px rgba(5, 120, 140, 0.35);
  animation: pop 0.6s var(--ease);
}

@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.done .step__lede { max-width: 440px; margin-left: auto; margin-right: auto; }

.done__card {
  max-width: 440px;
  margin: 0 auto 20px;
  text-align: left;
}

/* ── the dock: back, next, and the estimate on a phone ─────────────────── */

.dock {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 24px -20px 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--hair);
  box-shadow: 0 -10px 30px rgba(10, 60, 75, 0.08);
}

.dock__est {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}

.dock__price {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.dock__meta {
  min-width: 0;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

.dock__btns {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s, transform 0.12s, opacity 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.98); }

.btn--go {
  flex: 1;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 28px rgba(5, 120, 140, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn--go:hover { filter: brightness(1.06) saturate(1.1); }
.btn--go[disabled] { opacity: 0.6; cursor: progress; }

.btn--ghost {
  background: var(--card);
  border-color: var(--hair-2);
  color: var(--ink);
}

.btn--ghost:hover { background: var(--well); }

.btn[hidden] { display: none; }

.spin {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 960px) {
  .dock {
    position: static;
    margin: 28px 0 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  .dock__est { display: none; }
  .dock__btns { justify-content: space-between; }
  .btn--go { flex: 0 0 auto; min-width: 220px; }
}

/* ── footer ────────────────────────────────────────────────────────────── */

/* ── about the owner: a short story under the tool ───────────────────── */

.about {
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: start;
}

.about__img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.about__h { margin: 4px 0 6px; font-size: 17px; font-weight: 700; color: var(--ink); }
.about p { margin: 0; max-width: 60ch; color: var(--body); font-size: 15px; line-height: 1.5; }
.about .about__note { margin-top: 8px; color: var(--muted); font-size: 13px; }

@media (min-width: 960px) {
  .about { grid-template-columns: 104px 1fr; gap: 22px; }
  .about__img { width: 104px; height: 104px; }
}

.mv-foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 13px;
}

.mv-foot a {
  color: var(--body);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-2);
}

.mv-foot a:hover { color: var(--ink); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 440px) {
  .mv-top__meta { display: none; }
}


/* ── detailing: photo cards you pick (one car, one package, any add-ons) ── */

.picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.picks--2 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 700px) {
  .picks { gap: 10px; }
}

.pick { position: relative; display: block; }

.pick input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.pick__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 5px 5px 9px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hair);
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s;
}

.pick__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--well);
}

.pick__name { padding: 0 2px; }

.pick small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.pick input:checked + .pick__card {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 6px 18px rgba(0, 126, 129, 0.18);
}

.pick input:checked + .pick__card .pick__name { color: var(--accent); }
.pick input:focus-visible + .pick__card { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick input:active + .pick__card { transform: scale(0.97); }

/* a check in the corner of a chosen card */
.pick__card::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: none;
  background: var(--grad);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"), var(--grad);
  background-size: 14px 14px, cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 10px rgba(5, 120, 140, 0.35);
}

.pick input:checked + .pick__card::after { display: block; }

.group.has-error .pick__card { border-color: rgba(215, 0, 21, 0.45); }

/* the drop-off address shows instead of the customer's own */
.shopnote { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--body); font-size: 14px; }
.shopnote[hidden], .field[hidden] { display: none; }
.chip small[data-fee] { font-variant-numeric: tabular-nums; }

/* the language switch sits where the junk demo's status pill was */
.mv-top__lang { color: var(--ink); text-decoration: none; }
.mv-top__lang::before { display: none; }
.mv-top__lang:hover { border-color: var(--accent-ring); }
@media (max-width: 440px) {
  .mv-top__meta.mv-top__lang { display: inline-flex; padding: 6px 10px; font-size: 12.5px; }
}

/* three across where asked (the plain .chips rule comes later in the file) */
.chips.chips--3 { grid-template-columns: repeat(3, 1fr); }