/* ==========================================================================
   KAI HER — landing page styles
   Scoped with a .kh- prefix so nothing here collides with the global sheets.
   Loaded AFTER style-new.css / responsive.css / new-responsive.css / belowSections.css
   ========================================================================== */

/* --- Inter, with the path corrected for this folder --------------------- */
@font-face { font-family: 'InterKH'; src: url('../inter-font-family/Inter-Light-BETA.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'InterKH'; src: url('../inter-font-family/Inter-Regular.otf')    format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'InterKH'; src: url('../inter-font-family/Inter-Medium.otf')     format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'InterKH'; src: url('../inter-font-family/Inter-SemiBold.otf')   format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'InterKH'; src: url('../inter-font-family/Inter-Bold.otf')       format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --kh-coral:     #E8705F;
  --kh-coral-dim: #F2998B;
  --kh-peach:     #F0A878;
  --kh-lavender:  #B9A7D9;
  --kh-green:     #9BC4A2;
  --kh-ink:       #1B1B1B;
  --kh-ink-soft:  #2A2A2A;
  --kh-dark:      #060606;
  --kh-dark-2:    #181818;
  --kh-grey:      #F2F4F5;
  --kh-muted:     #C5C5C5;
  --kh-font:      'InterKH', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.kh-page { font-family: var(--kh-font); overflow-x: hidden; }
.kh-page section { position: relative; }

/* Footer wordmark. Deliberately img/kai/logo-her.png and not the nav's
   logo-kai-her.png — the nav version letters "ai her" in near-white for the dark
   header, which would vanish on this light footer. This one letters them coral. */
.kh-footer-logo { height: 52px !important; width: auto !important; display: block; }

/* --- nav container ------------------------------------------------------
   Deliberately NOT .cont-fluid. That class carries `.cont-fluid img {width:60px;
   height:60px}` at eight different breakpoints — several with !important — which
   squashed the brand mark into a square and shrank the store badges. This is the
   same padding scale, without the image rules. */
.kh-nav-container { padding: 0 150px; }

/* Height is pinned rather than left to the logo, so this header is exactly as
   tall as Kai Core's: 8px navbar padding + 5px brand padding + a 60px logo,
   twice over, is 86px. The wordmark here stays at 48px so it is not upscaled. */
.kh-page .navbar { min-height: 86px; }

/* --- the Kai Her mark in the nav --- */
/* The artwork is 89x54 and its lettering is near-white, so it is meant for the
   dark header. Height is fixed and width follows, to keep the ratio. */
.kh-brand img { height: 48px; width: auto; display: block; }

/* --- store badges in the desktop nav --- */
/* The badge art is 152px tall, so 48px is a clean downscale and stays sharp. */
.kh-nav-stores { gap: 12px; }
.kh-nav-stores img { width: 160px; height: 48px; display: block; object-fit: contain; }

@media (max-width: 1450px) {
  .kh-nav-container { padding: 0 70px; }
  .kh-nav-stores img { width: 140px; height: 42px; }
}
@media (max-width: 1199.98px) {
  .kh-page .navbar { min-height: 76px; }
}
@media (max-width: 991.98px) {
  .kh-nav-container { padding: 0 40px; }
}
@media (max-width: 767.98px) {
  .kh-nav-container { padding: 0 20px; }
  .kh-page .navbar { min-height: 70px; }
}
@media (max-width: 575.98px) {
  .kh-brand img { height: 40px; }
}

/* --- shared type ------------------------------------------------------- */
.kh-eyebrow {
  /* was 13px — Kai Core .faq-label is 18px at every width */
  font-size: 18px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--kh-coral); margin-bottom: 22px;
}
/* was 64px — Kai Core section heading (.smart-tools-head h1) is 56px on desktop */
.kh-h2 { font-weight: 600; font-size: 56px; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 20px; }
/* was 20px — Kai Core section body (.cycle-sense-body-text) is 17px on desktop */
.kh-sub { font-size: 17px; font-weight: 400; line-height: 1.55; max-width: 640px; }
.kh-accent { color: var(--kh-coral); }
.kh-on-dark .kh-h2 { color: #fff; }
.kh-on-dark .kh-sub { color: var(--kh-muted); }
.kh-on-light .kh-h2 { color: var(--kh-ink); }
.kh-on-light .kh-sub { color: #5B5B5B; }
.kh-center { text-align: center; }
.kh-center .kh-sub { margin-left: auto; margin-right: auto; }

/* --- buttons ----------------------------------------------------------- */
.kh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--kh-coral); color: #fff; border: 0;
  /* was 17px — Kai Core CTA (.download-text-title) is 18px */
  font-size: 18px; font-weight: 600; text-decoration: none;
  padding: 16px 34px; border-radius: 999px;
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.kh-btn:hover { background: #d8604f; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(232,112,95,.32); }
.kh-btn-ghost {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px);
}
.kh-btn-ghost:hover { background: rgba(255,255,255,.2); box-shadow: none; }

/* --- reveal on scroll --------------------------------------------------- */
.kh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.kh-reveal.kh-in { opacity: 1; transform: none; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.kh-hero {
  background: linear-gradient(0deg, var(--kh-dark) 2%, var(--kh-dark-2) 100%);
  padding: 190px 0 110px;
  overflow: hidden;
}
.kh-hero::after {
  content: ''; position: absolute; width: 760px; height: 760px; border-radius: 50%;
  top: -220px; right: -240px; pointer-events: none;
  background: radial-gradient(circle, rgba(232,112,95,.20) 0%, rgba(232,112,95,0) 68%);
}
.kh-hero-copy { position: relative; z-index: 2; }
.kh-hero h1 {
  /* was 76px. Kai Core's own hero is 170px, but that headline is full-bleed;
     this one sits in a half-width column, so it takes Core's largest
     in-container display size instead (.cycle-sense-headline, 80px). */
  font-weight: 600; font-size: 80px; line-height: 1.02; letter-spacing: -.025em;
  color: #fff; margin-bottom: 26px;
}
/* Kai Core's hero body (.sliders-content p) is 23px, bigger than its section body */
.kh-hero .kh-sub { font-size: 23px; margin-bottom: 36px; }
.kh-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.kh-hero-stores { display: flex; gap: 12px; margin-top: 26px; }
.kh-hero-stores img { width: 132px; height: 40px; object-fit: contain; }

/* Hero visual — a composed, transparent-background PNG that already carries
   its own device frame and overlay art. No frame of ours around it. */
.kh-hero-visual-wrap { position: relative; display: flex; justify-content: center; }
/* soft halo so the artwork lifts off the near-black background */
.kh-hero-visual-wrap::before {
  content: ''; position: absolute; z-index: 1;
  width: 88%; aspect-ratio: 1; top: 50%; left: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 42%, rgba(255,255,255,0) 70%);
}
.kh-hero-visual {
  position: relative; z-index: 2;
  width: 100%; max-width: 600px; height: auto; display: block;
  filter: drop-shadow(0 34px 70px rgba(0,0,0,.55));
}

/* ==========================================================================
   2. KEY FEATURES
   ========================================================================== */
.kh-features { background: #fff; padding: 110px 0; }
.kh-feature-card {
  height: 100%; background: var(--kh-grey); border-radius: 24px; padding: 36px 30px;
  border: 1px solid #E8EBED; transition: transform .35s ease, box-shadow .35s ease;
}
.kh-feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(27,27,27,.09); }
.kh-feature-icon {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
}
/* the icons come at different sizes and ratios, so contain them in one box */
.kh-feature-icon img { width: 24px; height: 24px; object-fit: contain; }
/* was 22px — Kai Core card title (.smart-goals-title) is 28px, flat at every width */
.kh-feature-card h3 { font-size: 28px; font-weight: 600; color: var(--kh-ink); margin-bottom: 10px; }
.kh-feature-card p { font-size: 16px; line-height: 1.6; color: #5B5B5B; margin: 0; }

/* ==========================================================================
   3. CYCLE JOURNEY  (the four-phase wheel)
   ========================================================================== */
.kh-journey { background: #0B0B0B; padding: 120px 0; }
.kh-journey::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(232,112,95,.13) 0%, rgba(11,11,11,0) 58%);
}
.kh-journey > .container { position: relative; z-index: 2; }

/* Cards left and right, wheel in the middle spanning both rows. */
.kh-cycle-grid {
  display: grid;
  /* The middle track is pinned. Left as `auto` it collapsed to roughly 285px,
     and the centre text — set in px — then overflowed the disc. */
  grid-template-columns: minmax(0, 1fr) 430px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center; gap: 26px 48px;
  max-width: 1180px; margin: 56px auto 0;
}
.kh-cell-tl { grid-column: 1; grid-row: 1; }
.kh-cell-bl { grid-column: 1; grid-row: 2; }
.kh-cell-tr { grid-column: 3; grid-row: 1; }
.kh-cell-br { grid-column: 3; grid-row: 2; }

/* --- the wheel --- */
/* 430 rather than 370: the centre disc is 45% of the wheel, and at 370 that left
   it only ~166px across — "Your Cycle / Your Power" was running over the edges
   onto the quadrants. */
.kh-wheel-wrap {
  position: relative; width: 100%; max-width: 430px;
  grid-column: 2; grid-row: 1 / span 2;
  /* everything inside sizes against the wheel, not the viewport, so the text
     keeps its proportions whatever width the wheel ends up at */
  container-type: inline-size;
}
/* no rotation — each quadrant carries its own angles */
.kh-wheel {
  display: block; width: 100%; aspect-ratio: 1;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .3));
}

