/* ==========================================================================
   AlphaDetect theme stylesheet — ported from the Astro build's component styles.
   Tokens (colors/spacing/radius) mirror src/styles/tokens.css; block markup is
   rendered by the AlphaDetect Blocks plugin, so most selectors are unchanged.
   ========================================================================== */

:root {
  --color-gold: #F4BC23;
  --color-purple: #512773;
  --color-purple-deep: #452562;
  --color-ink: #252526;
  --color-border: #D7DDE2;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F7F4F5;
  --color-surface-alt: #F7F4F5;
  --color-teal: #2DBDB4;
  --color-teal-text: #0B7E74;
  --color-link: #004282;
  --color-purple-muted: #907BA5;
  --color-purple-muted-2: #AA9ABD;
  --color-lavender: #D9CFDF;
  --color-muted-text: #6B6276;
  --color-placeholder-bg: #DCE1E1;
  --color-placeholder-ink: #545959;
  --color-wip-flag: #D23B3B;
  --font-sans: 'Outfit Variable', system-ui, -apple-system, sans-serif;
  --space-1: 0.5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 2.5rem; --space-6: 3rem;  --space-8: 4rem;  --space-12: 6rem;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
  --container-max: 1200px;
  --gold-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.48 9.473'%3E%3Cpath d='M2.013,0 0,9.472 12.48,4.627Z' fill='%23F4BC23'/%3E%3C/svg%3E");
}

/* ---- Base (global.css) --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-surface); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg { max-width: 100%; display: block; }
a { color: var(--color-link); }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
.wp-block-image, figure.wp-block-image, .wp-block-table { margin: 0; }
.wp-block-image img { height: auto; }
.wp-block-list { padding-left: 1.25em; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-3); }

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

.skip-link { position: absolute; left: var(--space-2); top: -3rem; z-index: 100; background: var(--color-purple); color: #fff; padding: 0.75rem 1rem; border-radius: var(--radius-sm); transition: top 0.15s ease; }
.skip-link:focus { top: var(--space-2); }

:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }

/* Footnote reference markers (the "Reference marker" text format). */
/* inline-block like the original's <button> markers, so a line may break before a marker. */
a.fn-marker, main a.fn-marker { display: inline-block; color: inherit; text-decoration: underline; font: inherit; line-height: inherit; vertical-align: baseline; }
/* Comma-separated markers (1,2) never wrap apart. Superscripts keep the browser default
   size except where the original sized them down. */
sup:has(.fn-marker) { white-space: nowrap; }
.guidelines-intro sup, .time-dx-main sup, .time-dx-card-title sup { font-size: 0.6em; }
/* Symbol markers (e.g. *) read as plain symbols — no underline. */
a.fn-marker--symbol { text-decoration: none; }
.fn-nowrap { white-space: nowrap; }

/* HCP-gate triggers are buttons (they open the modal, not navigate). */
.hcp-trigger { appearance: none; -webkit-appearance: none; border: 0; font-family: inherit; cursor: pointer; }
/* Gate triggers styled as inline links inherit the surrounding text colour (as the original);
   real links keep the link blue. */
.hcp-trigger.link-button { background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; }
a.link-button { background: none; padding: 0; color: var(--color-link); font: inherit; text-decoration: underline; }
.hcp-trigger.link-button:hover, a.link-button:hover { text-decoration: none; }

/* Gold pill button (the per-component .btn rules collapsed into one). */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.85rem 2rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; font-family: inherit; width: max-content; }
.btn-gold { background: var(--color-gold); color: var(--color-purple-deep); }
.btn-gold:hover { filter: brightness(0.95); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-actions[hidden] { display: none; }

/* "Learn more" / "Show less" — a link-styled disclosure control. */
.learn-more { appearance: none; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; font-weight: 600; color: var(--color-link); cursor: pointer; }
.learn-more-wrap { margin: 0; }

/* Gold triangle bullets shared by several lists. */
.criteria, .drawer-bullets, .card-expand-bullets, .expand-bullets { list-style: none; padding: 0; margin: 0; }
.criteria li, .drawer-bullets li, .card-expand-bullets li, .expand-bullets li { position: relative; padding-left: 1.5rem; }
.criteria li::before, .drawer-bullets li::before, .card-expand-bullets li::before, .expand-bullets li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 0.82rem; height: 0.62rem; background: var(--gold-bullet) no-repeat center / contain; }

/* Plain pages (templates with a visible title). */
.plain-page { padding-block: var(--space-8); }
.plain-page > * + * { margin-top: var(--space-3); }
.plain-page h1 { font-size: 2rem; color: var(--color-purple); }

