/* styleAiFirstPop.css -- "A WORLD AI FIRST" stamp + pop-up on the home page (Chris, 18 Oct 2026).
   Markup homePageAssets/hn_ai_first_pop.php. Behaviour js/homePageNew.js (AI WORLD FIRST block).
   --bsm3-* values only (css/brand.css). Night look = the Sleep night colours already in brand.css.
   The pop-up sits UNDER the shared Before You Start pop-up (styleOnboardPop.css, z-index 100001). */

/* ---------- THE STAMP (on the video slides, top left, every slide, every screen) ---------- */
#bsm-hn .aif-stamp { position: absolute; top: var(--bsm3-space-xl); left: var(--bsm3-space-xl); z-index: 6; display: inline-flex; align-items: center; gap: var(--bsm3-space-sm); min-height: calc(var(--bsm3-icon-size-container) * 1.25); padding: var(--bsm3-space-sm) var(--bsm3-space-lg); border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-day); border-radius: var(--bsm3-radius-pills); background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-family: var(--bsm3-font-heading); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: var(--bsm3-section-label-tracking); white-space: nowrap; cursor: pointer; box-shadow: 0 0 var(--bsm3-space-lg) var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); animation: aif-pulse 3.2s ease-in-out infinite; transition: transform 0.2s ease; }
#bsm-hn .aif-stamp-star { color: var(--bsm3-logo-sleep-edge-use-on-logo); }
#bsm-hn .aif-stamp:hover { transform: translateY(calc(var(--bsm3-space-xs) * -0.5)); }
#bsm-hn .aif-stamp:focus-visible { outline: var(--bsm3-border-thick) solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); outline-offset: var(--bsm3-space-xs); }
@keyframes aif-pulse {
  0%, 100% { box-shadow: 0 0 var(--bsm3-space-md) var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); }
  50%      { box-shadow: 0 0 var(--bsm3-space-xxl) var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon); }
}

/* ---------- THE POP-UP ---------- */
body.aif-open { overflow: hidden; }
.aif-pop, .aif-pop *, .aif-pop *::before, .aif-pop *::after, #bsm-hn .aif-stamp { box-sizing: border-box; } /* widths include padding, so nothing pokes past the edge */
.aif-pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--bsm3-space-lg); font-family: var(--bsm3-font-body); }
.aif-pop.aif-hidden { display: none; }
.aif-pop::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--bsm3-color-black-000000-use-on-bg-sleep); opacity: var(--bsm3-opacity-high); }
.aif-pop p:not([class]) { display: contents; }
.aif-pop br { display: none; }

.aif-panel { position: relative; container-type: inline-size; width: 100%; max-width: var(--bsm3-width-wide); height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-night); border-radius: calc(var(--bsm3-radius-primary-cards) * 2); background-color: var(--bsm3-color-black-000000-use-on-bg-sleep); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); box-shadow: var(--bsm3-elevation-overlay-strong); animation: aif-in 0.5s ease; }
.aif-panel:focus { outline: none; }
@keyframes aif-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* background: video + three pillar glows drifting together */
/* the sky is one screen tall, stays put while the content scrolls, and clips the glows so nothing pokes out sideways */
.aif-sky { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; z-index: 0; }
.aif-sky-video, .aif-sky-shade, .aif-glow { position: absolute; }
.aif-sky-video { top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; object-fit: cover; opacity: var(--bsm3-opacity-low); }
.aif-sky-shade { top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; background: linear-gradient(180deg, var(--bsm3-transparent) 0%, var(--bsm3-color-black-000000-use-on-bg-sleep) 100%); opacity: var(--bsm3-opacity-medium); }
.aif-glow { width: calc(var(--bsm3-width-standard) * 1.2); height: calc(var(--bsm3-width-standard) * 1.2); border-radius: var(--bsm3-radius-pills); opacity: var(--bsm3-opacity-medium); filter: blur(calc(var(--bsm3-space-xxl) * 2)); }
.aif-glow-body  { top: calc(var(--bsm3-width-narrow) * -0.6); left: calc(var(--bsm3-width-narrow) * -0.5); background: radial-gradient(circle, var(--bsm3-logo-body-edge-use-on-logo) 0%, var(--bsm3-transparent) 70%); animation: aif-drift-a 18s ease-in-out infinite; }
.aif-glow-sleep { top: calc(var(--bsm3-width-narrow) * -0.3); left: 35%; background: radial-gradient(circle, var(--bsm3-logo-sleep-edge-use-on-logo) 0%, var(--bsm3-transparent) 70%); animation: aif-drift-b 22s ease-in-out infinite; }
.aif-glow-mind  { top: calc(var(--bsm3-width-narrow) * -0.6); right: calc(var(--bsm3-width-narrow) * -0.5); background: radial-gradient(circle, var(--bsm3-logo-mind-edge-use-on-logo) 0%, var(--bsm3-transparent) 70%); animation: aif-drift-c 20s ease-in-out infinite; }
@keyframes aif-drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18%, 12%); } }
@keyframes aif-drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6%, 16%); } }
@keyframes aif-drift-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18%, 12%); } }

