/* Quantsion System · Institutional editorial system
   Flat surfaces, clear hierarchy, fine rules, no ornamental graphics. */

/* The proof pages moved to Technology and take their .iq-* rules with them;
   this stylesheet is loaded on both routes, so the tokens those rules read
   are defined for both. */
body[data-page="system"],
body[data-page="technology"] {
  --iq-bg: var(--psv-bg);
  --iq-bg-alt: var(--psv-bg-alt);
  --iq-ink: var(--psv-text);
  --iq-copy: var(--psv-copy);
  --iq-muted: var(--psv-muted);
  --iq-accent: var(--psv-accent);
  --iq-line: rgb(var(--psv-accent-rgb) / .14);
  --iq-line-strong: rgb(var(--psv-accent-rgb) / .25);
  --iq-ink-soft: #24384f;
  --iq-ink-mist: #2b4159;
  --iq-ink-haze: #2a3f56;
  --iq-beam-rgb: 118 200 239;
  --iq-beam2-rgb: 122 192 231;
  --iq-beam3-rgb: 55 148 195;
}

.system-institutional {
  background: var(--iq-bg);
}

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

body[data-page="system"] .menu-toggle {
  border-radius: calc(2 * var(--psv-u));
  transition: none;
}

body[data-page="system"] .menu-toggle {
  background: transparent;
}

body[data-page="system"] .site-footer {
  border-top-color: var(--iq-line);
  background: var(--iq-bg);
}

.system-institutional .psv-page {
  position: relative;
  border-top: 0;
  background: var(--iq-bg);
}

.system-institutional .iq-page-advantage {
  background: var(--iq-bg-alt);
}

.iq-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-top: 0;
  border-top: 1px solid var(--iq-line);
}

.iq-comparison > article,
.iq-approach > article {
  padding: 34px clamp(32px, 4vw, 54px) 18px 0;
  border-bottom: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-comparison > article,
  .iq-approach > article {
    padding: calc(34 * var(--psv-u)) clamp((32 * var(--psv-u)), (61.44 * var(--psv-u)), (54 * var(--psv-u))) calc(18 * var(--psv-u)) 0;
  }
}
/* desktop-scale:end */