/* ---- Header -------------------------------------------------------------- */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-block: var(--space-3); }
.site-header .logo { display: inline-flex; text-decoration: none; }
.logo-img { display: block; width: 230px; height: auto; }
.cta-list { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin-left: auto; flex-wrap: wrap; }
.site-header .btn { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.9rem; text-transform: none; letter-spacing: 0; }
.primary-nav { border-top: 1px solid var(--color-border); }
.nav-list { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); list-style: none; padding-block: var(--space-2); }
.nav-list a, .nav-cta-list a, .nav-cta-list button { color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: inherit; padding: 0.55rem 0.95rem; border-radius: var(--radius-sm); min-height: 24px; display: inline-flex; align-items: center; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; background: none; border: 0; font-family: inherit; cursor: pointer; }
.nav-list > li:first-child > a { margin-left: -0.95rem; }
.nav-list > li:last-child > a { margin-right: -0.95rem; }
.nav-list a:hover, .nav-list a:focus-visible, .nav-cta-list a:hover, .nav-cta-list a:focus-visible, .nav-cta-list button:hover, .nav-cta-list button:focus-visible { background: var(--color-purple); color: var(--color-gold); }
.nav-list a.active { background: var(--color-purple); color: var(--color-gold); }
.has-submenu { position: relative; }
.submenu-toggle { appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0.55rem 0.35rem; border-radius: var(--radius-sm); transition: background-color 0.15s ease, color 0.15s ease; }
.submenu-toggle:hover, .submenu-toggle:focus-visible { background: var(--color-purple); color: var(--color-gold); }
.submenu-chevron { transition: transform 0.2s ease; width: 20px; height: 20px; }
.submenu-toggle[aria-expanded='true'] .submenu-chevron { transform: rotate(180deg); }
.submenu { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 50; min-width: 15rem; max-width: 22rem; list-style: none; margin: 0; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); }
.submenu[hidden] { display: none; }
.submenu li + li { margin-top: 2px; }
.submenu a { display: block; margin: 0; white-space: normal; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.35; min-height: 24px; }
.submenu a:hover, .submenu a:focus-visible { background: var(--color-purple); color: var(--color-gold); }
.nav-cta-list { display: none; list-style: none; padding-block: 0 var(--space-2); }
.nav-toggle { display: none; }
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: auto; background: var(--color-purple); border: 0; border-radius: var(--radius-sm); cursor: pointer; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; display: block; width: 22px; height: 2px; background: var(--color-surface); position: relative; }
  .nav-toggle-bars::before { position: absolute; top: -7px; }
  .nav-toggle-bars::after { position: absolute; top: 7px; }
  .cta-list { display: none; }
  .primary-nav { display: none; }
  .primary-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
  .nav-list > li:first-child > a, .nav-list > li:last-child > a { margin-inline: 0; }
  .has-submenu { position: static; }
  .submenu { position: static; border: 0; box-shadow: none; min-width: 0; max-width: none; padding: 0 0 var(--space-1) var(--space-3); }
  .nav-cta-list { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background-color: var(--color-purple-deep); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--color-surface); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--space-6); padding-block: var(--space-8) var(--space-4); }
.footer-brand { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
.site-footer .logo { display: inline-flex; align-self: flex-start; text-decoration: none; }
.footer-wordmark { width: 187px; height: auto; display: block; }
.powered-eyebrow { margin-bottom: var(--space-2); font-weight: 700; }
.footer-a1f { width: 120px; height: auto; display: block; }
.footer-nav ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.footer-nav a, .footer-contact a, .footer-legal a { color: var(--color-surface); }
.footer-nav a { text-decoration: none; font-weight: 600; display: inline-flex; min-height: 24px; align-items: center; }
.footer-nav a:hover { text-decoration: underline; }
.footer-contact { font-size: 0.95rem; display: flex; flex-direction: column; gap: var(--space-1); }
.footer-contact a { font-weight: 700; white-space: nowrap; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.25); padding-block: var(--space-4) var(--space-6); font-size: 0.85rem; }
.footer-legal a { min-height: 24px; display: inline-flex; align-items: center; text-decoration: underline; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- HCP gate modal ------------------------------------------------------ */
.hcp-gate { position: fixed; inset: 0; margin: auto; height: fit-content; padding: 0; border: 0; max-width: min(1040px, 92vw); width: 100%; background: var(--color-purple-deep); color: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 24px 64px rgba(37, 37, 38, 0.4); overflow: visible; }
.hcp-gate::backdrop { background: rgba(37, 37, 38, 0.55); }
.hcp-gate[open] { animation: hcp-gate-in 0.18s ease; }
@keyframes hcp-gate-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hcp-gate-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-6); padding: var(--space-8); }
.hcp-gate-close { position: absolute; top: calc(-1 * var(--space-3)); right: calc(-1 * var(--space-3)); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-purple-deep); border: 2px solid var(--color-surface); color: var(--color-surface); cursor: pointer; }
.hcp-gate-close:hover { background: var(--color-purple); }
.hcp-gate-icon { width: 124px; height: 124px; flex: none; }
.hcp-gate-pre { font-size: 1.15rem; font-weight: 500; margin-bottom: 0.15rem; }
.hcp-gate-q { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.15; margin-bottom: var(--space-4); }
.hcp-gate-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hcp-gate-btn { appearance: none; -webkit-appearance: none; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-height: 44px; padding: 0.7rem 2rem; border-radius: var(--radius-sm); line-height: 1.25; text-align: center; cursor: pointer; }
.hcp-gate-btn-lead { font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; }
.hcp-gate-btn-sub { font-weight: 700; font-size: 1rem; }
.hcp-gate-yes { background: var(--color-gold); color: var(--color-purple-deep); border: 2px solid var(--color-gold); }
.hcp-gate-yes:hover { filter: brightness(0.95); }
.hcp-gate-no { background: transparent; color: var(--color-surface); border: 2px solid var(--color-surface); }
.hcp-gate-no:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 768px) {
  .hcp-gate-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-4); padding: var(--space-6) var(--space-4); }
  .hcp-gate-actions { justify-content: center; }
  .hcp-gate-btn { flex: 1 1 12rem; }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(18rem, 34vw, 29rem); min-height: min(32vw, 27rem); background-color: var(--color-purple-deep); background-size: cover; background-position: center; color: var(--color-surface); overflow: hidden; }
