/* ===========================================================================
   Tessen — integrations page
   ---------------------------------------------------------------------------
   This sheet loads after assets/css/tessen.css and only ever adds. Every rule
   is scoped to .page-integrations, so a selector here cannot reach a shared
   component or outrank a responsive rule that lives in the main sheet.

   No colour is written here. Everything resolves through the --sf-* surface
   set, which means a section on this page follows its own data-ts-tone the
   same way the sections on the landing page do.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Page head — the landing hero shrunk to a title and a line.
      The four-gauge ledger panel stays on the landing page; repeating it here
      would spend the signature twice.
   --------------------------------------------------------------------------- */
.page-integrations .ts-crown {
  padding-top: 124px;
  padding-bottom: 0;
}
.page-integrations .ts-crown__grid {
  display: grid;
  gap: 24px;
  align-content: start;
  max-width: 66ch;
}
.page-integrations .ts-crown__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-line);
}

/* ---------------------------------------------------------------------------
   2. Catalogue — six clusters, one row of connectors each.
      Density is the argument on this page, so the tiles run tight and the
      label column carries the count rather than a headline.
   --------------------------------------------------------------------------- */
.page-integrations .ts-catalog { display: grid; }

.page-integrations .ts-cluster {
  padding-block: 44px;
  border-top: 1px solid var(--sf-line);
}
.page-integrations .ts-cluster:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-integrations .ts-cluster__head {
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-integrations .ts-cluster__count {
  font-family: var(--ts-font-mono);
  font-size: clamp(28px, 2.6vw, var(--ts-fs-6));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sf-fg);
}
.page-integrations .ts-cluster__note {
  font-size: var(--ts-fs-2);
  line-height: 1.55;
  color: var(--sf-muted);
  max-width: 34ch;
}
.page-integrations .ts-cluster__mark {
  width: 108px;
  max-width: 100%;
  border: 1px solid var(--sf-line);
  border-radius: var(--ts-radius-1);
  background: var(--sf-panel);
  overflow: hidden;
}
.page-integrations .ts-cluster__mark img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* the tiles. Two up on a phone, four up on a desktop — a fifth column makes
   the longer rail names wrap to three lines and the row loses its rhythm */
.page-integrations .ts-portgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page-integrations .ts-port {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "crest name"
    "crest line";
  column-gap: 12px;
  row-gap: 5px;
  align-content: center;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--sf-line);
  border-radius: var(--ts-radius-1);
  background: var(--sf-bg);
  transition: border-color var(--ts-dur-micro) var(--ts-ease),
              background var(--ts-dur-micro) var(--ts-ease);
}
.page-integrations .ts-port:hover { border-color: var(--sf-accent); background: var(--sf-panel); }

/* the mark slot. It ships with a market or type code in it; a buyer drops a
   partner mark in the same box and deletes the code. Nothing on this page
   carries anyone else's logo, and the slot is where that changes. */
.page-integrations .ts-port__crest {
  grid-area: crest;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sf-line);
  border-radius: var(--ts-radius-1);
  background: var(--sf-panel);
  font-family: var(--ts-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--sf-muted);
  overflow: hidden;
}
.page-integrations .ts-port__crest img { width: 100%; height: 100%; object-fit: contain; }
.page-integrations .ts-port:hover .ts-port__crest {
  border-color: var(--sf-accent);
  color: var(--sf-accent);
}

.page-integrations .ts-port__name {
  grid-area: name;
  font-size: var(--ts-fs-2);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* the reveal: what a connector supports sits in the same line box as its
   kind, so the swap costs no height and a row never jumps under the pointer */
.page-integrations .ts-port__line {
  grid-area: line;
  display: grid;
  min-width: 0;
}
.page-integrations .ts-port__kind,
.page-integrations .ts-port__more {
  grid-area: 1 / 1;
  min-width: 0;
  font-family: var(--ts-font-mono);
  font-size: var(--ts-fs-1);
  letter-spacing: 0.05em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: opacity var(--ts-dur-micro) var(--ts-ease);
}
.page-integrations .ts-port__kind { color: var(--sf-muted); }
.page-integrations .ts-port__more { color: var(--sf-accent); opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .page-integrations .ts-port:hover .ts-port__kind { opacity: 0; }
  .page-integrations .ts-port:hover .ts-port__more { opacity: 1; }
}
/* a touch screen has no hover to reveal with, so the second line is dropped
   rather than left invisible under a state that never arrives */
@media (hover: none) {
  .page-integrations .ts-port__more { display: none; }
}

.page-integrations .ts-catalog__foot {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--sf-line);
  max-width: 74ch;
}

