/* ============================================================================
   BabyGearWise — pSEO page design system
   ----------------------------------------------------------------------------
   Scoped under .bgw-pseo so it cannot collide with Kadence or plugin classes.
   Every pSEO page shares this ONE stylesheet: the look is structurally
   impossible to drift, because no page carries its own CSS.

   Palette (already in use site-wide):
     ink #2B2A28 · cream #F7F2EA · sand #EFE7E1 · sage rgb(143,179,159)
     rose #A04858 · hairline #E7E3DD
   ========================================================================= */

.bgw-pseo{
  --ink:#2B2A28; --ink-soft:#5A5751; --cream:#F7F2EA; --sand:#EFE7E1;
  --sage:rgb(143,179,159);       /* brand mint — 2.30:1 with white: DARK surfaces + backgrounds only */
  --sage-dark:rgb(143,179,159);  /* the readable green ON DARK (#next, .next-card, .band) */
  --sage-ink:rgb(74,106,89);     /* the readable green ON LIGHT: 6.01:1 on white, 5.6:1 on cream */
  --rose:#A04858; --hair:#E7E3DD;
  --page:#FBF8F4;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  padding-bottom:1px;   /* contain margins */
}
.bgw-pseo *{box-sizing:border-box}
.bgw-pseo img{max-width:100%;height:auto;display:block}
/* NOTE: :not(.next-card) is load-bearing. This rule is (0,1,1) and beats the
   tool cards' own .next-card{color:rgb(247,242,234)} at (0,1,0), so without the
   exclusion the card's cream text is never applied — the description spans
   inside it inherit this green instead and measure 2.39:1 on the dark ink card.
   It passed before only because the inherited value happened to be the light
   mint; the moment it became a real dark green the bug surfaced. */
.bgw-pseo a:not(.next-card){color:var(--sage-ink);text-decoration:none}
.bgw-pseo a:hover{text-decoration:underline}
.bgw-pseo .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.bgw-pseo h1,.bgw-pseo h2,.bgw-pseo h3,.bgw-pseo h4{
  font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--ink);margin:0}
.bgw-pseo h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.01em}
.bgw-pseo h2{font-size:clamp(1.55rem,2.6vw,2.1rem);margin-bottom:.6rem}
.bgw-pseo h3{font-size:1.3rem}
.bgw-pseo .eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin:0 0 .7rem}
.bgw-pseo .lede{font-size:1.12rem;color:var(--ink-soft);max-width:62ch;margin:.9rem 0 0}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.bgw-pseo .crumbs{background:var(--cream);border-bottom:1px solid var(--hair);
  font-size:.84rem;color:var(--ink-soft);padding:11px 0}
.bgw-pseo .crumbs .wrap{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.bgw-pseo .crumbs a{color:var(--ink-soft)}
.bgw-pseo .crumbs .sep{opacity:.45}

/* ── hero ───────────────────────────────────────────────────────────── */
.bgw-pseo .hero{padding:52px 0 34px;background:#fff;border-bottom:1px solid var(--hair)}
.bgw-pseo .hero .wrap{max-width:820px}
.bgw-pseo .meta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:.85rem;color:var(--ink-soft);margin-top:1.5rem}
.bgw-pseo .meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--hair)}
.bgw-pseo .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.7rem}
.bgw-pseo .btn{display:inline-block;padding:13px 26px;border-radius:2px;font-weight:600;
  font-size:.94rem;transition:.15s;border:0;cursor:pointer}
