/* Rchy marketing site, v3.
   Visual language: an architectural drawing set. A faint drafting grid behind
   the hero and the waitlist, crop marks on every image, and Partisans Orange
   used the way a studio uses redline: for strikes, keynotes and the one
   action that matters. One family, Archivo, with its width axis carrying the
   hierarchy.

   v3 adds a light theme. Dark stays the default and the brand; light follows
   the app's light tokens (frontend/src/styles/tokens.css): warm off-white
   paper, black ink, the same orange. Which one shows:
     <html data-theme="light|dark">  an explicit choice (theme-boot.js sets it
                                     from storage before this file paints)
     no data-theme                   the visitor's prefers-color-scheme
   The light block is written twice (media query + attribute) because CSS has
   no way to share one declaration block between the two selectors. Keep them
   identical. Screenshots swap with the same rules: `.tv--dark` / `.tv--light`. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #080808;
  --ink-2: #0d0d0e;
  --panel: #141415;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.28);
  --fg: #f3f2ee;
  --fg-2: rgba(243, 242, 238, 0.72);
  --fg-3: rgba(243, 242, 238, 0.52);
  --red: #ff5a1f;
  --red-2: #ff7a47;
  --red-glow: rgba(255, 90, 31, 0.3);
  --red-ink: #ff5a1f;            /* orange used as text on the page */
  --on-red: #0a0a0a;             /* text on an orange fill, both themes */
  --danger: #ff7b72;
  --fg-strong: #ffffff;
  --ink-rgb: 255, 255, 255;      /* rgba(var(--ink-rgb), a): white-alpha here, black-alpha in light */
  --nav-bg: rgba(8, 8, 8, 0.72);
  --tools-bg: rgba(8, 8, 8, 0.92);
  --panel-glass: rgba(20, 20, 21, 0.88);
  --line-hover: rgba(255, 255, 255, 0.45);
  --shadow-deep: rgba(0, 0, 0, 0.92);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.62' stroke-width='1.5'/%3E%3C/svg%3E");

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --max: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --pad: clamp(72px, 10vw, 136px);
  --nav-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
}

/* Light, by preference (no explicit choice). Identical to the block below. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f7f7f5;
    --ink-2: #efefec;
    --panel: #ffffff;
    --line: rgba(0, 0, 0, 0.07);
    --line-2: rgba(0, 0, 0, 0.13);
    --line-3: rgba(0, 0, 0, 0.26);
    --fg: #141414;
    --fg-2: rgba(20, 20, 20, 0.74);
    --fg-3: rgba(20, 20, 20, 0.62);
    --red-2: #ff6d38;
    --red-glow: rgba(255, 90, 31, 0.28);
    --red-ink: #c23f0b;
    --danger: #c62828;
    --fg-strong: #000000;
    --ink-rgb: 0, 0, 0;
    --nav-bg: rgba(247, 247, 245, 0.78);
    --tools-bg: rgba(247, 247, 245, 0.94);
    --panel-glass: rgba(255, 255, 255, 0.9);
    --line-hover: rgba(0, 0, 0, 0.45);
    --shadow-deep: rgba(30, 24, 18, 0.28);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-opacity='.62' stroke-width='1.5'/%3E%3C/svg%3E");
    color-scheme: light;
  }
}

/* Light, chosen with the toggle. Identical to the block above. */
:root[data-theme="light"] {
  --ink: #f7f7f5;
  --ink-2: #efefec;
  --panel: #ffffff;
  --line: rgba(0, 0, 0, 0.07);
  --line-2: rgba(0, 0, 0, 0.13);
  --line-3: rgba(0, 0, 0, 0.26);
  --fg: #141414;
  --fg-2: rgba(20, 20, 20, 0.74);
  --fg-3: rgba(20, 20, 20, 0.62);
  --red-2: #ff6d38;
  --red-glow: rgba(255, 90, 31, 0.28);
  --red-ink: #c23f0b;
  --danger: #c62828;
  --fg-strong: #000000;
  --ink-rgb: 0, 0, 0;
  --nav-bg: rgba(247, 247, 245, 0.78);
  --tools-bg: rgba(247, 247, 245, 0.94);
  --panel-glass: rgba(255, 255, 255, 0.9);
  --line-hover: rgba(0, 0, 0, 0.45);
  --shadow-deep: rgba(30, 24, 18, 0.28);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-opacity='.62' stroke-width='1.5'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ── theme-specific screenshots ────────────────────────────────────── */

/* Each screenshot is two <picture>s; the one for the other theme is
   display:none, and because every screenshot is loading="lazy" the hidden
   one is never fetched until the theme changes. */
picture.tv {
  display: contents;
}

html .tv--light {
  display: none;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .tv--light {
    display: contents;
  }

  html:not([data-theme="dark"]) .tv--dark {
    display: none;
  }
}

html[data-theme="light"] .tv--light {
  display: contents;
}

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

/* No transition flash while the tokens swap. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

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

html {
  background: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-stretch: 108%;
}

h3 {
  font-size: 22px;
  line-height: 1.2;
  font-stretch: 104%;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--fg);
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--fg-strong);
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--red);
  color: var(--on-red);
  font-weight: 700;
}

.skip:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── drafting grid + crop marks ────────────────────────────────────── */

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 78%);
}

