/* The Cross Family demo styling, confined.
 *
 * Generated by scripts/port-demo-css.py from the Cross Family site, whose
 * copy carries the comments explaining each decision. Every selector here is
 * under .demo-scope and every keyframe is renamed, so this dresses the six
 * product demos and can reach nothing else. Do not edit it by hand: run the
 * script.
 */
.demo-scope {
  
  --ink:       #16203a;
  --ink-soft:  #4a5571;
  --ink-faint: #6b768f;
  --ink-mute:  #6a7488;   

  
  --navy:      #14315b;
  --navy-deep: #0d2143;
  --navy-soft: #2a4a7c;
  --teal:      #1797b3;
  --teal-deep: #0d7d90;
  --orange:    #f1851f;

  
  --bg:      #ffffff;
  --bg-soft: #f6f8fb;
  --bg-warm: #eef2f7;
  --line:    #dfe5ee;
  --line-soft:#eaeff5;

  
  --good: #2e9e6b;
  --fair: #b7841f;
  --poor: #c86526;
  --bad:  #c33a2f;

  
  --accent:       #1797b3;
  --accent-deep:  #0d7d90;
  --accent-light: #e7f5f8;

  
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  
  --shadow-sm: 0 1px 2px rgba(20,49,91,.06), 0 1px 1px rgba(20,49,91,.04);
  --shadow-md: 0 1px 2px rgba(20,49,91,.06), 0 6px 18px rgba(20,49,91,.08);
  --shadow-lg: 0 1px 2px rgba(13,33,67,.06), 0 8px 20px rgba(13,33,67,.08), 0 24px 60px rgba(13,33,67,.10);

  
  --s-tight: 44px;
  --s-base:  68px;
  --s-loud:  92px;
}
.demo-scope .t-scan { --accent:#1596a5; --accent-deep:#0d7180; --accent-light:#e4f4f7; }
.demo-scope .t-connect { --accent:#2f6fb0; --accent-deep:#215389; --accent-light:#e8f0f9; }
.demo-scope .t-check { --accent:#b8760f; --accent-deep:#8d5a09; --accent-light:#fbf0dd; }
.demo-scope .t-room { --accent:#e35a1c; --accent-deep:#b34413; --accent-light:#fdeee5; }
.demo-scope .t-trust { --accent:#173a6b; --accent-deep:#0f2749; --accent-light:#e8edf5; }
.demo-scope .t-venue { --accent:#0d5f70; --accent-deep:#084754; --accent-light:#e6f1f3; }
.demo-scope { box-sizing: border-box; margin: 0; padding: 0; }
.demo-scope {
  scroll-behavior: smooth;
  
  scroll-padding-top: calc(var(--upbar-h) + 68px + 12px);
}
.demo-scope {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.demo-scope img, .demo-scope svg { display: block; max-width: 100%; height: auto; }
.demo-scope a { color: var(--navy); text-decoration: none; }
.demo-scope a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.demo-scope ::selection { background: var(--accent-light); color: var(--navy); }
.demo-scope :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.demo-scope .dark :focus-visible, .demo-scope .site-footer :focus-visible, .demo-scope .demo-head :focus-visible, .demo-scope .app-nav :focus-visible { outline-color: #7fd3e2; }
.demo-scope .skip-link { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: 8px 16px; z-index: 200; }
.demo-scope .skip-link:focus { left: 16px; top: 12px; }
.demo-scope .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.demo-scope .wrap-narrow { max-width: 780px;  margin: 0 auto; padding: 0 28px; }
.demo-scope section { padding: var(--s-base) 0; }
.demo-scope section.dark, .demo-scope section.cta-band { padding: var(--s-loud) 0; }
.demo-scope section + section.soft { padding-top: var(--s-tight); }
.demo-scope .soft { background: var(--bg-soft); box-shadow: inset 0 1px 0 rgba(20,49,91,.05), inset 0 -1px 0 rgba(20,49,91,.045); }
.demo-scope .cta-band h2 { max-width: 24ch; margin: 0 0 16px; }
.demo-scope .cta-band > .wrap-narrow > p { max-width: 56ch; margin: 0; }
.demo-scope .cta-band .btn-row { justify-content: flex-start; }
.demo-scope .cta-band.warm { background: radial-gradient(72% 130% at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--bg-warm)), var(--bg-warm) 72%); }
.demo-scope .warm { background: var(--bg-warm); box-shadow: inset 0 1px 0 rgba(20,49,91,.055), inset 0 -1px 0 rgba(20,49,91,.05); }
.demo-scope .dark { background: var(--navy); color: #fff; }
.demo-scope section.dark { position: relative; overflow: hidden; }
.demo-scope section.dark > .wrap, .demo-scope section.dark > .wrap-narrow { position: relative; z-index: 1; }
.demo-scope section.dark::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: radial-gradient(58% 100% at 50% 0%, rgba(127,211,226,.13), transparent 72%);
  pointer-events: none;
}
.demo-scope .dark h2, .demo-scope .dark h3, .demo-scope .dark h4 { color: #fff; }
.demo-scope .dark p, .demo-scope .dark li { color: rgba(255,255,255,.76); }
.demo-scope .dark-intro { max-width: 640px; margin-bottom: 22px; font-size: 15px; line-height: 1.6; }
.demo-scope .dark a { color: #fff; }
.demo-scope .dark .eyebrow { color: #7fd3e2; }
.demo-scope .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: 12px;
}
.demo-scope h1, .demo-scope h2, .demo-scope h3, .demo-scope h4 { color: var(--navy); line-height: 1.16; letter-spacing: -.02em; font-weight: 700; }
.demo-scope h1 { font-size: 52px; font-weight: 800; letter-spacing: -.034em; }
.demo-scope h2 { font-size: 38px; margin-bottom: 18px; letter-spacing: -.026em; }
.demo-scope h3 { font-size: 21px; margin-bottom: 8px; }
.demo-scope h4 { font-size: 16px; margin-bottom: 6px; letter-spacing: -.005em; }
.demo-scope p { color: var(--ink-soft); }
.demo-scope p + p { margin-top: 14px; }
.demo-scope strong { color: var(--ink); font-weight: 650; }
.demo-scope .lede { font-size: 20px; line-height: 1.55; color: var(--ink-soft); max-width: 64ch; }
.demo-scope .section-intro { max-width: 66ch; margin-bottom: 40px; }
.demo-scope .section-intro > p { font-size: 16px; color: var(--ink-faint); }
.demo-scope .muted { color: var(--ink-faint); font-size: 15px; }
.demo-scope code, .demo-scope .mono { font-family: var(--mono); font-size: .88em; }
.demo-scope { --upbar-h: 38px; }
.demo-scope .upbar {
  position: sticky; top: 0; z-index: 70;
  background: var(--navy); color: rgba(255,255,255,.66); font-size: 13px;
}
.demo-scope .upbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--upbar-h); }
.demo-scope .upbar a { color: #9fd8e6; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.demo-scope .upbar a:hover { color: #fff; text-decoration: none; }
.demo-scope .upbar a .ar { font-size: 15px; line-height: 1; }
.demo-scope .upbar .sits { color: rgba(255,255,255,.55); }
@media (max-width: 640px) {
.demo-scope .upbar .sits { display: none; }
}
.demo-scope .site-header {
  position: sticky; top: var(--upbar-h); z-index: 60;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.demo-scope .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 68px; }
.demo-scope .brand { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.demo-scope .brand:hover { text-decoration: none; }
.demo-scope .brand > svg { width: 26px; height: 26px; flex: none; }
.demo-scope .brand .c2 { color: var(--teal); }
.demo-scope .brand .by { font-size: 11px; font-weight: 500; color: var(--ink-mute); letter-spacing: .02em; margin-left: 2px; }
.demo-scope .nav { display: flex; align-items: center; gap: 16px; }
.demo-scope .nav a:not(.btn) { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.demo-scope .nav a:not(.btn):hover { color: var(--navy); text-decoration: none; }
.demo-scope .nav a:not(.btn)[aria-current="page"] { color: var(--navy); font-weight: 650; }
.demo-scope .nav .btn { padding: 8px 11px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1160px) {
.demo-scope .nav { gap: 14px; }
.demo-scope .nav .btn { padding: 8px 10px; }
}
.demo-scope .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; }
.demo-scope .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; }
.demo-scope .nav-toggle span + span { margin-top: 4px; }
.demo-scope .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 650; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.demo-scope .btn:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
.demo-scope .btn:active { transform: translateY(1px); }
.demo-scope .btn-primary { background: var(--navy); color: #fff; }
.demo-scope .btn-primary:hover { background: var(--navy-soft); }
.demo-scope .btn-accent { background: var(--accent); color: #fff; }
.demo-scope .btn-accent:hover { background: var(--accent-deep); }
.demo-scope .btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.demo-scope .btn-ghost:hover { border-color: var(--navy-soft); }
.demo-scope .dark .btn-primary { background: #fff; color: var(--navy); }
.demo-scope .dark .btn-primary:hover { background: #e7eef6; }
.demo-scope .dark .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.demo-scope .dark .btn-ghost:hover { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); }
.demo-scope .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.demo-scope .startchip {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--accent-light); color: var(--accent-deep);
  padding: 3px 7px; border-radius: 4px;
}
.demo-scope .btn-primary .startchip { background: rgba(255,255,255,.18); color: #fff; }
.demo-scope .hero {
  padding: 88px 0 72px; position: relative;
  
  background:
    radial-gradient(58% 52% at 84% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    radial-gradient(46% 60% at 6% 0%, color-mix(in srgb, var(--navy) 6%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.demo-scope .hero h1 { max-width: 18ch; margin-bottom: 20px; }
.demo-scope .hero .lede { font-size: 21px; }
.demo-scope .hero .figure img, .demo-scope .hero .shot { box-shadow: var(--shadow-lg); }
.demo-scope .hero-product { border-top: 4px solid var(--accent); }
.demo-scope .hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.demo-scope .hero-product h1 { font-size: 40px; max-width: 15ch; }
.demo-scope .trust-line {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-faint); max-width: 58ch;
}
.demo-scope .product-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.demo-scope .product-eyebrow img, .demo-scope .product-eyebrow svg { width: 40px; height: 40px; flex: none; }
.demo-scope .product-eyebrow .pn { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.demo-scope .product-eyebrow .pn em { font-style: normal; color: var(--accent); }
.demo-scope .product-eyebrow .pt { font-size: 13px; color: var(--ink-faint); }
.demo-scope .pillar { margin-bottom: 44px; }
.demo-scope .pillar-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; padding-bottom: 14px; border-bottom: 2px solid var(--line); }
.demo-scope .pillar-head h2 { font-size: 26px; margin: 0; }
.demo-scope .pillar-head .when { font-size: 12px; font-weight: 700; color: var(--ink-mute); letter-spacing: .09em; text-transform: uppercase; margin-left: auto; }
.demo-scope .pillar > p { margin: 12px 0 22px; max-width: 70ch; }
.demo-scope .pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.demo-scope .pcard {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  border-left: 4px solid var(--pa, var(--line));
  padding: 22px 24px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.demo-scope .pcard:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.demo-scope .pcard:focus-visible { outline-offset: 3px; border-radius: var(--r-md); }
.demo-scope .pcard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.demo-scope .pcard-top img, .demo-scope .pcard-top svg { width: 28px; height: 28px; flex: none; }
.demo-scope .pcard-top .name { font-size: 18px; font-weight: 700; color: var(--navy); }
.demo-scope .pcard-top .name em { font-style: normal; color: var(--pa); }
.demo-scope .pcard .job { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.demo-scope .pcard-note {
  align-self: center; padding: 4px 4px 4px 22px;
  border-left: 1px solid var(--line);
}
.demo-scope .pcard-note p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.demo-scope .pcard-note p + p { margin-top: 12px; }
.demo-scope .pcard-note b { color: var(--navy); }
@media (max-width: 860px) {
.demo-scope .pcard-note { border-left: 0; padding-left: 4px; }
}
.demo-scope .pcard .q { margin-top: 12px; font-size: 14px; color: var(--ink-faint); font-style: italic; }
.demo-scope .pcard .go { margin-top: 14px; font-size: 14px; font-weight: 650; color: var(--pa); }
.demo-scope .compare { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.demo-scope .compare th, .demo-scope .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 15px; vertical-align: top; }
.demo-scope .compare tbody tr:nth-child(even) td, .demo-scope .compare tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--bg-soft) 50%, #fff); }
.demo-scope .compare thead th { background: var(--bg-soft); font-size: 13px; letter-spacing: .04em; }
.demo-scope .compare thead th:first-child { color: var(--ink-mute); text-transform: uppercase; font-size: 11px; letter-spacing: .09em; }
.demo-scope .compare thead th.h-scan { color: #0d7180; border-top: 3px solid #1596a5; }
.demo-scope .compare thead th.h-connect { color: #215389; border-top: 3px solid #2f6fb0; }
.demo-scope .compare tbody th { font-weight: 600; color: var(--ink-faint); width: 24%; font-size: 14px; }
.demo-scope .compare td { color: var(--ink); }
.demo-scope .compare tr:last-child th, .demo-scope .compare tr:last-child td { border-bottom: none; }
.demo-scope .compare .lead { font-weight: 680; color: var(--navy); display: block; }
.demo-scope .compare .sm { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 2px; line-height: 1.45; }
.demo-scope #together { overflow-x: clip; }
.demo-scope .assembly { position: relative; }
.demo-scope .assembly-stage { margin: 0 auto; max-width: 940px; }
.demo-scope .piecegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 0; }
.demo-scope .piece {
  display: block; position: relative;
  border: 1px solid var(--line); border-top: 4px solid var(--pa);
  border-radius: var(--r-md); padding: 18px 17px 20px; background: #fff;
  z-index: 2;
}
.demo-scope .piece:hover { text-decoration: none; }
.demo-scope .pgo { margin-left: 7px; opacity: 0; transition: opacity .16s, transform .16s; display: inline-block; }
.demo-scope .piece:hover .pgo, .demo-scope .piece:focus-visible .pgo { opacity: .8; transform: translateX(3px); }
.demo-scope .piece h4 { font-size: 16px; color: var(--navy); margin-bottom: 8px; }
.demo-scope .piece h4 em { font-style: normal; color: var(--pa); }
.demo-scope .piece .q { font-size: 15px; line-height: 1.35; font-weight: 650; color: var(--navy); margin-bottom: 8px; }
.demo-scope .piece .when { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pa); margin-bottom: 8px; }
.demo-scope .piece .does { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.demo-scope .baseplate {
  margin-top: 14px; background: var(--navy); color: #fff;
  border-radius: var(--r-lg); padding: 30px 26px 24px;
  position: relative; z-index: 1;
}
.demo-scope .baseplate h4 { color: #fff; font-size: 15px; letter-spacing: .02em; }
.demo-scope .baseplate .rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 12px; }
.demo-scope .baseplate .rule { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.45; }
.demo-scope .baseplate .rule b { display: block; color: #7fd3e2; font-weight: 650; margin-bottom: 2px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
@supports (clip-path: path("M0 0 H1 Z")) {
@media (min-width: 1180px) {
.demo-scope .assembly-stage { max-width: none; width: 1104px; }
.demo-scope .piecegrid {
      grid-template-columns: repeat(3, 368px);
      grid-template-rows: repeat(2, 360px);
      gap: 0; justify-content: center;
    }
.demo-scope .piece {
      width: 482px; height: 474px; margin: -57px;
      border: 0; border-radius: 0;
      
      padding: 126px;
      display: flex; flex-direction: column; justify-content: center;
      
      background:
        linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30))
          0 57px / 100% 2px no-repeat,
        linear-gradient(178deg,
          rgba(255,255,255,.15) 0,
          rgba(255,255,255,.05) 15%,
          rgba(255,255,255,0) 46%,
          rgba(0,0,0,.10) 100%),
        var(--pd);
      color: #fff;
      
      filter:
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 72%, #04101c))
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 56%, #04101c))
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 42%, #04101c))
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 30%, #04101c))
        drop-shadow(0 2px 2px rgba(6, 16, 30, .5))
        drop-shadow(0 20px 22px rgba(6, 16, 30, .36));
    }
.demo-scope .piece h4 { color: #fff; font-size: 17px; margin-bottom: 10px; }
.demo-scope .piece h4 em { color: rgba(255,255,255,.62); }
.demo-scope .piece .q { color: #fff; font-size: 17px; line-height: 1.3; margin-bottom: 10px; }
.demo-scope .piece .when {
      color: rgba(255,255,255,.66); font-size: 10px; margin-bottom: 10px;
    }
.demo-scope .piece .does { color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.55; }
.demo-scope .piece:hover {
      transform:
        translate(0px, -6px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1);
      z-index: 8;
    }
.demo-scope .piecegrid:not(.adrift) .piece { transition: transform 180ms ease-out; }
.demo-scope .piecegrid.will-assemble:not(.adrift) .piece:hover { transition-delay: 0ms; }
.demo-scope .piece:focus-visible {
      outline: none;
      filter:
        drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
        drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 72%, #04101c))
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 56%, #04101c))
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 42%, #04101c))
        drop-shadow(0 3px 0 color-mix(in srgb, var(--pd) 30%, #04101c))
        drop-shadow(0 2px 2px rgba(6, 16, 30, .5))
        drop-shadow(0 20px 22px rgba(6, 16, 30, .36));
      z-index: 9;
    }
.demo-scope .piece:nth-child(1) { z-index: 6; }
.demo-scope .piece:nth-child(2) { z-index: 5; }
.demo-scope .piece:nth-child(3) { z-index: 4; }
.demo-scope .piece:nth-child(4) { z-index: 3; }
.demo-scope .piece:nth-child(5) { z-index: 2; }
.demo-scope .piece:nth-child(6) { z-index: 1; }
.demo-scope .piece:nth-child(1) {
      clip-path: path("M 57 57 H 425 V 203 A 38 38 0 1 1 425 271 V 417 \
        H 275 A 38 38 0 1 1 207 417 H 57 Z");
    }
.demo-scope .piece:nth-child(2) {
      clip-path: path("M 57 57 H 425 V 203 A 38 38 0 1 1 425 271 V 417 \
        H 275 A 38 38 0 1 1 207 417 H 57 V 271 A 38 38 0 1 0 57 203 Z");
    }
.demo-scope .piece:nth-child(3) {
      clip-path: path("M 57 57 H 425 V 417 \
        H 275 A 38 38 0 1 1 207 417 H 57 V 271 A 38 38 0 1 0 57 203 Z");
    }
.demo-scope .piece:nth-child(4) {
      clip-path: path("M 57 57 H 207 A 38 38 0 1 0 275 57 H 425 V 203 \
        A 38 38 0 1 1 425 271 V 417 H 275 A 38 38 0 1 1 207 417 H 57 Z");
    }
.demo-scope .piece:nth-child(5) {
      clip-path: path("M 57 57 H 207 A 38 38 0 1 0 275 57 H 425 V 203 \
        A 38 38 0 1 1 425 271 V 417 H 275 A 38 38 0 1 1 207 417 H 57 \
        V 271 A 38 38 0 1 0 57 203 Z");
    }
.demo-scope .piece:nth-child(6) {
      clip-path: path("M 57 57 H 207 A 38 38 0 1 0 275 57 H 425 V 417 \
        H 275 A 38 38 0 1 1 207 417 H 57 V 271 A 38 38 0 1 0 57 203 Z");
    }
.demo-scope .baseplate {
      margin-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
      padding-top: 74px;
      clip-path: path("M 0 0 \
        H 150 A 38 38 0 1 0 218 0 \
        H 518 A 38 38 0 1 0 586 0 \
        H 886 A 38 38 0 1 0 954 0 \
        H 1104 V 3000 H 0 Z");
    }
.demo-scope .piecegrid { perspective: 1600px; perspective-origin: 50% 45%; }
.demo-scope .piece {
      transform:
        translate(0px, 0px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1);
    }
.demo-scope .piecegrid.assembling .piece {
      animation: cd-piece-home 1900ms cubic-bezier(.26, .58, .32, .99) backwards;
      animation-delay: var(--wait, 0ms);
    }
.demo-scope .assembly-stage.assembling .baseplate {
      animation: cd-plate-home 760ms ease-out backwards;
    }
}
}
.demo-scope .chooser { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
.demo-scope .chooser-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); transition: background .14s; }
.demo-scope .chooser-row:last-child { border-bottom: none; }
.demo-scope .chooser-row:hover { background: var(--bg-soft); text-decoration: none; }
.demo-scope .chooser-row:hover .ans { transform: translateX(3px); }
.demo-scope .chooser-row .ans { transition: transform .14s; }
.demo-scope .chooser-row .said { font-size: 16px; color: var(--ink); }
.demo-scope .chooser-row .said b { font-weight: 650; }
.demo-scope .chooser-row .ans { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; color: var(--navy); justify-self: start; }
.demo-scope .chooser-row .ans img, .demo-scope .chooser-row .ans svg { width: 22px; height: 22px; flex: none; }
.demo-scope .grid { display: grid; gap: 20px; }
.demo-scope .grid-2 { grid-template-columns: 1fr 1fr; }
.demo-scope .grid-3 { grid-template-columns: repeat(3, 1fr); }
.demo-scope .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; }
.demo-scope .card .num { font-size: 12px; font-weight: 700; color: var(--ink-mute); letter-spacing: .08em; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.demo-scope .card p { font-size: 15px; }
.demo-scope .caps { list-style: none; border-top: 1px solid var(--line); }
.demo-scope .caps li { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 210px 1fr; gap: 30px; align-items: start; }
.demo-scope .caps strong { color: var(--navy); font-size: 15.5px; font-weight: 680; }
.demo-scope .caps span { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.demo-scope .not-list { list-style: none; display: grid; gap: 11px; }
.demo-scope .not-list li { font-size: 15.5px; color: var(--ink-soft); padding-left: 26px; position: relative; }
.demo-scope .not-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 13px; height: 2px; background: var(--ink-mute); border-radius: 2px; }
.demo-scope .dark .not-list li { color: rgba(255,255,255,.78); }
.demo-scope .dark .not-list li::before { background: rgba(255,255,255,.45); }
.demo-scope .shot { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.demo-scope .shot img { width: 100%; }
.demo-scope .shot-cap { font-size: 13px; color: var(--ink-faint); margin-top: 12px; text-align: center; }
.demo-scope .shot-cap b { color: var(--ink-soft); font-weight: 600; }
.demo-scope .demo { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-md); }
.demo-scope .demo-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--navy); color: #fff;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.demo-scope .demo-head .dt { font-size: 14px; font-weight: 650; }
.demo-scope .demo-head .badge {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  background: var(--orange); color: #2a1400; padding: 3px 8px; border-radius: 4px; font-weight: 700;
}
.demo-scope .demo-head .spacer { margin-left: auto; }
.demo-scope .demo-head .reset {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.24);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.demo-scope .demo-head .reset:hover { background: rgba(255,255,255,.2); }
.demo-scope .demo-start {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; background: var(--accent-light); border-bottom: 1px solid var(--line);
}
.demo-scope .demo-start .step-n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.demo-scope .demo-start .txt { font-size: 15px; color: var(--ink); flex: 1; min-width: 260px; }
.demo-scope .demo-start .txt b { font-weight: 680; color: var(--navy); }
.demo-scope .demo-start .go {
  background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm);
  padding: 9px 18px; font-size: 14px; font-weight: 650; cursor: pointer; font-family: inherit;
}
.demo-scope .demo-start .go:hover { background: var(--accent-deep); }
.demo-scope .demo-start .prog { font-size: 12px; font-weight: 650; color: var(--ink-mute); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.demo-scope .demo-start .step-n[hidden], .demo-scope .demo-start .prog[hidden] { display: none; }
.demo-scope .app [data-goto]:not(.inert), .demo-scope .app [data-open], .demo-scope .app [data-configs], .demo-scope .app [data-trust], .demo-scope .app [data-unk], .demo-scope .app [data-do] { cursor: pointer; }
.demo-scope .demo-body { position: relative; padding: 0; background: var(--bg-soft); min-height: 560px;
  display: flex; flex-direction: column; }
.demo-scope .demo-screen { display: none; padding: 22px; opacity: 0; transform: translateY(4px); }
.demo-scope .demo-screen.on { display: block; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
.demo-scope .hint {
  position: sticky; top: 76px; z-index: 6;
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 22px 18px; padding: 13px 16px;
  background: #fff; border: 1px solid var(--accent); border-left: 4px solid var(--accent);
  border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
}
.demo-scope .hint[hidden] { display: none; }
.demo-scope .hint .icon { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.demo-scope .hint .h-txt { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.demo-scope .hint .h-txt b { color: var(--navy); font-weight: 680; }
.demo-scope .hint .h-next {
  margin-left: auto; flex: none; align-self: center;
  background: var(--navy); color: #fff; border: none; border-radius: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 650; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.demo-scope .hint .h-next:hover { background: var(--navy-soft); }
.demo-scope .hint .h-next[disabled] { opacity: .45; cursor: default; }
.demo-scope .tgt { position: relative; cursor: pointer; }
.demo-scope .tgt.live { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); border-radius: inherit; }
.demo-scope .tgt.live::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid var(--accent); animation: cd-pulse 2.2s cubic-bezier(.4,0,.2,1) infinite; pointer-events: none;
}
@keyframes cd-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
.demo-scope .tgt.live::after { animation: none; opacity: .6; }
}
.demo-scope .demo-done {
  margin: 0 22px 22px; padding: 22px 24px;
  background: var(--accent-light); border: 1px solid var(--accent);
  border-radius: var(--r-md);
}
.demo-scope .demo-done h3 { font-size: 19px; margin-bottom: 6px; }
.demo-scope .demo-done p { font-size: 15px; max-width: 62ch; }
.demo-scope .demo-done .btn-row { margin-top: 18px; }
.demo-scope .inert { cursor: default; }
.demo-scope .demo-note { padding: 12px 22px 20px; font-size: 12.5px; color: var(--ink-mute); text-align: center; }
.demo-scope .demo-toast {
  position: sticky; margin: 0 auto 16px; bottom: 16px; width: fit-content; z-index: 5;
  background: var(--navy); color: #fff; font-size: 13px; padding: 8px 16px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.demo-scope .demo-toast.on { opacity: 1; }
.demo-scope .app {
  position: relative;          
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "hd hd" "nav main" "ft ft";
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #eef1f5; min-height: 380px; font-size: 13px;
}
.demo-scope .app-hd {
  grid-area: hd;
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  
  background: #12283a;
  color: #eef4f8;
}
.demo-scope .app-hd img { width: 22px; height: 22px; flex: none; border-radius: 5px; }
.demo-scope .app-hd .hd-name { font-weight: 700; font-size: 14px; }
.demo-scope .app-hd .hd-tag { font-size: 10.5px; color: rgba(238,244,248,.7); }
.demo-scope .app-hd .hd-badge {
  margin-left: auto; font-size: 10px; font-weight: 700; padding: 2.5px 7px;
  border-radius: 4px; background: #f2a33c; color: #2a1a04; white-space: nowrap;
}
.demo-scope .app-nav { grid-area: nav; background: #14315b; color: #e9f0fb; padding: 12px 8px 14px; }
.demo-scope .app-nav .an-brand {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 2px 8px 14px; text-align: center;
}
.demo-scope .app-nav .an-brand img { width: 30px; height: 30px; }
.demo-scope .app-nav .an-brand .wm { font-size: 17px; font-weight: 700; color: #fff; }
.demo-scope .app-nav .an-brand .wm .c2 { color: #5cc8dd; }
.demo-scope .app-nav .an-brand .tag {
  font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #aebfdb; line-height: 1.5;
}
.demo-scope .app-nav .an-grp {
  display: block; padding: 9px 10px 3px; text-transform: uppercase;
  letter-spacing: .1em; font-size: 9px; font-weight: 700; color: #aebfdb;
}
.demo-scope .app-nav .an-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 10px; border-radius: 8px; border: 0; background: none;
  color: #aebfdb; font: inherit; font-size: 12.5px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.demo-scope .app-nav .an-item svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.demo-scope .app-nav .an-item:hover { background: rgba(255,255,255,.10); color: #e9f0fb; }
.demo-scope .app-nav { --rail-accent: #5cc8dd; }
.demo-scope .app-nav .an-item {
  position: relative; border-left: 3px solid transparent; padding-left: 9px;
}
.demo-scope .app-nav .an-item.sel {
  background: rgba(255,255,255,.20); color: #fff; border-left-color: var(--rail-accent);
}
.demo-scope .app-nav .an-item.sel svg { opacity: 1; }
.demo-scope .app-nav .an-item.inert { cursor: default; color: #7f93b5; opacity: 1; }
.demo-scope .app-nav .an-item.inert svg { opacity: .45; }
.demo-scope .app-nav .an-item.inert::after {
  content: ''; margin-left: auto; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .5; flex: none;
}
.demo-scope .app-nav .an-item.inert:hover { background: rgba(255,255,255,.04); color: #7f93b5; }
.demo-scope .scanlog { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 12px 14px; max-width: 440px; }
.demo-scope .scanlog-h { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.demo-scope .scanlog ul { list-style: none; margin: 0; padding: 0; max-height: 168px; overflow: auto; }
.demo-scope .scanlog li {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px; color: var(--ink-soft); padding: 3px 0 3px 18px; position: relative;
}
.demo-scope .scanlog li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #46a06b; }
.demo-scope .scanlog li.done { color: var(--navy); font-weight: 700; padding-top: 8px; }
.demo-scope .scanlog li.done::before { top: 14px; background: var(--accent, #e8731c); }
.demo-scope .cfilters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.demo-scope .cmore-b { margin-top: 4px; font-size: 13px; padding: 8px 14px; }
.demo-scope .ctab tr.row-click, .demo-scope .rtab tr.row-click { cursor: pointer; }
.demo-scope .ctab tr.row-click:hover, .demo-scope .rtab tr.row-click:hover { background: #eef4fb; }
.demo-scope .ctab tr.row-click:focus-visible, .demo-scope .rtab tr.row-click:focus-visible { outline: 2px solid var(--accent, #e8731c); outline-offset: -2px; }
.demo-scope .ctile-b, .demo-scope .cchip-b { cursor: pointer; font: inherit; text-align: left; border: 1px solid var(--line); }
.demo-scope .ctile-b:hover, .demo-scope .cchip-b:hover { border-color: var(--accent, #e8731c); }
.demo-scope .demo-exit {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-warm, #f7f5f2);
}
.demo-scope .demo-exit .dx-t { font-size: 14px; color: var(--ink-soft); flex: 1 1 260px; }
.demo-scope .demo-exit .dx-b { font-size: 14px; padding: 9px 16px; white-space: nowrap; }
@media (max-width: 620px) {
.demo-scope .demo-exit .dx-b { width: 100%; justify-content: center; }
}
.demo-scope .app-main { grid-area: main; padding: 14px 16px; background: #eef1f5; overflow: auto; }
.demo-scope .app-ft {
  grid-area: ft; padding: 7px 14px; background: #fff; border-top: 1px solid var(--line);
  font-size: 10px; color: var(--ink-mute); line-height: 1.5;
}
.demo-scope .app-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
}
.demo-scope .app-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.demo-scope .app-sub { font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; }
.demo-scope .app-label { display: block; font-size: 11px; color: var(--ink-faint); margin-bottom: 4px; font-weight: 500; }
.demo-scope .app-field {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid #cfd6e2; border-radius: var(--r-sm);
  padding: 9px 11px;
  box-shadow: inset 0 1px 2px rgba(20,49,91,.06);
}
.demo-scope .app-field.mono { font-family: var(--mono); font-size: 12.5px; }
.demo-scope .app-field:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.demo-scope .app-hint { font-size: 11px; color: var(--ink-mute); margin-top: 5px; line-height: 1.45; }
.demo-scope .app-num { font-size: 11px; color: var(--ink-mute); margin-bottom: 4px; font-weight: 600; }
.demo-scope .cform { display: grid; gap: 14px; max-width: 470px; }
.demo-scope .cform-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-scope .cform-go { display: flex; gap: 9px; align-items: center; margin-top: 2px; }
.demo-scope .cform-go .btn { padding: 10px 20px; font-size: 14px; }
.demo-scope .cseg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.demo-scope .cseg-b {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: #fff; border: 1px solid #cfd6e2; border-radius: var(--r-sm);
  padding: 8px 10px; line-height: 1.3; transition: border-color .12s, background .12s;
}
.demo-scope .cseg-b span { font-size: 10px; font-weight: 500; color: var(--ink-mute); }
.demo-scope .cseg-b:hover { border-color: var(--accent); }
.demo-scope .cseg-b.on {
  background: var(--accent-light); border-color: var(--accent); color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.demo-scope .cseg-b.on span { color: var(--accent-deep); }
.demo-scope .csamp { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.demo-scope .csamp-h {
  font-size: 12px; font-weight: 700; color: var(--navy); cursor: pointer;
  list-style: none; display: flex; align-items: baseline; gap: 6px;
}
.demo-scope .csamp-h::-webkit-details-marker { display: none; }
.demo-scope .csamp-h::before { content: '\203A'; color: var(--accent); font-weight: 700; }
.demo-scope .csamp[open] .csamp-h { margin-bottom: 10px; }
.demo-scope .csamp[open] .csamp-h::before { content: '\2039'; }
.demo-scope .csamp-h span { font-weight: 500; color: var(--ink-mute); }
.demo-scope .csamp-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-scope .csamp-c {
  display: block; text-align: left; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; transition: border-color .12s, transform .12s;
}
.demo-scope .csamp-c:hover { border-color: var(--accent); transform: translateY(-1px); }
.demo-scope .csamp-c.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.demo-scope .csamp-c b { display: block; font-size: 12.5px; color: var(--navy); margin-bottom: 3px; }
.demo-scope .csamp-c span { font-size: 11px; color: var(--ink-mute); line-height: 1.45; }
@media (max-width: 700px) {
.demo-scope .cseg, .demo-scope .csamp-g { grid-template-columns: 1fr; }
}
.demo-scope table.g { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.demo-scope table.g th {
  text-align: left; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; padding: 7px 8px; border-bottom: 1px solid var(--line);
}
.demo-scope table.g td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); vertical-align: top; }
.demo-scope table.g tr:last-child td { border-bottom: none; }
.demo-scope table.g .dev { color: var(--ink); font-weight: 600; }
.demo-scope table.g .sub { display: block; color: var(--ink-mute); font-size: 11px; font-family: var(--mono); margin-top: 1px; }
.demo-scope table.g tr.row-click { cursor: pointer; }
.demo-scope table.g tr.row-click:hover td { background: var(--bg-soft); }
.demo-scope .pill {
  display: inline-block; font-size: 10.5px; font-weight: 650; padding: 2.5px 8px;
  border-radius: var(--r-pill); border: 1px solid; white-space: nowrap;
}
.demo-scope .p-good { color: #1a6e48; border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }
.demo-scope .p-fair { color: #7d5a12; border-color: color-mix(in srgb, var(--fair) 40%, transparent); background: color-mix(in srgb, var(--fair) 8%, transparent); }
.demo-scope .p-poor { color: #a8500f; border-color: color-mix(in srgb, var(--poor) 40%, transparent); background: color-mix(in srgb, var(--poor) 8%, transparent); }
.demo-scope .p-bad { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 40%, transparent);  background: color-mix(in srgb, var(--bad) 8%, transparent); }
.demo-scope .p-mute { color: var(--ink-mute); border-color: var(--line); background: var(--bg-soft); }
.demo-scope .verdict { display: flex; align-items: center; gap: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); }
.demo-scope .verdict .ring { flex: none; width: 104px; height: 104px; position: relative; }
.demo-scope .verdict .ring svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.demo-scope .verdict .ring .rv { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.demo-scope .verdict .ring .rv b { display: block; font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1; }
.demo-scope .verdict .ring .rv span { font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); }
.demo-scope .verdict .vmeta { flex: 1; min-width: 0; }
.demo-scope .verdict .vchange { font-size: 10px; font-family: var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; }
.demo-scope .verdict .vband { font-size: 25px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.demo-scope .verdict .vscale { font-size: 11.5px; color: var(--ink-faint); font-family: var(--mono); }
.demo-scope .verdict .vsay { font-size: 14px; color: var(--ink); margin-top: 7px; font-weight: 600; }
.demo-scope .verdict .vfid { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--ink-faint); }
.demo-scope .verdict .vfid .bar { width: 90px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.demo-scope .verdict .vfid .bar i { display: block; height: 100%; background: var(--accent); }
.demo-scope .finding { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; margin-top: 10px; background: #fff; }
.demo-scope .finding .fh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.demo-scope .finding .ft { font-size: 13.5px; font-weight: 680; color: var(--navy); }
.demo-scope .finding .prov { margin-left: auto; font-size: 9.5px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.demo-scope .finding .fd { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.demo-scope .finding .fix { font-size: 12.5px; color: var(--ink); margin-top: 6px; }
.demo-scope .finding .fix b { color: var(--accent-deep); }
.demo-scope .cli {
  font-family: var(--mono); font-size: 11.5px; background: #0d1b2f; color: #cfe3f2;
  padding: 10px 12px; border-radius: 6px; margin-top: 8px; overflow-x: auto; line-height: 1.6;
}
.demo-scope .cli .c { color: #7fd3e2; }
.demo-scope .site-footer { background: var(--navy); color: rgba(255,255,255,.62); padding: 56px 0 30px; font-size: 14px; }
.demo-scope .site-footer p { color: rgba(255,255,255,.62); }
.demo-scope .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.13); }
.demo-scope .site-footer h4 { color: #fff; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; }
.demo-scope .site-footer ul { list-style: none; display: grid; gap: 9px; }
.demo-scope .site-footer a { color: rgba(255,255,255,.72); }
.demo-scope .site-footer a:hover { color: #fff; }
.demo-scope .site-footer .blurb { max-width: 42ch; line-height: 1.6; }
.demo-scope .site-footer .site-privacy { margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,.5); }
.demo-scope .footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.6); }
.demo-scope .footer-bottom .legal a { color: rgba(255,255,255,.66); }
.demo-scope .footer-bottom .legal a:hover { color: #fff; }
.demo-scope .spec-wrap {
  overflow-x: auto; margin: 22px 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); background: #fff;
}
.demo-scope table.spec { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.demo-scope table.spec th, .demo-scope table.spec td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.demo-scope table.spec thead th {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
  font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--bg-soft);
}
.demo-scope table.spec tbody th { font-weight: 650; color: var(--ink); white-space: nowrap; }
.demo-scope table.spec tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-soft) 50%, #fff); }
.demo-scope table.spec tbody tr:hover { background: var(--accent-light); }
.demo-scope table.spec td { color: var(--ink-soft); line-height: 1.55; }
.demo-scope table.spec .mono { font-family: var(--mono); font-size: 12.5px; }
.demo-scope table.spec tr:last-child td, .demo-scope table.spec tr:last-child th { border-bottom: 0; }
.demo-scope .yes { color: var(--good); font-weight: 700; }
.demo-scope .no { color: var(--ink-mute); }
.demo-scope .spec-note { font-size: 13px; color: var(--ink-mute); line-height: 1.6; margin-top: 10px; }
.demo-scope .tier {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap;
}
.demo-scope .tier-1 { background: #e4f4f7; color: #0d7180; }
.demo-scope .tier-2 { background: #eef2f7; color: #46536e; }
.demo-scope .tier-3 { background: #fbf0dd; color: #7d5a12; }
.demo-scope .anchors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.demo-scope .anchors a {
  font-size: 13px; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-pill);
  text-decoration: none; color: var(--ink-soft); background: #fff;
}
.demo-scope .anchors a:hover { border-color: var(--teal); color: var(--teal-deep); }
.demo-scope .nf { text-align: center; padding: 96px 0 110px; }
.demo-scope .nf .code { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--ink-mute); text-transform: uppercase; font-weight: 700; }
.demo-scope .nf h1 { font-size: 34px; margin: 14px 0 12px; }
.demo-scope .nf .lede { max-width: 54ch; margin: 0 auto 34px; }
.demo-scope .nf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; margin-bottom: 34px; }
.demo-scope .nf-grid a {
  display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); text-decoration: none; transition: border-color .12s ease, transform .12s ease;
}
.demo-scope .nf-grid a:hover { border-color: var(--pa, var(--teal)); transform: translateY(-2px); }
.demo-scope .nf-grid b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; }
.demo-scope .nf-grid span { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 780px) {
.demo-scope .nf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.demo-scope .nf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
.demo-scope h1 { font-size: 36px; }
.demo-scope .hero-product h1 { font-size: 32px; }
.demo-scope h2 { font-size: 28px; }
.demo-scope .hero, .demo-scope section { padding: 56px 0; }
.demo-scope .hero-split { grid-template-columns: 1fr; gap: 36px; }
.demo-scope .piecegrid { grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-scope .baseplate .rules { grid-template-columns: 1fr; gap: 14px; }
.demo-scope .grid-3 { grid-template-columns: 1fr 1fr; }
.demo-scope .footer-top { grid-template-columns: 1fr 1fr; }
.demo-scope .piece { animation: none !important; transform: none !important; opacity: 1 !important; }
}
@media (max-width: 1000px) {
.demo-scope .nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 28px 18px;
  }
.demo-scope .nav.open { display: flex; }
.demo-scope .nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--bg-warm); font-size: 15px; }
.demo-scope .nav .btn { margin-top: 10px; justify-content: center; font-size: 14px; padding: 9px 16px; }
.demo-scope .nav-toggle { display: block; }
}
@media (max-width: 760px) {
.demo-scope .pcards, .demo-scope .grid-2, .demo-scope .grid-3 { grid-template-columns: 1fr; }
.demo-scope .piecegrid { grid-template-columns: 1fr; }
.demo-scope .caps li { grid-template-columns: 1fr; gap: 6px; }
.demo-scope .chooser-row { grid-template-columns: 1fr; gap: 10px; }
.demo-scope .app { grid-template-columns: 1fr; }
.demo-scope .app-nav { display: none; }
.demo-scope .verdict { flex-direction: column; align-items: flex-start; }
.demo-scope .lede, .demo-scope .hero .lede { font-size: 18px; }
.demo-scope .footer-top { grid-template-columns: 1fr; gap: 28px; }
.demo-scope .demo-body { min-height: 0; }
.demo-scope .hint { flex-wrap: wrap; }
.demo-scope .hint .h-next { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.demo-scope { scroll-behavior: auto; }
.demo-scope, .demo-scope *::after, .demo-scope *::before { animation: none !important; transition: none !important; }
.demo-scope .piece { transform: none !important; opacity: 1 !important; }
}
@media print {
.demo-scope .piece, .demo-scope .baseplate { animation: none !important; transform: none !important; opacity: 1 !important; }
.demo-scope .site-header, .demo-scope .nav, .demo-scope .demo-start, .demo-scope .hint { display: none !important; }
}
@media (max-width: 760px) {
.demo-scope .compare, .demo-scope .compare tbody, .demo-scope .compare tr, .demo-scope .compare th, .demo-scope .compare td { display: block; width: auto; }
.demo-scope .compare thead { display: none; }
.demo-scope .compare tr { border-bottom: 1px solid var(--line); padding: 4px 0 10px; }
.demo-scope .compare tr:last-child { border-bottom: none; }
.demo-scope .compare tbody th {
    width: 100%; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-mute); font-weight: 700; padding: 16px 18px 4px; border: none;
  }
.demo-scope .compare td { border: none; padding: 8px 18px; position: relative; }
.demo-scope .compare td[data-p]::before {
    content: attr(data-p);
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    margin-bottom: 3px;
  }
.demo-scope .compare td[data-p="CrossScan"]::before { color: #0d7180; }
.demo-scope .compare td[data-p="CrossConnect"]::before { color: #215389; }
.demo-scope .compare td[data-p="CrossScan"] { border-left: 3px solid #1596a5; margin: 0 18px 6px; padding: 8px 0 8px 12px; }
.demo-scope .compare td[data-p="CrossConnect"] { border-left: 3px solid #2f6fb0; margin: 0 18px 6px; padding: 8px 0 8px 12px; }
.demo-scope .compare td[colspan] { padding: 8px 18px 14px; }
}
.demo-scope .ex-bar { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
.demo-scope .ex-chip {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-mute);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; cursor: pointer;
}
.demo-scope .ex-chip:hover { border-color: var(--accent); color: var(--accent); }
.demo-scope .ex-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.demo-scope .ex-chip b { font-weight: 700; opacity: .7; margin-left: 2px; }
.demo-scope .ex-count { margin-left: auto; font-size: 12px; color: var(--ink-mute); }
.demo-scope .ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.demo-scope .unk-why { font-size: 12px; color: var(--ink-soft); line-height: 1.5; max-width: 420px; }
.demo-scope .ex-scroll { max-height: 340px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.demo-scope .ex-scroll thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.demo-scope .ex-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.demo-scope .ex-tile {
  flex: 1 1 96px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; text-align: center;
}
.demo-scope .ex-tile b { display: block; font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.15; }
.demo-scope .ex-tile span { font-size: 10.5px; color: var(--ink-mute); }
.demo-scope .ex-tile.t-good b { color: #1a6e48; }
.demo-scope .ex-tile.t-info b { color: #1d5fa8; }
.demo-scope .ex-tile.t-warn b { color: #a8500f; }
.demo-scope .ex-tile.t-note b { color: #6b3fa0; }
.demo-scope .ex-h { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin: 12px 0 6px; }
.demo-scope .ex-src { font-size: 10px; color: var(--ink-faint); line-height: 1.5; margin-top: 8px; }
.demo-scope .ex-port { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.demo-scope .ex-port small { display: block; font-size: 10px; color: var(--ink-faint); }
.demo-scope .ex-role {
  display: inline-block; font-size: 10px; font-weight: 650; padding: 1.5px 6px;
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink-mute); white-space: nowrap;
}
.demo-scope .ex-role.r-link { color: #6b3fa0; border-color: color-mix(in srgb, #6b3fa0 35%, transparent); }
.demo-scope .ex-conf { font-size: 12px; font-weight: 650; white-space: nowrap; }
.demo-scope .c-good { color: #1a6e48; }
.demo-scope .c-fair { color: #7d5a12; }
.demo-scope .c-mute { color: var(--ink-faint); }
.demo-scope .ex-sub2 { display: block; font-size: 10.5px; color: var(--ink-faint); }
.demo-scope .ex-ev {
  font-size: 10.5px; color: var(--ink-faint);
  max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-scope .ex-scroll table.g { min-width: 860px; }
.demo-scope .ex-scroll { overflow-x: auto; }
.demo-scope .ev-panel {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(15,26,40,.45); padding: 18px;
  display: flex; align-items: flex-start; justify-content: center; overflow: auto;
}
.demo-scope .ev-panel[hidden] { display: none; }
.demo-scope .ev-dlg {
  width: 100%; max-width: 620px; background: #fff; border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 18px 44px rgba(10,20,35,.3);
}
.demo-scope .ev-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.demo-scope .ev-top > div:first-child { flex: 1; }
.demo-scope .ev-close {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-mute);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 11px; cursor: pointer;
}
.demo-scope .ev-close:hover { color: var(--navy); border-color: var(--navy); }
.demo-scope .ev-why-block {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 12px; font-family: var(--mono);
  font-size: 11px; line-height: 1.65; color: var(--ink-soft); white-space: pre-wrap;
}
.demo-scope .ev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 6px; }
.demo-scope .ev-cols h4 { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; }
.demo-scope .kv { display: flex; gap: 8px; font-size: 11px; padding: 1.5px 0; }
.demo-scope .kv b { flex: none; width: 96px; color: var(--ink-faint); font-weight: 500; }
.demo-scope .kv span { color: var(--ink-soft); word-break: break-word; }
.demo-scope .ev { list-style: none; margin: 0; padding: 0; }
.demo-scope .ev li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.demo-scope .ev li:first-child { border-top: 0; }
.demo-scope .ev-pts {
  flex: none; width: 34px; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.demo-scope .ev-pts.up { color: #1a6e48; }
.demo-scope .ev-pts.down { color: var(--bad); }
.demo-scope .ev-pts.zero { color: var(--ink-faint); }
.demo-scope .ev-why { font-size: 12px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.demo-scope .ev-raw { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin: 1px 0 0; word-break: break-all; }
.demo-scope .ev-next { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.demo-scope .ex-map {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; max-height: 420px; overflow: auto;
}
.demo-scope .ex-map svg { display: block; width: 100%; height: auto; }
.demo-scope .ex-search { flex: 1; min-width: 180px; max-width: 340px; font-size: 12px; padding: 6px 10px; }
.demo-scope .rm-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.demo-scope .rm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.demo-scope .rm-head b { font-size: 14px; color: var(--navy); }
.demo-scope .rm-head .n { font-size: 11px; color: var(--ink-mute); }
.demo-scope .rm-meta { font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); margin-bottom: 8px; }
.demo-scope .rm-ev { margin-top: 8px; }
.demo-scope .rm-ev summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--accent); }
.demo-scope .rm-ev .ev { margin-top: 8px; }
@media (max-width: 720px) {
.demo-scope .ev-cols { grid-template-columns: 1fr; }
}
.demo-scope {
  --sv-rose: var(--bad);
  --sv-orange: var(--poor);
  --sv-amber: var(--fair);
  --sv-sky: #2f6fb0;
  --sv-slate: var(--ink-mute);
  
  --sv-emerald: var(--good);
}
.demo-scope .vwarn {
  background: #fdf6e6; border: 1px solid #f0dcae; color: #7a5a10;
  border-radius: var(--r-sm); padding: 10px 13px; font-size: 13px; margin-bottom: 16px;
}
.demo-scope .vwarn b { color: #6b4f0c; }
.demo-scope .vsec { padding: 18px 0; border-top: 1px solid var(--line-soft); scroll-margin-top: 14px; }
.demo-scope .vsec:first-of-type { border-top: 0; padding-top: 4px; }
.demo-scope .vsec.lit {
  background: var(--accent-light); border-radius: var(--r-sm);
  box-shadow: 0 0 0 10px var(--accent-light); margin: 6px 0;
}
.demo-scope .vh { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.demo-scope .vh-s { font-weight: 500; font-size: 12.5px; color: var(--ink-mute); margin-left: 8px; }
.demo-scope .vhead { display: flex; gap: 22px; align-items: center; }
.demo-scope .vgauge { position: relative; flex: 0 0 auto; width: 108px; height: 108px; }
.demo-scope .vg { width: 108px; height: 108px; display: block; }
.demo-scope .vg-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.demo-scope .vg-num b { font-size: 30px; font-weight: 750; color: var(--navy); }
.demo-scope .vg-num span { font-size: 10.5px; color: var(--ink-mute); margin-top: 3px; }
.demo-scope .vwhat { min-width: 0; }
.demo-scope .vband {
  display: inline-block; font-size: 17px; font-weight: 750; color: #fff;
  padding: 3px 12px; border-radius: 5px; background: var(--sv-slate);
}
.demo-scope .vband.sv-rose { background: var(--bad); }
.demo-scope .vband.sv-amber { background: var(--fair); }
.demo-scope .vband.sv-emerald { background: var(--good); }
.demo-scope .vthresh { font-size: 12px; color: var(--ink-mute); margin: 8px 0 10px; }
.demo-scope .vgap {
  margin-left: 8px; background: var(--bg-warm); color: var(--ink-soft);
  padding: 2px 7px; border-radius: 4px; font-weight: 650;
}
.demo-scope .vline { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 5px; }
.demo-scope .vline b { color: var(--navy); }
.demo-scope .vfind { padding: 11px 0; border-bottom: 1px dashed var(--line-soft); }
.demo-scope .vfind:last-child { border-bottom: 0; }
.demo-scope .vfind-t { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.demo-scope .vfind-t b { font-size: 14px; color: var(--navy); }
.demo-scope .sv {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; padding: 2px 7px; border-radius: 4px; background: var(--sv-slate);
}
.demo-scope .sv-rose { background: var(--sv-rose); }
.demo-scope .sv-orange { background: var(--sv-orange); }
.demo-scope .sv-amber { background: var(--sv-amber); }
.demo-scope .sv-sky { background: var(--sv-sky); }
.demo-scope .sv-emerald { background: var(--sv-emerald); }
.demo-scope .vprov {
  font-size: 10.5px; color: var(--ink-mute); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 4px;
}
.demo-scope .vchecks { display: grid; gap: 2px; }
.demo-scope .vchk {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.demo-scope .vchk .sv { flex: none; margin-top: 1px; }
.demo-scope .vchk-b { min-width: 0; }
.demo-scope .vchk-b b { font-size: 13px; color: var(--navy); }
.demo-scope .vchk-f {
  font-size: 10px; color: var(--ink-mute); text-transform: uppercase;
  letter-spacing: .06em; margin-left: 7px;
}
.demo-scope .vchk-b p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 4px; }
.demo-scope .vchk-c { color: var(--ink-mute) !important; font-weight: 600; }
.demo-scope .vroll-h {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-mute); margin: 16px 0 8px;
}
.demo-scope .vroll { margin: 0 0 4px; padding-left: 18px; }
.demo-scope .vroll li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 4px; }
.demo-scope .vkb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 4px; }
.demo-scope .vkb-n {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 14px 12px;
}
.demo-scope .vkb-n b {
  display: block; font-size: 26px; font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.demo-scope .vkb-n span { font-size: 11px; color: var(--ink-mute); display: block; margin-top: 5px; }
.demo-scope .vkb-v { display: flex; flex-wrap: wrap; gap: 5px; }
.demo-scope .vkb-c {
  font-size: 11.5px; color: var(--ink-soft); background: #fff;
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px;
}
@media (max-width: 700px) {
.demo-scope .vkb { grid-template-columns: repeat(2, 1fr); }
}
.demo-scope .vmeth {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; margin-bottom: 10px;
}
.demo-scope .vmeth-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.demo-scope .vmeth-h b { font-size: 13.5px; color: var(--navy); }
.demo-scope .vmeth-id {
  font-size: 11px; color: var(--ink-mute); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: .02em;
}
.demo-scope .vmeth-rule { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 9px; }
.demo-scope .vmeth-in { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 10px; }
.demo-scope .vmeth-inl {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-mute); margin-right: 2px;
}
.demo-scope .vmeth-gb { display: grid; gap: 6px; }
.demo-scope .vmeth-g, .demo-scope .vmeth-b {
  font-size: 12px; color: var(--ink-soft); line-height: 1.55;
  display: flex; gap: 8px; align-items: baseline;
}
.demo-scope .vmeth-g .sv, .demo-scope .vmeth-b .sv { flex: none; }
.demo-scope .vfind-d { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: 6px; }
.demo-scope .vfind-f { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: 5px; }
.demo-scope .vfind-f b { color: var(--navy); }
.demo-scope .vimp { padding: 10px 0; border-bottom: 1px dashed var(--line-soft); }
.demo-scope .vimp:last-child { border-bottom: 0; }
.demo-scope .vimp b { font-size: 13.5px; color: var(--navy); }
.demo-scope .vimp p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; }
.demo-scope .vimp-m { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.demo-scope .vimp-m span { font-weight: 650; color: var(--navy); }
.demo-scope .vsteps { margin: 0 0 14px 18px; }
.demo-scope .vsteps li { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 10px; }
.demo-scope .vsteps li b { color: var(--navy); font-size: 13.5px; }
.demo-scope .vcfg { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; }
.demo-scope .vcfg-h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.demo-scope .vcfg-h b { font-size: 13px; color: var(--navy); }
.demo-scope .vcfg-k {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--accent-light); color: var(--accent-deep); padding: 2px 7px; border-radius: 4px;
}
.demo-scope .vcfg-l { margin: 0 0 10px 18px; }
.demo-scope .vcfg-l li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 4px; }
.demo-scope .vcfg-m { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.demo-scope .vcfg-m span { font-weight: 650; color: var(--navy); }
.demo-scope .vcfg-s { font-size: 11.5px; color: var(--ink-mute); margin-top: 9px; }
.demo-scope .vadv { font-size: 12.5px; color: var(--ink-mute); margin-top: 11px; font-style: italic; }
.demo-scope .vledger { width: 100%; border-collapse: collapse; }
.demo-scope .vledger td { padding: 8px 0; font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.demo-scope .vledger td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--navy); white-space: nowrap; }
.demo-scope .vledger .vl-n { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.demo-scope .vledger tr.bind td { background: #fdf6e6; }
.demo-scope .vledger tr.bind td.n { color: var(--fair); }
.demo-scope .vledger tr.inert-row td { color: var(--ink-mute); }
.demo-scope .vledger tr.tot td { border-bottom: 0; padding-top: 11px; font-weight: 700; color: var(--navy); font-size: 14px; }
@media (max-width: 640px) {
.demo-scope .vhead { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.demo-scope .app[data-app="check"] { height: 580px; }
.demo-scope .app[data-app="check"] .app-main { scroll-behavior: smooth; }
@media (max-width: 640px) {
.demo-scope .app[data-app="check"] { height: 520px; }
}
.demo-scope .app[data-app="room"] { height: 580px; }
.demo-scope .rlede {
  background: var(--accent-light); border-left: 3px solid var(--accent);
  padding: 10px 13px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px; color: var(--ink-soft); margin: 12px 0 16px;
}
.demo-scope .rlede b { color: var(--navy); }
.demo-scope .rgrp {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-mute); margin: 18px 0 8px;
}
.demo-scope .rgrp:first-of-type { margin-top: 4px; }
.demo-scope .rfe {
  display: flex; align-items: stretch; gap: 10px; margin: 14px 0 18px; flex-wrap: wrap;
}
.demo-scope .rfe-node {
  flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.demo-scope .rfe-node.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 5%, #fff); }
.demo-scope .rfe-node b { font-size: 15px; color: var(--navy); }
.demo-scope .rfe-k { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.demo-scope .rfe-s { font-size: 12px; color: var(--ink-soft); }
.demo-scope .rfe-s.good { color: #1a7d50; font-weight: 650; }
.demo-scope .rfe-node.bad .rfe-s { color: var(--bad); font-weight: 600; }
.demo-scope .rfe-arrow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 92px; color: var(--accent-deep);
}
.demo-scope .rfe-arrow span { font-size: 10px; font-weight: 650; letter-spacing: .03em; }
.demo-scope .rfe-arrow svg { width: 80px; height: 20px; }
@media (max-width: 640px) {
.demo-scope .rfe-arrow { transform: rotate(90deg); min-width: 0; height: 32px; }
}
.demo-scope .rtab { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.demo-scope .rtab th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-mute); padding: 9px 11px;
  border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.demo-scope .rtab td { padding: 9px 11px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-soft); vertical-align: middle; }
.demo-scope .rtab tr:last-child td { border-bottom: 0; }
.demo-scope .rtab td b { color: var(--navy); font-size: 13px; display: block; }
.demo-scope .rsub { font-size: 11px; color: var(--ink-mute); }
.demo-scope .rroom { color: var(--ink-mute); }
.demo-scope .rtab tr[data-open] { cursor: pointer; }
.demo-scope .rtab tr[data-open]:hover { background: var(--accent-light); }
.demo-scope .ropen { color: var(--accent-deep); font-weight: 650; white-space: nowrap; }
.demo-scope .rcause { font-weight: 600; color: var(--ink); }
.demo-scope .rnone { color: var(--ink-mute); font-weight: 400; }
.demo-scope .rscore { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy); }
.demo-scope .rpill {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: capitalize;
  color: #fff; padding: 2px 8px; border-radius: var(--r-pill);
}
.demo-scope .rpill.b-good { background: #1a7d50; }
.demo-scope .rpill.b-fair { background: #8a6414; }
.demo-scope .rpill.b-poor { background: #a8501c; }
.demo-scope .rpill.b-bad, .demo-scope .rpill.b-failed { background: #b23127; }
.demo-scope .reyebrow {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 4px;
}
.demo-scope .rhd { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.demo-scope .rstage { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 14px 0; }
.demo-scope .rtrace { width: 100%; height: auto; display: block; }
.demo-scope .rax { font-size: 9px; fill: var(--ink-mute); }
.demo-scope .rtrans { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.demo-scope .rplay {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--navy); cursor: pointer; font-size: 11px; flex: none;
}
.demo-scope .rbar { flex: 1; height: 4px; background: var(--bg-warm); border-radius: 2px; overflow: hidden; }
.demo-scope .rbar i { display: block; height: 100%; background: var(--accent); }
.demo-scope .rtime { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.demo-scope .rjump {
  font-size: 11.5px; font-weight: 650; padding: 5px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--accent); background: #fff; color: var(--accent-deep); cursor: pointer;
  white-space: nowrap;
}
.demo-scope .rjump:hover { background: var(--accent-light); }
.demo-scope .rback { display: flex; gap: 8px; margin-top: 16px; }
.demo-scope .rnow { display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.demo-scope .rnow-l, .demo-scope .rnow-r { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
.demo-scope .rmos { display: flex; align-items: baseline; gap: 5px; margin: 4px 0; }
.demo-scope .rmos b { font-size: 30px; font-weight: 750; color: var(--navy); line-height: 1; }
.demo-scope .rmos.b-poor b, .demo-scope .rmos.b-bad b { color: var(--bad); }
.demo-scope .rmos span { font-size: 11px; color: var(--ink-mute); }
.demo-scope .rcap { font-size: 10.5px; color: var(--ink-mute); line-height: 1.45; }
.demo-scope .rmeters { display: grid; gap: 7px; margin-top: 6px; }
.demo-scope .rmeter { display: grid; grid-template-columns: 96px 1fr 58px; align-items: center; gap: 9px; }
.demo-scope .rml { font-size: 11.5px; color: var(--ink-soft); }
.demo-scope .rmb { height: 6px; background: var(--bg-warm); border-radius: 3px; overflow: hidden; }
.demo-scope .rmb i { display: block; height: 100%; background: var(--accent); }
.demo-scope .rmb i.hot { background: var(--bad); }
.demo-scope .rmv { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 650; text-align: right; }
.demo-scope .rmoment { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; margin-top: 14px; }
.demo-scope .rmoment.bad { border-color: #e8b3ad; background: #fdf3f2; }
.demo-scope .rmk {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px;
}
.demo-scope .rmoment.bad .rmk { color: var(--bad); }
.demo-scope .rmoment p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.demo-scope .rmoment b { color: var(--navy); }
.demo-scope .rthesis { background: #fff; border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 12px 14px; margin: 12px 0 16px; }
.demo-scope .rthesis b { font-size: 16px; color: var(--navy); }
.demo-scope .rconf { font-size: 10.5px; color: var(--ink-mute); margin-left: 8px; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.demo-scope .rthesis p { font-size: 13px; color: var(--ink-soft); margin-top: 5px; line-height: 1.6; }
.demo-scope .rfive { display: grid; grid-template-columns: 62px 1fr; gap: 8px 14px; }
.demo-scope .rfive dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); padding-top: 2px; }
.demo-scope .rfive dd { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 640px) {
.demo-scope .app[data-app="room"] { height: 520px; }
.demo-scope .rnow { grid-template-columns: 1fr; }
.demo-scope .rroom, .demo-scope .rtab th:nth-child(2) { display: none; }
}
.demo-scope .app[data-app="connect"] { height: 580px; }
.demo-scope .ctiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 20px; }
.demo-scope .ctile { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
.demo-scope .ctile b { display: block; font-size: 24px; font-weight: 750; color: var(--navy); line-height: 1.1; }
.demo-scope .ctile span { font-size: 11px; color: var(--ink-mute); }
.demo-scope .ch { font-size: 14px; font-weight: 700; color: var(--navy); margin: 18px 0 10px; }
.demo-scope .ch-s { font-weight: 500; font-size: 12px; color: var(--ink-mute); margin-left: 7px; }
.demo-scope .ccrit {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 4px; color: #fff; background: var(--ink-mute);
}
.demo-scope .ccrit.c-critical { background: var(--bad); }
.demo-scope .ccrit.c-high { background: var(--poor); }
.demo-scope .ccrit.c-normal { background: var(--sv-sky); }
.demo-scope .ccrit.c-low { background: var(--ink-mute); }
.demo-scope .rtab td.n, .demo-scope .rtab th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-scope .cverd { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
.demo-scope .cverd.bad { border-color: #e8b3ad; background: #fdf3f2; }
.demo-scope .cverd.unknown { border-color: #d9c48f; background: #fbf6e8; }
.demo-scope .cverd-l { flex: 0 0 auto; }
.demo-scope .cbad {
  display: inline-block; font-size: 14px; font-weight: 750; color: #fff;
  background: var(--bad); padding: 3px 11px; border-radius: 5px;
}
.demo-scope .cwarn {
  display: inline-block; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--ink-mute); padding: 3px 10px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .05em;
}
.demo-scope .ctoggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 12px 14px; margin: 14px 0;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
}
.demo-scope .ctoggle-l { font-size: 12.5px; font-weight: 650; color: var(--navy); }
.demo-scope .cseg2 { display: flex; gap: 6px; }
.demo-scope .cseg2-b {
  display: flex; flex-direction: column; gap: 1px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink-soft);
  background: #fff; border: 1px solid #cfd6e2; border-radius: var(--r-sm);
  padding: 6px 12px; line-height: 1.25; transition: border-color .12s, background .12s;
}
.demo-scope .cseg2-b span { font-size: 10px; font-weight: 500; color: var(--ink-mute); }
.demo-scope .cseg2-b:hover { border-color: var(--accent); }
.demo-scope .cseg2-b.on {
  background: var(--accent-light); border-color: var(--accent); color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.demo-scope .cseg2-b.on span { color: var(--accent-deep); }
.demo-scope .cverd-l b { display: block; font-size: 13px; color: var(--navy); margin-top: 6px; }
.demo-scope .cverd-r p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.demo-scope .cverd-r b { color: var(--navy); }
.demo-scope .cverd-s { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.demo-scope .cchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.demo-scope .cchip {
  font-size: 11.5px; color: var(--ink-soft); background: var(--bg-warm);
  border-radius: var(--r-pill); padding: 3px 10px;
}
.demo-scope .cchip b { color: var(--navy); }
.demo-scope .cfail { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; margin-bottom: 8px; }
.demo-scope .cfail-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.demo-scope .cfail-h b { font-size: 13px; color: var(--navy); }
.demo-scope .ccat {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bad); background: #fdecea; padding: 2px 7px; border-radius: 4px;
}
.demo-scope .cmore { font-size: 12px; color: var(--ink-mute); margin: 8px 0 4px; }
@media (max-width: 640px) {
.demo-scope .app[data-app="connect"] { height: 520px; }
.demo-scope .ctiles { grid-template-columns: repeat(2, 1fr); }
.demo-scope .cverd { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.demo-scope .cchip.lost { background: #fdecea; color: var(--bad); font-weight: 650; }
.demo-scope .cchip.lost b { color: var(--bad); font-weight: 700; margin-left: 4px; font-size: 10.5px; }
.demo-scope .cdiff { background: #0f1f38; border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.demo-scope .cadd { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.demo-scope .cpm { color: #6ee7a8; font-weight: 700; flex: none; }
.demo-scope .cadd code { color: #ffd9d4; font-size: 12px; white-space: pre; font-family: var(--mono); }
.demo-scope .ctab { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.demo-scope .ctab th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); padding: 10px 11px;
  background: #eef1f8; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.demo-scope .ctab td { padding: 10px 11px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-soft); vertical-align: top; }
.demo-scope .ctab tr:last-child td { border-bottom: 0; }
.demo-scope .ctab td b { color: var(--navy); font-size: 13px; }
.demo-scope .ctab tr.row-bad td { background: #fdf6f5; }
.demo-scope .cpill {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.demo-scope .cpill.p-bad { background: #fdecea; color: #b23127; }
.demo-scope .cpill.p-good { background: #e6f4ec; color: #1a7d50; }
.demo-scope .cpill.p-fair { background: #fbf0dd; color: #8a5a12; }
.demo-scope .cpill.p-sky { background: #e4f2f7; color: #16607a; }
.demo-scope .cpill.p-mute { background: var(--bg-warm); color: var(--ink-mute); }
.demo-scope .ctab td.n, .demo-scope .ctab th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-scope .cdash { color: var(--ink-mute); }
.demo-scope .cans { line-height: 1.55; }
.demo-scope .ccause {
  display: block; margin-top: 5px; font-size: 11.5px; color: #b23127;
  background: #fdecea; border-radius: 4px; padding: 3px 7px; width: fit-content;
}
.demo-scope .app[data-app="trust"] { height: 580px; }
.demo-scope .ttab { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.demo-scope .ttab th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-mute); padding: 9px 11px;
  border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.demo-scope .ttab td { padding: 9px 11px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-soft); vertical-align: top; }
.demo-scope .ttab tr:last-child td { border-bottom: 0; }
.demo-scope .ttab td b { color: var(--navy); font-size: 13px; display: block; }
.demo-scope .ttab .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-scope .ttab .tmono { font-family: var(--mono); font-size: 12px; color: var(--navy); }
.demo-scope .ttab .tfix { color: var(--ink-mute); font-size: 12px; }
.demo-scope .ttab .tmiss { color: var(--ink-mute); font-size: 11.5px; line-height: 1.5; }
.demo-scope .tfull { color: #1a7d50; font-weight: 700; }
.demo-scope .tpart { color: var(--fair); font-weight: 700; }
.demo-scope .tnone { color: var(--ink-mute); font-weight: 400; }
.demo-scope .ttiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 12px 0 18px; }
.demo-scope .ttile { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
.demo-scope .ttile .n { display: block; font-size: 24px; font-weight: 800; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.demo-scope .ttile .k { display: block; margin-top: 5px; font-size: 11px; color: var(--ink-mute); line-height: 1.4; }
.demo-scope .ttile.warnish { border-color: color-mix(in srgb, var(--fair) 40%, var(--line)); }
.demo-scope .ttile.warnish .n { color: #9a6c10; }
.demo-scope .ttile.alert { border-color: color-mix(in srgb, var(--bad) 42%, var(--line)); background: color-mix(in srgb, var(--bad) 4%, #fff); }
.demo-scope .ttile.alert .n { color: var(--bad); }
.demo-scope .tpanel { border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; margin-bottom: 16px; background: #fff; }
.demo-scope .tpanel.alert { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 4%, #fff); }
.demo-scope .tp-h { font-size: 13.5px; font-weight: 700; color: var(--bad); margin-bottom: 5px; }
.demo-scope .tp-b { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 8px; }
.demo-scope .tlist { list-style: none; display: grid; gap: 4px; margin-bottom: 8px; }
.demo-scope .tlist li { font-size: 12px; color: var(--ink-soft); }
.demo-scope .tlist li b { color: var(--navy); font-family: var(--mono); font-size: 11.5px; }
.demo-scope .tp-ok { font-size: 12px; color: #1a7d50; line-height: 1.55; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.demo-scope .tp-ok b { color: #14663f; }
.demo-scope .tgrp {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-mute); margin: 18px 0 4px;
}
.demo-scope .tgrp:first-of-type { margin-top: 4px; }
.demo-scope .tcount {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--accent-light); color: var(--accent-deep); font-size: 10.5px;
}
.demo-scope .ttier-why { font-size: 12px; color: var(--ink-mute); margin-bottom: 10px; }
.demo-scope .tfind { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; margin-bottom: 12px; }
.demo-scope .tfind.sev-high { border-left: 3px solid var(--bad); }
.demo-scope .tfind.sev-medium { border-left: 3px solid var(--fair); }
.demo-scope .tfind.sev-low { border-left: 3px solid var(--line); }
.demo-scope .tf-top { display: flex; align-items: flex-start; gap: 10px; }
.demo-scope .tf-h { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 3px; flex: 1; }
.demo-scope .tf-q { font-size: 12px; color: var(--ink-mute); margin-bottom: 10px; }
.demo-scope .tf-fam { font-size: 11px; font-weight: 700; color: var(--accent-deep); margin-bottom: 6px; }
.demo-scope .tf-b, .demo-scope .tf-note, .demo-scope .tf-fix, .demo-scope .tf-where { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 6px; }
.demo-scope .tf-note { color: var(--ink-mute); font-style: italic; }
.demo-scope .tf-fix b, .demo-scope .tf-where b { color: var(--navy); }
.demo-scope .tf-where { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 0; }
.demo-scope .tsev {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; flex: none;
}
.demo-scope .tsev.s-high { background: #fdecea; color: #a8331b; }
.demo-scope .tsev.s-medium { background: #fbf1dd; color: #8d5a09; }
.demo-scope .tsev.s-low { background: var(--bg-warm); color: var(--ink-mute); }
.demo-scope .ttab .tsev { display: inline-block; margin-top: 4px; }
.demo-scope .tsides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.demo-scope .tside { border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; background: var(--bg-soft); }
.demo-scope .tv { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.demo-scope .tsays { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 7px; }
.demo-scope .twhere { font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; margin-bottom: 5px; }
.demo-scope .twhere b { color: var(--navy); font-family: var(--mono); font-size: 11px; }
.demo-scope .twhen, .demo-scope .tband { font-size: 11px; color: var(--ink-mute); }
.demo-scope .tnote { font-size: 11px; color: #8d5a09; margin-top: 6px; line-height: 1.45; }
@media (max-width: 640px) {
.demo-scope .tsides { grid-template-columns: 1fr; }
}
.demo-scope .tdec { border-top: 1px solid var(--line); padding-top: 12px; }
.demo-scope .td-h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; }
.demo-scope .td-q { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.demo-scope .td-stakes { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 10px; }
.demo-scope .topts { list-style: none; display: grid; gap: 7px; margin-bottom: 11px; }
.demo-scope .topts li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; border: 1px solid var(--line); border-radius: 6px; padding: 8px 11px; }
.demo-scope .to-v { font-size: 16px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.demo-scope .to-s { font-size: 12px; color: var(--ink-soft); }
.demo-scope .to-i { grid-column: 2; font-size: 11.5px; color: var(--ink-mute); }
.demo-scope .td-verdict {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; background: var(--accent-light);
  border-left: 3px solid var(--accent); padding: 9px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 9px;
}
.demo-scope .td-verdict b { color: var(--accent-deep); }
.demo-scope .td-settle {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.6;
  border-left: 3px solid #e8731c; padding: 8px 12px; background: #fff;
  border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 9px;
}
.demo-scope .td-settle b { color: var(--navy); }
.demo-scope .td-open { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.demo-scope .td-open code { font-family: var(--mono); font-size: 11.5px; color: var(--accent-deep); }
.demo-scope .tdec .td-h:not(:first-child) { margin-top: 12px; }
.demo-scope .tcode { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.demo-scope .tln { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 2px 10px 2px 0; align-items: baseline; }
.demo-scope .tln .tn { text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); padding-top: 1px; background: var(--bg-soft); }
.demo-scope .tln code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
.demo-scope .tln.hit { background: #fffaf3; }
.demo-scope .tln.hit.s-high { background: #fdf2f0; }
.demo-scope .tln.hit code { color: var(--ink); font-weight: 600; }
.demo-scope .twhy { grid-column: 2; font-size: 10.5px; color: #a8331b; padding-bottom: 3px; line-height: 1.4; }
.demo-scope .tln.hit.s-medium .twhy { color: #8d5a09; }
.demo-scope .tln.hit.s-low .twhy { color: var(--ink-mute); }
.demo-scope .tgo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.demo-scope .tgo .btn { padding: 9px 18px; font-size: 13.5px; }
.demo-scope .tgo-n { font-size: 11.5px; color: var(--ink-mute); }
.demo-scope .tquiet { background: var(--bg-soft); }
.demo-scope .tq-h { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.demo-scope .tnext { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.demo-scope .tjump {
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 14px; color: var(--accent-deep);
}
.demo-scope .tjump:hover { border-color: var(--accent); background: var(--accent-light); }
.demo-scope .an-badge {
  margin-left: auto; font-size: 9.5px; font-weight: 700; padding: 1px 6px;
  border-radius: var(--r-pill); background: #f2a33c; color: #2a1a04;
}
@media (max-width: 640px) {
.demo-scope .app[data-app="trust"] { height: 520px; }
.demo-scope .ttiles { grid-template-columns: repeat(2, 1fr); }
}
.demo-scope .app[data-app="venue"] { height: 620px; }
.demo-scope .vt4 { grid-template-columns: repeat(4, 1fr); }
.demo-scope .vstrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; margin-bottom: 12px;
}
.demo-scope .vstrip span { background: #fff; padding: 9px 11px; font-size: 11px; color: var(--ink-mute); }
.demo-scope .vstrip b { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.demo-scope .vcarry {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; background: var(--accent-light);
  border-left: 3px solid var(--accent); padding: 9px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 14px;
}
.demo-scope .vdecs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 12px; }
.demo-scope .vdec { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.demo-scope .vdec.lead { border-left: 3px solid var(--accent); }
.demo-scope .vdec h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; }
.demo-scope .vq { font-size: 12px; color: var(--ink-mute); line-height: 1.45; margin-bottom: 6px; }
.demo-scope .va { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 8px; }
.demo-scope .va.warn { color: #a8331b; }
.demo-scope .vfor { font-size: 11px; font-weight: 500; color: var(--ink-mute); }
.demo-scope .vdo { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 6px; }
.demo-scope .vdo b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 2px; }
.demo-scope .vwho { font-size: 11px; color: var(--ink-mute); }
.demo-scope .vblocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 6px; }
.demo-scope .vblock { background: #fff; border: 1px solid var(--line); border-left: 3px solid #c9873a; border-radius: 6px; padding: 10px 12px; }
.demo-scope .vb-h { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.demo-scope .vb-b { font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; }
.demo-scope .vsteps { list-style: none; counter-reset: vs; display: grid; gap: 7px; margin: 10px 0 0; padding: 0; }
.demo-scope .vsteps li { counter-increment: vs; display: grid; gap: 2px; border-left: 2px solid var(--line); padding: 2px 0 2px 11px; position: relative; }
.demo-scope .vsteps li::before {
  content: counter(vs); position: absolute; left: -8px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}
.demo-scope .vs-h { font-size: 11.5px; font-weight: 700; color: var(--navy); }
.demo-scope .vs-b { font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; }
.demo-scope .vs-v { font-size: 11px; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.demo-scope .vmoney { font-size: 12px; color: var(--ink-mute); line-height: 1.55; margin-top: 8px; }
.demo-scope .vbroke { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; margin-bottom: 12px; }
.demo-scope .vbroke.is-safety { border-left: 3px solid var(--bad); }
.demo-scope .vb-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.demo-scope .vb-tags .tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill); background: var(--bg-warm); color: var(--ink-mute);
}
.demo-scope .vb-tags .tag.is-safety { background: #fdecea; color: #a8331b; }
.demo-scope .vb-tags .tag.is-clock { background: #fbf1dd; color: #8d5a09; }
.demo-scope .vbroke h4 { font-size: 14px; color: var(--navy); margin-bottom: 3px; line-height: 1.35; }
.demo-scope .vwhere { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 10px; }
.demo-scope .vfour { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 10px; }
.demo-scope .vfour dt { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }
.demo-scope .vfour dd { font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.demo-scope .vsub { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.demo-scope .vcheck {
  font-size: 12px; color: var(--ink-soft); line-height: 1.55; background: var(--bg-soft);
  border-left: 3px solid var(--accent); padding: 8px 11px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.demo-scope .vcheck b { color: var(--navy); }
.demo-scope .vsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.demo-scope .vbig { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; }
.demo-scope .vbig .n { display: block; font-size: 27px; font-weight: 800; line-height: 1; color: #1c6b4a; font-variant-numeric: tabular-nums; }
.demo-scope .vbig .k { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-mute); line-height: 1.4; }
.demo-scope .vbig.muted .n { color: var(--ink-mute); text-decoration: line-through; text-decoration-thickness: 2px; }
.demo-scope .vamt { font-size: 15px; font-weight: 800; color: #1c6b4a; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.demo-scope .vamt.out { color: var(--ink-mute); text-decoration: line-through; }
.demo-scope .vmeta { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.demo-scope .vpairs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 8px; }
.demo-scope .vpairs dt { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
.demo-scope .vpairs dd { font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.demo-scope .vset { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; flex: none; }
.demo-scope .vset b { color: var(--accent-deep); font-size: 13px; }
.demo-scope .vworth { font-size: 11.5px; color: var(--ink-soft); }
.demo-scope .vworth b { color: var(--navy); }
.demo-scope .vrefuse {
  border: 1px solid color-mix(in srgb, var(--fair) 45%, var(--line));
  background: color-mix(in srgb, var(--fair) 5%, #fff);
  border-radius: 8px; padding: 13px 15px; margin: 12px 0 4px;
}
.demo-scope .vr-h { font-size: 12.5px; font-weight: 700; color: #8d5a09; margin-bottom: 5px; }
.demo-scope .vr-b { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.demo-scope .vpill {
  display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-pill);
}
.demo-scope .vpill.live { background: #e3f4ea; color: #176a41; }
.demo-scope .vpill.stub { background: var(--bg-warm); color: var(--ink-mute); }
@media (max-width: 860px) {
.demo-scope .vt4 { grid-template-columns: repeat(2, 1fr); }
.demo-scope .vdecs, .demo-scope .vblocks, .demo-scope .vfour, .demo-scope .vpairs, .demo-scope .vsplit { grid-template-columns: 1fr; }
.demo-scope .vstrip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.demo-scope .app[data-app="venue"] { height: 540px; }
}
.demo-scope .app[data-app="check"] {
  --accent: #1a9cb8; --accent-deep: #14788d; --accent-light: #e2f2f6;
}
.demo-scope .app[data-app="check"] .app-nav { background: #0f2233; --rail-accent: #4cc6dd; }
.demo-scope .app[data-app="check"] .app-nav .an-brand .wm .c2 { color: #4cc6dd; }
.demo-scope .app[data-app="check"] .app-main {
  background: #eef1f8;
  
  background-image: radial-gradient(rgba(20,49,91,.10) 1px, transparent 1px);
  background-size: 16px 16px;
}
.demo-scope .app[data-app="check"] .vsec {
  background: #fff; border: 1px solid #e2e7f0; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 12px; border-top: 1px solid #e2e7f0;
  box-shadow: 0 1px 2px rgba(20,49,91,.04);
}
.demo-scope .app[data-app="check"] .vsec.lit {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
  background: #fff;
}
.demo-scope .app[data-app="check"] .vband {
  background: none; color: var(--bad); font-size: 26px; font-weight: 750;
  padding: 0; letter-spacing: -.02em;
}
.demo-scope .app[data-app="check"] .vband.sv-amber { color: var(--fair); }
.demo-scope .app[data-app="check"] .vband.sv-emerald { color: var(--good); }
.demo-scope .app[data-app="check"] .vh {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.demo-scope .app[data-app="check"] .vh-s { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.demo-scope .app[data-app="check"] .vg-num span { text-transform: uppercase; letter-spacing: .08em; }
.demo-scope .app[data-app="room"] {
  --accent: #d2632a; --accent-deep: #b34413; --accent-light: #fbeee4;
}
.demo-scope .app[data-app="room"] .app-hd { background: #1b1a17; }
.demo-scope .app[data-app="room"] .app-nav { background: #14315b; }
.demo-scope .app[data-app="room"] .app-main { background: #faf7f2; }
.demo-scope .app[data-app="room"] .rstage, .demo-scope .app[data-app="room"] .rnow-l, .demo-scope .app[data-app="room"] .rnow-r, .demo-scope .app[data-app="room"] .rmoment, .demo-scope .app[data-app="room"] .rtab { background: #fff; border-color: #ece4d8; }
.demo-scope .app[data-app="room"] .rtab th { background: #f6f0e6; color: #7a6a52; border-bottom-color: #ece4d8; }
.demo-scope .app[data-app="room"] .rtab td { border-bottom-color: #f2ece2; }
.demo-scope .app[data-app="room"] .rbar { background: #f0e7d9; }
.demo-scope .app[data-app="room"] .rmb { background: #f0e7d9; }
.demo-scope .app[data-app="room"] .rmos b { color: #2e9e6b; font-size: 40px; }
.demo-scope .app[data-app="room"] .rmos.b-poor b, .demo-scope .app[data-app="room"] .rmos.b-bad b { color: #c33a2f; }
.demo-scope .app[data-app="room"] .rmb i { background: #2e9e6b; }
.demo-scope .app[data-app="room"] .rmb i.hot { background: #c33a2f; }
.demo-scope .app[data-app="room"] .reyebrow { color: #8a7a63; }
.demo-scope .app[data-app="room"] .rthesis { border-left-color: var(--bad); background: #fff; }
.demo-scope .app[data-app="room"] .rmoment.bad { border-color: #e8b3ad; background: #fdf3f2; }
.demo-scope .app[data-app="room"] .rfive dt { color: var(--accent-deep); }
.demo-scope .app[data-app="connect"] {
  --accent: #2f6fb0; --accent-deep: #215389; --accent-light: #e8f0f9;
}
.demo-scope .app[data-app="connect"] .app-main { background: #f4f6fa; }
.demo-scope .app[data-app="venue"] {
  --accent: #0d5f70; --accent-deep: #084754; --accent-light: #e8f2f4;
}
.demo-scope .app[data-app="venue"] .app-hd { background: #08313c; }
.demo-scope .app[data-app="venue"] .app-nav { background: #075d72; --rail-accent: #6fd0e0; }
.demo-scope .app[data-app="venue"] .app-nav .an-brand .wm .c2 { color: #6fd0e0; }
.demo-scope .app[data-app="venue"] .app-main { background: #f4f7f9; }
.demo-scope .app[data-app="venue"] .ttile .n { color: var(--accent-deep); }
.demo-scope .app[data-app="trust"] {
  --accent: #173a6b; --accent-deep: #0f2749; --accent-light: #e8edf5;
}
.demo-scope .app[data-app="trust"] .app-nav { background: #173a6b; }
.demo-scope .app[data-app="trust"] .app-nav .an-brand .wm .c2 { color: #36a9e1; }
.demo-scope .app[data-app="trust"] .app-nav { --rail-accent: #e8731c; }
.demo-scope .app[data-app="trust"] .app-nav .an-item.sel { border-radius: 0 8px 8px 0; }
.demo-scope .app[data-app="trust"] .app-main { background: #fff; }
.demo-scope .app[data-app="trust"] .ttab th { background: #f5f8fa; }
.demo-scope .app[data-app="trust"] .ttile { background: #f5f8fa; }
.demo-scope .app[data-app="trust"] .tside { background: #f5f8fa; }
.demo-scope .app[data-app="trust"] .app-hd { background: #10294b; }
.demo-scope .app[data-app="room"] .rax { fill: #9c8a6e; font-size: 9px; }
.demo-scope .app[data-app="room"] .rbx { fill: #b23127; font-size: 9.5px; font-weight: 700; }
.demo-scope .app[data-app="room"] .rjump { border-color: #d2632a; color: #b34413; }
.demo-scope .app[data-app="room"] .rjump:hover { background: #fbeee4; }
.demo-scope .app[data-app="room"] .rplay { border-color: #e3d5bf; color: #b34413; }
.demo-scope .rhd-v { text-align: right; }
.demo-scope .rthes { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 6px; max-width: 24ch; }
.demo-scope .vfid { display: flex; align-items: center; gap: 9px; margin: 10px 0 4px; }
.demo-scope .vfid span { font-size: 12px; color: var(--ink-soft); }
.demo-scope .vfid-b { width: 90px; height: 6px; background: var(--bg-warm); border-radius: 3px; overflow: hidden; }
.demo-scope .vfid-b i { display: block; height: 100%; background: var(--ink-mute); }
.demo-scope .vfid b { font-size: 12px; color: var(--navy); font-variant-numeric: tabular-nums; }
.demo-scope .ladder { display: grid; gap: 0; max-width: 82ch; margin-bottom: 28px; }
.demo-scope .rung {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.demo-scope .rung:last-child { border-bottom: 1px solid var(--line); }
.demo-scope .rung .rung-n {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 17px; font-weight: 750; color: #fff; border-radius: 50%; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: radial-gradient(115% 115% at 30% 24%,
    color-mix(in srgb, var(--accent) 68%, #fff), var(--accent) 52%, var(--accent-deep) 100%);
  box-shadow: 0 2px 5px rgba(20,49,91,.26), inset 0 1px 0 rgba(255,255,255,.45);
}
.demo-scope .rung strong { display: block; font-size: 16px; color: var(--navy); margin-bottom: 5px; padding-top: 8px; }
.demo-scope .rung span { display: block; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.demo-scope .ladder-foot { max-width: 72ch; margin-top: 14px; }
.demo-scope .ladder-foot strong { color: var(--navy); }
@media (max-width: 640px) {
.demo-scope .rung { gap: 14px; }
.demo-scope .rung-n { width: 38px; height: 38px; font-size: 15px; }
}
.demo-scope .vchg { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.demo-scope .figure { margin: 30px 0 0; }
.demo-scope .figure img {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); background: #fff;
}
.demo-scope .dark .figure img { border-color: rgba(255,255,255,.14); }
.demo-scope .figure figcaption {
  margin-top: 12px; font-size: 14px; color: var(--ink-faint); line-height: 1.6;
  max-width: 70ch;
}
.demo-scope .figure figcaption b { color: var(--navy); font-weight: 650; }
.demo-scope .dark .figure figcaption { color: rgba(255,255,255,.7); }
.demo-scope .dark .figure figcaption b { color: #fff; }
.demo-scope .receipt {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 24px; box-shadow: var(--shadow-sm); max-width: 620px;
}
.demo-scope .receipt-h {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute); padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.demo-scope .hero-receipt { max-width: none; box-shadow: var(--shadow-md); }
.demo-scope .hero-receipt .answers dd { font-size: 14px; }
.demo-scope .receipt-r { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.demo-scope .receipt-r .lab { flex: 1; font-size: 15px; color: var(--ink-soft); }
.demo-scope .receipt-r .lab em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.demo-scope .receipt-r .val { font-size: 15px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-scope .receipt-r.bind { background: var(--accent-light); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.demo-scope .receipt-r.bind .val { color: var(--accent-deep); }
.demo-scope .receipt-r.dim .lab, .demo-scope .receipt-r.dim .val { color: var(--ink-mute); font-weight: 500; }
.demo-scope .receipt-r.tot { border-bottom: 0; padding-top: 16px; }
.demo-scope .receipt-r.tot .lab { font-size: 17px; font-weight: 700; color: var(--navy); }
.demo-scope .receipt-r.tot .val { font-size: 26px; font-weight: 800; color: var(--bad); }
.demo-scope .receipt-foot { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); line-height: 1.6; }
.demo-scope .answers { display: grid; grid-template-columns: 74px 1fr; }
.demo-scope .answers dt {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-deep); padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.demo-scope .answers dd {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.demo-scope .answers dt:last-of-type, .demo-scope .answers dd:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.demo-scope .scoreboard {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 34px;
}
.demo-scope .score { background: #fff; padding: 22px 20px 20px; }
.demo-scope .score-n {
  font-size: 42px; font-weight: 800; line-height: 1; color: var(--accent-deep);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: 12px;
}
.demo-scope .score-n.word { font-size: 26px; padding-top: 14px; padding-bottom: 2px; }
.demo-scope .score-l { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 1080px) {
.demo-scope .scoreboard { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
.demo-scope .scoreboard { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.demo-scope .scoreboard { grid-template-columns: 1fr; }
}
.demo-scope .contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; }
.demo-scope .contact-form-col { min-width: 0; }
.demo-scope .contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-scope .contact-form .field { margin-bottom: 16px; }
.demo-scope .contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.demo-scope .contact-form input, .demo-scope .contact-form select, .demo-scope .contact-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 13px; transition: border-color .14s, box-shadow .14s;
}
.demo-scope .contact-form textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.demo-scope .contact-form input:focus, .demo-scope .contact-form select:focus, .demo-scope .contact-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23,151,179,.16);
}
.demo-scope .contact-form input:user-invalid { border-color: #cf5a3c; }
.demo-scope .contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 0; overflow: hidden; }
.demo-scope .btn.btn-large { font-size: 16px; padding: 13px 26px; margin-top: 4px; }
.demo-scope .form-error {
  background: #fdeceb; border: 1px solid #f1b6ab; color: #9a3418;
  border-radius: var(--r-md); padding: 12px 15px; font-size: 14px; line-height: 1.5; margin-bottom: 18px;
}
.demo-scope .form-error[hidden] { display: none; }
.demo-scope .form-fallback { font-size: 13px; color: var(--ink-faint); margin-top: 14px; line-height: 1.55; }
.demo-scope .contact-aside { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 26px 24px; box-shadow: var(--shadow-md); }
.demo-scope .contact-aside h2 { font-size: 17px; color: var(--navy); margin-bottom: 16px; }
.demo-scope .contact-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 15px; }
.demo-scope .contact-facts li { font-size: 14px; line-height: 1.55; color: var(--ink-soft); padding-left: 16px; position: relative; }
.demo-scope .contact-facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.demo-scope .contact-facts b { color: var(--ink); font-weight: 650; }
.demo-scope .contact-alt { font-size: 14px; color: var(--ink-faint); border-top: 1px solid var(--line-soft); padding-top: 16px; margin: 0; }
@media (max-width: 820px) {
.demo-scope .contact-grid { grid-template-columns: 1fr; gap: 30px; }
.demo-scope .contact-form .row { grid-template-columns: 1fr; gap: 0; }
}
@keyframes cd-piece-home {
  0% {
    transform:
      translate(var(--fx), var(--fy))
      rotateX(var(--frx, 0deg)) rotateY(var(--fry, 0deg)) rotate(var(--fr))
      scale(.72);
    opacity: 0;
  }
  58% { opacity: 1; }
  84% {
    transform:
      translate(0px, -3px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1.04);
    opacity: 1;
  }
  93% {
    transform:
      translate(0px, 1px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(.995);
  }
  100% {
    transform:
      translate(0px, 0px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1);
  }
}
@keyframes cd-plate-home {
  from { transform: translateY(56px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.demo-scope .verified-block { margin-top: 30px; padding: 22px 0 4px 22px; border-left: 3px solid #7fd3e2; }
.demo-scope .verified-block .eyebrow { margin-bottom: 10px; }
.demo-scope .verified-block .verified-lead { font-size: 17px; line-height: 1.62; color: #fff; }
.demo-scope .dark .verified-block .verified-lead b { color: #fff; }
.demo-scope .verified-block p + p { margin-top: 12px; }
@media (max-width: 640px) {
.demo-scope .verified-block { padding-left: 16px; margin-top: 24px; }
}
.demo-scope .objections { display: grid; gap: 22px 34px; margin-top: 26px; }
@media (min-width: 900px) {
.demo-scope .objections { grid-template-columns: 1fr 1fr; }
}
.demo-scope .obj { border-left: 2px solid var(--line); padding-left: 16px; }
.demo-scope .obj h3 { font-size: 15px; line-height: 1.4; margin: 0 0 6px; color: var(--navy); }
.demo-scope .obj p { font-size: 14.5px; line-height: 1.62; margin: 0; color: var(--ink-soft); }
.demo-scope .nextsteps { list-style: none; counter-reset: ns; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; max-width: 74ch; }
.demo-scope .nextsteps li {
  counter-increment: ns; position: relative; padding-left: 42px;
  font-size: 15px; line-height: 1.62; color: var(--ink-soft);
}
.demo-scope .nextsteps li::before {
  content: counter(ns); position: absolute; left: 0; top: 0;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.demo-scope .nextsteps b { color: var(--navy); }
.demo-scope .buyunit {
  margin-top: 28px; padding: 16px 20px; border-radius: var(--r-md);
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.62; max-width: 74ch;
}
.demo-scope .buyunit b { color: var(--navy); }
.demo-scope .routecards { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 760px) {
.demo-scope .routecards:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
}
.demo-scope .routecard {
  display: block; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: #fff; text-decoration: none;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.demo-scope .routecard:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.demo-scope .routecard h3 { font-size: 19px; margin: 0 0 8px; color: var(--navy); }
.demo-scope .routecard h3 em { font-style: normal; color: var(--accent); }
.demo-scope .routecard p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.demo-scope .routego { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.demo-scope .routecard:hover .routego { color: var(--accent-deep); }