/* ==========================================================================
   KAI THRIVE — landing page
   Self-contained on purpose: this page does NOT load style-new.css /
   new-responsive.css. Those sheets carry `.cont-fluid img {width:60px;
   height:60px}` at eight breakpoints (several !important), which squashes any
   logo or badge placed in the header. Everything here is prefixed .kt-.
   ========================================================================== */

@font-face { font-family: 'InterKT'; src: url('../inter-font-family/Inter-Light-BETA.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'InterKT'; src: url('../inter-font-family/Inter-Regular.otf')    format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'InterKT'; src: url('../inter-font-family/Inter-Medium.otf')     format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'InterKT'; src: url('../inter-font-family/Inter-SemiBold.otf')   format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'InterKT'; src: url('../inter-font-family/Inter-Bold.otf')       format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --kt-green:        #367A14;   /* Kai Thrive brand green */
  --kt-green-dark:   #2A6010;   /* hover */
  --kt-green-bright: #6FBF3F;   /* on dark — the brand green is too deep to read there */
  --kt-green-soft:   #EDF4E7;   /* icon chips */
  --kt-tint:         #F4F8F0;   /* section backgrounds */
  --kt-ink:          #121417;
  --kt-body:         #5B6470;
  --kt-line:         #E4E9DF;
  --kt-font:       'InterKT', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kt-nav-height: 86px;
}

body { margin: 0; font-family: var(--kt-font); background: #fff; color: var(--kt-ink); overflow-x: hidden; }
.kt-page section { position: relative; }

/* --- shared type --- */
.kt-eyebrow {
  margin: 0 0 20px;
  /* was 13px - Kai Core .faq-label is 18px at every width */
  font-size: 18px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kt-green);
}
.kt-h2 {
  margin: 0 0 18px;
  /* was clamp(30px, 3.6vw, 52px) - Kai Core section heading is a fixed 56px
     on desktop and steps down per breakpoint, so the clamp goes away */
  font-size: 56px; font-weight: 700;
  line-height: 1.08; letter-spacing: -.03em; color: var(--kt-ink);
}
.kt-sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--kt-body); max-width: 620px; }
.kt-center { text-align: center; }
.kt-center .kt-sub { margin-inline: auto; }
.kt-green { color: var(--kt-green); }
.kt-inner { max-width: 1440px; margin: 0 auto; padding: 0 150px; }

