/* ============================================================
   Steerly - homepage composition (Instrument register)
   Depends on instrument.css for every token and primitive.
   This file is page layout only.
   ============================================================ */

/* ---------------------------------------------------------------
   PAGE FRAME - the hairline column grid that runs the whole page.
   A technical-drawing substrate, not decoration.
   --------------------------------------------------------------- */
.frame {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.frame__cols {
  width: 100%;
  max-width: var(--wrap);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.frame__cols span {
  border-left: 1px solid var(--rule);
  opacity: 0.55;
}

.frame__cols span:first-child {
  border-left: 0;
}

@media (max-width: 860px) {
  .frame {
    display: none;
  }
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(190px, 26vh, 300px) 0 0;
  overflow: hidden;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

/* the field is masked to a band, so the canvas is capped to that band.
   Left at inset:0 it grew to the full 1375px hero and cost a 2880x2749
   backing store to paint every frame. */
.hero .gridfield {
  inset: 0 0 auto 0;
  height: 820px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
}

.hero__text {
  padding-bottom: clamp(34px, 4.5vw, 52px);
  text-align: center;
}

.hero__text .t-lede {
  margin-inline: auto;
  max-width: 60ch;
}

.hero__railwrap {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(30px, 4vw, 46px);
}

.hero__eyebrow {
  margin-bottom: 22px;
}

.hero h1 {
  margin-bottom: 24px;
}

/* "safety" is the only saturated word in the headline, and it earns a
   drawn rule underneath - the corrected course, locked. scaleX from
   left, no overshoot. */
.hero__safe {
  position: relative;
  font-style: normal;
  color: var(--text);
}

.hero__safe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.08em;
  bottom: 0.1em;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__safe.is-locked::after {
  transform: scaleX(1);
  transition: transform 520ms var(--ease-snap);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 34px 0 28px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  font-family: var(--ui);
  font-size: 11px;
  color: var(--dimmer);
  letter-spacing: 0.02em;
}

.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__trust b {
  color: var(--dim);
  font-weight: 500;
}

/* the live verdict rail sitting in the hero's right column */
.hero__rail .readout {
  gap: 8px;
}

.hero__rail-note {
  margin-top: 10px;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------------------------------------------------------------
   CONTROL PLANE - the hero's instrument panel
   --------------------------------------------------------------- */
.cplane {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(56px, 8vw, 96px);
}

.cplane__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 4vw, 52px);
  padding: 26px 22px;
  position: relative;
}

.cplane__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cplane__col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.cplane__coltitle {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}

.node {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg-lift);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  transition:
    border-color var(--dur-move) var(--ease-snap),
    background var(--dur-move) var(--ease-snap);
}

.node[data-live="1"] {
  border-color: var(--rule-live);
  background: var(--raised);
  color: var(--text);
}

.node__ic {
  width: 21px;
  height: 21px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: none;
}

.node__ic svg {
  width: 13px;
  height: 13px;
}

.node small {
  display: block;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.node b {
  font-weight: 500;
  font-size: 11.5px;
}

/* the hub: Steerly itself, centred between agents and machine */
.cplane__hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  min-width: 128px;
}

.hub {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
}

.hub__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
}

/* a static outer rule. A continuously rotating arc is the stock "thinking"
   trope and it contradicts a motion system whose whole premise is that
   things arrive and stop. */
.hub__ring--scan {
  inset: -11px;
  border-color: var(--rule);
  border-top-color: var(--rule-live);
}

.hub svg {
  width: 38px;
  height: 38px;
  color: var(--text);
}

.hub__label {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}

.cplane__ticker {
  border-top: 1px solid var(--rule);
  background: var(--sunken);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  height: calc(var(--row-h) * 3);
}

@media (max-width: 860px) {
  .cplane__grid {
    grid-template-columns: 1fr;
  }
  .cplane__wires {
    display: none;
  }
  .cplane__hub {
    padding: 8px 0;
  }
}

/* ---------------------------------------------------------------
   LOGO RAIL - "works with"
   --------------------------------------------------------------- */
.works {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  position: relative;
  z-index: 1;
  background: var(--bg);
}

.works__inner {
  display: flex;
  align-items: center;
  gap: 16px clamp(18px, 3.4vw, 40px);
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .works__inner > .works__label:last-child {
    margin-left: 0;
  }
}

.works__label {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  flex: none;
}

.works__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--dim);
  transition: color var(--dur-move) var(--ease-snap);
}

.works__item:hover {
  color: var(--text);
}

.works__item svg {
  width: 15px;
  height: 15px;
}

/* ---------------------------------------------------------------
   ACT - shared section frame
   --------------------------------------------------------------- */
.act {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 10vw, 128px) 0;
  background: var(--bg);
}