/* ---------------------------------------------------------------------------
   3. Connect — four steps read across a single rule.
      Deliberately not the landing page's held diagram: that split belongs to
      the money path and stops being a signature the moment it repeats.
   --------------------------------------------------------------------------- */
.page-integrations .ts-wire { display: grid; gap: 36px; }
.page-integrations .ts-wire__lede {
  font-size: clamp(var(--ts-fs-4), 1.35vw, var(--ts-fs-5));
  line-height: 1.62;
  color: var(--sf-muted);
  max-width: 58ch;
  text-wrap: pretty;
}

.page-integrations .ts-rungs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.page-integrations .ts-rung {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 0 24px;
  border-top: 1px solid var(--sf-line);
}
/* the node that sits on the rule. With the columns butted together at desktop
   width the four rules read as one line with four marks on it. */
.page-integrations .ts-rung::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--sf-accent);
}
.page-integrations .ts-rung__glyph { width: 44px; }
.page-integrations .ts-rung__glyph img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0.85;
}
.page-integrations .ts-rung__no {
  font-family: var(--ts-font-mono);
  font-size: var(--ts-fs-1);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--sf-accent);
}
.page-integrations .ts-rung__name {
  font-family: var(--ts-font-display);
  font-size: var(--ts-fs-5);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-integrations .ts-rung__body {
  font-size: var(--ts-fs-3);
  line-height: 1.62;
  color: var(--sf-muted);
}
.page-integrations .ts-rung__stat {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--ts-font-mono);
  font-size: var(--ts-fs-2);
  font-variant-numeric: tabular-nums;
  color: var(--sf-fg);
}

/* ---------------------------------------------------------------------------
   4. Detail — one connector opened up, so the depth is checkable
   --------------------------------------------------------------------------- */
