/*
Theme Name: Buyback Geeks
Theme URI: https://buybackgeeks.com
Author: Sonic
Description: Custom theme for Buyback Geeks, San Antonio. Design DNA: Corporate Trust (split hero + trust stat bar, 8px radius, proof-driven voice). Palette and type per STYLE-GUIDE.md — emerald is CTA-only, Forest carries structure.
Version: 1.55.4
License: GPL-2.0-or-later
Text Domain: buyback-geeks
*/

/* 2026-10-04 (1.55.13): fonts self-hosted — PageSpeed showed the Google Fonts
   stylesheet blocking first paint ~750 ms on mobile. Latin subset only, the same
   files Google served (Manrope and Inter are variable: one file covers every
   weight). → ✓ ✕ ↕ were never in any Google subset; they fall back as before.
   Manrope + Inter are preloaded in functions.php (bbg_font_preload). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(assets/fonts/manrope-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/plexmono-500-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/plexmono-600-latin.woff2) format('woff2')}

/* ==========================================================================
   Tokens — STYLE-GUIDE.md §1 / §2. Emerald is CTA-ONLY. Proportion 60/25/10/5.
   ========================================================================== */
:root{
  --ink:#0F172A;
  --counter:#08111C;
  --forest:#0B3B2E;
  --cash:#10B981;
  --cash-deep:#059669;

  --white:#fff;
  --offwhite:#F6F8F7;
  --border:#DDE4E1;
  --muted:#5E6D75;
  --tint:#ECFDF5;

  --amber-bg:#FEF3C7; --amber-br:#FBD9A0; --amber-ink:#7A4B04;
  --no:#B42318;

  --r:8px;
  --display:'Manrope',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --wrap:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--offwhite);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--forest)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;margin:0;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:-.01em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--cash);color:#04231A;padding:12px 18px;z-index:999;border-radius:0 0 var(--r) 0;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--cash);outline-offset:2px}

/* motion: elements are visible by default; JS opts them in */
.bbg-motion .bbg-pre{opacity:0}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .bbg-pre{opacity:1!important}
}

/* ==========================================================================
   Header
   ========================================================================== */
.announce{background:var(--counter);color:#8FA3A0;font-size:12px;padding:9px 0}
.announce .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.announce-tel{color:var(--cash);text-decoration:none;font-weight:600}
.announce-tel:hover{text-decoration:underline}
/* operator, 2026-09-29: on a phone the bar wrapped to three lines (92px) and pushed the hero's Call button
   under the fold. The number repeats the header's "Call now" right below it, so phones drop it here. */
@media (max-width:600px){
  .announce{padding:7px 0}
  .announce-tel{display:none}
}

.site-header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header-in{display:flex;align-items:center;gap:28px;padding:14px 24px}
.site-title{margin:0;font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em}
.site-title a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.site-title .mark{display:block;width:32px;height:32px;border-radius:7px;flex:none}
.wordmark strong{color:var(--forest)}
.site-nav{margin-left:auto}
.nav-list{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:16px;font-weight:500}
.nav-list a{color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-list a:hover{color:var(--forest);text-decoration:underline;text-underline-offset:4px}
.header-cta{flex:none}
/* Cart link (2026-09-14, always visible since 2026-09-15 — operator: a cart that appears only once
   something is in it reads as a glitch). The count pill is what bbg-cart.js hides at zero. */
.nav-cart{display:inline-flex;align-items:center;gap:6px;flex:none;color:var(--ink);text-decoration:none;transition:color .16s ease}
.nav-cart-count[hidden]{display:none}
.header-cta .header-cta-ico{display:none} /* beats .ico{display:inline-block} below; shown ≤340px */
.nav-cart:hover{color:var(--forest)}
.nav-cart .ico{width:22px;height:22px;color:currentColor}
.nav-cart-count{font-family:var(--mono);font-weight:600;font-size:11.5px;line-height:1;min-width:20px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--cash);color:#04231A}

/* ==========================================================================
   Shared bits
   ========================================================================== */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.sec-h2{font-size:34px}
.lede{color:var(--muted);max-width:66ch;margin:14px 0 0;font-size:18px}
section{padding:92px 0}
.sec-h2{max-width:20ch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:17px;
  border-radius:var(--r);padding:15px 26px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cash);color:#04231A}
.btn-primary:hover{background:var(--cash-deep);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--forest);color:var(--forest)}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-block{display:flex;width:100%;margin-top:10px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}

.plate{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:600;font-size:13.5px;
  background:var(--counter);color:#D6E4E0;border-radius:4px;padding:7px 12px}
.plate .v{color:var(--cash)}
.plate.light{background:var(--white);color:var(--ink);border:1px solid var(--border)}
.plate.light .v{color:var(--forest)}
.plates{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}

.badge-amber{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber-bg);
  border:1px solid var(--amber-br);border-radius:4px;padding:5px 9px}

/* ==========================================================================
   Hero — split (DNA signature)
   ========================================================================== */
.hero{background:var(--white);border-bottom:1px solid var(--border);padding:0}
.hero-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;align-items:stretch}
.hero-l{padding:64px 40px 64px 0}
/* 2026-09-04 (operator): H1 styled like the live site — uppercase, two-tone, the object of the
   sentence in emerald. Text is byte-identical; only the span is new. Emerald here is an
   operator-directed exception to the CTA-only rule, homepage H1 only. */
.hero-h1{font-size:72px;line-height:.96;letter-spacing:-.03em;text-transform:uppercase;margin:0;max-width:9ch}
.hero-h1 .h1-obj{display:block;color:var(--cash)}
.hero-r{background:var(--offwhite);border-left:1px solid var(--border);padding:40px 0 40px 40px;display:flex;align-items:center}

.bbg-quote-mount{width:100%;max-width:560px}
.is-fallback{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:28px}
.qm-kicker{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.qm-h{font-size:24px;margin:0 0 8px}
.qm-body{color:var(--muted);font-size:16px}
.qm-facts{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--border);font-size:14.5px;color:var(--muted)}
.qm-facts li{margin-bottom:7px}
.qm-facts .mono{color:var(--forest);font-size:11.5px;letter-spacing:.08em;margin-right:8px}

/* ==========================================================================
   Trust stat bar
   ========================================================================== */
.stats-band{padding:0;background:var(--white)}
.stats{background:var(--forest);border-radius:var(--r);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;transform:translateY(-28px)}
.stat{padding:26px 22px;border-right:1px solid rgba(255,255,255,.10)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(22px,1.9vw,28px);color:#fff;line-height:1.05;letter-spacing:-.01em}
.stat .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#9CBAB1;margin-top:9px}

/* ==========================================================================
   Tiles
   ========================================================================== */
.tiles-sec{background:var(--white);padding-top:36px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.tile{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.tile:hover{transform:translateY(-3px);border-color:var(--forest);box-shadow:0 10px 28px rgba(11,59,46,.13)}

/* Media block. Fixed aspect so eight different photos read as one set. */
.tile-media{display:block;aspect-ratio:4/3;background:var(--offwhite);overflow:hidden}
.tile-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;filter:saturate(.88)}
.tile:hover .tile-media img{transform:scale(1.035)}

.tile-body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;flex:1}
.tile-h{font-size:17px;letter-spacing:-.015em}
.tile-s{font-size:14.5px;color:var(--muted);line-height:1.5;flex:1}

/* The CTA the audit called out: it was bare mono text with no affordance. */
.tile-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;
  font-family:var(--body);font-weight:600;font-size:14.5px;
  color:var(--forest);background:var(--tint);border:1px solid #BFE7D6;
  border-radius:6px;padding:9px 15px;transition:background .16s ease,color .16s ease,border-color .16s ease}
