/* Kyros site · spacing + type system (T-0014, Oct 2026).
   Loaded after every page stylesheet so these rules win. One hero top, one section rhythm,
   one H1 and one H2 size site-wide (benchmarked against well-built Framer templates). */
:root{
  --hero-top:clamp(148px,5vw + 128px,200px);   /* hero's first element; H1 lands ~136px under the fixed nav */
  --section-y:clamp(72px,4.5vw + 55px,120px);  /* every section's top and bottom padding */
  --head-gap:clamp(40px,2.5vw + 20px,56px);    /* section heading block -> content */
  --card-gap:clamp(16px,1.4vw,20px);
  --stack-top:120px;                           /* pinned card stacks sit below the nav */
  --h1:clamp(40px,2.3vw + 31px,64px);
  --h2:clamp(32px,1.6vw + 25px,48px);
}

/* ---------- type: one H1, one H2 ---------- */
main h1{font-size:var(--h1)!important;line-height:1.06!important}
main h2{font-size:var(--h2)!important;line-height:1.08!important}
.eyebrow,.eyebrow-dot,.hm-eyebrow{font-size:12px;letter-spacing:.14em}

/* ---------- heroes: own space under the nav ---------- */
.hm-hero-top{padding-top:calc(var(--hero-top) + 34px)}   /* Home has no eyebrow above its H1 */
.vo-hero-in,.in-hero-in,.su-hero-in,.cmp-hero-in{padding-top:var(--hero-top)}
.pr-hero,.pa-hero,.ab-hero{padding-top:var(--hero-top)}
.in-hero,.su-hero,.pa-hero,.ab-hero,.cmp-hero,.cmp-hero--sw{min-height:0}

/* ---------- one section rhythm ---------- */
.hm-stats,.hm-steps,.hm-portal,.hm-number,.hm-changes,
.vo-stats,.vo-ledger,.vo-two,
.in-care,.in-every,.in-inbox,.in-with,
.pr-cmp,.pr-min,
.su-topics,.su-write,
.pa-rates,.pa-apply,.pa-terms,
.ab-story,.ab-rules,.ab-contact,
.cmp-all,.cmp-glance,.cmp-why,
.faq{padding-top:var(--section-y);padding-bottom:var(--section-y);min-height:0}

/* ---------- FAQ: heading block sits on the same rhythm (icon + eyebrow above the H2) ---------- */
.faq-head{gap:14px}
.faq-head svg{width:24px;height:24px}
.faq{padding-top:calc(var(--section-y) - 44px)}

/* ---------- compare pages: switcher pills sit above the H1, so start the hero higher ---------- */
.cmp-hero--sw .cmp-hero-in{padding-top:calc(var(--hero-top) - 76px)}
@media (max-width:900px){.cmp-hero--sw .cmp-hero-in{padding-top:calc(var(--hero-top) - 40px)}.cmp-switch{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:8px!important}.cmp-switch-label{width:100%;text-align:center}}

/* ---------- closing call-to-action: pill, one-line title, one-line copy, two buttons ---------- */
.closing{min-height:0;padding:calc(var(--section-y) - 26px) var(--gutter) var(--section-y)}
.closing h2{margin:24px auto 14px}
.closing .copy{max-width:none}
.closing .actions{margin-top:32px}
@media (max-width:700px){.closing h2,.closing .copy{text-wrap:balance}}

/* ---------- "Live in three steps" (Home) and "Every caller, handled with care" (Industries):
   same card layout; text block starts at the same height under the art so titles always line up ---------- */
