@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-500.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bone: #f3f1ec;
  --bone-dim: #e2ded6;
  --bone-deep: #d9d3c8;
  --surface: #fbfaf7;
  --surface-muted: #ebe7df;
  --ink: #211f1c;
  --ink-soft: #5e5a53;
  --ink-faint: #6b665e;
  --slate: #2f5963;
  --ochre: #b67a1f;
  --face: #2a2724;
  --face-down: #7a2e2e;
  --face-inert: #3c3833;
  --face-inert-down: #6a3030;
  --slab-inert: #b9b2a6;
  --face-inert-edge: #5c574f;
  --on-face: #f3f1ec;
  --hairline: #c7c0b5;
  --hairline-strong: #afa79a;
  --slab: #15130f;

  /*
    Night. Mirrored from `night` in mobile/lib/theme.ts, where it dresses the
    app's onboarding, and guarded by site/test/palette.test.mjs the same way the
    bone palette is.

    The rule the two surfaces share: dark is everything before you are in, bone
    is the product itself. So the page and the app's sign-up run on night, and
    the moment you are paired the app turns bone — which is also why the latch
    demo below stays bone while the page around it does not. That panel is the
    app, not the page.
  */
  --night-high: #2b2824;
  --night-mid: #1e2124;
  --night-low: #131211;
  --night-ink: #f3f1ec;
  --night-ink-soft: #a9a399;
  --night-ink-faint: #949086;
  --night-slate: #4e8593;
  --night-ochre: #d9a244;
  /* Oxblood lifted until it reads on a dark ground. Decoration only: the real
     oxblood still means a person is upset, and it lives on the latch. */
  --night-oxblood: #c98a80;
  /* The mark's second piece is darker than the text oxblood on purpose. It has
     to contrast with the bone piece beside it rather than with the background,
     and at 34px the two halves merge into one blob if they are close in value. */
  --night-mark: #b45b52;

  --glass: rgba(243, 241, 236, 0.07);
  --glass-lifted: rgba(243, 241, 236, 0.12);
  --glass-border: rgba(243, 241, 236, 0.14);

  --latch-height: 132px;
  --latch-depth: 8px;
  --page: 1120px;
  /* One rhythm for the whole page. Two adjacent sections leave twice this. */
  --section: clamp(2.75rem, 5vw, 4.5rem);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--night-low);
  color: var(--night-ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/*
  The same two passes the app's onboarding uses: a vertical ramp with a cool
  slate-shifted middle, then a diagonal bloom over it. One flat ramp reads as a
  black rectangle; the temperature shift is what stops it.

  Fixed rather than scrolling, because the app's gradient fills a screen rather
  than a document, and a page this long would otherwise stretch it into bands.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(78, 133, 147, 0.16), rgba(78, 133, 147, 0) 62%),
    linear-gradient(180deg, var(--night-high) 0%, var(--night-mid) 55%, var(--night-low) 100%);
}

a {
  color: inherit;
}

.site-header,
main,
footer {
  width: min(calc(100% - 3rem), var(--page));
  margin-inline: auto;
}

.site-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--night-ink);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.brand--small {
  font-size: 1rem;
}

.brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-block;
}

.brand-mark__left,
.brand-mark__right {
  position: absolute;
  top: 6px;
  width: 12px;
  height: 22px;
  border-radius: 5px;
}

/* Bone where the bone page used ink, so the pair stays two-tone on night. */
.brand-mark__left {
  left: 5px;
  background: var(--night-ink);
  box-shadow: 7px -1px 0 -1px var(--night-ink);
}

.brand-mark__right {
  right: 5px;
  background: var(--night-mark);
  box-shadow: -7px 1px 0 -1px var(--night-mark);
}

.header-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--night-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.header-link:hover {
  color: var(--night-ink);
}

main {
  padding: clamp(2rem, 5vw, 4.5rem) 0 5rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(380px, 1.12fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
  min-height: min(640px, calc(100vh - 84px));
}

.hero__copy {
  max-width: 31rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--night-oxblood);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1 {
  margin: 0;
  font-size: clamp(3.1rem, 7vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 600;
}

h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.05em;
  font-weight: 600;
}

h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 650;
}

p {
  margin: 0;
}

.lede {
  margin-top: 1.5rem;
  color: var(--night-ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.28rem);
  line-height: 1.55;
}

strong {
  color: var(--night-ink);
  font-weight: 650;
}

/*
  The room. It dims when anyone is mad, exactly as the app's does: light falls
  off at the top and bottom while the middle band — where every word sits —
  stays at bone-dim, so nothing turns red and nothing loses contrast.

  Built as a gradient layer cross-fading over the flat surface rather than as a
  transition on the background itself, because CSS cannot transition a gradient.
  The app does the identical thing with an animated opacity over a solid canvas.
*/
.hero__demo {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--hairline);
  border-radius: 32px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  /* On night this panel is the one bone object on the page, so it gets the
     depth of a screen lying on a surface rather than a flat patch of colour. */
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5);
  transition: border-color 420ms ease;
}

