/* ============================================================
   LoreResearch — Dovetail design system
   Blueprint control room at midnight, with the Robinhood lime
   as the single chromatic accent.

   Rules enforced here:
   - one accent only (--color-accent), used functionally, never as a button fill
   - no gradients, no box-shadows; hierarchy comes from flat tone shifts
   - 8px radii everywhere (4px for small tags)
   - Inter for all UI text, JetBrains Mono for eyebrows and data labels
   ============================================================ */

:root {
  /* Accent — sampled from the Robinhood feather mark */
  --color-accent:        #CCFF00;
  --color-accent-ink:    #0a0a0a;   /* text on an accent fill */
  /* Second accent. Lime carries structure (map, chrome, badges); violet carries
     editorial accents and everything marked featured, so the two never compete. */
  --color-violet:        #A78BFA;
  --color-violet-soft:   rgba(167, 139, 250, 0.14);
  --color-violet-line:   rgba(167, 139, 250, 0.42);

  /* Surfaces */
  --color-page-ink:      #0a0a0a;
  --color-deep-coal:     #141414;
  --color-card-carbon:   #1e1e1e;
  --color-steel-border:  #313131;
  --color-graphite:      #454545;
  --color-onyx:          #000000;

  /* Text */
  --color-snow:          #ffffff;
  --color-mist:          #c9c9c9;   /* reading text on dense surfaces */
  --color-ash:           #a7a7a7;
  --color-fog:           #7c7c7c;

  /* Type */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-caption: 12px;      --leading-caption: 1.4;      --tracking-caption: 0.85px;
  --text-body-sm: 14px;      --leading-body-sm: 1.5;      --tracking-body-sm: -0.17px;
  --text-body: 16px;         --leading-body: 1.5;         --tracking-body: -0.19px;
  --text-subheading: 20px;   --leading-subheading: 1.4;   --tracking-subheading: -0.42px;
  --text-heading-sm: 24px;   --leading-heading-sm: 1.33;  --tracking-heading-sm: -0.5px;
  --text-heading: 40px;      --leading-heading: 1.2;      --tracking-heading: -0.84px;
  --text-heading-lg: 56px;   --leading-heading-lg: 1.14;  --tracking-heading-lg: -2.02px;
  --text-display: 64px;      --leading-display: 1.13;     --tracking-display: -2.3px;

  /* Spacing */
  --spacing-8: 8px;   --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px;
  --spacing-40: 40px; --spacing-64: 64px; --spacing-96: 96px;

  /* Shape */
  --radius-tags: 4px;
  --radius: 8px;

  --page-max-width: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Components set their own `display`, and an author rule beats the browser's default
   for [hidden] — so without this every JS filter would mark cards hidden and change
   nothing on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-page-ink);
  color: var(--color-snow);
  font-family: var(--font-inter);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  font-feature-settings: "liga" on;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The grid is an accent, not wallpaper. Applied per-section via .gridded so most of
   the page stays a flat, solid ground and the pattern keeps its impact where used.
   Cell and line live in variables: a section can widen or dim its own grid without
   restating the whole rule. */
.gridded { position: relative; --grid-cell: 35px; --grid-line: #363636; --grid-fade: .62; }
.gridded::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px var(--grid-cell)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-cell));
  opacity: var(--grid-fade);
  mask-image: radial-gradient(ellipse 78% 68% at 50% 45%, #000 32%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 45%, #000 32%, transparent 82%);
}
.gridded > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-weight: 600; margin: 0; }
h1 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
h2 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }

.wrap { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--spacing-24); }

.mono {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-ash);
}

/* ---------------- Announcement bar ---------------- */

.announce {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-body-sm); font-weight: 500;
  letter-spacing: var(--tracking-body-sm);
  padding: var(--spacing-8) var(--spacing-24);
  text-align: center;
}
.announce a { text-decoration: underline; text-underline-offset: 2px; }
.announce .sep { opacity: .55; margin: 0 var(--spacing-8); }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--color-page-ink);
  border-bottom: 1px solid var(--color-card-carbon);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--spacing-24); height: 64px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-body); font-weight: 600; letter-spacing: var(--tracking-body);
  color: var(--color-snow);
}
.brand .mark { width: 20px; height: 20px; flex: none; color: var(--color-accent); }
.brand b { font-weight: 600; color: var(--color-accent); }

.nav { display: flex; align-items: center; gap: var(--spacing-24); margin-left: auto; }
.nav a {
  font-size: var(--text-body-sm); font-weight: 500; letter-spacing: var(--tracking-body-sm);
  color: var(--color-snow);
}
.nav a:hover { color: var(--color-ash); }
.nav a[aria-current="page"] { color: var(--color-accent); }

/* Primary action: white fill, near-black text. The accent never fills a button. */
.nav-cta,
.nav a.nav-cta {
  background: var(--color-snow);
  color: var(--color-page-ink);
  border-radius: var(--radius);
  padding: 10px var(--spacing-16);
  font-weight: 500;
}
.nav a.nav-cta:hover { background: var(--color-ash); color: var(--color-page-ink); }
.nav a.nav-cta[aria-current="page"] { background: var(--color-snow); color: var(--color-page-ink); }

/* One button geometry, two weights. The secondary is a tinted pane rather than a
   bare accent link — a call to action should read as an object you can press, and
   a text link in accent colour never does. */
.btn {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  height: 38px; padding: 0 var(--spacing-16);
  border-radius: var(--radius);
  font-size: var(--text-body-sm); font-weight: 500; letter-spacing: -0.17px;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.btn-primary { background: var(--color-snow); color: var(--color-page-ink); }
.btn-primary:hover { background: var(--color-ash); }
.btn-ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .24);
  color: var(--color-snow);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); }

.menu-btn {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid var(--color-graphite);
  color: var(--color-snow); border-radius: var(--radius);
  padding: 9px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
}

/* ---------------- Hub ---------------- */

.hub-section { padding: var(--spacing-24) 0 0; }

