/* Shared editorial design system for the worldcoingrant essays */

:root {
  color-scheme: light;
  /* Warm stone canvas, paper insets, and lifted cards create a readable depth hierarchy. */
  --canvas: #edeae4;
  --bg: #f7f5ef;
  --surface: #fffdf9;
  --ink: #23262e;
  --ink-soft: #3a3f4a;
  --muted: #5c6470;
  --faint: #6c7078;
  --line: #eae4d9;
  --line-strong: #ddd6ca;
  --accent: #5a4bd6;
  --accent-soft: #ece9fc;
  --accent-ink: #3a2fa0;
  --good: #0f9b70;
  --good-soft: #e2f5ed;
  --good-ink: #0b7a58;
  --bad: #d4523c;
  --bad-soft: #fbe8e2;
  --bad-ink: #b83f2b;
  /* Three-part reading rhythm: eucalyptus, iris, and honey on warm paper. */
  --triad-mint: color-mix(in srgb, #e2f5ed 72%, var(--surface));
  --triad-mint-border: color-mix(in srgb, #0f9b70 24%, var(--line));
  --triad-lavender: color-mix(in srgb, #ece9fc 74%, var(--surface));
  --triad-lavender-border: color-mix(in srgb, #5a4bd6 22%, var(--line));
  --triad-amber: color-mix(in srgb, #fff1d8 72%, var(--surface));
  --triad-amber-border: color-mix(in srgb, #b56c12 22%, var(--line));
  --shadow: 0 1px 2px rgba(46, 40, 30, .05), 0 12px 30px -14px rgba(46, 40, 30, .14);
  --shadow-lg: 0 2px 6px rgba(46, 40, 30, .06), 0 26px 54px -24px rgba(46, 40, 30, .22);
  --radius: 16px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --maxw: 44rem;
  --half-maxw: 22rem;

  /* Canonical product palettes sampled from the approved brand artwork. */
  --dt-canvas: #f5eee8;
  --dt-surface: #fff9f2;
  /* Ivory-to-stone material sampled from the approved full DemoThemis wordmark. */
  --dt-brand-gradient-core: linear-gradient(
    104deg,
    #fff9f2 0%,
    #fcf5ee 28%,
    #f5eee8 58%,
    #eaded5 100%
  );
  --dt-brand-gradient:
    radial-gradient(90% 120% at 100% 100%, rgba(255, 249, 242, .42), transparent 62%),
    var(--dt-brand-gradient-core);
  --dt-brand-gradient-soft: linear-gradient(
    112deg,
    #fff9f2 0%,
    #faf2ea 44%,
    #efe4dc 100%
  );
  --dt-brand-gradient-glass: linear-gradient(
    104deg,
    rgba(255, 249, 242, .92) 0%,
    rgba(245, 238, 232, .84) 58%,
    rgba(234, 222, 213, .78) 100%
  );
  /* Category materials keep the DemoThemis ivory substrate while making
     adjacent conceptual routes immediately distinguishable. */
  --dt-category-problem-surface:
    radial-gradient(120% 145% at 0% 0%, rgba(80, 177, 148, .26), transparent 60%),
    var(--dt-brand-gradient-soft);
  --dt-category-resistance-surface:
    radial-gradient(120% 145% at 0% 0%, rgba(126, 108, 196, .24), transparent 60%),
    var(--dt-brand-gradient-soft);
  --dt-category-quality-surface:
    radial-gradient(120% 145% at 0% 0%, rgba(210, 158, 74, .26), transparent 60%),
    var(--dt-brand-gradient-soft);
  --dt-soft: #e8ded6;
  --dt-emboss: #ccbbaf;
  --dt-border: #ad998a;
  --dt-accent: #786a5e;
  --dt-accent-strong: #6a5b50;
  --dt-ink: #292522;
  --dt-emission: #00e5ff;
  --dt-emission-ink: #006f7b;
  --dt-emission-rgb: 0, 229, 255;
  --dt-emission-wash: rgba(0, 229, 255, .08);
  --dt-wordmark-underline: linear-gradient(
    90deg,
    rgba(var(--dt-emission-rgb), .16) 0%,
    rgba(var(--dt-emission-rgb), .58) 20%,
    var(--dt-emission) 42%,
    var(--dt-emission) 50%,
    var(--dt-emission) 58%,
    rgba(var(--dt-emission-rgb), .58) 80%,
    rgba(var(--dt-emission-rgb), .16) 100%
  ) center / 100% 2px no-repeat,
  linear-gradient(
    90deg,
    rgba(var(--dt-emission-rgb), .025) 0%,
    rgba(var(--dt-emission-rgb), .08) 20%,
    rgba(var(--dt-emission-rgb), .16) 50%,
    rgba(var(--dt-emission-rgb), .08) 80%,
    rgba(var(--dt-emission-rgb), .025) 100%
  ) center / 100% 100% no-repeat;
  --dt-wordmark-underline-shape: polygon(
    0 38%, 15% 30%, 36% 10%, 50% 0,
    64% 10%, 85% 30%, 100% 38%,
    100% 62%, 85% 70%, 64% 90%, 50% 100%,
    36% 90%, 15% 70%, 0 62%
  );
  --dt-wordmark-underline-idle-filter: drop-shadow(0 0 3px rgba(var(--dt-emission-rgb), .16));
  --dt-wordmark-underline-hover-filter:
    drop-shadow(0 0 2px rgba(var(--dt-emission-rgb), .96))
    drop-shadow(0 0 6px rgba(var(--dt-emission-rgb), .76))
    drop-shadow(0 0 11px rgba(var(--dt-emission-rgb), .42));
  --omm-black: #000402;
  --omm-dark: #01130a;
  --omm-surface: #0b1710;
  --omm-green: #04e26d;
  --omm-green-dark: #00592a;
  --omm-mint: #5dfeaa;
  --omm-white: #fefefe;
  --omm-light-surface: #f4f5f1;
}

body.theme-market {
  --accent: #0d8273;
  --accent-soft: #dcf1ec;
  --accent-ink: #0a6157;
}

/* Product themes are opt-in so the excluded run-through retains its baseline. */
body[data-page-brand="demothemis"] {
  --canvas: var(--dt-canvas);
  --bg: #f1e8e1;
  --surface: var(--dt-surface);
  --ink: var(--dt-ink);
  --ink-soft: #433c37;
  --muted: #6f655e;
  --faint: #6f665f;
  --line: #e6d9cf;
  --line-strong: #d4c3b7;
  --accent: var(--dt-accent);
  --accent-soft: #eee4dc;
  --accent-ink: var(--dt-accent-strong);
  --shadow: 0 1px 2px rgba(41, 37, 34, .05), 0 14px 32px -18px rgba(106, 91, 80, .25);
  --shadow-lg: 0 2px 6px rgba(41, 37, 34, .07), 0 28px 56px -28px rgba(106, 91, 80, .34);
}

/* The Live MVP keeps the original cooler ivory palette while the editorial
   DemoThemis theme uses the warmer reading surface. */
body[data-page-brand="demothemis"][data-dt-palette="original"] {
  --dt-canvas: #f6f3f2;
  --dt-surface: #fffdf9;
  --dt-brand-gradient-core: linear-gradient(
    104deg,
    #fffdf9 0%,
    #fdfbf8 28%,
    #f6f3f2 58%,
    #eee9e5 100%
  );
  --dt-brand-gradient:
    radial-gradient(90% 120% at 100% 100%, rgba(255, 253, 249, .42), transparent 62%),
    var(--dt-brand-gradient-core);
  --dt-brand-gradient-soft: linear-gradient(
    112deg,
    #fffdf9 0%,
    #faf8f5 44%,
    #f2eeeb 100%
  );
  --dt-brand-gradient-glass: linear-gradient(
    104deg,
    rgba(255, 253, 249, .92) 0%,
    rgba(246, 243, 242, .84) 58%,
    rgba(238, 233, 229, .78) 100%
  );
  --dt-soft: #e9e8e5;
  --dt-emboss: #ccc3bc;
  --dt-border: #ab9e94;
  --canvas: var(--dt-canvas);
  --bg: #f2efec;
  --surface: var(--dt-surface);
  --line: #e5ded8;
  --line-strong: #d4cac2;
  --accent-soft: #ece7e3;
}

body[data-page-brand="omen"] {
  --canvas: #e9ebe7;
  --bg: var(--omm-light-surface);
  --surface: #fff;
  --ink: var(--omm-black);
  --ink-soft: #172019;
  --muted: #4d5a52;
  --faint: #5f6a63;
  --line: #d8ddd8;
  --line-strong: #b9c2bb;
  --accent: var(--omm-green-dark);
  --accent-soft: #dff7e9;
  --accent-ink: #004622;
  --shadow: 0 1px 2px rgba(0, 4, 2, .05), 0 14px 32px -18px rgba(0, 89, 42, .24);
  --shadow-lg: 0 2px 6px rgba(0, 4, 2, .08), 0 28px 56px -28px rgba(0, 89, 42, .34);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.72;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* scroll progress */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-ink));
  z-index: 60;
  transition: width .08s linear;
}

/* layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.content > section { margin: 3.2rem 0; }
.bleed { max-width: 58rem; }

/* hero */
.hero {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1rem;
  text-align: left;
  overflow-x: clip;
  overflow-y: visible;
}
.hero::before {
  content: "";
  position: absolute;
  top: 1.5rem; left: 50%;
  width: 30rem; height: 18rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  opacity: .9;
  z-index: -1;
  filter: blur(6px);
}
.kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.7rem);
  line-height: 1.05;
  font-weight: 560;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}
/* The homepage opens straight into its headline, so it does not need the deep
   run-in the chapter heroes use to separate themselves from a preceding page
   title. Scoped to .home-intro (index only) and specific enough to hold at the
   narrow breakpoints, which reduce it further. */
.hero.home-intro { padding-top: 1.4rem; padding-bottom: 0; }
.hero.home-intro h1 { margin-bottom: 1.375rem; }
@media (max-width: 640px) { .hero.home-intro { padding-top: 1.05rem; } }
@media (max-width: 360px) { .hero.home-intro { padding-top: .9rem; } }
/* Staged headline: the promise carries display size, and the two mechanisms it
   rests on step down in size and colour. One sentence still, read in three
   beats instead of one undifferentiated wall. */
.hero-claim { display: block; }
.hero-qualifier {
  display: block;
  margin-top: .55rem;
  /* em keeps the ratio to the headline; the rem floor stops the qualifiers
     shrinking past comfortable reading once the clamp bottoms out on phones. */
  font-size: max(1.05rem, .4em);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--muted);
}
.hero-qualifier b {
  font-weight: 600;
  color: var(--ink-soft);
}
.dek {
  font-size: 1.32rem;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 1.8rem;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--faint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: .9rem 0;
}
.pill {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: .25rem .7rem;
  border-radius: 999px;
}
.meta .dot { color: var(--line-strong); }

/* typography */
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.05rem);
  line-height: 1.18;
  font-weight: 540;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
}
h3 { font-size: 1.18rem; font-weight: 600; margin: 0 0 .35rem; font-family: var(--sans); letter-spacing: -.01em; }
p { margin: 0 0 1.15rem; }
a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
strong { font-weight: 640; }
.content section > p:first-of-type { margin-top: 0; }
em.q { font-style: normal; color: var(--accent-ink); font-weight: 560; }

/* section label */
.sec-label {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .6rem;
}

/* figures / diagrams */
.diagram {
  margin: 2.4rem 0;
  padding: 0;
}
.diagram-inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8rem;
}
figcaption {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--faint);
  margin-top: .85rem;
  text-align: center;
}
figcaption b { color: var(--muted); font-weight: 600; }

/* stepper */
.stepper { list-style: none; counter-reset: step; margin: 1.5rem 0; padding: 0; }
.stepper li {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.1rem;
  padding: 0 0 1.7rem 0;
}
.stepper li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.3rem; top: 2.8rem; bottom: .2rem;
  width: 2px;
  background: linear-gradient(var(--accent), var(--accent-soft));
}
.step-n {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.step-body p { font-size: 1.04rem; line-height: 1.62; color: var(--muted); margin: 0; }

/* horizontal flow */
.flow { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.flow .node {
  flex: 1 1 7rem;
  min-width: 7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem .8rem;
  text-align: center;
  font-family: var(--sans);
}
.flow .node .ic { font-size: 1.3rem; }
.flow .node .lbl { display: block; font-weight: 600; font-size: .92rem; margin-top: .3rem; }
.flow .node .sub { display: block; font-size: .76rem; color: var(--faint); }
.flow .arrow { align-self: center; color: var(--accent); font-size: 1.2rem; font-weight: 700; }
.flow .node.is-accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.compare-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
.compare-col h4 { font-family: var(--sans); font-size: .98rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.compare-col.bad {
  border-color: color-mix(in srgb, var(--bad) 30%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 13%, var(--surface)) 0, var(--surface) 48%);
}
.compare-col.good {
  border-color: color-mix(in srgb, var(--good) 30%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--good) 13%, var(--surface)) 0, var(--surface) 48%);
}
.compare-col ul { margin: 0; padding-left: 0; list-style: none; }
.compare-col li { font-family: var(--sans); font-size: .94rem; line-height: 1.5; color: var(--muted); padding: .4rem 0 .4rem 1.5rem; position: relative; }
.compare-col li::before { position: absolute; left: 0; top: .4rem; font-size: .9rem; }
.compare-col.bad li::before { content: "\2715"; color: var(--bad-ink); }
.compare-col.good li::before { content: "\2713"; color: var(--good-ink); }
.tag-bad { color: var(--bad-ink); background: var(--bad-soft); font-size: .72rem; font-weight: 700; font-family: var(--sans); padding: .15rem .5rem; border-radius: 999px; }
.tag-good { color: var(--good-ink); background: var(--good-soft); font-size: .72rem; font-weight: 700; font-family: var(--sans); padding: .15rem .5rem; border-radius: 999px; }

/* callout */
.callout {
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.callout h3 { color: var(--accent-ink); }
.callout p:last-child { margin-bottom: 0; }

/* product summary card */
.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.6rem 0;
}
.products.single-product { grid-template-columns: 1fr; }
.product {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
  font-family: var(--sans);
}
.product.product-feature { margin: 1.5rem 0 2rem; }
.product.market {
  border-color: color-mix(in srgb, var(--good) 30%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--good) 13%, var(--surface)) 0, var(--surface) 48%);
}
.product.court {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, var(--surface)) 0, var(--surface) 48%);
}
.product .pk { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.product :is(h2, h3) { margin: .3rem 0 .5rem; font-size: 1.2rem; }
.product p { font-size: .92rem; line-height: 1.55; color: var(--muted); margin: 0; }
.product p + p { margin-top: .6rem; }
.product ol { margin: .4rem 0 0; padding-left: 1.25rem; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.product ol li { margin-bottom: .55rem; }
.product ol li::marker { font-weight: 700; color: var(--accent-ink); }
.product-jumps a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-underline-offset: .14em; }
.product-jumps a:hover, .product-jumps a:focus-visible { color: var(--accent-ink); text-decoration-color: currentColor; }
.product p .lab { font-weight: 700; color: var(--accent-ink); }
@media (max-width: 640px) { .products { grid-template-columns: 1fr; } }

/* homepage product comparison */
.home-intro .dek {
  margin-bottom: .5rem;
}
.content > section.home-products {
  margin-top: 0;
}
.home-products .crt-bay {
  margin-top: .75rem;
}
.product-pair {
  width: min(58rem, calc(100vw - 3rem));
  margin: 2rem 50%;
  transform: translateX(-50%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.product-pair .product {
  --product-color: var(--accent);
  --product-soft: var(--accent-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 1.65rem;
  border: 1px solid color-mix(in srgb, var(--product-color) 23%, var(--line));
  border-top: 1px solid color-mix(in srgb, var(--product-color) 23%, var(--line));
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--product-color) 13%, transparent) 0, transparent 48%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--product-soft) 78%, transparent) 0, transparent 15rem),
    var(--surface);
  box-shadow: 0 1px 2px rgba(46, 40, 30, .04), 0 22px 50px -28px rgba(46, 40, 30, .3);
}
.product-pair .product::before { display: none; }
.product-pair .product > * {
  position: relative;
  z-index: 1;
}
.product-pair .product.market {
  --product-color: var(--good);
  --product-soft: var(--good-soft);
}
.product-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.product-pair .product .pk {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .28rem .68rem;
  border-radius: 999px;
  background: var(--product-soft);
  color: color-mix(in srgb, var(--product-color) 76%, var(--ink));
  letter-spacing: .09em;
}
.product-kind {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
  color: var(--faint);
}
.product-pair .product :is(h2, h3) {
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 1.8rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.product-pair .product .product-tagline {
  margin: .35rem 0 1.15rem;
  max-width: 26rem;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink-soft);
}
.product-logo-lockup {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 7.2rem;
  margin: .15rem 0 .45rem;
  place-items: center;
  overflow: visible;
}
.product-logo-lockup--demothemis img {
  display: block;
  width: min(100%, 25rem);
  height: auto;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .84)) drop-shadow(0 14px 24px rgba(106, 91, 80, .11));
}
.product-pair .product .product-summary {
  font-size: .9rem;
  line-height: 1.58;
}
.product-pair .product .product-summary + .product-summary {
  margin-top: .9rem;
}
.product-summary-label {
  color: var(--summary-label-color, var(--accent-ink));
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--summary-label-color, var(--accent)) 45%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.product-summary-goal { --summary-label-color: #4637b7; }
.product-summary-how { --summary-label-color: #7650a8; }
.product-summary-worldcoin { --summary-label-color: #27639b; }
.product-facts {
  display: grid;
  gap: .65rem;
  margin: 1.15rem 0 1rem;
  padding: 0;
  list-style: none;
}
.product-facts li {
  position: relative;
  padding: .72rem .8rem .72rem 2.35rem;
  border: 1px solid color-mix(in srgb, var(--product-color) 14%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--product-soft) 45%, var(--surface));
  font-family: var(--sans);
}
.product-facts li::before {
  content: "";
  position: absolute;
  top: .92rem;
  left: .9rem;
  width: .62rem;
  height: .62rem;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--product-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--product-color) 32%, var(--line));
}
.product-facts strong,
.product-facts span {
  display: block;
}
.product-facts strong {
  margin-bottom: .08rem;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--ink);
}
.product-facts span {
  font-size: .74rem;
  line-height: 1.45;
  color: var(--muted);
}
.product-pair .product .product-principle {
  margin: auto 0 0;
  padding: 1rem 1.05rem;
  border-left: 3px solid var(--product-color);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--product-soft) 58%, var(--surface));
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
  color: color-mix(in srgb, var(--product-color) 68%, var(--ink));
}
.product-pair .product ol.product-jumps {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: market-feature;
}
.product-pair .product ol.product-jumps li {
  position: relative;
  margin: 0;
  padding: .72rem .78rem .72rem 2.7rem;
  border: 1px solid color-mix(in srgb, var(--product-color) 13%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--product-soft) 34%, var(--surface));
  counter-increment: market-feature;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.product-pair .product ol.product-jumps li::before {
  content: counter(market-feature);
  position: absolute;
  top: .75rem;
  left: .78rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--product-color);
  color: white;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}
