/* ============================================================================
   Kayakriti — Page templates (kp- = "kayakriti page")
   Used by templates/category-page.php, service-page.php, top-category-page.php
   Builds on css/styles.css (which provides --blue, --ink, --r-*, --t-* tokens)
   ============================================================================*/

/* ---- Containers & rhythm -------------------------------------------------*/
.container         { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
/* `.kp-narrow` was previously a 760px cap that squeezed the FAQ section.
   Now it matches the default container width — same as the testimonials
   and the rest of the page. (`max-width: none` was wrong — it removed
   the .container max-width entirely and made the section span the full
   viewport.) */
.kp-narrow         { max-width: var(--max, 1200px); }
.kp-section        { padding: clamp(40px, 6vw, 80px) 0; }
/* Sibling section spacing: previous rule completely zeroed the top padding,
   which made content from one section crash into the next. Restore a small
   buffer so adjacent sections breathe. */
.kp-section + .kp-section { padding-top: clamp(20px, 3vw, 32px); }

/* Canonical typography for content sections (overrides for hero / body
   sections live further down). Heights are tight by default — service
   pages have a lot of vertical content and benefit from compact leading. */
.kp-section h2     { font-size: clamp(28px, 3.6vw, 44px); margin: 0 0 14px; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.kp-section h3     { font-size: clamp(20px, 2.4vw, 26px); margin: 22px 0 8px; color: var(--ink); }
.kp-section p      { font-size: 16.5px; line-height: 1.3; color: var(--body); margin: 0 0 14px; }
.kp-section .lead  { font-size: 17px; color: var(--ink-3, var(--body)); }

.kp-section .eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 10px;
}

/* ---- Hero ----------------------------------------------------------------*/
.kp-hero {
  padding: clamp(36px, 5vw, 70px) 0 clamp(20px, 3vw, 40px);
  background: linear-gradient(180deg, var(--surface) 0%, transparent 100%);
}
.kp-hero h1 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 8px 0 16px;
  font-weight: 500;
}
.kp-hero .lead { font-size: 19px; max-width: 720px; }
.kp-hero-cta { margin-top: 24px; }

.breadcrumb {
  font-size: 13.5px; color: var(--muted);
  margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- Image placeholder ---------------------------------------------------*/
.kp-image-placeholder {
  margin: 0;
  width: 100%;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 0%, var(--tint) 100%);
  border: 1px dashed rgba(45, 125, 210, 0.32);
  display: flex; flex-direction: column; align-items: stretch;
  position: relative;
}
.kp-image-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-placeholder-inner {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--blue);
  opacity: 0.55;
  text-align: center;
  padding: 24px;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
.kp-image-placeholder figcaption {
  font-size: 13px; color: var(--muted);
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(45, 125, 210, 0.12);
}
.kp-image-wide   { aspect-ratio: 21/9; }
.kp-image-square { aspect-ratio: 4/3; }

/* ---- Two-col layout (service page) --------------------------------------*/
.kp-two-col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) { .kp-two-col { grid-template-columns: 1fr; } }

.kp-quickfacts {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 18px);
  padding: 24px;
  position: sticky; top: 100px;
  box-shadow: 0 8px 24px -10px rgba(14,30,53,0.08);
}
.kp-quickfacts h3 { margin-top: 0; }
.kp-quickfacts dl { margin: 0 0 18px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.kp-quickfacts dt { color: var(--muted); font-weight: 600; }
.kp-quickfacts dd { margin: 0; color: var(--ink); }

.kp-bullets { padding-left: 1.1em; line-height: 1.7; color: var(--body); }
.kp-bullets li { margin-bottom: 6px; }

/* ---- Sub-category section (anchor target) -------------------------------*/
.kp-subcat { background: var(--white); border-top: 1px solid var(--line); }
.kp-subcat:nth-of-type(even) { background: var(--surface); }
.kp-subcat-header { max-width: 760px; margin-bottom: 28px; }
.kp-subcat-body {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 880px) { .kp-subcat-body { grid-template-columns: 1fr; } }

/* ---- Service cards (within sub-cat OR on category direct list) ----------*/
.kp-service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .kp-service-cards { grid-template-columns: 1fr; } }

