/* ============================================================
   Alpha Finance v2: the marketing site
   Loaded after alpha.css on the landing page, the research hub, articles
   and the newsletter. Owns the v2 nav, the landing page's sections, the
   instrument grid (shared with the terminal overview) and the footer.
   ============================================================ */

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

.site-nav .wrap { height: 62px; }
.site-nav .nav-links a { font-size: 13.5px; }
.nav-actions .btn { padding: 8px 15px; }

/* the Terminal menu: a sheet as wide as its names. Columns size to their
   longest label (auto, not 1fr), so nothing is truncated and the sheet is
   never wider than it needs to be. width: max-content because an absolutely
   positioned menu would otherwise shrink to the nav item above it.

   The sheet hangs from the nav's content box, not from the trigger, so it
   starts under the logo and can never run off the right edge of a laptop
   screen. The trigger is stretched to the full height of the bar so the
   pointer never crosses dead space on its way down into the sheet. */
.site-nav .wrap { position: relative; }
.site-nav .nav-links { align-self: stretch; }
.site-nav .nav-links > a { align-self: center; }
.site-nav .nav-item { position: static; align-self: stretch; }

/* Alpha AI: a direct link with a Beta pill. The pill is a label, not a
   button, so it stays small and never takes the hover on its own. */
.site-nav .nav-links a.nav-ai { display: inline-flex; align-items: center; gap: 7px; }
/* between the phone breakpoint and a small laptop the bar has five links and
   one button, so the links close up */
@media (max-width: 980px) {
  .site-nav .wrap { gap: 16px; }
  .site-nav .nav-links { gap: 0; }
  .site-nav .nav-links a { padding: 7px 8px; font-size: 13px; }
  .site-nav .nav-links a.nav-ai { gap: 5px; }
  .site-nav .logo-word { font-size: 16px; }
}
.site-nav .nav-links a { white-space: nowrap; }
.site-nav .nav-pill {
  padding: 2px 6px 2px;
  border: 1px solid color-mix(in srgb, var(--lime) 38%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--lime) 9%, transparent);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}
.site-nav .nav-menu { width: max-content; max-width: calc(100% - 12px); left: 6px; top: 100%; padding-top: 1px; }
.site-nav .nav-menu-in.nav-cols-auto {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 0 8px;
  padding: 18px 12px 14px;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
/* a desk heading: no rule under it, the space does the grouping */
.site-nav .nav-col-h {
  padding: 0 10px 9px;
  margin: 0;
  border-bottom: 0;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
/* a second desk stacked in the same column */
.site-nav .nav-grp + .nav-grp { margin-top: 18px; }
.site-nav .nav-links .nav-menu .nav-col a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 7px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-2);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.site-nav .nav-links .nav-menu .nav-col a:hover,
.site-nav .nav-links .nav-menu .nav-col a:focus-visible { background: var(--panel); color: var(--text); outline: none; }
/* the view's mark in a small tinted chip; it lights up under the pointer */
.site-nav .nav-links .nav-menu .nav-col a .nm-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lime) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 14%, transparent);
  color: color-mix(in srgb, var(--lime) 82%, var(--text-2));
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.site-nav .nav-links .nav-menu .nav-col a .nm-ic svg { width: 12px; height: 12px; display: block; stroke-width: 2; }
.site-nav .nav-links .nav-menu .nav-col a:hover .nm-ic,
.site-nav .nav-links .nav-menu .nav-col a:focus-visible .nm-ic { background: var(--lime); border-color: var(--lime); color: #0a0b0d; }
/* alpha.css styles every span in a menu link as a mono caption; the label is the label */
.site-nav .nav-links .nav-menu .nav-col a .nm-l { display: inline; margin: 0; font: inherit; letter-spacing: 0; color: inherit; white-space: nowrap; }
/* the heading sits on the chip's left edge, and the sheet gets a hairline of light on its top edge */
.site-nav .nav-col-h { padding-left: 8px; }
.site-nav .nav-menu-in.nav-cols-auto { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.045); }
.nav-links .nav-menu a.nav-menu-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--line-2);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--panel);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--lime);
  white-space: nowrap;
}
/* alpha.css styles every span inside a menu link as a mono caption; the
   foot's label is not one */
