/* Attending Health — site stylesheet.
   Every value here is transcribed from the approved mock's inline styles
   (Attending Clinical Reference.dc.html) and expressed through the variables in
   design/tokens.css, which is served verbatim at /tokens.css. Nothing is
   invented: where the mock hard-codes a hex that is not in tokens.css it is
   noted inline.

   Two hard rules live in this file:
   - No stylesheet import and no url() to any external host. The site renders offline.
   - Inter if the OS has it, otherwise system-ui. There is no webfont request. */

/* --------------------------------------------------------------- foundations */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ah-font);
  background: var(--ah-white);
  color: var(--ah-ink);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;             /* 375px: nothing may scroll the page sideways */
}

a { color: var(--ah-blue); text-decoration: none; }
a:hover { color: var(--ah-blue-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; }
input::placeholder, textarea::placeholder { color: var(--ah-muted); }

:focus-visible { outline: 2px solid var(--ah-blue-400); outline-offset: 2px; border-radius: var(--ah-r-xs); }

.ah-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ah-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ah-white); color: var(--ah-blue);
  padding: 10px 16px; border-radius: var(--ah-r-sm); font-weight: 700;
}
.ah-skip:focus { left: 12px; top: 12px; }

/* ------------------------------------- pre-publication notice (was the wash) */
/* The v6 build stamped every page with a sticky red bar and a fixed diagonal wash
   over the whole viewport, so no screenshot could be mistaken for a live page.
   That is the right default for an unreviewed *artifact* and the wrong one for a
   property being shown to colleagues: it made a working site look broken, and it
   is not what keeps unapproved content off the web — the Stage 8 gate is.
   Approval logic is untouched (`mock_reviewer` still makes `approved` unreachable,
   and Stage 8 still hard-blocks); only the chrome is gone. */

/* ------------------------------------------------------- edition strip (v7) */
.ah-strip {
  background: var(--ah-ink); color: var(--ah-on-dark);
  font-size: 11.5px; letter-spacing: 0.03em;
}
.ah-strip-in {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 0 var(--ah-gutter); min-height: var(--ah-strip-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.ah-strip-ed { padding: 7px 0; }
.ah-strip-nav { display: flex; align-items: center; gap: 22px; padding: 7px 0; }
.ah-strip-nav a { color: var(--ah-on-dark); }
.ah-strip-nav a:hover { color: var(--ah-white); }
.ah-strip-strong { color: var(--ah-white); font-weight: 600; }

/* ------------------------------------------------------------------- header */
.ah-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--ah-line-blue);
}
@supports (backdrop-filter: blur(10px)) {
  .ah-header { backdrop-filter: blur(10px); }
}
.ah-header-in {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 0 var(--ah-gutter); min-height: var(--ah-header-h);
  display: flex; align-items: center; gap: 28px;
}
.ah-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.ah-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.ah-logo:hover { text-decoration: none; }
.ah-mark { width: 34px; height: 34px; flex-shrink: 0; }
.ah-logo-word {
  font-weight: 800; font-size: 19px; letter-spacing: -0.025em; color: var(--ah-ink);
  white-space: nowrap;
}
.ah-logo-word-2 { color: var(--ah-blue); font-weight: 800; }

/* Primary nav: a small fixed set, so it fits without scrolling or truncating. */
.ah-nav {
  display: flex; align-items: center; gap: 24px;
  flex: 1; justify-content: flex-start; min-width: 0; flex-wrap: wrap;
}
.ah-nav-link {
  font-size: 14px; font-weight: 600; color: var(--ah-body-2); white-space: nowrap;
}
.ah-nav-link:hover { color: var(--ah-blue); text-decoration: none; }
.ah-nav-link.is-strong { font-weight: 700; color: var(--ah-ink); }
.ah-nav-link.is-active { color: var(--ah-ink); font-weight: 700; }
.ah-nav-link.is-soon { color: var(--ah-muted-2); }

/* ------------------------------------------------- therapeutic-area bar (v7) */
/* Wraps. Never scrolls, never truncates. The active area is marked by an ink
   underline rather than a colour, so the bar stays monochrome. */
.ah-areabar { background: var(--ah-white); border-bottom: 1px solid var(--ah-line-blue); }
.ah-areabar-in {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 9px var(--ah-gutter);
  display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center;
}
.ah-areabar-link {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ah-muted); padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.ah-areabar-link:hover { color: var(--ah-ink); text-decoration: none; }
.ah-areabar-link.is-active {
  color: var(--ah-ink); font-weight: 700; border-bottom-color: var(--ah-ink);
}

.ah-search-mini {
  display: flex; align-items: center; gap: 7px;
  background: var(--ah-grey); border: 1px solid transparent;
  border-radius: var(--ah-r-sm); padding: 8px 11px; width: 168px; max-width: 100%;
}
.ah-search-mini:focus-within { border-color: var(--ah-line); background: var(--ah-white); }
.ah-search-mini input {
  border: none; background: transparent; outline: none;
  font-size: 13px; font-family: inherit; color: var(--ah-ink); width: 100%;
  min-width: 0; appearance: none;
}
.ah-search-glass {
  width: 13px; height: 13px; border: 1.5px solid var(--ah-muted);
  border-radius: 50%; flex-shrink: 0; position: relative; display: block;
}
.ah-search-glass i {
  position: absolute; width: 6px; height: 1.5px; background: var(--ah-muted);
  transform: rotate(45deg); top: 11px; left: 9px;
}
.ah-login {
  font-size: 13.5px; font-weight: 700; color: var(--ah-white);
  background: var(--ah-blue); padding: 9px 18px; border-radius: var(--ah-r-sm);
  white-space: nowrap;
}
.ah-login:hover { background: var(--ah-blue-hover); color: var(--ah-white); text-decoration: none; }
/* Internal demo link: legible but visually subordinate to Log in, so it does not
   read as part of the publication's own navigation. */
.ah-demo-link {
  font-size: 14px; font-weight: 600; color: var(--ah-blue);
  border: 1px solid var(--ah-line-blue); background: var(--ah-white);
  padding: 7px 15px; border-radius: var(--ah-r-sm); white-space: nowrap;
}
.ah-demo-link:hover { background: var(--ah-tint-2); text-decoration: none; }

.ah-main { flex: 1; position: relative; z-index: 2; }

