/* CIC quote page: simpler processor pick + "what you have" card (Brent 11-05, Scott approved). Theme variables only. */

/* processor families: a quiet label above each group (the site's small-caps label style) */
.mq-fam{margin:0;padding:14px 24px 4px;font-family:var(--font-display);font-weight:700;font-size:.82rem;
  color:var(--muted);background:var(--paper);border-top:1px solid var(--line)}
/* grouped lists run long (ThinkPad T14 Gen 3: 16 chips): a tighter row inside a family */
.mq-fstep[data-step=cpu] .mq-fam ~ .mq-opt{padding-top:11px;padding-bottom:11px}
.mq-opts > legend + .mq-fam{border-top:0}
/* most common: the site's tag pill (.plat-tag look) */
.mq-pop{display:inline-block;margin-left:10px;vertical-align:2px;width:auto;background:var(--orange-tint);color:var(--brown);
  font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.mq-fhint{display:block;margin-top:4px;font-size:.84rem;color:var(--olive-soft)}

/* built-in graphics only: no graphics row, no graphics step (the theme picks it on its own) */
.mq-grid.cic-igpu-only .mq-fstep[data-step=gpu]{display:none}
.mq-grid.cic-igpu-only .mq-sel-row:has(#sel_gpu){display:none}

/* "what you have" card: every row reads label left, value right; memory / storage / condition keep - / + as light
   outline buttons that only fill on hover, so the value is what you see first */
.mq-sel .mq-step-btn{background:transparent;border:1px solid var(--line);color:var(--muted)}
.mq-sel .mq-step-btn:hover,.mq-sel .mq-step-btn:focus-visible{background:var(--orange-tint);border-color:var(--orange-tint);color:var(--orange)}
.mq-sel .mq-step-btn:disabled{opacity:.35;cursor:default;background:transparent;border-color:var(--line);color:var(--muted)}
.mq-sel .mq-step-val{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--olive);min-width:64px;text-align:center}

@media (max-width:760px){
  .mq-fam{padding:12px 16px 4px}
  .mq-fstep[data-step=cpu] .mq-fam ~ .mq-opt{padding-top:10px;padding-bottom:10px}
  .mq-pop{margin-left:8px}
  .mq-sel .mq-step-val{min-width:56px}
}

/* 11-06 round 2 (Brent): one row per family + "Other ..." fold, a change's tag under the value (no "Standard" word, ? kept) */
.mq-opts > .mq-fam-start ~ .mq-fam-start{border-top:6px solid var(--wash)}
.mq-more{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0;padding:10px 24px 12px 58px;
  background:var(--paper);border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;font:inherit}
.mq-more-t{font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--blue)}
.mq-more-t::after{content:" \25BE";font-size:.8em}
.mq-more-n{font-size:.8rem;color:var(--muted)}
.mq-more:hover .mq-more-t,.mq-more:focus-visible .mq-more-t{text-decoration:underline}
.mq-more:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

.mq-valstack{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;line-height:1.15}
.mq-valstack .mq-step-val{min-width:0}
.mq-valstack .mq-step-slot{display:block;line-height:1}
.mq-valstack .mq-step-tag{padding:0;background:none;font-size:.62rem;letter-spacing:.05em}
@media (max-width:760px){
  .mq-more{padding:9px 16px 11px 46px}
  .mq-valstack{min-width:60px}
}

/* 11-06 round 3 (Brent + Gemini review): the model page as a landing page for Google model searches */
.cic-landing .cic-quote-section{padding-top:24px}
.mq-sticky .cic-next{white-space:nowrap}
@media (max-width:760px){
  .cic-landing .cic-quote-section{padding-top:14px}
  .cic-landing .mq-grid--flow{display:flex;flex-direction:column}
  .cic-landing .mq-grid--flow .mq-flow{order:-1}
}
.mq-sticky .btn[hidden]{display:none!important}
@media (max-width:760px){
  .cic-landing .breadcrumb .bc-current{display:none}            /* the heading right above names the model */
  .cic-landing .breadcrumb .wrap > span:nth-last-child(2){display:none}
}