/* --- buttons --- */
.kt-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  /* was 16px - Kai Core CTA (.download-text-title) is 18px */
  font-size: 18px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kt-btn-primary { background: var(--kt-green); color: #fff; }
.kt-btn-primary:hover {
  background: var(--kt-green-dark); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(54, 122, 20, .28);
}
.kt-btn-ghost { background: #fff; color: var(--kt-ink); border-color: var(--kt-line); }
.kt-btn-ghost:hover { color: var(--kt-ink); border-color: #BFCDC4; transform: translateY(-2px); }

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

/* ==========================================================================
   NAV
   ========================================================================== */
/* Transparent over the hero, solid dark once the page moves — the same
   behaviour as the Kai Her header. */
.kt-nav {
  position: sticky; top: 0; z-index: 1030;
  background-color: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.kt-nav.kt-scrolled {
  background-color: #1B1B1B;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
/* the dark state flips the header's own colours. Scoped to .kt-nav-inner: the
   offcanvas menu also lives inside .kt-nav, and its links went white on its
   white panel once the page was scrolled. */
.kt-nav.kt-scrolled .kt-nav-inner .kt-nav-link { color: #fff; }
.kt-nav.kt-scrolled .kt-nav-inner .kt-nav-link:hover,
.kt-nav.kt-scrolled .kt-nav-inner .kt-nav-link.is-active { color: var(--kt-green-bright); }
.kt-nav.kt-scrolled .kt-nav-toggle span { background: #fff; }
.kt-nav-link, .kt-nav-toggle span { transition: color .3s ease, background-color .3s ease; }
/* No max-width here, on purpose. The Kai Core, Kai Her and Kai family headers
   all run full width with a 150px gutter; capping this one at 1440px pushed its
   gutter to ~345px on a wide screen and made this nav look different. */
.kt-nav-inner {
  padding: 0 150px;
  height: var(--kt-nav-height);
  display: flex; align-items: center; gap: 28px;
}
.kt-nav-brand { flex: 0 0 auto; display: flex; align-items: center; }
.kt-nav-brand img { height: 48px; width: auto; display: block; }

.kt-nav-links { display: flex; align-items: center; gap: 36px; margin: 0 auto; padding: 0; list-style: none; }
.kt-nav-link {
  font-size: 16px; font-weight: 500; color: var(--kt-ink);
  text-decoration: none; white-space: nowrap; transition: color .25s ease;
}
.kt-nav-link:hover { color: var(--kt-green); }
.kt-nav-link.is-active { color: var(--kt-green); font-weight: 600; }

.kt-nav-stores { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.kt-nav-stores img { width: 152px; height: 46px; object-fit: contain; display: block; }

.kt-nav-toggle {
  display: none; flex: 0 0 auto; margin-left: auto;
  width: 42px; height: 42px; padding: 10px 9px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.kt-nav-toggle span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--kt-ink); }

.kt-offcanvas { background: #FBFDFB; }
.kt-offcanvas .offcanvas-title { font-weight: 600; color: var(--kt-ink); }
.kt-nav-links-mobile { list-style: none; margin: 0 0 28px; padding: 0; }
.kt-nav-links-mobile a {
  display: block; padding: 13px 4px; font-size: 17px;
  border-bottom: 1px solid var(--kt-line);
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.kt-hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--kt-tint) 100%); overflow: hidden; }
.kt-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(44% 50% at 82% 10%, rgba(54, 122, 20, .13) 0%, rgba(54, 122, 20, 0) 70%),
    radial-gradient(38% 44% at 98% 68%, rgba(154, 193, 124, .35) 0%, rgba(154, 193, 124, 0) 72%);
}
/* The banner is 4320x1758 (2.46:1) with its left half transparent, so the copy
   column sits on top of that empty half instead of beside the artwork. */
.kt-hero-banner { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kt-hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }

.kt-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 48%);
  align-items: center;
  padding: 80px 150px 96px;
  /* 4320 / 1758 = 2.457, so the banner needs 40.7vw of height to show in full.
     The cap only kicks in past ~2000px, where a taller hero stops being useful. */
  min-height: min(40.7vw, 820px);
}
.kt-hero h1 {
  margin: 0 0 24px;
  /* was clamp(36px, 4.4vw, 60px). Kai Core own hero is 170px, but that
     headline is full-bleed; this one shares the banner with the artwork, so
     it takes Core largest in-container display size (.cycle-sense-headline, 80px). */
  font-size: 80px; font-weight: 700;
  line-height: 1.06; letter-spacing: -.03em; color: var(--kt-ink);
}
/* Kai Core hero body (.sliders-content p) is 23px, bigger than its section body */
.kt-hero .kt-sub { font-size: 23px; margin-bottom: 34px; max-width: 480px; }
.kt-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.kt-hero-stores { display: flex; gap: 12px; }
.kt-hero-stores img { width: 150px; height: 46px; object-fit: contain; display: block; }

/* --- social proof --- */
.kt-proof { display: flex; align-items: center; gap: 14px; }
.kt-proof-avatars { display: flex; }
/* the avatar PNGs carry their own circular crop and white ring */
.kt-proof-avatars span { width: 40px; height: 40px; border-radius: 50%; display: block; background: #DCE5DE; }
.kt-proof-avatars span + span { margin-left: -11px; }
.kt-proof-avatars span:has(img) { background: none; }
.kt-proof-avatars img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* was 15.5px - Kai Core card body is 16px */
.kt-proof-text strong { display: block; font-size: 16px; font-weight: 700; color: var(--kt-ink); }
.kt-proof-text span { display: block; font-size: 14px; color: var(--kt-body); }


/* ==========================================================================
   2. KEY FEATURES
   ========================================================================== */
.kt-features { background: #fff; padding: 104px 0; }
.kt-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 50px; }
.kt-feature-card {
  background: #fff; border: 1px solid var(--kt-line);
  border-radius: 18px; padding: 26px 24px 28px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.kt-feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(18, 20, 23, .08); }
.kt-feature-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
}
/* the four icons ship at different sizes and ratios (30x17 up to 34x23),
   so they are contained in one box rather than stretched to it */
.kt-feature-icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
/* was 17px - Kai Core card title (.smart-goals-title) is 28px, flat at every width */
.kt-feature-card h3 { margin: 0 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
/* was 14px - Kai Core card body is 16px */
.kt-feature-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--kt-body); }

/* ==========================================================================
   3. ADAPTIVE JOURNEY
   ========================================================================== */
.kt-journey { background: var(--kt-tint); padding: 104px 0; }
.kt-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.kt-step { position: relative; background: #fff; border: 1px solid var(--kt-line); border-radius: 20px; padding: 28px 22px; }
/* the connector between one step and the next */
.kt-step:not(:last-child)::after {
  content: ''; position: absolute; top: 52px; right: -18px; width: 18px; height: 2px;
  background: #CEDFD4;
}
.kt-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 18px;
  background: var(--kt-green); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
/* was 16px - Kai Core small card title (.discover-insights-title) is 24px, flat */
.kt-step h3 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
/* was 14px - Kai Core card body is 16px */
.kt-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--kt-body); }

.kt-loop {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 34px; padding: 11px 22px; border-radius: 999px;
  background: var(--kt-green-soft); color: var(--kt-green-dark);
  /* was 14.5px - Kai Core card body is 16px */
  font-size: 16px; font-weight: 600;
}
.kt-loop svg { width: 17px; height: 17px; }

/* ==========================================================================
   4. THRIVE PATHS
   ========================================================================== */
/* Gym backdrop behind, phone mockup and copy in a two-column grid on top.
   The phone is kept out of the backdrop so it does not scale with the viewport
   — that was what made it swamp the copy on wide screens. */
.kt-plans { background: #fff; position: relative; overflow: hidden; }

.kt-plans-bg { position: absolute; inset: 0; z-index: 1; }
.kt-plans-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.kt-plans-bg .kt-visual-hint { position: absolute; inset: 0; background: var(--kt-tint); }

.kt-plans-inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
  /* Not 50/50: an equal split left ~130px of dead space either side of the phone
     inside its own column, which read as a gap between the phone and the copy. */
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center; gap: 48px;
  /* Tighter than the page's usual 150px gutter: the backdrop runs full width, so
     a wide gutter left a lot of empty image on both sides. The phone drives the
     height — 310px wide x 1.641 = 509px, plus this padding, is ~629px. */
  padding: 60px 120px;
}

.kt-plans-visual { display: flex; justify-content: center; }
/* the mockup is 674x1106 and crops tight to the handset, so width alone sets it */
.kt-plans-visual img {
  width: 100%; max-width: 310px; height: auto; display: block;
  filter: drop-shadow(0 26px 54px rgba(18, 20, 23, .22));
}
/* Scaled up to match the design — this column is narrower than the full-width
   section heads, so it carries a larger type size comfortably. */
/* was 14px - Kai Core .faq-label is 18px everywhere */
.kt-plans-copy .kt-eyebrow { font-size: 18px; margin-bottom: 22px; }
.kt-plans-copy .kt-h2 {
  /* was clamp(34px, 4.1vw, 62px) - Kai Core section heading is 56px on desktop */
  font-size: 56px;
  line-height: 1.06; margin-bottom: 22px;
}
/* was 19px - Kai Core hero body is 23px; this column reads as lead copy */
.kt-plans-copy .kt-sub { font-size: 23px; line-height: 1.6; margin-bottom: 34px; max-width: 480px; }

.kt-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 17px; }
.kt-checklist li {
  display: flex; align-items: flex-start; gap: 13px;
  /* was 17.5px - Kai Core list/legal type (.accordion-body, .legal-link) is 20px */
  font-size: 20px; line-height: 1.45; color: var(--kt-ink);
}
.kt-checklist svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.kt-checklist svg circle { fill: var(--kt-green); }

