/* ==========================================================
   Kalpa — shared styles (all page templates)
   Tokens, base, nav, buttons, hero text, closing CTA.
   Page-specific sections live in each template's <style>.

   Layout notes
   - Desktop is built on a 1440px frame. Decorative pieces keep their
     native pixel size and are anchored to the page center
     (left: 50% + margin-left) or, for section curves, to the right edge —
     they never scale with the viewport.
   - Curves extend flat past the frame (SVG overflow: visible); the page's
     overflow-x: clip crops them.
   - Outside strokes are spread box-shadows (0 0 0 Npx), so they paint
     outside the box without changing its size.
   - Breakpoints: 1200 (tablet), 900 (nav/hero stack), 768 (phone).
   ========================================================== */

:root {
  --color-navy:   #131C36;
  --color-orange: #E25B34;
  --color-blue:   #BFE6F1;
  --color-yellow: #FCCC56;
  --content-max: 1200px;
  --side-padding-desktop: 80px;
  --side-padding-mobile: 24px;
}

* { box-sizing: border-box; }
body { margin: 0; }

/* clip, not hidden: hidden makes this a scroll container, which breaks the sticky nav. */
.kalpa-page {
  position: relative;
  overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* PLACEHOLDER base font */
}

.kalpa-section { position: relative; }
.kalpa-section--navy   { background-color: var(--color-navy); color: #fff; }
.kalpa-section--orange { background-color: var(--color-orange); color: #fff; }
.kalpa-section--blue   { background-color: var(--color-blue); color: var(--color-navy); }
.kalpa-section--yellow { background-color: var(--color-yellow); color: var(--color-navy); }

.kalpa-section-inner {
  position: relative;
  z-index: 3;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 5rem var(--side-padding-desktop);
}

/* ---------- Nav ---------- */
/* Sticky; sits below the WordPress admin bar when it's showing. Once the page
   scrolls, it retracts: shorter, set in to a 1280 frame, with a shadow. The
   margin-bottom makes up the lost height so the page doesn't jump. */
.kalpa-nav {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  background: var(--color-navy);
  transition: box-shadow 0.3s ease, margin 0.3s ease;
}

/* Grid (not flex): equal side columns keep the links truly centered
   regardless of the logo / right-side widths. 26 + 48 logo + 26 = 100 tall. */
.kalpa-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 26px 95px;
  transition: height 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}

.kalpa-nav.is-scrolled { margin-bottom: 28px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.kalpa-nav.is-scrolled .kalpa-nav-inner { height: 72px; max-width: 1280px; padding: 12px 40px; }
.kalpa-nav.is-scrolled .nav-logo { width: 134px; height: 40px; }

/* The strip the retracted nav leaves at the top of the page (72–100px),
   briefly visible while scrolling back up; painted orange instead of the
   page background. Hidden under the nav at full height. */
.kalpa-page::before {
  content: '';
  position: absolute;
  z-index: 99;
  top: 72px;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--color-orange);
  pointer-events: none;
}

.nav-logo-link { display: block; justify-self: start; line-height: 0; border-radius: 4px; }
.nav-logo-link:focus-visible { outline: 3px solid #D5FFA9; outline-offset: 4px; }

.nav-logo {
  display: block;
  width: 161px;
  height: 48px;
  object-fit: contain;
  transition: width 0.3s ease, height 0.3s ease;
}

.nav-links {
  display: flex;
  gap: 36px;
  justify-self: center;
}

.nav-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #CDD5E6;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.nav-link:hover { font-weight: 450; }
.nav-link--active { font-weight: 600; border-bottom-color: #CDD5E6; }

/* Sliding underline (added by JS): replaces the active link's own border. */
.nav-indicator {
  position: absolute;
  left: 0;
  height: 1px;
  background: #CDD5E6;
  pointer-events: none;
  transition: transform 0.3s ease, width 0.3s ease;
}

@media (min-width: 901px) {
  .kalpa-nav.has-indicator .nav-links { position: relative; }
  .kalpa-nav.has-indicator .nav-link--active { border-bottom-color: transparent; }
}

/* Right side: the Login dropdown + Schedule a Demo. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-self: end;
}

.nav-actions > .btn { white-space: nowrap; }

.nav-login { position: relative; }

.nav-login__toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
  background: none;
  border: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
}

/* Green underline grows in on hover / while open. */
.nav-login__toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: #8FBE5E;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-login__toggle:hover::after,
.nav-login__toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-login__toggle:focus-visible { outline: 3px solid #D5FFA9; outline-offset: 4px; border-radius: 4px; }

.nav-login__caret { transition: transform 0.2s ease; }
.nav-login__toggle[aria-expanded="true"] .nav-login__caret { transform: rotate(180deg); }

.nav-login__menu {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  min-width: 260px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
  animation: nav-login-in 0.18s ease;
}

.nav-login__menu a {
  display: block;
  padding: 14px 28px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
}

.nav-login__menu a:hover,
.nav-login__menu a:focus-visible { background: #EAF6FA; outline: none; }

@keyframes nav-login-in {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: none; }
}

.nav-toggle { display: none; }

/* ---------- Background shapes ---------- */
/* Three-piece background shape: the top and bottom curves (--t / --b px
   of the SVG) keep their designed height; only the flat middle stretches,
   so curves never distort and content can sit a fixed distance from them.
   At least the native width, centered; wider screens stretch it across. */
.s3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.s3 > svg { position: absolute; left: 0; display: block; width: 100%; }
.s3__top { top: 0; height: var(--t); }
.s3__mid { top: calc(var(--t) - 1px); height: calc(100% - var(--t) - var(--b) + 2px); } /* 1px overlaps hide seams */
.s3__bot { bottom: 0; height: var(--b); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.15px;
  padding: 13px 24px;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:focus-visible {
  outline: 3px solid #D5FFA9;
  outline-offset: 3px;
}

.btn--primary {
  background: #8FBE5E;
  color: var(--color-navy);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.btn--primary:hover {
  background: #A8D877;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(143, 190, 94, 0.45);
}

.btn--primary:active {
  background: #7AA84B;
  transform: translateY(1px);
  box-shadow: none;
}

/* Outline buttons: 1px border, so padding is 1px less to match the primary's size. */
.btn--outline,
.btn--outline-lime {
  background: transparent;
  padding: 12px 23px;
}

.btn--outline { color: #1CB9C5; border: 1px solid #1CB9C5; }
.btn--outline:hover { background: #1CB9C5; color: var(--color-navy); }

.btn--outline-lime { color: #D5FFA9; border: 1px solid #D5FFA9; }
.btn--outline-lime:hover { background: #D5FFA9; color: var(--color-navy); }

.btn--outline:active,
.btn--outline-lime:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  .kalpa-nav, .kalpa-nav-inner, .nav-logo, .nav-indicator, .link-arrow { transition: none; }
  .nav-login__menu { animation: none; }
  a:hover .link-arrow, a:focus-visible .link-arrow { translate: none; }
}

/* ---------- Hero text (two-column hero: text left, image right) ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.18px;
  color: #CDD5E6;
  margin: 0 0 25px;
}

.hero-eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 2px;
  background: var(--color-orange);
}

.hero-grid h1 {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 50px;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 15px;
}

.hero-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #9EA8BC;
  margin: 0;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 40px;
}

/* ---------- Closing CTA ---------- */
/* 924 tall on large screens, never taller than one screen below the
   retracted nav (72) on shorter ones like laptops; content centered. */
.cta-section {
  display: flex;
  align-items: center;
  min-height: min(924px, calc(100svh - 72px));
}

.cta-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 120px var(--side-padding-mobile);
  text-align: center;
}

.cta-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  color: #fff;
  margin: 0 0 18px;
}

.cta-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #CDD5E6;
  max-width: 440px;
  margin: 0 auto;
}

.cta-buttons {
  justify-content: center;
  margin-top: 36px;
}

.cta-origin {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #9EA8BC;
  margin: 16px 0 0;
}

.cta-origin__link {
  color: #CDD5E6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-origin__link:hover { color: #fff; }

/* Link arrows nudge right on hover/focus. */
.link-arrow {
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: translate 0.2s ease;
}

a:hover .link-arrow,
a:focus-visible .link-arrow { translate: 4px 0; }

/* Visually hidden, still read by screen readers. */
.kalpa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Section reveal (class added by JS): fade up 16px, optional stagger delay. */
.kalpa-reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.6s ease var(--reveal-delay, 0ms), translate 0.6s ease var(--reveal-delay, 0ms);
}

.kalpa-reveal.is-revealed { opacity: 1; translate: none; }

/* ---------- Site footer ---------- */
/* A shade darker than the navy CTA above it, with a hairline between. */
.kalpa-footer {
  position: relative;
  z-index: 3;
  background: #0C1226;
  border-top: 1px solid rgba(205, 213, 230, 0.15);
  color: #CDD5E6;
}

/* Brand + links on the left, contact on the right; the distributor line runs
   the full width underneath. */
.kalpa-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px var(--side-padding-desktop);
}

.kalpa-footer__logo { display: block; width: 161px; height: 48px; object-fit: contain; }

.kalpa-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 24px;
}

.kalpa-footer__nav a,
.kalpa-footer__email {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #CDD5E6;
  text-decoration: none;
}

.kalpa-footer__nav a:hover,
.kalpa-footer__email:hover { color: #fff; text-decoration: underline; }

.kalpa-footer__contact {
  justify-self: end;
  text-align: right;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.kalpa-footer__contact p { margin: 4px 0 0; }

/* Bottom row under the divider: Privacy Policy left, distributor line right. */
.kalpa-footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(205, 213, 230, 0.15);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #9EA8BC;
}
.kalpa-footer__legal p { margin: 0; }
.kalpa-footer__legal a { color: #CDD5E6; }
.kalpa-footer__legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .kalpa-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 32px;
    padding: 56px var(--side-padding-mobile);
    text-align: center;
  }
  .kalpa-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .kalpa-footer__nav { justify-content: center; }
  .kalpa-footer__contact { justify-self: center; text-align: center; }
  .kalpa-footer__legal { flex-direction: column; align-items: center; text-align: center; }
}

/* Phones: turn off the soft SVG drop/inner shadows on the big background
   shapes. They're barely visible at this size, and on iPhone Safari the tall
   shapes plus filters exceed its graphics memory, so the backgrounds didn't
   paint (and scrolling flashed white). */
@media (max-width: 900px) {
  .kalpa-page svg [filter] { filter: none; }
}

/* Safari (all sizes): it renders SVG filters on the CPU and re-draws them on
   every scroll/animation frame, which made the Features page crawl. Same
   trade: drop the subtle shape shadows there. (`font: -apple-system-body` is
   only understood by Safari/WebKit.) */
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  .kalpa-page svg [filter] { filter: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .kalpa-nav-inner { padding: 20px 40px; column-gap: 24px; }
  .nav-links { gap: 24px; }
  .nav-actions { gap: 20px; }

  .hero-grid h1 { font-size: 40px; line-height: 46px; }
  .cta-title { font-size: 30px; line-height: 34px; }
  .hero-body,
  .cta-body { font-size: 18px; line-height: 27px; }
}

@media (max-width: 900px) {
  .kalpa-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: auto;
    padding: 16px 20px;
  }

  .nav-logo-link { order: 1; }
  .nav-logo { width: 134px; height: 40px; }

  .kalpa-nav.is-scrolled { margin-bottom: 12px; }
  .nav-indicator { display: none; }
  .kalpa-page::before { top: 60px; height: 12px; } /* 72 nav → 60 when retracted */
  .kalpa-nav.is-scrolled .kalpa-nav-inner { height: auto; padding: 10px 20px; }

  .nav-toggle {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    background: #CDD5E6;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .kalpa-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .kalpa-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .kalpa-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links,
  .nav-actions { display: none; }

  .kalpa-nav.is-open .nav-links {
    order: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding: 12px 0 8px;
  }

  .kalpa-nav.is-open .nav-link {
    font-size: 17px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(205, 213, 230, 0.15);
  }

  .kalpa-nav.is-open .nav-actions {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .kalpa-nav.is-open .nav-actions > .btn {
    display: block;
    margin: 8px 0;
    text-align: center;
  }

  /* In the open mobile menu the login options drop in-line, styled like the links. */
  .nav-login__toggle { width: 100%; justify-content: flex-start; padding: 12px 4px; font-size: 17px; }
  .nav-login__toggle::after { display: none; }
  .nav-login__menu {
    position: static;
    min-width: 0;
    padding: 0 0 8px;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .nav-login__menu a { padding: 12px 20px; color: #CDD5E6; font-size: 17px; font-weight: 400; }
  .nav-login__menu a:hover,
  .nav-login__menu a:focus-visible { background: none; color: #fff; text-decoration: underline; }

  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-eyebrow,
  .hero-cta-group { justify-content: center; }

  .hero-eyebrow::after {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 2px;
    background: var(--color-orange);
  }
}

@media (max-width: 768px) {
  .kalpa-section-inner { padding: 3rem var(--side-padding-mobile); }

  .cta-section { min-height: 0; }
  .cta-content { padding: 132px var(--side-padding-mobile); }

  .hero-grid h1 { font-size: 32px; line-height: 38px; }
  .cta-title { font-size: 26px; line-height: 31px; }
  .hero-body,
  .cta-body { font-size: 16px; line-height: 24px; }
}