.product-pair .product ol.product-jumps li:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--product-color) 32%, var(--line));
  background: color-mix(in srgb, var(--product-soft) 58%, var(--surface));
}
.product-pair .product-jumps a {
  display: block;
  font-size: .84rem;
  line-height: 1.48;
}
@media (max-width: 800px) {
  .product-pair {
    width: min(44rem, calc(100vw - 3rem));
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .product-pair .product { min-height: auto; }
}
@media (max-width: 480px) {
  .product-pair { width: calc(100vw - 2rem); }
  .product-pair .product { padding: 1.3rem; border-radius: 16px; }
  .product-topline { align-items: flex-start; }
}

/* ===== homepage: first-customer terminal reveal =====
   DemoThemis stays ivory and cyan; OmenMarketMaker exists only behind the
   black glass of a beige period terminal, so the two brands share a scene
   without sharing a style. Every reveal step is a transform or an opacity so
   the machine never re-lays-out the page while it travels. JS picks the mode:
   side-eject where the viewport has room, drawer-down where it does not. */
/* The machine's masked paint surface reaches 64px past the bay so its shadows
   are never cut; that room may poke past the viewport on narrow windows. Clip
   ink at the viewport edge — where it is invisible by definition — instead of
   letting the page scroll sideways into it. The rule sits on the root because
   the viewport takes its overflow from html; on body it never reaches the
   viewport. Vertical scrolling is untouched, and clip creates no scroll
   container, so sticky elements keep working. */
html:has(.crt-bay) { overflow-x: clip; }
/* Clipping the root stops the sideways scroll, but the well's 64px shadow
   bleed still counts toward the document's scroll width. On a phone that
   leaves the page wider than the screen, so the browser fits the wider box
   and the centred column reads as shifted left with dead space on the right.
   Clipping on body too ends the overflow itself rather than only its scroll:
   body spans exactly the viewport, so the paint this removes is off-screen by
   definition, and the machine's own box is never touched. */
body:has(.crt-bay) { overflow-x: clip; }
.crt-bay {
  --crt-tuck: 12px;
  --crt-shift: 0px;
  --crt-out: 400ms;
  --crt-in: 260ms;
  --crt-ease-out: cubic-bezier(.16, .9, .3, 1.02);
  --crt-ease-in: cubic-bezier(.5, 0, .78, .3);
  position: relative;
  width: min(37rem, calc(100vw - 3rem));
  margin: 2rem 50%;
  transform: translateX(-50%);
}
.product-pair--solo {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  transform: translateX(0);
  transition: transform var(--crt-in) var(--crt-ease-in);
}
/* A side machine may never overrun the card. When the controller finds a small
   overrun it raises the card to meet the machine flush; the summon key stays
   pinned to the card's foot and the slack absorbs above it. The fixed key gap
   moves onto the last summary so the resting layout is pixel-identical. */
.product-pair--solo .product { min-height: var(--crt-card-min, 0); }
.product-pair--solo .product .crt-summon { margin-top: auto; }
.product-pair--solo .product .product-summary-worldcoin { margin-bottom: 1.25rem; }
.crt-bay[data-mode="side"][data-open="true"] .product-pair--solo {
  transform: translateX(calc(-1 * var(--crt-shift)));
  transition-duration: var(--crt-out);
  transition-timing-function: var(--crt-ease-out);
}
/* While the machine is out, the card lifts and casts onto it. The dock's own
   bay shading is anchored to the mouth, but the card slides relative to the
   machine during travel, so only a shadow carried by the card keeps the seam
   reading as one object passing under another instead of a flat cut. */
.product-pair--solo { border-radius: 20px; transition: box-shadow .3s ease; }
.crt-bay[data-mode="side"][data-open="true"] .product-pair--solo,
.crt-bay[data-mode="side"].is-moving .product-pair--solo {
  box-shadow: 12px 0 32px -10px rgba(28, 24, 19, .34);
}
.crt-bay[data-mode="below"][data-open="true"] .product-pair--solo,
.crt-bay[data-mode="below"].is-moving .product-pair--solo {
  box-shadow: 0 12px 32px -10px rgba(28, 24, 19, .34);
}
.crt-summon {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: .72rem;
  width: 100%;
  margin-top: 1.25rem;
  padding: .82rem .9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 13px;
  /* A whiter face than the card it sits on, so the key reads as a separate
     object rather than a panel drawn on the same ivory. */
  background: linear-gradient(180deg, #fff 0, color-mix(in srgb, var(--surface) 92%, white) 55%, color-mix(in srgb, var(--dt-emboss) 20%, var(--surface)) 100%);
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  /* A 3px ledge with its own contact shadow: the key visibly stands off the
     card at rest, which is the resting-state affordance. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 3px 0 color-mix(in srgb, var(--accent) 52%, var(--line)),
    0 4px 5px rgba(46, 40, 30, .14),
    0 9px 18px -7px rgba(46, 40, 30, .3);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .14s ease;
}
.crt-summon:hover {
  border-color: var(--dt-emission);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 4px 0 color-mix(in srgb, var(--accent) 52%, var(--line)),
    0 5px 6px rgba(46, 40, 30, .14),
    0 12px 22px -7px rgba(46, 40, 30, .32),
    0 0 0 1px var(--dt-emission),
    0 0 12px rgba(var(--dt-emission-rgb), .2);
}
.crt-summon:active {
  transform: translateY(2px);
  transition-duration: 45ms;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 2px 4px rgba(46, 40, 30, .18),
    0 0 0 color-mix(in srgb, var(--accent) 42%, var(--line)),
    0 1px 2px rgba(46, 40, 30, .12);
}
.crt-summon.is-on {
  transform: translateY(1px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white) 0, color-mix(in srgb, var(--dt-emboss) 22%, var(--surface)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 2px 5px rgba(46, 40, 30, .14),
    0 1px 0 color-mix(in srgb, var(--accent) 42%, var(--line)),
    0 2px 3px rgba(46, 40, 30, .1);
}
.crt-summon.is-on:active { transform: translateY(2px); transition-duration: 45ms; }
.crt-summon:focus-visible {
  outline: 2px solid var(--dt-emission-ink);
  outline-offset: 2px;
}
/* A recessed unlit lamp, not an empty ring: a hollow circle reads as a radio
   button — a state to be selected — where a dark well in the panel reads as an
   indicator that is simply off. */
.crt-summon-led {
  flex: none;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--dt-emboss) 62%, var(--surface)) 0, color-mix(in srgb, var(--dt-accent) 28%, var(--surface)) 100%);
  box-shadow: inset 0 1px 2px rgba(46, 40, 30, .4), 0 1px 0 rgba(255, 255, 255, .82);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.crt-summon.is-on .crt-summon-led {
  border-color: color-mix(in srgb, var(--omm-green) 55%, var(--line));
  background: var(--omm-green);
  box-shadow: 0 0 9px rgba(4, 226, 109, .85), inset 0 1px 1px rgba(255, 255, 255, .45);
}
.crt-summon-copy { display: grid; gap: .12rem; min-width: 0; }
.crt-summon-kicker {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* --faint is only 3.1:1 on this button's ivory face; --muted clears 4.5:1. */
  color: var(--muted);
}
.crt-summon-label {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}
/* The strongest resting-state cue: a real switch cap. A bare glyph floating at
   the edge reads as decoration; a rimmed, domed disc with a live cyan tint and
   a halo reads as the thing you press. */
.crt-summon-power {
  flex: none;
  margin-left: auto;
  box-sizing: content-box;
  padding: .34rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dt-emission) 32%, var(--line));
  background: radial-gradient(circle at 50% 30%, #fff 0, color-mix(in srgb, var(--dt-emission) 7%, var(--surface)) 78%);
  color: var(--dt-emission-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 2px rgba(46, 40, 30, .2),
    0 0 0 3px rgba(var(--dt-emission-rgb), .08);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .3s ease;
}
.crt-summon:hover .crt-summon-power {
  border-color: var(--dt-emission);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 2px rgba(46, 40, 30, .2),
    0 0 0 4px rgba(var(--dt-emission-rgb), .17),
    0 0 10px rgba(var(--dt-emission-rgb), .28);
}
.crt-summon:active .crt-summon-power {
  box-shadow: inset 0 1px 3px rgba(46, 40, 30, .26), 0 0 0 3px rgba(var(--dt-emission-rgb), .1);
}
.crt-summon.is-on .crt-summon-power {
  color: var(--omm-green);
  border-color: color-mix(in srgb, var(--omm-green) 52%, var(--line));
  background: radial-gradient(circle at 50% 30%, #fff 0, color-mix(in srgb, var(--omm-green) 8%, var(--surface)) 78%);
  box-shadow: inset 0 1px 3px rgba(46, 40, 30, .22), 0 0 0 3px rgba(4, 226, 109, .14);
  transform: rotate(180deg);
}

/* The dock is the bay mouth: a fixed clip window the machine travels through.
   It never animates, so the travel costs one composited transform. */
.crt-dock {
  position: relative;
  z-index: 1;
  /* flow-root so the chassis's bottom margin stays inside the drawer's box in
     below mode (overflow alone does not create a BFC). */
  display: flow-root;
}
/* THE SHADOW SYSTEM. The machine keeps its own attached box-shadow at its
   natural size — nothing ever hard-clips it. The well is the paint surface: it
   sizes itself to the machine and extends 64px past it on every side except
   the bay mouth, so drop shadows and the screen's glow always have room. At the
   mouth a gradient mask fades ALL paint to zero alpha across the tucked strip
   that sits behind the card. A shadow cannot be cut at an edge where it has
   already faded to nothing, so no travel position and no machine height can
   produce a hard line — the failure of every clip-based attempt before this. */
.crt-bay[data-mode="below"] .crt-dock {
  height: 0;
  margin-top: -14px;
}
/* Holding the bay open for the length of the retract keeps the machine on
   screen while it travels back in; it collapses once the drawer is home. */
.crt-bay[data-mode="below"][data-open="true"] .crt-dock,
.crt-bay[data-mode="below"].is-moving .crt-dock { height: auto; }
.crt-bay[data-mode="side"] .crt-dock {
  position: absolute;
  top: 0;
  left: calc(100% - var(--crt-tuck) - var(--crt-shift));
  width: var(--crt-side-w, 24rem);
}
.crt-bay[data-mode="below"] .crt-well {
  padding: 0 64px 64px;
  margin: 0 -64px -64px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px);
}
.crt-bay[data-mode="side"] .crt-well {
  position: absolute;
  top: -64px;
  left: 0;
  right: -64px;
  padding: 64px 64px 64px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px);
}
.crt-bay:not([data-armed]) .crt-well { content-visibility: hidden; }
/* Parked and done travelling: the machine stops existing for paint and for hit
   testing. Without this the stowed chassis keeps a clipped compositing layer
   alive, which on fractional device-pixel-ratio displays leaves a hairline seam
   and a faint tonal step along the bay mouth, and its empty box still swallows
   clicks over the page beside the card. */
