/* The landing page. A night at an event: dark navy, out-of-focus stage lights, and the badge held up in front.
   The beta and privacy pages load it too, for the look they share, with pages.css for what is only theirs. */

:root {
  --bg: #05070F;
  --bg-raised: #061220;
  --ink: #F3F5FB;
  --ink-soft: rgba(243, 245, 251, 0.72);
  --ink-quiet: rgba(243, 245, 251, 0.5);
  --ink-faint: rgba(243, 245, 251, 0.32);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --glass-strong: rgba(18, 24, 44, 0.72);

  /* The lights of the room: their channels (--cyan-rgb, --blue-rgb and the rest) are in ambient.css. */
  --accent: #6EE7F5;
  --amber: #FFAA5C;
  --light-gradient: linear-gradient(100deg, #8CEBFF 0%, #6E9BFF 42%, #B4A2FF 68%, #FFB46E 100%);

  /* From the app: the badge's accent. */
  --terracotta: #DF8A55;
  /* The Midnight theme's accent in dark mode, and the faint wash of it the app lays under a note. */
  --midnight-accent: #06B6D4;
  --midnight-accent-subtle: rgba(6, 182, 212, 0.16);
  --green: #3DDC84;

  /* The badge's own surfaces in dark mode (midnight theme matching the website). */
  --badge-paper: #0A0E1C;
  --chip-fill: #151B33;
  --chip-border: rgba(255, 255, 255, 0.10);

  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'New York', Georgia, serif;
  --font-badge-serif: ui-serif, 'New York', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --content: 1240px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100%;
  overflow-x: clip;
}

/* The sections' drifting lights are full-bleed and drift past the page's sides. Safari on iPhone ignores the
   body's hidden overflow and widens the page to show them, so it scrolls sideways and zooms out. Clipping
   them here keeps the page phone-width; clip, unlike hidden, leaves them free to spill down into the footer. */
main {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: rgba(var(--cyan-rgb), 0.3);
}

/* MARK: - Topic chip */

/* A topic as the badge sets it in dark mode: semibold serif on a faint fill and border. */
.topic-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1.5px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-fill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  color: var(--ink);
  font-family: var(--font-badge-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* The badge's "Happy to discuss:" line: bold mono in the accent. */
.float-kicker,
.ticker-label,
.topic-board-kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* MARK: - Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background-color 0.3s ease, border-color 0.3s ease;
}

.button-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 10px 40px -10px rgba(var(--cyan-rgb), 0.6), 0 2px 0 rgba(255, 255, 255, 0.4) inset;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 18px 50px -10px rgba(var(--cyan-rgb), 0.8), 0 2px 0 rgba(255, 255, 255, 0.4) inset;
}

.button-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}

.button:hover .button-arrow {
  transform: translateX(4px);
}

.button-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.button-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}

.button-large {
  min-height: 60px;
  padding: 0 34px;
  font-size: 17px;
}

/* MARK: - Navigation */

/* At the top of the page the bar is open: no box, laid across the page's width. Once the page scrolls it
   draws in to a narrow glass pill with a lit rim, so it stays out of the way of what is being read. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 22px var(--gutter) 0;
  pointer-events: none;
  transition: padding 0.7s var(--ease-out);
}

.nav-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: var(--content);
  padding: 6px 0;
  border-radius: 999px;
  pointer-events: auto;
  transition:
    max-width 0.8s var(--ease-out),
    padding 0.8s var(--ease-out),
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

/* The rim: a hairline that catches cyan on one side and amber on the other, drawn only once the bar is a pill. */
.nav-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(var(--cyan-rgb), 0.55), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.06) 70%, rgba(var(--amber-rgb), 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.nav.is-scrolled {
  padding-top: 12px;
}

.nav.is-scrolled .nav-bar {
  max-width: 820px;
  padding: 7px 7px 7px 14px;
  background: rgba(8, 11, 24, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav.is-scrolled .nav-bar::before {
  opacity: 1;
}

.nav.is-scrolled .nav-links a {
  padding: 7px 14px;
}

/* The wordmark as the launch screen sets it: bold system serif. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  justify-self: start;
  font-family: var(--font-badge-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* The icon is exported from the app's Icon Composer document already in its rounded shape, so it is not clipped here. */
.brand-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 4px 14px rgba(var(--blue-rgb), 0.45));
  transition: transform 0.5s var(--ease-out);
}

.brand:hover .brand-icon {
  transform: rotate(-8deg) scale(1.06);
}

.brand-small .brand-icon {
  width: 24px;
  height: 24px;
  filter: none;
}

.brand-wordmark {
  height: 32px;
  width: auto;
  display: block;
}

.brand-wordmark-light {
  display: none;
}

.brand-wordmark-dark {
  display: block;
}

[data-theme="light"] .brand-wordmark-dark {
  display: none;
}

[data-theme="light"] .brand-wordmark-light {
  display: block;
}

.brand-small .brand-wordmark {
  height: 28px;
}

/* The section links, with a glass highlight that home.js slides under the link being pointed at,
   through --highlight-x and --highlight-width. */
.nav-links {
  --highlight-x: 0px;
  --highlight-width: 0px;
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-highlight {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--highlight-width);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateX(var(--highlight-x));
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.3s ease;
  pointer-events: none;
}

.nav-links.has-highlight .nav-highlight {
  opacity: 1;
}

.nav-links a {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: color 0.25s ease;
  font-weight: bold;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current="true"] {
  color: var(--ink);
}

/* The section being read: a small lit dot under its link. */
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--cyan-rgb), 0.9);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}

