/*
Theme Name: Panacea Adviser
Theme URI: https://wp.panaceaadviser.com
Description: WordPress FSE block theme for Panacea Adviser
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Author: DA Group
Text Domain: panacea-adviser
*/

/* =================================================
   DESIGN TOKENS
================================================= */

:root {
  --navy-950: #1a1040;
  --navy-900: #2d1b69;
  --navy-800: #3d2380;

  --pink-500: #cc3399;
  --pink-400: #e879f9;

  --turquoise-700: #3f9897;
  --turquoise-500: #53b0ae;
  --turquoise-400: #6bc0be;
  --turquoise-100: #d9f0ef;

  --ink-900: #1f2937;
  --ink-800: #334155;
  --ink-700: #475569;
  --ink-600: #64748b;
  --ink-500: #94a3b8;

  --line: #e2e8f0;
  --white: #ffffff;
  --bg: #f8fafc;

  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 14px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.22);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --container: 1280px;
  --transition: 0.22s ease;
}

/* =================================================
   RESET & BASE
================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink-900);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

img,
video,
svg {
  max-width: 100%;
  display: block;
}

/* WP FSE site layout */
.wp-site-blocks {
  padding-top: 68px; /* compensate for fixed nav */
}

/* MyPanacea member-shell pages use their own sticky (not fixed) topbar via
   parts/member-header.html, not the main fixed nav — cancel the
   compensation above or member pages get a 68px empty gap at the top.
   body.mp-shell is added by the template_redirect gate in functions.php
   for any page whose template ("mypanacea-member") is the MyPanacea
   customTemplate. */
body.mp-shell .wp-site-blocks {
  padding-top: 0;
}

/* =================================================
   LAYOUT
================================================= */

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

main {
  padding-top: 0;
}

.section {
  padding: 32px 0 34px;
  /* Fix 4 (30 July 2026) — pill-nav anchor targets (Adviser Business, Events,
     Press Centre, Legal Notices, Become a Partner, About) had no scroll-
     margin-top at all, so a pill click landed the section flush behind the
     fixed topbar (68px) + sticky .post-hero-pills bar (81px) = 149px of
     obstruction. 190px clears both with ~40px of breathing room above the
     heading. Also respected by JS scrollIntoView() (Events/Insights/Partners
     filter pills), not just native #hash anchor jumps. */
  scroll-margin-top: 190px;
}

/* Fix 5 (30 July 2026) — Insights/Partners filter-pill results containers
   aren't wrapped in .section (different section classes), so they need their
   own scroll-margin-top matching Fix 4's value for the JS scrollIntoView()
   added in interactions.js to clear the fixed nav + sticky pill bar. */
#partnersGrid {
  scroll-margin-top: 190px;
}

/* Fix 5 (30 July 2026) — the Insights filter pill row (8 category pills)
   wraps to 2 rows, making .post-hero-pills 131px tall there vs 81px on
   single-row pill bars (Partners, the anchor-nav pages) — so #feedTop needs
   a taller scroll-margin-top than the shared 190px (68px topbar + 131px
   2-row pill bar = 199px of obstruction; 240px clears it with ~40px gap,
   matching the buffer used elsewhere). overflow-anchor:none additionally
   opts this container out of Chrome's scroll-anchoring adjustments, since
   its content is replaced via innerHTML shortly after the scroll fires
   (initInsightsFeedAll) and lazy-loaded card images decoding afterwards
   were nudging the settled scroll position a few px short. */
#feedTop {
  scroll-margin-top: 240px;
  overflow-anchor: none;
}

/* Design-grid wp:columns fix (client-review fix, 17 July 2026): every one of
   these classes already has its own correct `display: grid; grid-template-
   columns: ...` rule further down this file, but WP's block-supports CSS
   (`body .is-layout-flex{display:flex}`, specificity 0,1,1) was overriding
   it — the theme's original single-class rules (e.g. `.team-grid{display:
   grid}`, specificity 0,1,0) tie on class-count and lose to `body` adding an
   element to the WP rule's specificity. Pairing the block's own
   `.wp-block-columns` class with the design class (0,2,0) beats it outright,
   regardless of source order. One rule, all affected pages: About
   (team-grid/intro-split/quotes-grid), Sign Up (benefits-grid), Become a
   Partner (audience-stats-band), Press Centre (topics-grid/contact-grid/
   resources-grid). Each class's own column-count/gap/proportions are
   untouched — this only restores `display: grid` so they apply. */
.wp-block-columns.team-grid,
.wp-block-columns.intro-split,
.wp-block-columns.quotes-grid,
.wp-block-columns.benefits-grid,
.wp-block-columns.audience-stats-band,
.wp-block-columns.topics-grid,
.wp-block-columns.contact-grid,
.wp-block-columns.resources-grid {
  display: grid;
}

/* =================================================
   TYPOGRAPHY
================================================= */

p,
li {
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.6;
}

p {
  margin: 0;
}

/* .eyebrow.eyebrow / .label.label — WS9: doubled class raises specificity to
   (0,2,0) on purpose. Block-converted eyebrows render as
   <p class="eyebrow wp-block-paragraph"> (raw markup uses <span
   class="eyebrow">); every wrapper that styles its own child paragraphs
   generically — .section-header p, .benchmark-copy p, .signup-form-card p,
   etc. — carries selector specificity (0,1,1), which used to beat plain
   .eyebrow (0,1,0) and made converted eyebrows render as oversized slate body
   text instead of the small turquoise caption. Bumping .eyebrow itself once,
   here, fixes every wrapper at once (verified across About/Sign-Up/Become a
   Partner/Press Centre) instead of exempting each wrapper's `p` rule one by one. */
.eyebrow.eyebrow,
.label.label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--turquoise-500);
  margin-bottom: 10px;
}

.editorial-category,
.editorial-readtime {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-header {
  margin-bottom: 16px;
}

.section-header h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 700;
}

.section-header p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* =================================================
   LINKS
================================================= */

.inline-link,
.editorial-readmore,
.events-link,
.events-link-bottom {
  transition: color var(--transition), transform var(--transition);
}

.inline-link,
.editorial-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--turquoise-700);
  font-size: 14px;
  font-weight: 600;
}

.inline-link:hover,
.editorial-readmore:hover {
  color: var(--pink-500);
}

.editorial-readmore .arrow {
  transition: transform var(--transition);
}

.editorial-readmore:hover .arrow {
  transform: translateX(3px);
}

/* =================================================
   BUTTONS
================================================= */

.btn,
.btn-light,
.ask-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    color var(--transition),
    filter var(--transition);
}

.btn {
  background: var(--pink-500);
  color: #fff;
  border: 1px solid var(--pink-500);
  box-shadow: 0 10px 20px rgba(204, 51, 153, 0.24);
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Fix 2 (30 July 2026) — green on-site-action button. Additive modifier
   (used alongside .btn, e.g. class="btn btn--primary") so the ~170 existing
   .btn-styled external "Read more"/"Find out more" links embedded in
   imported article content — which must stay pink — are untouched; only
   buttons that opt in with this class turn green. Placed after .btn so it
   wins the cascade at equal specificity. */
.btn--primary {
  background: var(--turquoise-500);
  color: #fff;
  border: 1px solid var(--turquoise-500);
  box-shadow: 0 10px 20px rgba(83, 176, 174, 0.24);
}

.btn--primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-light {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}

.btn-light:hover {
  background: var(--pink-500);
  border-color: var(--pink-500);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(204, 51, 153, 0.25);
}

.ask-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
}

.ask-pill:hover {
  background: rgba(83, 176, 174, 0.14);
  border-color: rgba(107, 192, 190, 0.38);
  transform: translateY(-1px);
}

.ask-pill__icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--turquoise-400);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ask-pill:hover .ask-pill__icon {
  transform: scale(1.12);
}

/* WP button block overrides — reset wrapper div, apply styles only to inner link */
.wp-block-button.btn,
.wp-block-button.btn-light,
.wp-block-button.btn--primary {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: unset;
}

.wp-block-button.btn .wp-block-button__link {
  background: var(--pink-500);
  color: #fff;
  border: 1px solid var(--pink-500);
  box-shadow: 0 10px 20px rgba(204, 51, 153, 0.24);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition), filter var(--transition);
}

.wp-block-button.btn .wp-block-button__link:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Fix 2 (30 July 2026) — green on-site-action button, block-editor wrapper
   variant (class lives on the wrapping div per WP button-block behaviour).
   Placed after .wp-block-button.btn's __link rule so it wins the cascade
   when both classes are present (class="btn btn--primary"). */
.wp-block-button.btn--primary .wp-block-button__link {
  background: var(--turquoise-500);
  color: #fff;
  border: 1px solid var(--turquoise-500);
  box-shadow: 0 10px 20px rgba(83, 176, 174, 0.24);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition), filter var(--transition);
}

.wp-block-button.btn--primary .wp-block-button__link:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.wp-block-button.btn-light .wp-block-button__link {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.wp-block-button.btn-light .wp-block-button__link:hover {
  background: var(--pink-500);
  border-color: var(--pink-500);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(204, 51, 153, 0.25);
}

/* =================================================
   CARDS
================================================= */

.card,
.list-card,
.feature-card,
.tool-card,
.cta-band {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.feature-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.12);
}

.list-card,
.feature-card,
.tool-card,
.event-mini-card,
.event-feature-card,
.editorial-item {
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}

.list-card:hover,
.feature-card:hover,
.tool-card:hover {
  transform: translateY(-1px);
  border-color: rgba(204, 51, 153, 0.35);
  box-shadow: var(--shadow-sm);
}

/* =================================================
   NAVIGATION
================================================= */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 68px;
  background: rgba(26, 16, 64, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-inner {
  height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  line-height: 0;
}

.brand img {
  display: block;
  height: 68px;
  width: auto;
  max-height: 68px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 0;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 68px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 14px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--turquoise-400), var(--turquoise-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Events nav dropdown (WS-B5 item 114, 30 July 2026) — "Recorded Webinars"
   sub-item. .nav-dropdown-toggle inherits base link look via .nav-links a
   (the toggle is itself an <a>, so it stays in the normal tab/underline flow);
   only the caret + flyout menu are new. */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 68px;
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  opacity: .7;
  transform: translateY(1px);
  transition: opacity var(--transition);
}

.nav-dropdown:hover .nav-caret {
  opacity: 1;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% - 8px);
  left: -18px;
  min-width: 200px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(26, 16, 64, .98);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 120;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  height: auto;
  padding: 11px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.nav-dropdown-menu a::after {
  display: none;
}

.nav-dropdown-menu a:hover {
  background: rgba(83, 176, 174, .14);
  color: #fff;
  transform: translateX(2px);
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}

.nav-hamburger:hover { background: rgba(255, 255, 255, 0.14); }

.nav-hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav-menu {
  background: rgba(26, 16, 64, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0 24px;
}

.mobile-nav-menu[hidden] { display: none; }

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav-links a {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--transition), padding-left var(--transition);
}

.mobile-nav-links a:last-child { border-bottom: 0; }

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
  color: #fff;
  padding-left: 6px;
}

/* Recorded Webinars sub-item under Events (WS-B5 item 114) — indented, no
   hover flyout on mobile (nothing to hover), so it's a plain nested link. */
.mobile-nav-links a.mobile-nav-sublink {
  padding-left: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.mobile-nav-links a.mobile-nav-sublink:hover {
  padding-left: 22px;
}

.mobile-nav-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mobile-nav-cta .btn,
.mobile-nav-cta .btn-light,
.mobile-nav-cta .ask-pill {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 120px;
}

/* =================================================
   HERO
================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(83, 176, 174, 0.16), transparent 26%),
    radial-gradient(circle at 18% 82%, rgba(204, 51, 153, 0.12), transparent 24%),
    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  padding: 24px 0 72px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 30%);
  pointer-events: none;
}

.hero .container {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Inner-page hero (all pages except home) */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(83, 176, 174, 0.16), transparent 26%),
    radial-gradient(circle at 18% 82%, rgba(204, 51, 153, 0.12), transparent 24%),
    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  padding: 24px 0 72px;
}

.page-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.page-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.page-hero p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 18px;
  line-height: 1.7;
  max-width: 44ch;
}

.hero-leaderboard {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 8px 0 36px;
}

/* WS7.9 — .hero-leaderboard is now the first direct child of the .container
   group block on the home hero; WP's block-gap zeroes margin-block-start on
   is-layout-flow first-children, which silently ate the intended 8px top
   gap. Scoped to .hero only (not .page-hero) — inner-page heroes are a
   separate existing conversion, out of scope here. */
.hero .hero-leaderboard {
  margin-block-start: 8px;
}

.leaderboard-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Fix 1 (30-Jul feedback): as a flex item this shrink-wrapped to the ad
     creative's intrinsic aspect ratio (640x79 gif -> 714.9px slot). Force the
     wrapper to the full row so .leaderboard-ad always renders its intended
     728x90; object-fit:cover scales any creative to fill. */
  width: 100%;
}

.leaderboard-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.leaderboard-ad {
  width: 100%;
  max-width: 728px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  display: block;
  transition: transform var(--transition), box-shadow var(--transition);
}

.leaderboard-ad:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.leaderboard-ad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: block;
  /* WS7.9 — .hero-grid is now the 2nd direct child of the .container group
     block (after the wp:html ad slot); WP's default block-gap injects
     margin-block-start:24px on non-first is-layout-flow children, which the
     original raw HTML never had. Zero it so the hero-copy stack keeps its
     original vertical position exactly. */
  margin-block-start: 0;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  min-height: 205px;
}

.hero h1 {
  margin: 24px 0 0;
  color: #fff;
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  font-weight: 800;
  white-space: nowrap;
}

.hero h1 .accent {
  background: linear-gradient(135deg, #e879f9 0%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 20px;
  line-height: 1.65;
  max-width: 34ch;
}

/* WS7.9 — home-hero pattern conversion: native wp:heading / wp:paragraph
   blocks render as .wp-block-heading / .wp-block-paragraph; mirror the
   .hero h1 / .hero p rules above so the block-editor markup is targeted
   directly, matching the .page-hero .wp-block-heading convention. */
.hero .hero-copy .wp-block-heading {
  margin: 24px 0 0;
  color: #fff;
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  font-weight: 800;
  white-space: nowrap;
}

.hero .hero-copy .wp-block-heading .accent {
  background: linear-gradient(135deg, #e879f9 0%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* :not(.hero-eyebrow) keeps this from overriding the eyebrow pill, which is
   also a .wp-block-paragraph (WP adds that class to every paragraph block) —
   see .page-hero p.hero-eyebrow above for the same interaction elsewhere. */
.hero .hero-copy p.wp-block-paragraph:not(.hero-eyebrow) {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 20px;
  line-height: 1.65;
  max-width: 34ch;
}

.hero-wave,
.page-wave {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  line-height: 0;
  color: var(--bg);
}

.hero-wave svg,
.page-wave svg {
  display: block;
  width: 100%;
  height: 64px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 600;
  margin-bottom: 22px;
}

/* When eyebrow is a <p> (native wp:paragraph block), reset paragraph defaults
   that would otherwise override the inline-flex eyebrow styling. */
p.hero-eyebrow {
  margin-top: 0;
  max-width: none;
}

/* Dot via ::before — replaces the <span class="hero-eyebrow-dot"> */
p.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquoise-400);
  box-shadow: 0 0 14px rgba(107, 192, 190, 0.65);
  flex-shrink: 0;
}

/* Override .page-hero p specificity (0,1,1) for colour, max-width and font-size —
   .page-hero p's 18px body-copy font-size otherwise beats .hero-eyebrow alone (WS1.1) */
.page-hero p.hero-eyebrow {
  color: rgba(255, 255, 255, 0.80);
  max-width: none;
  margin-top: 0;
  font-size: 12px;
}

/* WS7.9 — same fix as .page-hero p.hero-eyebrow above, for the home hero.
   .hero p's 20px font-size (0,1,1) otherwise beats .hero-eyebrow alone (0,1,0)
   now that the home eyebrow is a <p> (native paragraph block) too. Unlike
   .page-hero p (margin-top only), .hero p sets the `margin` SHORTHAND
   (18px 0 0), which also zeroes margin-bottom — so it must be restored
   explicitly here or the eyebrow loses its 22px gap above the H1. */
.hero p.hero-eyebrow {
  color: rgba(255, 255, 255, 0.80);
  max-width: none;
  margin: 0 0 22px;
  font-size: 12px;
}

/* Keep span-based dot working for PHP-rendered partner heroes */
.hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquoise-400);
  box-shadow: 0 0 14px rgba(107, 192, 190, 0.65);
  flex-shrink: 0;
}

/* =================================================
   POST-HERO PILLS
================================================= */

#featured-article,
#ask-panacea-tool,
#upcoming-events {
  scroll-margin-top: 170px;
}

.post-hero-pills {
  position: sticky;
  top: 68px;
  z-index: 90;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  padding: 24px 0 16px;
  margin-bottom: 12px;
}

.post-hero-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.post-hero-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.post-hero-pill:hover {
  background: #f6f3fb;
  border-color: #ddd6fe;
  color: #6b5b95;
  transform: translateY(-1px);
}

.post-hero-pill.active {
  background: rgba(83, 176, 174, 0.12);
  border-color: rgba(83, 176, 174, 0.18);
  color: var(--turquoise-700);
}

/* =================================================
   EDITORIAL / ARTICLES
================================================= */

.editorial-section {
  padding-top: 28px;
  margin-top: 4px;
}

.editorial-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: stretch;
}

