/* dpdpa.support: articles section. Loads after site.css.
   Light, text-first: white page, navy for text, headings and hairlines, red only on the one buy button.
   Colours come from the shared palette in site.css; the fallbacks apply only if a variable is missing. */
:root {
  --a-navy: var(--ink, #1E2A5E);
  --a-red: var(--accent, #D32B2B);
  --a-red-dark: var(--accent-dark, #B42121);
  --a-ink: var(--text, #1B2240);
  --a-muted: var(--muted, #4E5677);
  --a-line: var(--line, #E3E6EE);
  --a-panel: var(--bg-alt, #F7F8FA);
  --a-page: var(--bg, #FFFFFF);
  /* About 68 characters per line of Inter at 18px (measured in the browser: 32em = 571px); ch overstates it */
  --a-measure: 32em;
}
body { background: var(--a-page); }

/* Header area of each page: plain white, hairline underneath */
.art-hero { background: var(--a-page); color: var(--a-ink); padding: clamp(32px, 5vw, 56px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--a-line); }
.art-hero .crumbs { color: var(--a-muted); }
.art-hero .crumbs a { color: var(--a-navy); }
.art-hero .chip.ghost { color: var(--a-navy); box-shadow: inset 0 0 0 1px var(--a-line); background: transparent; }
.art-hero h1 { color: var(--a-navy); font-size: clamp(1.9rem, 4.4vw, 2.9rem); max-width: 22em; margin: 14px 0 14px; overflow-wrap: break-word; }
.art-hero .lede { color: var(--a-muted); max-width: 40em; }
.art-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--a-muted); }
.art-meta .checked { color: var(--a-navy); }

.art-section { padding: clamp(36px, 5vw, 64px) 0; }
.art-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .art-grid { grid-template-columns: minmax(0, var(--a-measure)) 300px; justify-content: space-between; gap: 64px; align-items: start; } }
.art-grid > * { min-width: 0; }

/* Reading column: ~68 characters, 18px, line-height 1.7 */
.prose { max-width: var(--a-measure); font-size: 18px; line-height: 1.65; color: var(--a-ink); }
.prose h2 { position: relative; font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; margin: 2.9em 0 0.75em; padding-top: 1.35em; border-top: 1px solid var(--a-line); color: var(--a-navy); scroll-margin-top: 84px; }
.prose h2::before { content: ''; position: absolute; left: 0; top: -2px; width: 44px; height: 3px; background: var(--a-navy); }
.art-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.art-body > h2:first-child::before { display: none; }
.prose h3 { font-size: 1.05rem; margin: 1.6em 0 0.5em; color: var(--a-navy); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--a-navy); }
.prose strong { color: var(--a-ink); }
.prose a { color: var(--a-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--a-line); text-decoration-thickness: 2px; }
.prose a:hover { text-decoration-color: var(--a-navy); }

/* Tables: hairlines only. Desktop scrolls inside its own box if needed; phones stack. */
.table-wrap { margin: 1.4em 0 1.6em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.92rem; line-height: 1.55; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--a-line); }
.table-wrap thead th { color: var(--a-navy); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; border-bottom: 1px solid var(--a-navy); }
.table-wrap tbody th { color: var(--a-navy); font-weight: 700; white-space: nowrap; }
.table-wrap tbody th .cite { display: block; white-space: normal; font-weight: 600; margin-top: 2px; color: var(--a-muted); }

/* Sources: off-white panel, thin border */
.sources-box { margin: 3em 0 0; padding: 24px; border-radius: 8px; background: var(--a-panel); border: 1px solid var(--a-line); }
.sources-box h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 1.15rem; }
.sources-box h2::before { display: none; }
.sources-box .src-intro { font-size: 0.92rem; color: var(--a-muted); margin-bottom: 14px; }
.sources-box h3 { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-navy); margin: 20px 0 8px; }
.sources-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.sources-box li { display: grid; gap: 1px; font-size: 0.92rem; line-height: 1.45; margin: 0; padding: 8px 0; border-top: 1px solid var(--a-line); }
.sources-box li strong { color: var(--a-navy); }
.sources-box li span { color: var(--a-muted); }

.art-disclaimer { margin-top: 24px; font-size: 0.92rem; color: var(--a-muted); }
.art-disclaimer strong { color: var(--a-ink); }

/* Sidebar: contents list + CTA */
.art-aside { display: grid; gap: 24px; }
/* Only the CTA box sticks (the contents list scrolls away), and only on viewports at least 900px tall,
   so the buy button is never cut off on a laptop screen. */
@media (min-width: 1000px) { .art-aside { align-self: stretch; } }
/* From 1100px the contents list and the buy box scroll with the reader; the box scrolls inside itself on a short window. */
/* From 1100px the buy box and the contents list stick together. The box comes first and always shows whole;
   only the contents list scrolls inside itself when the window is short. */
.art-aside-in { display: grid; gap: 24px; }
@media (min-width: 1100px) {
  .art-aside-in { position: sticky; top: 88px; max-height: calc(100vh - 104px); display: flex; flex-direction: column; gap: 20px; }
  .art-aside-in .art-cta { flex: none; }
  .art-aside-in .toc { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
}
@media (min-width: 1100px) and (max-height: 700px) { .art-aside-in { position: static; max-height: none; } .art-aside-in .toc { overflow: visible; } }
.toc h2 { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-navy); margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--a-line); }
.toc a { display: block; padding: 5px 0 5px 14px; font-size: 0.9rem; font-weight: 500; line-height: 1.35; text-decoration: none; color: var(--a-muted); }
.toc a:hover { color: var(--a-navy); }
@media (max-width: 1099px) { .toc { display: none; } }
.toc a.on { color: var(--a-navy); font-weight: 700; box-shadow: inset 2px 0 0 var(--a-navy); }

