/* Magtein Science Playable — e2e_07 internal-feedback presentation stylesheet.
 *
 * Loaded ONLY when the server-side marker MSP_INTERNAL_FEEDBACK_PREVIEW is exactly "1".
 * Authorised by PD-012 D1. Served as a static file from public/e2e07-runtime/, which sits
 * outside the governed production-source CSS roots, so no governed token module, protected
 * functional colour or N5-protected inventory is touched by these values.
 *
 * Boundary rules enforced here (PD-012 / task section 5):
 *   - every selector is scoped beneath [data-e2e07-feedback="true"];
 *   - every keyframe is prefixed e2e07-;
 *   - no unscoped reset, no global *, html or body rule, no unscoped button/link/custom-element rule.
 *
 * Exact design values come from the approved e2e_07 source authority
 * (export-site-v4-src.html). They are presentation only and never reach gameplay,
 * measurement, scoring, session or result code.
 */

[data-e2e07-feedback="true"] {
  /* Approved e2e_07 palette. */
  --e2e07-deep: #0a203d;
  --e2e07-deep-trans: #0a203df7;
  --e2e07-deep-2: #12305a;
  --e2e07-white: #f6f8ed;
  --e2e07-pure: #ffffff;
  --e2e07-green: #71db71;
  --e2e07-green-deep: #274631;
  --e2e07-green-ink: #08130b;
  --e2e07-grey: #545554;
  --e2e07-slate: #39424d;
  --e2e07-slate-2: #6b7683;
  --e2e07-mist: #9fb0c0;
  --e2e07-clay: #e58a70;
  --e2e07-clay-deep: #b3452e;

  --e2e07-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --e2e07-display: "Barlow Semi Condensed", Inter, system-ui, sans-serif;
  --e2e07-mono: ui-monospace, Menlo, Consolas, monospace;

  --e2e07-container: 1120px;
  --e2e07-radius: 12px;
  --e2e07-radius-lg: 18px;

  font-family: var(--e2e07-sans);
  color: var(--e2e07-deep);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- layout */

[data-e2e07-feedback="true"] .e2e07-container {
  width: 100%;
  max-width: var(--e2e07-container);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-container {
    padding: 0 48px;
  }
}

[data-e2e07-feedback="true"] .e2e07-measure {
  max-width: 620px;
}

/* ---------------------------------------------------------------- header */

[data-e2e07-feedback="true"] .e2e07-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--e2e07-deep);
  color: var(--e2e07-white);
  border-bottom: 1px solid rgba(246, 248, 237, 0.16);
}

[data-e2e07-feedback="true"] .e2e07-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-header-inner {
    padding: 16px 0;
  }
}

[data-e2e07-feedback="true"] .e2e07-logo {
  display: block;
  height: 26px;
  width: auto;
}

[data-e2e07-feedback="true"] .e2e07-brand-lockup {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 12px;
  color: var(--e2e07-white);
  text-decoration: none;
}

[data-e2e07-feedback="true"] .e2e07-brand-title {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0.32rem 0.4rem;
    border-radius: 999px;
    background: var(--e2e07-green);
    color: var(--e2e07-green-ink);
    font: 600 0.54rem / 1 var(--e2e07-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(10, 32, 61, 0.08);
}

[data-e2e07-feedback="true"] .e2e07-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

[data-e2e07-feedback="true"] .e2e07-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--e2e07-white);
  font: 500 14px/1.2 var(--e2e07-sans);
  text-decoration: none;
}

[data-e2e07-feedback="true"] .e2e07-nav a:hover {
  background: rgba(246, 248, 237, 0.1);
}

[data-e2e07-feedback="true"] .e2e07-nav a:focus-visible,
[data-e2e07-feedback="true"] .e2e07-cta:focus-visible,
[data-e2e07-feedback="true"] .e2e07-play:focus-visible,
[data-e2e07-feedback="true"] .e2e07-chip:focus-visible {
  outline: 3px solid var(--e2e07-green);
  outline-offset: 2px;
}

[data-e2e07-feedback="true"] .e2e07-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--e2e07-green);
  color: var(--e2e07-deep);
  font: 600 14px/1.2 var(--e2e07-sans);
  text-decoration: none;
}