.hero--carousel { display: block; }
.hero-viewport { display: grid; }
.hero-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(18rem, 34vw, 29rem); min-height: min(32vw, 27rem); opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-text { grid-column: 1; min-width: 0; display: flex; align-items: center; padding-block: var(--space-8); padding-left: max(var(--space-3), calc((100vw - var(--container-max)) / 2 + var(--space-3))); padding-right: 0; }
.hero-quote { position: relative; max-width: 47rem; padding-left: 2.75rem; margin: 0; }
.quote-mark { fill: var(--color-gold); display: inline-block; width: 2.06rem; height: auto; }
.quote-open { position: absolute; left: 0; top: -0.3rem; }
.hero-quote blockquote { margin: 0; border: 0; padding: 0; }
.hero-quote blockquote p { margin: 0; font-size: clamp(1.5rem, 3.3vw, 2.625rem); font-weight: 600; line-height: 1.2; }
.quote-end { white-space: nowrap; }
.quote-close { margin-left: 0.5rem; vertical-align: -0.35em; }
.hero-quote figcaption { margin-top: var(--space-4); color: var(--color-gold); display: grid; gap: 0.1rem; font-size: 0.95rem; line-height: 1.3; }
.cite-name { font-weight: 600; }
.hero-photo { grid-column: 2; position: relative; min-width: 0; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 15%; display: block; }
.hero-photo--clip img { object-position: 50% 20%; clip-path: polygon(23.6% 0, 100% 0, 100% 100%, 7.5% 100%); }
.hero--carousel .hero-text { padding-bottom: calc(var(--space-4) + 3.5rem); }
.hero-controls { position: absolute; left: max(var(--space-3), calc((100vw - var(--container-max)) / 2 + var(--space-3))); bottom: var(--space-4); z-index: 2; display: flex; align-items: center; gap: var(--space-2); }
.hero-controls button { -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); color: var(--color-surface); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.hero-arrow, .hero-playpause { width: 2.5rem; height: 2.5rem; }
.hero-controls button:hover { background: rgba(255, 255, 255, 0.25); }
.hero-controls button:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.hero-playpause .icon-play { display: none; }
.hero-playpause.is-paused .icon-pause { display: none; }
.hero-playpause.is-paused .icon-play { display: inline; }
.hero-controls button svg { fill: currentColor; }
.hero-dots { display: flex; align-items: center; gap: 0; }
.hero-dot { width: 1.5rem; height: 1.5rem; background: transparent !important; border: 0 !important; border-radius: 999px; }
.hero-dot span { display: block; width: 0.7rem; height: 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.5); transition: background 0.2s ease; }
.hero-dot:hover span { background: rgba(255, 255, 255, 0.8); }
.hero-dot.is-current span { background: var(--color-gold); }
.hero-dot:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 0; }
.hero--section { grid-template-columns: 65% 35%; min-height: 0; background-color: var(--color-purple); padding-inline: max(var(--space-3), calc((100% - var(--container-max)) / 2 + var(--space-3))); }
.hero--section .hero-photo { position: static; display: flex; align-items: center; justify-content: flex-end; }
.hero--section .hero-photo img { position: static; width: auto; height: 300px; max-width: 100%; }
.hero--section .hero-text { padding-left: 0; padding-block: var(--space-6); }
.hero--section .hero-quote { padding-left: 2.2rem; }
.hero--section .hero-quote blockquote p { font-size: clamp(1.15rem, 2.1vw, 1.6rem); }
.hero--section .quote-mark { width: 1.55rem; }
.hero--section .quote-open { top: -0.15rem; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
@media (max-width: 768px) {
  .hero:not(.hero--carousel), .hero-slide { display: flex; flex-direction: column-reverse; }
  .hero-text { padding-block: var(--space-6); padding-inline: var(--space-3); }
  .hero-photo { position: static; }
  .hero-photo img { position: static; width: 100%; height: auto; }
  .hero-photo--clip { position: static; width: min(80%, 360px); aspect-ratio: 1 / 1; margin: var(--space-6) auto 0; }
  .hero-photo--clip img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center; clip-path: none; aspect-ratio: auto; }
  .hero-quote { max-width: none; }
  .hero-quote blockquote p { font-size: 1.9rem; }
  .hero-controls { position: static; justify-content: center; left: auto; padding: var(--space-3) var(--space-3) 0; }
  .hero-viewport { display: block; }
  .hero-slide { position: absolute; inset: 0; }
  .hero-slide.is-active { position: relative; }
  .hero--carousel .hero-text { padding-bottom: var(--space-6); }
}

/* ---- Section headings (shared 28px medium h2) ---------------------------- */
.mission h2, .earlier h2, .guidelines h2, .whatis h2, .survival h2, .time-dx-main h2, #connector-heading, #access-heading, #basics-heading, #support-heading { font-weight: 500; font-size: 1.75rem; }
.mission h2, .earlier h2, .guidelines h2, .whatis h2, .survival h2, .time-dx-main h2 { line-height: 1.3; }
.mission h2, .earlier h2, .guidelines h2, .whatis h2, .survival h2, .time-dx-main h2, #connector-heading { color: var(--color-ink); }
/* Headings on the purple sections stay white (inherited from the section). */
#access-heading, #basics-heading, #support-heading { color: inherit; }

/* ---- Mission ------------------------------------------------------------- */
.mission { background: var(--color-surface-muted); }
.mission .container { padding-block: var(--space-8); display: grid; gap: var(--space-3); }
.mission p { font-size: 1.05rem; }