/* --------------------------------------------------------------------- hero */
.ah-hero-wrap {
  background: linear-gradient(180deg, var(--ah-tint-5) 0%, #F2F8FD 55%, var(--ah-white) 100%);
  border-bottom: 1px solid var(--ah-tint-4);
}
.ah-hero {
  max-width: var(--ah-w-prose); margin: 0 auto;
  padding: 72px 24px 30px; text-align: center;
}
.ah-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ah-blue); text-transform: uppercase; margin-bottom: 18px;
}
.ah-hero-h1 {
  font-size: 46px; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 14px; line-height: 1.08;
}
.ah-hero-dek {
  font-size: 17px; color: var(--ah-body); margin: 0 0 30px; line-height: 1.5;
}
.ah-hero-search {
  display: flex; align-items: center; background: var(--ah-white);
  border: 1.5px solid var(--ah-line); border-radius: var(--ah-r-pill);
  height: 58px; padding: 0 8px 0 26px; box-shadow: var(--ah-sh);
  max-width: var(--ah-w-narrow); margin: 0 auto; gap: 8px;
}
.ah-hero-search input {
  flex: 1; min-width: 0; border: none; outline: none;
  font-size: 15px; font-family: inherit; color: var(--ah-ink);
  background: transparent; appearance: none;
}
.ah-hero-go {
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--ah-blue); display: flex; align-items: center;
  justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
}
.ah-hero-go:hover { background: var(--ah-blue-hover); }
.ah-play {
  width: 0; height: 0; display: block;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 8px solid var(--ah-white); margin-left: 3px;
}
/* the mock's hero fine print uses a lighter grey than any token */
.ah-hero-fine { font-size: 13px; color: #AEB6BE; margin: 14px 0 0; }
.ah-search-page { margin: 0 0 28px; }

/* ==========================================================================
   v7 NEWSROOM — home
   Three columns on desktop, one on a phone. The rules ("MORE IN THE CORPUS",
   "MOST CITED") are the mock's section rules: 12px, 800, .12em tracking, over a
   2px ink underline. They carry the whole layout, so they are defined once.
   ========================================================================== */

/* section rule ------------------------------------------------------------- */
.ah-rule, .ah-rule-wide {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 2px solid var(--ah-ink);
  padding-bottom: 8px; margin: 0 0 4px;
}
.ah-rule-wide { margin-bottom: 22px; }
.ah-rule > span:first-child, .ah-rule-wide > span:first-child {
  font-size: 12px; font-weight: 800; letter-spacing: var(--ah-track-eyebrow);
  text-transform: uppercase; color: var(--ah-ink);
}
.ah-rule-go { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ah-rule-count { font-size: 13px; font-weight: 600; color: var(--ah-muted); white-space: nowrap; }
.ah-rule-plain {
  font-size: 12px; font-weight: 800; letter-spacing: var(--ah-track-eyebrow);
  text-transform: uppercase; color: var(--ah-ink); margin-bottom: 12px;
}

/* kicker — colour is the therapeutic area, not decoration ------------------- */
.ah-kicker {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 7px;
}
.ah-hue-endo   { color: var(--ah-sp-endo); }
.ah-hue-cardio { color: var(--ah-sp-cardio); }
.ah-hue-id     { color: var(--ah-sp-id); }
.ah-hue-neuro  { color: var(--ah-sp-neuro); }
.ah-hue-onc    { color: var(--ah-sp-onc); }
.ah-hue-policy { color: var(--ah-sp-policy); }
.ah-hue-pharm  { color: var(--ah-sp-pharm); }

/* ---------------------------------------------------------- engraved plates */
/* `plates.jpg` is one 4×8 sheet of 32 engraved panels (400 KB, one request for the
   whole set). A panel is selected with two custom properties rather than 32 classes:
   with `background-size: 400% 800%`, position `col/3 * 100%` × `row/7 * 100%` lands
   exactly on a cell.
   `aspect-ratio` matches the panel's own shape, so a plate crops but never distorts —
   the mistake the first attempt made by forcing a sprite into a differently-shaped box.

   These are DECORATION, not illustration: the sheet is drawn around eight specific
   conditions, none of which are this site's therapeutic areas, so a plate is only
   used where it makes no clinical claim — a hand holding a cup beside a morning
   newsletter, a hand holding a pen beside a printable reference. Never on an article
   hero or an area header, where a reader would fairly read it as depicting the topic.
   Article heroes keep photographs. */
.ah-plate {
  --col: 0; --row: 0;
  display: block; width: 100%; aspect-ratio: 3 / 1;
  background-image: url("/static/img/plates.jpg");
  background-size: 400% 800%;
  background-position: calc(var(--col) * 100% / 3) calc(var(--row) * 100% / 7);
  background-repeat: no-repeat;
  border-radius: var(--ah-r-sm);
}
/* Named for what they show, not for the condition the sheet drew them for. */
.ah-plate-spoon  { --col: 0; --row: 0; }
.ah-plate-cup    { --col: 1; --row: 0; }
.ah-plate-pen    { --col: 2; --row: 0; }
.ah-plate-eye    { --col: 0; --row: 4; }
.ah-plate-drop   { --col: 1; --row: 5; }
.ah-plate-window { --col: 1; --row: 6; }
.ah-plate-neuron { --col: 0; --row: 7; }
/* On a navy card, `mix-blend-mode: multiply` drags the cream paper down into the
   ground and the engraving turns to mud — the same failure the collection cards had.
   The plate keeps its own paper instead and sits as a band at the head of the card,
   which is what the pocket-guide card already does. Consistent, and legible. */
.ah-plate.is-on-dark { border-radius: 0; }
.ah-rail-promo .ah-plate { margin: -18px -18px 14px; width: auto; border-radius: var(--ah-r-lg) var(--ah-r-lg) 0 0; }
.ah-nl-card .ah-plate { margin: -22px -22px 16px; width: auto; border-radius: var(--ah-r-xl) var(--ah-r-xl) 0 0; }
/* Centred masthead: the plate is a band above the eyebrow, capped so it does not
   become a billboard on a wide screen. */
.ah-nlp-plate {
  max-width: 420px; margin: 0 auto 22px; aspect-ratio: 3 / 1;
  border-radius: var(--ah-r-lg);
}

/* area masthead ------------------------------------------------------------ */
/* Two problems with the first version, both visible at a glance: the plate sat alone
   above the heading leaving the right half of the row empty, and its cream paper met
   the white page on a hard rectangular edge, so it read as pasted on.
   The band is now paper-coloured and full-bleed — there is no edge to notice — and the
   heading sits beside the plate, which is what fills the space. The plate is
   additionally feathered at its edges, so any difference between the artwork's paper
   and `--ah-paper` dissolves instead of drawing a line. */
.ah-area-head {
  background: var(--ah-paper);
  border-bottom: 1px solid var(--ah-paper-line);
  margin-bottom: 8px;
}
.ah-area-head-in {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 0 var(--ah-gutter);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px; align-items: center; min-height: 260px;
}
.ah-area-head.is-bare .ah-area-head-in {
  grid-template-columns: 1fr; min-height: 0; padding-top: 26px; padding-bottom: 26px;
}
.ah-area-plate {
  width: 100%; aspect-ratio: 16 / 9; max-height: 280px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  /* Feathered so the plate's own paper dissolves into the band. */
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 82% at 50% 50%, #000 58%, transparent 100%);
}
.ah-area-intro { min-width: 0; }
.ah-area-intro .ah-crumb { font-size: 12.5px; color: var(--ah-muted); margin-bottom: 14px; }
.ah-area-intro .ah-crumb span { margin: 0 6px; color: var(--ah-muted-3); }
.ah-area-h1 {
  font-size: 40px; font-weight: 800; letter-spacing: var(--ah-track-tight);
  line-height: 1.06; margin: 0 0 10px; color: var(--ah-ink); text-wrap: pretty;
}
.ah-area-meta { font-size: 14px; color: var(--ah-body); margin: 0; }

@media (max-width: 860px) {
  .ah-area-head-in {
    grid-template-columns: 1fr; gap: 12px; min-height: 0;
    padding-top: 18px; padding-bottom: 22px;
  }
  /* The heading leads on a narrow screen; the plate follows it rather than pushing it
     below the fold. */
  .ah-area-intro { order: -1; }
  .ah-area-plate { max-height: 170px; }
  .ah-area-h1 { font-size: 30px; }
}

/* the one-line value statement above the newsroom ------------------------- */
.ah-home-tag {
  max-width: var(--ah-w-max); margin: 0 auto; padding: 22px var(--ah-gutter) 0;
  font-size: 15px; line-height: 1.5; color: var(--ah-body);
}

/* the three-column shell --------------------------------------------------- */
.ah-home {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 32px var(--ah-gutter) 0;
  display: grid; grid-template-columns: var(--ah-rail-l) 1fr var(--ah-rail-r);
  gap: 40px; align-items: start;
}
.ah-rail { min-width: 0; }
.ah-rail-r { position: sticky; top: var(--ah-sticky-top); }
.ah-lead-col { min-width: 0; }

/* left rail ---------------------------------------------------------------- */
.ah-rail-item {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--ah-line-2);
  color: inherit;
}
.ah-rail-item:hover { text-decoration: none; }
.ah-rail-item:hover .ah-rail-title { color: var(--ah-blue); }
.ah-rail-title {
  display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.008em; color: var(--ah-ink);
}
.ah-rail-meta { display: block; font-size: 11.5px; color: var(--ah-muted-2); margin-top: 6px; }

.ah-rail-promo {
  margin-top: 26px; background: var(--ah-grey);
  border-radius: var(--ah-r-lg); padding: 18px;
}
.ah-rail-promo-title { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.ah-rail-promo-p { font-size: 13px; color: var(--ah-body); line-height: 1.5; margin: 0; }
.ah-rail-promo-go {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700;
}

/* lead --------------------------------------------------------------------- */
.ah-lead { display: block; color: inherit; margin-bottom: 34px; }
.ah-lead:hover { text-decoration: none; }
.ah-lead:hover .ah-lead-h1 { color: var(--ah-blue); }
.ah-lead-media {
  display: block; height: 372px; border-radius: var(--ah-r-xs);
  background-size: cover; background-position: center; margin-bottom: 16px;
}
.ah-lead-h1 {
  font-size: 38px; font-weight: 800; letter-spacing: var(--ah-track-tight);
  line-height: 1.1; margin: 0 0 12px; color: var(--ah-ink); text-wrap: pretty;
}
.ah-lead-dek {
  font-family: var(--ah-serif); font-size: 18px; color: var(--ah-body-strong);
  line-height: 1.5; margin: 0 0 16px; text-wrap: pretty;
}
.ah-lead-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ah-body-strong);
}

/* 2×2 grid ----------------------------------------------------------------- */
.ah-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px; }
.ah-tile { display: block; color: inherit; min-width: 0; }
.ah-tile:hover { text-decoration: none; }
.ah-tile:hover .ah-tile-h3 { color: var(--ah-blue); }
.ah-tile-media {
  display: block; height: 168px; border-radius: var(--ah-r-xs);
  background-size: cover; background-position: center; margin-bottom: 13px;
}
.ah-tile-h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.26;
  margin: 0 0 8px; color: var(--ah-ink); text-wrap: pretty;
}
.ah-tile-dek {
  font-family: var(--ah-serif); font-size: 15px; color: var(--ah-body);
  line-height: 1.5; margin: 0 0 9px;
}
.ah-tile-meta { font-size: 12.5px; color: var(--ah-muted-2); }

/* right rail: numbered list ------------------------------------------------ */
.ah-num-item {
  display: flex; gap: 12px; align-items: flex-start; color: inherit;
  padding: 13px 0; border-bottom: 1px solid var(--ah-line-2);
}
.ah-num-item:hover { text-decoration: none; }
.ah-num-item:hover .ah-num-title { color: var(--ah-blue); }
.ah-num {
  font-size: 20px; font-weight: 800; color: var(--ah-muted-3);
  line-height: 1; width: 18px; flex-shrink: 0;
}
.ah-num-body { min-width: 0; }
.ah-num-title {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.008em; color: var(--ah-ink);
}
.ah-num-meta { display: block; font-size: 11.5px; color: var(--ah-muted-2); margin-top: 5px; }