.nav-links a[aria-current="true"]::after {
  opacity: 1;
  transform: scale(1);
}

/* The button carries its arrow in a dark badge that turns to point up and out on hover. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  min-height: 44px;
  padding: 4px 4px 4px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 10px 30px -12px rgba(var(--cyan-rgb), 0.7);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 14px 36px -12px rgba(var(--cyan-rgb), 0.9);
}

.nav-cta-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  transition: transform 0.5s var(--ease-out);
}

.nav-cta:hover .nav-cta-arrow {
  transform: rotate(-45deg);
}

/* MARK: - Hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 120px var(--gutter) 96px;
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 70% 110%, rgba(40, 70, 160, 0.45) 0%, transparent 60%),
    radial-gradient(80% 65% at 0% 100%, rgba(16, 150, 108, 0.55) 0%, transparent 70%),
    radial-gradient(80% 60% at 10% 0%, rgba(30, 40, 90, 0.6) 0%, transparent 70%),
    linear-gradient(180deg, #060812 0%, #070B1A 55%, var(--bg) 100%);
}

.hero-bokeh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.4s ease;
}

.hero-bokeh.is-ready {
  opacity: 1;
}

/* Two stage lights sweeping slowly over the room. */
.hero-beam {
  position: absolute;
  top: -12%;
  width: 70vmax;
  height: 130%;
  transform-origin: 50% 0;
  background: conic-gradient(from 0deg at 50% 0%, transparent 0deg 164deg, var(--beam-color) 176deg 184deg, transparent 196deg 360deg);
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  animation: beamSweep 16s ease-in-out infinite alternate;
}

.hero-beam-left {
  --beam-color: rgba(110, 200, 255, 0.28);
  left: -18vmax;
  --beam-from: -22deg;
  --beam-to: 8deg;
}

.hero-beam-right {
  --beam-color: rgba(var(--amber-rgb), 0.22);
  right: -24vmax;
  --beam-from: 20deg;
  --beam-to: -6deg;
  animation-duration: 19s;
  animation-delay: -6s;
}

@keyframes beamSweep {
  from {
    transform: rotate(var(--beam-from));
  }

  to {
    transform: rotate(var(--beam-to));
  }
}

.hero-haze {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 30% at 30% 70%, rgba(var(--blue-rgb), 0.16), transparent 70%),
    radial-gradient(36% 30% at 14% 34%, rgba(var(--emerald-rgb), 0.24), transparent 70%),
    radial-gradient(35% 25% at 75% 40%, rgba(var(--violet-rgb), 0.14), transparent 70%),
    radial-gradient(30% 26% at 58% 88%, rgba(var(--emerald-rgb), 0.2), transparent 70%),
    radial-gradient(30% 25% at 85% 85%, rgba(var(--amber-rgb), 0.1), transparent 70%);
  filter: blur(20px);
  animation: hazeDrift 28s ease-in-out infinite alternate;
}

@keyframes hazeDrift {
  from {
    transform: translate3d(-3%, 2%, 0) scale(1);
  }

  to {
    transform: translate3d(3%, -2%, 0) scale(1.08);
  }
}

.hero-grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grainShift 1.2s steps(6) infinite;
}

@keyframes grainShift {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-4%, 3%);
  }

  40% {
    transform: translate(3%, -5%);
  }

  60% {
    transform: translate(-6%, -2%);
  }

  80% {
    transform: translate(5%, 4%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(2, 3, 8, 0.75) 100%),
    linear-gradient(180deg, transparent 70%, var(--bg) 100%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
  color: var(--ink-soft);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.hero-eyebrow:hover {
  border-color: rgba(var(--cyan-rgb), 0.45);
  color: var(--ink);
}

.hero-eyebrow-arrow {
  color: var(--accent);
  transition: transform 0.3s var(--ease-out);
}

.hero-eyebrow:hover .hero-eyebrow-arrow {
  transform: translateX(3px);
}

.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green);
  opacity: 0;
  animation: livePulse 2.4s ease-out infinite;
}

