/* Stylesheet.
 *
 * LOGICAL PROPERTIES ONLY, FROM THE FIRST COMMIT. There is not one
 * margin-left, padding-right, text-align: left, border-left or bare left:/right:
 * offset in this file, and scripts/check-invariants.mjs fails the build if one
 * arrives. The platform this was lifted from carried 44 physical-direction
 * declarations against 5 logical ones; converting them was a day's work at that
 * size and a rewrite six months later. This repository never acquires the first
 * one.
 *
 * The mapping, for anyone reaching for the physical form out of habit:
 *   margin-left        -> margin-inline-start
 *   padding-right      -> padding-inline-end
 *   text-align: left   -> text-align: start
 *   border-left        -> border-inline-start
 *   left: 0            -> inset-inline-start: 0
 *   width / height     -> inline-size / block-size
 *
 * Direction-implying ICONS still need mirroring in the markup (a "next"
 * chevron, a progress axis); media transport controls conventionally do not.
 *
 * THERE IS NO COLOUR AND NO TYPE FAMILY IN THIS FILE. The palette, the two
 * type stacks and the @font-face rules for the self-hosted faces are GENERATED
 * from the identity in src/product/nt2/product.config.js into /brand/tokens.css
 * by the build, and that file is linked immediately before this one. This file
 * consumes the names (--ink, --plate, --font, --font-display) and defines only
 * what is layout rather than identity.
 *
 * The reason is dull and expensive: this stylesheet used to carry the palette
 * as its own placeholder custom properties, and the same six colours were also
 * in the web manifest, in a theme-color meta tag and in the styled 500 page.
 * Four copies, and nothing that fails when one of them moves.
 */

:root {
  --measure: 34rem;
  --gap: 1rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  text-align: start;
}

#app {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

a { color: var(--accent); }

/* Header */

.site-header {
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  max-inline-size: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 0.85rem;
}

/* THE MARK, NOT THE NAME IN BOLD. The plate is sized by its block-size and
 * keeps its own aspect ratio, and the <img> carries its intrinsic dimensions,
 * so the header does not jump while the SVG is still arriving. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-inline-end: auto;
}

.brand-logo {
  display: block;
  block-size: 1.85rem;
  inline-size: auto;
  max-inline-size: 62vw;
}

.menu-toggle {
  display: none;
  min-block-size: 44px;
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: inherit;
  font: inherit;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.nav-links a {
  text-decoration: none;
  padding-block: 0.35rem;
  border-block-end: 2px solid transparent;
}

.nav-links a.active { border-block-end-color: var(--accent); }

/* Page */

#page {
  flex: 1;
  inline-size: 100%;
  max-inline-size: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 2rem 3rem;
}

.hero { max-inline-size: var(--measure); }

