/* America 250 giveaway widget styles. Extracted from am250_elementor_widget.html so the
 * Algolia per-record indexing limit (100KB) doesn't trip on the embedded <style> block. The
 * widget loads this with a <link rel="stylesheet"> tag at the top. Edit alongside the widget. */
    :root {
      --bg: #0a0e14;
      --text: #e8edf5;
      --muted: #8b98a8;
      --accent: #c41e3a;
      --panel: #121820;
      --content-max: 1200px;
      /* Three equal columns (1200 ÷ 3 = 400px each); no grid gap — pad inside cells. */
      --stratum-col-pad: clamp(1rem, 2.5vw, 1.5rem);
      --font-size-heading: 28px;
      --font-size-body: 18px;
      --font-heading: "kallisto", sans-serif;
      --stratum2-bg: #b1d0ff;
      --stratum3-bg: #003380;
      --stratum4-bg: #f6f6f6;
      --stratum5-bg: #b91f2b;
      /* Layout: #experience → #experience-webgl-root → .past-experience (#stratum-drawings-band → swag). Clip floor = drawings band top. */
      --cta-red: #b91f2b;
      --cta-red-hover: #a31b26;
      --cta-ring: #a3d0ff;
      --cta-ring-focus: #b1d0ff;
      --cta-glow: 0 0 5px 1px rgba(163, 208, 255, 0.32), 0 0 16px 2px rgba(143, 188, 255, 0.26);
      --cta-glow-strong: 0 0 6px 1px rgba(163, 208, 255, 0.4), 0 0 20px 3px rgba(143, 188, 255, 0.32);
      /* America 250 only: set by inline script below (do not rely on universal header.php). */
      /* WordPress site nav sits over the embed — clear the can like a fixed header offset. */
      --site-fixed-header-offset: 100px;
      /* Extra downward shift for the fixed WebGL layer only (.experience-webgl top). */
      --experience-webgl-vertical-nudge: 0px;
      /* Registered-mark superscripts: slightly smaller than body; offset = upward nudge (more negative = higher on the line). */
      /* Was -0.08em (sitting on baseline — too low on secondary prizes). Raised to -0.3em: above baseline but below default sup (~-0.5em which read as "too high"). */
      --am250-sup-font-size: 0.72em;
      --am250-sup-offset: -0.3em;
    }

    * {
      box-sizing: border-box;
    }

    /* Prevent browser/theme :visited purple from appearing on any link in our components. */
    main.experience-root a:visited,
    .past-experience a:visited,
    #giveaway-entry-modal a:visited,
    .giveaway-success-overlay a:visited {
      color: inherit;
    }

    main.experience-root sup,
    #giveaway-entry-modal sup {
      font-size: var(--am250-sup-font-size);
      line-height: 0;
      vertical-align: baseline;
      position: relative;
      top: var(--am250-sup-offset);
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    html {
      /* Pin release changes layout height; scroll anchoring can “helpfully” move scrollY and map ST progress to ~0. */
      overflow-anchor: none;
    }

    html,
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "Source Sans 3", sans-serif;
      font-size: var(--font-size-body);
      line-height: 1.65;
    }

    /* Scoped IDs + !important so widget styles win over theme/Elementor cascade. */
    #experience button.postcard-carousel__nav.postcard-carousel__nav--prev,
    #experience button.postcard-carousel__nav.postcard-carousel__nav--next,
    #experience button#grand-prize-prev.postcard-carousel__nav,
    #experience button#grand-prize-next.postcard-carousel__nav {
      appearance: none !important;
      -webkit-appearance: none !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      box-shadow: none !important;
      padding: 2px !important;
      border: none !important;
      border-radius: 4px !important;
      color: inherit !important;
      font: inherit !important;
      line-height: normal !important;
      min-height: 0 !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      overflow: visible !important;
    }

    /* Elementor / theme often wins generic h1,h2 — pin Kallisto; hero title 28px mobile, 35px desktop. */
    #experience #stratum-celebrate-heading.stratum-hero-title {
      font-family: "kallisto", "kallisto-std", "Kallisto Std", "Kallisto", serif !important;
      font-style: normal !important;
      font-weight: 800 !important;
      font-size: var(--font-size-heading) !important;
      line-height: 1.12 !important;
    }

    @media (min-width: 721px) {
      #experience #stratum-celebrate-heading.stratum-hero-title {
        font-size: 35px !important;
      }
    }

    #experience #stratum-secondary-heading {
      font-family: "kallisto", "kallisto-std", "Kallisto Std", "Kallisto", serif !important;
      font-style: normal !important;
      font-weight: 800 !important;
    }

    #experience .postcard-carousel button.postcard-card,
    #experience button.postcard-card.postcard-card {
      appearance: none !important;
      -webkit-appearance: none !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      box-shadow: 0 8px 24px rgba(15, 20, 35, 0.18) !important;
      padding: 0 !important;
      border: none !important;
      border-radius: 4px !important;
      color: inherit !important;
      font: inherit !important;
      line-height: normal !important;
      min-height: 0 !important;
      text-transform: none !important;
      letter-spacing: normal !important;
    }

    /* Prizes stratum pill: outside #experience — beat Elementor button/input + widget form rules. */
    main.experience-root form#giveaway-code-form.stratum3-code-form {
      display: flex !important;
      align-items: stretch !important;
      border-radius: 999px !important;
      box-sizing: border-box !important;
    }

    main.experience-root form#giveaway-code-form input.stratum3-code-form__input,
    main.experience-root form#giveaway-code-form input#giveaway-code-input {
      border-radius: 999px 0 0 999px !important;
      min-height: 0 !important;
      height: auto !important;
      line-height: 1.35 !important;
      padding: 0.55rem 0.9rem !important;
      box-sizing: border-box !important;
      background: #fff !important;
      background-color: #fff !important;
      background-image: none !important;
      color: #1a2430 !important;
      font: 600 var(--font-size-body) "Source Sans 3", sans-serif !important;
      letter-spacing: 0.04em !important;
    }

    main.experience-root form#giveaway-code-form button.stratum3-code-form__submit.btn-cta-lightring.btn-cta-lightring--pill-right {
      appearance: none !important;
      -webkit-appearance: none !important;
      align-self: stretch !important;
      border-radius: 0 999px 999px 0 !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: none !important;
      line-height: 1.35 !important;
      padding: 0.55rem 1.1rem !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      border: none !important;
      background: var(--cta-red) !important;
      background-color: var(--cta-red) !important;
      background-image: none !important;
      color: #fff !important;
      font: 700 var(--font-size-body) "Source Sans 3", sans-serif !important;
      letter-spacing: 0.09em !important;
      text-transform: uppercase !important;
      box-shadow: none !important;
    }

    main.experience-root form#giveaway-code-form button.stratum3-code-form__submit.btn-cta-lightring.btn-cta-lightring--pill-right:hover:not(:disabled),
    main.experience-root form#giveaway-code-form button.stratum3-code-form__submit.btn-cta-lightring.btn-cta-lightring--pill-right:focus-visible:not(:disabled) {
      background: var(--cta-red-hover) !important;
      background-color: var(--cta-red-hover) !important;
      background-image: none !important;
      box-shadow: none !important;
    }

    /* Full-bleed strata stack. #experience = hero + stratum 2; then stratum 3 (drawings), stratum 4 (prizes / tertiary markup), … inside <main>. */
    .stratum {
      position: relative;
      width: 100%;
    }

    /* Above stratum 2; WebGL is fixed (z-index 80) — giveaway may sit under opaque can pixels */
    .stratum--celebrate {
      z-index: 2;
    }

    /* Shared dot-burst art (Wistia / light-blue band, etc.). Set --dot-burst-* on the parent __decor block. */
    .stratum__dot-burst {
      position: absolute;
      z-index: 1;
      pointer-events: none;
      user-select: none;
      max-width: 350px;
      width: min(100%, 700px);
      height: auto;
      object-fit: contain;
    }

    /* Top-left img: x = from left, y = from top (negative = hang outside). */
    .stratum__dot-burst--tl {
      left: var(--dot-burst-tl-x);
      top: var(--dot-burst-tl-y);
    }

    /* Bottom-right img: x = from right, y = from bottom (negative = hang outside). */
    .stratum__dot-burst--br {
      right: var(--dot-burst-br-x);
      bottom: var(--dot-burst-br-y);
    }

    .stratum__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: #121826;
      background-position: top center;
      background-repeat: no-repeat;
      background-size: 100% auto;
    }

    /* WebM must be a <video> — CSS background-image url() only loads images, not video (no request in Network). */
    .stratum__bg--flag {
      overflow: hidden;
    }

    .stratum__bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      z-index: 0;
    }

    .stratum__bg-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(rgba(8, 11, 18, 0.84), rgba(8, 11, 18, 0.84));
    }

    .stratum__bg--secondary {
      background: var(--stratum2-bg);
    }

    .stratum__bg--tertiary {
      background: var(--stratum3-bg);
    }

    .stratum__bg--drawings {
      background-color: var(--cta-red);
    }

    /* Stratum 3: red band — below fixed GL (z-80) in tree; clip-path still removes GL pixels below this section’s top. */
    .stratum--drawings {
      position: relative;
      z-index: 1;
    }

    .stratum-drawings__inner {
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      max-width: var(--content-max);
      width: 100%;
      margin: 0 auto;
      padding-block: clamp(0.85rem, 2vw, 1.25rem);
      padding-inline: var(--stratum-col-pad);
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: clamp(1rem, 3vw, 2.25rem);
      align-items: center;
    }

    .stratum-drawings__left {
      text-align: left;
    }

    .stratum-drawings__left h2 {
      margin: 0 0 0.35rem;
      font-family: var(--font-heading);
      font-size: clamp(1.05rem, 2.4vw, 1.35rem);
      font-style: normal;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #fff;
    }

    .stratum-drawings__left p {
      margin: 0;
      font: 600 var(--font-size-body) / 1.45 "Source Sans 3", sans-serif;
      color: rgba(255, 255, 255, 0.92);
      /* Use full column width so the date line can sit on one line under the headline (52ch forced extra wraps). */
      max-width: none;
    }

    /* Two-column band: keep the sentence on one line under the heading when there’s room. */
    @media (min-width: 721px) {
      .stratum-drawings__left p {
        white-space: nowrap;
      }
    }

    .stratum-drawings__right {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      min-width: 0;
    }

    #stratum-drawings-band h3.stratum-drawings__next-label {
      margin: 0;
      font-family: var(--font-heading);
      font-size: clamp(0.95rem, 2vw, 1.15rem);
      font-style: normal;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff !important;
    }

    .stratum-drawings__next-date {
      margin: 0;
      font-family: var(--font-heading);
      font-size: clamp(1.35rem, 3.5vw, 1.85rem);
      font-style: normal;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--cta-ring);
    }

    @media (max-width: 720px) {
      .stratum-drawings__inner {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
      }

      .stratum-drawings__left {
        text-align: center;
      }

      .stratum-drawings__left p {
        margin-inline: auto;
      }
    }

    /* Pin target + stacking root for fixed GL (child) vs strata siblings. isolation keeps GL vs drawings predictable. */
    .experience-root {
      width: 100%;
      position: relative;
      z-index: 0;
      isolation: isolate;
    }

    /* ScrollTrigger + WebGL clip target: hero + stratum 2 only (#experience). Later strata are siblings inside <main>. */
    #experience {
      width: 100%;
    }

    /* Hero: same 1200px / 3× equal columns as other strata — copy uses left 800px (cols 1–2), rail col 3 for WebGL alignment */
    .experience__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      width: 100%;
      max-width: var(--content-max);
      margin-left: auto;
      margin-right: auto;
      align-items: start;
      position: relative;
      z-index: 2;
    }

    .experience__copy {
      grid-column: 1 / span 2;
      min-width: 0;
      padding: clamp(1.5rem, 4vw, 3rem) var(--stratum-col-pad) clamp(1rem, 2.5vw, 1.75rem);
    }

    .experience__spacer {
      grid-column: 3;
      min-height: 1px;
      min-width: 0;
      pointer-events: none;
      padding: 0 var(--stratum-col-pad);
    }

    @media (max-width: 720px) {
      .experience__grid {
        grid-template-columns: 1fr;
      }

      .experience__copy {
        grid-column: 1 / -1;
      }

      .experience__spacer {
        display: none;
      }
    }

    /* Scroll runway: stratum 2 min-height + stratum 1 height ≈ #experience height → ScrollTrigger `end` distance (post-#experience strata excluded). */
    .stratum--secondary {
      z-index: 1;
      overflow-x: clip;
      /* min-height: min(75vh, 1000px); */
    }

    /* Stratum 2 dot-burst: above bg, below inner. Edit --stratum2-dot-* (independent from
     * --dot-burst-* on the Wistia decor). */
    .stratum-secondary__decor {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow-x: clip;
      overflow-y: clip;
      --stratum2-dot-tl-x: -300px;
      --stratum2-dot-tl-y: -300px;
      --stratum2-dot-br-x: -300px;
      --stratum2-dot-br-y: -300px;
    }

    .stratum-secondary__decor .stratum__dot-burst--tl {
      left: var(--stratum2-dot-tl-x);
      top: var(--stratum2-dot-tl-y);
    }

    .stratum-secondary__decor .stratum__dot-burst--br {
      right: var(--stratum2-dot-br-x);
      bottom: var(--stratum2-dot-br-y);
    }

    .stratum__inner {
      position: relative;
      z-index: 1;
      max-width: var(--content-max);
      margin: 0 auto;
      width: 100%;
      /* Bottom padding: was clamp(4rem,10vh,7rem) → too tall on large viewports (10vh was the driver). Halved. */
      padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 4vh, 3rem);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: start;
    }

    .stratum__inner h2 {
      margin-top: 0;
      font-size: var(--font-size-heading);
    }

    .stratum__inner p {
      font-size: var(--font-size-body);
    }

    .stratum--tertiary .stratum__inner p {
      max-width: 76ch;
    }

    .stratum--secondary .stratum__inner {
      color: #003380;
      /* Room for giveaway bridge overlapping from stratum 1 */
      padding-top: clamp(3.5rem, 9vw, 5.5rem);
    }

    .stratum--secondary .stratum2-main p {
      color: #003380;
    }

    /* p rule above would paint subhead blue — keep giveaway headline red; font-size beats .stratum__inner p. */
    .stratum--secondary .stratum2-main .grand-prize__subhead {
      color: #b91f2b;
      font-size: 21px;
    }

    .stratum2-main {
      grid-column: 1 / span 2;
      min-width: 0;
      padding-left: var(--stratum-col-pad);
      padding-right: var(--stratum-col-pad);
      overflow: visible;
    }

    .stratum2-rail {
      grid-column: 3;
      min-height: 1px;
      min-width: 0;
      pointer-events: none;
      padding-left: var(--stratum-col-pad);
      padding-right: var(--stratum-col-pad);
    }

    .stratum--secondary .stratum__inner h2 {
      font-family: var(--font-heading);
      color: #003380;
      letter-spacing: normal;
      text-transform: uppercase;
      font-style: normal;
      font-size: var(--font-size-heading);
      line-height: 1.12;
    }

    .stratum--tertiary {
      /* Halve the column gutter for this denser 3-col layout. */
      --stratum-col-pad: clamp(0.5rem, 1.25vw, 0.75rem);
      --font-size-body: 17px;
    }

    .stratum--tertiary .stratum__inner {
      color: rgba(232, 237, 245, 0.95);
      align-items: stretch;
    }

    .stratum3-collage {
      grid-column: 1;
      align-self: start;
      min-width: 0;
      padding-left: var(--stratum-col-pad);
      padding-right: var(--stratum-col-pad);
    }

    /* Fill column 1 (was capped at 280px — too small for the third). */
    .stratum3-collage img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
    }

    .stratum3-prizes {
      grid-column: 2;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 100%;
      padding-left: var(--stratum-col-pad);
      padding-right: var(--stratum-col-pad);
    }

    /* Desktop: same cap as today — 440px ceiling, never wider than the column */
    .stratum3-prizes__header-img {
      display: block;
      width: 100%;
      max-width: min(100%, 440px);
      height: auto;
    }

    /* Header shrinks with viewport between 961-1200 so it doesn't fight minmax grid cols. */
    @media (max-width: 1200px) and (min-width: 961px) {
      .stratum3-prizes__header-img {
        max-width: min(100%, clamp(200px, 34vw, 440px));
      }
    }

    .stratum3-prizes__list {
      margin: clamp(0.85rem, 2.2vw, 1.35rem) 0 0;
      padding: 0;
      list-style: none;
      font-family: var(--font-heading);
      font-style: normal;
      font-weight: 800;
      /* Explicit step-downs (not clamp) — long names like "Leatherman® Rev® Multi-Tools"
       * need deterministic sizing per viewport. Single-column below 960px. */
      font-size: 17px;
      letter-spacing: 0.04em;
      line-height: 1.35;
    }

    @media (max-width: 1125px) {
      .stratum3-prizes__list {
        font-size: 16px;
      }
    }

    @media (max-width: 1055px) {
      .stratum3-prizes__list {
        font-size: 15px;
      }
    }

    @media (max-width: 990px) {
      .stratum3-prizes__list {
        font-size: 14px;
      }
    }

    .stratum3-prizes__list li {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.45rem 0.65rem;
      margin: 0 0 0.45rem;
    }

    .stratum3-prizes__list li:last-child {
      margin-bottom: 0;
    }

    .stratum3-prizes__num {
      color: #a3d0ff;
      flex: 0 0 auto;
      min-width: 2.5ch;
      text-align: right;
    }

    .stratum3-prizes__name {
      color: rgba(252, 252, 255, 0.98);
      /* Allow long branded names (Leatherman® Rev® Multi-Tools) to wrap cleanly when the column narrows. */
      min-width: 0;
      overflow-wrap: break-word;
    }

    .stratum3-rules {
      margin: auto 0 0;
      padding-top: clamp(1rem, 2vw, 1.5rem);
      max-width: 100%;
    }

    .stratum3-rules__link {
      color: rgba(255, 255, 255, 0.98);
      font-family: "Source Sans 3", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: var(--font-size-body);
      line-height: 1.45;
      text-decoration: underline !important;
      text-underline-offset: 0.15em;
    }

    .stratum3-rules__link:hover,
    .stratum3-rules__link:focus-visible {
      color: #fff;
    }

    .stratum3-rules__link:focus-visible {
      outline: 2px solid rgba(163, 208, 255, 0.8);
      outline-offset: 3px;
      border-radius: 2px;
    }

    /* Right column: code diagram flush to top of rail; form + hint stay at bottom (margin-top: auto on form). */
    .stratum3-rail {
      grid-column: 3;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      align-self: stretch;
      justify-self: stretch;
      min-width: 0;
      min-height: 100%;
      pointer-events: auto;
      padding-left: var(--stratum-col-pad);
      padding-right: var(--stratum-col-pad);
    }

    .stratum3-code-location {
      display: block;
      width: 60%;
      max-width: 100%;
      height: auto;
      margin: 0 auto 0.65rem;
      align-self: center;
      object-fit: contain;
    }

    .stratum3-code-form {
      display: flex;
      width: 100%;
      max-width: 14.5rem;
      margin-top: auto;
      margin-left: auto;
      margin-right: auto;
      border: 2px solid var(--cta-ring);
      border-radius: 999px;
      /* visible so outer box-shadow glow is not clipped (was overflow: hidden). */
      overflow: visible;
      background: #fff;
      box-shadow: var(--cta-glow);
    }

    .stratum3-code-form__input {
      flex: 1 1 auto;
      min-width: 0;
      border: none;
      padding: 0.55rem 0.9rem;
      font: 600 var(--font-size-body) "Source Sans 3", sans-serif;
      letter-spacing: 0.04em;
      color: #1a2430;
      background: #fff;
      border-radius: 999px 0 0 999px;
    }

    .stratum3-code-form__input::placeholder {
      color: #7a8794;
      font-weight: 500;
    }

    .stratum3-code-form__input:focus {
      outline: none;
    }

    .stratum3-code-form:focus-within {
      border-color: var(--cta-ring-focus);
      box-shadow: var(--cta-glow-strong);
    }

    /* Red CTA + light-blue ring/glow. Used by Shop Now + giveaway submit.
     * --pill-right: fused right segment inside .stratum3-code-form (no own ring). */
    .btn-cta-lightring {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin: 0;
      padding: 0.65rem 1.35rem;
      border: 2px solid var(--cta-ring);
      border-radius: 999px;
      background: var(--cta-red);
      color: #fff;
      font: 700 var(--font-size-body) "Source Sans 3", sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase !important;
      text-decoration: none;
      cursor: pointer;
      box-shadow: var(--cta-glow);
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /* Force uppercase on CTAs (themes/Elementor reset text-transform). Carousel arrows opt out above. */
    main.experience-root .btn-cta-lightring,
    .past-experience .btn-cta-lightring,
    #giveaway-entry-modal .giveaway-entry-modal__code-continue,
    #giveaway-entry-modal button.giveaway-entry-form__submit,
    #giveaway-entry-modal button[type="submit"].giveaway-entry-form__submit,
    .giveaway-success-overlay .giveaway-success-overlay__dismiss {
      text-transform: uppercase !important;
    }

    .btn-cta-lightring:hover:not(:disabled),
    .btn-cta-lightring:focus-visible:not(:disabled) {
      background: var(--cta-red-hover);
      border-color: var(--cta-ring-focus);
      box-shadow: var(--cta-glow-strong);
    }

    .btn-cta-lightring:focus-visible:not(:disabled) {
      outline: 2px solid rgba(0, 51, 128, 0.35);
      outline-offset: 2px;
    }

    .btn-cta-lightring:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }

    .btn-cta-lightring--pill-right {
      flex: 0 0 auto;
      padding: 0.55rem 1.1rem;
      border: none;
      border-radius: 0 999px 999px 0;
      box-shadow: none;
      letter-spacing: 0.09em;
    }

    .btn-cta-lightring--pill-right:hover:not(:disabled),
    .btn-cta-lightring--pill-right:focus-visible:not(:disabled) {
      background: var(--cta-red-hover);
      box-shadow: none;
    }

    .btn-cta-lightring--pill-right:focus-visible:not(:disabled) {
      outline: 2px solid rgba(255, 255, 255, 0.55);
      outline-offset: 2px;
    }

    /* Prizes-stratum pill submit: UA/theme resets (host !important rules live on main.experience-root #giveaway-code-form). */
    .stratum3-code-form .stratum3-code-form__submit.btn-cta-lightring.btn-cta-lightring--pill-right {
      appearance: none;
      -webkit-appearance: none;
      margin: 0;
      border: none;
      border-radius: 0 999px 999px 0;
      box-shadow: none;
    }

    .stratum3-code-form__hint {
      margin: 0.45rem 0 0;
      width: 100%;
      max-width: 18rem;
      font: italic var(--font-size-body) / 1.4 "Source Sans 3", sans-serif;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
    }

    /* Explicit fixed+inset+margin centering — UA <dialog> centering breaks inside transformed
     * ancestors. z-index > .header-top-wrapper (1000). */
    .giveaway-entry-modal {
      position: fixed;
      inset: 0;
      margin: auto;
      padding: 0;
      box-sizing: border-box;
      border: 5px solid #b91f2b;
      border-radius: 10px;
      width: min(36rem, calc(100vw - 2rem));
      max-width: min(36rem, calc(100vw - 2rem));
      max-height: min(92vh, 900px);
      height: fit-content;
      background: #f6f8fc;
      color: #1a2430;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
      overflow: hidden;
      z-index: 100001;
    }

    .giveaway-entry-modal::backdrop {
      background: rgba(8, 12, 20, 0.78);
    }

    .giveaway-entry-modal__code-step[hidden],
    .giveaway-entry-modal__main-step[hidden] {
      display: none !important;
    }

    .giveaway-entry-modal__code-step {
      padding: 0 0 0.5rem;
      padding-inline: 8px;
      box-sizing: border-box;
    }

    .giveaway-entry-modal__title--code {
      margin-bottom: 0.65rem;
    }

    .giveaway-entry-modal__code-format-hint {
      margin: 0 0 1rem;
      font: var(--font-size-body) / 1.45 "Source Sans 3", sans-serif;
      color: #3a4a5c;
    }

    .giveaway-entry-modal__code-field {
      margin-bottom: 1rem;
    }

    .giveaway-entry-modal__code-field label {
      display: block;
      margin-bottom: 0.35rem;
      font: 600 0.9rem "Source Sans 3", sans-serif;
      color: #003380;
    }

    .giveaway-entry-modal__code-field input {
      width: 100%;
      box-sizing: border-box;
      padding: 0.5rem 0.75rem;
      border: 1px solid #c5d4e8;
      border-radius: 8px;
      font: 600 var(--font-size-body) "Source Sans 3", sans-serif;
      letter-spacing: 0.06em;
      line-height: 1.35;
      color: #1a2430;
      background: #fff;
      min-height: 2.75rem;
    }

    .giveaway-entry-modal__code-field input:focus-visible {
      outline: none;
      border-color: #003380;
      box-shadow: 0 0 0 2px rgba(0, 51, 128, 0.28);
    }

    /* Continue button: Elementor's generic button rules win without high specificity + !important.
     * Mirrors the Shop Now override; flex + width:fit-content centers without stretching. */
    #giveaway-entry-modal button.giveaway-entry-modal__code-continue.btn-cta-lightring {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      width: fit-content !important;
      margin: 1rem auto 0 !important;
      padding: 0.65rem 1.35rem !important;
      border: 2px solid var(--cta-ring) !important;
      border-radius: 999px !important;
      background: var(--cta-red) !important;
      color: #fff !important;
      font: 700 var(--font-size-body) "Source Sans 3", sans-serif !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
      cursor: pointer !important;
      box-shadow: var(--cta-glow) !important;
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    }
    #giveaway-entry-modal button.giveaway-entry-modal__code-continue.btn-cta-lightring:hover:not(:disabled),
    #giveaway-entry-modal button.giveaway-entry-modal__code-continue.btn-cta-lightring:focus-visible:not(:disabled) {
      background: var(--cta-red-hover) !important;
      border-color: var(--cta-ring-focus) !important;
      box-shadow: var(--cta-glow-strong) !important;
      color: #fff !important;
      outline: none !important;
    }

    @media (max-width: 600px) {
      .giveaway-entry-modal {
        width: 100%;
        max-width: 100vw;
        height: 100%;
        max-height: 100dvh;
        margin: 0;
        border: none;
        border-radius: 0;
        inset: 0;
      }
    }

    .giveaway-entry-modal__inner {
      padding: 1.25rem 1.35rem 1rem;
      position: relative;
      max-height: min(calc(92vh - 2rem), 860px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .giveaway-entry-modal__main-step {
      padding-inline: 8px;
      box-sizing: border-box;
    }

    .giveaway-entry-modal__main-step > .giveaway-entry-form {
      padding-inline: 0;
    }

    .giveaway-entry-modal__title {
      margin: 0 0 0.5rem;
      font-family: var(--font-heading);
      font-size: clamp(1.2rem, 2.75vw, 1.45rem);
      font-style: normal;
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #003380;
    }

    .giveaway-entry-modal__close {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 2.25rem;
      height: 2.25rem;
      padding: 0;
      margin: 0;
      border: none;
      background: transparent;
      font: 300 1.55rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
      color: rgba(26, 36, 48, 0.45);
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .giveaway-entry-modal__close:hover,
    .giveaway-entry-modal__close:focus-visible {
      color: rgba(26, 36, 48, 0.88);
      background: rgba(0, 51, 128, 0.06);
      outline: none;
    }

    /*
     * Modal is re-appended to document.body — global Elementor / theme `button` rules win without this block.
     */
    #giveaway-entry-modal button.giveaway-entry-modal__close[data-giveaway-modal-close] {
      appearance: none !important;
      -webkit-appearance: none !important;
      position: absolute !important;
      top: 0.5rem !important;
      right: 0.5rem !important;
      width: 2.25rem !important;
      height: 2.25rem !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      border-width: 0 !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      box-shadow: none !important;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
      font-style: normal !important;
      font-weight: 300 !important;
      font-size: 1.55rem !important;
      line-height: 1 !important;
      color: rgba(26, 36, 48, 0.45) !important;
      min-height: 0 !important;
      min-width: 0 !important;
      max-width: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      border-radius: 6px !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      overflow: visible !important;
    }

    #giveaway-entry-modal button.giveaway-entry-modal__close[data-giveaway-modal-close]:hover,
    #giveaway-entry-modal button.giveaway-entry-modal__close[data-giveaway-modal-close]:focus-visible {
      color: rgba(26, 36, 48, 0.88) !important;
      background: rgba(0, 51, 128, 0.06) !important;
      background-color: rgba(0, 51, 128, 0.06) !important;
      background-image: none !important;
      box-shadow: none !important;
      outline: none !important;
    }

    .giveaway-entry-modal__lede {
      margin: 0 0 0.65rem;
      font: var(--font-size-body) / 1.5 "Source Sans 3", sans-serif;
      color: #3a4a5c;
    }

    .giveaway-entry-modal__lede:last-of-type {
      margin-bottom: 0.85rem;
    }

    .giveaway-entry-form {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding-inline: 8px;
    }

    .giveaway-entry-form__row {
      display: grid;
      gap: 0.75rem;
    }

    .giveaway-entry-form__row--duo {
      grid-template-columns: 1fr 1fr;
    }

    .giveaway-entry-form__row--triple {
      grid-template-columns: 1fr 1fr 1fr;
    }

    @media (max-width: 520px) {
      .giveaway-entry-form__row--duo,
      .giveaway-entry-form__row--triple {
        grid-template-columns: 1fr;
      }
    }

    .giveaway-entry-form__field {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .giveaway-entry-form__field label,
    .giveaway-entry-form__check label {
      font: 600 0.9rem "Source Sans 3", sans-serif;
      color: #003380;
    }

    .giveaway-entry-form__field input,
    .giveaway-entry-form__field select,
    .giveaway-entry-form__field textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 0.5rem 0.65rem;
      border: 1px solid #c5d4e8;
      border-radius: 6px;
      font: var(--font-size-body) "Source Sans 3", sans-serif;
      line-height: 1.35;
      color: #1a2430;
      background: #fff;
    }

    .giveaway-entry-form__field input:not([type="checkbox"]):not([type="radio"]),
    .giveaway-entry-form__field select {
      min-height: 2.75rem;
    }

    /* Shared padding + min-height across inputs and selects (themes leave selects tight). */
    #giveaway-entry-modal .giveaway-entry-modal__code-field input,
    #giveaway-entry-modal #giveaway-entry-form .giveaway-entry-form__field input:not([type="checkbox"]):not([type="radio"]),
    #giveaway-entry-modal #giveaway-entry-form .giveaway-entry-form__field select {
      padding-block: 0.5rem !important;
      padding-inline: 0.65rem !important;
      min-height: 2.75rem !important;
      height: auto !important;
      max-height: none !important;
      line-height: 1.35 !important;
      box-sizing: border-box !important;
    }

    #giveaway-entry-modal .giveaway-entry-modal__code-field input {
      padding-inline: 0.75rem !important;
    }

    #giveaway-entry-modal #giveaway-entry-form .giveaway-entry-form__field textarea {
      padding: 0.5rem 0.65rem !important;
      min-height: 4rem !important;
      line-height: 1.35 !important;
      box-sizing: border-box !important;
    }

    .giveaway-entry-form__field input:focus-visible,
    .giveaway-entry-form__field select:focus-visible,
    .giveaway-entry-form__field textarea:focus-visible {
      outline: none;
      border-color: #003380;
      box-shadow: 0 0 0 2px rgba(0, 51, 128, 0.28);
    }

    .giveaway-entry-form__field--conditional[hidden] {
      display: none !important;
    }

    .giveaway-entry-form__field textarea {
      min-height: 3.25rem;
      resize: vertical;
    }

    .giveaway-entry-form__field small,
    .giveaway-entry-form__hint {
      font: 0.8rem / 1.35 "Source Sans 3", sans-serif;
      color: #5a6a7a;
    }

    .giveaway-entry-form__hint {
      display: block;
      margin: -0.15rem 0 0;
    }

    .giveaway-entry-form__optional {
      font-weight: 500;
      color: #6a7a8a;
    }

    .giveaway-entry-form__check {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .giveaway-entry-form__check input {
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    .giveaway-entry-form__check span {
      font: var(--font-size-body) / 1.45 "Source Sans 3", sans-serif;
      color: #3a4a5c;
    }

    .giveaway-entry-form__check a {
      color: #003380;
      font-weight: 600;
      text-decoration: underline !important;
      text-underline-offset: 0.15em;
    }
    .giveaway-entry-form__check a:hover,
    .giveaway-entry-form__check a:focus-visible {
      color: #00245c;
    }

    .giveaway-entry-form__submit {
      margin-top: 0.25rem;
      align-self: center;
      background: var(--cta-red) !important;
      background-color: var(--cta-red) !important;
      color: #fff !important;
      border-radius: 999px !important;
      border: 2px solid var(--cta-ring) !important;
    }
    .giveaway-entry-form__submit:hover:not(:disabled),
    .giveaway-entry-form__submit:focus-visible:not(:disabled) {
      background: var(--cta-red-hover) !important;
      background-color: var(--cta-red-hover) !important;
      color: #fff !important;
    }

    .giveaway-entry-modal__msg {
      margin: 0.35rem 0 0.15rem;
      padding: 0.65rem 0.75rem;
      border-radius: 6px;
      font: var(--font-size-body) / 1.45 "Source Sans 3", sans-serif;
    }

    .giveaway-entry-modal__msg--error {
      background: #fff3cd;
      border: 1px solid #ffc107;
      color: #664d03;
    }

    .giveaway-entry-modal__msg--ok {
      background: #e8f5e9;
      border: 1px solid #81c784;
      color: #1b5e20;
    }

    .giveaway-entry-modal__msg[hidden] {
      display: none !important;
    }

    /* Full-viewport entry success: scrim + canvas fill behind; flex centers copy above site nav (z > header). */
    .giveaway-success-overlay {
      position: fixed;
      inset: 0;
      z-index: 100003;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
        max(0.75rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
      min-height: 100vh;
      min-height: 100dvh;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.35s ease, visibility 0s linear 0.35s;
      isolation: isolate;
    }

    .giveaway-success-overlay.is-visible {
      pointer-events: auto;
      visibility: visible;
      opacity: 1;
      transition: opacity 0.35s ease, visibility 0s linear 0s;
    }

    .giveaway-success-overlay__scrim {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: rgba(2, 4, 10, 0.94);
    }

    /* Fireworks video. object-fit:cover fills the viewport; pointer-events:none lets the
     * dismiss button (above) receive clicks. */
    .giveaway-success-overlay__video {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      pointer-events: none;
    }

    .giveaway-success-overlay__content {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      text-align: center;
      max-width: min(34rem, calc(100vw - 2.5rem));
      padding: 1.5rem 1.25rem 2rem;
      pointer-events: auto;
    }

    .giveaway-success-overlay__title {
      margin: 0 0 0.65rem;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: clamp(1.45rem, 4.2vw, 2.25rem);
      letter-spacing: 0.04em;
      line-height: 1.2;
      color: #fff;
      text-shadow: 0 0 28px rgba(255, 235, 150, 0.45), 0 2px 12px rgba(0, 0, 0, 0.65);
    }

    .giveaway-success-overlay__lede {
      margin: 0 0 1.35rem;
      font: var(--font-size-body) / 1.55 "Source Sans 3", sans-serif;
      color: rgba(248, 250, 255, 0.92);
    }

    .giveaway-success-overlay__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.65rem 0.75rem;
      margin-top: 0.25rem;
    }

    .giveaway-success-overlay__dismiss {
      flex: 0 0 auto;
      margin-top: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .giveaway-success-overlay__video {
        display: none;
      }
    }

    /* Desktop: mobile-only bridge hidden (≤720px rules further down turn it on). */
    .giveaway-bridge--mobile {
      display: none;
    }

    /* Stratum 2: breakpoint matches the hero (720px) — at 960px copy would re-widen while the
     * hero still reserves col 3 for the can. */
    @media (max-width: 720px) {
      .stratum--secondary .stratum__inner {
        grid-template-columns: 1fr;
      }

      .stratum2-main {
        grid-column: 1 / -1;
      }

      .stratum2-rail {
        display: none;
      }

      /* Allow giveaway strip to extend past any column overflow without clipping (incl. upward bleed). */
      .stratum--celebrate {
        overflow-x: visible;
        overflow-y: visible;
      }

      /* ≤720px: hide the abspos bridge (fights Elementor); use the in-flow strip below instead. */
      #experience .stratum--celebrate > .giveaway-bridge {
        display: none !important;
      }

      #experience {
        overflow-x: visible;
        overflow-y: visible;
      }

      .giveaway-bridge--mobile {
        display: block;
        height: 0;
        position: relative;
        overflow: visible;
        contain: none;
        width: 100vw;
        max-width: none;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        z-index: 4;
        pointer-events: none;
        box-sizing: border-box;
      }

      .giveaway-bridge--mobile__inner {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        /* Seam is the DOM boundary after stratum 1; center the strip on it (42% was desktop bottom+down; here it shoved the art into stratum 2). */
        transform: translateY(-65%);
      }

      .giveaway-bridge--mobile img {
        display: block;
        width: min(88%, 400px);
        min-width: min(220px, 100%);
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: contain;
        filter: none;
      }

      /* Center all section headlines on mobile. */
      .stratum-hero-title,
      #stratum-secondary-heading,
      .grand-prize__subhead,
      .stratum-drawings__left h2,
      #stratum4-band .stratum4-swag__heading,
      #stratum-wistia-band .stratum-wistia-band__heading,
      .stratum5-copy h2,
      #stratum-usa-heading {
        text-align: center;
      }

      /* Grand-prize header image: ensure it's large enough on narrow phones. */
      .grand-prize__header-img {
        min-width: 250px;
      }
    }

    @media (max-width: 960px) {
      .stratum--tertiary .stratum__inner {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .stratum3-collage {
        grid-column: 1;
      }

      .stratum3-prizes {
        grid-column: 1;
        min-height: 0;
      }

      .stratum3-rules {
        margin-top: clamp(1rem, 2vw, 1.25rem);
        padding-top: 0;
      }

      .stratum3-rail {
        grid-column: 1;
        align-self: stretch;
        justify-content: flex-start;
        min-height: 0;
        margin-top: 0.5rem;
      }

      .stratum3-code-form {
        margin-top: auto;
        margin-left: 0;
        max-width: 100%;
      }

      .stratum3-code-location {
        width: 60%;
        max-width: 100%;
      }

      .stratum3-code-form__hint {
        text-align: center;
      }

      /* Stratum 5 (swag band): viewport fallback (container query on .stratum4-band__cq handles “scrunched” mid-width). */
      .stratum4-band__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2.25rem);
        align-items: stretch;
      }

      .stratum4-swag {
        grid-column: 1;
        padding-right: 0;
        align-items: center;
        text-align: center;
      }

      .stratum4-swag__text {
        max-width: 36rem;
        margin-inline: auto;
      }

      .stratum4-swag__carousel {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
      }

      /*
       * From 960px down: fluid width — shrinks with viewport instead of holding a fixed px cap.
       * Floor 140px is a temporary minimum; tighten after visual review.
       */
      .stratum3-prizes__header-img {
        max-width: min(100%, clamp(140px, 42vw, 440px));
      }
    }

    /* Giveaway: stratum 1; 3-col grid — graphic in cols 1–2. ≤720px: in-stratum bridge hidden; .giveaway-bridge--mobile between strata. */
    .giveaway-bridge {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      pointer-events: none;
      transform: translateY(42%);
    }

    .giveaway-bridge__grid {
      max-width: var(--content-max);
      width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: end;
      padding: 0;
    }

    .giveaway-bridge__main {
      grid-column: 1 / span 2;
      display: flex;
      /* Center within the two-column band (not the full 1200px), so the straddle reads between hero copy and the rail. */
      justify-content: center;
      padding: 0 var(--stratum-col-pad);
      padding-bottom: 0;
    }

    .giveaway-bridge__rail {
      grid-column: 3;
      min-width: 0;
      padding: 0 var(--stratum-col-pad);
    }

    /* ~½ of the two-column band (original); max caps growth on huge monitors. */
    .giveaway-bridge img {
      display: block;
      width: 50%;
      max-width: min(400px, 100%);
      min-width: 260px;
      margin-inline: auto;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.25));
    }

    /* Grand prize (replaces stratum2 placeholder) */
    .grand-prize {
      margin-top: clamp(1.5rem, 4vw, 2.5rem);
      overflow: visible;
    }

    .grand-prize__header-img {
      display: block;
      width: 50%;
      max-width: min(100%, 300px);
      height: auto;
      margin: 0 auto;
    }

    .grand-prize__rule {
      /* Tight under header; modest gap before carousel (cards are vertically centered now). */
      margin: clamp(0.35rem, 1vw, 0.55rem) 0 clamp(0.45rem, 1.4vw, 0.75rem);
      padding: 0;
      border: none;
    }

    .grand-prize__subhead {
      margin: 0;
      font-family: var(--font-heading);
      font-style: normal;
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #b91f2b;
      text-align: center;
    }

    .postcard-carousel {
      background: transparent;
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      align-items: start;
      justify-content: stretch;
      row-gap: 0;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      /* Horizontal padding; nav arrows sit inside .postcard-carousel__fan-wrap. */
      padding-inline: clamp(0.25rem, 2vw, 2.5rem);
      padding-block: 0;
      box-sizing: border-box;
      user-select: none;
      /* cqi for card width must use full carousel width — not the narrow fan-wrap column (that shrank the cards). */
      container-type: inline-size;
      container-name: postcard-fan;
      /* Single source for card width (same clamp as .postcard-card) — used for fan track width math. */
      /* Slightly tighter than candemo so stratum 2 doesn’t dominate the column on WP. */
      --gp-card-w: clamp(140px, 26cqi, 252px);
    }

    .postcard-carousel__fan-wrap {
      background: transparent;
      grid-column: 1;
      grid-row: 1;
      position: relative;
      z-index: 1;
      justify-self: center;
      overflow: visible;
      /*
       * Wide fan track on desktop; mobile stack overrides width below.
       * Nav arrows are absolutely positioned inside this box (left/right inset).
       */
      width: min(100%, calc(var(--gp-card-w) * 2.98 + 2.5rem));
      max-width: 100%;
      min-width: 0;
    }

    /* Arrows sit inside the fan-wrap so they aren’t clipped by column edges (right used to disappear). */
    .postcard-carousel__nav--prev {
      position: absolute;
      top: 50%;
      left: clamp(0.2rem, 1.5vw, 0.85rem);
      z-index: 6;
      transform: translate(0, -50%);
    }

    .postcard-carousel__nav--next {
      position: absolute;
      top: 50%;
      right: clamp(0.2rem, 1.5vw, 0.85rem);
      left: auto;
      z-index: 6;
      transform: translate(0, -50%);
    }

    .postcard-carousel__nav {
      flex-shrink: 0;
      width: auto;
      height: auto;
      min-width: 0;
      padding: 2px;
      border: none;
      border-radius: 4px;
      /* <button>: kill WP / UA gray chrome */
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      background-color: transparent;
      box-shadow: none;
      color: inherit;
      font: inherit;
      text-align: center;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease, transform 0.15s ease;
    }

    .postcard-carousel__nav:hover,
    .postcard-carousel__nav:focus-visible {
      opacity: 0.92;
      outline: none;
    }

    .postcard-carousel__nav:focus-visible {
      box-shadow: 0 0 0 2px rgba(0, 51, 128, 0.45);
    }

    .postcard-carousel__nav--prev:active {
      transform: translate(0, -50%) scale(0.96);
    }

    .postcard-carousel__nav--next:active {
      transform: translate(0, -50%) scale(0.96);
    }

    .postcard-carousel__nav-icon {
      display: block;
      width: auto;
      max-width: 44px;
      height: auto;
      max-height: clamp(14px, 2.2vw, 20px);
      object-fit: contain;
      pointer-events: none;
    }

    /* "next" arrow: flip the wrapper, not the <img> (themes often reset img transforms).
     * Three slots: 1 left, 2 center hero, 3 right. Wrap keyframes preserve the wide arc. */
    .postcard-carousel__stage {
      position: relative;
      display: block;
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
      /* Row height only (cards are absolute + centered). ~200px keeps the band tight. */
      min-height: 200px;
      perspective: 900px;
      overflow: visible;
    }

    .postcard-carousel--animating {
      pointer-events: none;
    }

    .postcard-card {
      position: absolute;
      left: 50%;
      top: 50%;
      /* 31cqi = % of .postcard-carousel width (container), not the narrow fan-wrap track. */
      width: var(--gp-card-w);
      max-width: none;
      margin: 0;
      padding: 0;
      border: none;
      /* Cards are <button>: reset host / WP theme button chrome (gray fill). */
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      background-color: transparent;
      font: inherit;
      color: inherit;
      text-align: inherit;
      cursor: pointer;
      /* AUTHOR SETTING — 95% keeps side cards clear of center. Don't drive-by tune. */
      --gp-slot-dx: 95%;
      transition:
        transform 0.58s cubic-bezier(0.33, 1, 0.55, 1),
        filter 0.5s ease,
        opacity 0.5s ease,
        z-index 0.01s;
      transform-origin: 50% 92%;
      border-radius: 4px;
      box-shadow: 0 8px 24px rgba(15, 20, 35, 0.18);
    }

    .postcard-card--slot1 {
      z-index: 2;
      transform: translate(-50%, -50%) translateX(calc(-1 * var(--gp-slot-dx))) scale(0.9) translateZ(-40px) rotateY(10deg);
      filter: brightness(0.95);
      opacity: 0.92;
    }

    .postcard-card--slot2 {
      z-index: 5;
      transform: translate(-50%, -50%) scale(1.02) translateZ(20px) rotateY(0deg);
      filter: none;
      opacity: 1;
    }

    .postcard-card--slot3 {
      z-index: 3;
      transform: translate(-50%, -50%) translateX(var(--gp-slot-dx)) scale(0.9) translateZ(-40px) rotateY(-10deg);
      filter: brightness(0.95);
      opacity: 0.92;
    }

    /* Slot-1 card on “next”: exit left (fade), jump off-screen right, enter as new slot 3 — same duration as other slot moves */
    @keyframes grand-prize-wrap-next {
      0% {
        transform: translate(-50%, -50%) translateX(calc(-1 * var(--gp-slot-dx))) scale(0.9) translateZ(-40px) rotateY(10deg);
        filter: brightness(0.95);
        opacity: 0.92;
      }
      40% {
        transform: translate(-50%, -50%) translateX(-115%) scale(0.82) translateZ(-52px);
        opacity: 0;
      }
      41% {
        transform: translate(-50%, -50%) translateX(118%) scale(0.82) translateZ(-52px);
        opacity: 0;
      }
      52% {
        opacity: 0.35;
      }
      100% {
        transform: translate(-50%, -50%) translateX(var(--gp-slot-dx)) scale(0.9) translateZ(-40px) rotateY(-10deg);
        filter: brightness(0.95);
        opacity: 0.92;
      }
    }

    @keyframes grand-prize-wrap-prev {
      0% {
        transform: translate(-50%, -50%) translateX(var(--gp-slot-dx)) scale(0.9) translateZ(-40px) rotateY(-10deg);
        filter: brightness(0.95);
        opacity: 0.92;
      }
      40% {
        transform: translate(-50%, -50%) translateX(115%) scale(0.82) translateZ(-52px);
        opacity: 0;
      }
      41% {
        transform: translate(-50%, -50%) translateX(-118%) scale(0.82) translateZ(-52px);
        opacity: 0;
      }
      52% {
        opacity: 0.35;
      }
      100% {
        transform: translate(-50%, -50%) translateX(calc(-1 * var(--gp-slot-dx))) scale(0.9) translateZ(-40px) rotateY(10deg);
        filter: brightness(0.95);
        opacity: 0.92;
      }
    }

    .postcard-card--wrap-next-anim {
      z-index: 4;
      animation: grand-prize-wrap-next 0.9s cubic-bezier(0.33, 1, 0.55, 1) both;
      transition: none !important;
    }

    .postcard-card--wrap-prev-anim {
      z-index: 4;
      animation: grand-prize-wrap-prev 0.9s cubic-bezier(0.33, 1, 0.55, 1) both;
      transition: none !important;
    }

    .postcard-card:focus-visible {
      outline: 3px solid rgba(0, 51, 128, 0.65);
      outline-offset: 4px;
    }

    .postcard-card img {
      display: block;
      width: 100%;
      height: auto;
      border: 0;
      border-radius: 4px;
      vertical-align: top;
    }

    @media (prefers-reduced-motion: reduce) {
      .postcard-card {
        transition-duration: 0.01ms;
      }

      .postcard-card--wrap-next-anim,
      .postcard-card--wrap-prev-anim {
        animation: none !important;
      }
    }

    .grand-prize-copy {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      min-width: 0;
      margin-top: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .grand-prize-copy__inner {
      width: 100%;
      max-width: none;
      margin: 0 auto;
      text-align: center;
    }

    .grand-prize-copy__place {
      font-family: var(--font-heading);
      font-size: clamp(1.65rem, 4.5vw, 2.35rem);
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1.15;
      margin: 0 0 0.7rem;
      color: #003380;
    }

    .grand-prize-copy__inner p:not(.grand-prize-copy__place) {
      margin: 0 0 0.3rem;
      color: #003380;
      font-size: var(--font-size-body);
      line-height: 1.34;
      max-width: none;
    }

    .grand-prize-copy__inner strong {
      font-weight: 700;
    }

    .grand-prize-copy__inner p:not(.grand-prize-copy__place):last-child {
      margin-bottom: 0;
    }

    /* Narrow OR short: vertical stack, tap-to-advance (carouselInstantMode). Listed here so
     * (max-width: 600px) wins over the horizontal slot transforms below. */
    @media (max-height: 599px), (max-width: 600px) {
      .postcard-carousel {
        /* Center card ≈ 70% viewport; side cards share the same base width + scale. */
        --gp-card-w: min(70vw, 340px);
      }

      .postcard-carousel__nav {
        display: none !important;
      }

      .postcard-carousel__fan-wrap {
        grid-column: 1;
        grid-row: 1;
        width: min(100%, 92vw);
        max-width: 100%;
        margin-inline: auto;
        margin-block: clamp(1rem, 4vw, 1.75rem);
        justify-self: center;
        display: block;
      }

      .postcard-carousel__stage {
        grid-column: 1;
        grid-row: 1;
        /* Room for 3D stack bleed without overlapping grand-prize banner / body copy. */
        min-height: min(240px, 40vh);
        padding-block: clamp(0.5rem, 2vw, 1rem);
        box-sizing: content-box;
        perspective: 720px;
      }

      /* Vertical stack: tighter Y spread so top/bottom don’t collide; slot3 nudged up vs prior. */
      .postcard-carousel .postcard-card--slot1 {
        z-index: 2;
        transform: translate(-50%, -30%) translateY(-88%) scale(0.88) translateZ(-28px) rotateX(16deg);
        filter: brightness(0.95);
        opacity: 0.92;
      }

      .postcard-carousel .postcard-card--slot2 {
        z-index: 5;
        transform: translate(-50%, -50%) scale(1) translateZ(14px) rotateX(0deg);
        filter: none;
        opacity: 1;
      }

      .postcard-carousel .postcard-card--slot3 {
        z-index: 3;
        transform: translate(-50%, -70%) translateY(96%) scale(0.88) translateZ(-28px) rotateX(-16deg);
        filter: brightness(0.95);
        opacity: 0.92;
      }
    }

    @media (max-width: 600px) {
      .stratum2-main > p {
        margin-bottom: clamp(1rem, 4vw, 1.5rem);
      }

      .grand-prize {
        margin-top: clamp(1.25rem, 4vw, 2rem);
      }

      .grand-prize__header-img {
        margin-bottom: clamp(0.75rem, 3vw, 1.25rem);
      }

      .grand-prize__rule {
        margin-bottom: clamp(1rem, 4vw, 1.75rem);
      }

      .grand-prize__subhead {
        padding-bottom: 50px;
      }

      .postcard-carousel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: clamp(1rem, 4vw, 1.5rem);
        width: 100%;
        max-width: 100%;
        justify-content: stretch;
        padding-inline: 0;
        padding-top: clamp(0.35rem, 2vw, 0.75rem);
      }

      .grand-prize-copy {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr;
        margin-top: 0;
        padding-top: 113px;
      }

      .grand-prize-copy__inner {
        grid-column: 1;
      }

    }

    /* Stratum 5 (swag): first band in “past the experience” — full 1200px content width, white */
    .stratum4-band {
      width: 100%;
      background: var(--stratum4-bg);
      color: #1a1a1a;
    }

    /* Padding lives on __inner not __cq: padding on the query container shrinks content-box
     * width and (max-width: 72rem) would match almost always, forcing stack on desktop. */
    .stratum4-band__cq {
      width: 100%;
      max-width: var(--content-max);
      margin-inline: auto;
      container-type: inline-size;
      container-name: stratum4;
    }

    .stratum4-band__inner {
      width: 100%;
      margin: 0;
      padding: clamp(2.5rem, 6vw, 4rem) var(--stratum-col-pad);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: center;
    }

    .stratum4-swag {
      grid-column: 1;
      min-width: 0;
      padding-right: clamp(1rem, 3vw, 2rem);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.85rem;
    }

    /*
     * Same Kallisto pin as #stratum-wistia-band .stratum-wistia-band__heading — Elementor's generic
     * h2 rules override the `font:` shorthand unless the family is !important.
     */
    #stratum4-band .stratum4-swag__heading {
      margin: 0 !important;
      font-family: "kallisto", "kallisto-std", "Kallisto Std", "Kallisto", serif !important;
      font-size: var(--font-size-heading) !important;
      font-style: normal !important;
      font-weight: 800 !important;
      line-height: 1.12 !important;
      letter-spacing: normal !important;
      text-transform: uppercase !important;
      color: #1a1a1a !important;
    }

    .stratum4-swag__text {
      margin: 0;
      font: 600 var(--font-size-body) / 1.5 "Source Sans 3", sans-serif;
      color: #2a3540;
      max-width: 26rem;
    }

    .stratum4-swag__carousel {
      grid-column: 2 / -1;
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }

    /* Shop Now: Elementor resets <a> color/text-decoration — pin white text, red bg, darken-to-red hover (matches ENTER button). */
    a.stratum4-swag__cta.btn-cta-lightring {
      color: #fff !important;
      background: var(--cta-red) !important;
      text-decoration: none !important;
    }
    a.stratum4-swag__cta.btn-cta-lightring:hover,
    a.stratum4-swag__cta.btn-cta-lightring:focus-visible {
      color: #fff !important;
      background: var(--cta-red-hover) !important;
      border-color: var(--cta-ring-focus) !important;
      box-shadow: var(--cta-glow-strong) !important;
      text-decoration: none !important;
    }
    a.stratum4-swag__cta.btn-cta-lightring:visited {
      color: #fff !important;
    }

    .stratum4-swiper {
      overflow: hidden;
      width: 100%;
      max-width: 100%;
      border-radius: 12px;
    }

    .stratum4-swiper-wrapper {
      align-items: stretch;
    }

    .stratum4-swiper-slide {
      box-sizing: border-box;
    }

    .stratum4-swiper-card {
      margin: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(0.3rem, 1vw, 0.45rem);
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .stratum4-swiper-card img {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: clamp(120px, 24cqw, 280px);
      object-fit: contain;
      display: block;
    }

    /* When the swag band content column is narrow: one band row (copy) then images, stacked. */
    /* Stack below this band width (not 72rem — that matched ~1150px and flipped too early). */
    @container stratum4 (max-width: 56rem) {
      .stratum4-band__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2.25rem);
        align-items: stretch;
      }

      .stratum4-swag {
        grid-column: 1;
        padding-right: 0;
        align-items: center;
        text-align: center;
      }

      .stratum4-swag__text {
        max-width: 36rem;
        margin-inline: auto;
      }

      .stratum4-swag__carousel {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
      }
    }

    /*
     * Stratum 6 (Wistia): same 1200px / 3-col + container query as stratum 5 swag — col 1 copy, cols 2–3 embed
     * so the video track matches the carousel width above.
     */
    .stratum-wistia-band {
      position: relative;
      width: 100%;
      background: var(--stratum2-bg);
      color: #003380;
      overflow-x: clip;
    }

    /* Dot-burst: above bg, below copy/embed. Clipped to this band. TL/BR offsets from each edge. */
    .stratum-wistia-band__decor {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow-x: clip;
      overflow-y: clip;
      --dot-burst-tl-x: -300px;
      --dot-burst-tl-y: -300px;
      --dot-burst-br-x: -300px;
      --dot-burst-br-y: -300px;
    }

    .stratum-wistia-band__cq {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--content-max);
      margin-inline: auto;
      container-type: inline-size;
      container-name: stratum-wistia;
    }

    .stratum-wistia-band__inner {
      width: 100%;
      margin: 0;
      padding: clamp(2.5rem, 6vw, 4rem) var(--stratum-col-pad);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: start;
    }

    .stratum-wistia-band__copy {
      grid-column: 1;
      align-self: start;
      min-width: 0;
      padding-right: clamp(1rem, 3vw, 2rem);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0.65rem;
      text-align: left;
    }

    /*
     * Match stratum section headers (e.g. .stratum--secondary .stratum__inner h2): Kallisto + 28px + 800 weight.
     * !important beats Elementor generic h2 rules outside #experience.
     */
    #stratum-wistia-band .stratum-wistia-band__heading {
      margin: 0 !important;
      font-family: "kallisto", "kallisto-std", "Kallisto Std", "Kallisto", serif !important;
      font-size: var(--font-size-heading) !important;
      font-style: normal !important;
      font-weight: 800 !important;
      line-height: 1.12 !important;
      letter-spacing: normal !important;
      text-transform: uppercase !important;
      color: #003380 !important;
    }

    /* Pin Kallisto on all section headings that live outside #experience (Elementor theme overrides generic h2/h3). */
    .stratum-drawings__left h2,
    #stratum-drawings-band h3.stratum-drawings__next-label,
    .stratum5-copy h2,
    #stratum-usa-heading,
    .giveaway-entry-modal__title,
    .giveaway-success-overlay__title {
      font-family: "kallisto", "kallisto-std", "Kallisto Std", "Kallisto", serif !important;
    }

    .stratum-wistia-band__embed {
      grid-column: 2 / -1;
      align-self: start;
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }

    .stratum-wistia-band__embed .wistia_responsive_padding {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 28px rgba(0, 51, 128, 0.12);
    }

    @container stratum-wistia (max-width: 56rem) {
      .stratum-wistia-band__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2.25rem);
        align-items: start;
      }

      .stratum-wistia-band__copy {
        grid-column: 1;
        align-self: start;
        padding-right: 0;
        align-items: center;
        text-align: center;
      }

      .stratum-wistia-band__embed {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
      }
    }

    /* Stratum 7 (USA): past the experience — dark red, 1/3 visual + 2/3 copy */
    .past-experience {
      width: 100%;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .stratum--usa {
      color: rgba(248, 245, 242, 0.96);
    }

    .stratum__bg--usa {
      background-color: var(--stratum5-bg);
      background-image: url("/america250_api/assets/made_in_usa_background.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .stratum5-inner {
      position: relative;
      z-index: 1;
      max-width: var(--content-max);
      width: 100%;
      margin: 0 auto;
      padding: clamp(2.5rem, 6vw, 4.5rem) 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: center;
    }

    .stratum5-media {
      grid-column: 1;
      min-width: 0;
      padding-left: var(--stratum-col-pad);
      padding-right: var(--stratum-col-pad);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stratum5-media img {
      display: block;
      width: auto;
      max-width: min(100%, 220px);
      height: auto;
      margin-inline: auto;
    }

    /* Match stratum 2 section headings (.stratum--secondary .stratum__inner h2) */
    .stratum5-copy {
      grid-column: 2 / span 2;
      min-width: 0;
      padding-left: var(--stratum-col-pad);
      padding-right: var(--stratum-col-pad);
    }

    .stratum5-copy h2 {
      font-family: var(--font-heading);
      font-size: var(--font-size-heading);
      font-style: normal;
      font-weight: 800;
      line-height: 1.12;
      margin: 0 0 1.25rem;
      color: #fff;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Body copy: same scale/weight pattern as stratum 2 intro + grand-prize paragraphs — full width of cols 2–3 like hero copy in cols 1–2 */
    .stratum5-copy p {
      font-family: "Source Sans 3", sans-serif;
      font-size: var(--font-size-body);
      font-weight: 400;
      line-height: 1.5;
      color: rgba(232, 220, 215, 0.92);
      max-width: none;
      margin: 0 0 1rem;
    }

    .stratum5-copy p:last-child {
      margin-bottom: 0;
    }

    .stratum5-cta {
      display: inline-block;
      margin-top: 0.35rem;
      font-family: "Source Sans 3", sans-serif;
      font-size: var(--font-size-body);
      font-weight: 400;
      font-style: normal;
      color: rgba(255, 255, 255, 0.98);
      text-decoration: underline !important;
      text-underline-offset: 0.15em;
      line-height: 1.45;
    }

    .stratum5-cta:hover,
    .stratum5-cta:focus-visible {
      color: #fff;
    }

    /* USA stratum mobile: must come AFTER the 3-col rules above (grid-column: 2/span 2 would
     * stick at narrow widths and produce a broken 2x2 layout). */
    @media (max-width: 960px) {
      .stratum--usa .stratum5-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(1.25rem, 4vw, 2rem);
      }

      .stratum--usa .stratum5-copy {
        order: 1;
        width: 100%;
        max-width: none;
        grid-column: auto;
      }

      .stratum--usa .stratum5-media {
        order: 2;
        width: 100%;
        grid-column: auto;
      }
    }

    .stratum-hero-title {
      font-family: var(--font-heading);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin: 0 0 1.35rem;
      line-height: 1.15;
      color: var(--text);
    }

    /* Shared utility: any inline run that should never break across lines. */
    .am250-nowrap {
      white-space: nowrap;
    }

    .content-section--stratum-hero {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: clamp(1rem, 2.5vh, 1.75rem);
    }

    .content-section--stratum-hero p {
      color: rgba(232, 237, 245, 0.92);
      font-size: var(--font-size-body);
    }

    .content-section--stratum-hero strong {
      color: var(--text);
      font-weight: 600;
    }

    /*
     * WebGL stack: fixed, same horizontal band as --content-max (centered). Canvas pins top-right of this
     * column — not the viewport right edge when the window is wider than 1200px.
     */
    .experience-webgl {
      position: fixed;
      top: calc(var(--site-fixed-header-offset, 0px) + var(--experience-webgl-vertical-nudge, 0px));
      bottom: 0;
      left: 0;
      right: 0;
      width: min(100%, var(--content-max));
      max-width: var(--content-max);
      height: auto;
      margin-left: auto;
      margin-right: auto;
      /* Above in-main strata (celebrate 2, etc.); below theme header / entry modals (often 1e5+). */
      z-index: 80;
      pointer-events: none;
      overflow: hidden;
      background: transparent;
      /* clip-path set in JS to the #experience vertical band so past-the-experience isn’t covered */
    }

    /* Canvas is hit-targetable by default; keep GL subtree off the pointer plane (no !important — dev HUD sets inline auto for Orbit). */
    .experience-webgl * {
      pointer-events: none;
    }

    .experience-webgl.experience-webgl--off {
      opacity: 0;
      visibility: hidden;
    }

    /* Header hover: hide GL from hit-testing (clip-path + composite gets it wrong on some UAs). */
    .experience-webgl.experience-webgl--header-interaction {
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .experience-webgl__inner {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100%;
      z-index: 0;
      /* Fixed 12:10 aspect (see getExperienceWebglCssSize). Pinned top-right via flex so the
       * canvas isn't vh-stretched (would change aspect on resize). */
      overflow: hidden;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
    }

    #can-canvas {
      display: block;
      position: relative;
      z-index: 0;
      flex: 0 0 auto;
      box-sizing: border-box;
      max-width: 100%;
      max-height: 100%;
      /* width/height px set in resize() for stable aspect; fallback before first resize: */
      width: min(var(--content-max), 100%);
      aspect-ratio: 12 / 10;
      height: auto;
      touch-action: none;
    }

    /* Stacked layout: hide GL until framing/overlay is revisited (canvas stays in layout for resize buffer math). */
    @media (max-width: 720px) {
      #can-canvas {
        visibility: hidden;
      }
    }

    /* Hero intro paragraph: hidden when the fixed hero WebGL layer is off — mini can canvas replaces it. */
    @media (max-width: 720px) {
      .stratum-hero-intro {
        display: none !important;
      }
    }

    /* In-flow WebGL “stage” for narrow widths only (same GLB as hero; idle wobble + twirl, no scroll drop). */
    .experience-hero-mini-gl {
      display: none;
      width: 100%;
      max-width: min(22rem, 100%);
      margin: 0 auto 1.25rem;
      aspect-ratio: 1 / 1.05;
      position: relative;
      overflow: hidden;
      border-radius: 0.35rem;
      background: transparent;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -webkit-touch-callout: none;
    }

    @media (max-width: 720px) {
      .experience-hero-mini-gl {
        display: block;
      }
    }

    .experience-hero-mini-gl canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -webkit-touch-callout: none;
      /* Let vertical scroll pass to the page; horizontal intent is decided in JS after a small slop. */
      touch-action: pan-y;
    }

    .content-section {
      margin-bottom: clamp(3rem, 8vh, 5rem);
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .content-section:last-child {
      border-bottom: none;
      margin-bottom: 4rem;
    }

    h1,
    h2,
    h3 {
      font-family: var(--font-heading);
      font-size: var(--font-size-heading);
      font-style: normal;
      font-weight: 800;
    }

    h1 {
      margin: 0 0 1rem;
      line-height: 1.15;
    }

    h2 {
      margin: 0 0 1rem;
    }

    p {
      color: var(--muted);
      margin: 0 0 1rem;
      font-size: var(--font-size-body);
    }

    .loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      color: var(--muted);
      z-index: 1;
    }

    /* Above fixed WebGL; high z-index so dev HUD stays usable */