@keyframes livePulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.hero-title {
  margin-top: 28px;
  font-size: clamp(3rem, 6.4vw, 6rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.hero-line {
  display: block;
}

/* Emphasis in one solid colour where the name beside it carries the light. */
.hero-quiet {
  color: #99FF5C;
}

/* The name inside running text, set as the wordmark is: bold system serif. */
.wordmark {
  font-family: var(--font-badge-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The title's lit words, the emphasis and the name, painted with the room's light. Text clipped to a
   background is only painted inside the box, and at this tight line height the box ends above the
   italic g's descender. The bottom padding makes room for it, and the negative margin gives that room
   back so the line keeps its height. */
.hero-title em:not(.hero-quiet),
.hero-title .wordmark {
  display: inline-block;
  padding: 0 0.1em 0.24em 0;
  margin-bottom: -0.24em;
  background: var(--light-gradient);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  animation: lightShift 9s ease-in-out infinite alternate;
}

@keyframes lightShift {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

.hero-lede {
  max-width: 34ch;
  margin-top: 28px;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.hero-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-quiet);
}

/* The opening: each piece of the copy rises out of a soft blur, one after another. */
.hero-eyebrow,
.hero-line,
.hero-lede,
.hero-actions,
.hero-note {
  animation: riseIn 1.2s var(--ease-out) both;
}

.hero-line:nth-child(1) {
  animation-delay: 0.12s;
}

.hero-line:nth-child(2) {
  animation-delay: 0.24s;
}

.hero-lede {
  animation-delay: 0.4s;
}

.hero-actions {
  animation-delay: 0.52s;
}

.hero-note {
  animation-delay: 0.64s;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* MARK: - The phone */

.hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  animation: stageIn 1.6s var(--ease-out) 0.2s both;
}

@keyframes stageIn {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.phone-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(var(--blue-rgb), 0.45), transparent 70%),
    radial-gradient(closest-side at 28% 72%, rgba(var(--emerald-rgb), 0.34), transparent 70%),
    radial-gradient(closest-side at 70% 70%, rgba(var(--amber-rgb), 0.25), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: glowBreathe 7s ease-in-out infinite alternate;
}

@keyframes glowBreathe {
  from {
    opacity: 0.7;
    transform: translate(-50%, -52%) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.04);
  }
}

.phone-floor {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 70%;
  height: 60px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 200, 255, 0.35), transparent);
  filter: blur(18px);
  pointer-events: none;
}

/* Tilted by home.js toward the pointer through --tilt-x and --tilt-y, each from -1 to 1. */
.phone-rig {
  --tilt-x: 0;
  --tilt-y: 0;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(calc(-12deg + var(--tilt-x) * 10deg)) rotateX(calc(4deg + var(--tilt-y) * -8deg));
  transition: transform 1.1s var(--ease-out);
}

.phone {
  --phone-width: clamp(250px, 23vw, 320px);
  --band: calc(var(--phone-width) * 0.014);
  --bezel: calc(var(--phone-width) * 0.03);
  --radius: calc(var(--phone-width) * 0.17);
  position: relative;
  width: var(--phone-width);
  padding: var(--band);
  border-radius: var(--radius);
  background: linear-gradient(140deg, #5C6170 0%, #23262E 18%, #14161C 45%, #2A2E38 72%, #6A6F7E 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 60px 120px -30px rgba(0, 0, 0, 0.9),
    0 30px 60px -30px rgba(40, 80, 200, 0.5);
  animation: phoneFloat 7s ease-in-out infinite alternate;
}

@keyframes phoneFloat {
  from {
    transform: translate3d(0, -8px, 0);
  }

  to {
    transform: translate3d(0, 8px, 0);
  }
}

.phone-bezel {
  padding: var(--bezel);
  border-radius: calc(var(--radius) - var(--band));
  background: #020305;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8);
}

.phone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--radius) - var(--band) - var(--bezel));
  background: var(--badge-paper);
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-island {
  position: absolute;
  top: calc(var(--phone-width) * 0.03);
  left: 50%;
  width: 31%;
  height: calc(var(--phone-width) * 0.085);
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 80% 50%, #1B2440 0 7%, #0A0D18 9% 14%, transparent 16%),
    #000;
}

