/* mykno.nl — the public site. index.html and thanks.html share this file.
 *
 * A waitlist page. It fits on one screen and it is mostly what is not here.
 *
 * THE WEBSITE'S DIRECTION IS NOT THE DASHBOARD'S. docs/DESIGN.md governs the
 * dashboard and tools/clarify/report.py; the reasoning for this page and the
 * list of what carried over is docs/SITE.md §6. DESIGN.md is not edited.
 *
 * WHAT DID NOT MOVE: the ban list (no purple, no gradient anywhere, no Inter,
 * no dark theme, no blur or glass, no floating shapes, no card grid, no big
 * centred icon over a heading, no emoji, no fade-in on load), IBM Plex vendored
 * on our own origin so the page fetches nothing from anyone, and no JavaScript.
 *
 * FIVE TYPE SIZES AND FIVE COLOURS ON THE WHOLE PAGE. Both are counted by
 * site/check.sh, statically and from a real render, because "about five" is
 * how a page ends up with eleven.
 */

/* ---- Faces -------------------------------------------------------------
 * Four, all Latin-1 subsets from IBM's own splits, all actually used: Sans 400
 * for body, Sans 500 for labels and the button, Serif 500 for the headline,
 * Mono 500 for the one small line in the snippet. No local() — a machine with
 * another cut of Plex installed should see the page we tested. check 15 fails
 * on any face nothing asks for.
 */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/IBMPlexSerif-Medium-Latin1.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
/* ---- Tokens ----------------------------------------------------------- */

:root {
  /* Five colours. #FFFFFF is new to this page and is the fields only — the
     brief asked for a white fill rather than a grey one, and check 2 records
     the addition rather than absorbing it. Everything else is one of the other
     four at an alpha. */
  --paper:  #FAF8F5;
  --ink:    #1A1614;
  --muted:  #6E645C;
  --accent: #B8380C;
  --white:  #FFFFFF;

  --bubble-in:  rgba(26, 22, 20, 0.05);   /* ink 5%     — the customer bubble only */
  --bubble-out: rgba(184, 56, 12, 0.08);  /* accent 8%  — the reply bubble only    */
  --edge:       rgba(26, 22, 20, 0.55);   /* ink 55%    — the field border, 3.9:1  */
  --step-line:  rgba(26, 22, 20, 0.25);   /* ink 25%    — the connector and its dots*/

  /* Five sizes. There is no sixth. */
  /* The max is 48px, not the 54px the brief named. Measured inside the real
     page with Plex Serif Medium actually loaded, at 1440: 54px is four lines at
     every column width this layout can give it, out to a 664px column that
     would leave the snippet 256px. 50px is four lines at 633px and three at
     649px — the boundary itself, which is not a place to sit. 48px is three
     lines at 633px with 46px still three below it, so there is a step of
     headroom for a platform whose Plex metrics differ slightly.
     Three lines was the visible requirement; six points of display size was
     not. The measurement and the false starts are in docs/SITE.md §6. */
  --t-display: clamp(36px, 4vw, 48px);
  --t-lead:    19px;
  --t-body:    16px;
  --t-small:   14px;
  --t-tiny:    13px;

  /* One scale, 8px base. */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 56px; --s7: 72px;

  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius: 10px;
  --step-gap: 8px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The page is a column: header, the middle that grows, footer. On a screen
   tall enough the middle centres itself and the footer sits at the bottom
   without being fixed there. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--sans);
  font-feature-settings: 'kern' 1;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(24px, 5vw, 64px);
}

.masthead { padding-block: var(--s3); }
.wordmark { font-family: var(--serif); font-size: var(--t-body); font-weight: 500; }

