:root {
  --emerald:#075847;
  --deep:#064b3e;
  --bright:#0d9270;
  --gold:#ffce50;
  --gold-light:#ffeaa0;
  --ink:#14382f;
  --muted:#5a7069;
  --paper:#fffdf6;
  --line:#dce6e1;
  --radius:24px;
  --shadow:0 18px 45px #073e2e14;
  color-scheme:light;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

[hidden] {
  display:none!important
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:84px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.55
}

body:has(dialog[open]) {
  overflow:hidden
}

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

button {
  font:inherit;
  cursor:pointer
}

img {
  display:block;
  width:100%;
  height:auto
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #e69314;
  outline-offset:5px
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  text-wrap:balance
}

p {
  text-wrap:pretty
}

h1,h2,h3 {
  line-height:1.1;
  letter-spacing:-.035em
}

h1 {
  font-size:clamp(2.5rem,4.9vw,4.55rem);
  font-weight:800
}

h2 {
  font-size:clamp(2.3rem,3.8vw,3.55rem);
  font-weight:800
}

h3 {
  font-size:1.45rem;
  font-weight:750
}

h1 em,h2 em,h3 em {
  font-style:normal
}

.shell {
  width:min(1200px,calc(100% - 64px));
  margin-inline:auto
}

.section-pad {
  padding-block:88px
}

.eyebrow {
  font-size:.8rem;
  line-height:1.45;
  letter-spacing:.15em;
  font-weight:800;
  margin-bottom:16px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  min-height:56px;
  padding:16px 26px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:1rem;
  font-weight:800;
  line-height:1.25;
  transition:transform .18s,box-shadow .18s
}

.button span {
  font-size:1.5rem;
  line-height:1
}

.button:hover {
  transform:translateY(-2px)
}

.button-gold {
  color:#124d3d;
  background:linear-gradient(130deg,#ffe897,#ffca43);
  border-color:#ffe99c;
  box-shadow:0 8px 24px #d69f1024,inset 0 1px 0 #fff4c3
}

.button-gold:hover {
  box-shadow:0 12px 30px #d69f1040
}

.button-emerald {
  background:var(--emerald);
  color:white;
  box-shadow:0 12px 25px #07584724
}

.text-link {
  font-weight:700;
  border-bottom:1px solid #ffffff60;
  padding-block:7px
}

.text-link span {
  margin-left:12px
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:120;
  padding:12px;
  background:white;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--deep);
  border-bottom:1px solid #ffffff1e;
  color:white
}

.header-inner {
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  white-space:nowrap;
  font-size:1.12rem;
  letter-spacing:-.015em;
  font-weight:850
}

.brand b {
  color:var(--gold)
}

.brand-mark {
  display:grid;
  place-items:center;
  width:44px;
  height:46px;
  border:1.5px solid var(--gold);
  border-radius:13px;
  color:#fff8d9;
  font-size:1.5rem;
  letter-spacing:-.05em;
  box-shadow:inset 0 0 18px #ffdf5020
}

.main-nav {
  display:flex;
  gap:30px;
  font-size:.88rem;
  font-weight:600;
  color:#d5ece3
}

.main-nav a:hover {
  color:var(--gold-light)
}

.header-cta {
  min-height:43px;
  font-size:.88rem;
  padding:11px 18px;
  gap:20px
}

.header-cta span {
  font-size:1.2rem
}

.menu-button {
  display:none
}

.hero {
  position:relative;
  overflow:hidden;
  color:white;
  background:radial-gradient(ellipse at 72% 37%,#188e6f 0,transparent 49%),linear-gradient(115deg,#075c48,#064d3d)
}

.hero-inner {
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  align-items:center;
  gap:36px;
  padding-block:54px 44px
}

.hero-eyebrow {
  color:var(--gold-light);
  display:flex;
  gap:12px;
  align-items:center
}

.line {
  width:28px;
  height:2px;
  background:var(--gold)
}

.hero h1 em {
  color:var(--gold-light)
}

.hero-lead {
  max-width:34ch;
  color:#dbefe6;
  font-size:1.125rem;
  line-height:1.55;
  margin-top:24px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:28px
}

.hero-note {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.8rem;
  line-height:1.5;
  color:#c8e1d6;
  margin-top:20px
}

.age-inline {
  font-weight:750;
  flex-shrink:0
}

.hero-visual {
  position:relative;
  min-width:0
}

.hero-image {
  aspect-ratio:3 / 2;
  overflow:hidden;
  border-radius:22px;
  border:1px solid #ffe49b99;
  box-shadow:0 20px 55px #002c2555,0 0 40px #f3ce3a12
}

.hero-image img {
  height:100%;
  object-fit:cover
}

.hero-bottom {
  display:flex;
  align-items:center;
  gap:28px;
  border-top:1px solid #ffffff29;
  padding-block:20px
}

.hero-bottom>span {
  font-size:1.7rem;
  color:var(--gold-light);
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700
}

.hero-bottom b {
  font-size:.75rem;
  letter-spacing:.07em
}

.hero-bottom p {
  font-size:.88rem;
  color:#cde5dc
}

.hero-bottom>a {
  margin-left:auto;
  font-size:1.5rem
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:34px
}

.section-heading>p {
  color:var(--muted);
  font-size:1rem
}

.section-heading h2 em,.how h2 em,.trust h2 em {
  color:#0b8964
}

.games .eyebrow {
  color:#96700e
}

.game-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}

.game-card {
  border-radius:var(--radius);
  border:1px solid #d6e5db;
  box-shadow:var(--shadow);
  overflow:hidden;
  background:white;
  display:flex;
  flex-direction:column;
  --accent:#087052;
  --tint:#e9f6ed
}

.game-blue {
  --accent:#155faa;
  --tint:#e9f2ff;
  border-color:#d7e3ef
}

.game-coral {
  --accent:#ad4631;
  --tint:#fff0e9;
  border-color:#ead7ce
}

.game-art {
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--accent)
}