.editorial-lead {
  min-width: 0;
  height: 290px;
}

.editorial-lead-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 4px 0;
  transition: transform var(--transition);
}

.editorial-lead-link:hover {
  transform: translateY(-1px);
}

.editorial-lead h2 {
  margin: 0 0 8px;
  color: var(--ink-900);
  transition: color var(--transition), transform var(--transition);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.editorial-lead-link:hover h2,
.editorial-lead:hover h2 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.editorial-lead p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 48ch;
}

.editorial-lead .featured-intro {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
}

.editorial-lead-link:hover .editorial-readmore {
  color: var(--pink-500);
}

.editorial-lead-link:hover .editorial-readmore .arrow {
  transform: translateX(3px);
}

.editorial-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.editorial-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  line-height: 1;
}

.editorial-category::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.35);
  flex-shrink: 0;
}

.editorial-readtime {
  color: var(--ink-600);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.editorial-ad {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.editorial-ad-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ad-label-outside {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  opacity: 0.7;
}

.editorial-ad-box {
  position: relative;
  width: 300px;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}

.editorial-ad-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.editorial-ad-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.editorial-divider {
  margin: 26px 0 6px;
  border-top: 1px solid #dde3ea;
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 34px;
  row-gap: 0;
}

.editorial-item {
  display: grid;
  grid-template-columns: 1fr;
  padding: 22px 0;
  border-top: 1px solid #e4e9f0;
  cursor: pointer;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}

.editorial-grid .editorial-item:nth-child(1),
.editorial-grid .editorial-item:nth-child(2) {
  border-top: 0;
  padding-top: 8px;
}

.editorial-item:hover {
  transform: translateY(-1px);
  background: linear-gradient(to right, rgba(83, 176, 174, 0.025), rgba(255, 255, 255, 0));
}

.editorial-item.has-image {
  display: block;
}

.editorial-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.editorial-item.has-image .editorial-card-link {
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: 20px;
  align-items: start;
}

.editorial-item:not(.has-image) .editorial-card-link {
  display: block;
}

.editorial-thumb {
  width: 100%;
  opacity: 0.94;
  transition: opacity var(--transition);
}

.editorial-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  transition: transform var(--transition);
}

.editorial-item:hover .editorial-thumb {
  opacity: 1;
}

.editorial-card-link:hover .editorial-thumb img {
  transform: scale(1.02);
}

.editorial-copy {
  min-width: 0;
  padding-top: 2px;
}

.editorial-item .editorial-meta-row {
  gap: 10px;
  margin-bottom: 10px;
}

.editorial-item .editorial-category,
.editorial-item .editorial-readtime {
  font-size: 10px;
  letter-spacing: 0.13em;
}

.editorial-item .editorial-category {
  color: var(--ink-600);
}

.editorial-item:not(.has-image) .editorial-copy {
  padding-top: 0;
}

.editorial-item .editorial-readtime {
  color: var(--ink-500);
}

.editorial-item h3 {
  position: relative;
  margin: 0;
  color: var(--ink-900);
  font-size: 19px;
  line-height: 1.42;
  min-height: calc(1.42em * 2);
  letter-spacing: -0.015em;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  transition: color var(--transition);
  max-width: 26ch;
}

.editorial-item.has-image h3 {
  max-width: 24ch;
}

.editorial-item:not(.has-image) h3 {
  max-width: 30ch;
}

.editorial-item h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--turquoise-500);
  transition: width var(--transition);
}

.editorial-card-link:hover h3 {
  color: var(--pink-500);
}

.editorial-card-link:hover h3::after {
  width: 100%;
}

.editorial-copy p {
  margin-top: 10px;
}

.editorial-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  position: relative;
  padding-right: 14px;
}

.editorial-date::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--turquoise-400);
  box-shadow: 0 0 4px rgba(107, 192, 190, 0.25);
}

.editorial-summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 72ch;
}

/* =================================================
   ASK PANACEA
================================================= */

.ask-shell {
  max-width: 1360px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 36px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  padding: 30px 34px 26px;
}

.ask-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.ask-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #f6f3fb;
  border: 1px solid #ddd6fe;
  color: #6b5b95;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px rgba(109, 91, 149, 0.08);
}

.ask-kicker-icon {
  color: var(--turquoise-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ask-kicker-icon svg {
  width: 16px;
  height: 16px;
}

.ask-header p {
  margin: 10px auto 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.6;
  color: #5b6477;
}

/* WS7.3 — inline ask box (article pages, Adviser Business, Events, guides)
   sized to match supplied_files/news-page.html's .ask-shell; the standalone
   Ask Panacea page and home hero use their own larger variants, unaffected. */
.ask-search-wrap {
  display: flex;
  justify-content: center;
}

.ask-search-box {
  width: 100%;
  max-width: 760px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.ask-search-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(83, 176, 174, 0.10);
  color: var(--turquoise-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ask-search-box input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1.4;
  padding: 0 4px;
}

.ask-search-box input::placeholder {
  color: #9aa3b2;
}

.ask-search-btn {
  height: 44px;
  padding: 0 18px;
  flex-shrink: 0;
  border-radius: 14px;
  font-size: 15px;
  background: linear-gradient(135deg, #27b7aa, #37c6b9);
  border: 1px solid transparent;
  box-shadow: 0 10px 20px rgba(39, 183, 170, 0.20);
  color: #fff;
}

.ask-search-btn:hover {
  background: linear-gradient(135deg, #21a99d, #2dbdaf);
}

/* Fix 2 (30 July 2026) — REVERTS WS1.7 (16 July). The Ask Panacea inline box
   button is an on-site action, so per the new sitewide button-colour
   convention (green = on-site action, pink = external) it stays the default
   green (.ask-search-btn gradient above) everywhere, including article pages
   and Adviser Business. Previously WS1.7 made it pink in those two contexts. */

.ask-popular {
  margin-top: 26px;
  text-align: center;
}

.ask-popular-title {
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.ask-popular-links {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.ask-popular-links em {
  font-style: italic;
  color: #5b6477;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ask-popular-links em:hover {
  color: var(--turquoise-500);
}

/* =================================================
   EVENTS (HOME)
================================================= */

.events-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.events-link {
  color: #4b2c78;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.events-link:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

/* Shared graceful empty state (WS5.1) — Home events section + Events page listing */
.events-empty-state {
  grid-column: 1 / -1;
  padding: 40px 24px;
  text-align: center;
  background: rgba(83, 176, 174, 0.06);
  border: 1px dashed rgba(83, 176, 174, 0.35);
  border-radius: var(--radius-lg);
  color: var(--turquoise-700);
  font-size: 16px;
  font-weight: 600;
}

.events-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.event-feature-card {
  min-height: calc(168px * 2 + 18px);
  padding: 24px 26px;
  border-radius: 28px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  box-shadow: var(--shadow-sm);
  color: var(--ink-900);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.event-feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

.event-feature-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.event-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.event-tag-featured {
  background: rgba(204, 51, 153, 0.12);
  color: var(--pink-500);
}

.event-tag-secondary {
  background: rgba(83, 176, 174, 0.12);
  color: var(--turquoise-700);
}

.event-feature-card h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  max-width: 24ch;
  color: var(--ink-900);
}

.event-feature-card:hover h3 {
  color: var(--pink-500);
}

.event-feature-company {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-600);
  font-weight: 600;
}

.event-feature-card p {
  margin-top: 16px;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.65;
  max-width: 54ch;
}

.event-feature-meta {
  display: flex;
  gap: 10px 0;
  flex-wrap: wrap;
  margin-top: 20px;
  color: var(--turquoise-700);
  font-size: 14px;
  font-weight: 600;
}

.event-feature-meta span {
  display: inline-flex;
  align-items: center;
}

.event-feature-meta span:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 12px;
  border-radius: 999px;
  background: var(--turquoise-700);
  flex-shrink: 0;
}

/* Fix 153 (6 Aug batch 2): WP's default emoji margin (.07em) is too small at
   this font-size to read as a gap before the following date/time text. WP
   core's print_emoji_styles() sets margin with !important, so this must
   match !important to win (it already loads after WP core's inline <style>
   in <head>, so the tie-break falls to source order once specificity ties). */
.event-feature-meta img.emoji {
  margin: 0 6px 0 0 !important;
}

.event-feature-btn {
  margin-top: 22px;
  align-self: flex-start;
}

.event-side-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.event-cards {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

.event-mini-card {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 168px;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--shadow-sm);
}

.event-mini-card:hover {
  transform: translateY(-1px);
  border-color: rgba(204, 51, 153, 0.28);
  box-shadow: var(--shadow-md);
}

.event-mini-card:hover h3 {
  color: var(--pink-500);
}

.event-mini-card:hover .event-mini-tag {
  background: rgba(204, 51, 153, 0.10);
  color: var(--pink-500);
}

.event-mini-card:hover .event-mini-tag::before {
  background: var(--pink-500);
  box-shadow: 0 0 8px rgba(204, 51, 153, 0.24);
}

.event-date-box {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-800);
}

.event-date-box strong {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.event-date-box span {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.event-mini-copy h3 {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  font-weight: 600;
}

.event-mini-company {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-600);
  font-weight: 600;
}

.event-mini-copy p {
  margin-top: 10px;
  color: var(--ink-600);
  font-size: 14px;
}

.event-mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(83, 176, 174, 0.14);
  color: var(--turquoise-700);
  font-size: 12px;
  font-weight: 700;
}

.event-mini-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.28);
}

.event-mini-btn {
  min-width: 116px;
  padding-left: 18px;
  padding-right: 18px;
}

.events-link-bottom {
  margin-top: 18px;
  justify-self: end;
  align-self: flex-end;
  font-size: 16px;
  font-weight: 700;
  color: #4b2c78;
}

.events-link-bottom:hover {
  color: var(--pink-500);
  transform: translateX(3px);
}

/* Recorded webinars section */
.recorded-webinars-header {
  margin-bottom: 20px;
}

.recorded-webinars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.recorded-webinar-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorded-webinar-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 12px;
  color: var(--ink-500);
}

.recorded-webinar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--turquoise-700);
  margin-top: 10px;
  transition: color var(--transition), transform var(--transition);
}

.recorded-webinar-link:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

.recorded-webinars-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #4b2c78;
  margin-top: 24px;
  transition: color var(--transition), transform var(--transition);
}

.recorded-webinars-all:hover {
  color: var(--pink-500);
  transform: translateX(3px);
}

/* =================================================
   TOOLS GRID
================================================= */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tool-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  font-weight: 600;
}

.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(83, 176, 174, 0.12);
  color: var(--turquoise-700);
  font-weight: 700;
}

.tool-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.tool-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 6px rgba(107, 192, 190, 0.4);
}

/* =================================================
   CTA BAND
================================================= */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(83, 176, 174, 0.08), rgba(204, 51, 153, 0.05));
  border: 1px solid rgba(83, 176, 174, 0.14);
}

.cta-band__copy {
  max-width: 720px;
}

.cta-band h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 600;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-band__copy .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}

/* =================================================
   MID-PAGE BANNER
================================================= */

.midpage-banner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.midpage-banner-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  opacity: 0.7;
  text-align: center;
}

.midpage-banner {
  display: block;
  width: 100%;
  max-width: 1128px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}

.midpage-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.midpage-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* =================================================
   FOOTER
================================================= */

.footer {
  margin-top: 16px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
  background: transparent;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-600);
  transition: all var(--transition);
}

.footer-social a:hover {
  background: rgba(83, 176, 174, 0.12);
  color: var(--turquoise-700);
  transform: translateY(-1px);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-links-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.footer-links-left {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.footer-links-left a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-600);
  transition: color var(--transition), transform var(--transition);
}

.footer-links-left a:hover {
  color: var(--pink-500);
  transform: translateY(-1px);
}

/* Fix 7 (30 July 2026) — footer bottom-nav highlights the current page in
   pink. .is-current is added by initFooterCurrentPage() in interactions.js. */
.footer-links-left a.is-current {
  color: var(--pink-500);
}

.footer-links-right {
  display: flex;
  align-items: center;
}

.footer-partner-link {
  font-size: 16px;
  font-weight: 700;
  color: #4b2c78;
  transition: color var(--transition), transform var(--transition);
}

.footer-partner-link:hover {
  color: var(--pink-500);
  transform: translateX(3px);
}

/* Fix 7 (30 July 2026) — see .footer-links-left a.is-current above */
.footer-partner-link.is-current {
  color: var(--pink-500);
}

.footer p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-500);
}

/* =================================================
   ARTICLE SINGLE TEMPLATE
================================================= */

.article-header {
  padding: 24px 0 18px;
}

.article-header-inner {
  max-width: 860px;
}

.article-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(83, 176, 174, 0.12);
  border: 1px solid rgba(83, 176, 174, 0.16);
  color: var(--turquoise-700);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* WS-B3 (30 July 2026 feedback, item 96): pill is now a link to /insights/
   filtered to this category — hover affordance matching .post-hero-pill. */
a.article-topic-pill:hover {
  background: rgba(83, 176, 174, 0.2);
  border-color: rgba(83, 176, 174, 0.28);
}

.article-topic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--turquoise-400);
  box-shadow: 0 0 14px rgba(107, 192, 190, 0.65);
  flex-shrink: 0;
}

.article-header h1 {
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 18ch;
}

.article-submeta {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 48px;
  color: var(--ink-600);
  font-weight: 500;
}

.article-submeta-dot {
  color: var(--turquoise-500);
  font-weight: 700;
}

/* Amendments M4 (Save Article): bookmark toggle near the title, rendered
   only for logged-in MyPanacea members — see .mp-save-btn above for the
   card-icon variant (same is-saved state, different chrome). */
.article-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 16px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy-950);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
}
.article-save-btn:hover { border-color: var(--turquoise-500); color: var(--turquoise-700); }
.article-save-btn .mp-save-icon { fill: none; stroke: currentColor; stroke-width: 1.6; }
.article-save-btn.is-saved { background: var(--turquoise-500); border-color: var(--turquoise-500); color: #fff; }
.article-save-btn.is-saved:hover { background: var(--turquoise-700); border-color: var(--turquoise-700); color: #fff; }
.article-save-btn.is-saved .mp-save-icon { fill: currentColor; stroke: none; }
.article-save-btn:disabled { opacity: .6; cursor: not-allowed; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
  padding-bottom: 20px;
}

.article-source {
  position: relative;
  font-weight: 600;
  color: var(--ink-800);
  text-decoration: none;
}

.article-source::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ink-500);
  transition: background var(--transition);
}

.article-source:hover {
  color: var(--pink-500);
}

.article-source:hover::after {
  background: var(--pink-500);
}

.article-content {
  min-width: 0;
}

.article-body {
  max-width: 860px;
}

.article-body .article-intro {
  font-weight: 700;
  color: var(--ink-900);
}

/* Item 212 (Jon, 14 Aug 2026): p and li must be the same size in article and
   guide bodies. The sitewide base is `p, li { font-size: 14px }`, but every
   content-area override lists only `p` — orphaning `li` at 14px against 17px
   body text. Same root cause as item 215 (.partner-copy li), which was flagged
   in a comment further down this file. Font-size/line-height/colour only: the
   `p` rule's `margin: 0 0 18px` would space list items far too widely. */
.article-body li {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-800);
}

.article-body p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-800);
  margin: 0 0 18px;
  max-width: 72ch;
}

.article-body h2 {
  margin: 36px 0 12px;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 700;
}

.article-body > *:last-child {
  margin-bottom: 0;
}

.section-divider,
hr.wp-block-separator.is-style-section-divider {
  width: min(100%, 860px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(83, 176, 174, 0.35), transparent);
  margin: 12px auto 24px;
}

hr.wp-block-separator.is-style-section-divider {
  border: none;
  border-radius: 0;
}

/* =================================================
   POLICY CARDS (LEGAL NOTICES)
================================================= */

.policy-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 30px;
}

.policy-card h3 {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.policy-card h4 {
  margin: 26px 0 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy-900);
  font-weight: 700;
}

.policy-card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink-700);
}

.policy-card ul {
  margin: 0 0 16px 20px;
  padding: 0;
  color: var(--ink-700);
}

.policy-card li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.7;
}

.policy-card p:last-child,
.policy-card ul:last-child {
  margin-bottom: 0;
}

.policy-meta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(83, 176, 174, 0.16);
  font-size: 14px;
  color: var(--ink-600);
  font-weight: 600;
}

.article-aside {
  position: sticky;
  top: 92px;
  margin-top: -220px;
  width: 300px;
  max-width: 300px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.article-ad-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.article-ad-box {
  width: 100%;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}

.article-ad-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.article-ad-box img,
.article-ad-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recommended-card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.recommended-header {
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.recommended-header h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink-900);
}

.recommended-list {
  display: flex;
  flex-direction: column;
}

.recommended-list .editorial-item {
  display: block;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.recommended-list .editorial-item.has-image {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
}

.recommended-list .editorial-item:first-child {
  border-top: none;
}

.recommended-list .editorial-thumb {
  width: 64px;
  flex-shrink: 0;
}

.recommended-list .editorial-thumb img {
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

.recommended-list .editorial-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.recommended-list .editorial-readtime {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.recommended-list h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-900);
}

.recommended-list .editorial-item:hover h3 {
  color: var(--pink-500);
}

.download-box {
  margin-top: 34px;
  padding: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.download-box h3 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 700;
}

.download-box p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* Item 106 (31 July 2026) — Guide sign-in box, replaces the bottom
   "Download the PDF" CTA on panacea_guide single pages. Reuses .download-box
   (already-extracted, previously-unused design CSS) as the card shell. */
.signin-box .eyebrow {
  display: block;
}

.signin-box-form {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
}

.signin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.signin-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
}

