/* --------------------------------------------------------------------------
   0. GLOBAL SAFETY NET
   Prevents ANY element (this article's or otherwise) from ever forcing
   horizontal overflow on the page, which is what causes the "whole page
   zoomed" mobile bug. Belt-and-suspenders alongside the full-bleed fix
   below, which addresses the actual cause.
   -------------------------------------------------------------------------- */
html, body{
  overflow-x:hidden;
}

 /* ==========================================================================
   BESTDOG.FOOD — SHARED ARTICLE DESIGN SYSTEM
   One stylesheet for every buying-guide / comparison article on the site.

   Signature idea: a "vet-chart" aesthetic — clipboard paper, forest-ink
   borders, and a single biscuit-amber accent reserved ONLY for actions
   (CTA buttons, price mentions). Everything else stays quiet so the
   accent color always means "you can click this."

   Color-coded callout system: readers learn the color language once and
   can triage the whole article by glancing at the left border color.
     red    = vet / caution
     gold   = cost / money
     sage   = practical / feeding reality
     dark   = advanced / deep-dive
     stone  = plain informational

   HOW TO USE THIS FILE
   1. Link it once per article: <link rel="stylesheet" href="/assets/bestdogfood.css">
   2. Wrap article content in <div class="bdf-wrap">...</div>
   3. Use the component classes below — do not invent one-off inline
      styles in new articles; add a new component here instead so the
      whole site stays consistent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Paper + ink — a cool bone/sage paper instead of the common warm-cream
     default, paired with a deep forest-ink border/text color. */
  --paper:        #FCFBF8;
  --paper-deep:   #E8EBDD;   /* stripes, subtle section breaks */
  --card:         #FFFFFF;
  --ink:          #1C2A20;  /* primary text + all hairline/hard borders */
  --ink-soft:     #47543E;  /* secondary text */

  /* Decorative amber family — used for hairline accents ONLY, never as a
     fill behind large areas. Kept muted on purpose so it never competes
     with --cta-bg below. */
  --amber:        #BD5B2A;
  --amber-deep:   #8F4319;
  --amber-soft:   #F2E1CC;

  /* The CTA color. Deliberately the loudest, most saturated color in the
     whole system, and used in EXACTLY ONE place: buttons and price call-
     outs. Never used as a decorative fill — that scarcity is what keeps
     it registering as "click here" instead of blending into the page. */
  --cta-bg:       #E2570B;
  --cta-bg-hover: #B8430A;
  --cta-text:     #FFFFFF;

  /* Secondary brand color — trust / vet / practical content, never CTAs. */
  --sage:         #4F7A5B;
  --sage-deep:    #35543C;
  --sage-soft:    #E4EEE1;

  /* Status colors */
  --good:         #3F6B45;
  --bad:          #9C3B3B;
  --bad-soft:     #FBEDEA;
  --gold:         #8A6D00;
  --gold-soft:    #FBF3DC;

  /* Structure */
  --line:         #D8D9C9;
  --radius:       14px;
  --radius-sm:    8px;
  --shadow:       4px 4px 0 var(--ink);
  --shadow-sm:    3px 3px 0 var(--ink);
  --shadow-hover: 2px 2px 0 var(--ink);

  /* Type */
  --font-display: "Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:    Georgia,"Iowan Old Style",serif;
  --font-ui:      "Helvetica Neue",Arial,sans-serif;

  /* Layout */
  --content-max:  760px;
  --gutter:       20px;
  --gutter-mob:   16px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
.bdf-wrap, .bdf-wrap *{ box-sizing:border-box; }

.bdf-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 var(--gutter) 80px;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.65;
    overflow-x:hidden; /* stops any stray oversized child from widening the page */
}
.bdf-wrap img, .bdf-wrap svg, .bdf-wrap video, .bdf-wrap iframe, .bdf-wrap table{
    max-width:100%;
}

@media (max-width:600px){
  .bdf-wrap{
    padding:0 8px 60px;
    font-size:16px;
  }
}

