/* BagEngine  - shared article component system (modern template)
   Loaded alongside /bagengine-modern.css (the base design system).
   Single source of truth for all migrated articles. Fixes baked in:
   - solid-button text override (base .article-wrap a was hijacking color+underline)
   - card-style FAQ, modern related cards, feature-partner placement block. */

/* reading progress */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:100;pointer-events:none;}
.reading-progress span{display:block;height:100%;width:0;background:var(--accent-fill,var(--accent));transition:width .1s;}

/* section eyebrow */
.section-eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;}

/* disclosure */
.disclosure-bar{max-width:720px;margin:0 auto 1.5rem;font-size:.8125rem;color:var(--text-light);background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:.65rem .9rem;line-height:1.5;}
.disclosure-bar strong{color:var(--dark);}
.disclosure-bar a{color:var(--accent);}
.disclosure-note{font-size:.8rem;color:var(--text-light);background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem;margin:2rem 0;line-height:1.6;}
.disclosure-note strong{color:var(--dark);font-family:var(--display);}

/* stat strip */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:1.75rem 0;}
.stat-cell{background:#fff;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:.85rem 1rem;}
.stat-num{font-family:var(--mono);font-size:1.4rem;font-weight:600;color:var(--accent);line-height:1.1;}
.stat-label{font-size:.74rem;color:var(--text-light);margin-top:.3rem;line-height:1.35;}

/* score recap cards */
.score-recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin:1.75rem 0;}
.score-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.9rem 1.05rem;border-top:3px solid var(--accent);}
.score-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-light);}
.score-pick{font-family:var(--display);font-weight:700;font-size:1.05rem;display:block;margin:.2rem 0;color:var(--dark);}
.score-why{font-size:.82rem;color:var(--text-light);line-height:1.5;}

/* deal box (affiliate CTA) */
.deal-box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.85rem;background:var(--accent-light);border:1px solid #d9d2ff;border-radius:12px;padding:1.1rem 1.35rem;margin:1.75rem 0;}
.deal-box-text strong{font-family:var(--display);color:var(--dark);}
.deal-box-text span{display:block;font-size:.85rem;color:var(--text-light);margin-top:.15rem;}
.deal-btn{display:inline-block;padding:.7rem 1.4rem;background:var(--accent-fill,var(--accent));color:#fff;border-radius:8px;font-weight:700;font-size:.875rem;text-decoration:none;white-space:nowrap;transition:background .2s;}
.deal-btn:hover{background:var(--accent-hover);}

/* ranked items */
.rank-item{border-top:1px solid var(--border);padding-top:1.4rem;margin-top:1.4rem;}
.rank-head{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;margin-bottom:.4rem;}
.rank-num{font-family:var(--display);font-size:1.35rem;font-weight:800;color:var(--accent);line-height:1;}
.rank-name{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--dark);letter-spacing:-.01em;}
.rank-price{font-family:var(--mono);font-size:.74rem;color:var(--text-light);background:var(--cream);border:1px solid var(--border);border-radius:100px;padding:.18rem .6rem;}
.rank-item p{margin-bottom:0;}