.signin-field input {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 2px;
  font-size: 15px;
  color: var(--ink-900);
  font-family: inherit;
  width: 100%;
}

.signin-field input:focus {
  outline: none;
  border-bottom-color: var(--turquoise-500);
}

.signin-box-submit {
  align-self: flex-start;
  margin-top: 4px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}

.signin-box-links {
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  color: var(--ink-700);
}

.signin-box-links a {
  color: var(--turquoise-700);
  font-weight: 600;
  text-decoration: none;
}

.signin-box-links a:hover {
  text-decoration: underline;
}

.article-cta-stack {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 860px;
}

.article-partner-btn {
  align-self: flex-start;
  background: var(--turquoise-500);
  border: 1px solid var(--turquoise-500);
  box-shadow: 0 10px 20px rgba(83, 176, 174, 0.20);
  color: #fff;
  margin: 0;
}

.article-partner-btn:hover {
  background: var(--turquoise-700);
  border-color: var(--turquoise-700);
  filter: none;
}

/* =================================================
   PARTNER SINGLE TEMPLATE
================================================= */

.partner-hero {
  padding: 42px 0 24px;
}

.partner-hero-copy {
  max-width: 980px;
}

.partner-hero-content {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.partner-logo {
  margin: 0;
  /* Item 120 interim (Jon 2026-08-10): logos have white baked into the PNGs, so
     present them in a DELIBERATE white panel matching the /partners/ listing
     cards (.partner-card) and the partner dashboard — instead of a ragged white
     rectangle on the tinted page. Revisit if Sarah supplies transparent logos. */
  /* Item 211 (13 Aug batch 2): was content+padding-sized (inline-flex with no
     explicit dimensions), so panel footprint varied with each PNG's aspect
     ratio (e.g. wide Rathbones logo -> 418x84 panel vs portrait-ish BNY/BGI/
     Artemis/LV= -> 298x162). Fixed size so every panel matches; box-sizing:
     border-box + these dimensions exactly contain the existing 360x120 max
     image box (below) plus this rule's own padding/border, so no visual
     change for logos that were already at the max — only the panel footprint
     is now constant regardless of source aspect ratio. object-fit: contain
     (below) keeps images undistorted within the fixed box. */
  box-sizing: border-box;
  width: 418px;
  height: 162px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 28px;
  box-shadow: var(--shadow-sm);
}

.partner-logo img {
  max-width: 360px;
  max-height: 120px;
  object-fit: contain;
  display: block;
}

.partner-hero-actions {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.partner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}

/* When a partner has no Adviser support cards, the main column goes full width. */
.partner-layout--no-aside {
  grid-template-columns: minmax(0, 1fr);
}

.partner-section + .partner-section {
  margin-top: 34px;
}

.partner-section .section-header h2 {
  margin-bottom: 14px;
}

.partner-main {
  min-width: 0;
}

.partner-aside {
  position: sticky;
  top: 92px;
  align-self: start;
  width: 300px;
  max-width: 300px;
}

/* Item 170 (6 Aug 2026) — was one long white box wrapping every card, making
   the support-card stack read as a single container. Panel chrome (bg,
   border, shadow, radius, clipping) removed so each .support-card below
   renders as its own separate card on the page background; the panel is now
   a plain layout wrapper. */
.partner-support-panel {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
}

.partner-support-header {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.partner-support-header h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink-900);
}

.partner-support-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.support-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.support-card:hover {
  transform: translateY(-2px);
  border-color: rgba(204, 51, 153, 0.28);
  box-shadow: var(--shadow-md);
}

.support-meta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(83, 176, 174, 0.12);
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}

.support-meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 6px rgba(107, 192, 190, 0.35);
  transition: background var(--transition);
}

.support-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  font-weight: 700;
  transition: color var(--transition);
}

.support-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 34ch;
}

.support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.support-link:hover {
  color: var(--pink-500);
}

.support-card:hover h3 {
  color: var(--pink-500);
}

.support-card:hover .support-meta {
  background: rgba(204, 51, 153, 0.12);
  color: var(--pink-500);
}

.support-card:hover .support-meta-dot {
  background: var(--pink-500);
}

.support-card:hover .support-link {
  color: var(--pink-500);
}

.partner-copy p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
}

.partner-copy p:last-child {
  margin-bottom: 0;
}

/* Item 215 (13 Aug batch 2) — root cause: the sitewide base rule "p, li"
   (top of this file) sets 14px/1.6, and .partner-copy only overrode <p>, not
   <li> — so any bullet list in a partner's overview content fell through to
   the 14px base while sibling paragraphs rendered at 16px. Matches the
   .partner-copy p treatment above. (Same gap likely exists on article pages
   — .article-body p vs no .article-body li — flagged separately, not fixed
   here.) */
.partner-copy li {
  font-size: 16px;
  line-height: 1.8;
}

.partner-insight-list {
  display: grid;
  gap: 0;
}

.partner-insight-item {
  border-top: 1px solid #d7dce3;
  padding: 18px 0;
  transition: transform var(--transition);
}

.partner-insight-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.partner-insight-item:hover {
  transform: translateY(-1px);
}

.partner-insight-item h3 {
  position: relative;
  margin: 0 0 6px;
  color: var(--ink-900);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
  transition: color var(--transition);
}

.partner-insight-item:hover h3 {
  color: var(--pink-500);
}

.partner-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.event-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-500);
}

.event-card:hover h3 {
  color: var(--pink-500);
}

.event-card:hover .event-link {
  color: var(--pink-500);
}

/* WS5.6 — scoped overrides so the shared .event-card/.event-date/.event-tag
   class names render the approved partner-page card treatment without being
   clobbered by (or clobbering) the Events-page/Home versions of the same
   classes elsewhere in this file. */
.partner-events-grid .event-card {
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 14px;
}

.partner-events-grid .event-date {
  width: 64px;
  min-width: 64px;
  height: auto;
  display: block;
  border-radius: 12px;
  background: rgba(83, 176, 174, 0.12);
  border: none;
  box-shadow: none;
  padding: 10px 6px;
  text-align: center;
}

.partner-events-grid .event-day {
  font-size: 18px;
  color: var(--turquoise-700);
}

.partner-events-grid .event-month {
  font-size: 10px;
  color: var(--turquoise-700);
}

.partner-events-grid .event-tag-pill.partner-event-type {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(83, 176, 174, 0.12);
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.partner-events-grid .event-content h3 {
  margin: 8px 0 4px;
  font-size: 16px;
  line-height: 1.3;
}

.partner-events-grid .event-company {
  font-size: 12px;
  margin-bottom: 4px;
}

.partner-events-grid .event-meta {
  font-size: 12px;
  gap: 6px 0;
}

.partner-events-grid .event-link {
  font-size: 13px;
  margin-top: 8px;
}

.event-action {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.section-link-row {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #4b2c78;
  transition: color var(--transition), transform var(--transition);
}

.section-link:hover {
  color: var(--pink-500);
  transform: translateX(3px);
}

.partner-bottom-cta {
  padding: 0 0 10px;
}

/* =================================================
   PARTNERS ARCHIVE — GRID & CARDS
================================================= */

.single-panacea_partner {
  background: linear-gradient(90deg, #f4effa 0%, #f8fafc 55%, #ffffff 100%);
}

.partner-hero .hero-eyebrow {
  background: rgba(83, 176, 174, 0.12);
  border: 1px solid rgba(83, 176, 174, 0.25);
  color: var(--ink-700);
}

.partners-grid-section {
  padding: 10px 0 32px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 6px;
  gap: 16px;
}

.partner-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.partner-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500); /* Fix 6 (30 July 2026) — was turquoise, missed from WS1 pink hover */
  box-shadow: var(--shadow-md);
}

.partner-card img {
  max-width: 95%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partners-empty {
  display: none;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink-600);
  font-size: 14px;
}

/* =================================================
   ABOUT PAGE — STATS, TEAM, QUOTES
================================================= */

/* =================================================
   ABOUT PAGE
================================================= */

.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 32px;
  align-items: stretch;
}

.intro-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
}

.intro-card p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-700);
  max-width: 72ch;
}

.intro-card p:last-child {
  margin-bottom: 0;
}

.intro-highlight {
  background: linear-gradient(135deg, #edf6f5 0%, #dff1ef 52%, #cfe9e6 100%);
  border: 1px solid rgba(83, 176, 174, 0.18);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.intro-highlight--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scale-band {
  border-radius: 24px;
  padding: 30px;
  background:
    radial-gradient(circle at 82% 18%, rgba(83, 176, 174, 0.14), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f7fbfb 58%, #edf7f6 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  box-shadow: var(--shadow-sm);
}

.scale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.scale-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* Fix 6 (30 July 2026) — About "Our Community" stat cards had no hover at
   all; add the standard pink-outline hover. */
.scale-stat:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

.scale-stat strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  margin-bottom: 8px;
}

.scale-stat span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
  font-weight: 600;
}

.scale-source {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 14px;
}

.scale-copy {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 78ch;
}

.team-experience-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f3fbfa 55%, #e6f5f4 100%);
  border: 1px solid rgba(83, 176, 174, 0.18);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(83, 176, 174, 0.12);
  margin-bottom: 34px;
}

.team-exp-stat {
  font-size: 42px;
  font-weight: 800;
  color: var(--turquoise-500);
  letter-spacing: -0.02em;
}

.team-exp-content h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--ink-900);
  line-height: 1.25;
}

.team-exp-content p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-700);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.team-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

/* .team-role.team-role — WS9: same specificity-bump technique as .eyebrow
   above. The job-title line renders as <p class="team-role
   wp-block-paragraph"> in the block-converted team-grid, so the generic
   .team-card p rule (0,1,1) was out-specifying plain .team-role (0,1,0) and
   rendering job titles as body-copy grey instead of the small turquoise
   caption style. */
.team-role.team-role {
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--turquoise-700);
  margin-bottom: 8px;
}

.team-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

.team-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.team-linkedin {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(83, 176, 174, 0.16);
}

.team-linkedin a {
  font-size: 14px;
  font-weight: 600;
  color: var(--turquoise-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition), transform var(--transition);
}

.team-linkedin a:hover {
  color: var(--pink-500);
  transform: translateX(3px);
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* WS7.8 — .testimonial-card sits inside a .wp-block-column grid item; the
   column stretches to the row height by default but the card doesn't fill
   it unless told to, so cards with less text end up shorter. */
.quotes-grid .wp-block-column {
  height: 100%;
}

.testimonial-card {
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-500);
}

.testimonial-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
  flex: 1;
}

.quote-mark {
  font-size: 34px;
  line-height: 1;
  color: var(--turquoise-500);
  font-weight: 800;
}

.quote-attribution {
  padding-top: 14px;
  border-top: 1px solid rgba(83, 176, 174, 0.16);
  /* client-review fix, 17 July 2026 — .testimonial-card is display:flex with
     its own gap:16px; WP's is-layout-flow block-gap CSS still injects
     margin-block-start:24px on this (3rd) flex child on top of that gap
     (flex items don't collapse margins), stacking to ~40px instead of the
     design's 16px. Design never declared a margin here — only the flex gap
     + this padding-top/border-top divider — so zero it explicitly. */
  margin-block-start: 0;
}

.quote-attribution strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}

.quote-attribution span {
  display: block;
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.5;
}

/* =================================================
   FORMS (CONTACT, SIGNUP, PARTNER)
================================================= */

.contact-layout {
  display: flex;
  justify-content: center;
}

.contact-form-wrap {
  width: 100%;
  max-width: 720px;
  padding: 28px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}

.card-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(63, 152, 151, 0.82);
  margin-bottom: 10px;
}

.contact-form-wrap h2,
.contact-form-wrap .wp-block-heading {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 700;
}

.contact-form-intro {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-700);
  max-width: 65ch;
}

.contact-form-preview {
  display: grid;
  gap: 18px;
}

/* WPForms overrides */
.contact-form-wrap .wpforms-container {
  margin: 0;
}

.contact-form-wrap .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Items 132/133 (31 July 2026). Root-caused via live inspection, not guessed:
   (132) WPForms' own base CSS gives every .wpforms-field 15px 0 padding on
   top of our 18px grid gap, doubling the visual gap between rows — zero it
   out and let the grid gap alone control row spacing.
   (133) WPForms' "medium" field-size class caps inputs/selects at
   max-width:60% of their column (measured 193px of a 322px column) — the
   design's fields fill the full column width, so force 100%. */
.contact-form-wrap .wpforms-field-container > .wpforms-field {
  padding: 0 !important;
}

.contact-form-wrap .wpforms-field-medium {
  max-width: 100% !important;
}

/* Row pairing per supplied_files/contact-us.html's .form-row layout (client
   review, 17 July 2026 — WPForms Lite has no row-layout field, so pairing is
   done here per field-container ID). Field-ID -> field-name map for form
   2566, correct as of this session (re-check in WPForms admin if fields are
   reordered/added/removed — that changes these IDs):
     1 Name | 2 Company | 3 Email | 4 Telephone Number | 5 Reason for
     contacting (select) | 6 Comments (textarea) | 7 Agreement (GDPR
     checkbox). WPForms also renders a honeypot anti-spam field inline with
     a randomised numeric ID/position/label on every request — no CSS
     needed for it (see note below), and it's excluded from this map since
     it has no stable ID. */
#wpforms-2566-field_1-container { grid-column: 1; } /* Name */
#wpforms-2566-field_2-container { grid-column: 2; } /* Company */
#wpforms-2566-field_3-container { grid-column: 1; } /* Email */
#wpforms-2566-field_4-container { grid-column: 2; } /* Telephone Number */
#wpforms-2566-field_5-container, /* Reason for contacting */
#wpforms-2566-field_6-container, /* Comments */
#wpforms-2566-field_7-container { /* Agreement */
  grid-column: 1 / -1;
}

/* NOTE (client review, 17 July 2026): initially misread as a duplicate/leftover
   field from the WS6 form build — it isn't. It's WPForms' own honeypot
   anti-spam field (randomised numeric ID/DOM position/label on every
   request, e.g. "Agreement Email contacting", "Company Name (optional)").
   WPForms already hides it itself via an inline `style="position:absolute
   !important;overflow:hidden !important;height:1px !important;width:1px
   !important;z-index:-1000 !important"` — inline !important beats anything
   in this stylesheet, so no CSS override was needed or added here (a
   `display:none` attempt was tried and confirmed to have zero effect,
   exactly because of that inline !important — removed again). Real users
   never see it; no action needed. Confirmed same mechanism on all 3 forms. */

.contact-form-wrap .wpforms-field-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-800) !important;
  margin-bottom: 8px !important;
}

.contact-form-wrap input,
.contact-form-wrap select,
.contact-form-wrap textarea {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--ink-900) !important;
  box-shadow: none !important;
  font: inherit !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.contact-form-wrap input,
.contact-form-wrap select {
  height: 48px !important;
  padding: 0 14px !important;
}

.contact-form-wrap textarea {
  min-height: 160px !important;
  padding: 14px !important;
  resize: vertical !important;
}

.contact-form-wrap input::placeholder,
.contact-form-wrap textarea::placeholder {
  color: var(--ink-500) !important;
}

.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus {
  outline: none !important;
  border-color: var(--turquoise-400) !important;
  box-shadow: 0 0 0 3px rgba(83, 176, 174, 0.12) !important;
}

.contact-form-wrap .wpforms-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Item 135 (31 July 2026) — right-align "Send Message" per
   supplied_files/contact-us.html's .contact-submit-row (flex justify-end);
   overridden back to full-width/centred on mobile below (760px rule). */
.contact-form-wrap .wpforms-submit-container {
  padding-top: 6px !important;
  margin-top: 0 !important;
  text-align: right !important;
}

/* Fix 2 (30 July 2026) — "Send Message" is an on-site action, so per the new
   button-colour convention it's green, not pink (was pink before). */
.contact-form-wrap .wpforms-submit {
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--turquoise-500) !important;
  border-radius: 12px !important;
  background: var(--turquoise-500) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 20px rgba(83, 176, 174, 0.24) !important;
  cursor: pointer !important;
  transition: transform var(--transition), filter var(--transition) !important;
}

.contact-form-wrap .wpforms-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.contact-form-wrap .wpforms-error {
  font-size: 12px !important;
  margin-top: 6px !important;
}

/* WPForms GDPR / plain checkbox (agreement) field */
.contact-form-wrap .wpforms-field-gdpr-checkbox .wpforms-field-label,
.contact-form-wrap .wpforms-field-checkbox .wpforms-field-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-800) !important;
  margin-bottom: 8px !important;
}

.contact-form-wrap .wpforms-field-gdpr-checkbox ul,
.contact-form-wrap .wpforms-field-checkbox ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form-wrap .wpforms-field-gdpr-checkbox li,
.contact-form-wrap .wpforms-field-checkbox li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.contact-form-wrap .wpforms-field-gdpr-checkbox input[type="checkbox"],
.contact-form-wrap .wpforms-field-checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  accent-color: var(--turquoise-700) !important;
  cursor: pointer;
}

.contact-form-wrap .wpforms-field-gdpr-checkbox label.wpforms-field-label-inline,
.contact-form-wrap .wpforms-field-checkbox label {
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  color: var(--ink-700) !important;
  cursor: pointer;
}

