/* ==========================================================================
   Threx landing page
   Ported from the Claude Design source "Threx Landing Page.dc.html".
   Breakpoints match the design: mobile < 760, tablet < 1080, desktop >= 1080.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:        #0A0C0E;
  --bg-alt:    #0C0F12;
  --bg-panel:  #0F1215;
  --bg-node:   #14181C;
  --bg-screen: #1B2127;

  /* rules */
  --line:      #262C33;
  --line-soft: #1A1F24;
  --line-hard: #2C333B;
  --line-2:    #333B43;
  --line-3:    #2A3238;
  --line-4:    #232A31;
  --line-5:    #1F252B;

  /* text */
  --fg:        #E8ECEF;
  --fg-2:      #C9D0D6;
  --fg-3:      #B9C2C9;
  --fg-4:      #A6ADB4;
  --muted:     #8A949D;
  --muted-2:   #5F6A73;
  --muted-3:   #3E454C;

  /* accents */
  --accent:       #108F65;
  --accent-2:     #12A574;
  --accent-hover: #14A87A;
  --accent-light: #6BD3AA;
  --accent-link:  #3FB98B;
  --accent-deep:  #2F6B55;
  --on-accent:    #04120C;

  /* severity */
  --crit: #D6455B;
  --high: #E0813E;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;

  /* responsive scale — mobile first */
  --sec-pad:      52px 20px;
  --hero-pad:     48px 20px 56px;
  --hero-cols:    1fr;
  --hero-h1:      34px;
  --hero-sub:     16px;
  --h2:           25px;
  --uc-cols:      1fr;
  --uc-inner:     1fr;
  --uc-inner-gap: 18px;
  --uc-pad:       26px 22px 24px;
  --uc-head:      1fr;
  --uc-head-gap:  18px;
  --uc-h3:        18.5px;
  --uc-h3-h:      auto;
  --why-lead:     17px;
  --why-title:    18px;
  --why-k:        150px;
  --why-indent:   calc(34px + 14px);
  --pilot-cols:   1fr;
  --pilot-gap:    30px;
  --foot-cols:    1fr 1fr;
  --nav-links:    none;
  --row-detail:   none;
}

@media (min-width: 760px) {
  :root {
    --sec-pad:      64px 24px;
    --hero-pad:     60px 24px 68px;
    --hero-h1:      42px;
    --hero-sub:     17.5px;
    --h2:           29px;
    --uc-inner:     260px minmax(0, 1fr);
    --uc-inner-gap: 40px;
    --uc-pad:       30px 28px 28px;
    --uc-head-gap:  22px;
    --uc-h3:        20px;
    --uc-h3-h:      2.5em;
    --why-title:    20px;
    --why-indent:   calc(42px + 16px + var(--why-k) + 16px);
    --pilot-gap:    34px;
    --foot-cols:    1fr 1fr 1fr;
    --nav-links:    flex;
    --row-detail:   inline;
  }
}

@media (min-width: 1080px) {
  :root {
    --sec-pad:     80px 24px;
    --hero-pad:    76px 24px 84px;
    --hero-cols:   minmax(0, 1.05fr) minmax(0, 1fr);
    --hero-h1:     52px;
    --h2:          34px;
    --uc-cols:     repeat(3, minmax(0, 1fr));
    --uc-inner:    1fr;
    --uc-inner-gap: 18px;
    --uc-head:     minmax(0, 1.05fr) minmax(0, .95fr);
    --uc-head-gap: 52px;
    --why-lead:    18px;
    --why-title:   23px;
    --why-k:       170px;
    --pilot-cols:  0.9fr 1.1fr;
    --pilot-gap:   64px;
    --foot-cols:   1.7fr 1fr 1fr;
  }
}

/* ── base ────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

a { color: var(--accent-link); text-decoration: none; }
a:hover { color: var(--accent-light); }
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

h1, h2, h3, h4, p, dl, dd, dt, ol, ul, li, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; }
input, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--muted-2); }
img { max-width: 100%; }

section[id] { scroll-margin-top: 60px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
}

.page { min-width: 320px; overflow-x: clip; }
.wrap { max-width: 1240px; margin: 0 auto; padding: var(--sec-pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; color: var(--on-accent); }

/* ── header ──────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 12, 14, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--fg); flex: none; }
.brand:hover { color: var(--fg); }
.brand-mark { height: 18px; width: auto; flex: none; display: block; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: .11em; }

.nav-links {
  display: var(--nav-links); gap: 26px; font-size: 13.5px;
  flex: 1; justify-content: center;
}
.nav-links a { color: var(--fg-3); padding: 6px 0; display: block; }
.nav-links a:hover { color: var(--fg); }

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; font-size: 15px; padding: 14px 24px;
  border: 1px solid transparent; cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { border-color: var(--line-2); color: var(--fg); }
.btn-ghost:hover { border-color: var(--accent-light); color: var(--fg); }
.btn-sm { font-size: 13.5px; padding: 10px 16px; flex: none; }
.btn-block { width: 100%; padding: 14px; min-height: 48px; border: 0; }
.btn:disabled { opacity: .7; cursor: default; }

.mono-btn {
  background: transparent; border: 1px solid var(--line-2); color: var(--fg);
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  padding: 7px 11px; cursor: pointer;
  transition: border-color 180ms, color 180ms;
}
.mono-btn:hover { border-color: var(--accent-2); color: var(--accent-light); }
.mono-btn-quiet { border-color: var(--line); color: var(--muted); }
.mono-btn-quiet:hover { border-color: var(--line-2); color: var(--fg-2); }
.mono-btn-reset { border-color: var(--line); color: var(--muted-2); flex: none; }
.mono-btn-reset:hover { border-color: var(--line); color: var(--fg-2); }

/* ── section furniture ───────────────────────────────────────────────── */

.sec-rule { border-bottom: 1px solid var(--line-hard); }
.sec-alt { border-bottom: 1px solid var(--line-soft); background: var(--bg-alt); }

.kicker {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; color: var(--accent-2); text-transform: uppercase;
  margin-bottom: 22px; display: flex; align-items: center; gap: 12px;
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--accent-2); flex: none; }
.kicker-plain {
  font-size: 11px; font-weight: 400; letter-spacing: .15em;
  color: var(--accent); margin-bottom: 18px;
}
.kicker-plain::before { content: none; }

.h2 {
  font-size: var(--h2); line-height: 1.16; font-weight: 500;
  letter-spacing: -.02em; margin-bottom: 18px; text-wrap: pretty;
}
.lede {
  font-size: 16.5px; line-height: 1.62; color: var(--muted);
  max-width: 74ch; text-wrap: pretty;
}

/* ── hero ────────────────────────────────────────────────────────────── */

.hero {
  border-bottom: 1px solid var(--line-soft);
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-inner {
  max-width: 1240px; margin: 0 auto; padding: var(--hero-pad);
  display: grid; grid-template-columns: var(--hero-cols); gap: 48px; align-items: center;
}
.eyebrow-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
}
.eyebrow-chip {
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; padding: 5px 9px; line-height: 1;
}
.eyebrow-muted { color: var(--muted-2); }

