/* ==========================================================================
   141.software — design system
   Extends the existing brand language: black, monospace, restrained.
   ========================================================================== */

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --bg: #000;
  --panel: #070707;
  --panel-2: #0c0c0c;
  --line: #1a1a1a;
  --line-bright: #2a2a2a;

  --text: #fff;
  --muted: #8a8a8a;
  --dim: #5a5a5a;
  --faint: #3a3a3a;

  --live: #35d07f;
  --neg: #ff5f56;
  --warn: #e3b341;

  /* ---------------------------------------------------------------------
     Terminal palette — mirrored verbatim from the application's dark theme
     (apps/web/src/theme/tokens.ts). Panels on this site must read as the
     real product, so these values are copied, not approximated. If the app
     tokens change, change them here too.
     --------------------------------------------------------------------- */
  --app-canvas:       #000000;  /* workbenchCanvas */
  --app-bg:           #0b0f0d;
  --app-panel:        #101513;
  --app-border:       #1e2422;
  --app-border-sub:   #141716;
  --app-text:         #d4d4d4;
  --app-text-2:       #9aa09c;
  --app-muted:        #787f7a;
  --app-chrome:       #e8e8e8;
  --app-chrome-muted: #8a8a8a;
  --app-green:        #4b9b6f;
  --app-red:          #c75450;
  --app-link:         #7abeef;
  --app-header-bg:    #181c1a;  /* sectionHeaderBg / tableHeaderBg */
  --app-row-even:     #101513;
  --app-row-odd:      #0d1110;
  --app-hover:        #131816;

  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1300px;
  --gutter: 32px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* shared surface tokens */
  --invert-bg:       #fff;
  --invert-fg:       #000;
  --invert-bg-hover: #d8d8d8;
  --nav-bg:          rgba(0, 0, 0, 0.72);
  --drawer-bg:       #000;
  --glow:            rgba(255, 255, 255, 0.055);
  --glow-2:          rgba(255, 255, 255, 0.05);
  --media-shadow:    0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --panel-inset:     0 0 0 1px rgba(255, 255, 255, 0.015) inset;
  --note-bg:         rgba(0, 0, 0, 0.7);
  --option-bg:       #0c0c0c;
  --option-fg:       #fff;
  --sel-bg:          #fff;
  --sel-fg:          #000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 62px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }

::selection { background: var(--sel-bg); color: var(--sel-fg); }

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 11px var(--gutter);
  min-height: 51px;   /* pinned so nav height is identical on every page */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: -0.01em;
  background: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }

.nav .brand-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.nav .brand-link:hover { color: var(--text); }

.nav .brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  isolation: isolate;
  flex: none;
}
.nav .brand::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--angle),
    #2a2a2a 0deg, #6e6e6e 60deg, #e8e8e8 120deg, #f8f8f8 180deg,
    #b0b0b0 220deg, #4a4a4a 280deg, #8a8a8a 320deg, #2a2a2a 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: brand-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes brand-spin { to { --angle: 360deg; } }

.nav .links { display: flex; gap: 18px; align-items: center; }
.nav .links a {
  color: var(--dim);
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav .links a:hover, .nav .links a.active { color: var(--text); }

.nav .links .btn {
  padding: 7px 14px;
  font-size: 10.5px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--dim);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}

/* --------------------------------------------------------------- typo --- */

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; }

h1 {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.06;
}
h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.08;
}
h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
}

p, li {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--muted);
  letter-spacing: -0.005em;
}

.lede {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.56;
  color: var(--muted);
  max-width: 62ch;
}

strong { color: var(--text); font-weight: 500; }

a { color: inherit; }

.mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 3px;
  border: 1px solid var(--line-bright);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: #4a4a4a; background: #0f0f0f; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
  font-weight: 500;
}
.btn-primary:hover { background: var(--invert-bg-hover); border-color: var(--invert-bg-hover); color: var(--invert-fg); }

.btn-ghost { border-color: transparent; color: var(--dim); padding-left: 4px; padding-right: 4px; }
.btn-ghost:hover { color: var(--text); background: transparent; border-color: transparent; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.arrow-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease, gap 0.2s var(--ease);
}
.arrow-link:hover { color: var(--text); gap: 12px; }

/* ---------------------------------------------------------------- hero -- */

