/* The Line: Cave Diving. The page is a dive: in through the cenote, down to the turn, home on the line.
   Faces are the game's own (Barlow, Barlow Condensed, VT323 for the HUD, Kalam for slates). OFL, self-hosted. */

@font-face { font-family: "Barlow"; src: url(../fonts/Barlow-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/Barlow-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/BarlowCondensed-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/BarlowCondensed-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/BarlowCondensed-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url(../fonts/VT323-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Kalam"; src: url(../fonts/Kalam-Regular.woff2) format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --abyss: oklch(0.13 0.016 205);
  --rock: oklch(0.175 0.02 202);
  --rock-2: oklch(0.22 0.022 200);
  --seam: oklch(0.32 0.025 198 / 0.55);
  --water: oklch(0.78 0.085 190);
  --water-deep: oklch(0.45 0.07 200);
  --amber: oklch(0.8 0.145 70);
  --amber-ink: oklch(0.22 0.04 70);
  --bone: oklch(0.93 0.017 85);
  --dim: oklch(0.74 0.018 190);
  --faint: oklch(0.58 0.02 195);
  --rope: oklch(0.86 0.03 85);
  --alarm: oklch(0.68 0.19 28);
  --glass: oklch(0.17 0.02 205 / 0.72);

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hud: "VT323", ui-monospace, "SF Mono", monospace;
  --hand: "Kalam", "Bradley Hand", cursive;

  --gutter: clamp(16px, 4vw, 48px);
  --line-x: clamp(16px, 5vw, 72px);           /* where the guideline runs */
  --content-x: calc(var(--line-x) + clamp(22px, 4vw, 64px));
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* quint-ish */
  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --step-1: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
  --step-3: clamp(2.3rem, 1.7rem + 2.6vw, 3.9rem);
  --step-4: clamp(3rem, 2rem + 4.6vw, 6.4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--abyss); color: var(--bone);
  font: 400 var(--step-0)/1.62 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--water); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--amber); color: var(--amber-ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -0.005em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--amber); color: var(--amber-ink); padding: 10px 14px; font-weight: 500; }
.skip:focus { top: 12px; }

/* ---------- labels: the game's HUD voice, used sparingly ---------- */
.tag {
  font: 600 var(--step--1)/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber);
  display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 18px;
}
.tag .stn { font-family: var(--hud); font-size: 1.25em; letter-spacing: 0.04em; color: var(--faint); }
.hud { font-family: var(--hud); letter-spacing: 0.02em; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px;
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter) 0 var(--content-x);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.top.scrolled, .top.solid { background: oklch(0.13 0.016 205 / 0.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--seam); }
.wordmark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--bone); line-height: 1; }
.wordmark b { font: 700 1.5rem/0.9 var(--display); letter-spacing: 0.005em; }
.wordmark svg { width: 92px; height: 7px; margin-top: 3px; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.top nav a { color: var(--dim); text-decoration: none; font: 500 1.02rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 0; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--bone); }
.top .get { color: var(--amber-ink); background: var(--amber); padding: 9px 14px; border-radius: 4px; }
.top .get:hover { color: var(--amber-ink); background: oklch(0.86 0.13 75); }
@media (max-width: 720px) { .top nav a.hide-s { display: none; } .top nav { gap: 16px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  font: 600 1.08rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border-radius: 4px; border: 1px solid oklch(0.93 0.017 85 / 0.32); color: var(--bone); background: oklch(0.13 0.016 205 / 0.35);
  cursor: pointer; transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.15s var(--ease-out);
}
.btn:hover { background: oklch(0.93 0.017 85 / 0.1); border-color: var(--bone); color: var(--bone); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn.amber { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.btn.amber:hover { background: oklch(0.86 0.13 75); }
.store { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.store a.badge { display: inline-block; line-height: 0; border-radius: 9px; }
.store a.badge img { height: 52px; width: auto; }
.soon { display: inline-flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 0 0 0 16px; border-left: 2px solid var(--amber); font: 500 1rem/1.25 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.soon b { color: var(--amber); font-weight: 600; letter-spacing: 0.14em; }
.store .note { font-size: var(--step--1); color: var(--dim); max-width: 34ch; line-height: 1.4; }

/* ---------- the guideline down the page ---------- */
.dive { position: relative; }
.dive::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 1.5px;
  background: linear-gradient(var(--rope), oklch(0.86 0.03 85 / 0.75) 60%, var(--rope));
  box-shadow: 0 0 10px oklch(0.86 0.03 85 / 0.18); z-index: 2; pointer-events: none;
}
.arrow-mark { position: absolute; left: calc(var(--line-x) - 9px); width: 20px; height: 28px; z-index: 3; color: var(--amber); pointer-events: none; }
.arrow-mark svg { width: 20px; height: 28px; filter: drop-shadow(0 0 6px oklch(0.8 0.145 70 / 0.45)); }

/* ---------- the water: a tint that darkens with depth, and silt drifting in it ---------- */
.backdrop { position: fixed; inset: 0; z-index: -2; background: var(--depth-bg, var(--abyss)); transition: background 0.2s linear; }
body.has-water { background: transparent; }
/* in front of the content: the silt hangs between you and the cave */
canvas.water { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: -3%; z-index: -2; will-change: transform; animation: sink 2.6s var(--ease-out) both; }
@keyframes sink { from { scale: 1.12; filter: brightness(0); } to { scale: 1; filter: brightness(1); } }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero video.playing { opacity: 1; }
/* the diver's lamp: the pointer lights the cave; elsewhere the water stays dark */
.lamp {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at var(--lx, 62%) var(--ly, 42%),
    oklch(0.9 0.04 85 / 0.10) 0, transparent 9vmax,
    oklch(0.1 0.016 205 / 0) 12vmax, oklch(0.1 0.016 205 / 0.58) 34vmax, oklch(0.1 0.016 205 / 0.78) 70vmax);
}
.hero .inner { will-change: transform; }
.down {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2; display: grid; justify-items: center; gap: 6px;
  color: var(--dim); text-decoration: none; font: 500 0.78rem/1 var(--display); letter-spacing: 0.24em; text-transform: uppercase;
}
.down svg { width: 12px; height: 40px; animation: bob 2.4s ease-in-out infinite; }
.down:hover { color: var(--bone); }
@keyframes bob { 50% { translate: 0 6px; } }
@media (max-width: 640px) { .down { display: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--abyss) 0%, oklch(0.13 0.016 205 / 0.72) 24%, transparent 58%),
    linear-gradient(to right, oklch(0.13 0.016 205 / 0.75) 0%, transparent 55%);
}
.hero .inner { padding: 120px var(--gutter) clamp(56px, 9vh, 104px) var(--content-x); max-width: 1100px; }
.hero h1 { margin: 0 0 10px; }
.hero h1 img { width: min(560px, 78vw); height: auto; margin-left: -1.5%; }
.hero .tagline { font: 500 var(--step-2)/1.08 var(--display); letter-spacing: 0.01em; margin: 0 0 14px; max-width: 30ch; }
.hero .tagline em { font-style: normal; color: var(--amber); }
.hero .sub { color: var(--dim); max-width: 46ch; margin-bottom: 30px; }
.hero .cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 22px; }
.real {
  position: absolute; right: var(--gutter); bottom: clamp(20px, 4vh, 36px); z-index: 1;
  font: 500 0.82rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  display: inline-flex; align-items: center; gap: 8px;
}
.real::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--alarm); box-shadow: 0 0 8px var(--alarm); }
@media (max-width: 640px) { .real { right: auto; left: var(--content-x); bottom: 18px; } .hero .inner { padding-bottom: 64px; } }