/* The light on the glass, which slides as the phone turns. */
.phone-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 42%, transparent 70%, rgba(255, 255, 255, 0.05) 100%);
  transform: translateX(calc(var(--tilt-x, 0) * -8%));
  transition: transform 1.1s var(--ease-out);
  pointer-events: none;
}

.phone-sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: glassSweep 8s ease-in-out 2.4s infinite;
  pointer-events: none;
}

@keyframes glassSweep {
  0% {
    transform: translateX(-100%);
  }

  22%,
  100% {
    transform: translateX(100%);
  }
}

.phone-button {
  position: absolute;
  width: calc(var(--phone-width) * 0.012);
  border-radius: 2px;
  background: linear-gradient(90deg, #3A3E48, #7A7F8C 50%, #3A3E48);
}

.phone-button-action,
.phone-button-volume-up,
.phone-button-volume-down {
  left: calc(var(--phone-width) * -0.009);
}

.phone-button-action {
  top: 17%;
  height: 4.5%;
}

.phone-button-volume-up {
  top: 25%;
  height: 8%;
}

.phone-button-volume-down {
  top: 35%;
  height: 8%;
}

.phone-button-power {
  right: calc(var(--phone-width) * -0.009);
  top: 27%;
  height: 12%;
}

/* MARK: - Floating cards around the phone */

.float-card {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.float-topics {
  top: 14%;
  left: -40%;
  width: 236px;
  padding: 16px;
  transform: translateZ(80px);
  animation: cardBobA 6s ease-in-out infinite alternate;
}

.float-kicker {
  font-size: 11px;
}

.float-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* The badge's chip, at the card's smaller size. */
.float-chips .topic-chip {
  padding: 6px 12px;
  border-width: 1px;
  font-size: 14px;
}

.float-scan {
  bottom: 18%;
  right: -34%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 268px;
  padding: 12px 16px 12px 12px;
  transform: translateZ(120px);
  animation: cardBobB 7s ease-in-out infinite alternate;
}

.float-scan-icon {
  flex: none;
  width: 40px;
  height: 40px;
}

.float-scan-meta {
  font-size: 12px;
  color: var(--ink-quiet);
}

.float-scan-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

@keyframes cardBobA {
  from {
    transform: translateZ(80px) translateY(-6px);
  }

  to {
    transform: translateZ(80px) translateY(10px);
  }
}

@keyframes cardBobB {
  from {
    transform: translateZ(120px) translateY(8px);
  }

  to {
    transform: translateZ(120px) translateY(-8px);
  }
}

.hero-caption {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  display: block;
  width: 24px;
  height: 40px;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.scroll-cue-line {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--ink-soft);
  animation: scrollCue 2s ease-in-out infinite;
}

@keyframes scrollCue {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    transform: translateY(14px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* MARK: - Topics strip */

/* Topics people put on their badges, set as the badge sets them, drifting past under the badge's own label. */
.ticker {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 100%;
  padding: 24px 0 24px var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow-x: clip;
  contain: paint;
  touch-action: pan-y;
}

.ticker-label {
  flex: none;
  font-size: 13px;
}

.ticker-window {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: clip;
  contain: paint;
  touch-action: pan-y;
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 8%, #000 90%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 8%, #000 90%, rgba(0, 0, 0, 0));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 60s linear infinite;
  touch-action: pan-y;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Each copy ends on the gap that follows its last chip, so the loop meets without a seam. */
.ticker-list {
  display: flex;
  flex: none;
  gap: 12px;
  padding: 8px 12px 8px 0;
}

/* The strip's chips, lit in the room's colours: each takes one light in turn, as a tinted glass fill with a
   gradient rim, a lit dot and a glint that ripples down the row. Ten topics to a copy, five colours, so
   both copies line up and the loop stays seamless. */
.ticker-list .topic-chip {
  --chip-rgb: var(--blue-rgb);
  --shine-delay: 0s;
  position: relative;
  gap: 10px;
  overflow: hidden;
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, rgba(var(--chip-rgb), 0.3) 0%, rgba(var(--chip-rgb), 0.07) 58%, rgba(var(--chip-rgb), 0.18) 100%) padding-box,
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(135deg, rgba(var(--chip-rgb), 0.95), rgba(255, 255, 255, 0.12) 50%, rgba(var(--chip-rgb), 0.55)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s var(--ease-out);
}

.ticker-list .topic-chip::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--chip-rgb));
  box-shadow: 0 0 10px 1px rgba(var(--chip-rgb), 0.9);
}

.ticker-list .topic-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.2) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: chipGlint 7s ease-in-out var(--shine-delay) infinite;
  pointer-events: none;
}