.crt-bay:not([data-open="true"]):not(.is-moving) .crt-dock { visibility: hidden; }
.crt-chassis {
  position: relative;
  width: min(31rem, calc(100% - 1.6rem));
  margin: 0 auto 2.6rem;
  padding: .8rem .8rem 0;
  border: 1px solid color-mix(in srgb, var(--dt-emboss) 62%, var(--dt-canvas));
  border-radius: 12px 12px 26px 26px;
  background: linear-gradient(180deg, color-mix(in srgb, white 34%, var(--dt-canvas)) 0, var(--dt-canvas) 42%, color-mix(in srgb, var(--dt-emboss) 26%, var(--dt-canvas)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 18px 22px -18px rgba(46, 40, 30, .45),
    0 4px 0 -1px color-mix(in srgb, var(--dt-emboss) 58%, var(--dt-canvas)),
    0 1px 2px rgba(46, 40, 30, .06),
    0 30px 58px -30px rgba(46, 40, 30, .5);
  transition: transform var(--crt-in) var(--crt-ease-in);
}
/* No will-change here on purpose: toggling it per travel promotes and drops a
   layer for a large subtree on every cycle, which stutters the re-deployment.
   The transform animates on the compositor without it. */
/* Parked well clear of the mouth so no sliver can survive sub-pixel rounding
   at fractional device pixel ratios. */
.crt-bay[data-mode="below"] .crt-chassis { transform: translateY(calc(-100% - 24px)); }
/* Natural size: the machine is exactly as tall as its readout, never clamped
   and never scrolled. The masked well gives its shadow room in every direction,
   so the machine's height no longer needs any relationship to the card's. */
.crt-bay[data-mode="side"] .crt-chassis {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  transform: translateX(calc(-100% - 64px));
}
.crt-bay[data-open="true"] .crt-chassis {
  transform: none;
  transition-duration: var(--crt-out);
  transition-timing-function: var(--crt-ease-out);
}
.crt-glass {
  position: relative;
  overflow: clip;
  padding: clamp(.5rem, 1.3vw, .8rem);
  border-radius: 9px 9px 15px 15px;
  background: var(--omm-black);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(0, 4, 2, .72),
    inset 0 2px 10px rgba(0, 4, 2, .6),
    inset 0 0 3.2rem rgba(4, 226, 109, .07),
    0 0 2.4rem rgba(4, 226, 109, .14);
}
/* POWER-ON. Two beams strike as a cross — the vertical one first, the
   horizontal a beat later — then each blooms open along its thin axis and
   dissolves exactly as the readout resolves underneath, so the streaks read as
   becoming the content rather than passing over it. Both are one composited
   layer driven by transform and opacity only. */
.crt-glass::before,
.crt-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.crt-glass::before {
  background: radial-gradient(135% 52% at 50% 50%, rgba(93, 254, 170, .95) 0, rgba(4, 226, 109, .42) 42%, transparent 74%);
  transform: scaleY(.006);
}
.crt-glass::after {
  background: radial-gradient(52% 135% at 50% 50%, rgba(93, 254, 170, .85) 0, rgba(4, 226, 109, .34) 42%, transparent 74%);
  transform: scaleX(.006);
}
.crt-bay[data-open="true"] .crt-glass::after { animation: crt-strike-v .34s cubic-bezier(.22, .9, .3, 1) .15s both; }
.crt-bay[data-open="true"] .crt-glass::before { animation: crt-strike-h .32s cubic-bezier(.22, .9, .3, 1) .185s both; }
/* One small compositor layer does the power-on flicker, so the card subtree
   underneath is never repainted for the effect. */
.crt-flare {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgba(93, 254, 170, .16);
  opacity: 0;
  pointer-events: none;
}
/* forwards, not both: this keyframe set opens on opacity 1, and a backwards
   fill paints that first frame for the whole delay — holding the screen solid
   green before the flicker starts, and holding it far longer whenever the main
   thread stalls. forwards leaves the element on its transparent base until the
   flicker actually begins. */
.crt-bay[data-open="true"] .crt-flare { animation: crt-flare .24s steps(1, end) .29s forwards; }
@keyframes crt-flare {
  0%, 22% { opacity: 1; }
  23%, 38% { opacity: 0; }
  39%, 50% { opacity: .7; }
  51%, 68% { opacity: 0; }
  69%, 78% { opacity: .34; }
  79%, 100% { opacity: 0; }
}
@keyframes crt-strike-v {
  0% { opacity: 0; transform: scaleX(.006) scaleY(.3); }
  10% { opacity: 1; transform: scaleX(.006) scaleY(1); }
  38% { opacity: .9; transform: scaleX(.07) scaleY(1); }
  100% { opacity: 0; transform: scaleX(1) scaleY(1); }
}
@keyframes crt-strike-h {
  0% { opacity: 0; transform: scaleY(.006) scaleX(.3); }
  10% { opacity: 1; transform: scaleY(.006) scaleX(1); }
  38% { opacity: .95; transform: scaleY(.09) scaleX(1); }
  100% { opacity: 0; transform: scaleY(1) scaleX(1); }
}
/* The readout renders at full size — no clamp, no internal scroll. The reset of
   grid-auto-rows/align-items off the shared equal-height pair rules keeps the
   card content-sized instead of stretched. */
.product-pair--screen {
  width: 100%;
  margin: 0;
  transform: none;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-items: start;
  opacity: 0;
}
/* Starts while the beams are still blooming and finishes with them, so the
   readout emerges out of the glow instead of appearing after it. */
.crt-bay[data-open="true"] .product-pair--screen { animation: crt-ignite .21s ease-out .31s both; }
@keyframes crt-ignite {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Screen-side density: the machine trims its own dead space so the terminal
   stays compact. Type sizes and the Rive wordmark are untouched. */
.product-pair--screen .product { height: auto; border-radius: 12px; padding: 1.15rem; }
.product-pair--screen .product-topline { margin-bottom: .55rem; }
/* Matches the shell selector's specificity deliberately: the shared
   .product-logo-lockup--omen.omen-rive-shell rule sits later in this sheet, so a
   plainer selector here loses and the compaction never applies. */
.product-pair--screen .product-logo-lockup--omen.omen-rive-shell {
  min-height: 0;
  margin: 0 0 .3rem;
  aspect-ratio: 1582 / 408;
}
.product-pair--screen .product .product-tagline { margin: .2rem 0 .85rem; }
.product-pair--screen .product ol.product-jumps { gap: .45rem; }
.product-pair--screen .product ol.product-jumps li { padding: .58rem .7rem .58rem 2.45rem; }
.product-pair--screen .product ol.product-jumps li::before { top: .62rem; left: .66rem; }
/* The court's homepage parks the omen card on its CRT screen and drifts the
   mesh only while the bay is open. Here the omen card is the bay's own
   card, always on show, so only a screen card is ever paused. */
.crt-bay:not([data-open="true"]) .product-pair--screen .product[data-brand="omen"]::after { animation-play-state: paused; }
/* A plain moulded bezel below the glass — no markings. */
.crt-chin { height: 1.35rem; }
/* Phone density. The machine is naturally taller than a phone screen, so the
   readout reclaims its own dead space first — tighter padding, gaps and
   indents, and a shorter number gutter that lets each feature wrap onto fewer
   lines. Type sizes are untouched; this only removes whitespace. */
@media (max-width: 640px) {
  .product-pair--screen .product { padding: .7rem; }
  .product-pair--screen .product-topline { margin-bottom: .3rem; }
  .product-pair--screen .product-logo-lockup--omen.omen-rive-shell { margin: 0 0 .2rem; }
  .product-pair--screen .product .product-tagline { margin: .05rem 0 .4rem; line-height: 1.3; }
  .product-pair--screen .product ol.product-jumps { gap: .28rem; }
  /* Row chrome kept (the opaque surface is what holds the readout legible over
     the brand mesh) but squeezed to the minimum that still reads as a row. */
  .product-pair--screen .product ol.product-jumps li { padding: .3rem .5rem .3rem 1.95rem; }
  .product-pair--screen .product ol.product-jumps li::before { top: .34rem; left: .46rem; width: 1.15rem; height: 1.15rem; font-size: .6rem; }
  .product-pair--screen .product-jumps a { line-height: 1.32; }
  .crt-glass { padding: .4rem; }
}
/* Small phones cannot hold six multi-line features at full desktop type without
   either scrolling or cutting content, so the readout steps down one notch —
   still well above the 12px legibility floor. */
@media (max-width: 460px) {
  .product-pair--screen .product .product-tagline { font-size: .88rem; line-height: 1.25; }
  .product-pair--screen .product-jumps a { font-size: .75rem; line-height: 1.22; }
  .product-pair--screen .product ol.product-jumps li { padding: .14rem .4rem .14rem 1.62rem; }
  .product-pair--screen .product ol.product-jumps li::before { top: .2rem; left: .34rem; width: 1rem; height: 1rem; font-size: .54rem; }
  .product-pair--screen .product-kind, .product-pair--screen .pk { font-size: .6rem; }
  .product-pair--screen .product { padding: .45rem; }
  .product-pair--screen .product-topline { margin-bottom: .2rem; }
  .product-pair--screen .product .product-tagline { margin: .05rem 0 .3rem; }
  .product-pair--screen .product ol.product-jumps { gap: .12rem; }
  .product-pair--screen .product-logo-lockup--omen.omen-rive-shell { width: 94%; margin: 0 auto .1rem; }
  .crt-glass { padding: .32rem; }
  .crt-chin { height: .85rem; }
}
/* Guarantee: whatever is left over after that, the machine still fits the
   phone. It is capped to the viewport and the glass takes the slack, so the
   whole device is on screen and the readout scrolls inside it rather than the
   device running off the bottom. Chaining is left at the default so a flick
   over the screen still scrolls the page once the readout ends. */
@media (max-width: 640px) {
  .crt-bay[data-mode="below"] .crt-chassis {
    /* Measured against the real mobile chrome: the 55px sticky nav plus a small
       margin. This is a safety net only — the phone density rules below are
       tuned so the readout fits naturally and this never engages. */
    max-height: calc(100dvh - 5.25rem);
    display: flex;
    flex-direction: column;
  }
  .crt-bay[data-mode="below"] .crt-glass {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  .crt-bay[data-mode="below"] .product-pair--screen {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(4, 226, 109, .5) transparent;
  }
  .crt-bay[data-mode="below"] .crt-chin { flex: none; }
}
@media (max-width: 480px) {
  .crt-bay { width: calc(100vw - 2rem); }
  .crt-chassis { width: calc(100% - 1.2rem); padding: .55rem .55rem 0; border-radius: 10px 10px 18px 18px; margin-bottom: 2rem; }
  .crt-glass { border-radius: 7px 7px 11px 11px; }
  .crt-summon { padding: .7rem .75rem; gap: .65rem; }
  .crt-chin { height: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-chassis, .product-pair--solo, .crt-summon, .crt-summon-led, .crt-summon-power { transition: none; }
  .crt-bay[data-open="true"] .crt-glass::before,
  .crt-bay[data-open="true"] .crt-glass::after,
  .crt-bay[data-open="true"] .crt-flare { animation: none; }
  .crt-bay[data-open="true"] .product-pair--screen { animation: none; opacity: 1; }
}
@media (forced-colors: active) {
  .crt-summon, .crt-chassis, .crt-glass { border: 1px solid ButtonText; }
  .crt-glass::before, .crt-glass::after, .crt-flare { display: none; }
}

/* interactive widget */
.widget {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem;
  margin: 2rem 0;
}
.widget-head { font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.widget-head .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
.controls { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.controls .row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-family: var(--sans); font-size: .9rem; }
.controls .row b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
input[type=range] {
  --range-track-size: 6px;
  --range-thumb-size: 22px;
  --range-fill: calc(var(--range-thumb-size) / 2);
  --range-fill-color: var(--accent);
  --range-track-color: var(--line);
  --range-thumb-color: var(--accent);
  --range-thumb-border: var(--surface);
  --range-thumb-outline: color-mix(in srgb, var(--accent) 62%, transparent);
  --range-hover-ring: color-mix(in srgb, var(--range-thumb-color) 28%, transparent);
  --range-pressed-color: color-mix(in srgb, var(--range-thumb-color) 72%, var(--ink));
  --range-focus-ring: color-mix(in srgb, var(--accent) 38%, transparent);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 100%;
  height: var(--range-track-size);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--range-fill-color) 0 var(--range-fill),
    var(--range-track-color) var(--range-fill) 100%
  );
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  margin-top: calc((var(--range-track-size) - var(--range-thumb-size)) / 2);
  border: 3px solid var(--range-thumb-border);
  border-radius: 50%;
  background: var(--range-thumb-color);
  box-shadow: 0 0 0 1px var(--range-thumb-outline), 0 3px 8px rgba(23, 32, 38, .2);
  cursor: grab;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
input[type=range]::-moz-range-track {
  box-sizing: border-box;
  width: 100%;
  height: var(--range-track-size);
  border: 0;
  border-radius: 999px;
  background: var(--range-track-color);
}
input[type=range]::-moz-range-progress {
  height: var(--range-track-size);
  border-radius: 999px;
  background: var(--range-fill-color);
}
input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: 3px solid var(--range-thumb-border);
  border-radius: 50%;
  background: var(--range-thumb-color);
  box-shadow: 0 0 0 1px var(--range-thumb-outline), 0 3px 8px rgba(23, 32, 38, .2);
  cursor: grab;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
@media (hover: hover) {
  input[type=range]:not(:disabled):hover::-webkit-slider-thumb {
    border-color: var(--range-thumb-color);
    background: var(--range-thumb-border);
    box-shadow: 0 0 0 4px var(--range-hover-ring), 0 5px 10px rgba(23, 32, 38, .17);
  }
  input[type=range]:not(:disabled):hover::-moz-range-thumb {
    border-color: var(--range-thumb-color);
    background: var(--range-thumb-border);
    box-shadow: 0 0 0 4px var(--range-hover-ring), 0 5px 10px rgba(23, 32, 38, .17);
  }
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--range-thumb-border), 0 0 0 5px var(--range-focus-ring), 0 3px 8px rgba(23, 32, 38, .2);
}
input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--range-thumb-border), 0 0 0 5px var(--range-focus-ring), 0 3px 8px rgba(23, 32, 38, .2);
}
input[type=range]:not(:disabled):active::-webkit-slider-thumb {
  border-color: var(--range-pressed-color);
  background: var(--range-pressed-color);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--range-thumb-border) 28%, transparent);
  transform: scale(.9);
  cursor: grabbing;
}
input[type=range]:not(:disabled):active::-moz-range-thumb {
  border-color: var(--range-pressed-color);
  background: var(--range-pressed-color);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--range-thumb-border) 28%, transparent);
  transform: scale(.9);
  cursor: grabbing;
}
input[type=range]:disabled { opacity: .48; cursor: not-allowed; }
input[type=range]:disabled::-webkit-slider-thumb { cursor: not-allowed; }
input[type=range]:disabled::-moz-range-thumb { cursor: not-allowed; }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .8rem; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.stat .k { font-family: var(--sans); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.stat .v { font-family: var(--sans); font-weight: 700; font-size: 1.5rem; line-height: 1.1; margin-top: .25rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .v.accent { color: var(--accent-ink); }

/* Exact three-card groups share one calm scan pattern. Other group sizes stay neutral. */
.readout:has(> .stat:nth-child(3):last-child) > .stat:nth-child(1) {
  border-color: var(--triad-mint-border);
  background: var(--triad-mint);
}
.readout:has(> .stat:nth-child(3):last-child) > .stat:nth-child(2) {
  border-color: var(--triad-lavender-border);
  background: var(--triad-lavender);
}
.readout:has(> .stat:nth-child(3):last-child) > .stat:nth-child(3) {
  border-color: var(--triad-amber-border);
  background: var(--triad-amber);
}

/* Three-step explanations keep their timeline while gaining card-level separation. */
.stepper:has(> li:nth-child(3):last-child) > li .step-body {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem 1rem;
}
.stepper:has(> li:nth-child(3):last-child) > li:nth-child(1) .step-body {
  border-color: var(--triad-mint-border);
  background: var(--triad-mint);
}
.stepper:has(> li:nth-child(3):last-child) > li:nth-child(2) .step-body {
  border-color: var(--triad-lavender-border);
  background: var(--triad-lavender);
}
.stepper:has(> li:nth-child(3):last-child) > li:nth-child(3) .step-body {
  border-color: var(--triad-amber-border);
  background: var(--triad-amber);
}
.stepper:has(> li:nth-child(3):last-child) > li:nth-child(1) .step-n {
  border-color: var(--triad-mint-border);
  background: #e2f5ed;
  color: #096b4c;
}
.stepper:has(> li:nth-child(3):last-child) > li:nth-child(3) .step-n {
  border-color: var(--triad-amber-border);
  background: #fff1d8;
  color: #8b510a;
}

/* Three-node proposal diagrams use the same rhythm without recoloring their arrows. */
body .coldstart > .ring:nth-of-type(1),
body .exhaust > .e:nth-of-type(1) {
  border-color: var(--triad-mint-border);
  background: var(--triad-mint);
}
body .coldstart > .ring:nth-of-type(2),
body .exhaust > .e:nth-of-type(2) {
  border-color: var(--triad-lavender-border);
  background: var(--triad-lavender);
}
body .coldstart > .ring:nth-of-type(3),
body .diagram-inner .exhaust > .e:nth-of-type(3) {
  border-color: var(--triad-amber-border);
  background: var(--triad-amber);
  color: var(--ink);
}
.btn {
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  background: var(--accent); color: #fff; border: none;
  padding: .65rem 1.15rem; border-radius: 10px; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* dot grid (sortition) */
.dotgrid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 5px; margin: 0 0 1rem; }
.dotgrid .d { aspect-ratio: 1; border-radius: 50%; background: var(--line); transition: background .25s ease, transform .25s ease; }
.dotgrid .d.on { background: var(--accent); transform: scale(1.25); }

/* split bar */
.splitbar { display: flex; height: 46px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); font-family: var(--sans); font-weight: 700; color: #fff; }
.splitbar .yes { background: var(--good-ink); display: grid; place-items: center; transition: width .15s ease; }
.splitbar .no { background: var(--bad-ink); display: grid; place-items: center; transition: width .15s ease; }

/* footer */
.endnote { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.5rem 0 4rem; }
.pair-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
  font-family: var(--sans);
}
.pair-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pair-link .pl-k { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pair-link .pl-t { font-size: 1.1rem; font-weight: 600; margin-top: .15rem; }
.pair-link .pl-arrow { font-size: 1.5rem; color: var(--accent); }
.signoff { font-family: var(--sans); font-size: .82rem; color: var(--faint); margin-top: 1.5rem; }

/* The omen footer is the hero's bookend: the same black terminal panel,
   the same phosphor edge and drifting grid, closing the page the way the
   hero opens it. The wordmark signs off, the one-line promise sits under
   it in the serif, and the two doors out ride a phosphor hairline in the
   terminal's mono. */
/* The homepage mirrors the court and carries its endnote inside main, where
   the wrap would constrain it. The full bleed is restated from inside: the
   panel still runs edge to edge and meets the bottom of the page. */
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) main > .endnote {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
}

body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote {
  border-top: 0;
  margin-top: 5.5rem;
  /* full bleed: the terminal runs edge to edge and meets the bottom of the
     page, so the site ends on the screen rather than on paper around it */
  padding: 0;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem) clamp(2.2rem, 4vw, 3rem);
  /* the phosphor edge survives only where the panel meets the page */
  border-top: 1px solid rgba(4, 226, 109, .52);
  background: var(--omm-black);
  color: var(--omm-white);
  text-align: center;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: calc(100% + 340px);
  background: url("brand/omenmarketmaker/card-grid.svg") repeat;
  background-size: 34px 34px;
  pointer-events: none;
  animation: omen-card-grid-scroll 30s linear infinite;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel > * {
  position: relative;
  z-index: 1;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-wordmark {
  width: min(16rem, 64%);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(4, 226, 109, .28));
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel .signoff {
  max-width: 34rem;
  margin: 1.15rem auto 0;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 2.4vw, 1.22rem);
  font-weight: 420;
  line-height: 1.55;
  letter-spacing: .002em;
  color: #d6ddd8;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel .sitemap {
  justify-content: center;
  column-gap: 2.4rem;
  row-gap: .7rem;
  /* the hairline is a rule under the statement, not a horizon: it keeps the
     old panel width while the panel itself runs edge to edge */
  max-width: 40rem;
  margin: 1.7rem auto 0;
  padding-top: 1.45rem;
  border-top: 1px solid rgba(4, 226, 109, .24);
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel .sitemap a {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8fa398;
  transition: color .14s ease, text-shadow .14s ease;
}
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel .sitemap a:hover,
body:is([data-page-brand="omen"], [data-page-brand="neutral"]) .endnote-panel .sitemap a:focus-visible {
  color: var(--omm-mint, #5dfeaa);
  text-shadow: 0 0 10px rgba(4, 226, 109, .55);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page-brand="omen"] .endnote-panel::after { animation: none; }
}

/* reveal animation */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* responsive */
@media (max-width: 640px) {
  body { font-size: 1.08rem; }
  .dotgrid { grid-template-columns: repeat(16, 1fr); }
  .diagram-inner { padding: 1.1rem; }
  .hero { padding-top: 1.6rem; }
}

/* ===== site nav ===== */
.sitenav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--canvas) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.sitenav-inner { position: relative; max-width: 72rem; margin: 0 auto; padding: .55rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.brand { font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand .dot { color: var(--accent); }
.nav-toggle { margin-left: auto; display: none; background: none; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 1.2rem; line-height: 1; padding: .3rem .55rem; cursor: pointer; color: var(--ink); }
.nav-links { min-width: 0; margin-left: auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: .08rem; font-family: var(--sans); font-size: .78rem; }
.nav-links a { display: inline-flex; align-items: baseline; gap: .3rem; color: var(--muted); text-decoration: none; padding: .38rem .46rem; border-radius: 8px; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); background: var(--accent-soft); }
.nav-links a.active { color: var(--accent-ink); font-weight: 600; }
.nav-links .ch { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--accent); }

/* ===== per-page on-ramp ===== */
.takeaway { font-family: var(--sans); font-size: .98rem; line-height: 1.55; color: var(--ink-soft); background: var(--accent-soft); border-radius: 12px; padding: .85rem 1.1rem; margin: 0 0 1.4rem; }
.takeaway b { color: var(--accent-ink); }
.tag-level { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; }
.tag-start { color: var(--good-ink); background: var(--good-soft); }
.tag-deep { color: var(--accent-ink); background: var(--accent-soft); }

/* ===== series prev/next ===== */
.series-top { margin: 0 0 1.35rem; }
.series-top .series-pos { margin-bottom: .45rem; }
.series-top .series-nav { gap: .75rem; margin-bottom: 0; }
.series-top .series-nav a { border-radius: 10px; padding: .62rem .8rem; box-shadow: none; }
.series-top .series-nav a:hover { box-shadow: var(--shadow); }
.series-top .series-nav .dir { font-size: .66rem; }
.series-top .series-nav .ttl { font-size: .92rem; margin-top: .08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-pos { font-family: var(--sans); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 0 0 .8rem; }
.series-nav { display: flex; gap: 1rem; margin: 0 0 2rem; }
.series-nav a { flex: 1 1 0; min-width: 0; font-family: var(--sans); text-decoration: none; border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1.1rem; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease; }
.series-nav a:only-child { flex: 0 1 22rem; max-width: 22rem; }
.series-nav .prev:only-child { margin-right: auto; }
.series-nav .next:only-child { margin-left: auto; }
.series-nav a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.series-nav .dir { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.series-nav .ttl { display: block; font-weight: 600; margin-top: .15rem; }
.series-nav .next { text-align: right; }
.series-handoff-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; margin: 0 0 2rem; }
.series-handoff-layout .series-nav { align-self: stretch; margin: 0; }
.series-handoff-layout .series-nav a { display: flex; flex-direction: column; justify-content: center; }
.series-handoff-copy { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); padding: 1rem 1.1rem; box-shadow: var(--shadow); font-family: var(--sans); }
.series-handoff-copy .eyebrow { color: var(--accent-ink); font-family: var(--mono); font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.series-handoff-copy strong { display: block; margin: .35rem 0 .4rem; color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
.series-handoff-copy .summary { display: block; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* ===== site-map footer ===== */
.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .45rem 1.2rem; font-family: var(--sans); margin: 0 0 1.5rem; }
.sitemap-flat { display: flex; flex-wrap: wrap; column-gap: 1.4rem; row-gap: .45rem; }
.sitemap a { font-size: .9rem; color: var(--muted); text-decoration: none; }
.sitemap a:hover { color: var(--accent-ink); }

/* ===== in-page TOC ===== */
.toc { font-family: var(--sans); }
.toc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.toc ul { list-style: none; }
.toc li a { text-decoration: none; color: var(--faint); display: block; }
.toc li a:hover { color: var(--ink); }
.toc li a.active { color: var(--accent-ink); font-weight: 600; }
@media (min-width: 1500px) {
  .toc { position: fixed; top: calc(var(--sticky-header-bottom, 3.4rem) + 1.1rem); left: max(1.25rem, calc(50% - var(--half-maxw) - 21.5rem)); width: 12rem; max-height: calc(100vh - var(--sticky-header-bottom, 3.4rem) - 3.5rem); overflow: auto; }
  .toc ul { margin: .4rem 0 0; padding: 0; border-left: 2px solid var(--line); }
  .toc li a { padding: .3rem .85rem; font-size: .82rem; border-left: 2px solid transparent; margin-left: -2px; }
  .toc li a.active { border-left-color: var(--accent); }
  .toc-title { margin: 0 0 .2rem .85rem; }
}
@media (max-width: 1499px) {
  .toc { border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1.1rem; margin: 0 0 2rem; background: var(--surface); }
  .toc ul { margin: .5rem 0 0; padding: 0; columns: 2; column-gap: 1.4rem; }
  .toc li { break-inside: avoid; }
  .toc li a { font-size: .85rem; color: var(--accent-ink); padding: .22rem 0; }
}
@media (max-width: 560px) {
  .toc ul { columns: 1; }
}

/* ===== skip link ===== */
.skip-link {
  position: fixed;
  top: .55rem;
  left: .55rem;
  z-index: 90;
  padding: .55rem .9rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - 1rem));
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== back to top ===== */
.to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 40; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.to-top.show { opacity: 1; visibility: visible; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); }

/* ===== home map ===== */
/* Two explicit columns so a card can reliably claim a full row: the tour opens
   on Run-through and closes on Governance at full width, with the paired
   chapters between them. */
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; align-items: stretch; }
.map-grid > [data-span="wide"] { grid-column: 1 / -1; }
@media (max-width: 640px) { .map-grid { grid-template-columns: minmax(0, 1fr); } }
.map-card { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease; }
.map-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.map-card .stage { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.map-card h3 { margin: .35rem 0 .4rem; font-size: 1.15rem; }
.map-card p { font-family: var(--sans); font-size: .9rem; line-height: 1.5; color: var(--muted); margin: 0; }
.map-step { font-family: var(--sans); font-size: .78rem; color: var(--faint); }

/* ===== home map: live on-chain demo =====
   Sits directly under the two court chapters it belongs to, so it wears the
   DemoThemis cyan rather than the mixed-product rim of a chapter button: this
   is the court running for real, not another chapter to read. */
.map-cta {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(var(--dt-emission-rgb), .34);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 180% at 0 50%, rgba(var(--dt-emission-rgb), .1) 0, transparent 62%),
    linear-gradient(180deg, #fff 0, color-mix(in srgb, var(--dt-emission) 4%, var(--surface)) 100%);
  color: var(--ink);
  font-family: var(--sans);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px rgba(var(--dt-emission-rgb), .1),
    0 12px 26px -16px rgba(46, 40, 30, .45);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}
/* A slow cyan sweep across the face — the one thing on the page that signals
   "this is running right now". */
.map-cta-glow {
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: radial-gradient(38% 60% at 50% 50%, rgba(var(--dt-emission-rgb), .16) 0, transparent 70%);
  transform: translateX(-38%);
  animation: map-cta-sweep 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes map-cta-sweep {
  0%, 100% { transform: translateX(-38%); }
  50% { transform: translateX(38%); }
}
.map-cta-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  align-self: flex-start;
  padding: .3rem .6rem;
  border: 1px solid rgba(var(--dt-emission-rgb), .4);
  border-radius: 999px;
  background: color-mix(in srgb, var(--dt-emission) 8%, var(--surface));
  color: var(--dt-emission-ink);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.map-cta-pulse {
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: var(--dt-emission);
  box-shadow: 0 0 0 0 rgba(var(--dt-emission-rgb), .6);
  animation: map-cta-pulse 2.4s ease-out infinite;
}
@keyframes map-cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--dt-emission-rgb), .55); }
  70% { box-shadow: 0 0 0 .5rem rgba(var(--dt-emission-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--dt-emission-rgb), 0); }
}
.map-cta-copy { display: grid; gap: .18rem; min-width: 0; }
.map-cta-title { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.map-cta-sub { font-size: .86rem; line-height: 1.45; color: var(--muted); }
.map-cta-go {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--dt-emission-rgb), .38);
  background: radial-gradient(circle at 50% 30%, #fff 0, color-mix(in srgb, var(--dt-emission) 9%, var(--surface)) 78%);
  color: var(--dt-emission-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 3px rgba(var(--dt-emission-rgb), .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.map-cta:hover {
  transform: translateY(-3px);
  border-color: var(--dt-emission);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px var(--dt-emission),
    0 0 16px rgba(var(--dt-emission-rgb), .26),
    0 18px 32px -18px rgba(46, 40, 30, .5);
}
.map-cta:hover .map-cta-go {
  transform: translateX(3px);
  border-color: var(--dt-emission);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 4px rgba(var(--dt-emission-rgb), .18);
}
.map-cta:active { transform: translateY(-1px); transition-duration: 60ms; }
.map-cta:focus-visible { outline: 2px solid var(--dt-emission-ink); outline-offset: 3px; }
@media (max-width: 640px) {
  .map-cta { flex-wrap: wrap; gap: .7rem; padding: 1rem; }
  .map-cta-go { margin-left: 0; }
  .map-cta-copy { flex: 1 1 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .map-cta-glow, .map-cta-pulse { animation: none; }
  .map-cta, .map-cta-go { transition: none; }
}
@media (forced-colors: active) {
  .map-cta { border: 1px solid ButtonText; }
  .map-cta-glow { display: none; }
}

/* ===== mobile nav ===== */
/* Switch to the menu before the four links can wrap onto a second row. */
@media (max-width: 620px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .05rem; background: var(--surface); border-bottom: 1px solid var(--line); padding: .6rem 1.5rem 1rem; box-shadow: var(--shadow); }
  .sitenav.open .nav-links { display: flex; }
  .nav-links a { padding: .65rem .4rem; text-align: left; }
  .series-handoff-layout { grid-template-columns: 1fr; }
  .series-nav { flex-direction: column; }
  .series-nav a:only-child { flex: 1 1 auto; max-width: none; }
  .series-nav .prev:only-child, .series-nav .next:only-child { margin-left: 0; margin-right: 0; }
  .series-nav .next { text-align: left; }
}

/* ===== shared accessibility helper ===== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== scoped brand identity ===== */
.brand.brand-with-mark {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
}
.brand.brand-with-wordmark {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
}
.brand-nav-wordmark {
  display: block;
  width: clamp(8.5rem, 14vw, 10.5rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .78));
}
.brand-mark {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  object-fit: contain;
}
.brand-word {
  white-space: nowrap;
}
.brand-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.brand-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: .18;
  pointer-events: none;
}
.brand-stage--demothemis {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dt-ink);
  box-shadow: none;
}
.brand-stage--demothemis::after {
  display: none;
}
.brand-stage--omen {
  display: grid;
  min-height: 8rem;
  place-items: center;
  padding: 1rem;
  background-color: var(--omm-black);
  background-image:
    linear-gradient(rgba(4, 226, 109, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 226, 109, .18) 1px, transparent 1px);
  background-size: 38px 38px;
  color: var(--omm-green);
  box-shadow: 0 24px 50px -34px rgba(0, 89, 42, .9);
}
.brand-wordmark {
  display: block;
  width: min(100%, 54rem);
  height: auto;
  object-fit: contain;
}
.brand-stage--demothemis .brand-wordmark {
  max-height: 6.4rem;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .82)) drop-shadow(0 14px 24px rgba(106, 91, 80, .12));
}
.brand-stage--omen .brand-wordmark {
  max-height: 11rem;
}
.brand-hero-lockup {
  margin: 0 0 1.55rem;
}
.brand-hero-mark {
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 0 1.2rem;
  filter: drop-shadow(0 12px 20px rgba(106, 91, 80, .16));
}
.dual-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.4rem;
  padding: .45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dual-brand-lockup span {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--brand-line);
  border-radius: 50%;
  background: var(--brand-surface);
}
.dual-brand-lockup .brand-mark {
  width: 3rem;
  height: 3rem;
}
.dual-brand-lockup i {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--omm-green-dark), var(--line-strong) 48% 52%, var(--dt-accent));
}
.brand-ownership {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 1.8rem;
  padding: .28rem .62rem;
  border: 1px solid var(--brand-line, var(--line));
  border-radius: 999px;
  background: var(--brand-soft, var(--surface));
  color: var(--brand-ink, var(--ink));
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.brand-ownership .brand-mark {
  width: 1.2rem;
  height: 1.2rem;
}
[data-brand="demothemis"] {
  --brand-canvas: var(--dt-canvas);
  --brand-surface: var(--dt-surface);
  --brand-soft: var(--dt-soft);
  --brand-line: var(--dt-border);
  --brand-accent: var(--dt-accent);
  --brand-accent-strong: var(--dt-accent-strong);
  --brand-ink: var(--dt-ink);
  --brand-on-accent: var(--dt-surface);
}
[data-brand="omen"] {
  --brand-canvas: var(--omm-black);
  --brand-surface: var(--omm-light-surface);
  --brand-soft: #dff7e9;
  --brand-line: var(--omm-green-dark);
  --brand-accent: var(--omm-green);
  --brand-accent-strong: var(--omm-green-dark);
  --brand-ink: var(--omm-black);
  --brand-on-accent: var(--omm-black);
}
[data-brand="neutral"],
[data-brand="shared"] {
  --brand-canvas: var(--canvas);
  --brand-surface: var(--surface);
  --brand-soft: var(--bg);
  --brand-line: var(--line-strong);
  --brand-accent: var(--accent);
  --brand-accent-strong: var(--accent-ink);
  --brand-ink: var(--ink);
  --brand-on-accent: #fff;
}
.brand-panel {
  border: 1px solid var(--brand-line, var(--line));
  border-radius: var(--radius);
  background: var(--brand-surface, var(--surface));
  color: var(--brand-ink, var(--ink));
  box-shadow: var(--shadow);
}
.brand-panel[data-brand="demothemis"] {
  background:
    radial-gradient(circle at 100% 0, rgba(204, 195, 188, .34), transparent 13rem),
    var(--dt-brand-gradient);
}
.brand-panel[data-brand="omen"] {
  background:
    linear-gradient(135deg, rgba(4, 226, 109, .1), transparent 18rem),
    var(--omm-light-surface);
}
.brand-panel[data-brand="omen"]::selection {
  background: var(--omm-green);
  color: var(--omm-black);
}
.brand-boundary {
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

/* Homepage product and chapter ownership. */
.product-pair .product[data-brand="demothemis"] {
  --product-color: var(--dt-accent-strong);
  --product-soft: var(--dt-soft);
  border-color: var(--dt-border);
  background:
    radial-gradient(circle at 94% 4%, rgba(204, 195, 188, .34), transparent 17rem),
    var(--dt-brand-gradient);
}
.product-pair .product[data-brand="omen"] {
  --product-color: var(--omm-green);
  --product-soft: var(--omm-dark);
  border-color: color-mix(in srgb, var(--omm-green) 62%, var(--omm-black));
  background:
    radial-gradient(circle at 92% 3%, rgba(4, 226, 109, .16), transparent 18rem),
    var(--omm-black);
  color: var(--omm-white);
  box-shadow: 0 1px 2px rgba(0, 4, 2, .12), 0 24px 54px -30px rgba(0, 89, 42, .75);
}
.product-pair .product[data-brand="omen"]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: calc(100% + 340px);
  background: url("brand/omenmarketmaker/card-grid.svg") repeat;
  background-size: 34px 34px;
  pointer-events: none;
  animation: omen-card-grid-scroll 30s linear infinite;
}
@keyframes omen-card-grid-scroll {
  to { transform: translateX(-340px); }
}
.product-pair .product[data-brand="omen"] .product-kind { color: #a9b9af; }
.product-pair .product[data-brand="omen"] .pk {
  background: rgba(4, 226, 109, .14);
  color: var(--omm-mint);
}
.product-pair .product[data-brand="omen"] .product-tagline { color: var(--omm-white); }
.product-pair .product[data-brand="omen"] ol.product-jumps li {
  border-color: rgba(4, 226, 109, .25);
  background: var(--omm-surface);
}
.product-pair .product[data-brand="omen"] ol.product-jumps li:hover {
  border-color: rgba(4, 226, 109, .56);
  background: #10271a;
}
.product-pair .product[data-brand="omen"] .product-jumps a {
  color: #d7e3db;
  text-decoration: none;
}
.product-pair .product[data-brand="omen"] .product-jumps a:hover,
.product-pair .product[data-brand="omen"] .product-jumps a:focus-visible {
  color: var(--omm-white);
  text-decoration-line: underline;
  text-decoration-color: var(--omm-mint);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
}
body[data-page-brand="omen"] .hero.brand-hero {
  position: relative;
  max-width: 60rem;
  margin-top: 2.4rem;
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid rgba(4, 226, 109, .52);
  border-radius: 26px;
  background: var(--omm-black);
  color: var(--omm-white);
  box-shadow: 0 28px 70px -38px rgba(0, 89, 42, .85);
}
body[data-page-brand="omen"] .hero.brand-hero::before { display: none; }
body[data-page-brand="omen"] .hero.brand-hero::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: calc(100% + 340px);
  background: url("brand/omenmarketmaker/card-grid.svg") repeat;
  background-size: 34px 34px;
  pointer-events: none;
  animation: omen-card-grid-scroll 30s linear infinite;
}
body[data-page-brand="omen"] .hero.brand-hero > * {
  position: relative;
  z-index: 1;
}
body[data-page-brand="omen"] .hero.brand-hero .omen-rive-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
}
body[data-page-brand="omen"] .hero.brand-hero .kicker { color: var(--omm-green); }
body[data-page-brand="omen"] .hero.brand-hero .dek { color: #d6ddd8; }
body[data-page-brand="omen"] .hero.brand-hero .meta { color: #c0cbc4; }
body[data-page-brand="omen"] .hero.brand-hero .pill {
  border-color: var(--omm-green-dark);
  background: rgba(4, 226, 109, .13);
  color: var(--omm-mint);
}

/* DemoThemis reading controls share one material but preserve category colour. */
body[data-page-brand="demothemis"] .reader-tabs {
  border-color: var(--dt-border);
  background: color-mix(in srgb, var(--dt-surface) 90%, transparent);
}
body[data-page-brand="demothemis"] .reader-tab[aria-selected="true"] {
  border-color: var(--dt-accent);
  background: var(--dt-accent);
  color: var(--dt-surface);
  box-shadow: 0 8px 20px rgba(106, 91, 80, .25);
}
body[data-page-brand="demothemis"] :is(
  .reading-category[data-reader-category="problem"],
  .underhood-map > a:nth-child(1)
) {
  --dt-category-accent: #3d9279;
  --dt-category-border: #94c9b9;
  --dt-category-ink: #246d58;
  --dt-category-surface: var(--dt-category-problem-surface);
}
body[data-page-brand="demothemis"] :is(
  .reading-category[data-reader-category="resistance"],
  .underhood-map > a:nth-child(2)
) {
  --dt-category-accent: #7562b7;
  --dt-category-border: #b9afe0;
  --dt-category-ink: #58489a;
  --dt-category-surface: var(--dt-category-resistance-surface);
}
body[data-page-brand="demothemis"] :is(
  .reading-category[data-reader-category="quality"],
  .underhood-map > a:nth-child(3)
) {
  --dt-category-accent: #b77c26;
  --dt-category-border: #dfc18e;
  --dt-category-ink: #8a5a18;
  --dt-category-surface: var(--dt-category-quality-surface);
}
body[data-page-brand="demothemis"] .reading-category .simple-category-heading,
body[data-page-brand="demothemis"] .underhood-map > a {
  border-color: var(--dt-category-border);
  background-color: var(--dt-canvas);
  background-image: var(--dt-category-surface);
}
body[data-page-brand="demothemis"] .underhood-map > a:not(:hover):not(:focus-visible) {
  border-color: var(--dt-category-border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-category-accent) 10%, transparent), var(--shadow);
}
body[data-page-brand="demothemis"] .reading-category .simple-category-heading .sec-label,
body[data-page-brand="demothemis"] .underhood-map > a .eyebrow {
  color: var(--dt-category-ink) !important;
}
body[data-page-brand="demothemis"] .underhood-map > a {
  overflow: hidden;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--dt-category-accent) 13%, transparent) 0, transparent 48%);
}
body[data-page-brand="demothemis"] .underhood-map > a::before {
  display: none;
}
body[data-page-brand="demothemis"] .underhood-map > a .link-cue span {
  border: 1px solid color-mix(in srgb, var(--dt-category-accent) 24%, transparent);
  background: color-mix(in srgb, var(--dt-category-accent) 9%, rgba(255, 255, 255, .9));
  color: var(--dt-category-ink);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-brand="demothemis"] .underhood-map > a:hover .link-cue span {
    border-color: rgba(var(--dt-emission-rgb), .72);
    background: color-mix(in srgb, var(--dt-emission) 10%, var(--dt-surface));
    color: var(--dt-emission-ink);
    box-shadow: 0 0 8px rgba(var(--dt-emission-rgb), .22);
  }
}