/* ---- Powered by ---------------------------------------------------------- */
.powered .container { padding-block: var(--space-6); }
.powered-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; }
.powered-grid .powered-eyebrow { color: var(--color-purple); font-weight: 700; margin-bottom: var(--space-2); }
.powered-logo { width: 240px; max-width: 100%; }
.powered-logo img { width: 100%; height: auto; }
.powered-copy { display: grid; gap: var(--space-3); font-size: 1.05rem; }
@media (max-width: 768px) { .powered-grid { grid-template-columns: 1fr; } }

/* ---- Who to test (guidelines) -------------------------------------------- */
.guidelines { background: var(--color-lavender); }
.guidelines .container { padding-block: var(--space-8); }
.guidelines h2 { margin-bottom: var(--space-3); }
.guidelines-intro { color: var(--color-ink); font-size: 1.05rem; margin-bottom: var(--space-4); max-width: 70rem; }
.guidelines-card { border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--color-gold); }
.org-band { background: var(--color-surface); }
.org-logos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-around; margin: 0; padding: var(--space-3) var(--space-4); }
.org-logos--top { position: relative; }
.org-logos--top::after { content: ''; position: absolute; left: var(--space-6); right: var(--space-6); bottom: 0; height: 2px; background: var(--color-gold); }
.org-logos img { height: auto; max-height: 44px; width: auto; max-width: 100%; }
.org-logos img.boost { max-height: 53px; }
.org-logos img.boost-lg { max-height: 68px; }
.guidelines-body { background: var(--color-surface-muted); padding: var(--space-4); display: grid; gap: var(--space-3); color: var(--color-ink); }
.guidelines-lead { font-weight: 500; }
.criteria { columns: 3; gap: var(--space-4); }
.criteria li { margin-bottom: var(--space-2); break-inside: avoid; }
.card-citation { font-size: 0.85rem; color: var(--color-ink); max-width: 100%; }
.guidelines-body .btn { padding: 0.75rem 2.5rem; text-transform: none; letter-spacing: 0; }
@media (max-width: 768px) {
  .criteria { columns: 1; }
  .org-logos { justify-content: center; gap: var(--space-3); }
}