.act--lift {
  background: var(--bg-lift);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.act__head {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 24px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.act__marker {
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 8px;
  border-top: 1px solid var(--rule-strong);
}

.act__headtext {
  border-top: 1px solid var(--rule-strong);
  padding-top: 8px;
}

.act__eyebrow {
  margin-bottom: 14px;
}

.act__head .t-lede {
  margin-top: 16px;
}

@media (max-width: 720px) {
  .act__head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .act__marker {
    border-top: 0;
    padding-top: 0;
  }
}

/* ---------------------------------------------------------------
   ACT II - THE FIREWALL (pinned scroll scene)
   The signature moment. Four beats, one instrument panel.
   --------------------------------------------------------------- */
.fw {
  position: relative;
  z-index: 1;
  background: var(--bg-lift);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.fw__stage {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 76px 0 44px;
}

.fw__panel {
  width: 100%;
}

/* scrubbed progress rail across the top of the panel */
.fw__progress {
  position: relative;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}

.fw__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.fw__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}

.fw__step {
  padding: 12px 14px;
  border-right: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color var(--dur-tick) var(--ease-snap);
}

.fw__step:last-child {
  border-right: 0;
}

.fw__step i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: 0.4;
  transition: opacity var(--dur-tick) var(--ease-snap);
}

.fw__step[data-on="1"] {
  color: var(--text);
}

.fw__step[data-on="1"] i {
  opacity: 1;
  background: var(--accent);
}

.fw__main {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}

@media (max-width: 880px) {
  .fw__main {
    grid-template-columns: 1fr;
  }
  .fw__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .fw__step:nth-child(2) {
    border-right: 0;
  }
}

.fw__trace {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  background: var(--sunken);
}

@media (max-width: 880px) {
  .fw__trace {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    min-height: 0;
  }
}

.fw__tracehead {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}

.fw__tracecount {
  font-variant-numeric: var(--num);
  color: var(--accent);
}

/* bottom-anchored: new rows push the log up, newest always against the
   bottom rule, the way a real session reads */
/* bottom-anchored inside whatever height the grid row gives it, so the
   log fills the column instead of forcing it taller than the beat */
.fw__tracerows {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-height: 0;
}

.fw__traceline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  border-bottom: 1px solid var(--rule);
  color: var(--dim);
  opacity: 0.34;
  transition:
    opacity var(--dur-tick) var(--ease-snap),
    background var(--dur-tick) var(--ease-snap);
}

.fw__traceline[data-on="1"] {
  opacity: 1;
  background: color-mix(in oklch, var(--deny) 8%, transparent);
  color: var(--text);
}

/* the row currently being acted on, marked in the accent rather than a
   verdict colour: this is "where the scene is", not a classification */