.sheet {
  position: relative;
}

.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.sheet::before {
  top: -8px;
  left: -8px;
  border-top: 1px solid var(--red);
  border-left: 1px solid var(--red);
}

.sheet::after {
  right: -8px;
  bottom: -8px;
  border-right: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
}

/* ── nav ───────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.nav.is-scrolled {
  border-bottom-color: var(--line-2);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--nav-h);
}

.wordmark {
  color: var(--fg);
  text-decoration: none;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.nav__links {
  display: none;
  margin-left: auto;
  gap: 2px;
}

.nav__links a {
  padding: 8px 12px;
  color: var(--fg-2);
  font-size: 15px;
  text-decoration: none;
}

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

.nav__links a[aria-current="true"] {
  box-shadow: inset 0 -1px 0 var(--red);
}

.nav__cta {
  gap: 0;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (min-width: 960px) {
  .nav__links {
    display: flex;
  }

  .nav__actions {
    margin-left: 12px;
  }
}

/* "Join the waitlist" shortens to "Join" where the bar is too narrow for
   the toggle, Log in and the full label (phones under ~430px). */
@media (max-width: 429px) {
  .nav__cta-more {
    display: none;
  }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
  border-color: var(--line-3);
  color: var(--fg);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* The toggle shows what you will switch TO: a sun in dark, a moon in light. */
.theme-toggle .i-moon {
  display: none;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .theme-toggle .i-sun {
    display: none;
  }

  html:not([data-theme="dark"]) .theme-toggle .i-moon {
    display: block;
  }
}

html[data-theme="light"] .theme-toggle .i-sun {
  display: none;
}

html[data-theme="light"] .theme-toggle .i-moon {
  display: block;
}

/* ── log in dialog ─────────────────────────────────────────────────── */

.login {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  overflow: visible;
}

.login::backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.login__panel {
  position: relative;
  padding: clamp(24px, 5vw, 36px);
  border: 1px solid var(--line-2);
  background: var(--panel);
  box-shadow: 0 40px 100px -30px var(--shadow-deep);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

.login__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border-color: transparent;
}

.login h2 {
  padding-right: 40px;
  font-size: clamp(26px, 4vw, 32px);
  font-stretch: 106%;
}

.login__lede {
  margin-top: 10px;
  color: var(--fg-2);
  font-size: 15px;
}

.login__form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.login__form .btn {
  width: 100%;
}

.login__list {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.login__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line-3);
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.login__list a::after {
  content: "\2192";
  color: var(--red-ink);
}

.login__list a:hover {
  border-color: var(--red);
}

.login__list small {
  color: var(--fg-3);
  font-weight: 400;
}

.login__state {
  margin-top: 20px;
}

.login__state:focus,
.login__state-title:focus {
  outline: none;
}

.login__state-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login__state p + p {
  margin-top: 8px;
  color: var(--fg-2);
}

.login__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 22px;
}

