/* Decision Models — machine interface
   Hairline grid, mono system labels, flat cells. No cards, no shadows, no radius. */

:root {
  --paper:  #f4f3ef;
  --raised: #ffffff;
  --ink:    #14161a;
  --muted:  #5c6169;
  --faint:  #676c78;
  --rule:   #dcdad2;
  --rule-strong: #b4b1a6;
  --accent: #0052cc;
  --accent-ink: #ffffff;
  --grey-node: #9398a8;

  --sans: ui-sans-serif, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --max: 76rem;
  --rail: 12.5rem;          /* left annotation rail */
  --pad: clamp(1rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #0a0c10;
    --raised: #11151b;
    --ink:    #e7eaef;
    --muted:  #9298a5;
    --faint:  #757c8a;
    --rule:   #1d232c;
    --rule-strong: #2f3744;
    --accent: #5b96ff;
    --accent-ink: #05070c;
    --grey-node: #7a828f;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--accent); color: var(--accent-ink);
  padding: .5rem .9rem; font-family: var(--mono); font-size: .75rem;
}
.skip-link:focus { left: 0; }

/* ---------- system type ---------- */

.sys, .rail-label, .site-nav a, .site-name, .anno, .kicker,
.dist-title, .dist-label, .dist-value, .node-label, .node-sub,
.spec-row, .model-provider, .resource-note, .footer-place, .fine-print {
  font-family: var(--mono);
}

.sys {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 30;
}
.header-inner {
  display: flex; align-items: center; gap: 1.25rem;
  padding-top: 1rem; padding-bottom: 1rem;
  flex-wrap: wrap;
}
.site-name {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; font-size: .8125rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 500;
}
.site-name svg { width: 30px; height: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-left: auto; }
.site-nav a {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: .2rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- sections + rail ---------- */

main > section { border-bottom: 1px solid var(--rule); }
main > section > .wrap {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
}
main > section > .wrap > * { grid-column: 2; min-width: 0; }
main > section > .wrap::before {
  content: "";
  position: absolute;
  left: calc(var(--pad) + var(--rail) - (clamp(1.5rem, 4vw, 3.5rem) / 2));
  top: clamp(3rem, 7vw, 5.5rem);
  bottom: clamp(3rem, 7vw, 5.5rem);
  width: 1px;
  background: var(--rule);
}
.rail {
  /* Spans every row rather than sharing row 1 with the heading: sharing meant a
     three-label rail stretched that row and dropped a dead gap under every h2. */
  grid-column: 1 !important; grid-row: 1 / -1;
  align-self: start; padding-top: .35rem;
  /* The rail box overhangs the rule by half the column gap, so the padding has to
     clear that overhang AND then leave real breathing room. */
  padding-right: calc(clamp(1.5rem, 4vw, 3.5rem) / 2 + 2rem);
}
.rail-label {
  display: block; font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  /* Must never cross the rule to its right. */
  max-width: 100%; overflow-wrap: anywhere; line-height: 1.35;
}
.rail-label + .rail-label { margin-top: .5rem; }
.rail-label b { display: block; color: var(--muted); font-weight: 500; }

@media (max-width: 760px) {
  main > section > .wrap { grid-template-columns: minmax(0, 1fr); }
  main > section > .wrap > * { grid-column: 1; }
  main > section > .wrap::before { display: none; }
  .rail { grid-column: 1 !important; margin-bottom: 1.5rem; padding-right: 0;
    display: flex; gap: 1.25rem 2rem; flex-wrap: wrap; }
  .rail-label + .rail-label { margin-top: 0; }
}

h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; margin: 0; }

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  margin-bottom: 1.5rem;
}
h3 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 1rem; max-width: 70ch; }
p.lede { color: var(--muted); }

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

.hero > .wrap { padding-top: clamp(3.5rem, 9vw, 7rem); }
.hero h1 {
  font-size: clamp(2.9rem, 9vw, 6rem);
  line-height: .95;
  letter-spacing: -.04em;
  margin-bottom: 1.25rem;
}
.hero .subhead {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing: -.01em;
  max-width: 34ch;
  margin-bottom: .85rem;
}
.hero .lede { max-width: 52ch; margin-bottom: 2rem; }
.hero-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem; }

