/* Zero Social, version C. Zero's own design system: Plus Jakarta Sans throughout, the cool
   near-black canvas, #E8E8E8 ink, the grey wash on a headline's last words, white as the only
   accent. The colour lives in the film. */
:root {
  --canvas: #0d0d11;
  --chrome: #16161b;
  --card: #1a1a1f;
  --ink: #e8e8e8;
  --ink-bright: #ededef;
  --muted: #b3b3b3;
  --tertiary: #8c8c8c;
  --secondary: #5c5c5c;
  --edge: rgba(255, 255, 255, 0.07);
  --edge-strong: rgba(255, 255, 255, 0.14);
  --fill: rgba(255, 255, 255, 0.05);
  --wash: linear-gradient(180deg, #ececec 6%, #8a8a8a 70%, #666 100%);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(232, 232, 232, 0.9); color: #121212; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.no-gl body { background: radial-gradient(80% 60% at 50% 40%, #1b1830 0%, var(--canvas) 70%) fixed; }
.no-gl #gl { display: none; }
main, .foot { position: relative; z-index: 1; }

/* ── wordmark: "Zero" flat, "Social" in the grey wash, as in the app ────── */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.4px; color: var(--ink-bright); }
.wordmark img { width: 26px; height: 26px; }
.wordmark .wm { white-space: nowrap; }
.wordmark .washed { background: var(--wash); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.12em; }

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 9999px;
  background: rgba(22, 22, 27, 0.5); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.4s var(--ease);
  white-space: nowrap;
}
.nav.solid { background: rgba(22, 22, 27, 0.72); }
.nav .wordmark { margin-right: 8px; padding-right: 14px; border-right: 1px solid var(--edge); font-size: 16px; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 9px 14px; border-radius: 9999px; font-weight: 600; font-size: 14px; color: var(--tertiary); transition: color 0.2s, background 0.2s; }
.nav-links a:hover { color: var(--ink); background: var(--fill); }
.nav-links a[aria-current] { color: var(--ink); }

/* ── buttons, from the design system ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 24px; border-radius: 9999px; border: 0;
  font: 700 15px/22px var(--sans); cursor: pointer; white-space: nowrap;
  transition: transform 0.14s cubic-bezier(0.33, 1, 0.68, 1), background 0.2s, border-color 0.2s, box-shadow 0.3s;
}
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--ink); color: #121212; }
.btn-primary:hover { box-shadow: 0 0 0 6px rgba(232, 232, 232, 0.08); }
.btn-secondary { background: var(--fill); color: var(--ink); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-weight: 600; }
.btn-secondary:hover { border-color: rgba(255, 255, 255, 0.3); }
.btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn .two { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.btn .two small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.btn .two b { font-size: 16px; }

/* ── the rail: one dot per chapter ──────────────────────────────────────── */
.rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 25; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 5px 0; }
.rail .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(232, 232, 232, 0.28); transition: background 0.3s, transform 0.3s var(--ease); order: 2; }
.rail .name { font-size: 12px; font-weight: 600; color: var(--tertiary); opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s var(--ease); order: 1; }
.rail li.is .dot { background: var(--ink); transform: scale(1.5); }
.rail:hover .name, .rail a:focus-visible .name { opacity: 1; transform: none; }
.rail li.is .name { color: var(--ink); }

/* ── chapters ───────────────────────────────────────────────────────────── */
.ch { position: relative; height: calc(var(--h, 150) * 1vh); }
@supports (height: 1svh) { .ch { height: calc(var(--h, 150) * 1svh); } }
.stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center; padding: 0 var(--pad);
}
@supports (height: 1svh) { .stage { height: 100svh; } }
.copy { position: relative; z-index: 2; text-align: center; max-width: 1120px; margin: 0 auto; }
.copy.narrow { max-width: 760px; }
.copy.top { align-self: start; margin-top: clamp(92px, 13vh, 140px); }
.copy.bottom { align-self: end; margin-bottom: clamp(56px, 10vh, 112px); }
.stage.split { grid-template-rows: auto 1fr auto; }
.stage.split > .copy.top { grid-row: 1; }
.stage.split > .copy.bottom { grid-row: 3; }

.over { margin: 0 0 20px; font: 600 12px/16px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tertiary); }
.display {
  margin: 0; font-weight: 300; font-size: clamp(40px, 6.4vw, 112px); line-height: 1.02;
  letter-spacing: -0.045em; color: var(--ink-bright); text-wrap: balance;
}
.display.md { font-size: clamp(34px, 4.8vw, 82px); }
.display.sm { font-size: clamp(30px, 3.6vw, 60px); line-height: 1.06; }
.display.xl { font-size: clamp(64px, 12vw, 200px); letter-spacing: -0.06em; }
/* the paradox: "Eight billion people." as big as the page allows, the contrast under it */
.display.xl + .voice.lg { margin-top: 0.55em; max-width: none; }
/* Gradient text only paints inside its box, so washed words get room below for descenders. */
.wash, .wash .w { background: var(--wash); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wash { padding: 0.08em 0 0.22em; }
.voice {
  margin: 22px auto 0; max-width: 34ch;
  font-weight: 300; font-size: clamp(20px, 2vw, 30px); line-height: 1.4; letter-spacing: -0.015em;
  color: var(--muted); text-wrap: balance;
}
.voice.xl { max-width: 17ch; font-size: clamp(40px, 6vw, 104px); line-height: 1.04; letter-spacing: -0.045em; color: var(--ink-bright); margin-top: 0; }
.voice.lg { max-width: 22ch; font-size: clamp(32px, 4.2vw, 72px); line-height: 1.08; letter-spacing: -0.04em; color: var(--ink-bright); margin-top: 0; }
.sub { margin: 18px auto 0; max-width: 52ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.caps { margin: 30px 0 0; font: 600 13px/18px var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.fine { margin: 14px auto 0; font-size: 13px; line-height: 18px; color: var(--tertiary); }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* the hero's scroll cue */
.cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 600 11px/16px var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tertiary); z-index: 2; }
.cue i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── word-by-word arrival ───────────────────────────────────────────────── */
.js [data-split] .w {
  display: inline-block; padding: 0.1em 0 0.22em; margin: -0.1em 0 -0.22em;
  opacity: 0; filter: blur(12px); transform: translateY(0.32em);
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i) * 34ms);
}
.js .ch.on [data-split] .w { opacity: 1; filter: none; transform: none; }
.js .fade { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0.35s); }
.js .ch.on .fade { opacity: 1; transform: none; }

/* ── sub-steps: copies stacked in one place, the current one shown ──────── */
.steps { display: grid; justify-items: center; }
.steps > [data-k] {
  grid-area: 1 / 1; opacity: 0; transform: translateY(12px); filter: blur(6px);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease), filter 0.55s var(--ease);
  pointer-events: none;
}
.steps > [data-k].is { opacity: 1; transform: none; filter: none; pointer-events: auto; }
/* chapters that play several scenes: each step is a full-stage layer with its own placement */
.layers { position: absolute; inset: 0; }
.layers > [data-k] { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--pad); }
.layers > [data-k].top { place-items: start center; }
.layers > [data-k].top > .copy { margin-top: clamp(92px, 13vh, 140px); }
.layers > [data-k].bottom { place-items: end center; }
.layers > [data-k].bottom > .copy { margin-bottom: clamp(56px, 10vh, 112px); }
.js .ch.on [data-k]:not(.is) [data-split] .w { opacity: 0; filter: blur(12px); transform: translateY(0.32em); transition-delay: 0s; }
.js .ch.on [data-k]:not(.is) .fade { opacity: 0; transform: translateY(14px); transition-delay: 0s; }
.anchor { position: absolute; left: 0; width: 1px; height: 1px; }

