/* rlc-article-next.css, direction B "Editorial magazine". Loaded after rlc-article.css.
   One tint (#EFF6FC) carries the rhythm: hero band, key facts, figure panel, end band. Lines are kept for
   the table and the FAQ only. Refs: Psyche (tinted fold), Parsley (left rail), Aeon (boxless pull quote),
   Every (serif H2 at ~2x body), Notion (tinted figure panels). */

main.rlc-article{
  --col:34em; --body-lh:1.7; --tint:#EFF6FC; --tint-2:#E9F3FB; --page:#FBFEFF;
  --break:0px;                 /* how far figures and the table run past the text column, set per width */
  --h2:1.75rem;                /* 28px phone */
}
@media (min-width:900px){ main.rlc-article{--h2:2.25rem; --body-lh:1.7} }      /* 36px desktop, body 18 */
@media (min-width:1200px){ main.rlc-article{--break:232px} }

/* ---------- hero band (Psyche: tinted fold, four items, nothing else) ---------- */
main.rlc-article .hero-band{background:var(--tint)}
main.rlc-article .hero-band .crumbs{padding-top:20px}
main.rlc-article .hero{padding-block:12px 36px}
main.rlc-article .hero-text{gap:18px}
main.rlc-article .hero h1{font-size:2.25rem; line-height:1.06; letter-spacing:-.005em; max-width:16em}
main.rlc-article .lead-text{font-size:1.125rem; line-height:1.6; color:var(--ink)}
main.rlc-article .byline{display:block}
main.rlc-article .byline .person{display:flex; align-items:center; gap:12px; font:400 var(--ui-s)/1.45 var(--sans); color:var(--muted)}
main.rlc-article .byline .person b{display:inline; font-weight:600; color:var(--ink)}
main.rlc-article .byline .avatar{flex:none; background:var(--page)}
main.rlc-article .byline-meta{margin-top:6px; padding-left:52px; font:400 var(--ui-s)/1.45 var(--sans); color:var(--muted); display:flex; gap:6px 16px; flex-wrap:wrap}
main.rlc-article .byline-meta .updated{font-weight:400; color:var(--muted)}
main.rlc-article .hero-soft{align-self:flex-start; font:600 var(--ui-m)/1.4 var(--sans); color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--underline); min-height:44px; display:inline-flex; align-items:center}
main.rlc-article .hero-soft:hover{text-decoration-color:var(--ink)}
main.rlc-article .hero-cover{display:none}

@media (min-width:900px){
  main.rlc-article .hero-band .crumbs{padding-top:40px}
  main.rlc-article .hero{padding-block:24px 80px}
  main.rlc-article .hero-row{gap:64px; align-items:center}
  main.rlc-article .hero-text{grid-column:1 / span 7; gap:28px}
  main.rlc-article .hero h1{font-size:3.5rem; line-height:1.03}
  main.rlc-article .lead-text{font-size:1.25rem; max-width:30em}
  main.rlc-article .hero-text .byline{margin-top:4px; padding-top:0}
  /* image as a calm framed panel: page-coloured mat on the tint, Notion-style figure ground */
  main.rlc-article .hero-cover{display:block; grid-column:8 / -1; aspect-ratio:4/5; padding:14px; background:var(--page); border-radius:28px}
  main.rlc-article .hero-cover .cover-img{position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:cover; border-radius:16px}
}
@media (min-width:1200px){
  main.rlc-article .hero h1{font-size:4rem; line-height:1.02}
}

/* ---------- grid: quiet left rail (Parsley), text column, room on the right for breakouts ---------- */
main.rlc-article .article-grid{padding-top:32px}
@media (min-width:1200px){
  main.rlc-article .article-grid{grid-template-columns:232px 64px var(--col) minmax(0,1fr); column-gap:0; padding-top:72px}
  main.rlc-article .prose{grid-column:3}
}
@media (min-width:900px) and (max-width:1199px){
  main.rlc-article .article-grid{padding-top:56px}
}

main.rlc-article .rail{top:32px}
main.rlc-article .rail-title{font:600 var(--ui-s)/1.4 var(--sans); color:var(--ink)}
main.rlc-article .rail > ol{list-style:none; margin-top:16px; display:grid; gap:18px}
main.rlc-article .toc-label{display:block; font:500 var(--ui-xs)/1.4 var(--sans); color:var(--muted); margin-bottom:6px}
main.rlc-article .rail .toc-group ol{list-style:none; display:grid}
main.rlc-article .rail .toc-group a{padding:6px 0 6px 14px; font:500 var(--ui-s)/1.4 var(--sans); color:var(--muted); border-left:2px solid var(--rule)}
main.rlc-article .rail .toc-group a:hover{color:var(--ink)}
main.rlc-article .rail .toc-group a[aria-current]{color:var(--ink); font-weight:600; border-left-color:var(--ink)}
main.rlc-article .rail a.rail-team{display:inline-block; margin-top:28px; padding:0; border:0; font:500 var(--ui-s)/1.4 var(--sans); color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--underline)}

/* ---------- body ---------- */
main.rlc-article .prose > p{color:var(--text)}
main.rlc-article .prose > h2{font-size:var(--h2); line-height:1.1; margin-top:48px; margin-right:0; max-width:18em; color:var(--ink)}
main.rlc-article .prose > h2 + *{margin-top:16px}
@media (min-width:900px){
  main.rlc-article .prose > h2{margin-top:64px; line-height:1.08}
  main.rlc-article .prose > * + *{margin-top:20px}
}

/* key facts: the one tinted callout after the lead (Hinge "Key takeaways", flattened) */
main.rlc-article .keyfacts{background:var(--tint); border-radius:20px; padding:22px 22px 24px; margin-top:28px !important}
main.rlc-article .prose > .keyfacts h2.kf-title{font:600 var(--ui-m)/1.4 var(--sans); color:var(--ink); margin:0}
main.rlc-article .keyfacts ul{list-style:none; margin-top:12px; display:grid; gap:10px}
main.rlc-article .keyfacts li{position:relative; padding-left:22px; font-size:var(--ui-m); line-height:1.55; color:var(--ink)}
main.rlc-article .keyfacts li::before{content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--ink)}
@media (min-width:900px){ main.rlc-article .keyfacts{padding:28px 32px 30px} main.rlc-article .keyfacts li{font-size:1.0625rem} }

/* phone TOC, one collapsed block after the key facts */
main.rlc-article .toc-inline{margin-top:24px !important; padding:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
main.rlc-article .toc-inline summary{min-height:52px; display:flex; align-items:center; justify-content:space-between; font:600 var(--ui-m)/1.4 var(--sans); color:var(--ink); cursor:pointer; list-style:none}
main.rlc-article .toc-inline summary::-webkit-details-marker{display:none}
main.rlc-article .toc-inline > ol{list-style:none; border:0; margin:0 0 12px; display:grid; gap:14px}
main.rlc-article .toc-inline .toc-group ol{list-style:none; border:0; margin:0}
main.rlc-article .toc-inline .toc-group a{min-height:44px; padding-block:10px; border-bottom:0; font:500 var(--ui-m)/1.4 var(--sans)}
main.rlc-article .toc-inline .toc-group a::after{content:none}

/* ---------- breakouts: table and figure run wider than the text (Notion figure panels) ---------- */
main.rlc-article .prose > .table-wrap.legal, main.rlc-article .prose > .photo{margin-right:calc(-1 * var(--break)); margin-top:40px; margin-bottom:12px}

main.rlc-article .legal table{width:100%; border-collapse:collapse; table-layout:fixed; font:400 var(--ui-m)/1.55 var(--sans); color:var(--text)}
main.rlc-article .legal caption{caption-side:top; text-align:left; font:600 var(--ui-m)/1.4 var(--sans); color:var(--ink); padding-bottom:12px}
main.rlc-article .legal th{font-weight:600; color:var(--ink); text-align:left; padding:0 20px 12px 0; border-bottom:1px solid var(--ink); vertical-align:bottom}
main.rlc-article .legal td{padding:16px 24px 16px 0; border-bottom:1px solid var(--rule); vertical-align:top}
main.rlc-article .legal td:first-child{font-weight:600; color:var(--ink)}
main.rlc-article .legal th:nth-child(1){width:22%} main.rlc-article .legal th:nth-child(2), main.rlc-article .legal th:nth-child(3){width:39%}
main.rlc-article .legal th:last-child, main.rlc-article .legal td:last-child{padding-right:0}
@media (max-width:639px){
  main.rlc-article .legal thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  main.rlc-article .legal table, main.rlc-article .legal tbody, main.rlc-article .legal tr, main.rlc-article .legal td{display:block; width:auto}
  main.rlc-article .legal caption{display:block}
  main.rlc-article .legal tr{background:var(--tint); border-radius:16px; padding:16px 18px; margin-bottom:12px}
  main.rlc-article .legal td{border:0; padding:0}
  main.rlc-article .legal td:first-child{font-size:1.0625rem; line-height:1.4; margin-bottom:10px}
  main.rlc-article .legal td + td{margin-top:10px}
  main.rlc-article .legal td + td::before{content:attr(data-label); display:block; font:500 var(--ui-xs)/1.4 var(--sans); color:var(--muted); margin-bottom:2px}
}

main.rlc-article .prose > .photo{background:var(--tint); border-radius:24px; padding:16px 16px 14px}
main.rlc-article .prose > .photo img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px}
main.rlc-article .prose > .photo figcaption{margin-top:12px; font:400 var(--ui-s)/1.45 var(--sans); color:var(--muted); padding-inline:4px}
@media (min-width:900px){ main.rlc-article .prose > .photo{padding:24px 24px 18px} main.rlc-article .prose > .photo img{aspect-ratio:21/9} }

