/* MakeItHappen invite page. Tokens are the app's own (src/index.css @theme), so the page and the
   product are the same colour: the zoom into the laptop lands on the same background it left. */

:root {
  --bg: #0d0f14;
  --panel: #131620;
  --raised: #1a1d28;
  --high: #222633;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --surface: rgba(255, 255, 255, 0.04);
  --accent: #4b8df8;
  /* The same blue, deep enough to carry white text at AA (4.70:1 vs 3.25:1). ONLY for a
     solid fill with white on it: buttons and the ticked consent box. Everything else
     keeps --accent, so the page still lands on the colour the app left. */
  --accent-solid: #3170db;
  --accent-hover: #3a7ce8;
  --accent-light: #7db2ff;
  --accent-pale: #d6e6ff;
  --text: #f0f1f4;
  --text-2: #9aa0ab;
  /* Raised from #5f6672 (3.31:1, under AA at the 12-13px it is used at) to 5.04:1 on the
     page and 4.77:1 on a panel. Launch audit, 2026-09-21. */
  --text-3: #7c838f;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --sans: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 64px;
  --gutter: clamp(20px, 4vw, 48px);
}

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

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis,
html.lenis body {
  height: auto;
  scroll-behavior: auto;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 8px;
}
::selection {
  background: rgba(75, 141, 248, 0.4);
}

.wrap {
  width: min(1180px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ───────── type ───────── */

.display {
  font-weight: 800;
  font-size: clamp(38px, 6.1vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display--md {
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05;
}
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.line > span {
  display: block;
}
.line--grad > span,
.grad {
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-light) 55%, var(--accent-pale) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  color: var(--text-2);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  max-width: 56ch;
  text-wrap: pretty;
}
.lede + .lede {
  margin-top: 14px;
}
.display + .lede {
  margin-top: 20px;
}
.eyebrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 18px;
}
.eyebrow span + span::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-3);
  margin-right: 10px;
  vertical-align: middle;
}