/* sticky X that takes no width from the content (a float made a river down the right side) */
.aif-x { position: sticky; top: var(--bsm3-space-lg); z-index: 3; display: flex; align-items: center; justify-content: center; width: calc(var(--bsm3-icon-size-container) * 1.25); height: calc(var(--bsm3-icon-size-container) * 1.25); margin: var(--bsm3-space-lg) var(--bsm3-space-lg) calc(var(--bsm3-icon-size-container) * -1.25) auto; padding: 0; border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-day); border-radius: var(--bsm3-radius-pills); background-color: var(--bsm3-sleep-glass-bg-night); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; backdrop-filter: blur(var(--bsm3-space-sm)); }
.aif-x:focus-visible, .aif-btn:focus-visible { outline: var(--bsm3-border-thick) solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); outline-offset: var(--bsm3-space-xs); }

.aif-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--bsm3-space-xxl); padding: calc(var(--bsm3-space-xxl) * 1.5) var(--bsm3-space-lg) calc(var(--bsm3-space-xxl) * 1.5); } /* slim sides: no rivers of space beside the badges (Chris, 19 Oct 2026) */

/* 1. top */
.aif-hero { display: flex; flex-direction: column; align-items: center; gap: var(--bsm3-space-md); text-align: center; }
.aif-badge { display: inline-flex; align-items: center; gap: var(--bsm3-space-sm); padding: var(--bsm3-pill-chip-padding); border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-day); border-radius: var(--bsm3-radius-pills); background-color: var(--bsm3-sleep-glass-bg-night); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: 0.18em; text-transform: uppercase; }
.aif-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: min(var(--bsm3-size-page-title-24px-use-on-h1) * 1.9, 6cqi); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; /* one line, never wraps (Chris, 19 Oct 2026); the size shrinks with the pop-up width so it always fits */ }
.aif-shine { background: linear-gradient(90deg, var(--bsm3-logo-body-edge-use-on-logo), var(--bsm3-logo-sleep-edge-use-on-logo), var(--bsm3-logo-mind-edge-use-on-logo)); -webkit-background-clip: text; background-clip: text; color: var(--bsm3-transparent); }
.aif-lead { max-width: 52ch; margin: 0; color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1.5; }
.aif-strong { display: block; margin-top: var(--bsm3-space-sm); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }


/* section heads */
.aif-sec { display: flex; flex-direction: column; gap: var(--bsm3-space-xl); }
.aif-eyebrow { margin: 0; text-align: center; color: var(--bsm3-sleep-text-muted-night); font-family: var(--bsm3-font-heading); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: 0.24em; text-transform: uppercase; }

/* the AI inside: grounded line under the heading */

/* the team line, last on the page: under the suppliers, smaller letters */
.aif-team { margin: 0; text-align: center; color: var(--bsm3-sleep-text-muted-night); font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); line-height: 1.4; }

.aif-team-part { display: block; } /* each phrase on its own line, never split */

/* ACROSS EVERY GENRE: Grounded, then AI-Led Methodology, each on its own row */
.aif-across { display: flex; flex-direction: column; align-items: center; gap: var(--bsm3-space-md); }
.aif-across-label { color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: 0.24em; text-transform: uppercase; }
.aif-rules { display: grid; grid-template-columns: minmax(0, 1fr); /* each its own row, every device */ gap: var(--bsm3-space-md); width: 100%; }
.aif-rule { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); padding: var(--bsm3-space-lg); border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-day); border-radius: calc(var(--bsm3-radius-primary-cards) * 1.5); background-color: var(--bsm3-sleep-inner-bg-night); text-align: center; }
.aif-rule-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: clamp(var(--bsm3-size-sub-section-title-18px-use-on-h3), 2.4cqi, var(--bsm3-size-page-title-24px-use-on-h1) * 1.15); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1.1; }
.aif-rule-text { margin: 0; color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-medium-14px-use-on-text); line-height: 1.6; }

