/* =========================================================
   ReadyM8 — Blog
   Soft-brutalist article layout built on styles.css tokens.
   Loaded AFTER styles.css, so it reuses :root vars, .btn,
   .section, .eyebrow, .faq, .nav and .site-footer.

   Two page types share this file:
     /blog/            the index      -> .blog-hero, .blog-grid
     /blog/<slug>      an article     -> .post-*, .prose
   ========================================================= */

/* ---------------------------------------------------------
   INDEX: hero
   --------------------------------------------------------- */
.blog-hero{padding-top:40px;padding-bottom:8px}
.blog-h1{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(34px,10vw,58px);line-height:.96;letter-spacing:-1.4px;
  text-transform:uppercase;margin-bottom:16px;
}
.blog-lead{font-size:17px;line-height:1.5;font-weight:500;max-width:620px}

/* ---------------------------------------------------------
   INDEX: post cards
   The whole card is a link. The border/shadow lift on hover is
   the same "physical button" language as .btn, so the grid feels
   like the rest of the site rather than a bolted-on blog theme.
   --------------------------------------------------------- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:34px}

.blog-card{
  display:flex;flex-direction:column;
  background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .06s ease, box-shadow .06s ease;
}
.blog-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.blog-card:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.blog-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* Ratio matches the generated hero art (1200x630) so nothing crops oddly. */
.blog-card-media{
  width:100%;aspect-ratio:1200/630;overflow:hidden;
  background:var(--paper-2);border-bottom:3px solid var(--ink);
}
.blog-card-media img{width:100%;height:100%;object-fit:cover}

.blog-card-body{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1}
.blog-card-tag{
  align-self:flex-start;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:5px 9px;
  border:2.5px solid var(--ink);border-radius:6px;margin-bottom:13px;
}
.blog-card h2{
  font-weight:900;font-size:22px;line-height:1.08;letter-spacing:-.5px;
  text-transform:uppercase;margin-bottom:9px;
}
.blog-card p{font-size:15.5px;font-weight:500;margin-bottom:16px}
.blog-card-more{
  margin-top:auto;font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.4px;
}
.blog-card:hover .blog-card-more{text-decoration:underline;text-decoration-thickness:2.5px}

/* First card runs full width from 680px up and gets the yellow treatment: it is
   the page we most want read, and a lead slot is cheaper than teaching people a
   sort order. */
.blog-card--lead{background:var(--yellow)}

/* ---------------------------------------------------------
   ARTICLE: head
   --------------------------------------------------------- */
.post-head{padding-top:34px;padding-bottom:0}
.post-kicker{
  font-weight:800;font-size:12px;letter-spacing:1.4px;
  background:var(--blue);color:#fff;display:inline-block;
  padding:6px 11px;border:2.5px solid var(--ink);border-radius:6px;
  margin-bottom:16px;text-transform:uppercase;
  font-family:'Archivo',system-ui,sans-serif;
}
.post-h1{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(31px,8.4vw,52px);line-height:.98;letter-spacing:-1.4px;
  text-transform:uppercase;margin-bottom:18px;max-width:19ch;
}
.post-standfirst{
  font-size:18px;line-height:1.5;font-weight:600;max-width:64ch;margin-bottom:22px;
}

/* Byline strip. Dotted rule rather than solid so it reads as metadata and does
   not compete with the 3px structural borders used everywhere else. */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;
  font-size:13.5px;font-weight:700;
  padding:14px 0;border-top:2.5px dotted rgba(17,17,17,.32);
  border-bottom:2.5px dotted rgba(17,17,17,.32);
}
.post-meta-dot{opacity:.4;font-weight:400}
.post-meta .post-meta-badge{
  background:var(--yellow);border:2px solid var(--ink);border-radius:5px;
  padding:2px 7px;font-size:12px;letter-spacing:.2px;
}

/* ---------------------------------------------------------
   ARTICLE: hero figure + inline figures
   --------------------------------------------------------- */