/* ==========================================================================
   5. FAQ
   ========================================================================== */
.kt-faq { background: var(--kt-tint); padding: 104px 0 96px; }
.kt-faq .accordion-item { border: 0; border-bottom: 1px solid #DDE7E0; background: transparent; }
.kt-faq .accordion-button {
  background: transparent; box-shadow: none; padding: 26px 0;
  /* was 18.5px - Kai Core FAQ question is 22px on desktop */
  font-size: 22px; font-weight: 600; color: var(--kt-ink);
}
.kt-faq .accordion-button:not(.collapsed) { color: var(--kt-green); background: transparent; }
.kt-faq .accordion-button:focus { box-shadow: none; }
/* was 16px - Kai Core FAQ answer (.accordion-body) is 20px */
.kt-faq .accordion-body { padding: 0 0 26px; font-size: 20px; line-height: 1.65; color: var(--kt-body); }

/* ==========================================================================
   6. DOWNLOAD CTA
   ========================================================================== */
.kt-cta { background: #fff; padding: 104px 0; text-align: center; }
.kt-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 60% at 50% 50%, rgba(54, 122, 20, .10) 0%, rgba(54, 122, 20, 0) 70%);
}
.kt-cta > .kt-inner { position: relative; z-index: 2; }
.kt-cta-stores { display: flex; justify-content: center; gap: 14px; margin-top: 28px; }
.kt-cta-stores img { width: 170px; height: 52px; object-fit: contain; display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.kt-footer { background: linear-gradient(90deg, #FFFFFF 0%, #F3F9F4 48%, #E9F3EC 100%); }
.kt-footer-inner { max-width: 1440px; margin: 0 auto; padding: 44px 150px 30px; }
.kt-footer-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px; padding-bottom: 26px; border-bottom: 1px solid #DDE7E0;
}
.kt-footer-brand { display: flex; align-items: center; gap: 22px; }
/* the Kai Thrive wordmark is 139x82; height is fixed so the ratio is kept */
.kt-footer-brand img { height: 52px; width: auto; display: block; }
/* was 16px - Kai Core .footer-brand-text is 22px */
.kt-footer-brand p { margin: 0; font-size: 22px; font-weight: 500; }
.kt-footer-social { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.kt-footer-social a { display: block; line-height: 0; }
.kt-footer-social img {
  width: 22px; height: 22px; object-fit: contain; display: block;
  filter: brightness(.3); transition: filter .25s ease, transform .25s ease;
}
.kt-footer-social a:hover img { filter: brightness(0); transform: translateY(-2px); }
.kt-footer-bottom { display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap; padding-top: 18px; }
/* was 13.5px - Kai Core .footer-copyright p is 20px */
.kt-footer-bottom p { margin: 0; font-size: 20px; color: var(--kt-body); }
.kt-footer-legal { display: flex; gap: 26px; }
/* was 13.5px - Kai Core .legal-link is 20px */
.kt-footer-legal a { font-size: 20px; color: var(--kt-body); text-decoration: none; }
.kt-footer-legal a:hover { color: var(--kt-ink); text-decoration: underline; }

/* ==========================================================================
   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 */
  .kt-hero h1 { font-size: 90px; }
  .kt-h2, .kt-plans-copy .kt-h2 { font-size: 60px; }
  .kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 26px; }
  .kt-sub { font-size: 18px; }
  .kt-faq .accordion-button { font-size: 26px; }
}

@media (max-width: 1450px) {
  .kt-inner, .kt-nav-inner, .kt-footer-inner { padding-left: 70px; padding-right: 70px; }
  .kt-hero-inner { padding-left: 70px; padding-right: 70px; }
  /* link gap stays 36px at every width, to match the Bootstrap navs on Kai Core and Kai Her */
  .kt-nav-stores img { width: 132px; height: 40px; }
}

@media (max-width: 1199.98px) {
  :root { --kt-nav-height: 76px; }
  .kt-nav-links, .kt-nav-inner > .kt-nav-stores { display: none; }
  .kt-nav-toggle { display: flex; }
  .kt-feature-grid { grid-template-columns: 1fr 1fr; }
  /* five across stops fitting — go to three then two, and drop the connectors */
  .kt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kt-step::after { display: none; }
  /* Kai Core at 1280px: display 75px, section heading 56px */
  .kt-hero h1 { font-size: 75px; }
  .kt-h2, .kt-plans-copy .kt-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 */
  .kt-hero h1 { font-size: 52px; }
  .kt-h2, .kt-plans-copy .kt-h2 { font-size: 42px; }
  .kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 20px; }
  .kt-sub { font-size: 15px; }
  .kt-faq .accordion-button { font-size: 20px; }
  /* Kai Core drops its card body to 14px from 1024px down */
  .kt-feature-card p, .kt-step p, .kt-checklist li { font-size: 14px; }
}