/* ---------- the risk: one oversized pull quote, no box, hanging mark, breaking right (Aeon) ---------- */
main.rlc-article .prose > .pull-b{margin:48px 0 40px; margin-right:calc(-1 * var(--break)); position:relative}
main.rlc-article .pull-b blockquote{margin:0; padding:0; border:0}
main.rlc-article .pull-b p{font-family:var(--display); font-weight:400; font-size:2rem; line-height:1.12; color:var(--ink); text-wrap:balance; text-indent:-.42em}
main.rlc-article .pull-b p::before{content:"\201C"}
main.rlc-article .pull-b p::after{content:"\201D"}
main.rlc-article .pull-b figcaption{margin-top:18px; font:500 var(--ui-s)/1.45 var(--sans); color:var(--muted)}
@media (min-width:900px){
  main.rlc-article .prose > .pull-b{margin-block:80px 72px}
  main.rlc-article .pull-b p{font-size:3.25rem; line-height:1.06}
  main.rlc-article .pull-b figcaption{margin-top:24px}
}
@media (min-width:1200px){
  main.rlc-article .pull-b p{font-size:3.75rem; line-height:1.04}
}

/* in-text invitation after "When to get help": a plain line, ink link, no icon box */
main.rlc-article .cta-line{margin-top:28px !important; padding:20px 0 0; border-top:1px solid var(--rule); font-size:var(--ui-m); color:var(--text)}
main.rlc-article .cta-line a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

/* FAQ */
main.rlc-article .faq-q{min-height:60px; font-size:1.0625rem}

/* sources visible as a list, disclaimer readable, three related reads */
main.rlc-article .sources-b{margin-top:56px !important; border-top:0}
main.rlc-article .prose > .sources-b h2.src-title{font:600 var(--ui-m)/1.4 var(--sans); color:var(--ink); margin:0}
main.rlc-article .sources-b ol{margin-top:12px; padding-bottom:0}
main.rlc-article .disclaimer{font:400 var(--ui-s)/1.5 var(--sans); color:var(--muted); margin-top:28px !important}
main.rlc-article .related{margin-top:56px !important}
main.rlc-article .related h2{font:600 var(--ui-m)/1.4 var(--sans); color:var(--ink)}
main.rlc-article .related ul{margin-top:8px}
main.rlc-article .related li + li{border-top:1px solid var(--rule)}
main.rlc-article .related a{grid-template-columns:1fr 112px; padding-block:16px; font-size:var(--ui-m)}
main.rlc-article .related img{width:112px; aspect-ratio:16/10; border-radius:10px}

/* ---------- end band: editorial, one action, framed photo echoing the hero ---------- */
main.rlc-article .cta-end{background:var(--tint); border-radius:28px; margin-bottom:64px}
main.rlc-article .cta-end-copy{gap:16px; padding:28px 22px 32px}
main.rlc-article .cta-end h2{font-size:2.125rem; line-height:1.06; color:var(--ink)}
main.rlc-article .cta-end p{font-size:var(--ui-m); line-height:1.65; max-width:32em}
main.rlc-article .cta-end-photo{padding:12px 12px 0}
main.rlc-article .cta-end-photo img{border-radius:18px; aspect-ratio:16/9}
@media (min-width:900px){
  main.rlc-article .cta-end{grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:48px; margin-bottom:112px; align-items:stretch}
  main.rlc-article .cta-end-copy{grid-column:1 / span 7; padding:80px 0 80px 72px}
  main.rlc-article .cta-end h2{font-size:3.25rem; line-height:1.04; max-width:12em}
  main.rlc-article .cta-end-photo{grid-column:8 / -1; padding:20px; min-height:420px}
  main.rlc-article .cta-end-photo img{position:absolute; inset:20px; width:calc(100% - 40px); height:calc(100% - 40px); aspect-ratio:auto}
}

/* pass 2 */
main.rlc-article .cta-line{display:block}
main.rlc-article .cta-line::before{content:none; display:none}
main.rlc-article .byline-meta{padding-left:0; margin-top:10px}
main.rlc-article details.toc-inline{background:transparent; border-radius:0; margin:24px 0 0}
main.rlc-article details.toc-inline summary{padding:0 4px 0 0}
main.rlc-article details.toc-inline > ol{padding:4px 0 8px}
main.rlc-article details.toc-inline .toc-group ol{padding:0}
main.rlc-article details.toc-inline .toc-group a{border-top:0; padding-block:10px; font:500 var(--ui-m)/1.4 var(--sans); color:var(--ink)}
main.rlc-article details.toc-inline .toc-label{margin:6px 0 0}
/* the theme sets a smaller root size on phones, so body size is fixed in px */
main.rlc-article{--body-size:17px; --body-lh:1.7}
@media (min-width:900px){ main.rlc-article{--body-size:18px} }
main.rlc-article .prose > p, main.rlc-article .prose > ul{line-height:var(--body-lh)}
main.rlc-article .prose > p:not(.disclaimer):not(.cta-line), main.rlc-article .prose > ul > li{font-size:var(--body-size)}
/* hanging quote mark only where the gutter can hold it */
@media (max-width:899px){ main.rlc-article .pull-b p{text-indent:0} }

/* =================== B2 (s143 v2) =================== */
/* Ramp skim layer: body one step lighter than navy, key sentences in full navy 600 */
main.rlc-article{--body-ink:#3A4A5E; --mark:#D3E5F5; --tint-line:#D6E4F1}
main.rlc-article .prose > p, main.rlc-article .prose > ul > li{color:var(--body-ink)}
main.rlc-article .prose strong.skim{font-weight:600; color:var(--ink)}
main.rlc-article .prose > ul > li b{color:var(--ink)}

/* hero (review fix 7 + Ramp fold): H1 56px max, wider text column, smaller framed photo, band ends inside the fold */
main.rlc-article .hero h1{font-size:34px; line-height:1.08; max-width:none}
main.rlc-article .lead-text{font-size:18px}
main.rlc-article .byline .person a.author{font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--underline); text-underline-offset:3px}
@media (min-width:900px){
  main.rlc-article .hero-band .crumbs{padding-top:32px}
  main.rlc-article .hero{padding-block:20px 56px}
  main.rlc-article .hero-row{gap:64px; align-items:center}
  main.rlc-article .hero-text{grid-column:1 / span 8; gap:22px; max-width:740px}
  main.rlc-article .hero h1{font-size:48px; line-height:1.05}
  main.rlc-article .lead-text{font-size:20px; max-width:34em}
  main.rlc-article .hero-cover{grid-column:9 / -1; aspect-ratio:1/1; padding:12px; border-radius:24px; max-width:360px; justify-self:end; width:100%}
  main.rlc-article .hero-cover .cover-img{inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); border-radius:14px}
}
@media (min-width:1200px){ main.rlc-article .hero h1{font-size:56px; line-height:1.04} }

/* Key takeaways (Riverside) built from question rows (C): question label, one-line answer, whole row jumps to its section */
main.rlc-article .takeaways{background:var(--tint); border-radius:20px; padding:20px 20px 8px; margin-top:0 !important}
main.rlc-article .prose > .takeaways h2.kt-title{font:600 16px/1.4 var(--sans); color:var(--ink); margin:0 0 4px}
main.rlc-article .takeaways ul{list-style:none; margin:0; padding:0}
main.rlc-article .takeaways li + li{border-top:1px solid var(--tint-line)}
main.rlc-article .takeaways a{display:grid; gap:2px; padding:12px 0; text-decoration:none; color:inherit}
main.rlc-article .takeaways .kt-q{font:600 14px/1.4 var(--sans); color:var(--ink)}
main.rlc-article .takeaways .kt-a{font:400 16px/1.5 var(--sans); color:var(--body-ink)}
main.rlc-article .takeaways a:hover .kt-a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--underline); text-underline-offset:3px}
@media (min-width:900px){
  main.rlc-article .takeaways{padding:26px 32px 12px}
  main.rlc-article .takeaways a{grid-template-columns:184px 1fr; gap:20px; align-items:baseline; padding:14px 0}
  main.rlc-article .takeaways .kt-a{font-size:17px}
}

/* opening paragraph larger (Pinterest) */
main.rlc-article .prose > p.opener:not(.disclaimer):not(.cta-line){font-size:19px; line-height:1.55; color:var(--ink); margin-top:28px !important}
@media (min-width:900px){ main.rlc-article .prose > p.opener:not(.disclaimer):not(.cta-line){font-size:22px; line-height:1.5; margin-top:40px !important} }