/* SWIPE DECK: one badge per slide + two rows of thumbnails */
.aif-deck { display: flex; flex-direction: column; gap: var(--bsm3-space-lg); }
.aif-deck-track { position: relative; display: flex; align-items: flex-start; gap: var(--bsm3-space-md); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; transition: height 0.35s ease; }
.aif-deck-track::-webkit-scrollbar { display: none; }
.aif-deck-track:focus-visible { outline: var(--bsm3-border-thick) solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); outline-offset: var(--bsm3-space-xs); }
.aif-slide { flex: 0 0 100%; display: flex; flex-direction: column; gap: var(--bsm3-space-lg); padding: var(--bsm3-space-xl); scroll-snap-align: start; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-night); border-radius: calc(var(--bsm3-radius-primary-cards) * 1.5); background-color: var(--bsm3-sleep-glass-bg-night); backdrop-filter: blur(var(--bsm3-space-sm)); }
.aif-slide.aif-tone-body  { border-color: var(--bsm3-logo-body-edge-use-on-logo); }
.aif-slide.aif-tone-sleep { border-color: var(--bsm3-logo-sleep-edge-use-on-logo); }
.aif-slide.aif-tone-mind  { border-color: var(--bsm3-logo-mind-edge-use-on-logo); }
.aif-slide.aif-tone-all   { border-color: var(--bsm3-sleep-border-day); }
.aif-slide-head { display: flex; align-items: center; gap: var(--bsm3-space-lg); }
.aif-slide-titles { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); min-width: 0; }
.aif-slide-count { color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.aif-slide-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: clamp(var(--bsm3-size-section-heading-22px-use-on-h2), 3cqi, var(--bsm3-size-page-title-24px-use-on-h1) * 1.3); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1.1; }
.aif-icon-box.aif-icon-box-big { width: calc(var(--bsm3-icon-size-container) * 1.6); height: calc(var(--bsm3-icon-size-container) * 1.6); border-radius: var(--bsm3-radius-primary-cards); }
.aif-icon-box-big .aif-icon { width: calc(var(--bsm3-icon-size-card) * 1.4); height: calc(var(--bsm3-icon-size-card) * 1.4); }
.aif-slide .aif-app-name { font-size: var(--bsm3-text-large-16px-use-on-text); }
.aif-slide .aif-app-text { font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1.6; }

.aif-para { margin: 0; color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-large-16px-use-on-text); line-height: 1.7; }
.aif-para-b { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.aif-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); /* 10 genres = two rows of five */ gap: var(--bsm3-space-sm); }
.aif-thumb { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--bsm3-space-xs); min-height: calc(var(--bsm3-icon-size-container) * 1.9); padding: var(--bsm3-space-sm) var(--bsm3-space-xs); border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-night); border-radius: var(--bsm3-radius-status-cards); background-color: var(--bsm3-sleep-glass-bg-night); color: var(--bsm3-sleep-text-muted-night); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); line-height: 1.2; text-align: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.aif-thumb .aif-icon { width: var(--bsm3-icon-size-card); height: var(--bsm3-icon-size-card); }
.aif-thumb.aif-tone-body .aif-icon  { color: var(--bsm3-logo-body-edge-use-on-logo); }
.aif-thumb.aif-tone-sleep .aif-icon { color: var(--bsm3-logo-sleep-edge-use-on-logo); }
.aif-thumb.aif-tone-mind .aif-icon  { color: var(--bsm3-logo-mind-edge-use-on-logo); }
.aif-thumb.aif-tone-all .aif-icon   { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
.aif-thumb-name { overflow-wrap: normal; } /* never split a word mid-way; long names use a 'short' label */
.aif-thumb:hover { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
.aif-thumb.aif-on { border-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); box-shadow: 0 0 var(--bsm3-space-lg) var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); }
.aif-thumb:focus-visible { outline: var(--bsm3-border-thick) solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); outline-offset: var(--bsm3-space-xs); }