.hub-intro { max-width: 880px; margin: 0 auto; text-align: center; }
.hub-intro-section { padding: var(--spacing-64) 0 var(--spacing-32); }
.hub-intro h1 {
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: var(--spacing-24) 0 var(--spacing-16);
}
.hub-intro h1 em { font-style: normal; color: var(--color-accent); }
.hub-intro p {
  color: var(--color-ash); font-size: var(--text-body);
  line-height: var(--leading-body); letter-spacing: var(--tracking-body);
  margin: 0 auto; max-width: 560px;
}

.hub {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--spacing-16);
  margin: var(--spacing-40) auto 0;
  max-width: var(--page-max-width);
}
.hub .hub-wires, .hub .hub-core { display: none; }

.hub.is-map {
  display: block; position: relative;
  /* Fits the first screen: viewport less the header, the section padding and a little
     air under the lowest card. The ellipse is derived from this height in JS, so the
     whole map scales with the window instead of being cropped by it. */
  height: 700px;
  height: min(700px, calc(100svh - 132px));
  min-height: 460px;
  margin: var(--spacing-16) auto 0;
}
.hub.is-map .hub-wires { display: block; }
.hub.is-map .hub-core { display: grid; }

.hub-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire { fill: none; stroke: var(--color-accent); stroke-opacity: .18; stroke-width: 1.2; }
.wire-glow { fill: none; stroke-width: 1.5; stroke-linecap: butt; }
.wire-pulse { fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 14 986; animation: flow 4.2s linear infinite; }
@keyframes flow { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
.wire-node-dot { transition: r .16s; }

.hub-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 320px; height: 320px; display: grid; place-items: center; z-index: 3;
}
.core-ring {
  position: absolute; inset: 24px; border-radius: 50%;
  border: 1px solid var(--color-accent); opacity: .17;
}
.core-ring.r2 {
  inset: 62px; border-style: dashed; opacity: .22;
  animation: spin 54s linear infinite;
}
.core-ring.r3 { inset: 0; opacity: .1; }
@keyframes spin { to { transform: rotate(360deg) } }
.core-pulse { display: none; }

/* The brand moment: the chain's mark reversed out of a solid accent disc. */
.core-disc {
  position: relative; z-index: 2;
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--color-accent);
  display: grid; place-items: center;
}
.core-disc .core-mark { width: 55px; height: 55px; color: var(--color-accent-ink); }
.hub-node { display: block; }
/* Placed by JS. Hidden only while JS is present and has not yet placed them — with no
   JS at all the class is never added and the plain grid renders as usual. */
.js .hub:not(.is-ready) .hub-node { visibility: hidden; }
.hub.is-map .hub-node { position: absolute; width: 196px; transform: translate(-50%, -50%); z-index: 4; }

.node-card {
  position: relative; overflow: hidden;
  background: var(--color-card-carbon);
  border: 1px solid var(--color-steel-border);
  border-radius: var(--radius);
  padding: var(--spacing-16);
  /* The one place elevation is earned: these cards sit over live wiring, and without
     a cast shadow they read as holes cut in the map rather than as objects on it.
     The inset hairline is the light catching the top edge. */
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  transition: border-color .16s, box-shadow .2s, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.hub-node:hover .node-card, .hub-node:focus-visible .node-card {
  box-shadow:
    0 26px 52px rgba(0, 0, 0, .72),
    inset 0 1px 0 rgba(255, 255, 255, .09);
  transform: translateY(-4px);
}

.hub-node:hover .node-card, .hub-node:focus-visible .node-card { border-color: var(--color-accent); }

.node-head { display: flex; align-items: center; gap: var(--spacing-8); }
.node-ico { width: 20px; height: 20px; flex: none; color: var(--color-accent); }
.node-ico svg { width: 20px; height: 20px; }
.node-name { font-size: var(--text-body); font-weight: 600; letter-spacing: var(--tracking-body); }
.node-count {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-fog);
}
.node-tag { margin: var(--spacing-8) 0 0; color: var(--color-mist); font-size: var(--text-body-sm); }

/* ---------------- Sections ---------------- */

.section { padding: var(--spacing-96) 0; }
.section-head { display: flex; align-items: flex-end; gap: var(--spacing-24); margin-bottom: var(--spacing-32); flex-wrap: wrap; }
.section-head p { margin: var(--spacing-8) 0 0; color: var(--color-ash); font-size: var(--text-body-sm); max-width: 560px; }
.section-head .link {
  margin-left: auto; font-family: var(--font-mono);
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; color: var(--color-accent);
}

/* Answer / AEO block */
.answer {
  background: var(--color-deep-coal);
  border: 1px solid var(--color-card-carbon);
  border-left: 2px solid var(--color-violet);
  border-radius: var(--radius);
  padding: var(--spacing-24) var(--spacing-32);
}
.answer h2, .answer h3 {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-violet); margin-bottom: var(--spacing-16);
}
.answer p {
  margin: 0; color: var(--color-snow);
  font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body);
}
.answer p + p { margin-top: var(--spacing-16); }

/* ---------------- Cards ---------------- */

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-16); }

.card {
  position: relative; display: flex; flex-direction: column; gap: var(--spacing-8);
  /* Pane darker than its rim: the edge is what makes a block read as an object.
     A fill with a border of the same colour is a blob with no shape. */
  background: var(--color-deep-coal);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius);
  padding: var(--spacing-24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: border-color .16s, transform .18s cubic-bezier(.16, 1, .3, 1);
}
/* A small lift on hover: the flat system has no shadows to raise a card with, so
   the movement itself is the affordance. */
.card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.card.is-featured {
  border-color: var(--color-violet-line);
  background: linear-gradient(180deg, var(--color-violet-soft), transparent 62%), var(--color-card-carbon);
}
.card.is-featured:hover { border-color: var(--color-violet); }
.card.is-soon { opacity: .6; }

.card-top { display: flex; align-items: center; gap: var(--spacing-8); }
/* Logo left, everything else right of it. At a glance you read the mark, not the text —
   which is how anyone actually finds a tool they already know in a grid of a hundred. */
