:root {
  --navy-950: #020913;
  --navy-900: #061B3A;
  --navy-850: #082249;
  --navy-800: #0B2D59;
  --blue: #0A84FF;
  --blue-a: #1685F8;
  --teal: #22C7B8;
  --cyan: #35D4E8;
  --orange: #F5A623;
  --purple: #B65CFA;
  --yellow: #F7D84A;
  --ink: #151922;
  --slate: #596273;
  --muted: #8791A2;
  --line: #DCE3EC;
  --surface: #FFFFFF;
  --surface-soft: #F5F8FC;
  --surface-mid: #EEF2F7;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 42px;
  --shadow-sm: 0 10px 30px rgba(5, 24, 52, 0.08);
  --shadow-md: 0 24px 70px rgba(5, 24, 52, 0.13);
  --shadow-lg: 0 36px 110px rgba(1, 9, 24, 0.34);
  --page: min(1460px, calc(100% - 48px));
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    linear-gradient(180deg, #05060f 0%, #070915 30%, #0a0b1c 55%, #080a17 80%, #060711 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: clip;
}
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -90px;
  z-index: 1000;
  background: white;
  color: var(--navy-900);
  padding: 12px 18px;
  border-radius: 12px;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ambient { position: absolute; border-radius: 999px; filter: blur(70px); pointer-events: none; opacity: .55; z-index: 0; }
.ambient-one { width: 380px; height: 380px; background: rgba(10,132,255,.36); top: 40px; left: -140px; }
.ambient-two { width: 460px; height: 460px; background: rgba(34,199,184,.24); top: 450px; right: -190px; }
.ambient-three { width: 330px; height: 330px; background: rgba(182,92,250,.16); top: 860px; left: 45%; }

.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.24);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}
.section-shell { width: var(--page); margin-inline: auto; position: relative; z-index: 1; }

.site-header { position: sticky; top: 0; z-index: 50; padding: 18px 0 0; }
.header-shell {
  width: var(--page);
  min-height: 78px;
  margin: 0 auto;
  padding: 10px 14px 10px 22px;
  border-radius: 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  background: rgba(4, 21, 47, .76);
  transition: transform .3s var(--ease), background .3s;
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; min-width: max-content; }
.brand img { width: 92px; height: 44px; object-fit: contain; }
.brand-copy { display: grid; color: white; line-height: 1.15; }
.brand-copy strong { font-size: .96rem; letter-spacing: .01em; }
.brand-copy small { margin-top: 4px; color: rgba(255,255,255,.58); font-size: .68rem; white-space: nowrap; }

.primary-nav { display: flex; align-items: center; justify-content: center; gap: 3px; }
.nav-link, .site-footer button {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transform: scaleX(0);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: #fff; }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); opacity: 1; }
.nav-link.is-active { color: #fff; }
.nav-link.is-active::after { transform: scaleX(1); opacity: 1; }

.header-actions { display: inline-flex; align-items: center; gap: 12px; justify-self: end; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 760;
  text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s, background .22s, border-color .22s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(53,212,232,.62); outline-offset: 3px; }
.button-primary { color: white; background: linear-gradient(135deg, var(--blue), var(--teal)); box-shadow: 0 12px 28px rgba(17,163,195,.28); }
.button-primary:hover { box-shadow: 0 17px 35px rgba(17,163,195,.38); }
.button-small { min-height: 48px; padding: 10px 17px; border-radius: 14px; font-size: .88rem; }
.button-quiet { background: rgba(255,255,255,.8); color: var(--navy-900); border-color: rgba(9,36,71,.12); box-shadow: var(--shadow-sm); }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.08); color: white; cursor: pointer; }

