/* Shared functional-persona presentation: heroes, role timelines, four-part frameworks,
   authored narrative/evidence widgets, and responsive states. functional-persona.js
   inserts shared sections; page HTML owns any authored persona-specific content. */

.functional-persona-page {
  background: var(--color-page);
  color: var(--color-text);
}

.functional-persona-page .page {
  overflow: clip;
}

/* Shared persona hero: branded fallback, responsive photography, and optional tile artwork use the same content rail. */
.persona-hero {
  margin-bottom: 0;
  background-color: var(--color-brand);
  background-image:
    radial-gradient(circle at 71% 16%, rgba(255, 255, 255, 0.16), transparent 29%),
    radial-gradient(circle at 88% 76%, rgba(139, 181, 104, 0.24), transparent 34%),
    linear-gradient(124deg, #004c3e 0%, #075f49 42%, #367f57 72%, #76a35d 100%);
}

.persona-hero::before {
  z-index: 1;
  background: var(--hero-image-overlay);
}

.persona-hero::after {
  z-index: 1;
  background-image: var(--nka-grain);
  opacity: 0.045;
}

.persona-hero--placeholder::before {
  background:
    radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(90deg, rgba(0, 45, 36, 0.2) 0%, rgba(0, 45, 36, 0.04) 72%, transparent 100%);
}

.persona-hero--placeholder::after {
  background-image:
    var(--nka-grain),
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, 0.045) 48% 49%, transparent 49% 100%);
  opacity: 0.06;
}

.persona-hero-bridge__inner,
.persona-signal-strip__inner,
.persona-section,
.persona-action,
.persona-sources {
  width: var(--page-rail-width);
  max-width: var(--content-max);
  margin-inline: auto;
}

.persona-hero__content {
  z-index: 3;
  width: var(--hero-banner-content-width);
}

.persona-hero__content > .section-eyebrow {
  color: var(--type-hero-eyebrow-color);
  font-family: var(--type-hero-eyebrow-font-family);
  font-size: var(--type-hero-eyebrow-size);
  font-weight: var(--type-hero-eyebrow-weight);
  letter-spacing: var(--type-hero-eyebrow-letter-spacing);
  line-height: var(--type-hero-eyebrow-line-height);
  text-transform: var(--type-hero-eyebrow-text-transform);
}

.persona-hero__content > p:not(.section-eyebrow) {
  max-width: 100%;
  text-wrap: pretty;
}

.persona-hero__acronym {
  display: inline-block;
  margin-left: 0.22em;
  padding-top: 0.24em;
  font-family: var(--font-sans);
  font-size: 0.24em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.035em;
  vertical-align: top;
  white-space: nowrap;
}

.persona-hero__slides {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.persona-hero__slides picture {
  display: contents;
}

.persona-hero__slides img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: translate3d(
      var(--hero-ken-burns-from-x),
      var(--hero-ken-burns-from-y),
      0
    )
    scale(var(--hero-ken-burns-from-scale));
  will-change: opacity, transform;
}

.persona-hero__slides img.is-active {
  animation:
    personaHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
    personaHeroImageDrift var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
}

@keyframes personaHeroImageReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes personaHeroImageDrift {
  from {
    transform: translate3d(
        var(--hero-ken-burns-from-x),
        var(--hero-ken-burns-from-y),
        0
      )
      scale(var(--hero-ken-burns-from-scale));
  }
  to {
    transform: translate3d(
        var(--hero-ken-burns-to-x),
        var(--hero-ken-burns-to-y),
        0
      )
      scale(var(--hero-ken-burns-to-scale));
  }
}

@keyframes personaHeroImageDriftMobile {
  from { transform: translate3d(-4px, 0, 0) scale(1.035); }
  to { transform: translate3d(4px, 0, 0) scale(1.095); }
}

.persona-hero__dots {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 3vw, 52px);
  bottom: clamp(20px, 2.4vw, 38px);
}

.persona-hero__mosaic {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  bottom: var(--space-4);
  right: var(--space-4);
  width: min(42%, 700px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: clamp(8px, 0.8vw, 14px);
  margin: 0;
}

.persona-hero__grid-block {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: clamp(13px, 1.2vw, 20px);
  background: color-mix(in srgb, var(--color-brand) 78%, var(--color-brand-accent));
  box-shadow: 0 18px 44px rgba(0, 39, 31, 0.2);
  isolation: isolate;
  opacity: 0.28;
  transform: scale(0.82);
  transform-origin: center;
  transition:
    opacity 620ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 620ms ease;
  will-change: opacity, transform;
}

.persona-hero__grid-block::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 52%);
  content: "";
  pointer-events: none;
}

.persona-hero__grid-block img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 560ms ease 70ms,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.persona-hero__grid-block.is-loaded {
  opacity: 1;
  transform: scale(1);
  will-change: auto;
}

.persona-hero__grid-block.is-loaded img {
  opacity: 1;
  transform: scale(1);
}

.persona-hero__grid-block.is-error {
  opacity: 0.72;
  transform: scale(1);
}



.persona-hero__grid-block--a {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
}

.persona-hero__grid-block--a img {
  object-position: 55% center;
}

.persona-hero__grid-block--b {
  grid-column: 4 / 7;
  grid-row: 1 / 3;
  background: color-mix(in srgb, var(--color-brand) 64%, var(--color-brand-accent));
}

.persona-hero__grid-block--b img {
  object-position: center 42%;
}

.persona-hero__grid-block--c {
  grid-column: 4 / 6;
  grid-row: 3 / 6;
  background: color-mix(in srgb, var(--color-brand) 84%, var(--color-brand-accent));
}

.persona-hero__grid-block--c img {
  object-position: 48% 34%;
}

.persona-hero__grid-block--d {
  grid-column: 6 / 7;
  grid-row: 3 / 6;
  background: color-mix(in srgb, var(--color-brand) 58%, var(--color-brand-accent));
}

.persona-hero__grid-block--d img {
  object-position: 60% 36%;
}

.persona-hero__grid-block--e {
  grid-column: 1 / 3;
  grid-row: 4 / 7;
  background: color-mix(in srgb, var(--color-brand) 70%, var(--color-brand-accent));
}

.persona-hero__grid-block--e img {
  object-position: center;
}

.persona-hero__grid-block--f {
  grid-column: 3 / 4;
  grid-row: 4 / 7;
  background: color-mix(in srgb, var(--color-brand) 88%, var(--color-brand-accent));
}

.persona-hero__grid-block--f img {
  object-position: 48% 28%;
}

.persona-hero__grid-block--g {
  grid-column: 1 / 4;
  grid-row: 7 / 9;
  background: color-mix(in srgb, var(--color-brand) 60%, var(--color-brand-accent));
}

.persona-hero__grid-block--g img {
  object-position: center 38%;
}

.persona-hero__grid-block--h {
  grid-column: 4 / 7;
  grid-row: 6 / 9;
  background: color-mix(in srgb, var(--color-brand) 76%, var(--color-brand-accent));
}

.persona-hero__grid-block--h img {
  object-position: center;
}

.persona-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--color-brand);
  font-size: 14px;
  text-decoration: none;
}

.persona-hero__back svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.persona-hero__summary {
  max-width: 68ch;
  margin: 0;
  color: var(--slate);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.72;
}

.persona-hero__research-date {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.persona-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.persona-hero__actions .button {
  color: var(--color-text-inverse);
  background: var(--color-brand);
}

.persona-hero__actions > span {
  color: var(--color-text-muted);
  font-size: 13px;
}

.persona-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
}

.persona-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--card-media-zoom-duration) var(--card-media-zoom-ease);
}

.persona-hero__media:hover img {
  transform: scale(var(--card-media-zoom-scale));
}