.contact-form-wrap .wpforms-confirmation-container-full,
.contact-form-wrap .wpforms-confirmation-scroll {
  background: #fff !important;
  border: 1px solid rgba(83, 176, 174, 0.16) !important;
  border-radius: 14px !important;
  color: var(--turquoise-700) !important;
  padding: 16px 18px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-top: 12px !important;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-800);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-900);
  padding: 0 14px;
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input,
.form-field select {
  height: 48px;
}

.form-field textarea {
  min-height: 160px;
  padding: 14px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-500);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--turquoise-400);
  box-shadow: 0 0 0 3px rgba(83, 176, 174, 0.12);
}

.form-checkbox {
  padding-top: 4px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.contact-submit-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}

/* =================================================
   SIGNUP PAGE
================================================= */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.benefit-card,
.benefits-grid > .wp-block-column {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.benefit-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

.benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--turquoise-100);
  color: var(--turquoise-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 16px;
}

.benefit-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  font-weight: 600;
}

.benefit-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.benefit-card .benefit-icon {
  margin-bottom: 16px;
}

.benchmark-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 24px;
  align-items: stretch;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 30px;
}

.benchmark-copy h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  font-weight: 700;
  max-width: 20ch;
}

.benchmark-copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 64ch;
}

.benchmark-points {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.benchmark-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.benchmark-points li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
}

.benchmark-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
  align-self: center;
}

.benchmark-card .mini-label,
.mini-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--turquoise-700);
  margin-bottom: 10px;
}

.benchmark-card h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  font-weight: 600;
}

.benchmark-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.signup-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 0 auto;
}

.signup-panel,
.signup-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 26px;
  width: 100%;
  margin: 0 auto;
}

.signup-panel h2,
.signup-form-card h2 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 700;
}

.signup-panel p,
.signup-form-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.signup-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.signup-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.signup-points li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
}

.signup-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 18px 0 24px;
}

.signup-reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}

.signup-reassurance-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
}

.signup-mini-panel {
  margin: 6px 0 18px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
}

/* Item 171 (14 Aug 2026): strong/p colors were wrongly using the turquoise
   tokens here instead of the ink tokens supplied_files/signup.html:691-704
   specifies — see the second .signup-mini-panel block further down this
   file (SIGNUP / REASSURANCE section) for the duplicate rule that was also
   overriding padding/border-radius/background/border away from spec; both
   blocks are now aligned to the supplied design. */
.signup-mini-panel strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}

.signup-mini-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-700);
}

.text-link {
  color: var(--turquoise-700);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition);
}

.text-link:hover {
  color: var(--pink-500);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
}

.checkbox-row input {
  margin-top: 3px;
  accent-color: var(--turquoise-700);
}

.form-actions {
  display: flex;
  align-items: center;
  margin-top: 22px;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.form-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* WPForms overrides — Sign Up form (form ID 2567) */
.signup-form-card .wpforms-container {
  margin: 18px 0 0;
}

.signup-form-card .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Row pairing per supplied_files/signup.html's .form-grid layout (client
   review, 17 July 2026). Field-ID -> field-name map for form 2567:
     1 Name (first/last) | 2 Work Email | 3 Firm Name | 4 Role | 5 Postcode |
     6 Agreement (GDPR checkbox). Re-check in WPForms admin if fields are
   reordered/added/removed.
   Field 1 (Name) already renders First/Last side-by-side internally via
   WPForms' own .wpforms-field-row (pre-existing rule below) — left
   untouched; it only needs the full-width row placement here so that
   internal split isn't squeezed into a half-width column. */
#wpforms-2567-field_1-container, /* Name */
#wpforms-2567-field_2-container, /* Work Email — full width per design */
#wpforms-2567-field_6-container { /* Agreement */
  grid-column: 1 / -1;
}
#wpforms-2567-field_3-container { grid-column: 1; } /* Firm Name */
#wpforms-2567-field_4-container { grid-column: 2; } /* Role */
#wpforms-2567-field_5-container { grid-column: 1; } /* Postcode — alone in the left column per design (no pairing field) */

/* WPForms honeypot anti-spam field also present on this form — no CSS
   needed, see the note on .contact-form-wrap (Contact Us section above) for
   why. */

.signup-form-card .wpforms-field-label,
.signup-form-card .wpforms-field-name legend.wpforms-field-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-800) !important;
  margin-bottom: 8px !important;
}

.signup-form-card input,
.signup-form-card select,
.signup-form-card textarea {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--ink-900) !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.signup-form-card select {
  height: 48px !important;
}

.signup-form-card input:focus,
.signup-form-card select:focus,
.signup-form-card textarea:focus {
  border-color: rgba(83, 176, 174, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(83, 176, 174, 0.12) !important;
}

/* Pre-existing bug found during this session's verification, unrelated to
   the row-pairing work above: this rule used to add `gap: 14px !important`
   on top of WPForms' own First/Last block sizing, which ALREADY reserves a
   20px gutter via padding (10px right-padding on .wpforms-first, 10px
   left-padding on the second .wpforms-one-half — confirmed via
   getComputedStyle) at a flat 50%/50% split. 50% + 50% + the padding
   gutter already fills the row exactly; adding a further 14px flex gap on
   top pushed it a hair over 100%, so flexbox wrapped First onto its own
   line and Last onto the next instead of sitting side by side. This is
   what the field-pairing task called "already renders side-by-side
   natively — leave it alone" — it didn't, because of this rule. Removed
   the redundant gap entirely (WPForms' own padding-based gutter is the
   real spacing mechanism); a calc()-based width fix was tried first and
   still overflowed by a sub-pixel rounding margin, confirming the gap
   itself was the problem, not the block width. */

.signup-form-card .wpforms-field-sublabel {
  font-size: 12px !important;
  color: var(--ink-600) !important;
}

/* GDPR consent checkbox */
.signup-form-card .wpforms-field-gdpr-checkbox .wpforms-field-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-800) !important;
  margin-bottom: 8px !important;
}

.signup-form-card .wpforms-field-gdpr-checkbox ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.signup-form-card .wpforms-field-gdpr-checkbox li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.signup-form-card .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
  accent-color: var(--turquoise-700) !important;
  cursor: pointer;
}

.signup-form-card .wpforms-field-gdpr-checkbox label.wpforms-field-label-inline {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ink-700) !important;
  cursor: pointer;
}

.signup-form-card .wpforms-submit-container {
  margin-top: 22px !important;
  display: flex;
  justify-content: center;
}

.signup-form-card .wpforms-submit {
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid var(--pink-500) !important;
  border-radius: 12px !important;
  background: var(--pink-500) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 20px rgba(204, 51, 153, 0.24) !important;
  cursor: pointer !important;
  transition: transform var(--transition), filter var(--transition) !important;
}

.signup-form-card .wpforms-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.signup-form-card .wpforms-error {
  font-size: 12px !important;
  margin-top: 6px !important;
}

.signup-form-card .wpforms-confirmation-container-full,
.signup-form-card .wpforms-confirmation-scroll {
  background: #fff !important;
  border: 1px solid rgba(83, 176, 174, 0.16) !important;
  border-radius: 14px !important;
  color: var(--turquoise-700) !important;
  padding: 16px 18px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-top: 12px !important;
}

.reassurance-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  box-shadow: var(--shadow-sm);
}

.reassurance-band__copy {
  max-width: 820px;
}

.reassurance-band h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 600;
}

.reassurance-band p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 62ch;
}

/* =================================================
   BECOME A PARTNER PAGE
================================================= */

.intro-card,
.band-card,
.audience-card,
.offer-card {
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}

.intro-card,
.audience-card,
.offer-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 56%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  padding: 30px;
}

.intro-card p,
.band-card p,
.audience-card p,
.offer-card p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
}

.intro-card p:last-child,
.band-card p:last-child,
.audience-card p:last-child,
.offer-card p:last-child {
  margin-bottom: 0;
}

.value-list,
.audience-list,
.offer-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

/* Fix 6 (30 July 2026) — Become a Partner "Our Audience" card was missed
   from the WS1 pink-outline hover treatment; scoped to .audience-card only
   (not the shared .intro-card/.band-card/.offer-card group). */
.audience-card {
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.audience-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

.value-list li,
.audience-list li,
.offer-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-700);
}

.value-list li::before,
.audience-list li::before,
.offer-list li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--turquoise-500);
  box-shadow: 0 0 0 4px rgba(83, 176, 174, 0.12);
}

.what-we-do-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.band-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(83, 176, 174, 0.14), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f7fbfb 58%, #edf7f6 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  padding: 30px;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.compare-card {
  border-radius: 22px;
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.compare-card--left {
  background: #fff;
  border: 1px solid var(--line);
}

.compare-card--right {
  background: linear-gradient(135deg, #f8fbfb 0%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
}

.compare-card h3 {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.compare-list {
  display: grid;
  gap: 14px;
}

.compare-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.compare-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.compare-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.compare-card--left .compare-icon {
  background: rgba(204, 51, 153, 0.10);
  color: var(--pink-500);
}

.compare-card--right .compare-icon {
  background: rgba(83, 176, 174, 0.14);
  color: var(--turquoise-700);
}

.compare-item span {
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-700);
}

.closing-line {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-900);
  font-weight: 600;
}

.audience-card--full {
  width: 100%;
  max-width: none;
  padding: 34px;
}

.audience-intro p {
  max-width: 72ch;
}

.stat-highlight {
  display: inline-block;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.stat-highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 6px;
  background: rgba(83, 176, 174, 0.18);
  border-radius: 4px;
  z-index: -1;
}

.audience-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(83, 176, 174, 0.3), transparent);
  margin: 24px 0 22px;
}

.audience-subhead {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: 10px;
}

.audience-list {
  margin: 0 0 14px;
}

.audience-closing {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-800);
  font-weight: 500;
}

.audience-stats-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 14px;
}

.audience-stat,
.audience-stats-band > .wp-block-column {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 60%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

/* Item 148 (14 Aug 2026) — the 30 July fix (Fix 6 above) added pink hover to
   .audience-card, but that's the single full-width "Panacea's community
   includes" panel. The client's "3 boxes next to each other" are the stat
   boxes (18,000+ / 77% / £360bn), i.e. .audience-stats-band > .wp-block-column
   — mirrors the .audience-card:hover treatment above. */
.audience-stats-band > .wp-block-column {
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.audience-stats-band > .wp-block-column:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

.stat-number {
  font-size: 30px;
  font-weight: 800;
  color: var(--pink-500);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.5;
}

.stats-source {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 20px;
}

.ask-shell {
  padding: 28px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.ask-shell--cta {
  text-align: center;
}

.ask-header {
  max-width: 760px;
  margin: 0 auto 22px;
}

.ask-header--center {
  text-align: center;
}

.ask-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f6f3fb;
  border: 1px solid #ddd6fe;
  color: #6b5b95;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.ask-header h2 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-900);
}

.ask-header p {
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 62ch;
}

.ask-cta-wrap {
  display: flex;
  justify-content: center;
}

.ask-cta-btn {
  min-width: 200px;
}

/* =================================================
   PODCAST GRID
================================================= */

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

.podcast-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}

.podcast-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition);
}

.podcast-image:hover img {
  transform: scale(1.02);
}

.podcast-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink-900);
  transition: color var(--transition);
}

.podcast-content:hover h3 {
  color: var(--pink-500);
}

/* =================================================
   SIGNUP / REASSURANCE
================================================= */

.signup-reassurance-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.signup-reassurance-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--turquoise-400);
  box-shadow: 0 0 10px rgba(107, 192, 190, 0.45);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Item 171 (14 Aug 2026): this duplicate .signup-mini-panel block (see the
   first one, ~line 4052) was overriding padding/border-radius/background/
   border/strong-font-size away from supplied_files/signup.html:683-704.
   Realigned to the same spec values so the two blocks agree regardless of
   which wins the cascade. */
.signup-mini-panel {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 16px;
  padding: 16px 16px 14px;
}

.signup-mini-panel strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 6px;
}

.signup-mini-panel p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-700);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.text-link:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

/* =================================================
   WHAT / BENEFIT PAIRS (ABOUT)
================================================= */

.what-columns-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

.what-column-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.what-pairs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.what-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.what-item,
.benefit-box,
.what-pair > .wp-block-column {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.benefit-box {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 60%, #eef8f8 100%);
  border-color: rgba(83, 176, 174, 0.14);
}

.benefit-box-accent {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--turquoise-400), var(--pink-500));
  margin-bottom: 12px;
  transition: width var(--transition);
}

.what-item h3,
.benefit-box h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-900);
  transition: color var(--transition);
}

.what-item p,
.benefit-box p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-700);
}

/* Fix 6 (30 July 2026) — About "What we do" grid was missed from the WS1
   pink-outline hover treatment; was translateY(-1px)/shadow-sm/turquoise,
   now matches the shared benefit-card hover (translateY(-2px)/shadow-md/pink).
   Item 173 (6 Aug 2026) — that fix scoped the hover to the shared .what-pair
   row wrapper, so hovering either card highlighted BOTH cards in the row at
   once. Rescoped to each card's own :hover so they light up individually. */
.what-item:hover,
.benefit-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-500);
}

.benefit-box:hover .benefit-box-accent {
  width: 56px;
}

/* =================================================
   RECRUITMENT
================================================= */

.recruitment-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  margin-bottom: 26px;
}

.recruitment-intro-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 700;
}

.jobs-iframe-wrap {
  position: relative;
  width: 100%;
  height: 1200px;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
}

.jobs-iframe {
  position: absolute;
  top: -180px;
  left: 0;
  width: 100%;
  height: 1400px;
  border: 0;
}

.recruitment-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  box-shadow: var(--shadow-sm);
}

.recruitment-cta-copy {
  max-width: 720px;
}

.recruitment-header {
  margin-bottom: 18px;
}

.recruitment-header h2,
.recruitment-intro .wp-block-heading {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-900);
}

.recruitment-subtext {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 70ch;
}

.recruitment-actions {
  margin-top: 8px;
}

.recruitment-cta h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 600;
}

.recruitment-cta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 60ch;
}

.recruitment-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* =================================================
   MY PANACEA — LOGIN / REGISTER
================================================= */

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: 12px;
  align-items: start;
}

.login-copy-card,
.login-form-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.login-copy-card {
  align-self: start;
  padding: 24px;
}

.login-form-card {
  align-self: start;
  padding: 30px;
  border: 1px solid rgba(83, 176, 174, 0.18);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.login-copy-card h2,
.login-form-card h2 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 700;
}

.login-copy-card p,
.login-form-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.login-copy-card--slim {
  padding: 24px 24px 22px;
}

.login-copy-card--slim h2 {
  margin-bottom: 8px;
}

.login-copy-card--slim .login-points {
  margin-top: 16px;
  gap: 10px;
}

.login-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.login-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.login-points li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
}

.login-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 18px 0 22px;
}

.login-reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}

.login-reassurance-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
}

.login-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.login-secondary {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.login-secondary p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* WPForms overrides — MyPanacea Access Request form (form ID 2568) */
.login-form-card .wpforms-container {
  margin: 18px 0 0;
}

.login-form-card .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Row pairing (client review, 17 July 2026). supplied_files/mypanacea.html's
   only .form-grid is the pre-WS8 login mockup (Work email / Password) which
   no longer matches this form's actual fields (access-request copy was
   reworded in WS8) — judgement call: pair Name + Work Email to match the
   design's established 2-up rhythm, keep the textarea full width like the
   other two forms. Field-ID -> field-name map for form 2568:
     1 Name | 2 Work Email | 3 Reason for access request (textarea). A
     honeypot anti-spam field also renders inline with a randomised numeric
     ID/position/label — no CSS needed, see the note on .contact-form-wrap
     (Contact Us section above) — never a stable ID, so excluded from this
     map. Re-check in WPForms admin if fields are reordered/added/removed. */
#wpforms-2568-field_1-container { grid-column: 1; } /* Name */
#wpforms-2568-field_2-container { grid-column: 2; } /* Work Email */
#wpforms-2568-field_3-container { grid-column: 1 / -1; } /* Reason for access request */

.login-form-card .wpforms-field-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-800) !important;
  margin-bottom: 8px !important;
}

.login-form-card input,
.login-form-card select,
.login-form-card textarea {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--ink-900) !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.login-form-card textarea {
  min-height: 110px !important;
  padding: 14px !important;
  resize: vertical !important;
}

.login-form-card input:focus,
.login-form-card select:focus,
.login-form-card textarea:focus {
  border-color: rgba(83, 176, 174, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(83, 176, 174, 0.12) !important;
}

.login-form-card .wpforms-submit-container {
  margin-top: 24px !important;
  display: flex;
}

.login-form-card .wpforms-submit {
  width: 100% !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid var(--pink-500) !important;
  border-radius: 12px !important;
  background: var(--pink-500) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 20px rgba(204, 51, 153, 0.24) !important;
  cursor: pointer !important;
  transition: transform var(--transition), filter var(--transition) !important;
}

.login-form-card .wpforms-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.login-form-card .wpforms-error {
  font-size: 12px !important;
  margin-top: 6px !important;
}

.login-form-card .wpforms-confirmation-container-full,
.login-form-card .wpforms-confirmation-scroll {
  background: #fff !important;
  border: 1px solid rgba(83, 176, 174, 0.16) !important;
  border-radius: 14px !important;
  color: var(--turquoise-700) !important;
  padding: 16px 18px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-top: 12px !important;
}

/* =================================================
   ASK PANACEA PAGE
================================================= */

.ask-hero {
  padding: 72px 24px 48px;
}

.ask-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.ask-hero h1 {
  font-size: 42px;
  line-height: 1.15;
  margin: 12px 0 14px;
  letter-spacing: -0.02em;
}

.ask-hero-copy {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-700);
  margin-bottom: 26px;
}

