/* ============================================================
   quote-wizard.css  —  Swopsmart Quote Wizard (Stepper) page
   Page-specific styles only. Design tokens, the shared breadcrumb
   (.crumbs), and the full .btn button system come from main.css and
   are NOT redeclared here. Kept local because main.css lacks them:
     - 3 wizard-only tokens (--forest-mid, --font-num, --ease)
     - .btn-mint and .btn-back variants
     - the entire wizard UI (.quote-card, .aside, .a-options, modal,
       price pop, progress) which is unique to this page.
   The final-value animation was renamed .reveal -> .quote-value-reveal
   so it never collides with main.js's global scroll-reveal observer.
   ============================================================ */

:root{
  /* Wizard-only tokens (everything else inherited from main.css). */
  --forest-mid:#1a3d34;          /* btn-primary hover shade, used by .btn-back fallbacks */
  --font-num:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* quote amount figures */
  --ease:cubic-bezier(.4,0,.1,1);
}

/* ============================================================
   swopsmart — Quote Wizard (Stepper)  ·  self-contained
   Tokens + type mirror the swopsmart brand; in production these
   live in main.css and are not redeclared here.
   ============================================================ */
@font-face{font-family:'Neue Haas Display';src:url("7b14a60b-10ff-4888-95b5-2cdaaab6ede1") format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Display';src:url("225f9548-b780-4682-9eeb-23a089d55457") format('truetype');font-weight:500;font-style:normal;font-display:swap}
/* Document-level resets removed (Section 6 fix): this sheet was written
   for the standalone June demo and carried its own body padding + resets.
   Inside the real site those land ABOVE the header and fight main.css,
   which owns all document-level rules. Section spacing now lives on
   .quote-section below, matching the collection pages (36px top). */

/* buttons — match main.css: forest/cream primary, 600, radius 12 */
.btn-mint{background:var(--mint);color:var(--forest);box-shadow:0 8px 24px -8px rgba(0,200,150,.55)}

/* shell */
.quote-section{padding:36px 30px 80px;background:var(--bg)}
/* Desktop: the gap below the wizard belongs to .promise-section, which already
   pays --section-py (96px) on its top edge. The 80px bottom above is a leftover
   from the standalone June demo, where the wizard was the last block before the
   footer and had to fund its own trailing space; stacked under the promise
   section the two padding boxes add up to 176px of undivided cream — about twice
   every other section boundary on the site. Zeroing it here leaves one owner and
   one 96px gap. Scoped to >860px so it lands on the same breakpoint where
   .promise-section switches to its full --section-py; the ≤860px and ≤560px
   blocks further down already tighten both sides and are untouched. */
@media (min-width:861px){
  .quote-section{padding-bottom:0}
}
.quote-inner{max-width:1180px;margin:0 auto}
.quote-card{display:grid;grid-template-columns:380px 1fr;background:var(--bg-card);border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(14,42,34,0.04);border:1px solid var(--line)}

/* aside */
.aside{position:relative;background:var(--bg-card);color:var(--ink);padding:34px 30px;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line);border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.aside-stack{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;gap:22px}
.aside-head{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.aside-head .lead{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-ink)}
.aside-head .device{font-size:28px;font-weight:700;letter-spacing:0.02em;color:var(--forest);line-height:1.1}

/* product image (no container — sits directly on the panel) */
.aside-photo{display:flex;align-items:center;justify-content:center;padding:4px 0}
.device-tile{background:transparent;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center;
  max-width:230px;width:100%;box-shadow:none}
.device-tile img{max-height:180px;max-width:100%;width:auto;object-fit:contain}
.device-ph{width:152px;height:212px;border-radius:26px;
  background:repeating-linear-gradient(135deg,rgba(14,42,34,.05) 0 9px,rgba(14,42,34,.02) 9px 18px),#fff;
  border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;
  box-shadow:var(--shadow-sm);position:relative}
.device-ph::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:5px;background:rgba(14,42,34,.12)}
.device-ph span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);padding:0 0 16px;text-transform:uppercase}