.persona-hero-bridge {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.persona-hero-bridge__inner {
  display: block;
  padding-block: clamp(var(--space-7), 5vw, var(--space-9));
}

/* CFO sections reuse the canonical How We Hold article composition. The
   wrapper keeps each section label and heading together in column one. */
.persona-strategy-article .strategy-article__header > div {
  grid-column: 1;
  grid-row: 1;
}

.persona-strategy-article .strategy-article__header > div h2 {
  grid-column: auto;
}

/* Keep persona narratives on the same compact reading scale as the shared
   How We Hold and client-value-story articles. This page stylesheet loads
   last, so the contract remains stable if broader article rules evolve. */
.persona-strategy-article .strategy-article__column p,
.persona-strategy-article .strategy-article__closing {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.72;
}

.persona-strategy-article
  .strategy-article__body
  > .strategy-article__column:first-child
  > p:first-child::first-letter {
  margin: 0.06em 0.12em 0 0;
  font-size: 4.45em;
  font-weight: 600;
  line-height: 0.78;
}

.persona-signal-strip {
  padding-block: clamp(var(--space-7), 5vw, var(--space-8));
  background: var(--color-surface);
}

.persona-signal-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--space-5), 3vw, var(--space-7));
}

.persona-signal-strip article {
  padding: 0;
}

.persona-signal-strip article > span,
.dashboard-card > span {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.persona-signal-strip strong {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 500;
  line-height: 1;
}

.persona-signal-strip p {
  min-height: 5.2em;
  margin: var(--space-4) 0;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.55;
}

.persona-signal-strip a {
  color: var(--color-brand);
  font-size: 12px;
  text-underline-offset: 4px;
}

/* Role timeline: desktop moments alternate around a track; later responsive rules convert them into a vertical reading sequence. */
.persona-evolution-timeline {
  padding: clamp(30px, 4vw, 56px) clamp(20px, 3vw, 44px) clamp(24px, 3vw, 42px);
  border-radius: calc(var(--radius-card) * 0.8);
  background: #f4f5f3;
}

/* Keep timeline content on the shared rail; the parent owns the edge-to-edge
   cream band and its vertical breathing room on every persona page. */
.persona-evolution-timeline--gallery {
  width: var(--page-rail-width);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: 0;
  border-radius: 0;
  background: transparent;
}

.persona-evolution-timeline__heading {
  max-width: 980px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0 auto;
  /* Separate the introductory copy from the cards without altering track geometry. */
  padding: 0 clamp(2px, 0.5vw, 8px) clamp(var(--space-8), 7vw, var(--space-9));
  text-align: center;
}

.persona-evolution-timeline__eyebrow {
  margin: 0;
  color: var(--green);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.persona-evolution-timeline__heading h2,
.persona-evolution-timeline__heading h3 {
  margin: 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.persona-evolution-timeline__heading > p:last-child {
  max-width: 74ch;
  margin: 0;
  color: var(--slate);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  line-height: var(--leading-body);
  /* Centered introductions need even line lengths rather than a short tail. */
  text-wrap: balance;
}

.persona-evolution-timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* Reserve room above and below the rail for the shared, taller role cards. */
  height: calc(var(--space-9) * 7 + var(--space-6));
  margin: 0;
  padding: 0 8%;
  overflow: hidden;
  list-style: none;
}

.persona-evolution-timeline__track::before {
  position: absolute;
  top: 50%;
  z-index: 2;
  right: 0;
  left: 0;
  height: 9px;
  background:
    radial-gradient(circle, rgba(74, 104, 67, 0.38) 0 1.25px, #f4f5f3 1.5px 2.75px, transparent 3px) center / 5% 9px repeat-x,
    linear-gradient(90deg, transparent, #c98762 7%, #baa064 28%, #98a46e 50%, #7f9f68 72%, #5f9349 93%, transparent) center / 100% 2px no-repeat;
  content: "";
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition:
    opacity 220ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.persona-evolution-timeline__track::after {
  position: absolute;
  z-index: 1;
  inset: 2% 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(5% - 1px),
    rgba(0, 87, 70, 0.06) calc(5% - 1px),
    rgba(0, 87, 70, 0.06) 5%
  );
  content: "";
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease 100ms;
}

.persona-evolution-timeline.is-visible .persona-evolution-timeline__track::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}

.persona-evolution-timeline.is-visible .persona-evolution-timeline__track::after {
  opacity: 1;
}

.persona-evolution-timeline__moment {
  --timeline-stem: clamp(64px, 5vw, 74px);
  /* Long persona titles need the same breathing room as the shorter CEO copy. */
  --timeline-card-height: calc(var(--space-8) * 3 + var(--space-7));
  --timeline-sequence-delay: calc(var(--motion-base) * 2);
  --timeline-era-fill: #f1dfd2;
  --timeline-era-line: #c98762;
  --timeline-era-text: #76472f;
  position: relative;
  z-index: 3;
  min-width: 0;
}

.persona-evolution-timeline__moment::before {
  position: absolute;
  left: 50%;
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  box-sizing: border-box;
  height: calc(var(--timeline-stem) + 28px);
  border: 0;
  background: color-mix(in srgb, var(--timeline-era-line) 52%, #f4f5f3);
  content: "";
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transition:
    opacity 200ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--timeline-sequence-delay);
}

.persona-evolution-timeline__moment:nth-child(2) {
  --timeline-sequence-delay: calc(var(--motion-base) * 3);
  --timeline-era-fill: #eee5ca;
  --timeline-era-line: #baa064;
  --timeline-era-text: #66552e;
}

.persona-evolution-timeline__moment:nth-child(3) {
  --timeline-sequence-delay: calc(var(--motion-base) * 4);
  --timeline-era-fill: #e3e8cf;
  --timeline-era-line: #98a46e;
  --timeline-era-text: #53603a;
}

.persona-evolution-timeline__moment:nth-child(4) {
  --timeline-sequence-delay: calc(var(--motion-base) * 5);
  --timeline-era-fill: #d8e5cc;
  --timeline-era-line: #7f9f68;
  --timeline-era-text: #42603a;
}

.persona-evolution-timeline__moment:nth-child(5) {
  --timeline-sequence-delay: calc(var(--motion-base) * 6);
  --timeline-era-fill: #cce0c3;
  --timeline-era-line: #5f9349;
  --timeline-era-text: #305e32;
}

.persona-evolution-timeline__moment--top::before {
  top: calc(50% - var(--timeline-stem) - 28px);
  transform-origin: center bottom;
}

.persona-evolution-timeline__moment--bottom::before {
  top: 50%;
  transform-origin: center top;
}

.persona-evolution-timeline.is-visible .persona-evolution-timeline__moment::before {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

.persona-evolution-timeline__moment article {
  position: absolute;
  left: 50%;
  width: clamp(264px, 21vw, 310px);
  height: var(--timeline-card-height);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(0, 87, 70, 0.09);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 9px 24px rgba(0, 42, 33, 0.075);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition:
    transform var(--motion-slow) var(--motion-ease-soft),
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.persona-evolution-timeline__moment--top article {
  bottom: calc(50% + var(--timeline-stem));
}

.persona-evolution-timeline__moment--bottom article {
  top: calc(50% + var(--timeline-stem));
}

.persona-evolution-timeline.is-visible .persona-evolution-timeline__moment article {
  opacity: 1;
  transform: translate(-50%, 0);
  /* A gentle fade/lift avoids the old scale pop. Shared timing keeps each card
     and its era marker in sequence on both desktop and stacked layouts. */
  animation: personaTimelineCardEnter calc(var(--motion-slow) * 3) var(--motion-ease-soft) backwards;
  animation-delay: calc(var(--timeline-sequence-delay) + var(--motion-fast));
}

@keyframes personaTimelineCardEnter {
  from {
    opacity: 0;
    transform: translate(-50%, var(--space-3));
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes personaTimelineCardEnterMobile {
  from {
    opacity: 0;
    transform: translateY(var(--space-3));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.persona-evolution-timeline__moment article:hover {
  border-color: rgba(0, 87, 70, 0.26);
  box-shadow: 0 15px 32px rgba(0, 55, 44, 0.12);
  transform: translate(-50%, -3px);
}

.persona-evolution-timeline__moment figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #dfe6da;
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(-n + 4) figure {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--timeline-era-fill) 38%, #fff);
}

.persona-evolution-timeline__moment figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.72) contrast(0.96);
  transition: transform 700ms var(--motion-ease);
}

.persona-evolution-timeline__moment article:hover figure img {
  transform: scale(1.045);
}

/* Gallery artwork fills the media panel without its portrait
   aspect ratio setting the height of the responsive, text-sized card. */
.persona-evolution-timeline__moment .persona-evolution-timeline__gallery-study {
  position: relative;
}

.persona-evolution-timeline__moment .persona-evolution-timeline__gallery-study img {
  position: absolute;
  inset: 0;
}

.persona-section.persona-section--role-evolution {
  width: 100%;
  max-width: none;
  padding-block: clamp(var(--space-8), 7vw, var(--space-9));
  background: var(--color-surface-cream);
}

/* The supplied four-part perspective is a self-contained vector composition.
   Its cream field belongs to the component so the transparent SVG stays on brand. */
.persona-story-framework {
  /* Shared four-lens component tokens. These are the single adjustment point for
     every functional persona; individual pages supply content and portrait only. */
  --persona-lens-section-padding-top: clamp(58px, 6vw, 96px);
  --persona-lens-intro-width: min(var(--page-rail-width), 760px);
  --persona-lens-title-width: 680px;
  --persona-lens-title-size: clamp(27px, 3vw, 42px);
  --persona-lens-copy-width: 700px;
  --persona-lens-copy-size: clamp(15px, 1.2vw, 17px);
  --persona-lens-composition-height: clamp(560px, 42vw, 700px);
  --persona-lens-composition-gap: clamp(24px, 3vw, 44px);
  --persona-lens-anchor-x: 50.08%;
  --persona-lens-anchor-y: 58.5%;
  --persona-lens-diagram-anchor-y: 59.72%;
  --persona-lens-diagram-scale: 1.58;
  --persona-lens-portrait-size: clamp(138px, 12.8vw, 198px);
  --persona-lens-portrait-border: clamp(9px, 0.8vw, 13px);
  --persona-lens-portrait-position: 48% 34%;
  --persona-lens-portrait-hover-scale: 1.12;
  --persona-lens-portrait-zoom-duration: 2800ms;
  --persona-lens-portrait-zoom-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --persona-lens-name-top: 80%;
  --persona-lens-name-size: clamp(24px, 2vw, 34px);
  --persona-lens-tag-top: 90%;
  --persona-lens-callout-width: min(24%, 350px);
  --persona-lens-callout-size: clamp(16px, 1.35vw, 22px);
  --persona-lens-callout-side: 10%;
  --persona-lens-callout-top: 52%;
  --persona-lens-callout-upper-side: 21%;
  --persona-lens-callout-upper-top: 7%;
  width: 100%;
  max-width: none;
  overflow: hidden;
  padding-top: var(--persona-lens-section-padding-top);
  padding-bottom: clamp(48px, 6vw, 96px);
  border-top: 1px solid rgba(0, 87, 70, 0.16);
  background: var(--color-surface-cream);
}

/* Scaffold persona pages fetch the shared header after first paint. Reserve its
   final footprint so mobile content does not jump when the shell arrives. */
[data-signal-page-header] {
  display:block;
  min-height:var(--header-height,77px);
}

.persona-story-framework__intro {
  position: relative;
  z-index: 4;
  width: var(--persona-lens-intro-width);
  margin-inline: auto;
  text-align: center;
}

.persona-story-framework__intro h2 {
  max-width: var(--persona-lens-title-width);
  margin: 0 auto 14px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: var(--persona-lens-title-size);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.persona-story-framework__intro > p:last-child {
  max-width: var(--persona-lens-copy-width);
  margin: 0 auto;
  color: var(--slate);
  font-size: var(--persona-lens-copy-size);
  font-weight: 300;
  line-height: 1.6;
  text-wrap: pretty;
}

.persona-download-cta {
  --persona-download-bg: #efeae0;
  --persona-download-preview-width: 340px;
  --persona-download-preview-radius: 10px;
  --persona-download-content-width: 420px;
  --persona-download-column-gap: clamp(28px, 3vw, 44px);
  --persona-download-layer-color: #fff;
  --persona-download-layer-border: rgba(110, 156, 86, .72);
  --persona-download-icon-color: #6e9c56;
  --persona-download-hover-lift: -6px;
  --persona-download-hover-rotation: -1.8deg;
  --persona-download-layer-left-x: -18px;
  --persona-download-layer-left-y: 14px;
  --persona-download-layer-left-rotation: -3deg;
  --persona-download-layer-right-x: 17px;
  --persona-download-layer-right-y: 10px;
  --persona-download-layer-right-rotation: 2.4deg;
  --persona-download-icon-right: -23px;
  --persona-download-icon-bottom: -23px;
  --persona-download-optical-offset-x: clamp(42px, 4vw, 72px);
  --persona-download-tablet-preview-gap: 34px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: var(--space-4);
  min-height: 360px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 112px) var(--page-gutter-inline);
  background: var(--persona-download-bg);
  text-align: center;
}

/* Preserve the larger persona preview without crowding the copy at tablet widths. */
@media (min-width: 761px) and (max-width: 900px) {
  .persona-download-cta {
    --persona-download-preview-width: 320px;
    --persona-download-content-width: 360px;
    --persona-download-column-gap: 24px;
    --persona-download-optical-offset-x: 16px;
  }
}

.persona-download-cta__icon {
  display: grid;
  place-items: center;
  color: var(--persona-download-icon-color);
}

.persona-download-cta__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.35;
}

.persona-download-cta__preview {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--persona-download-preview-width));
  border-radius: var(--persona-download-preview-radius);
  cursor: pointer;
  text-decoration: none;
  filter:
    drop-shadow(0 16px 26px rgba(0, 55, 43, .11))
    drop-shadow(0 3px 7px rgba(0, 55, 43, .07));
}

.persona-download-cta__preview::before,
.persona-download-cta__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--persona-download-layer-border);
  border-radius: inherit;
  background: var(--persona-download-layer-color);
  opacity: 0;
  transition:
    opacity 240ms ease,
    transform 780ms cubic-bezier(.16, 1, .3, 1);
}

.persona-download-cta__preview::before {
  z-index: 0;
  transform: translate(0) rotate(0);
}

.persona-download-cta__preview::after {
  z-index: 1;
  transform: translate(0) rotate(0);
}

.persona-download-cta__preview img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: inherit;
}

