.home-search-row {
  background: var(--white);
  padding: 0 0 var(--space-3);
  margin-top: 0;
  position: sticky;
  top: calc(var(--topbar-height) - 55px);
  z-index: 90;
}
.home-pills-row {
  /* No visible content on the home page (the inner element only
     hosts hover-triggers for the navbar mega-menu), so we keep
     it transparent to avoid painting a stray white stripe across
     the page that reads as a "second header" below the navbar. */
  background: transparent;
  padding: 0;
}
.home-pills-row .home-search-row-inner {
  padding-top: 0;
  position: relative;
}
.home-browse-all-link {
  display: inline-block;
  margin-left: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.home-browse-all-link:hover {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-search-row.unstick {
  position: relative;
}

.home-ren-chat-row.ren-sticky {
  position: sticky;
  top: var(--topbar-height);
  z-index: 89;
  padding-top: var(--space-3);
  padding-bottom: var(--space-4);
}
.home-ren-prompt-row.ren-sticky {
  position: sticky;
  top: calc(var(--topbar-height) - 8px);
  z-index: 89;
  padding-top: var(--space-2);
}

.home-search-row-inner {
  max-width: var(--landing-container, 1425px);
  margin: 0 auto;
  padding: 60px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-search-bar.home-search-bar--hero {
  width: 100%;
  max-width: 1425px;
  height: 68px;
  box-sizing: border-box;
  padding: 0 var(--space-4-5) 0 var(--space-6);
  font-size: calc(var(--text-base) * 1.2);
  border-radius: 16px;
}

.home-search-bar--hero .activity-search-input {
  font-size: calc(var(--text-base) * 1.2);
}

.home-search-bar--hero .activity-search-input::placeholder {
  font-weight: 400;
  color: #CCCCCC;
  font-size: 16px;
}

.home-search-bar--hero .geo-filter-inline {
  font-size: 16px;
  font-weight: 400;
  color: var(--navy);
}

.geo-filter-inline.geo-filter-disabled,
.geo-filter-inline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--gray-mid);
}

.home-search-bar--hero .geo-filter-pipe {
  font-size: calc(var(--text-sm) * 1.2);
  color: var(--navy);
}

.home-search-bar--hero .home-search-icon svg {
  width: 19px;
  height: 19px;
}

.home-search-btn-pill {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 10px var(--space-6);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 150ms ease;
}

/* "Clear results" link sits to the right of the page search bar on
   /explore and /work. Mid-gray text link using the canonical token. */
.page-search-bar-inner,
.mw-search-form {
  display: flex;
  align-items: center;
}
.page-search-bar-inner > .free-hero-search,
.mw-search-form > .activity-search-bar {
  flex: 1 1 auto;
  min-width: 0;
}
.clear-results-link {
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
  margin-left: var(--space-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.clear-results-link:hover { text-decoration: underline; }

.home-search-btn-pill:hover {
  opacity: 0.85;
}

.home-search-row .clear-results-link {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 15px;
  margin: 0;
  align-self: center;
  line-height: 1;
  transform: translateY(2px);
}

.home-search-row-free {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--navy);
  text-align: center;
}

.home-search-row-free em {
  font-style: normal;
  color: var(--pink);
  font-weight: var(--font-weight-medium);
}

.home-filter-bar.home-filter-bar--hero {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-5);
  gap: var(--space-2);
  width: 100%;
  max-width: 1425px;
  margin-top: 0;
}

.home-filter-bar--hero .home-filter-tab {
  border: none;
  border-radius: 999px;
  padding: var(--space-2) var(--space-4-5);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--navy);
  background: var(--gray-white);
  box-shadow: none;
  transition: color 150ms ease, background 150ms ease;
}

.home-filter-bar--hero .home-filter-tab:hover {
  background: var(--gray-light);
  color: var(--navy);
}

.home-filter-bar.home-filter-bar--hero .home-filter-tab.active {
  box-shadow: none;
  background: var(--navy);
  color: var(--white);
  font-weight: var(--font-weight-medium);
}

.home-search-divider-row {
  background: var(--white);
  padding: 25px 0;
}

.home-search-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--landing-container, 1425px);
  margin: 0 auto;
  gap: var(--space-4);
}

.home-search-divider::before,
.home-search-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-light);
}

.home-search-divider span {
  font-size: var(--text-sm);
  color: #666666;
  white-space: nowrap;
}

.home-ren-prompt-row {
  background: var(--white);
  text-align: center;
  padding: 0 0 var(--space-2);
}

.home-ren-chat-row {
  background: var(--white);
  display: flex;
  justify-content: center;
  padding: 0 0 var(--space-6);
}

.home-ren-chat-row .irc-input-wrapper {
  width: 60%;
  max-width: 700px;
}

.home-ren-chat-row .irc-input-pill {
  min-height: 68px;
  border: 0.5px solid #cccccc;
  border-radius: 999px;
  padding: 14px var(--space-4) 14px var(--space-7-5);
  box-sizing: border-box;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  align-items: center;
}

.home-ren-chat-row .irc-input-icon {
  display: none;
}

.home-ren-chat-row .irc-ren-stars-icon {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.home-ren-chat-row .irc-input {
  font-size: 16px;
  font-weight: 400;
  color: var(--navy);
}

.home-ren-chat-row .irc-input::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: #CCCCCC;
}

.home-ren-chat-row .irc-send-btn {
  opacity: 1;
  pointer-events: auto;
  width: 40px;
  height: 40px;
}

.home-ren-chat-row .irc-send-btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .home-search-row {
    padding: var(--space-4) 0 var(--space-3);
  }
  .home-search-bar--hero {
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
    border-radius: 12px;
    /* Match the mobile pill height used on /free and /explore.
       The desktop rule sets `height: 68px` (fixed) which carries
       over to mobile; we override it here so Files/Projects/Kits
       render at the same 54px as the other pages. Both `height`
       and `min-height` are set so the value wins regardless of
       which property the browser picks up. */
    height: 54px;
    min-height: 54px;
  }
  .home-search-bar--hero .activity-search-input {
    font-size: var(--text-base);
  }
  .home-search-bar--hero .geo-filter-inline,
  .home-search-bar--hero .geo-filter-pipe {
    font-size: var(--text-sm);
  }
  .home-search-row-inner {
    padding: 0 var(--space-5);
  }
  .home-search-row-free {
    font-size: 12px;
  }
}

.home-search-section {
  padding: var(--space-6) 0 var(--space-8);
  overflow: visible;
}

.home-cards-container {
  max-width: 1425px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.03);
  padding: var(--space-10) var(--space-10) var(--space-5);
  box-sizing: border-box;
}

/* Hover behavior: when any list row is hovered/active, tint the entire
   right column #fafafa instead of darkening the inner preview-section. */
.home-cards-container:has(.home-popular-list .activity-item:hover),
.home-cards-container:has(.home-popular-list .activity-item.hover-active) {
  /* container itself stays white; only the right col tints */
}
.home-cards-container:has(.home-popular-list .activity-item:hover) .home-right-col,
.home-cards-container:has(.home-popular-list .activity-item.hover-active) .home-right-col,
.home-cards-container:has(.home-popular-list .activity-item:hover) .home-right-col .activity-preview-panel,
.home-cards-container:has(.home-popular-list .activity-item.hover-active) .home-right-col .activity-preview-panel {
  background: var(--off-white);
}