@media (max-width: 991.98px) {
  .kt-inner, .kt-nav-inner, .kt-footer-inner { padding-left: 40px; padding-right: 40px; }
  /* Below this width the copy can no longer share the banner — the artwork
     becomes a block above it, cropped to its right-hand (photographic) half. */
  .kt-hero { display: flex; flex-direction: column; }
  .kt-hero-banner { position: static; order: 1; height: 46vw; max-height: 380px; }
  .kt-hero-inner {
    order: 2; grid-template-columns: 1fr; text-align: center;
    padding: 36px 40px 64px; min-height: 0;
  }
  .kt-hero .kt-sub { margin-inline: auto; }
  .kt-hero-actions, .kt-hero-stores, .kt-proof { justify-content: center; }

  /* the two columns stack: phone above, copy below. The backdrop only covers
     the phone, so the copy stays on a clean white band underneath. */
  /* Stacked, so the backdrop goes behind the phone only. As a separate full-width
     layer it covered just the top 56vw and the phone's lower two thirds hung off
     it onto bare white. */
  .kt-plans-bg { display: none; }
  .kt-plans-inner {
    grid-template-columns: 1fr; gap: 36px;
    padding: 40px 40px 72px; text-align: center;
  }
  .kt-plans-visual {
    background: url('../img/kai-thrive/training-plans-bg.png') left center / cover no-repeat;
    border-radius: 22px; padding: 32px 20px;
  }
  .kt-plans-visual img { max-width: 260px; }
  .kt-plans-copy .kt-sub { margin-inline: auto; }
  .kt-checklist { display: inline-grid; text-align: left; }
  .kt-features, .kt-journey, .kt-faq, .kt-cta { padding: 76px 0; }

  .kt-footer-top { justify-content: center; text-align: center; }
  .kt-footer-brand { flex-direction: column; gap: 12px; }
  .kt-footer-bottom { justify-content: center; }
}