h1,h2,h3,h4{
  font-family:var(--font-ui);
  font-weight:800;
  color:var(--ink);
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{
  font-size:clamp(26px,5vw,40px);
  margin:24px 0 8px;
  border-bottom:4px solid var(--ink);
  padding-bottom:12px;
}
h2{
  font-size:clamp(21px,4vw,26px);
  margin:44px auto 14px;
  padding-bottom:6px;
  border-bottom:3px solid var(--sage-deep);
  display:table;           /* shrink-to-fit width, so margin:auto centers it
                               and the underline hugs the text, not the column */
  text-align:center;
}
h3{ font-size:19px; margin:24px auto 8px; text-align:center; }
/* Use for supporting/secondary sections (Practicality, Transitioning, When
   to See a Vet, etc.) so major sections (Quick Answer, The Picks, FAQ, Key
   Takeaways) keep the centered treatment as the visual "headline" tier. */
h2.section-minor{
  display:block; text-align:left; border-bottom:none;
  border-left:5px solid var(--sage); padding:4px 0 4px 14px; margin:42px 0 14px;
}
p{ margin:0 0 16px; }
a{ color:var(--sage-deep); text-decoration-thickness:1.5px; }
a:hover{ color:var(--amber); }
a:focus-visible, button:focus-visible, .cta-btn:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* --------------------------------------------------------------------------
   3. FULL-BLEED UTILITY (mobile edge-to-edge)
   Apply to tables, the sticky CTA bar, and hero bands. Breaks the element
   out of .bdf-wrap's side padding on small screens while the rest of the
   article stays comfortably padded.

   FIX: previously used width:100vw + margin:-50vw, which measures the
   raw device width rather than the actual content column. Any mismatch
   with the theme's container (nested padding, scrollbar width, etc.)
   made this push wider than the real viewport — forcing the WHOLE PAGE
   (header included) to render at that wider width and get shrunk/zoomed
   to fit. Rewritten below using calc() anchored to --gutter instead, so
   it only ever expands by the exact padding it's breaking out of and can
   never exceed the true viewport.
   -------------------------------------------------------------------------- */
.full-bleed{
  width:calc(100% + (var(--gutter) * 2));
  margin-left:calc(var(--gutter) * -1);
  margin-right:calc(var(--gutter) * -1);
}
@media (max-width:600px){
  .full-bleed{
    width:calc(100% + 16px);
    margin-left:-8px;
    margin-right:-8px;
  }
}
@media (min-width:601px){
  /* Above mobile, don't break out — keep it inside the reading column. */
  .full-bleed{ width:auto; margin-left:0; margin-right:0; }
}

/* --------------------------------------------------------------------------
   4. BYLINE / META STRIP
   -------------------------------------------------------------------------- */
.pill{
  display:inline-block; background:var(--sage-soft); border:2px solid var(--ink);
  border-radius:100px; padding:3px 12px; font-size:12.5px; font-weight:bold;
  font-family:var(--font-ui);
}
.byline-strip{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-family:var(--font-ui); font-size:13.5px; color:var(--ink-soft);
  margin-bottom:26px;
}
.byline-strip strong{ color:var(--ink); }

.hero-note{
  font-family:var(--font-ui); font-size:16px; font-style:italic;
  color:var(--ink-soft); border-left:4px solid var(--sage);
  padding-left:14px; margin:18px 0 30px;
}

.jump-cta{
  display:block; text-align:center; background:var(--ink); color:var(--paper);
  font-family:var(--font-ui); font-weight:800; text-decoration:none;
  padding:12px; border-radius:100px; margin:14px 0 26px; border:2.5px solid var(--ink);
}
.jump-cta:hover{ background:var(--sage-deep); color:#fff; border-color:var(--sage-deep); }

.toc{
  font-family:var(--font-ui); font-size:14px; background:var(--paper-deep);
  border:2px solid var(--ink); border-radius:var(--radius); padding:16px 20px;
  margin:18px 0 30px;
}
.toc a{ display:block; padding:3px 0; color:var(--ink-soft); }
.toc a:hover{ color:var(--amber); }

/* --------------------------------------------------------------------------
   5. QUICK ANSWER — the single highest-value box on the page.
   Inverted fill so it's unmissable even skimmed at 2 seconds.
   -------------------------------------------------------------------------- */
.quick-answer{
  background:var(--sage-deep); color:#fff; border:3px solid var(--ink);
  border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow);
  margin:22px 0 30px;
}
.quick-answer h2{ color:#fff; border-bottom:3px solid #fff; font-size:20px; margin-top:0; }
.quick-answer a{ color:var(--amber-soft); }
.quick-answer p{ margin:0 0 10px; }
.quick-answer p:last-of-type{ margin-bottom:16px; }
.qm-table{ width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:14.5px; }
.qm-table td{ padding:9px 6px; border-bottom:1px solid rgba(255,255,255,.25); vertical-align:top; }
.qm-table td:first-child{ color:rgba(255,255,255,.75); width:46%; }
.qm-table td:last-child{ font-weight:700; }

/* --------------------------------------------------------------------------
   6. CHECKLIST (Before You Buy, Quick Recap, etc.)
   -------------------------------------------------------------------------- */
.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{
  padding-left:30px; position:relative; margin-bottom:10px;
  font-family:var(--font-ui); font-size:15px;
}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; font-weight:bold; color:#fff;
  background:var(--sage); width:20px; height:20px; border-radius:5px;
  text-align:center; line-height:20px; font-size:13px; border:1.5px solid var(--ink);
}

/* --------------------------------------------------------------------------
   7. TABLES — normal table on desktop; on mobile, a button opens the same
   real table in a fullscreen modal instead of reflowing it.

   Desktop (and the table's own base styling) is unchanged below. The
   mobile behavior — hiding .table-wrap and swapping in a .table-btn that
   opens .table-modal — lives in section 7b, right after this block, kept
   next to it since they're two halves of the same component.

   The `data-label` attributes on each <td> are left in the markup for
   backward compatibility but are no longer read by any CSS here.
   -------------------------------------------------------------------------- */
.table-wrap{
  margin:22px 0; border:2.5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); background:var(--card);
}
table.data{
  width:100%; border-collapse:collapse; font-family:var(--font-ui);
  font-size:14px; background:var(--card);
}
table.data th{
  background:var(--ink); color:var(--paper); text-align:left; padding:12px 14px;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
}
table.data td{
  padding:12px 14px; border-top:1px solid var(--line); vertical-align:top;
  word-break:break-word; overflow-wrap:anywhere;
}
table.data tr:nth-child(even) td{ background:var(--paper-deep); }