.home-activity-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.home-activity-page .activity-columns {
  display: grid;
  /* Fluid two-column layout shared by /free and /explore (Products).
     Previously the right column was locked at 500px, which produced
     two harsh failure modes as the viewport shrank from ~1425px down
     to the 1024px mobile breakpoint:
       1. The right column ate proportionally more of the row than the
          left column (e.g. at 1024px wide: ~444px left vs 500px right).
       2. The list rows on the left got progressively cramped while the
          preview pane sat unchanged, so resizing felt like a series of
          step-changes instead of a smooth scale.
     Replacing 500px with `minmax(360px, 35%)` lets the right column
     scale proportionally with the container (35% ≈ 470px at the
     1425px max-width, matching the previous visual size) while
     guaranteeing it never drops below 360px before the @media
     (max-width: 1024px) rule below collapses to a single column.
     Result: smooth, continuous scaling across laptop widths instead
     of an abrupt snap at the breakpoint. */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 35%);
  gap: 0;
  align-items: stretch;
  margin-top: 0;
}

.home-list-col {
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Legacy fixed-height window on .home-list-col .home-popular-list —
   REMOVED. The list now flows by page-specific styles. */

.card-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  margin-top: auto;
  padding-top: var(--space-5);
  position: relative;
  order: 99;
}

.home-list-col .home-search-results {
  order: 50;
}

.card-page-nav .card-nav-arrow {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--text-primary);
  padding: var(--space-1-5) 10px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.card-page-nav .card-nav-arrow .card-nav-glyph {
  font-size: 22px;
  line-height: 1;
}

.card-page-nav .card-nav-arrow:hover {
  color: var(--pink);
}

.card-page-nav .card-nav-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.card-page-nav .card-nav-pages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--space-1-5);
}

.card-page-nav .card-nav-page {
  background: none;
  border: none;
  cursor: pointer;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--text-primary);
  border-radius: 0;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

.card-page-nav .card-nav-page:hover {
  color: inherit;
}

.card-page-nav .card-nav-page.is-active {
  background: none;
  color: var(--text-primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 3px;
  cursor: default;
}

.card-page-nav .card-nav-ellipsis {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  color: var(--gray-mid);
  font-size: 15px;
  letter-spacing: 1px;
}

.home-activity-page .activity-preview-panel {
  position: static;
  max-height: none;
  overflow-y: visible;
}

.home-heading-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.home-heading-row .home-filter-count {
  font-size: var(--text-sm);
  color: var(--gray-mid);
  margin-left: auto;
}

.home-right-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: stretch;
}

.home-right-row1 {
  position: static;
  background: var(--white);
  /* Soft drop-shadow on the panel wrapper. Uses `filter: drop-shadow`
     (not box-shadow on the panel) because the panel itself has
     `overflow: hidden` to clip its rotating ad-cards — box-shadow on
     the panel would be self-clipped. drop-shadow on the wrapper
     follows the painted shape of the rounded panel cleanly.
     Based on the home page card shadow (--shadow-xl-soft token,
     0 2px 48px rgba(63, 53, 56, 0.06)) but darkened slightly per
     Christine's request — alpha bumped from 0.06 to 0.10 so the
     preview pane reads as a more distinct surface than the home
     who-cards. */
  filter: drop-shadow(0 2px 48px rgba(63, 53, 56, 0.10));
  /* 32px push-down so the soft 48px-blur shadow above the panel
     falls in empty space, not under the sticky tabs/search row above
     (which has z-index 6 and an opaque white background that would
     paint over the shadow). Universal across /free, /explore, /home,
     /work. */
  margin-top: var(--space-8);
}

/* Shared visual identity for the preview panel — white surface,
   no border, rounded corners. Single source of truth. Per-page rules
   below only set sizing/positioning, never visual styling. */
.activity-preview-panel {
  background: var(--white);
  /* No top border — Christine 25 May 2026 (PM). Previously pink, then
     navy; both read as a hard hairline against the rounded card and
     she wants the edge clean. */
  border: none;
  border-radius: var(--radius-lg);
}
.home-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: 12px;
  padding: var(--space-2) var(--space-5);
  margin-bottom: 0;
  border: 0.5px solid #cccccc;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.home-search-bar:focus-within {
  /* Black focus ring (was the pink accent, swapped 4 May 2026 per Christine).
     Shared base rule — affects the search pill on /home and any page
     using .home-search-bar (including /work via .home-search-bar--hero). */
  border-color: var(--navy);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.home-search-bar .activity-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-family);
  font-size: var(--text-base);
  background: none;
  min-width: 0;
}

.home-search-bar .activity-search-input {
  color: var(--navy);
}

.home-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-4);
  padding: 0 var(--space-1);
  margin-top: 10px;
}

.home-filter-tab {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: var(--text-sm);
  font-family: var(--font-family);
  color: var(--gray-mid);
  cursor: pointer;
  transition: color 150ms ease;
}

.home-filter-tab:hover {
  color: var(--navy);
}

.home-filter-tab.active {
  color: var(--navy);
  font-weight: var(--font-weight-semibold);
}

.geo-filter-inline {
  background: none;
  border: none;
  padding: 0 2px 0 0;
  font-size: var(--text-sm);
  font-family: var(--font-family);
  color: var(--gray-mid);
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}
.geo-filter-inline:hover,
.geo-filter-inline:focus {
  color: var(--navy);
}
.geo-filter-pipe {
  color: var(--gray-light);
  font-size: var(--text-sm);
  flex-shrink: 0;
  padding: 0 var(--space-1-5) 0 2px;
  user-select: none;
}

.home-filter-count {
  font-size: var(--text-sm);
  color: var(--gray-mid);
  margin-left: auto;
}

.home-right-col .activity-preview-panel {
  position: static;
  height: 500px;
  max-height: 500px;
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-activity-page .activity-preview-card {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
}
.home-activity-page .activity-preview-card.click-active,
.home-activity-page .activity-preview-card.hover-active {
  display: flex;
}

.home-activity-page .activity-preview-section {
  background: transparent;
  border: none;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 500px;
}

.home-activity-page .activity-preview-title {
  font-size: var(--ew-preview-title-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: var(--space-5);
}

.home-activity-page .activity-preview-insights {
  padding: var(--ew-preview-card-padding-y) var(--ew-preview-card-padding-x);
}

.home-activity-page .activity-preview-label {
  font-size: var(--ew-preview-label-size);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-mid);
  margin-bottom: var(--space-3);
}

.home-activity-page .activity-preview-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ew-preview-desc-color);
}


.home-activity-page .activity-preview-section:has(.activity-preview-card5) {
  position: sticky;
  bottom: 0;
  background: var(--white);
  z-index: 10;
}

.home-activity-page .activity-preview-card5 {
  padding: var(--space-4) var(--ew-preview-card-padding-x);
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

.home-activity-page .activity-preview-cta {
  display: block;
  text-align: center;
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--white);
  background: var(--navy);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.home-activity-page .activity-preview-cta:hover {
  opacity: 0.9;
}

.home-activity-page .activity-preview-cta-secondary {
  display: block;
  text-align: center;
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--gray-light);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.home-right-col .activity-preview-section:has(.activity-preview-card5) {
  position: static;
}
.home-right-col .activity-preview-card5 {
  flex-direction: column;
}
.home-right-col .activity-preview-card5 .activity-preview-cta {
  width: 100%;
  box-sizing: border-box;
}

.activity-preview-combined {
  padding: var(--space-7-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.activity-preview-combined .activity-preview-tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-bottom: var(--space-1-5);
}
.activity-preview-combined .activity-preview-title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: var(--space-5);
  min-height: calc(2 * 1.3em);
}
.activity-preview-combined .activity-preview-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ew-preview-desc-color);
}

