/*
Theme Name: CIC-Theme
Theme URI: https://www.canitcash.com
Author: Canitcash
Description: Custom theme for Canitcash.com (buyback), converted from the static template. Pixel-faithful, no page builder.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: cic
*/

/* ============================================================
   Canitcash — homepage styles
   Brand palette sampled from logo assets
   ============================================================ */
:root{
  --ink:#2E2D23;          /* darkest olive — footer / dark sections */
  --olive:#434230;        /* brand dark olive — headings, logo text */
  --olive-soft:#5C5A45;
  --orange:#F27929;       /* brand accent */
  --orange-dark:#D9631A;
  --orange-tint:#FFF1E6;
  --blue:#416F92;         /* laptop screen blue */
  --brown:#977347;        /* raccoon brown */
  --cream:#FBF7EF;
  --peach:#FFEDE1;
  --paper:#FFFFFF;
  --wash:#F6F5F1;         /* light section bg */
  --line:#E7E4DB;
  --muted:#726F60;
  --star:#F2A93B;

  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(46,45,35,.06),0 1px 3px rgba(46,45,35,.05);
  --shadow-md:0 6px 20px rgba(46,45,35,.08);
  --shadow-lg:0 18px 45px rgba(46,45,35,.14);
  --maxw:1200px;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--olive);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--olive);line-height:1.08;margin:0;letter-spacing:-.01em}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.accent{color:var(--orange)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
}
.section{padding:88px 0}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800}
.section-head p{margin-top:14px;color:var(--muted);font-size:1.05rem}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--orange);--fg:#fff;--bd:var(--orange);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  padding:14px 26px;border-radius:999px;border:2px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,121,41,.32)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--olive);--bd:var(--line)}
.hero .btn--ghost{--bg:#fff;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .2s ease}
.hero .btn--ghost:hover{--bd:var(--line);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--ghost:hover{--bd:var(--olive);box-shadow:none;background:var(--wash)}
.btn--dark{--bg:var(--olive);--fg:#fff;--bd:var(--olive)}
.btn--dark:hover{box-shadow:0 10px 24px rgba(46,45,35,.28)}
.btn--sm{padding:10px 20px;font-size:.9rem}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.7;cursor:not-allowed}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* ---------- Top contact bar ---------- */
.topbar{background:var(--olive);color:#D8D4C6;font-size:.85rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;padding-block:6px}
.tb-contact{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tb-contact a,.tb-contact span{display:inline-flex;align-items:center;gap:7px;color:#D8D4C6;transition:color .15s}
.tb-contact a:hover{color:#fff}
.tb-contact svg{width:14px;height:14px;opacity:.85}
.tb-social{display:flex;align-items:center;gap:14px}
.tb-social a{color:#CFCBBD;transition:color .15s}
.tb-social a:hover{color:var(--orange)}
.tb-social svg{width:16px;height:16px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.header.is-stuck{border-color:var(--line);box-shadow:var(--shadow-sm)}
.header .wrap{display:flex;align-items:center;gap:28px;height:74px}
.brand img{height:56px;width:auto}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{font-weight:600;font-size:.92rem;color:var(--olive-soft);transition:color .15s;white-space:nowrap;position:relative}
.nav a:hover{color:var(--orange)}
.nav a.active{color:var(--olive)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--orange);border-radius:2px}
.header .btn{margin-left:4px}
.cic-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:3px;border-radius:9px;background:var(--orange);color:#fff;font-size:.68rem;font-weight:700;line-height:1;vertical-align:middle}
.cic-cart-count[hidden]{display:none}
.ci-sub{display:block;font-size:.82rem;color:var(--muted);font-weight:400;margin-top:2px}
.checkout-error{max-width:var(--maxw);margin:0 auto 18px;padding:12px 16px;border-radius:12px;background:var(--orange-tint);border:1px solid var(--orange);color:var(--orange-dark);font-weight:600}
.btn.is-disabled{opacity:.55;pointer-events:none;cursor:default}
.odl-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.odl-list .odl-link{display:inline-flex;align-items:center;gap:6px}
/* In-page anchor targets (guide table-of-contents, #faq, etc.) stop below the
   sticky 74px header instead of scrolling behind it. */
h2[id],h3[id]{scroll-margin-top:120px}
/* A linked section (/#faq, /#how, /sell/#cic-pick) lands right under the 75px sticky header, so no strip of the section above shows; its own top padding is the gap (Scott 11-10) */
section[id]{scroll-margin-top:75px}
#contact-form{scroll-margin-top:96px}
/* Footer "Contact Us" lands with the Contact eyebrow a comfortable gap below the sticky header. */
#contact-us{scroll-margin-top:120px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:14px 12px;margin-left:auto}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--olive);border-radius:2px;transition:.25s}
.nav-toggle span+span{margin-top:4px}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Mega-menu nav (drill-down) ---------- */
.nav{gap:0}
.nav-primary{display:flex;align-items:center;gap:26px}
.nav-utility{display:flex;align-items:center;gap:22px;margin-left:36px;padding-left:36px;border-left:1px solid var(--line)}
.has-mega{position:relative}
.nav-mega-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.92rem;color:var(--olive-soft);padding:0;transition:color .15s}
.nav-mega-btn:hover,.nav-mega-btn[aria-expanded="true"]{color:var(--orange)}
.nav-mega-btn svg{transition:transform .2s}
.nav-mega-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(600px,92vw);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:0;opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60;overflow:hidden}
.mega.is-open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.mega-inner{display:grid;grid-template-columns:200px 1fr;min-height:280px}
/* left rail */
.mega-rail{display:flex;flex-direction:column;padding:10px;gap:1px;background:var(--wash);border-right:1px solid var(--line)}
.mega-cat{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:.92rem;
  color:var(--olive-soft);padding:10px 12px;border-radius:8px;transition:background .14s,color .14s}
.mega-cat:hover,.mega-cat.is-active{background:#fff;color:var(--orange)}
.mega-cat--link{text-decoration:none}
.mega-caret{color:var(--muted);font-size:1.1rem;line-height:1}
.mega-cat:hover .mega-caret,.mega-cat.is-active .mega-caret{color:var(--orange)}
/* right detail */
.mega-detail{position:relative;padding:20px 24px}
.mega-panel{display:none}
.mega-panel.is-shown{display:block}
.mega-panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.mega-label{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--orange)}
.mega-brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.mega-brand-grid a{padding:7px 0;font-size:.9rem;color:var(--olive-soft);text-decoration:none}
.mega-brand-grid a:hover{color:var(--orange)}
.mega-all{font-weight:700;font-size:.84rem;color:var(--blue);text-decoration:none;white-space:nowrap}
.mega-all:hover{color:var(--orange)}
.mega-all--none{visibility:hidden}
.mega-hint{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0}
.mega-hint a{color:var(--blue);font-weight:600}
/* A short window: the menu never runs past the bottom of the screen — the
   category rail (and a long brand list) scroll inside it instead. 150px is
   the top bar + header + the menu's 18px gap at the top of the page. Desktop
   only: the hamburger menu (≤980px) scrolls as a whole already. */
@media (min-width:981px){
  .mega-inner{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);grid-template-rows:minmax(0,1fr)}
  .mega-rail,.mega-detail{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
}
.mega-hint a:hover{color:var(--orange)}
.steps-more{text-align:center;margin-top:28px}
.steps-more a{font-weight:700;font-size:.95rem;color:var(--blue);text-decoration:none}
.steps-more a:hover{color:var(--orange)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(120% 90% at 85% 0%,var(--peach) 0%,rgba(255,237,225,0) 55%),
   radial-gradient(95% 85% at 12% 100%,rgba(65,111,146,.12) 0%,rgba(65,111,146,0) 55%),
   linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:70px;padding-bottom:86px}
.hero-mark{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  width:min(58vw,620px);height:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:.10;
}
.hero-inner,.hero .hero-copy,.hero .wrap > *:not(.hero-mark){position:relative;z-index:1}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:800;letter-spacing:-.02em}
.hero p.lede{margin-top:20px;font-size:1.14rem;color:var(--olive-soft);max-width:34ch}
.badge-pill{
  display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  padding:8px 16px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--olive-soft);
  box-shadow:var(--shadow-sm);
}
.badge-pill .k{color:var(--orange);font-family:var(--font-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
/* phones: the two halves stack as two whole lines, with room before the headline */
@media (max-width:480px){
  .badge-pill{flex-direction:column;gap:2px;padding:8px 18px;margin-bottom:16px;white-space:nowrap}
  .badge-pill .bp-sep{display:none}
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
/* The hero's ratings: Google, Trustpilot and BBB, each mark beside its line
   ("cic-homepage-trustpilot" demo, 2026-10-09; it was one line of text stars). */
.hero-trust{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:10px 14px;margin-top:30px;color:var(--muted);font-size:.92rem;text-align:left}
.hero-trust .tp-stars,.hero-trust .g-stars{display:block;height:17px;width:auto}
.g-stars .on{fill:var(--star)}
.g-stars .off{fill:#DCDCE6}
.bbb-grade{display:flex;width:91px;height:17px;font-family:var(--font-display);font-weight:800;line-height:17px;text-decoration:none}
.bbb-grade span{display:block;text-align:center}
.bbb-grade .l{background:#025A78;color:#fff;flex:0 0 46px;font-size:10.5px;letter-spacing:.08em}
.bbb-grade .r{background:#fff;color:#025A78;flex:1;box-shadow:inset 0 0 0 1.5px #025A78;font-size:11.5px;letter-spacing:.02em}
.stars{color:var(--star);letter-spacing:2px;font-size:1rem}
.hero-trust b{color:var(--olive)}

/* Hero quote selector */
.hero-art{position:relative;justify-self:center;width:min(100%,460px)}
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:1;opacity:.5}
.blob.b1{width:150px;height:150px;background:var(--peach);top:-32px;right:-30px}
.blob.b2{width:120px;height:120px;background:#DCE7EE;bottom:-30px;left:-34px}
.quote-card{
  position:relative;z-index:2;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px 26px;text-align:left;
}
.qc-title{font-size:1.4rem;font-weight:800}
.qc-sub{margin-top:4px;color:var(--muted);font-size:.95rem}
.qc-head{display:flex;align-items:center;gap:14px}
.qc-logo{
  width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.qc-logo img{width:42px;height:42px}
.qc-search{position:relative;display:flex;align-items:center;margin-top:18px}
.qc-search-ic{position:absolute;left:14px;color:var(--muted);width:18px;height:18px;pointer-events:none}
.qc-search-ic svg{width:18px;height:18px}
.qc-search input{
  flex:1;padding:13px 40px 13px 40px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:.98rem;color:var(--olive);background:#fff;width:100%;
}
.qc-search input::placeholder{color:#9a9788}
.qc-search input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,121,41,.15)}
.qc-or{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:.82rem;margin:16px 0}
.qc-or::before,.qc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.qc-or span{padding:0 12px;text-transform:uppercase;letter-spacing:.1em}
/* minmax(0,1fr), not 1fr: a grid track's auto minimum is content-based, so a
   long selected model name would push the Model column (and the card) wider
   instead of ellipsising. min-width:0 does the same for the flex children. */
.qc-selects{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.qc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.qc-field:first-child{grid-column:1 / -1}
.qc-label{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--olive-soft)}
.qc-selects select{
  appearance:none;-webkit-appearance:none;font:inherit;font-size:.95rem;color:var(--olive);
  width:100%;min-width:0;text-overflow:ellipsis;
  padding:12px 34px 12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23726F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
.qc-selects select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,121,41,.15)}
.qc-selects select:disabled{background-color:var(--wash);color:#a7a495;cursor:not-allowed;opacity:.85}
/* Searchable model combobox (native <select> can't contain 300+ options nicely) */
.qc-combo{position:relative;min-width:0}
.qc-combo-btn{
  width:100%;text-align:left;appearance:none;font:inherit;font-size:.95rem;color:var(--olive);
  padding:12px 34px 12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23726F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qc-combo-btn:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,121,41,.15)}
.qc-combo-btn:disabled{background-color:var(--wash);color:#a7a495;cursor:not-allowed;opacity:.85}
.qc-combo-btn.is-placeholder{color:#a7a495}
/* Fixed, not absolute: .hero has overflow:hidden, which CLIPS an absolutely
   positioned panel at the section edge (no z-index can escape a clip). Fixed
   takes it out of that flow; JS sets top/left/width so it lines up with the
   fields and spans the full row, like the Device select. */
.qc-combo-pop{
  position:fixed;z-index:100;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(67,66,48,.16);padding:8px;
}
.qc-combo-search{
  width:100%;font:inherit;font-size:.9rem;color:var(--olive);
  padding:9px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;
}
.qc-combo-search:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,121,41,.15)}
.qc-combo-list{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto}
.qc-combo-list li{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.9rem;line-height:1.35;color:var(--olive)}
.qc-combo-list li:hover,.qc-combo-list li.is-active{background:var(--wash)}
.qc-combo-list li[hidden]{display:none}
.qc-combo-empty{padding:9px 12px;color:var(--muted);font-size:.9rem}
/* Model search typeahead: same panel as the combobox, with anchors as rows. */
.qc-search-pop .qc-combo-list li{padding:0}
.qc-search-pop .qc-combo-list a{
  display:block;padding:9px 12px;border-radius:8px;color:var(--olive);
  font-size:.9rem;line-height:1.35;text-decoration:none;
}
.qc-search-pop .qc-combo-list a:hover,.qc-search-pop .qc-combo-list a:focus{background:var(--wash);color:var(--olive)}
/* Spinner in the search field while a request is in flight (the old site's
   .loading gif, drawn in CSS). Sits left of the Search button. */
.qc-search.is-loading::after{
  content:"";position:absolute;right:14px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--orange);animation:cic-spin .7s linear infinite;
}
@keyframes cic-spin{to{transform:rotate(360deg)}}
.qc-submit{width:100%;margin-top:18px}
.qc-foot{margin-top:14px;text-align:center;font-size:.82rem;color:var(--muted)}
.qc-result{
  margin-top:18px;padding:16px;border-radius:12px;background:var(--orange-tint);
  border:1px solid #F6D9C2;display:flex;flex-direction:column;gap:6px;
}
.qc-result[hidden]{display:none}
.qc-result strong{font-family:var(--font-display);color:var(--olive)}
.qc-result span{color:var(--olive-soft);font-size:.92rem}
.qc-result .qc-continue{align-self:flex-start;margin-top:8px}
.qc-result .qc-hint{color:var(--olive-soft);font-size:.92rem}

/* ---------- Categories ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cat{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 14px 22px;color:var(--olive);position:relative;
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;
}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--orange)}
.cat .ic{width:56px;height:56px;color:var(--olive);transition:color .2s ease,transform .2s ease}
.cat .ic svg,.cat .ic img{width:100%;height:100%}
.cat .ic img{object-fit:contain}
.cat:hover .ic{color:var(--orange);transform:scale(1.06)}
.cat .name{font-family:var(--font-display);font-weight:700;font-size:.98rem}
.cat .go{font-size:.78rem;color:var(--muted);font-weight:600;opacity:0;transform:translateY(4px);transition:.2s}
.cat:hover .go{opacity:1;transform:translateY(0);color:var(--orange)}

.cat-more{
  display:flex;align-items:center;gap:22px;margin-top:20px;
  background:var(--olive);color:#fff;border-radius:var(--radius-lg);
  padding:26px 34px;transition:transform .18s ease,box-shadow .2s ease;
}
.cat-more:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cat-more .ic{width:46px;height:46px;color:var(--orange);flex:none}
.cat-more .ic svg{width:100%;height:100%}
.cat-more-txt{display:flex;flex-direction:column;gap:3px}
.cat-more-txt b{font-family:var(--font-display);font-size:1.15rem}
.cat-more-txt span{color:#CFCBBB;font-size:.95rem}
.cat-more-go{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--font-display);font-weight:700;color:var(--orange);
}
.cat-more-go svg{width:18px;height:18px;transition:transform .2s}
.cat-more:hover .cat-more-go svg{transform:translateX(4px)}
@media (max-width:640px){
  .cat-more{flex-direction:column;text-align:center;gap:14px;padding:26px 22px}
  .cat-more-go{margin-left:0}
}

/* ---------- Steps ---------- */
.steps{background:var(--wash)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px;position:relative}
.step .num{
  font-family:var(--font-display);font-weight:800;font-size:.9rem;color:#fff;
  background:var(--orange);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.step .sic{width:52px;height:52px;border-radius:14px;background:var(--peach);color:var(--brown);display:grid;place-items:center;margin:0}
.step .sic svg{width:28px;height:28px}
.step h3{font-size:1.28rem;font-weight:700}
.step p{margin-top:10px;color:var(--muted)}
.step .connector{position:absolute;top:52px;right:-26px;color:var(--line);z-index:2}
.steps-grid .step:last-child .connector{display:none}

/* ---------- Why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why{text-align:left;padding:6px 4px}
.why .wic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;color:#fff}
.why .wic svg{width:26px;height:26px}
.why:nth-child(1) .wic{background:var(--orange)}
.why:nth-child(2) .wic{background:var(--blue)}
.why:nth-child(3) .wic{background:var(--brown)}
.why:nth-child(4) .wic{background:var(--olive)}
.why h3{font-size:1.16rem;font-weight:700}
.why p{margin-top:9px;color:var(--muted);font-size:.97rem}

/* ---------- Stats band ---------- */

/* ---------- Testimonials ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm)}
.review .stars{font-size:1.05rem}
.review p{margin:16px 0 22px;color:var(--olive-soft);font-size:1rem}
.review .who{display:flex;align-items:center;gap:12px}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:#fff;flex:none}
.review:nth-child(1) .avatar{background:var(--orange)}
.review:nth-child(2) .avatar{background:var(--blue)}
.review:nth-child(3) .avatar{background:var(--brown)}
.review .who b{display:block;font-family:var(--font-display)}
.review .who span{font-size:.85rem;color:var(--muted)}
.review .who .avatar{color:#fff}   /* keep initials white; beats the .who span rule */
.reviews-more{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.reviews-more .btn{max-width:100%;white-space:normal;text-align:center}

/* ---------- FAQ ---------- */
.faq{background:var(--wash)}
.faq-list{max-width:800px;margin:0 auto}
.faq-list{max-width:820px;margin:0 auto}
.faq-group{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--olive);
  text-align:center;margin:38px 0 18px;padding-top:6px;
}
.faq-group:first-child{margin-top:0}
.qa{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.qa summary{
  list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--olive);transition:background .15s;
}
.qa summary:hover{background:var(--cream)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .sign{flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center;transition:transform .2s}
.qa summary .sign svg{width:13px;height:13px;display:block}
.qa[open] summary .sign{transform:rotate(45deg)}
.qa[open] summary{background:var(--cream)}
.qa .ans{padding:4px 22px 22px;color:var(--muted)}
.qa .ans p{max-width:70ch}
.qa .ans p + p{margin-top:12px}
.qa .ans ul,.qa .ans ol{margin:12px 0;padding-left:24px;max-width:70ch}
.qa .ans ul{list-style:disc}
.qa .ans ol{list-style:decimal}
.qa .ans li{margin-bottom:8px;padding-left:4px}
.qa .ans em{font-style:italic}
.qa .ans b{color:var(--olive)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(130% 130% at 12% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(120% 120% at 100% 100%, rgba(151,115,71,.35) 0%, rgba(151,115,71,0) 50%),
    linear-gradient(120deg, #FBA24B 0%, #F27929 42%, #DA5B10 100%);
}
.cta-band .wrap{padding:72px 24px}
.cta-band h2{color:#fff;font-size:clamp(2rem,4vw,3rem);font-weight:800}
.cta-band p{margin:16px auto 30px;max-width:52ch;font-size:1.12rem;color:#FFF0E4}
.cta-band .btn{--bg:#fff;--fg:var(--orange-dark);--bd:#fff}
.cta-band .btn:hover{box-shadow:0 12px 28px rgba(0,0,0,.2)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#C9C5B7}
.footer .wrap{padding:64px 24px 30px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr 1fr;gap:34px}
.foot-util a{color:rgba(255,255,255,.5);font-size:.84rem;transition:color .18s ease}
.foot-util a:hover{color:var(--orange)}
@media (max-width:1150px){
  .foot-top{grid-template-columns:repeat(4,1fr);gap:30px}
  .fbrand{grid-column:1 / -1}
}
.footer .fbrand{max-width:340px}
.flogo{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.flogo-mark{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--cream);box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.flogo-mark img{width:42px;height:42px;display:block}
.flogo-word{
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;
  color:#fff;line-height:1;
}
.flogo-word i{color:var(--orange);font-style:normal}
.footer .fbrand p{max-width:32ch;font-size:.95rem;color:#A9A597}
.fcontact{margin-top:16px;font-style:normal;font-size:.92rem;line-height:1.9;color:#B4B0A2}
.fcontact a{color:#B4B0A2;transition:color .15s}
.fcontact a:hover{color:var(--orange)}
.foot-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.foot-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#D8D4C6;transition:.2s}
.foot-social a:hover{background:var(--orange);color:#fff}
.foot-social svg{width:18px;height:18px}
/* Seven icons (Trustpilot joined 2026-10-14) in the 5-column footer's first
   column (~271–285px): smaller buttons and gaps keep them on one line there
   (the user's call); the 4/2-column and phone footers keep 38px and wrap only
   on the narrowest phones. */
@media (min-width:1151px){
  .foot-social{gap:8px;flex-wrap:nowrap}
  .foot-social a{width:32px;height:32px;border-radius:9px}
  .foot-social svg{width:16px;height:16px}
}
.footer h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer ul a{color:#B4B0A2;font-size:.94rem;transition:color .15s}
.footer ul a:hover{color:var(--orange)}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:1fr auto;gap:14px 24px;align-items:center;font-size:.86rem;color:#8F8B7D}
.foot-bottom .foot-disclaimer{grid-column:1 / -1;font-size:.8rem;color:#75725F;line-height:1.5;order:3}
.foot-util{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end}
@media (max-width:720px){
  .foot-bottom{grid-template-columns:1fr;text-align:center}
  .foot-util{justify-content:center}
}
.pay{display:flex;gap:8px;align-items:center}
.pay span{background:rgba(255,255,255,.08);border-radius:6px;padding:4px 10px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#CFCBBD}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .nav{display:none}
  .nav-toggle{display:block}
  .header.nav-open .nav{
    display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);padding:8px 0;margin:0;
    max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .header.nav-open .nav-primary,.header.nav-open .nav-utility{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .header.nav-open .nav-utility{border-top:1px solid var(--line);border-left:0;margin-top:6px;padding-top:6px;padding-left:0}
  .header.nav-open .nav-primary > a,.header.nav-open .nav-utility > a{padding:14px 24px}
  .header.nav-open .nav-cta{margin:12px 24px;justify-content:center}
  /* mega becomes an inline accordion inside the hamburger */
  .header.nav-open .has-mega{display:block}
  .header.nav-open .nav-mega-btn{width:100%;justify-content:space-between;padding:14px 24px}
  .header.nav-open .mega{position:static;transform:none;opacity:1;visibility:visible;width:auto;
    box-shadow:none;border:0;border-radius:0;padding:0;background:var(--wash);overflow:hidden;
    max-height:0;transition:max-height .3s ease}
  .header.nav-open .mega.is-open{max-height:2000px}
  .header.nav-open .mega-inner{grid-template-columns:1fr;min-height:0}
  .header.nav-open .mega-rail{background:transparent;border-right:0;padding:6px 12px;gap:0}
  .header.nav-open .mega-cat{padding:13px 12px;border-radius:0;border-bottom:1px solid var(--line)}
  .header.nav-open .mega-cat:last-child{border-bottom:0}
  /* on mobile the caret rotates when active, panel appears inline below the rail */
  .header.nav-open .mega-cat.is-active .mega-caret{transform:rotate(90deg)}
  .header.nav-open .mega-caret{transition:transform .2s}
  .header.nav-open .mega-detail{padding:0}
  .header.nav-open .mega-panel.is-shown{padding:12px 24px 18px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .header.nav-open .mega-brand-grid{grid-template-columns:1fr 1fr}
  .hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:48px;padding-bottom:56px}
  .hero p.lede{margin-inline:auto}
  .hero-cta,.hero-trust,.badge-pill{justify-content:center}
  .hero-trust{flex-wrap:wrap}
  .hero-art{width:min(100%,360px)}
  .steps-grid{grid-template-columns:1fr}
  .step .connector{display:none}
  .reviews-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .section{padding:64px 0}
}
@media (max-width:520px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .strip .dot{margin:0 6px}
  .strip .hide-sm{display:none}
}

/* ============================================================
   Multi-page components (topbar, page heroes, prose, features,
   inspection steps, contact form, 4-step grid)
   ============================================================ */

/* placeholder category icons (awaiting real SVGs) */
.cat.placeholder-icon .ic{color:var(--muted);opacity:.55}
.cat.placeholder-icon:hover .ic{color:var(--orange);opacity:1}

/* 4-step process grid */
.steps-grid.steps-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.steps-grid.steps-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps-grid.steps-4{grid-template-columns:1fr}}
.steps-4 .step{padding:28px 24px}

/* One green (Scott 11-11): text, icons and green buttons use #2E7D50; #E7F3EC / #F0FAF4 tints and #BCE0C9 borders are its light shades,
   #276943 its hover. #00B67A stays: it is Trustpilot's own brand green. */
/* ---------- Page hero (inner pages) — matches homepage hero language ---------- */
.page-hero{position:relative;text-align:center;overflow:hidden;
  background:
   radial-gradient(120% 90% at 85% 0%,var(--peach) 0%,rgba(255,237,225,0) 55%),
   radial-gradient(95% 85% at 12% 100%,rgba(65,111,146,.12) 0%,rgba(65,111,146,0) 55%),
   linear-gradient(180deg,#fff 0%,var(--cream) 100%);
  padding:72px 0 80px}
.page-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(calc(-50% - 460px),-50%);
  width:min(30vw,320px);height:min(30vw,320px);
  background:url("assets/img/favicon.webp") center/contain no-repeat;
  opacity:.08;
}
@media (max-width:1080px){.page-hero::before{transform:translate(calc(-50% - 42vw),-50%)}}
@media (max-width:760px){.page-hero::before{transform:translate(-50%,-50%);width:200px;height:200px;opacity:.05}}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;margin-top:14px}
.page-hero .eyebrow{letter-spacing:.28em}
.page-hero-sub{max-width:60ch;margin:20px auto 0;color:var(--olive-soft);font-size:1.08rem}
.page-hero-sub b{color:var(--olive)}
.trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:26px}
.tbadge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--olive);box-shadow:var(--shadow-sm)}
.tbadge svg{width:18px;height:18px;color:var(--blue)}

/* ---------- Prose ---------- */
.wrap.narrow{max-width:820px}
.prose-section{padding-block:64px}
.prose{margin-bottom:44px}
.prose:last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;margin-bottom:16px;text-align:center}
.prose p{color:var(--olive-soft);font-size:1.05rem;line-height:1.75;margin-bottom:14px}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--orange)}
.prose-note{font-style:italic;color:var(--muted);text-align:center;border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.prose-cta{text-align:center;margin-top:8px}
.prose .checklist{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:10px}
.prose .checklist li{position:relative;padding-left:30px;color:var(--olive-soft);font-size:1.02rem}
.prose .checklist li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--orange-tint);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F27929' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-repeat:no-repeat;background-position:center}
.prose-section.alt{background:var(--wash)}

/* ---------- Guide / how-to pages ---------- */
.prose ol,.prose ul.guide-list{margin:14px 0 18px;padding-left:26px;max-width:70ch}
.prose ol{list-style:decimal}
.prose ul.guide-list{list-style:disc}
.prose ol li,.prose ul.guide-list li{color:var(--olive-soft);font-size:1.02rem;line-height:1.7;margin-bottom:9px;padding-left:5px}
.prose ol li b,.prose ul.guide-list li b{color:var(--olive)}
.prose h3{font-family:var(--font-display);font-size:1.12rem;font-weight:800;color:var(--olive);margin:26px 0 10px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--wash);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--brown);overflow-wrap:anywhere}
.section--wash{background:var(--wash)}
/* DIY guide: platform cards */
.plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.plat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 22px 20px;box-shadow:var(--shadow-sm)}
.plat-card h4,.plat-card h3{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--olive);margin:0 0 8px}
.plat-tag{display:inline-block;background:var(--orange-tint);color:var(--brown);font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:10px}
.plat-card p{margin:0;color:var(--olive-soft);font-size:.92rem;line-height:1.6}
@media (max-width:860px){.plat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.plat-grid{grid-template-columns:1fr}}
/* Step lede on How It Works */
.step-lede{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--olive);margin-bottom:12px}
/* Payout method grid */
.payout-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.payout-grid li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 12px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--olive)}
@media (max-width:640px){.payout-grid{grid-template-columns:repeat(2,1fr)}}
/* Inspection checks grid */
.insp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.insp-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 24px 22px;box-shadow:var(--shadow-sm)}
.insp-item h3{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--olive);margin:0 0 8px}
.insp-item p{margin:0;color:var(--olive-soft);font-size:.96rem;line-height:1.65}
@media (max-width:900px){.insp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.insp-grid{grid-template-columns:1fr}}
.note{background:var(--orange-tint);border-radius:var(--radius);padding:18px 22px;margin:18px 0;
  color:var(--olive-soft);font-size:1rem;line-height:1.7}
.note .k{display:block;margin-bottom:6px}
.note b{color:var(--olive)}
.note a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.note a:hover{color:var(--orange)}
/* Quick checklist card */
.quick-check{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:32px 34px;max-width:680px;margin:0 auto}
.quick-check h2{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin:0 0 18px;color:#fff}
.quick-check ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.quick-check li{position:relative;padding-left:28px;color:rgba(255,255,255,.85);font-size:1rem;line-height:1.5}
.quick-check li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;
  border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
/* Keep reading cards */
.keep-reading{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:720px;margin:0 auto}
.kr-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.kr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--orange)}
.kr-card b{display:block;font-family:var(--font-display);font-weight:800;color:var(--olive);margin-bottom:6px}
.kr-card span{color:var(--muted);font-size:.94rem;line-height:1.55}
@media (max-width:560px){.keep-reading{grid-template-columns:1fr}}
@media (max-width:480px){
  .cic-guide .section{padding-block:48px}
  /* two white sections in a row share one 48px gap, not two paddings */
  .cic-guide .section:not(.alt):not(.section--wash):not(.faq) + .section:not(.alt):not(.section--wash):not(.faq){padding-top:0}
  .cic-guide .section .wrap > *{margin-top:0;margin-bottom:0}
  .cic-guide .section .wrap > * + *{margin-top:24px}
  .cic-guide .section .wrap > * + .prose,
  .cic-guide .section .wrap > .prose + .keep-reading{margin-top:48px}
  .cic-guide .section .prose > *{margin-top:0;margin-bottom:0}
  .cic-guide .section .prose > * + *{margin-top:16px}
  .cic-guide .section .prose > :is(ol,ul,table,figure,.note,.compare-wrap,.checklist),
  .cic-guide .section .prose > :is(ol,ul,table,figure,.note,.compare-wrap,.checklist) + *,
  .cic-guide .section .prose > * + h3{margin-top:24px}
  .cic-guide .section .prose > :first-child{margin-top:0}
  .cic-guide .section .prose > :is(ol,ul) > li:last-child,
  .cic-guide .section .faq-list > .qa:last-child{margin-bottom:0}
}
/* Boot key table */
.boot-table{min-width:0}
.boot-table code{display:inline-block;white-space:nowrap}
.boot-table th[scope=row]{min-width:0}
/* ITAD */
.itad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.itad-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-sm)}
.itad-card h3{font-family:var(--font-display);font-weight:800;font-size:1.04rem;color:var(--olive);margin:0 0 9px}
.itad-card p{margin:0;color:var(--olive-soft);font-size:.96rem;line-height:1.65}
@media (max-width:860px){.itad-grid{grid-template-columns:1fr}}
.itad-offers{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.itad-offers li{position:relative;padding:16px 16px 16px 46px;border:1px solid var(--line);margin:-1px 0 0 -1px;
  color:var(--olive);font-weight:600;font-size:1rem;background:#fff}
.itad-offers li::before{content:"";position:absolute;left:20px;top:22px;width:13px;height:7px;
  border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
@media (max-width:600px){.itad-offers{grid-template-columns:1fr}}
.bulk-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.bulk-row{grid-template-columns:1fr}}
.page-hero .hero-cta{margin-top:24px;display:flex;justify-content:center}
/* Bulk quote: tabs + spec sheet upload */
.tstep-body .k{display:block;margin-bottom:7px}
.tstep-body h3,.tstep-body h2{font-family:var(--font-display)}
.tsteps .guide-list{margin:10px 0 4px}
.bulk-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:0}
.bulk-tab{display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 14px;
  font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--olive-soft);
  background:var(--wash);border:1px solid var(--line);cursor:pointer;transition:.18s ease;
  border-radius:var(--radius-lg) 0 0 0}
.bulk-tab + .bulk-tab{border-left:none;border-radius:0 var(--radius-lg) 0 0}
.bulk-tab svg{width:17px;height:17px}
.bulk-tab:hover{color:var(--olive)}
.bulk-tab.is-active{background:var(--orange);color:#fff;border-color:var(--orange)}
.bulk-panel{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:#fff;padding:30px 32px}
.bulk-panel[hidden]{display:none}
.dropzone{border:2px dashed var(--line);border-radius:var(--radius-lg);padding:38px 24px;text-align:center;
  transition:border-color .18s ease,background .18s ease;margin-bottom:24px}
.dropzone:hover,.dropzone.is-over{border-color:var(--orange);background:var(--wash)}
.dropzone .dz-ic{width:38px;height:38px;color:var(--olive);margin:0 auto 12px;display:block}
.dropzone h3{font-family:var(--font-display);font-weight:800;font-size:1.06rem;color:var(--olive);margin:0 0 7px}
.dropzone .dz-types{color:var(--muted);font-size:.9rem;margin:0 0 16px}
.dropzone input[type=file]{display:block;margin:0 auto;font-size:.92rem;color:var(--olive-soft);max-width:100%}
.dz-chosen{margin-top:12px;font-size:.92rem;color:var(--olive);font-weight:600}
.bulk-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:6px}
.bulk-foot .contact-note{margin:0}
@media (max-width:560px){
  .bulk-panel{padding:24px 20px}
  .bulk-foot{flex-direction:column;align-items:stretch}
  .bulk-tab{font-size:.9rem;padding:14px 8px}
}
/* Our Sites: network */
.net-parent{display:flex;align-items:center;gap:28px;max-width:900px;margin:0 auto;
  padding:26px 32px;border-radius:var(--radius-lg);border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow-sm);position:relative}
.net-parent .net-logo{flex:none;width:170px;display:grid;place-items:center}
.net-parent .net-logo img{max-width:100%;max-height:54px;width:auto;display:block}
.net-parent h3{font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  letter-spacing:.02em;text-transform:uppercase;margin:0 0 7px;color:var(--olive)}
.net-parent p{margin:0;color:var(--olive-soft);font-size:1rem;line-height:1.65}
.here-pill{position:absolute;top:-11px;left:32px;background:var(--orange);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px}

.net-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.net-tile{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .2s ease}
.net-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.net-brand{display:grid;place-items:center;padding:46px 28px;min-height:150px}
.net-brand img{max-width:78%;max-height:58px;width:auto;height:auto;display:block}
.net-brand--sal{background:#0D1B2E}
.net-brand--sap{background:#3B1957}
.net-tile-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.net-tile-body h3{font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--olive)}
.net-tile-body p{margin:0;color:var(--olive-soft);font-size:.98rem;line-height:1.65;flex:1}
.net-visit{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--blue);
  display:inline-flex;align-items:center;gap:7px;margin-top:4px}
.net-visit svg{width:15px;height:15px;transition:transform .18s ease}
.net-tile:hover .net-visit{color:var(--orange)}
.net-tile:hover .net-visit svg{transform:translateX(4px)}
@media (max-width:760px){
  .net-tiles{grid-template-columns:1fr;max-width:520px}
  .net-parent{flex-direction:column;text-align:center;gap:18px;padding:30px 22px 26px}
  .net-parent .net-logo{width:auto;max-width:100%}
  .here-pill{left:50%;transform:translateX(-50%)}
}
/* Sell hub: category grid with descriptions */
.cat-grid--detail{grid-template-columns:repeat(3,1fr)}
.cat-grid--detail .cat{padding:28px 22px 24px;gap:10px}
.cat-grid--detail .cat .desc{color:var(--muted);font-size:.92rem;line-height:1.6;font-weight:400}
@media (max-width:900px){.cat-grid--detail{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cat-grid--detail{grid-template-columns:1fr}}
/* The category grids over a "We also buy" row — the homepage's, /sell/'s and
   a category page's "Sell other electronics": 7 across, centred, so 14 run
   7 + 7 and 13 run 7 + 6, lined up with the 7 brand tiles below (the
   "bari-oct14" demo, 2026-10-14; the homepage and /sell/ on its review). */
.cat-grid--center{display:flex;flex-wrap:wrap;justify-content:center}
.cat-grid--center > .cat{flex:0 0 calc((100% - 6 * 18px) / 7);padding-left:6px;padding-right:6px}
.cat-grid--center > .cat .name{white-space:nowrap}
@media (max-width:1000px){.cat-grid--center > .cat{flex-basis:calc((100% - 4 * 18px) / 5)}}
@media (max-width:520px){.cat-grid--center > .cat{flex-basis:calc((100% - 18px) / 2)}}
.guide-fig{margin:22px 0 4px}
.guide-fig img{width:auto;max-width:100%;height:auto;display:block;margin:0 auto;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff}
.guide-fig figcaption{margin-top:11px;color:var(--muted);font-size:.9rem;line-height:1.55;text-align:center}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:24px 26px;margin-top:6px}
.toc-title{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--olive);
  margin:0 0 14px;text-align:left}
.toc-list{margin:0;padding-left:20px;list-style:decimal;columns:2;column-gap:34px}
.toc-list li{margin-bottom:2px;padding-left:4px;break-inside:avoid;color:var(--muted)}
.toc-list a{display:block;padding:7px 0;color:var(--blue);font-weight:600;font-size:.98rem;text-decoration:none;line-height:1.5}
.toc-list a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.prose h2[id],.section-head h2[id]{scroll-margin-top:120px}
@media (max-width:640px){.toc-list{columns:1}.toc{padding:20px 20px}}
.prose-section.alt code{background:#fff}
.brand-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px}
.brand-links li{min-width:0}
.brand-links a{display:block;color:var(--blue);font-weight:600;font-size:.98rem;text-decoration:none;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-links a:hover{color:var(--orange);border-color:var(--orange)}
@media (max-width:760px){.brand-links{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.brand-links{grid-template-columns:1fr}}

/* ---------- Feature grid (About / Trust "means") ---------- */
.feature-section{background:var(--wash)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;text-align:center;box-shadow:var(--shadow-sm)}
.feature .fic{width:56px;height:56px;margin:0 auto 18px;border-radius:15px;display:grid;place-items:center;background:var(--peach);color:var(--brown)}
.feature .fic svg{width:28px;height:28px}
.feature h3{font-size:1.16rem;font-weight:700}
.feature p{margin-top:10px;color:var(--muted);font-size:.97rem;line-height:1.6}
@media (max-width:820px){.feature-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feature-grid{grid-template-columns:1fr}}

/* ---------- Inspection steps (Trust) ---------- */
.tsteps{display:flex;flex-direction:column;gap:20px}
.tstep{display:flex;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm)}
.tstep-num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.1rem}
.tstep-body h3,.tstep-body h2{font-size:1.2rem;font-weight:700;margin-bottom:8px}   /* h2 on How it works (Scott 11-11: no skipped heading levels), same look */
.tstep-body p{color:var(--olive-soft);line-height:1.7;margin-bottom:10px}
.tstep-body p:last-child{margin-bottom:0}
.tstep-body ul{margin:8px 0 12px;padding-left:22px;color:var(--olive-soft);list-style:disc}
.tstep-body li{margin-bottom:6px}
@media (max-width:560px){.tstep{flex-direction:column;gap:12px;padding:22px}}

/* ---------- Find model + About blurb ---------- */
.find-model{padding-block:72px 8px;text-align:center}
.find-model h2{font-size:1.5rem;font-weight:800}
.find-model p{margin-top:10px;color:var(--muted);font-size:1.05rem}
.find-model a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.find-model a:hover{color:var(--orange)}
.about-blurb{background:var(--wash);text-align:center}
.about-blurb h2{font-size:1.5rem;font-weight:800;margin-bottom:14px}
.about-blurb p{color:var(--olive-soft);line-height:1.75;font-size:1.02rem}
.about-blurb a{color:var(--blue);font-weight:600;text-decoration:underline}
.about-blurb a:hover{color:var(--orange)}

/* ---------- Contact form ---------- */
.contact-section .section-head{margin-bottom:32px}
.contact-form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.cf-field{display:flex;flex-direction:column;gap:7px}
/* .cf-field sets display, which would beat the browser's [hidden] rule. */
.cf-field[hidden]{display:none}
.cf-field>span{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--olive)}
.cf-field>span b{color:var(--orange)}
.cf-error{color:#C0392B;font-family:var(--font-body);font-size:.82rem;font-weight:400;margin-top:-1px}
.checkout-main input.has-error,.checkout-main select.has-error,
.checkout-main input.has-error:focus,.checkout-main select.has-error:focus{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.contact-form input,.contact-form select,.contact-form textarea,
.auth-form input,.checkout-main input:not([type=checkbox]),.checkout-main select{
  font:inherit;font-size:.98rem;color:var(--olive);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;width:100%}
/* the browser's own arrow sits against the border and can't be moved, so draw the
   quote form's chevron instead, inset from the edge with room left of it */
.checkout-main select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23726F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus,
.auth-form input:focus,.checkout-main input:focus,.checkout-main select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,121,41,.15)}
.contact-form .btn{align-self:flex-start}
.cf-result{padding:14px 16px;border-radius:12px;background:var(--orange-tint);border:1px solid #F6D9C2;color:var(--olive);font-weight:600}
.cf-result[hidden]{display:none}
.contact-alt{text-align:center;margin-top:22px;color:var(--muted);font-size:.95rem}
.contact-alt a{color:var(--blue);font-weight:600}

/* ---------- Footer contact list ---------- */
.foot-contact{gap:8px}
.foot-contact li{color:#B4B0A2;font-size:.94rem}
.foot-disclaimer{max-width:520px;text-align:right}

/* ---------- Topbar responsive ---------- */
@media (max-width:760px){
  .topbar .wrap{flex-direction:column;gap:6px;text-align:center}
  .tb-contact{justify-content:center;gap:14px}
  .tb-contact span{display:none}
}
@media (max-width:480px){
  .topbar{display:none}
  .tb-contact a[href^="mailto"]{display:none}
  .foot-disclaimer{text-align:left}
}

/* Trust Pledge -> homepage FAQ link (replaces duplicated FAQ) */
.faq-link-section{background:var(--wash)}
.faq-link-section h2{font-size:1.5rem;font-weight:800;margin-bottom:12px}
.faq-link-section p{color:var(--olive-soft);font-size:1.05rem}
.faq-link-section a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.faq-link-section a:hover{color:var(--orange)}

/* ============================================================
   Snazz: trust strip, colored category tiles, step flow,
   payment row, comparison grid
   ============================================================ */

/* Trust badges strip under hero */
.trust-strip{padding:22px 0;background:#fff;border-bottom:1px solid var(--line)}
/* Four badges (BBB, Google, Trustpilot, shipping) in one centred row,
   2 + 2 below 1080px, stacked below 590px ("cic-homepage-trustpilot" demo). */
.trust-strip .wrap{display:grid;grid-template-columns:repeat(4,max-content);justify-content:center;gap:14px}
.trust-strip .tbadge{justify-content:center}
@media (max-width:1079px){.trust-strip .wrap{grid-template-columns:repeat(2,max-content)}}
@media (max-width:589px){.trust-strip .wrap{grid-template-columns:minmax(0,max-content)}}

/* Homepage "We also buy": the Type D brands' logo tiles under the category
   grid ("cic-update-oct9" demo, 2026-10-09). 7 a row, extra brands wrapping
   to a centred row; 4 a row under 1000px; a one-column list under 520px. */
.brands-sub{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
.brands-sub h3{text-align:center;font-size:1.5rem;font-weight:800}
.bw-sub{text-align:center;color:var(--muted);font-size:1rem;margin:8px 0 24px}
.bw-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.bw-tiles > .bw-tile{flex:0 0 calc((100% - 84px)/7)}
.bw-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 10px 16px;color:var(--olive);transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.bw-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--orange)}
.bw-tile.reveal{transition:opacity .6s ease,transform .6s ease}  /* same as .cat.reveal: the reveal transition wins */
.bw-tile .txt{display:flex;flex-direction:column;gap:2px}
.bw-tile .logo{display:flex;align-items:center;justify-content:center;width:100%;height:58px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.bw-tile .logo img{display:block;height:auto;max-height:34px}
.bw-logo-txt{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.01em;color:#111}
.bw-tile .name{font-family:var(--font-display);font-weight:700;font-size:.98rem}
.bw-tile .type{font-size:.8rem;color:var(--muted)}
@media (max-width:1000px){.bw-tiles > .bw-tile{flex:0 0 calc((100% - 42px)/4)}}
@media (max-width:520px){.bw-tiles{display:grid;grid-template-columns:1fr;gap:10px}
  .bw-tile .logo{width:118px;flex:none;height:40px;padding:0 14px 0 0;margin:0;border-bottom:0;border-right:1px solid var(--line);justify-content:center}.bw-tile .logo img{transform:scale(.85)}
  .bw-tile{flex-direction:row;text-align:left;gap:14px;padding:12px 16px}}

/* Colored category tiles (cohesive 4-tint cycle) */
.cat .ic{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
  background:var(--peach);transition:background .2s ease,color .2s ease,transform .2s ease}
.cat .ic svg,.cat .ic img{width:33px;height:33px}
.cat:nth-child(4n+1) .ic{background:#FFF1E6;color:#F27929}
.cat:nth-child(4n+2) .ic{background:#E7EEF3;color:#416F92}
.cat:nth-child(4n+3) .ic{background:#F1EADF;color:#977347}
.cat:nth-child(4n+4) .ic{background:#ECEBDF;color:#5C5A45}
.cat:hover .ic{transform:scale(1.07)}
.cat.placeholder-icon .ic{opacity:1}

/* 4-step connected flow */
.steps-4 .step{position:relative;overflow:visible}
.steps-4 .connector{position:absolute;top:44px;right:-21px;width:26px;height:26px;z-index:4;
  color:var(--orange);opacity:.55;display:grid;place-items:center;pointer-events:none}
.steps-4 .connector svg{width:22px;height:22px}
.steps-4 .step:last-child .connector{display:none}
@media (max-width:1000px){.steps-4 .connector{display:none}}

/* Get-paid-your-way row */
.pay-row{padding:26px 0;background:var(--wash);border-block:1px solid var(--line)}
.pay-row .wrap{display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap}
.pay-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;color:var(--olive);font-size:1.02rem}
.pay-label svg{width:20px;height:20px;color:var(--orange)}
.pay-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pay-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 12px;font-weight:600;font-size:.9rem;color:var(--olive)}
.pay-ic{display:inline-flex;width:22px;height:22px;flex:none}
.pay-ic svg{width:22px;height:22px;display:block}

/* Comparison grid */
.compare-section{background:var(--wash)}
.compare-wrap{max-width:900px;margin:0 auto;overflow-x:auto}
.compare{width:100%;min-width:660px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.compare th,.compare td{padding:14px 14px;text-align:center;border-bottom:1px solid var(--line)}
.compare thead th{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--olive);background:var(--wash)}
.compare thead .c-own-h{background:var(--orange);color:#fff}
.compare .c-corner{background:var(--wash)}
.compare tbody th[scope=row]{text-align:left;font-weight:600;color:var(--olive);font-size:.94rem;background:#fff;min-width:220px}
.compare td svg{width:18px;height:18px;vertical-align:middle}
.compare .c-yes{color:#2E7D50}
.compare .c-yes.c-own{color:#fff;background:var(--orange)}
.compare .c-no{color:#CDC8B8}
.compare .c-partial{color:var(--muted);font-weight:800;font-size:1.1rem}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
@media (max-width:600px){
  .compare{min-width:0}
  .compare th,.compare td{padding:11px 5px}
  .compare thead th{font-size:.68rem;line-height:1.18;padding:10px 4px}
  .compare thead .c-own-h{font-size:.74rem}
  .compare tbody th[scope=row]{min-width:0;width:44%;font-size:.8rem;line-height:1.3;padding:11px 6px 11px 10px}
  .compare td svg{width:17px;height:17px}
  .compare .c-partial{font-size:1.05rem}
}

/* ---------- My Account (members area) ---------- */
.account-orders{padding-block:56px 8px}
.orders-topbar{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:22px}
.orders-title{font-size:1.5rem;font-weight:800}
.orders-toggle{display:inline-flex;align-items:center;gap:8px}
.ot-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ot-btn{border:1px solid var(--line);background:#fff;color:var(--olive-soft);font:inherit;font-size:.82rem;font-weight:600;padding:5px 13px;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.ot-btn:hover{border-color:var(--orange);color:var(--orange)}
.ot-btn.is-active{background:var(--olive);color:#fff;border-color:var(--olive)}
.orders-empty[hidden],.orders-wrap[hidden]{display:none}
.orders-empty{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px;text-align:center}
.orders-empty p{color:var(--muted);font-size:1.05rem;margin-bottom:18px}
.howto{display:flex;flex-direction:column;gap:18px}
.howto-step{display:flex;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm)}
.howto-ic{flex:none;width:52px;height:52px;border-radius:14px;background:var(--peach);color:var(--brown);display:grid;place-items:center}
.howto-ic svg{width:26px;height:26px}
.howto-body h3{font-size:1.16rem;font-weight:700;margin-bottom:8px}
.howto-body p{color:var(--olive-soft);line-height:1.7;margin-bottom:8px}
.howto-body p:last-child{margin-bottom:0}
.howto-body ul{margin:8px 0 4px;padding-left:22px;color:var(--olive-soft);list-style:disc}
.howto-body li{margin-bottom:6px}
.howto-body b{color:var(--olive)}
@media (max-width:560px){.howto-step{flex-direction:column;gap:12px;padding:22px}}

/* ---------- Login / Cart ---------- */
.auth-form{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.auth-lead{text-align:center;color:var(--muted);margin-bottom:2px}
.auth-submit{width:100%;margin-top:4px}
.auth-forgot{text-align:center;color:var(--blue);font-weight:600;font-size:.92rem}
.auth-forgot:hover{color:var(--orange)}
.auth-or{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:.8rem;margin:4px 0}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-or span{padding:0 12px;text-transform:uppercase;letter-spacing:.1em}
.google-btn{width:100%;gap:11px}
.cart-empty{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-lg);padding:46px 28px;text-align:center}
.cart-empty p{font-size:1.2rem;color:var(--olive);font-family:var(--font-display);font-weight:800;margin-bottom:22px}

/* ---------- Login: two-column + card ---------- */
.auth-layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:920px;margin:0 auto;align-items:center}
.auth-aside{padding:6px 6px 6px 0}
.auth-mark{width:60px;height:60px;border-radius:50%;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.auth-mark img{width:46px;height:46px;display:block}
.auth-aside h2{font-size:1.7rem;font-weight:800;margin:18px 0 8px}
.auth-aside>p{color:var(--muted);margin-bottom:22px;font-size:1.02rem}
.auth-benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.auth-benefits li{display:flex;align-items:center;gap:13px;color:var(--olive);font-weight:500}
.ab-ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--peach);color:var(--brown);display:grid;place-items:center}
.ab-ic svg{width:20px;height:20px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px 30px}
.auth-card .auth-form{max-width:none;margin:0}
@media (max-width:820px){
  .auth-layout{grid-template-columns:1fr;gap:26px;max-width:460px}
  .auth-aside{text-align:center;padding:0}
  .auth-mark{margin:0 auto}
  .auth-benefits li{text-align:left}
}

/* ---------- Support: find-model callout + contact two-column ---------- */
.find-card{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 28px;box-shadow:var(--shadow-sm);text-align:left}
.find-ic{width:52px;height:52px;flex:none;border-radius:14px;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center}
.find-ic svg{width:26px;height:26px}
.find-text h3{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.find-text p{color:var(--muted)}
.find-text a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.find-text a:hover{color:var(--orange)}
.contact-layout{display:grid;grid-template-columns:0.85fr 1.15fr;gap:32px;max-width:960px;margin:0 auto;align-items:start}
.contact-aside{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px}
.contact-aside h3{font-size:1.2rem;font-weight:700;margin-bottom:18px}
.contact-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;align-items:center;gap:12px;color:var(--olive);font-weight:500}
.contact-list a{color:var(--olive)}
.contact-list a:hover{color:var(--orange)}
.cl-ic{width:38px;height:38px;flex:none;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--brown);display:grid;place-items:center}
.cl-ic svg{width:18px;height:18px}
.contact-list li:has(.cl-body){align-items:flex-start}
.cl-body{display:block;min-width:0}
.cl-sub{display:block;margin-top:4px;color:var(--muted);font-size:.86rem;font-weight:400;line-height:1.55}
.contact-note{color:var(--muted);font-size:.92rem;line-height:1.6;margin-bottom:20px}
.contact-note em{font-style:italic}
.contact-social{display:flex;gap:12px}
.contact-social a{width:36px;height:36px;border-radius:9px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--olive-soft);transition:.15s}
.contact-social a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.contact-social svg{width:17px;height:17px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:30px 28px}
.contact-card .contact-form{max-width:none;margin:0}
@media (max-width:820px){
  .contact-layout{grid-template-columns:minmax(0,1fr);gap:22px;max-width:520px}
  .find-card{flex-direction:column;text-align:center}
}

/* ---------- Legal pages (Privacy / Terms) ---------- */
.legal-updated{margin-top:14px;color:var(--muted);font-size:.9rem}
.legal .wrap{max-width:820px}
.legal-block{padding:30px 0;border-bottom:1px solid var(--line)}
.legal-block:first-child{padding-top:0}
.legal-block:last-of-type{border-bottom:none}
.legal-block .eyebrow{display:block;margin-bottom:8px}
.legal-block h2{font-size:1.5rem;font-weight:800;margin-bottom:14px}
.legal-block p{color:var(--olive-soft);line-height:1.75;margin-bottom:12px}
.legal-block p:last-child{margin-bottom:0}
.legal-block ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:12px}
.legal-block li{position:relative;padding-left:26px;color:var(--olive-soft);line-height:1.65}
.legal-block li::before{content:"";position:absolute;left:0;top:10px;width:13px;height:2px;background:var(--orange);border-radius:2px}
.legal-block li b{color:var(--olive)}
.legal-cta{margin-top:40px;background:var(--olive);border-radius:var(--radius-lg);padding:38px 32px;text-align:center;color:#fff}
.legal-cta h3{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:10px}
.legal-cta p{color:#D8D4C6;max-width:48ch;margin:0 auto 14px;line-height:1.6}
.legal-cta-mail{display:inline-block;color:var(--orange);font-weight:700;margin-bottom:20px}
.legal-cta-mail:hover{text-decoration:underline}

/* ---------- Cart (populated table + empty state) ---------- */
.cart-box{max-width:720px;margin:0 auto}
.cart-box[hidden]{display:none}
/* phones: a tighter header, so the cart and Proceed are on the first screen */
@media (max-width:480px){
  .page-hero.page-hero--cart{padding-block:24px}
  .page-hero--cart + .cart-section{padding-top:24px}
}
/* reusable confirm modal */
.cic-confirm-overlay{position:fixed;inset:0;z-index:10000;background:rgba(46,44,34,.55);display:none;align-items:center;justify-content:center;padding:20px}
.cic-confirm-overlay.is-open{display:flex}
.cic-confirm-modal{background:#fff;border-radius:16px;max-width:400px;width:100%;padding:28px 26px 22px;text-align:center;box-shadow:var(--shadow-md)}
.cic-confirm-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--orange-tint);color:var(--orange-dark);display:flex;align-items:center;justify-content:center}
.cic-confirm-icon svg{width:24px;height:24px}
.cic-confirm-message{color:var(--olive);font-size:1.02rem;line-height:1.5;margin-bottom:20px}
.cic-confirm-actions{display:flex;gap:10px}
.cic-confirm-actions .btn{flex:1;justify-content:center}
.cic-confirm-ok{--bg:var(--orange-dark);--bd:var(--orange-dark)}
/* Notice mode: one button, and a green tick rather than the orange bin. */
.cic-confirm-overlay.is-notice .cic-confirm-icon{background:#E7F3EC;color:#2E7D50}
.cic-confirm-actions .cic-confirm-cancel[hidden]{display:none}
.cart-table{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.cart-head{display:grid;grid-template-columns:1fr auto 44px;gap:14px;align-items:center;padding:15px 20px;background:var(--wash);border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:700;color:var(--olive);font-size:.9rem}
.cart-head .ch-dev em{font-style:normal;color:var(--muted);margin-left:2px}
.cart-head .ch-val{text-align:right}
.cart-row{display:grid;grid-template-columns:1fr auto 44px;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:none}
.ci-name{color:var(--olive);font-weight:500;line-height:1.4}
.ci-num{color:var(--muted);font-weight:700;margin-right:10px}
.ci-val{text-align:right;font-family:var(--font-display);font-weight:700;color:var(--olive);white-space:nowrap}
.ci-del{width:34px;height:34px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:8px;display:grid;place-items:center;transition:background .15s,color .15s;justify-self:end}
.ci-del:hover{background:#FBE7E1;color:#D9463A}
.ci-del svg{width:18px;height:18px}
/* A configured Laptop / Desktop row: phones fold its picks behind "Specs ›" (page-cart.php) */
.ci-spec-toggle,.ci-sub--phone,.ci-specs{display:none}
@media (max-width:480px){
  .cart-row--specs .ci-name > a,.cart-row--specs .ci-name > .ci-sub:not(.ci-sub--phone){display:none}
  .ci-spec-toggle{display:inline;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
  .ci-sub--phone{display:block}
  .ci-caret{display:inline-block;transition:transform .2s}
  .ci-spec-more[aria-expanded="true"] .ci-caret{transform:rotate(90deg)}
  .ci-specs:not([hidden]){display:block;font-size:.82rem;color:var(--muted);font-weight:400;margin-top:2px}
  .ci-specs > span{display:block}
}
.cart-total{display:grid;grid-template-columns:1fr auto 44px;gap:14px;align-items:center;padding:16px 20px;background:var(--wash);border-top:1px solid var(--line)}
.ct-label{text-align:right;font-family:var(--font-display);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.ct-val{text-align:right;font-family:var(--font-display);font-weight:800;color:var(--olive);font-size:1.15rem;white-space:nowrap}
.cart-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cart-empty[hidden]{display:none}
@media (max-width:560px){
  .cart-head,.cart-row,.cart-total{grid-template-columns:1fr auto 38px;gap:10px;padding:14px 16px}
  .cart-actions .btn{flex:1}
}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.checkout-main{display:flex;flex-direction:column;gap:0}
.co-step{border-bottom:1px solid var(--line)}
.co-step:first-child{border-top:1px solid var(--line)}
.co-head{width:100%;display:flex;align-items:center;gap:10px;padding:22px 4px;background:none;border:none;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--olive);cursor:pointer;text-align:left}
.co-head--static{cursor:default}
.co-num{color:var(--muted)}
.co-summary{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--muted)}
/* .co-summary's display would beat the hidden attribute and show the check before the step is done */
.co-summary[hidden]{display:none}
.co-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#E7F3EC;color:#2E7D50}
.co-check svg{width:13px;height:13px}
.co-step:not(.is-open) .co-head[type=button]{color:var(--olive-soft)}
.co-body{padding:4px 4px 28px}
.co-fieldset{border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin:0 0 20px}
/* width: Safari stretches a legend inside a flex fieldset (.account-col) to full width, opening the border to the corner */
.co-fieldset legend{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 8px;width:max-content;max-width:100%}
/* payment tiles */
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.pay-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;font:inherit}
.pay-tile:hover{border-color:var(--orange-soft,#F2A96B)}
.pay-tile.is-active{border-color:var(--orange);background:var(--orange-tint);box-shadow:0 0 0 3px rgba(242,121,41,.12)}
.pt-ic{width:30px;height:30px;display:grid;place-items:center;color:var(--olive)}
.pt-ic svg{width:26px;height:26px}
.pt-label{font-weight:600;font-size:.9rem;color:var(--olive)}
.pay-detail{margin-top:4px}
.pay-detail .cf-field{margin-bottom:14px}
.pay-note{background:var(--orange-tint);border:1px solid #F6D9C2;border-radius:10px;padding:12px 14px;color:var(--olive-soft);font-size:.9rem;line-height:1.5}
/* shipping grid */
.ship-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.ship-grid .cf-field{display:flex;flex-direction:column;gap:6px}
.ship-grid .cf-field>span{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--olive)}
.ship-grid .cf-field>span em{font-style:normal;color:var(--muted);font-weight:500}
.cf-wide{grid-column:span 3}
.ship-note{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--muted);font-size:.92rem}
.ship-note svg{width:17px;height:17px;color:var(--orange)}
/* terms + checkout */
.terms-check{display:flex;align-items:flex-start;gap:10px;color:var(--olive-soft);line-height:1.5;cursor:pointer}
.terms-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange);flex:none}
.terms-check a{color:var(--blue);font-weight:600;text-decoration:underline}
.terms-error{margin:14px 0 0;color:#C0392B;background:#FBE7E1;border:1px solid #F3C9BE;border-radius:10px;padding:11px 14px;font-size:.9rem;font-weight:500}
.terms-error[hidden]{display:none}
.co-next,.co-checkout{width:100%}
.checkout-done{margin-top:16px;display:flex;align-items:center;gap:10px;background:#E7F3EC;border:1px solid #BCE0C9;color:#2E7D50;border-radius:12px;padding:14px 16px;font-weight:600}
.checkout-done[hidden]{display:none}
.checkout-done svg{width:18px;height:18px;flex:none}
/* order summary */
.checkout-summary{position:sticky;top:24px}
.os-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.os-head{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.os-head em{font-style:normal;color:var(--olive)}
.os-item{display:flex;justify-content:space-between;gap:14px;padding:10px 0;font-size:.92rem}
.os-name{color:var(--olive);font-weight:600;line-height:1.4}
.os-val{color:var(--olive-soft);font-weight:700;white-space:nowrap}
.os-ship{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;color:var(--olive-soft)}
.os-free{color:#2E7D50;font-weight:800;letter-spacing:.03em}
.os-total{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:6px;padding-top:16px;font-family:var(--font-display);font-weight:800;color:var(--olive)}
.os-total-val{color:var(--orange);font-size:1.15rem}
@media (max-width:900px){
  .checkout-layout{grid-template-columns:1fr}
  .checkout-summary{position:static;order:-1}
  .pay-grid{grid-template-columns:repeat(2,1fr)}
  .ship-grid{grid-template-columns:1fr 1fr}
  .cf-wide{grid-column:span 2}
}
@media (max-width:480px){
  .ship-grid{grid-template-columns:1fr}
  .cf-wide{grid-column:span 1}
  .co-summary{font-size:.82rem}
  .pay-grid{grid-auto-rows:1fr}
  .pay-tile{justify-content:center}
}

/* ---------- Checkout: logged-out account step ---------- */
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.account-col{margin:0;display:flex;flex-direction:column}
.account-col .cf-field{margin-bottom:14px}
.account-col .cf-field>span{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--olive)}
/* Validation errors always win over the label-span rules above (they are more
   specific), so keep this last and match the same shapes. */
.checkout-main .cf-error,.cf-field>span.cf-error,
.ship-grid .cf-field>span.cf-error,.account-col .cf-field>span.cf-error,
.pay-detail .cf-field>span.cf-error{
  color:#C0392B;font-family:var(--font-body);font-weight:400;font-size:.82rem;margin-top:-1px}
.co-account-next{width:100%}
.acct-alt{margin-top:14px;text-align:center;font-size:.9rem;color:var(--muted)}
.acct-alt a{color:var(--blue);font-weight:600}
.account-col .auth-or{margin:16px 0}
.account-col .google-btn{width:100%;margin-top:0}
/* sap's order puts the Google button above the continue button: the fields' 14px between them */
.account-col .google-btn + .co-account-next{margin-top:14px}
@media (max-width:640px){.account-grid{grid-template-columns:1fr}}

/* ---------- Order complete: print label + carriers ---------- */
.print-section{text-align:center}
/* Two 304px tiles + the 20px gap. Narrower screens shrink both equally. */
.carrier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:628px;margin:0 auto}
/* order complete, one label per device (Settings → Box Manager → Enable Multiple Labels) */
.oc-device-label{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--olive);margin:28px 0 14px}
.oc-device-label:first-of-type{margin-top:0}
.carrier-tile{display:flex;flex-direction:column;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);min-width:0}
.carrier-logo{height:72px;display:grid;place-items:center}
.carrier-logo svg{height:68px;width:auto;max-width:150px}
/* Equal columns: 1fr alone lets a column grow to its unbreakable button text,
   so the longer USPS label widened its tile and pushed the pair past the grid.
   minmax(0,1fr) keeps both halves identical; the button may wrap instead. */
.carrier-tile .btn{width:100%;gap:8px;white-space:normal;text-align:center;padding-inline:16px;flex:1 1 auto}
/* flex:1 lets each button fill its tile, and the tiles in a row share a height,
   so when only one label wraps both buttons still end up the same height. */
.carrier-tile .btn svg{width:1.05em;height:1.05em}
.order-details-link{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.odl-ic{width:48px;height:48px;border-radius:14px;background:var(--wash);border:1px solid var(--line);color:var(--olive);display:grid;place-items:center;margin-bottom:4px}
.odl-ic svg{width:24px;height:24px}
.order-details-link p{color:var(--muted);font-size:.95rem}
.odl-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-family:var(--font-display)}
.odl-link svg{width:1.05em;height:1.05em}
.odl-link:hover{color:var(--orange)}
@media (max-width:520px){.carrier-grid{grid-template-columns:1fr;max-width:340px}}

/* Cart trust-reassurance cap (populated state only) */
.cart-reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.cart-reassure span{display:inline-flex;align-items:center;gap:8px;color:var(--olive-soft);font-weight:600;font-size:.92rem}
.cart-reassure svg{width:18px;height:18px;color:var(--orange);flex:none}

/* ---------- Order details ---------- */
.order-detail-section .wrap{max-width:860px}
.order-topline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}
.ot-num{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--olive)}
.ot-payout{font-family:var(--font-display);font-weight:700;color:var(--olive-soft)}
.ot-payout b{color:#2E7D50}
/* status tracker */
.order-status{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px 22px;margin-bottom:32px}
.os-status-label{text-align:center;font-family:var(--font-display);font-weight:700;color:var(--olive);margin-bottom:26px}
.os-status-label b{color:var(--orange)}
.os-track{position:relative}
.os-base,.os-fill{position:absolute;top:11px;height:3px;border-radius:3px}
.os-base{left:0;right:0;background:var(--line)}
.os-fill{left:0;background:var(--orange);transition:width .4s}
.os-stages{position:relative;z-index:2;display:flex;justify-content:space-between}
.os-stage{display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;text-align:center}
.os-dot{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--line);transition:.2s}
.os-stage.is-done .os-dot{background:var(--orange);border-color:var(--orange)}
.os-stage.is-current .os-dot{box-shadow:0 0 0 4px rgba(242,121,41,.2)}
.os-name{font-size:.78rem;color:var(--muted);line-height:1.2}
.os-stage.is-done .os-name{color:var(--olive);font-weight:600}
/* print block */
.print-block{text-align:center;margin-bottom:34px}
.print-lead{font-weight:600;color:var(--olive);margin-bottom:16px}
.print-block .carrier-grid{max-width:628px}
/* detail cards */
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:34px}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.detail-head{background:var(--wash);border-bottom:1px solid var(--line);padding:15px 20px;font-family:var(--font-display);font-weight:700;color:var(--olive)}
.detail-row{padding:13px 20px;border-top:1px solid var(--line)}
.detail-row:first-of-type{border-top:none}
.dr-label{display:block;font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--olive)}
.dr-val{display:block;color:var(--olive-soft);margin-top:2px}
.dr-specs{display:block;font-size:.88rem;color:var(--muted);margin-top:4px;line-height:1.5}
.dr-specs > span{display:block}
/* order messages */
.order-messages h3{font-size:1.25rem;font-weight:800;margin-bottom:14px}
.msg-box{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.msg-prompt{text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--muted);font-weight:500;margin-bottom:16px}
.msg-box textarea{width:100%;font:inherit;font-size:.98rem;color:var(--olive);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;resize:vertical;min-height:96px}
.msg-box textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,121,41,.15)}
.msg-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.msg-attach{color:var(--blue);font-weight:600;font-size:.9rem}
.msg-attach:hover{color:var(--orange)}
.msg-result{margin-top:12px;padding:12px 14px;border-radius:10px;background:#E7F3EC;border:1px solid #BCE0C9;color:#2E7D50;font-weight:600;font-size:.92rem}
.msg-result[hidden]{display:none}
.msg-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:14px}
/* inspection result card (order-details) — a pixel match for the email's
   [inspection_widget] (cic-orders class-emailer.php::build_inspection_widget),
   so the card reads identically in the inbox and on the page. Figures are the
   email's own px values, not this sheet's rem scale, and the email carries no
   breakpoint for this card, so neither does this. */
.insp-card{background:#fff;border:1px solid #E7E4DB;border-radius:12px;overflow:hidden;margin-bottom:34px}
.insp-card--with-photos{margin-bottom:20px}
.insp-head{background:#434230;padding:14px 20px;font-family:var(--font-display);font-size:12px;font-weight:700;color:#fff;letter-spacing:.08em;text-transform:uppercase}
.insp-body{padding:18px 20px}
.insp-label{font-size:11px;font-weight:700;color:#8A8676;letter-spacing:.07em;text-transform:uppercase}
/* the two figures, 50/50 either side of a rule — the email's first inner table */
.insp-summary{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #E7E4DB}
.insp-fig{padding:0 8px 14px 0}
.insp-fig--accent{padding:0 0 14px 8px;border-left:1px solid #E7E4DB;text-align:right}
.insp-fig-label{display:block;font-size:11px;font-weight:700;color:#8A8676;letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px}
.insp-fig-val{display:block;font-family:var(--font-display);font-size:22px;font-weight:800;color:#434230;line-height:1.15;letter-spacing:-.02em}
.insp-fig--accent .insp-fig-val{color:#F27929}
/* nothing changed */
.insp-badge-wrap{margin:16px 0 2px}
.insp-badge{display:inline-block;background:#E7F3EC;color:#2E7D50;font-family:var(--font-display);font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px}
.insp-confirm-table{width:100%;border-collapse:collapse;margin-top:14px}
.insp-ct-label{font-size:14px;color:#726F60;padding:12px 0;border-top:1px solid #F2EFE7;text-align:left}
.insp-ct-val{font-family:var(--font-display);font-weight:700;font-size:14px;color:#434230;padding:12px 0;border-top:1px solid #F2EFE7;text-align:right}
/* something changed */
.insp-changes-label{display:block;margin:18px 0 12px}
.insp-change-table{width:100%;table-layout:fixed;border-collapse:collapse}
.insp-col-cat{width:100px}
.insp-col-delta{width:80px}
.insp-change-table td{border-top:1px solid #F2EFE7;vertical-align:top}
.insp-ch-cat{font-family:var(--font-display);font-weight:700;font-size:14px;color:#434230;white-space:nowrap;padding:12px 14px 12px 0;text-align:left}
.insp-ch-val{font-size:14px;color:#434230;padding:12px 0}
.insp-ch-old{color:#8A8676;text-decoration:line-through}
.insp-ch-arrow{color:#8A8676}
.insp-ch-new{font-family:var(--font-display)}
.insp-ch-note{color:#726F60}
.insp-confirmed{color:#8A8676;font-size:12px}
.insp-ch-delta{font-family:var(--font-display);font-weight:700;font-size:14px;color:#B4462F;white-space:nowrap;padding:12px 0 12px 8px;text-align:right}
.insp-ch-delta--up{color:#2E7D50}
/* remarks */
.insp-remarks{margin-top:18px;padding-top:18px;border-top:1px solid #E7E4DB}
.insp-panel{background:#FBF9F4;border:1px solid #E7E4DB;border-radius:8px;padding:12px 14px;margin-top:12px}
.insp-chip{display:inline-block;background:#fff;border:1px solid #E7E4DB;border-radius:8px;padding:6px 12px;margin:3px 4px 3px 0;font-size:13px;font-weight:500;color:#434230}
.insp-none{font-size:14px;color:#8A8676;font-style:italic;margin:0}
/* the wash strip the email closes on */
.insp-foot{background:#FBF9F4;border-top:1px solid #E7E4DB;padding:18px 20px}
.insp-foot-lead{font-size:14px;color:#726F60;line-height:1.55;margin:0 0 12px;text-align:center}
.insp-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* flex centres the one label span, so a one-line label sits level with a two-line one beside it */
.insp-btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;font-family:var(--font-display);font-weight:700;font-size:14px;text-decoration:none;border-radius:999px;transition:background .15s,border-color .15s}
.insp-btn--ghost{background:#fff;color:#434230;border:2px solid #E7E4DB;padding:11px 16px}
.insp-btn--ghost:hover{border-color:#434230;color:#434230}
.insp-btn--go{background:#2E7D50;color:#fff;padding:13px 16px}
.insp-btn--go:hover{background:#276943;color:#fff}
/* A spent control: the offer has been taken, so neither button acts again.
   pointer-events is the visual half; the markup carries no href and
   footer.php swallows the click, so neither depends on this sheet loading. */
.insp-btn.is-disabled{opacity:.55;cursor:default;pointer-events:none}
.insp-btn--ghost.is-disabled{background:#F2EFE7;color:#8A8676;border-color:#E7E4DB}
.insp-btn svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.insp-foot-note{font-size:12px;color:#8A8676;line-height:1.55;text-align:center;margin:14px 0 0}
.insp-foot-note strong{color:#434230}
/* inspection photos — their own card under the results, per the reference
   order-details page; the email can only link back here, so this is where the
   photos actually live. */
.inspection-images{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;margin-bottom:34px}
.inspection-images h3{font-size:1.1rem;font-weight:700;color:var(--olive);margin:0 0 6px}
.insp-photos-lead{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.insp-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.insp-photo{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.insp-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.insp-photo:hover img{transform:scale(1.03)}
@media (max-width:640px){.insp-photo-grid{grid-template-columns:1fr 1fr}}
/* shared lightbox — the inspection grid and each chat message's attachments */
.cic-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center}
.cic-lightbox[hidden]{display:none}
.cic-lb-img{max-width:90vw;max-height:86vh;border-radius:8px}
.cic-lb-close{position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer}
.cic-lb-count{position:absolute;top:24px;left:0;right:0;text-align:center;color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.04em;pointer-events:none}
.cic-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:none;color:#fff;font-size:2.4rem;width:52px;height:64px;cursor:pointer;border-radius:8px}
.cic-lb-nav[hidden]{display:none}
.cic-lb-prev{left:16px}.cic-lb-next{right:16px}
/* per-device chat widget (order-details). The box, prompt, actions and note are
   the reference page's .order-messages; the thread is ours — the reference has
   no messages to show — so it borrows the prompt's white panel and stays out of
   the way entirely until there is something in it. */
.order-messages{margin-bottom:34px}
.msg-thread{max-height:420px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px}
.msg-thread:empty{display:none}
/* the prompt is an invitation to start, so it goes once the thread has
   anything in it — the thread is its previous sibling, which keeps this
   true as the poll fills it. */
.msg-thread:not(:empty)+.msg-prompt{display:none}
.od-msg-row{display:flex}
.od-msg-row.od-msg-right{justify-content:flex-end}
.od-msg-bubble{max-width:78%;border:1px solid var(--line);border-radius:14px;padding:10px 13px}
.od-msg-bubble.from-us{background:var(--wash);border-top-left-radius:4px}
.od-msg-bubble.from-customer{background:var(--orange-tint);border-color:#F6D3B4;border-top-right-radius:4px}
.od-msg-meta{font-size:.72rem;color:var(--muted);font-weight:600;margin-bottom:4px}
.od-msg-text{color:var(--olive);font-size:.95rem;line-height:1.5;word-wrap:break-word}
/* The global reset is a{color:inherit;text-decoration:none}, so a link we send
   (the inspection result's Accept Offer) rendered as flat body text. Same
   treatment as an inline link anywhere else on the site — .prose a / .note a. */
.od-msg-text a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.od-msg-text a:hover{color:var(--orange);text-decoration-thickness:2px}
.od-msg-bubble.from-customer .od-msg-text a{color:var(--orange-dark)}
.od-msg-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.od-msg-imgs img{width:88px;height:88px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.msg-attach{cursor:pointer}
.msg-attach-names{font-size:.8rem;color:var(--muted);margin-top:6px;word-break:break-all}
@media (max-width:640px){
  .details-grid{grid-template-columns:1fr}
  .od-msg-bubble{max-width:88%}
  .os-name{font-size:.7rem}
  .os-dot{width:20px;height:20px}
  .os-base,.os-fill{top:9px}
}

/* ---------- Account: order history table ---------- */
.account-orders .wrap{max-width:1080px}
.orders-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.orders-table{width:100%;min-width:800px;border-collapse:collapse;background:#fff}
.orders-table th{text-align:left;font-family:var(--font-display);font-weight:700;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:14px 16px;background:var(--wash);border-bottom:1px solid var(--line);white-space:nowrap}
.orders-table td{padding:16px;border-bottom:1px solid var(--line);color:var(--olive-soft);font-size:.92rem;vertical-align:top;line-height:1.4}
.orders-table tbody tr:last-child td{border-bottom:none}
.ord-num{display:block;font-family:var(--font-display);font-weight:700;color:var(--olive)}
.ord-view{font-size:.82rem;color:var(--blue);font-weight:600}
.ord-view:hover{color:var(--orange)}
.ord-nowrap{white-space:nowrap}
.ord-status{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--orange-tint);color:var(--orange-dark);font-weight:600;font-size:.8rem;white-space:nowrap}
.ord-track{color:var(--muted)}
.ord-print{color:var(--blue);font-weight:600}
.ord-print:hover{color:var(--orange)}
.ord-val{font-family:var(--font-display);font-weight:700;color:var(--olive);white-space:nowrap}
/* phones: one card per order — number and status, then device, date, View details */
@media (max-width:480px){
  .orders-table{min-width:0}
  .orders-table thead{display:none}
  .orders-table,.orders-table tbody{display:block}
  .orders-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:16px;border-bottom:1px solid var(--line)}
  .orders-table tbody tr:last-child{border-bottom:none}
  .orders-table td{display:block;padding:0;border:none}
  .orders-table td.ord-id{display:contents}
  .orders-table .ord-num{grid-column:1;grid-row:1;align-self:center}
  .orders-table td.ord-state{grid-column:2;grid-row:1}
  .orders-table td.ord-device{grid-column:1 / -1;grid-row:2;color:var(--olive)}
  .orders-table td.ord-date{grid-column:1 / -1;grid-row:3}
  .orders-table .ord-view{grid-column:1 / -1;grid-row:4;margin-top:4px}
  .orders-table td.ord-track,.orders-table td.ord-print,.orders-table td.ord-val{display:none}
}

/* ---------- Sell-laptop category page ---------- */
.breadcrumb{border-bottom:1px solid var(--line);background:#fff}
.breadcrumb .wrap{display:flex;align-items:center;gap:8px;padding-top:14px;padding-bottom:14px;font-size:.9rem;color:var(--muted);flex-wrap:wrap}
.breadcrumb a{color:var(--blue);font-weight:600}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{color:var(--line)}
.breadcrumb .bc-current{color:var(--olive-soft);font-weight:600}
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:36px}
.brand-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:128px;padding:20px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.brand-tile:hover{border-color:var(--orange);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.brand-logo{height:54px;display:flex;align-items:center;justify-content:center}
/* Scott 11-06: square logos came out tiny at one fixed height. Every logo now fits a 105 x 50 box, so a square one grows to
   50 x 50 and a wide one keeps its 105 width; the tile stays the same size. */
/* series buttons keep the same height in the stand-in font and in Inter, so nothing below them moves when the web font arrives (11-11) */
.series-pill{line-height:1.2}
.brand-logo svg,.brand-logo img{height:50px;width:105px;max-width:100%;display:block}
.brand-logo img{object-fit:contain}   /* logos are image files since 11-11 (cic_brand_logo); same box as the inline SVG had */
.brand-mono{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--wash);color:var(--brown);font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--olive-soft);letter-spacing:.04em;text-transform:uppercase}
.trust3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:900px;margin:0 auto;text-align:center}
.trust3-card h3{font-size:1.1rem;font-weight:800;margin-bottom:8px}
.trust3-card p{color:var(--muted);line-height:1.6;font-size:.95rem}
.prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px}
@media (max-width:900px){.brand-grid{grid-template-columns:repeat(4,1fr)}.trust3{grid-template-columns:1fr;max-width:460px;gap:22px}}
@media (max-width:680px){.prep-grid{grid-template-columns:1fr}}
@media (max-width:520px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Brand page: model finder ---------- */
.model-finder{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff}
.model-filter{width:100%;border:none;border-bottom:1px solid var(--line);padding:16px 20px;font:inherit;font-size:1rem;color:var(--olive)}
.model-filter:focus{outline:none;background:var(--wash)}
.model-list{list-style:none;margin:0;padding:0;max-height:380px;overflow-y:auto}
.model-list li a{display:block;padding:14px 20px;border-bottom:1px solid var(--line);color:var(--blue);font-weight:600;font-size:.95rem;transition:background .12s}
.model-list li:last-child a{border-bottom:none}
.model-list li a:hover{background:var(--orange-tint);color:var(--orange-dark)}
.model-help{margin-top:16px;color:var(--muted);font-size:.92rem}
.model-help a{color:var(--blue);font-weight:600}
.brand-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin-top:32px;color:var(--olive-soft);font-weight:600;font-size:.92rem}
.brand-trust .bt-dot{color:var(--line)}
@media (max-width:480px){
  .brand-trust{flex-direction:column;align-items:center;gap:6px}
  .brand-trust .bt-dot{display:none}
}

/* ---------- Quote page ---------- */
.quote-model{font-size:1.9rem;font-weight:800;line-height:1.2;margin-bottom:28px}
.quote-tool{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.qt-group{border:none;padding:0;margin:0 0 28px}
.qt-group legend{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:12px}
.qt-opt{display:flex;align-items:center;gap:11px;padding:11px 2px}
.qt-choice{display:flex;align-items:center;gap:11px;cursor:pointer;flex:1}
.qt-opt input{position:absolute;opacity:0;width:0;height:0}
.qt-mark,.qt-box{flex:none;width:20px;height:20px;border:2px solid var(--line);display:grid;place-items:center;transition:.15s;background:#fff}
.qt-mark{border-radius:50%}
.qt-box{border-radius:6px}
.qt-opt input:checked~.qt-mark{border-color:var(--orange)}
.qt-opt input:checked~.qt-mark::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange)}
.qt-opt input:checked~.qt-box{border-color:var(--orange);background:var(--orange)}
.qt-opt input:checked~.qt-box::after{content:"";width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.qt-opt input:focus-visible~.qt-mark,.qt-opt input:focus-visible~.qt-box{box-shadow:0 0 0 3px rgba(242,121,41,.25)}
.qt-label{color:var(--olive);font-weight:500}
.qmark{position:relative;flex:none;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;font-size:.74rem;font-weight:800;display:grid;place-items:center;cursor:pointer;margin-left:2px}
.qmark-tip{display:none;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:210px;max-width:72vw;background:var(--olive);color:#fff;font-size:.8rem;font-weight:500;line-height:1.45;padding:9px 12px;border-radius:10px;box-shadow:var(--shadow-md);z-index:30;text-align:left;pointer-events:none}
.qmark-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--olive)}
.qmark:hover .qmark-tip,.qmark.is-open .qmark-tip{display:block}
.offer-box{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;text-align:center}
.offer-label{display:block;font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.offer-val{display:block;font-family:var(--font-display);font-weight:800;font-size:3rem;color:#2E7D50;line-height:1.1;margin:8px 0 20px}

/* =============================================
   Model quote page — sap's model page (v42 layout) in the "CIC model page"
   demo's markup and rules (2026-10-09): quote card (headline, picture, Add to
   cart) beside the condition card; a sticky quote bar on phones.
============================================= */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cic-model-page .section .wrap.narrow{max-width:1040px}
.cic-model-page .section .quote-model{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px}
.mq-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.mq-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;min-width:0}
.mq-quote{display:flex;flex-direction:column}
.mq-head{padding:26px 24px 22px;text-align:center;border-bottom:1px solid var(--line);background:var(--wash)}
.mq-model{display:block;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--olive);margin-top:6px}
.mq-head .offer-val{margin:6px 0 0}
/* An iPad combination Sauce doesn't buy: its Contact us line stands in for the price (2026-11-04). */
.mq-head .offer-val[hidden]{display:none}
.mq-photo{flex:1 1 auto;min-height:260px;display:grid;place-items:center;padding:20px}
.mq-photo img{max-width:88%;max-height:340px;width:auto;height:auto;object-fit:contain}
.mq-actions{padding:20px 24px 22px;border-top:1px solid var(--line);background:var(--wash)}
.mq-actions .btn{width:100%}
.mq-promise{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:.84rem;line-height:1.45;color:var(--muted)}
.mq-promise strong{color:var(--olive);font-weight:600}
.mq-promise a{color:var(--blue);font-weight:600}
.mq-promise-ic{flex:0 0 22px;color:#2E7D50}
.mq-promise-ic svg{width:22px;height:22px}
.mq-cond-head{display:flex;gap:14px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line);background:var(--wash)}
.mq-cond-ic{flex:0 0 38px;height:38px;border-radius:10px;background:var(--orange-tint);color:var(--orange-dark);display:grid;place-items:center}
.mq-cond-ic svg{width:20px;height:20px}
.mq-cond-title{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--olive)}
.mq-cond-sub{font-size:.88rem;color:var(--muted);margin-top:2px}
.mq-opts{border:0;margin:0;padding:0}
.mq-opt{position:relative;display:flex;gap:14px;align-items:center;padding:16px 24px 16px 21px;border-left:3px solid transparent;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.mq-opt:last-child{border-bottom:0}
.mq-opt:hover{background:var(--cream)}
.mq-opt input{position:absolute;opacity:0;pointer-events:none}
.mq-opt input:focus-visible ~ .mq-radio{outline:2px solid var(--orange);outline-offset:2px}
.mq-radio{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;align-self:center}
.mq-opt.is-selected{background:var(--cream);border-left-color:var(--orange)}
.mq-opt.is-selected .mq-radio{border-color:var(--orange);background:var(--orange)}
.mq-opt.is-selected .mq-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.mq-opt-body{flex:1;min-width:0;display:grid;gap:3px}
.mq-opt-name{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--olive)}
.mq-opt.is-selected .mq-opt-name{color:var(--orange-dark)}
.mq-opt-desc{font-size:.86rem;line-height:1.5;color:var(--muted)}
.mq-bonus{display:inline-block;position:relative;top:-27px;margin-left:8px;z-index:2;padding:4px 10px;border-radius:999px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;transform:rotate(-4deg);white-space:nowrap;vertical-align:middle}
.mq-pill{flex:0 0 auto;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--olive);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.mq-opt.is-selected .mq-pill{background:#2E7D50;border-color:#2E7D50;color:#fff}
.mq-sticky{display:none}
/* No picture: sap's placeholder (.model-img-placeholder) — the category's
   icon, faint, over the model name. */
/* No-photo model page (Scott 11-13): the category icon drawn like the faded no-photo picture it replaces (same size
   and beige), so the 2,543 per-model copies of that picture can go without the page looking different; the model
   name under it is hidden because the heading right above already says it */
.mq-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:#CFC8B8;text-align:center}
.mq-placeholder svg{width:min(180px,32vw);height:min(180px,32vw)}
.mq-placeholder span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* No quote and not retired: sap's one-line note in the right column. */
.mq-noquote{align-self:start;margin:0;color:var(--muted)}
.mq-noquote a{color:var(--blue);font-weight:600}
/* Retired: sap's two panels (.cfg-retired-*), its colours on CIC's tokens.
   Their form and links are inactive for now (the user's call of 2026-10-09). */
.mq-grid > .cfg-retired-panel{align-self:start}
.cfg-retired-panel{background:#fdf8ec;border:1px solid rgba(242,121,41,.45);border-radius:var(--radius-lg);padding:32px 36px}
.cfg-retired-panel-title{font-family:var(--font-display);font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--olive);margin:0 0 16px;line-height:1.2}
.cfg-retired-panel-text{font-size:1rem;color:var(--olive-soft);line-height:1.7;margin:0 0 16px}
.cfg-retired-panel-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.cfg-retired-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:#fff;background:var(--orange);border-radius:12px;padding:14px 26px;text-decoration:none;transition:filter .18s,transform .18s}
.cfg-retired-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cfg-retired-diy{margin:18px 0 0;font-size:.92rem;color:var(--olive-soft);line-height:1.6}
.cfg-retired-diy a{color:var(--olive);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cfg-retired-diy a:hover{color:var(--orange-dark)}
.cfg-retired-panel--quote{background:#f0faf4;border-color:#BCE0C9}
.cfg-retired-btn--primary{border:none;cursor:pointer}
.cfg-quote-req-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.cfg-quote-req-row input[type="email"]{flex:1 1 220px;min-width:0;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--font-body);font-size:.95rem;color:var(--olive);background:#fff;outline:none;transition:border-color .18s}
.cfg-quote-req-row input[type="email"]:focus{border-color:var(--orange)}
.cfg-quote-req-browse{display:inline-block;margin-top:16px;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--olive);text-decoration:none}
.cfg-quote-req-browse:hover{text-decoration:underline}
.cfg-quote-req-err{color:#c81e1e;font-size:.85rem;margin:14px 0 0}
.cfg-quote-req-done{font-size:1rem;font-weight:600;color:#2E7D50;margin:20px 0 0}
.cfg-quote-req .cf-turnstile{margin-top:12px}
@media (max-width:760px){
  .mq-grid{grid-template-columns:1fr;gap:22px}
  .mq-photo{min-height:200px}.mq-photo img{max-height:200px}
  .mq-opt{padding:14px 16px 14px 13px}.mq-cond-head{padding:16px}
  .cfg-retired-panel{padding:24px 22px}
  .mq-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--olive);color:#fff;box-shadow:0 -6px 20px rgba(46,45,35,.18)}
  .mq-sticky[hidden]{display:none}   /* a laptop pair Sauce doesn't buy: no offer to keep in reach */
  .mq-sticky-label{display:block;font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
  .mq-sticky-price{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1.1}
  .mq-sticky .btn{flex:0 0 auto;padding:11px 20px}
  /* Room for the bar, only where there is one. */
  body.cic-model-page:has(.mq-sticky){padding-bottom:76px}
}
.offer-add{width:100%}
.offer-added{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;color:#2E7D50;font-weight:600;font-size:.92rem}
.offer-added[hidden]{display:none}
.offer-added svg{width:16px;height:16px}.offer-added a{color:var(--blue);text-decoration:underline}
.trust-promise{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)}
.tp-seal{flex:none;width:44px;height:44px;border-radius:50%;background:#E7F3EC;color:#2E7D50;display:grid;place-items:center}
.tp-seal svg{width:24px;height:24px}
.tp-body h4{font-size:1rem;font-weight:800;margin-bottom:4px}
.tp-body p{color:var(--muted);font-size:.9rem;line-height:1.5}
.tp-body a{color:var(--blue);font-weight:600}
@media (max-width:760px){.quote-tool{grid-template-columns:1fr;gap:26px}.quote-model{font-size:1.55rem}}

/* ---------- Brand page: how-it-works strip ---------- */
.mini-steps{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.ms-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:210px}
.ms-ic{width:50px;height:50px;border-radius:14px;background:var(--peach);color:var(--brown);display:grid;place-items:center}
.ms-ic svg{width:25px;height:25px}
.ms-t{font-size:.9rem;color:var(--olive-soft);font-weight:600;line-height:1.4}
.ms-sep{color:var(--orange);display:flex}
.ms-sep svg{width:20px;height:20px}
@media (max-width:640px){.mini-steps{flex-direction:column}.ms-sep{transform:rotate(90deg)}}

/* ---------- Order details: canceled state (tracker turns red + full) ---------- */
.status-toggle{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.order-status.is-canceled{background:#FBE9E4;border-color:#F1C4B8}
.order-status.is-canceled .os-fill{background:#D9463A}
.order-status.is-canceled .os-dot{background:#D9463A;border-color:#D9463A;box-shadow:none}
.order-status.is-canceled .os-name{color:var(--muted)}
.order-status.is-canceled .os-status-label b{color:#C0392B;text-transform:uppercase;letter-spacing:.05em}

/* brand grid: 2-up on phones */
@media (max-width:480px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* very small phones (<=400px): tighten tracker + contact aside so nothing overflows at 320px */
@media (max-width:400px){
  .os-name{font-size:.58rem;line-height:1.15}
  .os-stages{gap:0}
  .contact-aside{padding:24px 18px}
  .contact-list li{min-width:0}
  .contact-list a,.contact-list li,.contact-note{word-break:break-word;overflow-wrap:anywhere}
}

/* Payment pills: consistent spacing, even grid rows on mobile */
.pay-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (max-width:600px){
  .pay-row .wrap{flex-direction:column;gap:16px}
  .pay-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
  .pay-pill{justify-content:center;padding:10px 8px;font-size:.85rem;white-space:nowrap}
}
@media (max-width:480px){
  .pay-badges{grid-template-columns:repeat(2,1fr)}
}

/* clickable trust badges */
a.tbadge{text-decoration:none;transition:border-color .15s,color .15s}
a.tbadge:hover{border-color:var(--orange);color:var(--orange-dark)}
/* Reviews page: three badges (BBB, Google, Trustpilot) as one centred row,
   stacked one under another (equal width) below 806px — the "cic-reviews-trustpilot"
   demo's rules (2026-10-09), on that page's row only. */
.trust-badges--3{display:grid;grid-template-columns:repeat(3,max-content);justify-content:center;gap:14px}
.trust-badges--3 .tbadge{justify-content:center}
@media (max-width:805px){.trust-badges--3{grid-template-columns:minmax(0,max-content)}}
.steps-section{background:var(--wash)}
.page-hero{border-bottom:1px solid var(--line)}
.hero{border-bottom:1px solid var(--line)}


/* ---------- Mobile legibility and tap targets ---------- */
@media (max-width:640px){
  .eyebrow{font-size:.78rem}
  .k{font-size:.78rem}
  .compare thead .c-own-h{font-size:.8rem}
  .compare thead th{font-size:.76rem;line-height:1.25}
  .compare th,.compare td{padding:12px 7px}
  .contact-list a{display:inline-block;padding:10px 0}
  .contact-social a{width:44px;height:44px}
  .toc-list a{padding:9px 0}
  .brand-links a{padding:12px 14px}
  .net-visit{padding:6px 0}
  /* legibility: bump sub-12px labels */
  .plat-tag{font-size:.8rem;letter-spacing:.03em}
  .qmark{font-size:.8rem}
  .ot-label{font-size:.78rem}
  /* breadcrumb links: give a tappable target */
  .crumbs a,.breadcrumb a,.crumb a{display:inline-block;padding:8px 2px}
}

@media (max-width:400px){
  .os-stages{overflow-x:auto;gap:14px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .os-stage{flex:0 0 auto;min-width:58px}
  .os-name{font-size:.72rem}
}
/* phones: the tracker stays horizontal with equal steps, and only the current
   step is labelled (the line above already names it); the end labels hug their edge */
@media (max-width:480px){
  .os-stages{overflow:visible;gap:0;padding-bottom:0}
  .os-stage{flex:1 1 0;min-width:0}
  .os-name{display:none}
  .os-stage.is-current .os-name{display:block;white-space:nowrap;font-size:.8rem}
  .os-stage:first-child .os-name{align-self:flex-start}
  .os-stage:last-child .os-name{align-self:flex-end}
}
/* ---------- Quote-alt: guarantee band + how-it-works strip + common questions ---------- */
.guarantee-band{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 40px}
.guarantee-band .eyebrow{display:block;margin-bottom:12px}
.guarantee-band h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2;margin:0 0 4px;max-width:660px}
.guarantee-band .u-mark{color:var(--orange);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.hiw-strip{margin:28px 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hiw-strip-head{display:flex;justify-content:space-between;align-items:center;padding:14px 0 12px}
.hiw-strip-head .hiw-more{font-weight:600;color:var(--orange);font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.hiw-strip-head .hiw-more svg{width:15px;height:15px}
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hiw-step{padding:16px 18px;font-weight:600;color:var(--olive);font-size:.95rem;border-right:1px solid var(--line)}
.hiw-step:last-child{border-right:none}
.hiw-num{color:var(--orange);font-family:var(--font-display);font-weight:800;margin-right:8px}
.guarantee-note{color:var(--olive-soft);line-height:1.65;max-width:900px;margin:0 0 10px}
.guarantee-legal{color:var(--muted);font-size:.85rem;margin:0}
.cq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cq-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.cq-card h3{font-size:1.05rem;font-weight:700;color:var(--olive);margin:0 0 10px}
.cq-card p{color:var(--olive-soft);line-height:1.6;margin:0;font-size:.94rem}
@media (max-width:820px){
  .hiw-steps{grid-template-columns:1fr 1fr}
  .hiw-step:nth-child(2){border-right:none}
  .cq-grid{grid-template-columns:1fr}
  .guarantee-band{padding:28px 22px}
}
@media (max-width:480px){
  .hiw-steps{grid-template-columns:1fr}
  .hiw-step{border-right:none;border-bottom:1px solid var(--line)}
  .hiw-step:last-child{border-bottom:none}
}
.cq-head{margin-top:48px}
.quote-sep{border:none;border-top:1px solid var(--line);margin:64px 0 48px}
@media (min-width:761px){.quote-tool.pcq{align-items:center}}

/* ---------- Auth card: messages, panel switching, reset page ---------- */
.auth-msg{border-radius:10px;padding:11px 14px;font-size:.9rem;font-weight:600;margin-bottom:16px;line-height:1.45}
.auth-msg--error{background:#FBEAE8;border:1px solid #F0C4BE;color:#C0392B}
.auth-msg--ok{background:#E7F3EC;border:1px solid #BCE0C9;color:#2E7D50}
.auth-msg[hidden]{display:none}
.auth-note{text-align:center;color:var(--muted);font-size:.9rem;line-height:1.55;margin:-6px 0 2px}
.auth-alt{text-align:center;color:var(--muted);font-size:.9rem;margin-top:2px}
.auth-alt a{color:var(--blue);font-weight:600}
.auth-alt a:hover{color:var(--orange)}
.auth-form[hidden]{display:none}
.auth-submit[disabled]{opacity:.65;cursor:default}
.auth-layout--single{grid-template-columns:minmax(0,480px);justify-content:center}
@media (max-width:820px){.auth-layout--single{grid-template-columns:1fr}}
.acct-promote{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px 28px;max-width:480px;margin:0 auto 28px}
.acct-promote .auth-form{max-width:none;margin:0}

/* ---------- Contact form: result states + honeypot ---------- */
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-result{border-radius:10px;padding:12px 14px;font-size:.92rem;font-weight:600;line-height:1.5}
.cf-result--ok{background:#E7F3EC;border:1px solid #BCE0C9;color:#2E7D50}
.cf-result--error{background:#FBEAE8;border:1px solid #F0C4BE;color:#C0392B;margin-bottom:4px}
.cf-result[hidden]{display:none}
.contact-form[hidden]{display:none}
.contact-form .cf-turnstile{margin-top:4px}
.contact-form button[type=submit][disabled]{opacity:.65;cursor:default}

/* ---------- Contact form: optional image attachment ---------- */
.cf-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:.78rem;margin-left:4px}
/* .cf-field>span (0,1,1) outranks a bare .cf-hint, so match it or the hint
   inherits the label's bold display face. */
.cf-field>span.cf-hint{font-family:var(--font-body);font-weight:400;color:var(--muted);font-size:.78rem;line-height:1.45}
.contact-form input[type=file]{font:inherit;font-size:.9rem;color:var(--olive-soft)}
.contact-form input[type=file]::file-selector-button{font:inherit;font-size:.88rem;font-weight:600;color:var(--olive);background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:8px 16px;margin-right:12px;cursor:pointer}
.contact-form input[type=file]::file-selector-button:hover{border-color:var(--orange);color:var(--orange)}

/* =============================================
   Grouped model list — Type C categories (by brand) and Type D brand pages
   (by category). sap-main's brand-page list part (SAL-Theme single-brands.php
   + style.css: search, series pills, grouped model cards), its tokens mapped
   onto ours: navy→olive, amber→orange, grey-200→line, text-soft→muted,
   off-white→wash. Its Bootstrap row/col grid is a CSS grid here (2 / 3 / 4
   columns at the same 768 / 992 breakpoints, 1rem gutters).
============================================= */
/* Not sticky: sap's stylesheet declares position:sticky here, but its live
   pages never stick (the user's call of 2026-10-06 — scrolls with the page). */
section.brand-filter-section{padding:24px 0 0;background:var(--wash);border-bottom:1px solid var(--line)}
.brand-filter-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.brand-filter-title{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--olive);letter-spacing:-.02em;margin:0 0 14px}
.brand-search-wrap{position:relative;margin-bottom:20px}
.brand-search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.brand-search-wrap input{width:100%;padding:14px 16px 14px 42px;border:1.5px solid var(--line);border-radius:6px;font-size:.95rem;font-family:var(--font-body);color:var(--olive);background:var(--paper);outline:none;transition:border-color .2s ease}
.brand-search-wrap input:focus{border-color:var(--orange)}
.brand-series-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:12px}
.series-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:.82rem;font-family:var(--font-body);font-weight:500;color:var(--olive-soft);cursor:pointer;transition:all .2s;white-space:nowrap}
.series-pill:hover{border-color:var(--muted);color:var(--olive)}
.series-pill.active{background:var(--olive);border-color:var(--olive);color:#fff}
.series-pill.active .series-pill-count{color:rgba(255,255,255,.85)}
.series-pill-count{font-weight:600;color:var(--muted);font-size:.78rem}
.series-scroll{position:relative}
.series-scroll-cue{position:absolute;top:0;bottom:12px;display:none;align-items:center;width:42px;pointer-events:none;z-index:2;color:var(--olive);font-size:1.1rem}
.series-scroll-cue--left{left:0;padding-left:2px;justify-content:flex-start;background:linear-gradient(to right,var(--wash) 45%,transparent)}
.series-scroll-cue--right{right:0;padding-right:2px;justify-content:flex-end;background:linear-gradient(to left,var(--wash) 45%,transparent)}
@media (max-width:768px){
  .brand-series-filters--series{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .brand-series-filters--series .series-pill{width:auto;flex:0 0 auto;font-size:.78rem;padding:8px 12px}
  .series-scroll.can-left .series-scroll-cue--left{display:flex}
  .series-scroll.can-right .series-scroll-cue--right{display:flex}
}
.sell-search-banner{background:rgba(245,178,64,.10);border-top:1px solid rgba(245,178,64,.25);border-bottom:1px solid rgba(245,178,64,.25);padding:14px 0}
.sell-search-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.92rem;color:var(--olive)}
.sell-search-banner-inner strong{color:var(--olive)}
section.brand-listing-section{padding:32px 0 0}
.brand-search-empty{text-align:center;padding:48px 24px;background:#fff;border:1px dashed var(--line);border-radius:12px;margin-bottom:24px;color:var(--muted)}
.brand-search-empty svg{width:32px;height:32px;color:#9aa3b2;margin-bottom:12px}
.brand-search-empty-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--olive);margin:0 0 6px}
.brand-search-empty-hint{font-size:.9rem;margin:0}
.brand-search-empty-clear{background:none;border:0;padding:0;font:inherit;color:var(--orange);text-decoration:underline;cursor:pointer}
.brand-search-empty-clear:hover{color:var(--olive)}
.model-series-group{margin-bottom:48px}
.model-series-group:last-child{margin-bottom:0}
.model-series-header{margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.model-series-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--olive);margin:0 0 2px}
.model-series-meta{font-size:.82rem;color:var(--muted);margin:0}
/* Series re-arrange's second row: a rule like a group title's, then "Series" as a group title */
.series-sub{border-top:1px solid var(--line);padding-top:20px}
.series-sub-title{margin:0 0 12px}
.model-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:768px){.model-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:992px){.model-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* A long list's models not turned into cards yet (cic_grouped_card_link(), 2026-11-12): plain text links in the
   grid, a cell of the text model lists (.brand-retired-cell); js/cic-custom.js turns each into its card on scroll */
.model-card-grid > a.cic-more{display:block;align-self:start;background:#fff;padding:14px 18px;border-radius:14px;box-shadow:0 0 0 1px var(--line);font-size:.98rem;font-weight:500;color:var(--olive);text-decoration:none;transition:background .15s,color .15s}
.model-card-grid > a.cic-more:hover{background:var(--wash);color:var(--orange-dark)}
.model-card{display:block;background:var(--paper);border:2px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;height:100%}
.model-card:hover{border-color:var(--orange);box-shadow:0 6px 24px rgba(242,121,41,.15);transform:translateY(-3px)}
.model-card-img{background:var(--paper);display:flex;align-items:center;justify-content:center;height:140px;padding:16px;overflow:hidden;color:var(--olive)}
.model-card-img svg{height:62%;width:auto;aspect-ratio:1;color:#CFC8B8}   /* no-photo card: the faded picture's size and beige (Scott 11-13) */
.model-card-body{padding:14px 16px 16px}
.model-card-name{font-size:.88rem;font-weight:600;color:var(--olive);margin-bottom:4px;line-height:1.3}
.model-card-price{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:#2E7D50;margin-bottom:4px}
/* sap's retired badges (its model-finder card, .mf-model-card-badge): "Low
   Value" amber, "Inquire" green, in place of the price (2026-10-13). */
.model-card-badge{display:inline-block;font-size:.72rem;font-weight:700;color:#b06d00;background:rgba(245,166,35,.16);border-radius:6px;padding:3px 8px;margin-bottom:8px}
.model-card-badge--inquire{color:#2E7D50;background:#E7F3EC}
.model-card-link{font-size:.78rem;color:var(--muted);font-weight:500}
.model-card:hover .model-card-link{color:var(--orange)}

/* sap's plain retired lists ("More Models We Buy" / "Retired Models", its
   .brand-retired-* rules) for a Type D "SAP style with Series" page whose
   brand has their pictures off — sap's colours mapped to CIC's tokens, and
   the demo's 48px gap above each list. */
section.brand-retired-section{padding:48px 0 0}
.brand-retired-header{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.brand-retired-title{font-family:var(--font-display);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:var(--olive);margin:0 0 6px}
.brand-retired-sub{font-size:1rem;color:var(--muted);margin:0}
.brand-retired-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.brand-retired-cell{display:block;background:#fff;padding:18px 22px;font-size:1.02rem;font-weight:500;color:var(--olive);text-decoration:none;transition:background .15s,color .15s;box-shadow:inset -1px -1px 0 0 var(--line)}
.brand-retired-cell:hover{background:var(--wash);color:var(--orange-dark)}
.brand-retired-cell--filler{pointer-events:none}
@media (max-width:900px){.brand-retired-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .brand-retired-grid{grid-template-columns:1fr}
  .brand-retired-cell--filler{display:none}
}

/* Type D, SAP style with Series — the "CIC Sonos Page" demo's restyle
   (2026-10-09), on that page only (body.cic-dseries, the user's call); and,
   since 2026-10-12, on the other SAP style pages too — a Type C (SAP style)
   category and a plain "Own brand page" (body.cic-saplook, the user's
   calls: the same look, UI and colour wise). */
/* The finder band is white, like the kit's sections, not the light-gray wash. */
.cic-dseries section.brand-filter-section,.cic-saplook section.brand-filter-section{background:var(--paper)}
.cic-dseries .series-scroll-cue--left,.cic-saplook .series-scroll-cue--left{background:linear-gradient(to right,var(--paper) 45%,transparent)}
.cic-dseries .series-scroll-cue--right,.cic-saplook .series-scroll-cue--right{background:linear-gradient(to left,var(--paper) 45%,transparent)}
/* Finder labels in CIC's own text styles: the orange label is .eyebrow
   (Archivo, .14em), the heading matches the homepage quote card title. */
.cic-dseries .brand-filter-eyebrow,.cic-saplook .brand-filter-eyebrow{font-family:var(--font-display);letter-spacing:.14em}
.cic-dseries .brand-filter-title,.cic-saplook .brand-filter-title{font-size:1.4rem}
/* Filter pills in the kit's pill style (.pay-pill: white, 1px line, 999px, 600 weight, .9rem). */
.cic-dseries .series-pill,.cic-saplook .series-pill{gap:8px;padding:8px 16px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:.9rem;color:var(--olive)}
.cic-dseries .series-pill:hover,.cic-saplook .series-pill:hover{border-color:var(--orange);color:var(--orange-dark)}
.cic-dseries .series-pill.active,.cic-dseries .series-pill.active:hover,.cic-saplook .series-pill.active,.cic-saplook .series-pill.active:hover{background:var(--olive);border-color:var(--olive);color:#fff}
.cic-dseries .series-pill-count,.cic-saplook .series-pill-count{font-weight:600;font-size:.8rem}
/* Series re-arrange's series pills, apart from the category/brand ones (the user's call of 2026-10-13); the active one stays olive */
.brand-series-filters--sub .series-pill:not(.active){background:#F7F6F3}
/* Real product photos in the card's image box. */
.cic-dseries .model-card-img img,.cic-saplook .model-card-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* No help line above the trust row, so it takes the help line's 16px. */
.cic-dseries .section .wrap > .brand-trust:first-child,.cic-saplook .section .wrap > .brand-trust:first-child{margin-top:16px}
/* The picture versions of the retired lists sit in their own sections (so the
   filters skip them), the same 48px apart as the series blocks. */
.cic-dseries section.brand-listing-section--extra{padding-top:48px}

/* =============================================
   Type C, CIC style — brand tiles over one text list per brand ("Play Fixes
   Round 3" demos/gpu.html, its rules verbatim; class names kept from the demo).
   Up to six tiles a row (the user's call of 2026-10-08; the demo had 2/3),
   three on phones as the demo's phone view has them. The filter box restyle
   is the demo's, scoped to these lists only (the user's call). Lists keep
   the brand page's height (below).
============================================= */
.gpu-sections{display:flex;flex-direction:column;gap:56px}
.gpu-jump{display:grid;gap:12px;margin:0}
.gpu-jump--1{grid-template-columns:minmax(0,1fr)}
.gpu-jump--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gpu-jump--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gpu-jump--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gpu-jump--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gpu-jump--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gpu-jump .brand-logo{max-width:100%}
.gpu-jump .brand-logo svg,.gpu-jump .brand-logo img{max-width:min(105px,100%)}
@media (max-width:520px){
  .gpu-jump--4,.gpu-jump--5,.gpu-jump--6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gpu-jump .brand-logo,.gpu-jump .brand-logo svg,.gpu-jump .brand-logo img{height:34px}
  .gpu-jump .brand-tile{padding:14px 8px;min-height:0}
}
/* A Type D brand's CIC-style page tiles its categories (demos/dji.html). */
.gpu-jump .cat .go{opacity:1;transform:none}
.gpu-group{display:flex;flex-direction:column;gap:16px;scroll-margin-top:90px}
.gpu-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gpu-group-head h3{font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--olive);margin:0}
.gpu-count{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
/* The demo let each list run its full length (max-height:none); the user's
   call of 2026-10-08 keeps the brand page's 380px with its own scroll. */
.gpu-group .model-filter{background:#fff;color:var(--olive)}
.gpu-group .model-filter::placeholder{color:var(--muted)}
.gpu-group .model-filter:focus{background:var(--wash)}

/* ===== Laptop quote, step version: the checkout's step list (.co-step) on the quote page (Scott + Bari 10-16) ===== */
.mq-grid--flow{align-items:start}
.mq-grid--flow .mq-quote{align-self:stretch}
.mq-flow{display:flex;flex-direction:column}
.mq-fstep{border-top:1px solid var(--line);scroll-margin-top:96px}
.mq-fstep:first-child{border-top:0}
.mq-fhead{width:100%;display:flex;align-items:center;gap:14px;padding:18px 24px;background:#fff;border:0;font:inherit;text-align:left;color:var(--olive);cursor:pointer}
.mq-fhead:disabled{cursor:default}
.mq-fhead:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.mq-fhead-text{flex:1;min-width:0;display:flex;flex-direction:column}
/* open step = the live condition card's head (wash background, title + help line) */
.mq-fstep.is-open .mq-fhead{background:var(--wash);padding:22px 24px;border-bottom:1px solid var(--line);cursor:default}
/* number circles: orange on the open step, quiet on the rest (as checkout's muted .co-num) */
/* one place to look: only the open step is big and orange; the rest are short quiet rows */
.mq-fstep:not(.is-open) .mq-fhead{padding:14px 24px}
.mq-fstep:not(.is-open) .mq-num{flex-basis:30px;height:30px;font-size:.8rem;background:var(--wash);color:var(--muted)}
.mq-fstep:not(.is-open) .mq-cond-title{color:var(--muted);font-weight:600}
.mq-num-ok{display:none}
.mq-num-ok svg{width:15px;height:15px;display:block}
.mq-fsub,.mq-flabel,.mq-fsum,.mq-fchange{display:none}
.mq-fstep.is-open .mq-fsub{display:block}
/* done: green check in the circle (checkout's .co-check colors), short label over the pick, "Change" in link blue */
.mq-fstep.is-done .mq-num{background:#E7F3EC;color:#2E7D50}
.mq-fstep.is-done .mq-num-n,.mq-fstep.is-done .mq-cond-title{display:none}
.mq-fstep.is-done .mq-num-ok{display:block}
.mq-fstep.is-done .mq-flabel{display:block;font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mq-fstep.is-done .mq-fsum{display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--olive)}
.mq-fstep.is-done .mq-fchange{display:block;flex:none;font-size:.84rem;font-weight:600;color:var(--blue)}
.mq-fstep.is-done .mq-fhead:hover{background:var(--cream)}
.mq-fstep.is-done .mq-fhead:hover .mq-fchange{text-decoration:underline}
/* not reached yet: dimmed like the home quote tool's waiting Model box */
.mq-fstep.is-locked .mq-fhead{opacity:.7}
/* until graphics are known the condition prices are unknown: keep the pill's space, hide its text */
.mq-grid--flow.no-gpu #step_cond .mq-pill{visibility:hidden}
.mq-pill:empty{visibility:hidden}
/* .mq-opt sets display, which would beat the hidden attribute (graphics rows of other processors) */
.mq-opt[hidden]{display:none}
/* "Up to $X" reads like the site's model cards: one string, the price's own style */
.mq-grid--cfg .offer-val.is-upto{white-space:nowrap;font-size:min(3rem,11vw)}
/* the selection card: label left, current selection right, the same for every line */
.mq-sel{border-bottom:1px solid var(--line)}
.mq-sel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:10px 24px;border-top:1px solid var(--line)}
.mq-sel-row:first-child{border-top:0}
.mq-sel-label{font-size:.88rem;color:var(--muted)}
.mq-sel-val{min-width:0;text-align:right;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--olive)}
.mq-sel-val.is-placeholder{color:#a7a495}   /* = the home quote tool's "Select model" */
.mq-step-val.is-placeholder{color:#a7a495}  /* an iPad's Storage before a storage is picked (2026-11-05) */
/* memory / storage: Brent's - / + stepper (FAQ round sign button), tag only after a change */
.mq-step-ctrl{display:flex;align-items:center;gap:8px}
.mq-step-slot{width:56px;display:flex;justify-content:flex-end}
.mq-step-tag{font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.4;padding:3px 9px;border-radius:999px;background:var(--wash);color:var(--muted);white-space:nowrap}
.mq-step-tag.is-up{background:#E7F3EC;color:#2E7D50}
.mq-step-tag.is-down{background:var(--orange-tint);color:var(--brown)}
.mq-step-tag.is-empty{display:none}
.mq-step-btn{position:relative;flex:0 0 26px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.mq-step-btn::before{content:"";position:absolute;inset:-9px}   /* 44px tap area */
.mq-step-btn svg{width:13px;height:13px;display:block}
.mq-step.is-standard .mq-step-btn{display:none}   /* no sizes from Sauce: "Standard", no - / + (2026-11-05) */
/* the "?" guides' iPad help (Sauce's help of 2026-11-05, its four rules as sent) */
.mq-guide a{color:var(--blue);font-weight:600}
.mq-guide-steps{margin:2px 0 0;padding-left:1.25em;display:grid;gap:4px}
.mq-guide-pair{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mq-guide-pair dd{margin:0;font-variant-numeric:tabular-nums;color:var(--olive);font-weight:600}
.mq-step-btn:hover:not(:disabled){background:var(--peach)}
.mq-step-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mq-step-btn:disabled{background:var(--wash);color:#a7a495;cursor:default}
.mq-step-val{width:96px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--olive);font-variant-numeric:tabular-nums;white-space:nowrap}
/* step numbers = the site's step circle (home "4-step process" .step .num) */
.mq-num{flex:0 0 36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.9rem}
/* steps fold and unfold (JS animates the height, 0.3 s like the phone menu); the colors follow at the same speed */
.mq-fhead{transition:background .3s ease}
.mq-num{transition:background .3s ease,color .3s ease}
@media (prefers-reduced-motion:reduce){.mq-fhead,.mq-num{transition:none}}
/* condition in the quote card (10-22): memory / storage's - / +, and a "?" (like live canitcash's condition list) beside
   the label, where Bari liked it, that opens every grade's text in Bari's popup */
.mq-help{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:7px;padding:0;border:0;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.7rem;line-height:1;cursor:pointer;vertical-align:1px;transition:background .15s}
.mq-help::before{content:"";position:absolute;inset:-13px}   /* 44px tap area */
.mq-help:hover{background:var(--orange-dark)}
.mq-help:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* the "?" popups list everything at once (Scott 10-22): Condition = all five grades to compare; Memory / Storage "?" =
   one memory and storage guide. A heading instead of the round icon, the condition list's own hairline between items. On a short phone the list scrolls inside the
   box and Close stays in view */
.cic-confirm-overlay.is-guide .cic-confirm-icon{display:none}
.cic-confirm-overlay.is-guide .cic-confirm-modal{max-height:100%;display:flex;flex-direction:column}
.cic-confirm-overlay.is-guide .cic-confirm-actions{flex:none}
.cic-confirm-overlay.is-guide .cic-confirm-message{min-height:0;overflow-y:auto;text-align:left}
/* when the list scrolls (short phones), a soft shadow at the cut edge shows there is more; white covers ride along with
   the text, so the shadows only show where text continues */
.cic-confirm-overlay.is-guide .cic-confirm-message{background:
  linear-gradient(#fff 30%,rgba(255,255,255,0)) top/100% 28px no-repeat local,
  linear-gradient(rgba(255,255,255,0),#fff 70%) bottom/100% 28px no-repeat local,
  radial-gradient(farthest-side at 50% 0,rgba(46,45,35,.16),rgba(46,45,35,0)) top/100% 12px no-repeat scroll,
  radial-gradient(farthest-side at 50% 100%,rgba(46,45,35,.16),rgba(46,45,35,0)) bottom/100% 12px no-repeat scroll}
.mq-guide-title{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--olive);margin:0 0 4px}
.mq-guide{margin:0}
.mq-guide > div{padding:12px 0;border-top:1px solid var(--line)}
.mq-guide > div:first-child{border-top:0}
.mq-guide > div:last-child{padding-bottom:0}
.mq-guide dt{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--olive)}
.mq-guide dd{margin:2px 0 0;font-size:.92rem;line-height:1.5;color:var(--muted)}
.mq-guide dd + dd{margin-top:6px}   /* where to find it, then the note on its own line (Scott 10-22) */
@media (max-width:940px){
  .mq-sel-row{padding:9px 16px;gap:8px;min-height:54px}
  .mq-step-ctrl{gap:6px}
  .mq-step-val{width:86px;font-size:.88rem}
  .mq-step-slot{width:52px}
  .mq-step-tag{font-size:.66rem;padding:3px 8px}
}
@media (max-width:760px){
  .mq-fhead,.mq-fstep.is-open .mq-fhead{padding:16px;gap:12px}
  .mq-fstep:not(.is-open) .mq-fhead{padding:12px 16px}
  .mq-fstep{scroll-margin-top:84px}
}
@media (max-width:380px){
  .mq-step-ctrl{gap:4px}
  .mq-step-slot{width:48px}
  .mq-step-val{width:78px;font-size:.84rem}
}

/* ---------- Sell it yourself: sap's "About your {model}" box (#diy-box) ----------
   Rendered client-side from the URL hash (js/cic-custom.js); sap's layout in
   CIC's colours. It rides up over the hero's bottom edge, and the band under
   it takes the next section's wash. */
.diy-callout{position:relative;z-index:2;margin-top:-36px;background:linear-gradient(transparent 36px,var(--wash) 36px)}
.diy-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.diy-kicker{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dark);padding:20px 26px 0}
.diy-facts{display:flex;flex-wrap:wrap;gap:0 44px;padding:12px 26px 18px}
.diy-facts:empty{display:none}
.diy-fact{padding-right:22px}
.diy-fact+.diy-fact{border-left:1px solid var(--line);padding-left:44px}
.diy-fact-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.diy-fact-val{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1;color:var(--olive);font-variant-numeric:tabular-nums}
.diy-fact-to{font-weight:400;font-size:1.2rem}
.diy-fact-sub{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.4}
.diy-why{border-top:1px solid var(--line);background:var(--cream);padding:16px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.diy-why p{margin:0;font-size:.96rem;color:var(--olive-soft);line-height:1.6;max-width:62ch}
.diy-why p b{color:var(--olive)}
@media (max-width:820px){
  .diy-facts{flex-direction:column;gap:14px}
  .diy-fact+.diy-fact{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .diy-callout{margin-top:-20px;background:linear-gradient(transparent 20px,var(--wash) 20px)}
}
@media (max-width:480px){.diy-why .btn{white-space:normal;text-align:center}}  /* CIC buttons never wrap; sap's does, so a 320px phone needs it */

/* ---------- Checkout's login popup (sap's login modal): the login page's card
   in the site's dialog overlay ---------- */
.cic-login-overlay{position:fixed;inset:0;z-index:10000;background:rgba(46,44,34,.55);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.cic-login-overlay[hidden]{display:none}
.auth-card--popup{position:relative;width:100%;max-width:440px;margin:auto;padding-top:48px}
.auth-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:none;border-radius:50%;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer}
.auth-close:hover{background:var(--wash);color:var(--olive)}

/* The ratings row in every page hero (Scott 11-10: /sell/, the Apple hub, category and brand pages; quote pages below) */
.page-hero .hero-trust{margin-top:18px;font-size:.86rem;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}
.page-hero .hero-trust > span:not(.bbb-grade){margin-right:6px}
@media (max-width:1040px){
  .page-hero .hero-trust{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:8px 12px;text-align:left}
  .page-hero .hero-trust > span:not(.bbb-grade){margin-right:0}
}
@media (max-width:760px){.page-hero .hero-trust{font-size:.8rem;gap:6px 12px}}
/* /sell/: the questions under the guarantee band */
.sell-questions{text-align:center;margin-top:56px}
.sell-questions h2{font-size:1.5rem;font-weight:800;margin-bottom:10px}
.sell-questions p{color:var(--olive-soft);font-size:1.05rem}
.sell-questions p a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sell-questions p a:hover{color:var(--orange)}
.sell-questions .hero-cta{justify-content:center;margin-top:20px}
.sell-questions .btn--ghost{--bg:#fff;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .2s ease}   /* white like the homepage hero's, not see-through on the gray */
.sell-questions .btn--ghost:hover{--bd:var(--line);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* /sell/apple/ hub (Scott 11-10; page-apple.php): each device tile's top offer, the tiles' heading, and the links in its how-to cards */
.apple-hub .cat .cat-up{display:block;margin-top:4px;font-size:.82rem;font-weight:700;color:#2E7D50}
.apple-hub #apple-tiles .model-series-header{text-align:center;margin:8px 0 18px}
.apple-hub #apple-tiles[hidden],.apple-hub [data-apple-results][hidden]{display:none}
.apple-hub-howto .howto-body a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Quote page hero, every quote page (moved here from cic-quote-simple.css 11-10, which only the laptop and desktop
   quote pages load; same rules, same order) */
.page-hero--model{padding-top:22px;padding-bottom:22px}
.page-hero--model::before{display:none}
.page-hero--model h1{font-size:clamp(1.65rem,4.2vw,2.6rem);margin-top:6px;text-wrap:balance}
.page-hero--model .page-hero-sub{margin-top:10px;font-size:1.02rem;color:var(--olive-soft);max-width:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px}
.page-hero--model .page-hero-sub .cic-upto{color:#2E7D50;font-family:var(--font-display);font-weight:800}
.page-hero--model .page-hero-sub .badge-pill{margin:0;padding:6px 14px;gap:5px}    /* the homepage pill (Scott 11-06); even space around its bullet */
@media (max-width:480px){.page-hero--model .page-hero-sub .badge-pill{gap:2px}}
.page-hero--model .hero-trust{margin-top:14px;font-size:.86rem;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}
.page-hero--model .hero-trust > span:not(.bbb-grade){margin-right:6px}
@media (max-width:760px){
  .page-hero--model{padding-top:14px;padding-bottom:16px}
  .page-hero--model .page-hero-sub{font-size:.95rem}
  .page-hero--model .hero-trust{font-size:.8rem;gap:6px 12px}
}
/* the raccoon: size, spot and strength from the theme's .page-hero::before, like every other banner (Scott 11-06); off on phones */
@media (min-width:761px){
  .page-hero--model::before{display:block}
}
.page-hero--model{padding-top:32px;padding-bottom:30px}
@media (min-width:761px){   /* 11-06 (Scott): the raccoon large but whole; a banner between the old short one and the 330 px category pages */
  .page-hero--model{padding-top:48px;padding-bottom:48px}
  .page-hero--model::before{width:min(30vw,240px);height:min(30vw,240px)}
}
@media (min-width:761px) and (max-width:1239px){.page-hero--model::before{left:16px;transform:translateY(-50%)}}   /* whole on tablets too, not off the left edge */
.page-hero--model .page-hero-sub{margin-top:14px}
.page-hero--model .hero-trust{margin-top:18px}
/* 11-06 (Scott: "looks messed up"): where the one row no longer fits, three lines as on the homepage, each logo beside its text; it wrapped anywhere and split them */
@media (max-width:1040px){
  .page-hero--model .hero-trust{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:8px 12px;text-align:left}
  .page-hero--model .hero-trust > span:not(.bbb-grade){margin-right:0}
}

/* The shipping pill under the heading on hub, category and brand heroes (Scott 11-10: in place of the template sentence,
   which Google gave no weight), laid out as on quote pages */
.page-hero .page-hero-sub--pill{margin-top:14px;font-size:1.02rem;max-width:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px}
.page-hero .page-hero-sub--pill .badge-pill{margin:0;padding:6px 14px;gap:5px}
@media (max-width:480px){.page-hero .page-hero-sub--pill .badge-pill{gap:2px}}
@media (max-width:760px){.page-hero .page-hero-sub--pill{font-size:.95rem}}
/* Every inner-page hero (hub, category, brand, quote, info, guide, account) uses the quote hero's spacing, heading size
   and raccoon (Scott 11-10: "nice and tight", less space on phones); the text, eyebrow included, is the same on phone and
   desktop (Scott 11-10) */
.page-hero{padding-top:32px;padding-bottom:30px}
.page-hero h1{font-size:clamp(1.65rem,4.2vw,2.6rem);margin-top:6px;text-wrap:balance}
.page-hero-sub{margin-top:14px}
@media (max-width:760px){.page-hero::before{display:none}}
@media (min-width:761px){
  .page-hero{padding-top:48px;padding-bottom:48px}
  .page-hero::before{width:min(30vw,240px);height:min(30vw,240px)}
}
@media (min-width:761px) and (max-width:1239px){.page-hero::before{left:16px;transform:translateY(-50%)}}

/* Home "Recent payouts" strip (Scott 11-11; parts/payouts-strip.php, data rebuilt nightly by Sauce). Built from the
   site's own parts: the eyebrow + heading of the guarantee box (left, weight 800 like every home heading), the category
   pages' model card + badge, the hero's white ghost buttons, the page hero background. Cards are proof, not links. */
.pstrip{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,var(--peach) 0%,rgba(255,237,225,0) 55%),radial-gradient(95% 85% at 12% 100%,rgba(65,111,146,.12) 0%,rgba(65,111,146,0) 55%),linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.pstrip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.pstrip-copy .eyebrow{display:block;margin-bottom:12px}
.pstrip-copy h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;line-height:1.2;margin:0 0 8px;max-width:660px;text-wrap:balance}
.pstrip-total{color:#2E7D50}
.pstrip-note{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0}
.pstrip-nav{display:flex;gap:10px;flex:none}
.pstrip-btn{width:48px;height:48px;padding:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;color:var(--olive);--bg:#fff;box-shadow:var(--shadow-sm)}
.pstrip-btn:hover{--bd:var(--line);background:#fff;box-shadow:var(--shadow-md)}
.pstrip-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.pstrip-track{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding:6px 0 10px}
/* The display case (Scott 11-11): the strip sits in a white panel held to the page's content width, the cards slipping
   behind its walls at each end; on wide screens two raccoon bookends lean on the walls and stand on its floor */
.pstrip-case{position:relative;width:min(calc(var(--maxw) - 48px),calc(100% - 48px));margin:0 auto;   /* 24px from the window edge like the heading, at every width */
  --rb-h:280px}
.pstrip-track{background:#fff;border:2px solid var(--line);border-radius:20px;padding:14px 0;box-shadow:var(--shadow-sm)}
.pstrip-case::before,.pstrip-case::after{content:"";position:absolute;top:2px;bottom:2px;width:64px;z-index:2;pointer-events:none}
/* a solid white band inside each wall, then a soft fade, so a card disappears before it reaches the border (Scott 11-11: it bled into the wall with a 28px fade) */
.pstrip-case::before{left:2px;border-radius:18px 0 0 18px;background:linear-gradient(90deg,#fff 16px,rgba(255,255,255,0))}
.pstrip-case::after{right:2px;border-radius:0 18px 18px 0;background:linear-gradient(270deg,#fff 16px,rgba(255,255,255,0))}
.pstrip-raccoon{position:absolute;bottom:0;height:var(--rb-h);width:auto;z-index:3;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(46,45,35,.16))}
.pstrip-raccoon--left{right:calc(100% - 2px)}
.pstrip-raccoon--right{left:calc(100% - 2px)}
/* a soft oval shadow under each raccoon's feet (feet span measured from the art: left 14-61% of its width, right 29-71%) */
.pstrip-floor{position:absolute;z-index:2;pointer-events:none;height:max(10px,calc(var(--rb-h) * .07));bottom:calc(max(10px,calc(var(--rb-h) * .07)) * -.45);
  background:radial-gradient(ellipse at center,rgba(46,45,35,.34) 0%,rgba(46,45,35,.14) 45%,rgba(46,45,35,0) 72%)}
.pstrip-floor--left{right:calc(100% - 2px + var(--rb-h) * .7786 * .311);width:calc(var(--rb-h) * .7786 * .626)}
/* right raccoon = Scott's 11-11 ChatGPT redraw without the pole (402x560, colors matched to the left one); feet span 130-293px of 560 tall, padded like the left */
.pstrip-floor--right{left:calc(100% - 2px + var(--rb-h) * .1830);width:calc(var(--rb-h) * .3893)}
/* The raccoons stay one size (Scott 11-11: shrinking with the window "ruins the gag"); on narrower windows the case and
   its heading get narrower to make room instead. Room per side = left raccoon width (280 x .7786 = 218) + 24px to the
   window edge = 242px. Full case width from a 1,636px window; under 1,280 the raccoons hide and the case is full width. */
@media (min-width:1280px){
  .pstrip-case{width:min(calc(var(--maxw) - 48px),calc(100% - 484px))}
  .pstrip-head{max-width:min(var(--maxw),calc(100% - 484px + 48px))}
}
@media (max-width:1279px){.pstrip-raccoon,.pstrip-floor{display:none}}   /* no room beside the case */
@media (max-width:760px){.pstrip-case{width:calc(100% - 32px)}.pstrip-track{border-radius:16px}.pstrip-case::before,.pstrip-case::after{width:32px}.pstrip-case::before{border-radius:14px 0 0 14px;background:linear-gradient(90deg,#fff 8px,rgba(255,255,255,0))}.pstrip-case::after{border-radius:0 14px 14px 0;background:linear-gradient(270deg,#fff 8px,rgba(255,255,255,0))}}
.pstrip-track::-webkit-scrollbar{display:none}
.pstrip-list{display:flex;gap:16px;margin:0;padding:0;list-style:none;flex:none}
.pstrip-list[hidden]{display:none}   /* still mode drops the loop's copy row; display:flex above was keeping it on screen (every card twice) */
.pstrip-list>li{display:flex}
.pstrip-card{width:240px;height:auto;display:flex;flex-direction:column}
.pstrip-card:hover{border-color:var(--line);box-shadow:none;transform:none}
.pstrip-card .model-card-body{flex:1}
.pstrip-card .model-card-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pstrip-card .model-card-price{margin-bottom:0}
.pstrip-card .model-card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}   /* always two lines tall, so every price sits at the same height (Scott 11-11) */
@media (max-width:760px){.pstrip-head{margin-bottom:20px}.pstrip-nav{display:none}.pstrip-card{width:200px}}

/* ---------- Mascot raccoons (Scott 11-12) ----------
   cic_coon() markup: <span class="coon-stand coon-stand--SPOT"> + the art. Every raccoon has the homepage pair's two
   shadows (Scott 11-12: no shadows "was a big miss"): a soft drop shadow, and an oval floor shadow under the part of
   the art that touches the ground (--gl/--gr, measured per image). Each one stands on a real edge of its block, or
   peeks from behind it, never floating.
   Two fixed sizes, never in between (Scott 11-11: a raccoon that shrinks with the window "ruins the gag"): above or
   inside a block 160 px; beside a block 280 px (the homepage pair's size), only from the window width where the
   margin holds it (block + raccoon + gap + 24 px to the window edge, plus a scrollbar). Below that it stands centered
   on top of its block at 160 px, phones included, never between two cards of a set (Scott 11-12).
   Art in assets/img/raccoon-*.webp, colors matched to the homepage pair. */
.coon-host{position:relative}
.coon-stand{--h:160px;position:relative;display:block;height:var(--h);width:calc(var(--h) * var(--ar));margin:0 auto 16px;pointer-events:none}
.coon-stand .coon{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(46,45,35,.16))}
.coon-stand::before{content:"";position:absolute;left:calc(var(--gl) * 100%);width:calc((var(--gr) - var(--gl)) * 100%);
  height:max(10px,calc(var(--h) * .07));bottom:calc(max(10px,calc(var(--h) * .07)) * -.45);
  background:radial-gradient(ellipse at center,rgba(46,45,35,.34) 0%,rgba(46,45,35,.14) 45%,rgba(46,45,35,0) 72%)}
/* empty cart, no models match: inside the card, above its text */
.brand-search-empty .coon-stand{margin-bottom:14px}
/* order complete, support: above their card grid, beside it from the width that holds 280 px, standing on its bottom */
.carrier-grid > .coon-stand,.contact-layout > .coon-stand{grid-column:1/-1}
@media (min-width:1190px){.coon-stand--order{position:absolute;--h:280px;margin:0;right:calc(100% + 26px);bottom:0}}
@media (min-width:1520px){.coon-stand--support{position:absolute;--h:280px;margin:0;right:calc(100% + 26px);bottom:0}}
/* how we inspect, bulk: standing on the last line of their block (was centered in mid-air) */
@media (min-width:1500px){.coon-stand--inspect{position:absolute;--h:280px;margin:0;left:calc(100% + 26px);bottom:0}}
@media (min-width:1460px){.coon-stand--bulk{position:absolute;--h:280px;margin:0;right:calc(100% + 26px);bottom:0}}
/* home, 4-step process: the cash raccoon peeks over the Get Paid Fast card from behind it (the card hides his legs)
   from 1,200 px, where he clears the heading by 26 px; narrower, he stands centered on the first row of cards */
.steps-grid--coon{position:relative}
.steps-grid--coon > .step{z-index:1}
.coon-stand--steps{grid-column:1/-1;margin:0 auto -22px;z-index:2}
@media (min-width:1200px){
  .coon-stand--steps{position:absolute;--h:230px;margin:0;right:26px;top:calc(var(--h) * -.58);z-index:0}
  .coon-stand--steps::before{display:none}
}
/* category pages, what to do before you sell: the box raccoon packs his box against "Pack it securely" (always the
   4th card, right column) from 1,320 px; below that he stands centered on the first row of cards */
.prep-grid > .coon-stand{grid-column:1/-1;margin:0 auto -16px;z-index:2}
.howto-step .coon-stand{display:none}
@media (min-width:1320px){
  .prep-grid > .coon-stand{display:none}
  .howto-step--pack{position:relative}
  .howto-step .coon-stand{display:block;position:absolute;--h:280px;margin:0;left:calc(100% - 16px);bottom:-2px;z-index:3}
}
/* reviews: the star raccoon stands on the ratings line, beside it from 1,272 px (shown 1.4x: the star takes the top
   of the art, so this size gives him the same head size as the others) */
.trust-badges--coon{position:relative}
.trust-badges--coon > .coon-stand{grid-column:1/-1;--h:224px;margin:0 auto -10px;z-index:2}
@media (min-width:1272px){.trust-badges--coon > .coon-stand{position:absolute;--h:392px;margin:0;left:calc(100% + 14px);bottom:0}}
/* trust pledge, our commitment: the shield raccoon on the section's last line, at the left from 1,290 px */
.prose--coon{position:relative}
.coon-stand--pledge{margin:0 auto 22px}
@media (min-width:1290px){.coon-stand--pledge{position:absolute;--h:280px;margin:0;right:calc(100% + 26px);bottom:0}}
/* selling checklist: the clipboard raccoon stands on top of the card, and from 1,185 px beside it on its bottom
   line with the clipboard held against its edge; the line under the heading (Scott 11-12) */
.quick-check--coon{position:relative}
.section .wrap > .quick-check.quick-check--coon{margin-top:156px}   /* beats the guides' phone rule .cic-guide .section .wrap > *{margin:0} */
.coon-stand--check{position:absolute;margin:0;left:50%;bottom:calc(100% - 4px);transform:translateX(-50%)}
@media (min-width:1185px){
  .section .wrap > .quick-check.quick-check--coon{margin-top:0}
  .coon-stand--check{--h:280px;left:auto;transform:none;right:calc(100% - 18px);bottom:0;z-index:3}
}
.quick-check-sub{margin:-8px 0 18px;color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.5}
/* the orange "ready" band on every page: the laptop raccoon peeks over the footer's top edge under the button,
   centered on his head (his tail sits to the left in the art) */
.cta-band .wrap{padding-bottom:0}
.coon-stand--band{--h:200px;margin:36px auto 0;transform:translateX(-8%)}
.coon-stand--band::before{display:none}
@media (max-width:760px){.coon-stand--band{--h:160px;margin-top:30px}}

/* 404 (Scott 11-12): the standard banner, then a big "404" in the heading font above the flashlight raccoon,
   centered on the raccoon (the beam fills the right of the art, so the picture shifts 17% right) */
.nf-404 .wrap{text-align:center}
.nf-num{font-family:var(--font-display);font-weight:800;color:var(--olive);font-size:clamp(4.5rem,11vw,8rem);line-height:1;letter-spacing:-.02em;margin:0 0 10px}
.coon-stand--404{--h:280px;margin:0 auto 18px;transform:translateX(17%)}
.nf-line{font-size:1.2rem;color:var(--olive);font-weight:600;margin:0 0 18px}
.nf-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.nf-links{display:flex;gap:10px 18px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:.98rem}
.nf-links span{color:var(--muted)}
.nf-links a{font-weight:600}
@media (max-width:760px){.coon-stand--404{--h:220px}}

/* Guides hub (Scott 11-12): grouped card rows under .faq-group headings, a read time on each card, a two-card
   row centered at two of the three columns' width */
.guide-read{display:block;margin-top:auto;padding-top:10px;font-size:.82rem;font-weight:700;color:var(--orange-dark)}
@media (min-width:901px){.cat-grid--two{grid-template-columns:repeat(2,1fr);max-width:calc(66.667% - 6px);margin-inline:auto}}