/* 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: #8b919c;
  --line: #eae4d9;
  --line-strong: #ddd6ca;
  --accent: #5a4bd6;
  --accent-soft: #ece9fc;
  --accent-ink: #3a2fa0;
  --good: #0f9b70;
  --good-soft: #e2f5ed;
  --bad: #d4523c;
  --bad-soft: #fbe8e2;
  /* 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;
}

/* The paper is shared. Every page reads on the DemoThemis ivory: the neutral
   pages used to sit on the warm stone canvas from :root and the run-through
   on a paler ivory of its own, so the page changed colour under the reader
   from one chapter to the next. Only the accent family stays per brand,
   because the neutral pages host both products. */
body[data-page-brand="demothemis"],
body[data-page-brand="neutral"] {
  --canvas: var(--dt-canvas);
  --bg: #f1e8e1;
  --surface: var(--dt-surface);
  --ink: var(--dt-ink);
  --ink-soft: #433c37;
  --muted: #6f655e;
  --faint: #948981;
  --line: #e6d9cf;
  --line-strong: #d4c3b7;
  --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);
}
body[data-page-brand="demothemis"] {
  --accent: var(--dt-accent);
  --accent-soft: #eee4dc;
  --accent-ink: var(--dt-accent-strong);
}

/* 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: #78837c;
  --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. */
/* The qualifier runs on from the headline rather than dropping to its own
   line, so it keeps its smaller, quieter register inline after "dispute". */
.hero-claim { display: inline; }
.hero-qualifier {
  display: inline;
  /* Half the headline size so the clause sits under the claim rather than
     competing with it; the comma's own space is too small at this size, so a
     touch of extra margin keeps the join reading naturally. */
  font-size: .5em;
  line-height: inherit;
  margin-left: -.1rem;
  font-weight: 300;
  letter-spacing: -.005em;
  color: var(--muted);
}
.hero-qualifier b {
  font-weight: 500;
  color: var(--ink-soft);
}
/* Orbie, the little orb mascot standing beside "powered by Worldcoin".
   Single static frame from github.com/AlexKaravaev/orbie-pet (Apache-2.0).
   The chunky-pixel look is baked into the asset (pure nearest-neighbor
   decimation, hard alpha) at 2x the display size, and the browser scales it
   SMOOTHLY. Do not add image-rendering: pixelated here: an inline box lands
   on fractional CSS px and Windows display scaling lands on fractional
   device px, and nearest resampling at those phases fattens an uneven subset
   of pixels. Smooth sampling of the 2x source is stable at every DPR and
   zoom, and exact 1:1 on 2x screens. The box bottom is the character's feet,
   so baseline alignment stands him on the same line the text sits on. */
.orbie {
  --orbie-w: 43px;
  --orbie-h: 50px;
  display: inline-block;
  width: var(--orbie-w);
  height: var(--orbie-h);
  margin-left: .55rem;
  vertical-align: baseline;
  background: url("orbie-sprite.png") 0 0 no-repeat;
  background-size: var(--orbie-w) var(--orbie-h);
  forced-color-adjust: none;
}
/* On phones the headline sits at its clamp floor and wraps across most of the
   width, so an inline sprite either strands onto its own line or inflates one.
   Below the mobile breakpoint Orbie steps out of the text flow and stands in
   the hero's empty top-right corner instead, feet on the first headline
   line's baseline, costing zero layout. */
@media (max-width: 640px) {
  .orbie {
    position: absolute;
    top: 1.35rem;
    right: 1.1rem;
    margin-left: 0;
  }
}
.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 8rem;
  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); }
.compare-col.good li::before { content: "\2713"; color: var(--good); }
.tag-bad { color: var(--bad); 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); 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 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: 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 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; }
.crt-bay:not([data-open="true"]) .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; }
/* Short "what this is / how to use it" note, directly under a widget's title. */
.widget-intro {
  margin: 0 0 1.25rem;
  padding: .8rem .95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: calc(var(--radius) - 6px);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink);
}
.widget-intro b { color: var(--accent); font-weight: 700; }
/* Collapsible variant: the note folds behind its own summary so a tall widget
   can open on the controls instead of on a paragraph. */