.iq-comparison > article + article {
  padding-right: 0;
  padding-left: clamp(32px, 4vw, 54px);
  border-left: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-comparison > article + article {
    padding-left: clamp((32 * var(--psv-u)), (61.44 * var(--psv-u)), (54 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-comparison article > header,
.iq-approach article > header {
  min-height: calc(88 * var(--psv-u));
}

.iq-comparison article > header h2,
.iq-approach article > header h2 {
  margin: 0;
  color: var(--iq-ink);
  font-size: var(--psv-title-compact-size);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.12;
  letter-spacing: var(--psv-track-tight);
}

.iq-approach-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--iq-line);
}

.iq-approach-list li {
  display: grid;
  grid-template-columns: calc(36 * var(--psv-u)) 1fr;
  gap: calc(16 * var(--psv-u));
  padding: calc(22 * var(--psv-u)) 0;
  border-bottom: 1px solid var(--iq-line);
}

.iq-approach-list li:last-child {
  border-bottom: 0;
}

.iq-approach-list li > span {
  padding-top: calc(5 * var(--psv-u));
}

.iq-human {
  display: grid;
  grid-template-columns: minmax(calc(230 * var(--psv-u)), .42fr) minmax(0, .58fr);
  gap: clamp(50px, 8vw, 110px);
  margin-top: clamp(100px, 10vw, 136px);
  padding: 30px 0 clamp(72px, 8vw, 104px);
  border-top: 1px solid var(--iq-line-strong);
  border-bottom: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-human {
    gap: clamp((50 * var(--psv-u)), (122.88 * var(--psv-u)), (110 * var(--psv-u)));
    margin-top: clamp((100 * var(--psv-u)), (153.6 * var(--psv-u)), (136 * var(--psv-u)));
    padding: calc(30 * var(--psv-u)) 0 clamp((72 * var(--psv-u)), (122.88 * var(--psv-u)), (104 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-human > header h2 {
  margin: 0;
  max-width: 14ch;
  color: var(--iq-ink);
  font-size: var(--psv-title-size);
  font-weight: var(--psv-title-weight);
  line-height: var(--psv-title-leading);
  letter-spacing: var(--psv-title-tracking);
}

.iq-human-copy {
  display: grid;
  gap: calc(30 * var(--psv-u));
}

.iq-human-copy .iq-statement {
  padding: calc(22 * var(--psv-u)) 0 calc(22 * var(--psv-u)) calc(24 * var(--psv-u));
  border-left: 2px solid var(--iq-accent);
  color: var(--iq-ink-soft);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.35;
  letter-spacing: -.02em;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-human-copy .iq-statement {
    font-size: clamp((20 * var(--psv-u)), (30.72 * var(--psv-u)), (27 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-thesis {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(calc(300 * var(--psv-u)), .58fr);
  gap: clamp(54px, 8vw, 112px);
  align-items: end;
  margin-top: clamp(82px, 9vw, 122px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-thesis {
    gap: clamp((54 * var(--psv-u)), (122.88 * var(--psv-u)), (112 * var(--psv-u)));
    margin-top: clamp((82 * var(--psv-u)), (138.24 * var(--psv-u)), (122 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-thesis p {
  margin: 0;
}

.iq-thesis p:first-child {
  max-width: 24ch;
  color: var(--iq-ink);
  font-size: clamp(30px, 3.5vw, 47px);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.12;
  letter-spacing: var(--psv-track-tighter);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-thesis p:first-child {
    font-size: clamp((30 * var(--psv-u)), (53.76 * var(--psv-u)), (47 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-thesis p:last-child {
  padding-top: calc(20 * var(--psv-u));
  border-top: 1px solid var(--iq-line-strong);
  color: var(--iq-copy);
  font-size: calc(16 * var(--psv-u));
  line-height: 1.72;
}

.iq-paradigm-line {
  margin: calc(28 * var(--psv-u)) 0 0;
  padding-top: calc(20 * var(--psv-u));
  border-top: 1px solid var(--iq-line);
  color: var(--iq-copy);
  font-size: var(--psv-ui-copy-lg);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.65;
  letter-spacing: var(--psv-track-flat);
}

.iq-approach-list li > span,
.iq-ledger li > span,
.iq-lifecycle li > span {
  color: var(--iq-muted);
  font-family: var(--psv-font-mono);
  font-size: var(--psv-ui-nano);
  line-height: 1;
  letter-spacing: var(--psv-track-meta);
}

.iq-approach-list p,
.iq-ledger li > p:last-child,
.iq-human-copy > p {
  margin: 0;
  color: var(--iq-copy);
  font-size: var(--psv-ui-copy-lg);
  line-height: 1.78;
}

.iq-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--iq-line-strong);
}

.iq-ledger li {
  display: grid;
  grid-template-columns: calc(52 * var(--psv-u)) minmax(calc(170 * var(--psv-u)), .55fr) minmax(calc(220 * var(--psv-u)), .78fr) minmax(calc(280 * var(--psv-u)), 1.15fr);
  gap: clamp(22px, 3.5vw, 48px);
  align-items: start;
  padding: calc(30 * var(--psv-u)) 0 calc(34 * var(--psv-u));
  border-bottom: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-ledger li {
    gap: clamp((22 * var(--psv-u)), (53.76 * var(--psv-u)), (48 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-ledger li > span {
  padding-top: calc(6 * var(--psv-u));
}

.iq-ledger h3 {
  margin: 0;
  color: var(--iq-ink);
  font-size: var(--psv-ui-value);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.35;
}

.iq-ledger .iq-principle {
  margin: 0;
  color: var(--iq-ink-mist);
  font-size: calc(16 * var(--psv-u));
  font-weight: var(--psv-weight-semibold);
  line-height: 1.55;
}

.iq-definition {
  margin-top: clamp(104px, 11vw, 150px);
  padding: calc(34 * var(--psv-u)) 0 0;
  border-top: 1px solid var(--iq-line-strong);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-definition {
    margin-top: clamp((104 * var(--psv-u)), (168.96 * var(--psv-u)), (150 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-definition p {
  margin: 0;
  max-width: 31ch;
  color: var(--iq-ink);
  font-size: clamp(29px, 3.3vw, 43px);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.28;
  letter-spacing: -.035em;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-definition p {
    font-size: clamp((29 * var(--psv-u)), (50.688 * var(--psv-u)), (43 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-capabilities {
  margin: 0;
  border-top: 1px solid var(--iq-line-strong);
}

.iq-capabilities > div {
  display: grid;
  grid-template-columns: minmax(230px, .52fr) minmax(0, 1.48fr) clamp(150px, 15vw, 200px);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  padding: calc(30 * var(--psv-u)) 0 calc(34 * var(--psv-u));
  border-bottom: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-capabilities > div {
    grid-template-columns: minmax(calc(230 * var(--psv-u)), .52fr) minmax(0, 1.48fr) clamp((150 * var(--psv-u)), (230.4 * var(--psv-u)), (200 * var(--psv-u)));
    gap: clamp((30 * var(--psv-u)), (76.8 * var(--psv-u)), (72 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-capabilities dt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(10 * var(--psv-u));
  align-content: start;
  min-width: 0;
}

.iq-capabilities dt strong {
  color: var(--iq-ink);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: var(--psv-weight-semibold);
  line-height: 1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-capabilities dt strong {
    font-size: clamp((27 * var(--psv-u)), (46.08 * var(--psv-u)), (40 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-capabilities dt span {
  color: var(--iq-muted);
  font-size: var(--psv-ui-control);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.45;
}

.iq-capabilities dd {
  margin: 0;
  max-width: 73ch;
  color: var(--iq-copy);
  font-size: var(--psv-ui-copy-lg);
  line-height: 1.78;
}

/* ── Institutional intelligence: one price, read four ways, then the layers
   beneath it. The un-gated CSS is the linear document (phone and fallback);
   the controller's data-step-ready turns it into one staged screen. ── */
.iq-source {
  position: relative;
  display: grid;
  gap: calc(28 * var(--psv-u));
  width: 100%;
}

.iq-source-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.iq-source-copy {
  position: relative;
  z-index: 1;
}

/* The story's statements speak in the closing sentence's voice (the hero face at
   weight 500, brand navy), whole, under the scene label; the price word keeps the
   logo blue (owner, 12 Oct 2026). */
.iq-source-text {
  max-width: 62ch;
  margin: 0;
  color: var(--psv-brand);
  font-family: var(--psv-font-hero);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: var(--psv-editorial-title-weight);
  line-height: 1.16;
  letter-spacing: var(--psv-editorial-title-tracking);
  word-spacing: var(--psv-editorial-title-word-spacing);
  text-wrap: pretty;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-source-text {
    font-size: clamp((20 * var(--psv-u)), (33.792 * var(--psv-u)), (32 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-source-note {
  max-width: 84ch;
  margin: calc(12 * var(--psv-u)) 0 0;
  color: var(--psv-muted);
  font-family: var(--psv-font-editorial);
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.6;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-source-note {
    font-size: max(var(--psv-text-floor), clamp((14 * var(--psv-u)), (16.896 * var(--psv-u)), (15 * var(--psv-u))));
  }
}
/* desktop-scale:end */

.iq-source-chart {
  height: clamp(160px, 26vh, 240px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-source-chart {
    height: clamp((160 * var(--psv-u)), (189.8 * var(--psv-u)), (240 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-source-readings {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 calc(22 * var(--psv-u));
  margin: 0;
  border-top: 1px solid var(--iq-line-strong);
}

.iq-source-reading {
  padding: calc(16 * var(--psv-u)) 0 calc(18 * var(--psv-u));
  border-bottom: 1px solid var(--iq-line);
}

.iq-source-reading dt {
  color: var(--psv-muted);
  font-family: var(--psv-font-mono);
  font-size: var(--psv-ui-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Each reading: the formula leads with its source word lit, the reading's
   own line follows, the value closes. */
.iq-source-reading dd {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.iq-source-reading strong {
  order: 3;
  display: block;
  margin-top: calc(10 * var(--psv-u));
  color: var(--psv-muted);
  font-family: var(--psv-font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-source-reading strong {
    font-size: clamp((18 * var(--psv-u)), (23.04 * var(--psv-u)), (22 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-source-formula {
  order: 1;
  display: block;
  margin-top: calc(16 * var(--psv-u));
  color: var(--tq-text);
  font-family: var(--psv-font-mono);
  font-size: clamp(13px, .94vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-source-formula {
    font-size: max(var(--psv-text-floor), clamp((13 * var(--psv-u)), (14.4384 * var(--psv-u)), (16 * var(--psv-u))));
  }
}
/* desktop-scale:end */

.iq-source-spark {
  order: 2;
  display: block;
  height: calc(38 * var(--psv-u));
  margin-top: calc(12 * var(--psv-u));
}

.iq-price-word {
  color: var(--psv-logo-blue);
}

.iq-source-depth {
  position: relative;
  height: clamp(240px, 40vh, 360px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-source-depth {
    height: clamp((240 * var(--psv-u)), (292 * var(--psv-u)), (360 * var(--psv-u)));
  }
}
/* desktop-scale:end */

/* ── Step 3: the curtain scene. Its motion (price, the layers opening and
   closing, the ray) comes from the approved prototype
   (design/candidates/system-curtain-premium). Since 30 September it is drawn in
   the home readings' language (design/candidates/system-curtain-light, v9): a
   white card, navy price and type, each layer a strip of cells between a name
   column and a note column, green and red for a layer's push on price. The
   scene writes the rows' and columns' geometry (--band-*, --field-*). ── */
.iq-curtain-stage {
  position: relative;
}

.iq-curtain-stage .iq-source-text {
  max-width: 62ch;
}

.iq-curtain {
  --pad: calc(20 * var(--psv-u));
  --curtain-up: #0d9488;
  --curtain-down: #dd4b45;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(256px, calc(48vw - 94px), 416px);
  min-height: calc(256 * var(--psv-u));
  margin-top: clamp(32px, 5vh, 54px);
  overflow: hidden;
  border: 1px solid #dbe3ee;
  background: #ffffff;
  color: #132d58;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-curtain {
    height: clamp((256 * var(--psv-u)), calc((737.28 * var(--psv-u)) - (94 * var(--psv-u))), (416 * var(--psv-u)));
    margin-top: clamp((32 * var(--psv-u)), (36.5 * var(--psv-u)), (54 * var(--psv-u)));
  }
}
/* desktop-scale:end */

/* Price runs edge to edge, as in the prototype; the card's margin is above and
   below it. */
.iq-curtain-canvas {
  position: absolute;
  top: var(--pad);
  right: 0;
  bottom: var(--pad);
  left: 0;
  width: 100%;
  height: calc(100% - 2 * var(--pad));
}

.iq-curtain-grid { z-index: 1; }
.iq-curtain-behavior { z-index: 2; }
.iq-curtain-focus { z-index: 4; }

.iq-curtain-bands {
  position: absolute;
  top: calc(var(--pad) + var(--band-top, 0px));
  right: 0;
  left: 0;
  z-index: 5;
  display: grid;
  grid-auto-rows: var(--band-h, calc(20 * var(--psv-u)));
  row-gap: var(--band-gap, calc(3 * var(--psv-u)));
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: var(--reveal, 0);
  pointer-events: none;
}

.iq-curtain-bands li {
  display: grid;
  grid-template-columns: var(--field-left, calc(192 * var(--psv-u))) 1fr var(--field-right, calc(198 * var(--psv-u)));
  align-items: center;
  color: #536986;
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 600;
  transition: color .28s ease;
}

.iq-curtain-bands li > span {
  grid-column: 1;
  padding-left: calc(30 * var(--psv-u));
  white-space: nowrap;
}

.iq-curtain-bands em {
  grid-column: 3;
  justify-self: end;
  padding-right: calc(30 * var(--psv-u));
  color: #536986;
  font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
}

/* The layer pushing price now: its name takes the push's colour, up or down. */
.iq-curtain-bands li.is-active {
  color: var(--curtain-up);
}

.iq-curtain-bands li.is-negative {
  color: var(--curtain-down);
}

.iq-curtain-caption {
  position: absolute;
  top: var(--pad);
  left: calc(30 * var(--psv-u));
  z-index: 6;
  color: #132d58;
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 600;
  letter-spacing: .1em;
  pointer-events: none;
}

/* The caption over the layer rows, as "KATMANLAR" sits over the home rows. */
.iq-curtain-caption--layers {
  top: calc(var(--pad) + var(--band-top, 0px) - 17 * var(--psv-u));
  opacity: var(--reveal, 0);
}

.iq-curtain-readout {
  position: absolute;
  top: var(--pad);
  left: 0;
  z-index: 6;
  padding: calc(2 * var(--psv-u)) calc(4 * var(--psv-u));
  background: #ffffff;
  color: #132d58;
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.iq-source-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: calc(-1 * var(--psv-u));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Staged screen: the controller owns the step, CSS owns the composition.
   The section is the sizing reference; the shell and the stage fill it. */
.iq-source-page[data-step-ready] {
  box-sizing: border-box;
  /* the scene label starts where every other scene's starts: 10 u under the header */
  padding-top: 0;
  block-size: calc(100svh - var(--psv-header-height));
  min-block-size: calc(520 * var(--psv-u));
  max-block-size: calc(100svh - var(--psv-header-height));
  overflow: clip;
}

.iq-source-page[data-step-ready] > .site-shell {
  display: flex;
  margin-top: 0;
  padding-top: calc(10 * var(--psv-u));
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.iq-source-page[data-step-ready] .iq-source {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

.iq-source-page[data-step-ready] .iq-source-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: none;
}

.iq-source-page[data-step-ready] .iq-source-chart {
  position: absolute;
  inset: calc(206 * var(--psv-u)) 0 calc(190 * var(--psv-u));
  height: auto;
}

.iq-source-page[data-step-ready] .iq-source-readings {
  position: absolute;
  right: calc(30 * var(--psv-u));
  bottom: calc(16 * var(--psv-u));
  left: calc(30 * var(--psv-u));
  grid-template-columns: repeat(4, 1fr);
  transition: none;
}

.iq-source-page[data-step-ready] .iq-source-reading {
  min-height: calc(118 * var(--psv-u));
  margin-right: calc(22 * var(--psv-u));
  padding: calc(14 * var(--psv-u)) calc(22 * var(--psv-u)) 0 0;
  border-right: 1px solid var(--iq-line);
  border-bottom: 0;
}

.iq-source-page[data-step-ready] .iq-source-reading:last-child {
  margin-right: 0;
  border-right: 0;
}

/* Step 1 on the white card the curtain uses (30 Sep, D-55): same width, same bottom
   edge, the same 1 px #dbe3ee frame. Price starts at the card's edge as in the
   curtain; the readings keep its 30 u text margin. Steps switch at once. */
.iq-source-page[data-step-ready] .iq-source::before {
  content: "";
  position: absolute;
  /* 10 u under the tallest statement (four lines); the curtain frame below sits on the
     same line, so the card holds its place through all four steps */
  top: calc(186 * var(--psv-u));
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #dbe3ee;
  background: #ffffff;
}

.iq-source-page[data-step-ready]:not([data-stage="1"]) .iq-source::before {
  opacity: 0;
}

/* The four readings: the name as the home labels write it (navy, bold, spaced
   capitals), the formula as a code chip with FİYAT lit, the reading's line over a
   light blue area (drawn by the scene), the value in the home measurements' blue. */
.iq-source-page[data-step-ready] .iq-source-reading dt {
  color: #132d58;
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(12 * var(--psv-u)));
  font-weight: 700;
  letter-spacing: .1em;
}

.iq-source-page[data-step-ready] .iq-source-formula {
  align-self: flex-start;
  margin-top: calc(10 * var(--psv-u));
  padding: calc(4 * var(--psv-u)) calc(9 * var(--psv-u));
  border: 1px solid #e3eaf3;
  border-radius: calc(4 * var(--psv-u));
  background: #f5f8fc;
  font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
}

.iq-source-page[data-step-ready] .iq-source-spark {
  height: calc(34 * var(--psv-u));
  margin-top: calc(10 * var(--psv-u));
}

.iq-source-page[data-step-ready] .iq-source-reading strong {
  margin-top: calc(8 * var(--psv-u));
  color: #338cff;
  font-family: var(--psv-font-sans);
  font-size: calc(28 * var(--psv-u));
  font-weight: 500;
  letter-spacing: -.01em;
}

/* Upright tablet: four readings do not fit side by side (names broke into three lines
   and the formula chips ran into each other), so they sit two by two and the chart
   gives up the height they need. */
@media (max-width: 1050px) and (orientation: portrait) {
  .iq-source-page[data-step-ready] .iq-source-chart {
    bottom: 340px;
  }

  .iq-source-page[data-step-ready] .iq-source-readings {
    grid-template-columns: repeat(2, 1fr);
  }

  .iq-source-page[data-step-ready] .iq-source-reading {
    min-height: 0;
    padding-bottom: 12px;
  }

  .iq-source-page[data-step-ready] .iq-source-reading:nth-child(2n) {
    margin-right: 0;
    border-right: 0;
  }

  .iq-source-page[data-step-ready] .iq-source-reading:nth-child(-n + 2) {
    border-bottom: 1px solid var(--iq-line);
  }
}

/* Tablet on its side (below the desktop width): the screen is too short for two rows,
   so the four readings stay side by side, names a touch tighter, formulas free to wrap
   inside their chip. */
@media (max-width: 1050px) and (orientation: landscape) {
  .iq-source-page[data-step-ready] .iq-source-reading dt {
    font-size: 11px;
    letter-spacing: .04em;
  }

  .iq-source-page[data-step-ready] .iq-source-formula {
    font-size: 12px;
    white-space: normal;
  }
}

.iq-source-page[data-step-ready] .iq-source-depth {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 58%;
  height: 46%;
  transition: none;
}

/* Step 3 keeps the prototype's own rhythm inside the staged screen: the copy
   at the top, the frame a fixed breath below it. The frame may give up height
   on a short viewport (flex-shrink), never the fit of the page. */
.iq-source-page[data-step-ready] .iq-curtain-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: none;
}

.iq-source-page[data-step-ready] .iq-curtain-stage .iq-source-copy--4 {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  flex: 0 0 auto;
  transition: none;
}

.iq-source-page[data-step-ready] .iq-curtain {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  margin-top: calc(10 * var(--psv-u));
}

/* Steps 2, 3 and 4 share the curtain: the statements sit in one cell above the
   frame, so the frame holds its place while the copy changes. */
.iq-source-page[data-step-ready] .iq-curtain-copy {
  display: grid;
  flex: 0 0 auto;
}

.iq-source-page[data-step-ready] .iq-curtain-copy > .iq-source-copy {
  position: relative;
  top: auto;
  left: auto;
  grid-area: 1 / 1;
}

.iq-source-page[data-step-ready]:not([data-stage="1"]) .iq-source-copy--1,
.iq-source-page[data-step-ready]:not([data-stage="2"]) .iq-source-copy--2,
.iq-source-page[data-step-ready]:not([data-stage="3"]) .iq-source-copy--3,
.iq-source-page[data-step-ready]:not([data-stage="4"]) .iq-source-copy--4,
.iq-source-page[data-step-ready][data-stage="1"] .iq-curtain-stage {
  opacity: 0;
  transform: translateY(calc(10 * var(--psv-u)));
  pointer-events: none;
}

.iq-source-page[data-step-ready]:not([data-stage="1"]) .iq-source-readings {
  opacity: 0;
  transform: translateY(calc(16 * var(--psv-u)));
  pointer-events: none;
}

.iq-source-page[data-step-ready][data-stage="1"] .iq-source-depth {
  opacity: 0;
  transform: translateY(calc(16 * var(--psv-u)));
}

@media (forced-colors: active) {
  .iq-source-chart,
  .iq-source-depth,
  .iq-curtain {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iq-source-page[data-step-ready] .iq-source-copy,
  .iq-source-page[data-step-ready] .iq-source-readings,
  .iq-source-page[data-step-ready] .iq-source-readings,
  .iq-source-page[data-step-ready] .iq-source-depth,
  .iq-source-page[data-step-ready] .iq-curtain-stage,
  .iq-curtain-bands li {
    transition: none;
  }
}

@media (max-width: 760px) {
  .iq-source {
    gap: 22px;
  }

  .iq-source-chart {
    height: 180px;
  }

  .iq-source-depth {
    height: 420px;
  }

  .iq-curtain {
    --pad: 14px;
    height: 462px;
    margin-top: 22px;
  }

  .iq-curtain-caption {
    left: 12px;
  }

  .iq-curtain-bands li {
    font-size: 10px;
  }

  .iq-curtain-bands li > span {
    padding-left: 12px;
  }

  .iq-curtain-bands em {
    display: none;
  }

  .iq-source-formula {
    white-space: normal;
  }

  /* Phones read the four readings in the same hand as the desktop card (D-55). */
  .iq-source-reading dt {
    color: #132d58;
    font-family: var(--psv-font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
  }

  .iq-source-formula {
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 8px;
    border: 1px solid #e3eaf3;
    border-radius: 4px;
    background: #f5f8fc;
    font-size: 12px;
  }

  .iq-source-reading strong {
    margin-top: 8px;
    color: #338cff;
    font-family: var(--psv-font-sans);
    font-size: 26px;
    letter-spacing: -.01em;
  }
}

.iq-active {
  margin-top: clamp(112px, 12vw, 166px);
  padding-top: calc(30 * var(--psv-u));
  border-top: 1px solid var(--iq-line-strong);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-active {
    margin-top: clamp((112 * var(--psv-u)), (184.32 * var(--psv-u)), (166 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-lifecycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(68px, 7vw, 92px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--iq-line-strong);
  border-bottom: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-lifecycle {
    margin: clamp((68 * var(--psv-u)), (107.52 * var(--psv-u)), (92 * var(--psv-u))) 0 0;
  }
}
/* desktop-scale:end */

.iq-lifecycle li {
  min-height: calc(156 * var(--psv-u));
  padding: 24px clamp(20px, 2.5vw, 32px) 28px;
  border-right: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-lifecycle li {
    padding: calc(24 * var(--psv-u)) clamp((20 * var(--psv-u)), (38.4 * var(--psv-u)), (32 * var(--psv-u))) calc(28 * var(--psv-u));
  }
}
/* desktop-scale:end */

.iq-lifecycle li:last-child {
  border-right: 0;
}

.iq-lifecycle strong {
  display: block;
  margin-top: calc(38 * var(--psv-u));
  color: var(--iq-ink);
  font-size: calc(17 * var(--psv-u));
  font-weight: var(--psv-weight-semibold);
}

.iq-lifecycle small {
  display: block;
  margin-top: calc(7 * var(--psv-u));
  color: var(--iq-muted);
  font-size: var(--psv-ui-label);
  line-height: 1.45;
}

.iq-lifecycle-conditional > span {
  color: var(--iq-accent);
}

.iq-active-statement {
  margin: clamp(64px, 7vw, 96px) 0 0 auto;
  max-width: 27ch;
  padding-left: calc(24 * var(--psv-u));
  border-left: 2px solid var(--iq-accent);
  color: var(--iq-ink);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: var(--psv-weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--psv-track-tight);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-active-statement {
    margin: clamp((64 * var(--psv-u)), (107.52 * var(--psv-u)), (96 * var(--psv-u))) 0 0 auto;
    font-size: clamp((24 * var(--psv-u)), (43.008 * var(--psv-u)), (36 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-page-closing h2 {
  margin: 0;
  max-width: 19ch;
  color: var(--iq-ink);
  font-size: var(--psv-closing-size);
  font-weight: var(--psv-weight-semibold);
  line-height: .98;
  letter-spacing: var(--psv-track-display-lg);
  text-wrap: balance;
}

.iq-next {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(60px, 7vw, 88px);
  border-top: 1px solid var(--iq-line-strong);
  border-bottom: 1px solid var(--iq-line);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-next {
    margin-top: clamp((60 * var(--psv-u)), (107.52 * var(--psv-u)), (88 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-next a {
  min-width: calc(220 * var(--psv-u));
  padding: calc(19 * var(--psv-u)) calc(28 * var(--psv-u));
  border-right: 1px solid var(--iq-line);
  color: var(--iq-ink-haze);
  font-size: var(--psv-ui-control);
  font-weight: var(--psv-weight-semibold);
  letter-spacing: var(--psv-track-snug);
  transition: none;
}

.iq-next a:hover,
.iq-next a:focus-visible {
  color: var(--iq-ink);
  background: rgb(var(--psv-mist-rgb) / .06);
}

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

@media (max-width: 1024px) {
  .system-institutional .iq-section > .container.wide,
  .system-institutional .iq-closing > .container.wide {
    width: var(--psv-shell-content);
  }

  .iq-thesis {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .iq-comparison {
    grid-template-columns: 1fr;
  }

  .iq-comparison > article,
  .iq-comparison > article + article {
    padding: 34px 0 20px;
    border-left: 0;
  }

  .iq-comparison > article + article {
    border-top: 1px solid var(--iq-line-strong);
  }

  .iq-comparison article > header {
    min-height: 0;
    margin-bottom: 28px;
  }

  .iq-human {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .iq-human-copy {
    margin-top: 0;
  }

  .iq-ledger li {
    grid-template-columns: 42px minmax(160px, .42fr) minmax(0, .58fr);
  }

  .iq-ledger li > p:last-child {
    grid-column: 2 / -1;
  }

  .iq-capabilities > div {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .system-institutional .iq-section {
    padding: var(--psv-section-space) 0;
  }

  .system-institutional .iq-section > .container.wide,
  .system-institutional .iq-closing > .container.wide {
    width: var(--psv-shell-content);
  }

  .iq-human {
    margin-top: 80px;
    padding-bottom: 72px;
  }

  .iq-human > header h2 {
    font-size: var(--psv-title-size);
  }

  .iq-thesis p:first-child {
    font-size: clamp(29px, 8.8vw, 39px);
  }

  .iq-ledger li {
    grid-template-columns: 34px 1fr;
    gap: 16px;
    padding: 26px 0 30px;
  }

  .iq-ledger h3,
  .iq-ledger .iq-principle,
  .iq-ledger li > p:last-child {
    grid-column: 2;
  }

  .iq-definition {
    margin-top: 82px;
  }

  .iq-definition p {
    font-size: clamp(27px, 8.5vw, 36px);
  }

  .iq-capabilities dt {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .iq-capabilities dt strong {
    font-size: clamp(29px, 9vw, 38px);
  }

  .iq-active {
    margin-top: 92px;
  }

  .iq-lifecycle {
    grid-template-columns: 1fr 1fr;
  }

  .iq-lifecycle li:nth-child(2) {
    border-right: 0;
  }

  .iq-lifecycle li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--iq-line);
  }

  .iq-active-statement {
    margin-left: 0;
  }

  .iq-closing {
    min-height: 0;
    padding: var(--psv-closing-space) 0;
  }

  .iq-closing h2 {
    font-size: var(--psv-closing-size);
  }

  .iq-next {
    flex-direction: column;
  }

  .iq-next a {
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--iq-line);
  }

  .iq-next a:last-child {
    border-bottom: 0;
  }
}

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

/* Opening question. The section carries the canonical hero contract from
   site-components.css; only the field behind it and the line breaks inside
   the question are specific to this page. */
.system-paradigm {
  position: relative;
}

.paradigm-question .question-emphasis {
  color: inherit;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .paradigm-question .question-emphasis {
    white-space: normal;
  }
}

/* ---- deck sub-pages -------------------------------------------------- */

/* Alone on a page, an approach is given the room the comparison could not. */
.iq-approach > article {
  max-width: var(--psv-measure-heading-wide);
}

.iq-approach article > header h2 {
  font-size: var(--psv-stage-title-size);
}

/* The extra room a wide screen has is spent on the type; a phone has none. */
@media (min-width: 901px) {
  .iq-approach .iq-approach-list p {
    font-size: var(--psv-stage-copy-size);
  }
}

/* One advantage per page: the ledger row becomes the page. */
.iq-ledger--single {
  border-top: 0;
}

.iq-ledger--single li {
  grid-template-columns: calc(64 * var(--psv-u)) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px) clamp(24px, 3.4vw, 46px);
  padding: 0;
  border-bottom: 0;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-ledger--single li {
    gap: clamp((20 * var(--psv-u)), (39.936 * var(--psv-u)), (34 * var(--psv-u))) clamp((24 * var(--psv-u)), (52.224 * var(--psv-u)), (46 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.iq-ledger--single h3 {
  grid-column: 2;
  font-size: var(--psv-stage-title-size);
}

.iq-ledger--single .iq-principle {
  grid-column: 2;
  max-width: var(--psv-measure-heading);
  font-size: var(--psv-stage-copy-size);
}

.iq-ledger--single li > p:last-child {
  grid-column: 2;
  max-width: var(--psv-measure-prose);
}

.iq-ledger--single li > span {
  grid-row: span 3;
}

.iq-page-definition .iq-definition {
  margin: 0;
}

/* The lifecycle is the whole page, not a coda to the one above it. */
.iq-page-turn .iq-thesis,
.psv-page .iq-active {
  margin-top: 0;
}

.psv-page .iq-human,
.psv-page .iq-definition {
  margin-top: 0;
}

@media (max-width: 900px) {
  .iq-ledger--single li {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

/* ---- phone: the ledger reads as one column ----------------------------- */
/* The four-column ruling pushed its headings to x=100 in a 375px viewport;
   the row numbers follow the site's other numbering off the phone. */
@media (max-width: 760px) {
  /* Block flow, not a narrower grid: three widths of column ruling fight
     over this list above 760px, and every one of them indents the reading.
     A phone gets plain prose. */
  .iq-ledger li,
  .iq-ledger--single li {
    display: block;
  }

  .iq-ledger li > span {
    display: none;
  }

  .iq-ledger li > h3 {
    margin-bottom: 8px;
  }

  .iq-ledger li > p {
    margin-top: 8px;
  }

  .iq-approach-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .iq-approach-list li > span {
    display: none;
  }

  /* Four cells across becomes two at 720px and still puts the third and
     fourth readings 160px off the left edge. One per row on a phone. */
  .iq-lifecycle {
    grid-template-columns: minmax(0, 1fr);
  }

  .iq-lifecycle li {
    min-height: 0;
    padding: 20px 0;
    border-right: 0;
  }

  .iq-lifecycle li > span {
    display: none;
  }

  .iq-lifecycle strong {
    margin-top: 0;
  }

  /* 68px of air belonged to the diagram's stage presence; stacked it is just
     a hole between the section mark and the first entry. */
  .iq-lifecycle {
    margin-top: 28px;
  }

  /* The links were a horizontal band, so each carried a 28px side inset. In a
     vertical list that inset pushes every label off the page's left edge. */
  .iq-next a {
    padding-inline: 0;
  }
}

/* desktop-scale:end */

/* desktop-scale:end */