/* ONE easing curve for the whole flow (DESIGN.md §7 reveal curve).
     Stage transitions ~350ms · question transitions ~280ms · box draws 500ms. */
  :root { color-scheme: light; --card: var(--surface-1);
    --ease: cubic-bezier(.22,.61,.36,1);
    --t-stage: 350ms; --t-q: 280ms; --t-box: 500ms;
    --ph: rgba(10,10,10,.3); --ghost-soft: rgba(10,10,10,.04);
    /* scan-frame box language (ambient tier of DESIGN.md §5, page-local) */
    --scanbox-draw: rgba(10,10,10,.5);      /* while drawing */
    --scanbox-rest: rgba(10,10,10,.32);     /* settled, the 0.32 tier */
    --scanbox-label: rgba(10,10,10,.42);
    --frame-grid: rgba(10,10,10,.05);
    --ok-bg: rgba(40,140,80,.12); --ok-ink: rgba(30,122,68,1);
  }
  * { box-sizing: border-box; }
  html { background: var(--bg); }
  /* body stays transparent: html carries --bg, so the ambient.js z:-1 box
     layer can paint between the canvas and the cards */
  body { margin: 0; min-height: 100vh; background: transparent; color: var(--text); -webkit-font-smoothing: antialiased;
    font-family: var(--font-body); display: flex; flex-direction: column; }
  h1, h2 { font-family: var(--font-display); font-weight: var(--wt-display); letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
  h3 { font-family: var(--font-display); font-weight: var(--wt-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
  a { color: var(--ink); text-decoration: none; } a:hover { color: var(--accent); }
  p { margin: 0; text-wrap: pretty; }
  input::placeholder { color: var(--ph); }
  a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .bar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
    border-bottom: 1px solid var(--line); flex-shrink: 0; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand img { width: 26px; height: 28px; object-fit: contain; }
  .brand span { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: -0.01em; color: var(--display-ink); }
  .note { font-size: 13px; color: var(--ink-60); }

  main { flex: 1; padding: 20px 24px; display: flex; justify-content: center; }
  .wrap { width: 100%; max-width: 1120px; display: flex; flex-direction: column; gap: 24px; }
  .tag { align-self: flex-start; padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 600;
    letter-spacing: .06em; font-family: var(--font-mono);
    background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent); }
  .card { background: rgba(20, 20, 46, .58); backdrop-filter: blur(7px) saturate(1.06); -webkit-backdrop-filter: blur(7px) saturate(1.06); border: 1px solid rgba(242,240,234,.09); border-radius: 20px; padding: 26px;
    display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .card.hot { box-shadow: inset 0 0 0 1px var(--accent-line); }
  .label { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--ink-60); font-family: var(--font-mono); }
  .muted { font-size: 14px; line-height: 22px; color: var(--ink-60); }
  .small { font-size: 13px; line-height: 19px; color: var(--ink-60); }
  .mono { font-family: var(--font-mono); }
  .num { font-variant-numeric: tabular-nums; }

  input[type=url], input[type=email], input[type=text] { flex: 1; min-width: 0; height: 52px; padding: 0 18px;
    border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink); font: inherit; font-size: 15px; }
  input:focus { outline: none; border-color: var(--accent); }
  button { height: 52px; padding: 0 26px; border-radius: 12px; border: 1px solid var(--accent);
    background: var(--accent); color: var(--on-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background-color 150ms var(--ease), opacity 150ms var(--ease), transform 150ms var(--ease), scale 150ms var(--ease); }
  button:hover { background: var(--accent-hover); scale: 1.015; }
  button:active { transform: scale(0.98); transition-duration: 80ms; }
  button.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
  button.ghost:hover { background: var(--ghost-soft); }
  button[disabled] { opacity: .45; cursor: not-allowed; }
  button[disabled]:hover { scale: 1; background: var(--accent); }
  button.ghost[disabled]:hover { background: transparent; }
  .row { display: flex; gap: 12px; flex-wrap: wrap; }
  @media (max-width: 560px) { .row > input, .row > button { flex: 1 1 100%; } }

  /* ---- stage controller: one coordinated exit + enter, no hard cuts ---- */
  .stage-sec { display: none; }
  .stage-sec.cur { display: flex; flex-direction: column; gap: 24px; }
  .stage-sec.entering { animation: st-in var(--t-stage) var(--ease) both; }
  .stage-sec.leaving { animation: st-out var(--t-stage) var(--ease) both; }
  @keyframes st-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes st-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
  .in { opacity: 0; transform: translateY(8px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
  .in.on { opacity: 1; transform: none; }

  /* ---- stage 1: consent gate ---- */
  .consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface-2); }
  .consent input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
  .consent label { font-size: 14px; line-height: 21px; color: var(--ink); cursor: pointer; }
  .consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .explainer { border-left: 2px solid var(--accent-line); padding: 4px 0 4px 14px; display: none; }
  .explainer.open { display: block; }
  .explainer ul { margin: 6px 0 0; padding-left: 16px; }
  .explainer li { font-size: 13px; line-height: 20px; color: var(--ink-60); margin-top: 4px; }

  /* ---- stage 2: questions (left) + live scan (right), in parallel ---- */
  .scanhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .duo-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  @media (max-width: 880px) {
    /* stacked: the scan show first, the questions under it */
    .duo { grid-template-columns: 1fr; }
    .duo-right { order: -1; }
  }
  .scanframe { position: relative; width: 100%; border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; background: var(--surface-1);
    /* reserve 16:10 so the frame never jumps when the shot lands */
    aspect-ratio: 16 / 10; }
  .scanframe .grid-bg { position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, var(--frame-grid) 0 1px, transparent 1px 24px),
                repeating-linear-gradient(90deg, var(--frame-grid) 0 1px, transparent 1px 24px); }
  /* the shot: served at native captured pixels (1440w) into a ≤720px CSS box,
     always ≥2× real pixels, never upscaled. No resting transform: nothing may
     force a resample of the capture. */
  .scanframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
    image-rendering: auto; opacity: 0; filter: blur(18px); transform: scale(0.96);
    transition: opacity 400ms var(--ease), filter 600ms var(--ease), transform 600ms var(--ease); }
  .scanframe img.dim { opacity: .55; }          /* heavy-blur arrival state */
  .scanframe img.rest { opacity: 1; filter: blur(2px); transform: none; }  /* light blur while boxes settle */
  .scanframe img.clear { opacity: 1; filter: none; transform: none; }
  .scanframe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .scanframe svg rect { fill: none; stroke: var(--scanbox-draw); stroke-width: 1.4;
    stroke-dasharray: 100; stroke-dashoffset: 100; vector-effect: non-scaling-stroke; }
  .scanframe svg rect.draw { transition: stroke-dashoffset var(--t-box) var(--ease); stroke-dashoffset: 0; }
  .scanframe svg rect.rest { stroke: var(--scanbox-rest); transition: stroke 600ms var(--ease); }
  .boxlabel { position: absolute; font: 400 10px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--scanbox-label);
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 200ms var(--ease);
    transform: translateY(-14px); }
  .boxlabel.on { opacity: 1; }
  .statusline { text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--accent); min-height: 20px; }
  .statusline.live::after { content: "…"; animation: pulse 1.2s infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
  .scanfail { text-align: center; font-size: 14px; color: var(--ink-60); display: none; }
  .scanfail.on { display: block; }

  /* ---- stage 3 + 6: the one-at-a-time sequence controller ---- */
  .seq-progress { display: flex; align-items: center; gap: 14px; }
  .seq-progress .pos { font-family: var(--font-mono); font-size: 12px; color: var(--ink-60); letter-spacing: .06em; }
  .seq-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
  .seq-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t-q) var(--ease); }
  .seq-viewport { position: relative; overflow: hidden; transition: height var(--t-q) var(--ease); }
  .seq-item { position: absolute; inset: 0 auto auto 0; width: 100%; }
  .seq-item.enter { animation: q-in var(--t-q) var(--ease) both; }
  .seq-item.exit  { animation: q-out var(--t-q) var(--ease) both; }
  .seq-item.enter.back { animation-name: q-in-back; }
  .seq-item.exit.back  { animation-name: q-out-back; }
  @keyframes q-in       { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes q-out      { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-28px); } }
  @keyframes q-in-back  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
  @keyframes q-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px); } }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  /* the band questions: a two-column grid of large tappable options */
  .optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .optgrid button { height: 52px; width: 100%; text-align: left; padding: 0 18px;
    font-variant-numeric: tabular-nums; }
  @media (max-width: 420px) { .optgrid { grid-template-columns: 1fr; } }
  .chips button { height: 44px; padding: 0 16px; font-size: 14px; font-weight: 500; background: var(--surface-1);
    border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink-60); }
  .chips button:hover { border-color: var(--ink-35); color: var(--ink); background: var(--surface-1); scale: 1; }
  .chips button.sel { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
  .seq-nav { display: flex; justify-content: flex-start; }
  .backbtn { height: 40px; padding: 0 16px; font-size: 13px; font-weight: 500; background: transparent;
    border: 1px solid var(--line-strong); color: var(--ink-60); border-radius: 10px; }
  .backbtn:hover { background: var(--ghost-soft); color: var(--ink); scale: 1; }

  /* ---- stage 4: before / after ---- */
  .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .ba-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .ba-title { display: flex; align-items: center; gap: 10px; }
  .ba-frame { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    background: var(--surface-1); aspect-ratio: 16 / 10; }
  .ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; image-rendering: auto; }
  .ba-frame img.blurred { filter: blur(14px); transform: scale(1.04); /* scale hides blur edge-bleed, image stays ≥2× container pixels */
    transition: filter 700ms var(--ease), transform 700ms var(--ease); }
  .ba-frame img.blurred.revealed { filter: none; transform: none; }
  .ba-frame .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(0deg, var(--frame-grid) 0 1px, transparent 1px 24px),
                repeating-linear-gradient(90deg, var(--frame-grid) 0 1px, transparent 1px 24px); }
  .ba-frame .placeholder span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-35); }
  .chgchip { position: absolute; font: 500 11px/1 var(--font-body); color: var(--ink); background: var(--surface-1);
    border: 1px solid var(--accent-line); border-radius: 8px; padding: 5px 9px; box-shadow: 0 1px 4px var(--ghost-soft); }
  .ba-toggle { display: none; }
  @media (max-width: 880px) {
    .ba-grid { grid-template-columns: 1fr; }
    .ba-grid .ba-pane.off { display: none; }
    .ba-toggle { display: flex; gap: 8px; }
    .ba-toggle button { flex: 1; height: 40px; font-size: 13px; background: var(--surface-1);
      border: 1px solid var(--line-strong); color: var(--ink-60); border-radius: 10px; }
    .ba-toggle button.sel { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
  }

  /* the breakdown: one plain-language card per test, grouped by area */
  .sug-summary { font-size: 15px; line-height: 23px; color: var(--ink); }
  .sug-group { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--ink-60); font-family: var(--font-mono);
    text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
  .sug { display: flex; gap: 12px; align-items: flex-start; padding-top: 10px; }
  .sug input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
  .sug .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .sug .what { font-size: 14px; line-height: 21px; color: var(--ink); font-weight: 500; }
  .sug .now { font-size: 13px; line-height: 19px; color: var(--ink-60); }
  .liftr { font-size: 12px; color: var(--ink-60); font-family: var(--font-mono); }
  .srcline { font-size: 12px; color: var(--ink-35); }
  .disclaim { font-size: 12px; line-height: 18px; color: var(--ink-60); border-top: 1px solid var(--line); padding-top: 12px; }

  /* ---- stage 6: install steps ---- */
  .stepcard h3 { font-size: 22px; }
  .stepdo { display: flex; flex-direction: column; gap: 12px; }
  .carrylist { display: flex; flex-direction: column; gap: 8px; }
  .carrylist .ci { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 20px; }
  .carrylist .ci::before { content: "→"; color: var(--accent); font-family: var(--font-mono); }
  .okbadge { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
    background: var(--ok-bg); color: var(--ok-ink); }
  .win { text-align: center; padding: 40px 26px; }
  .win h2 { font-size: 38px; line-height: 1.1; }
  .livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
    margin-right: 8px; animation: pulse 1.6s infinite; }
  /* 2026-08-14 install rework: styled empty slot for the 10-second demo clip
     (placeholder only; the real asset lands later, data-todo="demo-clip") */
  .democlip { aspect-ratio: 16 / 9; max-width: 420px; border: 1px dashed var(--line-strong); border-radius: 12px;
    background: var(--ghost-soft); display: flex; align-items: center; justify-content: center; }
  .democlip span { font: 400 12px/1 var(--font-mono); color: var(--ink-35); letter-spacing: .04em; text-transform: uppercase; }

  /* ---- stage 5.5: choose your path (two options, EQUAL visual weight) ---- */
  .pathgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
  .pathgrid .card { display: flex; flex-direction: column; gap: 12px; }
  .pathgrid .card p { flex: 1; }
  .callink { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px;
    border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-1); color: var(--ink);
    font-weight: 600; font-size: 14px; text-decoration: none; }
  @media (max-width: 880px) { .pathgrid { grid-template-columns: 1fr; } }

  /* ---- stage 7: booking ---- */
  .days { display: flex; gap: 8px; flex-wrap: wrap; }
  .daybtn { flex: 1; min-width: 76px; height: 56px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; border-radius: 12px; cursor: pointer; border: 1px solid var(--line-strong);
    background: var(--surface-1); color: var(--ink); font: inherit; transition: border-color .2s var(--ease), background .2s var(--ease); }
  .daybtn .dow { font-size: 11px; color: var(--ink-60); }
  .daybtn .date { font-size: 15px; font-weight: 600; }
  .daybtn.sel { border-color: var(--accent); background: var(--accent-tint); }
  .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .slotbtn { height: 38px; border-radius: 56px; font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink-60); transition: all .2s var(--ease); }
  .slotbtn.sel { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

  /* ---- the availability-aware booking card + the live call (2026-08-30) ---- */
  .bookopts { display: flex; flex-direction: column; gap: 10px; }
  .bookopt { display: flex; align-items: center; gap: 14px; width: 100%; height: auto; min-height: 64px;
    padding: 12px 18px; text-align: left; background: var(--surface-1); border: 1px solid var(--line-strong);
    color: var(--ink); border-radius: 14px; }
  .bookopt:hover { border-color: var(--accent); background: var(--accent-tint); scale: 1; }
  .bookopt .bo-body { display: flex; flex-direction: column; gap: 2px; }
  .bookopt .bo-title { font-size: 15.5px; font-weight: 600; }
  .bookopt .bo-sub { font-size: 12.5px; color: var(--ink-60); font-family: var(--font-mono); }
  .bookopt.callnow { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
  /* THE option (2026-08-31): the live call, big and amber — the action color,
     nothing else on the card competes with it */
  .callnow-xl { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 88px; height: auto;
    padding: 16px 22px; text-align: left; border-radius: 16px; background: var(--warm); border: 1px solid var(--warm);
    color: var(--on-warm); }
  .callnow-xl:hover { background: var(--warm-hover); border-color: var(--warm-hover); scale: 1.01; }
  .callnow-xl .face { width: 56px; height: 56px; border-color: rgba(0,0,0,.2); }
  .callnow-xl .cx-title { display: block; font-family: var(--font-display); font-weight: var(--wt-display);
    font-size: clamp(19px, 2.4vw, 24px); line-height: 1.15; letter-spacing: -0.01em; }
  .callnow-xl .cx-sub { display: block; font-size: 13px; line-height: 18px; opacity: .82; margin-top: 3px; }
  .orline { font-size: 12.5px; color: var(--ink-60); margin: 2px 0; }
  .slotrow { display: flex; gap: 10px; }
  .slotrow .slot15 { flex: 1; min-height: 56px; }
  @media (max-width: 480px) { .slotrow { flex-direction: column; } }
  /* Baneet's face: pops in with the card; placeholder initial until the photo lands */
  .face { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: var(--surface-3); border: 1px solid var(--line-strong);
    animation: face-in 320ms var(--ease) both; }
  .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .face.noimg img { display: none; }
  .face i { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    font: 600 18px var(--font-display); font-style: normal; color: var(--ink-60); }
  .face.noimg i { display: flex; }
  @keyframes face-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

  .lc { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px 18px; }
  .lc .lc-face { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
    background: var(--surface-3); border: 1px solid var(--line-strong); animation: face-in 360ms var(--ease) both; }
  .lc .lc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lc .lc-face.noimg img { display: none; }
  .lc .lc-face .lc-init { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font: 600 34px var(--font-display); color: var(--ink-60); }
  .lc .lc-face:not(.noimg) .lc-init { display: none; }
  .lc-who { font-size: 15px; font-weight: 600; color: var(--ink); }
  .lc-status { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); min-height: 20px; }
  .lc-status.live::after { content: "…"; animation: pulse 1.2s infinite; }
  .lc-wave { display: flex; align-items: center; gap: 3px; height: 44px; width: min(280px, 80%); }
  .lc-wave i { flex: 1; height: 8%; min-height: 3px; background: var(--accent); border-radius: 2px;
    transition: height 90ms linear; }
  .lc-controls { display: flex; gap: 10px; margin-top: 6px; }
  @media (prefers-reduced-motion: reduce) { .face, .lc .lc-face { animation: none; } .lc-wave i { transition: none; } }

  /* ---- the ONE-SCREEN results (2026-08-31): dense, no scrolling ---- */
  #st-preview.cur { gap: 8px; }
  .fine { font-size: 11px; line-height: 15px; color: var(--ink-35); }
  .ba-grid.mini { gap: 14px; }
  .ba-grid.mini .ba-frame { aspect-ratio: auto; height: 135px; }
  .ba-grid.mini .ba-title { min-height: 0; }
  .numstrip { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line);
    border-radius: 14px; padding: 10px 16px; background: var(--surface-2); }
  .statline { display: flex; gap: 26px; flex-wrap: wrap; }
  .statline .st { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .statline .st i { font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-60); font-style: normal; }
  .statline .st b { font: 600 17px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
  .statline .st em { font: 400 11.5px/14px var(--font-body); font-style: normal; color: var(--ink-60); max-width: 230px; }
  .missline { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 8px; }
  .missline .quickwin { font-size: 13px; color: var(--ink); font-weight: 500; }
  .missline .quickwin .tnum { font-family: var(--font-mono); }
  .missline .headline { font-family: var(--font-display); font-weight: var(--wt-display); font-size: 16px; color: var(--ink); }
  .missline .fine { flex-basis: 100%; }
  .endcols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
  .card.dense { padding: 12px 14px; gap: 6px; }
  .card.dense .icp-sec { gap: 4px; margin-top: 2px; }
  .card.dense .icp-row { padding: 2px 0; font-size: 11.5px; line-height: 16px; grid-template-columns: 84px 1fr; }
  .card.dense .icp-row b { line-height: 17px; }
  #icp-edit-toggle { color: var(--accent-text); cursor: pointer; }
  .card.dense .icp-change { padding: 4px 0; gap: 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .card.dense .icp-change .what { font-size: 11.5px; line-height: 16px; }
  .card.dense .icp-change .why { font-weight: 400; font-size: 12px; color: var(--ink-60); }
  .card.dense #icp-edit { min-height: 64px; padding: 10px 12px; font-size: 12.5px; line-height: 18px; }
  #close-card .callnow-xl { min-height: 72px; padding: 12px 16px; border-radius: 14px; }
  #close-card .callnow-xl .face { width: 46px; height: 46px; }
  #close-card .cx-title { font-size: 19px; }
  #close-card input[type=email] { height: 44px; font-size: 14px; width: 100%; }
  #close-card .slotrow .slot15 { min-height: 48px; padding: 8px 14px; }
  .consent.mini { padding: 8px 10px; gap: 8px; }
  .consent.mini input[type=checkbox] { width: 16px; height: 16px; }
  .consent.mini label { font-size: 11px; line-height: 15px; color: var(--ink-60); }
  .busyrow { display: flex; gap: 10px; align-items: center; }
  @media (max-width: 880px) {
    .endcols { grid-template-columns: 1fr; }
    .ba-grid.mini .ba-frame { height: auto; aspect-ratio: 16 / 10; }
  }

  .hide { display: none !important; }

  /* the in-flow snap box (snapBox()): accent hairline, snaps on/off via
     opacity only — the detection-box language inside the flow */
  .qsnap { position: absolute; border: 1px solid var(--accent); opacity: 0; pointer-events: none;
    z-index: 60; transition: opacity 70ms linear; will-change: opacity; }
  .qsnap.on { opacity: 1; }

  /* ---- estimate hints + the traffic-mix sliders (2026-08-31) ---- */
  .qhint { font-size: 12px; line-height: 17px; color: var(--ink-35); margin-bottom: 12px; }
  .mixrows { display: flex; flex-direction: column; gap: 12px; }
  .mixrow { display: grid; grid-template-columns: 118px 1fr 52px; gap: 12px; align-items: center; }
  .mixrow .mixlab { font-size: 13px; color: var(--ink-60); }
  .mixrow input[type=range] { width: 100%; height: auto; accent-color: var(--accent); background: transparent;
    border: 0; padding: 0; cursor: pointer; }
  .mixrow .mixval { font-family: var(--font-mono); font-size: 13px; color: var(--ink); text-align: right; }

  /* ---- the numbers breakdown (STEP 3, 2026-08-30) ---- */
  .statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 700px) { .statgrid { grid-template-columns: 1fr; } }
  .stat { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
  .stat .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-60); }
  .stat .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 26px; line-height: 1.1; color: var(--ink); }
  .stat .verdict { font-size: 12.5px; line-height: 18px; color: var(--ink-60); }
  .miss { border: 1px solid var(--line); border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 12px; }
  .miss .quickwin { font-size: 16px; line-height: 24px; color: var(--ink); font-weight: 500; }
  .miss .quickwin .tnum { font-family: var(--font-mono); }
  .miss .headline { font-family: var(--font-display); font-weight: var(--wt-display);
    font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
  /* the ONE permitted use of the loss red (DESIGN.md §2): the annual figure */
  .lossfig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--loss); }
  .missrow { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 10px; align-items: baseline;
    padding: 9px 0; border-top: 1px solid var(--line); }
  .missrow .pct { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
  .missrow .d { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-60); }
  @media (max-width: 560px) { .missrow { grid-template-columns: 70px 1fr; } .missrow .d:last-child { grid-column: 2; } }

  /* ---- the ICP breakdown (2026-08-30) ---- */
  .icp-sec { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .icp-sec h3 { font-size: 19px; }
  .icp-prose { font-size: 14.5px; line-height: 23px; color: var(--ink); white-space: pre-wrap; }
  /* dense labeled rows (2026-08-31): Label | text, one line each */
  .icp-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 20px; }
  .icp-row:last-of-type { border-bottom: 0; }
  .icp-row b { color: var(--accent-text); font: 600 11px/20px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
  .icp-row span { color: var(--ink); }
  @media (max-width: 480px) { .icp-row { grid-template-columns: 1fr; gap: 2px; } }
  .icp-change { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-top: 1px solid var(--line); }
  .icp-change .where { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--accent-text); }
  .icp-change .what { font-size: 14px; line-height: 21px; color: var(--ink); font-weight: 500; }
  .icp-change .why { font-size: 13px; line-height: 19px; color: var(--ink-60); }
  #icp-edit { width: 100%; min-height: 140px; padding: 14px 16px; border-radius: 12px; resize: vertical;
    border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink);
    font: 400 14.5px/23px var(--font-body); }
  #icp-edit:focus { outline: none; border-color: var(--accent); }

  /* the "welcome back" nudge when the merchant returns from the Shopify tab */
  .pulse { animation: att 900ms var(--ease) 2; }
  @keyframes att { 50% { box-shadow: 0 0 0 4px var(--accent-tint); border-color: var(--accent); } }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .in { opacity: 1; transform: none; }
    .scanframe svg rect { stroke-dashoffset: 0; stroke: var(--scanbox-rest); }
    .boxlabel { opacity: 1; }
  }

  /* ---- dark theme (navy + cream): page-local token overrides only ---- */
  :root[data-theme="dark"] { --ph: rgba(240,237,230,.35); --ghost-soft: rgba(240,237,230,.06);
    --scanbox-draw: rgba(240,237,230,.6); --scanbox-rest: rgba(240,237,230,.32);
    --scanbox-label: rgba(240,237,230,.42); --frame-grid: rgba(240,237,230,.05);
    --ok-bg: rgba(80,190,125,.16); --ok-ink: rgba(123,216,160,1); }
  /* (the navy radial wash behind the page was removed with the template port: flat fills only, §5) */
  html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--display-ink); }
  /* accent as small TEXT on raised navy needs the lifted hover shade for AA */
  html[data-theme="dark"] .tag, html[data-theme="dark"] .statusline,
  html[data-theme="dark"] .pillt { color: var(--accent-hover); }

  /* ---- the plain change summary (replaces the suggestion cards) ---- */
  .chg { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .chg:last-of-type { border-bottom: 0; }
  .chg-what { font-weight: 600; font-size: 15px; color: var(--ink); min-width: 168px; }
  .chg-where { font-size: 14px; color: var(--ink-60); }
  .chg-how { margin-top: 14px; font-size: 14px; line-height: 21px; color: var(--ink-60); }

  /* ---- implement / book, at equal weight ---- */
  .twobtn { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
  .twobtn button { flex: 1 1 220px; }
  #f-unlock { display: flex; flex-direction: column; gap: 10px; }
  @media (max-width: 640px) { .twobtn button { flex: 1 1 100%; } }

  /* ---- the landing page's vibe, carried into the flow (Baneet 2026-08-20) ----
     The cards above are translucent with a backdrop blur, so the fixed ambient
     box layer reads THROUGH them as frost, exactly like the marketing panels.
     These boxes run much dimmer than the marketing ones: this is a working
     surface with dense copy, not a hero. */
  @supports not (backdrop-filter: blur(2px)) { .card { background: var(--card); } }
  html[data-theme="dark"] .amb-box { border-color: rgba(242,240,234,.10); }
  html[data-theme="dark"] .amb-box i { background: rgba(242,240,234,.10); }
  .muted, .small { font-weight: 500; }
  .label, .tag { font-weight: 600; }

  /* ---- the booking calendar, cleaned up ---- */
  .calmount { width: 100%; min-height: 520px; border: 1px solid var(--line); border-radius: 16px; overflow: clip; background: var(--surface-1); }
  .calmount iframe { display: block; width: 100% !important; border: 0; }

  /* ---- buttons match the marketing surface: amber is the action colour,
     cream is the neutral second choice. Same rule as styles/template.css. ---- */
  button { background: var(--warm); border-color: var(--warm); color: var(--on-warm); }
  button:hover { background: var(--warm-hover); border-color: var(--warm-hover); }
  button[disabled]:hover { background: var(--warm); }
  button.ghost { background: var(--text); border-color: var(--text); color: var(--bg); }
  button.ghost:hover { background: var(--display-ink); border-color: var(--display-ink); }
  .callink { background: var(--text); border-color: var(--text); color: var(--bg); }

  /* much dimmer than the marketing layer: this is a working surface */
  html[data-theme="dark"] .amb-box { border-color: rgba(242,240,234,.07); }
  html[data-theme="dark"] .amb-box i { background: rgba(242,240,234,.07); }