.post-figure{margin:26px 0 0}
.post-figure-frame{
  width:100%;aspect-ratio:1200/630;overflow:hidden;background:var(--paper-2);
  border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
.post-figure-frame img{width:100%;height:100%;object-fit:cover}
.post-figure figcaption,.post-figure-cap{
  font-size:13.5px;font-weight:600;opacity:.75;margin-top:11px;max-width:60ch;
}
.prose .post-figure{margin:34px 0}

/* ---------------------------------------------------------
   ARTICLE: contents box
   --------------------------------------------------------- */
.post-toc{
  background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;margin:32px 0 0;max-width:60ch;
}
.post-toc h2{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:14px;
  letter-spacing:1.2px;text-transform:uppercase;margin-bottom:12px;
}
.post-toc ol{list-style:none;counter-reset:toc;display:grid;gap:8px}
.post-toc li{counter-increment:toc;padding-left:30px;position:relative;font-size:15.5px;font-weight:600}
.post-toc li::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:13px;
  opacity:.45;
}
.post-toc a{text-decoration:none;border-bottom:2px solid rgba(17,17,17,.25)}
.post-toc a:hover{border-bottom-color:var(--ink)}

/* ---------------------------------------------------------
   ARTICLE: prose
   65ch keeps the measure readable. Tables, figures and callouts
   deliberately break out wider via .prose > .wide.
   --------------------------------------------------------- */
/* The container is deliberately unconstrained and the MEASURE is applied to the
   text children only. That lets tables, callouts and verdict grids run the full
   820px column while paragraphs stay at a readable 65ch. Setting max-width on
   .prose itself squeezed every table to the text measure. */
.prose{max-width:none;margin-top:36px}
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > blockquote{max-width:62ch}

.prose p{font-size:17px;line-height:1.62;font-weight:500;margin-bottom:20px}
.prose > h2{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(25px,5.6vw,32px);line-height:1.06;letter-spacing:-.9px;
  text-transform:uppercase;margin:46px 0 16px;
}
/* Yellow underscore under every H2. Cheap, on-brand, and it gives a long
   article a scannable rhythm without another boxed component. */
.prose > h2::after{
  content:"";display:block;width:62px;height:7px;background:var(--yellow);
  border:2.5px solid var(--ink);border-radius:4px;margin-top:12px;
}
.prose > h3{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:20px;line-height:1.15;letter-spacing:-.3px;
  margin:32px 0 10px;
}
.prose h2:first-child,.prose h3:first-child{margin-top:0}

.prose a{
  font-weight:700;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:2px;
}
.prose a:hover{background:var(--yellow)}
/* Buttons inside prose are buttons, not links. `.prose a` (0-1-1) beats `.btn`
   (0-1-0) on text-decoration, so they rendered underlined; and the generic
   link hover repainted the white button yellow. Restore button behaviour. */
.prose a.btn{text-decoration:none}
.prose a.btn-y:hover{background:var(--yellow)}
.prose a.btn-w:hover{background:var(--white)}

.prose strong{font-weight:700}

.prose ul,.prose ol{margin:0 0 22px;padding-left:0;list-style:none;display:grid;gap:11px}
.prose li{font-size:17px;line-height:1.55;font-weight:500;padding-left:28px;position:relative}
.prose ul > li::before{
  content:"";position:absolute;left:2px;top:9px;
  width:10px;height:10px;background:var(--yellow);
  border:2.5px solid var(--ink);border-radius:3px;
}
.prose ol{counter-reset:pl}
.prose ol > li{counter-increment:pl}
.prose ol > li::before{
  content:counter(pl);position:absolute;left:0;top:0;
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:15px;
}
.prose li > ul,.prose li > ol{margin:11px 0 0}

.prose blockquote{
  margin:26px 0;padding:4px 0 4px 20px;border-left:6px solid var(--yellow);
  font-size:18px;font-weight:600;line-height:1.5;
}
.prose blockquote p:last-child{margin-bottom:0}