/* second line under the AI Genres heading (Chris, 19 Oct 2026) */
#aif-pop .aif-eyebrow-sub { display: block; margin-top: var(--bsm3-space-xs); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); letter-spacing: normal; text-transform: none; }
/* beating down arrow after 'Click to learn' -- same arrow shape as the home page scroll arrow (Chris, 19 Oct 2026) */
#aif-pop .aif-beat-arrow { display: inline-block; vertical-align: middle; width: var(--bsm3-icon-size-card); height: var(--bsm3-icon-size-card); margin-left: var(--bsm3-space-xs); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); animation: aif-beat 1.2s ease-in-out infinite; }
@keyframes aif-beat {
  0%, 100% { transform: translateY(0) scale(1); }
  15%      { transform: translateY(calc(var(--bsm3-space-xs) * 0.75)) scale(1.25); }
  30%      { transform: translateY(0) scale(1); }
  45%      { transform: translateY(calc(var(--bsm3-space-xs) * 0.75)) scale(1.25); }
  60%      { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { #aif-pop .aif-beat-arrow { animation: none; } }

/* 3. built with */
.aif-built { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bsm3-space-md); } /* one row of three, every device */
.aif-built-tile { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); padding: var(--bsm3-space-xl); border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-night); border-radius: var(--bsm3-radius-primary-cards); background-color: var(--bsm3-sleep-glass-bg-night); text-align: center; }
.aif-built-name { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-page-title-24px-use-on-h1); font-weight: var(--bsm3-weight-bold-700-use-on-h1); }
.aif-built-by { display: block; color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }
.aif-built-did { color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-medium-14px-use-on-text); line-height: 1.5; }

/* 4. the AI inside */
.aif-apps { display: flex; flex-direction: column; gap: var(--bsm3-space-md); margin: 0; padding: 0; list-style: none; }
.aif-app { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); padding-top: var(--bsm3-space-md); border-top: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-night); }
.aif-app-name { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); }
.aif-app-text { color: var(--bsm3-sleep-text-muted-night); font-size: var(--bsm3-text-medium-14px-use-on-text); line-height: 1.55; }
.aif-icon-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--bsm3-icon-size-container); height: var(--bsm3-icon-size-container); border-radius: var(--bsm3-radius-status-cards); border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-night); }
.aif-icon { display: block; width: var(--bsm3-icon-size-card); height: var(--bsm3-icon-size-card); stroke-width: var(--bsm3-icon-stroke); }
.aif-tone-body  .aif-icon-box { color: var(--bsm3-logo-body-edge-use-on-logo); }
.aif-tone-sleep .aif-icon-box { color: var(--bsm3-logo-sleep-edge-use-on-logo); }
.aif-tone-mind  .aif-icon-box { color: var(--bsm3-logo-mind-edge-use-on-logo); }
.aif-tone-all   .aif-icon-box, .aif-icon-box.aif-tone-all { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
.aif-chips { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-xs); }
.aif-chip { display: inline-flex; align-items: center; gap: var(--bsm3-space-xs); padding: var(--bsm3-pill-chip-padding); border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-day); border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-tiny-10px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: 0.08em; text-transform: uppercase; }

