/* ------------------------------------------------------------------
   Backgammon with Buddies
   Colors and textures come from the app itself (BackgammonKit assets
   and AppIcon.icon): felt, wood strip, checkers, dice.
------------------------------------------------------------------ */

:root {
  --felt: #4a663e;          /* Felt.colorset */
  --felt-top: #446536;      /* icon gradient */
  --felt-bottom: #253d1c;
  --felt-darkest: #17240f;
  --point-light: rgba(165, 224, 138, .35);
  --point-dark: rgba(0, 0, 0, .25);
  --wood-dark: #8a4d24;
  --cream: #f6eedd;
  --paper: #fffaf0;
  --ink: #22301e;
  --ink-soft: #55604f;
  --gold: #f3cf86;
  --die-red: #a8231c;       /* Red Pips.svg */
  --die-blue: #005fa3;      /* Blue Pips.svg */
  --line: #e4d6b8;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, sans-serif;

  --gutter: clamp(16px, 4vw, 32px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--felt-darkest);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 em, h2 em { font-style: italic; font-weight: 600; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------ Textures ------------------------------ */

.felt {
  position: relative;
  background: linear-gradient(170deg, var(--felt-top), var(--felt-bottom));
  color: var(--cream);
  isolation: isolate;
}
.felt::after {
  /* the app's own felt fuzz */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../images/board/fuzz.png") repeat;
  background-size: 258px;
  mix-blend-mode: soft-light;
  opacity: .08;
}

.points {
  position: absolute;
  left: 0;
  right: 0;
  height: 36%;
  z-index: -2;
  pointer-events: none;
  /* same layout as the icon: light and dark points alternating */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h60L30 100z' fill='%23a5e08a' fill-opacity='.35'/%3E%3Cpath d='M60 0h60L90 100z' fill='%23000' fill-opacity='.25'/%3E%3C/svg%3E");
  background-size: clamp(110px, 12vw, 160px) 100%;
  background-position: center top;
  background-repeat: repeat-x;
}
.points--top { top: 0; }
.points--bottom {
  bottom: 0;
  /* drawn pointing up rather than flipped, which left a hairline at its edge */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100h60L30 0z' fill='%23a5e08a' fill-opacity='.35'/%3E%3Cpath d='M60 100h60L90 0z' fill='%23000' fill-opacity='.25'/%3E%3C/svg%3E");
  background-position-x: calc(50% + clamp(55px, 6vw, 80px));
}
.points--soft { opacity: .7; height: 30%; }

.wood {
  /* planks cut from the app's wood strip, stained dark */
  background-color: #2a180b;
  background-image:
    linear-gradient(180deg, rgba(42, 22, 8, .72), rgba(24, 12, 4, .84)),
    repeating-linear-gradient(180deg, transparent 0 98px, rgba(0, 0, 0, .55) 98px 100px),
    url("../images/board/wood-strip.jpg");
  background-size: auto, auto, 1600px 100px;
  color: var(--cream);
}

.rail {
  position: relative;
  z-index: 5;
  height: 24px;
  background: url("../images/board/wood-strip.jpg") center / 1200px 75px;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 180, .25),
    inset 0 -3px 0 rgba(0, 0, 0, .25),
    0 6px 18px rgba(0, 0, 0, .3);
}

/* ------------------------------ Nav ------------------------------ */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: max(18px, env(safe-area-inset-top));
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.nav-logo img { border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.nav-logo em { font-style: italic; font-weight: 500; opacity: .8; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  color: rgba(246, 238, 221, .82);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--felt-bottom);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease-bounce), box-shadow .2s;
}
.pill:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0, 0, 0, .25); }
.pill:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

/* ------------------------------ Hero ------------------------------ */

.hero {
  overflow: hidden;
  padding-top: clamp(110px, 14vh, 150px);
  min-height: min(900px, 100svh);
  display: flex;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 40px;
  align-items: center;
}
.hero-copy { padding-bottom: 60px; }

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.7rem);
  color: #fffaf0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.hero h1 em { color: var(--gold); display: inline-block; }

.lede {
  margin: 24px 0 0;
  max-width: 38ch;
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  color: rgba(246, 238, 221, .88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 36px;
}
.badge {
  display: inline-block;
  border-radius: 12px;
  transition: transform .25s var(--ease-bounce);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
}
.badge img { height: 54px; width: auto; }
.badge:hover { transform: translateY(-3px) scale(1.03); }
.platforms {
  margin: 18px 0 0;
  font-size: .95rem;
  color: rgba(246, 238, 221, .7);
}
.hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
  opacity: .9;
  min-height: 1.6em;
}

