/* Soft, slightly uneven corners for cards, steps and notes on the Kindful homepage. */
.card,.convo,.status-note{border-radius:30px 34px 28px 32px / 28px 30px 34px 26px}
.step{border-radius:26px 30px 24px 28px / 24px 28px 30px 22px}

/* All section and page labels: larger, same label style, so they sit clearly above the headings */
.eyebrow{font-size:clamp(16px,1.6vw,20px);letter-spacing:.16em;margin-bottom:20px;gap:14px}
.eyebrow::before{width:58px;height:16px}
@media (max-width:640px){.eyebrow{font-size:16px;margin-bottom:14px}.eyebrow::before{width:44px;height:14px}}

/* Next-section arrow, same spot on every page */
.kh-hero{position:relative}
.hero-next{position:absolute;right:clamp(8px,1vw,16px);bottom:clamp(10px,1.6vh,18px);width:clamp(64px,5.6vw,78px);height:clamp(64px,5.6vw,78px);min-height:0;padding:0;justify-content:center;transition:transform .25s var(--ease,ease)}
.hero-next:hover{transform:translateY(2px)}
.hero-next svg{position:relative;display:block;width:30%;height:auto;overflow:visible}
.hero-next .hn-arrow{transform-box:fill-box;transform-origin:50% 50%;animation:hn-bob 2.8s ease-in-out infinite}
@keyframes hn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.hero-next .hn-arrow{animation:none}}

/* Fit the Kindful frames to a laptop screen */
section{padding-block:clamp(48px,6.4vh,76px)}
.kh-hero{padding-block:clamp(28px,4.2vh,52px) clamp(40px,5.6vh,64px)}

/* Kindful opening frame: video and wordmark scale with the window height so the frame fits a laptop screen */
.kh-hero .film video{width:min(400px,calc((100vh - 250px) * 9 / 16));max-width:none;aspect-ratio:9/16}
.kh-hero .lockup{--w:min(440px,80vw,calc(100vh * .42)) !important}

/* Kindful opening frame: use more of the screen width, top-align the text and the film, and let the film grow with the window height */
.kh-hero > .container{max-width:min(1320px,100%)}
.kh-hero .split{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(40px,5vw,104px)}
.kh-hero .film{align-self:start;padding-top:clamp(0px,2vh,24px)}
.kh-hero .film video{width:min(420px,calc((100vh - 260px) * 9 / 16))}

/* Phones: the Kindful opening frame stacks text and video in one column */
@media (max-width:900px){
  .kh-hero .split{grid-template-columns:1fr;gap:36px}
  .kh-hero .film{padding-top:0}
  .kh-hero .film video{width:min(360px,100%)}
}

/* Phones: room under the Kindful opening frame for the next-section arrow */
@media (max-width:640px){
  .kh-hero{padding-bottom:104px}
  .hero-next{width:56px;height:56px;right:12px;bottom:14px}
}

/* Phone menu icon drawn in CSS, so it shows even when the page is opened from disk */
.menu-btn .ico{-webkit-mask:none;mask:none;background:none;position:relative;width:22px;height:14px;box-sizing:border-box;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-btn .ico::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor;transform:translateY(-1px)}