/* data card (Ramp): tinted figure, title with one marked phrase, the reader column highlighted, source line + mark */
main.rlc-article .prose > .data-card{margin:40px 0 12px; margin-right:calc(-1 * var(--break)); background:var(--tint); border-radius:24px; padding:20px 16px 16px}
main.rlc-article .data-card .table-wrap.legal{margin:0}
main.rlc-article .data-card .legal caption{font:600 18px/1.35 var(--sans); color:var(--ink); padding:0 4px 16px}
main.rlc-article .data-card mark{background:var(--mark); color:var(--ink); padding:0 .2em; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
main.rlc-article .data-card .legal td:nth-child(3){font-weight:500; color:var(--ink)}
main.rlc-article .dc-source{display:flex; gap:16px; align-items:flex-end; justify-content:space-between; margin-top:16px; padding:0 4px; font:400 13px/1.5 var(--sans); color:var(--muted)}
main.rlc-article .dc-source a{color:var(--muted); text-decoration:underline; text-decoration-color:var(--underline); text-underline-offset:2px}
main.rlc-article .dc-mark{flex:none; width:28px; height:28px; color:var(--ink); opacity:.85}
@media (min-width:640px){
  main.rlc-article .prose > .data-card{padding:28px 28px 20px}
  main.rlc-article .data-card .legal caption{font-size:20px; padding:0 0 20px}
  main.rlc-article .data-card .legal td{border-bottom-color:var(--tint-line)}
  main.rlc-article .data-card .legal th:nth-child(3), main.rlc-article .data-card .legal td:nth-child(3){background:var(--page); padding-left:16px; padding-right:16px}
  main.rlc-article .data-card .legal th:nth-child(3){border-radius:12px 12px 0 0; padding-top:12px}
  main.rlc-article .data-card .legal tr:last-child td{border-bottom:0}
  main.rlc-article .data-card .legal tr:last-child td:nth-child(3){border-radius:0 0 12px 12px}
}
@media (max-width:639px){
  main.rlc-article .data-card .legal tr{background:var(--page)}
}

/* mid CTA at the panic point: rule-3.4 callout, 3px bar + tint, text link (CTA 2 of 3) */
main.rlc-article .prose > .cta-mid{margin-top:36px !important; background:var(--tint); border-left:3px solid var(--ink); border-radius:0 16px 16px 0; padding:20px 20px 18px}
main.rlc-article .cta-mid-title{font:600 18px/1.35 var(--sans); color:var(--ink); margin:0}
main.rlc-article .cta-mid-sub{font:500 14px/1.4 var(--sans); color:var(--muted); margin:12px 0 0}
main.rlc-article .cta-steps{list-style:none; counter-reset:s; margin:8px 0 0; padding:0; display:grid; gap:6px}
main.rlc-article .cta-steps li{counter-increment:s; position:relative; padding-left:30px; font:400 16px/1.5 var(--sans); color:var(--body-ink)}
main.rlc-article .cta-steps li::before{content:counter(s); position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--page); color:var(--ink); font:600 12px/20px var(--sans); text-align:center}
main.rlc-article .cta-mid-link{display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font:600 17px/1.4 var(--sans); color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--underline)}
main.rlc-article .cta-mid-link:hover{text-decoration-color:var(--ink)}
@media (min-width:900px){ main.rlc-article .prose > .cta-mid{padding:26px 32px 22px; margin-top:44px !important} }

/* end module: phone as text, family line */
main.rlc-article .cta-end h2{font-size:30px}
main.rlc-article .cta-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
main.rlc-article .cta-call{margin:0; font:400 16px/1.5 var(--sans); color:var(--body-ink)}
main.rlc-article .cta-call a{font-weight:600; color:var(--ink); white-space:nowrap; text-decoration:underline; text-decoration-color:var(--underline); text-underline-offset:3px}
main.rlc-article .cta-family{margin:4px 0 0; padding-top:16px; border-top:1px solid var(--tint-line); font:400 15px/1.5 var(--sans); color:var(--muted); max-width:32em}
@media (min-width:900px){
  main.rlc-article .cta-end h2{font-size:44px; max-width:11em}
  main.rlc-article .cta-end-photo{min-height:380px}
}

/* "More on this" (Contra): quiet text list after the end module, aligned to the text column */
main.rlc-article .related.more-on{margin:0 0 72px !important; max-width:var(--col)}
main.rlc-article .more-on h2{font:600 14px/1.4 var(--sans); color:var(--muted)}
main.rlc-article .more-on a{display:block; padding-block:14px; font:500 16px/1.45 var(--sans); color:var(--ink)}
main.rlc-article .more-on a:hover span{text-decoration:underline; text-underline-offset:3px}
@media (min-width:1200px){ main.rlc-article .related.more-on{margin-left:296px !important; margin-bottom:112px !important} }

/* B2 pass 2 */
@media (min-width:1200px){ main.rlc-article .article-grid{padding-top:48px} }
main.rlc-article .hero-soft{max-width:30em; line-height:1.45}
/* review fix B3: pull quote 52px so it stops shouting */
@media (min-width:1200px){ main.rlc-article .pull-b p{font-size:52px; line-height:1.06} }

/* ================= B3: calm phone top, real hero photo, lighter phone body ================= */
/* hero CTA wording per width (one line each) */
main.rlc-article .hero-soft .cta-m{display:none}
main.rlc-article .hero-photo{margin:0}
main.rlc-article .hero-photo .cover-img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%; border-radius:16px}

/* desktop: hard hats 4:3, ~470px, no frame, centred on the text block (fix-mock-desktop-hero-1440) */
@media (min-width:900px){
  main.rlc-article .hero-row{gap:56px; align-items:center}
  main.rlc-article .hero-text{grid-column:1 / span 7; max-width:none}
  main.rlc-article .hero-cover.hero-photo{display:block; grid-column:8 / -1; justify-self:stretch; max-width:none; width:100%;
    aspect-ratio:4/3; padding:0; background:none; border-radius:16px; overflow:hidden; position:relative}
  main.rlc-article .hero-cover.hero-photo .cover-img{position:absolute; inset:0; width:100%; height:100%; border-radius:16px}
  main.rlc-article .hero-soft{max-width:none; white-space:nowrap}
}

/* phone */
@media (max-width:600px){
  /* hero: no band, four things on the first screen (crumbs, H1, one byline line, photo) */
  main.rlc-article .hero-band{background:none}
  main.rlc-article .hero-band .crumbs{padding-top:16px}
  main.rlc-article .crumbs, main.rlc-article .crumbs a{font-size:14px}
  main.rlc-article .hero{padding-block:10px 0}
  main.rlc-article .hero-row{display:flex; flex-direction:column; gap:0}
  main.rlc-article .hero-text{display:contents}
  main.rlc-article .hero h1{order:1; font-size:30px; line-height:1.1; letter-spacing:0; text-wrap:balance; margin:0}
  main.rlc-article .hero .byline{order:2; margin:14px 0 0}
  main.rlc-article .hero-cover.hero-photo{order:3; display:block; margin:20px 0 0; padding:0; background:none; aspect-ratio:16/10; width:100%}
  main.rlc-article .hero-cover.hero-photo .cover-img{aspect-ratio:16/10; height:auto}
  main.rlc-article .hero .lead-answer{order:4; margin:20px 0 0}
  main.rlc-article .hero-soft{order:5; margin:10px 0 0}
  main.rlc-article .byline .avatar, main.rlc-article .byline .role, main.rlc-article .byline .readtime{display:none}
  main.rlc-article .byline{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px}
  main.rlc-article .byline-people, main.rlc-article .byline .person{display:inline; font-size:14px}
  main.rlc-article .byline-meta{display:inline; margin:0; padding:0; font-size:14px}
  main.rlc-article .byline-meta .updated::before{content:"\00B7"; margin-right:6px; color:var(--muted)}
  main.rlc-article .lead-text{font-size:17px; line-height:1.6}
  main.rlc-article .hero-soft .cta-d{display:none}
  main.rlc-article .hero-soft .cta-m{display:inline}
  main.rlc-article .hero-soft{font-size:16px; white-space:nowrap}

  /* body order: opener, then Key takeaways, then the TOC toggle */
  main.rlc-article .prose{display:flex; flex-direction:column}
  main.rlc-article .article-grid{padding-top:0}
  main.rlc-article .prose > *{min-width:0}
  main.rlc-article .prose > p.opener:not(.disclaimer):not(.cta-line){order:-1; margin-top:28px !important}
  main.rlc-article .prose > .takeaways{margin-top:28px !important}

  /* Key takeaways: no box, hairline top and bottom, run-in rows */
  main.rlc-article .takeaways{background:none; border-radius:0; padding:4px 0 8px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
  main.rlc-article .prose > .takeaways h2.kt-title{margin:14px 0 2px}
  main.rlc-article .takeaways li + li{border-top:0}
  main.rlc-article .takeaways a{display:block; padding:9px 0}
  main.rlc-article .takeaways .kt-q{display:inline; font:600 16px/1.5 var(--sans); color:var(--ink)}
  main.rlc-article .takeaways .kt-a{display:inline; font:400 16px/1.5 var(--sans)}
  main.rlc-article .toc-inline{margin-top:20px !important; border-top:0}

  /* headings and small text */
  main.rlc-article .prose > h2 + *{margin-top:14px}
  main.rlc-article .toc-label, main.rlc-article .rail-title, main.rlc-article figcaption,
  main.rlc-article .sources-b, main.rlc-article .sources-b *, main.rlc-article .disclaimer{font-size:14px !important}
  main.rlc-article .cta-steps li::before{font-size:14px; width:22px; height:22px; line-height:22px; top:0}

  /* legal table: no outer box, one level of rows on hairlines, one label */
  main.rlc-article .prose > .data-card{background:none; border-radius:0; padding:0}
  main.rlc-article .data-card .legal caption{padding:0 0 4px}
  main.rlc-article .data-card .legal tr{background:none; border-radius:0; margin:0; padding:16px 0; border-top:1px solid var(--rule)}
  main.rlc-article .data-card .legal tr:last-child{border-bottom:1px solid var(--rule)}
  main.rlc-article .data-card .legal td:first-child{margin-bottom:6px}
  main.rlc-article .data-card .legal td:nth-child(2){color:var(--body-ink)}
  main.rlc-article .data-card .legal td:nth-child(2)::before{content:none}
  main.rlc-article .data-card .legal td:nth-child(3){margin-top:10px; padding-left:12px; border-left:2px solid var(--ink); font-weight:500; color:var(--ink)}
  main.rlc-article .data-card .legal td:nth-child(3)::before{font-size:14px; font-weight:500}

  /* mid CTA: outline button 48px */
  main.rlc-article .cta-mid-link{min-height:48px; margin-top:16px; padding:0 22px; border:1.5px solid var(--ink); border-radius:999px; text-decoration:none; font-size:16px}
}

/* B3 fix: keep the opener's second paragraph with it on phones */
@media (max-width:600px){main.rlc-article .prose > p.opener + p{order:-1}}

/* ================= B4: visual pauses, table system, one design system ================= */
/* Scale. Radii: 8 (inner), 16 (photos, panels), 999 (pills), circles 50%. One hairline: 1px var(--rule).
   Tint (#EFF6FC) only for: hero band (desktop), the lit table column, the mid CTA, the end block.
   Text: G56/52/36 desktop (G30/32/28 phone), M22 lead, M18 body 400/600, M16 400/600, M14 500/600, pill M16/400. */
main.rlc-article{--tint-line:var(--rule); --r-s:8px; --r-m:16px; --pill:999px; --gap-block:48px}
main.rlc-article .prose, main.rlc-article .tbl, main.rlc-article .timeline, main.rlc-article .sources-b,
main.rlc-article .byline-meta, main.rlc-article .dc-source{font-variant-numeric:lining-nums tabular-nums}

/* ---------- pills: one CTA form everywhere (site buttons: Montserrat 400 16) ---------- */
main.rlc-article a.pill{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px;
  border-radius:var(--pill); font:400 16px/1.2 var(--sans); letter-spacing:0; text-decoration:none; white-space:nowrap;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform var(--t-press) var(--ease-out), background-color var(--t-colour) ease, color var(--t-colour) ease}
main.rlc-article a.pill:active{transform:scale(.98)}
main.rlc-article a.pill--line{border:1px solid var(--ink); color:var(--ink); background:transparent}
main.rlc-article a.pill--fill{border:1px solid var(--ink); color:#FFFFFF; background:var(--ink)}
@media (hover:hover) and (pointer:fine){
  main.rlc-article a.pill--line:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
  main.rlc-article a.pill--fill:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
}
main.rlc-article a.pill:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
main.rlc-article .hero-soft.pill{align-self:flex-start; max-width:none}
main.rlc-article .cta-mid-link.pill{margin-top:20px}

/* ---------- hero: lead is the entry, larger than the body ---------- */
main.rlc-article .lead-text{font-size:18px; line-height:1.55}
@media (min-width:900px){ main.rlc-article .lead-text{font-size:22px; line-height:1.5; max-width:32em} }
main.rlc-article .byline .person, main.rlc-article .byline-meta, main.rlc-article .crumbs, main.rlc-article .crumbs a{font-weight:500}
main.rlc-article .prose > p.opener:not(.disclaimer):not(.cta-line){font-size:var(--body-size); line-height:var(--body-lh); color:var(--ink)}

/* ---------- key takeaways: no box on any width, hairlines only ---------- */
main.rlc-article .takeaways{background:none; border-radius:0; padding:4px 0 8px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
main.rlc-article .prose > .takeaways h2.kt-title{font:600 18px/1.35 var(--sans); margin:16px 0 4px}
main.rlc-article .takeaways li + li{border-top:0}
main.rlc-article .takeaways .kt-a{font-size:16px}
@media (min-width:601px){ main.rlc-article .takeaways .kt-q{font-size:14px; font-weight:600} }
main.rlc-article .takeaways a:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-s)}
main.rlc-article .takeaways a:focus-visible .kt-a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--underline); text-underline-offset:3px}