.hero-visual {
  position: relative;
  align-self: end;
  height: 620px;
  display: flex;
  justify-content: center;
}

.phone {
  --w: 340px;
  position: relative;
  width: var(--w);
  flex: none;
  padding: calc(var(--w) * .035);
  border-radius: calc(var(--w) * .165);
  background: linear-gradient(145deg, #3a3a3c, #121214 40%, #1c1c1e);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .08),
    0 40px 80px -20px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(0, 0, 0, .4);
  transform: translateY(40px);
  animation: rise 1s var(--ease-out) both .15s;
}
.phone-screen { border-radius: calc(var(--w) * .13); overflow: hidden; background: #fff; }
@keyframes rise {
  from { transform: translateY(160px); opacity: 0; }
  to { transform: translateY(40px); opacity: 1; }
}

/* ------------------------------ Smiley dice ------------------------------ */
/* Drawn from the icon's layers: gray rounded square, round face, colored pips. */

/* The button stays put (the hero dice float on it); the svg inside does the
   angling and the tumbling, so the two animations never fight. */
.die {
  --size: 108px;
  --r: 0deg;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--die-red);
  -webkit-tap-highlight-color: transparent;
}
.die--red { --r: -30deg; color: var(--die-red); }
.die--blue { --r: 30deg; color: var(--die-blue); }
/* .die-lift carries the shadow (kept upright), the svg does the angling and spinning */
.die-lift { display: block; width: 100%; height: 100%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .4)); }
.die svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(var(--r));
  transition: transform .3s var(--ease-bounce);
}
.die:hover svg { transform: rotate(var(--r)) scale(1.05); }
.die:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 25%; }
.die.rolling svg { animation: tumble .9s both; }
.die.rolling .die-lift { animation: lift .9s both; }
.die.rolling + .die.rolling svg, .die.rolling + .die.rolling .die-lift { animation-delay: .06s; }

/* Seen from above, like the board: the die grows as it's tossed toward you,
   its shadow spreads and fades, then it drops, bounces once and settles. */
@keyframes tumble {
  0%   { transform: rotate(var(--r)) scale(1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  35%  { transform: rotate(calc(var(--r) + 200deg)) scale(1.24); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  62%  { transform: rotate(calc(var(--r) + 320deg)) scale(.96); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  76%  { transform: rotate(calc(var(--r) + 348deg)) scale(1.04); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  88%  { transform: rotate(calc(var(--r) + 358deg)) scale(.99); }
  100% { transform: rotate(calc(var(--r) + 360deg)) scale(1); }
}
@keyframes lift {
  0%   { filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .4)); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  35%  { filter: drop-shadow(0 38px 32px rgba(0, 0, 0, .22)); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  62%  { filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .48)); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  76%  { filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .36)); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .4)); }
}
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.die--hero-a, .die--hero-b { position: absolute; z-index: 2; }
.die--hero-a { top: 70px; right: max(-10px, calc(50% - 250px)); animation: bob 5s ease-in-out infinite, enter-a 1s var(--ease-bounce) .55s both; }
.die--hero-b { --size: 96px; top: 250px; left: max(-10px, calc(50% - 240px)); animation: bob 6s ease-in-out infinite -2s, enter-b 1s var(--ease-bounce) .7s both; }

/* As the phone rises, the dice slide in from either side and land against it.
   This animates transform; the float uses translate, so they don't collide. */
@keyframes enter-a {
  from { transform: translate(160px, 90px) rotate(140deg); opacity: 0; }
  30% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@keyframes enter-b {
  from { transform: translate(-160px, 110px) rotate(-140deg); opacity: 0; }
  30% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

/* ------------------------------ Sections ------------------------------ */

.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head p:last-child { color: var(--ink-soft); font-size: 1.12rem; margin: 18px auto 0; max-width: 52ch; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); }

/* ---- Ways to play ---- */

.play {
  background: var(--cream);
  padding: clamp(90px, 12vw, 140px) 0 clamp(80px, 10vw, 130px);
}
.play h2 em { color: var(--felt); }

.modes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mode {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 12px 12px 28px;
  box-shadow: 0 20px 40px -28px rgba(60, 40, 10, .35);
  transition: transform .35s var(--ease-bounce), box-shadow .35s;
}
.mode:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(60, 40, 10, .45); }
.mode h3 { font-size: 1.45rem; margin: 16px 16px 8px; }
.mode p { margin: 0 16px; color: var(--ink-soft); font-size: .98rem; }