/* right rail: newsletter card --------------------------------------------- */
.ah-nl-card {
  margin-top: 26px; background: var(--ah-blue); border-radius: var(--ah-r-xl);
  padding: 22px; color: var(--ah-white);
}
.ah-nl-card-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: var(--ah-track-eyebrow);
  text-transform: uppercase; color: var(--ah-blue-pale); margin-bottom: 10px;
}
.ah-nl-card-title {
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: 8px;
}
.ah-nl-card-p { font-size: 13.5px; line-height: 1.5; color: #D5E6FB; margin: 0 0 14px; }
.ah-nl-card-go { color: var(--ah-white); font-weight: 700; font-size: 13.5px; }

/* right rail: threads ------------------------------------------------------ */
.ah-side-thread {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--ah-line-2);
  color: inherit;
}
.ah-side-thread:hover { text-decoration: none; }
.ah-side-thread:hover .ah-side-thread-title { color: var(--ah-blue); }
.ah-side-thread-title {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--ah-ink);
}
.ah-side-thread-meta { display: block; font-size: 11.5px; color: var(--ah-muted-2); margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   v7 ARTICLE — masthead, hero, two-column body with a sticky rail
   ══════════════════════════════════════════════════════════════════════════ */
.ah-art-top {
  max-width: var(--ah-w-wide); margin: 0 auto; padding: 26px var(--ah-gutter) 0;
}
.ah-art-top .ah-crumb { font-size: 12.5px; color: var(--ah-muted); margin-bottom: 20px; }
.ah-art-top .ah-crumb span { margin: 0 6px; color: var(--ah-muted-3); }
.ah-art-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ah-body-strong); margin: 0 0 12px;
}
/* The sponsor disclosure: above the title, readable, not small print. */
.ah-art-sponsor {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--ah-ink);
  border: 1px solid var(--ah-line-blue); border-radius: 4px; padding: 4px 10px; margin: 0 0 14px;
}
.ah-art-h1 {
  font-size: 44px; font-weight: 800; letter-spacing: -0.032em; line-height: 1.06;
  margin: 0 0 16px; color: var(--ah-ink); max-width: 20ch; text-wrap: pretty;
}
.ah-art-dek {
  font-family: var(--ah-serif); font-size: 21px; line-height: 1.45;
  color: var(--ah-body-strong); margin: 0 0 22px; max-width: 62ch; text-wrap: pretty;
}
.ah-art-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--ah-body); padding-bottom: 22px;
  border-bottom: 1px solid var(--ah-line-blue);
}
.ah-art-dot { color: var(--ah-muted-3); }

.ah-art-hero { max-width: var(--ah-w-wide); margin: 0 auto; padding: 26px var(--ah-gutter) 0; }
.ah-art-hero-img {
  height: 430px; border-radius: var(--ah-r-sm);
  background-size: cover; background-position: center;
}

.ah-art-grid {
  max-width: var(--ah-w-wide); margin: 0 auto;
  padding: 34px var(--ah-gutter) 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ah-rail-r);
  gap: 56px; align-items: start;
}
.ah-art-main { min-width: 0; max-width: var(--ah-w-prose); }
.ah-art-rail {
  min-width: 0; position: sticky; top: var(--ah-sticky-top);
  display: flex; flex-direction: column; gap: 26px;
}

/* table of contents -------------------------------------------------------- */
.ah-toc-head {
  font-size: 11px; font-weight: 800; letter-spacing: var(--ah-track-eyebrow);
  text-transform: uppercase; color: var(--ah-muted); margin-bottom: 12px;
}
.ah-toc { display: flex; flex-direction: column; border-left: 2px solid var(--ah-line-blue); }
.ah-toc .ah-toc-head { padding-left: 14px; }
.ah-toc-link {
  font-size: 13.5px; line-height: 1.35; padding: 7px 14px; color: var(--ah-body-strong);
  border-left: 2px solid transparent; margin-left: -2px;
}
.ah-toc-link:hover {
  color: var(--ah-blue); border-left-color: var(--ah-blue); text-decoration: none;
}

/* related ------------------------------------------------------------------ */
.ah-rel-item {
  display: flex; gap: 11px; align-items: flex-start; color: inherit;
  padding: 11px 0; border-bottom: 1px solid var(--ah-line-2);
}
.ah-rel-item:hover { text-decoration: none; }
.ah-rel-item:hover .ah-rel-title { color: var(--ah-blue); }
.ah-rel-thumb {
  width: 62px; height: 46px; flex-shrink: 0; border-radius: var(--ah-r-xs);
  background-size: cover; background-position: center;
}
.ah-rel-body { min-width: 0; }
.ah-rel-title {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--ah-ink);
}
.ah-rel-meta { display: block; font-size: 11.5px; color: var(--ah-muted); margin-top: 4px; }

/* bands -------------------------------------------------------------------- */
.ah-band { max-width: var(--ah-w-max); margin: 0 auto; padding: 58px var(--ah-gutter) 0; }

/* spotlight collections ---------------------------------------------------- */
/* The v1 card layered a clinical photograph at 42% over a saturated ground and put
   white type on top of it. On a bright photo — a microscope, a spine model, a lit
   ward — the title vanished and the ground turned to mud. Three changes fix it:
   the photo is desaturated so seven different stock images read as one system, a
   real gradient scrim carries the type, and everything sits at the foot where the
   scrim is darkest. Contrast is then a property of the scrim, not of the photo. */
.ah-spot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ah-spot {
  position: relative; border-radius: var(--ah-r-lg); overflow: hidden;
  aspect-ratio: 3 / 4; display: flex; color: var(--ah-white);
  background: var(--ah-ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ah-spot:hover {
  text-decoration: none; color: var(--ah-white);
  transform: translateY(-3px); box-shadow: var(--ah-sh-lg);
}
/* One family, four depths. The mock's four saturated hues side by side read as a
   colour test card; depth distinguishes the cards so hue does not have to. */
.ah-spot-endo, .ah-spot-pharm   { background: #0B1B2B; }
.ah-spot-cardio, .ah-spot-onc   { background: #12263D; }
.ah-spot-id, .ah-spot-policy    { background: #17324A; }
.ah-spot-neuro                  { background: #142230; }
.ah-spot-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.06);
  opacity: 0.62;
}
.ah-spot-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 27, 43, 0.15) 0%,
    rgba(11, 27, 43, 0.55) 45%,
    rgba(11, 27, 43, 0.94) 100%
  );
}
.ah-spot-in {
  position: relative; padding: 24px 22px; display: flex; flex-direction: column;
  width: 100%;
}
.ah-spot-fill { flex: 1; min-height: 40px; }
.ah-spot-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.66); margin-bottom: 8px;
}
.ah-spot-title {
  font-size: 23px; font-weight: 800; letter-spacing: -0.022em; line-height: 1.1;
  margin-bottom: 10px; text-wrap: pretty;
}
.ah-spot-desc {
  font-size: 12.5px; line-height: 1.45; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78); margin-bottom: 10px;
}
.ah-spot-count {
  font-size: 12.5px; font-weight: 700; color: var(--ah-white);
  padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* discussions -------------------------------------------------------------- */
.ah-disc-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.ah-disc {
  display: block; padding: 18px 0; border-bottom: 1px solid var(--ah-line-2);
  color: inherit;
}
.ah-disc:hover { text-decoration: none; }
.ah-disc:hover .ah-disc-title { color: var(--ah-blue); }
.ah-disc-top { display: flex; gap: 10px; flex-wrap: wrap; }
.ah-disc-top .ah-kicker { margin-bottom: 6px; }
.ah-disc-title {
  display: block; font-size: 16.5px; font-weight: 700; line-height: 1.32;
  letter-spacing: -0.012em; margin-bottom: 7px; color: var(--ah-ink);
}
.ah-disc-meta { display: block; font-size: 13px; color: var(--ah-muted-2); }

.ah-disc-side { background: var(--ah-grey); border-radius: var(--ah-r-xl); padding: 22px; }
.ah-disc-side-head {
  font-size: 12px; font-weight: 800; letter-spacing: var(--ah-track-eyebrow);
  text-transform: uppercase; margin-bottom: 14px;
}
.ah-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-chip-link {
  background: var(--ah-white); border: 1px solid var(--ah-line);
  border-radius: var(--ah-r-pill); padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--ah-body-2);
}
.ah-chip-link:hover { border-color: var(--ah-blue); color: var(--ah-blue); text-decoration: none; }
.ah-disc-side-rule { height: 1px; background: var(--ah-line); margin: 20px 0; }
.ah-disc-side-p { font-size: 13.5px; color: var(--ah-body); line-height: 1.55; margin: 0; }

/* sign-up band ------------------------------------------------------------- */
.ah-cta-band { margin-top: 62px; background: var(--ah-ink); }
.ah-cta-in {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 52px var(--ah-gutter);
  display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center;
}
.ah-cta-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ah-blue-400); margin-bottom: 12px;
}
.ah-cta-h2 {
  font-size: 34px; font-weight: 800; letter-spacing: var(--ah-track-tight);
  line-height: 1.12; color: var(--ah-white); margin: 0 0 12px; text-wrap: pretty;
}
.ah-cta-p {
  font-family: var(--ah-serif); font-size: 17px; color: var(--ah-on-dark);
  line-height: 1.55; margin: 0;
}
/* The shared inline form sits on navy here; it is white-on-white everywhere else,
   so the band restyles its chrome rather than the form carrying a second variant. */
.ah-cta-form .ah-inl { background: transparent; border: 0; padding: 0; margin: 0; }
.ah-cta-form .ah-inl-eyebrow, .ah-cta-form #ah-inl-h, .ah-cta-form .ah-inl-sub { display: none; }
.ah-cta-form .ah-inl-fine { color: var(--ah-on-dark-2); }
.ah-cta-form .ah-inl-fine a { color: var(--ah-on-dark); }

/* ------------------------------------------------------------------ layout */
.ah-section { max-width: var(--ah-w-max); margin: 0 auto; padding: 40px 40px 20px; }
.ah-section-top { padding-top: 32px; }
.ah-narrow { max-width: var(--ah-w-mid); margin: 0 auto; padding: 32px 40px 80px; }
.ah-article { max-width: var(--ah-w-mid); margin: 0 auto; padding: 32px 40px 80px; }
.ah-thread-wrap { max-width: 860px; margin: 0 auto; padding: 44px 40px 88px; }