.prose hr{
  border:none;height:3px;background:var(--ink);opacity:.15;
  margin:40px 0;max-width:65ch;
}

/* ---------------------------------------------------------
   ARTICLE: tables
   Tables are the snippet surface for comparison queries, so they
   get real design rather than browser defaults. They also have to
   survive a 360px phone, hence the scroll shell.
   --------------------------------------------------------- */
.table-wrap{
  margin:30px 0;overflow-x:auto;overscroll-behavior-x:contain;
  border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);background:var(--white);
  -webkit-overflow-scrolling:touch;
}
.table-wrap:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px}
.table-wrap caption{
  caption-side:top;text-align:left;padding:14px 16px 0;
  font-size:13.5px;font-weight:700;opacity:.75;
}
.table-wrap th,.table-wrap td{
  padding:13px 15px;text-align:left;font-size:15px;font-weight:500;
  border-bottom:2.5px solid rgba(17,17,17,.16);
  border-right:2.5px solid rgba(17,17,17,.16);
  vertical-align:top;
}
.table-wrap th:last-child,.table-wrap td:last-child{border-right:none}
.table-wrap thead th{
  background:var(--ink);color:var(--paper);
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;
  border-right-color:rgba(245,241,230,.22);border-bottom:none;
}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:none}
.table-wrap tbody th{
  font-weight:700;background:var(--paper-2);
  font-size:14.5px;white-space:nowrap;
}
/* Highlight column for the "this is the one" cell in a comparison. */
.table-wrap .is-win{background:rgba(255,226,75,.42);font-weight:700}
.table-scroll-hint{
  font-size:12.5px;font-weight:600;opacity:.6;margin:-20px 0 30px;
}
@media (min-width:820px){.table-scroll-hint{display:none}}

/* ---------------------------------------------------------
   ARTICLE: callouts
   --------------------------------------------------------- */
.callout{
  background:var(--yellow);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:22px 20px;margin:32px 0;
}
.callout-head{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:19px;line-height:1.12;letter-spacing:-.3px;margin-bottom:9px;
  text-transform:uppercase;
}
.callout p{font-size:15.5px;font-weight:500;line-height:1.55;margin-bottom:12px}
.callout p:last-child{margin-bottom:0}
.callout a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.callout a:hover{background:var(--white)}

/* Dark variant for the "be careful" notes, so a page can carry two callouts
   without them blurring into one another. */
.callout--dark{background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 rgba(255,226,75,.3)}
.callout--dark .callout-head{color:var(--white)}
.callout--dark strong{color:var(--white)}
.callout--dark a{color:var(--yellow)}
.callout--dark a:hover{background:transparent;color:var(--white)}

.callout--plain{background:var(--white)}

/* ---------------------------------------------------------
   ARTICLE: verdict cards (who should pick what)
   --------------------------------------------------------- */
.verdict{display:grid;grid-template-columns:1fr;gap:16px;margin:30px 0}
.verdict-card{
  background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;
}
.verdict-card h3{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:17px;
  text-transform:uppercase;letter-spacing:-.2px;margin-bottom:9px;
}
.verdict-card p{font-size:15px;font-weight:500;line-height:1.55;margin:0}
.verdict-card ul{margin:0;display:grid;gap:8px;list-style:none;padding:0}
.verdict-card li{font-size:15px;font-weight:500;padding-left:24px;position:relative;line-height:1.5}
.verdict-card li::before{
  content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  background:var(--yellow);border:2.5px solid var(--ink);border-radius:3px;
}
/* On the yellow card a yellow bullet reads as an empty outline, so flip it to
   white to keep the same "filled marker" weight as the card next to it. */
.verdict-card--hi{background:var(--yellow)}
.verdict-card--hi li::before{background:var(--white)}

/* ---------------------------------------------------------
   ARTICLE: closing CTA
   --------------------------------------------------------- */