.card { flex-direction: row; gap: var(--spacing-16); align-items: flex-start; }
.card-body { display: flex; flex-direction: column; gap: var(--spacing-8); flex: 1; min-width: 0; align-self: stretch; }
.card-mark {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--color-card-carbon);
  border: 1px solid var(--color-steel-border);
  border-radius: 12px;
  overflow: hidden;
}
.card-mark .logo { width: 34px; height: 34px; padding: 0; border-radius: 8px; }
.card-mark .logo.monogram { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; }
.card-name { font-size: var(--text-body); font-weight: 600; letter-spacing: var(--tracking-body); }
.card-ext { margin-left: auto; color: var(--color-fog); flex: none; }
.card:hover .card-ext { color: var(--color-accent); }
.card-desc { color: var(--color-mist); font-size: 15px; line-height: 1.53; margin: 0; flex: 1; }
.card-foot { display: flex; align-items: center; gap: var(--spacing-8); flex-wrap: wrap; margin-top: auto; }
.card a.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.tag, .badge {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  border-radius: var(--radius-tags);
  padding: 2px 6px;
}
.tag { color: var(--color-fog); border: 1px solid var(--color-steel-border); }
.badge { color: var(--color-ash); border: 1px solid var(--color-graphite); }
/* Accent reserved for the few badges that mark canonical / recommended tools. */
.badge.core, .badge.official, .badge.recommended, .badge.canonical, .badge.popular {
  color: var(--color-accent); border-color: var(--color-accent);
}

.badge.soon { color: var(--color-fog); border-color: var(--color-steel-border); }
.badge.ref { color: var(--color-fog); border-color: var(--color-steel-border); }

/* ---------------- Resource logos ---------------- */

/* Third-party marks carry dozens of colours; this system is monochrome with a
   single accent. They sit desaturated at rest so the page stays calm, and resolve
   to full colour on hover, where recognising the brand actually matters. */
.logo {
  /* 20px was the size of a favicon, not the size of a brand. At 28 the mark is what
     you recognise the row by, which is how someone actually scans a hundred tools. */
  width: 28px; height: 28px; flex: none;
  padding: 3px;
  /* Round, not the system's 4px tag radius: these are logo chips, and a circle keeps
     a row of mismatched favicons reading as one set. */
  border-radius: 50%;
  object-fit: contain;
  /* Two deliberate departures from the system's logo-strip rule (greyscale, 60%):
     1. The light plate — measured favicon luminance is 22-68 against a card at ~30,
        so without it the dark marks are simply invisible.
     2. Full colour — at 20px a desaturated favicon is an unidentifiable grey blob;
        colour is what makes it recognisable, which is the whole point of showing it.
     They stay small and slightly muted so they read as data, not decoration. */
  background: var(--color-snow);
  opacity: .9;
  transition: opacity .16s;
}
.card:hover .logo,
.hub-node:hover .logo,
.related a:hover .logo { opacity: 1; }

.monogram {
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
  color: var(--color-ash);
  border: 1px solid var(--color-graphite);
  filter: none;
}

.logo-stack { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.logo-sm { width: 20px; height: 20px; padding: 2px; }
/* The map keeps the small chips: there they are a count, not an identity. */
.hub-node .logo, .related a .logo { width: 20px; height: 20px; padding: 2px; }
.logo-more {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-fog);
  margin-left: 1px;
}

.node-name { display: block; }

/* ---------------- Category page ---------------- */

.cat-hero { padding: var(--spacing-64) 0 var(--spacing-40); }
.crumbs {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-fog); margin-bottom: var(--spacing-24);
}
.crumbs a:hover { color: var(--color-accent); }
.crumbs span { margin: 0 var(--spacing-8); opacity: .5; }

.cat-title { display: flex; align-items: center; gap: var(--spacing-16); margin-bottom: var(--spacing-16); flex-wrap: wrap; }
.cat-title h1 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
.cat-ico { width: 24px; height: 24px; flex: none; color: var(--color-accent); }
.cat-ico svg { width: 24px; height: 24px; }
.cat-lede {
  color: var(--color-ash); font-size: var(--text-body);
  line-height: var(--leading-body); letter-spacing: var(--tracking-body);
  margin: 0 0 var(--spacing-32); max-width: 620px;
}

/* Toolbar */
.toolbar { display: flex; gap: var(--spacing-16); flex-wrap: wrap; align-items: center; margin-bottom: var(--spacing-24); }
.search { position: relative; flex: 1 1 280px; min-width: 240px; }
.search input {
  width: 100%; background: var(--color-card-carbon);
  border: 1px solid var(--color-graphite); color: var(--color-snow);
  border-radius: var(--radius); padding: 10px var(--spacing-16) 10px 38px;
  font-family: var(--font-inter); font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm); outline: none;
}
.search input:focus { border-color: var(--color-accent); }
.search input::placeholder { color: var(--color-fog); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-fog); }

.chips { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-ash); background: transparent;
  border: 1px solid var(--color-graphite); border-radius: var(--radius-tags);
  padding: 6px 10px; cursor: pointer; transition: color .16s, border-color .16s;
}
.chip:hover { color: var(--color-snow); }
.chip[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); }

.empty { color: var(--color-fog); font-family: var(--font-mono); font-size: var(--text-body-sm); padding: var(--spacing-32) 0; }

/* FAQ */
.faq { display: grid; gap: var(--spacing-8); }
.faq details {
  background: var(--color-card-carbon);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius); overflow: hidden;
}
.faq details[open] { border-color: var(--color-steel-border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--spacing-16) var(--spacing-24);
  font-size: var(--text-body); font-weight: 500; letter-spacing: var(--tracking-body);
  display: flex; align-items: center; gap: var(--spacing-16);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; color: var(--color-accent);
  font-family: var(--font-mono); font-size: var(--text-body); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq .faq-a {
  margin: 0; padding: 0 var(--spacing-24) var(--spacing-24);
  color: var(--color-ash); font-size: var(--text-body-sm);
}

/* Related */
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--spacing-8); }
.related a {
  display: flex; align-items: center; gap: var(--spacing-8);
  background: var(--color-card-carbon);
  border: 1px solid var(--color-card-carbon); border-radius: var(--radius);
  padding: var(--spacing-16);
  font-size: var(--text-body-sm); font-weight: 500;
  transition: border-color .16s;
}
.related a:hover { border-color: var(--color-accent); }
.related a .node-ico, .related a .node-ico svg { width: 16px; height: 16px; }