/* ---------- rail: 1px line, one ink indicator that travels ---------- */
main.rlc-article .rail{position:sticky}
main.rlc-article .rail .toc-group a{border-left:1px solid var(--rule); padding-left:15px}
main.rlc-article .rail .toc-group a[aria-current]{border-left-color:var(--rule)}
main.rlc-article .toc-label{font-size:14px; font-weight:500}
main.rlc-article .rail-ind{position:absolute; left:-.5px; top:0; width:2px; height:1px; background:var(--ink); opacity:0;
  transform:translateY(var(--y,0)) scaleY(var(--h,1)); transform-origin:top; transition:transform 220ms var(--ease-out), opacity var(--t-colour) ease; pointer-events:none}
main.rlc-article .rail-ind.on{opacity:1}

/* ---------- body headings land with a short flash after a jump ---------- */
@keyframes rlc-land{from{background-color:#D3E5F5} to{background-color:transparent}}
main.rlc-article .prose > h2:target{animation:rlc-land 900ms var(--ease-out); box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* ---------- table system A "Ledger": hairlines, one lit column, source line ---------- */
main.rlc-article .prose > .data-card{background:none; border-radius:0; padding:0; margin-top:var(--gap-block) !important; margin-bottom:8px}
main.rlc-article .tbl--ledger{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font:400 16px/1.55 var(--sans); color:var(--body-ink)}
main.rlc-article .tbl--ledger caption{caption-side:top; text-align:left; font:600 18px/1.35 var(--sans); color:var(--ink); padding:0 0 16px}
main.rlc-article .tbl--ledger th{font:600 14px/1.3 var(--sans); color:var(--muted); text-align:left; vertical-align:bottom; padding:0 24px 12px 0; border-bottom:1px solid var(--rule)}
main.rlc-article .tbl--ledger td{padding:20px 28px 20px 0; vertical-align:top; border-bottom:1px solid var(--rule); background:none}
main.rlc-article .tbl--ledger td:first-child{font-weight:600; color:var(--ink)}
main.rlc-article .tbl--ledger th:nth-child(1){width:24%}
main.rlc-article .tbl--ledger th:nth-child(2), main.rlc-article .tbl--ledger th:nth-child(3){width:38%}
main.rlc-article .data-card .tbl--ledger th:nth-child(3), main.rlc-article .data-card .tbl--ledger td:nth-child(3){background:var(--tint); padding-left:20px; padding-right:20px; color:var(--ink); font-weight:600; border-bottom:0}
main.rlc-article .data-card .tbl--ledger th:nth-child(3){padding-top:14px; border-radius:var(--r-s) var(--r-s) 0 0}
main.rlc-article .data-card .tbl--ledger tr:last-child td:nth-child(3){border-radius:0 0 var(--r-s) var(--r-s)}
main.rlc-article .data-card .tbl--ledger tr:last-child td{border-bottom:0}
main.rlc-article .data-card .tbl--ledger tr:last-child td:not(:last-child){border-bottom:1px solid var(--rule)}
main.rlc-article .dc-source{display:block; margin-top:14px; padding:0; font:500 14px/1.5 var(--sans); color:var(--muted)}
@media (max-width:639px){
  main.rlc-article .tbl--ledger, main.rlc-article .tbl--ledger tbody, main.rlc-article .tbl--ledger tr, main.rlc-article .tbl--ledger td{display:block; width:auto}
  main.rlc-article .tbl--ledger caption{display:block; padding:0 0 8px}
  main.rlc-article .data-card .tbl--ledger tr{background:none; border-radius:0; margin:0; padding:20px 0; border-top:1px solid var(--rule)}
  main.rlc-article .data-card .tbl--ledger tr:last-child{border-bottom:1px solid var(--rule)}
  main.rlc-article .data-card .tbl--ledger td{border:0; padding:0}
  main.rlc-article .data-card .tbl--ledger tr:last-child td:not(:last-child){border-bottom:0}
  main.rlc-article .data-card .tbl--ledger td:first-child{font-size:16px; margin-bottom:6px}
  main.rlc-article .data-card .tbl--ledger td:nth-child(2)::before{content:none}
  main.rlc-article .data-card .tbl--ledger td:nth-child(3){margin-top:12px; padding:12px 14px; border:0; border-radius:var(--r-s); font-weight:600}
  main.rlc-article .data-card .tbl--ledger td:nth-child(3)::before{content:attr(data-label); display:block; font:500 14px/1.4 var(--sans); color:var(--muted); margin-bottom:2px}
}

/* ---------- table system C "Spine": term and explanation, no column scan ---------- */
main.rlc-article .tbl--spine{display:block; width:100%; border-collapse:collapse}
main.rlc-article .tbl--spine caption, main.rlc-article .slot-title{display:block; text-align:left; font:600 14px/1.4 var(--sans); color:var(--muted); padding:0 0 12px; margin:0}
main.rlc-article .tbl--spine tbody{display:block}
main.rlc-article .tbl--spine tr{display:grid; grid-template-columns:5fr 7fr; gap:8px 40px; padding:24px 0; border-top:1px solid var(--rule)}
main.rlc-article .tbl--spine tr:last-child{border-bottom:1px solid var(--rule)}
main.rlc-article .tbl--spine th{text-align:left; font:600 18px/1.35 var(--sans); color:var(--ink); padding:0}
main.rlc-article .tbl--spine td{padding:0}
main.rlc-article .tbl--spine td p{margin:0; font:400 16px/1.55 var(--sans); color:var(--body-ink)}
main.rlc-article .tbl--spine td p.sp-take{margin-top:10px; font-weight:600; color:var(--ink)}
@media (max-width:639px){ main.rlc-article .tbl--spine tr{grid-template-columns:1fr; padding:20px 0} }

/* ---------- slots: shared spacing; never under an H2 (placement), one paragraph between blocks ---------- */
main.rlc-article .prose > .slot{margin:40px 0 0; padding:0}
main.rlc-article .prose > .slot + p{margin-top:40px !important}
@media (min-width:900px){ main.rlc-article .prose > .slot{margin-top:var(--gap-block) !important} main.rlc-article .prose > .slot + p{margin-top:var(--gap-block) !important} }
@media (min-width:1200px){
  main.rlc-article .prose > .slot-timeline, main.rlc-article .prose > .slot-steps, main.rlc-article .prose > .slot-photo--wide{margin-right:calc(-1 * var(--break))}
  main.rlc-article .prose > .slot-photo--inline{margin-right:calc(-1 * var(--break) + 120px)}
}

/* S1 / S6 photos: one treatment (radius 16, no frame, no caption) */
main.rlc-article .slot-photo picture, main.rlc-article .slot-photo img{display:block; width:100%; height:auto; border-radius:var(--r-m)}
main.rlc-article .slot-photo img{aspect-ratio:3/2; object-fit:cover; background:var(--photo-ground)}
main.rlc-article .slot-photo--wide img{aspect-ratio:16/9}
@media (max-width:600px){ main.rlc-article .slot-photo--wide img{aspect-ratio:4/3} }

/* S2 timeline: hairline axis, years in the display face */
main.rlc-article .timeline{list-style:none; margin:0; padding:0; display:grid; gap:0}
main.rlc-article .timeline li{position:relative; padding:0 0 28px 28px; border-left:1px solid var(--rule)}
main.rlc-article .timeline li:last-child{padding-bottom:4px}
main.rlc-article .timeline li::before{content:""; position:absolute; left:-5px; top:12px; width:9px; height:9px; border-radius:50%; background:var(--ink)}
main.rlc-article .tl-when{display:block; font:400 28px/1.1 var(--display); color:var(--ink)}
main.rlc-article .tl-what{display:block; margin-top:8px; font:600 16px/1.4 var(--sans); color:var(--ink)}
main.rlc-article .tl-note{display:block; margin-top:4px; font:400 16px/1.55 var(--sans); color:var(--body-ink)}
@media (min-width:900px){
  main.rlc-article .timeline{grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:32px; border-top:1px solid var(--rule); padding-top:0}
  main.rlc-article .timeline li{border-left:0; padding:28px 0 0}
  main.rlc-article .timeline li::before{left:0; top:-5px}
  main.rlc-article .tl-when{font-size:36px; line-height:1}
  main.rlc-article .tl-what{margin-top:12px}
}

/* S4 steps: four numbered steps, thin connector on top */
main.rlc-article .slot-steps .steps{list-style:none; counter-reset:st; margin:0; padding:0; display:grid; gap:0}
main.rlc-article .slot-steps .steps li{counter-increment:st; display:grid; grid-template-columns:44px 1fr; column-gap:12px; padding:18px 0; border-top:1px solid var(--rule)}
main.rlc-article .slot-steps .steps li:last-child{border-bottom:1px solid var(--rule)}
main.rlc-article .slot-steps .steps li::before{content:counter(st); grid-row:1 / span 2; font:400 28px/1 var(--display); color:var(--ink)}
main.rlc-article .st-t{display:block; font:600 16px/1.4 var(--sans); color:var(--ink)}
main.rlc-article .st-d{display:block; margin-top:4px; font:400 16px/1.55 var(--sans); color:var(--body-ink)}
@media (min-width:640px){
  main.rlc-article .slot-steps .steps{grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:32px}
  main.rlc-article .slot-steps .steps li{display:block; padding:20px 0 24px; border-bottom:0}
  main.rlc-article .slot-steps .steps li:last-child{border-bottom:0}
  main.rlc-article .slot-steps .steps li::before{display:block; margin-bottom:12px; font-size:36px}
}
@media (min-width:1200px){ main.rlc-article .slot-steps .steps{grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:28px} }

/* S5 checklist: restyle of the existing list, check marks, hairlines, no fill */
main.rlc-article .prose > ul.checklist{list-style:none; padding:0; gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-top:28px}
main.rlc-article .prose > ul.checklist > li{position:relative; padding:16px 0 16px 40px}
main.rlc-article .prose > ul.checklist > li + li{border-top:1px solid var(--rule)}
main.rlc-article .prose > ul.checklist > li::before{content:""; position:absolute; left:0; top:calc(16px + .2em); width:24px; height:24px; background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat}
main.rlc-article .prose > ul.checklist > li b, main.rlc-article .prose > ul > li b{font-weight:600}


/* ---------- mid CTA: one tinted panel, no side bar ---------- */
main.rlc-article .prose > .cta-mid{border-left:0; border-radius:var(--r-m); padding:24px 20px}
@media (min-width:900px){ main.rlc-article .prose > .cta-mid{padding:28px 32px} }
main.rlc-article .cta-steps li::before{width:22px; height:22px; font:600 14px/22px var(--sans); top:1px}

/* ---------- FAQ ---------- */
main.rlc-article .faq-q{font-size:18px}
@keyframes rlc-fade{from{opacity:0} to{opacity:1}}
main.rlc-article .panel.is-open .panel-inner > div{animation:rlc-fade 160ms ease 60ms both}

/* ---------- sources, disclaimer, more on this ---------- */
main.rlc-article .prose > .sources-b h2.src-title{font:600 18px/1.35 var(--sans)}
main.rlc-article .sources-b ol{font-size:14px}
main.rlc-article .sources-b li, main.rlc-article .sources-b a{font-weight:500}
main.rlc-article .sources-b li::marker{color:var(--ink)}
main.rlc-article .sources-b a{text-decoration:none}
main.rlc-article .sources-b a:hover, main.rlc-article .sources-b a:focus-visible{text-decoration:underline; text-decoration-color:var(--ink); text-underline-offset:3px}
main.rlc-article .disclaimer{font-weight:500}
main.rlc-article .more-on h2{font-weight:600}
main.rlc-article .more-on a{font-weight:400}

/* ---------- end block: radius 16 outside, photo inset 16 with radius 8 (concentric) ---------- */
main.rlc-article .cta-end{border-radius:var(--r-m)}
main.rlc-article .cta-end h2{font-size:28px; line-height:1.1}
main.rlc-article .cta-end p{font-size:16px}
main.rlc-article .cta-family{border-top-color:var(--rule); font:500 14px/1.5 var(--sans)}
main.rlc-article .cta-end-photo{padding:16px 16px 0}
main.rlc-article .cta-end-photo img{border-radius:var(--r-s)}
@media (min-width:900px){
  main.rlc-article .cta-end h2{font-size:36px; line-height:1.08}
  main.rlc-article .cta-end-photo{padding:16px}
  main.rlc-article .cta-end-photo img{inset:16px; width:calc(100% - 32px); height:calc(100% - 32px)}
}

/* ---------- phone ---------- */
@media (max-width:600px){
  main.rlc-article .hero-soft.pill{width:100%; padding:0 16px; margin-top:16px}
  main.rlc-article a.pill{width:100%}
  main.rlc-article .cta-actions{display:grid; gap:12px}
}

/* ---------- motion off on request ---------- */
@media (prefers-reduced-motion: reduce){
  main.rlc-article a.pill{transition:background-color var(--t-colour) ease, color var(--t-colour) ease}
  main.rlc-article a.pill:active{transform:none}
  main.rlc-article .rail-ind{transition:none}
  main.rlc-article .prose > h2:target{animation:none}
  main.rlc-article .panel.is-open .panel-inner > div{animation:none}
}

/* B4 pass 2: photo slots as template placeholders, last strays folded into the scale */
main.rlc-article .slot-ph{display:flex; flex-direction:column; justify-content:flex-end; gap:4px; width:100%; aspect-ratio:3/2; padding:20px;
  background:var(--tint); border-radius:var(--r-m); box-sizing:border-box}
main.rlc-article .slot-ph--wide{aspect-ratio:16/9}
@media (max-width:600px){ main.rlc-article .slot-ph--wide{aspect-ratio:4/3} }
main.rlc-article .ph-role{font:600 14px/1.4 var(--sans); color:var(--ink)}
main.rlc-article .ph-spec{font:500 14px/1.45 var(--sans); color:var(--muted)}
main.rlc-article .crumbs, main.rlc-article .crumbs a, main.rlc-article .crumbs li{font-size:14px}
main.rlc-article .byline-meta .updated, main.rlc-article .byline-meta time{font-weight:500}
main.rlc-article .data-card .tbl--ledger caption{font-size:18px}
main.rlc-article .panel-inner > div, main.rlc-article .panel-inner p, main.rlc-article .cta-end p{font-weight:400}
main.rlc-article .cta-end p.cta-family{font:500 14px/1.5 var(--sans)}
main.rlc-article details.toc-inline .toc-group a{font-weight:400}
main.rlc-article .faq-q{border-radius:var(--r-s)}

/* B4: in-text links without underline (client decision 11 Oct: underlines are visual noise).
   Calm blue #2C66A8: 5.8:1 on the page, 5.4:1 on #EFF6FC. Underline only on hover/focus.
   Note: vs body text #3A4A5E the colour difference is under 3:1, so WCAG 1.4.1 is not strictly met; accepted by the client. */
main.rlc-article .prose p a, main.rlc-article .prose li a, main.rlc-article .hero p a, main.rlc-article .lead-answer a{
  color:#2C66A8 !important; font-weight:inherit; text-decoration:none !important; transition:color .2s ease}
main.rlc-article .prose p a:hover, main.rlc-article .prose li a:hover, main.rlc-article .hero p a:hover, main.rlc-article .lead-answer a:hover,
main.rlc-article .prose p a:focus-visible, main.rlc-article .prose li a:focus-visible, main.rlc-article .hero p a:focus-visible, main.rlc-article .lead-answer a:focus-visible{
  color:var(--ink) !important; text-decoration:underline !important; text-decoration-thickness:1px; text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){main.rlc-article .prose p a{transition:none}}

/* Hero CTA (client 11 Oct: no outline, no full-width button). Compact filled pill + quiet note on one row. */
main.rlc-article .hero-cta{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:28px}
main.rlc-article a.pill.pill--s{min-height:48px; padding:0 22px 0 18px; gap:10px; font:500 15px/1 var(--sans); width:auto}
main.rlc-article a.pill .wa-ic{width:19px; height:19px; flex:none}
main.rlc-article .hero-cta .hero-soft{margin:0 !important; text-decoration:none !important; align-self:auto}
main.rlc-article .hero-cta-note{font:400 14px/1.3 var(--sans); color:var(--muted)}
@media (max-width:600px){
  main.rlc-article .hero-cta{order:5; margin-top:18px}
  main.rlc-article .hero-cta .hero-soft{white-space:nowrap}
}
main.rlc-article .hero-cta .hero-soft{order:0 !important}

/* Phone rhythm (impeccable layout audit, 11 Oct). Scale: 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64.
   Roles: paragraph 16, heading 48 above / 12 below, pause block 40 around (48 when a heading follows),
   pairs that belong together 12, section ends 64. Gutter 20 = site logo edge. */
@media (max-width:600px){
  main.rlc-article .wrap{padding-left:20px !important; padding-right:20px !important}

  /* hero groups: title+byline tight, picture with air, lead+CTA together */
  main.rlc-article .hero h1{margin:0 !important}
  main.rlc-article .hero .byline{margin:12px 0 0 !important}
  main.rlc-article .hero .hero-cover{margin:24px 0 0 !important}
  main.rlc-article .hero .lead-answer{margin:24px 0 0 !important}
  main.rlc-article .hero .hero-cta{margin:16px 0 0 !important}

  /* body: reset, then roles */
  main.rlc-article .prose > *{margin-bottom:0 !important; margin-top:16px !important}
  main.rlc-article .prose > p.opener:not(.disclaimer):not(.cta-line){margin-top:40px !important}
  main.rlc-article .prose > .takeaways{margin-top:32px !important}
  main.rlc-article .prose > .toc-inline{margin-top:12px !important}
  main.rlc-article .prose > h2{margin-top:48px !important}
  main.rlc-article .prose > h2 + *{margin-top:12px !important}
  main.rlc-article .prose > :is(.slot, .data-card, .table-wrap, .pull-b, .cta-mid, figure){margin-top:40px !important}
  main.rlc-article .prose > :is(.slot, .data-card, .table-wrap, .pull-b, .cta-mid, figure) + *{margin-top:40px !important}
  main.rlc-article .prose > :is(.slot, .data-card, .table-wrap, .pull-b, .cta-mid, figure) + h2{margin-top:48px !important}
  main.rlc-article .prose > .checklist, main.rlc-article .prose > .checklist + *{margin-top:24px !important}

  /* end of article */
  main.rlc-article .faq{margin-top:12px !important}
  main.rlc-article .sources-b{margin-top:48px !important}
  main.rlc-article .disclaimer{margin-top:24px !important}
  main.rlc-article .cta-end{margin-top:0 !important} /* article-grid already ends with 64px */
  main.rlc-article .related{margin-top:64px !important}
  main.rlc-article .prose > .prose-end{margin-top:0 !important}
}

/* ===== B5 (s144 audit) ===== */
/* Audit fixes, desktop side card, mid call-back form. One block, replaces the s144 working layers. */

/* buttons: weight 600 as on the site's own buttons; WhatsApp buttons carry the WhatsApp mark */
main.rlc-article a.pill{font-weight:600}
main.rlc-article .side-cta a.pill .wa-ic{width:18px; height:18px}

/* key takeaways: question and answer at one size, so the baselines in a row meet */
@media (min-width:601px){ main.rlc-article .takeaways .kt-q{font-size:16px; line-height:1.5} }

/* ledger: one header style, one bold column, rules run through the lit column */
main.rlc-article .data-card .tbl--ledger th:nth-child(3){color:var(--muted)}
@media (min-width:640px){
  main.rlc-article .data-card .tbl--ledger td:nth-child(3){font-weight:500; border-bottom:1px solid var(--rule)}
  main.rlc-article .data-card .tbl--ledger tr:last-child td:nth-child(3){border-bottom:0}
}

/* checklist: same space above and below */
main.rlc-article .prose > ul.checklist{margin-top:24px}
main.rlc-article .prose > ul.checklist + p{margin-top:24px}

/* left rail stays in place; only the right card follows the reader */
main.rlc-article .rail{position:static; max-height:none; overflow:visible}

/* desktop side card (RULES 6.3): from 1280 the right column holds it, figures stay in the text column,
   the hero CTA steps aside so one WhatsApp button shows per screen */
main.rlc-article .side-cta{display:none}
main.rlc-article .side-text, main.rlc-article .side-note{text-wrap:pretty}
@media (min-width:1280px){
  main.rlc-article{--break:0px}
  main.rlc-article .article-grid{grid-template-columns:232px 48px var(--col) 48px minmax(0,1fr)}
  main.rlc-article .hero-cta{display:none}
  main.rlc-article .side-cta{display:grid; gap:0; grid-column:5; grid-row:1; align-self:start; position:sticky; top:32px;
    padding:24px; border:0; border-radius:var(--r-m); background:var(--tint)}
  main.rlc-article .side-title{margin:0; font:600 18px/1.35 var(--sans); color:var(--ink); text-wrap:balance}
  main.rlc-article .side-text{margin:8px 0 0; font:400 15px/1.5 var(--sans); color:var(--ink); text-wrap:pretty}
  main.rlc-article .side-cta a.pill{width:100%; min-height:48px; margin-top:20px; padding:0 20px; justify-content:center; gap:8px;
    font-size:15px; white-space:normal; text-align:left}
  main.rlc-article .side-cta a.pill--fill{background:#FFFFFF; border-color:transparent; color:var(--ink); box-shadow:0 1px 3px rgba(0,22,53,.12)}
  main.rlc-article .side-note{margin:16px 0 0; font:400 14px/1.5 var(--sans); color:var(--muted); text-wrap:pretty}
}
@media (min-width:1280px) and (hover:hover) and (pointer:fine){
  main.rlc-article .side-cta a.pill--fill:hover{background:#FFFFFF; border-color:transparent; box-shadow:0 0 0 1px var(--ink)}
}

/* mid call-back form: display heading, light call/WhatsApp switch, filled fields, one dark button */
@media (min-width:900px){ main.rlc-article .prose > .cta-mid{margin-top:48px !important} }
main.rlc-article .prose > .cta-mid--form{padding:32px 24px 28px}
main.rlc-article .cta-mid--form .cta-mid-title{margin:0; font:400 30px/1.1 var(--display); color:var(--ink); text-wrap:balance; letter-spacing:0}
main.rlc-article .cta-mid--form .cta-mid-text{margin:16px 0 0; max-width:34em; font:400 16px/1.6 var(--sans); color:var(--body-ink); text-wrap:pretty}
main.rlc-article .cta-mid--form .cta-note{margin:28px 0 0; max-width:none; font:400 14px/1.5 var(--sans); color:var(--muted); text-wrap:pretty}
main.rlc-article .cb-form{margin-top:32px}
main.rlc-article .cb-form form p{margin:0}
main.rlc-article .cb-form [hidden]{display:none !important}
main.rlc-article .cb-how{margin:0 0 28px; padding:0; border:0; min-width:0}
main.rlc-article .cb-how legend{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
main.rlc-article .cb-seg{display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:var(--pill); background:#E2ECF6}
main.rlc-article .cb-opt{position:relative; display:block; cursor:pointer}
main.rlc-article .cb-opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
main.rlc-article .cb-opt span{display:flex; align-items:center; justify-content:center; min-height:40px; border-radius:var(--pill);
  font:500 15px/1.2 var(--sans); color:var(--muted); transition:background-color var(--t-colour) ease, color var(--t-colour) ease}
main.rlc-article .cb-opt input:checked + span{background:#FFFFFF; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,22,53,.12)}
main.rlc-article .cb-opt input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
@media (hover:hover) and (pointer:fine){ main.rlc-article .cb-opt input:not(:checked) + span:hover{color:var(--ink)} }
main.rlc-article .cb-form .cb-fields{display:grid; gap:20px}
main.rlc-article .cb-form label{font:500 14px/1.4 var(--sans); color:var(--body-ink)}
main.rlc-article .cb-form .wpcf7-form-control-wrap{margin-top:8px}
main.rlc-article .cb-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]){width:100%; box-sizing:border-box; min-height:48px;
  padding:0 16px; border:0; border-radius:var(--r-m); background:#FFFFFF; box-shadow:0 1px 2px rgba(0,22,53,.06);
  font:500 17px/1.4 var(--sans); color:var(--ink); transition:box-shadow var(--t-colour) ease}
main.rlc-article .cb-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]):hover{border:0; box-shadow:0 1px 2px rgba(0,22,53,.06), 0 0 0 1px rgba(0,22,53,.18)}
main.rlc-article .cb-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]):focus{outline:0; border:0; box-shadow:0 0 0 2px var(--ink)}
main.rlc-article .cb-form .wpcf7-form-control.wpcf7-not-valid:not(.wpcf7-submit){border:0; box-shadow:0 0 0 2px var(--emergency)}
main.rlc-article .cb-form .cb-submit{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:32px}
main.rlc-article .cb-form button.wpcf7-submit{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px;
  border:0; border-radius:var(--pill); background:var(--ink); color:#FFFFFF; font:600 16px/1.2 var(--sans); cursor:pointer}
@media (hover:hover) and (pointer:fine){ main.rlc-article .cb-form button.wpcf7-submit:hover{background:var(--accent-hover)} }
main.rlc-article .cb-form button.wpcf7-submit:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
main.rlc-article .cb-or{margin:0; font:400 15px/1.5 var(--sans); color:var(--muted)}
main.rlc-article .prose > .cta-mid .cb-or a{font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--underline); white-space:nowrap}
main.rlc-article .cb-form .wpcf7-response-output{margin:16px 0 0; padding:0; border:0; font:500 16px/1.5 var(--sans); color:var(--ink)}
main.rlc-article .cb-form .wpcf7-response-output.is-error{color:var(--emergency)}
@media (min-width:640px){ main.rlc-article .cb-form .cb-fields{grid-template-columns:1fr 1fr} }
@media (max-width:639px){ main.rlc-article .cb-form button.wpcf7-submit{width:100%} main.rlc-article .cb-form .cb-submit{justify-content:center} }
@media (min-width:900px){
  main.rlc-article .prose > .cta-mid--form{padding:48px 48px 40px}
  main.rlc-article .cta-mid--form .cta-mid-title{font-size:34px}
  main.rlc-article .cb-seg{max-width:320px}
  main.rlc-article .cb-form .cb-fields{gap:20px 24px}
}

/* 0.2.1: the same look on the markup Contact Form 7 prints (radio list, input submit, autop, tips, spinner).
   The rules above are the approved B5 design; these only carry them over to CF7's own classes. */
main.rlc-article .cb-form br{display:none}
main.rlc-article .cb-form.wpcf7 form > p:empty{display:none}
main.rlc-article .cb-seg > .wpcf7-form-control-wrap{grid-column:1 / -1; margin:0}
main.rlc-article .cb-seg .wpcf7-radio{display:grid; grid-template-columns:1fr 1fr}
main.rlc-article .cb-seg .wpcf7-list-item{display:block; margin:0}
main.rlc-article .cb-seg .wpcf7-list-item > label{position:relative; display:block; cursor:pointer}
main.rlc-article .cb-seg .wpcf7-list-item input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
main.rlc-article .cb-seg .wpcf7-list-item-label{display:flex; align-items:center; justify-content:center; min-height:40px; border-radius:var(--pill);
  font:500 15px/1.2 var(--sans); color:var(--muted); transition:background-color var(--t-colour) ease, color var(--t-colour) ease}
main.rlc-article .cb-seg .wpcf7-list-item input:checked + .wpcf7-list-item-label{background:#FFFFFF; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,22,53,.12)}
main.rlc-article .cb-seg .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label{outline:2px solid var(--ink); outline-offset:2px}
@media (hover:hover) and (pointer:fine){ main.rlc-article .cb-seg .wpcf7-list-item input:not(:checked) + .wpcf7-list-item-label:hover{color:var(--ink)} }
main.rlc-article .cb-form .cb-fields .wpcf7-form-control-wrap{display:block}
main.rlc-article .cb-form input.wpcf7-submit{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px;
  border:0; border-radius:var(--pill); background:var(--ink); color:#FFFFFF; font:600 16px/1.2 var(--sans); cursor:pointer; -webkit-appearance:none; appearance:none}
@media (hover:hover) and (pointer:fine){ main.rlc-article .cb-form input.wpcf7-submit:hover{background:var(--accent-hover)} }
main.rlc-article .cb-form input.wpcf7-submit:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media (max-width:639px){ main.rlc-article .cb-form input.wpcf7-submit{width:100%} }
main.rlc-article .cb-form .wpcf7-spinner{position:absolute; margin:0; width:1px; height:1px; overflow:hidden; opacity:0}
main.rlc-article .cb-form .wpcf7-not-valid-tip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
main.rlc-article .cb-form.wpcf7 form .wpcf7-response-output{margin:16px 0 0; padding:0; border:0; font:500 16px/1.5 var(--sans); color:var(--ink)}
main.rlc-article .cb-form.wpcf7 form.invalid .wpcf7-response-output,
main.rlc-article .cb-form.wpcf7 form.unaccepted .wpcf7-response-output,
main.rlc-article .cb-form.wpcf7 form.failed .wpcf7-response-output,
main.rlc-article .cb-form.wpcf7 form.aborted .wpcf7-response-output,
main.rlc-article .cb-form.wpcf7 form.spam .wpcf7-response-output{color:var(--emergency)}
main.rlc-article .cb-form.wpcf7 form.init .wpcf7-response-output:empty{display:none}
/* The radio group is a .wpcf7-form-control too: it keeps the segmented look, not the field look. */
main.rlc-article .cb-form .cb-seg .wpcf7-form-control.wpcf7-radio{display:grid; grid-template-columns:1fr 1fr; width:100%; min-height:0;
  padding:0; border:0; border-radius:0; background:none; box-shadow:none}
main.rlc-article .cb-form .cb-seg .wpcf7-form-control.wpcf7-radio:hover,
main.rlc-article .cb-form .cb-seg .wpcf7-form-control.wpcf7-radio:focus{box-shadow:none}
main.rlc-article .cb-form .cb-seg .wpcf7-form-control-wrap{margin:0}
main.rlc-article .cb-form .cb-seg .wpcf7-list-item-label::before,
main.rlc-article .cb-form .cb-seg .wpcf7-list-item-label::after{content:none}
main.rlc-article .cb-form.wpcf7 form .wpcf7-response-output{background:none; border-radius:0}
main.rlc-article .cb-form .cb-seg > .wpcf7-form-control-wrap{display:block}
/* Sent: only the thank-you line stays, as in the approved B5 state (on the site the theme then opens /thank-you/). */
main.rlc-article .cb-form.wpcf7 form.sent > :not(.wpcf7-response-output){display:none}
main.rlc-article .cb-form.wpcf7 form.sent .wpcf7-response-output{margin:0; font:500 17px/1.5 var(--sans); color:var(--ink)}
/* CF7 autop wraps the radio group and the submit button in <p>: those wrappers take no part in the layout. */
main.rlc-article .cb-form .cb-seg > p{grid-column:1 / -1; margin:0}
main.rlc-article .cb-form .cb-seg .wpcf7-form-control.wpcf7-radio{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
main.rlc-article .cb-form .cb-submit > p:not(.cb-or){display:contents}

/* 0.2.2: blocks of articles written for 0.1.x, shown in layout v2. The 0.1.x stylesheet pushes the photo, the dark
   quote and the pull quote into a right margin that v2 gives to the side card; here they stay in the text column,
   breaking out only as far as v2 figures do (--break). Old steps keep their 0.1.x look: the S4 rules are scoped
   to .slot-steps. */
main.rlc-article .prose > .photo{margin-left:0 !important; margin-right:calc(-1 * var(--break)) !important}
main.rlc-article .prose > .photo figcaption{padding-left:0}
main.rlc-article .prose > blockquote.field{margin-left:0; margin-right:calc(-1 * var(--break))}
main.rlc-article .prose > blockquote.pull{float:none; clear:none; width:auto; max-width:var(--col, 680px); margin:40px 0 !important; padding-block:0}
@media (min-width:1280px){
  main.rlc-article .prose > .photo, main.rlc-article .prose > blockquote.field{margin-right:0 !important}
}

/* 0.2.3 (rlc-app s146): content blocks of 0.1.x articles in the v2 system.
   1. A plain <table> from the article body takes the Ledger look: muted header on one rule, hairline rows, first
      column as the row name, numbers right-aligned in tabular figures. On a phone a table of four or more columns
      becomes stacked rows with the column name above each value (rlc-article.js sets data-stack, .num, data-label).
   2. The photo loses the tinted 0.1.x panel: tint is kept for the hero, the lit column, the mid CTA and the end
      block (B4), so the picture stands on the page with its caption under it.
   3. Comparison rows read claim, verdict, evidence: the verdict label and its qualifier share one line under the
      claim, instead of a label at the top and the same verdict repeated in grey at the bottom. */
main.rlc-article .prose > table:not([class]){width:100%; table-layout:auto; border-collapse:separate; border-spacing:0;
  font:400 16px/1.55 var(--sans); color:var(--body-ink, var(--text)); margin-top:32px !important}
main.rlc-article .prose > table:not([class]) + *{margin-top:32px !important}
main.rlc-article .prose > table:not([class]) th{font:600 14px/1.35 var(--sans); color:var(--muted); text-align:left; vertical-align:bottom;
  padding:0 20px 12px 0; border-bottom:1px solid var(--ink)}
main.rlc-article .prose > table:not([class]) td{padding:14px 20px 14px 0; vertical-align:top; border-bottom:1px solid var(--rule)}
main.rlc-article .prose > table:not([class]) :is(th, td):last-child{padding-right:0}
main.rlc-article .prose > table:not([class]) td:first-child{font-weight:600; color:var(--ink)}
main.rlc-article .prose > table:not([class]) :is(th, td).num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums lining-nums}
main.rlc-article .prose > table:not([class]) td a{white-space:nowrap}
@media (min-width:640px){
  main.rlc-article .prose > table:not([class]) th.short{white-space:nowrap}
  main.rlc-article .prose > table:not([class]) td:not(:last-child){min-width:6em}
}
@media (max-width:639px){
  main.rlc-article .prose > table:not([class]){font-size:15.5px}
  main.rlc-article .prose > table:not([class]) th{padding-right:14px}
  main.rlc-article .prose > table:not([class]) td{padding:12px 14px 12px 0}
  main.rlc-article .prose > table:not([class])[data-stack], main.rlc-article .prose > table[data-stack] tbody,
  main.rlc-article .prose > table[data-stack] tr, main.rlc-article .prose > table[data-stack] td{display:block; width:auto}
  main.rlc-article .prose > table[data-stack] thead{display:none}
  main.rlc-article .prose > table[data-stack] tr{padding:16px 0; border-top:1px solid var(--rule)}
  main.rlc-article .prose > table[data-stack] tr:last-child{border-bottom:1px solid var(--rule)}
  main.rlc-article .prose > table[data-stack] td{padding:0; border:0}
  main.rlc-article .prose > table[data-stack] td:first-child{font-size:16px; line-height:1.4; margin-bottom:10px}
  main.rlc-article .prose > table[data-stack] td + td{margin-top:8px}
  main.rlc-article .prose > table[data-stack] td + td::before{content:attr(data-label); display:block; font:500 13px/1.4 var(--sans); color:var(--muted); margin-bottom:1px}
}

main.rlc-article .prose > .photo{background:none; border-radius:0; padding:0}
main.rlc-article .prose > .photo img{border-radius:var(--r-m); width:100%; max-width:100%; margin-inline:0}
main.rlc-article .prose > .photo figcaption{margin-top:10px; padding:0; font:400 14px/1.45 var(--sans); color:var(--muted); max-width:var(--col, 34em)}
@media (min-width:900px){ main.rlc-article .prose > .photo{padding:0} }

main.rlc-article .cmp-row{grid-template-columns:auto minmax(0, 1fr); column-gap:10px; row-gap:8px; align-items:center}
main.rlc-article .cmp-head{display:contents}
main.rlc-article .cmp-claim{grid-column:1 / -1; order:0}
main.rlc-article .cmp-pill{order:1; grid-column:1; justify-self:start; padding:5px 10px; font-size:13px}
main.rlc-article .cmp-note{order:1; grid-column:2; font:500 14px/1.4 var(--sans); color:var(--ink)}
main.rlc-article .cmp-field{order:2; grid-column:1 / -1; margin-top:2px}

/* 0.2.3: the article photo. No panel and no visible caption: the caption stays in the HTML for search and screen
   readers. The picture is the one large thing on the page: rlc-article.js runs it out to the edges of the article
   grid where nothing sits beside it (left once the rail has ended, right while there is no side card), on a phone
   it runs edge to edge. Without JS it fills the text column. */
main.rlc-article .prose > .photo{margin-top:48px !important; margin-bottom:48px !important}
main.rlc-article .prose > .photo img{display:block; aspect-ratio:3/2; object-fit:cover; background:var(--photo-ground, var(--tint))}
main.rlc-article .prose > .photo.is-wide img{aspect-ratio:16/9}
main.rlc-article .prose > .photo figcaption{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
@media (max-width:639px){
  main.rlc-article .prose > .photo{margin-inline:calc(50% - 50vw) !important; margin-top:32px !important; margin-bottom:32px !important}
  main.rlc-article .prose > .photo img{aspect-ratio:4/3; border-radius:0}
  main.rlc-article .prose > .photo + *{margin-top:0 !important}
}

/* 0.2.4: blocks the 64-article scan of 0.2.3 found broken or loud.
   1. Before/after figures sit on one grid: value, arrow, value. When a value is a phrase ("2 to 3 symptoms"),
      rlc-article.js sets .is-text and the figures drop to a size a phrase can carry. On a phone the pair stacks
      and the arrow points down.
   2. The dark quote panel goes: it was the only dark block in the article and louder than the call to action.
      Both quote styles now share one look, a short accent rule over display type; the 0.1.x "field" quote is
      the larger of the two. The hanging quote mark stays where the gutter can hold it.
   3. An empty photo slot is hidden, the check list sits on the text edge, table cells keep the table's size. */
main.rlc-article .stat .stat-pair{display:grid; grid-template-columns:minmax(0, max-content) auto minmax(0, max-content);
  justify-content:start; align-items:end; column-gap:24px; row-gap:8px}
main.rlc-article .stat .stat-pair > .stat-arrow{margin:0 0 14px}
main.rlc-article .stat.is-text .stat-num{font-size:30px; line-height:1.08; letter-spacing:-.01em; text-wrap:balance}
main.rlc-article .stat.is-text .stat-pair > .stat-arrow{margin-bottom:6px}
@media (min-width:640px){ main.rlc-article .stat.is-text .stat-num{font-size:36px} }
@media (min-width:900px){ main.rlc-article .stat.is-text .stat-num{font-size:38px} main.rlc-article .stat.is-text .stat-pair{column-gap:28px} }
@media (max-width:639px){
  main.rlc-article .stat .stat-pair{grid-template-columns:minmax(0, 1fr)}
  main.rlc-article .stat .stat-pair > .stat-arrow{transform:rotate(90deg); margin:4px 0; width:24px; height:24px}
}

main.rlc-article .prose > blockquote.field, main.rlc-article .prose > blockquote.pull{background:none; border:0; border-radius:0;
  padding:0; margin:48px 0 !important; max-width:var(--col, 680px)}
main.rlc-article .prose > blockquote.field::before, main.rlc-article .prose > blockquote.pull::before{content:""; display:block;
  width:48px; height:2px; border-radius:2px; background:var(--accent); margin-bottom:20px}
main.rlc-article .prose > blockquote.pull::after{content:none}
main.rlc-article .prose > blockquote.field p, main.rlc-article .prose > blockquote.pull p{font-family:var(--display); font-weight:400;
  color:var(--ink); line-height:1.1; text-wrap:balance; max-width:none; text-indent:0}
main.rlc-article .prose > blockquote.field p{font-size:32px}
main.rlc-article .prose > blockquote.field .mark{color:inherit}
main.rlc-article .prose > blockquote.pull p, main.rlc-article .prose > blockquote.pull{font-size:26px}
@media (min-width:900px){
  main.rlc-article .prose > blockquote.field, main.rlc-article .prose > blockquote.pull{margin:56px 0 !important}
  main.rlc-article .prose > blockquote.field p{font-size:42px; line-height:1.06; text-indent:-.34em}
  main.rlc-article .prose > blockquote.pull p, main.rlc-article .prose > blockquote.pull{font-size:32px}
  main.rlc-article .prose > blockquote.pull p{text-indent:-.36em}
}

main.rlc-article .prose > figure.slot-photo:not(:has(img)){display:none}
main.rlc-article .prose > ul.checks{padding-left:0}
main.rlc-article .prose > table:not([class]) td{font-size:inherit}
@media (max-width:639px){ main.rlc-article .prose > table:not([class]) th.num{white-space:normal} }

/* 0.2.6: what the visual pass of all 64 live articles found in the template.
   1. Comparison cards: the row title carries its column name too (rlc-article.js), set like the field labels.
   2. A plain bullet list inside a block sits inside the text edge, clear of the block title, with air between items.
   3. The source line under a pull quote is small sans, not the 32px quote size it inherited in 0.2.4; the gap after
      a quote matches the gap before it.
   4. A step block or list block after a paragraph gets a block gap, not the paragraph gap. */
main.rlc-article .cmp-claim .cmp-lab{display:block; font:600 var(--ui-xs)/1.4 var(--sans); color:var(--muted); margin-bottom:2px}
main.rlc-article .block > ul:not([class]){list-style:disc; padding-left:1.25em; margin-top:14px; display:grid; gap:10px}
main.rlc-article .block > ul:not([class]) li{padding-left:2px; line-height:1.6}
main.rlc-article .block > ul:not([class]) li::marker{color:var(--accent)}
main.rlc-article .block > :is(ul, ol) + :is(h3, h4, p.block-title, .block-title){margin-top:28px}
main.rlc-article .prose > blockquote.pull{font-size:inherit}
main.rlc-article .prose > blockquote.pull p:not(.stat-src){font-size:26px}
main.rlc-article .prose > blockquote:is(.pull, .field) :is(p.stat-src, cite, footer){display:block; margin-top:14px; text-indent:0;
  font:500 var(--ui-s, 14px)/1.45 var(--sans); font-style:normal; color:var(--muted)}
main.rlc-article .prose > blockquote:is(.pull, .field) + *{margin-top:40px !important}
main.rlc-article .prose > p + .block{margin-top:40px !important}
@media (min-width:900px){
  main.rlc-article .prose > blockquote.pull p:not(.stat-src){font-size:32px}
  main.rlc-article .prose > blockquote:is(.pull, .field) + *{margin-top:48px !important}
  main.rlc-article .prose > p + .block{margin-top:48px !important}
}