.ask-search {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.ask-search input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 15px;
}

.ask-search button {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--turquoise-500);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.ask-search button:hover {
  background: var(--pink-500);
}

.ask-suggestions {
  margin-top: 18px;
}

.ask-suggestions-label {
  display: block;
  font-size: 13px;
  color: var(--ink-600);
  margin-bottom: 8px;
}

.ask-question-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ask-question-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
}

.ask-question-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise-500);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.28);
}

.ask-question-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-800);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition), transform var(--transition);
}

.ask-question-link:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

.ask-disclaimer {
  padding: 24px;
}

.ask-disclaimer-inner {
  max-width: 820px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* =================================================
   PRESS CENTRE
================================================= */

.topics-intro {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 80ch;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.topic-card {
  min-height: 120px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.topic-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500); /* Fix 6 (30 July 2026) — was turquoise, missed from WS1 pink hover */
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 100%);
}

.topic-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}

.facts-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 30px;
}

.facts-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.facts-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.facts-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquoise-500);
  box-shadow: 0 0 0 4px rgba(83, 176, 174, 0.12);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(83, 176, 174, 0.24);
  box-shadow: var(--shadow-md);
}

.contact-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--turquoise-700);
  margin-bottom: 8px;
}

.contact-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

.contact-card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.contact-email {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(83, 176, 174, 0.16);
}

.contact-email a {
  font-size: 14px;
  font-weight: 600;
  color: var(--turquoise-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition), transform var(--transition);
  word-break: break-word;
}

.contact-email a:hover {
  color: var(--pink-500);
  transform: translateX(3px);
}

.coverage-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.coverage-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.coverage-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.coverage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  border-color: rgba(204, 51, 153, 0.28);
  background: linear-gradient(135deg, #ffffff 0%, #fcf4fa 100%);
}

.coverage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.coverage-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  transition: color var(--transition);
}

.coverage-card-link:hover h3 {
  color: var(--pink-500);
}

/* Block-editor conversion (WS4 4.4): the card is a wp:group, not a single
   <a>, so h3/coverage-link no longer inherit :hover from .coverage-card-link.
   Re-declare the same hover colour scoped to .coverage-card itself. */
.coverage-card:hover h3 {
  color: var(--pink-500);
}

.coverage-card h3 a {
  color: inherit;
  text-decoration: none;
}

.coverage-card p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 72ch;
}

.coverage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.coverage-card-link:hover .coverage-link {
  color: var(--pink-500);
  transform: translateX(3px);
}

.coverage-card:hover .coverage-link {
  color: var(--pink-500);
  transform: translateX(3px);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.resource-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.resource-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500); /* Fix 6 (30 July 2026) — was turquoise, missed from WS1 pink hover */
  box-shadow: var(--shadow-md);
}

.resource-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}

.resource-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-700);
}

.resource-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.resource-link:hover {
  color: var(--pink-500);
  transform: translateX(3px);
}

/* =================================================
   RESPONSIVE — TABLET
================================================= */

@media (max-width: 1180px) {
  .editorial-top {
    grid-template-columns: 1fr;
  }

  .editorial-ad {
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .intro-split,
  .team-experience-card,
  .team-grid,
  .quotes-grid,
  .scale-grid,
  .benchmark-shell,
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .what-columns-header {
    display: none;
  }

  .benefits-grid,
  .audience-stats-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .topics-grid,
  .contact-grid,
  .resources-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .events-grid {
    grid-template-columns: 1fr;
  }

  .tool-grid {
    grid-template-columns: 1fr 1fr;
  }

  .login-layout {
    grid-template-columns: 1fr;
  }

  .recruitment-intro {
    grid-template-columns: 1fr;
  }

  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .event-side-stack {
    height: auto;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .ask-shell {
    padding: 34px 28px 32px;
    border-radius: 28px;
  }

  .article-layout,
  .partner-layout {
    grid-template-columns: 1fr;
  }

  .article-aside {
    position: static;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    margin-top: 0;
  }

  .partner-aside {
    position: static;
    width: 100%;
    max-width: none;
  }

  .intro-split {
    grid-template-columns: 1fr;
  }

  .scale-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quotes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .editorial-grid {
    grid-template-columns: 1fr;
  }

  .editorial-item.has-image .editorial-card-link {
    grid-template-columns: 164px 1fr;
  }

  .recorded-webinars-grid,
  .partner-events-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =================================================
   RESPONSIVE — MOBILE
================================================= */

@media (max-width: 760px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .container {
    width: min(100% - 24px, var(--container));
  }

  .card,
  .list-card,
  .feature-card,
  .tool-card,
  .cta-band {
    padding: 18px;
  }

  .post-hero-pills {
    padding: 18px 0 14px;
    margin-bottom: 14px;
  }

  .post-hero-pills-row {
    gap: 8px;
  }

  .post-hero-pill {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .login-copy-card,
  .login-form-card {
    padding: 20px;
  }

  /* MyPanacea field pairing stacks to one column at 760px, matching the
     other two forms' breakpoint (client review, 17 July 2026). */
  .login-form-card .wpforms-field-container {
    grid-template-columns: 1fr;
  }

  .login-form-card .wpforms-field-container > .wpforms-field {
    grid-column: 1 / -1 !important;
  }

  .login-reassurance {
    flex-direction: column;
    gap: 10px;
  }

  .policy-card {
    padding: 20px;
  }

  .policy-card p,
  .policy-card li {
    font-size: 15px;
    line-height: 1.68;
  }

  .policy-card h3 {
    font-size: 20px;
  }

  .hero,
  .page-hero {
    padding: 20px 0 62px;
  }

  .hero h1,
  .hero .hero-copy .wp-block-heading {
    margin: 24px 0 0;
    font-size: 3rem;
    white-space: normal;
  }

  .page-hero h1 {
    font-size: 2.25rem;
    max-width: none;
  }

  .hero p,
  .hero .hero-copy p.wp-block-paragraph:not(.hero-eyebrow),
  .page-hero p {
    font-size: 16px;
    max-width: none;
  }

  .nav-cta,
  .cta-band__actions {
    width: 100%;
  }

  .nav-cta .btn,
  .nav-cta .btn-light,
  .nav-cta .ask-pill,
  .cta-band__actions .btn,
  .cta-band__actions .btn-light {
    flex: 1 1 100%;
    justify-content: center;
  }

  .editorial-lead h2 {
    max-width: none;
  }

  .editorial-lead p {
    font-size: 16px;
  }

  .editorial-item {
    padding: 18px 0;
  }

  .editorial-item.has-image .editorial-card-link {
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }

  .editorial-item h3,
  .tool-card h3 {
    font-size: 18px;
    line-height: 1.4;
    max-width: none;
  }

  .editorial-ad-box {
    width: 100%;
    max-width: 300px;
  }

  .ask-shell {
    padding: 20px;
  }

  .ask-header p {
    font-size: 16px;
  }

  .ask-search-box {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    min-height: auto;
  }

  .ask-search-icon {
    display: none;
  }

  .ask-search-box input {
    height: 46px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
  }

  .ask-search-box input:focus {
    border-color: var(--turquoise-400);
    box-shadow: 0 0 0 3px rgba(83, 176, 174, 0.12);
  }

  .ask-search-btn {
    width: 100%;
    justify-content: center;
  }

  .event-feature-card {
    min-height: auto;
    padding: 22px 20px;
    border-radius: 24px;
  }

  .event-feature-card h3 {
    font-size: 22px;
    max-width: none;
  }

  .event-mini-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .event-mini-btn {
    width: 100%;
  }

  .events-link-bottom {
    align-self: flex-start;
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrap {
    padding: 20px;
  }

  .contact-form-wrap h2 {
    font-size: 24px;
  }

  .contact-form-wrap .wpforms-field-row {
    grid-template-columns: 1fr !important;
  }

  /* Stack the field-row pairing to one column at the same 760px breakpoint
     as the design's own .form-row (client review, 17 July 2026). */
  .contact-form-wrap .wpforms-field-container {
    grid-template-columns: 1fr;
  }

  .contact-form-wrap .wpforms-field-container > .wpforms-field {
    grid-column: 1 / -1 !important;
  }

  .contact-form-wrap .wpforms-submit,
  .contact-submit-row .btn {
    width: 100% !important;
    justify-content: center;
  }

  .intro-card,
  .intro-highlight,
  .scale-band,
  .scale-stat,
  .team-experience-card,
  .team-card,
  .testimonial-card {
    padding: 20px;
  }

  .intro-card p,
  .scale-copy,
  .team-exp-content p,
  .team-card p,
  .testimonial-card p {
    font-size: 15px;
    line-height: 1.68;
  }

  .team-experience-card {
    text-align: center;
    margin-bottom: 24px;
  }

  .team-exp-stat {
    font-size: 34px;
  }

  .team-exp-content h3 {
    font-size: 19px;
    line-height: 1.28;
  }

  .team-card h3 {
    font-size: 20px;
    line-height: 1.28;
  }

  .quote-mark {
    font-size: 30px;
  }

  .scale-stat strong {
    font-size: 30px;
  }

  .benefits-grid,
  .form-grid,
  .audience-stats-band {
    grid-template-columns: 1fr;
  }

  /* Sign Up field pairing stacks to one column at 760px, matching the
     design's .form-grid breakpoint (client review, 17 July 2026). */
  .signup-form-card .wpforms-field-container {
    grid-template-columns: 1fr;
  }

  .signup-form-card .wpforms-field-container > .wpforms-field {
    grid-column: 1 / -1 !important;
  }

  .signup-form-card,
  .benefit-card,
  .benchmark-shell,
  .benchmark-card,
  .audience-card,
  .compare-card,
  .band-card {
    padding: 20px;
  }

  .form-actions .btn,
  .form-actions .btn-light {
    flex: 1 1 100%;
    justify-content: center;
  }

  .ask-cta-btn {
    width: 100%;
    max-width: 280px;
  }

  .article-header h1 {
    font-size: 2.2rem;
    max-width: none;
  }

  .article-submeta {
    font-size: 13px;
    gap: 8px;
  }

  .article-body p,
  .article-body li {
    font-size: 16px;
  }

  .article-body h2 {
    font-size: 24px;
  }

  .partner-logo {
    width: 338px;
    height: 138px;
  }

  .partner-logo img {
    max-width: 280px;
    max-height: 96px;
  }

  .scale-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .scale-band {
    padding: 28px 24px;
  }

  .podcast-grid,
  .recorded-webinars-grid,
  .partner-events-grid {
    grid-template-columns: 1fr;
  }

  .what-pair {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* D10 (6 Aug 2026) — Ask Panacea hero search stacks on narrow viewports. */
  .ask-search {
    flex-direction: column;
  }

  .ask-search button {
    width: 100%;
  }
}

/* =================================================
   INSIGHTS PAGE — FEATURED LEAD CARD
================================================= */

.editorial-lead-card {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(135deg, #edf6f5 0%, #dff1ef 52%, #cfe9e6 100%);
  border: 1px solid rgba(83, 176, 174, 0.18);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  padding: 38px 42px;
  display: flex;
  align-items: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.editorial-lead:hover .editorial-lead-card {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  border-color: rgba(204, 51, 153, 0.28);
}

.editorial-lead-inner {
  width: 100%;
  max-width: 560px;
}

/* Items 192/193 (13 Aug 2026): the featured lead card's fixed height (290px,
   set above under .editorial-lead) is shorter than its rendered content
   (~259px measured live), so the card's flex vertical-centering compresses
   its own designed 38px top/bottom padding down to ~15px on each side —
   reported as too tight above the date/theme/read-time row and below "Read
   More". Restoring the height to fit the content plus the full 38px padding
   (259 + 2x38 = ~335px) gives both edges their intended breathing room back.
   Scoped to #featuredSection (unique to /insights/ — Home's featured-article
   block uses different, unboxed markup with no .editorial-lead-card) and
   gated to the desktop/tablet breakpoint where the fixed height applies, so
   the mobile `.editorial-lead { height: auto }` override (below, in the
   Insights responsive media query) is untouched. */
@media (min-width: 1181px) {
  #featuredSection .editorial-lead {
    height: 336px;
  }
}

.editorial-lead:hover .editorial-readmore {
  color: var(--pink-500);
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.item-date,
.item-category,
.item-readtime {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.item-date,
.item-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
}

.item-date::after,
.item-category::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.35);
  flex-shrink: 0;
}

.item-readtime {
  color: var(--ink-600);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* =================================================
   INSIGHTS FEED
================================================= */

.insights-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.insight-card {
  position: relative;
  border-top: 1px solid #d7dce3;
  padding: 20px 0;
  transition: transform var(--transition);
}

.insight-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.insight-card:hover {
  transform: translateY(-1px);
}

/* Amendments M4 (Save Article): bookmark toggle, top-right of the card.
   Rendered only for logged-in MyPanacea members (Panacea_Saved_Articles::
   button_html() — see class-mypanacea-saved-articles.php) so this never
   affects layout for anonymous/public visitors. */
.mp-save-btn {
  position: absolute;
  top: 20px;
  right: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-600);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  cursor: pointer;
  transition: all .18s ease;
}
.insight-card:first-child .mp-save-btn { top: 0; }
.mp-save-btn:hover { border-color: var(--turquoise-500); color: var(--turquoise-700); }
.mp-save-btn .mp-save-icon { fill: none; stroke: currentColor; stroke-width: 1.6; }
.mp-save-btn.is-saved { border-color: var(--turquoise-500); background: var(--turquoise-500); color: #fff; }
.mp-save-btn.is-saved:hover { background: var(--turquoise-700); border-color: var(--turquoise-700); color: #fff; }
.mp-save-btn.is-saved .mp-save-icon { fill: currentColor; stroke: none; }
.mp-save-btn:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 640px) {
  .mp-save-btn { top: 0; right: 0; }
}

.insight-card-link {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  color: inherit;
  text-decoration: none;
}

.insight-card-link--no-thumb {
  grid-template-columns: 1fr;
}

.insight-thumb {
  width: 100%;
  opacity: 0.94;
  transition: opacity var(--transition);
}

.insight-card:hover .insight-thumb {
  opacity: 1;
}

.insight-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}

.insight-copy {
  min-width: 0;
  padding-top: 2px;
}

.insight-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink-900);
  transition: color var(--transition), transform var(--transition);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.24em * 2);
}

.insight-card:hover h3 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.insight-summary {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 72ch;
}

.insight-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.insight-card:hover .insight-more {
  color: var(--pink-500);
  transform: translateX(2px);
}

.hidden-store {
  display: none !important;
}

/* Insights-all Load More (WS4.1) — matches supplied_files/insights-all.html's
   .section-load-more / .load-more-wrap / .is-hidden classes exactly. */
.section-load-more {
  padding-top: 0;
}

/* /insights-all/ partner deep-link context header (client-review fix,
   17 July 2026) — reuses .section-header/.inline-link; only trims the
   padding so it sits snugly above the feed instead of double-padding
   against the following .section. */
.insights-partner-context {
  padding-bottom: 0;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
}

.is-hidden {
  display: none !important;
}

#find-out-more {
  margin-top: 28px;
}

/* =================================================
   SINGLE POST — ARTICLE PAGE
================================================= */

body.single-post,
body.single-panacea_guide {
  background: linear-gradient(90deg, #f4effa 0%, #f8fafc 55%, #ffffff 100%);
}

/* Content Hub Stage 1 — footnote/disclaimer paragraphs captured verbatim
   alongside a Hub-ingested extract (see CONTENT_HUB_STAGE1_SPEC.md RULE 2). */
.hub-footnote {
  font-size: 0.85rem;
  color: var(--ink-500);
  font-style: italic;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

/* =================================================
   INSIGHTS RESPONSIVE
================================================= */

@media (max-width: 1180px) {
  .editorial-top {
    grid-template-columns: 1fr;
  }

  .editorial-lead {
    height: auto;
  }

  .editorial-ad {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .insight-card-link {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
  }

  .insight-card h3 {
    font-size: 18px;
  }

  .insight-summary {
    font-size: 14px;
    line-height: 1.6;
  }

  .editorial-ad-box {
    width: 100%;
    max-width: 300px;
  }
}

/* ======================================
   Events page
====================================== */

.event-feature-card-large {
  background: linear-gradient(135deg, #edf6f5 0%, #dff1ef 52%, #cfe9e6 100%);
  border: 1px solid rgba(83, 176, 174, 0.18);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 30px 32px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.event-feature-card-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  border-color: var(--pink-500);
}

.event-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.event-tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* WS-B2 (item 6): scoped to .event-tag-pill (Events page markup only) so this
   no longer collides with Home's identically-named .event-tag-featured /
   .event-tag-secondary (which sit on .event-tag, not .event-tag-pill, inside
   the Home "Upcoming events" feature card) — that collision was making the
   Home feature-card tags render grey instead of their designed pink/green. */
.event-tag-pill.event-tag-featured {
  background: rgba(204, 51, 153, 0.12);
  color: var(--pink-500);
  border: 1px solid rgba(204, 51, 153, 0.18);
}

.event-tag-pill.event-tag-secondary {
  background: rgba(83, 176, 174, 0.12);
  color: #3f9897;
  border: 1px solid rgba(83, 176, 174, 0.18);
}

.event-feature-card-large h2 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink-900);
}

.event-feature-company {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 12px;
}

.event-feature-card-large > p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 72ch;
}

.event-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 20px;
  color: var(--ink-600);
  font-size: 14px;
  font-weight: 600;
}

/* Events feed list */

.events-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.event-item {
  display: block;
  border-top: 1px solid #d7dce3;
  padding: 18px 0;
  cursor: pointer;
}

.event-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.event-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Item 31 refinement (13 Aug batch 2) — the collapsed Events-page row should
   sit on the page background; only the EXPANDED .event-detail-inner is white
   (matches supplied_files/events.html, which never gives .event-card its own
   background/border/shadow/padding — those come from the base .event-card
   declaration near the top of this file, meant for the partner-page cards).
   Scoped to .event-item .event-card so the partner-page "Forthcoming events"
   cards (.partner-events-grid .event-card, no .event-item wrapper) keep the
   white-box treatment from the base declaration untouched. */
.event-item .event-card {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* The base .event-card:hover (lift/shadow/border-color, above) was written
   for the white partner-page card and doesn't exist in supplied_files/events.html
   at all — with the collapsed row now transparent it would show a floating
   shadow/border with no card behind it. Neutralise it here; the collapsed
   row's own hover feedback stays on its children (.event-date lift via
   .event-item:hover .event-date below, .event-tag/.dot/h3 colour via the
   .event-card:hover rules further down this file). */
.event-item .event-card:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.event-date {
  width: 88px;
  min-width: 88px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 14px 10px;
  text-align: center;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.event-item:hover .event-date {
  border-color: rgba(204, 51, 153, 0.24);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.event-day {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink-900);
}

.event-month {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.event-content {
  min-width: 0;
  padding-top: 2px;
}

/* WS-B2 (item 6): scoped to .event-content (Events page "All events" list
   markup) so this bare .event-tag rule no longer wins the cascade tie against
   Home's .event-tag-featured / .event-tag-secondary (same .event-tag base
   class, declared earlier in this file) and force them grey. */
.event-content .event-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  transition: color 0.22s ease;
}

.event-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6bc0be;
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.35);
  flex-shrink: 0;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.event-card:hover .event-tag { color: var(--pink-500); }

.event-card:hover .event-tag .dot {
  background: var(--pink-500);
  box-shadow: 0 0 10px rgba(204, 51, 153, 0.35);
}

.event-content h3 {
  margin: 8px 0 6px;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink-900);
  transition: color 0.22s ease, transform 0.22s ease;
}

.event-card:hover h3 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.event-company {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 6px;
}

.event-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 78ch;
}

