/* THE insy8 PUBLIC DESIGN SYSTEM.

   Ported from experiments/landing-craft/theme.css, which is where it was
   designed. This file is the tokens plus the primitives every public surface
   shares (the landing, the auth shell, the legal pages, the lead form). The
   landing's own world (acts, dial, ring, chrome, status bar) is landing.css and
   loads on the landing alone.

   Industrial-editorial. Control (brutalist authority, deep shadow,
   signal red for STATE ONLY), Arrival (atmospheric scale, circular language,
   patience), Braun 1970s (visible grid, functional labelling, no ornament).
   The world is its own; it does not import the app's tokens. */
:root{
  --sc-canvas:#08080A; --sc-surface:#0F0F12;
  --sc-ink:#EDEDF0;    --sc-ink-soft:#75757E;
  /* A system needs a BRAND colour and a STATE colour and they are not the same
     token. Collapsing them was the bug: with one token, "3 blocked" rendered in
     the brand colour, which reads as approval on the one word that must not.
     The shipped auth shell already had this right (--au-accent plus --au-rose).
     Brand is the mark, links and the primary action. State is blocked, absent,
     needs-you, and it appears nowhere else. Control's own discipline: the red in
     that game is signal, never identity. */
  --brand:#57D3A4; --brand-ink:#06120D;
  --state:#FF3B2F;
  /* State needs three more stops than the pure signal: a hairline, a wash and
     an ink that stays readable on the wash. Declared here so an alert on the
     auth shell cannot invent its own red. */
  --state-line:rgba(255,59,47,.38); --state-wash:rgba(255,59,47,.07); --state-ink:#FFB3AD;
  /* One step between --sc-ink and --sc-ink-soft. Body copy on a long legal page
     needs it; the soft stop is a label colour and reads thin at paragraph
     length. */
  --sc-ink-mid:#C2C2C9; --sc-ink-dim:#A2A2AB;
  --sc-ink-lift:#FFFFFF;   /* the one step above --sc-ink, for a pressed/hover primary */
  --sc-accent:var(--brand); --sc-accent-ink:var(--brand-ink);
  --sc-font-display:"Helvetica Neue",Inter,system-ui,sans-serif;
  --sc-font-text:"Helvetica Neue",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.16);
  --money:#C8A96A;            /* the second track. Arrival's bone/amber, never red */
  --pad:clamp(20px,4vw,64px);
}

/* ── THE MARK ────────────────────────────────────────────────────────────────
   Two circles, nearly tangent: the 8 rotated is the lemniscate, drawn as
   geometry rather than a script curve, because two loops that have to meet is
   what the product argues. One stroke, no fill, currentColor. The markup lives
   in templates/partials/_mark.html and nowhere else.
   non-scaling-stroke holds the hairline at 1.6 CSS px at every size. */
.i8-mark{display:inline-flex;align-items:center;gap:.58em;text-decoration:none;color:inherit}
.i8-mark svg{width:var(--i8-mark-w,26px);height:calc(var(--i8-mark-w,26px) * 15 / 26);overflow:visible;flex:none}
.i8-mark circle{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke}
.i8-wm{font-family:var(--mono);font-size:calc(var(--i8-mark-w,26px) * .46);letter-spacing:.16em;
       text-transform:uppercase;font-weight:600}

/* ── SHARED PRIMITIVES ───────────────────────────────────────────────────────
   The vocabulary the landing established, available to every public surface so
   auth and legal are the same product rather than a token-matched imitation. */
.i8-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--sc-ink-soft);margin:0 0 18px}
.i8-lab.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:99px;
                    background:var(--brand);margin-right:9px;vertical-align:middle}
.i8-say{font-size:clamp(28px,4.4vw,58px);line-height:1.16;font-weight:400;letter-spacing:-.01em;margin:0}
.i8-say em{font-style:normal;color:var(--sc-ink-soft)}
.i8-sub{color:var(--sc-ink-soft);max-width:44ch;margin-top:20px;font-size:16px;line-height:1.6}
.i8-fine{font-family:var(--mono);font-size:11px;color:var(--sc-ink-soft);margin-top:14px;letter-spacing:.04em}
.i8-fine a{color:var(--sc-ink);border-bottom:1px solid var(--line-2);text-decoration:none}
.i8-fine a:hover{border-bottom-color:var(--brand)}

/* The public bar. One height, one ground, one hairline, on every public
   surface, so crossing from the landing into signup is not a scene change. */
.i8-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;height:46px;
        padding:0 var(--pad);background:rgba(8,8,10,.86);backdrop-filter:blur(14px);
        border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;
        letter-spacing:.08em;text-transform:uppercase;color:var(--sc-ink-soft)}
.i8-bar .sp{margin-left:auto}
.i8-bar a{color:var(--sc-ink-soft);text-decoration:none;transition:color .15s}
.i8-bar a:hover{color:var(--sc-ink)}
.i8-bar .i8-mark{--i8-mark-w:22px;color:var(--sc-ink)}
.i8-bar .i8-in{color:var(--sc-ink);border:1px solid var(--line-2);border-radius:2px;padding:5px 12px}
.i8-bar .i8-in:hover{border-color:var(--sc-ink);color:var(--sc-ink)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}