.mode-art {
  position: relative;
  isolation: isolate;
  height: 160px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h60L30 100z' fill='%23a5e08a' fill-opacity='.3'/%3E%3Cpath d='M60 0h60L90 100z' fill='%23000' fill-opacity='.22'/%3E%3C/svg%3E") 0 0 / 80px 55% repeat-x,
    var(--felt);
}

.mode-art::before {
  /* same felt grain as the big sections, beneath the card's contents */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../images/board/fuzz.png") 0 0 / 258px;
  mix-blend-mode: soft-light;
  opacity: .08;
}

.mode-num {
  position: relative;
  width: 46px;
  height: 46px;
  margin: -24px 0 0 16px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .3));
  transform: rotate(-8deg);
}
.mode:nth-child(2) .mode-num { transform: rotate(6deg); }
.mode:nth-child(3) .mode-num { transform: rotate(-3deg); }
.mode:nth-child(4) .mode-num { transform: rotate(9deg); }

/* messages bubble */
.bubble {
  position: relative;
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 20px 20px 6px 20px;
  background: #e9e9eb;
  color: #111;
  font-size: .9rem;
  line-height: 1.35;
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .5);
  margin-left: auto;
  margin-right: 14px;
}
.bubble strong { display: block; }
.bubble span { color: #6d6d72; }
.delivered {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
}

/* game center: white vs brown */
.mode-art--versus { display: flex; justify-content: center; align-items: center; gap: 10px; }
.versus-chip { width: 76px; height: 76px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); }
.versus-vs {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold);
}

/* across the table: the app's real dice */
.mode-art--dice { display: flex; justify-content: center; align-items: center; gap: 16px; }
.real-die { width: 66px; height: 66px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .45)); }
.real-die--a { transform: rotate(-14deg) translateY(-8px); }
.real-die--b { transform: rotate(18deg) translateY(10px); }