.event-meta span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.event-meta span:not(:last-child)::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 10px;
  border-radius: 999px;
  background: #6bc0be;
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
}

.event-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #3f9897;
  cursor: pointer;
  transition: color 0.22s ease, transform 0.22s ease;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
}

.event-link:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

.event-detail-panel {
  margin-top: 18px;
  margin-left: 110px;
}

.event-detail-inner {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}

.event-detail-inner > p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.event-close-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.event-close-icon:hover {
  color: var(--pink-500);
  background: rgba(204, 51, 153, 0.08);
  transform: scale(1.04);
}

.event-detail-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Recorded webinars — .eyebrow consolidated with the shared definition near the top of this file (WS1.2) */

.recorded-webinars-section { padding-top: 16px; }

/* Fix 168 (6 Aug batch 2): on the standalone /recorded-webinars/ page the
   intro section's own bottom padding (.section = 34px) plus this section's
   top padding (16px) left ~50px between the intro copy and the grid — too
   large per client feedback. Scoped to page 2554 only (this class is shared
   with the /events/ page's "Recorded webinars" subsection, which is fine
   as-is). */
.page-id-2554 .recorded-webinars-section { padding-top: 0; margin-top: -16px; }

.recorded-webinars-header { margin-bottom: 24px; }

.recorded-webinars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.recorded-webinar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 20px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.recorded-webinar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(204, 51, 153, 0.22);
  box-shadow: var(--shadow-md);
}

.recorded-webinar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.recorded-webinar-meta span { display: inline-flex; align-items: center; }

.recorded-webinar-meta span:not(:last-child)::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 10px;
  border-radius: 999px;
  background: #6bc0be;
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
}

.recorded-webinar-card h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink-900);
  transition: color 0.22s ease, transform 0.22s ease;
}

.recorded-webinar-card:hover h3 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.recorded-webinar-card > p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-600);
}

.recorded-webinar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #3f9897;
  transition: color 0.22s ease, transform 0.22s ease;
}

.recorded-webinar-link:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

.recorded-webinars-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.recorded-webinars-all {
  font-size: 14px;
  font-weight: 700;
  color: #2d1b69;
  transition: color 0.22s ease, transform 0.22s ease;
}

.recorded-webinars-all:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

@media (max-width: 980px) {
  .recorded-webinars-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .event-feature-card-large { padding: 22px 20px; }
  .event-feature-card-large h2 { font-size: 24px; }
  .event-card { grid-template-columns: 72px 1fr; gap: 16px; }
  .event-date { width: 72px; min-width: 72px; padding: 12px 8px; }
  .event-day { font-size: 24px; }
  .event-detail-panel { margin-left: 0; }
  .event-content h3 { font-size: 18px; }
}

/* =================================================
   ADVISER BUSINESS PAGE
================================================= */

.feature-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.feature-with-sidebar .feature-card {
  min-height: 290px;
  background: linear-gradient(135deg, #edf6f5 0%, #dff1ef 52%, #cfe9e6 100%);
  border: 1px solid rgba(83, 176, 174, 0.18);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  padding: 38px 42px;
  display: flex;
  align-items: center;
}

.feature-with-sidebar .feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  border-color: rgba(204, 51, 153, 0.28);
}

.feature-card-inner {
  width: 100%;
  max-width: 560px;
}

.feature-with-sidebar .feature-card h2 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink-900);
  transition: color var(--transition), transform var(--transition);
}

.feature-with-sidebar .feature-card:hover h2 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.feature-intro {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
}

.feature-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.feature-readmore:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

/* Fix 2 convention (30 July 2026 feedback) — external-site link variant:
   pink at rest, not just on hover. Used by the podcast "Listen" links
   (item 102/103), which point off-site to the legacy panaceaadviser.com. */
.feature-readmore.is-external {
  color: var(--pink-500);
}

/* Panacea Guides */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.guide-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

.guide-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--turquoise-100);
  color: var(--turquoise-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 16px;
}

.guide-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  font-weight: 600;
  transition: color var(--transition), transform var(--transition);
}

.guide-card:hover h3 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.guide-card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.guide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.guide-link:hover {
  color: var(--pink-500);
  transform: translateX(2px);
}

/* Partner Guides */
.partner-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.partner-guide-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.partner-guide-card:hover {
  transform: translateY(-1px);
  border-color: rgba(204, 51, 153, 0.22);
  box-shadow: var(--shadow-md);
}

.partner-guide-card h3 {
  margin: 8px 0 10px;
  font-size: 20px;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  font-weight: 600;
  transition: color var(--transition), transform var(--transition);
}

.partner-guide-card:hover h3 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.partner-guide-card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}

.partner-guide-source {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-600);
}

/* Podcast */
.podcast-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 52%, #eef8f8 100%);
  border: 1px solid rgba(83, 176, 174, 0.14);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.podcast-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: var(--shadow-md);
}

.podcast-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.podcast-image { width: 220px; max-width: 100%; }

.podcast-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}

.podcast-content { min-width: 0; }

.podcast-content h3 {
  margin: 8px 0 10px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink-900);
  transition: color var(--transition), transform var(--transition);
}

.podcast-card:hover .podcast-content h3 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.podcast-summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 70ch;
}

.podcast-meta {
  display: flex;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.podcast-meta span:not(:last-child)::after {
  content: "•";
  margin-left: 10px;
  color: var(--turquoise-500);
}

.podcast-embed {
  display: block;
  margin: 14px 0;
  max-width: 460px;
  width: 100%;
}

/* Podcasts archive page (/podcasts/) — WS-B4 (30 July 2026 feedback, items
   102/103). Stacks .podcast-card entries; each card reuses the Adviser
   Business podcast section's existing card styling above. */
.podcasts-archive-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Item 198 (13 Aug 2026): the Podcasts page intro section and the episode-card
   feed are two separate stacked .section blocks, each carrying the shared
   32px-top/34px-bottom .section padding plus a 24px inter-block gap — 90px of
   visual space between the intro copy and the first episode card, reported as
   "excessive". Scoped to the Podcasts page (page-id-3012 body class) and to
   the two specific sections involved via :has(), so the shared .section rule
   used across the rest of the site (incl. the identical two-section pattern
   on Partner Guides/Recorded Webinars, which weren't flagged) is untouched. */
.page-id-3012 section.section:has(.section-header) {
  padding-bottom: 8px;
}

.page-id-3012 section.section:has(.podcasts-archive-grid) {
  padding-top: 8px;
}

/* Items 216/219 (14 Aug 2026): Panacea Guides (66px) and Partner Guides (90px)
   have the same too-large intro→cards gap as Podcasts above, but a different
   cause — on these two pages the .wp-site-blocks/.entry-content block-gap
   margin is already zero (see Customizer Additional CSS: the archive
   template has no <main> wrapper at all; Partner Guides' intro .section gets
   the item 217/218 margin fix), so only the shared .section padding
   (32px top / 34px bottom) needs trimming. Reducing the intro section's
   padding-bottom alone brings both to ~40px (0 margin + 8px + the cards
   section's untouched default 32px top padding) without touching the cards
   section itself, unlike the Podcasts fix above which also needed its own
   top padding trimmed to offset a 24px margin that's deliberately left
   alone here. */
.post-type-archive-panacea_guide section.section:has(.section-header),
.page-id-4902 section.section:has(.section-header) {
  padding-bottom: 8px;
}

/* Adviser Business Articles */
.articles-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.article-card {
  border-top: 1px solid #d7dce3;
  padding: 20px 0;
  transition: transform var(--transition);
}

.article-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.article-card:hover { transform: translateY(-1px); }

.article-card-link {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.article-thumb {
  width: 100%;
  opacity: 0.94;
  transition: opacity var(--transition);
}

.article-card:hover .article-thumb { opacity: 1; }

.article-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}

.article-copy {
  min-width: 0;
  padding-top: 2px;
}

.article-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink-900);
  transition: color var(--transition), transform var(--transition);
}

.article-card:hover h3 {
  color: var(--pink-500);
  transform: translateX(2px);
}

.article-summary {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 72ch;
}

.article-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--turquoise-700);
  transition: color var(--transition), transform var(--transition);
}

.article-card:hover .article-more {
  color: var(--pink-500);
  transform: translateX(2px);
}

@media (max-width: 1180px) {
  .feature-with-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .guides-grid,
  .partner-guides-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .podcast-grid { grid-template-columns: 1fr; }
  .podcast-image { width: 220px; max-width: 100%; margin: 0 auto; }
  .article-card-link { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .article-card h3 { font-size: 18px; }
}

@media (max-width: 760px) {
  .feature-with-sidebar .feature-card,
  .guide-card,
  .partner-guide-card,
  .podcast-card { padding: 20px; }
  .podcast-content h3 { font-size: 21px; }
}

/* =================================================
   HOME PAGE
================================================= */

/* Home pill dot decoration (anchor-link pills only) */
.post-hero-pills--home .post-hero-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--turquoise-400);
  box-shadow: 0 0 8px rgba(107, 192, 190, 0.30);
  flex-shrink: 0;
  display: inline-block;
}

/* Large ask-shell for home page (restores style overridden by inner-page variant) */
.ask-shell--home {
  max-width: 1360px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 36px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  padding: 30px 34px 26px;
}

.ask-shell--home .ask-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.ask-shell--home .ask-header p {
  font-size: 17px;
  max-width: 760px;
  color: #5b6477;
  margin: 10px auto 0;
}

.ask-shell--home .ask-kicker {
  gap: 10px;
  padding: 12px 22px;
  box-shadow: 0 6px 14px rgba(109, 91, 149, 0.08);
  margin-bottom: 12px;
}

.ask-shell--home .ask-search-wrap {
  margin-top: 22px;
  padding: 16px;
  border-radius: 24px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.ask-shell--home .ask-search-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #dbe2ea;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.ask-shell--home .ask-search-box input {
  font-size: 20px;
}

.ask-shell--home .ask-search-btn {
  min-width: 174px;
  height: 58px;
  border-radius: 14px;
  font-size: 18px;
  padding: 0 24px;
  background: linear-gradient(135deg, #27b7aa, #37c6b9);
  border: 1px solid transparent;
  box-shadow: 0 10px 20px rgba(39, 183, 170, 0.20);
  color: #fff;
}

.ask-shell--home .ask-search-btn:hover {
  background: linear-gradient(135deg, #21a99d, #2dbdaf);
  filter: none;
}

@media (max-width: 760px) {
  .midpage-banner-section { padding: 6px 0 38px; }
  .ask-shell--home { padding: 24px 18px; border-radius: 24px; }
  .ask-shell--home .ask-header p { font-size: 16px; }
  .ask-shell--home .ask-search-wrap { padding: 14px; border-radius: 22px; }
  .ask-shell--home .ask-search-box {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: auto;
    padding: 18px;
  }
  .ask-shell--home .ask-search-icon { justify-content: flex-start; }
  .ask-shell--home .ask-search-box input { font-size: 18px; }
  .ask-shell--home .ask-search-btn { width: 100%; min-width: 0; height: 52px; font-size: 17px; }
}

/* =================================================
   MYPANACEA — member shell (P1a)
   Source: supplied_files/MyPanacea/home.html. Distinct chrome from the
   main site's .topbar — every class here is prefixed mp- specifically
   because .section, .section-header, .guide-card, .benchmark-card etc.
   already exist as global, unscoped rules elsewhere in this file for
   other pages; reusing those names on member pages would silently pick
   up unrelated styling. Do not reuse an unprefixed class name here.
================================================= */

.mp-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 68px;
  background: rgba(26, 16, 64, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mp-topbar-container {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
}

.mp-topbar__inner {
  height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.mp-brand img { height: 68px; width: auto; }

.mp-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.mp-nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 68px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .22s ease;
}

.mp-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--turquoise-400), var(--turquoise-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.mp-nav-links a:hover,
.mp-nav-links a.is-active { color: #fff; }

.mp-nav-links a:hover::after,
.mp-nav-links a.is-active::after { transform: scaleX(1); }

.mp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.mp-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--pink-500);
  border: 1px solid var(--pink-500);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(204, 51, 153, .16);
  transition: all .22s ease;
  white-space: nowrap;
}

.mp-nav-cta:hover { background: #b82c88; border-color: #b82c88; transform: translateY(-1px); }

.mp-logout-link {
  color: rgba(255, 255, 255, .64);
  font-size: 13px;
  font-weight: 600;
  transition: color .22s ease;
}

.mp-logout-link:hover { color: #fff; }

/* Status notice — shown instead of the app for pending/paused accounts
   (functions.php template_redirect gate, panacea_mypanacea_status_notice()). */
.mp-status-notice {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 80px 0;
  max-width: 640px;
}

.mp-status-notice h1 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -.03em;
  color: var(--navy-950);
}

.mp-status-notice p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* Home hero (placeholder copy only — no personal/profile data in P1a). */
.mp-hero { padding: 44px 0 28px; }

.mp-hero__copy {
  background: linear-gradient(135deg, #fff 0%, #fff 70%, var(--turquoise-100) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
  padding: 32px;
}

.mp-hero h1 {
  margin: 0;
  font-size: clamp(2.1rem, 3.2vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--navy-950);
  font-weight: 800;
}

.mp-hero p {
  margin: 16px 0 0;
  max-width: 66ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-700);
}

.mp-hero .mp-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mp-hero .mp-hero-note {
  /* Amendments batch M (6 Aug 2026), items 2 + 22: client asked for this note
     in black/dark grey on both Home ("Your personalised Panacea hub.") and
     Guides ("Available free as part of the Panacea community.") — a
     deliberate deviation from the design file's turquoise-700 accent colour,
     shared by both pages via this one class. */
  margin: 18px 0 0;
  color: var(--ink-900);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
}

.mp-section-divider {
  height: 1px;
  margin: 10px 0 34px;
  background: linear-gradient(to right, transparent, rgba(15, 23, 42, .08), transparent);
}

.mp-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 30px;
  align-items: start;
}

.mp-section { margin-bottom: 30px; }

.mp-section-header { margin-bottom: 14px; }
.mp-section-header h2 { margin: 0; font-size: 23px; line-height: 1.14; letter-spacing: -.04em; color: var(--ink-900); }
.mp-section-header p { margin: 8px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.65; color: var(--ink-700); }

.mp-saved-list,
.mp-guide-list { display: grid; gap: 14px; }

.mp-saved-item,
.mp-guide-card,
.mp-empty-card {
  padding: 18px 20px;
  border: 1px solid #e9edf4;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
}

.mp-empty-card { color: var(--ink-600); font-size: 14px; line-height: 1.65; }
.mp-empty-card strong { display: block; margin-bottom: 6px; color: var(--navy-950); font-size: 16px; }

.mp-benchmark-card {
  background: linear-gradient(135deg, var(--navy-950), #241553);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
  padding: 30px;
  /* Amendments batch M, items 3 + 14: decorative circle needs a positioning
     context + clipping, ported from the design's .benchmark-card. */
  position: relative;
  overflow: hidden;
}

/* Amendments batch M, item 14: decorative blue/turquoise circular graphic,
   bottom-right of the panel — ported verbatim from the design file. */
.mp-benchmark-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(83, 176, 174, .22);
}

.mp-benchmark-card h2,
.mp-benchmark-card p,
.mp-benchmark-list,
.mp-benchmark-card .mp-btn { position: relative; z-index: 1; }

.mp-benchmark-card h2 { margin: 0; color: #fff; font-size: 25px; letter-spacing: -.04em; }
.mp-benchmark-card p { margin: 14px 0 0; max-width: 86ch; color: rgba(255, 255, 255, .76); font-size: 15px; line-height: 1.7; }

.mp-benchmark-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.55;
}

.mp-benchmark-list div { display: flex; gap: 10px; align-items: flex-start; }
.mp-benchmark-list span { color: var(--turquoise-400); font-weight: 800; }

.mp-benchmark-card .mp-btn { margin-top: 24px; }

@media (max-width: 1180px) {
  .mp-topbar { height: auto; }
  .mp-topbar__inner { height: auto; padding: 16px 0 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .mp-nav-links { justify-content: flex-start; flex-wrap: wrap; }
  .mp-nav-links a { height: auto; padding: 4px 0 10px; }
  .mp-workspace-grid { grid-template-columns: 1fr; }
  .mp-benchmark-list { grid-template-columns: 1fr; }
}

.mp-greeting {
  margin: 0 0 26px;
  padding: 14px 18px;
  border: 1px solid var(--turquoise-100);
  border-radius: 10px;
  background: #fff;
  color: var(--navy-950);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .mp-topbar-container { width: min(100% - 24px, 1280px); padding: 0 12px; }
  .mp-hero { padding: 24px 0 18px; }
  .mp-hero h1 { font-size: 2.35rem; }
}

/* ============================================================
   MyPanacea auth screens (P1b registration) — INVENTED styling,
   no approved design; best-guess on member-shell + site tokens.
   All classes mp-*-prefixed to stay out of global scope.
   ============================================================ */
.mp-auth-wrap {
  width: min(100% - 40px, 640px);
  margin: 0 auto;
  padding: 56px 0 80px;
}

.mp-auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 40px;
}

.mp-auth-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mp-auth-title {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--navy-950);
  font-weight: 800;
}

/* D9 (6 Aug batch 2): [panacea_register_form] renders its own .mp-auth-wrap/
   .mp-auth-card chrome (used standalone on /mypanacea/'s login-request
   screen). Embedded inside /sign-up/'s .signup-form-card it produced a
   double-card look — supplied_files/signup.html has ONE continuous card.
   Strip the inner chrome and duplicate eyebrow/heading only in that
   context; the form's fields/JS/REST are untouched. */
.signup-form-card .mp-auth-wrap { width: 100%; margin: 0; padding: 0; }
.signup-form-card .mp-auth-card { padding: 0; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
/* Eyebrow/heading duplicate the outer card's own "Join for free" / "Create
   your account" — hidden. mp-auth-sub (FCA verification note) is kept: it's
   information the outer copy doesn't cover and isn't in the design. */
.signup-form-card .mp-auth-eyebrow,
.signup-form-card .mp-auth-title { display: none; }
.signup-form-card .mp-auth-sub { margin-top: -4px; }

.mp-auth-sub {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
}

.mp-form { display: block; }

.mp-form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mp-field { margin-bottom: 16px; }

.mp-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-950);
}

