/* ──────────────────────────────────────────────────────────
   Platform page layout and responsive rules.
   Shared chrome lives in site.css.
   ────────────────────────────────────────────────────────── */

/* A section heading paired with a supporting paragraph, set wide
   apart on one line. Used on Platform twice. */
.split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: wrap;
}
.split-head .h-sec { max-width: 22ch; }
.split-head .sub { max-width: 38ch; }

/* A heading with an action stack pinned to its baseline. */
.split-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
}

/* ═══ Platform ══════════════════════════════════════════════ */
.pf-hero { padding-bottom: 64px; }

.pf-hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.pf-hero .h-page { max-width: 17ch; }
.pf-hero .lede { max-width: 44ch; margin-top: 24px; }
.pf-hero .hero-figure img { height: 360px; }

.pf-explainer { padding: 64px 0 48px; }
.pf-explainer .h-sec { max-width: 26ch; margin: 0 auto; text-align: center; }

/* Sources → Cashmere → teams. The connectors are drawn by platform.js
   from the measured card and hub rectangles, so the geometry below is
   the only thing that decides where they land. */
.flow {
  margin-top: 56px;
  background: var(--cm-bg-secondary);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  padding: 32px 48px 80px;
}

/* Below 900px the diagram scrolls sideways inside .flow-scroll. The
   overlay is pinned to .flow-plane rather than to the scroller, because
   the scroller is only as wide as the window — lines measured against it
   would stop at the fold and slide off the cards they connect. */
.flow-plane { position: relative; }

.flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: 0 40px;
  align-items: center;
}

.flow-side { display: flex; flex-direction: column; gap: 14px; }

.flow-label { font-size: 15px; color: var(--cm-ink-secondary); }

.flow-srcs,
.flow-dsts { display: flex; flex-direction: column; gap: 10px; }

.flow-item {
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  background: var(--cm-bg-primary);
  padding: 12px 16px;
  font-size: 14.5px;
  box-shadow: var(--cm-shadow-soft);
}

.flow-mid {
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  padding-top: 36px;
}

/* Two haloes around the mark, widening and fading. */
.flow-hub {
  position: relative;
  width: 96px;
  height: 96px;
  border: 1.6px solid var(--cm-accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.flow-hub-ring {
  position: absolute;
  border: 1px solid rgba(212, 145, 91, 0.35);
  border-radius: 50%;
  inset: -22px;
}
.flow-hub-ring + .flow-hub-ring {
  inset: -44px;
  border-color: rgba(212, 145, 91, 0.15);
}

/* Hangs below the middle column, into the card's bottom padding. */
.flow-stages {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -48px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--cm-border);
  padding-top: 12px;
}

.flow-step {
  font-size: 13px;
  color: var(--cm-ink-secondary);
  white-space: nowrap;
}

/* ─── The four-layer stack ──────────────────────────────── */
.pf-layers { padding: 48px 0; }

.layers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: start;
  margin-top: 40px;
}

.layers-rail { display: flex; flex-direction: column; }

.hier-item {
  border-top: 1px solid var(--cm-border-strong);
  cursor: pointer;
}
.hier-item:last-child { border-bottom: 1px solid var(--cm-border-strong); }

.hier-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 8px;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hier-title {
  font-family: var(--cm-font-serif);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: var(--cm-tracking-snug);
  color: var(--cm-ink-secondary);
  flex: 1;
  transition: color 0.2s;
}

.hier-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hier-body p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cm-ink-secondary);
  max-width: 460px;
  margin: 0;
  padding: 0 8px 24px;
}


/* The pyramid. Its cell stretches to the accordion's height (platform.js
   freezes that height once the default entry has settled), and the visual
   hangs from the cell's baseline, so the base ring sits on the expanded
   Basic Data row rather than drifting as entries open and close. */
.hier-cell {
  position: relative;
  align-self: stretch;
  min-height: 0;
}

.hier-visual {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  aspect-ratio: 1 / 0.98;
}

.hier-visual > svg,
.hier-visual > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hier-visual > svg { overflow: visible; }

/* The rings are drawn in a fixed viewBox and scaled to the cell, so the
   stroke has to opt out of that scaling to stay a hairline. */
.hier-visual svg path {
  vector-effect: non-scaling-stroke;
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

.hier-visual > canvas { display: block; cursor: grab; touch-action: pan-y pinch-zoom; }
.hier-visual > canvas:active { cursor: grabbing; }

/* ─── The feature index ─────────────────────────────────── */
/* Four columns mirroring the layer names above, each a plain list of
   what ships in that layer. No blurbs — the layers already explained
   themselves, so this is the index, not a second pass at the pitch. */
.pf-features { padding: 48px 0; }
.pf-features .h-sec { max-width: 24ch; }

.feature-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 48px;
}

.feature-col {
  border-top: 1px solid var(--cm-border-strong);
  padding-top: 18px;
}

.feature-col h3 {
  font-family: inherit;
  font-weight: 300;
  font-size: 14px;
  color: var(--cm-ink-secondary);
  margin: 0 0 18px;
}

.feature-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
  line-height: 1.4;
}

/* ─── Integrations ──────────────────────────────────────── */
.pf-integrations { padding: 48px 0 64px; }
.pf-integrations .logo-grid { margin-top: 56px; }
.pf-integrations .logo-grid > * { height: 104px; }
/* Optically centred against the marks beside it, which carry their own
   whitespace on the right. */
.pf-integrations .logo-grid .more {
  font-size: 18px;
  color: var(--cm-ink-tertiary);
  margin-right: 12px;
}
@media (max-width: 940px) {
  .pf-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .layers-grid { grid-template-columns: 1fr; }

  .hero-figure { height: auto; }
  .pf-hero .hero-figure img { height: auto; width: 100%; max-width: 480px; }

  /* Basic Data is the default-open entry, so it leads the stacked read. */
  .layers-rail { flex-direction: column-reverse; }
  /* The 3D pyramid sits this width out. */
  .hier-cell { display: none; }

  .feature-cols { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }

  .pf-integrations .logo-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
  .pf-integrations .logo-grid > * { border-left: 0; }
}

@media (max-width: 767px) {
  .pf-hero { padding-bottom: 24px; }
  .pf-hero .wrap { gap: 12px; }
  /* The herd's baked canvas padding comes back in, and the wash hugs the
     resized art instead of spilling into the subtitle. */
  .pf-hero .hero-figure img { margin: -4% 0 -10%; }
  .pf-hero .hero-figure .hero-wash.is-goat { inset: 14% 4% 16% 4%; }

  .split-head { gap: 16px; }

  /* The flow stacks: sources above the hub, teams below; platform.js
     swaps its horizontal beziers for a vertical fan. */
  .flow { margin-top: 40px; padding: 24px 20px 32px; }
  .flow-grid { grid-template-columns: 1fr; gap: 28px 0; }
  .flow-mid { min-height: 0; padding: 52px 0; }
  .flow-stages { display: none; }
  /* "Your teams" reads below its fan, not inside it. */
  .flow-side:last-child .flow-label { order: 2; margin-top: 2px; }

  .feature-cols { grid-template-columns: 1fr; gap: 40px; }

  .pf-integrations .logo-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
  .pf-integrations .logo-grid > * { height: 88px; }
}