/* The home page. Big, calm, and made of the game's own art. */

.eyebrow { font: 0.95rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.center { text-align: center; }
section { position: relative; }

/* ---- The hero ---------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: 1fr auto; color: #17324d; background: var(--sky);
}
.hero-sky { position: absolute; inset: -4% -2% 0; z-index: -3; background: url('../img/sky.webp') center 64% / cover no-repeat; transform-origin: 50% 70%; }
.clouds { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* Soft flat streaks with a bump or two on top, like the clouds painted in the game's sky. */
.cloud {
  position: absolute; left: 0; height: 22px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35) 70%, transparent);
  filter: blur(2px);
}
.cloud::before, .cloud::after {
  content: ''; position: absolute; bottom: 30%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), transparent);
}
.cloud::before { left: 22%; width: 34%; height: 180%; }
.cloud::after { left: 48%; width: 24%; height: 130%; }
.cloud.c1 { top: 12%; width: 220px; }
.cloud.c2 { top: 22%; width: 160px; opacity: 0.8; transform: scale(0.8); }
.cloud.c3 { top: 8%; width: 300px; opacity: 0.7; }
.cloud.c4 { top: 30%; width: 180px; opacity: 0.6; transform: scale(0.7); }

.hero-copy {
  position: relative; z-index: 2; align-self: center; text-align: center;
  padding-top: clamp(70px, 12vh, 120px);
}
/* A soft glow behind the words, so they read over the painted trees. */
.hero-copy::before {
  content: ''; position: absolute; left: 50%; top: 58%; z-index: -1; width: min(900px, 110%); height: 55%;
  transform: translate(-50%, -30%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 247, 255, 0.78), rgba(235, 247, 255, 0));
}
.hero-logo { margin: 0 auto; width: min(680px, 84vw); }
.hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgba(20, 60, 110, 0.25)); }
.hero-line {
  font: clamp(1.1rem, 2.4vw, 1.55rem)/1.45 var(--serif); max-width: 34em; margin: clamp(10px, 2vh, 22px) auto 26px;
  color: #1e3d5c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-cta .btn.ghost { background: rgba(255, 255, 255, 0.72); color: #1e3d5c; box-shadow: 0 5px 0 rgba(30, 61, 92, 0.25); }

/* The grass along the bottom, where the characters live. */
.meadow { position: relative; z-index: 1; height: clamp(150px, 26vh, 250px); }
.stage-life { position: absolute; inset: 0; }
.stage-life img, .stage-life svg { position: absolute; bottom: 12%; left: 0; transform-origin: 50% 100%; pointer-events: none; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 18px; z-index: 3; width: 30px; height: 48px; margin-left: -15px;
  border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 20px;
}
.scroll-cue span { position: absolute; left: 50%; top: 9px; width: 6px; height: 10px; margin-left: -3px; border-radius: 3px; background: #fff; }

/* ---- Try it ------------------------------------------------------------------------ */
/* The grass rolls down into the page in a gentle hill, rather than stopping at a line. */
.try { padding: clamp(90px, 11vw, 150px) 0 clamp(70px, 10vw, 130px); }
.try::before {
  content: ''; position: absolute; inset: -1px 0 auto 0; height: clamp(50px, 7vw, 90px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v38c-180 40-360 52-560 30S420 18 250 40 60 70 0 58z' fill='%236aa83a'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
.try-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center; margin-top: 30px; }
.mini-score { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 14px; margin: 24px 0; }
.mini-score .label { font: 1rem var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.mini-score .value { font: 2.4rem/1 var(--numbers); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--blue-deep); }
.mini-score .hint { grid-column: 1 / -1; color: var(--muted); font-size: 0.95rem; min-height: 1.6em; }
.try-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mini-frame {
  position: relative; border-radius: 28px; padding: 18px 18px 24px; overflow: hidden;
  background: url('../img/sky-1200.webp') center 70% / cover no-repeat; box-shadow: var(--shadow);
}
.mini-frame::after { content: ''; position: absolute; inset: auto 0 0 0; height: 16px; background: linear-gradient(180deg, #8b5a31, #5d3a1e); }
.mini-host { position: relative; aspect-ratio: 10 / 6; display: flex; align-items: flex-end; justify-content: center; }

/* ---- How to play ------------------------------------------------------------------- */
.how { padding: clamp(70px, 9vw, 120px) 0; }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); counter-reset: step; }
.step {
  position: relative; padding: 22px 20px 26px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
  counter-increment: step;
}
.step::before {
  content: counter(step); position: absolute; top: -16px; left: 20px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font: 1.3rem/1 var(--display); color: #fff; background: var(--blue); box-shadow: 0 4px 0 var(--blue-deep);
}
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin: 6px 0 10px; }
.step p { color: var(--muted); margin: 0; }
/* The app's "Keep" tag, on the kind a hint says to save for last. */
.keep-art { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; margin: 6px 0 10px; }
.keep-art img { width: 58%; filter: drop-shadow(0 0 18px rgba(255, 216, 77, 0.9)); }
.keep-art span {
  position: absolute; top: 8%; right: 14%; padding: 4px 12px; border-radius: 10px; transform: rotate(8deg);
  font: 1.05rem/1 var(--display); color: #5a3b00; background: #ffd84d; box-shadow: 0 3px 0 #c79a18;
}

/* ---- Scoring ------------------------------------------------------------------------ */
.score-story { padding: clamp(70px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--sky) 45%, var(--paper))); }
.score-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.small-print { color: var(--muted); font-size: 0.95rem; }
.score-demo { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 36px); }
.big-number { display: grid; margin-bottom: 26px; }
.big-number span { font: clamp(3rem, 8vw, 5.4rem)/1 var(--numbers); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--blue-deep); }
.big-number small { color: var(--muted); font-size: 0.95rem; }
.bars { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 10px; height: 230px; }
.bar { position: relative; height: calc(var(--v) / 1600 * 100%); min-height: 26px; }
/* Only the fill grows: scaling the whole bar squashed its labels. */
.bar i {
  position: absolute; inset: 0; border-radius: 12px 12px 6px 6px; transform-origin: bottom;
  background: linear-gradient(180deg, #ffd84d, #f0a92b); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.12);
}
.bar span { position: absolute; top: -24px; left: 0; right: 0; text-align: center; font: 0.95rem var(--numbers); font-weight: 600; }
.bar b { position: absolute; bottom: -24px; left: -10px; right: -10px; text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1.1; }
.bars { margin-bottom: 30px; }

/* ---- Everywhere ------------------------------------------------------------------ */
.everywhere { padding: clamp(70px, 9vw, 120px) 0 40px; overflow: hidden; }
.rail-pin { position: relative; }
.rail { display: flex; gap: clamp(20px, 3vw, 40px); padding: 40px var(--gutter) 30px; width: max-content; align-items: flex-end; }
.device { margin: 0; flex: none; }
.device .frame { border-radius: 26px; overflow: hidden; background: #111; padding: 10px; box-shadow: var(--shadow); }
.device .frame img { border-radius: 18px; width: 100%; height: auto; }
.device.phone { width: clamp(300px, 46vw, 620px); }
.device.tablet { width: clamp(300px, 40vw, 540px); }
.device.vision { width: clamp(300px, 46vw, 640px); }
.device.vision .frame { padding: 0; background: none; }
.device.mac { width: clamp(300px, 42vw, 560px); }
.mac-frame { padding: 0 !important; background: #d9dde2 !important; }
.mac-bar { height: 26px; display: flex; gap: 7px; align-items: center; padding-left: 12px; background: linear-gradient(#eceff2, #d9dde2); }
.mac-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.mac-bar i:nth-child(2) { background: #febc2e; } .mac-bar i:nth-child(3) { background: #28c840; }
.mac-screen img { border-radius: 0 !important; aspect-ratio: 16 / 10; object-fit: cover; }
.device figcaption { max-width: 34ch; margin-top: 14px; color: var(--muted); }
.device figcaption strong { display: block; color: var(--ink); font: 1.25rem var(--display); letter-spacing: 0.02em; }
@media (max-width: 899px) {
  .rail-pin { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .device { scroll-snap-align: center; }
  .device.phone, .device.vision { width: 82vw; }
  .device.tablet, .device.mac { width: 76vw; }
}

/* ---- The table ---------------------------------------------------------------------- */
.table { padding: clamp(60px, 8vw, 110px) 0; }
.table-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.table-shot { border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); }
.table-shot img { width: 100%; transform-origin: 50% 60%; }

/* ---- Thirty years ------------------------------------------------------------------ */
/* Clipped sideways: its entries wait 40px to the right until they slide in, which widened
   the whole page on a 390-point phone. */
.story { overflow-x: clip; padding: clamp(60px, 8vw, 110px) 0; background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--grass) 12%, var(--paper))); }
.timeline { list-style: none; margin: 50px auto 0; padding: 0; max-width: 760px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 44px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--line); }
.timeline .line { position: absolute; left: 44px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: linear-gradient(var(--blue), var(--grass)); transform-origin: top; }
.moment { position: relative; padding: 0 0 44px 110px; }
.moment .year {
  position: absolute; left: 0; top: 0; width: 92px; height: 44px; display: grid; place-items: center;
  font: 1.35rem/1 var(--display); color: #fff; background: var(--blue); border-radius: 999px; box-shadow: 0 4px 0 var(--blue-deep);
}
.moment h3 { margin-top: 8px; }
.moment p { color: var(--muted); }

/* ---- The promise ---------------------------------------------------------------------- */
.promise { padding: 40px 0 80px; }
.promise-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 40px); align-items: center;
  background: var(--card); border-radius: 32px; box-shadow: var(--shadow); padding: clamp(24px, 4vw, 48px);
}
.promise-dog { width: clamp(110px, 16vw, 190px); height: auto; }
.promise h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.promise .lede { margin: 0; }

/* ---- Download ------------------------------------------------------------------------ */
.download { padding: 40px 0 120px; }
.center-stores { justify-content: center; margin-top: 26px; }
.store.web { background: linear-gradient(180deg, #5aa7ea, var(--blue) 55%, var(--blue-deep)); }

/* ---- Narrow screens ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .try-grid, .score-grid, .table-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .try-board { order: -1; }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
  .promise-card { grid-template-columns: 1fr; text-align: center; }
  .promise-dog { margin: 0 auto; }
  .moment { padding-left: 0; padding-top: 58px; }
  .timeline::before, .timeline .line { left: 22px; top: 50px; }
  .bar b { font-size: 0.62rem; }
}