/* ============================================================
     FLOW MODE — same "drafting-sheet" design system as funnel.css,
     but scoped entirely under .bx-flow-page instead of :root/body.

     WHY THIS FILE IS SEPARATE FROM funnel.css:
     Flow mode drops one shortcode ["bx_step_*"] into an otherwise
     freely-editable Elementor page, alongside whatever other content
     the client adds. That means this stylesheet must NOT:
       - touch `body` or `:root` (would affect the rest of the page)
       - force a fixed, no-scroll, 100vh app shell (the page needs to
         scroll normally so Elementor content above/below the funnel
         island is reachable, and so a step page can simply be taller
         than one screen once the client adds their own content to it)
       - reuse funnel.css's `.bx-page` class name (kept separate so
         both modes can run on the same site without collisions)
     Every rule below is either a custom-property definition on
     `.bx-flow-page` itself, or prefixed with `.bx-flow-page ` so nothing
     here can leak into the theme or other Elementor widgets on the page.
     ============================================================ */

  .bx-flow-page {
    /* ---- tokens (scoped, not on :root — see note above) ---- */
    --bg: #EAEFEE;
    --bg-grid: #C9D2CE;
    --paper: #FFFFFF;
    --paper-alt: #F5F7F5;
    --ink: #16202B;
    --ink-soft: #4E5A62;
    --ink-faint: #8A9298;
    --line: #C7CFCB;
    --line-strong: #A9B3AE;
    --blue: #2F5D8A;
    --blue-ink: #1F4368;
    --blue-soft: #E4ECF3;
    --rust: #C4571F;
    --rust-ink: #9C441A;
    --rust-soft: #F7E5D7;
    --green: #3F7A54;
    --green-soft: #E1EEE3;
    --danger: #AA3B2C;
    --danger-soft: #F8E2DE;
    --shadow: 0 1px 2px rgba(22,32,43,.04), 0 8px 24px -12px rgba(22,32,43,.18);
    --radius: 3px;
  }

  /* Respects a site-level dark-mode toggle if the theme sets
     [data-theme] on <html> — same convention funnel.css uses — while
     still keeping the actual values scoped to .bx-flow-page. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bx-flow-page {
      --bg: #10151B;
      --bg-grid: #1C232B;
      --paper: #171E25;
      --paper-alt: #1D252C;
      --ink: #E9EDEE;
      --ink-soft: #AAB4BC;
      --ink-faint: #6E7981;
      --line: #2A333B;
      --line-strong: #3B454E;
      --blue: #7CACD8;
      --blue-ink: #BEDAF0;
      --blue-soft: #1E2C39;
      --rust: #E07E42;
      --rust-ink: #F3AA79;
      --rust-soft: #3A2718;
      --green: #74BE8B;
      --green-soft: #1D2E22;
      --danger: #E08476;
      --danger-soft: #3A211D;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"] .bx-flow-page {
    --bg: #10151B;
    --bg-grid: #1C232B;
    --paper: #171E25;
    --paper-alt: #1D252C;
    --ink: #E9EDEE;
    --ink-soft: #AAB4BC;
    --ink-faint: #6E7981;
    --line: #2A333B;
    --line-strong: #3B454E;
    --blue: #7CACD8;
    --blue-ink: #BEDAF0;
    --blue-soft: #1E2C39;
    --rust: #E07E42;
    --rust-ink: #F3AA79;
    --rust-soft: #3A2718;
    --green: #74BE8B;
    --green-soft: #1D2E22;
    --danger: #E08476;
    --danger-soft: #3A211D;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.55);
  }

  .bx-flow-page, .bx-flow-page *, .bx-flow-page *::before, .bx-flow-page *::after { box-sizing: border-box; }

  /* ---- the island itself — a normal, flow-positioned block, NOT a
     fixed no-scroll app shell. Sits wherever the shortcode was dropped
     on the page and grows tall as its content (or the client's own
     Elementor content around it) requires. ---- */
  .bx-flow-page {
    position: relative;
    isolation: isolate;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 20px 40px;
    background: var(--bg);
    color: var(--ink);
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .bx-flow-page h1, .bx-flow-page h2, .bx-flow-page h3 { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .01em; text-wrap: balance; margin: 0; }
  .bx-flow-page .mono { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; }
  .bx-flow-page a { color: inherit; }
  .bx-flow-page button { font-family: inherit; }
  .bx-flow-page ::selection { background: var(--blue-soft); }
  .bx-flow-page :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    .bx-flow-page *, .bx-flow-page *::before, .bx-flow-page *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

  /* faint drafting grid, clipped to the island (not the viewport) */
  .bx-flow-page .grid-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(0deg, var(--bg-grid) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(90deg, var(--bg-grid) 0 1px, transparent 1px 32px);
    opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 85%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 85%);
  }

  .bx-flow-page .topbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 28px; }
  .bx-flow-page .brand { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .06em; }
  .bx-flow-page .brand span { color: var(--rust); }
  .bx-flow-page .reset-link {
    background: none; border: none; cursor: pointer;
    color: var(--ink-faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: underline; text-underline-offset: 3px; padding: 4px;
  }
  .bx-flow-page .reset-link:hover { color: var(--ink-soft); }

  /* ============ stage card (the "drafting sheet") ============
     No `overflow-y:auto` / `flex:1` lock here — the card is free to
     grow to whatever height its content needs, and the page around it
     scrolls normally like any other Elementor page. */
  .bx-flow-page .stage {
    position: relative;
    z-index: 1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px clamp(20px, 5vw, 56px) 44px;
    display: flex;
    flex-direction: column;
  }
  .bx-flow-page .stage::before, .bx-flow-page .stage::after,
  .bx-flow-page .stage .corner-br, .bx-flow-page .stage .corner-bl {
    content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  }
  .bx-flow-page .stage::before { top: -1px; left: -1px; border-top: 2px solid var(--blue); border-left: 2px solid var(--blue); }
  .bx-flow-page .stage::after { top: -1px; right: -1px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); }
  .bx-flow-page .corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); }
  .bx-flow-page .corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--blue); border-right: 2px solid var(--blue); }

  .bx-flow-page .back-btn {
    align-self: flex-start; background: none; border: none; cursor: pointer; color: var(--ink-soft);
    font-size: 13px; letter-spacing: .04em; margin-bottom: 18px; padding: 4px 0; display: flex; align-items: center; gap: 4px;
  }
  .bx-flow-page .back-btn[hidden] { display: none; }
  .bx-flow-page .back-btn:hover { color: var(--blue); }

  /* ============ ruler progress ============ */
  .bx-flow-page .ruler { margin-bottom: 30px; }
  .bx-flow-page .ruler[hidden] { display: none; }
  .bx-flow-page .ruler-track { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
  .bx-flow-page .ruler-fill { position: absolute; inset: 0; width: 0%; background: var(--blue); border-radius: 2px; transition: width .4s ease; }
  .bx-flow-page .ruler-ticks { display: flex; justify-content: space-between; margin-top: -1px; }
  .bx-flow-page .ruler-ticks span { width: 2px; height: 7px; background: var(--line-strong); display: block; }
  .bx-flow-page .ruler-row { display: flex; justify-content: space-between; align-items: center; }
  .bx-flow-page .ruler-label { font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); white-space: nowrap; margin-left: 14px; }

  /* ============ the single step section on this page ============
     Only one .screen exists per Flow-mode page (unlike the single-page
     mode, which keeps every screen in the DOM and toggles them), so it
     is simply always laid out — no display:none/--active toggle needed. */
  .bx-flow-page .screen { display: flex; flex-direction: column; flex: 1; animation: bx-flow-rise .35s ease both; }
  @keyframes bx-flow-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  .bx-flow-page .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); margin-bottom: 10px; }
  .bx-flow-page .room-progress { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: -4px 0 12px; min-height: 14px; }
  .bx-flow-page .h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.05; margin-bottom: 14px; }
  .bx-flow-page .h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.1; margin-bottom: 8px; }
  .bx-flow-page .lede { color: var(--ink-soft); font-size: 16px; line-height: 1.55; max-width: 46ch; margin-bottom: 26px; }
  .bx-flow-page .sub { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin-bottom: 22px; max-width: 50ch; }

  /* ---- landing ---- */
  .bx-flow-page .stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
  .bx-flow-page .stat-chip { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); }
  .bx-flow-page .landing-spacer { flex: 1; }
  .bx-flow-page .fine-print { font-size: 12px; color: var(--ink-faint); margin-top: 10px; }

  /* ---- buttons ---- */
  .bx-flow-page .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
    font-size: 15px; font-weight: 600; padding: 14px 26px; transition: transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .bx-flow-page .btn:active { transform: translateY(1px); }
  .bx-flow-page .btn-primary { background: var(--rust); color: #FFF7F2; }
  .bx-flow-page .btn-primary:hover { background: var(--rust-ink); }
  .bx-flow-page .btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
  .bx-flow-page .btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
  .bx-flow-page .btn-block { width: 100%; }
  .bx-flow-page .btn[disabled] { opacity: .45; cursor: not-allowed; }

  /* ---- option cards (single big choice: project type / scope) ---- */
  .bx-flow-page .option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (max-width: 520px) { .bx-flow-page .option-grid { grid-template-columns: 1fr; } }
  .bx-flow-page .option-card {
    text-align: left; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; position: relative;
    transition: border-color .15s ease, background .15s ease;
  }
  .bx-flow-page .option-card:hover { border-color: var(--blue); }
  .bx-flow-page .option-card[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
  .bx-flow-page .option-card svg { flex: none; width: 34px; height: 34px; color: var(--blue); margin-top: 2px; }
  .bx-flow-page .option-card.piece-card svg { width: 30px; height: 30px; }
  .bx-flow-page .option-card .ot { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; display: block; }
  .bx-flow-page .option-card .od { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; display: block; }

  /* toggle (multi-select) variant of option-card, used for piece/room pickers */
  .bx-flow-page .option-card.toggle { padding-right: 46px; }
  .bx-flow-page .option-card.toggle .check {
    position: absolute; top: 16px; right: 16px; width: 18px; height: 18px;
    border: 1.5px solid var(--line-strong); border-radius: 4px; flex: none; background: var(--paper);
  }
  .bx-flow-page .option-card.toggle[aria-pressed="true"] .check { background: var(--blue); border-color: var(--blue); }
  .bx-flow-page .option-card.toggle[aria-pressed="true"] .check::after {
    content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg);
  }

  /* "Add More Cabinets" — rooms already in the quote */
  .bx-flow-page .option-card.already-in-quote { border-color: var(--green); background: var(--green-soft); }
  .bx-flow-page .option-card.already-in-quote .check { background: var(--green); border-color: var(--green); }
  .bx-flow-page .option-card.already-in-quote .check::after {
    content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg);
  }
  .bx-flow-page .option-card.already-in-quote[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
  .bx-flow-page .option-card.already-in-quote[aria-pressed="true"] .check { background: var(--blue); border-color: var(--blue); }
  .bx-flow-page .already-badge {
    display: inline-block; font-size: 9.5px; letter-spacing: .06em; color: var(--green);
    background: var(--green-soft); border: 1px solid var(--green); border-radius: 999px;
    padding: 2px 8px; margin-top: 5px; font-family: "IBM Plex Mono", monospace;
  }

  /* ---- chip choices (timeline / budget / areas) ---- */
  .bx-flow-page .chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
  .bx-flow-page .chip-card {
    background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 18px; cursor: pointer; text-align: left; min-width: 150px; flex: 1 1 150px;
    transition: border-color .15s ease, background .15s ease;
  }
  .bx-flow-page .chip-card:hover { border-color: var(--blue); }
  .bx-flow-page .chip-card[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
  .bx-flow-page .chip-card .ct { font-weight: 600; font-size: 14.5px; }
  .bx-flow-page .chip-card .cd { font-size: 12px; color: var(--ink-soft); margin-top: 2px; font-family: "IBM Plex Mono", monospace; }

  .bx-flow-page .step-actions { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; }
  .bx-flow-page .skip-link {
    display: inline-block; margin-top: 16px; background: none; border: none; cursor: pointer;
    color: var(--ink-faint); font-size: 12.5px; letter-spacing: .02em; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0;
    align-self: center;
  }
  .bx-flow-page .skip-link:hover { color: var(--blue); }

  /* ---- piece measurement cards (details step) ---- */
  .bx-flow-page .detail-list { display: flex; flex-direction: column; gap: 14px; }
  .bx-flow-page .detail-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-alt); padding: 16px; }
  .bx-flow-page .detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
  .bx-flow-page .detail-head .dt { font-weight: 600; font-size: 14.5px; }
  .bx-flow-page .detail-head .dd { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faint); text-transform: uppercase; }
  .bx-flow-page .detail-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
  .bx-flow-page .field-inline { flex: 1 1 170px; min-width: 150px; }
  .bx-flow-page .field-inline label { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
  .bx-flow-page .field-inline input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); font-size: 14px; font-family: "IBM Plex Mono", monospace;
  }
  .bx-flow-page .field-inline input:focus { border-color: var(--blue); }
  .bx-flow-page .field-inline input.invalid { border-color: var(--danger); }
  .bx-flow-page .mm-hint { font-size: 11px; color: var(--ink-faint); margin-top: 5px; min-height: 14px; }
  .bx-flow-page .variant-row { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 200px; padding-top: 22px; }
  .bx-flow-page .variant-chip {
    border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 13px;
    font-size: 12px; cursor: pointer; color: var(--ink-soft);
  }
  .bx-flow-page .variant-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--ink); }
  .bx-flow-page .variant-chip { display: inline-flex; align-items: center; }
  .bx-flow-page .variant-static { font-size: 12.5px; color: var(--ink-soft); padding-top: 24px; display: flex; align-items: center; }
  .bx-flow-page .ref-flag { font-size: 9.5px; letter-spacing: .04em; color: var(--green); margin-left: 5px; }

  /* material swatches */
  .bx-flow-page .swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; display: inline-block; margin-right: 7px; border: 1px solid var(--line-strong); }
  .bx-flow-page .sw-laminate { background: linear-gradient(135deg, #C79A6B, #A97C4F); }
  .bx-flow-page .sw-stone { background: linear-gradient(135deg, #EDEDE9, #CFCFC9); background-image: radial-gradient(circle at 30% 30%, #F5F5F1 0 1.5px, transparent 1.5px), radial-gradient(circle at 70% 60%, #DCDCD7 0 1.5px, transparent 1.5px), linear-gradient(135deg, #EDEDE9, #CFCFC9); background-size: 6px 6px, 6px 6px, cover; }
  .bx-flow-page .sw-led { background: radial-gradient(circle at 50% 35%, #FFE9AE, #C9922E 75%); }
  .bx-flow-page .sw-drawer { background: repeating-linear-gradient(0deg, #82633f 0 2px, transparent 2px 6px), #D9CBB5; }
  .bx-flow-page .sw-curve { border-radius: 3px 10px 3px 3px; background: linear-gradient(135deg, #BFD0DB, #7C9AAF); }
  .bx-flow-page .sw-fluted { background: repeating-linear-gradient(90deg, #8B9AA5 0 2px, #C3CDD3 2px 4px); }
  .bx-flow-page .sw-shelf { background: repeating-linear-gradient(0deg, #A9B3AE 0 2px, transparent 2px 5px), #E4E4E0; }
  .bx-flow-page .sw-groove { background: repeating-linear-gradient(90deg, #9AA6AC 0 1.5px, #D3D9DB 1.5px 5px); }

  /* file inputs (floor plan / reference design) */
  .bx-flow-page .file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .bx-flow-page .file-btn {
    display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--line-strong);
    border-radius: var(--radius); background: var(--paper-alt); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink);
  }
  .bx-flow-page .file-btn:hover { border-color: var(--blue); color: var(--blue); }
  .bx-flow-page .file-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .bx-flow-page .file-name { font-size: 11.5px; color: var(--ink-faint); }

  /* ---- results ---- */
  .bx-flow-page .estimate-card {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-alt);
    padding: 26px 22px; text-align: center; margin-bottom: 24px; position: relative; overflow: hidden;
  }
  .bx-flow-page .estimate-figure { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: clamp(24px, 5vw, 32px); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .bx-flow-page .estimate-figure.blurred { filter: blur(7px); user-select: none; }
  .bx-flow-page .estimate-caption { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
  .bx-flow-page .lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .bx-flow-page .lock-overlay svg { width: 22px; height: 22px; color: var(--rust); }
  .bx-flow-page .lock-overlay span { font-size: 12px; color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; }

  .bx-flow-page .field { margin-bottom: 14px; }
  .bx-flow-page .field label { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
  .bx-flow-page .field input {
    width: 100%; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); font-size: 15px; font-family: inherit;
  }
  .bx-flow-page .field input:focus { border-color: var(--blue); }
  .bx-flow-page .field .err { display: none; color: var(--danger); font-size: 12px; margin-top: 5px; }
  .bx-flow-page .field.invalid input { border-color: var(--danger); }
  .bx-flow-page .field.invalid .err { display: block; }
  .bx-flow-page .form-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }

  /* ---- unlocked ---- */
  .bx-flow-page .figure-big { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: clamp(30px, 6vw, 40px); font-variant-numeric: tabular-nums; color: var(--blue-ink); margin-bottom: 6px; }
  .bx-flow-page .recap-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .bx-flow-page .recap-chip { border: 1px dashed var(--line-strong); border-radius: 999px; padding: 5px 12px; font-size: 11.5px; color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; }
  .bx-flow-page .budget-flag {
    border: 1px solid var(--rust); background: var(--rust-soft); border-radius: var(--radius);
    padding: 12px 14px; font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-bottom: 22px;
  }
  .bx-flow-page .budget-flag[hidden] { display: none; }
  .bx-flow-page .next-steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
  .bx-flow-page .next-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
  .bx-flow-page .next-steps li::before {
    counter-increment: step; content: counter(step);
    flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--blue);
    color: var(--blue); font-family: "IBM Plex Mono", monospace; font-size: 11px; display: flex; align-items: center; justify-content: center;
  }
  .bx-flow-page .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .bx-flow-page .add-more-block { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line-strong); }
  .bx-flow-page .add-more-q { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 10px; }
  .bx-flow-page .site-visit-confirm { font-size: 12px; color: var(--green); margin-top: 10px; }
  .bx-flow-page .site-visit-confirm[hidden] { display: none; }

  /* ---- itemized docket (results screen) ---- */
  .bx-flow-page .docket { margin: 4px 0 28px; border-top: 1px solid var(--line); }
  .bx-flow-page .docket-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .bx-flow-page .di-name { font-weight: 600; font-size: 14px; color: var(--ink); }
  .bx-flow-page .di-spec { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
  .bx-flow-page .di-side { flex: none; text-align: right; }
  .bx-flow-page .di-price { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--ink); }
  .bx-flow-page .link-btn { background: none; border: none; padding: 0; margin-top: 4px; font-family: inherit; font-size: 11.5px; color: var(--blue); text-decoration: underline; cursor: pointer; }
  .bx-flow-page .link-btn:hover { color: var(--blue-ink); }
  .bx-flow-page .docket-empty { padding: 16px 2px; color: var(--ink-faint); font-size: 13px; }
  .bx-flow-page .contact-recap {
    font-size: 12px; color: var(--ink-soft); margin-bottom: 20px; padding: 11px 13px;
    background: var(--paper-alt); border-radius: var(--radius); border: 1px solid var(--line);
  }
  .bx-flow-page .contact-recap strong { color: var(--ink); }

  /* ---- sticky running-estimate bar (pieces / measurements / areas steps)
     Still fixed to the viewport bottom (that's the point of a "sticky"
     bar), but the compensating padding lands on .bx-flow-page itself —
     never on body — so it can't shove other Elementor content around. */
  .bx-flow-page .quote-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--paper); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 20px rgba(16,21,27,.08); padding: 12px 20px;
  }
  .bx-flow-page .quote-bar[hidden] { display: none; }
  .bx-flow-page .quote-bar-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .bx-flow-page .quote-bar-label { font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); }
  .bx-flow-page .quote-bar-count { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .bx-flow-page .quote-bar-figure { font-size: 17px; font-weight: 600; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
  body.has-quotebar .bx-flow-page { padding-bottom: 92px; }

  /* ---- modal (quick callback / exit intent) — lives inside
     .bx-flow-page in the markup, so it inherits the tokens above and
     needs no separate scoping. Still fixed to the viewport so it
     centers over the whole screen, not just the island. ---- */
  .bx-flow-page .modal-overlay {
    position: fixed; inset: 0; background: rgba(16,21,27,.5); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
  }
  .bx-flow-page .modal-overlay[hidden] { display: none; }
  .bx-flow-page .modal {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    max-width: 400px; width: 100%; padding: 28px 26px; position: relative;
    animation: bx-flow-rise .3s ease both;
  }
  .bx-flow-page .modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 4px; }
  .bx-flow-page .modal-close:hover { color: var(--ink); }
  .bx-flow-page .modal .confirm { display: none; }
  .bx-flow-page .modal.is-confirmed .confirm { display: block; }
  .bx-flow-page .modal.is-confirmed .ask { display: none; }
  .bx-flow-page .resume-link { display: block; text-align: center; margin-top: 14px; background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
  .bx-flow-page .resume-link:hover { color: var(--blue); }

  /* ---- footer notes ---- */
  .bx-flow-page .notes { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
  .bx-flow-page .note-block {
    border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper-alt); padding: 4px 18px;
  }
  .bx-flow-page .note-block summary {
    cursor: pointer; padding: 14px 0; font-size: 13px; font-weight: 600; letter-spacing: .01em;
    list-style: none; display: flex; align-items: center; justify-content: space-between;
  }
  .bx-flow-page .note-block summary::-webkit-details-marker { display: none; }
  .bx-flow-page .note-block summary::after { content: "+"; font-family: "IBM Plex Mono", monospace; color: var(--ink-faint); font-size: 16px; }
  .bx-flow-page .note-block[open] summary::after { content: "–"; }
  .bx-flow-page .note-body { padding-bottom: 18px; font-size: 13px; color: var(--ink-soft); line-height: 1.65; }
  .bx-flow-page .note-body p { margin: 0 0 12px; }
  .bx-flow-page .tier-legend { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
  .bx-flow-page .tier-legend div { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; }
  .bx-flow-page .tier-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; }
  .bx-flow-page .dot-hot { background: var(--rust); }
  .bx-flow-page .dot-warm { background: var(--blue); }
  .bx-flow-page .dot-none { background: var(--ink-faint); }
  .bx-flow-page code.inline { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
  .bx-flow-page .rate-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
  .bx-flow-page .rate-table th, .bx-flow-page .rate-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .bx-flow-page .rate-table th { color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
  .bx-flow-page .rate-table-wrap { overflow-x: auto; }

  /* Shorter viewports / mobile — trim the stage's own padding a touch;
     no viewport-height tricks needed since the page scrolls normally. */
  @media (max-width: 480px) {
    .bx-flow-page { padding: 14px 14px 32px; }
    .bx-flow-page .topbar { padding: 4px 2px 20px; }
    .bx-flow-page .stage { padding-top: 28px; padding-bottom: 32px; }
  }