.fw__traceline[data-cursor="1"] {
  opacity: 1;
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* split-flap: a chip lands with a mechanical click rather than a fade */
.flap {
  display: inline-block;
  font-variant-numeric: var(--num);
}

.fw__traceline em {
  display: block;
  font-style: normal;
  color: var(--faint);
  font-size: 10px;
}

/* the beat screens - discrete flips, not continuous morphing.
   Instrument panels snap between states. */
/* Sized to the TALLEST beat (04 · Remediate). The beats are absolutely
   positioned so they cross-fade in place; if this is short, beat 04 spills
   past the panel border. */
/* Height is tweened per beat in setBeat(). Locked at the tallest beat's
   height, beats 1-3 floated in a box half full of black. */
.fw__screen {
  position: relative;
  min-height: 232px;
  transition: height var(--dur-panel) var(--ease-snap);
}

.beat {
  position: absolute;
  inset: 0;
  padding: 24px 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition:
    opacity var(--dur-panel) var(--ease-snap),
    transform var(--dur-panel) var(--ease-snap),
    visibility 0s linear var(--dur-panel);
}

.beat[data-on="1"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (max-width: 880px) {
  .fw__screen {
    min-height: 400px;
  }
  .beat {
    padding: 20px;
  }
}

.beat__label {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.beat__cmd {
  font-family: var(--mono);
  font-size: clamp(13px, 1.9vw, 19px);
  letter-spacing: -0.02em;
  color: var(--text);
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--sunken);
  margin-bottom: 18px;
  overflow-x: auto;
  white-space: nowrap;
}

.beat__cmd .p {
  color: var(--dimmer);
}

.beat__note {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.6;
  max-width: 54ch;
}

.beat__note strong {
  color: var(--text);
  font-weight: 500;
}

/* scanning bar for beat 01 */
.scanbar {
  position: relative;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
  margin-bottom: 18px;
}

.scanbar i {
  position: absolute;
  top: 0;
  left: -34%;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: scanSweep 1.5s var(--ease-lin) infinite;
}

@keyframes scanSweep {
  to {
    left: 100%;
  }
}

/* rule-match table for beat 02 */
.kv {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  overflow-x: auto;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}

.kv dt,
.kv dd {
  margin: 0;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  border-bottom: 1px solid var(--rule);
}

/* the key is a label; only the value is code */
.kv dt {
  font-family: var(--ui);
}

.kv dt {
  color: var(--faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
  background: var(--sunken);
  display: flex;
  align-items: center;
}

.kv dd {
  color: var(--text);
}

.kv dt:nth-last-of-type(1),
.kv dd:nth-last-of-type(1) {
  border-bottom: 0;
}

/* fleet grid for beat 03 */
.fleet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.fleet__cell {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: var(--sunken);
}

.fleet__cell b {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  margin-bottom: 6px;
}

.fleet__cell[data-flag="1"] {
  border-color: color-mix(in oklch, var(--deny) 42%, transparent);
  background: color-mix(in oklch, var(--deny) 9%, transparent);
}

.anomaly {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid color-mix(in oklch, var(--deny) 40%, transparent);
  background: color-mix(in oklch, var(--deny) 8%, transparent);
  border-radius: var(--radius-sm);
  font-family: var(--ui);
  font-size: 11.5px;
  color: var(--text);
}

/* remediation ladder for beat 04 */
.ladder {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}

.ladder__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 12px;
  color: var(--dim);
}

.ladder__row:last-child {
  border-bottom: 0;
}

.ladder__row b {
  color: var(--faint);
  font-weight: 400;
  font-size: 10px;
}

.ladder__row[data-done="1"] {
  color: var(--text);
}

.riskflip {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.riskflip b {
  font-size: 26px;
  letter-spacing: -0.03em;
  font-variant-numeric: var(--num);
}

.riskflip .from {
  color: var(--deny);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.riskflip .to {
  color: var(--allow);
}

/* ---------------------------------------------------------------
   PRICING
   --------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1000px) {
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tiers {
    grid-template-columns: 1fr;
  }
}

.tier {
  display: flex;
  flex-direction: column;
}

.tier[data-featured="1"] {
  border-color: var(--rule-live);
}

.tier__price {
  font-family: var(--ui);
  font-variant-numeric: var(--num);
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 4px 0 3px;
}

.tier__per {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}

.tier ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--dim);
  flex: 1;
}

.tier li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  align-items: start;
  line-height: 1.45;
}

.tier li::before {
  content: "";
  width: 6px;
  height: 1px;
  margin-top: 9px;
  background: var(--rule-strong);
}

/* ---------------------------------------------------------------
   FOOTER CTA
   --------------------------------------------------------------- */
.close {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 10vw, 118px) 0;
  border-top: 1px solid var(--rule);
  background: var(--bg-lift);
  text-align: center;
  overflow: hidden;
}

.close .gridfield {
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 78%);
}

.close .wrap {
  position: relative;
  z-index: 1;
}

.close .t-lede {
  margin: 18px auto 0;
  text-align: center;
}

.close__cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   SCROLL REVEAL - set by JS, so no-JS renders fully visible
   --------------------------------------------------------------- */
[data-reveal] {
  opacity: 1;
}

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}


/* ---------------------------------------------------------------
   LOG INK - shared by tiles and traces
   --------------------------------------------------------------- */
.l-dim {
  color: var(--faint);
}
.l-in {
  color: var(--text);
}
.l-ok {
  color: var(--allow);
}
.l-warn {
  color: var(--ask);
}
.l-bad {
  color: var(--deny);
}

/* ---------------------------------------------------------------
   ACT II MOBILE FALLBACK
   Below 900px the pin is never created (see instrument.js), so the
   four beats must render as a plain stacked sequence. Pinned
   scroll-jacking on a phone suppresses conversion; this is the
   non-negotiable half of the signature moment.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .fw__stage {
    min-height: 0;
    display: block;
    padding: 56px 0;
  }

  .fw__screen {
    min-height: 0;
  }

  .beat {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    border-bottom: 1px solid var(--rule);
  }

  .beat:last-child {
    border-bottom: 0;
  }

  .fw__progress {
    display: none;
  }
}

/* Same fallback when the visitor has asked for less motion: the
   pin still exists, but nothing depends on animation to be read. */
@media (prefers-reduced-motion: reduce) {
  .scanbar i,
  .hub__ring--scan,
  .tile__caret {
    animation: none;
  }
}

/* narrow screens: the rule/verdict table stacks rather than clipping */
@media (max-width: 620px) {
  .kv {
    grid-template-columns: 1fr;
  }
  .kv dt {
    border-bottom: 0;
    padding-bottom: 4px;
  }
  .beat__cmd {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------
   HERO BACKGROUND - the course plot
   Divergent agent trajectories enter from the left, drift, and are
   corrected into one converging channel. This is the headline drawn
   as a diagram, not wallpaper: the paths mean what the h1 says.
   The whole field is masked toward the right so it lives in the
   negative space beside the type rather than under it.
   --------------------------------------------------------------- */
/* The funnel is a band ABOVE the copy, not behind it. With the headline
   centred there is no clear column left in the middle, so the art moved
   to the one band that is genuinely empty and now converges DOWNWARD
   into the headline: every agent steered toward the one thing you read. */
.hero__field {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(170px, 23vh, 270px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 93%, transparent 100%);
}

.hero__plot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__plot .plot__line {
  fill: none;
  stroke-width: 1;
}

/* the channel walls the corrected paths run between */
.hero__plot .plot__wall {
  fill: none;
  stroke: color-mix(in oklch, var(--accent) 34%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.hero__plot .plot__ring {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
}

/* the correction tick: where a drifting path gets steered back */
/* course-correction marks. These are decoration, not classifications,
   so they are drawn in the neutral rule colour: the verdict palette is
   reserved for actual verdicts. */
.hero__plot .plot__fix {
  stroke: var(--rule-strong);
  stroke-width: 1.5;
}

.hero__plot .plot__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}

/* scan rings breaking outward from the gate as traffic arrives */
.hero__plot .plot__ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}

/* Below 900px there is no clear band above the copy: the hero padding
   collapses and the field ran straight through the headline and lede
   (measured 117px and 155px of overlap). The funnel only works when it
   has its own air, so on a phone it is simply not drawn. */
@media (max-width: 900px) {
  .hero__field {
    display: none;
  }
}

/* ---------------------------------------------------------------
   HERO RETICLE - instrument framing. Static, structural, no motion.
   --------------------------------------------------------------- */
.hero__reticle {
  position: absolute;
  inset: 16px 20px auto 20px;
  height: 780px;
  z-index: 0;
  pointer-events: none;
}

.hero__corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid var(--rule-strong);
}

.hero__corner--tl {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.hero__corner--tr {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}
.hero__corner--bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.hero__corner--br {
  bottom: 0;
  right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* edge tick scale - a measuring rule along the top and bottom */
.hero__tick {
  position: absolute;
  left: 34px;
  right: 34px;
  height: 5px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--rule-strong) 0 1px,
    transparent 1px 32px
  );
  opacity: 0.7;
}

.hero__tick--top {
  top: 0;
}

.hero__tick--bottom {
  bottom: 0;
  transform: scaleY(-1);
}

@media (max-width: 900px) {
  .hero__reticle {
    display: none;
  }
}



/* ---------------------------------------------------------------
   ACT I - THE WORKBENCH WINDOW
   Real product chrome: title bar, agent rail, four tiled panes
   with true splitters, status bar. Focus follows the rail.
   --------------------------------------------------------------- */
.wb {
  overflow: hidden;
}

/* a hairline divider between chrome fields, instead of three grey
   traffic lights borrowed from a window manager */
.wb__sep {
  width: 1px;
  height: 12px;
  background: var(--rule-strong);
  flex: none;
}

.wb__hint {
  color: var(--faint);
}

.wb__body {
  display: grid;
}

.wb__rail {
  border-right: 1px solid var(--rule);
  background: var(--sunken);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wb__railhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 14px 9px;
}

.wb__tallykey {
  letter-spacing: 0.1em;
  color: var(--faint);
  opacity: 0.7;
}

.wb__railhead--gap {
  padding-top: 18px;
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}

.wb__agent {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  width: 100%;
  padding: 7px 14px;
  text-align: left;
  border-left: 2px solid transparent;
  font-family: var(--mono);
  transition:
    background var(--dur-move) var(--ease-snap),
    border-color var(--dur-move) var(--ease-snap);
}

.wb__agent .led {
  grid-row: 1 / 3;
}

.wb__agentname {
  font-size: 11.5px;
  color: var(--dim);
  transition: color var(--dur-move) var(--ease-snap);
}

.wb__agentbranch {
  grid-column: 2 / 4;
  font-size: 9.5px;
  color: var(--faint);
}

/* each agent carries its own running verdict tally: the rail is
   telemetry, not a list of names */
.wb__tally {
  grid-column: 3;
  display: inline-flex;
  gap: 5px;
  font-variant-numeric: var(--num);
  font-size: 10px;
}

.wb__tally i {
  font-style: normal;
  min-width: 11px;
  text-align: right;
  color: var(--dimmer);
}

.wb__agent[data-on="1"] .wb__tally i.a {
  color: var(--allow);
}
.wb__agent[data-on="1"] .wb__tally i.k {
  color: var(--ask);
}
.wb__agent[data-on="1"] .wb__tally i.d {
  color: var(--deny);
}

/* the session block replaced a decorative file list */
.wb__session {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  margin: 0;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
}

.wb__session dt {
  font-family: var(--ui);
  letter-spacing: 0.06em;
  color: var(--faint);
}

.wb__session dd {
  margin: 0;
  color: var(--dim);
  font-variant-numeric: var(--num);
  text-align: right;
}

.wb__agent[data-on="1"] {
  background: var(--raised);
  border-left-color: var(--accent);
}

.wb__agent[data-on="1"] .wb__agentname {
  color: var(--text);
}

/* The stage is asymmetric on purpose. A 2x2 grid of equal panes is the
   shape every mocked-up dev tool has; a tiling workbench in real use has
   one pane you are working in and others parked at the edge. Panes never
   move in the DOM - only their grid role changes - so Flip can animate
   the reflow. */
.wb__stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--rule);
}

