/* ============================================================================
   MIDNIGHT — the Linear-derived system
   ----------------------------------------------------------------------------
   Structure, spacing, type scale, animation and elevation language are Linear's,
   measured from the live site rather than copied from the reference doc (the two
   disagree in places; the measurements are noted below).

   THE ONE DELIBERATE DEPARTURE: the accent.
     Linear's accent is acid lime #E4F222. Ours is copper #E8A055. Copper was
     chosen over lime for a metered-billing product because lime reads as
     "terminal / hacker tool" while copper reads as "metered" — and because the
     rest of the marketing copy frames the product around value per dollar.
     Copper keeps Linear's *behavioural* rule intact: exactly ONE chromatic
     element per view, used only to mean "act here" or "you are here".

   TWO CORRECTIONS TO LINEAR'S OWN PALETTE
     1. Their muted text #62666D measures 3.30:1 on carbon — BELOW WCAG AA. Their
        own site relies on it heavily. Shipping it would reintroduce the exact bug
        this project already fixed once, so tertiary text is #7E828A (4.94:1).
     2. Their `--color-iris-violet` / `--color-lavender` (tag fills) are dropped.
        #6366F1 is the default AI violet this project removed on purpose; the tag
        ramp here is a tint ladder instead.

   MEASURED FROM THE LIVE SITE (differ from the reference doc):
     * h1 is 64px weight 510, letter-spacing -1.408px  (doc says 72px/display)
     * h2 is 40px weight 510, NOT 48px
     * scroll reveals are NOT a CSS transition — they are JS-driven. The easing
       and 0.7s duration below are theirs (transform 0.7s cubic-bezier(.32,.72,0,1)).
     * nav is fixed, 72px tall, transparent with backdrop-filter blur(20px) and a
       1px rgba(255,255,255,.08) bottom border.
     * the site is DARK-ONLY (color-scheme: dark, no toggle).

   Load order: app.css → marketing.css → system.css   (public)
               app.css → system.css                   (console)
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================ tokens: colour == */
:root {
  /* surfaces — Linear's ladder, kept exactly.
     Elevation comes from this progression + hairlines, never from ambient shadow. */
  --void:      #08090A;
  --carbon:    #0F1011;
  --obsidian:  #161718;
  --graphite:  #23252A;
  --smoke:     #383B3F;

  /* type ramp — warm-neutral, Linear's values, with their failing ash corrected */
  --paper:  #FFFFFF;   /* 19.05:1 on carbon — headings, hero */
  --bone:   #E5E5E6;   /* 15.13:1 — high-contrast body */
  --mist:   #D0D6E0;   /* 13.04:1 — body, button labels */
  --fog:    #8A8F98;   /*  5.86:1 — secondary, muted */
  --ash:    #7E828A;   /*  4.94:1 — tertiary. Linear use #62666D = 3.30:1 FAIL */

  /* the single chromatic accent */
  --accent:        #E8A055;   /*  8.70:1 on carbon, 9.10:1 on void */
  --accent-bright: #F2B673;   /* hover */
  --accent-press:  #D9904A;
  --accent-ink:    #08090A;   /* ink ON the accent — 9.10:1 */
  --accent-wash:   rgba(232, 160, 85, .10);
  --accent-line:   rgba(232, 160, 85, .28);

  /* semantic — supporting only, never used as an action colour (Linear's rule) */
  --ok:   #27A644;
  --warn: #C9973F;
  --bad:  #EB5757;
  --info: #D0D6E0;

  /* borders — hairline. Linear separate surfaces with these, not with shadows. */
  --line:        rgba(255, 255, 255, .08);
  --line-strong: var(--graphite);
  --line-soft:   rgba(255, 255, 255, .05);

  /* radii — Linear's full vocabulary is only three */
  --r-card: 12px;
  --r-btn:  6px;
  --r-pill: 9999px;
  --r-sm:   4px;

  /* spacing ladder, base 4 */
  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-64: 64px; --sp-96: 96px;

  /* layout */
  --max: 1200px;
  --section-gap: 72px;
  --card-padding: 24px;

  /* elevation — hairline-first. Only the accent button gets a real shadow. */
  --shadow-sm:     0 2px 4px rgba(0,0,0,.4);
  --shadow-card:   0 4px 32px rgba(8,9,10,.6);
  --inset-hairline: inset 0 0 0 1px var(--graphite);
  --inset-top:      inset 0 1px 0 rgba(255,255,255,.03);
  --accent-lift:    inset 0 1px 1px rgba(0,0,0,.10), inset 0 3px 2px rgba(0,0,0,.07),
                    inset 0 5px 2px rgba(0,0,0,.04), 0 0 1px rgba(0,0,0,.08);

  /* motion — Linear's own values, measured */
  --ease-out:  cubic-bezier(.32, .72, 0, 1);   /* their transform easing */
  --ease-ui:   cubic-bezier(.25, .46, .45, .94);
  --t-fast:    100ms;    /* colour hovers */
  --t-ui:      160ms;    /* border / bg / shadow */
  --t-reveal:  700ms;    /* scroll reveals */

  /* fonts */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The console's own tokens, remapped onto the midnight ladder so both surfaces are
   one product. app.css keeps defining --fg/--bg/etc; these win because system.css
   loads last. */
:root, [data-theme="light"], [data-theme="dark"] {
  --fg: var(--mist);
  --fg-2: var(--fog);
  --muted: var(--fog);
  --faint: var(--ash);
  --bg: var(--void);
  --sunken: var(--carbon);
  --raised: var(--carbon);
  --line-2: var(--line);
  --primary: var(--accent);
  --primary-strong: var(--accent-press);
  --primary-soft: var(--accent-wash);
  --primary-line: var(--accent-line);
  --ink: var(--paper);
  --ink-2: var(--mist);
  --ink-3: var(--fog);
  --surface: var(--carbon);
  --neutral-2: var(--void);
  --neutral-3: var(--line);
  --canvas: var(--void);
  --btn: var(--accent);
  --btn-hov: var(--accent-bright);
  --btn-fg: var(--accent-ink);
  --code-bg: #0A0B0C;
  --code-bar: #141516;
  --code-fg: #D6D9DE;
  --code-dim: #9AA0A8;
  --code-com: #7E848C;
  --code-key: #A9C7E8;
  --code-str: #9AD0A6;
  --code-num: #E5C08A;
  --code-fn:  #C9A8DC;
}

/* ========================================================== tokens: type ====== */
/* Linear's scale + their OpenType features. cv01/ss03/zero ARE the identity. */
html { color-scheme: dark; }
body {
  font-family: var(--sans);
  font-feature-settings: "cv01" on, "ss03" on, "zero" on;
  background: var(--void);
  color: var(--mist);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.165px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* every text role below verified >= 4.5:1 on the LIGHTEST surface it sits on */
h1, h2, h3, h4 { color: var(--paper); margin: 0; }

/* console labels: monospace micro-headings stay (a heading in a dense console is
   a signpost, not a title) — but now in Linear's 10-11px tracked register. */
h2 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fog);
  margin: var(--sp-32) 0 var(--sp-12);
  display: flex; align-items: center; gap: 9px;
}
h2:first-child { margin-top: 0; }
h2::before { content: ""; flex: none; width: 13px; height: 1px; background: var(--accent); }
.card h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fog);
}