.ah-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 26px; gap: 16px; flex-wrap: wrap;
}
.ah-h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.ah-h2-lg {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 12px; color: var(--ah-navy);
}
.ah-section-count { font-size: 14px; font-weight: 600; color: var(--ah-muted); }
.ah-lede { font-size: 16px; line-height: 1.6; color: var(--ah-body); }

/* ------------------------------------------------------------------- cards */
.ah-area-block { margin-bottom: 38px; }
.ah-area-rule {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ah-body);
  border-bottom: 1px solid var(--ah-line-2);
  padding-bottom: 9px; margin-bottom: 20px;
}
.ah-area-rule a { color: inherit; }

.ah-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.ah-card {
  border: 1px solid var(--ah-line-2); border-radius: var(--ah-r-lg);
  overflow: hidden; background: var(--ah-white); box-shadow: var(--ah-sh-xs);
  display: flex; flex-direction: column; color: inherit;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.ah-card:hover {
  box-shadow: var(--ah-sh-lg); transform: translateY(-2px);
  text-decoration: none; color: inherit;
}
.ah-card-media {
  position: relative; display: block; height: 150px;
  background-color: var(--ah-tint); background-size: cover;
  background-position: center; border-bottom: 1px solid var(--ah-line-2);
}
.ah-card-chip {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.94); color: var(--ah-blue);
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: var(--ah-r-pill); box-shadow: var(--ah-sh-sm);
}
.ah-card-mock {
  position: absolute; top: 12px; right: 12px;
  background: var(--ah-danger); color: var(--ah-white);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: var(--ah-r-xs);
}
.ah-card-body {
  padding: 16px 18px 18px; display: flex; flex-direction: column;
  gap: 7px; flex: 1;
}
.ah-card-title {
  font-size: 16px; font-weight: 700; line-height: 1.32; letter-spacing: -0.01em;
  color: var(--ah-ink);
}
.ah-card-dek { font-size: 13px; color: var(--ah-body); line-height: 1.5; flex: 1; }
.ah-card-meta { font-size: 12px; color: var(--ah-muted); margin-top: 4px; }

/* --------------------------------------------- "Built for the point of care" */
.ah-why-wrap {
  /* the mock's band fill is a shade lighter than --ah-tint-2 */
  background: #EEF6FD;
  border-top: 1px solid var(--ah-tint-6);
  border-bottom: 1px solid var(--ah-tint-6);
  margin-top: 30px;
}
.ah-why { padding: 56px 40px; }
.ah-why-head { text-align: center; margin-bottom: 40px; }
.ah-why-head .ah-eyebrow { margin-bottom: 10px; }
.ah-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ah-why-item { text-align: center; }
.ah-why-icon {
  height: 56px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.ah-why-icon svg { width: 50px; height: 50px; }
.ah-why-h3 {
  font-size: 18px; font-weight: 700; color: var(--ah-blue);
  margin: 0 0 10px; letter-spacing: -0.01em;
}
.ah-why-p { font-size: 14.5px; color: var(--ah-body-strong); line-height: 1.6; margin: 0; }

/* ----------------------------------------------------------------- article */
.ah-crumb { font-size: 13px; color: var(--ah-muted); margin-bottom: 18px; }
.ah-crumb a { color: var(--ah-muted); }
.ah-crumb a:hover { color: var(--ah-blue); }

.ah-hero-img {
  height: 300px; border-radius: var(--ah-r-xl);
  background-size: cover; background-position: center;
  background-color: var(--ah-line-blue); position: relative; margin-bottom: 26px;
}
.ah-hero-chip {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255, 255, 255, 0.94); color: var(--ah-ink);
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: var(--ah-r-pill); box-shadow: var(--ah-sh-sm);
}
.ah-article-h1 {
  font-size: 34px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 12px; line-height: 1.14;
}
.ah-article-dek { font-size: 16px; color: var(--ah-body); line-height: 1.5; margin: 0 0 16px; }

.ah-meta {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid var(--ah-line-2); border-bottom: 1px solid var(--ah-line-2);
  margin-bottom: 26px; flex-wrap: wrap; font-size: 13px; color: var(--ah-muted);
}
.ah-chip-grey {
  background: var(--ah-line-soft); color: var(--ah-body);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--ah-r-pill);
}
.ah-chip-warn {
  background: var(--ah-warn-bg); color: var(--ah-warn-ink);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--ah-r-pill);
}
.ah-chip-blue {
  background: var(--ah-tint-3); color: var(--ah-blue);
  border-radius: var(--ah-r-pill); padding: 4px 12px;
  font-size: 12px; font-weight: 700;
}

.ah-disclaimer {
  background: var(--ah-warn-bg); color: var(--ah-warn-ink);
  border-radius: var(--ah-r); padding: 12px 15px;
  font-size: 13px; line-height: 1.5; margin: 0 0 24px;
}
.ah-note {
  background: var(--ah-tint); border-left: 4px solid var(--ah-blue);
  border-radius: var(--ah-r); padding: 12px 16px;
  font-size: 14px; line-height: 1.6; margin: 0 0 18px; color: var(--ah-ink);
}
.ah-readonly {
  background: var(--ah-tint-2); border: 1px solid var(--ah-tint-4);
  border-radius: var(--ah-r-md); padding: 14px 18px;
  font-size: 13.5px; line-height: 1.6; color: var(--ah-body-strong);
  margin: 0 0 22px;
}

.ah-body-h2 {
  font-size: 22px; font-weight: 700; margin: 30px 0 12px;
  letter-spacing: -0.01em; color: var(--ah-navy);
}
.ah-body-p { font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; color: var(--ah-ink); }
.ah-body-list {
  font-size: 15.5px; line-height: 1.7; padding-left: 22px;
  margin: 0 0 14px; color: var(--ah-ink);
}
.ah-body-list li { margin: 6px 0; }
.ah-quote {
  background: var(--ah-tint); border-left: 4px solid var(--ah-blue);
  border-radius: var(--ah-r); padding: 14px 18px;
  font-size: 15px; line-height: 1.6; margin: 18px 0; color: var(--ah-ink);
}
.ah-dl { margin: 0 0 16px; }
.ah-dl dt { font-size: 14.5px; font-weight: 700; color: var(--ah-navy); margin-top: 12px; }
.ah-dl dd { font-size: 14.5px; line-height: 1.6; color: var(--ah-body-strong); margin: 4px 0 0; }

/* claim markers: the <sup> stays bare so the emitted string is `<sup>[n]</sup>` */
a.ah-cite { text-decoration: none; }
a.ah-cite sup, .ah-cite-orphan sup {
  color: var(--ah-blue); font-weight: 700; font-size: 0.72em;
}
a.ah-cite:hover sup { text-decoration: underline; }
.ah-cite-orphan sup { color: var(--ah-danger); }

.ah-refs {
  font-size: 13px; color: var(--ah-body); line-height: 1.6;
  padding-left: 20px; margin: 0;
}
.ah-refs li { margin: 8px 0; overflow-wrap: anywhere; }
.ah-refs li:target { background: var(--ah-tint-3); border-radius: var(--ah-r-xs); }
.ah-ref-orphan {
  color: var(--ah-warn-ink); background: var(--ah-warn-bg);
  border-radius: var(--ah-r-xs); padding: 1px 6px; font-size: 11px; font-weight: 700;
}

/* ------------------------------------------------------------ gate + cards */
.ah-gate {
  border: 1px solid var(--ah-line-blue-2); border-radius: var(--ah-r-xl);
  background: var(--ah-tint); padding: 24px 26px; margin: 32px 0 8px;
}
.ah-gate-head { display: flex; align-items: flex-start; gap: 14px; }
.ah-gate-pdf {
  width: 46px; height: 56px; background: var(--ah-white);
  border: 1px solid var(--ah-line); border-radius: var(--ah-r-xs);
  position: relative; flex-shrink: 0; display: flex;
  align-items: flex-end; justify-content: center; overflow: hidden;
}
.ah-gate-fold {
  position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 12px solid var(--ah-danger); border-left: 12px solid transparent;
}
.ah-gate-pdf-word {
  font-family: ui-monospace, monospace; font-size: 8px;
  color: var(--ah-danger); font-weight: 700; margin-bottom: 7px;
}
.ah-gate-titles { flex: 1; min-width: 0; }
.ah-gate-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ah-blue); margin-bottom: 3px;
}
.ah-gate-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ah-gate-sub { font-size: 12.5px; color: var(--ah-muted); margin-top: 2px; }

.ah-gate-form { margin-top: 18px; }
.ah-gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ah-gate-form input[type="text"],
.ah-gate-form input[type="email"] {
  border: 1px solid var(--ah-line); border-radius: 9px; padding: 12px 14px;
  font-size: 14px; font-family: inherit; width: 100%; background: var(--ah-white);
  color: var(--ah-ink);
}
.ah-gate-form input[type="email"] { margin-bottom: 12px; }
.ah-gate-attest {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; color: var(--ah-body); line-height: 1.5; margin-bottom: 14px;
}
.ah-gate-attest input { margin-top: 2px; flex-shrink: 0; }
.ah-gate-submit { width: 100%; font-size: 15px; padding: 13px; border-radius: var(--ah-r); }
.ah-gate-errors {
  margin: 16px 0 0; padding: 12px 16px 12px 32px;
  background: var(--ah-warn-bg); color: var(--ah-warn-ink);
  border-radius: var(--ah-r); font-size: 13px; line-height: 1.55;
}
.ah-gate-fine { font-size: 12px; color: var(--ah-muted); margin: 12px 0 0; line-height: 1.5; }

.ah-thanks {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--ah-tint); border: 1px solid var(--ah-line-blue-2);
  border-radius: var(--ah-r-xl); padding: 22px 24px;
}
.ah-thanks-line { font-size: 15px; color: var(--ah-success); font-weight: 600; }