.wb__pane {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.wb__pane[data-role="focus"] {
  grid-column: 1 / -1;
  grid-row: 1;
}

.wb__pane[data-role="mini"] {
  grid-row: 2;
}

.wb__termwrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* fixed so the pane does not grow line by line while streaming, which
   would jitter the layout and fight Flip mid-reflow */
.wb__pane[data-role="focus"] .wb__termwrap {
  height: 208px;
}

.wb__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-lift);
  flex: none;
}

.wb__pane[data-role="focus"] .wb__tab {
  background: var(--raised);
  box-shadow: inset 2px 0 0 var(--accent);
}

.wb__elapsed {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: var(--num);
  color: var(--faint);
  flex: none;
}

.wb__tabname {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.wb__pane[data-role="focus"] .wb__tabname {
  color: var(--text);
}

.wb__term {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--dim);
  flex: 1;
  overflow: hidden;
}

/* prior turns, kept faint. A terminal that runs has scrollback; one that
   starts from a blank screen every loop is an animation of a terminal. */
.wb__scrollback {
  opacity: 0.32;
}

/* lines arrive one at a time; no per-character typing, which is the part
   that always reads as cosplay rather than a running process */
.wb__line {
  animation: lineIn 220ms var(--ease-snap) both;
  white-space: nowrap;
}