[data-e2e07-feedback="true"] .e2e07-nav a.e2e07-cta {
  border-radius: 999px;
  background: var(--e2e07-green);
  color: var(--e2e07-deep);
  font: 600 14px/1.2 var(--e2e07-sans);
  white-space: nowrap;
}

[data-e2e07-feedback="true"] .e2e07-nav a.e2e07-cta:hover {
  background: #61cf68;
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-cta-icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

/* ------------------------------------------------------------------ hero */

[data-e2e07-feedback="true"] .e2e07-hero {
  position: relative;
  overflow: hidden;
  background: var(--e2e07-deep);
  color: var(--e2e07-white);
  padding: 44px 0 40px;
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-hero {
    padding: 52px 0 40px;
  }
}

[data-e2e07-feedback="true"] .e2e07-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

[data-e2e07-feedback="true"] .e2e07-hero h1 {
  margin: 0;
  font: 800 clamp(38px, 4.4vw, 58px) / 0.92 var(--e2e07-display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

[data-e2e07-feedback="true"] .e2e07-hero p {
  margin: 8px 0 0;
  font: 400 15.5px/1.5 var(--e2e07-sans);
  color: rgba(246, 248, 237, 0.82);
}

[data-e2e07-feedback="true"] .e2e07-kicker {
  font: 600 11px/1.6 var(--e2e07-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e2e07-green);
}

/* Approved placement: adjacent to the brain. Below 1100px the brain sits in
   normal flow beneath the copy and the caption sits centred under it; at or
   above 1100px the brain is an absolute overlay and the caption moves to the
   hero's bottom-right corner, exactly as the approved source does. */
[data-e2e07-feedback="true"] .e2e07-hero p.e2e07-brain-caption {
  display: block;
  width: max-content;
  max-width: 360px;
  margin: 8px 0 0 auto;
  text-align: left;
  font: 500 10.5px/1.6 var(--e2e07-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(246, 248, 237, 0.62);
}

@media (min-width: 1100px) {
  [data-e2e07-feedback="true"] .e2e07-hero p.e2e07-brain-caption {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    margin: 8px 0 0 auto;
    text-align: left;
  }
}

/* The animated brain host. Sized so the internal logo clears the text column. */
[data-e2e07-feedback="true"] .e2e07-brain-slot {
  display: block;
  pointer-events: none;
}

@media (min-width: 1100px) {
  [data-e2e07-feedback="true"] .e2e07-brain-slot {
    position: absolute;
    top: -34px;
    right: 0;
    width: 60%;
    height: 88%;
    opacity: 0.95;
  }
}

@media (max-width: 1099px) {
  [data-e2e07-feedback="true"] .e2e07-brain-slot {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 340px;
    margin: 26px auto 0;
    opacity: 0.95;
  }
}

@media (max-width: 560px) {
  [data-e2e07-feedback="true"] .e2e07-brain-slot {
    max-width: 520px;
    height: 260px;
  }
}

/* ------------------------------------------------------- card/chip strip */

/* Approved grid: three columns below 620px, five at or above it. */
[data-e2e07-feedback="true"] .e2e07-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 620px) {
  [data-e2e07-feedback="true"] .e2e07-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }
}

[data-e2e07-feedback="true"] .e2e07-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(246, 248, 237, 0.25);
  border-radius: 13px;
  background: rgba(10, 32, 61, 0.55);
  color: var(--e2e07-white);
  text-decoration: none;
  min-width: 0;
}

/* Approved chip art: a fixed 66px band on desktop, 54px narrow — not an
   aspect ratio, which grew the chips and pushed the second row off screen. */
[data-e2e07-feedback="true"] .e2e07-chip-art {
  display: block;
  position: relative;
  width: 100%;
  height: 54px;
  overflow: hidden;
  border-radius: 8px;
  background: #0f244a;
  pointer-events: none;
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-chip-art {
    height: 66px;
  }
}

[data-e2e07-feedback="true"] .e2e07-chip-art game-surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}

[data-e2e07-feedback="true"] .e2e07-chip-name {
  font: 600 11px/1.25 var(--e2e07-sans);
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-chip-name {
    font-size: 12px;
  }
}

[data-e2e07-feedback="true"] .e2e07-chip[data-e2e07-disabled="true"] {
  border-color: rgba(246, 248, 237, 0.18);
}

