/* =============================================================================
   Deal Sheet — Valuator (lite) styles.
   Single typeface (Inter), single accent (#0d7aff Deal Sheet Blue),
   institutional palette grounded in ink + paper + warm bg. Restraint over
   decoration; one blue accent per surface, used surgically.
   ============================================================================= */

:root {
  --bg: #FFFFFF;                 /* Paper — primary background */
  --panel: #FFFFFF;              /* Paper */
  --panel-2: #F8F6F3;            /* Warm BG — alternate background */
  --text: #0A0A0A;               /* Ink — headings & body */
  --muted: #64748B;              /* Slate — secondary text */
  --muted-soft: #94A3B8;         /* Slate Soft — captions, dividers w/ text */
  --border: #E5E5E2;             /* Hairline — dividers */
  --accent: #0d7aff;             /* Deal Sheet Blue — surgical accent */
  --accent-soft: #e8f2ff;        /* Blue Light — subtle fills */
  --accent-dark: #0a5fc7;        /* Blue Dark — secondary emphasis */
  --shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 4px 12px rgba(10, 10, 10, 0.04);
  --shadow-soft: 0 8px 30px rgba(13, 122, 255, 0.10);
  --radius: 4px;                 /* Sharp edges per brand */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  /* Item 9 — typography tightening. Better hinting on body text without
     affecting layout; only affects how glyphs are rasterized. */
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; display: flex; flex-direction: column; }

a { color: inherit; }

/* Item 9 — letter-spacing trim on display type. Headings above ~24px
   look tighter and more considered with -0.02em. Applied via class so
   we can opt-in per heading rather than altering every h1/h2 globally. */
.lite-q,
.results-title,
.cta-headline { letter-spacing: -0.02em; }

/* Item 9 — tabular-nums for any numeric display. Dollar figures and
   percentages keep consistent column widths as they animate (count-up
   in particular), and the spectrum labels don't shimmy on resize. */
.rs-val,
.results-plain,
#result_conservative,
#result_standard { font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */
.lite-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(160%) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.lite-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.lite-mark { width: 28px; height: 28px; }
.lite-brand-name { font-weight: 700; letter-spacing: -0.4px; font-size: 17px; color: var(--text); }
.lite-header-meta { font-size: 12px; color: var(--muted); }

/* ---------- Top dot progress ---------- */
.lite-progress {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 16px 0 4px;
}
/* Item 6 — three states with distinct personalities.
     - Empty: small, soft gray, no animation.
     - Active: pulses subtly (1.0 → 1.3 → 1.0) on a 2s loop so the
       active dot feels "alive" without being distracting.
     - Done: instant scale-from-0.6-to-1.0 snap (overshoots slightly
       to 1.05) when transitioning, satisfying click feedback. */
.lite-progress .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border);
  transition: background .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.lite-progress .dot.active {
  background: var(--accent);
  animation: dotPulse 2s ease-in-out infinite;
}
.lite-progress .dot.done {
  background: var(--accent);
  opacity: 0.5;
  animation: dotDoneSnap .35s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1.25); }
  50%      { transform: scale(1.55); }
}

/* Snap-in for newly-completed dots. Slight overshoot via the spring
   cubic-bezier gives the "click into place" feel the plan describes. */
@keyframes dotDoneSnap {
  0%   { transform: scale(0.6); opacity: 0.3; }
  60%  { transform: scale(1.05); opacity: 0.7; }
  100% { transform: scale(1); opacity: 0.5; }
}

/* ---------- Stage / screens ---------- */
.lite-stage { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 64px; }
.lite-screen {
  display: none;
  width: 100%;
  max-width: 640px;
  /* Item 2 — default direction is "forward" (slide up from below).
     The .coming-back modifier (set by back()) reverses to slide down
     from above. The 350ms cubic-bezier(.22, 1, .36, 1) matches the
     internal tool's spring curve. */
  animation: liteIn .35s cubic-bezier(.22, 1, .36, 1);
}
/* Results screen breaks out of the 640px question-screen width cap.
   Without this, the two-column .results-wrap was being squeezed into a
   640px parent, making both columns ~280px wide and the bottom-alignment
   trick look like it wasn't working (content was wrapping so much that
   "stretch" couldn't compensate). 1080px matches .results-wrap's max. */