.post-cta{
  background:var(--ink);color:var(--paper);
  border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:6px 6px 0 rgba(255,226,75,.3);
  padding:30px 22px;margin:46px 0 0;
}
.post-cta h2{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(24px,5.6vw,32px);line-height:1.04;letter-spacing:-.8px;
  text-transform:uppercase;color:var(--white);margin-bottom:12px;
}
.post-cta p{font-size:16px;font-weight:500;line-height:1.55;color:#EDE7D6;margin-bottom:16px}
.post-cta strong{color:var(--white)}
.post-cta-row{display:flex;flex-direction:column;gap:13px;margin-top:22px}
.post-cta-note{font-size:12.5px;font-weight:400;line-height:1.55;opacity:.62;margin-top:18px;margin-bottom:0}

/* ---------------------------------------------------------
   ARTICLE: author block + related posts
   --------------------------------------------------------- */
.post-author{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--paper-2);border:3px solid var(--ink);border-radius:var(--radius);
  padding:20px;margin:40px 0 0;box-shadow:var(--shadow);
}
.post-author .brand-sq{width:44px;height:44px;font-size:16px}
.post-author p{font-size:15px;font-weight:500;line-height:1.55;margin:0}
.post-author strong{font-weight:700}

.post-related{margin-top:46px}
.post-related h2{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:15px;
  letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px;
}
.post-related-list{display:grid;grid-template-columns:1fr;gap:14px}
.post-related-list a{
  display:block;background:var(--white);border:3px solid var(--ink);
  border-radius:12px;padding:16px 18px;text-decoration:none;
  box-shadow:var(--shadow);font-weight:700;font-size:16px;line-height:1.3;
  transition:transform .06s ease, box-shadow .06s ease;
}
.post-related-list a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:var(--yellow)}
.post-related-list a:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.post-related-list span{
  display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:11px;letter-spacing:1.1px;text-transform:uppercase;opacity:.55;margin-bottom:5px;
}

/* Breadcrumb, small and unobtrusive above the article title. */
.crumbs{font-size:13px;font-weight:700;margin-bottom:16px}
.crumbs a{text-decoration:none;border-bottom:2px solid rgba(17,17,17,.28)}
.crumbs a:hover{border-bottom-color:var(--ink)}
.crumbs span{opacity:.45;margin:0 7px}

/* The article FAQ reuses .faq / .faq-item from styles.css. It only needs a
   heading rhythm that matches .prose > h2. */
.post-faq{margin-top:46px}
.post-faq > h2{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(25px,5.6vw,32px);line-height:1.06;letter-spacing:-.9px;
  text-transform:uppercase;margin-bottom:20px;
}
.post-faq > h2::after{
  content:"";display:block;width:62px;height:7px;background:var(--yellow);
  border:2.5px solid var(--ink);border-radius:4px;margin-top:12px;
}

/* =========================================================
   TABLET  (>=680px)
   ========================================================= */
@media (min-width:680px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-card--lead{grid-column:1 / -1}
  .blog-card--lead .blog-card-media{aspect-ratio:1200/500}
  .blog-card--lead h2{font-size:27px}

  .verdict{grid-template-columns:1fr 1fr}
  .post-cta-row{flex-direction:row}
  .post-cta-row .btn{flex:1}
  .post-related-list{grid-template-columns:1fr 1fr}
  .post-standfirst{font-size:19px}
  .prose p,.prose li{font-size:17.5px}
}

/* =========================================================
   DESKTOP  (>=920px)
   ========================================================= */
@media (min-width:920px){
  .blog-hero{padding-top:56px}
  .blog-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  /* Lead card becomes a two-column banner: art left, words right. */
  .blog-card--lead{
    display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  }
  .blog-card--lead .blog-card-media{
    aspect-ratio:auto;height:100%;border-bottom:none;border-right:3px solid var(--ink);
  }
  .blog-card--lead .blog-card-body{padding:32px 30px}
  .blog-card--lead h2{font-size:31px}
  .blog-card--lead p{font-size:16.5px}

  .post-head{padding-top:52px}
  .post-figure{margin-top:32px}
  .prose{margin-top:44px}
  .post-cta{padding:40px 34px}
  .verdict{gap:18px}

  /* The article column sits left with room to breathe rather than centred in a
     1120px shell, which left the measure floating. Figures and tables still run
     to the full 760px column. */
  .post-shell{max-width:820px;margin-left:auto;margin-right:auto}
}