.hero-h1 {
  font-size: var(--hero-h1); line-height: 1.08; font-weight: 500;
  letter-spacing: -.025em; margin-bottom: 22px; max-width: 22ch; text-wrap: pretty;
}
.hero-sub {
  line-height: 1.6; color: var(--muted); max-width: 53ch;
  margin-bottom: 30px; font-size: var(--hero-sub); text-wrap: pretty;
}
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; }

.device { margin: 0; width: 100%; max-width: 562px; }
.device-screen {
  background: var(--bg-screen);
  border: 1px solid var(--line-2); border-bottom: none;
  border-radius: 11px 11px 0 0; padding: 13px 13px 11px; position: relative;
}
.device-cam {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #0D1114;
}
.device-screen img {
  display: block; width: 100%; height: auto; border-radius: 3px; background: #0C0F12;
}
.device-base {
  margin: 0 -34px; height: 13px;
  background: linear-gradient(180deg, #232A31, #141920);
  border: 1px solid var(--line-2); border-radius: 0 0 6px 6px; position: relative;
}
.device-notch {
  position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 84px; height: 5px; background: #0D1114; border-radius: 0 0 4px 4px;
}
@media (max-width: 1079px) { .device-base { margin: 0; } }

/* ── problem cards ───────────────────────────────────────────────────── */

.prob-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.prob-card { background: var(--bg-panel); padding: 22px; }
.prob-card h3 { font-size: 16px; font-weight: 500; color: var(--fg); margin-bottom: 9px; }
.prob-card p:last-child { font-size: 14px; line-height: 1.6; color: var(--muted); }
.mono-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  color: var(--muted-2); margin-bottom: 12px;
}

/* ── how it works / walkthrough ──────────────────────────────────────── */

.how-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 36px; flex-wrap: wrap; margin-bottom: 30px;
}
.beat-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.beat-dots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.beat-btn {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  padding: 9px 11px; min-width: 36px; min-height: 36px; cursor: pointer;
  transition: all 180ms;
}
.beat-btn:hover { border-color: var(--accent-light); }
.beat-btn.is-current {
  background: rgba(16, 143, 101, .14);
  border-color: var(--accent); color: var(--accent-light);
}
.beat-play {
  display: var(--nav-links); align-items: center; gap: 7px;
  border-color: var(--line-2); color: var(--fg); padding: 9px 13px;
}
.beat-play:hover { border-color: var(--accent-light); color: var(--accent-light); }
.beat-ico { flex: none; fill: currentColor; }
.beat-play[data-state="playing"] .ico-play,
.beat-play:not([data-state="playing"]) .ico-pause { display: none; }

/* Step title + description ride on top of the stage as one joined header,
   so the frame below always says what the beat on screen is about. */
.beat-caption {
  display: flex; align-items: baseline; gap: 14px;
  border: 1px solid var(--line); border-bottom: 0;
  background: var(--bg-alt); padding: 14px 18px;
}
.beat-counter {
  flex: none; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .11em; color: var(--accent-light);
  padding-top: 2px;
}
.beat-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.beat-title {
  font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--fg);
}
/* Two lines are reserved so a longer or shorter beat never nudges the stage. */
.beat-text {
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
  max-width: 84ch; min-height: 3.1em;
}

/* Narrow screens wrap both lines, so the whole strip reserves its tallest beat. */
@media (max-width: 759px) {
  .beat-caption { flex-direction: column; gap: 8px; padding: 13px 15px; }
  .beat-counter { padding-top: 0; }
  .beat-copy { gap: 3px; }
  .beat-text { min-height: 6.2em; }   /* four lines — the longest beat here */
}

.stage-frame {
  border: 1px solid var(--line); background: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 18px; overflow-x: auto; margin-bottom: 20px;
}

/* ── how-it-works · Threx product walkthrough (1600×742 + 58px app bar) ─ */

:root {
  --ease-layout: cubic-bezier(.16, .84, .28, 1);
  --ease-state:  cubic-bezier(.2, 0, 0, 1);
  --pd-blue:     #4C7FB8;
  --pd-blue-2:   #6BA3DC;
  --pd-teal:     #35A79C;
  --pd-gold:     #C99A3C;
  --r:           5px;
}

.wf-viewport { position: relative; margin: 0 auto; overflow: hidden; }
.wf-app {
  position: absolute; left: 0; top: 0; width: 1600px; height: 800px;
  transform-origin: 0 0; font-family: var(--sans);
  background: var(--bg); color: var(--fg);
}

/* ── app bar ───────────────────────────────────────────────────────── */
.ab {
  position: absolute; left: 0; top: 0; right: 0; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; background: var(--bg-alt);
  border-bottom: 1px solid var(--line); z-index: 6;
}
.ab-l, .ab-r { display: flex; align-items: center; gap: 14px; }
.ab-l { gap: 11px; }
.ab-rail { display: flex; flex-direction: column; gap: 3px; }
.ab-rail i { width: 14px; height: 1.5px; background: var(--muted-2); display: block; }
.ab-mark { width: 24px; height: 24px; display: block; object-fit: contain; }
.ab-logo { font-size: 21px; font-weight: 600; letter-spacing: .18em; color: var(--fg); }
.ab-proj {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-panel);
}
.ab-proj b { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--muted-2); font-weight: 400; }
.ab-proj em { font-style: normal; font-size: 14px; color: var(--fg-2); }
.ab-proj i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; }

.ab-tabs { display: flex; align-items: center; gap: 34px; }
.tb {
  position: relative; font-size: 17px; color: var(--muted-3);
  padding: 19px 2px; transition: color 420ms var(--ease-state);
}
.tb u {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 50% 100%;
  transition: transform 460ms var(--ease-layout);
}
.tb.is-done { color: var(--muted); }
.tb.is-active { color: var(--accent-light); }
.tb.is-active u { transform: scaleX(1); }

.ab-cta {
  display: flex; align-items: center; height: 38px; padding: 0 18px;
  background: var(--pd-blue); color: #04121C; border-radius: var(--r);
  font-size: 14.5px; font-weight: 500;
  transition: filter 220ms var(--ease-state), opacity 320ms var(--ease-state), background 320ms;
}
.wf-app[data-beat="2"].p2 .ab-cta { filter: brightness(1.28); }
.wf-app[data-beat="2"].p3 .ab-cta,
.wf-app[data-beat="3"] .ab-cta,
.wf-app[data-beat="4"] .ab-cta,
.wf-app[data-beat="5"] .ab-cta { background: var(--bg-node); color: var(--muted); }
.ab-ic {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel); color: var(--muted-2);
}
.ab-ic svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── screens ───────────────────────────────────────────────────────── */
.sc {
  position: absolute; left: 0; right: 0; top: 58px; bottom: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 520ms var(--ease-state), filter 520ms var(--ease-state), transform 620ms var(--ease-layout);
  filter: blur(4px); transform: translateY(10px);
}
.sc.is-on { opacity: 1; filter: none; transform: none; }
.wf-idle .sc { opacity: 0 !important; }