.bgw-pseo .btn-primary{background:var(--sage);color:var(--ink) !important}
.bgw-pseo .btn-primary:hover{background:var(--sage-ink);text-decoration:none}
.bgw-pseo .btn-ghost{border:1px solid var(--hair);color:var(--ink);background:#fff}
.bgw-pseo .btn-ghost:hover{border-color:var(--ink);text-decoration:none}

/* ── short-answer box ───────────────────────────────────────────────── */
.bgw-pseo .answer{background:var(--cream);border-left:4px solid var(--sage);
  padding:26px 30px;margin:38px 0;border-radius:0 3px 3px 0}
.bgw-pseo .answer .eyebrow{color:var(--sage-ink);margin-bottom:.5rem}
.bgw-pseo .answer p{margin:0;font-size:1.06rem;color:var(--ink)}
.bgw-pseo .answer p + p{margin-top:.7rem}

/* ── table of contents ──────────────────────────────────────────────── */
.bgw-pseo .toc{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:22px 26px;margin:34px 0 0}
.bgw-pseo .toc .eyebrow{margin-bottom:.6rem}
.bgw-pseo .toc ol{margin:0;padding-left:1.15rem;columns:2;column-gap:36px;font-size:.94rem}
.bgw-pseo .toc li{margin-bottom:7px;break-inside:avoid}
.bgw-pseo .toc a{color:var(--ink-soft)}
.bgw-pseo .toc a:hover{color:var(--sage-ink)}

/* ── sections ───────────────────────────────────────────────────────── */
.bgw-pseo .section{padding:44px 0}
.bgw-pseo .section-head{margin-bottom:22px}

/* ── comparison table ───────────────────────────────────────────────── */
.bgw-pseo .table-card{background:#fff;border:1px solid var(--hair);border-radius:4px;overflow:hidden}
.bgw-pseo table{width:100%;border-collapse:collapse;font-size:.94rem}
.bgw-pseo thead th{background:var(--sand);text-align:left;padding:14px 18px;
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft)}
.bgw-pseo tbody td{padding:15px 18px;border-top:1px solid var(--hair);vertical-align:top}
.bgw-pseo tbody tr:hover{background:var(--cream)}
/* Cream is opaque here — but a translucent tint from an outer card can still let
   a DARK row bleed through a dark table. Pin an opaque fill on the cells so the
   row fill is never the thing carrying the colour. (audit check: CREAM HOVER)
   .fd-wrap / tool sheets override this with higher specificity on dark cards. */
.bgw-pseo .table-card tbody tr:hover{background:transparent !important}
.bgw-pseo .table-card tbody tr:hover td{background:rgb(249,246,241) !important}
.bgw-pseo td .pick{font-weight:700}
.bgw-pseo td .sub{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:2px}
.bgw-pseo .price-band{font-weight:700;letter-spacing:.06em;color:var(--sage-ink);white-space:nowrap}
.bgw-pseo .price-band span{color:#6E6A63}   /* the unfilled part of the band: 5.21:1 on white. #8C8781 measured 3.56:1 and failed when the span held 2 chars ("$$") */
.bgw-pseo .price-tier-line{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.bgw-pseo .price-tier-line b{color:var(--sage-ink);font-weight:700;letter-spacing:.05em}
.bgw-pseo .price-tier-line b span{color:#6E6A63}

/* ── product cards ──────────────────────────────────────────────────── */
.bgw-pseo .card{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:26px;margin-bottom:22px;display:grid;grid-template-columns:240px 1fr;
  gap:28px;align-items:start}
.bgw-pseo .card-img{background:var(--cream);border-radius:3px;padding:14px;
  display:flex;align-items:center;justify-content:center;min-height:200px}
.bgw-pseo .card-img img{mix-blend-mode:multiply}
.bgw-pseo .badge{display:inline-block;background:var(--sand);color:var(--ink);
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;margin-bottom:10px}
.bgw-pseo .badge.top{background:var(--sage);color:var(--ink)}
.bgw-pseo .card h3{margin:0 0 6px;font-size:1.55rem}
.bgw-pseo .card .for{font-size:.92rem;color:var(--ink-soft);margin:0 0 14px}
.bgw-pseo .buy-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:14px 0}
.bgw-pseo .live-price{font-size:.85rem;color:var(--ink-soft);display:inline-block;min-height:1.5em}
.bgw-pseo .live-price b{color:var(--ink);font-size:1.02rem}
.bgw-pseo .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:16px 0 0}
.bgw-pseo .pros-cons h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.bgw-pseo .pros-cons ul{margin:0;padding-left:0;list-style:none;font-size:.92rem}
.bgw-pseo .pros-cons li{padding-left:20px;position:relative;margin-bottom:6px;color:var(--ink-soft)}
.bgw-pseo .pros-cons .yes li::before{content:"+";position:absolute;left:2px;color:var(--sage);font-weight:700}
.bgw-pseo .pros-cons .no li::before{content:"\2013";position:absolute;left:3px;color:var(--rose);font-weight:700}
.bgw-pseo .why{margin:16px 0 0;font-size:.96rem;color:var(--ink-soft)}
.bgw-pseo .why strong{color:var(--ink)}
.bgw-pseo .more{font-weight:600;font-size:.9rem}

/* ── method band ────────────────────────────────────────────────────── */
.bgw-pseo .band{background:var(--ink);color:#E8E3DA;padding:56px 0;margin:44px 0}
.bgw-pseo .band h2{color:#fff}
.bgw-pseo .band .lede{color:#B8B2A8}
/* Dark bands: the light mint is the readable one there. Never let a link or an
   eyebrow inside .band inherit the light-surface green. (audit: INVISIBLE TEXT) */
.bgw-pseo .band a,.bgw-pseo .band .eyebrow{color:var(--sage-dark)}

/* Same specificity trap as .next-card above: the global link rule is (0,1,1) and
   beats a dark row's own inherited colour, so a link inside a registry row
   ("Compare double electric pumps") rendered dark green on the dark ink row —
   measured 2.39:1. Defined after the global rule so the tie resolves here.
   (audit: INVISIBLE TEXT) */
.bgw-pseo .reg-item a,
.bgw-pseo .reg-body a,
.bgw-pseo .hbc-row a{color:var(--sage-dark)}
.bgw-pseo .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:26px;margin-top:30px}
.bgw-pseo .step .num{font-family:var(--serif);font-size:1.8rem;color:var(--sage);line-height:1}
.bgw-pseo .step h4{font-family:var(--sans);color:#fff;font-size:.98rem;margin:10px 0 6px}
.bgw-pseo .step p{margin:0;font-size:.9rem;color:#A8A29A;line-height:1.6}

/* ── FAQ accordion (native <details>, no JS) ────────────────────────── */
.bgw-pseo .faq{border-top:1px solid var(--hair)}
.bgw-pseo .faq details{border-bottom:1px solid var(--hair);background:#fff}
.bgw-pseo .faq details[open]{background:var(--cream)}
.bgw-pseo .faq summary{cursor:pointer;padding:20px 56px 20px 0;position:relative;
  font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--ink);
  list-style:none;transition:.15s}
.bgw-pseo .faq summary::-webkit-details-marker{display:none}
.bgw-pseo .faq summary:hover{color:var(--sage-ink)}
.bgw-pseo .faq summary::after{content:"";position:absolute;right:22px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);
  transform:rotate(45deg);transition:transform .22s}
.bgw-pseo .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.bgw-pseo .faq .a{padding:0 60px 24px 0;color:var(--ink-soft);font-size:.98rem}
.bgw-pseo .faq .a p{margin:0 0 .8rem}
.bgw-pseo .faq .a p:last-child{margin-bottom:0}

/* ── related ────────────────────────────────────────────────────────── */
.bgw-pseo .related{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.bgw-pseo .rel-card{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:22px;display:flex;flex-direction:column}
.bgw-pseo .rel-card .eyebrow{margin-bottom:.5rem}
.bgw-pseo .rel-card h4{font-size:1.12rem;margin:0 0 8px}
.bgw-pseo .rel-card p{margin:0 0 14px;font-size:.9rem;color:var(--ink-soft);flex:1}

/* ── the current WP editor content inside a pSEO page ───────────────── */
.bgw-pseo .pseo-body{background:#fff}
.bgw-pseo .pseo-body > *{max-width:1120px;margin-left:auto;margin-right:auto}

@media(max-width:760px){
  .bgw-pseo .card{grid-template-columns:1fr;padding:20px}
  .bgw-pseo .card-img{min-height:170px}
  .bgw-pseo .pros-cons{grid-template-columns:1fr}
  .bgw-pseo .toc ol{columns:1}
}

/* Hero featured image — the template dropped it, so converted pages lost the
   editorial hero shot the old design had. */
.bgw-pseo .hero-img{margin:28px 0 0;border-radius:4px;overflow:hidden;border:1px solid var(--hair);background:var(--cream)}
.bgw-pseo .hero-img img{width:100%;height:auto;display:block}

/* ============================================================================
   FIT CALCULATOR
   Used only by /car-seat-fit-calculator/. Same tokens as everything above —
   no new colours, no new fonts, no new radii. If a value is needed here that
   isn't already in this file, that is a signal the design system is wrong,
   not that this section needs its own palette.
   ========================================================================= */

.bgw-pseo .fit-panel{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:30px 32px;margin-bottom:26px}
.bgw-pseo .fit-field{margin-bottom:22px}
.bgw-pseo .fit-field:last-child{margin-bottom:0}
.bgw-pseo .fit-field label{display:block;font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.bgw-pseo .fit-input-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bgw-pseo .fit-input{width:132px;padding:12px 14px;font-family:var(--sans);
  font-size:1.35rem;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid #D8D3CA;border-radius:3px;font-variant-numeric:tabular-nums}
.bgw-pseo .fit-input:focus{outline:0;border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(143,179,159,.28)}
.bgw-pseo .fit-unit{font-size:.9rem;color:var(--ink-soft)}
.bgw-pseo .fit-presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.bgw-pseo .fit-presets button{font-family:var(--sans);font-size:.82rem;font-weight:600;
  padding:7px 14px;border:1px solid var(--hair);background:var(--sand);
  border-radius:999px;cursor:pointer;color:var(--ink-soft);transition:.13s}
.bgw-pseo .fit-presets button:hover{background:var(--sage);color:var(--ink);border-color:var(--sage)}
.bgw-pseo .fit-presets button.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.bgw-pseo .fit-hint{font-size:.84rem;color:#8A8580;margin:10px 0 0;max-width:60ch}

.bgw-pseo .fit-scale{margin:26px 0 8px}
.bgw-pseo .fit-scale-label{display:flex;justify-content:space-between;
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
.bgw-pseo .fit-track{position:relative;height:52px;background:var(--cream);
  border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.bgw-pseo .fit-fill-zone{position:absolute;inset:0;display:flex}
.bgw-pseo .fit-seat{height:100%;border-right:2px solid #fff;position:relative;
  display:flex;align-items:center;justify-content:center;transition:.28s}
.bgw-pseo .fit-seat:last-child{border-right:0}
.bgw-pseo .fit-seat span{font-size:.66rem;font-weight:700;letter-spacing:.05em;
  color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  padding:0 6px;opacity:.9}
.bgw-pseo .fit-seat.ok{background:var(--sage)}
.bgw-pseo .fit-seat.over{background:var(--rose)}
.bgw-pseo .fit-overflow{position:absolute;top:0;bottom:0;right:0;width:0;
  background:repeating-linear-gradient(45deg,rgba(160,72,88,.34),rgba(160,72,88,.34) 6px,
  rgba(160,72,88,.16) 6px,rgba(160,72,88,.16) 12px);
  border-left:2px dashed var(--rose);transition:.28s}
.bgw-pseo .fit-benchline{position:absolute;top:-1px;bottom:-1px;width:2px;
  background:var(--ink);left:100%;transition:.28s}

.bgw-pseo .fit-verdict{font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,1.6rem);
  font-weight:600;line-height:1.3;margin:22px 0 4px}
.bgw-pseo .fit-verdict.good{color:var(--sage-ink)}
.bgw-pseo .fit-verdict.bad{color:var(--rose)}
.bgw-pseo .fit-sub{font-size:.92rem;color:var(--ink-soft);margin:0 0 4px}

.bgw-pseo .chip{display:inline-block;font-family:var(--sans);font-size:.68rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;
  border-radius:2px;background:var(--sand);color:var(--ink);white-space:nowrap}
.bgw-pseo .chip.ok{background:var(--sage);color:var(--ink)}
.bgw-pseo .chip.warn{background:#E3D3A2;color:#5D4E1F}
.bgw-pseo .chip.bad{background:var(--rose);color:#fff}
.bgw-pseo .chip.grey{background:#EDE9E3;color:#9A948C}
.bgw-pseo tbody tr.is-out td{color:#9A948C}
.bgw-pseo td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bgw-pseo .fit-note{font-size:.86rem;color:#8A8580;margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--hair);max-width:78ch}
.bgw-pseo .fit-note ul{margin:10px 0 0;padding-left:20px}
.bgw-pseo .fit-note li{margin-bottom:5px}
.bgw-pseo .fit-refuse{background:var(--cream);border:1px solid var(--hair);
  border-left:4px solid var(--sand);border-radius:0 3px 3px 0;
  padding:16px 20px;margin-top:20px;font-size:.92rem;color:var(--ink-soft)}
.bgw-pseo .fit-refuse strong{color:var(--ink)}

@media(max-width:760px){
  .bgw-pseo .fit-panel{padding:22px 20px}
  .bgw-pseo .fit-track{height:42px}
  .bgw-pseo .fit-seat span{display:none}
}

/* ---- optional prose section (build.py render_notes) -------------------------
   Escape hatch for content the fixed template has no slot for. Uses the same
   --ink-soft already proven readable elsewhere on these pages. */
.bgw-pseo .notes-body{max-width:72ch}
.bgw-pseo .notes-body p{margin:0 0 1rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.72}
.bgw-pseo .notes-body p:last-child{margin-bottom:0}
.bgw-pseo .notes-body strong{color:var(--ink)}
.bgw-pseo .notes-body ul{margin:0 0 1rem;padding-left:1.2rem;color:var(--ink-soft);line-height:1.7}
.bgw-pseo .notes-body li{margin-bottom:.45rem}
.bgw-pseo .notes-body a{color:var(--sage-ink)}

/* ── comparison tables on small screens ─────────────────────────────────────
   .table-card wraps every comparison table on the site. A 3–5 column table
   cannot fit a phone, and horizontal scrolling reads as "broken" — a column is
   simply cut off with no sign it moves.

   So under 782px each ROW becomes a card and each cell prints its column
   heading. The heading text comes from data-label, added at render time by
   mu-plugins/bgw-responsive-tables.php (and by label-exported-tables.py for the
   static export) — CSS cannot read the <thead>.

   !important on overflow is required: the tool pages carry
   `#skip .table-card { overflow: hidden }`, an ID selector (1,1,0) that beats
   `.bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper` (0,2,0) whatever the file order. Verified 2026-10-05. */
.bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper { overflow-x: visible !important; max-width: 100%; }

  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper table,
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper thead,
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tbody,
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tr,
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper th,
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper td { display: block; width: 100%; }

  /* headings move into the cells */
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper thead { display: none; }

  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tbody tr {
    background: #fff;
    border: 1px solid var(--hair, #e6e0d6);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px 0;
  }

  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 7px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    flex: 0 0 46%;
    opacity: .88;
  }
  /* no label for cells that carry none */
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tbody td:not([data-label])::before { content: none; }

  /* the first cell is the row's own name — make it the card heading */
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tbody td:first-child {
    display: block;
    text-align: left;
    font-weight: 700;
    font-size: 1.04em;
    border-bottom: 1px solid var(--hair, #e6e0d6);
    padding: 0 0 10px 0;
    margin: 0 0 4px 0;
  }
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper tbody td:first-child::before { content: none; }
}