.nav-links .nav-menu a.nav-menu-foot span,
.nav-links .nav-menu a.nav-menu-foot i { display: inline; margin: 0; font: inherit; letter-spacing: 0; color: inherit; white-space: nowrap; font-style: normal; }
.nav-menu-foot:hover { background: var(--panel-2); }

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

.lhero {
  position: relative;
  padding: 56px 0 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 0%, color-mix(in srgb, var(--lime) 7%, transparent), transparent 70%),
    var(--bg);
  overflow: hidden;
}
.lhero > .wrap:first-child { max-width: 900px; text-align: center; }

.lhero-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 6px 14px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--lime) 38%, var(--line-2));
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lime) 12%, var(--panel)), var(--panel) 62%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--lime) 6%, transparent),
    0 10px 34px -10px color-mix(in srgb, var(--lime) 30%, transparent);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 26px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.lhero-pill:hover {
  border-color: color-mix(in srgb, var(--lime) 65%, var(--line-2));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--lime) 10%, transparent),
    0 12px 38px -10px color-mix(in srgb, var(--lime) 45%, transparent);
  transform: translateY(-1px);
}
/* a light sweeps across the pill every few seconds, so the eye lands on it */
.lhero-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--lime) 18%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: pill-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pill-sweep {
  0%, 62% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) { .lhero-pill::after { animation: none; } }
.lhero-pill span {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0a0b0d;
  background: var(--lime);
  border-radius: 999px;
  padding: 4px 9px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 45%, transparent);
}
.lhero-pill i {
  font-style: normal;
  color: var(--lime);
  transition: transform 0.15s;
}
.lhero-pill:hover i { transform: translateX(3px); }

.lhero h1 {
  font-family: var(--display);
  /* sized so the longer first line ("Institutional-grade crypto data,") holds
     on one line at every desktop width; balance evens the lines on phones */
  font-size: clamp(34px, 4.6vw, 56px);
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text);
}
.lhero-sub {
  margin: 22px auto 0;
  max-width: 42em;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: balance;   /* two even lines, never one word left over */
}
.lhero-sub strong { color: var(--text); font-weight: 600; }
.lhero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
}
.btn-lg { font-size: 14.5px; padding: 13px 22px; gap: 8px; }
.btn-lg svg { width: 14px; height: 14px; }

/* the nav's pair: a size down from the body buttons, and the launch arrow drawn at text size */
.nav-actions .btn { font-size: 12px; padding: 7px 13px; gap: 6px; }
.btn-launch svg { width: 12px; height: 12px; flex-shrink: 0; }
.lhero-more { font-size: 14px; font-weight: 500; color: var(--text-2); display: inline-flex; gap: 7px; align-items: center; }
.lhero-more:hover { color: var(--text); }
.lhero-more i { font-style: normal; color: var(--muted); }

/* ---------- the framed terminal ----------
   The terminal in miniature and live: its tape, its rail, four pulse chips,
   the liquidation map beside the Top 50, funding and ETF flow under them.
   One link. It plays in once it scrolls into view: the frame settles from a
   slight tilt, the panels follow one after another, the tiles of the Top 50
   land last. Under reduced motion everything is simply there. */

.tframe {
  --tape-h: 30px;
  position: relative;
  display: block;
  margin: 34px 0 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--lime) 22%, transparent), 0 40px 120px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: perspective(1400px) rotateX(5deg) translateY(28px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s;
}
.tframe.is-in { opacity: 1; transform: none; }
/* a preview, not the whole terminal: the frame is cut at a fixed height and
   the second row of panels fades out under a gradient */
.tframe { max-height: 600px; }
.tframe::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg) 92%);
}
.tframe:hover { border-color: color-mix(in srgb, var(--lime) 35%, var(--line-2)); }
/* the glow behind it */
.lhero > .wrap:last-child { position: relative; }
.lhero > .wrap:last-child::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 30px; height: 60%;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--lime) 16%, transparent), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.tframe-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.tframe-bar .dots { display: flex; gap: 6px; }
.tframe-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.tframe-bar .url { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); margin-left: 8px; }
.tframe-bar .url b { font-weight: 500; color: var(--text-2); }
.tframe-cta { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; transition: color 0.15s; }
.tframe-cta i { font-style: normal; transition: transform 0.15s; }
.tframe:hover .tframe-cta { color: var(--lime); }
.tframe:hover .tframe-cta i { transform: translateX(3px); }