.mp-field .mp-optional { font-weight: 500; color: var(--ink-600); }

.mp-field input[type="text"],
.mp-field input[type="email"],
.mp-field input[type="password"],
.mp-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mp-field input:focus,
.mp-field select:focus {
  outline: none;
  border-color: var(--turquoise-500);
  box-shadow: 0 0 0 3px var(--turquoise-100);
}

.mp-field-hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-600);
  line-height: 1.5;
}

.mp-field--check { margin: 8px 0 22px; }

.mp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-700);
  font-weight: 500;
  cursor: pointer;
}

.mp-check input { margin-top: 3px; flex: 0 0 auto; }
.mp-check a { color: var(--turquoise-700); text-decoration: underline; }

/* Honeypot — visually + programmatically hidden from humans. */
.mp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mp-form-submit {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--pink-500);
  border-radius: 10px;
  background: var(--pink-500);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

.mp-form-submit:hover:not(:disabled) {
  background: #b82c88;
  border-color: #b82c88;
  transform: translateY(-1px);
}

.mp-form-submit:disabled { opacity: .65; cursor: default; }

.mp-form-message {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}

.mp-form-message.is-visible { display: block; }

.mp-form-message--success {
  background: var(--turquoise-100);
  border: 1px solid var(--turquoise-500);
  color: var(--navy-950);
}

.mp-form-message--error {
  background: #fdecf3;
  border: 1px solid var(--pink-500);
  color: #8a1f5f;
}

.mp-form-foot {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--ink-600);
  text-align: center;
}

.mp-form-foot a { color: var(--turquoise-700); font-weight: 700; }

@media (max-width: 560px) {
  .mp-auth-card { padding: 28px 22px; }
  .mp-form-row--split { grid-template-columns: 1fr; gap: 0; }
}

/* =================================================
   MYPANACEA — MARKET INTELLIGENCE (P4a)
   Member-scoped (mp-mi-*) — extracted from
   supplied_files/MyPanacea/market-intelligence.html.
   Generic design classes (.filter-card/.table-card/.tab/
   .share-pill …) are unscoped globals on this site, so
   every MI class is prefixed to avoid collision.
================================================= */

.mp-mi { padding: 34px 0 70px; }
.mp-mi .container { width: min(1280px, calc(100% - 40px)); margin: 0 auto; }

/* QA preview control bar */
.mp-mi-filter {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-top: 3px solid var(--turquoise-500);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.mp-mi-filter-grid {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.6fr auto;
  gap: 20px;
  align-items: end;
}

.mp-mi-label {
  display: block;
  margin-bottom: 10px;
  color: var(--navy-950);
  font-size: 14px;
  font-weight: 800;
}

.mp-mi-filter input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  padding: 0 14px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  outline: none;
  transition: all 0.22s ease;
}

.mp-mi-filter input:focus {
  border-color: var(--pink-500);
  box-shadow: 0 0 0 4px rgba(204, 51, 153, 0.08);
}

.mp-mi-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.mp-mi-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e4e9f1;
  background: #fff;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s ease;
}

.mp-mi-pill.active {
  background: var(--turquoise-500);
  border-color: var(--turquoise-500);
  color: #fff;
  box-shadow: 0 8px 18px rgba(83, 176, 174, 0.16);
}

.mp-mi-pill input { position: absolute; opacity: 0; width: 0; height: 0; }

.mp-mi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--pink-500);
  border: 1px solid var(--pink-500);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(204, 51, 153, 0.16);
  cursor: pointer;
  transition: all 0.22s ease;
}

.mp-mi-btn:hover { background: #b82c88; border-color: #b82c88; transform: translateY(-1px); }

.mp-mi-filter-note { margin: 12px 0 0; font-size: 12px; color: var(--ink-500); font-weight: 700; }
.mp-mi-hint { margin: 4px 0 0; color: var(--ink-600); font-size: 14px; }

/* Amendments batch M — split area/period controls (items 16 + reporting-
   period rework). .mp-mi-filter-grid--area is the typed postcode-area
   control at the top; .mp-mi-filter-grid--period is the reporting-period
   pills moved to sit just above the Flows tables. */
.mp-mi-filter-grid--area,
.mp-mi-filter-grid--period {
  grid-template-columns: 1fr auto;
}
.mp-mi-filter--period { margin: 22px 0 18px; }
@media (max-width: 640px) {
  .mp-mi-filter-grid--area,
  .mp-mi-filter-grid--period { grid-template-columns: 1fr; }
}

/* Item 18 — "Show N entries" dropdown in a table's header. */
.mp-mi-table-tools { display: flex; align-items: center; }
.mp-mi-entries {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 700;
}
.mp-mi-entries-select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
}

/* Item 20 — CSV download button (green: an on-site "generate my own data"
   action, not an external link). */
.mp-mi-btn--csv {
  background: var(--turquoise-500);
  border-color: var(--turquoise-500);
}
.mp-mi-btn--csv:hover { background: var(--turquoise-700); border-color: var(--turquoise-700); }

/* QA preview banner */
.mp-mi-preview-banner {
  margin-bottom: 22px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

/* cards */
.mp-mi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 26px;
  margin-bottom: 22px;
}

.mp-mi-card h2 { margin: 0; color: var(--navy-950); font-size: 24px; letter-spacing: -0.04em; }
.mp-mi-card p { margin: 9px 0 0; color: var(--ink-700); font-size: 14px; line-height: 1.65; }

.mp-mi-notice { border-left: 4px solid var(--turquoise-500); }
.mp-mi-placeholder { border-top: 3px solid var(--turquoise-500); }

.mp-mi-report-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mp-mi-report-actions p { max-width: 74ch; }
.mp-mi-report-actions small {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* position summary */
.mp-mi-position {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 26px;
  margin-bottom: 26px;
}

.mp-mi-position h2 { margin: 0; color: var(--navy-950); font-size: 24px; letter-spacing: -0.04em; }

.mp-mi-rank {
  margin-top: 16px;
  padding: 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-950), #241553);
  color: #fff;
}

.mp-mi-rank strong { display: block; font-size: clamp(1.7rem, 2.4vw, 2.45rem); line-height: 1; letter-spacing: -0.06em; }
.mp-mi-rank span { display: block; margin-top: 10px; color: rgba(255, 255, 255, 0.74); font-size: 14px; line-height: 1.5; font-weight: 700; }