/* Preview pane meta rows ("Who it's suitable for", "Time").
   Restored after an earlier preview-pane rebuild stripped them
   from the markup. Each row is a label/value pair stacked
   vertically and kept hidden until populated by free.js. */
.activity-preview-meta {
  margin: var(--space-3) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.activity-preview-meta .ep-meta-row {
  margin: 0;
  padding: 0;
}
.activity-preview-meta .ep-meta-row.hidden { display: none; }
.activity-preview-meta .ep-meta-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ew-preview-desc-color);
}
.activity-preview-meta .ep-meta-value {
  margin: 2px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ew-preview-desc-color);
}


.home-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--navy);
  padding-right: 3px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 150ms ease;
}

.home-search-icon:hover {
  color: var(--pink);
}

.home-list-heading {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0;
  scroll-margin-top: 100px;
}

.home-list-heading-count {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
}

.home-heading-browse {
  color: var(--ink-2);
  text-decoration: none;
  text-transform: none;
  font-weight: 400;
}

.home-heading-browse:hover {
  text-decoration: underline;
}
.home-list-heading-spaced {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}

.home-popular-list {
  padding: 0 var(--space-7-5);
  margin: 0 calc(-1 * var(--space-7-5));
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-popular-list .activity-item:first-child {
  border-top: 0.75px solid var(--gray-light);
}

.home-popular-list .activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 0.75px solid var(--gray-light);
  border-top: none;
  border-radius: 0;
  padding: var(--space-4-5) var(--space-6);
  height: 100px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--white);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.home-popular-list .activity-item .activity-item-content {
  flex: 1;
  min-width: 0;
}

.home-popular-list .activity-item .activity-item-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
  color: var(--gray-mid);
}

.home-popular-list .activity-item .activity-item-meta {
  font-size: 14px;
  line-height: 1.2;
  color: var(--navy);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-popular-list .activity-item .activity-item-title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.home-popular-list .activity-item .activity-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.home-popular-list .activity-item .activity-item-edit,
.home-popular-list .activity-item .activity-item-open,
.home-popular-list .activity-item .explore-card-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-mid);
  text-decoration: none;
  opacity: 1;
  transition: color 150ms ease;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.activity-item-product-label {
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 3px;
}

.activity-item-bottom {
  margin-top: 3px;
}

.activity-item-bottom .activity-item-meta {
  font-size: 12px;
  font-weight: 300;
  color: var(--gray-mid);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.home-popular-list .activity-item .activity-item-edit:hover,
.home-popular-list .activity-item .activity-item-open:hover,
.home-popular-list .activity-item .explore-card-menu-trigger:hover {
  color: var(--pink);
}

.home-popular-list .activity-item:hover {
  background: var(--off-white);
}

.home-popular-list .activity-item.hover-active {
  background: var(--off-white);
}
.home-popular-list .activity-item.selected .activity-item-title,
.home-popular-list .activity-item.hover-active .activity-item-title {
  text-decoration: none;
}

.home-popular-list .activity-item.hover-active:hover {
  background: var(--off-white);
}

.home-search-results {
  display: none;
}

.home-activity-page.filter-active .home-popular-list:not(.home-search-results),
.home-activity-page.filter-active .home-compact-list,
.home-activity-page.filter-active .home-list-more,
.home-activity-page.filter-active .home-list-heading-spaced {
  display: none;
}

.home-activity-page.filter-active .home-search-results {
  display: flex;
  flex-direction: column;
}

.home-compact-list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-compact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-1);
  cursor: pointer;
  border-radius: 6px;
  transition: background 100ms ease;
}

.home-compact-item:hover {
  background: var(--surface-cool-strong);
}

.home-compact-item:hover .home-compact-title {
  text-decoration: underline;
}

.home-compact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gray-mid);
}

.home-compact-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}
.home-compact-title {
  font-size: 16px;
  font-weight: 300;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-compact-meta {
  font-size: 12px;
  font-weight: 300;
  color: var(--gray-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-compact-item.selected .home-compact-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-compact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding-right: var(--space-5);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 100ms ease;
  min-width: 44px;
  justify-content: flex-end;
}

.home-compact-item:hover .home-compact-actions {
  opacity: 1;
}

.home-compact-action {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-mid);
  text-decoration: none;
  transition: color 150ms ease;
  cursor: pointer;
}


.home-compact-action:hover {
  color: var(--pink);
}

.home-compact-item[data-report-type="country-intelligence"] {
  border-left: 2px solid var(--cyan);
  padding-left: var(--space-2);
}
.home-compact-free-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.home-compact-item .explore-card-menu-wrap {
  position: relative;
}

.home-compact-item .explore-card-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--gray-mid);
  cursor: pointer;
  padding: 0;
  transition: color 150ms ease;
}

.home-compact-item .explore-card-menu-trigger:hover {
  color: var(--pink);
}

.home-compact-item.home-hidden {
  display: none;
}
.home-compact-template .home-compact-icon {
  color: var(--pink);
}
.home-compact-template .home-compact-title {
  color: var(--pink);
}
.home-compact-template .home-compact-action {
  color: var(--pink);
}

.home-browse-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}
.home-browse-link {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--pink);
  text-decoration: none;
}
.home-browse-link:hover {
  text-decoration: underline;
}

.home-list-more {
  padding: var(--space-3) 0 0;
}

.home-load-more-btn {
  background: none;
  border: none;
  font-size: var(--text-sm);
  color: var(--pink);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family);
  cursor: pointer;
  padding: 0;
}

.home-load-more-btn:hover {
  text-decoration: underline;
}

.home-load-more-count {
  color: var(--gray-mid);
  font-weight: var(--font-weight-regular);
}

.home-list-more.hidden {
  display: none;
}


.home-sidebar-card {
  margin-top: 0;
  border: none;
  border-radius: 0 0 12px 12px;
  padding: var(--space-4);
  background: var(--gray-white);
  box-shadow: none;
  grid-column: 2;
}

.home-sidebar-card-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pink);
  margin-bottom: var(--space-3);
}

.home-sidebar-card-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-sidebar-card-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-1);
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--font-weight-light);
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms ease;
}

.home-sidebar-card-item.selected {
  background: var(--surface-cool-strong);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-sidebar-card-item:hover {
  background: var(--surface-cool-strong);
  text-decoration: underline;
}

.home-sidebar-card-item svg {
  flex-shrink: 0;
  color: var(--gray-mid);
}

.home-sidebar-card-item-research {
  color: var(--pink);
}

.home-sidebar-card-item-research svg {
  color: var(--pink);
}

.home-sidebar-card-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-mid);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.home-sidebar-card-action:hover {
  color: var(--pink);
}

.home-sidebar-card-heading-spaced {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-light);
}

.home-search-explore-link {
  margin: var(--space-5) 0 0;
  padding: 0 var(--space-2);
}