/* ---------------------------------------------------------- public site type - */
/* h1 64px/510/-1.408px is Linear's measured hero. */
.mk h1, .mk .hero h1 {
  font-family: var(--sans);
  font-size: clamp(38px, 6.2vw, 64px);
  font-weight: 510;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--paper);
  margin: 0 0 var(--sp-20);
  text-wrap: balance;
  display: block;
}
.mk h1::before { display: none; }
/* h2 on the public site is a real 40px section heading, not a console label */
.mk h2 {
  font-family: var(--sans);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 510; line-height: 1.1; letter-spacing: -0.022em;
  text-transform: none; color: var(--paper);
  margin: 0 0 var(--sp-16);
  display: block;
}
.mk h2::before { display: none; }
.mk h2:first-child { margin-top: 0; }
.mk h3 { font-size: 20px; font-weight: 590; line-height: 1.33; letter-spacing: -0.012em; color: var(--mist); }
.mk p  { color: var(--fog); font-size: 15px; line-height: 1.6; letter-spacing: -0.165px; }
.mk .sec-sub, .mk .lead { color: var(--fog); font-size: 16px; line-height: 1.6; }
.mk .eyebrow, .mk .hero-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fog);
}

/* ====================================================== layout + rhythm ====== */
/* 1200px contained, full-bleed backgrounds, 96px section rhythm. */
.mk-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-24); }
.mk-narrow { max-width: 760px; }
section.sec {
  padding: var(--section-gap) 0;
  border-top: 1px solid var(--line);
  background: var(--void);
}
section.sec:first-of-type { border-top: 0; }
section.sec-alt { background: var(--carbon); border-top: 1px solid var(--line); }
.sec-head { max-width: 640px; margin-bottom: var(--sp-48); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ==================================================== surfaces / elevation ==== */
/* Hairline inner border, no outer glow. Linear's card edge comes from the border. */
.card, .panel {
  background: var(--carbon);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--inset-hairline);
  padding: var(--card-padding);
}
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-12); padding: var(--sp-16) var(--sp-24);
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.card-body { padding: var(--sp-24); }