.ah-btn {
  display: inline-block; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 11px 22px; border-radius: 9px; text-align: center; white-space: nowrap;
}
.ah-btn-primary { background: var(--ah-blue); color: var(--ah-white); }
.ah-btn-primary:hover { background: var(--ah-blue-hover); color: var(--ah-white); text-decoration: none; }
.ah-btn-ghost {
  border: 1px solid #C9D2DB; background: var(--ah-white); color: var(--ah-ink);
}
.ah-btn-ghost:hover { color: var(--ah-ink); text-decoration: none; border-color: var(--ah-blue); }
.ah-btn[disabled], .ah-btn[aria-disabled="true"] {
  background: var(--ah-line); color: var(--ah-muted-2); cursor: not-allowed;
}

.ah-cta {
  margin-top: 26px; padding: 20px 22px; background: var(--ah-tint-2);
  border: 1px solid var(--ah-tint-4); border-radius: var(--ah-r-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.ah-cta-copy { font-size: 14.5px; color: var(--ah-body-strong); }
.ah-cta-link { font-size: 14px; font-weight: 600; color: var(--ah-blue); white-space: nowrap; }

.ah-area-nav { margin-top: 34px; border-top: 1px solid var(--ah-line-2); padding-top: 18px; }
.ah-area-nav-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ah-body); margin-bottom: 12px;
}
.ah-area-nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ah-area-nav-links a {
  font-size: 13px; font-weight: 600; background: var(--ah-tint);
  border: 1px solid var(--ah-line-blue); border-radius: var(--ah-r-pill);
  padding: 6px 14px;
}
.ah-area-nav-n { color: var(--ah-muted); font-weight: 500; }

/* ------------------------------------------------------------- discussions */
.ah-thread-h1 {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 14px; line-height: 1.25;
}
.ah-thread-tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ah-thread-meta { font-size: 13px; color: var(--ah-muted); margin: 0 0 30px; }

.ah-thread-list { list-style: none; margin: 0; padding: 0; }
.ah-thread-row { border-top: 1px solid var(--ah-line-2); padding: 20px 0; }
.ah-thread-row:last-child { border-bottom: 1px solid var(--ah-line-2); }
.ah-thread-link { font-size: 17px; font-weight: 700; color: var(--ah-ink); }
.ah-thread-link:hover { color: var(--ah-blue); }
.ah-thread-row .ah-thread-tags { margin: 10px 0 6px; }
.ah-thread-row .ah-thread-meta { margin: 0; }

.ah-post { padding: 22px 0; border-bottom: 1px solid var(--ah-line-2); }
.ah-post-opener { border-top: 1px solid var(--ah-line-2); }
.ah-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ah-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ah-line-soft); color: var(--ah-body);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ah-avatar-blue { background: var(--ah-tint-3); color: var(--ah-blue); }
.ah-post-who { line-height: 1.3; }
.ah-post-name { font-weight: 700; font-size: 14px; }
.ah-post-role { font-size: 12px; color: var(--ah-muted); }
.ah-post-body { font-size: 15px; line-height: 1.68; margin: 0; }

.ah-reply { margin-top: 30px; }
.ah-reply textarea {
  width: 100%; border: 1px solid var(--ah-line); border-radius: var(--ah-r);
  padding: 13px 15px; font-size: 15px; font-family: inherit;
  resize: vertical; background: var(--ah-grey); color: var(--ah-muted-2);
}
.ah-reply textarea[disabled] { cursor: not-allowed; }
.ah-reply-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; gap: 12px; flex-wrap: wrap;
}
.ah-reply-hint { font-size: 12.5px; color: var(--ah-muted); }

/* ---------------------------------------------------------------- results */
.ah-results { list-style: none; margin: 0; padding: 0; }
.ah-result { border-top: 1px solid var(--ah-line-2); padding: 18px 0; }
.ah-result:last-child { border-bottom: 1px solid var(--ah-line-2); }
.ah-result-title { font-size: 17px; font-weight: 700; color: var(--ah-ink); }
.ah-result-title:hover { color: var(--ah-blue); }
.ah-result-meta { font-size: 12px; color: var(--ah-muted); margin: 4px 0 6px; }
.ah-result-snip { font-size: 14px; line-height: 1.6; color: var(--ah-body); margin: 0; }

/* ------------------------------------------------------------ cookie banner */
.ah-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--ah-white); border-top: 1px solid #E1E5E9;
  box-shadow: var(--ah-sh-up); padding: 20px 40px;
  max-height: 70vh; overflow-y: auto;
}
.ah-cookie-inner {
  max-width: var(--ah-w-wide); margin: 0 auto;
  display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap;
}
.ah-cookie-copy { flex: 1; min-width: 260px; }
.ah-cookie-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.ah-cookie-body { font-size: 13px; color: var(--ah-body); line-height: 1.55; }
.ah-cookie-body strong { font-weight: 600; }
.ah-cookie-gpc { font-size: 12.5px; color: var(--ah-success); margin-top: 6px; font-weight: 600; }
.ah-cookie-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Each decision is its own POST form. `display: contents` takes the wrapper out of
   the layout so the buttons remain direct flex children — the gap, the wrap and the
   `flex: 1` mobile rule below all keep working unchanged. */
.ah-cookie-form { display: contents; margin: 0; }
.ah-cookie-manage {
  font-size: 13px; color: var(--ah-body); padding: 11px 6px;
  white-space: nowrap; text-decoration: underline;
}

/* ------------------------------------------------------------------ footer */
.ah-footer {
  background: var(--ah-ink); color: var(--ah-on-dark);
  margin-top: auto; position: relative; z-index: 2;
}
.ah-footer-top {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 52px var(--ah-gutter) 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px;
}
.ah-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ah-footer-brand .ah-mark { width: 30px; height: 30px; }
.ah-footer-word {
  font-weight: 800; font-size: 17px; letter-spacing: -0.025em; color: var(--ah-white);
}
.ah-footer-word .ah-logo-word-2 { color: var(--ah-blue-400); }
.ah-footer-note {
  font-family: var(--ah-serif); font-size: 15px; line-height: 1.55;
  color: var(--ah-on-dark); margin: 0; max-width: 300px;
}
.ah-footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ah-footer-head {
  font-size: 11px; font-weight: 800; letter-spacing: var(--ah-track-eyebrow);
  text-transform: uppercase; color: var(--ah-white); margin-bottom: 5px;
}
.ah-footer-col a { font-size: 13.5px; color: var(--ah-on-dark); }
.ah-footer-col a:hover { color: var(--ah-white); }
.ah-footer-rule { border-top: 1px solid var(--ah-line-dark); }
.ah-footer-rule-in {
  max-width: var(--ah-w-max); margin: 0 auto;
  padding: 18px var(--ah-gutter);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: var(--ah-on-dark-2);
}
.ah-footer-independence { color: var(--ah-on-dark); }
.ah-footer-demo { font-size: 11.5px; color: var(--ah-on-dark-2); line-height: 1.55; }

/* ------------------------------------------------------- wide-content guard */
/* Anything that cannot shrink scrolls inside its own box, never the page. */
.ah-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ah-body table, .ah-doc table {
  display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse;
}
.ah-body pre, .ah-doc pre { overflow-x: auto; max-width: 100%; }
.ah-body-p, .ah-body-list li, .ah-quote, .ah-lede, .ah-post-body { overflow-wrap: break-word; }

/* ------------------------------------------------------------- responsive */
/* v7 collapses in two steps rather than one. The right rail carries panels that are
   supplementary (most-cited, newsletter, threads); the left rail carries article
   links that are not. So the right rail folds first, at 1180px, and the left rail
   only at 940px — which keeps the lead story wide instead of squeezing three
   columns into a tablet. */
