/* ==========================================================================
   Kai family home page
   Shares the nav with partials/kai-nav.php (kai-nav.css). Everything here is
   prefixed .kai- so it never meets the old .cont-fluid / .navbar rules.
   ========================================================================== */

:root {
  --kai-blue:      #1668D4;
  --kai-blue-dark: #1257B4;
  --kai-ink:       #121417;
  --kai-body:      #5B6470;
  --kai-line:      rgba(18, 20, 23, .14);
  --kai-font:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { margin: 0; font-family: var(--kai-font); background: #fff; color: var(--kai-ink); }

/* --- reveal on scroll ---------------------------------------------------
   Driven by an IntersectionObserver at the bottom of the page. */
.kai-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.kai-reveal.kai-in { opacity: 1; transform: none; }

/* the three app cards come in one after another rather than all at once */
.kai-apps-grid > .kai-reveal:nth-child(2) { transition-delay: .12s; }
.kai-apps-grid > .kai-reveal:nth-child(3) { transition-delay: .24s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.kai-hero { position: relative; overflow: hidden; background: #fff; }

/* soft pastel washes, mirroring the nav's warm-to-green drift */
.kai-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(44% 48% at 76% 6%,   rgba(250, 214, 184, .55) 0%, rgba(250, 214, 184, 0) 70%),
    radial-gradient(38% 46% at 99% 40%,  rgba(201, 227, 196, .55) 0%, rgba(201, 227, 196, 0) 70%),
    radial-gradient(42% 44% at 88% 96%,  rgba(188, 212, 240, .50) 0%, rgba(188, 212, 240, 0) 70%),
    radial-gradient(34% 40% at 6% 88%,   rgba(222, 232, 245, .45) 0%, rgba(222, 232, 245, 0) 72%);
}

.kai-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center; gap: 40px;
  max-width: 1440px; margin: 0 auto;
  padding: 86px 44px 96px;
}

/* --- copy --- */
.kai-eyebrow {
  margin: 0 0 22px;
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #8A94A1;
}
.kai-hero h1 {
  margin: 0 0 26px;
  font-size: clamp(38px, 4.4vw, 62px); font-weight: 700; line-height: 1.08;
  letter-spacing: -.03em; color: var(--kai-ink);
}
.kai-hero h1 .kai-blue { color: var(--kai-blue); display: block; }
.kai-hero-sub {
  margin: 0 0 34px; max-width: 460px;
  font-size: 17.5px; line-height: 1.6; color: var(--kai-body);
}

/* --- buttons --- */
.kai-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
.kai-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-size: 16px; 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;
}
.kai-btn-primary { background: var(--kai-blue); color: #fff; }
.kai-btn-primary:hover {
  background: var(--kai-blue-dark); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22, 104, 212, .28);
}
.kai-btn-ghost { background: #fff; color: var(--kai-ink); border-color: var(--kai-line); }
.kai-btn-ghost:hover { color: var(--kai-ink); border-color: rgba(18,20,23,.3); transform: translateY(-2px); }

/* --- social proof --- */
.kai-proof { display: flex; align-items: center; gap: 14px; }
.kai-proof-avatars { display: flex; }
/* The avatar PNGs already carry their own circular crop and white ring, so the
   container adds neither — it only holds the space and the missing-image dot. */
.kai-proof-avatars span {
  width: 40px; height: 40px; border-radius: 50%;
  position: relative; display: block; background: #D7DEE7;
}
.kai-proof-avatars span + span { margin-left: -11px; }
.kai-proof-avatars span:has(img) { background: none; }
.kai-proof-avatars img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kai-proof-text strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--kai-ink); }
.kai-proof-text span { display: block; font-size: 14px; color: var(--kai-body); }

/* --- phones --- */
.kai-hero-visual { position: relative; display: flex; justify-content: center; }
.kai-hero-visual img {
  width: 100%; max-width: 680px; height: auto; display: block;
  filter: drop-shadow(0 30px 60px rgba(18, 20, 23, .16));
}
/* shown only while the artwork is missing */
.kai-hero-visual .kai-visual-hint {
  display: grid; place-items: center; width: 100%; min-height: 330px;
  border: 1px dashed var(--kai-line); border-radius: 22px;
  color: #9AA3AE; font-size: 13px; text-align: center; padding: 20px;
}

