/* ============================================================================
   CASE/onboard/site/tokens.css . lane APPSHELL . 2026-09-25 . LIVE (was lane DESIGN, 2026-09-16).
   The brand closed in CASE/brand/r4/ (neutral ground #fafafa, ink #111111, greys #5c5c5c and #767676;
   lemon #e2f43b only on the primary button and the mark head) and the mark from
   CASE/brand/r3/final3/swap/ (white family in the header, black family as the app icon), on the
   structure FLOW proposed in CASE/brand/flow/site/tokens.css (spacing, layout, components unchanged).
   TYPE: Geist and Geist Mono, served from this site's own fonts/ (the official geist 1.7.2 package, the two
   variable woff2 files, OFL in fonts/Geist-OFL.txt; the founder said yes on 2026-09-25). NOTHING HERE FETCHES
   FROM ANY OTHER HOST: the decided pages imported Geist from Google Fonts, which sends every visitor address to
   Google before any yes and would make the privacy page wrong ("Nobody else"). The phone own sans is the
   fallback only while the file loads (font-display: swap).
   ============================================================================ */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/GeistMono-Variable.woff2") format("woff2"); }
:root {
  color-scheme: light only;

  /* surfaces: neutral, not warm (the founder: "lets go neutral") */
  --cream:   #fafafa;                   /* the ground */
  --paper:   #ffffff;                   /* cards, inputs */
  --cream-2: #f0f0f0;                   /* a pressed row, a well */

  /* greys */
  --grey-1:  #e5e5e5;                   /* hairlines, edges, disabled surface */
  --grey-2:  #9a9a9a;                   /* placeholders, disabled text, off marks (never a required boundary) */
  --grey-3:  #5c5c5c;                   /* secondary text, secondary links */
  --edge:    #767676;                   /* the field's own edge: a required boundary, held to 3:1 (RUN_checks.txt) */

  /* ink */
  --ink:     #111111;
  --ink-on:  #fafafa;

  /* the one accent, lemon, spent only on the button and the mark's head */
  --clay:    #111111;                   /* was the failed-state accent; now ink, told by text not colour */
  --lemon:   #e2f43b;

  /* type: Geist and Geist Mono, no serif */
  --serif: "Geist", system-ui, sans-serif;
  --sans:  "Geist", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(26px, 3.2vw, 36px);  --lh-display: 1.2;
  --fs-title:   20px;  --lh-title:   1.25;
  --fs-body:    16px;  --lh-body:    1.55;
  --fs-small:   14px;  --lh-small:   1.45;
  --fs-fine:    13px;  --lh-fine:    1.4;

  /* space: a 4 px grid, unchanged */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  --gutter: 24px;
  --measure: 34em;

  /* shape */
  --r-card: 12px; --r-input: 8px; --r-button: 8px;
  --hairline: 1px solid var(--grey-1);
  --tap: 52px;

  --shadow-card: 0 1px 0 rgba(17,17,17,.03), 0 6px 20px rgba(17,17,17,.04);
}

/* ---- ground ---------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; background: var(--cream); color: var(--ink);
  font: var(--fs-body)/var(--lh-body) var(--sans); -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

/* ---- the screen: one column, the button pinned to the bottom -------------------------- */
.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(var(--s4) + env(safe-area-inset-top, 0px)) var(--gutter)
           calc(var(--s6) + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; }
.screen > header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.screen > .body { flex: 1 1 auto; padding-top: var(--s8); }
.screen > footer { padding-top: var(--s6); display: grid; gap: var(--s3); }
@media (min-width: 720px) { .screen { padding-top: var(--s12); } .screen > .body { padding-top: var(--s12); } }

/* ---- type ------------------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); margin-bottom: var(--s4); max-width: var(--measure); font-weight: 400; }
h2 { font-size: var(--fs-title); line-height: var(--lh-title); }
h3 { font-family: "Geist Mono", var(--mono); font-size: var(--fs-fine); line-height: var(--lh-fine); font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; color: var(--grey-3); margin: var(--s6) 0 var(--s2); }
p { margin: 0 0 var(--s3); max-width: var(--measure); }
p.lead { font-size: 17px; color: var(--grey-3); }
.muted { color: var(--grey-3); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.fine { font-size: var(--fs-fine); line-height: var(--lh-fine); color: var(--grey-3); }
.langsw { display: inline; white-space: nowrap; }
.langsw button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--grey-3); cursor: pointer; letter-spacing: .04em; min-height: 0; }
.langsw button[aria-current="true"] { color: var(--ink); }
.langsw button:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
b, strong { font-weight: 500; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grey-2); }
ul { margin: 0 0 var(--s3); padding-left: 1.2em; } li { margin: 0 0 var(--s1); }
code, .mono { font-family: var(--mono); font-size: 14px; }

/* the wordmark: the closed mark (white family: black line, lemon head, no tile) plus the word in Geist */
.wordmark { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 17px; font-weight: 500; text-decoration: none; }
.wordmark svg, .wordmark img.logo { width: 28px; height: 28px; margin-right: 8px; vertical-align: middle; border-radius: 0; }

.steps { display: flex; gap: 6px; } .steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-1); }
.steps i.on { background: var(--ink); }

/* ---- the one button: lemon fill, ink label and edge: the ONLY other place lemon appears --- */
.button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--tap);
  padding: 0 var(--s6); border: 1.5px solid var(--ink); border-radius: var(--r-button); background: var(--lemon); color: var(--ink);
  font: 500 var(--fs-body)/1 var(--sans); text-decoration: none; cursor: pointer; transition: opacity .12s; }