@media (max-width: 1180px) {
  .ah-home { grid-template-columns: var(--ah-rail-l) 1fr; }
  .ah-rail-r {
    grid-column: 1 / -1; position: static;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start;
  }
  .ah-rail-r .ah-nl-card { grid-column: 2; margin-top: 0; }
  .ah-spot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1040px) {
  .ah-grid { grid-template-columns: repeat(2, 1fr); }
  .ah-why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .ah-cta-in { grid-template-columns: 1fr; gap: 28px; }
  .ah-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 940px) {
  .ah-home { grid-template-columns: 1fr; gap: 34px; }
  /* The article rail is navigation for the page below it, so it stacks above the
     prose rather than being pushed to the bottom where nobody would reach it. */
  .ah-art-grid { grid-template-columns: 1fr; gap: 30px; }
  .ah-art-rail { position: static; order: -1; }
  .ah-art-h1 { font-size: 34px; max-width: none; }
  .ah-art-dek { font-size: 18px; }
  .ah-art-hero-img { height: 280px; }
  .ah-rail-l, .ah-rail-r { grid-column: auto; }
  .ah-rail-r { display: block; }
  .ah-rail-r .ah-nl-card { margin-top: 26px; }
  .ah-lead-h1 { font-size: 32px; }
  .ah-lead-media { height: 280px; }
  .ah-disc-wrap { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 860px) {
  .ah-header-in { flex-wrap: wrap; gap: 10px 16px; padding: 10px 20px; min-height: 0; }
  .ah-nav { order: 3; width: 100%; flex: none; justify-content: flex-start; }
  .ah-header-right { margin-left: auto; }
  .ah-search-mini { width: 140px; }
  .ah-strip-in { padding-left: 20px; padding-right: 20px; }
  .ah-home, .ah-band { padding-left: 20px; padding-right: 20px; }
  .ah-cta-in, .ah-footer-top, .ah-footer-rule-in { padding-left: 20px; padding-right: 20px; }
  .ah-section, .ah-why { padding-left: 24px; padding-right: 24px; }
  .ah-narrow, .ah-article, .ah-thread-wrap { padding-left: 24px; padding-right: 24px; }
  .ah-hero { padding-top: 48px; }
  .ah-hero-h1 { font-size: 34px; }
  .ah-article-h1 { font-size: 28px; }
  .ah-hero-img { height: 220px; }
  .ah-why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .ah-grid { grid-template-columns: 1fr; }
  .ah-header { padding: 10px 16px; }
  .ah-section, .ah-why { padding-left: 16px; padding-right: 16px; }
  .ah-narrow, .ah-article, .ah-thread-wrap { padding-left: 16px; padding-right: 16px; }
  /* v7 at 375px: everything is one column, and the specialty nav scrolls sideways
     inside itself rather than wrapping to three rows or widening the page. */
  .ah-home, .ah-band { padding-left: 16px; padding-right: 16px; }
  .ah-cta-in, .ah-footer-top, .ah-footer-rule-in { padding-left: 16px; padding-right: 16px; }
  .ah-strip-in { padding-left: 16px; padding-right: 16px; font-size: 11px; }
  .ah-strip-nav { gap: 14px; }
  .ah-art-top, .ah-art-hero, .ah-art-grid { padding-left: 16px; padding-right: 16px; }
  .ah-art-h1 { font-size: 27px; letter-spacing: -0.024em; }
  .ah-art-dek { font-size: 16.5px; }
  .ah-art-hero-img { height: 190px; }
  .ah-top-grid { grid-template-columns: 1fr; gap: 26px; }
  .ah-spot-grid { grid-template-columns: 1fr; }
  .ah-spot { min-height: 320px; }
  .ah-footer-top { grid-template-columns: 1fr; gap: 26px; }
  .ah-lead-h1 { font-size: 26px; }
  .ah-lead-dek { font-size: 16px; }
  .ah-lead-media { height: 200px; }
  .ah-tile-media { height: 180px; }
  .ah-cta-h2 { font-size: 26px; }
  /* Three short items fit on one row at 375px, so nothing needs to scroll. The
     area bar below wraps to three lines instead, which is legible and complete. */
  .ah-nav { flex-wrap: wrap; gap: 16px; }
  /* 375px: the logo and three nav items cannot share a line. The nav drops to
     its own row rather than pushing the page sideways. */
  .ah-header-left { flex-wrap: wrap; gap: 8px 16px; }
  .ah-nav-link { font-size: 13.5px; }
  .ah-logo-word { font-size: 16.5px; }
  .ah-mark { width: 32px; height: 32px; }
  .ah-login { padding: 8px 16px; }
  .ah-hero { padding: 36px 16px 24px; }
  .ah-hero-h1 { font-size: 28px; letter-spacing: -0.02em; }
  .ah-hero-dek { font-size: 15.5px; }
  .ah-hero-search {
    height: auto; border-radius: var(--ah-r-md);
    padding: 10px 10px 10px 16px; flex-wrap: nowrap;
  }
  .ah-stats { gap: 18px; flex-direction: column; align-items: flex-start; padding-left: 16px; }
  .ah-h2-lg { font-size: 23px; }
  .ah-article-h1 { font-size: 24px; }
  .ah-hero-img { height: 168px; border-radius: var(--ah-r-md); }
  .ah-body-h2 { font-size: 19px; }
  .ah-body-p, .ah-body-list { font-size: 15px; }
  .ah-gate { padding: 18px 16px; border-radius: var(--ah-r-md); }
  .ah-gate-row { grid-template-columns: 1fr; }
  .ah-cookie { padding: 16px; }
  .ah-cookie-actions { width: 100%; }
  .ah-cookie-actions .ah-btn { flex: 1; }
  .ah-footer { padding: 24px 16px 120px; }
  .ah-thanks { flex-direction: column; align-items: stretch; }
  .ah-thanks .ah-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-card { transition: none; }
  .ah-card:hover { transform: none; }
}

@media print {
  .ah-cookie, .ah-header, .ah-skip { display: none !important; }
  body { overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Newsletter modal (in-article). Dismissible, late-firing, image-free.
   ═══════════════════════════════════════════════════════════════════════ */
.ah-nl{
  padding:0; border:0; border-radius:16px; max-width:940px; width:calc(100vw - 32px);
  box-shadow:var(--ah-sh-lg); overflow:hidden; color:var(--ah-body);
}
.ah-nl::backdrop{ background:rgba(10,37,64,.62); }
.ah-nl-x{ position:absolute; top:0; right:0; z-index:3; }
.ah-nl-x button{
  background:transparent; border:0; cursor:pointer; font-size:30px; line-height:1;
  padding:12px 18px; color:var(--ah-muted);
}
.ah-nl-x button:hover{ color:var(--ah-ink); }
.ah-nl-grid{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:760px){
  .ah-nl-grid{ grid-template-columns:1fr; }
  .ah-nl-art{ display:none; }   /* the ask matters more than the illustration on a phone */
}

/* left panel — the phone.
   Was a pale blue wash with a small phone floating in a lot of dead space, and the
   phone was clipped at the foot. Now a dark editorial ground: the device reads as a
   product shot against it, the crop at the bottom is deliberate rather than
   accidental, and the panel is no longer 60% empty. Still zero image requests —
   the ground is a gradient and the device is CSS. */
.ah-nl-art{
  background:
    radial-gradient(120% 90% at 50% 0%, #1B3A52 0%, #0B1B2B 62%);
  padding:34px 26px 0; display:flex; align-items:flex-end; justify-content:center;
  min-height:470px; position:relative; overflow:hidden;
}
/* A faint engraved rule pattern, drawn not fetched — gives the ground some tooth
   so it does not read as a flat blue rectangle. */
.ah-nl-art::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(
    115deg, rgba(255,255,255,.5) 0 1px, rgba(255,255,255,0) 1px 9px);
}
.ah-nl-phone{
  width:262px; background:#05101A; border-radius:30px 30px 0 0; padding:10px 10px 0;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.09);
  position:relative; z-index:1;
}
.ah-nl-notch{
  width:74px; height:5px; background:#3A3A42; border-radius:3px; margin:1px auto 7px;
}
.ah-nl-screen{
  background:var(--ah-white); border-radius:19px 19px 0 0; padding:14px 14px 22px;
  min-height:430px;
}
.ah-nl-mast{ display:flex; gap:5px; align-items:baseline; }
.ah-nl-mast-a{ font:800 17px/1 var(--ah-font); color:var(--ah-ink); letter-spacing:-.02em; }
.ah-nl-mast-b{ font:800 17px/1 var(--ah-font); color:var(--ah-blue); letter-spacing:-.02em; }
.ah-nl-meta{ font:500 8px/1.3 var(--ah-font); color:var(--ah-muted); margin-top:4px; }
.ah-nl-quote{
  font:400 9px/1.45 var(--ah-font); color:var(--ah-body); border-left:2px solid var(--ah-blue);
  padding:5px 0 5px 7px; margin:10px 0 0;
}
.ah-nl-tag{
  display:inline-block; font:700 7px/1 var(--ah-font); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ah-white); background:var(--ah-blue); padding:4px 6px; border-radius:3px; margin:11px 0 6px;
}
.ah-nl-head{ font:700 11px/1.3 var(--ah-font); color:var(--ah-ink); }
.ah-nl-line{ height:3px; background:var(--ah-line-2); border-radius:2px; margin-top:5px; }
.ah-nl-cite{ font:500 7.5px/1.3 var(--ah-font); color:var(--ah-muted); margin-top:8px; }
.ah-nl-btn{
  font:700 8px/1 var(--ah-font); color:var(--ah-white); background:var(--ah-blue);
  padding:6px 9px; border-radius:5px; display:inline-block; margin:8px 0 10px;
}

/* right panel — the form */
.ah-nl-form{ background:var(--ah-white); padding:38px 34px 30px; }
.ah-nl-form h2{
  font:800 26px/1.18 var(--ah-font); color:var(--ah-ink); letter-spacing:-.02em; margin:0 0 8px;
}
/* The heading and the confirmation both carry `tabindex="-1"` so newsletter.js can
   send focus to them (on open, and after the form hides itself on success). Neither
   is keyboard-reachable, so a ring on them is noise rather than an affordance —
   but only when the browser agrees it is not a visible-focus situation. Suppressing
   `:focus-visible` too would hide a real indicator, so this stops short of that. */
.ah-nl-form h2:focus:not(:focus-visible),
.ah-nl-ok:focus:not(:focus-visible){ outline:none; }
.ah-nl-sub{ font-size:14.5px; color:var(--ah-body); margin:0 0 22px; }
.ah-nl-lab{
  display:block; font:600 12px/1 var(--ah-font); color:var(--ah-body-strong);
  margin:0 0 6px; letter-spacing:.01em;
}
.ah-nl-in{
  width:100%; font:400 15px/1.5 var(--ah-font); color:var(--ah-ink); background:var(--ah-grey);
  border:1px solid var(--ah-line); border-radius:var(--ah-r-sm); padding:12px 13px; margin:0 0 16px;
}
.ah-nl-in:focus{ outline:2px solid var(--ah-tint-6); border-color:var(--ah-blue); background:var(--ah-white); }
select.ah-nl-in{ appearance:none; background-image:none; cursor:pointer; }
.ah-nl-go{
  border:0; cursor:pointer; background:var(--ah-blue); color:var(--ah-white);
  font:700 14px/1 var(--ah-font); letter-spacing:.06em; text-transform:uppercase;
  padding:15px 30px; border-radius:var(--ah-r-sm);
}
.ah-nl-go:hover{ background:var(--ah-blue-hover); }
.ah-nl-go:disabled{ background:#B9C4CF; cursor:not-allowed; }
.ah-nl-err{
  font:500 13px/1.45 var(--ah-font); color:var(--ah-danger); margin:0 0 12px;
}
.ah-nl-ok{
  font:600 14.5px/1.5 var(--ah-font); color:var(--ah-success); margin:0;
}
.ah-nl-fine{
  font-size:11.5px; line-height:1.55; color:var(--ah-muted); margin:22px 0 0;
  padding-top:16px; border-top:1px solid var(--ah-line);
}
.ah-nl-ticks{ list-style:none; margin:0 0 16px; padding:0; }
.ah-nl-ticks li{
  position:relative; padding:0 0 0 26px; margin:0 0 9px;
  font-size:14px; line-height:1.5; color:var(--ah-body);
}
.ah-nl-ticks li::before{
  content:""; position:absolute; left:4px; top:6px;
  width:9px; height:5px; border-left:2px solid var(--ah-success);
  border-bottom:2px solid var(--ah-success); transform:rotate(-45deg);
}
.ah-nl-proof{
  font-size:12.5px; color:var(--ah-muted); margin:0 0 20px;
  padding:10px 12px; background:var(--ah-tint-2); border-radius:var(--ah-r-sm);
}
.ah-nl-proof b{ color:var(--ah-ink); font-weight:700; }

/* ── inline end-of-article capture: the second touchpoint ───────────── */
.ah-inl{
  margin:34px 0 0; border:1px solid var(--ah-line-blue); border-radius:var(--ah-r-lg);
  background:linear-gradient(170deg,var(--ah-tint-2) 0%,var(--ah-white) 100%);
  padding:26px 26px 22px;
}
.ah-inl-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ah-blue); margin:0 0 8px;
}
.ah-inl h2{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--ah-ink); margin:0 0 7px; }
.ah-inl-sub{ font-size:14.5px; color:var(--ah-body); margin:0 0 16px; max-width:62ch; }
.ah-inl-row{ display:flex; gap:9px; flex-wrap:wrap; align-items:flex-start; }
.ah-inl-row input, .ah-inl-row select{
  flex:1 1 190px; min-width:0; font:400 15px/1.5 var(--ah-font); color:var(--ah-ink);
  background:var(--ah-white); border:1px solid var(--ah-line); border-radius:var(--ah-r-sm);
  padding:12px 13px;
}
.ah-inl-row select{ appearance:none; cursor:pointer; }
.ah-inl-row button{
  flex:0 0 auto; border:0; cursor:pointer; background:var(--ah-blue); color:var(--ah-white);
  font:700 14px/1 var(--ah-font); letter-spacing:.05em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--ah-r-sm);
}
.ah-inl-row button:hover{ background:var(--ah-blue-hover); }
.ah-inl-fine{ font-size:11.5px; line-height:1.55; color:var(--ah-muted); margin:13px 0 0; }
.ah-inl-msg{ font-size:14.5px; font-weight:600; margin:12px 0 0; }
.ah-inl-msg.bad{ color:var(--ah-danger); }
.ah-inl-msg.good{ color:var(--ah-success); }