@media (max-width: 768px) {
  :root { --kt-nav-height: 70px; }
  .kt-inner, .kt-nav-inner, .kt-footer-inner { padding-left: 20px; padding-right: 20px; }
  .kt-hero-inner { padding: 30px 20px 60px; }
  .kt-nav-brand img { height: 40px; }
  .kt-feature-grid, .kt-steps { grid-template-columns: 1fr; }
  /* Kai Core at 768px: hero 50px, section heading 28px, body 16px, FAQ question 18px */
  .kt-hero h1 { font-size: 50px; }
  .kt-h2, .kt-plans-copy .kt-h2 { font-size: 28px; }
  .kt-sub, .kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 16px; }
  /* was 17px */
  .kt-faq .accordion-button { font-size: 18px; padding: 22px 0; }
  .kt-faq .accordion-body { font-size: 16px; }
  /* Kai Core footer at 768px */
  .kt-footer-bottom p, .kt-footer-legal a { font-size: 14px; }
  /* side by side like the Kai family page; wraps only on very narrow screens */
  .kt-cta-stores { flex-wrap: wrap; gap: 12px; }
  .kt-cta-stores img, .kt-hero-stores img { width: 150px; height: 46px; }

  .kt-hero-banner { height: 58vw; max-height: 300px; }
  .kt-plans-visual { padding: 24px 16px; border-radius: 18px; }
  .kt-plans-visual img { max-width: 210px; }
  .kt-plans-inner { padding: 32px 20px 60px; gap: 30px; }
  /* was 15px - Kai Core card body is 14px from 1024px down */
  .kt-checklist li { font-size: 14px; }
  .kt-proof-avatars span { width: 36px; height: 36px; }
}

@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 */
  .kt-hero h1 { font-size: 34px; }
  .kt-h2, .kt-plans-copy .kt-h2 { font-size: 28px; }
  .kt-sub { font-size: 14px; }
  /* Kai Core keeps its hero body at 16px on phones, above the section body */
  .kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 16px; }
  .kt-faq .accordion-button { font-size: 16px; }
  .kt-faq .accordion-body { font-size: 12px; }
  .kt-btn { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .kt-reveal { opacity: 1; transform: none; transition: none; }
  .kt-btn, .kt-feature-card { transition: none; }
  .kt-btn:hover, .kt-feature-card:hover { transform: 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 */
.kt-hero h1 { font-size: 80px; }
.kt-h2, .kt-plans-copy .kt-h2 { font-size: 56px; }
.kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 23px; }
.kt-sub { font-size: 17px; }
.kt-faq .accordion-button { font-size: 22px; }
.kt-faq .accordion-body { font-size: 20px; }
.kt-feature-card h3 { font-size: 28px; }
.kt-step h3 { font-size: 24px; }
.kt-feature-card p, .kt-step p, .kt-checklist li { font-size: 16px; }
.kt-eyebrow, .kt-plans-copy .kt-eyebrow { font-size: 18px; }
.kt-btn { font-size: 18px; }

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

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

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

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

@media (max-width: 1199px) {
  .kt-hero h1 { font-size: 48px; }
  .kt-h2, .kt-plans-copy .kt-h2 { font-size: 42px; }
  .kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 20px; }
  .kt-sub { font-size: 15px; }
  .kt-faq .accordion-button { font-size: 20px; }
  .kt-feature-card p, .kt-step p, .kt-checklist li { font-size: 14px; }
}

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

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

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