.kh-wheel-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
/* "Your Cycle" sits lighter than "Your Power", as in the design */
/* px values are the fallback; cqw is what actually applies, so the text shrinks
   with the wheel instead of spilling past the disc */
.kh-wheel-center span {
  display: block; font-size: 19px; font-size: 4.4cqw;
  font-weight: 500; color: #5A6270;
  line-height: 1.35; letter-spacing: -.01em; white-space: nowrap;
}
.kh-wheel-center strong {
  display: block; font-size: 19px; font-size: 4.4cqw;
  font-weight: 700; color: var(--kh-ink);
  line-height: 1.35; letter-spacing: -.01em; white-space: nowrap;
}
.kh-wheel-heart {
  width: 28px; height: 28px; width: 6.4cqw; height: 6.4cqw;
  margin-top: 12px; margin-top: 2.8cqw;
}

/* The four labels sit in the middle of each quadrant. The band runs from r=84
   to r=178 of a 400 box, so its centre is r=131 — on the diagonal that is
   93/400 = 23% out from the middle. */
.kh-wheel-wrap .kh-wheel-label {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; pointer-events: none;
  grid-column: auto; grid-row: auto;      /* they share the .kh-cell-* classes */
}
.kh-wheel-wrap .kh-wheel-label img {
  width: 18px; height: 18px; width: 4.2cqw; height: 4.2cqw;
  object-fit: contain; margin-bottom: 4px;
}
.kh-wheel-wrap .kh-wheel-label strong {
  font-size: 15px; font-size: 3.5cqw;
  font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.kh-wheel-wrap .kh-wheel-label em {
  font-size: 12px; font-size: 2.8cqw;
  font-style: normal; opacity: .9; white-space: nowrap;
}
.kh-wheel-wrap .kh-cell-tl { top: 27%; left: 27%; }
.kh-wheel-wrap .kh-cell-tr { top: 27%; left: 73%; }
.kh-wheel-wrap .kh-cell-br { top: 73%; left: 73%; }
.kh-wheel-wrap .kh-cell-bl { top: 73%; left: 27%; }

/* --- the four phase cards --- */
.kh-phase-card { background: #fff; border-radius: 20px; padding: 22px 20px; }
.kh-phase-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kh-phase-card-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
/* the icons ship at four different viewBoxes, so contain them in one box */
.kh-phase-card-icon img { width: 20px; height: 20px; object-fit: contain; display: block; }
/* was 19px — Kai Core small card title (.discover-insights-title) is 24px, flat */
.kh-phase-card h3 { font-size: 24px; font-weight: 700; margin: 0 0 2px; }
.kh-phase-card-days { font-size: 14px; color: #8A9199; }
.kh-phase-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.kh-phase-card li {
  display: flex; align-items: flex-start; gap: 10px;
  /* was 15.5px — Kai Core card body is 16px */
  font-size: 16px; line-height: 1.45; color: var(--kh-ink-soft);
}
.kh-tick { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }

/* ==========================================================================
   4. PERSONALIZED GUIDANCE
   ========================================================================== */
.kh-guidance { background: var(--kh-grey); padding: 110px 0; overflow: hidden; }
/* decorative pattern — sits behind the cards, never catches a click */
.kh-guidance::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/kai-her/background-pattern.svg') center / cover no-repeat;
}
.kh-guidance > .container { position: relative; z-index: 2; }
.kh-g-card {
  height: 100%; background: #fff; border-radius: 24px; overflow: hidden;
  border: 1px solid #E4E8EA; transition: transform .35s ease, box-shadow .35s ease;
}
.kh-g-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(27,27,27,.1); }
.kh-g-media {
  position: relative; overflow: hidden;
  height: 186px; background: #E9ECEE;
  display: flex; align-items: center; justify-content: center;
}
.kh-g-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kh-g-media span { color: #9AA3A8; font-size: 12px; letter-spacing: .08em; text-align: center; padding: 0 12px; }
.kh-g-body { padding: 26px 26px 30px; }
/* was 20px — Kai Core small card title is 24px */
.kh-g-body h3 { font-size: 24px; font-weight: 600; color: var(--kh-ink); margin-bottom: 8px; }
/* was 15px — Kai Core card body is 16px */
.kh-g-body p { font-size: 16px; line-height: 1.6; color: #5B5B5B; margin: 0; }

/* symptom chips inside the Symptom Log card — they sit below the copy,
   so the body above them drops its bottom padding */
.kh-g-body-tight { padding-bottom: 16px; }
.kh-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 26px 30px; }
.kh-chip {
  /* was 13px — Kai Core .enroll-btn is 14px */
  font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px;
  background: #F2F4F5; color: var(--kh-ink-soft); border: 1px solid #E4E8EA;
}
.kh-chip-on { background: rgba(232,112,95,.1); border-color: rgba(232,112,95,.3); color: var(--kh-coral); }

/* category chips under the section */
.kh-cat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 54px; }
.kh-cat-chip {
  /* was 15px — Kai Core card body is 16px */
  font-size: 16px; font-weight: 500; padding: 11px 24px; border-radius: 999px;
  background: #fff; border: 1px solid #DFE4E7; color: var(--kh-ink-soft);
}

/* ==========================================================================
   5. FAQ  (reuses the site accordion, re-skinned lightly)
   ========================================================================== */
.kh-faq { background: #fff; padding: 110px 0 100px; }
.kh-faq .accordion-item { border: 0; border-bottom: 1px solid #E6E9EB; background: transparent; }
.kh-faq .accordion-button {
  background: transparent; box-shadow: none; padding: 26px 0;
  /* was 19px — Kai Core FAQ question is 22px on desktop */
  font-size: 22px; font-weight: 600; color: var(--kh-ink);
}
.kh-faq .accordion-button:not(.collapsed) { color: var(--kh-coral); background: transparent; }
.kh-faq .accordion-button:focus { box-shadow: none; }
/* was 16px — Kai Core FAQ answer (.accordion-body) is 20px */
.kh-faq .accordion-body { padding: 0 0 26px; font-size: 20px; line-height: 1.65; color: #5B5B5B; }

/* ==========================================================================
   6. DOWNLOAD CTA
   ========================================================================== */
.kh-cta { background: linear-gradient(180deg, var(--kh-dark-2) 0%, var(--kh-dark) 100%); padding: 120px 0; text-align: center; }
.kh-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(232,112,95,.15) 0%, rgba(6,6,6,0) 62%);
}
.kh-cta > .container { position: relative; z-index: 2; }
.kh-cta-stores { display: flex; justify-content: center; gap: 14px; margin-top: 30px; }
.kh-cta-stores img { width: 150px; height: 46px; object-fit: contain; }
/* The fatsecret attribution badge. Its SVG ships with its own white pill and
   black outline, so it needs no plate of ours to stay legible on the dark band. */
/* was margin-top: 26px, which sat it too close to the store badges and read as
   part of that group. This is a secondary attribution, so it gets clear air.
   The SVG is 212x40 with its white pill filling the whole box edge to edge, so
   every pixel of this margin shows as real gap - there is no padding inside it. */
.kh-cta-fatsecret { display: flex; justify-content: center; margin-top: 38px; }
.kh-cta-fatsecret img { width: 170px; height: auto; display: block; }

/* ==========================================================================
   RESPONSIVE
   The breakpoint edges below are Kai Core's, not Bootstrap's, so the three
   pages change size at the same widths: 1800 / 1200 / 1024 / 768 / 480.
   ========================================================================== */
@media (min-width: 1800px) {
  /* Kai Core at 1920px: display 90px, section heading 60px, hero body 26px,
     section body 18px, FAQ question 26px */
  .kh-hero h1 { font-size: 90px; }
  .kh-h2 { font-size: 60px; }
  .kh-hero .kh-sub { font-size: 26px; }
  .kh-sub { font-size: 18px; }
  .kh-faq .accordion-button { font-size: 26px; }
}

@media (max-width: 1199.98px) {
  /* was 60px / 52px — Kai Core at 1280px: display 75px, section heading 56px */
  .kh-hero h1 { font-size: 75px; }
  .kh-h2 { font-size: 56px; }
}

@media (max-width: 1024px) {
  /* Kai Core at 1024px: display 52px, section heading 42px, hero body 20px,
     section body 15px, FAQ question 20px */
  .kh-hero h1 { font-size: 52px; }
  .kh-h2 { font-size: 42px; }
  .kh-hero .kh-sub { font-size: 20px; }
  .kh-sub { font-size: 15px; }
  .kh-faq .accordion-button { font-size: 20px; }
  /* Kai Core drops its card body to 14px from 1024px down */
  .kh-feature-card p, .kh-g-body p, .kh-phase-card li { font-size: 14px; }
}

@media (max-width: 991.98px) {
  .kh-hero { padding: 150px 0 90px; text-align: center; }
  /* was 50px — Kai Core display size at 1024px is 52px */
  .kh-hero h1 { font-size: 52px; }
  .kh-hero .kh-sub { margin-inline: auto; }
  .kh-hero-actions, .kh-hero-stores { justify-content: center; }
  /* the artwork now sits above the copy, so the old top margin becomes a gap below */
  .kh-hero-visual-wrap { margin: 0 0 12px; }
  .kh-hero-visual { max-width: 460px; }
  /* Kai Core at 1024px: section heading 42px (already matched), body 15px */
  .kh-h2 { font-size: 42px; }
  /* was 18px */
  .kh-sub { font-size: 15px; }
  .kh-hero .kh-sub { font-size: 20px; }   /* Core hero body at 1024px */
  .kh-features, .kh-guidance, .kh-faq { padding: 80px 0; }
  .kh-journey { padding: 90px 0; }
  /* Three columns no longer fit — wheel on top, cards two-up beneath it. */
  .kh-cycle-grid {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto;
    gap: 18px; margin-top: 40px;
  }
  .kh-wheel-wrap { grid-column: 1 / span 2; grid-row: 1; margin: 0 auto 14px; max-width: 320px; }
  .kh-cell-tl { grid-column: 1; grid-row: 2; }
  .kh-cell-tr { grid-column: 2; grid-row: 2; }
  .kh-cell-bl { grid-column: 1; grid-row: 3; }
  .kh-cell-br { grid-column: 2; grid-row: 3; }
  /* the labels inside the wheel keep their own absolute positions */
  .kh-wheel-wrap .kh-cell-tl, .kh-wheel-wrap .kh-cell-tr,
  .kh-wheel-wrap .kh-cell-bl, .kh-wheel-wrap .kh-cell-br { grid-column: auto; grid-row: auto; }
}

@media (max-width: 768px) {
  /* Below 992px the hero is full-width and centred, so Kai Core's own hero
     curve applies directly from here down: 48px at 768px, 30px at 414px. */
  /* was 40px */
  .kh-hero h1 { font-size: 50px; }
  /* was 34px — Kai Core section heading at 768px is 28px */
  .kh-h2 { font-size: 28px; }
  /* was 17px — Kai Core section body at 768px is 16px */
  .kh-sub { font-size: 16px; }
  .kh-hero .kh-sub { font-size: 16px; }   /* Core hero body at 768px */
  /* was 11px — Kai Core .faq-label never drops below 18px */
  .kh-eyebrow { font-size: 18px; letter-spacing: .15em; }
  /* Phones: the wheel is dropped and the four cards run straight down. Its
     labels repeat what the cards already say, and at this width it was eating a
     whole screen before the first card.
     To bring it back, delete the display:none and restore rows 2-5 below. */
  .kh-wheel-wrap { display: none; }
  .kh-cycle-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); gap: 14px; }
  .kh-cell-tl { grid-column: 1; grid-row: 1; }
  .kh-cell-tr { grid-column: 1; grid-row: 2; }
  .kh-cell-br { grid-column: 1; grid-row: 3; }
  .kh-cell-bl { grid-column: 1; grid-row: 4; }
  .kh-phase-card { padding: 20px 18px; }
  /* was 18px / 15px — Kai Core's card titles and body are flat across widths */
  .kh-phase-card h3 { font-size: 24px; }
  .kh-phase-card li { font-size: 14px; }
  /* Kai Core at 768px: FAQ question 18px, FAQ answer 16px */
  .kh-faq .accordion-button { font-size: 18px; }
  .kh-faq .accordion-body { font-size: 16px; }
  .kh-cta { padding: 84px 0; }
  /* 150x46, same as the Kai family page download badges on phones */
  .kh-cta-stores img { width: 150px; height: 46px; }
  .kh-hero-stores img { width: 118px; height: 36px; }
  .kh-hero-visual { max-width: 100%; }
  .kh-hero-visual-wrap { margin: 0 0 8px; }
  .kh-hero { padding: 120px 0 72px; }
}