[data-e2e07-feedback="true"] .e2e07-chip[data-e2e07-disabled="true"] .e2e07-chip-name {
  color: rgba(246, 248, 237, 0.62);
}

/* --------------------------------------------------------- game sections */

[data-e2e07-feedback="true"] .e2e07-section {
  padding: 56px 0;
  border-top: 1px solid rgba(10, 32, 61, 0.12);
}

[data-e2e07-feedback="true"] .e2e07-section-no {
  font: 600 11px/1.6 var(--e2e07-mono);
  letter-spacing: 0.14em;
  color: var(--e2e07-slate-2);
}

[data-e2e07-feedback="true"] .e2e07-section h2 {
  margin: 6px 0 10px;
  font: 800 clamp(28px, 4vw, 44px) / 1.08 var(--e2e07-display);
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-section p {
  margin: 0 0 18px;
  font: 400 16px/1.65 var(--e2e07-sans);
  color: var(--e2e07-grey);
}

/* Approved action block: Play dominant and full width of the 620px column,
   then the two equal outlined secondaries side by side. */
[data-e2e07-feedback="true"] .e2e07-actions {
  display: flex;
  max-width: 620px;
  margin-bottom: 12px;
}

[data-e2e07-feedback="true"] .e2e07-actions .e2e07-play {
  flex: 1;
  min-height: 60px;
  font-size: 19px;
}

[data-e2e07-feedback="true"] .e2e07-secondaries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 620px;
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-secondaries {
    grid-template-columns: 1fr 1fr;
  }
}

[data-e2e07-feedback="true"] .e2e07-disclosure > summary {
  width: 100%;
}

/* Closed, the two disclosures sit side by side as the approved equal
   outlined secondaries. Open, the panel spans the full action column so the
   information reads at the approved measure instead of in a half-width well. */
[data-e2e07-feedback="true"] .e2e07-disclosure[open] {
  grid-column: 1 / -1;
}

[data-e2e07-feedback="true"] .e2e07-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  /* Approved dominant action: green fill, navy ink, 2px navy border. */
  border: 2px solid var(--e2e07-deep);
  background: var(--e2e07-green);
  color: var(--e2e07-deep);
  font: 700 16px/1.2 var(--e2e07-sans);
  text-decoration: none;
  cursor: pointer;
}

[data-e2e07-feedback="true"] .e2e07-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(10, 32, 61, 0.35);
  background: transparent;
  color: var(--e2e07-deep);
  font: 600 15px/1.2 var(--e2e07-sans);
  text-decoration: none;
  cursor: pointer;
}

/* Disabled design-review presentation: never a link, never a route. */
[data-e2e07-feedback="true"] .e2e07-play[aria-disabled="true"],
[data-e2e07-feedback="true"] .e2e07-play:disabled {
  border: 1.5px dashed rgba(10, 32, 61, 0.45);
  background: transparent;
  color: var(--e2e07-grey);
  cursor: not-allowed;
}

[data-e2e07-feedback="true"] .e2e07-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--e2e07-clay-deep);
  color: var(--e2e07-clay-deep);
  background: rgba(229, 138, 112, 0.12);
  font: 700 10.5px/1.5 var(--e2e07-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-e2e07-feedback="true"] .e2e07-reason {
  font: 500 13px/1.6 var(--e2e07-sans);
  color: var(--e2e07-clay-deep);
}

/* ------------------------------------------------------ journey previews */

/* Approved journey frame: the surfaces render on the DARK ground, so the frame
   must supply the approved navy gradient. A light frame would leave the
   surface's own dark-ground text unreadable. */
[data-e2e07-feedback="true"] .e2e07-journey {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 630px;
  margin-top: 22px;
  padding: 22px 26px;
  box-sizing: border-box;
  border-radius: var(--e2e07-radius-lg);
  overflow: hidden;
  background: linear-gradient(
    160deg,
    var(--e2e07-deep) 0%,
    var(--e2e07-deep-2) 62%,
    var(--e2e07-deep) 100%
  );
  pointer-events: none;
}

[data-e2e07-feedback="true"] .e2e07-journey game-surface {
  max-width: 1040px;
}

@media (max-width: 1099px) {
  [data-e2e07-feedback="true"] .e2e07-journey {
    aspect-ratio: auto;
    min-height: 600px;
    padding: 14px 12px;
  }
}