.kp-service-card,
.kp-interlink-card {
  display: block;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  padding: 20px 22px;
  color: var(--ink);
  transition: all 200ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  position: relative;
}
.kp-service-card:hover,
.kp-interlink-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(45, 125, 210, 0.22);
}
.kp-service-card h3,
.kp-interlink-card h3 {
  margin: 0 0 6px;
  font-size: 18px; line-height: 1.25;
  color: var(--ink);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.kp-service-card p,
.kp-interlink-card p {
  margin: 0 0 12px;
  font-size: 14.5px; color: var(--muted); line-height: 1.5;
}
.kp-readmore {
  font-size: 13px; font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.02em;
}

/* ---- Interlinks grid ----------------------------------------------------*/
.kp-interlinks { background: var(--surface); padding: clamp(50px, 6vw, 80px) 0; }
.kp-interlink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.kp-interlink-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---- Testimonials -------------------------------------------------------*/
.kp-testimonials { background: var(--white); padding: clamp(28px, 4vw, 48px) 0; }
/* Testimonials — horizontal scroller. Each card is a fixed width so the
   rail always overflows (regardless of how many testimonials exist) and
   auto-scroll always has somewhere to advance to. Auto-advance every 3s
   is handled by auto-scroll-rails.js; pauses on hover; snaps to cards. */
.kp-testimonial-grid {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-color: var(--line) transparent;
}
.kp-testimonial-grid > .kp-testimonial-card {
  flex: 0 0 320px;            /* fixed card width — guarantees overflow */
  scroll-snap-align: start;
}
.kp-testimonial-grid::-webkit-scrollbar { height: 6px; }
.kp-testimonial-grid::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
@media (max-width: 640px) {
  .kp-testimonial-grid > .kp-testimonial-card { flex: 0 0 85%; }
}
.kp-testimonial-card {
  background: var(--surface);
  border-radius: var(--r-xl, 18px);
  padding: 16px 18px;
  border: 1px solid var(--line);
}
.kp-stars { color: #F2A93B; font-size: 15px; letter-spacing: 2px; margin-bottom: 8px; }
.kp-testimonial-card blockquote {
  margin: 0 0 10px;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 16px; line-height: 1.5;
  color: var(--ink);
}
.kp-testimonial-card footer { font-size: 13.5px; color: var(--muted); }
.kp-testimonial-card footer strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.kp-testimonial-note { margin-top: 20px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* ---- Bottom CTA band — contained blue card, centred content -------------
   The blue gradient is on the inner card (not the outer section), so it
   stays inside the container's max-width with rounded corners and proper
   horizontal margins instead of spreading edge-to-edge. */
/* Bottom CTA band — make the SECTION a flex container so the inner card
   is unambiguously centred even if a parent stylesheet has weird overrides. */
.kp-cta-band {
  background: transparent;
  padding: clamp(40px, 5vw, 64px) 0;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kp-cta-band > .container {
  width: 100%;
  max-width: var(--max, 1200px);
  margin-left: auto;
  margin-right: auto;
  background: var(--grad-ink, linear-gradient(135deg, #0E1E35 0%, #1B3A6B 100%));
  color: var(--white);
  text-align: center;
  border-radius: var(--r-2xl, 24px);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
  box-shadow: 0 24px 60px -24px rgba(14,30,53,0.32);
  box-sizing: border-box;
}
.kp-cta-band > .container > * {
  margin-left: auto;
  margin-right: auto;
}
.kp-cta-band h2 {
  color: var(--white);
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
  text-align: center;
}
.kp-cta-band p {
  color: rgba(255,255,255,0.78);
  font-size: 17px;
  margin: 0 0 24px;
  text-align: center;
}
.kp-cta-band .btn {
  font-size: 16px;
  /* btn is inline-flex; text-align center on parent does the work */
}
.kp-cta-or {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  text-align: center;
}
.kp-cta-or a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.4);
}

/* ---- Gallery grid (3 placeholder thumbs on service pages) ---------------*/
.kp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 720px) { .kp-gallery-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Keywords line (factual SEO surface) --------------------------------*/
.kp-keywords-line {
  font-size: 14px;
  color: var(--muted);
  background: var(--surface);
  border-left: 3px solid var(--blue);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-top: 20px;
}
.kp-keywords-line strong { color: var(--ink); }

/* ============================================================================
   BEFORE / AFTER SLIDER
   ============================================================================*/
.kp-ba-section {
  background: var(--surface);
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(20px, 3vw, 36px);
}
.kp-ba-slider {
  /* --ba-pos drives the clip-path on .kp-ba-after (must be a percentage).
     --ba-pos-norm is a unitless 0..1 mirror used by .kp-ba-tag opacity
     (opacity can't take a percentage). Both are kept in sync by
     before-after-slider.js. */
  --ba-pos: 50%;
  --ba-pos-norm: 0.5;
  position: relative;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  user-select: none;
  margin: 24px 0 14px;
  background: var(--ink);
  box-shadow: 0 16px 48px -16px rgba(14,30,53,0.32);
}
.kp-ba-track {
  position: relative;
  aspect-ratio: 16/10;
  width: 100%;
}
.kp-ba-side { position: absolute; inset: 0; overflow: hidden; }
.kp-ba-side img,
.kp-ba-side .kp-ba-empty { width: 100%; height: 100%; display: block; object-fit: cover; }

.kp-ba-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}
/* Before / After labels — pinned to opposite top corners so they never
   overlap regardless of slider position. Opacity is tied to --ba-pos-norm
   so labels fade in/out as the visitor drags the handle: at far right
   the Before image is fully visible and only the "Before" pill shows;
   as the handle moves left to reveal the After image, "Before" fades
   out and "After" fades in. Linear mapping gives a smooth crossover.   */
.kp-ba-tag {
  position: absolute;
  top: 14px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  /* No transition: drag should feel immediate, not laggy. */
}
.kp-ba-before .kp-ba-tag {
  left: 14px;
  background: rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: var(--ba-pos-norm, 1);            /* fades out as handle moves left */
}
.kp-ba-after .kp-ba-tag {
  right: 14px;
  background: var(--blue, #2D7DD2);
  opacity: calc(1 - var(--ba-pos-norm, 0));  /* fades out as handle moves right */
}
.kp-ba-after { clip-path: inset(0 0 0 var(--ba-pos)); }

.kp-ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 56px;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.kp-ba-handle:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }
.kp-ba-handle-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 3px; transform: translateX(-50%);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.kp-ba-handle-arrows {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; letter-spacing: 1px;
  box-shadow: 0 6px 18px -4px rgba(14,30,53,0.4);
}
.kp-ba-caption { font-size: 13.5px; color: var(--muted); margin-top: 14px; max-width: 640px; }

/* Disclaimer paragraphs below the Watch & Learn and Before/After sections.
   Intentionally muted — small font, low-contrast color, italic — so they
   sit as legal/contextual footnotes rather than dominant copy. The top
   margin gives the clause clear separation from the section content
   above it, so it doesn't read as part of the same block. */
/* Note: scoped as `p.kp-section-disclaimer` (not just `.kp-section-disclaimer`)
   to out-specify the generic `.kp-section p` rule defined earlier in this
   file. Without the `p` qualifier, every property here would be struck out
   in DevTools — `.kp-section p` (0,1,1) beats `.kp-section-disclaimer`
   (0,1,0). `p.kp-section-disclaimer` (0,2,1) wins cleanly. */
p.kp-section-disclaimer {
  font-size: 14px;
  line-height: 1.2;
  color: var(--body);
  margin: 10px 0 14px;
  font-style: italic;
}
@media (max-width: 720px) {
  p.kp-section-disclaimer {
    font-size: 12px;
    line-height: 1;
    color: var(--body);
    margin: 10px 10px 10px;
  }
}

/* ============================================================================
   FAQ section (snippet-friendly Q&As)
   ============================================================================*/
.kp-faq {
  background: var(--white);
  padding-top: clamp(16px, 2.5vw, 28px);
  padding-bottom: clamp(16px, 2.5vw, 28px);
}
/* FAQs in a 2-column layout on desktop. We let the column box stretch
   wider (max 1100px) so each Q is readable; CSS columns keep the
   per-item open/close behaviour intact. */
.kp-faq-list {
  margin-top: 10px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  column-count: 2;
  column-gap: 16px;
}
.kp-faq-item { break-inside: avoid; }
@media (max-width: 880px) {
  .kp-faq-list { column-count: 1; }
}
/* FAQ items: boxed look (background fill + border + rounded corners)
   with tight vertical padding (5px) so the rows stay compact. */
.kp-faq details,
.kp-faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 14px;
  margin-bottom: 6px;
  transition: border-color 200ms ease;
  overflow: hidden;
}
.kp-faq-item[open] { border-color: var(--blue); }
.kp-faq-item summary {
  padding: 0 28px 0 0;        /* room only for the +/- indicator on the right */
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  font-size: 14.5px;
  list-style: none;
  position: relative;
  line-height: 1.3;
  margin: 0;
}
.kp-faq-item summary::-webkit-details-marker { display: none; }
.kp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--blue);
  line-height: 1;
  font-weight: 400;
}
.kp-faq-item[open] summary::after { content: "−"; }
.kp-faq-a {
  padding: 6px 0 0;
  margin: 0;
  color: var(--body);
  line-height: 1.4;
  font-size: 13.5px;
}
@media (max-width: 880px) {
  .kp-faq { padding-top: 10px; padding-bottom: 10px; }
  .kp-faq-item { padding: 5px 12px; }
  .kp-faq-item summary { font-size: 14px; padding-right: 24px; }
}

