/* Generated by _internal/news-events/sync-header.mjs; edit the News header source. */
#rn-site-header { display:contents; font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif; }
#rn-site-header [hidden] { display:none !important; }
#rn-site-header .brand-img, #rn-site-header .brand-r { filter:none !important; }
/*
 * news.css — the shared stylesheet for RegulatoryNews's standalone pages
 * (front page, topic hubs, about, corrections, 404).
 *
 * Deliberately NOT the article shell. Articles are rendered by the content engine from
 * templates/shell.html, which carries its own inline CSS — that is the engine's contract and this
 * file must not fight it. What this file does is hold the SAME tokens, the same type, and the same
 * chrome, so the two surfaces read as one publication.
 *
 * If a token here and a token in the shell ever disagree, the shell wins: it is what a reader sees
 * on the page they actually arrived on.
 *
 * THE FRONT PAGE LANGUAGE (2026-07-17 redesign — REDESIGN.md §6):
 * a publication, not a website. White ground, hairline rules, one accent used sparingly, and the
 * serif carrying every story headline. No gradients, no glass, no card shadows: hierarchy comes
 * from type scale and whitespace, and anything that is not a story earns its place or goes.
 */

#rn-site-header {
  --ink: #33373f;
  --ink-light: #454a54;
  --ink-deep: #23262b;
  --accent: #106d37;
  --accent-hover: #0d592d;
  --amber: #946938;
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-section: #fafbfd;
  --text: #1a202c;
  --text-muted: #4a5568;
  --text-light: #687489;
  --border: #e2e8f0;
  --border-strong: #cbd5e0;
  /* The headline face (BRAND-STYLE-GUIDE §3): Georgia at weight 400, the even text serif; the display webfont was retired 2026-09-24. */
  --serif: Georgia, "Times New Roman", serif;
}

#rn-site-header *,#rn-site-header  *::before,#rn-site-header  *::after { box-sizing: border-box; }

#rn-site-header {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/*
 * 1320px, matching the article shell's container exactly. These two stylesheets render the same
 * nav and the same footer, so a different container width means the masthead physically jumps
 * sideways as a reader moves from the front page into a story. The shell wins (BRAND-STYLE-GUIDE
 * §4), so this follows it.
 */
#rn-site-header .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

#rn-site-header a { color: var(--accent); }
#rn-site-header a:hover { color: var(--accent-hover); }

/* ── masthead ─────────────────────────────────────────────────────────────────────────────── */
/*
 * Structure and spacing are the article shell's nav, which is Regulatory Events' nav: 26px of
 * vertical padding rather than a min-height, links centred in their own .nav-center between the
 * brand and the container edge, and a hamburger below 768px. A reader moving between the front
 * page, a story, and the sibling site must not see the chrome shift.
 */
#rn-site-header nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  padding: 26px 0;
}
#rn-site-header nav .container { display: flex; align-items: center; justify-content: space-between; position: relative; }
/*
 * The family pull, matching RL and Events exactly: the brand sits outside the container so the R
 * monogram optically aligns to the viewport edge. The article shell carries the identical rule.
 */
#rn-site-header .brand-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  line-height: 0;
  margin-left: min(-8px, calc((1320px - 100vw) / 2 + 16px));
}
/* Mirrors the article shell's .brand-r exactly — same icon, same size, on both surfaces. */
#rn-site-header .brand-r {
  height: 57.6px;
  width: 57.6px;
  flex: none;
  display: block;
  border-radius: 12px;
  transform: translateY(-2px);
}
/*
 * The masthead is the artwork. REGULATORY is a custom serif with no font file, so the mark is an
 * image in every surface — 51.15px tall, which is the height the article shell already uses, so the
 * two surfaces render the identical mark at the identical size.
 */
#rn-site-header .brand-img { height: 51.15px; width: auto; display: block; }

/* Two-tier masthead (IA.md §3): this row's links are the utilities (Newsletter, Advertise,
   search), right-aligned exactly as the shell does; the sections live in .secbar beneath. */
#rn-site-header .nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 24px;
}
#rn-site-header .nav-drawer-only { display: none; }
#rn-site-header .nav-group-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 14px 14px 4px;
}
/* The section bar. Same rules as the shell (which wins). Not sticky; scrolls sideways when it
   cannot fit; the current page's link is marked by the small script that ships with the chrome. */
#rn-site-header .secbar { border-bottom: 1px solid var(--border); background: var(--bg); }
#rn-site-header .secbar-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#rn-site-header .secbar-list::-webkit-scrollbar { display: none; }
#rn-site-header .secbar-list li { flex: none; margin: 0; }
#rn-site-header .secbar-list a {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#rn-site-header .secbar-list li:first-child a { padding-left: 0; }
#rn-site-header .secbar-list a:hover { color: var(--accent); }
#rn-site-header .secbar-list a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Masthead tagline — TRUSTED. TIMELY. ESSENTIAL. beside the wordmark on wide desktops (owner mock
   2026-09-16). Absolutely placed so the bar's flex distribution (estate-dhead) is untouched; hidden
   below 1280px where the link row compacts. */
#rn-site-header .brand-tag { display: none; margin-left: 30px; margin-right: auto; align-self: center; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--text-light, #687489); white-space: nowrap; pointer-events: none; }
@media (min-width: 1280px) { #rn-site-header .brand-tag { display: block; } }
/* The Spotlight entry in the section bar: four-point star, small caps, a soft pill when current. */
#rn-site-header .secbar-list .secbar-spot a { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; gap: 7px; color: var(--accent); padding: 0 14px; }
#rn-site-header .secbar-list .secbar-spot .secbar-star { flex: none; }
/* No tinted pill on hover or when current (owner ruling 2026-09-27: "remove that highlight effect"); the
   item takes the bar's own hover colour and current-page underline like every other item. */
#rn-site-header .secbar-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 12px; }
/* Where the bar scrolls, a fade at the right edge says so. */
#rn-site-header .secbar .container { position: relative; }
#rn-site-header .secbar .container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%);
}
@media (min-width: 1181px) { #rn-site-header .secbar .container::after { display: none; } }
#rn-site-header .nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
#rn-site-header .nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
}
#rn-site-header .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#rn-site-header .nav-links a:hover { color: var(--accent); }
#rn-site-header .nav-links a:hover::after { opacity: 1; transform: scaleX(1); }

/* Header search — the same pill Events and the Academy carry. Submits ?q= to THE INDEX on the
   front page, which restores it on load. Focus ring lives on the container (:focus-within),
   never on the input inside. */
#rn-site-header .nav-search { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-soft); color: var(--text-light); transition: border-color 0.15s ease; }
#rn-site-header .nav-search:focus-within { border-color: var(--accent); color: var(--accent); }
#rn-site-header .nav-search svg { flex: none; }
#rn-site-header .nav-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); width: 244px; min-width: 0; }
#rn-site-header .nav-search input::placeholder { color: var(--text-light); }
#rn-site-header .nav-search input:focus-visible { outline: none; box-shadow: none; }
#rn-site-header .nav-search-item { display: flex; }

#rn-site-header .mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
#rn-site-header .mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#rn-site-header .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#rn-site-header .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#rn-site-header .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── the strap ────────────────────────────────────────────────────────────────────────────────
   One quiet line under the masthead: today's date (written by a two-line script; empty without
   JS, and nothing depends on it) and the publication's standing promise. This is the daily-brief
   signal — a newspaper knows what day it is — and it replaces the old marketing lede outright. */
#rn-site-header .strap { border-bottom: 1px solid var(--border); }
#rn-site-header .strap .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
#rn-site-header .strap-date {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  min-height: 1em;
}
#rn-site-header .strap-motto {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ── shared editorial atoms ───────────────────────────────────────────────────────────────── */
#rn-site-header .kicker {
  display: inline-block;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
#rn-site-header .story-meta { font-size: 13.5px; color: var(--text-light); margin: 0; }
#rn-site-header .story-meta .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); margin: 0 9px 3px; }
#rn-site-header .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

/* Section furniture: a small-caps label on a hairline, with an optional "View all" opposite.
   The label is deliberately quiet — the serif is reserved for the stories themselves. */
#rn-site-header .home-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: 14px;
  margin: 0 0 6px;
}
#rn-site-header .home-sec-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
#rn-site-header .home-sec-head h2 a { color: inherit; text-decoration: none; }
#rn-site-header .home-sec-head h2 a:hover { color: var(--accent); }
#rn-site-header .sec-viewall {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
#rn-site-header .sec-viewall:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── the front-page grid ──────────────────────────────────────────────────────────────────────
   Three columns, modelled on STAT's front page (2026-07-19 — REDESIGN.md §10): the LATEST rail on
   the left, TOP STORIES in the centre, DON'T MISS on the right, with vertical hairlines framing
   the centre. Every story entry on the page carries its thumbnail — no imageless lists. */
#rn-site-header .stories { padding: 0 0 24px; }
#rn-site-header .home-grid {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 288px;
  grid-template-areas: "latest main right";
  gap: 0 clamp(22px, 2vw, 32px);
  padding-top: 34px;
}
#rn-site-header .rail-left { grid-area: latest; min-width: 0; }
#rn-site-header .rail-right { grid-area: right; min-width: 0; }
#rn-site-header .home-main {
  grid-area: main;
  min-width: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 clamp(22px, 2vw, 32px);
}

/* The balancer's hidden candidates (surfaces.js renders them `hidden data-extra`; the front
   page's balance script reveals what fits). Author `display` values beat the UA [hidden] rule,
   so it has to be said. */
#rn-site-header .rail-item[hidden],#rn-site-header  .rail-card[hidden],#rn-site-header  .topic-item[hidden] { display: none; }

/* Left rail — the chronological river. Headline left, thumbnail right. */
#rn-site-header .rail-feed { display: grid; }
#rn-site-header .rail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
#rn-site-header .rail-feed .rail-item:first-child { padding-top: 6px; }
#rn-site-header .rail-date {
  margin: 0 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Paid stories in the Latest rail are flagged in amber — the "labeled, not endorsed"
   tier (§2 of the brand guide: amber must stay distinct from the accent). */
#rn-site-header .rail-flag {
  color: var(--amber);
  margin-left: 6px;
}
#rn-site-header .rail-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.003em;
  margin: 0;
}
#rn-site-header .rail-item h3 a,#rn-site-header  .rail-card h3 a,#rn-site-header  .top-card h3 a {
  color: var(--ink-deep);
  text-decoration: none;
  transition: color 0.18s ease;
}
#rn-site-header .rail-item h3 a:hover,#rn-site-header  .rail-card h3 a:hover,#rn-site-header  .top-card h3 a:hover { color: var(--accent); }
#rn-site-header .rail-thumb { display: block; line-height: 0; margin-top: 4px; }
#rn-site-header .rail-thumb img,#rn-site-header  .rail-card-thumb img,#rn-site-header  .top-thumb img,#rn-site-header  .topic-item-thumb img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}
#rn-site-header .rail-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s ease;
}
#rn-site-header .rail-more svg { transition: transform 0.2s ease; }
#rn-site-header .rail-more:hover { color: var(--accent); }
#rn-site-header .rail-more:hover svg { transform: translateX(4px); }

/* Centre — the hero. Photo first, the category notched into its bottom-left corner (the white
   tab is the page ground cutting into the image), then the serif headline. */
#rn-site-header .hero { padding: 4px 0 30px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
#rn-site-header .hero-media { position: relative; display: block; line-height: 0; }
#rn-site-header .hero-media img { width: 100%; height: auto; border-radius: 2px; display: block; }
#rn-site-header .hero-notch {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--bg);
  padding: 10px 18px 0 0;
  border-radius: 0 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
}
#rn-site-header .hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 14px 0 12px;
  color: var(--ink-deep);
}
#rn-site-header .hero h1 a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
#rn-site-header .hero h1 a:hover { color: var(--accent); }
#rn-site-header .hero-dek {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 14px;
  max-width: 62ch;
}

/* Centre — the two-up card grid beneath the hero. */
#rn-site-header .top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(22px, 2vw, 32px);
}
#rn-site-header .top-thumb { display: block; line-height: 0; margin-bottom: 13px; }
#rn-site-header .top-card .kicker { margin-bottom: 7px; }
#rn-site-header .top-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.24;
  letter-spacing: -0.004em;
  margin: 0 0 8px;
}
#rn-site-header .top-dek {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right rail — image cards, then the newsletter promo. */
#rn-site-header .rail-card { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
#rn-site-header .rail-card-thumb { display: block; line-height: 0; margin-bottom: 12px; }
#rn-site-header .rail-card .kicker { margin-bottom: 6px; font-size: 11px; }
#rn-site-header .rail-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18.5px;
  line-height: 1.28;
  margin: 0 0 7px;
}
#rn-site-header .rail-nl {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 22px 22px 24px;
}
#rn-site-header .rail-nl .kicker { margin-bottom: 10px; }
#rn-site-header .rail-nl-copy { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
#rn-site-header .rail-nl-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
#rn-site-header .rail-nl-cta svg { transition: transform 0.2s ease; }
#rn-site-header .rail-nl-cta:hover { color: var(--accent-hover); }
#rn-site-header .rail-nl-cta:hover svg { transform: translateX(4px); }
/* The advertise promo card (generated by surfaces.js, below the newsletter promo).
   Amber kicker = the paid-content signal, same as the rail's Sponsored flags. */
#rn-site-header .rail-ad { margin-top: 14px; }
#rn-site-header .rail-ad .kicker { color: var(--amber); }

/* ── topic sections ───────────────────────────────────────────────────────────────────────────
   One section per topic that has EARNED a coverage hub (>= hubs.threshold stories — the same gate
   as the hub pages, so "View all" always has a real page behind it). Generated by surfaces.js;
   sections appear on their own as coverage accumulates. */
#rn-site-header .topic-secs { padding: 28px 0 0; }
#rn-site-header .topic-sec { margin-bottom: 36px; }
#rn-site-header .topic-sec:last-child { margin-bottom: 0; }
#rn-site-header .topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px clamp(32px, 4vw, 56px);
  padding-top: 12px;
}
#rn-site-header .topic-lead .topic-thumb { display: block; line-height: 0; margin-bottom: 16px; }
#rn-site-header .topic-lead img { width: 100%; height: auto; border-radius: 2px; display: block; }
#rn-site-header .topic-lead h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.22;
  margin: 0 0 8px;
}
#rn-site-header .topic-lead h3 a { color: var(--ink-deep); text-decoration: none; transition: color 0.18s ease; }
#rn-site-header .topic-lead h3 a:hover { color: var(--accent); }
#rn-site-header .topic-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 3vw, 48px); align-content: start; }
#rn-site-header .topic-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--border);
}
#rn-site-header .topic-item-thumb { display: block; line-height: 0; margin-top: 3px; }
#rn-site-header .topic-item h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.28;
  margin: 0 0 6px;
}
#rn-site-header .topic-item h4 a { color: var(--ink-deep); text-decoration: none; transition: color 0.18s ease; }
#rn-site-header .topic-item h4 a:hover { color: var(--accent); }

/* Anchors from the nav and footer; keep the target clear of the sticky bar. */
#rn-site-header #topics,#rn-site-header  #latest,#rn-site-header  #newsletter { scroll-margin-top: 120px; }

/* ── the Spotlight band (front page, generated by surfaces.js) ────────────────────────────────
   The company-milestone series, three newest as photo cards under a header that carries the
   series strap. Same grammar as the centre's two-up cards; the serif strap is the accent. */
#rn-site-header .spot-band { padding: 28px 0 0; }
#rn-site-header .spot-head { align-items: baseline; }
#rn-site-header .spot-strap {
  flex: 1;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--text-muted);
  padding-left: 18px;
}
#rn-site-header .spot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(22px, 2.4vw, 36px);
  padding-top: 14px;
}
#rn-site-header .spot-thumb { display: block; line-height: 0; margin-bottom: 13px; }
#rn-site-header .spot-thumb img { width: 100%; height: auto; border-radius: 2px; display: block; }
#rn-site-header .spot-card .kicker { margin-bottom: 7px; }
/* A listed company's kicker carries a ticker row beneath the name (its own line, so a long company
   name and a short one line up the same way); assets/quote.js reveals the hidden hook beside the
   symbol with a delayed price and day change (the "Delayed · time" note stays on the article's
   fact card, where there is room for it). Hook hidden = the page reads exactly as built. */
#rn-site-header .spot-tick { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); }
#rn-site-header .spot-tick .q-sym { color: var(--ink-deep); }
#rn-site-header .spot-tick [data-quote] { display: inline-flex; align-items: baseline; gap: 6px; letter-spacing: .02em; }
#rn-site-header .spot-tick [data-quote][hidden] { display: none; }
#rn-site-header .spot-tick .q-px { color: var(--ink-deep); }
#rn-site-header .spot-tick .is-up .q-chg { color: #127a3e; }
#rn-site-header .spot-tick .is-down .q-chg { color: #b42318; }
#rn-site-header .spot-tick .q-meta { display: none; }
/* During U.S. trading hours the chip carries a pulsing dot: the price is refreshing every minute. */
#rn-site-header .spot-tick .q-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #127a3e; margin-left: 2px; vertical-align: middle; animation: spot-tick-pulse 1.6s ease-in-out infinite; }
#rn-site-header .spot-tick [data-quote].is-live .q-meta { display: inline-flex; align-items: center; font-size: 0; }
@keyframes spot-tick-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #rn-site-header .spot-tick .q-live { animation: none; } }
#rn-site-header .spot-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.24;
  letter-spacing: -0.004em;
  margin: 0 0 8px;
}
#rn-site-header .spot-card h3 a { color: var(--ink-deep); text-decoration: none; transition: color 0.18s ease; }
#rn-site-header .spot-card h3 a:hover { color: var(--accent); }
#rn-site-header .spot-dek {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 960px) { #rn-site-header .spot-grid { grid-template-columns: 1fr; } #rn-site-header .spot-strap { display: none; } }

/* ── agencies band + deadlines band (front page, generated by surfaces.js) ────────────────────
   Compact columns of the newest stories per agency hub, and the newest dated stories. Rows reuse
   the Latest rail's grammar (date · serif headline · 84px thumbnail) so every story entry on the
   page still carries a picture. */
