/* Redesign home page (Figma Achieve_Corporate-Brand, page "Website 2.1", frame 3499:23442).

   Layout model (user decisions, REDESIGN.md / REDESIGN-QA.md #28–31, #40–42, #45):
   - Three fixed desktop canvases: 1440 (≥1440px), 1200 (1200–1439px) and 1024 (1024–1199px). Within a tier the
     canvas never changes; wider viewports only gain gutters.
   - --s is the tier's horizontal scale (canvas / 1440). Horizontal sizes, offsets, gaps and paddings are written
     as calc(Npx * var(--s)) from Figma's 1440 frame. --v scales vertical sizes the same way at the 1200 and 1024
     tiers (1 at 1440+). Font sizes and the logo never change; text may wrap and boxes may grow.
   - Tablet (768–1023): fixed 768 canvas, centred. Mobile (<768): fluid with 20px side margins (--m).
   - Nothing scales above 1440: gutters show the section background or art that already extends past the frame.
   - Motion (hero video, bubble hover, scroll reveal) is off under prefers-reduced-motion. */

:root {
	/* Figma variables. Purple, lilac, canvas, sand, yellow and light yellow take Kait's updated brand hex codes (Alex,
	   Slack 10/29); the other four have no counterpart in that palette and are unchanged. */
	--r-dark-purple: #271a2c;
	--r-purple: #40214f;
	--r-lilac: #aa83bb;
	--r-canvas: #f7eedd;
	--r-sand: #eadecc;
	--r-yellow: #ffc553;
	--r-canary: #ecaa38;
	--r-light-yellow: #ffe4a0;
	--r-periwinkle: #b2b6fc;

	--f-primary: 'Playfair Display', Georgia, 'Times New Roman', serif;
	/* Playfair with sans-serif numerals, for data (fonts.css; set as --f-primary inside charts, tables and infographics). */
	--f-primary-data: 'Data Numerals', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--f-secondary: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Type tokens (Figma text styles) */
	--t-display: 80px;   --lh-display: 1.04;   --ls-display: -0.03em;
	--t-h2: 48px;        --lh-h2: 1.06;        --ls-h2: -0.03em;
	--t-body-lg: 20px;   --lh-body-lg: 1.2;
	--t-body: 16px;      --lh-body: 1.4;
	--t-body-sm: 14px;   --lh-body-sm: 24px;
	--t-eyebrow: 12px;   --lh-eyebrow: 16px;   --ls-eyebrow: 0.14em;
	--t-button: 14px;    --lh-button: 16px;
	--t-caption: 12px;   --lh-caption: 16px;
	--t-nav: 14px;       --lh-nav: 24px;

	/* Canvas tier */
	--canvas: 1440px;
	--s: 1;
	--v: 1;
	--m: 0px;
}
@media (max-width: 1439.98px) { :root { --canvas: 1200px; --s: 0.833333; --v: 0.833333; } }
@media (max-width: 1199.98px) { :root { --canvas: 1024px; --s: 0.711111; --v: 0.711111; } }
@media (max-width: 1023.98px) { :root { --canvas: 768px; --s: 0.533333; --v: 1; --m: 40px; } }
@media (max-width: 767.98px) { :root { --canvas: 100%; --m: 20px; } }

/* ---------- Base ---------- */
html { font-synthesis: none; -webkit-text-size-adjust: 100%; }
/* Playfair and Outfit ship no italic, so <em>/<i> (journal names in titles) get a slanted roman; Plus Jakarta keeps its
   real italic. <sub>/<sup> sit in the line without opening a gap (5-HT3, ®) (Genome 2833612). */
:where(.redesign) :is(em, i) { font-synthesis-style: auto; }
:where(.redesign) :is(sub, sup) { line-height: 0; }
html.r-scroll-lock { overflow: hidden; }
body.redesign {
	margin: 0;
	background: var(--r-canvas);
	color: var(--r-dark-purple);
	font-family: var(--f-secondary);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
.redesign *, .redesign *::before, .redesign *::after { box-sizing: border-box; }
/* Resets use :where() so they never outweigh component classes. */
:where(.redesign) :where(h1, h2, h3, p, ul, ol, address, figure) { margin: 0; padding: 0; }
:where(.redesign) :where(ul, ol) { list-style: none; }
:where(.redesign) address { font-style: normal; }
:where(.redesign) img, :where(.redesign) video { max-width: none; border: 0; }
:where(.redesign) a { color: inherit; }
.redesign :focus-visible { outline: 2px solid var(--r-yellow); outline-offset: 3px; }

.r-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Reference markers (als_redesign_ref): small superscripts in the surrounding colour, linking to the References page. */
.r-ref { font-size: .58em; font-weight: inherit; line-height: 0; vertical-align: .62em; letter-spacing: 0; }
.r-ref a, .r-content .r-ref a { color: inherit; text-decoration: none; }
.r-ref a:hover { text-decoration: underline; }
.r-skip {
	position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 12px 20px; border-radius: 999px;
	background: var(--r-dark-purple); color: var(--r-canvas); font: 600 14px/16px var(--f-secondary);
	text-decoration: none; transform: translateY(-200%);
}
.r-skip:focus { transform: none; }
.r-nowrap { white-space: nowrap; }

.r-eyebrow {
	font: 700 var(--t-eyebrow)/var(--lh-eyebrow) var(--f-secondary);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}
.r-h2 {
	font: 500 var(--t-h2)/var(--lh-h2) var(--f-primary);
	letter-spacing: var(--ls-h2);
}

/* ---------- Scroll bump / fade in (redesign.js adds .r-reveal-on, then .is-revealed per element) ---------- */
.r-reveal-on [data-r-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--r-reveal-delay, 0ms);
}
.r-reveal-on [data-r-reveal].is-revealed { opacity: 1; transform: none; }

/* Button_solid_md: label Outfit Regular 16 / normal, as in the Figma instances (REDESIGN-QA.md #38). */
.r-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding: 0 40px; border-radius: 999px;
	font: 400 16px/normal 'Outfit', var(--f-secondary);
	text-decoration: none; white-space: nowrap;
	transition: filter .2s ease;
}
.r-btn:hover { filter: brightness(1.12); }
.r-btn--dark { background: var(--r-dark-purple); color: #fff; }
.r-btn--sand { background: var(--r-sand); color: var(--r-dark-purple); }

/* ---------- Header (instance 3499:26801) ---------- */
.r-header {
	position: fixed; z-index: 100; top: calc(45px * var(--v)); left: 50%;
	width: calc(1318px * var(--s)); height: calc(76px * var(--v));
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 calc(40px * var(--s));
	transform: translate(-50%, 0);
	transition: transform .35s ease;
}
/* Pill on a pseudo-element so the dropdown panels can blur the page behind them too. Figma's component value is
   15% black, but the comp stacks two pills (the hero has its own header underneath), so it reads as about 28%;
   this matches the comp (REDESIGN-QA.md, open items). Figma background blur 38 is about CSS blur(19px). */
.r-header::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	border-radius: 104px;
	background: rgba(0, 0, 0, .28);
	-webkit-backdrop-filter: blur(19px); backdrop-filter: blur(19px);
	transition: background-color .3s ease;
}
/* Away from the top of the page the pill is solid brand purple, so the nav reads over any content (accessibility;
   Kait's IR staging, Alex's Slack 11/2). It turns solid when the page loads below the top or the pill comes back on
   scroll up, and goes back to glass at the top. redesign.js sets the class. */
.r-header.is-solid::before,
.r-header.is-solid .r-nav .sub-menu::before { background-color: var(--r-purple); }
.r-header.is-hidden { transform: translate(-50%, calc(-100% - 50px)); }
.r-header__logo { display: block; line-height: 0; }
/* Desktop: 20% over Figma's 135 × 26 so the Rx reads (Ziflow round 3, #16; Oleg). Below 1024 it stays at Figma's
   size (2026-10-23). */
.r-header__logo img, .r-mmenu__logo img { width: 162px; height: 31.2px; }
.r-burger { display: none; }

