*{margin:0;padding:0}img,svg,canvas{display:block;max-width:100%}
  /* A committed dark identity. Every colour painted explicitly so the page
     holds whatever ground the host paints behind it. */
  :root {
    color-scheme: dark;

    --void:     #06080C;
    --void-2:   #0A0E14;
    --panel:    #0C1119;
    --bone:     #E9EEF0;
    --slate:    #94A2AB;
    --slate-2:  #5C6B76;
    --rule:     rgba(233, 238, 240, 0.11);
    --rule-soft:rgba(233, 238, 240, 0.055);

    --accent:      #35C9BE;
    --accent-deep: #14707E;
    --accent-wash: rgba(53, 201, 190, 0.11);
    --warn:        #FF6A3D;

    --display: "Fraunces", Georgia, serif;
    --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    --gut: clamp(20px, 4vw, 62px);
    --maxw: 1280px;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--void);
    color: var(--bone);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { color: inherit; }

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

  .eyebrow {
    font-family: var(--mono); font-weight: 400; font-size: 10.5px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 18px;
  }
  .eyebrow--mute { color: var(--slate-2); }

  h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; }

  .h1 {
    font-family: var(--display); font-weight: 600;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
    font-size: clamp(44px, 7vw, 96px); line-height: 0.92; letter-spacing: -0.03em;
  }
  .h2 {
    font-family: var(--display); font-weight: 400;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120;
    font-size: clamp(32px, 5vw, 66px); line-height: 0.99; letter-spacing: -0.026em;
  }
  .h2 em { font-style: italic; font-weight: 600; }
  .h3 {
    font-family: var(--display); font-weight: 600;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60;
    font-size: clamp(21px, 2.2vw, 29px); line-height: 1.1; letter-spacing: -0.018em;
  }

  .lede {
    font-size: clamp(16px, 1.35vw, 19px); line-height: 1.58;
    color: var(--slate); max-width: 44ch; margin: 24px 0 0;
  }
  .body { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.68; color: var(--slate); max-width: 62ch; }
  .body + .body { margin-top: 15px; }
  .body b { color: var(--bone); font-weight: 600; }

  /* ---------------- nav ---------------- */

  .nav {
    position: sticky; top: 0; z-index: 60;
    background: rgba(6, 8, 12, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--rule);
  }
  .nav__in {
    max-width: var(--maxw); margin: 0 auto; padding: 13px var(--gut);
    display: flex; align-items: center; gap: 20px; justify-content: space-between;
  }
  .brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; }
  .brand b {
    font-family: var(--display); font-weight: 600;
    font-variation-settings: "SOFT" 0, "WONK" 1;
    font-size: 21px; letter-spacing: -0.02em; color: var(--bone);
  }
  .brand span {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--slate-2);
  }
  .nav__links { display: flex; gap: 24px; }
  @media (max-width: 879px) {
    .nav__in { flex-wrap: wrap; padding-bottom: 0; gap: 12px; }
    .nav .btn { padding: 9px 14px; font-size: 10px; margin-left: auto; }
  }
  @media (max-width: 479px) {
    .brand span { display: none; }
  }
  @media (max-width: 879px) {
    .nav__links {
      order: 3; width: 100%; overflow-x: auto; gap: 16px;
      padding: 9px 0 13px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .nav__links::-webkit-scrollbar { display: none; }
    .nav__links a { white-space: nowrap; font-size: 10px; letter-spacing: 0.1em; padding: 2px 0; }
    .nav__links a .full { display: none; }
  }
  .nav__links a {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--slate); text-decoration: none;
    padding: 4px 0; border-bottom: 1px solid transparent;
  }
  .nav__links a:hover, .nav__links a:focus-visible { border-bottom-color: var(--accent); color: var(--bone); }

  .btn {
    display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; text-decoration: none;
    padding: 12px 20px; border: 1px solid var(--accent);
    background: var(--accent); color: #04070A; border-radius: 2px;
    transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
  }
  .btn:hover, .btn:focus-visible {
    background: #4FE0D5; box-shadow: 0 0 26px rgba(53, 201, 190, 0.42);
  }
  .btn--ghost { background: transparent; color: var(--accent); }
  .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--accent-wash); box-shadow: none; color: #4FE0D5; }
  .btn--lg { padding: 16px 30px; font-size: 12px; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

  .hero { position: relative; height: 300vh; }
  .hero__pin { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; }
  #cv-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* legibility scrim so type never fights the particles behind it */
  .hero__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to right, rgba(6,8,12,0.94) 0%, rgba(6,8,12,0.78) 34%, rgba(6,8,12,0) 62%),
      linear-gradient(to bottom, rgba(6,8,12,0.7) 0%, rgba(6,8,12,0) 26%, rgba(6,8,12,0) 74%, rgba(6,8,12,0.8) 100%);
  }
  @media (max-width: 939px) {
    .hero__scrim {
      background: linear-gradient(to bottom, rgba(6,8,12,0.55) 0%, rgba(6,8,12,0.2) 30%, rgba(6,8,12,0.92) 58%, rgba(6,8,12,0.98) 100%);
    }
  }

  .hero__content {
    position: relative; z-index: 2; height: 100%;
    max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: clamp(56px, 11vh, 120px);
  }
  @media (min-width: 940px) {
    /* reserve headroom for the sticky nav and footroom for the instrument bar
       so centered hero copy can never collide with either */
    .hero__content { justify-content: center; padding-top: 96px; padding-bottom: 150px; }
    .hero__copy { max-width: 52%; }
  }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

  /* instrument readout, top right */
  .hud {
    position: absolute; z-index: 3;
    top: clamp(78px, 13vh, 124px);
    right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
    text-align: right;
  }
  @media (max-width: 939px) { .hud { top: 84px; } }
  .hud__k {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.17em;
    text-transform: uppercase; color: var(--slate-2);
  }
  .hud__v {
    font-family: var(--mono); font-weight: 500;
    font-size: clamp(26px, 3.6vw, 44px); line-height: 1;
    letter-spacing: -0.035em; color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 26px rgba(53,201,190,0.4);
  }
  .hud__sub {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--slate); margin-top: 12px;
  }

  .hero__cap {
    position: absolute; z-index: 3;
    left: 50%; transform: translateX(-50%);
    width: min(calc(100% - 2 * var(--gut)), calc(var(--maxw) - 2 * var(--gut)));
    bottom: clamp(18px, 3vh, 30px);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--slate-2);
    border-top: 1px solid var(--rule); padding-top: 12px;
    max-width: 68ch;
  }
  .hero__cap b { color: var(--accent); font-weight: 400; }
  @media (max-width: 939px) { .hero__cap { display: none; } }

  /* ---------------- pinned stages ---------------- */

  .pin { position: relative; }
  .pin--gate { height: 230vh; }
  .pin--scaf { height: 200vh; }
  .pin__in {
    position: sticky; top: 0; height: 100vh; min-height: 600px;
    display: flex; align-items: center; overflow: hidden;
  }
  .pin__grid {
    max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); width: 100%;
    display: grid; gap: clamp(24px, 3.6vw, 56px);
    grid-template-columns: 1fr; align-items: center;
  }
  @media (min-width: 940px) { .pin__grid { grid-template-columns: 0.88fr 1.12fr; } }

  .stage { position: relative; }
  .stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; }
  @media (min-width: 940px) { .stage canvas { aspect-ratio: 16 / 10.4; } }
  .stage__cap {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--slate-2);
    margin: 14px 0 0; border-top: 1px solid var(--rule); padding-top: 12px;
  }
  .stage__cap b { color: var(--bone); font-weight: 500; }

  .readout {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);
  }
  .readout i {
    font-style: normal; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate-2);
  }
  .readout b {
    font-family: var(--mono); font-weight: 500;
    font-size: clamp(28px, 3.8vw, 42px); letter-spacing: -0.035em;
    color: var(--accent); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 22px rgba(53,201,190,0.32);
  }
  .readout b.is-mute { color: var(--bone); text-shadow: none; }

  /* ---------------- bands ---------------- */

  section { position: relative; }
  .band { padding: clamp(76px, 13vh, 152px) 0; border-top: 1px solid var(--rule); }
  .band--tint { background: var(--void-2); }

  .split { display: grid; gap: clamp(26px, 4vw, 66px); grid-template-columns: 1fr; }
  @media (min-width: 880px) {
    .split { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
    .split--sticky > :first-child { position: sticky; top: 100px; }
  }

  .pull {
    font-family: var(--display); font-weight: 400;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 90;
    font-style: italic; font-size: clamp(23px, 3vw, 40px);
    line-height: 1.14; letter-spacing: -0.022em; color: var(--accent);
    margin: 36px 0 0; padding-left: 24px; border-left: 1px solid var(--accent);
    max-width: 24ch; text-shadow: 0 0 40px rgba(53,201,190,0.22);
  }

  .steps { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 8px; }
  .step {
    display: grid; grid-template-columns: 44px 1fr; gap: clamp(14px, 2vw, 28px);
    padding: clamp(26px, 3.6vh, 38px) 0; border-bottom: 1px solid var(--rule-soft);
    align-items: start;
  }
  .step:first-child { border-top: 1px solid var(--rule); }
  .step__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); padding-top: 8px; }
  .step__b { display: flex; flex-direction: column; gap: 11px; }
  .step__b p { margin: 0; }

  .conn { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
  @media (min-width: 700px) { .conn { grid-template-columns: repeat(3, 1fr); } }
  .conn div {
    padding: 18px 0; border-top: 1px solid var(--rule-soft);
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--slate);
    display: flex; align-items: center; gap: 11px;
  }
  .conn div::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex: none;
    box-shadow: 0 0 10px rgba(53,201,190,0.8);
  }
  .conn div.soon { color: var(--slate-2); }
  .conn div.soon::before { background: transparent; border: 1px solid var(--slate-2); box-shadow: none; }

  .metrics { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 10px; }
  @media (min-width: 760px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
  .metric {
    padding: clamp(26px, 3vh, 36px) 0; border-top: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 12px;
  }
  @media (min-width: 760px) {
    .metric { padding-right: 30px; }
    .metric + .metric { padding-left: 30px; border-left: 1px solid var(--rule-soft); }
  }
  .metric__v {
    font-family: var(--mono); font-weight: 500;
    font-size: clamp(36px, 4.8vw, 58px); line-height: 0.9;
    letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--bone);
  }
  .metric__v.is-real { color: var(--accent); text-shadow: 0 0 30px rgba(53,201,190,0.36); }
  .metric__l { font-size: 14.5px; line-height: 1.5; color: var(--slate); max-width: 30ch; }
  .tag {
    align-self: flex-start; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--warn); border: 1px solid rgba(255,106,61,0.5);
    border-radius: 2px; padding: 3px 7px;
  }
  .tag--real { color: var(--accent); border-color: rgba(53,201,190,0.5); }

  .note {
    margin-top: 30px; padding: 17px 19px;
    border: 1px dashed rgba(255,106,61,0.55); border-radius: 2px;
    font-family: var(--mono); font-size: 11px; line-height: 1.66;
    letter-spacing: 0.04em; color: var(--slate); max-width: 72ch;
    background: rgba(255,106,61,0.04);
  }
  .note b { color: var(--warn); font-weight: 500; }

  .cta__in { display: grid; gap: clamp(24px, 4vw, 62px); grid-template-columns: 1fr; align-items: end; }
  @media (min-width: 880px) { .cta__in { grid-template-columns: 1.2fr 0.8fr; } }
  .cta__list { list-style: none; margin: 0; padding: 0; }
  .cta__list li {
    padding: 14px 0; border-bottom: 1px solid var(--rule-soft);
    font-size: 14.5px; color: var(--slate);
    display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  }
  .cta__list li:first-child { border-top: 1px solid var(--rule); }
  .cta__list b { font-family: var(--mono); font-size: 10px; color: var(--accent); font-weight: 400; padding-top: 3px; }

  footer { border-top: 1px solid var(--rule); padding: 32px 0 52px; }
  .foot__in {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--slate-2);
  }

  .boot {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
    background: var(--void); transition: opacity 800ms ease;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--slate-2);
  }
  .boot.is-gone { opacity: 0; pointer-events: none; }

  @media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

  /* ---------------- four-part answer ---------------- */

  .quad { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 8px; }
  .quad__i {
    display: grid; grid-template-columns: 42px 1fr; gap: clamp(14px, 2vw, 26px);
    padding: clamp(22px, 3vh, 30px) 0; border-bottom: 1px solid var(--rule-soft);
    align-items: start;
  }
  .quad__i:first-child { border-top: 1px solid var(--rule); }
  .quad__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); padding-top: 6px; }
  .quad__b { display: flex; flex-direction: column; gap: 8px; }
  .quad__b h4 {
    margin: 0; font-family: var(--display); font-weight: 600;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60;
    font-size: clamp(19px, 1.9vw, 24px); line-height: 1.12; letter-spacing: -0.016em;
  }
  .quad__b p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--slate); }

  /* ---------------- workspace mock ---------------- */

  .ws {
    margin-top: clamp(30px, 5vh, 52px);
    border: 1px solid var(--rule); border-radius: 7px; overflow: hidden;
    background: #090D13; display: grid; grid-template-columns: 1fr;
    box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  }
  @media (min-width: 860px) { .ws { grid-template-columns: 216px 1fr; } }

  .ws__rail { display: none; background: #06090E; border-right: 1px solid var(--rule); padding: 16px 0; }
  @media (min-width: 860px) { .ws__rail { display: block; } }
  .ws__wm {
    padding: 0 16px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--rule-soft);
    font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  }
  .ws__grp {
    padding: 16px 16px 7px; font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.17em; text-transform: uppercase; color: var(--slate-2);
  }
  .ws__ch {
    display: flex; align-items: center; gap: 9px; padding: 7px 16px;
    font-size: 13px; color: var(--slate); border-left: 2px solid transparent;
  }
  .ws__ch.is-on { background: rgba(53,201,190,0.09); color: var(--bone); border-left-color: var(--accent); }
  .ws__ch i { font-style: normal; color: var(--slate-2); font-size: 12px; }
  .ws__pip { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(53,201,190,0.9); }
  .ws__who { display: flex; align-items: center; gap: 9px; padding: 6px 16px; font-size: 13px; color: var(--slate); }
  .ws__who b { width: 6px; height: 6px; border-radius: 50%; background: #6BD98C; }

  .ws__main { min-width: 0; }
  .ws__head {
    padding: 14px 18px; border-bottom: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  }
  .ws__head b { font-size: 14.5px; font-weight: 600; color: var(--bone); }
  .ws__head span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate-2); }
  .ws__body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }

  .msg { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
  .msg__av {
    width: 30px; height: 30px; border-radius: 5px; display: grid; place-items: center;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.02em;
    background: rgba(233,238,240,0.08); color: var(--slate);
  }
  .msg__av.is-bot { background: rgba(53,201,190,0.16); color: var(--accent); }
  .msg__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; }
  .msg__hd b { font-size: 13.5px; font-weight: 600; color: var(--bone); }
  .msg__hd span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-2); }
  .msg__hd em {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--accent); border: 1px solid rgba(53,201,190,0.4);
    border-radius: 2px; padding: 2px 6px;
  }
  .msg p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--slate); }

  /* ---------------- answer card ---------------- */

  .card {
    border: 1px solid rgba(53,201,190,0.26); border-radius: 6px;
    background: linear-gradient(180deg, rgba(53,201,190,0.045), rgba(53,201,190,0.006));
    overflow: hidden;
  }
  .card__top {
    padding: 13px 16px; border-bottom: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline;
  }
  .card__trig { font-family: var(--mono); font-size: 10px; letter-spacing: 0.11em; color: var(--slate); }
  .card__trig b { color: var(--bone); font-weight: 400; }
  .card__run { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate-2); }

  .st { padding: 15px 16px; border-bottom: 1px solid var(--rule-soft); border-left: 2px solid transparent; }
  .st.is-ok { border-left-color: var(--accent); background: rgba(53,201,190,0.035); }
  .st.is-no { border-left-color: var(--warn); background: rgba(255,106,61,0.035); }
  .st__hd { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; justify-content: space-between; }
  .st__lb { display: flex; align-items: baseline; gap: 10px; }
  .st__n { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--accent); }
  .st__t { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate-2); }
  .st__p { margin: 9px 0 0; font-size: 14px; line-height: 1.58; color: var(--bone); }
  .st__p.is-list { color: var(--slate); }
  .st ol { margin: 9px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.62; color: var(--bone); }
  .st ol li { margin-bottom: 5px; }
  .st ol li span { color: var(--slate-2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }

  .ev { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
  .ev span {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    padding: 3px 7px; border: 1px solid var(--rule); border-radius: 2px; color: var(--slate-2);
  }

  .jr { display: flex; gap: 6px; flex: none; }
  .jr button {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 2px; background: transparent;
    border: 1px solid var(--rule); color: var(--slate-2); cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
  }
  .jr button:hover { color: var(--bone); border-color: rgba(233,238,240,0.3); }
  .jr button.ok.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
  .jr button.no.is-on { border-color: var(--warn); color: var(--warn); background: rgba(255,106,61,0.1); }

  .why {
    margin-top: 11px; padding: 10px 12px; border-radius: 3px;
    background: rgba(255,106,61,0.07); border: 1px solid rgba(255,106,61,0.25);
    font-size: 13.5px; line-height: 1.55; color: var(--bone);
  }
  .why b { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--warn); margin-bottom: 5px; font-weight: 400; }
  .why.is-ok { background: rgba(53,201,190,0.07); border-color: rgba(53,201,190,0.25); }
  .why.is-ok b { color: var(--accent); }

  .card__foot {
    padding: 13px 16px; display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: space-between; align-items: center;
  }
  .card__conf { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--slate); }
  .card__conf b { color: var(--accent); font-weight: 500; }
  .card__conf i { font-style: normal; color: var(--slate-2); }
  .card__acts { display: flex; gap: 8px; flex-wrap: wrap; }
  .card__acts a {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 8px 13px; border-radius: 2px; text-decoration: none;
    border: 1px solid var(--rule); color: var(--slate);
  }
  .card__acts a.pri { border-color: var(--accent); background: var(--accent); color: #04070A; }

  /* ---------------- grids ---------------- */

  .grid2 { display: grid; gap: 0 clamp(24px, 4vw, 56px); grid-template-columns: 1fr; margin-top: 8px; }
  @media (min-width: 780px) { .grid2 { grid-template-columns: 1fr 1fr; } }
  .gi { padding: clamp(22px, 3vh, 30px) 0; border-top: 1px solid var(--rule-soft); }
  .gi:first-child, .gi:nth-child(2) { border-top: 1px solid var(--rule); }
  @media (max-width: 779px) { .gi:nth-child(2) { border-top: 1px solid var(--rule-soft); } }
  .gi h4 {
    margin: 0 0 8px; font-family: var(--display); font-weight: 600;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60;
    font-size: clamp(18px, 1.8vw, 22px); line-height: 1.14; letter-spacing: -0.014em;
  }
  .gi p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--slate); max-width: 44ch; }

  /* roster */
  .rost { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 8px; }
  .rost__i {
    display: grid; grid-template-columns: 1fr auto; gap: 10px 18px;
    padding: 20px 0; border-bottom: 1px solid var(--rule-soft); align-items: start;
  }
  .rost__i:first-child { border-top: 1px solid var(--rule); }
  .rost__i h4 {
    margin: 0 0 6px; font-family: var(--display); font-weight: 600;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60;
    font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.016em;
  }
  .rost__i p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--slate); max-width: 52ch; }
  .pill {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 2px; white-space: nowrap;
    border: 1px solid rgba(53,201,190,0.45); color: var(--accent);
  }
  .pill.next { border-color: var(--rule); color: var(--slate-2); }

  /* two-column lists */
  .cols { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: 1fr; }
  @media (min-width: 780px) { .cols { grid-template-columns: 1fr 1fr; } }
  .cols h4 {
    margin: 0 0 4px; font-family: var(--mono); font-weight: 400; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  }
  .cols h4.mute { color: var(--slate-2); }


  /* ---------------- hero instrument rail ---------------- */

  .hbar {
    position: absolute; z-index: 3;
    /* align to the same centered max-width grid as the hero copy,
       not to the viewport edges */
    left: 50%; transform: translateX(-50%);
    width: min(calc(100% - 2 * var(--gut)), calc(var(--maxw) - 2 * var(--gut)));
    bottom: clamp(18px, 3vh, 30px);
    display: none; align-items: flex-end; justify-content: space-between;
    gap: 28px; border-top: 1px solid var(--rule); padding-top: 14px;
  }
  @media (min-width: 940px) {
    .hbar { display: flex; }
    .hud { display: none; }
  }
  .hbar__cap {
    margin: 0; font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--slate-2); max-width: 56ch; line-height: 1.7;
  }
  .hbar__cap b { color: var(--accent); font-weight: 400; }
  .hbar__hud { display: flex; gap: clamp(26px, 3vw, 48px); flex: none; }
  .hbar__hud > div { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  .hbar__k {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.17em;
    text-transform: uppercase; color: var(--slate-2);
  }
  .hbar__v {
    font-family: var(--mono); font-weight: 500;
    font-size: clamp(22px, 2.4vw, 34px); line-height: 1;
    letter-spacing: -0.03em; color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 22px rgba(53, 201, 190, 0.38);
  }

  /* ---------------- interactive workspace ---------------- */

  .ws__try {
    margin: clamp(26px, 4vh, 40px) 0 12px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
    display: flex; align-items: center; gap: 10px;
  }
  .ws__try::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 10px rgba(53,201,190,0.9);
    animation: ws-pulse 2.2s ease-in-out infinite;
  }
  @keyframes ws-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) { .ws__try::before { animation: none; } }
  .ws { margin-top: 0; }

  .ws__ch { cursor: pointer; user-select: none; transition: background 140ms ease, color 140ms ease; }
  .ws__ch:hover { color: var(--bone); background: rgba(233, 238, 240, 0.045); }
  .ws__ch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .ws__tabs {
    display: flex; gap: 8px; padding: 12px 14px 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .ws__tabs::-webkit-scrollbar { display: none; }
  @media (min-width: 860px) { .ws__tabs { display: none; } }
  .ws__tab {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    padding: 8px 12px; border-radius: 3px; white-space: nowrap;
    background: transparent; border: 1px solid var(--rule);
    color: var(--slate); cursor: pointer;
  }
  .ws__tab.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

  .rin { display: flex; gap: 8px; margin-top: 11px; }
  .rin input {
    flex: 1; min-width: 0;
    background: #0A0F16; border: 1px solid var(--rule); border-radius: 3px;
    padding: 9px 12px; color: var(--bone);
    font-family: var(--body); font-size: 13.5px;
  }
  .rin input::placeholder { color: var(--slate-2); }
  .rin input:focus-visible { outline: none; border-color: var(--accent); }
  .rin button {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase; padding: 0 16px; border-radius: 3px;
    border: 1px solid var(--accent); background: var(--accent);
    color: #04070A; cursor: pointer;
  }
  .card__conf .acted { color: #6BD98C; }


  /* ================= shared-site additions ================= */

  /* mono eyebrow inside a grid item — replaces inline-styled span hacks */
  .gi__k {
    display: block; font-family: var(--mono); font-weight: 400; font-size: 10px;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 10px;
  }

  /* text value in an instrument HUD slot */
  .phero__v--text { font-size: clamp(17px, 2.2vw, 24px); letter-spacing: -0.012em; line-height: 1.15; padding-top: 5px; }


  .nav__links a.is-here { border-bottom-color: var(--accent); color: var(--bone); }

  /* reveal on scroll */
  .rv { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
  .rv.is-in { opacity: 1; transform: none; }
  .rv[data-d="1"] { transition-delay: 90ms; } .rv[data-d="2"] { transition-delay: 180ms; }
  .rv[data-d="3"] { transition-delay: 270ms; } .rv[data-d="4"] { transition-delay: 360ms; }
  .rv[data-d="5"] { transition-delay: 450ms; } .rv[data-d="6"] { transition-delay: 540ms; }
  @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

  /* simple page hero (non-canvas pages) */
  .phero { padding: clamp(96px, 16vh, 190px) 0 clamp(60px, 9vh, 110px); position: relative; overflow: hidden; }
  .phero .lede { max-width: 58ch; }
  .phero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .phero__hud { display: flex; gap: clamp(26px, 4vw, 56px); flex-wrap: wrap; margin-top: clamp(36px, 6vh, 60px); border-top: 1px solid var(--rule); padding-top: 22px; }
  .phero__hud > div { display: flex; flex-direction: column; gap: 6px; }
  .phero__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--slate-2); }
  .phero__v { font-family: var(--mono); font-weight: 500; font-size: clamp(24px, 3vw, 38px); line-height: 1; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(53,201,190,0.38); }
  .phero__v.is-mute { color: var(--bone); text-shadow: none; }
  .phero__s { font-size: 12.5px; color: var(--slate-2); max-width: 24ch; line-height: 1.5; }
  #cv-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; pointer-events: none; }
  .phero > .wrap { position: relative; z-index: 2; }

  /* stack diagram (spec page) */
  .stack { display: grid; gap: 0; margin-top: 8px; max-width: 760px; }
  .layer { border: 1px solid var(--rule); border-radius: 6px; padding: clamp(20px, 2.6vw, 30px); background: var(--panel); position: relative; transition: border-color 200ms ease, box-shadow 200ms ease; }
  .layer:hover { border-color: rgba(53,201,190,0.4); }
  .layer--brain { border-color: rgba(53,201,190,0.45); background: linear-gradient(180deg, rgba(53,201,190,0.07), rgba(53,201,190,0.015)); box-shadow: 0 0 60px rgba(53,201,190,0.10); }
  .layer h4 { margin: 0; font-family: var(--display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60; font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.016em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
  .layer h4 span { font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate-2); }
  .layer--brain h4 span { color: var(--accent); }
  .layer p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--slate); max-width: 60ch; }
  .layer .ev { margin-top: 14px; }
  .stack__flow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-2); }
  .stack__flow b { color: var(--accent); font-weight: 400; }
  .stack__flow::before, .stack__flow::after { content: ""; flex: none; width: 1px; height: 14px; background: var(--rule); }

  /* research papers */
  .paper { display: grid; grid-template-columns: 1fr; gap: 7px; padding: clamp(24px, 3.4vh, 34px) 0; border-bottom: 1px solid var(--rule-soft); }
  .paper:first-child { border-top: 1px solid var(--rule); }
  .paper__meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-2); }
  .paper h4 { margin: 0; font-family: var(--display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60; font-size: clamp(19px, 2vw, 25px); line-height: 1.14; letter-spacing: -0.016em; }
  .paper__why { margin: 2px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--slate); max-width: 66ch; }
  .paper__stop { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--slate); max-width: 66ch; }
  .paper__stop b { color: var(--accent); font-weight: 600; }

  /* open problems */
  .prob { display: grid; grid-template-columns: 58px 1fr; gap: clamp(14px, 2vw, 28px); padding: clamp(28px, 4vh, 42px) 0; border-bottom: 1px solid var(--rule-soft); align-items: start; }
  .prob:first-child { border-top: 1px solid var(--rule); }
  .prob__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); padding-top: 8px; }
  .prob h4 { margin: 0; font-family: var(--display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.12; letter-spacing: -0.016em; max-width: 26ch; }
  .prob p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--slate); max-width: 62ch; }
  .prob__c { margin-top: 12px !important; padding: 12px 14px; border-left: 1px solid var(--accent); background: var(--accent-wash); border-radius: 0 3px 3px 0; color: var(--bone) !important; }
  .prob__c b { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin-bottom: 5px; }
  @media (max-width: 560px) { .prob { grid-template-columns: 1fr; gap: 6px; } }

  /* doors */
  .doors { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 34px; }
  @media (min-width: 820px) { .doors { grid-template-columns: repeat(3, 1fr); } }
  .door { border: 1px solid var(--rule); border-radius: 6px; padding: clamp(20px, 2.4vw, 28px); background: var(--panel); display: flex; flex-direction: column; gap: 12px; transition: border-color 200ms ease, transform 200ms ease; }
  .door:hover { border-color: rgba(53,201,190,0.45); transform: translateY(-3px); }
  .door b { font-family: var(--mono); font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
  .door p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); flex: 1; }
  .door a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--rule); align-self: flex-start; padding-bottom: 3px; }
  .door a:hover { border-bottom-color: var(--accent); color: var(--accent); }

  /* tier cards (harness: where it runs) */
  .tiers { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 34px; }
  @media (min-width: 820px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
  .tier .pill { align-self: flex-start; }
  .tier { border: 1px solid var(--rule); border-radius: 6px; padding: clamp(20px, 2.4vw, 28px); background: var(--panel); display: flex; flex-direction: column; gap: 12px; }
  .tier--live { border-color: rgba(53,201,190,0.45); background: linear-gradient(180deg, rgba(53,201,190,0.055), rgba(53,201,190,0.008)); }
  .tier h4 { margin: 0; font-family: var(--display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.016em; }
  .tier p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); flex: 1; }
  .pill--mock { border-style: dashed; border-color: rgba(255,106,61,0.5); color: var(--warn); }

  /* honest-note (replaces warn note where the content is policy, not warning) */
  .note--real { border-color: rgba(53,201,190,0.4); background: rgba(53,201,190,0.035); }
  .note--real b { color: var(--accent); }

  footer .foot__links { display: flex; gap: 12px 18px; flex-wrap: wrap; }
  footer .foot__in { row-gap: 16px; }
  footer .foot__links a { text-decoration: none; color: var(--slate-2); }
  footer .foot__links a:hover { color: var(--bone); }

/* ============================================================
   lab.css additions — new-site system fixes (appended to the
   original site.css, which is otherwise untouched).
   --field-green: the commercial wing's colour. It appears in
   the lab only where the field is speaking — the "In the field"
   button and footer group. Counterpart: --lab-teal in field.css.
   ============================================================ */
:root{ --field-green:#7FD3B0; --field-green-ink:#06301F; }
.nav__links a.is-here{ border-bottom-color: var(--accent); color: var(--bone); }
.btn--field{ background: var(--field-green); border-color: var(--field-green); color: var(--field-green-ink); }
.btn--field:hover, .btn--field:focus-visible{ background:#97E2C4; border-color:#97E2C4; color: var(--field-green-ink); box-shadow: 0 8px 24px rgba(127,211,176,.22); }
.foot__sep{ font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2); margin-left: 6px; }
.foot__sep--field{ color: var(--field-green); }