.hero {
  padding: clamp(72px, 11vh, 132px) 0 clamp(56px, 8vh, 92px);
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% -10%, var(--glow), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.hero h1 { max-width: 24ch; margin: 20px 0 0; }
.hero .lede { margin-top: 26px; }
.hero .btn-row { margin-top: 38px; }

.hero-note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

/* -------------------------------------------------------- stat strip ---- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 30px 26px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat .n {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.03em;
  color: var(--text);
  display: block;
}
.stat .l {
  margin-top: 9px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--font-mono);
  line-height: 1.5;
}

/* ------------------------------------------------------ section header -- */

.sec {
  padding: clamp(64px, 9vh, 108px) 0;
}
.sec-head { max-width: 66ch; }
.sec-head h2 { margin-top: 18px; }
.sec-head .lede { margin-top: 20px; }

/* ------------------------------------------------------- feature block -- */

.feature {
  padding: clamp(48px, 6.5vh, 76px) 0;
  border-top: 1px solid var(--line);
}

.feature-head {
  max-width: 74ch;
  margin-bottom: clamp(26px, 3.5vh, 38px);
}

.feature-code {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.feature-code .code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--invert-fg);
  background: var(--invert-bg);
  padding: 3px 7px;
  border-radius: 2px;
  font-weight: 500;
}
.feature-code .name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.feature-head h3 {
  font-size: clamp(19px, 1.9vw, 25px);
  margin-bottom: 14px;
}
.feature-head p {
  font-size: 14px;
  line-height: 1.66;
  max-width: 82ch;
}

.feature-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.95;
}
.feature-meta b { color: var(--dim); font-weight: 400; }

.feature-media { width: 100%; }

/* --------------------------------------------------- terminal panel ----- */

.panel {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--media-shadow), var(--panel-inset);
  position: relative;
}
.panel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-header-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-2);
}
.panel-bar .tag {
  color: var(--invert-fg);
  background: var(--app-chrome);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.panel-bar .spacer { flex: 1; }
.panel-bar .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-green);
  font-size: 10px;
}
.panel-bar .live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--app-green);
  box-shadow: 0 0 0 0 rgba(75,155,111,0.55);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(75,155,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(75,155,111,0); }
}
.panel-body {
  padding: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.panel-body::-webkit-scrollbar { height: 6px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 3px; }

/* tab row inside a panel */
.p-tabs {
  display: flex;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-panel);
  overflow-x: auto;
  scrollbar-width: none;
}
.p-tabs::-webkit-scrollbar { display: none; }
.p-tab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-muted);
  padding: 11px 12px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.p-tab.on { color: var(--app-chrome); border-bottom-color: var(--app-chrome); }

/* data table inside a panel — zebra striping matches the app's tableRow tokens */
.p-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.p-table th {
  text-align: left;
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--app-text-2);
  font-weight: 400;
  padding: 8px 10px;
  background: var(--app-header-bg);
  border-bottom: 1px solid var(--app-border);
  white-space: nowrap;
}
.p-table td {
  font-size: 11.5px;
  color: var(--app-text-2);
  padding: 9px 10px;
  border-bottom: 1px solid var(--app-border-sub);
  white-space: nowrap;
}
.p-table tbody tr:nth-child(odd)  td { background: var(--app-row-odd); }
.p-table tbody tr:nth-child(even) td { background: var(--app-row-even); }
.p-table tr:last-child td { border-bottom: 0; }
.p-table td.k { color: var(--app-text); }
.p-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--app-text); }
.p-table td.up { color: var(--app-green); text-align: right; font-variant-numeric: tabular-nums; }
.p-table td.down { color: var(--app-red); text-align: right; font-variant-numeric: tabular-nums; }
.p-table tr.hl td { background: var(--app-hover); }

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 2px;
  border: 1px solid var(--app-border);
  color: var(--app-muted);
}
.pill.f13 { border-color: #2b4557; color: var(--app-link); }
.pill.ins { border-color: #4a3a1f; color: #c9a86b; }
.pill.sof { border-color: #2c4a3a; color: var(--app-green); }

/* nav-tree panel — mirrors the company sidebar structure */
.nav-tree { padding: 6px 0; font-family: var(--font-mono); }
.nav-tree .grp {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--app-muted);
  padding: 13px 14px 7px;
}
.nav-tree .it {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--app-text-2);
  padding: 5px 14px 5px 22px;
  border-left: 2px solid transparent;
}
.nav-tree .it.on {
  color: var(--app-text);
  background: var(--app-hover);
  border-left-color: var(--app-chrome);
}
.nav-tree .it .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--app-green); flex: none;
}
.nav-tree .it.sector { color: var(--app-link); }

/* chip cloud — alert subjects, feature lists */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--app-text-2);
  border: 1px solid var(--app-border);
  background: var(--app-panel);
  border-radius: 2px;
  padding: 5px 8px;
  white-space: nowrap;
}
.chip.hot { color: var(--app-text); border-color: var(--line-bright); }

/* dense feature index */
.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px 36px;
}
.index-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.index-col ul { list-style: none; }
.index-col li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim);
  padding: 4px 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.index-col li::before { content: '·'; color: var(--faint); }
.index-col li.soon { color: var(--faint); }
.index-col li.soon::after { content: 'soon'; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 2px; padding: 1px 4px; margin-left: 2px; }