/* warning banner */
.warning-banner{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #d97706;border-radius:8px;padding:1rem 1.2rem;margin:1.75rem 0;font-size:.9rem;line-height:1.6;}
.warning-banner strong{color:#b45309;}

/* === FEATURED PARTNER: the connection-layer / sponsored-placement block === */
.feature-partner{position:relative;background:linear-gradient(180deg,var(--partner-light),#ffffff 55%);border:1px solid #a5f3fc;border-radius:16px;margin:2.25rem 0;overflow:hidden;box-shadow:0 10px 34px rgba(8,145,178,.12);}
.feature-partner::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--partner),#06b6d4 55%,var(--partner-hover));}
.fp-eyebrow{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-family:var(--mono);font-size:.685rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--partner-hover);padding:1.3rem 1.6rem 0;}
.fp-eyebrow .fp-dot{width:7px;height:7px;border-radius:50%;background:var(--partner);box-shadow:0 0 0 4px rgba(8,145,178,.16);}
.fp-eyebrow .fp-sep{color:#67e8f9;font-weight:400;}
.fp-head{display:flex;align-items:center;gap:1rem;padding:.7rem 1.6rem .2rem;}
.fp-logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--partner),var(--partner-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.5rem;font-weight:700;flex-shrink:0;box-shadow:0 5px 16px rgba(8,145,178,.32);}
.fp-name{font-family:var(--display);font-size:1.75rem;font-weight:700;color:var(--dark);letter-spacing:-.02em;line-height:1.05;}
.fp-tagline{font-size:.9rem;color:var(--text-light);margin-top:.2rem;line-height:1.4;}
.fp-domains{display:flex;flex-wrap:wrap;gap:.4rem;padding:.95rem 1.6rem .35rem;}
.fp-domain{font-family:var(--mono);font-size:.685rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--partner-hover);background:#fff;border:1px solid #a5f3fc;border-radius:100px;padding:.26rem .62rem;}
.fp-body{padding:.55rem 1.6rem 0;font-size:.93rem;color:var(--text);line-height:1.7;}
.fp-body p{margin-bottom:.85rem;}
.fp-safety{background:#fff;border:1px solid var(--border);border-left:3px solid var(--partner);border-radius:0 8px 8px 0;padding:.85rem 1.05rem;margin:.3rem 0 1rem;font-size:.85rem;color:var(--text);line-height:1.6;}
.fp-safety strong{color:var(--partner-hover);}
.fp-actions{display:flex;flex-wrap:wrap;gap:.65rem;padding:0 1.6rem 1.1rem;}
.fp-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.68rem 1.25rem;background:var(--partner);color:#fff;font-weight:700;font-size:.84rem;text-decoration:none;border-radius:8px;transition:all .2s;}
.fp-btn:hover{background:var(--partner-hover);transform:translateY(-1px);}
.fp-btn.ghost{background:#fff;color:var(--partner-hover);border:1.5px solid var(--partner);}
.fp-note{padding:0 1.6rem 1.3rem;font-size:.755rem;color:var(--text-light);line-height:1.55;font-style:italic;}
.fp-note strong{color:var(--partner-hover);font-style:normal;}

/* email capture (inline, non-intrusive) */
.email-capture{background:var(--dark);border-radius:12px;padding:1.75rem;margin:2.5rem 0;color:#fff;text-align:center;}
.email-capture h3{font-family:var(--display);font-size:1.2rem;margin-bottom:.45rem;}
.email-capture p{color:#a1a1aa;font-size:.875rem;margin-bottom:1.1rem;}
.email-capture form{display:flex;gap:.5rem;max-width:400px;margin:0 auto;}
.email-capture input{flex:1;padding:.65rem 1rem;border:1px solid #3f3f46;border-radius:6px;background:#27272a;color:#fff;font-size:.875rem;}
.email-capture input::placeholder{color:#71717a;}
.email-capture button{padding:.65rem 1.25rem;background:var(--accent-fill,var(--accent));border:none;border-radius:6px;color:#fff;font-weight:700;font-size:.8125rem;cursor:pointer;white-space:nowrap;}
.email-capture button:hover{background:var(--accent-hover);}

/* faq  - card style */
.faq{display:flex;flex-direction:column;gap:.7rem;margin-top:1.25rem;}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:0 1.3rem;transition:border-color .2s,box-shadow .2s;}
.faq-item[open]{border-color:#d9d2ff;box-shadow:0 6px 22px rgba(124,106,247,.09);}
.faq-item summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--dark);padding:1.05rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--accent-light);color:var(--accent);font-weight:700;font-size:1.05rem;line-height:1;transition:all .2s;}
.faq-item[open] summary::after{content:'\2212';background:var(--accent-fill,var(--accent));color:#fff;}
.faq-answer{padding:0 0 1.15rem;font-size:.9rem;color:var(--text-light);line-height:1.7;}

/* chapter rail (right-side TOC) */
.chapter-rail{position:fixed;top:50%;right:1.5rem;transform:translateY(-50%);width:210px;max-height:70vh;overflow-y:auto;font-size:.8125rem;z-index:50;padding:.75rem 0;border-left:2px solid var(--border);}
.chapter-rail-title{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);padding:0 1rem .5rem;}
.chapter-rail-list{list-style:none;padding:0;margin:0;}
.chapter-rail-list a{display:block;padding:.34rem 1rem;color:var(--text-light);text-decoration:none;border-left:2px solid transparent;margin-left:-2px;line-height:1.4;}
.chapter-rail-list a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600;}
@media(max-width:1280px){.chapter-rail{display:none;}}

/* === button text fix: override base .article-wrap a (accent color + underline) === */
.article-wrap a.deal-btn,.article-wrap a.deal-btn:hover{color:#fff;text-decoration:none;}
.article-wrap a.fp-btn,.article-wrap a.fp-btn:hover{color:#fff;text-decoration:none;}
.article-wrap a.fp-btn.ghost,.article-wrap a.fp-btn.ghost:hover{color:var(--partner-hover);background:#fff;}

/* keep reading  - modern cards */
.related{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--border);}
.related-title{font-family:var(--display);font-size:1.3rem;font-weight:700;margin-bottom:1.25rem;letter-spacing:-.01em;}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
@media(max-width:600px){.related-grid{grid-template-columns:1fr;}}
.article-wrap a.related-card{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;padding:1.25rem 1.35rem;background:#fff;border:1px solid var(--border);border-radius:12px;transition:all .2s;}
.article-wrap a.related-card:hover{border-color:var(--accent);box-shadow:0 8px 26px rgba(124,106,247,.10);transform:translateY(-2px);}
.related-card-tag{font-family:var(--mono);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);}
.related-card-title{font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.3;color:var(--dark);}
.related-card-arrow{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--accent);margin-top:.15rem;}

/* comparison / data table (modern) */
.cmp-table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:.86rem;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.cmp-table th{background:var(--cream);font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-light);padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--border);}
.cmp-table td{padding:.7rem .85rem;border-bottom:1px solid var(--border);vertical-align:top;}
.cmp-table tr:last-child td{border-bottom:none;}
.cmp-table tr:nth-child(even) td{background:#fcfcfd;}
.cmp-table .vendor{font-family:var(--display);font-weight:700;color:var(--dark);white-space:nowrap;}
.cmp-table .yes{color:#15803d;font-weight:600;}
.cmp-table .no{color:#be123c;}
.cmp-table .price{font-family:var(--mono);color:var(--accent);font-weight:600;}

/* pros/cons */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.75rem 0;}
@media(max-width:600px){.pc-grid{grid-template-columns:1fr;}}
.pc-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem;}
.pc-card.pros{border-top:3px solid #15803d;}
.pc-card.cons{border-top:3px solid #be123c;}
.pc-card h4{font-family:var(--display);font-size:1rem;margin-bottom:.6rem;color:var(--dark);}
.pc-card ul{list-style:none;padding:0;margin:0;font-size:.86rem;color:var(--text);line-height:1.6;}
.pc-card li{padding-left:1.4rem;position:relative;margin-bottom:.4rem;}
.pc-card.pros li::before{content:'\2713';position:absolute;left:0;color:#15803d;font-weight:700;}
.pc-card.cons li::before{content:'\2715';position:absolute;left:0;color:#be123c;font-weight:700;}

/* tool spec/price meta line (review + roundup pages) */
.tool-meta{font-family:var(--mono);font-size:.74rem;color:var(--text-light);background:var(--cream);border:1px solid var(--border);border-radius:6px;padding:.5rem .7rem;margin:.1rem 0 .85rem;line-height:1.7;}
.tool-meta strong{color:var(--dark);}
.visit-line{font-size:.85rem;margin:.2rem 0 0;}

/* ============================================================
   VARIETY TOOLKIT  - compose these differently per page so each
   article has its own character while staying cohesive.
   ============================================================ */

/* red caution panel (distinct from amber warning-banner) */
.caution-box{background:#fff1f2;border:1px solid #fecdd3;border-left:4px solid #be123c;border-radius:0 10px 10px 0;padding:1.2rem 1.4rem;margin:1.75rem 0;}
.caution-box h3,.caution-box h4{font-family:var(--display);color:#be123c;margin:0 0 .6rem;font-size:1.05rem;}
.caution-box ul{margin:0;padding-left:1.2rem;font-size:.88rem;line-height:1.65;color:var(--text);}
.caution-box li{margin-bottom:.4rem;}

/* hero stat band  - full-bleed dark gradient feature strip */
.hero-band{background:linear-gradient(120deg,var(--dark) 0%,#27272a 100%);color:#fff;border-radius:16px;padding:1.6rem 1.8rem;margin:1.75rem 0;position:relative;overflow:hidden;}
.hero-band::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 85% 15%,color-mix(in srgb,var(--accent) 28%,transparent) 0%,transparent 55%);pointer-events:none;}
.hero-band .hb-eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);position:relative;}
.hero-band .hb-stat{font-family:var(--display);font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:.35rem 0 .3rem;position:relative;}
.hero-band .hb-stat span{color:var(--accent);}
.hero-band .hb-sub{font-size:.92rem;color:#d4d4d8;max-width:60ch;position:relative;line-height:1.55;}

/* oversized single-stat callout chip */
.big-stat{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.35rem;margin:1.5rem 0;}
.big-stat .bs-num{font-family:var(--display);font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1;letter-spacing:-.02em;}
.big-stat .bs-text{font-size:.92rem;color:var(--text);line-height:1.5;flex:1;min-width:200px;}

/* split two-column compare layout (e.g. crypto vs stocks, A vs B) */
.split-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.75rem 0;}
@media(max-width:640px){.split-cols{grid-template-columns:1fr;}}
.split-col{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.35rem;}
.split-col.a{border-top:3px solid var(--accent);}
.split-col.b{border-top:3px solid var(--partner);}
.split-col h3{font-family:var(--display);margin:0 0 .5rem;font-size:1.1rem;color:var(--dark);}
.split-col p{font-size:.88rem;color:var(--text-light);line-height:1.6;margin:0;}

/* editorial pull-quote */
.pull-quote{font-family:var(--display);font-size:1.35rem;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--dark);border-left:4px solid var(--accent);padding:.4rem 0 .4rem 1.3rem;margin:2rem 0;}
.pull-quote span{color:var(--accent);}

/* numbered process / steps rail */
.steps{list-style:none;counter-reset:s;padding:0;margin:1.75rem 0;display:flex;flex-direction:column;gap:.7rem;}
.steps li{counter-increment:s;position:relative;background:#fff;border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem .9rem 3.1rem;font-size:.9rem;line-height:1.6;color:var(--text);}
.steps li::before{content:counter(s);position:absolute;left:.85rem;top:.85rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent-fill,var(--accent));color:#fff;font-family:var(--mono);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
.steps li strong{color:var(--dark);}

/* verdict card  - single-product review score hero */
.verdict-card{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.4rem 1.6rem;margin:1.75rem 0;box-shadow:0 8px 30px rgba(0,0,0,.05);position:relative;overflow:hidden;}
.verdict-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--accent),var(--accent-hover));}
.vc-score{display:flex;flex-direction:column;align-items:center;justify-content:center;width:94px;height:94px;border-radius:50%;background:var(--accent-light);border:2px solid var(--accent);flex-shrink:0;}
.vc-num{font-family:var(--display);font-size:1.9rem;font-weight:800;color:var(--accent);line-height:1;}
.vc-out{font-family:var(--mono);font-size:.64rem;color:var(--text-light);margin-top:.15rem;letter-spacing:.04em;}
.vc-stars{color:var(--accent);letter-spacing:2px;font-size:.8rem;margin-top:.25rem;}
.vc-body{font-size:.9rem;color:var(--text);line-height:1.6;}
.vc-body .vc-row{margin-bottom:.4rem;}
.vc-body .vc-row:last-child{margin-bottom:0;}
.vc-body strong{font-family:var(--display);color:var(--dark);}
@media(max-width:560px){.verdict-card{grid-template-columns:1fr;text-align:left;}.vc-score{margin-bottom:.3rem;}}

/* ── base styles for migrated guide prose (tables, quotes, figures) ── */
.article-wrap table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.article-wrap thead th{background:var(--cream);text-align:left;padding:.65rem .85rem;border-bottom:1px solid var(--border);font-family:var(--display);font-size:.8rem;color:var(--text);text-transform:uppercase;letter-spacing:.03em;}
.article-wrap td{padding:.65rem .85rem;border-bottom:1px solid var(--border);vertical-align:top;}
.article-wrap tr:last-child td{border-bottom:none;}
.article-wrap tr:nth-child(even) td{background:#fcfcfd;}
.article-wrap blockquote{border-left:4px solid var(--accent);padding:.5rem 0 .5rem 1.3rem;margin:1.5rem 0;color:var(--text-light);font-style:italic;font-size:1.02rem;line-height:1.6;}
.article-wrap blockquote cite{display:block;margin-top:.5rem;font-size:.82rem;color:var(--muted);font-style:normal;}
.article-wrap h4{font-family:var(--display);font-size:1.02rem;font-weight:700;margin-top:1.5rem;margin-bottom:.5rem;color:var(--dark);}

/* BLUF answer-box (AIO citation) added 2026-06-13 */
.bluf{background:var(--accent-light,#f7f7fb);border:1px solid var(--border,#e5e5ea);border-left:4px solid var(--accent,#e11d48);border-radius:10px;padding:1.05rem 1.3rem;margin:1.5rem 0}
.bluf-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent,#e11d48);font-weight:700;margin-bottom:.5rem}
.bluf-list{margin:0;padding-left:1.1rem;line-height:1.6}
.bluf-list li{margin:.35rem 0}


/* ==== CAPABILITY MATRIX (added 2026-08-25) =====================================================
   9 pages on this property, including the flagship `amazon-product-research-tools`, emit
   `<table class="cmp-grid">` with `cap-cell cap-yes` cells and `.verified-date` chips. NOTHING on
   this property defined any of it: the classes exist only on OmniRx, which these pages do not link.
   So the property's most structured visual, the one that answers [tool] x [capability] at a glance,
   has been rendering as an unstyled table on every one of those 9 pages.

   * MARKUP WITHOUT ITS STYLESHEET FAILS SILENTLY AND LOOKS LIKE A DESIGN CHOICE. There is no error,
     no console warning and no broken layout: just a plain table where a matrix was intended, which
     is why it survived this long on a top-cited page.

   Values are OmniRx's, the highest-cited property on the network, darkened where a tinted row
   dropped them under WCAG AA (cap-yes measured 4.44:1 on an accent-tinted row before #166534).
   Colour never carries meaning alone here: every cell keeps its word. */
.cmp-grid{width:100%;border-collapse:separate;border-spacing:0;margin:1.7rem 0;font-size:.92rem;
  border:1px solid var(--border,#e4e4e7);border-radius:12px;overflow:hidden;background:#fff;
  font-variant-numeric:tabular-nums}
/* ⚠️ SCOPED PAST .article-wrap thead th. That rule is (0,1,2) and beat the plain .cmp-grid th
   (0,1,1), so the matrix header kept the property's generic cream style at 4.4:1, marginally under
   AA, and lost its treatment. Raised to (0,2,2) so the MATRIX header wins while every other table
   on the property keeps its existing look untouched. Deliberately not editing the generic rule:
   that would restyle tables on 84 pages to fix 9. */
.cmp-grid th,.article-wrap .cmp-grid th{text-align:left;padding:.8rem .9rem;background:var(--dark,#18181b);color:#fff;
  font-family:var(--mono,monospace);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.cmp-grid td{padding:.8rem .9rem;border-top:1px solid var(--border,#e4e4e7);vertical-align:top;color:var(--text,#3f3f46)}
.cmp-grid td:first-child{font-weight:700;color:var(--dark,#18181b);white-space:nowrap}
.cmp-grid tbody tr:nth-child(even) td{background:var(--cream,#f4f4f5)}
.cmp-grid tr.winner td{background:color-mix(in srgb, var(--accent,#7c6af7) 7%, transparent)}
.cmp-grid tr.winner td:first-child{box-shadow:inset 3px 0 0 var(--accent,#7c6af7)}
.cmp-grid .mono{font-family:var(--mono,monospace);font-size:.84rem}
.cap-cell{font-weight:700}
.cap-yes,.cmp-grid td.cap-yes{color:#166534;font-weight:700}
.cap-no,.cmp-grid td.cap-no{color:#b91c1c;font-weight:700}
.cap-partial,.cmp-grid td.cap-partial{color:#b45309;font-weight:700}
.verified-date{display:inline-block;margin-left:.35em;padding:.05em .4em;font-family:var(--mono,monospace);
  font-size:.72em;color:var(--text,#3f3f46);background:var(--cream,#f4f4f5);
  border:1px solid var(--border,#e4e4e7);border-radius:3px;white-space:nowrap;vertical-align:baseline}
@media (max-width:640px){ .cmp-grid{display:block;overflow-x:auto;white-space:nowrap} }


/* ==== COMPONENTS THE PROPERTY ALREADY USES AND NEVER DEFINED (added 2026-08-25) ================
   Measured across this property on 2026-08-25, counting pages that emit the class against pages
   that have any CSS for it:

     .freshness-pills   82 of 84 pages   UNSTYLED
     .qa-inline          9 pages         UNSTYLED
     .methodology-card   2 pages         UNSTYLED
     .product-card       1 page          UNSTYLED

   * THE FRESHNESS SIGNAL, WHICH IS THE TRUST ELEMENT, RENDERED AS BARE TEXT ON 82 OF 84 PAGES.
     "Last reviewed 25 August 2026" is doing real work for a reader deciding whether to believe a
     price, and for an engine deciding whether a page is maintained. It has been shipping as an
     unstyled span for as long as the template has existed.

   ★ MARKUP WITHOUT ITS STYLESHEET FAILS SILENTLY AND LOOKS LIKE A DESIGN CHOICE. No error, no
     console warning, no broken layout: just a plainer page than the author wrote. That is why this
     survived on the flagship, and why it is worth sweeping the other 13 properties for the same
     pattern rather than assuming bagengine is unusual.

   Colours are this property's own tokens. Every pair measured on paper: pill 7.2:1, fresh 5.4:1,
   qa-q 16.5:1, qa-a 7.4:1. */

.freshness-pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 1.6rem}
.freshness-pills .pill,.pill{display:inline-block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.03em;padding:.3rem .6rem;border-radius:5px;white-space:nowrap;
  color:var(--text);background:var(--cream);border:1px solid var(--border)}
.freshness-pills .pill.fresh,.pill.fresh{color:#166534;background:#f0fdf4;border-color:#bbf7d0}
.freshness-pills .pill.stale,.pill.stale{color:#b45309;background:#fffbeb;border-color:#fde68a}

/* Quick answer. This is the AEO block: one question, one self-contained answer an engine can lift
   without needing the paragraph before it. Marked as an aside so it is skippable in a screen
   reader's document outline. */
.qa-inline{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  padding:1rem 1.2rem;margin:1.6rem 0;background:#fff}
.qa-inline .qa-q{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.35;
  color:var(--dark);margin:0 0 .45rem}
.qa-inline .qa-a{color:var(--text);font-size:.94rem;line-height:1.65;margin:0}

/* Methodology / how-to-read card. Deliberately quieter than a callout: it explains the page rather
   than making a claim, so it should not compete with one. */
.methodology-card{border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.3rem;
  margin:1.6rem 0;background:var(--cream)}
.methodology-card-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);margin-bottom:.5rem}
.methodology-card p{margin:0;font-size:.92rem;line-height:1.68;color:var(--text)}

/* Product card. */
.product-card{border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.25rem;margin:1.3rem 0;background:#fff}
.product-card-badge{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.product-card-name{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--dark);margin-bottom:.25rem}
.product-card-price{font-family:var(--mono);font-size:.9rem;color:var(--text)}

@media (max-width:640px){ .freshness-pills{gap:.35rem} .qa-inline{padding:.9rem 1rem} }


/* Wide tables scroll inside their own box, never widening the page. Used by hand-built pages that
   had no definition for it. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0}
.table-scroll>table{margin:0;min-width:560px}