/* Polish pass — a refinement layer over the live design. Nothing structural
   changes: same layout, copy and behaviour. What it fixes:

   1. Contrast on light sections. Green-ink (#3e9e2d) and the faint grey
      captions measured 2.1–3.4:1 on mist/paper, under the 4.5:1 minimum for
      small text. Text on light surfaces now uses green-deep (≈4.8–5.1:1) and
      a darker grey (≈4.6–4.9:1). Dark sections are untouched.
   2. Headings and copy wrap properly: balanced headings (no orphans like a
      lone "day." on the hero's last line), pretty paragraph breaks.
   3. Browser surfaces carry the palette: text selection, caret and
      scrollbars, which otherwise ship with browser defaults.
   4. Numerals that are measured or compared line up (tabular figures) in the
      stat strip, step times and the price readout.
   5. Icons: the emoji previously standing in for icons are now drawn SVG in
      one stroke family (see .ico in index.html); this sizes them.

   Only the light-section colour changes affect existing contrast; everything
   that already passed is left alone. */

/* 1. contrast on light sections ------------------------------------------ */
.section--mist .eyebrow,
.section--paper .eyebrow,
.steps__time,
.mono-tag,
.rows__arrow { color: var(--green-deep); }

.section--mist .steps__time--muted,
.quotes__by,
.note,
.chips__label { color: #6b7165; }

/* 2. typography ------------------------------------------------------------ */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.eyebrow-pill { text-wrap: balance; }

/* 3. browser surfaces ----------------------------------------------------- */
::selection { background: var(--green); color: var(--night); }
html { caret-color: var(--green); scrollbar-color: #2a3324 var(--night); }

/* 4. numerals ------------------------------------------------------------- */
.stats strong,
.steps__time,
.estimate__result,
.estimate__step-num { font-variant-numeric: tabular-nums; }

/* 5. icons ----------------------------------------------------------------- */
.ico { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.btn .ico { width: 18px; height: 18px; }
.contact__icon .ico { width: 18px; height: 18px; }
.wa .ico { width: 26px; height: 26px; }
.transition__badge .ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.nav__tel .ico { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* ---------------------------------------------------------------------------
   Round 2 — audit actions (all in the sandbox)
   --------------------------------------------------------------------------- */

/* critique: the five section eyebrows are removed. The heading carries the
   section on its own; the .eyebrow-pill in the hero is a different element
   and stays. Revert by deleting this rule. */
.eyebrow:not(.eyebrow-pill) { display: none; }

/* typeset: keep the hero's emphasised phrase on one line, so no single word
   is left alone on the last line at narrow widths. */
.hero__title em,
.nowrap { white-space: nowrap; }

/* extract: the rgba line colours repeated across cards, inputs and option
   tiles are now named tokens. Values are unchanged. */
:root {
  --line-on-dark: rgba(255, 255, 255, 0.15);
  --line-on-dark-strong: rgba(255, 255, 255, 0.55);
}
.estimate__input,
.estimate__choice,
.van-option { border-color: var(--line-on-dark); }
.estimate__more { border-color: var(--line-on-dark-strong); }

/* clarify: tracked uppercase labels were wide enough to read as shouting;
   a narrower tracking keeps them as labels. */
.mono-tag,
.estimate__label,
.steps__time { letter-spacing: 0.1em; }

/* adapt: touch targets reach 44px. The extra height is padding that is
   cancelled by a matching negative margin, so no line of the layout moves. */
.btn,
.chip,
.contact a,
.footer__links a,
.footer__contact a,
.footer__meta a,
.brand { min-height: 44px; display: inline-flex; align-items: center; }
.nav__links a { padding-block: 12px; margin-block: -12px; }
.footer__links a,
.footer__contact a { padding-block: 12px; margin-block: -12px; }
.footer__links,
.footer__contact { gap: 0; }

/* adapt (round 2 follow-up): nav and footer links were short horizontally
   too (FAQ is 27px wide). Horizontal padding widens the hit area to 45px and
   a matching negative margin keeps the spacing between links unchanged. */
.nav__links a,
.footer__links a,
.footer__contact a { padding-inline: 9px; margin-inline: -9px; }

.footer__meta a { min-width: 44px; justify-content: center; }

/* touch: the forget-details button is a tap target on phones */
.remember__forget { display: inline-flex; align-items: center; min-height: 44px; }