.art-cta { padding: 22px; border-radius: 8px; background: var(--a-page); border: 1px solid var(--a-line); color: var(--a-ink); }
.art-cta .cta-kicker { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
.art-cta h2 { color: var(--a-navy); font-size: 1.2rem; line-height: 1.3; margin: 10px 0 8px; letter-spacing: -0.01em; }
.art-cta p { color: var(--a-muted); font-size: 0.95rem; margin: 0 0 16px; }
.art-cta .cta-row { display: grid; }
.art-cta .btn { width: 100%; }
.art-cta .btn-red { background: var(--a-red); color: #fff; box-shadow: none; }
.art-cta .btn-red:hover { background: var(--a-red-dark); color: #fff; }
.art-cta .cta-buy { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--a-line); }
.art-cta .cta-buy p { margin: 0; }
.art-cta .cta-dates { font-size: 0.85rem; font-weight: 600; color: var(--a-navy); }
.art-cta .cta-link, .art-cta .cta-also a { color: var(--a-navy); font-weight: 700; font-size: 0.95rem; }
.art-cta .cta-also { margin: 12px 0 0; font-size: 0.92rem; }
.art-cta .cta-small { font-size: 0.85rem; color: var(--a-muted); }

/* Cards: related + index */
.art-related { border-top: 1px solid var(--a-line); padding: clamp(40px, 6vw, 72px) 0; }
.art-related h2 { color: var(--a-navy); font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 20px; }
.art-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .art-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .art-related .art-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.art-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: 8px; background: var(--a-page); border: 1px solid var(--a-line); text-decoration: none; color: var(--a-ink); transition: border-color .2s ease; }
.art-card a:hover { border-color: var(--a-navy); color: var(--a-ink); }
.art-card .chip.ghost { align-self: flex-start; background: transparent; color: var(--a-navy); box-shadow: inset 0 0 0 1px var(--a-line); }
.art-card h2, .art-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0; color: var(--a-navy); letter-spacing: -0.01em; }
.art-card p { margin: 0; color: var(--a-muted); font-size: 0.95rem; line-height: 1.55; }
.art-card-meta { margin-top: auto; font-size: 0.8rem; font-weight: 600; color: var(--a-muted); }
.all-link { margin: 24px 0 0; font-weight: 700; }
.all-link a { color: var(--a-navy); }
.index-note { margin-top: 32px; }

/* Phones: tables become stacked blocks; each cell shows its column heading */
@media (max-width: 699px) {
  .prose { font-size: 17px; }
  .table-wrap { overflow: visible; }
  .table-wrap table { min-width: 0; display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tbody { display: block; border-top: 1px solid var(--a-navy); }
  .table-wrap tbody { border-top: 0; display: grid; gap: 10px; }
  .table-wrap tbody tr { display: block; padding: 12px 16px; border: 1px solid var(--a-line); border-radius: 8px; }
  .table-wrap tbody th, .table-wrap tbody td { display: block; border: 0; white-space: normal; padding: 4px 0; }
  .table-wrap td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); margin-bottom: 2px; }
}

/* site.css also defines .table-wrap (pricing page); neutralise it inside articles */
.prose .table-wrap { box-shadow: none; padding: 0; background: transparent; border: 1px solid var(--a-line); border-radius: 8px; }
.prose .table-wrap tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 699px) { .prose .table-wrap { border: 0; border-radius: 0; } .prose .table-wrap tbody tr:last-child > * { border-bottom: 0; } }