/* Directory groups */
.group { margin-bottom: var(--spacing-64); scroll-margin-top: 88px; }
.group-head { display: flex; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-8); flex-wrap: wrap; }
.group-head h2 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); }
.group-head .count {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-fog); margin-left: auto;
}
.group > p.group-tag { color: var(--color-ash); font-size: var(--text-body-sm); margin: 0 0 var(--spacing-16); }
.group-tag a { color: var(--color-accent); }

.jump { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-bottom: var(--spacing-40); }
.jump .chip { cursor: pointer; }

/* Featured */
.feat-hero { padding: var(--spacing-64) 0 var(--spacing-16); }
/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); counter-reset: s; }
.step {
  background: var(--color-card-carbon);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius); padding: var(--spacing-24);
}
.step::before {
  counter-increment: s; content: "0" counter(s); display: block;
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-accent);
  margin-bottom: var(--spacing-16);
}
.step h3 { font-size: var(--text-body); letter-spacing: var(--tracking-body); margin-bottom: var(--spacing-8); }
.step p { margin: 0; color: var(--color-ash); font-size: var(--text-body-sm); }
.step a { color: var(--color-accent); }

/* ---------------- Footer ---------------- */

.site-footer {
  border-top: 1px solid var(--color-card-carbon);
  margin-top: var(--spacing-96);
  padding: var(--spacing-64) 0;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--spacing-40); margin-bottom: var(--spacing-40); }
.foot-grid h4.is-continued { visibility: hidden; }
.foot-grid h4 {
  font-family: var(--font-inter); font-size: var(--text-caption); font-weight: 500;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--color-ash); margin-bottom: var(--spacing-16);
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-grid li a { font-size: var(--text-body-sm); color: var(--color-snow); }
.foot-grid li a:hover { color: var(--color-accent); }
.foot-about p { color: var(--color-ash); font-size: var(--text-body-sm); margin: var(--spacing-16) 0 0; max-width: 320px; }

.foot-bottom {
  border-top: 1px solid var(--color-card-carbon); padding-top: var(--spacing-24);
  display: flex; gap: var(--spacing-24); flex-wrap: wrap; align-items: flex-start;
  font-size: var(--text-caption); color: var(--color-fog);
}
.foot-bottom .disc { max-width: 720px; margin: 0; line-height: var(--leading-caption); }
.foot-bottom p { margin: 0; }
.foot-bottom a { color: var(--color-ash); }
.foot-bottom a:hover { color: var(--color-accent); }

/* ---------------- Responsive ---------------- */

@media (max-width: 1080px) {
  .hub.is-map { height: 640px; }
  .hub.is-map .hub-node { width: 176px; }
}

@media (max-width: 900px) {
  .hub-intro h1 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
  .cat-title h1 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
  .steps { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-32); }
  .menu-btn { display: block; }
  .nav { display: none; }
  .nav.open {
    display: flex; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--spacing-16);
    background: var(--color-page-ink); border-bottom: 1px solid var(--color-card-carbon);
    padding: var(--spacing-24);
  }
  .nav.open a.nav-cta { text-align: center; }
}

@media (max-width: 560px) {
  .section { padding: var(--spacing-64) 0; }
  .hub-intro h1 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- Blog ---------------- */

.wrap-narrow { max-width: 760px; }
.wrap-wide   { max-width: var(--page-max-width); }

.post { padding: var(--spacing-64) 0 0; }
.post h1 {
  font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg); margin-bottom: var(--spacing-16);
}
.post-dek {
  color: var(--color-ash); font-size: var(--text-subheading);
  line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading);
  margin: 0 0 var(--spacing-24);
}

.byline { display: flex; align-items: center; gap: var(--spacing-16); font-size: var(--text-body-sm); color: var(--color-ash); }
.byline a { color: var(--color-snow); font-weight: 500; }
.byline a:hover { color: var(--color-accent); }
.byline-av {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 600; font-size: var(--text-body);
}

.post-hero {
  width: 100%; height: auto; border-radius: var(--radius);
  margin: var(--spacing-40) 0; border: 1px solid var(--color-card-carbon);
}

/* Long-form copy: wider measure control and generous vertical rhythm. */
.prose { font-size: 17px; line-height: 1.7; letter-spacing: -0.19px; color: var(--color-snow); }
.prose h2 {
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm); margin: var(--spacing-40) 0 var(--spacing-16);
}
.prose h3 { font-size: var(--text-subheading); margin: var(--spacing-32) 0 var(--spacing-8); }
.prose p { margin: 0 0 var(--spacing-16); }
.prose ul, .prose ol { margin: 0 0 var(--spacing-16); padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--color-accent); }
.prose a { color: var(--color-violet); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose code {
  font-family: var(--font-mono); font-size: 14px;
  background: var(--color-card-carbon); border: 1px solid var(--color-steel-border);
  border-radius: var(--radius-tags); padding: 1px 6px;
}

.callout {
  background: var(--color-deep-coal);
  border: 1px solid var(--color-card-carbon);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--spacing-16) var(--spacing-24);
  margin: var(--spacing-24) 0;
  color: var(--color-ash); font-size: var(--text-body-sm);
}

.table-wrap { overflow-x: auto; margin: var(--spacing-24) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.prose th, .prose td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--color-card-carbon); vertical-align: top;
}
.prose th {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-ash); font-weight: 400;
  border-bottom-color: var(--color-steel-border);
}

.post-fig { margin: var(--spacing-32) 0; }
.post-fig img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-card-carbon); }
.post-fig figcaption {
  margin-top: var(--spacing-8);
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-fog);
}

.post-tags { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin: var(--spacing-32) 0; }

.post-cta {
  display: flex; align-items: center; gap: var(--spacing-16);
  background: var(--color-card-carbon); border: 1px solid var(--color-steel-border);
  border-radius: var(--radius); padding: var(--spacing-24);
  margin: var(--spacing-32) 0; font-size: var(--text-body-sm); color: var(--color-ash);
}
.post-cta .node-ico { width: 24px; height: 24px; }
.post-cta .node-ico svg { width: 24px; height: 24px; }
.post-cta strong { color: var(--color-snow); font-weight: 600; }
.post-cta a {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  height: 38px; padding: 0 var(--spacing-16); margin-left: auto; flex: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius); color: var(--color-snow); font-weight: 500;
  transition: background-color .16s, border-color .16s;
}
.post-cta a:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); }