.lite-screen[data-screen="results"] { max-width: 1080px; }
.lite-screen.active { display: block; }

/* Item 2 — directional slide. .coming-back flips the entrance direction
   so going BACK enters from above (slide down) instead of below. */
.lite-screen.coming-back { animation-name: liteInBack; }

/* Item 1 — staggered entrance for the contact screen ONLY. Each direct
   child fades up with a 100ms delay so the brand mark appears first,
   then headline, then sub, then form/CTA. We replace the screen-level
   animation (above) with per-child animations for this one screen, then
   re-enable the screen-level animation by suppressing the override when
   .coming-back is set (someone clicking restart should NOT replay the
   staggered entrance — just the natural slide). */
.lite-screen[data-screen="contact"].active { animation: none; }
.lite-screen[data-screen="contact"].active > * {
  animation: liteIn .4s cubic-bezier(.22, 1, .36, 1) both;
}
.lite-screen[data-screen="contact"].active > *:nth-child(1) { animation-delay: 0ms; }
.lite-screen[data-screen="contact"].active > *:nth-child(2) { animation-delay: 100ms; }
.lite-screen[data-screen="contact"].active > *:nth-child(3) { animation-delay: 200ms; }
.lite-screen[data-screen="contact"].active > *:nth-child(4) { animation-delay: 300ms; }
.lite-screen[data-screen="contact"].active > *:nth-child(5) { animation-delay: 380ms; }

@keyframes liteIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Item 2 — reverse direction for "back" navigation. Same curve, same
   duration, just enters from above instead of below. */
@keyframes liteInBack {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lite-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  margin-bottom: 12px;
}
.lite-eyebrow.accent { color: var(--accent); }