.home-search-explore-link a {
  font-size: var(--text-sm);
  color: var(--gray-mid);
  text-decoration: none;
  transition: color 150ms ease;
}

.home-search-explore-link a:hover {
  color: var(--pink);
}

.home-browse-heading {
  display: none;
}

@media (max-width: 767px) {
  .home-activity-page {
    padding: 0;
  }
  .home-right-col {
    display: none;
  }
  .home-activity-page .activity-columns {
    grid-template-columns: 1fr;
  }
  .home-heading-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .home-search-section {
    padding: var(--space-4) 0 var(--space-6);
  }
  .home-heading-row,
  .home-popular-list {
    display: none;
  }
  /* Re-show the popular list on the surfaces that need it on mobile.
     The blanket hide above is intended for legacy home + /work search;
     /free and /explore (.free-page) and project-inner (.mw-pd) all
     render the same list class but must remain visible on phones.
     Kept as separate :not()-free selectors so older mobile Safari
     parses the reveal even without Selectors Level 4 support. */
  .free-page .home-popular-list,
  .mw-pd .home-popular-list {
    display: block;
  }
  .home-browse-heading {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--pink);
    letter-spacing: 1px;
    padding: 0 var(--space-1);
    margin-bottom: 0;
    text-decoration: none;
  }
  .home-compact-title {
    font-size: 14px;
  }
  .home-compact-meta {
    font-size: 11px;
  }
  .home-compact-item {
    padding: var(--space-1-5) var(--space-1);
  }
  .home-compact-actions {
    opacity: 1;
    flex-shrink: 0;
  }
  .home-list-heading {
    font-size: 12px;
  }
}

.access-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.access-modal-overlay.active { display: flex; }

.access-modal {
  background: #1a1a1a;
  border-radius: 16px;
  max-width: 580px;
  width: 90%;
  position: relative;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.access-modal-body {
  padding: var(--space-10) var(--space-9) var(--space-8);
}
.access-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}
.access-modal-close:hover { color: var(--white); }

.access-modal h2 {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--white);
}
.access-modal h2 strong {
  font-weight: 700;
}

.access-modal-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.access-modal-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}
.access-modal-benefits li svg {
  flex-shrink: 0;
}

.access-modal-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.access-modal-balance {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.access-modal-footer {
  background: var(--white);
  padding: var(--space-5) var(--space-9);
}

.access-modal-buttons {
  display: flex;
  gap: var(--space-3);
}

.access-modal-cta {
  display: inline-block;
  text-align: center;
  padding: 10px var(--space-6);
  background: var(--pink);
  color: var(--white);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.access-modal-cta:hover { opacity: 0.85; }

.access-modal-cta-secondary {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gray-light);
}
.access-modal-cta-secondary:hover {
  background: var(--gray-lightest);
  opacity: 1;
}

.access-modal-wide {
  max-width: 660px;
}

/* Light variant — used for the enterprise "Save this kit" confirmation
   on /explore. White card, dark text, outlined secondary CTA + filled
   black primary CTA. Compact width to match the reference upsell. */
.access-modal--light {
  background: var(--white);
  max-width: 460px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.access-modal--light .access-modal-body {
  padding: var(--space-7) var(--space-7) var(--space-5);
}
.access-modal--light h2 {
  font-size: 20px;
  color: var(--navy);
}
.access-modal--light .access-modal-sub {
  color: rgba(0, 0, 0, 0.6);
}
.access-modal--light .access-modal-close {
  color: rgba(0, 0, 0, 0.4);
}
.access-modal--light .access-modal-close:hover { color: var(--navy); }
.access-modal--light .access-modal-footer {
  background: var(--white);
  padding: 0 var(--space-7) var(--space-6);
}
.access-modal--light .access-modal-cta {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gray-light);
  flex: 1;
}
.access-modal--light .access-modal-cta:hover {
  background: var(--gray-lightest);
  opacity: 1;
}
.access-modal--light #exploreModalPrimary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.access-modal--light #exploreModalPrimary:hover {
  background: var(--navy);
}
.access-modal--light .explore-modal-cancel,
.access-modal .explore-modal-cancel {
  color: var(--navy);
  text-decoration: underline;
  margin-left: var(--space-1);
}
.access-modal:not(.access-modal--light) .explore-modal-cancel {
  color: var(--white);
}
.access-modal .explore-modal-cancel:hover {
  opacity: 0.75;
}

.access-modal-report-title {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
  font-weight: 400;
}

.access-modal-buttons-trio {
  display: flex;
  gap: 10px;
}
.access-modal-buttons-trio .access-modal-cta-tier,
.access-modal-buttons-trio .access-modal-cta-outline {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 10px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.access-modal-cta-outline {
  background: var(--white);
  color: var(--navy);
  border: 0.5px solid var(--navy);
}
.access-modal-cta-outline:hover {
  background: var(--gray-lightest);
  opacity: 1;
}
#creditChoiceState, #creditConfirmedState {
  transition: opacity 0.25s ease;
}
#creditChoiceState.fade-out, #creditConfirmedState.fade-out {
  opacity: 0;
}
.credit-confirmed-line {
  font-size: 16px;
  margin: 0 0 var(--space-1);
  color: var(--navy);
}
.credit-confirmed-check {
  color: var(--pink);
  font-weight: 700;
  margin-right: var(--space-1);
}
.credit-confirmed-title {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
  line-height: 1.4;
}
.credit-confirmed-detail {
  font-size: 13px;
  color: var(--navy);
  margin: 0 0 var(--space-4);
}
#creditConfirmedGo {
  display: inline-block;
  margin-top: var(--space-1);
}
.access-modal-buttons-single {
  display: flex;
  gap: var(--space-3);
}

.access-modal-dismiss {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  background: none;
  border: none;
  font-size: 14px;
  color: var(--gray-mid);
  cursor: pointer;
  padding: var(--space-1-5) 0;
  text-align: center;
}
.access-modal-dismiss:hover {
  color: var(--navy);
}

.access-modal-login {
  margin-top: 14px;
  font-size: 14px;
  color: var(--gray-mid);
}
.access-modal-login a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================
   HOME PILL MEGA-MENU
   ============================================ */
.home-pills-row .home-search-row-inner {
  position: relative;
}

/* ============================================================================
   MEGA-MENU — home-page hover dropdown for category tabs
   ----------------------------------------------------------------------------
   All design tokens live in :root below. Tweak there, do not hard-code values
   inside the rules. Layout is "landscape": wide panel, multi-column grid.
   ============================================================================ */
:root {
  /* Tab row */
  --mega-tab-gap:        15px;
  --mega-tab-pad-y:      8px;
  --mega-tab-pad-x:      10px;
  --mega-tab-radius:     12px;
  --mega-tab-weight:     700;
  --mega-tab-color:      var(--navy);
  --mega-tab-hover:      var(--pink);
  --mega-tab-active-bg:  var(--white);
  --mega-tab-active-fg:  var(--navy);
  /* Panel card */
  --mega-panel-max-w:    min(1200px, calc(100vw - 32px));
  --mega-panel-radius:   12px;
  --mega-panel-pad:      24px 28px 26px;
  --mega-panel-shadow:   0 18px 48px rgba(0, 0, 0, 0.14),
                         0 4px 12px  rgba(0, 0, 0, 0.06);
  /* Items grid (landscape: tighter min-col → more columns, fewer rows) */
  --mega-grid-min-col:   200px;
  --mega-grid-row-gap:   14px;
  --mega-grid-col-gap:   36px;
  --mega-item-fg:        var(--navy);
  --mega-item-hover:     var(--pink);
  --mega-desc-fg:        #6b6b6b;
  /* Backdrop */
  --mega-backdrop-bg:    rgba(20, 20, 25, 0.4);
  --mega-backdrop-fade:  160ms ease;
  /* Stacking */
  --mega-z-backdrop:     100;
  --mega-z-panel:        110;
  --mega-z-tab:          111;
}

