/* salesengineer.ai landing page. The look is the owner's mockup
   (docs/design/salesengineer-landing/landing.dc.html): its inline styles live here as classes, its
   colours as the custom properties below, and its style-hover / style-focus attributes as :hover and
   :focus-visible rules. Sections the mockup does not have reuse its "How it works" type scale,
   spacing and eyebrow. */

/* Fonts are served from this site, never from Google Fonts (D14). IBM Plex is IBM's own
   unmodified woff2 (Reserved Font Name "Plex", so never subset here); Instrument Serif is the latin
   file from the Google Fonts CSS API. Licences sit beside the files in fonts/. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InstrumentSerif-Regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
}

:root {
  /* Page palette */
  --cream: #f7f4ee;
  --ink: #1c1815;
  --rust: #a5522f;
  --body: #3a332c;
  --muted: #736a5f;
  --rule: #e4dccd;
  --paper: #f2ede4;
  --field: #fffdf8;
  --field-rule: #d9cfbc;
  --selection: #e8dfcf;
  --shadow: 0 30px 70px -36px rgba(28, 24, 21, 0.5);

  /* Dark surfaces: the hero panel, the statement band and the "live" column */
  --night: #151210;
  --panel: #121010;
  --panel-rule: #2a2522;
  --panel-text: #ede7de;
  --panel-dim: #7e7568;
  --live-bg: #2a1512;
  --live-text: #f0b39a;
  --live-dot: #e4553a;
  --tile-rule: #262120;
  --tile-bg: #0c0a0a;
  --tile-visitor: #3e6f74;
  --tile-label: #b4aaa0;
  --avatar-rule: #2e2a28;
  --browser-bg: #0e0c0c;
  --browser-bar: #161313;
  --address-text: #9c9287;
  --light-red: #e0574a;
  --light-amber: #e3b341;
  --light-green: #4fa65b;
  --app-rule: #201c1b;
  --app-text: #8c8378;
  --app-brand: #c96a3e;
  --app-current: #1e1a19;
  --app-blue: #1b4bd8;
  --app-white: #fff;
  --table-head: #171414;
  --row-name: #d9748f;
  --row-dim: #6e665d;
  --orb-light: #c9a48e;
  --orb-mid: #6b4433;
  --orb-dark: #241715;
  --glow-stone: #6c6055;
  --glow-stone-clear: rgba(108, 96, 85, 0);
  --glow-cream: #f6f0e6;
  --glow-cream-clear: rgba(246, 240, 230, 0);
  --glow-rust-clear: rgba(165, 82, 47, 0);
  --horizon: #0d0b0a;
  --shade-strong: rgba(21, 18, 16, 0.9);
  --shade-mid: rgba(21, 18, 16, 0.6);
  --shade-weak: rgba(21, 18, 16, 0.1);
  --orb-ring: rgba(165, 82, 47, 0.22);
  --orb-ring-clear: rgba(165, 82, 47, 0);
  --focus-ring: rgba(165, 82, 47, 0.18);

  /* Type */
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "IBM Plex Sans", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", monospace;

  /* Spacing */
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(56px, 7vw, 104px);
}

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

html {
  background: var(--cream);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--rust);
}

::selection {
  background: var(--selection);
}

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

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

/* ---------- Shared pieces ---------- */

.wordmark {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark-tld,
.accent {
  color: var(--rust);
}

.accent {
  font-style: italic;
}

/* Off the visible page but still announced by a screen reader — unlike .waitlist-honeypot below,
   nothing here needs hiding from a bot, so the standard clip technique (no bare `display: none`)
   is all this needs. */
.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;
}

.eyebrow {
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
}

/* The mockup's "How it works" label, which heads its section on its own. */
.eyebrow--lead {
  margin-bottom: 48px;
}

.button {
  display: inline-block;
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

a.button:hover,
button.button:not(:disabled):hover {
  background: var(--rust);
  color: var(--cream);
}

/* Carried from the Task 6 review: without this, a disabled button reads as active except for the
   cursor. Covers every disabled moment in "Form states" (before the script has loaded, with
   JavaScript off, while sending, and after a save) since all four are the same `disabled` attribute
   under the hood. */
button.button:disabled {
  cursor: default;
  opacity: 0.5;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px var(--gutter);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a {
  white-space: nowrap;
}

.nav-pill {
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

.nav-pill:hover {
  background: var(--ink);
  color: var(--cream);
}

/* Four nav items do not fit beside the wordmark on a phone, so the nav takes its own row. */
@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-block: 22px 8px;
  }

  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .nav-pill {
    padding: 8px 12px;
  }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(56px, 7vw, 104px);
}

.hero-title {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(46px, 6.4vw, 92px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.hero-subline {
  max-width: 34em;
  margin: 0 0 36px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.guarantee {
  max-width: 26em;
  margin: 0 0 36px;
  padding-left: 22px;
  border-left: 3px solid var(--rust);
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero-note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- Hero demo panel ---------- */

/* A size container, so the panel rearranges by its own width rather than the viewport's. */
.demo-panel {
  container: panel / inline-size;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 1.5vw, 20px);
  border: 1px solid var(--panel-rule);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--panel-text);
}

.panel-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.panel-brand {
  font-weight: 500;
}

.panel-mode {
  color: var(--panel-dim);
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--live-bg);
  color: var(--live-text);
  font-size: 9.5px;
  letter-spacing: 0.12em;
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-dot);
  animation: tick 1.6s ease-in-out infinite;
}

.panel-stage {
  display: grid;
  grid-template-columns: minmax(78px, 0.9fr) 3fr;
  gap: 12px;
  align-items: stretch;
}

.tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--tile-rule);
  border-radius: 8px;
  background: var(--tile-bg);
}

