/* Landing page only. A run log from your own terminal: slate ink, Plex Mono for the
   wordmark and step codes, one amber accent meaning "this step waits for you".
   Follows the OS theme unless the header picker sets light or dark. See docs/landing/DESIGN.md. */

@font-face {
  font-family: "Plex Sans";
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #131820;
  --surface: #1a2029;
  --rule: #2c3440;
  --ink: #e5e8ec;
  --muted: #9aa3ae;
  --accent: #f2b84b;
  --on-accent: #1a1300;
  --focus: #f2b84b;
  --error: #ff9b8f;
  --sans: "Plex Sans", "Helvetica Neue", arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, menlo, consolas, monospace;
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 72rem;
}

/* Light tokens apply when the OS asks for light and the picker hasn't forced dark,
   or when the picker forces light (theme.js sets data-theme on <html>). Keep the
   two blocks identical. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f5f7;
    --surface: #fff;
    --rule: #d3d8df;
    --ink: #161a20;
    --muted: #525a66;
    --accent: #8a5600;
    --on-accent: #fff;
    --focus: #8a5600;
    --error: #a3261b;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: #fff;
  --rule: #d3d8df;
  --ink: #161a20;
  --muted: #525a66;
  --accent: #8a5600;
  --on-accent: #fff;
  --focus: #8a5600;
  --error: #a3261b;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body.lp {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* Resets sit in :where() so they have zero specificity and never beat a class. */
:where(.lp) :where(h1, h2, h3, p, dl, dd, ol, figure) {
  margin: 0;
}

:where(.lp) :where(ol) {
  padding: 0;
  list-style: none;
}

:where(.lp) :where(a) {
  color: inherit;
  text-underline-offset: 0.2em;
}

:where(.lp) :where(a:not(.primary-cta)):hover {
  color: var(--accent);
}

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

#main:focus,
.join:focus {
  outline: none;
}

.mono {
  font-family: var(--mono);
  font-size: 0.94em;
}

/* --- Chrome ----------------------------------------------------------------- */

.lp-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  z-index: 10;
}

.lp-skip:focus {
  top: 1rem;
}

.lp-header,
.lp-footer,
.hero,
.section,
.close {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-block: 1.25rem;
}

.lp-brand {
  font-family: var(--mono);
  font-size: 1.0625rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

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

/* Theme picker: hidden until theme.js runs, since it does nothing without it. */
.theme:not([hidden]) {
  display: flex;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
}

.theme label {
  position: relative;
  cursor: pointer;
}

.theme input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.theme span {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  color: var(--muted);
}

.theme label:hover span {
  color: var(--ink);
}

.theme input:checked + span {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.theme input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* A block cursor after the wordmark: the only decoration on the page. */
.lp-brand::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.15em;
  vertical-align: -0.18em;
  background: var(--accent);
}

.lp-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 2rem 3rem;
  /* A rule the width of the content, matching the section rules. */
  background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  color: var(--muted);
  font-size: 0.9375rem;
}

.lp-footer__brand {
  font-family: var(--mono);
  color: var(--ink);
}

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

.hero {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(1.5rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem);
  align-items: start;
}

@media (width >= 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

.hero h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.hero h1 span {
  display: block;
}

.hero__sub {
  margin-top: 1.25rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.125rem;
}

.hero__sub .mono {
  color: var(--ink);
}

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

.join {
  margin-top: 2rem;
  max-width: 34rem;
}

.join__form {
  display: grid;
  gap: 0.75rem;
}

.join__label {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--muted);
}

.join__row {
  display: grid;
  gap: 0.625rem;
}

@media (width >= 30rem) {
  .join__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.join__input {
  min-height: 3rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-family: var(--mono);
  font-size: 1rem;
}

.join__input[aria-invalid="true"] {
  border-color: var(--error);
}

.join__error,
.join__notice {
  color: var(--error);
  font-size: 0.9375rem;
}

.join__fine {
  font-size: 0.875rem;
  color: var(--muted);
}

.join__fine strong {
  color: var(--ink);
  font-weight: 600;
}

.join__done {
  padding: 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  display: grid;
  gap: 0.5rem;
}

.join__title {
  font-size: 1.25rem;
  font-weight: 600;
}

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

.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.primary-cta:hover {
  color: var(--on-accent);
  filter: brightness(1.08);
}

/* --- Run log (signature) ---------------------------------------------------- */

.log {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  min-width: 0;
}

.log__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}

.log__title {
  color: var(--ink);
}

.log__lines {
  padding: 0.75rem 0;
}

.log__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.75rem;
  column-gap: 0.75rem;
  padding: 0.3rem 1rem;
}

.log__status {
  text-align: right;
  color: var(--muted);
}

.log__note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.log__line--paused {
  box-shadow: inset 2px 0 0 var(--accent);
}

.log__line--paused .log__status {
  color: var(--accent);
}

/* Notes inline only while the log spans the full width (below the two-column hero). */
@media (36rem <= width < 60rem) {
  .log {
    font-size: 0.9375rem;
  }

  .log__line {
    grid-template-columns: 9.5rem 4rem minmax(0, 1fr);
  }

  .log__status {
    text-align: left;
  }

  .log__note {
    grid-column: auto;
    font-size: 0.875rem;
  }
}

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

.section {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(2rem, 5vw, 3rem);
}

.section::before {
  content: "";
  display: block;
  border-top: 1px solid var(--rule);
  margin-bottom: 0.5rem;
}

.section h2,
.close h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 30ch;
}

.section__lead {
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.125rem;
}

/* How it works */

.steps {
  display: grid;
  gap: 2rem;
}

@media (width >= 60rem) {
  .steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
  }
}

.steps__label {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.steps__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--rule);
}

.steps__code {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--muted);
}

.steps__row--pause .steps__code {
  color: var(--accent);
}

.steps__pause {
  display: block;
  color: var(--accent);
  font-size: 0.9375rem;
}

.steps__status {
  max-width: 46rem;
  padding: 0.875rem 1rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
}

.steps__status strong {
  color: var(--ink);
  font-weight: 600;
}

/* Shared server and FAQ */

.guards,
.faq {
  display: grid;
  gap: 1.5rem 3rem;
}

@media (width >= 44rem) {
  .guards,
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.guards dt,
.faq dt {
  font-weight: 600;
}

.guards dd,
.faq dd {
  color: var(--muted);
  max-width: 34rem;
}

/* Close */

.close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 3rem 4rem;
}

/* --- Privacy notice --------------------------------------------------------- */

.placeholder {
  font-family: var(--mono);
  font-size: 0.9375rem;
  padding: 1rem 1.25rem;
  border: 2px dashed var(--accent);
  color: var(--accent);
  background: var(--surface);
}

.doc {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 4rem;
  display: grid;
  gap: 0.875rem;
}

.doc h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.doc h2 {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.doc p {
  color: var(--muted);
}

.doc__meta {
  font-family: var(--mono);
  font-size: 0.875rem;
}

/* --- Conversion pass: status line and mid-page CTA -------------------------- */

.mid-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}