.hero { min-height: 780px; padding: 88px 0 86px; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(470px, .96fr); align-items: center; gap: 32px; color: white; }
.hero-copy { max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 850; color: var(--cyan); }
.eyebrow span { width: 30px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.hero h1 { margin: 22px 0 22px; font-size: clamp(3.45rem, 6vw, 6.9rem); line-height: .93; letter-spacing: -.065em; font-weight: 850; max-width: 900px; }
.hero h1 span { color: transparent; background: linear-gradient(90deg, var(--cyan), var(--teal) 45%, #7BE7BC); background-clip: text; -webkit-background-clip: text; }
.hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 660px; color: rgba(255,255,255,.72); margin: 0 0 30px; }

.search-panel { border-radius: 26px; padding: 10px; background: rgba(255,255,255,.1); position: relative; }
.search-field-wrap { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: rgba(255,255,255,.96); border-radius: 18px; padding: 8px 8px 8px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.search-icon { color: var(--blue); width: 24px; height: 24px; }
.search-field-wrap input { min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 1.05rem; padding: 12px 0; }
.search-field-wrap input::placeholder { color: #8C95A5; }
.analyze-button { min-height: 52px; padding-inline: 22px; }
.search-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 10px 2px; color: rgba(255,255,255,.55); font-size: .81rem; }
.search-footer button { color: rgba(255,255,255,.78); border: 0; background: transparent; cursor: pointer; padding: 3px 6px; border-radius: 8px; }
.search-footer button:hover { color: white; background: rgba(255,255,255,.08); }
.search-message { color: #FFD5D5; font-size: .88rem; margin: 7px 12px 0; min-height: 0; }
.suggestion-list { position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 60; border-radius: 20px; padding: 7px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, rgba(20,22,52,.97), rgba(11,12,34,.98)); color: #fff; box-shadow: 0 34px 90px rgba(4,4,16,.62), 0 2px 0 rgba(255,255,255,.05) inset; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(34px) saturate(150%); -webkit-backdrop-filter: blur(34px) saturate(150%); transform-origin: top center; animation: suggest-in .3s var(--ease-spring) both; }
.suggestion-list::-webkit-scrollbar { width: 8px; }
.suggestion-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
.suggestion-option { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; width: 100%; padding: 9px 11px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; color: #fff; transition: background .18s ease, box-shadow .18s ease; }
.suggestion-option:hover, .suggestion-option[aria-selected="true"] { background: rgba(255,255,255,.08); }
.suggestion-option[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(53,212,232,.4); }
.suggestion-cover { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: white; font-weight: 850; box-shadow: 0 8px 20px rgba(0,0,0,.42); background: linear-gradient(145deg, var(--blue), var(--navy-900)); }
.suggestion-option strong { display: block; font-size: .92rem; color: #fff; }
.suggestion-option small { display: block; color: rgba(255,255,255,.56); margin-top: 2px; font-size: .78rem; }
.suggestion-option > small { white-space: nowrap; color: rgba(255,255,255,.44); font-variant-numeric: tabular-nums; }
@keyframes suggest-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

.hero-trust-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero-trust-grid article { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.mini-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.09); color: var(--cyan); border: 1px solid rgba(255,255,255,.1); }
.hero-trust-grid strong { display: block; font-size: .86rem; }
.hero-trust-grid small { display: block; color: rgba(255,255,255,.48); font-size: .72rem; margin-top: 3px; }
.privacy-line { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: rgba(255,255,255,.52); font-size: .8rem; }
.privacy-line svg { color: var(--teal); }

.hero-visual { min-height: 630px; position: relative; display: grid; place-items: center; overflow: clip; border-radius: 44px; }
.hero-visual > img { width: 112%; max-width: none; transform: translateX(3%); filter: drop-shadow(0 40px 70px rgba(0,0,0,.32)); }
.visual-glow { position: absolute; width: 78%; aspect-ratio: 1; background: radial-gradient(circle, rgba(34,199,184,.28), transparent 68%); filter: blur(20px); }
.decision-card { position: absolute; width: 300px; right: -10px; top: 80px; padding: 22px; border-radius: 24px; background: rgba(4,18,42,.74); color: white; }
.decision-card-heading { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.shield-orb { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--cyan); background: rgba(53,212,232,.12); }
.decision-card-heading small { display: block; color: rgba(255,255,255,.54); font-size: .69rem; }
.decision-card-heading strong { display: block; font-size: .95rem; margin-top: 2px; }
.decision-card ul { list-style: none; padding: 12px 0 7px; margin: 0; display: grid; gap: 9px; }
.decision-card li { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: rgba(255,255,255,.78); }
.decision-card li svg { color: var(--teal); }
.decision-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.1); font-size: .73rem; color: rgba(255,255,255,.45); }
.decision-footer strong { color: white; }
.floating-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; color: white; background: rgba(7,28,60,.72); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 18px 42px rgba(0,0,0,.2); font-size: .77rem; font-weight: 750; backdrop-filter: blur(20px); }
.floating-chip svg { color: var(--cyan); }
.chip-one { left: 5%; bottom: 112px; }
.chip-two { right: 18%; bottom: 44px; }

.how-section { padding: 96px 0 92px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 34px; }
.section-heading.centered { display: block; text-align: center; max-width: 740px; margin: 0 auto 44px; }
.section-heading h2 { margin: 10px 0 0; font-size: clamp(2.3rem, 4vw, 4.5rem); line-height: 1.02; letter-spacing: -.05em; color: var(--navy-900); }
.section-heading > p, .section-heading > div + p, .section-heading.centered p { max-width: 590px; color: var(--slate); font-size: 1.05rem; margin: 12px 0 0; }
.section-heading .eyebrow { color: var(--blue); }
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.step-card { position: relative; min-height: 230px; padding: 23px; border-radius: 25px; background: rgba(255,255,255,.78); border: 1px solid rgba(9,36,71,.08); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step-number { position: absolute; right: 18px; top: 16px; color: #D1D9E5; font-size: 1.1rem; font-weight: 850; }
.step-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 42px; }
.step-icon svg { width: 25px; height: 25px; }
.step-blue { color: var(--blue); background: rgba(10,132,255,.12); }
.step-cyan { color: var(--teal); background: rgba(34,199,184,.13); }
.step-purple { color: var(--purple); background: rgba(182,92,250,.12); }
.step-orange { color: var(--orange); background: rgba(245,166,35,.14); }
.step-green { color: #17A874; background: rgba(23,168,116,.12); }
.step-card h3 { margin: 0 0 7px; color: var(--navy-900); font-size: 1.06rem; }
.step-card p { margin: 0; color: var(--slate); font-size: .88rem; }

.framework-section { padding: 88px 0 92px; }
.framework-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 17px; }
.framework-card { position: relative; min-height: 360px; overflow: hidden; padding: 26px; border-radius: 30px; color: white; box-shadow: var(--shadow-md); transition: transform .3s var(--ease), box-shadow .3s; }
.framework-card::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; bottom: -105px; background: rgba(255,255,255,.12); box-shadow: -35px -25px 0 rgba(255,255,255,.05); }
.framework-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(5,24,52,.22); }
.category-a { background: linear-gradient(155deg, #1B90FF, #0757CC 68%, #043C90); }
.category-b { background: linear-gradient(155deg, #2BC4B6, #0A8E89 68%, #086863); }
.category-c { background: linear-gradient(155deg, #F7B23D, #E7791F 68%, #B5520E); }
.category-d { background: linear-gradient(155deg, #C16FFF, #8F3ADD 68%, #6320A6); }
.category-e { background: linear-gradient(155deg, #4C86FF, #2563EB 68%, #1E3A8A); }
.category-top { display: flex; align-items: center; justify-content: space-between; }
.category-top > svg { width: 34px; height: 34px; opacity: .85; }
.category-letter { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 1.25rem; font-weight: 900; border: 1px solid rgba(255,255,255,.24); }
.framework-card h3 { margin: 40px 0 13px; max-width: 260px; font-size: 1.45rem; line-height: 1.12; letter-spacing: -.025em; }
.framework-card p { color: rgba(255,255,255,.74); font-size: .92rem; max-width: 280px; }
.framework-card button { position: absolute; left: 26px; bottom: 25px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; color: white; border: 0; background: transparent; padding: 6px 0; cursor: pointer; font-weight: 760; font-size: .86rem; }

.preview-section { padding: 94px 0 110px; }
.preview-window { display: grid; grid-template-columns: 300px 1fr; min-height: 690px; overflow: hidden; border-radius: 34px; background: rgba(255,255,255,.84); border-color: rgba(255,255,255,.75); box-shadow: 0 40px 100px rgba(6,27,58,.18); }
.preview-sidebar { background: linear-gradient(180deg, #061B3A, #0B2D59); padding: 25px; color: white; display: flex; flex-direction: column; }
.demo-cover { aspect-ratio: 4 / 4.9; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 25% 18%, rgba(53,212,232,.85), transparent 28%), linear-gradient(150deg, #0A84FF, #061B3A 58%, #22C7B8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 20px 40px rgba(0,0,0,.2); }
.demo-cover span { font-size: .78rem; letter-spacing: .14em; }
.demo-cover strong { font-size: 2rem; line-height: .95; margin: 10px 0; }
.demo-cover small { color: rgba(255,255,255,.58); }
.preview-meta { padding: 24px 3px 18px; }
.preview-meta > small { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .68rem; }
.preview-meta h3 { font-size: 1.13rem; line-height: 1.3; margin: 8px 0 20px; }
.preview-meta dl { display: grid; gap: 12px; margin: 0; }
.preview-meta dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 9px; }
.preview-meta dt { color: rgba(255,255,255,.44); }
.preview-meta dd { margin: 0; text-align: right; }
.preview-sidebar .button { margin-top: auto; }
.preview-main { min-width: 0; background: transparent; }
.preview-tabs { min-height: 70px; display: flex; align-items: center; gap: 4px; padding: 0 26px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.preview-tabs span { white-space: nowrap; padding: 11px 12px; color: var(--muted); font-size: .78rem; font-weight: 700; border-radius: 11px; }
.preview-tabs span.active { color: var(--blue); background: rgba(10,132,255,.09); }
.preview-content { padding: 34px; }
.preview-content-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.preview-content-head small { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .68rem; }
.preview-content-head h3 { margin: 4px 0 0; font-size: 2.3rem; letter-spacing: -.04em; color: var(--navy-900); }
.status-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #D7E6F1; background: #F3F8FB; padding: 8px 11px; border-radius: 999px; font-size: .73rem; color: var(--slate); }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(34,199,184,.12); }
.preview-content > p { color: var(--slate); max-width: 900px; }
.preview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 28px 0; }
.preview-stats > div { background: var(--surface-soft); border: 1px solid #E8EEF4; border-radius: 18px; padding: 18px; }
.preview-stats svg { color: var(--blue); }
.preview-stats strong { display: block; margin-top: 15px; font-size: 1.35rem; color: var(--navy-900); }
.preview-stats small { color: var(--slate); }
.preview-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-category { min-height: 180px; padding: 18px; border-radius: 20px; display: flex; flex-direction: column; color: white; }
.mini-category span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.18); font-weight: 900; }
.mini-category strong { margin-top: auto; line-height: 1.2; }
.mini-category small { margin-top: 7px; color: rgba(255,255,255,.65); }
.mini-a { background: linear-gradient(145deg, #1685F8, #0757CC); }
.mini-b { background: linear-gradient(145deg, #2BC4B6, #087E78); }
.mini-c { background: linear-gradient(145deg, #F5A623, #D76517); }
.mini-d { background: linear-gradient(145deg, #B65CFA, #7A2BC4); }

.report-app { padding: 70px 0 100px; }
.report-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 20px; }
.report-sidebar { position: sticky; top: 112px; padding: 20px; border-radius: 28px; color: white; background: linear-gradient(180deg, #061B3A, #092B58); box-shadow: var(--shadow-md); }
.report-cover { aspect-ratio: 4 / 4.8; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 21px; color: white; background: var(--cover, linear-gradient(145deg,#22C7B8,#061B3A)); position: relative; }
.report-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 26% 18%, rgba(255,255,255,.28), transparent 25%), linear-gradient(0deg, rgba(2,9,19,.72), transparent 65%); }
.report-cover > * { position: relative; }
.report-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.report-cover img + .cover-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,9,19,.88), rgba(2,9,19,.02) 65%); }
.report-cover small { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--cyan); }
.report-cover strong { font-size: 1.7rem; line-height: 1.02; margin-top: 8px; }
.report-game-info { padding: 21px 2px 10px; }
.report-game-info h2 { font-size: 1.16rem; line-height: 1.27; margin: 0 0 18px; }
.report-game-info dl { display: grid; gap: 10px; margin: 0; }
.report-game-info dl > div { display: grid; grid-template-columns: 86px 1fr; gap: 10px; font-size: .76rem; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.08); }
.report-game-info dt { color: rgba(255,255,255,.43); }
.report-game-info dd { margin: 0; text-align: right; }
.report-mode { display: flex; align-items: start; gap: 8px; margin: 13px 0; padding: 11px; border-radius: 13px; background: rgba(247,216,74,.1); color: #FFF4AD; font-size: .7rem; }
.report-mode svg { flex: 0 0 auto; margin-top: 1px; }
.report-sidebar-actions { display: grid; gap: 8px; margin-top: 14px; }
.report-sidebar .button { width: 100%; }
.report-main { min-width: 0; background: white; border-radius: 30px; box-shadow: var(--shadow-md); overflow: hidden; border: 1px solid #E9EEF5; }
.report-nav { position: sticky; top: 106px; z-index: 10; display: flex; gap: 5px; padding: 12px 16px; overflow-x: auto; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.report-nav button { border: 0; background: transparent; color: var(--slate); padding: 10px 12px; border-radius: 11px; white-space: nowrap; cursor: pointer; font-size: .8rem; font-weight: 750; }
.report-nav button.active, .report-nav button:hover { color: var(--blue); background: #EDF6FF; }
.report-content { padding: clamp(25px, 4vw, 50px); }
.report-hero { padding-bottom: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.report-kicker { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.report-kicker small { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-weight: 850; }
.report-hero h1 { margin: 10px 0 14px; color: var(--navy-900); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.03; letter-spacing: -.04em; }
.report-hero > p { max-width: 950px; color: var(--slate); font-size: 1.05rem; }
.report-date { white-space: nowrap; color: var(--slate); font-size: .76rem; }
.quick-stats { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.quick-stat { padding: 18px; border-radius: 18px; background: var(--surface-soft); border: 1px solid #E7EDF4; }
.quick-stat svg { color: var(--blue); }
.quick-stat strong { display: block; margin: 11px 0 1px; color: var(--navy-900); font-size: 1.28rem; }
.quick-stat span { color: var(--slate); font-size: .74rem; }
.report-section { padding: 38px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 170px; }
.report-section:last-child { border-bottom: 0; }
.report-section-head { display: flex; justify-content: space-between; align-items: start; gap: 22px; margin-bottom: 22px; }
.report-section-head h2 { margin: 0; color: var(--navy-900); font-size: clamp(1.65rem, 2.5vw, 2.55rem); letter-spacing: -.04em; }
.report-section-head p { max-width: 580px; color: var(--slate); margin: 4px 0 0; }
.summary-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 15px; }
.insight-card { border: 1px solid #E5EBF2; border-radius: 22px; padding: 24px; background: #FBFCFE; }
.insight-card h3 { margin: 0 0 12px; color: var(--navy-900); font-size: 1.04rem; }
.insight-card ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.insight-card li { display: flex; gap: 9px; color: var(--slate); font-size: .9rem; }
.insight-card li::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--teal); }
.concern-card li::before { background: var(--orange); }
.discussion-card li::before { background: var(--purple); }
.report-category { --cat: var(--blue-a); position: relative; overflow: hidden; padding: 28px; border: 1px solid #E4EAF2; border-radius: 25px; background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 7%, white), white 52%); }
.report-category + .report-category { margin-top: 18px; }
.report-category::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cat); }
.report-category.cat-a { --cat: var(--blue-a); }
.report-category.cat-b { --cat: var(--teal); }
.report-category.cat-c { --cat: var(--orange); }
.report-category.cat-d { --cat: var(--purple); }
.category-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; }
.category-badge { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--cat); color: white; font-size: 1.25rem; font-weight: 900; box-shadow: 0 12px 24px color-mix(in srgb, var(--cat) 25%, transparent); }
.category-heading small { color: var(--cat); text-transform: uppercase; letter-spacing: .1em; font-weight: 850; font-size: .68rem; }
.category-heading h3 { margin: 3px 0 0; color: var(--navy-900); font-size: clamp(1.25rem, 2vw, 1.7rem); }
.category-toggle { width: 42px; height: 42px; border-radius: 13px; border: 1px solid #DDE5EF; background: white; display: grid; place-items: center; cursor: pointer; }
.category-toggle svg { transition: transform .24s; }
.report-category.expanded .category-toggle svg { transform: rotate(180deg); }
.category-summary { margin: 17px 0 0 65px; color: var(--slate); }
.category-details { margin: 22px 0 0 65px; display: grid; gap: 0; }

/* FLATTENED, 2026-08-21.
   This was a card, inside a card, inside a card. One category panel therefore
   presented four different left edges — the badge, the topline text, this
   block's own border, and the text inside it — and no two of them lined up.
   Removing the box is the fix: every line in a category now shares a single
   column, and a hairline rule does the separating that a border and a tinted
   background were doing before. Less chrome, and the alignment falls out of
   the structure instead of needing to be maintained. */
.detail-block { padding: 20px 0 0; background: none; border: 0; border-top: 1px solid #E7ECF3; border-radius: 0; }
.detail-block:first-child { padding-top: 0; border-top: 0; }
.detail-block h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--navy-900); font-size: .95rem; letter-spacing: .01em; }
.detail-block h4 svg { color: var(--cat); flex: 0 0 auto; }
.detail-block p { margin: 0; color: var(--slate); }
.detail-block ul { margin: 0; padding-left: 20px; color: var(--slate); display: grid; gap: 7px; }

/* A shared label stated once, with its findings beneath, instead of the same
   44 characters repeating at the head of three consecutive bullets. */
.finding-group + .finding-group { margin-top: 13px; }
.finding-group-label {
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cat);
}
.finding-group .finding-list { padding-left: 20px; }
.finding-list + .finding-group { margin-top: 13px; }
.finding-group + .finding-list { margin-top: 13px; }
/* The gaps block keeps the amber signal but not the box — a tinted card here
   would indent its text past every other line in the category, which is the
   misalignment this pass removed. */
.gap-block h4 { color: #B26A00; }
.gap-block h4 svg { color: var(--orange); }
/* Sources are a reference list, not a set of cards. Boxing each one indented
   its text past the column everything else in the category sits on, and gave
   nine near-identical panels where nine lines would do. */
.source-list { display: grid; gap: 0; }
.source-row { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 11px 0; border-radius: 0; background: none; border: 0; border-top: 1px solid #EDF1F6; }
.source-row:first-child { border-top: 0; padding-top: 2px; }
.source-row strong { display: block; color: var(--navy-900); font-size: .93rem; }
.source-row span { display: block; color: var(--slate); font-size: .81rem; margin-top: 2px; }
.source-row small { display: block; color: var(--muted); margin-top: 4px; font-size: .74rem; }
.source-row a { align-self: center; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--blue); background: #EDF6FF; }
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.method-item { padding: 20px; border-radius: 18px; background: var(--surface-soft); border: 1px solid #E5EBF2; }
.method-item strong { display: block; color: var(--navy-900); margin-bottom: 6px; }
.method-item p { margin: 0; color: var(--slate); font-size: .88rem; }
.disclaimer-box { margin-top: 22px; display: flex; gap: 12px; padding: 18px; border-radius: 17px; background: #FFFBE8; color: #655B22; border: 1px solid #F2E7A4; }
.disclaimer-box svg { flex: 0 0 auto; margin-top: 3px; }
.report-actions-band { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px; border-radius: 22px; background: linear-gradient(135deg, var(--navy-900), #0B3768); color: white; }
.report-actions-band h3 { margin: 0 0 4px; }
.report-actions-band p { margin: 0; color: rgba(255,255,255,.62); }
.report-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.cta-section { padding: 20px 0 110px; }
.cta-card { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 34px; color: white; border-radius: 30px; background: radial-gradient(circle at 5% 0, rgba(53,212,232,.26), transparent 30%), linear-gradient(135deg, #061B3A, #0A3262); box-shadow: var(--shadow-lg); }
.cta-icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 21px; color: var(--cyan); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.cta-icon svg { width: 32px; height: 32px; }
.cta-card h2 { margin: 0 0 6px; font-size: clamp(1.45rem, 2.3vw, 2.35rem); line-height: 1.08; letter-spacing: -.035em; }
.cta-card p { margin: 0; color: rgba(255,255,255,.58); }

.site-footer { background: var(--navy-950); color: white; padding: 70px 0 22px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .9fr .9fr .9fr 1.7fr; gap: 34px; align-items: start; }
.footer-brand img { width: 118px; height: 58px; object-fit: contain; }
.footer-brand p { color: rgba(255,255,255,.5); max-width: 340px; font-size: .88rem; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: start; gap: 9px; }
.footer-grid strong { margin-bottom: 7px; }
.footer-grid button, .footer-grid span { color: rgba(255,255,255,.55); padding: 0; font-size: .84rem; }
.footer-grid button:hover { color: white; }
.footer-bottom { margin-top: 48px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.35); border-top: 1px solid rgba(255,255,255,.08); font-size: .77rem; }

.modal-backdrop, .analysis-overlay { position: fixed; inset: 0; z-index: 100; padding: 24px; display: grid; place-items: center; background: rgba(2,9,19,.72); backdrop-filter: blur(18px); }
.modal { width: min(720px, 100%); max-height: min(850px, calc(100vh - 48px)); overflow: auto; border-radius: 28px; padding: 26px; background: white; box-shadow: 0 40px 120px rgba(0,0,0,.42); }
.modal-wide { width: min(1120px, 100%); }
.modal-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.modal-header small { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-weight: 850; font-size: .7rem; }
.modal-header h2 { margin: 5px 0 0; color: var(--navy-900); font-size: 2rem; letter-spacing: -.04em; }
.modal .icon-button { color: var(--navy-900); background: var(--surface-soft); border-color: #E1E7EF; }
.modal-intro { color: var(--slate); }
.modal-content { color: var(--slate); }
.modal-content h3 { color: var(--navy-900); margin-top: 22px; }
.modal-content ul { padding-left: 20px; }
.modal-content .domain-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.modal-content .domain-cloud span { padding: 7px 10px; border-radius: 999px; background: #EDF6FF; color: #0757CC; font-size: .78rem; }
.modal-footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.game-match-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 22px; }
.game-match { position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 21px; background: var(--surface-soft); cursor: pointer; text-align: left; padding: 0; transition: transform .2s, border-color .2s, box-shadow .2s; }
.game-match:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.game-match.selected { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10,132,255,.11), var(--shadow-sm); }
.game-match-cover { aspect-ratio: 16/8.5; display: grid; place-items: center; overflow: hidden; color: white; background: linear-gradient(145deg, var(--match-accent, var(--blue)), var(--navy-900)); }
.game-match-cover img { width: 100%; height: 100%; object-fit: cover; }
.game-match-cover span { font-size: 2rem; font-weight: 900; opacity: .82; }
.game-match-body { padding: 16px; }
.game-match-body strong { display: block; color: var(--navy-900); line-height: 1.25; }
.game-match-body small { display: block; color: var(--slate); margin-top: 6px; }
.game-match-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.game-match-tags span { padding: 5px 7px; border-radius: 8px; color: var(--slate); background: white; border: 1px solid #E3E9F0; font-size: .65rem; }

.analysis-card { width: min(660px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; padding: 28px 32px; border-radius: 30px; text-align: center; color: white; background: rgba(5,25,54,.9); animation: analysis-in .55s var(--ease-spring) both; }
.analysis-orbit { position: relative; width: 88px; height: 88px; margin: 0 auto 12px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(53,212,232,.22), transparent 68%); }
.analysis-orbit > svg { width: 26px; height: 26px; color: var(--cyan); }
.analysis-orbit span { position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); animation: orbit-spin 5s linear infinite; }
.analysis-orbit span:nth-child(2) { inset: 15px; border-color: rgba(34,199,184,.34); animation-direction: reverse; animation-duration: 3.6s; }
.analysis-orbit span:nth-child(3) { inset: 26px; border-color: rgba(10,132,255,.4); animation-duration: 2.8s; }
.analysis-orbit span::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: -5px; left: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.analysis-card > small { color: var(--cyan); text-transform: uppercase; letter-spacing: .14em; font-weight: 850; font-size: .67rem; flex: none; }
.analysis-card h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); margin: 6px 0 3px; letter-spacing: -.03em; flex: none; }
.analysis-card > p { color: rgba(255,255,255,.62); font-size: .9rem; margin: 0; flex: none; }
.analysis-progress { height: 6px; width: 100%; max-width: 400px; margin: 15px auto 2px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; flex: none; }
.analysis-progress span { display: block; height: 100%; width: 8%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 16px rgba(53,212,232,.5); transition: width .6s var(--ease-spring); }
.analysis-stages { list-style: none; padding: 4px; margin: 13px 0 0; display: grid; gap: 6px; text-align: left; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.analysis-stages::-webkit-scrollbar { width: 7px; }
.analysis-stages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 7px; }
.analysis-stages li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 11px; padding: 7px 12px; border-radius: 12px; color: rgba(255,255,255,.4); background: rgba(255,255,255,.035); transition: color .3s, background .3s; }
.stage-dot { width: 15px; height: 15px; justify-self: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); position: relative; transition: border-color .3s, background .3s; }
.analysis-stages li strong { font-weight: 650; font-size: .83rem; }
.stage-meta { color: rgba(255,255,255,.3); font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.analysis-stages li.active { color: #fff; background: rgba(53,212,232,.1); }
.analysis-stages li.active .stage-dot { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(53,212,232,.14); }
.analysis-stages li.active .stage-dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--cyan); animation: dot-pulse 1.2s ease-in-out infinite; }
.analysis-stages li.active .stage-meta { color: var(--cyan); }
.analysis-stages li.complete { color: rgba(255,255,255,.7); }
.analysis-stages li.complete .stage-dot { border-color: var(--teal); background: var(--teal); }
.analysis-stages li.complete .stage-dot::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3.5px; height: 7px; border: solid #05122b; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.analysis-stages li.complete .stage-meta { color: var(--teal); }
.analysis-actions { margin-top: 15px; display: flex; justify-content: center; flex: none; }
.analysis-actions .button-quiet { background: rgba(255,255,255,.07); color: white; border-color: rgba(255,255,255,.14); box-shadow: none; }
@keyframes analysis-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dot-pulse { 0%,100% { transform: scale(.72); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 150; max-width: 380px; color: white; background: rgba(6,27,58,.95); border: 1px solid rgba(255,255,255,.15); box-shadow: var(--shadow-lg); padding: 14px 18px; border-radius: 15px; }
.noscript { position: fixed; inset: auto 18px 18px; z-index: 200; padding: 15px; color: white; background: #9E2C2C; border-radius: 12px; }

@media (max-width: 1240px) {
  /* horizontal nav collapses into the drawer below 980px */
  .hero { grid-template-columns: 1fr .8fr; }
  .decision-card { right: 0; }
  .steps-grid { grid-template-columns: repeat(5, 1fr); }
  .step-card { min-width: 0; }
  .framework-grid { grid-template-columns: repeat(2, 1fr); }
  .preview-category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  :root { --page: min(100% - 32px, 920px); }
  .header-shell { grid-template-columns: auto 1fr auto; }
  .primary-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-copy { max-width: 850px; }
  .hero-visual { min-height: 550px; }
  .hero-visual > img { width: 96%; transform: none; }
  .decision-card { right: 4%; top: 55px; }
  .chip-one { left: 9%; }
  .section-heading { align-items: start; flex-direction: column; }
  .preview-window { grid-template-columns: 240px 1fr; }
  .preview-stats { grid-template-columns: repeat(2, 1fr); }
  .report-shell { grid-template-columns: 1fr; }
  .report-sidebar { position: relative; top: auto; display: grid; grid-template-columns: 180px 1fr; gap: 18px; }
  .report-sidebar-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .report-nav { top: 104px; }
  .cta-card { grid-template-columns: auto 1fr; }
  .cta-card .button { grid-column: 1 / -1; justify-self: start; }
  .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .footer-grid > div:last-child { grid-column: 2 / -1; }
  .game-match-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --page: calc(100% - 22px); }
  body { background: linear-gradient(180deg, #05060f, #070c1f 30%, #0a0b1c 60%, #060711 100%); }
  .site-header { padding-top: 9px; }
  .header-shell { min-height: 66px; border-radius: 20px; padding: 8px 9px 8px 12px; grid-template-columns: auto 1fr auto; gap: 8px; }
  .brand img { width: 72px; height: 36px; }
  .brand-copy { display: none; }
  .new-analysis-button { min-width: 44px; width: 44px; padding: 0; }
  .new-analysis-button span, .new-analysis-button { font-size: 0; }
  .new-analysis-button svg { width: 18px; height: 18px; }
  .hero { padding: 62px 0 55px; min-height: auto; }
  .hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .hero-lead { font-size: 1rem; }
  .search-field-wrap { grid-template-columns: auto 1fr; padding: 7px 9px 7px 14px; }
  .analyze-button { grid-column: 1 / -1; width: 100%; }
  .search-footer { gap: 2px; }
  .hero-trust-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-trust-grid article { padding-block: 8px; }
  .hero-visual { min-height: 440px; }
  .hero-visual > img { width: 115%; }
  .decision-card { width: min(285px, 82vw); right: 0; top: 25px; transform: scale(.9); transform-origin: top right; }
  .chip-one { left: 2%; bottom: 70px; }
  .chip-two { right: 3%; bottom: 18px; }
  .section-heading h2 { font-size: 2.65rem; }
  .how-section, .framework-section, .preview-section { padding-block: 70px; }
  .framework-grid { grid-template-columns: 1fr; }
  .framework-card { min-height: 310px; }
  .preview-window { grid-template-columns: 1fr; }
  .preview-sidebar { display: grid; grid-template-columns: 120px 1fr; gap: 15px; }
  .demo-cover { grid-row: span 2; padding: 12px; }
  .demo-cover strong { font-size: 1.1rem; }
  .preview-meta { padding: 4px 0; }
  .preview-sidebar .button { grid-column: 2; align-self: end; }
  .preview-tabs { padding-inline: 15px; }
  .preview-content { padding: 22px 16px; }
  .preview-content-head { align-items: start; }
  .preview-stats, .preview-category-grid { grid-template-columns: 1fr 1fr; }
  .mini-category { min-height: 150px; }
  .report-sidebar { grid-template-columns: 110px 1fr; padding: 14px; }
  .report-cover { padding: 12px; }
  .report-cover strong { font-size: .9rem; }
  .report-game-info { padding: 3px 0; }
  .report-game-info h2 { font-size: 1rem; }
  .report-game-info dl > div { grid-template-columns: 70px 1fr; }
  .report-mode { grid-column: 1 / -1; }
  .report-sidebar-actions { grid-template-columns: 1fr; }
  .report-nav { top: 80px; }
  .report-content { padding: 22px 16px; }
  .report-kicker { align-items: start; flex-direction: column; }
  .quick-stats { grid-template-columns: 1fr 1fr; }
  .summary-grid, .method-grid { grid-template-columns: 1fr; }
  .category-heading { grid-template-columns: auto 1fr auto; gap: 10px; }
  .category-badge { width: 42px; height: 42px; }
  .category-summary, .category-details { margin-left: 0; }
  .source-row { grid-template-columns: 1fr auto; }
  .report-actions-band { align-items: start; flex-direction: column; }
  .cta-card { grid-template-columns: 1fr; padding: 27px; }
  .cta-card .button { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { align-items: start; flex-direction: column; }
  .game-match-grid { grid-template-columns: 1fr; }
  .modal-backdrop, .analysis-overlay { padding: 10px; }
  .modal, .analysis-card { border-radius: 22px; padding: 20px; max-height: calc(100vh - 20px); }
  .analysis-stages li { font-size: .82rem; }
}

@media (max-width: 430px) {
  .preview-sidebar { grid-template-columns: 94px 1fr; }
  .preview-stats, .preview-category-grid, .quick-stats { grid-template-columns: 1fr; }
  .hero-visual { min-height: 390px; }
  .decision-card { right: -22px; }
  .floating-chip { font-size: .68rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  @page { margin: 0.7in 0.6in; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #fff !important; color: #1a1f2b !important; font-size: 10.5pt; line-height: 1.5; }
  .site-header, .hero, .how-section, .story-section, .framework-section, .preview-section, .cta-section, .site-footer, .report-nav, .report-sidebar-actions, .toast, .ambient, .scroll-progress, .analysis-overlay, .nav-drawer, .nav-drawer-backdrop, .modal-backdrop, .skip-link, .svg-sprite { display: none !important; }
  .report-app { display: block !important; width: 100%; padding: 0; }
  .section-shell { width: 100%; }

  /* Letterhead */
  .report-shell { display: block; }
  .report-sidebar { position: static; display: grid; grid-template-columns: 1.1in 1fr; gap: 0.22in; align-items: center; color: #1a1f2b; background: #fff; box-shadow: none; border: 0; border-bottom: 2px solid #0A84FF; border-radius: 0; padding: 0 0 0.16in; margin-bottom: 0.3in; break-inside: avoid; break-after: avoid; }
  .report-cover { min-height: 1.35in; border-radius: 10px; }
  .report-cover small, .report-cover strong { color: #fff !important; }
  .report-cover strong { font-size: 1rem; }
  .report-game-info { padding: 0; }
  .report-game-info h2 { color: #0A1B3A !important; font-size: 16pt; margin: 0 0 9px; }
  .report-game-info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 22px; }
  .report-game-info dl > div { grid-template-columns: auto 1fr; gap: 8px; border-bottom: 0; padding: 1px 0; font-size: 8.5pt; }
  .report-game-info dt { color: #6b7480 !important; }
  .report-game-info dd { color: #1a1f2b !important; text-align: left; }
  .report-mode { grid-column: 1 / -1; margin: 9px 0 0; color: #5a521f !important; background: #FFFBE8 !important; border: 1px solid #E5D98A !important; font-size: 8pt; }

  .report-main { box-shadow: none; border: 0; border-radius: 0; background: #fff !important; }
  .report-content { padding: 0; }
  .report-kicker { margin-bottom: 2px; }
  .report-kicker small { color: #0A84FF !important; }
  .report-date { color: #6b7480 !important; }
  .report-hero { padding-bottom: 16px; border-bottom: 1px solid #dfe5ec; }
  .report-hero h1 { color: #0A1B3A !important; font-size: 22pt; margin: 6px 0 10px; }
  .report-hero > p { color: #38424f !important; font-size: 10.5pt; }

  .quick-stats { margin: 14px 0; gap: 8px; }
  .quick-stat { padding: 11px; border: 1px solid #dfe5ec !important; background: #f7f9fc !important; border-radius: 9px; }
  .quick-stat svg { color: #0A84FF !important; }
  .quick-stat strong { color: #0A1B3A !important; font-size: 13pt; margin: 6px 0 0; }
  .quick-stat span { color: #6b7480 !important; }
  .disclaimer-box { background: #FFFBE8 !important; color: #5a521f !important; border: 1px solid #E5D98A !important; font-size: 9pt; }

  .report-section { padding: 16px 0; border-bottom: 1px solid #eef2f6; }
  .report-section:last-child { border-bottom: 0; }
  .report-section-head { margin-bottom: 12px; break-after: avoid; }
  .report-section-head h2 { color: #0A1B3A !important; font-size: 15pt; }
  .report-section-head p { color: #6b7480 !important; }
  h2, h3, h4 { break-after: avoid; }

  .summary-grid { gap: 10px; }
  .insight-card, .method-item, .detail-block { background: #f7f9fc !important; border: 1px solid #e3e9f0 !important; box-shadow: none; break-inside: avoid; }
  .insight-card h3, .method-item strong, .detail-block h4 { color: #0A1B3A !important; }
  .insight-card li, .detail-block p, .detail-block ul, .method-item p { color: #38424f !important; }
  .insight-card li::before { background: var(--teal) !important; }
  .concern-card li::before { background: var(--orange) !important; }
  .discussion-card li::before { background: var(--purple) !important; }

  .report-category { break-inside: avoid; box-shadow: none; border: 1px solid #e3e9f0 !important; background: #fff !important; padding: 16px 20px; }
  .report-category::before { background: var(--cat) !important; }
  .category-badge { background: var(--cat) !important; color: #fff !important; box-shadow: none; }
  .category-heading small { color: var(--cat) !important; }
  .category-heading h3 { color: #0A1B3A !important; }
  .category-summary { color: #38424f !important; }
  .category-details { display: grid !important; }
  .category-toggle { display: none; }
  .detail-block h4 svg { color: var(--cat) !important; }

  .source-row { break-inside: avoid; box-shadow: none; background: #fff !important; border: 1px solid #e3e9f0 !important; }
  .source-row strong { color: #0A1B3A !important; }
  .source-row span, .source-row small { color: #6b7480 !important; }
  a { text-decoration: none; }
  .source-row a { width: auto; height: auto; background: transparent !important; border: 0 !important; color: #0A84FF; }
  .source-row a::after { content: attr(href); display: block; margin-top: 3px; font-size: 8pt; color: #0A84FF; word-break: break-all; }

  .report-actions-band { display: none; }
}

/* Premium visual upgrade: layered glass, purple energy, motion and depth */
@keyframes hehAurora {
  0%, 100% { transform: translate3d(-4%, -2%, 0) scale(1); }
  50% { transform: translate3d(5%, 4%, 0) scale(1.08); }
}
@keyframes hehFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@keyframes hehShimmer {
  from { transform: translateX(-160%) skewX(-18deg); }
  to { transform: translateX(260%) skewX(-18deg); }
}
@keyframes hehPulse {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes hehRing {
  to { transform: rotate(360deg); }
}
@keyframes hehGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media screen {
  :root {
    --purple: #A855F7;
    --purple-bright: #C084FC;
    --purple-deep: #6D28D9;
    --violet: #7C3AED;
    --magenta: #E879F9;
    --glass-line: rgba(255,255,255,.24);
    --glass-fill: rgba(255,255,255,.12);
    --liquid-shadow: 0 30px 90px rgba(2, 5, 20, .34), inset 0 1px 0 rgba(255,255,255,.34);
    --ease-spring: cubic-bezier(.16, 1, .3, 1);
  }

  html { scroll-padding-top: 112px; }
  body {
    background:
      radial-gradient(circle at 74% 4%, rgba(124,58,237,.32), transparent 32rem),
      radial-gradient(circle at 14% 12%, rgba(10,132,255,.26), transparent 29rem),
      radial-gradient(circle at 58% 86%, rgba(34,199,184,.12), transparent 32rem),
      linear-gradient(180deg, #05060f 0%, #070c1f 26%, #0a0b1c 55%, #080a17 82%, #060711 100%);
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .24;
    background-image:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.7) 0 1px, transparent 1.2px),
      radial-gradient(circle at 70% 60%, rgba(255,255,255,.5) 0 1px, transparent 1.2px);
    background-size: 34px 34px, 52px 52px;
    mask-image: linear-gradient(to bottom, black 0 34%, transparent 62%);
  }

  .scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    z-index: 300;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--blue), var(--purple-bright), var(--teal));
    box-shadow: 0 0 20px rgba(192,132,252,.72);
  }

  .ambient { opacity: .72; mix-blend-mode: screen; animation: hehAurora 12s ease-in-out infinite; }
  .ambient-one { width: 530px; height: 530px; background: rgba(10,132,255,.34); filter: blur(95px); }
  .ambient-two { width: 600px; height: 600px; background: rgba(34,199,184,.22); filter: blur(110px); }
  .ambient-three { width: 580px; height: 580px; background: rgba(168,85,247,.27); filter: blur(105px); top: 690px; left: 42%; animation-delay: -5s; }

  .glass {
    background:
      linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.07) 48%, rgba(156,110,255,.08)),
      rgba(10,18,42,.16);
    border-color: rgba(255,255,255,.24);
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
  }

  .site-header { padding-top: 14px; transition: padding .5s var(--ease-spring); }
  .header-shell {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(7,18,43,.76), rgba(21,19,52,.66));
    border-color: rgba(255,255,255,.20);
    box-shadow: 0 18px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22);
    transition: min-height .5s var(--ease-spring), background .5s, box-shadow .5s, transform .5s var(--ease-spring);
  }
  .header-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255,255,255,.3), transparent 28%, rgba(192,132,252,.2) 67%, transparent 90%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    padding: 1px;
  }
  .site-header.is-compact .header-shell {
    min-height: 66px;
    background: linear-gradient(135deg, rgba(4,12,31,.88), rgba(24,17,55,.82));
    box-shadow: 0 14px 42px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-2px);
  }
  .site-header.is-compact { padding-top: 8px; }
  .brand img { filter: drop-shadow(0 6px 18px rgba(53,212,232,.14)); }
  .nav-link { transition: color .25s, background .25s, transform .25s var(--ease-spring); }
  .nav-link:hover { transform: translateY(-1px); }

  .button { position: relative; overflow: hidden; isolation: isolate; transition-duration: .38s; transition-timing-function: var(--ease-spring); }
  .button::before {
    content: "";
    position: absolute;
    inset: -40% auto -40% -30%;
    width: 30%;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-160%) skewX(-18deg);
  }
  .button:hover::before { animation: hehShimmer .85s ease; }
  .button-primary {
    background: linear-gradient(120deg, #087BFF, #7C3AED 53%, #20C7B7);
    background-size: 180% 180%;
    box-shadow: 0 16px 38px rgba(92,65,220,.32), inset 0 1px 0 rgba(255,255,255,.32);
    animation: hehGradient 9s ease infinite;
  }
  .button-primary:hover { box-shadow: 0 22px 50px rgba(114,76,225,.44), 0 0 0 1px rgba(255,255,255,.18) inset; }

  .hero {
    min-height: 890px;
    padding-top: 92px;
    padding-bottom: 118px;
    grid-template-columns: minmax(0, 1fr) minmax(500px, .98fr);
    gap: clamp(30px, 5vw, 84px);
  }
  .hero::before {
    content: "";
    position: absolute;
    width: 720px;
    height: 720px;
    right: -170px;
    top: 10px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, rgba(10,132,255,.16), rgba(168,85,247,.22), rgba(34,199,184,.14), rgba(10,132,255,.16));
    filter: blur(52px);
    animation: hehRing 28s linear infinite;
    pointer-events: none;
  }
  .hero-copy { position: relative; z-index: 4; }
  .hero h1 { text-wrap: balance; text-shadow: 0 16px 55px rgba(0,0,0,.28); }
  .hero h1 span {
    background-image: linear-gradient(90deg, #71E6FF 0%, #36D4C1 35%, #C084FC 72%, #F0ABFC 100%);
    background-size: 200% auto;
    animation: hehGradient 8s ease infinite;
  }
  .hero-lead { max-width: 700px; color: rgba(241,247,255,.73); }
  .eyebrow { color: #B9F4FF; }
  .eyebrow span { background: linear-gradient(90deg, var(--blue), var(--purple-bright), var(--teal)); box-shadow: 0 0 16px rgba(192,132,252,.42); }

  .search-panel {
    border-radius: 30px;
    padding: 11px;
    background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(143,91,255,.08));
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 28px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(145,104,255,.12) inset;
  }
  .search-panel::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255,255,255,.48), transparent 24%, rgba(168,85,247,.32) 62%, rgba(34,199,184,.24));
    filter: blur(14px);
    opacity: .34;
  }
  .search-field-wrap {
    border: 1px solid rgba(255,255,255,.72);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,244,255,.94));
    box-shadow: 0 16px 60px rgba(0,0,0,.24), inset 0 1px 0 white;
  }
  .search-field-wrap:focus-within { box-shadow: 0 18px 72px rgba(66,49,161,.32), 0 0 0 4px rgba(168,85,247,.14), inset 0 1px 0 white; }
  .search-icon { color: var(--violet); }
  .search-footer button:hover { background: rgba(168,85,247,.16); }
  .suggestion-list { border-color: rgba(139,61,235,.32); box-shadow: 0 40px 100px rgba(8,5,26,.72), 0 0 0 1px rgba(139,61,235,.14) inset; }

  .hero-trust-grid article {
    padding: 14px 12px;
    border-radius: 18px;
    transition: background .3s, transform .3s var(--ease-spring);
  }
  .hero-trust-grid article:hover { background: rgba(255,255,255,.055); transform: translateY(-3px); }
  .mini-icon { background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(168,85,247,.11)); color: #C8F8FF; }

  .hero-visual { min-height: 680px; overflow: visible; isolation: isolate; }
  .hero-photo-frame {
    position: absolute;
    inset: 38px 24px 60px 42px;
    margin: 0;
    overflow: hidden;
    border-radius: 46px;
    background: #080B18;
    border: 1px solid rgba(255,255,255,.26);
    box-shadow: 0 52px 120px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.28);
    transform-style: preserve-3d;
  }
  .hero-photo-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(6,9,22,.58) 0%, transparent 17%, transparent 44%, rgba(3,6,17,.9) 100%),
      radial-gradient(125% 96% at 52% 40%, transparent 40%, rgba(6,10,30,.62) 100%),
      linear-gradient(140deg, rgba(34,199,184,.16), rgba(10,132,255,.1) 42%, rgba(124,58,237,.42) 100%);
    mix-blend-mode: normal;
    pointer-events: none;
  }
  .hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; filter: saturate(.9) contrast(1.06) brightness(.92); transform: scale(1.035); }
  .hero-photo-frame figcaption {
    position: absolute;
    left: 20px;
    right: auto;
    bottom: 18px;
    z-index: 3;
    max-width: 340px;
    padding: 11px 15px;
    border-radius: 14px;
    color: rgba(255,255,255,.88);
    font-size: .8rem;
    line-height: 1.42;
    background: rgba(9,11,28,.52);
    border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 34px rgba(0,0,0,.38);
  }
  .photo-reflection {
    position: absolute;
    z-index: 4;
    inset: -35% 42% 20% -25%;
    transform: rotate(18deg);
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.15), transparent);
    filter: blur(8px);
    pointer-events: none;
  }
  .visual-glow { width: 96%; background: radial-gradient(circle, rgba(168,85,247,.38), rgba(10,132,255,.12) 43%, transparent 72%); filter: blur(36px); }
  .hero-orbit { position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(192,132,252,.22); box-shadow: inset 0 0 70px rgba(168,85,247,.06); }
  .orbit-one { width: 610px; height: 610px; right: -80px; top: 5px; animation: hehRing 34s linear infinite; }
  .orbit-two { width: 480px; height: 480px; right: 20px; top: 78px; border-style: dashed; animation: hehRing 25s linear infinite reverse; }
  .decision-card { right: -16px; top: 72px; width: 308px; background: linear-gradient(145deg, rgba(17,18,49,.74), rgba(31,15,61,.66)); border-color: rgba(255,255,255,.22); box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.25); }
  .shield-orb { color: #D9B6FF; background: linear-gradient(145deg, rgba(168,85,247,.24), rgba(53,212,232,.12)); }
  .floating-chip { background: linear-gradient(145deg, rgba(10,22,52,.76), rgba(38,20,74,.72)); border-color: rgba(255,255,255,.22); box-shadow: 0 20px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.2); }
  .floating-chip svg { color: #D8B4FE; }
  .chip-one { left: 0; bottom: 124px; }
  .chip-two { right: 15%; bottom: 32px; }
  .floating-score {
    position: absolute;
    left: 18px;
    top: 76px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 18px;
    color: white;
    background: linear-gradient(145deg, rgba(8,20,48,.7), rgba(48,19,84,.68));
  }
  .floating-score > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, var(--blue), var(--purple)); font-weight: 900; box-shadow: 0 8px 24px rgba(124,58,237,.35); }
  .floating-score small, .floating-score strong { display: block; line-height: 1.2; }
  .floating-score small { color: rgba(255,255,255,.52); font-size: .64rem; }
  .floating-score strong { margin-top: 4px; font-size: .76rem; }

  .how-section, .framework-section, .preview-section, .story-section { position: relative; }
  /* light-theme section veil & card fills removed for the dark redesign */
  .step-card, .framework-card, .preview-window, .report-category, .insight-card, .method-item {
    --mx: 50%;
    --my: 50%;
  }

  .story-section { padding: 84px 0 112px; }
  .story-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
    padding: 68px;
    border-radius: 52px;
    color: white;
    background:
      radial-gradient(circle at 80% 15%, rgba(168,85,247,.28), transparent 32%),
      linear-gradient(145deg, #06152F, #11103A 54%, #071F3B);
    box-shadow: 0 42px 110px rgba(21,19,72,.28), inset 0 1px 0 rgba(255,255,255,.12);
    overflow: hidden;
  }
  .story-copy { position: relative; z-index: 2; }
  .story-copy h2 { margin: 18px 0; font-size: clamp(2.6rem, 4.6vw, 5.2rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
  .story-copy > p { color: rgba(255,255,255,.64); font-size: 1.05rem; max-width: 600px; }
  .story-points { display: grid; gap: 13px; margin-top: 30px; }
  .story-points article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: background .25s, border-color .25s, transform .25s; }
  .story-points article:hover { background: rgba(255,255,255,.07); border-color: rgba(124,58,237,.35); transform: translateX(3px); }
  .sp-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: #8fbaff; background: rgba(10,132,255,.15); border: 1px solid rgba(10,132,255,.3); }
  .sp-icon.alt { color: #cbb0ff; background: rgba(168,85,247,.16); border-color: rgba(168,85,247,.32); }
  .sp-icon svg { width: 22px; height: 22px; }
  .sp-title { display: flex; align-items: baseline; gap: 12px; }
  .sp-num { color: var(--blue); font-weight: 800; font-size: 1.05rem; }
  .story-points article:nth-child(2) .sp-num { color: var(--purple); }
  .sp-body strong { display: block; color: #fff; font-size: 1.06rem; }
  .sp-body small { display: block; margin-top: 5px; color: rgba(255,255,255,.55); font-size: .9rem; }
  .sp-arrow { width: 18px; height: 18px; color: rgba(255,255,255,.4); transform: rotate(-90deg); }
  .story-collage { min-height: 570px; position: relative; }
  .story-photo { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 34px 90px rgba(0,0,0,.38); }
  .story-photo img { width: 100%; height: 100%; object-fit: cover; }
  .story-photo-main { position: absolute; inset: 20px 90px 55px 0; border-radius: 38px; transform: rotate(-2.3deg); }
  .story-photo-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,8,20,.45)); }
  .story-photo-small { position: absolute; width: 58%; height: 46%; right: 0; bottom: 0; border-radius: 30px; transform: rotate(4deg); background: rgba(11,16,42,.7); padding: 8px; }
  .story-photo-small img { border-radius: 23px; }
  .story-photo-small figcaption { position: absolute; left: 22px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; color: white; background: rgba(7,10,28,.67); backdrop-filter: blur(18px); font-size: .69rem; }
  .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(34,199,184,.13); animation: hehPulse 2.1s ease-in-out infinite; }
  .story-orb { position: absolute; width: 430px; height: 430px; right: -120px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,.3), transparent 67%); filter: blur(25px); }

  .framework-card {
    border: 1px solid rgba(255,255,255,.32);
    box-shadow: 0 26px 70px rgba(40,27,91,.2), inset 0 1px 0 rgba(255,255,255,.25);
    transform-style: preserve-3d;
  }
  .framework-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .6;
    background:
      radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.28), transparent 32%),
      linear-gradient(125deg, rgba(255,255,255,.13), transparent 38%);
    pointer-events: none;
  }
  .framework-card .category-top, .framework-card h3, .framework-card p, .framework-card button { transform: translateZ(22px); }
  .category-a { background: linear-gradient(155deg, #248EFF, #3156D9 58%, #312E81); }
  .category-b { background: linear-gradient(155deg, #22C7B8, #147B91 62%, #174D7B); }
  .category-c { background: linear-gradient(155deg, #FFB23E, #E86134 58%, #9B2C67); }
  .category-d { background: linear-gradient(155deg, #D17BFF, #8B45E8 55%, #4C1D95); }
  .framework-card:hover { box-shadow: 0 36px 90px rgba(56,32,122,.28), 0 0 46px rgba(168,85,247,.12); }

  .preview-window {
    border-color: rgba(255,255,255,.1);
    background: linear-gradient(160deg, rgba(22,18,48,.94), rgba(10,12,30,.96));
    box-shadow: 0 48px 130px rgba(4,3,20,.5), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .preview-sidebar { background: radial-gradient(circle at 25% 10%, rgba(168,85,247,.3), transparent 30%), linear-gradient(180deg, #0a1330, #15113D 66%, #0a1c3d); }
  .demo-cover { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 22px 50px rgba(0,0,0,.32); }
  .preview-tabs { background: rgba(255,255,255,.02); backdrop-filter: blur(18px); }
  .status-pill i { background: var(--purple); box-shadow: 0 0 0 5px rgba(168,85,247,.12); }

  .cta-card {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 85% 20%, rgba(168,85,247,.32), transparent 30%),
      linear-gradient(125deg, #061B3A, #15113D 56%, #073452);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 38px 100px rgba(24,21,78,.28), inset 0 1px 0 rgba(255,255,255,.13);
  }
  .cta-card::after { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; bottom: -240px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 90px rgba(168,85,247,.025); }
  .cta-card > * { position: relative; z-index: 2; }
  .cta-icon { background: linear-gradient(145deg, rgba(168,85,247,.3), rgba(53,212,232,.14)); color: #E9D5FF; }

  .site-footer { background: radial-gradient(circle at 70% 0, rgba(168,85,247,.14), transparent 32%), #020815; }
  .photo-credit { color: rgba(255,255,255,.38); }
  .photo-credit a { color: rgba(216,180,254,.74); }

  .modal-backdrop, .analysis-overlay { background: rgba(2,5,15,.62); backdrop-filter: blur(18px) saturate(120%); }
  .modal { background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(246,243,255,.95)); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 50px 140px rgba(4,4,19,.48); }
  .analysis-card { background: radial-gradient(circle at 50% 0, rgba(168,85,247,.27), transparent 34%), linear-gradient(145deg, rgba(5,22,53,.94), rgba(24,15,58,.92)); }
  .analysis-orbit > svg { color: #D8B4FE; }
  .analysis-orbit span:nth-child(2) { border-color: rgba(168,85,247,.45); }

  .reveal-ready {
    opacity: 0;
    translate: 0 26px;
    scale: .992;
    filter: blur(3px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), translate .75s cubic-bezier(.16,1,.3,1), scale .75s cubic-bezier(.16,1,.3,1), filter .6s ease;
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal-ready.is-visible { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
  [data-parallax] { will-change: transform; }
  .tilt-card { --rx: 0deg; --ry: 0deg; --lift: 0px; transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .28s var(--ease-spring), box-shadow .3s; }
  .tilt-card:hover { --lift: -7px; }
}

@media screen and (max-width: 1240px) {
  .hero { grid-template-columns: 1fr .82fr; gap: 18px; }
  .hero-photo-frame { inset: 55px 0 70px 18px; }
  .floating-score { left: 0; }
  .story-grid { grid-template-columns: .9fr 1.1fr; padding: 54px; }
}

@media screen and (max-width: 980px) {
  .hero { min-height: auto; padding-bottom: 92px; }
  .hero-visual { min-height: 610px; }
  .hero-photo-frame { inset: 20px 5% 50px; }
  .decision-card { right: 2%; }
  .floating-score { left: 5%; top: 52px; }
  .story-grid { grid-template-columns: 1fr; padding: 50px; }
  .story-collage { min-height: 520px; }
}

@media screen and (max-width: 720px) {
  body { background: radial-gradient(circle at 70% 4%, rgba(124,58,237,.28), transparent 24rem), linear-gradient(180deg, #05060f, #070c1f 30%, #0a0b1c 60%, #060711 100%); }
  .hero { padding-top: 54px; }
  .hero h1 { letter-spacing: -.055em; }
  .hero-visual { min-height: 520px; }
  .hero-photo-frame { inset: 28px 0 56px; border-radius: 32px; }
  .hero-photo-frame figcaption { left: 20px; right: 20px; bottom: 18px; font-size: .72rem; }
  .decision-card { top: 52px; right: -18px; transform: scale(.83); }
  .floating-score { left: -4px; top: 18px; transform: scale(.88); transform-origin: left top; }
  .chip-one { left: -3px; bottom: 72px; }
  .chip-two { right: 3%; bottom: 20px; }
  .how-section::before, .framework-section::before, .preview-section::before { inset-inline: -4px; border-radius: 34px; }
  .story-section { padding-top: 60px; }
  .story-grid { padding: 34px 22px; border-radius: 34px; }
  .story-copy h2 { font-size: 3rem; }
  .story-collage { min-height: 410px; }
  .story-photo-main { inset: 0 42px 48px 0; border-radius: 28px; }
  .story-photo-small { width: 62%; height: 44%; border-radius: 22px; padding: 6px; }
  .story-photo-small img { border-radius: 17px; }
  .framework-card .category-top, .framework-card h3, .framework-card p, .framework-card button { transform: none; }
}

@media screen and (max-width: 430px) {
  .hero-visual { min-height: 450px; }
  .decision-card { right: -36px; top: 45px; transform: scale(.74); }
  .floating-score { transform: scale(.76); }
  .floating-chip { padding: 8px 10px; }
  .story-grid { padding-inline: 18px; }
  .story-copy h2 { font-size: 2.55rem; }
  .story-collage { min-height: 350px; }
  .story-photo-small figcaption { font-size: .59rem; left: 12px; right: 10px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient, .button-primary, .hero h1 span, .pulse-dot, .hero-orbit { animation: none !important; }
  .reveal-ready { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-parallax], .tilt-card { transform: none !important; }
}
@media screen {
  [data-parallax] { translate: 0 var(--parallax-y, 0px); transition: translate .12s linear; }
  .visual-glow { transition: translate .7s cubic-bezier(.16,1,.3,1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { translate: none !important; }
}
/* reveal handled by the consolidated .reveal-ready rule above */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready { translate: none !important; scale: 1 !important; }
}

/* ============================================================
   ELEVATED NAVIGATION  (dropdown · drawer · toggle · states)
   ============================================================ */

/* Compact / scrolled state — applies regardless of motion preference */
.site-header.is-compact .brand img { width: 78px; }
.site-header.is-compact .brand-copy small { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; }
.site-header.is-compact .header-shell { min-height: 64px; }
/* let the Methodology dropdown escape the header shell (overridden from the motion media query) */
.header-shell { overflow: visible; }

/* Circular menu toggle (persistent quick-menu, matches the design system) */
.menu-toggle {
  position: relative;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: none; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.menu-toggle:hover, .menu-toggle:focus-visible {
  border-color: rgba(182,92,250,.6);
  background: rgba(182,92,250,.16);
  box-shadow: 0 0 0 4px rgba(182,92,250,.14), 0 10px 26px rgba(124,58,237,.28);
}
.menu-toggle svg { position: absolute; width: 20px; height: 20px; transition: opacity .2s var(--ease), transform .3s var(--ease-spring, var(--ease)); }
.menu-toggle .mt-close { opacity: 0; transform: rotate(-45deg) scale(.7); }
.menu-toggle[aria-expanded="true"] .mt-open { opacity: 0; transform: rotate(45deg) scale(.7); }
.menu-toggle[aria-expanded="true"] .mt-close { opacity: 1; transform: rotate(0) scale(1); }
.menu-toggle[aria-expanded="true"] { border-color: rgba(182,92,250,.6); background: rgba(182,92,250,.18); }

/* New Analysis — blue → violet gradient to match the mock */
.new-analysis-button.button-primary,
.drawer-cta.button-primary {
  background: linear-gradient(135deg, var(--blue) 0%, #6D5CF5 55%, var(--purple) 100%);
  box-shadow: 0 12px 30px rgba(124,58,237,.35);
}

/* Methodology dropdown */
.nav-item.has-dropdown { position: relative; display: inline-flex; }
.nav-caret { width: 15px; height: 15px; opacity: .8; transition: transform .3s var(--ease-spring, var(--ease)); }
.nav-item.has-dropdown:hover .nav-caret,
.nav-item.has-dropdown:focus-within .nav-caret,
.nav-item.has-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-trigger::after { display: none; }
.nav-item.has-dropdown:hover .nav-dropdown-trigger,
.nav-item.has-dropdown:focus-within .nav-dropdown-trigger,
.nav-item.has-dropdown.open .nav-dropdown-trigger {
  color: #fff;
  background: linear-gradient(135deg, rgba(124,58,237,.5), rgba(182,92,250,.32));
  box-shadow: inset 0 0 0 1px rgba(182,92,250,.4), 0 10px 30px rgba(124,58,237,.35);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: 320px;
  transform: translate(-50%, 8px);
  padding: 10px;
  border-radius: 20px;
  display: grid;
  gap: 4px;
  background: linear-gradient(160deg, rgba(26,20,54,.97), rgba(14,12,34,.97));
  border: 1px solid rgba(182,92,250,.28);
  box-shadow: 0 26px 70px rgba(6,4,20,.6), inset 0 0 0 1px rgba(255,255,255,.04), 0 0 44px rgba(124,58,237,.22);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 60;
  transition: opacity .26s var(--ease), transform .3s var(--ease-spring, var(--ease)), visibility .26s;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(26,20,54,.97);
  border-left: 1px solid rgba(182,92,250,.28);
  border-top: 1px solid rgba(182,92,250,.28);
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-item.has-dropdown.open .nav-dropdown {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translate(-50%, 0);
}
.nav-dropdown-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.nav-dropdown-item:hover, .nav-dropdown-item:focus-visible { background: rgba(255,255,255,.07); transform: translateX(2px); }
.ndi-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(124,58,237,.22); color: #d7c6ff; }
.ndi-icon svg { width: 19px; height: 19px; }
.ndi-icon.icon-a { background: rgba(53,212,232,.18); color: #7fe6f2; }
.ndi-icon.icon-b { background: rgba(124,58,237,.24); color: #d7c6ff; }
.ndi-icon.icon-c { background: rgba(34,199,184,.18); color: #7fe0d3; }
.ndi-text { display: grid; line-height: 1.25; }
.ndi-text strong { font-size: .9rem; font-weight: 700; }
.ndi-text small { color: rgba(255,255,255,.6); font-size: .76rem; }
.ndi-arrow { width: 15px; height: 15px; color: rgba(255,255,255,.4); transform: rotate(-90deg); transition: color .2s var(--ease), transform .2s var(--ease); }
.nav-dropdown-item:hover .ndi-arrow { color: #fff; transform: rotate(-90deg) translateY(2px); }

/* Slide-out drawer */
.nav-drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(4,6,20,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s var(--ease); }
.nav-drawer-backdrop.open { opacity: 1; }
.nav-drawer {
  position: fixed;
  top: 90px;
  right: max(20px, calc((100vw - var(--page)) / 2));
  z-index: 80;
  width: min(330px, calc(100vw - 32px));
  padding: 16px 14px 14px;
  border-radius: 24px;
  display: grid;
  gap: 6px;
  background: linear-gradient(165deg, rgba(24,19,52,.98), rgba(12,11,30,.98));
  border: 1px solid rgba(182,92,250,.26);
  box-shadow: 0 30px 80px rgba(4,3,16,.62), 0 0 46px rgba(124,58,237,.22);
  opacity: 0;
  transform: translateY(-12px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .34s var(--ease-spring, var(--ease)), visibility .3s;
}
.nav-drawer.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; }
.nav-drawer-grabber { width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: 2px auto 8px; }
.nav-drawer-list { display: grid; gap: 2px; }
.drawer-link {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.drawer-link:hover, .drawer-link:focus-visible { background: rgba(255,255,255,.07); transform: translateX(2px); }
.dl-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.06); color: #c9d3e6; transition: background .2s var(--ease), color .2s var(--ease); }
.dl-icon svg { width: 18px; height: 18px; }
.drawer-link:hover .dl-icon { color: #d7c6ff; background: rgba(124,58,237,.2); }
.dl-text { justify-self: start; }
.dl-arrow { width: 16px; height: 16px; color: rgba(255,255,255,.32); }
.dl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px var(--purple); justify-self: end; }
.drawer-cta { width: 100%; margin-top: 8px; }

@media (max-width: 720px) {
  .nav-drawer { top: 78px; right: 12px; left: 12px; width: auto; }
  .menu-toggle { width: 42px; height: 42px; }
  .header-actions { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown { transform: translate(-50%, 0) !important; transition: opacity .2s linear, visibility .2s linear; }
  .nav-drawer { transform: none !important; transition: opacity .2s linear, visibility .2s linear; }
  .nav-drawer-backdrop { transition: opacity .2s linear; }
  .menu-toggle svg { transition: opacity .15s linear; }
}

/* ============================================================
   MOCKUP REDESIGN — dark sections, glowing cards, trust bars
   ============================================================ */

/* Section headings on dark */
.how-section .section-heading h2,
.framework-section .section-heading h2,
.preview-section .section-heading h2,
.story-copy h2 { color: #fff; }
.how-section .section-heading p,
.framework-section .section-heading p,
.preview-section .section-heading p { color: rgba(255,255,255,.6); }
.section-heading h2 span,
.story-copy h2 span { background: linear-gradient(100deg, var(--blue), #8b5cf6, var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-heading h2 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.03em; line-height: 1.02; }
.section-heading.centered { text-align: center; align-items: center; }

/* Eyebrow — teal, uppercase, connector line(s) */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; font-weight: 800; }
.eyebrow span { width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading.centered .eyebrow::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--blue)); }

/* --- How It Works --- */
.how-section { padding: 100px 0 96px; }
.steps-timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 30px; margin: 34px 0 4px; }
.timeline-line { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, var(--blue), var(--cyan) 26%, var(--purple) 52%, var(--orange) 78%, #2ee6a0); box-shadow: 0 0 18px rgba(124,58,237,.45); opacity: .85; }
.tnode { justify-self: center; width: 13px; height: 13px; border-radius: 50%; position: relative; z-index: 1; }
.tnode::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); }
.tnode.c1 { background: var(--blue); box-shadow: 0 0 16px var(--blue); }
.tnode.c2 { background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.tnode.c3 { background: var(--purple); box-shadow: 0 0 16px var(--purple); }
.tnode.c4 { background: var(--orange); box-shadow: 0 0 16px var(--orange); }
.tnode.c5 { background: #2ee6a0; box-shadow: 0 0 16px #2ee6a0; }

.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.step-card {
  --c: var(--blue);
  position: relative; min-height: 300px; padding: 26px 22px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.step-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 130px; background: radial-gradient(150px 90px at 32% -20%, color-mix(in srgb, var(--c) 42%, transparent), transparent 72%); opacity: .55; pointer-events: none; }
.step-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 60px rgba(0,0,0,.45), 0 0 42px color-mix(in srgb, var(--c) 26%, transparent); }
.step-1 { --c: var(--blue); }
.step-2 { --c: var(--teal); }
.step-3 { --c: var(--purple); }
.step-4 { --c: var(--orange); }
.step-5 { --c: #2ee6a0; }
.step-number { position: absolute; right: 20px; top: 18px; color: var(--c); font-size: 1.15rem; font-weight: 800; }
.step-icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 8px 0 30px; color: var(--c); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); box-shadow: 0 0 32px color-mix(in srgb, var(--c) 22%, transparent), inset 0 0 20px color-mix(in srgb, var(--c) 12%, transparent); }
.step-icon svg { width: 32px; height: 32px; }
.step-card h3 { margin: 0 0 14px; color: #fff; font-size: 1.25rem; position: relative; padding-bottom: 13px; }
.step-card h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.step-card p { margin: 0; color: rgba(255,255,255,.58); font-size: .92rem; }

/* Trust bar (shared: How It Works, Framework, Preview) */
.trust-bar { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 18px 8px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.trust-item { display: flex; align-items: center; gap: 13px; justify-content: center; padding: 4px 14px; }
.trust-item:not(:last-child) { border-right: 1px solid rgba(255,255,255,.08); }
.trust-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #cbb9ff; background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.3); }
.trust-ic svg { width: 20px; height: 20px; }
.trust-item strong { display: block; color: #fff; font-size: .92rem; }
.trust-item small { color: rgba(255,255,255,.5); font-size: .8rem; }

/* --- Story trust row --- */
.story-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.st-item { display: flex; align-items: center; gap: 12px; }
.st-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; }
.st-ic svg { width: 20px; height: 20px; }
.st-a { color: #a9c7ff; background: rgba(10,132,255,.15); }
.st-b { color: #cbb0ff; background: rgba(168,85,247,.16); }
.st-c { color: #7fe6f2; background: rgba(53,212,232,.15); }
.st-item strong { display: block; color: #fff; font-size: .9rem; }
.st-item small { display: block; color: rgba(255,255,255,.5); font-size: .78rem; margin-top: 2px; }

/* Story trust: keep titles on one line; photo-frame fallbacks for preview */
.st-item strong { white-space: nowrap; }
.story-photo { background: linear-gradient(150deg, #201a4d 0%, #0d1234 60%, #0a1a3a 100%); }
.story-photo-main { background: linear-gradient(150deg, #2a1e5e, #101538 65%, #0c2247); }

/* --- Framework cards enhancements --- */
.framework-card h3::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 13px; border-radius: 3px; background: rgba(255,255,255,.9); box-shadow: 0 0 12px rgba(255,255,255,.35); }
.framework-card h3 { margin-bottom: 16px; }
.framework-card .category-top, .framework-card h3, .framework-card p { position: relative; z-index: 1; }
.card-wm { position: absolute; right: -18px; bottom: -22px; width: 208px; height: 208px; opacity: .12; color: #fff; pointer-events: none; z-index: 0; }
.framework-card button { gap: 13px !important; }
.explore-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); transition: background .25s, transform .25s; }
.explore-arrow svg { width: 15px; height: 15px; }
.framework-card button:hover .explore-arrow { background: rgba(255,255,255,.28); transform: translateX(3px); }
/* framework heading description accent bar */
.framework-section .section-heading p { position: relative; padding-left: 22px; color: rgba(255,255,255,.62); max-width: 430px; }
.framework-section .section-heading p::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--cyan), var(--blue)); }

/* --- Preview section (dark redesign) --- */
.preview-tabs { border-bottom: 1px solid rgba(255,255,255,.09); }
.preview-tabs span { color: rgba(255,255,255,.5); }
.preview-tabs span.active { color: #fff; background: rgba(124,58,237,.28); }
.preview-content-head small { color: var(--cyan); }
.preview-content-head h3 { color: #fff; }
.preview-content > p { color: rgba(255,255,255,.6); }
.status-pill { border: 1px solid rgba(124,58,237,.32); background: rgba(124,58,237,.15); color: #cbb9ff; }
.status-pill svg { width: 14px; height: 14px; }

.preview-stats > div { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; box-shadow: none; }
.pv-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; margin-bottom: 12px; }
.pv-ic svg { width: 19px; height: 19px; }
.ic-blue { color: #7fb2ff; background: rgba(10,132,255,.16); }
.ic-teal { color: #7fe6d6; background: rgba(34,199,184,.16); }
.ic-purple { color: #cbb0ff; background: rgba(168,85,247,.16); }
.ic-orange { color: #ffcf8f; background: rgba(245,166,35,.16); }
.preview-stats strong { color: #fff; margin-top: 0; font-size: 1.55rem; }
.preview-stats small { color: rgba(255,255,255,.55); }

.preview-category-grid { margin-top: 22px; }
.mini-category { position: relative; min-height: 168px; overflow: hidden; }
.mini-category .mc-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; font-weight: 400; }
.mini-category .mc-ic svg { width: 20px; height: 20px; }
.mini-category strong { color: #fff; font-size: 1.02rem; }
.mini-category small { max-width: 80%; color: rgba(255,255,255,.78); }
.mini-category .mc-arrow { position: absolute; right: 15px; bottom: 15px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); }
.mini-category .mc-arrow svg { width: 15px; height: 15px; }

.preview-trust { grid-column: 1 / -1; margin: 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0; background: rgba(255,255,255,.02); }

.demo-cover { position: relative; overflow: hidden; }
.cover-pad { position: absolute; right: -16px; top: -12px; width: 128px; height: 128px; opacity: .28; color: #fff; }
.demo-cover small { display: inline-flex; align-items: center; gap: 6px; }
.demo-cover small svg { width: 14px; height: 14px; color: var(--cyan); }
.preview-try.button-primary { background: linear-gradient(135deg, var(--blue), #6D5CF5, var(--purple)); box-shadow: 0 12px 28px rgba(124,58,237,.3); }

/* --- CTA light band + gradient headline --- */
.cta-section { position: relative; padding: 78px 0 120px; }
.cta-section::before { content: ""; position: absolute; z-index: -1; left: 50%; transform: translateX(-50%); width: 100vw; top: -20px; bottom: -1px; background: linear-gradient(180deg, rgba(240,241,251,0) 0, #eef0fb 96px, #f4f5fe 100%); }
.cta-card h2 span { background: linear-gradient(100deg, #4da0ff, #b17bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-analyze.button-primary { background: linear-gradient(135deg, var(--blue), #6D5CF5, var(--purple)); box-shadow: 0 14px 32px rgba(124,58,237,.4); }

/* --- Footer redesign --- */
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: background .25s, transform .25s, border-color .25s; }
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover { background: rgba(124,58,237,.24); border-color: rgba(124,58,237,.5); transform: translateY(-2px); }
.footer-col strong { display: flex; align-items: center; gap: 8px; color: #fff; }
.fc-ic { width: 18px; height: 18px; color: var(--purple); }
.footer-news { align-items: stretch !important; padding: 22px !important; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); gap: 14px !important; }
.fn-head { display: flex; gap: 12px; align-items: flex-start; }
.fn-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: #cbb0ff; background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.3); }
.fn-ic svg { width: 20px; height: 20px; }
.fn-head strong { color: #fff; display: block; margin: 0; }
.fn-head small { color: rgba(255,255,255,.55); font-size: .82rem; display: block; margin-top: 3px; line-height: 1.4; }
.fn-form { display: flex; gap: 8px; }
.fn-form input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: .88rem; }
.fn-form input::placeholder { color: rgba(255,255,255,.4); }
.fn-form input:focus { outline: none; border-color: rgba(124,58,237,.6); background: rgba(255,255,255,.08); }
.fn-form button { width: 46px; flex: 0 0 auto; border: 0; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); cursor: pointer; }
.fn-form button svg { width: 18px; height: 18px; }
.fn-note { color: rgba(255,255,255,.42) !important; font-size: .76rem !important; }
.footer-bottom span { display: inline-flex; align-items: center; gap: 8px; }
.fb-ic { width: 15px; height: 15px; color: var(--teal); }
.fb-ic.heart { color: var(--purple); }

/* --- Mobile polish: trust bars stack --- */
@media (max-width: 760px) {
  .trust-bar { grid-template-columns: 1fr 1fr; gap: 6px 4px; }
  .trust-item { border-right: 0 !important; justify-content: flex-start; padding: 8px 10px; }
  .story-trust { grid-template-columns: 1fr; }
}

/* ============================================================
   MODAL SYSTEM — dark redesign (game picker + info modals)
   ============================================================ */
.modal-backdrop, .analysis-overlay { background: rgba(3,4,14,.72); backdrop-filter: blur(20px) saturate(120%); }
.modal {
  background: linear-gradient(165deg, rgba(24,19,52,.985), rgba(12,11,30,.99));
  border: 1px solid rgba(182,92,250,.22);
  box-shadow: 0 50px 140px rgba(3,2,16,.72), 0 0 64px rgba(124,58,237,.14), inset 0 1px 0 rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
}
.modal-header small { color: var(--cyan); }
.modal-header h2 { color: #fff; }
.modal .icon-button { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.modal .icon-button:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.2); }
.modal-intro { color: rgba(255,255,255,.6); }
.modal-content { color: rgba(255,255,255,.66); }
.modal-content h3 { color: #fff; }
.modal-content .domain-cloud span { background: rgba(10,132,255,.14); color: #8fbaff; border: 1px solid rgba(10,132,255,.26); }
.modal-footer { border-top: 1px solid rgba(255,255,255,.1); }
.modal-footer .button-quiet { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.14); box-shadow: none; }
.modal-footer .button-quiet:hover { background: rgba(255,255,255,.13); }
#confirmGameButton.button-primary { background: linear-gradient(135deg, var(--blue), #6D5CF5, var(--purple)); box-shadow: 0 12px 30px rgba(124,58,237,.4); }

/* Game match cards */
.game-match { background: rgba(255,255,255,.045); border: 2px solid rgba(255,255,255,.09); }
.game-match:hover { border-color: rgba(255,255,255,.18); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.game-match.selected { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10,132,255,.18), 0 18px 46px rgba(10,132,255,.22); }
.game-match-body strong { color: #fff; }
.game-match-body small { color: rgba(255,255,255,.55); }
.game-match-tags span { color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); }

/* ============================================================
   HERO VISUAL — elevated frame, cards, and motion
   ============================================================ */
.hero-photo-frame {
  border: 1px solid rgba(180,130,255,.3) !important;
  box-shadow: 0 52px 120px rgba(0,0,0,.5), 0 0 90px rgba(124,58,237,.22), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.hero-photo-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -70px 90px rgba(124,58,237,.2);
}
.hero-photo-frame figcaption { color: rgba(255,255,255,.84); }

.decision-card {
  background: linear-gradient(150deg, rgba(27,22,60,.84), rgba(18,14,44,.82)) !important;
  border: 1px solid rgba(180,130,255,.32) !important;
  box-shadow: 0 30px 74px rgba(4,3,20,.5), 0 0 52px rgba(124,58,237,.2), inset 0 1px 0 rgba(255,255,255,.22) !important;
  backdrop-filter: blur(22px);
}
.decision-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.decision-footer strong { color: #fff; font-size: .82rem; }
.decision-footer span { color: rgba(255,255,255,.5); font-size: .74rem; }
.decision-card li svg { color: var(--teal); filter: drop-shadow(0 0 6px rgba(34,199,184,.5)); }

.shield-orb { position: relative; box-shadow: 0 0 24px rgba(124,58,237,.3); }
.floating-score { border: 1px solid rgba(180,130,255,.3); box-shadow: 0 22px 54px rgba(4,3,20,.42), 0 0 40px rgba(124,58,237,.18); backdrop-filter: blur(20px); }
.floating-score > span { background: linear-gradient(135deg, var(--blue), #6D5CF5, var(--purple)); }
.floating-chip { box-shadow: 0 20px 50px rgba(0,0,0,.34), 0 0 30px rgba(124,58,237,.14), inset 0 1px 0 rgba(255,255,255,.2); }

@keyframes heroPop { from { opacity: 0; transform: translateY(16px) scale(.955); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes heroFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes heroZoom { 0%,100% { transform: scale(1.04); } 50% { transform: scale(1.085); } }
@keyframes heroShine { 0% { transform: translateX(-230%) rotate(18deg); } 55%,100% { transform: translateX(360%) rotate(18deg); } }
@keyframes heroRingPulse { 0% { transform: scale(1); opacity: .65; } 75%,100% { transform: scale(1.6); opacity: 0; } }
@keyframes heroLiPop { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-photo-frame img { animation: heroZoom 18s ease-in-out infinite; }
  .photo-reflection { animation: heroShine 7.5s ease-in-out infinite; animation-delay: 2s; }

  .floating-chip, .floating-score, .decision-card {
    animation: heroPop .8s cubic-bezier(.16,1,.3,1) both, heroFloatY 7s ease-in-out infinite 1s;
  }
  .decision-card { animation-delay: .15s, 1.1s; animation-duration: .8s, 9s; }
  .floating-score { animation-delay: .3s, 1.2s; animation-duration: .8s, 7.5s; }
  .chip-one { animation-delay: .45s, 1s; animation-duration: .8s, 6s; }
  .chip-two { animation-delay: .6s, 1.4s; animation-duration: .8s, 8s; }

  .floating-score > span { background-size: 200% 200%; animation: hehGradient 5.5s ease infinite; }
  .shield-orb::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(180,130,255,.55); animation: heroRingPulse 2.8s ease-out infinite; }

  .decision-card li { opacity: 0; animation: heroLiPop .5s ease-out forwards; }
  .decision-card li:nth-child(1) { animation-delay: .6s; }
  .decision-card li:nth-child(2) { animation-delay: .72s; }
  .decision-card li:nth-child(3) { animation-delay: .84s; }
  .decision-card li:nth-child(4) { animation-delay: .96s; }
  .decision-card li:nth-child(5) { animation-delay: 1.08s; }
}

/* ============================================================
   REPORT — dark redesign (screen only; print stays light)
   ============================================================ */
html { overflow-x: clip; }
@media screen {
  .report-main { background: linear-gradient(165deg, rgba(20,17,46,.94), rgba(11,12,29,.96)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 110px rgba(4,3,20,.5); }
  .report-nav { background: rgba(15,13,36,.9); border-bottom: 1px solid rgba(255,255,255,.09); }
  .report-nav button { color: rgba(255,255,255,.55); }
  .report-nav button.active, .report-nav button:hover { color: #fff; background: rgba(124,58,237,.3); }

  .report-kicker small { color: var(--cyan); }
  .report-date { color: rgba(255,255,255,.5); }
  .report-hero { border-bottom: 1px solid rgba(255,255,255,.09); }
  .report-hero h1 { color: #fff; }
  .report-hero > p { color: rgba(255,255,255,.64); }

  .quick-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
  .quick-stat svg { color: var(--cyan); }
  .quick-stat strong { color: #fff; }
  .quick-stat span { color: rgba(255,255,255,.5); }

  .disclaimer-box { background: rgba(247,216,74,.08); color: #efe4a8; border: 1px solid rgba(247,216,74,.22); }

  .report-section { border-bottom: 1px solid rgba(255,255,255,.09); }
  .report-section-head h2 { color: #fff; }
  .report-section-head p { color: rgba(255,255,255,.55); }

  .insight-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); }
  .insight-card h3 { color: #fff; }
  .insight-card li { color: rgba(255,255,255,.72); }

  .report-category { background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 15%, rgba(18,16,42,.92)), rgba(12,12,30,.94) 60%); border: 1px solid color-mix(in srgb, var(--cat) 28%, rgba(255,255,255,.06)); }
  .category-heading h3 { color: #fff; }
  .category-summary { color: rgba(255,255,255,.64); }
  .category-toggle { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; }
  .detail-block { background: none; border: 0; border-top: 1px solid rgba(255,255,255,.10); }
  .detail-block:first-child { border-top: 0; }
  .detail-block h4 { color: #fff; }
  .detail-block p, .detail-block ul { color: rgba(255,255,255,.7); }
  /* No tinted card any more — the amber heading and its icon carry the
     warning, and keeping the block flat keeps it in the same column as
     everything else in the category. */
  .detail-block.gap-block h4 { color: #F5A623; }
  .detail-block.gap-block h4 svg { color: #F5A623 !important; }

  .source-row { background: none; border: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .source-row:first-child { border-top: 0; }
  .source-row strong { color: #fff; }
  .source-row span { color: rgba(255,255,255,.6); }
  .source-row small { color: rgba(255,255,255,.4); }
  .source-row a { color: #8fbaff; background: rgba(10,132,255,.15); border: 1px solid rgba(10,132,255,.28); }

  .method-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
  .method-item strong { color: #fff; }
  .method-item p { color: rgba(255,255,255,.64); }

  .report-actions-band { background: linear-gradient(135deg, rgba(27,22,62,.92), rgba(13,42,82,.88)); border: 1px solid rgba(180,130,255,.26); box-shadow: 0 24px 60px rgba(4,3,20,.4), 0 0 44px rgba(124,58,237,.16); }
}

/* ============================================================
   BUTTERY MOTION — report entrance + micro-interactions
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .report-shell { animation: reportIn .75s cubic-bezier(.16,1,.3,1) both; }
  @keyframes reportIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .step-card, .mini-category, .source-row, .method-item, .insight-card, .story-points article, .game-match, .quick-stat {
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease, background .3s ease;
  }
  .mini-category:hover, .quick-stat:hover { transform: translateY(-3px); }
}
.button { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, filter .3s ease, background .3s ease; }
.button:hover { filter: brightness(1.06); }
.button:active { transform: scale(.985); }

/* ============================================================
   CARD & COVER POLISH — game-match cards, report cover, nav
   ============================================================ */
@media screen {
  .report-nav { position: static; background: #12102b; backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: none; border-radius: 20px 20px 0 0; }
}
.report-app { scroll-margin-top: 116px; }

/* Game-match cover — gaming texture + monogram */
.game-match-cover { position: relative; aspect-ratio: 16 / 7.6; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(152deg, var(--match-accent, #0A84FF) 0%, #0a1a3a 78%, #060f24 100%); }
.game-match-cover::before { content: ""; position: absolute; inset: 0; background: url('./assets/hero-cockpit.svg') center / 158% no-repeat; opacity: .22; mix-blend-mode: soft-light; }
.game-match-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 28% 0%, rgba(255,255,255,.24), transparent 55%), linear-gradient(0deg, rgba(4,10,26,.55), transparent 58%); }
.game-match-cover span { position: relative; z-index: 1; font-size: 2.3rem; font-weight: 900; letter-spacing: .01em; color: #fff; text-shadow: 0 4px 22px rgba(0,0,0,.42); }
.game-match-cover img { position: relative; z-index: 1; }

/* Game-match body — refined spacing */
.game-match-body { padding: 17px 19px 19px; display: flex; flex-direction: column; }
.game-match-body strong { font-size: 1.02rem; line-height: 1.24; letter-spacing: -.01em; }
.game-match-body small { margin-top: 5px; font-size: .8rem; line-height: 1.4; color: rgba(255,255,255,.6); }
.game-match-tags { margin-top: 14px; gap: 8px; row-gap: 8px; }
.game-match-tags span { padding: 5px 10px; border-radius: 9px; font-size: .68rem; line-height: 1.35; white-space: nowrap; }

/* Report cover — same premium treatment */
.report-cover { aspect-ratio: 4 / 4.4; }
.report-cover::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url('./assets/hero-cockpit.svg') center / 150% no-repeat; opacity: .18; mix-blend-mode: soft-light; }
.report-cover small, .report-cover strong { position: relative; z-index: 1; }

/* Hero decision card — checkmarks draw in with a pop */
@media (prefers-reduced-motion: no-preference) {
  @keyframes checkPop { 0% { opacity: 0; transform: scale(.2) rotate(-12deg); } 60% { transform: scale(1.16) rotate(0); } 100% { opacity: 1; transform: scale(1); } }
  .decision-card li svg { animation: checkPop .5s cubic-bezier(.2,1.5,.4,1) both; }
  .decision-card li:nth-child(1) svg { animation-delay: .68s; }
  .decision-card li:nth-child(2) svg { animation-delay: .8s; }
  .decision-card li:nth-child(3) svg { animation-delay: .92s; }
  .decision-card li:nth-child(4) svg { animation-delay: 1.04s; }
  .decision-card li:nth-child(5) svg { animation-delay: 1.16s; }
}

/* Hamburger: mobile only (desktop uses the horizontal nav) */
@media (max-width: 980px) { .menu-toggle { display: inline-grid; } }

/* Source chips — neutral but prominent */
.modal-content .domain-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-content .domain-cloud span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 12px;
  border-radius: 11px;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-size: .8rem; font-weight: 600; letter-spacing: .005em;
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.modal-content .domain-cloud span::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 9px rgba(124,58,237,.55);
}
.modal-content .domain-cloud span:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(124,58,237,.4) !important;
  color: #fff !important; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(4,3,20,.4);
}

/* ============================================================
   RESPONSIVE HARDENING
   ============================================================ */
/* Collapse the horizontal nav into the drawer before uppercase items crowd */
@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .menu-toggle { display: inline-grid; }
  .steps-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .steps-timeline { display: none; }
}
@media (max-width: 560px) {
  .step-card { min-height: 210px; }
}

/* Mobile/tablet hero: copy-focused; decorative visual hidden to prevent overlap */
@media (max-width: 980px) {
  .hero-visual { display: none !important; }
  .hero { min-height: 0 !important; padding-bottom: 44px !important; }
  .hero-copy { max-width: 100% !important; }
}

/* ============================================================
   MOBILE AUDIT FIXES (390–430px sweep, 2026-07-21)
   Appended last so these win the cascade at equal specificity.
   ============================================================ */

/* Old-browser fallback: some engines ignore overflow-x: clip */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* 1 · Hero must collapse to one column below 980px.
   (The theme layer's 1240px rule re-imposed two columns because it
   appears later in the file than the original 980px collapse.) */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 100%; }
  .search-panel { width: 100%; }
}

/* 2 · Phone-scale hero type: the 15vw clamp rendered ~59px lines
   with one word per line at 390px. */
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(2.6rem, 11.5vw, 3.6rem); line-height: .98; letter-spacing: -.045em; }
  .hero { padding-top: 46px; }
  .hero::before { width: 420px; height: 420px; right: -160px; filter: blur(64px); }
}
@media (max-width: 430px) {
  .hero h1 { font-size: clamp(2.35rem, 11vw, 2.9rem); }
  .section-heading h2 { font-size: 2.1rem; }
  .story-copy h2 { font-size: 2.2rem; }
}

/* 3 · Decorative layers may never widen the page on phones. */
@media (max-width: 720px) {
  .ambient { max-width: 92vw; }
  .ambient-two { right: -34vw; }
  .ambient-three { left: 30%; max-width: 80vw; }
  .story-orb { width: min(430px, 88vw); height: min(430px, 88vw); right: -18vw; }
  .card-wm { right: 4px; bottom: -14px; width: 168px; height: 168px; }
  .hero-visual { overflow: clip; border-radius: 34px; }
}

/* 4 · Tap targets: 44px minimum on touch-critical controls. */
.search-footer { gap: 6px 2px; }
.search-footer button {
  min-height: 44px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.05);
}
.footer-grid button {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 10px 0; margin: -5px 0;
}
.footer-grid > div:not(.footer-brand) { gap: 2px; }
.social-btn { width: 44px; height: 44px; }
.report-nav button { min-height: 44px; padding: 11px 13px; }
.preview-tabs span { padding-block: 13px; }
.brand { padding: 4px 6px; margin-left: -6px; border-radius: 12px; }
@media (max-width: 720px) {
  .menu-toggle { width: 44px; height: 44px; }
  .new-analysis-button { min-width: 46px; width: 46px; min-height: 46px; }
}

/* 5 · Breathing room for the stacked hero on phones. */
@media (max-width: 720px) {
  .hero { gap: 26px; }
  .hero-visual { min-height: 400px; }
  .decision-card { right: -6px; }
}

/* 6 · Footer photo-credit link needs a comfortable touch size. */
.photo-credit a { display: inline-block; padding: 12px 4px; margin: -10px 0; }

/* ============================================================
   MOBILE PASS 2 (2026-07-22): app-like viewport lock + nav fixes
   ============================================================ */

/* 1 · Kill pinch-zoom and zoom-panning at the gesture level.
   pan-y still allows normal vertical scrolling; manipulation on
   controls removes double-tap-to-zoom and the 300ms tap delay. */
html, body { touch-action: pan-y; }
button, a, input, select, textarea, [role="button"], [role="tab"] { touch-action: pan-x pan-y; }
body {
  overscroll-behavior-y: none;   /* no pull-to-refresh / rubber-band pan */
  -webkit-tap-highlight-color: transparent;
}

/* 2 · iOS auto-zooms into inputs below 16px — never trigger it. */
.fn-form input { font-size: 16px; }

/* 3 · Keep the header (and its ☰/✕ toggle) above the drawer backdrop
   so the button stays tappable while the menu is open.
   (backdrop z-70, drawer z-80, header was z-50 → buried.) */
.site-header { z-index: 75; }

/* 4 · Drawer must never run off short screens; scroll inside instead. */
.nav-drawer {
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 5 · Scrollable tab strips shouldn't chain-scroll the page. */
.preview-tabs, .report-nav { overscroll-behavior-x: contain; touch-action: pan-x; }

/* ============================================================
   MOBILE PASS 3 (2026-07-22): overlap fixes + buttery motion
   ============================================================ */

/* 1 · Framework cards: the "Explore category" button is pinned to the
   card bottom, so the card must always reserve that zone — long
   descriptions were flowing underneath the label. */
.framework-card { padding-bottom: 84px; }
.framework-card p { margin-bottom: 0; }
@media (max-width: 720px) {
  .framework-card { min-height: 0; }  /* let content + reserved zone size the card */
}

/* 2 · Buttery reveals: small fade + rise, short and soft. Blur and scale
   transitions are dropped — they read as chunky and are expensive on
   mobile GPUs. Above-the-fold content never gets .reveal-ready at all. */
@media screen {
  .reveal-ready {
    opacity: 0;
    translate: 0 12px;
    scale: 1;
    filter: none;
    transition: opacity .45s cubic-bezier(.25,.46,.45,.94),
                translate .5s cubic-bezier(.22,.61,.21,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal-ready.is-visible { opacity: 1; translate: 0 0; }
}

/* 3 · Swipeable strips: fade the clipped edge so truncated tabs read as
   "more to scroll", not broken text. */
.preview-tabs, .report-nav {
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 99%);
  mask-image: linear-gradient(90deg, #000 90%, transparent 99%);
}

/* 4 · Touch devices get gentler card motion (no hover-lift jumps). */
@media (hover: none) {
  .framework-card:hover, .step-card:hover { transform: none; }
  .hero-trust-grid article:hover { transform: none; }
}

/* ============================================================
   BRAND PASS (2026-07-22): official healthe Gaming logo
   ============================================================ */
.brand img { height: auto; }            /* keep the wordmark's true ratio */
@media (max-width: 720px) {
  .brand img { width: 78px; height: auto; }
}
.footer-brand img { height: auto; }

/* ============================================================
   NAV PASS (2026-07-22): premium drawer + clear "+" action
   ============================================================ */

/* Safe areas: keep the floating header out of the notch and give the
   sheet breathing room above the home indicator. */
@media (max-width: 720px) {
  .site-header { padding-top: max(9px, env(safe-area-inset-top)); }
}
.nav-drawer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* Drawer surface: deeper glass, purple hairline, springier drop-in. */
.nav-drawer {
  background:
    radial-gradient(circle at 80% 0%, rgba(124,58,237,.28), transparent 42%),
    linear-gradient(165deg, rgba(26,20,56,.97), rgba(11,10,28,.97));
  border: 1px solid rgba(182,92,250,.34);
  box-shadow: 0 34px 90px rgba(4,3,16,.7), 0 0 52px rgba(124,58,237,.26),
              inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  transform: translateY(-16px) scale(.96);
  transition: opacity .3s var(--ease),
              transform .44s cubic-bezier(.3, 1.35, .4, 1),
              visibility .3s;
}
.nav-drawer.open { transform: translateY(0) scale(1); }
.nav-drawer-backdrop {
  background: rgba(3, 4, 14, .62);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
.nav-drawer-grabber { opacity: .6; }

/* Gentle stagger: items settle in one after another on open,
   reset instantly on close. */
.nav-drawer .drawer-link, .nav-drawer .drawer-cta {
  opacity: 0;
  translate: 0 -8px;
}
.nav-drawer.open .drawer-link, .nav-drawer.open .drawer-cta {
  opacity: 1;
  translate: 0 0;
  transition: opacity .3s ease, translate .38s cubic-bezier(.22,.61,.21,1),
              background .18s var(--ease), transform .18s var(--ease);
}
.nav-drawer.open .drawer-link:nth-child(1) { transition-delay: 40ms; }
.nav-drawer.open .drawer-link:nth-child(2) { transition-delay: 80ms; }
.nav-drawer.open .drawer-link:nth-child(3) { transition-delay: 120ms; }
.nav-drawer.open .drawer-link:nth-child(4) { transition-delay: 160ms; }
.nav-drawer.open .drawer-link:nth-child(5) { transition-delay: 200ms; }
.nav-drawer.open .drawer-cta { transition-delay: 250ms; }

/* Clear active state for the current section. */
.drawer-link.is-active {
  background: linear-gradient(90deg, rgba(124,58,237,.26), rgba(124,58,237,.08));
}
.drawer-link.is-active .dl-icon { background: rgba(124,58,237,.34); color: #E7D9FF; }

/* Touch feedback: quick, tactile presses. */
.drawer-link:active { background: rgba(124,58,237,.3); transform: scale(.98); transition-duration: .08s; }
.menu-toggle:active { transform: scale(.9); transition: transform .1s var(--ease); }
.new-analysis-button:active { transform: scale(.94); transition: transform .1s var(--ease); }

/* "+" button: labelled at every size — icon-only squares read as mystery
   buttons. Desktop keeps "New Analysis", phones get a compact "+ New". */
.na-short { display: none; }
@media (max-width: 720px) {
  .new-analysis-button {
    width: auto; min-width: 0;
    padding: 0 15px 0 12px; gap: 6px;
    font-size: .84rem;
  }
  .new-analysis-button svg { width: 16px; height: 16px; }
  .na-long { display: none; }
  .na-short { display: inline; font-size: .84rem; }
}

/* Reduced motion: everything appears instantly. */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer .drawer-link, .nav-drawer .drawer-cta {
    opacity: 1 !important; translate: none !important; transition: none !important;
  }
}

/* NAV PASS fixups: the old `.new-analysis-button span { font-size: 0 }`
   rule outranked .na-short — match its specificity. */
@media (max-width: 720px) {
  .new-analysis-button .na-short { font-size: .84rem; display: inline; }
  .new-analysis-button .na-long { display: none; }
}

/* ============================================================
   PERFORMANCE PASS (2026-07-22): 60fps mobile
   ============================================================ */

/* 1 · Phones: no infinite paint/composite work.
   background-position animations repaint every frame (flagged by
   Lighthouse as non-composited), and huge blurred/blended layers tax
   mobile GPUs — freeze them to their resting state on small screens. */
@media (max-width: 720px) {
  .hero h1 span,
  .button-primary,
  .cta-analyze,
  .floating-score > span { animation: none !important; }          /* hehGradient */
  .ambient { animation: none !important; mix-blend-mode: normal; opacity: .5; filter: blur(70px); }
  .hero::before { animation: none !important; }                    /* rotating blurred ring */
  .orbit-one, .orbit-two { animation: none !important; }
  .hero-photo-frame img { animation: none !important; }            /* slow Ken Burns zoom */
  .photo-reflection { animation: none !important; }
  .decision-card { animation-name: heroPop !important; }           /* keep entrance, drop endless float */
}

/* 2 · Header shrink-on-scroll animated layout (padding/min-height) every
   frame at the scroll boundary — phones get a fixed-size header and
   cheap transitions only. */
@media (max-width: 720px) {
  .site-header { transition: none; }
  .site-header.is-compact { padding-top: max(9px, env(safe-area-inset-top)); }
  .site-header.is-compact .header-shell { min-height: 66px; }
  .header-shell { transition: background .35s ease, border-color .35s ease; }
}

/* 3 · Instant tactile feedback (<100ms) on every control. */
.button:active,
.suggestion-option:active,
.game-match:active,
.search-footer button:active,
.footer-grid button:active,
.nav-link:active,
.category-toggle:active,
.report-nav button:active {
  transform: scale(.97);
  transition: transform .07s ease-out;
}

/* 4 · Hover-only shadow/lift work should never bind on touch devices. */
@media (hover: none) {
  .button, .step-card, .framework-card, .game-match, .suggestion-option {
    transition-property: transform, background, border-color, color, opacity;
  }
}

/* ============================================================
   DARK CONSISTENCY PASS (2026-07-22): no light sections
   ============================================================ */

/* The CTA band was the last light surface on the page — a full-width
   #eef0fb→#f4f5fe panel behind the closing card. It now matches the
   navy/purple system: a soft violet bloom over a deep panel. */
.cta-section::before {
  background:
    radial-gradient(46rem 22rem at 50% 30%, rgba(124, 58, 237, .18), transparent 66%),
    radial-gradient(30rem 16rem at 12% 85%, rgba(34, 199, 184, .08), transparent 60%),
    linear-gradient(180deg, rgba(10, 11, 30, 0), rgba(17, 15, 42, .78) 96px, rgba(9, 10, 26, .92) 100%);
}

/* Card treatment tuned for the dark surface: purple hairline + glow so it
   still lifts off the background the way it did off the light band. */
.cta-card {
  border: 1px solid rgba(182, 92, 250, .24);
  box-shadow: 0 34px 90px rgba(4, 3, 16, .6), 0 0 46px rgba(124, 58, 237, .16),
              inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* ============================================================
   FOOTER MOBILE PASS (2026-07-22): compact, intentional stack
   ============================================================ */
@media (max-width: 720px) {
  /* Centered brand header */
  .footer-grid > div.footer-brand {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 4px;
  }
  .footer-brand .footer-social { justify-content: center; }

  /* Product + Trust side by side instead of an endless single column */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }

  /* "Built for" becomes a full-width chip row (they're labels, not links) */
  .footer-grid > div:nth-child(4) {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  .footer-grid > div:nth-child(4) strong { flex-basis: 100%; margin-bottom: 4px; }
  .footer-grid > div:nth-child(4) span {
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11);
    font-size: .79rem; color: rgba(255,255,255,.62);
  }

  /* Newsletter card spans full width below the links */
  .footer-grid > div.footer-news { grid-column: 1 / -1; }

  /* Legal block: centered, calm rhythm, clear of the home indicator */
  .footer-bottom {
    flex-direction: column; align-items: center; text-align: center;
    gap: 12px; margin-top: 40px; padding-top: 22px;
  }
  .site-footer { padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px)); }
}

/* ============================================================
   SPLASH SCREEN (2026-07-22): pixel-art loader, fades when ready
   ============================================================ */
html.splash-lock { overflow: hidden; }
.splash {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background:
    radial-gradient(46rem 30rem at 70% 12%, rgba(124,58,237,.28), transparent 62%),
    radial-gradient(34rem 22rem at 12% 88%, rgba(34,199,184,.14), transparent 60%),
    linear-gradient(165deg, #05060f, #0b0a22 55%, #070915);
  opacity: 1;
  transition: opacity .45s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-inner { display: grid; justify-items: center; gap: 26px; padding: 20px; }

/* Pixel gamepad sprite: one node, one paint; only transform animates. */
.px-pad { --p: clamp(9px, 2.4vw, 14px); filter: drop-shadow(0 12px 26px rgba(124,58,237,.45)); width: calc(var(--p)*16); height: calc(var(--p)*9);
  animation: pxHop 1.1s steps(2, jump-none) infinite; }
.px-pad i {
  display: block; width: var(--p); height: var(--p);
  box-shadow:
    calc(var(--p)*2) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*3) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*4) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*5) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*10) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*11) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*12) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*13) calc(var(--p)*0) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*1) 0 .5px #241744,
    calc(var(--p)*2) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*3) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*4) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*5) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*6) calc(var(--p)*1) 0 .5px #241744,
    calc(var(--p)*9) calc(var(--p)*1) 0 .5px #241744,
    calc(var(--p)*10) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*11) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*12) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*13) calc(var(--p)*1) 0 .5px #8B3DEB,
    calc(var(--p)*14) calc(var(--p)*1) 0 .5px #241744,
    calc(var(--p)*0) calc(var(--p)*2) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*2) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*3) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*4) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*5) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*6) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*7) calc(var(--p)*2) 0 .5px #241744,
    calc(var(--p)*8) calc(var(--p)*2) 0 .5px #241744,
    calc(var(--p)*9) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*10) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*11) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*12) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*13) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*14) calc(var(--p)*2) 0 .5px #8B3DEB,
    calc(var(--p)*15) calc(var(--p)*2) 0 .5px #241744,
    calc(var(--p)*0) calc(var(--p)*3) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*2) calc(var(--p)*3) 0 .5px #C084FC,
    calc(var(--p)*3) calc(var(--p)*3) 0 .5px #71E6FF,
    calc(var(--p)*4) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*5) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*6) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*7) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*8) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*9) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*10) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*11) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*12) calc(var(--p)*3) 0 .5px #F0ABFC,
    calc(var(--p)*13) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*14) calc(var(--p)*3) 0 .5px #8B3DEB,
    calc(var(--p)*15) calc(var(--p)*3) 0 .5px #241744,
    calc(var(--p)*0) calc(var(--p)*4) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*2) calc(var(--p)*4) 0 .5px #71E6FF,
    calc(var(--p)*3) calc(var(--p)*4) 0 .5px #71E6FF,
    calc(var(--p)*4) calc(var(--p)*4) 0 .5px #71E6FF,
    calc(var(--p)*5) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*6) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*7) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*8) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*9) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*10) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*11) calc(var(--p)*4) 0 .5px #F0ABFC,
    calc(var(--p)*12) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*13) calc(var(--p)*4) 0 .5px #F0ABFC,
    calc(var(--p)*14) calc(var(--p)*4) 0 .5px #8B3DEB,
    calc(var(--p)*15) calc(var(--p)*4) 0 .5px #241744,
    calc(var(--p)*0) calc(var(--p)*5) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*2) calc(var(--p)*5) 0 .5px #C084FC,
    calc(var(--p)*3) calc(var(--p)*5) 0 .5px #71E6FF,
    calc(var(--p)*4) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*5) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*6) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*7) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*8) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*9) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*10) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*11) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*12) calc(var(--p)*5) 0 .5px #F0ABFC,
    calc(var(--p)*13) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*14) calc(var(--p)*5) 0 .5px #8B3DEB,
    calc(var(--p)*15) calc(var(--p)*5) 0 .5px #241744,
    calc(var(--p)*0) calc(var(--p)*6) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*2) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*3) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*4) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*5) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*6) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*7) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*8) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*9) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*10) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*11) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*12) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*13) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*14) calc(var(--p)*6) 0 .5px #8B3DEB,
    calc(var(--p)*15) calc(var(--p)*6) 0 .5px #241744,
    calc(var(--p)*0) calc(var(--p)*7) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*2) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*3) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*4) calc(var(--p)*7) 0 .5px #241744,
    calc(var(--p)*5) calc(var(--p)*7) 0 .5px #241744,
    calc(var(--p)*6) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*7) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*8) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*9) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*10) calc(var(--p)*7) 0 .5px #241744,
    calc(var(--p)*11) calc(var(--p)*7) 0 .5px #241744,
    calc(var(--p)*12) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*13) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*14) calc(var(--p)*7) 0 .5px #8B3DEB,
    calc(var(--p)*15) calc(var(--p)*7) 0 .5px #241744,
    calc(var(--p)*1) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*2) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*3) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*6) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*7) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*8) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*9) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*12) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*13) calc(var(--p)*8) 0 .5px #241744,
    calc(var(--p)*14) calc(var(--p)*8) 0 .5px #241744;
}
@keyframes pxHop { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7%) rotate(2deg); } }

