/* THNK GOD — marketing + legal site
   Deliberately zero third-party requests: no webfonts, no analytics, no CDNs.
   A site whose subject is privacy shouldn't phone anyone to render itself. */

:root {
  --navy-deep: #070d20;
  --navy: #0d1530;
  --navy-panel: #111a38;
  --gold: #e0b76a;
  --gold-bright: #ffd166;
  --ink: rgba(255, 255, 255, 0.9);
  --ink-soft: rgba(255, 255, 255, 0.64);
  --ink-faint: rgba(255, 255, 255, 0.44);
  --rule: rgba(255, 200, 80, 0.16);
  --rule-soft: rgba(255, 255, 255, 0.08);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --page: 1040px;
  --prose: 68ch;
}

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

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

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

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--gold-bright);
  text-decoration-color: rgba(255, 209, 102, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--gold-bright);
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--navy-panel);
  padding: 10px 16px;
  border-radius: 8px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */

.site-header {
  position: relative;
  z-index: 2;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}

.brand span {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.site-nav {
  display: flex;
  gap: 26px;
  font-size: 15px;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--gold-bright);
}

/* ---------- hero ---------- */

/* The tall bottom padding is load-bearing, not whitespace. The sky fills the
   hero, so the ridgeline always lands at ~62% of the hero's height; without
   room below the copy, the lede crosses the back ridge's rim-light. */
.hero {
  position: relative;
  text-align: center;
  padding: 112px 0 250px;
  overflow: hidden;
  isolation: isolate;
}

.hero-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Scrim, kept OFF the sun. The first version centred a 66%-opaque wash at
   42% height — directly over the sun at 23.7% — and erased it completely
   along with most of the mountains' contrast. This one sits low and light,
   and the copy leans on its own text-shadow instead. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 66% 42% at 50% 62%,
    rgba(7, 13, 32, 0.4),
    rgba(7, 13, 32, 0.16) 58%,
    transparent 82%
  );
}

.hero .tagline,
.hero .lede {
  text-shadow: 0 1px 14px rgba(7, 13, 32, 0.85);
}

/* Section heading with the app icon beside it. The icon runs the FULL height
   of the heading and its lede rather than sitting as a small square against
   the heading alone — so it squares off the whole block, and it re-measures
   itself when the lede rewraps at a different width. */
.section-head {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 44px;
}

.section-mark {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
}

/* aspect-ratio and object-fit are the guards: stretching a square to the
   text block's height means its WIDTH comes from that height, which is a
   circular dependency in a flex row — the text's height depends on the
   width left over after the icon takes its share. On a narrow screen the
   browser resolves that badly, and the icon came out squeezed with the
   section overflowing sideways. A hard max-height breaks the circle. */
.section-mark img {
  height: 100%;
  width: auto;
  max-height: 132px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 209, 102, 0.16);
}

/* Below this the stretch is abandoned outright: there is not enough width to
   spend a square icon's worth on it, and a fixed size cannot deform. */
@media (max-width: 700px) {
  .section-head {
    align-items: flex-start;
  }

  .section-mark {
    align-self: flex-start;
  }

  .section-mark img {
    height: 68px;
    width: 68px;
    max-height: none;
  }
}

.section-head-text {
  min-width: 0;
}

/* The front ridge is rgb(16,12,28) and the page is rgb(7,13,32) — close, but
   a hard edge is still an edge. This dissolves the join. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--navy-deep));
}

.hero .wrap {
  position: relative;
  z-index: 3;
}

/* ---------- panorama motion ----------
   Only transform and opacity animate, so every one of these stays on the
   compositor and none of them triggers layout or paint. */

.stars circle {
  fill: rgb(255, 246, 226);
  opacity: 0.3;
  animation: twinkle 4.4s ease-in-out infinite;
}

.stars circle:nth-child(3n) {
  animation-duration: 6.2s;
  animation-delay: -1.6s;
}

.stars circle:nth-child(3n + 1) {
  animation-duration: 5.1s;
  animation-delay: -3.4s;
}

.stars circle:nth-child(5n) {
  animation-duration: 7.6s;
  animation-delay: -0.7s;
}

.stars circle:nth-child(7n) {
  animation-duration: 3.6s;
  animation-delay: -2.2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.92;
  }
}

/* Rare by construction: the streak is only visible for the first ~8% of a
   long timeline, so the rest of the cycle is empty sky. */
