/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · quiz funnel skin
   ═══════════════════════════════════════════════════

   Branded to the Meta "estimates card" ad so the page the tap lands on looks
   like the creative it came from: off-white ground, a soft grey card, near
   black text, and the warm orange gradient for the one thing to press.

   Designed at 390px first. Everything above that is the same layout with more
   air; there is no second layout to keep in sync.

   Loaded only by the pages scripts/build-quiz.mjs writes. Zero em dashes.
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #f7f8fa;
  --card: #eef0f3;
  --ink: #1b1f24;
  --body: #2b3138;
  --muted: #6b7280;
  --line: #dde1e7;
  --accent-a: #f2543d;
  --accent-b: #f26b3d;
  --accent-c: #f58a3a;
  --grad: linear-gradient(100deg, var(--accent-a), var(--accent-b) 55%, var(--accent-c));
  --head: "Barlow", "Helvetica Neue", Arial, system-ui, sans-serif;
  --text: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --r: 14px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

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

.quiz-body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--body);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--line);
  z-index: 10;
}

.progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--grad);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── shell ──────────────────────────────────────────────────────────────── */

.shell {
  max-width: 460px;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}

.back {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.back::before {
  content: "\2190";
  margin-right: 6px;
}

.back:hover {
  color: var(--ink);
}

.stepcount {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
}

.foot {
  margin: 0;
  padding-top: 20px;
  font-size: 0.75rem;
  color: var(--muted);
}

.foot p {
  margin: 0;
}

.foot a {
  color: var(--muted);
}

/* ── question screen ────────────────────────────────────────────────────── */

.kicker {
  margin: 0 0 10px;
  font-family: var(--head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.q__h,
.q h1,
.q h2 {
  margin: 0 0 8px;
  font-family: var(--head);
  font-size: 1.75rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.q__lede {
  margin: 0 0 22px;
  font-size: 0.975rem;
  color: var(--muted);
}

.q__fallback {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--body);
}

.q__fallback li {
  margin-bottom: 10px;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.opt {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 16px 44px 16px 18px;
  text-align: left;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.opt::after {
  content: "\2192";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.05rem;
}

.opt:hover {
  border-color: var(--accent-b);
}

.opt:active,
.opt.is-picked {
  transform: scale(0.99);
  border-color: transparent;
  background: var(--grad);
  color: #fff;
}

.opt.is-picked::after,
.opt:active::after {
  color: #fff;
}

.opt--quiet {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  min-height: 52px;
}

/* A two-line option: the choice, then the one thing the visitor wants to know
   about it before tapping. Only the last question uses it, where the two
   answers are genuinely different commitments and a bare label makes them
   look interchangeable. */
.opt__label { display: block; }

.opt__note {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

.opt.is-picked .opt__note,
.opt:active .opt__note { color: rgba(255, 255, 255, 0.82); }

/* ── form ───────────────────────────────────────────────────────────────── */

.field {
  display: block;
  margin-bottom: 14px;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--body);
}

.field__hint {
  font-weight: 500;
  color: var(--muted);
}

.field input {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.field input:focus {
  outline: 2px solid var(--accent-b);
  outline-offset: 1px;
  border-color: transparent;
}

/* ── slot picker ────────────────────────────────────────────────────────── */

.slotpick {
  margin: 0 0 18px;
}

.slotpick__label {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--body);
}

.slotpick__zone {
  margin: 0 0 10px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* The one place anything scrolls sideways, and it scrolls inside itself: the
   page must never move at 390px. */
.daystrip {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  min-height: 56px;
  padding: 9px 10px;
  font: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
}

.day__w {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.day__d {
  font-family: var(--head);
  font-size: 0.9375rem;
  font-weight: 700;
}

.day.is-on {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
}

.day.is-on .day__w {
  color: rgba(255, 255, 255, 0.85);
}

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.slot {
  min-height: 48px;
  padding: 12px 8px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.slot:hover {
  border-color: var(--accent-b);
}

.slot.is-on {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
}

.slot:focus-visible,
.day:focus-visible {
  outline: 2px solid var(--accent-b);
  outline-offset: 2px;
}

/* Off screen, not display:none: a scripted post fills every input it finds,
   a real visitor never reaches it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.submit {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 4px;
  padding: 17px 20px;
  font-family: var(--head);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #fff;
  background: var(--grad);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(242, 84, 61, 0.9);
}

.submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.consent {
  margin: 12px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}

.formerror {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #9b2312;
  background: #fdeeea;
  border-radius: 10px;
}

/* ── while it rings ─────────────────────────────────────────────────────── */

/* The line that turns a wait into a question. It sits between the promise
   that the phone is ringing and the first tap, so it reads as an aside on
   something already happening rather than as a new demand. */
.ask {
  margin: 26px 0 16px;
  padding-top: 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--body);
  border-top: 1px solid var(--line);
}

.ringq__h {
  margin: 0 0 12px;
  font-family: var(--head);
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink);
}

/* The two fields the booked call still needs, opened by the offer CTA on the
   phone first flow where the visitor only ever gave a number. */
.offer__fields { margin-top: 18px; }

/* ── result ─────────────────────────────────────────────────────────────── */

.ring {
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 0 rgba(242, 84, 61, 0.55);
  animation: ring 1.9s ease-out infinite;
}

@keyframes ring {
  70% {
    box-shadow: 0 0 0 22px rgba(242, 84, 61, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 84, 61, 0);
  }
}

.result__p {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  color: var(--body);
}

.note {
  margin: 0 0 20px;
  padding: 14px 16px;
  font-size: 0.9375rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.offer {
  margin-top: 8px;
  padding: 22px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.offer__h {
  margin: 0 0 14px;
  font-family: var(--head);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}

.offer__list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.offer__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.9375rem;
}

.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad);
}

.offer__price {
  margin: 0 0 18px;
  font-family: var(--head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.tel {
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* The same number as a screen rather than as a word inside a sentence: the
   "hear it first" branch exists so the visitor can dial it, so it is the
   largest thing on the page and it is a tap target, not a line of copy. */
.q > .tel {
  display: inline-block;
  margin: 18px 0 14px;
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 2px solid var(--line);
  padding-bottom: 4px;
}
.q > .tel:hover { border-bottom-color: var(--ink); }
.q > .tel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ── exit ───────────────────────────────────────────────────────────────── */

.exit .q__h {
  font-size: 1.5rem;
}

/* ── motion and breathing room ──────────────────────────────────────────── */

.stage > * {
  animation: rise 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage > *,
  .ring,
  .progress__fill,
  .opt {
    animation: none;
    transition: none;
  }
}

@media (min-width: 640px) {
  .shell {
    max-width: 560px;
    padding-top: 40px;
  }

  .q__h,
  .q h1,
  .q h2 {
    font-size: 2.125rem;
  }

  .offer {
    padding: 28px 26px;
  }
}