/* Wordmark caption */
.splash-word { font-weight: 850; letter-spacing: .34em; font-size: clamp(.72rem, 2vw, .9rem);
  color: rgba(255,255,255,.85); text-transform: uppercase; padding-left: .34em; }
.splash-word b { color: #C084FC; }

/* Chunky pixel progress bar */
.px-bar { position: relative; width: min(240px, 60vw); height: calc(clamp(9px,2.4vw,14px)*1.15);
  border: 2px solid rgba(255,255,255,.22); border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.05); }
.px-bar span { display: block; height: 100%; width: 10%;
  background: linear-gradient(90deg, #71E6FF, #8B3DEB 70%, #C084FC);
  transition: width .35s steps(6, jump-none); }
.px-bar::after { content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%); animation: pxSheen 1.2s linear infinite; }

/* Drifting pixel motes */
.px-mote { position: absolute; width: 8px; height: 8px; opacity: .5; }
.px-mote.m1 { left: 16%; top: 24%; background: #71E6FF; animation: moteDrift 3.2s ease-in-out infinite; }
.px-mote.m2 { right: 14%; top: 34%; background: #C084FC; animation: moteDrift 4.1s ease-in-out infinite reverse; }
.px-mote.m3 { left: 24%; bottom: 22%; background: #8B3DEB; animation: moteDrift 3.7s ease-in-out infinite .6s; }
.px-mote.m4 { right: 22%; bottom: 16%; background: #F0ABFC; animation: moteDrift 4.5s ease-in-out infinite .3s; }
@keyframes moteDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,-16px); } }
@keyframes pxSheen { to { transform: translateX(340%); } }

@media (prefers-reduced-motion: reduce) {
  .px-pad, .px-bar::after, .px-mote { animation: none !important; }
  .splash { transition: opacity .2s linear; }
}

/* ============================================================
   SPLASH PERF REWORK (2026-07-22): compositor-only splash
   - sprite pre-rendered to an SVG layer (no box-shadow art, no filter)
   - glow is a static radial-gradient layer (no drop-shadow, no blur())
   - bar fills via scaleX transform (no width/layout)
   - all motion = stepped/eased transforms + one opacity fade
   ============================================================ */
.px-pad i { display: none; }
.px-pad {
  filter: none !important;
  background: center / contain no-repeat url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%209%22%20shape-rendering=%22crispEdges%22%3E%3Crect%20x=%222%22%20y=%220%22%20width=%224%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%2210%22%20y=%220%22%20width=%224%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%221%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%222%22%20y=%221%22%20width=%224%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%226%22%20y=%221%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%229%22%20y=%221%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%2210%22%20y=%221%22%20width=%224%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2214%22%20y=%221%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%220%22%20y=%222%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%222%22%20width=%226%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%227%22%20y=%222%22%20width=%222%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%229%22%20y=%222%22%20width=%226%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2215%22%20y=%222%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%220%22%20y=%223%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%223%22%20width=%221%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%222%22%20y=%223%22%20width=%221%22%20height=%221%22%20fill=%22%23C084FC%22/%3E%3Crect%20x=%223%22%20y=%223%22%20width=%221%22%20height=%221%22%20fill=%22%2371E6FF%22/%3E%3Crect%20x=%224%22%20y=%223%22%20width=%228%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2212%22%20y=%223%22%20width=%221%22%20height=%221%22%20fill=%22%23F0ABFC%22/%3E%3Crect%20x=%2213%22%20y=%223%22%20width=%222%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2215%22%20y=%223%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%220%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%222%22%20y=%224%22%20width=%223%22%20height=%221%22%20fill=%22%2371E6FF%22/%3E%3Crect%20x=%225%22%20y=%224%22%20width=%226%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2211%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%23F0ABFC%22/%3E%3Crect%20x=%2212%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2213%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%23F0ABFC%22/%3E%3Crect%20x=%2214%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2215%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%220%22%20y=%225%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%225%22%20width=%221%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%222%22%20y=%225%22%20width=%221%22%20height=%221%22%20fill=%22%23C084FC%22/%3E%3Crect%20x=%223%22%20y=%225%22%20width=%221%22%20height=%221%22%20fill=%22%2371E6FF%22/%3E%3Crect%20x=%224%22%20y=%225%22%20width=%228%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2212%22%20y=%225%22%20width=%221%22%20height=%221%22%20fill=%22%23F0ABFC%22/%3E%3Crect%20x=%2213%22%20y=%225%22%20width=%222%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2215%22%20y=%225%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%220%22%20y=%226%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%226%22%20width=%2214%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2215%22%20y=%226%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%220%22%20y=%227%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%227%22%20width=%223%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%224%22%20y=%227%22%20width=%222%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%226%22%20y=%227%22%20width=%224%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2210%22%20y=%227%22%20width=%222%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%2212%22%20y=%227%22%20width=%223%22%20height=%221%22%20fill=%22%238B3DEB%22/%3E%3Crect%20x=%2215%22%20y=%227%22%20width=%221%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%221%22%20y=%228%22%20width=%223%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%226%22%20y=%228%22%20width=%224%22%20height=%221%22%20fill=%22%23241744%22/%3E%3Crect%20x=%2212%22%20y=%228%22%20width=%223%22%20height=%221%22%20fill=%22%23241744%22/%3E%3C/svg%3E');
  image-rendering: pixelated;
  will-change: transform;
}
.px-wrap { position: relative; display: grid; place-items: center; }
.px-glow {
  position: absolute; width: 240%; height: 260%;
  background: radial-gradient(closest-side, rgba(124,58,237,.42), rgba(124,58,237,.12) 55%, transparent 72%);
  pointer-events: none;
}
.px-mote { will-change: transform; }
.px-bar span {
  width: 100% !important;
  transform-origin: left center;
  transform: scaleX(.08);
  transition: transform .35s steps(6, jump-none);
  will-change: transform;
}
.splash { will-change: opacity; }
@media (prefers-reduced-motion: reduce) {
  .px-bar span { transition: none; }
}

/* ============================================================
   MENU 60FPS PASS (2026-07-22): compositor-only nav system
   ============================================================ */

/* Drawer surface: its background is already 97% opaque, so the 24px
   backdrop-filter added invisible cost — WebKit re-samples the backdrop
   every frame of the spring animation. Gone. Layer-promote the sheet and
   its staggered children for their animation lifetimes. */
.nav-drawer {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: transform, opacity;
}
.nav-drawer .drawer-link, .nav-drawer .drawer-cta { will-change: translate, opacity; }

/* Backdrop dim: full-screen backdrop-filter while opacity-fading is the
   classic mobile WebKit repaint trap — swap for a slightly deeper plain
   dim, which composites as a single opacity-fading layer. */
.nav-drawer-backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(3, 4, 14, .74);
  will-change: opacity;
}