/* ── /newsletter page ──────────────────────────────────────────────── */
.ah-nlp{ max-width:var(--ah-w-mid); margin:0 auto; padding:52px 24px 80px; }
.ah-nlp-head{ text-align:center; margin-bottom:34px; }
.ah-nlp-h1{ font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:0 0 14px; }
@media (max-width:640px){ .ah-nlp-h1{ font-size:30px; } }
.ah-nlp-dek{ font-size:17px; line-height:1.55; color:var(--ah-body); margin:0 auto; max-width:64ch; }
.ah-nlp-stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:28px 0 0;
}
.ah-nlp-stats > div{
  background:var(--ah-tint-2); border:1px solid var(--ah-line-blue); border-radius:var(--ah-r);
  padding:13px 20px; min-width:118px;
}
.ah-nlp-stats b{ display:block; font-size:24px; font-weight:800; color:var(--ah-ink); letter-spacing:-.02em; }
.ah-nlp-stats span{ display:block; font-size:12px; color:var(--ah-muted); margin-top:3px; }
.ah-nlp-sec{ margin:44px 0 0; padding-top:32px; border-top:1px solid var(--ah-line-2); }
.ah-nlp-sec h2{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ah-ink); margin:0 0 14px; }
.ah-nlp-sub{ font-size:14.5px; color:var(--ah-body); margin:0 0 16px; max-width:70ch; }
.ah-nlp-two{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:700px){ .ah-nlp-two{ grid-template-columns:1fr; } }
.ah-nlp-lab{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px;
}
.ah-nlp-yes{ color:var(--ah-success); }
.ah-nlp-no{ color:var(--ah-danger); }
.ah-nl-crosses{ list-style:none; margin:0; padding:0; }
.ah-nl-crosses li{
  position:relative; padding:0 0 0 26px; margin:0 0 9px;
  font-size:14px; line-height:1.5; color:var(--ah-body);
}
.ah-nl-crosses li::before{
  content:"×"; position:absolute; left:5px; top:-2px;
  color:var(--ah-danger); font-weight:700; font-size:17px; line-height:1.4;
}
.ah-nlp-fine{ font-size:12.5px; color:var(--ah-muted); margin:18px 0 0; max-width:74ch; }
.ah-nlp-frame{
  width:100%; height:620px; border:1px solid var(--ah-line); border-radius:var(--ah-r-lg);
  background:var(--ah-grey); display:block;
}
.ah-nlp-areas{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.ah-nlp-areas li{
  border:1px solid var(--ah-line); border-radius:var(--ah-r); padding:13px 15px; background:var(--ah-white);
}
.ah-nlp-areas a{ font-size:14.5px; font-weight:600; }
.ah-nlp-areas span{ display:block; font-size:12px; color:var(--ah-muted); margin-top:3px; }

/* ══════════════════════════════════════════════════════════════════════════
   INTERACTION — v7
   The property was almost entirely static: two transitions in the whole
   stylesheet and a bare focus ring. Nothing acknowledged a pointer, so every
   surface felt machine-generated however good the typography was.

   The brief here is restraint. This is a clinical reference read by people
   between patients, so: no scroll-reveal (content must be there on paint, not
   fade in), no bounce, no easing longer than ~180ms, nothing that moves unless
   the reader moved something first. What follows is hover, focus, press and
   scroll behaviour — the four things a professional interface owes you — plus
   one genuine bug fix.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- anchors + scroll */
/* THE BUG: the header is sticky, so a jump to #references or a TOC entry put the
   heading *underneath* it and the reader landed mid-paragraph with no idea why.
   `scroll-margin-top` reserves the chrome's height at every anchor target. The
   value covers the edition strip, the header and the area bar with air to spare. */
html { scroll-behavior: smooth; }
:target,
[id] { scroll-margin-top: 128px; }
/* The masthead itself should not reserve space — it is already at the top. */
.ah-art-top[id], .ah-area-head[id] { scroll-margin-top: 0; }

::selection { background: #CFE2FB; color: var(--ah-ink); }

/* ------------------------------------------------------------------- focus */
/* A keyboard user should never have to hunt for the caret. Two-tone ring so it
   reads on both the white page and the navy bands. */
:focus-visible {
  outline: 2px solid var(--ah-blue);
  outline-offset: 2px;
  border-radius: var(--ah-r-xs);
  box-shadow: 0 0 0 4px rgba(11, 95, 206, .18);
}
.ah-strip a:focus-visible,
.ah-footer a:focus-visible,
.ah-cta-band a:focus-visible,
.ah-spot:focus-visible {
  outline-color: var(--ah-white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .28);
}

/* -------------------------------------------------------------------- links */
/* Body links get an underline that thickens rather than appearing — the text
   does not shift, so a paragraph never reflows under the pointer. */
.ah-body a, .ah-doc a, .ah-refs a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 120ms ease, color 120ms ease;
}
.ah-body a:hover, .ah-doc a:hover, .ah-refs a:hover {
  text-decoration-thickness: 2px;
  color: var(--ah-blue-hover);
}

/* Nav and area bar: the underline grows from the left rather than flicking on. */
.ah-nav-link, .ah-areabar-link, .ah-strip-nav a, .ah-footer-col a {
  position: relative;
  transition: color 130ms ease;
}
.ah-nav-link::after, .ah-strip-nav a::after, .ah-footer-col a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 1.5px; background: currentColor; opacity: .55;
  transition: right 160ms cubic-bezier(.2, .7, .3, 1);
}
.ah-nav-link:hover::after, .ah-strip-nav a:hover::after, .ah-footer-col a:hover::after { right: 0; }
.ah-nav-link:hover, .ah-areabar-link:hover { text-decoration: none; }

/* ── tap targets: WCAG 2.2 SC 2.5.8 (AA), 24×24 CSS px ─────────────────────────
   Measured on the live site at 375px, the chrome's links are 13–16px tall: the
   edition strip at 11px, the primary nav at 13.5px and the footer columns at
   13.5px all produce line boxes well under 24. The nav `padding: 7px 0` that
   looks like it fixes this is on the *container*, so it pads the row and not the
   target — a thumb still has to land on a 14px band.

   The fix is a transparent hit area inside each link rather than padding on the
   link, and that is deliberate: these anchors are flex items (`.ah-nav`,
   `.ah-strip-nav`, `.ah-footer-col` are all flex), so vertical padding on them
   would be real layout — a taller header, a taller strip, a taller footer — and
   it would also drag the `::after` hover underline down away from the text,
   because that underline is positioned against the padding box. An absolutely
   positioned `::before` centred on the link changes neither. Type scale is
   untouched; the desktop layout is byte-identical; only the region that accepts
   a pointer grows.

   `::before` is free on all four selectors — the underline above uses `::after`.
   Growth is ~4px per edge and the smallest gap between two of these links is the
   footer column's 9px, so expanded targets do not overlap and no link steals a
   neighbour's clicks. `min-width` covers the short labels ("About", "Terms");
   every one of them is already wider than 24px, so it is a floor, not a change. */