/* ---- Feature cards (practice access + the 101) --------------------------- */
.access, .basics, .support { background-color: var(--color-purple); background-image: url('../images/large_purple_bg.png'); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; color: var(--color-surface); }
.access .container { padding-block: var(--space-6); }
#access-heading, #basics-heading { text-align: center; margin-bottom: var(--space-8); }
.feature-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
.feature-grid .feature-card { height: 100%; }
.feature-grid--natural { align-items: start; }
.feature-grid--natural .feature-card { height: auto; }
.feature-card { list-style: none; color: var(--color-ink); background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 24px rgba(37, 37, 38, 0.08); display: flex; flex-direction: column; }
.feature-card-top { background: var(--color-surface-muted); display: flex; justify-content: center; padding: 5px var(--space-4); min-height: 94px; }
.feature-icon { width: 84px; height: 84px; }
.feature-card-body { padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.feature-card-body h3 { color: var(--color-purple); font-size: 1.25rem; }
.feature-card-body a { color: var(--color-link); }
/* Inline link-style buttons sit flush left like the links around them. */
.feature-card-body .link-button, .drawer-panel .link-button { justify-self: start; text-align: left; width: auto; }
/* Inline link buttons grouped in one paragraph (one per line). */
.cta-links { margin: 0; }
.access a[href^="tel:"] { white-space: nowrap; }
.footnote { font-size: 0.85rem; margin-top: var(--space-8); margin-inline-end: 0; }
.fn-back { appearance: none; background: none; border: 0; padding: 0; font: inherit; line-height: inherit; vertical-align: baseline; color: inherit; cursor: pointer; text-decoration: none; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .access, .basics, .support { background-image: none; } }

/* The 101 drawers */
.basics { overflow-x: clip; }
.basics .container { padding-block: var(--space-8); }
.drawer { grid-column: 1 / -1; margin-inline: calc(50% - 50vw); background: var(--color-surface); color: var(--color-ink); }
.drawer[hidden] { display: none; }
.drawer:focus, .drawer-inner:focus { outline: none; }
.drawer-inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-8) var(--space-3); }
.drawer-inner h3 { font-weight: 500; font-size: 1.75rem; line-height: 1.3; margin-bottom: var(--space-3); }
.drawer-intro { font-size: 1.05rem; margin-bottom: var(--space-6); max-width: 70rem; }
.drawer-cols { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: var(--space-6); align-items: start; }
.drawer-art img { width: 100%; height: auto; }
.drawer-text { display: grid; gap: var(--space-3); font-size: 1.05rem; }
.drawer-bullets { display: grid; gap: var(--space-2); }
.drawer--panels { background: var(--color-surface-muted); }
.drawer-link, .drawer-panel .link-button { background: none; padding: 0; color: var(--color-link); text-decoration: underline; font-weight: 600; }
.drawer-panels-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.tree-ref-narrow { display: none; }
.drawer-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-3); }
.drawer-panel p { font-size: 1.05rem; }
.drawer-panel .link-button { font-weight: 600; justify-self: start; }
.chart-title { text-align: center; color: var(--color-purple); font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--space-2); }
.chart-img { width: 100%; max-width: 460px; margin-inline: auto; }
.chart-img img { width: 100%; height: auto; }
.allele-note { margin: var(--space-6) 0 var(--space-4); font-size: 1.05rem; }
.allele-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.allele-heading { color: var(--color-purple); font-size: 1.05rem; margin-bottom: var(--space-2); }
.allele-table table { width: 100%; border-collapse: collapse; }
.allele-table td { vertical-align: top; padding: var(--space-2); border: 1px solid var(--color-border); }
.allele-table td:first-child { background: var(--color-gold); color: var(--color-purple-deep); font-weight: 700; text-align: left; white-space: nowrap; width: 1%; }
.affected-card { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-3); }
.affected-title { text-align: center; color: var(--color-purple); font-size: 1.25rem; line-height: 1.3; margin-bottom: var(--space-6); }
.affected-figure { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.affected-left { display: grid; grid-template-rows: 1fr auto; gap: var(--space-4); }
.affected-crowd-wrap { align-self: center; position: relative; padding-inline: 16px; }
.affected-crowd-wrap::before, .affected-crowd-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9px; border: 2px solid var(--color-purple-muted); }
.affected-crowd-wrap::before { left: 0; border-right: 0; }
.affected-crowd-wrap::after { right: 0; border-left: 0; }
.affected-crowd img { width: 520px; max-width: 100%; height: auto; display: block; }
.affected-note { font-size: 0.95rem; color: var(--color-ink); position: relative; }
.affected-note-left { text-align: right; align-self: center; }
.affected-note-right { text-align: left; align-self: center; }
.affected-note-left::after, .affected-note-right::before { content: ''; position: absolute; top: 50%; width: calc(var(--space-4) + 4px); height: 8px; transform: translateY(-50%); background-image: linear-gradient(var(--color-purple-muted), var(--color-purple-muted)), radial-gradient(circle at center, var(--color-purple-muted) 3.5px, transparent 4px); background-repeat: no-repeat, no-repeat; background-size: 100% 2px, 8px 8px; }
.affected-note-left::after { left: 100%; background-position: center, right center; }
.affected-note-right::before { right: 100%; background-position: center, left center; }
.affected-legend { align-self: end; justify-self: start; list-style: none; margin: 0; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: grid; gap: var(--space-2); width: fit-content; max-width: 100%; }
.affected-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; }
.affected-legend img { height: 30px; width: auto; }
.have-card { position: relative; margin: 0 auto var(--space-6); max-width: 80%; container-type: inline-size; }
.have-card-img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.have-card-title { position: absolute; top: 4%; left: 0; right: 0; margin: 0; padding: 0 6%; text-align: center; color: var(--color-surface); font-weight: 500; font-size: clamp(1rem, 2.3cqw, 1.35rem); line-height: 1.3; }
.have-card-title b { font-weight: 700; }
.have-closing { font-size: 1.05rem; margin-bottom: var(--space-6); max-width: 70rem; }
.card-expand { display: grid; gap: var(--space-2); overflow: hidden; }
.card-expand[hidden] { display: none; }
.card-expand:focus { outline: none; }
.card-expand-bullets { display: grid; gap: var(--space-2); }
@media (max-width: 768px) {
  .drawer-cols { grid-template-columns: 1fr; }
  .drawer-art { max-width: 320px; }
  .drawer-panels-2col { grid-template-columns: 1fr; }
  .tree-ref-wide { display: none; }
  .tree-ref-narrow { display: inline; }
  .allele-2col { grid-template-columns: 1fr; }
  .drawer-panel { padding: var(--space-4); }
  .chart-img { max-width: 320px; }
  .affected-figure { display: flex; flex-direction: column; gap: var(--space-4); }
  .affected-left { display: contents; }
  .affected-note-left, .affected-note-right { text-align: left; align-self: start; }
  .affected-legend { align-self: start; }
  .affected-note-left::after, .affected-note-right::before { display: none; }
  .affected-note-left { order: 1; }
  .affected-note-right { order: 2; }
  .affected-crowd-wrap { order: 3; padding-inline: 0; align-self: center; }
  .affected-legend { order: 4; }
  .affected-crowd-wrap::before, .affected-crowd-wrap::after { display: none; }
}

/* ---- Why earlier detection matters (homepage) ---------------------------- */
.earlier { background: var(--color-surface); }
.earlier .container { padding-block: var(--space-8); }
.earlier h2 { margin-bottom: var(--space-6); }
.earlier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.stat-figure { position: relative; container-type: inline-size; }
.stat-card { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.stat-caption { position: absolute; top: 0; left: 0; margin: 0; padding: 4.8cqw 6cqw 0; max-width: 92%; color: var(--color-surface); font-size: 4cqw; line-height: 1.3; font-weight: 500; }
.stat-caption b { font-weight: 700; }
.stat-caption .stat-fn { font-size: 0.6em; font-weight: 500; }
.earlier-main h3 { color: var(--color-purple); font-size: 1.1rem; margin-bottom: var(--space-3); }
.earlier-main p { margin-bottom: var(--space-3); font-size: 1.05rem; }
.earlier-main .cta-actions { margin-top: var(--space-4); }
@media (max-width: 768px) { .earlier-grid { grid-template-columns: 1fr; } }

/* ---- Find out more ------------------------------------------------------- */
.find-out { background: var(--color-surface-muted); }
.find-out .container { padding-block: var(--space-6); display: flex; justify-content: center; }
.find-out-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--color-purple); font-weight: 500; font-size: 1.5rem; text-decoration: none; }
.find-out-text b { font-weight: 700; }
.fo-icon { flex: none; display: block; }
.fo-info { width: 46px; height: 46px; }