@media (max-width: 575px) {
  .kt-hero h1 { font-size: 34px; }
  .kt-sub { font-size: 14px; }
  .kt-faq .accordion-button { font-size: 15px; }
  .kt-faq .accordion-body { font-size: 12px; }
  .kt-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) {
  .kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 16px; }
}

@media (min-width: 380px) and (max-width: 479px) {
  .kt-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) {
  .kt-hero h1 { font-size: 75px; }
}

@media (min-width: 992px) and (max-width: 1024px) and (min-height: 1200px) and (max-height: 1370px) and (orientation: portrait) {
  .kt-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) {
  .kt-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.) */
.kt-faq .accordion-body { font-size: 20px; }
@media (min-width: 768px) and (max-width: 991px) { .kt-faq .accordion-body { font-size: 16px; } }
@media (min-width: 421px) and (max-width: 479px) { .kt-faq .accordion-body { font-size: 14px; } }
@media (min-width: 380px) and (max-width: 420px) { .kt-faq .accordion-body { font-size: 12px; } }
@media (min-width: 360px) and (max-width: 379px) { .kt-faq .accordion-body { font-size: 13px; } }
@media (max-width: 359px)                        { .kt-faq .accordion-body { font-size: 12px; } }

/* Kai Core drops its section heading to 18px below 380px */
@media (max-width: 379px) { .kt-h2, .kt-plans-copy .kt-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) { .kt-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) { .kt-hero .kt-sub, .kt-plans-copy .kt-sub { font-size: 26px; } }

/* ==========================================================================
   FOOTER — MATCHED TO KAI HER

   Kai Her's footer is the legacy one in belowSections.css (.footer-section /
   .footer-container / .footer-legal-row). This block brings the Kai Thrive
   footer onto exactly those metrics. It sits last in the file so it supersedes
   the sizes above, including the ones inside the earlier media queries —
   media queries add no specificity, so source order decides.

   Kai Her, for reference:
     .footer-container   max-width: 90%; padding: 0 20px
     .footer-brand-logo  height: 60px
     .footer-col-left    gap: 50px   (logo block to tagline)
     .footer-tagline     24px / 400 / #2A2A2A / line-height 1
     .social-icon        32x32, opacity .8
     .footer-divider     1px #626262, full width
     .footer-bottom-row  padding-bottom: 25px
     .footer-legal-row   margin-top: 15px; padding-top: 15px
     .footer-copyright p 20px / 400 / #2A2A2A
     .legal-link         20px / 400 / #2A2A2A, gap 8px, right aligned
     .legal-separator    20px, padding: 0 5px
   ========================================================================== */

/* was max-width: 1440px with 150px side padding, which inset the whole footer
   well inside Kai Her's. 90% is what Kai Her uses at every width, so the two
   now line up. */
.kt-footer-inner { max-width: 90%; margin: 0 auto; padding: 44px 20px 30px; }

/* the rule above also replaces the 70px / 40px / 20px side padding that the
   1450, 992 and 768 breakpoints set for .kt-footer-inner further up */