/* Each streak carries its own POSITION in its keyframes and flashes in three
   different places per cycle. Previously the two elements sat inside fixed
   translate() wrappers and only travelled along a fixed vector, so a streak
   always appeared in one of exactly two spots — noticeable within a minute,
   which is how Kenam spotted it.

   Nine spots across three cycles of 71/97/113s, each visible for under 2% of
   its timeline. The periods share no small factors, so the combined pattern
   takes hours to repeat. Between flashes the transform interpolates from one
   spot to the next, which is invisible because opacity is 0 the whole way. */
.shooter {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

.shooter-a {
  animation-name: shoot-a;
  animation-duration: 71s;
}

.shooter-b {
  animation-name: shoot-b;
  animation-duration: 97s;
  animation-delay: 23s;
}

.shooter-c {
  animation-name: shoot-c;
  animation-duration: 113s;
  animation-delay: 51s;
}

@keyframes shoot-a {
  0%    { opacity: 0;    transform: translate(210px, 74px) rotate(22deg) translateX(-130px); }
  0.5%  { opacity: 0.85; }
  2.2%  { opacity: 0;    transform: translate(210px, 74px) rotate(22deg) translateX(360px); }
  33%   { opacity: 0;    transform: translate(880px, 128px) rotate(14deg) translateX(-130px); }
  33.5% { opacity: 0.85; }
  35.2% { opacity: 0;    transform: translate(880px, 128px) rotate(14deg) translateX(360px); }
  67%   { opacity: 0;    transform: translate(455px, 232px) rotate(29deg) translateX(-130px); }
  67.5% { opacity: 0.85; }
  69.2% { opacity: 0;    transform: translate(455px, 232px) rotate(29deg) translateX(360px); }
  100%  { opacity: 0;    transform: translate(455px, 232px) rotate(29deg) translateX(360px); }
}

@keyframes shoot-b {
  0%    { opacity: 0;    transform: translate(1090px, 52px) rotate(31deg) translateX(-130px); }
  0.5%  { opacity: 0.8; }
  2%    { opacity: 0;    transform: translate(1090px, 52px) rotate(31deg) translateX(360px); }
  38%   { opacity: 0;    transform: translate(96px, 176px) rotate(12deg) translateX(-130px); }
  38.5% { opacity: 0.8; }
  40%   { opacity: 0;    transform: translate(96px, 176px) rotate(12deg) translateX(360px); }
  72%   { opacity: 0;    transform: translate(700px, 42px) rotate(25deg) translateX(-130px); }
  72.5% { opacity: 0.8; }
  74%   { opacity: 0;    transform: translate(700px, 42px) rotate(25deg) translateX(360px); }
  100%  { opacity: 0;    transform: translate(700px, 42px) rotate(25deg) translateX(360px); }
}

@keyframes shoot-c {
  0%    { opacity: 0;    transform: translate(1290px, 208px) rotate(18deg) translateX(-130px); }
  0.5%  { opacity: 0.82; }
  2.1%  { opacity: 0;    transform: translate(1290px, 208px) rotate(18deg) translateX(360px); }
  41%   { opacity: 0;    transform: translate(330px, 118px) rotate(34deg) translateX(-130px); }
  41.5% { opacity: 0.82; }
  43.1% { opacity: 0;    transform: translate(330px, 118px) rotate(34deg) translateX(360px); }
  78%   { opacity: 0;    transform: translate(985px, 262px) rotate(9deg) translateX(-130px); }
  78.5% { opacity: 0.82; }
  80.1% { opacity: 0;    transform: translate(985px, 262px) rotate(9deg) translateX(360px); }
  100%  { opacity: 0;    transform: translate(985px, 262px) rotate(9deg) translateX(360px); }
}

/* Periods are dawn-sun.tsx's own: RAY_SPIN_SECONDS 420, GLOW_PULSE_SECONDS 8
   per direction, and the three ray subsets breathing on 2100/2500/1800ms
   half-cycles so they shimmer out of step with each other.

   transform-box: view-box so the origins read in viewBox units — without it
   they resolve against each element's own bounding box and the rays wobble
   around themselves instead of around the sun. */
.sun-halo,
.sun-rays,
.ray-a,
.ray-b,
.ray-c {
  transform-box: view-box;
  transform-origin: 720px 150px;
}

.sun-rays {
  animation: spin 420s linear infinite;
}

.sun-halo {
  animation: pulse 16s ease-in-out infinite;
}

.ray-a {
  animation: shimmer 4.2s ease-in-out infinite;
}

.ray-b {
  animation: shimmer 5s ease-in-out infinite;
  animation-delay: -1.7s;
}

.ray-c {
  animation: shimmer 3.6s ease-in-out infinite;
  animation-delay: -2.9s;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* RAY_BREATHE_AMP 0.12 and RAY_BREATHE_OP 0.26. */
@keyframes shimmer {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.74;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* TWO FLOCKS. Every bird in a flock shares its flock's duration and differs
   only by delay, which is what makes them cross together in a trailing line
   instead of arriving alone — bird-flock.tsx staggers a group by
   delayMs = i * (600 + rand*800), and spawns a new group every 15-45s rather
   than keeping birds permanently in frame.

   Each bird crosses in the first ~18% of its cycle and then parks off-screen,
   so between flocks the sky is genuinely empty. Scale 0.32-0.4: the app's
   birds are 7-9px on a 390px phone, about 7 units at this scene's scale. */
.bird {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Slower. The crossing used to take ~11s for 1580 units; it now takes ~26s,
   which is closer to a bird's pace and stops them reading as darting. */
.a1,
.a2,
.a3,
.a4 {
  animation-duration: 104s;
}

.b1,
.b2,
.b3 {
  animation-duration: 137s;
}

/* SOARING, not bobbing. Composed with the horizontal travel by animating the
   <use> INSIDE the travelling <g> — two elements, two transforms, no
   conflict.

   The first attempt took bird-flock.tsx's bobDurMs (1500-3000ms) literally
   and ran a symmetrical up-down at ~2s. On a phone that period reads as a
   wingbeat; at this scale it read as a metronome. Three things fix it:

   - The period stretches to 9-17s, so a bird undulates perhaps twice in the
     26s it takes to cross rather than a dozen times.
   - The waypoints are UNEVEN in both time and height, so the path wanders
     instead of oscillating — a bird riding a current does not return to the
     same altitude on a fixed beat.
   - A few degrees of bank, rotating about the bird's own centre. That is the
     detail that actually sells the glide; a body that tilts as it rises and
     falls is being carried, one that only translates is being animated. */
.bird use {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-name: soar-1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
}

/* AMPLITUDE is what went missing. The first pass was fast and small and read
   as a metronome; slowing it down without widening the arc just made it read
   as still, because the whole excursion was under one bird-length. These
   travel roughly five bird-heights, which at this scale is ~40px on screen —
   enough to see, slow enough to be a glide. The periods come in a little
   from 9-17s to 6.5-11s so the motion is perceptible without hurrying. */
.a1 use { animation-name: soar-1; animation-duration: 8.5s; }
.a2 use { animation-name: soar-2; animation-duration: 7s;    animation-delay: -2.6s; }
.a3 use { animation-name: soar-3; animation-duration: 10s;   animation-delay: -4.1s; }
.a4 use { animation-name: soar-2; animation-duration: 7.5s;  animation-delay: -5.9s; }
.b1 use { animation-name: soar-3; animation-duration: 11s; }
.b2 use { animation-name: soar-1; animation-duration: 6.5s;  animation-delay: -3.3s; }
.b3 use { animation-name: soar-2; animation-duration: 9.5s;  animation-delay: -7.2s; }

@keyframes soar-1 {
  0%   { transform: translateY(-24px) rotate(-3.4deg); }
  17%  { transform: translateY(-48px) rotate(-1.2deg); }
  36%  { transform: translateY(-30px) rotate(2deg); }
  57%  { transform: translateY(24px)  rotate(4deg); }
  74%  { transform: translateY(44px)  rotate(1.6deg); }
  89%  { transform: translateY(10px)  rotate(-2deg); }
  100% { transform: translateY(-24px) rotate(-3.4deg); }
}

@keyframes soar-2 {
  0%   { transform: translateY(30px)  rotate(3.2deg); }
  21%  { transform: translateY(7px)   rotate(0.6deg); }
  44%  { transform: translateY(-40px) rotate(-3.8deg); }
  62%  { transform: translateY(-20px) rotate(-1.8deg); }
  81%  { transform: translateY(38px)  rotate(3.4deg); }
  100% { transform: translateY(30px)  rotate(3.2deg); }
}

@keyframes soar-3 {
  0%   { transform: translateY(-14px) rotate(-1.6deg); }
  26%  { transform: translateY(34px)  rotate(3.8deg); }
  41%  { transform: translateY(20px)  rotate(1.8deg); }
  63%  { transform: translateY(-44px) rotate(-4.2deg); }
  85%  { transform: translateY(-7px)  rotate(-0.7deg); }
  100% { transform: translateY(-14px) rotate(-1.6deg); }
}

.a1 { animation-name: fa1; }
.a2 { animation-name: fa2; animation-delay: 1.2s; }
.a3 { animation-name: fa3; animation-delay: 2.5s; }
.a4 { animation-name: fa4; animation-delay: 3.4s; }
.b1 { animation-name: fb1; animation-delay: 40s; }
.b2 { animation-name: fb2; animation-delay: 41.3s; }
.b3 { animation-name: fb3; animation-delay: 42.4s; }

@keyframes fa1 {
  0%   { transform: translate(-60px, 300px) scale(0.38); }
  9%   { transform: translate(700px, 288px) scale(0.38); }
  18%  { transform: translate(1520px, 302px) scale(0.38); }
  100% { transform: translate(1520px, 302px) scale(0.38); }
}

@keyframes fa2 {
  0%   { transform: translate(-60px, 312px) scale(0.34); }
  9%   { transform: translate(700px, 302px) scale(0.34); }
  18%  { transform: translate(1520px, 314px) scale(0.34); }
  100% { transform: translate(1520px, 314px) scale(0.34); }
}

@keyframes fa3 {
  0%   { transform: translate(-60px, 292px) scale(0.4); }
  9%   { transform: translate(700px, 279px) scale(0.4); }
  18%  { transform: translate(1520px, 295px) scale(0.4); }
  100% { transform: translate(1520px, 295px) scale(0.4); }
}

@keyframes fa4 {
  0%   { transform: translate(-60px, 320px) scale(0.33); }
  9%   { transform: translate(700px, 310px) scale(0.33); }
  18%  { transform: translate(1520px, 322px) scale(0.33); }
  100% { transform: translate(1520px, 322px) scale(0.33); }
}

@keyframes fb1 {
  0%   { transform: translate(-60px, 252px) scale(0.36); }
  8%   { transform: translate(720px, 264px) scale(0.36); }
  16%  { transform: translate(1520px, 250px) scale(0.36); }
  100% { transform: translate(1520px, 250px) scale(0.36); }
}

@keyframes fb2 {
  0%   { transform: translate(-60px, 262px) scale(0.32); }
  8%   { transform: translate(720px, 275px) scale(0.32); }
  16%  { transform: translate(1520px, 260px) scale(0.32); }
  100% { transform: translate(1520px, 260px) scale(0.32); }
}

@keyframes fb3 {
  0%   { transform: translate(-60px, 244px) scale(0.35); }
  8%   { transform: translate(720px, 256px) scale(0.35); }
  16%  { transform: translate(1520px, 242px) scale(0.35); }
  100% { transform: translate(1520px, 242px) scale(0.35); }
}

/* The panorama is decoration. Anyone who has asked their OS to stop moving
   things gets the same scene, held still. */
@media (prefers-reduced-motion: reduce) {
  .stars circle,
  .shooter,
  .sun-halo,
  .sun-rays,
  .ray-a,
  .ray-b,
  .ray-c,
  .bird,
  .bird use {
    animation: none;
  }

  .stars circle {
    opacity: 0.6;
  }

  .shooter {
    opacity: 0;
  }
}

/* The wordmark replaces both the app icon and the typeset H1. The hands land
   on the sun the way home does it: the sky's sun sits at viewBox y=180 of
   760, so at hero height Hh it renders at 0.237*Hh from the top, and the
   sun-anchor point inside this image is ~24% down — the middle of the hands,
   where the two palms meet. The app's own LOGO_HANDS_OFFSET_Y (0.5 of the
   uncropped source, 43.1% of this alpha-cropped one) lands at the WRISTS
   instead, because home also sits its sun higher than the anchor
   (SUN_Y_FRAC 0.237 vs LOGO_SUN_ANCHOR_Y 0.28). Matching one constant
   without the other put the sun under the hands rather than between them.
   The sun moved up to viewBox y=150 and the hero's top padding brings the
   two together. */
.hero-mark {
  margin: 0 0 18px;
  line-height: 0;
}

.hero-mark img {
  display: block;
  width: min(330px, 74vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 26px rgba(7, 13, 32, 0.5));
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 8vw, 60px);
  letter-spacing: 0.16em;
  margin: 0 0 18px;
  color: var(--gold);
  line-height: 1.1;
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 3.4vw, 24px);
  color: var(--ink);
  margin: 0 auto 22px;
  max-width: 30ch;
  line-height: 1.45;
}

.hero p.lede {
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 auto 32px;
}

.pill {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(224, 183, 106, 0.06);
}

/* ---------- verse band ---------- */

.verse {
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(255, 255, 255, 0.015);
  padding: 52px 0;
  text-align: center;
}

.verse blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 3.6vw, 27px);
  line-height: 1.5;
  color: var(--ink);
}