/* entrance */
.rise { opacity: 0; transform: translateY(18px); animation: rise 1.1s var(--ease-out) forwards; }
.rise.d1 { animation-delay: 0.25s; } .rise.d2 { animation-delay: 0.45s; } .rise.d3 { animation-delay: 0.65s; } .rise.d4 { animation-delay: 0.85s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- section scaffolding ---------- */
.sec { position: relative; padding: clamp(84px, 13vw, 168px) var(--gutter) clamp(84px, 13vw, 168px) var(--content-x); }
.sec > .arrow-mark { top: calc(clamp(84px, 13vw, 168px) - 4px); }
.sec h2 { font-size: var(--step-3); margin-bottom: 22px; max-width: 18ch; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--bone); max-width: 40ch; }
.dim { color: var(--dim); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
/* other ways in, so neighbouring sections never arrive the same way */
.reveal[data-r="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-out); }
.reveal[data-r="clip"].in { clip-path: inset(0 0 0 0); }
.reveal[data-r="focus"] { transform: scale(1.02); filter: blur(14px); transition: opacity 1.3s var(--ease-out), transform 1.6s var(--ease-out), filter 1.6s var(--ease-out); }
.reveal[data-r="focus"].in { filter: blur(0); }
.reveal[data-r="drift"] { transform: translateX(-34px); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal[data-r="drift"].in { transform: none; }
.reveal[data-r="stagger"] { transition-delay: calc(var(--i, 0) * 120ms); }

/* ---------- trailer ---------- */
.trailer-wrap { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .trailer-wrap { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.9fr); align-items: center; } }
.player { position: relative; aspect-ratio: 16 / 9; background: var(--rock); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 120px -40px oklch(0.05 0.02 205), 0 0 0 1px var(--seam); }
.player video, .player img { width: 100%; height: 100%; object-fit: cover; }
.player .play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: oklch(0.1 0.02 205 / 0.25); cursor: pointer; color: var(--bone);
  transition: background 0.3s var(--ease-out);
}
.player .play:hover { background: oklch(0.1 0.02 205 / 0.05); }
.player .play span { display: grid; place-items: center; width: clamp(68px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--amber); color: var(--amber-ink); box-shadow: 0 0 0 10px oklch(0.8 0.145 70 / 0.18); transition: transform 0.3s var(--ease-out); }
.player .play:hover span { transform: scale(1.06); }
.player .play svg { width: 34%; height: 34%; margin-left: 6%; }
.player .len { position: absolute; left: 16px; bottom: 14px; font: 1.2rem/1 var(--hud); color: var(--bone); background: oklch(0.1 0.02 205 / 0.6); padding: 4px 8px; border-radius: 3px; }
.story p:first-of-type::first-line { color: var(--bone); }
.story .slate { font: 1.35rem/1.35 var(--hand); color: var(--rope); transform: rotate(-1.2deg); margin-top: 26px; max-width: 30ch; }

/* ---------- three rules ---------- */
.rules { display: grid; gap: clamp(90px, 12vw, 150px); margin-top: clamp(48px, 7vw, 90px); }
.rule { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .rule { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); }
  .rule.flip { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.35fr); }
  .rule.flip .shot { order: 2; }
}
.rule .shot { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--rock); }
.rule .shot img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; scale: 1.06; translate: 0 var(--py, 0px); transition: scale 1.6s var(--ease-out); will-change: translate; }
.rule.in .shot img { scale: 1; }
.screen-rec video { width: 100%; aspect-ratio: 1920 / 886; object-fit: cover; border-radius: clamp(16px, 2.6vw, 30px); background: var(--rock); box-shadow: 0 50px 120px -40px oklch(0.04 0.02 205), 0 0 0 1px var(--seam); }
.screen-rec .cap { font-size: var(--step--1); margin-top: 12px; }
.rule h3 { font-size: var(--step-2); margin-bottom: 14px; }
.rule .num { font: 600 var(--step--1)/1 var(--display); letter-spacing: 0.18em; color: var(--faint); display: block; margin-bottom: 14px; }
.rule .num b { color: var(--amber); font-weight: 600; }

/* gas in thirds: the game's own gauge, as a teaching graphic */
.thirds { margin-top: 26px; max-width: 420px; }
.thirds .bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 14px; }
.thirds .bar i { border-radius: 2px; background: var(--rock-2); position: relative; overflow: hidden; }
.thirds .bar i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.thirds .bar i:nth-child(1)::after { background: var(--water); }
.thirds .bar i:nth-child(2)::after { background: oklch(0.78 0.085 190 / 0.55); transition-delay: 0.5s; }
.thirds .bar i:nth-child(3)::after { background: var(--amber); transition-delay: 1s; }
.rule.in .thirds .bar i::after { transform: scaleX(1); }
.thirds .legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; font: 1.15rem/1.1 var(--hud); color: var(--dim); }
.thirds .legend span:last-child { color: var(--amber); }

/* the silt-out: scroll stirs the floor until the water is milk */
.silt { position: relative; height: 260vh; margin: clamp(60px, 9vw, 110px) calc(-1 * var(--gutter)) 0 calc(-1 * var(--content-x)); }
.silt .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; }
.silt .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.silt .stage .milk { opacity: var(--silt, 0); }
.silt .stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 55%, transparent 0%, oklch(0.13 0.016 205 / 0.75) 100%); pointer-events: none; }
.silt .words { position: relative; z-index: 2; padding: 0 var(--gutter) 0 var(--content-x); max-width: 980px; }
.silt .alarm { font: 2rem/1 var(--hud); color: var(--alarm); text-shadow: 0 0 12px oklch(0.68 0.19 28 / 0.5); opacity: var(--alarm-o, 0); margin-bottom: 10px; letter-spacing: 0.06em; }
.silt h3 { font-size: var(--step-4); line-height: 0.95; max-width: 14ch; text-shadow: 0 2px 30px oklch(0.1 0.02 205 / 0.7); }
.silt .after { font: 1.5rem/1.3 var(--hud); color: var(--water); margin-top: 18px; opacity: var(--after-o, 0); text-shadow: 0 0 10px oklch(0.1 0.02 205); }
.silt .after b { color: var(--bone); font-weight: 400; }