/* aside answers — each row is a clickable, clearly-editable chip;
   auto/derived rows (.ans-static) share the look but aren't interactive */
.aside-answers{display:flex;flex-direction:column;gap:0}
.ans-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  position:relative;padding:10px 4px;border:0;border-radius:8px;background:none;cursor:pointer}
/* "Click to edit" tooltip — editable rows carry data-tip; .ans-static rows don't,
   so they never show one. Appears BELOW the row, anchored right near the value +
   pencil. Bubble + arrow, revealed on hover and keyboard focus. */
.ans-row[data-tip]::after{
  position:absolute;right:8px;top:40px;opacity:0;pointer-events:none;
  transition:opacity .28s ease;
  content:attr(data-tip);
  padding:5px 9px;border-radius:7px;background:var(--forest);color:#fff;
  font-size:12px;font-family:var(--display-font);letter-spacing:0.02em;font-weight:500;line-height:1;white-space:nowrap;
  box-shadow:0 4px 12px rgba(14,42,34,.22);z-index:5}
.ans-row + .ans-row{border-top:1px solid rgba(14,42,34,.07);
  border-top-color:color-mix(in srgb, var(--line) 55%, transparent)}
.ans-row:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media (hover:hover){
  .ans-row[data-tip]:hover::after{opacity:1}
}
.ans-row[data-tip]:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .ans-row[data-tip]::after{transition:opacity .28s ease}
}
/* static rows reserve the pencil's footprint so all values share one column */
.ans-row.ans-static{cursor:default;padding-right:42px}
.ans-main{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;flex:1 1 auto;min-width:0}
.ans-label{font-size:12px;font-weight:500;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ans-value{font-size:15px;font-weight:600;color:var(--forest);letter-spacing:-.01em;text-align:right}
/* bare pencil — no chip at rest; 28px circle becomes the hover disc */
.ans-edit{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;
  border-radius:50%;color:var(--forest);transition:background .18s,color .18s}
.ans-edit svg{display:block}
/* new-row entrance — .is-new is applied by summaryRows(); values mirror
   variant C in wizard/label-variants.html (printIn + printFlash) */
@keyframes ans-print-in{
  0%{opacity:0;transform:translateY(-9px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes ans-print-flash{
  0%,30%{background:#dff5ec}
  /* zero-alpha mint, not `transparent` — the keyword is rgba(0,0,0,0) and can
     interpolate through grey. no fill-mode: the flash must not pin a background. */
  100%{background:rgba(223,245,236,0)}
}
/* the inline animation-delay from summaryRowsHTML() is a single value, so it
   applies to both animations in this list */
.ans-row.is-new{animation:ans-print-in .4s var(--ease) both, ans-print-flash 1.1s var(--ease)}
.aside-empty{font-size:14px;color:var(--ink-3);padding:6px 0;line-height:1.55}
.a-dyn-wrap{display:flex;flex-direction:column;gap:16px}
.aside-dyn:empty{display:none}

/* promise */
.promise{margin-top:auto;display:flex;gap:13px;align-items:flex-start;background:#f7f5ef;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)}
.promise svg{flex:0 0 auto;width:30px;height:36px}
.promise h4{font-size:14px;font-weight:600;color:var(--forest);margin-bottom:3px}
.promise p{font-size:14px;color:var(--ink-2);line-height:1.5}


/* right pane */
.main{padding:40px 46px 38px;display:flex;flex-direction:column;min-height:560px;background:#f7f5ef;border-radius:0 var(--radius-lg) var(--radius-lg) 0;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.main.swapping{opacity:0;transform:translateY(10px)}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px;margin-bottom:12px}
/* Step title row: the (i) icon sits IMMEDIATELY after the title text, not
   pushed to the far edge — at 27px the title rarely fills the column, so a
   space-between icon floated alone in whitespace and read as unrelated to the
   heading. flex-start + a small gap ties it to the words it explains.
   The icon opens the step's infoModal ("how do I find this?"); the .q-help
   pill below keeps the separate eligibility warning. align-items:flex-start
   keeps the icon on the FIRST line when a title wraps to two. */
.q-title-row{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px}
.q-title{font-size:27px;font-weight:600;letter-spacing:-.02em;color:var(--forest);line-height:1.1}
/* 28px button on a 29.7px first line (27px x 1.1) — a 1px nudge centres it */
.q-title-info{flex:0 0 auto;margin-top:1px;width:28px;height:28px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;
  transition:border-color .15s,background .15s}
.q-title-info:hover{border-color:var(--forest);background:var(--mint-soft)}
.q-title-info:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.q-title-info .qmark{width:18px;height:18px;border-radius:50%;background:var(--forest);color:var(--mint);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-style:italic;font-family:Georgia,'Times New Roman',serif}
.q-help{display:inline-flex;align-items:center;gap:8px;margin-top:14px;white-space:nowrap;font-size:14px;font-weight:500;color:var(--ink-2);align-self:flex-start;padding:7px 14px 7px 9px;border:1px solid var(--line);border-radius:999px;transition:border-color .15s,color .15s}
.q-help .qmark{width:18px;height:18px;border-radius:50%;background:var(--forest);color:var(--mint);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-style:italic;font-family:Georgia,'Times New Roman',serif}

/* help modal */
/* z-index must clear .site-header (z-index:300 in main.css). 9999 is reserved for
   the skip link, so the modal sits between the two. */
.modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(14,42,34,.5);opacity:0;transition:opacity .2s var(--ease)}
.modal-overlay.show{opacity:1}
.modal{background:#fff;border-radius:20px;max-width:520px;width:100%;box-shadow:var(--shadow-lg);max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;transform:translateY(12px) scale(.98);transition:transform .22s var(--ease)}
.modal-overlay.show .modal{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 28px;border-bottom:1px solid var(--line)}
.modal-head h3{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:600;color:var(--forest);letter-spacing:-.01em}
.modal-i{width:24px;height:24px;border-radius:50%;background:var(--forest);color:var(--mint);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:13px;font-weight:700;font-style:italic;font-family:Georgia,'Times New Roman',serif}
.modal-x{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);flex:0 0 auto;transition:background .15s,color .15s}
.modal-body{padding:26px 28px 30px;overflow-y:auto}

/* ---- condition visual guide ------------------------------------------------ */
.modal.guide{max-width:820px}
.modal-head h3.guide-title{font-size:20px;font-weight:600;color:var(--forest);letter-spacing:-.01em;line-height:1.25}
.guide-body{display:grid;grid-template-columns:248px minmax(0,1fr);gap:22px;padding:22px 28px;overflow-y:auto}
.guide-artwrap{position:sticky;top:0;align-self:start}
.guide-art{background:#f7f5ef;border-radius:14px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--forest)}
.guide-art svg{width:100%;height:100%}
.guide-art .g-device{stroke-width:3.6}
.guide-art .g-ghost{opacity:.26}
.guide-art .g-mesh{opacity:.26;stroke-width:2.1}
.guide-art .g-led{opacity:.5;stroke-width:1.6}
.guide-go[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.guide-art .g-screen{opacity:.3;stroke-width:1.5}
.guide-art .g-wear{opacity:.5;stroke-width:1.4}
.guide-art .g-crack{stroke-width:1.9}
.guide-art .g-web{stroke-width:1.3;opacity:.75}
.guide-art .g-box{stroke-width:3.4}
.guide-art .g-seam,.guide-art .g-label{opacity:.4;stroke-width:1.5}
.guide-cap{margin-top:10px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.guide-list{min-width:0}
/* the list is .a-options — identical markup and styling to the wizard page, so the
   two stay in sync by construction rather than by matching values here */
.guide-list .a-options{background:#fff}
.guide-foot{display:flex;justify-content:flex-end;padding:18px 28px 24px;border-top:1px solid var(--line)}
@media (max-width:720px){
  .guide-body{grid-template-columns:1fr;gap:16px;padding:18px}
  .guide-artwrap{position:static;max-width:220px;margin:0 auto}
  .guide-foot{padding:16px 18px 18px}
}
/* Help-modal body hierarchy, three clear levels:
   intro (16px/400, muted) -> point label (16px/600, forest) -> detail (15.5px/400,
   muted). The intro was 500, competing with the labels for the same rank while
   sitting at the same size; dropping it to 400 makes the labels the only bold
   text in the body, so the list scans as four items rather than eight lines.
   Spacing follows the same hierarchy: 6px between a label and its own detail,
   22px between separate points — the intra-item gap must stay clearly smaller
   than the inter-item gap or the pairs stop reading as pairs. */
.modal-intro{font-size:16px;font-weight:400;color:var(--ink-2);line-height:1.55;margin-bottom:24px}
.modal-list{display:flex;flex-direction:column;gap:22px}
.modal-list li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-2);line-height:1.55}
/* dot centred on the LABEL's first line: (16px x 1.35 line-box / 2) - (7px / 2) */
.modal-list li::before{content:"";position:absolute;left:3px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.modal-list strong{display:block;color:var(--forest);font-weight:600;font-size:16px;line-height:1.35;margin-bottom:6px;letter-spacing:-.005em}
.modal-steps{list-style:none;counter-reset:mstep;display:flex;flex-direction:column;gap:16px}
.modal-steps li{counter-increment:mstep;position:relative;padding-left:40px;font-size:16px;color:var(--forest);font-weight:500;line-height:1.5;min-height:28px;display:flex;align-items:center}
.modal-steps li::before{content:counter(mstep);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--mint-soft);color:var(--mint-ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* The note is a different KIND of information from the checklist above it
   (a shipping requirement, not an inspection step), so it gets a rule rather
   than just more whitespace — otherwise it reads as a fifth bullet. */
.modal-note{font-size:15.5px;color:var(--ink-2);line-height:1.6;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.modal-prose{font-size:16px;color:var(--ink-2);line-height:1.65}
.modal-prose strong{color:var(--forest);font-weight:600}

.radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);flex:0 0 auto;position:relative;transition:border-color .15s}
.radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--forest);transform:scale(0);transition:transform .18s var(--ease)}
.is-selected .radio{border-color:var(--forest)}.is-selected .radio::after{transform:scale(1)}
.flag-dot{width:8px;height:8px;border-radius:50%;background:var(--flag);display:inline-block;flex:0 0 auto}

/* progress line */
.a-progress{height:5px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:28px}
.a-progress i{display:block;height:100%;width:0;background:var(--mint);border-radius:4px;transition:width .5s var(--ease)}

/* options */
.a-options{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.a-opt{border-top:1px solid var(--line)}.a-opt:first-child{border-top:none}
.a-opt-head{width:100%;display:flex;align-items:center;gap:14px;padding:14px 18px;text-align:left;transition:background .15s}
.a-opt-main{flex:1 1 auto;min-width:0}
.a-opt-name{font-size:16px;font-weight:600;color:var(--forest);display:flex;align-items:center;gap:9px;letter-spacing:-.005em}
.a-opt-blurb{font-size:14px;color:var(--ink-2);margin-top:2px}
.a-opt-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.a-delta{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--mint-ink)}
.a-delta.zero{color:var(--ink-3)}
.a-chev{color:var(--ink-3);transition:transform .25s var(--ease);display:inline-flex}
.a-opt.expanded .a-chev{transform:rotate(180deg)}
.a-opt.is-selected{background:var(--mint-soft)}
.a-detail{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.a-detail ul{padding:2px 18px 16px 53px}
.a-detail li{position:relative;padding:1px 0 1px 16px;font-size:14px;color:var(--ink-2);line-height:1.45}
.a-detail li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.a-detail li.lead{font-weight:600;color:var(--forest)}.a-detail li.lead::before{background:var(--mint)}

.a-actions{display:flex;gap:14px;margin-top:22px;position:sticky;bottom:0;z-index:7;
  padding:14px 0 4px;background:linear-gradient(to top,#f7f5ef 72%,rgba(247,245,239,0))}
.a-actions>*{flex:1 1 0}

/* final value screen */
.a-quote{display:flex;flex-direction:column}
.aq-valued{font-size:19px;color:var(--ink-2);text-align:center;margin-bottom:4px;font-weight:400}
.a-amount{font-family:var(--font-num);font-size:60px;font-weight:600;letter-spacing:-.03em;color:var(--forest);line-height:1;text-align:center;margin:0 auto 28px;font-feature-settings:'tnum' 1}
.a-amount .cur{font-size:.62em;vertical-align:baseline;margin-right:1px}
.aq-actions{display:flex;gap:14px;margin-bottom:34px}
.aq-actions>*{flex:1 1 0}
.aq-actions-reveal>.qty{flex:0 0 auto}
.aq-actions-reveal>.btn-primary{flex:1 1 auto}
.btn-back{background:rgba(14,42,34,.10);color:var(--forest)}
.qty{display:inline-flex;align-items:center;height:52px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(14,42,34,.10);overflow:hidden}
.qty button{width:46px;height:100%;display:inline-flex;align-items:center;justify-content:center;color:var(--forest);font-size:20px;font-weight:500;line-height:1;transition:background .15s,color .15s}
.qty button[disabled]{color:var(--ink-3);opacity:.45;cursor:not-allowed}
.qty .qty-num{min-width:34px;text-align:center;font-family:var(--font-num);font-size:16px;font-weight:600;color:var(--forest);font-feature-settings:'tnum' 1}
.aq-benefits{display:flex;flex-direction:column}
.aq-benefits li{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.aq-benefits li:first-child{border-top:none}
.bi{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--forest);color:var(--mint);display:flex;align-items:center;justify-content:center}
.bi svg{width:15px;height:15px}
.bt{font-size:16px;color:var(--ink-2);line-height:1.5}
.bt strong{color:var(--forest);font-weight:600}

/* value-reveal animation — transition + class trigger (robust: if the
   trigger never fires the base state is simply the visible end state) */
.a-quote.quote-value-reveal .aq-valued,
.a-quote.quote-value-reveal .a-amount,
.a-quote.quote-value-reveal .aq-actions,
.a-quote.quote-value-reveal .aq-benefits li{opacity:0}
.a-quote.quote-value-reveal .a-amount{transform:scale(.93);transform-origin:center}
.a-quote.quote-value-reveal .aq-actions,
.a-quote.quote-value-reveal .aq-benefits li{transform:translateY(14px)}
.a-quote.quote-value-reveal.in .aq-valued,
.a-quote.quote-value-reveal.in .a-amount,
.a-quote.quote-value-reveal.in .aq-actions,
.a-quote.quote-value-reveal.in .aq-benefits li{opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.a-quote.quote-value-reveal.in .aq-valued{transition-delay:0s}
.a-quote.quote-value-reveal.in .a-amount{transition-delay:.05s}
.a-quote.quote-value-reveal.in .aq-actions{transition-delay:.5s}
.a-quote.quote-value-reveal.in .aq-benefits li:nth-child(1){transition-delay:.6s}
.a-quote.quote-value-reveal.in .aq-benefits li:nth-child(2){transition-delay:.66s}
.a-quote.quote-value-reveal.in .aq-benefits li:nth-child(3){transition-delay:.72s}
.a-quote.quote-value-reveal.in .aq-benefits li:nth-child(4){transition-delay:.78s}
.a-quote.quote-value-reveal.in .aq-benefits li:nth-child(5){transition-delay:.84s}
/* hard safety net: guarantee the screen is fully visible regardless of
   whether the transition engine ran (e.g. background tab, reduced motion) */
.a-quote.settled .aq-valued,
.a-quote.settled .a-amount,
.a-quote.settled .aq-actions,
.a-quote.settled .aq-benefits li{opacity:1!important;transform:none!important}

@media (max-width:920px){
  .quote-card{grid-template-columns:1fr}
  .aside{order:-1;flex-direction:row;flex-wrap:wrap;gap:14px;padding:14px 20px;border-right:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .aside-stack{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;height:auto;width:100%}
  .aside-head{flex:1 1 0;min-width:0;align-items:center;text-align:center;order:2;gap:2px}
  .aside-head .device{font-size:28px;line-height:1.1}
  .aside-photo{order:1;flex:0 0 auto}.device-tile{max-width:120px;padding:6px}.device-tile img{max-height:112px}.device-ph{width:94px;height:130px}
  .aside-dyn{flex:1 1 100%;order:4}.promise{margin-top:0;flex:1 1 100%;order:5}
  .main{padding:30px 26px;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
}
@media (max-width:560px){
  .quote-section{padding:22px 14px 48px}
  .main{padding:24px 18px}
  .q-title{font-size:26px}.a-amount{font-size:44px}
  /* title drops to 26px then 23px below; shrink the icon to match so it stays
     optically tied to the heading rather than looming beside it */
  .q-title-row{gap:9px}
  .q-title-info{width:26px;height:26px;margin-top:1px}
  .q-title-info .qmark{width:17px;height:17px;font-size:11.5px}
  .promise{display:none}
  .aside{padding:12px 16px}
  .aside-stack{gap:12px}
  .aside-head .lead{font-size:11.5px}
  .aside-head .device{font-size:25px;line-height:1.12}
  .q-title{font-size:23px}
  .device-tile{max-width:96px;padding:4px}.device-tile img{max-height:68px}.device-ph{width:76px;height:106px}.device-ph::before{width:40px;top:11px}
}
/* hover affordances — only on devices with a true pointer, so touch taps
   don't leave a sticky cream highlight behind */
@media (hover:hover){
    .btn-mint:hover{background:#00b386;transform:translateY(-1px)}
    .btn-back:hover{background:rgba(14,42,34,.16)}
  .qty button:not([disabled]):hover{background:var(--mint-soft)}
  .crumbs a:hover{color:var(--forest)}
  .ans-row:not(.ans-static):hover .ans-edit{background:rgba(0,200,150,.18);
    background:color-mix(in srgb, var(--mint) 18%, transparent)}
  .q-help:hover{border-color:var(--line-strong);color:var(--forest)}
  .modal-x:hover{background:rgba(14,42,34,.06);color:var(--forest)}
  .a-opt-head:hover{background:var(--bg-soft)}
  .a-opt.is-selected .a-opt-head:hover{background:var(--mint-soft)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ============================================================
   Fair Evaluation Promise — section below the wizard.
   Baked into this page (not a shared partial). Reuses main.css's
   .section-eyebrow base (only the dark-panel mint override is kept
   here, scoped to .promise-section-panel). Vertical spacing uses
   the shared --section-py rhythm; a top border separates it from
   the wizard card above.
   ============================================================ */

  .promise-section { padding: var(--section-py) 28px; }
  /* Content is statically visible — no entrance animation, so it can
     never get stuck in a hidden pre-animation state. */
  .promise-section-grid {
    max-width: 1140px; margin: 0 auto;
    display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 36px; align-items: stretch;
  }

  /* ---- Forest brand panel ---- */
  .promise-section-panel {
    background: var(--forest); color: #f2efe8;
    border-radius: var(--radius-lg);
    padding: 48px 42px; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
  }
  .promise-section-panel::after {
    content: ""; position: absolute; right: -90px; bottom: -90px;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,200,150,0.18), transparent 70%);
    pointer-events: none;
  }
  .promise-section-panel .section-eyebrow { color: var(--mint); justify-content: flex-start; }
  .promise-section-panel .section-eyebrow::before { background: var(--mint); }
  .promise-section-panel h2 {
    font-size: clamp(32px, 3.2vw, 46px); line-height: 1.0;
    letter-spacing: -0.03em; font-weight: 600; color: #f2efe8; margin-top: 16px;
  }
  .promise-section-panel .lede {
    font-size: 16.5px; line-height: 1.55; color: rgba(242,239,232,0.72);
    margin-top: 18px; max-width: 34ch;
  }
  .promise-section-chip {
    margin-top: auto; padding-top: 32px;
    display: inline-flex; align-items: center; gap: 10px;
    width: fit-content;
  }
  .promise-section-chip .pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border: 1px solid rgba(0,200,150,0.35); border-radius: 999px;
    background: rgba(0,200,150,0.08);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--mint);
  }
  .promise-section-chip .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
    box-shadow: 0 0 0 3px rgba(0,200,150,0.2); animation: pulseDot 2s ease-in-out infinite;
  }

  /* ---- Promise rows ---- */
  .promise-section-list { display: flex; flex-direction: column; justify-content: center; }
  .promise-section-row {
    display: flex; gap: 22px; align-items: flex-start;
    padding: 28px 8px; border-bottom: 1px solid var(--line);
    transition: padding-left 0.25s cubic-bezier(0.16,1,0.3,1);
  }
  .promise-section-row:last-child { border-bottom: none; }
  .promise-section-row:hover { padding-left: 14px; }
  .promise-section-ricon {
    width: 58px; height: 58px; border-radius: 16px;
    background: var(--mint-soft); color: var(--mint-ink);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.25s, color 0.25s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .promise-section-ricon svg { width: 27px; height: 27px; }
  .promise-section-row:hover .promise-section-ricon { background: var(--forest); color: var(--mint); transform: scale(1.05); }
  .promise-section-rtext h3 {
    font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--forest); margin-bottom: 7px;
  }
  .promise-section-rtext p {
    font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; text-wrap: pretty;
  }

  @media (max-width: 860px) {
    .promise-section { padding-top: 24px; }
    .promise-section-grid { grid-template-columns: 1fr; gap: 20px; max-width: 600px; }
    .promise-section-panel { padding: 40px 32px; }
    .promise-section-chip { padding-top: 26px; }
  }
  @media (max-width: 480px) {
    .promise-section-row { gap: 16px; padding: 22px 4px; }
    .promise-section-ricon { width: 50px; height: 50px; border-radius: 14px; }
    .promise-section-ricon svg { width: 24px; height: 24px; }
  }
/* coupon strip on the price screen */
.qw-coupon-strip{margin-bottom:28px;font-size:14px}
.qw-coupon-strip .coupon-strip-icon{width:34px;height:34px}

/* Server-rendered product H1. Sits above .quote-card (which is a 2-col grid
   and can't host it) and is never rewritten by the wizard, so JS-rendering
   crawlers and the a11y tree keep a stable product heading. Visually hidden
   because the aside already shows the device name — the design is unchanged.
   Standard clip pattern: readable by AT, invisible on screen, NOT
   display:none (which would remove it from the a11y tree entirely). */
.qw-product-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Programmatic focus targets: focusHeading() moves keyboard/SR focus to the
   step heading (or the quote label) after each transition. Suppress the ring
   only for that programmatic case — :focus-visible still shows for anyone
   who reaches them by keyboard. */
#q-step-title:focus:not(:focus-visible),.aq-valued:focus:not(:focus-visible){outline:none}

/* No-JS fallback inside the wizard shell. */
.qw-noscript{padding:8px 0;color:var(--ink-2);font-size:16px;line-height:1.6;display:flex;flex-direction:column;gap:12px}
.qw-noscript strong{color:var(--forest);font-size:20px;font-weight:600}
.qw-noscript a{color:var(--forest);text-decoration:underline}