.lite-q {
  font-family: var(--sans); font-weight: 700;
  font-size: 36px; line-height: 1.15; letter-spacing: -0.6px;
  margin: 0 0 12px;
}
.lite-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 28px; }
.lite-sub strong { color: var(--text); }
.lite-warn {
  font-size: 0.85rem;
  color: var(--warn, #d97706);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ---------- Form / fields ---------- */
.lite-form { display: flex; flex-direction: column; gap: 18px; }
.lite-field {
  display: flex; flex-direction: column; gap: 6px;
  /* Item 4 — relative-position the field so the focus-fill pseudo-
     element can sit underneath the input. */
  position: relative;
}
.lite-field label {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.lite-field input[type="text"],
.lite-field input[type="email"],
.lite-field input[type="url"],
.lite-amount {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 17px;
  font-family: inherit;
  outline: none;
  /* Item 4 — slight extra transition properties so the focus state
     lifts and glows together. Includes the bottom box-shadow for the
     "lift" feel called for in the plan. */
  transition: border-color .12s ease, box-shadow .25s cubic-bezier(.22, 1, .36, 1), transform .12s ease;
}
.lite-field input:focus,
.lite-amount:focus {
  border-color: var(--accent);
  /* Replace the flat 4px halo with the subtle vertical lift the plan
     describes — soft, downward, accent-tinted. */
  box-shadow: 0 4px 12px rgba(13, 122, 255, 0.10), 0 0 0 4px rgba(13, 122, 255, 0.10);
}
/* (Removed pre-v1.24.2: a decorative focus-fill ::after bar that grew under
   the input. It was positioned at the bottom of .lite-field, but fields
   containing a .lite-hint child rendered the bar UNDER the hint, striking
   through the text. The existing border-color + box-shadow on focus
   already signal focus clearly without it.) */
.lite-hint { font-size: 12px; color: var(--muted); }
.lite-optional { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }

/* ---------- Amount chips ---------- */
.chip-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 700px) { .chip-row { grid-template-columns: repeat(2, 1fr); } }
.amount-chip {
  padding: 14px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transform-origin: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease,
              transform .15s cubic-bezier(.22, 1, .36, 1),
              box-shadow .15s ease, opacity .15s ease;
}
.amount-chip:hover { border-color: var(--accent); color: var(--accent); }
/* Item 10 — press feedback for inactive chips. Scale-down on mousedown /
   touchstart gives the "pressed in" feel before release. */
.amount-chip:not(.active):active { transform: scale(0.97); }
.amount-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  /* Item 3 — accent-tinted bloom shadow on selected state. */
  box-shadow: 0 0 0 3px rgba(13, 122, 255, 0.15);
  /* Item 3 — quick scale bloom keyframe that fires when .active is added.
     0.97 → 1.04 → 1.0 over 200ms with the project's spring curve. */
  animation: chipBloom .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes chipBloom {
  0%   { transform: scale(0.97); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
/* Item 3 — when ANY chip in the row is active, recede the others' borders
   so the selected option feels "lit" and the rest fade back. Uses :has(),
   supported in all modern evergreen browsers. */
.chip-row:has(.amount-chip.active) .amount-chip:not(.active) {
  border-color: transparent;
  opacity: 0.72;
}
.chip-row:has(.amount-chip.active) .amount-chip:not(.active):hover {
  /* Hover still works — restore border + opacity for affordance. */
  border-color: var(--accent);
  opacity: 1;
}

.lite-or {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  margin-top: 6px;
}
.lite-or::before, .lite-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.lite-amount-wrap {
  display: flex; align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .12s ease;
}
.lite-amount-prefix {
  display: flex; align-items: center; justify-content: center;
  width: 50px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-right: none;
  border-radius: 12px 0 0 12px;
}
.lite-amount {
  flex: 1;
  font-size: 22px !important;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: -0.005em;
  border-radius: 0 12px 12px 0 !important;
  border-left: none !important;
}
.lite-amount-wrap:focus-within .lite-amount-prefix {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Industry suggestion grid ----------
   One unified surface that replaces the legacy match-chip + manual grid.
   Empty input → 8 broad-bucket cards. Typing 2+ chars → ranked sub-industry
   cards from classifyIndustryMulti(). Each card carries a primary label
   (sub-industry or bucket name) plus a secondary hint line. Click commits
   the selection and lights the card. */
.industry-suggestions {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.suggestion-card {
  text-align: left;
  padding: 11px 16px;
  background: var(--panel);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: background .1s ease;
}
.suggestion-card:last-child { border-bottom: none; }
.suggestion-card:hover { background: var(--accent-soft); }
.suggestion-card:active { background: var(--accent-soft); }
.suggestion-card.active {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}
.suggestion-card .sc-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
}
.suggestion-card.active .sc-name { color: var(--accent); }
.suggestion-card .sc-code {
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.suggestion-card.active .sc-code {
  color: var(--accent);
  background: rgba(13, 122, 255, 0.10);
}
.suggestion-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 12px 16px;
  line-height: 1.5;
}
.industry-suggestions:has(.suggestion-card.active) .suggestion-card:not(.active) {
  opacity: 0.62;
}
.industry-suggestions:has(.suggestion-card.active) .suggestion-card:not(.active):hover {
  opacity: 1;
}

/* ---------- Growth grid ---------- */
.growth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.growth-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 18px 16px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .12s, background .12s, transform .12s;
}
.growth-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.growth-card.active { border-color: var(--accent); background: var(--accent-soft); }
.growth-card .g-icon {
  color: var(--muted-soft);
  margin-bottom: 4px;
  transition: color .15s ease;
}
.growth-card .g-icon-spark { width: 72px; height: 40px; display: block; }
.growth-card .g-icon-block { width: 22px; height: 22px; display: block; }
.growth-card:hover .g-icon,
.growth-card.active .g-icon { color: var(--accent); }
.growth-card .g-label { font-weight: 700; font-size: 15px; letter-spacing: -0.2px; color: var(--text); }
.growth-card .g-hint { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---------- Actions ---------- */
.lite-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 12px; }
/* Item 7 — three-phase button response.
   Default → hover (lift + bigger shadow, 150ms) → press (compress to flat,
   80ms) → release (springs back to hover or settles to default, 200ms).
   The transform/shadow transitions have distinct durations so press feels
   instant and the release feels physical, not springy. */
.lite-btn {
  padding: 14px 26px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: filter .15s ease, transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
  align-self: stretch;
  will-change: transform;
}
.lite-btn:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 122, 255, 0.25);
  transition-duration: .15s;
}
.lite-btn:active:not(:disabled) {
  /* Press: compress + flatten shadow. Snappy 80ms so it feels instant. */
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.10);
  transition-duration: .08s, .08s, .08s;
}
.lite-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lite-btn.secondary {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
.lite-btn.secondary:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lite-btn.secondary:active:not(:disabled) {
  transform: translateY(0);
  transition-duration: .08s;
}

.turnstile-mount {
  /* Turnstile renders the widget inside; min-height reserves space so the
     layout doesn't jump when the iframe loads. */
  min-height: 0;
  display: flex;
  justify-content: center;
}
.turnstile-mount:not(:empty) { min-height: 65px; }

.lite-trust {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.trust-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

.lite-link {
  background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; font-family: inherit;
  text-decoration: underline; font-size: 13px;
  margin-top: 16px;
}

/* ---------- Results ---------- */
.results-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  /* Stretch both columns to the taller column's height so the last element
     of each side can be pinned to the bottom. Bottoms then always align,
     regardless of whose content runs longer for a given lead. */
  align-items: stretch;
  max-width: 1080px;
  width: 100%;
}
/* Two-column layout holds down to ~820px viewport. Below that the columns
   would each be < 350px wide and the cards crowd the headline range —
   collapse to single-column so the spectrum + plain paragraph + cards
   stack naturally. The bottom-alignment trick only matters when the
   columns are side-by-side, so the collapse simplifies the layout cleanly. */
@media (max-width: 820px) { .results-wrap { grid-template-columns: 1fr; } }

/* Left column becomes a flex column so children can use margin-top:auto
   to bottom-align. height:100% guarantees the column fills the grid row
   even when align-items:stretch is overridden by a child or ancestor. */
.results-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.results-title {
  font-family: var(--sans); font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.6px;
  margin: 4px 0 10px;
}
.results-context { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 0 32px; }

/* Spectrum block — extra vertical breathing room so the headline range +
   conservative/standard values pull the left column down to match the
   right column's three-card stack. */
.result-spectrum { margin: 22px 0 32px; }
.result-spectrum-bar {
  position: relative;
  height: 16px;
  background: linear-gradient(to right, var(--accent-soft), rgba(13,122,255,0.38));
  border-radius: 999px;
}
.result-spectrum-fill { display: none; }
.result-spectrum-marker {
  position: absolute;
  top: -7px;
  width: 4px;
  height: 30px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(13,122,255,0.15);
  transition: left .35s ease;
  left: 100%;
}
.result-spectrum-labels {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 20px;
  gap: 16px;
}
.rs-end { display: flex; flex-direction: column; gap: 4px; }
.rs-end.right { text-align: right; align-items: flex-end; }
.rs-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.rs-end.right .rs-label { color: var(--accent); }
.rs-val { font-family: var(--sans); font-weight: 700; font-size: 32px; color: var(--text); letter-spacing: -0.01em; }
.rs-end.right .rs-val { color: var(--accent); font-size: 38px; }
.rs-sub { font-size: 13px; color: var(--muted); }

.results-plain {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: auto;
}
.rp-stats {
  display: flex;
  gap: 0;
  align-items: flex-start;
}
.rp-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-stat + .rp-stat {
  border-left: 1px solid var(--border);
  padding-left: 20px;
  margin-left: 20px;
}
.rp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.rp-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.results-right { display: flex; flex-direction: column; gap: 14px; height: 100%; }
/* Pin the last card to the bottom of the right column so its bottom edge
   lines up with the bottom of the left column. The first two cards stay at
   the natural top; the space absorbs into the gap before the last card. */
.results-right > .result-card:last-child { margin-top: auto; }
.result-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.result-card-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; margin-bottom: 12px;
}
.result-list { margin: 0; padding-left: 18px; }
.result-list li { font-size: 14px; line-height: 1.55; color: var(--text); margin-bottom: 8px; }
.result-key-metric { font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; color: var(--accent); }

/* CTA card sits BELOW .results-wrap inside the same .lite-screen, and now
   spans the full width of the results-wrap above it so the left and right
   edges line up cleanly. max-width matches .results-wrap (1080px). */
.results-cta {
  max-width: 1080px; width: 100%;
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
}
.cta-headline { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -0.4px; margin-bottom: 8px; }
.cta-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 22px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-btn { display: inline-block; text-decoration: none; padding: 14px 28px; }

/* "Start a new valuation" — slim outlined ghost button. Pairs visually
   with the primary Download button without competing for attention.
   Slate text on transparent ground; lifts to ink on hover. The refresh
   glyph reinforces the meaning without leaning on emoji. */
.cta-restart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 22px !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s cubic-bezier(.22, 1, .36, 1) !important;
}
.cta-restart:hover:not(:disabled) {
  color: var(--text) !important;
  border-color: var(--muted-soft) !important;
  background: var(--panel-2) !important;
  filter: none !important;
  transform: translateY(-1px);
}
.cta-restart:active:not(:disabled) { transform: scale(0.98); }
.cta-restart-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.cta-restart:hover .cta-restart-icon {
  transform: rotate(-90deg);
}