/* ============================================================================
   CTA CONSULTATION MODAL
   Opened via kayaModal.open({ service, category }) from any CTA button.
   ============================================================================*/
.kaya-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14, 30, 53, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.kaya-modal-overlay.open { opacity: 1; visibility: visible; }

.kaya-modal-box {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  /* Wider on desktop so the two appointment-type cards fit their titles
     ("Book Your Video Consultation" / "Book In-patient Appointment") on
     one line each instead of wrapping. */
  max-width: 680px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(14, 30, 53, 0.25);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kaya-modal-overlay.open .kaya-modal-box { transform: translateY(0); }

.kaya-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: #fff; display: grid; place-items: center;
  transition: background 0.15s;
  z-index: 2;
}
.kaya-modal-close:hover { background: rgba(255,255,255,0.3); }

.kaya-modal-head {
  background: linear-gradient(135deg, var(--blue) 0%, #1a5fa8 100%);
  border-radius: 20px 20px 0 0;
  padding: 32px 32px 26px;
}
.kaya-modal-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}
.kaya-modal-head h2 {
  font-size: clamp(20px, 4vw, 26px);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600; margin: 0 0 14px;
  color: #fff; line-height: 1.2;
}
.kaya-modal-head h2 em { font-style: italic; }
.kaya-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kaya-modal-tags .pill {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
}