/* media slot — real product captures */
.media-slot { position: relative; margin: 0; }
.media-slot video,
.media-slot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid var(--app-border);
  background: var(--app-canvas);
  box-shadow: var(--media-shadow);
}
.media-caption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.media-slot .capture-note {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--note-bg);
  border: 1px solid var(--line);
  padding: 4px 7px;
  border-radius: 2px;
  pointer-events: none;
}

/* ------------------------------------------------------------- problem -- */

.problem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.problem > div { padding: clamp(28px, 4vw, 44px); }
.problem > div:first-child { border-right: 1px solid var(--line); }
.problem .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
.problem .v {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2.1vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text);
}
.problem .today .v { color: var(--dim); }

/* ---------------------------------------------------------- segments ---- */

.seg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.seg-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 28px 26px 24px;
  text-decoration: none;
  background: var(--panel);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
  min-height: 240px;
}
.seg-card:hover { border-color: var(--line-bright); transform: translateY(-3px); background: var(--panel-2); }
.seg-card h3 { font-size: 21px; margin: 14px 0 12px; }
.seg-card p { font-size: 14.5px; flex: 1; }
.seg-card .arrow-link { margin-top: 20px; }

/* ------------------------------------------------------------ coverage -- */

.src-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.src {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.src:hover { border-color: var(--line-bright); color: var(--text); }

.cov-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.cov-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.cov-table td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  vertical-align: top;
}
.cov-table td:first-child { font-family: var(--font-mono); color: var(--text); font-size: 12.5px; white-space: nowrap; }

.status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
  display: inline-block;
}
.status.live { border-color: #2f4a35; color: #7fd8a0; }
.status.partial { border-color: #4a3a1f; color: #d8b273; }
.status.planned { border-color: var(--line-bright); color: var(--faint); }

/* ---------------------------------------------------------- checklist --- */

.checks { list-style: none; }
.checks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 15px;
}
.checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--dim);
  border-radius: 1px;
}
.checks li strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; }

/* ------------------------------------------------------------- notice --- */

.notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--dim);
  border-radius: 3px;
  padding: 24px 26px;
  background: var(--panel);
}
.notice .eyebrow { margin-bottom: 12px; }
.notice p { font-size: 14.5px; max-width: 78ch; }

/* ------------------------------------------------------------ waitlist -- */

.waitlist {
  border-top: 1px solid var(--line);
  padding: clamp(64px, 9vh, 104px) 0;
  background:
    radial-gradient(90% 120% at 50% 120%, var(--glow-2), transparent 65%);
}
.wl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
}
/* single-column waitlist — form only, no supporting copy */
.wl-solo {
  max-width: 660px;
  margin: 0 auto;
}

.wl-form { display: grid; gap: 14px; }
.wl-solo .wl-form .btn-primary { justify-self: stretch; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  /* was var(--dim) #5a5a5a — ~3.0:1 on black, below the 4.5:1 minimum for
     small text, and these are 10.5px uppercase which compounds it. */
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  /* was var(--panel) #070707 on a #000 page — the fields had no visible
     boundary. Slightly lifted surface plus a brighter border. */
  background: #0e0e0e;
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  /* must stay clearly brighter than the new resting border (--line-bright). */
  border-color: #6a6a6a;
  background: #131313;
}
/* was var(--faint) #3a3a3a — ~1.7:1, effectively invisible. ~4.8:1 now. */
.field input::placeholder, .field textarea::placeholder { color: #808080; }
.field select option { background: var(--option-bg); color: var(--option-fg); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0; }

.wl-form .btn-primary { margin-top: 6px; justify-self: start; }
.wl-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.65;
  min-height: 20px;
}
.wl-msg.ok { color: var(--live); }
.wl-msg.err { color: var(--neg); }


/* ------------------------------------------------------------- footer --- */

footer.site {
  border-top: 1px solid var(--line);
  /* was 52px 0 40px — the footer was taller than it needed to be for four
     links and a legal line. */
  padding: 22px 0 18px;
  margin-top: auto;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
}