/* metric strip — one object with internal divisions, as before, on carbon */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--carbon);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--inset-hairline);
}
.kpi { padding: var(--sp-16) var(--sp-20); border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi .k {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .085em; text-transform: uppercase; color: var(--fog); margin-bottom: 6px;
}
.kpi .v {
  font-family: var(--mono); font-size: 26px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.kpi .v small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--fog); letter-spacing: 0; }
.kpi .n { font-size: 12.5px; color: var(--ash); margin-top: 4px; }
.rail .kpis { grid-template-columns: minmax(0, 1fr); }
.rail .kpi { border-right: 0; border-bottom: 1px solid var(--line); }
.rail .kpi:last-child { border-bottom: 0; }

.cols {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--sp-24); align-items: start;
}
.cols.wide-main { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
.cols.wide-rail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cols.filters  { grid-template-columns: 220px minmax(0, 1fr); }
.rail { display: grid; gap: var(--sp-16); align-content: start; position: sticky; top: 88px; }
.rail-list .r {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-12); padding: 10px 0; border-bottom: 1px solid var(--line);
}
.rail-list .r:last-child { border-bottom: 0; }
.rail-list .r .k { font-size: 13px; color: var(--fog); }
.rail-list .r .v {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--mist);
}
@media (max-width: 1000px) {
  .cols, .cols.wide-main, .cols.wide-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
}
@media (max-width: 900px) { .cols.filters { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ tables ===== */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px var(--sp-16); border-bottom: 1px solid var(--line); vertical-align: middle; }
th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .085em; text-transform: uppercase; color: var(--fog);
  background: var(--void); border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
td { font-size: 13.5px; color: var(--mist); }
tbody tr:last-child td, tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast) var(--ease-ui); }
tbody tr:hover td { background: rgba(255, 255, 255, .022); }
td.num, th.num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--mono); font-size: 12.8px;
}
td.mono, .mono { font-family: var(--mono); font-size: 12.5px; }
td .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.overflow-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================== buttons ===== */
/* THE FILLED ACCENT BUTTON IS THE ONLY CHROMATIC ELEMENT PER VIEW. Linear's rule:
   the inset lift is the one place a real shadow is applied to chrome. */
.btn, button {
  font-family: var(--sans); font-size: 13px; font-weight: 510;
  letter-spacing: -0.011em; border-radius: var(--r-btn);
  border: 1px solid transparent; padding: 9px 16px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--accent-lift);
  transition: background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui),
              color var(--t-fast) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui),
              transform var(--t-ui) var(--ease-ui);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  justify-content: center; white-space: nowrap;
}
.btn:hover, button:hover { background: var(--accent-bright); }
.btn:active, button:active { background: var(--accent-press); transform: translateY(.5px); }