/* ---------- six systems ---------- */
.systems { list-style: none; padding: 0; margin: clamp(40px, 6vw, 72px) 0 0; border-top: 1px solid var(--seam); counter-reset: sys; }
.systems li {
  display: grid; gap: 6px 32px; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--seam);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .systems li { grid-template-columns: 4.2rem minmax(230px, 0.9fr) minmax(0, 1.6fr); align-items: baseline; } }
.systems .n { font: 1.6rem/1 var(--hud); color: var(--faint); }
.systems h3 { font-size: var(--step-2); font-weight: 600; transition: color 0.3s var(--ease-out), transform 0.5s var(--ease-out); }
.systems li:hover h3 { color: var(--water); transform: translateX(6px); }
.systems p { margin: 0; color: var(--dim); }
.systems p b { color: var(--bone); font-weight: 500; }
.systems .free { display: inline-block; margin-left: 10px; vertical-align: middle; font: 600 0.78rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-ink); background: var(--amber); padding: 5px 7px 4px; border-radius: 3px; }

/* ---------- daily / weekly ---------- */
.split { display: grid; gap: clamp(36px, 5vw, 80px); grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.cal { border-top: 1px solid var(--amber); padding-top: 22px; }
.cal header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cal header img { width: 34px; height: 34px; opacity: 0.9; }
.cal h3 { font-size: var(--step-2); }
.cal p { color: var(--dim); }
.cal .hud { color: var(--water); font-size: 1.3rem; }

/* ---------- off the line ---------- */
.find { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 960px) { .find { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.find figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; }
.find figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(transparent, oklch(0.1 0.02 205 / 0.88)); font-size: var(--step--1); color: var(--dim); }
.find figcaption b { display: block; font: 600 1rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); margin-bottom: 2px; }
.facts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; color: var(--dim); }
.facts li img { width: 26px; height: 26px; margin-top: 2px; opacity: 0.85; }
.facts li b { color: var(--bone); font-weight: 500; }
.big-n { font: 600 var(--step-4)/0.9 var(--display); color: var(--amber); display: block; margin-bottom: 4px; }

/* ---------- gallery ---------- */
.gallery { margin-top: clamp(36px, 5vw, 60px); margin-right: calc(-1 * var(--gutter)); }
.gallery ul {
  list-style: none; margin: 0; padding: 0 var(--gutter) 18px 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 640px);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--rock-2) transparent; overscroll-behavior-x: contain;
}
.gallery li { scroll-snap-align: start; }
.gallery button { all: unset; cursor: zoom-in; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--rock); outline-offset: 3px; }
.gallery button:focus-visible { outline: 2px solid var(--amber); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out), filter 0.4s; }
.gallery button:hover img { transform: scale(1.025); }
.gallery .cap { display: block; margin-top: 10px; font-size: var(--step--1); color: var(--faint); }
.gallery-nav { display: flex; gap: 10px; margin-top: 8px; }
.gallery-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--seam); background: transparent; color: var(--bone); cursor: pointer; display: grid; place-items: center; }
.gallery-nav button:hover { border-color: var(--bone); }
.gallery-nav svg { width: 18px; height: 18px; }

dialog.viewer { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
dialog.viewer::backdrop { background: oklch(0.08 0.015 205 / 0.94); }
dialog.viewer .frame { width: 100%; height: 100%; display: grid; place-items: center; padding: 56px 16px 70px; }
dialog.viewer img { max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 30px 90px -20px #000a; }
dialog.viewer .close, dialog.viewer .step { position: fixed; border: 1px solid var(--seam); background: oklch(0.13 0.016 205 / 0.8); color: var(--bone); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; }
dialog.viewer .close { top: 14px; right: 14px; }
dialog.viewer .step.prev { left: 14px; top: 50%; } dialog.viewer .step.next { right: 14px; top: 50%; }
dialog.viewer .count { position: fixed; bottom: 22px; left: 0; right: 0; text-align: center; font: 1.2rem/1 var(--hud); color: var(--dim); }
dialog.viewer svg { width: 18px; height: 18px; }

/* ---------- devices ---------- */
.devices { display: grid; gap: clamp(36px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 1000px) { .devices { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.phone {
  position: relative; aspect-ratio: 2.16 / 1; border-radius: clamp(26px, 4.4vw, 54px); padding: clamp(8px, 1.1vw, 13px);
  background: linear-gradient(145deg, oklch(0.36 0.01 220), oklch(0.2 0.01 220) 40%, oklch(0.3 0.01 220));
  box-shadow: 0 50px 120px -40px oklch(0.04 0.02 205), inset 0 0 0 1px oklch(0.5 0.01 220 / 0.6);
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: clamp(19px, 3.4vw, 42px); background: #0a0f0f; }
.phone::after { content: ""; position: absolute; left: clamp(14px, 2.2vw, 26px); top: 50%; width: clamp(9px, 1.2vw, 15px); height: 26%; transform: translateY(-50%); border-radius: 99px; background: #070909; }
.features { list-style: none; padding: 0; margin: 0; columns: 2 220px; column-gap: 32px; }
.features li { break-inside: avoid; padding: 12px 0 12px 22px; position: relative; border-top: 1px solid var(--seam); color: var(--dim); }
.features li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 9px; height: 9px; border-top: 1.5px solid var(--amber); border-right: 1.5px solid var(--amber); transform: rotate(45deg); }
.features li b { color: var(--bone); font-weight: 500; display: block; }
.langs { margin-top: 22px; font-size: var(--step--1); color: var(--faint); max-width: 60ch; }

/* ---------- free to try ---------- */
.deal { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); max-width: 1100px; }
@media (min-width: 860px) { .deal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.deal div { padding-top: 18px; border-top: 2px solid var(--rock-2); }
.deal div:first-child { border-top-color: var(--amber); }
.deal h3 { font-size: var(--step-1); margin-bottom: 8px; letter-spacing: 0.01em; }
.deal p { color: var(--dim); margin: 0; }

/* ---------- surfacing ---------- */
.surface { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding: 120px var(--gutter); }
.surface img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: 50% 0%; }
.surface::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--abyss) 0%, oklch(0.13 0.016 205 / 0.35) 35%, oklch(0.13 0.016 205 / 0.55) 70%, var(--abyss) 100%); }
.surface h2 { font-size: var(--step-4); margin: 0 auto 14px; }
.surface p { margin: 0 auto 30px; color: var(--bone); }
.surface .store { align-items: center; }
.surface .store .note { text-align: center; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--seam); padding: 56px var(--gutter) 40px; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); color: var(--faint); font-size: var(--step--1); background: var(--abyss); }
@media (min-width: 860px) { .foot { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot h4 { margin: 0 0 12px; font: 600 0.95rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--bone); }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--seam); padding-top: 22px; line-height: 1.55; }
.foot .legal p { max-width: none; margin: 0 0 6px; }