@keyframes lineIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* Parked panes keep their real session, rendered small. A tiling
   multiplexer shows you the texture of what the other panes are doing;
   a single tidy label is a UI mock pretending to be one. */
.wb__pane[data-role="mini"] {
  height: 104px;
}

.wb__pane[data-role="mini"] .wb__termwrap {
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}

.wb__pane[data-role="mini"] .wb__term {
  transform: scale(0.62);
  transform-origin: top left;
  width: 161%;
  padding: 9px 12px;
  pointer-events: none;
  opacity: 0.72;
}

.wb__pane[data-role="mini"] .wb__line {
  animation: none;
}

.wb__caret {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: caret 1.05s steps(2) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.wb__status {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 30px;
  padding: 0 13px;
  border-top: 1px solid var(--rule);
  background: var(--bg-lift);
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

.wb__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: var(--num);
  color: var(--dim);
}

.wb__sw {
  width: 6px;
  height: 6px;
  border-radius: 1px;
}

.wb__sw--allow {
  background: var(--allow);
}
.wb__sw--ask {
  background: var(--ask);
}
.wb__sw--deny {
  background: var(--deny);
}

@media (max-width: 900px) {
  .wb__rail {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding: 8px 0;
  }
  .wb__railhead,
  .wb__session,
  .wb__tally {
    display: none;
  }
  .wb__agent {
    width: auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .wb__agent[data-on="1"] {
    border-bottom-color: var(--accent);
  }
  .wb__stage {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }
  .wb__pane[data-role="focus"] {
    grid-column: 1;
    grid-row: auto;
  }
  .wb__pane[data-role="mini"] {
    grid-row: auto;
  }
  .wb__status {
    height: auto;
    padding: 9px 13px;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb__caret {
    animation: none;
  }
  .wb__pane {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------
   SPEC
   Proof and How-it-works were two thin sections saying the same
   thing with no product in either. Merged into one datasheet plus
   a firewall you can actually put a command through. The demo runs
   in the page, which is the honest way to show "nothing leaves
   your machine" rather than asserting it in a bullet.
   --------------------------------------------------------------- */
.spec__rail {
  margin-top: 14px;
}

/* the datasheet reuses the .kv primitive, flush inside its panel */
.kv--flush {
  border: 0;
  border-radius: 0;
  grid-template-columns: 148px minmax(0, 1fr);
}

.kv--flush dt,
.kv--flush dd {
  padding: 11px 14px;
}

.kv--flush dt {
  background: transparent;
  border-right: 1px solid var(--rule);
}

.cls__label {
  display: block;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

.cls__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 46px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--sunken);
  transition: border-color var(--dur-move) var(--ease-snap);
}

.cls__field:focus-within {
  border-color: var(--accent);
}

.cls__prompt {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dimmer);
  flex: none;
}

.cls__input {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  outline: none;
}

.cls__input::placeholder {
  color: var(--faint);
}

.cls__rule {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  min-height: 17px;
}

.cls__rule b {
  color: var(--text);
  font-weight: 500;
}

.cls__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.cls__presets button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg-lift);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  transition:
    color var(--dur-move) var(--ease-snap),
    border-color var(--dur-move) var(--ease-snap);
}

.cls__presets button:hover {
  color: var(--text);
  border-color: var(--rule-live);
}

.cls__auditbar {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-lift);
}