/* ---- References ---------------------------------------------------------- */
.references .container { padding-block: var(--space-6); }
.ref-list { font-size: 0.85rem; color: var(--color-ink); line-height: 1.6; }
.ref-item { margin-inline-end: 0.4rem; }
.ref-list a { white-space: nowrap; }
.ref-list a.ref-url { white-space: normal; overflow-wrap: anywhere; }
.backlink { appearance: none; background: none; border: 0; padding: 0; font: inherit; line-height: inherit; vertical-align: baseline; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---- What is Alpha‑1 ----------------------------------------------------- */
.whatis { background: var(--color-surface-muted); }
.whatis .container { padding-block: var(--space-8); }
.whatis h2 { margin-bottom: var(--space-4); }
.whatis p { margin-bottom: var(--space-3); font-size: 1.05rem; max-width: 70rem; }
.whatis p:last-child { margin-bottom: 0; }

/* ---- Survival data ------------------------------------------------------- */
.survival { background: var(--color-surface); }
.survival .container { padding-block: var(--space-8); }
.survival h2 { margin-bottom: var(--space-4); }
.survival-intro { color: var(--color-ink); font-size: 1.05rem; margin-bottom: var(--space-4); max-width: 70rem; }
.survival-card { border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--color-gold); }
.survival-banner { background: var(--color-gold); color: var(--color-purple-deep); font-weight: 700; padding: 1rem var(--space-4); margin: 0; }
.survival-body { background: var(--color-surface); padding: var(--space-4); }
.survival-chart-title { color: var(--color-purple); font-weight: 700; font-size: 1.15rem; line-height: 1.3; text-align: center; margin: 0 0 var(--space-3); }
.survival-body img { width: 100%; height: auto; }

/* ---- Time to diagnosis --------------------------------------------------- */
.time-dx { background: var(--color-surface); }
.time-dx .container { padding-block: var(--space-8); }
.time-dx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.time-dx-main h2 { margin-bottom: var(--space-4); }
.time-dx-main p { margin-bottom: var(--space-3); font-size: 1.05rem; }
.time-dx-emphasis { font-weight: 700; }
/* The original keeps the last paragraph's 24px margin here (its `.time-dx-main p` rule
   out-specifies `.time-dx-emphasis`); WordPress's flow-layout CSS would zero it. */
:root .time-dx-main > p:last-child { margin-bottom: var(--space-3); }
.time-dx-card { margin: 0; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(37, 37, 38, 0.08); padding: var(--space-4); }
.time-dx-card-title { color: var(--color-purple); font-weight: 700; font-size: 1.25rem; text-align: center; margin-bottom: var(--space-3); }
.time-dx-card img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) { .time-dx-grid { grid-template-columns: 1fr; } }

/* ---- Detection CTA band -------------------------------------------------- */
.detection-cta { background: var(--color-lavender); color: var(--color-ink); }
.detection-cta .container { padding-block: var(--space-8); }
.detection-cta p { font-size: 1.05rem; max-width: 70rem; margin-bottom: var(--space-6); }

/* ---- Detection connector (sponsors) -------------------------------------- */
.connector { background: var(--color-surface-muted); }
.connector .container { padding-block: var(--space-8); }
#connector-heading { margin-bottom: var(--space-4); }
.connector-intro { font-size: 1.05rem; max-width: 70rem; margin-bottom: var(--space-6); }
.sponsor-logos { list-style: none; margin: 0; padding: var(--space-4) var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sponsor-logos img { height: auto; max-height: 56px; width: auto; max-width: 100%; }
@media (max-width: 768px) { .sponsor-logos { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--space-6); } }

/* ---- Support efforts ----------------------------------------------------- */
.support .container { padding-block: var(--space-8); }
#support-heading { margin-bottom: var(--space-6); }
.support-box { --icon-size: 84px; --content-inset: calc(var(--space-4) + var(--icon-size) + var(--space-3)); background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 24px rgba(37, 37, 38, 0.08); }
.support-head { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-muted); padding: var(--space-3) var(--space-4); }
.support-icon { flex: none; display: block; }
.support-icon img { width: var(--icon-size); height: var(--icon-size); display: block; }
.support-head h3 { color: var(--color-purple); font-size: 1.35rem; }
.support-body { padding: var(--space-4) var(--space-4) var(--space-6) var(--content-inset); display: grid; gap: var(--space-3); }
.support-body p { font-size: 1.05rem; margin: 0; }
.support-body p a { color: var(--color-link); }
.support-body .cta-actions { margin-top: var(--space-2); }
.support-expand { display: block; overflow: hidden; }
.support-expand[hidden] { display: none; }
.support-expand:focus { outline: none; }
.expand-box { margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.expand-item + .expand-item { border-top: 1px solid var(--color-border); }
.expand-item-head { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-muted); padding: 5px var(--space-4); }
.expand-glyph-wrap { flex: none; color: var(--color-purple); display: flex; }
.expand-glyph { display: block; height: 44px; width: auto; }
.expand-item-head h4 { color: var(--color-purple); font-size: 1.1rem; }
.expand-item-body { padding: var(--space-4); display: grid; gap: var(--space-3); }
.expand-item-body p { font-size: 1.05rem; margin: 0; }
.expand-bullets { display: grid; gap: var(--space-2); }
.expand-bullets li { font-size: 1.05rem; }
.kit-cards { margin-top: var(--space-3); display: grid; gap: var(--space-6); }
.kit-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.kit-card-head { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-muted); padding-inline: var(--space-4); }
.kit-card-title { align-self: center; color: var(--color-purple); font-size: 1.1rem; margin: 0; padding-block: var(--space-2); }
.kit-card-cols { display: grid; grid-template-columns: minmax(0, 240px) 1fr; align-items: stretch; }
.kit-col-left { padding: var(--space-4); }
.kit-col-right { padding: var(--space-4); border-left: 1px solid var(--color-border); }
.kit-col-left h5, .kit-material-body h5 { color: var(--color-purple); font-size: 1rem; margin-bottom: var(--space-2); }
.kit-box { width: 100%; max-width: 200px; margin-block: var(--space-2); }
.kit-box img { width: 100%; height: auto; }
.kit-included { color: var(--color-purple); font-weight: 700; margin-bottom: var(--space-3); }
.kit-materials { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.kit-material { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); align-items: start; }
.kit-material--pair { grid-template-columns: 160px 1fr; }
.kit-thumb-pair { display: flex; gap: var(--space-2); }
.kit-thumb-pair .kit-thumb-link[data-zoom] { width: auto; }
.kit-thumb-pair .kit-thumb-link[data-zoom] .kit-thumb { width: auto; height: 130px; }
.kit-thumb { width: 140px; height: 80px; object-fit: contain; object-position: center; }
.kit-thumb--flip { transform: scaleX(-1); }
.kit-thumb--small { transform: scale(0.8); }
.kit-thumb-link { display: inline-block; width: 140px; border-radius: var(--radius-sm); cursor: pointer; }
.kit-thumb-link .kit-thumb { display: block; }
.kit-thumb-link[data-zoom] { cursor: zoom-in; position: relative; padding: 2px; border: 2px solid var(--color-purple); background: var(--color-surface); }
.kit-thumb-link[data-zoom] .kit-thumb { width: 100%; }
.kit-thumb-link[data-zoom]::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%23512773'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='4.3'/%3E%3Cline x1='13.8' y1='13.8' x2='18' y2='18'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }
.kit-thumb-link:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 2px; }
.kit-card-group > .cta-actions { margin-top: var(--space-3); }
@media (max-width: 600px) {
  .support .container { padding-inline: 0; }
  #support-heading { padding-inline: var(--space-3); }
  .support-body { padding: var(--space-3); }
  .kit-card-cols { grid-template-columns: 1fr; }
  .kit-col-left, .kit-col-right { padding: var(--space-3); }
  .kit-col-right { border-left: 0; }
  .kit-material { grid-template-columns: 1fr; gap: var(--space-1); }
  .kit-material-body { display: contents; }
  .kit-material-body h5 { order: -1; }
  .kit-material-body .expand-bullets { order: 1; }
}