/* ───────── buttons, pills ───────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  background: var(--accent-solid);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  isolation: isolate;
  transition: background 0.25s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); /* no coloured shadow under it: no glow anywhere on this page */
  will-change: transform;
}
.btn:hover {
  background: var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn:active {
  transform: scale(0.98);
}
.btn svg {
  width: 20px;
  height: 20px;
}
.btn--sm {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 11px;
}
.btn--wide {
  width: 100%;
}
.btn--ghost {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.btn.is-loading span {
  opacity: 0;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(75, 141, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(75, 141, 248, 0.35);
}
.pill--live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
}

.link {
  display: inline-flex;
  gap: 8px;
  margin-top: 26px;
  font-weight: 700;
  color: var(--accent-light);
  border-bottom: 1px solid rgba(125, 178, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.25s, color 0.25s;
}
.link:hover {
  color: #fff;
  border-color: #fff;
}

/* ───────── progress + nav ───────── */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s, box-shadow 0.4s, transform 0.5s var(--ease);
}
.nav.is-solid {
  background: rgba(13, 15, 20, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 -1px 0 var(--line);
}
.tabs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(19, 22, 32, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tabs a {
  height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.tabs a:hover {
  color: var(--text);
}
.tabs a.is-on {
  color: #fff;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
@media (max-width: 1080px) {
  .tabs {
    display: none;
  }
}
.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__login {
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: rgba(19, 22, 32, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line-2);
  white-space: nowrap;
  transition: background 0.25s, box-shadow 0.25s;
}
.nav__login:hover {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.ctaband__actions {
  display: grid;
  justify-items: center;
  gap: 12px;
}
.ctaband__login {
  font-size: 14px;
  color: var(--text-2);
}
.ctaband__login b {
  color: var(--accent-light);
  font-weight: 700;
}
.ctaband__login:hover b {
  color: #fff;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 17px;
}
.brand__mark {
  width: 28px;
  height: 28px;
}

/* ───────── hero ───────── */

.hero {
  position: relative;
  height: 350vh;
  height: 350svh;
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0; /* no backlight: the laptop sits on the plain page colour, over a faint grid */
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 60%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 50% 60%, #000 0%, transparent 75%);
  opacity: 0.55;
}
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
#stage.is-ready {
  opacity: 1;
}
.hero__fallback {
  position: absolute;
  left: 50%;
  bottom: 2vh;
  transform: translateX(-50%);
  height: min(56vh, 600px);
  width: auto;
  max-width: 94vw;
  object-fit: contain;
}
.hero__fallback[hidden] {
  display: none;
}
/* No WebGL: there is nothing to scrub through, so the hero is one screen tall. */
.no-3d .hero {
  height: 100vh;
  height: 100svh;
}
.no-3d .beat,
.no-3d .hero__landing {
  display: none;
}
.hero__copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: calc(var(--nav-h) + clamp(8px, 3vh, 38px)) var(--gutter) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.hero__copy > * {
  pointer-events: auto;
}
.hero__copy .eyebrow {
  margin-bottom: 14px;
}
.hero__copy .display {
  font-size: clamp(34px, 4.7vw, 70px);
}
.hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.beat {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(36px, 9vh, 96px);
  padding: 0 var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-shadow: 0 2px 30px rgba(13, 15, 20, 0.9);
}
.beat strong {
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* A caption that wraps on a phone splits evenly instead of leaving one word alone on the last
     line ("I run a $25k a month / agency." read as a stumble, 2026-09-19). */
  text-wrap: balance;
}
.beat span {
  color: var(--text-2);
  font-size: clamp(15px, 1.3vw, 19px);
  text-wrap: balance;
}
.beat[data-beat='3'] {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
.beat[data-beat='3'] strong {
  font-size: clamp(44px, 8vw, 120px);
  text-shadow: 0 4px 60px rgba(13, 15, 20, 0.95), 0 0 24px rgba(13, 15, 20, 0.8);
}

.hero__landing {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 var(--gutter);
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
}
.hero__landing .display {
  max-width: 14ch;
}
.buildtime {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(26px, 5vh, 46px);
  padding: 14px 26px 14px 22px;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}
.buildtime strong {
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 3.1ch; /* the count runs up from zero: hold the width so the label does not slide */
  background: linear-gradient(92deg, #fff 10%, var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.buildtime span {
  color: var(--text-2);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.4;
  font-weight: 500;
}

.scrollhint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin-left: -46px;
  width: 92px;
  padding: 8px 0 9px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(13, 15, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.scrollhint i {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--accent-light), transparent);
  transform-origin: 50% 0;
  animation: drip 1.9s var(--ease) infinite;
}
@keyframes drip {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* Intro: lines rise, the rest follows. Only when scripts are running. */
.js .hero__copy .line > span {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
}
.js .hero__copy .eyebrow,
.js .hero__copy .hero__cta,
.js .scrollhint {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .is-in .hero__copy .line > span {
  transform: none;
}
.js .is-in .hero__copy .line:nth-child(2) > span {
  transition-delay: 0.09s;
}
.js .is-in .hero__copy .line:nth-child(3) > span {
  transition-delay: 0.18s;
}
.js .is-in .hero__copy .eyebrow,
.js .is-in .hero__copy .hero__cta {
  opacity: 1;
  transform: none;
}
.js .is-in .hero__copy .hero__cta {
  transition-delay: 0.44s;
}
.js .is-in .scrollhint {
  opacity: 1;
  transform: none;
  transition-delay: 1.2s;
}

/* ───────── sections ───────── */

section {
  position: relative;
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.agents,
.inside,
.story,
.reels,
.deal,
.join {
  padding: clamp(34px, 5vh, 56px) 0;
}
.head {
  max-width: 760px;
  margin-bottom: clamp(22px, 3.5vh, 40px);
}
.head--center {
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.head .lede {
  margin-top: 18px;
}

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Claude and Codex: the run in a terminal, and the same run as it shows on the task. */
/* "Claude and Codex" has to hold one line in the text column at every width, so the heading is two lines. */
#agents .display--md {
  font-size: clamp(32px, 3.9vw, 53px);
}
.agents__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.wired {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
}
.wired__logo {
  height: 52px;
  padding: 0 16px 0 14px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 30px -16px rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.wired__logo svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.wired__logo--claude svg,
.tablogo--claude {
  color: #d97757; /* Claude's own mark colour */
}
.wired__logo--mih {
  width: 52px;
  padding: 0;
  justify-content: center;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.7px var(--accent);
}
.wired__line {
  flex: 0 1 46px;
  min-width: 14px;
  height: 0;
  border-top: 2px dashed rgba(125, 178, 255, 0.45);
}
.tablogo {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -2px;
}
.tablogo svg {
  width: 15px;
  height: 15px;
}
.agents .ticks {
  margin-top: 26px;
}
.agents__link {
  margin-top: 30px;
}
.ctarow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.ctarow--story {
  margin-top: 28px;
}
.ctarow--story .link {
  margin-top: 0;
}
.ctaband {
  margin-top: clamp(24px, 4vh, 44px);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 40px);
  border-radius: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  background: linear-gradient(100deg, rgba(75, 141, 248, 0.16), rgba(75, 141, 248, 0.04) 60%), var(--panel);
  box-shadow: inset 0 0 0 1px rgba(75, 141, 248, 0.28);
}
.ctaband__title {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.agents__show {
  position: relative;
  padding-bottom: clamp(70px, 9vw, 120px);
}
.term {
  position: relative;
  z-index: 1;
  width: 88%;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0c11;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -30px rgba(0, 0, 0, 0.95);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 46px;
  padding: 0 14px;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line);
}
.term__dots {
  display: inline-flex;
  gap: 7px;
}
.term__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--high);
}
.term__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg);
}
.term__tabs button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.term__tabs button:hover {
  color: var(--text-2);
}
.term__tabs button.is-on {
  background: var(--raised);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.term__body {
  padding: 20px 22px 24px;
  display: grid;
  gap: 9px;
  min-height: 292px;
  align-content: start;
}
.term__line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--text-2);
}
.term__line i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  transform: translateY(-1px);
}
.term__line--cmd {
  color: var(--text);
}
.term__line--cmd b {
  color: var(--accent-light);
}
.term__line--you {
  color: var(--text);
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--accent);
  margin-bottom: 4px;
}
.term__line--ok {
  color: var(--ok);
}
.term__line--ok i {
  background: var(--ok);
}
/* The run plays out line by line once the terminal is on screen (and again when the tab changes). */
.js .term .term__line {
  opacity: 0;
  transform: translateY(6px);
}
.js .term.is-in .term__line {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  transition-delay: calc(0.35s + var(--n) * 0.32s);
}
.agents__shot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 68%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px -24px rgba(0, 0, 0, 0.95);
  --d: 0.5s;
}
.agents__shot img {
  width: 100%;
  height: auto;
}
.agents__shot figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  height: 26px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(13, 15, 20, 0.85);
  box-shadow: inset 0 0 0 1px rgba(75, 141, 248, 0.35);
}

/* Feature stack: each card sticks, the next one slides over it. */
.stack {
  display: grid;
  gap: 28px;
}
.feature {
  position: sticky;
  top: calc(var(--nav-h) + 20px + var(--i) * 14px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(22px, 3vw, 44px);
  border-radius: 28px;
  background: linear-gradient(180deg, #161a26 0%, var(--panel) 100%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 -18px 50px -20px rgba(0, 0, 0, 0.7);
  transform-origin: 50% 0;
  will-change: transform;
  overflow: hidden;
}
/* Dims the card underneath as the next one slides over (main.js scrubs --dim). */
.feature::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg);
  opacity: var(--dim, 0);
  pointer-events: none;
}
.feature h3 {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 16px 0 14px;
  text-wrap: balance;
}
.feature p {
  color: var(--text-2);
  max-width: 44ch;
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(75, 141, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(75, 141, 248, 0.3);
}
.tag--amber {
  color: var(--warn);
  background: rgba(251, 191, 36, 0.1);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3);
}
.tag--green {
  color: var(--ok);
  background: rgba(52, 211, 153, 0.1);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3);
}
.tag--sky {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.1);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
}
.ticks {
  margin-top: 20px;
  display: grid;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}