#rn-site-header .agency-band,#rn-site-header  .dates-band { padding: 32px 0 0; }
#rn-site-header .agency-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
#rn-site-header .agency-col { min-width: 0; }
#rn-site-header .home-sec-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
#rn-site-header .home-sec-head h3 a { color: inherit; text-decoration: none; }
#rn-site-header .home-sec-head h3 a:hover { color: var(--accent); }
#rn-site-header .dates-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
@media (max-width: 1100px) { #rn-site-header .agency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { #rn-site-header .dates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #rn-site-header .agency-grid,#rn-site-header  .dates-grid { grid-template-columns: 1fr; } }

/* ── the archive band (front page) ───────────────────────────────────────────────────────────
   Replaces THE INDEX on the front page: a search box that lands on /archive, and one link per
   section. No script; the explorer lives on the archive page and the hubs. */
#rn-site-header .archive-band { margin-top: 36px; border-top: 1px solid var(--border); padding: 40px 0 36px; }
#rn-site-header .archive-band .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px clamp(32px, 5vw, 80px);
  align-items: center;
}
#rn-site-header .archive-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--ink-deep);
}
#rn-site-header .archive-band h2 em { font-style: italic; color: var(--accent); }
#rn-site-header .archive-band p { margin: 0; color: var(--text-muted); font-size: 16.5px; line-height: 1.6; max-width: 46ch; }
#rn-site-header .archive-form { max-width: none; margin: 0 0 14px; }
#rn-site-header .archive-form input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  transition: border-color 0.18s ease;
}
#rn-site-header .archive-form input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#rn-site-header .archive-form input[type="search"]::placeholder { color: var(--text-light); }
#rn-site-header .archive-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
#rn-site-header .archive-links { display: flex; flex-wrap: wrap; gap: 8px; }
#rn-site-header .archive-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 13px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#rn-site-header .archive-links a:hover { color: var(--ink); border-color: var(--ink); }
/* ---- archive band v2 (owner request 2026-09-20: "really needs help on mobile"). The markup from
   scripts/surfaces.js now carries phone-only parts. Desktop first: everything new is either hidden or
   dissolved (display: contents) so the band reads exactly as it did, plus one quiet "Try" line (the
   old placeholder carried the examples and was cut off at every width). ---- */
#rn-site-header .archive-band p.archive-eyebrow,#rn-site-header  .archive-band p.archive-cap { display: none; }
#rn-site-header .archive-glass,#rn-site-header  .archive-go-ico,#rn-site-header  .archive-all-n { display: none; }
#rn-site-header .archive-form { margin: 0 0 9px; }
#rn-site-header .archive-band p.archive-try { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 14px; max-width: none; font-size: 13px; line-height: 1.4; color: var(--text-light); }
#rn-site-header .archive-try span { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }
#rn-site-header .archive-try a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(16, 109, 55, 0.35); text-underline-offset: 3px; }
#rn-site-header .archive-try a:hover { text-decoration-color: currentColor; }
#rn-site-header .archive-browse { display: flex; flex-wrap: wrap; gap: 8px; }
#rn-site-header .archive-group,#rn-site-header  .archive-group .archive-links { display: contents; }
#rn-site-header .archive-all { font-size: 13px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: 3px; padding: 8px 13px; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }
#rn-site-header .archive-all:hover { color: var(--ink); border-color: var(--ink); }
#rn-site-header .archive-all-arrow { margin-left: 5px; }

/* Phones and small tablets: one column, designed. */
@media (max-width: 860px) {
  #rn-site-header .archive-band { margin-top: 28px; padding: 44px 0 42px; background: linear-gradient(180deg, #ffffff 0%, #f3f9f5 100%); }
  #rn-site-header .archive-band .container { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #rn-site-header .archive-band .container > * { min-width: 0; }   /* the sideways rows must not widen the column */
  #rn-site-header .archive-band p.archive-eyebrow { display: block; margin: 0 0 12px; max-width: none; font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
  #rn-site-header .archive-band h2 { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.04; margin: 0 0 12px; }
  #rn-site-header .archive-band p.archive-sub { font-size: 16px; line-height: 1.55; max-width: 34ch; }
  #rn-site-header .archive-count { font-weight: 700; color: var(--ink-deep); }
  #rn-site-header .archive-more { display: none; }

  /* the search: one pill. Ring on the pill (:focus-within), the inner input's own outline off: both halves.
     (The old column layout gave the input flex: 1 with no basis, which collapsed it to 20px tall.) */
  #rn-site-header .archive-band .archive-form {
    flex-direction: row; align-items: center; gap: 4px; max-width: none; height: 58px; margin: 0 0 12px; padding: 0 6px 0 18px;
    border: 1px solid var(--border-strong); border-radius: 999px; background: #ffffff;
    box-shadow: 0 1px 0 #ffffff inset, 0 14px 30px -20px rgba(16, 60, 36, 0.45);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  #rn-site-header .archive-band .archive-form:focus-within { border-color: var(--accent); box-shadow: 0 1px 0 #ffffff inset, 0 14px 30px -20px rgba(16, 60, 36, 0.45), 0 0 0 3px rgba(16, 109, 55, 0.20); }
  #rn-site-header .archive-glass { display: block; flex: none; color: var(--accent); }
  #rn-site-header .archive-band .archive-form input[type="search"] { flex: 1 1 auto; width: auto; height: 100%; padding: 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; }
  #rn-site-header .archive-band .archive-form input[type="search"]:focus,#rn-site-header  .archive-band .archive-form input[type="search"]:focus-visible { outline: none; border: 0; box-shadow: none; }
  #rn-site-header .archive-band .archive-form button {
    flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #17944a 0%, #0d592d 100%); box-shadow: 0 2px 5px rgba(13, 89, 45, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  #rn-site-header .archive-go-txt { display: none; }
  #rn-site-header .archive-go-ico { display: block; }

  #rn-site-header .archive-band p.archive-try { gap: 8px; margin: 0 0 6px; font-size: 13.5px; }
  #rn-site-header .archive-try span { margin-right: 2px; }
  #rn-site-header .archive-try a { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; background: rgba(16, 109, 55, 0.08); text-decoration: none; }

  /* the hubs, grouped; the whole archive is its own button */
  #rn-site-header .archive-browse { display: block; }
  #rn-site-header .archive-group { display: block; }
  #rn-site-header .archive-band p.archive-cap { display: block; margin: 20px 0 9px; max-width: none; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); }
  #rn-site-header .archive-group .archive-links { display: flex; flex-wrap: wrap; gap: 8px; }
  #rn-site-header .archive-links a { display: inline-flex; align-items: center; height: 44px; padding: 0 17px; border-radius: 999px; border-color: rgba(16, 109, 55, 0.22); background: #ffffff; color: var(--ink-deep); font-size: 14.5px; white-space: nowrap; }
  #rn-site-header .archive-links a:active { background: rgba(16, 109, 55, 0.08); }
  #rn-site-header .archive-all {
    display: flex; align-items: center; gap: 10px; margin-top: 24px; height: 58px; padding: 0 20px 0 22px; border: 0; border-radius: 18px;
    background: var(--ink-deep); color: #ffffff; font-size: 16px; font-weight: 700;
    box-shadow: 0 16px 30px -18px rgba(20, 23, 27, 0.7);
  }
  #rn-site-header .archive-all:hover { color: #ffffff; }
  #rn-site-header .archive-all-txt { margin-right: auto; }
  #rn-site-header .archive-all-n { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(47, 220, 128, 0.16); color: #5df0a0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
  #rn-site-header .archive-all-arrow { margin-left: 0; font-size: 18px; line-height: 1; }
}
/* Phones: each row (the examples and the three groups) runs sideways and bleeds to the screen edge, with a
   fade on the right to say there is more. scroll-padding keeps the first chip on the 24px page margin. */
@media (max-width: 700px) {
  #rn-site-header .archive-band p.archive-try,#rn-site-header  .archive-group .archive-links {
    flex-wrap: nowrap; overflow-x: auto; margin-left: -24px; margin-right: -24px; padding: 2px 24px 4px; scroll-padding: 0 24px; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), rgba(0,0,0,0) 100%);
  }
  #rn-site-header .archive-band p.archive-try::-webkit-scrollbar,#rn-site-header  .archive-group .archive-links::-webkit-scrollbar { display: none; }
  #rn-site-header .archive-try span,#rn-site-header  .archive-try a,#rn-site-header  .archive-links a { flex: none; }
  #rn-site-header .archive-try a { white-space: nowrap; }
  #rn-site-header .archive-links a { scroll-snap-align: start; }
  #rn-site-header .archive-try a:last-child,#rn-site-header  .archive-group .archive-links a:last-child { margin-right: 20px; }
  #rn-site-header .archive-band p.archive-cap { margin-top: 16px; }
}
/* ---- /archive band v2 ---- */

/* The explorer's own rules are extracted from the shell onto archive.html and the hubs and must
   not be copied here (the shell is the single source). This is an OVERRIDE, not a copy: the
   shell's 1140px container suits an article page, but on these pages every other section runs
   1320px, and the indented left edge read as a mistake. */
#rn-site-header .article-index .container { max-width: 1320px; }
#rn-site-header .hub-page .article-index,#rn-site-header  .archive-page .article-index { padding-top: 36px; border-top: 0; }
#rn-site-header .lede--hub { padding-bottom: 0; }
#rn-site-header .lede-count {
  margin-top: 16px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light) !important;
}

/* ── hub + prose pages ────────────────────────────────────────────────────────────────────── */
#rn-site-header .lede { padding: 56px 0 12px; }
#rn-site-header .lede h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  color: var(--ink-deep);
}
#rn-site-header .lede h1 em { font-style: italic; color: var(--accent); }
#rn-site-header .lede p { font-size: 19px; color: var(--text-muted); margin: 0; max-width: 62ch; }

/*
 * The hub answer paragraph (lib-hubs.js hubAnswer): one dense, dated, self-contained statement of
 * what the hub is, sitting between the lede and the story list. Set as a quiet standfirst rather
 * than a callout box — it is editorial context a reader skims past, not a banner, and the reason
 * it exists (a machine can quote it without the rest of the page) is not a reason to shout.
 */
#rn-site-header .hub-answer { padding: 18px 0 2px; }
#rn-site-header .hub-answer p {
  margin: 0;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-light);
  border-left: 2px solid var(--rule, rgba(51, 55, 63, 0.14));
  padding-left: 16px;
}
@media (max-width: 767px) {
  #rn-site-header .hub-answer { padding-top: 14px; }
  #rn-site-header .hub-answer p { font-size: 15px; padding-left: 13px; }
}

/* The hub story list (lib-hubs.js renders .story-row) and any future archive list. */
#rn-site-header .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 54px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
#rn-site-header .section-head h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; color: var(--ink); }
#rn-site-header .section-head span { font-size: 13px; color: var(--text-light); }
#rn-site-header .story-list { display: grid; gap: 0; }
#rn-site-header .story-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
#rn-site-header .story-row:last-child { border-bottom: 0; }
#rn-site-header .story-row-thumb img { width: 100%; height: auto; border-radius: 2px; display: block; }
#rn-site-header .story-row h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.24; letter-spacing: -0.005em; margin: 0 0 10px; }
#rn-site-header .story-row h3 a { color: var(--ink-deep); text-decoration: none; transition: color 0.18s ease; }
#rn-site-header .story-row h3 a:hover { color: var(--accent); }
#rn-site-header .story-row .story-tag { margin-bottom: 8px; }
#rn-site-header .story-row .story-meta { margin: 0; }
#rn-site-header .story-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
#rn-site-header .empty-note {
  padding: 34px 0 8px;
  color: var(--text-light);
  font-size: 15.5px;
  max-width: 64ch;
}

/* ── prose pages (about, corrections, 404) ────────────────────────────────────────────────── */
#rn-site-header .page { padding: 64px 0 84px; max-width: 760px; }
#rn-site-header .page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.005em; margin: 0 0 20px; color: var(--ink-deep); }
#rn-site-header .page h2 { font-size: 24px; letter-spacing: -0.01em; margin: 44px 0 12px; color: var(--ink); }
#rn-site-header .page p,#rn-site-header  .page li { color: var(--text-muted); }
#rn-site-header .page .standfirst { font-size: 20px; color: var(--text); }
#rn-site-header .page ul { padding-left: 22px; }
#rn-site-header .page li { margin: 9px 0; }
#rn-site-header .rule { height: 1px; background: var(--border); border: 0; margin: 40px 0; }
#rn-site-header .note {
  background: rgba(16, 109, 55, 0.05);
  border: 1px solid rgba(16, 109, 55, 0.16);
  border-radius: 3px;
  padding: 20px 24px;
  color: var(--text);
}
#rn-site-header .note strong { color: var(--ink); }

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */
/*
 * STAT-modelled (2026-07-19, at Connor's direction — supersedes the 2026-07-16 unified green
 * footer on this site): light ground, a compact brand block on the left, hairline-separated link
 * columns, and one small legal row under a top hairline. Quiet, like the rest of the page.
 */
#rn-site-header footer { background: #f3f9f5; /* brand-green tint of white (~5% #106d37) — matches Academy's cream footer, owner request 2026-07-19 */ border-top: 1px solid var(--border); margin-top: 0; }
#rn-site-header footer > .container { padding-top: 48px; }
#rn-site-header .footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) 1fr 1.1fr 1.2fr;
  gap: 36px;
  padding-bottom: 42px;
}
#rn-site-header .footer-col { border-left: 1px solid var(--border); padding-left: clamp(22px, 2.2vw, 34px); }
/* Footer lockup matches Events/Academy: icon 46px, wordmark 228px, gap 16px. */
#rn-site-header .footer-brand-link { display: inline-flex; align-items: center; gap: 16px; line-height: 0; text-decoration: none; margin-bottom: 18px; }
#rn-site-header .footer-mark-img { width: 46px; height: 46px; display: block; border-radius: 10px; }
#rn-site-header .footer-brand-img { width: 228px; max-width: 100%; height: auto; display: block; }
#rn-site-header .footer-tag { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 36ch; }
#rn-site-header .footer-social-row { display: flex; gap: 10px; }
#rn-site-header .footer-social { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-muted); text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease; }
#rn-site-header .footer-social:hover { color: var(--accent); border-color: var(--accent); }
#rn-site-header .footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 14px; color: var(--ink); }
#rn-site-header .footer-col-links { display: grid; gap: 9px; justify-items: start; }
#rn-site-header .footer-col-links--two { grid-template-columns: 1fr 1fr; column-gap: 18px; }
#rn-site-header .footer-col--coverage { min-width: 0; }
#rn-site-header .footer-col-links a { color: var(--text-muted); text-decoration: none; font-size: 14.5px; transition: color 0.15s ease; }
#rn-site-header .footer-col-links a:hover { color: var(--accent); }
#rn-site-header .footer-legal {
  border-top: 1px solid var(--border);
  padding: 16px 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  flex-wrap: wrap;
}
/* NOT --text-light: #687489 on the footer's green-tinted #f3f9f5 is 4.45:1 — under AA.
   #5d6a80 is the same tone one step darker, 5.2:1 on this background. */
#rn-site-header .footer-legal p { margin: 0; font-size: 13px; line-height: 1.6; color: #5d6a80; }
#rn-site-header .footer-legal a { color: #5d6a80; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
#rn-site-header .footer-legal a:hover { color: var(--accent); }
#rn-site-header .footer-legal-dot { margin: 0 10px; }
@media (max-width: 1020px) {
  #rn-site-header .footer-grid { grid-template-columns: repeat(3, 1fr); }
  #rn-site-header .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #rn-site-header .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  #rn-site-header .footer-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; }
  #rn-site-header .footer-legal { flex-direction: column; }
}

/* The grid steps down: three columns → centre + right with the river beneath → one column. */
@media (max-width: 1180px) {
  #rn-site-header .home-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "main right" "latest latest";
  }
  #rn-site-header .home-main { border-left: 0; padding-left: 0; }
  #rn-site-header .rail-left { margin-top: 48px; }
  #rn-site-header .rail-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 44px); }
}
@media (max-width: 860px) {
  #rn-site-header .home-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "right" "latest";
  }
  #rn-site-header .home-main { border-right: 0; padding-right: 0; }
  #rn-site-header .rail-right { margin-top: 44px; }
  #rn-site-header .rail-left { margin-top: 44px; }
  #rn-site-header .rail-feed { grid-template-columns: 1fr; }
  #rn-site-header .top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  #rn-site-header .topic-grid { grid-template-columns: 1fr; }
  /* Stacked, the lead thumb must not stretch past its native 520px — cap it near that. */
  #rn-site-header .topic-lead .topic-thumb img { max-width: 560px; }
}
@media (max-width: 640px) {
  #rn-site-header .topic-rest { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #rn-site-header .story-row { grid-template-columns: 120px 1fr; gap: 18px; }
  #rn-site-header .story-row h3 { font-size: 19px; }
  #rn-site-header .strap-motto { display: none; }
}

/* Brand steps down at the shell's breakpoints, not at News's own. */
@media (max-width: 1360px) {
  #rn-site-header .brand-r { height: 47.7px; width: 47.7px; }
}

/* NAV-FIT: with Advertise in the row (2026-07-26) the full-width search no longer fits down to
   the 768px hamburger. The search input yields width in steps; links and wordmark hold. Keep in
   sync with the same bands in templates/shell.html. */
@media (max-width: 1280px) and (min-width: 769px) {
  #rn-site-header .nav-links { gap: 28px; }
  #rn-site-header .nav-search input { width: 170px; }
}
@media (max-width: 1100px) and (min-width: 769px) {
  #rn-site-header .nav-links { gap: 22px; }
  #rn-site-header .nav-search input { width: 120px; }
}
@media (max-width: 990px) and (min-width: 769px) {
  #rn-site-header .nav-links { gap: 18px; }
  #rn-site-header .nav-search input { width: 84px; }
  /* The wordmark yields too — five links cannot share a row with the full-size artwork. */
  #rn-site-header .brand-link { gap: 16px; }
  #rn-site-header .brand-r { height: 44px; width: 44px; }
  #rn-site-header .brand-img { height: 40px; }
}
@media (max-width: 880px) and (min-width: 769px) {
  /* Last band before the hamburger: the search pill goes; search stays reachable from the
     front page's INDEX and inside the mobile drawer below 769px. */
  #rn-site-header .nav-search-item { display: none; }
}

/*
 * Phones. The wordmark plus the links do not fit on one 390px row, so the links move behind a
 * hamburger and the wordmark centres itself in the bar — the shell's behaviour, and Events'.
 */