/* ---- About: team sections ------------------------------------------------ */
.about-team .container { padding-block: var(--space-8); }
.about-team + .about-team .container { padding-top: 0; }
.about-team h2 { color: var(--color-ink); font-size: 2rem; margin: 0 0 var(--space-4); }
.team-intro { max-width: 70rem; margin-bottom: var(--space-2); }
.team-intro p { line-height: 1.6; margin: 0 0 var(--space-4); }
.team-intro p:last-child { margin-bottom: 0; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 0; align-items: stretch; }
.team-grid > .person { padding-block: var(--space-6); border-bottom: 1px solid var(--color-lavender); }
.team-grid.is-live > .person { transition: top 0.35s ease; }
.person { box-sizing: border-box; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.person-photo { width: 150px; height: 150px; object-fit: cover; object-position: top; display: block; border-radius: var(--radius-sm); }
.person-body { min-width: 0; }
.person-name { color: var(--color-purple); font-size: 1.25rem; line-height: 1.2; margin: 0; }
.person-tagline { color: var(--color-purple); font-weight: 700; margin: var(--space-2) 0 var(--space-3); }
.person-bio p { margin: 0 0 var(--space-3); color: var(--color-ink); line-height: 1.55; }
.person-bio p:last-child { margin-bottom: 0; }
.read-more, .read-less { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--color-link); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.read-more:hover, .read-less:hover { text-decoration: none; }
.read-more:focus-visible, .read-less:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; border-radius: 2px; }
.bio-full:focus { outline: none; }
.bio-full[hidden], .bio-preview[hidden] { display: none; }
@media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .person { grid-template-columns: 1fr; gap: var(--space-3); }
  .person-photo { width: 120px; height: 120px; }
}

