html, body { background: #DCE6FF; }

:root {
  --edge: max(28px, calc(50% - 620px));   /* left/right edge of the 1240px grid */
  --brand: #1F3A9E;
  --brand-2: #4A63D8;
  --ink: #1D1D1F;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2 { margin: 0; font-weight: 700; }
p { margin: 0; }
ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Runway and pinned stage ---------- */
/* 55svh of scroll per hour: one flick moves on to the next hour */
.day { position: relative; height: calc(100svh + 330svh); height: calc(100lvh + 330svh); }

.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh; min-height: 600px;
  overflow: hidden; overflow-x: clip; overflow-y: visible; isolation: isolate;
  --fg: #1D1D1F; --fg-2: rgba(29, 29, 31, .62);
  color: var(--fg);
}
.sky, .stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky { z-index: -3; background: #DCE6FF; }
.stars { z-index: -2; opacity: var(--stars, 0); visibility: hidden; }
.orb {
  position: absolute; z-index: -2;
  width: 22vmin; aspect-ratio: 1; border-radius: 50%;
  left: 0; top: 0;
  background: var(--orb-c, #FFF4C8);
  box-shadow: 0 0 80px 20px var(--orb-glow, rgba(255, 236, 170, .55));
  opacity: var(--orb-o, 1);
  transform: translate(calc(72vw - 50%), calc(16vh - 50%));
  will-change: transform;
}

/* Clouds drift slowly; they darken with the rain */
/* the container is not a layer of its own (it would be a full-screen texture); each cloud is */
.clouds { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cloud { position: absolute; width: 26vw; max-width: 380px; will-change: transform, filter; opacity: var(--cloud-o, .9); filter: brightness(var(--cloud-b, 1.5)) saturate(.8); animation: drift 60s linear infinite; }
.c1 { top: 8%; left: -10%; animation-duration: 70s; }
.c2 { top: 20%; left: 40%; width: 18vw; animation-duration: 90s; animation-delay: -30s; }
.c3 { top: 4%; left: 70%; width: 22vw; animation-duration: 80s; animation-delay: -50s; }
@keyframes drift { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }

/* ---------- Worlds ---------- */
/* Idle camera: a slow, small handheld sway */
.worlds { position: absolute; inset: 0; z-index: 1; transform-origin: 64% 100%; translate: 0 calc(var(--dock, 0px) * -1); transition: translate .35s var(--ease); animation: sway 9s ease-in-out infinite alternate; }
@keyframes sway {
  0%   { transform: translate3d(-6px, 0, 0) rotate(-.45deg); }
  50%  { transform: translate3d(3px, -7px, 0) rotate(.15deg); }
  100% { transform: translate3d(7px, 2px, 0) rotate(.5deg); }
}
/* Islands sit on the bottom edge: their soil runs off-screen, as if we were standing on them */
.world {
  position: absolute;
  left: 64%; bottom: 0;
  width: min(58vw, 104svh, 920px);
  aspect-ratio: 1;
  transform: translate(-50%, 34%);
  transform-origin: 50% 66%;
  opacity: 0;
  /* will-change is set from JS only on the worlds near the current hour: seven big
     retina layers at once ran the GPU out of memory and made scrolling stall */
}
.w-planet { left: 69%; width: min(66vw, 124svh, 1080px); transform: translate(-50%, 53%); transform-origin: 50% 47%; }
.island { width: 100%; }
/* Planets only rock gently, never turn upside down */
.rock { animation: rock 14s ease-in-out infinite alternate; }
@keyframes rock { from { rotate: -3deg; } to { rotate: 3deg; } }
/* Ada gets her own light depth: a little extra pointer/scroll drift and a slow idle sway */
.ada { transform-origin: 50% 100%; will-change: transform; animation: idle 4.2s ease-in-out infinite alternate; }
@keyframes idle { from { transform: translateY(0) rotate(-.8deg); } to { transform: translateY(-5px) rotate(.8deg); } }
.ada { position: absolute; left: 6%; bottom: 38%; height: 36%; width: auto; filter: drop-shadow(0 20px 22px rgba(20, 30, 80, .3)); }
.ada-wide { height: auto; width: 40%; left: 2%; bottom: 36%; }
.ada-final { left: auto; right: 6%; bottom: 58%; height: 26%; }
/* the celebrating Ada is mid-jump, so she hangs in the air on her own */
.ada-final { animation: hop 2.6s ease-in-out infinite alternate; }
@keyframes hop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-22px) rotate(3deg); } }
.tags { position: absolute; right: 6%; top: 8%; display: grid; gap: 10px; z-index: 2; }
.tag {
  display: inline-flex; gap: 8px; align-items: center; justify-self: end;
  padding: 9px 14px; border-radius: 99px;
  font-size: 14px; color: #F5F5F7;
  background: rgba(20, 24, 70, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12);
}
.tag b { font-weight: 600; }
.tag::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.tag.up::after { border-bottom: 7px solid #8EA2FF; }
.tag.down::after { border-top: 7px solid #30D158; }

/* ---------- Rain ---------- */
.rain { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; opacity: var(--rain); }

/* ---------- Revenue chart (23:00, smart pricing) ---------- */
.chart { position: absolute; inset: 12% 7% 38% 0; z-index: -1; opacity: var(--chart-o, 0); pointer-events: none; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid path { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; stroke-dasharray: 4 8; vector-effect: non-scaling-stroke; }
/* The line and its fill are revealed left to right as the visitor scrolls: the clip slides right
   while its content slides back left by the same amount, both by transform, so nothing repaints */
.chart-clip, .chart-inner { position: absolute; inset: 0; will-change: transform; }
.chart-clip { overflow: hidden; transform: translate3d(calc((var(--chart, 0) - 1) * 100%), 0, 0); }
.chart-inner { transform: translate3d(calc((1 - var(--chart, 0)) * 100%), 0, 0); }
.chart-clip svg { width: 100%; height: 100%; overflow: visible; }
.chart-line, .chart-glow { fill: none; stroke: #34C759; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-glow { stroke: rgba(52, 199, 89, .28); stroke-width: 14; }
.chart-dot {
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0); will-change: transform;
  background: #34C759; box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 24px 6px rgba(52, 199, 89, .7);
}
.chart-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(52, 199, 89, .7); animation: chart-ping 1.8s var(--ease) infinite; }
@keyframes chart-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.chart-label {
  position: absolute; right: calc(100% + 14px); bottom: calc(100% + 6px);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(14, 40, 40, .7); box-shadow: inset 0 0 0 1px rgba(52, 199, 89, .5);
}
.chart-label::before { content: "↑"; color: #34C759; font-weight: 700; }

/* ---------- Hand and phone ---------- */
.hand {
  position: absolute; z-index: 3;
  right: max(12px, calc(50% - 660px));
  bottom: 0;
  height: min(78svh, 760px);
  aspect-ratio: 631 / 1000;
  transform: translate3d(0, 115svh, 0) rotate(8deg);
  /* rides above the phone browser's bottom bar while it is showing (see dock() in gun.js) */
  margin-bottom: var(--dock, 0px); transition: margin-bottom .35s var(--ease);
  transform-origin: 50% 100%;
  will-change: transform;
}
/* the inner box lets the phone lean in toward the viewer without fighting the scroll transform */
.hand-zoom { position: absolute; inset: 0; transform-origin: 63% 32%; will-change: transform; }
.hand-img { position: relative; z-index: 2; width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(20, 30, 80, .25)); }
/* The live menu sits behind the keyed-out screen of the hand image */
.screen {
  position: absolute; z-index: 1;
  left: 39.7%; top: 2.2%; width: 46.8%; height: 61%;
  border-radius: 9% / 4.5%;
  overflow: hidden;
  background: #FBFBFD;
  color: #1D1D1F;            /* the phone keeps its own light UI at night */
  container-type: inline-size;
}
.sc-in { position: absolute; inset: 0; font-size: 5.4cqw; line-height: 1.3; padding: 3.4em 1em 1em; }
.sc-top { display: flex; justify-content: space-between; align-items: baseline; }
.sc-venue { font-weight: 700; font-size: 1.35em; letter-spacing: -.03em; }
.sc-table { font-size: .8em; color: #6E6E73; }
.sc-langs { display: flex; gap: .35em; margin: .8em 0 .6em; font-size: .72em; font-weight: 600; }
.sc-langs span { padding: .4em .7em; border-radius: 99px; background: #EEF0F6; color: #6E6E73; }
.sc-langs .on { background: var(--brand); color: #fff; }
.chapter h1, .chapter h2 { text-wrap: balance; }
.sc-weather { display: flex; align-items: center; gap: .5em; padding: .5em .7em; border-radius: .8em; background: #EEF2FF; font-size: .8em; font-weight: 600; margin-bottom: .7em; transition: background-color .5s; }
.sc-weather.is-rain { background: #E4E8F2; }
.sc-weather svg { width: 1.5em; height: 1.5em; display: block; }
.sc-list { display: grid; gap: .45em; }
.sc-item { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: .6em; padding: .4em .55em .4em .4em; border-radius: .9em; background: #fff; box-shadow: 0 0 0 1px #EEF0F6, 0 .3em .8em -.6em rgba(20, 30, 80, .35); }
.sc-item img { width: 2.4em; height: 2.4em; object-fit: contain; }
.sc-name { display: block; font-weight: 600; font-size: .9em; line-height: 1.15; }
.sc-flag { display: block; font-size: .68em; font-weight: 600; color: var(--brand); }
.sc-flag:empty { display: none; }
.sc-price { font-weight: 600; font-size: .88em; font-variant-numeric: tabular-nums; }
.sc-item.is-low { opacity: .45; }
.sc-cart {
  position: absolute; left: .7em; right: .7em; bottom: .7em;
  display: flex; align-items: center; justify-content: space-between;
  padding: .5em .5em .5em 1em; border-radius: 99px;
  background: var(--ink); color: #fff; font-size: .85em;
  transform: translateY(calc((1 - var(--cart, 0)) * 180%));
  transition: transform .6s var(--spring);
}
.sc-send { background: var(--brand); padding: .65em 1em; border-radius: 99px; font-weight: 600; }
.sc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .6em 1em 1.3em; border-radius: 1.5em 1.5em 0 0;
  background: #fff; box-shadow: 0 -1em 2em -1em rgba(20, 30, 80, .35);
  transform: translateY(calc((1 - var(--sheet, 0)) * 110%));
  transition: transform .7s var(--spring);
}
.sc-grab { display: block; width: 2.4em; height: .28em; margin: 0 auto .8em; border-radius: 99px; background: #E3E5EC; }
.sc-sheet-k { font-weight: 700; font-size: 1.05em; margin-bottom: .6em; letter-spacing: -.02em; }
.sc-pair { display: grid; grid-template-columns: 2.8em 1fr auto; gap: .6em; align-items: center; padding: .5em; border-radius: 1em; background: #F2F4FF; }
.sc-pair img { width: 2.8em; height: 2.8em; object-fit: contain; }
.sc-pair b { display: block; font-size: .9em; }
.sc-pair small { display: block; font-size: .68em; color: #6E6E73; line-height: 1.25; }
.sc-add { padding: .6em .9em; border-radius: 99px; background: var(--brand); color: #fff; font-weight: 600; font-size: .8em; }

.ping {
  position: absolute; z-index: 3; right: 72%; top: 10%;
  display: flex; gap: 10px; align-items: center; white-space: nowrap;
  padding: 12px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 40px -20px rgba(20, 30, 80, .4);
  font-size: 14px; color: var(--ink);
  opacity: var(--ping, 0);
  transform: translate3d(calc((1 - var(--ping, 0)) * 40px), 0, 0) scale(calc(.9 + var(--ping, 0) * .1));
  transition: opacity .4s, transform .6s var(--spring);
}
.ping b { display: block; font-weight: 600; }
.ping small { color: #6E6E73; }
.ping-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px rgba(31, 58, 158, .16); }

/* ---------- Copy ---------- */
.copy { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* A soft wash of the current sky behind the copy, so the text stays readable over the worlds */
.copy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--scrim, 0);
  background: linear-gradient(90deg, rgba(220, 230, 255, .88) 0, rgba(220, 230, 255, .7) calc(var(--edge) + 360px), transparent calc(var(--edge) + 640px));
}
.chapter p { text-shadow: 0 0 14px var(--halo, rgba(220, 230, 255, .8)); }
.chapter {
  position: absolute;
  left: var(--edge);
  top: 50%;
  width: min(400px, 30vw);
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  will-change: transform, opacity;
}
.chapter h1 { font-size: clamp(42px, 4.6vw, 70px); line-height: 1; letter-spacing: -.045em; }
.chapter h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; }
.chapter h2.final { font-size: clamp(40px, 4.6vw, 70px); line-height: 1; letter-spacing: -.045em; }
.chapter p { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--fg-2); max-width: 26rem; }
.time {
  display: inline-block; margin-bottom: 18px;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 8px 14px; border-radius: 99px;
  color: var(--fg);
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; margin-top: 30px;
  min-height: 54px; padding: 0 28px; border-radius: 99px;
  background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px;
  transition: transform .35s var(--spring);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid #8EA2FF; outline-offset: 3px; }
/* Brand-blue call to action with a small arrow chip */
.btn-primary {
  gap: 14px; padding: 0 8px 0 26px;
  color: #fff;
  background: linear-gradient(180deg, #2C49BF 0%, var(--brand) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px -14px rgba(31, 58, 158, .75);
}
.btn-arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.16); transition: transform .35s var(--spring), background-color .2s; }
.btn-primary:hover .btn-arrow { transform: translateX(3px); background: rgba(255,255,255,.24); }
.btn-primary:active { transform: scale(.98); }
.chapter-logo { width: auto; height: clamp(76px, 7.4vw, 112px); margin-bottom: 26px; }

/* ---------- Clock ---------- */
.clock { position: absolute; z-index: 4; left: 50%; bottom: 26px; translate: -50% 0; width: min(560px, 80vw); opacity: var(--clock-o, 0); transition: opacity .4s; }
.clock-track { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 18%, transparent); overflow: hidden; }
.clock-fill { display: block; height: 100%; transform: scaleX(var(--clock, 0)); transform-origin: 0 50%; background: var(--fg); }
.clock ol { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }

.hint {
  position: absolute; z-index: 5; left: 50%; bottom: calc(28px + var(--dock, 0px) + env(safe-area-inset-bottom)); transition: bottom .35s var(--ease); translate: -50% 0;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px; border-radius: 99px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 30px -14px rgba(0,0,0,.35);
  opacity: var(--hint-o, 1); pointer-events: none; white-space: nowrap;
}
.hint b { font-weight: 600; }
.hint span { width: 14px; height: 20px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(29,29,31,.55); position: relative; overflow: hidden; }
.hint span::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--ink); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(7px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ---------- Plans (after the night scene) ---------- */
main { background: #1C1F55; }
/* Plans and footer sit on top of the final planet; their backdrop stays clear at the top so the
   whole planet shows behind the heading, then darkens behind the cards and the footer. */
.finale {
  position: relative; z-index: 2; overflow: clip;
  background: linear-gradient(180deg, rgba(28, 31, 85, 0) 0, rgba(20, 23, 70, .35) 330px, #0E1240 680px, #0B0F33 1100px);
}
.plans {
  position: relative;
  padding: 140px 24px 120px;
  color: #F5F5F7;
}
.plans-in { max-width: 1240px; margin: 0 auto; }
.plans h2 { text-align: center; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.04em; }
.plans-lead { margin: 18px auto 0; max-width: 34rem; text-align: center; font-size: 18px; line-height: 1.5; color: rgba(245,245,247,.86); }
/* the heading sits over the planet now, so give it a soft shadow instead of a box */
.plans h2, .plans-lead { text-shadow: 0 2px 18px rgba(8, 10, 40, .85), 0 1px 3px rgba(8, 10, 40, .6); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  padding: 30px 26px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08);
}
.plan h3 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
.plan-tag { margin-top: 6px; font-size: 15px; color: rgba(245,245,247,.62); }
.plan ul { margin: 22px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 11px; }
.plan li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; color: rgba(245,245,247,.86); }
.plan li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 10px; height: 5px; border-left: 2px solid #8EA2FF; border-bottom: 2px solid #8EA2FF; rotate: -45deg; }
.plan-smart { background: #FFFFFF; color: var(--ink); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); }
.plan-smart .plan-tag { color: #6E6E73; }
.plan-smart ul { border-color: rgba(0,0,0,.08); margin-bottom: 26px; }
.plan-smart li { color: #424245; }
.plan-smart li::before { border-color: var(--brand); }
.trial { align-self: flex-start; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--brand); padding: 6px 12px; border-radius: 99px; }
.plan-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 99px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; transition: transform .35s var(--spring); }
.plan-btn:hover { transform: translateY(-2px); }
.billing { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; margin: 28px auto 0; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); --bi: 0; }
.billing-bg { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: #F5F5F7; transform: translateX(calc(var(--bi) * 100%)); transition: transform .45s var(--spring); }
.billing button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 0; background: transparent; border-radius: 99px; font: 500 15px/1 var(--font); color: rgba(245,245,247,.75); cursor: pointer; transition: color .25s; }
.billing button[aria-checked="true"] { color: var(--ink); }
.billing button:focus-visible { outline: 3px solid #8EA2FF; outline-offset: 2px; }
.billing-save { font-size: 12px; font-weight: 600; color: #8EA2FF; background: rgba(142, 162, 255, .16); padding: 4px 8px; border-radius: 99px; }
.billing button[aria-checked="true"] .billing-save { color: var(--brand); background: rgba(31, 58, 158, .1); }
.price { display: flex; align-items: baseline; gap: 4px; margin-top: 16px; }
.price-amount { font-size: 38px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price-per { font-size: 15px; color: rgba(245,245,247,.6); }
.plan-smart .price-per { color: #6E6E73; }
.plans-note { margin-top: 36px; text-align: center; font-size: 14px; color: rgba(245,245,247,.55); }

/* ---------- Footer ---------- */
.footer { position: relative; color: rgba(245,245,247,.6); font-size: 14px; }
/* the short logo, very faint, behind the plan cards and the footer, cut by the bottom of the page */
.footer-mark { position: absolute; z-index: 0; left: 50%; bottom: 0; translate: -50% 16%; width: min(calc(100% - 2 * var(--edge)), 1240px); aspect-ratio: 900 / 391; background: rgba(255,255,255,.05); -webkit-mask: url(assets/brand/logo-aom.webp) center / contain no-repeat; mask: url(assets/brand/logo-aom.webp) center / contain no-repeat; pointer-events: none; }
.footer-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding: 8px var(--edge) 28px; }
.footer-logo img { width: auto; height: 84px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer-links a, .footer-copy a { color: #F5F5F7; text-decoration: none; font-weight: 500; }
.footer-links a:hover, .footer-copy a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-links a:focus-visible, .footer-copy a:focus-visible, .footer-logo:focus-visible { outline: 3px solid #8EA2FF; outline-offset: 4px; border-radius: 6px; }
.footer-copy { width: 100%; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }

/* A small glass tab that jumps to the plans */
.tab {
  position: fixed; z-index: 20; top: 18px; right: var(--edge);
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: 99px; text-decoration: none; font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 30px -14px rgba(0,0,0,.35);
  opacity: var(--brand-o, 1); visibility: var(--brand-v, visible);
  transition: transform .35s var(--spring), background-color .2s;
}
.tab:hover { transform: translateY(-1px); background: #fff; }
/* The short logo in the same glass as the tab; both show once the first scene has gone */
.brand {
  position: fixed; z-index: 20; top: 18px; left: var(--edge);
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 30px -14px rgba(0,0,0,.35);
  opacity: var(--brand-o, 1); visibility: var(--brand-v, visible);
  transition: transform .35s var(--spring), background-color .2s;
}
.brand img { width: auto; height: 19px; }
.brand:hover { transform: translateY(-1px); background: #fff; }
.brand:focus-visible, .tab:focus-visible, .plan-btn:focus-visible { outline: 3px solid #8EA2FF; outline-offset: 3px; }


/* ---------- Phone ---------- */
@media (max-width: 860px) {
  .world { left: 50%; width: min(120vw, 80svh); }
  .ada { left: 12%; }
  .ada-wide { left: 8%; }
  /* the planet is wider than a phone; keep the celebrating Ada inside the screen, right of centre */
  .ada-final { left: 58%; right: auto; bottom: 60%; height: 21%; }
  /* on phones the copy sits at the top, so the sun and moon move down between text and world */
  .orb { width: 18vmin; }
  .w-planet { width: min(170vw, 104svh); }
  .chapter { left: 20px; right: 20px; width: auto; bottom: auto; transform: none; }
  .chapter h1 { font-size: clamp(44px, 12vw, 60px); }
  .chapter h2 { font-size: 28px; }
  .chapter h2.final { font-size: 40px; }
  .chapter p { font-size: 15.5px; margin-top: 10px; }
  .time { margin-bottom: 10px; }
  .hand { height: min(50svh, 96vw); right: -3vw; }
  .ping { display: none; }
  .tags { top: -8%; right: auto; left: 40%; gap: 6px; justify-items: start; }
  .tag { justify-self: start; }
  .tag { font-size: 12px; padding: 7px 11px; }
  .clock { bottom: auto; top: 70px; }
  .chapter { top: 120px; }
  /* phones: the chart climbs in the gap between the copy and the world */
  .chart { inset: 34% 8% 40% 0; }
  .copy::before { background: linear-gradient(180deg, rgba(220, 230, 255, .85) 0, rgba(220, 230, 255, .6) 38%, transparent 56%); }
  .btn { margin-top: 20px; min-height: 50px; }
  :root { --edge: 20px; }
  .tab, .brand { top: 14px; }
  .chapter-logo { height: 64px; margin-bottom: 16px; }
  .footer-logo img { height: 64px; }
  .plan-grid { grid-template-columns: 1fr; margin-top: 44px; }
  .plans { padding: 100px 18px 64px; }
  .clock ol { font-size: 11px; }
}

/* Idle loops pause while scrolling, and in worlds that are off screen */
.is-scrolling .worlds, .is-scrolling .rock, .is-scrolling .ada, .is-scrolling .cloud { animation-play-state: paused; }
.world[style*="hidden"] .ada, .world.rock[style*="hidden"], .world[style*="hidden"] .rock { animation-name: none; }

/* Lite mode (set by gun.js on slow GPUs): the same story without the decorative motion and the
   soft shadows that are expensive to keep on screen */
.lite .worlds, .lite .rock, .lite .ada, .lite .cloud, .lite .hint span::after, .lite .chart-dot::after { animation: none; }
.lite .ada, .lite .hand-img { filter: none; }

/* ---------- Reduced motion: keep the scroll story, drop the autonomous motion ---------- */
/* Narrow windows and tablets: the copy sits on top, so the hand can take most of the lower half */
@media (min-width: 560px) and (max-width: 860px) {
  .hand { height: min(64svh, 86vw); }
}

@media (prefers-reduced-motion: reduce) {
  .rock, .worlds, .cloud, .ada, .hint span::after, .chart-dot::after { animation: none; }
}