.hero__demo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--bone-deep) 0%,
    var(--bone-dim) 30%,
    var(--bone-dim) 70%,
    var(--bone-deep) 100%
  );
  opacity: 0;
  transition: opacity 420ms ease;
}

.hero__demo:has(.latch--down)::before {
  opacity: 1;
}

.hero__demo:has(.latch--down) {
  border-color: var(--hairline-strong);
}

.plate {
  width: min(100%, 430px);
}

.plate__side {
  display: grid;
  gap: 0.7rem;
}

.plate__name {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
}

.plate__note {
  min-height: 1.3em;
  color: var(--ink-faint);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
}

.plate__rule {
  height: 1px;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  background: var(--hairline-strong);
}

.latch {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--latch-height) + var(--latch-depth));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: none;
}

/*
  Their button. No cursor, no hover, no press state, and no handlers in
  latch.js. You can see it and you cannot move it, which is the honest thing
  rather than a gap in the design.
*/
.latch--indicator {
  cursor: default;
}

.latch--indicator .latch__slab {
  background: var(--slab-inert);
}

.latch--indicator .latch__face {
  background: var(--face-inert);
  border: 1px solid var(--face-inert-edge);
}

.latch__slab {
  position: absolute;
  inset: var(--latch-depth) 0 0 0;
  background: var(--slab);
  border-radius: 14px;
}

.latch__face {
  position: absolute;
  inset: 0 0 var(--latch-depth) 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--face);
  display: grid;
  place-items: center;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1), background-color 260ms ease;
}

.latch--down .latch__face {
  background: var(--face-down);
  transform: translateY(var(--latch-depth));
}

.latch__fill {
  position: absolute;
  inset: 0;
  background: var(--face-down);
  transform: translateY(100%);
}

.latch--down .latch__fill {
  background: var(--face);
  transform: translateY(-100%);
}

.latch__label {
  position: relative;
  color: var(--on-face);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The latch is the one control on bone, so it keeps the bone-side slate. */
.latch:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 4px;
}

.waitlist input:focus-visible,
.waitlist button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--night-slate);
  outline-offset: 4px;
}

.waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.waitlist--hero {
  margin-top: 2rem;
}

.waitlist input[type='email'] {
  flex: 1 1 13rem;
  min-width: 0;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-lifted);
  color: var(--night-ink);
  font: inherit;
}

.waitlist input[type='email']::placeholder {
  color: var(--night-ink-faint);
}

