/* =========================================================================
   Pinewood Search - lp.css
   Questionnaire funnel (lp-audit.html) only. Loads AFTER styles.css.

   DESIGN RULE: this file adds NOTHING that styles.css already provides.
   The nav, brand, buttons, headings, type scale, section rhythm, fields and
   focus rings all come from styles.css so the page is visually identical to
   the main site. Only the quiz mechanics live here.
   ========================================================================= */

/* The `hidden` attribute must beat component display values. `.btn` is
   display:inline-flex, which otherwise overrides the UA [hidden] rule and
   leaves "Continue" buttons visible on steps that auto-advance.
   Scoped to this page - lp.css is only loaded by lp-audit.html. */
[hidden] { display: none !important; }

/* ---------- Progress bar: pinned directly under the fixed nav ---------- */
.q-progress {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  height: 4px; background: var(--bg-sunken);
}
.q-progress[hidden] { display: none; }
.q-progress__bar {
  height: 100%; width: 0%;
  background: var(--accent);
  transition: width .45s var(--ease-enter);
}
@media (prefers-reduced-motion: reduce) { .q-progress__bar { transition: none; } }

/* ---------- Intro screen: same rhythm as .hero on the main site ---------- */
.lp-intro {
  padding-top: calc(var(--nav-h) + var(--s-12));
  padding-bottom: var(--s-16);
}
.lp-intro__inner { max-width: 760px; }
.lp-intro[hidden] { display: none; }

/* The offer IS the headline: free audit, then optional paid fix. Two parts,
   stacked, so the two-step reads at a glance. */
.lp-offer { display: flex; flex-direction: column; font-size: clamp(46px, 8vw, 92px); line-height: 1.02; }
.lp-offer__free { color: var(--accent); }
.lp-offer__fix { color: var(--text); }
/* Footnote marker on the offer: kept small and out of the line box so it can't
   stretch the headline's leading. Pairs with .lp-fine under the CTA. */
.lp-offer__ast { font-size: .34em; line-height: 0; vertical-align: super; font-weight: 600; }

.lp-bullets { display: grid; gap: var(--s-4); margin: 0 0 var(--s-8); max-width: 62ch; }
.lp-bullets li { display: flex; gap: var(--s-3); align-items: flex-start; min-width: 0; }
.lp-bullets svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 1px; }
.lp-bullets b { color: var(--text); font-weight: 600; }
.lp-bullets span { color: var(--text-muted); }

.lp-ctarow { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.lp-trust { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; }
.lp-fine { font-size: 12px; line-height: 1.4; color: var(--text-muted); opacity: .78; margin: 0; max-width: 52ch; }
@media (max-width: 480px) { .lp-ctarow .btn { width: 100%; justify-content: center; } }

/* ---------- Proof strip (intro only) ---------- */
.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-12) 0 var(--s-6); }
.lp-frame {
  border: 1px solid var(--border); border-radius: var(--r-card);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0;
}
.lp-frame figcaption {
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-muted);
}
.lp-frame--after figcaption { color: var(--accent); }
.lp-frame img { width: 100%; height: auto; }
@media (max-width: 640px) { .lp-compare { grid-template-columns: 1fr; } }

.lp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.lp-metric {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s-6) var(--s-4); text-align: center; min-width: 0;
}
.lp-metric__n {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700;
  color: var(--accent); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; display: block;
}
.lp-metric__l { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--s-1); display: block; }
@media (max-width: 560px) { .lp-metrics { grid-template-columns: 1fr; gap: var(--s-3); } .lp-metric { padding: var(--s-4); } }

/* ---------- Questionnaire ---------- */
.quiz {
  padding-top: calc(var(--nav-h) + var(--s-12));
  padding-bottom: var(--s-24);
}
.quiz[hidden] { display: none; }
.quiz__inner { max-width: 640px; margin-inline: auto; }

.q-step { display: none; }
.q-step.is-active { display: block; animation: qIn .32s var(--ease-enter); }

.form__fit {
  padding: var(--s-10) var(--s-6);
  text-align: center;
}
.form__fit[data-show="true"] { display: block; animation: pop .4s var(--ease-land); }
.form__fit h3 { margin-bottom: var(--s-3); }
.form__fit p { max-width: 540px; margin-inline: auto; }
.form__fit a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@keyframes qIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q-step.is-active { animation: none; } }

.q-step h2 { margin-bottom: var(--s-2); }
.q-help { color: var(--text-muted); margin: 0 0 var(--s-8); }