/* secondary: transparent, hairline border. Linear's ghost button. */
.btn.sec, button.sec {
  background: transparent; color: var(--mist);
  border-color: var(--line-strong); box-shadow: none;
}
.btn.sec:hover, button.sec:hover { background: var(--graphite); color: var(--paper); border-color: var(--smoke); }
.btn.ghost, button.ghost { background: transparent; color: var(--fog); border-color: transparent; box-shadow: none; }
.btn.ghost:hover, button.ghost:hover { background: var(--graphite); color: var(--mist); }
.btn.danger, button.danger { background: transparent; color: var(--bad); border-color: rgba(235,87,87,.4); box-shadow: none; }
.btn.danger:hover, button.danger:hover { background: rgba(235,87,87,.12); }
td .btn.sm, td button.sm {
  background: transparent; color: var(--accent); border-color: transparent; box-shadow: none;
}
td .btn.sm:hover, td button.sm:hover { background: var(--graphite); color: var(--accent-bright); }
.btn.sm, button.sm { padding: 5px 10px; font-size: 12.5px; min-height: 30px; }

/* ============================================================= nav / chrome == */
/* Fixed, transparent, blur(20px) — Linear's measured header treatment. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 9, 10, .72);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { color: var(--paper); font-weight: 510; font-size: 16px; }
.brand .dot { background: var(--accent); color: var(--accent-ink); border-radius: 5px; font-weight: 590; }
.brand .tag { font-family: var(--mono); font-size: 11px; color: var(--fog); border-color: var(--line); background: rgba(255,255,255,.03); }
.nav a {
  color: var(--mist); font-size: 13px; font-weight: 400; border-radius: var(--r-btn);
  padding: 8px 12px;
  transition: color var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui);
}
.nav a:hover { color: var(--paper); background: var(--graphite); }
/* active = copper. Selection is the most important signal in an Operate surface. */
.nav a.active { color: var(--accent); background: var(--accent-wash); font-weight: 510; }

/* ================================================================ forms ===== */
label { color: var(--mist); font-weight: 510; font-size: 12.5px; }
label .opt { color: var(--fog); font-weight: 400; }
input, select, textarea {
  font-family: var(--sans); font-size: 14px;
  background: rgba(255,255,255,.02); color: var(--mist);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 10px 12px;
  transition: border-color var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui);
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
/* focus ring: the border brightens to mist (Linear's rule), plus a copper halo */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--mist);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field .hint { color: var(--fog); font-size: 12px; }
.field:focus-within label { color: var(--accent); }
.check span { color: var(--mist); }

/* =============================================================== notices ==== */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-btn);
  background: var(--carbon); box-shadow: var(--inset-hairline);
  color: var(--mist); font-size: 13.5px;
  border-left: 2px solid var(--fog);
}
.alert strong { color: var(--paper); }
.alert.ok   { border-left-color: var(--ok);   background: color-mix(in srgb, var(--ok) 8%, var(--carbon)); }
.alert.ok .ic { color: var(--ok); }
.alert.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--carbon)); }
.alert.warn .ic { color: var(--warn); }
.alert.err  { border-left-color: var(--bad);  background: color-mix(in srgb, var(--bad) 8%, var(--carbon)); }
.alert.err .ic { color: var(--bad); }

/* ================================================================ pills ===== */
/* Linear: badge radius 4px, rgba(255,255,255,.05) fill, fog text, 12px. */
.pill {
  border-radius: var(--r-sm); border: 1px solid var(--line);
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  background: rgba(255,255,255,.05); color: var(--fog);
  padding: 1px 7px; display: inline-flex; align-items: center; gap: 5px;
}
.pill.ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent);   border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.pill.bad  { color: var(--bad);  background: color-mix(in srgb, var(--bad) 14%, transparent);  border-color: color-mix(in srgb, var(--bad) 32%, transparent); }
.pill.accent { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-line); }
.dot-ok { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =============================================================== misc ======= */
.meter { height: 5px; border-radius: var(--r-pill); background: var(--graphite); overflow: hidden; }
.meter > span { background: var(--accent); border-radius: var(--r-pill); display: block; height: 100%; transition: width var(--t-reveal) var(--ease-out); }
.meter.warn > span { background: var(--warn); }
.meter.bad > span { background: var(--bad); }
ul.notes { color: var(--fog); } ul.notes strong { color: var(--mist); }
dl.deflist dt { color: var(--fog); } dl.deflist dd { color: var(--mist); font-variant-numeric: tabular-nums; }
code {
  font-family: var(--mono); font-size: 12.5px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--mist); padding: 1px 5px;
}
pre { background: var(--void); border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--mist); }