/* =========================================================
   WIDE  (>=1180px)
   ========================================================= */
@media (min-width:1180px){
  .post-h1{font-size:58px}
}

@media (prefers-reduced-motion:reduce){
  .blog-card,.post-related-list a{transition:none}
  .blog-card:hover,.post-related-list a:hover{transform:none}
}

/* Print: strip the furniture, keep the words. Someone will print the pricing
   article to argue with their accountant. */
@media print{
  .nav,.ticker,.site-footer,.post-cta,.post-related,.post-toc{display:none}
  .prose{max-width:none}
  .table-wrap{box-shadow:none;overflow:visible}
  .post-figure-frame{box-shadow:none}
}

/* ---------------------------------------------------------
   CONVERSION: mid-article CTA
   The end-of-post CTA only catches finishers. This one sits
   after the highest-intent section so a reader who has just
   worked out the cost can act on it without scrolling on.
   Yellow band, same "physical" language as .btn.
   --------------------------------------------------------- */
.cta-inline{
  background:var(--yellow);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:24px 22px;margin:38px 0;
}
.cta-inline-head{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(20px,4.6vw,25px);line-height:1.08;letter-spacing:-.5px;
  text-transform:uppercase;margin-bottom:10px;
}
/* Also specificity-matched against `.prose p` (0-1-1). */
.prose .cta-inline p,.cta-inline p{font-size:15.5px;font-weight:500;line-height:1.55;margin-bottom:16px;max-width:none}
.cta-inline p:last-of-type{margin-bottom:18px}
.cta-inline .btn{font-size:15px;padding:14px 20px}

/* Price chips: the three packages at a glance, so the offer is concrete at the
   point of decision rather than one click away.

   ⚠️ These MUST be written as `.prose .cta-prices ...`. Inside an article this
   list sits under `.prose ul` (0-1-1) and `.prose ul > li::before` (0-1-3), and
   a bare `.cta-prices` (0-1-0) / `.cta-prices li::before` (0-1-2) LOSES to both.
   Written bare, the chips inherited the yellow square body bullet and stacked
   full width as a grid. Same cascade trap as `.rebate p:not(.eyebrow)` in
   styles.css. Match the specificity, do not simplify. */
.prose .cta-prices,.cta-prices{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;padding:0;list-style:none;
}
.prose .cta-prices li,.cta-prices li{
  background:var(--white);border:2.5px solid var(--ink);border-radius:9px;
  padding:8px 12px;font-size:14px;font-weight:700;line-height:1.3;
  box-shadow:2.5px 2.5px 0 var(--ink);position:static;
}
.prose .cta-prices > li::before,.cta-prices li::before{content:none;display:none}
.cta-prices b{font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:16px}
.cta-inline-row{display:flex;flex-direction:column;gap:12px}

@media (min-width:680px){
  .cta-inline{padding:28px 26px}
  .cta-inline-row{flex-direction:row;align-items:center}
  .cta-inline-row .btn{flex:0 0 auto}
}

/* A quieter one-line nudge for use between sections. */
.prose p.cta-line,.cta-line{
  border-left:6px solid var(--yellow);padding:2px 0 2px 18px;margin:26px 0;
  font-size:16.5px;font-weight:600;line-height:1.5;
}
.cta-line a{text-decoration:underline;text-decoration-thickness:2px}