/* Choice cards (radio) */
.q-choices { display: grid; gap: var(--s-3); margin: 0; border: 0; padding: 0; }
.q-choices legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q-choice {
  position: relative; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6); min-height: 60px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-btn); cursor: pointer;
  transition: border-color .15s var(--ease-enter), background .15s var(--ease-enter), transform .1s var(--ease-enter);
}
.q-choice:hover { border-color: var(--accent-bright); background: var(--accent-soft); }
.q-choice:active { transform: scale(.99); }
.q-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-choice:focus-within { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.q-choice__mark {
  width: 22px; height: 22px; border-radius: var(--r-pill); flex: none;
  border: 2px solid var(--border); background: var(--surface);
  display: grid; place-items: center;
}
.q-choice__mark::after { content: ""; width: 10px; height: 10px; border-radius: var(--r-pill); background: transparent; }
.q-choice__t { min-width: 0; }
.q-choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.q-choice.is-selected .q-choice__mark { border-color: var(--accent); }
.q-choice.is-selected .q-choice__mark::after { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .q-choice { transition: none; } .q-choice:active { transform: none; } }

/* Navigation row */
.q-nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8); }
.q-back {
  background: none; border: 0; padding: var(--s-2) 0; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: var(--fs-caption);
  display: inline-flex; align-items: center; gap: 6px;
}
.q-back:hover { color: var(--accent); }
.q-back[hidden] { display: none; }
.q-nav .btn { margin-left: auto; }
@media (max-width: 480px) {
  .q-nav { flex-wrap: wrap; }
  .q-nav .btn { width: 100%; margin-left: 0; order: -1; justify-content: center; }
}

/* Reassurance line under each step */
.q-reassure {
  margin-top: var(--s-12); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--s-2);
}
.q-reassure svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------- City combobox ---------- */
.q-combo { position: relative; }
.q-combo__wrap { position: relative; }
.q-combo__wrap input { padding-right: 44px; }
.q-combo__clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted); border-radius: var(--r-pill);
}
.q-combo__clear:hover { color: var(--text); background: var(--bg-sunken); }
.q-combo__clear svg { width: 16px; height: 16px; }

.q-combo__list {
  position: absolute; z-index: 30; left: 0; right: 0;
  margin-top: 4px; padding: var(--s-1);
  max-height: 244px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-btn);
  box-shadow: var(--shadow-md);
}
.q-combo__opt {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-input);
  cursor: pointer;
  font-size: var(--fs-body);
  display: flex; align-items: center; gap: var(--s-3);
}
.q-combo__opt svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.q-combo__opt:hover,
.q-combo__opt[aria-selected="true"] { background: var(--accent-soft); }
.q-combo__opt[aria-selected="true"] svg { color: var(--accent); }
.q-combo__opt mark { background: none; color: var(--accent); font-weight: 700; }

.q-combo__hint { font-size: var(--fs-caption); color: var(--text-muted); margin: var(--s-2) 0 0; }

/* Recap block on the final step */
.q-recap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s-6); margin: 0 0 var(--s-8);
}
.q-recap h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--s-3); }
.q-recap ul { display: grid; gap: var(--s-2); }
.q-recap li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-muted); }
.q-recap svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }

/* ---------- Booking step (revealed after submit) ---------- */
.lp-booking { margin-top: var(--s-6); text-align: left; }
.lp-booking h4 { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--s-2); }
.lp-booking p { color: var(--text-muted); margin: 0 0 var(--s-4); }
/* Calendly's inline widget fills its parent - it does NOT grow to fit its own
   content - so the container has to be tall enough for the month grid plus the
   time-slot column, or the calendar renders cramped and scrolls internally. */
.lp-calendly { width: 100%; }
.lp-calendly:not(:empty) { min-height: 760px; }
.lp-calendly iframe { display: block; width: 100%; min-height: inherit; border: 0; }

/* =========================================================================
   MOBILE: one screen per step, no scrolling.
   Each step becomes a flex column exactly one viewport tall (dvh, so the
   browser chrome is accounted for). Type, choice cards and field spacing
   compact so the tallest step still fits a 375x667 phone. Tap targets stay
   >= 44px, above the 24px WCAG 2.2 minimum.
   ========================================================================= */