/* --------------------------------------------------------------------------
   7b. MOBILE TABLE PATTERN — button that opens the real table in a modal.

   REPLACES the earlier "stacked card" approach below 700px. Instead of
   dismantling <table class="data"> into cards, the table itself is left
   completely untouched (same markup, same desktop CSS above). Below
   700px the .table-wrap holding the real table is simply hidden and a
   .table-btn is shown in its place; tapping the button clones that same
   table into a fullscreen .table-modal so the reader still sees an
   actual table (with horizontal scroll if needed), not a re-flowed card.

   USAGE (per table instance):
   <button class="table-btn" data-table="ID_OF_TABLE_WRAP">📊 View Comparison Table</button>
   <div class="table-wrap" id="ID_OF_TABLE_WRAP">
     <table class="data">...</table>
   </div>
   One shared #tableModal + script (see article HTML) handles every
   .table-btn on the page via its data-table id, so this block only ever
   needs to be defined once here.
   -------------------------------------------------------------------------- */
.table-btn{
  display:none;
  width:100%;
  padding:14px;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  margin:15px 0;
  font-family:var(--font-ui);
}

.table-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  z-index:999999;
  justify-content:center;
  align-items:center;
  padding:15px;
}

.table-modal-content{
  background:#fff;
  width:100%;
  max-width:1200px;
  max-height:90vh;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.table-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  border-bottom:1px solid #ddd;
}

.table-modal-header h2{
  margin:0;
  font-size:22px;
}

.close-table{
  background:none;
  border:none;
  font-size:30px;
  cursor:pointer;
  line-height:1;
}

.table-scroll{
  overflow:auto;
  padding:15px;
}

/* Force the cloned table.data to keep its normal (non-card) column
   layout inside the modal, scrolling horizontally instead of squeezing. */
.table-scroll table.data{
  min-width:1000px;
}

@media (max-width:700px){
  .table-btn{ display:block; }
  .table-wrap{ display:none; }
}

/* --------------------------------------------------------------------------
   8. CALLOUT BOX SYSTEM
   One base .box + a color modifier. Add new content types by adding a
   modifier here — never invent a new box shape in an article file.
   -------------------------------------------------------------------------- */
.box{
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px; margin:26px 0;
}
.box-label{
  font-family:var(--font-ui); font-weight:800; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; display:flex; align-items:center; gap:8px;
  margin-bottom:10px; color:var(--sage-deep);
}
.box-label .dot{
  width:9px; height:9px; border-radius:50%; background:var(--sage-deep);
  display:inline-block; border:1.5px solid var(--ink);
}
/* Meaning-coded modifiers — color = what kind of information this is */
.box.vet-check{ border-color:var(--bad); background:var(--bad-soft); }
.box.vet-check .box-label{ color:var(--bad); }
.box.cost-reality .box-label{ color:var(--gold); }
.box.feeding-reality .box-label, .box.label-reality .box-label{ color:var(--sage-deep); }
/* .box.quick-recap — DEPRECATED for new articles. A mid-article summary
   dilutes the Quick Answer (top) / Key Takeaways (bottom) symmetry that
   should be the article's two summary anchors. Rule kept for old articles
   still using it; don't reach for this class in new content. */