/* A step's 'display: grid' must not beat its hidden attribute. */
.login [hidden],
.account [hidden] {
  display: none !important;
}

/* Sign-up vs waitlist calls to action (site.js reveals/hides them from
   /api/signup/config); a .btn's display must not beat hidden. */
[data-signup-cta][hidden],
[data-waitlist-cta][hidden],
[data-waitlist-nav][hidden] {
  display: none !important;
}

.login__actions--tight {
  margin-top: 0;
  justify-content: space-between;
}

.login__note {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--red);
  color: var(--fg-2);
  font-size: 14px;
}

.login__list a[aria-current="true"] {
  border-color: var(--line-2);
  color: var(--fg-3);
}

.login__list a[aria-current="true"]::after {
  content: "current";
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 400;
}

.account {
  max-width: 440px;
  margin: clamp(32px, 8vw, 96px) auto;
  padding: clamp(24px, 5vw, 36px);
  border: 1px solid var(--line-2);
  background: var(--panel);
}

.account h1 {
  font-size: clamp(26px, 4vw, 32px);
}

.login__hint {
  color: var(--fg-3);
  font-size: 14px;
}

/* Turnstile after failed attempts: the widget is a fixed 300 px iframe, so
   it scrolls sideways inside its box on the narrowest phones rather than
   pushing the dialog wider than the screen. */
.login__challenge {
  display: grid;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
}

.login__challenge .login__hint {
  margin: 0;
}

#login-turnstile {
  min-height: 65px;
}

/* ── buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--red);
  color: #0a0a0a;
  box-shadow: 0 10px 34px -12px var(--red-glow);
}

.btn--primary:hover {
  background: var(--red-2);
  color: #0a0a0a;
}

.btn--ghost {
  border-color: var(--line-3);
  background: rgba(var(--ink-rgb), 0.02);
  color: var(--fg);
}

.btn--ghost:hover {
  border-color: var(--fg-2);
  background: rgba(var(--ink-rgb), 0.06);
}

.btn--sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn__play {
  width: 0;
  height: 0;
  border-left: 10px solid var(--red);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.link-btn {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  font-family: var(--font);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--fg);
}

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

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: 56px;
  padding-top: clamp(48px, 8vw, 104px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 72px;
  }
}

.hero__title {
  font-size: clamp(46px, 6.2vw, 92px);
  line-height: 0.96;
  font-weight: 780;
  font-stretch: 104%;
  letter-spacing: -0.04em;
}

.hero__title .line {
  display: block;
}

.hero__lede {
  margin-top: 28px;
  max-width: 36ch;
  color: var(--fg-2);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* "Explore the demo": the read-only demo workspace (docs/saas/DEMO-TENANT.md). */
.hero__demo-note {
  margin-top: 12px;
  color: var(--fg-3);
  font-size: 14px;
}

.hero__credit {
  margin-top: 28px;
  color: var(--fg-3);
  font-size: 14px;
}

.hero__credit a {
  color: var(--fg-2);
}

.hero__art {
  margin: 0;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 16px;
  color: var(--fg-3);
  font-size: 14px;
}

@media (hover: none) {
  .hero__hint {
    display: none;
  }
}

/* One orchestrated entrance, only when JS is running. */
.js .hero__title .line,
.js .hero__lede,
.js .hero__actions,
.js .hero__demo-note,
.js .hero__credit,
.js .hero__art {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .hero__title .line:nth-child(2) { transition-delay: 0.08s; }
.js .hero__lede { transition-delay: 0.18s; }
.js .hero__actions { transition-delay: 0.26s; }
.js .hero__demo-note { transition-delay: 0.29s; }
.js .hero__credit { transition-delay: 0.32s; }
.js .hero__art { transition-delay: 0.14s; transform: translateY(26px) scale(0.985); }

.is-loaded .hero__title .line,
.is-loaded .hero__lede,
.is-loaded .hero__actions,
.is-loaded .hero__demo-note,
.is-loaded .hero__credit,
.is-loaded .hero__art {
  opacity: 1;
  transform: none;
}

/* ── splash + the thirteen tools ───────────────────────────────────── */

.art {
  position: relative;
}

.art img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-3);
  background: var(--panel);
  box-shadow: 0 50px 120px -50px var(--shadow-deep);
}

