/* Apple-style scroll polish: restrained, reading-safe */
html {
  scroll-behavior: smooth;
}

.scroll-reveal-ready {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    transform .72s cubic-bezier(.22, 1, .36, 1),
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
  transition-delay: var(--scroll-reveal-delay, 0ms);
}

.scroll-reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Light parallax: image-led sections only */
.scroll-polish-enabled .briefings-hero,
.scroll-polish-enabled .article-hero-visual,
.scroll-polish-enabled .hero-visual,
.scroll-polish-enabled .figure-image-shell,
.scroll-polish-enabled .resource-cover,
.scroll-polish-enabled .ty-book-cover {
  transform: translate3d(0, var(--scroll-parallax-y, 0px), 0);
  transition: transform .18s linear;
  will-change: transform;
}

/* Prevent parallax from fighting hover transforms on cards */
.scroll-polish-enabled .briefing-grid > *:hover .briefing-hero-visual,
.scroll-polish-enabled .briefing-grid > *:hover .hero-visual,
.scroll-polish-enabled .resource-book-card:hover .resource-cover,
.scroll-polish-enabled .ty-book-card:hover .ty-book-cover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-reveal-ready,
  .scroll-reveal-ready.is-visible,
  .scroll-polish-enabled .briefings-hero,
  .scroll-polish-enabled .article-hero-visual,
  .scroll-polish-enabled .hero-visual,
  .scroll-polish-enabled .figure-image-shell,
  .scroll-polish-enabled .resource-cover,
  .scroll-polish-enabled .ty-book-cover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* V2 fix: briefing dark sections should not wash out while scrolling.
   Reveal individual cards, not dark background containers. */