.cls__audit {
  min-height: calc(var(--row-h) * 3);
  background: var(--sunken);
}

.cls__audit .trace {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.cls__audit .trace:last-child {
  border-bottom: 0;
}

.cls__note {
  margin: 0;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--dimmer);
  max-width: 66ch;
}

/* ---------------------------------------------------------------
   MOBILE
   The phone build is not a narrowed desktop: the agent rail becomes
   a segmented control, the workbench stacks focus-first, and every
   control is sized for a thumb rather than a cursor.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  /* the rail turns into a scrollable segmented control. Branch names
     and tallies are dropped rather than clipped - a truncated label is
     worse than an absent one. */
  .wb__rail {
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    padding: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .wb__rail::-webkit-scrollbar {
    display: none;
  }

  .wb__railhead,
  .wb__railhead--gap,
  .wb__session,
  .wb__tally,
  .wb__agentbranch {
    display: none;
  }

  .wb__agent {
    display: flex;
    align-items: center;
    gap: 9px;
    width: auto;
    flex: none;
    height: 42px;
    padding: 0 16px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-right: 1px solid var(--rule);
  }

  .wb__agent[data-on="1"] {
    border-bottom-color: var(--accent);
  }

  .wb__agentname {
    font-size: 12.5px;
  }

  .wb__stage {
    min-height: 0;
  }

  .wb__term {
    font-size: 12px;
    line-height: 1.75;
  }

  .wb__line {
    white-space: normal;
  }

  .wb__mini {
    font-size: 11.5px;
  }

  /* chrome fields that only make sense on a wide bar */
  .wb__hint {
    display: none;
  }

  /* body copy floor: nothing readable should sit under 12px on a phone */
  .cls__note,
  .kv dt,
  .kv dd,
  .tier li,
  .step p,
  .faq p,
  .foot__inner {
    font-size: 12px;
  }

  .cls__field {
    height: 52px;
  }

  .cls__presets button {
    height: 36px;
    font-size: 11.5px;
  }

  .cls__audit .trace {
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    padding: 9px 12px;
    row-gap: 5px;
  }

  .cls__audit .trace .verdict {
    grid-column: 2;
    justify-self: start;
  }

  /* the beats stack, so give each one a visible boundary and room */
  .beat {
    padding: 20px 16px 24px;
  }

  .beat__note {
    font-size: 13px;
  }

  .fw__trace {
    display: none; /* the accreting rail needs scrub; stacked beats carry it */
  }

  .act__head {
    margin-bottom: 26px;
  }

  .foot__inner {
    gap: 12px;
  }

  .foot__links {
    margin-left: 0;
    width: 100%;
    gap: 22px;
  }
}

@media (max-width: 520px) {
  .hero__cta .btn {
    flex: 1 1 100%;
  }

  .cls__presets button {
    flex: 1 1 auto;
  }
}

/* Label floor on phones. These are uppercase labels, not body copy, so
   10px is defensible on a desktop at arm's length and not on a handset
   at 30cm. Lifted a step without collapsing the hierarchy. */
@media (max-width: 900px) {
  .eyebrow,
  .t-label,
  .panel__title,
  .readout__label,
  .readout__unit,
  .cplane__coltitle,
  .works__label,
  .act__marker,
  .marker,
  .wb__tabname,
  .wb__elapsed,
  .beat__label,
  .tier__per,
  .hero__rail-note,
  .wb__status,
  .cls__label {
    font-size: 11px;
  }

  .verdict {
    font-size: 10.5px;
    height: 22px;
    padding: 0 9px;
  }
}

/* fallback for any scroll that does not route through Lenis */
[id] {
  scroll-margin-top: 76px;
}

/* ---------------------------------------------------------------
   BUILT-IN DENY RULES
   The product's own rule table, rendered from the same array the
   classifier evaluates, so the demo and the list cannot disagree.
   A matching rule lights up when you test a command.
   --------------------------------------------------------------- */
.fwx__bar {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-lift);
}

.fwx__rules {
  background: var(--sunken);
}