.tile--visitor {
  border-color: var(--tile-visitor);
}

.orb,
.avatar {
  width: clamp(38px, 4vw, 54px);
  height: clamp(38px, 4vw, 54px);
  border-radius: 50%;
}

.orb {
  background: radial-gradient(30% 28% at 34% 28%, var(--orb-light) 0%, var(--orb-mid) 42%, var(--orb-dark) 100%);
  animation: orb 3.4s ease-in-out infinite;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--avatar-rule);
  font-size: 17px;
  color: var(--panel-text);
}

.tile-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--tile-label);
  white-space: nowrap;
}

/* In a narrow panel the two call tiles sit side by side above the browser, which then has the
   whole width for its one-line labels. */
@container panel (max-width: 460px) {
  .panel-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .tiles {
    flex-direction: row;
  }

  .tile {
    min-width: 0;
    min-height: 96px;
  }
}

.browser {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tile-rule);
  border-radius: 8px;
  background: var(--browser-bg);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--tile-rule);
  background: var(--browser-bar);
}

.traffic {
  display: flex;
  gap: 4px;
}

.traffic span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--light-red);
}

.traffic span:nth-child(2) {
  background: var(--light-amber);
}

.traffic span:nth-child(3) {
  background: var(--light-green);
}

.address {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--tile-bg);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--address-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) 2.4fr;
  min-height: 196px;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 10px;
  border-right: 1px solid var(--app-rule);
  font-size: 11px;
  color: var(--app-text);
  white-space: nowrap;
}

.app-brand {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--app-brand);
}

.app-current {
  margin: -3px -6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--app-current);
  color: var(--panel-text);
}

.app-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

/* The narrowest phones: a little less inner padding keeps the browser's labels whole. */
@container panel (max-width: 300px) {
  .app-nav,
  .app-main {
    padding-inline: 8px;
  }
}

.app-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--app-text);
  white-space: nowrap;
}

.app-new {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--app-blue);
  color: var(--app-white);
  letter-spacing: 0.04em;
}

.app-tabs {
  display: flex;
  gap: 6px;
  font-size: 10.5px;
  white-space: nowrap;
}

.app-tab {
  padding: 4px 6px;
  color: var(--app-text);
}

.app-tab--current {
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--app-blue);
  color: var(--app-white);
}

/* The rows share one set of columns (subgrid), so the date and version columns are never narrower
   than their widest cell, header included, and only the name gives way, with an ellipsis. */
.app-table {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(max-content, 1.1fr) minmax(max-content, 0.9fr);
  column-gap: 8px;
  overflow: hidden;
  border: 1px solid var(--app-rule);
  border-radius: 5px;
  font-size: 10.5px;
  white-space: nowrap;
}

.app-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding: 9px 10px;
  border-top: 1px solid var(--app-rule);
}

.app-row--head {
  padding: 7px 10px;
  border-top: none;
  background: var(--table-head);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  color: var(--app-text);
}

.app-name {
  overflow: hidden;
  font-family: var(--mono);
  color: var(--row-name);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-date {
  color: var(--tile-label);
}

.app-version {
  color: var(--row-dim);
}

.panel-caption {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--app-rule);
}

.panel-step {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--panel-dim);
}

.panel-quote {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--panel-text);
  text-wrap: pretty;
}

/* ---------- Statement band ---------- */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--night);
}

.band-glows {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.glow {
  position: absolute;
}

.glow--1 {
  left: -60%;
  top: -40%;
  width: 220%;
  height: 150%;
  background: radial-gradient(60% 50% at 40% 50%, var(--glow-stone) 0%, var(--glow-stone-clear) 70%);
  filter: blur(60px);
  animation: drift1 26s ease-in-out infinite alternate;
}

.glow--2 {
  left: -50%;
  top: -20%;
  width: 200%;
  height: 140%;
  background: radial-gradient(55% 42% at 55% 45%, var(--glow-cream) 0%, var(--glow-cream-clear) 68%);
  filter: blur(70px);
  opacity: 0.55;
  animation: drift2 34s ease-in-out infinite alternate;
}

.glow--3 {
  left: -40%;
  bottom: -45%;
  width: 190%;
  height: 130%;
  background: radial-gradient(60% 48% at 45% 55%, var(--rust) 0%, var(--glow-rust-clear) 66%);
  filter: blur(64px);
  opacity: 0.8;
  animation: drift3 21s ease-in-out infinite alternate;
}

.glow--4 {
  left: -30%;
  bottom: -70%;
  width: 170%;
  height: 120%;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  background: var(--horizon);
  filter: blur(18px);
  animation: drift4 29s ease-in-out infinite alternate;
}

.band-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--shade-strong) 0%, var(--shade-mid) 46%, var(--shade-weak) 100%);
}

