/* ==========================================================================
   GOTAVI - Main Stylesheet
   1.  Reset & Base
   2.  Fonts
   3.  CSS Variables
   4.  Typography
   5.  Layout Utilities
   6.  Components (buttons, pills, overline)
   7.  Navigation
   8.  Hero
   9.  Personas
   10. Needs
   11. Packages
   12. Confidence CTA
   13. Footer
   14. Swiper vendor (minimal)
   15. Misc / utilities
   ========================================================================== */


/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 10px;
  line-height: 1.15;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--page-bg);
  color: var(--white);
  font-family: var(--neurialGroteskLight);
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0 0 1.4rem;
}

p, li {
  font-family: var(--neurialGroteskLight);
  font-size: 1.6rem;
  line-height: 1.6;
  margin: 0 0 0.9rem;
}

a {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

img {
  border: none;
  max-width: 100%;
  vertical-align: middle;
}

button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  width: auto;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}
button, .btn, .btn-green {
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  display: inline-block;
  padding: 0.9em 2.2em;
  border-radius: 999px;
  border: none;
  outline: none;
  background: linear-gradient(90deg, #3ad29f 0%, #3ec6a7 100%);
  color: #1a2b32;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
}

button, figure { margin: 0; }

ul, ol { margin: 0; padding: 0; }

input, button, select, textarea, optgroup {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

hr { box-sizing: content-box; height: 0; }

pre { overflow: auto; }

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

td, th { vertical-align: top; }
thead th { vertical-align: bottom; }


/* ==========================================================================
   2. FONTS
   ========================================================================== */

@font-face {
  font-family: "Neurial Grotesk Light";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NeurialGrotesk-Light.woff) format("woff"),
       url(../fonts/NeurialGrotesk-Light.woff2) format("woff2");
}

@font-face {
  font-family: "Neurial Grotesk Medium";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NeurialGrotesk-Medium.woff) format("woff"),
       url(../fonts/NeurialGrotesk-Medium.woff2) format("woff2");
}

@font-face {
  font-family: "Neurial Grotesk Bold";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NeurialGrotesk-Bold.woff) format("woff"),
       url(../fonts/NeurialGrotesk-Bold.woff2) format("woff2");
}


/* ==========================================================================
   3. CSS VARIABLES
   ========================================================================== */