.persona-download-cta__preview-icon {
  position: absolute;
  z-index: 4;
  right: var(--persona-download-icon-right);
  bottom: var(--persona-download-icon-bottom);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(110, 156, 86, .22);
  border-radius: 50%;
  color: var(--persona-download-icon-color);
  background: var(--persona-download-layer-color);
  box-shadow: 0 9px 22px rgba(0, 55, 43, .16);
  opacity: 0;
  transform: translate(-8px, -8px) scale(.72);
  transition:
    opacity 220ms ease,
    transform 600ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.persona-download-cta__preview-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .persona-download-cta[data-reveal].is-visible .persona-download-cta__preview:hover,
  .persona-download-cta[data-reveal].is-visible:has(.persona-download-cta__button:hover) .persona-download-cta__preview {
    transform: translateY(var(--persona-download-hover-lift)) rotate(var(--persona-download-hover-rotation)) scale(1.012);
  }

  .persona-download-cta__preview:hover::before,
  .persona-download-cta:has(.persona-download-cta__button:hover) .persona-download-cta__preview::before {
    opacity: 1;
    transform: translate(var(--persona-download-layer-left-x), var(--persona-download-layer-left-y)) rotate(var(--persona-download-layer-left-rotation));
    transition-duration: 920ms;
  }

  .persona-download-cta__preview:hover::after,
  .persona-download-cta:has(.persona-download-cta__button:hover) .persona-download-cta__preview::after {
    opacity: 1;
    transform: translate(var(--persona-download-layer-right-x), var(--persona-download-layer-right-y)) rotate(var(--persona-download-layer-right-rotation));
    transition-duration: 720ms;
  }

  .persona-download-cta__preview:hover .persona-download-cta__preview-icon,
  .persona-download-cta:has(.persona-download-cta__button:hover) .persona-download-cta__preview-icon {
    opacity: 1;
    transform: translate(0) scale(1);
  }

  .persona-download-cta[data-reveal].is-visible .persona-download-cta__preview:active {
    transform: none;
    transition-duration: 280ms;
  }

  .persona-download-cta__preview:active::before {
    opacity: 0;
    transform: translate(0) rotate(0);
    transition-duration: 280ms;
  }

  .persona-download-cta__preview:active::after {
    opacity: 0;
    transform: translate(0) rotate(0);
    transition-duration: 280ms;
  }

  .persona-download-cta__preview:active .persona-download-cta__preview-icon {
    opacity: 0;
    transform: translate(-8px, -8px) scale(.72);
    transition-duration: 220ms;
  }
}

