/* ============================================================
   Evergreen Strip Exchange
   Same system as the Vancouver Buyback site, with the brand's own
   colours: forest green and steel blue taken from the logo.
   ============================================================ */
:root{
  --ground:#EEF0ED;
  --surface:#FAFBF9;
  --surface-2:#F5F7F4;
  --ink:#131A14;
  --ink-2:#555D55;
  --deep:#14301F;
  --deep-hover:#0E2216;
  --accent:#1F6A45;
  --accent-hover:#175236;
  --tint:#E4EFE7;
  --tint-line:#C4D9CA;
  --line:#D6DAD5;
  --line-soft:#E3E7E1;
  --btn-line:#C4CAC3;
  --star:#8A6A00;
  --on-dark:#F0F0F2;
  --on-dark-mute:#949B94;
  --on-dark-soft:#C9CFC8;
  --dark-line:#2A322B;

  --wrap:1280px;
  --pad:clamp(1rem,4vw,3.5rem);
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  background:var(--ground);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:'Bricolage Grotesque','Public Sans',sans-serif;margin:0;letter-spacing:-.03em;line-height:1.02;font-weight:800}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.65rem 1.25rem;border-radius:var(--r-sm);
  font-weight:700;font-size:.95rem;text-decoration:none;border:0;
}
.btn:hover{text-decoration:none}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover);color:#fff}
.btn-deep{background:var(--deep);color:#fff}
.btn-deep:hover{background:var(--deep-hover);color:#fff}
.btn-ghost{border:1.5px solid var(--btn-line);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-stack{flex-direction:column;gap:.15rem;min-height:76px;padding:.75rem 1rem;text-align:center}
.btn-stack b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:-.015em;line-height:1}
.btn-stack span{font-size:.8rem;font-weight:600;opacity:.92}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.brand:hover{color:var(--ink);text-decoration:none}
.brand img{width:38px;height:38px;object-fit:contain}
.nav{display:flex;gap:1.5rem;flex:1}
.nav a{font-size:.92rem;font-weight:500;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.header-cta{display:flex;gap:.6rem;flex-shrink:0}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.25rem,5vw,3.9rem)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,4rem);align-items:start}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.25rem)}
.hero-lede{font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--ink-2);margin-top:1.4rem;max-width:34em}
.pill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .85rem;border-radius:999px;background:var(--tint);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#14432A;
  margin-bottom:1.4rem;
}
.pill i{width:7px;height:7px;border-radius:999px;background:var(--accent);flex-shrink:0}
.pill{max-width:100%}
.pill>span{min-width:0}                  /* lets the label wrap instead of pushing the page wide */
.rating{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.95rem}
.stars{color:var(--star);letter-spacing:1px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.85rem;font-weight:600}
.chip svg{flex-shrink:0}
.hero-quote{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;padding:1rem 1.15rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.hero-quote img{height:30px;width:auto;flex-shrink:0}
.hero-quote p{font-size:.9rem;color:var(--ink-2);line-height:1.45}
.hero-quote b{color:var(--ink);font-weight:600}

/* ---------- quote card ---------- */
.quote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 18px 44px rgba(19,26,20,.09)}
.quote-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:1.25rem 1.4rem;border-bottom:1px solid var(--line-soft)}
.quote-head h2{font-size:1.3rem;font-weight:700}
.quote-head span{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.quote-body{padding:1.3rem 1.4rem 1.5rem;display:grid;gap:1.15rem}
.step-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.65rem}
.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.cond-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  min-height:88px;padding:.6rem .4rem;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  text-align:center;line-height:1.2;
}
.opt img,.opt svg{width:32px;height:32px;object-fit:contain}
.opt b{font-size:.82rem;font-weight:600}
.opt:hover{border-color:var(--btn-line)}
.opt[aria-pressed="true"]{background:var(--tint);border:2px solid var(--accent);padding:calc(.6rem - 1px) calc(.4rem - 1px)}
.opt-cond{align-items:flex-start;text-align:left;min-height:74px;padding:.8rem .9rem}
.opt-cond b{font-size:.92rem;font-weight:700}
.opt-cond small{font-size:.78rem;color:var(--ink-2);line-height:1.3}
.opt-cond[aria-pressed="true"]{padding:calc(.8rem - 1px) calc(.9rem - 1px)}
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.note{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;background:var(--tint);border:1px solid var(--tint-line);border-radius:12px;font-size:.88rem;line-height:1.45}
.note svg{flex-shrink:0}
.paid{font-size:.8rem;color:var(--ink-2);line-height:1.5}
.paid b{color:var(--ink)}