.briefing-section.dark.scroll-reveal-ready,
.briefing-callout.scroll-reveal-ready,
.briefing-section.scroll-reveal-ready {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

/* Preserve dark-section readability even when parent reveal classes are present. */
.briefing-section.dark,
.briefing-section.dark *,
.briefing-section.dark.scroll-reveal-ready,
.briefing-section.dark.scroll-reveal-ready * {
  color: inherit;
}

.briefing-section.dark .briefing-section-label,
.briefing-section.dark .briefing-section-label * {
  color: var(--gold-warm, #C8973A) !important;
}

.briefing-section.dark h1,
.briefing-section.dark h2,
.briefing-section.dark h3,
.briefing-section.dark h4,
.briefing-section.dark p,
.briefing-section.dark li,
.briefing-section.dark strong {
  color: #fff !important;
}

/* In dark sections, reveal/lift only inner cards and list items. */
.briefing-section.dark .briefing-list-item,
.briefing-section.dark .briefing-mini-card,
.briefing-section.dark .briefing-recommended-card,
.briefing-section.dark .briefing-article-link {
  color: inherit;
}

.briefing-section.dark .briefing-list-item *,
.briefing-section.dark .briefing-mini-card *,
.briefing-section.dark .briefing-recommended-card *,
.briefing-section.dark .briefing-article-link * {
  color: inherit;
}

/* If a card has a light background inside a dark section, restore normal text color. */
.briefing-section.dark .briefing-list-item,
.briefing-section.dark .briefing-mini-card {
  background: rgba(255,255,255,.06);
}

.briefing-section.dark .briefing-list-item:hover,
.briefing-section.dark .briefing-mini-card:hover {
  background:
    radial-gradient(circle at 94% 0%, rgba(87,185,255,.16), transparent 38%),
    rgba(255,255,255,.09) !important;
}

/* Do not parallax dark section containers. */
.scroll-polish-enabled .briefing-section.dark,
.scroll-polish-enabled .briefing-section.dark .briefing-callout {
  transform: none !important;
}


/* V3 fix: dark briefing sections can contain light callout cards.
   Do not force every child in a dark section to white text. */
.briefing-section.dark .briefing-callout,
.briefing-section.dark .briefing-hero-card,
.briefing-section.dark .briefing-mini-card,
.briefing-section.dark .briefing-list-item {
  color: var(--blue-deep, #0D3B66) !important;
}

.briefing-section.dark .briefing-callout *,
.briefing-section.dark .briefing-hero-card *,
.briefing-section.dark .briefing-mini-card *,
.briefing-section.dark .briefing-list-item * {
  color: inherit !important;
}

.briefing-section.dark .briefing-callout .briefing-section-label,
.briefing-section.dark .briefing-callout .briefing-kicker,
.briefing-section.dark .briefing-callout [class*="label"],
.briefing-section.dark .briefing-callout [class*="kicker"] {
  color: var(--gold-warm, #C8973A) !important;
}

.briefing-section.dark .briefing-callout p,
.briefing-section.dark .briefing-callout li,
.briefing-section.dark .briefing-callout .briefing-list-text {
  color: var(--text-body, #53667A) !important;
}

.briefing-section.dark .briefing-callout h1,
.briefing-section.dark .briefing-callout h2,
.briefing-section.dark .briefing-callout h3,
.briefing-section.dark .briefing-callout h4,
.briefing-section.dark .briefing-callout strong {
  color: var(--blue-deep, #0D3B66) !important;
}

/* Keep the light card stable on scroll; only hover should slightly polish it. */
.briefing-section.dark .briefing-callout {
  opacity: 1 !important;
  transform: none !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(87,185,255,.10), transparent 38%),
    #fff !important;
  border-color: rgba(13,59,102,.14) !important;
}

.briefing-section.dark .briefing-callout:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 52px rgba(13,59,102,.16) !important;
  border-color: rgba(87,185,255,.46) !important;
}

/* Override the earlier broad rule that made dark-section headings white. */
.briefing-section.dark .briefing-callout h1,
.briefing-section.dark .briefing-callout h2,
.briefing-section.dark .briefing-callout h3,
.briefing-section.dark .briefing-callout h4,
.briefing-section.dark .briefing-callout p,
.briefing-section.dark .briefing-callout li,
.briefing-section.dark .briefing-callout strong {
  color: revert-layer;
}

.briefing-section.dark .briefing-callout h1,
.briefing-section.dark .briefing-callout h2,
.briefing-section.dark .briefing-callout h3,
.briefing-section.dark .briefing-callout h4,
.briefing-section.dark .briefing-callout strong {
  color: var(--blue-deep, #0D3B66) !important;
}

.briefing-section.dark .briefing-callout p,
.briefing-section.dark .briefing-callout li {
  color: var(--text-body, #53667A) !important;
}


/* V4 fix: briefing hero white question card text.
   The white question card in the blue hero uses `.briefing-hero-card`, not only `.briefing-callout`.
   Previous dark-section protection could still make the text white. */
.briefing-page-hero .briefing-hero-card,
.briefing-page-hero .briefing-hero-card *,
.briefing-hero .briefing-hero-card,
.briefing-hero .briefing-hero-card * {
  color: var(--blue-deep, #0D3B66) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.briefing-page-hero .briefing-hero-card,
.briefing-hero .briefing-hero-card {
  background:
    radial-gradient(circle at 94% 0%, rgba(87,185,255,.10), transparent 38%),
    #fff !important;
  border-color: rgba(13,59,102,.14) !important;
  transform: none !important;
}

.briefing-page-hero .briefing-hero-card:hover,
.briefing-hero .briefing-hero-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 52px rgba(13,59,102,.18) !important;
  border-color: rgba(87,185,255,.46) !important;
}

.briefing-page-hero .briefing-hero-card .briefing-hero-card-label,
.briefing-page-hero .briefing-hero-card [class*="label"],
.briefing-page-hero .briefing-hero-card [class*="kicker"],
.briefing-hero .briefing-hero-card .briefing-hero-card-label,
.briefing-hero .briefing-hero-card [class*="label"],
.briefing-hero .briefing-hero-card [class*="kicker"] {
  color: var(--gold-warm, #C8973A) !important;
}

.briefing-page-hero .briefing-hero-card p,
.briefing-page-hero .briefing-hero-card li,
.briefing-hero .briefing-hero-card p,
.briefing-hero .briefing-hero-card li {
  color: var(--text-body, #53667A) !important;
}

.briefing-page-hero .briefing-hero-card h1,
.briefing-page-hero .briefing-hero-card h2,
.briefing-page-hero .briefing-hero-card h3,
.briefing-page-hero .briefing-hero-card h4,
.briefing-page-hero .briefing-hero-card strong,
.briefing-hero .briefing-hero-card h1,
.briefing-hero .briefing-hero-card h2,
.briefing-hero .briefing-hero-card h3,
.briefing-hero .briefing-hero-card h4,
.briefing-hero .briefing-hero-card strong {
  color: var(--blue-deep, #0D3B66) !important;
}

/* Remove reveal/parallax treatment from the hero question card itself. */
.briefing-page-hero .briefing-hero-card.scroll-reveal-ready,
.briefing-hero .briefing-hero-card.scroll-reveal-ready {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

/* If the card got inline transform from scroll polish, neutralize it except hover. */
.scroll-polish-enabled .briefing-page-hero .briefing-hero-card,
.scroll-polish-enabled .briefing-hero .briefing-hero-card {
  transform: none !important;
}


/* V5 design correction: make the briefing hero question card feel intentional again.
   V4 fixed readability but made the card too plain/flat. This restores a premium glass-card treatment. */
.briefing-page-hero .briefing-hero-card,
.briefing-hero .briefing-hero-card {
  max-width: 520px !important;
  padding: clamp(1.35rem, 2vw, 1.75rem) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,248,255,.90)) !important;
  border: 1px solid rgba(210, 224, 236, .86) !important;
  box-shadow:
    0 24px 70px rgba(2, 29, 53, .20),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden;
}

.briefing-page-hero .briefing-hero-card::before,
.briefing-hero .briefing-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 0%, rgba(87,185,255,.16), transparent 38%),
    linear-gradient(90deg, rgba(200,151,58,.18), transparent 18%);
  opacity: .78;
}

.briefing-page-hero .briefing-hero-card > *,
.briefing-hero .briefing-hero-card > * {
  position: relative;
  z-index: 1;
}

.briefing-page-hero .briefing-hero-card [class*="label"],
.briefing-page-hero .briefing-hero-card [class*="kicker"],
.briefing-hero .briefing-hero-card [class*="label"],
.briefing-hero .briefing-hero-card [class*="kicker"] {
  color: var(--gold-warm, #C8973A) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: .85rem !important;
}

.briefing-page-hero .briefing-hero-card h1,
.briefing-page-hero .briefing-hero-card h2,
.briefing-page-hero .briefing-hero-card h3,
.briefing-page-hero .briefing-hero-card h4,
.briefing-page-hero .briefing-hero-card strong,
.briefing-hero .briefing-hero-card h1,
.briefing-hero .briefing-hero-card h2,
.briefing-hero .briefing-hero-card h3,
.briefing-hero .briefing-hero-card h4,
.briefing-hero .briefing-hero-card strong {
  color: var(--blue-deep, #0D3B66) !important;
}

.briefing-page-hero .briefing-hero-card p,
.briefing-page-hero .briefing-hero-card li,
.briefing-hero .briefing-hero-card p,
.briefing-hero .briefing-hero-card li {
  color: var(--text-body, #53667A) !important;
  font-size: clamp(.94rem, 1.08vw, 1.06rem) !important;
  line-height: 1.62 !important;
  margin: 0 !important;
}

/* Hover should be subtle; the hero card is already prominent. */
.briefing-page-hero .briefing-hero-card:hover,
.briefing-hero .briefing-hero-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(87,185,255,.46) !important;
  box-shadow:
    0 30px 82px rgba(2, 29, 53, .24),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* Keep scroll polish from treating this as a reveal/parallax target. */
.briefing-page-hero .briefing-hero-card.scroll-reveal-ready,
.briefing-hero .briefing-hero-card.scroll-reveal-ready {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

.scroll-polish-enabled .briefing-page-hero .briefing-hero-card,
.scroll-polish-enabled .briefing-hero .briefing-hero-card {
  transform: none !important;
}

/* Desktop alignment: let the card sit like a designed side panel, not a generic white box. */
@media (min-width: 980px) {
  .briefing-page-hero .briefing-hero-card,
  .briefing-hero .briefing-hero-card {
    justify-self: end;
    align-self: center;
  }
}

/* Mobile: preserve readability without overwhelming the hero. */
@media (max-width: 760px) {
  .briefing-page-hero .briefing-hero-card,
  .briefing-hero .briefing-hero-card {
    max-width: none !important;
    padding: 1.2rem !important;
    border-radius: 20px !important;
  }
}


/* V6 correction: restore original premium blue hero question card.
   Keep gold heading, readable white/body text, and hover polish. */
.briefing-page-hero .briefing-hero-card,
.briefing-hero .briefing-hero-card {
  max-width: 520px !important;
  padding: clamp(1.35rem, 2vw, 1.75rem) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(87,185,255,.20), transparent 38%),
    linear-gradient(135deg, rgba(13,59,102,.96), rgba(8,43,76,.94)) !important;
  border: 1px solid rgba(87,185,255,.30) !important;
  box-shadow:
    0 28px 76px rgba(2, 29, 53, .30),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden;
}

.briefing-page-hero .briefing-hero-card::before,
.briefing-hero .briefing-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 90% 6%, rgba(87,185,255,.20), transparent 34%),
    linear-gradient(90deg, rgba(200,151,58,.18), transparent 20%);
  opacity: .9;
}

.briefing-page-hero .briefing-hero-card > *,
.briefing-hero .briefing-hero-card > * {
  position: relative;
  z-index: 1;
}

.briefing-page-hero .briefing-hero-card [class*="label"],
.briefing-page-hero .briefing-hero-card [class*="kicker"],
.briefing-hero .briefing-hero-card [class*="label"],
.briefing-hero .briefing-hero-card [class*="kicker"] {
  color: var(--gold-warm, #C8973A) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: .85rem !important;
}

.briefing-page-hero .briefing-hero-card h1,
.briefing-page-hero .briefing-hero-card h2,
.briefing-page-hero .briefing-hero-card h3,
.briefing-page-hero .briefing-hero-card h4,
.briefing-page-hero .briefing-hero-card strong,
.briefing-hero .briefing-hero-card h1,
.briefing-hero .briefing-hero-card h2,
.briefing-hero .briefing-hero-card h3,
.briefing-hero .briefing-hero-card h4,
.briefing-hero .briefing-hero-card strong {
  color: #fff !important;
}

.briefing-page-hero .briefing-hero-card p,
.briefing-page-hero .briefing-hero-card li,
.briefing-hero .briefing-hero-card p,
.briefing-hero .briefing-hero-card li {
  color: rgba(255,255,255,.86) !important;
  font-size: clamp(.94rem, 1.08vw, 1.06rem) !important;
  line-height: 1.62 !important;
  margin: 0 !important;
}

/* Restore the premium hover motion without making it jumpy. */
.briefing-page-hero .briefing-hero-card:hover,
.briefing-hero .briefing-hero-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(87,185,255,.54) !important;
  box-shadow:
    0 34px 86px rgba(2, 29, 53, .36),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Keep scroll polish from fading or whitening this hero card. */
.briefing-page-hero .briefing-hero-card.scroll-reveal-ready,
.briefing-hero .briefing-hero-card.scroll-reveal-ready {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

.scroll-polish-enabled .briefing-page-hero .briefing-hero-card,
.scroll-polish-enabled .briefing-hero .briefing-hero-card {
  transform: none !important;
}

/* But allow hover to win over the anti-parallax rule. */
.scroll-polish-enabled .briefing-page-hero .briefing-hero-card:hover,
.scroll-polish-enabled .briefing-hero .briefing-hero-card:hover {
  transform: translateY(-5px) !important;
}

@media (max-width: 760px) {
  .briefing-page-hero .briefing-hero-card,
  .briefing-hero .briefing-hero-card {
    max-width: none !important;
    padding: 1.2rem !important;
    border-radius: 20px !important;
  }
}


/* V7 fix: restore visible gold label on blue hero question card.
   Some base styles target the exact hero-card label more strongly than the generic [class*=label] rule. */
.briefing-page-hero .briefing-hero-card .briefing-hero-card-label,
.briefing-page-hero .briefing-hero-card .briefing-card-label,
.briefing-page-hero .briefing-hero-card .eyebrow,
.briefing-page-hero .briefing-hero-card .kicker,
.briefing-page-hero .briefing-hero-card [class*="label"],
.briefing-page-hero .briefing-hero-card [class*="kicker"],
.briefing-page-hero .briefing-hero-card [class*="eyebrow"],
.briefing-hero .briefing-hero-card .briefing-hero-card-label,
.briefing-hero .briefing-hero-card .briefing-card-label,
.briefing-hero .briefing-hero-card .eyebrow,
.briefing-hero .briefing-hero-card .kicker,
.briefing-hero .briefing-hero-card [class*="label"],
.briefing-hero .briefing-hero-card [class*="kicker"],
.briefing-hero .briefing-hero-card [class*="eyebrow"] {
  color: #D8A640 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.14) !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

/* Make the blue card a touch less dark so the label and text sit better. */
.briefing-page-hero .briefing-hero-card,
.briefing-hero .briefing-hero-card {
  background:
    radial-gradient(circle at 92% 0%, rgba(87,185,255,.23), transparent 38%),
    linear-gradient(135deg, rgba(17,74,116,.96), rgba(8,43,76,.95)) !important;
}

/* Keep body question bright but not harsh. */
.briefing-page-hero .briefing-hero-card p,
.briefing-page-hero .briefing-hero-card li,
.briefing-hero .briefing-hero-card p,
.briefing-hero .briefing-hero-card li {
  color: rgba(255,255,255,.90) !important;
}

/* If any older scroll fix put inline dark color on the label, override it again at the end. */
.scroll-polish-enabled .briefing-page-hero .briefing-hero-card [class*="label"],
.scroll-polish-enabled .briefing-page-hero .briefing-hero-card [class*="kicker"],
.scroll-polish-enabled .briefing-page-hero .briefing-hero-card [class*="eyebrow"],
.scroll-polish-enabled .briefing-hero .briefing-hero-card [class*="label"],
.scroll-polish-enabled .briefing-hero .briefing-hero-card [class*="kicker"],
.scroll-polish-enabled .briefing-hero .briefing-hero-card [class*="eyebrow"] {
  color: #D8A640 !important;
  opacity: 1 !important;
}


/* V8: stop scroll-polish from styling the briefing hero question card.
   The page's original briefing CSS owns this component. Scroll-polish should not override it. */

/* Remove scroll-polish effects from the hero question card and its descendants. */
.briefing-hero-card,
.briefing-hero-card *,
.briefing-page-hero .briefing-hero-card,
.briefing-page-hero .briefing-hero-card *,
.briefing-hero .briefing-hero-card,
.briefing-hero .briefing-hero-card * {
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: inherit;
}

/* Restore the original-looking dark treatment using the site's own variables. */
.briefing-hero-card {
  background:
    radial-gradient(circle at 96% 0%, rgba(87,185,255,.22), transparent 38%),
    linear-gradient(135deg, rgba(13,59,102,.94), rgba(8,43,76,.95)) !important;
  color: #fff !important;
  border-color: rgba(87,185,255,.28) !important;
  box-shadow:
    0 26px 70px rgba(2,29,53,.30),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Known actual label class + common fallbacks. */
.briefing-hero-card .briefing-hero-card-label,
.briefing-hero-card .briefing-hero-label,
.briefing-hero-card .hero-card-label,
.briefing-hero-card .section-label,
.briefing-hero-card .eyebrow,
.briefing-hero-card .kicker,
.briefing-hero-card > div:first-child,
.briefing-hero-card > span:first-child,
.briefing-hero-card > p:first-child {
  color: #D8A640 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Question text should be white. Target common structures without relying on exact class names. */
.briefing-hero-card .briefing-hero-card-question,
.briefing-hero-card .hero-card-question,
.briefing-hero-card h1,
.briefing-hero-card h2,
.briefing-hero-card h3,
.briefing-hero-card h4,
.briefing-hero-card p:not(:first-child),
.briefing-hero-card li {
  color: rgba(255,255,255,.90) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If the label is implemented as uppercase text in a paragraph, keep first paragraph gold. */
.briefing-hero-card p:first-child {
  color: #D8A640 !important;
}

/* Make the hover simple and reliable. */
.briefing-hero-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(87,185,255,.52) !important;
  box-shadow:
    0 34px 86px rgba(2,29,53,.36),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Ensure scroll reveal/parallax never applies to this card. */
.briefing-hero-card.scroll-reveal-ready,
.briefing-hero-card.is-visible {
  opacity: 1 !important;
  transition-delay: 0ms !important;
}

.scroll-polish-enabled .briefing-hero-card:not(:hover) {
  transform: none !important;
}