@media (max-width: 760px) {

  /* Under 860px styles.css switches .nav from fixed to sticky, so the nav
     now occupies flow. Full-height sections must subtract it rather than
     pad for it, or every screen sits exactly --nav-h past the fold. */

  /* --- Intro --- */
  .lp-intro {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
    display: flex; align-items: center;
  }
  .lp-intro h1 { font-size: 38px; line-height: 1.05; margin-bottom: var(--s-3); }
  .lp-intro .lead { font-size: var(--fs-body); margin-bottom: var(--s-4); }
  .lp-bullets { gap: var(--s-3); margin-bottom: var(--s-6); }
  .lp-bullets li { font-size: var(--fs-caption); }
  .lp-bullets svg { width: 18px; height: 18px; }
  /* Proof already ran in the ad they just tapped; hiding it here is what
     buys the single-screen intro. Still shown on tablet and desktop. */
  .lp-compare, .lp-metrics, .lp-intro .muted { display: none; }

  /* --- Quiz shell: exactly one viewport --- */
  .quiz {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
    display: flex;
  }
  .quiz > .container { display: flex; }
  .quiz__inner { display: flex; flex-direction: column; width: 100%; }
  /* --s-4, not --s-5: styles.css never declares --s-5 (it's always used with
     a 20px fallback). Sticking to declared grid tokens here. */
  .quiz .form { padding: var(--s-4); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .quiz .form__fields { display: flex; flex: 1 1 auto; min-height: 0; }
  .q-step.is-active { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 0; }

  /* --- Question typography --- */
  .q-step h2 { font-size: 21px; line-height: 1.2; margin-bottom: var(--s-1); }
  .q-help { font-size: var(--fs-caption); margin-bottom: var(--s-4); }
  .q-step .eyebrow { margin-bottom: var(--s-1); }

  /* --- Choice cards --- */
  .q-choices { gap: var(--s-2); }
  .q-choice { min-height: 46px; padding: var(--s-2) var(--s-4); gap: var(--s-3); font-size: var(--fs-caption); }
  .q-choice__mark { width: 18px; height: 18px; }
  .q-choice__mark::after { width: 8px; height: 8px; }

  /* Nav pinned to the bottom of the screen, not floating mid-step */
  .q-nav { margin-top: auto; padding-top: var(--s-4); }
  .q-reassure { display: none; }

  /* The footer sits below a 100dvh section, so it alone pushed every screen
     ~248px past the fold. Legal links stay reachable from the consent line on
     the contact step, which is where data is actually collected. */
  .lp-footer { display: none; }

  /* --- Contact step --- */
  .q-recap { display: none; }           /* the questions already primed them */
  .q-optional { display: none; }        /* website: optional, ask on the call */
  .quiz .field { margin-bottom: var(--s-3); }
  .quiz .field label { margin-bottom: 2px; }
  /* styles.css collapses .form__row to one column under 860px. Inside the
     quiz keep name/business and email/phone paired - short fields sit fine
     side by side at 375px and it saves two field heights. */
  .quiz .form__row { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .consent { margin-bottom: var(--s-3); }
  .quiz .btn--lg { padding-block: var(--s-3); }
  .form__status { margin-top: var(--s-2); }
}

/* --------------------------------------------------------------------------
   BOOKING SCREEN (mobile): the deliberate exception to "one screen".
   Every question fits the viewport, but a calendar cannot - and by this point
   the lead is already captured, so scrolling costs nothing. Release the
   one-viewport lock and let the page grow around the widget.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .quiz.is-booking {
    min-height: 0;
    display: block;
    padding-bottom: var(--s-12);
  }
  .quiz.is-booking > .container,
  .quiz.is-booking .quiz__inner { display: block; }
  .quiz.is-booking .form { display: block; flex: none; min-height: 0; padding: var(--s-4) var(--s-3); }
  .quiz.is-booking .form__success { padding: var(--s-6) 0; }
  /* Calendly's mobile layout stacks the grid above the times, so it needs
     appreciably more room than the desktop side-by-side view. */
  .lp-calendly:not(:empty) { min-height: 1080px; }
}

/* Very short phones (iPhone SE and similar): claw back a little more */
@media (max-width: 760px) and (max-height: 700px) {
  .lp-intro h1 { font-size: 32px; }
  .lp-intro .lead { margin-bottom: var(--s-3); }
  .lp-bullets { gap: var(--s-2); margin-bottom: var(--s-4); }
  .lp-trust { font-size: 12px; }
  .lp-fine { font-size: 11px; }
  .q-step h2 { font-size: 19px; }
  .q-choice { min-height: 44px; }
}

/* ---------- Footer: matches the main site's footer bottom bar ---------- */
.lp-footer {
  padding-block: var(--s-12);
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--fs-caption); text-align: center;
}
.lp-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin-bottom: var(--s-3); }
.lp-footer a { color: var(--text-muted); }
.lp-footer a:hover { color: var(--accent); }
.lp-footer p { margin: 0 auto; max-width: 70ch; }