/* ---------- depth gauge (decorative HUD) ---------- */
@media (min-width: 1100px) { :root { --content-x: calc(var(--line-x) + 112px); } }
/* the gauge rides on the line, inside the left margin, so it never covers the page */
.gauge {
  position: fixed; left: 14px; bottom: 22px; z-index: 40; width: calc(var(--line-x) + 82px); padding: 9px 10px 9px;
  background: var(--glass); border: 1px solid var(--seam); border-top: 2px solid var(--amber); border-radius: 4px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--hud); color: var(--bone);
  opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); pointer-events: none;
}
.gauge.on { opacity: 1; transform: none; }
.gauge .row { display: flex; justify-content: space-between; align-items: baseline; }
.gauge .depth { font-size: 2.3rem; line-height: 0.9; }
.gauge .depth small { font-size: 1.1rem; margin-left: 2px; color: var(--dim); }
.gauge .max { font-size: 1rem; color: var(--dim); text-align: right; line-height: 1.05; }
.gauge .gas { height: 6px; margin: 8px 0 6px; background: var(--rock-2); border-radius: 1px; position: relative; overflow: hidden; }
.gauge .gas i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--amber); transform-origin: left; }
.gauge .gas::before, .gauge .gas::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--abyss); z-index: 1; }
.gauge .gas::before { left: 33.33%; } .gauge .gas::after { left: 66.66%; }
.gauge .meta { display: flex; justify-content: space-between; font-size: 1rem; color: var(--dim); line-height: 1.1; }
.gauge .state { color: var(--water); }
.gauge .state.turn { color: var(--amber); }
.gauge .depth { font-size: 2rem; }
.gauge .max, .gauge .meta { font-size: 0.92rem; }
.gauge .meta span:last-child { display: none; }
@media (max-width: 1099px) { .gauge { display: none; } }

/* ---------- inner pages (support, press, privacy) ---------- */
.page-head { position: relative; padding: 150px var(--gutter) 56px var(--content-x); overflow: hidden; isolation: isolate; }
.page-head img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.5; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--abyss) 5%, oklch(0.13 0.016 205 / 0.55) 60%, oklch(0.13 0.016 205 / 0.8)); }
.page-head h1 { font-size: var(--step-4); margin: 0 0 14px; }
.page-head.quiet { padding-bottom: 28px; }
.page-head.quiet h1 { font-size: var(--step-3); }
.page-head p { color: var(--dim); font-size: var(--step-1); line-height: 1.4; max-width: 44ch; margin: 0; }
.page { padding: 24px var(--gutter) clamp(80px, 10vw, 140px) var(--content-x); }
.page .col { max-width: 760px; }
.page h2 { font-size: var(--step-2); margin: clamp(56px, 7vw, 84px) 0 18px; }
.page h2:first-child { margin-top: 24px; }
.contact {
  display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); margin: 8px 0 0; border-radius: 6px; border: 1px solid var(--seam); border-top: 2px solid var(--amber);
  background: linear-gradient(160deg, var(--rock), var(--abyss));
}
.contact .mail { font: 600 var(--step-2)/1.05 var(--display); color: var(--bone); text-decoration: none; word-break: break-word; }
.contact .mail:hover { color: var(--amber); }
.contact p { margin: 0; color: var(--dim); }
.contact ul { margin: 0; padding-left: 1.1em; color: var(--dim); }

.faq { border-top: 1px solid var(--seam); }
.faq details { border-bottom: 1px solid var(--seam); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 26px; gap: 16px; align-items: center;
  padding: 20px 0; font: 500 var(--step-1)/1.25 var(--display); letter-spacing: 0.01em; color: var(--bone);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--water); }
.faq summary i { width: 26px; height: 26px; border: 1px solid var(--seam); border-radius: 50%; position: relative; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.3s var(--ease-out); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .a { padding: 0 0 24px; color: var(--dim); }
.faq .a p, .faq .a li { max-width: 62ch; }
.faq .a b { color: var(--bone); font-weight: 500; }
.faq .a ol, .faq .a ul { padding-left: 1.2em; margin: 0 0 1em; }
.faq .a li { margin-bottom: 6px; }
.groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.groups a { font: 500 0.98rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--dim); border: 1px solid var(--seam); border-radius: 99px; padding: 10px 14px; }
.groups a:hover { color: var(--bone); border-color: var(--bone); }

.press-grid { display: grid; gap: 0 clamp(32px, 5vw, 80px); grid-template-columns: minmax(0, 1fr); max-width: 1240px; }
@media (min-width: 1040px) { .press-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.press-grid > div > h2:first-child { margin-top: 24px; }
.sheet { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--seam); margin: 0; }
.sheet > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--seam); }
@media (min-width: 640px) { .sheet > div { grid-template-columns: 170px minmax(0, 1fr); } }
.sheet dt { font: 600 0.95rem/1.5 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.sheet dd { margin: 0; color: var(--bone); }
.downloads { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 8px; }
.dl { display: grid; gap: 6px; padding: 18px 18px 16px; border: 1px solid var(--seam); border-radius: 6px; text-decoration: none; color: var(--bone); background: var(--rock); transition: border-color 0.25s, transform 0.25s var(--ease-out); }
.dl:hover { border-color: var(--amber); color: var(--bone); transform: translateY(-2px); }
.dl b { font: 600 1.25rem/1.1 var(--display); letter-spacing: 0.02em; }
.dl span { color: var(--faint); font-size: var(--step--1); }
.thumbs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 18px; }
.thumbs a { display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.thumbs a:hover img { transform: scale(1.04); }
.logo-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 18px; }
.logo-tiles a { display: grid; place-items: center; aspect-ratio: 16/10; border-radius: 6px; border: 1px solid var(--seam); background: var(--rock); padding: 24px; }
.logo-tiles a.icon img { width: 46%; border-radius: 22%; }
.legal-text h2 { font-size: var(--step-1); margin: 40px 0 10px; }
.legal-text .summary { padding: 18px 22px; border-radius: 6px; background: var(--rock); border-top: 2px solid var(--amber); color: var(--bone); margin: 0 0 30px; }
.legal-text p, .legal-text li { color: var(--dim); max-width: 66ch; }
.legal-text b { color: var(--bone); font-weight: 500; }
.legal-text ul { padding-left: 1.2em; }
.legal-text li { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media { animation: none; }
  .down svg { animation: none; }
  .rule .shot img { translate: none; }
  .rise, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .rule .shot img { transform: none !important; transition: none !important; }
  .silt { height: auto; }
  .silt .stage { position: relative; height: 80svh; }
  .silt .stage .milk { opacity: 0.85; }
  .silt .alarm, .silt .after { opacity: 1; }
}

