.bilingual-hero {
  padding: clamp(54px, 7vw, 96px) 0 clamp(68px, 8vw, 112px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 64%, rgba(255, 200, 87, .1), transparent 25%),
    radial-gradient(circle at 12% 22%, rgba(11, 96, 79, .04), transparent 24%),
    var(--cream);
}

.bilingual-hero-heading h1 {
  max-width: 1320px;
  margin: 0;
  font-size: clamp(3.5rem, 5.2vw, 5.15rem);
  line-height: .93;
}
.bilingual-title-direction { color: var(--green); }
.bilingual-title-language { color: var(--red); }

.flag-chain {
  width: 100%;
  height: clamp(72px, 11vw, 150px);
  margin-top: clamp(20px, 1.7vw, 24px);
  position: relative;
}
.flag-chain-flags {
  width: min(1240px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  transform: translateY(-5px);
}
.flag-chain-flags img {
  width: auto;
  height: clamp(40px, 10.2vw, 135px);
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(16, 36, 31, .2));
}
.flag-chain-flags img:nth-child(1),
.flag-chain-flags > .optimized-picture:nth-child(1) > img { clip-path: polygon(0 17%, 16% 19%, 88% 21%, 100% 22%, 100% 25%, 88% 24%, 88% 73%, 16% 72%, 16% 22%, 0 20%); }
.flag-chain-flags img:nth-child(2),
.flag-chain-flags > .optimized-picture:nth-child(2) > img { clip-path: polygon(0 23%, 16% 23%, 84% 26%, 100% 26%, 100% 29%, 84% 29%, 84% 79%, 16% 79%, 16% 26%, 0 26%); }
.flag-chain-flags img:nth-child(3),
.flag-chain-flags > .optimized-picture:nth-child(3) > img { clip-path: polygon(0 25%, 15% 26%, 86% 26%, 100% 27%, 100% 30%, 86% 29%, 86% 80%, 15% 80%, 15% 29%, 0 28%); }
.flag-chain-flags img:nth-child(4),
.flag-chain-flags > .optimized-picture:nth-child(4) > img { clip-path: polygon(0 27%, 17% 27%, 84% 28%, 100% 27%, 100% 30%, 84% 30%, 84% 82%, 17% 82%, 17% 30%, 0 30%); }
.flag-chain-flags img:nth-child(5),
.flag-chain-flags > .optimized-picture:nth-child(5) > img { clip-path: polygon(0 27%, 16% 28%, 85% 28%, 100% 27%, 100% 30%, 85% 30%, 85% 82%, 16% 82%, 16% 30%, 0 30%); }
.flag-chain-flags img:nth-child(6),
.flag-chain-flags > .optimized-picture:nth-child(6) > img { clip-path: polygon(0 25%, 16% 26%, 84% 26%, 100% 25%, 100% 29%, 84% 29%, 84% 82%, 16% 82%, 16% 28%, 0 28%); }
.flag-chain-flags img:nth-child(7),
.flag-chain-flags > .optimized-picture:nth-child(7) > img { clip-path: polygon(0 21%, 15% 23%, 80% 22%, 100% 20%, 100% 24%, 80% 25%, 80% 78%, 15% 79%, 15% 25%, 0 25%); }
.flag-chain-flags img:nth-child(8),
.flag-chain-flags > .optimized-picture:nth-child(8) > img { clip-path: polygon(0 19%, 15% 21%, 82% 17%, 100% 16%, 100% 20%, 82% 20%, 82% 72%, 15% 76%, 15% 24%, 0 23%); }
.flag-chain-flags img + img,
.flag-chain-flags > .optimized-picture + .optimized-picture > img { margin-left: -1px; }

.bilingual-hero-stage {
  margin-top: clamp(12px, 2vw, 28px);
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(56px, 8vw, 116px);
}
.bilingual-hero-copy { max-width: 560px; }
.bilingual-hero-copy .hero-lead { margin-top: 30px; }
.bilingual-hero-copy .hero-actions {
  width: min(100%, 340px);
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
}
.bilingual-hero-copy .hero-actions .button { width: 100%; }
.bilingual-hero-copy .hero-proof { max-width: 560px; }