.tile:hover .tile-cta{background:var(--cash);border-color:var(--cash);color:#04231A}
.tile-cta-amber{align-self:flex-start}
.tile-callonly{border-style:dashed}
.tile-callonly .tile-media img{filter:saturate(.55) opacity(.9)}
.tiles-foot{margin-top:22px;color:var(--muted);font-size:16px}

/* ==========================================================================
   Spotlight
   ========================================================================== */
/* The page's main dark anchor. It was off-white and sat directly against an
   off-white comparison section, so the two read as one long region of text. */
.spotlight{background:var(--forest);color:#DCEAE5}
.spotlight-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.spotlight .eyebrow{color:#7FB6A2}
.spotlight .sec-h2{color:#fff}
.spotlight .lede{color:#A8C4BC}
.spotlight .btn-secondary{color:#E7EFEC;border-color:#2E5348}
.spotlight .btn-secondary:hover{border-color:var(--cash);color:var(--cash)}
.spotlight .plate{background:#07271E;color:#CFE3DC}
.spotlight .payouts{border-top-color:#2E5348}
.spotlight .payouts-k,.spotlight .payouts-note{color:#8FB3A8}

.spotlight-r{display:flex;flex-direction:column;gap:20px}
.spotlight-fig{margin:0;border-radius:var(--r);overflow:hidden;background:#07271E}
.spotlight-fig img{display:block;width:100%;height:auto;filter:saturate(.85)}

.spotlight-aside{background:#07271E;border:1px solid #2E5348;border-radius:var(--r);padding:24px}
.aside-h{font-size:19px;margin-bottom:10px;color:#fff}
.spotlight-aside p{font-size:15.5px;color:#A8C4BC}
.aside-link{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--cash);text-decoration:none}
.aside-link:hover{text-decoration:underline}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps-sec{background:var(--offwhite)} /* off-white section, white cards — the inverse of .why-sec so the two do not bleed together (2026-09-03) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 0;padding:0;list-style:none;counter-reset:none}
.step{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:26px}
.step-n{display:inline-block;font-size:12px;letter-spacing:.12em;color:var(--cash);background:var(--counter);
  border-radius:3px;padding:4px 8px;margin-bottom:14px}
.step-h{font-size:20px;margin-bottom:8px}
.step p{font-size:15.5px;color:var(--muted)}

/* ==========================================================================
   Comparison
   ========================================================================== */
.why-sec{background:var(--white)}
.cmp-table{margin-top:28px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--white)}
.cmp-row{display:grid;grid-template-columns:2fr repeat(4,1fr);align-items:center;border-bottom:1px solid var(--border)}
.cmp-row:last-child{border-bottom:0}
.cmp-row>span{padding:14px 16px;font-size:15px;text-align:center}
.cmp-label{text-align:left!important;color:var(--ink);font-weight:500}
.cmp-head{background:var(--counter);color:#C9D8D4}
.cmp-head>span{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:13px 16px}
.yes{color:var(--cash);font-weight:700}
.no{color:var(--no);font-weight:700}

/* ==========================================================================
   Data security — dark band (Counter Black)
   ========================================================================== */
.data-sec{background:var(--counter);color:#DCE7E4}
.data-sec .sec-h2{color:#fff}
.data-sec .lede{color:#93A8A3}
.data-sec .eyebrow{color:#7E9A93}
.data-in{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.data-list{list-style:none;margin:0;padding:0}
.data-list li{display:flex;gap:13px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.10);font-size:16px;color:#B9CBC6}
.data-list li .ico{color:var(--cash);flex:none;margin-top:2px}
.data-list li:last-child{border-bottom:0}
.data-list strong{color:#fff;font-weight:600}
.data-sec .btn-secondary{color:#E7EFEC;border-color:#2A4A42}
.data-sec .btn-secondary:hover{border-color:var(--cash);color:var(--cash)}

/* ==========================================================================
   Proof
   ========================================================================== */
.proof-sec{background:var(--tint)} /* mint: the only full-width colour before the close, so proof stands out; breaks the off-white run How → Reviews → FAQ (2026-09-03) */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-head .sec-h2{margin-bottom:0}
.sec-link{font-weight:600;color:var(--forest);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;padding-bottom:6px}
.q{margin:0;background:var(--white);border:1px solid var(--border);border-left:3px solid var(--forest);
  border-radius:var(--r);padding:24px}
.q p{font-size:16px;color:var(--ink);line-height:1.55}
.q cite{display:block;margin-top:14px;font-style:normal;font-weight:600;font-size:14.5px}
.q cite .mono{color:var(--muted);font-weight:500;font-size:12.5px}


/* ==========================================================================
   FAQ — content mirrors the FAQPage schema (same source: bbg_faqs())
   ========================================================================== */
.faq-sec{background:var(--offwhite);border-top:1px solid var(--border)}
.faqs{margin-top:28px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--white)}
.faq{border-bottom:1px solid var(--border)}
.faq:last-child{border-bottom:0}
.faq>summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;gap:14px}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:20px;color:var(--forest);line-height:1;flex:none}
.faq[open]>summary::after{content:"–"}
.faq>summary:hover{background:var(--offwhite)}
.faq-q{font-size:17.5px;margin:0;letter-spacing:-.01em}
.faq-a{padding:0 22px 22px;color:var(--muted);font-size:16px;max-width:80ch}

/* ==========================================================================
   Visit
   ========================================================================== */
.visit-sec{background:var(--white)}
.visit-in{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.find-box{margin-top:26px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px}
.find-h{font-size:19px;margin-bottom:12px}
.find-steps{margin:0;padding-left:20px;font-size:16px;color:var(--muted)}
.find-steps li{margin-bottom:8px}
.find-steps strong{color:var(--ink)}
.find-note{margin-top:14px;font-size:12.5px;color:var(--muted)}
.visit-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:28px;position:sticky;top:92px}
.vc-h{font-size:20px;margin-bottom:14px}
.vc-addr{font-style:normal;font-size:16px;line-height:1.55}
.vc-hours{margin:18px 0;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.vc-hours div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:15.5px}
.vc-hours dt{color:var(--muted)}
.vc-hours dd{margin:0;font-weight:600}
.vc-hours .closed{color:var(--no)}
.vc-bring{font-size:15px;color:var(--muted);margin-bottom:6px}

/* ==========================================================================
   Close
   ========================================================================== */
.close-sec{background:var(--forest);color:#DCEAE5}
.close-sec .sec-h2{color:#fff;font-size:38px}
.close-sec .lede{color:#A8C4BC}
.close-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.close-in .lede{margin-left:auto;margin-right:auto}
.close-sec .btn-secondary{color:#E7EFEC;border-color:#2E5348}
.close-sec .btn-secondary:hover{border-color:var(--cash);color:var(--cash)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--counter);color:#93A8A3;padding:56px 0 28px;font-size:15px}
.footer-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.site-footer .site-title a,.site-footer .wordmark{color:#fff}
.site-footer .wordmark strong{color:var(--cash)}
.f-note{color:#6F8580;font-size:14px;margin-top:10px;line-height:1.5}
.f-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#7E9A93;font-weight:600;margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#C4D5D1;text-decoration:none}
.site-footer a:hover{color:var(--cash);text-decoration:underline}
.f-addr{font-style:normal;line-height:1.6;color:#C4D5D1}
.f-tel{display:inline-block;margin-top:12px;font-family:var(--mono);font-weight:600;color:var(--cash)!important}
.f-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);font-size:12px;color:#6F8580}
.f-legal a{color:#6F8580}

/* ==========================================================================
   Interior pages
   ========================================================================== */
.page-body{padding:56px 24px 72px;max-width:760px} /* 2026-09-14: side padding restored — the 0 overrode .wrap's gutter, cards touched the phone edge */
.page-funnel{max-width:960px} /* the funnel's item grid wants the room; skin at the end of this file */
.page-funnel .is-funnel-pick{max-width:none}
.page-funnel .is-funnel-pick .qm-h{font-size:34px;letter-spacing:-.02em;margin-bottom:10px}
.page-funnel .is-funnel-pick .qm-body{max-width:640px;margin-bottom:22px}
.page-funnel .is-funnel-pick .pick{gap:14px}
.page-h1{font-size:44px;margin-bottom:20px}
.prose p{margin-bottom:18px}

/* ==========================================================================
   ⚡💥 Sonic Boom — Stage 3.5
   Findings 1,2,4,5,6,7,9,10,12. Emerald stays CTA-only (STYLE-GUIDE §1);
   Forest carries every new structural element.
   ========================================================================== */

/* Icons — §4: line, 1.75px, Forest on light / off-white on dark. Sized here so
   a definition is never emitted at a banned size. Stroke width is on the SVG. */
.ico{width:22px;height:22px;display:inline-block;vertical-align:-4px;color:var(--forest);flex:none}
.btn .ico{width:19px;height:19px;vertical-align:-3px}

/* Hero — finding 6 -------------------------------------------------------- */
.hero-areas{margin:18px 0 0;font-size:15.5px;color:var(--muted);max-width:56ch}

/* Payout ranges — finding 4 (renders only once bbg_payout_ranges() is filled) */
.payouts{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.payouts-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.payouts .plates{margin-top:0}
.payouts-note{margin-top:12px;font-size:14px;color:var(--muted);max-width:54ch}

/* Evaluation walkthrough — finding 5 -------------------------------------- */
.eval-sec{background:var(--offwhite);border-top:1px solid var(--border)}
.eval-steps{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.eval-step{display:flex;gap:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px;
  transition:transform .16s ease,border-color .16s ease}
.eval-step:hover{transform:translateY(-2px);border-color:#C2CFC9}
.eval-n{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--cash);background:var(--counter);border-radius:4px}
.eval-h{font-size:18px;line-height:1.25;margin-bottom:8px;display:flex;gap:9px;align-items:flex-start}
.eval-h .ico{margin-top:1px}
.eval-step p{font-size:15.5px;color:var(--muted);margin:0}
.eval-out{display:flex;gap:12px;align-items:flex-start;margin-top:22px;background:var(--tint);
  border:1px solid #BFE7D6;border-radius:var(--r);padding:18px 20px;font-size:16px;max-width:80ch}
.eval-out .ico{color:var(--forest);margin-top:2px}
/* The serials / law-enforcement block. Deliberately the darker of the two closing
   notes — it is a diligence statement, not a reassurance, and should not read as
   the same soft green as the "no fee" line beneath it. */
.eval-out-alt{background:var(--white);border-color:var(--border)}
.eval-out-alt .ico{color:var(--forest)}
.eval-out + .eval-out{margin-top:12px}

/* Wayfinding diagram ------------------------------------------------------
   Replaced the street-level locator: Maps answers "which building", this
   answers "which door", which is the one Maps can't. Labels are kept few and
   large so they survive scaling down on a phone — the numbered text list above
   carries the detail. */
.wayfind{margin:22px 0 0}
.wayfind-svg{display:block;width:100%;height:auto;border:1px solid var(--border);
  border-radius:var(--r);background:var(--white)}
.wf-road{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;fill:var(--muted)}
.wf-lbl{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;fill:var(--muted)}
.wf-suite{font-family:var(--display);font-size:19px;font-weight:800;fill:var(--forest)}
.wf-pin circle{fill:var(--counter)}
.wf-pin text{font-family:var(--mono);font-size:13px;font-weight:600;fill:var(--cash)}
.wayfind-cap{margin-top:9px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.wayfind-cap a{color:var(--forest)}

/* "The phone is answered Alamo Geeks" — a quiet heads-up, not a disclaimer.
   Muted and small so it reassures without competing with the CTA above it. */
.call-note{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.call-note strong{color:var(--ink);font-weight:600}

/* On a phone the diagram scales to roughly 47% of its viewBox, which would put
   the 12-unit interior labels near 5px — unreadable. The numbered text list
   above already carries the detail, so the small labels drop out and the two
   things that must stay readable (the destination and the step numbers) get
   bigger instead. */
@media (max-width:900px){
  .wf-lbl,.wf-road{display:none}
  .wf-suite{font-size:30px}
  .wf-pin circle{r:20}
  .wf-pin text{font-size:22px}
}

/* Service areas in the visit card — finding 7 ----------------------------- */
.vc-areas{margin-top:10px;font-size:14.5px;color:var(--muted)}
.vc-areas strong{color:var(--ink);font-weight:600}

/* Trust closer — finding 12 ----------------------------------------------- */
.close-trust{display:flex;gap:11px;align-items:flex-start;justify-content:center;margin:24px auto 0;
  max-width:64ch;font-size:15.5px;color:#A8C4BC;text-align:left}
.close-trust .ico{color:var(--cash);margin-top:2px}

/* Mobile navigation — finding 2 -------------------------------------------
   <details>/<summary>: keyboard- and SR-operable with zero JS. Hidden >900px. */
.mnav{display:none;position:relative;margin-left:4px}
.mnav-btn{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--r);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);user-select:none}
.mnav-btn::-webkit-details-marker{display:none}
.mnav-bars{width:17px;height:2px;background:var(--ink);position:relative;display:block}
.mnav-bars::before,.mnav-bars::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--ink)}
.mnav-bars::before{top:-5px}.mnav-bars::after{top:5px}
.mnav[open] .mnav-btn{border-color:var(--forest);color:var(--forest)}
.mnav[open] .mnav-bars{background:transparent}
.mnav[open] .mnav-bars::before{transform:rotate(45deg);top:0}
.mnav[open] .mnav-bars::after{transform:rotate(-45deg);top:0}
.mnav-panel{position:absolute;right:0;top:calc(100% + 11px);width:min(84vw,300px);z-index:60;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 18px 44px rgba(8,17,28,.16);padding:8px}
.mnav-list{list-style:none;margin:0;padding:0}
.mnav-list a{display:block;padding:13px 14px;text-decoration:none;color:var(--ink);
  font-weight:500;font-size:16px;border-radius:5px}
.mnav-list a:hover,.mnav-list a:focus-visible{background:var(--offwhite);color:var(--forest)}
.mnav-foot{border-top:1px solid var(--border);margin-top:6px;padding:14px}
.mnav-dir{display:flex;align-items:center;gap:9px;margin-top:12px;color:var(--forest);
  font-weight:600;font-size:15px;text-decoration:none}

/* Mobile sticky action bar — finding 1 ------------------------------------
   MOTION-PROFILE.md: slides in after 40% scroll, mobile only, and it must never
   cover the hero. [hidden] until JS reveals it, so a JS failure simply omits it
   rather than pinning a bar over the page. */
.sticky-cta{display:none}
/* Nav collapses earlier than the rest of the mobile rules: six items plus the
   wordmark and the Call CTA overflow the header between ~900px and ~1060px, and
   neither .header-in nor .nav-list wraps. Kept SEPARATE from the 900px block
   below on purpose - that block also carries .sticky-cta, which is mobile-only.
   2026-09-08: 1020 -> 1060 when "Contact" became the sixth item; at 1020-1060 the
   labels broke onto two lines inside each item. nowrap below guards the same. */
@media (max-width:1060px){
  .site-nav{display:none}
  .mnav{display:block}
  /* 2026-09-14 (operator): the cart badge stays in the bar on phones, next to Call now —
     a menu item alone is too easy to miss. The menu keeps its "Cart (n)" row as well. */
  .nav-cart{margin-left:2px}
  .nav-cart .ico{width:24px;height:24px}
}
@media (max-width:420px){
  /* small phones: wordmark + cart + Call now + menu must fit 360px. The menu button goes
     icon-only (the summary carries aria-label="Menu"), the gap tightens, Call now trims. */
  .header-in{gap:10px}
  .header-cta{padding:10px 13px;font-size:14.5px}
  .mnav-label{display:none}
  .mnav-btn{padding:12px 11px}
}
@media (max-width:380px){
  .header-in{padding-left:16px;padding-right:16px;gap:8px}
  .site-title{font-size:16px}
  .site-title a{gap:8px}
  .site-title .mark{width:28px;height:28px;border-radius:6px}
  .nav-cart .ico{width:22px;height:22px}
}
@media (max-width:340px){
  /* 2026-09-15: original iPhone SE (320px). With the cart link always in the bar the row overflowed
     by ~24px; the "Call now" label goes screen-reader-only and the phone icon stands in. The
     wordmark stays — it is the brand, the label is the cheaper loss. */
  .header-cta{padding:10px 12px}
  .header-cta .header-cta-ico{display:inline-block;width:19px;height:19px;vertical-align:-3px}
  .header-cta .header-cta-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

@media (max-width:900px){
  .sticky-cta{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid var(--border);
    box-shadow:0 -8px 26px rgba(8,17,28,.10);
    transform:translateY(110%);transition:transform .28s ease;
  }
  .sticky-cta[hidden]{display:none}
  .sticky-cta.is-in{transform:translateY(0)}
  .sticky-quote{flex:1 1 auto;padding:14px 16px;font-size:16px}
  .sticky-call{flex:1 1 auto;padding:14px 16px;font-size:16px}
  /* 2026-09-22: when the quote button leads, the call is the compact secondary */
  .sticky-quote + .sticky-call{flex:0 0 auto;background:var(--white)}
  .sticky-dir{flex:0 0 auto;padding:14px 16px;font-size:16px;background:var(--white)}
  /* keep the footer clear of the bar */
  body.has-sticky-cta .site-footer{padding-bottom:78px}
}
/* Phone LANDSCAPE (operator, 2026-09-01): at 852x393 / 640x360 the sticky header
   plus the sticky bar left ~130px of readable page. When the viewport is short,
   the header scrolls away and the bar stays hidden — the header's own "Call now"
   is one scroll-up away and the bar comes back the moment the phone is upright. */
@media (max-width:1020px) and (max-height:520px){
  .site-header{position:static}
  .sticky-cta,.sticky-cta.is-in{display:none}
  body.has-sticky-cta .site-footer{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .sticky-cta{transition:none}
}

/* ==========================================================================
   Design pass — operator review: "wall of text, no section distinction,
   poor CTAs, no images". Figures, section separation, CTA contrast.
   ========================================================================== */

/* Figures ---------------------------------------------------------------- */
.eval-fig{margin:34px 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--white)}
.eval-fig img{display:block;width:100%;height:auto;filter:saturate(.88)}
.eval-fig figcaption{padding:12px 16px;font-size:12px;letter-spacing:.04em;color:var(--muted);
  background:var(--white);border-top:1px solid var(--border)}
.eval-steps{margin-top:20px}

.data-r{display:flex;flex-direction:column;gap:22px}
.data-fig{margin:0;border-radius:var(--r);overflow:hidden;background:#0F1B26}
.data-fig img{display:block;width:100%;height:auto;filter:saturate(.7) brightness(.92)}

/* Secondary CTA contrast -------------------------------------------------
   It was a hairline --border outline on a near-white ground, which read as
   disabled next to the solid green primary. */
.btn-secondary{border-color:#C2CFC9;background:var(--white)}
.btn-secondary:hover{border-color:var(--forest);color:var(--forest);background:var(--white)}

/* ...but NOT on the dark bands. The rule above gave the secondary button a
   white fill, which on Forest/Counter left near-white text on white — the
   "How we price" button was effectively invisible. Dark sections keep it
   transparent with a light outline. */
.spotlight .btn-secondary,.close-sec .btn-secondary,.data-sec .btn-secondary{background:transparent}
.spotlight .btn-secondary:hover,.close-sec .btn-secondary:hover,.data-sec .btn-secondary:hover{
  background:rgba(255,255,255,.06);color:var(--cash);border-color:var(--cash)}

/* Equal card heights across rows — two-line titles made row 2 taller. */
.tile-h{min-height:2.3em}

/* Section separation -----------------------------------------------------
   Adjacent light sections shared a background (#FFFFFF vs #F6F8F7 differ by
   ~3% luminance) and read as one continuous wall. A hairline rule plus the
   restored padding gives the eye an actual boundary. */
.steps-sec,.proof-sec{border-top:1px solid var(--border)}
.tiles-sec{border-top:1px solid var(--border)}

/* Section headers get a short rule, so each one reads as a new chapter. */
.eyebrow{position:relative;padding-left:30px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:20px;height:2px;
  background:var(--cash);transform:translateY(-50%)}
.spotlight .eyebrow::before,.data-sec .eyebrow::before,.close-sec .eyebrow::before{background:var(--cash)}

/* Prose measure — body copy inside cards was running the full column width. */
.eval-step p,.step p,.tile-s{max-width:52ch}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1040px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .spotlight-in{grid-template-columns:1fr;gap:34px}
  .quotes{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  body{font-size:17px}
  .hero-in{grid-template-columns:1fr}
  .hero-l{padding:44px 0 32px}
  .hero-h1{font-size:44px;max-width:9ch}
  .hero-r{border-left:0;border-top:1px solid var(--border);padding:32px 0}
  .bbg-quote-mount{max-width:none}
  /* Phones: one reason per row. Two columns broke "Get cash today" over three
     lines and the sub-lines over four (2026-09-03). */
  .stats{grid-template-columns:1fr;transform:translateY(-20px)}
  .stat{padding:18px 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.10)}
  .stat:last-child{border-bottom:0}
  .stat .l{margin-top:5px}
  .spotlight-in,.data-in,.visit-in{grid-template-columns:1fr;gap:28px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:14px}
  .eval-steps{grid-template-columns:1fr}
  section{padding:64px 0}
  .eyebrow{padding-left:26px}
  .steps{grid-template-columns:1fr}
  .visit-card{position:static}
  .sec-h2{font-size:27px}
  .close-sec .sec-h2{font-size:29px}
  .header-in{gap:14px}
  .site-title{margin-right:auto}
  .cmp-row{grid-template-columns:1.4fr repeat(4,1fr)}
  .cmp-row>span{padding:11px 8px;font-size:13px}
  .cmp-head>span{font-size:10px;padding:10px 8px}
}

/* ==========================================================================
   Category pages (parts/page-sell.php)
   Same six-beat rhythm as the homepage, same light/dark alternation so a
   visitor moving between them feels one site.
   ========================================================================== */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--forest);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 6px;opacity:.5}

.sp-hero{background:var(--white);padding:52px 0 72px}
.sp-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.sp-hero .page-h1{font-size:52px;line-height:1.05;margin-bottom:18px}
.sp-fig{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.sp-fig img{display:block;width:100%;height:auto;filter:saturate(.88)}
.sp-callbadge{display:inline-flex;margin-top:20px}
.qm-h + .sp-callbadge{margin:0 0 16px} /* 2026-10-08: stopped-category notice on the funnel picker */

.sp-why{background:var(--forest);color:#DCEAE5;border-top:1px solid var(--border)}
.sp-why .eyebrow{color:#7FB6A2}
.sp-why .sec-h2{color:#fff}
.sp-why .lede{color:#A8C4BC;max-width:74ch}

.sp-buy{background:var(--white)}
.sp-list{margin:30px 0 0;padding:0}
.sp-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--border)}
.sp-row:first-child{border-top:1px solid var(--border)}
.sp-row dt{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
.sp-row dd{margin:0;color:var(--muted);font-size:16px}
.sp-note{margin-top:22px;color:var(--muted);font-size:15.5px}
.sp-note a{color:var(--forest)}

.sp-moves{background:var(--offwhite);border-top:1px solid var(--border)}
.sp-moves-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.sp-moves-list li{display:flex;gap:18px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:24px}
.sp-n{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--cash);background:var(--counter);border-radius:4px}
.sp-moves-list h3{font-size:18px;margin-bottom:7px}
.sp-moves-list p{color:var(--muted);font-size:15.5px;max-width:78ch}
/* Sonic Boom re-audit 2026-09-09, finding 3: five full-width cards left a blank right third at 1440. Two-up; an odd last card spans. */
@media (min-width:900px){.sp-moves-list{grid-template-columns:1fr 1fr}.sp-moves-list li:last-child:nth-child(odd){grid-column:1/-1}}

.sp-process{background:var(--white);border-top:1px solid var(--border)}
.sp-steps{margin:30px 0 0;padding-left:22px;display:grid;gap:16px;max-width:84ch}
.sp-steps li{color:var(--muted);font-size:16.5px;line-height:1.6;padding-left:6px}
.sp-steps strong{color:var(--ink)}
.sp-trust{display:flex;gap:12px;align-items:flex-start;margin-top:26px;background:var(--offwhite);
  border:1px solid var(--border);border-radius:var(--r);padding:20px;max-width:84ch;font-size:15.5px;color:var(--muted)}
.sp-trust .ico{color:var(--forest);flex:none;margin-top:2px}

.sp-data{background:var(--counter);color:#B9CBC6}
.sp-data .eyebrow{color:#7FB6A2}
.sp-data .sec-h2{color:#fff}
.sp-data .lede{color:#B9CBC6}
.sp-data-in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.sp-data .btn-secondary{background:transparent;color:#E7EFEC;border-color:#2E4A44}
.sp-data .btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--cash);border-color:var(--cash)}
.sp-datafig{margin:0;border-radius:var(--r);overflow:hidden}
.sp-datafig img{display:block;width:100%;height:auto;filter:saturate(.7) brightness(.92)}

.sp-ident{background:var(--offwhite);border-top:1px solid var(--border);padding:56px 0}
.sp-ident-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:30px;max-width:80ch}
.sp-ident-h{font-size:21px;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.sp-ident-box p{color:var(--muted);font-size:16px}

.sp-faq{background:var(--white);border-top:1px solid var(--border)}

.sp-siblings{background:var(--offwhite);border-top:1px solid var(--border)}
.sp-sibgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.sp-sib{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .16s ease,border-color .16s ease}
.sp-sib:hover{transform:translateY(-2px);border-color:var(--forest)}
.sp-sib img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.85)}
.sp-sib span{padding:13px 15px;font-weight:600;font-size:14.5px}

.sp-close{background:var(--forest);color:#DCEAE5}
.sp-close .sec-h2{color:#fff;font-size:36px}
.sp-close .lede{color:#A8C4BC}
.sp-close .call-note{color:#8FB3A8}
.sp-close .call-note strong{color:#fff}
.sp-close .btn-secondary{background:transparent;color:#E7EFEC;border-color:#2E5348}
.sp-close .btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--cash);border-color:var(--cash)}
.sp-close-in{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
.sp-hours{background:#07271E;border:1px solid #2E5348;border-radius:var(--r);padding:24px}
.sp-hours .vc-hours dt{color:#A8C4BC}
.sp-hours .vc-hours dd{color:#fff}
.sp-hours .sp-note a{color:var(--cash)}

@media (max-width:1040px){ .sp-sibgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .sp-hero-in,.sp-data-in,.sp-close-in{grid-template-columns:1fr;gap:30px}
  .sp-hero .page-h1{font-size:36px}
  .sp-row{grid-template-columns:1fr;gap:6px}
  .sp-close .sec-h2{font-size:28px}
}

/* ==========================================================================
   Guide / hub / cluster pages (parts/page-guide.php)
   Two-column: prose that stays inside a readable measure, plus a sticky
   conversion card so the counter is never off-screen on a long read.
   ========================================================================== */
.gp-hero{background:var(--white);padding:52px 0 40px}
.gp-hero .page-h1{font-size:48px;line-height:1.06;margin-bottom:18px;max-width:20ch}
.gp-lede{font-size:20px;max-width:68ch}
.gp-fig{margin:0 0 8px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.gp-fig img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover;object-position:center 60%;filter:saturate(.88)}

.gp-body{background:var(--white);padding:48px 0 84px}
.gp-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:56px;align-items:start}
.gp-main{min-width:0}
.gp-sec{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--border)}
.gp-sec:last-child{border-bottom:0;margin-bottom:0}
.gp-sec h2{font-size:28px;margin-bottom:16px;max-width:24ch}
.gp-sec h3{font-size:18px}
.gp-sec p{color:var(--muted);font-size:17px;line-height:1.65;max-width:70ch;margin-bottom:14px}
.gp-sec p:last-child{margin-bottom:0}
.gp-sec strong{color:var(--ink);font-weight:600}
.gp-sec a{color:var(--forest)}

.gp-list,.gp-steps{margin:0 0 14px;padding-left:22px;max-width:70ch}
.gp-list li,.gp-steps li{color:var(--muted);font-size:17px;line-height:1.6;margin-bottom:11px;padding-left:5px}
.gp-list li strong,.gp-steps li strong{color:var(--ink)}

.gp-note{display:flex;gap:12px;align-items:flex-start;background:var(--tint);border:1px solid #BFE7D6;
  border-radius:var(--r);padding:17px 19px;max-width:74ch;margin-top:18px}
.gp-note .ico{color:var(--forest);flex:none;margin-top:2px}
.gp-note span{font-size:15.5px;color:var(--ink);line-height:1.6}
.gp-note a{color:var(--forest)}

/* Hub page blocks, 2026-09-05 (operator: "a wall of text after the image"). Category cards,
   the "do not take" columns, guide-link tiles and a mid-page CTA. Mint cards follow the
   homepage .benefit look; forest carries the green, emerald stays on the buttons. */
.gp-cards{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:none}
.gp-cards a{position:relative;display:block;height:100%;background:var(--tint);border-radius:var(--r);padding:20px 44px 18px 20px;text-decoration:none;color:var(--ink);transition:background .15s,transform .15s}
.gp-cards a:hover{background:#D3EFE3;transform:translateY(-1px)}
.gp-cards h3{font-size:18px;letter-spacing:-.015em;margin:0 0 6px;color:var(--forest)}
.gp-cards p{margin:0;font-size:15px;line-height:1.5;color:var(--ink);opacity:.82}
.gp-card-go{position:absolute;right:16px;top:18px;color:var(--forest);font-size:18px}
.gp-facts{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:none}
.gp-facts li{display:flex;gap:12px;align-items:flex-start;background:var(--tint);border-radius:var(--r);padding:18px 20px}
.gp-facts .ico{width:20px;height:20px;color:var(--forest);flex:none;margin-top:2px}
.gp-facts h3{font-size:16.5px;letter-spacing:-.01em;margin:0 0 4px;color:var(--forest)}
.gp-facts p{margin:0;font-size:15px;line-height:1.5;color:var(--ink);opacity:.82;max-width:none}
.gp-no{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.gp-no h3{font-size:16.5px;margin:0 0 10px;color:var(--ink)}
.gp-x{list-style:none;margin:0;padding:0}
.gp-x li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--muted);padding:6px 0;border-top:1px solid var(--border)}
.gp-x li:last-child{border-bottom:1px solid var(--border)}
.gp-x li span{color:#B4402F;font-weight:600;flex:none;font-size:13px;margin-top:3px}
.gp-links{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:none}
.gp-links li{background:var(--offwhite);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px}
.gp-links a{display:block;font-weight:600;font-size:16.5px;color:var(--forest);text-decoration:none;margin-bottom:4px}
.gp-links a:hover{text-decoration:underline}
.gp-links span{display:block;font-size:14.5px;line-height:1.5;color:var(--muted)}
.gp-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:26px;padding:22px 24px;background:var(--forest);border-radius:var(--r);color:#DCEAE5}
.gp-cta h3{margin:0 0 4px;font-size:20px;color:#fff}
.gp-cta p{margin:0;font-size:15px;color:#A8C4BC;max-width:46ch}
.gp-cta .btns{margin:0}
.gp-cta .btns .btn-primary{order:-1}
.gp-cta .btn-secondary{background:transparent;color:#E7EFEC;border-color:#2E5348}
.gp-cta .btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--cash);border-color:var(--cash)}
.gp-sec h2.has-n{display:flex;align-items:flex-start;gap:14px;max-width:none}
.gp-sec h2.has-n .gp-sec-n{flex:none;margin:0}
.gp-sec-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--tint);color:var(--forest);font-size:13px;letter-spacing:.08em;font-weight:600;vertical-align:middle;margin:-4px 14px 0 0}
.gp-steps{list-style:none;padding:0;counter-reset:gps}
.gp-steps li{position:relative;padding-left:52px;margin-bottom:14px;counter-increment:gps}
.gp-steps li::before{content:"0" counter(gps);position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:8px;background:var(--tint);color:var(--forest);font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;font-weight:600;display:flex;align-items:center;justify-content:center}
.gp-sec{scroll-margin-top:92px} /* 2026-09-17: in-page jumps (the business page's form button) clear the sticky header */
.gp-aside{position:sticky;top:92px;display:grid;gap:18px}
.gp-card{background:var(--offwhite);border:1px solid var(--border);border-radius:var(--r);padding:24px}
.gp-card-h{font-size:18px;margin-bottom:14px}
.gp-rel{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:22px 24px}
.gp-rel ul{list-style:none;margin:0;padding:0}
.gp-rel li{padding:9px 0;border-bottom:1px solid var(--border)}
.gp-rel li:last-child{border-bottom:0}
.gp-rel a{color:var(--forest);text-decoration:none;font-size:15.5px;font-weight:500}
.gp-rel a:hover{text-decoration:underline}

.gp-close{background:var(--forest);color:#DCEAE5}
.gp-close .sec-h2{color:#fff}
.gp-close .lede{color:#A8C4BC;max-width:70ch}
.gp-close .btn-secondary{background:transparent;color:#E7EFEC;border-color:#2E5348}
.gp-close .btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--cash);border-color:var(--cash)}

@media (max-width:900px){
  .gp-grid{grid-template-columns:1fr;gap:34px}
  .gp-aside{position:static}
  .gp-no{grid-template-columns:1fr}
  .gp-hero .page-h1{font-size:34px}
  .gp-lede{font-size:18px}
  .gp-sec h2{font-size:24px}
}


/* ==========================================================================
   Homepage pass — 2026-09-02 (Dandyful as reference pattern, not copy)
   ========================================================================== */
/* Rating line under the eyebrow — visual only, no schema */
.hero-rating{display:inline-flex;align-items:center;gap:10px;margin:-2px 0 14px;font-size:14.5px;color:var(--muted);text-decoration:none}
.hero-rating strong{color:var(--ink);font-weight:700}
.hero-rating:hover span:last-child{text-decoration:underline}
.stars{position:relative;display:inline-block;font-size:17px;line-height:1;letter-spacing:1px;color:#D5DDD9}
.stars::before{content:"★★★★★"}
.stars::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--fill,100%);overflow:hidden;white-space:nowrap;color:#E8A317}

/* Category picker in the hero (plugin stand-in) */
.is-picker .qm-body{margin-bottom:18px}
/* 2026-09-23: quote system down — static notice in place of the tiles (parts/quote-fallback.php) */
.is-down{border-left:4px solid var(--amber-br)}
.is-down .qm-body{margin-bottom:0}
.qm-down-btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.pick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pick-t{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px 11px;background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--r);text-decoration:none;color:var(--ink);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.pick-t:hover,.pick-t:focus-visible{transform:translateY(-2px);border-color:var(--forest);box-shadow:0 8px 22px rgba(11,59,46,.12);outline:none}
.pick-media{display:block;width:100%;aspect-ratio:4/3;border-radius:5px;overflow:hidden;background:var(--offwhite)}
.pick-media img{width:100%;height:100%;object-fit:cover;display:block}
.pick-l{font-size:13.5px;font-weight:600;letter-spacing:-.01em;text-align:center;line-height:1.2}
/* 2026-09-23: quote-speed badge per tile, from the catalog flag (bbg_funnel_is_custom) */
.pick-speed{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber-br);line-height:1.4}
.pick-speed.is-instant{background:var(--tint);color:var(--forest);border-color:var(--cash)}
.pick-note{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8A5A00;
  background:#FFF3D6;border-radius:4px;padding:2px 6px;margin-top:-4px}
.pick-call{border-style:dashed}
.pick-call .pick-media img{filter:saturate(.55) opacity(.9)}
.pick-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:14px;color:var(--muted);line-height:1.5}
.pick-foot p{margin:0}
.pick-foot .pick-custom{margin-bottom:10px;color:var(--ink)}
.pick-foot a{color:var(--forest);font-weight:600}
.pick-foot strong{color:var(--ink);font-weight:600}
.pick-biz{margin-top:8px!important}
.pick-biz a{text-decoration:none}
.pick-biz a:hover{text-decoration:underline}

/* Reviews — what was sold, taken from the review text itself */
.q-sold{display:block;margin-top:3px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);font-weight:500}

/* FAQ — two-column with a sticky intro */
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:52px;align-items:start}
.faq-intro{position:sticky;top:92px}
.faq-intro .lede{font-size:16.5px}
.faq-intro .lede a{color:var(--forest);font-weight:600}
.faq-more{margin-top:18px;font-size:15px}
.faq-more a{color:var(--forest);font-weight:600;text-decoration:none}
.faq-more a:hover{text-decoration:underline}
.faq-grid .faqs{margin-top:0}

/* Closing pair */
.btns-or{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#A8C4BC;padding:0 4px}

@media (max-width:1040px){
  .faq-grid{grid-template-columns:1fr;gap:26px}
  .faq-intro{position:static}
}
@media (max-width:560px){
  .pick{grid-template-columns:repeat(2,1fr)}
  .pick-l{font-size:14px}
}

/* Above the fold, stripped back — 2026-09-02 */
.hero-l{display:flex;flex-direction:column;justify-content:center}
.hero-rating{margin:0 0 18px}
.hero-lede{font-size:20px;max-width:30ch;margin-top:16px}
.hero-btns{margin-top:26px;gap:18px}
.btn-lg{padding:17px 30px;font-size:17px}
.hero-call{font-size:16px;color:var(--muted);text-decoration:none}
.hero-call strong{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.hero-call:hover strong{text-decoration-color:var(--forest);color:var(--forest)}
.hero-facts{margin:26px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){
  .hero-lede{font-size:18px;max-width:none}
  .hero-btns{gap:14px}
}

/* ==========================================================================
   Homepage cut-down — 2026-09-02. hero / stats / why / how / reviews / faq / close
   ========================================================================== */
.stats .stat{display:flex;align-items:center;gap:16px}
.stats .stat>.ico{width:26px;height:26px;color:var(--cash);flex:none}
.benefits{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Why cards, 2026-09-03 (operator): off-white on off-white with a 1px border did not
   separate. White section, mint cards, no border; icon in a white chip; body in ink,
   not muted grey. Forest carries the green — emerald stays CTA-only. */
.benefit{background:var(--tint);border:0;border-radius:var(--r);padding:26px 26px 24px}
.benefit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.benefit .ico{width:40px;height:40px;padding:9px;box-sizing:border-box;background:var(--white);border-radius:8px;color:var(--forest);display:block;box-shadow:0 1px 0 rgba(11,59,46,.08)}
.benefit .step-n{margin:0;background:var(--white);color:var(--forest)}
.benefit h3{font-size:19px;letter-spacing:-.015em;margin:0 0 8px;color:var(--forest)}
.benefit p{margin:0;color:var(--ink);opacity:.82;font-size:15.5px;line-height:1.55}
.steps-4{grid-template-columns:repeat(4,1fr)}
.steps-4 .step p{font-size:15px}
@media (max-width:1040px){
  .benefits{grid-template-columns:repeat(2,1fr)}
  .steps-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .stats .stat{gap:12px}
  .stats .stat>.ico{width:22px;height:22px}
}
@media (max-width:600px){
  .benefits{grid-template-columns:1fr}
  .steps-4{grid-template-columns:1fr}
}
@media (max-width:600px){
  .gp-cards,.gp-links,.gp-facts{grid-template-columns:1fr}
}

/* ==========================================================================
   Homepage surface pass, 2026-09-06 (operator, after reviewing itsworthmore.com:
   "I don't find the site very appealing. Are we using the correct colors?").
   The colours were right; the proportions were not. Same tokens, Forest now a
   PRIMARY surface — hero + band, reviews and close are forest, so roughly 40% of
   the page is dark and every light section sits between two dark ones. Display
   type is ~1.5×. The six step cards carry UI mock-ups instead of icons. Emerald
   remains CTA-only (plus the H1 object exception). Scoped to .home so no inner
   page changes. STYLE-GUIDE §1 proportion rule and §6 "no green hero" amended
   the same day.
   ========================================================================== */
.home .sec-h2{font-size:clamp(34px,4.2vw,54px);letter-spacing:-.025em;line-height:1.02;max-width:18ch}
.home .lede{font-size:19px}

/* Hero — forest. The picker becomes a dark quote card. */
.home .hero{background:var(--forest);color:#DCEAE5;border-bottom:0}
.home .hero-l{padding:84px 48px 84px 0}
.home .hero-rating{color:#A8C4BC}
.home .hero-rating strong{color:#fff}
.home .stars{color:#2E5348}
.home .hero-h1{color:#fff;font-size:clamp(46px,6vw,86px)}
.home .hero-lede{color:#C9DDD6;font-size:21px;max-width:30ch}
.home .hero-call{color:#A8C4BC}
.home .hero-call strong{color:#fff;text-decoration-color:#2E5348}
.home .hero-call:hover strong{color:var(--cash);text-decoration-color:var(--cash)}
.home .hero-facts{color:#7FB6A2}
.home .hero-r{background:transparent;border-left:1px solid rgba(255,255,255,.10);padding:56px 0 56px 48px}
.home .is-fallback{background:#07271E;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px rgba(0,0,0,.28)}
.home .qm-kicker{color:#7FB6A2}
.home .qm-h{color:#fff;font-size:26px}
.home .qm-body{color:#A8C4BC}
.home .pick-t{background:#0F3F32;border-color:rgba(255,255,255,.10);color:#fff}
.home .pick-t:hover,.home .pick-t:focus-visible{border-color:#7FB6A2;box-shadow:0 10px 26px rgba(0,0,0,.35);background:#124A3B}
.home .pick-media{background:#07271E}
.home .pick-call{border-style:dashed;border-color:rgba(255,255,255,.22)}
.home .pick-foot{border-top-color:rgba(255,255,255,.12);color:#A8C4BC}
.home .pick-foot a,.home .pick-foot strong{color:#fff}
.home .pick-biz a{color:#7FB6A2}

/* Band — continues the hero surface; a hairline instead of the floating box. */
.home .stats-band{background:var(--forest);padding:0}
.home .stats{background:transparent;border-radius:0;transform:none;border-top:1px solid rgba(255,255,255,.12)}
.home .stat{padding:30px 22px 32px}
.home .stat:first-child{padding-left:0}

/* How it works — white, with the mock-up cards. */
.home .why-sec{padding-top:104px}
.home .benefits{margin-top:44px;gap:20px}
.home .benefit{background:var(--white);border:1px solid var(--border);padding:0;display:flex;flex-direction:column;overflow:hidden}
.home .benefit-body{padding:22px 24px 26px}
.home .benefit h3{font-size:21px}
.home .benefit p{font-size:15.5px}

/* The mock-ups. A small "screen" rising out of an off-white stage; each one is the real
   artefact of that step — cart, address plate, intake slip, bench check, erase, paid. */
.mock{position:relative;background:var(--offwhite);border-bottom:1px solid var(--border);
  min-height:196px;padding:22px 24px 0;display:flex;align-items:flex-end;justify-content:center}
.mock .step-n{position:absolute;left:16px;top:16px;margin:0;background:var(--forest);color:#fff}
.mu{width:100%;max-width:250px;background:var(--white);border:1px solid var(--border);border-bottom:0;border-radius:8px 8px 0 0;
  box-shadow:0 12px 30px rgba(11,59,46,.10);padding:14px 16px 12px;font-size:13px;line-height:1.35;color:var(--ink)}
.mu-t{font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:-.01em;margin-bottom:8px}
.mu-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--border)}
.mu-k{color:var(--muted)}
.mu-v{font-weight:600}
.mu-ok{color:var(--forest)}
.mu-sub{margin-top:9px;font-size:11.5px;color:var(--muted)}
.mu-btn{display:block;margin-top:11px;background:var(--cash);color:#04231A;font-weight:600;font-size:12.5px;text-align:center;border-radius:6px;padding:8px 10px}
.mock-dark{background:#E3EAE7}
.mu-plate{background:var(--counter);border-color:var(--counter);color:#D6E4E0;box-shadow:0 12px 30px rgba(8,17,28,.22)}
.mu-plate .mu-t{color:#7FB6A2;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.mu-addr{font-size:14px;font-weight:600;color:#fff;line-height:1.4}
.mu-plate .mu-sub{color:#8FB3A8}
.mu-bar{height:8px;border-radius:4px;background:#1B2A3A;overflow:hidden;margin:2px 0 12px}
.mu-bar span{display:block;width:100%;height:100%;background:var(--cash)}
.mu-note{display:flex;gap:12px;align-items:flex-start;border-radius:8px;border-bottom:1px solid var(--border);padding:14px 16px;margin-bottom:22px}
.mu-note .mu-t{margin-bottom:3px}
.mu-note .mu-sub{margin-top:0}
.mu-dot{flex:none;width:34px;height:34px;max-width:34px;max-height:34px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center}
.mu-dot .ico{width:18px;height:18px}

/* Reviews — forest. */
.home .proof-sec{background:var(--forest);color:#DCEAE5}
.home .proof-sec .eyebrow{color:#7FB6A2}
.home .proof-sec .eyebrow::before{background:#7FB6A2}
.home .proof-sec .sec-h2{color:#fff}
.home .sec-link{color:#C9DDD6}
.home .sec-link:hover{color:#fff}
.home .q{background:#07271E;border-color:#2E5348;border-left-color:#7FB6A2;padding:28px}
.home .q p{color:#E7EFEC;font-size:17px}
.home .q cite{color:#fff}
.home .q cite .mono{color:#9CBAB1}

/* FAQ — off-white between two forest blocks; the H2 only grows. */
.home .faq-sec{border-top:0}

/* Close — split, with the GPU photograph large. */
.home .close-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;text-align:left}
.home .close-l{display:flex;flex-direction:column;align-items:flex-start}
.home .close-sec .sec-h2{font-size:clamp(34px,4vw,52px)}
.home .close-in .lede{margin-left:0;margin-right:0}
.home .close-trust{justify-content:flex-start;margin-left:0;margin-right:0}
.close-fig{margin:0;border-radius:var(--r);overflow:hidden;background:#07271E;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.close-fig img{display:block;width:100%;height:auto;filter:saturate(.85)}

@media (max-width:1040px){
  .home .hero-l{padding:64px 32px 56px 0}
}
@media (max-width:900px){
  .home .hero-r{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding:36px 0 44px}
  .home .stats{grid-template-columns:repeat(2,1fr)}
  .home .stat{padding:22px 18px}
  .home .stat:first-child{padding-left:18px}
  .home .close-in{grid-template-columns:1fr;gap:36px}
  .close-fig{max-width:520px}
}
@media (max-width:600px){
  .home .hero-l{padding:28px 0 40px} /* operator, 2026-09-29: was 48px top — the hero's Call button sat just under a phone's fold */
  .home .hero-r{padding:28px 0 40px}
  .home .is-fallback{padding:20px}
  .home .benefits{grid-template-columns:1fr}
}
.mu-dot{font-size:18px;font-weight:700;line-height:1}

/* Reviews — gold aggregate stars in the header (operator, 2026-09-06). Aggregate only, §5. */
.proof-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:6px}
.proof-rating{display:flex;align-items:center;gap:12px;font-size:15.5px;color:#C9DDD6;margin:0}
.proof-rating strong{color:#fff;font-weight:700;font-size:17px}
.stars-lg{font-size:24px;letter-spacing:2px}
.home .proof-sec .stars{color:#2E5348}
.home .proof-sec .sec-link{padding-bottom:0}
@media (max-width:900px){
  .proof-side{align-items:flex-start}
}

/* Hero legibility, 2026-09-06 (operator: the dark quote card on the dark hero was hard to read —
   three greens within a few shades). The picker is now a WHITE card on the forest hero, the one
   light object above the fold, so the tool is where the eye lands (ItsWorthMore's dark-band /
   light-card pattern). Secondary text on the left goes one step lighter. Overrides the dark-card
   rules from the surface pass above; same selectors, later in the cascade. */
.home .is-fallback{background:var(--white);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.home .qm-kicker{color:var(--muted)}
.home .qm-h{color:var(--ink)}
.home .qm-body{color:var(--muted)}
.home .pick-t{background:var(--white);border-color:var(--border);color:var(--ink)}
.home .pick-t:hover,.home .pick-t:focus-visible{border-color:var(--forest);box-shadow:0 8px 22px rgba(11,59,46,.12);background:var(--white)}
.home .pick-media{background:var(--offwhite)}
.home .pick-call{border-color:var(--border)}
.home .pick-foot{border-top-color:var(--border);color:var(--muted)}
.home .pick-foot a,.home .pick-foot strong{color:var(--forest)}
.home .pick-foot strong{color:var(--ink)}
.home .pick-biz a{color:var(--forest)}
.home .hero-rating{color:#E7EFEC}
.home .hero-lede{color:#E7EFEC}
.home .hero-call{color:#C9DDD6}
.home .hero-facts{color:#C9DDD6}

/* Hero light surface + PCB traces, 2026-09-07 (operator: "the dark green background is
   overbearing" — hero moves to off-white, the same token as Common questions; the band under
   it STAYS forest so the top of the page keeps its depth). H1 back to ink with the emerald
   object; secondary text back to ink/muted; the white picker card gets a hairline and a
   forest-tinted shadow because it is no longer the one light object. Behind the left column
   sits `parts/hero-pcb.php`, circuit-trace line art at 4% forest across the whole hero
   (operator, 2026-09-07: "3%, across the entire hero"). Overrides the two 2026-09-06 hero blocks above; same selectors, later cascade.
   Surfaces now: off-white → forest band → white → forest → off-white → forest. */
.home .hero{background:var(--offwhite);color:var(--ink);position:relative;overflow:hidden}
.home .hero-in{position:relative;z-index:1}
.home .hero-rating{color:var(--muted)}
.home .hero-rating strong{color:var(--ink)}
.home .stars{color:#D5DDD9}
.home .hero-h1{color:var(--ink)}
.home .hero-lede{color:var(--ink)}
.home .hero-call{color:var(--muted)}
.home .hero-call strong{color:var(--ink);text-decoration-color:var(--border)}
.home .hero-call:hover strong{color:var(--forest);text-decoration-color:var(--forest)}
.home .hero-facts{color:var(--muted)}
.home .hero-r{border-left:0} /* operator, 2026-09-07: no divider between the columns */
#offer{scroll-margin-top:92px} /* operator, 2026-09-29: "Get my quote" jumps landed the picker's heading under the phone's sticky header (90px); the 46px admin-bar offset hid this on loopback */
.home .is-fallback{border:1px solid var(--border);box-shadow:0 24px 50px rgba(11,59,46,.14),0 2px 6px rgba(11,59,46,.06)}
.hero-pcb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--forest);opacity:.04}
@media (max-width:900px){
  .home .hero-r{border-left:0;border-top:0} /* operator, 2026-09-07: no hairline on phones either */
  /* natural size, cropped, so the traces stay board-scale instead of stretching to the tall hero */
  .hero-pcb{inset:auto;top:0;left:-140px;width:1200px;height:620px} /* natural size = the 60% sheet; still board-scale on a phone */
}

/* ==========================================================================
   Warm-and-bold pass — 2026-09-22 (operator). Money and speed first; the phone is a
   full button; three beats; a person in the proof section. BRAND-BRIEF.md §4 note.
   ========================================================================== */
.hero-call-btn{display:inline-flex;align-items:center;gap:9px}
.hero-call-btn .ico{width:18px;height:18px;flex:none}
.home .hero-btns .btn-secondary{background:var(--white);border-color:var(--ink);color:var(--ink)}
.home .hero-btns .btn-secondary:hover{border-color:var(--forest);color:var(--forest)}
.how-note{display:flex;gap:11px;align-items:flex-start;margin:28px 0 0;max-width:78ch;font-size:15.5px;line-height:1.55;color:var(--muted)}
.how-note .ico{width:20px;height:20px;flex:none;color:var(--forest);margin-top:2px}
.how-note a{color:var(--forest);font-weight:600}
.proof-owner{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:32px;align-items:center;margin-top:28px;
  padding:22px;background:#07271E;border:1px solid #2E5348;border-left:3px solid var(--cash);border-radius:var(--r)}
.proof-owner img{display:block;width:100%;height:auto;border-radius:6px;filter:saturate(.9)}
.proof-owner p{margin:0;font-size:19px;line-height:1.55;color:#E7EFEC;max-width:60ch}
.proof-owner strong{color:#fff;font-weight:700}
@media (max-width:900px){
  .hero-btns .btn-lg{flex:1 1 auto;justify-content:center;text-align:center}
  .proof-owner{grid-template-columns:1fr;gap:18px}
  .proof-owner img{max-width:360px}
  .proof-owner p{font-size:17px}
}

/* Hub board hero, 2026-09-07 (operator: "the homepage looks great — the same style for the Sell
   hardware page"). `.gp-hero-board` is opted into per page via the registry ('hero' => 'board');
   only the hub uses it today. Same recipe as the homepage: off-white, PCB traces at 4% behind,
   copy left, the page image right as the one solid object (it was a full-width strip under the
   hero before). No dividers. Other guide pages are untouched. */
.gp-hero-board{background:var(--offwhite);position:relative;overflow:hidden;padding:64px 0 72px}
.gp-hero-board .gp-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.gp-hero-board .page-h1{font-size:clamp(40px,4.4vw,58px);letter-spacing:-.025em;max-width:16ch}
.gp-hero-board .gp-lede{max-width:52ch}
.gp-hero-fig{margin:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#07271E;box-shadow:0 24px 50px rgba(11,59,46,.14),0 2px 6px rgba(11,59,46,.06)}
.gp-hero-fig img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:16/11;object-fit:cover;object-position:center 55%;filter:saturate(.88)}
@media (max-width:900px){
  .gp-hero-board{padding:44px 0 48px}
  .gp-hero-board .gp-hero-in{grid-template-columns:1fr;gap:32px}
  .gp-hero-fig img{aspect-ratio:16/10}
}

/* Hub in the homepage style, 2026-09-07 (operator: "the mint color is not working for me. I thought
   you were going to use the style of the homepage, not just the hero"). The 2026-09-05 gp-* blocks
   were mint (--tint); the homepage settled on white cards with a hairline and a forest-tinted
   shadow, a photo/mock-up stage on top, forest number chips, and off-white FAQ. Every gp-* block
   now follows that, so the four reviewed guide pages pick it up too — mint is gone from the guide
   renderer entirely. Emerald stays on the buttons. */
.gp-sec h2{font-size:34px;letter-spacing:-.025em;line-height:1.05}
.gp-cards{gap:20px;margin-top:22px}
.gp-cards a{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:0;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 2px 6px rgba(11,59,46,.05);transition:border-color .15s,box-shadow .15s,transform .15s}
.gp-cards a:hover,.gp-cards a:focus-visible{background:var(--white);border-color:var(--forest);box-shadow:0 14px 34px rgba(11,59,46,.14);transform:translateY(-2px)}
.gp-card-media{display:block;background:var(--offwhite);border-bottom:1px solid var(--border);aspect-ratio:16/9;overflow:hidden}
.gp-card-media img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88);transition:transform .3s}
.gp-cards a:hover .gp-card-media img{transform:scale(1.03)}
.gp-card-body{display:block;padding:18px 20px 20px}
.gp-cards h3{font-size:19px;color:var(--ink);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gp-cards p{opacity:1;color:var(--muted)}
.gp-card-go{position:static;color:var(--forest);font-size:16px}
.gp-facts li{background:var(--white);border:1px solid var(--border);box-shadow:0 2px 6px rgba(11,59,46,.05)}
.gp-facts h3{color:var(--ink)}
.gp-links li{background:var(--white);box-shadow:0 2px 6px rgba(11,59,46,.05);transition:border-color .15s,box-shadow .15s}
.gp-links li:hover{border-color:var(--forest);box-shadow:0 10px 26px rgba(11,59,46,.12)}
.gp-note{background:var(--offwhite);border:1px solid var(--border);border-left:3px solid var(--forest)}
.gp-sec-n,.gp-steps li::before{background:var(--forest);color:#fff}
.gp-card{background:var(--white);box-shadow:0 2px 6px rgba(11,59,46,.05)}
.gp-rel{box-shadow:0 2px 6px rgba(11,59,46,.05)}
.gp-cta{padding:26px 28px;margin-top:30px}
@media (max-width:900px){ .gp-sec h2{font-size:28px} }

/* Step rows on /how-it-works/, 2026-09-07 (operator: "now redesign the How it works page"). The
   six numbered sections render the homepage mock-up (parts/step-mocks.php) in a white card beside
   the copy; the chip lives on the mock, as on the homepage. Stacks under 900px, mock first. */
.gp-step{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:start}
.gp-step .gp-mock{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 6px rgba(11,59,46,.05);position:sticky;top:92px}
.gp-step .mock{border-bottom:0;min-height:236px}
.gp-step-copy{min-width:0}
.gp-step-copy h2{margin-top:2px}
@media (max-width:900px){
  .gp-step{grid-template-columns:1fr;gap:20px}
  .gp-step .gp-mock{position:static}
  .gp-step .mock{min-height:200px}
}

/* Section stage, 2026-09-07 (operator: "now do the Data security page"). A section can carry
   'mock' => 'NN' to show one of the homepage mock-ups as a wide stage above its tiles — on
   /data-security/ that is the secure-erase plate (05) over the six "what we do" facts. The step
   chip is hidden: out of the 01–06 sequence the number means nothing. */
.gp-stage{margin:18px 0 20px}
.gp-stage .mock{border:1px solid var(--border);border-radius:var(--r);min-height:200px;padding-top:26px;box-shadow:0 2px 6px rgba(11,59,46,.05)}
.gp-stage .step-n{display:none}
.gp-stage .mu{max-width:320px}
.gp-facts{margin-top:0}

/* /visit-us/ hero object, 2026-09-07 (operator: "now visit us"). The wayfinding diagram
   (parts/wayfind-svg.php) is the board hero's right-hand object, in the same white card as
   the photos on the other board heroes. The old bottom "Visit the shop" section — a second copy
   of the door steps and of the Bring-it-in card, with the diagram under the FAQ — is retired
   with parts/visit-wayfinding.php; its .visit-*/.find-* rules above are now unused. */
.gp-hero-obj{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 16px 12px;box-shadow:0 24px 50px rgba(11,59,46,.14),0 2px 6px rgba(11,59,46,.06)}
.gp-hero-obj .wayfind{margin:0}
.gp-hero-obj .wayfind-svg{border:0;border-radius:0}
.gp-hero-obj .wayfind-cap{margin-top:8px}

/* The rest of the pages, 2026-09-07 (operator: "do the rest of the pages"). Board hero is now the
   DEFAULT for every guide-renderer page (35 of 44) — a page with no photo renders its copy alone on
   the board (.gp-hero-solo); 'hero' => 'plain' in a registry entry opts out. The eight sell pages
   (parts/page-sell.php) get the same hero, the forest data section instead of the navy one, and the
   intake / bench / paid mock-ups above the process steps. Surfaces on a sell page now run
   off-white → forest → white → off-white → white → forest → off-white → white → off-white → forest. */
.gp-hero-board .gp-hero-in.gp-hero-solo{grid-template-columns:minmax(0,1fr)}
.gp-hero-solo .page-h1{max-width:18ch}
.gp-hero-solo .gp-lede{max-width:64ch}
.sp-hero{background:var(--offwhite);position:relative;overflow:hidden;padding:64px 0 72px}
.sp-hero-in{position:relative;z-index:1;gap:64px}
.sp-hero .page-h1{font-size:clamp(40px,4.4vw,58px);letter-spacing:-.025em;line-height:1.05}
.sp-fig{background:#07271E;box-shadow:0 24px 50px rgba(11,59,46,.14),0 2px 6px rgba(11,59,46,.06)}
.sp-fig img{aspect-ratio:16/11;object-fit:cover;object-position:center 55%}
.sp-hero .plate.light{box-shadow:0 2px 6px rgba(11,59,46,.05)}
.sp-mocks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0 8px}
.sp-mock{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 6px rgba(11,59,46,.05)}
.sp-mock .mock{border-bottom:0;min-height:200px}
.sp-data{background:var(--forest);color:#DCEAE5}
.sp-data .lede{color:#C9DDD6}
.sp-data .btn-secondary{border-color:#2E5348}
.sp-datafig{border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.sp-datafig img{filter:saturate(.88)}
@media (max-width:900px){
  .sp-hero{padding:44px 0 48px}
  .sp-mocks{grid-template-columns:1fr;gap:14px}
  .sp-mock .mock{min-height:180px}
}

/* ==========================================================================
   Contact form, 2026-09-07 (operator: Fluent Forms on /contact/ and the
   business page). The card is the homepage's white-card language; Fluent's
   own stylesheet stays loaded (its validation messages depend on it), so the
   overrides sit on more specific selectors. Emerald stays CTA-only: the
   submit is the CTA. Labels take the eyebrow treatment.
   ========================================================================== */
.gp-form{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:28px 28px 24px;margin:18px 0 8px;
  box-shadow:0 24px 50px rgba(11,59,46,.10),0 2px 6px rgba(11,59,46,.06)}
.gp-form .fluentform .ff-el-group{margin-bottom:18px}
.gp-form .fluentform .ff-el-input--label label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:8px}
.gp-form .fluentform .ff-el-input--label.asterisk-right label:after{color:var(--no);margin-left:3px}
.gp-form .fluentform .ff-el-form-control{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:13px 14px;height:auto;line-height:1.35;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.gp-form .fluentform .ff-el-form-control:hover{border-color:#C2CFC9}
.gp-form .fluentform .ff-el-form-control:focus{border-color:var(--forest);background:var(--offwhite);box-shadow:0 0 0 3px rgba(11,59,46,.14);outline:none}
.gp-form .fluentform textarea.ff-el-form-control{min-height:140px;resize:vertical}
.gp-form .fluentform select.ff-el-form-control{appearance:none;-webkit-appearance:none;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='%230B3B2E' stroke-width='1.75' stroke-linecap='square'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.gp-form .fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--no)}
.gp-form .fluentform .error,.gp-form .fluentform .ff-el-is-error .text-danger{font-size:13.5px;color:var(--no);margin-top:6px}
.gp-form .fluentform .ff-btn-submit{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;background:var(--cash);color:#04231A;border:1.5px solid transparent;
  border-radius:var(--r);padding:15px 26px;min-height:0;line-height:1.2;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease}
.gp-form .fluentform .ff-btn-submit:hover,.gp-form .fluentform .ff-btn-submit:focus-visible{background:var(--cash-deep);color:#fff;transform:translateY(-2px);outline:none}
.gp-form .fluentform .ff-btn-submit:focus-visible{box-shadow:0 0 0 3px rgba(11,59,46,.25)}
.gp-form .fluentform .ff-btn-submit[disabled]{opacity:.6;transform:none;cursor:default}
.gp-form .fluentform .ff-el-group.ff_submit_btn_wrapper{margin:6px 0 0}
.gp-form .fluentform .ff-message-success{background:var(--tint);border:1px solid #BFE7D6;border-radius:var(--r);padding:16px 18px;color:var(--ink);font-size:16px;box-shadow:none}
.gp-form .fluentform .ff-errors-in-stack{background:#FEF3F2;border:1px solid #F4C7C3;border-radius:var(--r);padding:12px 14px;color:var(--no)}
@media (max-width:900px){
  .gp-form{padding:20px 18px 18px;margin:14px 0 6px}
  .gp-form .fluentform .ff-btn-submit{display:block;width:100%}
}

/* Click-to-load map on /visit-us/, 2026-09-08 (parts/map-embed.php) */
.gp-map{margin:22px 0 22px}
.gp-map-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--r);background:var(--white);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.gp-map-grid{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%)}
.gp-map-in{position:relative;text-align:center;max-width:460px;padding:24px}
.gp-map-plate{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--white);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.gp-map-plate svg{width:16px;height:16px;flex:0 0 16px;color:var(--forest)}
.gp-map-land{margin:0 0 16px;color:var(--muted);font-size:15px}
.gp-map-in .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gp-map-load{cursor:pointer;font:inherit}
.gp-map-card.is-live{aspect-ratio:16/10;display:block;background:#E9EEEB}
.gp-map-card.is-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gp-map .wayfind-cap{margin-top:9px}
@media (max-width:900px){
  .gp-map{margin:16px 0 18px}
  .gp-map-card{aspect-ratio:auto;min-height:300px}
  .gp-map-card.is-live{aspect-ratio:16/12;min-height:0}
  .gp-map-in{padding:18px 14px}
  .gp-map-in .btns{flex-direction:column}
  .gp-map-in .btn{width:100%}
}

/* /visit-us/ restructure, 2026-09-08 (operator): text-only centred hero; diagram beside the door steps */
.gp-hero-board .gp-hero-in.gp-hero-center{text-align:center;justify-items:center}
.gp-hero-center .gp-hero-copy{max-width:760px;margin:0 auto}
.gp-hero-center .crumbs{justify-content:center}
.gp-hero-center .page-h1{max-width:none;margin-left:auto;margin-right:auto}
.gp-hero-center .gp-lede{max-width:56ch;margin-left:auto;margin-right:auto}
.gp-hero-center .btns{justify-content:center}
.gp-sec-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:40px;align-items:start}
.gp-sec-split > *{grid-column:1}
.gp-sec-split > .gp-sec-part{grid-column:2;grid-row:1 / span 20;align-self:start}
.gp-sec-split > .gp-note{grid-column:1 / -1}
.gp-sec-part .wayfind{margin:0}
@media (max-width:1040px){
  .gp-sec-split{grid-template-columns:1fr;column-gap:0}
  .gp-sec-split > .gp-sec-part{grid-column:1;grid-row:auto;margin:6px 0 18px}
  .gp-sec-split > .gp-note{grid-column:1}
}

/* Icon tiles on /what-we-dont-buy/, 2026-09-08 (operator: "a huge wall of text") */
.gp-tiles{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:none}
.gp-tiles li{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px 16px 16px}
.gp-tile-ico{position:relative;flex:none;width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--offwhite);border:1px solid var(--border)}
.gp-tile-ico .ico{width:24px;height:24px;color:var(--ink)}
.gp-tile-mark{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;color:#fff;border:2px solid var(--white)}
.gp-tiles-no .gp-tile-mark{background:var(--no)}
.gp-tiles-stop .gp-tile-mark{background:#B45309}
.gp-tiles-stop li{background:#FFFBEB;border-color:var(--amber-br)}
.gp-tiles-stop .gp-tile-ico{background:var(--white);border-color:var(--amber-br)}
.gp-tiles-stop .gp-tile-ico .ico{color:var(--amber-ink)}
.gp-tiles h3{font-size:16.5px;letter-spacing:-.01em;margin:3px 0 3px;color:var(--ink)}
.gp-tiles p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:none}
@media (max-width:900px){
  .gp-tiles{grid-template-columns:1fr;gap:10px}
  .gp-tiles li{padding:14px}
}

/* /how-we-price/ visuals, 2026-09-08 (operator: "do the same" as /what-we-dont-buy/) */
.gp-tiles-move li{background:var(--tint);border-color:#BFE7D6}
.gp-tiles-move .gp-tile-ico{background:var(--white);border-color:#BFE7D6}
.gp-tiles-move .gp-tile-ico .ico{color:var(--forest)}
.gp-tiles-move .gp-tile-mark{background:var(--forest)}
.gp-tiles-same .gp-tile-mark{background:var(--muted)}
.gp-tiles-same .gp-tile-ico .ico{color:var(--muted)}
.gp-tiles-move,.gp-tiles-same{grid-template-columns:repeat(3,1fr)}
.gp-tiles-move li,.gp-tiles-same li{flex-direction:column;gap:12px}
.gp-formula{display:flex;align-items:stretch;gap:10px;margin:8px 0 16px}
.gp-f-box{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 14px 16px;background:var(--offwhite);border:1px solid var(--border);border-radius:var(--r)}
.gp-f-box .ico{width:26px;height:26px;color:var(--forest);margin-bottom:2px}
.gp-f-box strong{font-size:16px;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.gp-f-box span{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.gp-f-box.is-out{background:var(--forest);border-color:var(--forest)}
.gp-f-box.is-out .ico{color:var(--cash)}
.gp-f-box.is-out strong{color:#fff}
.gp-f-box.is-out span{color:#BFE7D6}
.gp-f-op{flex:none;align-self:center;font-size:22px;font-weight:600;color:var(--muted)}
.gp-flow{list-style:none;counter-reset:flow;margin:8px 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gp-flow li{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 14px 14px}
.gp-flow li::before{counter-increment:flow;content:"0" counter(flow);position:absolute;right:12px;top:12px;font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--muted)}
.gp-flow li:nth-child(3){background:var(--tint);border-color:#BFE7D6}
.gp-flow li:nth-child(4){background:#FFFBEB;border-color:var(--amber-br)}
.gp-flow-ico{display:flex;width:38px;height:38px;border-radius:9px;align-items:center;justify-content:center;background:var(--offwhite);border:1px solid var(--border);margin-bottom:10px}
.gp-flow-ico .ico{width:20px;height:20px;color:var(--ink)}
.gp-flow li:nth-child(3) .gp-flow-ico{background:var(--white);border-color:#BFE7D6}.gp-flow li:nth-child(3) .ico{color:var(--forest)}
.gp-flow li:nth-child(4) .gp-flow-ico{background:var(--white);border-color:var(--amber-br)}.gp-flow li:nth-child(4) .ico{color:var(--amber-ink)}
.gp-flow h3{font-size:15.5px;margin:0 0 4px;color:var(--ink)}
.gp-flow p{margin:0;font-size:14px;line-height:1.45;color:var(--muted);max-width:none}
@media (max-width:1040px){
  .gp-tiles-move,.gp-tiles-same{grid-template-columns:1fr}
  .gp-tiles-move li,.gp-tiles-same li{flex-direction:row}
  .gp-flow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .gp-formula{flex-direction:column;gap:6px}
  .gp-f-op{align-self:center}
  .gp-flow{grid-template-columns:1fr}
}

/* Sitewide tiles pass, 2026-09-08 (operator: "the rest of the pages that are a huge wall of text") */
.gp-tiles-yes li{background:var(--tint);border-color:#BFE7D6}
.gp-tiles-yes .gp-tile-ico{background:var(--white);border-color:#BFE7D6}
.gp-tiles-yes .gp-tile-ico .ico{color:var(--forest)}
.gp-tiles-yes .gp-tile-mark{background:var(--cash-deep)}
.gp-tiles-info li{background:var(--white)}
.gp-tiles-info .gp-tile-ico .ico{color:var(--forest)}
.gp-tiles-c3{grid-template-columns:repeat(3,1fr)}
.gp-tiles-c3 li{flex-direction:column;gap:12px}
/* per-tile tone overrides */
.gp-tile-ico.is-yes{border-color:#BFE7D6}.gp-tile-ico.is-yes .ico{color:var(--forest)}.gp-tile-ico.is-yes .gp-tile-mark{background:var(--cash-deep)}
.gp-tile-ico.is-no .ico{color:var(--ink)}.gp-tile-ico.is-no .gp-tile-mark{background:var(--no)}
.gp-tile-ico.is-stop{border-color:var(--amber-br)}.gp-tile-ico.is-stop .ico{color:var(--amber-ink)}.gp-tile-ico.is-stop .gp-tile-mark{background:#B45309}
/* two panels */
.gp-vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 16px}
.gp-vs-p{border:1px solid var(--border);border-radius:var(--r);padding:20px 20px 18px;background:var(--offwhite)}
.gp-vs-b{background:var(--tint);border-color:#BFE7D6}
.gp-vs-ico{display:flex;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--border);margin-bottom:12px}
.gp-vs-b .gp-vs-ico{border-color:#BFE7D6}
.gp-vs-ico .ico{width:22px;height:22px;color:var(--ink)}
.gp-vs-b .gp-vs-ico .ico{color:var(--forest)}
.gp-vs h3{font-size:17px;margin:0 0 6px;color:var(--ink)}
.gp-vs p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:none}
/* value ladder */
.gp-rank{list-style:none;margin:8px 0 16px;padding:0;display:grid;gap:8px}
.gp-rank li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--white)}
.gp-rank-n{flex:none;font-size:12px;font-weight:600;color:var(--muted);margin-top:11px;width:20px}
.gp-rank-ico{flex:none;display:flex;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;background:var(--offwhite);border:1px solid var(--border)}
.gp-rank-ico .ico{width:22px;height:22px;color:var(--forest)}
.gp-rank li > div{flex:1 1 auto;min-width:0}
.gp-rank h3{font-size:16px;margin:2px 0 3px;color:var(--ink)}
.gp-rank p{margin:0 0 8px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:none}
.gp-rank-bar{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cash),var(--cash-deep));width:var(--w,100%)}
.gp-rank li:first-child{background:var(--tint);border-color:#BFE7D6}
.gp-rank li:first-child .gp-rank-ico{background:var(--white);border-color:#BFE7D6}
@media (max-width:1040px){
  .gp-tiles-c3{grid-template-columns:1fr}
  .gp-tiles-c3 li{flex-direction:row}
}
@media (max-width:900px){
  .gp-vs{grid-template-columns:1fr;gap:10px}
}

/* ==========================================================================
   Buyback Funnel skin (2026-09-14) — CSS against the plugin's stable bb-*
   classes and --bb-* variables only (plugin docs/STYLING.md). The bundle's
   own stylesheet is enqueued first and never edited. Guardrails (AGENTS.md):
   .bb-honeypot, #id-ack, data-testid, #flow-search / #lookup-email untouched.
   Colour rule as everywhere on the site: emerald is for CTAs only; prices,
   links and hover borders use forest.
   ========================================================================== */
.bb-funnel{
  --bb-color-primary:var(--forest);
  --bb-color-primary-dark:#04231A;
  --bb-color-primary-contrast:#fff;
  --bb-color-accent:var(--forest);
  --bb-color-text:var(--ink);
  --bb-color-muted:var(--muted);
  --bb-color-border:var(--border);
  --bb-color-border-strong:#C2CFC9;
  --bb-color-surface:var(--white);
  --bb-color-danger:var(--no);
  --bb-color-danger-bg:#FEF2F2;
  --bb-color-danger-border:#F5C2C0;
  --bb-color-danger-link:var(--no);
  --bb-color-warning:var(--amber-ink);
  --bb-color-overlay:rgba(8,17,28,.78);
  --bb-radius:var(--r);
  --bb-radius-sm:6px;
  --bb-space:1rem;
  --bb-font:var(--body);
  font-size:17px;line-height:1.5;
}

/* Headings — Manrope, tight, sized like the interior pages */
.bb-funnel .bb-heading,.bb-funnel .bb-stage__title,.bb-funnel .bb-page__title{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.bb-funnel .bb-heading,.bb-funnel .bb-stage__title{font-size:32px}
.bb-funnel .bb-page__title{font-size:38px;color:var(--forest)}
.bb-funnel .bb-stage__subtitle,.bb-funnel .bb-checkout__intro{font-size:17px;color:var(--muted);max-width:60ch}
.bb-funnel .bb-page__lead{font-size:18px}
.bb-funnel .bb-page__number{font-family:var(--mono);font-weight:600;color:var(--forest);letter-spacing:.02em;
  background:var(--tint);border:1px solid #BFE9D5;border-radius:4px;padding:2px 8px}

/* Buttons — the site's .btn recipe; primary = emerald with the dark-ink text */
.bb-funnel .bb-button{font-family:var(--body);font-weight:600;font-size:17px;border-radius:var(--r);
  padding:14px 24px;border:1.5px solid transparent;line-height:1.2;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}
.bb-funnel .bb-button--primary{background:var(--cash);color:#04231A}
.bb-funnel .bb-button--primary:hover:not(:disabled){background:var(--cash-deep);color:#fff;transform:translateY(-2px)}
.bb-funnel .bb-button--compact{padding:11px 18px;font-size:15px}
.bb-funnel .bb-button--block{margin-top:6px}
.bb-funnel .bb-link{color:var(--forest);font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}
.bb-funnel .bb-link:hover{color:var(--cash-deep)}
.bb-funnel .bb-stage__restart{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;flex:none;margin-left:12px}
.bb-funnel .bb-stage__restart:hover{text-decoration:underline}

/* Choices — the tile recipe: white card, hairline, forest border + lift on hover */
.bb-funnel .bb-choice{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);
  padding:16px 18px;box-shadow:0 1px 2px rgba(11,59,46,.04);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.bb-funnel .bb-choice:hover:not(:disabled),.bb-funnel .bb-choice:focus-visible{
  border-color:var(--forest);transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,59,46,.12)}
.bb-funnel .bb-choice__label{font-weight:600;letter-spacing:-.01em}
.bb-funnel .bb-choice__detail{font-size:14.5px;color:var(--muted);line-height:1.45}
.bb-funnel .bb-choice__price{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--forest)}
.bb-funnel .bb-choice__hint{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--forest);white-space:nowrap}
.bb-funnel .bb-choice--option{font-size:17px}
/* Options with staff-uploaded images (manufacturer logos): the picker-tile look */
.bb-funnel .bb-options--illustrated{gap:14px}
.bb-funnel .bb-choice--illustrated{padding:10px 14px;gap:2px}   /* 2026-09-15: image 64→88px, padding+gap shrunk to match, so the card stays 131px tall */
.bb-funnel .bb-choice__image{height:88px;max-width:min(200px,100%);object-fit:contain;mix-blend-mode:multiply}   /* 100%: wide logos must not spill past the card's padding on phones */
.bb-funnel .bb-choice--illustrated .bb-choice__label{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* Panels and cards */
.bb-funnel .bb-card,.bb-funnel .bb-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r)}
.bb-funnel.bb-cart-reminder{border-left:3px solid var(--forest)}   /* 2026-09-30, plugin 0.4.2: "your cart still has items" on the custom-quote form + confirmation; the site's note accent (.gp-note, .q) so it doesn't read as another form card */
/* 2026-10-01: the grey panel still blended into the form (operator). Green callout (the .bb-total money tint) + cart icon; an amber version was tried first */
.bb-funnel.bb-cart-reminder.bb-panel{background:var(--tint);border:1px solid #BFE9D5;border-left:5px solid var(--cash-deep);box-shadow:0 2px 10px rgba(11,59,46,.10);padding:16px 18px}
.bb-funnel.bb-cart-reminder--request{margin-bottom:28px}
.bb-funnel .bb-cart-reminder__text{font-weight:600;color:var(--ink);padding-left:34px;min-height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.5'/%3E%3Ccircle cx='19' cy='21' r='1.5'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") left 1px/22px 22px no-repeat}
.bb-funnel .bb-cart-reminder__text + p{padding-left:34px}
.bb-funnel.bb-cart-reminder--request .bb-link{font-weight:700;color:var(--forest)}
.bb-funnel .bb-search{background:var(--offwhite);border-color:var(--border)}
.bb-funnel .bb-search__label,.bb-funnel .bb-lookup__label{font-weight:600;font-size:15px}
.bb-funnel .bb-total{background:var(--tint);border:1px solid #BFE9D5;border-radius:var(--r);padding:16px 18px}
.bb-funnel .bb-total__label{font-weight:600}
.bb-funnel .bb-total__amount,.bb-funnel .bb-summary__total{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--forest)}
.bb-funnel .bb-cart-line{background:var(--white)}
.bb-funnel .bb-cart-line__name{font-weight:600}
.bb-funnel .bb-cart-line__detail,.bb-funnel .bb-summary-line__detail{color:var(--muted);font-size:14.5px}
.bb-funnel .bb-cart-line__total,.bb-funnel .bb-summary-line__total{font-family:var(--mono);font-weight:600}
.bb-funnel .bb-cart-line__remove{font-size:14px}
.bb-funnel .bb-qty__button{background:var(--white);border:1.5px solid var(--border);border-radius:6px;color:var(--ink);font-weight:600;
  transition:border-color .16s ease,color .16s ease}
.bb-funnel .bb-qty__button:hover:not(:disabled){border-color:var(--forest);color:var(--forest)}
.bb-funnel .bb-qty__value{font-family:var(--mono);font-weight:600;min-width:2ch;text-align:center}
.bb-funnel .bb-summary__status{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bb-funnel .bb-summary__expired{font-weight:600}
.bb-funnel .bb-next{background:var(--white)}
.bb-funnel .bb-next__title{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.bb-funnel .bb-next__list{padding-left:1.2em;color:var(--ink)}
.bb-funnel .bb-panel__title{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--forest)}
.bb-funnel .bb-details__term{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bb-funnel .bb-details__value--strong{font-weight:700;color:var(--forest)}

/* Forms — the same recipe as the contact form (.gp-form) */
.bb-funnel .bb-field__label,.bb-funnel .bb-fieldset__legend,.bb-funnel .bb-quantity{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.bb-funnel .bb-fieldset__legend .bb-muted{text-transform:none;letter-spacing:0}
.bb-funnel .bb-input,.bb-funnel .bb-quantity__input{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;line-height:1.35;box-shadow:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.bb-funnel .bb-input:hover,.bb-funnel .bb-quantity__input:hover{border-color:#C2CFC9}
.bb-funnel .bb-input:focus,.bb-funnel .bb-quantity__input:focus{border-color:var(--forest);background:var(--offwhite);
  box-shadow:0 0 0 3px rgba(11,59,46,.14);outline:none}
.bb-funnel .bb-input::placeholder{color:#8A979D}
.bb-funnel textarea.bb-input{min-height:140px;resize:vertical}
.bb-funnel .bb-quantity__input{padding:8px 10px;font-family:var(--mono);font-weight:600;width:5ch;text-align:center}
/* Search-as-you-type (plugin 0.3.0). The .bb-input padding above outranks the bundle's, so the room for the
   magnifier (left) and the clear button (right) has to be restated here, or the icon sits on the text. */
.bb-funnel .bb-typeahead__input{padding-left:44px;padding-right:48px}
.bb-funnel .bb-typeahead__field::before{left:16px;width:18px;height:18px;color:var(--muted)}
.bb-funnel .bb-typeahead__clear{right:8px;width:36px;height:36px;color:var(--muted)}
.bb-funnel .bb-typeahead__clear::before{line-height:36px}
.bb-funnel .bb-typeahead__clear:hover{color:var(--ink)}
.bb-funnel .bb-typeahead__status{font-size:14px}
/* The results scroll past 250px; the tile lift would be clipped by that box, so rows stay flat */
.bb-funnel .bb-typeahead__results{padding:2px;gap:8px}
.bb-funnel .bb-typeahead__result{padding:13px 16px}
.bb-funnel .bb-typeahead__result:hover:not(:disabled),.bb-funnel .bb-typeahead__result:focus-visible{transform:none;box-shadow:none}
.bb-funnel .bb-typeahead__result--active{border-color:var(--forest);background:var(--offwhite)}
.bb-funnel .bb-typeahead__custom{font-weight:600}
.bb-funnel .bb-divider__label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;font-weight:500;color:var(--muted)}
.bb-funnel .bb-radio,.bb-funnel .bb-check{font-size:16px;color:var(--ink);align-items:flex-start;gap:10px}
.bb-funnel .bb-radio__detail{color:var(--muted);font-size:14px}
.bb-funnel input[type=radio],.bb-funnel input[type=checkbox]{accent-color:var(--forest);width:18px;height:18px;margin-top:2px;flex:none}
.bb-funnel .bb-file{font-size:14.5px;color:var(--muted)}
.bb-funnel .bb-file::file-selector-button{font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--border);border-radius:6px;padding:9px 14px;margin-right:12px;cursor:pointer;transition:border-color .16s ease,color .16s ease}
.bb-funnel .bb-file::file-selector-button:hover{border-color:var(--forest);color:var(--forest)}
.bb-funnel .bb-photos__hint{font-size:14px;color:var(--muted)}
.bb-funnel .bb-preview{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--offwhite)}
.bb-funnel .bb-preview__remove{background:var(--counter)}

/* Notices */
.bb-funnel .bb-error{border-radius:var(--r);font-weight:500;padding:14px 16px}
.bb-funnel .bb-notices{font-size:14px}
.bb-funnel .bb-loading{color:var(--muted);font-style:italic}
.bb-funnel.bb-sent{background:var(--tint);border-color:#BFE9D5}
.bb-funnel .bb-sent__text{color:var(--ink)}

/* The confirmation page sits on its own; give it a little more air */
.bb-funnel.bb-page{padding-top:1rem;padding-bottom:1rem}

@media (max-width:600px){
  .bb-funnel{font-size:16px}
  .bb-funnel .bb-heading,.bb-funnel .bb-stage__title{font-size:26px}
  .bb-funnel .bb-page__title{font-size:30px}
  .bb-funnel .bb-choice{padding:14px 15px}
  .bb-funnel .bb-choice--illustrated{padding:9px 12px}   /* keeps the 125px card of before with the bigger image */
  .bb-funnel .bb-choice__image{height:84px}
  .bb-funnel .bb-choice__price{font-size:18px}
  .bb-funnel .bb-total__amount,.bb-funnel .bb-summary__total{font-size:24px}
  .bb-funnel .bb-cart-line__controls{width:100%;justify-content:space-between}
  .bb-funnel .bb-actions{flex-direction:column-reverse;align-items:stretch}
  .bb-funnel .bb-actions .bb-button{width:100%}
  .bb-funnel .bb-actions .bb-link--padded{text-align:center}
}

/* ── "Sell your {category}" card (2026-09-26) ─────────────────────────────────
   page.php frames the funnel on /get-a-quote/?category=<slug> for real-time
   categories only; the name comes from the platform catalog, never from here.
   Modelled on the production quote card: white card on a mint wash, logo tiles
   on a pale plate, a foot with a way back and a way out to a custom quote. */
.page-funnel.has-sell-card{max-width:none;padding-top:48px;padding-bottom:72px;
  background:radial-gradient(1200px 520px at 50% 0,var(--tint),transparent 70%)}
.sell-card{max-width:760px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;
  padding:40px 44px 28px;box-shadow:0 1px 2px rgba(11,59,46,.04),0 24px 60px -24px rgba(11,59,46,.22)}
.sell-card__head{margin-bottom:26px}
.sell-card__title{margin:0;font-family:var(--display);font-weight:800;font-size:38px;line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.sell-card__lede{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:var(--muted);max-width:52ch}

/* The bundle's stage title becomes the step label under the card title */
.sell-card .bb-stage__title{font-size:22px;letter-spacing:-.015em}
.sell-card .bb-stage__subtitle{font-size:15.5px}
.sell-card .bb-divider__label{color:var(--ink);font-weight:600}

/* Picture tiles on a pale plate, no hairline — the tile look from production. Only the tiles: item and
   condition rows keep the white-card-with-hairline recipe above, or on the white card they read as a
   faint grey strip and nobody sees there is something to tap (operator's phone review, 2026-09-28). */
.sell-card .bb-choice--illustrated{background:var(--offwhite);border-color:transparent;box-shadow:none}
.sell-card .bb-choice--illustrated:hover:not(:disabled),.sell-card .bb-choice--illustrated:focus-visible{background:var(--white);border-color:var(--forest);box-shadow:0 8px 22px rgba(11,59,46,.12)}
/* Text choices (type, item, condition): a tinted plate with a firm forest-tint edge, so they read as buttons
   and not as another white field like the search box above them (operator's desktop review, 2026-09-28). */
.sell-card .bb-choice:not(.bb-choice--illustrated){background:var(--offwhite);border-color:rgba(11,59,46,.24)}
.sell-card .bb-choice:not(.bb-choice--illustrated):hover:not(:disabled),.sell-card .bb-choice:not(.bb-choice--illustrated):focus-visible{background:var(--white);border-color:var(--forest)}
.sell-card .bb-choice--option:not(.bb-choice--illustrated){display:flex;align-items:center;justify-content:space-between;gap:12px}
.sell-card .bb-choice--option:not(.bb-choice--illustrated)::after{content:"›";font-size:24px;line-height:1;margin-top:-3px;color:var(--forest)}
/* The item row is the step that matters: a mint card with a solid forest edge, bold label and a chevron —
   the grey plate was still lost on a phone in daylight (operator's phone review #2, 2026-09-28). */
.sell-card .bb-choice--item:not(.bb-typeahead__result){display:flex;align-items:center;gap:12px;background:var(--tint);border:2px solid var(--forest)}
.sell-card .bb-choice--item:not(.bb-typeahead__result) .bb-choice__label{flex:1;font-weight:700;color:var(--ink)}
.sell-card .bb-choice--item:not(.bb-typeahead__result) .bb-choice__hint{font-weight:600}
.sell-card .bb-choice--item:not(.bb-typeahead__result)::after{content:"›";font-size:26px;line-height:1;margin-top:-3px;color:var(--forest)}
.sell-card .bb-choice--item:not(.bb-typeahead__result):hover:not(:disabled),.sell-card .bb-choice--item:not(.bb-typeahead__result):focus-visible{background:var(--white)}
/* Text choices centred (operator, 2026-09-28): label (and price/detail under it) in the middle, the chevron
   pinned to the right edge so it does not pull the text off-centre. Padding is symmetric so centre is centre. */
.sell-card .bb-choice:not(.bb-choice--illustrated):not(.bb-typeahead__result){position:relative;flex-direction:column;justify-content:center;
  gap:2px;text-align:center;padding-left:44px;padding-right:44px}
.sell-card .bb-choice--item:not(.bb-typeahead__result) .bb-choice__label{flex:none}
.sell-card .bb-choice--option:not(.bb-choice--illustrated)::after,
.sell-card .bb-choice--item:not(.bb-typeahead__result)::after{position:absolute;right:18px;top:50%;margin-top:0;transform:translateY(-50%)}
.sell-card .bb-typeahead__result:hover:not(:disabled),.sell-card .bb-typeahead__result:focus-visible{box-shadow:none}
.sell-card .bb-typeahead__result--active{background:var(--white);border-color:var(--forest)}
.sell-card .bb-choice--illustrated{padding:14px 14px 16px;gap:12px}
.sell-card .bb-choice__image{width:100%;max-width:none;height:120px;padding:16px;background:var(--white);border-radius:12px;mix-blend-mode:normal}
.sell-card .bb-choice--illustrated .bb-choice__label{font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:.06em}

.sell-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.sell-card__back{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.sell-card__back::before{content:"‹";font-size:22px;line-height:1;margin-top:-3px}
.sell-card__back:hover{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.sell-card__custom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;font-size:15px;color:var(--muted)}
.sell-card__custom-btn{display:inline-block;font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--r);padding:9px 16px;transition:border-color .16s ease,color .16s ease}
.sell-card__custom-btn:hover{border-color:var(--forest);color:var(--forest)}

@media (max-width:600px){
  .page-funnel.has-sell-card{padding-top:20px;padding-bottom:40px}
  .sell-card{border-radius:20px;padding:24px 18px 20px}
  .sell-card__title{font-size:30px}
  .sell-card__lede{font-size:15.5px}
  .sell-card .bb-stage__title{font-size:20px}
  .sell-card .bb-choice__image{height:92px;padding:12px}
  .sell-card__foot{flex-direction:column-reverse;align-items:stretch;text-align:center}
  .sell-card__custom{justify-content:center}
  .sell-card__back{justify-content:center}
}

/* ---------------------------------------------------------------------------
   Build calculator (plugin 0.5.0, 2026-10-16, operator: "the first page is confusing").
   One heading per screen: the part, asked as a question (Word calculatorPartTitle).
   The bundle's sheet prints after this one, so every rule carries .bb-funnel .bb-calculator
   to outrank its same-weight rules. Classes only (docs/STYLING.md "The calculator").
   --------------------------------------------------------------------------- */
/* Header: the progress becomes a small kicker over the bar. (0.6.0 no longer renders the
   panel's name, and shows the description only when it adds something.) */
.bb-funnel .bb-calculator .bb-calculator__header{justify-content:flex-start}
.bb-funnel .bb-calculator .bb-calculator__progress{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.bb-funnel .bb-calculator .bb-calculator__bar{height:6px}
/* The screen's one heading. */
.bb-funnel .bb-calculator .bb-calculator__part-title{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.15;
  letter-spacing:-.02em;color:var(--ink)}
/* The question screen's own title + "Pick the option…" sit under it; the divider already names
   the question ("Or select Manufacturer"), so they go. */
.bb-funnel .bb-calculator .bb-stage__header{display:none}
.bb-funnel .bb-calculator .bb-divider__label{font-family:var(--mono);font-weight:500;letter-spacing:.14em}
/* Item matches and picks: the item name is the thing being chosen, at body size. */
.bb-funnel .bb-calculator .bb-choice--item{font-size:17px}
/* Every choice in the calculator centred — questions, item matches, condition grades (operator, 10-20).
   align-items covers the grades, which the bundle lays out as a column from the left. */
.bb-funnel .bb-calculator .bb-choice{justify-content:center;align-items:center;text-align:center}
.bb-funnel .bb-calculator .bb-calculator__picks{background:var(--offwhite)}
.bb-funnel .bb-calculator .bb-calculator__pick-name{font-weight:600}
.bb-funnel .bb-calculator .bb-calculator__count{font-family:var(--mono);font-weight:600}
.bb-funnel .bb-calculator .bb-calculator__step,.bb-funnel .bb-calculator .bb-calculator__remove{width:2.5rem;height:2.5rem;color:var(--ink)}
.bb-funnel .bb-calculator .bb-calculator__actions .bb-button{padding:13px 22px}
/* Review: labels in the site's small caps, the total in the money style. */
.bb-funnel .bb-calculator .bb-calculator__summary-row dt{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.bb-funnel .bb-calculator .bb-calculator__summary-row dd{font-weight:600}
.bb-funnel .bb-calculator .bb-calculator__estimate{background:var(--tint);border:1px solid #BFE9D5;border-radius:var(--r);padding:16px 18px}
/* Estimate only (operator, 10-16) is the platform's job since 0.6.0: the API sends no part price
   unless staff turn on "Show customers the breakdown", so nothing is hidden here. Alone, the
   total needs no rule above it. */
.bb-funnel .bb-calculator .bb-calculator__line--total{color:var(--ink);align-items:baseline;font-size:17px;font-weight:700}
.bb-funnel .bb-calculator .bb-calculator__line--total:first-child{border-top:0;padding-top:0}
.bb-funnel .bb-calculator .bb-calculator__line--total dd{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--forest)}
.bb-funnel .bb-calculator .bb-calculator__note{font-size:13.5px}
.bb-funnel .bb-calculator .bb-calculator__send{font-weight:600;color:var(--forest)}
.bb-funnel .bb-calculator .bb-calculator__nav{align-items:center}

@media (max-width:600px){
  .bb-funnel .bb-calculator .bb-calculator__part-title{font-size:22px}
  /* Build rows (0.6.0): part label on its own line, the name and its controls under it; in one
     row the name broke mid-word ("DDR / 4 / Desk / top") at 390px. */
  .bb-funnel .bb-calculator .bb-calculator__pick{flex-wrap:wrap;row-gap:0}
  .bb-funnel .bb-calculator .bb-calculator__pick-part{flex-basis:100%}
  .bb-funnel .bb-calculator .bb-calculator__pick-name{overflow-wrap:normal}
  /* Review rows: label on its own line, value + Change under it — three columns broke
     words mid-way ("Deskto / p RAM") at 390px. */
  .bb-funnel .bb-calculator .bb-calculator__summary-row{grid-template-columns:1fr auto;row-gap:2px}
  .bb-funnel .bb-calculator .bb-calculator__summary-row dt{grid-column:1 / -1}
  .bb-funnel .bb-calculator .bb-calculator__summary-row dd{overflow-wrap:normal}
  .bb-funnel .bb-calculator .bb-calculator__nav{flex-direction:column-reverse;align-items:flex-start}
}

/* Plugin 0.6.2 (2026-10-19): the funnel scrolls a new step's heading into view when it is hidden, and reads
   scroll-margin-top as the sticky header's allowance (plugin docs/STYLING.md). 90px header + 12px gap.
   Replaces the theme's bbg-funnel-scroll.js stopgap. */
.bb-funnel .bb-stage__header,
.bb-funnel .bb-calculator__part-title,
.bb-funnel .bb-calculator__review{scroll-margin-top:102px}