.ph {
  display: block; height: 7px; width: var(--w); border-radius: 4px;
  background: rgba(232, 236, 239, .07);
}
.chk {
  width: 13px; height: 13px; border-radius: 50%; background: var(--accent);
  display: inline-block; position: relative; flex: none;
}
.chk::after {
  content: ''; position: absolute; left: 4px; top: 3px; width: 3.5px; height: 6px;
  border: solid #04120C; border-width: 0 1.5px 1.5px 0; transform: rotate(43deg);
}
.lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted-2); margin-bottom: 9px; text-transform: uppercase;
}

/* ══ CONTEXT screen ════════════════════════════════════════════════
   A source-navigation sidebar plus one open section at a time. The
   beat's sub-steps walk Codebase → Business Context → Documents.     */

.sc-ctx { display: grid; grid-template-columns: 320px 1fr; }

.cnav { border-right: 1px solid var(--line); background: var(--bg-alt); padding: 20px 14px; }
.cn-h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--muted-2); padding: 0 10px; margin-bottom: 14px;
}
.cn-item {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 13px 12px; border-radius: var(--r); margin-bottom: 3px;
  font-size: 15px; line-height: 1.3; color: var(--muted);
  transition: color 380ms var(--ease-state), background 380ms var(--ease-state);
}
.cn-item::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
  background: var(--accent); opacity: 0; transition: opacity 380ms var(--ease-state);
}
.cn-i { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cn-ok {
  margin-left: auto; width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--accent); position: relative;
  opacity: 0; transition: opacity 320ms var(--ease-state);
}
.cn-ok::after {
  content: ''; position: absolute; left: 4px; top: 3px; width: 3.5px; height: 6px;
  border: solid #04120C; border-width: 0 1.5px 1.5px 0; transform: rotate(43deg);
}
.wf-app[data-beat="0"].p1:not(.p2) .ci-code,
.wf-app[data-beat="0"].p2:not(.p3) .ci-biz,
.wf-app[data-beat="0"].p3 .ci-docs { background: var(--bg-node); color: var(--fg); }
.wf-app[data-beat="0"].p1:not(.p2) .ci-code::before,
.wf-app[data-beat="0"].p2:not(.p3) .ci-biz::before,
.wf-app[data-beat="0"].p3 .ci-docs::before { opacity: 1; }
.wf-app[data-beat="0"].p2 .ci-code .cn-ok,
.wf-app[data-beat="0"].p3 .ci-biz .cn-ok { opacity: 1; }

.cbody { position: relative; padding: 26px 34px; overflow: hidden; }
.cs {
  position: absolute; left: 34px; right: 34px; top: 26px; bottom: 26px;
  opacity: 0; transform: translateY(9px); pointer-events: none;
  transition: opacity 420ms var(--ease-state), transform 520ms var(--ease-layout);
}
.wf-app[data-beat="0"].p1:not(.p2) .cs-code,
.wf-app[data-beat="0"].p2:not(.p3) .cs-biz,
.wf-app[data-beat="0"].p3 .cs-docs { opacity: 1; transform: none; }
.cs-h { font-size: 22px; font-weight: 500; color: var(--fg); margin-bottom: 20px; }

/* codebase */
.src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.src-card {
  height: 168px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--bg-panel); display: grid; place-items: center;
  transition: border-color 300ms var(--ease-state);
}
.src-card.sc-up { border-style: dashed; background: transparent; }
.gh { fill: var(--fg-2); }
.gh-lg { width: 60px; height: 60px; }
.gh { width: 21px; height: 21px; flex: none; }
.upi { width: 54px; height: 54px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.repo {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px; margin-bottom: 10px;
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: var(--r);
  opacity: 0; transform: translateY(9px);
  transition: opacity 400ms var(--ease-state), transform 440ms var(--ease-layout);
}
.rp-n { font-size: 15.5px; color: var(--fg-2); }
.rp-b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px;
}
.repo .ph { margin-left: auto; }
.wf-app[data-beat="0"].p1 .repo { opacity: 1; transform: none; }
.wf-app[data-beat="0"].p1 .rp2 { transition-delay: 130ms; }
.wf-app[data-beat="0"].p1 .rp3 { transition-delay: 260ms; }

