/* ============================================================
   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.
   ============================================================ */
/* 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:1200px;margin:0 auto}
.quote-card{display:grid;grid-template-columns:390px 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(--font-display);letter-spacing:0.02em;font-weight:600;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}
/* borderless helper link: flush with the question title's left edge
   (no pill padding), sitting 8px under it */
.q-help{display:inline-flex;align-items:center;gap:8px;margin-top:8px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink-2);align-self:flex-start;padding:0;border:0;border-radius:999px;transition:color .15s}
/* smaller badge than the title's ?, beige glyph on the forest disc */
.q-help .qmark{width:15px;height:15px;border-radius:50%;background:var(--forest);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:10px;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:500;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:600;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:500}
.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:600;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)}
}
/* <=768: the 16px top offset shared with the sell pages (the base 36px
   stays for desktop). The 560 block repeats top 16 in its shorthand so
   the two queries agree wherever both match. */
@media (max-width:768px){
  .quote-section{padding-top:16px}
  /* center the crumbs between header and wizard: 16px above (the section
     padding) and 16px below, overriding the shared 36px from main.css */
  .quote-section .crumbs{margin-bottom:16px}
}
@media (max-width:560px){
  .quote-section{padding:16px 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:92px}.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{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}
/* ============================================================
   Rail help modals (watch axes, 2026-08-26). The tinted aside is a
   FULL-HEIGHT panel on the modal's left edge — line art of the fastest
   check plus a one-line tip — with the header and the familiar
   intro/points/note stack in the right column. Modals without a `rail`
   keep the standard skeleton. Tokens from main.css.
   ============================================================ */
.modal.has-rail{max-width:640px}
.modal-rail{display:flex;align-items:stretch;flex:1;min-height:0}
.modal-rail-aside{flex:0 0 200px;background:var(--mint-soft);padding:24px 18px;overflow-y:auto}
.modal-rail-aside svg{display:block;width:100%;height:auto;max-width:160px;margin:0 auto}
.modal-rail-tip{margin:14px 2px 0;font-size:13.5px;line-height:1.55;color:var(--mint-ink)}
.modal-rail-main{flex:1;min-width:0;display:flex;flex-direction:column}
.modal.has-rail .modal-head{border-bottom:none;padding:22px 26px 2px}
.modal.has-rail .modal-body{padding:12px 26px 26px}

/* Swatch square beside a point's term (case materials, bands). The
   background arrives inline from QuoteCopy; the hairline border keeps
   pale swatches (white ceramic, polished steel) visible. Swatch rows
   replace the mint dot, so the dot's padding and marker go. */
.modal-list li.has-swatch{display:flex;gap:14px;align-items:center;padding-left:0}
.modal-list li.has-swatch::before{content:none}
.modal-swatch{flex:0 0 26px;width:26px;height:26px;border-radius:8px;border:1px solid rgba(14,42,34,.12)}
.modal-point-text{min-width:0}

/* Narrow screens: the panel becomes a banner across the top, art to
   the left of its own tip, so nothing scrolls sideways. */
@media (max-width:560px){
  .modal-rail{flex-direction:column}
  .modal-rail-aside{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 16px;overflow:visible}
  .modal-rail-aside svg{width:84px;flex:0 0 84px;margin:0}
  .modal-rail-tip{margin:0}
  .modal-rail-main{flex:1;min-height:0}
}