.kaya-modal-body { padding: 28px 32px 32px; }

/* Success state */
.kaya-modal-success { padding: 48px 32px; text-align: center; }
.kaya-modal-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: #22c55e; color: #fff;
  font-size: 28px; font-weight: 700;
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.kaya-modal-success h3 { font-size: 22px; margin-bottom: 10px; color: var(--ink); }
.kaya-modal-success p { color: var(--body); font-size: 15px; margin-bottom: 6px; }
.kaya-modal-countdown { font-size: 13px; color: var(--muted); }

/* (Earlier @media (max-width: 520px) block removed — superseded by the
   richer mobile-modal rules near the end of this file.) */

/* ============================================================================
   /book-appointment/ — embedded funnel
   Re-uses the splash funnel screens / IDs so splash.js can drive it, but
   renders inline in the page (not as the fixed full-viewport overlay).
   ============================================================================*/

.kp-book-hero {
  background: var(--white);
  padding: 56px 0 36px;
}
.kp-book-hero h1 {
  font-size: clamp(34px, 4.5vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
}
.kp-book-hero .lead {
  font-size: 17px;
  color: var(--body);
  max-width: 720px;
}

.booking-funnel-section {
  padding-top: 24px;
  padding-bottom: 64px;
  background: var(--surface);
}
.booking-funnel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl, 24px);
  box-shadow: 0 24px 56px -24px rgba(14,30,53,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The .splash-stage / .splash-screen rules from splash.css use position:fixed
   inside .splash-shell — we override here so the funnel sits inline. */
.booking-funnel .splash-stage.booking-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 40px clamp(20px, 4vw, 56px) 32px;
  min-height: 480px;
  overflow: visible;
}
.booking-funnel .splash-screen {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Bottom nav (back + progress dots) — keep visible always on this page */
.booking-funnel .splash-bottom {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 16px clamp(20px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-funnel .splash-bottom.hidden { display: flex; }   /* always shown here */

/* Q4 form panel keeps its dark/blue header look so the booking page's
   final step still feels like the splash final step. */
.booking-funnel #screen-q4.screen-form .form-header {
  border-radius: var(--r-2xl, 24px) var(--r-2xl, 24px) 0 0;
}

@media (max-width: 720px) {
  .booking-funnel .splash-stage.booking-stage {
    padding: 24px 18px 18px;
    min-height: 360px;
  }
  .kp-book-hero { padding: 32px 0 20px; }
}

/* ============================================================================
   SERVICE PAGE — refined layout
   - Hero: 2-column with image right; CTA only (no pills, no eyebrow)
   - Body: smaller H2s, image placeholders interleaved, points with icons
   - Sidebar: dense card stack — flows naturally with body, no sticky stop
   - 3-up grids for Before/After and Watch & Learn
   ============================================================================*/

/* Hero — 2-column split (text left, image right). Tightened vertical
   padding on desktop so the hero doesn't push the rest of the page down. */
.kp-hero-split {
  padding-top: 28px;
  padding-bottom: 28px;
}
@media (max-width: 880px) {
  .kp-hero-split { padding-top: 18px; padding-bottom: 22px; }
}
.kp-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
/* Mobile order overrides handled in the mobile-hero-cta block below — text is first,
   then image, then CTA (no order swap). Earlier `order: -1` removed. */
.kp-hero-text h1 {
  font-size: clamp(34px, 4.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 14px 0 16px;
}
/* Desktop hero lead — updated to 17 / 1.3. */
.kp-hero-text .lead {
  font-size: 17px;
  line-height: 1.3;
  color: var(--body);
  margin-bottom: 24px;
}
/* Mobile hero lead — unchanged from before; kept as a separate block so
   it can be tweaked independently of the desktop rule. */
@media (max-width: 720px) {
  .kp-hero-text .lead {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 24px;
  }
}
.kp-hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  margin-top: 4px;
}
.kp-hero-image {
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 380px;
  margin-left: auto;       /* keep right column tidy if image is narrower */
  box-shadow: 0 16px 48px -16px rgba(14,30,53,0.20);
}
@media (max-width: 880px) {
  .kp-hero-image { aspect-ratio: 16/10; max-height: 240px; }
}

/* Wide banner image below the hero — secondary visual for clinic/environment */
.kp-hero-image-section { padding-top: 8px; padding-bottom: 32px; }
.kp-hero-banner {
  max-height: 360px;
  border-radius: var(--r-xl, 18px);
}

/* Trust cards — 3 short trust badges directly below the hero */
.kp-trust-cards-section {
  padding-top: 8px;
  padding-bottom: 32px;
}
.kp-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.kp-trust-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 18px);
  padding: 22px 22px 20px;
  box-shadow: 0 8px 24px -16px rgba(14,30,53,0.10);
  display: flex; flex-direction: column;
}
.kp-trust-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--tint, #E6F0FB);
  color: var(--blue);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.kp-trust-icon svg { width: 22px; height: 22px; }
