/* ===========================================================================
   HOME
   ---------------------------------------------------------------------------
   Two blocks that were borrowing layouts built for other pages:

   RESEARCH used .evidence, a three-column grid, with only two children in it.
   The number landed in column one and the caption in column two, leaving a
   third of every row as dead air. That is the huge gap between the figure and
   the sentence it belongs to.

   OWNERSHIP was a four-column grid sized for two price cards plus a chip list.
   The prices are gone (builds are quoted, not fixed at a number), and the chips
   were rendering unstyled because .chip-list styles `span` while the markup
   used `li`, which is what ran "Fixed price" and "Firm date" together.
   =========================================================================== */

/* ------------------------------------------------------------ the research */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 34px;
  margin-top: 46px;
}
.stat { padding-top: 26px; }

/* The figure carries the section, so give it room and set it in tabular
   numerals: a count-up on proportional digits makes the whole number shuffle
   sideways on every frame. */
.stat .research-number {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: .92;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--violet);
  letter-spacing: -.03em;
}

/* A hairline in the brand's three colours, drawn left to right as the figure
   counts up. It is decoration, not data: it is the same width under every
   figure, so it can never imply a proportion the numbers do not support. */
.stat-rule {
  display: block;
  height: 2px;
  margin: 18px 0 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7C3AED, #22D3EE, #F472B6);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}
.reveal.visible .stat-rule, .stat-grid.visible .stat-rule { transform: scaleX(1); }
.stat-grid.visible .stat:nth-child(1) .stat-rule { transition-delay: .06s }
.stat-grid.visible .stat:nth-child(2) .stat-rule { transition-delay: .16s }
.stat-grid.visible .stat:nth-child(3) .stat-rule { transition-delay: .26s }
.stat-grid.visible .stat:nth-child(4) .stat-rule { transition-delay: .36s }

.stat p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--body, #3B3448);
  max-width: 30ch;
}

@media (max-width: 1020px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
  .stat { padding-top: 20px; }
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat p { max-width: none; }
}

/* ===========================================================================
   ONE APP, NOT TWELVE TABS
   ---------------------------------------------------------------------------
   Ported from the live site because it is the only place the INTEGRATIONS
   argument is actually shown rather than asserted, and that argument is the
   reason this rebuild exists. The loop section above says where work leaks;
   this says what closes it.
   =========================================================================== */
.wired{padding-block:clamp(72px,8vw,116px);border-top:1px solid var(--line)}
.wired-head{max-width:72ch}
.wired-head h2{font-size:clamp(2.2rem,4.2vw,3.8rem)}
.wired-lede{margin-top:20px;font-size:1.08rem;line-height:1.6;max-width:66ch}

/* The graph is a wide, mostly-white diagram. On a near-white page a border
   would fence it in, so it sits on a faint panel instead and keeps its air. */
.wired-figure{
  margin:44px 0 0;padding:clamp(14px,2.4vw,30px);
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(245,241,250,.6));
  border:1px solid var(--line);border-radius:24px;
}
.wired-figure img{display:block;width:100%;height:auto;border-radius:10px}

/* What the build covers. Three columns of plain rows rather than six cards:
   the diagram above is already the picture, so this only has to be readable. */
.covers{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;
}
.covers li{padding:22px 0;border-top:1px solid var(--line)}
.covers-num{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--violet);
}
.covers strong{display:block;margin-top:9px;font-size:1.02rem;line-height:1.3;color:var(--ink)}
.covers-what{display:block;margin-top:7px;font-size:.92rem;line-height:1.55;color:var(--muted)}

/* ===========================================================================
   THE PROCESS
   ---------------------------------------------------------------------------
   Also ported. Every call to action on the site asks for twenty minutes, and
   until now nothing said what happens in the weeks after that call.
   =========================================================================== */
.process{padding-block:clamp(72px,8vw,116px);border-top:1px solid var(--line)}
.process-head{max-width:68ch}
.process-head h2{font-size:clamp(2.2rem,4.2vw,3.8rem)}
.process-head p{margin-top:20px;font-size:1.05rem;max-width:62ch}

.steps{
  list-style:none;margin:46px 0 0;padding:0;counter-reset:s;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 34px;
}
.steps li{display:flex;gap:16px;padding:26px 0 0;border-top:2px solid var(--line)}
/* The rule above each step fills in as the row reveals, so the four read as a
   sequence being walked rather than four boxes arriving together. */
.steps li{position:relative}
.steps li::before{
  content:'';position:absolute;inset:-2px 0 auto 0;height:2px;
  background:linear-gradient(90deg,#7C3AED,#22D3EE);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.steps.visible li::before,.reveal.visible .steps li::before{transform:scaleX(1)}
.steps.visible li:nth-child(1)::before{transition-delay:.05s}
.steps.visible li:nth-child(2)::before{transition-delay:.17s}
.steps.visible li:nth-child(3)::before{transition-delay:.29s}
.steps.visible li:nth-child(4)::before{transition-delay:.41s}

.steps-num{
  font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--violet);
  font-variant-numeric:tabular-nums;flex:none;
}
.steps strong{display:block;margin-top:8px;font-size:1.06rem;line-height:1.25;color:var(--ink)}
.steps p{margin:8px 0 0;font-size:.92rem;line-height:1.55;color:var(--muted)}

@media (max-width:1020px){
  .covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px}
}
@media (max-width:620px){
  .covers,.steps{grid-template-columns:1fr;gap:0}
  .steps li{padding-top:20px}
}