/* Surplus Pilot — the public page.

   Deliberately the same palette as the app (app/static/style.css), because the
   first thing someone does after reading this is open the app, and a different
   blue there would read as a different product.

   Rules held to throughout, because breaking them is what makes a page look
   generated rather than made:

   - hairlines, not drop shadows. One shadow exists, on the primary button.
   - no gradients, anywhere.
   - the hero is left-aligned. A centred headline over two centred buttons is
     the template every tool ships with.
   - part numbers, prices and confidences are set in mono. In this trade that
     is not decoration; it is how the number is written on the part.
   - one accent colour. Colour is reserved for state — matched, refused,
     caveat — so that when it appears it means something. */

:root {
  --bg: #ffffff;
  --band: #f4f6f9;
  --panel: #ffffff;
  --text: #11141a;
  --dim: #5c6675;
  --line: #d9dfe7;
  --line-soft: #e8ecf1;
  --accent: #1f6feb;
  --on-accent: #ffffff;
  --ok: #16794a;
  --warn: #8a5a00;
  --bad: #c0342a;
  --tag-ok-bg: #d8f0e2;
  --tag-bad-bg: #fbe0dd;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
          "Roboto Mono", Menlo, Consolas, monospace;

  --wrap: 1080px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 760px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }
.dim { color: var(--dim); }
.small { font-size: 14px; }

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

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: var(--wrap); margin: 0 auto;
  padding: 18px var(--gutter);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.6) blur(10px);
}
.nav::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: 0; height: 1px; background: var(--line-soft);
}

.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text); font-weight: 600; letter-spacing: -.012em;
}
.wordmark:hover { text-decoration: none; }
.wordmark svg { color: var(--accent); flex: none; }

.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a { color: var(--dim); font-size: 15px; }
.nav nav a:hover { color: var(--text); text-decoration: none; }

.nav-cta {
  color: var(--accent) !important;
  font-weight: 550;
}

/* Sign in reads as a control rather than another section link, because it
   leaves the page. Quiet, but not hidden - it is the one thing an existing
   user is here for. */
.nav-signin {
  color: var(--text) !important;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.nav-signin:hover { text-decoration: none; border-color: var(--dim); background: var(--band); }

@media (max-width: 720px) {
  .nav nav a:not(.nav-cta):not(.nav-signin) { display: none; }
  .nav nav { gap: 10px; }
  .nav-cta { display: none; }        /* the hero repeats it two lines down */
}

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

section { padding: 104px 0; }
section.band { background: var(--band); border-block: 1px solid var(--line-soft); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; }

h1 {
  font-size: clamp(2.5rem, 6.6vw, 4.3rem);
  line-height: 1.02;
  margin: 0 0 26px;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  margin: 0 0 22px;
  max-width: 20ch;
}
section.band h2, section h2 { max-width: 24ch; }

h3 { font-size: 1.0625rem; letter-spacing: -.015em; margin: 0 0 6px; }

/* Readable measure. Long lines are the fastest way to make a page feel
   like it was poured in rather than set. */
.prose { max-width: 64ch; color: var(--dim); }
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 550; }

.caption { margin: 22px 0 0; font-size: 14px; color: var(--dim); max-width: 60ch; }

/* ----------------------------------------------------------------- hero */

.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: 72px var(--gutter) 88px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding: 44px var(--gutter) 64px; }
}

.eyebrow {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim);
}