/* Thirteen jobs, twelve struck out and arrowed into Rchy. Revealed on hover
   or with the button (touch, keyboard). site.js draws the arrows from the
   rendered positions of the struck items, so they follow every layout. */

.tools {
  position: absolute;
  inset: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vw, 36px);
  background: var(--tools-bg);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.hero__art.is-open .tools {
  opacity: 1;
  pointer-events: auto;
}

.tools__title {
  margin-bottom: 12px;
  color: var(--fg-3);
  font-size: 14px;
}

.tools__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(40px, 8vw, 96px);
  align-items: center;
}

.tools__list {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tools__list li {
  padding: clamp(2px, 0.3vw, 4px) 0;
  color: var(--fg-3);
  font-size: clamp(12px, 1.3vw, 17px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tools__list .tools__keep {
  color: var(--fg);
}

.tools__list s {
  text-decoration: none;
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 55% / 0 2px;
  transition: background-size 0.3s ease calc(var(--i, 0) * 45ms + 100ms);
}

.tools__rchy {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--red-ink);
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.01em;
}

.tools__arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tools__arrows .arrow {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.25;
  stroke-opacity: 0.8;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0;
  transition: stroke-dashoffset 0.55s var(--ease) var(--d, 0ms), opacity 0.12s linear var(--d, 0ms);
}

.hero__art.is-open .tools__list s {
  background-size: 100% 2px;
}

.hero__art.is-open .tools__arrows .arrow {
  stroke-dashoffset: 0;
  opacity: 1;
}

@media (hover: hover) {
  .art:hover .tools {
    opacity: 1;
  }

  .art:hover .tools__list s {
    background-size: 100% 2px;
  }

  .art:hover .tools__arrows .arrow {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.tools__note {
  margin-top: 14px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 479px) {
  .tools__title {
    display: none;
  }

  .tools__note {
    margin-top: 10px;
    font-size: 12px;
  }
}

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

.section {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.section > .wrap {
  padding-top: var(--pad);
  padding-bottom: var(--pad);
}

.head {
  display: grid;
  gap: 20px 64px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

@media (min-width: 960px) {
  .head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }
}

.lede {
  max-width: 46ch;
  color: var(--fg-2);
  font-size: clamp(17px, 1.4vw, 19px);
}

.split {
  display: grid;
  gap: 48px 72px;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
}

.side .lede {
  margin-top: 22px;
}

/* ── screenshots ───────────────────────────────────────────────────── */

.shot {
  margin: 0;
  min-width: 0;
}

.shot img,
.stage img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  background: var(--panel);
  box-shadow: 0 40px 100px -40px var(--shadow-deep);
}

.shot--glow img {
  box-shadow: 0 50px 140px -50px var(--red-glow);
}

/* ── see it in action ──────────────────────────────────────────────── */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-2);
  box-shadow: 0 60px 160px -60px var(--red-glow);
}

.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.player__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 0.3s ease, transform 0.8s var(--ease);
}

.player__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.78));
}

.player__facade:hover .player__poster {
  opacity: 1;
  transform: scale(1.012);
}

.player__button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 10px rgba(255, 90, 31, 0.2);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.player__button::before {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  border-left: clamp(16px, 2vw, 24px) solid #0a0a0a;
  border-top: clamp(10px, 1.2vw, 14px) solid transparent;
  border-bottom: clamp(10px, 1.2vw, 14px) solid transparent;
  transform: translate(-50%, -50%);
}

.player__facade:hover .player__button {
  box-shadow: 0 0 0 14px rgba(255, 90, 31, 0.24);
  transform: translate(-50%, -50%) scale(1.06);
}

.player__title {
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  right: 16px;
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 1;
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

.tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

.tile__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--panel);
}

.tile__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.5s var(--ease), opacity 0.3s ease;
}

.tile:hover .tile__thumb img {
  opacity: 1;
  transform: scale(1.04);
}