.box.quick-recap{ background:var(--sage-soft); }
.box.comparison-micro{ background:var(--paper-deep); }
.box.advanced-note{ background:#22281F; color:#F1EEE2; border-color:#22281F; }
.box.advanced-note .box-label{ color:#D9C27A; }
.box.advanced-note a{ color:#EFD9A6; }
.box.advanced-note .box-bottom-line{ color:#F1EEE2; border-top-color:rgba(241,238,226,.3); }
.box.advanced-note .box-bottom-line strong{ color:#fff; }

.verdict{ font-weight:bold; font-family:var(--font-ui); }
/* Legacy comparison-micro boxes (pre-VS-component articles) still get a
   readable heading; new articles should use the .vs component above instead. */
.box.comparison-micro h4{ margin-top:0; font-size:16px; }

/* --------------------------------------------------------------------------
   8b. MYTH VS. REALITY — a structured correction-journey card, replacing the
   old myth-row / <br>-separated paragraph pattern. Each card shows: false
   claim → what's actually true → why the idea spread → bottom line, so the
   structure reads even at a skim.

   MARKUP:
   <div class="myth-stack">
     <div class="myth-card">
       <div class="myth-card-head">
         <span class="myth-number">Myth 01</span>
         <span class="myth-topic">Dental cleaning</span>
       </div>
       <div class="myth-claim">
         <span class="myth-label">The myth</span>
         <p>False claim.</p>
       </div>
       <div class="myth-truth">
         <span class="truth-label">What's actually true</span>
         <p>Short paragraph.</p>
       </div>
       <div class="myth-origin">
         <span class="origin-label">Why people believe it</span>
         <p>Short paragraph.</p>
       </div>
       <div class="myth-takeaway">
         <span>Bottom line</span>
         <p>Short paragraph.</p>
       </div>
     </div>
   </div>
   -------------------------------------------------------------------------- */
.myth-stack{ display:grid; gap:20px; margin:22px 0 8px; }
.myth-card{
  background:var(--card); border:3px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.myth-card-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 18px; background:var(--ink); color:var(--paper); font-family:var(--font-ui);
}
.myth-number{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.myth-topic{ font-size:12px; color:rgba(241,243,234,.72); }
.myth-claim, .myth-truth, .myth-origin{ padding:16px 20px; }
.myth-claim{ border-bottom:1.5px solid var(--line); }
.myth-label, .truth-label, .origin-label{
  display:block; margin-bottom:7px; font-family:var(--font-ui); font-size:10.5px;
  line-height:1.2; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}
.myth-label{ color:var(--bad); }
.myth-claim p{ margin:0; font-family:var(--font-ui); font-size:16.5px; line-height:1.45; font-weight:750; }
.myth-truth{ background:var(--sage-soft); border-left:6px solid var(--sage); }
.truth-label{ color:var(--sage-deep); }
.myth-truth p{ margin:0 0 9px; font-size:15.5px; }
.myth-truth p:last-child{ margin-bottom:0; }
.myth-origin{ background:var(--paper-deep); }
.origin-label{ color:var(--ink-soft); }
.myth-origin p{ margin:0; color:var(--ink-soft); font-size:14.5px; }
.myth-takeaway{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:15px 20px; background:var(--ink); color:var(--paper);
}
.myth-takeaway > span{
  font-family:var(--font-ui); font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--amber-soft); padding-top:1px;
}
.myth-takeaway p{ margin:0; font-family:var(--font-ui); font-size:14px; line-height:1.5; }
@media (max-width:600px){
  .myth-takeaway{ grid-template-columns:1fr; gap:6px; }
}

/* --------------------------------------------------------------------------
   9. PRODUCT PICK CARDS
   -------------------------------------------------------------------------- */
.pick{
  border:3px solid var(--ink); border-radius:var(--radius); background:var(--card);
  box-shadow:var(--shadow); margin:30px 0; overflow:hidden;
}
.pick-head{
  background:var(--paper-deep); border-bottom:2.5px solid var(--ink); padding:16px 22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.pick-rank{
  font-family:var(--font-ui); font-weight:800; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; background:var(--ink); color:var(--paper);
  padding:4px 12px; border-radius:100px;
}
.pick-body{ padding:22px; }
.pick h3{ margin-top:0; font-size:21px; }
.pick-sub{ font-family:var(--font-ui); font-size:13.5px; color:var(--ink-soft); margin:-4px 0 14px; }
@media (max-width:600px){
  .pick-sub{
    display:table; margin:0 auto 14px; text-align:center;
    background:var(--paper-deep); border:1.5px solid var(--line);
    border-radius:100px; padding:6px 16px; font-size:12.5px;
  }
}

/* Product photo — renders at its own natural aspect ratio (no forced crop
   box), so nothing gets zoomed/cropped and there are no letterbox bars.
   Shared by mobile (stacked, right under the title/sub) and desktop
   (moved into the left column of the review row). */
.pick-image{
  width:100%; height:auto; display:block; object-fit:contain;
  border:2px solid var(--ink); border-radius:var(--radius-sm);
  margin:0 0 16px; background:var(--paper-deep);
}
/* Wrapper added so product photos can link out to the affiliate listing.
   Takes over the spacing/positioning that used to live directly on
   .pick-image; the <img> inside resets its own margin to 0 so there's
   no double gap. Visually identical to the old unlinked image. */
.pick-image-link{
  display:block; margin:0 0 16px;
}
.pick-image-link .pick-image{ margin:0; transition:opacity .15s ease; }
.pick-image-link:hover .pick-image,
.pick-image-link:focus-visible .pick-image{ opacity:.85; }
.pick-image-placeholder{
  width:100%; aspect-ratio:4/5; border:2px dashed var(--line); border-radius:var(--radius-sm);
  margin:0 0 16px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:12.5px; color:var(--ink-soft); background:var(--paper-deep);
}

/* --------------------------------------------------------------------------
   9a. DESKTOP PICK LAYOUT — image left / editorial review right.
   MOBILE (default, no grid): DOM order stands — title, sub, image, then
   Best-For/Skip-If, Pros/Cons, and the review copy stacked full-width below.
   DESKTOP (>=601px): title/sub/bf-grid/pc-grid stay full-width exactly as
   on mobile; the image and the "why picked / notes" copy (wrapped in
   .pick-review) become a two-column row via named grid areas, independent
   of DOM order — so the image can live in the markup right after .pick-sub
   (correct for mobile) while still landing beside .pick-review on desktop.
   -------------------------------------------------------------------------- */
.pick-review{ min-width:0; }
@media (min-width:601px){
  .pick-body{
    display:grid;
    grid-template-columns: 260px 1fr;
    column-gap:26px;
    grid-template-areas:
      "title   title"
      "sub     sub"
      "bfgrid  bfgrid"
      "pcgrid  pcgrid"
      "image   review"
      "cta     cta";
    align-items:start;
  }
  .pick-body > h3{ grid-area:title; }
  .pick-body > .pick-sub{ grid-area:sub; }
  .pick-body > .bf-grid{ grid-area:bfgrid; }
  .pick-body > .pc-grid{ grid-area:pcgrid; }
  .pick-body > .pick-image,
  .pick-body > .pick-image-link,
  .pick-body > .pick-image-placeholder{ grid-area:image; margin-bottom:0; align-self:start; position:sticky; top:20px; }
  .pick-body > .pick-review{ grid-area:review; }
  .pick-body > .cta-btn{ grid-area:cta; }
}

.bf-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; font-family:var(--font-ui);
  font-size:14.5px; margin:14px 0; border-top:1.5px dashed var(--line);
  border-bottom:1.5px dashed var(--line); padding:14px 0;
}
.bf-grid strong{
  display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--sage-deep); margin-bottom:2px;
}
/* First cell = "Best for" (green), second cell = "Skip if" (red). Relies on
   source order: Best for markup always comes first, Skip if second. */
.bf-grid > div:first-child{ border-left:3px solid var(--good); padding-left:10px; }
.bf-grid > div:first-child strong{ color:var(--good); }
.bf-grid > div:last-child{ border-left:3px solid var(--bad); padding-left:10px; }
.bf-grid > div:last-child strong{ color:var(--bad); }

.pc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin:14px 0; }
.pc-grid ul{ list-style:none; padding:0; margin:0; font-family:var(--font-ui); font-size:14.5px; }
.pc-grid li{ margin-bottom:6px; position:relative; padding-left:22px; }
/* Icons are drawn by CSS, not typed into the HTML as ✓/characters — keeps
   markup clean and color consistent everywhere pros/cons appear.
   First <ul> in a .pc-grid = pros, second <ul> = cons (source order matters). */
.pc-grid ul:first-child li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--good); font-weight:800;
}
.pc-grid ul:last-child li::before{
  content:"×"; position:absolute; left:0; top:0; color:var(--bad); font-weight:800;
}
.why-picked{
  background:var(--paper-deep); border-left:4px solid var(--sage); padding:10px 14px;
  font-style:italic; font-family:var(--font-ui); font-size:14.5px; margin:14px 0;
}
@media (max-width:600px){
  .bf-grid, .pc-grid{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   9b. PICK NOTES — the "Why it made the list / What stands out / Trade-off /
   Label note" review copy, as a quiet editorial rail rather than four stacked
   prose paragraphs. Lighter-weight than Best For/Skip If and Pros/Cons on
   purpose, so the card doesn't turn into a wall of boxes.

   MARKUP:
   <div class="pick-notes">
     <div class="pick-note">
       <span class="pick-note-label">Why it made the list</span>
       <p>Short paragraph.</p>
     </div>
     <div class="pick-note pick-note--tradeoff">
       <span class="pick-note-label">Trade-off</span>
       <p>Short paragraph.</p>
     </div>
     <div class="pick-note pick-note--label">
       <span class="pick-note-label">Label / nutrition note</span>
       <p>Short paragraph.</p>
     </div>
   </div>
   -------------------------------------------------------------------------- */
.pick-notes{ position:relative; margin:18px 0 4px; padding-left:22px; }
.pick-notes::before{
  content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px;
  background:var(--line);
}
.pick-note{ position:relative; margin:0 0 18px; }
.pick-note:last-child{ margin-bottom:0; }
.pick-note::before{
  content:""; position:absolute; left:-22px; top:4px; width:9px; height:9px;
  border-radius:50%; background:var(--sage); border:2px solid var(--card);
  box-shadow:0 0 0 1.5px var(--ink);
}
.pick-note-label{
  display:block; margin-bottom:5px; font-family:var(--font-ui); font-size:11.5px;
  line-height:1.2; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--sage-deep);
}
.pick-note p{ margin:0 0 7px; font-size:15.5px; }
.pick-note p:last-child{ margin-bottom:0; }
.pick-note--tradeoff::before{ background:var(--bad); }
.pick-note--tradeoff .pick-note-label{ color:var(--bad); }
.pick-note--label::before{ background:var(--sage-deep); }

/* Reusable "closing sentence" treatment inside a .box — use only where the
   final sentence is genuinely a conclusion/recommendation, not on every box. */
.box-bottom-line{
  margin-top:12px; padding-top:11px; border-top:1.5px dashed var(--line);
  font-family:var(--font-ui); font-size:14px; color:var(--ink-soft);
}
.box-bottom-line strong{ color:var(--ink); }

/* --------------------------------------------------------------------------
   10. CTA BUTTONS — the actual conversion surface. One shape, one meaning.
   Variants: primary (in-card), mini (shop-list rows), sticky (mobile bar).
   -------------------------------------------------------------------------- */
.cta-btn{
  display:table;                 /* shrink-to-fit + margin:auto centers it */
  margin:16px auto 0;
  background:var(--cta-bg); color:var(--cta-text) !important;
  border:2.5px solid var(--ink); border-radius:100px; padding:14px 30px;
  font-family:var(--font-ui); font-weight:800; font-size:15.5px;
  text-transform:uppercase; letter-spacing:.03em; text-decoration:none;
  text-align:center; box-shadow:var(--shadow-sm); min-height:44px; line-height:1.3;
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.cta-btn:hover{ background:var(--cta-bg-hover); color:var(--cta-text) !important; }
.cta-btn:active{
  transform:translate(2px,2px); box-shadow:var(--shadow-hover);
}
/* Full-width variant for mobile pick cards — a wide, thumb-friendly target
   converts better than a small centered pill once the screen is narrow. */
.cta-btn--block{ display:block; width:100%; }
@media (max-width:600px){
  .pick .cta-btn{ display:block; width:100%; }
}
.cta-btn--mini{
  padding:9px 18px; font-size:13px; box-shadow:none; border-width:2px; margin:0;
}

/* Sticky mobile buy-bar — toggle a "is-visible" class via a small scroll
   listener once the reader passes the hero. Full-bleed by design: an
   affiliate CTA with side margins reads as an ad and gets ignored. */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--card); border-top:3px solid var(--ink);
  padding:10px var(--gutter-mob);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transform:translateY(100%); transition:transform .2s ease;
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta .name{
  font-family:var(--font-ui); font-weight:700; font-size:13px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sticky-cta .cta-btn{ margin:0; flex-shrink:0; }
@media (min-width:601px){
  .sticky-cta{ display:none; } /* desktop CTAs are always in-view; skip the bar */
}

/* --------------------------------------------------------------------------
   11. VS COMPARISON — for "X vs. Y" content between two picks or two
   approaches. Gets its own signature look rather than reusing the generic
   .box, since this content type (decision variable / trade-off / verdict)
   is structurally different from a plain callout.

   MARKUP:
   <div class="vs">
     <div class="vs-grid">
       <div class="vs-side">
         <h4>Canned Pate</h4>
         <ul><li>No chewing required</li><li>Higher cost per calorie</li></ul>
       </div>
       <span class="vs-mark">VS</span>
       <div class="vs-side">
         <h4>Softened Kibble</h4>
         <ul><li>Some gum/mash work</li><li>Lower cost per calorie</li></ul>
       </div>
     </div>
     <p class="vs-verdict"><strong>Verdict:</strong> Choose canned when chewing
     looks uncomfortable at all; choose kibble when the dog is managing dry
     food, just more cautiously than before.</p>
   </div>
   -------------------------------------------------------------------------- */
.vs{
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px; margin:26px 0;
}
.vs-grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch;
}
.vs-side{
  background:var(--paper-deep); border:2px solid var(--ink); border-radius:var(--radius-sm);
  padding:14px 16px;
}
.vs-side h4{
  margin:0 0 8px; font-family:var(--font-ui); font-size:14px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--sage-deep);
}
.vs-side ul{ list-style:none; margin:0; padding:0; font-family:var(--font-ui); font-size:14px; }
.vs-side li{ margin-bottom:6px; }
.vs-mark{
  align-self:center; font-family:var(--font-ui); font-weight:900; font-size:13px;
  background:var(--ink); color:var(--paper); border-radius:100px; padding:8px 10px;
}
.vs-verdict{
  margin:14px 0 0; border-top:2px dashed var(--line); padding-top:14px; font-size:14.5px;
}
@media (max-width:600px){
  .vs-grid{ grid-template-columns:1fr; }
  .vs-mark{ justify-self:center; }
}

/* --------------------------------------------------------------------------
   12. FAQ — "vet consultation file" cards. Native <details>/<summary>, no JS
   required. Each card visually separates the owner's question from a
   directly-stated short answer, using a numbered rail rather than a generic
   plus/minus accordion.

   MARKUP:
   <details class="faq-card">
     <summary>
       <span class="faq-index">01</span>
       <span class="faq-question">
         <span class="faq-kicker">Owner question</span>
         <span class="faq-question-text">Question text?</span>
       </span>
       <span class="faq-toggle" aria-hidden="true"></span>
     </summary>
     <div class="faq-answer">
       <div class="faq-answer-label">Short answer</div>
       <p><strong>Yes.</strong> Direct answer sentence.</p>
       <p>Practical follow-up.</p>
     </div>
   </details>
   -------------------------------------------------------------------------- */
.faq-list{ margin:24px 0 8px; }
.faq-card{
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); margin:14px 0; overflow:hidden;
}
.faq-card summary{
  display:grid; grid-template-columns:56px 1fr 32px; gap:14px; align-items:center;
  min-height:82px; padding:0 18px 0 0; cursor:pointer; list-style:none;
}
.faq-card summary::-webkit-details-marker{ display:none; }
.faq-index{
  align-self:stretch; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); font-family:var(--font-ui);
  font-size:18px; font-weight:800;
}
.faq-kicker{
  display:block; margin-bottom:4px; font-family:var(--font-ui); font-size:10.5px;
  font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
}
.faq-question-text{
  display:block; font-family:var(--font-ui); font-size:15.5px; line-height:1.3;
  font-weight:800; color:var(--ink);
}
.faq-toggle{
  width:28px; height:28px; border:2px solid var(--ink); border-radius:50%;
  position:relative; flex-shrink:0;
}
.faq-toggle::before, .faq-toggle::after{
  content:""; position:absolute; background:var(--ink); left:50%; top:50%;
  transform:translate(-50%,-50%);
}
.faq-toggle::before{ width:12px; height:2px; }
.faq-toggle::after{ width:2px; height:12px; }
.faq-card[open] .faq-toggle::after{ display:none; }
.faq-card[open] summary{ border-bottom:2px solid var(--ink); }
.faq-answer{
  margin-left:56px; padding:16px 20px 18px; background:var(--sage-soft);
  border-top:2px solid var(--ink);
}
.faq-answer-label{
  display:inline-block; margin-bottom:8px; font-family:var(--font-ui); font-size:10.5px;
  font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--sage-deep);
}
.faq-answer p{ margin:0 0 9px; font-size:15.5px; }
.faq-answer p:last-child{ margin-bottom:0; }
@media (max-width:600px){
  .faq-card summary{ grid-template-columns:44px 1fr 28px; gap:10px; padding-right:14px; }
  .faq-index{ font-size:15px; }
  .faq-answer{ margin-left:44px; padding:14px 16px 16px; }
}

