/* ==========================================================================
   Capability microsites
   Built from the Prometheux Figma language: ghost-white canvas, hairline
   grids, Roobert's MONO axis, saturated colour panels with isometric
   illustrations, and hard ink offset shadows.
   Every page sets --accent (and --accent-2 for secondary moments) on <main>.
   ========================================================================== */

.cap {
  --ink: #212020;
  --paper: #f2f2f2;
  --white: #fff;
  --line: #cecece;
  --slate: #5c5b5b;
  --blue: #1828ff;
  --yellow: #ffdf4b;
  --green: #00e382;
  --pink: #ff89e3;
  --orange: #ffa15e;
  --sky: #4b90fe;
  --accent: var(--pink);
  --accent-2: var(--orange);
  --shadow: 4px 4px 0 0 var(--ink);
  --shadow-lg: 8px 8px 0 0 var(--ink);
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  background: var(--paper);
  color: var(--ink);
  font-family: Roobert, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "MONO" 0;
  letter-spacing: -.02em;
  overflow-x: clip;
}
.cap *, .cap *::before, .cap *::after { box-sizing: border-box; }
.cap img { max-width: 100%; }
.cap a:not(.button) { color: inherit; }
.cap .button { color: #fff; }

.cap-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.cap-section { padding-block: clamp(72px, 10vw, 128px); }
.cap-section + .cap-section { padding-top: 0; }
.cap-section.is-tight { padding-block: clamp(40px, 6vw, 64px); }

/* ---------- Type ---------- */
.cap-mono, .cap-label {
  font-family: Roobert, ui-monospace, "SF Mono", Menlo, monospace;
  font-variation-settings: "MONO" 100;
  letter-spacing: 0;
}
.cap-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em;
}
.cap-label .dot { width: 8px; height: 8px; background: var(--accent); border: 1px solid var(--ink); }
.cap-h1, .cap-h2, .cap-h3 { margin: 0; font-variation-settings: "MONO" 50; color: var(--ink); }
.cap-h1 { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; }
.cap-h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em; }
.cap-h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.cap-lead { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--slate); max-width: 620px; }
.cap-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate); }
.cap-body strong, .cap-lead strong { color: var(--ink); font-weight: 600; }
.cap-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.cap-head.is-center { align-items: center; text-align: center; }
.cap-head.is-center .cap-lead { margin-inline: auto; }

/* ---------- Buttons (site .button is reused; these add the outline variant) ---------- */
.cap-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cap .button { box-shadow: none; }
.cap .button:hover { box-shadow: var(--shadow); }
.cap-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .5rem 1.375rem; border: 1px solid var(--ink); background: var(--white); border-radius: .25rem;
  font-size: .875rem; font-weight: 500; line-height: 1.2em; text-transform: uppercase; text-decoration: none;
  font-variation-settings: "MONO" 50; color: var(--ink); transition: box-shadow .3s;
}
.cap-btn-outline:hover { box-shadow: var(--shadow); }

/* ---------- Hero ---------- */
.cap-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.cap-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cap-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.cap-crumbs { display: flex; gap: 8px; align-items: center; color: var(--slate); }
.cap-crumbs a { text-decoration: none; }
.cap-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.cap-hero-art {
  position: relative; aspect-ratio: 1 / .86; background: var(--accent);
  border: 1px solid var(--ink); box-shadow: var(--shadow-lg);
  display: grid; place-items: center; overflow: hidden;
}
.cap-hero-art::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 55%, #000 0, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0, transparent 70%);
}
.cap-hero-art img { position: relative; width: 82%; height: 82%; object-fit: contain; animation: cap-float 6s ease-in-out infinite; }
.cap-hero-tag {
  position: absolute; top: 0; left: 0; z-index: 1; padding: 6px 12px;
  background: var(--ink); color: var(--white); font-size: 12px;
}
@keyframes cap-float { 50% { transform: translateY(-10px); } }

.cap-proof {
  display: grid; grid-template-columns: repeat(var(--n, 3), 1fr);
  margin-top: clamp(48px, 6vw, 80px); border: 1px solid var(--ink); background: var(--white);
}
.cap-proof a { display: flex; flex-direction: column; gap: 8px; padding: 24px 28px; text-decoration: none; transition: background .2s; }
.cap-proof a + a { border-left: 1px solid var(--ink); }
.cap-proof a:hover { background: var(--accent); }
.cap-proof .num { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variation-settings: "MONO" 50; white-space: nowrap; }
.cap-proof .lbl { font-size: 14px; line-height: 1.45; color: var(--slate); }

/* ---------- Logos ---------- */
.cap-logos { border-block: 1px solid var(--line); }
.cap-logos .cap-wrap { display: flex; gap: clamp(28px, 5vw, 64px); align-items: center; justify-content: space-between; flex-wrap: nowrap; padding-block: 28px; }
.cap-logos img { height: 22px; max-width: 120px; object-fit: contain; width: auto; filter: grayscale(1) contrast(1.2); opacity: .7; transition: opacity .2s, filter .2s; }
.cap-logos img:hover { opacity: 1; filter: none; }
.cap-logos .cap-label { color: var(--slate); }

