/* Quote builder (Plans page), mapped onto Boardwalk's tokens. */
.qb {
  --band: var(--sand-light); --border: var(--hairline); --ink: var(--ocean-deep); --mid: var(--wood); --light: #86735A;
  --off: #F8F0E6; --track: var(--sand); --accent: var(--ocean-mid); --warm: var(--sunset-orange); --r1: #C0352C;
  --ff: 'DM Sans', system-ui, sans-serif; --ffd: 'Playfair Display', serif;
  --bar: linear-gradient(90deg, var(--ocean-mid), var(--ocean-light));
}

  /* ===== QUOTE BUILDER ===== */
  .qb { background: var(--band); padding: 56px 80px 88px; scroll-margin-top: 100px; }
  .qb[hidden] { display: none; }
  .qb-inner { max-width: 1160px; margin: 0 auto; }

  .qb-progress { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 22px 14px; margin-bottom: 24px; }
  .qb-progress-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mid); margin-bottom: 10px; }
  .qb-progress-top strong { color: var(--ink); font-weight: 600; }
  .qb-progress-end { display: flex; align-items: baseline; gap: 16px; }
  .qb-back-link { border: 0; background: none; padding: 0; font: 600 13px var(--ff); color: var(--accent); cursor: pointer; white-space: nowrap; }
  .qb-back-link:hover { text-decoration: underline; }
  .qb-back-link[hidden] { display: none; }
  .qb-bar { height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; }
  .qb-bar span { display: block; height: 100%; width: 0; background: var(--bar); border-radius: 6px; transition: width 0.35s ease; }
  /* each step sits at its proportional point on the track (set inline): first flush left, last flush right */
  .qb-steps { list-style: none; position: relative; height: 32px; margin-top: 12px; }
  .qb-steps li { position: absolute; top: 0; }
  .qb-steps.is-tight .lbl { display: none; }
  .qb-steps.is-tight [aria-current="step"] .lbl { display: inline; }
  .qb-steps.is-bare [aria-current="step"] .lbl { display: none; }
  .qb-steps.is-tight button { padding-right: 6px; }
  .qb-steps button { display: flex; align-items: center; border: 0; background: none; padding: 6px 12px; border-radius: 20px; font: 500 13px var(--ff); color: var(--mid); cursor: pointer; white-space: nowrap; }
  .qb-steps button:hover:not(:disabled) { color: var(--ink); }
  .qb-steps button:disabled { cursor: default; }
  /* only the current step is marked (shaded pill); the progress bar shows how far along you are */
  .qb-steps .n { display: none; }
  .qb-steps [aria-current="step"] { background: var(--track); color: var(--ink); font-weight: 700; }
  .qb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .qb-panel { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px; }
  .qb-panel:focus { outline: none; }
  .qb-panel h3 { font-family: var(--ffd); font-weight: 700; font-size: 28px; line-height: 1.15; margin-bottom: 4px; }
  .qb-panel-lede { font-size: 14px; color: var(--mid); margin-bottom: 22px; }
  .qb-loading { font-size: 14px; color: var(--mid); padding: 24px 0; }
  .qb-skel { height: 96px; border-radius: 14px; background: linear-gradient(90deg, var(--off) 0%, #eeeef0 50%, var(--off) 100%); background-size: 200% 100%; animation: qbShimmer 1.2s linear infinite; }
  @keyframes qbShimmer { to { background-position: -200% 0; } }

  .qb-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
  .qb-back, .qb-next { font: 600 15px var(--ff); border-radius: 9px; cursor: pointer; height: 48px; padding: 0 24px; }
  .qb-back { background: none; border: 1.5px solid var(--border); color: var(--ink); }
  @media (hover: hover) { .qb-back:hover { border-color: #aaa; } }
  .qb-back[hidden] { visibility: hidden; display: block; }
  .qb-next { background: var(--ink); border: 0; color: #fff; margin-left: auto; }
  @media (hover: hover) { .qb-next:hover { opacity: 0.85; } }
  .qb-next:active { opacity: 0.85; }
  .qb-next[hidden] { display: none; }
  .qb button:focus-visible, .qb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* plan choice */
  .qb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qb-plan { position: relative; display: block; border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  @media (hover: hover) { .qb-plan:hover { border-color: #bbb; } }
  .qb-plan input { position: absolute; opacity: 0; pointer-events: none; }
  /* the card is a box holding the label and, beside it, the "What's included" link; the label's layer covers the whole card,
     so a tap anywhere but the link picks the plan */
  .qb-plan-pick { display: block; cursor: pointer; }
  .qb-plan-pick::before { content: ''; position: absolute; inset: -1.5px; border-radius: 14px; }
  .qb-plan.is-checked { border-color: var(--ink); background: var(--off); }
  /* keyboard focus rings the card; the focus a closing dialog hands back after a tap or click doesn't, so only the picked card stands out */
  .qb-plan:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  @supports not selector(:has(*)) { .qb-plan:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } }
  /* plan names in the display face */
  .qb-plan .nm, .qb-dialog h3.qb-plan-title, .qb-lines li.is-plan > span:first-child { font-family: var(--ffd); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
  .qb-plan .nm { display: block; font-size: 12px; line-height: 1.3; margin-bottom: 6px; }
  .qb-dialog h3.qb-plan-title { font-size: 30px; color: var(--warm); }
  .qb-lines li.is-plan .qb-details { font-family: var(--ff); letter-spacing: 0; }
  .qb-plan .pr { display: block; font-family: var(--ffd); font-size: 30px; line-height: 1; font-variant-numeric: lining-nums; }
  .qb-plan .pr small { font-size: 15px; color: var(--light); }
  .qb-plan.is-checked .pr small { color: var(--wood-text, #6E5537); }   /* 6.2:1 on the picked card's fill (--light is 4.0:1 there) */
  .qb-plan .rt { display: block; font-size: 13px; color: var(--mid); margin-top: 8px; }
  .qb-plan .pr.is-talk { font-size: 26px; padding-top: 2px; }
  .qb-incl-link { position: relative; display: inline-block; margin-top: 12px; padding: 0; border: 0; background: none; font: 700 14px var(--ff); color: var(--accent); cursor: pointer; }
  .qb-incl-link::after { content: '\00a0\2192'; }   /* no-break space: the arrow never wraps onto a line of its own */
  .qb-incl-link:hover { text-decoration: underline; }
  .qb-dialog { margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 0; border-radius: 16px; padding: 0; color: var(--ink); background: #fff; box-shadow: 0 30px 80px rgba(15,37,48,0.35); }
  .qb-dialog::backdrop { background: rgba(15,37,48,0.55); }
  .qb-dialog-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--off); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
  .qb-dialog-close:hover { background: var(--border); }
  .qb-dialog-body { padding: 28px 32px 30px; }
  .qb-dialog h3 { font-family: var(--ffd); font-weight: 700; font-size: 30px; line-height: 1.1; margin-bottom: 10px; }
  .qb-dialog-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
  .qb-dialog-price .pr { font-family: var(--ffd); font-size: 28px; line-height: 1; font-variant-numeric: lining-nums; }
  .qb-dialog-price .pr small { font-size: 15px; color: var(--light); }
  .qb-dialog-price .rt { font-size: 14px; color: var(--mid); }
  .qb-dialog-plus { font-size: 13px; font-weight: 600; color: var(--mid); margin-bottom: 8px; }
  .qb-dialog-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
  .qb-dialog-list li { display: flex; gap: 9px; align-items: baseline; font-size: 14px; line-height: 1.4; }
  .qb-dialog-list li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--warm); transform: translateY(-2px); }
  .qb-dialog-note { font-size: 13px; color: var(--mid); margin-top: 18px; }
  .qb-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 520px) { .qb-dialog-list { grid-template-columns: 1fr; } .qb-dialog-body { padding: 24px 20px; } }
  .qb-plan .ck { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; }
  .qb-plan.is-checked .ck { border: 6px solid var(--ink); }
  .qb-aside-note { font-size: 13px; color: var(--mid); margin-top: 16px; }
  .qb-aside-note a, .qb-sum-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
  .qb-aside-note a:hover, .qb-sum-note a:hover { text-decoration: underline; }

  /* hardware tiles */
  .qb-hw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qb-item { border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px 12px 12px; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; transition: border-color 0.15s; }
  .qb-item.is-picked { border-color: var(--ink); }
  .qb-item.is-group { grid-column: 1 / -1; display: block; padding: 12px 16px 6px 12px; }
  .qb-group-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 4px; }
  .qb-vcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-vcard { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 12px 14px; }
  .qb-vcard .qb-thumb { width: 100%; border-radius: 10px; }
  .qb-vbody { flex: 1; }
  .qb-vcard .qb-qty { align-self: flex-start; }
  .qb-model { display: block; margin-top: 10px; }
  .qb-model[hidden] { display: none; }
  .qb-model span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light); margin-bottom: 4px; }
  .qb-model select { width: 100%; font: 13px var(--ff); color: var(--ink); padding: 7px 8px; border: 1.5px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }
  .qb-model select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .qb-thumb { width: 76px; aspect-ratio: 4 / 3; background: var(--off); border-radius: 8px; overflow: hidden; display: flex; }
  .qb-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .qb-item-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
  .qb-item-price { font-size: 13px; color: var(--mid); margin-top: 2px; font-variant-numeric: lining-nums; }
  .qb-item-price b { color: var(--ink); font-weight: 600; }
  .qb-opts { list-style: none; margin-left: 88px; }
  .qb-opts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
  .qb-opt-note { display: block; font-size: 12px; color: var(--mid); margin-top: 1px; }
  .qb-item .qb-qty, .qb-opts .qb-qty { justify-self: end; }
  .qb-layout.is-review { grid-template-columns: minmax(0, 820px); justify-content: center; }
  .qb-layout.is-review .qb-summary { display: none; }
  #rombis-slot > .bwr { border-radius: 18px; }
  /* the Rombis heading row starts clear of the confirmation card's bottom edge (the slot is empty on every other screen) */
  #rombis-slot:not(:empty) { margin-top: 24px; }
  /* the Rombis card eases in a beat after the confirmation, rather than popping in with it */
  #rombis-slot > .bwr { animation: qb-rombis-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
  @keyframes qb-rombis-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { #rombis-slot > .bwr { animation: none; } }
  .qb-layout.is-contact { grid-template-columns: minmax(0, 820px); justify-content: center; }
  .qb-layout.is-contact .qb-summary, .qb-layout.is-contact .qb-nav { display: none; }
  .qb-progress[hidden] { display: none; }
  .qb-contact { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 24px; }
  .qb-contact h4 { font-family: var(--ffd); font-weight: 700; font-size: 24px; margin-bottom: 6px; }
  .qb-contact > p { font-size: 14px; color: var(--mid); margin-bottom: 18px; }
  .qb-details { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; font: 600 13px var(--ff); color: var(--accent); cursor: pointer; text-align: left; white-space: nowrap; }
  .qb-sum-details { margin: 0 0 0 6px; font-size: 12px; }
  .qb-details:hover { text-decoration: underline; }
  .qb-details:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  .qb-subhead { font-family: var(--ff); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); margin: 4px 0 10px; }
  .qb-item.is-lite { margin-bottom: 12px; }
  .qb-item.is-lite + .qb-fee { margin-bottom: 24px; }
  .qb-dialog.is-hw { width: min(720px, calc(100vw - 32px)); }
  .qb-hwd-head { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 18px; padding-right: 24px; }
  .qb-hwd-img { background: var(--off); border-radius: 12px; aspect-ratio: 4 / 3; display: flex; }
  .qb-hwd-img img { width: 100%; height: 100%; object-fit: contain; }
  .qb-hwd-head p { font-size: 14px; color: var(--mid); line-height: 1.6; }
  .qb-hwd-notice { display: inline-block; font-size: 12px; color: #8a4a1c; background: #fbe9dc; border-radius: 20px; padding: 6px 12px; margin-bottom: 12px; }
  .qb-hwd-h { font-family: var(--ff); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 22px 0 6px; }
  .qb-spec { width: 100%; border-collapse: collapse; font-size: 14px; }
  .qb-spec th, .qb-spec td { text-align: left; vertical-align: top; padding: 6px 0; }
  .qb-hwd-opts { list-style: none; font-size: 14px; }
  .qb-hwd-opts li { padding: 6px 0; font-weight: 600; }
  .qb-hwd-opts .qb-opt-note { font-weight: 400; }
  .qb-spec th { width: 36%; font-weight: 600; padding-right: 16px; }
  .qb-spec td { color: var(--mid); line-height: 1.5; overflow-wrap: anywhere; }
  @media (max-width: 600px) { .qb-hwd-head { grid-template-columns: 1fr; padding-right: 0; } .qb-hwd-img { max-width: 260px; } .qb-hwd-opts { font-size: min(13px, 3.15vw); } }
  .qb-fee { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; color: var(--wood-text, #6E5537); background: var(--off); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
  .qb-fee b { color: var(--ink); }
  .qb-fee-now { color: var(--accent); font-weight: 600; }
  .qb-fee-now b { color: var(--accent); }
  .qb-hw-foot b { color: var(--ink); font-weight: 600; }
  .qb-hw-foot { font-size: 13px; color: var(--mid); margin-top: 16px; }

  /* steppers, rows */
  .qb-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 22px; overflow: hidden; background: #fff; }
  .qb-qty button { width: 34px; height: 32px; border: 0; background: #fff; color: var(--ink); font: 17px/1 var(--ff); cursor: pointer; }
  @media (hover: hover) { .qb-qty button:hover { background: var(--off); } }
  .qb-qty button:disabled { color: #c4c4c8; cursor: default; background: #fff; }
  .qb-qty button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 22px; }
  .qb-qty output { min-width: 28px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
  .qb-table { width: 100%; border-collapse: collapse; font-size: 15px; }
  .qb-table th, .qb-table td { padding: 14px 0; border-top: 1px solid var(--border); vertical-align: middle; }
  .qb-table tr:first-child th, .qb-table tr:first-child td { border-top: 0; }
  .qb-table th { text-align: left; font-weight: 500; color: var(--ink); padding-right: 16px; }
  .qb-table th label { cursor: pointer; }
  .qb-row-details { display: block; }
  .qb-row-details .qb-details { margin-top: 2px; }
  .qb-acc + .qb-subhead { margin-top: 22px; }
  .qb-sub { display: block; font-size: 13px; font-weight: 400; color: var(--mid); margin-top: 2px; }
  .qb-ctl { width: 1%; padding-left: 16px !important; text-align: right; white-space: nowrap; }
  .qb-incl { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); background: rgba(46,111,142,0.1); border-radius: 20px; padding: 4px 10px; }
  .qb-check { width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; vertical-align: middle; }
  .qb-table select { font: 14px var(--ff); padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; max-width: 230px; }
  .qb-check:focus-visible, .qb-table select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* summary */
  .qb-summary { position: sticky; top: 100px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
  .qb-sum-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); }
  .qb-sec { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); margin: 16px 0 2px; }
  .qb-lines { list-style: none; font-size: 14px; }
  .qb-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
  .qb-lines li:first-child { border-top: 0; }
  .qb-lines li span:last-child { white-space: nowrap; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
  .qb-lines li.is-quoted span:last-child { font-weight: 500; color: var(--mid); }
  .qb-lines .qb-empty { color: var(--light); }
  /* "Added to your quote" splits into hardware and monthly items when it has both (summaryHTML), so a kiosk's hardware
     and its monthly licence don't read as one item listed twice */
  .qb-grp { font-size: 12px; font-weight: 600; color: var(--wood-text, #6E5537); margin-top: 8px; }
  .qb-lines + .qb-grp { margin-top: 0; border-top: 1px solid var(--border); padding-top: 10px; }
  .qb-total + .qb-sec { margin-top: 20px; }
  .qb-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--ink); }
  .qb-total > span { font-size: 14px; color: var(--mid); }
  .qb-total strong { font-family: var(--ffd); font-weight: 700; font-size: 32px; line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums; }
  .qb-total small { font-size: 15px; color: var(--light); margin-left: 2px; }
  .qb-total.is-sub { border-top-width: 1px; border-top-color: var(--border); }
  .qb-total.is-sub strong { font-size: 24px; }
  .qb-sum-empty { font-size: 14px; color: var(--light); margin: 14px 0 4px; }
  .qb-next:disabled { opacity: 0.35; cursor: not-allowed; }
  .qb-sum-note { font-size: 13px; color: var(--mid); line-height: 1.55; margin: 16px 0 18px; }
  .qb-cta { display: block; width: 100%; text-align: center; padding: 15px; border: 0; border-radius: 9px; background: var(--warm); color: #fff; font: 700 15px var(--ff); cursor: pointer; text-decoration: none; -webkit-text-fill-color: #fff; transition: opacity 0.15s; }
  @media (hover: hover) { .qb-cta:hover { opacity: 0.85; } }
  .qb-cta:active { opacity: 0.85; }
  .qb-cta[hidden] { display: none; }

  /* review + form */
  .qb-review { border: 1px solid var(--border); border-radius: 14px; padding: 6px 18px 16px; margin-bottom: 26px; }
  .qb-review .qb-sec:first-child { margin-top: 12px; }
  .qb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .qb-form h4 { grid-column: 1 / -1; font-family: var(--ffd); font-weight: 700; font-size: 22px; margin: 0; }
  .qb-field.full { grid-column: 1 / -1; }
  .qb-money { position: relative; display: block; }
  .qb-money > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--mid); pointer-events: none; }
  .qb-field .qb-money input { padding-left: 28px; font-variant-numeric: tabular-nums; }
  .qb-hint { display: block; font-size: 12px; color: var(--mid); margin-top: 6px; }
  .qb-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
  .qb-field label i { font-style: normal; color: var(--r1); }
  .qb-field input, .qb-field select, .qb-field textarea { width: 100%; font: 15px var(--ff); color: var(--ink); padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; }
  .qb-field textarea { min-height: 96px; resize: vertical; }
  .qb-field input:focus, .qb-field select:focus, .qb-field textarea:focus { outline: none; border-color: var(--ink); }
  .qb-field.is-invalid input { border-color: var(--r1); }
  .qb-err { display: none; font-size: 12px; color: var(--r1); margin-top: 4px; }
  .qb-field.is-invalid .qb-err { display: block; }
  .qb-consent { grid-column: 1 / -1; font-size: 12px; color: var(--mid); }
  .qb-form .qb-cta { grid-column: 1 / -1; margin-top: 4px; }

  /* sending + done */
  .qb-sending { list-style: none; max-width: 360px; margin: 8px auto; }
  .qb-sending li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--light); transition: color 0.2s; }
  .qb-sending .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
  .qb-sending li.is-active { color: var(--ink); }
  .qb-sending li.is-active .ic { border-color: var(--accent); border-right-color: transparent; animation: qbSpin 0.7s linear infinite; }
  .qb-sending li.is-done { color: var(--ink); }
  .qb-sending li.is-done .ic { border-color: var(--accent); background: var(--accent); }
  .qb-sending li.is-done .ic::before { content: '\2713'; }
  @keyframes qbSpin { to { transform: rotate(360deg); } }
  /* while a quote sends, the business-type switch and progress card are inert (submit()), so they read as paused:
     "← Back" steps aside like the Back/Next row, and the step pills and switch dim */
  .qb.is-sending .qb-back-link { visibility: hidden; }
  .qb.is-sending .qb-steps, .qb.is-sending .qb-door { opacity: 0.5; }
  .qb-done { text-align: center; padding: 12px 0 4px; }
  .qb-done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--ocean-deep); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
  .qb-done p { font-size: 15px; color: var(--mid); max-width: 460px; margin: 6px auto 0; }
  .qb-ref { font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums; }
  .qb-done-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
  .qb-done-acts button, .qb-done-acts a { font: 600 14px var(--ff); border-radius: 9px; padding: 11px 20px; cursor: pointer; border: 1.5px solid var(--border); background: #fff; color: var(--ink); text-decoration: none; }
  .qb-done-acts .is-primary { background: var(--ink); border-color: var(--ink); color: #fff; }

  /* mobile totals bar */
  .qb-mbar { display: none; }

  @media (max-width: 1200px) {
    .qb { padding-left: 40px; padding-right: 40px; }
  }
  @media (max-width: 1000px) {
    .qb-layout { grid-template-columns: 1fr; }
    .qb-summary { position: static; }
    .qb-mbar { display: flex; position: sticky; bottom: 0; z-index: 5; align-items: center; justify-content: space-between; gap: 12px; margin: 24px -40px -88px; padding: 12px 40px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0,0,0,0.05); }
    .qb-mbar[hidden] { display: none; }
    .qb-mbar-tot { font-size: 13px; color: var(--mid); line-height: 1.35; }
    .qb-mbar-tot b { color: var(--ink); font-size: 16px; font-variant-numeric: lining-nums; }
    .qb-mbar .qb-next { height: 44px; padding: 0 20px; margin: 0; }
  }
  @media (max-width: 768px) {
    /* side gutter follows the site's --gutter (40px on tablets, 18px on phones) so the cards line up with the header logo */
    .qb { padding: 48px var(--gutter, 20px) 56px; }
    .qb-mbar { margin: 24px calc(-1 * var(--gutter, 20px)) -56px; padding-left: var(--gutter, 20px); padding-right: var(--gutter, 20px); }
    .qb-panel { padding: 22px 18px; }
    .qb-progress { padding: 14px 16px 12px; }
  }
  @media (max-width: 700px) {
    .qb-plans, .qb-hw, .qb-form { grid-template-columns: 1fr; }
    .qb-opts { margin-left: 0; }
    .qb-item { grid-template-columns: 56px minmax(0, 1fr) auto; padding-right: 12px; }
    .qb-group-head { grid-template-columns: 56px minmax(0, 1fr); }
    .qb-thumb { width: 56px; }
    .qb-vcard { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; }
    .qb-vcard .qb-thumb { width: 56px; border-radius: 8px; }
    .qb-vcard .qb-qty { align-self: center; }
    .qb-opts li { grid-template-areas: "name ctl"; }
    .qb-opts li > span:first-child { grid-area: name; }
    .qb-opts .qb-qty { grid-area: ctl; }
    .qb-table, .qb-table tbody { display: block; }
    .qb-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name ctl"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
    .qb-table tr:first-child { border-top: 0; }
    .qb-table th, .qb-table td { border: 0 !important; padding: 0 !important; }
    .qb-table th { grid-area: name; }
    .qb-table .qb-ctl { grid-area: ctl; width: auto; }
    .qb-table select { max-width: 150px; }
    .qb-back, .qb-next { padding: 0 18px; }
  }
  @media print {
    .promo-bar, .site-header, footer, .qb-bottom, .qb-progress, .qb-nav, .qb-mbar, .qb-summary, .qb-done-acts { display: none !important; }
    body { padding-top: 0; }
    .qb { padding: 0; background: #fff; }
    .qb-layout { display: block; }
    .qb-panel { border: 0; }
  }

  /* Boardwalk additions: business-type toggle in the plan step, a 3-up plan row for retail */
  /* business-type toggle above the title: same pill as the Hardware page's category tabs */
  .qb-door { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 32px; background: var(--sand); border-radius: 100px; padding: 4px; }
  .qb-door-tab { flex: none; background: none; border: none; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--wood-text, #6E5537); padding: 10px 26px; border-radius: 100px; cursor: pointer; white-space: nowrap; }
  .qb-door-tab.is-active { background: var(--ocean-deep); color: #fff; }
  .qb-door-tab:not(.is-active):hover { color: var(--ocean-deep); }
  .qb-plans.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-dialog-door { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); margin: -4px 0 8px; }
  @media (max-width: 700px) { .qb-plans.is-3 { grid-template-columns: 1fr; } }
  .qb-bottom { text-align: center; padding: 8px 0 56px; background: var(--sand-light); }
  .qb-bottom p { font-size: 0.95rem; color: var(--wood); margin-bottom: 14px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* ===== Phone and tablet fixes (mobile audit). Desktop (>1000px) is untouched. ===== */
  .qb-nw { font-style: normal; white-space: nowrap; }   /* at every width (desktop summary too): see keepTogether() */
  .qb-steps.is-measuring button { font-weight: 700; }   /* fitSteps() measures the row with every label bold */
  /* step changes and sending scroll the progress card (or the panel, when the card is hidden) clear of the sticky header */
  .qb-progress, .qb-panel, .qb-contact { scroll-margin-top: 100px; }

  @media (max-width: 1000px) {
    /* labels at 4.5:1 on white instead of 2.8:1; the band fills the screen so short states (sent) don't end above the fold */
    .qb { --light: #86735A; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
    /* the content column takes the band's spare height, so on short steps the sticky bar sits at the bottom of the screen
       instead of floating under the last card */
    .qb { display: flex; flex-direction: column; }
    .qb-inner { flex: 1 0 auto; width: 100%; }
    /* tap targets on touch tablets as well as phones */
    .qb-qty button { width: 40px; height: 40px; }
    .qb-qty output { min-width: 24px; }
    .qb-details { padding: 10px 0; margin: -6px 0 -10px; }
    .qb-sum-details { font-size: 13px; padding: 10px 4px; margin: -10px 0 -10px 2px; }
    /* the plan row's link ("Free statement review" at 360) wraps flush under the plan name, not 6px in by its tap padding */
    .qb-lines li.is-plan > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
    .qb-lines li.is-plan .qb-sum-details { margin-left: -4px; }
    .qb-back-link { padding: 12px 0 12px 12px; margin: -12px 0 -12px -12px; }
    .qb-incl-link { padding: 10px 0; margin: 2px 0 -10px; }
    .qb-door-tab { min-height: 44px; }
    .qb-table select { min-height: 40px; }
    /* the summary card opens with a heading, not a second small label stacked on the first section label */
    .qb-summary .qb-sum-title { font: 700 20px/1.2 var(--ffd); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
    .qb-summary .qb-sec:first-child { margin-top: 12px; }
    /* small uppercase labels use the sans face, like the summary's labels */
    .qb-subhead, .qb-hwd-h { font-family: var(--ff); }
    /* the sticky bar carries Next and the progress card carries "← Back", so the in-flow row would only hold a stray Back */
    .qb-nav { display: none; }
    /* the bar's button never wraps; the total beside it takes what is left */
    .qb-mbar .qb-next { white-space: nowrap; flex: none; }
    .qb-mbar-tot { min-width: 0; }
    /* step pills: tighter pills so all seven labels fit on tablets; when they still don't, drop the row (the header names the step) */
    .qb-steps button { padding: 6px 8px; }
    .qb-steps.is-tight { display: none; }
    /* two-line table labels split evenly: "Kitchen Display / System (KDS)", "Online ordering / (your website)" */
    .qb-table th { text-wrap: balance; }
    .qb-table .qb-sub { text-wrap: pretty; }
    /* the summary drops below the steps: hide it until a plan is picked, and keep its shortcut secondary to Next */
    .qb-summary:has(.qb-sum-empty) { display: none; }
    .qb-summary { padding: 28px; }
    .qb-progress { padding-left: 28px; padding-right: 28px; }
    .qb-to-review { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; border: 1.5px solid var(--border); padding: 12px; }
    /* iOS zooms into fields under 16px */
    .qb-field input, .qb-field select, .qb-field textarea, .qb-table select, .qb-model select { font-size: 16px; }
    .qb-money > span { font-size: 16px; }
    .qb-field .qb-money input { padding-left: 30px; }
    .qb-details { text-align: left; white-space: nowrap; }
    /* plan names read as names, not captions */
    .qb-plan .nm { font-size: 16px; margin-bottom: 4px; padding-right: 28px; }
    .qb-nw { white-space: nowrap; }
    .qb-contact h4, .qb-form h4 { line-height: 1.2; text-wrap: balance; }
    .qb-steps { height: 40px; }
    .qb-steps button { min-height: 40px; }
    /* dialogs: the close button sits in a white top band and the body scrolls under its edge,
       which takes a soft shadow once the body is scrolled (the local white layer covers it at the top) */
    .qb-dialog[open] { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding-top: 56px; }
    .qb-dialog-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; overscroll-behavior: contain; padding-top: 4px;
      background: linear-gradient(#fff, #fff) top / 100% 12px no-repeat local, linear-gradient(rgba(15,37,48,0.12), rgba(15,37,48,0)) top / 100% 8px no-repeat scroll; background-color: #fff; }
    /* the 36px disc keeps its inset from the corner; the tap area around it is 44px */
    .qb-dialog-close { top: 10px; }
    .qb-dialog-close::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
    .qb-spec { table-layout: fixed; }
    /* add-on rows: a tap anywhere on the row toggles its checkbox (js/quote-builder.js); the box itself shows the change */
    .qb-table tr:has(.qb-check) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  }
  /* touch screens: the page behind an open dialog stays put, as on the Hardware page. Narrow mouse windows keep the desktop
     behaviour, so a classic scrollbar doesn't vanish and shift the page sideways */
  @media (max-width: 1000px) and (hover: none) {
    html:has(.qb-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
  }
  @media (max-width: 768px) {
    /* progress, panel and summary cards share the panel's 18px inner gutter */
    .qb-progress { padding: 14px 18px 12px; }
    .qb-summary { padding: 22px 18px; }
  }
  /* laptops: beside the 340px summary a two-up row leaves the terminal name under the 116px "Dejavoo P8 Dual" needs
     (18px at 1001, 78px at 1201, where the side padding grows), so terminal cards go one per row until the panel's content
     is 698px wide (1280 and up). Measured on the panel, so a classic scrollbar can't tip a 1280 window back to two-up */
  @media (min-width: 1001px) {
    .qb-panel { container: qb-panel / inline-size; }
    @container qb-panel (width < 698px) {
      .qb-hw:not(.qb-vcards) { grid-template-columns: minmax(0, 1fr); }
    }
  }
  @supports not (container-type: inline-size) {
    @media (min-width: 1001px) and (max-width: 1279px) {
      .qb-hw:not(.qb-vcards) { grid-template-columns: minmax(0, 1fr); }
    }
  }
  /* tablets: two-up terminal cards give the name the full width; "View details" and the stepper share the second row */
  @media (min-width: 701px) and (max-width: 900px) {
    .qb-hw:not(.qb-vcards) .qb-item:not(.is-group) { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 0; }
    .qb-hw:not(.qb-vcards) .qb-item:not(.is-group) > div:not(.qb-thumb) { display: contents; }
    .qb-hw:not(.qb-vcards) .qb-item:not(.is-group) > .qb-thumb { width: 56px; grid-column: 1; grid-row: 1 / span 2; }
    .qb-hw:not(.qb-vcards) .qb-item:not(.is-group) .qb-item-name { grid-column: 2 / -1; }
    .qb-hw:not(.qb-vcards) .qb-item:not(.is-group) .qb-details { grid-column: 2; justify-self: start; padding: 10px 0; margin: 0; }
    .qb-hw:not(.qb-vcards) .qb-item:not(.is-group) > .qb-qty { grid-column: 3; justify-self: end; }
  }
  @media (max-width: 700px) {
    /* the door switch fills the phone column (the other tap targets are in the 1000px block) */
    .qb-door { width: 100%; max-width: 320px; }
    .qb-door-tab { flex: 1 1 0; padding: 10px 16px; }
    /* "Food & Beverage" stays on one line in the narrowest switch */
    @media (max-width: 360px) { .qb-door-tab { padding-left: 8px; padding-right: 8px; } }
    .qb-sec, .qb-subhead, .qb-hwd-h, .qb-model span { font-size: 12px; }
  }
  @media (max-width: 640px) {
    /* first screen: less space above the plans */
    .qb { padding-top: 32px; }
    .qb-door { margin-bottom: 16px; }
    .qb-progress { margin-bottom: 12px; }
    .qb-panel-lede { margin-bottom: 16px; }
    .qb-plans { gap: 10px; }
    .qb-plan { padding: 14px 16px; }
    .qb-incl-link { margin-top: -2px; }
    .qb-contact h4 { font-size: 22px; }
    /* progress header on one line: the bar shows the percentage */
    .qb-pct { display: none; }
    .qb-progress-top { align-items: center; margin-bottom: 8px; }
    .qb-progress-top > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* the Notes placeholder runs to four lines at 16px */
    .qb-field textarea { min-height: 120px; line-height: 1.4; }
    /* step changes land the progress card just under the 73px phone header, so no strip of the door switch shows above it */
    .qb-progress, .qb-panel, .qb-contact { scroll-margin-top: 86px; }
  }
  /* the hardware photo spans the text column (the close button has its own top band), at about the same height */
  @media (max-width: 600px) { .qb-dialog .qb-hwd-img { max-width: none; aspect-ratio: 16 / 10; } }
  /* phones: hardware cards give the name the full width instead of squeezing it beside the stepper.
     Below 360px the stepper sits under the name; from 360px "View details" and the stepper share the second row. */
  @media (max-width: 480px) {
    .qb-item:not(.is-group) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
    .qb-item:not(.is-group) > .qb-thumb { grid-row: span 2; align-self: center; }
    .qb-item:not(.is-group) > .qb-qty { grid-column: 2; justify-self: start; }
    /* "Your POS and card reader in one" breaks evenly instead of leaving "one" alone */
    .qb-item-price { text-wrap: balance; }
  }
  @media (min-width: 360px) and (max-width: 480px) {
    .qb-item:not(.is-group) { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 0; }
    .qb-item:not(.is-group) > div:not(.qb-thumb) { display: contents; }
    .qb-item:not(.is-group) > .qb-thumb { grid-column: 1; grid-row: 1 / span 2; }
    .qb-item.is-lite > .qb-thumb { grid-row: 1 / span 3; }
    .qb-item:not(.is-group) .qb-item-name, .qb-item:not(.is-group) .qb-item-price { grid-column: 2 / -1; }
    .qb-item:not(.is-group) .qb-details { grid-column: 2; justify-self: start; margin: 0; }
    .qb-item:not(.is-group) > .qb-qty { grid-column: 3; justify-self: end; }
  }
  @media (max-width: 385px) {
    .qb-qty button { width: 36px; }
    /* "Payments Only · $0/mo" and "Review quote" share one row at 360 */
    .qb-mbar { gap: 10px; }
    .qb-mbar .qb-next { padding: 0 16px; }
    .qb-mbar-tot b { font-size: 15px; }
  }
  /* phone landscape: the header scrolls away (plans.html) and the builder and its bar are compact */
  @media (max-height: 500px) and (orientation: landscape) {
    .qb { padding-top: 16px; scroll-margin-top: 16px; }
    /* step changes land the card 12px down, the switch's bottom margin, so the switch ends at the top edge with no strip showing */
    .qb-progress { scroll-margin-top: 12px; margin-bottom: 12px; }
    .qb-steps { display: none; }
    .qb-door { margin-bottom: 12px; }
    .qb-panel { padding-top: 20px; scroll-margin-top: 12px; }
    .qb-contact { scroll-margin-top: 12px; }
    .qb-panel-lede { margin-bottom: 14px; }
    /* first screen: the plan cards come up. On the plan step (no Back yet) the progress card only shows an empty bar,
       and the step's lede ("You can switch at any time") gives way to the cards */
    .qb-progress:has(.qb-back-link[hidden]) { display: none; }
    .qb-panel:has(> .qb-plans) > .qb-panel-lede { display: none; }
    .qb-panel:has(> .qb-plans) > h3 { margin-bottom: 12px; }
    .qb-mbar { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .qb-mbar .qb-next { height: 40px; }
  }