.r-nav { display: flex; gap: calc(4px * var(--s)); }
.r-nav > li { position: relative; }
.r-nav a {
	display: block; padding: 8px calc(11px * var(--s));
	font: 500 var(--t-nav)/var(--lh-nav) var(--f-secondary);
	color: var(--r-canvas); text-decoration: none; white-space: nowrap;
}
.r-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Figma draws the caret with the "▾" character from a fallback font (about 5 × 4px); drawn here so it never depends on fonts. */
.r-nav__caret {
	display: inline-block; vertical-align: middle; margin: -2px 0 0 4px;
	border-left: 2.5px solid transparent; border-right: 2.5px solid transparent; border-top: 4px solid currentColor;
}
/* Dropdown: rounded panel matching the pill. Not designed in Figma (concept decision #23). */
.r-nav .sub-menu {
	position: absolute; top: 100%; left: 0;
	min-width: 230px; margin-top: calc(26px * var(--v)); padding: 12px 0;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.r-nav .sub-menu::before {
	content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 24px;
	background: rgba(0, 0, 0, .28);
	-webkit-backdrop-filter: blur(19px); backdrop-filter: blur(19px);
}
.r-nav .sub-menu a { padding: 6px 24px; }
/* Pipeline's programmes list their trials under them (the same pages as the Pipeline pills): indented, smaller. */
.r-nav .sub-menu .sub-menu {
	position: static; min-width: 0; margin: 0 0 6px; padding: 0;
	opacity: 1; visibility: inherit; transform: none; transition: none;
}
.r-nav .sub-menu .sub-menu::before { content: none; }
.r-nav .sub-menu .sub-menu a { padding: 4px 24px 4px 40px; font-size: 13px; opacity: .85; }
/* Hover bridge across the gap between the item and its panel. */
.r-nav > .menu-item-has-children::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: calc(26px * var(--v)); }
.r-nav > li:hover > .sub-menu,
.r-nav > li:focus-within > .sub-menu,
.r-nav > li.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.r-nav > li.is-closed > .sub-menu { opacity: 0; visibility: hidden; }