/* --------------------------------------------------------------------------
   13. KEY TAKEAWAYS (inverted, end-of-article anchor)
   -------------------------------------------------------------------------- */
.takeaways{
  background:var(--ink); color:var(--paper); border-radius:var(--radius);
  padding:26px; border:3px solid var(--ink);
}
.takeaways h2{ color:var(--paper); border-bottom:3px solid var(--amber-soft); }
.takeaways ul{ padding-left:20px; }
.takeaways li{ margin-bottom:10px; }

/* --------------------------------------------------------------------------
   14. SHOP THIS LIST (recap CTA block)
   Title stays LEFT, button stays RIGHT, at every screen size. flex-wrap is
   deliberately OFF on the row — that's what was pushing the button onto
   its own line. If the title is long, IT wraps internally (it has its own
   min-width:0 to allow that); the button never moves.
   MARKUP: <div class="shop-row"><span class="name">Title — Best For</span>
             <a class="cta-btn cta-btn--mini" href="...">Check Price →</a></div>
   -------------------------------------------------------------------------- */
.shop-list{
  border:2.5px solid var(--ink); border-radius:var(--radius); padding:20px;
  background:var(--card); box-shadow:var(--shadow);
}
.shop-row{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0; border-bottom:1.5px dashed var(--line);
  font-family:var(--font-ui);
  min-width:0; /* lets this row itself shrink inside any parent */
}
.shop-row:last-child{ border-bottom:none; }
.shop-row > *{ min-width:0; } /* safety net: even without .name, no child can force overflow */
.shop-row .name{
  flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:600; line-height:1.35;
  overflow-wrap:anywhere; word-break:break-word;
}
.shop-row .cta-btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:420px){
  .shop-row .name{ font-size:13px; }
  .shop-row .cta-btn--mini{ padding:8px 13px; font-size:11.5px; }
  .shop-row .cta-btn{ padding:10px 16px; font-size:13px; } /* shrink the button itself as a last resort so it never gets pushed out */
}