.tile__len {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile__meta {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.35;
}

.tile__num {
  flex: none;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.tile:hover,
.tile.is-active {
  color: var(--fg);
}

.tile.is-active .tile__thumb {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.tile.is-active .tile__thumb img {
  opacity: 1;
}

.tile.is-active .tile__num {
  color: var(--red-ink);
}

.demo__more {
  margin-top: 28px;
  color: var(--fg-3);
  font-size: 15px;
}

/* Collapsed until someone asks for the films. site.js toggles .is-collapsed
   and makes the hidden player inert; a <noscript> style in the page opens it. */

.demo__toggle {
  margin-top: 28px;
}

.demo__count {
  color: var(--fg-3);
  font-weight: 400;
}

.demo .head {
  transition: margin-bottom 0.5s var(--ease);
}

.demo.is-collapsed .head {
  margin-bottom: 0;
}

.demo__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.55s var(--ease);
}

.demo.is-collapsed .demo__body {
  grid-template-rows: 0fr;
}

/* Room for the crop marks while clipped; overflow opens once expanded. */
.demo__inner {
  min-height: 0;
  margin: -12px -12px 0;
  padding: 12px 12px 0;
  overflow: hidden;
  visibility: visible;
}

/* Hide the padding band (and its crop mark) once the close finishes. */
.demo.is-collapsed .demo__inner {
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}

.demo.is-settled .demo__inner {
  overflow: visible;
}

/* ── one record ────────────────────────────────────────────────────── */

.chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.chain::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--red), rgba(255, 90, 31, 0.25));
}

.chain li {
  position: relative;
  justify-self: center;
  padding: 8px 12px;
  border: 1px solid var(--line-3);
  background: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 520px) {
  .chain li {
    padding: 6px 7px;
    font-size: 12px;
  }
}

/* ── what's inside: pinned screen, scrolling features ──────────────── */

.scroller {
  display: grid;
}

.step {
  padding: 28px 0 44px;
  border-top: 1px solid var(--line);
}

.step h3 {
  font-size: clamp(22px, 2vw, 28px);
}

.step p {
  margin-top: 12px;
  max-width: 40ch;
  color: var(--fg-2);
}

.step__shot {
  margin-top: 24px;
}

.scroller__stage {
  display: none;
}

@media (min-width: 960px) {
  .scroller {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 72px;
  }

  .step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52vh;
    padding: 0 0 0 28px;
    border-top: 0;
    border-left: 1px solid var(--line-2);
    opacity: 0.35;
    transition: opacity 0.35s ease, border-color 0.35s ease;
  }

  .step.is-active {
    border-left-color: var(--red);
    opacity: 1;
  }

  .step__shot {
    display: none;
  }

  .scroller__stage {
    display: block;
  }

  .stage {
    position: sticky;
    top: max(calc(var(--nav-h) + 32px), calc(50vh - 190px));
    aspect-ratio: 16 / 10;
  }

  .stage img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.45s ease, transform 0.6s var(--ease);
  }

  .stage img.is-active {
    opacity: 1;
    transform: none;
  }
}

/* ── task to invoice ───────────────────────────────────────────────── */

.timeline {
  position: relative;
  display: grid;
  gap: 28px;
  margin: 0 0 clamp(48px, 6vw, 72px);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.timeline li {
  position: relative;
  padding-left: 44px;
  counter-increment: step;
}

.timeline li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--red);
  background: var(--ink);
  color: var(--red-ink);
  font-size: 13px;
  font-weight: 700;
}

.timeline p {
  margin-top: 6px;
  max-width: 30ch;
  color: var(--fg-2);
}

@media (min-width: 800px) {
  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }

  .timeline::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 0;
    top: 14px;
    height: 1px;
    background: linear-gradient(90deg, var(--red), var(--line-2));
  }

  .timeline li {
    padding-left: 0;
    padding-top: 48px;
  }
}

/* ── AI: an annotated screen with keynotes ─────────────────────────── */

.annotated {
  display: grid;
  gap: 40px 64px;
}

@media (min-width: 960px) {
  .annotated {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: center;
  }
}

.keynote,
.keynotes li::before {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #0a0a0a;
  font-size: 13px;
  font-weight: 800;
}