.kp-trust-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.kp-trust-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}
@media (max-width: 880px) {
  .kp-trust-grid { grid-template-columns: 1fr; gap: 14px; }
  .kp-trust-card { padding: 18px; }
}

/* Mobile hero CTA: hide the desktop CTA inside text, show the mobile CTA below image */
.kp-hero-cta-mobile { display: none; }
@media (max-width: 880px) {
  .kp-hero-cta-desktop { display: none; }
  .kp-hero-cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .kp-hero-cta-mobile .btn { width: 100%; max-width: 360px; }
  /* Mobile hero stacks: text → image → CTA (no order swap) */
  .kp-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .kp-hero-media { order: 0; }
}

/* ---- Service body: tighter typography, sectioned articles ---- */
.kp-service-body { padding-top: 32px; }

.kp-service-body .kp-body-section {
  margin-bottom: 32px;
}
.kp-service-body .kp-body-section:last-child { margin-bottom: 0; }

.kp-service-body .kp-body-h2 {
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}

/* Body paragraphs — desktop 18 / 1.2, mobile 16 / 1.2. No bullet/number on
   plain paragraphs (those are intro/topic sentences). */
.kp-service-body .kp-body-section > p {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--body);
}

/* Numbered list — plain "1." / "2." markers aligned with the text baseline. */
.kp-service-body .kp-body-section { counter-reset: kp-step; }
.kp-service-body .kp-bullets {
  list-style: none;
  padding-left: 0;
  margin: 2px 0 0;
}
.kp-service-body .kp-bullets li {
  counter-increment: kp-step;
  padding-left: 26px;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--body);
  text-indent: -26px;
}
.kp-service-body .kp-bullets li::before {
  content: counter(kp-step) ".";
  display: inline-block;
  width: 22px;
  margin-right: 4px;
  color: var(--blue, #2D7DD2);
  font-weight: 400;        /* regular — was 700, made the numbers pop out too much */
  font-size: inherit;
  text-indent: 0;
  text-align: left;
}

/* Mobile: smaller font (16px), same tight line-height. */
@media (max-width: 720px) {
  .kp-service-body .kp-body-section > p {
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 5px;
  }
  .kp-service-body .kp-bullets li {
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .kp-service-body .kp-body-section { margin-bottom: 16px; }
  .kp-service-body .kp-body-h2 { margin-bottom: 8px !important; }
}

/* Inline image and video placeholders inside the body flow */
.kp-image-inline,
.kp-video-inline {
  margin: 22px 0 28px;
  border-radius: var(--r-lg, 14px);
}

/* ============================================================================
   RAIL ARROWS — left / right circular controls overlaid on every horizontal
   rail (testimonials, YouTube videos). Auto-scroll-rails.js wraps each rail
   in a `.kp-rail-shell` and injects two arrow buttons that scroll the rail
   by one card-width per click. Arrows fade when disabled (at start / end of
   the rail) and disappear entirely if the rail isn't scrollable.
   ============================================================================*/
.kp-rail-shell {
  position: relative;
}
.kp-rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px -8px rgba(14, 30, 53, 0.25);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  padding: 0;
}
.kp-rail-arrow:hover:not(:disabled) {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.kp-rail-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.kp-rail-arrow-prev { left: -8px; }
.kp-rail-arrow-next { right: -8px; }

/* Hide arrows when rail content fits without overflow */
.kp-rail-shell-no-arrows .kp-rail-arrow { display: none; }

/* Mobile: keep arrows but smaller and tucked closer to the edge */
@media (max-width: 640px) {
  .kp-rail-arrow {
    width: 32px; height: 32px;
    box-shadow: 0 4px 12px -6px rgba(14, 30, 53, 0.3);
  }
  .kp-rail-arrow-prev { left: 2px; }
  .kp-rail-arrow-next { right: 2px; }
  .kp-rail-arrow svg { width: 14px; height: 14px; }
}

/* ---- Video placeholder ---- */
.kp-video-placeholder {
  background: linear-gradient(135deg, #1a2842 0%, #0E1E35 100%);
  color: rgba(255,255,255,0.75);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  display: grid; place-items: center;
  margin: 0;
}
.kp-video-placeholder figcaption {
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  padding: 8px 14px;
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center;
}
.kp-video-placeholder-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.kp-video-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.4);
  display: grid; place-items: center;
  color: #fff;
}
.kp-video-placeholder-inner span {
  font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.kp-video-embed {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.kp-video-embed iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* When the figure has a real iframe embed, override the centered-grid
   layout so the iframe stretches edge-to-edge instead of sitting in the
   middle with letterbox padding. */
.kp-video-placeholder.kp-has-video {
  display: block;     /* was: grid + place-items: center */
}
.kp-video-placeholder.kp-has-video figcaption {
  /* Caption stays as a thin overlay along the bottom */
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  padding: 8px 14px;
  font-size: 13px;
  text-align: center;
  z-index: 2;
}

/* ---- Sidebar: smart-sticky (scrolls with body, sticks when its last
        card reaches viewport bottom, releases at the body's end) ----
   • The aside column is stretched to the full body-section height so the
     sticky inside it has a long containing block to stick within.
   • The inner stack uses `position: sticky; top: calc(100vh - sidebar_h - 24)`.
     That means: the sticky engages when the element's natural top would
     scroll above (viewport − sidebar_h − 24). At that moment the element
     pins with its BOTTOM 24px from viewport bottom — which is exactly when
     the visitor first sees the last card at the bottom of the screen.
   • Until that point the element is in normal flow, scrolling alongside
     the body.  When the parent column's bottom catches up, the sticky
     boundary releases and the sidebar scrolls out with the body section.
   • `--sb-h` is set by sidebar-smart-sticky.js with the actual measured
     sidebar height.  The 700px fallback covers the first paint. */
.kp-col-aside {
  align-self: stretch;
}
.kp-side-sticky {
  position: sticky;
  /* Pure calc — NO max() floor. For sidebars taller than the viewport
     this evaluates to a negative number (e.g. −94px), which is exactly
     what we need: the sidebar's TOP scrolls above the viewport while its
     BOTTOM stays anchored 24px from the viewport bottom. The visitor
     watches the last card scroll into view, then everything pins. */
  top: calc(100vh - var(--sb-h, 700px) - 24px);
  display: flex; flex-direction: column; gap: 16px;
}
.kp-side-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 18px);
  padding: 18px 18px 16px;
  box-shadow: 0 6px 16px -10px rgba(14,30,53,0.10);
}
.kp-side-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  display: block; margin-bottom: 10px;
}
.kp-side-cta {
  width: 100%; margin-top: 12px;
}
.kp-side-link {
  display: block; margin-top: 10px;
  font-size: 13.5px; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.kp-side-link:hover { text-decoration: underline; }

/* At-a-glance card */
.kp-quickfacts-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 14px;
  font-size: 13.5px;
}
.kp-quickfacts-list dt { color: var(--muted); font-weight: 500; }
.kp-quickfacts-list dd { margin: 0; color: var(--ink); font-weight: 600; }