/* Small uppercase labels: UI sans, not the heading serif */
.toc h2, .sources-box h3 { font-family: var(--font-sans); }

/* Answer block under the H1, byline, FAQ and next steps (added 5 Oct 2026) */
.art-hero .lede.answer { color: var(--a-ink); font-size: 1.15rem; line-height: 1.6; max-width: 40em; }
.art-meta .byline a { color: var(--a-navy); text-decoration: underline; text-decoration-color: var(--a-line); text-decoration-thickness: 2px; }
.art-faq h2, .art-next h2 { scroll-margin-top: 90px; }
.art-faq h3 { font-size: 1.05rem; margin: 1.4em 0 0.35em; color: var(--a-navy); }
.art-faq p { margin: 0 0 1em; }
.art-next ul { margin: 0 0 1.15em; }

/* ---- Article template (6 Oct 2026): hero image, video, share, contents, news, next read ---- */
.art-hero-fig { margin: 6px 0 22px; max-width: 760px; }
.art-hero-fig img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--a-panel); }
.art-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; }
.art-meta-row .art-meta { margin: 0; }

.prose .art-fig { margin: 1.6em 0; }
.art-fig img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--a-panel); }
.art-fig figcaption, .art-video figcaption { margin-top: 8px; font-size: 0.88rem; color: var(--a-muted); }
.art-video figcaption .vname { font-weight: 600; color: var(--a-ink); }

/* Our video: the box has its own aspect ratio, so nothing moves when the poster or the video loads */
.prose .art-video { margin: 1.8em 0; max-width: 420px; }
.art-video-box { position: relative; width: 100%; background: #0E1638; border-radius: 10px; overflow: hidden; }
.art-video-box video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Share bars */
.share { display: block; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--a-line); background: var(--a-page); color: var(--a-navy); font: 600 0.92rem/1 var(--font-sans); cursor: pointer; text-decoration: none; transition: border-color .2s ease; }
.share-btn[hidden] { display: none; }
.share-btn:hover { border-color: var(--a-navy); color: var(--a-navy); }
.prose a.share-btn { text-decoration: none; font-weight: 600; }
.share-compact .share-btn { padding: 0; width: 44px; }
.share-full .share-btn { padding: 0 16px; }
.share-full { margin: 2.4em 0 0; padding-top: 1.4em; border-top: 1px solid var(--a-line); }
.prose .share-full .share-h { margin: 0 0 0.7em; padding: 0; border: 0; font-size: 1.15rem; }
.share-discuss { margin: 1em 0 0; font-weight: 600; }
.share-status { color: var(--a-navy); }

/* Contents: collapsible on phones and tablets, sidebar from 1100px */
.toc-m { margin: 0 0 1.6em; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-panel); }
.toc-m summary { display: flex; align-items: center; justify-content: space-between; list-style: none; min-height: 44px; padding: 0 16px; font-weight: 700; color: var(--a-navy); cursor: pointer; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: ''; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.toc-m[open] summary::after { transform: rotate(-135deg); }
.toc-m ol { list-style: none; margin: 0; padding: 0 16px 8px; }
.toc-m li { margin: 0; }
.toc-m a { display: block; padding: 11px 0; font-weight: 500; text-decoration: none; border-top: 1px solid var(--a-line); }
@media (min-width: 1100px) { .toc-m { display: none; } }

/* In the news: outlet cards and official-video facades */
.art-news .news-list, .art-news .yt-list { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 12px; }
.art-news h3 { margin-top: 1.4em; }
.news-card { margin: 0; padding: 16px 18px; border: 1px solid var(--a-line); border-radius: 8px; display: grid; gap: 6px; }
.news-meta { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--a-muted); }
.prose .news-link { font-size: 1.05rem; line-height: 1.4; text-decoration: none; }
.prose .news-link:hover { text-decoration: underline; }
.news-card p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--a-muted); }
.yt-card { margin: 0; }
.prose a.yt-facade { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; border-radius: 8px; background: #1E2A5E; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none; }
.yt-facade:hover { background: #2A3875; }
.yt-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red-mark, #D41317); color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85); }
.yt-text { display: grid; gap: 2px; min-width: 0; }
.yt-title { font-weight: 700; line-height: 1.35; color: #fff; }
.yt-chan { font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); }
.yt-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Next read and related cards with a thumbnail */
.next-read { margin: 2em 0 0; }
.prose .next-read a { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--a-line); border-radius: 8px; text-decoration: none; color: var(--a-ink); font-weight: 400; }
.next-read a:hover { border-color: var(--a-navy); }
.next-read .art-card-img { width: 120px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; }
.nr-text { display: grid; gap: 4px; min-width: 0; }
.nr-kicker { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-muted); }
.nr-title { font-weight: 700; line-height: 1.35; color: var(--a-navy); }
.art-card.has-thumb a { padding: 0 0 18px; overflow: hidden; }
.art-card.has-thumb a > :not(.art-card-img) { margin-left: 22px; margin-right: 22px; }
.art-card .art-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--a-panel); }