.persona-download-cta__copy h2 {
  max-width: 350px;
  margin: 0 0 var(--space-2);
  color: var(--color-brand);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}

.persona-download-cta__button {
  width: min(100%, 290px);
}

.persona-download-cta:has(.persona-download-cta__preview) {
  grid-template-columns: var(--persona-download-preview-width) minmax(0, var(--persona-download-content-width));
  grid-template-rows: auto auto;
  justify-content: center;
  align-content: center;
  justify-items: start;
  column-gap: var(--persona-download-column-gap);
  row-gap: var(--space-4);
  text-align: left;
}

.persona-download-cta:has(.persona-download-cta__preview) .persona-download-cta__preview {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  left: var(--persona-download-optical-offset-x);
}

.persona-download-cta:has(.persona-download-cta__preview) .persona-download-cta__copy {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  position: relative;
  left: var(--persona-download-optical-offset-x);
}

.persona-download-cta:has(.persona-download-cta__preview) .persona-download-cta__button {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  position: relative;
  left: var(--persona-download-optical-offset-x);
}

/* Keep the banner surface present while its contents reveal. The global
   data-reveal treatment otherwise exposes the white page beneath it. */
.persona-download-cta[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.persona-download-cta[data-reveal] .persona-download-cta__icon,
.persona-download-cta[data-reveal] .persona-download-cta__preview,
.persona-download-cta[data-reveal] .persona-download-cta__copy,
.persona-download-cta[data-reveal] .persona-download-cta__button {
  opacity: 0;
  transition:
    opacity 720ms cubic-bezier(.22, 1, .36, 1),
    transform 900ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.persona-download-cta[data-reveal] .persona-download-cta__icon {
  transform: translateY(10px) scale(.9);
  transition-delay: 120ms;
}

.persona-download-cta[data-reveal] .persona-download-cta__preview {
  transform: translateY(12px) scale(.975);
  transition-delay: 120ms;
}

.persona-download-cta[data-reveal] .persona-download-cta__copy {
  transform: translateY(12px);
  transition-delay: 280ms;
}

.persona-download-cta[data-reveal] .persona-download-cta__button {
  transform: translateY(14px) scale(.98);
  transition-delay: 440ms;
}

.persona-download-cta[data-reveal].is-visible .persona-download-cta__icon,
.persona-download-cta[data-reveal].is-visible .persona-download-cta__preview,
.persona-download-cta[data-reveal].is-visible .persona-download-cta__copy,
.persona-download-cta[data-reveal].is-visible .persona-download-cta__button {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.persona-download-cta[data-reveal].is-visible .persona-download-cta__button:hover {
  transform: translateY(-1px) scale(1);
}

@media (max-width: 760px) {
  .persona-download-cta:has(.persona-download-cta__preview) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: center;
    text-align: center;
  }

  .persona-download-cta:has(.persona-download-cta__preview) .persona-download-cta__preview,
  .persona-download-cta:has(.persona-download-cta__preview) .persona-download-cta__copy,
  .persona-download-cta:has(.persona-download-cta__preview) .persona-download-cta__button {
    grid-column: 1;
    grid-row: auto;
    left: 0;
  }

  .persona-download-cta:has(.persona-download-cta__preview) .persona-download-cta__copy {
    margin-top: var(--persona-download-tablet-preview-gap);
  }
}

@media (max-width: 480px) {
  .persona-download-cta {
    --persona-download-tablet-preview-gap: 46px;
    min-height: 300px;
    padding-block: 64px;
  }


}

@media (prefers-reduced-motion: reduce) {
  .persona-download-cta[data-reveal] .persona-download-cta__icon,
  .persona-download-cta[data-reveal] .persona-download-cta__preview,
  .persona-download-cta[data-reveal] .persona-download-cta__copy,
  .persona-download-cta[data-reveal] .persona-download-cta__button {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .persona-download-cta[data-reveal].is-visible .persona-download-cta__preview:hover,
  .persona-download-cta[data-reveal].is-visible .persona-download-cta__preview:active {
    transform: none;
  }

  .persona-download-cta__preview::before,
  .persona-download-cta__preview::after {
    transition: none;
  }

  .persona-download-cta__preview-icon {
    transition: none;
  }
}

.persona-story-framework__composition {
  position: relative;
  width: 100%;
  min-height: var(--persona-lens-composition-height);
  margin-top: var(--persona-lens-composition-gap);
}

.persona-story-framework__graphic {
  position: absolute;
  inset: 0;
}

.persona-story-framework[data-reveal] .persona-story-framework__graphic {
  opacity: 0;
  transform: scale(.975);
  transform-origin: center center;
  transition:
    opacity 820ms cubic-bezier(.22, 1, .36, 1) 120ms,
    transform 1050ms cubic-bezier(.22, 1, .36, 1) 120ms;
  will-change: opacity, transform;
}

.persona-story-framework[data-reveal] .persona-story-framework__accessible-item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 680ms cubic-bezier(.22, 1, .36, 1),
    transform 820ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.persona-story-framework[data-reveal] .persona-story-framework__accessible-item--pressure {
  transition-delay: 420ms;
}

.persona-story-framework[data-reveal] .persona-story-framework__accessible-item--conditions {
  transition-delay: 540ms;
}

.persona-story-framework[data-reveal] .persona-story-framework__accessible-item--overview {
  transition-delay: 660ms;
}

.persona-story-framework[data-reveal] .persona-story-framework__accessible-item--future {
  transition-delay: 780ms;
}

.persona-story-framework[data-reveal].is-visible .persona-story-framework__graphic,
.persona-story-framework[data-reveal].is-visible .persona-story-framework__accessible-item {
  opacity: 1;
  transform: none;
}

/* The framework remains stationary so interaction can be limited to its portrait. */
.persona-story-framework__motion {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.persona-story-framework__diagram {
  position: absolute;
  left: var(--persona-lens-anchor-x);
  top: var(--persona-lens-anchor-y);
  width: 100%;
  height: auto;
  display: block;
  transform: translate(-50.08%, -59.72%) scale(var(--persona-lens-diagram-scale));
  transform-origin: var(--persona-lens-anchor-x) var(--persona-lens-diagram-anchor-y);
}

.persona-story-framework__portrait-frame {
  position: absolute;
  z-index: 5;
  left: var(--persona-lens-anchor-x);
  top: var(--persona-lens-anchor-y);
  /* Explicit square dimensions prevent intrinsic image sizing from flattening
     the frame in responsive browser layouts. */
  width: var(--persona-lens-portrait-size);
  height: var(--persona-lens-portrait-size);
  aspect-ratio: 1;
  border: var(--persona-lens-portrait-border) solid var(--color-brand);
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: inset 0 0 0 2px var(--color-brand);
  overflow: hidden;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.persona-story-framework__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--persona-lens-portrait-position);
  transform: scale(1);
  transition:
    transform var(--persona-lens-portrait-zoom-duration)
    var(--persona-lens-portrait-zoom-ease);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .persona-story-framework__portrait-frame:hover .persona-story-framework__portrait {
    transform: scale(var(--persona-lens-portrait-hover-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .persona-story-framework__portrait {
    transition: none;
  }

  .persona-story-framework[data-reveal] .persona-story-framework__graphic,
  .persona-story-framework[data-reveal] .persona-story-framework__accessible-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.persona-story-framework__persona-name,
.persona-story-framework__persona-tag {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.persona-story-framework__persona-name {
  top: var(--persona-lens-name-top);
  color: #6e9c56;
  font-family: var(--font-display);
  font-size: var(--persona-lens-name-size);
  line-height: 1.1;
}

.persona-story-framework__persona-tag {
  top: var(--persona-lens-tag-top);
  min-width: 62px;
  padding: 5px 14px;
  border-radius: 5px;
  color: #fff;
  background: #6e9c56;
  font-size: 15px;
  line-height: 1;
}

.persona-story-framework__details {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.persona-story-framework__accessible-item {
  position: absolute;
  display: block;
  width: var(--persona-lens-callout-width);
  list-style: none;
}

.persona-story-framework__accessible-item strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.persona-story-framework__accessible-item span {
  display: block;
  font-size: var(--persona-lens-callout-size);
  line-height: 1.42;
}

.persona-story-framework__accessible-item--overview {
  left: var(--persona-lens-callout-side);
  top: var(--persona-lens-callout-top);
  padding-inline-end: clamp(28px, 2.6vw, 48px);
  color: #aa7827;
  text-align: right;
}

.persona-story-framework__accessible-item--pressure {
  left: var(--persona-lens-callout-upper-side);
  top: var(--persona-lens-callout-upper-top);
  color: #75576c;
  text-align: right;
}

.persona-story-framework__accessible-item--conditions {
  right: var(--persona-lens-callout-upper-side);
  top: var(--persona-lens-callout-upper-top);
  color: #6e9c56;
  text-align: left;
}

.persona-story-framework__accessible-item--future {
  right: var(--persona-lens-callout-side);
  top: var(--persona-lens-callout-top);
  padding-inline-start: clamp(28px, 2.6vw, 48px);
  color: #0e8c6e;
}

@media (max-width: 1350px) and (min-width: 761px) {
  .persona-story-framework {
    --persona-lens-composition-height: clamp(540px, 58vw, 650px);
    --persona-lens-callout-size: clamp(15px, 1.7vw, 18px);
  }

  .persona-story-framework__composition {
    min-height: var(--persona-lens-composition-height);
  }
}

/* Tablet keeps the radial overview intact, then moves the longer explanatory
   copy into two readable columns instead of compressing the desktop callouts. */
@media (max-width: 1024px) and (min-width: 761px) {
  .persona-story-framework {
    --persona-lens-diagram-scale: 2.05;
    --persona-lens-portrait-size: clamp(116px, 13.5vw, 138px);
    --persona-lens-portrait-border: 8px;
    padding-inline: var(--page-gutter-inline);
  }

  .persona-story-framework__composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    min-height: 0;
    margin-top: var(--space-5);
  }

  .persona-story-framework__graphic {
    position: relative;
    width: min(100%, 760px);
    aspect-ratio: 16 / 9;
    justify-self: center;
  }

  .persona-story-framework__portrait-frame {
    width: var(--persona-lens-portrait-size);
    border-width: var(--persona-lens-portrait-border);
  }

  .persona-story-framework__details {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-7);
    width: min(100%, 760px);
    justify-self: center;
  }

  .persona-story-framework__accessible-item {
    position: static;
    inset: auto;
    display: grid;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(0, 87, 70, 0.12);
    text-align: left;
  }

  .persona-story-framework__accessible-item strong {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    color: var(--color-brand);
    font-family: var(--font-display);
    font-size: var(--type-heading-sm);
    font-weight: 500;
  }

  .persona-story-framework__accessible-item span {
    color: var(--slate);
    line-height: 1.5;
  }
}

@media (max-width: 760px) {
  .persona-story-framework {
    --persona-lens-diagram-scale: 3.15;
    --persona-lens-portrait-size: clamp(96px, 27vw, 112px);
    --persona-lens-portrait-border: 7px;
    --persona-lens-name-top: 84%;
    --persona-lens-name-size: clamp(20px, 6vw, 28px);
    --persona-lens-tag-top: 94%;
    --persona-lens-intro-width: min(100%, 520px);
    --persona-lens-title-size: clamp(26px, 8vw, 34px);
    padding-block: var(--space-7) clamp(40px, 10vw, 64px);
    padding-inline: var(--page-gutter-inline);
  }

  .persona-story-framework__composition {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    min-height: 0;
    margin-top: var(--space-5);
  }

  .persona-story-framework__graphic {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 1;
    justify-self: center;
  }

  .persona-story-framework__portrait-frame {
    width: var(--persona-lens-portrait-size);
    border-width: var(--persona-lens-portrait-border);
  }

  .persona-story-framework__persona-name {
    top: var(--persona-lens-name-top);
    font-size: var(--persona-lens-name-size);
  }

  .persona-story-framework__persona-tag {
    top: var(--persona-lens-tag-top);
  }

  .persona-story-framework__intro {
    width: var(--persona-lens-intro-width);
  }

  .persona-story-framework__intro h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand);
    font-family: var(--font-display);
    font-size: var(--persona-lens-title-size);
    font-weight: 500;
    line-height: 1.08;
  }

  .persona-story-framework__intro > p:last-child {
    line-height: 1.55;
  }

  .persona-story-framework__details {
    position: static;
    display: grid;
    gap: var(--space-4);
    width: min(100%, 520px);
    justify-self: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .persona-story-framework__accessible-item {
    position: static;
    inset: auto;
    display: grid;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(0, 87, 70, 0.12);
    text-align: left;
  }

  .persona-story-framework__accessible-item strong {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    color: var(--color-brand);
    font-family: var(--font-display);
    font-size: var(--type-heading-sm);
    font-weight: 500;
  }

  .persona-story-framework__accessible-item span {
    color: var(--slate);
    line-height: 1.5;
  }
}

/* Narrow phones need more breathing room between the portrait and the four
   lens labels. Keep the SVG composition unchanged and reduce only the shared
   centre portrait so every persona preserves the same geometry. */
@media (max-width: 480px) {
  .persona-story-framework {
    --persona-lens-portrait-size: clamp(82px, 22vw, 94px);
    --persona-lens-portrait-border: 6px;
  }
}

/* Shared framework markers frame the static researched articles. The runtime
   retains sparse previews only as a fallback for newly scaffolded personas. */
.persona-framework-sections {
  width: var(--page-rail-width);
  max-width: var(--content-max);
  display: grid;
  gap: clamp(var(--space-9), 12vw, calc(var(--space-9) * 2));
  margin-inline: auto;
  padding-block: clamp(82px, 9vw, 132px);
}

.persona-framework-section {
  --framework-section-color: #aa7827;
  min-height: clamp(230px, 24vw, 340px);
}

.persona-framework-section--pressure {
  --framework-section-color: #75576c;
}

.persona-framework-section--conditions {
  --framework-section-color: #6e9c56;
}

.persona-framework-section--future {
  --framework-section-color: #0e8c6e;
}

/* Four-paragraph commentary reuses the site's editorial columns and one opening
   drop cap. Each column holds two paragraphs; mobile keeps the reading order. */
.persona-signal-article {
  width: 100%;
  max-width: var(--content-max);
  margin: clamp(var(--space-8), 6vw, var(--space-9)) auto 0;
}

.persona-signal-article h3 {
  margin: 0 0 var(--space-6);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: var(--type-heading-md);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

/* Centered chapter markers create a pause between articles without changing
   the canonical How We Help reading rail or the left-aligned article copy. */
.persona-framework-section__header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: center;
}

.persona-framework-section__marker {
  display: grid;
  place-items: center;
}

.persona-framework-section__icon {
  position: relative;
  z-index: 1;
  width: var(--space-8);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  border: 1px solid color-mix(in srgb, var(--framework-section-color) 32%, var(--color-surface));
  background: color-mix(in srgb, var(--framework-section-color) 7%, var(--color-surface));
}

/* Reflection prompts follow the source article and use the site's outlined
   number language while remaining a readable, semantic ordered list. */
.persona-reflection {
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: clamp(28px, 4vw, 48px) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--framework-section-color) 28%, transparent);
  background: var(--color-surface);
}

.persona-reflection__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--framework-section-color);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.persona-reflection h3 {
  max-width: 920px;
  margin: 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
}

.persona-reflection__questions {
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.persona-reflection__questions li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 2.4vw, 30px);
  padding: clamp(20px, 2.5vw, 30px) 0;
  border-top: 1px solid color-mix(in srgb, var(--framework-section-color) 28%, transparent);
}

.persona-reflection__questions li:last-child {
  padding-bottom: 0;
}

.persona-reflection__number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--framework-section-color);
  border-radius: 50%;
  color: var(--color-brand);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.persona-reflection__questions p {
  width: 100%;
  max-width: none;
  margin: 2px 0 0;
  color: var(--color-brand);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  text-wrap: pretty;
}

.persona-framework-section__icon img {
  width: 56%;
  height: 56%;
  display: block;
  object-fit: contain;
}

.persona-framework-section__rule {
  position: absolute;
  top: calc(100% + var(--space-5));
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--framework-section-color) 38%, transparent) 50%,
    transparent 100%
  );
}