.ticker-list .topic-chip:hover {
  transform: translateY(-3px);
}

.ticker-list .topic-chip:nth-child(5n + 1) {
  --chip-rgb: var(--cyan-rgb);
  --shine-delay: 0s;
}

.ticker-list .topic-chip:nth-child(5n + 2) {
  --chip-rgb: var(--blue-rgb);
  --shine-delay: 0.35s;
}

.ticker-list .topic-chip:nth-child(5n + 3) {
  --chip-rgb: var(--violet-rgb);
  --shine-delay: 0.7s;
}

.ticker-list .topic-chip:nth-child(5n + 4) {
  --chip-rgb: var(--emerald-rgb);
  --shine-delay: 1.05s;
}

.ticker-list .topic-chip:nth-child(5n + 5) {
  --chip-rgb: var(--amber-rgb);
  --shine-delay: 1.4s;
}

@keyframes chipGlint {
  0% {
    transform: translateX(-120%);
  }

  18%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes tickerScroll {
  to {
    transform: translateX(-50%);
  }
}

/* MARK: - Sections */

.section {
  position: relative;
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(96px, 14vw, 180px) var(--gutter) 0;
}

/* The room between the hero and the finale: out-of-focus lights drifting behind the content.
   Full-bleed and unclipped, so one section's lights spill into the next; the hero and finale paint over them.
   The lights themselves are in ambient.css; this places them. */
.section-ambient {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

.section-ambient-how .ambient-blob-emerald {
  --blob-strength: 0.18;
  --blob-duration: 13s;
  top: 2%;
  left: -12%;
}

.section-ambient-how .ambient-blob-violet {
  --blob-size: clamp(280px, 40vw, 600px);
  --blob-duration: 16s;
  --blob-delay: -5s;
  top: 34%;
  left: 68%;
}

.section-ambient-how .ambient-blob-blue {
  --blob-strength: 0.15;
  --blob-duration: 15s;
  --blob-delay: -8s;
  top: 68%;
  left: 18%;
}

.section-ambient-steps .ambient-blob-amber {
  --blob-size: clamp(260px, 34vw, 520px);
  --blob-strength: 0.1;
  --blob-duration: 11s;
  --blob-delay: -3s;
  top: -18%;
  left: 60%;
}

.section-ambient-steps .ambient-blob-cyan {
  --blob-strength: 0.12;
  --blob-duration: 14s;
  --blob-delay: -6s;
  top: 26%;
  left: -10%;
}

.section-ambient-steps .ambient-blob-violet {
  --blob-size: clamp(260px, 36vw, 540px);
  --blob-strength: 0.13;
  --blob-duration: 17s;
  --blob-delay: -10s;
  top: 58%;
  left: 52%;
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

.section-title {
  margin-top: 20px;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

/* Padded below for the same reason as the hero's, so descenders stay painted. */
.section-title em,
.finale-title em {
  padding: 0 0.06em 0.2em 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--light-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-lede {
  max-width: 46ch;
  margin-top: 24px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
}

/* Revealed by home.js as each piece scrolls into view. */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* MARK: - Bento */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  --spot-x: 50%;
  --spot-y: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-height: 420px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%), var(--bg-raised);
}

/* A soft light that follows the pointer across each tile. */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(500px circle at var(--spot-x) var(--spot-y), rgba(110, 160, 255, 0.12), transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.tile:hover::before {
  opacity: 1;
}

.tile>* {
  position: relative;
  z-index: 1;
}

.tile-scan {
  grid-column: span 7;
  flex-direction: row;
  align-items: center;
}

.tile-topics {
  grid-column: span 5;
}

.tile-people,
.tile-events {
  grid-column: span 6;
}

.tile-copy {
  max-width: 40ch;
}

.tile-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.tile h3 {
  margin-top: 14px;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.tile-copy p:last-child {
  margin-top: 14px;
  color: var(--ink-soft);
}

/* The scanning tile: a camera finding a code. */
.viewfinder {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(200px, 22vw, 280px);
  aspect-ratio: 1;
  margin-left: auto;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--blue-rgb), 0.2), transparent 70%);
}

.viewfinder-code {
  width: 56%;
  padding: 7%;
  border-radius: 16px;
  background: #FFFFFF;
  color: #1A1A18;
  box-shadow: 0 20px 60px -10px rgba(var(--blue-rgb), 0.6);
}

.viewfinder-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--accent);
  filter: drop-shadow(0 0 8px rgba(var(--cyan-rgb), 0.7));
  animation: cornerLock 4s var(--ease-out) infinite;
}