/* ---- Resources ----------------------------------------------------------- */
.res-lead .container { padding-block: var(--space-8) var(--space-4); }
.res-lead-text { color: var(--color-ink); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.25; max-width: 40rem; }
.rsection .container { padding-block: var(--space-3); }
.rsection-panel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.rsection-head { background: var(--color-surface-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.rsection-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--color-purple); font-size: 1.6rem; font-weight: 700; scroll-margin-top: var(--space-6); }
.rsection-title img { display: inline-block; }
.head-logo { width: auto; }
.head-logo--ad { height: 0.85em; }
.head-logo--a1f { height: 2em; }
.rsection-body { padding: clamp(var(--space-3), 4vw, var(--space-8)); }
.rgroup + .rgroup { margin-top: var(--space-8); }
.rpill { display: inline-block; background: var(--color-purple); color: #fff; font-size: 1.2rem; font-weight: 700; padding: 0.55rem 1.4rem; border-radius: 999px; margin-bottom: var(--space-4); }
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-3), 3vw, var(--space-6)); align-items: stretch; }
.rcard { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 2px 14px rgba(37, 37, 38, 0.08); overflow: hidden; height: 100%; }
.rcard-thumb { display: flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-4) 0; }
.rcard-thumb img { width: auto; height: auto; max-width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius-sm); }
.rcard-thumb.is-placeholder { padding-top: var(--space-6); }
.tk { display: flex; align-items: center; justify-content: center; width: 150px; height: 210px; background: var(--color-placeholder-bg); color: var(--color-placeholder-ink); border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.04em; }
.rcard-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.rcard-eyebrow { color: var(--color-muted-text); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.rcard-title { color: var(--color-purple); font-weight: 700; font-size: 1.35rem; line-height: 1.25; }
.rcard-title a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rcard-title a:hover { text-decoration-thickness: 2px; }
.rcard-desc { color: var(--color-ink); font-size: 1.05rem; }
.rcard-desc p { margin-top: 0; }
.rcard-desc strong { font-weight: 700; }
.rcard-foot { margin-top: auto; padding-top: var(--space-2); }
.rcard-pages { color: var(--color-muted-text); font-size: 1rem; margin-bottom: var(--space-2); }
.rcard-pages:has(+ .rcard-access) { margin-bottom: 0.25rem; }
.rcard-access { color: var(--color-muted-text); font-size: 0.9rem; line-height: 1.4; }
.rcard-download { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; color: var(--color-link); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-decoration: none; }
.rcard-download:hover span { text-decoration: underline; }
.rcard-download svg { flex: none; }
.a1f-intro { max-width: 68rem; margin-bottom: var(--space-8); }
.a1f-intro p { font-size: 1.1rem; margin-bottom: var(--space-3); }
.a1f-contact { line-height: 1.7; }
.a1f-contact a { color: var(--color-link); }
.res-callout { display: flex; align-items: center; gap: var(--space-3); background: var(--color-gold); color: var(--color-purple-deep); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-8); }
.res-callout-icon { flex: none; }
.res-callout p { font-size: 1.1rem; }
.res-callout a { color: var(--color-purple-deep); font-weight: 700; }
@media (max-width: 900px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .rgrid { grid-template-columns: 1fr; }
  .rsection-title { font-size: 1.3rem; }
  .res-callout { flex-direction: column; align-items: flex-start; }
}

/* FAQ accordion */
.faq-list { list-style: none; margin: 0; padding: 0; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-list > li:last-child .faq-item { border-bottom: 0; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; min-height: 44px; cursor: pointer; list-style: none; color: var(--color-ink); font-weight: 700; font-size: 1.2rem; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q-text { flex: 1; }
.faq-chevron { flex: none; color: var(--color-purple); transition: transform 0.2s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-a { padding: 0 0 var(--space-3); max-width: 62rem; }
.faq-a p { margin: 0 0 var(--space-2); font-size: 1.1rem; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--color-link); }
.faq-a .faq-bullets { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.faq-a .faq-bullets li { position: relative; padding-left: 1.75rem; margin-bottom: var(--space-2); font-size: 1.1rem; }
.faq-a .faq-bullets li::before { content: ''; position: absolute; left: 0; top: 0.5em; border-style: solid; border-width: 0.4em 0 0.4em 0.6em; border-color: transparent transparent transparent var(--color-gold); }
.faq-a .faq-dashes { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.faq-a .faq-dashes li { position: relative; padding-left: 1.25rem; margin-bottom: 0.25rem; font-size: 1.1rem; }
.faq-a .faq-dashes li::before { content: '–'; position: absolute; left: 0; color: var(--color-ink); }
.faq-a .faq-placeholder { color: var(--color-wip-flag); font-weight: 700; }
@media (max-width: 600px) { .faq-q { font-size: 1.05rem; } }

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hcp-gate[open] { animation: none; }
}

/* ---- Block editor only --------------------------------------------------- */
.editor-styles-wrapper .hero--editor { display: block; padding: var(--space-4); }
.editor-styles-wrapper .hero--editor .hero-slide { position: relative; opacity: 1; visibility: visible; margin-bottom: var(--space-3); }
.editor-styles-wrapper .hero--editor .hero-photo img { position: static; height: auto; max-height: 320px; width: auto; clip-path: none; }
.editor-styles-wrapper .hero--editor .cite-title-input textarea { background: transparent; color: var(--color-gold); border: 1px dashed rgba(255,255,255,.4); font: inherit; }
.editor-styles-wrapper .hero--editor .hero-text { padding-left: var(--space-3); }
.editor-styles-wrapper .ad-panel-label { color: var(--color-muted-text); }
.editor-styles-wrapper .hero--editor .ad-panel-label { color: rgba(255,255,255,.8); }
.editor-styles-wrapper .drawer { margin-inline: 0; border: 1px dashed var(--color-border); }
.editor-styles-wrapper .support-expand, .editor-styles-wrapper .card-expand, .editor-styles-wrapper .bio-full { border: 1px dashed var(--color-border); padding: var(--space-2); }
.editor-styles-wrapper .site-header .cta-list { gap: var(--space-2); }
.editor-styles-wrapper .cta-button-wrap { display: inline-block; }
.editor-styles-wrapper .rpill--empty { background: transparent; color: var(--color-muted-text); border: 1px dashed var(--color-border); }
.editor-styles-wrapper .hcp-gate-editor__box { background: var(--color-purple-deep); color: #fff; padding: var(--space-3); border-radius: var(--radius-md); }
.editor-styles-wrapper .hcp-gate-editor__box .ad-editor-note { color: rgba(255,255,255,.8); }
/* Hero slides stack on one grid cell on the front end; lay them out one after
   another while editing so every quote is visible and editable. */
.editor-styles-wrapper .hero--editor .hero-viewport { display: block; }
.editor-styles-wrapper .hero--editor .hero-slide { grid-area: auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); min-height: 0; border-bottom: 1px dashed rgba(255,255,255,.35); padding-bottom: var(--space-3); }
.editor-styles-wrapper .hero--editor .hero-text { padding-block: var(--space-4); padding-bottom: var(--space-4); }
.editor-styles-wrapper .hero--editor .hero-photo { position: relative; }