.empty {
  text-align: left; padding: var(--sp-32) var(--sp-24); color: var(--fog);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: transparent;
}
.empty .t { font-weight: 510; color: var(--mist); font-size: 14px; margin-bottom: 5px; }
.empty .d { font-size: 13.5px; margin-bottom: var(--sp-16); max-width: 62ch; }

.auth { background: var(--void); }
.auth-brand .dot { background: var(--accent); color: var(--accent-ink); border-radius: 6px; font-weight: 590; }
.auth-card .card { box-shadow: var(--inset-hairline), var(--shadow-card); }
.auth-card h1 { font-size: 20px; font-weight: 510; letter-spacing: -0.022em; }
.auth-card .sub { color: var(--fog); }
.auth-foot { color: var(--fog); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent-line); color: var(--paper); }
.divider { background: var(--line); }
.copied { color: var(--ok) !important; }
.keyreveal > summary { color: var(--fog); border-bottom-color: var(--line); }
.keyreveal > summary:hover { color: var(--mist); }
.keyreveal code { color: var(--mist); }

/* ============================================================= code block === */
/* The one cool-dark material. Recessed one step BELOW void. */
.codeblock { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--code-bg); overflow: hidden; }
.codeblock pre, .codeblock code { background: transparent; border: 0; color: var(--code-fg); padding: 0; }
.codeblock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--code-bar);
  border-bottom: 1px solid var(--line);
}
.codeblock-bar .d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.codeblock-bar .d:nth-child(1) { background: #4A4E54; }
.codeblock-bar .d:nth-child(2) { background: #3E4247; }
.codeblock-bar .d:nth-child(3) { background: #34383D; }
.codeblock-name { font-family: var(--mono); font-size: 11.5px; color: var(--code-dim); }
.codeblock-copy {
  margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 400;
  color: var(--code-dim); background: transparent; box-shadow: none;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 9px;
  transition: color var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
}
.codeblock-copy:hover { color: var(--code-fg); border-color: var(--smoke); background: transparent; }
.c-com { color: var(--code-com); } .c-key { color: var(--code-key); }
.c-str { color: var(--code-str); } .c-num { color: var(--code-num); }
.c-fn  { color: var(--code-fn); }  .c-dim { color: var(--code-dim); }
pre:not(.codeblock pre) { color: var(--mist); }

/* ======================================================= MARKETING SURFACE === */
/* Hero: left-aligned oversized headline, tight tracking, NO button — a link. */
.hero { padding: 128px 0 var(--sp-96); position: relative; overflow: hidden; }
.hero-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-24);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-64); align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0,1fr); gap: var(--sp-40); } .hero { padding: 96px 0 var(--sp-64); } }
.hero-lead { color: var(--fog); font-size: 17px; line-height: 1.6; max-width: 30em; margin: 0 0 var(--sp-32); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }
.hero-note { color: var(--fog); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--sp-24); }
/* A separator glyph is punctuation the user reads, not a border. At --smoke it
   measured 1.77:1 — effectively invisible. It takes the muted text ramp. */
.hero-note .sep { color: var(--fog); opacity: .75; }

/* Link-with-arrow: Linear's hero CTA is a link, not a button. */
.arrow-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mist); font-size: 15px; font-weight: 400;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
}
.arrow-link:hover { color: var(--accent); border-bottom-color: var(--accent-line); }
.arrow-link .arw { transition: transform var(--t-ui) var(--ease-out); }
.arrow-link:hover .arw { transform: translateX(3px); }