/* ---------- Compare (before / after table) ---------- */
.cap-compare { border: 1px solid var(--ink); background: var(--white); box-shadow: var(--shadow-lg); }
.cap-compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.cap-compare-row + .cap-compare-row { border-top: 1px solid var(--line); }
.cap-compare-row > div { display: flex; gap: 14px; align-items: flex-start; padding: 20px 28px; font-size: 16px; line-height: 1.5; }
.cap-compare-row > div + div { border-left: 1px solid var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--white)); }
.cap-compare-row.is-head { display: grid; align-items: stretch; gap: 0; }
.cap-compare-row.is-head > div { padding-block: 14px; font-size: 12px; }
.cap-compare-row.is-head > div:first-child { background: var(--paper); color: var(--slate); }
.cap-compare-row.is-head > div + div { background: var(--accent); color: var(--ink); }
.cap-compare-row:not(.is-head) > div:first-child { color: var(--slate); }
.cap-mark { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.cap-mark svg { display: block; width: 100%; height: 100%; }
.cap-mark.is-no { color: var(--slate); opacity: .7; }
.cap-mark.is-yes { color: var(--ink); }

/* ---------- Feature panel (the Figma Define / Process / Power AI block) ---------- */
.cap-feature { --c: var(--accent); border: 1px solid var(--ink); background: var(--paper); }
.cap-feature + .cap-feature { margin-top: clamp(48px, 6vw, 80px); }
.cap-feature-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; background: var(--c); padding: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--ink); }
.cap-feature-top .cap-h2 { font-size: clamp(28px, 3vw, 40px); font-variation-settings: "MONO" 100; font-weight: 400; letter-spacing: -.02em; }
.cap-feature-top .cap-body { color: var(--ink); max-width: 480px; }
.cap-feature-top img { width: 100%; max-height: 300px; object-fit: contain; }
.cap-feature-copy { display: flex; flex-direction: column; gap: 16px; }
.cap-cells { display: grid; grid-template-columns: repeat(2, 1fr); }
.cap-cell { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.cap-cell:nth-child(odd) { border-right: 1px solid var(--line); }
.cap-cell:nth-last-child(-n+2):nth-child(odd), .cap-cell:last-child { border-bottom: 0; }
.cap-cell img { width: 36px; height: 36px; object-fit: contain; }
.cap-cell .cap-h3 { font-size: 17px; }
.cap-cell .cap-body { font-size: 15px; }
.cap-takeaway-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(20px, 3vw, 40px); background: var(--c); border-block: 1px solid var(--ink); }
.cap-takeaway-bar .cap-h3 { font-size: clamp(18px, 2vw, 24px); }
.cap-takeaway { margin: 0; padding: clamp(24px, 3vw, 40px); background: var(--white); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; white-space: pre-line; }

/* ---------- Steps ---------- */
.cap-steps { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border: 1px solid var(--ink); background: var(--white); counter-reset: step; }
.cap-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px 36px; }
.cap-step + .cap-step { border-left: 1px solid var(--ink); }
.cap-step-num { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent); border: 1px solid var(--ink); font-size: 15px; margin-bottom: 12px; }
.cap-step + .cap-step::before {
  content: "→"; position: absolute; left: -14px; top: 40px; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--ink); border-radius: 99px; font-size: 13px; z-index: 1;
}

/* ---------- Code / terminal ---------- */
.cap-code { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cap-code .cap-head { margin-bottom: 24px; }
.cap-code ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cap-code li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.cap-code li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; background: var(--accent); border: 1px solid var(--ink); }
.cap-term { background: var(--ink); color: #f2f2f2; border: 1px solid var(--ink); box-shadow: var(--shadow-lg); min-width: 0; }
.cap-term-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #3a3939; }
.cap-term-bar i { width: 10px; height: 10px; display: block; }
.cap-term-tabs { display: flex; gap: 0; margin-left: 14px; overflow-x: auto; }
.cap-term-tab { appearance: none; border: 0; background: none; color: #a9a8a8; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.cap-term-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--accent); }
.cap-term pre { margin: 0; padding: 28px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; min-height: 260px; }
.cap-term pre[hidden] { display: none; }
.cap-term .c { color: #8a8989; } .cap-term .k { color: var(--accent); } .cap-term .p { color: var(--green); }
.cap-term-cap { padding: 12px 28px; border-top: 1px solid #3a3939; font-size: 12px; color: #a9a8a8; }

/* ---------- Use cases ---------- */
.cap-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.cap-case { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--ink); box-shadow: var(--shadow); background: var(--white); transition: transform .2s, box-shadow .2s; }
.cap-case:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--ink); }
.cap-case .cap-h3 { font-size: 24px; font-variation-settings: "MONO" 100; font-weight: 500; }
.cap-case .cap-body { color: var(--ink); }
.cap-case .cap-btn-outline { align-self: flex-end; margin-top: auto; }
.cap-case.c-yellow { background: var(--yellow); } .cap-case.c-pink { background: var(--pink); }
.cap-case.c-orange { background: var(--orange); } .cap-case.c-green { background: var(--green); }
.cap-case.c-sky { background: var(--sky); }

/* ---------- Quotes ---------- */
.cap-quotes { border: 1px solid var(--ink); background: var(--white); }
.cap-quotes-bar { padding: 14px clamp(20px, 3vw, 32px); background: var(--accent-2); border-bottom: 1px solid var(--ink); }
.cap-quotes-bar .cap-h3 { font-size: clamp(18px, 2vw, 24px); }
.cap-quotes-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / var(--n, 3)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cap-quote { scroll-snap-align: start; display: flex; flex-direction: column; gap: 24px; justify-content: space-between; padding: clamp(24px, 3vw, 36px); }
.cap-quote + .cap-quote { border-left: 1px solid var(--line); }
.cap-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.55; font-variation-settings: "MONO" 100; letter-spacing: -.01em; }
.cap-quote figcaption { text-align: left; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.cap-quote figcaption img, .cap-quote .ini { flex: none; width: 40px; height: 40px; border-radius: 99px; object-fit: cover; border: 1px solid var(--ink); }
.cap-quote .ini { flex: none; display: grid; place-items: center; background: var(--accent); font-weight: 600; font-size: 13px; }
.cap-quote .who { font-weight: 600; } .cap-quote .role { color: var(--slate); }

/* ---------- FAQ ---------- */
.cap-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.cap-faq-list { border-top: 1px solid var(--ink); }
.cap-faq details { border-bottom: 1px solid var(--ink); }
.cap-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 18px; font-weight: 600; font-variation-settings: "MONO" 50; }
.cap-faq summary::-webkit-details-marker { display: none; }
.cap-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ink); font-weight: 400; transition: background .2s; }
.cap-faq details[open] summary::after { content: "–"; background: var(--accent); }
.cap-faq details p { margin: 0 0 24px; max-width: 640px; }