.post-faq-h {
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm); margin: var(--spacing-40) 0 var(--spacing-16);
}

.post-meta {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-fog);
  text-transform: uppercase; margin-bottom: var(--spacing-8);
}
.post-meta a { color: var(--color-ash); }

.post-lead {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--spacing-32);
  align-items: center;
  background: var(--color-deep-coal); border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius); overflow: hidden;
  margin-bottom: var(--spacing-40); transition: border-color .16s;
}
.post-lead:hover { border-color: var(--color-accent); }
.post-lead img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-lead-body { padding: var(--spacing-32) var(--spacing-32) var(--spacing-32) 0; }
.post-lead h2 {
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm); margin-bottom: var(--spacing-8);
}
.post-lead p { margin: 0; color: var(--color-mist); font-size: 15px; line-height: 1.53; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-24); }
.post-card {
  background: var(--color-deep-coal); border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .16s, transform .18s cubic-bezier(.16, 1, .3, 1);
}
.post-card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.post-thumb { display: block; }
.post-thumb img { width: 100%; height: auto; display: block; }
.post-card .post-meta { padding: var(--spacing-16) var(--spacing-24) 0; margin: 0; }
.post-card h3 {
  font-size: var(--text-body); line-height: 1.35; letter-spacing: var(--tracking-body);
  padding: var(--spacing-8) var(--spacing-24) 0; font-weight: 600;
}
.post-card h3 a:hover { color: var(--color-accent); }
.post-card p {
  padding: var(--spacing-8) var(--spacing-24) var(--spacing-24);
  margin: 0; color: var(--color-ash); font-size: var(--text-body-sm);
}

@media (max-width: 900px) {
  .post h1 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
  .post-lead { grid-template-columns: 1fr; }
  .post-lead-body { padding: 0 var(--spacing-24) var(--spacing-24); }
}

/* ---------------- Blog: reading surface ---------------- */

/* The grid motif is background texture, not a reading surface. Behind body copy it
   fights the text, so the article column carries a solid ground in the page colour —
   invisible as a box, but it erases the grid exactly where you read. */
/* Hero sits in the reading column now — same width as the text, not a banner. */
.post-hero {
  width: 100%; max-width: 560px; height: auto; display: block;
  margin: var(--spacing-32) 0 var(--spacing-40);
  border-radius: var(--radius); border: 1px solid var(--color-steel-border);
}

/* Clear break between the extractable answer and the article proper. */
.post-answer { margin-bottom: var(--spacing-40); }
.post-answer + .prose { position: relative; padding-top: var(--spacing-40); }
.post-answer + .prose::before {
  content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 2px;
  background: var(--color-violet);
}
.prose > p:first-of-type {
  font-size: 19px; line-height: 1.65; color: var(--color-snow);
}

/* In-article figures are supporting evidence — keep them under the text size. */
.post-fig img { max-width: 620px; }
.post-fig { display: flex; flex-direction: column; align-items: flex-start; }

/* Resources and cross-links inside copy read as links, not as decoration. */
.prose a[data-res] {
  color: var(--color-snow);
  text-decoration: underline;
  text-decoration-color: var(--color-violet-line);
  text-underline-offset: 3px;
  transition: color .16s, text-decoration-color .16s;
}
.prose a[data-res]:hover { color: var(--color-violet); text-decoration-color: var(--color-violet); }

.mentions { margin: var(--spacing-32) 0; }
.mentions h3 {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; color: var(--color-ash); margin-bottom: var(--spacing-16);
}
.mentions-list { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
.mentions-list a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-card-carbon); border: 1px solid var(--color-steel-border);
  border-radius: var(--radius); padding: 8px 12px;
  font-size: var(--text-body-sm); transition: border-color .16s;
}
.mentions-list a:hover { border-color: var(--color-accent); }
.mentions-list .logo { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .post-hero, .post-fig img { max-width: 100%; }
}

/* Article masthead carries the grid accent; the body copy below stays flat. */
.post-head { padding: var(--spacing-32) 0 var(--spacing-40); }
.post-head .wrap-narrow { padding-bottom: 0; }
.cat-hero.gridded, .feat-hero.gridded { padding-bottom: var(--spacing-40); }

/* ---------------- Motion ---------------- */

/* The hidden state only exists once JS confirms it can reveal things. */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
.has-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  /* Long, decelerating ease — settles rather than snaps. */
  transition:
    opacity .45s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform .45s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}

/* The map draws itself in: rings bloom, traces are stroked on, cards rise. */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes coreIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: none; }
}
@keyframes ringIn { from { opacity: 0; transform: scale(.9); } }
@keyframes nodeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hub.is-map .core-disc { animation: coreIn .9s cubic-bezier(.16, 1, .3, 1) both; }
.hub.is-map .core-ring { animation: ringIn 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.hub.is-map .core-ring.r2 {
  animation: ringIn 1.1s cubic-bezier(.16, 1, .3, 1) .12s both,
             spin 54s linear .9s infinite;
}
.hub.is-map .core-ring.r3 { animation-delay: .22s; }

/* Nodes are positioned by JS with a transform, so the entrance animates the card
   inside them — never the positioned element itself. */
.hub.is-map .node-card { animation: nodeIn .7s cubic-bezier(.16, 1, .3, 1) both; }

.site-header, .nav a, .brand { transition: color .18s, background-color .18s; }
.card, .post-card, .related a, .mentions-list a, .node-card, .faq details { will-change: border-color, transform; }
.card-name, .node-name { transition: color .16s; }
.card:hover .card-name { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .hub.is-map .core-disc,
  .hub.is-map .core-ring,
  .hub.is-map .node-card,
  .wire-pulse { animation: none !important; }
  .card:hover, .post-card:hover, .starter:hover, .related a:hover { transform: none; }
}

/* ---------------- Directory controls ---------------- */

/* Filtering and navigating are different jobs. They used to share one chip style,
   which is why the row read as noise — now each has a label, a shape and a place. */
.controls {
  background: var(--color-deep-coal);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius);
  padding: var(--spacing-24);
  margin-bottom: var(--spacing-40);
  display: grid; gap: var(--spacing-16);
}
.controls .search { flex: none; width: 100%; }

