/* salesengineer.ai landing page and privacy page. The look is the owner's 2026-09-18 redesign
   (docs/design/salesengineer-landing/landing-v2.dc.html, planned in
   docs/superpowers/plans/2026-09-18-landing-redesign.md): Hyros's styling in our own Cobalt
   palette. Its inline styles live here as classes and its colours as the custom properties below.
   Where the build departs from that mockup (the form's layout, the demo panel's table, fixed widths
   that become max-widths) the plan says why. */

/* Fonts are served from this site, never from Google Fonts (D14). Each file is the latin subset of
   the family's variable font from the Google Fonts CSS API (Brygada 1918 spans weights 400 to 700,
   Inter and Geist Mono 100 to 900); each @font-face below offers only 400 to 500, the weights the
   pages use. None of the three licences reserves a font name, so the subset is allowed. Licences
   sit beside the files in fonts/. Hyros sets its headings in P22 Mackinac, a paid face; Brygada
   1918 is the closest free one. No italic file ships, so nothing on either page is set in italic. */
@font-face {
  font-family: "Brygada 1918";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/Brygada1918-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/Inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/GeistMono-latin.woff2") format("woff2");
}

:root {
  /* Page palette (Cobalt) */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --alt: #fbfcfd;
  --tint: #e9edf8;
  --accent-tint: #eef2fd;
  --footer-bg: #eef0f4;
  --ink: #111318;
  --body: #3b404a;
  --muted: #5e6470;
  --muted-on-tint: #4f5663;
  --rule: #e1e4ea;
  --field-rule: #cfd4dd;
  --accent: #2448d8;
  --on-accent: #ffffff;
  --selection: #d9e1fb;
  --focus-ring: rgba(36, 72, 216, 0.2);
  --shadow: 0 30px 70px -36px rgba(17, 19, 24, 0.5);
  --shadow-soft: 0 20px 50px -34px rgba(17, 19, 24, 0.4);
  --shadow-card: 0 10px 30px -18px rgba(17, 19, 24, 0.3);

  /* Dark surfaces: the hero's demo panel, the "live" column and the picture frames */
  --panel: #111216;
  --panel-rule: #25272d;
  --panel-text: #e8eaee;
  --panel-dim: #7a7f8a;
  --live-bg: #2a1512;
  --live-text: #f0b39a;
  --live-dot: #e4553a;
  --live-bullet: #7d95f5;
  --window-dot: #34363d;
  --tile-rule: #22242a;
  --tile-bg: #0b0c0f;
  --tile-visitor: #3e6f74;
  --tile-label: #a9adb6;
  --avatar-rule: #2a2c33;
  --browser-bg: #0d0e11;
  --browser-bar: #15161a;
  --address-text: #8f94a0;
  --light-red: #e0574a;
  --light-amber: #e3b341;
  --light-green: #4fa65b;
  --app-rule: #1d1f24;
  --app-text: #858a96;
  --app-brand: #c96a3e;
  --app-current: #1b1d22;
  --app-blue: #1b4bd8;
  --app-white: #fff;
  --table-head: #14151a;
  --row-name: #d9748f;
  --row-dim: #686d78;
  --orb-light: #aebcf2;
  --orb-mid: #3a4f9e;
  --orb-dark: #141a33;
  --orb-ring: rgba(36, 72, 216, 0.22);
  --orb-ring-clear: rgba(36, 72, 216, 0);

  /* Type */
  --serif: "Brygada 1918", Georgia, serif;
  --sans: "Inter", Helvetica, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  /* The hero headline and the waitlist headline share this size (V9). */
  --display-size: clamp(38px, 4.4vw, 62px);

  /* Spacing: content sits in a 1116 px column, as on the mockup at 1440 px wide. */
  --container: 1116px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(56px, 6vw, 80px);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  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(--accent);
}

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

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

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

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