.ticks li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ticks li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%2334d399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.feature__shot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  transform: perspective(1400px) rotateY(var(--ry, -7deg)) rotateX(var(--rx, 2deg));
  transform-origin: 0 50%;
  will-change: transform;
}
.feature__shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 0 0;
}
/* The full board is too dense at card size: show its top left corner, large enough to read. */
.feature__shot--zoom img {
  width: 150%;
  max-width: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 44px);
}
.chips li {
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font-weight: 600;
  font-size: 14.5px;
}
.chips::before {
  content: 'Also inside';
  width: 100%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}

/* Marquee */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(8px, 2vh, 20px) 0;
  border-block: 1px solid var(--line);
  background: var(--bg);
}
/* The title card is centred in a full screen, which left a third of a screen of nothing under it
   once the pin let go. The band rides up over that empty strip, to about 65px under the card,
   whatever the screen height. Only where the scrubbed hero exists: the one-screen hero (reduced
   motion, no WebGL) has its buttons down there. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-3d) .marquee {
    margin-top: calc(-1 * max(0px, (100svh - 440px) / 2));
  }
}
/* The title card is shorter on a phone, so the band can ride up further. Same condition as above:
   written inside the plain phone block it also hit the one-screen reduced-motion hero and sat the
   band on top of its buttons. */
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  html.js:not(.no-3d) .marquee {
    margin-top: calc(-1 * max(0px, (100svh - 360px) / 2));
  }
}
.marquee__track {
  display: flex;
  gap: clamp(28px, 4vw, 64px);
  width: max-content;
  will-change: transform;
}
.marquee__track span {
  font-size: clamp(44px, 8vw, 116px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: rgba(240, 241, 244, 0.42);
  white-space: nowrap;
}
.marquee__track span:nth-child(3n + 1) {
  color: transparent;
  background: linear-gradient(92deg, var(--accent), var(--accent-pale));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Story: his photo, the why, then the three numbers underneath. */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.story__photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line-2), 0 40px 100px -40px rgba(0, 0, 0, 0.95);
}
.story__photo img {
  width: 100%;
  height: 112%; /* a little taller than its frame: main.js slides it as the section scrolls by */
  object-fit: cover;
  object-position: 50% 30%;
  will-change: transform;
}
.story__photo::after {
  content: '';
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(13, 15, 20, 0.9));
  pointer-events: none;
}
.story__photo figcaption {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: grid;
  gap: 2px;
}
.story__photo figcaption strong {
  font-size: 19px;
  letter-spacing: -0.02em;
}
.story__photo figcaption span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(20px, 3.5vh, 36px);
}
.stat {
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 10px;
}
.stat:nth-child(2) {
  --d: 0.08s;
}
.stat:nth-child(3) {
  --d: 0.16s;
}
.stat dt {
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(92deg, #fff 20%, var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat dd {
  color: var(--text-2);
  font-weight: 500;
}

/* Instagram rail */
.reels {
  overflow: hidden;
}
.rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 14px max(var(--gutter), calc((100vw - 1180px) / 2)) 26px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - 1180px) / 2));
  perspective: 1400px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar {
  display: none;
}
/* Auto margins only take up space that is actually free, so a short rail centres and a long one still scrolls from the start. */
.rail > :first-child {
  margin-left: auto;
}
.rail > :last-child {
  margin-right: auto;
}
.rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.rail.is-dragging a {
  pointer-events: none;
}
.reel {
  position: relative;
  flex: 0 0 clamp(230px, 23vw, 300px);
  aspect-ratio: 3 / 4.2;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transform: rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: box-shadow 0.4s var(--ease);
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}
.reel:hover {
  box-shadow: inset 0 0 0 1px rgba(125, 178, 255, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.reel img,
.reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.9s var(--ease), opacity 0.5s;
}
.reel video {
  opacity: 0;
}
.reel.is-playing video {
  opacity: 1;
}
.reel:hover img,
.reel:hover video {
  transform: scale(1.05);
}
.reel__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 15, 20, 0.35) 0%, transparent 28%, transparent 48%, rgba(13, 15, 20, 0.92) 100%);
}
.reel__type {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(13, 15, 20, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.reel__type svg {
  width: 16px;
  height: 16px;
}
.reel__meta {
  position: absolute;
  inset: auto 16px 16px 16px;
  display: grid;
  gap: 8px;
}
.reel__cap {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reel__stats {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
}
.reel__stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.reel__stats svg {
  width: 13px;
  height: 13px;
}
.reel--follow {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background: var(--panel);
}
.reel--follow img {
  position: static;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
.reel--follow strong {
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.reel--follow small {
  color: var(--text-2);
  font-size: 14px;
}
.reel--follow em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-light);
}
.rail__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.rail__nav[hidden] {
  display: none;
}
.iconbtn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.iconbtn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.06);
}
.iconbtn svg {
  width: 20px;
  height: 20px;
}

/* Deal */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: step;
}
.step {
  padding: 22px 24px 24px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.step:nth-child(2) {
  --d: 0.1s;
}
.step:nth-child(3) {
  --d: 0.2s;
}
.step h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.step__n {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-light);
  background: rgba(75, 141, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(75, 141, 248, 0.3);
}
.step p {
  color: var(--text-2);
  padding-left: 44px;
}

/* Join */
.join {
  padding-top: clamp(10px, 2vh, 24px);
  padding-bottom: clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.join::before {
  content: '';
  position: absolute;
  inset: 10% 0 0 0;
  background: none;
  pointer-events: none;
}
.join__wrap {
  position: relative;
}
.card {
  position: relative;
  width: min(520px, 100%);
  margin-inline: auto;
  padding: clamp(26px, 4vw, 40px);
  border-radius: 28px;
  background: linear-gradient(180deg, #171b28 0%, var(--panel) 100%);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 50px 120px -40px rgba(0, 0, 0, 0.9);
}
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  min-width: 0;
}
.fieldrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.field input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 0;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-weight: 500;
  transition: box-shadow 0.25s, background 0.25s;
  outline: none;
}
.field input::placeholder {
  color: var(--text-3);
}
.field input:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.field input:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: #0f1219;
}
.field.is-bad input {
  box-shadow: inset 0 0 0 2px var(--bad);
}
.field__at {
  position: relative;
}
.field__at span {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-weight: 700;
  pointer-events: none;
}
.field__at input {
  padding-left: 34px;
}
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
/* After the request: the two accounts to follow, one full-width row each, same size. */
.follows {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.follow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  text-align: left;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.follow:hover {
  background: #0f1219;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  transform: translateY(-1px);
}
.follow__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent-light);
  background: rgba(75, 141, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(75, 141, 248, 0.3);
}
.follow__icon svg {
  width: 21px;
  height: 21px;
}
.follow__text {
  display: grid;
  min-width: 0;
}
.follow__text b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.follow__text small {
  font-size: 12.5px;
  color: var(--text-3);
}
.follow__cta {
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: var(--accent-solid);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.done p strong {
  color: var(--text);
  font-weight: 700;
}
.done__note {
  font-size: 13.5px !important;
  color: var(--text-3) !important;
}
.form__error {
  color: var(--bad);
  font-size: 14px;
  font-weight: 600;
  margin: -2px 0 14px;
}
/* Referral code lookup status (2026-09-26). Quiet by default — a code that doesn't resolve, or a
   lookup that fails outright, must never read as a form error: nothing here blocks the signup. */
.ref__status {
  margin: -4px 0 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.ref__status[hidden] {
  display: none;
}
.ref__status[data-ref-status='ok'] {
  color: var(--ok);
}
.ref__status[data-ref-status='unknown'],
.ref__status[data-ref-status='error'] {
  color: var(--text-3);
  font-weight: 500;
}
.form__fine {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.done {
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
  outline: none;
}
.done[hidden],
.form__error[hidden] {
  display: none;
}
.done h3 {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.done p {
  color: var(--text-2);
  max-width: 42ch;
}
.done p strong {
  color: var(--text);
}
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
}

/* The landing page's last section: one big invitation, the form itself is on its own page. */
.lastcall {
  padding: clamp(4px, 1vh, 12px) 0 clamp(48px, 7vh, 88px);
}
.ctaband--big {
  padding: clamp(28px, 4vw, 52px);
}
.ctaband--big .ctaband__title {
  font-size: clamp(30px, 4.4vw, 56px);
}
.ctaband--big .eyebrow {
  margin-bottom: 12px;
}
.ctaband--big .lede {
  margin-top: 10px;
}
.ctaband--big .btn {
  height: 60px;
  padding: 0 34px;
  font-size: 17px;
}

/* /invite/request/: the form and nothing else. No menu, no links out, nothing to scroll past. */
.solo {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.solo__top {
  padding: calc(18px + env(safe-area-inset-top)) var(--gutter) 0;
  display: flex;
  justify-content: center;
}
.solo__main {
  flex: 1;
  width: min(560px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(24px, 5vh, 56px) 0 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.solo__main .head {
  margin-bottom: clamp(18px, 3vh, 30px);
}
.solo__main .head .lede {
  margin-top: 10px;
}
.solo__main .card {
  width: 100%;
}
.solo.is-done .solo__main .head {
  display: none;
}
.solo.is-done .solo__main {
  justify-content: center;
}
.solo__foot {
  text-align: center;
  padding: 0 var(--gutter) calc(22px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--text-3);
}

@media (max-width: 860px) {
  .solo__top {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .solo__top .brand__mark {
    width: 24px;
    height: 24px;
  }
  .solo__top .brand {
    font-size: 15px;
  }
  .solo__main {
    padding: 14px 0 12px;
    justify-content: flex-start;
  }
  .solo__main .display {
    font-size: 30px;
  }
  .solo__main .head {
    margin-bottom: 14px;
  }
  .solo__main .head .lede {
    margin-top: 4px;
    font-size: 15px;
  }
  .solo .card {
    padding: 18px 16px 16px;
    border-radius: 22px;
  }
  .solo .field {
    gap: 5px;
    margin-bottom: 10px;
  }
  .solo .field label {
    font-size: 12px;
  }
  .solo .field input {
    height: 46px;
    border-radius: 12px;
    padding: 0 14px;
  }
  .solo .field__at input {
    padding-left: 32px;
  }
  .solo .btn--wide {
    height: 50px;
    margin-top: 4px;
  }
  .solo .form__fine {
    margin-top: 10px;
    font-size: 12px;
  }
  .solo__foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    font-size: 12px;
  }
}

/* Footer */
.foot {
  border-top: 1px solid var(--line);
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
  color: var(--text-3);
  font-size: 14px;
}
.foot__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.foot a {
  color: var(--text-2);
  transition: color 0.2s;
}
.foot a:hover {
  color: #fff;
}
.foot span {
  margin: 0 10px;
}

/* ───────── small screens ───────── */

@media (max-width: 860px) {
  :root {
    --nav-h: 58px;
  }
  .brand .pill {
    display: none;
  }
  .brand {
    gap: 8px;
    font-size: 15.5px;
  }
  .brand__mark {
    width: 26px;
    height: 26px;
  }
  .nav__actions {
    gap: 6px;
  }
  .nav__login {
    height: 38px;
    padding: 0 11px;
    font-size: 13.5px;
  }
  .nav .btn--sm {
    height: 38px;
    padding: 0 12px;
    font-size: 13.5px;
  }
  .hero__copy {
    padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 6px);
  }
  .hero__copy .eyebrow {
    margin-bottom: 10px;
  }
  .hero__copy .display {
    font-size: clamp(30px, 8.7vw, 42px);
  }
  /* On a phone the buttons sit under the laptop, by the thumb. */
  .hero__cta {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(64px + env(safe-area-inset-bottom));
    margin: 0;
    flex-wrap: nowrap;
  }
  .hero__cta .btn {
    flex: 1;
    padding: 0 12px;
    font-size: 15px;
  }
  .hero__fallback {
    bottom: calc(136px + env(safe-area-inset-bottom));
    height: min(40vh, 360px);
  }
  .scrollhint {
    bottom: max(6px, env(safe-area-inset-bottom));
    padding: 5px 0 6px;
    gap: 4px;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .scrollhint i {
    height: 18px;
  }
  /* On a phone the laptop owns the lower half while it turns, so the captions ride in the empty
     space above it (Zac, 2026-09-19: the caption sat on top of the laptop's base). */
  .beat[data-beat='1'],
  .beat[data-beat='2'] {
    top: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(28px, 7vh, 72px));
    bottom: auto;
  }
  .beat strong {
    font-size: clamp(28px, 8.4vw, 40px);
  }
  .beat span {
    font-size: 15.5px;
    max-width: 30ch;
    margin-inline: auto;
  }
  /* The dive ends with the whole laptop in frame on a phone, so "And it's free." goes above it
     like the other two captions instead of across the dashboard. */
  .beat[data-beat='3'] {
    top: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(20px, 5vh, 56px));
    bottom: auto;
    transform: none;
  }
  .beat[data-beat='3'] strong {
    font-size: clamp(38px, 12vw, 56px);
  }
  /* Instagram heading stacks: keep its follow button in the middle. */
  .head--row .btn {
    margin-inline: auto;
  }
  .ctaband {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .ctaband .eyebrow {
    justify-content: center;
    width: 100%;
  }
  .ctaband .lede {
    margin-inline: auto;
  }
  .ctarow .btn {
    flex: 1 1 100%;
  }
  .ctarow--story .link {
    margin-inline: auto;
  }
  .feature {
    grid-template-columns: 1fr;
    gap: 20px;
    border-radius: 24px;
    top: calc(var(--nav-h) + 12px + var(--i) * 10px);
  }
  .feature__shot {
    order: -1;
    transform: none;
    border-radius: 12px;
  }
  .feature h3 {
    margin: 12px 0 10px;
  }
  .ticks {
    margin-top: 14px;
    font-size: 14px;
  }
  .agents__grid {
    grid-template-columns: 1fr;
  }
  .wired__logo {
    height: 46px;
    padding: 0 12px 0 10px;
    font-size: 14px;
  }
  .wired__logo--mih {
    width: 46px;
    padding: 0;
  }
  .agents__show {
    padding-bottom: 0;
  }
  .term {
    width: 100%;
    font-size: 12.5px;
  }
  .term__body {
    padding: 16px 16px 20px;
    min-height: 0;
  }
  .agents__shot {
    position: relative;
    width: 100%;
    margin-top: 14px;
  }
  .story__grid {
    grid-template-columns: 1fr;
  }
  .story__photo {
    aspect-ratio: 1 / 1;
    border-radius: 24px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stat {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 20px 22px;
  }
  .stat dd {
    text-align: right;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .reel {
    flex-basis: 68vw;
    scroll-snap-align: center;
  }
  .rail {
    scroll-padding-inline: 16vw;
    padding-inline: 16vw;
  }
  .head--row {
    align-items: flex-start;
  }
  .fieldrow {
    grid-template-columns: 1fr;
  }
  .fieldrow {
    gap: 0;
  }
}

/* ───────── calm mode ───────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero {
    height: 100vh;
    height: 100svh;
  }
  .js .reveal,
  .js .hero__copy .line > span,
  .js .hero__copy .eyebrow,
  .js .hero__copy .hero__cta,
  .js .scrollhint {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .scrollhint i,
  .pill--live i {
    animation: none;
  }
  .js .term .term__line {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .feature {
    position: relative;
    top: auto;
  }
  .feature__shot {
    transform: none;
  }
  .story__photo img {
    height: 100%;
  }
}

/* Last in the file on purpose: these have to beat the phone block above. */
@media (max-width: 400px) {
  .brand {
    font-size: 15px;
  }
  .nav__login {
    padding: 0 9px;
  }
  .nav .btn--sm {
    padding: 0 10px;
  }
}
/* Between tablet and a full desktop the centred tabs would run into the brand's "Invite only" pill. */
@media (max-width: 1280px) {
  .brand .pill {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Support access consent, on the request form. Ticked by default (Zac, 2026-09-20).
   A real checkbox, kept focusable and only visually replaced, so it still works with a
   keyboard and reads correctly to a screen reader. No glow on focus: a crisp border, like
   every other field on this page.
   ───────────────────────────────────────────────────────────────────────────── */
.consent {
  margin: 4px 0 18px;
  padding: 14px 16px 13px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.consent__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}
.consent input {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
}
.consent__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.consent__box svg {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.consent input:checked + .consent__box {
  background: var(--accent-solid);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.consent input:checked + .consent__box svg {
  opacity: 1;
}
.consent input:focus-visible + .consent__box {
  box-shadow: inset 0 0 0 2px var(--accent-light);
}
.consent__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.consent__text b {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.consent__link {
  display: inline-block;
  margin: 9px 0 0 31px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__link:hover {
  color: var(--accent-pale);
}

/* UNUSED since 2026-09-26: the struck-through $199 anchor was dropped when the price moved to $149
   (nobody ever paid $199, so it was a "was" price with nothing behind it). Kept only so a page that
   still carries one does not lose its styling. The original note follows.
   The standard list price, struck through beside the price actually charged (Zac, 2026-09-21:
   "make sure it has next to the $49, normally is $199"). $199 USD/month is a real, active price
   on the MakeItHappen product in Stripe, not a decorative number. Muted and a touch smaller so it
   reads as the anchor and never as the amount being charged. A base rule, deliberately at the end
   of the file and outside every media query: a phone override placed above its base rule never
   applies, and this repo has been caught by that twice in one day. */
.was {
  margin-right: 0.35em;
  opacity: 0.5;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* The offer, presented the way Shopify presents theirs: three plain rows (when, what), the
   promo price struck through against THIS billing line's own price, never against $199 (that
   anchors the $49 row elsewhere on the page, never the $1 row here). Plain hairline card, no
   glow, matching every other panel on this page. Deliberately appended at the end of the file,
   after .was, so a later phone override for .offer can simply be added below it and never land
   above its own base rule (2026-09-21 offer rebuild). */
.offer {
  max-width: 480px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.offer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 22px;
}
.offer__row + .offer__row {
  border-top: 1px solid var(--line);
}
.offer__when {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.offer__what {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: right;
}
.offer__fine {
  max-width: 480px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
}
.offer__fine strong {
  color: var(--text-2);
  font-weight: 700;
}
@media (max-width: 860px) {
  .offer__row {
    padding: 13px 18px;
  }
  .offer__what {
    font-size: 15.5px;
  }
}

/* The deal section, two columns (2026-09-21). It was a 760px .head over a 480px .offer over a
   full-width 1180px .steps row, so the three blocks lined up with nothing and the right half of
   the section was empty. Same shape as .story__grid, which is the page's own two-column pattern.
   Appended at the END of the file on purpose, after .offer's own base rules, so these win and so
   the phone override below can never land above the rule it overrides. */
.deal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
/* Inside a grid column the head owns the column, not a 760px slice of it, and the gap below it is
   the grid's job now. */
.deal__grid .head {
  max-width: none;
  margin-bottom: 0;
}
.deal__offer .offer,
.deal__offer .offer__fine {
  max-width: none;
}
.deal .steps {
  margin-top: clamp(30px, 5vh, 56px);
}
@media (max-width: 980px) {
  .deal__grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vh, 34px);
  }
  /* Stacked, the card reads better held to its own width than stretched across the page. */
  .deal__offer .offer,
  .deal__offer .offer__fine {
    max-width: 480px;
  }
}

/* A quiet note after a tick, for the one thing on the page that runs on credits (2026-09-26, Zac:
   "all AI usage is paid per credit"). Muted and lighter than the tick so the tick still reads first;
   nowrap keeps "AI, paid per credit" in one piece, so on a narrow phone it drops below the tick
   whole rather than splitting. A base rule at the end of the file, outside every media query. */
.tick__note {
  font-style: normal;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}