.persona-framework-section h2 {
  min-width: 0;
  margin: 0;
  color: var(--framework-section-color);
  font-family: var(--font-body);
  font-size: var(--type-heading-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  text-align: center;
  text-wrap: balance;
}

/* Phone layout prioritizes reading order and full-width evidence cards over the desktop visual arrangement. */
@media (max-width: 760px) {
  .persona-framework-sections {
    gap: var(--space-9);
    padding-block: 72px;
  }

  .persona-framework-section {
    min-height: 210px;
  }

  .persona-framework-section__icon {
    width: var(--space-7);
  }

  .persona-reflection {
    padding: 24px 0 0;
  }

  .persona-reflection h3 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .persona-reflection__questions li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
  }

  .persona-reflection__number {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(1) figure img {
  object-position: 62% center;
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(2) figure img {
  object-position: 30% center;
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(3) figure img {
  object-position: 50% center;
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(4) figure img {
  object-position: 68% center;
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) figure img {
  object-position: 58% center;
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) article {
  border-color: rgba(93, 145, 70, 0.52);
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(49, 100, 43, 0.16);
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) figure {
  background: #064f40;
}

.persona-evolution-timeline__current-label {
  position: absolute;
  z-index: 5;
  bottom: calc(50% + var(--timeline-stem) + var(--timeline-card-height));
  left: 50%;
  width: clamp(264px, 21vw, 310px);
  display: inline-flex;
  box-sizing: border-box;
  justify-content: flex-start;
  padding: 9px 14px 8px;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: #064f40;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0, 55, 44, 0.12);
  opacity: 0;
  white-space: nowrap;
  transform: translate(-50%, 8px);
  transition:
    opacity calc(var(--motion-slow) * 3) var(--motion-ease-soft),
    transform calc(var(--motion-slow) * 3) var(--motion-ease-soft);
  transition-delay: calc(var(--timeline-sequence-delay) + var(--motion-fast));
}

.persona-evolution-timeline.is-visible .persona-evolution-timeline__current-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) i {
  /* The current era is the visual anchor, with its label inside the marker.
     Its art-directed diameter fits the unbroken label beneath the desktop card. */
  width: 112px;
  height: 112px;
  border-width: 4px;
  background: var(--color-brand);
  animation: ceoTimelineCurrentPulse 2.4s ease-in-out infinite;
}

.persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) i::after {
  inset: 0;
  display: grid;
  place-content: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--color-text-inverse);
  content: "Now → next";
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}

@keyframes ceoTimelineCurrentPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(74, 126, 56, 0.34),
      0 0 0 6px rgba(110, 156, 86, 0.13);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(74, 126, 56, 0.48),
      0 0 0 13px rgba(110, 156, 86, 0.03);
  }
}