.viewfinder-corner-tl {
  top: 6%;
  left: 6%;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 14px;
  --lock-x: 6px;
  --lock-y: 6px;
}

.viewfinder-corner-tr {
  top: 6%;
  right: 6%;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 14px;
  --lock-x: -6px;
  --lock-y: 6px;
}

.viewfinder-corner-bl {
  bottom: 6%;
  left: 6%;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 14px;
  --lock-x: 6px;
  --lock-y: -6px;
}

.viewfinder-corner-br {
  bottom: 6%;
  right: 6%;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 14px;
  --lock-x: -6px;
  --lock-y: -6px;
}

@keyframes cornerLock {

  0%,
  30% {
    transform: none;
  }

  45%,
  85% {
    transform: translate(var(--lock-x), var(--lock-y));
  }

  100% {
    transform: none;
  }
}

.viewfinder-beam {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 18%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px 4px rgba(var(--cyan-rgb), 0.55);
  animation: beamScan 4s ease-in-out infinite;
}

@keyframes beamScan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  38% {
    transform: translateY(clamp(120px, 14vw, 180px));
    opacity: 1;
  }

  44%,
  100% {
    transform: translateY(clamp(120px, 14vw, 180px));
    opacity: 0;
  }
}

.viewfinder-result {
  position: absolute;
  bottom: -14px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, 8px);
  opacity: 0;
  animation: resultPop 4s var(--ease-out) infinite;
}

.viewfinder-result-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

@keyframes resultPop {

  0%,
  42% {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  50%,
  86% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
}

/* The topics tile: the lower half of a badge, on the badge's own midnight paper. */
.topic-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding: 26px 18px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.12), rgba(91, 140, 255, 0) 55%, rgba(139, 123, 255, 0.06)), var(--badge-paper);
}

.topic-board-kicker {
  font-size: 14px;
}

.topic-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 10px;
}

/* The people tile. */
.event-list {
  margin-top: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(4, 7, 6, 0.5);
}

.event-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.event-list-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-quiet);
}

.event-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.event-person:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

/* The app's face for someone with no photo: their initials, dark on a gradient the app picks by name.
   These are the ones its example people get, as dark mode dims them, a fifth less bright. */
.event-person-initials {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-badge-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #191917;
}

.event-person-initials-blue {
  background: linear-gradient(135deg, #70BCCC, #4970CC);
}

.event-person-initials-violet {
  background: linear-gradient(135deg, #A69DCC, #6F62CC);
}

.event-person-initials-peach {
  background: linear-gradient(135deg, #CCA87B, #CC7B3E);
}

.event-person-body {
  flex: 1;
  min-width: 0;
}

.event-person-name {
  font-weight: 600;
  line-height: 1.3;
}

.event-person-role {
  font-size: 13px;
  color: var(--ink-soft);
}

/* The owner's note in a person's row, as the app's Midnight theme sets it apart in dark mode: a slip
   with a faint wash of the accent and its rule down the leading edge, in italic. It takes the place
   of the time. */
.row-note {
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 10px 4px 12px;
  border-left: 2px solid var(--midnight-accent);
  border-radius: 6px;
  background: var(--midnight-accent-subtle);
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* A row's sign that it opens, as the app's rows have. */
.row-chevron {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ink-faint);
}

.event-list-label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The events tile: today's event on top, and what is coming after it. */
.event-board {
  margin-top: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(4, 7, 6, 0.5);
}

.event-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--chip-border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.18), rgba(var(--blue-rgb), 0) 70%), #181817;
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 56px;
  border-radius: 12px;
  background: rgba(var(--amber-rgb), 0.12);
  line-height: 1;
}

.event-date-month {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.event-date-day {
  margin-top: 5px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.event-card-body {
  flex: 1;
  min-width: 0;
}

.event-card-title {
  font-weight: 600;
  line-height: 1.3;
}

/* Marks the event scans are filed against, worded and placed as the app's Active chip: under the
   event's details, so the details keep the card's full width on a phone. */
.event-card-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
  color: #4ADE80;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.event-card-live svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* The events after it, laid out as the app's event rows: the day in a column, the title, a line
   each for where and when, and a chevron. Inset to the card's padding and border, so the day
   column sits under the card's date. */
.event-upcoming li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
}

.event-upcoming li:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.event-date-plain {
  height: auto;
  background: none;
}

.event-upcoming-body {
  flex: 1;
  min-width: 0;
}

.event-upcoming-title {
  font-weight: 600;
  line-height: 1.3;
}

/* One detail of an event or a person, after its icon in the accent, as in the app's rows. */
.event-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-quiet);
}

