@layer psv-components {
  /* A deck page is read one screen at a time. Every sub-page fills the space
     under the header and carries a snap point, so one wheel notch or one swipe
     advances exactly one sub-page and never rests between two. The marker is
     set on <html> by deck-navigation.js from what is actually rendered, so the single-file
     build -- which keeps every route in the document -- behaves the same. */
  /* CSS snapping is deliberately not used here. With `mandatory` the browser
     absorbs a small wheel delta and returns to the point it came from, so one
     notch moved nothing; with `proximity` the landing is not guaranteed. The
     deck is driven from deck-navigation.js instead, which behaves the same for a wheel, a
     trackpad and a finger, and leaves the footer reachable. */
  html[data-deck] {
    scroll-padding-top: var(--psv-header-height);
  }

  /* One content column for the whole deck. The opening statement sits inside
     the primary shell's padding, so a sub-page has to carry the same inset or
     the chapter would start at one left edge and continue at another. */
  .psv-page > .site-shell,
  .psv-page > .tq-shell,
  .psv-page > .sq-shell,
  .psv-page > .rx-shell,
  .psv-page > .tq-panel-shell {
    padding-inline: clamp(42px, 3.25vw, 48px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .psv-page > .site-shell,
      .psv-page > .tq-shell,
      .psv-page > .sq-shell,
      .psv-page > .rx-shell,
      .psv-page > .tq-panel-shell {
      padding-inline: clamp((42 * var(--psv-u)), (49.92 * var(--psv-u)), (48 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .psv-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--psv-header-height));
    padding-block: var(--psv-page-air);
  }

  /* A phone reads top to bottom. One-screen-one-step is a pointer affordance:
     on touch it held short sub-pages open to 250px of dead air under centred
     content, and pushed long ones (technology's core ran 478px past the
     viewport) out of reach. Height follows the content there, and the shared
     page air carries the rhythm. Desktop keeps the deck untouched. */
  @media (max-width: 760px) {
    .psv-page {
      justify-content: flex-start;
      min-height: 0;
    }

    html[data-deck-mode="reflow"] body[data-scene-contract] .psv-page,
    html:not(.js) body[data-scene-contract] .psv-page {
      min-block-size: 0;
    }

    /* The "03 / 19" counter tells the reader how deep into a deck they are.
       A phone is not reading a deck, so it counts nothing there. */
    .psv-page-mark span + span {
      display: none;
    }
  }

  /* F1.4 scene contract. A route may contain many scenes, but every scene on
     the normal acceptance profiles owns exactly the visual viewport below the
     sticky header. Long information is split into another scene or an explicit
     in-place step; cards never become a second vertical page. */
  body[data-scene-contract] {
    --psv-scene-block: calc(100svh - var(--psv-header-height));
    --psv-scene-pad-block: clamp(24px, 4svh, 38px);
    --psv-scene-gap: clamp(16px, 2.4svh, 26px);
    --psv-control-min-block: max(44px, calc(44 * var(--psv-u)));
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    body[data-scene-contract] {
      --psv-scene-pad-block: clamp((24 * var(--psv-u)), (29.2 * var(--psv-u)), (38 * var(--psv-u)));
      --psv-scene-gap: clamp((16 * var(--psv-u)), (17.52 * var(--psv-u)), (26 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  html[data-deck-mode="strict"] body[data-scene-contract] .site-primary-hero,
  html[data-deck-mode="strict"] body[data-scene-contract] .psv-page {
    block-size: var(--psv-scene-block);
    min-block-size: var(--psv-scene-block);
    max-block-size: var(--psv-scene-block);
    overflow: clip;
  }

  html[data-deck-mode="strict"] body[data-scene-contract] .psv-page {
    justify-content: stretch;
    padding-block: var(--psv-scene-pad-block);
  }

  .scene-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    min-block-size: 0;
    block-size: 100%;
    gap: var(--psv-scene-gap);
  }

  .scene-shell--single {
    grid-template-rows: minmax(0, 1fr);
  }

  .scene-body {
    min-block-size: 0;
  }

  .scene-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: var(--psv-control-min-block);
    gap: calc(14 * var(--psv-u));
  }

  .scene-register {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--psv-u));
  }

  .scene-register button {
    min-block-size: var(--psv-control-min-block);
  }

  .scene-panel[hidden] {
    display: none !important;
  }

  /* At real browser zoom, with an on-screen keyboard, or in an exceptionally
     short landscape viewport, preserving natural text size outranks the deck.
     The whole route reflows and the controller releases all vertical input.
     Inner vertical scrolling remains forbidden. */
  html[data-deck-mode="reflow"] body[data-scene-contract] .site-primary-hero,
  html[data-deck-mode="reflow"] body[data-scene-contract] .psv-page,
  html:not(.js) body[data-scene-contract] .site-primary-hero,
  html:not(.js) body[data-scene-contract] .psv-page {
    block-size: auto;
    min-block-size: var(--psv-scene-block);
    max-block-size: none;
    overflow: visible;
  }

  html[data-deck-mode="reflow"] body[data-scene-contract] .scene-shell,
  html:not(.js) body[data-scene-contract] .scene-shell {
    block-size: auto;
  }

  /* A sub-page opens with its own quiet position marker: the reader always
     knows how deep into the chapter they are. */
  .psv-page-mark {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--psv-u));
    margin-bottom: var(--psv-page-mark-gap);
    color: var(--psv-accent-pale);
    font-family: var(--psv-font-mono);
    font-size: var(--psv-ui-nano);
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-wide);
    text-transform: uppercase;
  }

  .psv-page-mark::after {
    flex: 1;
    height: var(--psv-border);
    content: "";
    background: rgb(var(--psv-line-rgb) / .18);
  }

  .site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    height: var(--psv-header-height);
    border-bottom: 0;
    background: var(--psv-header-bg);
  }

  .header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    height: 100%;
    gap: clamp(24px, 4vw, 64px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .header-inner {
      gap: clamp((24 * var(--psv-u)), (61.44 * var(--psv-u)), (64 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .brand {
    display: inline-flex;
    align-items: center;
    min-width: var(--psv-brand-width);
  }

  .brand-logo {
    display: block;
    width: var(--psv-logo-width);
    height: var(--psv-logo-height);
  }

  /* The row is a fixed track sized to the wider language (398px is the
     measured sum of the Turkish uppercase word widths — remeasure if a label
     changes). Words align to its left edge, so the first S sits on the same
     x in both languages, and every word gap is exactly --psv-nav-gap. */
  .primary-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--psv-nav-gap);
    width: calc((398 * var(--psv-u)) + 4 * var(--psv-nav-gap));
    max-width: 100%;
    margin-inline: auto;
  }

  /* Desktop scale: the track is measured for 13px words. Where the text floor
     holds them at 11px (a small desktop at 100 %), it grows with them, so the
     row stays centred. With the unit at 1px and no floor this is the rule
     above, to the pixel. */
  @media (min-width: 1051px) {
    .primary-nav {
      width: calc(398 * max(var(--psv-u), var(--psv-text-floor) / 13) + 4 * var(--psv-nav-gap));
    }
  }

  .primary-nav a,
  .footer-links a {
    position: relative;
    color: var(--psv-copy);
    font-size: var(--psv-ui-control);
    font-weight: var(--psv-weight-medium);
    letter-spacing: .035em;
    transition: color .2s ease;
  }

  /* Labels sit at their natural width, so the gap between neighbouring words
     is exactly --psv-nav-gap for every word, in every language. Switching
     language may shift the row slightly; even word spacing wins. */
  /* The page names are set in the brand navy; the page being read speaks
     in the logo's blue. */
  .primary-nav a[data-page] {
    display: inline-flex;
    color: var(--psv-brand);
    text-transform: uppercase;
    letter-spacing: var(--psv-track-caps);
  }

  /* Owner choice (25 September 2026): on desktop the page names share the
     opening's family -- Inter Medium, capitals, open tracking. The phone menu
     keeps its own style. */
  @media (min-width: 1051px) {
    .primary-nav a[data-page] {
      font-family: "Inter", var(--psv-font-sans);
      font-size: calc(14 * var(--psv-u));
      letter-spacing: .08em;
    }
  }

  .primary-nav a[data-page] > span {
    position: relative;
  }

  .primary-nav a:hover,
  .footer-links a:hover,
  .footer-social a:hover {
    color: var(--psv-text);
  }

  /* The page being read is named in the accent blue; hovering elsewhere only
     brightens the word. No underline anywhere. */
  .primary-nav a.active,
  .primary-nav a[aria-current="page"],
  .primary-nav a.active:hover,
  .primary-nav a[aria-current="page"]:hover {
    color: var(--psv-logo-blue);
  }

  .primary-nav .nav-mobile-cta {
    display: none;
  }

  .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(10 * var(--psv-u));
  }

  .lang-toggle,
  .menu-toggle {
    display: inline-grid;
    place-items: center;
    width: var(--psv-control-size);
    height: var(--psv-control-size);
    padding: 0;
    color: var(--psv-copy);
    font-family: var(--psv-font-mono);
    font-size: var(--psv-ui-label);
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-control);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--psv-radius-xs);
    transition:
      color .2s ease,
      border-color .2s ease,
      background-color .2s ease;
  }

  /* The persistent header controls have one visual owner. Route styles must
     not restyle these borders: doing so makes the retained shell flash while
     incoming and outgoing route stylesheets are reconciled. */
  .lang-toggle {
    color: var(--psv-text);
    border-color: rgb(var(--psv-accent-rgb) / .38);
    border-radius: 0;
  }

  .lang-toggle:hover,
  .menu-toggle:hover {
    color: var(--psv-accent-pale);
    background: var(--psv-panel-soft);
    border-color: var(--psv-accent);
  }

  /* One header treatment across the site. The action is stated, not shouted:
     there is nothing to buy yet, and the narrative pages set the tone. */
  .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--psv-control-size);
    min-width: var(--psv-nav-w-action);
    padding-inline: calc(17 * var(--psv-u));
    color: var(--psv-text);
    font-size: var(--psv-ui-chip);
    font-weight: var(--psv-weight-semibold);
    letter-spacing: .03em;
    background: transparent;
    border: 1px solid rgb(var(--psv-accent-rgb) / .38);
    border-radius: 0;
    transition:
      color .2s ease,
      background-color .2s ease,
      border-color .2s ease;
  }

  .header-cta:hover {
    color: var(--psv-accent-pale);
    background: var(--psv-panel-soft);
    border-color: var(--psv-accent);
  }

  .menu-toggle {
    display: none;
    position: relative;
  }

  /* The two lines meet in the cross by transform alone (no change of top), so the browser
     can run the animation off the main thread and it never stops half-way. */
  .menu-toggle span {
    position: absolute;
    width: calc(17 * var(--psv-u));
    height: 1px;
    background: currentColor;
    transition: transform .24s var(--psv-motion-easing);
  }

  .menu-toggle span:first-child {
    top: calc(18 * var(--psv-u));
  }

  .menu-toggle span:last-child {
    top: calc(25 * var(--psv-u));
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(calc(3 * var(--psv-u))) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(calc(-4 * var(--psv-u))) rotate(-45deg);
  }

  /* while a page change is under way the icon switches without its animation: the page is being
     built then, and an animation that cannot move stopped half-way (owner, 16 Oct 2026) */
  html[data-psv-navigation-busy="true"] .menu-toggle span {
    transition: none;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--psv-u));
    margin-bottom: calc(22 * var(--psv-u));
    color: var(--psv-accent);
    font-family: var(--psv-font-mono);
    font-size: var(--psv-ui-label);
    font-weight: var(--psv-weight-medium);
    line-height: 1.4;
    letter-spacing: var(--psv-track-eyebrow);
  }

  .eyebrow::before {
    width: calc(24 * var(--psv-u));
    height: 1px;
    content: "";
    background: currentColor;
  }

  .section-heading {
    max-width: var(--psv-measure-heading);
    margin-bottom: clamp(48px, 5.5vw, 76px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .section-heading {
      margin-bottom: clamp((48 * var(--psv-u)), (84.48 * var(--psv-u)), (76 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .section-heading--wide {
    max-width: var(--psv-measure-heading-wide);
  }

  .section-heading h2 {
    max-width: 18ch;
    font-size: var(--psv-title-size);
    line-height: var(--psv-title-leading);
    text-wrap: balance;
  }

  .section-heading p {
    max-width: var(--psv-measure-copy);
    margin-top: calc(26 * var(--psv-u));
    font-size: var(--psv-editorial-copy-size);
    line-height: var(--psv-editorial-copy-leading);
  }

  /* Canonical first section. The shell keeps a fixed measure so the title
     lands on the same baseline whether or not an eyebrow and lead are
     present, which is what makes the page openings feel like one system. */
  .site-primary-hero {
    display: flex;
    align-items: flex-start;
    min-height: calc(100svh - var(--psv-header-height));
    padding-block: clamp(80px, 9vw, 112px);
    overflow: hidden;
    isolation: isolate;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .site-primary-hero {
      padding-block: clamp((80 * var(--psv-u)), (138.24 * var(--psv-u)), (112 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  /* A reserved band of fixed height, centred in the hero. Because the band
     does not resize with the statement inside it, the first line lands on the
     same y on every page whatever the statement's length — that is the whole
     point of the contract. A longer statement runs on past the band; it is
     not clipped, because the hero is far taller than the band. */
  .site-primary-shell {
    position: relative;
    width: var(--psv-shell-wide);
    height: var(--psv-primary-band);
    margin-block-start: var(--psv-statement-drop);
    margin-inline: auto;
    padding-inline: clamp(42px, 3.25vw, 48px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .site-primary-shell {
      padding-inline: clamp((42 * var(--psv-u)), (49.92 * var(--psv-u)), (48 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .site-primary-copy {
    position: relative;
    width: 100%;
  }

  /* The opening gathers: every word of the statement travels from a loose
     scatter into its measured place. The real text keeps the layout and
     stays unpainted while the copies travel, so the wrap, the first-line y
     and the kerning never change; the copies leave the moment they land
     and the statement paints itself again. */
  .site-primary-title.is-gathering {
    background: none;
  }

  .site-primary-title .gather-word {
    position: absolute;
    display: block;
    margin: 0;
    white-space: pre;
    color: var(--psv-brand);
    -webkit-text-fill-color: var(--psv-brand);
    will-change: transform, opacity;
  }

  /* An opening whose breaks are pinned in the markup. Left to text-wrap the
     browser rebalances them on every hero-size change, so a shape chosen at
     one size quietly becomes a different one at the next. */
  .site-primary-title .site-primary-line {
    display: block;
  }

  .site-primary-title {
    width: 100%;
    margin: 0;
    color: transparent;
    font-family: var(--psv-font-hero);
    font-size: var(--psv-hero-size);
    font-weight: var(--psv-hero-weight);
    line-height: var(--psv-hero-leading);
    letter-spacing: var(--psv-hero-tracking);
    text-transform: uppercase;
    text-wrap: balance;
    background: var(--psv-heading-gradient);
    /* max() so the ramp is never narrower than the heading it paints:
       below the shell's wide breakpoint the pinned span falls short of the
       box and everything past it would render unpainted. There every page
       is full-width anyway, so 100% is itself the shared value. */
    background-size: max(100%, var(--psv-heading-gradient-span)) 100%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* background-clip:text paints nothing outside the padding box, and IBM
       Plex ink (circumflex above, cedilla below) reaches past the tight line
       box -- so the box lends paint room and takes it back with margin. */
    padding-block: .14em .18em;
    margin-block: -.14em -.18em;
  }

  .site-primary-eyebrow {
    position: absolute;
    bottom: calc(100% + (22 * var(--psv-u)));
    left: 0;
    margin: 0;
  }

  .site-primary-lead {
    position: absolute;
    top: calc(100% + (30 * var(--psv-u)));
    left: 0;
    max-width: var(--psv-measure-lead);
    margin: 0;
    color: var(--psv-copy);
    font-size: var(--psv-lead-size);
    line-height: var(--psv-lead-leading);
  }

  /* Page-level heading pair for functional pages (plans, account, payment).
     Narrative pages carry their own hero contract. */
  .page-title {
    max-width: 24ch;
    font-size: var(--psv-title-size);
    line-height: var(--psv-title-leading);
    text-transform: uppercase;
    text-wrap: balance;
  }

  .page-lead {
    max-width: var(--psv-measure-lead);
    margin-top: calc(24 * var(--psv-u));
    color: var(--psv-copy);
    font-size: var(--psv-lead-size);
    line-height: var(--psv-lead-leading);
  }

  .microcopy {
    color: var(--psv-muted);
    font-size: var(--psv-ui-control);
    line-height: 1.6;
  }

  .button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(12 * var(--psv-u));
  }

  .button-row--stacked {
    display: grid;
    gap: calc(10 * var(--psv-u));
    margin-top: calc(26 * var(--psv-u));
  }

  /* Plan identity primitives, shared by the plans page and the authenticated
     plan confirmation. */
  .plan-name {
    color: var(--psv-accent);
    font-family: var(--psv-font-mono);
    font-size: var(--psv-ui-label);
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-wide);
  }

  .plan-price {
    margin: calc(20 * var(--psv-u)) 0 calc(6 * var(--psv-u));
    font-family: var(--psv-font-mono);
    font-size: clamp(38px, 4vw, 52px);
    font-weight: var(--psv-weight-medium);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-price {
      font-size: clamp((38 * var(--psv-u)), (61.44 * var(--psv-u)), (52 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .plan-price small {
    font-size: .38em;
    letter-spacing: var(--psv-track-mono);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(50 * var(--psv-u));
    padding: calc(13 * var(--psv-u)) calc(19 * var(--psv-u));
    color: var(--psv-text);
    font-size: var(--psv-ui-control);
    font-weight: var(--psv-weight-semibold);
    line-height: 1;
    letter-spacing: .025em;
    background: transparent;
    border: 1px solid var(--psv-line-strong);
    border-radius: var(--psv-radius-sm);
    transition:
      color .2s ease,
      background-color .2s ease,
      border-color .2s ease,
      transform .2s ease;
  }

  .btn--primary {
    gap: calc(20 * var(--psv-u));
    color: var(--psv-bg-deep);
    background: var(--psv-text);
    border-color: var(--psv-text);
  }

  .btn--primary:focus-visible {
    color: var(--psv-bg-deep);
    background: var(--psv-accent-pale);
    border-color: var(--psv-accent-pale);
  }

  .btn--secondary {
    color: var(--psv-text);
    background: rgb(var(--psv-panel-deep-rgb) / .34);
  }

  .btn--secondary:focus-visible {
    background: var(--psv-panel-soft);
    border-color: var(--psv-accent);
  }

  .btn:active {
    transform: none;
  }

  .btn--full {
    width: 100%;
  }

  .btn--compact {
    min-height: max(44px, calc(44 * var(--psv-u)));
    padding: calc(10 * var(--psv-u)) calc(14 * var(--psv-u));
    font-size: var(--psv-ui-chip);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--psv-u));
    padding-bottom: calc(4 * var(--psv-u));
    color: var(--psv-text);
    font-size: var(--psv-ui-control);
    font-weight: var(--psv-weight-semibold);
    letter-spacing: .03em;
    border-bottom: 1px solid var(--psv-line-strong);
    transition:
      color .2s ease,
      border-color .2s ease,
      gap .2s ease;
  }

  .text-link:hover {
    gap: calc(18 * var(--psv-u));
    color: var(--psv-accent-pale);
    border-color: var(--psv-accent);
  }

  .site-footer {
    position: relative;
    padding-block: calc(34 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: var(--psv-ui-micro);
    letter-spacing: .07em;
    background: var(--psv-bg-deep);
    border-top: 1px solid var(--psv-line);
  }

  .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(28 * var(--psv-u));
  }

  .footer-links {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--psv-u));
  }

  .footer-links a {
    font-family: var(--psv-font-sans);
    font-size: var(--psv-ui-chip);
    letter-spacing: .025em;
  }

  /* The social accounts beside the copyright line (owner, 13 Oct 2026, D-107): one
     colour, the footer's own ink, as on the reference sites; they belong to the brand,
     the legal links keep their own group. */
  .footer-brand {
    display: flex;
    align-items: center;
    gap: calc(22 * var(--psv-u));
  }

  /* The company under the brand (owner, 16 Oct 2026): the legal name, then the city with its postal
     code, in two lines. Set in the footer links' sans at their size, regular weight and normal
     tracking, in the footer's muted ink, as the reference sites set it (Stripe, Kraken, Revolut,
     TradingView, Apple: the site's own sans, 12-16 px, never a monospace). */
  .footer-company {
    font-family: var(--psv-font-sans);
    font-size: var(--psv-ui-chip);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
  }

  .footer-company > span {
    display: block;
  }

  /* The pages tell the phone not to detect addresses, dates and numbers (format-detection); should a
     detector still mark one, it keeps the text's own look: no link colour, no dotted underline (owner,
     16 Oct 2026: the company line showed a dotted line on the phone). */
  a[x-apple-data-detectors] {
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
  }

  .footer-social {
    display: flex;
    gap: calc(4 * var(--psv-u));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-social a {
    display: grid;
    place-items: center;
    width: calc(36 * var(--psv-u));
    height: calc(36 * var(--psv-u));
    color: var(--psv-muted);
  }

  .footer-social svg {
    width: calc(19 * var(--psv-u));
    height: calc(19 * var(--psv-u));
  }

  /* On a phone page with its own foot the accounts close it under the page links (owner, 15 Oct 2026; after
     Linear's "Connect" group): a hairline, then Instagram, X, TikTok and Facebook as 44 px round touch areas
     in a thin ring, centred on the page, the icons in the foot's light grey; the page's bottom line does not repeat them. */
  .hn-social {
    display: flex;
    justify-content: center;
    gap: calc(12 * var(--psv-u));
    margin: calc(28 * var(--psv-u)) 0 0;
    padding: calc(24 * var(--psv-u)) 0 0;
    border-top: 1px solid rgb(145 184 216 / .18);
    list-style: none;
  }

  .hn-social a {
    display: grid;
    place-items: center;
    width: calc(44 * var(--psv-u));
    height: calc(44 * var(--psv-u));
    color: #c0cfe3;
    border: 1px solid rgb(151 196 230 / .34);
    border-radius: 50%;
  }

  /* each mark is cut to its own drawing, so all four stand at one height in the ring (owner, 15 Oct 2026) */
  .hn-social svg {
    width: auto;
    height: calc(18 * var(--psv-u));
  }

  /* The site footer's accounts take the phone foot's rings everywhere they show (the desktop and the
     legal and purchase pages): the same four marks at one height, in the footer's own ink. */
  body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .footer-social a {
    width: calc(44 * var(--psv-u));
    height: calc(44 * var(--psv-u));
    border: 1px solid var(--psv-line-strong);
    border-radius: 50%;
  }

  body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .footer-social svg {
    width: auto;
    height: calc(18 * var(--psv-u));
  }


}

/* The desktop and tablet footer (owner, 16 Oct 2026: "pc web sayfası için ayrı tasarım yapılmalı, footer
   kalın olmalı, sosyal medya hesapları footer'ın üst kısmına ortaya hizalanmalı, facebook sayfası
   eklenmeli mobildeki gibi"): a full band. The four accounts stand centred at its top in the phone foot's
   rings, a hairline across the band, then the legal links and the company centred under it, as on the
   account page. */
@media (min-width: 761px) {
  @layer psv-components {
    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .site-footer {
      padding-block: calc(56 * var(--psv-u)) calc(52 * var(--psv-u));
    }

    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .footer-inner {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: calc(18 * var(--psv-u));
      text-align: center;
    }

    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .footer-brand {
      display: contents;
    }

    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .footer-social {
      order: 1;
      justify-content: center;
      gap: calc(14 * var(--psv-u));
      width: 100%;
      margin-bottom: calc(14 * var(--psv-u));
      padding-bottom: calc(36 * var(--psv-u));
      border-bottom: 1px solid var(--psv-line);
    }

    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .footer-links {
      order: 2;
      justify-content: center;
      gap: calc(28 * var(--psv-u));
    }

    /* The company lines in the legal links' own ink (owner, 17 Oct 2026: "telifi de aynı renk yap"); the
       Technology page's footer takes it too instead of its own near-black. */
    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .footer-company {
      order: 3;
      color: var(--psv-copy);
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  @layer psv-components {
    .btn:hover {
      transform: translateY(calc(-2 * var(--psv-u)));
    }

    .btn--primary:hover {
      color: var(--psv-bg-deep);
      background: var(--psv-accent-pale);
      border-color: var(--psv-accent-pale);
    }

    .btn--secondary:hover {
      background: var(--psv-panel-soft);
      border-color: var(--psv-accent);
    }
  }
}

@media (max-height: 760px) {
  @layer psv-components {
    body[data-scene-contract] {
      --psv-scene-pad-block: calc(20 * var(--psv-u));
      --psv-scene-gap: calc(14 * var(--psv-u));
    }
  }
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  body[data-scene-contract] {
    --psv-scene-pad-block: calc(20 * var(--psv-u));
    --psv-scene-gap: calc(14 * var(--psv-u));
  }
}
/* desktop-scale:end */

@media (prefers-reduced-motion: reduce) {
  @layer psv-components {
    .btn:hover,
    .btn:active {
      transform: none !important;
    }
  }
}

@media (max-width: 1050px) {
  @layer psv-components {
    body.nav-open {
      overflow: hidden;
    }

    /* The open menu owns the screen. A scrim mutes the page beneath, so the
       hero statement no longer competes with the nav items; it also catches
       taps outside the panel, which the shell reads as a request to close. */
    body.nav-open::after {
      content: "";
      position: fixed;
      z-index: 90;
      inset: 0;
      background: rgb(var(--psv-bg-deep-rgb) / .86);
    }

    .header-inner {
      grid-template-columns: auto 1fr auto;
      gap: 20px;
    }

    .primary-nav {
      position: absolute;
      top: calc(100% + 1px);
      right: -16px;
      left: -16px;
      display: none;
      align-items: stretch;
      width: auto;
      margin: 0;
      padding: 22px 24px 28px;
      max-height: calc(100svh - var(--psv-header-height));
      overflow-y: auto;
      overscroll-behavior: contain;
      background: rgb(var(--psv-bg-deep-rgb) / .985);
      border-bottom: 1px solid var(--psv-line-strong);
      box-shadow: var(--psv-shadow-soft);
    }

    .primary-nav.open {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .primary-nav a {
      display: flex;
      align-items: center;
      min-height: 49px;
      font-size: var(--psv-ui-copy-lg);
      border-bottom: 1px solid var(--psv-line);
    }

    .primary-nav a[data-page] {
      justify-content: flex-start;
      min-width: 0;
    }

    .menu-toggle {
      display: inline-grid;
    }
  }
}

@media (max-width: 760px) {
  @layer psv-components {
    body[data-scene-contract] {
      --psv-scene-pad-block: 16px;
      --psv-scene-gap: 12px;
    }

    .site-primary-shell {
      width: min(620px, calc(100% - 28px));
      padding-inline: 14px;
    }

    .psv-page > .site-shell {
      width: min(620px, calc(100% - 28px));
      padding-inline: 14px;
    }

    .header-inner {
      gap: 10px;
    }

    .brand {
      min-width: 0;
    }

    /* Size comes from the tokens, which step at this width; this rule only
       keeps the aspect honest. */
    .brand-logo,
    .product-brand__logo {
      height: auto;
    }

    .header-cta {
      display: none;
    }

    .primary-nav .nav-mobile-cta {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      color: var(--psv-bg-deep);
      font-size: var(--psv-ui-control);
      background: var(--psv-text);
      border: 0;
      border-radius: var(--psv-radius-sm);
    }

    .eyebrow {
      margin-bottom: 18px;
      font-size: var(--psv-ui-micro);
      letter-spacing: var(--psv-track-meta);
    }

    .section-heading {
      margin-bottom: 44px;
    }

    .section-heading p {
      margin-top: 20px;
    }

    .footer-inner {
      align-items: flex-start;
      flex-direction: column;
    }

    .footer-links {
      flex-wrap: wrap;
      gap: 12px 20px;
    }

    /* The phone footer (owner, 16 Oct 2026: "hesap sayfasındaki format hoşuma gitti ... belgeler de tam
       ortalanmış ... bunu mobilde uygula"): centred as on the account page: the accounts where the page
       has no foot of its own (in the phone foot's rings), a hairline, the legal links, then the company.
       Important, because every phone page sheet set its own left-aligned column; the account page
       keeps its own footer. */
    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .site-footer .footer-inner {
      flex-direction: column !important;
      align-items: center !important;
      gap: 16px !important;
      text-align: center;
    }

    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .site-footer .footer-brand {
      display: contents !important;
    }

    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .site-footer .footer-social {
      order: 1;
      justify-content: center;
      gap: 12px;
    }

    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .site-footer .footer-links {
      order: 2;
      justify-content: center !important;
      width: 100%;
      padding-top: 18px;
      border-top: 1px solid var(--psv-line);
    }

    /* the company lines in the legal links' ink on a light phone footer (D-208); a navy phone footer
       sets its own light grey in its page's sheet */
    body:not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) .site-footer .footer-company {
      order: 3;
      color: var(--psv-copy);
    }
  }
}

@media (max-width: 360px) and (max-height: 620px) {
  @layer psv-components {
    body[data-scene-contract] {
      --psv-scene-pad-block: 10px;
      --psv-scene-gap: 8px;
    }
  }
}

@media (max-width: 720px) {
  @layer psv-components {

  }
}

@media (max-width: 480px) {
  @layer psv-components {
    .button-row {
      align-items: stretch;
      flex-direction: column;
      width: 100%;
    }

    .btn {
      width: 100%;
    }
  }
}

@media (forced-colors: active) {
  @layer psv-components {
    .site-header,
    .primary-nav {
      background: Canvas;
    }

    .header-cta,
    .btn,
    .btn--primary,
    .btn--secondary,
    .primary-nav .nav-mobile-cta {
      color: ButtonText;
      background: ButtonFace;
      border-color: ButtonText;
      forced-color-adjust: auto;
    }

    .site-primary-title {
      color: CanvasText;
      background: none;
      -webkit-text-fill-color: currentColor;
    }

    .primary-nav a.active > span,
    .primary-nav a[aria-current="page"] > span {
      text-decoration-line: underline;
      text-decoration-color: Highlight;
      text-decoration-thickness: 2px;
      text-underline-offset: .32em;
    }
  }
}

/* A finger needs 44px square. The three stage rails are drawn for a cursor in
   their own unlayered page rules, so this has to be unlayered to reach them. */
@media (max-width: 760px) {
  .psv-page ol[class*="architecture-list"] a,
  .psv-page nav[class*="stage-register"] a,
  .psv-page ol[class*="stage-register"] a,
  main nav[class*="-register"] li a {
    display: grid;
    place-items: center;
    min-block-size: 44px;
    min-inline-size: 44px;
  }
}

/* ── Terminal module panels ─────────────────────────────────────────────
   The product surface itself: Monitor, Analyze, Lab and Decision drawn as
   the dense, numeric panels the Terminal is made of. Shared by the Terminal
   page (as a stepped scene) and the signed-in Terminal (as views), so one
   panel reads the same in both places. Numbers lead; words label. */
@layer psv-components {
  .tm-panel {
    --tm-rule: var(--psv-line);
    --tm-rule-strong: var(--psv-line-strong);
    /* One instrument surface: every label keeps the share of its column it
       has on the canvas, at any scale. The page's text floors would lift the
       labels out of the columns they were set in, and the headings of the
       drawn tables were cut short on screens smaller than the canvas. */
    --psv-text-floor: 0px;
    --psv-label-floor: 0px;
    width: 100%;
    overflow-x: auto;
    max-width: calc(1160 * var(--psv-u));
    border: 1px solid var(--tm-rule-strong);
    background: var(--psv-brand);
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.4;
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Every control inside a panel is a real button drawn as the text it
     replaces: the panel's typography carries through, only the pointer and
     the focus ring change. */
  .tm-panel :where(button) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
  }

  .tm-panel :where(button):focus-visible {
    outline: 1px solid rgb(var(--psv-accent-rgb));
    outline-offset: 2px;
  }

  .tm-symtabs > button:hover,
  .tm-horizons > button:hover,
  .tm-strip > button:hover {
    color: var(--psv-text);
  }

  .tm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(6 * var(--psv-u)) calc(20 * var(--psv-u));
    padding: calc(11 * var(--psv-u)) calc(16 * var(--psv-u)) calc(10 * var(--psv-u));
    border-bottom: 1px solid var(--tm-rule);
  }

  /* The five markets, as tabs; the one being read carries the rule. */
  .tm-symtabs {
    display: flex;
    gap: calc(2 * var(--psv-u));
    padding: 0 calc(8 * var(--psv-u));
    border-bottom: 1px solid var(--tm-rule);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .1em;
  }

  .tm-symtabs > :is(span, button) {
    position: relative;
    padding: calc(9 * var(--psv-u)) calc(12 * var(--psv-u)) calc(10 * var(--psv-u));
    color: var(--psv-muted);
    white-space: nowrap;
  }

  .tm-symtabs > :is(span, button).is-sel {
    color: var(--psv-text);
    box-shadow: inset 0 -2px 0 rgb(var(--psv-accent-rgb) / .85);
  }

  /* The measurement stamp sits at the right end of the tab row. */
  .tm-symtabs > .tm-symtabs__meta {
    margin-left: auto;
    padding: calc(10 * var(--psv-u)) calc(8 * var(--psv-u)) calc(10 * var(--psv-u)) 0;
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .04em;
    box-shadow: none;
  }

  /* The verdict line of the Monitor head: label, verdict, the way to Decision. */
  .tm-verdict {
    margin-left: auto;
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    white-space: nowrap;
  }

  .tm-verdict i {
    margin-right: calc(7 * var(--psv-u));
    color: var(--psv-muted);
    font-style: normal;
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .tm-verdict b {
    color: var(--psv-text);
    font-weight: var(--psv-weight-medium);
  }

  .tm-symtabs i {
    position: absolute;
    top: calc(9 * var(--psv-u));
    right: calc(5 * var(--psv-u));
    width: calc(5 * var(--psv-u));
    height: calc(5 * var(--psv-u));
    background: #e9c27c;
  }

  .tm-head--monitor .tm-head__meta {
    margin-left: auto;
  }

  /* The horizon selector: four windows, the selected one carries the rule. */
  .tm-horizons {
    display: flex;
    align-items: baseline;
    gap: calc(2 * var(--psv-u));
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .08em;
  }

  .tm-horizons i {
    margin-right: calc(8 * var(--psv-u));
    color: var(--psv-muted);
    font-style: normal;
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .tm-horizons > :is(span, button) {
    padding: calc(2 * var(--psv-u)) calc(9 * var(--psv-u)) calc(4 * var(--psv-u));
    color: var(--psv-muted);
    white-space: nowrap;
  }

  .tm-horizons > :is(span, button).is-sel {
    color: var(--psv-text);
    box-shadow: inset 0 -2px 0 rgb(var(--psv-accent-rgb) / .85);
  }

  .tm-head__id {
    font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
    font-weight: var(--psv-weight-semibold);
    letter-spacing: .01em;
  }

  .tm-head__id > span {
    margin-left: calc(8 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-regular);
    letter-spacing: .04em;
  }

  .tm-head__meta {
    color: var(--psv-copy);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .04em;
  }

  .tm-head__meta b {
    color: var(--psv-text);
    font-weight: var(--psv-weight-medium);
  }

  /* A strip is a fixed grid of cells: the label sits over the value, every
     cell keeps its column whatever the value says, so a change of market or
     horizon changes the words and nothing else moves. */
  .tm-strip {
    display: grid;
    grid-template-columns: var(--tm-strip-cols, repeat(auto-fit, minmax(0, 1fr)));
    padding: 0 calc(6 * var(--psv-u));
    border-bottom: 1px solid var(--tm-rule);
    color: var(--psv-copy);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-strip > :is(span, button) {
    min-width: 0;
    padding: calc(6 * var(--psv-u)) calc(10 * var(--psv-u)) calc(7 * var(--psv-u));
    border-right: 1px solid var(--tm-rule);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tm-strip > :is(span, button):last-child {
    border-right: 0;
  }

  .tm-strip > :is(span, button).is-sel {
    color: var(--psv-text);
    box-shadow: inset 0 -2px 0 rgb(var(--psv-accent-rgb) / .8);
  }

  .tm-strip i {
    display: block;
    margin: 0 0 calc(2 * var(--psv-u));
    color: var(--psv-muted);
    font-style: normal;
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .tm-strip b {
    color: var(--psv-text);
    font-weight: var(--psv-weight-medium);
  }

  .tm-strip em {
    margin-left: calc(7 * var(--psv-u));
    color: var(--psv-muted);
    font-style: normal;
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-strip--state {
    --tm-strip-cols: minmax(0, 2.55fr) minmax(0, 1.9fr) minmax(0, .75fr) minmax(0, 1.05fr) minmax(0, .8fr);
  }

  .tm-strip--deriv {
    --tm-strip-cols: repeat(5, minmax(0, 1fr));
  }

  .tm-strip--lab {
    --tm-strip-cols: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 2fr);
  }

  /* The horizon strip of Analyze: the label and the value share the first
     line, the state sits under them. */
  .tm-strip--hz {
    --tm-strip-cols: repeat(4, minmax(0, 1fr));
  }

  .tm-strip--hz i {
    display: inline;
    margin: 0 calc(8 * var(--psv-u)) 0 0;
  }

  .tm-strip--hz em {
    display: block;
    margin: calc(2 * var(--psv-u)) 0 0;
  }

  .tm-def {
    padding: calc(8 * var(--psv-u)) calc(16 * var(--psv-u));
    border-bottom: 1px solid var(--tm-rule);
    color: var(--psv-copy);
    font-size: max(var(--psv-text-floor), calc(11.5 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-def p {
    margin: 0;
  }

  /* The definition block reserves two lines of definition, so a shorter
     one does not lift the table under it. */
  .tm-analyze .tm-def {
    box-sizing: border-box;
    min-height: calc(68 * var(--psv-u));
  }

  .tm-def p + p {
    margin-top: calc(3 * var(--psv-u));
  }

  .tm-def i {
    margin-right: calc(8 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-style: normal;
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .tm-table {
    width: 100%;
    border-collapse: collapse;
  }

  /* A drawn table declares its columns: the widths are fixed, so a longer
     state or a shorter number never moves a column. */
  .tm-table.is-fixed {
    table-layout: fixed;
  }

  .tm-table.is-fixed th,
  .tm-table.is-fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Below the width a drawn table needs, the panel scrolls sideways and the
     name column keeps its room; nothing is squeezed to zero. */
  .tm-table--monitor.is-fixed {
    min-width: calc(840 * var(--psv-u));
  }

  .tm-table--evidence.is-fixed {
    min-width: calc(760 * var(--psv-u));
  }

  .tm-table--dist.is-fixed {
    min-width: calc(680 * var(--psv-u));
  }

  .tm-table--matches.is-fixed,
  .tm-table--history.is-fixed {
    min-width: calc(700 * var(--psv-u));
  }

  .tm-col-hz {
    width: calc(86 * var(--psv-u));
  }

  .tm-col-p {
    width: calc(52 * var(--psv-u));
  }

  .tm-col-state {
    width: calc(188 * var(--psv-u));
  }

  .tm-col-value {
    width: calc(120 * var(--psv-u));
  }

  .tm-col-contrib {
    width: calc(110 * var(--psv-u));
  }

  .tm-col-last {
    width: calc(84 * var(--psv-u));
  }

  .tm-col-num {
    width: calc(118 * var(--psv-u));
  }

  .tm-col-time {
    width: calc(104 * var(--psv-u));
  }

  .tm-col-regime {
    width: calc(112 * var(--psv-u));
  }

  .tm-col-num2 {
    width: calc(84 * var(--psv-u));
  }

  .tm-col-sev {
    width: calc(100 * var(--psv-u));
  }

  .tm-col-num3 {
    width: calc(120 * var(--psv-u));
  }

  /* Comparable conditions: the fragility heading is the longest of its
     table ("KIRILGANLIK 5 DK", "FRAGILITY 5 MIN") and was cut short even on
     the canvas. Its column takes 16 of the adverse column's spare canvas px;
     the table keeps its total. */
  .tm-table--matches col:nth-child(3) {
    width: calc(100 * var(--psv-u));
  }

  .tm-table--matches col:nth-child(7) {
    width: calc(104 * var(--psv-u));
  }

  .tm-col-dir {
    width: calc(90 * var(--psv-u));
  }

  .tm-col-when {
    width: calc(130 * var(--psv-u));
  }

  .tm-col-out {
    width: calc(90 * var(--psv-u));
  }

  .tm-table th {
    padding: calc(7 * var(--psv-u)) calc(12 * var(--psv-u));
    border-bottom: 1px solid var(--tm-rule);
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-medium);
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .tm-table td {
    height: calc(30 * var(--psv-u));
    padding: calc(3 * var(--psv-u)) calc(12 * var(--psv-u));
    border-bottom: 1px solid rgb(var(--psv-line-rgb) / .09);
    vertical-align: middle;
  }

  .tm-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .tm-table th.r,
  .tm-table td.r {
    text-align: right;
  }

  .tm-table th.is-sel,
  .tm-table td.is-sel {
    background: rgb(var(--psv-accent-rgb) / .055);
  }

  .tm-table th.is-sel {
    color: rgb(var(--psv-accent-rgb));
    box-shadow: inset 0 -2px 0 rgb(var(--psv-accent-rgb) / .8);
  }

  .tm-name {
    display: inline;
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
    font-weight: var(--psv-weight-medium);
    white-space: nowrap;
  }

  .tm-table td > small {
    display: block;
    margin-top: calc(1 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .06em;
    white-space: nowrap;
  }

  .tm-val {
    color: var(--psv-text);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    white-space: nowrap;
  }

  .tm-val small {
    margin-left: calc(6 * var(--psv-u));
    color: var(--psv-copy);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-val--un {
    color: var(--psv-muted);
  }

  .tm-val--live {
    color: rgb(var(--psv-accent-rgb));
  }

  .tm-state {
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    white-space: nowrap;
  }

  .tm-tag {
    display: inline-block;
    margin-left: calc(6 * var(--psv-u));
    padding: 0 calc(5 * var(--psv-u));
    border: 1px solid var(--tm-rule-strong);
    color: var(--psv-copy);
    font-family: var(--psv-font-mono);
    font-style: normal;
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .1em;
    vertical-align: calc(1 * var(--psv-u));
  }

  .tm-tag--wide {
    margin-left: 0;
    padding: calc(1 * var(--psv-u)) calc(6 * var(--psv-u));
  }

  .tm-group td {
    height: calc(26 * var(--psv-u));
    padding-top: calc(6 * var(--psv-u));
    background: rgb(var(--psv-line-rgb) / .05);
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .12em;
  }

  .tm-group i {
    font-style: normal;
  }

  .tm-group b {
    margin-left: calc(10 * var(--psv-u));
    color: var(--psv-copy);
    font-weight: var(--psv-weight-regular);
  }

  .tm-row--un td {
    color: var(--psv-muted);
  }

  /* Analyze keeps nine body rows whatever the measure: a shorter list is
     padded, so the foot never moves. */
  .tm-row--pad td {
    border-bottom-color: transparent;
  }

  /* Every evidence row is the same height, so the foot of Analyze stays put
     whichever measure is under the lens. */
  .tm-table--evidence tbody tr:not(.tm-group) > td {
    height: calc(34 * var(--psv-u));
  }

  .tm-row--diff td {
    background: rgb(var(--psv-accent-rgb) / .04);
  }

  .tm-foot {
    margin: 0;
    padding: calc(8 * var(--psv-u)) calc(16 * var(--psv-u)) calc(9 * var(--psv-u));
    border-top: 1px solid var(--tm-rule);
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.5;
    letter-spacing: .03em;
  }

  .tm-conds {
    margin: 0;
    padding: calc(4 * var(--psv-u)) 0;
    border-bottom: 1px solid var(--tm-rule);
    list-style: none;
  }

  .tm-conds li {
    display: grid;
    grid-template-columns: minmax(calc(180 * var(--psv-u)), 1.4fr) minmax(calc(60 * var(--psv-u)), .5fr) minmax(calc(140 * var(--psv-u)), 1fr) minmax(calc(160 * var(--psv-u)), 1fr);
    align-items: center;
    gap: calc(16 * var(--psv-u));
    min-height: calc(30 * var(--psv-u));
    padding: calc(3 * var(--psv-u)) calc(16 * var(--psv-u));
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11.5 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-conds li + li {
    border-top: 1px solid rgb(var(--psv-line-rgb) / .09);
  }

  .tm-conds b {
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
    font-weight: var(--psv-weight-medium);
  }

  .tm-conds span {
    color: var(--psv-text);
  }

  .tm-conds em {
    color: var(--psv-muted);
    font-style: normal;
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-lab-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tm-lab-grid > table:first-child {
    border-bottom: 1px solid var(--tm-rule);
  }

  .tm-table--matches td {
    white-space: nowrap;
  }

  .tm-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--tm-rule);
  }

  .tm-tile {
    padding: calc(11 * var(--psv-u)) calc(14 * var(--psv-u)) calc(10 * var(--psv-u));
    border-right: 1px solid var(--tm-rule);
    font-family: var(--psv-font-mono);
  }

  .tm-tile:last-child {
    border-right: 0;
  }

  .tm-tile strong {
    display: block;
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
    font-weight: var(--psv-weight-medium);
    letter-spacing: .04em;
  }

  .tm-tile > span {
    display: block;
    margin-top: calc(4 * var(--psv-u));
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .12em;
  }

  .tm-tile.is-active > span {
    color: rgb(var(--psv-accent-rgb));
  }

  .tm-tile small {
    display: block;
    margin-top: calc(2 * var(--psv-u));
    color: var(--psv-copy);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-panel .is-positive {
    color: #75d6a3;
  }

  .tm-panel .is-negative {
    color: #ee9b9b;
  }

  /* The live controls: horizon heads, measure cells and names, the measure
     chips of Analyze, the trace column, Lab conditions, Decision tiles. */
  .tm-hz {
    color: inherit;
  }

  .tm-table th.is-sel .tm-hz,
  .tm-hz:hover {
    color: rgb(var(--psv-accent-rgb));
  }

  .tm-cell,
  .tm-namebtn {
    display: block;
    width: 100%;
  }

  .tm-cell > small,
  .tm-namebtn > small,
  .tm-cond > small {
    display: block;
    margin-top: calc(1 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .06em;
    white-space: nowrap;
  }

  .tm-cond > small {
    display: inline;
    margin-left: calc(6 * var(--psv-u));
  }

  .tm-cell:hover .tm-val,
  .tm-namebtn:hover .tm-name {
    color: rgb(var(--psv-accent-rgb));
  }

  .tm-table td.is-alert .tm-val,
  .tm-val--hi,
  .tm-val--alert,
  .tm-warn {
    color: #e9c27c;
  }

  .tm-go {
    margin-left: calc(10 * var(--psv-u));
    color: rgb(var(--psv-accent-rgb));
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .tm-go:hover {
    text-decoration: underline;
    text-underline-offset: calc(3 * var(--psv-u));
  }

  .tm-acts {
    display: inline;
  }

  /* The measure chips fill a grid whose columns depend on the width alone,
     so a change of horizon changes the values and no chip moves. */
  .tm-mlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(196 * var(--psv-u)), 1fr));
    gap: calc(4 * var(--psv-u)) calc(5 * var(--psv-u));
    padding: calc(7 * var(--psv-u)) calc(16 * var(--psv-u));
    border-bottom: 1px solid var(--tm-rule);
  }

  .tm-mlist > button {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    padding: calc(3 * var(--psv-u)) calc(8 * var(--psv-u)) calc(4 * var(--psv-u));
    border: 1px solid var(--tm-rule);
    color: var(--psv-copy);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .tm-mlist > button:hover {
    border-color: var(--tm-rule-strong);
    color: var(--psv-text);
  }

  .tm-mlist > button[aria-selected="true"] {
    border-color: rgb(var(--psv-accent-rgb) / .7);
    background: rgb(var(--psv-accent-rgb) / .08);
    color: var(--psv-text);
  }

  .tm-mlist > button > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tm-mlist b {
    flex: 0 0 auto;
    margin-left: calc(7 * var(--psv-u));
    color: var(--psv-text);
    font-weight: var(--psv-weight-medium);
  }

  .tm-mlist b.tm-val--un {
    color: var(--psv-muted);
  }

  /* Eight columns must sit inside the panel at the narrow end of the wide
     profile: the Monitor table keeps a tighter gutter than the others. */
  .tm-table--monitor th,
  .tm-table--monitor td {
    padding-inline: calc(8 * var(--psv-u));
  }

  .tm-table--evidence th,
  .tm-table--evidence td {
    padding-inline: calc(10 * var(--psv-u));
  }

  .tm-table--monitor .tm-val small {
    margin-left: calc(4 * var(--psv-u));
  }

  .tm-col-spark {
    width: calc(88 * var(--psv-u));
  }

  .tm-spark {
    display: block;
    width: calc(80 * var(--psv-u));
    height: calc(20 * var(--psv-u));
    overflow: visible;
  }

  .tm-spark polyline {
    fill: none;
    stroke: rgb(var(--psv-accent-rgb));
    stroke-width: 1.2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .tm-spark circle {
    fill: rgb(var(--psv-accent-rgb));
  }

  .tm-spark__zero {
    stroke: currentColor;
    stroke-opacity: .28;
    stroke-width: 1;
    stroke-dasharray: 2 2;
  }

  .tm-spark__thr {
    stroke: #e9c27c;
    stroke-opacity: .85;
    stroke-width: 1;
    stroke-dasharray: 3 2;
  }

  .tm-cond {
    display: block;
    cursor: pointer;
  }

  .tm-check {
    width: calc(13 * var(--psv-u));
    height: calc(13 * var(--psv-u));
    margin: 0 calc(8 * var(--psv-u)) 0 0;
    vertical-align: calc(-2 * var(--psv-u));
    accent-color: rgb(var(--psv-accent-rgb));
    cursor: pointer;
  }

  .tm-conds li.is-off b,
  .tm-conds li.is-off span,
  .tm-conds li.is-off em {
    color: var(--psv-muted);
  }

  .tm-tile {
    width: 100%;
    text-align: left;
  }

  .tm-tile:hover strong {
    color: rgb(var(--psv-accent-rgb));
  }

  .tm-tile.is-sel {
    background: rgb(var(--psv-accent-rgb) / .06);
    box-shadow: inset 0 -2px 0 rgb(var(--psv-accent-rgb) / .85);
  }

  .tm-row--cur td {
    background: rgb(var(--psv-accent-rgb) / .045);
  }

  @media (max-width: 1050px) {
    /* A dense table must never widen the document: below the wide profile the
       panel scrolls sideways inside its own frame. */
    .tm-panel {
      overflow-x: auto;
    }

    .tm-board {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tm-tile:nth-child(3n) {
      border-right: 0;
    }
  }

  @media (max-width: 760px) {
    .tm-panel {
      overflow-x: auto;
    }

    .tm-table {
      min-width: 640px;
    }

    .tm-conds li {
      grid-template-columns: 1fr;
      gap: 2px;
      padding-block: 8px;
    }

    .tm-board {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tm-tile:nth-child(3n) {
      border-right: 1px solid var(--tm-rule);
    }

    .tm-tile:nth-child(2n) {
      border-right: 0;
    }
  }
}

/* ── Terminal panel typography contract ────────────────────────────────
   The values of the approved mock-up (audits/2026-09-11-company-fit/
   platform-kurgu.html), verbatim: families, sizes, weights, tracking,
   colours and row rhythm. Both places that draw a panel read from here;
   nothing below is tuned per page. */
@layer psv-components {
  .tm-panel {
    --psv-text: #e6edf5;
    --psv-copy: #a9b8c8;
    --psv-muted: #7f93a8;
    --psv-accent-rgb: 104 194 238;
    --psv-accent: rgb(104 194 238);
    --psv-line-rgb: 145 184 216;
    --psv-line-strong-rgb: 151 196 230;
    --psv-line: rgb(145 184 216 / .18);
    --psv-line-strong: rgb(151 196 230 / .34);
    --tm-rule: var(--psv-line);
    --tm-rule-strong: var(--psv-line-strong);
    background: var(--psv-brand);
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  .tm-symtabs {
    font-size: max(var(--psv-text-floor), calc(11.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .1em;
  }

  .tm-symtabs > :is(span, button) {
    padding: calc(6 * var(--psv-u)) calc(14 * var(--psv-u)) calc(8 * var(--psv-u));
  }

  .tm-symtabs > .tm-symtabs__meta {
    padding: calc(8 * var(--psv-u)) calc(8 * var(--psv-u)) calc(8 * var(--psv-u)) 0;
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .03em;
  }

  .tm-head {
    padding: calc(9 * var(--psv-u)) calc(16 * var(--psv-u)) calc(7 * var(--psv-u));
  }

  .tm-head__id {
    font-size: max(var(--psv-text-floor), calc(15 * var(--psv-u)));
    font-weight: 600;
    letter-spacing: .01em;
  }

  .tm-head__id > strong {
    font-weight: 600;
  }

  .tm-head__id > span {
    margin-left: calc(10 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: 400;
    letter-spacing: .04em;
  }

  .tm-head__meta,
  .tm-verdict {
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .03em;
  }

  .tm-horizons {
    font-size: max(var(--psv-text-floor), calc(11.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .1em;
  }

  .tm-horizons > :is(span, button) {
    padding: calc(4 * var(--psv-u)) calc(12 * var(--psv-u)) calc(6 * var(--psv-u));
  }

  .tm-strip {
    padding: 0 calc(6 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-strip > :is(span, button) {
    padding: calc(4 * var(--psv-u)) calc(12 * var(--psv-u)) calc(5 * var(--psv-u));
  }

  .tm-strip i,
  .tm-verdict i,
  .tm-group i {
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: 500;
    letter-spacing: .12em;
  }

  .tm-table th {
    padding: calc(8 * var(--psv-u)) calc(12 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: 500;
    letter-spacing: .12em;
  }

  /* The mock-up's rows are 46 px; the page holds the four panels at 1:1
     only at 36 px, so the row keeps the mock-up's type and gives up 10 px
     of air. */
  .tm-table td {
    height: calc(28 * var(--psv-u));
    padding: calc(3 * var(--psv-u)) calc(12 * var(--psv-u));
    line-height: normal;
  }

  .tm-table--evidence tbody tr:not(.tm-group) > td,
  .tm-table--monitor tbody td,
  .tm-table--history tbody td {
    height: calc(38 * var(--psv-u));
  }

  .tm-group td {
    height: calc(26 * var(--psv-u));
    padding: calc(4 * var(--psv-u)) calc(12 * var(--psv-u)) calc(2 * var(--psv-u));
  }

  /* Two definition lines are the block's height on every wide layout, so a
     change of measure never moves the evidence table. */
  @media (min-width: 761px) {
    .tm-analyze .tm-def {
      height: calc(76 * var(--psv-u));
      overflow: hidden;
    }
  }

  .tm-table--monitor th,
  .tm-table--monitor td {
    padding-inline: calc(10 * var(--psv-u));
  }

  .tm-table--monitor.is-fixed {
    min-width: calc(860 * var(--psv-u));
  }

  .tm-col-hz {
    width: calc(92 * var(--psv-u));
  }

  .tm-col-p {
    width: calc(56 * var(--psv-u));
  }

  .tm-name {
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
    font-weight: 500;
    line-height: normal;
  }

  .tm-table td > small,
  .tm-namebtn > small,
  .tm-cell > small {
    margin-top: calc(1 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: 400;
    letter-spacing: .06em;
    line-height: normal;
  }

  .tm-val {
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
    line-height: normal;
  }

  .tm-val small {
    margin-left: calc(8 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    color: var(--psv-copy);
  }

  .tm-table--monitor .tm-val small {
    margin-left: calc(8 * var(--psv-u));
  }

  .tm-pct {
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    color: var(--psv-copy);
  }

  .tm-pct.tm-val--hi {
    color: var(--psv-text);
  }

  .tm-state {
    font-size: max(var(--psv-text-floor), calc(11.5 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: 500;
    line-height: normal;
  }

  .tm-tag {
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .12em;
  }

  .tm-foot {
    padding: calc(7 * var(--psv-u)) calc(16 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.45;
    letter-spacing: .04em;
  }

  .tm-go {
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: 0;
    text-transform: none;
  }

  .tm-mlist > button {
    padding: calc(2 * var(--psv-u)) calc(8 * var(--psv-u)) calc(3 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-conds li {
    min-height: calc(28 * var(--psv-u));
    padding-block: calc(2 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(11.5 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .tm-conds b {
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
  }

  .tm-def {
    padding: calc(9 * var(--psv-u)) calc(16 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.5;
  }

  .tm-tile {
    padding: calc(8 * var(--psv-u)) calc(14 * var(--psv-u)) calc(7 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .06em;
  }

  .tm-tile > span {
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .1em;
  }
}

/* ── Terminal panels: the combined reading───────────────────────────────
   Monitor and Analyze carry the combined state of the four horizons, on the
   Terminal page and in the signed-in Terminal (terminal.js marks the panels
   .has-combined): in Monitor a combined strip, the regime weight of each
   horizon and a combined column; in Analyze the combined state as a view of
   its own. The Terminal page draws the panel 956 px wide inside the frame the
   four modules share, so the Monitor rows give up 4 px of air and the
   combined tables run tight. */
@layer psv-components {
  /* The strips of this Monitor carry more cells to the row: their cells keep
     an 8 px gutter, and every column is sized from the longest value it shows
     in either language, so no label or value is cut. */
  .tm-monitor.has-combined .tm-strip > :is(span, button) {
    padding-inline: calc(8 * var(--psv-u));
  }

  .tm-panel.has-combined .tm-strip--state {
    --tm-strip-cols: minmax(0, 480fr) minmax(0, 290fr) minmax(0, 172fr);
  }

  .tm-strip--combined {
    --tm-strip-cols: minmax(0, 216fr) minmax(0, 126fr) minmax(0, 108fr) minmax(0, 150fr) minmax(0, 110fr) minmax(0, 232fr);
    background: rgb(var(--psv-accent-rgb) / .035);
  }

  /* The answer of the strip carries the weight: the reading is set larger than
     the measures that qualify it. */
  .tm-strip--combined .tm-lead {
    font-size: max(var(--psv-text-floor), calc(13.5 * var(--psv-u)));
    line-height: 1.1;
  }

  /* The interval belongs beside its difference, not under it. */
  .tm-table--dist td > small {
    display: inline;
    margin-left: calc(6 * var(--psv-u));
  }

  .tm-strip--combined .tm-lead small {
    margin-left: calc(3 * var(--psv-u));
    color: var(--psv-copy);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
  }

  /* The four horizons of a row, 5 → 60 min, under its combined value. */
  .tm-shape {
    display: block;
    width: calc(30 * var(--psv-u));
    height: calc(10 * var(--psv-u));
    margin: calc(2 * var(--psv-u)) 0 0 auto;
    overflow: visible;
  }

  .tm-shape__v { fill: rgb(var(--psv-accent-rgb)); }
  .tm-shape__mid { fill: rgb(var(--psv-line-rgb) / .38); }
  .tm-shape__un { fill: var(--psv-muted); }

  /* A measure that stays outside the combined reading is marked, not dashed:
     an empty cell would read as a measurement that failed. */
  .tm-sum--off .tm-off {
    display: inline-block;
    width: calc(10 * var(--psv-u));
    height: 1px;
    background: var(--psv-muted);
    vertical-align: middle;
  }

  /* A combined value is a way into its evidence: under the pointer the
     value takes the accent, like a measure cell. */
  .tm-panel.has-combined .tm-strip > button:hover b,
  .tm-sumcell:hover .tm-val {
    color: rgb(var(--psv-accent-rgb));
  }

  .tm-panel.has-combined .tm-table--monitor .tm-col-hz {
    width: calc(90 * var(--psv-u));
  }

  .tm-panel.has-combined .tm-table--monitor .tm-col-p {
    width: calc(50 * var(--psv-u));
  }

  .tm-panel.has-combined .tm-table--monitor .tm-col-state {
    width: calc(182 * var(--psv-u));
  }

  .tm-col-sum {
    width: calc(84 * var(--psv-u));
  }

  .tm-panel.has-combined .tm-table--monitor .tm-val small {
    margin-left: calc(6 * var(--psv-u));
  }

  .tm-panel.has-combined .tm-table--monitor tbody td {
    height: calc(33.7 * var(--psv-u));
    padding-block: calc(2 * var(--psv-u));
  }

  .tm-panel.has-combined .tm-table--monitor tbody :is(.tm-name, .tm-val) {
    line-height: 1.15;
  }

  .tm-panel.has-combined .tm-table--monitor tbody :is(td, .tm-namebtn, .tm-cell, .tm-sumcell) > small {
    line-height: 1.1;
  }

  .tm-table--monitor th .tm-wt {
    margin-left: calc(5 * var(--psv-u));
    color: var(--psv-copy);
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .02em;
  }

  .tm-table--monitor th.is-sel .tm-wt {
    color: rgb(var(--psv-accent-rgb));
  }

  .tm-table--monitor :is(th, td).tm-sum {
    border-left: 1px solid var(--tm-rule-strong);
    background: rgb(var(--psv-accent-rgb) / .035);
  }

  .tm-table--monitor th.tm-sum {
    color: var(--psv-text);
  }

  .tm-sumcell {
    display: block;
    width: 100%;
  }

  .tm-sumcell > small {
    display: block;
    margin-top: calc(1 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .06em;
    white-space: nowrap;
  }

  /* The combined panel keeps the width it is drawn at: a narrower panel
     scrolls sideways, as the Monitor table already does below 860 px,
     instead of cutting its names and values. */
  .tm-monitor.has-combined :is(.tm-strip, .tm-table--monitor.is-fixed) {
    min-width: calc(954 * var(--psv-u));
  }

  @media (min-width: 761px) {
    .tm-analyze.has-combined .tm-pair {
      min-width: calc(954 * var(--psv-u));
    }
  }

  /* Analyze carries one more chip row; its evidence rows give up 2 px each,
     so the four modules of the Terminal page keep their frame. */
  /* The range column carries a word now, not a code, so it takes the room a
     word needs; the name column can spare it. */
  .tm-panel.has-combined .tm-table--evidence .tm-col-p {
    width: calc(74 * var(--psv-u));
  }

  .tm-panel.has-combined .tm-table--evidence tbody tr:not(.tm-group) > td {
    height: calc(36 * var(--psv-u));
    padding-block: calc(2 * var(--psv-u));
  }

  /* Analyze, combined state: support and conflict beside the change, the
     nine roles beside them, the cost of acting on one strip. */
  .tm-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--tm-rule);
  }

  .tm-block {
    min-width: 0;
  }

  .tm-block + .tm-block {
    border-left: 1px solid var(--tm-rule);
  }

  .tm-table.tm-mini th {
    padding: calc(6 * var(--psv-u)) calc(10 * var(--psv-u));
  }

  .tm-table.tm-mini th:first-child {
    color: var(--psv-copy);
  }

  .tm-table.tm-mini td {
    height: calc(25 * var(--psv-u));
    padding: calc(2 * var(--psv-u)) calc(10 * var(--psv-u));
  }

  .tm-block--roles .tm-table.tm-mini td {
    height: calc(28 * var(--psv-u));
  }

  .tm-mini + .tm-mini {
    border-top: 1px solid var(--tm-rule);
  }

  .tm-col-bar {
    width: calc(104 * var(--psv-u));
  }

  .tm-col-note {
    width: calc(116 * var(--psv-u));
  }

  .tm-col-note2 {
    width: calc(140 * var(--psv-u));
  }

  .tm-col-read {
    width: calc(142 * var(--psv-u));
  }

  .tm-col-conv {
    width: calc(94 * var(--psv-u));
  }

  .tm-col-kind {
    width: calc(82 * var(--psv-u));
  }

  .tm-note {
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .03em;
  }

  .tm-bar,
  .tm-sbar {
    display: inline-block;
    margin-left: calc(9 * var(--psv-u));
    vertical-align: middle;
  }

  .tm-bar {
    width: calc(44 * var(--psv-u));
    height: calc(3 * var(--psv-u));
  }

  .tm-sbar {
    width: calc(72 * var(--psv-u));
    height: calc(9 * var(--psv-u));
  }

  .tm-bar rect,
  .tm-sbar rect {
    fill: rgb(var(--psv-line-rgb) / .22);
  }

  .tm-bar .tm-bar__v,
  .tm-sbar .tm-bar__v {
    fill: rgb(var(--psv-accent-rgb));
  }

  .tm-bar--con .tm-bar__v {
    fill: var(--psv-copy);
  }

  .tm-sbar .tm-sbar__mid {
    fill: rgb(var(--psv-line-rgb) / .55);
  }

  .tm-tag.tm-drv {
    border-color: rgb(var(--psv-accent-rgb) / .7);
    color: var(--psv-text);
  }

  .tm-strip--liqx {
    --tm-strip-cols: repeat(4, minmax(0, 1fr));
  }

  @media (max-width: 760px) {
    .tm-pair {
      grid-template-columns: 1fr;
    }

    .tm-block + .tm-block {
      border-top: 1px solid var(--tm-rule);
      border-left: 0;
    }
  }
}

/* ── Terminal panels: eighteen measures, and the measurement's chart ─────
   The Monitor lists the home page's eighteen measurements, one line a row,
   so the table still fits the screen; Analyze sets the measurement's own
   line beside its readings, above the definition (D-61). */
@layer psv-components {
  /* ── Monitor: eighteen rows, one line each ──────────────────────────────
     The scale hint sits in its own column beside the names, a reason beside
     its dash, the percentile beside the combined value. */
  .tm-panel.tm-monitor .tm-table.tm-table--monitor tbody td {
    height: calc(20.4 * var(--psv-u));
    padding-block: 0;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor tbody :is(td, button, strong, small, span) {
    line-height: 1.3;
  }

  /* the trace is as tall as its row allows */
  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-spark {
    height: calc(16 * var(--psv-u));
  }

  /* A horizon holds a signed value and its change without spilling: the ±1 rows
     were five pixels wider than their column, so their figures stood to the
     right of the 0–1 rows'. */
  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-col-hz {
    width: calc(96 * var(--psv-u));
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-namebtn {
    display: grid;
    grid-template-columns: calc(186 * var(--psv-u)) minmax(0, 1fr);
    align-items: baseline;
    column-gap: calc(10 * var(--psv-u));
    width: 100%;
    white-space: nowrap;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-namebtn > :is(strong, small) {
    display: block;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    text-overflow: ellipsis;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor td {
    overflow: hidden;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-cell--un,
  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-sumcell {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: calc(6 * var(--psv-u));
    min-width: 0;
    width: 100%;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor td.tm-sum--off {
    white-space: nowrap;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-sum--off .tm-off {
    display: none;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-cell--un > small,
  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-sum--off > small,
  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-sumcell > small {
    display: inline;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-state {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Monitor: the three strips and the foot take one line each ───────── */
  .tm-monitor .tm-strip > * {
    display: flex;
    align-items: baseline;
    gap: calc(9 * var(--psv-u));
    padding-block: calc(7 * var(--psv-u));
    white-space: nowrap;
  }

  .tm-monitor .tm-strip > * > i {
    display: inline;
    margin: 0;
  }

  .tm-monitor .tm-head--monitor {
    padding-block: calc(7 * var(--psv-u));
  }

  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-sumcell .tm-notches,
  .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-sumcell svg {
    display: none;
  }

  /* ── Analyze: the readings on the left, the measurement's chart and its
     definition on the right ──────────────────────────────────────────── */
  .tm-analyze .tm-mlist {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tm-split {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    border-bottom: 1px solid var(--tm-rule);
  }

  .tm-split__main {
    min-width: 0;
  }

  /* a reading's description keeps to its cell; its title carries it whole */
  .tm-table--evidence td:first-child {
    overflow: hidden;
  }

  .tm-table--evidence td:first-child > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tm-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--tm-rule);
  }

  .tm-analyze .tm-side .tm-def {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-block: calc(10 * var(--psv-u));
    border-top: 1px solid var(--tm-rule);
    border-bottom: 0;
  }

  .tm-side .tm-def p + p {
    margin-top: calc(6 * var(--psv-u));
  }

  /* The chart stands on a white card, in the home page's colours: navy type, one
     data blue, hairline grid. */
  .tm-chart {
    --tc-navy: #132d58;
    --tc-blue: #338cff;
    --tc-muted: #52647b;
    --tc-soft: #8a98ab;
    position: relative;
    flex: 1 1 auto;
    min-height: calc(236 * var(--psv-u));
    margin: calc(12 * var(--psv-u));
    background: #fff;
    border: 1px solid rgb(19 45 88 / .16);
  }

  /* The drawing fills the card and never sizes it: the card takes its height
     from the column, the drawing is redrawn to the card. */
  .tm-chart svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
  }

  /* Without scripts nothing draws the line: the card is left out. */
  html:not(.js) .tm-chart {
    display: none;
  }

  .tm-chart text {
    font-family: var(--psv-font-mono);
    font-variant-numeric: tabular-nums;
  }

  .tm-chart__title {
    fill: var(--tc-muted);
    font-weight: 500;
    letter-spacing: .12em;
  }

  .tm-chart__now {
    fill: var(--tc-navy);
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .tm-chart__change,
  .tm-chart__tick,
  .tm-chart__extreme-text {
    fill: var(--tc-muted);
  }

  .tm-chart__window {
    fill: #edf3fb;
  }

  .tm-chart__window-name {
    fill: var(--tc-soft);
    letter-spacing: .1em;
  }

  .tm-chart__grid {
    stroke: #e3e9f2;
    stroke-width: 1;
  }

  .tm-chart__zero {
    stroke: #9aaec7;
    stroke-width: 1;
  }

  .tm-chart__mark {
    stroke: #c5d0df;
    stroke-width: 1;
  }

  .tm-chart__area {
    fill: rgb(51 140 255 / .11);
  }

  .tm-chart__line {
    fill: none;
    stroke: var(--tc-blue);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .tm-chart__extreme {
    fill: #fff;
    stroke: var(--tc-blue);
    stroke-width: 1.5;
  }

  .tm-chart__dot {
    fill: var(--tc-blue);
    stroke: #fff;
    stroke-width: 2;
  }

  .tm-chart__tag {
    fill: var(--tc-navy);
  }

  .tm-chart__tag-text {
    fill: #fff;
    font-weight: 600;
  }

  .tm-chart__thr {
    stroke: #b7791f;
    stroke-width: 1;
    stroke-dasharray: 5 4;
  }

  .tm-chart__thrtext {
    fill: #b7791f;
  }

  .tm-chart__cursor {
    stroke: var(--tc-navy);
    stroke-opacity: .35;
    stroke-width: 1;
  }

  .tm-chart__probe {
    fill: #fff;
    stroke: var(--tc-navy);
    stroke-width: 2;
  }

  .tm-chart__tip {
    fill: var(--tc-navy);
  }

  .tm-chart__tip-text {
    fill: #fff;
  }

  .tm-chart__none {
    fill: var(--tc-muted);
  }

  /* On a desktop a strip cell is as wide as what it says: the columns keep
     their proportions and give way to a longer label or value, so no
     language cuts one. */
  @media (min-width: 1051px) {
    .tm-panel.tm-monitor .tm-strip--state {
      --tm-strip-cols: minmax(max-content, 480fr) minmax(max-content, 290fr) minmax(max-content, 172fr);
    }

    .tm-panel.tm-monitor .tm-strip--combined {
      --tm-strip-cols: minmax(max-content, 216fr) minmax(max-content, 126fr) minmax(max-content, 108fr) minmax(max-content, 150fr) minmax(max-content, 110fr) minmax(max-content, 232fr);
    }

    .tm-panel.tm-monitor .tm-strip--deriv {
      --tm-strip-cols: repeat(5, minmax(max-content, 1fr));
    }
  }

  /* A tablet has no room for the hint column or for five chips in a row;
     beside the chart the readings keep their value, range and contribution. */
  @media (min-width: 761px) and (max-width: 1050px) {
    /* like the Monitor, a narrower Analyze scrolls sideways and cuts nothing */
    .tm-analyze .tm-split {
      min-width: calc(954 * var(--psv-u));
    }

    .tm-split .tm-table--evidence.is-fixed {
      min-width: 0;
    }

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

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

  @media (max-width: 1050px) {
    .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-namebtn {
      grid-template-columns: minmax(0, 1fr);
    }

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

    .tm-analyze .tm-mlist {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 760px) {
    .tm-split {
      grid-template-columns: minmax(0, 1fr);
    }

    .tm-side {
      order: -1;
      border-bottom: 1px solid var(--tm-rule);
      border-left: 0;
    }

    .tm-analyze .tm-mlist {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* ---- closing: the onward links, to the Research and Signals pattern ------ */
/* Technology used a boxed card with its own "continue with" kicker; the rest
   of the site names the route, marks it with an arrow and puts one line under
   it. Same shape here, in this route's own palette. */
.tq-next-links {
  display: flex;
  justify-content: center;
  gap: clamp(44px, 8vw, 120px);
  flex-wrap: wrap;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .tq-next-links {
    gap: clamp((44 * var(--psv-u)), (122.88 * var(--psv-u)), (120 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.tq-next-link {
  text-decoration: none;
}

.tq-next-link strong {
  display: inline-block;
  color: transparent;
  background: var(--tq-heading-gradient, var(--psv-heading-gradient));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--psv-font-editorial);
  font-size: clamp(26px, 3.2vw, 44px);
  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) {
  .tq-next-link strong {
    font-size: clamp((26 * var(--psv-u)), (49.152 * var(--psv-u)), (44 * var(--psv-u)));
  }
}
/* desktop-scale:end */

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

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

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

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

@media (max-width: 760px) {
  .tq-next-links {
    justify-content: flex-start;
    gap: 32px;
  }
}


/* Stepped screen: one state at a time, the statement first. */
/* The closing page opens on what the system is, in the brand navy, and the
   onward routes follow it. */
.iq-closing-statement {
  max-width: 40ch;
  margin: 0 auto clamp(40px, 8vw, 72px);
  color: var(--psv-brand);
  font-family: var(--psv-font-hero);
  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-align: center;
  text-wrap: pretty;
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .iq-closing-statement {
    margin: 0 auto clamp((40 * var(--psv-u)), (122.88 * var(--psv-u)), (72 * var(--psv-u)));
  }
}
/* desktop-scale:end */

/* On a desktop the statement keeps the deck's reading line at the top of the
   page, where every other statement of this route starts, so a language
   change only adds or removes lines below its first one. */
@media (min-width: 1200px) {
  .psv-page.tq-closing .iq-closing-statement {
    position: absolute;
    top: calc(var(--psv-closing-top) + 1.1em + var(--psv-canvas-extra) / 2);
    top: calc(var(--psv-closing-top) + 1lh + var(--psv-canvas-extra) / 2);
    right: 0;
    left: 0;
  }
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .psv-page.tq-closing .iq-closing-statement {
    position: absolute;
    top: calc(var(--psv-closing-top) + 1.1em + var(--psv-canvas-extra) / 2);
    top: calc(var(--psv-closing-top) + 1lh + var(--psv-canvas-extra) / 2);
    right: 0;
    left: 0;
  }
}
/* desktop-scale:end */

/* ── Closing routes: one standard on every page ─────────────────────────────
   The onward links of System, Technology, Research and Terminal sit at the
   foot of the last page: the same height above its lower edge on every route,
   one row with equal space between the links, tops aligned, and the same row
   in English. They share one size, and the heading ramp gets room above the
   cap height so the dot of İ is painted whole. */
.psv-page :is(.tq-next-link, .rx-next-link, .sq-next-link) strong {
  padding-block: .18em .06em;
  margin-block: -.18em -.06em;
  font-size: clamp(22px, 2.2vw, 32px);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .psv-page :is(.tq-next-link, .rx-next-link, .sq-next-link) strong {
    font-size: clamp((22 * var(--psv-u)), (33.792 * var(--psv-u)), (32 * var(--psv-u)));
  }
}
/* desktop-scale:end */

.psv-page :is(.tq-next-sub, .rx-next-sub, .sq-next-sub) {
  margin-top: calc(12 * var(--psv-u));
}

/* The fixed foot row needs the width of three columns; narrower screens keep
   the links in the page's own flow, where they may wrap. */
@media (min-width: 1200px) {
  .psv-page :is(.tq-next-link, .rx-next-link, .sq-next-link) strong,
  .psv-page :is(.tq-next-sub, .rx-next-sub, .sq-next-sub) {
    white-space: nowrap;
  }

  /* Fixed columns, each route name set from its column's left edge: the
     first letter of a route stands at the same place in Turkish and English,
     and the columns keep one pitch on every page. The description starts
     under the first letter of its name. */
  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-links, .rx-next-links) {
    position: absolute;
    right: 0;
    bottom: calc(var(--psv-closing-bottom) + var(--psv-closing-sub) + var(--psv-canvas-extra) / 2);
    left: 0;
    display: grid;
    grid-template-columns: var(--psv-closing-last);
    justify-content: center;
    align-items: start;
    gap: 0;
    margin: 0;
  }

  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-links, .rx-next-links):has(> :nth-child(2)) {
    grid-template-columns: var(--psv-closing-pitch) var(--psv-closing-last);
  }

  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-links, .rx-next-links):has(> :nth-child(3)) {
    grid-template-columns: var(--psv-closing-pitch) var(--psv-closing-pitch) var(--psv-closing-last);
  }

  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-link, .rx-next-link) {
    position: relative;
    justify-self: start;
  }

  .psv-page.sq-next-page .sq-next-link {
    position: absolute;
    right: 0;
    bottom: calc(var(--psv-closing-bottom) + var(--psv-closing-sub) + var(--psv-canvas-extra) / 2);
    left: 0;
    width: var(--psv-closing-last);
    margin: 0 auto;
  }

  .psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) :is(.tq-next-link, .rx-next-link, .sq-next-link) {
    text-align: left;
  }

  .psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) :is(.tq-next-sub, .rx-next-sub, .sq-next-sub) {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
  }

  .psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) :is(.tq-shell, .rx-shell, .sq-shell) {
    position: static;
  }
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .psv-page :is(.tq-next-link, .rx-next-link, .sq-next-link) strong,
    .psv-page :is(.tq-next-sub, .rx-next-sub, .sq-next-sub) {
    white-space: nowrap;
  }

  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-links, .rx-next-links) {
    position: absolute;
    right: 0;
    bottom: calc(var(--psv-closing-bottom) + var(--psv-closing-sub) + var(--psv-canvas-extra) / 2);
    left: 0;
    display: grid;
    grid-template-columns: var(--psv-closing-last);
    justify-content: center;
    align-items: start;
    gap: 0;
    margin: 0;
  }

  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-links, .rx-next-links):has(> :nth-child(2)) {
    grid-template-columns: var(--psv-closing-pitch) var(--psv-closing-last);
  }

  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-links, .rx-next-links):has(> :nth-child(3)) {
    grid-template-columns: var(--psv-closing-pitch) var(--psv-closing-pitch) var(--psv-closing-last);
  }

  .psv-page:is(.tq-closing, .rx-next-page) :is(.tq-next-link, .rx-next-link) {
    position: relative;
    justify-self: start;
  }

  .psv-page.sq-next-page .sq-next-link {
    position: absolute;
    right: 0;
    bottom: calc(var(--psv-closing-bottom) + var(--psv-closing-sub) + var(--psv-canvas-extra) / 2);
    left: 0;
    width: var(--psv-closing-last);
    margin: 0 auto;
  }

  .psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) :is(.tq-next-link, .rx-next-link, .sq-next-link) {
    text-align: left;
  }

  .psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) :is(.tq-next-sub, .rx-next-sub, .sq-next-sub) {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
  }

  .psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) :is(.tq-shell, .rx-shell, .sq-shell) {
    position: static;
  }
}
/* desktop-scale:end */

.psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) {
  --psv-closing-top: calc(56 * var(--psv-u));
  --psv-closing-bottom: clamp(48px, 10vh, 96px);
  --psv-closing-sub: calc(38 * var(--psv-u));
  --psv-closing-pitch: clamp(400px, 29vw, 440px);
  --psv-closing-last: calc(340 * var(--psv-u));
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  .psv-page:is(.tq-closing, .rx-next-page, .sq-next-page) {
    --psv-closing-bottom: clamp((48 * var(--psv-u)), (73 * var(--psv-u)), (96 * var(--psv-u)));
    --psv-closing-pitch: clamp((400 * var(--psv-u)), (445.44 * var(--psv-u)), (440 * var(--psv-u)));
  }
}
/* desktop-scale:end */

/* Authenticated Monitor restoration v1 (2026-10-03).
   Separate availability marker, selected horizon and neutral change arrows.
   Numeric increases never imply a universally favourable trading condition. */
@layer psv-components {
  [data-dashboard-root] .tm-table--monitor :is(th, td).is-sel {
    background: rgb(var(--psv-accent-rgb) / .09);
    box-shadow: inset 1px 0 rgb(var(--psv-accent-rgb) / .16), inset -1px 0 rgb(var(--psv-accent-rgb) / .16);
  }
  [data-dashboard-root] .tm-reading-status { font-size: .7em; color: var(--psv-muted); }
  [data-dashboard-root] .tm-reading-status[data-status="measured"] { color: #75d6a3; }
  [data-dashboard-root] .tm-reading-status[data-status="invalid"] { color: #ee9b9b; }
  /* Reserve independent numeric tracks for all rows, including missing values.
     Wider horizons use the spare name-column space instead of clipping deltas. */
  [data-dashboard-root] .tm-panel.tm-monitor .tm-table.tm-table--monitor {
    min-width: calc(1180 * var(--psv-u));
  }
  [data-dashboard-root] .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-col-hz {
    width: calc(144 * var(--psv-u));
  }
  [data-dashboard-root] .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-cell {
    display: grid;
    grid-template-columns: 6ch 8ch;
    justify-content: end;
    align-items: baseline;
    column-gap: calc(14 * var(--psv-u));
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  [data-dashboard-root] .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-cell > :is(.tm-val, .tm-change) {
    display: block;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    text-align: right;
  }
  [data-dashboard-root] .tm-panel.tm-monitor .tm-table.tm-table--monitor .tm-change {
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: 0;
  }
  [data-dashboard-root] .tm-table--monitor .tm-hz {
    display: block;
    width: 100%;
    text-align: center;
  }
  [data-dashboard-root] .tm-monitor .tm-cell:focus-visible,
  [data-dashboard-root] .tm-monitor .tm-hz:focus-visible { outline: 1px solid rgb(var(--psv-accent-rgb)); outline-offset: -1px; }
}


/* Authenticated Analyze layout (2026-10-04).
   Monitor-aligned horizon matrix above a full-width history chart. The graph retains
   raw values, history and gaps. Main-chart axis zoom is explicit and reversible.
   Scoped to the account workspace, independent of the public terminal demo. */
@layer psv-components {
  [data-dashboard-root] .tm-analyze .tm-head {
    padding-block: calc(6 * var(--psv-u));
  }
  [data-dashboard-root] .tm-analyze .tm-mlist {
    gap: calc(2 * var(--psv-u)) calc(4 * var(--psv-u));
    padding: calc(6 * var(--psv-u)) calc(8 * var(--psv-u));
  }
  [data-dashboard-root] .tm-analyze .tm-mlist > button {
    align-items: center;
    padding: calc(1.5 * var(--psv-u)) calc(6 * var(--psv-u));
  }
  [data-dashboard-root] .tm-analyze .tm-analysis-chart {
    padding: calc(8 * var(--psv-u)) calc(12 * var(--psv-u));
    border-top: 1px solid var(--tm-rule);
  }
  [data-dashboard-root] .tm-analyze .tm-analysis-chart .tm-chart {
    --tc-blue: rgb(var(--psv-accent-rgb));
    --tc-muted: var(--psv-copy);
    --tc-soft: var(--psv-muted);
    height: calc(268 * var(--psv-u));
    min-height: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }
  [data-dashboard-root] .tm-analyze .tm-analysis-chart .tm-def {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: calc(4 * var(--psv-u)) 0;
    border: 0;
    line-height: 1.4;
  }
  [data-dashboard-root] .tm-analyze .tm-history-head {
    display: flex; align-items: center; gap: calc(24 * var(--psv-u));
    padding: calc(4 * var(--psv-u)) 0 calc(8 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(12 * var(--psv-u)));
    line-height: 1.5;
  }
  [data-dashboard-root] .tm-analyze .tm-history-head > strong { color: var(--psv-copy); font-weight: 600; }
  [data-dashboard-root] .tm-analyze .tm-history-extrema { display: flex; gap: calc(16 * var(--psv-u)); color: var(--psv-muted); }
  [data-dashboard-root] .tm-analyze .tm-history-extrema b { color: var(--psv-copy); font-family: var(--psv-font-mono); font-weight: 400; }
  [data-dashboard-root] .tm-analyze .tm-history-scale { display: flex; align-items: center; gap: calc(4 * var(--psv-u)); margin-left: auto; white-space: nowrap; }
  [data-dashboard-root] .tm-analyze .tm-history-scale > span { color: var(--psv-muted); margin-right: calc(5 * var(--psv-u)); }
  [data-dashboard-root] .tm-analyze .tm-history-scale button { padding: calc(3 * var(--psv-u)) calc(8 * var(--psv-u)); border: 1px solid var(--tm-rule); color: var(--psv-muted); }
  [data-dashboard-root] .tm-analyze .tm-history-scale button[aria-pressed="true"] { color: rgb(var(--psv-accent-rgb)); border-color: rgb(var(--psv-accent-rgb) / .45); background: rgb(var(--psv-accent-rgb) / .1); }
  [data-dashboard-root] .tm-analyze .tm-history-plot { position: absolute; top: calc(16 * var(--psv-u)); bottom: calc(28 * var(--psv-u)); left: 0; right: calc(82 * var(--psv-u)); cursor: crosshair; background: rgb(0 0 0 / .055); }
  [data-dashboard-root] .tm-analyze .tm-history-grid { fill: none; stroke: var(--tm-rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  [data-dashboard-root] .tm-analyze .tm-history-grid.is-zero { stroke: var(--psv-muted); stroke-opacity: .65; stroke-dasharray: 4 4; }
  [data-dashboard-root] .tm-analyze .tm-history-line { fill: none; stroke: rgb(var(--psv-accent-rgb)); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  [data-dashboard-root] .tm-analyze .tm-history-last-line { fill: none; stroke: rgb(var(--psv-accent-rgb)); stroke-opacity: .4; stroke-dasharray: 3 5; stroke-width: 1px; vector-effect: non-scaling-stroke; }
  [data-dashboard-root] .tm-analyze .tm-history-point { fill: rgb(var(--psv-accent-rgb)); }
  [data-dashboard-root] .tm-analyze .tm-history-point.is-last { stroke: var(--psv-copy); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  [data-dashboard-root] .tm-analyze :is(.tm-history-axis,.tm-history-times,.tm-history-zone,.tm-history-tooltip) { font: max(var(--psv-text-floor), calc(12 * var(--psv-u))) / 1.4 var(--psv-font-mono); font-variant-numeric: tabular-nums; }
  [data-dashboard-root] .tm-analyze .tm-history-axis { position: absolute; left: 100%; width: calc(82 * var(--psv-u)); height: 100%; top: 0; }
  [data-dashboard-root] .tm-analyze :is(.tm-history-y,.tm-history-latest) { position: absolute; left: calc(8 * var(--psv-u)); transform: translateY(-50%); padding: calc(2 * var(--psv-u)) calc(6 * var(--psv-u)); color: var(--psv-muted); white-space: nowrap; }
  [data-dashboard-root] .tm-analyze .tm-history-latest { color: var(--psv-brand); background: rgb(var(--psv-accent-rgb)); font-weight: 600; }
  [data-dashboard-root] .tm-analyze .tm-history-times { position: absolute; top: 100%; width: 100%; margin-top: calc(8 * var(--psv-u)); color: var(--psv-muted); }
  [data-dashboard-root] .tm-analyze .tm-history-time { position: absolute; transform: translateX(-50%); }
  [data-dashboard-root] .tm-analyze .tm-history-time.is-first { transform: none; }
  [data-dashboard-root] .tm-analyze .tm-history-time.is-last { transform: translateX(-100%); }
  [data-dashboard-root] .tm-analyze .tm-history-zone { position: absolute; left: 100%; top: 100%; padding: calc(8 * var(--psv-u)) calc(14 * var(--psv-u)); color: var(--psv-muted); }
  [data-dashboard-root] .tm-analyze .tm-history-probe { position: absolute; top: 0; height: 100%; pointer-events: none; }
  [data-dashboard-root] .tm-analyze .tm-history-probe i { display: block; height: 100%; border-left: 1px dashed var(--psv-muted); }
  [data-dashboard-root] .tm-analyze .tm-history-probe b { position: absolute; width: calc(7 * var(--psv-u)); height: calc(7 * var(--psv-u)); border-radius: 50%; background: var(--psv-copy); transform: translate(-50%,-50%); }
  [data-dashboard-root] .tm-analyze .tm-history-tooltip { position: absolute; top: calc(6 * var(--psv-u)); padding: calc(5 * var(--psv-u)) calc(8 * var(--psv-u)); border: 1px solid rgb(var(--psv-accent-rgb) / .5); background: var(--psv-brand); color: var(--psv-copy); pointer-events: none; white-space: nowrap; z-index: 1; }
  [data-dashboard-root] .tm-analyze .tm-history-tooltip.is-right { transform: translateX(-100%); }
  [data-dashboard-root] .tm-analyze .tm-history--empty { display: grid; place-items: center; color: var(--psv-muted); }
  [data-dashboard-root] .tm-analyze :is(.tm-history-plot,.tm-history-scale button):focus-visible { outline: 1px solid rgb(var(--psv-accent-rgb)); outline-offset: 2px; }
  [data-dashboard-root] .tm-analyze .tm-analysis-scroll { overflow-x: auto; }
  [data-dashboard-root] .tm-analyze .tm-table--horizons { min-width: calc(1080 * var(--psv-u)); }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-col-reading { width: calc(330 * var(--psv-u)); }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-col-hz { width: calc(134 * var(--psv-u)); }
  /* Names and numeric tracks stay compact; component history uses spare width. */
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-col-spark { width: auto; }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-col-status { width: calc(116 * var(--psv-u)); }
  [data-dashboard-root] .tm-analyze .tm-table--horizons :is(th,td) { padding-inline: calc(6 * var(--psv-u)); }
  /* Override the shared demo's 36-unit evidence row, without shrinking type. */
  [data-dashboard-root] .tm-panel.tm-analyze .tm-table.tm-table--horizons tbody tr:not(.tm-group) > td {
    height: calc(20.4 * var(--psv-u));
    padding-block: 0;
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons tbody :is(td,button,strong,small,span) {
    line-height: 1.3;
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons th { padding-block: calc(5 * var(--psv-u)); }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-analysis-primary td {
    border-bottom: 1px solid var(--tm-rule-strong);
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-analysis-primary td:not(.is-sel) {
    background: rgb(var(--psv-accent-rgb) / .035);
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-analysis-primary .tm-name {
    color: rgb(var(--psv-accent-rgb));
    font-weight: var(--psv-weight-semibold);
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons :is(th,td).is-sel {
    background: rgb(var(--psv-accent-rgb) / .09);
    box-shadow: inset 1px 0 rgb(var(--psv-accent-rgb) / .16), inset -1px 0 rgb(var(--psv-accent-rgb) / .16);
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-cell {
    display: grid;
    grid-template-columns: 6ch 8ch;
    justify-content: end;
    align-items: baseline;
    column-gap: calc(10 * var(--psv-u));
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(12.5 * var(--psv-u)));
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-cell > :is(.tm-val,.tm-change) {
    display: block;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    text-align: right;
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-change {
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: 0;
  }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-spark { max-height: calc(16 * var(--psv-u)); }
  [data-dashboard-root] .tm-analyze .tm-table--horizons .tm-hz { display: block; width: 100%; text-align: center; }
  [data-dashboard-root] .tm-analyze :is(.tm-cell,.tm-hz):focus-visible {
    outline: 1px solid rgb(var(--psv-accent-rgb));
    outline-offset: -1px;
  }
  [data-dashboard-root] .tm-analyze .tm-foot { margin: 0; border-top: 1px solid var(--tm-rule); }
}

/* UTF-8 · assets/site-components.css · movement evidence, 2026-10-06.
   Three own-supported readings in Analyze; no fixed ratio bounds or signal colors. */
.tm-move-evidence{margin:calc(12 * var(--psv-u)) 0 calc(16 * var(--psv-u));padding:calc(14 * var(--psv-u));border:1px solid rgba(128,150,180,.25);border-radius:calc(10 * var(--psv-u))}
.tm-move-heading{display:flex;flex-wrap:wrap;gap:calc(6 * var(--psv-u)) calc(18 * var(--psv-u));justify-content:space-between;margin-bottom:calc(12 * var(--psv-u));font-size:max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))))}
.tm-move-heading>span{opacity:.65}
.tm-move-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(10 * var(--psv-u))}
.tm-move-card{min-width:0;padding:calc(12 * var(--psv-u));background:rgba(128,150,180,.07);border-radius:calc(7 * var(--psv-u))}
.tm-move-card h4{margin:0 0 calc(10 * var(--psv-u));font-size:max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));line-height:1.45;font-weight:600}
.tm-move-card>strong{display:block;font-size:calc(25 * var(--psv-u));font-variant-numeric:tabular-nums}
.tm-move-card>small,.tm-move-card>p,.tm-move-card>span{display:block;font-size:max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));line-height:1.5;margin:calc(5 * var(--psv-u)) 0 0;opacity:.7}
@media(max-width:640px){.tm-move-grid{grid-template-columns:1fr}.tm-move-card>strong{font-size:23px}}

/* Both trade directions are always visible; no guessed price-direction switch. */
.tm-move-side+.tm-move-side{margin-top:calc(14 * var(--psv-u));padding-top:calc(12 * var(--psv-u));border-top:1px solid rgba(128,150,180,.2)}
.tm-move-side-heading{display:flex;justify-content:space-between;gap:calc(12 * var(--psv-u));margin-bottom:calc(8 * var(--psv-u));font-size:max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))))}
.tm-move-side-heading>span{font-variant-numeric:tabular-nums;opacity:.75}

/* Phone menu (owner, 11 Oct 2026; candidate design/candidates/mobil/menu/: option A with
   option B's page-name type at 28 px). On phones the header keeps the brand and the menu
   button; language and account move into the menu, which takes the screen under the
   header: the page names, then the account buttons, sign-out and the language chips at its
   foot. It is one design on every page: the approved navy, and the header above it is the
   phone header below, the same on every page. */
@layer psv-components {
  .nav-account,
  .nav-signout,
  .nav-lang,
  .brand-phone {
    display: none;
  }
}

@media (max-width: 760px) {
  @layer psv-components {
    body {
      --nav-bg: #132d58;
      --nav-ink: #f3f7fe;
      --nav-copy: #a9b8c8;
      --nav-muted: #7f93a8;
      --nav-line: rgb(145 184 216 / .18);
      --nav-outline: #5686bf;
      --nav-accent: #8bbcff;
    }

    /* The phone header (owner, 16 Oct 2026: "hiç değişmemesi gerekiyor, hiç kırpışmaması
       gerekiyor"): one component, the same on every page that carries it, open or closed and
       through every page change. It has this one owner: the rules are important so that no
       page sheet can restyle it, because a page sheet leaves with its page and a header it
       styles changes with the page. The ground is solid navy, not see-through, because a
       see-through header shows the page beneath it and so changes when the page does (it is
       also why the open menu, fixed under it, needs no exception). The brand is the header's
       own mark, never one a page script adds and removes. The Terminal and the account pages
       have their own headers. */
    body:not([data-page="dashboard"]) {
      --psv-header-height: 58px;
    }

    /* The header is fixed to the screen, not held by the page's scroll (owner, 16 Oct 2026: the
       links at the foot of the pages still flickered, the menu did not). A page change from the
       foot of a long page puts the new page at its top in the same frame; a header that follows
       the page's scroll can be drawn one frame at the old place on the phone browsers, while the
       menu holds the page still and so never showed it. The body keeps the header's height free
       above the page, so nothing on the page moves. */
    body:not([data-page="dashboard"]):not([data-page="auth"]):not([data-page="confirmation"]):not([data-page="payment"]):not([data-page="payment-status"]) {
      padding-top: var(--psv-header-height);
    }

    .site-header {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      left: 0 !important;
      border-bottom: 0 !important;
      background: #132d58 !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    /* no touch flash on the brand, the menu button or the menu's links (the browser's own
       tap highlight); the phone page bodies already have none */
    .site-header,
    .site-header * {
      -webkit-tap-highlight-color: transparent;
    }

    .site-header .header-inner {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      max-width: 480px !important;
      height: 100% !important;
      margin: 0 auto !important;
      padding: 0 20px !important;
      gap: 8px !important;
    }

    .site-header .brand {
      min-width: 0 !important;
    }

    .site-header .brand-logo {
      display: none !important;
    }

    .site-header .brand-phone {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      color: #ffffff !important;
      font: 500 20px/1 var(--psv-font-sans) !important;
    }

    .site-header .brand-phone svg {
      width: 28px !important;
      height: 28px !important;
    }

    .site-header .header-actions {
      flex: none !important;
      width: auto !important;
      margin-left: auto !important;
      gap: 4px !important;
    }

    /* the menu button: the same plain two lines on every page, open or closed */
    .site-header .menu-toggle,
    .site-header .menu-toggle:hover {
      display: inline-grid !important;
      width: 32px !important;
      min-width: 32px !important;
      height: 40px !important;
      border: 0 !important;
      background: none !important;
    }

    .site-header .menu-toggle span {
      background: #e6edf5 !important;
    }

    .header-actions .language-picker,
    .header-actions .account-picker {
      display: none;
    }

    /* the opening's cover (initial-view.js, app.js): the opening's navy over everything from the
       first frame of a fresh load until the opening lies over it, so the page is never seen first */
    html.psv-opening::after {
      content: "";
      position: fixed;
      z-index: 10001;
      inset: 0;
      background: #132d58;
    }

    /* the menu takes the screen, so the page needs no scrim behind it */
    body.nav-open::after {
      display: none;
    }

    /* the menu panel has the header's one owner too: its navy is important, because a page
       sheet (the desktop home sheet's light menu ground) would otherwise win and leave the
       white page names on white (owner, 16 Oct 2026) */
    .primary-nav {
      position: fixed;
      top: var(--psv-header-height);
      right: 0;
      bottom: 0;
      left: 0;
      max-height: none;
      padding: 8px 26px calc(24px + env(safe-area-inset-bottom));
      overflow-y: auto;
      background: var(--nav-bg) !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }

    .primary-nav.open {
      display: flex;
      flex-direction: column;
    }

    .primary-nav a[data-page] {
      min-height: 58px;
      border-bottom: 1px solid var(--nav-line);
      color: var(--nav-ink);
      font: 800 28px/1.14 var(--psv-font-hero);
      font-weight: var(--psv-hero-weight, 800);
      letter-spacing: -.03em;
      text-transform: none;
    }

    .primary-nav a[data-page].active,
    .primary-nav a[data-page][aria-current="page"] {
      color: var(--nav-accent);
    }

    .primary-nav .nav-account {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: auto;
      padding-top: 28px;
    }

    .primary-nav .nav-button {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 16px;
      border: 1px solid var(--nav-outline);
      border-radius: 8px;
      color: var(--nav-ink);
      font: 500 16px/1.2 var(--psv-font-sans);
      letter-spacing: normal;
      text-align: center;
      text-transform: none;
    }

    .primary-nav .nav-button--fill {
      border-color: #5686bf;
      background: #174c91;
      color: #ffffff;
    }

    .primary-nav .nav-signout {
      display: block;
      margin: 14px 0 0;
      padding: 6px 0;
      border: 0;
      background: none;
      color: var(--nav-copy);
      font: 500 15px/1.3 var(--psv-font-sans);
      text-align: left;
      cursor: pointer;
    }

    .primary-nav .nav-lang {
      display: block;
      margin-top: 26px;
    }

    .nav-lang-label {
      display: block;
      margin: 0 0 10px;
      color: var(--nav-muted);
      font: 600 11px/1 var(--psv-font-sans);
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }

    .nav-lang-chips {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }

    .nav-lang-chips button {
      height: 42px;
      padding: 0;
      border: 1px solid var(--nav-outline);
      border-radius: 21px;
      background: none;
      color: var(--nav-copy);
      font: 600 13px/1 var(--psv-font-sans);
      letter-spacing: .6px;
      cursor: pointer;
    }

    .nav-lang-chips button[aria-pressed="true"] {
      border-color: var(--psv-logo-blue);
      background: var(--psv-logo-blue);
      color: #ffffff;
    }

    /* keyboard focus in the menu: a plain ring in the accent, no glow */
    .primary-nav a:focus-visible,
    .primary-nav button:focus-visible {
      outline: 2px solid var(--nav-accent);
      outline-offset: 2px;
      border-radius: 4px;
      box-shadow: none;
    }
  }
}

/* ── 03 FLOW · the product screen itself ─────────────────────────────────
   The order-flow module shows the FLOW screen as it is: a recording of the
   live Terminal in its dark theme (BTCUSDT, 5 min, 22 Oct 2026), 1920 × 953,
   set at the panel width beside Monitor and Analyze. The page language picks
   the recording: Turkish labels on the Turkish page, English elsewhere. */
@layer psv-components {
  .sq-modules .tm-panel.tm-flow,
  .tm-panel.tm-flow {
    width: calc(1000 * var(--psv-u));
    max-width: none;
    height: calc(496 * var(--psv-u));
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #07121c;
  }

}

/* Outside the layer on purpose: the site's unlayered image rule sets
   object-fit: cover, and a layered rule cannot win against it. The recording
   is shown whole, centred in the panel, never cropped. */
#terminal-module-flow .tm-panel.tm-flow img.tm-flow__screen {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

html[lang="tr"] #terminal-module-flow .tm-panel.tm-flow img.tm-flow__screen--en,
html:not([lang="tr"]) #terminal-module-flow .tm-panel.tm-flow img.tm-flow__screen--tr {
  display: none;
}