.page-integrations .ts-dossier { display: grid; gap: 32px; }
.page-integrations .ts-dossier__lede {
  font-size: clamp(var(--ts-fs-4), 1.35vw, var(--ts-fs-5));
  line-height: 1.62;
  color: var(--sf-muted);
  max-width: 58ch;
  text-wrap: pretty;
}
.page-integrations .ts-dossier__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.page-integrations .ts-dossier__figure {
  border: 1px solid var(--sf-line);
  border-radius: var(--ts-radius-1);
  background: var(--sf-panel);
  overflow: hidden;
}
.page-integrations .ts-dossier__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.page-integrations .ts-dossier__facts {
  display: grid;
  border-top: 1px solid var(--sf-line);
}
.page-integrations .ts-dossier__fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 8px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sf-line);
}
.page-integrations .ts-dossier__fact dt {
  font-size: var(--ts-fs-3);
  color: var(--sf-muted);
}
.page-integrations .ts-dossier__fact dd {
  font-family: var(--ts-font-mono);
  font-size: var(--ts-fs-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.page-integrations .ts-matrix__scroll { overflow-x: auto; }
.page-integrations .ts-matrix {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.page-integrations .ts-matrix caption {
  text-align: left;
  padding-bottom: 18px;
  font-size: var(--ts-fs-3);
  color: var(--sf-muted);
}
.page-integrations .ts-matrix th,
.page-integrations .ts-matrix td {
  border: 1px solid var(--sf-line);
  padding: 14px 16px;
  vertical-align: top;
  font-size: var(--ts-fs-3);
}
.page-integrations .ts-matrix thead th {
  background: var(--sf-panel);
  font-family: var(--ts-font-mono);
  font-size: var(--ts-fs-1);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.page-integrations .ts-matrix tbody th {
  font-weight: 600;
  color: var(--sf-fg);
}
.page-integrations .ts-matrix tbody tr {
  transition: background var(--ts-dur-micro) var(--ts-ease);
}
.page-integrations .ts-matrix tbody tr:hover { background: var(--sf-panel); }
.page-integrations .ts-matrix tbody tr:hover th { box-shadow: inset 3px 0 0 var(--sf-accent); }
.page-integrations .ts-matrix__mark {
  font-family: var(--ts-font-mono);
  font-size: var(--ts-fs-2);
  font-variant-numeric: tabular-nums;
  color: var(--sf-accent);
}

/* ---------------------------------------------------------------------------
   5. Build — the interface the maintained connectors are written against
   --------------------------------------------------------------------------- */
.page-integrations .ts-kit { display: grid; gap: 32px; }
.page-integrations .ts-kit__lede {
  font-size: clamp(var(--ts-fs-4), 1.35vw, var(--ts-fs-5));
  line-height: 1.62;
  color: var(--sf-muted);
  max-width: 58ch;
  text-wrap: pretty;
}
.page-integrations .ts-kitgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.page-integrations .ts-kitcard {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 18px 18px;
  border: 1px solid var(--sf-line);
  border-radius: var(--ts-radius-1);
  background: var(--sf-bg);
  transition: border-color var(--ts-dur-micro) var(--ts-ease),
              background var(--ts-dur-micro) var(--ts-ease);
}
.page-integrations .ts-kitcard:hover { border-color: var(--sf-accent); background: var(--sf-panel); }
.page-integrations .ts-kitcard__name {
  font-family: var(--ts-font-display);
  font-size: var(--ts-fs-5);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-integrations .ts-kitcard__body {
  font-size: var(--ts-fs-3);
  line-height: 1.62;
  color: var(--sf-muted);
}
/* the shape of the call sits under the card, quiet until the card is read */
.page-integrations .ts-kitcard__snip {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--ts-font-mono);
  font-size: var(--ts-fs-1);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--sf-muted);
  opacity: 0.5;
  overflow-wrap: anywhere;
  transition: opacity var(--ts-dur-micro) var(--ts-ease),
              color var(--ts-dur-micro) var(--ts-ease);
}
.page-integrations .ts-kitcard:hover .ts-kitcard__snip { opacity: 1; color: var(--sf-accent); }

.page-integrations .ts-kit__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: end;
  padding-top: 8px;
}
.page-integrations .ts-kit__figure {
  border: 1px solid var(--sf-line);
  border-radius: var(--ts-radius-1);
  background: var(--sf-panel);
  overflow: hidden;
}
.page-integrations .ts-kit__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.page-integrations .ts-kit__call { display: grid; gap: 16px; justify-items: start; }
.page-integrations .ts-kit__text {
  font-family: var(--ts-font-display);
  font-size: clamp(var(--ts-fs-4), 1.7vw, var(--ts-fs-5));
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  max-width: 42ch;
}

/* ===========================================================================
   Responsive. The breakpoints are written out again rather than inherited,
   because this sheet loads after the main one and a shorthand here would win
   an argument it was never meant to be in.
   =========================================================================== */
@media (min-width: 700px) {
  .page-integrations .ts-crown { padding-top: 148px; }
  .page-integrations .ts-portgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-integrations .ts-rungs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  /* once the steps sit side by side their closing figures have to land on one
     line, so the body row takes the slack instead of the column ending ragged */
  .page-integrations .ts-rung {
    align-content: stretch;
    grid-template-rows: auto auto auto 1fr auto;
  }
  .page-integrations .ts-kitgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-integrations .ts-dossier__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
}

@media (min-width: 1000px) {
  .page-integrations .ts-crown { padding-top: 186px; }
  .page-integrations .ts-cluster { padding-block: 52px; }
  .page-integrations .ts-portgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* four steps across one rule */
  .page-integrations .ts-rungs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .page-integrations .ts-rung { padding-right: 28px; }

  .page-integrations .ts-dossier__top { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; }
  .page-integrations .ts-kitgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-integrations .ts-kit__foot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
}

@media (max-width: 699px) {
  .page-integrations .ts-cluster { padding-block: 34px; }
  .page-integrations .ts-cluster__mark { width: 84px; }
  .page-integrations .ts-port { min-height: 64px; padding: 11px 12px; column-gap: 10px; }
  .page-integrations .ts-dossier__fact { grid-template-columns: minmax(0, 1fr); }
  .page-integrations .ts-dossier__fact dd { text-align: left; }
  /* three columns of prose cannot be read at 375, so the table keeps its own
     width and scrolls inside its container. The document does not move, and
     the capability column pins to the left so a value never loses its row. */
  .page-integrations .ts-matrix { min-width: 580px; }

  /* A sticky cell cannot paint over a collapsed border — the seam belongs to
     the table rather than the cell, so the columns scrolling underneath leak
     through it. Separating the borders gives the pinned cell a background of
     its own. Mobile only; the desktop table has no sticky column and keeps
     its collapsed rules. */
  .page-integrations .ts-matrix { border-collapse: separate; border-spacing: 0; }
  .page-integrations .ts-matrix th,
  .page-integrations .ts-matrix td {
    border: 0;
    border-right: 1px solid var(--sf-line);
    border-bottom: 1px solid var(--sf-line);
    padding: 13px 14px;
  }
  .page-integrations .ts-matrix tr > *:first-child { border-left: 1px solid var(--sf-line); }
  .page-integrations .ts-matrix thead th { border-top: 1px solid var(--sf-line); }
  .page-integrations .ts-matrix th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 150px;
    background: var(--sf-bg);
    background-clip: padding-box;
  }
  .page-integrations .ts-matrix thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--sf-panel);
  }
  .page-integrations .ts-matrix tbody tr:hover th[scope="row"] { background: var(--sf-panel); }
}