/* =====================================================================================
   v2 (27.10): screens with bezel + ambient light, a lamp-on hero, a cinema for the stills
   ===================================================================================== */

/* ---------- brand: the app icon beside the wordmark ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px oklch(0.93 0.017 85 / 0.14), 0 6px 18px -6px oklch(0.78 0.085 190 / 0.45); }
.brand .wordmark { display: inline-flex; flex-direction: column; align-items: center; color: var(--bone); }
.brand .wordmark svg { width: 92px; height: 7px; margin-top: 3px; color: oklch(0.86 0.03 85); }
.foot .brand .wordmark b { font-size: 1.4rem; }

/* ---------- hero v2 ---------- */
.hero::after {
  background:
    linear-gradient(to top, var(--abyss) 0%, oklch(0.13 0.016 205 / 0.55) 18%, transparent 42%),
    linear-gradient(100deg, oklch(0.11 0.016 205 / 0.72) 0%, oklch(0.11 0.016 205 / 0.35) 34%, transparent 58%);
}
.hero-media { animation: lampon 2.4s linear both; }
@keyframes lampon {
  0% { filter: brightness(0); scale: 1.08; }
  14% { filter: brightness(0.6); } 18% { filter: brightness(0.08); }
  26% { filter: brightness(0.75); } 30% { filter: brightness(0.3); }
  48% { filter: brightness(1); }
  100% { filter: brightness(1); scale: 1; }
}
/* the lamp: a warm pool where you point, a soft vignette elsewhere; never a muddy veil */
.lamp {
  background:
    radial-gradient(circle at var(--lx, 62%) var(--ly, 42%), oklch(0.95 0.04 85 / 0.16) 0, oklch(0.95 0.04 85 / 0.05) 10vmax, transparent 22vmax),
    radial-gradient(circle at var(--lx, 62%) var(--ly, 42%), transparent 18vmax, oklch(0.08 0.016 205 / 0.42) 62vmax);
  mix-blend-mode: normal;
}
.hero .inner { padding-top: 120px; }
.title { margin: 0 0 22px; display: inline-flex; flex-direction: column; align-items: center; }
.t-name { font: 700 clamp(4.4rem, 2.4rem + 8.6vw, 10.5rem)/0.82 var(--display); letter-spacing: -0.012em; color: var(--bone); text-shadow: 0 6px 40px oklch(0.08 0.02 205 / 0.6); }
.t-line { width: 108%; height: 14px; margin: 14px 0 12px; overflow: visible; }
.t-line .rope { stroke: var(--rope); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.5s var(--ease-out) 1.1s forwards; }
.t-line .clip { fill: var(--amber); transform-box: fill-box; transform-origin: center; scale: 0; animation: clipon 0.5s var(--ease-out) 2.1s forwards; filter: drop-shadow(0 0 6px oklch(0.8 0.145 70 / 0.6)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes clipon { to { scale: 1; } }
.t-sub { font: 600 clamp(1rem, 0.7rem + 1.2vw, 1.7rem)/1 var(--display); letter-spacing: 0.6em; margin-right: -0.6em; text-transform: uppercase; color: var(--bone); }
.hero .t-name, .hero .t-sub { opacity: 0; animation: rise 1.2s var(--ease-out) 0.9s forwards; }
.hero .t-sub { animation-delay: 1.6s; }
.hero .tagline { opacity: 0; animation: rise 1.1s var(--ease-out) 1.9s forwards; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.hero .sub { opacity: 0; animation: rise 1.1s var(--ease-out) 2.1s forwards; }
.hero .cta { opacity: 0; animation: rise 1.1s var(--ease-out) 2.3s forwards; }
.hero-screen { display: none; }
@media (max-width: 899px) {
  .hero { align-items: center; }
  .hero-media { scale: 1.25; filter: blur(22px) brightness(0.5) saturate(1.2); animation: none; }
  .hero-media video { display: none; }
  .lamp { display: none; }
  .hero .inner { padding-top: 96px; padding-bottom: 72px; }
  .hero-screen { display: block; margin: 0 0 30px; }
  .title { display: flex; align-items: flex-start; }
  .t-line { width: 100%; }
  .t-sub { letter-spacing: 0.45em; }
}

/* ---------- screens: a bezel, glass, the light it throws, a glare that follows you ---------- */
.screen { position: relative; margin: 0; padding: clamp(5px, 0.6vw, 8px); border-radius: clamp(16px, 2vw, 26px); isolation: isolate;
  background: linear-gradient(155deg, oklch(0.34 0.02 200), oklch(0.15 0.018 205) 38%, oklch(0.12 0.016 205) 70%, oklch(0.26 0.02 200));
  box-shadow: 0 0 0 1px oklch(0.93 0.017 85 / 0.08), 0 50px 110px -40px oklch(0.03 0.02 205), 0 20px 40px -24px oklch(0.03 0.02 205);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.7s var(--ease-out); will-change: transform; }
.screen.tilting { transition: transform 0.12s linear; }
.screen .glass { position: relative; overflow: hidden; border-radius: clamp(11px, 1.5vw, 19px); aspect-ratio: 16 / 9; background: var(--rock); }
.screen .glass > img, .screen .glass > video { width: 100%; height: 100%; object-fit: cover; }
.screen .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08), inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 -60px 90px -50px oklch(0.05 0.02 205 / 0.55); }
.screen .ambient { position: absolute; inset: 4% 3% -6%; z-index: -1; width: 94%; height: 102%; border-radius: inherit; filter: blur(clamp(36px, 5vw, 70px)) saturate(1.6); opacity: 0.55; transform: translateZ(0); pointer-events: none; }
.screen .glare { position: absolute; inset: clamp(5px, 0.6vw, 8px); border-radius: clamp(11px, 1.5vw, 19px); pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.5s var(--ease-out);
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), oklch(1 0 0 / 0.13), transparent 42%); }
.screen:hover .glare { opacity: 1; }
.screen .chip { position: absolute; top: clamp(16px, 2vw, 26px); left: clamp(16px, 2vw, 26px); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 6px;
  font: 500 0.78rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); border-radius: 99px;
  background: oklch(0.12 0.016 205 / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.1); }
.screen .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--alarm); box-shadow: 0 0 8px var(--alarm); }
.screen figcaption { position: absolute; left: clamp(5px, 0.6vw, 8px); right: clamp(5px, 0.6vw, 8px); bottom: clamp(5px, 0.6vw, 8px); z-index: 3; border-radius: 0 0 clamp(11px, 1.5vw, 19px) clamp(11px, 1.5vw, 19px);
  padding: 48px 22px 18px; background: linear-gradient(transparent, oklch(0.08 0.02 205 / 0.88)); font-size: var(--step--1); color: var(--dim); }