.wordmark {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

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

/* 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 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
}

a.button:hover,
button.button:not(:disabled):hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.button--ghost {
  border-color: var(--field-rule);
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
}

a.button--ghost:hover {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}

.button--small {
  padding: 8px 14px;
  font-size: 14px;
}

/* 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 ---------- */

/* The padding centres the header's content in the page's column without a wrapper element; the
   privacy page's header, which holds only the wordmark, shares it. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px max(var(--gutter), calc((100% - var(--container)) / 2));
  border-bottom: 1px solid var(--rule);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  font-size: 14px;
}

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

.site-nav a:not(.button) {
  color: var(--body);
}

.site-nav a:not(.button):hover {
  color: var(--accent);
}

/* Five nav items stop fitting beside the wordmark below about 760 px, so from there down the nav
   takes its own row and wraps. */
@media (max-width: 760px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .site-nav {
    width: 100%;
    gap: 10px 18px;
    font-size: 13px;
  }
}

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

/* Side by side only where the text column keeps at least 380 px; the frame gives way first. */
.hero {
  display: grid;
  grid-template-columns: minmax(min(100%, 380px), 1fr) minmax(0, 564px);
  gap: clamp(32px, 4vw, 54px);
  align-items: center;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(48px, 5vw, 72px);
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The problem, named before the result the headline promises (owner, 2026-09-18). */
.hero-problem {
  margin: -2px 0 16px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.hero-title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: var(--display-size);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

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

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 336px);
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.guarantee {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 498px;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
}

.tick {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

/* The pale frame the demo panel sits in. Its fixed height is the mockup's on wide screens only; on
   a phone the frame hugs the panel with little padding, so the panel keeps the width its one-line
   labels need. */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 600px;
  padding: 40px 22px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--tint);
}

@media (max-width: 1024px) {
  .hero-visual {
    min-height: 0;
    padding: 24px 14px;
  }
}

@media (max-width: 480px) {
  .hero-visual {
    padding: 10px 8px;
    border-radius: 12px;
  }
}

/* The smallest phones (320 px) need every pixel for the panel's browser, so the frame goes. */
@media (max-width: 360px) {
  .hero-visual {
    padding: 0;
    border: 0;
    background: none;
  }
}

/* ---------- 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;
  width: 100%;
  min-width: 0;
  padding: clamp(14px, 1.5vw, 18px);
  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-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.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, 50px);
  height: clamp(38px, 4vw, 50px);
  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;
}

/* ---------- Sections ---------- */

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

/* A section that follows the one above it without a rule: "How it works" under the problem, and
   the waitlist box under the video. */
.section--flush {
  border-top: none;
}

.section--alt {
  background: var(--alt);
}

.wrap {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

.wrap--flush-top {
  padding-top: 0;
}

/* An optional line icon, the eyebrow and the heading, centred over the section. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  text-align: center;
}

.section-icon {
  margin-bottom: 20px;
  color: var(--ink);
}

.icon-accent {
  stroke: var(--accent);
}

.section-title {
  max-width: 20em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Bordered white cards: the problem and safety points, and the columns of the offer. */
.cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}

.card-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

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

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
}

/* ---------- The offer ---------- */

.offer-card {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.offer-columns {
  display: grid;
}

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

.offer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.5vw, 32px);
}

.offer-column + .offer-column {
  border-top: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .offer-column + .offer-column {
    border-top: none;
    border-left: 1px solid var(--rule);
  }
}

.offer-column--guarantee {
  background: var(--accent-tint);
}

.offer-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
}

.offer-column--guarantee .offer-label {
  color: var(--accent);
}

.offer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 14px 24px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}

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

.offer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}

/* ---------- How it works ---------- */

.how-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: clamp(14px, 3.4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--tint);
}

.how-title {
  margin: 0;
  padding: 24px 32px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-align: center;
}

.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}

@media (max-width: 480px) {
  .step {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

.step-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--rule);
  background: var(--accent-tint);
  color: var(--accent);
}

.step-number {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
}

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

.compare {
  display: grid;
  gap: 24px;
  align-items: start;
}

@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: 12px;
  background: var(--surface);
}

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

.compare-body {
  padding: clamp(20px, 2.4vw, 26px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 36px);
}

.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-bullet);
}

/* ---------- Window frames ---------- */

/* A dark app-window frame around a product picture: the proof screenshot, the video and the live
   column above. The bar is decoration and hidden from screen readers. */
.window {
  overflow: hidden;
  border: 1px solid var(--panel-rule);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tile-rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--address-text);
}