/* Hamburger→X: icon swap is transform/opacity (already compositor).
   The button's border/background/box-shadow transitions are hover-only
   paint on a 46px circle — restricted to cheap props on touch. */
@media (hover: none) {
  .menu-toggle { transition: transform .1s var(--ease); }
}

/* Same treatment for the other overlay dims + heavy glass on phones:
   modal backdrop, analysis overlay, and the suggestions dropdown all have
   near-opaque fills; the sticky header keeps its glass but at a cheaper
   radius while scrolling. */
@media (max-width: 720px) {
  .modal-backdrop, .analysis-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(2, 4, 12, .84);
  }
  .suggestion-list { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header-shell {
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
  }
}

/* Backdrop participates via visibility (discrete) + opacity (composited)
   instead of display flips — no layout on open/close. */
.nav-drawer-backdrop { visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.nav-drawer-backdrop.open { visibility: visible; opacity: 1; }

/* ============================================================
   RAWG ARTWORK (2026-07-22): credit line + cover art fit
   ============================================================ */
.rawg-credit { display: block; margin-top: 10px; font-size: .68rem; color: rgba(255,255,255,.38); }
.rawg-credit a { color: rgba(255,255,255,.55); text-decoration: underline; }
.report-sidebar .rawg-credit { margin-top: 8px; }
.game-match-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.game-match-cover img + span, .game-match-cover span { z-index: 1; }
.game-match-cover:has(img) > span:not(.gm-play) { display: none; }  /* initials yield to art */
.report-cover img { z-index: 0; }
.report-cover .cover-overlay { z-index: 0; }

/* ============================================================
   IGDB ART QA (2026-07-23): portrait box art done right
   ============================================================ */

/* Match tiles: blurred art fills the landscape tile; the sharp portrait
   cover sits contained on top with its own card treatment. Both fade in
   (opacity only) once loaded — the tile box is already reserved, so
   there is zero layout shift. */
.game-match-cover img.gm-art-bg {
  position: absolute; inset: -10%;
  width: 120%; height: 120%;
  object-fit: cover;
  filter: blur(16px) saturate(1.2) brightness(.82);
  border-radius: 0;
  opacity: 0; z-index: 0;
}
.game-match-cover img.gm-art {
  position: relative; z-index: 2;
  width: auto; height: 86%;
  max-width: 56%;
  object-fit: contain;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  opacity: 0;
}
.game-match-cover.has-art img.gm-art,
.game-match-cover.has-art img.gm-art-bg {
  opacity: 1;
  transition: opacity .4s ease;
}
.game-match-cover.has-art > span:not(.gm-play) { display: none; }   /* initials yield */
.game-match-cover.has-art::before { opacity: 0; }      /* drop cockpit watermark behind real art */

/* Report cover: portrait 2x art in a portrait tile (object-fit: cover is
   now a near-native fit), stronger scrim so the title stays legible on
   light or busy art, plus a fade-in. */
.report-cover img { opacity: 0; }
.report-cover.has-art img { opacity: 1; transition: opacity .4s ease; }
.report-cover img + .cover-overlay {
  background:
    linear-gradient(0deg, rgba(2, 9, 19, .94) 0%, rgba(2, 9, 19, .55) 34%, rgba(2, 9, 19, .16) 60%, rgba(2, 9, 19, .1) 100%);
}
.report-cover.has-art small { color: #7BE7FF; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.report-cover.has-art strong { text-shadow: 0 2px 12px rgba(0,0,0,.7); }

/* Report cover scrim v2: top band keeps the eyebrow label readable on
   light art; the bottom rises higher for long, wrapped titles. */
.report-cover img + .cover-overlay {
  background: linear-gradient(180deg,
    rgba(2, 9, 19, .58) 0%, rgba(2, 9, 19, .14) 20%,
    rgba(2, 9, 19, .2) 42%, rgba(2, 9, 19, .72) 60%,
    rgba(2, 9, 19, .96) 100%);
}

/* ============================================================
   SELECTED-GAME PREVIEW ART (2026-07-23)
   ============================================================ */
.demo-cover { position: relative; overflow: hidden; }
.demo-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; z-index: 0;
}
.demo-cover.has-art img { opacity: 1; transition: opacity .4s ease; }
.demo-cover.has-art .cover-pad,
.demo-cover.has-art span,
.demo-cover.has-art strong { display: none; }  /* labels live outside the art now */
.demo-cover.has-art { box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 20px 44px rgba(0,0,0,.34); }

/* "Sample report" as a chip beside the section label */
.pm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sample-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .67rem; font-weight: 750; letter-spacing: .04em;
  color: #7BE7FF; background: rgba(53, 212, 232, .12);
  border: 1px solid rgba(53, 212, 232, .3);
}
.sample-chip svg { width: 11px; height: 11px; }

/* Meta rows: slightly larger, calmer rhythm beside real art */
.preview-meta h3 { margin-top: 10px; }
.preview-meta dl > div { font-size: .8rem; padding-bottom: 10px; }
.preview-meta dd { font-weight: 650; }
.preview-meta .rawg-credit { margin-top: 12px; }
@media (max-width: 720px) {
  .preview-sidebar { grid-template-columns: 132px 1fr; }
  .demo-cover { aspect-ratio: 3 / 4; align-self: start; }
}

/* Preview credit: subtle, like everywhere else (not section-label caps) */
.preview-meta > small.rawg-credit {
  text-transform: none; letter-spacing: 0;
  color: rgba(255,255,255,.38); font-weight: 500;
}

/* ============================================================
   PRINT OVERHAUL (2026-07-23): branded, premium PDF report
   ============================================================ */
.print-letterhead, .print-footer { display: none; }   /* print-only */