.screen figcaption b { display: block; font: 600 1rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); margin-bottom: 2px; }
.reveal[data-r="rise-screen"] { opacity: 0; transform: perspective(1400px) translateY(60px) rotateX(10deg) scale(0.96); transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); }
.reveal[data-r="rise-screen"].in { opacity: 1; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.reveal[data-r="rise-screen"].in.settled { transition: transform 0.7s var(--ease-out); }

/* ---------- story + trailer ---------- */
.story-head { max-width: 980px; margin-bottom: clamp(44px, 6vw, 80px); }
.story-head h2 { font-size: var(--step-3); max-width: 22ch; }
.story-sec .screen.big { max-width: 1240px; }
.player { cursor: pointer; }
.player .play { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; border: 0; color: var(--bone); cursor: pointer;
  background: radial-gradient(circle at 50% 50%, oklch(0.1 0.02 205 / 0.15), oklch(0.08 0.02 205 / 0.55)); transition: background 0.4s var(--ease-out); }
.player .play:hover { background: radial-gradient(circle at 50% 50%, transparent, oklch(0.08 0.02 205 / 0.35)); }
.player .play span { display: grid; place-items: center; width: clamp(72px, 8vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--amber); color: var(--amber-ink);
  box-shadow: 0 0 0 12px oklch(0.8 0.145 70 / 0.16), 0 0 60px oklch(0.8 0.145 70 / 0.45); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); animation: breathe 3.2s ease-in-out infinite; }
.player .play:hover span { transform: scale(1.07); box-shadow: 0 0 0 18px oklch(0.8 0.145 70 / 0.12), 0 0 90px oklch(0.8 0.145 70 / 0.55); }
@keyframes breathe { 50% { box-shadow: 0 0 0 20px oklch(0.8 0.145 70 / 0.06), 0 0 70px oklch(0.8 0.145 70 / 0.35); } }
.player .play svg { width: 34%; height: 34%; margin-left: 6%; }
.player .play em { font: 600 0.95rem/1 var(--display); font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; }
body.theater .backdrop { background: oklch(0.07 0.012 205) !important; }
body.theater canvas.water { opacity: 0.25; }
canvas.water { transition: opacity 0.8s; }

/* ---------- rules v2 ---------- */
.rule .rule-text h3 { font-size: var(--step-3); margin-bottom: 16px; }
.silt .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.silt .words .num { font: 600 var(--step--1)/1 var(--display); letter-spacing: 0.18em; color: var(--faint); display: block; margin-bottom: 14px; }
.silt .words .num b { color: var(--amber); font-weight: 600; }

/* ---------- a lamp that follows the pointer over rows and cards ---------- */
.lit { position: relative; isolation: isolate; }
.lit::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease-out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), oklch(0.8 0.145 70 / 0.08), oklch(0.78 0.085 190 / 0.04) 40%, transparent 70%); }
.lit:hover::before { opacity: 1; }
.systems li { margin: 0 calc(-1 * clamp(12px, 2vw, 24px)); padding-left: clamp(12px, 2vw, 24px); padding-right: clamp(12px, 2vw, 24px); border-radius: 4px; }
.systems .n { transition: color 0.3s; } .systems li:hover .n { color: var(--amber); }
.cal { padding: 22px 24px 18px; border-radius: 0 0 8px 8px; background: linear-gradient(to bottom, oklch(0.2 0.02 200 / 0.35), transparent); }

/* ---------- cinema: one big screen, a rail of stills ---------- */
.cinema { margin-top: clamp(40px, 6vw, 72px); max-width: 1240px; }
.cinema .stage-btn { all: unset; position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; cursor: zoom-in; border-radius: clamp(11px, 1.5vw, 19px); overflow: hidden; background: var(--rock); }
.cinema .stage-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.cinema .stage-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinema .stage-btn .cur { animation: kb 9s linear both; }
.cinema .stage-btn .nxt { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.cinema .stage-btn .nxt.on { opacity: 1; }
@keyframes kb { from { scale: 1.06; } to { scale: 1; } }
.cinema .step { position: absolute; top: 50%; z-index: 4; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--bone);
  border: 1px solid oklch(1 0 0 / 0.16); background: oklch(0.12 0.016 205 / 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s, background 0.3s; }
.cinema .step svg { width: 18px; height: 18px; }
.cinema .step.prev { left: clamp(14px, 2vw, 26px); } .cinema .step.next { right: clamp(14px, 2vw, 26px); }
.cinema .screen:hover .step, .cinema .step:focus-visible { opacity: 1; }
.cinema .step:hover { background: oklch(0.12 0.016 205 / 0.8); }
@media (hover: none) { .cinema .step { opacity: 1; width: 44px; height: 44px; } }
.cinema-cap { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; margin: 22px 0 16px; }
.cinema-cap .count { font-size: 1.4rem; color: var(--amber); }
.cinema-cap .cap { font: 500 var(--step-1)/1.2 var(--display); color: var(--bone); }
.cinema-cap .progress { grid-column: 1 / -1; height: 2px; background: var(--rock-2); position: relative; overflow: hidden; border-radius: 2px; }
.cinema-cap .progress::after { content: ""; position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(var(--p, 0)); }
.rail { list-style: none; margin: 0; padding: 4px 4px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(118px, 13vw, 168px); gap: 10px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rock-2) transparent; }
.rail li { scroll-snap-align: start; }
.rail button { all: unset; display: block; cursor: pointer; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; opacity: 0.5; transition: opacity 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out); }
.rail button:hover { opacity: 0.85; transform: translateY(-2px); }
.rail button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--amber), 0 8px 24px -8px oklch(0.8 0.145 70 / 0.5); }
.rail button:focus-visible { box-shadow: 0 0 0 2px var(--bone); }
.rail img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- a handheld for the phone recording (generic, not a product render) ---------- */
.handheld { position: relative; margin: 0; padding: clamp(8px, 1vw, 12px); border-radius: clamp(28px, 3.6vw, 46px); isolation: isolate;
  background: linear-gradient(150deg, oklch(0.3 0.008 220), oklch(0.12 0.006 220) 30%, oklch(0.08 0.006 220) 70%, oklch(0.24 0.008 220));
  box-shadow: 0 0 0 1px oklch(0.6 0.01 220 / 0.35), inset 0 0 0 2px oklch(0.05 0.006 220), 0 60px 120px -40px oklch(0.03 0.02 205);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, -6deg)); transition: transform 0.7s var(--ease-out); }