.waitlist button {
  min-height: 52px;
  padding: 0.8rem 1.2rem;
  border: 0;
  /* The app's PrimaryPill: bone, fully rounded, dark label. */
  border-radius: 999px;
  background: var(--night-ink);
  color: var(--night-low);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.waitlist button:hover:not(:disabled) {
  opacity: 0.86;
}

.waitlist button:disabled {
  cursor: default;
  opacity: 0.45;
}

.says {
  flex-basis: 100%;
  min-height: 1.3em;
  color: var(--night-ink-soft);
  font-size: 0.875rem;
}

.says--wrong {
  color: var(--night-oxblood);
}

.microcopy {
  margin-top: 0.65rem;
  color: var(--night-ink-faint);
  font-size: 0.78rem;
}

.plain-promise {
  margin: var(--section) 0;
  padding: 1.4rem 0;
  border-block: 1px solid var(--glass-border);
  color: var(--night-ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  text-align: center;
}

.story,
.safeguards,
.final-cta {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.story,
.steps,
.safeguards {
  padding: var(--section) 0;
}

.story__copy {
  display: grid;
  gap: 1.25rem;
  color: var(--night-ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
}

.section-heading {
  max-width: 35rem;
}

.section-heading--wide {
  margin-bottom: 3rem;
}

.step-grid,
.safeguard-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.step-grid {
  grid-template-columns: repeat(3, 1fr);
}

.step-grid li,
.safeguard-grid article {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass);
}

.step-grid li:nth-child(2) {
  background: var(--glass-lifted);
}

.step-number {
  margin-bottom: auto;
  color: var(--night-oxblood);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.step-grid p,
.safeguard-grid p {
  color: var(--night-ink-soft);
  font-size: 0.94rem;
}

.safeguard-grid {
  grid-template-columns: repeat(2, 1fr);
}

.safeguard-grid article {
  min-height: 190px;
}

/* All four carry the accent, or it reads as two cards someone forgot. */
.safeguard-grid article:nth-child(odd) {
  border-top: 6px solid var(--night-slate);
}

.safeguard-grid article:nth-child(even) {
  border-top: 6px solid var(--night-ochre);
}

.final-cta {
  margin-top: calc(var(--section) * 1.25);
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: 28px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  align-items: center;
}

footer {
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid var(--glass-border);
  color: var(--night-ink-faint);
  font-size: 0.82rem;
}

footer p {
  margin-right: auto;
}

.trap,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.legal-page {
  max-width: 760px;
  padding-top: clamp(3rem, 8vw, 6rem);
}

.legal-hero {
  padding-bottom: clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--glass-border);
}

.legal-hero h1 {
  font-size: clamp(3.4rem, 10vw, 6rem);
}

.legal-section {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-bottom: 1px solid var(--glass-border);
}

.legal-section h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.legal-section p,
.legal-section dd {
  color: var(--night-ink-soft);
}

.legal-section p + p {
  margin-top: 1rem;
}

.legal-section dl {
  margin: 1.5rem 0 0;
}

.legal-section dt {
  margin-top: 1.4rem;
  font-weight: 650;
}

.legal-section dd {
  margin: 0.35rem 0 0;
}

.legal-section a {
  color: var(--night-slate);
  text-underline-offset: 3px;
}

.support-action {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  background: var(--night-ink);
  color: var(--night-low);
  font-weight: 650;
  text-decoration: none;
}

@media (max-width: 820px) {
  .site-header,
  main,
  footer {
    width: min(calc(100% - 2rem), var(--page));
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: 0;
  }

  .hero__copy {
    max-width: none;
  }

  .story,
  .safeguards,
  .final-cta {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .step-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked, the cards are wide and the content is short, so the number-at-top
     push-down that works in three columns just leaves a hole. */
  .step-grid li,
  .safeguard-grid article {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .header-link {
    font-size: 0.78rem;
  }

  main {
    padding-top: 2rem;
  }

  h1 {
    font-size: clamp(3.2rem, 16vw, 4.4rem);
  }

  .hero__demo {
    padding: 1.5rem 1.25rem;
    border-radius: 24px;
  }

  .waitlist button {
    flex: 1 1 100%;
  }

  .safeguard-grid {
    grid-template-columns: 1fr;
  }

  footer {
    padding: 2rem 0;
    flex-wrap: wrap;
  }

  footer p {
    flex-basis: 100%;
    order: 3;
  }
}

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

  /* The face still changes colour; it just stops travelling. */
  .latch__face {
    transition: background-color 260ms ease;
  }

  .hero__demo {
    transition: none;
  }
}