.verse cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- sections ---------- */

section.band {
  padding: 76px 0;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 4.6vw, 34px);
  color: var(--gold);
  margin: 0 0 14px;
  line-height: 1.25;
}

.section-lede {
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 44px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0.012)
  );
  padding: 26px 24px;
}

.card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  margin: 0 0 10px;
  color: var(--ink);
}

.card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Utility classes rather than inline style="" attributes: the CSP in
   vercel.json sets style-src 'self', which blocks inline style attributes
   too. Keep it that way — add a class here instead of loosening the policy. */

.band-ruled {
  border-top: 1px solid var(--rule-soft);
}

.centered {
  text-align: center;
}

.section-lede.flush {
  margin-bottom: 0;
}

.section-lede.centered {
  margin: 0 auto 26px;
}

.stack-top {
  margin-top: 22px;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: start;
}

ul.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  color: var(--ink-soft);
}

ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.75;
}

/* ---------- screenshot rail ---------- */

/* Scrolls inside its own container so the page body never scrolls
   horizontally, at any width. The partially-visible next card is the
   affordance — no arrows, no hint copy. */

.shots-rail {
  max-width: var(--page);
  margin: 0 auto;
}

.shots {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px 24px 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 200, 80, 0.35) transparent;
}

.shots::-webkit-scrollbar {
  height: 8px;
}