.button:active { opacity: .82; }
.button:disabled, .button[aria-disabled="true"] { background: var(--grey-1); border-color: var(--grey-1); color: var(--grey-2); cursor: default; }
.button.quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.button.yes { background: var(--lemon); }
.button.go { background: var(--lemon); }
.link { display: block; text-align: center; padding: var(--s3); color: var(--grey-3); font-size: 15px;
  text-decoration: none; background: none; border: 0; font-family: var(--sans); cursor: pointer; width: 100%; }
.link:active { color: var(--ink); }

/* ---- the field ------------------------------------------------------------------------- */
.field { display: block; margin: var(--s4) 0; }
.field > span { display: block; font-size: var(--fs-small); color: var(--grey-3); margin-bottom: var(--s2); }
.input { display: block; width: 100%; min-height: var(--tap); padding: 0 var(--s4); border: 1.5px solid var(--edge); font-family: var(--sans);
  border-radius: var(--r-input); background: var(--paper); color: var(--ink); font-size: var(--fs-body); line-height: 1;
  outline: none; -webkit-appearance: none; appearance: none; }
.input::placeholder { color: var(--grey-3); }   /* APPSHELL: #9a9a9a on white is 2.8:1; placeholder text is held to 4.5 like any text */
.input:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; }
.input.code { font: 500 28px/1 var(--mono); letter-spacing: .32em; text-align: center; min-height: 64px; }

/* ---- the card and the row ---------------------------------------------------------------- */
.card { background: var(--paper); border: var(--hairline); border-radius: var(--r-card); padding: var(--s4);
  box-shadow: var(--shadow-card); margin-bottom: var(--s3); }
.card.empty { background: transparent; box-shadow: none; border-style: dashed; color: var(--grey-3); }
.row { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s2) 0;
  text-decoration: none; color: inherit; border: 0; background: none; width: 100%; font: inherit; text-align: left;
  cursor: pointer; }
.row + .row { border-top: var(--hairline); }
.row .ic { flex: none; width: 24px; height: 24px; color: var(--ink); }
.row .t { flex: 1 1 auto; min-width: 0; } .row .t small { display: block; color: var(--grey-3); font-size: var(--fs-fine); }
.row .n { color: var(--grey-3); font-size: var(--fs-small); white-space: nowrap; flex: none; }
.row .chev { flex: none; width: 20px; height: 20px; color: var(--grey-2); }

.ic { display: inline-block; width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---- the connect mark: four states, told by the row's text, not by an accent colour ------- */
.mark { position: relative; width: 44px; height: 44px; flex: 0 0 44px; min-width: 44px; border-radius: 50%; background: var(--paper);
  border: 1.5px solid var(--grey-1); box-shadow: var(--shadow-card); display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink); }
.mark .ic { width: 20px; height: 20px; }
.mark::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; box-sizing: border-box; border: 2px solid var(--cream); background: var(--ink); }
.mark[data-state="unsent"]::after { background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 0 0 2px var(--cream); }
.mark[data-state="failed"]::after { background: var(--paper); border: 1.5px dashed var(--ink); box-shadow: 0 0 0 2px var(--cream); }
.mark[data-state="sending"]::after { background: var(--paper); border: 1.5px solid var(--grey-1);
  border-top-color: var(--ink); box-shadow: 0 0 0 2px var(--cream); animation: mark-turn .9s linear infinite; }
@keyframes mark-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mark[data-state="sending"]::after { animation: none; border-color: var(--ink); border-top-color: var(--grey-1); } }

.world { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: center; }
.world img { width: 72px; height: 72px; border-radius: 12px; border: var(--hairline); display: block; }
.world h2 { margin-bottom: 2px; } .world p { margin: 0; color: var(--grey-3); font-size: var(--fs-small); }

.well { background: var(--cream-2); border: var(--hairline); border-radius: var(--r-input); padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.5; word-break: break-all; -webkit-user-select: all; user-select: all; }

.scroll { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--paper); border: var(--hairline); border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s6);
  min-height: 0; }
.scroll h2 { font-size: 18px; margin: var(--s6) 0 var(--s2); font-family: var(--sans); font-weight: 500; } .scroll h2:first-child { margin-top: 0; }
.scroll p, .scroll li { font-size: 15px; line-height: 1.55; }
.scroll .end { text-align: center; color: var(--grey-3); font-size: var(--fs-fine); padding-top: var(--s4); border-top: var(--hairline); margin-top: var(--s6); }

@media (min-width: 720px) { :root { --gutter: 40px; } }

/* ---- APPSHELL (2026-09-25): the pieces the invitation version adds ----------------------- */
[hidden] { display: none !important; }   /* a class that sets display (.inline, .act) must never un-hide a hidden form */
/* a select that looks like the field (the professional role on the landing) */
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; line-height: normal; }
/* the link page: three named icon actions, one per row, each at least a tap tall */
.actions { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.act { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: 0 var(--s4); width: 100%;
  border: 1.5px solid var(--ink); border-radius: var(--r-button); background: var(--paper); color: var(--ink);
  font: 500 var(--fs-body)/1.2 var(--sans); text-align: left; cursor: pointer; }
.act.primary { background: var(--lemon); }
.act .ic { flex: none; width: 22px; height: 22px; }
.act:disabled { border-color: var(--grey-1); color: var(--grey-3); background: var(--paper); cursor: default; }
.act small { display: block; font-weight: 400; font-size: var(--fs-fine); color: var(--grey-3); }
/* a form line: field and button side by side when there is room */
.inline { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 460px; }
.inline .input { flex: 1 1 200px; width: auto; min-width: 0; }
.inline .button { flex: 0 0 auto; width: auto; }
.sent-line { font-size: var(--fs-small); color: var(--ink); margin: var(--s2) 0 0; }