@media (max-width: 768px) {
  /* The nav's backdrop-filter is a containing block for position:fixed children, which traps the
     menu panel inside the ~97px bar and collapses it to nothing. Events strips it here for exactly
     this reason; so does this. */
  #rn-site-header nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; }
  #rn-site-header nav .container { justify-content: space-between; gap: 12px; }
  #rn-site-header .brand-link { order: 1; gap: 0; }
  #rn-site-header .nav-center { order: 2; justify-content: flex-start; margin: 0; }
  #rn-site-header .mobile-menu-toggle { order: 3; display: inline-flex; margin-left: auto; }
  #rn-site-header .brand-r { height: 41.4px; width: 41.4px; border-radius: 9px; }
  #rn-site-header .brand-img {
    height: 41.3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #rn-site-header .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    /* Below the 64px estate masthead (see the estate-mhead block at the end of this file). */
    top: 64px;
    padding: 28px 24px 24px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    /* Opaque, not 0.98 — the page ghosts through behind the links otherwise. Events' panel is #fff. */
    background: #ffffff;
    overflow-y: auto;
    z-index: 200;
  }
  #rn-site-header .nav-links.show-mobile { display: flex; }
  #rn-site-header .nav-links li { width: 100%; }
  #rn-site-header .nav-links a {
    display: block;
    padding: 16px 14px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.4;
  }
  #rn-site-header .nav-links a:hover { background: var(--bg-soft); }
  #rn-site-header .nav-links a::after { content: none; }
  #rn-site-header .nav-drawer-only { display: block; }
  #rn-site-header .secbar .container { padding: 0 12px; }
  #rn-site-header .secbar-list a { height: 42px; font-size: 13px; padding: 0 12px; }
  #rn-site-header .secbar-list li:first-child a { padding-left: 2px; }
  #rn-site-header .secbar-sep { margin: 0 6px; }
}

/* ── Newsletter ─────────────────────────────────────────────────────────────────────────────────
   One quiet band above the footer. The register is the site's: no urgency, no exclamation mark,
   and the small print says plainly what happens to the address. Posts to Netlify Forms (the host),
   which keeps the CSP's form-action 'self' honest — no third-party endpoint. */
#rn-site-header .newsletter {
  border-top: 1px solid var(--border);
  background: var(--bg-section);
  padding: 60px 0 68px;
}
#rn-site-header .newsletter .container { max-width: 720px; text-align: center; }
#rn-site-header .newsletter h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink-deep);
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
#rn-site-header .newsletter h2 em { font-style: italic; color: var(--accent); }
#rn-site-header .newsletter .nl-sub {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto 30px;
}
#rn-site-header .nl-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 14px;
}
#rn-site-header .nl-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  transition: border-color 0.18s ease;
}
#rn-site-header .nl-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
#rn-site-header .nl-form input[type="email"]::placeholder { color: var(--text-light); }
#rn-site-header .nl-form button {
  flex: none;
  height: 52px;
  padding: 0 30px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.16s ease;
}
#rn-site-header .nl-form button:hover { background: var(--accent-hover); }
#rn-site-header .nl-fine {
  font-size: 13.5px;
  color: var(--text-light);
  margin: 0;
}
#rn-site-header .nl-fine a { color: var(--text-light); text-decoration: underline; }
#rn-site-header .nl-fine a:hover { color: var(--accent); }

@media (max-width: 560px) {
  #rn-site-header .nl-form { flex-direction: column; }
  #rn-site-header .nl-form button { width: 100%; }
}

/* Global keyboard focus ring — BRAND-STYLE-GUIDE §8. The article shell has carried this since the
   2026-07-12 retrofit. Same rule, verbatim. */
#rn-site-header a:focus-visible,#rn-site-header  button:focus-visible,#rn-site-header  input:focus-visible,#rn-site-header  textarea:focus-visible,#rn-site-header
select:focus-visible,#rn-site-header  summary:focus-visible,#rn-site-header  [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  #rn-site-header .lede { padding-top: 40px; }
  #rn-site-header .page { padding: 44px 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
  #rn-site-header *,#rn-site-header  *::before,#rn-site-header  *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* estate-mhead v1.1 (wordmark +10%, 2026-09-14) — mobile masthead parity with Regulatory Jobs / Regulatory Academy (owner ruling 2026-09-14).
   Below 768px every sister site shows the same bar: a flush 64px white masthead, 12px side padding,
   [ecosystem grid 44px] · centered 37.4px wordmark · [menu 44px]. Desktop is untouched. */
@media (max-width: 768px) {
  #rn-site-header nav,#rn-site-header  nav.masthead {
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--border, var(--n-border, #e5e7eb)) !important;
  }
  #rn-site-header nav > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 0 12px !important;
    position: relative !important;
  }
  #rn-site-header nav .brand-link {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  #rn-site-header nav .brand-img {
    position: static !important;
    transform: none !important;
    height: 37.4px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #rn-site-header nav .brand-r { display: none !important; }
  #rn-site-header nav .eco-trigger {
    order: 1 !important;
    flex: none !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  #rn-site-header nav .mobile-menu-toggle {
    order: 3 !important;
    flex: none !important;
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }
  #rn-site-header nav .nav-center { display: contents !important; }
  #rn-site-header nav > .container > .nav-cta { display: none !important; }
  /* The drawer hangs from the 64px bar; pages that inline the old 97px rule are overridden here. */
  #rn-site-header nav .nav-links { top: 64px !important; }
}

  /* ---- estate-dhead v1.1 (2026-09-15): desktop header parity with Regulatory Jobs (owner ruling 2026-09-15).
     Above 768px the masthead is locked into the Jobs bar: a white card floated 16px from the top and the
     sides (max 1680px), 12px radius, 0 7px 20px rgba(0,0,0,.10) shadow, no border, 12px vertical padding
     (~82px tall). Everything in the menu lives INSIDE the bar (owner follow-up ruling 2026-09-15): the
     row fills the bar like Jobs (no 1320px inner box, no viewport-edge brand/CTA pull that escaped the bar
     on wide screens), the 769–1279px range compacts (and wraps) so nothing spills out, and News's section row becomes
     the bar's second row. Link markup, dropdowns, ecosystem trigger and CTAs are otherwise untouched. ---- */
  @media (min-width: 769px) {
    #rn-site-header nav,#rn-site-header  nav.masthead {
      position: sticky !important;
      top: 16px !important;
      width: calc(100% - 32px) !important;
      max-width: 1680px !important;
      margin: 16px auto 0 !important;
      padding: 12px 0 !important;
      background: #ffffff !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border: 0 !important;
      border-radius: 12px !important;
      box-shadow: 0 7px 20px rgba(0, 0, 0, 0.10) !important;
    }
    /* The row fills the bar (Jobs: 33px side padding at 1440+, tighter below). */
    #rn-site-header nav > .container {
      width: 100% !important;
      max-width: none !important;
      padding: 0 clamp(18px, 2.3vw, 33px) !important;
      box-sizing: border-box !important;
    }
    /* Brand and CTA sit on the bar's own edges, not the viewport's. */
    #rn-site-header nav .brand-link { margin-left: 0 !important; }
    #rn-site-header nav .nav-cta.desktop-only,#rn-site-header  nav > .container > .nav-cta { margin-right: 0 !important; white-space: nowrap !important; }
    /* News: the section row is the bar's second row (one card, one shadow, both rows sticky). */
    #rn-site-header nav:has(+ .secbar) {
      height: 82px !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      border-radius: 12px 12px 0 0 !important;
      border-bottom: 1px solid var(--border, #e5e7eb) !important;
      box-shadow: none !important;
    }
    #rn-site-header nav:has(+ .secbar)::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0; bottom: -46px;
      border-radius: 12px;
      box-shadow: 0 7px 20px rgba(0, 0, 0, 0.10);
      z-index: -1;
      pointer-events: none;
    }
    #rn-site-header nav + .secbar {
      position: sticky !important;
      top: 98px !important;
      z-index: 99 !important;
      width: calc(100% - 32px) !important;
      max-width: 1680px !important;
      margin: 0 auto !important;
      background: #ffffff !important;
      border: 0 !important;
      border-radius: 0 0 12px 12px !important;
    }
    #rn-site-header nav + .secbar > .container {
      width: 100% !important;
      max-width: none !important;
      padding: 0 clamp(18px, 2.3vw, 33px) !important;
      box-sizing: border-box !important;
    }
  }
  /* Tablet range (769–1279px — Jobs is on its phone header below 1280): compact, and let the link row
     wrap inside the bar rather than spill out of it. */
  @media (min-width: 769px) and (max-width: 1279px) {
    #rn-site-header nav > .container { gap: 10px !important; padding: 0 18px !important; }
    #rn-site-header nav .brand-link { gap: 10px !important; flex: none !important; }
    #rn-site-header nav .brand-r { height: 44px !important; width: 44px !important; border-radius: 10px !important; }
    #rn-site-header nav .brand-img { height: 38px !important; }
    #rn-site-header nav .eco-trigger { flex: none !important; }
    #rn-site-header nav .nav-center { margin: 0 6px !important; min-width: 0 !important; }
    #rn-site-header nav .nav-links { gap: 6px 12px !important; flex-wrap: wrap !important; justify-content: center !important; }
    #rn-site-header nav .nav-search { display: flex !important; flex: 1 1 120px !important; min-width: 100px !important; max-width: 220px !important; }
    #rn-site-header nav .nav-search input { width: 100% !important; min-width: 0 !important; }
    #rn-site-header nav .nav-cta { flex: none !important; padding: 10px 12px !important; font-size: 13px !important; }
    /* Mega-menus anchor to the bar's row instead of their (possibly wrapped) link, so they never
       reach outside the bar or the viewport — even while hidden, a centered 760px sheet inflated
       the page's scroll width. */
    #rn-site-header nav .nav-links > li { position: static !important; }
    #rn-site-header nav .nav-links > li > div[class*="-dropdown"] {
      left: 0 !important; right: 0 !important;
      width: auto !important; max-width: none !important;
      transform: translateY(-6px) !important;
    }
    #rn-site-header nav .nav-links > li:hover > div[class*="-dropdown"],#rn-site-header
    nav .nav-links > li:focus-within > div[class*="-dropdown"],#rn-site-header
    nav .nav-links > li.is-open > div[class*="-dropdown"] { transform: translateY(0) !important; }
  }
  /* ---- /estate-dhead ---- */
  /* ---- estate-cta v1 (2026-09-15): stacked CTA button pairs are the same width on phones (owner ruling).
     Below 768px every pair of call-to-action buttons sharing a container already wraps to a stack —
     verified across every served page on all five static sites, no pair sits side by side at 390px —
     but each button sized to its own label, so one was always narrower than the other. Any container
     holding two or more of the estate's CTA buttons becomes a full-width column, which makes every
     button in it identical in width. Only real buttons count: a button followed by a plain text link
     (Contact's "Send a message", Toolkit's "Browse the full catalog") keeps its designed layout, as do
     single buttons, inline arrow links and the side-by-side cookie-consent buttons. Any existing
     max-width still applies, and applies to both buttons equally. ---- */
  @media (max-width: 768px) {
    #rn-site-header :is(div, p, li, section, header, footer, aside, form, main):has(
      > :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit)
      ~ :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit)) {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      flex-wrap: nowrap !important;
    }
    #rn-site-header :is(div, p, li, section, header, footer, aside, form, main):has(
      > :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit)
      ~ :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit))
      > :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit) {
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      text-align: center !important;
      justify-content: center !important;
    }
  }
  /* ---- /estate-cta ---- */
  /* ---- estate-foot v1 (2026-09-16): footer link menus run in two columns on phones (owner ruling).
     Below 768px every sister site laid its footer link groups out as one long single column (Events ran
     to ~2,400px of links; Leadership hid its groups altogether). The footer is where a reader lands after
     the page, and the phone drawer is a full scroll away, so the groups stay — as a two-column ledger:
     the brand block spans both columns, each link group is a column cell with a hairline above it, links
     are full-width 36px rows, and a group left alone on the last row (or a deliberately wide group) spans
     both columns with its links in a two-column grid. Leadership's three service catalogs (68 links) stay
     collapsed to their heading rows, each a full-width link into its hub page — the complete lists would
     add ~1,400px to a phone footer. Legal rows, the ecosystem strip and each site's brand block keep
     their own styling; only the link groups change. ---- */
  @media (max-width: 768px) {
    #rn-site-header footer .footer-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 24px !important;
      row-gap: 32px !important;
      align-items: start !important;
      width: auto !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    #rn-site-header footer .footer-grid > .footer-brand,#rn-site-header
    footer .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
    #rn-site-header footer .footer-grid > .footer-col-stack { display: contents !important; }
    #rn-site-header footer .footer-grid .footer-col {
      display: block !important;
      grid-column: auto;
      grid-row: auto !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 16px 0 0 !important;
      border: 0 !important;
      border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent) !important;
      text-align: left !important;
    }
    #rn-site-header footer .footer-grid .footer-col h4 {
      position: static !important;
      margin: 0 0 6px !important;
      padding: 0 !important;
      border: 0 !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      line-height: 1.4 !important;
    }
    #rn-site-header footer .footer-grid .footer-col h4::before,#rn-site-header
    footer .footer-grid .footer-col h4::after { content: none !important; }
    #rn-site-header footer .footer-grid .footer-col h4 a { display: inline !important; padding: 0 !important; margin: 0 !important; font: inherit !important; color: inherit !important; text-decoration: none !important; }
    #rn-site-header footer .footer-grid .footer-col .footer-col-links {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: none !important;
      grid-auto-flow: row !important;
      gap: 0 !important;
      justify-items: stretch !important;
      width: auto !important;
    }
    #rn-site-header footer .footer-grid .footer-col > a,#rn-site-header
    footer .footer-grid .footer-col .footer-col-links a {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      padding: 8px 0 !important;
      font-size: 14.5px !important;
      line-height: 1.4 !important;
      white-space: normal !important;
    }
    /* A group that would sit alone on the last row spans both columns and runs its links two-up. */
    #rn-site-header footer .footer-grid > .footer-col:nth-child(even):last-child,#rn-site-header
    footer .footer-grid > .footer-col--coverage { grid-column: 1 / -1 !important; }
    #rn-site-header footer .footer-grid:has(> .footer-col--coverage) > .footer-col:nth-child(even):last-child { grid-column: auto !important; }
    #rn-site-header footer .footer-grid > .footer-col:nth-child(even):last-child .footer-col-links,#rn-site-header
    footer .footer-grid > .footer-col--coverage .footer-col-links {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 24px !important;
    }
    #rn-site-header footer .footer-grid:has(> .footer-col--coverage) > .footer-col:nth-child(even):last-child .footer-col-links { grid-template-columns: minmax(0, 1fr) !important; }
    /* Leadership's service catalogs: heading rows only, each a full-width link to its hub page. */
    #rn-site-header footer .footer-grid > .footer-col--wide,#rn-site-header
    footer .footer-grid > .footer-col--ta { grid-column: 1 / -1 !important; padding: 0 !important; }
    #rn-site-header footer .footer-grid > .footer-col--wide .footer-col-links,#rn-site-header
    footer .footer-grid > .footer-col--ta .footer-col-links { display: none !important; }
    #rn-site-header footer .footer-grid > .footer-col--wide h4,#rn-site-header
    footer .footer-grid > .footer-col--ta h4 { margin: 0 !important; }
    #rn-site-header footer .footer-grid > .footer-col--wide h4 a,#rn-site-header
    footer .footer-grid > .footer-col--ta h4 a {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
      padding: 15px 0 !important;
      min-height: 44px !important;
      box-sizing: border-box !important;
    }
    #rn-site-header footer .footer-grid > .footer-col--wide h4 a::after,#rn-site-header
    footer .footer-grid > .footer-col--ta h4 a::after {
      content: "" !important;
      flex: 0 0 auto !important;
      width: 8px !important;
      height: 8px !important;
      margin-right: 3px !important;
      border-right: 1.5px solid currentColor !important;
      border-bottom: 1.5px solid currentColor !important;
      transform: rotate(-45deg) !important;
      opacity: 0.7 !important;
    }
    #rn-site-header footer .footer-grid > .footer-col--wide + .footer-col--wide,#rn-site-header
    footer .footer-grid > .footer-col--wide + .footer-col--ta { margin-top: -20px !important; }
    /* Events' ecosystem strip: one wrapped row instead of a stacked list. */
    #rn-site-header footer .footer-eco { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding: 18px 0 !important; }
    #rn-site-header footer .footer-eco-list { flex-direction: row !important; flex-wrap: wrap !important; gap: 0 22px !important; width: 100% !important; }
    #rn-site-header footer .footer-eco-list a { display: inline-block !important; padding: 8px 0 !important; }
  }
  /* ---- /estate-foot ---- */

/* The newsletter band (nlx) moved to assets/footer.css on 2026-09-22: it now rides in the footer on every page. */

/* ---- rn-phone v1 (2026-09-20, owner: "optimize everything on mobile"). Measured on all 156 live pages at
   390px: no page scrolled sideways, so these are the touch and reading fixes the audit did find. The
   Spotlight and Advertise pages carry their own inline rules, hence the id and form selectors. ---- */
@media (max-width: 768px) {
  /* An iPhone zooms the whole page when a focused field is under 16px: Spotlight's search was 14px, its
     sort menu 13.5px, the Advertise form 15.5px. */
  #rn-site-header input#ai-search-input,#rn-site-header  .sp-sort select#sp-sort,#rn-site-header  form.adv-form input,#rn-site-header  form.adv-form select,#rn-site-header  form.adv-form textarea { font-size: 16px; }
  /* Touch targets that were 22 to 24px tall. Padding grows the touch area; the negative margin keeps the layout. */
  #rn-site-header .sec-viewall,#rn-site-header  .rail-more,#rn-site-header  .rail-nl-cta { padding-block: 12px; margin-block: -12px; }
  /* Labels that were under 11px on a phone. */
  #rn-site-header .rail-date,#rn-site-header  span.sp-kicker { font-size: 11.5px; }
  #rn-site-header span.sp-badge { font-size: 11px; }
}
/* ---- /rn-phone v1 ---- */

/* ══ rn-home v1 — the phone front page (2026-09-21) ═══════════════════════════════════════════
   Owner brief: "the mobile version feels chaotic, flat, and too much like a database". The
   diagnosis, measured on the live page at 390px, was not spacing. The front page had one story in
   the first screen and ran 20.8 screens; 24 of its 66 stories appeared more than once; every one
   of the 82 entries wore the same full-width photo card, because the desktop page takes its
   hierarchy from three columns and a phone has one. news.css had no phone type scale at all.

   So this block is the phone's own edition. Everything it needs was decided in the generator and
   is worn by the markup (scripts/surfaces.js, "the phone front page"):

     [data-ph-on] / [data-ph-off]   which entries a phone shows. Off is a repeat of something the
                                    reader already met higher up, or past this surface's cap.
     <p class="rn-line">            regulator (or company) and time, above the headline.

   Four tiers replace the one card, and each is a real step apart:

     TIER 1  LEAD     .hero          30px serif, full-width photo, three-line dek
     TIER 2  MAJOR    .top-card      21px serif + 96px thumbnail on the right
              also    .topic-lead      — a section's own lead story
     TIER 3  FEED     .rail-item     18px serif, no photo, in the Latest rail
     TIER 4  RAPID    .rail-item     15.5px system sans, in the agency and dates bands
              also    .topic-item      — a section's other stories

   NOTHING ABOVE 768px IS TOUCHED: every rule is inside the query below, except the one that keeps
   .rn-line out of the desktop page entirely. Desktop ignores both data attributes.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* The story line is the phone's, and only the phone's. Desktop keeps .story-meta underneath. */