.control-row { display: flex; align-items: flex-start; gap: var(--spacing-16); flex-wrap: wrap; }
.control-label {
  flex: none; width: 68px; padding-top: 7px;
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-fog);
}
.control-row .chips, .control-row .jump { flex: 1 1 320px; margin: 0; }

.chip-clear {
  color: var(--color-violet); border-color: var(--color-violet-line);
  background: var(--color-violet-soft);
}

/* Navigation chips carry an icon and a count so they never look like filters. */
.jump-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-card-carbon);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius);
  padding: 7px 10px 7px 8px;
  font-size: var(--text-body-sm); font-weight: 500; color: var(--color-snow);
  transition: border-color .16s, background-color .16s;
}
.jump-link:hover { border-color: var(--color-accent); background: var(--color-bg-hover, #232323); }
.jump-link .node-ico, .jump-link .node-ico svg { width: 16px; height: 16px; }
.jump-n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-fog); padding-left: 2px;
}

.result-count {
  margin: 0; font-family: var(--font-mono);
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  color: var(--color-fog); text-transform: uppercase;
}
.result-count.is-filtered { color: var(--color-accent); }

/* Feather set inline in a headline. */
.inline-mark {
  display: inline-block; vertical-align: -0.08em;
  width: .92em; height: .92em; margin-right: .22em;
  color: var(--color-accent);
}
.inline-mark svg { width: 100%; height: 100%; display: block; }

/* ---------------- Article rhythm ---------------- */

/* Grid bands break the black expanse at intervals down a long article. */
.post-band { padding: var(--spacing-40) 0; }
.post-band + .post-band { padding-top: 0; }

.post-band-lead { padding-top: 0; }
.post-band-lead .post-hero { margin-top: 0; }
.post-band .post-faq-h:first-child { margin-top: 0; }

/* Content already on screen at load does not animate in. */
.has-reveal .reveal.no-anim { transition: none; }

/* ---------------- Follow ---------------- */

.follow {
  display: flex; align-items: center; gap: var(--spacing-8);
  padding-bottom: var(--spacing-16);
}
.follow-label {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-fog);
}
.follow-links { display: flex; gap: 6px; }
.follow-links a {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-tags);
  color: var(--color-snow);
  transition: border-color .16s, background-color .16s, transform .16s;
}
.follow-links a svg { width: 11px; height: 11px; display: block; }
.follow-links a:hover {
  border-color: var(--color-accent);
  background: var(--color-card-carbon);
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .follow { flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }
}

/* ---------------- Directory snippet hero ---------------- */

.snippet { padding: var(--spacing-40) 0 0; overflow: hidden; }
.snippet-eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-ash); margin-bottom: var(--spacing-24);
}
.snippet-h1 {
  margin-top: var(--spacing-16);
  font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg); max-width: 15ch;
  margin-bottom: var(--spacing-16);
}
.snippet-h1 em { font-style: normal; color: var(--color-accent); }
.snippet-dek {
  color: var(--color-ash); font-size: var(--text-body);
  line-height: var(--leading-body); letter-spacing: var(--tracking-body);
  max-width: 54ch; margin: 0;
}

/* Stage: overlapping app cut-outs, some running off the edge as in the reference. */
.snippet-stage { position: relative; height: 520px; margin-top: var(--spacing-24); }
.stage-inner {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 560px; top: -20px;
}
.stage-wires { position: absolute; inset: 0; width: 100%; height: 100%; }

.mock {
  position: absolute;
  background: var(--color-card-carbon);
  border: 1px solid var(--color-steel-border);
  border-radius: var(--radius);
  padding: var(--spacing-16);
  font-size: var(--text-body-sm);
}
.mock-head {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-fog); margin-bottom: 12px;
}
.mock-big { font-size: 26px; font-weight: 700; letter-spacing: -.8px; color: var(--color-snow); }
.mock-sub { color: var(--color-fog); font-size: var(--text-caption); }
.mock-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mock-row.small b { color: var(--color-snow); font-weight: 600; }
.mock-right { text-align: right; }
.mock-split { height: 1px; background: var(--color-steel-border); margin: 14px 0; }
.up { color: var(--color-accent); }
.down { color: #FF5C5C; }

.mock-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.mock-tabs span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--color-fog); padding: 4px 8px; border-radius: var(--radius-tags);
}
.mock-tabs .on { background: var(--color-deep-coal); color: var(--color-snow); }

.mock-trow {
  display: grid; grid-template-columns: 84px 1fr auto 74px;
  align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--color-deep-coal);
}
.mock-tick { font-weight: 600; color: var(--color-snow); }
.mock-mc { font-family: var(--font-mono); font-size: 12px; color: var(--color-ash); }
.mock-ch { font-family: var(--font-mono); font-size: 12px; text-align: right; }

.mock-txrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--color-deep-coal); }
.mock-pill {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  padding: 3px 7px; border-radius: var(--radius-tags); white-space: nowrap;
}
.mock-pill.call { color: var(--color-violet); background: var(--color-violet-soft); }
.mock-pill.xfer { color: var(--color-accent); background: rgba(204, 255, 0, .12); }
.mock-addr { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); }
.mock-txrow .mock-sub { margin-left: auto; }

.mock-spark { width: 100%; height: 86px; margin-top: 10px; display: block; }
.mock-candles { width: 100%; height: 150px; display: block; }

/* Placement — deliberately overlapping, with two cards bleeding off the edges. */
.mock-pnl    { left: -30px; top: 176px; width: 360px; z-index: 3; }
.mock-table  { left: 398px; top: 8px;    width: 452px; z-index: 3; }
.mock-tx     { left: 782px; top: 262px;  width: 420px; z-index: 4; }
.mock-chart  { left: 168px; top: 392px;  width: 330px; z-index: 4; }
.mock-candles-wrap {
  left: 690px; top: 46px; width: 470px; z-index: 1;
  padding: var(--spacing-16); opacity: .45;
}