.keynote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.24);
  transform: translate(-50%, -50%);
}

.keynotes {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: key;
}

.keynotes li {
  position: relative;
  padding: 18px 0 18px 44px;
  border-top: 1px solid var(--line);
  counter-increment: key;
}

.keynotes li::before {
  content: counter(key);
  position: absolute;
  left: 0;
  top: 18px;
}

.keynotes h3 {
  font-size: 19px;
}

.keynotes p {
  margin-top: 4px;
  color: var(--fg-2);
}

.annotated__more {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
}

/* ── studio ────────────────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 36px 0 0;
  border-top: 1px solid var(--line-2);
}

.facts > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 18px 12px 0 0;
}

.facts > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.facts dt {
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.3;
}

.facts dd {
  margin: 0;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  font-weight: 750;
  font-stretch: 112%;
  letter-spacing: -0.04em;
}

/* ── coming next + questions ───────────────────────────────────────── */

.duo {
  display: grid;
  gap: 64px 72px;
}

@media (min-width: 960px) {
  .duo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.roadmap {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.roadmap li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
}

.roadmap li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border: 1px solid var(--red);
}

.faq {
  margin-top: 28px;
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  color: var(--fg-3);
  font-size: 24px;
  font-weight: 300;
  transform: translateY(-50%);
}

.faq details[open] summary::after {
  content: "\2212";
  color: var(--red-ink);
}

.faq details p {
  max-width: 60ch;
  padding-bottom: 22px;
  color: var(--fg-2);
}
.faq details .faq-list {
  max-width: 60ch;
  margin: -10px 0 0;
  padding: 0 0 22px 1.2em;
  color: var(--fg-2);
}
.faq details .faq-list li { margin: 0 0 6px; }

/* ── waitlist ──────────────────────────────────────────────────────── */

.waitlist {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}

.waitlist .grid-bg {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 50%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 75% 50%, #000 20%, transparent 72%);
}

.waitlist:focus {
  outline: none;
}

.waitlist__inner {
  position: relative;
}

.waitlist__panel {
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line-2);
  background: var(--panel-glass);
}

.form {
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--fg-2);
  font-size: 14px;
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-3);
  border-radius: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
}

.field select {
  appearance: none;
  padding-right: 40px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.field input:hover,
.field select:hover {
  border-color: var(--line-hover);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -1px;
}

.field input[aria-invalid="true"] {
  border-color: var(--danger);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--red);
}

.check label {
  margin: 0;
  color: var(--fg);
  font-size: 15px;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#turnstile:empty {
  display: none;
}

.form__error {
  color: var(--danger);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.form__note {
  flex: 1 1 16rem;
  color: var(--fg-3);
  font-size: 14px;
}

.form__success:focus {
  outline: none;
}

.form__success-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 750;
  font-stretch: 108%;
  letter-spacing: -0.03em;
}

.form__success p + p {
  margin-top: 12px;
  color: var(--fg-2);
}

/* ── footer ────────────────────────────────────────────────────────── */

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  padding-top: 32px;
  padding-bottom: 40px;
  color: var(--fg-3);
  font-size: 14px;
}

.footer__inner .wordmark {
  margin-right: auto;
  font-size: 18px;
}

.footer__inner a {
  color: var(--fg-2);
}

/* ── simple pages (privacy, 404) ───────────────────────────────────── */

.page > .wrap {
  padding-top: var(--pad);
  padding-bottom: var(--pad);
}

.page h1 {
  font-size: clamp(44px, 6vw, 80px);
  font-stretch: 104%;
  letter-spacing: -0.04em;
}

.prose {
  max-width: 40rem;
  margin-top: 40px;
}

.prose h2 {
  margin-top: 40px;
  font-size: 22px;
  font-stretch: 104%;
  letter-spacing: -0.015em;
}

.prose p,
.prose ul {
  margin-top: 12px;
  color: var(--fg-2);
}

.prose ul {
  padding-left: 20px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .hero__title .line,
  .js .hero__lede,
  .js .hero__actions,
  .js .hero__credit,
  .js .hero__art {
    opacity: 1;
    transform: none;
  }
}