/* the tape, as the terminal draws it */
.tframe .tape { height: var(--tape-h); background: var(--bg-2); }
.tframe .tape-lead, .tframe .tape-end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 0 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.tframe .tape-lead { border-right: 1px solid var(--line); }
.tframe .tape-lead b { font-weight: 500; color: var(--text-2); }
.tframe .tape-end { border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tframe .tk { gap: 6px; height: var(--tape-h); padding: 0 14px; border-left: 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0; }
.tframe .tk + .tk { box-shadow: -1px 0 0 var(--line); }
.tframe .tk-ic { width: 13px; height: 13px; border-radius: 50%; }
.tframe .tk b { font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
.tframe .tk .px { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tframe .tk .ch { display: inline-block; padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--panel); }
.tframe .tk.up .ch { color: var(--pos-text); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.tframe .tk.dn .ch { color: var(--neg-text); background: color-mix(in srgb, var(--neg) 14%, transparent); }

/* the rail, as the terminal draws it */
.tframe-body { position: relative; display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.tframe-rail { padding: 10px 8px; border-right: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.tframe-rail .rail-group { margin-top: 8px; }
.tframe-rail .rail-group:first-child { margin-top: 0; }
.tframe-rail .rail-h { padding: 8px 10px 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tframe-rail .rail-item { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.tframe-rail .rail-item.on { background: var(--panel-2); color: var(--text); }
.tframe-rail .rail-item .ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.tframe-rail .rail-item.on .ic { color: var(--lime); }
.tframe-rail .rail-item .ic svg { width: 100%; height: 100%; stroke-width: 1.75; }
.tframe-rail .rail-beta { display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent); border-radius: 3px; font-family: var(--mono); font-size: 8px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); vertical-align: 1px; }

/* the pane: chips, then two rows of panels */
.tframe-pane { padding: 12px; }
.tframe-pulse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tframe .pulse {
  --a: var(--text);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label viz" "value viz" "sub sub";
  align-items: center; column-gap: 10px; row-gap: 3px;
  min-width: 0; padding: 9px 12px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
}
/* the site's own .pl (partner logos, further down) centres; the chip label reads from the left */
.tframe .pulse .pl { grid-area: label; display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tframe .pulse .pv { grid-area: value; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--a); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tframe .pulse .pv .up, .tframe .pulse .pv .down { color: inherit; }
.tframe .pulse .pg { grid-area: viz; display: block; width: 64px; height: 28px; }
.tframe .pulse .pg:empty { width: 0; }
.tframe .pulse .pg svg { display: block; }
.tframe .pulse .ps { grid-area: sub; font-family: var(--mono); font-size: 9.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tframe .pulse .ps .up { color: var(--pos-text); }
.tframe .pulse .ps .down { color: var(--neg-text); }

.tframe-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; }
.tframe-grid .panel { box-shadow: none; border-color: var(--line); min-height: 0; }
.tframe-grid .panel-head .view { color: var(--text-2); }
.tframe-grid .heromap .panel-body.is-map { position: relative; height: 260px; }
.tframe-grid .panel-body.is-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tframe-grid .tframe-top .panel-body { padding: 8px 10px; height: 260px; overflow: hidden; }
.tframe-grid .prc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; height: 100%; }
.tframe-grid .prc-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 0; padding: 0 3px; border-radius: 3px; color: #fff; text-decoration: none; line-height: 1; pointer-events: none; }
.tframe-grid .prc-cell .rp-logo { width: 13px; height: 13px; border-radius: 50%; }
.tframe-grid .prc-cell .rp-chip { width: 13px; height: 13px; border-radius: 50%; font-size: 6.5px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); color: #fff; font-family: var(--mono); }
.tframe-grid .prc-cell b { font-family: var(--display); font-size: 10px; font-weight: 600; flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tframe-grid .prc-cell .rp-logo, .tframe-grid .prc-cell .rp-chip { flex: none; }
.tframe-grid .prc-cell span { flex: none; }
.tframe-grid .prc-cell span { font-family: var(--mono); font-size: 8.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.82); }
.tframe-grid .panel:nth-child(n+3) .panel-body { height: 208px; padding: 10px 16px 8px; overflow: hidden; }
.tframe-grid .panel:nth-child(n+3) .panel-body.is-map { position: relative; padding: 0; }
.tframe-grid .ttable { font-size: 12px; }
.tframe-grid .ttable th { padding: 2px 0 8px; color: var(--muted); }
.tframe-grid .ttable td { padding: 7px 0; vertical-align: middle; font-size: 12.5px; }
.tframe-grid .ttable td.co { display: table-cell; font-size: 13px; padding-right: 12px; }
.tframe-grid .ttable td.co .tt-ic { vertical-align: -5px; margin-right: 9px; }
.tframe-grid .ttable td.co small { margin-left: 6px; }
.tframe-grid .ttable td.co > span { display: inline; }

/* the play-in */
.tframe .tframe-pulse .pulse, .tframe-grid .panel { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tframe.is-in .tframe-pulse .pulse, .tframe.is-in .tframe-grid .panel { opacity: 1; transform: none; }
.tframe.is-in .tframe-pulse .pulse:nth-child(1) { transition-delay: 0.35s; }
.tframe.is-in .tframe-pulse .pulse:nth-child(2) { transition-delay: 0.42s; }
.tframe.is-in .tframe-pulse .pulse:nth-child(3) { transition-delay: 0.49s; }
.tframe.is-in .tframe-pulse .pulse:nth-child(4) { transition-delay: 0.56s; }
.tframe.is-in .tframe-grid .panel:nth-child(1) { transition-delay: 0.55s; }
.tframe.is-in .tframe-grid .panel:nth-child(2) { transition-delay: 0.65s; }
.tframe.is-in .tframe-grid .panel:nth-child(3) { transition-delay: 0.75s; }
.tframe.is-in .tframe-grid .panel:nth-child(4) { transition-delay: 0.85s; }
.tframe-grid .prc-grid .prc-cell { opacity: 0; transition: opacity 0.4s ease; transition-delay: calc(0.9s + var(--i, 0) * 18ms); }
.tframe-grid .prc-grid.is-in .prc-cell { opacity: 1; }
.tframe.is-in .prc-grid:not(.is-in) .prc-cell { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tframe, .tframe .tframe-pulse .pulse, .tframe-grid .panel, .tframe-grid .prc-grid .prc-cell { opacity: 1; transform: none; transition: none; }
}

/* ---------- logos: who the terminal reads ----------
   One still row, evenly spaced, wrapping on narrow screens. The kicker
   above, a line below saying what the row means. No box and no rules. */

.logos { padding-top: 40px; }
.logos-k {
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 30px; padding: 20px 0 16px; }
.logos-row .pl { zoom: 0.86; }   /* the marks are sized for the old marquee; all ten fit one row this way */
.pl { display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: default; }
.pl-m {
  display: block;
  height: 20px;
  background: var(--text-2);
  opacity: 0.62;
  -webkit-mask: var(--u) center / contain no-repeat;
  mask: var(--u) center / contain no-repeat;
  transition: background 0.15s, opacity 0.15s;
}
.pl:hover .pl-m { background: var(--text); opacity: 1; }
.pl-t { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--text-2); opacity: 0.62; transition: color 0.15s, opacity 0.15s; }
.pl-t:hover { color: var(--text); opacity: 1; }

.logos-note {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.logos-note a { color: var(--text-2); font-weight: 500; white-space: nowrap; margin-left: 4px; }
.logos-note a:hover { color: var(--text); }
.logos-note a i { font-style: normal; margin-left: 5px; color: var(--muted); }

/* ---------- sections ----------
   One rhythm: every section ends with --sec of space and starts with none,
   so the gap between any two blocks is the same. The first section after
   the partners row, and the newsletter band, carry the top space themselves. */

:root { --sec: 80px; }
.lsec { padding: 0 0 var(--sec); }
.logos + .lsec { padding-top: var(--sec); }
.lsec-head { max-width: 640px; margin-bottom: 28px; }
.lsec-head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.lsec-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime-dim);
  margin-bottom: 14px;
}
.lsec h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.lsec-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.lsec-more { display: inline-flex; gap: 7px; align-items: center; font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.lsec-more:hover { color: var(--text); }
.lsec-more i { font-style: normal; color: var(--muted); }

/* ---------- instruments ---------- */

.inst-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.inst {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 56px;
  grid-template-rows: 28px auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 12px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.inst:hover { border-color: color-mix(in srgb, var(--lime) 30%, var(--line-2)); background: var(--panel-2); transform: translateY(-2px); }
/* the signature glyph: a small drawing of the dashboard, top right */
.inst-g { grid-column: 3; grid-row: 1; width: 56px; height: 28px; opacity: 0.55; transition: opacity 0.15s; }
.inst-g svg { display: block; width: 100%; height: 100%; }
.inst:hover .inst-g { opacity: 1; }
.inst-m { grid-column: 2 / 4; grid-row: 3; }
.inst-ic { grid-row: 1; display: flex; width: 18px; height: 18px; color: var(--muted); }
.inst-ic svg { width: 100%; height: 100%; stroke-width: 1.6; }
.inst:hover .inst-ic { color: var(--lime); }
.inst-t { grid-column: 2; grid-row: 1; font-family: var(--display); font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-d { grid-column: 2 / 4; grid-row: 2; font-size: 12.5px; line-height: 1.4; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-more { margin-top: 12px; }
.inst-more[hidden] { display: none; }
.inst-toggle { display: flex; justify-content: center; margin-top: 18px; }
.inst-toggle button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.inst-toggle button:hover { border-color: var(--line-2); color: var(--text); }
.inst-toggle button i { font-style: normal; }
.inst-m { margin-top: 3px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-m b { font-weight: 400; color: var(--muted); }
.inst-m b::after { content: " \00b7 "; color: var(--faint); }

/* ---------- bordered content blocks ---------- */

.mblock {
  padding: 56px 56px 52px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, color-mix(in srgb, var(--lime) 5%, transparent), transparent 70%),
    var(--bg-2);
}
.mblock-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.mpill {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--lime) 8%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 20px;
}
.mblock-head h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.mblock-head p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags a, .tags span {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.tags a:hover { color: var(--text); border-color: var(--muted); }

/* who it is for: a tab list and one panel */
.aud { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: stretch; }
.aud-tabs { display: flex; flex-direction: column; gap: 2px; }
.aud-tabs button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.aud-tabs button:hover { color: var(--text); background: var(--panel); }
.aud-tabs button.on { color: var(--lime); background: var(--panel); border-left-color: var(--lime); }
.aud-tabs .ic { display: flex; width: 16px; height: 16px; color: var(--muted); }
.aud-tabs button.on .ic { color: var(--lime); }
.aud-tabs .ic svg { width: 100%; height: 100%; stroke-width: 1.8; }
.aud-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.aud-panel[hidden] { display: none; }
.aud-panel h3 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.aud-panel p { font-size: 14px; line-height: 1.6; color: var(--text-2); flex: 1; }
.aud-go { display: inline-flex; gap: 7px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--lime); }
.aud-go i { font-style: normal; }
.aud-go:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- research cards (landing teaser and the hub) ---------- */

/* the blog before its first post */
.pgrid-empty { grid-column: 1 / -1; padding: 48px 0; text-align: center; font-size: 14px; color: var(--muted); }
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.pcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.pcard.is-lead { grid-column: span 2; }
.pc-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pcard.is-lead .pc-thumb { aspect-ratio: 32 / 11; }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; }
.pc-cat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-dim);
}
.pc-cat i { font-style: normal; letter-spacing: 0.05em; text-transform: none; color: var(--faint); }
.pc-title {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color 0.12s;
}
.pcard.is-lead .pc-title { font-size: 24px; letter-spacing: -0.025em; }
.pcard:hover .pc-title { color: var(--lime); }
.pc-dek { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.pcard.is-lead .pc-dek { font-size: 14px; max-width: 46em; }
.pc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.pc-meta b { font-weight: 500; color: var(--text-2); }

/* byline avatar, with the initials fallback blog.js swaps in */
body.hub .avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
}
body.hub .avatar-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-2);
}

/* ---------- newsletter: one bordered card, copy left, form right ---------- */

.nlcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 24px 56px;
  align-items: center;
  padding: 30px 36px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
}
.nlcard .lsec-k { margin-bottom: 10px; }
.nlcard h2 { font-size: clamp(22px, 2.4vw, 28px); }
.nl-sub { margin-top: 8px; max-width: 34em; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.nl-form { display: flex; gap: 8px; }
.nl-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text);
}
.nl-form input::placeholder { color: var(--muted); }
.nl-form input:focus { outline: none; border-color: var(--lime); }
.nl-proof { margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--faint); }
.form-note { margin-top: 10px; font-size: 13px; color: var(--lime); display: none; }
.form-note.show { display: block; }
.form-note.is-bad { color: var(--heat); }

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