.handheld .glass { position: relative; overflow: hidden; border-radius: clamp(20px, 2.8vw, 36px); aspect-ratio: 1920 / 886; background: #070a0a; }
.handheld .glass video { width: 100%; height: 100%; object-fit: cover; }
.handheld .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.06); background: linear-gradient(115deg, oklch(1 0 0 / 0.07), transparent 30%); }
.handheld .ambient { position: absolute; inset: 6% 4% -4%; z-index: -1; width: 92%; height: 98%; filter: blur(60px) saturate(1.6); opacity: 0.5; pointer-events: none; }
.handheld .glare { position: absolute; inset: clamp(8px, 1vw, 12px); border-radius: clamp(20px, 2.8vw, 36px); pointer-events: none; opacity: 0; transition: opacity 0.5s; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), oklch(1 0 0 / 0.12), transparent 42%); }
.handheld:hover .glare { opacity: 1; }
.handheld figcaption { position: absolute; left: 0; right: 0; top: calc(100% + 18px); font-size: var(--step--1); color: var(--faint); }
.devices { margin-bottom: 40px; }

/* ---------- free to try ---------- */
.deal .big { display: block; font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: 0.8; color: var(--amber); margin-bottom: 10px; text-shadow: 0 0 30px oklch(0.8 0.145 70 / 0.35); }
.deal div:nth-child(2) .big { color: var(--water); text-shadow: 0 0 30px oklch(0.78 0.085 190 / 0.35); }
.deal div:nth-child(3) .big { color: var(--bone); text-shadow: none; }
.deal div { border-top-color: var(--seam); }

/* ---------- surfacing: light from above ---------- */
.surface .rays { position: absolute; inset: -10% -20% 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; transform-origin: 50% 0;
  background: repeating-conic-gradient(from 168deg at 50% -18%, transparent 0deg 4deg, oklch(0.93 0.04 190 / 0.07) 6deg, transparent 9deg 13deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%); mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  animation: sway 14s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -3deg; } to { rotate: 3deg; } }
.surface .icon { width: 112px; height: 112px; border-radius: 26px; margin: 0 auto 28px; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.14), 0 20px 60px -10px oklch(0.78 0.085 190 / 0.55); }

@media (prefers-reduced-motion: reduce) {
  .hero-media, .hero .t-name, .hero .t-sub, .hero .tagline, .hero .sub, .hero .cta { animation: none !important; opacity: 1 !important; filter: none; }
  .t-line .rope { animation: none; stroke-dashoffset: 0; } .t-line .clip { animation: none; scale: 1; }
  .screen, .handheld { transform: none !important; }
  .reveal[data-r="rise-screen"] { opacity: 1; transform: none; }
  .cinema .stage-btn .cur, .surface .rays, .player .play span { animation: none; }
}
.hero-screen video { opacity: 1; }
.store .steam { display: block; margin-top: 10px; font: 500 0.92rem/1.3 var(--display); letter-spacing: 0.06em; color: var(--faint); }
a.steam { color: var(--dim); text-decoration: underline; text-underline-offset: 0.25em; }
.store { flex-direction: column; }
/* the hero melts into whatever depth colour the water has at the top, so there is no seam */
.hero::after {
  background:
    linear-gradient(to top, var(--depth-bg, var(--abyss)) 0%, color-mix(in oklch, var(--depth-bg, var(--abyss)) 55%, transparent) 16%, transparent 40%),
    linear-gradient(100deg, oklch(0.11 0.016 205 / 0.72) 0%, oklch(0.11 0.016 205 / 0.35) 34%, transparent 58%);
}
.title { margin-bottom: 34px; }
/* pass 2 (27.10): bigger screens, the phone large with the features under it */
@media (min-width: 960px) {
  .rule { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); }
  .rule.flip { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.75fr); }
  .find { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.devices { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: clamp(70px, 9vw, 120px); }
.handheld { width: min(100%, 1060px); }
.features { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 32px; width: 100%; max-width: 1240px; }
.features li { border-top: 1px solid var(--seam); }
.langs { max-width: 1240px; }
.gauge.off { opacity: 0 !important; transform: translateY(10px) !important; }
@media (min-width: 960px) { .rule.flip .screen { order: 2; } }

/* =====================================================================================
   v3 (27.10): full-bleed hero on every screen, a trailer that opens to the window,
   rules as cinematic scenes, words that rise, a lamp that follows you down the page
   ===================================================================================== */

/* hero: moving footage on phones too (a portrait crop), never a blurred still */
@media (max-width: 899px) {
  .hero { align-items: end; }
  .hero-media { scale: 1; filter: none; animation: lampon 2.4s linear both; }
  .hero-media video { display: block; }
  .lamp { display: block; }
  .hero::after { background: linear-gradient(to top, var(--depth-bg, var(--abyss)) 0%, oklch(0.11 0.016 205 / 0.75) 34%, oklch(0.11 0.016 205 / 0.15) 62%, oklch(0.11 0.016 205 / 0.35) 100%); }
  .hero .inner { padding-top: 40vh; padding-bottom: 64px; }
  .title { display: inline-flex; align-items: center; }
}

/* ---------- the trailer opens up as you scroll ---------- */
.expand { position: relative; height: 230vh; margin-top: clamp(-40px, -3vw, 0px); }
.expand .pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.xscreen { --e: 0; width: min(calc((64% + 36% * var(--e))), calc(100svh * 16 / 9 + 0px)); max-width: none;
  padding: calc(8px * (1 - var(--e))); border-radius: calc(26px * (1 - var(--e)));
  transform: none !important; transition: none; }
.xscreen .glass { border-radius: calc(19px * (1 - var(--e))); }
.xscreen .glass > video.tease { width: 100%; height: 100%; object-fit: cover; }
.xscreen .ambient { opacity: calc(0.6 - 0.45 * var(--e)); }
.xscreen .chip { opacity: calc(1 - var(--e) * 0.6); }
.xscreen .play { background: radial-gradient(circle at 50% 50%, transparent 0, oklch(0.08 0.02 205 / calc(0.45 - 0.3 * var(--e))) 100%); }
@media (max-width: 899px) { .xscreen { width: calc(88% + 12% * var(--e)); } .expand { height: 170vh; } }

/* ---------- cinematic scenes ---------- */
.scene { position: relative; min-height: max(88svh, 560px); display: grid; align-items: end; overflow: hidden; isolation: isolate; margin: 0; }
.scene > video { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; z-index: -2;
  scale: var(--z, 1.1); translate: 0 var(--py, 0px); will-change: scale, translate; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--depth-bg, var(--abyss)) 0%, oklch(0.1 0.016 205 / 0.55) 30%, transparent 62%),
              linear-gradient(to bottom, var(--depth-bg, var(--abyss)) 0%, transparent 18%),
              linear-gradient(90deg, oklch(0.09 0.016 205 / 0.75) 0%, oklch(0.09 0.016 205 / 0.2) 45%, transparent 70%); }