.event-detail svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--terracotta);
}

/* Who scanned whom reads in italic, as the app sets it. */
.event-detail-scan {
  font-style: italic;
}

/* MARK: - Steps */

.steps-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
}

.steps-mockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.steps-mockup-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  max-width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--cyan-rgb), 0.22) 0%, rgba(var(--blue-rgb), 0.26) 40%, rgba(var(--amber-rgb), 0.12) 65%, transparent 75%);
  filter: blur(44px);
  pointer-events: none;
  z-index: 0;
}

.steps-mockup-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 32px 64px rgba(2, 6, 23, 0.75)) drop-shadow(0 12px 28px rgba(var(--blue-rgb), 0.3));
  animation: stepsFloat 7s ease-in-out infinite alternate;
}

@keyframes stepsFloat {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

.steps-layout .step-list {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 40px);
}

.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.step {
  position: relative;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
}

.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--light-gradient);
  box-shadow: 0 0 12px rgba(var(--cyan-rgb), 0.6);
}

.step:nth-child(2) {
  --reveal-delay: 0.1s;
}

.step:nth-child(3) {
  --reveal-delay: 0.2s;
}

.step-number {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 5vw, 4.4rem);
  font-style: italic;
  line-height: 1;
  color: var(--ink-faint);
}

.step h3 {
  margin-top: 16px;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.step p {
  margin-top: 10px;
  color: var(--ink-soft);
}

/* MARK: - Finale */

.finale {
  position: relative;
  isolation: isolate;
  margin-top: clamp(96px, 14vw, 180px);
  padding: clamp(120px, 16vw, 200px) var(--gutter);
  overflow: hidden;
}

.finale-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(var(--blue-rgb), 0.35), transparent 70%),
    radial-gradient(30% 40% at 30% 80%, rgba(var(--cyan-rgb), 0.18), transparent 70%),
    radial-gradient(30% 40% at 72% 85%, rgba(var(--amber-rgb), 0.16), transparent 70%);
}

.finale-glow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cyan-rgb), 0.6), transparent);
}

.finale-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
}

.finale-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  z-index: 2;
}

.finale-icon {
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
  filter: drop-shadow(0 20px 36px rgba(var(--blue-rgb), 0.6));
}

.finale-title {
  margin-top: 32px;
  font-size: clamp(2.5rem, 4.8vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.finale-lede {
  max-width: 48ch;
  margin: 24px 0 36px;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.finale-mockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.finale-mockup-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--cyan-rgb), 0.22) 0%, rgba(var(--blue-rgb), 0.28) 38%, rgba(var(--amber-rgb), 0.12) 60%, transparent 72%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.finale-mockup-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 32px 64px rgba(2, 6, 23, 0.75)) drop-shadow(0 12px 28px rgba(var(--blue-rgb), 0.3));
  animation: finaleFloat 7s ease-in-out infinite alternate;
}

@keyframes finaleFloat {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-12px);
  }
}

/* MARK: - Footer */

/* Three columns, so the studio's credit sits at the true centre whatever the widths either side. */
.foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 32px;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 36px var(--gutter) calc(36px + env(safe-area-inset-bottom));
  font-size: 14px;
  color: var(--ink-quiet);
}

.foot .brand {
  font-size: 15px;
  color: var(--ink);
}

.foot-links {
  display: flex;
  gap: 24px;
}

.foot-links a:hover {
  color: var(--ink);
}

.foot-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.foot-copy {
  justify-self: end;
}