@media (max-width: 759px) {
  [data-e2e07-feedback="true"] .e2e07-journey {
    min-height: 660px;
  }
}

[data-e2e07-feedback="true"] .e2e07-caption {
  margin-top: 10px;
  font: 400 12px/1.5 var(--e2e07-sans);
  color: var(--e2e07-slate-2);
}

[data-e2e07-feedback="true"] .e2e07-example {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(10, 32, 61, 0.08);
  font: 700 10.5px/1.5 var(--e2e07-mono);
  letter-spacing: 0.1em;
  color: var(--e2e07-slate);
}

/* Previews are decorative: nothing inside may take pointer input or focus. */
[data-e2e07-feedback="true"] .e2e07-journey *,
[data-e2e07-feedback="true"] .e2e07-chip-art * {
  pointer-events: none !important;
}

/* ---------------------------------------------------------------- footer */

[data-e2e07-feedback="true"] .e2e07-footer {
  margin-top: 48px;
  padding: 40px 0;
  background: var(--e2e07-deep);
  color: rgba(246, 248, 237, 0.78);
  font: 400 14px/1.7 var(--e2e07-sans);
}

[data-e2e07-feedback="true"] .e2e07-footer a {
  color: var(--e2e07-white);
}

[data-e2e07-feedback="true"] .e2e07-footer-inner {
  text-align: center;
}

[data-e2e07-feedback="true"] .e2e07-footer-mark {
  font: 700 14px/1 var(--e2e07-display);
  letter-spacing: 0.2em;
  color: var(--e2e07-white);
}

[data-e2e07-feedback="true"] .e2e07-footer-legal {
  margin: 8px 0 0;
  font: 400 12px/1.6 var(--e2e07-sans);
  letter-spacing: 0.02em;
  color: rgba(246, 248, 237, 0.78);
}

/* --------------------------------------------------- header/nav variants */

[data-e2e07-feedback="true"] .e2e07-nav-desktop {
  display: none;
}

[data-e2e07-feedback="true"] .e2e07-nav-narrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-nav-desktop {
    display: flex;
  }

  [data-e2e07-feedback="true"] .e2e07-nav-narrow {
    display: none;
  }
}

@media (max-width: 759px) {
  [data-e2e07-feedback="true"] .e2e07-logo {
    height: 52px;
  }
}

@media (max-width: 479px) {
  [data-e2e07-feedback="true"] .e2e07-header-inner {
    gap: 8px;
    padding: 10px 12px;
  }
  [data-e2e07-feedback="true"] .e2e07-header-inner .e2e07-brand-lockup {
    gap: 8px;
    min-width: 0;
  }
  [data-e2e07-feedback="true"] .e2e07-header-inner .e2e07-brand-title {
    font-size: 0.48rem;
    letter-spacing: 0.1em;
  }
  [data-e2e07-feedback="true"] .e2e07-nav-narrow {
    flex: none;
  }
}

@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .e2e07-logo {
    height: 72px;
  }
}

/* Native disclosure standing in for the approved scripted menu toggle. */
[data-e2e07-feedback="true"] .e2e07-menu > summary {
  position: relative;
  z-index: 41;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1.5px solid rgba(246, 248, 237, 0.55);
  border-radius: 999px;
  color: var(--e2e07-white);
  font: 600 13px/1.2 var(--e2e07-sans);
  cursor: pointer;
  list-style: none;
}

[data-e2e07-feedback="true"] .e2e07-menu-icon {
  display: block;
}

[data-e2e07-feedback="true"] .e2e07-menu-icon-close,
[data-e2e07-feedback="true"] .e2e07-menu[open] .e2e07-menu-icon-open {
  display: none;
}

[data-e2e07-feedback="true"] .e2e07-menu[open] .e2e07-menu-icon-close {
  display: block;
}

[data-e2e07-feedback="true"] .e2e07-menu > summary::-webkit-details-marker {
  display: none;
}

[data-e2e07-feedback="true"] .e2e07-menu > summary:focus-visible {
  outline: 3px solid var(--e2e07-green);
  outline-offset: 2px;
}

[data-e2e07-feedback="true"] .e2e07-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 39;
  display: flex;
  flex-direction: column;
  padding: 12px 24px 20px;
  border: 1px solid rgba(10, 32, 61, 0.14);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--e2e07-white);
  color: var(--e2e07-deep);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  box-shadow: 0 18px 38px rgba(10, 32, 61, 0.28);
}

