/* Shared by the three landing variants (/a, /b, /c) and the privacy page:
   the brand faces, the three brand tokens, a reset, the browser surfaces, the
   lead form's mechanics. Each variant's own look lives in its folder. */

@font-face { font-family: "Assistant"; src: url("../fonts/assistant-vf-hebrew.woff2") format("woff2"); font-weight: 200 800; unicode-range: U+0590-05FF, U+FB1D-FB4F, U+200E-200F; font-display: swap; }
@font-face { font-family: "Assistant"; src: url("../fonts/assistant-vf-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #FAF8F4;
  --paper-raised: #FFFFFF;
  --paper-sunk: #F2EFE9;
  --ink: #1A1A1A;
  --ink-2: #57544E;
  --ink-3: #6E6A62;
  --line: #E7E3DA;
  --cobalt: #2A3FE0;
  --cobalt-ink: #1B2699;
  --cobalt-wash: #ECEEFC;
  --night: #0B1020;
  --night-2: #121a30;
  --on-night: #E9ECF5;
  --on-night-2: #A9B1C7;

  --he: "Assistant", "Segoe UI", sans-serif;
  --lat: "Space Grotesk", "Assistant", sans-serif;
  --mono: "Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(1rem, 4vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--he);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--cobalt); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--cobalt); color: var(--paper); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: #C9C3B6 var(--paper); }

.lat { font-family: var(--lat); }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

/* The ledger's four record marks, one shape each (used by all three variants). */
.mark { inline-size: .85rem; block-size: .85rem; display: inline-block; flex: none; }
.mark-tested { background: var(--cobalt); }
.mark-asked { border: 2px solid var(--cobalt); border-radius: 50%; }
.mark-guess { border: 2px dashed var(--ink-3); }
.mark-open { border: 2px solid var(--ink); }

/* Footer: the lockup at the start, the rest pushed to the end. The lockup is
   direction:ltr, so its own logical margins would resolve the wrong way. */
.foot p { margin-inline-start: auto; }
.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.demo-tag {
  font-family: var(--he); font-size: .8rem; font-weight: 700;
  padding: .1em .6em; border: 1px solid currentColor; border-radius: 2px;
}

/* The inline lockup: the name set in the page's Space Grotesk (the svg slot is kept for the coming mark). */
.lockup { display: inline-flex; align-items: flex-end; gap: .02em; direction: ltr; color: var(--ink); text-decoration: none; }
.lockup svg { inline-size: 1.08em; block-size: 1.08em; margin-block-end: -.13em; margin-inline-end: -.06em; }
.lockup span { font-family: var(--lat); font-weight: 700; letter-spacing: -.03em; line-height: .8; }

/* ---- the lead form (shared mechanics; variants restyle the shell) ---- */
.lead { display: grid; gap: 1.1rem; }
.lead label { display: grid; gap: .35rem; font-weight: 600; font-size: 1rem; }
.lead input, .lead textarea {
  inline-size: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--field-line, #CFC9BC);
  border-radius: 3px;
  background: var(--field-bg, var(--paper-raised));
  color: var(--field-ink, var(--ink));
  font-weight: 400;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lead textarea { min-block-size: 6.5rem; resize: vertical; line-height: 1.5; }
.lead input:focus, .lead textarea:focus {
  outline: none; border-color: var(--field-focus, var(--cobalt));
  box-shadow: 0 0 0 3px var(--field-ring, rgba(42, 63, 224, .18));
}
.lead [aria-invalid="true"] { border-color: #B3261E; }
.lead .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead .row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .lead .row { grid-template-columns: 1fr 1fr; } }
.lead .send {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem;
  border: 0; border-radius: 3px; cursor: pointer;
  background: var(--send-bg, var(--cobalt)); color: var(--send-ink, var(--paper));
  font-weight: 700; font-size: 1.05rem;
  transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 24px -12px rgba(27, 38, 153, .55);
}
.lead .send:hover { transform: translateY(-2px); }
.lead .send:active { transform: translateY(0); }
.lead .send[disabled] { opacity: .6; cursor: progress; transform: none; }
.lead .send svg { inline-size: 1.1em; block-size: 1.1em; transform: scaleX(-1); }
.lead .fields { display: grid; gap: 1.1rem; }
.lead .status { font-weight: 600; }
.lead .status:empty { margin-block-end: -1.1rem; }
.lead .status[data-kind="error"] { color: var(--status-error, #B3261E); }
.lead .fine { font-size: .9rem; color: var(--fine-ink, var(--ink-3)); max-inline-size: 60ch; }
.lead.done .fields { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}