.ah-nav-link::before,
.ah-areabar-link::before,
.ah-strip-nav a::before,
.ah-footer-col a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: var(--ah-tap-min); min-height: 100%;
  min-width: var(--ah-tap-min);
}

/* -------------------------------------------------------------------- cards */
/* A card lifts a little and its photograph gains a touch of scale. The media is
   inside `overflow: hidden`, so the zoom crops rather than spilling. */
.ah-card, .ah-tile, .ah-lead, .ah-rail-item, .ah-num-item,
.ah-side-thread, .ah-rel-item, .ah-disc {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 130ms ease;
}
.ah-card { overflow: hidden; }
.ah-card-media, .ah-tile-media, .ah-lead-media, .ah-rel-thumb {
  transition: transform 320ms cubic-bezier(.2, .7, .3, 1), filter 200ms ease;
  will-change: transform;
}
.ah-card:hover, .ah-tile:hover, .ah-lead:hover { transform: translateY(-2px); }
.ah-card:hover { box-shadow: var(--ah-sh-lg); }
.ah-card:hover .ah-card-media,
.ah-tile:hover .ah-tile-media,
.ah-lead:hover .ah-lead-media,
.ah-rel-item:hover .ah-rel-thumb { transform: scale(1.035); }

/* Rail and list rows: a hairline of colour on the leading edge, no movement. */
.ah-rail-item, .ah-num-item, .ah-side-thread, .ah-rel-item, .ah-disc {
  border-left: 2px solid transparent; padding-left: 0;
  transition: border-left-color 130ms ease, padding-left 130ms ease;
}
.ah-rail-item:hover, .ah-num-item:hover, .ah-side-thread:hover,
.ah-rel-item:hover, .ah-disc:hover {
  border-left-color: var(--ah-blue); padding-left: 10px;
}

/* Collection cards already lift; give the photograph the same treatment. */
.ah-spot-media { transition: transform 420ms cubic-bezier(.2, .7, .3, 1), opacity 200ms ease; }
.ah-spot:hover .ah-spot-media { transform: scale(1.04); opacity: .7; }

/* ------------------------------------------------------- buttons and inputs */
/* Press feedback. Without it a click on a slow connection feels like nothing
   happened, and the reader clicks again. */
.ah-btn, .ah-login, .ah-demo-link, .ah-cta-link, .ah-chip-link,
.ah-rail-promo-go, .ah-nl-card-go, .ah-toc-link {
  transition: background-color 130ms ease, color 130ms ease,
              border-color 130ms ease, transform 90ms ease, box-shadow 130ms ease;
}
.ah-btn:active, .ah-login:active, .ah-demo-link:active, .ah-cta-link:active {
  transform: translateY(1px);
}
.ah-login:hover { box-shadow: 0 4px 14px rgba(11, 95, 206, .28); }

input, select, textarea { transition: border-color 130ms ease, box-shadow 130ms ease; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--ah-muted-3);
}

/* The table of contents marks where you are heading, not just where you hover. */
.ah-toc-link { border-left: 2px solid transparent; margin-left: -2px; }
.ah-toc-link:hover, .ah-toc-link:focus-visible {
  border-left-color: var(--ah-blue); background: var(--ah-tint);
}

/* --------------------------------------------------------- article internals */
/* Long clinical tables are read across a row; a hover band keeps the eye on one. */
.ah-body table tbody tr, .ah-doc table tbody tr { transition: background-color 120ms ease; }
.ah-body table tbody tr:hover, .ah-doc table tbody tr:hover { background: var(--ah-grey); }

/* A citation marker is a link to the reference list — make it feel like one. */
.ah-body sup a, .ah-body-p sup { transition: color 120ms ease; }
.ah-body sup a:hover { color: var(--ah-blue-hover); }

/* Jumping to a reference should say which one you landed on, briefly. */
.ah-refs li:target {
  background: var(--ah-warn-bg);
  box-shadow: -10px 0 0 var(--ah-warn-bg), 10px 0 0 var(--ah-warn-bg);
  animation: ah-landed 1.6s ease 260ms both;
}
@keyframes ah-landed { from { background: var(--ah-warn-bg); } to { background: transparent; } }

/* ------------------------------------------------------------ reduced motion */
/* One block, and it must cover everything above. A reader who asked the OS to
   stop animations has asked once and should not have to ask per component. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ah-card:hover, .ah-tile:hover, .ah-lead:hover,
  .ah-spot:hover, .ah-btn:active { transform: none; }
  .ah-card:hover .ah-card-media, .ah-tile:hover .ah-tile-media,
  .ah-lead:hover .ah-lead-media, .ah-spot:hover .ah-spot-media,
  .ah-rel-item:hover .ah-rel-thumb { transform: none; }
  .ah-rail-item:hover, .ah-num-item:hover, .ah-side-thread:hover,
  .ah-rel-item:hover, .ah-disc:hover { padding-left: 0; }
  .ah-refs li:target { animation: none; }
}

/* Pointer-coarse devices get no hover lift — on a touchscreen "hover" is a
   sticky state left behind after a tap, which reads as a rendering fault. */
@media (hover: none) {
  .ah-card:hover, .ah-tile:hover, .ah-lead:hover, .ah-spot:hover { transform: none; }
  .ah-rail-item:hover, .ah-num-item:hover, .ah-side-thread:hover,
  .ah-rel-item:hover, .ah-disc:hover { padding-left: 0; border-left-color: transparent; }
}

/* ------------------------------------------------------------ the mark (v8) */
/* One inline SVG, three variants, all driven by `currentColor` so the mark takes
   its colour from context instead of needing an asset per background.

   The tile rect is always in the markup and painted only when `.is-boxed` asks
   for it — cheaper than a second template, and it keeps the three variants from
   drifting apart the way parallel copies do. */
.ah-mark { color: var(--ah-ink); }
.ah-mark .ah-mark-tile { fill: none; }

/* On the navy chrome the mark is white. */
.ah-strip .ah-mark,
.ah-footer .ah-mark,
.appbar .ah-mark { color: var(--ah-white); }

/* App-icon lockup: filled tile, mark knocked out of it. `paint-order` is what
   stops the frame's outer stroke being clipped by the tile edge. */
.ah-mark.is-boxed { color: var(--ah-blue); }
.ah-mark.is-boxed .ah-mark-tile { fill: currentColor; }
.ah-mark.is-boxed .ah-mark-frame,
.ah-mark.is-boxed .ah-mark-pulse { stroke: var(--ah-white); }

/* Single-colour reproduction — print, fax, a photocopied handout. */
.ah-mark.is-mono { color: var(--ah-ink); }
.ah-mark.is-mono .ah-mark-tile { fill: none; }

@media print {
  .ah-mark { color: #000 !important; }
  .ah-mark .ah-mark-tile { fill: none !important; }
  .ah-mark .ah-mark-frame, .ah-mark .ah-mark-pulse { stroke: #000 !important; }
}

/* ── mobile: form controls ─────────────────────────────────────────────────────
   Two defects measured on the live site at 375px, both on the controls rather
   than the chrome (the tap-target block above covers nav, strip and footer
   links; it does not reach inputs or buttons).

   1. **iOS zooms the page when a sub-16px input takes focus.** Every control on
      an article page was 13–15px, including the pocket-guide gate's first name,
      last name and work email. Safari responds by scaling the whole viewport,
      the reader loses their place mid-form, and the field they are typing into
      is the registration funnel — the one conversion the property has. 16px is
      the documented threshold, not a preference, so this sets exactly that and
      leaves the desktop scale alone.

   2. **Controls below the 24px pointer target of WCAG 2.2 SC 2.5.8.** A 44px
      minimum is used rather than 24 because these are the surfaces a thumb
      actually aims at; 24 is the accessibility floor, 44 is the usable size.

   Scoped to a coarse pointer OR a narrow viewport, so a desktop mouse keeps the
   tighter type scale the design was drawn at. `font-size` is set on the control
   only — no label, no button text elsewhere on the page, so no reflow of copy. */
@media (pointer: coarse), (max-width: 640px) {
  /* The component rules that set 14–15px are more specific than a bare
     `input[type=...]` — `.ah-gate-form input[type="text"]` is (0,2,1) against
     (0,1,1) — so the first version of this block raised the height and lost the
     font-size, which is the half that actually stops the zoom. Matching their
     specificity by naming the same components, rather than reaching for
     `!important`: these stay overridable, and a later component rule that wants a
     different size on desktop still gets it. */
  .ah-gate-form input[type="text"], .ah-gate-form input[type="email"],
  .ah-nl-form input, .ah-nl-in, .ah-inl-form input, .ah-search-mini input,
  .ah-gate-form select, .ah-nl-form select,
  input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
  input[type="url"], input[type="number"], select, textarea {
    font-size: 16px;      /* below this, iOS Safari zooms on focus */
    min-height: 44px;
  }
  .ah-btn, .ah-gate-submit, .ah-nl-go,
  button, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  /* Checkboxes are square targets, not text fields — grow the box itself. */
  input[type="checkbox"], input[type="radio"] {
    min-width: 24px; min-height: 24px;
  }
  /* The search box in the header is a flex item; a min-height there would stretch
     the row, so it gets the font-size fix and keeps its own height. */
  .ah-search-mini input { min-height: 40px; }
}