/* --------------------------------------------------------------------------
   15. RELATED GUIDES — a curated reading-path, not tag chips. Each card
   explains why to click, styled as a contextual recommendation rather than
   a category filter. Pair with h2.section-minor for the section heading.

   MARKUP:
   <div class="related-paths">
     <a class="related-card" href="...">
       <span class="related-index">01</span>
       <span class="related-content">
         <span class="related-kicker">Dental comfort</span>
         <strong>Article title</strong>
         <span class="related-desc">One short line on who this is for.</span>
       </span>
       <span class="related-arrow" aria-hidden="true">→</span>
     </a>
   </div>
   -------------------------------------------------------------------------- */
.related-paths{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 22px; }
.related-card{
  display:grid; grid-template-columns:38px 1fr 26px; gap:12px; align-items:center;
  min-height:128px; padding:18px; background:var(--card); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  text-decoration:none; transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.related-card:hover{
  transform:translate(2px,2px); box-shadow:var(--shadow-hover); background:var(--paper-deep); color:var(--ink);
}
.related-index{ align-self:start; font-family:var(--font-ui); font-size:12px; font-weight:800; color:var(--sage); }
.related-kicker{
  display:block; margin-bottom:5px; font-family:var(--font-ui); font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--sage-deep);
}
.related-content{ display:block; }
.related-content strong{ display:block; font-family:var(--font-ui); font-size:14.5px; line-height:1.3; color:var(--ink); }
.related-desc{ display:block; margin-top:6px; font-family:var(--font-body); font-size:13.5px; line-height:1.45; color:var(--ink-soft); }
.related-arrow{
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); border-radius:50%; font-family:var(--font-ui); font-weight:800;
  align-self:start;
}
.related-more{ font-family:var(--font-ui); font-size:13.5px; color:var(--ink-soft); margin:0 0 26px; }
.related-more a{ color:var(--sage-deep); }
@media (max-width:650px){
  .related-paths{ grid-template-columns:1fr; }
  .related-card{ min-height:auto; }
}