/* single-page footer — brand left, links right */
.foot-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a {
  color: var(--dim);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.foot-links a:hover { color: var(--text); }
.foot-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  margin-bottom: 16px;
}
.foot-col a {
  display: block;
  color: var(--dim);
  text-decoration: none;
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  padding: 5px 0;
  transition: color 0.2s ease;
}
.foot-col a:hover { color: var(--text); }
.foot-brand p {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.8;
  letter-spacing: 0.02em;
  max-width: 32ch;
}
.foot-bottom {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.foot-bottom a { color: var(--dim); text-decoration: none; }
.foot-bottom a:hover { color: var(--text); }

/* --------------------------------------------------------- animation ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* ===================================================== touch / mobile ==== */
/* Keyed to coarse pointers rather than width, so a narrow laptop window
   keeps the tighter desktop sizing.                                        */
@media (pointer: coarse) {
  /* iOS zooms the page when a focused field is under 16px */
  .field input,
  .field select,
  .field textarea { font-size: 16px; }

  /* enlarge hit areas without changing how anything looks */
  .nav .links a:not(.btn) { padding: 14px 0; }
  .nav .brand-link { padding: 8px 6px 8px 0; }  /* not 44px: it would push the bar to 67px */
  .nav .links .btn { padding: 11px 16px; min-height: 44px; }
  .foot-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .foot-simple .brand-link { padding: 10px 6px 10px 0; }
  .nav { padding-top: 4px; padding-bottom: 4px; min-height: 52px; }
  .nav-toggle { padding: 12px 14px; min-height: 44px; }
  .arrow-link { padding: 8px 0; }
  /* honeypot is off-screen, but keep it 16px so no browser can zoom to it */
  .hp { font-size: 16px; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
  /* minmax(0,1fr) — plain 1fr is min-content sized and dense tables blow the page out */
  .seg-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  /* let dense tables scroll inside their container instead of pushing the page */
  .cov-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cov-table thead, .cov-table tbody { display: table; width: 100%; min-width: 520px; }
  .hero h1 br { display: none; }
  .stat .l br { display: none; }
  .nav .links {
    position: fixed;
    inset: 53px 0 auto;
    background: var(--drawer-bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    display: none;
  }
  .nav .links.open { display: flex; }
  .nav .links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .links .btn { margin-top: 14px; justify-content: center; padding: 12px 18px; font-size: 11px; }
  .nav-toggle { display: inline-flex; }
  .problem { grid-template-columns: minmax(0, 1fr); }
  .problem > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .cov-table td:first-child { white-space: normal; }
}


/* nav reduced to a single action */
/* The homepage nav carries one link, so the mobile drawer and its toggle are
   no longer rendered. These rules keep the bar correct at small widths where
   the drawer styles used to take over. */
@media (max-width: 760px) {
  .nav .links {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 0;
    padding: 0;
    border: 0;
    background: none;
    height: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}


/* ---- waitlist: account type + consent ---- */
/* `hidden` sets display:none, but .field-row declares display:grid and wins on
   specificity — so firm-only blocks would stay visible without this. */
.wl-form [hidden] { display: none !important; }

.field-opt {
  color: #5a5a5a;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}

.wl-choice {
  border: 0;
  padding: 0;
  margin: 0 0 4px;
  display: grid;
  gap: 8px;
}
.wl-choice__legend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: 7px;
}

/* Radio cards. The native input stays in the DOM for keyboard and screen
   reader support; it is visually replaced by the ring drawn in ::before. */
.wl-choice__card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  background: #0e0e0e;
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wl-choice__card:hover { border-color: #3a3a3a; }

.wl-choice__card input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
  border: 1px solid #5a5a5a;
  border-radius: 50%;
  flex: none;
  cursor: pointer;
  position: relative;
}
.wl-choice__card input:checked {
  border-color: var(--text);
}
.wl-choice__card input:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--text);
}
.wl-choice__card input:focus-visible {
  outline: 1px solid #6a6a6a;
  outline-offset: 2px;
}

/* Selected card is lifted so the choice reads at a glance. */
.wl-choice__card:has(input:checked) {
  border-color: #4a4a4a;
  background: #131313;
}

.wl-choice__body { display: grid; gap: 3px; }
.wl-choice__title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.01em;
}
.wl-choice__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.wl-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-top: 2px;
}
.wl-consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: #0e0e0e;
  flex: none;
  cursor: pointer;
  position: relative;
}
.wl-consent input:checked {
  background: var(--text);
  border-color: var(--text);
}
.wl-consent input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #000;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.wl-consent input:focus-visible {
  outline: 1px solid #6a6a6a;
  outline-offset: 2px;
}
.wl-consent span {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 640px) {
  /* Two-up rows stack, so the form stays usable on a phone. */
  .field-row { grid-template-columns: 1fr; }
}


/* ---- in-box field labels ---- */
/* Labels moved inside the inputs as placeholders. The <label> elements are
   kept and hidden rather than removed: a placeholder disappears the moment
   someone types, and screen reader support for placeholder-as-label is
   inconsistent. This keeps the accessible name while showing the FactSet-style
   in-box text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* No visible label means the 7px label gap is now dead space. */
.field:has(> .sr-only) { gap: 0; }

/* An unselected <select> should read as a placeholder, not a chosen value.
   Required selects are :invalid while empty; the optional one is flagged by
   site.js via data-empty. */
.field select:invalid,
.field select[data-empty="true"] {
  color: #808080;
}
/* Options themselves stay full contrast in the open dropdown. */
.field select option {
  color: var(--option-fg);
}