.mp-mi-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.mp-mi-metric { padding: 14px; border: 1px solid #edf2f7; border-radius: 10px; background: #f8fafc; }
.mp-mi-metric small { display: block; color: var(--ink-600); font-size: 12px; font-weight: 800; }
.mp-mi-metric strong { display: block; margin-top: 8px; color: var(--navy-950); font-size: 22px; letter-spacing: -0.05em; }

.mp-mi-note { margin: 16px 0 0; color: var(--ink-500); font-size: 12px; font-weight: 700; }

/* tabs */
.mp-mi-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.mp-mi-tab {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.22s ease;
}

.mp-mi-tab.active { background: var(--turquoise-500); border-color: var(--turquoise-500); color: #fff; box-shadow: 0 8px 18px rgba(83, 176, 174, 0.16); }
.mp-mi-tab:hover { border-color: var(--pink-500); color: var(--pink-500); transform: translateY(-1px); }
.mp-mi-tab.active:hover { background: var(--pink-500); border-color: var(--pink-500); color: #fff; }

/* table cards */
.mp-mi-table-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 22px;
  display: none;
}

.mp-mi-table-card.active-table { display: block; }

.mp-mi-table-header { padding: 24px; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mp-mi-table-header h2 { margin: 0; color: var(--navy-950); font-size: 22px; letter-spacing: -0.04em; }
.mp-mi-table-header p { margin: 9px 0 0; color: var(--ink-700); font-size: 14px; }

.mp-mi-table-wrap { overflow-x: auto; }

.mp-mi-tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.mp-mi-tbl th, .mp-mi-tbl td { padding: 15px 18px; border-bottom: 1px solid #edf2f7; text-align: left; font-size: 14px; white-space: nowrap; }
.mp-mi-tbl th { background: #f8fafc; color: var(--navy-950); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; }
.mp-mi-tbl td { color: var(--ink-700); font-weight: 650; }
.mp-mi-tbl td:first-child { color: var(--ink-900); font-weight: 800; }
.mp-mi-tbl tbody tr { transition: background 0.22s ease; }
.mp-mi-tbl tbody tr:hover { background: #fbf7fd; }
.mp-mi-tbl tbody tr:hover td:first-child { color: var(--pink-500); }
.mp-mi-empty { color: var(--ink-500); font-weight: 700; text-align: center; }

.mp-mi-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--turquoise-100);
  color: var(--turquoise-700);
  font-size: 13px;
  font-weight: 800;
}

.mp-mi-share.zero { background: #f3f4f6; color: var(--ink-500); }

.mp-mi-table-footer { padding: 16px 24px; color: var(--ink-600); font-size: 13px; font-weight: 700; }

@media (max-width: 1024px) {
  .mp-mi-filter-grid { grid-template-columns: 1fr; }
  .mp-mi-metrics { grid-template-columns: 1fr; }
}

/* =================================================
   MYPANACEA — MARKET INTELLIGENCE (P4b)
   Member controls, position rank, QoQ movement,
   percentile-score SVG chart, unbenchmarked state.
   Member-scoped (mp-mi-*); chart styling extracted +
   adapted from the design mock (invented 0-100 band).
================================================= */

/* member controls: area selector + period pills + Update analysis */
.mp-mi-filter-grid--member { grid-template-columns: 0.85fr 1.6fr auto; }
.mp-mi-filter--member select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  padding: 0 14px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  outline: none;
  transition: all 0.22s ease;
}
.mp-mi-filter--member select:focus {
  border-color: var(--pink-500);
  box-shadow: 0 0 0 4px rgba(204, 51, 153, 0.08);
}
.mp-mi-area-static {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #e4e9f1;
  background: #f8fafc;
  color: var(--navy-950);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* overview grid: position card + percentile trend card */
.mp-mi-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  margin-bottom: 26px;
}

.mp-mi-position, .mp-mi-trend {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 26px;
  margin-bottom: 0;
}

.mp-mi-trend h2 { margin: 0; color: var(--ink-950); font-size: 24px; line-height: 1.14; letter-spacing: -0.04em; }
.mp-mi-trend > p { margin: 9px 0 0; color: var(--ink-700); font-size: 14px; line-height: 1.65; }

/* QoQ movement chip */
.mp-mi-movement {
  display: inline-flex;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(83, 176, 174, 0.16);
  color: var(--turquoise-400);
  font-size: 13px;
  font-weight: 800;
}
.mp-mi-movement.down { background: rgba(204, 51, 153, 0.14); color: #e879c3; }
.mp-mi-movement.flat { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.78); }

/* percentile SVG chart */
.mp-mi-chart-wrap {
  margin-top: 18px;
  padding: 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
}
.mp-mi-chart { width: 100%; height: 230px; display: block; }
.mp-mi-chart-grid line { stroke: #e3e8f0; stroke-width: 1; }
.mp-mi-chart-line { fill: none; stroke: var(--turquoise-500); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mp-mi-chart-area { fill: rgba(83, 176, 174, 0.14); stroke: none; }
.mp-mi-chart-dot { fill: #fff; stroke: var(--turquoise-500); stroke-width: 4; }
.mp-mi-chart-label { fill: var(--ink-600); font-size: 12px; font-weight: 800; }
.mp-mi-chart-note { margin-top: 12px; color: var(--ink-500); font-size: 12px; line-height: 1.55; font-weight: 700; }
.mp-mi-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}
.mp-mi-chart-empty p { margin: 0; color: var(--ink-500); font-size: 14px; font-weight: 700; }

/* --- P5 Key Opportunities insights panel (member-scoped mp-mi-*) --------
   Extracted from supplied_files/MyPanacea/market-intelligence.html
   (.section-title / .insight-grid / .insight-card). */
.mp-mi-insights { margin-bottom: 34px; }
.mp-mi-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.mp-mi-section-title h2 { margin: 0; color: var(--ink-950); font-size: 24px; line-height: 1.14; letter-spacing: -0.04em; }
.mp-mi-section-title p { margin: 9px 0 0; color: var(--ink-700); font-size: 14px; line-height: 1.65; }

.mp-mi-insight-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.mp-mi-insight-card {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line, #e6ebf3);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.mp-mi-insight-card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-500);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.mp-mi-insight-card:hover h3 { color: var(--pink-500); }
.mp-mi-insight-card small {
  display: block;
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mp-mi-insight-card h3 {
  margin: 10px 0 8px;
  color: var(--navy-950);
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: -0.035em;
  transition: color 0.22s ease;
}
.mp-mi-insight-card p { margin: 0; color: var(--ink-700); font-size: 13px; line-height: 1.55; }

.mp-mi-insights-empty {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line, #e6ebf3);
  border-left: 4px solid var(--turquoise-500);
  border-radius: 10px;
}
.mp-mi-insights-empty p { margin: 0; color: var(--ink-600); font-size: 14px; line-height: 1.6; font-weight: 700; }

@media (max-width: 1024px) {
  .mp-mi-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mp-mi-insight-grid { grid-template-columns: 1fr; }
}

/* unbenchmarked / benchmarking-locked state */
.mp-mi-locked { border-top: 3px solid var(--turquoise-500); }
.mp-mi-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mp-mi-locked-list { margin: 14px 0 0; padding-left: 20px; color: var(--ink-700); font-size: 14px; line-height: 1.7; }
.mp-mi-locked-list li { margin: 4px 0; }

/* P2 — Market Profile unlock gate (benchmarking-locked.html) */
.mp-mi-unlock-status { margin: 18px 0; padding: 16px; border: 1px solid #e9edf4; border-radius: 10px; background: #f8fafc; }
.mp-mi-unlock-progress { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: var(--navy-950); }
.mp-mi-unlock-status .mp-progress-bar { margin-bottom: 10px; }
.mp-mi-unlock-status p { margin: 0; color: var(--ink-600); font-size: 13px; line-height: 1.55; }
.mp-mi-unlock-form .mp-pf-market-grid { margin-top: 18px; }
.mp-mi-unlock-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #edf2f7; }
.mp-mi-unlock-actions small { color: var(--ink-600); font-size: 12px; }

@media (max-width: 1024px) {
  .mp-mi-filter-grid--member { grid-template-columns: 1fr; }
  .mp-mi-overview { grid-template-columns: 1fr; }
}

/* ============================================================
   MyPanacea member content pages — Guides + My Profile
   (P2-demo: Guides functional; Profile visual-only, no saving).
   All classes mp-* / mp-gd-* / mp-pf-* prefixed — no global collisions.
   Design source: supplied_files/MyPanacea/{guides,profile}.html.
   ============================================================ */

.mp-page-main { padding: 0 0 70px; }

/* --- shared hero grid + member profile card + completion meter --- */
.mp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 30px;
  align-items: stretch;
}
.mp-hero-grid .mp-hero__copy {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mp-profile-card {
  min-height: 230px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.mp-profile-row { display: flex; align-items: center; gap: 14px; }
.mp-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-950), var(--pink-500));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.mp-profile-copy strong { display: block; color: var(--navy-950); font-size: 17px; letter-spacing: -.02em; }
.mp-profile-copy span { display: block; margin-top: 4px; color: var(--ink-600); font-size: 13px; }

.mp-completion-card {
  padding: 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
}
.mp-completion-card strong { display: block; color: var(--navy-950); font-size: 14px; margin-bottom: 8px; }
.mp-completion-card p { margin: 8px 0 0; color: var(--ink-600); font-size: 13px; line-height: 1.55; }
.mp-progress-bar { height: 8px; border-radius: 999px; background: #e6ebf2; overflow: hidden; }
.mp-progress-bar span { display: block; width: 80%; height: 100%; background: linear-gradient(to right, var(--turquoise-400), var(--turquoise-500)); }

/* --- shared member buttons --- */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--pink-500);
  border: 1px solid var(--pink-500);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(204, 51, 153, .16);
  transition: all .22s ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.mp-btn:hover { background: #b82c88; border-color: #b82c88; transform: translateY(-1px); color: #fff; }
.mp-btn--secondary { background: #fff; color: var(--navy-950); border-color: var(--line); box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05)); }
.mp-btn--secondary:hover { background: #fff; color: var(--pink-500); border-color: var(--pink-500); }
.mp-btn--danger { background: #fff; color: #b42318; border-color: rgba(180, 35, 24, .28); box-shadow: none; }
.mp-btn--danger:hover { background: #fef3f2; color: #b42318; border-color: #b42318; }
.mp-btn:disabled, .mp-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.mp-btn:disabled:hover, .mp-btn[disabled]:hover { transform: none; }
.mp-btn--secondary:disabled:hover { background: #fff; color: var(--navy-950); border-color: var(--line); }

/* Amendments batch M — green "on-site action" modifier, mirroring the main
   site's sitewide convention (green = on-site action, pink = external link;
   see .btn--primary in the main site rules). Additive: class="mp-btn
   mp-btn--primary". Used for the Home MI teaser CTA (item 13) and the
   Guides "Download PDF" button (item 26). */
.mp-btn--primary { background: var(--turquoise-500); border-color: var(--turquoise-500); box-shadow: 0 8px 18px rgba(83, 176, 174, .18); }
.mp-btn--primary:hover { background: var(--turquoise-700); border-color: var(--turquoise-700); color: #fff; }

/* "PDF coming soon" — graceful disabled state for a Download PDF button
   while _pdf_url is still "#" (guide PDFs are client-blocked). Rendered as a
   non-link <span> so it is not focusable/clickable, per the disabled visual
   convention already used on .mp-btn[disabled]. */
.mp-btn--disabled,
.mp-btn--disabled:hover {
  opacity: .55;
  cursor: not-allowed;
  background: var(--ink-500);
  border-color: var(--ink-500);
  box-shadow: none;
  transform: none;
  color: #fff;
}

/* --- Guides page accordion cards --- */
.mp-gd-list { display: grid; gap: 16px; }
.mp-gd-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
  overflow: hidden;
  transition: all .22s ease;
}
.mp-gd-card:hover { border-color: rgba(204, 51, 153, .35); box-shadow: var(--shadow-md, 0 18px 40px rgba(15, 23, 42, .08)); transform: translateY(-1px); }
.mp-gd-summary {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  text-align: left;
  color: inherit;
  font-family: inherit;
}
.mp-gd-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #f7f2fb;
  border: 1px solid rgba(204, 51, 153, .16);
  color: var(--pink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
}
.mp-gd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--turquoise-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.mp-gd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--turquoise-500); flex: 0 0 auto; }
.mp-gd-summary h3 { margin: 0; color: var(--navy-950); font-size: 22px; line-height: 1.18; letter-spacing: -.04em; transition: color .22s ease; }
.mp-gd-summary p { margin: 7px 0 0; color: var(--ink-600); font-size: 14px; line-height: 1.55; }
.mp-gd-card:hover .mp-gd-summary h3 { color: var(--pink-500); }
.mp-gd-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  color: var(--turquoise-700);
  font-size: 14px;
  font-weight: 800;
  transition: all .22s ease;
  white-space: nowrap;
}
.mp-gd-card:hover .mp-gd-expand { color: var(--pink-500); transform: translateX(2px); }
.mp-gd-details { display: none; padding: 0 24px 24px 94px; }
.mp-gd-card.is-open .mp-gd-details { display: block; }
.mp-gd-panel { border-top: 1px solid #edf2f7; padding-top: 22px; }
.mp-gd-panel h4 { margin: 0 0 12px; color: var(--navy-950); font-size: 17px; line-height: 1.3; letter-spacing: -.025em; }
.mp-gd-panel p { margin: 0; color: var(--ink-700); font-size: 14px; line-height: 1.65; max-width: 76ch; }
.mp-gd-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }

/* Amendments batch M, item 25: full overview + "Who it's for" audience box,
   ported from the design's .detail-panel/.tick-list/.audience-card. */
.mp-gd-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 28px;
  border-top: 1px solid #edf2f7;
  padding-top: 22px;
}
.mp-gd-panel-grid .mp-gd-panel { border-top: 0; padding-top: 0; }

.mp-gd-tick-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.mp-gd-tick-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.55;
}
.mp-gd-tick-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--turquoise-700);
  font-weight: 800;
}

.mp-gd-audience {
  padding: 18px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  align-self: start;
}
.mp-gd-audience h4 { margin: 0; color: var(--navy-950); font-size: 15px; }
.mp-gd-audience ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .mp-gd-panel-grid { grid-template-columns: 1fr; }
}

/* Amendments batch M, item 9: mini guide cards + saved-article-style cards
   used on the MyPanacea Home page (My Saved Articles / Latest Guides),
   ported from the design's .article-meta/.guide-meta/.dot + card typography
   (the .mp-saved-item/.mp-guide-card boxes above already carry the design's
   border/shadow, just missing this inner typography). */
.mp-article-meta,
.mp-guide-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #536179;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.mp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--turquoise-500); flex: 0 0 auto; }

.mp-saved-item h3,
.mp-guide-card h3 {
  margin: 0;
  color: #20283a;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -.025em;
  font-weight: 800;
  transition: color .22s ease;
}
.mp-saved-item:hover h3,
.mp-guide-card:hover h3 { color: var(--pink-500); }
.mp-saved-item p,
.mp-guide-card p { margin: 12px 0 0; color: #66738a; font-size: 14px; line-height: 1.6; }
.mp-saved-item:hover,
.mp-guide-card:hover { border-color: rgba(204, 51, 153, .35); transform: translateY(-1px); }

.mp-mini-link,
.mp-article-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--turquoise-700);
  font-size: 15px;
  font-weight: 800;
  transition: all .22s ease;
}
.mp-mini-link:hover,
.mp-article-link:hover { color: var(--pink-500); transform: translateX(2px); }

.mp-saved-item h3 a { color: inherit; text-decoration: none; }

/* Amendments M4 (Save Article), items 7+8: Home "My Saved Articles" — the
   Total Reading Time line, the unsave "×" on each saved item, and the
   "Showing N of M" cap note. See [panacea_member_home_saved] in
   class-mypanacea-saved-articles.php. */
.mp-saved-total {
  margin: 0 0 14px;
  color: var(--navy-950);
  font-size: 13px;
  font-weight: 800;
}
.mp-saved-total strong { color: var(--turquoise-700); }

.mp-saved-item { position: relative; padding-right: 44px; }

.mp-unsave-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: #97a2b4;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all .18s ease;
}
.mp-unsave-btn:hover { background: #fef3f8; border-color: rgba(204, 51, 153, .28); color: var(--pink-500); }
.mp-unsave-btn:disabled { opacity: .5; cursor: not-allowed; }

.mp-saved-more {
  margin: 14px 0 0;
  color: var(--ink-600);
  font-size: 13px;
}

/* --- Profile page --- */
.mp-pf-notice {
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 10px;
  background: #fbf7fd;
  border: 1px solid rgba(204, 51, 153, .22);
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.6;
}
.mp-pf-notice strong { color: var(--navy-950); }
.mp-pf-notice a { color: var(--turquoise-700); font-weight: 800; text-decoration: underline; }

.mp-pf-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.mp-pf-nav {
  position: sticky;
  top: 92px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
  padding: 12px;
}
.mp-pf-nav h2 { margin: 8px 10px 12px; color: var(--navy-950); font-size: 16px; letter-spacing: -.03em; }
.mp-pf-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 10px;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
  transition: all .22s ease;
}
.mp-pf-nav a:hover, .mp-pf-nav a.is-active { background: #fbf7fd; color: var(--pink-500); transform: translateX(2px); }
.mp-pf-status { font-size: 12px; font-weight: 800; }
.mp-pf-status.ok { color: var(--turquoise-700); }
.mp-pf-status.warn { color: var(--pink-500); }
.mp-pf-sep { height: 1px; margin: 10px 0; background: #edf2f7; }

.mp-pf-content { display: grid; gap: 24px; }
.mp-pf-section {
  scroll-margin-top: 100px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
  padding: 28px;
}
.mp-pf-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #edf2f7;
}
.mp-pf-section h2 { margin: 0; color: var(--ink-950); font-size: 24px; line-height: 1.14; letter-spacing: -.04em; }
.mp-pf-section__header p { margin: 9px 0 0; max-width: 70ch; color: var(--ink-700); font-size: 14px; line-height: 1.65; }

.mp-pf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mp-pf-field label { display: block; margin-bottom: 8px; color: var(--navy-950); font-size: 13px; font-weight: 800; }
.mp-pf-field input, .mp-pf-field select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  padding: 0 14px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 650;
  font-family: inherit;
  background: #fff;
  outline: none;
}
.mp-pf-field input[readonly], .mp-pf-field select[disabled] { background: #f8fafc; color: var(--ink-600); cursor: default; }
.mp-pf-actions { display: flex; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid #edf2f7; }

.mp-pf-pref-list { display: grid; gap: 14px; }
.mp-pf-pref-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid #e9edf4;
  border-radius: 10px;
  background: #fff;
}
.mp-pf-pref-card h3 { margin: 0; color: var(--navy-950); font-size: 17px; line-height: 1.3; letter-spacing: -.025em; }
.mp-pf-pref-card p { margin: 6px 0 0; color: var(--ink-600); font-size: 13px; line-height: 1.55; }
.mp-pf-switch { position: relative; display: inline-flex; width: 52px; height: 30px; flex: 0 0 auto; }
.mp-pf-switch input { opacity: 0; width: 0; height: 0; }
.mp-pf-slider { position: absolute; inset: 0; border-radius: 999px; background: #d0d5dd; transition: all .22s ease; }
.mp-pf-slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
  transition: all .22s ease;
}
.mp-pf-switch input:checked + .mp-pf-slider { background: var(--turquoise-500); }
.mp-pf-switch input:checked + .mp-pf-slider::before { transform: translateX(22px); }

.mp-pf-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mp-pf-option { border: 1px solid #e9edf4; border-radius: 10px; padding: 20px; background: #fff; }
.mp-pf-option h3 { margin: 0 0 4px; color: var(--navy-950); font-size: 17px; letter-spacing: -.025em; }
.mp-pf-option p { margin: 0 0 14px; color: var(--ink-600); font-size: 13px; }
.mp-pf-check-list { display: grid; gap: 10px; }
.mp-pf-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid #e4e9f1;
  border-radius: 10px;
  background: #fff;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
}
.mp-pf-check input { width: 16px; height: 16px; min-height: auto; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--pink-500); }

.mp-pf-privacy, .mp-pf-account { padding: 20px; border: 1px solid #e9edf4; border-radius: 10px; background: #fff; }
.mp-pf-privacy + .mp-pf-privacy, .mp-pf-account + .mp-pf-account { margin-top: 16px; }
.mp-pf-privacy h3, .mp-pf-account h3 { margin: 0; color: var(--navy-950); font-size: 18px; line-height: 1.3; letter-spacing: -.03em; }
.mp-pf-privacy p { margin: 10px 0 0; color: var(--ink-700); font-size: 14px; line-height: 1.65; }
.mp-pf-privacy .mp-pf-actions { margin-top: 20px; justify-content: flex-start; }
.mp-pf-privacy-link { color: var(--turquoise-700); font-weight: 800; }
.mp-pf-account { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.mp-pf-account p { margin: 6px 0 0; color: var(--ink-600); font-size: 13px; line-height: 1.55; }
.mp-pf-account .mp-btn { min-width: 150px; }
.mp-pf-account--danger { border-color: rgba(180, 35, 24, .22); }

@media (max-width: 1180px) {
  .mp-hero-grid { grid-template-columns: 1fr; }
  .mp-hero-grid .mp-hero__copy, .mp-profile-card { min-height: 0; }
  .mp-pf-layout, .mp-pf-market-grid { grid-template-columns: 1fr; }
  .mp-pf-nav { position: static; }
}

@media (max-width: 760px) {
  .mp-gd-summary { grid-template-columns: 1fr; }
  .mp-gd-details { padding: 0 20px 22px; }
  .mp-gd-expand { justify-content: flex-start; }
  .mp-pf-form-grid { grid-template-columns: 1fr; }
  .mp-pf-pref-card, .mp-pf-account { grid-template-columns: 1fr; }
  .mp-pf-actions { justify-content: stretch; }
  .mp-btn { width: 100%; }
}

/* Item 123 (13 Aug 2026) — /mypanacea/ sign-in mirrors
   supplied_files/mypanacea.html (two-column .login-layout, page hero above).
   The shared .form-grid is 1fr 1fr for the sign-up form's paired name fields;
   this design stacks Work email above Password, so scope it back to one
   column here (matches the design file's own .form-grid rule). */
/* Item 216 (13 Aug 2026) — Ask Panacea now has the site's navy .page-hero above
   the search box, so .ask-hero's original 72px top padding (which framed the
   page when it carried the heading itself) leaves too big a gap. */
.ask-hero--below-page-hero {
  padding-top: 36px;
}

.login-form-card .form-grid {
  grid-template-columns: 1fr;
}

/* The blanket `.login-form-card input {width:100% !important; min-height:48px
   !important}` rule (added for the text fields) also caught the "Keep me
   signed in" checkbox, stretching it to 74x48px. Same override the sign-up
   card needed for its GDPR checkbox; 18px matches the site's other
   checkboxes (.checkbox-label, .wpforms GDPR). */
.login-form-card .checkbox-row input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--turquoise-700);
}

.mp-login-section {
  padding: 40px 0 64px;
}

/* Partner page in-place insight expansion (14 Aug). The revealed items reuse
   .partner-insight-item, so they need no styling of their own — this just makes
   the toggle read as the existing .section-link rather than a browser button. */
/* The expansion wrapper must not become a grid item itself, or all the
   revealed articles stack inside one cell. display:contents lets them
   participate in .partner-insight-list's grid directly; the [hidden]
   rule (higher specificity) still hides them when collapsed. */
.partner-insight-more {
  display: contents;
}

.partner-insight-more[hidden] {
  display: none;
}

/* The first revealed article is :first-child of the wrapper, so the existing
   `.partner-insight-item:first-child { border-top: 0 }` rule stripped its
   separator — but visually it follows the last visible article, so it needs
   one. Restores the same 1px rule the other items carry. */
.partner-insight-more > .partner-insight-item:first-child {
  border-top: 1px solid #d7dce3;
  padding-top: 18px;
}

.partner-insight-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* Mid-page banner video (14 Aug). Fills the slot exactly as the previous GIF
   did. Motion in a banner is a common accessibility complaint, so anyone with
   prefers-reduced-motion gets the poster still instead — the <video> is hidden
   and the fallback <img> inside it shows through. */
.midpage-banner-video {
  width: 100%;
  height: auto;
  display: block;
}

/* Reduced motion is handled in JS (interactions.js): the video is paused and
   reset, which leaves its own poster frame on screen. Doing it in CSS would
   mean hiding the <video> and re-declaring the poster as a background image —
   the URL isn't available to this stylesheet, and a paused video already shows
   exactly the right still. */

/* Market Intelligence loading overlay (14 Aug). An uncached postcode area can
   take several seconds to render, so the controls report progress instead of
   the page appearing frozen. */
.mp-mi-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 16, 64, 0.55);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.mp-mi-loading.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mp-mi-loading__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 34px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  max-width: min(90vw, 380px);
  text-align: center;
}

.mp-mi-loading__text {
  font-weight: 700;
  color: var(--ink-900);
}

.mp-mi-loading__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-600);
}

.mp-mi-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(83, 176, 174, 0.25);
  border-top-color: var(--turquoise-500);
  animation: mp-mi-spin 0.8s linear infinite;
}

@keyframes mp-mi-spin {
  to { transform: rotate(360deg); }
}

/* Respect reduced motion: keep the message, drop the spin. */
@media (prefers-reduced-motion: reduce) {
  .mp-mi-spinner { animation: none; }
}