.game-art img {
  height:100%;
  object-fit:cover;
  transition:transform .45s
}

.game-card:hover .game-art img {
  transform:scale(1.035)
}

.game-index {
  position:absolute;
  top:16px;
  left:16px;
  background:#fffcf3ed;
  color:var(--accent);
  border:1px solid #fff9;
  padding:6px 12px;
  border-radius:8px;
  font-weight:800;
  font-size:.75rem;
  letter-spacing:.07em
}

.game-body {
  padding:25px;
  display:flex;
  flex-direction:column;
  flex:1
}

.game-kicker {
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.065em;
  color:var(--accent);
  margin-bottom:10px
}

.game-body h3 {
  font-size:1.6rem
}

.game-body>p:not(.game-kicker) {
  color:var(--muted);
  margin-top:14px;
  font-size:1rem;
  line-height:1.5;
  flex:1
}

.game-options {
  display:flex;
  gap:7px;
  margin-top:20px
}

.game-options span {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:38px;
  flex:1;
  background:var(--tint);
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent);
  font-weight:750;
  font-size:.9rem;
  border-radius:8px
}

.game-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:22px;
  font-weight:800;
  font-size:1rem;
  color:var(--accent)
}

.game-link span {
  font-size:1.45rem
}

.how {
  background:#edf5f0;
  border-block:1px solid #dce8df
}

.how-layout {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:100px;
  align-items:center
}

.how-copy>p:not(.eyebrow) {
  margin-top:20px;
  color:var(--muted);
  font-size:1.05rem
}

.how .eyebrow {
  color:#32775d
}

.steps {
  padding:0;
  margin:30px 0 0;
  list-style:none
}

.steps li {
  display:flex;
  gap:19px;
  padding-block:20px;
  border-top:1px solid #cadbd0
}