/* Atmospheric floor: ONE gradient, dark->light, grounding the code sample. */
.mk-atmo {
  position: absolute; inset: 0 0 auto 0; height: 760px;
  pointer-events: none; z-index: 0; overflow: hidden;
  background:
    radial-gradient(52% 58% at 50% 100%, rgba(8,9,10,0) 0%, rgba(8,9,10,.5) 100%),
    linear-gradient(180deg, var(--void) 6%, rgba(232,160,85,.055) 58%, rgba(208,214,224,.10) 100%);
}
.mk-atmo::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(760px 460px at 30% 8%, #000 0%, transparent 78%);
          mask-image: radial-gradient(760px 460px at 30% 8%, #000 0%, transparent 78%);
}
/* Solidity, not a gradient. Linear's do-not list forbids decorative gradients on
   text ("gradients are reserved for the hero atmospheric floor only"), and a
   background-clip:text phrase has a computed color of `transparent`, so it cannot be
   contrast-checked by any tool — ours measured it at 1.05:1 and was unreadable to the
   audit even though it painted. Linear's own hero uses plain grey with a white
   emphasis span; a solid accent is the same idea without the exemption. */
.hl-ink { color: var(--accent); }
.sec-mark { display: block; width: 22px; height: 1px; background: var(--accent); margin-bottom: var(--sp-16); }
.sec-head.center .sec-mark { margin-left: auto; margin-right: auto; }

/* The dark band is now the CANVAS colour, so it reads as "back to the void"
   rather than a navy/violet panel. On a dark site that is the correct gesture. */
.mk .sec-dark, section.sec-dark {
  background: var(--obsidian);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sec-dark h2, .sec-dark .sec-head h2, .mk .sec-dark h2 { color: var(--paper); }
.sec-dark h3 { color: var(--mist); }
.sec-dark .sec-sub, .sec-dark p { color: var(--fog); }
.sec-dark .sec-mark { background: var(--accent); }
.sec-dark a { color: var(--accent); }
.sec-dark .step { border-bottom-color: var(--line); }
.sec-dark .step-n {
  border: 1px solid var(--accent-line); background: var(--accent-wash); color: var(--accent);
}
.sec-dark code, .sec-dark .foot-mono { color: var(--accent); background: rgba(255,255,255,.05); border-color: var(--line); }

/* Closing CTA: the accent FILL, with ink on it — Linear's one chromatic button,
   scaled to a panel. Dark ink on copper = 9.1:1. */
.cta-band {
  display: flex; flex-wrap: wrap; gap: var(--sp-20);
  align-items: center; justify-content: space-between;
  padding: var(--sp-40) var(--sp-32); border-radius: var(--r-card);
  color: var(--accent-ink); background: var(--accent);
  box-shadow: var(--accent-lift);
}
.cta-band h2, .mk .cta-band h2 {
  color: var(--accent-ink); font-family: var(--sans); font-size: 24px;
  font-weight: 510; margin: 0 0 6px; letter-spacing: -0.012em;
}
.cta-band h2::before { display: none; }
.cta-band p, .mk .cta-band p { color: rgba(8,9,10,.78); margin: 0; font-size: 15px; }
.cta-band .foot-mono, .mk .cta-band .foot-mono { color: rgba(8,9,10,.78); }
.cta-band .sec-sub { color: rgba(8,9,10,.78); }
/* on the accent panel the button INVERTS so there is still only one accent */
.cta-band .btn, .cta-band .btn.sec {
  background: var(--accent-ink); color: var(--paper); border-color: transparent;
  box-shadow: none;
}
.cta-band .btn:hover, .cta-band .btn.sec:hover { background: #1A1C1E; color: var(--paper); }
@media (max-width: 720px) { .cta-band { padding: var(--sp-24) var(--sp-20); } }

/* ================================================================= ANIMATION == */
/* Linear's motion vocabulary, measured: colour hovers at 100ms, chrome at 160ms,
   and scroll reveals at 700ms cubic-bezier(.32,.72,0,1). Reveals are JS-driven
   there; here they are CSS + IntersectionObserver so they work without a framework,
   using their exact easing and duration. */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Progressive enhancement: only hide things for reveal if JS is present to reveal
   them. Without this the page would be blank for a no-JS visitor. */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* stagger: measured feel from the reference — 60ms steps, capped so a long list
   does not take seconds to finish */
.js [data-reveal].is-in { transition-delay: var(--reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* subtle interactive lift, only where it means "pressable" */
.card-hov { transition: box-shadow var(--t-ui) var(--ease-ui), transform var(--t-ui) var(--ease-out); }
.card-hov:hover { box-shadow: var(--inset-hairline), 0 6px 24px rgba(8,9,10,.5); transform: translateY(-2px); }

/* ============================================================== responsive === */
@media (max-width: 860px) {
  .btn, button { min-height: 40px; }
  .btn.sm, button.sm { min-height: 38px; padding: 8px 12px; }
  .nav a { min-height: 38px; display: inline-flex; align-items: center; }
  .kpi .v { font-size: 23px; }
  :root { --section-gap: 64px; }
}
@media (max-width: 640px) {
  .mk-wrap, .hero-grid { padding: 0 var(--sp-16); }
  .card, .panel { padding: var(--sp-16); }
  th, td { padding: 9px 12px; }
  .hero { padding: 72px 0 var(--sp-48); }
  :root { --section-gap: 56px; --card-padding: 16px; }
}

/* ========================================================= the facts strip ===== */
/* Linear's customer logo bar, adapted: one horizontal row of headlined figures,
   evenly spaced, separated by hairlines rather than card backgrounds. It is the
   marketing counterpart of the console's metric strip, and the reason the hero does
   not need a KPI band under it. */
.facts { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
.facts > div {
  flex: 1 1 0; min-width: 150px;
  padding: 4px var(--sp-24);
  border-left: 1px solid var(--line);
}
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts dt {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fog); margin-bottom: 6px;
}
.facts dd {
  margin: 0; color: var(--paper); font-size: 22px; font-weight: 510;
  letter-spacing: -0.022em; font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .facts > div { flex: 1 1 45%; padding: var(--sp-12) var(--sp-16); border-left: 0; border-top: 1px solid var(--line); }
  .facts > div:first-child { padding-left: var(--sp-16); border-top: 0; }
  .facts dd { font-size: 19px; }
}
/* logo-bar analogue */

/* ============================================================================
   PUBLIC SHELL CHROME — the `.pub-*` classes.
   These are the public site's own names (the console uses .topbar/.nav/.brand), so
   they must be restyled here or they keep the previous system's values: a 60px
   header, 600-weight links, 11px padding, and no hover surface.
   Linear's measured nav: 72px, transparent over the canvas, blur(20px),
   1px rgba(255,255,255,.08) bottom border, 13px/400 links.
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--r-btn); font-weight: 510; font-size: 13px;
}
.skip:focus { left: 16px; top: 12px; }

.pub-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 9, 10, .72);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pub-head-in {
  display: flex; align-items: center; gap: var(--sp-24);
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--sp-24); height: 64px;
}
.pub-brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--paper); font-size: 16px; font-weight: 510;
  letter-spacing: -0.011em; text-decoration: none;
  /* it is a link to "/", so it needs a real target, not a 26px line box */
  min-height: 40px; padding-right: 4px;
}
.pub-brand:hover { text-decoration: none; color: var(--paper); }
.pub-brand .dot {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 12px; font-weight: 590; letter-spacing: 0;
}
.pub-nav { display: flex; align-items: center; gap: 2px; }
.pub-nav a {
  padding: 8px 12px; border-radius: var(--r-btn);
  color: var(--mist); font-size: 13px; font-weight: 400;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui);
}
.pub-nav a:hover { background: var(--graphite); color: var(--paper); text-decoration: none; }
/* active = the single accent. Selection is the one thing worth colouring. */
.pub-nav a.active { color: var(--accent); background: var(--accent-wash); font-weight: 510; }
.pub-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-8); }
.pub-toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-btn);
  background: transparent; color: var(--mist); border: 1px solid var(--line);
  box-shadow: none; padding: 0;
}
.pub-toggle:hover { background: var(--graphite); color: var(--paper); }