.persona-evolution-timeline__moment article > div {
  min-width: 0;
  padding: 17px 17px 15px;
}

.persona-evolution-timeline__moment h3,
.persona-evolution-timeline__moment h4 {
  margin: 0 0 10px;
  color: var(--color-brand);
  font-family: var(--font-body);
  font-size: clamp(20px, 1.55vw, 24px);
  font-weight: 500;
  line-height: 1.08;
  overflow-wrap: normal;
}

/* Gallery art direction uses the requested brand mid-green for historical
   titles; the final current-era title retains the darker brand colour. */
.persona-evolution-timeline--gallery .persona-evolution-timeline__moment:nth-child(-n + 4) :is(h3, h4) {
  color: #2e7d52;
}

.persona-evolution-timeline__moment p {
  margin: 0;
  color: var(--slate);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 300;
  line-height: 1.44;
}

.persona-evolution-timeline__moment i {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #f4f5f3;
  border-radius: 50%;
  background: var(--timeline-era-line);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--timeline-era-line) 58%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.2, 1.5, 0.4, 1);
  transition-delay: calc(var(--timeline-sequence-delay) + 120ms);
}

.persona-evolution-timeline.is-visible .persona-evolution-timeline__moment i {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.persona-evolution-timeline__moment i::after {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  padding: 5px 9px 4px;
  border: 1px solid color-mix(in srgb, var(--timeline-era-line) 38%, transparent);
  border-radius: 999px;
  background: var(--timeline-era-fill);
  color: var(--timeline-era-text);
  content: attr(data-year);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(0, 55, 44, 0.08);
  white-space: nowrap;
  transform: translateX(-50%);
}

.persona-section {
  padding-block: clamp(var(--space-9), 10vw, 144px);
  scroll-margin-top: 76px;
}

.persona-section--tint {
  width: 100%;
  max-width: none;
  padding-inline: var(--page-rail-inset);
  background: var(--shell);
}

.persona-section--tint > * {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.persona-section__intro {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
}

.persona-section__intro h2,
.persona-action h2,
.persona-sources__heading h2 {
  max-width: 11ch;
  margin: var(--space-3) 0 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Editorial takeaways and evidence widgets belong to the authored persona sections; displayed values are page content, not live analytics. */
.persona-section__takeaway {
  max-width: 38ch;
  margin: 0;
  color: var(--slate);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.35;
}

.persona-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(290px, 0.6fr);
  gap: clamp(var(--space-7), 7vw, var(--space-9));
  align-items: start;
}

.persona-editorial--reverse {
  grid-template-columns: minmax(290px, 0.6fr) minmax(0, 1.4fr);
}

.persona-editorial__body {
  max-width: 780px;
}

.persona-editorial__body > p {
  margin: 0 0 var(--space-5);
  color: var(--slate);
  font-size: clamp(16px, 1.22vw, 18px);
  font-weight: 300;
  line-height: 1.78;
}

.persona-editorial__body > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 4.6em;
  line-height: 0.76;
}

.persona-questions {
  position: sticky;
  top: 108px;
  padding: var(--space-7);
  border: 1px solid rgba(0, 87, 70, 0.12);
  border-radius: var(--radius-card);
  background: #f3f7ee;
}

.persona-questions > span {
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.persona-questions h3 {
  margin: var(--space-4) 0 var(--space-6);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(25px, 2.1vw, 34px);
  font-weight: 500;
  line-height: 1.28;
}

.persona-questions ul,
.persona-decision-rights ul {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.persona-questions li {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(0, 87, 70, 0.14);
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.persona-questions--dark {
  color: var(--color-text-inverse);
  background: var(--color-brand);
}

.persona-questions--dark > span,
.persona-questions--dark h3 {
  color: var(--moss);
}

.persona-questions--dark p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

/* Readiness visualization is a presentation of authored values; its labels and accompanying copy must retain the interpretation. */
.readiness-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-block: var(--space-6);
}

.readiness-scale span {
  padding: var(--space-3) var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  text-align: center;
}

.readiness-scale span:nth-child(2) {
  color: var(--color-brand);
  background: var(--moss);
}

.persona-decision-rights {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.persona-decision-rights h3 {
  margin: 0 0 var(--space-5);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
}

.persona-decision-rights ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
}

.persona-decision-rights li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.persona-decision-rights li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--green);
  content: "";
}

.persona-dashboard {
  margin-top: clamp(var(--space-9), 10vw, 128px);
  padding: clamp(var(--space-6), 4.5vw, var(--space-8));
  border: 1px solid rgba(0, 87, 70, 0.12);
  border-radius: var(--radius-card);
  background: #f5f8f1;
  box-shadow: var(--shadow-panel-premium);
}

.persona-dashboard__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

.persona-dashboard__header h3 {
  margin: var(--space-2) 0 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 500;
}

.persona-dashboard__header > p {
  max-width: 30ch;
  margin: 0;
  color: var(--slate);
  text-align: right;
}

.persona-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Evidence dashboard cards organize metrics and narratives without introducing a separate data-fetching layer. */
.dashboard-card {
  min-height: 220px;
  padding: var(--space-5);
  border: 1px solid rgba(0, 87, 70, 0.1);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.dashboard-card--hero {
  grid-column: span 2;
}

.dashboard-card--accent {
  color: var(--color-text-inverse);
  background: var(--color-brand);
}

.dashboard-card--accent > span {
  color: var(--moss);
}

.dashboard-card h4 {
  margin: 0 0 var(--space-5);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(23px, 1.8vw, 30px);
  font-weight: 500;
  line-height: 1.25;
}

.dashboard-card--accent h4 {
  color: var(--color-text-inverse);
}

.dashboard-card p {
  color: var(--slate);
  font-size: 13px;
  line-height: 1.55;
}

.dashboard-card--accent p {
  color: rgba(255, 255, 255, 0.74);
}

.dashboard-card--stat {
  display: flex;
  flex-direction: column;
}

.dashboard-card--stat strong {
  margin-block: auto var(--space-3);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(52px, 5vw, 76px);
  font-weight: 500;
  line-height: 1;
}

.dashboard-card--stat p {
  margin: 0;
}

.persona-dashboard__note {
  margin-top: var(--space-5);
  color: var(--slate);
  font-size: 11px;
  line-height: 1.5;
}

.mandate-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.mandate-path div {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.mandate-path small,
.horizon-map small {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mandate-path strong {
  color: var(--color-brand);
  font-size: 13px;
  line-height: 1.35;
}

.mandate-path i {
  width: 14px;
  height: 1px;
  background: var(--green);
}

.ranked-list,
.signal-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranked-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--slate);
  font-size: 13px;
}

.ranked-list b {
  color: var(--green);
  font-size: 10px;
}

.collaborator-map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.collaborator-map > * {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--slate);
  background: var(--surface);
  font-size: 11px;
}

.collaborator-map b {
  color: var(--color-text-inverse);
  background: var(--color-brand);
}

.persona-dashboard--dark {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.12);
  background: #163c35;
}