/* Doctor card */
.kp-doctor-card { text-align: center; padding-top: 22px; }
.kp-doctor-photo {
  width: 80px; height: 80px;
  border-radius: 50%; overflow: hidden;
  margin: 0 auto 12px;
  border: 3px solid var(--surface);
}
.kp-doctor-img { aspect-ratio: 1/1; height: 80px; }
.kp-doctor-meta {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 8px;
}
.kp-doctor-meta strong {
  font-size: 16px; color: var(--ink);
}
.kp-doctor-creds {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.kp-doctor-loc {
  font-size: 12px; color: var(--blue); font-weight: 600;
  margin-top: 2px;
}

/* YouTube card — entire card is a link to the YouTube channel.
   Compact: tiny play icon + channel handle + caption. */
.kp-yt-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  cursor: pointer;
}
.kp-yt-link:hover {
  border-color: var(--blue, #2D7DD2);
  transform: translateY(-2px);
}
.kp-yt-link-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
}
.kp-yt-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #FF0033;
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.kp-yt-icon svg { width: 22px; height: 22px; }
.kp-yt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-yt-text strong {
  font-size: 14px; color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-yt-text small { font-size: 12px; color: var(--muted); }

/* Sidebar trust card — 3 stacked rows (icon left, title only).
   Description text is hidden everywhere; the icon is sized to match the
   title's visual weight (~26px box, ~16px svg) so neither dominates. */
.kp-trust-side-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-trust-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
}
.kp-trust-row + .kp-trust-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.kp-trust-row .kp-trust-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--tint, #E6F0FB);
  color: var(--blue);
  display: grid; place-items: center;
  margin: 0;
}
.kp-trust-row .kp-trust-icon svg { width: 14px; height: 14px; }
.kp-trust-row .kp-trust-body { min-width: 0; }
.kp-trust-row .kp-trust-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.kp-trust-row .kp-trust-body p { display: none; }   /* description hidden */