/* ---------- Tab row ---------- */
.home-mega-bar { position: relative; }

.home-filter-bar.home-filter-bar--hero.home-mega-bar {
  justify-content: flex-start;
  gap: var(--mega-tab-gap);
  padding-left: 0;
  padding-right: 0;
}

.home-mega-tab {
  position: relative;
  display: inline-flex;
}

.home-filter-bar.home-filter-bar--hero .home-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  background: transparent;
  border: none;
  border-radius: var(--mega-tab-radius) var(--mega-tab-radius) 0 0;
  padding: var(--mega-tab-pad-y) var(--mega-tab-pad-x);
  font-size: 13px;
  font-weight: var(--mega-tab-weight);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mega-tab-color);
  cursor: pointer;
  transition: color 120ms ease;
}

.home-filter-bar.home-filter-bar--hero .home-mega-trigger:hover {
  color: var(--mega-tab-hover);
}

/* Override the base .home-filter-tab.active black-pill styling for mega triggers —
   they should stay transparent unless the mega panel is actively open */
.home-filter-bar.home-filter-bar--hero .home-mega-trigger.active {
  background: transparent;
  color: var(--mega-tab-color);
  font-weight: var(--mega-tab-weight);
  box-shadow: none;
}

.home-mega-caret {
  transition: transform 150ms ease;
  opacity: 0.6;
}

.home-mega-trigger[aria-expanded="true"] .home-mega-caret {
  transform: rotate(180deg);
}

/* ---------- Panels container (anchors panels right under the tab row) ---------- */
.home-mega-panels {
  position: absolute;
  inset: 100% 0 auto 0;
  pointer-events: none;
}
/* When the visible triggers live in the navbar (centre nav), the panels
   need to drop from the navbar — not from the now-hidden pills row way
   below the hero. Pin the panels container to the viewport just under
   the navbar so the cursor can travel from trigger to panel. */
body:has(.top-bar-center) .home-mega-panels {
  position: fixed;
  inset: var(--topbar-height) 0 auto 0;
  z-index: var(--mega-z-panel);
}
body:has(.top-bar-center) .home-mega-panel {
  left: 50%;
  transform: translateX(-50%);
  /* Width is content-driven so small panels stay tight and large panels
     expand naturally. The base rule already provides min-width: 650px and
     max-width: calc(100vw - 32px); we only override horizontal placement
     here so the panel sits centred under the navbar pill. */
}

/* ---------- Backdrop dim ---------- */
.home-mega-backdrop {
  position: fixed;
  inset: 0;
  background: var(--mega-backdrop-bg);
  z-index: var(--mega-z-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mega-backdrop-fade);
}
.home-mega-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Open state: drop ancestor backgrounds + lift active tab/panel ---------- */
.home-search-row:has(.home-pills-row.has-mega-open) {
  position: relative;
  z-index: auto;
  background: transparent;
}

.home-pills-row.has-mega-open {
  position: relative;
  z-index: auto;
  background: transparent;
}

/* Active tab — white "hood" with rounded top corners that fuses into the panel below */
.home-pills-row.has-mega-open .home-mega-trigger.active {
  position: relative;
  z-index: var(--mega-z-tab);
  background: var(--mega-tab-active-bg);
  color: var(--mega-tab-active-fg);
  font-weight: var(--mega-tab-weight);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 15px;
  /* 6px solid white below seals the seam with the panel; subtle ambient lift */
  box-shadow: 0 6px 0 0 var(--mega-tab-active-bg),
              0 -4px 14px rgba(0, 0, 0, 0.04);
}

/* ---------- Panel card ---------- */
.home-mega-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  min-width: 650px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: var(--mega-panel-radius);
  box-shadow: var(--mega-panel-shadow);
  padding: var(--mega-panel-pad);
  pointer-events: auto;
}
.home-mega-panel[hidden] { display: none; }

.home-pills-row.has-mega-open .home-mega-panel {
  z-index: var(--mega-z-panel);
  /* Top-left stays rounded; active tab on any column merges in via its white hood */
}

.home-mega-panel-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: var(--space-4-5);
}

.home-mega-panel-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  text-transform: capitalize;
}

.home-mega-panel-viewall {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.home-mega-panel-viewall:hover { text-decoration: underline; }

.home-mega-panel-desc {
  margin: calc(-1 * var(--space-2)) 0 25px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mega-desc-fg);
  max-width: 640px;
}

/* ---------- Sub-category groups ---------- */
/* Multi-column flow: groups stack vertically and overflow into the next column */
.home-mega-groups {
  display: flex;
  flex-flow: column wrap;
  /* Wider-before-taller: cap column height so groups wrap into a new
     column rather than stacking. The panel's max-width: calc(100vw - 32px)
     caps how wide it can grow; once that limit is hit, columns
     naturally grow taller as items spill within each column. */
  max-height: 280px;
  padding-bottom: var(--space-5);
  column-gap: 60px;
  row-gap: 0;
  text-align: left;
  align-content: flex-start;
}

/* Within the unified Explore panel the panel width is fixed (the rail
   is anchored under the trigger and must not jump around). Switch the
   groups layout from "flex column-wrap with a max-height ceiling" —
   which grows horizontally as more groups appear — to a CSS multi-
   column layout with a fixed column count. Wide categories now stack
   downward (the pane gets taller) instead of sideways, so the panel
   never resizes. The previous per-cat max-height overrides
   ([data-mega-panel="simulation"] / "assessment") are no-ops here
   because we drop the height-based wrapping entirely. */
.home-mega-explore-pane .home-mega-groups {
  /* Use flex column-wrap so each group sizes to its content (width:
     max-content, set later in this file) and the visible horizontal
     space between columns is the actual `column-gap` value — not the
     leftover column-track whitespace you get with CSS multi-column
     layout. The panel width is locked by .home-mega-panel--explore so
     the wrap point is governed by max-height below: groups stack into
     a second column once the first column reaches the height ceiling.
  */
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  max-height: 340px;
  row-gap: var(--space-7);
  column-gap: 56px;
  padding-bottom: 0;
}
/* Per-pane column-gap tuning. Research / Planning / Simulations read
   better with a tighter gap; Assessments has longer labels and
   benefits from more breathing room between the two columns. */
.home-mega-explore-pane[data-explore-pane="reports"] .home-mega-groups,
.home-mega-explore-pane[data-explore-pane="framework"] .home-mega-groups,
.home-mega-explore-pane[data-explore-pane="simulation"] .home-mega-groups {
  column-gap: var(--space-6);
}
.home-mega-explore-pane[data-explore-pane="assessment"] .home-mega-groups {
  column-gap: 120px;
}
/* Simulations has 5 subcategory groups (more than the others). With the
   shared max-height of 340px the flex column-wrap broke them into 4+
   columns, which overflowed the locked panel width and clipped the
   right two columns ("Communication" and "Sales & Service"). Lift the
   ceiling so they wrap into exactly 2 columns. */
