/* =========================================================
   VARIO24 — construction.css
   Page-specific styles for the /construction funnel ONLY.
   Loaded AFTER styles.css — reuses all existing design tokens
   (colors, radii, shadows, spacing, buttons, cards, forms).
   Nothing in here affects the main site.
========================================================= */

/* ---------- Construction sub-brand identity ----------
   Brand-palette motifs (this file is page-scoped, so none of it
   leaks to the main site): the dark navy hero and the
   СТРОИТЕЛСТВО preloader variant. */
.preloader--construction { background: linear-gradient(180deg, #fff 55%, #EFF4FF 100%); gap: .9rem; }

/* Dark "site office" hero — the homepage opens light, the construction
   funnel opens dark navy. The whole first screen reads differently, so
   there is no doubt which page you are on. */
.construction-hero {
  background:
    radial-gradient(70% 65% at 85% 0%, rgba(59, 130, 246, .22), transparent 62%),
    radial-gradient(50% 55% at 0% 25%, rgba(37, 99, 235, .16), transparent 60%),
    var(--navy);
}
.construction-hero .eyebrow { color: #93C5FD; }
.construction-hero .hero__title { color: #fff; }
.construction-hero .hero__title .text-gradient {
  /* the default blue gradient is too dark against navy */
  background-image: linear-gradient(135deg, #60A5FA, #93C5FD);
}
.construction-hero .hero__lead { color: rgba(255, 255, 255, .8); }
.construction-hero .hero__price { color: #E2E8F0; }
.construction-hero .hero__price strong { color: #93C5FD; }
.construction-hero .hero__micro { color: rgba(255, 255, 255, .62); }
.construction-hero .hero__micro strong { color: #E2E8F0; }
.construction-hero .mech__chip {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: #E2E8F0;
  box-shadow: none;
}
.construction-hero .mech__chip .ico { color: #93C5FD; }


/* ---------- Hero additions ---------- */
/* Big title, compact lead — the short lead keeps the left column
   balanced with the mockup height despite the larger heading */
.construction-hero .hero__title { font-size: clamp(1.8rem, 4.2vw, 2.6rem); margin: .9rem 0 1rem; text-wrap: balance; }
/* Each headline sentence is one line on desktop… */
.construction-hero .hero__line { display: block; }
/* The gradient phrase never breaks mid-way: when the long third sentence
   wraps at this size, the break lands before it, not inside it */
.construction-hero .hero__title .text-gradient { white-space: nowrap; }
.construction-hero .hero__lead { max-width: 46ch; font-size: clamp(.95rem, 1.6vw, 1.05rem); margin-bottom: 1.5rem; }

/* Hero CTAs side by side: dominant primary, compact ghost.
   On phones styles.css (≤640) switches the row to a column, so
   nowrap is safe and they stack full-width there. */
.construction-hero .hero__actions { flex-wrap: nowrap; align-items: stretch; gap: .7rem; }
.construction-hero .hero__actions .btn--primary { padding-inline: 1.35rem; font-size: .98rem; }
/* Same height as the primary (same block padding + font), only narrower */
.construction-hero .hero__actions .btn--ghost { padding: .95rem 1.3rem; font-size: .98rem; }
.hero__price {
  margin: -0.6rem 0 1.4rem;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.02rem;
}
.hero__price strong { color: var(--blue); }
.hero__micro {
  margin: 0 0 1.6rem;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
}

/* Mechanism chips: Website · Google · Local visibility · ... */
.mech {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2rem;
}
/* Full-width chip row under the hero grid */
.mech--hero {
  justify-content: center;
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 0;
}
.mech__chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .83rem;
  font-weight: 650;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.mech__chip .ico { width: 15px; height: 15px; color: var(--blue); }

/* Construction-flavored content inside the shared .browser mockup */
.mock-photo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  margin-bottom: .9rem;
  background: #e2e8f0;
}
.mock-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Site photo: frame the roofer laying tiles, not the sky above the ridge */
.mock-photo--site { aspect-ratio: 16 / 8.5; }
.mock-photo--site img { object-position: 50% 42%; }
.mock-photo__chip {
  position: absolute;
  left: .6rem; bottom: .6rem;
  background: rgba(255,255,255,.94);
  color: var(--navy);
  font-size: .66rem;
  font-weight: 700;
  padding: .28rem .6rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.mock-photo__chip--right { left: auto; right: .6rem; background: var(--gradient); color: #fff; }
.mock-services { display: flex; gap: .4rem; margin-bottom: .9rem; flex-wrap: wrap; }
.mock-services span {
  font-size: .64rem;
  font-weight: 650;
  color: var(--ink-soft);
  background: #f1f5f9;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: .22rem .55rem;
}
.mock-quote { display: grid; grid-template-columns: 1.4fr 1fr; gap: .6rem; align-items: center; }
.mock-quote__lines { display: grid; gap: .4rem; }
.mock-quote__lines i { display: block; height: 8px; border-radius: 4px; background: #e2e8f0; }
.mock-quote__lines i:last-child { width: 65%; }
.mock-quote__btn {
  display: grid;
  place-items: center;
  background: var(--gradient);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: .5rem .4rem;
  box-shadow: var(--shadow-blue);
  white-space: nowrap;
}

/* ---------- Trades (target group) ---------- */
.trades {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8rem;
}
.trade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.1rem .8rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.trade:hover { transform: translateY(-3px); border-color: #dbe7ff; box-shadow: var(--shadow-md); }
.trade .ico { width: 26px; height: 26px; color: var(--blue); }
.trades__note { margin: 1.4rem 0 0; text-align: center; color: var(--muted); font-size: .93rem; }

/* ---------- Problem / value section ---------- */
.value__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.value__media { position: relative; }
.value__media img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.value__media-badge {
  position: absolute;
  left: -1rem; bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: .7rem .95rem;
  font-size: .85rem;
  font-weight: 650;
  color: var(--navy);
  max-width: 85%;
}
.value__media-badge .ico { color: var(--blue); flex: none; }
.value__title { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 1rem; }
.value__text { color: var(--ink-soft); margin: 0 0 1.2rem; }
.value__list { display: grid; gap: .55rem; margin: 0 0 1.4rem; }
.value__list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--ink-soft);
  font-size: .96rem;
}
.value__list li::before {
  content: "✕";
  position: absolute; left: 0; top: 0;
  color: #dc2626;
  font-weight: 700;
  font-size: .9rem;
}
.value__quote {
  margin: 0;
  padding: 1rem 1.2rem;
  background: #f5f9ff;
  border-left: 4px solid var(--blue);
  border-radius: var(--r-sm);
  color: var(--navy);
  font-weight: 650;
}

/* ---------- Quiz ---------- */
.quiz-wrap { max-width: 720px; margin-inline: auto; }
.quiz-card {
  position: relative;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(59,130,246,.08), transparent 60%),
    #fff;
  border: 1px solid #dbe7ff;
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-lg);
}
.quiz__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .6rem;
}
.quiz__progress {
  height: 6px;
  background: var(--border-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.quiz__progress-bar {
  height: 100%;
  width: 0;
  background: var(--gradient);
  border-radius: var(--r-pill);
  transition: width .35s ease;
}
.quiz__question {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 750;
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 0 0 1.2rem;
}
.quiz__step { animation: quiz-in .3s ease; }
.quiz__hint { margin: -.8rem 0 1.1rem; color: var(--muted); font-size: .9rem; }
.quiz__options { display: grid; gap: .6rem; }
/* Multi-select steps (many short options): two columns, tighter buttons */
.quiz__options--grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
.quiz__options--grid .quiz__option { padding: .7rem .9rem; font-size: .92rem; }
.quiz__continue { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
/* When goToStep() moves the back button onto this row, it sits left */
.quiz__continue .quiz__back { margin-right: auto; }
.quiz__nav:not(:has(.quiz__back)) { display: none; }
.quiz__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  text-align: left;
  padding: .9rem 1.15rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.quiz__option::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .35;
  transition: opacity .16s ease;
}
.quiz__option:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.quiz__option:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.quiz__option:disabled:hover {
  border-color: var(--border);
  color: var(--ink-soft);
  transform: none;
  box-shadow: none;
}
.quiz__option:hover::after { opacity: 1; }
.quiz__option.is-selected { border-color: var(--blue); background: #eef4ff; color: var(--blue); }
/* Inline follow-up (optional website URL after a "yes" answer) */
.quiz__followup {
  display: grid;
  gap: .55rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-soft);
  animation: quiz-in .25s ease;
}
.quiz__followup[hidden] { display: none; }
.quiz__followup-label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-soft);
}
.quiz__followup-row { display: flex; gap: .6rem; }
.quiz__followup-row .field__input { flex: 1; min-width: 0; }

.quiz__nav { display: flex; justify-content: flex-start; margin-top: 1.3rem; }
.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  padding: .35rem .5rem;
  border-radius: var(--r-sm);
  transition: color .16s ease;
}
.quiz__back:hover { color: var(--blue); }
.quiz__back[hidden] { display: none; }

/* Quiz result */
.quiz__result { text-align: center; animation: quiz-in .35s ease; }
.quiz__result .badge { margin-bottom: 1rem; }
.quiz__result-plan {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 850;
  letter-spacing: -.03em;
  margin: 0 0 .2rem;
}
.quiz__result-price { color: var(--muted); font-weight: 650; margin: 0 0 .9rem; }
.quiz__result-price strong { color: var(--navy); font-size: 1.15rem; }
.quiz__result-trial {
  display: inline-block;
  background: #eef4ff;
  border: 1px solid #dbe7ff;
  color: var(--blue);
  font-weight: 700;
  font-size: .9rem;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  margin: 0 0 1.2rem;
}
.quiz__result-text {
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 1.2rem;
}
.quiz__result-next {
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1.2rem;
}
.quiz__result-actions { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.quiz__result-alt {
  background: none;
  border: none;
  font-family: inherit;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: .25rem .5rem;
}
.quiz__result-alt:hover { color: var(--blue); }
.quiz__noscript { text-align: center; color: var(--ink-soft); }

@keyframes quiz-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Pricing (plan card extras) ---------- */
/* Equal columns: bare 1fr never shrinks below a track's min-content, so the
   long nowrap CTA labels made the middle/right cards wider than the left one.
   minmax(0,1fr) keeps the tracks identical; a too-long CTA wraps instead. */
.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan .btn--block { white-space: normal; }
.plan__subtitle { color: var(--blue); }
.plan__trial { align-self: flex-start; margin: -0.6rem 0 1rem; }
.plan__promise { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1.1rem; }
.plan__terms {
  margin: .8rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
}
/* Uniform 4-item checklist — the visible "main things" of each card */
.plan__ticks {
  display: grid;
  gap: .7rem;
  margin: .3rem 0 1.6rem;
  flex: 1; /* spacer: keeps the CTAs bottom-aligned across equal cards */
}
.plan__ticks li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .93rem;
  color: var(--ink-soft);
}
.plan__ticks li::before {
  content: "✓";
  position: absolute; left: .1rem; top: 0;
  color: var(--blue);
  font-weight: 800;
}
.plan__ticks li strong { color: var(--navy); }
/* .plan__highlight is used inside the plan detail modals */
.plan__highlight {
  background: #f5f9ff;
  border: 1px dashed #bfd3ff;
  border-radius: var(--r-md);
  padding: .75rem .95rem;
  font-size: .9rem;
  color: var(--navy);
  margin-bottom: 1.2rem;
}
.plan__highlight strong { color: var(--blue); }

/* Little asterisk on the card prices → the VAT note under the guarantee */
.plan__ast { color: var(--muted); font-size: 1rem; font-weight: 700; margin-left: .05rem; }
.plans__vat-note {
  margin: .9rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
}
/* "Everything included" opens a modal (see .plan-modal below) — a small
   link right above the CTA; the checklist is the card's visible content. */
.plan__details-link {
  margin: 0 auto .8rem;
  padding: .3rem .3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 650;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .16s ease;
}
.plan__details-link:hover { color: var(--navy); }
/* Modal body: tighter feature list + small print under it */
.plan-modal .modal__body { padding-top: 2.4rem; }
.plan-modal .plan__features { flex: none; margin-bottom: 1.2rem; }
.plan-modal__note {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 0 1.3rem;
}
.plans__note { margin-top: 2rem; }

/* Growth 5-inquiry guarantee banner (under the plan cards) */
.guarantee {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 860px;
  margin: 2.4rem auto 0;
  padding: 1.3rem 1.5rem;
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(59,130,246,.08), transparent 60%),
    #fff;
  border: 1px solid #dbe7ff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.guarantee__icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.guarantee__icon .ico { width: 24px; height: 24px; }
.guarantee__title {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: var(--navy);
  margin: .2rem 0 .5rem;
}
.guarantee__text { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.guarantee__text a { color: var(--blue); font-weight: 650; }

/* ---------- Examples / visual proof ---------- */
.shot-chip {
  position: absolute;
  z-index: 2;
  background: rgba(255,255,255,.94);
  color: var(--navy);
  font-size: .74rem;
  font-weight: 700;
  padding: .32rem .65rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.shot-chip--brand { background: var(--gradient); color: #fff; }
.example__review {
  position: absolute;
  z-index: 2;
  left: .8rem; right: .8rem; bottom: .8rem;
  background: rgba(255,255,255,.96);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: .6rem .8rem;
  text-align: left;
}
.example__review .stars { font-size: .8rem; margin-bottom: .15rem; letter-spacing: .08em; }
.example__review p { margin: 0; font-size: .76rem; color: var(--ink-soft); font-weight: 600; }
.portfolio__preview--photo::after { background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.25)); }
.portfolio__preview--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Signup / onboarding ---------- */
.signup__col { max-width: 760px; margin-inline: auto; }
.plan-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-bottom: .4rem;
}
.plan-pick { position: relative; display: block; cursor: pointer; }
.plan-pick input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.plan-pick__body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  height: 100%;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.plan-pick__name { font-weight: 750; color: var(--navy); font-size: 1rem; }
.plan-pick__price { font-weight: 800; color: var(--blue); font-size: .95rem; }
.plan-pick__sub { color: var(--muted); font-size: .8rem; }
.plan-pick input:checked ~ .plan-pick__body {
  border-color: var(--blue);
  background: #eef4ff;
  box-shadow: var(--shadow-sm);
}
.plan-pick input:focus-visible ~ .plan-pick__body {
  outline: 3px solid rgba(37,99,235,.55);
  outline-offset: 2px;
}
.signup__hint {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 1.1rem 0 1.4rem;
  padding: .8rem 1rem;
  background: #f5f9ff;
  border: 1px solid #dbe7ff;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-size: .9rem;
}
.signup__hint .ico { color: var(--blue); flex: none; margin-top: .1rem; }
.field__note { color: var(--muted); font-size: .82rem; margin: .35rem 0 0; }

/* Multi-step signup wizard */
.fsteps-head { margin-bottom: 1.6rem; }
.fstep { animation: quiz-in .3s ease; }
.fstep[hidden] { display: none; }
.fstep-nav {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1.5rem;
}
.fstep-nav--first { justify-content: flex-end; }
.fstep-nav .btn--primary { min-width: 40%; }
.fstep-submit { flex: 1; }

/* Success panel (shown after successful submission) */
.signup-success { text-align: center; animation: quiz-in .35s ease; }
.signup-success__icon {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.signup-success__icon .ico { width: 30px; height: 30px; }
.signup-success__title { font-size: clamp(1.4rem, 3.5vw, 1.8rem); margin-bottom: .6rem; }
.signup-success__text { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1.6rem; }
.signup-success__steps {
  display: grid;
  gap: .6rem;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}
.signup-success__steps li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: var(--ink-soft);
  font-size: .95rem;
}
.signup-success__steps .num {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef4ff;
  color: var(--blue);
  font-weight: 750;
  font-size: .82rem;
}

/* ---------- Final CTA extras ---------- */
.cta__hint { color: #94a3b8; font-size: .9rem; margin: .8rem 0 0; }

/* Long unbreakable mock URLs must never widen the page on phones:
   grid/flex children default to min-width:auto, so the fake browser
   bar can push the whole layout past the viewport. */
.cta__grid > * { min-width: 0; }
.browser { min-width: 0; max-width: 100%; }
.browser__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* =========================================================
   RESPONSIVE (mirrors the main site's breakpoints)
========================================================= */
@media (max-width: 1024px) {
  .value__grid { grid-template-columns: 1fr; }
  .value__media { max-width: 480px; margin-inline: auto; }
  .value__media img { aspect-ratio: 4 / 3; }
}

@media (max-width: 900px) {
  .trades { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The full-screen mobile menu styling moved to styles.css — it is
     shared with the homepage now. */
}

@media (max-width: 640px) {
  /* The funnel's CTA labels are longer than the main site's — the shared
     .btn { white-space: nowrap } would push the layout past the viewport. */
  .btn { white-space: normal; }

  /* …and on phones the sentences flow as one balanced paragraph, so the
     size can stay big without mid-sentence orphan breaks. */
  .construction-hero .hero__title { font-size: clamp(2.1rem, 9.2vw, 2.6rem); }
  .construction-hero .hero__line { display: inline; }

  .trades { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-picks { grid-template-columns: 1fr; }
  .guarantee { flex-direction: column; align-items: center; text-align: center; }
  .value__media-badge { left: .8rem; right: .8rem; max-width: none; }
  .mech { justify-content: center; }
  .hero__price { text-align: center; }
  .quiz__option { padding: .85rem 1rem; }
  .quiz__followup-row { flex-direction: column; }
  .quiz__followup-row .btn { width: 100%; }
  .quiz__options--grid { grid-template-columns: 1fr; }
  .quiz__continue .btn { width: 100%; }
  /* Continue on top, back underneath (DOM order is back → continue) */
  .quiz__continue { flex-direction: column-reverse; align-items: stretch; }
  .quiz__continue .quiz__back { margin-right: 0; align-self: flex-start; }

  /* Wizard nav on phones: full-width primary on top, back demoted to a
     subtle centered text link below it (same pattern as the quiz back). */
  .fstep-nav { flex-direction: column-reverse; gap: .4rem; }
  .fstep-nav .btn--primary { width: 100%; flex: none; }
  .fstep-nav .btn--ghost {
    align-self: center;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--muted);
    min-height: 0;
    padding: .45rem .9rem;
    font-size: .92rem;
    font-weight: 600;
  }
  .fstep-nav .btn--ghost::before { content: "←"; margin-right: .35rem; }
  .fstep-nav .btn--ghost:hover { color: var(--blue); transform: none; box-shadow: none; border: none; }
}