/* Screenie — splash page.
   One screen on a laptop: the pitch and download on the left, four testing
   steps on a frosted card on the right. On a narrow screen they stack and the
   page scrolls. The whole design is the backdrop — soft colour fields in
   body::before — and nothing here is an image.

   Deliberately light-only. The artwork this is built from is a warm, lit
   surface; a dark variant would be a different picture, not a recolour, so
   there is no prefers-color-scheme block to keep in sync. */

:root {
  --ink:      #2c2320;                 /* headings on the warm ground */
  --ink-2:    rgba(44, 35, 32, 0.66);  /* body copy */
  --ink-3:    rgba(44, 35, 32, 0.46);  /* fine print */
  --rim:      rgba(255, 255, 255, 0.55);
  --pad:      clamp(24px, 4.5vw, 60px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: #e7dccd;
}

/* ─────────────────── the backdrop ───────────────────
   Colour fields first: warm and dark in the top corners, a cream highlight
   where the type sits, cool indigo and steel pulled to the bottom right so the
   left column stays light enough for dark text. Fixed, so it fills the window
   whatever the content does. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(115% 85% at 8% -6%,   #8a6a42 0%, rgba(138,106,66,0) 58%),
    radial-gradient(85% 65% at 92% -4%,   #6d5a4a 0%, rgba(109,90,74,0)  50%),
    radial-gradient(65% 55% at 42% 26%,   #fdf5ea 0%, rgba(253,245,234,0) 62%),
    radial-gradient(52% 55% at 84% 116%,  #322b5e 0%, rgba(50,43,94,0)   62%),
    radial-gradient(46% 52% at 62% 124%,  #4a4270 0%, rgba(74,66,112,0)  60%),
    radial-gradient(58% 70% at 106% 72%,  #7286ac 0%, rgba(114,134,172,0) 56%),
    radial-gradient(40% 42% at 103% 40%,  #eef3f8 0%, rgba(238,243,248,0) 62%),
    linear-gradient(118deg, #c9b499 0%, #e8dcce 46%, #c6cbdc 100%);
}

/* Vignette. Keeps the corners rich and the middle open — without it the fields
   above read as flat colour rather than as light falling across a surface. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%,
    rgba(0,0,0,0) 55%, rgba(40,28,18,0.16) 100%);
}

/* ─────────────────── layout ───────────────────
   Three rows in one viewport: brand, the column, the fine print. `svh` rather
   than `vh` so mobile browser chrome doesn't push the footer out of sight. */

.splash {
  position: relative;
  min-height: 100svh;
  padding: var(--pad);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
}

.top { display: flex; align-items: center; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.0625rem;
}
.brand .mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(60,40,20,.14);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
}
.brand .mark svg { width: 17px; height: 17px; fill: var(--ink); }

/* Two columns on a wide screen — the pitch and the download on the left, the
   testing steps on the right — centred in the viewport as one block. Below
   `--stack` they stack, centred, and the page is allowed to scroll: four steps
   do not fit under a headline on a phone, and cramming them would be worse. */
.stage {
  place-self: center;
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.pitch { text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  background: rgba(255,255,255,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(60,40,20,.10);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}
.pill-glyph {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #2f9e4f;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.lede {
  margin: 22px 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--ink-2);
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 0.9688rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: scale(0.985); }

/* Ink rather than the system blue: on this warm ground blue reads as a stray
   piece of another palette. */
.btn-ink {
  background: linear-gradient(180deg, #3b302a, #241c18);
  color: #fbf4ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(40,26,16,.22),
              0 12px 30px rgba(40,26,16,.20);
}
.btn-ink:hover { background: linear-gradient(180deg, #493c34, #2c2320); }
.btn-ink:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.btn-glyph {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.meta {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ─────────────────── the testing steps ───────────────────
   The same frosted surface as the eyebrow pill, scaled up to a card, so it
   reads as part of the page rather than a panel dropped onto it. */
.steps {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 22px;
  background: rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 .5px rgba(60,40,20,.08),
              0 18px 40px rgba(60,40,20,.12);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

.steps h2 {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 14px;
}

/* The number is positioned, not a grid column: a grid would make every text
   run and inline tag inside the step its own cell, one word per line. */
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 38px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fbf4ec;
  background: linear-gradient(180deg, #3b302a, #241c18);
}
.steps strong { color: var(--ink); font-weight: 600; }

kbd {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  font: 500 0.8125rem/1.6 var(--font);
  color: var(--ink);
  background: rgba(255,255,255,0.7);
  box-shadow: inset 0 -1px 0 rgba(60,40,20,.14), 0 0 0 .5px rgba(60,40,20,.12);
}

.note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(60,40,20,.10);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.btn-glass {
  color: var(--ink);
  background: rgba(255,255,255,0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(60,40,20,.08),
              0 6px 18px rgba(60,40,20,.10);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
}
.btn-glass:hover { background: rgba(255,255,255,0.62); }

.bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 22px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.bottom p { margin: 0; }
.bottom nav { display: flex; gap: 18px; }
.bottom a { color: var(--ink-3); text-decoration: none; }
.bottom a:hover { color: var(--ink); }

/* Stacked: the pitch centred above the steps. */
@media (max-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .pitch { text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .cta { justify-content: center; }
}

@media (max-width: 620px) {
  .btn { flex: 1 1 auto; justify-content: center; }
}