.home-mega-explore-pane[data-explore-pane="simulation"] .home-mega-groups {
  max-height: 540px;
}
/* Planning also has 5 groups (Business Decisions, Direction,
   Performance, Operations, Personal Decisions) with ~5 items each.
   The default 340px ceiling wrapped them into 3 columns which
   overflowed the locked panel width (rightmost column was clipped).
   520px puts them into 2 balanced columns: groups 1-3 stack in
   column 1, groups 4-5 in column 2. */
.home-mega-explore-pane[data-explore-pane="framework"] .home-mega-groups {
  max-height: 520px;
}
/* Kits has 5 groups: For Founders (4 items, ~144px), For Established
   Businesses (7 items, ~210px), then 3 single-item groups (~78px
   each: Investors, Consultants, Individuals). Setting max-height to
   ~360px wraps them into a balanced 2-column layout — col 1 holds
   the two tall groups (354px), col 2 holds the three small groups
   (234px). The widest title ("For Founders & Early-Stage Operators",
   ~240px) plus the second column (~200px) plus the gap fits well
   inside the locked panel width. */
.home-mega-explore-pane[data-explore-pane="kit"] .home-mega-groups {
  max-height: 360px;
}

.home-mega-group {
  width: max-content;
  margin-bottom: var(--space-7);
}

.home-mega-group:last-child { margin-bottom: 0; }

.home-mega-group-heading {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  margin-bottom: 2px;
  break-after: avoid;
  -webkit-column-break-after: avoid;
  page-break-after: avoid;
}

@media (max-width: 900px) {
  .home-mega-groups { column-count: 2; }
}
@media (max-width: 600px) {
  .home-mega-groups { column-count: 1; }
}

/* ---------- Items list (within a group) ---------- */
.home-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}

.home-mega-item-wrap { margin: 0; }

.home-mega-item {
  display: block;
  padding: 2px 0;
  text-decoration: none;
  color: var(--mega-item-fg);
  transition: color 120ms ease;
}

.home-mega-item-title {
  display: block;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--navy);
}

.home-mega-item:hover .home-mega-item-title {
  color: var(--mega-item-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-mega-item-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mega-desc-fg);
}

/* ---------- Unified Explore panel (vertical product rail + content) ----------
   The single "Explore" trigger in the navbar opens this panel. Left rail
   lists the five product categories vertically; hovering a rail item
   swaps which sub-pane is shown on the right. The right pane reuses the
   existing .home-mega-groups / .home-mega-group / .home-mega-item markup
   so subcategory layout stays identical to the old per-tab panels. */
/* Free-reports mega panel — same rail+pane structure as Explore. We
   reuse all the .home-mega-explore-* class styling so layout matches
   exactly; the only difference is the panel-level container, which
   gets its own width and anchor so it sits flush under the "Free
   reports" trigger (which is to the LEFT of "Products") instead of
   centred under the page. */
/* Free reports trigger gets a default highlighted state on the home
   navbar — bold + brand pink — so it stands out as the entry point
   to the menu. When the user hovers a sibling tab (Products or My
   Work), the highlight reverts to the regular nav-link style so the
   currently-engaged tab is visually unambiguous. The :has() check
   targets a hovered sibling .top-bar-center-tab that isn't Free
   itself; if the user hovers Free, the highlight stays. */
.top-bar-center .home-mega-tab[data-mega-key="free"] > .home-mega-trigger {
  color: var(--pink);
  font-weight: 700;
  opacity: 1;
}
.top-bar-center:has(.top-bar-center-tab:not([data-mega-key="free"]):hover)
  .home-mega-tab[data-mega-key="free"] > .home-mega-trigger {
  color: inherit;
  font-weight: 500;
  opacity: 0.92;
}

.home-mega-panel.home-mega-panel--free {
  padding: 0;
  width: min(880px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  overflow: hidden;
}
body:has(.top-bar-center) .home-mega-panel.home-mega-panel--free {
  left: 0;
  transform: none;
}
/* Country pane has 9 region groups, the tallest (SE Asia, Europe) ~250px
   each. The default 340px would overflow into 4+ columns and clip the
   right side. Lift the ceiling so the 9 groups land in 3 balanced
   columns (≈3 groups × ~200px per column). */
.home-mega-explore-pane[data-free-pane="country"] .home-mega-groups {
  max-height: 620px;
  column-gap: var(--space-9);
}
/* Market pane: 14 industries as 2 columns of 7. The shared
   .home-mega-explore-pane .home-mega-groups uses flex column-wrap
   tuned for Explore's grouped layouts, and .home-mega-list is a flex
   column — neither plays well with CSS multi-column. Override both
   so the market pane uses plain block layout for the groups and a
   real CSS column-count on the list. */
.home-mega-explore-pane[data-free-pane="market"] .home-mega-groups {
  display: block;
  max-height: none;
  padding-bottom: 0;
}
.home-mega-explore-pane[data-free-pane="market"] .home-mega-group {
  width: 100%;
  margin-bottom: 0;
}
.home-mega-explore-pane[data-free-pane="market"] .home-mega-list {
  display: block;
  column-count: 2;
  column-gap: var(--space-6);
  column-fill: balance;
  max-width: 380px;
}
.home-mega-explore-pane[data-free-pane="market"] .home-mega-item-wrap {
  break-inside: avoid;
  display: block;
}

.home-mega-panel.home-mega-panel--explore {
  /* Drop the panel's own padding — rail and content each control their
     own padding so the rail's grey background can run flush to the
     panel edges. */
  padding: 0;
  /* Lock the width so the panel doesn't resize (and re-anchor) when the
     user hovers a different product. JS in _openMegaPanel sets `left`
     inline so the panel is anchored under the Explore trigger; without
     a fixed width the centring rule used to recompute every hover and
     the panel jumped horizontally. */
  width: min(880px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  overflow: hidden;
}
/* Override the centred-under-navbar default for the Explore panel only;
   JS sets `left` inline. transform:none is also set inline so the
   centring `translateX(-50%)` doesn't apply. */
body:has(.top-bar-center) .home-mega-panel.home-mega-panel--explore {
  left: 0;
  transform: none;
}
.home-mega-explore-inner {
  display: flex;
  align-items: stretch;
  min-height: 380px;
}
.home-mega-explore-rail {
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  background: var(--gray-background);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--space-4-5) 0;
}
.home-mega-explore-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  padding: var(--space-3) 22px var(--space-3) var(--space-6);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.home-mega-explore-rail-item:hover {
  background: rgba(0, 0, 0, 0.025);
  color: var(--navy);
}
.home-mega-explore-rail-item.active {
  background: var(--white);
  border-left-color: var(--pink);
  color: var(--pink);
}
.home-mega-explore-rail-caret {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  font-size: 16px;
  line-height: 1;
}
.home-mega-explore-rail-item.active .home-mega-explore-rail-caret {
  opacity: 1;
  transform: translateX(0);
  color: var(--pink);
}
.home-mega-explore-content {
  flex: 1;
  min-width: 0;
  padding: 22px var(--space-7) var(--space-6);
  position: relative;
}
.home-mega-explore-pane { display: none; }
.home-mega-explore-pane.active { display: block; }

/* The unified panel doesn't need the active-tab "white hood" treatment —
   there is no active tab to fuse with. Drop the underline + box-shadow
   that the per-category panel rule above adds. */
.home-pills-row.has-mega-open .home-mega-trigger[data-value="explore"].active {
  text-decoration: none;
  box-shadow: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .home-mega-panel {
    width: calc(100vw - 24px);
    padding: var(--space-4);
  }
  .home-mega-panel.home-mega-panel--explore {
    min-width: 0;
    padding: 0;
  }
  .home-mega-explore-inner { flex-direction: column; min-height: 0; }
  .home-mega-explore-rail {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: var(--space-2);
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .home-mega-explore-rail-item {
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .home-mega-explore-rail-item.active {
    border-left: 0;
    border-bottom-color: var(--pink);
  }
  .home-mega-explore-rail-caret { display: none; }
  .home-mega-list { grid-template-columns: 1fr; }
}

/* Tighter paragraph break for descriptions in the explore preview card.
   Used by _setEpDescription() in explore.js when the source text contains
   a blank line ("\n\n"). A full <br><br> felt too tall, so we drop in a
   block-level spacer with a small fixed height instead. */
.activity-preview-desc .ep-desc-gap {
  display: block;
  height: 0.45em;
}

/* Visual selection state for the search-results feed.
   When the mega menu populates the feed with a subcategory's siblings, the
   chosen item lives at position 0 and gets `.selected` applied (see
   _fetchHomeResults in static/js/explore.js). It also fires when the user
   clicks any other item in the feed. The cue is a subtle left border in the
   brand colour plus a tinted background — enough to read at a glance
   without competing with the preview pane on the right. */
#searchResultsList .activity-item.selected {
  background: var(--surface-cool-strong);
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   Share / Gift modal extensions — built on top of `.access-modal-*`.
   No bespoke palette: every colour comes from canonical CSS vars.
   See templates/components/gift-share-modal.html + static/js/gift-share.js
   ───────────────────────────────────────────────────────────────────── */
.gift-share-modal { max-width: 520px; }

.gift-share-modal .gs-panel { display: block; }
.gift-share-modal .gs-panel[hidden] { display: none; }

.gift-share-modal .access-modal-cta.is-disabled,
.gift-share-modal .access-modal-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.gift-share-modal .gs-subline {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}
.gift-share-modal .gs-subline a {
  color: var(--pink);
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}

.gift-share-modal .gs-helper {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0 0 var(--space-4-5);
}
.gift-share-modal .gs-helper strong { color: var(--white); font-weight: 600; }

.gift-share-modal .gs-channels {
  display: flex;
  gap: var(--space-3);
}
.gift-share-modal .gs-channel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--white);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.gift-share-modal .gs-channel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.gift-share-modal .gs-channel-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
}
.gift-share-modal .gs-channel-icon svg { width: 100%; height: 100%; }

.gift-share-modal .gs-form { display: flex; flex-direction: column; gap: 14px; }
.gift-share-modal .gs-field { display: flex; flex-direction: column; gap: 6px; }
.gift-share-modal .gs-field-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: var(--font-weight-semibold);
}
.gift-share-modal .gs-field-optional {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}
.gift-share-modal .gs-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--white);
  padding: 10px var(--space-3);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.gift-share-modal .gs-input:focus {
  outline: none;
  border-color: var(--pink);
  background: rgba(255, 255, 255, 0.09);
}
.gift-share-modal .gs-textarea { resize: vertical; min-height: 64px; }

