/* Ignite Marketplace — public marketing home. Built on tokens.css + base.css.
   Self-contained: brand colors come from the --bc-* tokens, icons are inline
   SVG, the only assets are the four images in ../img/. */

.ig-home { --ig-choose-bg: #0e1620; background: var(--bc-white); }
.ig-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.ig-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .7em 1.4em; border-radius: 999px; font-weight: 700; font-size: .95rem; line-height: 1; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.ig-btn--lg { padding: .95em 2em; font-size: 1.05rem; }
.ig-btn--primary { background: var(--bc-primary); color: var(--bc-white); box-shadow: 0 6px 18px rgba(255, 102, 0, .32); }
.ig-btn--primary:hover { background: var(--bc-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 102, 0, .4); }
/* Top-nav CTA: flat, no glow (resting or hover). */
.ig-nav .ig-btn--primary, .ig-nav .ig-btn--primary:hover { box-shadow: none; }
.ig-btn--white { background: var(--bc-white); color: var(--bc-dark); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.ig-btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .26); color: var(--bc-primary); }

/* ── Nav ────────────────────────────────────────────────────────────── */
.ig-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: transform .32s cubic-bezier(.2, .7, .2, 1), background .25s ease, box-shadow .25s ease, padding .25s ease; padding: 10px 0; }
.ig-nav--hidden { transform: translateY(-100%); }
.ig-nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.ig-home-logo img { height: 38px; width: auto; display: block; }
.ig-nav.scrolled { background: rgba(46, 58, 71, .92); backdrop-filter: blur(8px); box-shadow: 0 2px 16px rgba(0, 0, 0, .25); padding: 6px 0; }
.ig-nav-actions { display: flex; align-items: center; gap: 14px; }
.ig-nav-mobile-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; border: none; background: none; cursor: pointer; }
.ig-nav-mobile-toggle span { display: block; height: 2.5px; width: 22px; margin: 0 auto; border-radius: 2px; background: var(--bc-white); transition: transform .2s ease, opacity .2s ease; }
.ig-nav-mobile-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.ig-nav-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.ig-nav-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Mobile-only stand-in for the nav's CTA, which the max-width:860px block
   below tucks into the hamburger dropdown — too easy to miss for a CTA this
   important, so pin a copy to the bottom of the viewport instead. */
.ig-mobile-cta { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────── */
/* One continuous sky behind the first two sections: a single position:fixed
   layer (composited once — no per-frame repaint like background-attachment:
   fixed), revealed by the transparent hero + finale and covered by every later
   (opaque) section. Seamless and smooth, desktop and mobile. */
.ig-sky { position: fixed; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(28, 37, 46, .92) 0%, rgba(28, 37, 46, .7) 42%, rgba(28, 37, 46, .35) 100%), var(--bc-dark) url("../img/ignite-hero.92fe6f332ea4.jpg") center / cover no-repeat; }
.ig-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: var(--bc-white); background: transparent; }
.ig-hero-inner { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 120px 24px 80px; display: flex; align-items: center; gap: 32px; }
.ig-hero-text { flex: 1 1 60%; max-width: 660px; }
.ig-hero-logo { height: clamp(84px, 11vw, 132px); width: auto; max-width: 100%; margin-bottom: 28px; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); }
.ig-hero h1 { color: var(--bc-white); font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin: 0; text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.ig-accent { color: var(--bc-primary); }
.ig-hero-feats { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 22px 0 0; padding: 0; }
.ig-hero-feats li { position: relative; padding: 0 20px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.ig-hero-feats li:first-child { padding-left: 0; }
.ig-hero-feats li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; background: rgba(255, 255, 255, .34); }
.ig-hero-sub { margin-top: 22px; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.55; color: rgba(255, 255, 255, .9); }
/* First-scroll dissolve: the hero copy blurs, lifts, and fades out fast — done within
   the first third of the hero's scroll (--p * 3.2), so it's whipped away like smoke as
   the pig drops. --p is the hero scroll progress (0→1) set by home.js. */
.ig-hero-text {
  --d: min(1, calc(var(--p, 0) * 3.2));
  opacity: calc(1 - var(--d));
  transform: translateY(calc(var(--d) * -64px)) scale(calc(1 - var(--d) * .06));
  filter: blur(calc(var(--d) * 16px));
  transform-origin: left center;
  will-change: opacity, transform, filter;
}
@media (prefers-reduced-motion: reduce) {
  .ig-hero-text { opacity: 1; transform: none; filter: none; }
}
.ig-hero-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
/* Watch control — squared off rather than another pill, so it reads as a video
   affordance next to the nav's pill CTA instead of competing with it. */
.ig-watch { display: inline-flex; align-items: center; gap: 13px; padding: 11px 20px 11px 13px;
  border-radius: var(--radius-sm); cursor: pointer; font: inherit; text-align: left;
  color: var(--bc-white); background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease; }
.ig-watch:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.ig-watch__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--bc-primary); color: var(--bc-white); }
.ig-watch__icon svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ig-watch:hover .ig-watch__icon svg { transform: translateY(2px); }
.ig-watch__label { display: flex; flex-direction: column; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.ig-watch__time { font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

/* ── Explainer (inline player) ──────────────────────────────────────── */
/* z-index 7 lifts it over the fixed travelling Iggy (z 6), so he passes behind
   the video; the section itself stays transparent so the sky shows around it. */
.ig-explainer { position: relative; z-index: 7; padding: 40px 24px 140px; }
.ig-explainer__inner { max-width: 1100px; margin: 0 auto; }
.ig-explainer-head { margin-bottom: 32px; }
.ig-explainer .ig-section-title { color: var(--bc-white); text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.ig-player { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08); }
.ig-player__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.ig-player:not([data-mode="live"]) .ig-player__video { cursor: pointer; }
.ig-player__play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: none; cursor: pointer;
  background: linear-gradient(180deg, rgba(8, 12, 18, .05), rgba(8, 12, 18, .35)); }
.ig-player__play-icon { display: grid; place-items: center; width: clamp(72px, 9vw, 108px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bc-primary); color: var(--bc-white); box-shadow: 0 12px 36px rgba(255, 102, 0, .45); transition: transform .2s ease; }
.ig-player__play:hover .ig-player__play-icon { transform: scale(1.07); }
.ig-player__play-icon svg { width: 42%; height: 42%; margin-left: 6%; }
.ig-player__sound { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--bc-white); background: rgba(8, 12, 18, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease; }
.ig-player__sound:hover { background: rgba(8, 12, 18, .82); }
.ig-player__sound svg { width: 18px; height: 18px; }
.ig-player:not([data-mode="idle"]) .ig-player__play,
.ig-player:not([data-mode="preview"]) .ig-player__sound { display: none; }
@media (max-width: 700px) { .ig-explainer { padding: 24px 16px 96px; } }
.ig-hero-pig { flex: 0 1 40%; display: grid; place-items: center; }
.ig-pig-hero { width: min(420px, 38vw); height: auto; filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .45)); }
.ig-hero-bottom-bar { position: relative; z-index: 2; background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); border-top: 1px solid rgba(255, 255, 255, .12); }
.ig-hero-bottom-bar p { max-width: 1160px; margin: 0 auto; padding: 16px 24px; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .85); }
.ig-hero-bottom-bar strong { color: var(--bc-white); }

@keyframes ig-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(2deg); } }

/* ── Find Your Next Deal — discovery showcase ────────────────────────── */
/* Scroll into the light: home.js ramps --lit 0→1 as the section enters, so the
   whole section transitions from the dark sections around it to clean white,
   and the big frameless screenshots rise into place. */
/* Lands on the dashboard's own off-white (--bc-light), not pure white, so the
   chapter reads like the product. No top shadow — the white must be seamless
   with the cover panel that hands off into it. */