/* 11-06 round 4 (Brent): the bottom flow */
.cic-noob{margin:10px 0 0;text-align:center;font-size:.86rem;color:var(--olive-soft)}
.cic-h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,3vw,1.9rem);color:var(--olive);margin:0 0 18px;text-wrap:balance}
.cic-next-steps,.cic-worth,.cic-reviews{margin:0 0 44px}
.cic-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cic-step{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.cic-step.is-here{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint)}
.cic-step-ic{width:42px;height:42px;border-radius:50%;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center;flex:none}
.cic-step-ic svg{width:22px;height:22px}
.cic-step h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--olive)}
.cic-step p{margin:6px 0 0;font-size:.9rem;color:var(--olive-soft);line-height:1.45}
.cic-here{display:inline-block;margin-left:6px;vertical-align:2px;background:var(--orange);color:#fff;font-size:.62rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:999px}
.cic-worth{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.cic-worth .cic-h2{margin-bottom:6px}
.cic-worth-note{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.cic-worth-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.cic-worth-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--olive)}
.cic-worth-list b{font-family:var(--font-display);color:#2E7D50;white-space:nowrap;font-variant-numeric:tabular-nums}
.cic-worth-more{margin:10px 0 0;color:var(--muted);font-size:.86rem}
.cic-worth-go{margin-top:16px}
.cic-reviews .section-head{margin-bottom:18px}
.guarantee-band .hiw-strip[hidden]{display:none}
.cic-q h3{cursor:pointer}
@media (max-width:760px){
  .cic-steps{grid-template-columns:1fr;gap:0;position:relative}
  .cic-step{flex-direction:row;align-items:flex-start;border:0;border-radius:0;background:none;padding:0 0 18px;position:relative}
  .cic-step:not(:last-child)::after{content:"";position:absolute;left:20px;top:44px;bottom:2px;width:2px;background:var(--line)}
  .cic-step.is-here{box-shadow:none}
  .cic-worth{padding:18px}
  .cic-worth-list{grid-template-columns:1fr}
  .cic-worth-go{width:100%}
  .cic-next-steps,.cic-worth,.cic-reviews{margin-bottom:32px}
}
.cic-landing .cart-reassure{display:none}                      /* said by the heading line and the steps below */
.cic-worth-pop{font-style:normal;display:inline-block;margin-left:6px;vertical-align:1px;background:var(--orange-tint);color:var(--brown);
  font-family:var(--font-display);font-weight:700;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
/* value by generation: thin bars on a white card, the seller's generation in the site's dark orange, values in text ink */
.cic-gen{margin:0 0 44px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.cic-gen .cic-h2{margin-bottom:6px}
.cic-gen-sub{margin:0 0 18px;color:var(--olive-soft);font-size:.95rem}
.cic-gen-plot{display:flex;align-items:flex-end;gap:2px;height:220px;padding-top:34px;border-bottom:1px solid var(--line)}
.cic-gen-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;outline:none}
.cic-gen-bar{width:min(46px,62%);background:var(--olive-soft);border-radius:4px 4px 0 0;opacity:.55;transition:opacity .15s}
.cic-gen-col.is-yours .cic-gen-bar{background:var(--orange-dark);opacity:1}
.cic-gen-col:hover .cic-gen-bar,.cic-gen-col:focus-visible .cic-gen-bar{opacity:1}
.cic-gen-col:focus-visible{box-shadow:0 0 0 2px var(--orange);border-radius:6px}
.cic-gen-val{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--olive);margin-bottom:6px;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:center;line-height:1.2}
.cic-gen-val i{font-style:normal;background:var(--orange-tint);color:var(--brown);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;margin-bottom:4px}
.cic-gen-lab{position:absolute;top:100%;margin-top:8px;font-size:.82rem;color:var(--olive);font-weight:600;text-align:center;white-space:nowrap;line-height:1.2}
.cic-gen-lab small{display:block;font-size:.72rem;color:var(--muted);font-weight:400}
.cic-gen-col.is-yours .cic-gen-lab{color:var(--orange-dark)}
.cic-gen-note{margin:46px 0 0;font-size:.8rem;color:var(--muted)}
.cic-gen{position:relative}
.cic-sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:760px){
  .cic-reviews .reviews-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;
    margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)))}
  .cic-reviews .review{flex:0 0 82%;scroll-snap-align:start}
  .cic-gen{padding:18px;margin-bottom:32px}
  .cic-gen-plot{height:190px}
  .cic-gen-val{font-size:.74rem}
  .cic-gen-lab{font-size:.74rem}
}