/* --------------------------------------------------------------------------
   16. PINTEREST DESCRIPTION BOX / SOCIAL COPY BLOCK
   -------------------------------------------------------------------------- */
.box.social-copy{ background:var(--sage-soft); }

/* --------------------------------------------------------------------------
   17. DISCLOSURE / FOOTER
   -------------------------------------------------------------------------- */
.disclosure{
  font-family:var(--font-ui); font-size:13px; color:var(--ink-soft);
  border-top:3px solid var(--ink); margin-top:60px; padding-top:20px;
}

/* --------------------------------------------------------------------------
   18. DECISION FRAMEWORK — a scannable branching flow.
   Replaces the old "one <p> full of <br> tags" pattern. Each step sits on
   a vertical timeline; branches are color-coded so a reader can trace
   their own situation down the page without reading every word.

   MARKUP:
   <div class="df">
     <div class="box-label"><span class="dot"></span>Decision Framework: [Topic]</div>
     <ol class="df-steps">
       <li class="df-step">
         <span class="df-num">1</span>
         <div class="df-q">The question for this step?</div>
         <div class="df-branches">
           <div class="df-branch df-branch--stop">
             <span class="df-tag">Condition A</span>
             What to do in this case.
           </div>
           <div class="df-branch df-branch--go">
             <span class="df-tag">Condition B</span>
             What to do in this case — continue to the next step.
           </div>
         </div>
       </li>
       <!-- repeat <li class="df-step"> for each question -->
     </ol>
     <div class="df-result">The final action once every step is resolved.</div>
   </div>
   -------------------------------------------------------------------------- */