/* =========================================================
   READING TREATMENT  (owner feedback, 2026-08-17)
   "everything jumps right in your eyes... for reading articles
   it may not be very pleasant."

   Soft brutalism is built for short, loud bursts. Over 3,000 words
   it fatigues. So the brand chrome stays exactly as it was (nav,
   ticker, footer, cards, tables, callouts, CTAs, art) and ONLY the
   reading column is calmed:
     - headings drop ALL CAPS to sentence case, which is the single
       biggest change; uppercase Archivo 900 every few hundred words
       reads as shouting
     - body drops from weight 500 to 400 and gains line-height
     - body ink warms slightly off pure black to cut glare on cream
     - the yellow H2 marker shrinks from a slab to a rule
   Appended last on purpose: every rule here is specificity-matched
   to the one it overrides, so source order decides. Delete this
   block to restore the original treatment exactly.
   ========================================================= */

/* --- article headline: sentence case, a touch smaller --- */
.post-h1{
  text-transform:none;
  font-size:clamp(30px,7.2vw,44px);
  letter-spacing:-1.1px;
  line-height:1.04;
  max-width:24ch;
}
.post-standfirst{font-weight:500;font-size:18px;line-height:1.55;opacity:.92}

/* --- body copy: lighter, airier, warmer ---
   ⚠️ DIRECT CHILDREN ONLY. Written as `.prose p` this rule reached the
   paragraphs INSIDE `.callout--dark`, repainting them #26231d on the #111
   band at 1.21:1, i.e. invisible. Components own their own colour and size;
   the reading treatment is for the article's own prose. Do not loosen these
   selectors. */
.prose > p,.prose > ul > li,.prose > ol > li{
  font-weight:400;
  font-size:17.5px;
  line-height:1.72;
  color:#26231d;          /* warm near-black. ~13.9:1 on the cream, well past AA */
}
.prose > p{margin-bottom:22px}
.prose > p > strong,.prose > ul > li > strong,.prose > ol > li > strong{
  font-weight:700;color:var(--ink);
}

/* --- section headings: sentence case, smaller step, quieter marker --- */
.prose > h2{
  text-transform:none;
  font-size:clamp(23px,4.4vw,28px);
  letter-spacing:-.5px;
  line-height:1.15;
  margin:52px 0 14px;
}
.prose > h2::after{
  width:40px;height:5px;border-width:2px;margin-top:14px;
}
.prose > h3{
  text-transform:none;
  font-size:18.5px;
  letter-spacing:-.1px;
  margin:34px 0 8px;
}

/* --- the calmer measure that goes with 17.5px/1.72 --- */
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > blockquote{max-width:64ch}

/* --- supporting components keep their shape but stop shouting --- */
.post-faq > h2{
  text-transform:none;
  font-size:clamp(23px,4.4vw,28px);
  letter-spacing:-.5px;
}
.post-faq > h2::after{width:40px;height:5px;border-width:2px}
.callout-head{text-transform:none;font-size:18px;letter-spacing:-.2px}
.cta-inline-head{text-transform:none;letter-spacing:-.3px}
.verdict-card h3{text-transform:none;font-size:18px;letter-spacing:-.2px}
.post-cta h2{text-transform:none;letter-spacing:-.5px}

@media (min-width:680px){
  .prose > p,.prose > ul > li,.prose > ol > li{font-size:18px}
  .post-standfirst{font-size:19px}
}

/* --- index: same calming, so the whole blog reads as one quieter zone ---
   The marketing pages keep their uppercase Archivo. The blog is where people
   read, so sentence case is the signal that the register has changed. */
.blog-h1{
  text-transform:none;
  font-size:clamp(32px,7.6vw,48px);
  letter-spacing:-1.2px;
  line-height:1.02;
  max-width:20ch;
}
.blog-lead{font-weight:400;font-size:17.5px;line-height:1.65;color:#26231d}
.blog-card h2{
  text-transform:none;
  letter-spacing:-.4px;
  font-size:21px;
  line-height:1.14;
}
.blog-card p{font-weight:400;color:#26231d;line-height:1.6}
.blog-card--lead p{color:var(--ink)}

@media (min-width:920px){
  .blog-card--lead h2{font-size:29px}
}