/* ---------- Hero (frame 3499:23443) ---------- */
.r-hero { position: relative; min-height: calc(1160px * var(--v)); padding-bottom: calc(120px * var(--v)); overflow: hidden; background: #2d1636; }
.r-hero__media { position: absolute; inset: 0; }
.r-hero__media > * { position: absolute; display: block; }
/* Comp still: Figma box x -339.09, y -34.23, 2121.96 × 1194.23 (centre 1.89px right of the frame centre). */
.r-hero__still {
	left: 50%; top: calc(-34.23px * var(--v));
	width: calc(2121.96px * var(--s)); height: calc(1194.23px * var(--v));
	transform: translateX(calc(-50% + 1.89px * var(--s)));
	object-fit: cover;
}
/* Video (Oleg's 1920 × 1160 cut, edges fading to #28162f): drawn at its designed size, centred, never scaled up past
   1440; wider screens show the matching #28162f. Shown only when the inline script in home-hero.php adds
   .r-hero--video (motion allowed); otherwise the still and its vignette show. */
.r-hero__video {
	display: none !important;
	left: 50%; top: 0; width: calc(1920px * var(--s)); height: calc(1160px * var(--v));
	transform: translateX(-50%); object-fit: cover;
}
.r-hero--video { background: #28162f; }
.r-hero--video .r-hero__video { display: block !important; }
.r-hero--video .r-hero__still, .r-hero--video .r-hero__vignette { display: none; }
/* Dark radial vignette (second fill of the still), kept above the video: ellipse 1422.2 × 837 at (722, 418). */
.r-hero__vignette {
	inset: 0;
	background: radial-gradient(calc(1422.2px * var(--s)) calc(837px * var(--v)) at calc(50% + 2px * var(--s)) calc(418px * var(--v)),
		rgba(45, 22, 54, 0) 71.003%, rgba(45, 22, 54, .47) 79.243%, rgba(45, 22, 54, .68476) 82.765%, #2d1636 88.258%);
}
.r-hero__content {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: calc(46px * var(--v));
	padding-top: calc(264px * var(--v));
	text-align: center; color: #28162f;
}
/* Two lines, one per sentence: smaller than Figma's 114.6px so "medicine" no longer sits on a line of its own and the
   last line no longer runs wider than those above it (client feedback 10/26, Ziflow #6). Bernarda's size: 88px at
   1440 and wider, shrinking in proportion with the window below that (62.6px at 1024), as is the box, so the first
   line (1,086px at 88px) always fits. Tablet and phone set their own sizes. Line height 1, not Figma's .9, so the "g"
   of "Quitting" clears the line below (Ziflow round 3, #25). */
.r-hero__title {
	width: min(1140px, 79.1667vw); max-width: 100%;
	font: 600 min(88px, 6.1111vw)/1 var(--f-primary); letter-spacing: -0.02em;
	text-wrap: balance;
}
/* Trademark mark, small and raised */
.r-tm { font-size: .42em; line-height: 0; vertical-align: .95em; letter-spacing: 0; }
/* The headline's period tucks under the raised mark instead of trailing a gap after it (Ziflow round 3, #2). */
.r-hero__title .r-tm { margin-right: -.7em; }
.r-hero__tagline .r-tm { font-size: .55em; vertical-align: .7em; }
/* In body copy (About's "Second chances, for good.™") .42em came out about 3px tall and blurred at 1x (Ziflow v9 #10):
   a ™ in text is set larger, still raised. */
.r-content :is(p, li) .r-tm { font-size: .6em; vertical-align: .6em; }
/* 584px on desktop and tablet (Keegan, 11/5): the lines break after "fewer than", "failure of" and "late-stage"
   (580–588px does; phones keep their own width). */
.r-hero__body { width: 584px; max-width: 100%; font: 500 20px/1.4 var(--f-secondary); }
/* Smaller than Figma's 36px so it doesn't compete with the headline, but kept clear of the 20px body copy: 28px at
   1440 and wider, 26px at the 1200 tier, 24px at the 1024 tier (Bernarda, Slack 10/27, client feedback #6). Tablet
   and phone set their own sizes. */
.r-hero__tagline { font: 600 28px/1 var(--f-secondary); text-transform: uppercase; }
@media (max-width: 1439.98px) { .r-hero__tagline { font-size: 26px; } }
@media (max-width: 1199.98px) { .r-hero__tagline { font-size: 24px; } }

/* Temporary "test workflow" line below the hero (local-docker/home-test-workflow-2026-11-03.php); delete with it. */
.r-test-workflow { padding: 40px var(--m, 20px); font: 600 32px/1.3 var(--f-secondary); text-align: center; }

/* ---------- The medical need (frame 3566:2292) ---------- */
.r-need {
	position: relative; overflow: hidden;
	padding-bottom: calc(74px * var(--v));
	background: linear-gradient(181.017deg, #28162f 3.4152%, #3d2348 45.01%, #6a3e7b 100.43%);
	color: var(--r-canvas);
}
/* Cream curve into the next section (boolean 3566:2299: rect and a 4771px circle centred at x 719.5, top y 1110),
   drawn as the circle itself so it continues at the same curvature into wide-screen gutters. */
.r-need::after {
	content: ''; position: absolute; z-index: 0;
	bottom: calc(129px * var(--v) - 4771px * var(--s)); left: calc(50% - 0.5px * var(--s));
	width: calc(4771px * var(--s)); height: calc(4771px * var(--s));
	border-radius: 50%; background: var(--r-canvas); transform: translateX(-50%);
}
.r-need__inner { position: relative; z-index: 2; width: var(--canvas); max-width: 100%; margin: 0 auto; padding: calc(50px * var(--v)) calc(62px * var(--s)) 0; }
/* Two yellows in this section (Bernarda, client feedback 10/26, Ziflow #7): Light Yellow for every piece of text on
   the dark background (eyebrow, "Few", "Quitting…", the bubble figures), Yellow only for the 25M circle. */
.r-need__eyebrow { color: var(--r-light-yellow); }
.r-need__title {
	max-width: 920px; margin-top: calc(22px * var(--v)); /* Figma 836; the deck's first line needs 887 */
	text-wrap: balance;
	font: 700 56px/1.06 var(--f-primary); letter-spacing: -0.03em;
}
.r-need__accent { color: var(--r-light-yellow); }
.r-need__rule { height: 0; margin: calc(40px * var(--v)) 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .4); }
.r-need__text { display: flex; flex-direction: column; gap: calc(24px * var(--v)); width: calc(586px * var(--s)); margin-top: calc(44px * var(--v)); }
.r-need__lead { font: 400 24px/1.2 var(--f-secondary); }
.r-need__body { font: 400 var(--t-body)/var(--lh-body) var(--f-secondary); }
/* "Quitting…" (copy deck 2026-10-20, Ziflow round 3 #11; no Figma design): below the bubbles, the subhead and the
   callout on the left, the four ways quitting helps on the right. The bottom padding keeps it clear of the curve.
   Its rule is the bubbles' baseline: $600B+ and 25M rest on it rather than floating above, with more room before
   "Quitting…" (Bernarda, Slack 10/27). */
.r-quit {
	position: relative; z-index: 2;
	width: var(--canvas); max-width: 100%; margin: 0 auto;
	padding: 0 calc(62px * var(--s)) calc(110px * var(--v));
}
.r-quit .r-need__rule { margin: 0; }
.r-quit__grid { display: grid; grid-template-columns: calc(586px * var(--s)) minmax(0, 1fr); column-gap: calc(64px * var(--s)); margin-top: calc(72px * var(--v)); }
/* "It's never too late to quit." follows the four points in the right column, so "Quitting…" reads straight into them
   (Kait via Alex, Ziflow v9 #1, Bernarda's suggestion; it had sat under "Quitting…" since client feedback 10/26, #4). */
.r-quit__body { display: flex; flex-direction: column; gap: calc(48px * var(--v)); }
.r-quit__title { font: 700 56px/1.06 var(--f-primary); letter-spacing: -0.03em; color: var(--r-light-yellow); }
.r-quit__callout { font: 700 36px/1.1 var(--f-primary); letter-spacing: -0.02em; }
.r-quit__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(32px * var(--v)) calc(32px * var(--s)); }
.r-quit__stats li { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .4); font: 400 20px/1.35 var(--f-secondary); }

/* Stat bubbles (component set 3546:2121): a 1440 × 827 cluster drawn at the tier scale --k. It is a graphic, so its
   numbers and labels scale with it (REDESIGN-QA.md). Per bubble: box left/top (--x/--y) and diameter (--d) at 1440;
   number/label tops (--nt/--lt), sizes (--nz/--lz) and colours; fills; the hover move (--hx/--hy) of its centre. */
.r-bubbles {
	--k: var(--s);
	position: relative; z-index: 1; margin: calc(-125px * var(--k)) 0 0 calc(50% - 720px * var(--k));
	width: calc(1440px * var(--k)); height: calc(827px * var(--k));
}
.r-bubble {
	--nc: var(--r-light-yellow); --lc: var(--r-canvas); --nz: 67.034; --lz: 20; --hl: .06;
	position: absolute;
	left: calc(var(--x) * 1px * var(--k)); top: calc(var(--y) * 1px * var(--k));
	width: calc(var(--d) * 1px * var(--k)); height: calc(var(--d) * 1px * var(--k));
	text-align: center;
	transition: transform .35s ease-out, opacity .35s ease-out;
}
.r-bubble::before, .r-bubble::after { content: ''; position: absolute; inset: 0; border-radius: 50%; transition: opacity .35s ease-out; }
.r-bubble::before { background: var(--fill); opacity: .7; }
/* Hover highlight: radial #ffe4a0 at (50%, 8.06%), radius 64.8% of the diameter, strength --hl. */
.r-bubble::after { background: radial-gradient(64.8% 64.8% at 50% 8.06%, rgb(240 220 158 / var(--hl)) 0%, rgb(240 220 158 / 0) 100%); opacity: 0; }
.r-bubble > span { position: absolute; left: 0; right: 0; z-index: 1; }
.r-bubble__num {
	top: calc(var(--nt) * 1px * var(--k));
	font: 600 calc(var(--nz) * 1px * var(--k))/.85 var(--f-secondary); letter-spacing: -0.04em;
	color: var(--nc); white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.r-bubble__m { font-size: .8167em; }
.r-bubble__label {
	top: calc(var(--lt) * 1px * var(--k));
	font: 400 calc(var(--lz) * 1px * var(--k))/1.16 var(--f-secondary); letter-spacing: -0.04em;
	color: var(--lc); white-space: nowrap;
}
/* Paint order from Figma (bottom to top): 12, $600B+, 25M, 18M, 16M, 8M. 25M sits 14.766px lower than in Figma, so its
   bottom lines up with $600B+'s on the rule below (Bernarda, Slack 10/27). */
.r-bubble--12   { --x: 270; --y: 330; --d: 248.294; --nt: 66.55; --lt: 128; --fill: #271a2c; --hx: -5.5; --hy: -28.5; z-index: 1; }
.r-bubble--600b { --x: 0;   --y: 480; --d: 346.712; --nt: 127.12; --lt: 192; --fill: linear-gradient(rgba(64, 33, 79, .6), rgba(64, 33, 79, .6)), #aa83bb; --hl: .18; --hx: 19.7; --hy: -24.3; z-index: 2; }
.r-bubble--25m  { --x: 964; --y: 352.766; --d: 473.946; --nt: 127.04; --lt: 256.28; --nz: 127.956; --lz: 42.203; --nc: var(--r-dark-purple); --lc: var(--r-dark-purple); --fill: #ffc553; --hl: .5; --hx: -27.4; --hy: -31.4; z-index: 3; }
.r-bubble--18m  { --x: 496; --y: 375; --d: 392.838; --nt: 121.3; --lt: 219; --nz: 106.058; --fill: linear-gradient(rgba(64, 33, 79, .6), rgba(64, 33, 79, .6)), #aa83bb; --hl: .18; --hx: 7.6; --hy: -21.5; z-index: 4; }
/* 16M: Figma sets it in dark purple; light text like 18M's, since dark on this mauve was hard to read (Ziflow round 3, #31). */
.r-bubble--16m  { --x: 744; --y: 104; --d: 346.712; --nt: 92.93; --lt: 180; --nz: 93.605; --fill: #aa83bb; --hl: .18; --hx: -1.3; --hy: -27.3; z-index: 5; }
/* 8M (7M+): Figma's default variant sets the whole bubble to 80%. Only its circle is dimmed (70% × 80%), so the
   figure keeps the same Light Yellow as the other bubbles (client feedback 10/26, Ziflow #8). */
.r-bubble--8m   { --x: 1084; --y: 88; --d: 248.294; --nt: 66.55; --lt: 128; --fill: #271a2c; --hx: 12.4; --hy: -13.5; z-index: 6; }
.r-bubble--8m::before { opacity: .56; }
/* 25M: brand Yellow at full strength, as in the Figma comp. At the default 70% over purple it read as tan, an
   off-brand colour (client feedback 10/26, Ziflow #7, #33). */
.r-bubble--25m::before { opacity: 1; }
.r-bubble--25m .r-bubble__label { text-box: trim-both cap alphabetic; }
/* 7M+ (copy deck 2026-10-20) carries a 4-line label. Figure and label are centred in the circle as a block (59px above
   and below at 1440), like the other bubbles; the label is set a little smaller so its widest line stays inside the
   circle once centred (Ziflow v9 #5). */
.r-bubble--8m { --nt: 59; --lt: 121; }
.r-bubble--8m .r-bubble__label { font-size: calc(var(--lz) * .74px * var(--k)); }
.r-bubble--25m::after { background: radial-gradient(63% 63% at 50% 8.06%, rgb(240 220 158 / var(--hl)) 0%, rgb(240 220 158 / 0) 100%); }

@media (hover: hover) and (min-width: 1024px) {
	/* Hovered bubble: ×1.125 about its new centre, full opacity, highlight on (and the purple overlay 60% to 50%). */
	.r-bubble:hover { transform: translate(calc(var(--hx) * 1px * var(--k)), calc(var(--hy) * 1px * var(--k))) scale(1.125); }
	.r-bubble:hover::before { opacity: 1; }
	.r-bubble:hover::after { opacity: 1; }
	.r-bubble--8m:hover::before { opacity: 1; }
	.r-bubble--600b:hover, .r-bubble--18m:hover { --fill: linear-gradient(rgba(64, 33, 79, .5), rgba(64, 33, 79, .5)), #aa83bb; }
	/* Neighbours that move out of the way (Figma variants; box shifts at 1440). */
	.r-bubbles:has(.r-bubble--600b:hover) .r-bubble--12 { transform: translate(calc(25px * var(--k)), calc(-52px * var(--k))); }
	.r-bubbles:has(.r-bubble--18m:hover) .r-bubble--12 { transform: translate(calc(-20px * var(--k)), calc(-21px * var(--k))); }
	.r-bubbles:has(.r-bubble--18m:hover) .r-bubble--16m { transform: translate(calc(36px * var(--k)), calc(-30px * var(--k))); }
	.r-bubbles:has(.r-bubble--18m:hover) .r-bubble--8m { transform: translate(calc(43px * var(--k)), calc(5px * var(--k))); }
	.r-bubbles:has(.r-bubble--16m:hover) .r-bubble--8m { transform: translate(calc(26px * var(--k)), calc(3px * var(--k))); }
	.r-bubbles:has(.r-bubble--25m:hover) .r-bubble--16m { transform: translate(calc(-62px * var(--k)), calc(-38px * var(--k))); }
	.r-bubbles:has(.r-bubble--25m:hover) .r-bubble--8m { transform: translate(calc(-67px * var(--k)), calc(-59px * var(--k))); }
}

/* ---------- Our approach (frame 3499:26138) ---------- */
.r-approach { background: var(--r-canvas); padding: calc(26px * var(--v)) 0 calc(75px * var(--v)); color: #4a4a4a; }
/* Overlaps the medical-need section by 2px (net height unchanged), so no seam shows at its curve on screens where
   the boundary falls on a fractional device pixel (e.g. 412px at 2.625x). */
.r-need + .r-approach { position: relative; margin-top: -2px; border-top: 2px solid var(--r-canvas); }
.r-approach__head { width: 770px; max-width: 100%; margin: 0 auto; text-align: center; }
.r-approach__title {
	margin-top: calc(14px * var(--v));
	font: 700 var(--t-display)/var(--lh-display) var(--f-primary); letter-spacing: var(--ls-display);
	color: var(--r-purple);
}
.r-approach__copy { margin-top: calc(32px * var(--v)); font: 400 var(--t-body)/var(--lh-body) var(--f-secondary); }
/* Panel (3499:26140): an image placeholder in Figma, so it scales as an image. Background = Figma's render of the
   blurred head layer (dark base, head art with blur 50, dark diagonal fade). It grows if the callouts need room
   (the copy-deck callouts make it ~840px tall at 1440, not Figma's 687). The art is drawn at Figma's scale (full
   width, from the top), so the face and the head's glow sit where Figma has them: the face whole (#14) and the glow
   right of the callouts, keeping their text readable. `cover` and a height fit both zoomed the art, cutting the face
   off or pushing the glow under the callouts. Below Figma's height the art carries on from its own bottom edge
   (approach-panel-art-tall@2x.jpg: the comp, cut above its baked-in rounded corners and extended down to 1.5× the
   panel's width, enough for the 1024 tier, where the unscaled text makes the panel tallest). */
.r-panel {
	position: relative; overflow: hidden;
	width: calc(1206px * var(--s)); min-height: calc(687px * var(--s)); margin: calc(62px * var(--v)) auto 0;
	padding: calc(114px * var(--s)) 0 calc(101px * var(--s)) calc(127px * var(--s));
	border-radius: 16px;
	background: url(img/approach-panel-art-tall@2x.jpg) center top / 100% auto no-repeat, linear-gradient(215.07deg, #391b45 52.741%, #aa83bb 158.48%);
}
.r-panel__dots { position: absolute; left: calc(55.65px * var(--s)); top: calc(55.21px * var(--s)); width: calc(1095.354px * var(--s)); height: calc(576.89px * var(--s)); pointer-events: none; }
.r-panel__callouts { position: relative; display: flex; flex-direction: column; gap: calc(17px * var(--s)); width: calc(418px * var(--s)); }
.r-callout {
	display: flex; flex-direction: column; gap: 12px;
	padding: calc(28px * var(--s));
	/* Figma's updated card (5059:405, Ziflow round 3 #26): a near-clear fill and a light hairline, no backdrop blur, so
	   the head's glow shows through as designed. The hairline is sampled from Figma's render (about 20% cream). */
	border: 1px solid rgba(247, 238, 221, .2);
	border-radius: 15.64px;
	background: rgba(39, 26, 44, .06);
	color: var(--r-canvas);
}
.r-callout__title { font: 500 28px/1.08 var(--f-secondary); }
.r-callout__body { font: 400 16px/1.2 var(--f-secondary); }
/* Regulatory line under the callouts (copy deck 2026-10-20) */
.r-panel__note { position: relative; width: calc(418px * var(--s)); margin-top: 16px; font: 400 13px/1.4 var(--f-secondary); color: rgba(247, 238, 221, .8); }

/* ---------- Our clinical program (frame 3499:29205) ---------- */
.r-program { position: relative; padding: calc(80px * var(--v)) 0 calc(96px * var(--v)); }
.r-program__inner { width: var(--canvas); max-width: 100%; margin: 0 auto; padding: 0 calc(130px * var(--s)); }
.r-program__eyebrow { color: #7a7a7a; }
.r-program__title { margin-top: calc(14px * var(--v)); color: var(--r-purple); }
.r-program__copy { width: 401px; max-width: 100%; margin-top: calc(21px * var(--v)); font: 400 var(--t-body)/var(--lh-body) var(--f-secondary); color: #4a4a4a; }
/* Cards sit above the FDA band's hands photo, which extends up behind this section (Figma z-order). */
.r-program__cards {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: calc(575px * var(--s)) calc(585px * var(--s));
	grid-template-rows: calc(310px * var(--v)) calc(310px * var(--v));
	gap: calc(20px * var(--v)) calc(20px * var(--s));
	margin-top: calc(49px * var(--v));
}
.r-pcard { position: relative; overflow: hidden; border-radius: 20px; background: center / cover no-repeat; }
.r-pcard--smoking { grid-row: span 2; background-image: url(img/program-smoking-art@2x.jpg); }
.r-pcard--vaping { background-image: url(img/program-vaping-art@2x.jpg); }
.r-pcard--devprogram { background-image: url(img/program-devprogram-art@2x.jpg); }
.r-pcard__link {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	padding: 0 calc(22px * var(--s)) calc(31.38px * var(--v)) calc(32px * var(--s));
	text-decoration: none;
}
.r-pcard--smoking .r-pcard__link { padding-right: calc(39px * var(--s)); padding-bottom: calc(32px * var(--v)); }
/* Card titles: Outfit Regular, as in the Figma instances (37.091 on the tall card, 31.965 on the others). */
.r-pcard__title { max-width: 392px; font: 400 31.965px/1.1 'Outfit', var(--f-secondary); letter-spacing: -0.01em; color: var(--r-dark-purple); }
.r-pcard--smoking .r-pcard__title { font-size: 37.091px; color: #fff; }
/* Title, then a line saying where the card goes (Figma 3586:3514 / 3586:3529): Plus Jakarta 16/1.4, 20px under */
.r-pcard__text { display: flex; flex-direction: column; gap: 20px; }
.r-pcard__body { font: 400 16px/1.4 var(--f-secondary); color: var(--r-dark-purple); }
.r-pcard--smoking .r-pcard__body { color: #fff; }
/* Text colour an editor chose with a card's replacement artwork (Home: card artwork; client 11/3, Ziflow #10). */
.r-pcard.r-card-text--light :is(.r-pcard__title, .r-pcard__body) { color: #fff; }
.r-pcard.r-card-text--dark :is(.r-pcard__title, .r-pcard__body) { color: var(--r-dark-purple); }
.r-pcard__arrow { flex: none; width: 48px; height: 48px; transition: transform .25s ease; }
.r-pcard__link:hover .r-pcard__arrow { transform: translateX(3px); }

.r-btn--canvas-text { color: var(--r-canvas); }
.r-btn--sand-text { color: var(--r-sand); }

/* ---------- FDA band (frame 3499:29283) ---------- */
/* Clipped sideways only: the hands layer is wider than the page, and reaches 235px up behind the program cards
   (z-index 2 there). The band colour starts where the photo has faded into it; above that the page shows through
   the arch. */
.r-fda {
	position: relative; overflow-x: clip;
	min-height: calc(771px * var(--v)); padding-bottom: calc(83px * var(--v));
	background: linear-gradient(transparent calc(733px * var(--v)), #a4a3dc 0);
}
/* Hands photo (1486 × 908 at section y −175, x 0 of the 1440 frame) inside a 3840px-wide image whose side margins
   continue the lilac wall and whose last 38 rows fade into the band colour (REDESIGN-QA.md #59). Figma's arch (a
   4771px circle, apex at section y −235) is a mask, so it keeps its curvature into wide-screen gutters. */
.r-fda__hands {
	position: absolute; z-index: 1;
	top: calc(-235px * var(--v)); left: calc(50% - 1920px * var(--s));
	width: calc(3840px * var(--s)); height: calc(1006px * var(--v));
	background: url(img/fda-hands-wide.webp) 0 calc(60px * var(--v)) / calc(3840px * var(--s)) calc(946px * var(--v)) no-repeat;
	-webkit-mask: radial-gradient(circle calc(2385.5px * var(--s)) at 50% calc(2385.5px * var(--s)), #000 calc(100% - 1px), transparent 100%);
	mask: radial-gradient(circle calc(2385.5px * var(--s)) at 50% calc(2385.5px * var(--s)), #000 calc(100% - 1px), transparent 100%);
}
/* Wide screens (REDESIGN-QA.md #77): every curve follows the 4771px circle 960px each side of centre, as a 1920
   frame shows it, then runs flat at that height (201.69px below the apex). This arch is a mask, so it adds the flat
   runs. --s and --v are 1 here. */
@media (min-width: 1920px) {
	.r-fda__hands {
		-webkit-mask: radial-gradient(circle 2385.5px at 50% 2385.5px, #000 calc(100% - 1px), transparent 100%),
			linear-gradient(#000 0 0) left bottom / 960px calc(100% - 201.69px) no-repeat,
			linear-gradient(#000 0 0) right bottom / 960px calc(100% - 201.69px) no-repeat;
		mask: radial-gradient(circle 2385.5px at 50% 2385.5px, #000 calc(100% - 1px), transparent 100%),
			linear-gradient(#000 0 0) left bottom / 960px calc(100% - 201.69px) no-repeat,
			linear-gradient(#000 0 0) right bottom / 960px calc(100% - 201.69px) no-repeat;
	}
}
/* The cream curves are only 129px deep, so the circle reaches the section's bottom edge 774px from centre. From 1548px
   wide the section grows down by --curve-x (up to 72.69px, the circle's further drop at 960px: a straight ramp that
   always leaves the circle above the edge) and overlaps the next section by as much, so nothing moves. Its gutters
   show the purple; past 1920 the circle leaves through the bottom edge at ±960px and the edge beyond is flat. */
@media (min-width: 1548px) {
	:root { --curve-x: clamp(0px, (100vw - 1548px) * 0.19541, 72.69px); }
	.r-need {
		margin-bottom: calc(-1 * var(--curve-x)); padding-bottom: calc(74px + var(--curve-x));
		overflow: clip; overflow-clip-margin: 4px; /* seam guard, as the inner-page band: the cream runs 4px past the edge */
	}
	.r-need::after { bottom: calc(129px + var(--curve-x) - 4771px); }
	.r-need + .r-approach { margin-top: 0; border-top: 0; background: none; }
}
/* Centred on the page (Figma centres it 9.29px left of centre; treated as a slip, REDESIGN-QA.md). */
.r-fda__content {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: center;
	padding-top: calc(392px * var(--v)); text-align: center; color: var(--r-dark-purple);
}
.r-fda__title { width: 910px; max-width: calc(100% - 48px); font: 600 48px/1 var(--f-primary); }
.r-fda__body { width: 524px; max-width: calc(100% - 48px); margin-top: calc(31px * var(--v)); font: 500 18px/1.4 var(--f-secondary); }
.r-fda__content .r-btn { margin-top: calc(23px * var(--v)); }

/* ---------- The latest (frame 3499:26425) ---------- */
.r-latest__inner { width: var(--canvas); max-width: 100%; margin: 0 auto; padding: calc(112px * var(--v)) calc(130px * var(--s)) calc(72px * var(--v)); }
.r-latest__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.r-latest__title { color: var(--r-purple); }
.r-latest__cards {
	display: grid; grid-template-columns: repeat(4, calc(288px * var(--s))); justify-content: space-between;
	margin-top: calc(40px * var(--v));
	max-width: none; /* the Query Loop's list caps itself at 100%, which would undo the phones' edge-to-edge row */
}
/* Art per position: text-free renders of Figma's cards (progressive blur baked in). Radius 24 on all four (Figma
   card 3 has 20; normalised, REDESIGN-QA.md). */
.r-ncard { position: relative; height: max(calc(462px * var(--v)), 400px); overflow: hidden; border-radius: 24px; background: #e8eae8 center / cover no-repeat; }
.r-ncard--1 { background-image: url(img/news-card1-art.jpg); }
.r-ncard--2 { background-image: url(img/news-card2-art.png); }
.r-ncard--3 { background-image: url(img/news-card3-art.jpg); }
/* Design 4, Periwinkle: the cropped Achieve "A" instead of the large circle (Kait via Alex; Bernarda's Figma 5506:3166, approved
   by Oleg; Ziflow v9 #2). Rendered from the Figma layers: fill, the "A" at 40%, and the fade with its blur. */
.r-ncard--4 { background-image: url(img/news-card4-art-a.jpg); }
/* Design 5, Yellow circles: the Careers card's art, which moved up to The latest's place 4 (client 11/3, Ziflow #70). */
.r-ncard--5 { background: #ffc553 url(img/believers-careers-circles.svg) center / cover no-repeat; }
.r-ncard--5 .r-pill__dot { background: var(--r-dark-purple); }
.r-ncard__link { position: absolute; inset: 0; display: block; text-decoration: none; color: var(--r-dark-purple); }
.r-ncard--1 .r-ncard__link { color: #fff; }
.r-ncard__pills { position: absolute; top: calc(31px * var(--v)); left: calc(25px * var(--s)); right: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
/* Pills: Instrument Sans Medium 10/1.1, as in the Figma instances (REDESIGN-QA.md #38). */
.r-pill {
	display: inline-flex; align-items: center; gap: 8px; height: 27px; padding: 0 16px; border-radius: 64px;
	background: rgba(71, 58, 59, .5);
	font: 500 10px/1.1 'Instrument Sans', var(--f-secondary); letter-spacing: .01em; color: #fff; white-space: nowrap;
}
.r-pill__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--r-yellow); }
.r-ncard--4 .r-pill__dot { background: var(--r-periwinkle); }
.r-ncard__bottom { position: absolute; left: calc(32px * var(--s)); right: calc(15px * var(--s)); bottom: calc(32px * var(--v)); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.r-ncard__title { font: 400 18px/1.2 'Outfit', var(--f-secondary); letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.r-ncard__arrow { width: 48px; height: 48px; transition: transform .25s ease; }
.r-ncard__link:hover .r-ncard__arrow { transform: translateX(3px); }

/* ---------- Quitting needs believers (frame 3499:29298) ---------- */
.r-believers { padding: calc(48px * var(--v)) 0 calc(64px * var(--v)); }
.r-believers__head { width: 670px; max-width: 100%; margin: 0 auto; text-align: center; }
.r-believers__title { color: var(--r-purple); }
.r-believers__copy { margin-top: calc(18px * var(--v)); font: 400 var(--t-body-lg)/var(--lh-body-lg) var(--f-secondary); color: var(--r-dark-purple); }
.r-believers__cards { display: flex; justify-content: center; gap: calc(24px * var(--s)); margin-top: calc(72px * var(--v)); }
.r-bcard {
	position: relative; isolation: isolate; overflow: hidden;
	width: calc(666px * var(--s)); height: calc(741px * var(--v));
	padding: calc(80px * var(--v)) calc(80px * var(--s));
	border-radius: 40px;
}
.r-bcard--invest { background: linear-gradient(168.7386deg, #40214f 21.065%, #271a2c 129.24%); color: var(--r-canvas); }
/* Careers card: the smiling-man photo with a warm arc behind the text (Bernarda's design for Ziflow #70, Figma
   Achieve_Corporate Brand 5270:1586; flattened at 2x from its photo, arc and cut-out layers). Its circles moved to news
   card design 5. */
.r-bcard--careers { background: #ffc553 url(img/believers-careers-photo@2x.jpg) left top / cover no-repeat; color: var(--r-dark-purple); }
/* Back-up without people (#71), chosen on the Home page: the card's earlier yellow circles. */
.r-bcard--careers.r-bcard--careers-circles { background: #ffc553 url(img/believers-careers-circles.svg) 0 0 / 100% 100% no-repeat; }
.r-bcard__art { position: absolute; z-index: -1; left: calc(252px * var(--s)); top: calc(-3px * var(--v)); width: calc(708.45px * var(--s)); height: calc(745.23px * var(--v)); }
.r-bcard__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Each card: its small line, then the headline (Bernarda's update 11/4, Figma 5506:3274). Figma's Invest column is
   364, but our display face sets "filings, and what's" on one line there and runs into the cream stripe: 290 gives
   Figma's breaks ("Financials, / filings, and / what's ahead.") clear of it. */
.r-bcard--invest .r-bcard__text { width: calc(290px * var(--s)); }
.r-bcard--careers .r-bcard__text { width: min(287px, 100%); }
.r-bcard__small { font: 400 var(--t-body-lg)/var(--lh-body-lg) var(--f-secondary); }
.r-bcard--careers .r-bcard__big { max-width: 241px; }
.r-bcard__text .r-btn { margin-top: 16px; }
/* Small desktops (1024-1199) scale the cards but not the 48px headlines, which then reach the Invest stripe and the
   Careers photo: a step down keeps both clear. */
@media (min-width: 1024px) and (max-width: 1199.98px) { .r-bcard .r-bcard__big { font-size: 40px; } }
/* ...and the smallest phones (under 360), where the 36px phone size still reaches the stripe. */
@media (max-width: 359.98px) { .r-believers .r-bcard .r-bcard__big { font-size: 30px; } }

/* ---------- Footer (instance 3614:3915) ---------- */
.r-footer { background: var(--r-purple); color: var(--r-canvas); }
.r-footer__inner { width: var(--canvas); max-width: 100%; margin: 0 auto; padding: calc(72px * var(--v)) calc(130px * var(--s)) calc(28px * var(--v)); }
/* Logo lockup (group 3599:3593, 605.1 × 371.49): gradient circle, wordmark over it, live tagline. Positions are
   percentages of the lockup so it can shrink to fit phones; the tagline (52px) shrinks with it there. */
/* Narrower than the column by the ™'s width on each side, so the ™ after the logo stays inside the page margin. */
.r-footer__brand { container-type: inline-size; position: relative; width: min(605.1px, 100% - 48px); aspect-ratio: 605.1 / 371.49; margin: 0 auto; }
.r-footer__brand > * { position: absolute; display: block; }
.r-footer__circle { left: 19.393%; top: 0; width: 61.213%; height: 100%; }
.r-footer__logo { left: 0; top: 28.127%; width: 100%; height: 31.675%; }
/* The ™ after the logo's "Rx", level with its top (client call 10/27). */
.r-footer__tm { left: 100%; top: 27.5%; margin-left: .15em; font: 500 min(24px, 3.966cqw)/1 var(--f-primary); }
.r-footer__tagline { left: 0; right: 0; top: 69.073%; font: 500 min(52px, 8.594cqw)/1.06 var(--f-primary); letter-spacing: -0.03em; text-align: center; }
.r-footer__columns { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: start; gap: calc(40px * var(--v)) calc(24px * var(--s)); margin-top: calc(76.75px * var(--v)); }
/* Tablet and up (REDESIGN-QA.md #87): one row on an eight-column grid, each address two columns wide and Social and
   the page links one each (half an address). Phones keep their own layout (below). */
.r-footer__col--address { grid-column: span 2; }
.r-footer__col--social, .r-footer__col--nav { grid-column: span 1; }
/* Headings: Web/Button in a 24px row; lines: Body Small. Rows 3px apart (Figma's Vancouver column has 0; normalised). */
.r-footer__heading { display: block; height: 24px; margin-bottom: 3px; font: 600 14px/16px var(--f-secondary); }
.r-footer__col address { display: flex; flex-direction: column; gap: 3px; }
.r-footer__col address, .r-footer__list { font: 400 var(--t-body-sm)/var(--lh-body-sm) var(--f-secondary); }
.r-footer__list { display: flex; flex-direction: column; gap: 3px; }
.r-footer a { text-decoration: none; }
.r-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.r-footer__nav a { display: block; height: 24px; padding: 0 0 8px; font: 600 14px/16px var(--f-secondary); }
.r-footer__bar {
	display: flex; justify-content: space-between; gap: 24px;
	margin-top: calc(44.76px * var(--v)); padding-top: 18px; border-top: 1px solid var(--r-canvas);
	font: 400 var(--t-caption)/var(--lh-caption) var(--f-secondary);
}
.r-footer__legal { display: flex; gap: 14px; white-space: nowrap; }

/* =====================================================================================================
   Tablet (768–1023, fixed 768 canvas) and mobile (<768, fluid). No Figma frames exist for these sizes:
   Claude proposes, Keegan reviews (REDESIGN-QA.md #45). Every layout call is logged in REDESIGN-QA.md.
   ===================================================================================================== */
@media (max-width: 1023.98px) {
	/* Sections are size containers so art and type can be sized from the content width (cqw). */
	.r-main > section, .r-footer { container-type: inline-size; }

	/* ---------- Header pill + hamburger (concept Option B) ---------- */
	.r-header { top: 16px; left: 16px; right: 16px; width: auto; height: 56px; padding: 0 6px 0 22px; transform: none; }
	.r-header.is-hidden { transform: translateY(calc(-100% - 24px)); }
	.r-header__nav { display: none; }
	.r-burger {
		position: relative; display: flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
	}
	.r-burger::before, .r-mmenu__close::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--r-sand); }
	.r-burger__lines { position: relative; width: 16px; height: 9px; border-top: 2px solid var(--r-dark-purple); border-bottom: 2px solid var(--r-dark-purple); }
	/* The pill grows downward into a rounded translucent panel. */
	.r-mmenu {
		display: block; position: absolute; top: 0; left: 0; right: 0;
		max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
		padding: 8px 6px 22px 22px; border-radius: 28px;
		background: rgba(64, 33, 79, .95); /* brand purple, lighter than the dark purple it was (Alex's feedback, REDESIGN-QA.md #85) */
		-webkit-backdrop-filter: blur(19px); backdrop-filter: blur(19px);
		color: var(--r-canvas);
		animation: r-mmenu-open .3s cubic-bezier(.2, .7, .2, 1) both;
	}
	.r-mmenu[hidden] { display: none; }
	.r-header.is-menu-open::before { opacity: 0; }
	.r-mmenu__top { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 10px; }
	.r-header__logo, .r-mmenu__logo { display: flex; align-items: center; min-height: 44px; line-height: 0; }
	.r-header__logo img, .r-mmenu__logo img { width: 135px; height: 26px; }
	.r-mmenu__close { position: relative; display: flex; width: 44px; height: 44px; margin: -2px 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
	.r-mmenu__close svg { position: relative; display: block; margin: auto; }
	.r-mmenu__list { padding-right: 16px; }
	.r-mmenu__list > li { border-bottom: 1px solid rgba(247, 238, 221, .14); }
	.r-mmenu__list > li:last-child { border-bottom: 0; }
	.r-mmenu__list > li > a, .r-mmenu__link {
		display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
		padding: 11px 0; text-align: left;
		font: 500 26px/1.1 var(--f-primary); color: var(--r-canvas); text-decoration: none;
	}
	/* Parent page link, then the chevron button that opens its sub-list */
	.r-mmenu__row { display: flex; align-items: center; gap: 12px; }
	.r-mmenu__toggle { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; }
	.r-mmenu__list > li.current-menu-item > a,
	.r-mmenu__list > li.current-menu-item > .r-mmenu__row > .r-mmenu__link,
	.r-mmenu__list > li.current-menu-ancestor > .r-mmenu__row > .r-mmenu__link { color: var(--r-yellow); }
	.r-mmenu__chev { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(247, 238, 221, .35); color: var(--r-canvas); }
	.r-mmenu__chev::before {
		content: ''; position: absolute; left: 9.5px; top: 7.5px; width: 7px; height: 7px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
	}
	.r-mmenu__toggle[aria-expanded="true"] .r-mmenu__chev { background: var(--r-yellow); border-color: var(--r-yellow); color: var(--r-dark-purple); }
	.r-mmenu__toggle[aria-expanded="true"] .r-mmenu__chev::before { top: 10.5px; transform: rotate(-135deg); }
	.r-mmenu__sub { margin: 0 0 14px 2px; padding: 0 0 6px 14px; border-left: 2px solid var(--r-yellow); }
	.r-mmenu__sub a {
		display: flex; align-items: center; min-height: 44px;
		font: 500 15px/24px var(--f-secondary); color: rgba(247, 238, 221, .85); text-decoration: none;
	}
	.r-mmenu__sub .current-menu-item > a { color: var(--r-yellow); }
	.r-mmenu__sub--nested { margin: -6px 0 6px; padding-bottom: 0; border-left-color: rgba(247, 238, 221, .2); }
	.r-mmenu__sub--nested a { min-height: 36px; font-size: 14px; }
	.r-mmenu a:hover { text-decoration: underline; text-underline-offset: 4px; }
	.r-mmenu__toggle:hover .r-mmenu__chev { border-color: var(--r-canvas); }

	/* ---------- Hero: content-height, the comp still cropped around the orb (cover), vignette in % of the box ---------- */
	.r-hero { min-height: 0; padding-bottom: 0; }
	.r-hero__still { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; object-position: 50% 32%; }
	.r-hero__video { left: 0; width: 100%; height: 100%; transform: none; object-position: 50% 40%; }
	.r-hero__vignette {
		background: radial-gradient(98.8% 72.2% at 50.1% 36%,
			rgba(45, 22, 54, 0) 71.003%, rgba(45, 22, 54, .47) 79.243%, rgba(45, 22, 54, .68476) 82.765%, #2d1636 88.258%);
	}
	.r-hero__content { gap: 36px; width: var(--canvas); max-width: 100%; margin: 0 auto; padding: 200px var(--m) 260px; }
	.r-hero__title, .r-hero__body { width: auto; max-width: 600px; }
	.r-hero__title { max-width: none; }
	.r-hero__body { max-width: 584px; }
	.r-hero__title { font-size: 80px; letter-spacing: -0.02em; }
	.r-hero__tagline { font-size: 30px; line-height: 1; }

	/* ---------- Medical need: copy, then the bubbles reflowed (25M first and largest), then the curve ---------- */
	.r-need { height: auto; padding-bottom: 120px; }
	.r-need::after { top: auto; bottom: 0; left: 50%; width: 330%; height: auto; aspect-ratio: 1; transform: translate(-50%, calc(100% - 64px)); }
	.r-need__inner { width: var(--canvas); padding: 64px var(--m) 0; }
	.r-need__title { max-width: none; font-size: 44px; }
	.r-need__rule { margin-top: 32px; }
	.r-need__text { width: auto; max-width: 586px; margin-top: 32px; }
	.r-bubbles {
		--sm: 220px; --lg: 360px;
		position: relative; top: auto; left: auto; width: var(--canvas); max-width: 100%; height: auto;
		display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
		margin: 48px auto 0; padding: 0 var(--m);
	}
	.r-bubble {
		position: relative; left: auto; top: auto; width: var(--sm); height: var(--sm);
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55em;
		font-size: calc(var(--sm) * .0727); /* label size; 16px at 220 */
	}
	.r-bubble > span { position: relative; left: auto; right: auto; top: auto; }
	.r-bubble__num { font-size: 3em; line-height: .85; }
	.r-bubble__label { font-size: 1em; white-space: normal; }
	.r-bubble--25m { order: -1; width: var(--lg); height: var(--lg); font-size: calc(var(--lg) * .074); }
	.r-bubble--25m .r-bubble__num { font-size: 3.4em; }
	.r-bubble--18m { order: 1; } .r-bubble--16m { order: 2; } .r-bubble--600b { order: 3; } .r-bubble--8m { order: 4; } .r-bubble--12 { order: 5; }
	.r-bubble--8m::before { opacity: .7; }
	/* "Quitting…": one column; the section's bottom padding already clears the curve */
	.r-quit { width: var(--canvas); margin-top: 48px; padding: 0 var(--m); }
	.r-quit__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 32px; }
	.r-quit__title { font-size: 44px; }
	.r-quit__callout { font-size: 30px; }
	.r-quit__body { gap: 32px; }
	/* 7M+: its long label wraps freely inside the circle */
	.r-bubble--8m { gap: .35em; }
	.r-bubble--8m .r-bubble__num { font-size: 2.4em; }
	.r-bubble--8m .r-bubble__label { max-width: 84%; font-size: .78em; line-height: 1.12; }
	.r-bubble--8m .r-bubble__label br { display: none; }

	/* ---------- Our approach: the panel shows the head art on top, callouts stacked under it ---------- */
	.r-approach { padding: 48px 0 64px; }
	.r-approach__head { width: var(--canvas); padding: 0 var(--m); }
	.r-approach__title { font-size: 64px; }
	.r-approach__copy { margin-top: 24px; }
	/* --pw: panel width (688 on the tablet canvas; the content width on phones). */
	.r-panel {
		--pw: 688px;
		width: var(--pw); min-height: 0; margin-top: 40px;
		padding: calc(var(--pw) * .62) 16px 16px;
		/* The art fades into the panel before it ends, so its bottom edge doesn't cut across the first callout
		   (client feedback 10/26, Ziflow #35). */
		background:
			linear-gradient(rgb(39 26 44 / 0) calc(var(--pw) * .5), #271a2c calc(var(--pw) * .76)) 0 0 / 100% calc(var(--pw) * .78) no-repeat,
			url(img/approach-panel-art@2x.jpg) 78% 0 / auto calc(var(--pw) * .78) no-repeat, #271a2c;
	}
	.r-panel__dots { display: none; }
	.r-panel__callouts { width: auto; gap: 12px; }
	.r-panel__note { width: auto; }
	.r-callout { padding: 24px; }
	.r-callout__title { font-size: 26px; }

	/* ---------- Clinical program: cards stacked full width ---------- */
	.r-program { padding: 56px 0 64px; }
	.r-program__inner { width: var(--canvas); padding: 0 var(--m); }
	.r-program__copy { width: auto; max-width: 401px; margin-top: 16px; }
	.r-program__cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; gap: 16px; margin-top: 32px; }
	.r-pcard { min-height: 300px; }
	.r-pcard--smoking { grid-row: auto; min-height: 420px; background-position: 0 30%; }
	.r-pcard__link { position: absolute; padding: 0 22px 24px 24px; }
	.r-pcard__title { max-width: calc(100% - 64px); font-size: 28px; }
	.r-pcard--smoking .r-pcard__title { font-size: 32px; }

	/* ---------- FDA band: the hands photo (arch top) sits above the copy instead of behind it ---------- */
	/* The section width shows --fda-frame px of the 1440 design frame (centred), so the hands keep their earlier
	   size; the photo starts at the arch's apex and the page shows above the arch, so there is no band-colour strip
	   at the top, and its faded last rows remove the line where it used to end. */
	.r-fda { --fda-frame: 1440; min-height: 0; padding-bottom: 64px; background: linear-gradient(transparent 20vw, #a4a3dc 0); }
	.r-fda__hands {
		position: relative; display: block; top: auto; left: auto; width: 100%;
		height: calc(100cqw * 946 / var(--fda-frame)); margin-bottom: -48px;
		background: url(img/fda-hands-wide.webp) 50% 0 / calc(100cqw * 3840 / var(--fda-frame)) auto no-repeat;
		-webkit-mask: radial-gradient(circle calc(100cqw * 2385.5 / var(--fda-frame)) at 50% calc(100cqw * 2385.5 / var(--fda-frame)), #000 calc(100% - 1px), transparent 100%);
		mask: radial-gradient(circle calc(100cqw * 2385.5 / var(--fda-frame)) at 50% calc(100cqw * 2385.5 / var(--fda-frame)), #000 calc(100% - 1px), transparent 100%);
	}
	.r-fda__content { width: var(--canvas); max-width: 100%; margin: 0 auto; padding: 0 var(--m); }
	.r-fda__title, .r-fda__body { width: auto; max-width: 600px; }
	.r-fda__title { font-size: 40px; }
	.r-fda__body { margin-top: 20px; }
	.r-fda__content .r-btn { margin-top: 24px; }

	/* ---------- The latest: 2 × 2 on tablet, a swipe row on phones ---------- */
	.r-latest__inner { width: var(--canvas); padding: 56px var(--m) 56px; }
	.r-latest__cards { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
	.r-ncard { height: 400px; }
	.r-ncard__pills { top: 24px; left: 20px; }
	.r-ncard__bottom { left: 24px; right: 20px; bottom: 24px; }

	/* ---------- Believers: cards stacked ---------- */
	.r-believers { padding: 56px 0 64px; }
	.r-believers__head { width: var(--canvas); padding: 0 var(--m); }
	.r-believers__copy { font-size: 18px; }
	.r-believers__cards { flex-direction: column; gap: 16px; width: var(--canvas); max-width: 100%; margin: 40px auto 0; padding: 0 var(--m); }
	.r-bcard { width: 100%; height: auto; min-height: 440px; padding: 48px 40px; border-radius: 32px; }
	.r-bcard__art { left: 38%; top: -3px; width: 106%; height: auto; aspect-ratio: 708.45 / 745.23; }
	.r-bcard--careers { background-size: cover; background-position: 30% top; }
	.r-bcard--invest .r-bcard__text, .r-bcard--careers .r-bcard__text { width: min(364px, 62%); }

	/* ---------- Footer ---------- */
	.r-footer__inner { width: var(--canvas); padding: 56px var(--m) 28px; }
	.r-footer__columns { gap: 32px 24px; margin-top: 48px; }
	.r-footer__nav a { padding: 0 0 8px; display: flex; align-items: center; height: 32px; }
	.r-footer__bar { flex-direction: column-reverse; margin-top: 40px; }
	.r-footer__legal { flex-wrap: wrap; gap: 4px 14px; }
	.r-footer__legal a, .r-footer__list a, .r-footer__col address a { display: inline-flex; align-items: center; min-height: 32px; }
	.r-footer__list { gap: 0; }
}

/* Mobile (<768): fluid, 20px margins */
@media (max-width: 767.98px) {
	.r-hero__content { gap: 28px; padding: 140px var(--m) 180px; }
	.r-hero__title { font-size: clamp(44px, 14cqw, 64px); }
	.r-hero__body { max-width: 600px; font-size: 18px; }
	.r-hero__tagline { font-size: 22px; }
	.r-need { padding-bottom: 96px; }
	.r-need__inner { padding-top: 56px; }
	.r-need__title { font-size: clamp(32px, 9.4cqw, 44px); }
	.r-need__lead { font-size: 20px; }
	.r-quit__title { font-size: clamp(32px, 9.4cqw, 44px); }
	.r-quit__callout { font-size: 26px; }
	.r-quit__stats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.r-quit__stats li { font-size: 18px; }
	/* Two small bubbles per row, 25M across the top */
	.r-bubbles { --sm: calc((100cqw - 2 * var(--m) - 12px) / 2); --lg: min(340px, calc(100cqw - 2 * var(--m))); gap: 12px; margin-top: 40px; }
	.r-bubble { font-size: max(13px, calc(var(--sm) * .088)); }
	.r-bubble--25m { font-size: calc(var(--lg) * .07); }
	.r-bubble__label { letter-spacing: -0.01em; }
	/* The widest figure stays inside its circle on the narrowest phones (320). */
	.r-bubble--600b .r-bubble__num { font-size: min(3em, calc(var(--sm) * .25)); }
	.r-approach__title { font-size: clamp(40px, 12cqw, 52px); }
	.r-panel { --pw: calc(100cqw - 2 * var(--m)); }
	.r-callout { padding: 20px; }
	.r-callout__title { font-size: 24px; }
	.r-pcard { min-height: 260px; }
	.r-pcard--smoking { min-height: 380px; }
	.r-pcard__title { font-size: 22px; }
	.r-pcard--smoking .r-pcard__title { font-size: 26px; }
	.r-pcard--devprogram .r-pcard__title { max-width: 62%; }
	.r-fda { --fda-frame: 1241; }
	.r-fda__hands { margin-bottom: -32px; }
	.r-fda__title { font-size: 30px; line-height: 1.05; }
	.r-fda__body { font-size: 16px; }
	/* Swipe row (scroll-snap), next card peeking; Get More News under the cards. */
	.r-latest__head { flex-direction: column; align-items: flex-start; }
	.r-latest__head .r-btn { order: 2; }
	.r-latest__cards {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(280px, 78%);
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin: 24px calc(-1 * var(--m)) 0; padding: 0 var(--m) 4px; scroll-padding-inline: var(--m);
	}
	.r-latest__cards::-webkit-scrollbar { display: none; }
	.r-ncard { height: 420px; scroll-snap-align: start; }
	.r-bcard { min-height: 400px; padding: 36px 24px; }
	.r-bcard__art { left: 38%; width: 130%; } /* the stripe clears "and what's" (as on tablets) */
	.r-bcard--invest .r-bcard__text { width: 58%; }
	.r-bcard .r-bcard__small { white-space: nowrap; } /* "Invest in quitting." and "Make quitting your job." on one line */
	.r-bcard--careers .r-bcard__text { width: 70%; }
	/* Phones: the card is too narrow for the text beside the photo, so the photo sits under the text, its top blended
	   into the arc colour (Bernarda's design for Ziflow #70, adapted). */
	.r-bcard--careers { min-height: 660px; background: linear-gradient(180deg, #f4c26b 0%, #f4c26b 42%, rgba(244, 194, 107, 0) 53%), #f4c26b url(img/believers-careers-photo@2x.jpg) 72% 100% / 105% auto no-repeat; }
	.r-bcard--careers.r-bcard--careers-circles { min-height: 400px; background: #ffc553 url(img/believers-careers-circles.svg) 0 0 / cover no-repeat; }
	.r-bcard .r-bcard__big { font-size: 36px; }
	/* Phones: each address on its own row, then Social and the page links side by side, as before #87. */
	.r-footer__columns { grid-template-columns: 1fr 1fr; }
	.r-footer__col--address { grid-column: 1 / -1; }
	.r-footer__col--social, .r-footer__col--nav { grid-column: auto; }
}

@keyframes r-mmenu-open { from { clip-path: inset(0 0 calc(100% - 56px) 0 round 28px); } to { clip-path: inset(0 0 0 0 round 28px); } }

@media (prefers-reduced-motion: reduce) {
	.redesign *, .redesign *::before, .redesign *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}