.gift-share-modal .gs-error {
  margin: 0;
  font-size: 13px;
  color: var(--purple);
}

/* Gift claim landing — uses the same access-modal card, but rendered as
   a centred page (no overlay). Class lives here to keep all gift-share
   styling in one canonical block. */
.gift-claim-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: var(--space-8) var(--space-4);
}
.gift-claim-card { position: relative; }
.gift-share-modal .gs-form-stacked,
.gs-form-stacked { margin-top: 16px; }

.gift-share-modal .gs-sent-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 var(--space-2);
}

/* Per-ID allow-list block (.access-modal-* overrides for
   #reportUpsellModal / #freeBuyConfirmModal / #exploreModal) was
   deleted May 9 2026 — those three modals now wear canonical Tier B
   chrome from work.css (.mw-modal-overlay > .mw-modal-card). The
   base .access-modal-* rules above (~L1368-1570) are preserved
   because #accessModal (Tier A) still depends on them. */

/* ────────────────────────────────────────────────────────────────────────────
   Explore modals — light/simple variant (Phase B of the modal lightening pass).
   Scoped to #exploreActionModal (visitor buy prompt) and #exploreOpenModal
   (subscriber confirm) only. Keeps all markup, IDs, copy, and JS handlers
   unchanged — just swaps the heavy dark fullscreen card for a small white
   centered card matching the kit-confirm / bulk-delete pattern.
   ──────────────────────────────────────────────────────────────────────── */
#exploreActionModal.access-modal-overlay,
#exploreOpenModal.access-modal-overlay {
  background: rgba(0, 0, 0, 0.32);
  align-items: center;
  justify-content: center;
}
#exploreActionModal .access-modal,
#exploreActionModal .access-modal.access-modal-wide,
#exploreOpenModal .access-modal,
#exploreOpenModal .access-modal.access-modal-wide {
  background: var(--white);
  color: var(--navy);
  max-width: 460px;
  width: calc(100% - 32px);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: exploreModalRise 180ms ease-out;
}
@keyframes exploreModalRise {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)   scale(1);     opacity: 1; }
}
#exploreActionModal .access-modal-body,
#exploreOpenModal .access-modal-body {
  background: var(--white);
  padding: 22px var(--space-6) 14px;
}
#exploreActionModal .access-modal h2,
#exploreOpenModal .access-modal h2 {
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--space-1-5);
}
#exploreActionModal .access-modal h2 strong,
#exploreOpenModal .access-modal h2 strong {
  font-weight: 700;
}
#exploreActionModal .access-modal-sub,
#exploreOpenModal .access-modal-sub {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}
#exploreActionModal .access-modal-close,
#exploreOpenModal .access-modal-close {
  color: var(--gray-mid);
  top: 10px;
  right: 14px;
  font-size: 20px;
}
#exploreActionModal .access-modal-close:hover,
#exploreOpenModal .access-modal-close:hover {
  color: var(--navy);
}
#exploreActionModal .access-modal-footer,
#exploreOpenModal .access-modal-footer {
  background: var(--white);
  padding: var(--space-3) var(--space-6) var(--space-4-5);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#exploreActionModal .access-modal-buttons,
#exploreOpenModal .access-modal-buttons {
  gap: 10px;
}
#exploreActionModal .access-modal-cta,
#exploreOpenModal .access-modal-cta {
  padding: 9px var(--space-4-5);
  font-size: 13.5px;
  border-radius: 30px;
}
#exploreActionModal .access-modal-cta-secondary,
#exploreOpenModal .access-modal-cta-secondary {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gray-light);
}
#exploreActionModal .access-modal-cta-secondary:hover,
#exploreOpenModal .access-modal-cta-secondary:hover {
  background: var(--gray-lightest);
  opacity: 1;
}
#exploreActionModal .clear-results-link,
#exploreOpenModal .clear-results-link {
  color: var(--gray-mid);
  font-size: 12.5px;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  text-decoration: none;
}
#exploreActionModal .clear-results-link:hover,
#exploreOpenModal .clear-results-link:hover {
  color: var(--navy);
  text-decoration: underline;
}