#rn-site-header .rn-line { display: none; }
/* Rows only a phone renders, when a band's desktop list came up short after de-duplication.
   Outside the phone query they do not exist, so the desktop page and its balancer are unaffected. */
#rn-site-header .rail-ph,#rn-site-header  .topic-ph { display: none; }

@media (max-width: 767.98px) {
  /* ── what shows ──────────────────────────────────────────────────────────────────────────── */
  #rn-site-header .home-grid [data-ph-off],#rn-site-header  .spot-grid [data-ph-off],#rn-site-header  .topic-grid [data-ph-off],#rn-site-header
  .agency-col [data-ph-off],#rn-site-header  .dates-grid [data-ph-off] { display: none !important; }
  /* …and reach past a desktop `hidden`: the balancer parks Latest candidates as `hidden
     data-extra` deeper in the rail than the phone's own cap, and the phone needs them once the
     repeats above are gone. The balancer never runs at this width (it bails when the columns
     stack), so nothing re-hides them. */
  #rn-site-header .rail-feed .rail-item[data-ph-on] { display: grid !important; }
  #rn-site-header .agency-col .rail-ph[data-ph-on],#rn-site-header  .dates-grid .rail-ph[data-ph-on] { display: grid; }
  #rn-site-header .topic-rest .topic-ph[data-ph-on] { display: block; }

  /* Latest moves above the promo rail: on a phone the newest stories are the reason to scroll,
     and a promo card between Top Stories and the feed is an interruption, not a pause. */
  #rn-site-header .home-grid { grid-template-areas: "main" "latest" "right"; }
  #rn-site-header .rail-left { margin-top: 36px; }
  #rn-site-header .rail-right { margin-top: 36px; }
  /* Don't Miss is a desktop rail (see surfaces.js): its cards are off at this width, so its
     heading would stand over the two promos with no stories under it. */
  #rn-site-header .rail-right > .home-sec-head { display: none; }

  /* ── the story line ──────────────────────────────────────────────────────────────────────── */
  #rn-site-header .rn-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 5px;
    font-size: 12.5px;
    line-height: 1.3;
    letter-spacing: .01em;
  }
  #rn-site-header .rn-who {
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-deep);
  }
  #rn-site-header .rn-t { color: var(--text-light); }
  /* The sponsored flag rides the same line, where the FTC's native-advertising guidance puts a
     disclosure: above the headline, not below it. */
  #rn-site-header .rail-item .rn-who { color: var(--ink-deep); }

  /* ── TIER 1 — the lead ───────────────────────────────────────────────────────────────────── */
  /* The notch is the section name printed into the photo's bottom-left corner. The story line now
     sits directly under the photo and the two collided. The line says more (it names the
     regulator), so the notch stands down at this width. */
  #rn-site-header .hero-notch { display: none; }
  #rn-site-header .hero h1 { font-size: 30px; line-height: 1.1; }
  /* Two lines, not seven: the dek ran to the bottom of the first screen and pushed every other
     story out of it. Two lines is the promise; the article is one tap away. */
  #rn-site-header .hero-dek {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 7px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #rn-site-header .hero .rn-line { margin-bottom: 7px; }
  #rn-site-header .hero .story-meta { font-size: 12.5px; }

  /* ── TIER 2 — major: text with a 96px thumbnail on the right ─────────────────────────────── */
  /* One side for every thumbnail on the page. The left edge of every headline then lines up, which
     is the whole trick of a scannable list; today Latest puts its thumb right and the sections put
     theirs left. */
  #rn-site-header .top-grid { gap: 0; }
  #rn-site-header .top-card,#rn-site-header  .topic-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 0 14px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--border);
  }
  #rn-site-header .top-card .kicker,#rn-site-header  .top-card .top-dek,#rn-site-header  .top-card .story-meta,#rn-site-header
  .topic-lead .story-meta { display: none; }
  #rn-site-header .top-card .rn-line,#rn-site-header  .topic-lead .rn-line { grid-column: 1; }
  #rn-site-header .top-card h3,#rn-site-header  .topic-lead h3 {
    grid-column: 1;
    font-size: 21px;
    line-height: 1.22;
    margin: 0;
  }
  #rn-site-header .top-card .top-thumb,#rn-site-header  .topic-lead .topic-thumb {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    width: 96px;
  }
  #rn-site-header .top-card .top-thumb img,#rn-site-header  .topic-lead .topic-thumb img {
    width: 96px;
    height: 60px;
    max-width: 96px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
  }

  /* ── TIER 3 — the feed: Latest, text only ────────────────────────────────────────────────── */
  /* The photos were the noise. Twelve identical thumbnails down the rail told a reader nothing
     about which story mattered, and each one cost 53px of a 390px screen. The regulator does the
     work a picture of a lab coat was doing. */
  #rn-site-header .rail-left .rail-thumb { display: none; }
  #rn-site-header .rail-left .rail-item {
    grid-template-columns: minmax(0, 1fr);
    padding: 13px 0;
  }
  #rn-site-header .rail-left .rail-date { display: none; }
  #rn-site-header .rail-left .rail-item h3 { font-size: 18px; line-height: 1.28; }

  /* ── TIER 4 — rapid: the agency and dates bands, and a section's other stories ───────────── */
  /* A change of typeface is the cheapest rhythm break there is, and the brand guide already gives
     the system sans to everything functional. These are the rows a reader skims for a name. */
  #rn-site-header .agency-col .rail-thumb,#rn-site-header  .dates-grid .rail-thumb,#rn-site-header  .topic-item-thumb { display: none; }
  #rn-site-header .agency-col .rail-item,#rn-site-header  .dates-grid .rail-item {
    grid-template-columns: minmax(0, 1fr);
    padding: 11px 0;
  }
  #rn-site-header .agency-col .rail-date,#rn-site-header  .dates-grid .rail-date,#rn-site-header  .topic-item .story-meta { display: none; }
  #rn-site-header .agency-col .rail-item h3,#rn-site-header  .dates-grid .rail-item h3,#rn-site-header  .topic-item h4 {
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.005em;
  }
  #rn-site-header .topic-item {
    display: block;
    padding: 11px 0;
    border-top: 1px solid var(--border);
  }
  #rn-site-header .topic-rest { gap: 0; }

  /* Whichever story a band leads with on a phone is its tier 2 — the generator marks it, because
     which entry that is depends on what the opening run already used. Without this a section
     whose newest story led the page opened with a 15.5px row and had no lead at all. */
  #rn-site-header .topic-item[data-ph-lead],#rn-site-header  .agency-col .rail-item[data-ph-lead],#rn-site-header  .dates-grid .rail-item[data-ph-lead] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 0 14px;
    align-items: start;
    padding: 14px 0;
  }
  #rn-site-header .topic-item[data-ph-lead] .topic-item-text { grid-column: 1; }
  #rn-site-header .topic-item[data-ph-lead] h4,#rn-site-header
  .agency-col .rail-item[data-ph-lead] h3,#rn-site-header  .dates-grid .rail-item[data-ph-lead] h3 {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: normal;
  }
  #rn-site-header .topic-item[data-ph-lead] .topic-item-thumb,#rn-site-header
  .agency-col .rail-item[data-ph-lead] .rail-thumb,#rn-site-header  .dates-grid .rail-item[data-ph-lead] .rail-thumb {
    display: block;
    grid-column: 2;
    width: 96px;
    margin: 0;
  }
  #rn-site-header .topic-item[data-ph-lead] .topic-item-thumb img,#rn-site-header
  .agency-col .rail-item[data-ph-lead] .rail-thumb img,#rn-site-header  .dates-grid .rail-item[data-ph-lead] .rail-thumb img {
    width: 96px;
    height: 60px;
    max-width: 96px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
  }

  /* ── the Spotlight band ──────────────────────────────────────────────────────────────────── */
  /* Three full-width photo cards made the series read as three more news stories and cost 1,346px
     — an eighth of the page. It is a different product, so it gets a ground of its own instead of
     a louder card: the feature keeps its photo and its dek, the other two are rows, and the
     company name stands where the regulator stands everywhere else. Tinted surface, no border,
     no shadow — the brand guide's ink-and-hairline language, one step warmer. */
  #rn-site-header .spot-band {
    background: #f3f9f5;
    margin-inline: -20px;
    padding: 26px 20px 28px;
  }
  #rn-site-header .spot-grid { gap: 0; }
  #rn-site-header .spot-band .spot-strap { display: none; }
  #rn-site-header .spot-card + .spot-card {
    border-top: 1px solid var(--border);
    padding-top: 13px;
    margin-top: 13px;
  }
  #rn-site-header .spot-card + .spot-card .spot-thumb,#rn-site-header
  .spot-card + .spot-card .spot-dek,#rn-site-header
  .spot-card + .spot-card .story-meta { display: none; }
  #rn-site-header .spot-card + .spot-card h3 {
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
  }
  #rn-site-header .spot-card + .spot-card .kicker { font-size: 11.5px; margin-bottom: 4px; }
  #rn-site-header .spot-card h3 { font-size: 21px; line-height: 1.22; }
  #rn-site-header .spot-card .spot-dek {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── section rhythm ──────────────────────────────────────────────────────────────────────── */
  /* Five sections built from the same two blocks read as one 5,700px run. Each is now a lead and
     three rows — about 330px — so the section headings land often enough to be the rhythm. */
  #rn-site-header .topic-sec,#rn-site-header  .spot-band,#rn-site-header  .agency-band,#rn-site-header  .dates-band { margin-top: 34px; }
  #rn-site-header .topic-grid { gap: 0; }
  #rn-site-header .agency-col + .agency-col { margin-top: 26px; }
}
/* ---- /rn-home v1 ---- */


/* estate-mhead v1.1 (wordmark +10%, 2026-09-14) — mobile masthead parity with Regulatory Jobs / Regulatory Academy (owner ruling 2026-09-14).
   Below 768px every sister site shows the same bar: a flush 64px white masthead, 12px side padding,
   [ecosystem grid 44px] · centered 37.4px wordmark · [menu 44px]. Desktop is untouched. */
@media (max-width: 768px) {
  #rn-site-header nav,#rn-site-header  nav.masthead {
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--border, var(--n-border, #e5e7eb)) !important;
  }
  #rn-site-header nav > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 0 12px !important;
    position: relative !important;
  }
  #rn-site-header nav .brand-link {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  #rn-site-header nav .brand-img {
    position: static !important;
    transform: none !important;
    height: 37.4px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #rn-site-header nav .brand-r { display: none !important; }
  #rn-site-header nav .eco-trigger {
    order: 1 !important;
    flex: none !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  #rn-site-header nav .mobile-menu-toggle {
    order: 3 !important;
    flex: none !important;
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }
  #rn-site-header nav .nav-center { display: contents !important; }
  #rn-site-header nav > .container > .nav-cta { display: none !important; }
  /* The drawer hangs from the 64px bar; the shell inlines the old 97px rule. */
  #rn-site-header nav .nav-links { top: 64px !important; }
}
  /* ---- estate-dhead v1.1 (2026-09-15): desktop header parity with Regulatory Jobs (owner ruling 2026-09-15).
     Above 768px the masthead is locked into the Jobs bar: a white card floated 16px from the top and the
     sides (max 1680px), 12px radius, 0 7px 20px rgba(0,0,0,.10) shadow, no border, 12px vertical padding
     (~82px tall). Everything in the menu lives INSIDE the bar (owner follow-up ruling 2026-09-15): the
     row fills the bar like Jobs (no 1320px inner box, no viewport-edge brand/CTA pull that escaped the bar
     on wide screens), the 769–1279px range compacts (and wraps) so nothing spills out, and News's section row becomes
     the bar's second row. Link markup, dropdowns, ecosystem trigger and CTAs are otherwise untouched. ---- */
  @media (min-width: 769px) {
    #rn-site-header nav,#rn-site-header  nav.masthead {
      position: sticky !important;
      top: 16px !important;
      width: calc(100% - 32px) !important;
      max-width: 1680px !important;
      margin: 16px auto 0 !important;
      padding: 12px 0 !important;
      background: #ffffff !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border: 0 !important;
      border-radius: 12px !important;
      box-shadow: 0 7px 20px rgba(0, 0, 0, 0.10) !important;
    }
    /* The row fills the bar (Jobs: 33px side padding at 1440+, tighter below). */
    #rn-site-header nav > .container {
      width: 100% !important;
      max-width: none !important;
      padding: 0 clamp(18px, 2.3vw, 33px) !important;
      box-sizing: border-box !important;
    }
    /* Brand and CTA sit on the bar's own edges, not the viewport's. */
    #rn-site-header nav .brand-link { margin-left: 0 !important; }
    #rn-site-header nav .nav-cta.desktop-only,#rn-site-header  nav > .container > .nav-cta { margin-right: 0 !important; white-space: nowrap !important; }
    /* News: the section row is the bar's second row (one card, one shadow, both rows sticky). */
    #rn-site-header nav:has(+ .secbar) {
      height: 82px !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      border-radius: 12px 12px 0 0 !important;
      border-bottom: 1px solid var(--border, #e5e7eb) !important;
      box-shadow: none !important;
    }
    #rn-site-header nav:has(+ .secbar)::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0; bottom: -46px;
      border-radius: 12px;
      box-shadow: 0 7px 20px rgba(0, 0, 0, 0.10);
      z-index: -1;
      pointer-events: none;
    }
    #rn-site-header nav + .secbar {
      position: sticky !important;
      top: 98px !important;
      z-index: 99 !important;
      width: calc(100% - 32px) !important;
      max-width: 1680px !important;
      margin: 0 auto !important;
      background: #ffffff !important;
      border: 0 !important;
      border-radius: 0 0 12px 12px !important;
    }
    #rn-site-header nav + .secbar > .container {
      width: 100% !important;
      max-width: none !important;
      padding: 0 clamp(18px, 2.3vw, 33px) !important;
      box-sizing: border-box !important;
    }
  }
  /* Tablet range (769–1279px — Jobs is on its phone header below 1280): compact, and let the link row
     wrap inside the bar rather than spill out of it. */
  @media (min-width: 769px) and (max-width: 1279px) {
    #rn-site-header nav > .container { gap: 10px !important; padding: 0 18px !important; }
    #rn-site-header nav .brand-link { gap: 10px !important; flex: none !important; }
    #rn-site-header nav .brand-r { height: 44px !important; width: 44px !important; border-radius: 10px !important; }
    #rn-site-header nav .brand-img { height: 38px !important; }
    #rn-site-header nav .eco-trigger { flex: none !important; }
    #rn-site-header nav .nav-center { margin: 0 6px !important; min-width: 0 !important; }
    #rn-site-header nav .nav-links { gap: 6px 12px !important; flex-wrap: wrap !important; justify-content: center !important; }
    #rn-site-header nav .nav-search { display: flex !important; flex: 1 1 120px !important; min-width: 100px !important; max-width: 220px !important; }
    #rn-site-header nav .nav-search input { width: 100% !important; min-width: 0 !important; }
    #rn-site-header nav .nav-cta { flex: none !important; padding: 10px 12px !important; font-size: 13px !important; }
    /* Mega-menus anchor to the bar's row instead of their (possibly wrapped) link, so they never
       reach outside the bar or the viewport — even while hidden, a centered 760px sheet inflated
       the page's scroll width. */
    #rn-site-header nav .nav-links > li { position: static !important; }
    #rn-site-header nav .nav-links > li > div[class*="-dropdown"] {
      left: 0 !important; right: 0 !important;
      width: auto !important; max-width: none !important;
      transform: translateY(-6px) !important;
    }
    #rn-site-header nav .nav-links > li:hover > div[class*="-dropdown"],#rn-site-header
    nav .nav-links > li:focus-within > div[class*="-dropdown"],#rn-site-header
    nav .nav-links > li.is-open > div[class*="-dropdown"] { transform: translateY(0) !important; }
  }
  /* ---- /estate-dhead ---- */
  /* ---- estate-cta v1 (2026-09-15): stacked CTA button pairs are the same width on phones (owner ruling).
     Below 768px every pair of call-to-action buttons sharing a container already wraps to a stack —
     verified across every served page on all five static sites, no pair sits side by side at 390px —
     but each button sized to its own label, so one was always narrower than the other. Any container
     holding two or more of the estate's CTA buttons becomes a full-width column, which makes every
     button in it identical in width. Only real buttons count: a button followed by a plain text link
     (Contact's "Send a message", Toolkit's "Browse the full catalog") keeps its designed layout, as do
     single buttons, inline arrow links and the side-by-side cookie-consent buttons. Any existing
     max-width still applies, and applies to both buttons equally. ---- */
  @media (max-width: 768px) {
    #rn-site-header :is(div, p, li, section, header, footer, aside, form, main):has(
      > :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit)
      ~ :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit)) {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      flex-wrap: nowrap !important;
    }
    #rn-site-header :is(div, p, li, section, header, footer, aside, form, main):has(
      > :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit)
      ~ :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit))
      > :is(.btn-primary, .btn-secondary, .btn-white, .btn-light,
            .cr-btn-primary, .cr-btn-ghost, .cg-btn-solid, .cg-btn-ghost,
            .nf-btn-primary, .nf-btn-ghost, .blog-cta-browse, .blog-cta-submit) {
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      text-align: center !important;
      justify-content: center !important;
    }
  }
  /* ---- /estate-cta ---- */
  /* ---- estate-foot v1 (2026-09-16): footer link menus run in two columns on phones (owner ruling).
     Below 768px every sister site laid its footer link groups out as one long single column (Events ran
     to ~2,400px of links; Leadership hid its groups altogether). The footer is where a reader lands after
     the page, and the phone drawer is a full scroll away, so the groups stay — as a two-column ledger:
     the brand block spans both columns, each link group is a column cell with a hairline above it, links
     are full-width 36px rows, and a group left alone on the last row (or a deliberately wide group) spans
     both columns with its links in a two-column grid. Leadership's three service catalogs (68 links) stay
     collapsed to their heading rows, each a full-width link into its hub page — the complete lists would
     add ~1,400px to a phone footer. Legal rows, the ecosystem strip and each site's brand block keep
     their own styling; only the link groups change. ---- */
  @media (max-width: 768px) {
    #rn-site-header footer .footer-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 24px !important;
      row-gap: 32px !important;
      align-items: start !important;
      width: auto !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    #rn-site-header footer .footer-grid > .footer-brand,#rn-site-header
    footer .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
    #rn-site-header footer .footer-grid > .footer-col-stack { display: contents !important; }
    #rn-site-header footer .footer-grid .footer-col {
      display: block !important;
      grid-column: auto;
      grid-row: auto !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 16px 0 0 !important;
      border: 0 !important;
      border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent) !important;
      text-align: left !important;
    }
    #rn-site-header footer .footer-grid .footer-col h4 {
      position: static !important;
      margin: 0 0 6px !important;
      padding: 0 !important;
      border: 0 !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      line-height: 1.4 !important;
    }
    #rn-site-header footer .footer-grid .footer-col h4::before,#rn-site-header
    footer .footer-grid .footer-col h4::after { content: none !important; }
    #rn-site-header footer .footer-grid .footer-col h4 a { display: inline !important; padding: 0 !important; margin: 0 !important; font: inherit !important; color: inherit !important; text-decoration: none !important; }
    #rn-site-header footer .footer-grid .footer-col .footer-col-links {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: none !important;
      grid-auto-flow: row !important;
      gap: 0 !important;
      justify-items: stretch !important;
      width: auto !important;
    }
    #rn-site-header footer .footer-grid .footer-col > a,#rn-site-header
    footer .footer-grid .footer-col .footer-col-links a {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      padding: 8px 0 !important;
      font-size: 14.5px !important;
      line-height: 1.4 !important;
      white-space: normal !important;
    }
    /* A group that would sit alone on the last row spans both columns and runs its links two-up. */
    #rn-site-header footer .footer-grid > .footer-col:nth-child(even):last-child,#rn-site-header
    footer .footer-grid > .footer-col--coverage { grid-column: 1 / -1 !important; }
    #rn-site-header footer .footer-grid:has(> .footer-col--coverage) > .footer-col:nth-child(even):last-child { grid-column: auto !important; }
    #rn-site-header footer .footer-grid > .footer-col:nth-child(even):last-child .footer-col-links,#rn-site-header
    footer .footer-grid > .footer-col--coverage .footer-col-links {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 24px !important;
    }
    #rn-site-header footer .footer-grid:has(> .footer-col--coverage) > .footer-col:nth-child(even):last-child .footer-col-links { grid-template-columns: minmax(0, 1fr) !important; }
    /* Leadership's service catalogs: heading rows only, each a full-width link to its hub page. */
    #rn-site-header footer .footer-grid > .footer-col--wide,#rn-site-header
    footer .footer-grid > .footer-col--ta { grid-column: 1 / -1 !important; padding: 0 !important; }
    #rn-site-header footer .footer-grid > .footer-col--wide .footer-col-links,#rn-site-header
    footer .footer-grid > .footer-col--ta .footer-col-links { display: none !important; }
    #rn-site-header footer .footer-grid > .footer-col--wide h4,#rn-site-header
    footer .footer-grid > .footer-col--ta h4 { margin: 0 !important; }
    #rn-site-header footer .footer-grid > .footer-col--wide h4 a,#rn-site-header
    footer .footer-grid > .footer-col--ta h4 a {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
      padding: 15px 0 !important;
      min-height: 44px !important;
      box-sizing: border-box !important;
    }
    #rn-site-header footer .footer-grid > .footer-col--wide h4 a::after,#rn-site-header
    footer .footer-grid > .footer-col--ta h4 a::after {
      content: "" !important;
      flex: 0 0 auto !important;
      width: 8px !important;
      height: 8px !important;
      margin-right: 3px !important;
      border-right: 1.5px solid currentColor !important;
      border-bottom: 1.5px solid currentColor !important;
      transform: rotate(-45deg) !important;
      opacity: 0.7 !important;
    }
    #rn-site-header footer .footer-grid > .footer-col--wide + .footer-col--wide,#rn-site-header
    footer .footer-grid > .footer-col--wide + .footer-col--ta { margin-top: -20px !important; }
    /* Events' ecosystem strip: one wrapped row instead of a stacked list. */
    #rn-site-header footer .footer-eco { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding: 18px 0 !important; }
    #rn-site-header footer .footer-eco-list { flex-direction: row !important; flex-wrap: wrap !important; gap: 0 22px !important; width: 100% !important; }
    #rn-site-header footer .footer-eco-list a { display: inline-block !important; padding: 8px 0 !important; }
  }
  /* ---- /estate-foot ---- */


