/* space-pass.css — the 2026-10-07 whitespace pass (Emmet: "more whitespace… interplay between large, middle and small font").
   Preview only: knav.js loads it on localhost, ?space=0 turns it off. Every rule is scoped to html:not(.ksp-off) so it outranks ui-pass.css. */

/* Large: headlines step up and tighten. Middle: the lede/sub sits further below in a narrower measure. Small: calmer leading. */
@media (min-width:1024px){
  html:not(.ksp-off) h1,html:not(.ksp-off) .h1,html:not(.ksp-off) .v2-hero h1{font-size:clamp(48px,4.4vw,64px)!important;line-height:1.05!important;letter-spacing:-.03em!important}
  html:not(.ksp-off) h2:not(.plan h2):not(.dlg h2):not(.slideover h2):not(.card h2):not(.c2 h2):not(.pm h2),html:not(.ksp-off) .v2-h2,html:not(.ksp-off) .h2,html:not(.ksp-off) .kpl-h2{font-size:clamp(38px,3.6vw,56px)!important;line-height:1.06!important;letter-spacing:-.025em!important}
  html:not(.ksp-off) .lede,html:not(.ksp-off) p.lede,html:not(.ksp-off) .v2-lede,html:not(.ksp-off) .v2-sub,html:not(.ksp-off) p.sub{font-size:20px!important;line-height:32px!important;max-width:44ch!important}
  html:not(.ksp-off) h1+.lede,html:not(.ksp-off) h1+.v2-lede,html:not(.ksp-off) h1+p.lede,html:not(.ksp-off) .v2-h2+.v2-sub,html:not(.ksp-off) .h2+.sub,html:not(.ksp-off) .h2+p.sub,html:not(.ksp-off) h2+p{margin-top:24px!important}
  html:not(.ksp-off) .v2-acts,html:not(.ksp-off) .acts,html:not(.ksp-off) .ctas{margin-top:40px!important}

  /* Sections breathe, toward Rogo's 180–240px: up to 200px a side on desktop. The logo strip stays a strip. */
  html:not(.ksp-off) .v2-sec,html:not(.ksp-off) .v2-book,html:not(.ksp-off) .sec:not(.logostrip){padding-top:clamp(128px,13vw,200px)!important;padding-bottom:clamp(128px,13vw,200px)!important}
  html:not(.ksp-off) .v2-hero{padding-bottom:clamp(64px,7vw,112px)!important}

  /* Heading block to the content under it. */
  html:not(.ksp-off) .v2-data-stats,html:not(.ksp-off) .v2-stat-row{margin-top:72px!important}
  html:not(.ksp-off) .icp-proofs{margin-top:96px!important}
  html:not(.ksp-off) .v2-h2[style*="margin-bottom"]{margin-bottom:48px!important}
}

/* Small text: body copy in cards and lists gets room between lines and a step of muted colour. */
html:not(.ksp-off) .v2-stat span,html:not(.ksp-off) .who,html:not(.ksp-off) .sfoot-col a{line-height:1.6!important}

/* Phones: same idea, scaled to 390px. */
@media (max-width:1023px){
  html:not(.ksp-off) .v2-sec,html:not(.ksp-off) .v2-book,html:not(.ksp-off) .sec:not(.logostrip){padding-top:96px!important;padding-bottom:96px!important}
  html:not(.ksp-off) h1,html:not(.ksp-off) .v2-hero h1{font-size:40px!important;line-height:46px!important;letter-spacing:-.025em!important}
  html:not(.ksp-off) .v2-h2,html:not(.ksp-off) .h2,html:not(.ksp-off) h2:not(.plan h2):not(.card h2){font-size:32px!important;line-height:38px!important}
  html:not(.ksp-off) .v2-sub,html:not(.ksp-off) p.sub,html:not(.ksp-off) .lede{margin-top:20px!important}
  html:not(.ksp-off) .v2-acts{margin-top:32px!important}
}

/* Video heroes that sit under the fixed nav (/studio/ .swall): the headline sat 6px under the bar. */
@media (min-width:1024px){html:not(.ksp-off) .swall{padding-top:calc(var(--bar-h,82px) + 72px)!important}}
@media (max-width:1023px){html:not(.ksp-off) .swall{padding-top:calc(var(--bar-h,64px) + 40px)!important}}

/* Product screens that run off the panel edge (2026-10-07, after Hightouch's product blocks): the screen sits inset from the
   top-left on the light mesh and is cut by the panel's right and bottom edges. /studio/ BrnDNA panel. */
@media (min-width:1024px){
  html:not(.ksp-off) #refs .cx-viz,html:not(.ksp-off) .cx.refs .cx-viz{display:block!important;position:relative;overflow:hidden;min-height:440px;padding:0!important;border-left:0!important;background:radial-gradient(60% 75% at 0% 0%,rgba(233,220,200,.9),transparent 70%),radial-gradient(60% 75% at 100% 0%,rgba(91,108,240,.32),transparent 70%),radial-gradient(60% 75% at 0% 100%,rgba(123,63,228,.26),transparent 70%),radial-gradient(60% 75% at 100% 100%,rgba(142,208,247,.5),transparent 70%),#F7F7FB!important}
  html:not(.ksp-off) #refs .cx-viz .refs-v,html:not(.ksp-off) .cx.refs .cx-viz video{position:absolute;left:clamp(32px,3.5vw,56px);top:clamp(32px,3.5vw,56px);width:115%;max-width:none;height:auto;aspect-ratio:4/3;border-radius:12px 0 0 0;box-shadow:0 24px 48px -24px rgba(10,10,10,.3)}
}

/* Heroes don't take the section padding (2026-10-07, /about/: 187px under the buttons, then 187px again above the team). A hero gets
   a moderate top and bottom; the section right after it starts closer; buttons sit 40px under the lede. */
@media (min-width:1024px){
  html:not(.ksp-off) #hero.sec,html:not(.ksp-off) section.hero{padding-top:clamp(120px,10vw,160px)!important;padding-bottom:clamp(96px,8vw,128px)!important}
  html:not(.ksp-off) #hero.sec + .sec,html:not(.ksp-off) section.hero + .sec{padding-top:clamp(96px,8vw,128px)!important}
  html:not(.ksp-off) #hero :is(.ctas,.acts,.v2-acts,.hero-ctas),html:not(.ksp-off) section.hero :is(.ctas,.acts,.v2-acts){margin-top:40px!important}
}
@media (max-width:1023px){
  html:not(.ksp-off) #hero.sec,html:not(.ksp-off) section.hero{padding-top:96px!important;padding-bottom:72px!important}
  html:not(.ksp-off) #hero.sec + .sec,html:not(.ksp-off) section.hero + .sec{padding-top:72px!important}
}
/* centred hero stacks (/about/ and friends): heading→line 24px, line→buttons 40px */
html:not(.ksp-off) #hero .stack > .lede{margin-top:2px!important}
html:not(.ksp-off) #hero .stack > div:last-child{margin-top:18px!important}
/* the "See for yourself" label above the home demo was cut (2026-10-07); the deck keeps the breathing room it gave; [data-scroll-demo] links now scroll to the deck */
@media (min-width:1024px){html:not(.ksp-off) .v2-hero .v2-stage{margin-top:clamp(56px,7vh,80px)!important}}