/* Compact, accessible language control shared by the public site headers. */
.site-language {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: 4px;
  color: inherit;
}
.site-language svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-language select {
  width: 89px;
  min-height: 42px;
  padding: 3px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 13px/1.2 'DM Sans', sans-serif;
  cursor: pointer;
}
.site-language select option { color: #1d332b; background: #fffdfa; }
.site-language select:focus-visible { outline: 2px solid #c7336b; outline-offset: 2px; border-radius: 8px; }
.site-language-status:not([hidden]) {
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  max-width: min(370px, calc(100vw - 40px));
  padding: 12px 16px;
  border-radius: 8px;
  background: #192d27;
  color: #fffefa;
  box-shadow: 0 12px 28px rgba(10, 35, 25, .25);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.site-language-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.site-language-modal[hidden] { display: none; }
.site-language-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 35, 25, .55);
}
.site-language-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: #fffefa;
  color: #192d27;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 24px 64px rgba(10, 35, 25, .35);
}
.site-language-modal-dialog:focus-visible { outline: 2px solid #c7336b; outline-offset: 3px; }
.site-language-modal-message { margin: 0 0 20px; font-size: 15px; line-height: 1.5; }
.site-language-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.site-language-modal-actions button {
  font: 700 14px/1.2 'DM Sans', sans-serif;
  padding: 10px 18px;
  border-radius: 50px;
  border: 0;
  cursor: pointer;
}
.site-language-modal-cancel { background: transparent; color: #192d27; }
.site-language-modal-cancel:hover { background: rgba(25, 45, 39, .08); }
.site-language-modal-continue { background: #c7336b; color: #fff; }
.site-language-modal-continue:hover { background: #a8295a; }
.footer-lower a[href="/TRANSLATION-CREDITS.txt"] { margin-left: auto; }
.footer-lower a[href="#top"] { margin-left: 0; }
.home-page .site-language { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .32); }
.error-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

@media (min-width: 851px) and (max-width: 1100px) {
  .site-header .header-inner { gap: 20px; }
  .site-header .desktop-nav { gap: 16px; }
  .site-header .header-cta { margin-left: 0; }
  .home-page .site-header .header-inner { gap: 12px; }
  .home-page .site-header .desktop-nav { gap: 12px; }
  .home-page .site-header .header-cta { padding-inline: 12px; font-size: .82rem; }
  .home-page .site-header .cta-platform-play { width: 76px; }
}
@media (max-width: 850px) {
  .site-header .site-language { margin-left: auto; }
  .site-header .menu-button { margin-left: 4px; }
}
@media (max-width: 600px) {
  .site-language select { width: 80px; font-size: 12px; }
  .site-language svg { width: 17px; height: 17px; }
  .footer-lower a[href="/TRANSLATION-CREDITS.txt"] { margin-left: 0; }
}

/* The shared masthead sits inside each page's opening color or photograph. */
body:not(.home-page) .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  color: #fff;
  border: 0;
  background: linear-gradient(180deg, rgba(11, 39, 28, .72), rgba(11, 39, 28, .2) 72%, transparent);
}
body:not(.home-page) .site-header .brand img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 7px rgba(8, 35, 24, .2));
}
body:not(.home-page) .site-header .desktop-nav a {
  color: #fff;
  text-shadow: 0 1px 8px rgba(10, 39, 28, .24);
}
body:not(.home-page) .site-header .desktop-nav a:hover,
body:not(.home-page) .site-header .desktop-nav a[aria-current=page] { color: #ffd2e3; }
body:not(.home-page) .site-header .header-cta {
  color: #fff;
  background: #c7336b;
  border-color: #c7336b;
}
body:not(.home-page) .site-header .header-cta:hover { background: #a8295a; }
body:not(.home-page) .site-header .site-language { color: #fff; }

/* Editorial sections retain their photography while sharing a continuous green opening. */
body .inner-hero,
body.feature-hub-body .fh-hero,
body.tiers-body .tiers-hero,
body.download-hub-body .dh-hero {
  color: #fff;
  background: radial-gradient(circle at 83% 24%, rgba(140, 204, 158, .4), transparent 39%),
    linear-gradient(115deg, #1e5a43 0%, #327c5b 59%, #51986e 100%);
}
body .inner-hero { padding-top: clamp(144px, 13vw, 184px); }
body.feature-hub-body .fh-hero { padding-top: clamp(124px, 11vw, 164px); }
body.tiers-body .tiers-hero { padding-top: clamp(132px, 11vw, 172px); }
body.download-hub-body .dh-hero { padding-top: clamp(144px, 12vw, 180px); }
body .inner-hero p,
body.feature-hub-body .fh-hero-copy > p,
body.tiers-body .tiers-hero-copy > p,
body.download-hub-body .dh-hero-copy > p { color: #ecf6ee; }
body .inner-hero .display em,
body.feature-hub-body .fh-hero h1 em,
body.tiers-body .tiers-hero h1 em,
body.download-hub-body .dh-hero h1 em { color: #ffccde; }
body.feature-hub-body .fh-hero-copy .eyebrow,
body.tiers-body .tiers-hero-copy .eyebrow,
body.download-hub-body .dh-hero-copy .eyebrow { color: #ffe0ea; }
body.download-hub-body .dh-hero-note { color: #e2f1e7; }
body .inner-hero .inner-photo,
body.feature-hub-body .fh-hero-image,
body.tiers-body .tiers-hero-photo {
  border: 1px solid rgba(255, 255, 255, .23);
  box-shadow: 0 20px 52px rgba(9, 44, 27, .15);
}

/* The intention directory and detail introductions blend into the same masthead. */
body.intent-page .intent-dir-intro {
  padding-top: clamp(168px, 16vw, 224px);
  background: radial-gradient(circle at 86% 18%, rgba(149, 205, 160, .25), transparent 42%),
    linear-gradient(110deg, #1e523e, #397e5e);
}
body.intent-page .intent-intro {
  padding-top: clamp(124px, 12vw, 164px);
  padding-bottom: 24px;
  color: #fff;
  background: linear-gradient(115deg, #1f5942, #3b8260);
}
body.intent-page .intent-intro p { color: #e4f1e7; }
body.intent-page .intent-back { color: #ffd0e1; }
/* The intention tabs: one thin line under the whole row, the other tabs
   slightly dimmed, the current one bright white with a pink underline. */
body.intent-page .intent-tabs {
  gap: clamp(22px, 2.4vw, 34px);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  scrollbar-width: none;
}
body.intent-page .intent-tabs::-webkit-scrollbar { display: none; }
body.intent-page .intent-tabs a {
  padding: 12px 0 14px;
  margin-bottom: -1px;
  color: rgba(255, 255, 255, .78);
  border-bottom: 3px solid transparent;
}
body.intent-page .intent-tabs a:hover { color: #fff; background: transparent; border-bottom-color: rgba(255, 208, 225, .45); }
body.intent-page .intent-tabs a:focus-visible { color: #fff; background: transparent; outline: 2px solid #ffd0e1; outline-offset: 4px; border-radius: 4px; }
body.intent-page .intent-tabs a[aria-current=page] {
  color: #fff;
  background: transparent;
  border-bottom-color: #ffd0e1;
}
/* When the row is wider than the screen it scrolls sideways (main.js puts
   the current tab first) and fades out on each side that has more tabs. */
body.intent-page .intent-tabs {
  --fade-l: #000;
  --fade-r: transparent;
  -webkit-mask-image: linear-gradient(90deg, var(--fade-l), #000 36px, #000 calc(100% - 44px), var(--fade-r));
  mask-image: linear-gradient(90deg, var(--fade-l), #000 36px, #000 calc(100% - 44px), var(--fade-r));
}
body.intent-page .intent-tabs.more-left { --fade-l: transparent; }
body.intent-page .intent-tabs.at-end { --fade-r: #000; }

/* Policy documents keep a quiet reading surface below their integrated masthead. */
body.legal-page main:not(.standalone-policy) {
  background-color: #fffefa;
  background-image: linear-gradient(115deg, #1e513d, #3c8460);
  background-position: top;
  background-size: 100% 410px;
  background-repeat: no-repeat;
  padding-top: 124px;
}
body.legal-page .breadcrumb { margin-top: 0; color: #daeade; }
body.legal-page .breadcrumb a,
body.legal-page .breadcrumb .cur { color: #fff; }
body.legal-page .legal-hero {
  color: #fff;
  min-height: 190px;
  margin-top: 8px;
  padding: 36px clamp(8px, 2vw, 24px) 56px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.legal-page .legal-hero .tag { color: #ffd4e3; }
body.legal-page .legal-hero p { color: #e5f1e7; }
body.legal-page .standalone-policy {
  padding: 156px 0 112px;
  background: linear-gradient(115deg, #1e513d, #3c8460) top / 100% 330px no-repeat;
}
body.legal-page .standalone-policy .wrap {
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid #e0e9e0;
  border-radius: 20px;
  background: #fffefa;
  box-shadow: 0 22px 55px rgba(20, 61, 36, .09);
}
body.account-flow-page .account-area {
  min-height: 100svh;
  padding-top: 156px;
  background: linear-gradient(180deg, #1f5c45 0%, #55a078 33%, #e6f1e7 72%, #fff9f6 100%);
}

@media (max-width: 850px) {
  body:not(.home-page) .site-header .menu-button span { background: #fff; }
  body:not(.home-page) .site-header .mobile-nav:not([hidden]) {
    color: #fff;
    background: #286d54;
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding: 8px 24px 24px;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 32px rgba(9, 27, 20, .26);
  }
  body:not(.home-page) .site-header .mobile-nav > a:not(.pill) {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.25;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
  }
  body:not(.home-page) .site-header .mobile-nav > a:not(.pill):hover,
  body:not(.home-page) .site-header .mobile-nav > a:not(.pill):focus-visible { color: #ffd4e4; }
  body:not(.home-page) .site-header .mobile-nav .pill {
    color: #fff;
    background: #db477e;
    min-height: 60px;
    margin-top: 24px;
  }
  body:not(.home-page) .site-header .mobile-nav .pill:hover { background: #c8316d; }
}
@media (max-width: 600px) {
  body .inner-hero { padding-top: 132px; }
  body.feature-hub-body .fh-hero,
  body.tiers-body .tiers-hero { padding-top: 124px; }
  body.download-hub-body .dh-hero { padding-top: 132px; }
  body.legal-page main:not(.standalone-policy) { padding-top: 112px; background-size: 100% 380px; }
  body.legal-page .legal-hero { padding-bottom: 44px; min-height: 175px; }
  body.legal-page .standalone-policy { padding-top: 132px; }
  body.account-flow-page .account-area { padding-top: 132px; }
}

/* Smallest phones: the logo, language picker and menu button fit in 320px. */
@media (max-width: 360px) {
  .site-header .header-inner { gap: 8px; }
  .site-header .site-language { gap: 4px; }
  .site-language select { width: 72px; }
  .site-header .menu-button { margin-left: 0; width: 40px; }
}