.lede {
  max-width: 58ch;
  margin: 0 0 34px;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.58;
  color: var(--dim);
}
.lede strong { color: var(--text); font-weight: 600; font-family: var(--mono); font-size: .96em; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--accent); border-radius: 9px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 550; font-size: 16px;
  box-shadow: 0 1px 2px rgba(17,20,26,.16);
  cursor: pointer;
}
.btn:hover { text-decoration: none; background: #1a5fcc; border-color: #1a5fcc; }

.btn.ghost {
  background: transparent; color: var(--text);
  border-color: var(--line); box-shadow: none;
}
.btn.ghost:hover { background: var(--band); border-color: var(--dim); }

.fineprint { margin: 20px 0 0; font-size: 14px; color: var(--dim); }

/* ------------------------------------------------- the plate read panel

   The argument of the whole product in one object: every string the reader
   transcribed off the nameplate, and the catalogue's verdict on each. No
   competitor shows this, because for everyone else the rejected lines are the
   embarrassing part. For us they are the product. */

.plate {
  margin: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden;
  font-family: var(--mono);
}
.plate-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim);
}
.plate-rows { list-style: none; margin: 0; padding: 0; }
.plate-rows li {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px;
  align-items: baseline;
  padding: 11px 18px; border-bottom: 1px solid var(--line-soft);
}
.plate-rows li:last-child { border-bottom: 0; }
.plate-rows .str { font-size: 15px; color: #939cab; }
.plate-rows .why {
  font-size: 12px; color: #939cab; text-align: right; font-family: var(--sans);
}
.plate-rows li.out .str { text-decoration: line-through; text-decoration-color: #b9c1cc; }
.plate-rows li.hit { background: var(--tag-ok-bg); border-bottom-color: transparent; }
.plate-rows li.hit .str {
  color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.plate-rows li.hit .why { color: var(--ok); font-weight: 550; }
.plate-foot {
  margin: 0; padding: 13px 18px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--dim); font-family: var(--sans); line-height: 1.5;
}

/* ---------------------------------------------------------------- cards */

.two-up {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 44px;
  align-items: start;
}
@media (max-width: 760px) { .two-up { grid-template-columns: 1fr; } }

.card {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.card-head { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.card-body { padding: 20px; }

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase;
}
.badge.ok  { background: var(--tag-ok-bg);  color: var(--ok); }
.badge.bad { background: var(--tag-bad-bg); color: var(--bad); }

.mpn {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 600; letter-spacing: -.01em;
}
.mpn.muted { color: var(--dim); }

.brand { margin: 0 0 18px; color: var(--dim); font-size: 15px; }

/* A definition list, not a table: these are facts about one thing, and the
   labels want to sit quietly to the left of the values. */
.kv { margin: 0; display: grid; grid-template-columns: 9.5em 1fr; gap: 0; }
.kv dt {
  padding: 9px 0; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--dim);
}
.kv dd {
  margin: 0; padding: 9px 0; border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.kv dd.warn { color: var(--warn); }
@media (max-width: 460px) {
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; border-top: 1px solid var(--line-soft); }
  .kv dd { padding-top: 2px; border-top: 0; }
}

.card.refuse { border-color: #eccbc6; }

.price-card { max-width: 420px; margin-top: 40px; }
.price-card .label {
  margin: 0 0 6px; font-size: 13.5px; color: var(--dim);
}
.price-card .big {
  margin: 0; font-size: 2.75rem; font-weight: 600; letter-spacing: -.03em;
  line-height: 1;
}
.price-card .band-line {
  margin: 8px 0 18px; font-size: 14px; color: var(--dim);
}

/* ---------------------------------------------------------------- steps */

.steps { list-style: none; margin: 44px 0 0; padding: 0; }
.steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 20px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  max-width: 78ch;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .num {
  grid-row: span 2;
  font-family: var(--mono); font-size: 13px; color: var(--accent);
  padding-top: 3px;
}
.steps h3 { grid-column: 2; }
.steps p { grid-column: 2; margin: 0; color: var(--dim); max-width: 60ch; }

@media (max-width: 520px) {
  .steps li { grid-template-columns: 30px 1fr; gap: 0 14px; }
}

/* ----------------------------------------------------------------- nots */

.nots { list-style: none; margin: 34px 0 0; padding: 0; max-width: 66ch; }
.nots li {
  padding: 20px 0 20px 26px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  position: relative;
}
.nots li:last-child { border-bottom: 1px solid var(--line); }
.nots li::before {
  content: ""; position: absolute; left: 0; top: 30px;
  width: 11px; height: 1.5px; background: var(--bad);
}
.nots strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------- waitlist */

.waitlist {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 32px 0 0; max-width: 520px;
}
.waitlist input {
  flex: 1 1 260px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--text);
  font: inherit; font-size: 16px;
}
.waitlist input::placeholder { color: #9aa3b0; }
.waitlist input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.waitlist input[aria-invalid="true"] { border-color: var(--bad); }

.formnote { margin: 14px 0 0; font-size: 14.5px; min-height: 1.2em; }
.formnote.ok  { color: var(--ok); }
.formnote.err { color: var(--bad); }

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

/* --------------------------------------------------------------- footer */

footer {
  padding: 40px 0 64px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
}
footer p { margin: 0 0 8px; max-width: 70ch; }
footer .mono { color: var(--text); }

/* ----------------------------------------------------------------- dark
   Only when the reader has asked their system for it. The app defaults to
   light and so does this. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --band: #141720;
    --panel: #171a21;
    --text: #e8eaed;
    --dim: #98a0ae;
    --line: #2a2f3a;
    --line-soft: #232831;
    --accent: #4c8dff;
    --ok: #2fbf71;
    --warn: #f0a92e;
    --bad: #f2564a;
    --tag-ok-bg: #1c3a2a;
    --tag-bad-bg: #3d1f1c;
  }
  .nav { background: rgba(15,17,21,.86); }
  .btn:hover { background: #3f7ce6; border-color: #3f7ce6; }
  .card.refuse { border-color: #4a2a25; }
  .waitlist input::placeholder { color: #6c7482; }
  .plate-rows .str, .plate-rows .why { color: #6c7482; }
  .plate-rows li.out .str { text-decoration-color: #525a68; }
}

@media (max-width: 720px) {
  section { padding: 72px 0; }
  .hero { padding: 48px var(--gutter) 64px; }
}