/* ---------- Footer ---------- */
.lite-footer {
  border-top: 1px solid var(--border);
  padding: 18px 28px;
  font-size: 11px; color: var(--muted); text-align: center;
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 700px) {
  .lite-q { font-size: 28px; }
  .lite-sub { font-size: 14px; }
  .lite-header { padding: 14px 18px; }
  .lite-header-meta { display: none; }
  .lite-stage { padding: 20px 16px 48px; }
  .results-title { font-size: 26px; }
  .rs-val { font-size: 24px; }
  .result-spectrum-labels { gap: 8px; }
  .results-plain { padding: 16px 18px; margin-top: 22px; }
  .rs-end.right .rs-val { font-size: 30px; }
  .rp-value { font-size: 17px; }
  .rp-stat + .rp-stat { padding-left: 14px; margin-left: 14px; }
  .results-context { margin: 0 0 22px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lite-screen, .suggestion-card, .result-spectrum-marker { animation: none !important; transition: none !important; }
}

/* ---------- State picker (screen: state) ----------
   Type-ahead list of US states + a "Selected" chip that confirms the choice.
   Sits inside the standard .lite-field, between the input and the actions row.
   The "Skip" affordance uses a .lite-btn.link variant — a text-only button
   that visually reads as a link but stays keyboard-accessible. */
.state-matches {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  margin-top: 4px;
}
.state-matches:empty { display: none; }
.state-matches button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.state-matches button:last-child { border-bottom: none; }
.state-matches button:hover,
.state-matches button:focus {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}
.state-matches button .state-code {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.state-matches .no-matches {
  padding: 10px 14px;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

/* (Removed: .state-selected and .state-clear — replaced by .state-chips
   multi-select pattern. See .state-chip / .state-chip-x below.) */

/* ---------- State multi-select chips ---------- */
.state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  /* Hidden attribute on the element handles visibility; no need for display:none here. */
}

.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.state-chip:hover {
  background: #e8f2ff;
  transform: translateY(-1px);
}
.state-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.state-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(13, 122, 255, 0.18);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.state-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

/* Mobile — the Skip button is now button-sized (was a text link before
   v1.24.3), so on narrow phones the action row would overflow when paired
   with Back + Continue. Allow the outer .lite-actions to wrap and let the
   skip/continue pair span full width on a second row. */
@media (max-width: 600px) {
  .lite-actions { flex-wrap: wrap; }
  .state-action-row {
    width: 100%;
    justify-content: stretch;
  }
  .state-action-row .lite-btn { flex: 1; }
  .state-action-row .lite-btn.link {
    padding: 11px 12px;
    font-size: 13px;
  }
}

/* "Skip" buttons (state screen, real-estate screen) — slim outlined
   ghost variant. Pairs visually with the primary "Continue" filled
   button at the bottom of those screens without competing for the
   accent color, and gives the secondary action a real clickable
   target instead of an underlined text link. Mirrors .cta-restart on
   the results screen for system-wide consistency. */
.lite-btn.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
  padding: 11px 18px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.1px;
  align-self: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s cubic-bezier(.22, 1, .36, 1);
}
.lite-btn.link:hover:not(:disabled) {
  filter: none;
  color: var(--text);
  border-color: var(--muted-soft);
  background: var(--panel-2);
  transform: translateY(-1px);
}
.lite-btn.link:active:not(:disabled) { transform: scale(0.98); }

/* Print-only PDF report — hidden on screen, surfaced as a clean two-page
   IB-style doc when the user clicks "Download PDF report ↓" (which fires
   window.print(), then the user selects "Save as PDF" as the destination). */
.print-only { display: none; }

/* =============================================================================
   Item 8 — Scroll-reveal initial state. Elements with .reveal-on-scroll start
   hidden + offset; JS adds .revealed via IntersectionObserver when they enter
   the viewport, animating opacity + transform back to visible over 400ms.
   Sibling cards stagger 80ms each via :nth-child transition-delay so a row
   cascades in rather than popping simultaneously. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease-out, transform .4s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}
.results-right .reveal-on-scroll:nth-child(1) { transition-delay: 0ms; }
.results-right .reveal-on-scroll:nth-child(2) { transition-delay: 80ms; }
.results-right .reveal-on-scroll:nth-child(3) { transition-delay: 160ms; }

/* =============================================================================
   Item 5 — Spectrum bar fill on first results render. The bar starts at
   scaleX(0), grows to scaleX(1) with a slight overshoot (cubic-bezier with
   y > 1) that pulls back — like a gauge needle settling. Only runs once
   when the bar gets the .filling class from JS. */
.result-spectrum-bar {
  transform-origin: left center;
}
.result-spectrum-bar.filling {
  animation: spectrumFill .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes spectrumFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Item 5 — fade-in for the range bracket labels after the count-up settles.
   Triggered by adding .reveal-after-countup; transitions over 200ms. */
.reveal-after-countup {
  opacity: 0;
  transition: opacity .25s ease-out;
}
.reveal-after-countup.revealed { opacity: 1; }

/* =============================================================================
   Item 10 — touch + cursor affordances. The default cursor:pointer is set on
   anything that should look clickable. touch-action on the spectrum bar
   ensures vertical scrolling still works while horizontal gestures could
   later be hooked up to drag interactions. */
.amount-chip,
.growth-card,
.suggestion-card,
.lite-link,
.state-chip,
.state-match,
[data-back] { cursor: pointer; }

/* Item 10 — eliminate the 300ms tap delay on mobile by telling the
   browser it doesn't need to wait for a possible double-tap-to-zoom.
   The :active scale state then fires immediately on touchstart. */
.amount-chip,
.growth-card,
.suggestion-card,
.lite-btn,
.state-chip,
.state-match { touch-action: manipulation; }

.result-spectrum-bar { touch-action: pan-x; }

@page {
  size: Letter;
  margin: 0.5in 0.55in;
}

@media print {
  html, body {
    background: #ffffff !important;
    color: #0A0A0A !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body { padding: 0 !important; margin: 0 !important; }

  /* Remove screen content from print FLOW (not just visibility) — the old
     `body * { visibility: hidden }` approach kept all 7 wizard screens
     consuming vertical space, which caused the browser to allocate
     trailing blank pages to "cover" the body's tall footprint. Switch
     to display:none for everything except the path body > main >
     .print-only so the print output is exactly the report's content. */
  body > *:not(main)          { display: none !important; }
  main > *:not(.print-only)   { display: none !important; }
  main                        { display: block !important; padding: 0 !important; }
  .print-only                 { display: block !important; }

  .pr-page { padding: 0; margin: 0; }
  .pr-page-2 {
    page-break-before: always; break-before: page;
    page-break-after: avoid;   break-after: avoid;
    overflow: hidden;
    max-height: 9.7in;
  }

  /* ----- Cover ----- */
  .pr-cover {
    /* Natural flow — no min-height / no spacer row. The at-a-glance
       block above the range fills what was empty space in v1.11.
       Gap tightened slightly to keep cover comfortably inside one
       Letter page even with multi-state cover meta. */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* At-a-glance summary on page 1: two compact info cards showing the
     user's inputs (left) and the derived figures that feed the range
     (right). Every number here ties directly to the headline below. */
  .pr-at-a-glance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
  }
  .pr-aag-section {
    background: #F8F6F3;
    border: 1px solid #E5E5E2;
    border-radius: 10px;
    padding: 14px 16px;
  }
  .pr-aag-section-title {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #E5E5E2;
  }
  .pr-aag-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 11.5px;
    padding: 4px 0;
  }
  .pr-aag-row span { color: #64748B; flex: 1; }
  .pr-aag-row strong {
    color: #0A0A0A;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .pr-aag-row strong.accent { color: #0d7aff; }
  .pr-cover-brand {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0d7aff;
  }
  .pr-mark { width: 34px; height: 34px; }
  .pr-cover-brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: #0A0A0A; }
  .pr-cover-tag {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #64748B; font-weight: 600;
  }
  .pr-cover-title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.015em;
  }
  .pr-cover-meta { font-size: 13px; color: #64748B; }

  /* Headline range */
  .pr-headline {
    background: #F8F6F3;
    border: 1.5px solid #E5E5E2;
    border-radius: 12px;
    padding: 16px 24px;
  }
  .pr-headline-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    color: #64748B; font-weight: 600;
  }
  .pr-headline-range {
    font-family: var(--sans);
    font-weight: 700; font-size: 34px;
    margin: 6px 0 12px;
    letter-spacing: -0.01em;
  }
  .pr-headline-bar {
    margin: 8px 0 16px;
  }
  .pr-headline-bar-track {
    height: 10px;
    background: #0d7aff;
    border-radius: 999px;
  }
  .pr-headline-ends {
    display: flex; justify-content: space-between;
  }
  .pr-end { display: flex; flex-direction: column; gap: 2px; }
  .pr-end-right { text-align: right; align-items: flex-end; }
  .pr-end-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: #64748B; font-weight: 600;
  }
  .pr-end-val {
    font-family: var(--sans);
    font-weight: 700; font-size: 22px;
    color: #0A0A0A;
  }
  .pr-end-sub { font-size: 10px; color: #64748B; }

  /* Plain language paragraph */
  .pr-plain {
    font-size: 12.5px; line-height: 1.55;
    background: #e8f2ff;
    border-radius: 10px;
    padding: 11px 16px;
  }

  /* Cover footer */
  .pr-cover-foot {
    border-top: 1px solid #E5E5E2;
    padding-top: 10px;
    font-size: 10px; color: #64748B;
  }

  /* ----- Page 2: details ----- */
  .pr-section { margin-bottom: 7px; }
  .pr-section + .pr-section { page-break-inside: avoid; }
  .pr-section-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    color: #64748B; font-weight: 700; margin-bottom: 5px;
    padding-bottom: 3px;
    border-bottom: 1px solid #E5E5E2;
  }
  .pr-table {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
  }
  .pr-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #E5E5E2;
  }
  .pr-table td:first-child { color: #64748B; width: 55%; }
  .pr-table td:last-child { text-align: right; font-weight: 600; }
  .pr-steps {
    margin: 0; padding-left: 18px;
    font-size: 12px;
    line-height: 1.55;
  }
  .pr-steps li { margin-bottom: 5px; }
  .pr-steps li strong { color: #0d7aff; }

  /* -----------------------------------------------------------------
     Value Bridge — IB-style horizontal waterfall.
     SVG body is generated by populateValueBridge() in app.js using the
     exact same calc result that drives the headline range. Each bar
     represents the dollar contribution of one factor:
       1) Reported profit (start, gray)
       2) Owner add-backs → SDE (add, green)
       3) Industry multiple at size bucket (add, green — usually largest)
       4) Growth-band adjustment (add green / sub red)
       5) Final standard valuation (total, blue)
     ----------------------------------------------------------------- */
  /* Bridge intro is a screen-only context paragraph. On the PDF the
     section label + the bars + the value labels carry the meaning;
     hiding it on print saves ~50px of vertical space. */
  .pr-bridge-intro { display: none !important; }

  .pr-bridge-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 1.8in;
    margin-bottom: 4px;
  }
  .pr-bridge-legend {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
    padding: 2px 0 0 0;
    font-size: 10px; color: #64748B;
  }
  .pr-bridge-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .pr-bridge-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
  }
  .pr-bridge-swatch-start { background: #94A3B8; }
  .pr-bridge-swatch-add   { background: #0d7aff; }
  .pr-bridge-swatch-sub   { background: #0A0A0A; }
  .pr-bridge-swatch-total { background: #0d7aff; }
  .pr-bridge-note {
    margin-top: 6px;
    background: #F8F6F3;
    border: 1px solid #E5E5E2;
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 10.5px; line-height: 1.45;
    color: #0A0A0A;
  }
  .pr-bridge-note strong { color: #0d7aff; }

  /* Brief cards — tightened for 2-page contract */
  .pr-brief-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 4px;
  }
  .pr-brief-card {
    background: #F8F6F3;
    border: 1px solid #E5E5E2;
    border-radius: 8px;
    padding: 5px 8px;
  }
  .pr-brief-card-title {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: #64748B; font-weight: 700; margin-bottom: 3px;
  }
  .pr-brief-card ul { margin: 0; padding-left: 13px; }
  .pr-brief-card li {
    font-size: 10.5px; line-height: 1.3; margin-bottom: 1px;
    color: #0A0A0A;
  }
  .pr-brief-metric {
    background: #e8f2ff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11px;
    color: #0A0A0A;
  }
  .pr-brief-metric strong { color: #0d7aff; }

  .pr-disclaimer {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid #E5E5E2;
    font-size: 9px; line-height: 1.4; color: #64748B;
    font-style: italic;
  }

  /* -----------------------------------------------------------------
     Value-bridge source caption — italic attribution that sits between
     the SVG and the existing .pr-bridge-note block. Plain text, no
     background, so it reads as a chart footnote, not another card. */
  .pr-bridge-source {
    font-size: 10.5px;
    line-height: 1.5;
    color: #64748B;
    font-style: italic;
    margin: 6px 0 4px 0;
  }

  /* -----------------------------------------------------------------
     Compact print tables — used for the live-data sections on page 2
     (closed-deal comps, active listings, generic data tables). All
     share the .pr-data-table base; the per-table modifiers add a
     subtle left accent stripe so the user can tell them apart at a
     glance in the printed PDF. */
  .pr-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    margin-top: 2px;
  }
  .pr-data-table th {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    font-weight: 700;
    padding: 4px 4px;
    border-bottom: 1px solid #E5E5E2;
    text-align: left;
  }
  .pr-data-table th:last-child { text-align: right; }
  .pr-data-table td {
    font-size: 10px;
    color: #0A0A0A;
    padding: 4px 4px;
    border-bottom: 1px solid #E5E5E2;
    vertical-align: middle;
  }
  .pr-data-table tbody tr:last-child td { border-bottom: none; }
  .pr-data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .pr-data-table .pr-data-src {
    color: #64748B;
    font-size: 9.5px;
    font-style: italic;
  }
  .pr-comps-table {
    border-left: 2px solid #0d7aff;
    padding-left: 4px;
  }
  .pr-listings-table {
    border-left: 2px solid #0d7aff;
    padding-left: 4px;
  }

  /* Macro-context variant of the brief metric — same pill chrome as
     .pr-brief-metric (background tint, radius, padding, accent strong),
     just nudged down so it doesn't kiss the metric line above it. */
  .pr-brief-macro {
    background: #e8f2ff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11px;
    color: #0A0A0A;
    margin-top: 5px;
  }
  .pr-brief-macro strong { color: #0d7aff; }

  /* Inline state qualifier appended to a .pr-section-label
     (e.g. "Active listings · CA only") — small, muted, mixed-case
     so it doesn't fight the all-caps section label next to it. */
  .pr-listings-state-label {
    font-size: 10px;
    color: #64748B;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }
}