.foot-credit {
  font-family: 'Lato', var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* MARK: - Narrower screens */

@media (max-width: 1100px) {
  .float-topics {
    left: -28%;
  }

  .float-scan {
    right: -24%;
  }

  /* The scanning tile needs the full row to keep its words beside the viewfinder. */
  .tile-scan,
  .tile-topics {
    grid-column: span 12;
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .nav-bar {
    grid-template-columns: 1fr auto;
  }

  .nav.is-scrolled .nav-bar {
    max-width: 520px;
  }

  .hero {
    min-height: auto;
    padding-top: 112px;
    padding-bottom: 44px;
  }

  /* One column, with the phone between the words and the buttons: the copy's box steps aside so its
     pieces and the phone can be ordered as one list. */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-items: center;
    text-align: center;
  }

  .hero-copy {
    display: contents;
  }

  .hero-eyebrow {
    order: 1;
  }

  .hero-title {
    order: 2;
  }

  .hero-lede {
    order: 3;
  }

  .hero-stage {
    order: 4;
    margin-top: 56px;
  }

  .hero-actions {
    order: 5;
  }

  .hero-note {
    order: 6;
  }

  .hero-lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .phone {
    --phone-width: clamp(220px, 56vw, 300px);
  }

  .phone-rig {
    transform: rotateY(calc(-6deg + var(--tilt-x) * 6deg)) rotateX(calc(3deg + var(--tilt-y) * -5deg));
  }

  .float-topics {
    top: 10%;
    left: -22%;
    width: 200px;
    padding: 12px;
  }

  .float-scan {
    top: 4%;
    bottom: auto;
    right: -20%;
    width: 228px;
    padding: 10px 12px 10px 10px;
  }

  .scroll-cue {
    display: none;
  }

  .ticker {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .ticker-label {
    text-align: center;
  }

  .section {
    padding-top: clamp(48px, 8vw, 64px);
  }

  .tile-scan,
  .tile-topics,
  .tile-people,
  .tile-events {
    grid-column: span 12;
  }

  .tile {
    min-height: 0;
  }

  .step-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .step:nth-child(n) {
    --reveal-delay: 0s;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-bottom: 32px;
  }

  .ticker {
    padding: 14px 0;
  }

  .section {
    padding-top: 40px;
  }

  .nav {
    padding-top: 14px;
  }

  .nav.is-scrolled {
    padding-top: 10px;
  }

  .brand {
    font-size: 18px;
  }

  .brand-icon {
    width: 32px;
    height: 32px;
  }

  .nav-cta {
    min-height: 40px;
    padding-left: 16px;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-cta-arrow {
    width: 32px;
    height: 32px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-stage {
    width: 100%;
  }

  /* There is no room beside the phone, and its screen already shows the topics. */
  .float-topics {
    display: none;
  }

  /* Tucked in over the phone's top edge so nothing runs off a phone-width page. */
  .float-scan {
    top: 14px;
    bottom: auto;
    right: -12px;
    width: 210px;
    gap: 10px;
  }

  .float-scan-icon {
    width: 32px;
    height: 32px;
  }

  .float-scan-title {
    font-size: 13px;
  }

  .float-scan-meta {
    font-size: 11.5px;
  }

  .tile-scan {
    flex-direction: column;
    align-items: stretch;
  }

  .viewfinder {
    margin: 0 auto 14px;
  }

  .topic-chip {
    font-size: 18px;
  }

  .steps-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    justify-items: center;
  }

  .steps-mockup {
    margin-bottom: 8px;
    max-width: min(100%, 340px);
  }

  .finale {
    padding: clamp(72px, 12vw, 120px) var(--gutter);
  }

  .finale-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    justify-items: center;
    text-align: center;
  }

  .finale-content {
    align-items: center;
    text-align: center;
  }

  .finale-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .finale-title {
    margin-top: 28px;
    font-size: clamp(2.4rem, 7vw, 3.8rem);
  }

  .finale-lede {
    margin-left: auto;
    margin-right: auto;
  }

  .finale-mockup {
    justify-content: center;
    margin-top: 8px;
    max-width: min(100%, 420px);
  }

  /* Stacked: the brand and links, then the copyright and the credit, centred. */
  .foot {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .foot-copy,
  .foot-credit {
    justify-self: center;
    text-align: center;
  }

  .foot-credit {
    order: 1;
  }
}

/* MARK: - Phone-size motion */

/* On a phone the room holds still. Redrawing large blurred, blended and glass layers every frame is what
   heats a phone, so those stop where their resting frame looks right, and the hero's lights move only with
   the scroll (home.js, at the same width). The small pieces, the ticker and the viewfinder, keep moving. */
@media (max-width: 900px) {
  .hero-grain {
    display: none;
  }

  .hero-beam {
    transform: rotate(var(--beam-from));
  }

  .hero-beam,
  .hero-haze,
  .phone-glow,
  .phone,
  .finale-mockup-img,
  .steps-mockup-img,
  .float-topics,
  .float-scan,
  .hero-title em:not(.hero-quiet),
  .hero-title .wordmark,
  .ticker-list .topic-chip::after,
  .ambient-blob {
    animation: none;
  }
}

/* MARK: - Reduced motion */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-grain,
  .phone-sweep,
  .viewfinder-beam,
  .ticker-list .topic-chip::after {
    display: none;
  }

  .viewfinder-result {
    opacity: 1;
    transform: translate(-50%, 0);
    animation: none;
  }

  /* Still, the strip would only show its first few topics, so it wraps them instead. */
  .ticker-window {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ticker-track {
    width: auto;
  }

  .ticker-list {
    flex-wrap: wrap;
    flex: 1;
  }

  .ticker-list[aria-hidden="true"] {
    display: none;
  }
}