.main { flex: 1 1 auto; display: flex; align-items: center; padding-block: var(--s3); }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 960px) {
  /* At 1440 and 1280 this lands the left column on 640px — the width the
     headline needs to come in at three lines — and the right column on 400px,
     which is its floor. The gap is 32px rather than 72 because 640 + 400 + 72
     does not fit inside a 1200px container, and the right column's own 26px
     connector rail adds to the visual separation. */
  .grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s4); }

  /* The left column is a flex column so one auto margin can take the whole
     height difference. Headline and sentence stay at the top; the form, its
     line and the privacy summary stay together at the bottom. */
  .col { display: flex; flex-direction: column; }
  /* `.col .signup`, not `.signup`: the form's own margin-top is declared later
     in this file, so a bare `.signup` here loses to it on source order and the
     auto margin silently does nothing. */
  .col .signup { margin-top: auto; }

  /* Optical alignment, not box alignment. The two columns' boxes start at the
     same y, but a 48px serif line box and a 16px sans one put their capital
     letters at different depths inside it. This padding is that difference,
     measured on the rendered text rather than guessed — see docs/SITE.md §6. */
  .snippet { padding-top: 8.1px; }
}

/* ---- Type ------------------------------------------------------------- */

h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lead {
  margin: var(--s6) 0 0;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Form ------------------------------------------------------------- */

.signup { margin-top: var(--s4); }

.fields { display: grid; gap: var(--s2); }
@media (min-width: 640px) {
  .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
}

.field { min-width: 0; }
.field label {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--t-small);
  font-weight: 500;
}

.field input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font: 400 var(--t-body)/1.4 var(--sans);
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

.btn {
  height: 52px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  font: 500 var(--t-body)/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}

.under { margin: var(--s3) 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }

/* Hidden from sight, from the tab order and from assistive technology, so a
   person cannot reach it and anything in it came from a bot. Clipped rather
   than offset: a negative left is one quirk away from a scrolling page. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---- The privacy note, collapsed ------------------------------------- */

.privacy { margin-top: var(--s4); font-size: var(--t-small); line-height: 1.5; color: var(--muted); }
.privacy summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
  color: var(--ink);
  font-weight: 500;
}
.privacy summary::-webkit-details-marker { display: none; }
/* A disclosure affordance rather than an icon: two characters the vendored
   subset already carries, sitting after the text so the left edge stays true. */
.privacy summary::after { content: ' +'; color: var(--muted); font-weight: 400; }
.privacy[open] summary::after { content: ' \2212'; }
.privacy p { margin: var(--s2) 0 0; max-width: 62ch; }
.privacy strong { color: var(--ink); font-weight: 500; }

/* ---- The snippet: five steps, no box ---------------------------------
   There is no panel. The steps sit on the page, and the only filled shapes in
   the column are the message bubbles in step 3. */

.snippet { max-width: 460px; min-width: 0; }

.steps { list-style: none; margin: 0; padding: 0; }

/* The dot and the line are the only connector: no arrow, no number, no icon.
   The line runs from under one dot to the top of the next. */
.step { position: relative; padding-left: 26px; }
.step + .step { margin-top: var(--step-gap); }
.step::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--step-line);
}
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 10.5px;
  bottom: calc(-1 * (var(--step-gap) + 10.5px));
  width: 1px;
  background: var(--step-line);
}

/* Step 5 is not built. Its dot is hollow so the column says so without a
   badge, and its label is muted like its line. */
.step-later::before { background: transparent; border: 1px solid var(--step-line); }
.step-later .step-label { color: var(--muted); }

/* The five labels carry the whole product on their own: read only these, in
   order, and a stranger should have it. */
.step-label {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.step-line {
  margin: 3px 0 0;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
}

/* Step 3 is the dominant one and the only one with anything in it. */
.step-main .step-label { margin-bottom: 6px; }
.step-main .step-line { margin-top: 8px; }

/* Each customer's real first sentence, shown whole. The bubble is as wide as
   its text, so three different lengths read as three different people. */
.bubble {
  width: max-content;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 6px 11px;
  border-radius: 12px 12px 12px 4px;
  background: var(--bubble-in);
  font-size: var(--t-small);
  line-height: 1.4;
}

.more { margin: 6px 0 0; font-size: var(--t-tiny); line-height: 1.4; color: var(--muted); }

.reply {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 16px 16px 4px 16px;
  background: var(--bubble-out);
}
.reply-who { margin: 0 0 2px; font-size: var(--t-tiny); line-height: 1.3; color: var(--muted); }
.reply-text { margin: 0; font-size: var(--t-small); line-height: 1.4; }

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

.foot { padding-block: var(--s3); }
.foot p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }

/* ---- Motion -----------------------------------------------------------
   There is no transition and no animation on this page. The block stays
   because it is the correct default the day somebody adds one. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}