/* Terminal page · a deck read one screen at a time.

   The hero statement, the Terminal modules and the seven benefits stepping
   in place, and the closing hand-off to the plans. Nothing on this page
   scrolls; the deck controller in app.js interprets every gesture. */

body[data-page="signals"] {
  --sq-shell: var(--psv-shell-content);
  --sq-text: var(--psv-text);
  --sq-copy: var(--psv-copy);
  --sq-soft: var(--psv-muted);
  --sq-accent: var(--psv-accent);
  --sq-rule: var(--psv-line);
  --sq-rule-strong: var(--psv-line-strong);
  --sq-gradient: var(--psv-heading-gradient);
  color: var(--sq-text);
}

.sq-page {
  --sq-well-rgb: 19 45 88;
  --sq-ink-rgb: 15 36 74;
  color: var(--sq-text);
}

.sq-shell {
  width: var(--sq-shell);
  margin-inline: auto;
}

.sq-page :where(a, button):focus-visible {
  outline: 2px solid var(--sq-accent);
  outline-offset: 4px;
}

/* ── 02 · Seven benefits, stepping in place ─────────────────────────────
   The register keeps its place on the left; only the benefit being read is
   rendered on the right. The deck hands the page its gestures through
   `data-steps`, so a wheel notch turns the benefit, not the page. */

.sq-benefits .sq-journey-layout {
  display: grid;
  grid-template-columns: minmax(calc(178 * var(--psv-u)), 2fr) minmax(0, 10fr);
  align-items: start;
  gap: clamp(40px, 6vw, 88px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .sq-benefits .sq-journey-layout {
    gap: clamp((40 * var(--psv-u)), (92.16 * var(--psv-u)), (88 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.sq-stage-register ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sq-rule-strong);
  list-style: none;
}

.sq-stage-register a {
  position: relative;
  display: flex;
  min-height: calc(38 * var(--psv-u));
  align-items: baseline;
  gap: calc(10 * var(--psv-u));
  padding: calc(9 * var(--psv-u)) calc(4 * var(--psv-u)) calc(8 * var(--psv-u)) calc(12 * var(--psv-u));
  border-bottom: 1px solid var(--sq-rule);
  border-left: 2px solid transparent;
  color: var(--sq-soft);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

.sq-stage-register a > span {
  flex: 0 0 calc(24 * var(--psv-u));
  color: var(--sq-soft);
  font-family: var(--psv-font-mono);
  font-size: var(--psv-ui-micro);
  font-weight: var(--psv-weight-medium);
  line-height: 1.4;
  letter-spacing: var(--psv-track-eyebrow);
}

.sq-stage-register a > strong {
  color: inherit;
  font-family: var(--psv-font-sans);
  font-size: var(--psv-ui-label);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--psv-track-mono);
  text-transform: uppercase;
}

.sq-stage-register a:hover {
  color: var(--sq-copy);
  border-left-color: var(--sq-rule-strong);
}

.sq-stage-register a[aria-current="step"] {
  color: var(--sq-text);
  border-left-color: var(--sq-accent);
}

.sq-stage-register a[aria-current="step"] > span {
  color: var(--sq-accent);
}

.sq-stages {
  min-width: 0;
}

.sq-stage {
  display: none;
}

.sq-stage.is-current {
  display: block;
  /* Reading text is stable; changing sections does not animate its glyphs. */
  animation: none;
}


.sq-stage-head {
  display: grid;
  grid-template-columns: calc(68 * var(--psv-u)) minmax(0, 1fr);
  align-items: baseline;
  gap: calc(20 * var(--psv-u));
  margin-bottom: clamp(26px, 3.2vw, 40px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .sq-stage-head {
    margin-bottom: clamp((26 * var(--psv-u)), (49.152 * var(--psv-u)), (40 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.sq-stage-number {
  color: var(--sq-accent);
  font-family: var(--psv-font-mono);
  font-size: var(--psv-ui-chip);
  font-weight: var(--psv-weight-medium);
  line-height: 1;
  letter-spacing: var(--psv-track-wide);
}

.sq-stage-head h2 {
  width: fit-content;
  max-width: 24ch;
  margin: 0;
  color: var(--psv-brand);
  font-family: var(--psv-font-editorial);
  font-size: var(--psv-editorial-title-size);
  font-weight: var(--psv-editorial-title-weight);
  line-height: var(--psv-editorial-title-leading);
  letter-spacing: var(--psv-editorial-title-tracking);
  word-spacing: var(--psv-editorial-title-word-spacing);
  text-wrap: balance;
}

.sq-stage-copy {
  max-width: calc(900 * var(--psv-u));
  margin-left: calc(88 * var(--psv-u));
}

.sq-stage-copy p {
  max-width: none;
  margin: 0;
  color: var(--sq-text);
  font-family: var(--psv-font-editorial);
  font-size: var(--psv-editorial-copy-size);
  font-weight: var(--psv-editorial-copy-weight);
  line-height: var(--psv-editorial-copy-leading);
  letter-spacing: var(--psv-editorial-copy-tracking);
  text-wrap: pretty;
}

/* The early-sight drawing under the first benefit: the promise, drawn in the
   architecture strip's own language. Capped so the scene never overflows on
   the shortest strict profile. */
.sq-early {
  max-width: calc(680 * var(--psv-u));
  margin: clamp(22px, 3.6svh, 40px) 0 0;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .sq-early {
    margin: clamp((22 * var(--psv-u)), (26.28 * var(--psv-u)), (40 * var(--psv-u))) 0 0;
  }
}
/* desktop-scale:end */

.sq-early-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(150px, 30svh, 250px);
  color: var(--sq-text);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .sq-early-svg {
    max-height: clamp((150 * var(--psv-u)), (219 * var(--psv-u)), (250 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.sq-early-label {
  fill: currentColor;
  fill-opacity: .55;
  font-family: var(--psv-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
}

.sq-early-label--accent {
  fill: rgb(var(--psv-accent-rgb));
  fill-opacity: .95;
}

.sq-early-dot.is-live {
  animation: sq-early-pulse 1.6s ease-in-out infinite;
}

@keyframes sq-early-pulse {
  0%, 100% { r: 3.2; fill-opacity: 1; }
  50% { r: 5; fill-opacity: .55; }
}

/* ── 04 · The hand-off ──────────────────────────────────────────────── */

.sq-next-page .sq-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sq-next-link {
  margin: auto 0;
  align-self: center;
  text-align: center;
  text-decoration: none;
}

.sq-next-link small {
  display: block;
  margin-bottom: calc(16 * var(--psv-u));
  color: var(--sq-soft);
  font-family: var(--psv-font-mono);
  font-size: var(--psv-ui-label);
  font-weight: var(--psv-weight-medium);
  letter-spacing: var(--psv-track-wide);
}

.sq-next-link strong {
  display: inline-block;
  color: transparent;
  background: var(--sq-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--psv-font-editorial);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: var(--psv-editorial-title-weight);
  line-height: 1.1;
  letter-spacing: var(--psv-editorial-title-tracking);
  transition: transform 300ms ease;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .sq-next-link strong {
    font-size: clamp((34 * var(--psv-u)), (70.656 * var(--psv-u)), (58 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.sq-next-link:hover strong {
  transform: translateY(calc(-3 * var(--psv-u)));
}

.sq-next-arrow {
  margin-left: calc(16 * var(--psv-u));
  color: var(--sq-accent);
  -webkit-text-fill-color: var(--sq-accent);
  font-size: .68em;
  transition: transform 300ms ease;
}

.sq-next-link:hover .sq-next-arrow {
  transform: translate(calc(4 * var(--psv-u)), calc(-4 * var(--psv-u)));
}

.sq-next-sub {
  display: block;
  margin-top: calc(14 * var(--psv-u));
  color: var(--sq-copy);
  font-family: var(--psv-font-editorial);
  font-size: var(--psv-ui-copy);
  line-height: 1.6;
}

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1050px) and (max-width: 1080px) {
  .sq-benefits .sq-journey-layout {
    display: block;
  }

  .sq-stage-register {
    margin-bottom: calc(34 * var(--psv-u));
  }

  .sq-stage-register ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 0;
  }

  .sq-stage-register li {
    border-bottom: 1px solid var(--sq-rule);
    border-left: 1px solid var(--sq-rule);
  }

  .sq-stage-register li:nth-child(4n + 1) {
    border-left: 0;
  }

  .sq-stage-register a {
    min-height: calc(66 * var(--psv-u));
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(8 * var(--psv-u));
    padding: calc(10 * var(--psv-u));
    border-bottom: 2px solid transparent;
    border-left: 0;
  }

  .sq-stage-register a > strong {
    font-size: var(--psv-ui-label);
  }

  .sq-stage-register a:hover {
    border-left-color: transparent;
  }

  .sq-stage-register a[aria-current="step"] {
    border-bottom-color: var(--sq-accent);
    border-left-color: transparent;
  }
}

@media (max-width: 760px) {
  .sq-stage-head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }

  .sq-stage-copy {
    max-width: none;
    margin-left: 0;
  }

  .sq-stage-copy p {
    font-size: 15.5px;
    line-height: 1.6;
  }

  /* On a phone the register folds to a row of step chips: the active
     benefit's own head already carries the title. */
  .sq-stage-register {
    margin-bottom: 22px;
  }

  .sq-stage-register ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 0;
  }

  .sq-stage-register li,
  .sq-stage-register li:nth-child(4n + 1),
  .sq-stage-register li:nth-child(odd) {
    border: 0;
  }

  .sq-stage-register a {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 7px 11px;
    border: 1px solid var(--sq-rule);
    border-radius: 2px;
  }

  .sq-stage-register a > span {
    flex: none;
  }

  .sq-stage-register a > strong {
    display: none;
  }

  .sq-stage-register a[aria-current="step"] {
    border-color: var(--sq-accent);
  }
}

/* A short viewport -- the common 768-high laptop -- gets tighter spacing
   while preserving the natural type size and the complete reading. */
@media (max-height: 860px) {
  .sq-benefits.psv-page {
    padding-block: calc(22 * var(--psv-u));
  }

  .sq-stage-head {
    margin-bottom: calc(20 * var(--psv-u));
  }

  .sq-stage-head h2 {
    font-size: clamp(26px, 2.6vw, 34px);
  }
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .sq-benefits.psv-page {
    padding-block: calc(22 * var(--psv-u));
  }

  .sq-stage-head {
    margin-bottom: calc(20 * var(--psv-u));
  }

  .sq-stage-head h2 {
    font-size: clamp((26 * var(--psv-u)), (39.936 * var(--psv-u)), (34 * var(--psv-u)));
  }
}
/* desktop-scale:end */

@media (prefers-reduced-motion: reduce) {
  body[data-page="signals"] *,
  body[data-page="signals"] *::before,
  body[data-page="signals"] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .sq-stage-head h2,
  .sq-next-link strong {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .sq-stage-register a[aria-current="step"] {
    text-decoration-line: underline;
    text-decoration-color: Highlight;
    text-decoration-thickness: 2px;
    text-underline-offset: .32em;
  }
}

/* ---- phone: the stages read as one flowing document -------------------- */
/* Stepping-in-place is a pointer affordance. On a phone every stage is
   rendered, the numbered register that drove the stepping goes away, and the
   anatomy notes join the flow under the card instead of hanging beside it. */
@media (max-width: 760px) {
  .sq-stage,
  .sq-stage.is-current {
    display: block;
    animation: none;
  }

  .sq-stage + .sq-stage {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid rgb(var(--psv-line-rgb) / .14);
  }

  .sq-stage-head {
    display: block;
    margin-bottom: 10px;
  }

  .sq-stage-register,
  .sq-stage-number {
    display: none;
  }
}

/* The reading column keeps the opening statement's 28px gutter on a phone;
   the desktop shell (16px edge, no padding) sat 12px to its left. */
@media (max-width: 760px) {
  .sq-page .psv-page .sq-shell {
    width: min(620px, calc(100% - 28px));
    padding-inline: 14px;
    box-sizing: border-box;
  }
}

/* ── 01b · The three Terminal modules, stepping in place ────────────────
   The same grammar as the benefits: the same register, the same head and
   copy, the same column. The panel is a screen inside the page: rows and
   strips sit as they do in the signed-in Terminal, the three panels share
   one frame and one scale (signals.js measures the tallest), so the module
   being read never changes the size of the screen it is read on. */

.sq-modules .sq-module-layout {
  display: grid;
  grid-template-columns: calc(200 * var(--psv-u)) minmax(0, 1fr);
  align-items: start;
  gap: calc(24 * var(--psv-u));
}

/* The module's words sit in the register, under the item being read, so
   the stage is the screen alone. */
.sq-module-register .sq-module-copy {
  display: none;
  max-width: calc(232 * var(--psv-u));
  margin: calc(10 * var(--psv-u)) 0 calc(14 * var(--psv-u)) calc(14 * var(--psv-u));
  color: var(--sq-copy);
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
  line-height: 1.55;
  text-wrap: pretty;
}

.sq-module-register a[aria-current="step"] + .sq-module-copy {
  display: block;
}

.sq-modules-stages {
  position: relative;
  min-width: 0;
}

.sq-module {
  display: none;
}

/* flow-root: on a short page signals.js scales the panel and takes the
   height back with a negative bottom margin. Collapsing through a plain
   block, that margin left the module box at the panel's unscaled height, an
   empty strip below the scene. */
.sq-module.is-current {
  display: flow-root;
  animation: none;
}

/* A hidden module is laid out once, invisibly, so the frame can take the
   tallest panel's height. */
.sq-module.is-measuring {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}

.sq-module .tm-panel {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin-top: 0;
}

.sq-module .tm-panel > .tm-foot {
  margin-top: auto;
}

/* The three panels share one frame; the Monitor's eighteen rows take the air
   the frame leaves it, so the table ends where the foot begins. */
@media (min-width: 1051px) {
  .sq-module .tm-panel.tm-monitor .tm-table.tm-table--monitor tbody td {
    height: calc(22.6 * var(--psv-u));
  }
}

/* The page's panel has no room for a whole scale hint beside the name: the
   hint is read in Analyze, under the chart. */
.sq-module .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-namebtn {
  grid-template-columns: minmax(0, 1fr);
}

.sq-module .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-namebtn > small {
  display: none;
}

/* The page's panel is narrower than the signed-in Terminal's, so three things
   are set for its width. The combined strip keeps its two lines, the label
   above the value. The regime and derivatives strips stay on one line: a cell
   is as wide as what it says, and only a note gives way. Beside the chart the
   readings keep their value, range and contribution. */
.sq-module .tm-monitor .tm-strip--combined {
  --tm-strip-cols: minmax(0, 216fr) minmax(0, 126fr) minmax(0, 108fr) minmax(0, 150fr) minmax(0, 110fr) minmax(0, 232fr);
}

.sq-module .tm-monitor .tm-strip--combined > * {
  display: block;
  padding-block: calc(4 * var(--psv-u)) calc(5 * var(--psv-u));
}

.sq-module .tm-monitor .tm-strip--combined > * > i {
  display: block;
  margin: 0 0 calc(2 * var(--psv-u));
}

.sq-module .tm-monitor :is(.tm-strip--state, .tm-strip--deriv) {
  display: flex;
}

.sq-module .tm-monitor :is(.tm-strip--state, .tm-strip--deriv) > * {
  flex: 1 0 auto;
  gap: calc(7 * var(--psv-u));
}

.sq-module .tm-monitor :is(.tm-strip--state, .tm-strip--deriv) > :has(> em) {
  flex-shrink: 1;
}

.sq-module .tm-monitor :is(.tm-strip--state, .tm-strip--deriv) > * > :is(i, b) {
  flex: none;
}

.sq-module .tm-monitor :is(.tm-strip--state, .tm-strip--deriv) > * > em {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On the page the measure chips carry the name alone, five to a row and a
   little tighter, and the head keeps one line, so Analyze, with the combined
   view open too, stays inside the frame the Monitor sets. */
.sq-module .tm-mlist b {
  display: none;
}

@media (min-width: 1051px) {
  .sq-module .tm-analyze .tm-mlist {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(3 * var(--psv-u)) calc(5 * var(--psv-u));
    padding-block: calc(5 * var(--psv-u));
  }

  .sq-module .tm-analyze .tm-mlist > button {
    padding-block: calc(1 * var(--psv-u)) calc(2 * var(--psv-u));
  }

  .sq-module .tm-analyze .tm-head {
    flex-wrap: nowrap;
  }

  .sq-module .tm-analyze .tm-head__id {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sq-module .tm-analyze .tm-head__meta {
    flex: none;
  }
}

@media (min-width: 761px) {
  .sq-module .tm-split .tm-table--evidence.is-fixed {
    min-width: 0;
  }

  .sq-module .tm-split .tm-table--evidence :is(th, td):nth-child(n + 5) {
    display: none;
  }

  .sq-module .tm-split .tm-table--evidence col:nth-child(n + 5) {
    width: 0;
  }
}

/* The seven benefits share one first line: the page keeps the centred
   position of a standard benefit, so a taller drawing runs lower instead of
   lifting its own title. */
@media (min-width: 761px) {
  /* The screen takes the page: a thin band of air above and below, the
     panel drawn at its natural size. */
  .psv-page.sq-modules {
    padding-block: clamp(16px, 2.5vh, 56px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .psv-page.sq-modules {
      padding-block: clamp((16 * var(--psv-u)), (18.25 * var(--psv-u)), (56 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  /* A short screen keeps the panel at 1:1 by giving up the air first. */
  @media (max-height: 760px) {
    .psv-page.sq-modules {
      padding-block: calc(10 * var(--psv-u));
    }
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .psv-page.sq-modules {
      padding-block: calc(10 * var(--psv-u));
    }
  }
  /* desktop-scale:end */

  .psv-page.sq-benefits {
    justify-content: flex-start;
    padding-top: calc(var(--psv-page-air) + (100svh - var(--psv-header-height) - 2 * var(--psv-page-air) - (404 * var(--psv-u))) / 2);
  }
}

@media (max-width: 760px) {
  .sq-modules .sq-module-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sq-module {
    display: block;
    margin-bottom: 32px;
  }

  .sq-module.is-measuring {
    display: none;
  }

  /* A phone reads every module in turn: each item carries its words. */
  .sq-module-register .sq-module-copy {
    display: block;
  }
}