@media print {
  @page { margin: 15mm 13mm 20mm; }

  /* --- Branded letterhead: navy banner, real logo, purple accent --- */
  .print-letterhead {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.22in;
    background: linear-gradient(120deg, #0B0A22 0%, #171233 55%, #241744 100%) !important;
    border-bottom: 3px solid #7C3AED !important;
    border-radius: 10px;
    padding: 0.16in 0.22in;
    margin-bottom: 0.26in;
    break-inside: avoid;
    break-after: avoid;
  }
  .print-letterhead img { width: 1.15in; height: auto; }
  .print-letterhead .plh-text strong {
    display: block; color: #fff !important;
    font-size: 13pt; letter-spacing: .02em;
  }
  .print-letterhead .plh-text small { color: #B9A8E8 !important; font-size: 8pt; letter-spacing: .06em; text-transform: uppercase; }
  .print-letterhead .plh-meta { text-align: right; }
  .print-letterhead .plh-meta span { display: block; color: #E7DFFF !important; font-size: 9.5pt; font-weight: 700; }
  .print-letterhead .plh-meta small { color: #8f83b8 !important; font-size: 7.5pt; }

  /* --- Repeating footer on every page (fixed repeats in print) --- */
  /* Chromium doesn't repeat fixed elements per printed page, so the
     footer is a document colophon: always present, never misplaced.
     (Per-page numbers come from the browser's own print header/footer.) */
  .print-footer {
    display: flex !important;
    justify-content: space-between; gap: 12px;
    border-top: 2px solid #7C3AED !important;
    margin-top: 0.28in;
    padding: 8px 2px 0;
    font-size: 7.5pt; color: #6b6486 !important;
    break-inside: avoid;
  }

  /* --- Game identity row: real box art as a proper 3:4 plate --- */
  .report-sidebar {
    border-bottom: 2px solid #7C3AED !important;
    grid-template-columns: 1.2in 1fr;
  }
  .report-cover {
    aspect-ratio: 3 / 4 !important;
    min-height: 0 !important;
    width: 1.2in;
    border-radius: 8px;
    border: 1px solid #d9d2ea !important;
    overflow: hidden;
  }
  .report-cover img { opacity: 1 !important; }
  .report-cover.has-art small, .report-cover.has-art strong { text-shadow: 0 1px 6px rgba(0,0,0,.8); }

  /* --- Purple/navy hierarchy instead of the old blue accents --- */
  .report-kicker small { color: #7C3AED !important; letter-spacing: .1em; }
  .report-hero h1 { color: #191046 !important; }
  .report-section-head h2 { color: #191046 !important; position: relative; padding-left: 12px; }
  .report-section-head h2::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
    border-radius: 2px; background: linear-gradient(180deg, #7C3AED, #35D4E8) !important;
  }
  .quick-stat { border: 1px solid #e2dcf2 !important; background: #f8f6fe !important; }
  .quick-stat svg { color: #7C3AED !important; }
  .quick-stat strong { color: #191046 !important; }
  .insight-card h3, .method-item strong, .detail-block h4 { color: #191046 !important; }
  .report-game-info h2 { color: #191046 !important; }
  .category-heading h3 { color: #191046 !important; }
  .source-row a { color: #6D28D9 !important; }
  .source-row a::after { color: #6D28D9 !important; }
  .report-hero { border-bottom: 1px solid #e2dcf2; }
  .report-section { border-bottom: 1px solid #eee9f8; }

  /* --- Page-break hygiene: long categories may flow across pages,
         but headings never orphan and blocks stay whole --- */
  .report-category { break-inside: auto; }
  .category-heading { break-after: avoid; break-inside: avoid; }
  .detail-block, .quick-stats, .insight-card, .source-row { break-inside: avoid; }
  .report-sidebar { break-inside: avoid; }

  /* keep interactive-only chrome out of the PDF */
  .rawg-credit { display: none; }              /* covered by the footer attribution */
  .sample-chip { border: 1px solid #C4B5FD !important; color: #6D28D9 !important; background: #F5F1FF !important; }
}

/* ============================================================
   WINDOW-FIT PASS (2026-07-23): every overlay fits the *visible*
   viewport on iOS — dvh instead of vh, safe-area padding, and
   internal scrolling for tall content.
   ============================================================ */
@media (max-width: 720px) {
  .modal, .analysis-card {
    max-height: calc(100vh - 20px);                                    /* old-browser fallback */
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom));     /* visible viewport */
  }
  .modal-backdrop, .analysis-overlay {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
}
/* Analysis overlay: the 9-stage list scrolls inside the card, so the
   Cancel button can never fall off-screen. */
.analysis-stages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.analysis-card > .button, .analysis-card .analysis-progress { flex: none; }

/* Confirm modal internals: grid scrolls, footer buttons stay pinned. */
.modal-wide .game-match-grid { overscroll-behavior: contain; }

/* ============================================================
   STICKY CONFIRM FOOTER (2026-07-23): Back / Confirm & Analyze
   always on screen while the match grid scrolls behind them.
   ============================================================ */
.modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-left: -26px; margin-right: -26px; margin-bottom: -26px;
  padding: 14px 26px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(12,11,30,0), rgba(12,11,30,.96) 30%, rgba(12,11,30,.99));
}
@media (max-width: 720px) {
  .modal-footer { margin-left: -20px; margin-right: -20px; margin-bottom: -20px; padding-left: 20px; padding-right: 20px; }
  .modal-footer .button { flex: 1; justify-content: center; }
}

/* ============================================================
   PRINT SECTION BREAKS
   2026-07-23: major sections and A/B/C/D category cards each
   opened at the top of a fresh page — "clean starts beat tightly
   packed pages".
   2026-08-21: REVERSED, on measurement. The intent was right but
   the mechanism was too blunt: a forced break before every
   category gave a whole sheet to a 200-word section, and where a
   section happened to end near a page boundary the extra break
   produced a completely empty page. Measured on the same report:

       sections + categories break   16 pages, 1 blank
       sections break only           14 pages, 1 blank
       nothing forced                12 pages, 0 blank

   Airiness is worth paying for; blank pages are not. Sections now
   flow, and headings are instead glued to the content they
   introduce so nothing is ever stranded at the foot of a page —
   which is what "clean starts" was actually after.
   ============================================================ */
@media print {
  .report-section { break-before: auto; }
  .report-category { break-before: auto; break-inside: auto; }
  /* A heading alone at the bottom of a page is the thing to prevent. */
  .report-section-head { break-after: avoid; }
  .category-heading { break-after: avoid; break-inside: avoid; }
  .print-footer { break-before: auto; }
}

/* ============================================================
   SUGGESTION THUMBS (2026-07-23): real covers in the dropdown
   ============================================================ */
.suggestion-cover { position: relative; overflow: hidden; }
.suggestion-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; animation: thumbIn .3s ease forwards;
}
@keyframes thumbIn { to { opacity: 1; } }
.suggestion-cover:has(img) { color: transparent; }  /* initials yield to art */

/* ============================================================
   TRAILER SECTION (2026-07-23): privacy-first click-to-load
   ============================================================ */
.report-trailer { margin: 26px 0 6px; }
.trailer-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden;
  background: #0a0b1c; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px rgba(4,3,20,.4);
}
.trailer-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; cursor: pointer; padding: 0;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
.trailer-facade::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(6,8,20,.15), rgba(6,8,20,.6));
  transition: background .3s var(--ease);
}
.trailer-facade:hover::before { background: radial-gradient(circle at 50% 45%, rgba(6,8,20,.05), rgba(6,8,20,.5)); }
.trailer-play {
  position: relative; z-index: 1;
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue), #6D5CF5 55%, var(--purple));
  box-shadow: 0 12px 34px rgba(124,58,237,.5), 0 0 0 8px rgba(255,255,255,.08);
  transition: transform .2s var(--ease-spring, var(--ease));
}
.trailer-facade:hover .trailer-play { transform: scale(1.08); }
.trailer-play svg { width: 30px; height: 30px; margin-left: 3px; }
.trailer-caption {
  position: absolute; left: 14px; bottom: 12px; z-index: 1; max-width: 80%;
  font-size: .8rem; font-weight: 650; color: #fff; text-align: left;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.trailer-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.trailer-thumb {
  position: relative; width: 108px; aspect-ratio: 16 / 9; flex: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden;
  cursor: pointer; padding: 0;
  background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.trailer-thumb::before { content: ""; position: absolute; inset: 0; background: rgba(4,6,18,.35); }
.trailer-thumb svg { position: relative; z-index: 1; width: 18px; height: 18px; opacity: .92; }
.trailer-thumb.active { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(124,58,237,.4); }
.trailer-thumb:hover { transform: translateY(-2px); }
@media (max-width: 720px) { .trailer-thumb { width: 92px; } }

/* Never in the PDF — trailers are interactive, screen-only */
@media print { .report-trailer { display: none !important; } }

/* ============================================================
   TRAILER ON THE GAME CARD (2026-07-23): play overlay + lightbox
   ============================================================ */
.demo-cover.has-trailer, .report-cover.has-trailer { cursor: default; }
.cover-play {
  position: absolute; z-index: 3;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue), #6D5CF5 55%, var(--purple));
  box-shadow: 0 10px 30px rgba(124,58,237,.55), 0 0 0 6px rgba(255,255,255,.12);
  transition: transform .2s var(--ease-spring, var(--ease)), box-shadow .2s var(--ease);
}
.cover-play svg { width: 24px; height: 24px; margin-left: 2px; }
.cover-play:hover, .cover-play:focus-visible { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 14px 38px rgba(124,58,237,.7), 0 0 0 8px rgba(255,255,255,.16); }
@media (max-width: 720px) { .cover-play { width: 50px; height: 50px; } .cover-play svg { width: 21px; height: 21px; } }

/* Lightbox */
.trailer-lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; }
.tl-backdrop { position: absolute; inset: 0; background: rgba(3,4,14,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tl-dialog { position: relative; z-index: 1; width: min(960px, 100%); display: grid; gap: 10px; }
.tl-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #05060f; box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.tl-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tl-close {
  position: absolute; z-index: 2; top: -14px; right: -6px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(18,16,40,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tl-close svg { width: 20px; height: 20px; }
.tl-close:hover { background: rgba(124,58,237,.5); }
.tl-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tl-thumb { position: relative; width: 104px; aspect-ratio: 16/9; flex: none; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; overflow: hidden; cursor: pointer; padding: 0; background-size: cover; background-position: center; display: grid; place-items: center; color: #fff; }
.tl-thumb::before { content: ""; position: absolute; inset: 0; background: rgba(4,6,18,.4); }
.tl-thumb svg { position: relative; z-index: 1; width: 16px; height: 16px; }
.tl-thumb.active { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(124,58,237,.45); }
@media (max-width: 560px) { .tl-close { top: -8px; right: 0; } }

/* Match-card trailer chip (top-right of the candidate cover) */
.game-match-cover .gm-play {
  position: absolute; z-index: 4; top: 8px; right: 8px; opacity: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px; border-radius: 999px; cursor: pointer;
  color: #fff; font-size: .72rem; font-weight: 750;
  background: linear-gradient(135deg, rgba(33,118,255,.95), rgba(124,58,237,.95));
  box-shadow: 0 6px 18px rgba(4,6,20,.5), 0 0 0 1px rgba(255,255,255,.18) inset;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.gm-play svg { width: 13px; height: 13px; margin-left: 1px; }
.gm-play:hover, .gm-play:focus-visible { transform: scale(1.05); box-shadow: 0 8px 22px rgba(124,58,237,.6), 0 0 0 1px rgba(255,255,255,.28) inset; outline: none; }

/* Analysis loader — live elapsed timer + rotating status */
.analysis-elapsed { margin: 8px 0 0; font-size: .82rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.62); min-height: 1.1em; letter-spacing: .01em; }

/* Print: hide interactive trailer controls on the cover */
@media print { .cover-play, .gm-play, .trailer-lightbox { display: none !important; } }

/* ============================================================
   AT-A-GLANCE VERDICT CARD + typeahead thumbs (2026-07-23)
   ============================================================ */
.verdict-card {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 4px 0 20px;
}
@media (max-width: 620px) { .verdict-card { grid-template-columns: 1fr; } }
.verdict-item {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 15px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid var(--v, #2176FF);
}
.verdict-item svg { width: 22px; height: 22px; color: var(--v, #2176FF); flex: none; }
.verdict-item strong { display: block; font-size: 1rem; line-height: 1.1; color: #fff; }
.verdict-item span { display: block; font-size: .74rem; color: rgba(255,255,255,.55); margin-top: 2px; }
.verdict-item.tone-good { --v: #22C7B8; }
.verdict-item.tone-neutral { --v: #4A8BFF; }
.verdict-item.tone-watch { --v: #F7B23D; }

/* Print: verdict card stays, in light theme */
@media print {
  .verdict-card { grid-template-columns: repeat(3, 1fr) !important; break-inside: avoid; margin: 6px 0 14px; }
  .verdict-item { background: #f7f9fc !important; border: 1px solid #e3e9f0 !important; border-left: 4px solid var(--v) !important; }
  .verdict-item strong { color: #191046 !important; }
  .verdict-item span { color: #5a6472 !important; }
}

/* Typeahead cover thumbnails */
.suggestion-cover { position: relative; overflow: hidden; }
.suggestion-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   iOS SCROLL/PAN FIX (2026-07-24): eliminate horizontal overflow
   so the page can never pan into a stuck, left-clipped position.
   ============================================================ */
/* Decorative aura: fixed, clipped to the viewport — cannot extend the
   document's scroll width (the real cause of the iOS left-pan + freeze). */
.ambient-layer {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
/* Clip every section's off-screen decoratives at their own box (each of
   these is position:relative, so this reliably contains absolute children
   without creating a scroll container — overflow:clip keeps y visible). */
.hero, .how-section, .story-section, .story-collage,
.framework-section, .preview-section, .cta-section {
  overflow-x: clip;
}
/* Hard stop: the document itself can never be wider than the viewport. */
html, body { max-width: 100%; }
@media print { .ambient-layer { display: none !important; } }

/* ============================================================
   CLIENT BRAND PASS (2026-07-31) — Video Game Minimap
   Standard palette: purple #A259FF (main), green #81C884 (secondary),
   pink #FF6B6B + yellow #FFD93E (tertiary). Gradients blend
   purple↔green or yellow↔pink.
   ============================================================ */
:root, html {
  --brand-purple: #A259FF;
  --brand-green:  #81C884;
  --brand-pink:   #FF6B6B;
  --brand-yellow: #FFD93E;
  --grad-primary: linear-gradient(120deg, var(--brand-purple), var(--brand-green));
  --grad-accent:  linear-gradient(120deg, var(--brand-yellow), var(--brand-pink));
}
/* Re-point the legacy tokens so every existing component adopts the palette */
@media screen {
  :root {
    --purple: #A259FF;
    --purple-bright: #BB86FF;
    --purple-deep: #7B3FD4;
    --violet: #A259FF;
    --magenta: #FF6B6B;
    --blue: #A259FF;
    --teal: #81C884;
    --cyan: #81C884;
    --orange: #FFD93E;
  }
}

/* --- Tracking: bold headers were far too tight --- */
.hero h1,
.section-heading h2,
.story-copy h2,
.preview-content-head h3,
.report-hero h1,
.report-section-head h2,
.cta-card h2,
.modal-header h2,
.analysis-card h2 {
  letter-spacing: -0.012em;
}
@media (max-width: 720px) {
  .hero h1 { letter-spacing: -0.008em; }
  .section-heading h2, .story-copy h2 { letter-spacing: -0.008em; }
}

/* --- Primary actions / gradients on brand --- */
.button-primary,
.analyze-button.button-primary,
.cta-analyze.button-primary,
.drawer-cta.button-primary {
  background: linear-gradient(120deg, #A259FF, #8E63E8 55%, #81C884) !important;
}
.hero h1 span {
  background-image: linear-gradient(100deg, #A259FF 0%, #9B76F0 45%, #81C884 100%) !important;
}

/* ============================================================
   HERO RESTRUCTURE (2026-07-31) — single stacked column so the
   search bar sits ABOVE the imagery, per client note.
   ============================================================ */
@media screen {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding-bottom: 72px;
    gap: 34px;
  }
  .hero::before { display: none; }           /* rotating blur ring not needed in stacked layout */
  .hero-copy { max-width: 900px; }
  .hero .search-panel { max-width: 860px; }
  .hero-visual { min-height: 0 !important; overflow: visible; }
}

/* Eyebrow: line removed, larger type (client note) */
.eyebrow.eyebrow-lg {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  letter-spacing: .06em;
  color: var(--brand-purple);
}
.eyebrow.eyebrow-lg span { display: none; }

/* Nav brand: logo lockup + reserved slot for the forthcoming Minimap logo */
.brand { gap: 10px; }
.brand-slot[data-logo="minimap"] { display: inline-block; width: 0; height: 40px; }
@media (min-width: 981px) { .brand-slot[data-logo="minimap"] { width: 8px; } }

/* ---- Rotating hero slideshow ---- */
.hero-slideshow {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 32px; overflow: hidden;
  background: #0a0b1c; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 110px rgba(4,3,20,.5);
}
.hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.hs-dot {
  width: 34px; height: 5px; border-radius: 99px; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.34); transition: background .25s, transform .25s;
}
.hs-dot.is-active { background: var(--brand-purple); transform: scaleY(1.4); }
@media (max-width: 720px) { .hero-slideshow { aspect-ratio: 4 / 3; border-radius: 24px; } .hs-dot { width: 26px; } }

/* Checklist card sits over the slideshow on desktop, below it on phones */
@media screen and (min-width: 981px) {
  .hero-visual { position: relative; }
  .decision-card { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); width: min(360px, 38%); }
}
@media (max-width: 980px) {
  .decision-card { position: static !important; transform: none !important; width: auto; margin-top: 16px; }
}

/* ============================================================
   FRAMEWORK SECTION (client notes): solid brand colours, no
   gradients, no corner icons; gradient only on "complete picture."
   ============================================================ */
@media screen {
  .framework-card.category-a { background: #A259FF !important; }  /* purple  */
  .framework-card.category-b { background: #81C884 !important; }  /* green   */
  .framework-card.category-c { background: #FF6B6B !important; }  /* pink    */
  .framework-card.category-d { background: #FFD93E !important; }  /* yellow  */
  .framework-card::before { display: none !important; }           /* kill sheen/gradient overlay */
  .framework-card { box-shadow: 0 22px 60px rgba(10,6,30,.28); }
}
/* Yellow card needs dark ink for contrast */
.framework-card.category-d,
.framework-card.category-d h3,
.framework-card.category-d p,
.framework-card.category-d button { color: #17123B !important; }
.framework-card.category-d h3::after { background: rgba(23,18,59,.85) !important; }
.framework-card.category-d .explore-arrow { background: rgba(23,18,59,.14); }
.framework-card.category-d .explore-arrow svg { color: #17123B; }
/* Green card also reads better with dark ink */
.framework-card.category-b,
.framework-card.category-b h3,
.framework-card.category-b p,
.framework-card.category-b button { color: #10281A !important; }
.framework-card.category-b h3::after { background: rgba(16,40,26,.85) !important; }
.framework-card.category-b .explore-arrow { background: rgba(16,40,26,.14); }
.framework-card.category-b .explore-arrow svg { color: #10281A; }
/* letter badges removed with the icons — keep spacing tidy */
.framework-card .category-top { justify-content: flex-start; }

/* Gradient reserved for the framework headline's second line */
.section-heading h2 span {
  background: linear-gradient(100deg, #A259FF, #81C884) !important;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* ============================================================
   CTA + FOOTER (client notes)
   ============================================================ */
/* Looser tracking on the closing headline */
.cta-card h2 { letter-spacing: -0.005em; }

/* Footer logo lockup — Health-e-Habits (flat yellow) slot then Health-e-Gaming */
.footer-logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-logo { height: 52px; width: auto; }
.footer-logo-slot[data-logo="hehabits-yellow"] { display: none; }  /* revealed when the yellow logo asset lands */

/* Subscribe button: match the input height exactly, arrow centred */
.fn-form { align-items: stretch; }
.fn-form input { height: 48px; box-sizing: border-box; }
.fn-form button {
  height: 48px; width: 48px; flex: none;
  display: grid; place-items: center; padding: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, #A259FF, #81C884);
  border: 0; cursor: pointer; color: #fff;
}
.fn-form button svg { width: 18px; height: 18px; display: block; }

/* Non-profit line reads as fine print, full width on small screens */
.fb-nonprofit { max-width: 62ch; line-height: 1.5; }
@media (max-width: 720px) { .fb-nonprofit { max-width: none; } }

/* Donate button (replaces New Analysis in the header) */
.donate-button { text-decoration: none; padding-inline: 18px; }
@media (max-width: 720px) {
  .donate-button { width: auto !important; min-width: 0 !important; padding: 0 15px !important; font-size: .84rem !important; }
  .donate-button span { font-size: .84rem !important; }
}

/* Client logo lockup — Health-e-Habits + Health-e-Gaming (+ Minimap slot) */
.brand { align-items: center; gap: 9px; }
.brand-mark { height: 46px; width: auto; display: block; }
.brand-divider { width: 1px; height: 26px; background: rgba(255,255,255,.18); flex: none; }
@media (max-width: 980px) { .brand-mark { height: 38px; } }
@media (max-width: 720px) {
  .brand-mark { height: 30px; }
  .brand-divider { height: 18px; }
}
@media (max-width: 420px) { .brand-mark { height: 26px; } }
.footer-logos { gap: 16px; }
.footer-logo { height: 44px; width: auto; }
@media (max-width: 720px) { .footer-logo { height: 38px; } }

/* Splash: pixel-invaders canvas replaces the old box-shadow sprite */
#splashCanvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 14px 30px rgba(162,89,255,.4)); }
.px-pad { display: none !important; }
.splash-word b { color: var(--brand-yellow); }

/* ============================================================================
   REFINEMENT SYSTEM (2026-07-31)
   Goal: clean, calm, credible. Restrained colour, generous space, subtle
   depth. Decoration is reduced — never content. No copy is altered.
   ========================================================================= */
@media screen {
  :root {
    /* Calm dark canvas (approved dark direction, lower saturation) */
    --surface-0: #0E1018;      /* page            */
    --surface-1: #161926;      /* raised panels   */
    --surface-2: #1D2130;      /* cards           */
    --line-1: rgba(255,255,255,.09);
    --line-2: rgba(255,255,255,.14);
    --text-1: #F2F4F8;         /* primary         */
    --text-2: #B7BECD;         /* secondary       */
    --text-3: #8A93A6;         /* tertiary/meta   */
    /* spacing scale */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:104px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-1: 0 1px 2px rgba(0,0,0,.28);
    --shadow-2: 0 6px 20px rgba(0,0,0,.28);
  }

  /* ---- 1 · Quiet the canvas ------------------------------------------- */
  body {
    background: var(--surface-0) !important;
    color: var(--text-2);
  }
  .ambient-layer { display: none !important; }          /* decorative blur orbs */
  .hero::before, .visual-glow, .hero-orbit { display: none !important; }
  .how-section::before, .framework-section::before,
  .preview-section::before, .cta-section::before { display: none !important; }
  .story-orb { display: none !important; }

  /* Flatten heavy glass/gradient panels into calm surfaces */
  .glass, .header-shell, .preview-window, .modal, .nav-drawer, .analysis-card {
    background: var(--surface-1) !important;
    border: 1px solid var(--line-1) !important;
    box-shadow: var(--shadow-2) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-footer {
    background: var(--surface-1) !important;
    border-top: 1px solid var(--line-1);
  }
  .site-footer::before { display: none !important; }

  /* ---- 2 · Typography ------------------------------------------------- */
  body { font-size: 16px; line-height: 1.6; }
  .hero h1 { font-weight: 800; line-height: 1.06; }
  .section-heading h2 { font-weight: 750; line-height: 1.12; color: var(--text-1); }
  .hero-lead, .section-heading p { color: var(--text-2); }
  .eyebrow, .eyebrow-lg {
    font-size: .78rem !important; font-weight: 700; letter-spacing: .14em !important;
    text-transform: uppercase; color: var(--text-3) !important;
  }

  /* ---- 3 · Section rhythm --------------------------------------------- */
  .framework-section, .preview-section, .cta-section { padding-block: var(--s9) !important; }
  .section-heading { margin-bottom: var(--s7); }

  /* ---- 4 · Restrained colour ------------------------------------------ */
  /* Framework cards: quiet surfaces with a coloured spine, not saturated fills */
  .framework-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--line-1);
    border-left: 3px solid var(--accent, #A259FF) !important;
    box-shadow: none !important;
    color: var(--text-2) !important;
    min-height: 0 !important;
    padding: var(--s5) !important;
  }
  .framework-card.category-a { --accent: #A259FF; }
  .framework-card.category-b { --accent: #81C884; }
  .framework-card.category-c { --accent: #FF6B6B; }
  .framework-card.category-d { --accent: #FFD93E; }
  .framework-card h3, .framework-card.category-b h3, .framework-card.category-d h3 { color: var(--text-1) !important; font-size: 1.12rem; }
  .framework-card p, .framework-card.category-b p, .framework-card.category-d p { color: var(--text-2) !important; font-size: .94rem; }
  .framework-card h3::after { display: none !important; }
  .framework-card .category-letter {
    background: transparent !important; color: var(--accent) !important;
    font-size: .8rem; font-weight: 800; letter-spacing: .1em; padding: 0;
    width: auto; height: auto; box-shadow: none; border: 0;
  }
  .framework-card button, .framework-card.category-b button, .framework-card.category-d button { color: var(--accent) !important; }
  .framework-card .explore-arrow { background: transparent !important; }
  .framework-card .explore-arrow svg { color: var(--accent) !important; }
  .framework-card:hover { border-color: var(--line-2); transform: none !important; }

  /* Buttons: one dominant action, quieter secondaries */
  .button-primary, .analyze-button.button-primary, .cta-analyze.button-primary, .drawer-cta.button-primary {
    background: #A259FF !important;
    box-shadow: none !important;
  }
  .button-primary:hover { background: #B06BFF !important; box-shadow: none !important; }
  .button-primary::before { display: none !important; }   /* shine sweep */
  .button-quiet, .button-secondary {
    background: transparent !important; border: 1px solid var(--line-2) !important; color: var(--text-1) !important;
  }

  /* ---- 5 · Motion: subtle only ---------------------------------------- */
  .reveal-ready { translate: 0 8px; transition-duration: .35s, .4s; }
  .tilt-card { transform: none !important; transition: border-color .2s ease; }
  .tilt-card:hover { --lift: 0px; }
  .scroll-progress { display: none; }
}

/* ---- 6 · Accessibility: focus is always obvious ----------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #A259FF;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- 7 · Hero: search is the centre of gravity ----------------------- */
@media screen {
  .hero {
    padding-block: clamp(56px, 9vw, 112px) var(--s9) !important;
    text-align: center;
    justify-items: center;
  }
  .hero-copy { max-width: 860px; margin-inline: auto; }
  .hero .eyebrow-lg { margin-bottom: var(--s4); }
  .hero h1 {
    font-size: clamp(2.4rem, 6vw, 4rem) !important;
    margin-bottom: var(--s6);
    color: var(--text-1);
  }
  .hero h1 span { color: #A259FF; }

  /* The search panel: largest, brightest, highest-contrast object on the page */
  .search-panel {
    background: transparent !important;
    padding: 0 !important;
    max-width: 720px;
    margin: 0 auto var(--s6);
  }
  .search-field-wrap {
    background: #FFFFFF !important;
    border-radius: var(--radius-lg) !important;
    padding: 10px 10px 10px 22px !important;
    gap: var(--s3) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.38) !important;
    border: 2px solid transparent;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .search-field-wrap:focus-within {
    border-color: #A259FF;
    box-shadow: 0 10px 40px rgba(0,0,0,.38), 0 0 0 4px rgba(162,89,255,.25) !important;
  }
  .search-field-wrap input {
    font-size: 1.14rem !important;
    padding: 16px 0 !important;
    font-weight: 500;
  }
  .search-field-wrap .search-icon { width: 22px; height: 22px; color: #5A6478; }
  .analyze-button {
    height: 56px; padding-inline: var(--s5) !important;
    font-size: 1rem !important; font-weight: 700;
    border-radius: 12px !important;
  }

  /* Supporting copy sits below the search, quieter */
  .hero-lead {
    max-width: 68ch; margin: 0 auto;
    font-size: 1.02rem !important; line-height: 1.7;
    color: var(--text-3) !important;
  }
  .search-footer { justify-content: center; color: var(--text-3); }
  .search-footer button {
    background: transparent; border: 1px solid var(--line-2);
    color: var(--text-2); border-radius: 999px; padding: 6px 14px; font-size: .86rem;
  }
  .search-footer button:hover { border-color: #A259FF; color: var(--text-1); }

  /* Imagery supports the search — it no longer competes with it */
  .hero-visual { max-width: 940px; margin: var(--s8) auto 0; width: 100%; }
  .hero-slideshow { border-radius: var(--radius-lg) !important; border: 1px solid var(--line-1) !important; }
  .decision-card { margin-top: var(--s5); }
}

@media screen and (max-width: 760px) {
  .hero { padding-block: var(--s7) var(--s8) !important; }
  .search-field-wrap { grid-template-columns: auto 1fr; padding: 12px 14px !important; row-gap: var(--s3); }
  .search-field-wrap input { font-size: 1.05rem !important; padding: 10px 0 !important; }
  .analyze-button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .hero-visual { margin-top: var(--s7); }
}

/* ---- 8 · Report: consistent, scannable components -------------------- */
@media screen {
  .report-shell, .report-main, .report-sidebar { background: transparent; }

  /* Accordion header is the whole row */
  .category-heading {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4);
    align-items: center; width: 100%; text-align: left;
    background: transparent; border: 0; cursor: pointer;
    padding: var(--s5) 0; color: inherit; font: inherit;
  }
  .category-heading:hover .ch-text h3 { color: #A259FF; }
  .ch-text small {
    display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 4px;
  }
  .ch-text h3 { font-size: 1.18rem; color: var(--text-1); margin: 0; transition: color .16s ease; }
  .category-badge {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 9px; font-weight: 800; font-size: .9rem;
    background: rgba(255,255,255,.05); color: var(--cat, #A259FF);
    border: 1px solid var(--line-1); box-shadow: none;
  }
  .report-category { border-bottom: 1px solid var(--line-1); border-radius: 0; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  .report-category.cat-a { --cat: #A259FF; } .report-category.cat-b { --cat: #81C884; }
  .report-category.cat-c { --cat: #FF6B6B; } .report-category.cat-d { --cat: #FFD93E; }
  .category-toggle { display: grid; place-items: center; width: 32px; height: 32px; color: var(--text-3); transition: transform .2s ease; }
  .report-category.expanded .category-toggle { transform: rotate(180deg); }
  .category-summary { margin: 0 0 var(--s5) 50px; color: var(--text-2); max-width: 72ch; }
  .category-details { margin: 0 0 var(--s6) 50px !important; gap: 0 !important; }

  /* FLATTENED, 2026-08-21 — the alignment fix.
     The badge is 34px and the gap is 16px, so the heading text, the topline
     and this column all begin at 50px. This block was the odd one out: as a
     bordered, padded card starting at 50px, its TEXT began at 75px. That is
     why one category panel showed four different left edges.
     Removing the box lines everything up by construction, and a hairline rule
     separates the blocks better than a border and a fill did. */
  .detail-block {
    background: none; border: 0; border-radius: 0;
    border-top: 1px solid var(--line-1);
    padding: var(--s5) 0 0;
  }
  .detail-block:first-child { border-top: 0; padding-top: 0; }
  .detail-block h4 {
    display: flex; align-items: center; gap: var(--s2);
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-3); margin: 0 0 var(--s4);
  }
  .detail-block h4 svg { width: 15px; height: 15px; }
  .detail-block li, .detail-block p { color: var(--text-2); line-height: 1.65; }
  .finding-group-label {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cat, #A259FF); margin: 0 0 var(--s2); font-weight: 800;
  }
  .finding-group + .finding-group,
  .finding-list + .finding-group,
  .finding-group + .finding-list { margin-top: var(--s4); }
  /* No left border: it would sit hard against the text with the block now
     flat, and shift this one section out of the shared column. */
  .detail-block.gap-block h4 { color: #FFD93E; }
}

@media screen and (max-width: 760px) {
  .category-summary, .category-details { margin-left: 0 !important; }
  .category-heading { gap: var(--s3); }
}

/* ---- 9 · Corrections pass ------------------------------------------- */
@media screen {
  /* The search must float free — no panel behind it */
  .search-panel.glass, form.search-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Kill every leftover shine/sweep pseudo-element on buttons */
  .button::before, .button-quiet::before, .button-secondary::before,
  .drawer-cta::before, .cta-analyze::before { display: none !important; }
  .button-quiet {
    background: var(--surface-2) !important;
    border: 1px solid var(--line-1) !important;
    color: var(--text-1) !important;
    box-shadow: none !important;
  }
  .button-quiet:hover { border-color: var(--line-2) !important; background: #232839 !important; }

  /* Report CTA band: flat surface, not a gradient slab */
  .report-cta, .report-footer-cta, .report-content .cta-band {
    background: var(--surface-1) !important;
    border: 1px solid var(--line-1) !important;
    box-shadow: none !important;
  }
  .cta-section .cta-inner, .cta-card {
    background: var(--surface-1) !important;
    border: 1px solid var(--line-1) !important;
    box-shadow: none !important;
  }

  /* Methodology / overview tiles share the one card shape */
  .method-card, .overview-cat, .quick-stat {
    background: var(--surface-1) !important;
    border: 1px solid var(--line-1) !important;
    box-shadow: none !important;
  }

  /* Comfortable measure for the supporting paragraph */
  .hero-lead { max-width: 60ch !important; }
}

/* ---- 10 · Framework cards: specificity-matched calm surfaces ---------- */
@media screen {
  .framework-card.category-a, .framework-card.category-b,
  .framework-card.category-c, .framework-card.category-d {
    background: var(--surface-2) !important;
    border: 1px solid var(--line-1) !important;
    border-left: 3px solid var(--accent) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
  }
  .framework-card.category-a h3, .framework-card.category-b h3,
  .framework-card.category-c h3, .framework-card.category-d h3 { color: var(--text-1) !important; }
  .framework-card.category-a p, .framework-card.category-b p,
  .framework-card.category-c p, .framework-card.category-d p,
  .framework-card.category-a li, .framework-card.category-b li,
  .framework-card.category-c li, .framework-card.category-d li { color: var(--text-2) !important; }
  .framework-card.category-a .category-letter, .framework-card.category-b .category-letter,
  .framework-card.category-c .category-letter, .framework-card.category-d .category-letter {
    background: transparent !important; color: var(--accent) !important; box-shadow: none !important;
  }
}

/* ---- 11 · Regression fixes ------------------------------------------ */
@media screen {
  /* Gradient-clipped headings had lost background-clip, rendering the words
     invisible over a solid bar. Restore legibility with a flat accent. */
  .section-heading h2 span,
  .framework-section .section-heading h2 span,
  .preview-section .section-heading h2 span,
  .cta-section h2 span,
  .hero h1 span {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #A259FF !important;
    color: #A259FF !important;
  }

  /* Framework card: honest column flow so the CTA can never overlap copy */
  .framework-card, .framework-card.category-a, .framework-card.category-b,
  .framework-card.category-c, .framework-card.category-d {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: var(--s3);
    min-height: 0 !important;
    overflow: hidden;
  }
  .framework-card > * { position: static !important; }
  .framework-card p { flex: 1 1 auto; margin: 0 0 var(--s4); }
  .framework-card > button {
    position: static !important;
    margin-top: auto;
    display: inline-flex; align-items: center; gap: var(--s2);
    background: transparent; border: 0; padding: 0; cursor: pointer;
  }
  .framework-card::before, .framework-card::after { display: none !important; }
  .framework-card .category-top { margin-bottom: var(--s2); }
}

/* ---- 11b · Category E: 5th framework card, same calm-surface language -- */
@media screen {
  .framework-card.category-e {
    --accent: #4C86FF;
    background: var(--surface-2) !important;
    border: 1px solid var(--line-1) !important;
    border-left: 3px solid var(--accent) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: var(--s3);
    min-height: 0 !important;
    overflow: hidden;
  }
  .framework-card.category-e h3 { color: var(--text-1) !important; }
  .framework-card.category-e p,
  .framework-card.category-e li { color: var(--text-2) !important; }
  .framework-card.category-e button { color: var(--accent) !important; }
  .framework-card.category-e .category-letter {
    background: transparent !important; color: var(--accent) !important; box-shadow: none !important;
  }
  .framework-card.category-e::before, .framework-card.category-e::after { display: none !important; }
}

/* ---- 12 · Touch targets --------------------------------------------- */
@media screen {
  .framework-card > button { min-height: 44px; padding-block: var(--s2); }
  .search-footer button { min-height: 40px; }
  .hs-dot { min-width: 24px; min-height: 24px; }
}

/* ---- 13 · Sample-report tiles match the framework card language ------- */
@media screen {
  .mini-category, .mini-category.mini-a, .mini-category.mini-b,
  .mini-category.mini-c, .mini-category.mini-d {
    background: var(--surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--line-1) !important;
    border-left: 3px solid var(--mc, #A259FF) !important;
    box-shadow: none !important;
    color: var(--text-2) !important;
  }
  .mini-category.mini-a { --mc: #A259FF; }
  .mini-category.mini-b { --mc: #81C884; }
  .mini-category.mini-c { --mc: #FF6B6B; }
  .mini-category.mini-d { --mc: #FFD93E; }
  .mini-category strong { color: var(--text-1) !important; }
  .mini-category small  { color: var(--text-3) !important; }
  .mini-category .mc-ic, .mini-category .mc-arrow {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
  }
  .mini-category .mc-ic svg, .mini-category .mc-arrow svg { color: var(--mc) !important; }
  .mini-category::before, .mini-category::after { display: none !important; }

  /* Quick-stat icon chips: tint the glyph, drop the filled blocks */
  .pv-ic { background: rgba(255,255,255,.05) !important; box-shadow: none !important; border: 1px solid var(--line-1) !important; }
  .pv-ic.ic-teal svg { color: #81C884 !important; }
  .pv-ic.ic-purple svg { color: #A259FF !important; }
  .pv-ic.ic-orange svg { color: #FF6B6B !important; }
}

/* ---- 14 · Hero breathing room + wider search ------------------------- */
@media screen {
  .hero { padding-block: clamp(72px, 11vw, 148px) var(--s9) !important; }
  .hero-copy { max-width: 1060px !important; }

  .hero .eyebrow-lg { margin-bottom: var(--s5) !important; }
  .hero h1 {
    font-size: clamp(2.6rem, 6.4vw, 4.5rem) !important;
    margin-bottom: clamp(40px, 5vw, 64px) !important;
  }

  /* A wider, more confident search bar */
  .search-panel { max-width: 940px !important; margin-bottom: clamp(40px, 5vw, 64px) !important; }
  .search-field-wrap { padding: 12px 12px 12px 26px !important; }
  .search-field-wrap input { font-size: 1.2rem !important; padding: 19px 0 !important; }
  .analyze-button { height: 60px; padding-inline: var(--s6) !important; }

  .search-footer { margin-top: var(--s5); gap: var(--s3); }
  .hero-lead { margin-top: 0 !important; }
  .hero-visual { margin-top: clamp(72px, 9vw, 128px) !important; }
}

@media screen and (min-width: 1100px) {
  /* Keep the eye moving down the centre line without feeling column-locked */
  .hero-lead { max-width: 72ch !important; }
}

@media screen and (max-width: 760px) {
  .hero { padding-block: var(--s8) var(--s8) !important; }
  .hero h1 { margin-bottom: var(--s6) !important; }
  .search-panel { margin-bottom: var(--s6) !important; }
  .search-field-wrap input { font-size: 1.08rem !important; padding: 12px 0 !important; }
  .hero-visual { margin-top: var(--s8) !important; }
}

/* ---- 15 · Never let label text sit on top of box art ------------------ */
@media screen {
  .demo-cover:has(img) span,
  .demo-cover:has(img) strong,
  .demo-cover:has(img) .cover-pad { display: none !important; }
}

/* ---- 16 · One clean, regular texture across the whole site ------------
   Was two dot grids at 34px and 52px. Those tile sizes don't share a
   common factor, so the layers drifted in and out of phase and the dots
   clustered unevenly. Replaced with a single grid on an exact 32px pitch,
   dot centred in its cell, applied evenly the full height of the page. */
@media screen {
  body::before {
    opacity: 1 !important;
    background-image:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.075) 0 1px, transparent 1.4px) !important;
    background-size: 32px 32px !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  /* Nothing else may paint a competing pattern */
  .hero::after, .framework-section::after, .preview-section::after,
  .cta-section::after, .section-shell::before { background-image: none !important; }
}

@media screen and (max-width: 760px) {
  body::before { background-size: 26px 26px !important; }
}


/* ============================================================================
   SEARCH CONSOLE (kept from the HUD concept — the rest was reverted)
   Notched frame, gradient hairline border, dark fill, glyph chips.
   ========================================================================= */
@media screen {
  .search-panel { position: relative; }

  /* side bracket accents */
  .search-panel::before, .search-panel::after {
    content: ""; position: absolute; top: 22px;
    width: 4px; height: 52px; border-radius: 3px;
    background: linear-gradient(180deg, #35D4E8, #A259FF);
    box-shadow: 0 0 12px rgba(120,190,255,.75);
  }
  .search-panel::before { left: -18px; }
  .search-panel::after  { right: -18px; }

  /* The gradient lives on the wrapper and acts as the border; the dark fill is
     an inset layer. (A z-index:-1 pseudo cannot sit behind the parent here —
     clip-path creates a stacking context.) */
  .search-field-wrap {
    position: relative;
    background: linear-gradient(100deg, #35D4E8, #6E7BFF 42%, #A259FF 78%, #35D4E8) !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 15px 15px 15px 18px !important;
    gap: var(--s3) !important;
    box-shadow: 0 0 34px rgba(120,80,220,.28) !important;
    clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px),
                       calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
    transition: box-shadow .18s ease;
  }
  .search-field-wrap::before { display: none !important; }
  .search-field-wrap::after {
    content: ""; position: absolute; inset: 1.8px; z-index: 0;
    background: #0D0A20; clip-path: inherit; border-radius: inherit;
  }
  .search-field-wrap > * { position: relative; z-index: 1; }
  .search-field-wrap:focus-within { box-shadow: 0 0 46px rgba(140,90,255,.48) !important; }

  .search-field-wrap .search-icon {
    width: 54px !important; height: 54px !important; padding: 15px;
    border-radius: 50%; color: #DCE4F5 !important;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(150,180,255,.28);
    box-sizing: border-box; flex: none;
  }
  .search-field-wrap input {
    color: #EEF2FA !important; background: transparent !important;
    font-size: 1.14rem !important; padding: 16px 0 16px 8px !important;
  }
  .search-field-wrap input::placeholder { color: #8891AA !important; }

  .analyze-button {
    position: relative;
    background: linear-gradient(100deg, #8B45FF, #A259FF 55%, #B45CFF) !important;
    border-radius: 14px !important; height: 58px;
    box-shadow: 0 6px 24px rgba(140,70,255,.42) !important;
  }
  .analyze-button:hover { background: linear-gradient(100deg, #9A5BFF, #B06BFF 55%, #C077FF) !important; }
  .analyze-button::before {
    content: ""; position: absolute; left: -16px; top: 12%; height: 76%;
    width: 1px; background: rgba(160,180,230,.22); display: block !important;
  }

  /* try-chips */
  .search-footer button {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(150,175,235,.20) !important;
    color: #D3DAEA !important; border-radius: 11px !important; padding: 9px 15px !important;
    min-height: 42px;
  }
  .search-footer button::before {
    content: ""; width: 21px; height: 21px; border-radius: 6px; flex: none;
    background: var(--chip, #4F7DF3) var(--glyph) center / 12px 12px no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  }
  /* Neutral placeholder glyphs — deliberately NOT the games' trademarked logos. */
  .search-footer button:nth-of-type(1) { --chip: #4F7DF3;
    --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6 3h12v4h-7v3h6v4h-6v7H6z'/%3E%3C/svg%3E"); }
  .search-footer button:nth-of-type(2) { --chip: #5DBB63;
    --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z' opacity='.9'/%3E%3C/svg%3E"); }
  .search-footer button:nth-of-type(3) { --chip: #D0D4DC;
    --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222'%3E%3Cpath d='M6 4l14 2-2 14-14-2z'/%3E%3Crect x='10' y='9' width='5' height='5' fill='%23D0D4DC'/%3E%3C/svg%3E"); }
  .search-footer button:nth-of-type(4) { --chip: #8A93A6;
    --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2l8 4v6c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V6z'/%3E%3C/svg%3E"); }
  .search-footer button:nth-of-type(5) { --chip: #E8C46A;
    --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233A2A05'%3E%3Cpath d='M12 2l2.2 7.3L21 12l-6.8 2.7L12 22l-2.2-7.3L3 12l6.8-2.7z'/%3E%3C/svg%3E"); }
  .search-footer button:hover { border-color: rgba(162,89,255,.55) !important; }
}

@media screen and (max-width: 760px) {
  .search-panel::before, .search-panel::after { display: none; }
  .search-field-wrap { clip-path: none !important; border-radius: 16px !important; padding: 12px !important; }
  .search-field-wrap::after { inset: 1.6px; }
  .search-field-wrap .search-icon { width: 42px !important; height: 42px !important; padding: 11px; }
  .search-field-wrap input { font-size: 1.05rem !important; padding: 10px 0 10px 6px !important; }
  .analyze-button::before { display: none !important; }
}

/* ---- SEARCH CONSOLE · fixes -----------------------------------------
   1. `> *` had overridden .suggestion-list's absolute positioning, so the
      dropdown took up flow space and ballooned the bar.
   2. clip-path on the wrapper clips descendants — it was hiding the
      typeahead dropdown entirely. The notched frame now lives on pseudo
      elements so the wrapper itself never clips. */
@media screen {
  .search-field-wrap {
    background: transparent !important;
    clip-path: none !important;
    overflow: visible !important;
  }
  .search-field-wrap::before {
    content: "" !important; display: block !important;
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg, #35D4E8, #6E7BFF 42%, #A259FF 78%, #35D4E8);
    border-radius: 20px;
    clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px),
                       calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  }
  .search-field-wrap::after {
    content: ""; position: absolute; inset: 1.8px; z-index: 0;
    background: #0D0A20; border-radius: 19px;
    clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% calc(100% - 21px),
                       calc(100% - 21px) 100%, 21px 100%, 0 calc(100% - 21px), 0 21px);
  }
  /* every child except the dropdown gets lifted above the frame */
  .search-field-wrap > *:not(.suggestion-list) { position: relative; z-index: 1; }
  .search-field-wrap > .suggestion-list {
    position: absolute !important; z-index: 40 !important;
    left: 0; right: 0; top: calc(100% + 10px);
  }
}

@media screen and (max-width: 760px) {
  .search-field-wrap::before { border-radius: 16px; clip-path: none; }
  .search-field-wrap::after  { border-radius: 15px; clip-path: none; }
}

/* ---- Hero lead · HUD frame ------------------------------------------ */
@media screen {
  .hero-lead-frame {
    position: relative;
    max-width: 900px;
    margin: clamp(56px, 6vw, 88px) auto 0;
    padding: clamp(30px, 3.4vw, 44px) clamp(32px, 4vw, 60px);
    border: 1px solid rgba(150,110,255,.26);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(120,90,220,.055), rgba(120,90,220,.015));
  }
  .hero-lead-frame > .hero-lead {
    margin: 0 !important;
    max-width: 74ch !important;
    color: #B9C0D4 !important;
    text-align: center;
  }
  /* corner brackets: two from the frame, two from the helper span */
  .hero-lead-frame::before, .hero-lead-frame::after,
  .hlf-corners::before, .hlf-corners::after {
    content: ""; position: absolute; width: 46px; height: 46px;
    border-color: rgba(178,132,255,.85); border-style: solid; border-width: 0;
    pointer-events: none;
  }
  .hero-lead-frame::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-radius: 20px 0 0 0; }
  .hero-lead-frame::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 20px 0; }
  .hlf-corners::before { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 20px 0 0; }
  .hlf-corners::after  { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; border-radius: 0 0 0 20px; }
  .hlf-corners { position: absolute; inset: 0; display: block; }
}
@media screen and (max-width: 760px) {
  .hero-lead-frame { padding: 24px 20px; margin-top: var(--s7); border-radius: 16px; }
  .hero-lead-frame::before, .hero-lead-frame::after,
  .hlf-corners::before, .hlf-corners::after { width: 26px; height: 26px; }
}

/* ---- Try-chips: real game cover art ---------------------------------- */
@media screen {
  .search-footer button .chip-art {
    width: 22px; height: 22px; border-radius: 6px; flex: none;
    object-fit: cover; object-position: center 22%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.4);
    background: #1A1E2C;
  }
  /* the placeholder glyph steps aside once real art has loaded */
  .search-footer button.has-art::before { display: none !important; }
}

/* ---- Search console · corner artifact --------------------------------
   border-radius + clip-path were both shaping the corners: the radius
   rounded the box, then the polygon cut across it, leaving a dark wedge
   outside the angled edge. The polygon alone defines the notch. */
@media screen {
  .search-field-wrap::before,
  .search-field-wrap::after { border-radius: 0 !important; }
  .search-field-wrap { border-radius: 0 !important; }
}
@media screen and (max-width: 760px) {
  /* no notch on phones — plain rounded rect, so the radius comes back */
  .search-field-wrap { border-radius: 16px !important; }
  .search-field-wrap::before { border-radius: 16px !important; clip-path: none !important; }
  .search-field-wrap::after  { border-radius: 15px !important; clip-path: none !important; }
}

/* ---- Search console · drop the notch ---------------------------------
   The angled corners kept producing dark wedges where the clip polygon met
   the frame. Plain rounded rectangle instead — no clipping anywhere. */
@media screen {
  .search-field-wrap { border-radius: 18px !important; clip-path: none !important; }
  .search-field-wrap::before { border-radius: 18px !important; clip-path: none !important; }
  .search-field-wrap::after  { border-radius: 16.5px !important; clip-path: none !important; }
}
@media screen and (max-width: 760px) {
  .search-field-wrap { border-radius: 16px !important; }
  .search-field-wrap::before { border-radius: 16px !important; }
  .search-field-wrap::after  { border-radius: 14.5px !important; }
}

/* ============================================================================
   "Map the Game" — glossy 3D arcade button
   Pill bezel, lit face, hard bottom edge that depresses on press.
   ========================================================================= */
@media screen {
  .search-field-wrap .analyze-button,
  .analyze-button.button-primary {
    border-radius: 999px !important;
    height: 60px;
    padding: 0 34px !important;
    border: 3px solid #C79BFF !important;
    background: linear-gradient(180deg, #C892FF 0%, #A85FFF 42%, #9147F5 100%) !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    text-shadow: 0 2px 0 rgba(74,20,140,.55);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.50),      /* top gloss          */
      inset 0 -5px 0 rgba(88,26,168,.42),       /* inner bottom shade */
      0 6px 0 #6C2BC6,                          /* solid base edge    */
      0 12px 22px rgba(0,0,0,.45) !important;   /* cast shadow        */
    transition: transform .10s ease, box-shadow .10s ease, background .16s ease;
    will-change: transform;
  }
  /* the divider line belongs to a flat button, not a raised one */
  .search-field-wrap .analyze-button::before { display: none !important; }

  .search-field-wrap .analyze-button:hover,
  .analyze-button.button-primary:hover {
    background: linear-gradient(180deg, #D3A5FF 0%, #B370FF 42%, #9C55FF 100%) !important;
    transform: translateY(-1px);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.55),
      inset 0 -5px 0 rgba(88,26,168,.42),
      0 7px 0 #6C2BC6,
      0 14px 26px rgba(0,0,0,.48) !important;
  }

  /* press: the button travels down onto its base */
  .search-field-wrap .analyze-button:active,
  .analyze-button.button-primary:active {
    transform: translateY(5px);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.35),
      inset 0 -2px 0 rgba(88,26,168,.42),
      0 1px 0 #6C2BC6,
      0 3px 8px rgba(0,0,0,.40) !important;
  }

  .search-field-wrap .analyze-button svg { filter: drop-shadow(0 2px 0 rgba(74,20,140,.5)); }
}

@media screen and (max-width: 760px) {
  .search-field-wrap .analyze-button { height: 54px; padding: 0 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .search-field-wrap .analyze-button { transition: none; }
  .search-field-wrap .analyze-button:hover { transform: none; }
}

/* ---- Arcade button: smaller, uppercase, shared with Donate ------------ */
@media screen {
  .search-field-wrap .analyze-button,
  .analyze-button.button-primary,
  .donate-button.button-primary,
  .drawer-cta.button-primary {
    border-radius: 999px !important;
    border: 3px solid #C79BFF !important;
    background: linear-gradient(180deg, #C892FF 0%, #A85FFF 42%, #9147F5 100%) !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
    text-shadow: 0 2px 0 rgba(74,20,140,.55);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.50),
      inset 0 -4px 0 rgba(88,26,168,.42),
      0 5px 0 #6C2BC6,
      0 10px 18px rgba(0,0,0,.42) !important;
    transition: transform .10s ease, box-shadow .10s ease, background .16s ease;
    will-change: transform;
  }

  /* smaller primary action */
  .search-field-wrap .analyze-button,
  .analyze-button.button-primary {
    height: 50px !important;
    padding: 0 26px !important;
    font-size: .92rem !important;
  }
  .search-field-wrap .analyze-button svg { width: 16px; height: 16px; }

  /* header donate, scaled to the nav */
  .donate-button.button-primary {
    height: 44px !important;
    padding: 0 20px !important;
    font-size: .82rem !important;
  }
  .drawer-cta.button-primary { height: 50px !important; font-size: .9rem !important; }

  .search-field-wrap .analyze-button:hover,
  .analyze-button.button-primary:hover,
  .donate-button.button-primary:hover,
  .drawer-cta.button-primary:hover {
    background: linear-gradient(180deg, #D3A5FF 0%, #B370FF 42%, #9C55FF 100%) !important;
    transform: translateY(-1px);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.55),
      inset 0 -4px 0 rgba(88,26,168,.42),
      0 6px 0 #6C2BC6,
      0 12px 22px rgba(0,0,0,.46) !important;
  }

  .search-field-wrap .analyze-button:active,
  .analyze-button.button-primary:active,
  .donate-button.button-primary:active,
  .drawer-cta.button-primary:active {
    transform: translateY(4px);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.35),
      inset 0 -2px 0 rgba(88,26,168,.42),
      0 1px 0 #6C2BC6,
      0 3px 8px rgba(0,0,0,.38) !important;
  }
}

@media screen and (max-width: 760px) {
  .search-field-wrap .analyze-button { height: 48px !important; padding: 0 20px !important; font-size: .88rem !important; }
  .donate-button.button-primary { height: 40px !important; padding: 0 15px !important; font-size: .76rem !important; letter-spacing: .03em !important; }
}
@media (prefers-reduced-motion: reduce) {
  .analyze-button.button-primary, .donate-button.button-primary, .drawer-cta.button-primary { transition: none; }
  .analyze-button.button-primary:hover, .donate-button.button-primary:hover, .drawer-cta.button-primary:hover { transform: none; }
}

/* ---- Splash: the two nav logos in place of the wordmark --------------- */
.splash-logos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 3vw, 20px);
  margin: clamp(14px, 3vw, 22px) 0 clamp(16px, 3vw, 24px);
}
.splash-logos img {
  height: clamp(28px, 6.4vw, 42px);
  width: auto; display: block;
  /* nothing to fade in against — keep them crisp and instant */
}
.splash-divider {
  width: 1px; height: clamp(20px, 4.4vw, 30px);
  background: rgba(255,255,255,.22); flex: none;
}
@media (max-width: 380px) {
  .splash-logos { gap: 10px; }
  .splash-logos img { height: 26px; }
}

/* ============================================================================
   CLIENT NOTES PT.2 (2026-07-31)
   ========================================================================= */

/* ---- 1 · No dot texture anywhere ------------------------------------- */
@media screen {
  body::before { display: none !important; }
}

/* ---- 2 · Nav: no glow behind the logos, flat buttons ------------------ */
@media screen {
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand-link { display: inline-flex; align-items: center; text-decoration: none; }
  .brand-mark,
  .brand-link img,
  .footer-logo {
    filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .brand::before, .brand::after, .brand-link::before, .brand-link::after { display: none !important; }
  .brand-divider { width: 1px; height: 30px; background: rgba(255,255,255,.20); flex: none; }

  /* Flat nav buttons — yellow Donate, purple Map the Game */
  .header-shell .nav-map-btn,
  .header-shell .donate-button.button-primary {
    border-radius: 10px !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    font-size: .86rem !important;
    height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: filter .15s ease;
  }
  .header-shell .nav-map-btn {
    background: #A259FF !important;
    color: #fff !important;
  }
  .header-shell .donate-button.button-primary {
    background: #FFD93E !important;
    color: #2A1E00 !important;
  }
  .header-shell .nav-map-btn:hover,
  .header-shell .donate-button.button-primary:hover { filter: brightness(1.08); transform: none !important; }
  .header-shell .nav-map-btn:active,
  .header-shell .donate-button.button-primary:active { transform: none !important; filter: brightness(.95); }
  .header-actions { display: flex; align-items: center; gap: 10px; }
}

/* ---- 3 · Bottom CTA headline on one line ------------------------------ */
@media screen {
  .cta-section h2, .cta-card h2, .cta-inner h2 {
    font-size: clamp(1.05rem, 2.1vw, 1.6rem) !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }
}
@media screen and (max-width: 900px) {
  .cta-section h2, .cta-card h2, .cta-inner h2 { white-space: normal; }
}

/* ---- 4 · Footer fixes ------------------------------------------------- */
@media screen {
  /* socials sit under the tagline with even spacing */
  .footer-brand p { margin-bottom: 18px; }
  .footer-social { display: flex; gap: 12px; flex-wrap: wrap; }
  .footer-social .social-btn { width: 40px; height: 40px; display: grid; place-items: center; }

  /* Built For column matches the rhythm of Product / Trust */
  .footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .footer-col strong { margin-bottom: 4px; }
  .footer-col span, .footer-col button { line-height: 1.5; padding: 0; }

  /* nonprofit line: centred, italic */
  .footer-bottom .fb-nonprofit {
    text-align: center !important;
    font-style: italic;
    max-width: 62ch; margin-inline: auto;
  }
  /* Site By / Photography From spacing */
  .footer-bottom .photo-credit { letter-spacing: .002em; }
  .footer-bottom .photo-credit a { margin: 0 2px; }

  /* Stay Informed: label optically centred against the mail icon */
  .fn-head { display: flex; align-items: center; gap: 12px; }
  .fn-head .fn-ic { display: grid; place-items: center; flex: none; }
  .fn-head > div { display: flex; align-items: center; }
  .fn-head strong { line-height: 1; }

  /* arrow button was riding high against the field */
  .fn-form { display: flex; align-items: stretch; gap: 10px; }
  .fn-form input { height: 48px; box-sizing: border-box; }
  .fn-form button {
    height: 48px !important; width: 48px !important; flex: none;
    align-self: stretch; margin: 0 !important;
    display: grid; place-items: center;
  }
}

/* ---- 5 · Hero: copy left, search console right ------------------------ */
@media screen and (min-width: 1000px) {
  .hero-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(36px, 4.5vw, 72px);
    align-items: center;
    max-width: 1240px !important;
    text-align: left;
  }
  .hero { text-align: left !important; justify-items: stretch !important; }
  .hero-left { text-align: left; }
  .hero-left .eyebrow-lg { text-align: left; }
  .hero-right { justify-self: stretch; }
}
@media screen {
  .hero h1 { text-align: left; margin-bottom: clamp(22px, 2.6vw, 32px) !important; }
  .hero .eyebrow-lg { text-align: left; }

  /* the description now reads as the subhead: larger, left aligned */
  .hero-lead-frame { margin: 0 !important; max-width: none !important; padding: clamp(24px,2.6vw,32px) clamp(24px,3vw,36px); }
  .hero-lead-frame > .hero-lead {
    text-align: left !important;
    font-size: clamp(1.04rem, 1.35vw, 1.2rem) !important;
    line-height: 1.62 !important;
    max-width: none !important;
    color: #C2C9DB !important;
  }

  .search-panel { max-width: none !important; margin: 0 auto !important; }
  .search-footer { justify-content: flex-start; }

  /* search CTA: gradient, matching the footer newsletter button */
  .search-field-wrap .analyze-button,
  .analyze-button.button-primary {
    background: linear-gradient(120deg, #A259FF, #81C884) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    height: 50px !important;
  }
  .search-field-wrap .analyze-button:hover,
  .analyze-button.button-primary:hover {
    background: linear-gradient(120deg, #B370FF, #92D495) !important;
    filter: brightness(1.03); transform: none !important; box-shadow: none !important;
  }
  .search-field-wrap .analyze-button:active,
  .analyze-button.button-primary:active { transform: none !important; box-shadow: none !important; filter: brightness(.96); }
  .search-field-wrap .analyze-button svg { filter: none; }
}
@media screen and (max-width: 999px) {
  .hero-copy { display: block !important; }
  .hero-right { margin-top: clamp(30px, 5vw, 44px); }
  .search-footer { justify-content: center; }
}
/* bracket accents belonged to the centred hero; they read as artifacts now */
@media screen { .search-panel::before, .search-panel::after { display: none !important; } }

/* ---- 6 · Hero background photo (rotates per load) + checklist ---------- */
@media screen {
  .hero { position: relative; overflow: hidden; isolation: isolate; }
  .hero-photo {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity .9s ease;
    pointer-events: none;
  }
  .hero-photo.is-on { opacity: .13; }
  .hero-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,16,24,.55), rgba(14,16,24,.88));
  }
  .hero-copy { position: relative; z-index: 1; }

  /* checklist returns, sitting under the search console */
  .hero-right .decision-card {
    margin-top: clamp(20px, 2.4vw, 28px);
    background: rgba(22,25,38,.72) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 14px; padding: 20px 22px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .hero-right .decision-card ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
  .hero-right .decision-card li {
    display: flex; align-items: center; gap: 11px;
    color: #C4CBDD; font-size: .95rem;
  }
  .hero-right .decision-card li svg { width: 16px; height: 16px; color: #81C884; flex: none; }
}

/* ---- 7 · Nav buttons: flat, capitalised ------------------------------- */
@media screen {
  .header-shell .nav-map-btn,
  .header-shell .donate-button.button-primary {
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-size: .8rem !important;
  }
}
@media (prefers-reduced-motion: reduce) { .hero-photo { transition: none; } }
/* the checklist was absolutely positioned for the old slideshow overlay */
@media screen {
  .hero-right .decision-card {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
}
/* ---- Search CTA: solid, no gradient ----------------------------------- */
@media screen {
  .search-field-wrap .analyze-button,
  .analyze-button.button-primary {
    background: #A259FF !important;
    background-image: none !important;
  }
  .search-field-wrap .analyze-button:hover,
  .analyze-button.button-primary:hover {
    background: #B06BFF !important;
    background-image: none !important;
    filter: none !important;
  }
  .search-field-wrap .analyze-button:active,
  .analyze-button.button-primary:active { background: #9350EE !important; filter: none !important; }
}

/* ---- Hero photo: full-bleed and more visible --------------------------- */
@media screen {
  /* .hero is a constrained section-shell — break the photo out to the viewport */
  .hero-photo {
    left: 50% !important; right: auto !important;
    width: 100vw !important;
    transform: translateX(-50%);
    max-width: none !important;
  }
  .hero-photo.is-on { opacity: .34; }
  /* scrim still guarantees text contrast, just lighter than before */
  .hero-photo::after {
    background:
      linear-gradient(180deg, rgba(14,16,24,.42) 0%, rgba(14,16,24,.58) 55%, rgba(14,16,24,.80) 100%),
      linear-gradient(90deg, rgba(14,16,24,.55) 0%, rgba(14,16,24,.10) 60%, rgba(14,16,24,.35) 100%);
  }
}

/* ---- Hero photo: truly edge-to-edge -----------------------------------
   .hero is a width-constrained .section-shell with overflow:hidden, which
   cropped the 100vw photo back to the content column. Let the photo escape
   the shell; the hero still clips nothing else because only the photo
   extends past it. */
@media screen {
  .hero { overflow: visible !important; }
  .hero-photo {
    left: calc(50% - 50vw) !important;
    right: auto !important;
    width: 100vw !important;
    transform: none !important;
  }
  /* guard: a 100vw child must never create a horizontal scrollbar */
  html, body { overflow-x: clip; }
}

/* ---- Hero photo: brighter, soft-faded, no black block ------------------
   Previous pass darkened the right edge for text contrast, which read as a
   black bar, and the photo ended on a hard horizontal line at the section
   boundary. Text protection is now concentrated on the left where the copy
   actually sits, and the photo dissolves into the page instead of stopping. */
@media screen {
  .hero-photo.is-on { opacity: .58; }

  /* soft dissolve at the bottom (and a touch at the top) — no hard edge */
  .hero-photo {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 18%, #000 55%, rgba(0,0,0,.55) 78%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 18%, #000 55%, rgba(0,0,0,.55) 78%, rgba(0,0,0,0) 100%);
  }

  /* scrim: gentle overall, stronger only behind the left-hand copy */
  .hero-photo::after {
    background:
      linear-gradient(90deg, rgba(12,14,22,.72) 0%, rgba(12,14,22,.46) 34%, rgba(12,14,22,.10) 58%, rgba(12,14,22,0) 100%),
      linear-gradient(180deg, rgba(12,14,22,.30) 0%, rgba(12,14,22,.12) 40%, rgba(12,14,22,.34) 100%) !important;
  }
}
/* eyebrow sat at 4.40:1 over the brighter photo — just under AA for small text */
@media screen { .hero .eyebrow-lg { color: #C6CDDC !important; } }
/* The 72% left scrim crushed the left edge to near page-background, which read
   as a black band on wide screens. The copy sits in a framed panel and the
   headline is large white type, so it needs far less protection than that. */
@media screen {
  .hero-photo::after {
    background:
      linear-gradient(90deg, rgba(12,14,22,.42) 0%, rgba(12,14,22,.24) 30%, rgba(12,14,22,.06) 55%, rgba(12,14,22,0) 100%),
      linear-gradient(180deg, rgba(12,14,22,.22) 0%, rgba(12,14,22,.08) 40%, rgba(12,14,22,.30) 100%) !important;
  }
}
/* purple headline measured 3.07:1 on the brighter photo — passes large-text AA
   but with no margin. Slightly lifted tone + a soft shadow for real legibility. */
@media screen {
  .hero h1 span { color: #BB86FF !important; -webkit-text-fill-color: #BB86FF !important; }
  .hero h1 { text-shadow: 0 2px 20px rgba(6,8,16,.55); }
}

/* ---- "Try:" chips — tidy grid, readable over the photo ---------------- */
@media screen {
  .search-footer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: var(--s5);
    align-items: stretch;
  }
  /* the label gets its own line so the chips form an even block */
  .search-footer > span:first-child {
    grid-column: 1 / -1;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #C6CDDC;
    margin-bottom: 2px;
  }
  .search-footer button {
    width: 100%; justify-content: flex-start;
    background: rgba(16,19,30,.92) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #E8ECF5 !important;
    font-size: .9rem !important; font-weight: 600;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    box-shadow: 0 2px 10px rgba(0,0,0,.30);
    transition: border-color .16s ease, background .16s ease;
  }
  .search-footer button:hover {
    background: rgba(26,30,46,.96) !important;
    border-color: rgba(162,89,255,.65) !important;
  }
  .search-footer button::before { width: 24px; height: 24px; }
}
@media screen and (max-width: 999px) {
  .search-footer { justify-items: stretch; }
}
@media screen and (max-width: 560px) {
  .search-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen { .search-footer button .chip-art { width: 24px; height: 24px; border-radius: 7px; } }

/* ---- Splash: 2x size + cinematic treatment ---------------------------
   Every effect is a static CSS layer over the canvas, so the render loop
   is untouched and the animation still runs on the compositor. */
.splash-screen {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.splash-screen > canvas { display: block; max-width: 100%; height: auto; }

/* CRT scanlines */
.sc-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: multiply;
  opacity: .55;
  animation: scFlicker 3.6s steps(2, end) infinite;
}
@keyframes scFlicker { 0%,92%,100% { opacity: .55; } 94% { opacity: .40; } 96% { opacity: .62; } }

/* lens vignette + a soft cool bloom in the corners */
.sc-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 46%, rgba(0,0,0,0) 42%, rgba(4,5,12,.62) 100%),
    radial-gradient(60% 50% at 50% 40%, rgba(162,89,255,.16), rgba(0,0,0,0) 70%);
}

/* letterbox bars */
.sc-bar {
  position: absolute; left: 0; right: 0; height: 7.5%;
  background: #05060C; pointer-events: none;
  box-shadow: 0 0 18px rgba(0,0,0,.7);
}
.sc-bar-top { top: 0; }
.sc-bar-bottom { bottom: 0; }

#splashCanvas { filter: drop-shadow(0 10px 26px rgba(162,89,255,.34)) saturate(1.08) contrast(1.06); }

@media (max-width: 680px) {
  .splash-screen { border-radius: 10px; }
  .sc-bar { height: 6%; }
}
@media (prefers-reduced-motion: reduce) { .sc-scan { animation: none; } }
/* Perf: a per-frame CSS filter and a blend mode over an animating canvas
   forced full-surface repaints and cost ~11fps. Glow moved to the static
   wrapper; scanlines use plain alpha instead of multiply. */
#splashCanvas { filter: none !important; }
.splash-screen {
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06),
              0 12px 46px rgba(162,89,255,.30);
}
.sc-scan { mix-blend-mode: normal !important; opacity: .40; }
@keyframes scFlicker { 0%,92%,100% { opacity: .40; } 94% { opacity: .28; } 96% { opacity: .48; } }

/* ---- Splash: drop the frame ------------------------------------------
   The canvas is transparent apart from the sprites, so any full-rect
   overlay (scanlines, vignette, letterbox) painted a visible rectangle
   over the page — that was the box. Frame and overlays removed; the glow
   follows the artwork instead of a box edge. */
.splash-screen {
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sc-scan, .sc-vignette, .sc-bar { display: none !important; }
#splashCanvas {
  filter: drop-shadow(0 12px 28px rgba(162,89,255,.38)) !important;
}

/* ======================================================================
   CLIENT UPDATE PASS — 2026-08-11
   Implements the nine items in "Health e Gaming — Webpage Update
   Instructions". Appended last so it wins the cascade without unpicking
   the earlier passes. Numbers below match the brief.
   ====================================================================== */

/* ---- 02 · Minimap intro: headline, bigger copy, no decorative frame ---- */
@media screen {
  .hero-lead-frame {
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    margin-top: clamp(26px, 3vw, 38px) !important;
  }
  /* corner brackets were drawn by the frame's own pseudo-elements and a
     helper span; the span is gone from the markup, these are the rest */
  .hero-lead-frame::before,
  .hero-lead-frame::after,
  .hlf-corners { display: none !important; }

  .hero-lead-title {
    margin: 0 0 clamp(12px, 1.2vw, 18px);
    font-size: clamp(1.55rem, 2.15vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: -.025em;
    font-weight: 800;
    color: #FFFFFF;
    text-align: left;
    text-shadow: 0 2px 16px rgba(6,8,16,.5);
  }
  .hero-lead-frame > .hero-lead {
    font-size: clamp(1.14rem, 1.5vw, 1.35rem) !important;
    line-height: 1.68 !important;
    color: #D3D9E7 !important;
    text-align: left !important;
    max-width: 68ch !important;
  }
}
@media screen and (max-width: 760px) {
  .hero-lead-title { font-size: clamp(1.35rem, 5.4vw, 1.7rem); }
  .hero-lead-frame > .hero-lead { font-size: 1.06rem !important; }
}

/* ---- 04 · Category modal: no divider seam through the action area ----- */
@media screen {
  .modal-footer {
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ---- 05 · "Empowering families" card sits centred in its band ---------
   The preview section already contributes its own 104px bottom padding, so
   the section's matching top padding doubled the space above the card
   (208px above vs 104px below). Dropping the top padding balances it. */
@media screen {
  .cta-section { padding-top: 0 !important; }
}

/* ---- 06 · Footer logos use the header assets and treatment ------------
   The footer was loading the yellow/purple logo variants at a different
   aspect and scale (118x56 vs the header's 92x43) because `.footer-brand
   img` set an explicit width. Both lockups now use the same two assets and
   are sized by one shared rule, so they can't drift apart again. */
@media screen {
  .brand .brand-mark,
  .site-footer .footer-logo {
    height: 44px !important;
    width: auto !important;
    display: block;
    object-fit: contain;
  }
  .footer-logos { gap: 9px; align-items: center; }
  .footer-logo-divider {
    width: 1px; height: 30px; flex: none; display: block;
    background: rgba(255,255,255,.20);
  }
}
@media screen and (max-width: 980px) {
  .brand .brand-mark, .site-footer .footer-logo { height: 38px !important; }
}
@media screen and (max-width: 720px) {
  .brand .brand-mark, .site-footer .footer-logo { height: 30px !important; }
  .footer-logo-divider { height: 18px; }
}
@media screen and (max-width: 420px) {
  .brand .brand-mark, .site-footer .footer-logo { height: 26px !important; }
}

/* ---- 07 · Social row spans the tagline width --------------------------
   Both boxes share one max-width so the row and the tagline always line up
   ("Healthier habits online, happier minds IRL." measures ~265px). */
@media screen {
  .footer-brand p { max-width: 17rem !important; }
  .footer-social {
    width: 100%;
    max-width: 17rem;
    justify-content: space-between;
    gap: 8px;
  }
}

/* ---- 08 · Hero shares the navigation's content boundaries -------------
   .hero-copy was capped at 1240px and auto-centred inside the 1392px
   shell, so it sat 76px inside the nav on both sides. Align it to the
   header shell's own inner padding instead. */
@media screen {
  .hero-copy {
    max-width: none !important;
    width: auto !important;
    /* .hero sets justify-items:center, which sizes the item to its content
       instead of the column — stretch it so the margins define the edges */
    justify-self: stretch !important;
    /* mirrors .header-shell's own inner padding, so the hero's left edge
       lands on the logo and its right edge on the header actions */
    margin-inline: 22px 14px !important;
  }
}
@media screen and (max-width: 720px) {
  /* .header-shell padding drops to 8px 9px 8px 12px at this breakpoint */
  .hero-copy { margin-inline: 12px 9px !important; }
}

/* ---- 09 · Hero image runs behind the navigation -----------------------
   The photo is absolutely positioned inside .hero, which starts below the
   sticky header — leaving a solid dark band at the top of the page. Pull
   its top edge up past the header (no layout shift, since only the
   absolutely positioned photo moves) and let the nav sit on glass. */
@media screen {
  :root { --hero-rise: 92px; }

  .hero-photo {
    top: calc(-1 * var(--hero-rise)) !important;
    bottom: 0 !important;
    height: auto !important;
  }
  /* the old mask faded the top out; keep it solid where the nav sits */
  .hero-photo {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.55) 78%, rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.55) 78%, rgba(0,0,0,0) 100%) !important;
  }

  .header-shell {
    background: rgba(16,19,30,.52) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  /* once scrolled clear of the photo the nav needs its own surface again */
  .site-header.is-compact .header-shell {
    background: rgba(16,19,30,.86) !important;
  }
}
@media screen and (max-width: 980px) { :root { --hero-rise: 84px; } }
@media screen and (max-width: 760px) { :root { --hero-rise: 75px; } }
@media (prefers-reduced-motion: reduce) { .hero-photo { transition: none; } }

/* ======================================================================
   CLIENT UPDATE PASS 2 — 2026-08-11 (Update Sheet 2)
   ====================================================================== */

/* ---- S2·02 · No dark band across the game selection card --------------
   .modal-footer was `position: sticky; bottom: 0` with a dark gradient, so
   it floated OVER the match grid and blacked out whatever scrolled beneath
   it — the publisher, year and edition rows in the review screenshot.
   Making the modal a flex column and letting the grid own the scroll means
   the buttons never overlap content, so the footer needs no scrim at all
   and the whole modal reads as one continuous surface. */
@media screen {
  .modal-backdrop .modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* the inner region scrolls, not the modal */
  }
  .modal-backdrop .modal > .modal-header,
  .modal-backdrop .modal > .modal-intro,
  .modal-backdrop .modal > .modal-footer { flex: none; }

  .modal-backdrop .modal > .modal-content,
  .modal-backdrop .modal-wide > .game-match-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Once the grid has a definite height (it's now a flex item), the default
     `align-content: normal` compresses the auto rows to fit instead of
     letting them overflow and scroll — which flattened each card to ~41px
     on narrow viewports. `start` keeps rows at their content height. */
  .modal-backdrop .modal-wide > .game-match-grid {
    align-content: start;
    grid-auto-rows: max-content;
    padding-bottom: 6px;   /* room for the last row's focus ring / shadow */
  }

  .modal-backdrop .modal > .modal-footer {
    position: static;                 /* was sticky — that's what overlapped */
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }
}

/* ---- S2·03 · Six suggested games in a balanced 3 x 2 grid -------------
   No CSS needed: `.search-footer` is already a 3-column grid with the
   "Try:" label spanning all three ("Try: chips — tidy grid" block above).
   Five chips left the second row half empty; the sixth (Rocket League, in
   index.html) completes it as 3 + 3. Cover art arrives at runtime from
   igdbDecorateExampleChips(), so the new chip matches the others with no
   asset work. Below 560px the grid drops to 2 columns = 3 even rows.

   The one thing the sixth chip DID need: a placeholder glyph. The set only
   defined :nth-of-type(1)–(5), and with `--glyph` unset the `background`
   shorthand became invalid and the swatch rendered empty. Neutral rocket
   mark, deliberately not the game's trademarked logo — same as the rest. */
@media screen {
  .search-footer button:nth-of-type(6) { --chip: #E07B39;
    --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2c2.8 2.4 4.2 5.7 4.2 9.2L12 14.4 7.8 11.2C7.8 7.7 9.2 4.4 12 2z'/%3E%3Cpath d='M9 15.6l3 1.6 3-1.6-1 4.4-2 1.4-2-1.4z' opacity='.85'/%3E%3C/svg%3E"); }
}

/* ======================================================================
   GAME MINIMAP REPORTING FRAMEWORK — 2026-08-11
   Report area restructured to the "Updated Game Minimap Parameters &
   Structure" document: an ESRB Rating topline, then each parameter as a
   Topline plus named, labelled findings.
   ====================================================================== */
@media screen {
  /* "Topline:" prefix on every section summary */
  .topline-label {
    color: var(--cat, #A259FF);
    font-weight: 850;
    letter-spacing: .01em;
    margin-right: 2px;
  }

  /* Findings are "Label: detail" — the label is the framework parameter */
  .finding-list .finding-label {
    color: var(--navy-900, #0B0F1C);
    font-weight: 800;
  }
  .finding-list li { margin-bottom: 7px; }
  .finding-list li:last-child { margin-bottom: 0; }

  /* Section 1: ESRB Rating — topline only, no expander (per the document,
     "no bullet points needed here, just the official rating") */
  .report-category.cat-esrb { --cat: #E0A33A; }
  .category-heading-static {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 15px;
  }
  .esrb-block .category-badge svg { width: 24px; height: 24px; }
  .esrb-block .category-summary { margin-bottom: 0; }
}

/* Dark report surface: keep the labels legible against the dark theme */
@media screen {
  .report-main .finding-list .finding-label,
  .report-content .finding-list .finding-label { color: inherit; }
}

/* ---- Report disclaimer: icon + modal instead of an inline banner --------
   The yellow disclaimer block dominated the top of every report. The text
   now lives behind an info icon in the report kicker; the original block is
   kept in the DOM for PRINT only, so a printed or PDF'd report still
   carries the notice. */
@media screen {
  .disclaimer-print-only { display: none !important; }

  /* the kicker is space-between; with a third child the date drifted to the
     middle. Push the eyebrow left so the date and its icon stay paired. */
  .report-kicker { align-items: center; justify-content: flex-start; }
  .report-kicker > small { margin-right: auto; }
  .report-info-btn {
    flex: none;
    width: 28px; height: 28px;
    display: inline-grid; place-items: center;
    margin-left: 8px; padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(247,216,74,.34);
    background: rgba(247,216,74,.10);
    color: #F3DC72;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .report-info-btn svg { width: 15px; height: 15px; }
  .report-info-btn:hover {
    background: rgba(247,216,74,.20);
    border-color: rgba(247,216,74,.6);
    transform: translateY(-1px);
  }
  .report-info-btn:focus-visible { outline: 2px solid #F3DC72; outline-offset: 2px; }
}
@media print {
  .report-info-btn { display: none !important; }
  .disclaimer-print-only { display: flex !important; }
}

/* ---- Quick stats: unknown values link out instead of dead-ending --------
   IGDB carries no playtime (its time-to-beat endpoint 404s), so main-story
   and completionist hours come from a curated table in app.js. When a title
   isn't in it the card becomes a link to that game's HowLongToBeat search
   rather than showing an invented number. */
@media screen {
  .quick-stat-link { text-decoration: none; cursor: pointer; position: relative; }
  .quick-stat-link:hover { border-color: rgba(162,89,255,.55); }
  .quick-stat-link .qs-hint {
    display: block;
    margin-top: 6px;
    font-size: .7rem;
    letter-spacing: .04em;
    color: #A98BFF;
  }
  .quick-stat-link:focus-visible { outline: 2px solid #A259FF; outline-offset: 2px; }
}
@media print {
  .quick-stat-link .qs-hint { display: none; }
}

/* ---- Quick stats: row adapts when the playtime cards collapse ----------
   Main story + Completionist merge into a single "Playtime" card when
   neither has a confirmed value, leaving three cards instead of four. */
@media screen {
  .quick-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
@media screen and (max-width: 900px) {
  .quick-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---- Quick stats: label is the headline, value the supporting line -----
   Matches the verdict cards. The value now sits in the <span>, so it needs
   readable size rather than the old caption treatment. */
@media screen {
  .quick-stat strong { font-size: 1.06rem; letter-spacing: -.01em; }
  .quick-stat span { font-size: .92rem; line-height: 1.45; }
}
@media print {
  .quick-stat strong { font-size: 11pt; }
  .quick-stat span { font-size: 9.5pt; }
}

/* ======================================================================
   REPORT SECTION NAV — 2026-08-11
   Was a horizontal bar whose stickiness a later rule cancelled
   (`.report-nav { position: static }`), so jumping to a section scrolled
   the menu off-screen and you had to scroll back up to move again.
   Wide screens now get a fixed rail on the right that stays put; narrower
   ones get the horizontal bar back, properly sticky this time.
   ====================================================================== */

/* ---- shared: uppercase, calmer weight, clearer active state ----------- */
@media screen {
  .report-nav button {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .715rem;
    font-weight: 800;
    color: rgba(255,255,255,.56);
    transition: color .16s ease, background .16s ease;
  }
  .report-nav button:hover { color: #fff; background: rgba(255,255,255,.07); }
  .report-nav button.active {
    color: #fff;
    background: linear-gradient(120deg, rgba(162,89,255,.34), rgba(129,200,132,.20));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  }
  /* headings the nav jumps to shouldn't land under the sticky chrome */
  #overview, #minimap-section, #sources-section, #methodology-section,
  .report-category { scroll-margin-top: 120px; }
}

/* ---- stacked form (below the rail breakpoint): sticky again ---------- */
@media screen and (max-width: 1279px) {
  .report-nav {
    position: sticky !important;
    top: 96px;
    z-index: 30;
    background: rgba(18,16,43,.94) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.34) !important;
  }
}
@media screen and (max-width: 720px) {
  .report-nav { top: 78px; }
}

/* ---- rail form: a sticky column to the right of the report -----------
   NOT `position: fixed`: `html, body { overflow-x: clip }` (the guard that
   stops the 100vw hero photo causing sideways scroll) makes the body a
   containing block for fixed descendants, so a fixed rail resolves `top:50%`
   against the whole document and scrolls away. Sticky inside a grid column
   is immune to that, and `.report-main`'s overflow is unpinned above so the
   stickiness actually takes effect. */
@media screen and (min-width: 1280px) {
  .report-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 28px;
    align-items: start;
  }
  .report-main > .report-nav { grid-column: 2; grid-row: 1; }
  .report-main > .report-content { grid-column: 1; grid-row: 1; min-width: 0; }

  .report-nav {
    position: sticky !important;
    top: 108px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: min(78vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 12px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.11) !important;
    background: rgba(18,16,43,.90) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 26px 64px rgba(0,0,0,.52) !important;
  }
  .report-nav::before {
    content: "Report Sections";
    display: block;
    padding: 2px 10px 10px;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 8px;
  }
  .report-nav button {
    width: 100%;
    text-align: left;
    padding: 10px 11px;
    border-radius: 11px;
    white-space: normal;
    line-height: 1.32;
    position: relative;
  }
  /* marker on the active row so position reads at a glance */
  .report-nav button.active::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 17px;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #A259FF, #81C884);
  }
  .report-nav::-webkit-scrollbar { width: 6px; }
  .report-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
}
@media print { .report-nav { display: none !important; } }

/* ---- why the nav never stayed put --------------------------------------
   Two ancestors were cancelling it, which is why `position: sticky` looked
   applied but behaved like `static`:
     .report-shell has a transform  -> becomes the containing block for
                                       `fixed`, so the rail scrolled away
     .report-main  has overflow:hidden -> becomes the scroll container for
                                       `sticky`, so the bar never stuck
   Both are neutralised for screen only; print hides the nav regardless. */
@media screen {
  /* `.report-shell`'s transform is left alone — it comes from the reportIn
     entrance animation, and the rail is sticky rather than fixed now, so it
     no longer matters. Only the sticky-blocking overflow has to go. */
  .report-main { overflow: visible !important; }
}

/* ---- sticky sidebar taller than the viewport --------------------------
   `.report-sidebar` is sticky at top:112px and taller than the screen, so
   everything past the fold — including Print, Share and New Search — was
   pinned out of reach until you had scrolled the entire right-hand column.
   Capping it to the viewport and letting it scroll internally makes the
   whole card reachable at any scroll position. */
@media screen and (min-width: 981px) {
  .report-sidebar {
    align-self: start;
    max-height: calc(100dvh - 132px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
  }
  .report-sidebar::-webkit-scrollbar { width: 7px; }
  .report-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.20);
    border-radius: 4px;
  }
  .report-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }
}

/* Keep Print / Share / New Search pinned to the base of the sidebar so the
   primary actions are reachable without scrolling inside the card at all.
   Compact sizing, because at full button height the block ate most of the
   viewport and pushed the game details out of view. */
@media screen and (min-width: 981px) {
  .report-sidebar { padding-bottom: 0; }

  .report-sidebar-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    gap: 6px;
    margin-top: 14px;
    padding: 10px 0 14px;
    /* solid, not a gradient: at ~0.9 alpha the rows underneath showed
       through the gaps between buttons */
    background: #0E1018;
  }
  /* short fade so content dissolves into the bar instead of cutting off */
  .report-sidebar-actions::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -24px;
    height: 24px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(14,16,24,0), #0E1018);
  }

  .report-sidebar-actions .button {
    min-height: 0;
    padding: 9px 12px;
    font-size: .82rem;
    font-weight: 700;
    border-radius: 11px;
    gap: 8px;
  }
  .report-sidebar-actions .button svg { width: 15px; height: 15px; }
}

/* ======================================================================
   MOBILE PASS — 2026-08-11
   At 390px the header packed two logos, "Map the Game" and "Donate" into
   the bar, which pushed .menu-toggle to 384→428 — entirely off-screen.
   The hamburger was unreachable, so Methodology / Sources / Privacy /
   Disclaimer could not be opened on a phone at all.
   ====================================================================== */
@media screen and (max-width: 720px) {
  /* the two CTAs move to the drawer (both exist there) so the toggle fits */
  .header-actions .nav-map-btn,
  .header-actions .donate-button { display: none !important; }

  .header-actions {
    justify-self: end;
    gap: 6px;
    min-width: 0;
  }
  .menu-toggle {
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
  }
  .header-shell {
    grid-template-columns: minmax(0, 1fr) auto !important;
    overflow: hidden;
  }
  .brand { min-width: 0; overflow: hidden; }

  /* tap targets: the logo links measured 55x26 */
  .brand-link { padding-block: 9px; }

  /* the report disclaimer icon was 28x28 */
  .report-info-btn { width: 36px; height: 36px; }
  .report-info-btn svg { width: 17px; height: 17px; }

  /* drawer: the added Map the Game sits above Donate */
  .drawer-cta { min-height: 46px; }
  .drawer-cta-quiet {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
  }
}

/* ---- mobile: report cards had their padding zeroed ---------------------
   `.report-category` is padded 28px on desktop but 0 on narrow screens, so
   every heading, Topline and finding sat flush against the card edge — and
   the 6px `::before` accent bar painted straight over the first characters
   ("Topline:" rendering as "opline:"). Restore padding, with extra on the
   left so nothing runs under the accent bar. */
@media screen and (max-width: 980px) {
  .report-category {
    padding: 18px 16px 18px 22px !important;
    border-radius: 18px;
  }
  .report-category .category-summary { margin-bottom: 0; }
  .report-category .category-details { margin-top: 14px; }
  /* the badge and chevron were also hard against the edges */
  .category-heading { gap: 11px; }
  .category-badge { width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; }
  .esrb-block .category-badge svg { width: 19px; height: 19px; }
  .category-heading h3 { font-size: 1.12rem; line-height: 1.25; }
  .detail-block { padding-inline: 0; }
}

/* ---- mobile: consistent inset + rhythm inside report cards -------------
   `.detail-block` was `padding: 24px 0`, so each panel's content sat flush
   against its own edges while the card around it had padding — the nesting
   read as inconsistent. One inset value for every level, and slightly
   tighter vertical gaps now that the cards are narrower. */
@media screen and (max-width: 980px) {
  .category-details { gap: 14px !important; }

  .detail-block {
    padding: 16px 15px !important;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
  }
  .detail-block h4 { margin: 0 0 10px; }
  .detail-block > p { margin: 0; }
  .detail-block ul { margin: 0; padding-left: 18px; }
  .detail-block li + li { margin-top: 9px; }

  .source-row { padding: 13px 14px; }
  .detail-block .source-row + .source-row { margin-top: 9px; }

  .insight-card { padding: 18px 16px; }
  .summary-grid { gap: 12px; }

  .report-section + .report-section { margin-top: 26px; }
  .report-section-head { margin-bottom: 14px; }
  .report-category + .report-category { margin-top: 14px; }
}

/* ======================================================================
   DEVELOPER NOTES pt3 — 2026-08-12
   ====================================================================== */

/* ---- #2 · halve the nav→copy gap, reuse it between sections ---------- */
@media screen {
  .hero { padding-block: clamp(38px, 5vw, 74px) var(--s8) !important; }
  .framework-section, .preview-section { padding-block: clamp(38px, 5vw, 74px) !important; }
}

/* ---- #3 · first sentence is the heading, rest is body ---------------- */
@media screen {
  .hero-lead-frame > .hero-lead-lead {
    font-size: clamp(1.5rem, 2.1vw, 2.05rem) !important;
    line-height: 1.22 !important;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #FFFFFF !important;
    margin: 0 0 clamp(12px, 1.2vw, 18px) !important;
    text-shadow: 0 2px 16px rgba(6,8,16,.5);
    max-width: 26ch !important;
  }
  .hero-lead-frame > .hero-lead:not(.hero-lead-lead) {
    font-size: clamp(1.02rem, 1.25vw, 1.14rem) !important;
    line-height: 1.65 !important;
    color: #C9D0E0 !important;
    margin: 0 !important;
  }
}
@media screen and (max-width: 760px) {
  .hero-lead-frame > .hero-lead-lead { font-size: clamp(1.3rem, 5.2vw, 1.62rem) !important; max-width: none !important; }
  .hero-lead-frame > .hero-lead:not(.hero-lead-lead) { font-size: 1rem !important; }
}

/* ---- #4 · search panel sits level with the headline ------------------ */
@media screen and (min-width: 981px) {
  .hero-copy { align-items: start; }
  .hero-right { padding-top: clamp(56px, 7vw, 104px); }
}

/* ---- #7 / #8 · verdict colours follow the category ------------------- */
/* ESRB → purple (mechanics) · multiplayer → pink (safety) · purchases → green */
@media screen {
  .verdict-item:nth-child(1) { --vc: #A259FF; }
  .verdict-item:nth-child(2) { --vc: #FF5FA8; }
  .verdict-item:nth-child(3) { --vc: #4FD37A; }
  .verdict-item {
    border-left: 3px solid var(--vc, #A259FF) !important;
    box-shadow: none !important;
  }
  .verdict-item svg { color: var(--vc, #A259FF) !important; }
  .verdict-item .topline-label { color: var(--vc); }
  /* the nav marker + ESRB block follow the same purple */
  .report-category.cat-esrb { --cat: #A259FF; }
}

/* ---- #9 · let subheads use the full column before wrapping ----------- */
@media screen and (min-width: 981px) {
  .report-section-head p, .section-heading p { max-width: 78ch; }
}

/* ---- #10 · breathing room under the ESRB topline --------------------- */
@media screen {
  .esrb-block .category-summary { margin-bottom: 0; }
  .esrb-block { padding-bottom: 26px; }
}

/* ---- #13 · sidebar buttons evenly spaced ----------------------------- */
@media screen and (min-width: 981px) {
  .report-sidebar-actions { gap: 10px; padding-block: 14px 18px; }
}

/* ---- #14 · bottom search copy larger, closer to the button ----------- */
@media screen {
  .cta-card h2 { margin-bottom: 0 !important; }
  .cta-card { gap: 18px; }
  .cta-card .button { margin-left: 4px; }
}

/* ---- #5 · hero carousel: slow cross-fade between the client photos -----
   `.hero-photo` keeps its background; `.hero-photo-layer` sits on top and
   fades in with the next image, so the two layers alternate. Both inherit
   the same mask and scrim, so the treatment never changes between frames. */
@media screen {
  .hero-photo-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2.4s ease-in-out;
    pointer-events: none;
  }
  .hero-photo-layer.is-on { opacity: 1; }
  /* the scrim must paint above both layers */
  .hero-photo::after { z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-layer { transition: none; }
}

/* ---- six-section framework: category E + the new cyan B ---------------- */
@media screen {
  .report-category.cat-a { --cat: #4F7DF3; }   /* Time Commitment  */
  .report-category.cat-b { --cat: #35D4E8; }   /* Gameplay Mechanics */
  .report-category.cat-c { --cat: #4FD37A; }   /* Monetization */
  .report-category.cat-d { --cat: #FF8A3D; }   /* Safety & Privacy */
  .report-category.cat-e { --cat: #A259FF; }   /* Parent Engagement */
}

/* =====================================================================
   CENTRED READING COLUMN — 2026-08-13
   ---------------------------------------------------------------------
   The report is three columns at desktop: the game sidebar, the reading
   column, and the sticky "Report Sections" rail. The two outer rails were
   different widths, so the middle column was not centred:

     left  = 300px sidebar + 20px gap = 320px
     right =  28px gap  + 236px rail  = 264px      -> 56px off-centre

   The rail is now an exact mirror of the sidebar — same width, same gap —
   driven by two custom properties so the pair cannot drift apart again.
   Changing either variable keeps both sides equal automatically.

   Side effect, and a welcome one: the rail gains 64px, so the longer
   section names ("Parent Engagement Guide") stop wrapping to two lines.
   ===================================================================== */
:root {
  --report-rail: 300px;      /* width of BOTH outer columns */
  --report-rail-gap: 20px;   /* gutter between each rail and the middle */
}

@media screen and (min-width: 981px) {
  .report-shell {
    grid-template-columns: var(--report-rail) minmax(0, 1fr);
    gap: var(--report-rail-gap);
  }
}

@media screen and (min-width: 1280px) {
  .report-main {
    grid-template-columns: minmax(0, 1fr) var(--report-rail);
    gap: var(--report-rail-gap);
  }
}

/* =====================================================================
   HERO: FLAT 25% SCRIM + COPY ON THE NAV'S LEFT EDGE — 2026-08-13
   ---------------------------------------------------------------------
   1. Scrim. Earlier passes used two stacked gradients — a left-heavy one
      for text contrast and a vertical one for depth — which made the
      photo read at a different darkness across its width. Replaced with
      a single flat 25% black, as asked.

   2. Alignment. Item 08 (2026-08-11) set `.hero-copy { margin-inline:
      22px 14px }` to mirror .header-shell's *inner* padding, so the copy
      landed on the logo. Measured, that put the text at x=46 while the
      nav bar's own left edge is x=24 — a 22px step that reads as a
      misalignment. The copy now starts on the nav bar's outer edge.
      The right margin is untouched: it is an internal gutter against the
      hero photo, not a page edge.
   ===================================================================== */
@media screen {
  .hero-photo::after {
    background: rgba(0, 0, 0, .25) !important;
  }

  .hero-copy {
    margin-inline-start: 0 !important;
  }
}

/* =====================================================================
   HERO LOGO — 2026-08-13
   ---------------------------------------------------------------------
   The client's Video Game Minimap lockup replaces the "The Video Game
   Minimap" eyebrow above the headline — the eyebrow said exactly what
   the logo says, so keeping both printed the name twice. The alt text
   carries the words for screen readers and for a failed image load.

   The supplied artwork is the 3-colour version: a black mark with white
   counters and a purple gradient tile, and a white wordmark carrying a
   heavy black outline. On this dark hero the black reads as a drop
   shadow and the white comes forward, which is exactly the reversed
   treatment the hero needs — so no separate knockout file is required.
   ===================================================================== */
@media screen {
  .hero .hero-logo {
    /* Optical alignment. The artwork's black outline bleeds 6.6% of the
       image width past the white mark on the left. On this dark ground the
       black is invisible, so a flush-left image reads as indented by that
       much against the headline. Pulling the box left by the same 6.6%
       lands the *visible* white edge on the headline's stem. One variable
       drives both, so a width change can't reintroduce the offset. */
    --vgm-w: min(300px, 62%);
    /* how far left the pull may go before the artwork leaves the viewport:
       the page shell's own side margin, which is all the room there is */
    --vgm-room: 24px;
    display: block;
    width: var(--vgm-w);
    height: auto;
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    /* max() of two negatives = the smaller pull, so on narrow screens the
       logo stops at the viewport edge instead of being clipped there */
    margin-left: max(calc(-1 * var(--vgm-w) * 0.066), calc(-1 * var(--vgm-room)));
    /* the artwork's own black outline is its shadow on dark ground; this
       only lifts it off the brighter frames of the photo carousel */
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
  }
}

@media screen and (max-width: 980px) {
  .hero .hero-logo { --vgm-w: min(260px, 62%); --vgm-room: 16px; }
}

@media screen and (max-width: 720px) {
  .hero .hero-logo { --vgm-w: min(220px, 70%); }
}

@media screen and (max-width: 600px) {
  .hero .hero-logo { --vgm-room: 11px; }
}

/* the eyebrow is centred on small screens; the logo is a left-aligned
   block, so it must not inherit that centring from any earlier rule */
@media screen and (max-width: 900px) {
  .hero .hero-logo { margin-right: auto; }
}

@media print {
  .hero .hero-logo { width: 2in; filter: none; }
}

/* =====================================================================
   CONFIDENCE + SOURCE TIER — 2026-08-14
   ---------------------------------------------------------------------
   Master Source of Truth, CONFIDENCE SYSTEM and SOURCE HIERARCHY.

   High confidence carries no chip on purpose. It is the expected standard
   for a published finding, so badging it would put a mark on nearly every
   line and the badge would stop meaning anything. Medium and Low are the
   exceptions a parent needs to see, so only those are drawn.

   Tier pills are muted rather than colour-coded by rank — a Tier 4 source
   is not a warning, it is a different kind of evidence, and colouring it
   red would misrepresent the hierarchy as a quality score.
   ===================================================================== */
@media screen {
  .confidence-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .confidence-pill.conf-medium {
    color: #F5C451;
    background: rgba(245, 196, 81, .12);
    border-color: rgba(245, 196, 81, .3);
  }
  .confidence-pill.conf-low {
    color: #FF9F7A;
    background: rgba(255, 159, 122, .12);
    border-color: rgba(255, 159, 122, .32);
  }

  .source-tier {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
  }
  /* Tier 1 earns the only accent — it is the one the framework tells a
     reader to trust over the others when sources disagree. */
  .source-tier.tier-1 {
    color: #7FE3A6;
    background: rgba(127, 227, 166, .1);
    border-color: rgba(127, 227, 166, .26);
  }
}

/* light context (print) */
@media print {
  .confidence-pill { border: 1px solid #999; color: #333; background: none; }
  .source-tier { border: 1px solid #bbb; color: #444; background: none; }
}

@media screen and (max-width: 600px) {
  .confidence-pill, .source-tier { margin-left: 6px; font-size: .58rem; padding: 2px 6px; }
}

/* =====================================================================
   REQUEST A FULL RESEARCHED REPORT — 2026-08-17
   ---------------------------------------------------------------------
   Promoted from a single quiet button to a full card.

   The earlier restraint was correct when this was only a vote: the report
   already labelled its own tier twice, and a headed callout on top read as
   an apology for the report existing.

   What changed is what sits behind the button. It is now the entry point
   to a materially better product, so it earns real estate — an accent
   edge, a heading, and four lines naming the questions a researched
   report answers that a database-built one cannot. "Researched report"
   means nothing to a parent; "what quitting mid-game costs" does.

   Still not a klaxon. No filled brand-colour block, no animation. It sits
   inside the report as a considered offer, not an interruption.
   ===================================================================== */
@media screen {
  .research-request {
    display: block;
    margin: 26px 0 6px;
    padding: 22px 24px;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(162, 89, 255, .10), rgba(162, 89, 255, .03) 60%, transparent);
    border: 1px solid rgba(162, 89, 255, .30);
    border-left: 3px solid var(--purple, #A259FF);
  }

  .research-request h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 1.06rem;
    font-weight: 750;
    letter-spacing: -.01em;
    color: #fff;
  }
  .research-request h3 svg { width: 18px; height: 18px; color: var(--purple, #A259FF); flex: 0 0 auto; }

  .research-request .rr-lede {
    margin: 0 0 12px !important;
    font-size: .93rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .74) !important;
  }

  .research-request .rr-list {
    margin: 0 0 14px !important;
    padding-left: 0 !important;
    list-style: none;
    display: grid;
    gap: 7px;
  }
  .research-request .rr-list li {
    position: relative;
    padding-left: 22px;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
  }
  /* A tick rather than a bullet: these are things you get, not things to do. */
  .research-request .rr-list li::before {
    content: "";
    position: absolute;
    left: 3px; top: .55em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--purple, #A259FF);
    border-bottom: 2px solid var(--purple, #A259FF);
    transform: rotate(-45deg);
  }

  /* Lead-in to the three "what to expect" points. */
  .research-request .rr-note-lead {
    margin: 2px 0 10px !important;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
  }
  /* The three expectations: free / takes a few minutes / saved for everyone.
     Icon + bold lead + plain text, so a parent scans them in a glance. */
  .research-request .rr-expect {
    margin: 0 0 14px !important;
    padding: 12px 14px !important;
    list-style: none;
    display: grid;
    gap: 9px;
    background: rgba(162, 89, 255, .07);
    border: 1px solid rgba(162, 89, 255, .18);
    border-radius: 12px;
  }
  .research-request .rr-expect li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .74);
  }
  .research-request .rr-expect li svg {
    width: 16px; height: 16px; flex: 0 0 auto;
    margin-top: 2px;
    color: #5FD08A;
  }
  .research-request .rr-expect strong { color: #fff; font-weight: 700; }

  /* Shown when a full report is free to the reader — sets the expectation
     that it takes time, without implying they owe anything. */
  .research-request .rr-note-quiet {
    margin: 0 0 16px !important;
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .56) !important;
  }

  /* Shown only when PAID_REQUESTS is on. Deliberately plain — a price is a
     fact to state, not something to dress up on a site for parents. */
  .research-request .rr-price {
    margin: 0 0 16px !important;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.5;
    color: #FFD79A !important;
    background: rgba(245, 166, 35, .10);
    border: 1px solid rgba(245, 166, 35, .26);
  }

  .research-request .rr-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--purple, #A259FF);
    color: #fff;
    font-size: .93rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
  }
  .research-request .rr-button:hover {
    background: #B478FF;
    box-shadow: 0 10px 26px rgba(162, 89, 255, .28);
  }
  .research-request .rr-button:active { transform: translateY(1px); }
  .research-request .rr-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .research-request .rr-button svg { width: 16px; height: 16px; }

  /* Quiet reassurance under the pay button: names the processor and sets the
     one expectation that matters — you leave to Stripe and come right back. */
  .research-request .rr-secure {
    display: flex; align-items: center; gap: 7px;
    margin: 11px 0 0 !important;
    font-size: .8rem; line-height: 1.4;
    color: rgba(255, 255, 255, .5) !important;
  }
  .research-request .rr-secure svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .85; }

  /* The status line now carries three kinds of message — progress, refusal
     ("you have had today's report"), and success — so the base state is
     neutral and only .rr-note-ok is green. A "come back tomorrow" printed in
     success-green reads as though something worked. */
  .research-request .rr-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 0 0 !important;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
    color: #D7DEEA !important;
  }
  .research-request .rr-note-ok { color: #9FE3B4 !important; }

  /* ---- research progress panel ------------------------------------------
     Shown while a run is in flight. Every moving part here is driven by real
     stage data from the worker; nothing animates on a timer pretending to be
     progress, so if a run stalls the panel visibly stalls too. */
  .research-progress {
    margin-top: 16px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(10, 16, 32, .55);
    border: 1px solid rgba(162, 89, 255, .28);
  }
  .research-progress .rp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .research-progress .rp-title { margin: 0 !important; font-size: 1rem; font-weight: 700; color: #F2F5FA; }
  .research-progress .rp-eta { margin: 2px 0 0 !important; font-size: .85rem; color: #9AA6BC; }

  /* Three staggered dots. Cheap, calm, and obviously "working" without
     implying a specific completion time the way a spinning arc does. */
  .research-progress .rp-spinner { display: flex; gap: 5px; flex: 0 0 auto; }
  .research-progress .rp-spinner i {
    width: 9px; height: 9px; border-radius: 50%;
    background: #A259FF;
    animation: rp-pulse 1.25s ease-in-out infinite;
  }
  .research-progress .rp-spinner i:nth-child(2) { animation-delay: .18s; background: #7B6CFF; }
  .research-progress .rp-spinner i:nth-child(3) { animation-delay: .36s; background: #22C7B8; }
  @keyframes rp-pulse {
    0%, 100% { transform: scale(.65); opacity: .35; }
    50%      { transform: scale(1);   opacity: 1; }
  }

  .research-progress .rp-bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, .09);
  }
  .research-progress .rp-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #A259FF, #22C7B8);
    /* Long transition because real progress arrives in jumps — easing them
       out stops the bar snapping between stages. */
    transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
    position: relative;
  }
  .research-progress .rp-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: rp-sheen 1.9s linear infinite;
  }
  @keyframes rp-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

  .research-progress .rp-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
  .research-progress .rp-step { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #7C8798; }
  .research-progress .rp-dot {
    width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
    border: 2px solid rgba(255,255,255,.18);
    position: relative; transition: border-color .3s ease, background .3s ease;
  }
  .research-progress .rp-step.is-active { color: #F2F5FA; font-weight: 600; }
  .research-progress .rp-step.is-active .rp-dot {
    border-color: #A259FF;
    animation: rp-ring 1.6s ease-out infinite;
  }
  @keyframes rp-ring {
    0%   { box-shadow: 0 0 0 0 rgba(162, 89, 255, .5); }
    100% { box-shadow: 0 0 0 9px rgba(162, 89, 255, 0); }
  }
  .research-progress .rp-step.is-done { color: #9FE3B4; }
  .research-progress .rp-step.is-done .rp-dot { border-color: #3FBF7F; background: #3FBF7F; }
  .research-progress .rp-step.is-done .rp-dot::after {
    content: ''; position: absolute; left: 3px; top: .5px;
    width: 4px; height: 8px; border: solid #06131F;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
  }

  .research-progress .rp-allowance {
    margin: 14px 0 0 !important;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .84rem;
    font-weight: 700;
    color: #C9B6FF;
  }
  .research-request .rr-allowance { color: #E8ECF3; }
  .research-progress .rp-foot {
    margin: 14px 0 0 !important;
    font-size: .82rem; line-height: 1.55; color: #7C8798;
  }

  /* Motion is decorative here — the stage text and the checkmarks carry the
     same information without it. */
  @media (prefers-reduced-motion: reduce) {
    .research-progress .rp-spinner i,
    .research-progress .rp-fill::after,
    .research-progress .rp-step.is-active .rp-dot { animation: none; }
    .research-progress .rp-fill { transition: none; }
    .research-progress .rp-spinner i { opacity: .9; transform: none; }
  }
  .research-request .rr-button[disabled] {
    opacity: .6;
    cursor: progress;
    box-shadow: none;
  }
  .research-request .rr-note svg { width: 16px; height: 16px; flex: 0 0 auto; }
}

@media screen and (max-width: 600px) {
  .research-request { padding: 18px 16px; margin: 20px 0 4px; }
  .research-request h3 { font-size: 1rem; }
  .research-request .rr-button { width: 100%; justify-content: center; }
}

/* the request is an on-screen action; it means nothing on paper */
/* =====================================================================
   PLATFORM GUIDES — 2026-08-15
   ---------------------------------------------------------------------
   Section 5 now carries two different kinds of claim: what the GAME does,
   and what the CONSOLE can do about it. Those must not look alike. A
   parent who reads "voice chat can be set to Friends only" as a Minecraft
   setting will go hunting for it inside Minecraft, where it does not
   exist — it is an Xbox account setting that applies to every game.

   So each platform gets its own card, keyed by an accent colour drawn
   from the platform record, sitting inside the Safety section but visibly
   nested one level in from the game's own findings.

   Name and topline are always visible because that is the payload — the
   single most useful sentence about that console. The full control list
   sits behind a native <details>: Minecraft matches three platforms, and
   expanding all of them by default would bury the game's own safety
   findings under about 28 platform ones.
   ===================================================================== */
@media screen {
  .platform-block { border-color: rgba(162, 89, 255, .2) !important; }

  .pg-intro {
    margin: 0 0 14px !important;
    font-size: .88rem;
    color: rgba(255, 255, 255, .58) !important;
  }

  .platform-guide {
    position: relative;
    margin-top: 12px;
    padding: 15px 16px 14px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .09);
    border-left: 3px solid var(--pg-accent, #A259FF);
  }

  .pg-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 6px !important;
  }
  .pg-name {
    font-weight: 750;
    font-size: 1rem;
    color: #fff;
    letter-spacing: -.01em;
  }
  .pg-system {
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--pg-accent, #A259FF);
    background: color-mix(in srgb, var(--pg-accent, #A259FF) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--pg-accent, #A259FF) 30%, transparent);
  }

  .pg-topline {
    margin: 0 !important;
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78) !important;
  }

  /* The disclosure control. Quiet by default — it is an invitation, not a
     call to action, and it repeats on every platform card. */
  .pg-details { margin-top: 11px; }
  .pg-details > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 5px 10px 5px 11px;
    border-radius: 9px;
    cursor: pointer;
    list-style: none;
    font-size: .83rem;
    font-weight: 650;
    color: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .13);
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .pg-details > summary::-webkit-details-marker { display: none; }
  .pg-details > summary:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--pg-accent, #A259FF) 55%, transparent);
    background: color-mix(in srgb, var(--pg-accent, #A259FF) 10%, transparent);
  }
  .pg-details > summary:focus-visible {
    outline: 2px solid var(--pg-accent, #A259FF);
    outline-offset: 2px;
  }
  .pg-details > summary svg {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
  }
  .pg-details[open] > summary svg { transform: rotate(180deg); }

  .pg-body { padding-top: 13px; }
  .pg-setup {
    margin: 0 0 12px !important;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72) !important;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
  }
  .pg-setup strong { color: #fff; }

  .pg-body .finding-list { font-size: .9rem; }

  .pg-sub { margin-top: 14px; }
  .pg-sub h5 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .82);
  }
  .pg-sub h5 svg { width: 15px; height: 15px; }
  .pg-sub.gap-block {
    padding: 12px 13px;
    border-radius: 11px;
    background: rgba(245, 166, 35, .07);
    border: 1px solid rgba(245, 166, 35, .2);
  }
  .pg-sub.gap-block h5 svg { color: var(--orange); }
  .pg-sub.gap-block ul { font-size: .85rem; }
}

@media screen and (max-width: 600px) {
  .platform-guide { padding: 13px 13px 12px 14px; }
  .pg-details > summary { width: 100%; justify-content: space-between; }
}

/* Paper cannot be expanded, so every disclosure is forced open and the
   control that opens it is removed. A printed report that hid a third of
   Section 5 behind a chevron would be worse than one that never had it. */
@media print {
  .pg-details > summary { display: none !important; }
  .pg-details > .pg-body,
  .pg-details[open] > .pg-body { display: block !important; padding-top: 4px !important; }
  .pg-details { display: block !important; }

  .platform-guide {
    background: #f7f9fc !important;
    border: 1px solid #e3e9f0 !important;
    border-left: 3px solid var(--pg-accent, #A259FF) !important;
    break-inside: avoid;
    margin-top: 10px;
  }
  .pg-name { color: #0A1B3A !important; }
  .pg-intro, .pg-topline, .pg-setup { color: #38424f !important; }
  .pg-setup { background: #fff !important; border: 1px solid #e3e9f0 !important; }
  .pg-setup strong { color: #0A1B3A !important; }
  .pg-sub h5 { color: #0A1B3A !important; }
  .pg-sub.gap-block { background: #FFFBF2 !important; border: 1px solid #F7E6B9 !important; }
}

/* The request card is an on-screen action and means nothing on paper. */
@media print { .research-request { display: none !important; } }

/* The print frame is a table ONLY for paged media — it exists so Chrome will
   repeat the running header and footer and reserve their space, which
   position:fixed cannot do. On screen every part of it is a plain block, so it
   changes nothing there, and the running furniture is not rendered at all. */
@media screen {
  .print-frame,
  .print-frame > tbody,
  .print-frame > tbody > tr,
  .print-frame > tbody > tr > td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: baseline;
  }
  .print-frame-head,
  .print-frame-foot { display: none !important; }
}

/* ======================================================================
   PRINTED REPORT — designed for print, 2026-08-21 (v2)
   ======================================================================
   Goal: an exported PDF that reads as a designed report, not a web page that
   was converted. Rebuilt from the earlier minimal pass, which fixed the
   mechanics (12 clean pages, running furniture, no blank pages) but was too
   bare to look intentional.

   Two principles hold the whole thing together:

   1. STRUCTURE FROM INK THAT ALWAYS PRINTS. Browsers strip background-color
      and box-shadow when "Background graphics" is off in the print dialog, but
      NEVER strip borders or text colour. So every section is defined by a
      border, a coloured heading and spacing — legible with zero backgrounds.
      Tints and bands are layered on top via print-color-adjust as enhancement;
      if they print, better, if not, nothing is lost and nothing goes invisible.
      (No white-text-on-a-fill anywhere, which would vanish without the fill.)

   2. ONE CONTAINER PER SECTION, NEVER NESTED. The previous heavy-card version
      misaligned because a card sat inside a card inside a card, giving four
      left edges. Here each section is a single padded block; its sub-parts are
      separated by spacing and rules, not their own boxes. Design and alignment
      both fall out of that rule.

   Page numbers use @page margin boxes — verified to render in the print
   engine, so "Page X of Y" is real, not left to the browser dialog.
   ====================================================================== */
@media print {
  :root {
    /* Print-safe accent per category. Chosen with distinct lightness so they
       stay distinguishable in grayscale, and dark enough to read as text. */
    --pc-ink:    #14181f;
    --pc-body:   #2b313b;
    --pc-mute:   #667085;
    --pc-line:   #d7dce3;
    --pc-hair:   #e8ebf0;
    --pc-tint:   #f6f8fb;
    --pc-brand:  #6d28d9;
  }

  @page {
    size: A4;
    margin: 16mm 14mm 17mm;
    /* Real page numbers — this engine renders margin-box counters. */
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 7.5pt;
      color: #8a929c;
    }
  }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  html, body {
    background: #fff !important;
    color: var(--pc-body) !important;
    font-size: 9.5pt;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* ---- running header / footer (table thead/tfoot: repeats + reserves) ---- */
  .print-frame { width: 100%; border-collapse: collapse; }
  .print-frame > tbody > tr > td { padding: 0; border: 0; vertical-align: top; }

  .print-frame-head th,
  .print-frame-foot td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8mm; text-align: left; font-weight: 400;
  }
  .print-frame-head th {
    padding: 0 0 2mm; margin: 0 0 5mm;
    border-bottom: 0.75pt solid var(--pc-line);
    font-size: 7.2pt; letter-spacing: .1em; text-transform: uppercase;
    color: var(--pc-mute) !important;
  }
  .print-frame-head .prh-game { color: var(--pc-ink) !important; font-weight: 700; }
  .print-frame-foot td {
    padding: 2mm 0 0; margin-top: 5mm;
    border-top: 0.75pt solid var(--pc-line);
    font-size: 7pt; color: var(--pc-mute) !important;
  }
  .print-frame-foot .prf-url { white-space: nowrap; }
  .print-footer { display: none !important; }

  /* ====================================================================
     PAGE ONE — MASTHEAD + TITLE
     ==================================================================== */
  .print-letterhead {
    display: block !important;
    padding: 0 0 3.5mm; margin: 0 0 6mm;
    border: 0 !important; border-bottom: 2pt solid var(--pc-brand) !important;
    border-radius: 0 !important; background: none !important; box-shadow: none !important;
    break-after: avoid;
  }
  /* Top logo bar: the Video Game Minimap product mark on the left, the two
     health-e brand marks paired on the right. */
  .print-letterhead .plh-logos {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 6mm; margin: 0 0 3.5mm;
  }
  .print-letterhead .plh-minimap { width: 44mm; height: auto; }
  .print-letterhead .plh-brandpair { display: flex !important; align-items: center; gap: 6mm; }
  .print-letterhead .plh-brandpair img { width: 25mm; height: auto; }
  .print-letterhead .plh-row {
    display: flex !important; align-items: flex-end; justify-content: space-between; gap: 6mm;
  }
  .print-letterhead .plh-text { flex: 1; }
  .print-letterhead .plh-text strong {
    display: block; font-size: 13pt; letter-spacing: -.01em; color: var(--pc-ink) !important;
  }
  .print-letterhead .plh-text small {
    display: block; font-size: 7pt; letter-spacing: .13em; text-transform: uppercase; color: var(--pc-mute) !important;
  }
  .print-letterhead .plh-meta { text-align: right; }
  .print-letterhead .plh-meta span { display: block; font-size: 8.5pt; font-weight: 700; color: var(--pc-ink) !important; }
  .print-letterhead .plh-meta small { display: block; font-size: 7pt; color: var(--pc-mute) !important; }

  .report-shell { display: block !important; }
  .report-sidebar {
    display: block !important; border: 0 !important; padding: 0 !important;
    margin: 0 0 6mm !important; background: none !important; break-inside: avoid; break-after: avoid;
  }

  /* Cover thumbnail — small, tidy, rounded, floated so the title reads first. */
  .report-cover {
    float: right; width: 30mm; height: 38mm; min-height: 0 !important;
    margin: 1mm 0 3mm 6mm; border-radius: 3pt; overflow: hidden;
    border: 0.75pt solid var(--pc-line); break-inside: avoid;
  }
  .report-cover strong, .report-cover small, .cover-overlay { display: none !important; }
  .report-cover img { width: 100%; height: 100%; object-fit: cover; }

  .report-game-info h2 {
    font-size: 25pt !important; line-height: 1.08; letter-spacing: -.02em;
    margin: 0 0 4mm !important; color: var(--pc-ink) !important;
  }
  /* Fact strip as a clean bordered card. */
  .report-game-info dl {
    display: block !important; margin: 0;
    border: 0.75pt solid var(--pc-line); border-radius: 4pt; overflow: hidden;
    max-width: 118mm;
  }
  .report-game-info dl > div {
    display: grid !important; grid-template-columns: 26mm 1fr; gap: 0 4mm !important;
    padding: 2.2mm 4mm !important; border: 0 !important;
    border-bottom: 0.5pt solid var(--pc-hair) !important;
    font-size: 8.6pt !important; break-inside: avoid; align-items: baseline;
    background: none;
  }
  .report-game-info dl > div:last-child { border-bottom: 0 !important; }
  .report-game-info dl > div:nth-child(even) { background: var(--pc-tint) !important; }
  .report-game-info dt {
    color: var(--pc-mute) !important; text-transform: uppercase; letter-spacing: .05em;
    font-size: 6.8pt !important; padding-top: .4mm;
  }
  .report-game-info dd { color: var(--pc-ink) !important; margin: 0; text-align: left !important; font-weight: 500; }

  .report-mode {
    display: inline-flex !important; align-items: center; gap: 2mm;
    margin: 4mm 0 0 !important; padding: 1.4mm 3mm !important;
    background: var(--pc-tint) !important; border: 0.75pt solid var(--pc-line) !important;
    border-radius: 999px !important; font-size: 7.6pt !important; color: var(--pc-body) !important;
    clear: both;
  }
  .report-mode svg { display: none !important; }
  .report-mode strong { color: var(--pc-ink) !important; }
  .report-mode strong::after { content: "  ·  "; color: var(--pc-mute); font-weight: 400; }
  .report-mode br { display: none; }

  /* ---- lead / overview ------------------------------------------------ */
  .report-hero h1, .report-kicker { display: none !important; }
  .report-hero { padding: 0 !important; border: 0 !important; margin: 5mm 0 0 !important; }
  .report-hero > p {
    font-size: 11pt !important; line-height: 1.55; color: var(--pc-ink) !important;
    margin: 0 0 5mm !important; max-width: none;
    padding: 0 0 0 4mm; border-left: 2.5pt solid var(--pc-brand);
  }

  /* ---- AT A GLANCE — stat tiles --------------------------------------- */
  .quick-stats {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(36mm, 1fr));
    gap: 3mm !important;
    margin: 0 0 6mm !important; padding: 0 !important; border: 0 !important; break-inside: avoid;
  }
  .quick-stat {
    padding: 3mm 3.5mm !important; margin: 0 !important;
    background: var(--pc-tint) !important; border: 0.75pt solid var(--pc-line) !important;
    border-radius: 4pt !important; break-inside: avoid;
  }
  .quick-stat svg { display: none !important; }
  .quick-stat strong {
    display: block; font-size: 6.8pt !important; margin: 0 0 1.2mm !important;
    text-transform: uppercase; letter-spacing: .07em; color: var(--pc-mute) !important; font-weight: 700;
  }
  .quick-stat span { font-size: 8.6pt !important; color: var(--pc-ink) !important; line-height: 1.35; font-weight: 500; }
  /* When only two or three stat cards survive, keep them from stretching oddly. */
  .quick-stats.q-2 { grid-template-columns: repeat(2, 1fr); }
  .quick-stats.q-3 { grid-template-columns: repeat(3, 1fr); }

  /* ---- disclaimer callout --------------------------------------------- */
  .disclaimer-box {
    background: var(--pc-tint) !important; border: 0 !important;
    border-left: 2.5pt solid var(--pc-mute) !important; border-radius: 0 3pt 3pt 0 !important;
    padding: 2.5mm 3.5mm !important; margin: 0 0 6mm !important;
    color: var(--pc-body) !important; font-size: 8pt !important; line-height: 1.5; break-inside: avoid;
  }
  .disclaimer-box svg { display: none !important; }

  /* ====================================================================
     CONTENTS
     ==================================================================== */
  .report-nav {
    display: block !important; position: static !important; width: auto !important;
    margin: 0 0 6mm !important; padding: 3.5mm 4.5mm !important;
    border: 0.75pt solid var(--pc-line) !important; border-radius: 4pt !important;
    background: var(--pc-tint) !important; box-shadow: none !important;
    break-inside: avoid; break-after: avoid;
  }
  .report-nav::before {
    content: "Contents"; display: block;
    font-size: 7.2pt; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--pc-mute); margin-bottom: 2.5mm;
  }
  .report-nav button {
    display: inline-block !important; background: none !important; border: 0 !important;
    padding: 0 4mm 1mm 0 !important; margin: 0 !important;
    font-size: 8.8pt !important; color: var(--pc-ink) !important; text-align: left !important; width: auto !important;
  }
  .report-nav button svg, .report-nav .rn-dot { display: none !important; }

  /* ====================================================================
     SECTIONS  (each a defined area)
     ==================================================================== */
  .report-section {
    padding: 0 !important; margin: 0 0 7mm !important; border: 0 !important;
    break-inside: auto;
  }
  .report-section-head {
    margin: 0 0 3.5mm !important; padding: 0 0 2mm !important;
    border-bottom: 1pt solid var(--pc-ink) !important; break-after: avoid;
    display: block;
  }
  .report-section-head h2 {
    font-size: 14pt !important; letter-spacing: -.01em; color: var(--pc-ink) !important; margin: 0 !important;
  }
  .report-section-head p { font-size: 8.4pt !important; color: var(--pc-mute) !important; margin: 1mm 0 0 !important; }

  /* ---- summary insight cards (Key Findings, Positives, Concerns, ...) --- */
  .summary-grid { display: block !important; }
  .insight-card, .method-item {
    background: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 0 0 4mm !important; margin: 0 0 4mm !important;
    border-left: 2.5pt solid var(--pc-line) !important; box-shadow: none !important;
    break-inside: avoid; orphans: 3; widows: 3;
  }
  .insight-card.concern-card { border-left-color: #b3541e !important; }
  .insight-card.discussion-card { border-left-color: #2563eb !important; }
  .summary-grid > .insight-card:first-child > h3 { display: none !important; }
  .insight-card h3, .method-item strong {
    font-size: 9pt !important; color: var(--pc-ink) !important; margin: 0 0 1.5mm !important;
    letter-spacing: .02em; break-after: avoid;
  }
  .insight-card ul, .method-item p { margin: 0 !important; }
  .insight-card li {
    display: list-item !important; list-style: disc outside !important;
    margin: 0 0 1.4mm !important; break-inside: avoid; padding-left: 0;
  }
  .insight-card li::before { display: none !important; }
  .insight-card ul { padding-left: 4.5mm !important; list-style: disc outside !important; }

  /* ====================================================================
     CATEGORY BLOCKS  (self-contained, coloured heading, one container)
     ==================================================================== */
  .report-category.cat-a { --pc: #2563eb; }
  .report-category.cat-b { --pc: #0e7c66; }
  .report-category.cat-c { --pc: #b3541e; }
  .report-category.cat-d { --pc: #6d28d9; }
  .report-category.cat-e { --pc: #9d174d; }
  .report-category { --pc: #475467; }

  .report-category {
    break-inside: auto !important;
    border: 0.75pt solid var(--pc-line) !important;
    border-top: 2.5pt solid var(--pc) !important;
    border-radius: 4pt !important;
    background: none !important; box-shadow: none !important;
    padding: 4mm 5mm 4.5mm !important; margin: 0 0 5mm !important;
  }
  .report-category::before { display: none !important; }

  .category-heading {
    display: grid !important; grid-template-columns: 8mm 1fr; gap: 0 3mm !important;
    align-items: center; padding: 0 !important; margin: 0 0 3mm !important;
    background: none !important; border: 0 !important;
    border-bottom: 0.75pt solid var(--pc-hair) !important; padding-bottom: 2.5mm !important;
    -webkit-appearance: none; appearance: none; break-after: avoid;
  }
  .category-badge {
    width: 8mm !important; height: 8mm !important; place-items: center !important;
    display: grid !important; background: none !important;
    border: 1.25pt solid var(--pc) !important; border-radius: 3pt !important;
    box-shadow: none !important; color: var(--pc) !important;
    font-size: 10pt !important; font-weight: 800;
  }
  .ch-text small, .category-heading small {
    font-size: 6.6pt !important; letter-spacing: .14em; color: var(--pc) !important;
    font-weight: 700; margin-bottom: .5mm !important; text-transform: uppercase;
  }
  .ch-text h3, .category-heading h3 {
    font-size: 12.5pt !important; color: var(--pc-ink) !important; margin: 0 !important; letter-spacing: -.01em;
  }
  .category-toggle { display: none !important; }

  .category-summary {
    margin: 0 0 3.5mm !important; padding: 2.5mm 3mm !important;
    color: var(--pc-ink) !important; font-size: 9.4pt !important; max-width: none !important;
    background: var(--pc-tint) !important; border-radius: 3pt !important;
    border-left: 2pt solid var(--pc) !important; break-inside: avoid;
  }
  .topline-label { color: var(--pc) !important; font-weight: 700; }

  .category-details { margin: 0 !important; display: block !important; gap: 0 !important; }

  .detail-block {
    background: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 3mm 0 0 !important; margin: 3mm 0 0 !important;
    border-top: 0.5pt solid var(--pc-hair) !important;
    break-inside: auto; orphans: 3; widows: 3;
  }
  .detail-block:first-child { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
  .detail-block h4 {
    font-size: 7.2pt !important; letter-spacing: .13em; text-transform: uppercase;
    color: var(--pc-mute) !important; margin: 0 0 1.8mm !important; break-after: avoid;
    display: flex; align-items: center; gap: 1.5mm;
  }
  .detail-block h4 svg { display: none !important; }
  .detail-block p, .detail-block li { color: var(--pc-body) !important; font-size: 9.2pt !important; }
  .detail-block ul { padding-left: 4.5mm !important; gap: 0 !important; display: block !important; }
  .detail-block li {
    display: list-item !important; list-style: disc outside !important;
    margin: 0 0 1.4mm !important; break-inside: avoid;
  }
  .detail-block li::before { display: none !important; }

  .finding-group { margin: 0 0 2.8mm !important; break-inside: auto; }
  .finding-group-label {
    font-size: 7pt !important; letter-spacing: .1em; color: var(--pc) !important;
    font-weight: 700; margin: 0 0 1mm !important; break-after: avoid; text-transform: uppercase;
  }
  .finding-label { color: var(--pc-ink) !important; font-weight: 700; }
  .gap-block h4 { color: #a15c00 !important; }
  .gap-block { border-top-color: #f0d9a8 !important; }

  /* ====================================================================
     SOURCES — numbered reference list
     ==================================================================== */
  .source-list { display: block !important; counter-reset: src; }
  .source-row {
    display: grid !important; grid-template-columns: 6mm 1fr; gap: 0 1mm;
    counter-increment: src; background: none !important; border: 0 !important;
    border-bottom: 0.5pt solid var(--pc-hair) !important; border-radius: 0 !important;
    padding: 2mm 0 !important; margin: 0 !important; break-inside: avoid; font-size: 8.2pt !important;
  }
  .source-row:last-child { border-bottom: 0 !important; }
  .source-row::before {
    content: counter(src) "."; color: var(--pc-mute); font-size: 7.8pt; font-weight: 700; padding-top: .2mm;
  }
  .source-row > div, .source-row > a { grid-column: 2; }
  .source-row strong { font-size: 8.6pt !important; color: var(--pc-ink) !important; display: inline !important; }
  .source-row span { display: inline !important; color: var(--pc-body) !important; }
  .source-row strong::after { content: " — "; color: var(--pc-mute); }
  .source-row small { display: block !important; color: var(--pc-mute) !important; font-size: 7pt !important; margin-top: .5mm !important; }
  .source-row a {
    display: block !important; width: auto !important; height: auto !important;
    background: none !important; border: 0 !important; color: #3459a8 !important;
    font-size: 7pt !important; margin-top: .4mm; text-align: left !important; place-items: start !important;
  }
  .source-row a svg { display: none !important; }
  .source-row a::after { content: attr(href); display: block; color: #3459a8 !important; word-break: break-all; font-size: 7pt; }
  .source-tier-pill { display: none !important; }

  /* ---- methodology grid ------------------------------------------------ */
  .method-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3mm 6mm !important; }
  .method-item { border-left: 2pt solid var(--pc-line) !important; break-inside: avoid; }

  /* ---- platform guidance ----------------------------------------------- */
  .platform-guide {
    background: none !important; border: 0 !important; border-radius: 0 !important;
    border-top: 0.5pt solid var(--pc-hair) !important; padding: 3mm 0 0 !important;
    margin: 3mm 0 0 !important; break-inside: auto;
  }
  .platform-guide details, .platform-guide summary { display: block !important; }
  .platform-guide summary::-webkit-details-marker { display: none; }
  .platform-guide summary, .platform-guide .pg-head, .platform-guide h4, .platform-guide h5 { break-after: avoid; }
  .pg-sub {
    background: none !important; border: 0 !important; border-left: 1pt solid var(--pc-line) !important;
    border-radius: 0 !important; padding: 0 0 0 3mm !important; margin: 0 0 2mm !important;
  }
  .pg-sub.gap-block { background: none !important; border: 0 !important; border-left: 1pt solid #e0cf9a !important; }
  .pg-sub.gap-block h5 { color: #a15c00 !important; }

  /* ---- page-break rhythm: flow, but keep headings with their content --- */
  .report-section { break-before: auto; }
  .report-category { break-before: auto; }
  .report-section-head, .category-heading { break-after: avoid; }
  h1, h2, h3, h4, h5 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  img { break-inside: avoid; }

  /* ---- never print ----------------------------------------------------- */
  .research-request, .research-progress, .report-actions, .report-actions-band,
  .report-sidebar-actions, .report-info-btn, .cover-play, .report-trailer,
  .trailer-lightbox, .quick-stat-link .qs-hint { display: none !important; }

  a { text-decoration: none; color: inherit; }
}

/* Screen: keep the print frame invisible/neutral (unchanged behaviour). */
@media screen {
  .print-frame, .print-frame > tbody, .print-frame > tbody > tr, .print-frame > tbody > tr > td {
    display: block; width: auto; padding: 0; border: 0; vertical-align: baseline;
  }
}