.fwx__rule {
  display: grid;
  grid-template-columns: 168px 62px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: var(--row-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  transition:
    background var(--dur-tick) var(--ease-snap),
    box-shadow var(--dur-tick) var(--ease-snap);
}

.fwx__rule:last-child {
  border-bottom: 0;
}

.fwx__id {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
}

.fwx__why {
  font-size: 12px;
  color: var(--dimmer);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the rule the tested command actually hit */
.fwx__rule[data-hit="1"] {
  background: color-mix(in oklch, var(--deny) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--deny);
}

.fwx__rule[data-hit="1"] .fwx__id,
.fwx__rule[data-hit="1"] .fwx__why {
  color: var(--text);
}

@media (max-width: 760px) {
  .fwx__rule {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    padding: 10px 14px;
    row-gap: 5px;
  }
  .fwx__why {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------
   BILLING SWITCH
   A segmented control drawn with rules, not a sliding pill: the
   pill toggle is the stock SaaS component and it does not belong
   in a register built out of hairlines.
   --------------------------------------------------------------- */
.billing {
  display: inline-flex;
  margin-top: 22px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.billing__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  border-right: 1px solid var(--rule-strong);
  transition:
    background var(--dur-move) var(--ease-snap),
    color var(--dur-move) var(--ease-snap);
}

.billing__opt:last-child {
  border-right: 0;
}

.billing__opt:hover {
  color: var(--text);
}

.billing__opt.is-on {
  background: var(--raised);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.billing__save {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* the figure swaps, so it must not reflow the card */
.tier__price {
  font-variant-numeric: var(--num);
}

.tier__cycle {
  font-weight: 400;
  color: var(--dim);
}

@media (max-width: 520px) {
  .billing {
    width: 100%;
  }
  .billing__opt {
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }
}

/* ---------------------------------------------------------------
   WORKBENCH: MODE SWITCH + INSPECTOR
   Both are real surfaces on the shipped app that the first pass
   left out entirely. The product runs chat panes as well as
   terminals, and the right rail is where its running policy count
   lives, so a workbench without them is only half the product.
   --------------------------------------------------------------- */
.wb__mode {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: none;
}

.wb__modeopt {
  height: 22px;
  padding: 0 11px;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dimmer);
  border-right: 1px solid var(--rule-strong);
  transition:
    background var(--dur-move) var(--ease-snap),
    color var(--dur-move) var(--ease-snap);
}

.wb__modeopt:last-child {
  border-right: 0;
}

.wb__modeopt.is-on {
  background: var(--raised);
  color: var(--text);
}



.wb__insp {
  border-left: 1px solid var(--rule);
  background: var(--sunken);
  display: flex;
  flex-direction: column;
}

.wb__inspnav {
  display: flex;
  border-bottom: 1px solid var(--rule);
}

.wb__insptab {
  flex: 1;
  height: 32px;
  font-family: var(--ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dimmer);
  border-right: 1px solid var(--rule);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-move) var(--ease-snap);
}

.wb__insptab:last-child {
  border-right: 0;
}

.wb__insptab.is-on {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.wb__inspsec {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--rule);
}

.wb__inspsec:last-child {
  border-bottom: 0;
}

.wb__insphead {
  font-family: var(--ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 14px 9px;
}

.wb__ok {
  color: var(--allow);
}

.wb__blocked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 0 14px;
}

.wb__blocked code {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
}

/* per-pane footer: gates and token spend, the way the app reports them */
.wb__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 26px;
  padding: 0 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: var(--num);
  color: var(--faint);
  flex: none;
}

.wb__pane[data-role="mini"] .wb__foot,
.wb__pane[data-role="mini"] .wb__model {
  display: none;
}

.wb__model {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
  flex: none;
}

/* chat mode: the same session, rendered as the product's chat pane */
.wb__chat {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
}

.wb[data-mode="chat"] .wb__pane[data-role="focus"] .wb__termwrap {
  display: none;
}

.wb[data-mode="chat"] .wb__pane[data-role="focus"] .wb__chat {
  display: flex;
  height: 208px;
}

.wb__msg {
  max-width: 82%;
  padding: 8px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg-lift);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}

.wb__msg b {
  display: block;
  font-family: var(--ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}

.wb__msg--you {
  align-self: flex-end;
  background: var(--raised);
  color: var(--text);
}

.wb__chatcmd {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

/* Range-scoped on purpose: written as a bare max-width it sits after the
   900px block and wins at phone widths by source order, which pinned a
   170px rail on a 360px screen and left the stage 132px wide. */


@media (max-width: 900px) {
  .wb__insp {
    display: none;
  }
}

@media (max-width: 900px) {
  .wb__mode {
    display: none;
  }
  .wb__model {
    display: none;
  }
}

/* ---------------------------------------------------------------
   AUDIENCE
   Three buyer positions, each stating who it is and what they get.
   The first pass dropped this entirely, which removed the only place
   the page speaks to a reader rather than about the product.
   --------------------------------------------------------------- */
.who {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .who {
    grid-template-columns: 1fr;
  }
}

.who__card .panel__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.who__lede {
  margin: 12px 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}

.who__list {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12.5px;
  color: var(--dim);
}

.who__list li {
  position: relative;
  padding-left: 18px;
  line-height: 1.45;
}

.who__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 1px;
  background: var(--rule-strong);
}

.who__list code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
}

/* per-step risk deltas: the live site shows what each fix is worth, which
   is what makes the loop legible rather than a list of chores */
.delta {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: var(--num);
  color: var(--allow);
  min-width: 34px;
  text-align: right;
}

.delta--bad {
  color: var(--deny);
  font-size: 13px;
}

.ladder__row--head {
  background: color-mix(in oklch, var(--deny) 7%, transparent);
  color: var(--text);
}

.riskflip__gate {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
  margin-left: 6px;
}


/* ---------------------------------------------------------------
   WORKBENCH COLUMNS
   Three mutually exclusive ranges rather than overlapping max-widths.
   Written as bare max-widths these fought by source order: the wide
   3-column rule sat later in the file, so it applied on a 360px phone
   and squeezed the stage to 0px. Exclusive ranges cannot do that.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .wb__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .wb__body {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .wb__insp {
    display: none;
  }
}

@media (min-width: 1121px) {
  .wb__body {
    grid-template-columns: 186px minmax(0, 1fr) 190px;
  }
}

/* ---------------------------------------------------------------
   CAPABILITY TRIAD
   The live site states three capabilities under each security
   surface. Dropping them left the sections asserting outcomes with
   nothing underneath; this is where the mechanism goes.
   --------------------------------------------------------------- */
.triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
}

.triad--tight {
  margin-top: 16px;
}

@media (max-width: 820px) {
  .triad {
    grid-template-columns: 1fr;
  }
}

.triad__item {
  padding: 20px 24px 24px 0;
  border-right: 1px solid var(--rule);
}

.triad__item:last-child {
  border-right: 0;
}

.triad__item:not(:first-child) {
  padding-left: 24px;
}

@media (max-width: 820px) {
  .triad__item {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 18px 0 20px;
  }
  .triad__item:not(:first-child) {
    padding-left: 0;
  }
  .triad__item:last-child {
    border-bottom: 0;
  }
}

.triad__k {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.triad__item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 40ch;
}

.triad__item b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
}