.df{
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 22px 24px; margin:26px 0;
}
.df-steps{
  list-style:none; margin:18px 0 0; padding:0; position:relative;
}
/* The connecting vertical line running behind every numbered circle */
.df-steps::before{
  content:""; position:absolute; left:15px; top:4px; bottom:4px; width:3px;
  background:var(--line);
}
.df-step{ position:relative; padding:0 0 26px 46px; }
.df-step:last-child{ padding-bottom:0; }
.df-num{
  position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:var(--paper); font-family:var(--font-ui);
  font-weight:800; font-size:14px; display:flex; align-items:center;
  justify-content:center; border:2.5px solid var(--ink); z-index:1;
}
.df-q{
  font-family:var(--font-ui); font-weight:800; font-size:16px;
  margin:0 0 10px; padding-top:4px;
}
.df-branches{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:600px){ .df-branches{ grid-template-columns:1fr; } }
.df-branch{
  border:2px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  font-family:var(--font-ui); font-size:14px; line-height:1.5; background:var(--paper-deep);
}
.df-tag{
  display:block; font-weight:800; text-transform:uppercase; font-size:11px;
  letter-spacing:.04em; margin-bottom:4px;
}
/* "stop and act now" branch — caution coded */
.df-branch--stop{ border-color:var(--bad); background:var(--bad-soft); }
.df-branch--stop .df-tag{ color:var(--bad); }
/* "continue down the path" branch — go coded */
.df-branch--go{ border-color:var(--sage); background:var(--sage-soft); }
.df-branch--go .df-tag{ color:var(--sage-deep); }
/* neutral branch, for outcomes that are neither caution nor "proceed" */
.df-branch--neutral{ border-color:var(--gold); background:var(--gold-soft); }
.df-branch--neutral .df-tag{ color:var(--gold); }

.df-result{
  margin-top:16px; padding:16px 18px; background:var(--ink); color:var(--paper);
  border-radius:var(--radius-sm); font-family:var(--font-ui); font-weight:700;
  text-align:center; font-size:14.5px;
}

/* --------------------------------------------------------------------------
   19. PRICE MENTIONS — the ONE other place the accent color appears
   outside a button, so price call-outs feel connected to the CTA.
   Usage: "around <span class="price">$107</span>"
   -------------------------------------------------------------------------- */
.price{ color:var(--amber-deep); font-weight:700; font-family:var(--font-ui); }