/* One spacing system for Home v4, Product v2 and About v2. Loaded last.
   --sp-section: padding above and below every section (equal, so any two
                 neighbouring sections sit 2x apart, divided by a hairline).
   --sp-head:    heading block (title + lede) to the asset it introduces.
   --sp-hang:    room under a window whose floating card hangs off its edge. */
:root {
  --sp-section: clamp(64px, 6.5vw, 96px);
  --sp-head: 56px;
  --sp-hang: 56px;
}
@media (max-width: 640px) { :root { --sp-head: 40px; } }

/* ---------------------------------------------------------------- Home -- */
.film-v4,
.showcase-v5-section,
.start-v6,
.wmw-v5,
main > #page-content > #connections,
main #connections.k-connect { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
.film-v4-head { margin-bottom: var(--sp-head); }
.film-v4 .launch-section { padding-top: 0; padding-bottom: 0; }
.showcase-v4-kicker { margin-bottom: var(--sp-head); }
.start-v6 #start-v4-title { margin-bottom: var(--sp-head); }
.wmw-head { margin-bottom: var(--sp-head); }

/* ------------------------------------------------------------- Product -- */
.pv2-hero-shot { padding-bottom: calc(var(--sp-section) + var(--sp-hang)); }
.pv2-cap { padding-top: var(--sp-section); }
.pv2-cap:last-child { padding-bottom: var(--sp-section); }
.pv2-cap-head { margin-bottom: var(--sp-head); }
.pv2-stage { padding-bottom: var(--sp-hang); }
.pv2-run { padding-top: var(--sp-section); }
.pv2-run-side .pv2-run-head h2 { margin-bottom: 32px; }

/* --------------------------------------------------------------- About -- */
.ab2-hero .pv2-hero-copy { padding-bottom: var(--sp-section); }
.ab2-manifesto { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
.ab2-film { padding-bottom: var(--sp-section); }

/* Beat the earlier, more specific section rules on Home. */
main section#principles.wmw-v5 { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
main section.start-v6 h2#start-v4-title { margin-bottom: 0; }
main section.start-v6 .start-v6-grid { margin-top: var(--sp-head); }

/* Floating cards anchor to their own window (.k-win's `all: initial` reset
   left it static, so cards were positioned against the whole stage). */
.pv2-stage .k-win, .pv2-run-stage .k-win { position: relative; }

/* Pinned/full-height tracks vertically centred their content, which left a
   dead band between the kicker/heading and the row list or diagram once the
   pin engaged (or, on Start anywhere, above and below the shorter D4 stage).
   Align to the top of the pinned box instead — the sticky offset / padding
   already clears the header, so this just removes the extra centring gap. */
.showcase-v5-pin,
.pv2-run-pin { align-items: flex-start; }
.start-v6 { min-height: 0; align-items: flex-start; }

/* Anchor landing. html already reserves the header (scroll-padding-top:
   header + 20px = 94px); these offsets also cancel each section's own top
   padding so the link lands on the heading, not on empty padding. */
.pv2-cap { scroll-margin-top: calc(58px - var(--sp-section)); }           /* label ~32px under the capability pill */
.pv2-run { scroll-margin-top: calc(-1 * (var(--sp-section) + var(--pinned-header-height, 74px) + 20px)); } /* pinned view fills the screen at step 01 */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .pv2-run { scroll-margin-top: calc(16px - var(--sp-section)); }
}

/* Home showcase: anchor the floating card to its window (see Product fix). */
.showcase-v5-win-wrap .k-win, #start-anywhere .k-win { position: relative; }

/* Pinned views: never hug the nav. Run view centres in the space below the
   header; the showcase sits a fixed gap under it (the kicker's own margin is
   dropped so the kicker -> rows gap stays ~100px before the pin engages). */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .pv2-run-pin { align-items: center; padding-top: calc(var(--pinned-header-height, 74px) + 16px); padding-bottom: 16px; }
  /* Kicker now lives inside the pin: kicker + rows/window centre as one block. */
  .showcase-v5-pin { flex-direction: column; justify-content: center; align-items: stretch; padding-bottom: 24px; }
  .showcase-v5-pin > .showcase-v4-kicker { margin: 0 0 40px; }
}

/* Home showcase, Publishing: the Destinations screen shows every channel; no card over it. */
#showcase-win .kit-card[data-cap="publishing"] { display: none; }

/* Review note (25.9): no orphan words. Browsers that support it rebalance the
   last lines of paragraphs and headings; others ignore it. */
p, li, h1, h2, h3, h4, blockquote, figcaption { text-wrap: pretty; }

/* Review note (25.9, "weird see-thru"): two floating cards cross-faded on top
   of each other, so one showed through the other. The outgoing card now goes
   at once; only the incoming card fades in. */
.kit-card:not(.is-active) { transition: none; }
/* Review notes (25.9): floating image cards must never be see-through. */
.kit-card img { background: #fff; }

/* ---------------------------------------------------------------------------
   Phones: each product window shows its whole screen, scaled to fit the
   width. Nothing is cropped, so no text is cut mid-word; the readable detail
   comes from the floating card, which sits under the screen instead of
   covering it.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .k-win { overflow: hidden !important; }
  .k-win__content {
    position: relative; aspect-ratio: 1300 / 880 !important; height: auto !important;
    overflow: hidden; border-radius: 0 !important; container-type: normal;
  }
  .k-win__content > .kit-slot {
    position: absolute !important; inset: 0 !important; width: 100%; height: 100%;
    container-type: inline-size;
  }
  .k-win__content > .kit-slot > img { width: 100%; height: 100%; object-fit: contain; object-position: top left; }

  /* Cards: in the flow under the screen, full width, only the active one. */
  .k-win .kit-card, .pv2-stage .k-win .kit-card, .pv2-run .kit-card, .pv2-hero-shot .kit-card {
    position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: auto !important; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--color-border-subtle);
    box-shadow: none; transform: none; opacity: 1;
  }
  .k-win .kit-card:not(.is-active) { display: none; }
  .k-win .kit-card .pv2-note, .k-win .kit-card .pv2-ask, .k-win .kit-card .pv2-slack { box-shadow: none; border-radius: 0; }
  .pv2-stage { padding-bottom: 0 !important; }
  .pv2-stage .k-win { overflow: hidden !important; border-radius: 14px; }

}