.kt-footer-top { padding-bottom: 25px; border-bottom-color: #626262; }

/* was gap: 22px — Kai Her puts 50px between the logo block and the tagline */
.kt-footer-brand { gap: 50px; }
/* was height: 52px */
.kt-footer-brand img { height: 60px; }
/* was 22px / 500, which read as bold next to Kai Her's 24px / 400 */
.kt-footer-brand p { font-size: 24px; font-weight: 400; color: #2A2A2A; line-height: 1; }

/* was 22x22 with filter: brightness(.3) — Kai Her uses the same SVGs at 32x32
   on plain opacity, so they match in weight as well as size */
.kt-footer-social img { width: 32px; height: 32px; filter: none; opacity: .8; }
.kt-footer-social a:hover img { filter: none; opacity: 1; transform: translateY(-2px); }

/* This is what was actually wrong in the screenshot: without a justification
   the copyright and both legal links bunched up on the left. Kai Her splits
   them, copyright left and links right. */
.kt-footer-bottom { justify-content: space-between; padding-top: 30px; }
.kt-footer-bottom p { color: #2A2A2A; }

/* was gap: 26px and no separator */
.kt-footer-legal { gap: 8px; align-items: center; }
.kt-footer-legal a { color: #2A2A2A; }
.kt-footer-legal-sep { font-size: 20px; color: #2A2A2A; padding: 0 5px; line-height: 1; }

/* the stacked, centred phone layout the 992 breakpoint set up, restated here
   because the unconditional rules above would otherwise win over it */
@media (max-width: 991.98px) {
  .kt-footer-brand { flex-direction: column; gap: 12px; }
  .kt-footer-bottom { justify-content: center; }
  .kt-footer-legal { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .kt-footer-inner { max-width: 100%; padding-left: 20px; padding-right: 20px; }
  .kt-footer-legal-sep { font-size: 14px; }
}

/* ==========================================================================
   FOOTER TYPE LADDER — Kai Her's, breakpoint for breakpoint

   Kai Her steps its footer type down at 1400 / 1200 / 992 / 768 / 576 / 400.
   Without these the unconditional sizes above would hold at every width and
   the two footers would drift apart again below 1400px.
   (Kai Her's tagline dips to 15px at 1200 and comes back to 16px at 992;
   that is copied as-is rather than smoothed, so the two stay identical.)
   ========================================================================== */

@media (max-width: 1400px) {
  .kt-footer-brand p { font-size: 22px; }
  .kt-footer-bottom p { font-size: 18px; }
  .kt-footer-legal a { font-size: 18px; }
  .kt-footer-legal-sep { font-size: 20px; }
}

@media (max-width: 1200px) {
  .kt-footer-brand p { font-size: 15px; }
  .kt-footer-bottom p { font-size: 15px; }
  .kt-footer-legal a { font-size: 15px; }
  .kt-footer-legal-sep { font-size: 20px; }
}

@media (max-width: 992px) {
  .kt-footer-brand p { font-size: 16px; }
  .kt-footer-bottom p { font-size: 16px; }
  .kt-footer-legal a { font-size: 16px; }
  .kt-footer-legal-sep { font-size: 16px; }
}

@media (max-width: 768px) {
  .kt-footer-brand p { font-size: 16px; }
  .kt-footer-bottom p { font-size: 14px; }
  .kt-footer-legal a { font-size: 14px; }
  .kt-footer-legal-sep { font-size: 14px; }
}

@media (max-width: 576px) {
  .kt-footer-brand p { font-size: 14px; }
  .kt-footer-bottom p { font-size: 12px; }
  .kt-footer-legal a { font-size: 12px; }
  .kt-footer-legal-sep { font-size: 12px; }
}

@media (max-width: 400px) {
  .kt-footer-brand p { font-size: 13px; }
  .kt-footer-bottom p { font-size: 11px; }
  .kt-footer-legal a { font-size: 11px; }
  .kt-footer-legal-sep { font-size: 11px; }
}

/* 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) {
  .kt-h2, .kt-plans-copy .kt-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) {
  .kt-feature-card p, .kt-step p, .kt-checklist li { font-size: 16px; }
}

/* The fatsecret attribution badge. Its SVG is 212x40 with a white pill and a
   black outline filling the whole box edge to edge - no padding inside it - so
   the margin below is the whole of the visible gap. Width matches one store
   badge on this page so the two rows read as a set. */
.kt-cta-fatsecret { display: flex; justify-content: center; margin-top: 34px; }
.kt-cta-fatsecret img { width: 170px; height: auto; display: block; }

/* the store badges shrink on phones, so this shrinks with them */
@media (max-width: 768px) {
  .kt-cta-fatsecret { margin-top: 26px; }
  .kt-cta-fatsecret img { width: 150px; }
}