.steps li>span {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1px solid #bad4c7;
  border-radius:50%;
  font-size:.8rem;
  font-weight:800;
  color:#167652;
  flex-shrink:0
}

.steps h3 {
  font-size:1.13rem;
  line-height:1.35;
  letter-spacing:-.02em
}

.steps p {
  margin-top:6px;
  font-size:1rem;
  color:var(--muted)
}

.table-preview {
  min-width:0;
  border:1px solid #b7d4c3;
  border-radius:26px;
  background:white;
  box-shadow:0 22px 55px #073e2e14;
  overflow:hidden
}

.preview-top {
  display:flex;
  align-items:center;
  gap:10px;
  padding:17px 20px;
  border-bottom:1px solid var(--line);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.06em
}

.mini-brand {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:32px;
  height:34px;
  background:var(--emerald);
  color:var(--gold-light);
  border-radius:9px;
  font-size:.95rem;
  letter-spacing:-.06em
}

.preview-label {
  margin-left:auto;
  font-size:.75rem;
  color:var(--muted);
  font-weight:500;
  letter-spacing:0
}

.table-tabs {
  display:grid;
  grid-template-columns:1fr 1.25fr 1fr;
  gap:4px;
  padding:12px;
  background:#f7faf6
}

.table-tabs button {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 4px;
  font-size:.875rem;
  font-weight:700;
  line-height:1.4;
  border-radius:8px
}

.table-tabs button[aria-selected=true] {
  background:var(--emerald);
  color:white;
  box-shadow:0 3px 7px #07584718
}

.preview-art {
  height:216px;
  overflow:hidden;
  background:#0b694e
}

.preview-art img {
  height:100%;
  object-fit:cover;
  object-position:center 54%
}

.preview-content {
  padding:23px
}

.preview-eyebrow {
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.09em;
  color:#448768;
  margin-bottom:8px
}

.preview-content h3 {
  font-size:1.45rem
}

.choice-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:18px
}

.choice-grid.six {
  grid-template-columns:repeat(6,1fr);
  gap:6px
}

.choice {
  min-height:47px;
  border-radius:9px;
  border:1px solid #cfdfd4;
  background:#f1f7f1;
  color:var(--ink);
  font-weight:750;
  line-height:1.3;
  padding:8px 3px
}

.choice[aria-pressed=true] {
  border-color:#bd9120;
  background:#ffdf77;
  box-shadow:0 0 0 2px #ffe39055
}

.choice-status {
  margin:11px 0 18px;
  min-height:22px;
  font-size:.875rem;
  color:var(--muted)
}

.preview-content .button {
  width:100%
}

.microcopy {
  margin-top:12px;
  text-align:center;
  font-size:.75rem;
  color:var(--muted);
  line-height:1.45
}

.analysis {
  background:radial-gradient(ellipse at 10% 15%,#0d8564,transparent 65%),var(--emerald);
  color:white
}

.analysis-layout {
  display:grid;
  grid-template-columns:1fr .94fr;
  gap:90px;
  align-items:center
}

.analysis .eyebrow {
  color:var(--gold-light)
}

.analysis h2 em {
  color:var(--gold-light)
}

.section-lead {
  font-size:1.075rem;
  line-height:1.65;
  margin-top:22px;
  color:#d7ede1;
  max-width:46ch
}

.analysis-topics {
  margin:28px 0
}

.analysis-topics details {
  border-top:1px solid #ffffff2a
}

.analysis-topics details:last-child {
  border-bottom:1px solid #ffffff2a
}

.analysis-topics summary {
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:16px 32px 16px 0;
  font-size:1rem;
  font-weight:750
}

.analysis-topics summary::-webkit-details-marker {
  display:none
}

.analysis-topics summary:after {
  content:"+";
  position:absolute;
  right:2px;
  color:var(--gold);
  font-size:1.3rem;
  top:11px
}

.analysis-topics details[open] summary:after {
  content:"−"
}

.analysis-topics details p {
  color:#c4dfd1;
  font-size:1rem;
  line-height:1.6;
  padding:0 24px 18px 0
}

.analysis-board {
  border:1px solid #d6b453;
  border-radius:24px;
  padding:30px;
  background:#fffdf5;
  color:var(--ink);
  box-shadow:0 25px 60px #012f2529
}

.board-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.09em;
  color:#86701f;
  border-bottom:1px solid #e6e3d2;
  padding-bottom:19px;
  margin-bottom:22px
}