.persona-dashboard--dark .persona-dashboard__header h3,
.persona-dashboard--dark .dashboard-card h4 {
  color: var(--color-text-inverse);
}

.persona-dashboard--dark .persona-dashboard__header > p,
.persona-dashboard--dark .persona-dashboard__note {
  color: rgba(255, 255, 255, 0.64);
}

.persona-dashboard--dark .dashboard-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

.persona-dashboard--dark .dashboard-card > span {
  color: var(--moss);
}

.persona-dashboard--dark .dashboard-card p,
.persona-dashboard--dark .signal-list li {
  color: rgba(255, 255, 255, 0.68);
}

.persona-dashboard--dark .dashboard-card--stat strong {
  color: var(--color-text-inverse);
}

.persona-dashboard--dark .dashboard-card--accent {
  background: var(--green);
}

/* Comparative pressure bars encode page-supplied values; preserve readable labels alongside the visual bars. */
.pressure-bars {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5);
}

.pressure-bars div {
  display: grid;
  grid-template-columns: 68px 1fr 42px;
  align-items: center;
  gap: var(--space-3);
}

.pressure-bars small {
  color: rgba(255, 255, 255, 0.64);
}

.pressure-bars i {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
}

.pressure-bars i::after {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: var(--moss);
  content: "";
}

.pressure-bars strong {
  color: var(--color-text-inverse);
  font-size: 13px;
}

.signal-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--slate);
  font-size: 12px;
}

.signal-list b {
  color: var(--green);
  font-weight: 500;
}

.tradeoff-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.tradeoff-grid span {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  background: var(--surface);
  font-size: 11px;
  text-align: center;
}

.tradeoff-grid i {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-style: normal;
}

.persona-dashboard__grid--evolution {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.horizon-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.horizon-map div {
  padding: var(--space-4);
  border-top: 3px solid var(--moss);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface);
}

.horizon-map div:nth-child(2) {
  border-color: var(--green);
}

.horizon-map div:nth-child(3) {
  border-color: var(--gold);
}

.horizon-map strong {
  display: block;
  min-height: 3.8em;
  color: var(--color-brand);
  font-size: 12px;
  line-height: 1.4;
}

.horizon-map p {
  margin-bottom: 0;
  font-size: 11px;
}

/* Closing action panel returns the reader from the persona narrative to a clear next step. */
.persona-action {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-9);
  align-items: end;
  margin-bottom: clamp(var(--space-9), 10vw, 144px);
  padding: clamp(var(--space-7), 6vw, var(--space-9));
  border-radius: var(--radius-card);
  color: var(--color-text-inverse);
  background: var(--nka-stage-field);
}

.persona-action .section-eyebrow {
  color: var(--moss);
}

.persona-action h2 {
  max-width: 15ch;
  color: var(--color-text-inverse);
}

.persona-action > div:last-child p {
  margin: 0 0 var(--space-6);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
  line-height: 1.7;
}

.persona-action .button {
  color: var(--color-brand);
  background: var(--color-surface);
}