/* 5. ending */
.aif-end { display: flex; flex-direction: column; align-items: center; gap: var(--bsm3-space-xl); text-align: center; }
.aif-end-line { margin: 0; font-family: var(--bsm3-font-heading); font-size: clamp(var(--bsm3-size-sub-section-title-18px-use-on-h3), 2.8cqi, var(--bsm3-size-page-title-24px-use-on-h1) * 1.4); font-weight: var(--bsm3-weight-bold-700-use-on-h1); line-height: 1.15; text-wrap: balance; }
.aif-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bsm3-space-md); }
.aif-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bsm3-space-sm); min-height: calc(var(--bsm3-icon-size-container) * 1.25); padding: var(--bsm3-space-md) var(--bsm3-space-xl); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-family: var(--bsm3-font-body); font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.aif-btn-main { background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
.aif-btn-main:hover { background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); }
.aif-btn-line { background-color: var(--bsm3-transparent); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
.aif-btn-line:hover { background-color: var(--bsm3-sleep-glass-bg-night); }

/* each part rises in, one after another (from a visible state on reduced motion) */
.aif-rise { animation: aif-rise 0.7s ease both; }
.aif-hero.aif-rise { animation-delay: 0.1s; }
.aif-sec .aif-rise:nth-child(1) { animation-delay: 0.45s; }
.aif-deck.aif-rise { animation-delay: 0.55s; }
@keyframes aif-rise { from { opacity: 0; transform: translateY(var(--bsm3-space-xl)); } to { opacity: 1; transform: translateY(0); } }

/* ---------- tablets ---------- */
@media (max-width: 860px) {
  .aif-body { padding: calc(var(--bsm3-space-xxl) * 2) var(--bsm3-space-lg) var(--bsm3-space-xxl); gap: calc(var(--bsm3-space-xxl) * 1.5); }
}

/* ---------- phones: stamp clear of the phone picture, pop-up FULL screen, one column, no video ---------- */
@media (max-width: 560px) {
  #bsm-hn .aif-stamp { top: var(--bsm3-space-lg); left: var(--bsm3-space-lg); padding: var(--bsm3-space-sm) var(--bsm3-space-md); font-size: var(--bsm3-text-small-12px-use-on-text); max-width: calc(100% - var(--bsm3-icon-size-container) * 3 - var(--bsm3-space-lg) * 3); }
  .aif-pop { padding: 0; }
  .aif-panel { max-width: none; border: 0; border-radius: 0; }
  .aif-sky-video { display: none; }
  .aif-glow { width: var(--bsm3-width-standard); height: var(--bsm3-width-standard); filter: blur(var(--bsm3-space-xxl)); }
  .aif-x { top: max(var(--bsm3-space-md), env(safe-area-inset-top, 0px)); margin: var(--bsm3-space-md) var(--bsm3-space-md) calc(var(--bsm3-icon-size-container) * -1.25) auto; }
  /* WIDE, minimal side margin on phones (Chris, 19 Oct 2026): the site's own phone margin */
  .aif-body { padding: calc(var(--bsm3-space-xxl) * 1.75) max(var(--bsm3-phone-margin-use-on-mobile-page-sides), env(safe-area-inset-right, 0px)) calc(var(--bsm3-space-xxl) + env(safe-area-inset-bottom, 0px)) max(var(--bsm3-phone-margin-use-on-mobile-page-sides), env(safe-area-inset-left, 0px)); gap: calc(var(--bsm3-space-xxl) * 1.25); }
  .aif-built { gap: var(--bsm3-phone-margin-use-on-mobile-page-sides); }
  .aif-built-tile { padding: var(--bsm3-space-md) var(--bsm3-space-sm); }
  .aif-built-name { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); }
  .aif-built-did { font-size: var(--bsm3-text-small-12px-use-on-text); }
  .aif-slide { padding: var(--bsm3-space-lg); }
  .aif-slide .aif-app-name, .aif-slide .aif-app-text, .aif-para { font-size: var(--bsm3-text-medium-14px-use-on-text); }
  .aif-thumbs { gap: var(--bsm3-space-xs); }
  .aif-thumb { padding: var(--bsm3-space-sm) 0; font-size: var(--bsm3-text-tiny-10px-use-on-text); }
  .aif-lead { font-size: var(--bsm3-text-large-16px-use-on-text); }
  .aif-btns { flex-direction: column; width: 100%; }
  .aif-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #bsm-hn .aif-stamp, .aif-panel, .aif-glow, .aif-rise { animation: none; }
  .aif-deck-track { scroll-behavior: auto; transition: none; }
  .aif-sky-video { display: none; }
}

/* ---------- TEXT COLOURS ON THE DARK POP-UP (Chris, 19 Oct 2026) ----------
   The site's own heading and button rules were turning these black on the dark background.
   #aif-pop in front makes these always win. */
#aif-pop .aif-title, #aif-pop .aif-slide-title, #aif-pop .aif-rule-title, #aif-pop .aif-end-line, #aif-pop .aif-built-name, #aif-pop .aif-app-name, #aif-pop .aif-para-b, #aif-pop .aif-strong, #aif-pop .aif-badge, #aif-pop .aif-chip { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
#aif-pop .aif-eyebrow, #aif-pop .aif-across-label, #aif-pop .aif-slide-count, #aif-pop .aif-lead, #aif-pop .aif-para, #aif-pop .aif-app-text, #aif-pop .aif-rule-text, #aif-pop .aif-built-by, #aif-pop .aif-built-did, #aif-pop .aif-team { color: var(--bsm3-sleep-text-muted-night); }
#aif-pop .aif-thumb { color: var(--bsm3-sleep-text-muted-night); background-color: var(--bsm3-sleep-glass-bg-night); }
#aif-pop .aif-thumb:hover, #aif-pop .aif-thumb.aif-on { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
#aif-pop .aif-thumb-name { color: inherit; }
#aif-pop .aif-shine { color: var(--bsm3-transparent); }