details.widget-intro { padding: 0; }
details.widget-intro > summary {
  display: flex; align-items: center; gap: .4rem;
  padding: .52rem .8rem; border-radius: inherit;
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); cursor: pointer; list-style: none;
}
details.widget-intro > summary::-webkit-details-marker { display: none; }
details.widget-intro > summary::after {
  content: "\25BE"; display: inline-block; margin-left: auto;
  font-size: .78rem; line-height: 1; transition: transform .18s ease;
}
details.widget-intro[open] > summary::after { transform: rotate(180deg); }
details.widget-intro > summary:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
details.widget-intro > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.widget-intro > p { margin: 0; padding: 0 .8rem .68rem; }
@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); display: grid; place-items: center; transition: width .15s ease; }
.splitbar .no { background: var(--bad); 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; }

/* 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); background: var(--good-soft); }
.tag-deep { color: var(--accent-ink); background: var(--accent-soft); }

/* ===== series prev/next ===== */
/* One width on every chapter. The top navigation used to be as wide as
   whatever column it landed in: 656px inside the reading column on three
   chapters, 1040px across the run-through's wider column, and 1152px on
   Fortify The Court, which gave it a width of its own. It is capped at the
   reading column's text width now and centred, so the cards are the same
   size on every page and sit under the title the same way. */
.series-top { max-width: 41rem; margin: 0 auto 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; }
/* The chapter buttons wear the ivory grain on every chapter, not only on the
   two pages that carry the DemoThemis brand. They used to take a flat
   var(--surface) here and were then re-painted with the brand gradient in the
   demothemis material block, so the same control looked like two different
   components depending on which chapter you were standing in: textured on
   DemoThemis and Fortify The Court, flat white on the run-through, the
   bootstrap loop and governance. The tokens are declared on :root, so the
   grain resolves the same way on all of them; a branded page still gets its
   own palette's values for both. */
.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-color: var(--dt-canvas); background-image: var(--dt-brand-gradient-soft); 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 a { font-size: .9rem; color: var(--muted); text-decoration: none; }
.sitemap a:hover { color: var(--accent-ink); }

/* ===== in-page TOC ===== */
/* The panel is a card in both of its shapes: rounded, edged, and lifted off
   the paper by a soft white halo rather than a hard shadow. The inset top
   line is the same highlight the rest of the site's raised surfaces use. */
.toc { font-family: var(--sans); border: 1px solid var(--line); border-radius: 12px;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                   0 0 20px 4px rgba(255, 255, 255, .7),
                   var(--shadow); }
.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) {
  /* The panel sits beside the widest column on the page, which is the 52rem
     hero, not the 44rem reading column the old offset was budgeted against.
     Anchored 18rem past the reading column's half width, its right edge lands
     1rem clear of the hero box and 2.5rem clear of the hero's own text, which
     also keeps the glow's 24px reach off the letters. The old 15.5rem put the
     edge exactly on the hero text. */
  .toc { position: fixed; top: calc(var(--sticky-header-bottom, 3.4rem) + 1.1rem); left: max(1.25rem, calc(50% - var(--half-maxw) - 18rem)); width: 13rem; max-height: calc(100vh - var(--sticky-header-bottom, 3.4rem) - 3.5rem); overflow: auto; padding: .75rem .8rem; }
  .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 a { font-size: .85rem; color: var(--accent-ink); padding: .22rem 0; }
}
@media (max-width: 560px) {
  .toc ul { columns: 1; }
}

/* ===== 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; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); }
.to-top:active { transform: translateY(0) scale(.94); }

/* ===== interaction states, shared (16 Aug 2026) =====
   One press convention for the whole site: every link darkens briefly
   under the pointer, chunky cards sit back down from their hover lift,
   and the brand wordmark acknowledges the mouse. Hover stays per
   component; the press is deliberately uniform. */
a:active { filter: brightness(.9); }
.brand { transition: opacity .14s ease; }
.brand:hover { opacity: .75; }
.brand:active { opacity: .55; filter: none; }
.series-nav a:active { transform: translateY(0); box-shadow: var(--shadow); filter: none; }

/* ===== 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 { position: relative; 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); }

/* Chapter status rails on the home map. Same rail the live-demo button wears,
   extended to a two-state system: still being built, or finished. Each one is
   absolutely positioned inside the card's own bottom padding, so no card
   changes size. The cards keep overflow:visible for their glowing brand rim,
   so the rail rounds its own bottom corners to sit inside the card's radius
   rather than relying on the parent to clip it. */
.map-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  height: .95rem;
  padding: 0 .9rem;
  overflow: hidden;
  border-top: 1.5px solid var(--dt-emission);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  box-shadow: 0 -6px 14px -9px rgba(var(--dt-emission-rgb), .55);
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.map-status svg { flex: none; color: var(--dt-emission); }

