/* Mandate waitlist. One machined control plate is the bold element.
   Everything around it stays quiet, left-aligned, and typographic. */

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

:root {
  --alu: #e6e7e3;          /* page: light aluminum */
  --alu-deep: #dadcd7;     /* closing band */
  --plate-hi: #e2e4df;     /* plate face, top */
  --plate-lo: #c7cac5;     /* plate face, bottom */
  --ink: #1b1d1f;          /* text */
  --ink-2: #50555a;        /* secondary text */
  --ink-3: #62676b;        /* notes */
  --engrave: #474c50;      /* engraved plate labels */
  --well: #f2f3f0;         /* input wells */
  --well-edge: #b6bab5;
  --stop: #d4261c;         /* stop red: the stop button and "never" signs only */
  --stop-deep: #8c150e;
  --safety: #f4c300;       /* safety yellow: the stop ring only */
  --error: #a11d16;
  --window: #22262a;       /* status readout */
  --groove-dark: rgba(22, 24, 27, 0.13);
  --groove-light: rgba(255, 255, 255, 0.72);
  --groove: linear-gradient(var(--groove-dark), var(--groove-dark)) 0 0 / 100% 1px no-repeat,
            linear-gradient(var(--groove-light), var(--groove-light)) 0 1px / 100% 1px no-repeat;
  --gutter: clamp(20px, 4.5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--alu);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--safety); color: var(--ink); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%;
  max-width: calc(1180px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 14px; border-radius: 8px;
  background: var(--ink); color: var(--alu); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Masthead ---------- */

.masthead { display: flex; align-items: center; padding-block: 28px 0; }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 800; font-stretch: 125%; font-size: 1.12rem; letter-spacing: 0.01em;
}
.wordmark__mark { width: 22px; height: 22px; flex: none; }

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(44px, 8vh, 104px) clamp(32px, 5vh, 72px);
}

h1 {
  margin: 0 0 28px;
  font-size: clamp(2.4rem, 1.2rem + 3.9vw, 4.4rem);
  line-height: 1.01;
  letter-spacing: -0.026em;
  font-weight: 760;
  font-stretch: 104%;
  max-width: 16ch;
}
h1 span { display: block; text-wrap: balance; }
h1 span + span { margin-top: 0.12em; }

.lede {
  margin: 0 0 36px;
  max-width: 33em;
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.5;
  color: var(--ink-2);
}

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

.join { max-width: 34rem; }

.join__label { display: block; margin-bottom: 8px; font-size: 0.92rem; font-weight: 650; }

.join__row { display: flex; gap: 10px; }