.foot { padding: 32px 0 22px; }
/* one band: brand and company on the left, five link columns on the right */
.foot-top {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px 56px;
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.foot-brand p { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.foot-brand .foot-co { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; line-height: 1.7; letter-spacing: 0.02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.foot-social { display: flex; gap: 8px; margin-top: 16px; }
.foot-social a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text-2); transition: color .15s, border-color .15s; }
.foot-social a:hover { color: var(--lime); border-color: var(--lime-dim); }
.foot-social svg { width: 14px; height: 14px; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 16px; }
.foot-col { display: flex; flex-direction: column; gap: 6px; }
.foot-col h5 { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
.foot-col a { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.foot-col a:hover { color: var(--text); }

/* two sentences, not four paragraphs: the risk line carries the mark */
.foot-legal { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 56px; }
.foot-legal p { font-size: 12px; line-height: 1.55; color: var(--muted); }
.foot-legal b { color: var(--text-2); font-weight: 600; }
.foot-risk { display: flex; gap: 9px; }
.foot-risk svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--heat); }

.foot-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--faint); }
.foot-pol { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--sans); font-size: 12px; letter-spacing: 0; }
.foot-meta a { color: var(--muted); }
.foot-meta a:hover { color: var(--text); }

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

@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* three columns, two rows: still content-sized, so it cannot overflow a tablet */
  .site-nav .nav-menu-in.nav-cols-auto { grid-auto-flow: row; grid-template-columns: repeat(3, auto); gap: 20px 18px; }
  .inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud { grid-template-columns: minmax(0, 1fr); }
  .aud-tabs { flex-direction: row; flex-wrap: wrap; }
  .aud-tabs button { border-left: 0; border-radius: 8px; border: 1px solid var(--line); }
  .aud-tabs button.on { border-color: color-mix(in srgb, var(--lime) 40%, transparent); }
  .mblock { padding: 36px 28px; }
  .tframe-body { grid-template-columns: minmax(0, 1fr); }
  .tframe-rail { display: none; }
  .tframe-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tframe-grid { grid-template-columns: minmax(0, 1fr); }
  .tframe-grid .tframe-top .panel-body { height: 240px; }
  .tframe-grid .prc-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
  /* on a phone the frame keeps the tape, the chips, the map and the top 50 */
  .tframe-grid .panel:nth-child(n+3), .tframe-cta { display: none; }
  .tframe-grid .heromap .panel-body.is-map { height: 220px; }
  .tframe { max-height: none; }
  .tframe::after { display: none; }
  .tframe-grid .tframe-top .panel-body { height: 200px; }
  .tframe-grid .prc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tframe-grid .prc-grid .prc-cell:nth-child(n+21) { display: none; }
  .lhero { padding-top: 44px; }
  .lhero h1 br { display: none; }
  .lhero-cta { flex-direction: column; gap: 14px; }
  .tframe { margin-top: 36px; border-radius: 8px 8px 0 0; }
  .tframe-pane { grid-template-columns: minmax(0, 1fr); }
  .tframe-pane .heromap .panel-body.is-map { min-height: 260px; }
  :root { --sec: 56px; }
  .mblock { padding: 28px 18px; border-radius: 12px; }
  .aud-panel { min-height: 0; padding: 20px; }
  .inst-grid { grid-template-columns: minmax(0, 1fr); }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .pcard.is-lead { grid-column: auto; }
  .pcard.is-lead .pc-thumb { aspect-ratio: 16 / 9; }
  .pcard.is-lead .pc-title { font-size: 19px; }
  .nlcard { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .nl-form { flex-direction: column; }
  .foot-legal { grid-template-columns: 1fr; }
  .foot-meta { flex-direction: column; align-items: flex-start; }
}


