/* Redesign inner pages: the home page's look applied to WordPress content (REDESIGN-QA.md #53–56). Nothing here is
   designed in Figma; it reuses the home page's tokens, type, pills, buttons and section treatments. Loaded after
   redesign.css (tokens, tiers, header, footer, buttons) on every page except the front page.

   Content comes from the editor (ACF content blocks and the theme's ACF block templates), so selectors target that
   existing markup inside .r-content. */

/* ---------- Page band (_redesign/page-band.php): the medical-need section's gradient and cream curve ---------- */
.r-band {
	position: relative; overflow: clip; overflow-clip-margin: 4px;
	padding: calc(196px * var(--v)) 0 calc(178px * var(--v));
	background: linear-gradient(181.017deg, #28162f 3.4152%, #3d2348 55%, #6a3e7b 120%);
	color: var(--r-canvas);
}
.r-band::after {
	content: ''; position: absolute; z-index: 0;
	bottom: calc(110px * var(--v) - 4771px * var(--s)); left: 50%;
	width: calc(4771px * var(--s)); height: calc(4771px * var(--s));
	border-radius: 50%; background: var(--r-canvas); transform: translateX(-50%);
}
/* Seam guard: the band clips with a 4px margin, so its cream curve runs 4px past the band's bottom edge and the
   purple's antialiased last row is always under solid cream: no hairline where the band ends on a fractional device
   pixel (e.g. 412px at 2.625x, 1280px at 1.25x). What follows sits above that overlap. */
.r-page > .r-band + * { position: relative; }
/* ...and the page clips that 4px margin sideways (clip, unlike hidden, keeps the sticky sub-nav working). */
.r-page { overflow-x: clip; }
.r-band__inner { position: relative; z-index: 1; width: var(--canvas); max-width: 100%; margin: 0 auto; padding: 0 calc(130px * var(--s)); }
.r-band__eyebrow { margin-bottom: 18px; color: var(--r-yellow); }
.r-band__title { max-width: 980px; font: 700 64px/1.04 var(--f-primary); letter-spacing: -0.03em; text-wrap: balance; }
.r-page--single .r-band__title { font-size: 52px; line-height: 1.08; }
/* Section heroes (Figma "Hero" frames, Ziflow round 3 #28): a 1440 × 560 band of Figma's art (rendered without its
   text, header and curve at 2x), the title in Playfair Regular at 117/214, and the curve 129px tall. The art covers
   the band, so wider screens scale it up slightly rather than show seams. Pipeline and Contact are light: dark text. */
.r-band--art {
	min-height: calc(560px * var(--v));
	padding-top: calc(214px * var(--v));
	background: var(--band-edge) var(--band-art) center / cover no-repeat;
}
.r-band--art::after { bottom: calc(129px * var(--v) - 4771px * var(--s)); }
/* Wide screens: the curve follows the circle out to 960px each side of centre, then runs flat (redesign.css,
   REDESIGN-QA.md #77): the band grows down by --curve-x and overlaps what follows by as much. */
@media (min-width: 1548px) {
	.r-band { margin-bottom: calc(-1 * var(--curve-x)); padding-bottom: calc(178px + var(--curve-x)); }
	.r-band::after { bottom: calc(110px + var(--curve-x) - 4771px); }
	.r-band--art { min-height: calc(560px + var(--curve-x)); }
	.r-band--art::after { bottom: calc(129px + var(--curve-x) - 4771px); }
}
.r-band--art .r-band__inner { padding-left: calc(117px * var(--s)); }
.r-band--art .r-band__title { font-weight: 400; letter-spacing: -0.02em; }
.r-band--about    { --band-edge: #28162f; --band-art: url(img/band-about@2x.webp); }
/* About: the title runs into the art's glow (lavender to pink), so a soft dark wash sits behind it and a faint halo
   lifts its edges; the orb on the right is untouched. Wider on smaller screens, where the title reaches further in
   (REDESIGN-QA.md #84). */
.r-band--about {
	--about-wash: 55% 70% at 25% 50%;
	background-image: radial-gradient(var(--about-wash), rgba(40, 22, 47, .75) 0%, rgba(40, 22, 47, .5) 55%, rgba(40, 22, 47, 0) 100%), var(--band-art);
}
.r-band--about .r-band__title { text-shadow: 0 0 32px rgba(40, 22, 47, .5); }
@media (max-width: 1439.98px) { .r-band--about { --about-wash: 72% 88% at 30% 50%; } }
@media (max-width: 1199.98px) { .r-band--about { --about-wash: 85% 95% at 34% 50%; } }
@media (max-width: 767.98px) { .r-band--about { --about-wash: 95% 75% at 35% 55%; } }
/* Pipeline and Contact use the News art's A/V pattern (Figma 5074:578, drawn from its vectors) in the Pipeline hero's
   periwinkle and the Investors hero's yellows (5074:536, 5074:494; Alex's feedback, REDESIGN-QA.md #83). */
.r-band--pipeline { --band-edge: #c8cbff; --band-art: url(img/band-pipeline-pattern@2x.webp); color: var(--r-dark-purple); }
.r-band--news     { --band-edge: #28162f; --band-art: url(img/band-news@2x.webp); }
.r-band--contact  { --band-edge: #ffc553; --band-art: url(img/band-contact-pattern@2x.webp); color: var(--r-dark-purple); }
.r-band--pipeline .r-band__eyebrow, .r-band--contact .r-band__eyebrow { color: var(--r-purple); }
@media (min-width: 1024px) {
	.r-page:not(.r-page--single) .r-band--art .r-band__title { font-size: 80px; line-height: 1.04; }
	/* Long About titles ("Management Team") wrap before the orb's pale glow */
	.r-band--about .r-band__title { max-width: 9em; }
}
.r-band__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.r-band__sub { font: 500 20px/1.4 var(--f-secondary); color: rgba(247, 238, 221, .85); }

/* Pills (as on the home page's news cards) */
.r-pill--band, .r-pill--light { height: 30px; padding: 0 14px; font-size: 12px; }
.r-pill--band { background: rgba(247, 238, 221, .14); }
.r-pill--light { background: rgba(64, 33, 79, .1); color: var(--r-dark-purple); }

/* ---------- Pipeline pills (#55; Ziflow round 3 #8, which replaced #60's desktop link rail) ----------
   Overview, the programmes and the Pipeline's other pages as pills above the content at every width. A programme's
   pill is a button: it opens (and marks) a second row with its trial pages. Without JS every row shows. */
.r-subnav { width: var(--canvas); max-width: 100%; margin: 0 auto; padding: 0 calc(130px * var(--s)); }
.r-subnav__list { display: flex; flex-wrap: wrap; gap: 10px; }
/* redesign.js wraps each pill row (.r-subnav-row) and adds a "more" chevron, which only shows on phones. */
.r-subnav-row { position: relative; }
.r-subnav__more { display: none; }
.r-subnav__list a, .r-pills__group {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
	background: rgba(234, 222, 204, .6);
	font: 600 14px/16px var(--f-secondary); color: var(--r-dark-purple); text-decoration: none; white-space: nowrap;
	cursor: pointer; transition: background .2s ease, color .2s ease;
}
.r-subnav__list a:hover, .r-pills__group:hover { background: var(--r-sand); }
.r-subnav__list a[aria-current="page"] { background: var(--r-dark-purple); color: var(--r-canvas); }
/* An open programme: purple, with a caret that turns */
.r-pills__group { gap: 10px; scroll-margin-top: 140px; }
.r-pills__group::after {
	content: ''; width: 7px; height: 7px; margin-top: -3px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
	transition: transform .2s ease;
}
.r-pills__group[aria-expanded="true"] { background: var(--r-purple); color: var(--r-canvas); }
.r-pills__group[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
/* Trial row: smaller pills on a light ground, under a hairline */
.r-pills__sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(64, 33, 79, .14); }
.r-pills__sub a { min-height: 36px; padding: 0 16px; background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 500; }
.r-pills__sub a:hover { background: var(--r-sand); }
.r-pills.is-js .r-pills__sub:not(.is-open) { display: none; }
/* News topic filter (home.php): the same pills. A topic link lands on them, clear of the header; the target is the
   list, not the nav, which scrolls sideways on phones and so would take focus (and its ring). */
#topics { scroll-margin-top: 140px; }

/* ---------- Content area ---------- */
.r-content {
	width: var(--canvas); max-width: 100%; margin: 0 auto;
	padding: calc(56px * var(--v)) calc(130px * var(--s)) calc(120px * var(--v));
	color: #4a4a4a;
	font: 400 var(--t-body)/1.6 var(--f-secondary);
}
.r-subnav + .r-content { padding-top: calc(48px * var(--v)); }
/* Reading column: editor blocks and loose content sit in an 880px column; listings and grids use the full width. */
.r-content > *:not(.team-members):not(.careers):not(.related-posts):not(.r-list):not(.r-pager):not(.leadership-modal):not(.r-jump) { max-width: 880px; margin-left: auto; margin-right: auto; }
.r-content--article > * { max-width: 760px; }
.r-content--wide > * { max-width: none !important; }
.r-content .block + .block { margin-top: 40px; }

/* Editor typography */
.r-content :where(h1, h2, h3, h4, h5, h6) { color: var(--r-purple); text-wrap: balance; }
.r-content :where(h1) { margin: 0 0 .45em; font: 500 44px/1.08 var(--f-primary); letter-spacing: -0.02em; }
.r-content :where(h2) { margin: 1.6em 0 .5em; font: 500 34px/1.12 var(--f-primary); letter-spacing: -0.02em; }
.r-content :where(h3) { margin: 1.4em 0 .5em; font: 500 22px/1.35 var(--f-secondary); color: var(--r-dark-purple); }
.r-content :where(h4) { margin: 1.4em 0 .4em; font: 600 18px/1.4 var(--f-secondary); color: var(--r-dark-purple); }
.r-content :where(h5, h6) { margin: 2em 0 .8em; font: 700 var(--t-eyebrow)/var(--lh-eyebrow) var(--f-secondary); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.r-content :where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
/* An H2 that looks like a content H1: the page band holds the page's one H1 (seo-headings-2026-10-27.php). */
.r-content .r-h1 { margin: 0 0 .45em; font: 500 44px/1.08 var(--f-primary); letter-spacing: -0.02em; }
.r-content :where(p) { margin: 0 0 1em; }
.r-content :where(ul, ol) { margin: 0 0 1.2em; padding-left: 1.4em; }
.r-content :where(ul) { list-style: none; padding-left: 1.4em; }
.r-content :where(ul) > li { position: relative; }
.r-content :where(ul) > li::before {
	content: ''; position: absolute; left: -1.1em; top: .62em;
	width: 7px; height: 7px; border-radius: 50%; background: var(--r-yellow);
}
.r-content :where(ol) { list-style: decimal; }
.r-content :where(li) { margin: 0 0 .5em; }
.r-content :where(strong, b) { color: var(--r-dark-purple); font-weight: 700; }
.r-content :where(a:not(.btn):not(.r-btn):not(.r-more)) { color: var(--r-purple); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.r-content :where(a:not(.btn):not(.r-btn):not(.r-more)):hover { color: var(--r-dark-purple); text-decoration-thickness: 2px; }
.r-content :where(img) { max-width: 100%; height: auto; }
/* Trial pages' journal links (class r-external): the small external-link icon follows the text (Ziflow round 3, #9). */
.r-content a.r-external { display: inline-flex; align-items: center; gap: 8px; }
.r-content a.r-external::after { content: ""; flex: none; width: 16px; height: 16px; background: url(img/icon-external.svg) center / 16px no-repeat; }
/* A JAMA link starts with the JAMA logo, so the whole row reads as the link to the study (client 11/3, Ziflow #39,
   #40). The standard JAMA wordmark, from Bernarda, replaced the JAMA Network "JN" icon (Kait via Alex, Ziflow v9 #4). */
.r-content a.r-external--jama { gap: 14px; }
.r-content a.r-external--jama::before { content: ""; flex: none; width: 86px; height: 32px; background: url(img/logo-jama.png) center / contain no-repeat; }
/* JAMA Internal Medicine (ORCA-3, ORCA-V1): the logo Alex attached to Ziflow v10 #23. */
.r-content a.r-external--jamaim { gap: 14px; }
.r-content a.r-external--jamaim::before { content: ""; flex: none; width: 32px; height: 32px; background: url(img/logo-jama-im.png) center / contain no-repeat; }
/* An Oxford Academic link (ORCA-1's Nicotine & Tobacco Research article) starts with the Society for Research on
   Nicotine & Tobacco logo Alex attached to Ziflow v11 #3 (was the Oxford Academic wordmark, client 11/3, Ziflow #41). */
.r-content a.r-external--oxford { gap: 14px; }
.r-content a.r-external--oxford::before { content: ""; flex: none; width: 247px; height: 32px; background: url(img/logo-nicotine-tobacco-research.png) center / contain no-repeat; }
/* Phones: the wordmark on its own line above the citation, so the citation keeps the full width. */
@media (max-width: 599.98px) {
	.r-content a.r-external--oxford { display: block; }
	.r-content a.r-external--oxford::before { display: block; margin-bottom: 10px; background-position: left center; }
	.r-content a.r-external--oxford::after { display: inline-block; margin-left: 8px; vertical-align: -2px; }
}
.r-content :where(hr) { height: 0; margin: 2.5em 0; border: 0; border-top: 1px solid rgba(64, 33, 79, .18); }
.r-content :where(blockquote) { margin: 1.5em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--r-yellow); font-size: 18px; color: var(--r-dark-purple); }
/* The Contact page's form shortcode sits inside a <code> element (an editor artefact). */
.r-content :where(code) { font: inherit; background: none; padding: 0; }
.r-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.r-content .alignright { float: right; margin: 0 0 1em 1.5em; }
.r-content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.r-content .content-block::after { content: ''; display: table; clear: both; }
.r-content .wp-block-image { margin: 2em 0; }
.r-content .wp-block-image img { border-radius: 12px; }
.r-content :where(table) { width: 100%; margin: 1.5em 0; border-collapse: collapse; font-size: 15px; }
.r-content :where(th, td) { padding: 12px 14px; border-bottom: 1px solid rgba(64, 33, 79, .14); text-align: left; vertical-align: top; }
.r-content :where(th) { color: var(--r-dark-purple); font-weight: 700; }
/* Trial pages: a two-cell title table (logo + headline), not data. */
.r-content table:has(.otrial-logo-cell) td { border: 0; padding: 0 16px 0 0; vertical-align: middle; }
/* ...authored as a Group of two headings (the trial's logo, then its headline): spaced as that table was. */
.r-content .r-otrial-title { display: flow-root; margin: 22.5px 0 20px; padding-right: 16px; }
/* The trial logos at one height (ORCA-3's file is taller than the others; client 11/3, Ziflow #38). */
.r-content .r-otrial-title img { width: auto; height: 51px; }
/* Trial data tables as column cards (Figma 5109:742, Ziflow round 3 #10). setup.php tags each cell with its column's
   role. Arms are tinted, rounded cards 12px apart: the first arm yellow, the second mauve, Placebo sand. The label and
   P Value columns stay plain. Header: Playfair 16 over the (N=) caption, 96 tall, on a purple rule. Rows: 56 tall. */
.r-content table.r-ae {
	width: calc(100% + 24px); margin: 1.5em -12px;
	border-collapse: separate; border-spacing: 12px 0;
	font: 400 16px/1.4 var(--f-secondary); color: var(--r-dark-purple);
}
.r-ae :is(th, td) { padding: 0 24px; border-bottom: 1px solid rgba(255, 255, 255, .7); text-align: left; }
.r-ae th {
	height: 96px; padding-bottom: 20px; vertical-align: bottom;
	border-bottom-color: var(--r-purple);
	color: var(--r-purple);
}
.r-ae__name { display: block; font: 600 16px/24px var(--f-primary); letter-spacing: -0.03em; }
.r-ae__n { display: block; margin-top: 2px; font: 400 12px/16px var(--f-secondary); white-space: nowrap; }
.r-ae td { height: 56px; vertical-align: middle; font-size: 20px; line-height: 1.2; }
.r-ae :is(th, td).r-ae--label { padding-left: 0; }
.r-ae td.r-ae--label { border-bottom-color: var(--r-sand); font-size: 16px; line-height: 1.4; }
.r-ae td.r-ae--plain { border-bottom-color: var(--r-sand); }
.r-ae .r-ae--arm1 { background: rgba(255, 197, 83, .4); }
.r-ae .r-ae--arm2 { background: rgba(170, 131, 187, .2); }
.r-ae .r-ae--placebo { background: rgba(234, 222, 204, .5); }
.r-ae th:is(.r-ae--arm1, .r-ae--arm2, .r-ae--placebo) { border-radius: 24px 24px 0 0; }
.r-ae td.r-ae__last { border-bottom: 0; }
.r-ae td.r-ae__last:is(.r-ae--arm1, .r-ae--arm2, .r-ae--placebo) { border-radius: 0 0 24px 24px; }
/* Narrower desktop tiers: tighter cells so values like "164 (62.6%)" stay on one line */
@media (max-width: 1199.98px) {
	.r-ae :is(th, td) { padding: 0 16px; }
	.r-ae td:not(.r-ae--label) { white-space: nowrap; }
	.r-ae--chart td:not(.r-ae--label) { white-space: normal; } /* chart cells hold words, not figures */
}
/* Footnotes row: below the cards, plain */
.r-ae .r-ae__note td { height: auto; padding: 16px 0 0; border: 0; font-size: 14px; line-height: 1.5; }
.r-ae .r-ae__note ol { margin: 0; }
/* The Privacy Policy's disclosure table (.table-2) gets the same column cards, but its card column holds lists of
   words: they read at the body copy's size, like the left column (Ziflow v8 #5; Bernarda 11/4). */
.r-content .table-2 .r-ae td { font-size: 16px; line-height: 1.4; }
.r-lead { margin-bottom: 40px; font: 500 22px/1.35 var(--f-secondary); color: var(--r-dark-purple); }
.r-actions { margin: 32px 0; }

/* Link block (acf/link): the old triangle/solid buttons become the home page's pill buttons */
.r-content .block.link { margin: 32px auto; }
.r-content .block.link .btn {
	display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 40px; border-radius: 999px;
	background: var(--r-dark-purple); color: #fff;
	font: 400 16px/normal 'Outfit', var(--f-secondary); text-decoration: none; white-space: nowrap;
	transition: filter .2s ease;
}
/* Long labels wrap inside the column on phones instead of widening the page. */
@media (max-width: 767.98px) {
	.r-content .block.link .btn { max-width: 100%; height: auto; min-height: 48px; padding: 12px 28px; white-space: normal; text-align: center; }
}
.r-content .block.link .btn:hover { filter: brightness(1.12); }
.r-content .block.link .btn.white-button, .r-content .block.link .btn.white-tri { background: var(--r-sand); color: var(--r-dark-purple); }
.r-content .block.link:has(.centered) { text-align: center; }

/* Data (REDESIGN-QA.md #82): charts, the pipeline chart, the ORCA-1 infographic and the results tables set their
   numbers sans serif; their Playfair labels keep Playfair letters. Page headers and other headings are unchanged. */
.r-chart, .r-info, .r-ae { --f-primary: var(--f-primary-data); }

/* ---------- Team members (acf/team-members) and their bio modals ---------- */
/* Leadership (REDESIGN-QA.md #106): Management Team, Board of Directors and Scientific Advisors as sections of one page,
   each a Group (`r-jump`, with an anchor) of its heading and team cards. The pills above jump to them, landing clear
   of the floating header. */
.r-content .r-jump { scroll-margin-top: 140px; }
/* Any other in-page anchor (the Privacy Policy's table of contents, #114) also lands clear of the floating header. */
.r-content [id] { scroll-margin-top: 140px; }
.r-content .r-jump + .r-jump { margin-top: calc(88px * var(--v)); }
.r-content .r-jump > h2 { margin: 0 0 calc(32px * var(--v)); }
@media (max-width: 1023.98px) { .r-content .r-jump + .r-jump { margin-top: 56px; } .r-content .r-jump > h2 { margin-bottom: 24px; } }
.r-content .team-members .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24px * var(--s)); }
.r-content .team-members .post {
	display: flex; flex-direction: column; gap: 10px;
	padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, .55);
}
/* Every card shows its Featured Image, or team-placeholder.svg until it has one (#81). */
.r-content .team-members .post > img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 16px; margin-bottom: 8px; }
/* The LinkedIn button is centred on the name (on a two-line name, on both lines) (REDESIGN-QA.md #89). */
.r-content .team-members .bio-title, .leadership-modal--bio-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.r-content .team-members .name { margin: 0; font: 500 26px/1.15 var(--f-primary); letter-spacing: -0.02em; color: var(--r-purple); }
.r-content .team-members .title { margin: 0; font: 700 12px/1.4 var(--f-secondary); letter-spacing: .08em; text-transform: uppercase; color: #7a7a7a; }
.r-content .team-members .bio { margin: 6px 0 16px; font-size: 15px; line-height: 1.55; }
.team-member-linkedin, .leadership-modal--linkedin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(234, 222, 204, .6); transition: background .2s ease; }
.team-member-linkedin:hover, .leadership-modal--linkedin:hover { background: var(--r-sand); }
.team-member-linkedin img, .leadership-modal--linkedin img { width: 18px; height: auto; }
.r-content .team-members .post > div { margin-top: auto; }
/* Someone listed in an earlier section points back to it instead of repeating the bio (client bios 10/30). */
.r-content .team-members .bio-see-section { margin-bottom: 0; font-style: italic; }
.r-content .team-members .bio-see-section a { color: var(--r-purple); text-decoration: underline; text-underline-offset: 3px; }
.see-more-button {
	display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--r-dark-purple); color: #fff; font: 400 15px/normal 'Outfit', var(--f-secondary);
	transition: filter .2s ease;
}
.see-more-button:hover { filter: brightness(1.15); }

.leadership-modal { display: none; position: fixed; inset: 0; z-index: 300; padding: 24px; align-items: center; justify-content: center; }
.leadership-modal.active { display: flex; }
/* Covers the whole viewport (the modal is excluded from the reading column above); lighter than before (#61). */
.leadership-modal--overlay { position: absolute; inset: 0; background: rgba(39, 26, 44, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.leadership-modal--inner {
	position: relative; width: min(760px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto;
	padding: 48px; border-radius: 28px; background: var(--r-canvas); color: #4a4a4a;
	box-shadow: 0 30px 80px rgba(39, 26, 44, .35);
	animation: r-modal-in .25s cubic-bezier(.2, .7, .2, 1);
}
.leadership-modal--close-button {
	position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--r-sand);
}
.leadership-modal--close-button span { position: absolute; left: 14px; top: 21px; width: 16px; height: 2px; border-radius: 2px; background: var(--r-dark-purple); transform: rotate(45deg); }
.leadership-modal--close-button span + span { transform: rotate(-45deg); }
.leadership-modal--headshot { float: left; width: 180px; aspect-ratio: 1; object-fit: cover; margin: 4px 28px 16px 0; border-radius: 16px; } /* under the title, the bio wraps it (#88) */
/* The space under the name is the row's padding, not the heading's margin (which would push the button off centre). */
.leadership-modal--bio-title { justify-content: flex-start; padding-right: 56px; padding-bottom: 18px; }
.leadership-modal .leadership-modal--name { margin: 0; font: 500 36px/1.1 var(--f-primary); letter-spacing: -0.02em; color: var(--r-purple); }
/* Two classes: the content area's phone h3 size (20px) otherwise wins over a single class. */
.leadership-modal .leadership-modal--title { margin: 10px 0 20px; font: 700 12px/1.4 var(--f-secondary); letter-spacing: .08em; text-transform: uppercase; color: #7a7a7a; }
.leadership-modal--bio { font: 400 16px/1.65 var(--f-secondary); }
@keyframes r-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Careers (acf/careers) and related posts (acf/related-posts) ---------- */
.r-content .careers .posts, .r-content .related-posts .posts { display: grid; gap: 20px; }
.r-content .careers .posts { max-width: 880px; margin: 0 auto; }
.r-content .related-posts .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-content .careers .post, .r-content .related-posts .post { padding: 28px 32px; border-radius: 24px; background: rgba(255, 255, 255, .55); }
.r-content .careers .title { margin: 0; font: 500 28px/1.15 var(--f-primary); color: var(--r-purple); }
.r-content .careers .subtitle { margin: 8px 0 12px; }
.r-content .related-posts .info p { display: inline-flex; align-items: center; height: 26px; margin: 0 0 12px; padding: 0 12px; border-radius: 999px; background: rgba(64, 33, 79, .1); font: 500 11px/1 'Instrument Sans', var(--f-secondary); color: var(--r-dark-purple); }
.r-content .related-posts .title { margin: 0; font: 400 19px/1.25 'Outfit', var(--f-secondary); letter-spacing: -0.01em; }
.r-content .related-posts .title a { color: var(--r-dark-purple); text-decoration: none; }
.r-content .related-posts .title a:hover { text-decoration: underline; }
.r-more, .r-content .read-more {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
	font: 600 14px/16px var(--f-secondary); color: var(--r-dark-purple); text-decoration: none;
}
.r-more::after, .r-content .read-more::after { content: '→'; transition: transform .2s ease; }
.r-more:hover::after, .r-content .read-more:hover::after { transform: translateX(3px); }

/* ---------- Icon groups (acf/icon) and text over image (acf/text-over-image) ---------- */
.r-content .icon-block-grouping.add-flex { display: flex; flex-wrap: wrap; gap: 32px; }
.r-content .icon-block { flex: 1 1 240px; }
.r-content .icon-block img { width: 48px; height: auto; margin-bottom: 12px; }
.r-content .icon-block h1 { margin: 0 0 8px; font-size: 28px; }
.r-content .text-over-image { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; border-radius: 24px; background-size: cover; background-position: center; }
.r-content .text-over-image .content { width: 100%; padding: 40px; }
.r-content .text-over-image .overlay { background: linear-gradient(0deg, rgba(39, 26, 44, .85), rgba(39, 26, 44, 0)); }
.r-content .text-over-image :where(h3, p) { color: var(--r-canvas); }

/* ---------- Gravity Forms (Contact, Willpower) ---------- */
.r-content .gform_wrapper { margin-top: 32px; }
.r-content .gform_wrapper ul { padding-left: 0; }
.r-content .gform_wrapper li::before { display: none; }
.r-content .gform_wrapper.gravity-theme .gfield_label, .r-content .gform_wrapper.gravity-theme .gform-field-label { font: 600 14px/1.4 var(--f-secondary); color: var(--r-dark-purple); }
.r-content .gform_wrapper :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
	width: 100% !important; min-height: 52px; padding: 0 18px; border: 1px solid #d3c3ad; /* beats Gravity Forms' size classes (medium = half width) */ border-radius: 14px; background: #fff;
	font: 400 16px/1.4 var(--f-secondary); color: var(--r-dark-purple);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.r-content .gform_wrapper textarea { min-height: 160px; padding: 14px 18px !important; }
.r-content .gform_wrapper :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select) { padding-left: 18px !important; padding-right: 18px !important; }
.r-content .gform_wrapper :where(input, select, textarea):focus { outline: none; border-color: var(--r-purple); box-shadow: 0 0 0 3px rgba(255, 197, 83, .6); }
.r-content .gform_wrapper .gform_footer :where(input[type="submit"], button) {
	height: 48px; padding: 0 40px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--r-dark-purple); color: #fff; font: 400 16px/normal 'Outfit', var(--f-secondary);
}
.r-content .gform_wrapper .gfield_required { color: #b0422e; font-weight: 500; }
.r-content .gform_wrapper .gfield_label { margin-bottom: 8px; }
/* Name: "Name" stays as the legend for screen readers; "First Name" / "Last Name" sit above the inputs (#62). */
.r-content .gform_wrapper .r-gfield--name > legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r-content .gform_wrapper .r-gfield--name .gform-field-label--type-sub { display: block; margin: 0 0 8px; padding: 0; font: 600 14px/1.4 var(--f-secondary); color: var(--r-dark-purple); }
.r-content .gform_wrapper .r-gfield--name.gfield_contains_required .gform-field-label--type-sub::after { content: ' (Required)'; font-size: 13px; font-weight: 500; color: #b0422e; }
/* Select: own chevron, set in from the edge like the text padding */
.r-content .gform_wrapper select {
	-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 52px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' stroke='%23271a2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 22px center / 14px 9px no-repeat;
}
/* CAPTCHA (reCAPTCHA checkbox, live site only: the local preview omits it, see local-docker/local-guard.php) */
.r-content .gform_wrapper .gfield--type-captcha .ginput_recaptcha { min-height: 78px; }
/* Errors: red text, no boxes (#62) */
.r-content .gform_wrapper.gravity-theme .gform_validation_errors {
	margin: 0 0 28px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
/* Gravity Forms focuses the summary after a failed submit so screen readers announce it; no ring on that. */
.r-content .gform_wrapper.gravity-theme .gform_validation_errors:focus { outline: none; }
.r-content .gform_wrapper.gravity-theme .gform_fields { row-gap: 24px; }
.r-content .gform_wrapper.gravity-theme .gfield_required_text { font-style: normal; font-size: 13px; }
.r-content .gform_wrapper.gravity-theme .gform_validation_errors > h2 { margin: 0; padding: 0; font: 600 16px/1.45 var(--f-secondary); color: #b0422e; letter-spacing: 0; }
.r-content .gform_wrapper.gravity-theme .gform_validation_errors :where(code) { font: inherit; background: none; padding: 0; }
.r-content .gform_wrapper.gravity-theme .gform_validation_errors .gform-icon { display: none; }
.r-content .gform_wrapper.gravity-theme .gfield_validation_message {
	margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
	font: 500 14px/1.4 var(--f-secondary); color: #b0422e;
}
.r-content .gform_wrapper.gravity-theme .gfield_error :where(input, select, textarea) { border-color: #b0422e; }
.r-content .gform_wrapper.gravity-theme .gfield_error .gfield_label { color: var(--r-dark-purple); }

/* ---------- News listing (News, categories, search, archives) ---------- */
.r-list { max-width: 1180px; }
.r-content .r-list { padding: 0; }
.r-content .r-list > li::before { display: none; }
.r-list__item { margin: 0; padding: 36px 0; border-top: 1px solid rgba(64, 33, 79, .15); display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; }
.r-list__item:last-child { border-bottom: 1px solid rgba(64, 33, 79, .15); }
.r-list__item > * { grid-column: 2; }
.r-list__pills { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin: 4px 0 0; }
/* The title may run 8px into the gutter: "…Benjamin Halladay as Chief Financial Officer" is a fraction of a pixel wider
   than the 920px column at 1440 and wrapped (Ziflow v9 #11). */
.r-content .r-list__title { margin: 0 -8px 10px 0; font: 500 28px/1.15 var(--f-primary); letter-spacing: -0.02em; }
.r-content .r-list__title a { color: var(--r-purple); text-decoration: none; }
.r-content .r-list__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.r-list__excerpt p { margin: 0 0 8px; }
.r-list__empty { font-size: 18px; }
.r-pager, .r-postnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; }
.r-pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.r-pager a, .r-postnav a, .r-pager .page-numbers {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
	background: rgba(234, 222, 204, .6); color: var(--r-dark-purple); text-decoration: none;
	font: 600 14px/16px var(--f-secondary);
}
.r-pager a:hover, .r-postnav a:hover { background: var(--r-sand); }
.r-pager .current { background: var(--r-dark-purple); color: var(--r-canvas); }
.r-pager__page { font: 500 14px/1 var(--f-secondary); color: #7a7a7a; }
.r-postnav { padding-top: 32px; border-top: 1px solid rgba(64, 33, 79, .15); }
.r-postnav__next { margin-left: auto; }

/* ---------- Old-look styling inside editor content (REDESIGN-QA.md #57) ----------
   Inline fonts and lettering pasted into content (Arial from press-release wires, Korolev on Willpower) follow the
   redesign type instead. The old colour classes map to the new palette. The old Achieve "A" mark in the trial
   pages' title rows is hidden; each trial's own logo and headline remain. */
.r-content [style*="font-family"] { font-family: inherit !important; }
.r-content [style*="letter-spacing"] { letter-spacing: inherit !important; }
.r-content [style*="text-transform"] { text-transform: none !important; }
.r-content .orange-text { color: var(--r-purple); }
.r-content .black-text { color: var(--r-dark-purple); }
.r-content td.otrial-logo-cell:has(img[src*="Achieve_logo_717x800"]), .r-content img[src*="Achieve_logo_717x800"] { display: none; }

/* Willpower campaign page: a centred column, highlighted headline phrase, then the form (its old embedded styles are
   dropped at render time). */
.r-page--willpower #willpower-page { max-width: 694px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.6; }
.r-page--willpower #willpower-page h2 {
	margin: 0 0 32px; font: 500 46px/1.08 var(--f-primary) !important; letter-spacing: -0.02em !important; color: var(--r-purple);
}
.r-page--willpower #willpower-page h2 strong { font-weight: 700; color: var(--r-dark-purple); background: linear-gradient(transparent 62%, rgba(255, 197, 83, .65) 62%); }
.r-page--willpower .fake-arrow-down { width: 22px; height: 22px; margin: 48px auto 0; border-right: 3px solid var(--r-yellow); border-bottom: 3px solid var(--r-yellow); transform: rotate(45deg); }
.r-page--willpower .r-content h3 { margin-top: 56px !important; text-align: center; font-weight: 600 !important; }
.r-page--willpower .gform_heading { display: none; }
/* Gravity Forms lays fields on a grid: centre them with justify-self (auto margins would shrink them to fit). */
.r-page--willpower .gform_wrapper .gfield:not(.gfield--type-consent):not(.gfield--type-choice) { width: 100%; max-width: 440px; justify-self: center; }
.r-page--willpower .gform_wrapper .gform_footer { max-width: 440px; margin-left: auto; margin-right: auto; }
.r-page--willpower .gform_wrapper .gform_footer { justify-content: center; }
.r-page--willpower .gform_wrapper .gfield--type-consent, .r-page--willpower .gform_wrapper .gfield--type-choice { text-align: center; }
.r-content .gform_wrapper input[type="checkbox"] { accent-color: var(--r-purple); }
.r-page--willpower-confirmation #willpower-confirmation-page { padding: 24px 0 !important; text-align: center; }
.r-page--willpower-confirmation #willpower-confirmation-page h1 { margin-bottom: 32px !important; font: 500 46px/1.08 var(--f-primary) !important; }
.r-page--willpower-confirmation #willpower-confirmation-page a {
	display: inline-flex; align-items: center; height: 48px; padding: 0 40px; border-radius: 999px;
	background: var(--r-dark-purple); color: #fff; font: 400 16px/normal 'Outfit', var(--f-secondary) !important; text-decoration: none;
}

/* Single team member page: photo beside the bio */
.r-person__photo { float: right; width: 240px; height: auto; margin: 0 0 24px 32px; border-radius: 16px; }

/* =====================================================================================================
   Tablet (768–1023) and mobile (<768)
   ===================================================================================================== */
@media (max-width: 1023.98px) {
	.r-band { padding: 150px 0 150px; }
	/* Section heroes: content height, the usual gutters; About keeps the title on the art's dark side, its orb glowing at
	   the right edge */
	.r-band--art { min-height: 0; }
	.r-band--art .r-band__inner { padding-left: var(--m); }
	.r-band--about { background-position: 12% center; }
	.r-band::after { bottom: 0; width: 330%; height: auto; aspect-ratio: 1; transform: translate(-50%, calc(100% - 64px)); }
	.r-band__inner, .r-subnav { width: var(--canvas); padding: 0 var(--m); }
	.r-band__title { font-size: 52px; }
	.r-page--single .r-band__title { font-size: 42px; }
	.r-content { width: var(--canvas); padding: 40px var(--m) 80px; }
	.r-content .team-members .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.r-content .related-posts .posts { grid-template-columns: minmax(0, 1fr); }
	.r-list__item { grid-template-columns: minmax(0, 1fr); }
	.r-list__item > *, .r-list__pills { grid-column: 1; grid-row: auto; }
	.r-list__pills { margin: 0 0 14px; }
}
@media (max-width: 767.98px) {
	.r-band { padding: 120px 0 112px; }
	.r-band__title { font-size: clamp(34px, 10cqw, 44px); }
	.r-page--single .r-band__title { font-size: clamp(28px, 8.4cqw, 36px); }
	.r-band__sub { font-size: 17px; }
	.r-band { container-type: inline-size; }
	/* Pills scroll sideways on phones instead of wrapping into a block. */
	/* Each row scrolls on its own, edge to edge; the page gutter is its padding on the left and, since a scrolling
	   flex row loses its end padding, a spacer after the last pill on the right. The trials row's rule stays inset. */
	.r-subnav { padding: 0; }
	.r-subnav__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-left: var(--m); padding-right: 0; padding-bottom: 4px; }
	.r-subnav__list::-webkit-scrollbar { display: none; }
	.r-subnav__list::after { content: ''; flex: 0 0 calc(var(--m) - 10px); }
	.r-pills__sub { border-top: 0; background: linear-gradient(rgba(64, 33, 79, .14), rgba(64, 33, 79, .14)) var(--m) 0 / calc(100% - 2 * var(--m)) 1px no-repeat; }
	/* Scroll cue (REDESIGN-QA.md #86): while more pills sit off an edge, that edge fades out, and on the right a yellow
	   chevron (the Pipeline pills' own chevron, pointing right) scrolls the row on. Both go once the row is at its end. */
	.r-subnav-row.is-scrollable > .r-subnav__list {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
	}
	.r-subnav-row:not(.at-start) { --fade-l: 32px; }
	.r-subnav-row:not(.at-end) { --fade-r: 76px; }
	.r-subnav__more {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 4px; right: 12px; width: 36px; height: 36px; padding: 0;
		border: 0; border-radius: 50%; background: var(--r-yellow); color: var(--r-dark-purple); cursor: pointer;
		box-shadow: 0 2px 8px rgba(39, 26, 44, .12); transition: opacity .2s ease;
	}
	.r-subnav__more::before { content: ''; width: 7px; height: 7px; margin-left: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
	.r-subnav-row--sub .r-subnav__more { top: 12px; }
	.r-subnav-row:not(.is-scrollable) .r-subnav__more, .r-subnav-row.at-end .r-subnav__more { opacity: 0; pointer-events: none; }
	.r-content { padding: 32px var(--m) 64px; }
	.r-content :where(h1), .r-content .r-h1 { font-size: 34px; }
	.r-content :where(h2) { font-size: 28px; }
	.r-content :where(h3) { font-size: 20px; }
	.r-content .team-members .posts { grid-template-columns: minmax(0, 1fr); }
	.r-content .team-members .post { padding: 22px; }
	.r-content .alignright, .r-content .alignleft { float: none; margin: 0 0 1em; }
	/* Data tables (with a header row) scroll sideways inside themselves rather than widening the page. */
	.r-content table:has(thead) { display: block; max-width: 100%; overflow-x: auto; font-size: 14px; }
	/* Column cards scroll inside themselves too: the first card starts at the content edge, values don't wrap */
	.r-content table.r-ae { width: auto; margin: 1.5em 0; border-spacing: 8px 0; }
	.r-ae :is(th, td) { padding: 0 16px; }
	.r-ae td { font-size: 17px; white-space: nowrap; }
	.r-ae td.r-ae--label { min-width: 180px; white-space: normal; font-size: 15px; }
	.r-ae .r-ae__note td { white-space: normal; }
	.r-ae__name { white-space: nowrap; }
	.r-ae--chart td { min-width: 150px; white-space: normal; font-size: 16px; }
	.r-content .table-2 .r-ae td { min-width: 180px; white-space: normal; font-size: 15px; }
	.r-ae tbody th { min-width: 120px; font-size: 15px; }
	/* Chart column names wrap rather than run past the edge of the screen ("Commercial / schedule"; Ziflow v9 #16), and a
	   table's footnote wraps at the table's visible width and stays in view as the cards scroll, instead of spanning every
	   card (ORCA-1's note was cut off mid-word; Ziflow v9 #17). */
	.r-ae--chart th:not(.r-ae--label) .r-ae__name { max-width: 7em; white-space: normal; }
	.r-content table.r-ae { container-type: inline-size; }
	.r-ae .r-ae__note td > * { position: sticky; left: 8px; display: block; width: calc(100cqi - 16px); }
	.r-content .r-list__title { font-size: 24px; }
	.r-list__item { padding: 28px 0; }
	.leadership-modal { padding: 12px; }
	.leadership-modal--inner { padding: 32px 24px; border-radius: 24px; max-height: calc(100dvh - 24px); }
	.leadership-modal--headshot { float: none; display: block; width: 140px; margin: 0 0 20px; }
	.leadership-modal .leadership-modal--name { font-size: 28px; }
	.leadership-modal--bio-title { padding-bottom: 14px; }
	.r-person__photo { float: none; display: block; width: 200px; margin: 0 0 24px; }
	.r-pager, .r-postnav { flex-wrap: wrap; }
	.r-pager__page { order: -1; width: 100%; text-align: center; }
}

/* =====================================================================================================
   Live charts (_includes/redesign/charts.php, REDESIGN-QA.md #58): the Pipeline and trial pages' chart images
   rebuilt as HTML in the redesign palette. Cytisinicline = yellow (the 25M bubble), placebo = purple, timeline and
   flow rails = sand, completed = dark purple, planned = dashed canary.
   ===================================================================================================== */
.r-chart--pipeline { container: pipe / inline-size; }
.r-chart { position: relative; margin: 40px auto; padding: 32px; border-radius: 24px; background: rgba(255, 255, 255, .6); color: var(--r-dark-purple); }
.r-chart__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.r-content .r-chart__head > p { margin: 0; } /* authored charts: the eyebrow and subtitle are paragraphs */
.r-chart__eyebrow { font: 700 var(--t-eyebrow)/var(--lh-eyebrow) var(--f-secondary); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--r-purple); }
.r-chart__title { font: 500 26px/1.15 var(--f-primary); letter-spacing: -0.02em; color: var(--r-purple); }
.r-chart__subtitle { font: 500 16px/1.3 var(--f-secondary); color: #4a4a4a; }
.r-content .r-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 20px; padding: 0; font: 600 13px/1 var(--f-secondary); }
.r-content .r-chart__legend > li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.r-content .r-chart__legend > li::before { display: none; }
.r-key { width: 14px; height: 14px; border-radius: 4px; }
.r-key--cyt { background: linear-gradient(180deg, #ffe4a0, #ecaa38); }
.r-key--placebo, .r-key--done { background: var(--r-purple); }
.r-key--planned { border: 2px dashed var(--r-canary); background: rgba(255, 197, 83, .2); }
.r-content .r-chart__note { margin: 16px 0 0; font: 400 12px/1.5 var(--f-secondary); color: #7a7a7a; }

/* Bar charts: values above each bar; group labels under the axis */
.r-bars { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
.r-bars__ylabel { align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px/1 var(--f-secondary); letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; }
.r-bars__plot { position: relative; height: 300px; margin: 28px 0 64px 46px; border-bottom: 1.5px solid rgba(64, 33, 79, .45); }
.r-bars__tick { position: absolute; left: 0; right: 0; bottom: calc(var(--at) / var(--max) * 100%); border-top: 1px dashed rgba(64, 33, 79, .14); }
.r-bars__tick span { position: absolute; right: calc(100% + 8px); top: 0; transform: translateY(-50%); font: 500 12px/1 var(--f-secondary); color: #7a7a7a; white-space: nowrap; }
.r-bars__groups { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--groups), minmax(0, 1fr)); }
.r-bars__group { position: relative; display: flex; justify-content: center; }
.r-bars__pair { display: flex; align-items: flex-end; gap: 10px; height: 100%; }
.r-bar { position: relative; width: 64px; height: calc(var(--val) / var(--max) * 100%); border-radius: 10px 10px 2px 2px; transform-origin: bottom; }
.r-bar--cyt { background: linear-gradient(180deg, #ffe4a0 0%, #ffc553 45%, #ecaa38 100%); }
.r-bar--placebo { background: linear-gradient(180deg, #6a3e7b, #40214f); }
.r-bar b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font: 700 15px/1 var(--f-secondary); color: var(--r-dark-purple); white-space: nowrap; }
.r-bars__label { position: absolute; top: calc(100% + 12px); left: 4px; right: 4px; text-align: center; font: 600 13px/1.3 var(--f-secondary); color: var(--r-dark-purple); }
.r-chart__endpoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.r-content .r-endpoint { margin: 0; padding: 16px 20px; border-radius: 16px; background: var(--r-dark-purple); color: var(--r-canvas); display: flex; flex-direction: column; gap: 8px; }
.r-endpoint__label { font: 600 13px/1.35 var(--f-secondary); }
.r-endpoint__value { font: 500 30px/1 var(--f-primary); color: var(--r-yellow); }
.r-endpoint__value small { font: 600 13px/1 var(--f-secondary); color: rgba(255, 197, 83, .85); }
.r-chart-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 40px auto; }
.r-chart-pair .r-chart { margin: 0; padding: 24px; }
.r-chart-pair .r-bar { width: 48px; }
/* Bars grow when the chart scrolls into view (off with reduced motion: the chart is simply shown). */
.r-reveal-on .r-chart[data-r-reveal] .r-bar { transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .15s; }
.r-reveal-on .r-chart[data-r-reveal] .r-bar b { opacity: 0; transition: opacity .4s ease .8s; }
.r-reveal-on .r-chart.is-revealed .r-bar { transform: none; }
.r-reveal-on .r-chart.is-revealed .r-bar b { opacity: 1; }

/* Trial designs and study designs (ORCA-3, ORCA-2, ORCA-1, ORCA-V1) are column-card tables (charts.php
   als_redesign_column_table(); the .r-ae styles above), drawn on the page like the safety tables rather than in a card.
   Their rows have header cells (th scope="row"), styled as the label column. */
.r-chart--design, .r-chart--flow { padding: 0; border-radius: 0; background: none; }
.r-chart--design .r-chart__head, .r-chart--flow .r-chart__head { margin-bottom: 4px; }
.r-ae tbody th {
	height: 56px; padding-bottom: 0; vertical-align: middle;
	border-bottom-color: var(--r-sand);
	font: 400 16px/1.4 var(--f-secondary); color: var(--r-dark-purple);
}
.r-ae tbody th.r-ae__last { border-bottom: 0; }
.r-ae--chart td { padding-top: 12px; padding-bottom: 12px; font-size: 18px; line-height: 1.3; }

/* Pipeline: indication | trial | Phase 1–3 track | endpoint */
.r-pipe { --pcols: 120px 170px minmax(0, 1fr) 240px; display: grid; }
.r-pipe__head { display: grid; grid-template-columns: var(--pcols); gap: 16px; padding-bottom: 10px; border-bottom: 1.5px solid rgba(64, 33, 79, .3); font: 700 12px/1.2 var(--f-secondary); letter-spacing: .08em; text-transform: uppercase; color: var(--r-purple); }
.r-pipe__phases { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.r-pipe__group { display: grid; grid-template-columns: var(--pcols); column-gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(64, 33, 79, .14); }
.r-content .r-pipe__indication { grid-column: 1; grid-row: 1 / span 6; margin: 8px 0 0; font: 500 21px/1.15 var(--f-primary); color: var(--r-purple); }
.r-pipe__row { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 8px 0; }
.r-pipe__trial { font: 400 13px/1.3 var(--f-secondary); color: #4a4a4a; }
.r-content .r-pipe__trial strong { display: block; font: 500 20px/1.1 'Outfit', var(--f-secondary); color: var(--r-dark-purple); }
.r-pipe__jama { display: inline-flex; align-items: center; height: 20px; white-space: nowrap; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--r-dark-purple); color: var(--r-canvas); font: 700 10px/1 var(--f-secondary); letter-spacing: .08em; vertical-align: 1px; text-decoration: none; transition: background .2s ease; }
.r-pipe__jama:hover { background: var(--r-purple); color: var(--r-canvas); }
.r-pipe__track { position: relative; height: 40px; background: linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(64, 33, 79, .16) calc(33.333% - 1px), rgba(64, 33, 79, .16) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), rgba(64, 33, 79, .16) calc(66.666% - 1px), rgba(64, 33, 79, .16) 66.666%, transparent 66.666%); }
.r-pipe__bar { position: absolute; left: 0; top: 6px; bottom: 6px; width: calc(var(--reach) / 3 * 100%); border-radius: 999px; background: linear-gradient(90deg, #40214f, #3d2348); transform-origin: left; }
.is-planned .r-pipe__bar { background: rgba(255, 197, 83, .22); border: 2px dashed var(--r-canary); }
.r-reveal-on .r-chart[data-r-reveal] .r-pipe__bar { transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) .2s; }
.r-reveal-on .r-chart.is-revealed .r-pipe__bar { transform: none; }
.r-pipe__endpoint { display: flex; align-items: flex-start; gap: 10px; font: 500 13px/1.35 var(--f-secondary); color: var(--r-dark-purple); }
.r-pipe__check { flex: none; position: relative; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--r-purple); }
.is-met .r-pipe__check { border: 0; background: var(--r-yellow); }
.is-met .r-pipe__check::after { content: ''; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border-right: 2.5px solid var(--r-dark-purple); border-bottom: 2.5px solid var(--r-dark-purple); transform: rotate(45deg); }
/* MLR, 11/5 (Ziflow v10 #8, #9, #13): a results link in place of the check and result; the investigational note in purple at the
   results column's size, above the footnote and the sources. */
.r-content .r-pipe__endpoint.is-link a { color: var(--r-dark-purple); text-decoration: underline; text-underline-offset: 3px; }
.r-content .r-pipe__endpoint.is-link a:hover { color: var(--r-purple); }
.r-content .r-pipe__note { margin: 20px 0 0; font: 500 13px/1.35 var(--f-secondary); color: var(--r-purple); }
.r-content :is(.r-pipe__note, .r-pipe__footnote) + .r-chart__note { margin-top: 8px; }
.r-content .r-pipe__legend { margin-top: 20px; }
/* Column-card style (Creative, 2026-10-23; Figma 5109:742): drawn on the page, not in a card. The Phase 1–3 track
   column is one tinted card (yellow, 24 radius) behind every row, with white phase dividers; the header is Playfair
   over a purple rule; groups are divided by sand rules. */
.r-chart--pipeline { padding: 0; border-radius: 0; background: none; }
.r-pipe {
	--pc1: 120px; --pc2: 170px; --pc4: 240px; --pgap: 16px;
	--pcols: var(--pc1) var(--pc2) minmax(0, 1fr) var(--pc4);
	position: relative;
}
.r-pipe::before {
	content: ''; position: absolute; top: 0; bottom: 0;
	left: calc(var(--pc1) + var(--pc2) + 2 * var(--pgap) - 12px); right: calc(var(--pc4) + var(--pgap) - 12px);
	border-radius: 24px; background: rgba(255, 197, 83, .4);
}
.r-pipe > * { position: relative; }
.r-pipe__head {
	height: 96px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--r-purple);
	font: 600 16px/24px var(--f-primary); letter-spacing: -0.03em; text-transform: none;
}
.r-pipe__group { border-bottom-color: var(--r-sand); }
.r-pipe__group:last-child { border-bottom: 0; }
.r-pipe__track { background: linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(255, 255, 255, .7) calc(33.333% - 1px), rgba(255, 255, 255, .7) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), rgba(255, 255, 255, .7) calc(66.666% - 1px), rgba(255, 255, 255, .7) 66.666%, transparent 66.666%); }
.is-planned .r-pipe__bar { background: transparent; border-color: var(--r-purple); }
.r-pipe__legend .r-key--planned { border-color: var(--r-purple); background: transparent; }

/* ORCA-1 infographic, rebuilt as cards */
.r-info { display: grid; gap: 20px; margin: 40px auto; }
.r-info > .r-chart { min-width: 0; margin: 0; } /* a grid item: lets a wide table scroll inside itself on phones */
.r-content .r-info__top .r-chart__eyebrow { margin: 0 0 6px; }
.r-content .r-info__title { margin: 0; font: 500 32px/1.1 var(--f-primary); letter-spacing: -0.02em; color: var(--r-purple); }
.r-info__outcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; border-radius: 24px; background: linear-gradient(181deg, #28162f, #40214f); color: var(--r-canvas); }
.r-content .r-info__outcome p { flex: 1 1 340px; margin: 0; font: 500 20px/1.4 var(--f-secondary); }
.r-content .r-info__outcome strong { color: var(--r-yellow); }
.r-info__dose { display: inline-flex; align-items: center; gap: 10px; }
.r-info__pill { width: 34px; height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--r-canvas) 50%, var(--r-yellow) 50%); }
.r-info__times { font: 600 22px/1 var(--f-secondary); color: var(--r-yellow); }
.r-info__clock { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--r-yellow); }
.r-info__clock::before, .r-info__clock::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--r-yellow); transform-origin: bottom; }
.r-info__clock::before { height: 12px; }
.r-info__clock::after { height: 9px; transform: rotate(90deg); }
.r-info__clock:nth-child(4)::after { transform: rotate(135deg); }
.r-info__clock:nth-child(5)::after { transform: rotate(-90deg); }
.r-info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.r-info__card { padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, .6); }
.r-info__card--aim { background: linear-gradient(160deg, #ffe4a0, #ffc553); }
.r-content .r-info__label { margin: 0 0 10px; font: 700 12px/1.3 var(--f-secondary); letter-spacing: .12em; text-transform: uppercase; color: var(--r-purple); }
.r-content .r-info__big { margin: 0; font: 500 28px/1.15 var(--f-primary); color: var(--r-dark-purple); }
.r-content .r-info__states { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.r-content .r-info__states > li { margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--r-purple); color: var(--r-canvas); font: 700 13px/1 var(--f-secondary); letter-spacing: .06em; }
.r-content .r-info__states > li::before, .r-content .r-info__stats > *::before { display: none; }
.r-content .r-info__note { margin: 0; font: 400 15px/1.5 var(--f-secondary); color: #4a4a4a; }
.r-info__cdc { padding: 28px 32px; border-radius: 24px; background: rgba(255, 255, 255, .6); }
.r-content .r-info__hard { margin: 0 0 20px; font: 500 30px/1.1 var(--f-primary); color: var(--r-purple); }
.r-content .r-info__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.r-content .r-info__stats > * { margin: 0; padding: 20px; border-radius: 18px; background: var(--r-canvas); font: 400 15px/1.4 var(--f-secondary); color: var(--r-dark-purple); }
.r-content .r-info__stats > * > p { margin: 0; }
.r-content .r-info__stats .r-info__num { margin: 4px 0 8px; }
.r-info__pre { display: block; font: 700 11px/1 var(--f-secondary); letter-spacing: .14em; text-transform: uppercase; color: #7a7a7a; }
.r-info__num { display: block; margin: 4px 0 8px; font: 600 56px/1 var(--f-secondary); letter-spacing: -0.04em; color: var(--r-purple); }
.r-info__stats > *:last-child .r-info__num { color: #b97d14; }
.r-content .r-info__closing { margin: 0; padding: 28px 32px; border-radius: 24px; background: var(--r-dark-purple); color: var(--r-canvas); font: 500 22px/1.4 var(--f-secondary); }
.r-content .r-info__closing strong { color: var(--r-yellow); }
/* Column-card style (Creative, 2026-10-23; Figma 5109:742): the infographic's cards use the cards' tints (yellow 40%,
   mauve 20%, sand 50%) and 24 radius, with dark-purple text, and its labels use the cards' Playfair header style. */
.r-info__outcome { background: rgba(170, 131, 187, .2); color: var(--r-dark-purple); }
.r-content .r-info__outcome strong { color: var(--r-purple); }
.r-info__times { color: var(--r-purple); }
.r-info__clock { border-color: var(--r-purple); }
.r-info__clock::before, .r-info__clock::after { background: var(--r-purple); }
.r-info__card--aim { background: rgba(255, 197, 83, .4); }
.r-info__card:not(.r-info__card--aim) { background: rgba(234, 222, 204, .5); }
.r-content .r-info__label { margin-bottom: 12px; font: 600 16px/24px var(--f-primary); letter-spacing: -0.03em; text-transform: none; }
.r-info__cdc { padding: 0; background: none; }
.r-content .r-info__stats > * { border-radius: 24px; }
.r-content .r-info__stats > *:nth-child(1) { background: rgba(255, 197, 83, .4); }
.r-content .r-info__stats > *:nth-child(2) { background: rgba(170, 131, 187, .2); }
.r-content .r-info__stats > *:nth-child(3) { background: rgba(234, 222, 204, .5); }
.r-info__stats > *:last-child .r-info__num { color: var(--r-purple); }
.r-content .r-info__closing { background: rgba(255, 197, 83, .4); color: var(--r-dark-purple); }
.r-content .r-info__closing strong { color: var(--r-purple); }

/* The pipeline table sizes itself by the chart's width (the desktop sub-nav column narrows it, #60): full grid,
   then a compact grid, then one card per trial. */
@container pipe (max-width: 759.98px) {
	.r-pipe { --pc1: 92px; --pc2: 120px; --pc4: 188px; --pgap: 12px; }
	.r-pipe__head, .r-pipe__group { column-gap: 12px; }
	.r-pipe__head { gap: 12px; font-size: 15px; }
	.r-content .r-pipe__indication { font-size: 18px; }
	.r-content .r-pipe__trial strong { font-size: 17px; }
	.r-pipe__endpoint { font-size: 12px; gap: 8px; }
}
@container pipe (max-width: 559.98px) {
	.r-pipe__head { display: none; }
	/* One column: no card behind the column; each track is its own tinted strip */
	.r-pipe::before { display: none; }
	.r-pipe__track { border-radius: 12px; background-color: rgba(255, 197, 83, .4); }
	.r-pipe__group { display: block; padding: 18px 0; }
	.r-content .r-pipe__indication { margin: 0 0 6px; }
	.r-pipe__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid rgba(64, 33, 79, .1); }
	.r-pipe__track { height: 30px; margin-bottom: 18px; }
	.r-pipe__track::after { content: 'Phase 1\00a0\00a0\00a0\00b7\00a0\00a0\00a0Phase 2\00a0\00a0\00a0\00b7\00a0\00a0\00a0Phase 3'; position: absolute; left: 0; right: 0; top: calc(100% + 4px); font: 600 10px/1 var(--f-secondary); letter-spacing: .08em; text-transform: uppercase; color: #7a7a7a; text-align: center; }
}
@media (max-width: 767.98px) {
	.r-chart { padding: 22px 18px; border-radius: 20px; }
	.r-chart-pair { grid-template-columns: minmax(0, 1fr); }
	.r-chart-pair .r-chart { padding: 22px 18px; }
	.r-bar, .r-chart-pair .r-bar { width: 40px; }
	.r-bars__plot { height: 240px; margin-left: 40px; }
	.r-bars__label { font-size: 12px; }
	/* Trial design: one card per arm, periods listed */
	/* Flow: rails become horizontal bars, stacked */
	.r-info__grid, .r-content .r-info__stats { grid-template-columns: minmax(0, 1fr); }
	.r-info__outcome, .r-info__cdc, .r-content .r-info__closing { padding: 22px 20px; }
	.r-content .r-info__closing { font-size: 19px; }
	.r-info__num { font-size: 48px; }
}

/* References page (copy deck 2026-10-20): numbered list; the reference markers link to #ref-N below the fixed header. */
.r-content .r-refs > li { scroll-margin-top: 140px; padding-left: .2em; overflow-wrap: anywhere; }
.r-content .r-refs > li:target { background: linear-gradient(90deg, rgba(255, 197, 83, .35), transparent 70%); border-radius: 6px; }
/* An eyebrow (h5/h6) sits right above the heading it labels (About: "Our purpose"). */
.r-content :where(h5, h6) + :where(h2, h3) { margin-top: .35em; }