@media (max-width: 480px) {
  /* Kai Core at 414px: display 34px, section heading 28px, section body 14px,
     FAQ question 16px, FAQ answer 12px, .enroll-btn 16px.
     (was 34px hero / 15px button before the port.) */
  .kh-hero h1 { font-size: 34px; }
  .kh-h2 { font-size: 28px; }
  .kh-sub { font-size: 14px; }
  .kh-faq .accordion-button { font-size: 16px; }
  .kh-faq .accordion-body { font-size: 12px; }
  .kh-btn { font-size: 16px; padding: 14px 26px; }
  /* side by side like the Kai family page; wraps only on very narrow screens */
  .kh-cta-stores { flex-wrap: wrap; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .kh-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   KAI CORE TYPE LADDER

   Every size below is Kai Core's, measured off style-new.css,
   belowSections.css and new-responsive.css, so this page, Kai Core and the
   other product page all render the same size at the same width. The
   breakpoint edges are Kai Core's too (1600 / 1400 / 1200 / 992 / 768 / 576),
   not Bootstrap's.

   This block comes last on purpose: it supersedes the per-section sizes above,
   which are kept so the page's own scale is still on record.

   Two Kai Core values are deliberately not carried over:
     - its 160-170px hero, which only works because that headline is
       full-bleed; both product heroes share their row with artwork, so they
       take Core's largest in-container display size instead.
     - its @media (max-width: 400px) rule that puts the display size back up
       to 36px after dropping it to 34px at 575px. That reads as a mistake.
   ========================================================================== */

/* 1400-1599px — Kai Core's main desktop band */
.kh-hero h1 { font-size: 80px; }
.kh-h2 { font-size: 56px; }
.kh-hero .kh-sub { font-size: 23px; }
.kh-sub { font-size: 17px; }
.kh-faq .accordion-button { font-size: 22px; }
.kh-faq .accordion-body { font-size: 20px; }
.kh-feature-card h3 { font-size: 28px; }
.kh-phase-card h3, .kh-g-body h3 { font-size: 24px; }
.kh-feature-card p, .kh-g-body p, .kh-phase-card li { font-size: 16px; }
.kh-eyebrow { font-size: 18px; }
.kh-btn { font-size: 18px; }

@media (min-width: 1600px) {
  .kh-hero h1 { font-size: 90px; }
  .kh-hero .kh-sub { font-size: 26px; }
  .kh-sub { font-size: 18px; }
  /* Kai Core is back to 24px here - its 22px band is only 1400-1599 */
  .kh-faq .accordion-button { font-size: 24px; }
}

/* Kai Core holds its section heading at 56px until 1800px */
@media (min-width: 1800px) {
  .kh-h2 { font-size: 60px; }
  .kh-faq .accordion-button { font-size: 26px; }
}

/* Kai Core drops its section heading to 18px below 380px */
@media (max-width: 379px) {
  .kh-h2 { font-size: 18px; }
}

@media (max-width: 1399px) {
  .kh-hero h1 { font-size: 56px; }
  .kh-h2 { font-size: 56px; }
  .kh-hero .kh-sub { font-size: 23px; }
  .kh-sub { font-size: 16px; }
  .kh-faq .accordion-button { font-size: 24px; }
}

@media (max-width: 1199px) {
  .kh-hero h1 { font-size: 48px; }
  .kh-h2 { font-size: 42px; }
  .kh-hero .kh-sub { font-size: 20px; }
  .kh-sub { font-size: 15px; }
  .kh-faq .accordion-button { font-size: 20px; }
  .kh-feature-card p, .kh-g-body p, .kh-phase-card li { font-size: 14px; }
}

@media (max-width: 991px) {
  .kh-hero h1 { font-size: 50px; }
  .kh-h2 { font-size: 28px; }
  .kh-hero .kh-sub { font-size: 20px; }
  .kh-sub { font-size: 16px; }
  .kh-faq .accordion-button { font-size: 18px; }
}

/* Kai Core drops its FAQ answer one pixel earlier than the rest */
@media (max-width: 768px) {
  .kh-faq .accordion-body { font-size: 16px; }
}

@media (max-width: 767px) {
  .kh-hero h1 { font-size: 40px; }
  .kh-h2 { font-size: 28px; }
  .kh-hero .kh-sub { font-size: 16px; }
  .kh-sub { font-size: 15px; }
  .kh-faq .accordion-button { font-size: 16px; }
  .kh-faq .accordion-body { font-size: 16px; }
}

@media (max-width: 575px) {
  .kh-hero h1 { font-size: 34px; }
  .kh-sub { font-size: 14px; }
  .kh-faq .accordion-button { font-size: 15px; }
  .kh-faq .accordion-body { font-size: 12px; }
  .kh-btn { font-size: 16px; }
}

/* Two more Kai Core edges that its own device-specific rules create:
   its hero body drops to 16px from 845px down (not 768px), and its FAQ
   question goes back up to 16px on 380-479px phones. */
@media (max-width: 845px) {
  .kh-hero .kh-sub { font-size: 16px; }
}

@media (min-width: 380px) and (max-width: 479px) {
  .kh-faq .accordion-button { font-size: 16px; }
}

/* Kai Core carries two device-shaped overrides for its display size, and
   both are commonly hit, so they come across too:
     - laptops 1024-1399 wide and 768-950 tall (1280x800, 1366x768) get 75px
     - tall tablets in portrait (iPad Pro, 1024x1366) get 52px */
@media (min-width: 1024px) and (max-width: 1399px) and (min-height: 768px) and (max-height: 950px) and (orientation: landscape) {
  .kh-hero h1 { font-size: 75px; }
}

@media (min-width: 992px) and (max-width: 1024px) and (min-height: 1200px) and (max-height: 1370px) and (orientation: portrait) {
  .kh-hero h1 { font-size: 52px; }
}

/* Kai Core takes its section body down to 13px below 400px. Its display size
   has a rule at this width too, bumping 34px back up to 36px as the screen
   gets narrower; that one is not carried over - see the note above. */
@media (max-width: 400px) {
  .kh-sub { font-size: 13px; }
}

/* ==========================================================================
   FINAL BANDS
   These two have to sit last, after every band above, because Kai Core
   resolves them in a way the plain ladder cannot reproduce.
   ========================================================================== */

/* Kai Core declares its FAQ answer 20px !important, so 20px actually holds at
   every width except where one of its other !important rules bites. Those are
   reproduced one for one below. (Core leaves 371-374px uncovered, which falls
   back to 20px there; 13px is used instead, matching the bands either side.) */
.kh-faq .accordion-body { font-size: 20px; }
@media (min-width: 768px) and (max-width: 991px) { .kh-faq .accordion-body { font-size: 16px; } }
@media (min-width: 421px) and (max-width: 479px) { .kh-faq .accordion-body { font-size: 14px; } }
@media (min-width: 380px) and (max-width: 420px) { .kh-faq .accordion-body { font-size: 12px; } }
@media (min-width: 360px) and (max-width: 379px) { .kh-faq .accordion-body { font-size: 13px; } }
@media (max-width: 359px)                        { .kh-faq .accordion-body { font-size: 12px; } }

/* Kai Core drops its section heading to 18px below 380px */
@media (max-width: 379px) { .kh-h2 { font-size: 18px; } }

/* Kai Core holds its FAQ question at 16px down to 480px, not 576px */
@media (min-width: 481px) and (max-width: 767px) { .kh-faq .accordion-button { font-size: 16px; } }

/* Kai Core narrows its hero body to 23px only between 1200 and 1450px;
   above 1450 it is back to its 26px base */
@media (min-width: 1451px) { .kh-hero .kh-sub { font-size: 26px; } }

/* Kai Core keeps its section heading at 56px on small landscape tablets
   (992-1024 wide, landscape) via an !important rule of its own */
@media (min-width: 992px) and (max-width: 1024px) and (orientation: landscape) {
  .kh-h2 { font-size: 56px; }
}

/* Kai Core drops its card body at exactly 1024px, not 1200px, so 1025-1199
   goes back to the 16px base */
@media (min-width: 1025px) and (max-width: 1199px) {
  .kh-feature-card p, .kh-g-body p, .kh-phase-card li { font-size: 16px; }
}

/* ==========================================================================
   FOOTER BACKGROUND

   img/footer-section/footer-background.png is a wide, almost fully transparent
   canvas (alpha 1 of 255) with a soft colour glow baked into its bottom third -
   alpha ramps 3 -> 55 from 65% down to the bottom edge.

   The shared rule uses background-size: cover. While this footer still carried
   the CTA it was roughly 650px tall, and at 1920px wide cover happened to render
   the image at about 115% of that height, so the glow landed across the bottom
   40% of the footer. Now that the CTA has moved up to its own dark band the
   section is less than half as tall, cover still renders the image 747px tall,
   and the same glow spreads over roughly 87% of the footer - which is what made
   it look wrong.

   Sizing the image to a percentage of the section instead of to the viewport
   pins the glow back to 40% (0.35 x 1.15) whatever the footer ends up being,
   so it matches the old look and keeps matching if the content changes. */
.kh-footer-section { background-size: 100% 115%; }

/* style-new.css line 870 still carries the old footer design, where
   .footer-container was itself the flex row:
       .footer-container { display: flex; justify-content: space-between; ... }
   belowSections.css later redefines .footer-container for the Bootstrap-grid
   footer but only sets max-width / margin / padding, so that display: flex
   survives. The .row inside is therefore a flex item, not a block, and sizes
   itself to its content instead of filling the container.

   It went unnoticed because the old heading column made the row wide anyway.
   With the CTA moved out to its own band the row had nothing wide left in it
   and collapsed to 798px inside a 1700px container, pushing the logo, social
   icons, divider and legal links into the left half of the page.

   Restoring block flow lets .row fill the container the way Bootstrap expects.
   Scoped to this page so the other footers, which still have their heading
   column, are left exactly as they are. */
.kh-footer-section .footer-container { display: block; }

/* Kai Her's CTA store badges drop to 150px below 768px, so the attribution
   badge drops with them rather than sitting wider than the badges it follows. */
@media (max-width: 768px) {
  .kh-cta-fatsecret { margin-top: 26px; }
  .kh-cta-fatsecret img { width: 150px; }
}