/* ==========================================================================
   MEET THE KAI APPS
   ========================================================================== */
.kai-apps { background: #fff; }
.kai-apps-inner { max-width: 1440px; margin: 0 auto; padding: 96px 44px 110px; }

.kai-apps-head { text-align: center; max-width: 820px; margin: 0 auto 54px; }
.kai-apps-head h2 {
  margin: 0 0 18px;
  font-size: clamp(32px, 3.6vw, 52px); font-weight: 700;
  letter-spacing: -.03em; color: var(--kai-ink);
}
.kai-apps-head h2 .kai-blue { color: var(--kai-blue); }
.kai-apps-lead { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--kai-ink); }
.kai-apps-sub { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--kai-body); }

.kai-apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* --- a card --- */
.kai-app-card {
  --kai-app-accent: var(--kai-blue);
  --kai-app-tint:   #EFF4FC;

  position: relative; overflow: hidden;
  display: flex; align-items: stretch;
  border-radius: 22px; background: var(--kai-app-tint);
  min-height: 300px;
}
.kai-app-her    { --kai-app-accent: #EE4B49; --kai-app-tint: #FDF0EE; }
.kai-app-thrive { --kai-app-accent: #1F8F43; --kai-app-tint: #EFF7F0; }

/* A column, so the button can be pushed to the bottom — the three cards carry
   different amounts of copy and their buttons would otherwise never line up. */
.kai-app-body {
  position: relative; z-index: 2;
  padding: 30px 26px 30px 28px; width: 58%;
  display: flex; flex-direction: column;
}

.kai-app-logo { position: relative; height: 42px; margin-bottom: 22px; }
.kai-app-logo img { height: 42px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.kai-app-logo-hint,
.kai-app-shot-hint { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; color: #A6AFBA; text-align: center; pointer-events: none; }
.kai-app-logo-hint { place-items: center start; }

/* No max-width here — the body column already sets the measure, and capping it
   again pushed the longer titles onto a third line. */
.kai-app-card h3 {
  margin: 0 0 12px;
  font-size: 20px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.02em; color: var(--kai-ink);
}
.kai-app-card > .kai-app-body > p {
  margin: 0 0 18px;
  font-size: 13.5px; line-height: 1.55; color: var(--kai-body);
}

.kai-app-card ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.kai-app-card li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.4; color: var(--kai-ink);
}
.kai-app-card li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.kai-app-card li svg circle { fill: var(--kai-app-accent); }

.kai-app-cta {
  margin-top: auto;            /* sits on the card's bottom edge */
  align-self: flex-start;      /* and stays pill-width, not full-width */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  background: var(--kai-app-accent); color: #fff;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: transform .25s ease, filter .25s ease;
}
.kai-app-cta:hover { color: #fff; transform: translateY(-2px); filter: brightness(.93); }

/* The phone sits bottom-right, flush with the card's bottom edge. The artwork
   is cropped to the handset (~345x692), so width alone decides its height. */
.kai-app-shot {
  position: absolute; right: 14px; bottom: 0;
  width: 42%; max-width: 205px;
  display: flex; align-items: flex-end;
}
.kai-app-shot img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   DOWNLOAD
   ========================================================================== */
.kai-download { background: #fff; text-align: center; }
.kai-download-inner { max-width: 760px; margin: 0 auto; padding: 24px 24px 86px; }
.kai-download h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 44px); font-weight: 700;
  letter-spacing: -.03em; color: var(--kai-ink);
}
.kai-download p { margin: 0 0 32px; font-size: 15.5px; line-height: 1.6; color: var(--kai-body); }
.kai-download-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* badge art is 152px tall, so 54px stays a clean downscale */
.kai-download-stores img { width: 178px; height: 54px; object-fit: contain; display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.kai-footer {
  /* the same warm wash as the nav, mirrored so the page closes the way it opens */
  background:
    linear-gradient(90deg,
      #FFFFFF 0%,
      #FDF4EE 38%,
      #FBE8DC 62%,
      #F3EDF6 82%,
      #E9EFF8 100%);
}
.kai-footer-inner { max-width: 1440px; margin: 0 auto; padding: 44px 44px 30px; }

.kai-footer-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  padding-bottom: 26px; border-bottom: 1px solid rgba(27, 27, 27, .12);
}
.kai-footer-brand { display: flex; align-items: center; gap: 22px; }
.kai-footer-brand img { width: 110px; height: auto; object-fit: contain; display: block; }
.kai-footer-brand p { margin: 0; font-size: 16px; font-weight: 500; color: var(--kai-ink); }

.kai-footer-social { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.kai-footer-social a { display: block; line-height: 0; }
.kai-footer-social img {
  width: 22px; height: 22px; object-fit: contain; display: block;
  /* the source icons are #707070 — darken them to match the design */
  filter: brightness(.3);
  transition: filter .25s ease, transform .25s ease;
}
.kai-footer-social a:hover img { filter: brightness(0); transform: translateY(-2px); }

.kai-footer-bottom {
  display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap;
  padding-top: 18px;
}
.kai-footer-bottom p { margin: 0; font-size: 13.5px; color: var(--kai-body); }
.kai-footer-legal { display: flex; gap: 26px; }
.kai-footer-legal a {
  font-size: 13.5px; color: var(--kai-body); text-decoration: none;
  transition: color .25s ease;
}
.kai-footer-legal a:hover { color: var(--kai-ink); text-decoration: underline; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .kai-footer-inner { padding: 40px 28px 28px; }
  .kai-hero-inner { padding: 64px 28px 76px; gap: 28px; }
  .kai-hero-sub { font-size: 16.5px; }

  .kai-apps-inner { padding: 76px 28px 88px; }
  .kai-apps-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* with two per row the third card gets a full row to itself */
  .kai-app-card:last-child { grid-column: span 2; }
  .kai-app-card:last-child .kai-app-body { width: 62%; }
  .kai-app-card:last-child .kai-app-shot { width: 30%; max-width: 230px; }
}

@media (max-width: 991.98px) {
  /* artwork first, copy under it — same order the Kai Her hero uses */
  .kai-hero-inner { grid-template-columns: 1fr; text-align: center; padding: 40px 24px 64px; gap: 28px; }
  .kai-hero-visual { order: 1; }
  /* capped so the artwork does not take the whole first screen */
  .kai-hero-visual img { max-width: 440px; }
  .kai-hero-copy { order: 2; }
  .kai-hero-sub { margin-inline: auto; }
  .kai-hero-actions, .kai-proof { justify-content: center; }
  /* Stays a block. Going inline here ran it straight into the line above —
     there is no whitespace between "family." and the span in the markup, so it
     rendered as "One family.Three ways to thrive." */

  /* one card per row; the screenshot moves beside the copy */
  .kai-apps-inner { padding: 60px 24px 72px; }
  .kai-apps-head { margin-bottom: 40px; }
  .kai-apps-grid { grid-template-columns: 1fr; }
  .kai-app-card, .kai-app-card:last-child { grid-column: auto; min-height: 0; }
  .kai-app-card .kai-app-body, .kai-app-card:last-child .kai-app-body { width: 62%; text-align: left; }
  .kai-app-card .kai-app-shot, .kai-app-card:last-child .kai-app-shot { width: 30%; max-width: 220px; right: 20px; }

  .kai-download-inner { padding: 16px 24px 70px; }
  .kai-footer-inner { padding: 36px 24px 26px; }
  .kai-footer-top { justify-content: center; text-align: center; }
  .kai-footer-brand { flex-direction: column; gap: 12px; }
  .kai-footer-bottom { justify-content: center; }
}

@media (max-width: 575.98px) {
  .kai-hero-inner { padding: 28px 18px 56px; gap: 24px; }
  .kai-hero-visual img { max-width: 330px; }
  .kai-eyebrow { font-size: 11px; letter-spacing: .13em; }
  /* 38px put "Three ways to thrive." onto two cramped lines on a 375px screen */
  .kai-hero h1 { font-size: 32px; margin-bottom: 20px; }
  .kai-hero-sub { font-size: 16px; }
  .kai-btn { padding: 13px 24px; font-size: 15px; }
  .kai-hero-actions { gap: 10px; margin-bottom: 32px; }
  .kai-proof { gap: 11px; }
  .kai-proof-avatars span { width: 36px; height: 36px; }

  /* Same side-by-side shape as the desktop card, just scaled down. Stacking the
     phone under the copy made it the widest thing in the card. */
  .kai-apps-inner { padding: 48px 18px 60px; }
  .kai-app-card .kai-app-body, .kai-app-card:last-child .kai-app-body { width: 58%; padding: 24px 0 24px 20px; }
  .kai-app-card .kai-app-shot, .kai-app-card:last-child .kai-app-shot { width: 38%; max-width: 150px; right: 8px; }
  .kai-app-card h3 { max-width: none; font-size: 18px; }
  .kai-app-card > .kai-app-body > p { max-width: none; font-size: 13px; }
  .kai-app-card li { font-size: 13px; gap: 8px; }
  .kai-app-card li svg { width: 15px; height: 15px; }
  .kai-app-card ul { gap: 8px; margin-bottom: 20px; }
  .kai-app-logo { height: 34px; margin-bottom: 16px; }
  .kai-app-logo img { height: 34px; }
  .kai-app-cta { padding: 10px 17px; font-size: 12.5px; }

  .kai-download-inner { padding: 8px 18px 56px; }
  .kai-download p { font-size: 15px; margin-bottom: 26px; }
  .kai-download-stores { gap: 12px; }
  .kai-download-stores img { width: 150px; height: 46px; }
  .kai-footer-inner { padding: 30px 18px 24px; }
  .kai-footer-social { gap: 22px; }
  .kai-footer-bottom { flex-direction: column; gap: 10px; }
  .kai-footer-legal { gap: 20px; }
}

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

/* ==========================================================================
   APP PICKER
   The family page's store badges serve three apps, so they ask which one
   before leaving. Built on the Bootstrap modal that is already on the page —
   it brings the focus trap, Esc handling and backdrop for free.
   ========================================================================== */
.kai-picker .modal-dialog { max-width: 460px; }
.kai-picker .modal-content {
  position: relative;
  border: 0; border-radius: 24px; padding: 38px 34px 30px;
  background: #fff; box-shadow: 0 30px 70px rgba(18, 20, 23, .22);
}

.kai-picker-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; padding: 7px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: #8A94A1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.kai-picker-close:hover { background: #F2F5F8; color: var(--kai-ink); }
.kai-picker-close svg { width: 18px; height: 18px; }

.kai-picker h2 {
  margin: 0 0 8px; font-size: 25px; font-weight: 700;
  letter-spacing: -.02em; color: var(--kai-ink);
}
.kai-picker-sub { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--kai-body); }

.kai-picker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kai-picker-option {
  --kai-pick: var(--kai-blue);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--kai-line);
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.kai-picker-her    { --kai-pick: #EE4B49; }
.kai-picker-thrive { --kai-pick: #1F8F43; }
.kai-picker-option:hover {
  border-color: var(--kai-pick);
  background: color-mix(in srgb, var(--kai-pick) 6%, #fff);
  transform: translateX(2px);
}
.kai-picker-logo { width: 46px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.kai-picker-text { flex: 1; min-width: 0; }
.kai-picker-text strong { display: block; font-size: 16px; font-weight: 700; color: var(--kai-ink); }
.kai-picker-text span { display: block; font-size: 13px; line-height: 1.4; color: var(--kai-body); }
.kai-picker-arrow { width: 19px; height: 19px; flex: 0 0 auto; color: var(--kai-pick); }

.kai-picker-foot { margin: 22px 0 0; font-size: 13.5px; color: var(--kai-body); text-align: center; }
.kai-picker-foot a { color: var(--kai-blue); text-decoration: none; }
.kai-picker-foot a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .kai-picker .modal-dialog { max-width: none; margin: 14px; }
  .kai-picker .modal-content { padding: 32px 20px 24px; border-radius: 20px; }
  .kai-picker h2 { font-size: 21px; }
  .kai-picker-sub { font-size: 14px; margin-bottom: 20px; }
  .kai-picker-option { padding: 13px 14px; gap: 12px; }
  .kai-picker-text strong { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .kai-picker-option { transition: none; }
  .kai-picker-option:hover { transform: none; }
}

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

   Same treatment the Kai Thrive footer got. Kai Her's footer is the legacy one
   in belowSections.css (.footer-section / .footer-container / .footer-legal-row);
   this block puts the family footer on exactly those metrics.

   It sits last in the file on purpose, so it supersedes the sizes above —
   including the ones inside the 1200 / 992 / 576 media queries, since media
   queries add no specificity and 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 44px side padding, which held the footer inside
   Kai Her's. 90% is what Kai Her uses at every width. */
.kai-footer-inner { max-width: 90%; margin: 0 auto; padding: 44px 20px 30px; }

/* the rule above also replaces the 28px / 24px / 18px side padding that the
   1200, 992 and 576 breakpoints set for .kai-footer-inner further up */

/* was rgba(27, 27, 27, .12), far lighter than Kai Her's rule */
.kai-footer-top { padding-bottom: 25px; border-bottom-color: #626262; }

/* was gap: 22px — Kai Her puts 50px between the logo block and the tagline */
.kai-footer-brand { gap: 50px; }
/* was width: 110px — Kai Her sizes its footer logo by height instead, so the
   three wordmarks line up on their baseline rather than on their box width */
.kai-footer-brand img { width: auto; height: 60px; }
/* was 16px / 500, against Kai Her's 24px / 400 */
.kai-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 */
.kai-footer-social img { width: 32px; height: 32px; filter: none; opacity: .8; }
.kai-footer-social a:hover img { filter: none; opacity: 1; transform: translateY(-2px); }

/* This is what was actually wrong: with no justification the copyright and both
   legal links bunched up on the left. Kai Her splits them, copyright left and
   links right. */
.kai-footer-bottom { justify-content: space-between; padding-top: 30px; }
/* was 13.5px — Kai Her's .footer-copyright p is 20px */
.kai-footer-bottom p { font-size: 20px; color: #2A2A2A; }

/* was gap: 26px and no separator */
.kai-footer-legal { gap: 8px; align-items: center; }
/* was 13.5px — Kai Her's .legal-link is 20px */
.kai-footer-legal a { font-size: 20px; color: #2A2A2A; }
.kai-footer-legal-sep { font-size: 20px; color: #2A2A2A; padding: 0 5px; line-height: 1; }

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

@media (max-width: 767.98px) {
  .kai-footer-inner { max-width: 100%; padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 575.98px) {
  .kai-footer-bottom { flex-direction: column; gap: 10px; }
  .kai-footer-social { gap: 22px; }
}

/* ==========================================================================
   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 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) {
  .kai-footer-brand p { font-size: 22px; }
  .kai-footer-bottom p { font-size: 18px; }
  .kai-footer-legal a { font-size: 18px; }
  .kai-footer-legal-sep { font-size: 20px; }
}

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

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

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

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

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

/* ==========================================================================
   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, Kai Her
   and Kai Thrive all render the same size at the same width. The breakpoint
   edges are Kai Core's too (1800 / 1600 / 1451 / 1400 / 1200 / 992 / 768 /
   576 / 400 / 380), 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; this hero shares its row with the phone artwork, so it takes
       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 */
.kai-hero h1 { font-size: 80px; }
.kai-apps-head h2, .kai-download h2 { font-size: 56px; }
.kai-hero-sub { font-size: 23px; }
.kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 17px; }
/* The three app cards were already right at their own sizes (h3 20px, body and
   list 13.5px, CTA 13.5px, stepping down at 576px), so they are held out of
   the Kai Core ladder. The ladder line each one came from is kept below. */
/* .kai-app-card h3 { font-size: 28px; } */
.kai-picker-text strong { font-size: 24px; }
/* was: .kai-app-card > .kai-app-body > p, .kai-app-card li, .kai-picker-text span, .kai-proof-text strong */
.kai-picker-text span, .kai-proof-text strong { font-size: 16px; }
.kai-eyebrow { font-size: 18px; }
/* was: .kai-btn, .kai-app-cta */
.kai-btn { font-size: 18px; }

/* the app picker is a dialog, not page copy, so its heading follows Kai Core's
   own modal heading (.heading-modal) rather than the section-heading ladder */
.kai-picker h2 { font-size: 45px; }
@media (max-width: 992px) { .kai-picker h2 { font-size: 40px; } }

@media (min-width: 1600px) {
  .kai-hero h1 { font-size: 90px; }
  .kai-hero-sub { font-size: 26px; }
  .kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 18px; }
}

/* Kai Core holds its section heading at 56px until 1800px */
@media (min-width: 1800px) {
  .kai-apps-head h2, .kai-download h2 { font-size: 60px; }
}

@media (max-width: 1399px) {
  .kai-hero h1 { font-size: 56px; }
  .kai-apps-head h2, .kai-download h2 { font-size: 56px; }
  .kai-hero-sub { font-size: 23px; }
  .kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 16px; }
}

@media (max-width: 1199px) {
  .kai-hero h1 { font-size: 48px; }
  .kai-apps-head h2, .kai-download h2 { font-size: 42px; }
  .kai-hero-sub { font-size: 20px; }
  .kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 15px; }
  /* was: .kai-app-card > .kai-app-body > p, .kai-app-card li, .kai-picker-text span, .kai-proof-text strong */
  .kai-picker-text span, .kai-proof-text strong { font-size: 14px; }
}

@media (max-width: 991px) {
  .kai-hero h1 { font-size: 50px; }
  .kai-apps-head h2, .kai-download h2 { font-size: 28px; }
  .kai-hero-sub { font-size: 20px; }
  .kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 16px; }
}

@media (max-width: 767px) {
  .kai-hero h1 { font-size: 40px; }
  .kai-apps-head h2, .kai-download h2 { font-size: 28px; }
  .kai-hero-sub { font-size: 16px; }
  .kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 15px; }
}

@media (max-width: 575px) {
  .kai-hero h1 { font-size: 34px; }
  .kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 14px; }
  /* was: .kai-btn, .kai-app-cta */
  .kai-btn { font-size: 16px; }
}

/* Kai Core's hero body drops to 16px from 845px down, not 768px */
@media (max-width: 845px) {
  .kai-hero-sub { 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) {
  .kai-hero h1 { font-size: 75px; }
}
@media (min-width: 992px) and (max-width: 1024px) and (min-height: 1200px) and (max-height: 1370px) and (orientation: portrait) {
  .kai-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) {
  .kai-apps-lead, .kai-apps-sub, .kai-download p, .kai-picker-sub, .kai-picker-foot { font-size: 13px; }
}

/* These two sit last because Kai Core resolves them in a way the plain ladder
   cannot reproduce. */

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

/* 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) { .kai-hero-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) {
  .kai-apps-head h2, .kai-download 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) {
  /* was: .kai-app-card > .kai-app-body > p, .kai-app-card li, .kai-picker-text span, .kai-proof-text strong */
  .kai-picker-text span, .kai-proof-text strong { font-size: 16px; }
}

/* ==========================================================================
   IN-PAGE JUMPS

   Three links jump within this page: two to #apps (the hero button and the
   app picker's "Compare the three apps") and one to #download.

   The nav is position: sticky, so without a scroll margin the target lands
   flush with the viewport top and the nav sits on top of its heading. The
   margin tracks the nav's own height at each breakpoint (86 / 76 / 70) plus
   20px of breathing room. --kai-nav-height is scoped to .kai-nav and does not
   inherit here, so the numbers are written out.
   ========================================================================== */
html { scroll-behavior: smooth; }
#apps, #download { scroll-margin-top: 106px; }

@media (max-width: 1199.98px) {
  #apps, #download { scroll-margin-top: 96px; }
}

@media (max-width: 767.98px) {
  #apps, #download { scroll-margin-top: 90px; }
}

/* a jump should still be instant for anyone who asks for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   APP PICKER - ITS OWN SCALE

   The Kai Core ladder above is a page scale: 45px headings, 24px row titles,
   17px body. Inside a 460px dialog that reads far too heavy - the heading was
   wrapping onto two lines and every row tagline onto two more. So the picker
   keeps the sizes it was designed at.

   The ladder lines that reached into it are left in place above; these simply
   come later in the file and win.
   ========================================================================== */
/* was 45px from the ladder, 25px by design */
.kai-picker h2 { font-size: 25px; text-align: center; }
/* centred with the heading, so the two read as one block */
.kai-picker-sub { font-size: 15px; text-align: center; }
/* was 24px / 16px from the ladder */
.kai-picker-text strong { font-size: 16px; }
.kai-picker-text span { font-size: 13px; }

@media (max-width: 575.98px) {
  .kai-picker h2 { font-size: 21px; }
  .kai-picker-sub { font-size: 14px; }
  .kai-picker-text strong { font-size: 15px; }
}

/* 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. */
.kai-download-fatsecret { display: flex; justify-content: center; margin-top: 34px; }
.kai-download-fatsecret img { width: 178px; height: auto; display: block; }

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