.scene.right::after { background: linear-gradient(to top, var(--depth-bg, var(--abyss)) 0%, oklch(0.1 0.016 205 / 0.55) 30%, transparent 62%),
              linear-gradient(to bottom, var(--depth-bg, var(--abyss)) 0%, transparent 18%),
              linear-gradient(270deg, oklch(0.09 0.016 205 / 0.75) 0%, oklch(0.09 0.016 205 / 0.2) 45%, transparent 70%); }
.scene-text { padding: 0 var(--gutter) clamp(56px, 9vh, 110px) var(--content-x); max-width: calc(var(--content-x) + 620px); }
.scene.right .scene-text { justify-self: end; padding-left: var(--gutter); padding-right: clamp(24px, 6vw, 110px); }
.scene .num { font: 600 var(--step--1)/1 var(--display); letter-spacing: 0.18em; color: var(--faint); display: block; margin-bottom: 14px; }
.scene .num b { color: var(--amber); font-weight: 600; }
.scene h3 { font-size: var(--step-4); line-height: 0.92; margin-bottom: 18px; text-shadow: 0 4px 40px oklch(0.06 0.02 205 / 0.7); }
.scene p { color: var(--bone); opacity: 0.86; font-size: var(--step-1); line-height: 1.45; text-shadow: 0 1px 12px oklch(0.06 0.02 205 / 0.8); }
.scene .thirds { margin-top: 22px; }
.scene.in .thirds .bar i::after, .scene-text.in .thirds .bar i::after { transform: scaleX(1); }
.silt-sec { padding-top: 0; padding-bottom: 0; }
.silt-sec .silt { margin-top: 0; }
#rules { padding-bottom: clamp(56px, 8vw, 100px); }

/* ---------- words rise into place ---------- */
.rw .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rw .w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--wi, 0) * 45ms + 80ms); }
.in .rw .w > span, .rw.in .w > span, .reveal.in .w > span, .surface .in .w > span { transform: none; }

/* ---------- a lamp that follows you down the page (desktop) ---------- */
.pagelamp { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(520px circle at var(--px, 50%) var(--py2, 50%), oklch(0.95 0.04 85 / 0.07), oklch(0.85 0.06 190 / 0.025) 45%, transparent 70%); mix-blend-mode: screen; }
.pagelamp.on { opacity: 1; }
@media (pointer: coarse) { .pagelamp { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .rw .w > span { transform: none !important; transition: none; }
  .scene > video { scale: 1; translate: none; }
  .expand { height: auto; } .expand .pin { position: relative; height: auto; padding: 40px 0; }
  .xscreen { --e: 0.6; }
}
/* the trailer plays muted behind its own captions: keep the button low so it never covers them */
.xscreen .player .play { place-content: end center; padding-bottom: clamp(18px, 7%, 64px); }
.xscreen .player .play span { width: clamp(58px, 6vw, 84px); }
/* the trailer screen: footage plays on its own; a small pill asks for sound instead of a big button over the picture */
.xscreen .player .play.pill { inset: auto auto clamp(14px, 3%, 30px) clamp(14px, 3%, 30px); display: inline-flex; place-content: initial; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px; border-radius: 99px; background: oklch(0.12 0.016 205 / 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14); }
.xscreen .player .play.pill:hover { background: oklch(0.12 0.016 205 / 0.85); }
.xscreen .player .play.pill span { width: 40px; animation: none; box-shadow: 0 0 24px oklch(0.8 0.145 70 / 0.5); }
.xscreen .player .play.pill em { font-size: 0.92rem; letter-spacing: 0.16em; }
.xscreen .chip { left: auto; right: clamp(16px, 2vw, 26px); }
.story-sec { padding-bottom: clamp(24px, 4vw, 48px); }
.expand .pin { place-items: center; }
/* phones: no pinning (it left an empty window); the screen simply sits under the story, nearly full width */
@media (max-width: 899px) {
  .expand { height: auto; margin: 0; }
  .expand .pin { position: relative; height: auto; overflow: visible; padding: 0 0 clamp(40px, 10vw, 72px); }
  .xscreen { width: calc(100% - 2 * var(--gutter)) !important; translate: none !important; }
}
@media (max-width: 899px) {
  .xscreen .player .play.pill { padding: 5px 12px 5px 5px; gap: 7px; inset: auto auto 10px 10px; }
  .xscreen .player .play.pill span { width: 30px; }
  .xscreen .player .play.pill em { font-size: 0.72rem; letter-spacing: 0.12em; }
  .xscreen .chip { display: none; }
}

/* ---------- about page list, and the "last updated" line on the inner pages ---------- */
.page ul.dim { padding-left: 1.2em; margin: 0; }
.page ul.dim li { margin: 0 0 0.6em; line-height: 1.55; }
.page .updated { margin-top: clamp(48px, 6vw, 72px); font-size: var(--step--1); letter-spacing: 0.02em; }

/* ---------- a clip's still sits on top until the clip has drawn its first frame (site.js), then fades away ---------- */
img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 0.45s var(--ease-out); }
img.still.gone { opacity: 0; }
.scene > img.still { inset: -6% 0; height: 112%; z-index: -2; scale: var(--z, 1.1); translate: 0 var(--py, 0px); }
@media (prefers-reduced-motion: reduce) { .scene > img.still { scale: 1; translate: none; } }

/* ---------- news list: the sign-up form, and the confirm / unsubscribe page ---------- */
.news { margin: 34px auto 0; max-width: 520px; text-align: left; }
.news label { display: block; color: var(--bone); font-size: var(--step-0); line-height: 1.45; margin-bottom: 12px; }
.news .sr, .news-page .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.news-row { display: flex; gap: 10px; flex-wrap: wrap; }
.news-row input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--seam);
  background: oklch(0.12 0.016 205 / 0.75); color: var(--bone); font: inherit; font-size: 16px; }
.news-row input::placeholder { color: var(--faint); }
.news-row input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-color: transparent; }
.news-row .btn { min-height: 48px; flex: 0 0 auto; }
.news .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.news .fine { margin: 10px 0 0; font-size: var(--step--1); color: var(--faint); }
.news .fine a { color: var(--dim); }
.news .msg, .news-state .msg { min-height: 1.4em; margin: 12px 0 0; font-size: var(--step-0); color: var(--bone); }
.news .msg[data-kind="err"], .news-state .msg[data-kind="err"] { color: oklch(0.78 0.13 35); }
.news .msg[data-kind="ok"] { color: var(--amber); }
.news.done .news-row, .news.done .fine { display: none; }
.surface .news { margin-top: 40px; }
.page .news { margin: 8px 0 0; }
.news-page { min-height: 78svh; }
.news-page .news { margin: 30px 0 0; }
.news-act { margin-top: 28px; }
@media (max-width: 520px) { .news-row .btn { width: 100%; justify-content: center; } }
.surface .news label, .surface .news .fine, .surface .news .msg { text-align: center; }