.step-h { margin: 0; font-weight: 300; font-size: clamp(30px, 3.6vw, 58px); line-height: 1.06; letter-spacing: -0.04em; color: var(--ink-bright); text-wrap: balance; }
.step-p { margin: 12px auto 0; max-width: 46ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--muted); }
.step-n { margin: 0 0 10px; font: 600 12px/16px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c, var(--tertiary)); }
.ticks { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.ticks i { width: 18px; height: 2px; border-radius: 2px; background: rgba(232, 232, 232, 0.18); transition: background 0.4s, width 0.4s var(--ease); }
.ch[data-at="0"] .ticks i:nth-child(1), .ch[data-at="1"] .ticks i:nth-child(2), .ch[data-at="2"] .ticks i:nth-child(3),
.ch[data-at="3"] .ticks i:nth-child(4), .ch[data-at="4"] .ticks i:nth-child(5), .ch[data-at="5"] .ticks i:nth-child(6) { background: var(--ink); width: 30px; }

/* ── labels the film positions on the picture ───────────────────────────── */
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: opacity 0.45s var(--ease); }
.js .ch:not(.on) .labels { opacity: 0; }
.lbl { position: absolute; left: 0; top: 0; width: 230px; opacity: 0.16; transition: opacity 0.5s var(--ease); will-change: transform; }
.lbl.is { opacity: 1; }
.lbl[data-side="r"] { text-align: left; }
.lbl[data-side="l"] { text-align: right; }
.lbl[data-side="c"] { text-align: center; }
.lbl .n { font: 600 11px/16px var(--sans); letter-spacing: 0.16em; color: var(--c, var(--tertiary)); }
.lbl h3 { margin: 4px 0 0; font: 600 17px/24px var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.lbl p { margin: 3px 0 0; font: 400 13px/18px var(--sans); color: var(--tertiary); }

/* the kinds of community, colour-keyed to the spots on the globe */
[data-kind="place"] { --c: #78d68c; }
[data-kind="identity"] { --c: #f55780; }
[data-kind="interest"] { --c: #e8b648; }
[data-kind="career"] { --c: #3370ff; }

/* Wider: real communities that pop out of the globe, each with its big goal */
.lbl.comm { width: max-content; max-width: 250px; padding: 8px 13px; border-radius: 12px; background: rgba(22, 22, 27, 0.66); border: 0.5px solid var(--edge); opacity: 0; transition: opacity 0.6s var(--ease); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lbl.comm.is { opacity: 1; }
.lbl.comm b { display: block; font: 700 14px/20px var(--sans); letter-spacing: -0.01em; color: var(--ink-bright); white-space: nowrap; }
.lbl.comm span { display: block; margin-top: 1px; font: 400 12.5px/17px var(--sans); color: var(--muted); text-wrap: pretty; }
.lbl.comm::before { content: ''; position: absolute; top: 18px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px 2px var(--c); transform: scale(0.2); transition: transform 0.5s var(--ease); }
.lbl.comm.is::before { transform: none; }
.lbl.comm[data-side="r"]::before { left: -18px; }
.lbl.comm[data-side="l"]::before { right: -18px; }

/* below laptop, the community showing sits under the copy, one at a time */
.ticker { display: none; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lbl.card { width: min(300px, 28vw); padding: 18px 20px; border-radius: 16px; background: rgba(26, 26, 31, 0.78); border: 0.5px solid var(--edge); text-align: center; opacity: 1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lbl.card h3 { margin: 0; font-size: 19px; line-height: 26px; }
.lbl.card p { font-size: 14px; line-height: 20px; color: var(--muted); }
.lbl.mid { width: 340px; }
.lbl.mid h3 { font-weight: 500; color: var(--muted); }
.lbl.power { width: 170px; }
.lbl.power h3 { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0.02em; }
.lbl.power p { font-size: 12.5px; }

/* the ring's hole: copy for the powers */
.hole { position: relative; z-index: 2; max-width: min(400px, 60vw); text-align: center; }
.hole .step-h { font-size: clamp(26px, 2.7vw, 44px); }

/* "What if we pointed it at ...": real problems take turns on their own line */
.what-if .cycle { display: grid; justify-items: center; }
.what-if .cycle > span { grid-area: 1 / 1; }
.js .what-if .cycle > span { opacity: 0; filter: blur(10px); transform: translateY(0.2em); transition: opacity 0.45s var(--ease), filter 0.45s var(--ease), transform 0.55s var(--ease); }
.js .what-if .cycle > span.is { opacity: 1; filter: none; transform: none; }
html:not(.js) .what-if .cycle > span:not(:first-child) { visibility: hidden; }

/* mobile copies of the labels (shown under the picture instead) */
.mob { display: none; }

/* glass card for the example record */
.record { margin: 26px auto 0; width: min(520px, 100%); padding: 22px 24px; text-align: left; border-radius: 16px; background: rgba(26, 26, 31, 0.72); border: 0.5px solid var(--edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.record .over { margin: 0 0 6px; }
.record h3 { margin: 0 0 10px; font: 600 19px/26px var(--sans); }
.record .rr { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 0.5px solid rgba(232, 232, 232, 0.12); font-size: 14px; color: var(--muted); }
.record .rr b { color: var(--ink); font-weight: 600; }
.record .fine { margin: 10px 0 0; }

/* row of three short items (act, inner side) */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(980px, 100%); margin: 0 auto; text-align: left; }
.trio > div { padding: 18px 20px; border-radius: 16px; background: rgba(26, 26, 31, 0.62); border: 0.5px solid var(--edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.trio .k { margin: 0 0 6px; font: 600 11px/16px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tertiary); }
.trio h3 { margin: 0; font: 600 17px/24px var(--sans); color: var(--ink); }
.trio p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.trio.mob { display: none; }
.copy.bottom .trio + .sub { margin-top: 18px; }

/* the kinds of community as chips under the copy */
.kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px auto 0; }
.kinds span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 9999px; background: var(--fill); border: 0.5px solid var(--edge); font-size: 13px; font-weight: 600; color: var(--ink); }
.kinds span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }

.dates { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 13px; color: var(--tertiary); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { padding: 36px var(--pad) 40px; border-top: 0.5px solid var(--edge); background: linear-gradient(rgba(13, 13, 17, 0.4), var(--canvas)); }
.foot-in { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; font-weight: 500; color: var(--tertiary); }
.foot nav a:hover { color: var(--ink); }
.foot small { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--secondary); font-size: 12px; }

/* ── still / reduced motion ─────────────────────────────────────────────── */
.still [data-split] .w, .still .fade { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js [data-split] .w, .js .fade, .steps > [data-k] { transition: none; filter: none; transform: none; }
  .js .ch [data-split] .w, .js .ch .fade { opacity: 1; }
  .cue i { animation: none; }
}

/* ── below laptop: labels move under the picture ────────────────────────── */
@media (max-width: 1099px) {
  .labels { display: none; }
  .mob, .trio.mob { display: grid; }
  .rail { display: none; }
  .ticker { display: grid; justify-items: center; gap: 3px; min-height: 64px; margin: 16px auto 0; max-width: 36ch; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
  .ticker.is { opacity: 1; transform: none; }
  .ticker b { display: inline-flex; align-items: center; gap: 9px; font: 700 15px/22px var(--sans); color: var(--ink-bright); }
  .ticker b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px 1px var(--c); }
  .ticker span { font-size: 14px; line-height: 20px; color: var(--muted); text-wrap: balance; }
}

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .nav { top: 10px; left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .nav-links { display: none; }
  .copy.top, .layers > [data-k].top > .copy { margin-top: 84px; }
  .layers > [data-k].bottom > .copy { margin-bottom: 40px; }
  .ch.hero .copy { align-self: end; margin-bottom: 9vh; }
  .ch.hero .cue { display: none; }
  .copy.bottom { margin-bottom: 40px; }
  .display { font-size: clamp(36px, 10.4vw, 52px); letter-spacing: -0.04em; }
  .display.md { font-size: clamp(31px, 8.8vw, 44px); }
  .display.sm { font-size: clamp(27px, 7.6vw, 36px); }
  .display.xl { font-size: clamp(60px, 22vw, 96px); }
  .voice.xl { font-size: clamp(36px, 10vw, 50px); }
  .voice.lg { font-size: clamp(29px, 8vw, 40px); }
  .step-h { font-size: clamp(25px, 7vw, 34px); }
  .ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .ctas .btn { width: 100%; }
  .trio { grid-template-columns: 1fr; gap: 8px; }
  .trio > div { padding: 12px 14px; }
  .trio p:not(.k) { display: none; }
  .trio .k { margin-bottom: 2px; }
  .hole { max-width: 54vw; }
  .hole .step-h { font-size: clamp(20px, 6vw, 26px); }
  .hole .step-p { font-size: 13px; line-height: 18px; }
  .record { padding: 16px 18px; }
}