/* Mobile: when sidebar drops below the body, lay the 3 trust rows out
   horizontally as compact icon-and-title chips (no description). */
@media (max-width: 880px) {
  .kp-trust-side-card {
    flex-direction: row;
    gap: 10px;
  }
  .kp-trust-row {
    flex: 1;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
    border-top: 0 !important;
    background: var(--surface);
    border-radius: 12px;
    padding: 2px 10px;            /* was 14px 10px */
    padding-top: 8px !important;  /* was 0 !important */
  }
  .kp-trust-row .kp-trust-icon { margin: 0 auto; }
  .kp-trust-row .kp-trust-body p { display: none; }
  .kp-trust-row .kp-trust-body strong { font-size: 12.5px; }
}

/* Related procedures card */
.kp-siblings-list {
  list-style: none; padding: 0; margin: 0;
}
.kp-siblings-list li {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.kp-siblings-list li:first-child { border-top: 0; padding-top: 4px; }
.kp-siblings-list li:last-child  { padding-bottom: 4px; }
.kp-siblings-list a {
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
}
.kp-siblings-list a:hover { color: var(--blue); }
.kp-siblings-list a::after {
  content: "→"; color: var(--muted); font-weight: 400;
  transition: transform 0.15s, color 0.15s;
}
.kp-siblings-list a:hover::after { color: var(--blue); transform: translateX(3px); }

/* Mobile: sidebar drops below body, no sticky */
@media (max-width: 880px) {
  .kp-col-aside { position: static; align-self: stretch; }
  .kp-side-sticky { position: static; gap: 14px; }
}

/* Explore [Category] card — list sub-cat names with links + browse button */
.kp-explore-card h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.kp-explore-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.kp-explore-list li {
  border-top: 1px solid var(--line);
}
.kp-explore-list li:first-child { border-top: 0; }
.kp-explore-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s, padding 0.15s;
}
.kp-explore-list a::after {
  content: "→";
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.15s, color 0.15s;
}
.kp-explore-list a:hover {
  color: var(--blue);
}
.kp-explore-list a:hover::after {
  color: var(--blue);
  transform: translateX(3px);
}
.kp-explore-cta {
  width: 100%;
  background: transparent !important;
  color: var(--blue) !important;
  border: 1.5px solid var(--blue);
  font-size: 14px;
  padding: 10px 16px;
}
.kp-explore-cta:hover { background: var(--tint, #E6F0FB) !important; }

/* "See the Difference" — 3 sliders in one row on desktop. Mobile stays
   the same as before: 1 column, compact wide-aspect sliders so all three
   fit in a single scroll. */
.kp-ba-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
/* When only 1 or 2 patient pairs exist, keep the sliders centered and
   appropriately sized — avoids the half-empty 3-column look. */
.kp-ba-grid.kp-ba-grid-1 {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.kp-ba-grid.kp-ba-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.kp-ba-grid .kp-ba-slider { margin: 0; }
/* Desktop ratio (3/2) — closer to a typical landscape patient photo than
   the previous 4/3, without going as wide as 16/9 (which would compress
   face shots). Mobile override below uses 4/3 since that worked well. */
.kp-ba-grid .kp-ba-track  { aspect-ratio: 3/2; }
.kp-ba-grid .kp-ba-tag {
  top: 8px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.kp-ba-grid .kp-ba-before .kp-ba-tag { left: 8px; }
.kp-ba-grid .kp-ba-after  .kp-ba-tag { right: 8px; }
.kp-ba-grid .kp-ba-handle { width: 40px; }
.kp-ba-grid .kp-ba-thumb  { width: 30px; height: 30px; }

@media (max-width: 880px) {
  /* Mobile: every variant collapses to a single column. The `.kp-ba-grid-1`
     / `.kp-ba-grid-2` desktop variants need their own override here — their
     higher-specificity desktop rules would otherwise keep multi-column
     layouts on mobile and squash images into thin strips. */
  .kp-ba-grid,
  .kp-ba-grid.kp-ba-grid-1,
  .kp-ba-grid.kp-ba-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Mobile uses a wider 16/10 landscape so the slider box is shorter than
     it would be at 4/3 — better fills with typical horizontal patient
     photos and avoids the "image at top half, empty below" look. */
  .kp-ba-grid .kp-ba-track { aspect-ratio: 16/10; max-height: none; }
}

/* "Watch & Learn" rail — 2 videos side-by-side directly below the hero.
   When there are more than 2 videos the rail switches to horizontal scroll
   so users can swipe through extras without enlarging the page. */
.kp-watch-top { padding: 28px 0 12px; }
.kp-video-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}
/* Single-video layout: centre the card and cap its width so it doesn't
   stretch full-width across the body column (which would look like an
   accidental hero image). */
.kp-video-rail-single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.kp-video-rail .kp-video-card {
  margin: 0;
  border-radius: var(--r-lg, 14px);
  aspect-ratio: 16/9;
}
.kp-video-rail .kp-video-card .kp-video-play { width: 72px; height: 72px; }
.kp-video-rail .kp-video-card .kp-video-play svg { width: 36px; height: 36px; }

/* Scroll mode: when more than 2 videos exist, switch from grid to a
   horizontally-scrolling rail with snap points. */
.kp-video-rail-scroll {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.kp-video-rail-scroll .kp-video-card {
  flex: 0 0 calc(50% - 12px);
  scroll-snap-align: start;
}
@media (max-width: 760px) {
  /* On mobile the rail switches to horizontal scroll (one card per
     viewport-ish, swipe to reveal the rest) rather than stacking. */
  .kp-video-rail {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 6px;
  }
  .kp-video-rail .kp-video-card {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }
  .kp-video-rail-scroll .kp-video-card { flex: 0 0 88%; }
}

/* Inline BA + Watch sections (rendered inside main column so the sticky
   sidebar stays alongside). The grids stay 3-up but use a lighter spacing
   and the column-width sliders/cards are slightly narrower than before. */
.kp-inline-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.kp-inline-section .eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kp-inline-section h2.kp-body-h2 {
  margin-bottom: 8px;
}
.kp-inline-section > p {
  font-size: 15px;
  color: var(--body);
  margin: 0 0 14px;
  padding-left: 0;  /* override the body-section paragraph indentation/icon */
}
.kp-inline-section > p::before { content: none; }

/* Mobile modal — keep it as a real popup (rounded corners + margin from
   the viewport edges + drop shadow), just tighter padding and a vertical
   max-height so the submit button is reachable. The overlay's 12px
   padding + max-width: calc(100% - 24px) gives the modal breathing room
   on every side; visitors see the dark backdrop around it confirming
   it's a popup, not a page take-over. */
@media (max-width: 520px) {
  .kaya-modal-overlay {
    padding: 12px;
    align-items: center;
  }
  .kaya-modal-box {
    border-radius: 16px;
    max-width: calc(100% - 0px);
    max-height: calc(100vh - 24px);
    width: 100%;
    height: auto;
  }
  .kaya-modal-head {
    padding: 18px 20px 14px;
    border-radius: 16px 16px 0 0;
  }
  .kaya-modal-head h2 { font-size: 20px; margin-bottom: 8px; }
  .kaya-modal-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .kaya-modal-tags .pill { font-size: 11px; padding: 2px 8px; }
  .kaya-modal-body { padding: 16px 20px 20px; }
  .kaya-modal-body .field { gap: 4px; }
  .kaya-modal-body .field input,
  .kaya-modal-body .field select,
  .kaya-modal-body .field textarea {
    padding: 11px 14px;
    font-size: 15px;
  }
  .kaya-modal-body .form { gap: 12px; }
  .kaya-modal-body .help { font-size: 11.5px; margin-bottom: 8px; }
  .kaya-modal-close {
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    font-size: 18px;
  }
}