.btn {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  padding-bottom: .3rem; border-bottom: 1px solid var(--accent);
  color: var(--ink);
}
.btn::after { content: " →"; color: var(--accent); }
.btn:hover { color: var(--accent); }
.btn-quiet { border-bottom-color: var(--rule-strong); }
.btn-quiet::after { color: var(--muted); }

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

.hero-diagram { margin: 0; border-top: 1px solid var(--rule); padding-top: 2rem; }
.hero-diagram svg { width: 100%; height: auto; max-width: 660px; display: block; }
.node rect { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.node-model rect { stroke: var(--ink); }
.node-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); }
.node-sub { font-size: 9px; letter-spacing: .08em; fill: var(--faint); }
.arrow { stroke: var(--rule-strong); stroke-width: 1; }
.arrow-head { fill: var(--rule-strong); }
.dist-title { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; fill: var(--faint); }
.dist-label { font-size: 11px; fill: var(--muted); }
.dist-value { font-size: 11px; fill: var(--ink); text-anchor: end; }
.track { fill: var(--rule); }
.bar { fill: var(--accent); }
.bar:nth-of-type(n) { transition: width .9s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* ---------- flat cell grids (replaces cards) ---------- */

.cards, .use-grid, .terms, .side-by-side {
  display: grid;
  gap: 0;
  /* Borders live on the cells, not on a bleeding gap, so half-empty
     final rows do not render as grey blocks. */
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.cards  { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.use-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.side-by-side { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.terms { grid-template-columns: 1fr; }

.cards > *, .use-grid > *, .side-by-side > *, .terms > * {
  background: var(--paper);
  padding: 1.25rem 1.35rem;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}

.model-card { display: flex; flex-direction: column; gap: .5rem; }
.model-name { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.model-provider { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.model-desc { font-size: .875rem; color: var(--muted); margin: 0; }
.spec-list { margin: .35rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.spec-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.spec-row > :last-child { color: var(--ink); }
.card-links { margin-top: auto; padding: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .85rem; list-style: none; }
.card-links a {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor;
}

.panel-title, .use-card h3, .term dt {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .65rem;
}
.use-card p, .term dd, .panel-note { font-size: .875rem; color: var(--muted); margin: 0; }
.term { display: grid; grid-template-columns: 14rem minmax(0,1fr); gap: 1.5rem; }
@media (max-width: 700px) { .term { grid-template-columns: 1fr; gap: .5rem; } }
.term dt { margin: 0; color: var(--ink); }
.term dd { margin: 0; }

/* ---------- code ---------- */

.code, pre, code {
  font-family: var(--mono);
  font-size: .8125rem;
}
.code, pre {
  background: var(--raised);
  border: 1px solid var(--rule);
  padding: .9rem 1rem;
  overflow-x: auto;
  margin: 0 0 1rem;
  line-height: 1.5;
  white-space: pre;
}
code { background: var(--raised); padding: .05em .3em; }
pre code { background: none; padding: 0; }

.flow { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .75rem; }
.flow-step { padding: .3rem 0; color: var(--muted); }
.flow-arrow { color: var(--faint); }

/* ---------- table ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); margin-bottom: 1rem; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .875rem; }
.compare-table th, .compare-table td {
  text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--rule);
}
.compare-table thead th {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  border-bottom: 1px solid var(--rule-strong);
}
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table tbody th { color: var(--ink); font-weight: 500; text-align: left; }
.compare-table td:not(:first-child) { font-family: var(--mono); font-size: .75rem; color: var(--muted); }

.tick-list { list-style: none; margin: 0 0 1rem; padding: 0;
  columns: 2; column-gap: 2.5rem; font-family: var(--mono); font-size: .8125rem; }
.tick-list li { padding: .2rem 0; color: var(--muted); break-inside: avoid; }
.tick-list li::before { content: "· "; color: var(--accent); }
@media (max-width: 560px) { .tick-list { columns: 1; } }

/* ---------- resources ---------- */

.resource-group { margin-bottom: 2rem; }
.resource-group > h3 {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--rule-strong);
}
.resource-list { list-style: none; margin: 0; padding: 0; }
.resource-item {
  display: grid; grid-template-columns: 16rem minmax(0,1fr); gap: 1.5rem;
  padding: .6rem 0; border-bottom: 1px solid var(--rule);
}
.resource-item > a {
  font-family: var(--mono); font-size: .8125rem; text-decoration: none;
  border-bottom: 1px solid var(--rule-strong); justify-self: start;
}
.resource-item > a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.resource-note { font-size: .8125rem; color: var(--muted); }
@media (max-width: 700px) { .resource-item { grid-template-columns: 1fr; gap: .25rem; } }

/* ---------- form ---------- */

.form-row { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); max-width: 32rem; }
.form-row input[type=email] {
  flex: 1 1 14rem; min-width: 0; border: 0; padding: .7rem .85rem;
  font-family: var(--mono); font-size: .8125rem;
  background: var(--paper); color: var(--ink);
}
.form-row button {
  border: 0; cursor: pointer; padding: .7rem 1.2rem;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.form-row button:hover { filter: brightness(1.08); }
.form-message { font-family: var(--mono); font-size: .75rem; color: var(--muted); margin-top: .75rem; }
.fine-print { font-size: .75rem; color: var(--muted); max-width: 92ch; margin-top: 1rem; }

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

.site-footer { padding: 3rem 0 4rem; }
.site-footer .wrap { display: grid; gap: 1rem; }
.footer-brand { font-family: var(--mono); font-size: .8125rem; letter-spacing: .1em;
  text-transform: uppercase; margin: 0; }
.footer-line { color: var(--muted); font-size: .875rem; margin: 0; max-width: 46ch; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-links a { font-family: var(--mono); font-size: .75rem; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.footer-place {
  margin: .5rem 0 0; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.footer-meta {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .625rem; color: var(--faint);
  word-break: break-all; line-height: 1.7;
}
.footer-meta b { color: var(--muted); font-weight: 500; }

.loading, .load-error { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.mono { font-family: var(--mono); }

/* Anchor targets clear the sticky status bar. */
main > section { scroll-margin-top: 4.5rem; }

.card-links { list-style: none; }
.card-links li { list-style: none; display: inline; }

/* The use-case grid keeps its cell borders when rows are hidden. */
.use-card[hidden] { display: none !important; }
#use-toggle { background: none; border: 0; border-bottom: 1px solid var(--rule-strong);
  cursor: pointer; color: var(--ink); padding: 0 0 .3rem; }

/* The section index is the one place the accent earns its keep in body flow. */
.rail-label:first-child b { color: var(--accent); }

.site-header { background: var(--paper); }

/* Raised cells now read as surfaces rather than vanishing into the ground. */
.cards > *, .use-grid > *, .side-by-side > *, .terms > * { background: var(--raised); }
.code, pre { background: var(--raised); }

h2 { position: relative; }

/* ---------- mobile ---------- */

@media (max-width: 760px) {
  /* Tap targets: nav and inline links were ~25px tall. */
  .site-nav { gap: 0; width: 100%; }
  .site-nav a { padding: .55rem 0; margin-right: 1.1rem; }
  .footer-links { gap: .25rem 1.5rem; }
  .footer-links a { padding: .45rem 0; }
  .card-links a { padding: .35rem 0; }
  .resource-item > a { padding: .3rem 0; }

  /* The hero diagram shrank to unreadable at 390px. Keep it legible and let it
     scroll inside its own container instead. */
  .hero-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero-diagram svg { min-width: 560px; }
}

/* ---------- registry: type badge and provenance ---------- */

.model-kind {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.model-prov {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  margin: .75rem 0 0; display: inline-block;
  border: 1px solid var(--rule-strong); padding: .2rem .5rem;
}
.model-prov[data-prov="CODE-VERIFIED"] { color: var(--muted); border-color: var(--muted); }
.model-prov[data-prov="VENDOR-REPORTED"] { color: var(--faint); border-style: dashed; }

.footer-independence {
  font-size: .8125rem; color: var(--muted); max-width: 56ch; margin: .5rem 0 0;
}

/* ---------- built with ---------- */

.built-list { display: block; margin-bottom: 1.5rem; }

.built-grid, .built-features {
  display: grid;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.built-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.built-features { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.built-features { margin-bottom: 0; }
.built-item, .built-feature {
  background: var(--raised);
  padding: 1.15rem 1.3rem 1.3rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .5rem;
}
.built-head { display: flex; flex-direction: column; gap: .2rem; }
.built-title { font-size: .95rem; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.built-repo {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--accent); text-decoration: none; justify-self: start;
  overflow-wrap: anywhere;
}
.built-repo:hover { border-bottom: 1px solid currentColor; }
.built-desc { font-size: .8125rem; color: var(--muted); margin: 0; }
.built-meta {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--faint); margin: 0; padding-top: .5rem;
  border-top: 1px solid var(--rule);
}
.built-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: auto 0 0; padding: .5rem 0 0; }
.built-tags li {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule-strong); padding: .1rem .4rem;
}

/* ---------- live strip ---------- */

.livestrip {
  border-bottom: 1px solid var(--rule);
  background: var(--raised);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.livestrip .wrap {
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 1.4rem;
  padding-top: .55rem; padding-bottom: .55rem;
  overflow: hidden; white-space: nowrap;
}
.livestrip .wrap > span { flex: none; }
.livestrip .ls-right { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.livestrip b { color: var(--ink); font-weight: 500; }
.livestrip .ls-key { color: var(--muted); }
.livestrip .ls-news::before { content: "/ "; color: var(--rule-strong); }
.livestrip .ls-right { margin-left: auto; color: var(--faint); }
/* The logo's two unchosen option nodes carry the live signal: they are the
   possibilities still being weighed, and the blue decision stays steady. */
@media (prefers-reduced-motion: no-preference) {
  .site-name .opt-node { animation: weigh 3.4s ease-in-out infinite; }
  .site-name .opt-node-b { animation-delay: 1.7s; }
  @keyframes weigh { 0%, 100% { opacity: .95 } 50% { opacity: .35 } }
}
/* Shed the news items before anything is allowed to wrap. */
@media (max-width: 1700px) { .livestrip .ls-news:nth-of-type(3) { display: none; } }
@media (max-width: 1460px) { .livestrip .ls-news:nth-of-type(2) { display: none; } }
@media (max-width: 1240px) { .livestrip .ls-news { display: none; } }
@media (max-width: 620px) { .livestrip .ls-right { display: none; } }

/* ---------- registry: type badge and provenance ---------- */

.model-kind {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.model-prov {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  margin: .75rem 0 0; display: inline-block;
  border: 1px solid var(--rule-strong); padding: .2rem .5rem;
}
.model-prov[data-prov="CODE-VERIFIED"] { color: var(--muted); border-color: var(--muted); }
.model-prov[data-prov="VENDOR-REPORTED"] { color: var(--faint); border-style: dashed; }

.footer-independence {
  font-size: .8125rem; color: var(--muted); max-width: 56ch; margin: .5rem 0 0;
}

/* ---------- built with ---------- */

.built-list { display: block; margin-bottom: 1.5rem; }

.built-grid, .built-features {
  display: grid;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.built-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.built-features { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.built-features { margin-bottom: 0; }
.built-item, .built-feature {
  background: var(--raised);
  padding: 1.15rem 1.3rem 1.3rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .5rem;
}
.built-head { display: flex; flex-direction: column; gap: .2rem; }
.built-title { font-size: .95rem; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.built-repo {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--accent); text-decoration: none; justify-self: start;
  overflow-wrap: anywhere;
}
.built-repo:hover { border-bottom: 1px solid currentColor; }
.built-desc { font-size: .8125rem; color: var(--muted); margin: 0; }
.built-meta {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--faint); margin: 0; padding-top: .5rem;
  border-top: 1px solid var(--rule);
}
.built-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: auto 0 0; padding: .5rem 0 0; }
.built-tags li {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule-strong); padding: .1rem .4rem;
}

/* ---------- built with: headline project ---------- */

.built-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--rule);
  background: var(--raised);
  margin-bottom: 0;
}
/* The demo is the point of this panel, so it spans the full width and the
   copy sits beneath it. Stretching it beside a tall text column letterboxed
   the video into a black void. */
.built-media {
  position: relative; background: #000;
  border-bottom: 1px solid var(--rule);
  line-height: 0;
}
/* Contain, not cover: this is a screen recording and cropping it loses the point. */
.built-media video { display: block; width: 100%; height: auto; }
.built-credit {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  pointer-events: none;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .06em;
  color: #cfd3da; background: rgba(0,0,0,.66); padding: .35rem .6rem;
}
.built-hero-body {
  padding: 1.5rem 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .6rem 2.5rem;
  align-items: start;
}
.built-hero-body > .built-flag,
.built-hero-body > .built-hero-title,
.built-hero-body > .built-repo { grid-column: 1; }
.built-hero-body > .built-metrics { grid-column: 2; grid-row: 1 / span 3; border-top: 0; padding-top: 0; }
.built-hero-body > .built-desc,
.built-hero-body > .built-src,
.built-hero-body > .built-meta,
.built-hero-body > .built-tags,
.built-hero-body > .built-ctas { grid-column: 1 / -1; }
.built-flag {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0;
}
.built-hero-title {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 500;
  letter-spacing: -.02em; margin: 0; line-height: 1.1;
}
.built-metrics {
  list-style: none; margin: .4rem 0 0; padding: .8rem 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
}
.built-metrics li { display: flex; flex-direction: column; gap: .15rem; }
.built-metrics b {
  font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500; letter-spacing: -.02em; color: var(--ink); line-height: 1;
}
.built-metrics span {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.built-source {
  font-size: .75rem; color: var(--faint); margin: 0; max-width: 88ch;
  padding-left: .8rem; border-left: 1px solid var(--rule-strong);
}
.built-ctas { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: auto 0 0; padding-top: .5rem; }
.built-cta {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .15rem;
}
.built-feature { background: var(--raised); }

@media (max-width: 760px) {
  .built-hero-body { grid-template-columns: 1fr; }
  .built-hero-body > .built-metrics { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .built-media video { display: none; }
  .built-media { background-image: var(--poster); background-size: cover; min-height: 200px; }
}

/* ---------- hero decision stage ---------- */

.decision-stage {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  max-width: 44rem;
  transition: opacity .26s ease;
}
.decision-stage.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .decision-stage { transition: none; } }

.stage-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  margin-bottom: 1.1rem;
}
.stage-kind {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.stage-state {
  font-family: var(--mono); font-size: .9375rem; color: var(--ink);
  margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; max-width: none;
}
.stage-label {
  font-size: .625rem; letter-spacing: .16em; color: var(--faint);
  align-self: center;
}

.stage-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.stage-dist li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 4.5rem;
  align-items: center; gap: 1rem;
}
.stage-dist .opt {
  font-family: var(--mono); font-size: .875rem; color: var(--muted);
}
.stage-dist .bar {
  display: block; height: 14px; background: var(--track, var(--rule));
  border: 1px solid var(--rule);
}
.stage-dist .bar i {
  display: block; height: 100%; background: var(--accent);
  transition: width .85s cubic-bezier(.2,.75,.2,1);
}
.stage-dist li:not(:first-child) .bar i { background: var(--rule-strong); }
.stage-dist .p {
  font-family: var(--mono); font-size: 1.25rem; letter-spacing: -.02em;
  color: var(--ink); text-align: right;
}
.stage-dist li:not(:first-child) .p { color: var(--faint); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .stage-dist .bar i { transition: none; } }

@media (max-width: 560px) {
  .stage-dist li { grid-template-columns: 6.5rem minmax(0,1fr) 3.5rem; gap: .6rem; }
  .stage-dist .p { font-size: 1rem; }
}

/* ---------- poster section ---------- */

.poster-line {
  font-size: clamp(2.2rem, 6.5vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 500;
  margin: 0 0 2.5rem;
  max-width: 16ch;
}
.poster-line em { font-style: normal; color: var(--accent); }

.poster-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.pc-side {
  padding: 1.4rem 1.5rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--raised);
  display: flex; flex-direction: column; gap: .75rem;
}
.pc-kind {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.pc-side-decision .pc-kind { color: var(--accent); }
.pc-quote {
  font-size: 1.0625rem; line-height: 1.45; color: var(--muted); margin: 0; max-width: none;
}
.pc-note { font-size: .75rem; color: var(--faint); margin: auto 0 0; max-width: none; }
.pc-note em { font-style: italic; }

.pc-fields { margin: 0; display: grid; gap: .5rem; }
.pc-fields > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .5rem;
}
.pc-fields dt {
  font-family: var(--mono); font-size: .8125rem; color: var(--muted);
}
.pc-fields dd {
  margin: 0; font-family: var(--mono);
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; color: var(--ink); line-height: 1;
}
.pc-fields .pc-true { color: var(--accent); }

.poster-body { color: var(--muted); font-size: .9375rem; }

/* ---------- ecosystem map ---------- */

.eco-map {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--raised);
  margin-bottom: .75rem;
}
.eco-tier {
  padding: 1.25rem 1.4rem;
  display: flex; flex-direction: column; gap: .75rem;
  border-right: 1px solid var(--rule);
}
.eco-tier:last-child { border-right: 0; }
.eco-tier-label {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.eco-nodes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; align-content: center; flex: 1;
}
.eco-node {
  font-family: var(--mono); font-size: .8125rem;
  border: 1px solid var(--rule-strong); padding: .45rem .7rem;
  color: var(--muted); white-space: nowrap;
}
.eco-hosted { border-color: var(--accent); color: var(--accent); }
.eco-cap { margin-bottom: 2rem; }

@media (max-width: 860px) {
  .eco-map { grid-template-columns: 1fr; }
  .eco-tier { border-right: 0; border-bottom: 1px solid var(--rule); }
  .eco-tier:last-child { border-bottom: 0; }
}

/* ---------- terminology: the naming fight ---------- */

.naming { margin: 0 0 1.25rem; }
.naming-term {
  margin: 0; max-width: none;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.035em; font-weight: 500;
  color: var(--faint);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
}
.naming-term span {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.naming-term + .naming-term { margin-top: .35rem; padding-left: 1.75rem; }
.naming-term + .naming-term + .naming-term { padding-left: 3.5rem; }
.naming-vendor { color: var(--muted); }
.naming-ours { color: var(--ink); }
.naming-ours span { color: var(--accent); }
.naming-verdict {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 1.75rem;
  padding-top: 1rem; border-top: 1px solid var(--rule);
}
@media (max-width: 620px) {
  .naming-term + .naming-term,
  .naming-term + .naming-term + .naming-term { padding-left: 0; }
}

/* ---------- use-case mini distributions ---------- */

.use-dist {
  list-style: none; margin: .9rem 0 0; padding: .8rem 0 0;
  border-top: 1px solid var(--rule); display: grid; gap: .35rem;
}
.use-dist li {
  display: grid; grid-template-columns: 5.5rem minmax(0,1fr) 2.4rem;
  align-items: center; gap: .6rem;
}
.use-dist .uo { font-family: var(--mono); font-size: .6875rem; color: var(--faint); }
.use-dist .ub { display: block; height: 6px; background: var(--rule); }
.use-dist .ub i { display: block; height: 100%; background: var(--rule-strong); }
.use-dist li:first-child .ub i { background: var(--accent); }
.use-dist .up {
  font-family: var(--mono); font-size: .6875rem; color: var(--muted); text-align: right;
}
.use-card { gap: 0; }

/* ---------- comparison: three up front, the rest on request ---------- */

.delta-top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}
.delta-item {
  padding: 1.15rem 1.3rem; background: var(--raised);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.delta-axis {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .75rem;
}
.delta-a, .delta-b { margin: 0; font-size: .875rem; max-width: none; }
.delta-a { color: var(--muted); padding-bottom: .6rem; }
.delta-b {
  color: var(--ink); padding-top: .6rem; border-top: 1px solid var(--rule);
}
.delta-b::before {
  content: "→ "; color: var(--accent);
}

.delta-details { margin-bottom: 1rem; }
.delta-details > summary {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  padding: .6rem 0; border-bottom: 1px solid var(--rule-strong);
  list-style: none; display: block;
}
.delta-details > summary::-webkit-details-marker { display: none; }
.delta-details > summary::before { content: "+ "; color: var(--accent); }
.delta-details[open] > summary::before { content: "− "; }
.delta-details > summary:hover { color: var(--ink); }
.delta-details .table-wrap { margin-top: 1rem; }

.built-src { margin: .25rem 0 0; }
.built-src > summary {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); cursor: pointer;
  list-style: none; padding: .25rem 0;
}
.built-src > summary::-webkit-details-marker { display: none; }
.built-src > summary::before { content: "+ "; color: var(--accent); }
.built-src[open] > summary::before { content: "\2212 "; }
.built-src p { font-size: .75rem; color: var(--faint); margin: .25rem 0 0; }
.section-lede { color: var(--muted); }

/* ---------- lineage ---------- */

.lineage { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.lin {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.lin:last-child { border-bottom: 1px solid var(--rule); }
.lin-year {
  font-family: var(--mono); font-size: 1.25rem; letter-spacing: -.02em;
  color: var(--faint); line-height: 1;
}
.lin-body { display: grid; gap: .3rem; }
.lin-title {
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; justify-self: start;
  border-bottom: 1px solid var(--rule-strong);
}
.lin-title:hover { color: var(--accent); border-bottom-color: var(--accent); }
.lin-who {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.lin-what { font-size: .875rem; color: var(--muted); max-width: 80ch; }
.lin-kind {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--rule-strong); padding: .15rem .45rem;
  justify-self: start; margin-top: .2rem;
}
/* The open-weights entries are the argument, so they get the accent. */
.lin[data-kind="open-weights"] .lin-kind { color: var(--accent); border-color: var(--accent); }
.lin[data-kind="open-weights"] .lin-year { color: var(--muted); }
.lin[data-kind="hosted"] .lin-year { color: var(--ink); }

@media (max-width: 620px) {
  .lin { grid-template-columns: 1fr; gap: .4rem; }
  .lin-year { font-size: 1rem; }
}

.naming-note {
  border-left: 1px solid var(--rule-strong);
  padding-left: 1rem; margin-bottom: 1.5rem;
  font-size: .875rem; color: var(--muted); max-width: 62ch;
}
.naming-note-k {
  display: block; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  margin-bottom: .35rem;
}

/* ---------- registry as a matrix ---------- */

.reg-wrap { overflow-x: auto; border: 1px solid var(--rule); margin-bottom: 1.25rem; }
.reg {
  border-collapse: collapse; width: 100%; min-width: 52rem;
  font-family: var(--mono); font-size: .75rem;
}
.reg thead th {
  text-align: left; font-weight: 500; padding: .7rem .9rem;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap; background: var(--raised);
}
.reg tbody td, .reg tbody th { padding: 0; border-bottom: 1px solid var(--rule); }
.reg tbody td { padding: .55rem .9rem; color: var(--muted); vertical-align: middle; }

.reg-name {
  display: flex; align-items: baseline; gap: .55rem; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: .55rem .9rem; font: inherit; color: var(--ink);
}
.reg-name em {
  font-style: normal; font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.reg-name:hover { color: var(--accent); }
.reg-caret {
  width: 0; height: 0; flex: none; align-self: center;
  border-left: 4px solid var(--rule-strong);
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  transition: transform .15s ease;
}
.reg-name[aria-expanded="true"] .reg-caret { transform: rotate(90deg); border-left-color: var(--accent); }

.reg .yes { color: var(--accent); }
.reg .no { color: var(--faint); }
.reg .unk { color: var(--rule-strong); }
.reg-row[data-kind="HOSTED MODEL"] { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.reg-prov {
  font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); padding: .15rem .4rem; color: var(--faint);
  white-space: nowrap;
}
.reg-prov[data-prov="CODE-VERIFIED"] { color: var(--muted); border-color: var(--muted); }
.reg-prov[data-prov="VENDOR-REPORTED"] { border-style: dashed; }

.reg-detail > td { background: var(--raised); padding: 0 !important; }
.reg-detail-in {
  padding: 1rem 1.2rem 1.2rem 2.4rem;
  border-left: 2px solid var(--accent);
  display: grid; gap: .8rem;
}
.reg-detail-in p { font-family: var(--sans); font-size: .875rem; color: var(--muted); margin: 0; max-width: 78ch; }
.reg-facts { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; }
.reg-facts > div { display: flex; gap: .6rem; align-items: baseline; }
.reg-facts dt { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.reg-facts dd { margin: 0; font-size: .75rem; color: var(--ink); }
.reg-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.reg-links a {
  font-size: .6875rem; letter-spacing: .08em; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid currentColor;
}

/* ---------- benchmark ---------- */

.bm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.bm {
  padding: 1.3rem 1.4rem; background: var(--raised);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.bm-k {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .7rem;
}
.bm-v {
  font-family: var(--mono); font-size: clamp(2rem, 5vw, 3rem); line-height: 1;
  letter-spacing: -.03em; color: var(--muted); margin: 0 0 .5rem;
}
.bm-v span { font-size: .875rem; letter-spacing: 0; margin-left: .25rem; color: var(--faint); }
.bm-s { font-family: var(--mono); font-size: .6875rem; color: var(--faint); margin: 0; }
.bm-lead .bm-v { color: var(--accent); }
.bm-lead .bm-k { color: var(--accent); }

.bm-find {
  border: 1px solid var(--rule); background: var(--raised);
  padding: 1.3rem 1.4rem; margin-bottom: 1.25rem;
}
.bm-find-k {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 1rem;
}
.bm-agree { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.bm-agree li {
  display: grid; grid-template-columns: 14rem minmax(0,1fr) 3.5rem;
  align-items: center; gap: 1rem;
  font-family: var(--mono); font-size: .75rem; color: var(--muted);
}
.bm-agree .ba { display: block; height: 12px; background: var(--rule); border: 1px solid var(--rule); }
.bm-agree .ba i { display: block; height: 100%; background: var(--rule-strong); }
.bm-agree li:last-child .ba i { background: var(--accent); }
.bm-agree b { font-weight: 500; color: var(--ink); text-align: right; font-size: 1rem; }
.bm-find-note { font-size: .875rem; color: var(--muted); margin: 0; max-width: 80ch; }
@media (max-width: 620px) {
  .bm-agree li { grid-template-columns: 9rem minmax(0,1fr) 3rem; gap: .6rem; font-size: .6875rem; }
}

/* Lede sits under a big heading, so it can run wider than body prose. */
.section-lede { color: var(--muted); max-width: 76ch; }

/* The demo is the link. */
a.built-media { display: block; text-decoration: none; }
a.built-media:hover video { opacity: .92; }
a.built-media video { transition: opacity .15s ease; }
a.built-media:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.bm-warn {
  margin-top: 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule-strong);
}
.bm-warn-k {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem;
}
.bm-warn p { font-size: .875rem; color: var(--muted); margin: 0 0 .7rem; max-width: 80ch; }
.bm-warn p:last-child { margin-bottom: 0; }
.bm-warn strong { color: var(--ink); font-weight: 500; }

.stage-meta {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.stage-read {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .04em;
  margin: 1.1rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--rule); color: var(--muted); max-width: none;
}
.stage-read.is-split { color: var(--accent); }

/* A rejected option still belongs on screen: the bounded answer space is the point. */
.stage-dist li.is-rejected .opt,
.stage-dist li.is-rejected .p { color: var(--faint); }
.stage-dist li.is-rejected .bar { border-style: dashed; }

/* ---------- test rig ---------- */

.rig {
  margin: 0 0 1.25rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.rig > div {
  padding: .7rem .9rem; background: var(--raised);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.rig dt {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .25rem;
}
.rig dd { margin: 0; font-family: var(--mono); font-size: .75rem; color: var(--ink); }

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

.stage-rig {
  margin: 1.1rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.stage-rig > div {
  padding: .6rem .8rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.stage-rig dt {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .2rem;
}
.stage-rig dd { margin: 0; font-family: var(--mono); font-size: .6875rem; color: var(--muted); }
.stage-src {
  font-family: var(--mono); font-size: .6875rem; line-height: 1.7;
  color: var(--faint); margin: .9rem 0 0; max-width: 78ch;
}
.stage-src a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }