/* The tq-* component vocabulary: the analytical dimensions and the core
   technologies on Technology, and the system architecture on System. The
   palette is scoped to the component root so it travels with the markup. */

.tq-page {
  --tq-bg: var(--psv-bg);
  --tq-bg-alt: var(--psv-bg-alt);
  --tq-bg-raised: var(--psv-bg-raised);
  --tq-text: var(--psv-text);
  --tq-copy: var(--psv-copy);
  --tq-soft: var(--psv-muted);
  --tq-accent: var(--psv-accent);
  --tq-rule: rgb(var(--psv-accent-rgb) / .18);
  --tq-rule-strong: rgb(var(--psv-accent-rgb) / .38);
  --tq-focus: var(--psv-accent-tint);
  --tq-heading-gradient: var(--psv-heading-gradient);
  --tq-shade1-rgb: 5 17 29;
  --tq-shade2-rgb: 3 9 16;
  --tq-sky-rgb: 135 202 237;
  --tq-glow-rgb: 145 210 239;
  --tq-well-rgb: 16 51 71;
  --tq-node-muted: #4a7398;
  --tq-meta: #5b6f80;
  --tq-node-soft: #3b6f96;
  --tq-node-strong: #2e6a97;
  --tq-node-peak: #0f3d66;
  --tq-node-mid: #3a86b8;
  --tq-ice: #1b5a8a;
  --tq-steel: #2f77a8;
  --tq-azure: #2b84bb;
  --tq-slate: #3d8bbd;
  --tq-pit1-rgb: 3 10 17;
  --tq-pit2-rgb: 4 17 27;
  --tq-shell: var(--psv-shell-content);
  color: var(--tq-text);
}

body[data-page="technology"] .site-header {
  background: var(--psv-header-bg);
  backdrop-filter: none;
}

body[data-page="technology"] .menu-toggle {
  border-color: var(--tq-rule-strong);
  border-radius: 0;
  background: transparent;
}

body[data-page="technology"] .site-footer {
  border-top-color: var(--tq-rule);
  color: var(--tq-soft);
  background: var(--tq-bg);
}

.tq-skip-link {
  position: fixed;
  top: calc(-80 * var(--psv-u));
  left: calc(16 * var(--psv-u));
  z-index: 120;
  padding: calc(11 * var(--psv-u)) calc(14 * var(--psv-u));
  border: 1px solid var(--tq-rule-strong);
  color: var(--tq-text);
  background: var(--tq-bg-alt);
  font-size: var(--psv-ui-copy);
}

.tq-skip-link:focus {
  top: calc(12 * var(--psv-u));
}

.tq-page {
  position: relative;
  min-height: 100vh;
  background: var(--tq-bg);
  isolation: isolate;
}

.tq-page,
.tq-page * {
  min-width: 0;
}

.tq-page :where(h1, h2, h3, h4, p, ol, ul, figure, blockquote) {
  margin-top: 0;
}

.tq-page :where(h1, h2, h3, h4) {
  color: var(--tq-text);
  text-wrap: balance;
}

.tq-page :where(p, li) {
  overflow-wrap: break-word;
}

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

.tq-page .sr-only {
  position: absolute !important;
  width: calc(1 * var(--psv-u)) !important;
  height: calc(1 * var(--psv-u)) !important;
  padding: 0 !important;
  margin: calc(-1 * var(--psv-u)) !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tq-shell,
.tq-hero-grid {
  width: var(--tq-shell);
  margin-inline: auto;
}

/* desktop-scale:end */

.tq-title {
  max-width: calc(900 * var(--psv-u));
  margin-bottom: 0;
  font-size: var(--psv-title-size);
  font-weight: var(--psv-title-weight);
  line-height: var(--psv-title-leading);
  letter-spacing: var(--psv-title-tracking);
}

.tq-lead {
  max-width: calc(740 * var(--psv-u));
  margin-bottom: 0;
  color: var(--tq-copy);
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.68;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-lead {
    font-size: clamp((16 * var(--psv-u)), (22.272 * var(--psv-u)), (18 * var(--psv-u)));
  }
}
/* desktop-scale:end */

/* Hero */

/* Geometry belongs to the shared first-section contract; the page sets
   only its own rule colour. */
/* No rule between deck steps: one screen ends where the next begins, the
   way System reads. */
.tq-hero {
}

.tq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(calc(280 * var(--psv-u)), 5fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
  padding-block: clamp(96px, 12vh, 150px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-hero-grid {
    gap: clamp((48 * var(--psv-u)), (122.88 * var(--psv-u)), (120 * var(--psv-u)));
    padding-block: clamp((96 * var(--psv-u)), (87.6 * var(--psv-u)), (150 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.tq-hero-title {
  max-width: calc(1040 * var(--psv-u));
  margin: 0;
  font-size: var(--psv-hero-size);
  font-weight: var(--psv-hero-weight);
  line-height: var(--psv-hero-leading);
  letter-spacing: var(--psv-hero-tracking);
}

.tq-hero-title > span {
  display: block;
}

.tq-hero-title > span + span {
  color: var(--tq-accent);
}

/* desktop-scale:end */

.tq-dimension-code {
  color: var(--tq-accent);
  font-size: var(--psv-ui-label);
  font-weight: var(--psv-weight-bold);
  line-height: 1.35;
  letter-spacing: var(--psv-track-caps-wide);
  font-variant-numeric: tabular-nums;
}

/* desktop-scale:end */

/* Analytical dimensions -- a deck page. The register keeps the reader's
   place on the left, and only the dimension being read is rendered on the
   right; the deck hands the page its gestures through `data-steps`, so a
   wheel notch turns the dimension, not the page. Same standard as the
   Signals benefits register. */

.tq-map-label {
  fill: var(--psv-muted);
  font-family: var(--psv-font-mono);
  font-size: 10px;
  letter-spacing: var(--psv-track-caps-meta);
}

/* The dimensions turn in place behind their register, to the Signals
   standard: the register keeps the reader's position on the left, and only
   the dimension being read is rendered on the right. */

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

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

.tq-dim-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(--tq-rule);
  border-left: 2px solid transparent;
  color: var(--psv-muted);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

.tq-dim-register a > span {
  flex: 0 0 calc(20 * var(--psv-u));
  color: var(--psv-muted);
  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);
}

.tq-dim-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;
}

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

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

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

.tq-dim-stages {
  min-width: 0;
}

.tq-dim {
  display: none;
}

/* The dimension reads to the Signals standard: a small mono index on the
   left, the reading in the column beside it. */
.tq-dim.is-current {
  display: grid;
  grid-template-columns: calc(68 * var(--psv-u)) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px) 20px;
  align-items: baseline;
  /* Reading text is stable; changing sections does not animate its glyphs. */
  animation: none;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-dim.is-current {
    gap: clamp((10 * var(--psv-u)), (21.504 * var(--psv-u)), (16 * var(--psv-u))) calc(20 * var(--psv-u));
  }
}
/* desktop-scale:end */

.tq-dim.is-current .tq-dim-stage-head {
  display: contents;
}

.tq-dim.is-current .tq-dimension-code {
  grid-column: 1;
  grid-row: 1;
  color: var(--tq-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);
  font-variant-numeric: tabular-nums;
}

.tq-dim.is-current h3 {
  grid-column: 2;
  grid-row: 1;
}

.tq-dim.is-current .tq-dim-desc,
.tq-dim.is-current .tq-term-list {
  grid-column: 2;
}

.tq-dim-stage-head {
  display: grid;
  grid-template-columns: calc(44 * var(--psv-u)) minmax(0, 1fr);
  gap: calc(16 * var(--psv-u));
  align-items: baseline;
  margin-bottom: clamp(12px, 1.6vw, 20px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-dim-stage-head {
    margin-bottom: clamp((12 * var(--psv-u)), (24.576 * var(--psv-u)), (20 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.tq-dim-stage-head h3 {
  width: fit-content;
  max-width: 24ch;
  margin: 0;
  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;
}

/* the dimension description reads in the lead's own voice: same face, same size */
.tq-dim-desc {
  max-width: none;
  margin: 10px 0 clamp(16px, 2vw, 24px);
  color: var(--tq-text);
  font-family: var(--psv-font-editorial);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.55;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-dim-desc {
    margin: calc(10 * var(--psv-u)) 0 clamp((16 * var(--psv-u)), (30.72 * var(--psv-u)), (24 * var(--psv-u)));
    font-size: clamp((15 * var(--psv-u)), (19.2 * var(--psv-u)), (17 * var(--psv-u)));
  }
}
/* desktop-scale:end */

/* the term inventory: quiet mono chips, an instrument's parts list */
/* the term inventory reads as a numbered specification: a cyan mono index,
   the term beside it -- an instrument's parts list, three columns wide */
.tq-term-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(13 * var(--psv-u)) calc(40 * var(--psv-u));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tq-term;
}

.tq-term-list li {
  counter-increment: tq-term;
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--psv-u));
  color: rgb(var(--psv-text-rgb) / .82);
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
  line-height: 1.35;
  transition: color 200ms ease;
}

.tq-term-list li::before {
  content: counter(tq-term, decimal-leading-zero);
  flex: none;
  color: var(--tq-accent);
  font-family: var(--psv-font-mono);
  font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: var(--psv-weight-medium);
  letter-spacing: var(--psv-track-caps-wide);
  font-variant-numeric: tabular-nums;
}

.tq-term-list li:hover {
  color: var(--tq-text);
}

.tq-research a,
.tq-next a {
  color: var(--tq-text);
  text-decoration: underline;
  text-decoration-color: var(--tq-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: calc(6 * var(--psv-u));
}

.tq-research a:hover,
.tq-next a:hover {
  color: var(--tq-accent);
  text-decoration-color: currentColor;
}

/* Closing and exits -- the deck's last screen: the statement, the research
   branch, and the two hand-offs. */

.tq-closing.psv-page {
  /* the closing statement is placed from this page's top, as on the System page */
  position: relative;
  background: var(--tq-bg);
}

.tq-closing-next-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  padding: 0;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-closing-next-shell {
    gap: clamp((16 * var(--psv-u)), (30.72 * var(--psv-u)), (24 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.tq-closing-slogan {
  max-width: calc(1020 * var(--psv-u));
  margin-bottom: 0;
  font-size: clamp(42px, 5vw, 60px);
  font-weight: var(--psv-weight-semibold);
  line-height: .98;
  letter-spacing: -.058em;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-closing-slogan {
    font-size: clamp((42 * var(--psv-u)), (76.8 * var(--psv-u)), (60 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.tq-closing-slogan span {
  display: block;
}

.tq-closing-slogan span + span {
  margin-top: .16em;
  color: var(--tq-accent);
}

/* Match the System page's established ice-blue title treatment. */

.tq-page :is(
  .tq-title,
  .tq-dim-stage-head h3,
  .tq-research h3,
  .tq-closing-slogan
) {
  background: var(--tq-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Desktop keeps the full architecture and ledger readable as one narrative. */

/* phones have their own full-screen menu (site-components.css, 11 Oct 2026) */
@media (min-width: 761px) and (max-width: 1050px) {
  body[data-page="technology"] .primary-nav {
    left: 0;
    right: 0;
    padding: 16px 24px;
    border: 0;
    border-bottom: 1px solid var(--tq-rule);
    border-radius: 0;
    background: var(--tq-bg);
    box-shadow: none;
  }
}

@media (max-width: 1024px) {
  body[data-page="technology"] {
    --tq-shell: var(--psv-shell-content);
  }

  .tq-hero-grid {
    grid-template-columns: 1fr;
  }

  .tq-hero-grid {
    align-content: end;
    gap: 72px;
  }

  }

@media (max-width: 900px) {
  .tq-dim-layout {
    display: block;
  }

  .tq-dim-layout {
    display: block;
  }

  .tq-dim-register {
    margin-bottom: 22px;
  }
}

@media (max-width: 760px) {
  .tq-hero {
    min-height: calc(100svh - var(--psv-header-height));
  }

  .tq-hero-grid {
    gap: 52px;
    padding-block: 80px;
  }

  /* On a phone the register folds to a row of letter chips: the current
     dimension's own head already carries the title. */
  .tq-dim-register ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 0;
  }

  .tq-dim-register {
    margin-bottom: 14px;
  }

  .tq-dim-register a {
    min-height: 0;
    align-items: center;
    gap: 0;
    padding: 7px 12px;
    border: 1px solid var(--tq-rule);
    border-radius: 2px;
  }

  .tq-dim-register a > span {
    flex: none;
  }

  .tq-dim-register a > strong {
    display: none;
  }

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

  .tq-dim-stage-head {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .tq-term-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 26px;
  }

  .tq-term-list li {
    font-size: var(--psv-ui-micro);
  }

  .tq-closing-next-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body[data-page="technology"] {
    --tq-shell: var(--psv-shell-content);
  }

  .tq-title {
    font-size: var(--psv-title-size);
  }

  .tq-closing-slogan {
    font-size: var(--psv-closing-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tq-page,
  .tq-page *,
  .tq-page *::before,
  .tq-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Technology × System visual alignment */

.tq-page .tq-title,
.tq-page .tq-dim-stage-head h3,
.tq-page .tq-research h3,
.tq-page .tq-closing-statement,
.tq-page .tq-closing-slogan > span {
  color: transparent;
  /* One heading ramp across the site: the shared token resolves into the
     brand's logo blue, not the turquoise this local ramp used to read as. */
  background: var(--psv-heading-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* desktop-scale:end */

@media (forced-colors: active) {
  .tq-page .tq-hero-title > span,
  .tq-page .tq-title,
  .tq-page .tq-dim-stage-head h3,
  .tq-page .tq-research h3,
  .tq-page .tq-closing-statement,
  .tq-page .tq-closing-slogan > span {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Shared editorial typography: Research and Technology use one content voice. */
.tq-page :is(
  .tq-title,
  .tq-lead,
  .tq-dim-stage-head h3,
  .tq-dim-desc,
  .tq-research h3,
  .tq-research p
) {
  font-family: var(--psv-font-editorial);
}

.tq-page :is(
  .tq-title
) {
  font-weight: var(--psv-editorial-title-weight);
  letter-spacing: var(--psv-editorial-title-tracking);
  word-spacing: var(--psv-editorial-title-word-spacing);
}

.tq-page :is(
  .tq-research p
) {
  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;
}

.tq-page :is(
  .tq-dim-stage-head h3,
  .tq-research h3
) {
  font-weight: var(--psv-editorial-title-weight);
  letter-spacing: var(--psv-editorial-title-tracking);
  word-spacing: var(--psv-editorial-title-word-spacing);
}

/* A short viewport -- the common 768-high laptop -- gets tighter deck pages
   before anything could overflow. */
@media (max-height: 860px) {
  .tq-dimensions.psv-page,
  .tq-core.psv-page,
  .tq-closing.psv-page {
    padding-block: calc(22 * var(--psv-u));
  }

  .tq-dim-stage-head {
    margin-bottom: calc(10 * var(--psv-u));
  }

  /* the dimension title tracks the Signals compact stage title */
  .tq-dim-stage-head h3 {
    font-size: clamp(26px, 2.6vw, 34px);
  }

  .tq-dim-desc {
    margin-bottom: calc(10 * var(--psv-u));
    font-size: var(--psv-ui-copy);
    line-height: 1.55;
  }

  .tq-term-list {
    gap: calc(9 * var(--psv-u)) calc(32 * var(--psv-u));
  }

  .tq-lead--bridge {
    font-size: var(--psv-ui-label);
  }

}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-dimensions.psv-page,
    .tq-core.psv-page,
    .tq-closing.psv-page {
    padding-block: calc(22 * var(--psv-u));
  }

  .tq-dim-stage-head {
    margin-bottom: calc(10 * var(--psv-u));
  }

  .tq-dim-stage-head h3 {
    font-size: clamp((26 * var(--psv-u)), (39.936 * var(--psv-u)), (34 * var(--psv-u)));
  }

  .tq-dim-desc {
    margin-bottom: calc(10 * var(--psv-u));
    font-size: var(--psv-ui-copy);
    line-height: 1.55;
  }

  .tq-term-list {
    gap: calc(9 * var(--psv-u)) calc(32 * var(--psv-u));
  }

  .tq-lead--bridge {
    font-size: var(--psv-ui-label);
  }
}
/* desktop-scale:end */

/* Phone: every deck page still fits one screen. These sit after the shared
   typography groups on purpose, so the tighter sizes win. */
@media (max-width: 760px) {

  .tq-dim-stage-head h3 {
    font-size: 18px;
  }

  .tq-dim-desc {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.55;
  }

  .tq-term-list {
    gap: 7px 20px;
  }

  .tq-dim.is-current {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 4px 12px;
  }

  .tq-dim.is-current .tq-dimension-code {
    font-size: var(--psv-ui-chip);
  }

  .tq-dim-stage-head h3 {
    font-size: 19px;
  }

  .tq-dim-stage-head {
    margin-bottom: 8px;
  }

  .tq-dim-desc {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
  }

  .tq-title {
    font-size: 22px;
  }

  .tq-lead {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .tq-lead--bridge {
    margin-top: 8px;
  }

  
}

/* ---- the architecture as a stepped sub-page --------------------------- */
/* ---- the architecture sub-page, without its title -------------------- */
/* desktop-scale:end */

/* desktop-scale:end */

/* ---- the flow band, without the head above it ------------------------ */
/* desktop-scale:end */

/* desktop-scale:end */

/* The architecture's own shell is narrower than the deck's column; on a
   sub-page it takes the deck's, so the chapter keeps one left edge. */
.psv-page .tq-shell {
  width: var(--psv-shell-wide);
  padding-inline: clamp(42px, 3.25vw, 48px);
  box-sizing: border-box;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .psv-page .tq-shell {
    padding-inline: clamp((42 * var(--psv-u)), (49.92 * var(--psv-u)), (48 * var(--psv-u)));
  }
}
/* desktop-scale:end */

@media (max-width: 760px) {
  .psv-page .tq-shell {
    width: min(620px, calc(100% - 28px));
    padding-inline: 14px;
  }
}

/* The Technology deck reads on the same column as every other chapter: the
   content shell, and the deck inset that puts its first letter on the hero's
   left edge. The earlier rule zeroed that inset and moved the whole deck 48 px
   to the left of System and of its own opening. */
.technology-page .psv-page .tq-shell {
  width: var(--psv-shell-content);
}

@media (forced-colors: active) {
  .tq-dim-register a[aria-current="step"] {
    text-decoration-line: underline;
    text-decoration-color: Highlight;
    text-decoration-thickness: 2px;
    text-underline-offset: .32em;
  }
}

/* ---- phone: dimensions and architecture read as one flowing document --- */
@media (max-width: 760px) {
  .tq-dim,
  .tq-dim.is-current {
    display: block;
    animation: none;
  }

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

  /* A two-column head whose ordinal is hidden leaves the title in the narrow
     column, wrapping one word per line. */
  .tq-dim-stage-head {
    display: block;
    margin-bottom: 10px;
  }

  /* fit-content plus a 24ch cap is a desktop measure; in a 319px column it
     shrink-wraps the title to its longest word and stacks the rest. */
  .tq-dim-stage-head h3 {
    width: auto;
    max-width: none;
  }

  .tq-dim-register,
  .tq-dimension-code {
    display: none;
  }

  /* The content shell was standardised to the desktop column (padding 0,
     shell-content width); on a phone that puts the reading at 16px while the
     opening statement sits at 28px. Same box as the hero shell instead. */
  .technology-page .psv-page .tq-shell,
  .psv-page .tq-shell {
    width: min(620px, calc(100% - 28px));
    padding-inline: 14px;
    box-sizing: border-box;
  }

  /* Three term columns in 375px give each one 90px; the terms wrapped to
     three lines apiece and sat 170px off the reading's left edge. */
  .tq-term-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

}

/* ── The proof pages that moved here from System. The content is theirs; the
   measure is this route's. Technology reads in one 1180px column, rules its
   lists with the accent line, sets its rows compact and its copy at 13px,
   and paints every title with the shared heading ramp. What follows brings
   the moved pages onto that standard. It is keyed to this route only: the
   System page still owns these classes for its own lifecycle scene, and its
   own composition is untouched. ── */

body[data-page="technology"] .iq-capabilities {
  border-top: 1px solid var(--tq-rule-strong);
}

body[data-page="technology"] .iq-capabilities > div {
  /* The claim column is widened so the longest Turkish figure fits on one
     line; the drawing gives up the width. Gap and padding are the core
     list's, so the rows sit on the same rhythm as the technologies above. */
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr) clamp(140px, 13vw, 180px);
  gap: clamp(16px, 3vw, 48px);
  padding: calc(16 * var(--psv-u)) 0 calc(18 * var(--psv-u));
  border-bottom: 1px solid var(--tq-rule);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  body[data-page="technology"] .iq-capabilities > div {
    grid-template-columns: minmax(calc(260 * var(--psv-u)), .62fr) minmax(0, 1.38fr) clamp((140 * var(--psv-u)), (199.68 * var(--psv-u)), (180 * var(--psv-u)));
    gap: clamp((16 * var(--psv-u)), (46.08 * var(--psv-u)), (48 * var(--psv-u)));
  }
}
/* desktop-scale:end */

body[data-page="technology"] .iq-capabilities dt {
  gap: calc(6 * var(--psv-u));
}

body[data-page="technology"] .iq-capabilities dt strong {
  /* The figure keeps its display size and takes the route's heading ramp.
     Breaking anywhere split "GERÇEKLEŞEN" into "GERÇEKLEŞ / EN"; with the
     wider column it no longer needs to break at all. The paint box lends
     room for the Turkish ink below the baseline and takes it back. */
  overflow-wrap: normal;
  color: transparent;
  background: var(--tq-heading-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: .14em .18em;
  margin-block: -.14em -.18em;
}

body[data-page="technology"] .iq-capabilities dt span {
  color: var(--tq-soft);
  font-size: var(--psv-ui-label);
  line-height: 1.35;
}

body[data-page="technology"] .iq-capabilities dd {
  color: var(--tq-copy);
  font-size: var(--psv-ui-control);
  line-height: 1.55;
}

@media (max-width: 760px) {
  body[data-page="technology"] .iq-capabilities > div {
    /* The three columns carry hard floors -- 260px for the claim, 140px for
       the drawing -- so below the reflow boundary they add up to more than the
       screen and the page scrolls sideways. System already collapses this row
       to one column at its own breakpoint, but the route override above
       outranks that rule, so the decision has to be repeated here at the same
       weight. The drawing keeps System's ceiling so it does not stretch the
       full width of the single column. */
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* The active verdict's card sits on the page's own ground, no rule above it. */