@media (max-width: 599px) {
  .art-hero-fig { margin-bottom: 18px; }
  .art-hero-fig img, .art-video-box { border-radius: 8px; }
  .share-full .share-btn { flex: 1 1 calc(50% - 8px); }
  .next-read .art-card-img { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } }

/* ---- Round 2 (7 Oct 2026) ---- */
/* Hero: wide and short on desktop so the answer box stays above the fold */
@media (min-width: 1000px) {
  .art-hero-fig img { aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 0%;   /* top-anchored: every face in the 18 heroes sits in the upper 55% (Apple Vision check) */ }
}
/* Video: has sound (muted until the viewer turns it on), so the native volume controls stay */
.art-video-text { margin-top: 10px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-panel); }
.art-video-text summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: 0.95rem; color: var(--a-navy); cursor: pointer; }
.art-video-text ul { margin: 0; padding: 0 14px 12px 32px; font-size: 0.9rem; line-height: 1.5; color: var(--a-muted); }
.art-video-text li { margin-bottom: 0.35em; }
/* Sources: always open on desktop, folded on phones */
.sources-box > summary { list-style: none; cursor: default; }
.sources-box > summary::-webkit-details-marker { display: none; }
.sources-box > summary h2 { margin: 0 0 6px; }
@media (max-width: 699px) {
  .sources-box > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; }
  .sources-box > summary h2 { margin: 0; }
  .sources-box > summary::after { content: ''; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--a-navy); border-bottom: 2px solid var(--a-navy); transform: rotate(45deg); transition: transform .2s ease; }
  .sources-box[open] > summary::after { transform: rotate(-135deg); }
  .sources-box[open] > summary { margin-bottom: 6px; }
}
@media (min-width: 700px) { .sources-box > summary { pointer-events: none; } }

/* ---- Round 3 (7 Oct 2026): calmer titles, easier reading, swipe rails ---- */
.prose .share-full .share-h::before { display: none; }
/* Title: smaller and calmer, wraps in at most three lines on a phone */
.art-hero h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; max-width: 26em; margin: 12px 0 16px; }
/* The answer box reads as a highlighted summary card */
.art-hero .lede.answer { background: var(--a-panel); border: 1px solid var(--a-line); border-left: 4px solid var(--a-navy); border-radius: 8px; padding: 16px 20px; max-width: 760px; font-size: 1.1rem; line-height: 1.6; }
@media (max-width: 699px) { .art-hero .lede.answer { padding: 14px 16px; font-size: 1.05rem; } }
/* Existing markup only: quoted rule text, lead-in labels, dates in the first table column */
.prose blockquote.callout { margin: 1.6em 0; padding: 16px 20px; background: var(--a-panel); border: 1px solid var(--a-line); border-left: 4px solid var(--a-navy); border-radius: 8px; }
.prose blockquote.callout p:last-child { margin-bottom: 0; }
.prose strong { background: linear-gradient(to top, rgba(110, 130, 215, 0.2) 0.42em, transparent 0.42em); }
.table-wrap tbody th .cite { width: max-content; max-width: 100%; display: block; padding: 0 6px; border-radius: 4px; background: rgba(110, 130, 215, 0.16); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--a-navy); }
.table-wrap tbody th:first-child { color: var(--a-navy); }

/* Rails: desktop keeps the stacked or grid layout; the empty button bar is hidden */
.rail-ui { display: none; }
.faq-item { min-width: 0; }
@media (max-width: 699px) {
  .rail { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
          margin-left: calc(var(--gutter, 16px) * -1); margin-right: calc(var(--gutter, 16px) * -1); padding: 2px var(--gutter, 16px); scroll-padding-inline: var(--gutter, 16px); }
  .rail::-webkit-scrollbar { display: none; }
  .prose .rail-track { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .prose .art-body .rail-track { align-items: flex-start; }   /* body lists: each card is as tall as its own text */
  .rail-track.art-cards { display: flex; grid-template-columns: none; margin: 0; padding: 0; gap: 12px; }
  .prose ol.rail-track { counter-reset: none; }
  .rail-track > * { flex: 0 0 85%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; margin: 0; }
  .prose .rail-track > li, .faq-item { padding: 14px 16px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-page); font-size: 0.97rem; line-height: 1.55; }
  .prose ol.rail-track > li { list-style-position: inside; }
  .faq-item h3 { margin: 0 0 0.5em; font-size: 1rem; }
  .faq-item p { margin: 0; font-size: 0.95rem; }
  .sources-box .rail-track > li { padding: 12px 14px; }
  .rail-track > li:focus-visible, .rail-track > .faq-item:focus-visible, .rail-track > tr:focus-visible { outline: 2px solid var(--a-navy); outline-offset: 2px; }
  /* tables: one row per card */
  .prose .table-wrap.rail { padding: 2px var(--gutter, 16px); border: 0; overflow-x: auto; }
  .table-wrap.rail table { display: block; width: 100%; min-width: 0; }
  .table-wrap.rail tbody { display: flex; gap: 12px; border: 0; }
  .table-wrap.rail tbody tr { flex: 0 0 85%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; background: var(--a-page); }
  .art-cards.rail-track > .art-card { display: block; }
  .art-card.has-thumb a { padding: 0 0 16px; }
  /* Buttons and position, filled in by article.js; the bar has its height from the first paint */
  .js .rail-ui { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 8px 0 1.4em; }
  .rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--a-line); background: var(--a-page); color: var(--a-navy); cursor: pointer; }
  .rail-btn:disabled { opacity: 0.35; cursor: default; }
  .rail-pos { font-size: 0.9rem; font-weight: 700; color: var(--a-muted); font-variant-numeric: tabular-nums; }
  .art-related .rail-ui { margin-bottom: 0.4em; }
}

/* Journey card (how-to step and buy box): the home page's glowing edge. Content cards stay plain. */
.art-cta.glow-card { border: 0; border-radius: 16px; background: var(--surface, var(--a-page)); box-shadow: var(--halo, none); }

/* Rule 7 date chip: only on articles that cover a duty, with the true date. Red is the date chip, as elsewhere. */
.art-hero .chip.chip-date { margin-left: 6px; background: var(--accent); color: #fff; box-shadow: none; text-transform: none; letter-spacing: 0.02em; font-size: 0.78rem; }

/* Compact sticky twin of the buy box (desktop only, at least 1024px wide and 600px tall). It fades in when the sidebar block
   (box + contents) has scrolled out of view. The rail is absolutely placed over the whole sidebar column, so it adds no height
   (no layout shift) and the sticky card stops where the article column ends, above the footer. Hidden: no focus, no hit-testing. */
.cta-compact-rail, .art-cta-compact { display: none; }
@media (min-width: 1024px) and (min-height: 600px) {
  .art-aside { position: relative; }
  .cta-compact-rail { display: block; position: absolute; inset: 0; pointer-events: none; }
  .art-cta-compact { display: grid; gap: 10px; box-sizing: border-box; position: sticky; top: 96px; max-height: 340px; padding: 16px 18px; border-radius: 12px;
    background: var(--surface, var(--a-page)); border: 1px solid var(--a-line); box-shadow: var(--halo, 0 6px 22px rgba(15, 23, 42, 0.12)); color: var(--a-ink);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
  .art-cta-compact.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.15s ease, visibility 0s; }
  .art-cta-compact .cta-kicker { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
  .art-cta-compact .cc-doc { margin: 0; font-size: 0.92rem; line-height: 1.3; color: var(--a-navy); }
  .art-cta-compact .cc-name { font-weight: 700; }
  .art-cta-compact .cc-count { font-size: 0.8rem; font-weight: 700; color: var(--a-muted); white-space: nowrap; }
  .art-cta-compact .price-deadline { display: grid; gap: 2px; margin: 0; }
  .art-cta-compact .price-deadline p { margin: 0; font-size: 0.85rem; line-height: 1.35; color: var(--a-navy); }
  .art-cta-compact .price-lines { display: grid; gap: 2px; font-weight: 600; }
  .art-cta-compact .btn { width: 100%; margin: 2px 0 0; }
  .art-cta-compact .btn-red { background: var(--a-red); color: #fff; box-shadow: none; }
  .art-cta-compact .btn-red:hover { background: var(--a-red-dark); color: #fff; }
  .art-cta-compact .cc-link { font-size: 0.9rem; font-weight: 700; color: var(--a-navy); }
}
@media (prefers-reduced-motion: reduce) { .art-cta-compact, .art-cta-compact.is-on { transition: none; } }