.bilingual-cue { min-width: 0; margin: 0; }
.bilingual-cue figcaption { max-width: 560px; margin: 20px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.bilingual-card-stage {
  min-height: 520px;
  position: relative;
  isolation: isolate;
}
.bilingual-note-card {
  min-height: 300px;
  padding: clamp(30px, 4vw, 48px);
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(16, 36, 31, .2);
  border-radius: 18px;
  box-shadow: 0 28px 58px rgba(16, 36, 31, .2);
}
.bilingual-note-card small {
  color: var(--green);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .14em;
}
.bilingual-note-card strong {
  max-width: 390px;
  margin-top: auto;
  display: block;
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 650;
  line-height: 1;
}
.bilingual-note-card p {
  margin: 18px 0 0;
  font-size: .8rem;
  line-height: 1.5;
}
.bilingual-note-card-en {
  width: min(72%, 500px);
  top: 14px;
  left: 2%;
  z-index: 1;
  background: var(--paper);
  transform: rotate(-2deg);
}
.bilingual-note-card-en strong,
.bilingual-note-card-en p { transform: translateY(-15px); }
.bilingual-note-card-es {
  width: min(78%, 540px);
  right: 0;
  bottom: 8px;
  z-index: 2;
  background: linear-gradient(145deg, #0a4e42, #073a32);
  color: white;
  transform: rotate(2.5deg);
}
.bilingual-note-card-es small { color: var(--yellow); }
.bilingual-note-card-es p { color: #d9e3de; }
.bilingual-song-bridge {
  width: 94px;
  height: 94px;
  position: absolute;
  top: 47%;
  left: 52%;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 8px solid var(--paper);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 12px 26px rgba(16, 36, 31, .16);
  color: var(--green-dark);
  font-size: .7rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-3deg);
}

.music-symbol,
.music-staff {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.music-symbol-treble { width: 44px; top: 205px; left: -62px; }
.music-symbol-note-top { width: 34px; top: 6px; right: 14%; transform: rotate(9deg); }
.music-symbol-note-bottom { width: 34px; bottom: 38px; left: 15%; transform: rotate(-8deg); }
.music-symbol-beamed { width: 50px; top: 92px; right: -2%; transform: rotate(-8deg); }
.music-staff { width: min(52%, 360px); opacity: .82; }
.music-staff-top { top: 115px; right: -12%; }
.music-staff-bottom { bottom: -22px; left: -16%; transform: scaleX(-1); }

.california-section {
  background: var(--green);
  color: white;
}
.california-section .section-heading p:not(.eyebrow) { color: #d8e4de; }
.california-eyebrow { margin-bottom: 18px; color: var(--yellow); }
.california-evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(48px, 7vw, 92px);
}
.california-evidence-grid .section-heading { max-width: 720px; }

.touchpoints-intro,
.authoring-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(390px, .72fr);
  align-items: start;
  gap: clamp(38px, 5vw, 72px);
}
.touchpoints-intro .section-heading,
.authoring-intro .section-heading { max-width: none; }


.editorial-control-proof {
  width: min(100%, 520px);
  margin: -10px 0 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}
.editorial-control-proof img {
  width: 100%;
  height: clamp(205px, 16vw, 240px);
  object-fit: cover;
  object-position: top;
}
.editorial-control-proof figcaption {
  padding: 13px 16px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: .64rem;
}
.editorial-control-proof figcaption strong {
  color: var(--green);
  font-size: .7rem;
}
.editorial-control-proof figcaption span {
  color: var(--muted);
  text-align: right;
}
.authoring-intro + .authoring-flow-wrap { margin-top: 56px; }

@media (max-width: 900px) {
  .bilingual-hero-heading h1 { font-size: clamp(3rem, 8vw, 4.7rem); }
  .bilingual-hero-stage { grid-template-columns: 1fr; gap: 54px; }
  .bilingual-hero-copy { max-width: 680px; }
  .bilingual-card-stage { width: min(100%, 720px); justify-self: center; }
  .music-symbol-treble { left: -12px; }
  .touchpoints-intro,
  .authoring-intro { grid-template-columns: 1fr; }
  .california-evidence-grid { grid-template-columns: 1fr; }
  .california-evidence-grid .section-heading { max-width: 680px; }
  .editorial-control-proof {
    width: min(100%, 720px);
    margin-top: 12px;
    justify-self: start;
    transform: none;
  }
}

@media (max-width: 700px) {
  .bilingual-hero { padding-top: var(--mobile-hero-top-space); }
  .bilingual-hero-heading h1 {
    font-size: var(--mobile-hero-title-size);
    line-height: var(--mobile-hero-title-line-height);
  }
  .editorial-control-proof { display: none; }
  .authoring-flow-wrap { overflow-x: visible; }
  .authoring-flow.linear-progression {
    min-width: 0;
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .authoring-flow.linear-progression::before {
    width: 2px;
    height: auto;
    top: 42px;
    right: auto;
    bottom: 42px;
    left: 38px;
  }
  .authoring-flow.linear-progression article {
    min-height: 0;
    padding: 16px 16px 16px 76px;
  }
  .authoring-flow.linear-progression article::before { inset: 0 0 0 60px; }
  .authoring-flow.linear-progression article:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -9px;
    left: 16px;
    border-top: 11px solid var(--progress-line);
    border-right: 6px solid transparent;
    border-bottom: 0;
    border-left: 6px solid transparent;
  }
  .authoring-flow.linear-progression small {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .authoring-flow.linear-progression strong,
  .authoring-flow.linear-progression p { text-align: left; }
}

@media (max-width: 600px) {
  .flag-chain {
    height: 52px;
    margin-top: 26px;
  }
  .flag-chain-flags {
    width: calc(100% - 16px);
    gap: 0;
    transform: translateY(-2px);
  }
  .flag-chain-flags img { height: clamp(34px, 10vw, 46px); }
  .bilingual-hero-stage { margin-top: 18px; gap: 42px; }
  .bilingual-hero-copy .hero-actions { width: 100%; }
  .bilingual-card-stage { min-height: 465px; }
  .bilingual-note-card { min-height: 270px; padding: 28px 24px; }
  .bilingual-note-card-en { width: 90%; left: 0; }
  .bilingual-note-card-es { width: 91%; }
  .bilingual-note-card strong { font-size: clamp(2rem, 9vw, 2.65rem); }
  .bilingual-song-bridge {
    width: 78px;
    height: 78px;
    top: 46%;
    left: 54%;
    border-width: 6px;
    font-size: .6rem;
  }
  .music-symbol-treble { width: 34px; top: 182px; left: -4px; }
  .music-symbol-note-top { right: 2%; }
  .music-symbol-note-bottom { bottom: 22px; left: 2%; }
  .music-symbol-beamed { top: 112px; right: -3%; }
  .music-staff { width: 76%; }
  .music-staff-top { top: 138px; right: -34%; }
  .music-staff-bottom { bottom: -36px; left: -32%; }
  .bilingual-value-grid { gap: 10px; }
  .bilingual-value { min-height: 0; padding: 16px; }
  .bilingual-value h3 { margin: 14px 0 8px; }
  .editorial-control-proof img { height: 165px; }
  .editorial-control-proof figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .editorial-control-proof figcaption span { text-align: left; }
  .authoring-intro + .authoring-flow-wrap { margin-top: 42px; }
}

/* Full screenshots stay readable in separately labeled language disclosures. */
.language-comparison { width: min(100%, 440px); display: grid; gap: 12px; justify-self: center; }
.language-comparison details { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.language-comparison summary { padding: 6px 0; cursor: pointer; font-size: .9rem; font-weight: 750; }
.language-comparison figure { margin: 12px 0 0; }
.language-comparison .screen-frame.screen-mobile { width: min(100%, 300px); margin-inline: auto; }
@media (max-width: 700px) {
  .copy-refresh .bilingual-hero-stage { gap: 28px; }
  .copy-refresh .bilingual-card-stage { min-height: 0; display: grid; gap: 12px; padding-block: 12px; }
  .copy-refresh .bilingual-note-card { position: static; width: 100%; min-height: 0; padding: 24px; transform: none; }
  .copy-refresh .bilingual-note-card strong { font-size: 1.9rem; }
  .copy-refresh .bilingual-note-card-en strong,
  .copy-refresh .bilingual-note-card-en p { transform: none; }
  .copy-refresh .bilingual-song-bridge,
  .copy-refresh .bilingual-card-stage .music-symbol,
  .copy-refresh .bilingual-card-stage .music-staff { display: none; }
  .copy-refresh .editorial-control-proof { display: block; margin-top: 0; }
  .copy-refresh .editorial-control-proof img { height: auto; object-fit: contain; }
  .copy-refresh .authoring-intro,
  .copy-refresh .touchpoints-intro { gap: 24px; }
}