/* ---------- Related ---------- */
.cap-related { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); background: var(--white, #fff); }
.cap-rel-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-right: 1px solid var(--ink); transition: background .2s; }
.cap-rel-card:last-child { border-right: 0; }
.cap-rel-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--ink); overflow: hidden; }
.cap-rel-art img { width: 62%; height: 80%; object-fit: contain; transition: transform .4s; }
.cap-rel-card:hover .cap-rel-art img { transform: scale(1.06) translateY(-2%); }
.cap-rel-badge { position: absolute; top: 0; right: 0; padding: 4px 10px; background: #2b00ff; color: #fff; font-size: 13px; z-index: 1; }
.cap-rel-body { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 32px; flex: 1; background: var(--canvas, #f0f0f0); }
.cap-rel-card:hover .cap-rel-body { background: #fff; }
.cap-related .name { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; font-variation-settings: "MONO" 50; letter-spacing: -.01em; line-height: 1.25; }
.cap-related .blurb { color: var(--slate); font-size: 16px; line-height: 1.5; }
.cap-rel-more { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; padding: 8px 18px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; transition: background .2s; }
.cap-rel-card:hover .cap-rel-more { background: var(--accent); }
.cap-rel-body .cap-label { font-size: 11px; opacity: .7; }

/* ---------- CTA + colour-block mosaic ---------- */
.cap-cta { text-align: center; padding-block: clamp(80px, 10vw, 128px) 0; }
.cap-cta .cap-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cap-cta .cap-btns { justify-content: center; margin-top: 8px; }
.cap-mosaic { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: clamp(14px, 2.2vw, 30px); margin-top: clamp(64px, 8vw, 104px); }
.cap-mosaic i { display: block; }

/* ---------- Hub ---------- */
.cap-hub-group + .cap-hub-group { margin-top: clamp(48px, 6vw, 72px); }
.cap-hub-group > .cap-label { margin-bottom: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .cap-logos .cap-wrap { flex-wrap: wrap; justify-content: center; }
  .cap-hero-grid, .cap-feature-top, .cap-code, .cap-faq { grid-template-columns: 1fr; }
  .cap-hero-art { max-width: 560px; }
  .cap-steps { grid-template-columns: repeat(2, 1fr); }
  .cap-step:nth-child(3) { border-left: 0; }
  .cap-step:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .cap-step:nth-child(3)::before { display: none; }
  .cap-quotes-track { grid-auto-columns: 70%; }
  .cap-related { grid-template-columns: 1fr; }
  .cap-rel-card { border-right: 0; border-bottom: 1px solid var(--ink); }
  .cap-rel-card:last-child { border-bottom: 0; }
}
@media (max-width: 767px) {
  .cap-proof { grid-template-columns: 1fr; }
  .cap-proof a + a { border-left: 0; border-top: 1px solid var(--ink); }
  /* Phone: header stays as a two-part legend; each row stacks, the problem above the answer. */
  .cap-compare-row:not(.is-head) { grid-template-columns: 1fr; }
  .cap-compare-row > div { padding: 14px 16px; gap: 10px; font-size: 15px; line-height: 1.45; }
  .cap-compare-row:not(.is-head) > div:first-child { padding-bottom: 10px; font-size: 14px; }
  .cap-compare-row:not(.is-head) > div + div { border-left: 0; padding-top: 12px; }
  .cap-compare-row.is-head > div { padding: 10px 12px; font-size: 10px; }
  .cap-compare-row + .cap-compare-row { border-top: 1px solid var(--ink); }
  .cap-compare .cap-mark { width: 16px; height: 16px; margin-top: 2px; }
  .cap-cells, .cap-cases { grid-template-columns: 1fr; }
  .cap-cell:nth-child(odd) { border-right: 0; }
  .cap-cell:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .cap-steps { grid-template-columns: 1fr; }
  .cap-step + .cap-step { border-left: 0; border-top: 1px solid var(--ink); }
  .cap-step + .cap-step::before { display: none; }
  .cap-takeaway-bar { flex-direction: column; align-items: flex-start; }
  .cap-quotes-track { grid-auto-columns: 88%; }
  .cap-logos .cap-wrap { justify-content: center; }
  .cap-logos .cap-label { width: 100%; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-hero-art img { animation: none; }
}

/* A single hero stat sits as a compact card rather than a full-width bar */
.cap-proof[style*="--n: 1;"] { max-width: 460px; }

/* ---------- Token savings calculator (section type: calculator) ---------- */
.tsc2 { display: flex; flex-direction: column; gap: 28px; }
.tsc2-panel { background: var(--white); border: 1px solid var(--ink); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.tsc2-step { display: flex; align-items: center; gap: 14px; }
.tsc2-step .cap-step-num { margin: 0; }
.tsc2-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tsc2-chips button, .tsc2-mini-chips button { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--ink); background: var(--white); color: var(--ink); padding: 10px 18px; font-size: 15px; font-weight: 500; transition: transform .15s, box-shadow .15s, background .15s; }
.tsc2-chips.is-small button { padding: 7px 13px; font-size: 13px; }
.tsc2-chips button:hover, .tsc2-mini-chips button:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--ink); }
.tsc2-chips button[aria-checked="true"], .tsc2-mini-chips button[aria-pressed="true"] { background: var(--accent); box-shadow: 3px 3px 0 var(--ink); transform: translate(-2px, -2px); }
.tsc2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tsc2-grid.is-assume { margin: 18px 0; }
.tsc2-field { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--slate); }
.tsc2-field b { color: var(--ink); font-variation-settings: "MONO" 100; }
.tsc2-field input[type=number], .tsc2-field select { font: inherit; padding: 9px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.tsc2 input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--paper); border: 1px solid var(--ink); }
.tsc2 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--accent); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: grab; }
.tsc2 input[type=range]::-moz-range-thumb { width: 22px; height: 22px; background: var(--accent); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: grab; border-radius: 0; }
.tsc2-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tsc2-mini-chips button { padding: 6px 10px; font-size: 13px; }
.tsc2-pills { display: flex; gap: 14px; flex-wrap: wrap; }
.tsc2-pills > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--paper); border: 1px dashed var(--ink); }
.tsc2-pills b { font-size: 22px; font-variation-settings: "MONO" 50; }
.tsc2-q { margin: 0; padding: 20px 22px; background: var(--paper); border-left: 4px solid var(--accent); font-size: 17px; line-height: 1.6; }
.tsc2-race { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); }
.tsc2-lane { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.tsc2-lane.is-agent { background: color-mix(in srgb, var(--pink) 22%, var(--white)); }
.tsc2-lane.is-px { background: color-mix(in srgb, var(--green) 22%, var(--white)); border-left: 1px solid var(--ink); }
.tsc2-big { font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.03em; font-variation-settings: "MONO" 50; line-height: 1; }
.tsc2-stream { min-height: 22px; font-size: 13px; color: var(--ink); }
.tsc2-stream.is-ok { color: #0a7a4b; }
.tsc2-lane.is-hit { animation: tsc2-hit .5s ease; }
@keyframes tsc2-hit { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.tsc2-chart { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--ink); }
.tsc2-chart .ax { stroke: var(--ink); stroke-width: 1; }
.tsc2-chart .ln { fill: none; stroke-width: 4; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1); }
.tsc2-chart .ln.is-agent { stroke: var(--pink); }
.tsc2-chart .ln.is-px { stroke: #0a9d5f; }
.tsc2-chart .be { stroke: var(--ink); stroke-dasharray: 4 4; }
.tsc2-chart .be-t, .tsc2-chart .t { font-size: 12px; fill: var(--slate); font-family: ui-monospace, Menlo, monospace; }
.tsc2-ask { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tsc2-save { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(28px, 4vw, 48px); background: var(--accent); border: 1px solid var(--ink); box-shadow: var(--shadow-lg); }
.tsc2-save-num { font-size: clamp(64px, 10vw, 128px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variation-settings: "MONO" 50; }
.tsc2-save .cap-lead { color: var(--ink); }
.tsc2-ticker { font-size: 13px; background: var(--white); border: 1px solid var(--ink); padding: 8px 14px; }
.tsc2-assume summary { cursor: pointer; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
@media (max-width: 767px) {
  .tsc2-grid, .tsc2-race { grid-template-columns: 1fr; }
  .tsc2-lane.is-px { border-left: 0; border-top: 1px solid var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .tsc2-chart .ln { transition: none; } .tsc2-lane.is-hit { animation: none; } }

/* Side-by-side: without vs with Prometheux */
.tsc2-step.is-out { margin-top: 8px; }
.tsc2-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.tsc2-col { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--ink); box-shadow: var(--shadow); }
.tsc2-col.is-agent { background: color-mix(in srgb, var(--pink) 18%, var(--white)); }
.tsc2-col.is-px { background: color-mix(in srgb, var(--green) 18%, var(--white)); }
.tsc2-col-tag { align-self: flex-start; padding: 6px 12px; background: var(--ink); color: var(--white); }
.tsc2-col.is-px .tsc2-col-tag { background: #0a7a4b; }
.tsc2-flow { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--slate); }
.tsc2-flow b { color: var(--ink); }
.tsc2-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border: 1px solid var(--ink); background: var(--white); }
.tsc2-nums > div { padding: 12px 14px; } .tsc2-nums > div + div { border-left: 1px solid var(--ink); }
.tsc2-nums dt { font-size: 12px; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; font-variation-settings: "MONO" 100; }
.tsc2-nums dd { margin: 4px 0 0; font-size: 22px; font-weight: 600; font-variation-settings: "MONO" 50; }
.tsc2-bill { height: 18px; background: var(--white); border: 1px solid var(--ink); }
.tsc2-bill-fill { height: 100%; width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.tsc2-col.is-agent .tsc2-bill-fill { background: var(--pink); }
.tsc2-col.is-px .tsc2-bill-fill { background: var(--green); }
.tsc2-total { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.tsc2-col.is-hit { animation: tsc2-hit .5s ease; }
.tsc2-col.is-ok-pulse { animation: tsc2-ok .6s ease; }
@keyframes tsc2-ok { 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 50%, transparent), var(--shadow); } }
@media (max-width: 767px) { .tsc2-vs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tsc2-bill-fill { transition: none; } .tsc2-col.is-hit, .tsc2-col.is-ok-pulse { animation: none; } }
.tsc2-col > .cap-h3 { min-height: 2.6em; }

/* Calculator chats: agent vs Prometheux, with token meters */
.tsc2-step.is-out { flex-wrap: wrap; }
.tsc2-replay { margin-left: auto; }
.tsc2-sim { display: grid; grid-template-columns: 1fr 64px; gap: 12px; }
.tsc2-chat { background: #1b1a1a; color: #e9e7e3; border: 1px solid var(--ink); display: flex; flex-direction: column; min-width: 0; }
.tsc2-chat-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #3a3838; font-size: 11px; color: #9b9895; font-family: ui-monospace, Menlo, monospace; }
.tsc2-chat-bar i { width: 9px; height: 9px; border-radius: 50%; background: #4a4747; }
.tsc2-chat-bar i:nth-child(1) { background: var(--orange); } .tsc2-chat-bar i:nth-child(2) { background: var(--yellow); } .tsc2-chat-bar i:nth-child(3) { background: var(--green); }
.tsc2-chat-bar span { margin-left: 6px; }
.tsc2-chat-body { height: 380px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; scroll-behavior: smooth; scrollbar-width: thin; }
.tsc2-msg { max-width: 88%; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; animation: tsc2-in .3s ease both; }
.tsc2-msg.is-user { align-self: flex-end; background: #fff; color: var(--ink); border-radius: 12px 12px 2px 12px; }
.tsc2-msg.is-bot { align-self: flex-start; background: var(--green); color: var(--ink); border-radius: 12px 12px 12px 2px; }
.tsc2-msg.is-bot.is-unsure { background: var(--pink); }
.tsc2-lineage { display: block; margin-top: 6px; font-size: 11px; font-family: ui-monospace, Menlo, monospace; opacity: .8; }
.tsc2-log { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #b9b6b2; animation: tsc2-in .25s ease both; }
.tsc2-log b { color: #fff; font-weight: 600; }
.tsc2-log.is-bad { color: #ff8f8f; } .tsc2-log.is-good { color: #7ff0bd; }
.tsc2-code { margin: 0; padding: 10px 12px; background: #0f0f0f; border: 1px solid #3a3838; font: 11.5px/1.6 ui-monospace, Menlo, monospace; color: var(--yellow); white-space: pre-wrap; word-break: break-word; }
@keyframes tsc2-in { from { opacity: 0; transform: translateY(6px); } }
.tsc2-graph-wrap { background: #0f0f0f; border: 1px solid #3a3838; padding: 6px; }
.tsc2-graph { width: 100%; height: auto; display: block; }
.tsc2-graph .e { stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 120; stroke-dashoffset: 120; }
.tsc2-graph .e2 { stroke: var(--sky); }
.tsc2-graph .nd { opacity: 0; }
.tsc2-graph .nd rect { fill: #1b1a1a; stroke: var(--green); }
.tsc2-graph .nd.root rect { fill: var(--green); stroke: var(--green); }
.tsc2-graph .nd.n2 rect { stroke: var(--sky); }
.tsc2-graph text { font: 9px ui-monospace, Menlo, monospace; fill: #e9e7e3; text-anchor: middle; }
.tsc2-graph .nd.root text { fill: var(--ink); font-weight: 600; }
.tsc2-graph-wrap.is-on .nd { animation: tsc2-pop .35s ease forwards; animation-delay: var(--d, 0s); }
.tsc2-graph-wrap.is-on .e { animation: tsc2-draw .5s ease forwards; animation-delay: calc(var(--d, 0s) + .15s); }
@keyframes tsc2-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tsc2-draw { to { stroke-dashoffset: 0; } }
.tsc2-meter { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--slate); text-align: center; }
.tsc2-meter-track { flex: 1; width: 26px; min-height: 240px; border: 1px solid var(--ink); background: var(--white); display: flex; align-items: flex-end; }
.tsc2-meter-fill { width: 100%; height: 0; transition: height .45s ease; }
.tsc2-col.is-agent .tsc2-meter-fill { background: var(--pink); }
.tsc2-col.is-px .tsc2-meter-fill { background: var(--green); }
.tsc2-meter b { font-size: 13px; color: var(--ink); font-variation-settings: "MONO" 100; }
.tsc2-note { font-size: 13px; }
.tsc2-tally { text-align: center; min-height: 1.5em; }
.tsc2-tally b { color: var(--ink); }
@media (max-width: 767px) { .tsc2-sim { grid-template-columns: 1fr 52px; } .tsc2-chat-body { height: 340px; } .tsc2-replay { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .tsc2-graph .nd { opacity: 1; } .tsc2-graph .e { stroke-dashoffset: 0; } .tsc2-msg, .tsc2-log { animation: none; } }
.tsc2-chat-body > * { flex-shrink: 0; }

/* Compact calculator layout */
#calculator .cap-head { margin-bottom: 28px; }
.tsc2 { gap: 18px; }
.tsc2-panel.is-compact { padding: 18px 22px; gap: 14px; box-shadow: var(--shadow); }
.tsc2-panel.is-compact .tsc2-chips button { padding: 7px 13px; font-size: 13px; }
.tsc2-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: end; }
.tsc2-controls .tsc2-field { font-size: 12px; gap: 8px; }
.tsc2-controls select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--ink); background: var(--white); width: 100%; }
.tsc2-meta { margin: 0; font-size: 13px; }
.tsc2-foot { white-space: nowrap; color: var(--ink); }
.tsc2-vs { gap: 16px; }
.tsc2-col { padding: 16px; gap: 12px; }
.tsc2-col-tag { padding: 4px 10px; }
.tsc2-sim { grid-template-columns: 1fr 48px; gap: 10px; }
.tsc2-chat-body { height: 270px; padding: 10px; gap: 7px; }
.tsc2-msg { font-size: 12.5px; padding: 7px 10px; }
.tsc2-log { font-size: 11px; }
.tsc2-code { font-size: 10.5px; padding: 8px 10px; }
.tsc2-meter-track { min-height: 180px; width: 20px; }
.tsc2-meter { font-size: 10px; }
.tsc2-meter b { font-size: 11px; }
.tsc2-nums { grid-template-columns: repeat(3, 1fr); }
.tsc2-nums > div { padding: 8px 10px; }
.tsc2-nums dt { font-size: 10px; }
.tsc2-nums dd { font-size: 17px; margin-top: 2px; }
.tsc2-col.is-agent .tsc2-nums dd:last-child, .tsc2-col.is-px .tsc2-nums dd:last-child { font-size: 20px; }
.tsc2-note { font-size: 12px; color: var(--slate); }
.tsc2-save { flex-direction: row; text-align: left; align-items: center; gap: 22px; padding: 16px 22px; box-shadow: var(--shadow); }
.tsc2-save-num { font-size: clamp(40px, 5vw, 60px); flex: none; }
.tsc2-save-copy { flex: 1; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.tsc2-save .tsc2-ticker { align-self: flex-start; font-size: 11px; padding: 4px 10px; }
.tsc2-save-btns { display: flex; gap: 10px; flex: none; }
.tsc2-save-btns .cap-btn-outline { cursor: pointer; font-family: inherit; }
.tsc2-tally { margin: -6px 0 0; font-size: 13px; }
@media (max-width: 991px) {
  .tsc2-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tsc2-save { flex-direction: column; text-align: center; align-items: center; }
  .tsc2-save .tsc2-ticker { align-self: center; }
}
@media (max-width: 767px) { .tsc2-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tsc2-fine { margin: 0; font-size: 12px; color: var(--slate); text-align: center; }
/* An odd last cell spans the full row */
.cap-cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }

/* ─── Hero product mockups (capabilities/mocks/*.html, driven by _runner.js) ─── */
.cap-hero-art { container-type: inline-size; }
.pxm { position: relative; z-index: 1; width: 90%; min-width: 0; max-width: 90%; font-size: clamp(9px, 2.85cqi, 14px); line-height: 1.35; }
.pxm-win { background: var(--white, #fff); border: 1px solid var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.pxm-bar { display: flex; align-items: center; gap: .4em; padding: .55em .8em; border-bottom: 1px solid var(--ink); background: #f3f3f8; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .85em; }
.pxm-bar i { width: .7em; height: .7em; border-radius: 50%; border: 1px solid var(--ink); }
.pxm-bar i:nth-child(1) { background: var(--orange); } .pxm-bar i:nth-child(2) { background: var(--yellow); } .pxm-bar i:nth-child(3) { background: var(--green); }
.pxm-bar span { margin-left: .5em; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxm [data-t] { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.pxm [data-t].on { opacity: 1; transform: none; }
.pxm-foot { margin: 0 .9em .9em; padding: .45em .7em; background: var(--ink); color: #fff; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .85em; text-align: center; }
.pxm code { font-family: inherit; }
/* cost */
.pxm-ask { margin: .9em .9em .6em; padding: .55em .8em; border: 1px solid var(--ink); border-radius: 1em 1em 1em .2em; background: var(--yellow); width: max-content; max-width: 90%; font-weight: 500; }
.pxm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; padding: 0 .9em .8em; }
.pxm-col { border: 1px solid var(--ink); padding: .6em; display: flex; flex-direction: column; gap: .35em; }
.pxm-h { font-weight: 600; font-size: .95em; }
.pxm-step { font-size: .9em; padding-left: .8em; position: relative; }
.pxm-step::before { content: "▸"; position: absolute; left: 0; opacity: .5; }
.pxm-step.is-err { color: #c62828; font-weight: 600; } .pxm-step.is-err::before, .pxm-step.is-ok::before { content: ""; }
.pxm-step.is-ok { color: #00804a; font-weight: 600; }
.pxm-step code { background: #eef6ff; border: 1px solid #b9d4ff; padding: 0 .25em; }
.pxm-meter { margin-top: auto; height: .7em; border: 1px solid var(--ink); background: #f3f3f8; }
.pxm-meter .fill { display: block; height: 100%; width: 0; opacity: 1; transform: none; transition: width 3.4s cubic-bezier(.3,.1,.3,1); }
.pxm-col.is-bad .fill { background: var(--orange); } .pxm-col.is-good .fill { background: var(--green); transition-duration: 1.2s; }
.pxm-col.is-bad .fill.on { width: 100%; } .pxm-col.is-good .fill.on { width: 4%; }
.pxm-num { font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .9em; }
.pxm-num span { font-size: 1.5em; font-weight: 600; }
.pxm-col.is-bad .pxm-num span { opacity: 1; transform: none; }
/* graph */
.pxm-svg { display: block; width: 100%; height: auto; padding: 0; overflow: visible; }
.pxm-svg path { fill: none; stroke: var(--ink); stroke-width: 1.6; marker-end: url(#pxa); }
.pxm-svg .d1 path { stroke: var(--sky); stroke-dasharray: 5 4; } .pxm-svg .d2 path { stroke: #e04fc0; stroke-dasharray: 5 4; }
.pxm-svg g[data-t] { transform: none; }
.pxm-svg .d1.on path, .pxm-svg .d2.on path { animation: pxm-draw 1.2s ease-out both; }
@keyframes pxm-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.pxm-svg .n circle { r: 18px; fill: #fff; stroke: var(--ink); stroke-width: 1.5; transition: fill .4s; }
.pxm-svg .n text { font: 600 9px Roobert, ui-monospace, monospace; text-anchor: middle; fill: var(--ink); }
.pxm-svg .n[data-t] { opacity: 1; }
.pxm-svg .n.hit.on circle { fill: var(--orange); } .pxm-svg .n.hit2.on circle { fill: var(--pink); }
.pxm-iters { display: flex; flex-wrap: wrap; gap: .35em; padding: .3em .9em .5em; }
.pxm-chip { font-size: .8em; padding: .2em .55em; border: 1px solid var(--ink); background: #fff; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; }
.pxm-chip.c1.on { background: #d8e7ff; } .pxm-chip.c2.on { background: #ffd6f4; } .pxm-chip.c3.on { background: var(--green); }
.pxm-code { margin: 0 .9em .6em; padding: .45em .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #f3f3f8; border: 1px solid #d6d6e2; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .78em; }
/* agent terminal */
.pxm-win.is-term { background: #18181b; color: #e9e9ee; }
.pxm-win.is-term .pxm-bar { background: #26262b; color: #e9e9ee; border-color: #000; }
.pxm-term { padding: .9em 1em 1.1em; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .84em; display: flex; flex-direction: column; gap: .3em; min-height: 19em; white-space: pre; overflow: hidden; }
.pxm-term .u { color: var(--yellow); } .pxm-term .c { color: #7fb2ff; } .pxm-term .c em { color: #b9b9c6; font-style: normal; }
.pxm-term .r { color: #a9a9b6; } .pxm-term .a { color: var(--green); font-weight: 600; } .pxm-term .m { color: #ff9fe9; }
.pxm-term .cur i { display: inline-block; width: .55em; height: 1em; vertical-align: -.15em; background: #e9e9ee; animation: pxm-blink 1s steps(1) infinite; }
@keyframes pxm-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pxm [data-t] { transition: none; } }
.cap-hero-art:has(.pxm) { aspect-ratio: auto; min-height: 0; padding: 7% 0; }
.pxm .pxm-svg { box-sizing: border-box; }

/* Mockup stills inside related cards */
.cap-rel-art { container-type: inline-size; }
.pxm-still { width: 74%; max-width: 74%; font-size: 2.1cqi; pointer-events: none; transition: transform .4s; }
.cap-rel-card:hover .pxm-still { transform: scale(1.04) translateY(-2%); }
.pxm-still [data-t] { opacity: 1; transform: none; }
.pxm-still .pxm-col.is-bad .fill { width: 100%; } .pxm-still .pxm-col.is-good .fill { width: 4%; }
.pxm-still .n.hit circle { fill: var(--orange); } .pxm-still .n.hit2 circle { fill: var(--pink); }
.pxm-still .pxm-chip.c1 { background: #d8e7ff; } .pxm-still .pxm-chip.c2 { background: #ffd6f4; } .pxm-still .pxm-chip.c3 { background: var(--green); }
.pxm-still .pxm-term { min-height: 0; }
.pxm-still .pxm-term .cur { display: none; }
.cap-rel-art:has(.pxm-still) { place-items: start center; }
.cap-rel-art .pxm-still { width: 80%; max-width: 80%; margin-top: 7%; font-size: 2.3cqi; }

/* rules */
.pxm-note { margin: .9em .9em .5em; padding: .6em .8em; background: var(--yellow); border: 1px solid var(--ink); line-height: 1.4; }
.pxm-note span { display: block; font-size: .75em; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-bottom: .2em; }
.pxm-arrow { margin: 0 .9em .4em; font-size: .8em; opacity: .7; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; }
.pxm-codebox { margin: 0 .9em .6em; padding: .55em .7em; background: #18181b; color: #e9e9ee; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .8em; line-height: 1.55; overflow: hidden; }
.pxm-codebox div { padding-left: 1.4em; text-indent: -1.4em; }
.pxm-codebox b { color: #7fb2ff; font-weight: 600; } .pxm-codebox i { color: #ff9fe9; font-style: normal; }
.pxm-run { margin: 0 .9em .5em; display: inline-block; padding: .3em .8em; background: var(--green); border: 1px solid var(--ink); font-weight: 600; font-size: .85em; }
.pxm-table { width: calc(100% - 1.8em); margin: 0 .9em .7em; border-collapse: collapse; font-size: .85em; }
.pxm-table th { text-align: left; font-weight: 500; opacity: .6; border-bottom: 1px solid var(--ink); padding: .2em .4em; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .9em; }
.pxm-table td { padding: .3em .4em; border-bottom: 1px solid #e3e3ea; }
/* lineage */
.pxm-result { margin: .9em .9em .3em; display: flex; justify-content: space-between; align-items: center; padding: .6em .8em; border: 1px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.pxm-result span { background: var(--orange); border: 1px solid var(--ink); padding: .1em .5em; font-size: .8em; font-weight: 600; }
.pxm-why { margin: .2em .9em .3em 1.6em; font-size: .8em; opacity: .65; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; }
.pxm-chain { margin: 0 .9em .7em 1.6em; border-left: 2px solid var(--ink); padding-left: .9em; display: flex; flex-direction: column; gap: .35em; }
.pxm-link { position: relative; display: grid; grid-template-columns: 4.2em 1fr; column-gap: .5em; font-size: .85em; line-height: 1.3; }
.pxm-link::before { content: ""; position: absolute; left: -1.33em; top: .35em; width: .7em; height: .7em; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; }
.pxm-link.is-rule::before { background: var(--sky); } .pxm-link.is-row::before { background: var(--green); }
.pxm-link em { font-style: normal; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; opacity: .6; grid-row: span 2; padding-top: .15em; }
.pxm-link b { font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-weight: 600; }
.pxm-link span { opacity: .75; }
/* pipeline */
.pxm-flow { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 1.2em; padding: .9em; align-items: center; }
.pxm-lane { display: flex; flex-direction: column; gap: .5em; position: relative; }
.pxm-node { position: relative; padding: .45em .6em; border: 1px solid var(--ink); background: #fff; font-size: .8em; display: flex; justify-content: space-between; align-items: center; gap: .4em; }
.pxm-node.is-src { background: #f3f3f8; }
.pxm-node.is-step { background: #eef6ff; } .pxm-node.is-out { background: var(--yellow); font-weight: 600; }
.pxm-node code { font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; }
.pxm-node .ok { color: #00804a; font-weight: 700; }
.pxm-lane.is-mid::before, .pxm-lane.is-mid::after { content: "→"; position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.2em; }
.pxm-lane.is-mid::before { left: -1.05em; } .pxm-lane.is-mid::after { right: -1.05em; }
/* deploy */
.pxm-pkg { margin: .9em auto .6em; width: max-content; padding: .4em .9em; border: 1px solid var(--ink); background: var(--yellow); font-size: .9em; box-shadow: 3px 3px 0 var(--ink); }
.pxm-pkg code { font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-weight: 600; }
.pxm-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; padding: 0 .9em .8em; }
.pxm-zone { border: 1px dashed var(--ink); padding: .55em; display: flex; flex-direction: column; gap: .3em; font-size: .82em; text-align: center; }
.pxm-zone b { font-size: 1.05em; } .pxm-zone > span { opacity: .65; font-size: .9em; }
.pxm-db { margin: .2em auto; padding: .35em .5em; border: 1px solid var(--ink); border-radius: 50% / 22%; background: #eef6ff; width: 80%; }
.pxm-res { color: #00804a; font-weight: 600; }
/* entity */
.pxm-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; padding: .9em .9em .3em; }
.pxm-rec { border: 1px solid var(--ink); padding: .5em; display: flex; flex-direction: column; gap: .15em; font-size: .8em; background: #fff; }
.pxm-rec em { font-style: normal; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.pxm-rec span { opacity: .7; font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; font-size: .9em; }
.pxm-merge { margin: .3em .9em; text-align: center; font-size: .8em; opacity: .75; }
.pxm-ent { margin: .3em auto .7em; width: 70%; padding: .6em .8em; border: 1px solid var(--ink); background: var(--green); box-shadow: 3px 3px 0 var(--ink); display: flex; flex-direction: column; text-align: center; }
.pxm-ent span { font-size: .8em; opacity: .75; }
/* supply */
.pxm-svg .n rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; transition: fill .4s; }
.pxm-supply .pxm-svg path { marker-end: url(#pxs); }
.pxm-svg .n.hit.on rect, .pxm-still .n.hit rect { fill: var(--orange); }
.pxm-tiers text { font: 9px Roobert, ui-monospace, monospace; text-anchor: middle; fill: #5c5b5b; }

/* Architecture section */
.cap-arch { display: flex; flex-direction: column; gap: 10px; max-width: 1080px; margin: 0 auto; }
.cap-arch-layer { border: 1px solid var(--ink); background: var(--white, #fff); box-shadow: var(--shadow); padding: 18px 22px; }
.cap-arch-layer.is-engine { background: var(--accent); box-shadow: var(--shadow-lg); padding: 24px 22px; }
.cap-arch-layer.is-src { background: color-mix(in srgb, var(--accent-2) 22%, var(--white, #fff)); }
.cap-arch-h { margin-bottom: 12px; font-size: 12px; }
.cap-arch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-arch-chips span { border: 1px solid var(--ink); background: var(--white, #fff); padding: 7px 12px; font-size: 14px; line-height: 1.35; }
.cap-arch-layer.is-engine .cap-arch-chips span { font-weight: 500; }
.cap-arch-arrow { text-align: center; font-size: 12px; color: var(--slate); font-family: Roobert, ui-monospace, monospace; font-variation-settings: "MONO" 100; }
.cap-arch-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 0; }
.cap-arch-run .cap-label { margin-right: 6px; }
.cap-arch-run b { font-weight: 500; font-size: 14px; border: 1px dashed var(--ink); padding: 6px 12px; }
@media (max-width: 767px) { .cap-arch-layer { padding: 14px; } .cap-arch-chips span { font-size: 13px; padding: 6px 9px; } }

/* alarms mock */
.pxm-storm { display: flex; justify-content: space-between; align-items: baseline; margin: .9em .9em .4em; padding: .55em .8em; border: 1px solid var(--ink); background: #fff2ec; }
.pxm-storm b { font-size: 1.6em; font-variation-settings: "MONO" 50; color: #c62828; }
.pxm-alerts { margin: 0 .9em .5em; display: grid; grid-template-columns: repeat(12, 1fr); gap: .25em; }
.pxm-alerts i { height: .7em; background: var(--orange); border: 1px solid var(--ink); opacity: .9; }
.pxm-alerts.on i { background: #e3e3ea; opacity: .5; transition: background .6s, opacity .6s; }
.pxm-alerts.on i.root { background: #c62828; opacity: 1; }
.pxm-cause { margin: .2em .9em .5em; padding: .6em .8em; border: 1px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.pxm-cause span { display: block; font-size: .8em; opacity: .75; }
.pxm-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: 0 .9em .6em; }
.pxm-impact div { border: 1px solid var(--ink); padding: .4em .5em; font-size: .8em; background: #fff; }
.pxm-impact b { display: block; font-size: 1.35em; }
/* network ontology mock */
.pxm-onto path { marker-end: none; stroke: #9a9aa6; stroke-width: 1.2; }
.pxm-onto .el { font: 6.5px Roobert, ui-monospace, monospace; fill: #6a6a75; text-anchor: start; }
.pxm-onto .n text { font: 600 7.5px Roobert, ui-monospace, monospace; }
.pxm-onto .n rect { fill: #fff; stroke: var(--ink); stroke-width: 1.2; transition: fill .4s; }
.pxm-onto .n.hit rect { fill: #ff7a7a; }
.pxm-onto .n.hit2.on rect, .pxm-still .pxm-onto .n.hit2 rect { fill: var(--orange); }
.pxm-onto g[data-t] { opacity: 1; transform: none; }
.pxm-netontology .pxm-result span { background: var(--pink); }
.pxm-onto .el.is-mid { text-anchor: middle; }
.pxm-onto .n.hit rect, .pxm-onto .n.hit.on rect, .pxm-still .pxm-onto .n.hit rect { fill: #ff7a7a; }
.pxm-onto .pxm-loop path { fill: none; stroke: #e04fc0; stroke-width: 1.6; stroke-dasharray: 4 3; marker-end: none; }
.pxm-onto .pxm-loop.on path { animation: pxm-spin 1.2s linear infinite; }
@keyframes pxm-spin { to { stroke-dashoffset: -14; } }
.pxm-onto .pxm-loop .el { fill: #b8329a; font-weight: 600; }
.pxm-chip.pxm-rec { border-color: #e04fc0; color: #b8329a; font-weight: 600; }
.pxm-still .pxm-loop path { animation: none; }
.pxm-onto .pxm-loop .el { font-size: 8.5px; }

/* Use case menu (tabs per theme) */
.cap-um { border: 1px solid var(--ink); background: var(--white, #fff); box-shadow: var(--shadow-lg); }
.cap-um-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ink); background: var(--paper, #f6f6f6); overflow: hidden; }
.cap-um-tabs > .cap-um-tab { flex: 1 1 auto; margin-right: -1px; margin-bottom: -1px; border-bottom: 1px solid var(--ink); }
.cap-um-tab { font: inherit; font-size: 15px; font-weight: 500; padding: 16px 22px; border: 0; border-right: 1px solid var(--ink); background: transparent; cursor: pointer; position: relative; color: var(--ink); }
.cap-um-tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); opacity: .35; }
.cap-um-tab.on { background: color-mix(in srgb, var(--c) 22%, var(--white, #fff)); }
.cap-um-tab.on::before { opacity: 1; }
.cap-um-panel { padding: clamp(22px, 3vw, 36px); }
.cap-um.js .cap-um-panel { display: none; } .cap-um.js .cap-um-panel.on { display: block; }
.cap-um.js .cap-um-h { display: none; }
.cap-um-h { font-size: 22px; margin: 0 0 12px; }
.cap-um-lead { max-width: 70ch; margin: 0 0 20px; }
.cap-um-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.cap-um-item { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line); }
.cap-um-item:nth-child(even) { padding-left: 24px; padding-right: 0; }
.cap-um-item:nth-child(odd) { border-right: 1px solid var(--line); }
.cap-um-top { display: flex; align-items: flex-start; gap: 12px; }
.cap-um-n { flex: none; display: grid; place-items: center; min-width: 30px; height: 22px; padding: 0 4px; background: var(--c); border: 1px solid var(--ink); font-family: Roobert, ui-monospace, "SF Mono", Menlo, monospace; font-variation-settings: "MONO" 100; font-size: 11px; line-height: 1; color: var(--ink); }
.cap-um-item b { font-weight: 600; font-size: 17px; line-height: 1.3; }
.cap-um-item > span { color: var(--slate); font-size: 15px; line-height: 1.55; padding-left: 42px; }
.cap-um-cap { align-self: flex-start; margin-left: 42px; margin-top: 4px; font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.cap-um-cap:hover { border-bottom-color: var(--c); }
@media (max-width: 767px) {
  .cap-um-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cap-um-tabs > .cap-um-tab { flex: none; padding: 14px 16px; font-size: 14px; }
  .cap-um-grid { grid-template-columns: 1fr; }
  .cap-um-item:nth-child(odd) { border-right: 0; }
  .cap-um-item, .cap-um-item:nth-child(even) { padding: 18px 0; }
  .cap-um-item > span { padding-left: 0; }
  .cap-um-cap { margin-left: 0; }
}

/* Hub pages: simple list, no images */
.cap-hub-group + .cap-hub-group { margin-top: 48px; }
.cap-hub-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); margin-top: 16px; }
.cap-hub-list a { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 44px 20px 22px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--white, #fff); text-decoration: none; color: inherit; transition: background .2s; }
.cap-hub-list a:hover { background: color-mix(in srgb, var(--accent) 30%, var(--white, #fff)); }
.cap-hub-list .name { font-size: 18px; font-weight: 600; font-variation-settings: "MONO" 50; letter-spacing: -.01em; }
.cap-hub-list .blurb { font-size: 14px; color: var(--slate); line-height: 1.45; }
.cap-hub-list .arrow { position: absolute; right: 18px; top: 20px; font-size: 18px; }
@media (max-width: 991px) { .cap-hub-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cap-hub-list { grid-template-columns: 1fr; } }