[data-e2e07-feedback="true"] .e2e07-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(10, 32, 61, 0.12);
  color: var(--e2e07-deep);
  font: 600 15px/1.2 var(--e2e07-sans);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

[data-e2e07-feedback="true"] .e2e07-menu-panel a:hover {
  background: rgba(113, 219, 113, 0.14);
  color: var(--e2e07-green-deep);
}

[data-e2e07-feedback="true"] .e2e07-menu-panel a:active {
  background: rgba(113, 219, 113, 0.24);
  color: var(--e2e07-green-deep);
}

[data-e2e07-feedback="true"] .e2e07-menu-panel a.e2e07-cta {
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--e2e07-green);
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-menu-panel a.e2e07-cta:hover {
  background: #61cf68;
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-menu-panel a.e2e07-cta:active {
  background: #52bc59;
  color: var(--e2e07-deep);
}

@media (prefers-reduced-motion: reduce) {
  [data-e2e07-feedback="true"] .e2e07-menu-panel a {
    transition: none;
  }
}

[data-e2e07-feedback="true"] .e2e07-menu-panel a:focus-visible {
  outline: 3px solid var(--e2e07-green);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ hero copy */

[data-e2e07-feedback="true"] .e2e07-hero-brand {
  display: block;
  color: var(--e2e07-green);
}

[data-e2e07-feedback="true"] .e2e07-hero-brand sup {
  font-size: 0.32em;
  vertical-align: super;
  letter-spacing: 0;
}

[data-e2e07-feedback="true"] .e2e07-hero-made {
  display: block;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(246, 248, 237, 0.62);
  margin: 8px 0 5px;
}

[data-e2e07-feedback="true"] .e2e07-hero-lead {
  display: block;
}

[data-e2e07-feedback="true"] .e2e07-hero p.e2e07-hero-support {
  margin-top: 16px;
  font: 600 19px/1.4 var(--e2e07-sans);
  color: var(--e2e07-white);
  max-width: 440px;
}

[data-e2e07-feedback="true"] .e2e07-hero-count {
  max-width: 520px;
}

[data-e2e07-feedback="true"] .e2e07-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 22px 0 10px;
}

[data-e2e07-feedback="true"] .e2e07-hero-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid rgba(246, 248, 237, 0.65);
  border-radius: 999px;
  background: transparent;
  color: var(--e2e07-white);
  font: 600 14px/1.2 var(--e2e07-sans);
  text-decoration: none;
}

[data-e2e07-feedback="true"] .e2e07-hero p.e2e07-nonclinical {
  margin-top: 10px;
  font: 500 12px/1.6 var(--e2e07-sans);
  color: rgba(246, 248, 237, 0.62);
}

[data-e2e07-feedback="true"] .e2e07-strip-label {
  display: block;
  margin-top: 28px;
  font: 600 10px/1.4 var(--e2e07-sans);
  letter-spacing: 0.2em;
  color: rgba(246, 248, 237, 0.7);
  text-decoration: none;
}

[data-e2e07-feedback="true"] .e2e07-chip-review {
  display: block;
  font: 600 8.5px/1.4 var(--e2e07-sans);
  letter-spacing: 0.1em;
  color: rgba(246, 248, 237, 0.5);
}

/* -------------------------------------------------------- games section */

[data-e2e07-feedback="true"] .e2e07-games {
  background: var(--e2e07-white);
  padding: 60px 0 32px;
}

[data-e2e07-feedback="true"] .e2e07-games-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

[data-e2e07-feedback="true"] .e2e07-games-head h2 {
  margin: 0;
  font: 800 clamp(30px, 5vw, 54px) / 1 var(--e2e07-display);
  text-transform: uppercase;
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-games-kicker {
  font: 700 20px/1.2 var(--e2e07-display);
  text-transform: uppercase;
  color: var(--e2e07-green-deep);
}

[data-e2e07-feedback="true"] .e2e07-section h3 {
  margin: 12px 0 0;
  font: 800 clamp(32px, 4.4vw, 50px) / 1 var(--e2e07-display);
  text-transform: uppercase;
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

[data-e2e07-feedback="true"] .e2e07-challenge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  width: 100%;
  margin-top: 18px;
  padding: 16px 22px;
  border: 1px solid rgba(10, 32, 61, 0.3);
  border-radius: 14px;
  box-sizing: border-box;
}

[data-e2e07-feedback="true"] .e2e07-challenge-label {
  font: 600 9.5px/1 var(--e2e07-sans);
  letter-spacing: 0.2em;
  color: var(--e2e07-green-deep);
}

[data-e2e07-feedback="true"] .e2e07-challenge-title {
  font: 700 17px/1.25 var(--e2e07-display);
  text-transform: uppercase;
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-challenge-support {
  font: 400 12.5px/1.5 var(--e2e07-sans);
  color: var(--e2e07-grey);
}

/* Native disclosures standing in for the approved scripted panels. */
[data-e2e07-feedback="true"] .e2e07-disclosure > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid rgba(10, 32, 61, 0.35);
  border-radius: 999px;
  color: var(--e2e07-deep);
  font: 600 15px/1.2 var(--e2e07-sans);
  cursor: pointer;
  list-style: none;
}

[data-e2e07-feedback="true"] .e2e07-disclosure > summary::-webkit-details-marker {
  display: none;
}

[data-e2e07-feedback="true"] .e2e07-disclosure > summary:focus-visible {
  outline: 3px solid var(--e2e07-deep);
  outline-offset: 2px;
}

[data-e2e07-feedback="true"] .e2e07-science-disclosure > summary {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-radius: 14px;
  background: rgba(113, 219, 113, 0.12);
  transition:
    border-radius 160ms ease,
    background-color 160ms ease;
}

[data-e2e07-feedback="true"] .e2e07-science-disclosure > summary::after {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

[data-e2e07-feedback="true"]
  .e2e07-science-disclosure[open]
  > summary {
  border-radius: 14px 14px 0 0;
  border-bottom-color: transparent;
  background: rgba(113, 219, 113, 0.12);
}

[data-e2e07-feedback="true"]
  .e2e07-science-disclosure[open]
  > summary::after {
  transform: translateY(2px) rotate(225deg);
}

[data-e2e07-feedback="true"]
  .e2e07-science-disclosure
  > .e2e07-panel {
  margin-top: 0;
  border: 1.5px solid rgba(10, 32, 61, 0.35);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--e2e07-pure);
}

[data-e2e07-feedback="true"] .e2e07-panel {
  margin-top: 14px;
  padding: 22px 24px;
  border: 2px solid var(--e2e07-green-deep);
  border-radius: 4px 18px 18px 18px;
  background: rgba(31, 73, 147, 0.05);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-science {
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-science-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  align-items: start;
  gap: clamp(20px, 4vw, 44px);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-science-copy {
  max-width: 650px;
  font: 400 15px/1.75 var(--e2e07-sans);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-science-copy p {
  margin: 0 0 14px;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-science-copy a {
  color: var(--e2e07-green-deep);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-science-kicker {
  margin: 0 0 10px;
  color: var(--e2e07-green-deep);
  font: 700 10px/1.4 var(--e2e07-mono);
  letter-spacing: 0.13em;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-science-copy
  .e2e07-trail-science-note {
  margin: 18px 0 0;
  padding: 11px 14px;
  border-left: 3px solid var(--e2e07-green);
  border-radius: 0 8px 8px 0;
  background: rgba(113, 219, 113, 0.12);
  color: var(--e2e07-slate);
  font-size: 13px;
  line-height: 1.6;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-illustration {
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(39, 70, 49, 0.15);
  border-radius: 14px;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(113, 219, 113, 0.16),
      transparent 72%
    ),
    rgba(255, 255, 255, 0.72);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-path {
  fill: none;
  stroke: rgba(39, 70, 49, 0.36);
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  stroke-width: 3;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-marker circle {
  stroke-width: 2;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-marker text {
  fill: var(--e2e07-deep);
  font: 700 20px/1 var(--e2e07-sans);
  text-anchor: middle;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-marker-number circle {
  fill: var(--e2e07-deep);
  stroke: var(--e2e07-deep);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-marker-number text {
  fill: var(--e2e07-white);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-marker-letter circle {
  fill: var(--e2e07-green);
  stroke: var(--e2e07-green-deep);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-illustration-label {
  fill: var(--e2e07-slate-2);
  font: 700 8px/1 var(--e2e07-mono);
  letter-spacing: 0.07em;
  text-anchor: middle;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-references {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 32, 61, 0.14);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-references ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--e2e07-slate);
  font: 400 12px/1.6 var(--e2e07-sans);
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-references li {
  display: flex;
  gap: 7px;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-references li > span {
  flex: none;
  color: var(--e2e07-green-deep);
  font-weight: 700;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-references a {
  color: var(--e2e07-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-reference-outbound {
  display: inline-block;
  margin-left: 5px;
  color: var(--e2e07-green-deep);
}

@media (max-width: 600px) {
  [data-e2e07-feedback="true"]
    [data-runc-preplay]
    .e2e07-trail-science-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  [data-e2e07-feedback="true"]
    [data-runc-preplay]
    .e2e07-trail-illustration {
    max-width: 420px;
    margin-inline: auto;
  }
}

[data-e2e07-feedback="true"] [data-runc-preplay] .e2e07-study-caption {
  margin: 0 0 12px;
  color: var(--e2e07-green-deep);
  font: 600 14px/1.5 var(--e2e07-sans);
  text-align: center;
}

[data-e2e07-feedback="true"] [data-runc-preplay] .e2e07-study-tile {
  fill: var(--e2e07-deep);
  stroke: var(--e2e07-deep);
  stroke-width: 2;
}

[data-e2e07-feedback="true"]
  [data-runc-preplay]
  .e2e07-trail-marker-letter .e2e07-study-tile {
  fill: var(--e2e07-green);
  stroke: var(--e2e07-green-deep);
}

[data-e2e07-feedback="true"] [data-runc-preplay] .e2e07-study-target {
  fill: none;
  stroke: var(--e2e07-green-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-e2e07-feedback="true"] .e2e07-panel-label {
  font: 600 10.5px/1 var(--e2e07-sans);
  letter-spacing: 0.16em;
  color: var(--e2e07-green-deep);
}

[data-e2e07-feedback="true"] .e2e07-panel ol {
  margin: 8px 0 0;
  padding-left: 20px;
  font: 400 14px/1.6 var(--e2e07-sans);
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-panel li {
  margin-bottom: 8px;
}

[data-e2e07-feedback="true"] .e2e07-games-close {
  font: 400 13px/1.5 var(--e2e07-sans);
  color: var(--e2e07-grey);
}

/* --------------------------------------------------- how it works, privacy */

[data-e2e07-feedback="true"] .e2e07-how {
  background: var(--e2e07-deep);
  color: var(--e2e07-white);
  padding: 80px 0;
}

[data-e2e07-feedback="true"] .e2e07-how h2 {
  margin: 0;
  font: 800 clamp(30px, 5vw, 54px) / 1.05 var(--e2e07-display);
  text-transform: uppercase;
}

[data-e2e07-feedback="true"] .e2e07-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 44px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

[data-e2e07-feedback="true"] .e2e07-how-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--e2e07-green);
  font: 800 36px/1 var(--e2e07-display);
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-how-title {
  display: block;
  margin-top: 10px;
  font: 700 15px/1.2 var(--e2e07-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-e2e07-feedback="true"] .e2e07-how-text {
  display: block;
  margin-top: 10px;
  font: 400 14.5px/1.6 var(--e2e07-sans);
  color: rgba(246, 248, 237, 0.78);
}

[data-e2e07-feedback="true"] .e2e07-privacy {
  background: var(--e2e07-white);
  padding: 72px 0;
}

[data-e2e07-feedback="true"] .e2e07-privacy h2 {
  margin: 0;
  font: 800 clamp(30px, 5vw, 54px) / 1 var(--e2e07-display);
  text-transform: uppercase;
  color: var(--e2e07-deep);
}

[data-e2e07-feedback="true"] .e2e07-privacy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

[data-e2e07-feedback="true"] .e2e07-privacy-chips li {
  padding: 11px 18px;
  border: 2px solid var(--e2e07-deep);
  border-radius: 999px;
  font: 600 13px/1.3 var(--e2e07-sans);
  color: var(--e2e07-deep);
}

/* ------------------------------------------------------------ motion */

@keyframes e2e07-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-e2e07-feedback="true"] .e2e07-fade {
  animation: e2e07-fade-in 320ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  [data-e2e07-feedback="true"] .e2e07-fade {
    animation: none;
  }
}