/* ---------- who stands behind it ---------- */

/* the hero's proof line under the buttons */
.lhero-proof {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.lhero-proof a { color: var(--muted); }
.lhero-proof a:hover { color: var(--text); }

/* the trust block: four flat cards, the same grid the instruments use */
/* the four points as a two-column list: icon, claim, one line, link */
.trust-wrap { display: block; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.trust-list li { border-top: 1px solid var(--line); }
.trust-list a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; column-gap: 16px; padding: 22px 4px; border-radius: 8px; transition: background 0.15s; }
.trust-list a:hover { background: var(--panel); }
.trust-list .tl-t b { display: block; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
.trust-list .tl-t small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--text-2); font-variant-numeric: tabular-nums; }
.trust-list i { align-self: center; font-style: normal; font-size: 12.5px; white-space: nowrap; color: var(--muted); transition: color 0.15s; }
.trust-list a:hover i { color: var(--lime); }
.tcard-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(200, 255, 80, 0.08); color: var(--lime); }
.tcard-ic svg { width: 18px; height: 18px; display: block; }

@media (max-width: 1080px) {
  .trust-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .trust-list a { grid-template-columns: 34px minmax(0, 1fr); }
  .trust-list i { grid-column: 2; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the right of the bar: search, Sign in, Launch Terminal, all 32px tall */
.site-nav .nav-actions { gap: 10px; }
.site-nav .nav-search { height: 32px; padding: 0 8px 0 11px; font-size: 12.5px; }
.site-nav .nav-search svg { width: 13px; height: 13px; }
.site-nav .nav-search span { padding-right: 18px; }
.site-nav .nav-search:hover kbd { color: var(--text-2); }

/* Sign in: the terminal top bar's lime outline, so it reads the same everywhere */
.nav-acct {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--lime) 55%, var(--line-2)); border-radius: 6px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--lime); white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.nav-acct:hover { background: color-mix(in srgb, var(--lime) 10%, transparent); }
.nav-acct.is-in { padding-left: 5px; border-color: var(--line-2); color: var(--text); }
.nav-acct.is-in:hover { background: var(--panel-2); border-color: var(--muted); }
@media (max-width: 760px) {
  .site-nav .nav-actions { gap: 8px; }
  .nav-acct.is-in { padding: 0 5px; }
  .nav-acct.is-in .lbl { display: none; }
}
/* small phones: Sign in and Launch Terminal share the row with the logo, so both give up some air */
@media (max-width: 420px) {
  .nav-actions { gap: 6px; }
  .nav-acct { padding: 0 8px; }
  .nav-actions .btn-launch { padding: 7px 10px; }
  .nav-actions .btn-launch svg { display: none; }
}
/* the Terminal menu's six columns need about 1180px; narrower laptops get the
   three-column sheet phones and tablets use, or the hidden menu pushes the
   page sideways */
@media (max-width: 1180px) {
  .site-nav .nav-menu-in.nav-cols-auto { grid-auto-flow: row; grid-template-columns: repeat(3, auto); gap: 20px 18px; }
}
/* small tablets: five links, Sign in and the button share the bar */
@media (max-width: 900px) and (min-width: 761px) {
  .site-nav .wrap { gap: 12px; }
  .site-nav .nav-links a { padding: 7px 6px; }
  .nav-acct { padding: 0 8px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-launch svg { display: none; }
}
@media (max-width: 800px) and (min-width: 761px) {
  .site-nav .nav-links a { padding: 7px 5px; font-size: 12.5px; }
}
/* the search shrinks to its glass on small laptops and tablets, and goes on
   narrow tablets (phones already drop it with the links) */
@media (max-width: 1080px) {
  .site-nav .nav-search span, .site-nav .nav-search kbd { display: none; }
  .site-nav .nav-search { padding: 0 9px; }
}
@media (max-width: 800px) {
  .site-nav .nav-search { display: none; }
}

/* the nav links close up on small laptops */
@media (max-width: 1180px) and (min-width: 981px) {
  .site-nav .wrap { gap: 20px; }
  .site-nav .nav-links a { padding: 7px 7px; }
}