/* ---------- proof bar ---------- */
.proof{background:var(--ink);color:var(--on-dark)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.4rem;text-align:center}
.proof b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.proof span{font-size:.85rem;color:var(--on-dark-mute)}

/* ---------- generic section ---------- */
section{padding-block:clamp(2.75rem,6vw,4.75rem)}
.sec-head{display:flex;align-items:flex-end;gap:2.5rem;flex-wrap:wrap;margin-bottom:2rem}
.sec-head>div{flex:1 1 20rem}
.sec-head h2{font-size:clamp(1.85rem,3.6vw,2.9rem);margin-top:.6rem}
.sec-head p{flex:0 1 25rem;color:var(--ink-2);font-size:.98rem}
.sec-head-aside{display:flex;align-items:center;gap:1rem;flex:0 1 auto;flex-wrap:wrap}
.band-light{background:var(--surface);border-block:1px solid var(--line)}

/* ---------- comparison ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table.compare{border-collapse:collapse;width:100%;min-width:52rem;font-size:.92rem}
table.compare th,table.compare td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-top:1px solid var(--line-soft)}
table.compare thead th{border-top:0;font-family:'Bricolage Grotesque',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.015em}
table.compare thead th small{display:block;font-family:'Public Sans',sans-serif;font-size:.78rem;font-weight:500;letter-spacing:0;margin-top:.15rem}
table.compare th[scope="row"]{
  position:sticky;left:0;z-index:2;
  background:var(--surface-2);font-size:.86rem;font-weight:700;width:13rem;min-width:11rem;
  border-right:1px solid var(--line-soft);
}
thead th[scope="col"]:first-child{position:sticky;left:0;z-index:3;background:var(--surface-2);border-right:1px solid var(--line-soft)}
.col-us{background:var(--deep);color:#fff}
.col-us small{color:var(--on-dark-soft)}
td.us{background:var(--tint);font-weight:600}
td.them{color:var(--ink-2)}
.mark{font-style:normal;margin-right:.3rem}

/* ---------- what we buy ---------- */
.buy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.buy-card{display:block;padding:1.15rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink)}
.buy-card:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.buy-card img{height:104px;width:100%;object-fit:contain;margin-bottom:.9rem}
.buy-card b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.buy-card span{font-size:.85rem;color:var(--ink-2)}
.also{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.1rem;padding:1.05rem 1.2rem;background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-md);font-size:.92rem;line-height:1.5}
.also p{flex:1 1 22rem}
.also a{display:inline-flex;align-items:center;min-height:44px}   /* tap target */

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.step{padding:1.5rem 1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.step-n{font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.step h3{font-size:1.25rem;font-weight:700;margin:.6rem 0 .55rem}
.step p{font-size:.9rem;color:var(--ink-2)}
.step-last{background:var(--deep);border-color:var(--deep)}
.step-last .step-n{color:#9FC4A8}
.step-last h3{color:#fff}
.step-last p{color:var(--on-dark-soft)}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
figure.review{margin:0;padding:1.6rem 1.5rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;gap:.9rem}
figure.review blockquote{margin:0;flex:1;font-family:'Bricolage Grotesque',sans-serif;font-size:1.18rem;line-height:1.35;font-weight:600;letter-spacing:-.015em}
figure.review figcaption{font-size:.85rem;font-weight:600;color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.4rem;align-content:start}
details.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.25rem;height:fit-content}
details.q summary{
  font-family:'Bricolage Grotesque',sans-serif;font-size:1.08rem;font-weight:700;letter-spacing:-.02em;
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;                       /* tap target */
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";font-size:1.35rem;font-weight:600;color:var(--accent);line-height:1}
details.q[open] summary::after{content:"\2212"}
details.q p{margin-top:.7rem;font-size:.92rem;color:var(--ink-2)}

/* ---------- closing cta ---------- */
.closer{background:var(--deep);color:#fff}
.closer .wrap{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;padding-block:clamp(2.25rem,5vw,3.75rem)}
.closer h2{font-size:clamp(1.9rem,4vw,3.1rem);color:#fff}
.closer p{color:var(--on-dark-soft);margin-top:.8rem;max-width:32em}
.closer .cta-pair{grid-template-columns:auto auto}
.closer .btn-ghost{border-color:#6E7F70;color:#fff}
.closer .btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark-soft);padding-block:3rem 1.5rem;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:17rem repeat(3, minmax(0,1fr)) auto;gap:2rem 2.5rem}
.foot-social{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.foot-social a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.foot-areas li{padding:.62rem 0;color:var(--on-dark-soft)}   /* service areas, not links */
.foot-brand .brand{color:#fff}
.foot-brand p{color:var(--on-dark-mute);margin:1rem 0}
.foot-phone{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.foot-phone:hover{color:#fff}
.site-footer h3{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute);font-family:'Public Sans',sans-serif;margin-bottom:.9rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.site-footer li a{display:block;padding:.62rem 0}   /* 44px tap target */
.site-footer a{color:var(--on-dark-soft)}
.site-footer a:hover{color:#fff}
.foot-bottom{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--dark-line);font-size:.8rem;color:var(--on-dark-mute)}
.foot-bottom a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom p{flex:1 1 18rem}

/* ---------- sticky mobile bar ---------- */
.sticky-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  gap:.6rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(250,250,251,.97);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(19,26,20,.1);
  backdrop-filter:saturate(180%) blur(8px);
}
.sticky-bar .btn{flex:1;min-height:52px}
.sticky-bar .btn-icon{flex:0 0 52px;padding:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .buy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.5rem 2rem}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav.open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:.5rem var(--pad) 1rem;
  }
  .nav.open a{padding:.85rem 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
  .site-header .wrap{position:relative}
  .reviews{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .proof .wrap{grid-template-columns:repeat(2,1fr);gap:1.4rem}
}
@media (max-width:768px){
  body{padding-bottom:86px}
  .sticky-bar{display:flex}
  .buy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote-head{padding:1rem 1.1rem}
  .quote-body{padding:1.05rem 1.1rem 1.2rem}
  .closer .wrap{flex-direction:column;align-items:flex-start}
  .closer .cta-pair{grid-template-columns:1fr;width:100%}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .cta-pair{grid-template-columns:1fr}
  .opt{min-height:78px}
  .opt img,.opt svg{width:28px;height:28px}
  .hero-quote{flex-direction:column;align-items:flex-start}
  .btn-stack b{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   SUB-PAGE PIECES  (landing pages: iPhone, iPad, MacBook, …)
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs{padding-block:1rem 0;font-size:.84rem;color:var(--ink-2)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;padding:0}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}   /* tap target */
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- sub-page hero (tighter than the home hero) ---------- */
.hero-sub h1{font-size:clamp(2.1rem,5vw,3.5rem)}
.hero-sub .hero-lede{max-width:32em}

/* ---------- prose ---------- */
.prose{max-width:38em}
.prose p+p{margin-top:1rem}
.prose p{color:var(--ink-2);font-size:1.02rem}
.prose strong{color:var(--ink)}

/* ---------- value tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.tier{padding:1.5rem 1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;gap:.7rem}
.tier-top{border:2px solid var(--accent);background:var(--tint)}
.tier-badge{align-self:flex-start;padding:.25rem .7rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.tier-badge-quiet{background:var(--deep)}
.tier h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.tier p{font-size:.92rem;color:var(--ink-2)}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tier li{padding:.3rem .6rem;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;font-size:.8rem;font-weight:600}
.tier-top li{background:var(--surface);border-color:var(--tint-line)}

/* ---------- reason / factor cards ---------- */
.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.reason{padding:1.4rem 1.3rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.reason b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.08rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.45rem}
.reason span{font-size:.9rem;color:var(--ink-2)}
.reason svg{margin-bottom:.8rem}

/* ---------- checklist ---------- */
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.4rem;margin:0;padding:0;list-style:none}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:.94rem}
.checklist svg{flex-shrink:0;margin-top:.2rem}
.checklist b{display:block}
.checklist span{color:var(--ink-2);font-size:.88rem}

/* ---------- related pages ---------- */
.related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.related a{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:52px;
  padding:.7rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.92rem;font-weight:600;color:var(--ink);
}
.related a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.related a::after{content:"\2192";color:var(--accent);font-weight:400}

@media (max-width:1080px){
  .tiers{grid-template-columns:1fr}
  .reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .related{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checklist{grid-template-columns:1fr}
}
@media (max-width:560px){
  .reasons{grid-template-columns:1fr}
  .related{grid-template-columns:1fr}
}

/* ---------- supply picker ----------
   Each brand is its own labelled block, so there is never a question
   about which options belong to which brand - the bare "3 Plus" or "5"
   only makes sense under its own heading. */
.model-picker{display:flex;flex-direction:column;gap:.7rem}

.gen{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.gen-name{
  display:block;
  padding:.5rem .85rem;
  background:var(--tint);
  border-bottom:1px solid var(--tint-line);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#14432A;
}
.gen-opts{display:flex;flex-wrap:wrap;gap:.4rem;padding:.7rem .85rem .75rem}

.pill-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.45rem .9rem;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  font-size:.86rem;font-weight:600;line-height:1;white-space:nowrap;
}
.pill-opt:hover{border-color:var(--btn-line);background:var(--surface)}
.pill-opt[aria-pressed="true"]{
  background:var(--tint);border:2px solid var(--accent);color:#14432A;font-weight:700;
  padding:calc(.45rem - 1px) calc(.9rem - 1px);
}
@media (max-width:560px){
  .gen-opts{gap:.35rem;padding:.6rem .7rem .65rem}
  .pill-opt{font-size:.82rem;padding:.45rem .75rem}
  .pill-opt[aria-pressed="true"]{padding:calc(.45rem - 1px) calc(.75rem - 1px)}
}

/* ---------- very narrow phones ---------- */
@media (max-width:560px){
  .pill{border-radius:var(--r-sm);line-height:1.4;align-items:flex-start}
  .pill i{margin-top:.42rem}
}

/* ============================================================
   LEGAL PAGES  (privacy policy, terms of service)
   ============================================================ */
.legal{padding-block:clamp(1.5rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem)}
.legal-head{padding-bottom:1.6rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(2rem,4.5vw,3.1rem)}
.legal-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.1rem;font-size:.92rem;color:var(--ink-2)}
.legal-meta b{color:var(--ink);font-weight:600}
.legal-body{max-width:44rem}
.legal-body>p{color:var(--ink-2);line-height:1.75;margin-bottom:1rem}
.legal-body>p.lead{font-size:1.08rem;color:var(--ink);padding:1.1rem 1.25rem;background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-md);margin-bottom:2rem}
.legal-body h2{font-size:1.35rem;font-weight:700;margin:2.2rem 0 .8rem}
.legal-body h2:first-of-type{margin-top:0}
.legal-body ul{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.45rem}
.legal-body ul li{position:relative;padding-left:1.4rem;color:var(--ink-2);line-height:1.6}
.legal-body ul li::before{content:"";position:absolute;left:.3rem;top:.65em;width:5px;height:5px;border-radius:999px;background:var(--accent)}
.legal-body strong{color:var(--ink);font-weight:700}

/* the catch-all sits on its own full-width row under the device tiles */
.opt-wide{grid-column:1 / -1;flex-direction:row;gap:.6rem;min-height:56px}
.opt-wide[aria-pressed="true"]{padding:calc(.6rem - 1px) calc(.4rem - 1px)}

/* ============================================================
   COMPARISON TABLE ON PHONES AND SMALL TABLETS
   Stays a real side-by-side table all the way down - stacking it
   would destroy the point of the section. Below 920px it goes
   compact instead: fixed layout so the four options share the
   width evenly, short column names, shorter wording per cell
   (.t-short), and the tick/cross above the answer. No hyphens -
   they turn a narrow column into "auto-mated" and "algo-rithm".
   ============================================================ */
.col-abbr,
.t-short{display:none}
.q-row{display:none}            /* desktop keeps the label column instead */

@media (max-width:920px){
  .table-scroll{overflow:visible}
  table.compare{min-width:0;width:100%;table-layout:fixed;font-size:.84rem}

  .col-full,
  .t-long{display:none}
  .col-abbr{display:inline}
  .t-short{display:inline}

  table.compare th,
  table.compare td{
    padding:.55rem .35rem;
    line-height:1.32;
    /* no hyphens - they produce "auto-mated" style breaks. The short
       wording is chosen to fit instead. */
    hyphens:none;overflow-wrap:break-word;
  }

  /* the label column goes; its question becomes a band above the row */
  table.compare tbody th[scope="row"],
  table.compare thead th:first-child{display:none}

  .q-row{display:table-row}
  .q-row th{
    display:table-cell;text-align:left;
    padding:.7rem .6rem .5rem;background:var(--surface-2);
    border-top:1px solid var(--line);
    font-family:'Bricolage Grotesque',sans-serif;font-size:.94rem;font-weight:700;
    letter-spacing:-.02em;color:var(--ink);
  }
  table.compare tbody tr:first-child th{border-top:0}
  table.compare thead th{font-size:.86rem;text-align:center;letter-spacing:-.01em}
  table.compare thead th small{display:none}

  table.compare td{text-align:center;font-size:.82rem}
  table.compare .mark{display:block;margin:0 0 .2rem;font-size:1rem;line-height:1}
}

@media (max-width:400px){
  table.compare th,
  table.compare td{padding:.5rem .28rem}
  table.compare td{font-size:.78rem}
  table.compare thead th{font-size:.82rem}
}

/* ============================================================
   EVERGREEN-ONLY PIECES
   ============================================================ */

/* What-we-buy cards carry text rather than product photos */
.buy-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.buy-card{display:flex;flex-direction:column;gap:.5rem;min-height:9.5rem;justify-content:flex-start}
.buy-card b{font-size:1.15rem;margin-bottom:.1rem}
.buy-card span{line-height:1.5}

/* rating breakdown above the review cards */
.score-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-bottom:1.3rem}
.score{
  padding:1rem 1.1rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);display:flex;flex-direction:column;gap:.25rem;
}
.score b{font-size:.92rem;font-weight:600}
.score .stars{font-size:.95rem;letter-spacing:1px}
.score small{font-size:.8rem;color:var(--ink-2)}

/* standing disclaimer above the footer's bottom rule */
.foot-disclaimer{
  margin-top:2.2rem;padding:1rem 1.15rem;
  background:rgba(255,255,255,.04);border:1px solid var(--dark-line);border-radius:var(--r-sm);
  font-size:.82rem;line-height:1.6;color:var(--on-dark-mute);
}

@media (max-width:1080px){
  .buy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .buy-grid{grid-template-columns:1fr}
  .score-grid{grid-template-columns:1fr}
  .buy-card{min-height:0}
}

/* ---------- hero product cut-outs ---------- */
.hero-products{
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:clamp(.5rem,2.2vw,1.5rem);
  margin:0 0 1.35rem;     /* sits above the headline */
}
.hero-products img{
  width:auto;height:auto;
  max-width:clamp(92px,29%,158px);
  /* the shadow follows the cut-out silhouette, which lifts the white
     Dexcom box off the light background */
  filter:drop-shadow(0 12px 18px rgba(19,26,20,.16)) drop-shadow(0 2px 3px rgba(19,26,20,.10));
}
@media (max-width:560px){
  .hero-products{gap:.45rem;margin-top:1.3rem}
  .hero-products img{max-width:31%}
}

/* ============================================================
   LOCATIONS + BLOG
   ============================================================ */

/* the hero on index-style pages has no second column */
.hero-sub > .wrap:not(.hero-grid){max-width:var(--wrap)}
.hero-sub > .wrap:not(.hero-grid) .hero-lede{max-width:44ch}

/* state heading above each city grid */
.loc-group{
  display:flex;align-items:baseline;gap:.7rem;
  font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;
  margin:2rem 0 .9rem;
}
.loc-group:first-of-type{margin-top:0}
.loc-group span{font-family:'Public Sans',sans-serif;font-size:.82rem;font-weight:600;color:var(--ink-2);letter-spacing:0}

/* keyword block on city pages - present for search, quiet for readers */
.keyword-list{
  margin-top:1rem;padding:1rem 1.15rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.82rem;line-height:1.8;color:var(--ink-2);
}

/* ---------- blog index ---------- */
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.post-card{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1.6rem 1.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--ink);
}
.post-card:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.post-date{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.post-card b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.28rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.post-ex{font-size:.94rem;line-height:1.6;color:var(--ink-2);flex-grow:1}
.post-more{font-size:.9rem;font-weight:700;color:var(--accent)}

/* ---------- blog post ---------- */
.article-head{padding-block:clamp(1.25rem,3vw,2.25rem) 0}
.article-head h1{font-size:clamp(1.9rem,4vw,3rem);max-width:22ch;margin-top:.6rem}
.article-body{padding-block:clamp(1.75rem,4vw,2.75rem)}

.article{max-width:42rem}
.article p{color:var(--ink-2);font-size:1.03rem;line-height:1.75;margin-bottom:1.1rem}
.article h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700;margin:2.4rem 0 .85rem}
.article h2:first-child{margin-top:0}
.article h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.16rem;font-weight:700;letter-spacing:-.02em;margin:1.7rem 0 .5rem}
.article ul,.article ol{margin:0 0 1.2rem;padding:0;list-style:none;display:grid;gap:.5rem}
.article li{position:relative;padding-left:1.4rem;color:var(--ink-2);line-height:1.65}
.article ul li::before{content:"";position:absolute;left:.3rem;top:.68em;width:5px;height:5px;border-radius:999px;background:var(--accent)}
.article ol{counter-reset:s}
.article ol li{counter-increment:s}
.article ol li::before{content:counter(s) ".";position:absolute;left:0;font-weight:700;color:var(--accent);font-size:.9rem;top:.05em}
.article strong{color:var(--ink);font-weight:700}
.article a{font-weight:600}

@media (max-width:768px){
  .post-grid{grid-template-columns:1fr}
  .loc-group{font-size:1.3rem;margin-top:1.6rem}
}