/* Product demo: a scaled, fixed-size "screen" that replays the real QuoteFlowin flow. */

.pd { position: relative; margin: 64px auto 0; max-width: 1080px; }
.pd-shell {
  position: relative; border-radius: 16px; padding: 10px; background: linear-gradient(180deg, #1a1a1f, #101013);
  border: 1px solid var(--line-2); box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 90px -20px rgba(74,222,128,0.22);
}
.js .pd-shell { transform: perspective(1600px) rotateX(12deg) translateY(30px); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1s; }
.js .pd-shell.in { transform: none; opacity: 1; }
.pd-viewport { position: relative; overflow: hidden; border-radius: 9px; background: #fff; }
.pd-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #fff; }

.pd-frame { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.pd-frame.on { opacity: 1; visibility: visible; transition: opacity .45s; }

/* Chapters */
.pd-chapters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pd-chapters button {
  font: 500 0.8rem/1 var(--mono); color: var(--ink-3); background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  padding: 9px 12px 9px 10px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden;
  transition: color .3s, border-color .3s, background .3s;
}
.pd-chapters button b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.68rem; background: rgba(255,255,255,0.07); color: var(--ink-2); font-weight: 600; }
.pd-chapters button:hover { color: var(--ink); border-color: var(--line-2); }
.pd-chapters button.on { color: var(--ink); border-color: rgba(74,222,128,0.45); background: var(--accent-soft); }
.pd-chapters button.on b { background: var(--accent); color: var(--accent-ink); }
.pd-chapters button.done b { background: rgba(74,222,128,0.25); color: var(--accent); }
.pd-chapters button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.pd-chapters button.on i { animation: chap var(--dur, 8s) linear forwards; }
@keyframes chap { to { width: 100%; } }
.pd-caption { text-align: center; margin-top: 14px; font-size: 0.95rem; color: var(--ink-2); min-height: 1.6em; }
@media (max-width: 760px) {
  .pd { margin-top: 44px; }
  .pd-shell { padding: 6px; border-radius: 12px; }
  .pd-chapters button { font-size: 0.72rem; padding: 7px 10px 7px 8px; }
  .pd-chapters button span { display: none; }
}

/* Cursor */
.pd-cursor { position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 50; pointer-events: none; transition: transform .85s cubic-bezier(.45,.05,.2,1); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
.pd-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; background: rgba(25,97,237,0.35); opacity: 0; }
.pd-cursor.click::after { animation: pd-ripple .45s ease-out; }
@keyframes pd-ripple { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(1.5); } }

/* ---------- Twenty CRM (light) ---------- */
.tw { font: 13px/1.45 "Inter", -apple-system, sans-serif; color: #333; background: #fbfbfb; display: grid; grid-template-columns: 52px 250px minmax(0,1fr); grid-template-rows: 44px minmax(0,1fr); }
.tw * { box-sizing: border-box; }
.tw-rail { grid-row: 1 / 3; border-right: 1px solid #ebebeb; background: #f6f6f6; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
.tw-rail .ws { width: 26px; height: 26px; border-radius: 7px; background: #1961ed; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; margin-bottom: 10px; }
.tw-rail i { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: #999; }
.tw-rail i.on { background: #ebebeb; color: #333; }
.tw-rail svg { width: 15px; height: 15px; }
.tw-top { grid-column: 2 / 4; border-bottom: 1px solid #ebebeb; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 16px; color: #999; }
.tw-top b { color: #333; font-weight: 500; }
.tw-record { border-right: 1px solid #ebebeb; background: #fff; padding: 18px 16px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.tw-record .av { width: 34px; height: 34px; border-radius: 8px; background: #fde8d7; color: #c2410c; display: grid; place-items: center; font-weight: 700; margin-bottom: 10px; }
.tw-record h4 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #333; letter-spacing: -0.01em; line-height: 1.3; }
.tw-field { display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: center; gap: 6px; padding: 6px 4px; border-radius: 4px; min-height: 32px; }
.tw-field > span:first-child { color: #999; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; }
.tw-field > span:last-child { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tw-field .empty { color: #b3b3b3; }
.tw-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 2px; border-radius: 4px; background: #f1f1f1; }
.tw-chip i { width: 16px; height: 16px; border-radius: 3px; display: grid; place-items: center; font-size: 9px; font-style: normal; font-weight: 700; color: #fff; background: #6b7280; }
.tw-chip.person i { border-radius: 50%; background: #8b5cf6; }
.tw-stage { display: inline-block; padding: 1px 8px; border-radius: 4px; font-weight: 500; transition: background .4s, color .4s; }
.tw-stage.proposal { background: #e0f2fe; color: #0369a1; }
.tw-stage.customer { background: #dcfce7; color: #15803d; }
.flash-cell { animation: tw-flash 1.6s; }
@keyframes tw-flash { 0%, 30% { background: #fff7d6; } 100% { background: transparent; } }
.tw-main { display: flex; flex-direction: column; min-width: 0; background: #fff; overflow: hidden; }
.tw-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid #ebebeb; flex: none; }
.tw-tabs span { padding: 10px 10px; color: #999; display: flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tw-tabs span.on { color: #333; border-bottom-color: #333; font-weight: 500; }
.tw-tabs svg { width: 13px; height: 13px; }
.tw-body { position: relative; flex: 1; overflow: hidden; }
.tw-pane { position: absolute; inset: 0; padding: 16px 18px; display: none; }
.tw-pane.on { display: block; }
.tw-scroll { transition: transform .9s cubic-bezier(.45,.05,.2,1); }

/* Quote tab */
.qe-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fi { border: 1px solid #ebebeb; border-radius: 4px; padding: 5px 8px; min-height: 28px; background: #fff; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .2s, box-shadow .2s; }
.fi.focus { border-color: #1961ed; box-shadow: 0 0 0 2px rgba(25,97,237,0.15); }
.fi.ph { color: #b3b3b3; }
.fi.num { text-align: right; font-variant-numeric: tabular-nums; }
.fi.sel { display: flex; justify-content: space-between; gap: 6px; }
.fi.sel::after { content: "▾"; color: #999; font-size: 10px; }
.fi.area { white-space: normal; height: 46px; line-height: 1.4; }
.fi.locked { background: #fafafa; color: #666; }
.qe-name { flex: 1; font-weight: 500; }
.qe-num { color: #999; font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-weight: 500; font-size: 12px; white-space: nowrap; }
.tag.gray { background: #ebebeb; color: #666; }
.tag.blue { background: #dbe7ff; color: #1961ed; }
.tag.green { background: #dcf5e5; color: #1f8a4c; }
.pop { animation: pd-pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes pd-pop { 40% { transform: scale(1.2); } }
.qe-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #999; }
.qe-step { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid #ebebeb; color: #999; font-size: 12.5px; }
.qe-step b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 500; background: #f1f1f1; color: #999; }
.qe-step.on { border-color: #d6d6d6; background: #f1f1f1; color: #333; font-weight: 500; }
.qe-step.on b { background: #333; color: #fff; }
.qe-cols { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 16px; align-items: start; }
.qe-cols.review { grid-template-columns: 300px minmax(0,1fr); }
.qe-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qe-row { display: grid; grid-template-columns: minmax(0,1fr) 46px 78px 82px 22px; gap: 6px; align-items: center; }
.qe-th { font-size: 11.5px; color: #999; font-weight: 500; }
.qe-th.r { text-align: right; }
.qe-amt { text-align: right; font-variant-numeric: tabular-nums; color: #333; }
.qe-trash { color: #b3b3b3; display: grid; place-items: center; }
.qe-trash svg { width: 13px; height: 13px; }
.qe-rows { display: flex; flex-direction: column; gap: 6px; }
.qe-rows .qe-row { animation: pd-in .3s ease-out; }
@keyframes pd-in { from { opacity: 0; transform: translateY(-4px); } }
.qe-add { color: #666; display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; width: max-content; font-size: 12.5px; }
.qe-add.hover { background: #f1f1f1; }
.qe-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.qe-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #999; font-weight: 500; }
.qe-lbl .fi { font-size: 13px; font-weight: 400; }
.qe-sum { display: grid; grid-template-columns: auto 110px; gap: 3px 16px; justify-content: end; font-variant-numeric: tabular-nums; }
.qe-sum span:nth-child(odd) { color: #999; }
.qe-sum span:nth-child(even) { text-align: right; }
.qe-sum .tot { color: #333 !important; font-weight: 600; }
.qe-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.tbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 4px; font-size: 12.5px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; transition: transform .12s, box-shadow .2s, background .2s; }
.tbtn svg { width: 13px; height: 13px; }
.tbtn.solid { background: #1961ed; color: #fff; }
.tbtn.outline { border-color: #d6d6d6; color: #333; background: #fff; }
.tbtn.ghost { color: #666; }
.tbtn.press { transform: scale(0.94); box-shadow: 0 0 0 4px rgba(25,97,237,0.2); }
.muted { color: #999; }
.qe-preview-lbl { font-size: 11.5px; color: #999; font-weight: 500; margin-bottom: 6px; display: block; }
.qe-preview { border: 1px solid #ebebeb; border-radius: 6px; overflow: hidden; background: #f5f6f8; position: relative; }
.qe-preview .cq-mini { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 900px; }
.rv-box { border: 1px solid #ebebeb; border-radius: 6px; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 16px; font-variant-numeric: tabular-nums; }
.rv-box span:nth-child(odd) { color: #999; }
.rv-box span:nth-child(even) { text-align: right; }
.rv-box .new { animation: pd-in .4s; }
.rv-card { border: 1px solid #ebebeb; border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rv-card .lbl { font-size: 11.5px; color: #999; font-weight: 500; }
.rv-body { white-space: pre-wrap; height: auto; font-size: 12px; line-height: 1.45; color: #333; }
.rv-body .lnk { color: #1961ed; }
.rv-body .ph { color: #999; font-style: italic; }
.rv-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-foot { display: flex; justify-content: space-between; gap: 8px; }
.hide { display: none !important; }

.tw-modal { position: absolute; inset: 0; background: rgba(0,0,0,0.25); display: grid; place-items: center; z-index: 20; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.tw-modal.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.tw-modal > div { width: 360px; background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); transform: scale(0.96); transition: transform .25s; }
.tw-modal.on > div { transform: none; }
.tw-modal h5 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #333; }
.tw-modal p { margin: 0 0 16px; color: #666; font-size: 13px; }
.tw-modal .rv-btns { justify-content: flex-end; }
.tw-snack { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 12px); background: #fff; border: 1px solid #ebebeb; color: #333; padding: 8px 14px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 25; opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.tw-snack::before { content: "✓"; color: #1f8a4c; font-weight: 700; }
.tw-snack.on { opacity: 1; transform: translate(-50%, 0); }

.tl { display: flex; flex-direction: column; gap: 0; max-width: 560px; }
.tl-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid #f1f1f1; animation: pd-in .4s; }
.tl-item i { width: 24px; height: 24px; border-radius: 50%; background: #f1f1f1; display: grid; place-items: center; color: #666; }
.tl-item i svg { width: 12px; height: 12px; }
.tl-item.ok i { background: #dcf5e5; color: #1f8a4c; }
.tl-item b { font-weight: 500; color: #333; }
.tl-item small { display: block; color: #999; font-size: 12px; }
.tl-item time { color: #999; font-size: 12px; white-space: nowrap; }
.tl-head { color: #999; font-size: 12px; margin-bottom: 4px; }

/* ---------- Browser frame for the client page ---------- */
.br { display: flex; flex-direction: column; background: #f5f6f8; }
.br-bar { flex: none; height: 40px; background: #ececee; border-bottom: 1px solid #dcdce0; display: flex; align-items: center; gap: 12px; padding: 0 14px; font: 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.br-bar .dots i { background: #cfcfd4; }
.br-url { flex: 1; max-width: 520px; margin: 0 auto; background: #fff; border-radius: 6px; padding: 6px 12px; color: #555; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; }
.br-url::before { content: "🔒"; font-size: 10px; }
.br-page { flex: 1; position: relative; overflow: hidden; }

/* ---------- Client quote page (mirrors public-quote-page.ts STYLES) ---------- */
.cq { --page: #f5f6f8; --card: #fff; --text: #1a1a1a; --muted: #555; --faint: #888; --line: #eee; --soft: #f4f5f7; --foot: #fafbfc; --accent: #1961ed; --success: #1f8a4c;
  color: var(--text); font: 14.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 40px 16px; background: var(--page); text-align: left; letter-spacing: normal; }
.cq * { box-sizing: border-box; }
.cq p { color: inherit; }
.cq .toolbar, .cq .preview-banner { max-width: 860px; margin: 0 auto 12px; }
.cq .toolbar { display: flex; justify-content: flex-end; }
.cq .preview-banner { padding: 8px 12px; border-radius: 8px; border: 1px dashed #ccc; color: var(--muted); font-size: 13px; text-align: center; }
.cq .invoice-card { max-width: 860px; margin: 0 auto; background: var(--card); border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 48px 56px 40px; overflow-wrap: anywhere; }
.cq .invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
.cq .logo-fallback { display: flex; align-items: center; min-height: 64px; }
.cq .logo-text { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
.cq .title-area { text-align: right; flex-shrink: 0; }
.cq .title-area h1 { font-size: 56px; font-weight: 800; letter-spacing: -1.5px; margin: 0 0 8px; line-height: 1; color: var(--text); }
.cq .meta { font-size: 14px; color: var(--muted); }
.cq .meta .value, .cq .date-issued .value { font-weight: 600; color: #111; }
.cq .bill-to { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 40px; line-height: 1.7; }
.cq .bill-to h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; margin: 0 0 12px; text-transform: uppercase; color: var(--text); line-height: 1.5; }
.cq .bill-to p { margin: 0; display: flex; gap: 8px; }
.cq .bill-to strong { min-width: 68px; font-weight: 600; flex-shrink: 0; }
.cq .date-issued { align-self: flex-end; flex-shrink: 0; }
.cq .date-issued p { justify-content: flex-end; }
.cq .date-issued span:first-child { color: var(--muted); }
.cq .intro { margin-bottom: 28px; }
.cq .intro h2 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--text); letter-spacing: normal; line-height: 1.5; }
.cq .intro p { margin: 0; white-space: pre-wrap; color: #333; }
.cq .table-wrapper { margin-bottom: 32px; }
.cq .table-header, .cq .table-row { display: grid; grid-template-columns: minmax(0,1fr) 100px 120px 120px; gap: 8px; }
.cq .table-header { background: var(--soft); padding: 14px 20px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; border-radius: 8px; }
.cq .table-row { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cq .table-row:last-child { border-bottom: none; }
.cq .table-header span:nth-child(n+2), .cq .table-row span:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq .empty-row { padding: 40px 20px; text-align: center; color: var(--faint); }
.cq .totals { width: 280px; max-width: 100%; margin: 0 0 40px auto; font-variant-numeric: tabular-nums; }
.cq .totals-line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.cq .totals-line.total { background: var(--soft); margin-top: 8px; padding: 12px 16px; border-radius: 8px; font-weight: 700; font-size: 16px; }
.cq .payment { margin-bottom: 40px; line-height: 1.6; }
.cq .payment h3, .cq .terms h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: normal; line-height: 1.5; }
.cq .terms h3 { margin-bottom: 8px; }
.cq .payment-body p { margin: 0 0 4px; }
.cq .actions { display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cq .actions label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); flex: 1 1 220px; max-width: 320px; }
.cq .input { font: inherit; color: var(--text); background: var(--card); border: 1px solid #d6d6d6; border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 44px; transition: border-color .2s, box-shadow .2s; }
.cq .input.focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(25,97,237,0.15); }
.cq .input.disabled { opacity: 0.6; }
.cq .button { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 12px 24px; font-weight: 600; transition: transform .12s, box-shadow .2s; }
.cq .button.disabled { opacity: 0.5; }
.cq .button.press { transform: scale(0.95); box-shadow: 0 0 0 5px rgba(25,97,237,0.2); }
.cq .button.secondary { background: var(--card); color: var(--text); border: 1px solid #ddd; padding: 8px 16px; font-weight: 500; font-size: 14px; }
.cq .decline { margin: 0 0 32px; text-align: right; font-size: 13px; color: var(--muted); }
.cq .decline span { text-decoration: underline; }
.cq .notice { margin-bottom: 32px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--success); color: var(--success); text-align: center; font-weight: 600; animation: pd-in .5s; }
.cq .invoice-footer { display: flex; justify-content: space-between; gap: 40px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; background: var(--foot); margin: 0 -56px -40px; padding: 32px 56px 40px; border-radius: 0 0 16px 16px; }
.cq .terms ul { margin: 0; padding-left: 18px; }
.cq .seller-contact p { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
.cq .seller-contact .icon { font-size: 14px; width: 18px; flex-shrink: 0; text-align: center; }
.cq .credit { text-align: center; color: var(--faint); font-size: 12px; margin: 16px 0 0; }

/* Phone layout of the demo screen */
.narrow .tw { grid-template-columns: minmax(0,1fr); grid-template-rows: 40px auto minmax(0,1fr); }
.narrow .tw-rail { display: none; }
.narrow .tw-top { grid-column: 1; }
.narrow .tw-record { border-right: none; border-bottom: 1px solid #ebebeb; padding: 8px 14px; flex-direction: row; flex-wrap: wrap; gap: 0 14px; align-items: center; }
.narrow .tw-record .av, .narrow .tw-record h4, .narrow .tw-field.opt { display: none; }
.narrow .tw-field { grid-template-columns: auto auto; padding: 4px 0; min-height: 0; }
.narrow .tw-tabs span:not(.keep) { display: none; }
.narrow .qe-cols, .narrow .qe-cols.review { grid-template-columns: minmax(0,1fr); }
.narrow .qe-right { display: none; }
.narrow .qe-row { grid-template-columns: minmax(0,1fr) 34px 70px 76px 16px; }
.narrow .tw-modal > div { width: 300px; }
.narrow .cq { padding: 16px 12px; }
.narrow .cq .invoice-card { padding: 28px 20px 24px; }
.narrow .cq .invoice-header, .narrow .cq .bill-to, .narrow .cq .invoice-footer { flex-direction: column; }
.narrow .cq .title-area { text-align: left; }
.narrow .cq .title-area h1 { font-size: 40px; }
.narrow .cq .date-issued { align-self: flex-start; }
.narrow .cq .date-issued p { justify-content: flex-start; }
.narrow .cq .table-header, .narrow .cq .table-row { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr); row-gap: 4px; padding-left: 12px; padding-right: 12px; }
.narrow .cq .table-header span:first-child, .narrow .cq .table-row span:first-child { grid-column: 1 / -1; }
.narrow .cq .table-header span:nth-child(2), .narrow .cq .table-row span:nth-child(2) { text-align: left; }
.narrow .cq .table-header span:nth-child(2) { font-size: 0; }
.narrow .cq .table-header span:nth-child(2)::after { content: "QTY"; font-size: 12.5px; }
.narrow .cq .invoice-footer { gap: 20px; margin: 0 -20px -24px; padding: 24px 20px; }
.narrow .br-url { max-width: none; }
.narrow .br-bar .dots { display: none; }
.br-bar .dots { display: flex; gap: 6px; }
.br-bar .dots i { width: 10px; height: 10px; border-radius: 50%; }
.pd section, .pd header, .pd footer, .pd aside { padding: 0; position: static; }
.pd .tw-main { padding: 0; }
.pd .tw-record { padding: 18px 16px; }
.narrow .tw-record { padding: 8px 14px; }
.pd .cq .invoice-footer { padding: 32px 56px 40px; }
.narrow .cq .invoice-footer { padding: 24px 20px; }

/* Hero loop vs. full walkthrough */
.pd.pd-short { max-width: none; margin: 0; }
.pd-more { text-align: center; margin: 6px 0 0; font-size: 0.9rem; }
.pd-full { margin-top: 48px; }
.pd-full + .steps { margin-top: 48px; }