.board-tag {
  font-weight:650;
  background:#f4ecd5;
  padding:5px 8px;
  border-radius:6px;
  letter-spacing:0
}

.analysis-board h3 {
  font-size:2.15rem;
  line-height:1.07
}

.analysis-board h3 em {
  color:#0d8d67
}

.board-description {
  font-size:.875rem;
  color:var(--muted);
  margin-top:12px
}

.probability-display {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:27px 0
}

.probability-ring {
  position:relative;
  display:grid;
  place-items:center;
  width:130px;
  height:130px;
  flex-shrink:0;
  border-radius:50%;
  background:conic-gradient(var(--gold) 0 60deg,#dfe9e0 60deg 360deg)
}

.probability-ring:before {
  content:"";
  position:absolute;
  inset:11px;
  border-radius:50%;
  background:var(--paper)
}

.probability-ring strong {
  position:relative;
  text-align:center;
  font-size:2.3rem;
  line-height:1
}

.probability-ring span {
  display:block;
  font-size:.875rem;
  font-weight:600;
  margin-top:4px;
  color:var(--muted)
}

.probability-value strong {
  font-size:3rem;
  letter-spacing:-.065em;
  line-height:1
}

.probability-value strong span {
  font-size:1.5rem;
  padding-left:2px
}

.probability-value p {
  font-size:.875rem;
  color:var(--muted);
  margin-top:8px
}

.probability-scale {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px
}

.probability-scale span {
  height:36px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#e8efe7;
  color:#789080;
  font-size:.875rem
}

.probability-scale .active {
  background:var(--gold);
  color:#534916;
  font-weight:800
}

.analysis-metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:23px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line)
}

.analysis-metrics>div+div {
  border-left:1px solid var(--line);
  padding-left:20px
}

.analysis-metrics span {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.025em
}

.analysis-metrics strong {
  display:block;
  font-size:1.35rem;
  margin-top:3px;
  line-height:1.3
}

.board-takeaway {
  display:flex;
  gap:12px;
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  margin-top:20px
}

.board-takeaway>span {
  font-size:1.4rem;
  color:#a8770c
}

.board-footnote {
  margin-top:13px;
  font-size:.75rem;
  line-height:1.5;
  color:var(--muted)
}

.trust-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start
}

.trust .eyebrow {
  color:#8b6d20
}

.trust h2 {
  font-size:2.75rem
}

.trust-items {
  display:grid;
  gap:23px
}

.trust-items>div {
  display:flex;
  gap:16px
}

.trust-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:12px;
  background:#e4f2e7;
  color:#187353;
  font-size:1.15rem;
  font-weight:750
}

.trust-items h3 {
  font-size:1.1rem;
  line-height:1.4
}

.trust-items p {
  margin-top:5px;
  color:var(--muted);
  font-size:1rem
}

.final-cta {
  background:linear-gradient(115deg,#ffe493,#ffcb42);
  border-block:1px solid #f5ce64;
  padding-block:60px
}

.final-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.final-cta .eyebrow {
  color:#6a5919
}

.final-cta h2 {
  font-size:3.35rem
}

.final-cta h2 em {
  color:#077453
}

.final-cta p:not(.eyebrow) {
  margin-top:16px;
  font-size:1.05rem
}

.final-cta .button {
  min-width:250px
}

.site-footer {
  background:var(--deep);
  color:#c4dcd0;
  padding-block:34px
}

.footer-inner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:40px;
  align-items:center
}