/* Omen uses dark structure and electric accents without turning long copy neon. */
body[data-page-brand="omen"] main.content > section {
  position: relative;
  padding-top: .8rem;
}
body[data-page-brand="omen"] main.content > section::before {
  content: "";
  display: block;
  width: min(9rem, 36%);
  height: 4px;
  margin: 0 0 1.15rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--omm-black), var(--omm-green));
}
body[data-page-brand="omen"] .product.market {
  border-color: color-mix(in srgb, var(--omm-green-dark) 55%, var(--line));
  background:
    linear-gradient(180deg, rgba(4, 226, 109, .14), transparent 48%),
    var(--surface);
}
/* The rule above was written for the old homepage's light single-product
   card. The homepage now mirrors the court's: its bay card is the dark
   omen panel from the shared pair styles, so the pair context restates
   itself over the page-brand override, and the summaries the card carries
   get inks chosen for the black ground. */
body[data-page-brand="omen"] .product-pair .product.market[data-brand="omen"] {
  background:
    radial-gradient(circle at 92% 3%, rgba(4, 226, 109, .16), transparent 18rem),
    var(--omm-black);
  color: var(--omm-white);
}
body[data-page-brand="omen"] .product-pair .product[data-brand="omen"] .product-summary {
  color: #cfe0da;
}
body[data-page-brand="omen"] .product-pair .product[data-brand="omen"] .product-summary-label {
  color: var(--omm-mint);
}
body[data-page-brand="omen"] .product.market .pk,
body[data-page-brand="omen"] .sec-label { color: var(--omm-green-dark); }
body[data-page-brand="omen"] .oracle-case[data-brand="demothemis"] {
  border-color: var(--dt-border);
  background:
    linear-gradient(180deg, rgba(var(--dt-emission-rgb), .13), transparent 48%),
    radial-gradient(circle at 100% 0, rgba(204, 195, 188, .34), transparent 12rem),
    var(--dt-surface);
}
body[data-page-brand="omen"] tr[data-brand] td:first-child,
body[data-page-brand="neutral"] tr[data-brand] td:first-child {
  border-left: 4px solid var(--brand-accent-strong);
  color: var(--brand-ink);
  font-weight: 750;
}

/* Mixed pages use product color for ownership and neutral color for meaning. */
body[data-page-brand="neutral"] .amp .node[data-brand] {
  border-color: var(--brand-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-accent-strong) 13%, transparent), transparent 52%),
    var(--brand-surface);
  color: var(--brand-ink);
}
body[data-page-brand="neutral"] .amp .node[data-brand="omen"] {
  background:
    linear-gradient(180deg, rgba(4, 226, 109, .14), transparent 52%),
    linear-gradient(135deg, rgba(4, 226, 109, .13), transparent 8rem),
    var(--omm-light-surface);
}
body[data-page-brand="neutral"] .amp .ar { color: var(--muted); }
body[data-page-brand="neutral"] .test-path-item[data-brand="demothemis"] {
  border-color: color-mix(in srgb, var(--dt-accent-strong) 54%, var(--dt-border));
}
body[data-page-brand="neutral"] section[data-brand="demothemis"] > .sec-label,
body[data-page-brand="neutral"] section[data-brand="demothemis"] > h2 {
  color: var(--dt-accent-strong);
}
body[data-page-brand="neutral"] .houses .house--omen {
  border-color: var(--omm-green-dark) !important;
  background:
    linear-gradient(180deg, rgba(4, 226, 109, .14), transparent 50%),
    linear-gradient(135deg, rgba(4, 226, 109, .12), transparent 10rem),
    var(--omm-light-surface) !important;
}
body[data-page-brand="neutral"] .houses .house--demothemis {
  border-color: var(--dt-border) !important;
  background:
    linear-gradient(180deg, rgba(var(--dt-emission-rgb), .13), transparent 50%),
    radial-gradient(circle at 100% 0, rgba(204, 195, 188, .34), transparent 10rem),
    var(--dt-surface) !important;
}
body[data-page-brand="neutral"] .houses .house--omen .inp::before,
body[data-page-brand="neutral"] .houses .house--omen .out { color: var(--omm-green-dark); }
body[data-page-brand="neutral"] .houses .house--demothemis .inp::before,
body[data-page-brand="neutral"] .houses .house--demothemis .out { color: var(--dt-accent-strong); }
body[data-page-brand="neutral"] .houses .core[data-brand="neutral"] {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
body[data-page-brand="neutral"] .invoice .iv[data-brand] {
  border-color: var(--brand-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-accent-strong) 14%, transparent), transparent 54%),
    var(--brand-surface) !important;
  color: var(--brand-ink) !important;
}
body[data-page-brand="neutral"] section[data-brand="omen"] > .sec-label,
body[data-page-brand="neutral"] section[data-brand="omen"] > h2 { color: var(--omm-green-dark); }