/* 11-06 round 5 (Brent): the two main cards say what they are and what to do; one ink on the left card */
.cic-flow-head{display:flex;flex-direction:column;gap:2px;padding:16px 24px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.cic-flow-head b{font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--olive)}
.cic-flow-head span{font-size:.86rem;color:var(--muted)}
.cic-quote-line{margin:8px 0 0;font-size:.9rem;color:var(--olive-soft)}
.cic-landing .mq-sel-val.is-placeholder{color:var(--olive)}
.cic-landing .mq-sel-val.is-placeholder::after{content:" \2192";color:var(--orange)}
.cic-landing .mq-sel-row.is-active{background:var(--orange-tint);box-shadow:inset 3px 0 0 var(--orange)}
.cic-gen-sub b{color:var(--olive)}
@media (max-width:760px){
  .cic-flow-head{padding:14px 16px 12px}
  .cic-landing .mq-sel-val.is-placeholder::after{content:" \2191"}
}

/* 11-06 round 6 (Brent + Gemini: cleaner): instructions only on the right card; the left card is the laptop and its price */
.cic-landing .mq-sel-val.is-placeholder::after{content:none}
@media (max-width:760px){ .cic-landing .mq-sel-val.is-placeholder::after{content:none} }
.cic-quote-line[hidden]{display:none}

/* 11-06 v8 (Brent): one place to act (right card), one place to look (left receipt) */
.cic-v8 .mq-sel .mq-cond-row .mq-step-btn,.cic-v8 .mq-sel .mq-cond-row .mq-help{display:none}
.cic-v8 .mq-sel .mq-cond-row:not(.is-picked) .mq-step-ctrl{display:none}
.cic-v8 .mq-sel .mq-cond-row.is-picked .cic-np{display:none}
.cic-v8 .mq-sel .mq-cond-row .mq-step-ctrl{justify-content:flex-end}
.cic-v8 .mq-sel .cic-ro .mq-sel-val{color:var(--olive)}
.cic-v8 .cic-tap{cursor:pointer;transition:background .15s}
.cic-v8 .cic-tap:hover{background:var(--wash)}
.cic-v8 .cic-tap:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.cic-ms{border-top:1px solid var(--line)}
.cic-ms-head{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px 14px;width:100%;margin:0;padding:16px 24px;
  background:var(--paper);border:0;text-align:left;cursor:pointer;font:inherit;border-radius:0 0 var(--radius) var(--radius)}
.cic-ms.is-open .cic-ms-head{border-radius:0}
.cic-ms-k{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--olive)}
.cic-ms-v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.cic-ms-v b{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--olive)}
.cic-ms-v small{font-size:.72rem;color:var(--muted)}
.cic-ms-v small.is-changed{color:#2E7D50;font-weight:700}
.cic-ms-change{font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--blue)}
.cic-ms-head:hover .cic-ms-change,.cic-ms-head:focus-visible .cic-ms-change{text-decoration:underline}
.cic-ms-head:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.cic-ms.is-open .cic-ms-change{color:var(--muted)}
.cic-ms-body{border-top:1px solid var(--line);background:var(--paper);border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.cic-ms-body .mq-sel-row:first-child{border-top:0}
@media (max-width:760px){
  .cic-ms-head{padding:14px 16px}
}
.cic-v8 .mq-sel .mq-cond-row .mq-valstack{align-items:flex-end;min-width:0}
.cic-v8 .mq-sel .mq-cond-row .mq-step-ctrl{gap:0}

/* 11-06 (Brent): "Step 1 of 3" inside the open step instead of a separate card header */
.cic-flow-head{display:none}
.cic-stepof{display:none;font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark);margin-bottom:2px}
.mq-fstep.is-open .cic-stepof{display:block}