.footer-inner .brand {
  font-size:.95rem;
  color:white
}

.footer-inner .brand-mark {
  width:35px;
  height:38px;
  font-size:1.25rem
}

.footer-inner>p {
  max-width:64ch;
  font-size:.75rem;
  line-height:1.65
}

.footer-inner>p strong {
  font-weight:650;
  color:#f3f3dc
}

.footer-inner>a:last-child {
  font-size:.8rem;
  white-space:nowrap
}

.mobile-dock {
  display:none
}

.age-gate {
  width:min(440px,calc(100% - 32px));
  border:1px solid #cfad51;
  border-radius:25px;
  background:var(--paper);
  padding:34px;
  color:var(--ink);
  text-align:center;
  box-shadow:0 25px 100px #00282144
}

.age-gate::backdrop {
  background:#003529b8;
  backdrop-filter:blur(6px)
}

.age-symbol {
  display:grid;
  place-items:center;
  margin:0 auto 23px;
  width:65px;
  height:65px;
  border-radius:50%;
  background:var(--emerald);
  color:var(--gold-light);
  font-weight:800;
  font-size:1.5rem
}

.age-gate .eyebrow {
  font-size:.75rem;
  color:#8d6d15
}

.age-gate h2 {
  font-size:1.9rem
}

.age-gate>p:not(.eyebrow) {
  margin-top:14px;
  color:var(--muted)
}

.age-gate .button {
  margin-top:25px;
  width:100%;
  gap:15px
}

.age-no {
  display:block;
  width:100%;
  padding:14px 4px 0;
  border:0;
  background:none;
  color:var(--muted);
  font-size:.875rem;
  text-decoration:underline
}

.age-gate #age-restricted {
  color:#a43d2e;
  font-weight:650
}

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

@media(min-width:1500px) {
  .hero-inner {
    gap:62px
  }
  .hero h1 {
    font-size:4.55rem
  }
}

@media(max-width:1080px) {
  .main-nav {
    gap:20px
  }
  .header-inner {
    gap:20px
  }
  .hero-inner {
    gap:25px
  }
  .hero-actions {
    gap:18px;
    flex-wrap:wrap
  }
  .hero-lead {
    font-size:1.05rem
  }
  .game-grid {
    gap:15px
  }
  .game-body {
    padding:21px
  }
  .game-body h3 {
    font-size:1.4rem
  }
  .game-kicker {
    font-size:.75rem;
    letter-spacing:.01em
  }
  .how-layout,.analysis-layout,.trust-layout {
    gap:50px
  }
  .trust h2 {
    font-size:2.5rem
  }
  .analysis-board {
    padding:25px
  }
  .probability-ring {
    width:110px;
    height:110px
  }
  .probability-value strong {
    font-size:2.6rem
  }
  .footer-inner {
    gap:22px
  }
  .final-cta h2 {
    font-size:3rem
  }
}