/* ---- rn-pulse v1 (owner request 2026-09-18): the desktop masthead tagline reads
   "The Pulse of Regulation. Latest News & Breakthroughs" on two lines, with an ECG trace and a green
   pulse that sweeps left to right through the letters. Desktop only: .brand-tag is display:none
   below 1280px (news.css / article.css), so nothing here reaches tablets or phones. ---- */
#rn-site-header .brand-tag-ecg { display: none; }
@media (min-width: 1280px) {
  #rn-site-header .brand-tag {
    display: flex !important;
    align-items: center;
    gap: 13px;
    margin-left: 26px;
    letter-spacing: 0.26em;
    --rn-pulse-dur: 3.4s;
  }
  #rn-site-header .brand-tag-ecg { display: block; flex: 0 0 auto; overflow: visible; }
  #rn-site-header .brand-tag-ecg-base { stroke: #106d37; opacity: 0.22; }
  #rn-site-header .brand-tag-ecg-run {
    stroke: #22c06a;
    stroke-dasharray: 22 200;
    stroke-dashoffset: 22;
    filter: drop-shadow(0 0 3px rgba(34, 192, 106, 0.75));
    animation: rn-pulse-ecg var(--rn-pulse-dur) cubic-bezier(0.3, 0, 0.6, 1) infinite;
  }
  #rn-site-header .brand-tag-lines { display: flex; flex-direction: column; gap: 4px; line-height: 1.1; }
  #rn-site-header .brand-tag-l1,#rn-site-header  .brand-tag-l2 {
    display: block;
    width: max-content;
    background-repeat: no-repeat;
    background-size: 34% 100%, 100% 100%;
    background-position: -60% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rn-pulse-sweep var(--rn-pulse-dur) cubic-bezier(0.45, 0, 0.25, 1) infinite;
  }
  #rn-site-header .brand-tag-l1 {
    font-weight: 800;
    background-image:
      linear-gradient(90deg, rgba(35,38,43,0) 0%, #106d37 30%, #2fdc80 50%, #106d37 70%, rgba(35,38,43,0) 100%),
      linear-gradient(#23262b, #23262b);
  }
  #rn-site-header .brand-tag-l2 {
    font-weight: 600;
    animation-delay: 0.1s;
    background-image:
      linear-gradient(90deg, rgba(104,116,137,0) 0%, #106d37 30%, #2fdc80 50%, #106d37 70%, rgba(104,116,137,0) 100%),
      linear-gradient(#687489, #687489);
  }
  @keyframes rn-pulse-sweep {
    0%, 20% { background-position: -60% 0, 0 0; }
    80%, 100% { background-position: 160% 0, 0 0; }
  }
  @keyframes rn-pulse-ecg {
    0% { stroke-dashoffset: 22; }
    24%, 100% { stroke-dashoffset: -100; }
  }
}
@media (prefers-reduced-motion: reduce) {
  #rn-site-header .brand-tag-l1,#rn-site-header  .brand-tag-l2,#rn-site-header  .brand-tag-ecg-run { animation: none !important; }
  #rn-site-header .brand-tag-ecg-run { stroke-dashoffset: -40; }
}
/* ---- /rn-pulse ---- */


/* ---- rn-noeco (owner request 2026-09-27): the ecosystem grid button is gone from the masthead. The estate phone
   bar (rn-mhead) centres the wordmark between a 44px button on each side; with only the menu button left, the
   brand link pads its left by that button's 44px + the 8px gap so the wordmark stays centred. ---- */
@media (max-width: 768px) {
  #rn-site-header nav .brand-link { padding-left: 52px !important; }
}
/* ---- rn-spot v1.1 (owner rulings 2026-09-18, 2026-09-20): the Spotlight item in the section bar carries NO icon
   (the four-point star, then an emerald gem, were both tried and removed the same day) and reads
   "Industry Spotlight" on desktop only: the word "Industry" shows from 1280px up, the same breakpoint
   as the masthead tagline, because below that the longer label pushes the bar past its edge; the
   phone drawer has its own label. On phones, every 5.2s a band of light runs through the letters,
   then rests; on desktop the label is still (v1.1, below).
   The markup comes from scripts/surfaces.js. ---- */
#rn-site-header .secbar-spot-pre { display: none; }
/* 2026-09-27: the prefix waited for 1440px with nine items, 1680px with ten; with Key Dates and Therapeutic Areas
   folded into other panels that evening (eight items) it shows from 1440px, with "For " and "& Quality". */
@media (min-width: 1440px) { #rn-site-header .secbar-spot-pre { display: inline; } }
#rn-site-header .secbar-spot-txt {
  display: inline-block;
  background-image:
    linear-gradient(90deg, rgba(16,109,55,0) 0%, #1fbf6b 30%, #3ee791 50%, #1fbf6b 70%, rgba(16,109,55,0) 100%),
    linear-gradient(#106d37, #106d37);
  background-repeat: no-repeat;
  background-size: 30% 100%, 100% 100%;
  background-position: -50% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rn-spot-text 5.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes rn-spot-text {
  0%, 12% { background-position: -50% 0, 0 0; }
  56%, 100% { background-position: 150% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { #rn-site-header .secbar-spot-txt { animation: none !important; } }
/* v1.1 (owner request 2026-09-20): no light effect on desktop. From 768px up the label is plain
   emerald type, still and solid; phones keep the band of light. */
@media (min-width: 768px) {
  #rn-site-header .secbar-spot-txt {
    animation: none;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #106d37;
  }
}
/* Phones (owner request 2026-09-18): the Spotlight sits fifth in the bar, where Manufacturing was;
   everything marked secbar-late by scripts/surfaces.js follows it. Visual order only: the markup
   keeps the desktop order. */
@media (max-width: 767.98px) {
  #rn-site-header .secbar-list .secbar-late { order: 1; }
  #rn-site-header .secbar-list .secbar-spot .secnav-chev { display: none; }   /* no panel on phones, so no chevron */
  /* So the whole word reads on a 390px phone before the bar's edge fade: items sit 2px closer, the
     Spotlight's tracking eases, and the fade narrows from 40px to 24px (it still hints the scroll). */
  #rn-site-header .secbar-list a { padding: 0 10px; }
  #rn-site-header .secbar-list .secbar-spot a { padding: 0 8px; letter-spacing: .08em; }
  #rn-site-header .secbar .container::after { width: 24px; }
}
/* ---- /rn-spot ---- */


/* ---- rn-head v1 (owner request 2026-09-18): on full desktop (1280px up) the two brand marks in the
   masthead are 15% smaller (R tile 57.6 -> 49px, wordmark 51.15 -> 43.5px) and the top row is 68px
   instead of 82px, which takes the space above and below the logo from about 12px to about 9.5px.
   The section bar's sticky offset follows the row (16 + 68 = 84px, was 98px). This deliberately
   overrides the estate-dhead block's 82px row FOR NEWS ONLY; that shared block is left untouched,
   and the 769-1279px range keeps its own compact sizes. ---- */
@media (min-width: 1280px) {
  #rn-site-header nav .brand-r { height: 49px !important; width: 49px !important; }
  #rn-site-header nav .brand-img { height: 43.5px !important; width: auto !important; }
  #rn-site-header nav:has(+ .secbar) { height: 68px !important; }
  #rn-site-header nav + .secbar { top: 84px !important; }
}
/* ---- /rn-head ---- */


/* ---- rn-hnl v1 (owner request 2026-09-20): a one-field newsletter sign-up in the desktop masthead,
   directly right of the tagline. Shown from 1440px up, where it replaces the plain "Newsletter"
   link; to make room the utilities sit closer and the search field narrows, both easing back out as
   the screen widens. Below 1440px nothing changes. The label rides above the field in the tagline's
   letter-spaced voice. Focus ring is on the PILL (:focus-within) and the inner input's own outline is
   off: both halves, per the estate rule on pill inputs. ---- */
#rn-site-header .rn-hnl-item { display: none; }
#rn-site-header .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 1440px) {
  #rn-site-header nav .nav-links > .nav-util--newsletter { display: none; }
  /* Even spacing (owner request 2026-09-20): the row fills its half of the bar and the spare room is
     shared by three equal auto margins, so tagline | search | sign-up | Advertise sit the same
     distance apart at every width (24px at 1440, 55px from ~1700 up). */
  /* Order (owner request 2026-09-20, later the same day): search sits LEFT of the sign-up, so the row
     reads tagline | search | sign-up | Advertise and Advertise keeps the right edge. Visual order
     only (CSS order): the markup keeps search last, so the phone drawer and the 769-1439px row are
     untouched. */
  #rn-site-header nav .nav-links > .nav-search-item { order: -1; margin-left: auto; margin-right: auto; }
  #rn-site-header nav .nav-links > .rn-hnl-item { display: flex; margin-right: auto; }
  #rn-site-header nav .nav-center > .nav-links { width: 100%; justify-content: flex-end; }
  #rn-site-header nav .nav-links { gap: 24px; }
  #rn-site-header nav .nav-search { padding: 7px 9px; gap: 6px; }
  #rn-site-header nav .nav-search input { width: clamp(133px, calc(133px + (100vw - 1440px) * 0.5), 244px); text-overflow: ellipsis; }
  #rn-site-header .rn-hnl {
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(252px, calc(252px + (100vw - 1440px) * 0.4), 320px);
    height: 44px;
    margin: 0;
    padding: 0 5px 0 17px;
    border-radius: 999px;
    border: 1px solid rgba(16, 109, 55, 0.24);
    background: linear-gradient(180deg, #ffffff 0%, #f1f8f4 100%);
    box-shadow: 0 1px 2px rgba(13, 89, 45, 0.06), inset 0 1px 0 #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  #rn-site-header .rn-hnl:hover { border-color: rgba(16, 109, 55, 0.42); }
  #rn-site-header .rn-hnl:focus-within {
    border-color: #106d37;
    box-shadow: 0 1px 2px rgba(13, 89, 45, 0.06), inset 0 1px 0 #ffffff, 0 0 0 3px rgba(16, 109, 55, 0.18);
  }
  #rn-site-header .rn-hnl-field { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; cursor: text; }
  #rn-site-header .rn-hnl-label { font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase; color: #106d37; white-space: nowrap; }
  #rn-site-header .rn-hnl-field input {
    width: 100%; min-width: 0; height: 18px; margin: 0; padding: 0; border: 0; background: transparent;
    font: inherit; font-size: 13.5px; line-height: 18px; color: var(--text, #1a202c); text-overflow: ellipsis;
  }
  #rn-site-header .rn-hnl-field input::placeholder { color: var(--text-light, #687489); opacity: 1; }
  #rn-site-header .rn-hnl-field input:focus,#rn-site-header  .rn-hnl-field input:focus-visible { outline: none; box-shadow: none; }
  #rn-site-header .rn-hnl-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f6fbf8 inset; -webkit-text-fill-color: var(--text, #1a202c); }
  #rn-site-header .rn-hnl-btn {
    flex: 0 0 auto; position: relative; overflow: hidden; box-sizing: border-box; width: 94px; height: 34px; margin-left: 10px; padding: 0;
    border: 0; border-radius: 999px; cursor: pointer; text-align: center;
    background: linear-gradient(180deg, #15843f 0%, #0d592d 100%);
    color: #ffffff; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(13, 89, 45, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
  }
  #rn-site-header .rn-hnl-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg); transition: left .55s ease;
  }
  #rn-site-header .rn-hnl-btn:hover { filter: brightness(1.07); box-shadow: 0 3px 10px rgba(13, 89, 45, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
  #rn-site-header .rn-hnl-btn:hover::after { left: 120%; }
  #rn-site-header .rn-hnl-btn:active { transform: translateY(1px); }
  #rn-site-header .rn-hnl-btn:focus-visible { outline: 2px solid #106d37; outline-offset: 2px; }
  #rn-site-header .rn-hnl-btn[disabled] { cursor: progress; filter: saturate(.7) brightness(1.05); }
  #rn-site-header .rn-hnl-btn-txt { position: relative; z-index: 1; }
  /* sent: the field and button give way to the confirmation, in place */
  #rn-site-header .rn-hnl-done { display: none; align-items: center; gap: 9px; width: 100%; justify-content: center; font-size: 13.5px; font-weight: 700; color: #0d592d; white-space: nowrap; }
  #rn-site-header .rn-hnl.is-done { padding: 0 17px; border-color: rgba(16, 109, 55, 0.42); background: linear-gradient(180deg, #f3faf6 0%, #e4f3ea 100%); }
  #rn-site-header .rn-hnl.is-done .rn-hnl-field,#rn-site-header  .rn-hnl.is-done .rn-hnl-btn { display: none; }
  #rn-site-header .rn-hnl.is-done .rn-hnl-done { display: flex; }
  #rn-site-header .rn-hnl-tick { stroke-dasharray: 100; stroke-dashoffset: 100; }
  #rn-site-header .rn-hnl.is-done .rn-hnl-tick { animation: rn-hnl-tick .5s .08s cubic-bezier(.4, 0, .2, 1) forwards; }
  #rn-site-header .rn-hnl.is-bad { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14); animation: rn-hnl-nudge .32s ease; }
  #rn-site-header .rn-hnl.is-bad .rn-hnl-label { color: #b3261e; }
}
@keyframes rn-hnl-tick { to { stroke-dashoffset: 0; } }
@keyframes rn-hnl-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  #rn-site-header .rn-hnl,#rn-site-header  .rn-hnl-btn,#rn-site-header  .rn-hnl-btn::after { transition: none !important; animation: none !important; }
  #rn-site-header .rn-hnl.is-done .rn-hnl-tick { animation: none !important; stroke-dashoffset: 0; }
}
/* ---- /rn-hnl ---- */


/* ---- rn-adv v1.2 (owner request 2026-09-20): "Advertise" in the desktop masthead is a button, the
   commercial door of the site, built to sit beside the emerald sign-up as its dark counterpart: an
   ink-black pill, a hairline emerald rim that a point of light travels around, a green glow rising
   from inside and a sheen that crosses on hover. v1.1 (owner request the same day): exactly the
   size of the sign-up's Subscribe button, 94 x 34px with 13px type (both carry the same fixed
   box), so the arrow is gone: it does not fit that box. From 1280px up; below that the plain link
   stays (the compact row has no room) and the phone drawer keeps its own button. The rim animates
   a registered custom property; where @property is missing it simply rests. v1.2 (owner request,
   same day: "more subtle"): at rest it is a plain ink pill with a dark hairline and a 1px shadow,
   nothing moving; the travelling rim light, the glow and the sheen belong to hover only. ---- */
@property --rn-adv-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@media (min-width: 1280px) {
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 118px  /* 94px × 1.25 (owner request 2026-09-25: "increase the width of the advertise button by 25%") */; height: 34px; min-height: 34px; padding: 0;
    border: 1px solid transparent; border-radius: 999px;
    background:
      linear-gradient(180deg, #16281f 0%, #0a1510 100%) padding-box,
      linear-gradient(180deg, #2f6148 0%, #173a29 100%) border-box;
    color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(3, 14, 9, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
  }
  /* the glow that rises from the floor of the button */
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: radial-gradient(120% 95% at 50% 125%, rgba(62, 231, 145, 0.42) 0%, rgba(62, 231, 145, 0.10) 42%, rgba(62, 231, 145, 0) 66%);
    opacity: 0; transition: opacity .25s ease;
  }
  /* the base nav link's underline becomes the sheen that crosses the button on hover */
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -70%; right: auto; width: 46%; height: auto;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
    opacity: 1; transform: skewX(-18deg); transform-origin: center; transition: left .6s ease;
  }
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv:hover {
    color: #ffffff; transform: translateY(-1px);
    background:
      linear-gradient(180deg, #16281f 0%, #0a1510 100%) padding-box,
      conic-gradient(from var(--rn-adv-a), #0f5a30 0deg, #1fbf6b 60deg, #c9f7dd 92deg, #1fbf6b 124deg, #0f5a30 190deg, #0f5a30 360deg) border-box;
    box-shadow: 0 1px 2px rgba(3, 14, 9, 0.28), 0 8px 16px -9px rgba(6, 60, 34, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    animation: rn-adv-rim 2.6s linear infinite;
  }
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv:hover::before { opacity: .8; }
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv:hover::after { left: 125%; opacity: 1; transform: skewX(-18deg); }
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv:active { transform: translateY(0); }
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv:focus-visible { outline: 2px solid #106d37; outline-offset: 3px; }
  #rn-site-header .rn-adv-txt { position: relative; }
}
/* 1280-1439px: no sign-up pill here, so the search field gives the button its room. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  #rn-site-header nav .nav-links { gap: 28px; }
  #rn-site-header nav .nav-search input { width: clamp(154px, calc(154px + (100vw - 1280px) * 0.7), 244px); }
}
@keyframes rn-adv-rim { to { --rn-adv-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  #rn-site-header nav .nav-links > .nav-util--advertise a.rn-adv,#rn-site-header  nav .nav-links > .nav-util--advertise a.rn-adv::after { animation: none !important; transition: none !important; }
}
/* ---- /rn-adv ---- */


/* ---- rn-secnav v1 (owner request 2026-09-24): the desktop section bar gets the phone drawer's
   grouping, with a panel under each label. The bar itself — its position, height, type and the
   sticky offsets — is untouched; only what sits in it changes, and only above 768px.

   Phones are explicitly excluded: their flat run of hubs (`secbar-ph`) and the Spotlight-fifth
   order are a standing ruling, and a hover menu has no meaning on a touch screen. ---- */
@media (max-width: 768px) {
  #rn-site-header .secbar-list .secnav { display: none; }
}
@media (min-width: 769px) {
  #rn-site-header .secbar-list .secbar-ph { display: none; }
  #rn-site-header .secbar .container { overflow: visible; }          /* the panel hangs out of the bar */
  /* The list scrolls sideways on phones (news.css: overflow-x auto), and a non-visible overflow-x
     makes overflow-y clip as well — so a panel anchored INSIDE the list (every card-sized menu:
     Industries, Intelligence, Therapeutic Areas; Key Dates, since removed) was cut off at the bar's edge and
     unreadable, while the full-bleed ones escaped only because they anchor to .secbar. Found
     2026-09-24 by elementFromPoint on the open panel returning the page grid. On desktop every
     item fits the bar by ruling (estate-dhead), so the list never needs to scroll here. */
  #rn-site-header .secbar-list { overflow: visible; flex-wrap: wrap; }
  #rn-site-header .secbar .container::after { display: none; }       /* the scroll-fade cue: nothing scrolls here */
  /* The row is centred with its gaps at HALF what spreading it edge to edge gave (owner requests
     2026-09-24: "spread out this row, and center the menu items", then "close the gaps in the header
     menu by 50%"): the leftover width is (100% - the items' widths), a sixth of it was each gap when
     spread, so a twelfth is each gap now — with seven items. Since 2026-09-25 the row holds EIGHT
     (Key Dates joined, left of the Spotlight): seven gaps, so half the edge-to-edge spread is a
     FOURTEENTH, and the items' widths are 1032px from 1280px, 950px below it where Spotlight drops
     "Industry" (measured 2026-09-25). Those two numbers, and the divisor 2 × (items − 1), are what to
     update if a label or the item count changes; behave measures the same rule. */
  /* 2026-09-27: NINE items (For Physicians joined, right of the Spotlight), then TEN (Manufacturing & Quality
     joined, right of Intelligence: full labels only from 1680px, 1428px of items), then — the owner's
     evening request — EIGHT: Key Dates moved into the Intelligence panel and Therapeutic Areas under Product
     Categories. Seven gaps, divisor 14. Full labels ("Industry Spotlight", "For Physicians", "Manufacturing &
     Quality") from 1440px, where the items' widths are 1115px; 1280–1439px the three prefixes/suffix drop
     ("Spotlight", "Physicians", "Manufacturing"), 932px; below 1280px the row also compacts (4px item
     padding), 836px. Re-measure all three (sum of the `li` widths at 1440 / 1280 / 1100) if a label or
     the count changes; behave measures the same rule. */
  /* Nine items: Events follows Technology (2026-10-02). Summed widths, measured:
     1177px from 1680px, 1131px at 1440–1679px, 949px at 1280–1439px,
     837px below 1280px; divisor 2 × (9 − 1) = 16. */
  #rn-site-header .secbar-list { justify-content: center; column-gap: max(8px, calc((100% - 1177px) / 16)); }
  @media (max-width: 1679px) { #rn-site-header .secbar-list { column-gap: max(8px, calc((100% - 1131px) / 16)); } }
  /* The same summed widths as custom properties on <html>, for anything that must line up with the row's ends —
     the physician contact card aligns its right edge with the For Physicians tab (rn-phys). Measured: the row's
     right edge sits 49px in from the viewport up to 1712px, then the row is 1614px wide and centred. */
  #rn-site-header { --secbar-S: 1177px; }
  @media (max-width: 1679px) { #rn-site-header { --secbar-S: 1131px; } }
  #rn-site-header .secbar-list li:first-child a { padding-left: 12px; }   /* symmetric again, so the centred row reads centred */
  @media (max-width: 1439px) { #rn-site-header .secbar-list { column-gap: max(8px, calc((100% - 949px) / 16)); } }
  @media (max-width: 1279px) {
    #rn-site-header .secbar-list { column-gap: max(8px, calc((100% - 837px) / 16)); }
    #rn-site-header .secbar-list > li > a,#rn-site-header  .secbar-list li:first-child a { padding-left: 4px; padding-right: 4px; }
  }
  #rn-site-header .secbar-mq-suf { display: none; }
  @media (min-width: 1440px) { #rn-site-header .secbar-mq-suf { display: inline; } }
  #rn-site-header .secnav--mq .secnav-cap { min-height: 0; }
  /* Manufacturing & Quality's four columns gather in the middle like the Regulators panel (owner request
     2026-09-27): a content-sized grid centred in the bar at a fixed gap. */
  #rn-site-header .secnav--mq .secnav-cols { display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; gap: 18px clamp(32px, 3.4vw, 56px); }
  @media (max-width: 1099px) { #rn-site-header .secnav--mq .secnav-cols { grid-template-columns: repeat(2, max-content); } }
  /* "For " shows from 1440px, like the Spotlight's "Industry" and the desk's "& Quality" (all three waited for
     1680px while the bar held ten). */
  #rn-site-header .secbar-phys-pre { display: none; }
  @media (min-width: 1440px) { #rn-site-header .secbar-phys-pre { display: inline; } }
  #rn-site-header .secbar { position: relative; z-index: 60; }
  #rn-site-header .secbar-list .secnav { position: static; }          /* panels align to the bar, not to the item */

  #rn-site-header .secbar-list .secnav-trigger { display: inline-flex; align-items: center; gap: 6px; }
  #rn-site-header .secbar-list .secnav-chev { flex: none; opacity: .5; transition: transform .16s ease, opacity .16s ease; }
  #rn-site-header .secbar-list .secnav[data-open] .secnav-chev { transform: rotate(180deg); opacity: 1; }
  #rn-site-header .secbar-list .secnav[data-open] > .secnav-trigger { color: var(--accent, #106d37); }

  #rn-site-header .secnav-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff;
    border-top: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 18px 40px rgba(16, 32, 20, .13);
    border-radius: 0 0 14px 14px;
    padding: 22px clamp(16px, 2.2vw, 30px) 24px;
  }
  #rn-site-header .secnav-panel[hidden] { display: none; }
  /* Only the register is full-bleed: it is the one menu with three dozen destinations to lay out.
     Every other menu is a card anchored under its own label, sized to its content — a six-item
     list stretched across 1408px of bar reads as a mistake, not as a menu. */
  #rn-site-header .secbar-list .secnav:not(.secnav--wide) { position: relative; }
  #rn-site-header .secnav:not(.secnav--wide) .secnav-panel {
    left: 0; right: auto;
    width: max-content; min-width: 260px; max-width: min(780px, calc(100vw - 48px));
    border-radius: 0 0 14px 14px; padding: 18px 22px 20px;
  }
  #rn-site-header .secnav:not(.secnav--wide) .secnav-panel.secnav-panel--flip { left: auto; right: 0; }
  #rn-site-header .secnav:not(.secnav--wide) .secnav-inner { max-width: none; }
  /* Narrower bars: whole columns move to a second row, in even rows — Product Categories (six
     columns) three a row under 1440px and two under 900px; Regulators (seven, 880px of labels)
     four a row under 1100px and three under 900px. Each panel carries its own class
     (scripts/surfaces.js, secnavItem) so these can name it. */
  @media (max-width: 1439px) { #rn-site-header .secbar-list .secnav--technology .secnav-inner > .secnav-cols > .secnav-col { flex-basis: calc((100% - 44px) / 3); } }
  /* Regulators (owner rulings 2026-09-27): the jurisdiction line starts on the name's axis, not the flag's
     (flag 22px + 8px gap = 30px), and the six region columns gather in the middle at a fixed gap — a
     content-sized grid centred in the bar, the Intelligence panel's device — instead of stretching edge to edge. */
  #rn-site-header .secnav--regulators .secnav-panel a .secnav-desc { padding-left: 30px; }
  #rn-site-header .secnav--regulators .secnav-cols { --reg-gap: clamp(28px, 3vw, 48px); display: grid; grid-template-columns: repeat(6, max-content); justify-content: center; gap: 18px var(--reg-gap); }
  /* Europe's two columns are ONE section: the first column's caption rule runs on through the grid gap to meet
     the continuation column's (owner request 2026-09-27) — the -22px flex rule below does not know this gap. */
  #rn-site-header .secnav--regulators .secnav-col:has(+ .secnav-col > .secnav-cap--cont) > .secnav-cap { margin-right: calc(-1 * var(--reg-gap)); }
  @media (max-width: 1279px) { #rn-site-header .secnav--regulators .secnav-cols { grid-template-columns: repeat(3, max-content); } }
  @media (max-width: 899px) { #rn-site-header .secnav--regulators .secnav-cols { grid-template-columns: repeat(2, max-content); } }
  @media (max-width: 899px) {
    #rn-site-header .secbar-list .secnav--technology .secnav-inner > .secnav-cols > .secnav-col { flex-basis: calc((100% - 22px) / 2); }
    #rn-site-header .secbar-list .secnav--technology .secnav-band .secnav-col { flex-basis: calc((100% - 22px) / 2); }
  }
  /* Therapeutic Areas ride under Product Categories (owner request 2026-09-27: "under Product Categories …
     all across the bottom on a new row"): the panel's inner stacks — the six group columns, then a band with
     a ruled caption (linking the areas' register) and the 24 areas in four content-sized columns of six,
     which spread across the foot the way the columns above share their row. The band's columns are not
     the group columns, so the three-a-row rule above does not reach them (the `>` chain). */
  #rn-site-header .secnav--technology .secnav-inner { flex-direction: column; align-items: stretch; gap: 22px; }
  #rn-site-header .secnav-band { display: flex; flex-direction: column; }
  #rn-site-header .secnav-band-cap { min-height: 0; margin: 0 0 10px; }
  /* The caption's link is a caption, not a row (owner 2026-09-27: "match the font style of THERAPEUTIC AREAS to
     the green product category types"): the panel's row rule — 13.5px, muted, padded, hover tint — must not
     reach it, so it inherits the caption's 10.5px tracked green capitals. */
  #rn-site-header .secbar-list .secnav-panel .secnav-band-cap a { display: inline; padding: 0; margin: 0; border-radius: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; color: inherit; text-decoration: none; background: none; }
  #rn-site-header .secbar-list .secnav-panel .secnav-band-cap a:hover { background: none; color: var(--accent, #106d37); text-decoration: underline; }
  /* Six area columns hold one row from ~1200px; below 1280px they go three a row, below 900px two. */
  @media (max-width: 1279px) { #rn-site-header .secbar-list .secnav--technology .secnav-band .secnav-col { flex-basis: calc((100% - 44px) / 3); } }
  /* Product Categories (owner request 2026-09-27, "for all of the header dropdowns, move the columns in … more
     centered"): the six group columns and the Therapeutic Areas band's six columns are centred content-sized
     grids at a fixed gap, like Regulators and Manufacturing & Quality; the band shrink-wraps so its caption
     rule spans the columns, not the panel. The Intelligence panel keeps its capped 3×2 grid (already the model). */
  #rn-site-header .secnav--technology .secnav-inner > .secnav-cols,#rn-site-header  .secnav--technology .secnav-band > .secnav-cols { display: grid; grid-template-columns: repeat(6, max-content); justify-content: center; gap: 18px clamp(20px, 2vw, 40px); }
  /* The six group columns hold ~1,210px of names: one row from 1440px, three a row below it. */
  @media (max-width: 1439px) { #rn-site-header .secnav--technology .secnav-inner > .secnav-cols { grid-template-columns: repeat(3, max-content); } }
  #rn-site-header .secnav--technology .secnav-band { align-self: center; width: max-content; max-width: 100%; }
  /* Technology, three sections (owner mockup 2026-09-28): an ink section title over each — Life Science
     Technologies, Industry Technology (with its italic line and an Explore-all row), Therapeutic Areas — a hairline
     between sections, the group captions as on every panel. */
  #rn-site-header .secnav--technology .secnav-sec,#rn-site-header  .secnav--technology .secnav-band-cap { margin: 0 0 14px; padding: 0; border: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink, #33373f); }
  #rn-site-header .secnav--technology .secnav-band-cap a { color: inherit; }
  #rn-site-header .secnav--technology .secnav-band { border-top: 1px solid var(--border, #e2e8f0); padding-top: 22px; }
  #rn-site-header .secnav--technology .secnav-band-sub { margin: -8px 0 16px; font-family: Georgia, serif; font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--text-muted, #4a5568); }
  #rn-site-header .secnav--technology .secnav-band--therapeutic-areas .secnav-band-cap { padding-bottom: 8px; border-bottom: 1px solid var(--border, #e2e8f0); margin-bottom: 10px; }
  #rn-site-header .secnav--technology .secnav-band--industry-technology > .secnav-cols { grid-template-columns: repeat(5, max-content); }
  /* All three sections share one width: the top grid spreads like the bands (left edges still meet). Rows run 5px tighter
     and the section gaps shorter so the three-section panel fits a 900px-tall laptop window; shorter windows scroll it. */
  #rn-site-header .secbar-list .secnav--technology .secnav-panel .secnav-col a { padding-top: 4px; padding-bottom: 4px; }
  #rn-site-header .secbar-list .secnav--technology .secnav-panel { padding-top: 18px; padding-bottom: 18px; }
  #rn-site-header .secnav--technology .secnav-band { padding-top: 16px; }
  #rn-site-header .secnav--technology .secnav-sec,#rn-site-header  .secnav--technology .secnav-band-cap { margin-bottom: 10px; }
  #rn-site-header .secbar-list .secnav--technology .secnav-panel { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
  #rn-site-header .secbar-list .secnav--technology .secnav-panel a.secnav-band-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; font-weight: 700; color: var(--ink, #33373f); }
  #rn-site-header .secbar-list .secnav--technology .secnav-panel a.secnav-band-more:hover { color: var(--accent, #106d37); }
  @media (max-width: 1279px) { #rn-site-header .secnav--technology .secnav-inner > .secnav-cols,#rn-site-header  .secnav--technology .secnav-band > .secnav-cols { grid-template-columns: repeat(3, max-content); } }
  @media (max-width: 899px) { #rn-site-header .secnav--technology .secnav-inner > .secnav-cols,#rn-site-header  .secnav--technology .secnav-band > .secnav-cols { grid-template-columns: repeat(2, max-content); } }
  /* Owner 2026-09-27: "Justify therapeutic areas on the left to match up with the left side of the pharmaceutical
     column." Both grids ride one centred max-content track (the width of the wider of the two), start at its
     left edge, and the band's six columns spread to the track's right edge so the band's rule and its last
     column end where Emerging Technology does. */
  #rn-site-header .secnav--technology .secnav-inner { display: grid; grid-template-columns: max-content; justify-content: center; align-items: start; gap: 14px; }
  #rn-site-header .secnav--technology .secnav-inner > .secnav-cols { justify-content: space-between; }
  #rn-site-header .secnav--technology .secnav-band { align-self: auto; justify-self: stretch; width: auto; max-width: none; }
  #rn-site-header .secnav--technology .secnav-band > .secnav-cols { justify-content: space-between; }
  /* 769–1279px: the row may wrap and the bar is narrower than a 780px card, so every panel anchors
     to the bar's row instead of its item (the estate-dhead block's own rule for the masthead's
     mega-menus): a right-hand item's card no longer opens past the viewport's edge. */
  @media (max-width: 1279px) {
    #rn-site-header .secbar-list .secnav:not(.secnav--wide) { position: static; }
    #rn-site-header .secnav:not(.secnav--wide) .secnav-panel { right: 0; width: auto; max-width: none; }
  }
  #rn-site-header .secnav-inner { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 54px); max-width: 1680px; margin: 0 auto; }
  /* Columns sized by their content, never by an equal share of the row (owner ruling 2026-09-24,
     every option on one line): a wrapping flex row whose columns are at least their longest label
     wide and share the leftover width equally — the footer's .rnf-cat pattern. Where a panel's
     columns outrun the row, whole columns move to a second row; a label never breaks. The 22px gap
     is what lets the widest band (Product Categories: 1,209px of labels in six columns, measured
     2026-09-24) hold one row from 1440px. */
  #rn-site-header .secnav-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 22px; flex: 1 1 auto; }
  #rn-site-header .secnav-col { flex: 1 0 auto; min-width: 0; }
  #rn-site-header .secnav-col ul { list-style: none; margin: 0; padding: 0; }

  /* No lead card opens a panel (owner ruling 2026-09-24): the trigger's own href IS the way in —
     Regulators lands on the register, Product Categories and Therapeutic Areas on theirs — so a
     card repeating that link was a second copy of the label the reader had just clicked. */

  /* min-height holds two lines: "Middle East & Africa" wraps where the others do not, and without
     it that column's first row sat 18px below its neighbours'. Now every column starts level. */
  #rn-site-header .secnav-cap {
    margin: 4px 0 8px; padding-bottom: 6px; min-height: 0;   /* was a two-line reserve; captions are one line now (2026-09-24), and the owner wants the rule tight under the caption on every panel, as on Manufacturing & Quality (2026-09-27) */
    border-bottom: 1px solid var(--border, #e2e8f0);
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.25;
    text-transform: uppercase; color: var(--accent, #106d37);
  }
  #rn-site-header .secbar-list .secnav-panel a {
    display: block; height: auto; padding: 7px 8px; margin-left: -8px; border-radius: 8px;
    font-size: 13.5px; line-height: 1.35; color: var(--text-muted, #4a5568); text-decoration: none; white-space: nowrap;
  }
  #rn-site-header .secbar-list .secnav-panel a:hover { background: var(--bg-soft, #f7f9fc); color: var(--accent, #106d37); }
  /* news.css carries `.secbar-list li:first-child a { padding-left: 2px }` for the bar's own first
     item, and it is a DESCENDANT selector, so it also caught the first row of every panel column
     and set it 6px left of its neighbours. This outspecifies it. */
  #rn-site-header .secbar-list .secnav-panel li:first-child a { padding-left: 8px; }
  /* A split region's second column: the heading holds the space and the rule so the column heads
     stay on one line, without saying the region twice. */
  #rn-site-header .secnav-cap--cont { color: transparent; }
  /* …and the first column's rule runs on through the 22px gutter to meet it, so a split region
     (Europe) rules ONE line across both columns (owner request 2026-09-25, made for the footer's
     band; the same split lives here). */
  #rn-site-header .secnav-col:has(+ .secnav-col > .secnav-cap--cont) > .secnav-cap { margin-right: -22px; }
  #rn-site-header .secnav-name { display: block; font-weight: 600; color: var(--ink-deep, #23262b); }
  /* The jurisdiction's flag, as the drawer carries it (owner ruling 2026-09-24). A fixed gutter so
     three dozen names start on one vertical line whatever the glyph measures. Renders as a colour
     flag on macOS/iOS/Android and as two letters on most Windows builds — the owner asked for them
     on desktop knowing the drawer is where they were introduced. */
  #rn-site-header .secbar-list .secnav-panel .rn-flag {
    display: inline-block; width: 22px; margin-right: 8px;
    font-size: 14px; line-height: 1; text-align: left;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  /* Every option on ONE line (owner ruling 2026-09-24: "all the options are always on 1 line").
     An earlier fix let a long name wrap because equal grid tracks were too narrow for it and
     "Software as a Medical Device (SaMD)" ran into the next column; the tracks are now sized by
     their content (.secnav-cols above), so nothing needs to wrap and nothing may. */
  #rn-site-header .secbar-list .secnav-panel .secnav-name,#rn-site-header  .secnav-desc { white-space: nowrap; }
  #rn-site-header .secbar-list .secnav-panel a:hover .secnav-name { color: var(--accent, #106d37); }
  #rn-site-header .secnav-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-light, #687489); }
  #rn-site-header .secbar-list .secnav-panel a.is-active .secnav-name { color: var(--accent, #106d37); }

  /* A regulator list is names, not prose: tighter rows, and no description line to read past. */
  #rn-site-header .secnav--wide .secbar-list .secnav-panel a,#rn-site-header
  .secnav--wide .secnav-col a { padding-top: 5px; padding-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  #rn-site-header .secbar-list .secnav-chev { transition: none; }
}
/* ---- rn-secnav intel (owner spec 2026-09-24): the Intelligence panel is five captioned groups of
   name-and-line rows, so it runs full-bleed like the register but keeps the prose row height the
   register drops; a `soon` row is a promise (scripts/intel-menu.js) and wears a small mark. ---- */
@media (min-width: 769px) {
  #rn-site-header .secbar-list .secnav--intel .secnav-panel a { padding-top: 7px; padding-bottom: 7px; }
  /* Five groups of name-and-line rows come to ~1,750px of one-line text, more than any bar holds, so
     the panel runs three groups a row (Monitor · Research · Explore, then Analyze · AI) on equal
     tracks capped at 1,280px and centred; two a row under 1280px, one under 900px. The line under
     each name is 11.5px here (12px elsewhere) so the longest — "Upcoming deadlines, decisions,
     meetings, and effective dates." — clears a 1280px bar's track with room for a wider system font. */
  /* 2026-09-27 (evening): Key Dates is the grid's FIRST GROUP (owner: "don't separate Key Dates on its own column,
     it should blend in … in a 3 x 3 fashion — key dates, monitor, research on top, the others below"): six cells
     on the same three tracks, each rendered like the others. A ruled column beside the grid was tried and
     reverted the same day. The panel scrolls inside the viewport on short screens (1366×768 laptops), and a
     line that ever overruns its track ends in an ellipsis rather than wrapping (the drawer's own pattern). */
  #rn-site-header .secnav--intel .secnav-inner { max-width: 1280px; }
  #rn-site-header .secnav--intel .secnav-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(24px, 2.6vw, 44px); }
  #rn-site-header .secnav--intel .secnav-desc { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
  #rn-site-header .secbar-list .secnav--intel .secnav-panel { max-height: calc(100vh - 170px); overflow-y: auto; }
  @media (max-width: 1279px) { #rn-site-header .secnav--intel .secnav-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 899px) { #rn-site-header .secnav--intel .secnav-cols { grid-template-columns: minmax(0, 1fr); } }
  #rn-site-header .secnav--intel .secnav-cap { min-height: 0; }             /* one-word captions: no two-line reserve */
  #rn-site-header .secnav-soon {
    display: inline-block; vertical-align: 2px; margin-left: 7px; padding: 1px 6px 2px;
    border-radius: 999px; background: rgba(var(--accent-rgb, 16, 109, 55), .08); color: var(--accent, #106d37);
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
  }
  #rn-site-header .secbar-list .secnav-panel a[data-rn-soon] .secnav-name { color: var(--text-muted, #4a5568); }
  #rn-site-header .secbar-list .secnav-panel a[data-rn-soon]:hover .secnav-name { color: var(--accent, #106d37); }
}
/* ---- rn-secnav spot (owner request 2026-09-25): the Spotlight item opens a panel like its neighbours —
   the six milestone kinds, then the hub's submit link (scripts/spotlight-menu.js) — keeping its own type
   treatment (rn-spot v1.1: no icon, no chevron). It is not a .secnav (that class hides an item on phones,
   and the Spotlight keeps its fifth slot there), so its card is anchored here: to the item's right edge
   from 1280px, to the bar's from 769px, the same rule the other cards follow. ---- */
@media (min-width: 769px) {
  #rn-site-header .secbar-list .secbar-spot { position: relative; }
  /* No tinted pill when open (owner ruling 2026-09-27: "remove that highlight effect"); the chevron turns instead,
     as on every other menu, and the phone bar (no panels there) hides it. */
  #rn-site-header .secbar-list .secbar-spot[data-open] .secnav-chev { transform: rotate(180deg); opacity: 1; }
  /* The Spotlight item wears a light green shade on hover, when open and when current — the For Physicians
     item's device in the brand's green (owner request 2026-09-27, night; the same-day removal is superseded). */
  #rn-site-header .secbar-list .secbar-spot > a:hover,#rn-site-header  .secbar-list .secbar-spot[data-open] > a,#rn-site-header  .secbar-list .secbar-spot > a.is-active { background: rgba(16, 109, 55, .08); border-radius: 10px 10px 0 0; }
  #rn-site-header .secbar-list .secbar-spot .secnav-panel { left: auto; right: 0; width: max-content; min-width: 250px; max-width: min(360px, calc(100vw - 48px)); padding: 18px 22px 20px; }
  /* news.css styles every link under .secbar-spot as the bar label (uppercase, tracked, 12px, 0 14px): the
     panel's rows read as rows, like every other panel's. */
  #rn-site-header .secbar-list .secbar-spot .secnav-panel a { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; padding: 7px 8px; gap: 0; border-radius: 8px; }
  #rn-site-header .secbar-list .secbar-spot .secnav-panel a:hover { background: var(--bg-soft, #f7f9fc); border-radius: 8px; }
  #rn-site-header .secbar-list .secbar-spot .secnav-panel .secnav-cap { min-height: 0; }
  /* a.secnav-submit, not .secnav-submit: it must outrank the row reset above (three classes + the element). */
  #rn-site-header .secbar-list .secbar-spot .secnav-panel a.secnav-submit { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; color: var(--ink-deep, #23262b); }
  #rn-site-header .secbar-list .secbar-spot .secnav-panel a.secnav-submit:hover { color: var(--accent, #106d37); }
  @media (max-width: 1279px) {
    #rn-site-header .secbar-list .secbar-spot { position: static; }
  }
}
/* ---- rn-secnav dates (owner request 2026-09-25): the Key Dates rows close on "Regulatory Calendar →";
   the closing-row style the Spotlight card introduced now applies to any panel. Since 2026-09-27 the rows are
   the first group of the Intelligence panel's grid (.secnav-col--dates), not a card of their own. ---- */
@media (min-width: 769px) {
  #rn-site-header .secbar-list .secnav-panel a.secnav-submit { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; color: var(--ink-deep, #23262b); }
  #rn-site-header .secbar-list .secnav-panel a.secnav-submit:hover { color: var(--accent, #106d37); }
  #rn-site-header .secnav-col--dates .secnav-cap { min-height: 0; }
  /* ---- rn-secnav physicians (owner spec 2026-09-27): Explore, six columns of specialties, and the
     specialty search as the panel's last row. The pill carries the focus ring; the input never does. ---- */
  #rn-site-header .secnav--physicians .secnav-cap { min-height: 0; }
  /* The bar label in the Spotlight's dress (owner: "same style as INDUSTRY SPOTLIGHT", 2026-09-27): the
     news.css .secbar-spot rule, item for item, with the chevron every other menu has and no tinted pill on
     hover, open or current (owner ruling 2026-09-27); the panel's own links keep the panel style. */
  #rn-site-header .secbar-list .secnav--physicians > a.secnav-trigger { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; gap: 7px; color: var(--accent, #106d37); padding: 0 14px; }
  @media (max-width: 1679px) { #rn-site-header .secbar-list .secnav--physicians > a.secnav-trigger,#rn-site-header  .secbar-list .secbar-spot > a { padding: 0 4px; gap: 5px; } }
  #rn-site-header .secnav--physicians .secnav-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  #rn-site-header .secnav--physicians .secnav-cols { gap: 14px 22px; }
  #rn-site-header .secnav--physicians .secnav-col--explore { padding-right: 10px; margin-right: 8px; border-right: 1px solid var(--border, #e2e8f0); }
  /* The search leads the panel, on its left (owner 2026-09-27: right-aligned briefly, then back). The panel is a
     content-sized card — four columns wide, not the bar — pinned to the bar's right edge by the flip logic; the
     card rule's 780px cap is lifted for it so the four columns keep one row. */
  #rn-site-header .secbar-list .secnav--physicians .secnav-panel { max-width: min(1120px, calc(100vw - 48px)); }
  #rn-site-header .secnav--physicians .secnav-col a { padding-top: 5px; padding-bottom: 5px; }
  #rn-site-header .secnav-search { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-bottom: 16px; border-bottom: 1px solid var(--border, #e2e8f0); }
  #rn-site-header .secnav-search .secnav-cap { margin: 0; padding: 0; border: 0; }
  #rn-site-header .secnav-search-pill { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); min-height: 42px; padding: 0 6px 0 14px; border: 1px solid var(--border-strong, #cfd6df); border-radius: 999px; background: var(--bg-soft, #f7f9fc); color: var(--text-light, #687489); }
  #rn-site-header .secnav-search-pill:focus-within { border-color: var(--accent, #106d37); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 16, 109, 55), .22); color: var(--accent, #106d37); }
  #rn-site-header .secnav-search-pill svg { flex: none; }
  #rn-site-header .secnav-search-pill input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text, #23262b); outline: none; box-shadow: none; }
  #rn-site-header .secnav-search-pill input:focus,#rn-site-header  .secnav-search-pill input:focus-visible { outline: none; box-shadow: none; }
  #rn-site-header .secnav-search-pill input::-webkit-search-decoration,#rn-site-header  .secnav-search-pill input::-webkit-search-cancel-button { -webkit-appearance: none; }
  #rn-site-header .secnav-search-pill button { flex: none; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent, #106d37); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  #rn-site-header .secnav-search-pill button:hover { background: var(--accent-deep, #0d592d); }
}
/* ---- rn-phys v1 (owner ruling 2026-09-27): For Physicians is BLUE — the FDA badge's #2b5bb3 — wherever the site's
   green accent would be: the bar label and its underline, the dropdown's captions, search button, Soon pills and
   hovers, the drawer panel, the footer band, Physician Home, and every For Physicians story (tag pill, headline
   accent, intelligence card, contact card's representative button, CTA). One custom-property re-point per scope,
   so the components keep reading --accent and nothing is duplicated. ---- */
#rn-site-header .secnav--physicians,#rn-site-header  .rn-dropdown--physicians,#rn-site-header  .rnf-band:has(#rnf-cat-physicians),#rn-site-header  main.hub-page--physicians,#rn-site-header  main[data-section="for-physicians.html"] { --accent: #2b5bb3; --accent-deep: #234a94; --accent-rgb: 43, 91, 179; }
#rn-site-header main[data-section="for-physicians.html"] .article-tag { background: var(--accent); }
/* The bar item wears a light blue shade on hover, when open and when current (owner request 2026-09-27). */
#rn-site-header .secbar-list .secnav--physicians > a.secnav-trigger:hover,#rn-site-header  .secbar-list .secnav--physicians[data-open] > a.secnav-trigger,#rn-site-header  .secbar-list .secnav--physicians > a.secnav-trigger.is-active { background: rgba(43, 91, 179, .08); border-radius: 10px 10px 0 0; }
/* Article pages: the greens article.css and the engine's brief tint hardcode, restated in blue (owner: "only blues
   in the color scheme of the For Physician pages"). The masthead keeps the brand's green — it is the site, not the desk. */
#rn-site-header main[data-section="for-physicians.html"] .article-hero--photo .article-title em { color: #7fb0ff; }
#rn-site-header main[data-section="for-physicians.html"] .article-hero--photo .article-meta-name a:hover { color: #7fb0ff; }
#rn-site-header main[data-section="for-physicians.html"] .article-meta-name a { border-bottom-color: rgba(43, 91, 179, .35); }
#rn-site-header main[data-section="for-physicians.html"] .article-hero--photo .article-tag::before { box-shadow: 0 0 9px rgba(43, 91, 179, .85); }
#rn-site-header main[data-section="for-physicians.html"] .article-brief { background: radial-gradient(120% 140% at 100% 0%, rgba(43, 91, 179, .06), transparent 60%), linear-gradient(180deg, #ffffff, var(--bg-soft, #f7f9fc)); border-color: rgba(43, 91, 179, .18); }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .container { background-image: radial-gradient(720px 320px at 84% -12%, rgba(43, 91, 179, .40), transparent 66%), linear-gradient(118deg, rgba(34, 37, 41, .90) 0%, rgba(51, 55, 63, .80) 46%, rgba(23, 25, 28, .94) 100%); }
@media (max-width: 620px) { #rn-site-header main[data-section="for-physicians.html"] .article-cta .container { background-image: radial-gradient(600px 300px at 84% -12%, rgba(43, 91, 179, .40), transparent 66%), linear-gradient(118deg, rgba(34, 37, 41, .90) 0%, rgba(51, 55, 63, .80) 46%, rgba(23, 25, 28, .94) 100%); } }
#rn-site-header:has(main[data-section="for-physicians.html"]) .read-progress > span { box-shadow: 0 0 10px rgba(43, 91, 179, .4); }
/* The cookie bar and the footer on a physician page follow the desk (owner requests 2026-09-27): a light blue shade
   on the bar, the footer's tint of white turns blue, and every accent in it — captions, hovers, the heading dashes. */
#rn-site-header:has(main[data-section="for-physicians.html"]) .cc-banner { --accent: #2b5bb3; --accent-deep: #234a94; background: #eef3fc; border-color: #c9d8f5; }
#rn-site-header .rnf-band:has(#rnf-cat-physicians) { --rnf-dash: #2b5bb3; }
/* The sticky manufacturer card's right edge lines up with the FOR PHYSICIANS tab's right edge (owner request
   2026-09-27): the row is centred, so its last item ends (row width − summed widths) / 4 in from the row's right
   edge, which is 16px in from the viewport up to the 1680px container. From 1440px; narrower gutters keep the
   engine's left-anchored placement. */
/* The rail's containing block is the text column's 720px PADDING box (.article-body; 24px each side of the 672px
   text), so the text's right edge is 100% - 24px and the masthead's right edge is a NEGATIVE right offset:
   max(376px - 50vw, -480px). The sticky card sits evenly between the text block's right edge and the masthead card's right edge
   (16px in from the viewport, or 50% + 840px once the bar hits its 1680px maximum) — owner 2026-09-27: "evenly placed
   in between the right side of the header and the right side of the text block". Gutter G = min(50vw - 352px, 504px);
   --rail-w (250px from 1280, 280px from 1440) sets where the LEFT edge sits (as if centred); the right edge is the masthead's. */
@media (min-width: 1280px) { #rn-site-header :is(.article-contact--v1, .article-contact-rail) { --rail-w: 250px; left: calc(100% - 24px + (min(50vw - 352px, 504px) - var(--rail-w)) / 2); width: auto; max-width: none; right: max(376px - 50vw, -480px); } }   /* 2026-09-27 later: the LEFT edge stays put, the RIGHT edge runs to the masthead card's right edge (owner: "make it wider by only expanding the card's right side to line up with the right side of the header menu") */
@media (min-width: 1440px) { #rn-site-header :is(.article-contact--v1, .article-contact-rail) { --rail-w: 280px; } }
/* Desktop: the in-article card is the sticky card's width (owner 2026-09-27, kept on a second thought — "keep it.
   But update the width"): the rail is (G + --rail-w) / 2 wide (its left edge sits (G - --rail-w) / 2 into the
   gutter, its right edge on the masthead's), so the in-article card takes that width, centred in the column. */
@media (min-width: 1280px) { #rn-site-header #contact-card > .contact-card { --rail-w: 250px; width: calc((min(50vw - 352px, 504px) + var(--rail-w)) / 2); max-width: 100%; margin-left: auto; margin-right: auto; } }
@media (min-width: 1440px) { #rn-site-header #contact-card > .contact-card { --rail-w: 280px; } }
/* The breadcrumb bar under the masthead is blue-shaded on a physician page too (owner request 2026-09-27, "that
   white bar"), the cookie bar's tint and border. */
#rn-site-header main[data-section="for-physicians.html"] nav.breadcrumb-bar,#rn-site-header  main[data-section="for-physicians.html"] nav.breadcrumb-bar > .container { background: #eef3fc !important; border-color: #c9d8f5; }   /* !important: the estate masthead block paints every desktop <nav> white */
#rn-site-header main[data-section="for-physicians.html"] .breadcrumb-bar .bc-link { color: var(--accent); }
/* The desk's closing module (owner 2026-09-27: the dark "Keep Reading" slab was "distasteful" — "recreate it like
   we're a 100 billion dollar brand"): a light editorial partner card in the desk's blue. Same shell markup
   (kicker · h2 · p · button), laid out as a two-column grid with the action on the right; one column on phones. */
#rn-site-header main[data-section="for-physicians.html"] .article-cta { padding: 0 clamp(20px, 5vw, 40px); text-align: left; }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .container {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker kicker" "h2 btn" "p btn";
  column-gap: 56px; align-items: center; max-width: 1000px; padding: 42px 48px 44px; border-radius: 24px;
  background-color: #fff;
  background-image: radial-gradient(640px 260px at 100% 0%, rgba(43, 91, 179, .10), transparent 70%), linear-gradient(135deg, #f6f8fe 0%, #fff 48%, #f4f7fd 100%);
  border: 1px solid #d6e0f5; box-shadow: 0 26px 60px -34px rgba(43, 91, 179, .38), 0 1px 3px rgba(43, 91, 179, .06);
}
#rn-site-header main[data-section="for-physicians.html"] .article-cta .kicker { grid-area: kicker; display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #2b5bb3; }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .kicker::before { content: ""; width: 28px; height: 2px; background: #2b5bb3; border-radius: 2px; }
#rn-site-header main[data-section="for-physicians.html"] .article-cta h2 { grid-area: h2; margin: 0 0 12px; max-width: 24ch; font-family: Georgia, serif; font-weight: 400; font-size: clamp(27px, 3vw, 36px); line-height: 1.16; letter-spacing: -.005em; color: var(--ink, #33373f); text-align: left; }
#rn-site-header main[data-section="for-physicians.html"] .article-cta p:not(.kicker) { grid-area: p; margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: #4b5058; text-align: left; }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .btn-primary { grid-area: btn; justify-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border: 0; outline: 0; border-radius: 999px; background: #2b5bb3; color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap; box-shadow: 0 14px 30px -10px rgba(43, 91, 179, .55); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .btn-primary::after { content: "\2192"; font-size: 18px; line-height: 1; transition: transform .18s ease; }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .btn-primary:hover { background: #234a94; color: #fff; transform: translateY(-1px); box-shadow: 0 18px 34px -12px rgba(43, 91, 179, .6); }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .btn-primary:hover::after { transform: translateX(3px); }
#rn-site-header main[data-section="for-physicians.html"] .article-cta .btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2b5bb3; }   /* keyboard focus keeps a ring; the site's dark button border is gone (owner: "remove the black outline") */
@media (max-width: 760px) {
  #rn-site-header main[data-section="for-physicians.html"] .article-cta .container { grid-template-columns: 1fr; grid-template-areas: "kicker" "h2" "p" "btn"; padding: 30px 24px 32px; row-gap: 0; }
  #rn-site-header main[data-section="for-physicians.html"] .article-cta .btn-primary { justify-self: start; margin-top: 22px; }
}
/* ---- /rn-phys ---- */
/* ---- /rn-secnav ---- */


/* ---- rn-soon v1 (owner spec 2026-09-24): the Coming Soon dialog behind every Intelligence row that
   is a promise rather than a page (scripts/intel-menu.js, `soon`), Ask REGTEKA AI first among them.
   White, like everything on the site that is not the newsletter; the serif for the title alone. ---- */
#rn-site-header .rn-soon { padding: 0; border: 0; background: transparent; max-width: min(460px, calc(100vw - 32px)); color: inherit; }
#rn-site-header .rn-soon::backdrop { background: rgba(26, 32, 44, .55); }
#rn-site-header .rn-soon-card { position: relative; padding: 30px 30px 26px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 32, 20, .18); color: var(--text, #1a202c); }
#rn-site-header .rn-soon-eyebrow { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #106d37); }
#rn-site-header .rn-soon-title { margin: 0; font-family: var(--serif, "DM Serif Display", Georgia, serif); font-weight: 400; font-size: clamp(24px, 3vw, 29px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-deep, #23262b); text-wrap: balance; }
#rn-site-header .rn-soon-body { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-muted, #4a5568); }
#rn-site-header .rn-soon-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
#rn-site-header .rn-soon-ok { appearance: none; border: 0; cursor: pointer; padding: 11px 18px; border-radius: 10px; background: var(--accent, #106d37); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
#rn-site-header .rn-soon-ok:hover { background: var(--accent-hover, #0d592d); }
#rn-site-header .rn-soon-brief { font-size: 13.5px; line-height: 1.4; color: var(--text-light, #687489); text-decoration: none; }
#rn-site-header .rn-soon-brief b { font-weight: 600; color: var(--accent, #106d37); }
#rn-site-header .rn-soon-brief:hover b { text-decoration: underline; }
#rn-site-header .rn-soon-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-light, #687489); cursor: pointer; }
#rn-site-header .rn-soon-x:hover { background: var(--bg-soft, #f7f9fc); color: var(--ink-deep, #23262b); }
#rn-site-header .rn-soon-x svg { width: 16px; height: 16px; }
#rn-site-header .rn-soon[open] .rn-soon-card { animation: rn-soon-in .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes rn-soon-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { #rn-site-header .rn-soon-card { padding: 26px 22px 22px; } }
@media (prefers-reduced-motion: reduce) { #rn-site-header .rn-soon[open] .rn-soon-card { animation: none; } }
/* ---- /rn-soon ---- */

/* rn-mnav v1 — Regulatory News mobile navigation drawer (2026-09-16, owner request: the phone menu follows
   Regulatory Events — search pill, large chevron rows, slide-in section panels, pinned newsletter CTA).
   Ported from Events' re-mnav layer (itself Academy's ra-mnav). Below 768px it overrides the legacy flat
   drawer in news.css / article.css; the 64px masthead itself is the estate-mhead block every page carries.
   THIS FILE IS THE SOURCE and is served as-is: templates/nav.html links it (and mnav.js) with a ?v=<md5-8>
   that scripts/surfaces.js stamps — edit here, then `npm run surfaces`, rebuild + adopt the articles. */
#rn-site-header .rn-mnav-chev,#rn-site-header  .rn-mnav-head,#rn-site-header  .rn-mnav-foot,#rn-site-header  .rn-mnav-foot-li { display: none; }
@media (max-width: 768px) {
  #rn-site-header { --rn-mnav-top: 64px; --rn-mnav-ease: cubic-bezier(0.22, 1, 0.36, 1); }

  html.rn-mnav-lock, html.rn-mnav-lock body { overflow: hidden !important; height: 100% !important; overscroll-behavior: none; }
  html.rn-mnav-lock .back-to-top, html.rn-mnav-lock #cc-banner, html.rn-mnav-lock .consent-banner { display: none !important; }
  html.rn-mnav-ready #rn-site-header nav { z-index: 10000 !important; }

  /* ---- Level 1: the drawer ---- */
  html.rn-mnav-ready #rn-site-header .nav-links {
    display: flex !important;
    position: fixed !important;
    top: var(--rn-mnav-top) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 20px 0 !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 9990 !important;
    box-sizing: border-box !important;
    /* Never let the drawer become the containing block for the fixed section panels. */
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  html.rn-mnav-open #rn-site-header .nav-links {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li { width: 100% !important; margin: 0 !important; position: static !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > a:not(.nav-cta) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    min-height: 60px !important;
    padding: 0 2px 0 4px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    color: var(--ink-deep) !important;
    text-decoration: none !important;
    position: static !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li > a:not(.nav-cta)::before,html.rn-mnav-ready #rn-site-header .nav-links > li > a:not(.nav-cta)::after { display: none !important; content: none !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > a:not(.nav-cta):active { background: var(--bg-soft) !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > a.is-active:not(.nav-cta) { color: var(--accent) !important; }
  #rn-site-header .rn-mnav-chev {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 50%;
    color: var(--accent);
    background: rgba(16, 109, 55, 0.1);
  }
  #rn-site-header .rn-mnav-chev svg { width: 14px; height: 14px; display: block; }

  /* Search pill sits at the top of the drawer (pill carries the ring; inner input never does). */
  html.rn-mnav-ready #rn-site-header .nav-links > li.nav-search-item { order: -1 !important; display: block !important; padding: 12px 0 8px !important; }
  html.rn-mnav-ready #rn-site-header .nav-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    background: var(--bg-soft) !important;
    color: var(--text-light) !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-search:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(16, 109, 55, 0.22) !important;
    color: var(--accent) !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-search svg { width: 17px !important; height: 17px !important; }
  html.rn-mnav-ready #rn-site-header .nav-search input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 16px !important; /* 16px stops iOS zooming the page on focus */
    color: var(--text) !important;
    outline: none !important;
    box-shadow: none !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-search input:focus-visible { outline: none !important; box-shadow: none !important; }

  /* Pinned footer (injected): the header CTA moves here + the ecosystem line */
  html.rn-mnav-ready #rn-site-header .nav-links > li.rn-mnav-foot-li {
    display: block !important;
    margin-top: auto !important;
    padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 26%) !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li.rn-mnav-foot-li .nav-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 54px !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    background: var(--accent) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(16, 109, 55, 0.28) !important;
    transform: none !important;
  }
  #rn-site-header .rn-mnav-foot {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--text-light);
  }
  /* The foot line is "Inside Regulatory News" alone (owner ruling 2026-09-18: the ecosystem line left the
     drawer). The About panel's own row steps aside; the foot link opens that panel (mnav.js,
     data-rn-mnav-panel). */
  html.rn-mnav-ready #rn-site-header .nav-links > li.rn-mnav-about > a { display: none !important; }
  /* A 12.5px text link is a 16px target; pad it upward to ~30px and take the same off the line's margin. */
  #rn-site-header .rn-mnav-foot { margin-top: 2px; }
  html.rn-mnav-ready #rn-site-header .nav-links .rn-mnav-foot a.rn-mnav-inside { display: inline-block !important; padding: 12px 4px 1px !important; }
  html.rn-mnav-ready #rn-site-header .nav-links .rn-mnav-foot a.is-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
  html.rn-mnav-ready #rn-site-header .nav-links .rn-mnav-foot a {
    display: inline !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--border-strong) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-decoration: none !important;
  }

  /* ---- Level 2: section panels (slide in from the right) ---- */
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] {
    display: block !important;
    position: fixed !important;
    top: var(--rn-mnav-top) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 9995 !important;
    opacity: 1 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.3s var(--rn-mnav-ease), visibility 0s linear 0.3s;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li.rn-mnav-open > div[class*="-dropdown"] {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform 0.3s var(--rn-mnav-ease), visibility 0s;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"]::before { display: none !important; content: none !important; }

  /* Panel header (injected): back button + section title */
  #rn-site-header .rn-mnav-head {
    display: block !important;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -20px 4px;
    padding: 10px 20px 12px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
  }
  #rn-site-header .rn-mnav-back {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 36px; padding: 0 10px 0 4px; margin-left: -4px;
    border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #rn-site-header .rn-mnav-back:active { background: rgba(16, 109, 55, 0.1); }
  #rn-site-header .rn-mnav-back svg { width: 16px; height: 16px; }
  #rn-site-header .rn-mnav-title {
    display: block; margin: 2px 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
    color: var(--ink-deep);
    outline: none !important;
    box-shadow: none !important;
  }
  #rn-site-header .rn-mnav-title:focus,#rn-site-header  .rn-mnav-title:focus-visible { outline: none !important; box-shadow: none !important; }

  /* "View all" row (Topics → Browse the library) */
  html.rn-mnav-ready #rn-site-header .nav-links a[class*="-dropdown-all"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    width: 100% !important;
    min-height: 52px !important;
    margin: 6px 0 4px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    background: var(--bg-soft) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink-deep) !important;
    grid-column: auto !important;
    position: static !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-links a[class*="-dropdown-all"]::before,html.rn-mnav-ready #rn-site-header .nav-links a[class*="-dropdown-all"]::after { display: none !important; content: none !important; }
  html.rn-mnav-ready #rn-site-header .nav-links a[class*="-dropdown-all"] svg { width: 16px !important; height: 16px !important; color: var(--accent); transform: none !important; }

  /* Groups */
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] > div[class*="-dropdown-col"] { min-width: 0 !important; display: block !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] h4 {
    display: block !important;
    position: static !important;
    margin: 22px 0 0 !important;
    padding: 0 0 8px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    z-index: auto !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] h4::before,html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] h4::after { display: none !important; content: none !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul {
    display: block !important;
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
    columns: auto !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li { margin: 0 !important; padding: 0 !important; display: block !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li a {
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 12px 8px 12px 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    color: var(--text) !important;
    text-decoration: none !important;
    white-space: normal !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li:last-child a { border-bottom: 0 !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li a:active { background: var(--bg-soft) !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li a.is-active {
    color: var(--accent) !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
    padding-left: 12px !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li a::before,html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li a::after { display: none !important; content: none !important; }

  /* ---- News specifics ---- */
  /* The foot carries both utilities as buttons — newsletter, then Advertise (owner ruling 2026-09-16) —
     so the two utility rows that say the same things step aside. Same width, stacked (estate-cta). */
  html.rn-mnav-ready #rn-site-header .nav-links > li.nav-util--newsletter,html.rn-mnav-ready #rn-site-header .nav-links > li.nav-util--advertise { display: none !important; }
  html.rn-mnav-ready #rn-site-header .nav-links > li.rn-mnav-foot-li .nav-cta.rn-mnav-cta--ghost {
    margin-top: 10px !important;
    background: #ffffff !important;
    color: var(--accent) !important;
    border: 1.5px solid var(--accent) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }
  html.rn-mnav-ready #rn-site-header .nav-links > li.rn-mnav-foot-li .nav-cta.rn-mnav-cta--ghost:active { background: rgba(16, 109, 55, 0.08) !important; }
  /* Panel rows carry the section name and one line on what it covers. */
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li a {
    flex-direction: column !important; align-items: flex-start !important; justify-content: center !important;
    /* 52px, the flag row's height (was 62px, owner request 2026-09-24 "optimize the mobile menu for
       spacing"): a name-only row (product categories, therapeutic areas) no longer carries a blank
       line's worth of air; a name-and-line row is taller by exactly its own line. */
    gap: 2px; min-height: 52px !important;
  }
  /* Every option on ONE line (owner ruling 2026-09-24): a name never wraps, and the line under it is
     clipped with an ellipsis where a phone is too narrow for all of it (five of the seventeen
     Intelligence lines at 390px) rather than broken onto a second line — the native list pattern. */
  #rn-site-header .rn-mnav-name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-deep); white-space: nowrap; }
  #rn-site-header .rn-mnav-desc { display: block; max-width: 100%; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.rn-mnav-ready #rn-site-header .nav-links a.is-active .rn-mnav-name { color: var(--accent); font-weight: 700; }
  /* Series panels (Deadlines & Dates, Industry Spotlight): a small caption names each filter group. */
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li.rn-mnav-cap {
    margin: 22px 0 0 !important;
    padding: 0 0 8px 2px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: var(--accent) !important;
  }
  #rn-site-header .rn-mnav-star { display: inline-flex; align-items: center; gap: 8px; }
  #rn-site-header .rn-mnav-star svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
  /* ---- rn-mnav flags v1 (owner ruling 2026-09-24) — the Regulators panel names every authority
     and carries its jurisdiction's flag. Phone-only by construction: this whole file sits inside one
     max-width:768px block and the drawer does not exist above it, which is also the only place an
     emoji flag reliably renders as a flag rather than as two letters. The flag sits in a fixed
     gutter so three dozen names start on one vertical line whatever the glyph measures, and a flag
     row carries no second line, so it runs horizontally and shorter than a hub row. */
  html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] ul li a.rn-mnav-flagrow {
    flex-direction: row !important;
    align-items: center !important;
    /* The hub-row rule centres its two stacked lines; inherited by a row it centres the whole line,
       and 36 names drifted in and out by up to 70px. */
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 52px !important;
  }
  #rn-site-header .rn-mnav-flag {
    flex: none;
    width: 25px;
    font-size: 19px;
    line-height: 1;
    text-align: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  /* Short phones: six rows + the two pinned buttons fit without scrolling. */
  @media (max-height: 700px) {
    html.rn-mnav-ready #rn-site-header .nav-links > li > a:not(.nav-cta) { min-height: 54px !important; }
  }
  #rn-site-header .rn-mnav-name svg { width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; color: var(--accent); }

  /* ---- rn-mnav intel v1 (owner spec 2026-09-24): the Intelligence panel is five captioned groups;
     its first caption sits under the panel head rather than 22px below it, and a `soon` row (a promise,
     not a page — scripts/intel-menu.js) wears a small mark. ---- */
  html.rn-mnav-ready #rn-site-header .nav-links > li > div.rn-dropdown--intel ul li.rn-mnav-cap:first-child { margin-top: 14px !important; }  /* was 4px: cramped under the head's rule */
  #rn-site-header .rn-mnav-soon {
    display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 7px 3px;
    border-radius: 999px; background: rgba(16, 109, 55, 0.08); color: var(--accent);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  }

  @media (prefers-reduced-motion: reduce) {
    html.rn-mnav-ready #rn-site-header .nav-links,html.rn-mnav-ready #rn-site-header .nav-links > li > div[class*="-dropdown"] { transition: none !important; }
  }
}