.persona-sources {
  display: grid;
  grid-template-columns: minmax(220px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: start;
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
  border-top: 1px solid var(--color-border);
}

.persona-sources__heading {
  align-self: start;
}

.persona-sources__heading h2 {
  max-width: 18ch;
  margin-top: var(--space-2);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.12;
}

.persona-sources__eyebrow,
.persona-sources__updated {
  margin: 0;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.persona-sources__note > p {
  max-width: 78ch;
  margin: 0;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.7;
}

.persona-sources__meta {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.persona-sources__links {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  color: var(--slate);
  font-size: 11px;
  line-height: 1.5;
}

.persona-sources__label {
  font-weight: 600;
}

.persona-sources__link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.persona-sources__links a {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand);
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.persona-sources__updated {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--motion-ease),
    transform 700ms var(--motion-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tablet reflow reduces simultaneous columns and repositions timeline content before the narrower mobile overrides. */
@media (max-width: 1024px) {
  .persona-hero-bridge__inner {
    grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
  }

  .persona-signal-strip__inner,
  .persona-dashboard__grid,
  .persona-dashboard__grid--evolution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .persona-signal-strip p {
    min-height: auto;
  }

  .persona-editorial,
  .persona-editorial--reverse {
    grid-template-columns: 1fr;
  }

  .persona-editorial--reverse .persona-questions {
    order: 2;
  }

  .persona-editorial__body {
    max-width: none;
  }

  .persona-questions {
    position: static;
  }

  .persona-sources {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .persona-hero__content {
    width: min(var(--hero-banner-tablet-landscape-content-width), var(--hero-banner-content-width));
  }

  .persona-hero__slides img {
    object-position: var(--hero-banner-tablet-landscape-image-position, 72% center);
  }
}

@media (max-width: 900px) {
  .persona-hero {
    display: grid;
    min-height: var(--hero-banner-mobile-min-height);
    padding-block: 0;
  }

  .persona-hero__content {
    width: var(--hero-banner-tablet-content-width, min(46%, 390px));
    margin-inline: auto;
    margin-left: var(--hero-banner-gutter);
    margin-right: auto;
    padding-bottom: var(--hero-pagination-mobile-content-clearance);
  }

  .persona-hero--placeholder .persona-hero__content {
    padding-bottom: var(--hero-banner-mobile-pad-bottom);
  }

  .persona-hero__slides img {
    object-position: var(--hero-banner-tablet-image-position, 82% center);
  }

  .persona-hero__mosaic {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: var(--hero-banner-mobile-content-width);
    aspect-ratio: 1.18 / 1;
    margin: clamp(34px, 6vw, 54px) auto 0;
    transform: none;
  }

  .persona-evolution-timeline__heading {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .persona-evolution-timeline__heading > p:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .persona-evolution-timeline__track {
    --timeline-mobile-gutter: 34px;
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    gap: var(--space-4);
    padding: var(--space-2) 0 var(--space-2) var(--timeline-mobile-gutter);
    overflow: visible;
    background-image: none;
  }

  .persona-evolution-timeline__track::before {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 7px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(0, 87, 70, 0.34) 5%, rgba(0, 87, 70, 0.34) 95%, transparent);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center top;
  }

  .persona-evolution-timeline.is-visible .persona-evolution-timeline__track::before {
    opacity: 1;
    transform: scaleY(1);
  }

  .persona-evolution-timeline__track::after {
    display: none;
  }

  .persona-evolution-timeline__moment::before {
    display: none;
  }

  .persona-evolution-timeline__moment {
    padding-top: 40px;
  }

  .persona-evolution-timeline__moment article,
  .persona-evolution-timeline__moment--top article,
  .persona-evolution-timeline__moment--bottom article {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
    opacity: 0;
    transform: translateY(10px);
  }

  .persona-evolution-timeline.is-visible .persona-evolution-timeline__moment article {
    transform: translateY(0);
    animation-name: personaTimelineCardEnterMobile;
  }

  .persona-evolution-timeline__moment article:hover {
    transform: translateY(-2px);
  }

  .persona-evolution-timeline__moment figure {
    min-height: 128px;
  }

  /* Keep long role names inside the mobile card, including at browser zoom.
     The image yields space to the copy; text determines the card's height. */
  .persona-evolution-timeline__moment article > div {
    padding: var(--space-4) var(--space-3);
  }

  .persona-evolution-timeline__moment :is(h3, h4, p) {
    overflow-wrap: anywhere;
  }

  .persona-evolution-timeline__moment :is(h3, h4) {
    hyphens: auto;
  }

  .persona-evolution-timeline__moment i {
    top: 20px;
    left: calc((var(--timeline-mobile-gutter) * -1) + 7px);
  }

  .persona-evolution-timeline__moment i::after {
    top: -10px;
    left: calc(var(--timeline-mobile-gutter) - 7px);
    transform: none;
  }

  /* Reserve a row so the larger marker cannot collide with the mobile card. */
  .persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) {
    padding-top: 136px;
  }

  .persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) i {
    top: 60px;
    left: 56px;
  }

  .persona-evolution-timeline__current-label {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    transform: none;
  }

  .persona-evolution-timeline.is-visible .persona-evolution-timeline__current-label {
    transform: none;
  }
}

@media (max-width: 760px) {
  /* Keep the static article below the first viewport until the shared
     framework mounts ahead of it; that insertion must not shift visible copy. */
  .persona-hero + .persona-framework-sections--articles {
    margin-top: max(0px, calc(100svh - var(--hero-banner-mobile-min-height)));
  }

  .persona-hero::before {
    background: var(--hero-image-overlay-mobile);
  }

  .persona-hero__slides img {
    /* The mobile artwork is portrait-oriented. At narrow iPad and browser-
       zoom widths, centering its much taller crop removes the subject's head.
       Keep the portrait art anchored to its top edge across every persona. */
    object-position: center top;
    transform-origin: center top;
  }

  .persona-hero__content {
    width: var(--hero-banner-mobile-content-width);
    margin-inline: auto;
  }

  .persona-hero__slides img.is-active {
    animation:
      personaHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
      personaHeroImageDriftMobile var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
  }

  .persona-hero {
    padding: var(--hero-banner-mobile-pad-top) 0 var(--hero-pagination-mobile-content-clearance);
  }

  .persona-hero__content {
    padding-bottom: 0;
  }

  .persona-hero--placeholder {
    padding-bottom: var(--hero-banner-mobile-pad-bottom);
  }

  .persona-hero--placeholder .persona-hero__content {
    padding-bottom: 0;
  }

  .persona-hero__dots {
    right: var(--hero-pagination-mobile-inline);
    bottom: var(--hero-pagination-mobile-bottom);
  }

  .persona-hero__mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    aspect-ratio: 1 / 1.1;
  }

  .persona-hero__grid-block--a {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .persona-hero__grid-block--b {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
  }

  .persona-hero__grid-block--c {
    grid-column: 1;
    grid-row: 3 / 5;
  }

  .persona-hero__grid-block--d {
    grid-column: 2;
    grid-row: 3 / 5;
  }

  .persona-hero__grid-block--e {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
  }

  .persona-hero__grid-block--f {
    grid-column: 1 / 3;
    grid-row: 5;
  }

  .persona-hero__grid-block--g {
    grid-column: 1 / 3;
    grid-row: 6;
  }

  .persona-hero__grid-block--h {
    grid-column: 3 / 5;
    grid-row: 5 / 7;
  }

  .persona-hero-bridge__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .persona-hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .persona-signal-strip__inner {
    grid-template-columns: 1fr;
  }

  .persona-signal-strip article {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3) var(--space-5);
  }

  .persona-signal-strip article > span,
  .persona-signal-strip p,
  .persona-signal-strip a {
    grid-column: 1;
  }

  .persona-signal-strip strong {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .persona-section,
  .persona-section--tint {
    padding-block: var(--space-9);
  }

  .persona-section__intro {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .persona-section__intro h2,
  .persona-action h2 {
    font-size: clamp(44px, 13vw, 60px);
  }

  .persona-section__takeaway {
    font-size: 24px;
  }

  .persona-decision-rights ul {
    grid-template-columns: 1fr;
  }

  .persona-dashboard {
    width: calc(100% + (2 * var(--page-gutter-inline)));
    margin-left: calc(-1 * var(--page-gutter-inline));
    padding-inline: var(--page-gutter-inline);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .persona-dashboard__header {
    align-items: start;
    flex-direction: column;
    gap: var(--space-4);
  }

  .persona-dashboard__header > p {
    text-align: left;
  }

  .persona-dashboard__grid,
  .persona-dashboard__grid--evolution {
    grid-template-columns: 1fr;
  }

  .dashboard-card--hero {
    grid-column: auto;
  }

  .mandate-path,
  .horizon-map {
    grid-template-columns: 1fr;
  }

  .mandate-path i {
    width: 1px;
    height: 14px;
    margin-left: var(--space-5);
  }

  .persona-action {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    width: 100%;
    border-radius: 0;
  }

  .persona-sources {
    padding-block: var(--space-7);
  }

  .persona-sources__meta {
    gap: var(--space-3);
  }

  .persona-sources__links {
    grid-template-columns: 1fr;
  }
}

/* Motion accessibility: keep framework content visible while suppressing nonessential movement. */
@media (prefers-reduced-motion: reduce) {
  /* Match the entrance selector's specificity so visible cards cannot restart
     their keyframes after the reveal observer adds its class. */
  .persona-evolution-timeline.is-visible .persona-evolution-timeline__moment article {
    animation: none;
  }

  .persona-hero__slides img {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .persona-hero__dots button {
    transition: none;
  }

  .persona-hero__grid-block,
  .persona-hero__grid-block img,
  .persona-evolution-timeline__track::before,
  .persona-evolution-timeline__track::after,
  .persona-evolution-timeline__moment::before,
  .persona-evolution-timeline__moment article,
  .persona-evolution-timeline__moment i,
  .persona-evolution-timeline__current-label,
  .persona-section--role-evolution .persona-evolution-timeline__moment:nth-child(5) i {
    animation: none;
    transition: none;
  }

  .persona-evolution-timeline__moment article {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .persona-evolution-timeline__moment article {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .persona-hero__media img {
    transition: none;
  }

  .persona-hero__tile img {
    transition: none;
  }
}