/* Mobile: full-width snug-to-bottom sheet, stacked buttons. */
@media (max-width: 640px) {
  #exploreActionModal.access-modal-overlay,
  #exploreOpenModal.access-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  #exploreActionModal .access-modal,
  #exploreActionModal .access-modal.access-modal-wide,
  #exploreOpenModal .access-modal,
  #exploreOpenModal .access-modal.access-modal-wide {
    max-width: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
  #exploreActionModal .access-modal-buttons,
  #exploreOpenModal .access-modal-buttons {
    flex-direction: column;
  }
  #exploreActionModal .access-modal-cta,
  #exploreOpenModal .access-modal-cta {
    width: 100%;
  }
}

/* ========================================================================
   PHASE: Customise CTA chip on /free preview panel
   ------------------------------------------------------------------------
   Small pill pinned just under the existing #ep-credits pricing grid.
   Routes the user to a new chat for the report's parent research product.
   Label is set per user state in static/js/free.js (visitor / subscriber /
   enterprise). Scoped to .free-page so even if another page imports this
   stylesheet AND happens to reuse the id, no styling will leak.
   ======================================================================== */
.free-page #ep-customise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin-top: var(--space-3);
  padding: 9px var(--space-4-5);
  border-radius: 999px;
  background: linear-gradient(135deg, #d63384 0%, #b02a6d 100%);
  color: var(--white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(214, 51, 132, 0.25);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.free-page #ep-customise:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(214, 51, 132, 0.32);
  text-decoration: none;
  color: var(--white);
}

.free-page #ep-customise:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(214, 51, 132, 0.2);
}

.free-page #ep-customise:focus-visible {
  outline: 2px solid #d63384;
  outline-offset: 2px;
}

.free-page #ep-customise.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .free-page #ep-customise {
    align-self: stretch;
    text-align: center;
    padding: 11px var(--space-4-5);
    font-size: 14px;
  }
}

/* Customise chip — inline confirm popover. Anchored to the chip on
   click; opens a small panel with the price restated and an explicit
   Continue / Cancel pair so a user can't accidentally trigger the
   chat (and a credit charge) by mis-tapping the chip. JS in free.js
   creates / destroys the .ep-customise-popover element on demand,
   so there's no DOM in the template. Scoped under .free-page so the
   styles cannot leak. */
.free-page .ep-customise-popover {
  position: absolute;
  z-index: 30;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 14px 14px var(--space-3);
  width: 260px;
  max-width: calc(100vw - 32px);
  font-size: 14px;
  color: var(--navy);
  line-height: 1.45;
  animation: ep-popover-in 120ms ease-out;
}
.free-page .ep-customise-popover__title {
  font-weight: 600;
  margin: 0 0 var(--space-1);
  color: var(--navy);
  font-size: 14px;
}
.free-page .ep-customise-popover__body {
  margin: 0 0 var(--space-3);
  color: var(--ink-2);
  font-size: 13px;
}
.free-page .ep-customise-popover__row {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
.free-page .ep-customise-popover__btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px var(--space-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.free-page .ep-customise-popover__btn--cancel {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--gray-light);
}
.free-page .ep-customise-popover__btn--cancel:hover {
  background: var(--off-white);
  color: var(--navy);
}
.free-page .ep-customise-popover__btn--confirm {
  background: #d946ef;
  color: var(--white);
}
.free-page .ep-customise-popover__btn--confirm:hover {
  background: #c026d3;
}
@keyframes ep-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .free-page .ep-customise-popover {
    width: calc(100vw - 32px);
  }
}

/* ============================================================
   Modal system v2 — Tier A (Brand / Conversion)
   Targets #accessModal + #freeBuyConfirmModal.
   .access-modal--light is intentionally NOT touched — exploreModal
   keeps its existing white/black variant.
   May 8 2026, Christine.
   ============================================================ */
.access-modal-overlay .access-modal:not(.access-modal--light) {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 20px 50px rgba(27,34,48,.18);
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-body {
  background: var(--gradient);
  color: var(--white);
  padding: 24px 28px 28px;
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-body h2 {
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0 0 6px;
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-body h2 strong { font-weight: 700; }
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-body p,
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-body .access-modal-sub,
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-body .access-modal-report-title,
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-body .access-modal-balance {
  color: rgba(255,255,255,.92);
  font-weight: 500;
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-close {
  color: rgba(255,255,255,.85);
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-close:hover { color: var(--white); }
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-footer {
  background: var(--white);
  padding: 18px 28px 22px;
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-cta {
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 14px;
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-cta:hover {
  background: #ED4493;
  opacity: 1;
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-cta-outline,
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-cta-secondary {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gray-light);
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-cta-outline:hover,
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-cta-secondary:hover {
  background: var(--gray-white);
  opacity: 1;
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-dismiss {
  color: var(--ink-2);
}
.access-modal-overlay .access-modal:not(.access-modal--light) .access-modal-dismiss a {
  color: var(--navy) !important;
}

/* ============================================================
   Tier A v2 — ID-scoped override.
   The earlier Christine-era block at line 2364+ ID-scopes
   #freeBuyConfirmModal / #reportUpsellModal / #exploreModal to a
   white-card style. To win specificity for freeBuyConfirmModal
   (Phase 1 Tier A target) we re-declare the gradient header with
   the same ID prefix. exploreModal & reportUpsellModal are left
   alone for now (not in Phase 1 scope).
   May 8 2026, Christine.
   ============================================================ */
#freeBuyConfirmModal .access-modal,
#freeBuyConfirmModal .access-modal.access-modal-wide {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 20px 50px rgba(27,34,48,.18);
}
#freeBuyConfirmModal .access-modal-body {
  background: var(--gradient);
  color: var(--white);
  padding: 24px 28px 28px;
}
#freeBuyConfirmModal .access-modal-body h2 {
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0 0 6px;
}
#freeBuyConfirmModal .access-modal-body h2 strong { font-weight: 700; }
#freeBuyConfirmModal .access-modal-body .access-modal-sub,
#freeBuyConfirmModal .access-modal-body .access-modal-balance,
#freeBuyConfirmModal .access-modal-body .access-modal-report-title,
#freeBuyConfirmModal .access-modal-body p {
  color: rgba(255,255,255,.92);
  font-weight: 500;
}
#freeBuyConfirmModal .access-modal-close { color: rgba(255,255,255,.85); }
#freeBuyConfirmModal .access-modal-close:hover { color: var(--white); }
#freeBuyConfirmModal .access-modal-footer { background: var(--white); padding: 18px 28px 22px; }
#freeBuyConfirmModal .access-modal-cta,
#freeBuyConfirmModal .access-modal-cta-tier {
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 14px;
}
#freeBuyConfirmModal .access-modal-cta:hover,
#freeBuyConfirmModal .access-modal-cta-tier:hover { background: #ED4493; opacity: 1; }
#freeBuyConfirmModal .access-modal-cta-outline,
#freeBuyConfirmModal .access-modal-cta-secondary {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gray-light);
}
#freeBuyConfirmModal .access-modal-cta-outline:hover,
#freeBuyConfirmModal .access-modal-cta-secondary:hover { background: var(--gray-white); opacity: 1; }