.product[data-brand="demothemis"] .product-summary-label {
  --summary-label-color: var(--dt-accent-strong);
}
.product[data-brand="omen"] .product-summary-label {
  --summary-label-color: var(--omm-green-dark);
}
.omen-rive-shell {
  --omen-wordmark-aspect: 3.8774509804;
  position: relative;
  min-height: clamp(8rem, 24vw, 14rem);
  margin: 0 0 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(4, 226, 109, .48);
  border-radius: 18px;
  background: var(--omm-black);
}
.omen-rive-media {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.omen-rive-media.is-sized {
  inset: auto;
  top: 50%;
  left: 50%;
  width: var(--omen-wordmark-render-width);
  height: var(--omen-wordmark-render-height);
  aspect-ratio: var(--omen-wordmark-aspect);
  transform: translate(-50%, -50%);
}
.omen-rive-shell img,
.omen-rive-shell canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.omen-rive-shell canvas { opacity: 0; transition: opacity .25s ease; }
.omen-rive-shell.is-ready canvas { opacity: 1; }
.omen-rive-shell.is-ready img { opacity: 0; }
.product-logo-lockup--omen.omen-rive-shell {
  min-height: 8.2rem;
  margin: .1rem 0 .4rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.product-logo-lockup--omen.omen-rive-shell img,
.product-logo-lockup--omen.omen-rive-shell canvas {
  object-fit: contain;
}

@media (max-width: 640px) {
  body[data-page-brand] .hero h1 {
    overflow-wrap: anywhere;
  }

  body[data-page-brand] .hero h1 .brand-name {
    overflow-wrap: normal;
    word-break: normal;
  }

  .brand-stage--demothemis { min-height: 0; padding: 0; }
  .product-logo-lockup { min-height: 6rem; }
  body[data-page-brand="omen"] .hero.brand-hero { margin: 1rem .75rem 0; border-radius: 20px; }
  .omen-rive-shell { min-height: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .product-pair .product[data-brand="omen"]::after,
  body[data-page-brand="omen"] .hero.brand-hero::after { animation: none; }
  .omen-rive-shell canvas { display: none; }
  .omen-rive-shell img { opacity: 1 !important; }
}

/* The wordmark in the nav is the same Rive animation the hero runs, in a
   shell stripped to the nav's own footprint: the height the static image
   held, the art's aspect for a definite width, no frame and no ground.
   Doubled class selectors so these outrank the base shell's clamp sizes,
   including the 640px min-height, wherever they sit in this sheet. The
   nav is sticky, so the shell never scrolls out and the observer keeps
   it playing whenever the tab is visible. */
.omen-rive-shell.omen-rive-shell--nav {
  /* Almost the full bar. The art is measured full bleed, solid ink to within
     one pixel of every poster edge, so no inner compensation is needed: the
     shell box is the art box. The bar is 80px tall, its row is set by the
     52px ticker strip inside 13.45px paddings, and the wordmark spans 76px
     of it, two pixels clear of each edge.
     Three constraints meet in the height formula. The art keeps its aspect,
     so width is height times 3.8774. The row must still hold the 824px
     strip, 48px of side padding and a 16px gap, so between 1131 and 1230px
     the height gives way as (100vw - 888px) over the aspect. And the bar
     must not grow, so the block margins hand back everything above the
     2.25rem the brand row was laid out for. */
  --nav-brand-h: clamp(2.1rem, calc((100vw - 888px) / 3.8774), 4.75rem);
  display: block;
  position: relative;
  z-index: 2;
  min-height: 0;
  height: var(--nav-brand-h);
  aspect-ratio: 1582 / 408;
  margin: calc((2.25rem - var(--nav-brand-h)) / 2) 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Stacked, the strip is a drawer and the row is the wordmark and the menu
   key alone, so the width formula above no longer applies: the bar there is
   about 60px and the wordmark spans 54.4px of it. */
@media (max-width: 1130px) {
  .omen-rive-shell.omen-rive-shell--nav { --nav-brand-h: 3.5rem; }
}
.omen-rive-shell.omen-rive-shell--nav img,
.omen-rive-shell.omen-rive-shell--nav canvas {
  /* the bar is black now, so the wordmark sits in a soft phosphor halo */
  filter: drop-shadow(0 0 6px rgba(4, 226, 109, .28));
}

@media (forced-colors: active) {
  .brand-stage,
  .product-brand-stage,
  .omen-rive-shell,
  .brand-panel,
  .map-card[data-brand] { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .map-card[data-brand]::before,
  .map-card[data-brand]::after,
  body[data-page-brand="omen"] .hero.brand-hero::after { display: none; }
}

@media print {
  .brand-stage,
  .product-brand-stage,
  .omen-rive-shell,
  body[data-page-brand="omen"] .hero.brand-hero {
    border: 1px solid #777;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none;
  }
  body[data-page-brand="omen"] .hero.brand-hero::after { display: none; }
  .omen-rive-shell canvas { display: none; }
  .omen-rive-shell img { opacity: 1 !important; }
}

/* The run-through's three constitutional foundations are compact cards, not a flat text row. */
.machine-foundation-grid > .machine-foundation-item:nth-child(1) {
  border: 1px solid var(--triad-mint-border);
  background: var(--triad-mint);
}
.machine-foundation-grid > .machine-foundation-item:nth-child(2) {
  border: 1px solid var(--triad-lavender-border);
  background: var(--triad-lavender);
}
.machine-foundation-grid > .machine-foundation-item:nth-child(3) {
  border: 1px solid var(--triad-amber-border);
  background: var(--triad-amber);
}
.machine-foundation-grid > .machine-foundation-item {
  border-radius: 10px;
  padding: .62rem .68rem;
}


/* ===== focused resolution-oracle MVP ===== */
.mvp-page {
  --mvp-night: #292522;
  --mvp-night-soft: #433c37;
  --mvp-purple: #786a5e;
  --mvp-purple-deep: #6a5b50;
  --mvp-purple-wash: #ece7e3;
  --mvp-mint: #dff4ea;
  --mvp-mint-ink: #087357;
  --mvp-honey: #fff0d4;
  --mvp-honey-ink: #8d5511;
  background:
    radial-gradient(circle at 50% 20rem, rgba(120, 106, 94, .09), transparent 27rem),
    var(--bg);
}

.mvp-content { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.mvp-content > section { margin: clamp(4.2rem, 8vw, 7rem) 0; }
.mvp-content > .mvp-demo-section:first-child { margin-top: 0; }
.mvp-hero { max-width: 72rem; padding-top: clamp(2.4rem, 4.5vw, 4.1rem); padding-bottom: 1.6rem; }
.mvp-hero::before { width: 46rem; height: 25rem; opacity: .78; }
.mvp-hero .brand-stage--demothemis { place-items: center start; }
.mvp-hero .brand-wordmark { margin: 0; object-position: left center; }
.mvp-hero h1 { max-width: 65rem; font-size: clamp(3rem, 7.2vw, 5.85rem); line-height: .96; letter-spacing: -.045em; }
.mvp-hero .dek { max-width: 49rem; margin-top: 1.45rem; font-size: clamp(1.12rem, 2vw, 1.4rem); line-height: 1.55; }
.mvp-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; font-family: var(--sans); }

.mvp-button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .72rem 1.1rem;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  font: 650 .86rem/1.1 var(--sans);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.mvp-button:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.mvp-button.primary { border-color: var(--mvp-purple); background: var(--mvp-purple); color: #fff; }
.mvp-button.primary:hover { background: var(--mvp-purple-deep); }
.mvp-button.secondary { background: rgba(255, 253, 249, .82); backdrop-filter: blur(8px); }

.mvp-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: end; margin-bottom: 1.35rem; }
.mvp-section-head > div { max-width: 49rem; }
.mvp-section-head h2 { max-width: 44rem; }
.mvp-section-head p:last-child { color: var(--muted); }
.mvp-browser-shell {
  overflow: hidden;
  border: 1px solid #292b40;
  border-radius: 24px;
  background: var(--mvp-night);
  box-shadow: 0 34px 78px -35px rgba(20, 20, 35, .62), 0 10px 24px -20px rgba(20, 20, 35, .3);
}
.mvp-browser-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  min-height: 3.35rem;
  border-bottom: 1px solid #303249;
  padding: .65rem .9rem;
  color: #c7cada;
  background: #151624;
  font: 600 .68rem/1 var(--sans);
}
.mvp-window-dots { display: flex; gap: .36rem; }
.mvp-window-dots i { display: block; width: .58rem; height: .58rem; border-radius: 50%; background: #fa7189; }
.mvp-window-dots i:nth-child(2) { background: #f2bb42; }
.mvp-window-dots i:nth-child(3) { background: #4cc99b; }
.mvp-browser-address { overflow: hidden; border: 1px solid #34364d; border-radius: 999px; padding: .49rem .75rem; background: #1c1d2c; color: #999db2; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.mvp-browser-badge { border: 1px solid #786a5e; border-radius: 999px; padding: .38rem .58rem; color: #eee8e3; background: rgba(120, 106, 94, .2); text-transform: uppercase; letter-spacing: .07em; }

.mvp-product-preview { color: var(--ink); background: #f6f5f0; font-family: var(--sans); }
.mvp-product-header { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #e4e0d6; padding: 1rem clamp(1.1rem, 3vw, 2rem); background: rgba(255, 255, 252, .92); }
.mvp-product-brand { display: inline-flex; align-items: center; gap: .7rem; color: #252631; text-decoration: none; }
.mvp-product-brand > span:last-child { display: flex; flex-direction: column; gap: .12rem; }
.mvp-product-brand strong { font-size: .83rem; line-height: 1.1; }
.mvp-product-brand small { color: #777b87; font-size: .61rem; line-height: 1.1; }
.mvp-product-mark { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #786a5e, #6a5b50); box-shadow: 0 8px 18px -10px rgba(106, 91, 80, .75); font: 750 1rem/1 var(--serif); }
.mvp-chain-chip { display: inline-flex; align-items: center; gap: .42rem; border: 1px solid #d9d5cb; border-radius: 999px; padding: .45rem .65rem; color: #595d68; background: #faf9f5; font-size: .65rem; font-weight: 650; line-height: 1; }
.mvp-chain-chip i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(15, 155, 112, .12); }

.mvp-tab-list { display: flex; gap: .35rem; border-bottom: 1px solid #e1ddd3; padding: .65rem clamp(1.1rem, 3vw, 2rem) 0; background: #fffefa; }
.mvp-tab-list button { position: relative; min-height: 3rem; border: 0; border-radius: 9px 9px 0 0; padding: .72rem 1rem .85rem; color: #747784; background: transparent; cursor: pointer; font: 650 .76rem/1 var(--sans); }
.mvp-tab-list button::after { content: ""; position: absolute; right: .7rem; bottom: -1px; left: .7rem; height: 3px; border-radius: 999px 999px 0 0; background: transparent; }
.mvp-tab-list button:hover { color: var(--accent-ink); background: #f8f6ff; }
.mvp-tab-list button[aria-selected="true"] { color: var(--accent-ink); background: var(--mvp-purple-wash); }
.mvp-tab-list button[aria-selected="true"]::after { background: var(--mvp-purple); }
.mvp-tab-list button:focus-visible { outline-offset: -3px; }
.mvp-tab-panel { padding: clamp(1.05rem, 3vw, 2rem); }
.mvp-tab-panel[hidden] { display: none; }
.mvp-preview-label { display: flex; align-items: center; gap: .4rem; margin: 0 0 .85rem; color: #6d688b; font: 650 .65rem/1.35 var(--sans); }
.mvp-preview-label > span { color: var(--mvp-purple); font-size: .72rem; }

.mvp-case-layout { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(19rem, .83fr); gap: 1rem; align-items: stretch; }
.mvp-case-card { display: flex; min-height: 27rem; flex-direction: column; border: 1px solid #ded9ce; border-radius: 18px; padding: clamp(1.2rem, 3vw, 2rem); background: #fffefa; box-shadow: 0 18px 42px -34px rgba(31, 29, 42, .45); }
.mvp-case-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1.5rem; color: #737681; font-size: .64rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.mvp-case-state { border: 1px solid #d4cac2; border-radius: 999px; padding: .36rem .55rem; color: #6a5b50; background: #ece7e3; letter-spacing: 0; text-transform: none; }
.mvp-case-card h3 { max-width: 42rem; margin: 0 0 1.7rem; color: #292834; font: 560 clamp(1.45rem, 3vw, 2.15rem)/1.2 var(--serif); letter-spacing: -.015em; }
.mvp-case-criteria { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(10rem, .7fr); gap: .7rem; margin: 0; }
.mvp-case-criteria > div { border: 1px solid #e2ded4; border-radius: 13px; padding: .9rem; background: #f9f8f4; }
.mvp-case-criteria > div.is-yes { border-color: #bddfce; background: #edf8f3; }
.mvp-case-criteria dt { margin-bottom: .4rem; color: #777a84; font-size: .6rem; font-weight: 750; line-height: 1; letter-spacing: .075em; text-transform: uppercase; }
.mvp-case-criteria .is-yes dt { color: var(--mvp-mint-ink); }
.mvp-case-criteria dd { margin: 0; color: #3f424b; font-size: .76rem; line-height: 1.52; }
.mvp-research-rule { margin: auto 0 0; border-top: 1px solid #ebe7de; padding-top: 1.05rem; color: #6a6d77; font-size: .7rem; line-height: 1.55; }
.mvp-research-rule strong { color: #3d4049; }

.mvp-resolution-card { overflow: hidden; border: 1px solid #50463f; border-radius: 18px; padding: clamp(1.2rem, 2.5vw, 1.65rem); color: #fff; background: radial-gradient(circle at 100% 0, rgba(120, 106, 94, .36), transparent 15rem), linear-gradient(145deg, #292522, #1d1a18); box-shadow: 0 20px 44px -34px rgba(20, 17, 15, .82); }
.mvp-resolution-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.mvp-mini-label { display: block; margin-bottom: .35rem; color: #777b88; font-size: .58rem; font-weight: 750; line-height: 1; letter-spacing: .09em; text-transform: uppercase; }
.mvp-resolution-head .mvp-mini-label { color: #aaa8c2; }
.mvp-resolution-head h3 { margin: 0; color: #f7f6ff; font-size: 1rem; }
.mvp-seat-count { display: inline-flex; align-items: baseline; gap: .25rem; border: 1px solid #42445d; border-radius: 999px; padding: .38rem .55rem; color: #b9bbcc; font-size: .58rem; line-height: 1; }
.mvp-seat-count strong { color: #fff; font: 750 .76rem/1 var(--mono); }
.mvp-resolution-steps { margin: 0; padding: 0; list-style: none; }
.mvp-resolution-steps li { position: relative; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .65rem 0; }
.mvp-resolution-steps li + li { margin-top: .45rem; }
.mvp-resolution-steps li:not(:last-child)::after { content: ""; position: absolute; top: 3.4rem; bottom: -.55rem; left: 1.32rem; width: 1px; background: #393b50; }
.mvp-resolution-steps li > span:last-child { display: flex; flex-direction: column; gap: .25rem; }
.mvp-resolution-steps strong { color: #f6f5ff; font-size: .78rem; line-height: 1.15; }
.mvp-resolution-steps small { color: #aaadbd; font-size: .65rem; line-height: 1.45; }
.mvp-step-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid #4d4f66; border-radius: 12px; background: #282a3c; }
.mvp-step-icon svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mvp-step-icon.is-seal { color: #d8cec7; background: rgba(120, 106, 94, .22); }
.mvp-step-icon.is-reveal { color: #6fd5b1; background: rgba(15, 155, 112, .16); }
.mvp-step-icon.is-ruling { color: #f2bd64; background: rgba(181, 108, 18, .16); }
.mvp-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; border: 1px solid #e0dcd2; border-radius: 13px; padding: .78rem .9rem; color: #666a74; background: #fffefa; font-size: .68rem; }
.mvp-product-footer > span { display: inline-flex; align-items: center; gap: .45rem; }
.mvp-product-footer i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(15, 155, 112, .12); }
.mvp-product-footer a { color: var(--accent-ink); font-weight: 750; text-decoration: none; }

.mvp-submit-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .65fr); gap: 1rem; align-items: stretch; }
.mvp-submit-card { border: 1px solid #ded9ce; border-radius: 18px; padding: clamp(1.2rem, 3vw, 2rem); background: #fffefa; box-shadow: 0 18px 42px -34px rgba(31, 29, 42, .45); }
.mvp-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.mvp-form-heading h3 { margin: 0; color: #292834; font: 560 1.55rem/1.15 var(--serif); }
.mvp-form-step { border: 1px solid #ddd8ce; border-radius: 999px; padding: .4rem .55rem; color: #777a84; background: #f8f7f3; font: 700 .6rem/1 var(--mono); }
.mvp-field { display: block; margin-top: .9rem; color: #383b45; font-size: .69rem; font-weight: 700; }
.mvp-field > span { display: flex; justify-content: space-between; gap: .7rem; margin-bottom: .4rem; }
.mvp-field small { color: #91949d; font-size: .58rem; font-weight: 600; }
.mvp-field input, .mvp-field textarea { display: block; width: 100%; border: 1px solid #dcd7cd; border-radius: 11px; padding: .72rem .78rem; color: #393c45; background: #faf9f5; font: 500 .72rem/1.48 var(--sans); resize: none; }
.mvp-field input:focus, .mvp-field textarea:focus { border-color: #ab9e94; outline: 2px solid rgba(120, 106, 94, .13); }
.mvp-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, .45fr); gap: .75rem; align-items: end; }
.mvp-fee-field { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: .6rem; border: 1px solid #dcd7cd; border-radius: 11px; padding: .72rem .78rem; background: var(--mvp-honey); }
.mvp-fee-field > span { color: #766140; font-size: .6rem; font-weight: 700; }
.mvp-fee-field output { color: var(--mvp-honey-ink); font: 750 .73rem/1 var(--mono); }
.mvp-submit-action { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem; margin-top: 1.15rem; border-radius: 11px; color: #fff; background: var(--mvp-purple); font-size: .72rem; font-weight: 750; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.mvp-submit-action:hover { background: var(--mvp-purple-deep); transform: translateY(-1px); }
.mvp-submit-note { position: relative; overflow: hidden; border: 1px solid #d4cac2; border-radius: 18px; padding: clamp(1.2rem, 3vw, 2rem); background: radial-gradient(circle at 100% 0, #e9e8e5, transparent 15rem), linear-gradient(145deg, #f6f3f2, #ece7e3); }
.mvp-submit-note-icon { display: grid; width: 2.7rem; height: 2.7rem; margin-bottom: 1.4rem; place-items: center; border-radius: 12px; color: #fff; background: var(--mvp-purple); box-shadow: 0 12px 22px -14px rgba(106, 91, 80, .75); }
.mvp-submit-note-icon svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mvp-submit-note h3 { margin: 0 0 1.2rem; color: #2d2950; font: 560 1.45rem/1.15 var(--serif); }
.mvp-submit-note ol { margin: 0; padding: 0; list-style: none; }
.mvp-submit-note li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .6rem; color: #565271; font-size: .68rem; line-height: 1.45; }
.mvp-submit-note li + li { margin-top: .85rem; }
.mvp-submit-note li > span { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border: 1px solid #ccc3bc; border-radius: 50%; color: #6a5b50; background: rgba(255, 255, 255, .66); font: 750 .57rem/1 var(--mono); }
.mvp-submit-source-note { margin: 1.35rem 0 0; border-top: 1px solid rgba(120, 106, 94, .2); padding-top: 1rem; color: #6f655e; font-size: .65rem; line-height: 1.5; }

.mvp-queue-section { display: grid; grid-template-columns: minmax(17rem, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; border: 1px solid var(--line-strong); border-radius: 24px; padding: clamp(1.5rem, 5vw, 3.5rem); background: linear-gradient(135deg, rgba(255, 253, 249, .96), rgba(233, 232, 229, .72)); box-shadow: var(--shadow); }
.mvp-queue-copy h2 { max-width: 28rem; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.04; }
.mvp-queue-copy > p:last-child { max-width: 30rem; color: var(--muted); font-size: 1rem; line-height: 1.62; }
.mvp-queue-flow { position: relative; margin: 0; padding: 0; list-style: none; }
.mvp-queue-flow::before { content: ""; position: absolute; top: 1.6rem; bottom: 1.6rem; left: 1.45rem; width: 1px; background: linear-gradient(var(--mvp-purple), var(--good), #c38124); }
.mvp-queue-flow li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .85rem; align-items: center; }
.mvp-queue-flow li + li { margin-top: 1.05rem; }
.mvp-queue-number { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid #d4cac2; border-radius: 13px; color: var(--accent-ink); background: #ece7e3; box-shadow: 0 8px 18px -15px rgba(106, 91, 80, .6); font: 750 .68rem/1 var(--mono); z-index: 1; }
.mvp-queue-flow li:nth-child(2) .mvp-queue-number { border-color: #bddfce; color: var(--mvp-mint-ink); background: var(--mvp-mint); }
.mvp-queue-flow li:nth-child(3) .mvp-queue-number { border-color: #efd7aa; color: var(--mvp-honey-ink); background: var(--mvp-honey); }
.mvp-queue-flow li:nth-child(4) .mvp-queue-number { border-color: #d4cac2; color: var(--accent-ink); background: #ece7e3; }
.mvp-queue-flow li > div { display: flex; flex-direction: column; gap: .18rem; }
.mvp-queue-flow strong { color: var(--ink); font: 700 .82rem/1.2 var(--sans); }
.mvp-queue-flow small { color: var(--muted); font: 500 .69rem/1.45 var(--sans); }

.mvp-proof-section { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); }
.mvp-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mvp-proof-card { position: relative; min-height: 18.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; padding: 1.35rem; background: var(--surface); box-shadow: var(--shadow); font-family: var(--sans); }
.mvp-proof-card::after { content: ""; position: absolute; right: -2.5rem; bottom: -3.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: rgba(255, 255, 255, .48); }
.mvp-proof-card.is-question { border-color: var(--triad-mint-border); background: linear-gradient(145deg, var(--triad-mint), #f6fbf8); }
.mvp-proof-card.is-ballot { border-color: var(--triad-lavender-border); background: linear-gradient(145deg, var(--triad-lavender), #f6f3f2); }
.mvp-proof-card.is-answer { border-color: var(--triad-amber-border); background: linear-gradient(145deg, var(--triad-amber), #fffaf0); }
.mvp-proof-number { display: grid; width: 3.3rem; height: 3.3rem; margin-bottom: 2rem; place-items: center; border: 1px solid rgba(255, 255, 255, .65); border-radius: 14px; color: #fff; background: var(--good-ink); box-shadow: 0 10px 22px -15px rgba(15, 115, 84, .7); font: 750 .7rem/1 var(--mono); }
.mvp-proof-card.is-ballot .mvp-proof-number { background: var(--mvp-purple); box-shadow: 0 10px 22px -15px rgba(106, 91, 80, .7); }
.mvp-proof-card.is-answer .mvp-proof-number { background: #b56c12; box-shadow: 0 10px 22px -15px rgba(141, 85, 17, .7); }
.mvp-proof-kicker { display: block; margin-bottom: .55rem; color: var(--faint); font: 750 .61rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.mvp-proof-card h3 { margin-bottom: .7rem; font-size: 1.15rem; }
.mvp-proof-card p { position: relative; max-width: 20rem; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.6; z-index: 1; }

.mvp-roadmap-section { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); }
.mvp-roadmap-section .mvp-section-head { margin-bottom: 1.75rem; }
.mvp-comparison-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background:
    linear-gradient(180deg, transparent 0, rgba(255, 253, 249, .92) 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--good) 13%, #fffdf9), color-mix(in srgb, var(--mvp-purple) 13%, #fffdf9));
  box-shadow: 0 28px 65px -40px rgba(41, 37, 34, .48);
}
.mvp-comparison-shell::before { display: none; }
.mvp-comparison-row { display: grid; grid-template-columns: minmax(9rem, .52fr) repeat(2, minmax(0, 1fr)); }
.mvp-comparison-row + .mvp-comparison-row { border-top: 1px solid var(--line); }
.mvp-comparison-row > * { min-width: 0; padding: 1.25rem clamp(1rem, 2.3vw, 1.5rem); }
.mvp-comparison-row > * + * { border-left: 1px solid var(--line); }
.mvp-comparison-header { padding-top: 4px; background: #f8f6f1; }
.mvp-comparison-axis { display: flex; align-items: end; color: var(--faint); font: 750 .59rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.mvp-comparison-heading { display: flex; min-height: 5.2rem; flex-direction: column; justify-content: center; gap: .38rem; }
.mvp-comparison-heading.is-live { background: linear-gradient(135deg, rgba(223, 244, 234, .9), rgba(249, 252, 249, .8)); }
.mvp-comparison-heading.is-roadmap { background: linear-gradient(135deg, rgba(233, 232, 229, .92), rgba(251, 249, 247, .78)); }
.mvp-comparison-heading > span { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font: 750 .85rem/1.2 var(--sans); }
.mvp-comparison-heading.is-live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(15, 155, 112, .12); }
.mvp-comparison-heading.is-roadmap b { color: var(--mvp-purple); font-size: 1rem; }
.mvp-comparison-heading small { color: var(--muted); font: 600 .64rem/1.35 var(--sans); }
.mvp-comparison-table { border-top: 1px solid var(--line); }
.mvp-comparison-table > .mvp-comparison-row { transition: background .16s ease; }
.mvp-comparison-table > .mvp-comparison-row:hover { background: rgba(247, 245, 239, .62); }
.mvp-comparison-label { display: flex; align-items: flex-start; gap: .65rem; background: #fbfaf6; }
.mvp-comparison-label span { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border: 1px solid #d4cac2; border-radius: 9px; color: var(--mvp-purple-deep); background: #ece7e3; font: 750 .55rem/1 var(--mono); }
.mvp-comparison-label strong { padding-top: .34rem; color: var(--ink); font: 750 .7rem/1.25 var(--sans); }
.mvp-comparison-cell { position: relative; }
.mvp-comparison-cell.is-live { background: rgba(255, 255, 252, .62); }
.mvp-comparison-cell.is-roadmap { background: rgba(242, 239, 236, .58); }
.mvp-comparison-cell-kicker { display: inline-flex; margin-bottom: .48rem; align-items: center; border-radius: 999px; padding: .27rem .5rem; color: var(--mvp-mint-ink); background: var(--mvp-mint); font: 750 .55rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.mvp-comparison-cell.is-roadmap .mvp-comparison-cell-kicker { color: var(--mvp-purple-deep); background: var(--mvp-purple-wash); }
.mvp-comparison-cell strong { display: block; color: var(--ink); font: 700 .83rem/1.3 var(--sans); }
.mvp-comparison-cell p { max-width: 28rem; margin: .38rem 0 0; color: var(--muted); font: 500 .7rem/1.55 var(--sans); }
.mvp-comparison-note { display: grid; grid-template-columns: minmax(9rem, .52fr) minmax(0, 2fr); gap: 1rem; align-items: center; border-top: 1px solid var(--dt-border); padding: 1.1rem clamp(1rem, 2.3vw, 1.5rem); color: var(--dt-ink); background: radial-gradient(circle at 85% 0, rgba(204, 195, 188, .34), transparent 18rem), var(--dt-soft); }
.mvp-comparison-note span { color: var(--dt-accent-strong); font: 750 .59rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.mvp-comparison-note p { max-width: 53rem; margin: 0; color: var(--muted); font: 500 .69rem/1.55 var(--sans); }

.mvp-scope-note { display: grid; grid-template-columns: minmax(17rem, .85fr) minmax(18rem, 1.15fr) auto; gap: 1rem 2rem; align-items: center; margin: clamp(4.5rem, 8vw, 7rem) 0; border: 1px solid var(--dt-border); border-radius: 24px; padding: clamp(1.5rem, 4vw, 2.5rem); color: var(--dt-ink); background: radial-gradient(circle at 85% 0, rgba(204, 195, 188, .34), transparent 20rem), var(--dt-soft); box-shadow: 0 28px 60px -35px rgba(106, 91, 80, .38); }
.mvp-scope-note .sec-label { color: var(--dt-accent-strong); }
.mvp-scope-note h2 { margin: 0; color: var(--dt-ink); }
.mvp-scope-note > p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }
.mvp-scope-note .mvp-button { grid-column: auto; justify-self: end; white-space: nowrap; }

@media (max-width: 960px) {
  .mvp-case-layout, .mvp-submit-layout { grid-template-columns: 1fr; }
  .mvp-case-card { min-height: 0; }
  .mvp-resolution-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .mvp-resolution-steps li { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); }
  .mvp-resolution-steps li + li { margin-top: 0; }
  .mvp-resolution-steps li::after { display: none; }
  .mvp-proof-grid { grid-template-columns: 1fr; }
  .mvp-proof-card { min-height: 0; }
  .mvp-proof-number { margin-bottom: 1.4rem; }
  .mvp-comparison-row { grid-template-columns: minmax(8rem, .42fr) repeat(2, minmax(0, 1fr)); }
  .mvp-comparison-row > * { padding: 1.05rem; }
  .mvp-scope-note { grid-template-columns: 1fr 1fr; }
  .mvp-scope-note .mvp-button { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .mvp-section-head { grid-template-columns: 1fr; }
  .mvp-case-criteria { grid-template-columns: 1fr; }
  .mvp-resolution-steps { grid-template-columns: 1fr; }
  .mvp-resolution-steps li + li { margin-top: .35rem; }
  .mvp-queue-section { grid-template-columns: 1fr; }
  .mvp-comparison-row:not(.mvp-comparison-header) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mvp-comparison-row:not(.mvp-comparison-header) .mvp-comparison-label { grid-column: 1 / -1; align-items: center; border-bottom: 1px solid var(--line); }
  .mvp-comparison-row:not(.mvp-comparison-header) .mvp-comparison-cell.is-live { border-left: 0; }
  .mvp-comparison-note { grid-template-columns: 1fr; gap: .45rem; }
  .mvp-scope-note { grid-template-columns: 1fr; }
  .mvp-scope-note .mvp-button { grid-column: 1; }
}

@media (max-width: 600px) {
  .mvp-content { padding-inline: 1rem; }
  .mvp-hero { padding-inline: 1rem; }
  .mvp-hero h1 { font-size: 2.8rem; }
  .mvp-browser-shell { border-radius: 17px; }
  .mvp-browser-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .mvp-window-dots { display: none; }
  .mvp-browser-address { text-align: left; }
  .mvp-product-header { align-items: flex-start; flex-direction: column; }
  .mvp-chain-chip { align-self: flex-start; }
  .mvp-tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: .75rem; }
  .mvp-tab-list button { padding-inline: .45rem; }
  .mvp-tab-panel { padding: .85rem; }
  .mvp-case-eyebrow { align-items: flex-start; flex-direction: column; }
  .mvp-product-footer { align-items: flex-start; flex-direction: column; }
  .mvp-form-row { grid-template-columns: 1fr; }
  .mvp-queue-section, .mvp-comparison-shell, .mvp-scope-note { border-radius: 18px; }
}

@media (max-width: 420px) {
  .mvp-hero-actions, .mvp-hero-actions .mvp-button { width: 100%; }
  .mvp-browser-badge { display: none; }
  .mvp-browser-bar { grid-template-columns: 1fr; }
  .mvp-comparison-header { grid-template-columns: 1fr 1fr; }
  .mvp-comparison-header .mvp-comparison-axis { display: none; }
  .mvp-comparison-header .mvp-comparison-heading { min-height: 4.8rem; padding: .85rem .75rem; }
  .mvp-comparison-header .mvp-comparison-heading.is-live { border-left: 0; }
  .mvp-comparison-heading > span { font-size: .69rem; }
  .mvp-comparison-heading small { font-size: .56rem; }
  .mvp-comparison-row:not(.mvp-comparison-header) { grid-template-columns: 1fr; }
  .mvp-comparison-row:not(.mvp-comparison-header) .mvp-comparison-label,
  .mvp-comparison-row:not(.mvp-comparison-header) .mvp-comparison-cell { grid-column: 1; }
  .mvp-comparison-row:not(.mvp-comparison-header) .mvp-comparison-cell.is-roadmap { border-top: 1px dashed #d4cac2; border-left: 0; }
}

/* ===== refinement: readability & polish ===== */
html { accent-color: var(--accent); }

/* visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .nav-toggle:focus-visible { outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* tidy line breaks: fewer ragged paragraphs; headings wrap naturally so they
   fill their column instead of balancing onto short lines */
p, li, figcaption { text-wrap: pretty; }

/* keep anchored sections clear of the sticky nav when jumping via the TOC */
.content > section, [id] { scroll-margin-top: 5.5rem; }

img, svg, video { max-width: 100%; height: auto; }
hr { border: none; border-top: 1px solid var(--line); margin: 2.6rem 0; }

/* gentle, cohesive scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); background-clip: padding-box; border-radius: 999px; border: 3px solid transparent; }
::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }

@media (max-width: 360px) {
  body { font-size: 1rem; }
  .wrap,
  .sitenav-inner { padding-left: .75rem; padding-right: .75rem; }
  .hero { padding: 1.3rem .75rem .8rem; }
  .hero h1 { font-size: clamp(2rem, 13vw, 2.4rem); }
  .dek { font-size: 1.08rem; line-height: 1.48; }
  .meta { gap: .42rem; }
  .sitemap { grid-template-columns: minmax(0, 1fr); }
}

/* inline links: smoother, clearer hover */
a { transition: color .15s ease, text-decoration-color .15s ease; }
.content p a:hover, .content li a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* nav: clearer current page + smoother hover */
.nav-links a { transition: color .15s ease, background .15s ease; }
.nav-links a.active { background: var(--accent-soft); }


/* Tippy.js DemoThemis Theme */
.tippy-box[data-theme~='DemoThemis'] {
  background-color: var(--ink, #1a1a1c);
  color: #fff;
  border-radius: 6px;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.3rem 0.2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
}
.tippy-box[data-theme~='DemoThemis'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--ink, #1a1a1c);
}
.tippy-box[data-theme~='DemoThemis'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--ink, #1a1a1c);
}
.tippy-box[data-theme~='DemoThemis'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--ink, #1a1a1c);
}
.tippy-box[data-theme~='DemoThemis'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--ink, #1a1a1c);
}

/* ===== DemoThemis emission system: underline, equal rim, illustration ===== */

/* 1. Text navigation uses a bar, never a surrounding capsule. */
body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :is(.brand, .nav-links a) {
  position: relative;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :is(.brand, .nav-links a)::after {
  position: absolute;
  right: .46rem;
  bottom: .12rem;
  left: .46rem;
  height: 2px;
  border-radius: 999px;
  background: var(--dt-emission);
  box-shadow: 0 0 6px rgba(var(--dt-emission-rgb), .32);
  content: "";
  opacity: .22;
  transform: scaleX(.3);
  transform-origin: center;
  transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

@media (max-width: 620px) {
  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-links a::after {
    right: auto;
    width: 30%;
    transform: none;
    transform-origin: left center;
    transition: width 180ms ease, opacity 140ms ease, box-shadow 140ms ease;
  }

  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-links a:is(:hover, :focus-visible, .active)::after {
    width: calc(100% - .92rem);
    transform: none;
  }
}

body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .brand.brand-with-wordmark::after {
  right: 0;
  top: calc(50% + clamp(.52rem, .856vw, .642rem) + 3px);
  bottom: auto;
  left: 0;
  height: auto;
  aspect-ratio: 84 / 1;
  background: var(--dt-wordmark-underline);
  box-shadow: none;
  clip-path: var(--dt-wordmark-underline-shape);
  filter: var(--dt-wordmark-underline-idle-filter);
  opacity: .52;
  transform: scaleX(1);
  transition: opacity 140ms ease, filter 140ms ease;
}

.dt-wordmark-emission {
  position: relative;
  display: block;
  width: min(100%, 54rem);
  line-height: 0;
}

.product-logo-lockup--demothemis .dt-wordmark-emission {
  width: min(100%, 25rem);
}

.dt-wordmark-emission::after {
  position: absolute;
  right: 0;
  top: calc(100% + 3px);
  bottom: auto;
  left: 0;
  height: auto;
  aspect-ratio: 84 / 1;
  border-radius: 999px;
  background: var(--dt-wordmark-underline);
  clip-path: var(--dt-wordmark-underline-shape);
  content: "";
  filter: var(--dt-wordmark-underline-idle-filter);
  opacity: .52;
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: center;
  transition: opacity 140ms ease, filter 140ms ease;
}

body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-links a.active {
  background: transparent;
  color: var(--dt-emission-ink);
}

body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-links a.active::after {
  opacity: .78;
  transform: scaleX(1);
  box-shadow: 0 0 8px rgba(var(--dt-emission-rgb), .42);
}

body[data-page-brand="demothemis"] :is(.toc li a, .sitemap a),
body[data-page-brand="neutral"] [data-brand="demothemis"] a:not(.btn) {
  color: var(--dt-emission-ink);
  text-decoration-line: underline;
  text-decoration-color: rgba(var(--dt-emission-rgb), .38);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  text-decoration-skip-ink: auto;
  transition: color 140ms ease, text-decoration-color 140ms ease, text-shadow 140ms ease;
}

body[data-page-brand="demothemis"] :is(.content p, .content li) > a:not(.btn):not(.map-card):not(.pair-link) {
  color: var(--dt-emission-ink);
  text-decoration-color: rgba(var(--dt-emission-rgb), .46);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* 2. Operable surfaces receive one equal stroke and a centred, zero-offset halo. */
body[data-page-brand="demothemis"] :is(
  .btn,
  .nav-toggle,
  .to-top,
  .reader-tab,
  .preset,
  .lab-tab,
  label.lock,
  .fine-controls > summary,
  .assumption-drawer > summary,
  .stress-row > summary,
  .underhood-map a,
  .series-nav a,
  .pair-link,
  .map-card,
  .mvp-button,
  .mvp-tab-list button,
  .mvp-submit-action,
  .mvp-preview-disclosure summary
),
body[data-page-brand="neutral"] :is(
  .map-card[data-brand="demothemis"],
  [data-brand="demothemis"] .pair-link,
  [data-brand="demothemis"] a.btn
) {
  border-color: rgba(var(--dt-emission-rgb), .24);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .12), 0 0 5px rgba(var(--dt-emission-rgb), .06);
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 70ms ease;
}

body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-toggle {
  border-color: rgba(var(--dt-emission-rgb), .34);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .14), 0 0 5px rgba(var(--dt-emission-rgb), .07);
}

body[data-page-brand="demothemis"] .reader-tab[aria-selected="true"],
body[data-page-brand="demothemis"] .lab-tab[aria-selected="true"],
body[data-page-brand="demothemis"] .mvp-tab-list button[aria-selected="true"],
body[data-page-brand="demothemis"] .preset[aria-pressed="true"],
body[data-page-brand="demothemis"] .seg button.active,
body[data-page-brand="demothemis"] label.lock:has(input:checked),
body[data-page-brand="demothemis"] details[open] > summary {
  border-color: rgba(var(--dt-emission-rgb), .78);
  background-color: color-mix(in srgb, var(--dt-emission) 8%, var(--surface));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .64), 0 0 9px rgba(var(--dt-emission-rgb), .24);
}

/* Primary actions stay within the ivory material system; cyan supplies hierarchy as light. */
body[data-page-brand="demothemis"] :is(.mvp-button.primary, .mvp-submit-action):not(:disabled) {
  border-color: rgba(var(--dt-emission-rgb), .52);
  background: color-mix(in srgb, var(--dt-emission) 5%, var(--dt-surface));
  color: var(--dt-ink);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .24), 0 0 7px rgba(var(--dt-emission-rgb), .11);
}

body[data-page-brand="demothemis"] :is(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select
) {
  border-color: rgba(var(--dt-emission-rgb), .22);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .08);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

body[data-page-brand="demothemis"] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--dt-emission-ink);
}

body[data-page-brand="demothemis"] input[type="range"] {
  --range-fill-color: var(--dt-emission-ink);
  --range-thumb-color: var(--dt-emission-ink);
  --range-thumb-outline: var(--dt-emission);
  --range-focus-ring: rgba(var(--dt-emission-rgb), .32);
}

/* 3. Monochrome teaching graphics gain quiet colour at rest and an equal hover rim. */
body[data-page-brand="demothemis"] :is(
  .simple-step,
  .simple-card,
  .stepper .step-body,
  .diagram-inner,
  .flow .node,
  .widget
) {
  border-color: rgba(var(--dt-emission-rgb), .2);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .07), var(--shadow);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body[data-page-brand="demothemis"] .simple-step-marker,
body[data-page-brand="demothemis"] .simple-card .num,
body[data-page-brand="demothemis"] .step-n {
  border-color: rgba(var(--dt-emission-rgb), .54);
  background: color-mix(in srgb, var(--dt-emission) 11%, var(--surface));
  color: var(--dt-emission-ink);
  box-shadow: 0 0 7px rgba(var(--dt-emission-rgb), .13);
}

body[data-page-brand="demothemis"] .simple-step-marker::after {
  background: var(--dt-emission-ink);
  box-shadow: 0 0 7px rgba(var(--dt-emission-rgb), .3);
}

body[data-page-brand="demothemis"] .simple-loop,
body[data-page-brand="demothemis"] .stepper {
  --dt-illustration-line: rgba(var(--dt-emission-rgb), .38);
}

body[data-page-brand="demothemis"] .stepper li:not(:last-child)::before {
  background: linear-gradient(var(--dt-illustration-line), var(--line));
}

body[data-page-brand="demothemis"] .flow .arrow {
  color: var(--dt-emission-ink);
  text-shadow: 0 0 7px rgba(var(--dt-emission-rgb), .28);
}

body[data-page-brand="demothemis"] .flow .node.is-accent {
  border-color: rgba(var(--dt-emission-rgb), .58);
  background: color-mix(in srgb, var(--dt-emission) 10%, var(--surface));
}

body[data-page-brand="demothemis"] .widget:focus-within {
  border-color: rgba(var(--dt-emission-rgb), .74);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .62), 0 0 10px rgba(var(--dt-emission-rgb), .22);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :is(.brand, .nav-links a):hover::after {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 8px rgba(var(--dt-emission-rgb), .48);
  }

  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .brand.brand-with-wordmark:hover::after {
    filter: var(--dt-wordmark-underline-hover-filter);
  }

  .dt-wordmark-emission:hover::after {
    filter: var(--dt-wordmark-underline-hover-filter);
    opacity: 1;
  }

  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-links a:hover {
    background: transparent;
    color: var(--dt-emission-ink);
  }

  body[data-page-brand="demothemis"] :is(.toc li a, .sitemap a):hover,
  body[data-page-brand="demothemis"] :is(.content p, .content li) > a:not(.btn):not(.map-card):not(.pair-link):hover,
  body[data-page-brand="neutral"] [data-brand="demothemis"] a:not(.btn):hover {
    color: var(--dt-emission-ink);
    text-decoration-color: var(--dt-emission);
    text-decoration-thickness: 2px;
    text-shadow: 0 0 7px rgba(var(--dt-emission-rgb), .24);
  }

  body[data-page-brand="demothemis"] :is(
    .btn,
    .nav-toggle,
    .to-top,
    .reader-tab,
    .preset,
    .lab-tab,
    label.lock,
    .fine-controls > summary,
    .assumption-drawer > summary,
    .stress-row > summary,
    .underhood-map a,
    .series-nav a,
    .pair-link,
    .map-card,
    .mvp-button,
    .mvp-tab-list button,
    .mvp-submit-action,
    .mvp-preview-disclosure summary
  ):not(:disabled):hover,
  body[data-page-brand="neutral"] :is(
    .map-card[data-brand="demothemis"],
    [data-brand="demothemis"] .pair-link,
    [data-brand="demothemis"] a.btn
  ):hover,
  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-toggle:hover {
    border-color: var(--dt-emission);
    box-shadow: 0 0 0 1px var(--dt-emission), 0 0 10px rgba(var(--dt-emission-rgb), .32);
    filter: none;
  }

  body[data-page-brand="demothemis"] :is(.mvp-button.primary, .mvp-submit-action):hover {
    background: color-mix(in srgb, var(--dt-emission) 10%, var(--dt-surface));
    color: var(--dt-ink);
  }

  body[data-page-brand="demothemis"] :is(
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
  ):hover {
    border-color: rgba(var(--dt-emission-rgb), .62);
    box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .42), 0 0 7px rgba(var(--dt-emission-rgb), .14);
  }

  body[data-page-brand="demothemis"] :is(
    .simple-step,
    .simple-card,
    .stepper .step-body,
    .diagram-inner,
    .flow .node,
    .widget
  ):hover {
    border-color: rgba(var(--dt-emission-rgb), .82);
    box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .68), 0 0 10px rgba(var(--dt-emission-rgb), .24);
  }
}

body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .brand.brand-with-wordmark:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  filter: var(--dt-wordmark-underline-hover-filter);
}

body[data-page-brand="demothemis"] :is(
  .btn,
  .nav-toggle,
  .to-top,
  .reader-tab,
  .preset,
  .lab-tab,
  label.lock,
  .fine-controls > summary,
  .assumption-drawer > summary,
  .stress-row > summary,
  .underhood-map a,
  .series-nav a,
  .pair-link,
  .map-card,
  .mvp-button,
  .mvp-tab-list button,
  .mvp-submit-action,
  .mvp-preview-disclosure summary
):not(:disabled):active,
body[data-page-brand="neutral"] :is(
  .map-card[data-brand="demothemis"],
  [data-brand="demothemis"] .pair-link,
  [data-brand="demothemis"] a.btn
):active,
body[data-page-brand]:not([data-page-brand="omen"]) .sitenav .nav-toggle:active {
  transform: scale(.99);
  box-shadow: 0 0 0 1px var(--dt-emission), 0 0 5px rgba(var(--dt-emission-rgb), .3);
  transition-duration: 45ms;
}

body[data-page-brand="demothemis"] :is(.mvp-button.primary, .mvp-submit-action):active {
  background: color-mix(in srgb, var(--dt-emission) 14%, var(--dt-surface));
  color: var(--dt-ink);
}

body[data-page-brand="demothemis"] :is(.btn[style*="--bad"], #R4show):not(:focus-visible) {
  border-color: var(--bad);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bad) 72%, transparent), 0 0 7px color-mix(in srgb, var(--bad) 20%, transparent);
}

body[data-page-brand="demothemis"] :is(button, input, textarea, select):disabled,
body[data-page-brand="demothemis"] :is([aria-disabled="true"], .is-disabled),
body[data-page-brand="demothemis"] label.lock:has(input:disabled) {
  border-color: var(--line-strong);
  box-shadow: none;
  filter: none;
  opacity: .48;
  cursor: not-allowed;
}

body[data-page-brand="demothemis"] :focus-visible,
body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :focus-visible,
body[data-page-brand="neutral"] :is([data-brand="demothemis"]:focus-visible, [data-brand="demothemis"] :focus-visible) {
  outline: 2px solid var(--dt-emission-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--dt-emission-rgb), .2), 0 0 10px rgba(var(--dt-emission-rgb), .24);
}

body[data-page-brand="demothemis"] :is(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select
):focus {
  border-color: var(--dt-emission-ink);
  background: var(--surface);
  outline: 2px solid var(--dt-emission-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--dt-emission-rgb), .17), 0 0 9px rgba(var(--dt-emission-rgb), .2);
}

/* The homepage DemoThemis product panel is a teaching surface, not a giant button. */
@property --dt-card-rim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes dt-card-rim-orbit {
  to { --dt-card-rim-angle: 360deg; }
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"],
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"] {
  border: 1px solid rgba(var(--dt-emission-rgb), .34);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .08), 0 0 4px rgba(var(--dt-emission-rgb), .035);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"]::before,
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"]::before {
  display: none;
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"]::after,
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--dt-card-rim-angle),
    transparent 0deg 112deg,
    rgba(var(--dt-emission-rgb), .04) 126deg,
    rgba(var(--dt-emission-rgb), .28) 146deg,
    rgba(var(--dt-emission-rgb), .9) 166deg,
    rgba(224, 252, 255, .98) 171deg,
    rgba(var(--dt-emission-rgb), .18) 178deg,
    transparent 180deg 292deg,
    rgba(var(--dt-emission-rgb), .04) 306deg,
    rgba(var(--dt-emission-rgb), .28) 326deg,
    rgba(var(--dt-emission-rgb), .9) 346deg,
    rgba(224, 252, 255, .98) 351deg,
    rgba(var(--dt-emission-rgb), .18) 358deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .72;
  filter: drop-shadow(0 0 3px rgba(var(--dt-emission-rgb), .42));
  pointer-events: none;
  animation: dt-card-rim-orbit 7.5s linear infinite;
  transition: opacity 180ms ease, filter 180ms ease;
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] .pk {
  background: color-mix(in srgb, var(--dt-emission) 10%, var(--dt-surface));
  color: var(--dt-emission-ink);
  box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .24), 0 0 6px rgba(var(--dt-emission-rgb), .1);
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] .product-kind {
  color: var(--dt-emission-ink);
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] .product-summary-label {
  text-decoration-color: rgba(var(--dt-emission-rgb), .42);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 140ms ease, text-decoration-thickness 140ms ease, text-shadow 140ms ease;
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] .product-logo-lockup img {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .84))
    drop-shadow(0 0 10px rgba(var(--dt-emission-rgb), .08));
  transition: filter 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"]:hover {
    border-color: rgba(var(--dt-emission-rgb), .82);
    box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .68), 0 0 12px rgba(var(--dt-emission-rgb), .25);
  }

  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"]:hover::after {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(var(--dt-emission-rgb), .72));
  }

  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] .product-summary-label:hover {
    text-decoration-color: var(--dt-emission);
    text-decoration-thickness: 2px;
    text-shadow: 0 0 7px rgba(var(--dt-emission-rgb), .22);
  }

  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"]:hover .product-logo-lockup img {
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, .84))
      drop-shadow(0 0 12px rgba(var(--dt-emission-rgb), .16));
  }
}

body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] .product-summary-label:active {
  text-decoration-color: var(--dt-emission-ink);
  text-decoration-thickness: 2px;
  text-shadow: 0 0 4px rgba(var(--dt-emission-rgb), .3);
  transition-duration: 45ms;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-brand="demothemis"] :is(button, input, textarea, select, summary, a, label.lock),
  body[data-page-brand="demothemis"] :is(.simple-step, .simple-card, .stepper .step-body, .diagram-inner, .flow .node, .widget),
  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :is(.brand, .nav-toggle, .nav-links a),
  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"],
  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] :is(.product-summary-label, .product-logo-lockup img) {
    transition: none;
  }

  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"]::after {
    animation: none;
    opacity: .48;
  }

  body[data-page-brand="demothemis"] :is(button, summary, a, label.lock):active {
    transform: none;
  }
}

@media (forced-colors: active) {
  body[data-page-brand="demothemis"] :is(button, input, textarea, select, summary, a, label.lock),
  body[data-page-brand="demothemis"] :is(.simple-step, .simple-card, .stepper .step-body, .diagram-inner, .flow .node, .widget),
  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :is(.brand, .nav-toggle, .nav-links a),
  body[data-page-brand="neutral"] .product-pair .product[data-brand="demothemis"] {
    box-shadow: none;
    forced-color-adjust: auto;
  }

  body[data-page-brand="demothemis"] :focus-visible,
  body[data-page-brand]:not([data-page-brand="omen"]) .sitenav :focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ===== homepage chapter buttons: product-colour emission rims ===== */
@property --chapter-rim-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes chapter-rim-orbit {
  to { --chapter-rim-angle: 360deg; }
}

body[data-page-brand="neutral"] .map-card[data-brand] {
  --chapter-rim: linear-gradient(90deg, var(--dt-emission), var(--dt-emission));
  --chapter-glow-opacity: .28;
  --chapter-glow-blur: 4px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--brand-surface), var(--brand-surface)) padding-box,
    var(--chapter-rim) border-box;
  box-shadow: var(--shadow);
  transition: transform 140ms ease, box-shadow 160ms ease;
}

body[data-page-brand="neutral"] .map-card[data-brand="demothemis"] {
  --chapter-rim: linear-gradient(90deg, var(--dt-emission), var(--dt-emission));
}

body[data-page-brand="neutral"] .map-card[data-brand="omen"] {
  --chapter-rim: linear-gradient(90deg, var(--omm-green), var(--omm-green));
  --chapter-glow-opacity: .24;
}

body[data-page-brand="neutral"] .map-card[data-brand="shared"] {
  --chapter-rim: conic-gradient(
    from var(--chapter-rim-angle),
    var(--dt-emission) 0deg 176deg,
    color-mix(in srgb, var(--dt-emission) 50%, var(--omm-green)) 180deg,
    var(--omm-green) 184deg 356deg,
    color-mix(in srgb, var(--dt-emission) 50%, var(--omm-green)) 360deg
  );
  --chapter-glow-opacity: .34;
  animation: chapter-rim-orbit 8s linear infinite;
}

body[data-page-brand="neutral"] .map-card[data-brand]::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--chapter-rim);
  opacity: var(--chapter-glow-opacity);
  filter: blur(var(--chapter-glow-blur));
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity 160ms ease, filter 160ms ease;
}

body[data-page-brand="neutral"] .map-card[data-brand="omen"]::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 5.5rem;
  height: 3.5rem;
  border-radius: 0 0 calc(var(--radius) - 1px) 0;
  opacity: .12;
  background-image:
    linear-gradient(var(--omm-green) 1px, transparent 1px),
    linear-gradient(90deg, var(--omm-green) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}

body[data-page-brand="neutral"] .map-card[data-brand] > * {
  position: relative;
  z-index: 2;
}

body[data-page-brand="neutral"] .map-card[data-brand] :is(.stage, h3) {
  padding-right: 2.8rem;
}

body[data-page-brand="neutral"] .chapter-owner-coin,
body[data-page-brand="omen"] .chapter-owner-coin {
  --chapter-owner-rim: rgba(var(--dt-emission-rgb), .66);
  --chapter-owner-glow: rgba(var(--dt-emission-rgb), .16);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  padding: 2px;
  overflow: hidden;
  border: 1px solid var(--chapter-owner-rim);
  border-radius: 50%;
  background: var(--dt-canvas);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 0 6px var(--chapter-owner-glow);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-page-brand="neutral"] .map-card[data-brand] > .chapter-owner-coin {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

body[data-page-brand="neutral"] .map-card[data-brand="omen"] .chapter-owner-coin,
body[data-page-brand="omen"] .map-card[data-brand="omen"] .chapter-owner-coin {
  --chapter-owner-rim: rgba(4, 226, 109, .68);
  --chapter-owner-glow: rgba(4, 226, 109, .18);
  background: var(--omm-black);
}

body[data-page-brand="neutral"] .chapter-owner-coin img,
body[data-page-brand="omen"] .chapter-owner-coin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

body[data-page-brand="neutral"] .chapter-owner-coin--shared {
  --chapter-owner-coin-delay: 0s;
  --chapter-owner-coin-surface: #fffdf9;
  padding: 2px;
  overflow: visible;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--chapter-owner-coin-surface), var(--chapter-owner-coin-surface)) padding-box,
    conic-gradient(from 35deg, var(--omm-green) 0 48%, var(--dt-emission) 52% 98%, var(--omm-green) 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .24) inset,
    0 0 7px rgba(4, 226, 109, .12),
    0 0 7px rgba(var(--dt-emission-rgb), .12);
  filter: none;
  perspective: 10rem;
  perspective-origin: 50% 46%;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

body[data-page-brand="neutral"] .map-card[href="bootstrap-loop.html"] .chapter-owner-coin--shared {
  --chapter-owner-coin-delay: -3.33s;
}

body[data-page-brand="neutral"] .map-card[href="governance.html"] .chapter-owner-coin--shared {
  --chapter-owner-coin-delay: -6.67s;
}

body[data-page-brand="neutral"] .chapter-owner-rotor {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: chapter-owner-coin-turn 10s linear infinite;
  animation-delay: var(--chapter-owner-coin-delay);
}

body[data-page-brand="neutral"] .chapter-owner-rotor::before,
body[data-page-brand="neutral"] .chapter-owner-rotor::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body[data-page-brand="neutral"] .chapter-owner-rotor::before {
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 3px;
  border: 1px solid rgba(230, 255, 249, .72);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--omm-green), rgba(236, 255, 251, .98) 48%, var(--dt-emission));
  box-shadow: -1px 0 3px rgba(4, 226, 109, .38), 1px 0 3px rgba(var(--dt-emission-rgb), .38);
  opacity: .08;
  transform: translateX(-50%) rotateY(90deg);
  animation: chapter-owner-coin-edge 10s linear infinite;
  animation-delay: var(--chapter-owner-coin-delay);
}

body[data-page-brand="neutral"] .chapter-owner-rotor::after {
  inset: 1px;
  border: 1px solid rgba(226, 255, 246, .46);
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(4, 226, 109, .78), rgba(218, 255, 247, .9) 32%, rgba(123, 151, 143, .88) 51%, rgba(var(--dt-emission-rgb), .8));
  box-shadow: 0 0 3px rgba(4, 226, 109, .18), 0 0 3px rgba(var(--dt-emission-rgb), .18);
  transform: translateZ(0);
}

body[data-page-brand="neutral"] .chapter-owner-coin--shared .chapter-owner-face {
  --chapter-owner-rim: rgba(4, 226, 109, .72);
  --chapter-owner-glow: rgba(4, 226, 109, .18);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 1px;
  overflow: hidden;
  border: 1px solid var(--chapter-owner-rim);
  border-radius: 50%;
  background: var(--omm-black);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .2) inset,
    0 1px 2px rgba(255, 255, 255, .12) inset,
    0 0 5px var(--chapter-owner-glow);
  transform: translateZ(1.45px);
  visibility: visible;
  backface-visibility: hidden;
  animation: chapter-owner-coin-front-face 10s linear infinite;
  animation-delay: var(--chapter-owner-coin-delay);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body[data-page-brand="neutral"] .chapter-owner-coin--shared .chapter-owner-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, .24), transparent 34% 68%, rgba(255, 255, 255, .08));
  pointer-events: none;
}

body[data-page-brand="neutral"] .chapter-owner-coin--shared .chapter-owner-face + .chapter-owner-face {
  --chapter-owner-rim: rgba(var(--dt-emission-rgb), .72);
  --chapter-owner-glow: rgba(var(--dt-emission-rgb), .18);
  background: var(--dt-canvas);
  transform: rotateY(180deg) translateZ(1.45px);
  visibility: hidden;
  animation-name: chapter-owner-coin-back-face;
}

@keyframes chapter-owner-coin-turn {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes chapter-owner-coin-edge {
  0%, 15%, 35%, 65%, 85%, 100% { opacity: .08; }
  22%, 28%, 72%, 78% { opacity: 1; }
}

@keyframes chapter-owner-coin-front-face {
  0%, 24.99% { visibility: visible; }
  25%, 74.99% { visibility: hidden; }
  75%, 100% { visibility: visible; }
}

@keyframes chapter-owner-coin-back-face {
  0%, 24.99% { visibility: hidden; }
  25%, 74.99% { visibility: visible; }
  75%, 100% { visibility: hidden; }
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-brand="neutral"] .map-card[data-brand]:hover .chapter-owner-coin:not(.chapter-owner-coin--shared) {
    border-color: color-mix(in srgb, var(--chapter-owner-rim) 82%, #fff);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset, 0 0 10px var(--chapter-owner-glow);
    transform: translateY(-1px) scale(1.05);
  }

  body[data-page-brand="neutral"] :is(
    .map-card[data-brand]:hover,
    .machine-state:is(:hover, :focus-visible, .is-selected)
  ) .chapter-owner-face {
    border-color: color-mix(in srgb, var(--chapter-owner-rim) 82%, #fff);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset, 0 0 10px var(--chapter-owner-glow);
  }

  body[data-page-brand="neutral"] :is(
    .map-card[data-brand]:hover,
    .machine-state:is(:hover, :focus-visible, .is-selected)
  ) .chapter-owner-coin--shared {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .3) inset,
      0 0 10px rgba(4, 226, 109, .2),
      0 0 10px rgba(var(--dt-emission-rgb), .2);
    transform: translateY(-1px) scale(1.03);
  }
}

body[data-page-brand="neutral"] .map-card[data-brand="demothemis"] .stage {
  color: var(--dt-emission-ink);
}

body[data-page-brand="neutral"] .map-card[data-brand="omen"] .stage {
  color: var(--omm-green-dark);
}

body[data-page-brand="neutral"] .map-card[data-brand="shared"] .stage {
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-brand="neutral"] .map-card[data-brand]:hover {
    --chapter-glow-opacity: .78;
    --chapter-glow-blur: 6px;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
}

body[data-page-brand="neutral"] .map-card[data-brand]:focus-visible {
  --chapter-glow-opacity: .88;
  --chapter-glow-blur: 7px;
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  box-shadow: var(--shadow-lg);
}

body[data-page-brand="neutral"] .map-card[data-brand]:active {
  --chapter-glow-opacity: .54;
  --chapter-glow-blur: 4px;
  transform: translateY(-1px) scale(.995);
  box-shadow: var(--shadow);
  transition-duration: 55ms;
}

/* ===== DemoThemis ivory material surfaces =====
   Large paper surfaces borrow the full wordmark's warm left-to-right gradient.
   Inputs and semantic status fills stay flat so interaction and meaning remain clear. */
body[data-page-brand="demothemis"] :is(
  .simple-card,
  .simple-step,
  .diagram-inner,
  .widget,
  .product,
  .series-nav a,
  .pair-link,
  .toc,
  .panel-card,
  .board,
  .score,
  .attack,
  .story-card,
  .dependency-card,
  .insight-panel,
  .stress-hero,
  .stress-row,
  .lab-tabs
) {
  background-color: var(--dt-canvas);
  background-image: var(--dt-brand-gradient-soft);
}

body[data-page-brand="demothemis"] :is(
  .reader-tabs,
  .mvp-button.secondary,
  .mvp-sim-site-chrome,
  .mvp-tutorial-hud,
  .mvp-tab-list,
  .mvp-comparison-row.mvp-comparison-header,
  .mvp-sim-app .oracle-tabs
) {
  background-color: rgba(245, 238, 232, .88);
  background-image: var(--dt-brand-gradient-glass);
}

body[data-page-brand="demothemis"] :is(
  .mvp-case-card,
  .mvp-submit-card,
  .mvp-product-footer,
  .mvp-comparison-shell,
  .mvp-sim-app .oracle-case-card,
  .mvp-sim-app .oracle-jury-card,
  .mvp-sim-app .oracle-ballot,
  .mvp-sim-app .oracle-submit-form,
  .mvp-sim-app .oracle-submit-steps,
  .mvp-sim-app .oracle-fee-card,
  .mvp-sim-settlement,
  .mvp-preview-onboard-topbar,
  .mvp-preview-disclosure,
  .mvp-preview-onboard-side
) {
  background-color: var(--dt-canvas);
  background-image: var(--dt-brand-gradient);
}

body[data-page-brand="demothemis"] .mvp-comparison-cell.is-live {
  background-color: rgba(245, 238, 232, .76);
  background-image: var(--dt-brand-gradient-glass);
}

body[data-page-brand="demothemis"] .mvp-comparison-label {
  background-color: var(--dt-canvas);
  background-image: var(--dt-brand-gradient-soft);
}

/* Repeated teaching cards inherit their section colour, then vary only the
   placement and strength of that wash. This separates peers without implying
   unrelated success, warning, or product states. */
body[data-page-brand="demothemis"] .reading-category :is(.simple-card, .simple-step) {
  --dt-peer-wash: color-mix(in srgb, var(--dt-category-accent) 10%, transparent);
  --dt-peer-origin: 0% 0%;
  background-color: var(--dt-canvas);
  background-image:
    radial-gradient(125% 145% at var(--dt-peer-origin), var(--dt-peer-wash), transparent 58%),
    var(--dt-brand-gradient-soft);
}

body[data-page-brand="demothemis"] .reading-category :is(.simple-card, .simple-step):nth-child(3n + 2) {
  --dt-peer-wash: color-mix(in srgb, var(--dt-category-accent) 7%, transparent);
  --dt-peer-origin: 100% 0%;
}

body[data-page-brand="demothemis"] .reading-category :is(.simple-card, .simple-step):nth-child(3n) {
  --dt-peer-wash: color-mix(in srgb, var(--dt-category-accent) 13%, transparent);
  --dt-peer-origin: 50% 100%;
}

body[data-page-brand="demothemis"] .reading-category :is(.simple-card, .simple-step):not(:hover) {
  border-color: color-mix(in srgb, var(--dt-category-accent) 25%, var(--line));
}

body[data-page-brand="demothemis"] .reading-category :is(.simple-card .num, .simple-step-marker) {
  border-color: color-mix(in srgb, var(--dt-category-accent) 42%, var(--line));
  background: color-mix(in srgb, var(--dt-category-accent) 11%, var(--dt-surface));
  color: var(--dt-category-ink);
  box-shadow: 0 0 7px color-mix(in srgb, var(--dt-category-accent) 12%, transparent);
}

body[data-page-brand="neutral"] :is(
  .brand-panel[data-brand="demothemis"],
  .product-pair .product[data-brand="demothemis"],
  .houses .house--demothemis,
  .amp .node[data-brand="demothemis"]
) {
  background-color: var(--dt-canvas);
  background-image: var(--dt-brand-gradient);
}

/* Header veils sit above the shared ivory material layer. */
body[data-page-brand="demothemis"] .compare-col.bad {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--bad) 13%, transparent), transparent 48%),
    var(--dt-brand-gradient-soft);
}

body[data-page-brand="demothemis"] .compare-col.good {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--good) 13%, transparent), transparent 48%),
    var(--dt-brand-gradient-soft);
}

body.mvp-page[data-page-brand="demothemis"] .mvp-comparison-shell {
  background-image:
    linear-gradient(180deg, transparent 0, var(--dt-canvas) 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--good) 13%, var(--dt-canvas)), color-mix(in srgb, var(--mvp-purple) 13%, var(--dt-canvas)));
}

body[data-page-brand="neutral"] .amp .node[data-brand="demothemis"] {
  background-image:
    linear-gradient(180deg, rgba(var(--dt-emission-rgb), .13), transparent 52%),
    var(--dt-brand-gradient);
}

body[data-page-brand="neutral"] .map-card[data-brand="demothemis"] {
  background:
    var(--dt-brand-gradient-core) padding-box,
    var(--chapter-rim) border-box;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-brand="neutral"] .map-card[data-brand="shared"] {
    --chapter-rim-angle: 35deg;
    animation: none;
  }

  body[data-page-brand="neutral"] .chapter-owner-coin--shared {
    transform: none;
  }

  body[data-page-brand="neutral"] .chapter-owner-rotor,
  body[data-page-brand="neutral"] .chapter-owner-rotor::before,
  body[data-page-brand="neutral"] .chapter-owner-coin--shared .chapter-owner-face {
    animation: none;
  }

  body[data-page-brand="neutral"] .chapter-owner-rotor::before {
    opacity: 0;
  }

  body[data-page-brand="neutral"] .chapter-owner-rotor {
    transform: rotateY(-10deg);
  }

  body[data-page-brand="neutral"] .chapter-owner-coin--shared .chapter-owner-face {
    visibility: visible;
  }

  body[data-page-brand="neutral"] .chapter-owner-coin--shared .chapter-owner-face + .chapter-owner-face {
    visibility: hidden;
  }
}

@media (forced-colors: active) {
  body[data-page-brand="neutral"] .map-card[data-brand] {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
    animation: none;
    forced-color-adjust: auto;
  }

  body[data-page-brand="neutral"] .map-card[data-brand]::before,
  body[data-page-brand="neutral"] .map-card[data-brand]::after,
  body[data-page-brand="neutral"] .chapter-owner-coin {
    display: none;
  }
}

@media print {
  body[data-page-brand="neutral"] .map-card[data-brand] {
    border: 1px solid #777;
    background: #fff;
    color: #000;
    box-shadow: none;
    animation: none;
  }

  body[data-page-brand="neutral"] .map-card[data-brand]::before,
  body[data-page-brand="neutral"] .map-card[data-brand]::after,
  body[data-page-brand="neutral"] .chapter-owner-coin {
    display: none;
  }
}

/* The court screen on the homepage wears the DemoThemis homepage card's
   own animated rim instead of a bezel. The chassis and glass stay in the
   markup because the bay controller measures and travels them, but they
   stop drawing: no frame, no black glass, no chin. The power-on beams and
   the flare keep playing over the card, and the orbiting rim above is
   widened to this scope rather than copied. */
body[data-page-brand="omen"] .home-products .crt-chassis {
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
}
body[data-page-brand="omen"] .home-products .crt-glass {
  padding: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body[data-page-brand="omen"] .home-products .crt-chin { display: none; }

/* the rim is motion, so it stands still when motion is asked to */
@media (prefers-reduced-motion: reduce) {
  body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"]::after {
    animation: none;
  }
}

/* The tour cards put the chapter coin and the chapter label on one line.
   The coin is a 2rem grid box and the label is bare inline text, so left
   to the baseline they sit three pixels apart in y. Both are pinned to
   the middle of the same line box instead. */
body[data-page-brand="omen"] .map-card .chapter-owner-coin {
  display: inline-grid;
  vertical-align: middle;
  margin-right: .55rem;
}
body[data-page-brand="omen"] .map-card .stage {
  display: inline-block;
  vertical-align: middle;
}
body[data-page-brand="omen"] .map-card h3 {
  margin-top: .75rem;
}

/* The screen the bay powers on is DemoThemis now, so it turns on in the
   court's own light: the strike beams and the flicker go cyan, with the
   same bright tip the card's rim carries. And when the machine ejects to
   the side it centres on the card it came out of instead of hanging from
   its top edge, because the court's card is the shorter of the two. The
   travel transform lives on the chassis, so the dock can hold a static
   vertical centring without touching the animation. */
body[data-page-brand="omen"] .home-products .crt-glass::before {
  background: radial-gradient(135% 52% at 50% 50%,
    rgba(224, 252, 255, .95) 0, rgba(0, 229, 255, .42) 42%, transparent 74%);
}
body[data-page-brand="omen"] .home-products .crt-glass::after {
  background: radial-gradient(52% 135% at 50% 50%,
    rgba(224, 252, 255, .85) 0, rgba(0, 229, 255, .34) 42%, transparent 74%);
}
body[data-page-brand="omen"] .home-products .crt-flare {
  background: rgba(0, 229, 255, .16);
}
/* The dock is a zero-height anchor: its well is absolute, so translating the
   dock by half of itself moves nothing. The dock stretches to the bay
   instead, and the well, whose padding is symmetric above and below the
   machine, centres itself in it. */
body[data-page-brand="omen"] .home-products .crt-bay[data-mode="side"] .crt-dock {
  top: 0;
  bottom: 0;
}
body[data-page-brand="omen"] .home-products .crt-bay[data-mode="side"] .crt-well {
  top: 50%;
  transform: translateY(-50%);
}

/* The court screen's numbered chapters, in the court's own dress. The
   links wear demothemis.com's document hyperlink spec verbatim: emission
   ink, a cyan underline at .46 that thickens to the full emission colour
   with a soft glow under the pointer. The numbers stop borrowing the
   card's warm product colour and become the court's accent chip, the
   indigo number on its pale lavender, squared off like the doc marker,
   with the emission rim the court puts on chips at rest and the brighter
   halo it puts on operable surfaces when they light. */
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"] .product-jumps a {
  color: var(--dt-emission-ink);
  text-decoration-line: underline;
  text-decoration-color: rgba(var(--dt-emission-rgb), .46);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
  transition: color 140ms ease, text-decoration-color 140ms ease, text-shadow 140ms ease;
}
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"] .product-jumps a:hover,
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"] .product-jumps a:focus-visible {
  color: var(--dt-emission-ink);
  text-decoration-color: var(--dt-emission);
  text-decoration-thickness: 2px;
  text-shadow: 0 0 7px rgba(var(--dt-emission-rgb), .24);
}
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"] ol.product-jumps li::before {
  background: #ece9fc;
  color: #5a4bd6;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(var(--dt-emission-rgb), .24),
    0 0 6px rgba(var(--dt-emission-rgb), .1);
  transition: box-shadow 160ms ease;
}
body[data-page-brand="omen"] .product-pair .product[data-brand="demothemis"] ol.product-jumps li:hover::before {
  box-shadow:
    0 0 0 1px rgba(var(--dt-emission-rgb), .62),
    0 0 10px rgba(var(--dt-emission-rgb), .22);
}

/* ============================================================================
   THE CHAPTER KEYS
   The bay card's index of the run: seven pressable rows, each a chapter,
   in place of the three summaries and the tour grid that used to repeat
   them below the bay. Number, title, one line, an arrow. On the dark card
   they are terminal keys: a phosphor edge that lifts under the pointer,
   a press that sinks a pixel, and the run-through's key lit solid because
   it is the one that plays.
   ========================================================================== */
body[data-page-brand="omen"] .chapter-keys-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .55rem;
  margin: .75rem 0 .1rem;
}
body[data-page-brand="omen"] .chapter-keys-head .ckh-label {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--omm-mint, #5dfeaa);
  white-space: nowrap;
}
body[data-page-brand="omen"] .chapter-keys-head .ckh-sub {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .76rem;
  color: #a9bdb2;
}
body[data-page-brand="omen"] .chapter-keys-head .ckh-sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(4, 226, 109, .45), rgba(4, 226, 109, .05));
}
body[data-page-brand="omen"] .chapter-keys {
  display: grid;
  gap: .4rem;
  margin: .15rem 0 .2rem;
  padding: 0;
  list-style: none;
}
body[data-page-brand="omen"] .chapter-key {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem .55rem .6rem;
  border: 1px solid rgba(4, 226, 109, .26);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(4, 226, 109, .06), rgba(4, 226, 109, .02)), var(--omm-surface, #06150d);
  color: var(--omm-white, #fefefe);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
body[data-page-brand="omen"] .chapter-key .ck-n {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  border: 1px solid rgba(4, 226, 109, .45);
  background: rgba(4, 226, 109, .1);
  color: var(--omm-mint, #5dfeaa);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 0 8px rgba(4, 226, 109, .18);
}
body[data-page-brand="omen"] .chapter-key .ck-body { min-width: 0; }
body[data-page-brand="omen"] .chapter-key .ck-body b {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
body[data-page-brand="omen"] .chapter-key .ck-body small {
  display: block;
  margin-top: .12rem;
  font-size: .74rem;
  line-height: 1.4;
  color: #a9bdb2;
}
body[data-page-brand="omen"] .chapter-key .ck-go {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .3rem .5rem .3rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(4, 226, 109, .38);
  background: rgba(4, 226, 109, .08);
  color: var(--omm-mint, #5dfeaa);
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body[data-page-brand="omen"] .chapter-key .ck-go em { font-style: normal; }
body[data-page-brand="omen"] .chapter-key .ck-go svg { flex: none; transition: transform .16s ease; }
body[data-page-brand="omen"] .chapter-key.play .ck-go { border-color: rgba(4, 226, 109, .7); background: rgba(4, 226, 109, .16); }
body[data-page-brand="omen"] .chapter-key:hover,
body[data-page-brand="omen"] .chapter-key:focus-visible {
  border-color: rgba(4, 226, 109, .72);
  background: linear-gradient(180deg, rgba(4, 226, 109, .14), rgba(4, 226, 109, .05)), #0a2216;
  transform: translateX(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(4, 226, 109, .22),
    0 0 18px rgba(4, 226, 109, .22);
}
/* the page's link hover is a deep green for paper, and it would fade the
   title on the dark card, so the key holds its own inks under the pointer */
body[data-page-brand="omen"] .chapter-key:hover,
body[data-page-brand="omen"] .chapter-key:focus-visible,
body[data-page-brand="omen"] .chapter-key:hover .ck-body b,
body[data-page-brand="omen"] .chapter-key:focus-visible .ck-body b { color: var(--omm-white, #fefefe); }
body[data-page-brand="omen"] .chapter-key:hover .ck-body small,
body[data-page-brand="omen"] .chapter-key:focus-visible .ck-body small { color: #cfe0da; }
body[data-page-brand="omen"] .chapter-key:hover .ck-go,
body[data-page-brand="omen"] .chapter-key:focus-visible .ck-go {
  background: var(--omm-green, #04e26d);
  border-color: var(--omm-green, #04e26d);
  color: #001b0c;
  box-shadow: 0 0 12px rgba(4, 226, 109, .45);
}
body[data-page-brand="omen"] .chapter-key:hover .ck-go svg,
body[data-page-brand="omen"] .chapter-key:focus-visible .ck-go svg { transform: translateX(3px); }
body[data-page-brand="omen"] .chapter-key:hover .ck-n,
body[data-page-brand="omen"] .chapter-key:focus-visible .ck-n {
  border-color: rgba(4, 226, 109, .8);
  box-shadow: 0 0 12px rgba(4, 226, 109, .38);
}
body[data-page-brand="omen"] .chapter-key:focus-visible {
  outline: 2px solid var(--omm-mint, #5dfeaa);
  outline-offset: 2px;
}
body[data-page-brand="omen"] .chapter-key:active {
  transform: translateX(3px) translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 0 10px rgba(4, 226, 109, .3);
}
/* the run-through is the chapter you play, so its key is lit */
body[data-page-brand="omen"] .chapter-key.play .ck-n {
  background: var(--omm-green, #04e26d);
  border-color: var(--omm-green, #04e26d);
  color: #001b0c;
  box-shadow: 0 0 12px rgba(4, 226, 109, .45);
}
body[data-page-brand="omen"] .chapter-key.play {
  border-color: rgba(4, 226, 109, .48);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page-brand="omen"] .chapter-key, body[data-page-brand="omen"] .chapter-key .ck-go { transition: none; }
  body[data-page-brand="omen"] .chapter-key:hover, body[data-page-brand="omen"] .chapter-key:active, body[data-page-brand="omen"] .chapter-key:hover .ck-go { transform: none; }
}
@media (max-width: 560px) {
  body[data-page-brand="omen"] .chapter-key { gap: .6rem; padding: .5rem .55rem .5rem .5rem; }
  body[data-page-brand="omen"] .chapter-key .ck-body b { font-size: .86rem; }
  body[data-page-brand="omen"] .chapter-key .ck-body small { font-size: .7rem; }
  body[data-page-brand="omen"] .chapter-key .ck-go { padding: .24rem .4rem .24rem .5rem; font-size: .54rem; gap: .22rem; }
  body[data-page-brand="omen"] .chapter-keys-head .ckh-sub { font-size: .7rem; }
}

/* ============================================================================
   THE COURT'S KEYS
   The same key component on the court's screen card, in the court's
   colours on its cream: a cyan number, ink for the title, a READ chip that
   fills cyan under the pointer, and an eyebrow that names the list as the
   court's own documentation on demothemis.com.
   ========================================================================== */
body[data-page-brand="omen"] .chapter-keys-head.court { margin: .35rem 0 .1rem; }
body[data-page-brand="omen"] .chapter-keys-head.court .ckh-label { color: #006f7b; }
body[data-page-brand="omen"] .chapter-keys-head.court .ckh-sub { color: #6f655e; }
body[data-page-brand="omen"] .chapter-keys-head.court .ckh-sub::after {
  background: linear-gradient(90deg, rgba(0, 229, 255, .55), rgba(0, 229, 255, .06));
}
body[data-page-brand="omen"] .chapter-keys.court { gap: .38rem; }
body[data-page-brand="omen"] .chapter-key.court {
  border-color: rgba(0, 111, 123, .26);
  background: linear-gradient(180deg, rgba(0, 229, 255, .05), rgba(0, 229, 255, .015)), #fffdf9;
  color: #292522;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
body[data-page-brand="omen"] .chapter-key.court .ck-n {
  border-color: rgba(0, 111, 123, .42);
  background: rgba(0, 229, 255, .12);
  color: #006f7b;
  box-shadow: 0 0 8px rgba(0, 229, 255, .18);
}
body[data-page-brand="omen"] .chapter-key.court .ck-body small { color: #5f6b67; }
body[data-page-brand="omen"] .chapter-key.court .ck-go {
  border-color: rgba(0, 111, 123, .42);
  background: rgba(0, 229, 255, .1);
  color: #005a63;
}
body[data-page-brand="omen"] .chapter-key.court:hover,
body[data-page-brand="omen"] .chapter-key.court:focus-visible {
  border-color: rgba(0, 229, 255, .8);
  background: linear-gradient(180deg, rgba(0, 229, 255, .12), rgba(0, 229, 255, .04)), #ffffff;
  color: #292522;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 0 0 1px rgba(0, 229, 255, .25),
    0 0 18px rgba(0, 229, 255, .28);
}
body[data-page-brand="omen"] .chapter-key.court:hover .ck-body b,
body[data-page-brand="omen"] .chapter-key.court:focus-visible .ck-body b { color: #292522; }
body[data-page-brand="omen"] .chapter-key.court:hover .ck-body small,
body[data-page-brand="omen"] .chapter-key.court:focus-visible .ck-body small { color: #49413c; }
body[data-page-brand="omen"] .chapter-key.court:hover .ck-n,
body[data-page-brand="omen"] .chapter-key.court:focus-visible .ck-n {
  border-color: rgba(0, 229, 255, .9);
  box-shadow: 0 0 12px rgba(0, 229, 255, .4);
}
body[data-page-brand="omen"] .chapter-key.court:hover .ck-go,
body[data-page-brand="omen"] .chapter-key.court:focus-visible .ck-go {
  background: #00e5ff;
  border-color: #00e5ff;
  color: #052a2e;
  box-shadow: 0 0 12px rgba(0, 229, 255, .5);
}
body[data-page-brand="omen"] .chapter-key.court:focus-visible { outline-color: #006f7b; }
body[data-page-brand="omen"] .chapter-key.court:active {
  box-shadow: inset 0 2px 6px rgba(0, 60, 66, .18), 0 0 10px rgba(0, 229, 255, .3);
}

/* the claim that follows the conclusion note stands off it like a new section */
body[data-page-brand="omen"] .oracle-note + .sec-label { margin-top: 2.2rem; }