.band-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(80px, 11vw, 168px) var(--gutter);
}

.band-statement {
  max-width: 24em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: pretty;
}

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

.section {
  border-top: 1px solid var(--rule);
}

/* The band already draws the rule above this one. */
.section--after-band {
  border-top: none;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

.section-title {
  max-width: 16em;
  margin: 0 0 48px;
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.items {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .items--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .items--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .items--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.item--ruled {
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

/* The guarantee's rust rule, reused for the page's other promises. */
.item--marked {
  padding-left: 22px;
  border-left: 3px solid var(--rust);
}

.step-number {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--rust);
}

.item-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.item-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

/* ---------- Why live ---------- */

.compare {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 800px) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.compare-col {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.compare-col--live {
  border-color: var(--panel-rule);
  background: var(--night);
  box-shadow: var(--shadow);
  color: var(--panel-text);
}

.compare-title {
  margin-bottom: 20px;
}

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

.compare-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}

.compare-list li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--muted);
}

.compare-col--live .compare-list li {
  border-top-color: var(--panel-rule);
  color: var(--panel-text);
}

.compare-col--live .compare-list li::before {
  width: 6px;
  height: 6px;
  margin-inline: 4px;
  border-radius: 50%;
  background: var(--live-dot);
}

/* ---------- Proof ---------- */

.proof {
  margin: 0;
}

.proof img {
  width: 100%;
  border: 1px solid var(--panel-rule);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.proof figcaption {
  max-width: 46em;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

/* ---------- FAQ ---------- */

.faq-layout {
  display: grid;
  gap: clamp(8px, 2vw, 72px);
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}

.faq-list {
  border-bottom: 1px solid var(--rule);
}

.faq-item {
  border-top: 1px solid var(--rule);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}

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

.faq-item summary:hover {
  color: var(--rust);
}

/* A plus that loses its upright bar once the answer is open. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--rust), var(--rust)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--rust), var(--rust)) center / 1.5px 14px no-repeat;
}

.faq-item[open] summary::after {
  background: linear-gradient(var(--rust), var(--rust)) center / 14px 1.5px no-repeat;
}

.faq-item p {
  max-width: 40em;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

/* ---------- Waitlist ---------- */

.waitlist-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

.waitlist-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.waitlist-text {
  max-width: 30em;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--body);
}

.waitlist-side,
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.waitlist-form {
  margin: 0;
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.waitlist-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 16px 22px;
  border: 1px solid var(--field-rule);
  border-radius: 999px;
  outline: none;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
}

.waitlist-input::placeholder {
  color: var(--muted);
}

.waitlist-input:focus-visible {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.waitlist-button {
  padding: 16px 30px;
}

/* A wrapper a real visitor never sees: zero-sized and clipping its own content, so the input inside
   it (moved off to the side, D-decisions) never widens the page or shows up in its layout — unlike
   `display: none`, which some bots detect and skip, this field still has ordinary box dimensions. */
.waitlist-honeypot {
  position: relative;
  width: 0;
  height: 0;
  overflow: hidden;
}

.waitlist-honeypot input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.waitlist-status,
.waitlist-noscript,
.waitlist-privacy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px var(--gutter);
}

.wordmark--footer {
  font-size: 20px;
}

.footer-note {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Motion ---------- */

@keyframes tick {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes orb {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--orb-ring);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 14px var(--orb-ring-clear);
  }
}

@keyframes drift1 {
  from {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
  to {
    transform: translate3d(14%, 6%, 0) scaleY(1.25);
  }
}

@keyframes drift2 {
  from {
    transform: translate3d(6%, 4%, 0) scaleY(1.1);
  }
  to {
    transform: translate3d(-12%, -6%, 0) scaleY(0.85);
  }
}

@keyframes drift3 {
  from {
    transform: translate3d(-8%, 3%, 0) scaleY(0.9);
  }
  to {
    transform: translate3d(12%, -5%, 0) scaleY(1.2);
  }
}

@keyframes drift4 {
  from {
    transform: translate3d(-6%, 4%, 0) scaleX(1);
  }
  to {
    transform: translate3d(8%, -3%, 0) scaleX(1.15);
  }
}

/* No animation exists at all for a visitor who asked for less motion — not a shortened one. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .live-dot,
  .orb,
  .glow {
    animation: none;
  }
}