/* ============================================================================
 * sections.css — the page-level arrangements.
 * ==========================================================================*/

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative; overflow: clip;
  background: linear-gradient(175deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: var(--on-dark);
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3.5rem, 8vw, 7rem);
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero__lead { font-size: var(--t-lead); color: var(--on-dark-mute); max-width: 52ch; }
/* The teal is the rule down the left, not the sentence: a line of teal body
 * copy is the one place the accent stops being a mark and starts being text. */
.hero__pull {
  font-size: 1rem; color: #fff; font-weight: 600;
  padding-left: var(--s4); border-left: 2px solid var(--teal);
  max-width: 46ch;
}
.hero__def { font-size: .95rem; color: var(--on-dark-mute); max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__art { display: flex; justify-content: center; position: relative; }
@media (min-width: 900px) {
  .hero .cols { --split: 1.05fr .95fr; align-items: center; }
  .hero__art { justify-content: flex-end; }
}

/* An inner page's hero. Worn as `hero hero--inner band--dark`: .hero supplies
 * the gradient and the padding, .band--dark supplies the dark-ground colours. */
.hero--inner h1 { max-width: 16ch; }
.hero--inner .lede { color: var(--on-dark-mute); }
@media (min-width: 900px) {
  .hero--inner .cols { align-items: center; }
}

/* --- showcase ------------------------------------------------------------
 * Below 900px this is five stacked steps, each with its own screen. At and
 * above 900px the device is pinned and the screens cross-fade as the copy
 * scrolls past. Both readings are complete; the pinned one is just calmer.
 * ------------------------------------------------------------------------*/
.showcase__steps { display: flex; flex-direction: column; gap: var(--s7); }
.show-step { display: flex; flex-direction: column; gap: var(--s5); }
.show-step__n { font-family: var(--font-mono); font-size: .8rem; color: var(--teal); }
.show-step h3 { margin: 0; }
.show-step p { margin: 0; }
.show-step__art { display: flex; justify-content: center; }
.showcase__pin { display: none; }

@media (min-width: 900px) {
  .showcase__inner { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  /* --header-h-rest is the header's resting height, published by motion.js. It
   * does not drop to zero when the header hides on scroll, so the pinned
   * device holds one position for the whole walkthrough instead of jumping. */
  .showcase__pin {
    display: flex; justify-content: center;
    position: sticky; align-self: start;
    top: calc(var(--header-h-rest, 86px) + var(--s6));
  }
  .show-step { min-height: 28vh; justify-content: center; }
  .show-step__art { display: none; }
  html.js .show-step { opacity: .5; transition: opacity var(--d-cross) var(--ease); }
  html.js .show-step.is-active { opacity: 1; }
  html.js .show-step__n { color: var(--on-dark-mute); transition: color var(--d-ui) var(--ease); }
  html.js .show-step.is-active .show-step__n { color: var(--teal); }
  .showcase__screens { position: relative; width: min(296px, 100%); }
  .showcase__screens .device { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-cross) var(--ease); }
  .showcase__screens .device.is-on { opacity: 1; position: relative; }
  html:not(.js) .showcase__screens .device { position: relative; opacity: 1; }
  html:not(.js) .showcase__screens .device + .device { margin-top: var(--s6); }

  /* The progress rail. The steps column is given room on its left for a
   * hairline track, and a teal bar is scaled down that track by the step
   * showcase.js is on.
   *
   * The room at the foot of the column is what keeps the device pinned until
   * the last step has been read: the sticky box runs out of container a little
   * before the fifth step arrives. How much is needed is arithmetic, not taste
   * — the device (610px) plus its offset (110px) has to reach past the middle
   * of the viewport, where the observer's band sits, and a step is 28vh tall —
   * which works out at about 744px less 0.83 of the viewport height. The
   * constant below carries 26px of margin on top of that and nothing more, so
   * a tall screen is left with almost no empty band under the last step. */
  html.js .showcase__steps {
    position: relative;
    padding-left: var(--s8);
    padding-bottom: max(0px, 770px - 83vh);
  }
  html.js .showcase__steps::before,
  html.js .showcase__steps::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; border-radius: 2px;
  }
  html.js .showcase__steps::before { background: var(--on-dark-line); }
  html.js .showcase__steps::after {
    background: var(--teal);
    transform-origin: top center;
    transform: scaleY(calc((var(--step, 0) + 1) / var(--steps, 5)));
    transition: transform var(--d-cross) var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .show-step { opacity: 1; }
}
.showcase__dots { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s5); }
.showcase__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-line); transition: background var(--d-ui) var(--ease); }
.showcase__dots i.is-on { background: var(--teal); }

/* --- segments ------------------------------------------------------------ */
.seg {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s6) 0; border-top: 1px solid var(--line);
}
.seg__n { font-family: var(--font-mono); font-size: .8rem; color: var(--violet); }
.seg__icon { width: 48px; height: 48px; flex: none; display: block; object-fit: cover; border-radius: var(--r); }
.seg h3 { margin: 0; }
.seg__uses { font-size: .95rem; color: var(--ink-mute); margin: 0; }
@media (min-width: 768px) {
  .seg { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--s6); align-items: start; }
  .seg__body { min-width: 0; }
  .seg__n { padding-top: var(--s2); }
  .seg > .btn { align-self: start; }
}

/* --- platform capability rows -------------------------------------------- */
.cap { padding-block: var(--space-block); }
.cap + .cap { border-top: 1px solid var(--line); }
.cap__head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.cap__n { font-family: var(--font-mono); font-size: .85rem; color: var(--violet); flex: none; }
.cap h3 { margin: 0; }

/* A capability row's picture holds its place while the copy beside it scrolls.
 * The class is on the media column rather than :last-child because one row is
 * reversed, and only the column that is shorter than its neighbour ever moves.
 * The offset is the resting header plus the sub-navigation rail, so the media
 * clears both. */
@media (min-width: 1024px) {
  .cap .cap__media {
    position: sticky;
    align-self: start;
    top: calc(var(--header-h-rest, 86px) + var(--subnav-h, 49px) + var(--s6));
  }
}

/* --- protection ---------------------------------------------------------- */
.protect { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .protect { grid-template-columns: 1fr 1fr; } }
.protect .card { background: var(--violet-tint); border-color: transparent; }

/* --- finale -------------------------------------------------------------- */
.finale {
  position: relative; overflow: clip; isolation: isolate;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  border-radius: var(--r-xl); color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.finale > *:not(.deco) { position: relative; z-index: 1; }
.finale h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.finale p { color: var(--on-dark-mute); max-width: 52ch; margin-inline: auto; }
.finale .row { justify-content: center; margin-top: var(--s6); }

/* --- misc ---------------------------------------------------------------- */
.lede { font-size: var(--t-lead); color: var(--ink-mute); max-width: 58ch; }
.band--dark .lede { color: var(--on-dark-mute); }
.kicker { font-size: .95rem; color: var(--ink-mute); max-width: 62ch; }

/* --- legal pages ---------------------------------------------------------
 * A numbered clause is a heading inside a document, not a section title.
 * ------------------------------------------------------------------------*/
.section--legal h2 { font-size: var(--t-h3); margin-top: var(--s8); }
.section--legal h2:first-of-type { margin-top: 0; }