/* Still being built: the demo button's warning, verbatim. */
.map-status--wip {
  background: #000;
  color: rgba(255, 253, 249, .94);
}
.map-status--wip::before,
.map-status--wip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(var(--dt-emission-rgb), .52) 0 6px, rgba(var(--dt-emission-rgb), 0) 6px 12px);
}
.map-status--wip::before {
  left: 0;
  mask-image: linear-gradient(90deg, #000 0, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 100%);
}
.map-status--wip::after {
  right: 0;
  mask-image: linear-gradient(270deg, #000 0, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0, transparent 100%);
}

/* Finished: no hazard hatch, and the cyan comes forward as the ground. */
.map-status--done {
  background: var(--dt-emission-ink);
  color: #fff;
}

@media (forced-colors: active) {
  .map-status { background: Canvas; color: CanvasText; border-top: 1px solid CanvasText; box-shadow: none; }
  .map-status--wip::before, .map-status--wip::after { display: none; }
  .map-status svg { color: CanvasText; }
}

/* ===== work-in-progress banner =====
   Sits above the nav on every page. Black ground with the emission cyan doing
   the warning work: a lit rim, a solid chip, and a hazard hatch that fades in
   from both ends so the sentence keeps a clean field. Pairs with .map-cta-wip,
   the same warning scoped to the live-demo button. */
.wip-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .52rem 1rem;
  background: #000;
  border-bottom: 1.5px solid var(--dt-emission);
  box-shadow:
    0 0 0 1px rgba(var(--dt-emission-rgb), .32),
    0 0 16px rgba(var(--dt-emission-rgb), .3),
    0 8px 20px -14px rgba(var(--dt-emission-rgb), .5);
}
.wip-banner::before,
.wip-banner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5.5rem;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(var(--dt-emission-rgb), .52) 0 7px, rgba(var(--dt-emission-rgb), 0) 7px 15px);
}
.wip-banner::before {
  left: 0;
  mask-image: linear-gradient(90deg, #000 0, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 100%);
}
.wip-banner::after {
  right: 0;
  mask-image: linear-gradient(270deg, #000 0, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0, transparent 100%);
}
.wip-chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  padding: .26rem .58rem;
  border-radius: 6px;
  background: var(--dt-emission);
  color: #04333a;
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(var(--dt-emission-rgb), .55);
}
.wip-text {
  position: relative;
  font-family: var(--sans);
  font-size: .81rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 253, 249, .92);
}
@media (max-width: 640px) {
  .wip-banner { gap: .4rem; padding: .45rem .5rem; flex-wrap: wrap; }
  .wip-banner::before, .wip-banner::after { width: 1.7rem; }
  .wip-chip { font-size: .54rem; }
  .wip-text { font-size: .67rem; text-align: center; }
}
@media (forced-colors: active) {
  .wip-banner { background: Canvas; border-bottom: 1px solid CanvasText; box-shadow: none; }
  .wip-banner::before, .wip-banner::after { display: none; }
  .wip-chip { background: Mark; color: MarkText; box-shadow: none; }
  .wip-text { color: CanvasText; }
}

/* ===== 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;
}
/* Caution rail for the in-progress demo. Absolutely positioned, so it is not a
   flex item and contributes nothing to the card's size: the button keeps the
   exact width and height it had before the warning existed, at every
   breakpoint. It lives inside the bottom padding the card already reserves
   (18.4px desktop, 16px mobile) and its ends are swallowed by the card's own
   corner radius. The ochre-on-ivory pair is the site's page-level
   work-in-progress banner shrunk to card scale, so it reads as that same
   warning scoped to this one button rather than as new vocabulary. */
.map-cta-wip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: .86rem;
  padding: 0 .9rem;
  overflow: hidden;
  background: #000;
  border-top: 1.5px solid var(--dt-emission);
  box-shadow: 0 -6px 14px -9px rgba(var(--dt-emission-rgb), .55);
  color: rgba(255, 253, 249, .94);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
/* Hazard hatch fading in from both ends. z-index -1 keeps it above the rail's
   own background but below the label, which the rail's z-index:1 stacking
   context guarantees. */