.hm-step{justify-content:flex-start;padding-top:322px}
.in-care .txt{top:322px;bottom:auto}
.hm-step .lead,.in-care .lead{color:#4e5a6b}
.hm-steps-head{margin-bottom:var(--head-gap)}
.hm-steps-grid{gap:var(--card-gap)}

/* ---------- pinned card stacks (data-stack="cards"): framed cards under the nav, only the card moves ---------- */
.stack[data-stack="cards"] .stack-panel{width:min(1240px,100% - 2*var(--gutter))!important;margin-inline:auto;box-sizing:border-box;
  padding:clamp(28px,3.9vw,56px)!important;background:#f4f7fb!important;border-radius:28px!important;
  box-shadow:0 0 0 1px rgba(20,30,50,.06),0 30px 60px -36px rgba(15,25,40,.35)!important}
.stack[data-stack="cards"].is-pinned{height:calc((var(--n,3) * .8 + .4) * 100vh);
  margin-top:calc(24px - var(--section-y));margin-bottom:calc(144px + min(620px,100vh - 144px) - 100vh)}
.stack[data-stack="cards"].is-pinned .stack-stage{padding-top:var(--stack-top);padding-bottom:24px;place-items:start center}
.stack[data-stack="cards"].is-pinned .stack-panel{height:min(620px,100vh - 144px)!important;display:flex;align-items:center;
  transform:translate3d(0,calc(var(--shift,0px) - var(--covered,0) * 24px),0) scale(calc(1 - var(--covered,0) * .06));
  transform-origin:50% 0;filter:brightness(calc(1 - var(--covered,0) * .12))}
.stack[data-stack="cards"]:not(.is-pinned) .stack-stage{gap:var(--card-gap)}
/* panel interiors fill the card instead of the page */
.stack[data-stack="cards"] .vo-panel-in,.stack[data-stack="cards"] .in-kind-grid,.stack[data-stack="cards"] .cmp-sw-grid{width:100%;max-width:none}
.stack[data-stack="cards"].is-pinned .vo-panel-win,.stack[data-stack="cards"].is-pinned .in-kind-frame{height:min(460px,100vh - 260px)}
.vo-flow .stack.is-pinned{margin-top:calc(24px - var(--section-y));margin-bottom:calc(144px + min(620px,100vh - 144px) - 100vh)}
.vo-flow,.in-kinds,.cmp-sw{padding-block:var(--section-y)}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.js .in-statement{margin-top:0}}

/* ---------- motion (shared timing, benchmarked on the Framer references) ---------- */
:root{--k-ease:cubic-bezier(.16,1,.3,1)}
.site-nav-shell{transition-duration:.6s}
@keyframes k-rise{from{opacity:.001;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes k-rise-lg{from{opacity:.001;transform:translate3d(0,48px,0)}to{opacity:1;transform:none}}
@keyframes k-drop{from{opacity:.001;transform:translate3d(0,-24px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .site-header{animation:k-drop .8s var(--k-ease) both}
  .js main>section:first-of-type :is(.eyebrow,.eyebrow-dot,.cmp-switch){animation:k-rise 1s var(--k-ease) .05s both}
  .js main>section:first-of-type h1{animation:k-rise 1s var(--k-ease) .1s both}
  .js main>section:first-of-type h1+p{animation:k-rise 1s var(--k-ease) .2s both}
  .js main>section:first-of-type :is(.btns,.hm-hero-btns,.cmp-hero-btns,.pr-switch){animation:k-rise 1s var(--k-ease) .3s both}
  .js main>section:first-of-type .hero-window{animation:k-rise-lg 1.2s var(--k-ease) .4s both}
  .rv{opacity:.001;transform:translate3d(0,24px,0);transition:opacity 1s var(--k-ease) var(--rv-d,0s),transform 1s var(--k-ease) var(--rv-d,0s)}
  .rv.in{opacity:1;transform:none}
}

/* ---------- hero washes fade fully to white inside their own section (like Pricing): no hard line ---------- */
.hm-hero-wash,.in-hero-wash,.vo-hero-bg,.pa-hero-bg,.su-hero-wash,.ab-hero-wash,.cmp-hero-wash{
  top:0!important;bottom:auto!important;height:min(100%,760px)!important;
  -webkit-mask-image:linear-gradient(#000 45%,transparent 100%)!important;mask-image:linear-gradient(#000 45%,transparent 100%)!important}

/* ---------- Pricing: more air between the hero text and the Monthly / Annually switch ---------- */
.pr-switch{margin-top:clamp(24px,3vw,40px)}

/* ---------- Home: steps heading centred like Industries; less dead space under the hero device ---------- */
.hm-steps-head{justify-content:center;text-align:center}
.hm-steps-ttl{align-items:center}
.hm-hero{padding-bottom:clamp(24px,3vw,48px)!important}