/* cpu: the computer thinking over its move */
.mode-art--cpu { display: flex; justify-content: center; align-items: center; gap: 14px; }
.thinking {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .3);
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .5);
}
.thinking i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream);
  animation: thinking 1.4s ease-in-out infinite;
}
.thinking i:nth-child(2) { animation-delay: .2s; }
.thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes thinking {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* ---- Board ---- */

.board {
  padding: clamp(90px, 12vw, 150px) 0;
  overflow: hidden;
}
.board-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.board-copy p { font-size: 1.12rem; color: rgba(246, 238, 221, .82); max-width: 40ch; margin: 22px 0 0; }
.board h2 em { color: var(--gold); }

.ticks { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.ticks li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.ticks li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("../images/board/chip-white.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}

/* The bezel and corners scale with the tablet's width (cqw), and the outer
   radius is the screen radius plus the bezel, so the corners stay concentric. */
.tablet {
  container-type: inline-size;
  transform: rotate(-2deg);
  transition: transform .6s var(--ease-bounce);
}
.tablet:hover { transform: rotate(0deg) scale(1.01); }
.tablet picture {
  display: block;
  padding: 2.2cqw;
  border-radius: 5cqw;
  background: linear-gradient(145deg, #3a3a3c, #111 45%, #1e1e20);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .06),
    0 50px 90px -30px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(0, 0, 0, .5);
}
.tablet img { width: 100%; border-radius: 2.8cqw; }

/* ---- Accessibility ---- */

.access {
  background: var(--cream);
  padding: clamp(90px, 12vw, 140px) 0;
}
.access h2 em { color: var(--felt); }
.access-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.access-copy > p { color: var(--ink-soft); font-size: 1.12rem; margin: 20px 0 0; max-width: 40ch; }

.quote { margin: 40px 0 0; padding: 0 0 0 22px; border-left: 3px solid var(--gold); }
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
}
.quote figcaption { margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }

.access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.access-list li {
  padding: 24px 24px 26px;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.access-list li:nth-child(2) { transition-delay: .08s; }
.access-list li:nth-child(3) { transition-delay: .16s; }
.access-list li:nth-child(4) { transition-delay: .24s; }
.access-list h3 { font-size: 1.25rem; margin-bottom: 8px; }
.access-list p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ---- Finale ---- */

.finale {
  overflow: hidden;
  padding: clamp(110px, 14vw, 170px) 0 clamp(100px, 12vw, 150px);
  text-align: center;
}
.finale-inner { position: relative; z-index: 1; }
.finale-dice { display: flex; justify-content: center; gap: 26px; margin-bottom: 30px; }
.finale-dice .die { --size: 100px; }
.finale-dice .die:last-child { margin-top: 18px; }
.finale h2 { font-size: clamp(3.4rem, 10vw, 7.5rem); color: #fffaf0; font-style: italic; }
.finale p { font-size: 1.2rem; color: rgba(246, 238, 221, .85); margin: 16px auto 36px; max-width: 36ch; text-wrap: balance; }
.finale .badge img { height: 58px; }
.finale .roll-log {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  min-height: 1.6em;
  margin: 26px auto 0;
}

.checker {
  position: absolute;
  width: clamp(70px, 9vw, 110px);
  height: auto;
  z-index: 0;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45));
}
.c1 { left: 6%; bottom: 14%; }
.c2 { left: calc(6% + 26px); bottom: calc(14% + clamp(58px, 7.5vw, 92px)); }
.c3 { right: 7%; top: 34%; }
.c4 { right: 11%; bottom: 10%; width: clamp(60px, 7vw, 88px); }

/* ------------------------------ Footer ------------------------------ */

.footer {
  background: var(--felt-darkest);
  color: rgba(246, 238, 221, .65);
  padding: 44px 0 max(44px, env(safe-area-inset-bottom));
  font-size: .95rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.footer-brand strong { color: var(--cream); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--cream); }
.copyright { width: 100%; margin: 12px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }

/* ------------------------------ Reveal ------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .tablet.reveal.in { transform: rotate(-2deg); }
.js .tablet.reveal.in:hover { transform: rotate(0deg) scale(1.01); }
.js .mode.reveal:nth-child(2) { transition-delay: .08s; }
.js .mode.reveal:nth-child(3) { transition-delay: .16s; }
.js .mode.reveal:nth-child(4) { transition-delay: .24s; }
.js .mode.reveal.in:hover { transition-delay: 0s; transform: translateY(-6px); }

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1100px) {
  .modes { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .hero-copy { padding-bottom: 0; }
  .lede { margin-inline: auto; }
  .cta-row { justify-content: center; flex-direction: column; }
  .hero-visual { height: 480px; margin-top: 24px; }
  .phone { --w: 290px; }
  .die--hero-a { --size: 86px; top: 40px; right: max(0px, calc(50% - 215px)); }
  .die--hero-b { --size: 76px; top: 220px; left: max(0px, calc(50% - 210px)); }

  .board-grid, .access-grid { grid-template-columns: 1fr; }
  .board-grid { text-align: center; }
  .board-copy p { margin-inline: auto; }
  .ticks { justify-content: center; }
  .tablet { transform: rotate(-1.5deg); }
  .c3 { top: 12%; }
}

@media (max-width: 600px) {
  .modes, .access-list { grid-template-columns: 1fr; }
  .modes { max-width: 440px; }
  .ticks { justify-content: start; text-align: left; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .nav-logo span { display: none; }
  .hero-visual { height: 420px; }
  .phone { --w: 250px; }
  .die--hero-a { --size: 72px; right: 0; }
  .die--hero-b { --size: 64px; left: 0; top: 200px; }
  .finale-dice .die { --size: 80px; }
  .c1, .c2 { left: -20px; }
  .c3, .c4 { right: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero .phone { transform: translateY(40px); }
  .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------ Privacy policy ------------------------------ */

.legal-head {
  overflow: hidden;
  padding: clamp(130px, 18vw, 180px) 0 clamp(60px, 8vw, 90px);
}
.legal-head h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: #fffaf0; }
.legal-head p { margin: 16px 0 0; max-width: 44ch; font-size: 1.2rem; color: rgba(246, 238, 221, .85); text-wrap: balance; }

.legal { background: var(--cream); padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 120px); }
.legal-body { max-width: 760px; }
.legal-body p { margin: 0 0 18px; color: var(--ink-soft); text-wrap: pretty; }
.legal-body h2 { font-size: 1.6rem; margin: 44px 0 12px; color: var(--ink); }
.legal-body a { color: var(--felt); text-underline-offset: 3px; }
.legal-body .updated { font-size: .9rem; font-weight: 600; color: var(--wood-dark); }

.glance {
  list-style: none;
  margin: 32px 0 8px;
  padding: 24px 26px;
  display: grid;
  gap: 12px;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.glance li { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--ink); }
.glance li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: url("../images/board/chip-white.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.glance li:nth-child(even)::before { background-image: url("../images/board/chip-brown.png"); }