.ig-deals { position: relative; background: color-mix(in srgb, var(--bc-light) calc(var(--lit, 0) * 100%), #101922); }
/* Pinned header band — pins under the nav and fades out below the title, so the
   cards scroll beneath it. Its backing crossfades dark→white with the section. */
.ig-deals-rail { position: sticky; top: 0; z-index: 4; height: 214px; margin-bottom: -214px; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, #fff calc(var(--lit, 0) * 100%), #101922) 0%, color-mix(in srgb, #fff calc(var(--lit, 0) * 100%), #101922) 78%, transparent 100%); }
.ig-chapter { position: absolute; left: 0; right: 0; top: 74px; padding: 0 24px; }
/* Orange accent bar under the chapter title (scoped so other section titles are unaffected). */
.ig-chapter .ig-section-title::after { content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 2px; background: var(--bc-primary); }
.ig-qs { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 60px 24px; }
/* First panel clears the pinned title; the rest sit evenly beneath it. */
.ig-deals-rail + .ig-qs { padding-top: 248px; }

/* Role toggle in the pinned header — hover/tap to switch; the copy below adapts.
   Glassy so it reads over both the dark (entering) and light (settled) header. */
.ig-role { position: relative; z-index: 6; display: flex; width: max-content; margin: 20px auto 0; padding: 5px; border-radius: 999px; pointer-events: auto;
  background: color-mix(in srgb, #7c8894 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-dark) calc(var(--lit, 0) * 18%), rgba(255, 255, 255, .28));
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 12px 32px -16px rgba(16, 25, 34, .5); }
.ig-role__thumb { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--bc-primary);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--bc-primary) 70%, transparent);
  transition: transform .34s cubic-bezier(.34, .1, .2, 1), width .34s cubic-bezier(.34, .1, .2, 1); }
.ig-role__tab { position: relative; z-index: 1; border: none; background: none; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; padding: 9px 22px; border-radius: 999px;
  color: color-mix(in srgb, var(--bc-dark) calc(var(--lit, 0) * 70%), rgba(255, 255, 255, .7)); transition: color .2s ease; }
.ig-role__tab.is-active { color: #fff; }

/* Persona-swapped copy in the discovery trio (JS flips [data-persona] on the section). */
[data-deals][data-persona="brand_owner"] .ig-when[data-when="licensee"],
[data-deals][data-persona="licensee"] .ig-when[data-when="brand_owner"] { display: none; }
.ig-when { animation: ig-when-in .34s ease both; }
@keyframes ig-when-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ig-role__thumb { transition: none; } .ig-when { animation: none; } }
.ig-qs__inner { position: relative; width: 100%; max-width: 1400px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ig-qs__index { display: block; text-align: left; font-size: .95rem; font-weight: 700; letter-spacing: .3em; color: var(--accent); opacity: .9; margin-bottom: 14px; }
.ig-qs__inner--step { max-width: 540px; text-align: center; }
/* Step panels — centered node + body (the old connecting timeline is gone). */
.ig-qs--step .ig-step-node { margin: 0 auto 22px; width: 66px; height: 66px; font-size: 1.5rem; }
.ig-qs--step .ig-step-body { padding-top: 0; }
.ig-qs--step .ig-step-body h3 { font-size: 1.55rem; margin: 0 0 10px; color: var(--bc-white); }
.ig-qs--step .ig-step-body p { margin: 0 auto; max-width: 42ch; color: rgba(255, 255, 255, .72); line-height: 1.6; }
.ig-section-title { text-align: center; font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--bc-dark); letter-spacing: -.02em; margin: 0; }
.ig-section-subtitle { text-align: center; max-width: 640px; margin: 12px auto 0; color: var(--bc-gray); font-size: 1.05rem; line-height: 1.55; }
.ig-section--dark .ig-section-title { color: var(--bc-white); }
.ig-section--dark .ig-section-subtitle { color: rgba(255, 255, 255, .68); }
/* Deals title crossfades with the light transition (white on dark → dark on white). */
.ig-deals .ig-section-title { color: color-mix(in srgb, var(--bc-dark) calc(var(--lit, 0) * 100%), #ffffff); }

/* Editorial eyebrow (no pills) — a short orange rule + a letter-spaced label. */
.ig-eyebrow { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 15px; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bc-primary); }
.ig-eyebrow::before, .ig-eyebrow::after { content: ""; width: 26px; height: 2px; background: var(--bc-primary); border-radius: 2px; }

/* ── Categories — browser-framed media slots on a dark showcase ─────── */
.ig-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 50px; }
.ig-cat--have { --accent: #4f86c6; }
.ig-cat--need { --accent: #ff7a1a; }
.ig-cat--match { --accent: #2e9e6b; }
/* Frameless media — the screenshot IS the visual, on a rich soft shadow. */
/* overflow visible so the map callouts can spill past the box; the image itself
   is clipped/rounded by .ig-cat-shot below. */
.ig-cat-frame { position: relative; border-radius: 20px; background: #0e1620; box-shadow: 0 54px 104px -36px rgba(16, 25, 34, .52), 0 14px 34px -16px rgba(16, 25, 34, .3); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.ig-qs__inner:hover .ig-cat-frame { transform: translateY(-6px); box-shadow: 0 70px 126px -36px rgba(16, 25, 34, .6), 0 20px 44px -20px rgba(16, 25, 34, .34); }
.ig-cat-shot { position: relative; aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 16px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, #eef2f6), #f7f9fb 74%); border-radius: 20px; overflow: hidden; }
.ig-cat-watermark { width: 76px; height: 76px; color: var(--accent); opacity: .5; }
.ig-cat-soon { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 62%, #45525f); }
/* Uniform box across all three cards; images fill it via cover (crop to fit). */
/* Wide box shaped to the screenshots; contain so the whole shot shows, uniform across cards. */
.ig-cat-shot--img { display: block; padding: 0; background: #0e1620; aspect-ratio: 17 / 10; }
.ig-cat-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Footprints (card 2): a slight rightward nudge; box bg matches the shot's own
   dimmed-page edge so the tiny revealed strip is seamless. Pins shift with it. */
.ig-cat--need .ig-cat-shot--img { background: #a5acb4; }
.ig-cat--need .ig-cat-img,
.ig-cat--need .ig-note-layer { transform: translateX(0.5%); }
/* Match (card 3): zoom in a touch on the centered matcher card. */
.ig-cat--match .ig-cat-img { transform: scale(1.3); }

/* Footsteps walking across the footprints card — decorative, staggered, loops.
   Each step is the footprint asset tinted via mask; alternating feet + gait. */
.ig-fp-trail { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ig-fp-step {
  position: absolute; left: var(--x); top: var(--y); width: 24px; height: 46px;
  transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--flip, 1));
  background: var(--accent, #ff7a1a);
  -webkit-mask: url("../img/footprint-step.d3e4e1f11e64.png") center / contain no-repeat;
  mask: url("../img/footprint-step.d3e4e1f11e64.png") center / contain no-repeat;
  opacity: 0; animation: fp-walk 5s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes fp-walk { 0%, 100% { opacity: 0; } 9% { opacity: .4; } 62% { opacity: .4; } 80% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ig-fp-step { animation: none; opacity: .26; } }
/* Screenshot annotations — leader lines from colored countries out to labels.
   Coords are % of the screenshot (inline on each element) — nudge to taste. */
.ig-note-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ig-note-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig-note-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc((1 - var(--e, 1)) * 100); }
.ig-note-line--want { stroke: var(--bc-primary); }
.ig-note-line--have { stroke: var(--bc-dark); }
.ig-note-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%) scale(calc(.4 + var(--e, 1) * .6)); box-shadow: 0 0 0 4px rgba(255, 255, 255, .6); opacity: var(--e, 1); }
.ig-note-dot--want { background: var(--bc-primary); }
.ig-note-dot--have { background: var(--bc-dark); }
.ig-note { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; background: #fff; font-size: .82rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 10px 26px rgba(16, 25, 34, .32); transform: translate(-50%, calc(-50% + (1 - var(--e, 1)) * 18px)) scale(calc(.82 + var(--e, 1) * .18)); opacity: calc(var(--e, 1) * var(--e, 1)); }
.ig-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ig-note--want { color: color-mix(in srgb, var(--bc-primary) 88%, #000); }
.ig-note--want::before { background: var(--bc-primary); }
.ig-note--have { color: var(--bc-dark); }
.ig-note--have::before { background: var(--bc-dark); }
.ig-cat-text { display: flex; flex-direction: column; align-items: flex-start; }
.ig-cat-text h3 { margin: 0; font-size: clamp(1.5rem, 2.7vw, 2.05rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; color: color-mix(in srgb, var(--bc-dark) calc(var(--lit, 0) * 100%), #ffffff); }
.ig-cat-text p { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.55; max-width: 40ch; color: color-mix(in srgb, var(--bc-dark) calc(var(--lit, 0) * 100%), rgba(255, 255, 255, .62)); }
.ig-cat-text .ig-cat-browse { margin-top: 24px; }
.ig-cat-browse { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ig-cat-browse svg { width: 15px; height: 15px; transition: transform .18s ease; }
.ig-qs__inner:hover .ig-cat-browse svg { transform: translateX(4px); }

/* ── How it works — vertical timeline (no cards) ────────────────────── */
.ig-steps { position: relative; list-style: none; max-width: 600px; margin: 52px auto 0; padding: 0; }
.ig-steps-line { position: absolute; left: 26px; top: 16px; bottom: 16px; width: 3px; background: rgba(65, 83, 100, .15); border-radius: 2px; }
.ig-steps-line span { display: block; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--bc-primary), #ff9d4d); transform-origin: 0 0; }
.ig-step { position: relative; display: flex; align-items: flex-start; gap: 24px; padding-bottom: 44px; }
.ig-step:last-child { padding-bottom: 0; }
.ig-step-node { flex: none; position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--bc-primary); color: var(--bc-white); font-weight: 700; font-size: 1.3rem; box-shadow: 0 8px 22px rgba(255, 102, 0, .38); }
.ig-step-body { padding-top: 7px; }
.ig-step-body h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; color: var(--bc-dark); }
.ig-step-body p { margin: 0; max-width: 46ch; color: var(--bc-text); line-height: 1.6; }

/* ── Choose your side — full-height interactive split ───────────────── */
/* Transparent so it arrives on the fixed .ig-sky: the pinned stage ends by
   sliding its card back down to uncover the sky, and this section continues on
   that same sky (the split panels below carry their own gradients). */
/* Bottom layer of the pinned viewport (z 1, under the cover at z 3). It never
   moves: the card slides off it, wiping it clear from the bottom up, so the panels
   are already composed when they appear instead of scrolling in.
   Tied to --white: it slots in underneath exactly when the card turns white, which
   is behind an opaque panel so the fade itself is never seen. Before that it must
   be absent, or it shows through the open sky during the finale. */
.ig-choose { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--ig-choose-bg);
  opacity: var(--white, 0); pointer-events: none; }
.ig-white .ig-choose { pointer-events: auto; }
.ig-choose-head { text-align: center; padding: 64px 24px 28px; }
.ig-choose-split { position: relative; flex: 1; display: flex; min-height: 0; }
/* Iggy stands on the seam; each panel's copy is nudged outward so nothing sits
   under him and the two options read as flanking him. */
.ig-choose-iggy { position: absolute; z-index: 3; left: 50%; bottom: 3%; transform: translateX(-59.5%);  /* -59.5%, not -50%: the cape flares left so the art's visual mass sits at
     59.5% of its width. Centring the box left the pig reading right of the seam. */
  width: clamp(240px, 26vw, 430px); height: auto; pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .42)); }
.ig-side--brand .ig-side-inner { margin-right: clamp(40px, 8vw, 170px); }
.ig-side--licensee .ig-side-inner { margin-left: clamp(40px, 8vw, 170px); }
.ig-side { position: relative; flex: 1 1 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 56px 7vw 84px; color: var(--bc-white); text-decoration: none; transition: flex-grow .5s cubic-bezier(.4, 0, .2, 1), filter .5s ease; }
.ig-side--brand { background: radial-gradient(120% 110% at 28% 18%, #ff9248, transparent 58%), linear-gradient(150deg, var(--bc-primary), #a83700); }
.ig-side--licensee { background: radial-gradient(120% 110% at 72% 18%, #3c5067, transparent 58%), linear-gradient(150deg, #2a3a47, #121b23); }
/* The seam has to stay put under Iggy, so hover no longer re-weights the split —
   the other side just recedes. */
.ig-choose-split:hover .ig-side { filter: brightness(.62) saturate(.85); }
.ig-choose-split:hover .ig-side:hover { filter: none; }
.ig-side-inner { position: relative; z-index: 1; max-width: 430px; }
.ig-side-icon { width: 54px; height: 54px; margin-bottom: 22px; color: var(--bc-white); }
.ig-side-icon svg { width: 100%; height: 100%; }
.ig-side-kicker { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; opacity: .82; margin-bottom: 11px; }
.ig-side h3 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 16px; color: var(--bc-white); }
.ig-side p { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0 0 28px; max-width: 38ch; }
.ig-side-go { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.02rem; }
.ig-side-go svg { width: 18px; height: 18px; transition: transform .2s ease; }
.ig-side:hover .ig-side-go svg { transform: translateX(6px); }
.ig-side-watermark { position: absolute; right: -34px; bottom: -34px; width: 300px; height: 300px; color: var(--bc-white); opacity: .08; pointer-events: none; }

/* ── When Pigs Fly — pinned scroll stage ──────────────────────────────
   A tall section whose inner pins to the viewport: you scroll but stay in place
   while it plays — Iggy hangs in open sky → the payoff line fades in → a navy
   screen layers up over the sky → the BrandComply stat types out. home.js sets
   --sky / --cover (0→1) from scroll progress; the sky is transparent so the
   fixed .ig-sky shows through. */
/* Tall: hosts the finale AND the discovery chapter in one continuous pin. Long on
   purpose — more scroll distance per beat = slower, more deliberate pacing. */
.ig-stage { position: relative; height: 1050vh; }
.ig-stage__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 7; }
.ig-stage__line { position: absolute; left: 0; right: 0; top: 60%; padding: 0 24px; text-align: center; opacity: var(--sky, 0); transform: translateY(calc((1 - var(--sky, 0)) * 26px)); }
/* Desktop pairs the line with the travelling .ig-iggy hovering above it; mobile
   skips that flight animation (see the max-width:980px block below), so this
   static stand-in is mobile-only. */
.ig-stage__pig { display: none; }

/* Navy cover — slides up over the sky, then holds while the line types out. */
/* A rounded LIQUID-GLASS card that rises over the sky (bottom-sheet style) — frosted
   and translucent so the sky (and Iggy) stay visible behind it; no outer haze. Its z
   sits above Iggy (via the pinned parent) so the card slides over him while he stays
   solid. Words are our navy on the frosted glass. */
/* Full-screen navy card; --white ramps the WHOLE panel navy→white during the finale,
   so all visible space changes colour, not just the text. */
/* --cover rises it up over the sky (finale); --exit then slides the whole card
   (with the discovery content that rides on it) back UP and out at the very end. */
/* ONE composited layer for the whole card. Everything that moves lives here and
   nothing about it repaints: transform only, promoted once. A straight vertical
   slide, not a 3D tilt — a rotateX/Z-push exit foreshortened the card unevenly,
   so its corners cleared the choose panels underneath before its center did,
   showing both at once mid-exit. Geometry is static: animating border-radius or
   scale() repaints/re-rasters a full-screen element every frame, which is what
   made this lag. */
.ig-stage__card {
  position: absolute; inset: 0; z-index: 3;
  transform: translateY(calc((1 - var(--cover, 0)) * 100% - var(--exit, 0) * 100%));
  will-change: transform;
}

.ig-cover {
  --cover-face: color-mix(in srgb, var(--bc-light) calc(var(--white, 0) * 100%), #101922);
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: var(--cover-face);
  /* All static: an animated shadow here was 75% of the exit's paint cost. The
     downward one sits off-screen while the card is seated, so it appears by
     itself as the card lifts — depth for free. */
  box-shadow: inset 0 2px 0 color-mix(in srgb, #fff 26%, transparent),
              0 -30px 60px -26px rgba(0, 0, 0, .6),
              0 44px 68px -22px rgba(0, 0, 0, .55);
}
.ig-cover__inner { position: relative; z-index: 2; max-width: 900px; padding: 40px 24px; text-align: center; }
.ig-cover__mark { height: clamp(30px, 3.8vw, 46px); width: auto; margin: 0 auto 32px; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); }
/* Logo + favicon line fade out during the rise ("everything else fades"), set by JS. */
.ig-cover__mark, .ig-cover__badge { opacity: calc(1 - var(--fade, 0)); }
/* Ignite lockup — animates in beneath the risen phrase (JS drives opacity/transform). */
.ig-cover__ignite { display: block; margin: 30px auto 0; height: clamp(42px, 6.5vw, 84px); width: auto; opacity: 0; will-change: transform, opacity; }
.ig-cover__typed { position: relative; margin: 0; font-size: clamp(1.35rem, 3.3vw, 2.55rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--bc-white); }
/* The sentence types char-by-char; then the finale (JS) fades the lead-in while the
   trailing question rises + turns orange as a unit, then the panel crosses to white. */
.ig-cl { display: inline-block; }
/* Promote the phrase once, not all ~85 letters: per-letter will-change was
   holding 85 compositor layers for an animation that runs once. */
.ig-cover__typed { will-change: transform, opacity; }
/* Words never split across a line; breaks land only on the spaces between them. */
.ig-word { display: inline-block; white-space: nowrap; }
.ig-sp { white-space: pre; }
/* The trailing question, held on one line so it stays straight as it lifts. */
.ig-rise { display: inline-block; white-space: nowrap; will-change: transform, opacity; }
/* The sizer holds the full sentence (hidden) so the block never resizes as it types —
   the logo above stays fixed. The live text overlays it in the same box. */
.ig-cover__sizer { visibility: hidden; }
.ig-cover__live { position: absolute; inset: 0; }
.ig-caret { display: inline-block; width: 3px; height: 1.05em; margin-left: 5px; vertical-align: -0.15em; background: var(--bc-primary); animation: ig-caret 1.05s step-end infinite; }
@keyframes ig-caret { 50% { opacity: 0; } }
.ig-cover__badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 34px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.ig-cover__badge img { width: 20px; height: 20px; border-radius: 5px; }

/* ── Iggy the mascot ──────────────────────────────────────────────────── */
.pig { position: relative; display: inline-block; line-height: 0; }
.pig__img { position: relative; z-index: 1; display: block; height: auto; }
.ig-hero-pig .pig { animation: ig-float 5s ease-in-out infinite; }
/* The travelling Iggy — hidden by default; only desktop-motion (.ig-iggy-fly, added by
   JS) shows it, fixed and JS-driven from the hero spot down into the stage's sky spot.
   It lives top-level (outside any transformed ancestor) so `fixed` tracks the viewport.
   Mobile / reduced-motion keep the static hero pig instead. */
.ig-iggy { display: none; }
.ig-iggy-fly .ig-iggy { display: block; position: fixed; top: 0; left: 0; z-index: 6; width: min(400px, 36vw); pointer-events: none; will-change: transform, opacity; transform: translate(74vw, 46vh) translate(-50%, -50%); }
.ig-iggy .pig, .ig-iggy .pig__img { width: 100%; }
.ig-iggy .pig { animation: ig-float 5s ease-in-out infinite; }
.ig-iggy-fly .ig-hero-pig { visibility: hidden; }
/* Planted nameplate — stays level in the hero (desktop) and does NOT follow Iggy; it
   scrolls away naturally with the hero. */
.ig-iggy-name { display: none; }
.ig-iggy-fly .ig-iggy-name { display: block; position: absolute; z-index: 3; left: 74%; top: 63%; transform: translateX(-50%); text-align: center; line-height: 1.15; pointer-events: none; }

/* Mascot nameplate — clean, legible over the dark sky */
.pig-name { display: block; position: relative; z-index: 2; margin-top: 10px; text-align: center; line-height: 1.15; }
.pig-name__title { display: block; font-weight: 700; font-size: 1.42rem; color: var(--bc-white); letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.pig-name__role { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--bc-primary); }
.pig-name__role::before, .pig-name__role::after { content: ""; width: 14px; height: 1.5px; border-radius: 2px; background: var(--bc-primary); opacity: .65; }
.ig-finale-title { font-size: clamp(2.4rem, 6.2vw, 4.4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; margin: 0; color: var(--bc-white); text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.ig-finale-title span { color: var(--bc-primary); }
.ig-eyebrow--light { color: rgba(255, 255, 255, .85); }
.ig-eyebrow--light::before { background: var(--bc-white); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.ig-footer { background: #1c252e; color: #ffffff; padding: 48px 0 32px; }
.ig-footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ig-footer-logo { height: 40px; width: auto; }
.ig-footer-brand p { margin: 0; max-width: 420px; color: #fff; }
.ig-footer-bottom { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; font-size: .85rem; }
/* Target the <p> directly — a global `p { color: var(--bc-text) }` in base.css
   overrides color inherited from the wrapper, which is why this read gray. */
.ig-footer-bottom p { margin: 0; color: #ffffff; }

/* ── Scroll engine ──────────────────────────────────────────────────── */
/* Driven by home.js (rAF, passive). Every frame it writes scroll-linked
   custom properties: --ig-progress on the bar, --p (0→1 through the hero)
   for parallax, and --e (0→1) on each scrubbed element below. */
.ig-home { scroll-behavior: smooth; }

/* Top progress bar — fills as you scroll the page. */
.ig-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--ig-progress, 0)); background: var(--bc-primary); box-shadow: 0 0 14px rgba(255, 102, 0, .65); }

/* Hero parallax — content drifts and fades as the hero scrolls away. */
.ig-hero-inner { will-change: transform; transform: translateY(calc(var(--p, 0) * 90px)); }
.ig-pig-hero { will-change: transform; }

/* Hero scroll cue — a mouse glyph that invites the scroll, fades on first move. */
.ig-scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 94px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 14px; display: grid; justify-items: center; padding-top: 7px; opacity: calc(1 - var(--p, 0) * 6); transition: opacity .15s linear; }
.ig-scroll-cue span { width: 4px; height: 9px; border-radius: 2px; background: var(--bc-white); animation: ig-cue 1.7s ease-in-out infinite; }
@keyframes ig-cue { 0% { opacity: 0; transform: translateY(-5px); } 35% { opacity: 1; } 70% { opacity: 0; transform: translateY(9px); } 100% { opacity: 0; } }

/* Scroll-attached reveals. home.js writes --e (0→1) onto each element every
   frame, mapped to how far it has travelled through the viewport. There's no
   transition: the transform IS the scroll position, so it scrubs both ways. */
.ig-scrub { opacity: var(--e, 0); will-change: transform, opacity; }
.ig-scrub--up { transform: translateY(calc((1 - var(--e, 0)) * 60px)); }
.ig-scrub--left { transform: translateX(calc((1 - var(--e, 0)) * -72px)); }
.ig-scrub--right { transform: translateX(calc((1 - var(--e, 0)) * 72px)); }
.ig-scrub--scale { transform: perspective(1000px) translateY(calc((1 - var(--e, 0)) * 56px)) rotateX(calc((1 - var(--e, 0)) * 14deg)) scale(calc(.9 + var(--e, 0) * .1)); transform-origin: 50% 100%; }
/* Whole-block slide-up: the choose panels rise into the open sky as the stage hands off. */
.ig-scrub--rise { transform: translateY(calc((1 - var(--e, 0)) * 120px)) scale(calc(.985 + var(--e, 0) * .015)); }
/* Vertical timeline: the connecting line fills top→bottom with scroll, each
   node scales up as it activates, and each step's body slides in from the
   right. Scoped to the JS-added classes so no-JS visitors see it all static. */
.ig-scrub--line { transform: scaleY(var(--e, 0)); }
.ig-scrub--step { opacity: 1; }
.ig-scrub--step .ig-step-node { transform: scale(calc(.5 + var(--e, 0) * .5)); }
.ig-scrub--step .ig-step-body { opacity: var(--e, 0); transform: translateX(calc((1 - var(--e, 0)) * 28px)); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ig-scroll-cue { display: none; }
  .ig-cat-grid { grid-template-columns: 1fr; }
  .ig-qs { min-height: auto; }
  .ig-qs__inner { grid-template-columns: 1fr; gap: 26px; }
  .ig-qs__index { text-align: left; }
  .ig-steps { max-width: 520px; }
  .ig-steps-line { left: 23px; }
  .ig-step { gap: 18px; }
  .ig-step-node { width: 48px; height: 48px; font-size: 1.15rem; }
  .ig-hero-inner { flex-direction: column; text-align: center; padding-top: 104px; }
  .ig-hero-feats, .ig-hero-ctas { justify-content: center; }
  .ig-hero-pig { order: -1; }
  .ig-pig-hero { width: min(280px, 64vw); }
  .ig-choose { position: static; inset: auto; min-height: 100vh; opacity: 1; pointer-events: auto; }
  .ig-choose-split { flex-direction: column; }
  .ig-side { flex: none; min-height: 62vh; padding: 48px 28px 56px; }
  /* Stacked: same trick as desktop (Iggy floats over the seam instead of
     sitting in flow between the panels) so the two panels butt up against
     each other with no gap. In flow, even with a negative margin, the image's
     own transparent padding around the character left a visible strip of the
     dark .ig-choose background between the panels. */
  .ig-choose-iggy { position: absolute; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(220px, 52vw); margin: 0; }
  .ig-side--brand .ig-side-inner, .ig-side--licensee .ig-side-inner { margin-left: 0; margin-right: 0; }
  .ig-choose-split:hover .ig-side, .ig-choose-split:hover .ig-side:hover { flex-grow: 0; filter: none; }

  .ig-nav-mobile-toggle { display: flex; }
  .ig-nav-actions { position: absolute; top: 100%; right: 16px; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; background: rgba(46, 58, 71, .97); backdrop-filter: blur(8px); border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
  .ig-nav--open .ig-nav-actions { opacity: 1; transform: none; pointer-events: auto; }

  /* Reserve room at the foot of the page so the fixed bar below never covers
     the last of the real content (esp. the footer). */
  .ig-home { padding-bottom: 88px; }
  .ig-mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(28, 37, 46, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
    transition: transform .25s ease;
  }
  .ig-mobile-cta .ig-btn { display: flex; width: 100%; }
  /* Don't stack this on top of the hamburger's own open dropdown, which offers
     the same link. */
  .ig-nav--open ~ .ig-mobile-cta { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ig-pig-hero, .ig-scroll-cue span, .ig-hero-pig .pig, .ig-stage__pig { animation: none; }
  .ig-scrub { opacity: 1 !important; transform: none !important; }
  .ig-scrub--line { transform: scaleY(1) !important; }
  .ig-hero-inner { transform: none; }
  .ig-hero-text { opacity: 1; }
  .ig-hero-pig { transform: none; opacity: 1; }
  .ig-scroll-cue { opacity: 1; transform: translateX(-50%); }
  /* Stage plays as a static stack (no pin, cover down, line shown, fully typed). */
  .ig-stage { height: auto; }
  .ig-stage__pin { position: static; height: auto; min-height: 100vh; }
  .ig-stage__card { position: static; transform: none; }
  .ig-cover { position: static; box-shadow: none; border-radius: 0; }
  .ig-iggy .pig { animation: none; }
}

/* ── Discovery chapter — pinned scroll-in-place, dashboard-flavoured ────
   One tall section whose inner pins to the viewport. A persistent glass card
   (left) carries the step copy; the right stage morphs across three live
   scenes — a rendered profile with pop-in callouts, the real world map being
   configured country-by-country, and the footprint matcher resolving matches.
   home.js drives it all from pinned scroll progress. */
/* The discovery overlay lives INSIDE the stage pin, layered on the white cover.
   It stays invisible through the finale, then home.js fades --show in as the white
   lands — so it emerges on the white in place, never a separate section. Its
   content reads dark-on-white, so pin --lit to 1 locally. */
.ig-disco { position: absolute; inset: 0; z-index: 2; --lit: 1; opacity: var(--show, 0); pointer-events: none; }
.ig-disco.is-live { pointer-events: auto; }
.ig-disco__mark { position: absolute; z-index: 6; top: 30px; right: 42px; height: clamp(24px, 2.8vw, 38px); width: auto; opacity: var(--show, 0); pointer-events: none; }
/* Left copy narrow so the right side gets the room; the profile/map/matcher run big.
   Wide container + generous gap so the two columns breathe well apart. */
.ig-disco__grid { position: relative; z-index: 1; height: 100%; max-width: 1520px; margin: 0 auto; padding: 80px 52px 48px; display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: clamp(48px, 6vw, 112px); align-items: center; }

/* Left glass card — the dashboard recipe, verbatim. */
.ig-disco__card { position: relative; align-self: center; display: flex; flex-direction: column; gap: 22px; padding: 32px 30px; border-radius: 22px;
  background: var(--glass-card-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-card-shadow);
  background: color-mix(in srgb, var(--surface) 94%, var(--bc-light)); }
.ig-disco__card .ig-role { margin: 0; }
.ig-disco__steps { position: relative; min-height: 208px; }
.ig-dstep { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.ig-dstep.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ig-dstep__num { font-size: .9rem; font-weight: 700; letter-spacing: .3em; color: var(--bc-primary); margin-bottom: 14px; }
.ig-dstep h3 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.ig-dstep p { margin: 14px 0 0; font-size: 1.02rem; line-height: 1.56; color: var(--bc-text); }
.ig-disco__rail { display: flex; gap: 9px; }
.ig-disco__dot { width: 26px; height: 5px; padding: 0; border: none; border-radius: 3px; cursor: pointer; background: color-mix(in srgb, var(--bc-dark) 22%, transparent); transition: width .35s cubic-bezier(.2, .7, .2, 1), background .35s ease; }
.ig-disco__dot.is-on { width: 42px; background: var(--bc-primary); }

/* Right stage — scenes stacked, only the active one shown. Tall, so the embedded
   profile reads at real size rather than a cramped thumbnail. pointer-events:none
   so the scenes are purely visual: their inner scroll containers (e.g. the matcher
   card's .swm__body, which sets overscroll-behavior:contain) can't trap the wheel
   and block the page scroll. The left card stays interactive for the toggle/dots. */
.ig-disco__show { position: relative; height: min(760px, 86vh); pointer-events: none; }
/* Inactive scenes are taken out of rendering, not just faded. Two of the three
   are always idle, and they hold the heavy DOM (each footprint map is ~350 SVG
   paths) — leaving them visible meant they re-rastered along with the card on
   every frame of the 3D exit. visibility flips after the fade, so nothing pops. */
.ig-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.955); pointer-events: none; visibility: hidden;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .5s; }
.ig-scene.is-on { opacity: 1; transform: none; visibility: visible;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
/* Map + matcher focus in (blur clears) as they take the stage — a premium settle.
   The profile scene is intentionally excluded (heavy DOM — blur there can jank). */
.ig-scene--match { filter: blur(8px); }
.ig-scene--map, .ig-scene--match { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .55s ease; }
.ig-scene--match.is-on { filter: blur(0); }
/* Belt-and-suspenders: neutralise the embedded components' own scroll containers so
   they can never capture the wheel / block the page (esp. .swm__body's
   overscroll-behavior: contain). */
/* The card body scrolls in the product, but this scene takes no pointer events —
   so it's clipped, and feathered at the fold so the cut reads as deliberate
   rather than guillotining a row of text mid-line. */
.ig-disco__show .swm__body { overflow: hidden !important; overscroll-behavior: auto !important;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
  mask: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); }

/* ── Scene 0 — a brand profile, hardcoded (markup in home.html) ──────────
   Built from the live profile's own classes so it matches the product exactly;
   these rules only refit it for the frame and replace the behaviour that
   profile-owner.js used to supply. */
.ig-scene--profile { overflow: visible; }
.ig-pframe { position: relative; width: 100%; height: 100%; display: grid; align-content: center; }
/* The profile's cards are translucent glass — they need the app's own opaque
   page behind them, or the sky bleeds through and the text washes out. That
   backing is also what makes the scene read as the real product on screen. */
.ig-pframe .bp { text-align: left; overflow: hidden; padding: 0 14px 16px; background: var(--bc-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }

/* The app shell gives .profile-hero negative margins and a tall pad; inside the
   frame it's the top band of that page instead. */
.ig-pframe .profile-hero { margin: 0 -14px; min-height: 0; padding: 30px 26px 28px; }
.ig-pframe .profile-hero-cover__img { object-position: 50% 62%; }
.ig-pframe .profile-hero-logo { width: 84px; height: 84px; border-radius: var(--radius-md); }
.ig-pframe .profile-hero-name { font-size: 1.42rem; }
.ig-pframe .profile-hero-tagline { font-size: .92rem; font-style: italic; }
.ig-pframe .profile-layout-3col { padding: 14px 0 0; grid-template-columns: 225px minmax(0, 1fr) 195px; gap: 14px; }
.ig-pframe .profile-col--left, .ig-pframe .profile-col--right { position: static; }
/* No backdrop-filter here: .bp behind them is opaque, so the blur samples a
   flat colour and changes nothing — it was 10 live blurs during scroll. */
.ig-pframe .profile-card { margin-bottom: 14px; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: color-mix(in srgb, var(--surface) 92%, var(--bc-light)); }
.ig-pframe .profile-col > .profile-card:last-child { margin-bottom: 0; }
.ig-pframe .profile-card-header { padding: 11px 15px; font-size: 13px; }
.ig-pframe .profile-card-body { padding: 13px 15px; }
.ig-pframe .bp-prose { font-size: .85rem; }
.ig-pframe .bp-specs { grid-template-columns: 1fr 1fr; gap: 12px; }
.ig-pframe .bp-specs--stack { grid-template-columns: 1fr; }
.ig-pframe .bp-spec__v { font-size: .95rem; }

/* profile-owner.js drove the marquee with rAF; nothing runs here, so the track
   animates in CSS. Each tile owns its right margin, so one copy is exactly half
   the track and the wrap at -50% is seamless. */
.ig-pframe .bp-marq { margin: 0 -15px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* No horizontal padding: it would widen the track without widening a copy, so
   -50% would overshoot and the loop would visibly jump. */
.ig-pframe .bp-marq__track { padding: 4px 0; animation: ig-marq 34s linear infinite; }
@keyframes ig-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ig-pframe .bp-marq .bp-wall__item { width: 218px; cursor: default; }
/* Captions normally reveal on hover, but the scene takes no pointer events —
   so they stay up, over a scrim that keeps them legible on pale product shots. */
.ig-pframe .bp-wall__cap { opacity: 1; padding: 11px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.ig-pframe .bp-wall__type { font-size: .72rem; }
.ig-pframe .bp-wall__name { font-size: .92rem; }
.ig-pframe .bp-wall__name::after { transform: scaleX(1); }

/* Cover photos vary in brightness (Ohio State's campus, Beta Blaze's sky), and
   hero text is always light — a scrim between the two keeps it readable. */
.ig-pframe .profile-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .3)); }

/* Beta Blaze's one product: a roster row, not a cropped banner. Its art is a
   transparent cutout, so it needs containing rather than cover. */
.ig-pframe .bp-prow { padding: 4px 0; border-bottom: none; cursor: default; }
.ig-pframe .bp-prow__media { width: 118px; }
.ig-pframe .bp-prow__media img { object-fit: contain; padding: 8px; }

/* The real world map inside the footprint cards, cropped to the inhabited band —
   what gets cut is empty ocean, the far north and Antarctica. The base `path`
   rule also resets app.css's demo country fills. Countries paint by id here
   because nothing runs the JS that would add cov- classes; "both" uses the
   #ig-cov-both stripe declared in home.html. */
.ig-fpmap { margin: -6px -15px -8px; height: 262px; overflow: hidden; }
.ig-fpmap .worldmap { display: block; width: 100%; height: auto; margin: -22px auto 0; }
.ig-fpmap .worldmap path { fill: color-mix(in srgb, var(--bc-dark) 13%, var(--surface)); stroke: var(--surface); stroke-width: .4; }

/* Ohio State — licensed across Canada, seeking in Mexico and continental Europe,
   both at home in the US. Island paths ride with their mainland so no country
   comes out moth-eaten. */
.ig-fpmap--osu .worldmap :is([id="canada"], [id="baffin"], [id="victoria"], [id="ellesmere"],
  [id="banks"], [id="devon"], [id="axel heiberg"], [id="southhampton"], [id="newfoundland"], [id="vancouver"], [id="prince of wales"], [id="bylot"], [id="bathurst"],
  [id="cornwallis"], [id="prince patrick"], [id="britain"], [id="ulster"], [id="ireland"]) { fill: var(--bc-dark); }

.ig-fpmap--osu .worldmap :is([id="mexico"], [id="france"], [id="spain"], [id="portugal"],
  [id="germany"], [id="netherlands"], [id="belgium"], [id="switzerland"], [id="austria"],
  [id="italy"], [id="sicily"], [id="sardinia"], [id="corsica"], [id="majorca"], [id="denmark"],
  [id="sjælland"], [id="sweden"], [id="gotland"], [id="norway"], [id="finland"], [id="poland"],
  [id="czech"], [id="slovakia"], [id="hungary"], [id="slovenia"], [id="croatia"], [id="bosnia"],
  [id="serbia"], [id="montenegro"], [id="albania"], [id="macedonia"], [id="romania"],
  [id="bulgaria"], [id="greece"], [id="crete"], [id="estonia"], [id="lithuania"],
  [id="malta"]) { fill: var(--bc-primary); }

.ig-fpmap--osu .worldmap :is([id="usa"], [id="alaska-westcopy"], [id="hawaii"], [id="oahu"],
  [id="kauai"], [id="kahului"], [id="puerto rico"]) { fill: url(#ig-cov-both); }

/* Beta Blaze — a licensee running almost everywhere: the Americas, western Europe
   and east Asia covered, EMEA and south-east Asia expanding. */
.ig-fpmap--blaze .worldmap :is([id="usa"], [id="alaska-westcopy"], [id="hawaii"], [id="oahu"], [id="kauai"],
  [id="kahului"], [id="canada"], [id="baffin"], [id="victoria"], [id="ellesmere"], [id="banks"],
  [id="devon"], [id="axel heiberg"], [id="southhampton"], [id="newfoundland"], [id="vancouver"],
  [id="britain"], [id="ulster"], [id="ireland"], [id="france"], [id="spain"], [id="portugal"],
  [id="germany"], [id="netherlands"], [id="belgium"], [id="switzerland"], [id="austria"],
  [id="italy"], [id="sicily"], [id="sardinia"], [id="poland"], [id="czech"], [id="denmark"],
  [id="sjælland"], [id="sweden"], [id="norway"], [id="finland"], [id="china"], [id="hainan"],
  [id="taiwan"], [id="honshu"], [id="hokkaido"], [id="kyushu"], [id="shikoku"], [id="south korea"],
  [id="australia"], [id="tasmania"], [id="new zealand north island"],
  [id="new zealand south island"]) { fill: var(--bc-dark); }

.ig-fpmap--blaze .worldmap :is([id="russia"], [id="kazakhstan"], [id="ukraine"], [id="belarus"],
  [id="romania"], [id="bulgaria"], [id="greece"], [id="crete"], [id="serbia"], [id="bosnia"],
  [id="croatia"], [id="slovenia"], [id="slovakia"], [id="hungary"], [id="moldova"], [id="estonia"],
  [id="lithuania"], [id="argentina"], [id="chile"], [id="colombia"], [id="peru"], [id="venezuela"],
  [id="ecuador"], [id="bolivia"], [id="paraguay"], [id="uruguay"], [id="guatemala"],
  [id="honduras"], [id="nicaragua"], [id="costa rica"], [id="panama"], [id="cuba"],
  [id="domincan republic"], [id="haiti"], [id="jamaica"], [id="saudi"], [id="emirates"],
  [id="oman"], [id="qatar"], [id="kuwait"], [id="iraq"], [id="iran"], [id="syria"], [id="jordan"],
  [id="israel"], [id="lebanon"], [id="yemen"], [id="cyprus"], [id="egypt"], [id="morocco"],
  [id="algeria"], [id="tunisia"], [id="libya"], [id="sudan"], [id="ethiopia"], [id="kenya"],
  [id="tanzania"], [id="uganda"], [id="nigeria"], [id="ghana"], [id="ivoire"], [id="senegal"],
  [id="mali"], [id="niger"], [id="chad"], [id="cameroon"], [id="angola"], [id="mozambique"],
  [id="madagascar"], [id="namibia"], [id="botswana"], [id="zambia"], [id="zimbabwe"],
  [id="thailand"], [id="vietnam"], [id="cambodia"], [id="laos"], [id="burma"], [id="malaysia"],
  [id="east malaysia"], [id="java"], [id="sumatra"], [id="kalimantan"], [id="sulawesi"],
  [id="luzon"], [id="samar"], [id="negros"], [id="cebu"], [id="mindoro"], [id="palawan"],
  [id="pakistan"], [id="bangladesh"], [id="sri lanka"], [id="nepal"], [id="mongolia"],
  [id="afghanistan"], [id="uzbekistan"], [id="turkmenistan"], [id="tajikistan"],
  [id="kirgizstan"], [id="azerbaijan"], [id="armenia"], [id="georgia"],
  [id="papua new guinea"]) { fill: var(--bc-primary); }

.ig-fpmap--blaze .worldmap :is([id="mexico"], [id="brazil"], [id="india"], [id="turkey"],
  [id="thrace"], [id="south africa"], [id="lesotho"], [id="swaziland"],
  [id="drc"]) { fill: url(#ig-cov-both); }

.ig-pop { position: absolute; z-index: 4; padding: 9px 14px; border-radius: 12px; font-size: .82rem; font-weight: 700; white-space: nowrap; color: #fff; background: var(--bc-dark); box-shadow: var(--shadow-lift);
  opacity: var(--e, 0); transform: translateY(calc((1 - var(--e, 0)) * 12px)) scale(calc(.9 + var(--e, 0) * .1)); transition: opacity .12s linear; }
.ig-pop::after { content: ""; position: absolute; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.ig-pop--a { top: 4%; left: -4%; } .ig-pop--a::after { bottom: -4px; left: 22px; }
.ig-pop--b { top: 44%; right: -6%; background: var(--bc-primary); } .ig-pop--b::after { top: -4px; right: 26px; }
.ig-pop--c { bottom: 2%; left: 8%; } .ig-pop--c::after { top: -4px; left: 30px; }

/* Scene 1 — the real world map, configured live. */
.ig-scene--map { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ig-map { position: relative; width: min(920px, 100%); }
.ig-map .worldmap { width: 100%; height: auto; display: block; }
/* Real product coverage colours: have = slate (--bc-dark), want = orange
   (--bc-primary), both = the diagonal stripe pattern injected by home.js. */
.ig-map .worldmap path { fill: color-mix(in srgb, var(--bc-dark) 12%, var(--surface)); stroke: var(--surface); stroke-width: .4; transition: fill .28s cubic-bezier(.22, .61, .36, 1); }
.ig-map .worldmap path.cov-have { fill: var(--bc-dark); }
.ig-map .worldmap path.cov-want { fill: var(--bc-primary); }
.ig-map .worldmap path.cov-both { fill: url(#cov-both); }
.ig-map .worldmap .cov-both-a { fill: var(--bc-dark); }
.ig-map .worldmap .cov-both-b { fill: var(--bc-primary); }
.ig-map__legend { display: flex; gap: 22px; }
.ig-map__key { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; color: var(--bc-dark); }
.ig-map__key i { width: 13px; height: 13px; border-radius: 4px; }
.ig-map__key--have i { background: var(--bc-dark); }
.ig-map__key--want i { background: var(--bc-primary); }
/* Matches the diagonal stripe the map paints "both" countries with. */
.ig-map__key--both i { background: linear-gradient(135deg, var(--bc-dark) 0 48%, var(--bc-primary) 48% 100%); }
.ig-map__key b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* Scene 2 — the real footprint matcher (.swm/.swipe from app.css). Here the deck
   is inline (not the overlay), and home.js shuffles the stack on scroll: cards are
   absolutely stacked so the depth-behind + slide-off reads like the live swiper. */
.ig-scene--match { overflow: visible; }
.ig-scene--match .swipe { width: min(470px, 100%); gap: 20px; }
.ig-scene--match .swipe__stack { position: relative; height: min(640px, 76vh); }
.ig-scene--match .swm { position: absolute; inset: 0; height: 100%; }
/* .swipe__deck carries no rules on this branch — the markup arrived ahead of its
   CSS, so the deck collapsed to its content width (16px) and took the whole card
   stack down with it. Give it the width app.css gives .swipe__stack. */
.ig-scene--match .swipe__deck { position: relative; width: 100%; }
.ig-scene--match .swipe__act { cursor: default; }
/* ── Reach-out sequence ──────────────────────────────────────────────────
   One card, no filler behind it. Step 2 plays: the like lands, this panel
   slides up over the card, the note types itself, then it confirms.
   --msg (0→1) is written by home.js; only transform/opacity move. */
.ig-scene--match .swipe__act--match.is-hit {
  background: var(--bc-primary-hover); border-color: var(--bc-primary-hover);
  transform: scale(1.08); }
.ig-scene--match .swipe__act--match { transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease, border-color .18s ease; }

/* Clips the panel to the card's bounds so it rises out of the card's own bottom
   edge instead of flying in from the scene below it. A wrapper rather than
   overflow on .swipe__stack, which would also clip the card's drop shadow. */
.ig-msg-clip { position: absolute; inset: 0; z-index: 5; overflow: hidden;
  border-radius: var(--radius-lg); pointer-events: none; }
.ig-msg { position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 10px; padding: 15px 17px 16px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface); border: 1px solid var(--bc-light-gray); border-bottom: none;
  box-shadow: 0 -18px 40px -22px rgba(20, 30, 40, .45);
  transform: translateY(calc((1 - var(--msg, 0)) * 105%));
  opacity: var(--msg, 0); will-change: transform; }
.ig-msg__bar { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--bc-gray); }
.ig-msg__to b { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .86rem; }
.ig-msg__body { min-height: 3.4em; }
.ig-msg__text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--bc-text); }
.ig-msg__caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--bc-primary); }
.ig-msg__foot { display: flex; justify-content: flex-end; }
.ig-msg__send { padding: 8px 20px; border-radius: var(--radius-sm); background: var(--bc-primary); color: var(--bc-white);
  font-size: .86rem; font-weight: 700; transition: transform .12s ease, background .12s ease; }
.ig-msg__send.is-pressed { transform: scale(.94); background: var(--bc-primary-hover); }
/* Confirmation takes the panel over once it is sent. */
.ig-msg__sent { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: inherit; background: var(--surface); color: var(--success);
  font-size: .95rem; font-weight: 700; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.ig-msg__sent svg { width: 20px; height: 20px; }
.ig-msg.is-sent .ig-msg__sent { opacity: 1; }
.ig-msg.is-sent .ig-msg__body, .ig-msg.is-sent .ig-msg__bar, .ig-msg.is-sent .ig-msg__foot { opacity: 0; transition: opacity .15s ease; }

/* Iggy inspecting the match. Sits in the empty gutter left of the 470px card and
   is sized to stop short of it, so he never overlaps the content. */
/* One mascot per step, same treatment, placed per scene. The matcher's card is
   narrow so he uses the gutter; the profile and map fill their scene, so those two
   sit in genuinely empty space inside it. */
.ig-match-iggy, .ig-profile-iggy, .ig-map-iggy {
  position: absolute; z-index: 4; height: auto; pointer-events: none;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .3)); }
.ig-match-iggy   { left: -8%;   bottom: 5%; width: clamp(140px, 14vw, 230px); }
.ig-profile-iggy { left: 1.5%;  bottom: 9%; width: clamp(120px, 11.5vw, 190px); }
/* bottom 21%, not lower: the map's legend sits under it and he collided with
   it at 1280px, the narrowest width where he shows at all. */
.ig-map-iggy     { left: -4%;   bottom: 21%; width: clamp(130px, 12vw, 205px); }
/* Below ~1250px none of them have room — the matcher's gutter is narrower than he
   is, and the other two scenes have no spare space at all. */
@media (max-width: 1249px) { .ig-match-iggy, .ig-profile-iggy, .ig-map-iggy { display: none; } }
/* Card 1's two persona variants: display:contents so their children stay direct
   flex items of .swm (a real wrapper would become the flex item and break the
   card's layout). The persona hide rule still wins over this. */
.ig-scene--match .swm > .ig-when { display: contents; }
/* Accent lives here, not inline, so the persona rule can override it. */
.ig-scene--match .swm--first { --a: #ff6c0e; }
[data-deals][data-persona="licensee"] .ig-scene--match .swm--first { --a: #cd1446; }
/* The hero band is a thin slice of a tall photo — bias it down to the lit lawn and
   walkway rather than the dark canopy, which the white logo tile sits better against. */
[data-deals][data-persona="licensee"] .ig-scene--match .swm--first .swm__hero img { object-position: 50% 78%; }

/* Mobile + reduced-motion: unpin the whole stage and lay finale → discovery out as
   a normal stacked, scrolling page (the overlay/scroll-hijack is desktop-only). */
@media (max-width: 980px) {
  .ig-stage { height: auto; }
  /* DOM order is authored for the desktop pin: ig-choose sits first because it's
     the layer the card slides off to reveal (see .ig-choose's own comment). Flex
     + order puts the stacked page back in reading order — finale line, then the
     cover/discovery card, then the choose-your-side panels. */
  .ig-stage__pin { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; }
  /* Same order as the line (1): ties among flex items fall back to DOM order,
     and the pig sits right before the line in the markup, so it renders
     directly above it — no wrapper needed. */
  .ig-stage__pig { order: 1; display: block; width: min(200px, 50vw); height: auto; margin: 48px auto 4px;
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .4)); animation: ig-float 5s ease-in-out infinite; }
  .ig-stage__line { order: 1; position: static; top: auto; padding: 0 24px 88px; opacity: 1; transform: none; }
  .ig-stage__card { order: 2; position: static; transform: none; }
  .ig-cover { position: static; border-radius: 0; min-height: 100vh; box-shadow: none; }
  .ig-choose { order: 3; position: static; inset: auto; min-height: 100vh; opacity: 1; pointer-events: auto; }
  /* On desktop this chapter sits on the same panel the cover finale turns
     white (see .ig-cover's --white ramp) — one continuous opaque backdrop.
     Stacked and static, .ig-disco no longer shares that panel, so without its
     own background the fixed .ig-sky shows through around the cards instead
     of the clean off-white section desktop shows. */
  .ig-disco { position: static; opacity: 1; transform: none; background: var(--bc-light); }
  .ig-disco__mark { display: none; }
  /* Desktop pairs a persistent left card (the 3 steps) with a right stage whose
     scene swaps to match whichever step is active. Flattened to one column that
     reads as two disconnected piles — every step, then every scene. Unwrap both
     containers (display:contents removes their own box but keeps their children
     in place) so each step and its matching scene become plain flex items of the
     same list, then interleave them with `order`: toggle, step 1 + its scene,
     step 2 + its scene, step 3 + its scene — the actual desktop narrative. */
  .ig-disco__grid { display: flex; flex-direction: column; align-items: stretch; padding: 60px 24px; gap: 14px; }
  .ig-disco__card { display: contents; }
  .ig-disco__steps { display: contents; }
  .ig-disco__show { display: contents; }
  .ig-disco__card .ig-role { order: 0; margin: 0 0 20px; }
  /* Each step's copy loses the shared glass-card backdrop once its wrapper is
     unwrapped — give it its own, so it still reads as a distinct block rather
     than bare text sitting in the flow next to its scene. */
  .ig-dstep { position: static; opacity: 1; transform: none;
    background: color-mix(in srgb, var(--surface) 94%, var(--bc-light));
    border-radius: 22px; padding: 26px 24px; }
  .ig-dstep[data-dstep="0"] { order: 1; }
  .ig-scene[data-scene="0"] { order: 2; margin-bottom: 30px; }
  .ig-dstep[data-dstep="1"] { order: 3; }
  .ig-scene[data-scene="1"] { order: 4; margin-bottom: 30px; }
  .ig-dstep[data-dstep="2"] { order: 5; }
  .ig-scene[data-scene="2"] { order: 6; }
  .ig-disco__rail { display: none; }
  /* relative, not static: each mascot below is `position: absolute`, and needs
     its own scene as the positioned ancestor it offsets against — static would
     hand that job to the page instead. */
  .ig-scene { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  .ig-scene--map, .ig-scene--match { filter: none; }
  .ig-pframe { height: auto; }
  /* Desktop parks these in the side gutter next to each scene; stacked full-width
     there's no gutter left, so re-anchor all three low enough to mostly clear
     the card into the gap below it (rather than hiding them, which is what the
     max-width:1249px rule above does for the in-between desktop widths that
     have neither the gutter nor this stacked layout). Mostly, not entirely: a
     small bite out of the card's own bottom padding is fine, but not enough to
     reach any real text above it. */
  .ig-match-iggy, .ig-profile-iggy, .ig-map-iggy {
    display: block; left: -10px; right: auto; top: auto; bottom: -46px; width: 72px; z-index: 4;
  }
  /* The map fills its whole scene edge to edge with no bottom padding to spare
     — the legend sits flush on the scene's own bottom edge — so anchoring from
     the bottom like the other two lands him on top of "Covered"/"Wanted" text.
     The map graphic's corners are open ocean, so perch him there instead. */
  .ig-map-iggy { left: -10px; top: -10px; bottom: auto; }
  .ig-pframe .profile-layout-3col { grid-template-columns: 1fr; }
  .ig-pframe .profile-hero-inner { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-disco { position: static; opacity: 1; transform: none; }
  .ig-disco__mark { display: none; }
  .ig-disco__grid { grid-template-columns: 1fr; }
  .ig-disco__show { height: auto; pointer-events: auto; }
  .ig-dstep, .ig-scene { position: static; opacity: 1; transform: none; }
  .ig-scene--map, .ig-scene--match { filter: none; }
  .ig-dstep + .ig-dstep, .ig-scene + .ig-scene { margin-top: 34px; }
  .ig-pframe { height: auto; }
  .ig-match-iggy { display: none; }
  .ig-pframe .profile-layout-3col { grid-template-columns: 1fr; }
  .ig-pframe .bp-marq__track { animation: none; }
}