.kicker {
  margin-block: 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Headings are set in the display family of the identity — the same family the
 * wordmark is drawn in — and the body in the text family. Both stacks are
 * generated tokens; neither is named here. */
h1 {
  margin-block: 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h2 {
  margin-block: 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.lede {
  margin-block: 0 1.5rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 0 2rem;
}

.action {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  padding-inline: 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.action.primary { background: var(--accent); color: var(--accent-ink); }

.action.secondary {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-block: 0 2rem;
  padding: 0;
  list-style: none;
}

.fact {
  flex: 1 1 12rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.fact strong { display: block; font-size: 1.1rem; }
.fact span { color: var(--ink-soft); font-size: 0.9rem; }

.prose-block {
  max-inline-size: var(--measure);
  margin-block: 0 1.75rem;
  /* An accent rule on the reading edge, which flips with direction. */
  border-inline-start: 3px solid var(--line);
  padding-inline-start: 1rem;
}

.prose-block p { margin-block: 0; color: var(--ink-soft); }

.small-print {
  max-inline-size: var(--measure);
  margin-block: 2rem 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Any input a visitor types into is 16px or larger: below that iOS zooms the
 * page in and throws them out of the layout mid-tap. */
input, select, textarea, button {
  font-family: inherit;
  font-size: max(1rem, 16px);
}

/* Footer */

.site-footer {
  background: var(--paper);
  border-block-start: 1px solid var(--line);
  padding-inline: 1.25rem;
  padding-block: 1.5rem 2rem;
}

.site-footer > * {
  max-inline-size: 68rem;
  margin-inline: auto;
}

.footer-disclaimer {
  margin-block: 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.9rem;
}

.footer-home { margin-block: 0.75rem 0; font-size: 0.9rem; }

.noscript-note {
  max-inline-size: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  color: var(--ink-soft);
}

@media (max-width: 40rem) {
  .menu-toggle { display: inline-flex; }
  .nav-links { display: none; inline-size: 100%; flex-direction: column; }
  .nav-links.open { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── The level test, the result card and the capture ──────────────────────────
 *
 * ONE MEASUREMENT IS LOAD-BEARING AND IT IS THE FIELD'S FONT SIZE. Below 16px
 * iOS Safari zooms the page when the field takes focus, which throws the
 * visitor out of the layout in the middle of a tap. The capture is the moment
 * the whole free asset exists for; it does not get to be the moment the page
 * jumps. Targets are at least 48px for the same reason.
 *
 * The capture sits INSIDE the result card, directly under the meter. On the
 * platform this pattern comes from it was the fourth block on the page, roughly
 * 1,600 CSS pixels below the meter on a phone and underneath the card asking for
 * money: twenty-three finished tests produced zero addresses in three days.
 */

.level-test-host { margin-block: 1.5rem 0; }

.test-card,
/* THE PRICE BLOCK. The numbers in it are the server's; this only arranges
 * them. The struck-through list price is a <s>, which carries the meaning to a
 * screen reader as well as to the eye — a line drawn with a border would say
 * nothing to either. */
.price-block {
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: var(--paper);
  margin-block: 1.5rem;
  max-inline-size: var(--measure);
}

.price-list {
  color: var(--ink-soft);
  margin-block: 0 0.25rem;
}

.price-now {
  font-size: 2.25rem;
  font-weight: 700;
  margin-block: 0 0.5rem;
  line-height: 1.1;
}

.price-terms {
  font-weight: 600;
  margin-block: 0 0.5rem;
}

.price-discount {
  margin-block: 0.75rem 0.25rem;
}

.price-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-block: 0.25rem 0;
}

.result-card {
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: var(--paper);
}

.test-prompt {
  font-size: 1.15rem;
  font-weight: 600;
  margin-block: 0.5rem 0.75rem;
}

.test-question { color: var(--ink-soft); margin-block: 0 1rem; }

.option-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.option {
  inline-size: 100%;
  min-block-size: 48px;
  text-align: start;
  padding-inline: 1rem;
  padding-block: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--paper);
  font: inherit;
  cursor: pointer;
}

.option:hover,
.option:focus-visible { border-color: var(--accent); }

.level-meter { margin-block: 1rem; }

.level-meter-track {
  block-size: 0.75rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.level-meter-fill {
  block-size: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.level-meter-band {
  margin-block: 0.5rem 0;
  font-weight: 700;
  font-size: 1.1rem;
}

.tier-list {
  list-style: none;
  margin-block: 1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.95rem;
}

.tier-row {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  border-block-end: 1px solid var(--line);
  padding-block-end: 0.4rem;
}

.result-footnote,
.result-note {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-block: 0.5rem 0;
}

.capture {
  margin-block: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--wash);
  display: grid;
  gap: 0.5rem;
}

.capture-label { font-size: 0.9rem; font-weight: 600; }

.capture-field {
  /* 16px exactly. See the note at the top of this block. */
  font-size: 16px;
  min-block-size: 48px;
  inline-size: 100%;
  padding-inline: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--paper);
  color: inherit;
}

.capture-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
}

.capture-check { min-block-size: 24px; min-inline-size: 24px; }

.capture-button { min-block-size: 48px; justify-content: center; }

.capture-error { color: var(--danger); font-size: 0.9rem; }

/* Not a person's field: off-screen without display:none, which some autofill
 * implementations ignore. */
.capture-trap {
  position: absolute;
  inset-inline-start: -9999px;
  block-size: 1px;
  overflow: hidden;
}

.capture-sent { font-weight: 600; }

.checkout-state,
.unsubscribe-state { margin-block: 1rem 0; font-weight: 600; }

.test-loading,
.test-error { color: var(--ink-soft); }