/* business context */
.biz-box {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-panel);
  padding: 17px 18px; min-height: 128px; margin-bottom: 24px;
}
.biz-t { font-size: 15.5px; line-height: 1.6; color: var(--fg-3); display: inline; }
.biz-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted-2); margin-bottom: 12px;
}
.bps { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.bp {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; background: var(--bg-panel);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  opacity: 0; transform: translateY(9px);
  transition: opacity 400ms var(--ease-state), transform 440ms var(--ease-layout);
}
.bp-n { font-size: 15px; color: var(--fg-2); }
.wf-app[data-beat="0"].p2 .bp { opacity: 1; transform: none; }
.wf-app[data-beat="0"].p2 .bp2 { transition-delay: 110ms; }
.wf-app[data-beat="0"].p2 .bp3 { transition-delay: 220ms; }
.wf-app[data-beat="0"].p2 .bp4 { transition-delay: 330ms; }
.wf-app[data-beat="0"].p2 .bp5 { transition-delay: 440ms; }
.wf-app[data-beat="0"].p2 .bp6 { transition-delay: 550ms; }

/* documents & images */
.drop {
  display: flex; align-items: center; gap: 30px;
  border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: 20px 26px; margin-bottom: 22px;
}
.drop .upi { width: 40px; height: 40px; flex: none; }
.fmts { display: flex; flex-wrap: wrap; gap: 9px; }

/* file-type icons — real format marks, drawn once in the #fi-sprite
   symbol set at the top of the stage and referenced with <use> */
.fi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fi-l {
  font-family: var(--sans), Helvetica, Arial, sans-serif;
  font-weight: 700; fill: #fff; text-anchor: middle;
}
.fi { width: 33px; height: 41px; flex: none; display: block; overflow: visible; }
.fi.sm { width: 25px; height: 31px; }

.drs { display: flex; flex-direction: column; gap: 10px; }
.dr {
  display: flex; align-items: center; gap: 16px; padding: 13px 16px;
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: var(--r);
  opacity: 0; transform: translateY(9px);
  transition: opacity 400ms var(--ease-state), transform 440ms var(--ease-layout);
}
.dr div { flex: 1; }
.dr p { font-size: 15px; color: var(--fg-2); margin-bottom: 4px; }
.dr em { font-style: normal; font-size: 13px; color: var(--muted-2); }
.wf-app[data-beat="0"].p3 .dr { opacity: 1; transform: none; }
.wf-app[data-beat="0"].p3 .dr2 { transition-delay: 130ms; }
.wf-app[data-beat="0"].p3 .dr3 { transition-delay: 260ms; }
.wf-app[data-beat="0"].p3 .dr4 { transition-delay: 390ms; }
.wf-app[data-beat="0"].p3 .dr5 { transition-delay: 520ms; }
.wf-app[data-beat="0"].p3 .dr6 { transition-delay: 650ms; }

.caret {
  display: inline-block; width: 1.5px; height: 17px; background: var(--accent-light);
  vertical-align: -3px; margin-left: 2px; animation: blink 900ms steps(2) infinite;
}
.wf-app[data-beat="0"].p3 .caret { opacity: 0; animation: none; }
@keyframes blink { 0% { opacity: 1 } 50% { opacity: 0 } 100% { opacity: 1 } }

/* ══ DIAGRAM screen ════════════════════════════════════════════════ */
.sc-dfd { display: block; }
.palette {
  position: absolute; left: 0; top: 0; bottom: 0; width: 232px;
  background: var(--bg-alt); border-right: 1px solid var(--line); padding: 16px 14px;
}
.pl-top { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.pl-add {
  width: 30px; height: 30px; border-radius: var(--r); background: var(--pd-blue);
  color: #04121C; display: grid; place-items: center; font-size: 17px; flex: none;
}
.pl-search {
  flex: 1; height: 30px; border: 1px solid var(--line); border-radius: var(--r);
  display: flex; align-items: center; padding: 0 11px;
  font-size: 13.5px; color: var(--muted-3);
}
.pl-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 4px;
  font-size: 14.5px; color: var(--muted);
}
.pl-row.is-open { color: var(--fg-3); }
.cv {
  width: 0; height: 0; flex: none;
  border-left: 4px solid var(--muted-3); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.pl-row.is-open .cv { transform: rotate(90deg); border-left-color: var(--muted); }
.sq { width: 13px; height: 13px; border-radius: 2px; display: block; flex: none; }
.sq-a { border: 1px dashed var(--pd-blue); } .sq-b { border: 1px dashed var(--accent); }
.sq-c { background: rgba(16,143,101,.35); } .sq-d { background: rgba(76,127,184,.4); }
.sq-e { background: rgba(53,167,156,.35); } .sq-f { background: rgba(138,148,157,.25); }
.pl-tip {
  position: absolute; left: 14px; right: 14px; bottom: 16px;
  border: 1px solid var(--line-soft); border-radius: var(--r); padding: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted-2);
}

.canvas {
  position: absolute; left: 232px; right: 0; top: 0; bottom: 0; overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 34px 34px;
}
.cv-svg { position: absolute; left: -232px; top: 0; width: 1600px; height: 742px; }

.zn rect { fill: none; stroke-width: 1.1; }
.zn text { font-family: var(--mono); font-size: 13.5px; letter-spacing: .1em; }
.zn { opacity: 0; transition: opacity 520ms var(--ease-state); }
.z1 rect, .z3 rect, .z4 rect { stroke: #3E4B58; stroke-dasharray: 5 5; }
.z1 text, .z3 text, .z4 text { fill: #6E7F8E; }
.zg rect { stroke: rgba(16,143,101,.5); fill: rgba(16,143,101,.055); }
.zg text { fill: #4E9C7C; }
.zb rect { stroke: rgba(76,127,184,.5); fill: rgba(76,127,184,.05); stroke-dasharray: 5 5; }
.zb text { fill: #6B93BE; }
.zt rect { stroke: rgba(53,167,156,.45); fill: rgba(53,167,156,.05); }
.zt text { fill: #4CA79E; }
.wf-app[data-beat="1"].p2 .zn, .wf-app[data-beat="2"] .zn { opacity: 1; }
.ed, .ad {
  stroke: #4A5762; stroke-width: 1.3; fill: none;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 620ms var(--ease-state), opacity 360ms;
}
.edges { opacity: 1; }
.wf-app[data-beat="1"].p3 .ed, .wf-app[data-beat="2"] .ed { stroke-dashoffset: 0; }
.ed.e2 { transition-delay: 80ms } .ed.e3 { transition-delay: 160ms }
.ed.e4 { transition-delay: 240ms } .ed.e5 { transition-delay: 320ms }
.ed.e6 { transition-delay: 400ms } .ed.e7 { transition-delay: 480ms }
.atk { opacity: 0; transition: opacity 300ms var(--ease-state); }
.ad { stroke: var(--crit); stroke-width: 2; }
.atk-t { fill: var(--crit); font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-anchor: middle; }
.wf-app[data-beat="2"].p4 .atk { opacity: 1; }
.wf-app[data-beat="2"].p4 .ad { stroke-dashoffset: 0; }

.pill {
  /* --x/--y are authored in stage coords; .canvas starts at stage x 232 */
  position: absolute; left: calc(var(--x) - 232px); top: var(--y); transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  padding: 4px 8px; white-space: nowrap;
  opacity: 0; transition: opacity 380ms var(--ease-state);
}
.wf-app[data-beat="1"].p3 .pill, .wf-app[data-beat="2"] .pill { opacity: 1; }
.wf-app[data-beat="2"].p4 .p-wh, .wf-app[data-beat="2"].p4 .p-set {
  color: var(--crit); border-color: rgba(214,69,91,.5);
}

.nd {
  /* the 50px icon is centred exactly on (--x,--y) so every connector
     terminates on a visible node; the label hangs below the box */
  position: absolute; left: calc(var(--x) - 232px); top: var(--y); width: 130px; height: 50px;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 420ms var(--ease-state), transform 520ms var(--ease-layout);
}
.wf-idle .nd, .wf-app[data-beat="1"] .nd { transform: translate(-50%, -46%); }
.wf-app[data-beat="1"].p1 .nd, .wf-app[data-beat="2"] .nd {
  opacity: 1; transform: translate(-50%, -50%);
}
.wf-app[data-beat="1"].p1 .n2 { transition-delay: 70ms }
.wf-app[data-beat="1"].p1 .n3 { transition-delay: 140ms }
.wf-app[data-beat="1"].p1 .n4 { transition-delay: 210ms }
.wf-app[data-beat="1"].p1 .n5 { transition-delay: 280ms }
.wf-app[data-beat="1"].p1 .n6 { transition-delay: 350ms }
.wf-app[data-beat="1"].p1 .n7 { transition-delay: 420ms }
.wf-app[data-beat="1"].p1 .n8 { transition-delay: 490ms }
.nd-ic {
  width: 50px; height: 50px; border-radius: var(--r); display: block; margin: 0 auto;
  background: var(--bg-node); border: 1px solid var(--line-2);
  background-repeat: no-repeat; background-position: center; background-size: 28px 28px;
  transition: border-color 380ms var(--ease-state);
}
.nd-lb {
  position: absolute; top: 60px; left: -14px; right: -14px;
  font-size: 15px; line-height: 1.25; color: var(--fg-2); text-align: center;
  white-space: nowrap;
}
.nd-lb em {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; color: var(--muted-2); margin-top: 3px;
}
.nd .dot {
  position: absolute; right: 34px; top: -6px; width: 10px; height: 10px; border-radius: 2px;
  background: var(--crit); opacity: 0; transform: scale(.4);
  transition: opacity 280ms var(--ease-state), transform 280ms var(--ease-state);
}
.nd.n3 .dot, .nd.n4 .dot { background: var(--high); }
.wf-app[data-beat="2"].p3 .dot { opacity: 1; transform: none; }
.wf-app[data-beat="2"].p3 .n4 .dot { transition-delay: 70ms }
.wf-app[data-beat="2"].p3 .n5 .dot { transition-delay: 140ms }
.wf-app[data-beat="2"].p3 .n6 .dot { transition-delay: 210ms }
.wf-app[data-beat="2"].p3 .n7 .dot { transition-delay: 280ms }
.wf-app[data-beat="2"].p4 .n7 .nd-ic,
.wf-app[data-beat="2"].p4 .n6 .nd-ic,
.wf-app[data-beat="2"].p4 .n2 .nd-ic { border-color: rgba(214,69,91,.62); }
.sens {
  position: absolute; top: 100px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; color: var(--high); opacity: 0; transition: opacity 380ms var(--ease-state);
}
.wf-app[data-beat="1"].p3 .sens, .wf-app[data-beat="2"] .sens { opacity: 1; }

.i-user  { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BD3AA' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3C/svg%3E"); }
.i-api   { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A949D' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 9h8l-2.6-2.6M21 15h-8l2.6 2.6'/%3E%3Crect x='9.5' y='4' width='5' height='16' rx='1.2' stroke='%238A949D'/%3E%3C/svg%3E"); }
.i-fd    { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BA3DC' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 20V9.2L12 4l8 5.2V20'/%3E%3Cpath d='M9.2 20v-5.6a2.8 2.8 0 0 1 5.6 0V20'/%3E%3C/svg%3E"); }
.i-apim  { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BA3DC' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M7 18.5a4.2 4.2 0 0 1 .3-8.4 5.2 5.2 0 0 1 9.9-1.2A3.8 3.8 0 0 1 17.6 18.5z'/%3E%3C/svg%3E"); }
.i-app   { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BA3DC' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c2.6 2.6 2.6 12.8 0 16M12 4c-2.6 2.6-2.6 12.8 0 16'/%3E%3C/svg%3E"); }
.i-sql   { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BA3DC' stroke-width='1.7'%3E%3Cellipse cx='12' cy='6' rx='6.8' ry='2.8'/%3E%3Cpath d='M5.2 6v12c0 1.6 3 2.8 6.8 2.8s6.8-1.2 6.8-2.8V6'/%3E%3Cpath d='M5.2 12c0 1.6 3 2.8 6.8 2.8s6.8-1.2 6.8-2.8'/%3E%3C/svg%3E"); }
.i-fn    { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C99A3C' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M13.4 3 5.8 13.6h5.1L10.2 21l7.9-10.9h-5.2z'/%3E%3C/svg%3E"); }
.i-kv    { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C99A3C' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='8' cy='12' r='3.6'/%3E%3Cpath d='M11.6 12H21M18 12v3.4M14.8 12v2.6'/%3E%3C/svg%3E"); }

/* copilot panel */
.copilot {
  position: absolute; right: 24px; top: 56px; width: 340px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px 18px; z-index: 4;
  opacity: 0; transform: translateX(18px);
  transition: opacity 420ms var(--ease-state), transform 560ms var(--ease-layout);
}
.wf-app[data-beat="1"] .copilot, .wf-app[data-beat="2"] .copilot { opacity: 1; transform: none; }
.cp-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.cp-mark { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); flex: none; }
.cp-h b { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--muted-2); font-weight: 400; }
.cp-h em { font-style: normal; font-size: 13.5px; color: var(--fg-2); }
.cp-msg {
  font-size: 14.5px; line-height: 1.5; color: var(--fg-3);
  background: var(--bg-node); border-radius: var(--r); padding: 11px 13px; margin-bottom: 10px;
  opacity: 0; transition: opacity 380ms var(--ease-state);
}
.cp-msg.is-agent { background: transparent; border-left: 2px solid var(--accent-deep); border-radius: 0; padding-left: 12px; }
.wf-app[data-beat="1"].p1 .cp-m1, .wf-app[data-beat="2"] .cp-m1 { opacity: 1; }
.wf-app[data-beat="1"].p3 .cp-m2, .wf-app[data-beat="2"] .cp-m2 { opacity: 1; }
.run-toast {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(8px);
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-panel); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 11px 18px; font-size: 13.5px; color: var(--fg-3);
  opacity: 0; transition: opacity 340ms var(--ease-state), transform 480ms var(--ease-layout);
}
.wf-app[data-beat="2"].p2 .run-toast { opacity: 1; transform: translateX(-50%); }
.wf-app[data-beat="2"].p4 .run-toast { opacity: 0; }
.spin {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 1.6px solid rgba(107,211,170,.25); border-top-color: var(--accent-light);
  animation: sp 760ms linear infinite;
}
@keyframes sp { to { transform: rotate(360deg) } }

/* ══ THREATS + COUNTERMEASURES · shared workspace chrome ═══════════ */
.sc-thr, .sc-cm { display: grid; grid-template-columns: 366px 1fr 560px; }
.sc-thr { grid-template-columns: 366px 1fr; }
.side { border-right: 1px solid var(--line); background: var(--bg-alt); padding: 16px 16px 0; overflow: hidden; }
.sd-top { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.sd-fil { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--r); flex: none; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chip {
  display: flex; align-items: center; gap: 7px; border: 1px solid var(--line);
  border-radius: 20px; padding: 5px 11px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; color: var(--muted);
}
.chip i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.sd-grp {
  display: flex; align-items: center; gap: 9px; padding: 13px 2px 9px;
  font-size: 13px; color: var(--fg-3);
}
.sd-grp em { font-style: normal; margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted-2); }
.gsq { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--bg-node); flex: none; }
.sd-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; margin-bottom: 6px;
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: var(--r);
  transition: border-color 360ms var(--ease-state), background 360ms var(--ease-state);
}
.sd-row span {
  flex: 1; font-size: 13.5px; line-height: 1.35; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sd-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sd-row.is-sel { background: var(--bg-node); border-color: var(--line-2); }
.sd-row.is-sel span { color: var(--fg); }

.main { padding: 20px 30px; overflow: hidden; }
.mn-t { font-size: 24px; font-weight: 500; line-height: 1.28; color: var(--fg); margin-bottom: 9px; }
.mn-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mm-comp { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.mm-comp b { font-weight: 400; color: var(--fg-2); }
.tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  border-radius: 3px; padding: 5px 9px; border: 1px solid transparent; white-space: nowrap;
}
.tag-crit { color: #F08095; background: rgba(214,69,91,.14); border-color: rgba(214,69,91,.34); }
.tag-hi   { color: #EDA469; background: rgba(224,129,62,.13); border-color: rgba(224,129,62,.3); }
.tag-out  { color: var(--muted); border-color: var(--line-2); }
.tag-lo   { color: #7FC3A5; background: rgba(16,143,101,.12); border-color: rgba(16,143,101,.3); }
.tag-rec  { color: #7FC3A5; background: rgba(16,143,101,.12); border-color: rgba(16,143,101,.32); }

.card {
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 10px; overflow: hidden;
}
.cd-h {
  display: flex; align-items: center; gap: 11px; padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft); font-size: 15px; color: var(--fg-2);
}
.cd-ic { width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--pd-blue); background: rgba(76,127,184,.16); flex: none; }
.cd-ic.ic-r { border-color: var(--crit); background: rgba(214,69,91,.14); }
.cd-ic.ic-m { border-color: var(--muted-2); background: transparent; }
.cd-b { padding: 13px 18px; position: relative; }
.cd-b p { font-size: 14.5px; line-height: 1.6; color: var(--fg-3); }
.det-cols, .cd-split, .mt-grid { display: grid; gap: 26px; }
.det-cols { grid-template-columns: 1fr 1fr; margin-top: 16px; }
.cd-split { grid-template-columns: 1fr 1fr; }
/* Three columns, two rows: each column keeps the field pair the product
   shows side by side — ID·due date, groups·created, mitigation·modified. */
.mt-grid  { grid-template-columns: .85fr 1.35fr 1.05fr; gap: 11px 26px; }
.cd-b .v { font-size: 14.5px; color: var(--fg-2); }

/* metadata fields · the countermeasure form as it looks in the product */
.mt-f .lbl { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; white-space: nowrap; }
.lbl-i {
  width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--muted-2);
  position: relative; flex: none;
}
.lbl-i::after {
  content: ''; position: absolute; left: 4px; top: 2.5px; width: 1px; height: 5px;
  background: var(--muted-2); box-shadow: 0 -2px 0 var(--muted-2);
}
.fld {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
  font-size: 13px; white-space: nowrap; overflow: hidden;
}
.fld.is-filled { background: var(--bg-alt); }
.fld-dash { border-style: dashed; }
.fv { color: var(--fg-2); }
.fv-mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; }
.fph { color: var(--muted-2); }
.fsuf { margin-left: auto; color: var(--muted-2); }
.f-cal {
  margin-left: auto; width: 13px; height: 12px; flex: none;
  border: 1px solid var(--muted-2); border-radius: 2px; border-top-width: 3px;
}
.mt-f .v { font-size: 13.5px; line-height: 30px; white-space: nowrap; }

.cp-inline {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-size: 13px; color: var(--accent-light);
}
/* ── Threx Agent window · opens over the right of the threats workspace ─ */
.sc-thr::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: rgba(10, 12, 14, .58);
  opacity: 0; transition: opacity 420ms var(--ease-state);
}
.wf-app[data-beat="4"] .sc-thr::after { opacity: 1; }
.tagent {
  position: absolute; right: 0; top: 0; bottom: 0; width: 680px; z-index: 6;
  display: flex; flex-direction: column;
  background: var(--bg-panel); border-left: 1px solid var(--line-2);
  opacity: 0; transform: translateX(30px);
  transition: opacity 420ms var(--ease-state), transform 560ms var(--ease-layout);
}
.wf-app[data-beat="4"] .tagent { opacity: 1; transform: none; }
.ta-h {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 17px 22px; border-bottom: 1px solid var(--line);
}
.ta-h b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .17em; color: var(--fg-2); font-weight: 400; }
.ta-h em { font-style: normal; font-size: 13.5px; color: var(--muted); }
.ta-x {
  margin-left: auto; width: 13px; height: 13px; flex: none; opacity: .5;
  background:
    linear-gradient(to bottom, var(--muted), var(--muted)) center/13px 1.2px no-repeat,
    linear-gradient(to right, var(--muted), var(--muted)) center/1.2px 13px no-repeat;
  transform: rotate(45deg);
}
.ta-log { flex: 1; padding: 18px 22px; overflow: hidden; }
.ta-q {
  display: flex; align-items: baseline; gap: 11px; min-height: 22px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px;
}
.ta-you {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--muted-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; flex: none;
}
.ta-q p { font-size: 15px; color: var(--fg); }
.ta-caret { position: relative; top: 1px; }
.wf-app[data-beat="4"].p3 .ta-caret { opacity: 0; animation: none; }
.ta-a { opacity: 0; transition: opacity 400ms var(--ease-state); }
.wf-app[data-beat="4"].p3 .ta-a { opacity: 1; }
.ta-a > p { font-size: 14.5px; line-height: 1.55; color: var(--fg-3); margin-bottom: 13px; }
.ta-tbl { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tt-h, .tt-r {
  display: grid; grid-template-columns: 34px 1fr 78px 66px; align-items: center; gap: 14px;
  padding: 7px 14px;
}
.tt-h {
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; color: var(--muted-2);
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
.tt-r {
  border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--fg-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity 320ms var(--ease-state), transform 360ms var(--ease-layout);
}
.tt-r:first-of-type { border-top: 0; }
.tt-r > span:first-child { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.tt-r > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-o, .st-r, .st-m { font-size: 11.5px; }
.st-o { color: #EDA469; }
.st-r { color: var(--muted); }
.st-m { color: #7FC3A5; }
.tt-r b.tag { font-family: var(--mono); font-weight: 400; font-size: 10px; padding: 3px 7px; justify-self: start; }
.wf-app[data-beat="4"].p3 .tt-r { opacity: 1; transform: none; }
.wf-app[data-beat="4"].p3 .t2 { transition-delay: 70ms }
.wf-app[data-beat="4"].p3 .t3 { transition-delay: 140ms }
.wf-app[data-beat="4"].p3 .t4 { transition-delay: 210ms }
.wf-app[data-beat="4"].p3 .t5 { transition-delay: 280ms }
.wf-app[data-beat="4"].p3 .t6 { transition-delay: 350ms }
.wf-app[data-beat="4"].p3 .t7 { transition-delay: 420ms }
.wf-app[data-beat="4"].p3 .t8 { transition-delay: 490ms }
.wf-app[data-beat="4"].p3 .t9 { transition-delay: 560ms }
.wf-app[data-beat="4"].p3 .t10 { transition-delay: 630ms }
/* docked variant — sits in the third column of the countermeasures grid
   instead of covering the workspace, so the handoff stays visible */
.ta-dock { position: static; width: auto; }
.wf-app[data-beat="5"].p1 .ta-dock { opacity: 1; transform: none; }
.wf-app[data-beat="5"].p2 .ta-caret2 { opacity: 0; animation: none; }
.ta-a2 { opacity: 0; transition: opacity 400ms var(--ease-state); }
.wf-app[data-beat="5"].p2 .ta-a2 { opacity: 1; }
.ta-a2 > p { font-size: 13.5px; line-height: 1.55; color: var(--fg-3); margin-bottom: 14px; }
.ta-a2 b { color: var(--fg-2); font-weight: 500; }
.ta-s {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; color: var(--muted-2);
}
.ta-s em { font-style: normal; letter-spacing: 0; font-size: 10px; color: var(--line-2); }
.code {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.62; color: var(--fg-3);
  background: var(--bg-node); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 11px 13px; margin-bottom: 15px; white-space: pre; overflow: hidden;
}
.code .k { color: #7FA6D9; }
.code .s { color: #7FC3A5; }
.code .n { color: #E0A46B; }
.code .c { color: var(--muted-2); }
.ta-note { font-size: 12.5px; color: var(--muted); }
.ta-in {
  flex: none; display: flex; align-items: center; gap: 12px; margin: 0 22px 18px;
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px;
  font-size: 14px; color: var(--muted-2);
}
.ta-send {
  margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 3px;
  background: var(--accent-deep) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8ECEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6.5 11.5 12 6l5.5 5.5'/%3E%3C/svg%3E") center/15px no-repeat;
}

.rr-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--fg-3);
}
.dv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--fg-3);
  opacity: 0; transform: translateY(7px);
  transition: opacity 380ms var(--ease-state), transform 420ms var(--ease-layout);
}
.dv b.tag { font-family: var(--mono); font-weight: 400; }
.wf-app[data-beat="3"].p1 .d1, .wf-app[data-beat="3"].p2 .d2,
.wf-app[data-beat="3"].p3 .d3,
.wf-app[data-beat="4"] .dv { opacity: 1; transform: none; }


/* countermeasure enrichment */
.enrich {
  margin-left: auto; display: flex; align-items: center;
  background: var(--pd-blue); color: #04121C; border-radius: 3px;
  padding: 6px 12px; font-size: 12.5px;
  transition: filter 220ms var(--ease-state), opacity 300ms var(--ease-state);
}
.wf-app[data-beat="5"].p1 .enrich { filter: brightness(1.3); }
.wf-app[data-beat="5"].p3 .enrich { opacity: .35; }
.cm-p { margin-bottom: 13px; }
.st {
  display: flex; gap: 13px; padding: 5px 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-3);
  opacity: 0; transform: translateY(9px);
  transition: opacity 400ms var(--ease-state), transform 440ms var(--ease-layout);
}
.st b { font-family: var(--mono); font-weight: 400; color: var(--accent-light); flex: none; }
.wf-app[data-beat="5"].p3 .st { opacity: 1; transform: none; }
.wf-app[data-beat="5"].p3 .s2 { transition-delay: 170ms }
.wf-app[data-beat="5"].p3 .s3 { transition-delay: 340ms }

.cd-meta { opacity: 0; transform: translateY(9px); transition: opacity 400ms var(--ease-state), transform 440ms var(--ease-layout); }
.wf-app[data-beat="5"].p3 .cd-meta { opacity: 1; transform: none; transition-delay: 260ms; }

.handoff {
  border: 1px solid var(--line); border-radius: var(--r); padding: 11px 18px;
  background: var(--bg-alt);
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--ease-state), transform 480ms var(--ease-layout);
}
.wf-app[data-beat="5"].p4 .handoff { opacity: 1; transform: none; }
.hf-h {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--muted-2);
}
.hf-h em { font-style: normal; display: flex; align-items: center; gap: 7px; }
.hf-h em i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); display: block; }
.hf-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-node); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 11px 15px;
  opacity: 0; transform: translateX(-22px);
  transition: opacity 400ms var(--ease-state), transform 520ms var(--ease-layout);
}
.wf-app[data-beat="5"].p5 .hf-card { opacity: 1; transform: none; }
.hf-id {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  background: var(--accent); color: var(--on-accent); border-radius: 3px; padding: 4px 9px; flex: none;
}
.hf-t { flex: 1; font-size: 15px; color: var(--fg); }
.hf-st { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--accent-light); }
.hf-sync {
  display: flex; align-items: center; gap: 9px; margin-top: 10px;
  font-size: 13.5px; color: var(--accent-light);
  opacity: 0; transition: opacity 340ms var(--ease-state);
}
.wf-app[data-beat="5"].p5 .hf-sync { opacity: 1; transition-delay: 260ms; }

/* ── cursor + replay ───────────────────────────────────────────────── */
.wf-cursor {
  position: absolute; left: 980px; top: 430px; z-index: 8; opacity: 0;
  transition: left 640ms var(--ease-layout), top 640ms var(--ease-layout), opacity 300ms var(--ease-state);
}
.wf-app[data-beat="2"] .wf-cursor { opacity: 1; }
.wf-app[data-beat="2"].p1 .wf-cursor { left: 1360px; top: 34px; }
.wf-app[data-beat="2"].p3 .wf-cursor { opacity: 0; }
.wf-app[data-beat="5"] .wf-cursor { opacity: 1; left: 640px; top: 250px; }
.wf-app[data-beat="5"].p1 .wf-cursor { left: 880px; top: 176px; }
.wf-app[data-beat="5"].p2 .wf-cursor { opacity: 0; }
.wf-ring {
  position: absolute; left: -12px; top: -13px; width: 34px; height: 34px;
  border: 1.5px solid var(--accent-light); border-radius: 50%; opacity: 0; transform: scale(.4);
}
.wf-app[data-beat="2"].p2 .wf-ring,
.wf-app[data-beat="5"].p1 .wf-ring { animation: wf-click 520ms var(--ease-state) forwards; }
@keyframes wf-click {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(1.15); }
}

.wf-replay {
  position: absolute; right: 24px; bottom: 22px; z-index: 9;
  background: rgba(15,18,21,.94); border: 1px solid var(--line-2); color: var(--fg-3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  padding: 10px 16px; border-radius: var(--r); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 380ms var(--ease-state), border-color 200ms, color 200ms;
}
.wf-app[data-beat="5"].p5 .wf-replay { opacity: 1; pointer-events: auto; }
.wf-replay:hover { border-color: var(--accent-light); color: var(--accent-light); }

@media (prefers-reduced-motion: reduce) {
  .wf-app, .wf-app * {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
}


/* ── use cases ───────────────────────────────────────────────────────── */

.uc-head {
  display: grid; grid-template-columns: var(--uc-head); gap: var(--uc-head-gap);
  align-items: end; padding-bottom: 30px; border-bottom: 1px solid var(--line);
}
.uc-grid {
  display: grid; grid-template-columns: var(--uc-cols); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-top: 0;
}
.uc-card {
  position: relative; background: var(--bg-panel);
  display: grid; grid-template-columns: var(--uc-inner); gap: var(--uc-inner-gap);
  padding: var(--uc-pad); transition: background 240ms;
}
.uc-card:hover { background: #131A1D; }
.uc-bar {
  position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms cubic-bezier(.16, .84, .28, 1);
}
.uc-card:hover .uc-bar { transform: scaleX(1); }
.uc-left { display: flex; flex-direction: column; gap: 12px; }
.uc-meta { display: flex; align-items: center; gap: 10px; }
.uc-dot { width: 6px; height: 6px; background: #2E363D; transition: background 260ms; }
.uc-card:hover .uc-dot { background: var(--accent); }
.uc-num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent); }
.uc-title {
  font-size: var(--uc-h3); font-weight: 500; color: var(--fg);
  letter-spacing: -.015em; line-height: 1.24; max-width: 22ch;
  text-wrap: pretty; width: 100%; min-height: var(--uc-h3-h); transition: color 240ms;
}
.uc-card:hover .uc-title { color: #FFFFFF; }
.uc-right { display: flex; flex-direction: column; gap: 16px; }
.uc-body { font-size: 14.5px; line-height: 1.62; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.uc-tags {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-5);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  color: #6B757D; border: 1px solid #232A30; padding: 4px 7px;
  text-transform: uppercase; transition: color 240ms, border-color 240ms;
}
.uc-card:hover .chip { color: #9FB2AA; border-color: #2C3A36; }

/* ── why threx ───────────────────────────────────────────────────────── */
/* Ledger rows: one full-width row per point, hovering (or clicking, or
   focusing) opens that row and unfolds its description underneath.
   The four diagrams this section used to carry live in archive/. */

.why-list { border-top: 1px solid var(--line); }
.why-row { border-bottom: 1px solid var(--line); }

/* mobile: number + kicker on one line, title underneath */
.why-head {
  position: relative; display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  gap: 0 14px; align-items: baseline; width: 100%;
  padding: 22px 2px; cursor: pointer; text-align: left;
  background: transparent; border: 0;
}
.why-num    { grid-area: 1 / 1; }
.why-kicker { grid-area: 1 / 2; }
.why-mark   { grid-area: 1 / 3; }
.why-title  { grid-area: 2 / 2; margin-top: 9px; }

/* The rule under an open row, drawn in accent from the left. */
.why-head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent-2); transform: scaleX(0); transform-origin: left;
  transition: transform 460ms cubic-bezier(.4, 0, .2, 1);
}
.why-row.is-open .why-head::before { transform: scaleX(1); }

.why-num {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; color: var(--muted-3); transition: color 260ms;
}
.why-kicker {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-3); transition: color 260ms;
}
.why-title {
  font-size: var(--why-title); line-height: 1.3; font-weight: 500;
  letter-spacing: -.01em; color: var(--muted-2); text-wrap: pretty;
  transition: color 260ms;
}
.why-mark {
  width: 9px; height: 9px; justify-self: end;
  border: 1px solid var(--line-hard); transition: background 260ms, border-color 260ms;
}
.why-row.is-open .why-num    { color: var(--accent-2); }
.why-row.is-open .why-kicker { color: var(--accent-2); }
.why-row.is-open .why-title  { color: var(--fg); }
.why-row.is-open .why-mark   { background: var(--accent-2); border-color: var(--accent-2); }
@media (hover: hover) {
  .why-head:hover .why-title { color: var(--fg-3); }
}

/* 0fr → 1fr animates the unfold without measuring the content height. */
.why-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 460ms cubic-bezier(.4, 0, .2, 1);
}
.why-row.is-open .why-panel { grid-template-rows: 1fr; }
.why-panel > div { overflow: hidden; min-height: 0; }
.why-panel-inner {
  padding: 0 4px 30px var(--why-indent);
  opacity: 0; transition: opacity 300ms ease;
}
.why-row.is-open .why-panel-inner { opacity: 1; transition-delay: 120ms; }
.why-lead {
  font-size: var(--why-lead); line-height: 1.55; letter-spacing: -.01em;
  color: var(--fg-2); text-wrap: pretty; max-width: 62ch;
}

/* From tablet up the row reads as a single ledger line. */
@media (min-width: 760px) {
  .why-head {
    grid-template-columns: 42px minmax(0, var(--why-k)) minmax(0, 1fr) 16px;
    gap: 16px; padding: 24px 4px;
  }
  .why-title { grid-area: 1 / 3; margin-top: 0; }
  .why-mark  { grid-area: 1 / 4; align-self: center; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; font-size: 16px; font-weight: 500; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; background: transparent; border: 0; padding: 20px 4px;
  cursor: pointer; text-align: left; min-height: 48px; color: var(--fg);
  font-size: 16px; font-weight: 500; line-height: 1.4;
  font-family: inherit; transition: color 180ms;
}
.faq-q:hover { color: var(--accent-light); }
.faq-q > span:first-child { flex: 1; min-width: 0; text-wrap: pretty; }
.faq-icon {
  font-family: var(--mono); font-size: 17px; line-height: 1;
  color: var(--muted-2); flex: none; transform: rotate(0deg);
  transition: transform 240ms cubic-bezier(.16, .84, .28, 1), color 180ms;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--accent); }
.faq-a { display: none; padding: 0 44px 22px 4px; }
.faq-a.is-open { display: block; }
.faq-a p { font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 88ch; text-wrap: pretty; }

/* ── contact form ────────────────────────────────────────────────────── */

.pilot { display: grid; grid-template-columns: var(--pilot-cols); gap: var(--pilot-gap); align-items: start; }
.form {
  border: 1px solid var(--line-2); background: var(--bg-panel); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.form[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--fg-3); margin-bottom: 6px; }
.field .opt { color: var(--muted-2); }
.field input, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line-2);
  color: var(--fg); padding: 10px 12px; font-size: 15px;
  transition: border-color 180ms;
}
.field input { min-height: 44px; }
.field textarea { font-family: inherit; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent-light); }
.err { font-size: 12px; color: var(--high); margin-top: 5px; min-height: 16px; }

.form-sent { border: 1px solid var(--accent); background: rgba(16, 143, 101, .06); padding: 28px; }
.form-sent[hidden] { display: none; }
.form-sent-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; color: var(--accent); margin-bottom: 14px; }
.form-sent h3 { font-size: 20px; font-weight: 500; color: var(--fg); margin-bottom: 12px; letter-spacing: -.01em; }
.form-sent-body { font-size: 14.5px; line-height: 1.62; color: var(--fg-3); margin-bottom: 16px; }
.form-sent-note { font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ── footer ──────────────────────────────────────────────────────────── */

.site-footer { background: var(--bg); }
.site-footer .wrap { padding: 48px 24px 30px; }
.foot-grid {
  display: grid; grid-template-columns: var(--foot-cols); gap: 32px;
  padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.foot-blurb { font-size: 14px; line-height: 1.62; color: var(--muted); max-width: 40ch; }
.foot-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  color: var(--muted-2); margin-bottom: 13px; font-weight: 400;
}
.foot-links { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.foot-links a { color: var(--fg-3); }
.foot-links a:hover { color: var(--fg); }
.foot-base {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding-top: 20px; flex-wrap: wrap;
}
.foot-base p { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }
.foot-lang { color: var(--fg-3); }