@media (max-width: 1100px) {
  .snippet-stage { height: 440px; }
  .stage-inner { transform: translateX(-50%) scale(.82); transform-origin: top center; }
}
@media (max-width: 820px) {
  .snippet-stage { height: 340px; }
  .stage-inner { transform: translateX(-50%) scale(.6); }
  .snippet-h1 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
}
@media (max-width: 560px) {
  .snippet-stage { height: 260px; }
  .stage-inner { transform: translateX(-50%) scale(.44); }
}

/* ---------------- Screenshot strip ---------------- */

/* Five real screenshots, staggered, at their true aspect ratios. The stage is a fixed
   1560x300 canvas that scales to fit the viewport — one --s variable drives both the
   transform and the reserved height, so they can never fall out of sync and clip a
   shot. No edge mask: every shot must be fully visible. */
.shot-strip {
  --s: 1;
  position: relative;
  height: calc(300px * var(--s));
  margin-top: var(--spacing-32);
  overflow: hidden;
}
.shot-stage {
  position: absolute; left: 50%; top: 0;
  width: 1560px; height: 300px;
  transform: translateX(-50%) scale(var(--s));
  transform-origin: top center;
}
.shot-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

.shot {
  position: absolute; margin: 0;
  border: 1px solid var(--color-steel-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-card-carbon);
  /* --dim is the depth control: further shots lose contrast and sink back. */
  opacity: calc(.44 + var(--dim) * .56);
  filter: brightness(calc(.5 + var(--dim) * .5));
}
.shot img {
  width: 100%; height: 100%; display: block;
  /* The global img max-width would cap width while height stays fixed — that is
     what distorted the wide shot once. Opt out here. */
  max-width: none;
  object-fit: fill;
}
.shot[style*="--dim:1"] { border-color: var(--color-graphite); }

@media (max-width: 1620px) { .shot-strip { --s: .86; } }
@media (max-width: 1400px) { .shot-strip { --s: .74; } }
@media (max-width: 1200px) { .shot-strip { --s: .62; } }
@media (max-width: 1000px) { .shot-strip { --s: .52; } }

/* Below this, scaling further would make the screenshots unreadable. Keep them
   legible and let the strip be swiped instead. */
@media (max-width: 860px) {
  .shot-strip {
    --s: .52;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    margin-top: var(--spacing-24);
  }
  .shot-strip::-webkit-scrollbar { display: none; }
  .shot-stage { position: relative; left: 0; transform: scale(var(--s)); transform-origin: top left; }
  .shot-strip::after { content: ""; display: block; width: calc(1560px * var(--s)); height: 1px; }
}

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

/* A long directory navigates better from a pinned menu than from a row of chips
   that scrolls away the moment you start reading. */
.dir-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  /* Wider than the standard container and with a deeper gutter: the menu sits out to
     the left of the reading column instead of crowding it. */
  max-width: 1392px;
  gap: var(--spacing-64);
  align-items: start;
}
.dir-nav-inner { padding-right: var(--spacing-8); }
.dir-main { min-width: 0; }

/* The rail belongs to the column, not to the menu. On the inner block it stopped a
   few pixels under the last section and left the sidebar looking cut off; stretched
   over the grid row it reads as the divider between menu and list. */
.dir-nav {
  align-self: stretch;
  border-right: 1px solid var(--color-card-carbon);
  padding-right: var(--spacing-16);
}
.dir-nav-inner { position: sticky; top: 88px; display: grid; gap: 4px; }
.dir-nav .control-label { width: auto; padding: 0 0 var(--spacing-8) 2px; }
.dir-nav nav { display: grid; gap: 2px; }

.dir-nav .jump-link {
  background: transparent; border-color: transparent;
  justify-content: flex-start; width: 100%;
  padding: 8px 10px;
  color: var(--color-ash);
}
.dir-nav .jump-link:hover { background: var(--color-card-carbon); border-color: transparent; color: var(--color-snow); }
.dir-nav .jump-link .jump-n { margin-left: auto; }
.dir-nav .jump-official { color: var(--color-accent); }
.dir-nav .jump-official .inline-mark { width: 16px; height: 16px; margin-right: 8px; }
.dir-nav .jump-official.is-active {
  background: var(--color-card-carbon);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.job-official { color: var(--color-accent); border-color: var(--color-steel-border); }
.job-official .inline-mark { width: 15px; height: 15px; margin-right: 2px; }
.job-official.is-on { color: var(--color-accent-ink); }
.job-official.is-on .inline-mark { color: var(--color-accent-ink); }
.dir-nav .jump-all {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-fog); margin-bottom: 4px;
}
.dir-nav .jump-link.is-active {
  background: var(--color-card-carbon);
  color: var(--color-snow);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.dir-nav .jump-link.is-active .node-ico { color: var(--color-accent); }

@media (max-width: 980px) {
  .dir-layout { grid-template-columns: 1fr; gap: var(--spacing-24); }
  /* On narrow screens the menu returns to a scrollable row above the content. */
  .dir-nav { order: -1; border-right: 0; padding-right: 0; }
  .dir-nav-inner { position: static; }
  .dir-nav nav {
    grid-auto-flow: column; grid-auto-columns: max-content;
    gap: var(--spacing-8); overflow-x: auto;
    padding-bottom: var(--spacing-8);
    scrollbar-width: none;
  }
  .dir-nav nav::-webkit-scrollbar { display: none; }
  .dir-nav .jump-link { background: var(--color-card-carbon); }
}

/* Holds the mark and the words it belongs to on the same line. */
.keep { white-space: nowrap; }

/* ---------------- Directory starters ---------------- */

/* Three routes into the list for someone who does not know which tool they need. */
.starters {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-40);
}
.starter {
  display: flex; flex-direction: column; gap: var(--spacing-8);
  /* Pane darker than its rim: the edge is what makes a block read as an object.
     A fill with a border of the same colour is a blob with no shape. */
  background: var(--color-deep-coal);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius);
  padding: var(--spacing-24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: border-color .16s, transform .18s cubic-bezier(.16, 1, .3, 1);
}
.starter:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.branch-link { color: var(--color-accent); }
.branch-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.starter-kicker {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-violet);
}
.starter-title {
  font-size: var(--text-body); font-weight: 600;
  letter-spacing: var(--tracking-body); line-height: 1.35;
  color: var(--color-snow); flex: 1;
}
.starter-go {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; align-self: start;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-snow);
  transition: background-color .16s, border-color .16s;
}
.starter:hover .starter-go { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); }