.join input[type="email"] {
  flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 16px;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--well);
  border: 1px solid var(--well-edge); border-radius: 12px;
  box-shadow: inset 0 2px 3px rgba(28, 32, 36, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8);
  appearance: none;
}
.join input[type="email"]::placeholder { color: #81868a; }
.join input[type="email"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.join input[aria-invalid="true"] { border-color: var(--error); }

.join button {
  flex: none; height: 54px; padding: 0 22px;
  font: inherit; font-size: 1rem; font-weight: 700; font-stretch: 108%;
  color: #f4f5f2;
  background: linear-gradient(#2c3034, #1a1d20);
  border: 1px solid #101215; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 0 #0b0c0e, 0 9px 14px -7px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.join button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 0 #0b0c0e, 0 4px 8px -5px rgba(0, 0, 0, 0.5); }
.join button[disabled] { cursor: progress; opacity: 0.75; }

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

.join__note { margin: 12px 0 0; font-size: 0.92rem; color: var(--ink-3); }
.join__note[data-tone="error"] { color: var(--error); font-weight: 600; }

.join__done {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; margin: 0; padding: 12px 18px;
  font-weight: 650; font-size: 1.04rem; line-height: 1.35;
  background: var(--well); border: 1px solid var(--well-edge); border-radius: 12px;
}
.join__done:focus { outline: none; }
.join__done:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Status lamp (shared) ---------- */

.lamp {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d4ffe2 0%, #34c172 55%, #1a7a43 100%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28), 0 0 12px 2px rgba(66, 214, 130, 0.5);
}
.join__done .lamp { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16), 0 0 10px 1px rgba(66, 214, 130, 0.45); }

/* ---------- The control plate ---------- */

.hero__plate { margin: 0; }

.plate {
  position: relative;
  padding: 30px 30px 28px;
  border-radius: 24px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(170deg, var(--plate-hi) 0%, #d4d7d2 50%, var(--plate-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.07),
    0 1px 2px rgba(24, 27, 30, 0.2),
    0 30px 50px -26px rgba(24, 27, 30, 0.5);
}

.screw {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3f4f1 0%, #c4c7c2 45%, #9a9e99 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.75);
}
.screw::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 1px;
  background: rgba(38, 42, 46, 0.6);
  transform: rotate(var(--turn, 20deg));
}
.screw--tl { top: 13px; left: 13px; --turn: 18deg; }
.screw--tr { top: 13px; right: 13px; --turn: -34deg; }
.screw--bl { bottom: 13px; left: 13px; --turn: 71deg; }
.screw--br { bottom: 13px; right: 13px; --turn: 3deg; }

.plate__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 2px 4px 14px;
}
.plate__brand {
  font-weight: 800; font-stretch: 125%; font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--engrave); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.plate__tag {
  font-size: 0.8rem; font-weight: 550; font-stretch: 112%; letter-spacing: 0.02em;
  color: #5d6266; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.plate__rows { margin: 0; padding: 0 4px; background: var(--groove); }
.plate__rows div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0 11px;
}
.plate__rows div + div { background: var(--groove); }
.plate__rows dt {
  font-size: 0.9rem; font-weight: 520; font-stretch: 110%;
  color: var(--engrave); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.plate__rows dd {
  margin: 0; text-align: right;
  font-size: 1.02rem; font-weight: 680; font-variant-numeric: tabular-nums;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* The decision log: a recessed screen that shows what the bot decides. */
.log {
  margin-top: 18px;
  border-radius: 14px;
  background: linear-gradient(#1b1f22, var(--window));
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #cdd6cf;
  overflow: hidden;
}
.log__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.log__status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.92rem; font-weight: 600; font-stretch: 106%; color: #dfe9e2;
  font-variant-numeric: tabular-nums;
}
.plate[data-state="stopped"] .log__status { color: #ffd8d2; }
.plate[data-state="stopped"] .lamp {
  background: radial-gradient(circle at 40% 35%, #ffd3cc 0%, #e2392c 55%, #8c150e 100%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 12px 2px rgba(240, 72, 52, 0.6);
}
.log__stop {
  flex: none; height: 32px; padding: 0 16px;
  font: inherit; font-size: 0.88rem; font-weight: 750; font-stretch: 110%; letter-spacing: 0.02em;
  color: #fff3f1; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: radial-gradient(circle at 50% 20%, #ef5a4e 0%, var(--stop) 60%, #a51a12 100%);
  border: 0; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 var(--stop-deep), 0 6px 10px -4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.log__stop:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 var(--stop-deep); }
.log__stop[aria-pressed="true"] {
  color: var(--ink); text-shadow: none;
  background: linear-gradient(#f3f4f1, #d9dcd7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 0 #9fa39e, 0 6px 10px -4px rgba(0, 0, 0, 0.5);
}
.log__stop:focus-visible { outline: 2px solid #f2f3f0; outline-offset: 3px; }

.log__lines {
  list-style: none; margin: 0; padding: 8px 16px 10px;
  height: calc(5 * 1.9rem + 18px);
  overflow: hidden;
  /* A line pushed past the bottom fades out instead of being cut. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.log__lines li {
  display: grid; grid-template-columns: 4.6rem 4rem minmax(0, 1fr); column-gap: 10px;
  align-items: baseline;
  min-height: 1.9rem; padding: 4px 0;
  font-size: 0.86rem; line-height: 1.35;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  animation: log-enter 220ms ease-out;
}
.log__lines li:first-child { border-top: 0; }
.log__verb { font-weight: 700; font-stretch: 106%; }
.log__token { color: #9aa49d; font-stretch: 100%; }
.log__why { color: #c7d0c9; }
.log__lines .is-buy .log__verb { color: #6be3a0; }
.log__lines .is-sell .log__verb { color: #eef2ee; }
.log__lines .is-skip .log__verb { color: var(--safety); }
.log__lines .is-stop .log__verb { color: #ff8a7d; }
.log__lines .is-stop .log__why,
.log__lines .is-resume .log__why { color: #eef2ee; }
.log__lines .is-resume .log__verb { color: #6be3a0; }

@keyframes log-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

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

.hero__plate figcaption { margin: 16px 4px 0; font-size: 0.9rem; color: var(--ink-3); }

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

.section { padding-block: clamp(56px, 9vw, 112px) 0; }

.section h2,
.closer h2 {
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 24ch;
  font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  font-weight: 740;
  font-stretch: 106%;
}

h3 { margin: 0; }
h2, h3, dt { text-wrap: balance; }
p, dd, figcaption { text-wrap: pretty; }

.features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px clamp(28px, 4vw, 56px);
}
.features li { padding-top: 22px; background: var(--groove); }
.features h3 { margin-bottom: 8px; font-size: 1.12rem; line-height: 1.25; font-weight: 700; font-stretch: 104%; }
.features p { margin: 0; max-width: 34ch; font-size: 1rem; color: var(--ink-2); }

.never { list-style: none; margin: 0; padding: 0; }
.never li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px; align-items: center;
  padding: 26px 0;
  background: var(--groove);
}
.never li:last-child { padding-bottom: 0; }
.never__sign { width: 34px; height: 34px; }
.never h3 { font-size: clamp(1.18rem, 0.98rem + 0.75vw, 1.55rem); line-height: 1.2; font-weight: 720; font-stretch: 104%; }
.never p { margin: 0; color: var(--ink-2); max-width: 40ch; }

.faq { margin: 0; }
.faq div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 6px 40px; padding: 22px 0;
  background: var(--groove);
}
.faq div:last-child { padding-bottom: 0; }
.faq dt { font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.faq dd { margin: 0; max-width: 52ch; color: var(--ink-2); }

/* ---------- Protections panel: a second plate, one lit lamp per protection ---------- */

.interlocks { padding: 34px 34px 30px; }
.interlocks .plate__head { padding-bottom: 8px; }
.interlocks__list {
  list-style: none; margin: 0; padding: 0 4px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 56px);
}
.interlocks__list li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 16px;
  padding: 18px 0 17px;
  background: var(--groove);
}
.interlocks__list .lamp { margin-top: 0.38em; }
.interlocks__list h3 {
  margin-bottom: 4px;
  font-size: 1.04rem; line-height: 1.3; font-weight: 700; font-stretch: 104%;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.interlocks__list p {
  margin: 0; max-width: 44ch;
  font-size: 0.96rem; color: var(--engrave); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

@media (max-width: 760px) {
  .interlocks { padding: 28px 22px 24px; }
  .interlocks__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Closing band ---------- */

.closer {
  margin-top: clamp(72px, 10vw, 128px);
  background: var(--alu-deep);
  box-shadow: inset 0 1px 0 var(--groove-dark), inset 0 2px 0 var(--groove-light);
}
.closer__inner {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px clamp(32px, 6vw, 88px); align-items: end;
  padding-block: clamp(48px, 7vw, 88px);
}
.closer h2 { margin-bottom: 10px; }
.closer__copy p { margin: 0; color: var(--ink-2); }
.closer .join { justify-self: end; width: 100%; }

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

.footer { padding-block: 36px 52px; font-size: 0.9rem; color: var(--ink-3); }
.footer p { margin: 0 0 8px; max-width: 72ch; }

/* ---------- Small pages (remove, 404, form replies) ---------- */

.notice { padding-block: clamp(56px, 12vh, 140px) 96px; max-width: calc(40rem + 2 * var(--gutter)); margin-inline: 0; }
.notice h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); max-width: 18ch; margin-bottom: 18px; }
.notice > p { margin: 0 0 28px; color: var(--ink-2); font-size: 1.1rem; max-width: 36em; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__plate { max-width: 520px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closer__inner { grid-template-columns: minmax(0, 1fr); }
  .closer .join { justify-self: start; }
}

@media (max-width: 680px) {
  .never li { grid-template-columns: 34px minmax(0, 1fr); row-gap: 6px; column-gap: 18px; align-items: start; }
  .never__sign { width: 30px; height: 30px; margin-top: 2px; }
  .never p { grid-column: 2; }
  .faq div { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .features { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 480px) {
  .join__row { flex-direction: column; }
  .join button { width: 100%; }
  .plate { padding: 26px 20px 22px; border-radius: 20px; }
  .log__head { padding-left: 12px; }
  .log__lines { padding-inline: 12px; }
  .log__lines li { grid-template-columns: 4.1rem 3.7rem minmax(0, 1fr); column-gap: 8px; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .log__stop, .join button { transition: none; }
  .log__lines li { animation: none; }
}