@media(max-width:800px) {
  .shell {
    width:calc(100% - 40px)
  }
  .section-pad {
    padding-block:60px
  }
  .header-inner {
    height:68px
  }
  .brand {
    font-size:1rem
  }
  .brand-mark {
    width:37px;
    height:39px;
    font-size:1.25rem
  }
  .header-cta {
    margin-left:auto
  }
  .menu-button {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:38px;
    height:42px;
    padding:8px;
    border:0;
    background:none
  }
  .menu-button span {
    display:block;
    height:2px;
    background:var(--gold-light);
    width:100%
  }
  .main-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:68px;
    background:var(--deep);
    padding:20px;
    border-bottom:1px solid #fff3;
    box-shadow:0 14px 20px #00392e30
  }
  .main-nav.open {
    display:flex;
    justify-content:center
  }
  .hero-inner {
    grid-template-columns:1fr;
    padding-block:36px
  }
  .hero h1 {
    font-size:2.55rem
  }
  .hero-lead {
    font-size:1rem
  }
  .hero-actions {
    margin-top:23px
  }
  .hero-actions .button {
    gap:24px;
    padding-inline:20px
  }
  .hero-actions .text-link {
    font-size:.875rem
  }
  .hero-note {
    font-size:.75rem
  }
  .hero-bottom {
    gap:20px
  }
  .section-heading {
    gap:25px
  }
  .section-heading>p {
    max-width:29ch
  }
  .game-grid {
    gap:12px
  }
  .game-body {
    padding:18px 15px
  }
  .game-body h3 {
    font-size:1.27rem
  }
  .game-body>p:not(.game-kicker) {
    font-size:1rem
  }
  .game-kicker {
    font-size:.75rem;
    line-height:1.4
  }
  .game-index {
    top:10px;
    left:10px;
    padding:4px 8px;
    font-size:.75rem;
    letter-spacing:0
  }
  .game-options {
    gap:4px
  }
  .game-options span {
    font-size:.8rem
  }
  .game-link {
    font-size:.875rem;
    gap:8px
  }
  .how-layout,.analysis-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .how-copy h2 br {
    display:none
  }
  .how-copy h2 br:after {
    content:" "
  }
  .how-copy h2 {
    max-width:16ch
  }
  .steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
  }
  .steps li {
    flex-direction:column;
    gap:13px
  }
  .steps h3 {
    font-size:1.06rem
  }
  .table-preview {
    width:min(500px,100%);
    margin-inline:auto
  }
  .preview-art {
    height:230px
  }
  .analysis-copy h2 {
    max-width:20ch
  }
  .analysis-copy .section-lead {
    max-width:unset
  }
  .analysis-board {
    width:min(500px,100%);
    margin-inline:auto;
    padding:28px
  }
  .probability-display {
    justify-content:flex-start;
    gap:40px
  }
  .trust-layout {
    gap:35px
  }
  .trust h2 {
    font-size:2.2rem
  }
  .final-cta h2 {
    font-size:2.6rem
  }
  .final-cta .button {
    min-width:200px
  }
  .footer-inner {
    grid-template-columns:1fr auto;
    gap:22px
  }
  .footer-inner>p {
    grid-row:2;
    grid-column:1/-1;
    max-width:unset
  }
  .footer-inner>a:last-child {
    grid-column:2;
    grid-row:1
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:76px
  }
  .shell {
    width:calc(100% - 36px)
  }
  .section-pad {
    padding-block:46px
  }
  .header-inner {
    gap:12px;
    height:64px
  }
  .brand {
    font-size:.95rem;
    gap:8px
  }
  .brand-mark {
    width:34px;
    height:36px;
    font-size:1.2rem;
    border-radius:10px
  }
  .header-cta {
    font-size:.8rem;
    min-height:36px;
    padding:8px 11px;
    gap:8px
  }
  .header-cta span {
    font-size:1rem
  }
  .menu-button {
    width:29px;
    padding:5px;
    height:36px
  }
  .main-nav {
    top:64px;
    gap:25px;
    font-size:.9rem
  }
  .hero-inner {
    grid-template-columns:1fr;
    gap:25px;
    padding-block:27px 25px
  }
  .hero .eyebrow {
    font-size:.75rem;
    letter-spacing:.11em;
    margin-bottom:14px
  }
  .hero h1 {
    font-size:clamp(2.2rem,9.8vw,2.9rem);
    line-height:1.07;
    letter-spacing:-.04em
  }
  .hero h1 br {
    display:none
  }
  .hero h1 em {
    display:block
  }
  .hero-lead {
    max-width:35ch;
    font-size:1rem;
    line-height:1.5;
    margin-top:16px
  }
  .hero-actions {
    margin-top:19px;
    gap:14px
  }
  .hero-actions .button {
    min-height:54px;
    width:100%;
    font-size:1rem;
    justify-content:space-between;
    padding-inline:20px
  }
  .hero-actions .text-link {
    display:none
  }
  .hero-note {
    margin-top:13px;
    font-size:.75rem;
    gap:7px;
    line-height:1.4
  }
  .hero-visual {
    width:100%;
    margin-inline:auto
  }
  .hero-image {
    border-radius:16px
  }
  .hero-bottom {
    padding-block:16px;
    gap:12px
  }
  .hero-bottom>span {
    font-size:1.35rem;
    gap:9px
  }
  .hero-bottom b {
    font-size:.75rem;
    letter-spacing:.02em
  }
  .hero-bottom p {
    display:none
  }
  .hero-bottom>a {
    font-size:1.3rem
  }
  .eyebrow {
    font-size:.75rem;
    letter-spacing:.1em;
    margin-bottom:12px
  }
  h2 {
    font-size:2.05rem;
    line-height:1.1;
    letter-spacing:-.035em
  }
  .section-heading {
    display:block;
    margin-bottom:24px
  }
  .section-heading>p {
    font-size:1rem;
    max-width:unset;
    margin-top:14px
  }
  .section-heading>p br {
    display:none
  }
  .game-grid {
    grid-template-columns:1fr;
    gap:24px
  }
  .game-card {
    border-radius:22px
  }
  .game-art {
    aspect-ratio:1
  }
  .game-index {
    top:16px;
    left:16px;
    padding:6px 12px;
    font-size:.75rem;
    letter-spacing:.06em
  }
  .game-body {
    padding:22px
  }
  .game-kicker {
    font-size:.75rem;
    letter-spacing:.055em
  }
  .game-body h3 {
    font-size:1.65rem;
    line-height:1.1
  }
  .game-body>p:not(.game-kicker) {
    margin-top:13px;
    font-size:1rem;
    line-height:1.5
  }
  .game-options {
    gap:7px;
    margin-top:18px
  }
  .game-options span {
    font-size:.9rem;
    min-height:38px
  }
  .game-link {
    font-size:1rem;
    margin-top:20px;
    padding-top:17px
  }
  .how-layout {
    gap:30px
  }
  .how-copy h2 {
    max-width:13ch
  }
  .how-copy h2 br {
    display:initial
  }
  .how-copy>p:not(.eyebrow) {
    font-size:1rem;
    margin-top:16px
  }
  .steps {
    display:block;
    margin-top:23px
  }
  .steps li {
    flex-direction:row;
    padding:18px 0;
    gap:15px
  }
  .steps h3 {
    font-size:1.08rem
  }
  .steps p {
    font-size:1rem;
    line-height:1.45
  }
  .table-preview {
    border-radius:20px
  }
  .preview-top {
    padding:15px;
    font-size:.75rem;
    gap:8px;
    letter-spacing:.02em
  }
  .preview-label {
    font-size:.75rem
  }
  .table-tabs {
    padding:10px;
    gap:4px
  }
  .table-tabs button {
    font-size:.875rem
  }
  .preview-art {
    height:auto;
    aspect-ratio:1
  }
  .preview-art img {
    object-position:center
  }
  .preview-content {
    padding:20px
  }
  .preview-content h3 {
    font-size:1.4rem
  }
  .choice-status {
    font-size:.875rem
  }
  .choice {
    min-height:48px
  }
  .analysis-layout {
    gap:30px
  }
  .analysis h2 {
    font-size:2.1rem
  }
  .section-lead {
    font-size:1rem;
    line-height:1.6;
    margin-top:18px
  }
  .analysis-topics {
    margin:22px 0
  }
  .analysis-copy>.button {
    width:100%;
    justify-content:space-between;
    padding-inline:20px;
    font-size:1rem
  }
  .analysis-board {
    padding:23px 20px;
    border-radius:20px
  }
  .board-header {
    gap:9px;
    font-size:.75rem;
    letter-spacing:.045em;
    margin-bottom:19px;
    padding-bottom:16px
  }
  .analysis-board h3 {
    font-size:1.9rem
  }
  .board-description {
    font-size:.875rem
  }
  .probability-display {
    gap:24px;
    padding-block:23px;
    justify-content:space-between
  }
  .probability-ring {
    width:110px;
    height:110px
  }
  .probability-value strong {
    font-size:2.8rem
  }
  .probability-value p {
    font-size:.8rem
  }
  .analysis-metrics {
    gap:15px
  }
  .analysis-metrics>div+div {
    padding-left:15px
  }
  .analysis-metrics span {
    font-size:.75rem
  }
  .analysis-metrics strong {
    font-size:1.17rem
  }
  .board-takeaway {
    font-size:1rem
  }
  .board-footnote {
    font-size:.75rem
  }
  .trust-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .trust h2 {
    font-size:2.05rem
  }
  .trust-items {
    gap:21px
  }
  .trust-items h3 {
    font-size:1.05rem
  }
  .trust-items p {
    font-size:1rem
  }
  .final-cta {
    padding-block:37px
  }
  .final-inner {
    flex-direction:column;
    align-items:stretch;
    gap:24px
  }
  .final-cta h2 {
    font-size:2.2rem
  }
  .final-cta p:not(.eyebrow) {
    font-size:1rem;
    margin-top:14px
  }
  .final-cta .button {
    width:100%;
    justify-content:space-between;
    padding-inline:20px
  }
  .site-footer {
    padding:30px 0 132px
  }
  .footer-inner {
    gap:20px
  }
  .footer-inner .brand {
    font-size:.9rem
  }
  .footer-inner>a:last-child {
    font-size:.75rem
  }
  .footer-inner>p {
    font-size:.75rem;
    line-height:1.6
  }
  .mobile-dock {
    display:flex;
    position:fixed;
    z-index:45;
    bottom:0;
    left:0;
    right:0;
    padding:10px 16px max(7px,env(safe-area-inset-bottom));
    background:#064b3ef5;
    border-top:1px solid #ffdf6640;
    backdrop-filter:blur(8px);
    flex-direction:column;
    gap:5px;
    transition:transform .25s
  }
  .mobile-dock .button {
    width:100%;
    min-height:49px;
    justify-content:space-between;
    padding:12px 20px;
    font-size:1rem;
    border-radius:11px;
    box-shadow:none
  }
  .mobile-dock>span {
    font-size:.75rem;
    color:#c5decc;
    text-align:center;
    line-height:1.2
  }
  .mobile-dock.at-top {
    transform:translateY(110%)
  }
  .age-gate {
    padding:28px 23px
  }
  .age-gate h2 {
    font-size:1.75rem
  }
  .age-gate .button {
    font-size:1rem
  }
}

@media(max-width:360px) {
  .shell {
    width:calc(100% - 28px)
  }
  .header-inner {
    gap:8px
  }
  .header-cta {
    font-size:.75rem;
    padding-inline:9px
  }
  .header-cta span {
    display:none
  }
  .brand {
    font-size:.86rem
  }
  .hero h1 {
    font-size:2.15rem
  }
  .game-body {
    padding:20px
  }
  .preview-top {
    flex-wrap:wrap
  }
  .probability-display {
    gap:16px
  }
  .probability-ring {
    width:98px;
    height:98px
  }
  .probability-value strong {
    font-size:2.45rem
  }
  .main-nav {
    gap:20px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .button:hover,.game-card:hover .game-art img {
    transform:none
  }
}
[data-conversion-link][aria-disabled="true"] {
  pointer-events: none;
  cursor: wait;
  opacity: .7;
}
[data-conversion-link].is-redirecting::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: landing-spin .7s linear infinite;
}
@keyframes landing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-conversion-link].is-redirecting::after { animation: none; }
}