:root {
  --ink: #25494b;
  --plum: #28797c;
  --paper: #ffffff;
  --cream: #ecf8f6;
  --coral: #ed6c79;
  --muted: #627878;
  --line: #dbe9e8;
  --shadow: 0 14px 34px rgba(42, 95, 97, .09);
}

body::before { display: none; }
.site-header { background: rgba(255, 255, 255, .93); border-bottom: 1px solid rgba(219,233,232,.7); }
.site-header.is-scrolled, .legal-page .site-header { background: rgba(255,255,255,.96); }
.eyebrow, .game-kicker, .footer-links strong, .legal-meta, .legal-toc strong { letter-spacing: 0; }
.hero { min-height: 0; height: min(760px, calc(100vh - 145px)); margin-top: var(--header); padding: 0; background: #edf9fc; }
.hero::before { background: none; }
.art-pending .hero::before { background: linear-gradient(90deg, rgba(237,249,252,.96), rgba(237,249,252,.8) 40%, rgba(237,249,252,0) 70%); }
.art-pending .game-art { height: auto; aspect-ratio: 1 / 1; }
.art-pending .game-art img { object-fit: cover; }
.art-pending .game-card:hover .game-art img { transform: none; }
.hero-copy { width: min(43%, 520px); padding-top: 100px; text-shadow: none; }
.hero h1 { font-size: 88px; line-height: 1.04; }
.hero-copy > p:not(.eyebrow) { max-width: 410px; font-size: 20px; font-weight: 500; margin: 24px 0 30px; }
.primary-button, .secondary-button { border: 1px solid #28797c; box-shadow: 0 4px 0 #1c6063; background: #28797c; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1c6063; }
.secondary-button { background: white; color: var(--ink); box-shadow: none; }
.primary-button--small { box-shadow: none; }
.scroll-cue { display: none; }
.games-section { padding: 70px 24px 90px; scroll-margin-top: var(--header); }
.section-heading { margin-bottom: 40px; }
.section-heading h2 { font-size: 52px; line-height: 1.08; }
.section-heading > p:last-child { font-size: 17px; margin-top: 16px; }
.game-grid { width: min(100%, 1120px); gap: 32px; }
.game-card { border: 1px solid #dbe9e8; box-shadow: var(--shadow); }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(42,95,97,.14); }
.game-art { height: auto; aspect-ratio: 3 / 2; border: 0; }
.game-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.game-card:hover .game-art img { transform: scale(1.025); }
.game-content { padding: 27px 28px 28px; }
.game-content h3 { font-size: 28px; line-height: 1.15; }
.game-kicker { font-size: 12px; margin-bottom: 11px; }
.game-content > p:not(.game-kicker) { font-size: 15px; line-height: 1.65; margin: 16px 0 25px; }
.store-row { gap: 12px; }
.store-button { height: 51px; }
.store-button:disabled { background: #f2f6f6; border-color: #dde7e6; color: #718282; }
.store-button span { font-size: 14px; }
.store-button small { font-size: 9px; margin-bottom: 4px; }
.story-band { background: #e9f7f1; color: var(--ink); }
.story-band::before { display: none; }
.story-inner { display: block; min-height: 0; padding: 75px 0; text-align: center; }
.story-copy { max-width: 730px; margin: auto; }
.story-copy h2 { font-size: 48px; line-height: 1.13; }
.story-copy > p:not(.eyebrow) { color: var(--muted); max-width: 570px; margin: 24px auto; }
.eyebrow--light { color: #28797c; }
.text-link--light { color: #28797c; }
.newsletter { background: #fff5d6; border: 0; padding: 65px 24px; }
.newsletter h2 { font-size: 40px; line-height: 1.12; }
.support-cta { justify-self: end; align-self: center; }
.newsletter-form { border-color: #527273; }
.newsletter-form button { border: 0; background: #ed6c79; }
.site-footer { padding-top: 60px; }
.cookie-banner { border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(42,95,97,.18); }
.legal-hero { border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: 72px; }
.legal-content h2 { font-size: 34px; }
.faq > h2 { font-size: 40px; }
.support-card { border: 1px solid var(--line); box-shadow: var(--shadow); }
.support-card:nth-child(3) { background: #edf7fc; }

@media (min-width: 761px) and (max-height: 780px) {
  .hero-copy { padding-top: 45px; }
  .hero h1 { font-size: 72px; }
  .hero-copy > p:not(.eyebrow) { font-size: 18px; margin: 18px 0 22px; }
}

@media (min-width: 761px) and (max-width: 1040px) {
  .hero h1 { font-size: 64px; }
  .hero-copy { width: 44%; padding-top: 70px; }
  .game-grid { max-width: 100%; }
  .game-content { padding: 24px 20px; }
  .game-content h3 { font-size: 25px; }
}

@media (max-width: 760px) {
  .hero { height: 650px; height: min(720px, calc(94svh - var(--header))); min-height: 540px; padding-bottom: 0; }
  .hero-art { top: 235px; height: calc(100% - 235px); }
  .art-pending .hero::before { background: linear-gradient(180deg, #edf9fc 0%, #edf9fc 35%, rgba(237,249,252,.2) 68%, rgba(237,249,252,0) 100%); }
  .hero-art img { object-position: 88% center; }
  .hero-copy { width: calc(100% - 40px); margin: 0 20px; padding-top: 32px; text-align: center; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero h1 { font-size: 52px; }
  .hero-copy > p:not(.eyebrow) { max-width: 350px; font-size: 16px; line-height: 1.5; margin: 16px auto 20px; }
  .hero .primary-button { min-height: 44px; padding: 8px 16px; font-size: 14px; }
  .games-section { padding: 48px 18px 60px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading h2 { font-size: 40px; }
  .section-heading > p:last-child { font-size: 15px; }
  .game-grid { max-width: 500px; gap: 26px; }
  .game-content { padding: 23px 20px; }
  .game-content h3 { font-size: 25px; }
  .store-button span { font-size: 13px; }
  .store-button small { font-size: 8px; }
  .story-inner { padding: 55px 0; }
  .story-copy h2 { font-size: 36px; }
  .story-copy > p:not(.eyebrow) { font-size: 16px; }
  .newsletter { padding: 50px 20px 65px; }
  .newsletter h2 { font-size: 34px; }
  .support-cta { justify-self: start; }
  .legal-hero h1 { font-size: 48px; }
  .legal-content h2 { font-size: 30px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 46px; }
  .game-content { padding: 20px 16px; }
}