.window-dots {
  display: flex;
  gap: 5px;
}

.window-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--window-dot);
}

.window-address {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  letter-spacing: 0.04em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.proof {
  max-width: 980px;
  margin: 0 auto;
}

.proof img {
  width: 100%;
}

.proof figcaption {
  max-width: 720px;
  margin: 20px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  text-align: center;
  text-wrap: pretty;
}

/* ---------- Explainer video ---------- */

/* The section's markup is fixed by build.mjs and its tests, so its heading and line are centred
   here rather than wrapped in a .section-head. The waitlist box follows close beneath it (V8). */
#video > .wrap {
  padding-bottom: clamp(24px, 3vw, 48px);
}

.video-title {
  margin: 0 auto 16px;
  text-align: center;
}

.video-text {
  max-width: 46em;
  margin: 0 auto 40px;
  font-size: clamp(17px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--body);
  text-align: center;
  text-wrap: pretty;
}

/* The player's frame, in the window's materials. The frame clips the video to its own rounded
   corners, which is what a border-radius on the <video> itself cannot be relied on to do. */
.video-frame {
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--panel-rule);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--panel);
}

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

/* The box sits inside the section's own gutters; .waitlist-layout is the .wrap, re-cut as a card. */
#waitlist {
  padding: clamp(24px, 3vw, 48px) var(--gutter) var(--section-pad);
}

.waitlist-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: var(--container);
  padding: clamp(32px, 5vw, 64px) clamp(18px, 5.5vw, 80px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--tint);
  text-align: center;
}

.waitlist-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.waitlist-intro .eyebrow {
  color: var(--muted-on-tint);
}

/* The form is where the video leaves the visitor, so this headline is set at the hero headline's
   size, and its line and button one step up from the rest of the page (V9). */
.waitlist-title {
  max-width: 900px;
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: var(--display-size);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.waitlist-text {
  max-width: 560px;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.waitlist-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, 640px);
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
}

/* The two fields share a row while there is room for both; the button sits on its own line below
   them, then the status line (waitlist-phone spec, "Form order"). */
.waitlist-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.waitlist-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--field-rule);
  border-radius: 6px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
}

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

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

.waitlist-button {
  padding: 15px 30px;
  font-size: 17px;
}

/* 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-on-tint);
}

/* The policy link beside the form. Underlined like the footer's links, in the body colour rather
   than the muted text around it, so it reads as the one thing here you can click. */
.waitlist-privacy-link {
  color: var(--ink);
  text-decoration: underline;
  white-space: nowrap;
}

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

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  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(19px, 1.8vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

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

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

/* 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(--accent), var(--accent)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 14px no-repeat;
}

.faq-item[open] summary::after {
  background: linear-gradient(var(--accent), var(--accent)) 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);
}

/* ---------- Privacy policy ---------- */

/* One reading column in the landing page's type: the headline serif for the page title, the card
   serif for each heading, and the FAQ answers' body text. */
.policy {
  max-width: 44em;
}

.policy-title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.policy-heading {
  margin: 44px 0 12px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.policy p,
.policy li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}

.policy p,
.policy ul {
  margin: 0 0 12px;
}

.policy ul {
  padding-left: 1.3em;
}

/* Scoped under .policy so it outranks the body-text rules above. */
.policy .policy-updated {
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.policy ul ul {
  margin: 8px 0 0;
}

.policy li + li {
  margin-top: 8px;
}

.policy li::marker {
  color: var(--accent);
}

/* Links in the policy are underlined (waitlist-phone spec, "Page copy"). The Reddit policy's long
   address may break anywhere, so it never pushes a 320 px screen sideways. */
.policy a {
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.policy code {
  font-family: var(--mono);
  font-size: 0.9em;
}

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

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

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 32px var(--gutter);
}

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

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.footer-link,
.footer-note {
  font-size: 14px;
}

.footer-note {
  color: var(--muted-on-tint);
}

/* Footer links are underlined (waitlist-phone spec, "Page copy"), unlike the header's. */
.footer-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-link:hover {
  color: var(--accent);
}

/* ---------- 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);
  }
}

/* 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 {
    animation: none;
  }
}