/* Mobile collapse. marketing.css carries a ≤720 block for these classes, but this file
   loads AFTER it, so its unscoped rules (`.pub-nav{display:flex}`,
   `.pub-toggle{display:none}`) beat marketing's media query on equal specificity and by
   source order — the header never collapsed and the nav + CTA cluster ran 110px past the
   right edge on phones. The rules the media query needs therefore live HERE, after the
   desktop ones, and must be restated whenever these classes change. */
@media (max-width: 720px) {
  .pub-head-in { gap: 10px; }
  .pub-nav { display: none; }
  .pub-nav.open {
    display: flex; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--carbon); border-bottom: 1px solid var(--line);
    padding: 8px; z-index: 61;
  }
  .pub-nav.open a { padding: 14px 12px; border-radius: var(--r-sm); }
  .pub-toggle {
    display: inline-flex; order: 2;
    width: 40px; height: 40px; font-size: 16px;
  }
  .pub-actions { margin-left: auto; }
}

/* ---------------------------------------------------------------- footer ----- */
.pub-foot {
  border-top: 1px solid var(--line);
  background: var(--void);
  padding: var(--sp-64) 0 var(--sp-32);
  margin-top: var(--sp-96);
}
.foot-cols {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-48) var(--sp-32);
}
@media (max-width: 860px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-24); } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }
.foot-col h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fog);
  margin: 0 0 var(--sp-12);
}
/* Footer links are one-per-row, so they can carry real padding: measured 16px tall
   before this, i.e. about a third of the 44px touch guideline, in a dense column of
   similar links where mis-taps are likely. `display:inline-block` is required for the
   padding to take effect on an <a>. The list gap shrinks to compensate so the column
   height does not grow much. */
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-col a {
  display: inline-block;
  color: var(--mist); font-size: 13.5px; text-decoration: none;
  padding: 7px 0; min-height: 34px;
  transition: color var(--t-fast) var(--ease-ui);
}
.foot-col a:hover { color: var(--accent); text-decoration: none; }