:root {
  --green:     #59d69c;
  --blue:      #3fa7ff;
  --deepBlue:  #121532;
  --black:     #010213;
  --white:     #ffffff;
  --page-bg:   #0d1021;

  --gray100: #f5f7f8;
  --gray200: #e9edf0;
  --gray300: #d1d6da;
  --gray400: #b0b7bd;
  --gray500: #849480;
  --gray600: #6b747e;
  --gray700: #49525b;

  --surface:        #141829;
  --surface-raised: #2a3045;
  --surface-hover:  #1b2035;
  --border-subtle:  rgba(255, 255, 255, 0.1);

  --neurialGroteskLight:  "Neurial Grotesk Light",  sans-serif;
  --neurialGroteskMedium: "Neurial Grotesk Medium", sans-serif;
  --neurialGroteskBold:   "Neurial Grotesk Bold",   sans-serif;

  --rad:             1.6rem;
  --sectionPaddingY: clamp(3rem, 4vw, 5rem);

  /* main-v2 compatibility aliases used by nav/footer blocks */
  --font-heading: var(--neurialGroteskMedium);
  --transition-base: 0.2s ease;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --color-white: var(--white);
  --color-page: var(--page-bg);
  --color-accent: var(--green);
  --color-ink: var(--deepBlue);
  --color-ink-dark: var(--deepBlue);
  --color-surface: var(--deepBlue);
  --color-border: var(--border-subtle);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-35: rgba(255, 255, 255, 0.35);

  --gradient-accent-linear: linear-gradient(90deg, #59d69c 0%, #47c68e 100%);
  --gradient-footer: linear-gradient(180deg, #040919 0%, #060b1b 100%);
  --spacing-sm: 1.2rem;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.heading1 {
  font-family: var(--neurialGroteskLight);
  font-size: clamp(3.6rem, 8vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-wrap: pretty;
}

.heading2 {
  font-family: var(--neurialGroteskMedium);
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 0;
  text-wrap: pretty;
}

.heading3 {
  font-family: var(--neurialGroteskBold);
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: pretty;
}

.heading4 {
  font-family: var(--neurialGroteskMedium);
  font-size: clamp(1.6rem, 3vw, 1.8rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.text-green { color: var(--green); }
.text-white { color: var(--white); }
.fw-light   { font-family: var(--neurialGroteskLight); font-weight: 400; }
.caps       { letter-spacing: 0.026em; text-transform: uppercase; }


/* ==========================================================================
   5. LAYOUT UTILITIES
   ========================================================================== */

.container {
  --containerWidth: 1150px;
  --padx: clamp(2rem, 5%, 6rem);
  margin: 0 auto;
  max-width: var(--containerWidth);
  position: relative;
  width: 100%;
}

.container.wide   { --containerWidth: 1280px; }
.container.narrow { --containerWidth:  640px; }

.container.padx {
  padding-left:  var(--padx);
  padding-right: var(--padx);
}

.fill {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.cover {
  height: 100%;
  object-fit: cover;
  width: 100%;
}


/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* Overline */
.overline {
  align-items: center;
  display: flex;
  font-family: var(--neurialGroteskMedium);
  font-size: 1.2rem;
  gap: 1em;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
}

.overline.pill {
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 1em 2em;
}

.overline.pill-green { border-color: var(--green); }

.overline img { width: 1.4rem; }

/* Pills */
.pill:not(.overline) {
  background: var(--gray300);
  border-radius: 100px;
  display: inline-block;
  font-family: var(--neurialGroteskMedium);
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  line-height: 1;
  padding: 1em 2em;
  text-transform: uppercase;
}

.pill:not(.overline).pill-green { background: var(--green); color: var(--white); }
.pill:not(.overline).pill-gray  { background: var(--gray500); color: var(--white); }

/* Buttons */
.btn {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-family: var(--neurialGroteskMedium);
  font-size: 1.5rem;
  gap: 0.8em;
  justify-content: center;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1.1em 2.4em;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  }

.btn strong {
  font-family: var(--neurialGroteskBold);
  text-transform: uppercase;
}

.btn.btn-ghost {
  background: transparent;
  border: 0.5px solid var(--white);
  color: var(--white);
}

.btn.btn-ghost:hover {
  background: var(--white);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
  color: var(--black);
}

.btn.btn-green {
  background: var(--green);
  border: none;
  color: var(--black);
  font-family: var(--neurialGroteskBold);
  background: linear-gradient(90deg, #3ad29f 0%, #3ec6a7 100%);
  color: #1a2b32;
}

.btn.btn-green:hover {
  background: #47c58b;
  box-shadow: 0 4px 16px rgba(89, 214, 156, 0.35);
  background: linear-gradient(90deg, #34b98c 0%, #36b0a0 100%);
}

.btn.btn-blue {
  background: var(--deepBlue);
  border: 0.5px solid var(--deepBlue);
  color: var(--white);
}

.btn.btn-blue:hover {
  background: var(--white);
  color: var(--deepBlue);
}

/* Arrow icon */
.icon {
  max-height: 1.8rem;
  max-width: 1.8rem;
  width: 100%;
}

.icon.arrow-right { transition: transform 0.15s ease-in-out; }

.icon.arrow-right line,
.icon.arrow-right polyline {
  fill: none;
  stroke: currentColor;
  stroke-miterlimit: 10;
  stroke-width: 0.69px;
  transition: stroke 0.15s ease-in-out;
}

/* Link */
.link {
  display: inline-block;
  font-family: var(--neurialGroteskMedium);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 1.15em 2em;
  text-decoration: none;
  transition: all 0.25s ease;
}

.link.nopad { padding: 0; }


/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */
.site-nav {
  align-items: center;
  background-color: transparent;
  border-radius: 0;
  display: inline-flex;
  justify-content: space-between;
  padding: 2rem 0;
  position: relative;
  width: 100%;
  z-index: 10000;
}

.site-nav.container {
  max-width: 100%;
}

.site-nav__brand {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 3rem;
}

.site-nav__brand img {
  width: 14rem;
}

.site-nav__menu {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  justify-content: flex-end;
  padding: 0 3rem 0 0;
}

.site-nav__item {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  line-height: 1;
}

.site-nav__menu > .site-nav__item:last-child {
  margin-right: 1.5rem;
}

.site-nav__menu a {
  border-radius: var(--radius-sm);
  color: var(--color-white);
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  transition: all var(--transition-base);
}

@media (min-width: 1281px) {
  .site-nav__menu a:hover {
    background: var(--color-accent);
    color: var(--color-ink);
  }
}

.site-nav__menu .btn {
  background: transparent;
}

.site-nav__menu .btn:hover {
  background: var(--color-white) !important;
  color: var(--color-surface) !important;
}

.site-nav__menu .btn.btn-green {
  align-items: center;
  background: var(--gradient-accent-linear);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-ink-dark);
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0.8rem 1.6rem;
}

.site-nav__toggle,
.site-nav__hamburger,
.site-nav .hamburger {
  display: none;
}

.site-nav__overlay,
.menu-overlay {
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10015;
}

.site-nav__overlay.active,
.menu-overlay.active {
  display: block;
  pointer-events: auto;
}

.site-nav__dropdown,
.menu-item.dropdown {
  position: relative;
}

.site-nav__dropdown-toggle::after,
.dropdown-toggle::after,
.menu-item.dropdown > a::after {
  aspect-ratio: 1/1;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5L10 12.5L15 7.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  content: "";
  display: inline-block;
  height: 2rem;
  margin-left: 0.4rem;
  transition: transform var(--transition-base);
  vertical-align: middle;
  width: 2rem;
}

.site-nav__dropdown-toggle.open::after,
.dropdown-toggle.open::after,
.menu-item.dropdown > a.open::after {
  transform: rotate(180deg);
}

@media (min-width: 1281px) {
  .site-nav__dropdown:hover .site-nav__dropdown-toggle::after,
  .site-nav__dropdown:hover .dropdown-toggle::after,
  .menu-item.dropdown:hover > a::after {
    transform: rotate(180deg);
  }
}

.site-nav__dropdown-menu,
.dropdown-menu {
  background: rgba(24, 31, 42, 1);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: none;
  left: 0;
  min-width: 200px;
  padding: 0.8rem 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 9999;
}

.site-nav__dropdown:hover .site-nav__dropdown-menu,
.site-nav__dropdown:hover .dropdown-menu,
.menu-item.dropdown:hover .site-nav__dropdown-menu,
.menu-item.dropdown:hover .dropdown-menu {
  display: block;
}

.site-nav__dropdown-menu li,
.dropdown-menu li {
  list-style: none;
}

.site-nav__dropdown-menu a,
.dropdown-menu a {
  color: var(--color-white);
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  padding: 1rem 2rem;
  transition: all var(--transition-base);
  width: 100%;
  white-space: nowrap;
}

.site-nav__dropdown-menu a:hover,
.dropdown-menu a:hover {
  background: var(--color-accent);
  color: var(--color-white);
  padding-left: 24px;
}

/* ========================================================================== */
/* MOBILE NAV (<= 1280px)                                                     */
/* --------------------------------------------------------------------------  */
/* Layout:                                                                    */
/*   - Top bar: fixed, full width, logo + hamburger                           */
/*   - Menu panel: slides in from left (85% width, max 320px)                 */
/*   - Overlay: full-viewport backdrop behind the panel                       */
/*                                                                            */
/* Selectors support both BEM (.site-nav__*) and the legacy class names from  */
/* main.css (.hamburger, .menu, .dropdown-menu, .menu-item.dropdown) so the   */
/* same markup works under either stylesheet.                                 */
/*                                                                            */
/* Z-index stack:                                                             */
/*   nav bar / menu panel : 99999                                             */
/*   hamburger button     : 10001                                             */
/*   overlay backdrop     : 10015                                             */
/* ========================================================================== */

@media (max-width: 1280px) {
  /* --- Top bar ----------------------------------------------------------- */
  .site-nav {
    background-color: var(--color-page);
    left: 0;
    padding: 1.6rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
  }

  .site-nav__brand {
    padding-left: 2rem;
  }

  /* --- Hamburger toggle -------------------------------------------------- */
  .site-nav__toggle,
  .site-nav__hamburger,
  .site-nav .hamburger {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 40px;
    justify-content: center;
    margin-right: 2rem;
    padding: 8px 0;
    position: relative;
    width: 40px;
    z-index: 10001;
  }

  .site-nav__toggle span,
  .site-nav__hamburger span,
  .site-nav .hamburger span {
    background: var(--color-white);
    border-radius: 2px;
    display: block;
    height: 3px;
    margin: 3px 0;
    transform-origin: center;
    transition: all 0.3s ease-in-out;
    width: 28px;
  }

  /* Hamburger → X animation */
  .site-nav__toggle.active span:nth-child(1),
  .site-nav__hamburger.active span:nth-child(1),
  .site-nav .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .site-nav__toggle.active span:nth-child(2),
  .site-nav__hamburger.active span:nth-child(2),
  .site-nav .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .site-nav__toggle.active span:nth-child(3),
  .site-nav__hamburger.active span:nth-child(3),
  .site-nav .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* --- Slide-in menu panel ----------------------------------------------- */
  /* Prefixed with `body.pws-page ul` to outweigh the global ul reset
     (body.pws-page ul { padding: 0 }) which would otherwise win. */
  body.pws-page ul.site-nav__menu,
  .site-nav__menu {
    align-items: stretch;
    background-color: rgba(18, 21, 50, 0.98);
    flex-direction: column;
    gap: 0;
    height: 100vh;
    justify-content: flex-start;
    left: -100%;
    list-style: none;
    margin: 0;
    max-width: 320px;
    overflow-y: auto;
    padding: 8rem 3rem 3rem;
    position: fixed;
    top: 0;
    transition: left 0.3s ease-in-out;
    width: 85%;
    z-index: 99999;
  }

  body.pws-page ul.site-nav__menu.active,
  .site-nav__menu.active {
    left: 0;
  }

  /* --- Menu items -------------------------------------------------------- */
  .site-nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
  }

  .site-nav__menu > .site-nav__item:last-child {
    margin-right: 1.5rem;
  }

  .site-nav__item:last-child {
    border-bottom: none;
  }

  /* Link inside a menu item */
  .site-nav__menu a {
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--color-white);
    display: block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 1.6rem 0;
    text-align: left;
    text-decoration: none;
    width: 100%;
  }

  .site-nav__menu a:hover {
    background: transparent;
    color: var(--color-accent);
  }

  /* --- Button items (Log In / Sign Up) ----------------------------------- */
  /* Buttons drop the divider and render as compact bordered pills that hug
     their text content (rather than stretching across the panel). */
  .site-nav__item:has(.btn) {
    border-bottom: none;
    padding: 1rem 0;
  }

  /* The repeated selectors raise specificity to (0,3,0) so they override the
     desktop `.site-nav__menu .btn.btn-green` rule (same specificity, defined
     earlier) which otherwise leaks display:flex + gradient background. */
  .site-nav__menu .btn,
  .site-nav__menu a.btn,
  .site-nav__menu .btn.btn-green,
  .site-nav__menu .btn.btn-blue,
  .site-nav__menu a.btn.btn-green,
  .site-nav__menu a.btn.btn-blue {
    align-items: center;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--color-white);
    border-radius: var(--radius-pill);
    box-shadow: none;
    color: var(--color-white);
    display: inline-flex;
    font-size: 1.6rem;
    gap: 0;
    justify-content: center;
    padding: 0.8rem 2rem;
    transform: none;
    width: auto;
  }

  .site-nav__menu .btn:hover {
    background: var(--color-white);
    color: var(--color-ink);
  }

  /* --- Dropdown (collapsed accordion, not hover) ------------------------- */
  /* Disable the desktop hover-to-open behaviour on touch devices. */
  @media (min-width: 1281px){
      .site-nav__dropdown:hover .site-nav__dropdown-menu,
      .site-nav__dropdown:hover .dropdown-menu,
      .menu-item.dropdown:hover .site-nav__dropdown-menu,
      .menu-item.dropdown:hover .dropdown-menu {
        display: none;
      }
  }

  /* Submenu sits in flow under its toggle, indented. */
  .site-nav__dropdown-menu,
  .dropdown-menu {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: none;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0 0.5rem 2rem;
    position: static;
    width: 100%;
  }

  .site-nav__dropdown-menu li,
  .dropdown-menu li {
    border: none;
    display: block;
    margin: 0;
    padding: 0.5rem 0;
    width: 100%;
  }

  .site-nav__dropdown-menu a,
  .dropdown-menu a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.6rem;
    padding: 0.8rem 1.2rem;
  }

  .site-nav__dropdown-menu a:hover,
  .dropdown-menu a:hover {
    padding-left: 1.6rem;
  }

  /* JS toggles `.open` on the dropdown trigger to reveal the submenu. */
  .site-nav__dropdown-toggle.open + .site-nav__dropdown-menu,
  .site-nav__dropdown-toggle.open + .dropdown-menu,
  .dropdown-toggle.open + .site-nav__dropdown-menu,
  .dropdown-toggle.open + .dropdown-menu {
    display: block;
  }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.greenbars {
  align-items: flex-start;
  display: flex;
  height: 100vh;
  justify-content: space-between;
  left: 0;
  padding-top: 15%;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 100;
}

.greenbars .greenbar {
  background-color: var(--green);
  height: 40vh;
  width: 3px;
}

section.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: auto;
  padding: 2rem clamp(2rem, 2.5%, 6rem) 0;
  position: relative;
  z-index: 1;
}

.hero__bg {
  background-color: var(--black);
  bottom: 0;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.hero__bg img {
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  width: 100%;
}

.hero__bg::before,
.hero__bg::after {
  content: "";
  height: 70%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.hero__bg::before {
  background: linear-gradient(180deg, rgba(18, 21, 50, 0.8), rgba(18, 21, 50, 0));
  top: 0;
}

.hero__bg::after {
  background: linear-gradient(to top, #010213 10%, rgba(7, 7, 7, 0) 67%);
  bottom: 0;
}

.hero__content {
  --containerWidth: 1280px;
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
  padding-bottom: clamp(2rem, 3vw, 4rem);
  padding-top:    clamp(2rem, 3vw, 4rem);
  position: relative;
  z-index: 2;
}

@media (min-width: 960px) {
  .hero__content {
    gap: 0;
    grid-template-columns: 5% 1fr 6rem 2rem 1fr;
  }
}

.hero__copy {
  align-items: flex-start;
  color: var(--white);
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1 / 2 / 2;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

@media (min-width: 960px) {
  .hero__copy { grid-area: 2 / 2 / 3 / 4; }
}


.hero__copy > p:not(.hero-subheader) {
  color: var(--white);
  font-size: 2rem;
  line-height: 1.6;
  max-width: 47.5rem;
  margin: 0;
}

.hero__actions {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
}

.hero__image {
  align-self: center;
  grid-area: 2 / 1 / 3 / 2;
  justify-self: center;
  margin: 0;
}

@media (min-width: 960px) {
  .hero__image { grid-area: 2 / 3 / 4 / 6; }
}

.hero__image img {
  max-height: 380px;
  width: auto;
}


/* ==========================================================================
   9. PERSONAS
   ========================================================================== */

section.personas {
  background-color: var(--page-bg);
  padding: var(--sectionPaddingY) 0;
  text-align: center;
}

section.personas .container { --containerWidth: 1100px; }

section.personas .heading2 {
  color: var(--white);
  margin-bottom: 1.6rem;
}

.personas__subtitle {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.7rem;
  line-height: 1.6;
  margin: 0 auto 5rem;
  max-width: 60rem;
}

.personas__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.persona-card {
  background-color: var(--surface-raised);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--rad);
  display: flex;
  flex-direction: column;
  min-width: 17rem;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.25s ease, transform 0.25s ease;
  width: calc(20% - 0.5rem);
}

.persona-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
}

.persona-card__photo {
  aspect-ratio: 4 / 5;
  background-color: var(--surface-raised);
  border-radius: 0;
  overflow: hidden;
  padding: 0.6rem 0.6rem 0;
  width: 100%;
  flex-shrink: 0;
}

.persona-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-card__name {
  color: var(--white);
  font-family: var(--neurialGroteskBold);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  padding: 0.8rem 1.6rem 0.6rem;
  text-align: center;
}

.persona-card__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.3rem;
  line-height: 1.55;
  margin: 0;
  padding: 0 1.6rem 2rem;
  text-align: center;
}

@media (max-width: 1100px) {
  .persona-card { width: calc(33% - 0.4rem); }
}

@media (max-width: 680px) {
  .persona-card { width: calc(50% - 0.3rem); }
}

@media (max-width: 440px) {
  .persona-card { width: 100%; }
}


/* ==========================================================================
   10. NEEDS
   ========================================================================== */

section.needs {
  background-color: var(--page-bg);
  padding: var(--sectionPaddingY) 0;
  text-align: center;
}

section.needs .container { --containerWidth: 900px; }

section.needs .heading2 {
  color: var(--white);
  margin-bottom: 1.6rem;
}

.needs__subtitle {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.7rem;
  line-height: 1.6;
  margin: 0 auto 4.5rem;
  max-width: 58rem;
}

.needs__grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 3.5rem;
}

@media (max-width: 680px) {
  .needs__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .needs__grid { grid-template-columns: 1fr; }
}

.needs__item {
  align-items: center;
  background-color: var(--surface);
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  gap: 1.4rem;
  padding: 1.8rem 2rem;
  text-align: left;
  transition: background 0.2s ease;
}

.needs__item:hover { background-color: var(--surface-hover); }

.needs__item input[type="checkbox"] {
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.needs__check {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  flex-shrink: 0;
  height: 1.8rem;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: 1.8rem;
}

.needs__item input[type="checkbox"]:checked ~ .needs__check {
  background: var(--green);
  border-color: var(--green);
}

.needs__item input[type="checkbox"]:checked ~ .needs__check::after {
  border: solid var(--black);
  border-width: 0 2px 2px 0;
  content: "";
  height: 0.9rem;
  left: 50%;
  position: absolute;
  top: 40%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.5rem;
}

.needs__item-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.needs__item-label strong {
  color: var(--white);
  font-family: var(--neurialGroteskMedium);
  font-size: 1.5rem;
  line-height: 1.2;
}

.needs__item-label span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.25rem;
  line-height: 1.3;
}

.needs__action {
  display: flex;
  justify-content: center;
}


/* ==========================================================================
   11. PACKAGES
   ========================================================================== */

section.packages {
  background: var(--page-bg);
  padding: var(--sectionPaddingY) 0;
}

section.packages .container { --containerWidth: 1100px; }

.packages__grid {
  border: none;
  border-radius: 0;
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(3, 1fr);
  overflow: visible;
}

@media (max-width: 860px) {
  .packages__grid {
    border: none;
    gap: 2rem;
    grid-template-columns: 1fr;
  }
}

.package-card {
  background-color: var(--surface-raised);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 1.6rem;
  display: flex;
  flex-direction: column;
  padding: 3.5rem 3rem 3rem;
}

.package-card:last-child { border-right: none; }

@media (max-width: 860px) {
  .package-card {
    background-color: var(--surface-raised);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 1.6rem;
  }
}

.package-card__icon {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 1.6rem;
  color: var(--blue);
}
.package-card__icon svg {
  color: var(--green);
  fill: none;
  stroke: var(--green);
}

.package-card__title {
  color: var(--white);
  font-family: var(--neurialGroteskMedium);
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  text-align: center;
}

.package-card__subtitle {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.4rem;
  margin-bottom: 3rem;
  text-align: center;
}

.package-card__features {
  flex: 1;
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
}

.package-card__features li {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  font-size: 1.4rem;
  gap: 0.8rem;
  line-height: 1.4;
  margin: 0;
  padding: 1rem 0;
}

.package-card__features li::before {
  color: var(--green);
  content: "+";
  flex-shrink: 0;
  font-family: var(--neurialGroteskBold);
  font-size: 1.6rem;
  line-height: 1;
}

.package-card .btn-green {
  align-self: flex-start;
  width: 100%;
}


/* ==========================================================================
   12. CONFIDENCE CTA
   ========================================================================== */

section.confidence-cta {
  background-color: var(--page-bg);
  padding: var(--sectionPaddingY) 0;
}

section.confidence-cta .container { --containerWidth: 1100px; }

section.confidence-cta .heading2 {
  color: var(--white);
  margin-bottom: 1.6rem;
  text-align: left;
}

section.confidence-cta p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.7rem;
  line-height: 1.6;
  margin-bottom: 3.5rem;
  text-align: left;
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.site-footer {
  align-items: center;
  background: var(--gradient-footer);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
}

.site-footer > .container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10rem;
  max-width: 1200px;
  padding-bottom: 6rem;
  padding-top: clamp(4.8rem, 6vw, 7.2rem);
  width: 100%;
}

.site-footer__top {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 2rem;
}

.site-footer__brand {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 600px;
}

.site-footer__text {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.site-footer__heading {
  align-items: center;
  align-self: stretch;
  color: var(--color-white);
  display: flex;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-style: normal;
  font-weight: 400;
  gap: 1rem;
  line-height: normal;
}

.site-footer__description {
  align-items: center;
  align-self: stretch;
  color: var(--color-white);
  display: flex;
  flex: 1 0 0;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  gap: 1rem;
  justify-content: flex-start;
  line-height: normal;
}

.site-footer__cta-frame {
  height: 148px;
  width: 400px;
}

.site-footer__links {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
}

.site-footer__brand-frame {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 262.855px;
}

.site-footer__logo-wrap {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__logo {
  height: 4.5rem;
  width: auto;
}

.site-footer__social {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-sm);
}

.site-footer__social a {
  align-items: center;
  border-radius: 50%;
  color: var(--color-white-60);
  display: flex;
  height: 3.8rem;
  justify-content: center;
  transition: color var(--transition-base);
  width: 3.8rem;
}

.site-footer__social a:hover {
  color: var(--color-white);
}

.site-footer__nav {
  align-items: flex-start;
  display: flex;
  gap: 6rem;
}

.site-footer__nav-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.site-footer__nav-col h4,
.site-footer__nav-title {
  align-items: center;
  align-self: stretch;
  color: var(--color-white);
  display: flex;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  gap: 1rem;
  line-height: normal;
}

.site-footer__nav-col ul {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.site-footer__nav-col li {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 1rem;
  margin-bottom: 0;
}

.site-footer__nav-col a,
.site-footer__nav-link {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: color var(--transition-base);
}

.site-footer__nav-col a:hover,
.site-footer__nav-link:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 2rem 0;
}

.site-footer__bottom-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
  width: 100%;
}

.site-footer__copyright-wrap {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 1rem;
}

.site-footer__bottom p,
.site-footer__copyright {
  color: var(--color-white-35);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media (max-width: 1280px) {
  .site-footer > .container {
    max-width: 100%;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  .site-footer__brand {
    width: 100%;
    max-width: 600px;
  }

  .site-footer__cta-frame {
    width: 100%;
    max-width: 400px;
  }

  .site-footer__brand-frame {
    width: 100%;
    max-width: 262.855px;
  }
}

@media (max-width: 1100px) {
  .site-footer > .container {
    gap: 60px;
  }

  .site-footer__top {
    flex-direction: column;
    gap: 24px;
  }

  .site-footer__brand {
    max-width: none;
    width: 100%;
  }

  .site-footer__cta-frame {
    height: auto;
    max-width: none;
    width: 100%;
  }

  .site-footer__links {
    flex-direction: column;
    gap: 40px;
  }

  .site-footer__brand-frame {
    max-width: none;
    width: 100%;
  }

  .site-footer__nav {
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .section-title {
    display: block;
    line-height: 1.2;
  }

  .site-footer__heading {
    font-size: clamp(2.8rem, 7.4vw, 4rem);
  }

  .site-footer__description {
    font-size: 1.5rem;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .site-footer__nav-col h4 {
    font-size: 18px;
  }

  .site-footer__nav-col a {
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  .site-footer__nav {
    grid-template-columns: 1fr;
  }

  .site-footer > .container {
    gap: 48px;
  }
}


/* ==========================================================================
   14. SWIPER (minimal vendor styles)
   ========================================================================== */

:root { --swiper-theme-color: #007aff; }

.swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}

.swiper-wrapper {
  box-sizing: initial;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
  z-index: 1;
}

.swiper-slide {
  display: block;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide { height: auto; }

.swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; }
.swiper-fade .swiper-slide-active { pointer-events: auto; }

.swiper-pagination {
  position: absolute;
  text-align: center;
  transform: translateZ(0);
  transition: opacity 0.3s;
  z-index: 10;
}

.swiper-pagination-bullet {
  background: #000;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 0 4px;
  opacity: 0.2;
  width: 8px;
}

.swiper-pagination-bullet-active {
  background: var(--swiper-theme-color);
  opacity: 1;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 8px;
  left: 0;
  width: 100%;
}

.progress-bar {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  bottom: 24px;
  height: 5px;
  left: 40px;
  overflow: hidden;
  position: absolute;
  right: 40px;
  z-index: 10;
}

.progress-fill {
  background: var(--gray600);
  border-radius: 4px;
  height: 100%;
  left: 0;
  position: absolute;
  transition: left 0.8s ease-in-out;
  width: 10%;
}


/* ==========================================================================
   15. MISC UTILITIES
   ========================================================================== */

.mobile-hide { display: block; }

@media (max-width: 768px) {
  .mobile-hide { display: none; }
}

.mobile-only {
  display: none !important;
}

@media (max-width: 1280px) {
  .mobile-only {
    display: block !important;
  }
}

.text-balance { text-wrap: balance; }

ul.no-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.checkmark-bullets {
  list-style: none;
  margin: 1.5rem 0 0;
  padding-left: 1.5em;
}

ul.checkmark-bullets li {
  margin-bottom: 0.75rem;
  padding-left: 3em;
  position: relative;
}

ul.checkmark-bullets li::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2369bc45' stroke-width='4.5' d='m4 12 6 5 9-10'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 1.5em;
  left: 0;
  position: absolute;
  top: 0.1em;
  width: 1.5em;
}

/* Modal */
.modal-overlay {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  width: 100%;
  z-index: 1000;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  max-width: 500px;
  overflow-y: auto;
  padding: 3rem;
  position: relative;
  transform: translateY(-20px);
  transition: transform 0.3s ease-in-out;
  width: 90%;
}

.modal-overlay.active .modal { transform: translateY(0); }

.modal-close {
  align-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  font-size: 2.4rem;
  height: 4rem;
  justify-content: center;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  transition: color 0.25s ease;
  width: 4rem;
}

/* Interactor embed overrides */
#interactor-fab { z-index: 100000 !important; }

#interactor-chat-container {
  position: fixed !important;
  z-index: 100001 !important;
}

#interactor-chat-container * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 1000px) {
  #interactor-embed-chat iframe {
    bottom: 0;
    height: 95%;
    position: fixed;
  }
}
/* ==========================================================================
   16. PRODUCT & INTERIOR PAGE SHARED COMPONENTS
   (Used on product pages, pricing, gotavist — do not remove)
   ========================================================================== */

/* ---- Base color reset for light-bg sections (prevents white-on-white) ---- */
section.empower,
section.checklist,
section.faq,
section.pulse1,
section.meaning {
  color: var(--black);
}

/* ---- Background figure (product-page heroes and CTA cards) ---- */
.background {
  background-color: var(--black);
}

.background img {
  opacity: 0.5;
  position: relative;
  z-index: 1;
}

.background::before,
.background::after {
  content: "";
  height: 70%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.background::before {
  background: linear-gradient(180deg, rgba(18, 21, 50, 0.8), rgba(18, 21, 50, 0));
  top: 0;
}

.background::after {
  background: linear-gradient(to top, var(--black) 10%, rgba(7, 7, 7, 0) 67%);
  bottom: 0;
}

.background.no-gradient::before,
.background.no-gradient::after {
  display: none;
}

.background.no-gradient img {
  opacity: 1;
}

/* ---- Hero subheader ---- */
.hero__copy .hero-subheader {
  width: 500px;
  max-width: 100%;
  flex-shrink: 0;
  color: #FFF;
  text-align: center;
  font-family: 'Geist', var(--neurialGroteskLight), sans-serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

/* ---- Overline center modifier (product page hero pills) ---- */
.overline.center {
  align-items: center;
  justify-content: center;
  margin: 2.8rem auto;
  width: fit-content;
}

/* ---- Icon white modifier (SVG arrows in product heroes) ---- */
.icon.icon-white line,
.icon.icon-white polyline {
  stroke: var(--white);
}

/* ---- Section intro ---- */
.section-intro {
  margin: 4rem auto 6rem;
  max-width: 80rem;
  text-align: center;
}

.section-intro .heading3 {
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.section-intro p {
  color: var(--gray700);
  font-size: clamp(1.6rem, 4vw, 1.8rem);
  line-height: 1.35;
  margin: 0 0 1.2rem;
}

.section-intro p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .section-intro { margin: 3rem auto 4rem; text-align: left; }
}

/* ---- Empower section ---- */
section.empower {
  background-color: var(--white);
  padding: var(--sectionPaddingY) clamp(2rem, 2.5%, 6rem);
}

section.empower .container { --containerWidth: 1160px; }

section.empower .heading2 {
  color: var(--black);
  margin: 0 auto 6rem;
  max-width: 64.5rem;
  text-align: center;
}

section.empower .heading4 {
  color: var(--gray600);
}

section.empower .cards-row {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

section.empower .cards {
  display: flex;
  flex-direction: column;
  gap: 3rem 2rem;
  width: 100%;
}

@media (min-width: 768px) {
  section.empower .cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

section.empower .cards-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: right;
  width: 100%;
}

section.empower .cards-footer .heading4 {
  color: var(--gray600);
  margin: 0;
}

section.empower .card {
  align-items: flex-start;
  background-color: var(--white);
  border: 0.5px solid var(--gray500);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 4rem 3.5%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

@media (min-width: 768px) {
  section.empower .card { width: calc(33.333% - 1.34rem); }
}

@media (max-width: 768px) {
  section.empower .card { padding: 4rem; }
}

/* Card icon (div wrapper, not SVG) */
section.empower .card > .icon {
  align-items: center;
  aspect-ratio: 1 / 1;
  border: 0.5px solid var(--gray500);
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
  max-height: none;
  max-width: none;
  width: 7rem;
}

section.empower .card > .icon img {
  height: 4.4rem;
  margin: 0;
  width: 4.4rem;
}

section.empower .card .heading3 {
  color: var(--black);
  font-size: 2.4rem;
  margin-bottom: 1.6rem;
}

section.empower .card p {
  color: var(--gray600);
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 2.4rem;
  max-width: 28rem;
}

section.empower .card .card-price {
  color: var(--gray600);
  font-family: var(--neurialGroteskBold);
  font-size: 4rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

section.empower .card .card-price-small {
  color: var(--gray600);
  font-family: var(--neurialGroteskLight);
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 2rem;
}

/* Card checklist */
.card-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.card-checklist li {
  color: var(--gray700);
  font-family: var(--neurialGroteskLight);
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  padding-left: 1.75em;
  position: relative;
}

.card-checklist li::before {
  background: var(--black);
  border-radius: 50%;
  content: "";
  height: 3rem;
  left: 0;
  margin-left: -1em;
  position: absolute;
  top: 0.2rem;
  width: 3rem;
}

.card-checklist li::after {
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  content: "";
  height: 16px;
  left: 11px;
  margin-left: -1em;
  position: absolute;
  top: 8px;
  transform: rotate(45deg);
  width: 10px;
}

.card-checklist li:last-child { margin-bottom: 0; }

.card-checklist-sub {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0 0 0 2.7rem;
}

.card-checklist-sub li {
  color: var(--gray500);
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
  padding-left: 0;
  position: relative;
}

.card-checklist-sub li::before,
.card-checklist-sub li::after { display: none; }

/* ---- Pulse sections ---- */
section.pulse1 {
  padding: var(--sectionPaddingY) clamp(2rem, 2.5%, 6rem);
  padding-bottom: 0;
}

section.pulse1 .container { max-width: 1000px; }

section.pulse1 .heading2 {
  color: var(--black);
  font-size: 3.2rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 3rem;
  text-align: center;
}

section.pulse1 .subNote {
  color: var(--gray700);
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  text-align: center;
}

section.pulse2 {
  background-color: var(--gray100);
  padding: var(--sectionPaddingY) clamp(2rem, 2.5%, 6rem);
}

section.pulse2 .container { max-width: 1000px; }

section.pulse2 .heading2 {
  color: var(--black);
  font-size: 3.2rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 3rem;
  text-align: center;
}

section.pulse2 .subNote {
  color: var(--gray700);
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  text-align: center;
}

/* ---- Checklist section ---- */
section.checklist {
  background-color: var(--gray100);
  padding: var(--sectionPaddingY) clamp(2rem, 2.5%, 6rem);
}

section.checklist .container { max-width: 1000px; }

section.checklist .heading2 {
  color: var(--black);
  font-size: 3.2rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 3rem;
  text-align: center;
}

.checklist-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist-items li {
  color: var(--gray700);
  font-family: var(--neurialGroteskLight);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2rem;
  padding-left: 4.7rem;
  position: relative;
}

.checklist-items li::before {
  background: var(--gray300);
  border-radius: 50%;
  content: "";
  height: 32px;
  left: 0;
  position: absolute;
  top: 0.2rem;
  width: 32px;
}

.checklist-items li::after {
  border: solid var(--gray100);
  border-width: 0 3px 3px 0;
  content: "";
  height: 16px;
  left: 11px;
  position: absolute;
  top: 8px;
  transform: rotate(45deg);
  width: 10px;
}

.checklist-items li:last-child { margin-bottom: 0; }

.checklist-items li strong {
  color: var(--black);
  font-family: var(--neurialGroteskMedium);
  font-weight: 400;
}

.checklist-items--2col {
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
  .checklist-items--2col { grid-template-columns: 1fr; }
}

/* Checklist toggle tabs */
.toggle-tabs {
  align-items: center;
  background: var(--white);
  border-radius: 2.2rem;
  box-shadow: 0 2px 12px 0 rgba(35, 39, 47, 0.06);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2.8rem;
  max-width: 1000px;
  padding: 0.3rem;
  width: 100%;
}

.toggle-tab {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--gray300);
  cursor: pointer;
  flex: 1 1 0;
  font-family: var(--neurialGroteskLight);
  font-size: 1.5rem;
  margin: 0;
  outline: none;
  padding: 1.1rem 0;
  position: relative;
  text-align: center;
  transition: color 0.18s;
  z-index: 1;
}

.toggle-tab:first-child { border-radius: 2.2rem 0 0 2.2rem; }
.toggle-tab:last-child  { border-radius: 0 2.2rem 2.2rem 0; }

.toggle-tab.active {
  background: var(--gray300);
  color: #fff;
  font-family: var(--neurialGroteskBold);
  z-index: 2;
}

.toggle-tab:hover:not(.active) {
  background: #2d323b;
  color: var(--white);
}

/* ---- CTA section ---- */
section.cta {
  padding: 1rem clamp(2rem, 2.5%, 6rem);
  position: relative;
  z-index: 1;
}

section.cta.steps-cta {
  background-image: linear-gradient(to bottom, var(--gray100) 50%, var(--white) 50%);
}

section.cta.footer-cta {
  background-image: linear-gradient(to bottom, var(--white) 20%, var(--gray100) 20%);
  padding-bottom: 6rem;
}

section.cta.footer-cta--short {
  background-image: linear-gradient(to bottom, var(--gray100) 0%, var(--gray100) 25%, var(--white) 25%);
  padding-bottom: 6rem;
}

section.cta .card {
  --containerWidth: 1280px;
  border-radius: var(--rad);
  overflow: hidden;
  padding-bottom: calc(var(--sectionPaddingY) * 0.85);
  padding-top: calc(var(--sectionPaddingY) * 0.85);
  position: relative;
}

section.cta .card .container {
  --containerWidth: 600px;
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

section.cta .card .container .copy {
  align-items: center;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 80rem;
  text-align: center;
}

section.cta .card .container .copy .heading2 {
  color: var(--white);
  margin-bottom: 0.85em;
}

section.cta .card .container .copy p {
  color: var(--white);
  margin-bottom: 4rem;
  opacity: 0.9;
}

/* Steps CTA specific */
section.cta.steps-cta .card .container { --containerWidth: 1000px; }
section.cta.steps-cta .copy { max-width: 100%; width: 100%; }
section.cta.steps-cta .copy .heading2 { text-align: center; }
section.cta.steps-cta .copy > p { margin-bottom: 5rem; text-align: center; }

/* ---- Timeline (inside steps-cta) ---- */
.timeline {
  margin: 0 auto;
  max-width: 80rem;
  padding: 2rem 0;
  position: relative;
}

.timeline::before {
  background: var(--white);
  content: "";
  height: calc(100% - 7rem);
  left: 3rem;
  opacity: 0.8;
  position: absolute;
  top: 7rem;
  width: 2px;
}

@media (max-width: 768px) {
  .timeline::before { left: 2.25rem; }
}

.timeline-item {
  margin-bottom: 4rem;
  padding-left: 9rem;
  position: relative;
  text-align: left;
}

.timeline-item:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .timeline-item { padding-left: 6.5rem; }
}

.timeline-marker {
  align-items: center;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  height: 6rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 6rem;
  z-index: 2;
}

@media (max-width: 768px) {
  .timeline-marker { height: 4.5rem; width: 4.5rem; }
}

.step-number {
  color: var(--deepBlue, #121532);
  font-family: var(--neurialGroteskBold);
  font-size: 2.8rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .step-number { font-size: 2.2rem; }
}

.timeline-content h3,
.timeline-content .heading3 {
  color: var(--white);
  font-family: var(--neurialGroteskBold);
  font-size: clamp(2rem, 8vw, 2.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}

.timeline-content p {
  color: var(--white);
  font-family: var(--neurialGroteskLight);
  font-size: 1.75rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
}

/* ---- FAQ section ---- */
section.faq {
  background-color: var(--white);
  padding: var(--sectionPaddingY) clamp(2rem, 2.5%, 6rem);
}

section.faq .container { --containerWidth: 1160px; }

section.faq .heading2 {
  color: var(--black);
  margin: 0 auto 6rem;
  max-width: 64.5rem;
  text-align: center;
}

.cards-list {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3rem 2rem;
  margin-top: 6rem;
  width: 100%;
}

.faq-card {
  align-items: flex-start;
  background-color: var(--white);
  border: 1px solid var(--gray400);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 5.6rem;
  padding: 2.4rem 2rem;
  transition: box-shadow 0.3s;
  width: 100%;
}

.faq-card-heading {
  color: var(--black);
  font-family: var(--neurialGroteskLight);
  font-size: clamp(2rem, 6vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  text-wrap: pretty;
}

.faq-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  position: relative;
  user-select: none;
  width: 100%;
}

.faq-arrow {
  background: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><polyline points="2,5 8,11 14,5" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  display: inline-block;
  flex-shrink: 0;
  height: 1.5em;
  margin-left: 0.5em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 1.5em;
}

.faq-arrow.rotated { transform: rotate(180deg); }

.faq-card-paragraph {
  color: var(--gray600);
  font-family: var(--neurialGroteskLight);
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-card.open .faq-card-paragraph {
  margin-bottom: 0.2rem;
  margin-top: 1.2rem;
  max-height: 500px;
}

/* ---- Pulse URL input ---- */
.input-wrapper {
  align-items: stretch;
  display: flex;
  gap: 0;
  height: 5rem;
  margin: 4rem auto 0;
  max-width: 700px;
  width: 100%;
}

@media (max-width: 480px) {
  .input-wrapper { margin-left: 0; margin-right: 0; max-width: none; }
}

.input-prefix {
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px 0 0 6px;
  border-right: none;
  color: var(--white);
  display: flex;
  flex-shrink: 0;
  font-family: var(--neurialGroteskMedium);
  font-size: 1.6rem;
  height: 100%;
  padding: 0 1.5rem;
}

@media (max-width: 480px) {
  .input-prefix { font-size: 1.3rem; padding: 1rem; }
}

#pulse-url-input {
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  border-left: none;
  border-radius: 0;
  border-right: none;
  color: var(--white);
  flex: 1;
  font-family: var(--neurialGroteskLight);
  font-size: 1.6rem;
  height: 100%;
  min-width: 0;
  outline: none;
  padding: 0 1.5rem;
  transition: all 0.3s ease;
}

#pulse-url-input::placeholder { color: rgba(255, 255, 255, 0.5); }

#pulse-url-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
  #pulse-url-input { font-size: 1.4rem; padding: 0 1rem; }
}

#pulse-analyze-btn {
  align-items: center;
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-shrink: 0;
  font-size: 1.6rem;
  gap: 0.8rem;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0 3rem;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #pulse-analyze-btn { padding: 0 1rem; }
  #pulse-analyze-btn span { display: none; }
}

.input-error {
  color: #ff6b6b;
  font-family: var(--neurialGroteskLight);
  font-size: 1.4rem;
  margin-top: 1rem;
  min-height: 2rem;
  text-align: center;
}

/* ---- Old simple footer (product pages use plain <footer>) ---- */
footer:not(.site-footer) {
  background-color: var(--gray100);
  padding: 4rem 0;
}

footer:not(.site-footer) .container {
  align-items: center;
  border-top: 1px solid var(--gray300);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: space-between;
  padding-top: 2rem;
}

@media (min-width: 600px) {
  footer:not(.site-footer) .container { flex-direction: row; }
}

footer:not(.site-footer) img {
  height: 4.3rem;
  width: auto;
}

footer:not(.site-footer) p {
  color: var(--gray700);
  font-size: 1.1rem;
}

/* ---- Footer social icons ---- */
.footer-social {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.footer-social a {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  transition: box-shadow 0.2s;
  width: 40px;
}

.footer-social a:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.footer-social img {
  height: 24px;
  width: 24px;
}

/* ---- All-in-one swiper section ---- */
.all-in-one {
  background-color: var(--gray100);
  padding: 80px clamp(2rem, 2.5%, 6rem) 0;
  position: relative;
}

.all-in-one .container { --containerWidth: 1280px; }

.all-in-one .content.container {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .all-in-one .content.container { grid-template-columns: 37.5rem 1fr; }
}

.all-in-one .swiper-images {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 400px;
  overflow: hidden;
}

.all-in-one .slide-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  height: 100%;
  justify-content: space-between;
  max-width: 600px;
}

.all-in-one .slide-content .heading3 {
  font-family: var(--neurialGroteskMedium);
  font-size: 32px;
  line-height: 1.15;
  margin-bottom: 20px;
}

.all-in-one .slide-content p {
  color: var(--gray700);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* ---- Meaning section ---- */
section.meaning {
  background-color: var(--white);
  padding: var(--sectionPaddingY) 0;
}

section.meaning header.container {
  --containerWidth: 1160px;
  margin-bottom: 6rem;
  text-align: center;
}

section.meaning header.container .heading2 {
  color: var(--black);
  font-family: var(--neurialGroteskLight);
  font-weight: 400;
}

section.meaning header.container p {
  color: var(--gray600);
  margin: 0 auto 4rem;
  max-width: 60rem;
}

section.meaning .content.container {
  --containerWidth: 75rem;
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 768px) {
  section.meaning .content.container { gap: 6rem; grid-template-columns: 1fr 1fr; }
}

section.meaning .col {
  color: var(--gray600);
  font-size: 1.8rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Swiper overrides (product page colours) ---- */
.swiper-button-next,
.swiper-button-prev {
  color: var(--green);
}

/* Override the swiper-pagination-bullet defined above (section 14) */
.all-in-one .swiper-pagination-bullet,
section:not(.hero) .swiper-pagination-bullet {
  background: var(--gray400);
  opacity: 1;
}

.all-in-one .swiper-pagination-bullet-active,
section:not(.hero) .swiper-pagination-bullet-active {
  background: var(--green);
}

/* ---- Utility: color & bg helpers ---- */
.text-black  { color: var(--black); }
.bg-white    { background-color: var(--white); }
.bg-black    { background-color: var(--black); }
.bg-green    { background-color: var(--green); }
.bg-gray100  { background-color: var(--gray100); }
.bg-gray200  { background-color: var(--gray200); }
.bg-gray300  { background-color: var(--gray300); }
.bg-gray400  { background-color: var(--gray400); }
.bg-gray500  { background-color: var(--gray500); }
.bg-gray600  { background-color: var(--gray600); }
.bg-gray700  { background-color: var(--gray700); }
.fill-white  { fill: var(--white); }
.fill-black  { fill: var(--black); }
.fill-green  { fill: var(--green); }
.blend-multiply { mix-blend-mode: multiply; }
.blend-color    { mix-blend-mode: color; }
.hide-overflow  { display: block; overflow: hidden; }

/* ---- Accessibility ---- */
.show-for-sr,
.srt {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile,
  .srt-mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

/* ---- Animation utilities ---- */
.appear {
  display: block;
  transition: 0.6s;
}

.appear.down    { transform: translateY(-100%); }
.appear.up      { transform: translateY(100%); }
.appear.in-view { transform: translateY(0); }

.fadeup {
  opacity: 0;
  transform: translate3d(0, 8%, 0);
  transition-duration: 1s;
}

.fadeup.in-view {
  opacity: 1;
  transform: none;
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
}

.fadein {
  opacity: 0;
  transition-duration: 1s;
}

.fadein.in-view {
  opacity: 1;
  transform: none;
  transition-timing-function: linear;
}

.slidedown {
  opacity: 0;
  transform: translate3d(0, -8%, 0);
  transition-duration: 1s;
}

.slidedown.in-view {
  opacity: 1;
  transform: none;
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
}

.slideleft {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
  transition-duration: 1s;
}

.slideleft.in-view {
  opacity: 1;
  transform: none;
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
}

.slideright {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  transition-duration: 1s;
}

.slideright.in-view {
  opacity: 1;
  transform: none;
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
}

.fadeup-cascade > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition-delay: 0.15s;
  transition-duration: 1s;
}

.fadeup-cascade.in-view > * {
  opacity: 1;
  transform: translateZ(0);
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
}

.fadeup-cascade > *:nth-child(1)  { transition-delay: 0.15s; }
.fadeup-cascade > *:nth-child(2)  { transition-delay: 0.30s; }
.fadeup-cascade > *:nth-child(3)  { transition-delay: 0.45s; }
.fadeup-cascade > *:nth-child(4)  { transition-delay: 0.60s; }
.fadeup-cascade > *:nth-child(5)  { transition-delay: 0.75s; }
.fadeup-cascade > *:nth-child(6)  { transition-delay: 0.90s; }
.fadeup-cascade > *:nth-child(7)  { transition-delay: 1.05s; }
.fadeup-cascade > *:nth-child(8)  { transition-delay: 1.20s; }
.fadeup-cascade > *:nth-child(9)  { transition-delay: 1.35s; }
.fadeup-cascade > *:nth-child(10) { transition-delay: 1.50s; }

/* ---- Unified button system (hero pills) ---- */
a.btn,
button.btn,
input.btn {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 60px;
  border: 1px solid #59D69C;
  background: linear-gradient(92deg, #59D69C 0%, #2F7052 100%);
  color: #0F172A;
  font-family: 'Geist', var(--neurialGroteskLight), sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

a.btn:hover,
button.btn:hover,
input.btn:hover {
  opacity: 0.9;
}

/* Green is now the default button style */
a.btn.btn-green,
button.btn.btn-green,
input.btn.btn-green {
  border-color: #59D69C;
  background: linear-gradient(92deg, #59D69C 0%, #2F7052 100%);
  color: #0F172A;
}

/* White button variant */
a.btn.btn-ghost,
button.btn.btn-ghost,
input.btn.btn-ghost,
a.btn.btn-blue,
button.btn.btn-blue,
input.btn.btn-blue {
  border-color: #FFF;
  background: transparent;
  color: #FFF;
}

a.btn.btn-ghost:hover,
button.btn.btn-ghost:hover,
input.btn.btn-ghost:hover,
a.btn.btn-blue:hover,
button.btn.btn-blue:hover,
input.btn.btn-blue:hover {
  opacity: 0.8;
}