/* Compact search, sitting with the navigation rather than owning a full-width panel. */
/* The wide toolbar's search carries `min-width: 240px`, which in a 216px sidebar column
   forced the whole track wider than the column — every item then overhung the rail.
   In the sidebar the box takes the column's width, whatever that is. */
.search-sm { width: 100%; min-width: 0; flex: none; margin-bottom: var(--spacing-8); }
.dir-nav-inner, .dir-nav-inner > * { min-width: 0; }
.search-sm input { padding: 8px 12px 8px 34px; font-size: var(--text-body-sm); }
.search-sm svg { left: 11px; width: 14px; height: 14px; }
.dir-nav-inner .result-count { margin: 0 0 var(--spacing-8) 2px; }
.dir-nav-inner .chip-clear { justify-self: start; margin-bottom: var(--spacing-16); }

@media (max-width: 980px) {
  .starters { grid-template-columns: 1fr; }
}

/* ---------------- Trading tools ---------------- */

/* The chooser is the page's spine: pick the job, the list below becomes the answer. */
.jobs { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin: var(--spacing-8) 0 var(--spacing-16); }
.job {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  height: 38px; padding: 0 14px;
  background: var(--color-deep-coal);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  color: var(--color-ash); font-size: var(--text-body-sm); font-weight: 500;
  cursor: pointer;
  transition: color .16s, border-color .16s, background-color .16s;
}
.job:hover { color: var(--color-snow); border-color: var(--color-graphite); }
.job.is-on {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-accent-ink); box-shadow: none;
}
.job-n {
  font-family: var(--font-mono); font-size: var(--text-caption);
  color: var(--color-fog); font-variant-numeric: tabular-nums;
}
.job.is-on .job-n { color: var(--color-accent-ink); opacity: .64; }
.job-note {
  margin: 0 0 var(--spacing-24); max-width: 74ch;
  color: var(--color-mist); font-size: 15px; line-height: 1.53;
}

/* Comparison: a table, because that is what the question deserves. */
.table-wrap { overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
table.cmp th {
  text-align: left; font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; color: var(--color-fog);
  padding: 0 var(--spacing-16) 10px 0; border-bottom: 1px solid var(--color-steel-border);
  white-space: nowrap;
}
table.cmp td {
  padding: 14px var(--spacing-16) 14px 0;
  border-bottom: 1px solid var(--color-card-carbon);
  color: var(--color-mist); vertical-align: top;
}
table.cmp .cmp-name { color: var(--color-snow); font-weight: 600; white-space: nowrap; }
table.cmp .cmp-name a {
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 1px solid transparent; transition: color .16s, border-color .16s;
}
table.cmp .cmp-name a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
/* The whole row answers to the pointer, so it is obvious which line you are reading. */
table.cmp tbody tr { transition: background-color .16s; }
table.cmp tbody tr:hover { background: var(--color-deep-coal); }
table.cmp tbody tr:hover .cmp-name a { color: var(--color-accent); }
table.cmp .cmp-warn { color: var(--color-ash); }
table.cmp tbody tr:last-child td { border-bottom: 0; }

/* The fee calculator: the one number nobody runs before picking a terminal. */
.calc {
  background: var(--color-deep-coal);
  border: 1px solid var(--color-card-carbon);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  padding: var(--spacing-24);
}
.calc-inputs {
  display: flex; flex-wrap: wrap; gap: var(--spacing-32);
  padding-bottom: var(--spacing-24); border-bottom: 1px solid var(--color-card-carbon);
}
.calc-field { display: grid; gap: var(--spacing-8); }
.calc-field > span:first-child {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-fog);
}
.calc-input {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 14px; width: 200px;
  background: var(--color-page-ink);
  border: 1px solid var(--color-steel-border); border-radius: var(--radius);
}
.calc-input i { color: var(--color-fog); font-style: normal; }
.calc-input input {
  width: 100%; background: none; border: 0; outline: none;
  color: var(--color-snow); font-family: var(--font-inter);
  font-size: var(--text-subheading); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.42px;
  -moz-appearance: textfield;
}
.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input:focus-within { border-color: var(--color-accent); }

.calc-rates { display: flex; flex-wrap: wrap; gap: 6px; }
.rate {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  height: 44px; padding: 0 14px;
  background: var(--color-page-ink);
  border: 1px solid var(--color-steel-border); border-radius: var(--radius);
  color: var(--color-ash); font-size: var(--text-body-sm); font-weight: 500;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color .16s, border-color .16s;
}
.rate i {
  font-style: normal; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--color-fog);
}
.rate:hover { color: var(--color-snow); }
.rate.is-on { color: var(--color-accent); border-color: var(--color-accent); }
.rate.is-on i { color: var(--color-accent); opacity: .7; }

.calc-out {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-card-carbon);
  border: 1px solid var(--color-card-carbon);
  margin: var(--spacing-24) 0 var(--spacing-16);
}
.calc-cell { background: var(--color-deep-coal); padding: var(--spacing-16) var(--spacing-24); }
.calc-cell dt {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-fog); margin-bottom: 6px;
}
.calc-cell dd {
  margin: 0; font-size: var(--text-heading-sm); font-weight: 600;
  letter-spacing: var(--tracking-heading-sm); font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.calc-cell p { margin: 4px 0 0; color: var(--color-fog); font-size: var(--text-body-sm); }
.calc-note { margin: 0; color: var(--color-ash); font-size: var(--text-body-sm); max-width: 78ch; }

@media (max-width: 820px) {
  .calc-out { grid-template-columns: 1fr; }
  .calc-inputs { gap: var(--spacing-24); }
  .calc-input { width: 100%; }
}