.shots::-webkit-scrollbar-track {
  background: transparent;
}

.shots::-webkit-scrollbar-thumb {
  background: rgba(255, 200, 80, 0.28);
  border-radius: 4px;
}

.shot {
  flex: 0 0 auto;
  width: 232px;
  margin: 0;
  scroll-snap-align: center;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  background: var(--navy);
}

.shot figcaption {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .shot {
    width: 208px;
  }

  .shots {
    gap: 18px;
  }
}

/* ---------- prose (legal + support pages) ---------- */

.prose {
  max-width: var(--prose);
  margin: 0 auto;
  padding: 64px 0 88px;
}

.prose h1 {
  font-size: clamp(30px, 5.6vw, 42px);
  letter-spacing: 0.02em;
  text-align: left;
  margin-bottom: 10px;
}

.prose .updated {
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

.prose h2 {
  font-size: 24px;
  margin: 44px 0 12px;
  letter-spacing: 0.01em;
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin: 32px 0 8px;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose p {
  margin: 0 0 16px;
}

.prose ul {
  padding-left: 22px;
  margin: 0 0 16px;
}

.prose li {
  margin-bottom: 10px;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.callout {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(224, 183, 106, 0.05);
  padding: 20px 22px;
  margin: 28px 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule-soft);
  padding: 46px 0 56px;
  color: var(--ink-faint);
  font-size: 14.5px;
}

.site-footer .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer .legal p {
  margin: 0 0 4px;
}

.site-footer .legal .entity {
  color: var(--ink-soft);
  font-family: var(--serif);
  letter-spacing: 0.04em;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--gold-bright);
}

.site-footer .copyright {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13.5px;
}

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }

  /* Top padding is what aligns the hands to the sun, and it is NOT free to
     copy from the desktop value: the sky is scaled to the hero, so the sun's
     distance from the top is 150/760 of the hero height, and raising the
     padding raises the hero, which lowers the sun. Solving that circle at a
     512px viewport (measured: hands 42px above the sun, hero 812, wordmark
     275 tall, sun anchor 24% down it):

       P + 0.24*275 = 150 * (P + 760) / 760   ->   P = 105

     At 390px the wordmark is shorter but the copy wraps longer, and the two
     nearly cancel — the same equation gives ~113 — so one value sits within
     about 5px across the whole range, which the glow absorbs.

     Everything below the mark is in normal flow, so this moves the tagline,
     lede and pill down with it rather than letting the mark slide under them. */
  .hero {
    padding: 108px 0 210px;
  }

  .section-head {
    gap: 16px;
  }

  section.band {
    padding: 58px 0;
  }

  .site-nav {
    gap: 20px;
    font-size: 14.5px;
  }
}