.map-cta-wip::before,
.map-cta-wip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(var(--dt-emission-rgb), .52) 0 6px, rgba(var(--dt-emission-rgb), 0) 6px 12px);
}
.map-cta-wip::before {
  left: 0;
  mask-image: linear-gradient(90deg, #000 0, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 100%);
}
.map-cta-wip::after {
  right: 0;
  mask-image: linear-gradient(270deg, #000 0, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0, transparent 100%);
}
.map-cta-wip svg { flex: none; color: var(--dt-emission); }
.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; }
  /* The mobile padding drops to 1rem, so the rail comes down with it to keep
     clear air between the sub-paragraph and the warning. */
  .map-cta-wip { height: .8rem; padding: 0 .6rem; font-size: .58rem; }
}
@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; }
  /* Mark/MarkText is the system's own flagged-content pair, so the warning keeps
     its "singled out" reading instead of flattening into the card face. */
  .map-cta-wip { background: Mark; color: MarkText; border-top: 1px solid CanvasText; box-shadow: none; }
}

/* ===== mobile nav ===== */
/* Switch to the menu before the complete chapter path can wrap onto a second row. */
@media (max-width: 1160px) {
  .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);
}
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; }
}

@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); 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: 1160px) {
  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);
}

/* The contents panel is one component and should read as one. The brand
   block below gives it a paper wash and inked, underlined links on the
   DemoThemis chapters; the neutral chapters were left with a transparent
   panel and grey links, so the same panel looked like two different things
   depending on which chapter the reader was in. Neutral pages get the same
   treatment in their own ink rather than DemoThemis teal, which is the one
   thing on this panel that is meant to differ. */
body[data-page-brand="neutral"] .toc {
  background-color: var(--dt-canvas);
  background-image: var(--dt-brand-gradient-soft);
}
body[data-page-brand="neutral"] .toc li a {
  color: var(--accent-ink);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  text-decoration-skip-ink: auto;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
body[data-page-brand="neutral"] .toc li a:hover,
body[data-page-brand="neutral"] .toc li a.active {
  color: var(--accent-ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

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.
   The chapter buttons (.series-nav a) are listed for the neutral pages as well
   as the branded ones. They used to wear the cyan rim only on DemoThemis and
   Fortify The Court, so the same control was rimmed on two chapters and bare
   on the other three and the home page. */
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(
  .series-nav a,
  .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(
    .series-nav a,
    .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(
  .series-nav a,
  .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;
}

/* Press, chapter buttons only. Hover lifts the card 2px and glows around it.
   Press used to be a weaker hover, the same halo at half the radius, which
   read as the glow fading rather than as a press. The card now sinks 1px,
   the rim goes solid, a cyan wash lies over the grain, and the glow moves
   inside the card. The direction label nudges the way the card points.
   Every other control keeps the brand's shared press. */
body[data-page-brand]:not([data-page-brand="omen"]) .series-nav a:active {
  transform: translateY(1px) scale(.985);
  border-color: var(--dt-emission);
  background-image:
    linear-gradient(rgba(var(--dt-emission-rgb), .14), rgba(var(--dt-emission-rgb), .14)),
    var(--dt-brand-gradient-soft);
  box-shadow:
    inset 0 0 0 1px var(--dt-emission),
    inset 0 0 16px rgba(var(--dt-emission-rgb), .3),
    0 0 0 1px rgba(var(--dt-emission-rgb), .55);
  filter: none;
  transition-duration: 40ms;
}
.series-nav .dir { display: block; transition: transform 90ms ease, color 90ms ease; }
body[data-page-brand]:not([data-page-brand="omen"]) .series-nav a:active :is(.dir, .ttl) { color: var(--dt-emission-ink); }
body[data-page-brand]:not([data-page-brand="omen"]) .series-nav a.prev:active .dir { transform: translateX(-3px); }
body[data-page-brand]:not([data-page-brand="omen"]) .series-nav a.next:active .dir { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  body[data-page-brand]:not([data-page-brand="omen"]) .series-nav a:active,
  body[data-page-brand]:not([data-page-brand="omen"]) .series-nav a:active .dir { transform: none; }
}

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(.series-nav a:focus-visible, [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"] {
  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 {
  display: none;
}

body[data-page-brand="neutral"] .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 {
  --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;
}

/* The child-lifting rule above would pull the status rail back into flow;
   restore its bottom-edge anchoring, same escape hatch as the owner coin. */
body[data-page-brand="neutral"] .map-card[data-brand] > .map-status {
  position: absolute;
}

body[data-page-brand="neutral"] .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 {
  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,
  .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;
  }
}