/* Inline links inside running prose cannot be 44px tall without breaking the line
   rhythm, so they get a modest boost and a larger horizontal pad — enough to clear
   the 24px minimum target size while staying inline. */
.mk p a, .foot-about a, .sec p a, .faq .ans a, ul.notes a {
  padding: 2px 1px;
  transition: color var(--t-fast) var(--ease-ui);
}
.mk p a:hover { color: var(--accent-bright); }

/* Touch density: on coarse pointers give every interactive row a real target. */
@media (hover: none) and (pointer: coarse) {
  .foot-col a { min-height: 40px; padding: 9px 0; }
  .pub-nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .pub-brand { min-height: 40px; }
}
.foot-about p { color: var(--fog); font-size: 13.5px; margin: var(--sp-12) 0 0; max-width: 30em; line-height: 1.6; }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-16); justify-content: space-between;
  align-items: center; margin-top: var(--sp-48); padding-top: var(--sp-20);
  border-top: 1px solid var(--line); color: var(--fog); font-size: 12.5px;
}
.foot-mono { font-family: var(--mono); font-size: 12px; color: var(--fog); }

/* ==================================================== the ONE-accent rule ===== */
/* Linear: exactly one FILLED chromatic element per view, so it reads as "act here".
   Measured on our hero, the nav "Get started" AND the hero "Get credit" were both
   filled copper, so neither read as the action — a second chromatic action cancels
   the first. Linear's answer was to make the nav pill white.

   CHANGED: the nav pill carries the ACCENT again. A pure-white pill on a near-black
   page is the single brightest object in the viewport and pulls the eye off the
   headline before it has been read; copper is the louder *brand* signal without being
   the brightest *pixel*. Primary actions on this site are now consistently ACCENT
   (nav pill, hero primary, plan cards) — one hue for "act here", which is what the
   rule is actually protecting. The rule forbids a SECOND hue competing with the
   accent, not the accent appearing on more than one primary action.
   `radius 9999px, padding 8px 16px, 13px/510`. */
.pub-actions .btn.pill-cta {
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 13px; font-weight: 510;
  box-shadow: none;
  transition: background var(--t-fast) var(--ease-ui), transform var(--t-ui) var(--ease-out);
}
.pub-actions .btn.pill-cta:hover { background: var(--accent-bright); color: var(--accent-ink); }
.pub-actions .btn.pill-cta:active { transform: translateY(.5px); background: var(--accent-press); }

/* In the nav the secondary action is pure typography — no border, no fill. Linear's
   "Nav Text Button": transparent, mist text, 13px/400, underline on hover. */
.pub-actions .btn.sec {
  background: transparent; border-color: transparent; border-radius: var(--r-btn);
  color: var(--mist); padding: 8px 12px; font-size: 13px; font-weight: 400;
  box-shadow: none;
}
.pub-actions .btn.sec:hover { background: var(--graphite); color: var(--paper); }