/* ---------------------------------------------------------------
   SECURITY ROOM
   The four counters are the navigation: they are what you triage by,
   so making them the tabs means the number and the queue can never
   disagree. Clearing an approval really does decrement the count.
   --------------------------------------------------------------- */
.room__act {
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  transition:
    color var(--dur-move) var(--ease-snap),
    border-color var(--dur-move) var(--ease-snap);
}

.room__act:hover {
  color: var(--text);
  border-color: var(--rule-live);
}

.room__counts {
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bg-lift);
}

.room__page {
  text-align: left;
  border-bottom: 2px solid transparent;
  transition: background var(--dur-move) var(--ease-snap);
}

.room__page:hover {
  background: var(--raised);
}

.room__page.is-on {
  background: var(--raised);
  border-bottom-color: var(--accent);
}

.room__page.is-on .readout__label {
  color: var(--dim);
}

.room__rows {
  min-height: calc(var(--row-h) * 4);
  background: var(--sunken);
}

.room__row {
  display: grid;
  grid-template-columns: 92px 78px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  height: var(--row-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: var(--num);
  color: var(--dim);
}

.room__row:last-child {
  border-bottom: 0;
}

.room__sess {
  color: var(--faint);
}

.room__cmd {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room__age {
  color: var(--faint);
}

.room__clear {
  height: 20px;
  padding: 0 9px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-family: var(--ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.room__clear:hover {
  color: var(--allow);
  border-color: color-mix(in oklch, var(--allow) 45%, transparent);
}

.room__empty {
  padding: 22px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}

.room__note {
  margin: 0;
  padding: 13px 15px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--dimmer);
}

@media (max-width: 760px) {
  .room__row {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    padding: 10px 14px;
    row-gap: 6px;
  }
  .room__sess,
  .room__age {
    display: none;
  }
  .room__cmd {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------
   ANOMALY CHART
   --------------------------------------------------------------- */
.anom__chart {
  padding: 16px 16px 8px;
}

.anom__chart svg {
  width: 100%;
  height: 132px;
  display: block;
}

.anom__chart .bar {
  fill: var(--rule-strong);
}

.anom__chart .bar--spike {
  fill: var(--deny);
}

.anom__chart .baseline {
  stroke: var(--rule-live);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.anom .anomaly {
  margin: 8px 16px 16px;
}

/* the Room's controls have to clear the same 32px touch floor as
   everything else once there is no cursor */
@media (max-width: 900px) {
  .room__act {
    height: 34px;
    padding: 0 14px;
  }
  .room__clear {
    height: 32px;
    padding: 0 14px;
  }
  .room__row {
    align-items: start;
  }
  .panel__bar {
    height: auto;
    min-height: var(--row-h);
    padding: 7px 12px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* route from the homepage teaser to the full comparison matrix */
.price-compare {
  margin: 0 0 16px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.price-compare a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
}

.price-compare a:hover {
  border-bottom-color: var(--accent);
}