/* 11-06 (Brent): small photo beside the model name and price; a thumbnail by the heading on phones */
.mq-head.cic-head-photo{display:flex;align-items:center;gap:18px;text-align:left}
.cic-head-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.cic-head-text .offer-val{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.mq-photo.cic-photo-sm{flex:0 0 110px;width:110px;padding:0;margin:0;border:0;background:none;min-height:0}
.mq-photo.cic-photo-sm img{width:110px;height:auto;max-height:90px;object-fit:contain;display:block}
@media (max-width:760px){
  .mq-photo.cic-photo-sm{flex-basis:72px;width:72px}
  .mq-photo.cic-photo-sm img{width:72px;max-height:60px}
  .mq-head.cic-head-photo{gap:12px}
}

@media (min-width:761px){.cic-landing .mq-grid--flow{align-items:start}.cic-landing .mq-grid--flow>.mq-quote{align-self:start}}

/* 10. v9 (Brent 11-06): a finished step keeps its number (green circle, number instead of a check); a graphics step the
   processor filled says so and has no Change; memory + storage - / + in the left card, small, quiet, one ink */
.cic-v9 .mq-fstep.is-done .mq-num-n{display:block}
.cic-v9 .mq-fstep.is-done .mq-num-ok{display:none}
.cic-autonote{display:none}
.cic-v9 .mq-fstep.cic-auto.is-done .cic-autonote{display:block;font-size:.8rem;color:var(--muted);margin-top:1px}
.cic-v9 .mq-fstep.cic-auto.is-done .mq-fchange{visibility:hidden}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-btn,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-btn{flex-basis:22px;width:22px;height:22px;background:transparent;border:1px solid var(--line);color:var(--muted)}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-btn svg,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-btn svg{width:11px;height:11px}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-btn:hover,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-btn:hover,
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-btn:focus-visible,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-btn:focus-visible{background:var(--wash);border-color:var(--muted);color:var(--olive)}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-btn:disabled,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-btn:disabled{opacity:.3;background:transparent;border-color:var(--line);color:var(--muted)}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-ctrl,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-ctrl{gap:6px}
.cic-v9 .mq-sel .mq-cond-row .mq-step-val{text-align:right}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-valstack .mq-step-slot,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-valstack .mq-step-slot{text-align:center}
/* 11. v9: memory + storage = "16 GB · Most common" on one line, no ? (techboy knows where to look); off the default the
   same note shows the price change ("32 GB · +$20"). The theme's tag slot is hidden here; .cic-note carries the text. */
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-help,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-help,
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-slot,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-slot{display:none}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-valstack,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-valstack{display:inline-flex;flex-direction:row;align-items:baseline;gap:5px;white-space:nowrap;min-width:0;width:auto;flex:0 1 auto}
.cic-v9 .mq-sel .mq-step[data-step=ram] .mq-step-val,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-step-val{min-width:0;width:auto}
.cic-note{font-size:.78rem;font-weight:500;color:var(--muted)}
.cic-note::before{content:"· "}
.cic-note.is-up{color:#2E7D50;font-weight:700}
/* small phones: the price beside the photo fits the card (it ran 5 px past it at 360 px), and under 350 px the
   memory / storage note sits cleanly under the size instead of beside it */
@media (max-width:400px){ .mq-head.cic-head-photo .cic-head-text .offer-val{font-size:1.75rem} }
@media (max-width:350px){
  .cic-v9 .mq-sel .mq-step[data-step=ram] .mq-valstack,.cic-v9 .mq-sel .mq-step[data-step=disk] .mq-valstack{flex-direction:column;align-items:center;gap:0}
  .cic-note::before{content:none}
}
.cic-note:empty{display:none}   /* Brent 11-06: no "Most common" on the left card; the note shows only a price change */
/* 13. condition picked by a tap (Brent 11-06): until then the template's preselected Flawless looks unpicked */
.cic-cond-wait .cic-cond-opt.is-selected{background:transparent;border-left-color:transparent}
.cic-cond-wait .cic-cond-opt.is-selected .mq-radio{border-color:var(--line);background:#fff}
.cic-cond-wait .cic-cond-opt.is-selected .mq-radio::after{content:none}
.cic-cond-wait .cic-cond-opt.is-selected .mq-opt-name{color:inherit}
.cic-cond-wait .cic-cond-opt.is-selected .mq-pill{background:transparent;border-color:var(--line);color:inherit}
.mq-fstep.is-done .mq-fhint{display:none}   /* the "Not sure?" hint belongs to the open question, not the folded answer */
/* 14. v10 two steps (Brent 11-06): the graphics question lives inside step 1; it never shows as its own numbered row */
.cic-v10 .mq-fstep[data-step=gpu].is-locked,.cic-v10 .mq-fstep[data-step=gpu].is-done{display:none}
.cic-v10 .mq-fstep[data-step=gpu] .mq-num{visibility:hidden}

.cic-v10 .mq-fstep[data-step=gpu].is-open{border-top:0}
.cic-v10 .mq-fstep[data-step=gpu].is-open .mq-fhead{padding-top:6px}
.cic-fsum-gpu{font:inherit;color:inherit}
.cic-fsum-gpu{display:none}
.cic-v10 .mq-fstep[data-step=cpu].is-done #sum_cpu{display:none}
.cic-v10 .mq-fstep[data-step=cpu].is-done .cic-fsum-gpu{display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--olive)}
/* v10: one quiet "Other processors (N)" row at the end of the list (Brent 11-06: the blue per-family rows pulled the eye
   away from the most common chip) */
.mq-more[hidden]{display:none!important}
/* 15. v11 one card (Brent 11-06): the receipt card is the whole quote; the step cards stay in the page, off screen */
.cic-v11 .mq-flow{position:fixed!important;left:-10000px!important;top:120px!important;width:420px!important;visibility:hidden!important;pointer-events:none!important}
.cic-v11 .mq-grid--flow{display:block!important;max-width:620px;margin-left:auto;margin-right:auto}
.cic-v11 .mq-quote{width:100%}
.cic-chg{flex:none;margin-left:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--font-display);font-weight:600;font-size:.78rem;line-height:1;padding:5px 11px;border-radius:999px;cursor:pointer}
.cic-chg:hover,.cic-chg:focus-visible{border-color:var(--muted);color:var(--olive);background:var(--wash)}
.cic-chg[hidden]{display:none!important}
.mq-sel-row.cic-open .cic-chg{background:var(--olive);border-color:var(--olive);color:#fff}
.cic-v11 .mq-sel-row .mq-sel-val{margin-left:auto;text-align:right}
.cic-panel{border-top:1px solid var(--line);background:#fff;padding:2px 0 6px}
.cic-panel[hidden]{display:none!important}
.cic-panel-help{margin:10px 24px 4px;font-size:.82rem;color:var(--muted)}
.cic-panel .mq-opts{margin:0;padding:0;border:0}
.cic-panel .mq-opt{padding-left:24px;padding-right:24px}
@media (max-width:760px){ .cic-panel-help{margin:10px 16px 4px} .cic-panel .mq-opt{padding-left:16px;padding-right:16px} .cic-chg{margin-left:8px;padding:5px 9px} }
.cic-panel-help{margin-bottom:16px}   /* room for the +5% BONUS tag that sits over the first option */
/* v11 (Brent 11-06): the default processor wears its Most common bubble; desktop gets a wider card and a bigger photo */
.cic-guess{flex:none;margin-left:8px!important}
.cic-guess[hidden]{display:none!important}
@media (min-width:761px){
  .cic-v11 .mq-grid--flow{max-width:780px}
  .cic-v11 .mq-photo.cic-photo-sm{flex-basis:210px;width:210px}
  .cic-v11 .mq-photo.cic-photo-sm img{width:210px;max-height:160px}
  .cic-v11 .mq-head.cic-head-photo{gap:28px}
}
@media (max-width:760px){
  .cic-v11 .mq-photo.cic-photo-sm{flex-basis:96px;width:96px}
  .cic-v11 .mq-photo.cic-photo-sm img{width:96px;max-height:80px}
}
.cic-v11 .cic-row-tap{cursor:pointer}
/* v11 demo: the card is hidden from the first paint until its defaults are in (no visible fill-in on load); it fades
   in only on the way out of hiding */
@keyframes cicShow{to{opacity:1}}
.mq-grid--flow:not([data-onecard]) .mq-quote{opacity:0;transition:none;animation:cicShow .2s 3s forwards}   /* shown anyway after 3 s if the script fails */
.mq-grid--flow:not([data-onecard]) .mq-flow{opacity:0}   /* the steps card moves into the one card: never flashes before that */
.mq-grid--flow[data-onecard] .mq-quote{opacity:1;transition:opacity .2s ease}

/* v12 (Brent 11-06: the common items all labeled and looking the same): every row is one grid, so the value, the Most
   common bubble and the control each sit in the same place on every row. The theme's stepper wrappers dissolve into the
   grid (display:contents); its buttons and output stay where its script expects them in the DOM. */
body.cic-v11 .mq-sel > .mq-sel-row{display:grid;grid-template-columns:minmax(0,1fr) auto 134px 44px 24px;column-gap:0;align-items:center}
body.cic-v11 .mq-sel > .mq-sel-row > .mq-step-ctrl{display:contents}
body.cic-v11 .mq-sel > .mq-sel-row .mq-valstack{display:contents!important}   /* v9's memory + storage rule is more specific */
body.cic-v11 .mq-sel > .mq-sel-row .cic-note::before{content:none}
body.cic-v11 .mq-sel > .mq-sel-row .mq-step-slot{display:none}
body.cic-v11 .mq-sel > .mq-sel-row > .mq-sel-label{grid-column:1;grid-row:1;min-width:0}
body.cic-v11 .mq-sel > .mq-sel-row .mq-sel-val,body.cic-v11 .mq-sel > .mq-sel-row .mq-step-val{grid-column:2;grid-row:1;justify-self:end;min-width:0;text-align:right;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.25;color:var(--olive)}
body.cic-v11 .mq-sel > .mq-sel-row .mq-pop.cic-guess,body.cic-v11 .mq-sel > .mq-sel-row .cic-note{grid-column:3;grid-row:1;justify-self:start;margin:0 0 0 14px!important}
body.cic-v11 .mq-sel > .mq-sel-row .cic-chg{grid-column:4 / span 2;grid-row:1;justify-self:end;margin-left:0}
body.cic-v11 .mq-sel > .mq-sel-row .mq-step-btn[data-dir="-1"]{grid-column:4;grid-row:1;justify-self:end;margin-right:6px}
body.cic-v11 .mq-sel > .mq-sel-row .mq-step-btn[data-dir="1"]{grid-column:5;grid-row:1;justify-self:end}
@media (max-width:760px){
  /* no room for four columns: the bubble drops under the value, on every row alike */
  body.cic-v11 .mq-sel > .mq-sel-row{grid-template-columns:auto minmax(0,1fr) 40px 24px}
  body.cic-v11 .mq-sel > .mq-sel-row > .mq-sel-label{grid-row:1 / span 2;align-self:center}
  body.cic-v11 .mq-sel > .mq-sel-row .mq-sel-val,body.cic-v11 .mq-sel > .mq-sel-row .mq-step-val{grid-column:2;grid-row:1;padding:0 10px 0 8px}
  body.cic-v11 .mq-sel > .mq-sel-row .mq-pop.cic-guess,body.cic-v11 .mq-sel > .mq-sel-row .cic-note{grid-column:2;grid-row:2;justify-self:end;margin:3px 10px 0 0!important}
  /* a row with nothing under its value (Condition, or a changed size at no price change) centers the value */
  body.cic-v11 .mq-sel > .mq-sel-row:not(:has(.cic-guess:not([hidden]),.cic-note:not(:empty))) .mq-sel-val,
  body.cic-v11 .mq-sel > .mq-sel-row:not(:has(.cic-guess:not([hidden]),.cic-note:not(:empty))) .mq-step-val{grid-row:1 / span 2;align-self:center}
  body.cic-v11 .mq-sel > .mq-sel-row .cic-chg{grid-column:3 / span 2;grid-row:1 / span 2;align-self:center}
  body.cic-v11 .mq-sel > .mq-sel-row .mq-step-btn[data-dir="-1"]{grid-column:3;grid-row:1 / span 2;align-self:center;margin-right:4px}
  body.cic-v11 .mq-sel > .mq-sel-row .mq-step-btn[data-dir="1"]{grid-column:4;grid-row:1 / span 2;align-self:center}
}
.cic-landing .mq-quote{scroll-margin-top:96px}   /* Get my exact price lands below the sticky header */

/* PAGE RHYTHM (Scott 11-06: "more breathing room", then "not a fan of the super alternating", "over centered"). Three parts
   under the quote: gray (what happens + customers), white (what we pay, alone), gray (guarantee card + questions). The theme's
   centered headings stay on what happens, customers and questions; what we pay and the guarantee read left. The white band
   reaches the page edges through its shadow, clipped above and below, so it adds no sideways scroll. */
.cic-landing .mq-photo.cic-photo-sm img{border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);padding:8px;box-sizing:border-box}
.cic-landing .cic-quote-section{padding-top:44px}
.cic-landing .section--wash{padding-top:88px;padding-bottom:88px}
.cic-eyebrow{display:block;margin-bottom:10px}
.cic-next-steps .cic-eyebrow{text-align:center}
.cic-next-steps .cic-h2{font-size:clamp(1.9rem,3.6vw,2.9rem);text-align:center;max-width:820px;margin:0 auto 44px}
.cic-next-steps{margin:0}
.cic-steps-more{margin:28px 0 0;text-align:center}
/* a white button like the homepage's How it works (Scott 11-06): orange text here blended into the Real Sellers eyebrow below */
.cic-steps-more .hiw-more{font-weight:600;color:var(--olive);font-size:.92rem;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 22px;box-shadow:var(--shadow-sm);transition:border-color .15s}
.cic-steps-more .hiw-more:hover{border-color:var(--orange)}
.cic-steps-more .hiw-more svg{width:15px;height:15px;color:var(--orange)}
.cic-reviews{margin:88px 0 0}
.cic-reviews .section-head{margin-bottom:36px}
.cic-worth{margin:88px 0;padding:72px 0;background:#fff;border:0;border-radius:0;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
.cic-worth .cic-h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2;margin:0 0 8px}
.cic-worth-note{margin:0;font-size:.98rem}
.cic-worth-list{grid-template-columns:1fr;margin:24px 0 0}
.cic-worth-list li{align-items:center;padding:13px 0}
.cic-worth-list li:last-child{border-bottom:0}
.cic-worth-list li:has(.cic-worth-pop){background:var(--orange-tint);border-bottom-color:transparent;border-radius:10px;margin:0 -14px;padding:13px 14px}
.cic-worth-more{margin-top:12px}
.cic-worth-go{margin-top:22px}
@media (min-width:761px){   /* words and button on the left, the list on the right */
  .cic-worth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto auto 1fr auto;column-gap:64px;align-items:start}
  .cic-worth > .cic-eyebrow{grid-column:1;grid-row:1}
  .cic-worth > .cic-h2{grid-column:1;grid-row:2}
  .cic-worth > .cic-worth-note{grid-column:1;grid-row:3}
  /* 11-06 (Scott): the button stays with the words, on the left, its bottom in line with the end of the list */
  .cic-worth > .cic-worth-go{grid-column:1;grid-row:4;justify-self:start;align-self:end}
  .cic-worth > .cic-worth-list{grid-column:2;grid-row:1 / span 4;align-self:center;margin:0}
  .cic-worth > .cic-worth-more{grid-column:2;grid-row:5;margin-top:8px}
}
.cic-landing .cq-head{margin-top:72px}
.cic-gen{margin:0 0 88px}
@media (max-width:760px){
  .cic-landing .cic-quote-section{padding-top:24px}
  .cic-landing .section--wash{padding-top:64px;padding-bottom:64px}
  .cic-reviews{margin-top:56px}
  .cic-worth{margin:64px 0;padding:56px 0}
  .cic-gen{margin-bottom:64px}
  .cic-landing .cq-head{margin-top:56px}
  .cic-next-steps .cic-h2{margin-bottom:28px}
  .cic-reviews .section-head{margin-bottom:24px}
  .cic-landing .mq-photo.cic-photo-sm img{border-radius:10px;padding:4px}
  .cic-worth-list li:has(.cic-worth-pop){margin:0 -10px;padding:13px 10px}
}
/* What happens after your quote on tablets (Scott 11-06): 2 x 2 boxes, not four skinny ones or a stretched list; phones keep the list */
@media (min-width:600px) and (max-width:980px){
  .cic-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .cic-step{flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
  .cic-step.is-here{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint)}
  .cic-step:not(:last-child)::after{display:none}
}

/* Common questions (Scott 11-06: "not just look like wall of text"): closed until tapped at every width, an icon on each, long answers as rows */
.cq-grid{align-items:start}
.cq-grid .cic-q{padding:16px 22px}
.cq-grid .cic-q h3{display:flex;align-items:center;gap:14px;margin:0;font-size:1.05rem}
.cq-grid .cic-q h3::after{content:"+";font-size:1.4rem;line-height:1;color:var(--orange);flex:none}
.cq-grid .cic-q h3[aria-expanded="true"]::after{content:"\2212"}
.cic-q-ic{width:40px;height:40px;border-radius:50%;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center;flex:none}
.cic-q-ic svg{width:21px;height:21px}
.cic-q-t{flex:1;min-width:0}
.cic-a{display:none}
.cq-grid .cic-q.is-open .cic-a{display:block}
.cq-grid .cic-a > p{margin:0;padding:12px 0 2px 54px;font-size:.92rem;line-height:1.5}
.cic-grades{display:grid;grid-template-columns:auto 1fr;margin:0;padding-top:8px;font-size:.92rem}
.cic-grades dt{font-weight:700;color:var(--olive);padding:9px 16px 9px 0;border-top:1px solid var(--line);white-space:nowrap}
.cic-grades dd{margin:0;padding:9px 0;border-top:1px solid var(--line);color:var(--olive-soft);line-height:1.5;min-width:0;overflow-wrap:anywhere}
.cic-grades dt:first-of-type,.cic-grades dt:first-of-type + dd{border-top:0}
.cic-grades em{font-style:normal;color:var(--orange);font-size:.8rem;margin-left:4px}
@media (max-width:760px){
  .cq-grid .cic-q{padding:14px 16px}
  .cq-grid .cic-q h3{gap:12px}
  .cq-grid .cic-a > p{padding-left:0}
  .cic-grades{grid-template-columns:1fr}
  .cic-grades dt{padding:10px 0 2px}
  .cic-grades dd{border-top:0;padding:0 0 10px}
}

/* The theme locks Add to cart for 0.5 s after each pick; on a quote that is already priced it keeps its color (Scott 11-06) */
.cic-v11 .mq-grid--flow:not(.no-gpu) #addToCart:disabled,body.cic-v11:has(.mq-grid--flow:not(.no-gpu)) #stickyAdd:disabled{opacity:1}


/* Processor list by brand and age (Scott 11-06) */
.cic-brand-label{padding:14px 24px 7px;font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.cic-find{padding:12px 24px;border-bottom:1px solid var(--line)}
.cic-find input{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--olive)}
.cic-find input:focus{outline:2px solid var(--orange);outline-offset:-1px;border-color:transparent}
.cic-brand-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 24px;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--olive);text-align:left}
.cic-brand-row[hidden]{display:none}
.cic-brand-row::after{content:"+";font-size:1.3rem;line-height:1;color:var(--orange)}
.cic-brand-row[aria-expanded="true"]::after{content:"\2212"}
.cic-brand-row:hover{background:var(--wash)}
.cic-noresult{margin:0;padding:14px 24px;color:var(--muted);font-size:.9rem}
.cic-noresult[hidden]{display:none}
@media (max-width:760px){ .cic-brand-label,.cic-find,.cic-brand-row,.cic-noresult{padding-left:16px;padding-right:16px} }