:root {
  --max-content-width: 1200px;
  --space-md: 24px;
  /* Perfect alignment system - responsive variables */
  --step-icon-size: clamp(26px, 2.5vw, 32px);
  --step-gap: clamp(8px, 1.2vw, 12px);
  --step-pad-inline: clamp(4px, 0.8vw, 8px);
  --step-pad-block: clamp(2px, 0.6vw, 6px);
  --step-row-gap: clamp(16px, 2vw, 24px);
  --step-num-font: clamp(13px, 1.2vw, 15px);

  /* Color Palette Theme */
  --color-primary: #0C2FF2;       /* Primary blue */
  --color-primary-dark: #154EBF;  /* Dark blue */
  --color-accent: #2FD200;        /* Accent green */
  --color-danger: #F20505;        /* Red (alerts/errors) */

  /* Neutrals */
  --color-bg: #E8F1F5;
  --color-text: #111111;
  --color-muted: #666666;
}

/* Moved out of :root: pricing page heading centering helpers */
body.page-pricing .about-container {
  display: grid;
  place-items: center;
  text-align: center; /* ensure horizontal centering */
}
body.page-pricing .about-container p {
  margin: 0; /* remove extra bottom margin that offsets visual centering */
}

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

/* Ensure base elements can stretch to full viewport height */
html, body { height: 100%; }

body {
  background-color: var(--color-bg);
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--color-text);
  overflow-x: hidden; /* avoid site-wide horizontal scrolling */
}

/* Ensure long words or labels inside chips/cards wrap instead of causing overflow */
.about-card, .about-feature-list li, .card-note, .about-card--social .social-btn {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Simple decorative underline for headings */
.with-underline {
  position: relative;
}
.with-underline::after {
  content: '';
  display: block;
  width: clamp(64px, 10vw, 120px);
  height: 4px;
  background: var(--color-accent);
  /* More breathing room and even spacing above/below the line (bumped slightly) */
  margin: clamp(28px, 5.5vw, 48px) auto clamp(28px, 5.5vw, 48px);
  border-radius: 2px;
}

/* Ensure the underline controls spacing below the heading for balance */
.content .with-underline { margin-bottom: 0; }

		
		
		/* Homepage Content*/

        .content {
            text-align: center;
            margin: 0 auto;
            max-width: var(--max-content-width);
            padding: clamp(20px, 4vw, 50px) var(--space-md);
        }

    .content h1 {
      /* responsive headline that scales across viewports */
      font-size: clamp(2rem, 7vw, 4rem);
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: var(--color-primary-dark);
      margin: 0 auto 30px;
      max-width: 900px;
      padding: 0 12px;
      word-break: break-word;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Homepage H1: specific top margin */
    .page-home .content > h1 { margin-top: 10px; }

    /* Hero section with background video/gif */
    .hero-section {
      position: relative;
      margin: 40px 0 60px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      animation: fadeInUp 0.8s ease-out;
    }

    .hero-media {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 70vh;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
      /* slight base zoom to avoid tiny black borders on some clips */
      transform: scale(1.015);
      transform-origin: center center;
    }

    .hero-section:hover .hero-media {
      /* keep a subtle bump on hover above the base zoom */
      transform: scale(1.03);
    }

    /* Desktop: slightly stronger zoom to ensure no edge slivers on large screens */
    @media (min-width: 992px) {
      .hero-media { transform: scale(1.025); }
      .hero-section:hover .hero-media { transform: scale(1.04); }
    }

    /* Fade in animation for content */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Progressive animation delays for staggered loading effect */
    .content h1 {
      animation: fadeInUp 0.8s ease-out 0.2s both;
    }

    .hero-section {
      animation: fadeInUp 0.8s ease-out 0.4s both;
    }

    .about-container {
      animation: fadeInUp 0.8s ease-out 0.6s both;
    }

/* About section styling */
.about-container {
  max-width: var(--max-content-width);
  /* Adjust spacing */
  margin: clamp(16px,3vh,32px) auto 80px;
  padding: clamp(20px, 4vw, 40px) clamp(20px, 4vw, 48px);
  text-align: left;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(232, 241, 245, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  box-shadow: 0 30px 80px -40px rgba(12, 47, 242, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.about-container::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, rgba(232, 241, 245, 0), rgba(232, 241, 245, 1));
  z-index: -1;
  pointer-events: none;
}

.about-container h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-primary-dark);
  text-align: center;
  margin: 0 0 30px;
  font-weight: bold;
  position: relative;
  letter-spacing: -0.02em;
}    /* About page main heading */
    .about-container h1 {
      color: var(--color-primary-dark);
      /* Remove extra top space and tighten bottom spacing */
      margin: 0 0 clamp(16px,3vw,28px);
      line-height: 1.1;
  /* Responsive scaling for hero-like about heading */
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing: -0.5px;
    }

.about-container h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  margin: 16px auto 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(47, 210, 0, 0.3);
}    /* Mobile single-line adjustment for About heading */
    @media (max-width: 540px) {
      .about-container h1 {
        font-size: clamp(1.55rem, 7vw, 1.95rem); /* shrink to fit */
        white-space: nowrap; /* keep on one line */
        letter-spacing: -0.25px; /* tighten slightly */
        overflow: hidden;
        text-overflow: ellipsis; /* safeguard if screen extremely narrow */
      }
      .about-container { padding-left: clamp(10px,4vw,24px); padding-right: clamp(10px,4vw,24px); }
    }

    .about-container p {
      /* Broader scaling so paragraphs are a touch larger on wide screens and still readable on small */
      font-size: clamp(1rem, 1.4vw, 1.5rem);
      line-height: 1.65;
      color: var(--color-text);
      text-align: center;
      max-width: 880px;
      margin: 0 auto 54px;
    }

/* Section dividers: modern gradient look */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, rgba(12, 47, 242, 0), rgba(12, 47, 242, 0.3), rgba(12, 47, 242, 0));
  margin: 60px auto;
  width: 80%;
  max-width: 800px;
  opacity: 0.5;
}/* Bottom article/footer content */
article {
  background: linear-gradient(160deg, #ffffff, #f7fafc);
  padding: clamp(40px, 6vw, 80px);
  margin: 80px auto 60px;
  max-width: calc(var(--max-content-width) - 80px);
  border-radius: 24px;
  box-shadow: 0 20px 60px -20px rgba(12, 47, 242, 0.2), 0 10px 30px -10px rgba(12, 47, 242, 0.15);
  border: 1px solid rgba(12, 47, 242, 0.08);
  position: relative;
  overflow: hidden;
}

article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

article p {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.7;
  color: var(--color-text);
  text-align: center;
  margin: 0;
  max-width: 800px;
  margin: 0 auto;
}    .content p {
      font-size: clamp(1.1rem, 2.5vw, 1.3rem);
      color: var(--color-text);
      line-height: 1.6;
    }

        header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-md);
            padding: clamp(10px, 2.5vw, 28px);
            flex-wrap: wrap; /* allow wrapping on small screens */
            background-color: var(--color-primary-dark);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            position: relative; /* anchor absolute children like .stack-menu */
        }

        /* logo scales fluidly (use height-based sizing to keep vertical alignment stable) */
        .logo {
          display: block; /* remove inline image baseline issues */
          height: clamp(48px, 9vw, 80px); /* keep logo visually large while preserving header alignment */
          width: auto; /* preserve aspect ratio */
          max-width: 100%;
          object-fit: contain;
          align-self: center; /* helpful when header is a flex container */
          /* Visually enlarge without changing layout height (desktop default) */
          transform: scale(1.22);
          transform-origin: left center;
        }

/* make nav fluid instead of fixed width */
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff; /* high contrast vs header blue */
  border: 1px solid rgba(12, 47, 242, 0.18); /* subtle blue border for separation */
  box-shadow: 0 10px 26px rgba(0,0,0,0.12); /* slightly stronger shadow to float above header */
  /* lower-profile pill */
  border-radius: 28px;
  padding: clamp(4px, 1vw, 8px) clamp(10px, 1.8vw, 16px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  width: auto;
  max-width: 100%;
}

/* nav list wraps on narrow screens */
nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  gap: clamp(8px, 2vw, 20px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative; /* allow layered hover visuals */
}

nav ul li a {
  text-decoration: none;
  color: var(--color-primary-dark);
  font-weight: bold;
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  padding: clamp(6px, 1.2vw, 8px) clamp(10px, 2vw, 18px);
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 200ms ease, color 180ms ease, border-color 180ms ease;
  display: inline-block;
  border-radius: 9999px; /* full pill shape (consistent across states) */
  /* reserve space for border so hover doesn't shift layout */
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* hover/focus effect for desktop nav items */
@media (min-width: 951px) {
  /* glass-like hover for desktop nav items */
  nav ul li a:hover,
  nav ul li a:focus {
    /* subtle glass background while the item scales forward */
    background: rgba(12, 47, 242, 0.10); /* blue-tinted glass */
    border-color: rgba(12, 47, 242, 0.22);
    color: var(--color-primary-dark);
    box-shadow: 0 8px 18px rgba(12, 47, 242, 0.10);
    /* scale up slightly to appear 'in front' (GPU-accelerated) */
    transform: translateZ(0) scale(1.06);
    /* very soft depth so it doesn't feel jumpy */
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    color: #fff;
    outline: none;
    z-index: 3; /* ensure scaled item renders above the glass highlight */
    will-change: transform, box-shadow, background-color;
  }
  nav ul li a {
    /* ensure smooth, fluid interpolation for the pop-forward effect */
    /* animate only GPU-friendly properties (transform, opacity) and color to avoid layout/reflow */
  transition: transform 220ms cubic-bezier(.22,.9,.2,1),
        background-color 160ms cubic-bezier(.2,.9,.2,1),
        color 160ms cubic-bezier(.2,.9,.2,1),
        border-color 160ms cubic-bezier(.2,.9,.2,1);
    will-change: transform, box-shadow, background-color;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform-origin: center center;
  }
  nav ul li a:focus-visible { box-shadow: 0 0 0 4px rgba(12,47,242,0.12); }
}

/* Smooth glass highlight follower for desktop nav */
@media (min-width: 951px) {
  nav ul { position: relative; }
  .nav-highlight {
    position: absolute;
  left: 0;
  top: 0;
  /* JS will drive translateX/Y and width/height to follow items */
  transform: translate(0, 0);
  width: 0; /* set by JS */
  height: 0; /* set by JS */
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.22));
  border: 0; /* avoid boxy edge appearance */
    box-shadow:
      0 10px 24px rgba(12,47,242,0.12),
      0 6px 14px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -10px 18px rgba(12,47,242,0.08);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    transform-origin: center center;
  overflow: hidden; /* clip inner sheen to pill radius */
  box-sizing: border-box;
  transition: transform 160ms cubic-bezier(.22,.9,.2,1), width 180ms cubic-bezier(.22,.9,.2,1), height 180ms cubic-bezier(.22,.9,.2,1), opacity 120ms ease;
  }
  .nav-highlight::before {
    content: "";
    position: absolute;
    top: 8%; left: 10%; right: 10%; height: 36%;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0));
    filter: blur(1.5px);
    pointer-events: none;
  }
}

/* Click visual for menu items (color change) */
.nav-clicked {
  background: rgba(47,210,0,0.38) !important; /* var(--color-accent) with alpha */
  color: #fff !important;
  transform: translateZ(0) scale(1.04);
  transition: background-color 260ms ease, color 260ms ease;
  box-shadow: 0 6px 16px rgba(47,210,0,0.14), inset 0 0 0 1px rgba(47,210,0,0.22);
  outline: 2px solid rgba(47,210,0,0.12);
  animation: click-pop 420ms cubic-bezier(.22,.9,.2,1);
}

@keyframes click-pop {
  0% { transform: translateZ(0) scale(0.99); box-shadow: 0 4px 10px rgba(248,128,128,0.10); }
  45% { transform: translateZ(0) scale(1.06); box-shadow: 0 10px 24px rgba(248,128,128,0.18); }
  100% { transform: translateZ(0) scale(1.04); box-shadow: 0 6px 16px rgba(248,128,128,0.12); }
}

/* ===== Content media responsiveness ===== */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* GIF/video specific */
.content img, .content video {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* map responsive wrapper */
.location {
  text-align: center;
  padding: 30px;
  margin-bottom: 30px;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.location .map-container { max-width: var(--max-content-width); margin: 0 auto; }
.location .map-container iframe {
  width: 100%;
  height: 420px;
  border: 5px solid transparent; /* previous inline style replaced */
  border-radius: 8px;
}

/* Responsive embed wrapper for location page (larger) */
.location {
  /* increase the map container so the embed can be larger on wide screens */
  max-width: calc(var(--max-content-width) * 1.4);
  margin: 0 auto;
  /* side padding that respects site spacing */
  padding: 0 clamp(var(--space-md,12px), 4vw, 60px);
  box-sizing: border-box;
}
.location iframe {
  /* full-width inside the container, wider aspect for a larger view */
  width: 100%;
  aspect-ratio: 21/9;
  height: auto;
  /* allow a taller map while keeping it within the viewport */
  max-height: 80vh;
  min-height: 420px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.location iframe:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Map action buttons */
.map-actions { display:flex; gap:12px; justify-content:center; margin-bottom:24px; }
.map-btn { display:inline-block; padding:8px 12px; border-radius:8px; background:#e6eefb; color: var(--color-primary-dark); text-decoration:none; font-weight:600; box-shadow:0 6px 12px rgba(0,0,0,0.04); border:1px solid rgba(21,78,191,0.12); }
.map-btn:hover { transform: translateY(-2px); }
.map-primary { background: linear-gradient(180deg,var(--color-primary),var(--color-primary-dark)); color: #fff; border: none; box-shadow: 0 8px 20px rgba(12,47,242,0.16); }
.mobile-only { display:none; }
.desktop-only { display:inline-block; }

/* Snackbar (maps fallback) */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(140%);
  background: rgba(20,24,32,0.96);
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 0.85rem;
  line-height: 1.3;
  box-shadow: 0 10px 28px -4px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1300;
  transition: transform .45s cubic-bezier(.22,.9,.3,1), opacity .45s ease;
  opacity: 0;
}
.snackbar.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.snackbar-action, .snackbar-close { cursor: pointer; font-weight:600; border:none; }
.snackbar-action { background: var(--color-primary); color:#fff; padding:6px 14px; border-radius:8px; box-shadow: 0 4px 14px rgba(12,47,242,0.3); }
.snackbar-action:active { transform: translateY(1px); }
.snackbar-close { background: transparent; color:#fff; padding:4px 8px; font-size:1rem; line-height:1; border-radius:6px; }
.snackbar-close:hover { background: rgba(255,255,255,0.12); }
.snackbar button { font-family: inherit; }
.snackbar:focus-within { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* Map confirmation modal */
.map-modal { position: fixed; inset:0; background: rgba(8,14,26,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; z-index:11050; opacity:0; pointer-events:none; transition: opacity .35s ease; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); box-sizing: border-box; }
.map-modal.show { opacity:1; pointer-events:auto; }
.map-modal[hidden] { display:flex; }
.map-modal-content { background:#fff; width: min(420px, 92vw); padding:28px 26px 24px; border-radius:20px; box-shadow:0 20px 48px -8px rgba(0,0,0,.3),0 4px 18px rgba(0,0,0,.15); position:relative; animation: modalPop .55s cubic-bezier(.22,.9,.3,1); box-sizing: border-box; margin-left: auto; margin-right: auto; }
@keyframes modalPop { 0% { transform: translateY(24px) scale(.94); opacity:0;} 60% { transform: translateY(-4px) scale(1.02); opacity:1;} 100% { transform: translateY(0) scale(1);} }
.map-modal-content h2 { margin:0 0 10px; font-size:1.35rem; line-height:1.2; color: var(--color-primary-dark); }
.map-modal-content p { margin:0 0 22px; font-size:.95rem; line-height:1.5; color: var(--color-text, #222); }
.map-modal-actions { display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:14px; width: 100%; }
.modal-btn { font-family:inherit; font-weight:600; padding:10px 18px; border-radius:999px; border:none; cursor:pointer; font-size:.9rem; transition: background .3s, transform .25s; white-space: nowrap; }
.modal-btn.primary { background: linear-gradient(180deg,var(--color-primary),var(--color-primary-dark)); color:#fff; box-shadow:0 6px 16px rgba(12,47,242,.25); }
.modal-btn.primary:hover { transform: translateY(-2px); }
.modal-btn.secondary { background:#f1f4f9; color:#222; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.modal-btn.secondary:hover { background:#e6ebf3; }
.modal-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .map-modal-content { animation:none; }
}

@media (max-width: 950px) {
  .mobile-only { display:inline-block; }
  .desktop-only { display:none; }
  /* Hide embedded map on phones; we launch native app instead */
  .location .map-embed { display: none !important; }
}

/* Wider aspect and bigger container on very large screens */
@media (min-width: 1200px) {
  .location { max-width: calc(var(--max-content-width) * 1.6); }
  .location iframe { aspect-ratio: 18/8; max-height: 85vh; min-height: 720px; }
}

@media (min-width: 1600px) {
  .location { max-width: calc(var(--max-content-width) * 1.8); }
  .location iframe { aspect-ratio: 16/7; max-height: 90vh; min-height: 800px; }
}

@media (min-width: 2000px) {
  .location { max-width: calc(var(--max-content-width) * 2.0); }
  .location iframe { aspect-ratio: 14/6; max-height: 92vh; min-height: 900px; }
}

/* ===== Pricing & cards (flexible) ===== */
.pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  gap: clamp(24px, 4vw, 48px);
  /* Added a small bottom margin to create breathing room before the footer */
  margin: 0 auto 40px;
  max-width: var(--max-content-width);
  padding: 0 var(--space-md);
}

.package {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  border: 1px solid rgba(12,47,242,0.06);
  padding: clamp(20px, 2vw, 8px);
  width: 100%;
  max-width: 320px;
  min-height: 380px; /* base collapsed size */
  text-align: center;
  box-sizing: border-box;
  position: relative;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}

.package:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(12,47,242,0.12);
  border-color: rgba(12,47,242,0.15);
}

/* Popular package highlight */
.package.popular {
  border: 2px solid var(--color-accent);
  /* Add a subtle green glow in addition to the base drop shadow */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08),
              0 0 18px 5px rgba(47,210,0,0.18);
}

.package.popular:hover {
  transform: translateY(-4px);
  /* Keep the same subtle glow on hover (no change in intensity) */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08),
              0 0 25px 10px rgba(47,210,0,0.18);
  border-color: var(--color-accent);
}

.popular-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: white;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(47,210,0,0.25);
  white-space: nowrap;
}

/* price section spacing adjusted to be responsive */
.price-section {
  margin-bottom: clamp(240px, 0vw, 0px);
  padding-top: clamp(8px, 2vw, 16px);
  min-height: auto;
  width: 100%;
}

.price-section h3 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  color: var(--color-primary-dark);
  margin: 0 0 16px;
  font-weight: bold;
}

.price-display {
  margin-bottom: 12px;
}

.price-amount {
  display: block;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: bold;
  color: var(--color-primary);
  line-height: 1;
}

.price-type {
  display: block;
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-top: 4px;
}

.monthly-plan {
  background: linear-gradient(135deg, var(--color-bg), #e0f0ff);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(12,47,242,0.1);
  text-align: center;
}

.club-price {
  display: block;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: bold;
  color: var(--color-primary-dark);
  text-align: center;
}

.club-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 2px;
  text-align: center;
}

/* Enhanced features list matching about page style */
.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.5;
  text-align: left;
  width: 100%;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  padding: 8px 12px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border-radius: 8px;
  border: 1px solid rgba(12,47,242,0.06);
  transition: all 0.3s ease;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
}

.features-list li:hover {
  background: linear-gradient(135deg, #f8fbff, #e8f4ff);
  transform: translateX(4px);
  border-color: rgba(12,47,242,0.12);
}

.features-list li::before {
  content: attr(data-icon);
  font-size: 1.2rem;
  flex-shrink: 0;
  filter: grayscale(0.2);
  transition: filter 0.3s ease;
}

.features-list li:hover::before {
  filter: grayscale(0);
}

/* Interactive pricing card features */
.package {
  cursor: pointer;
  overflow: visible;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: auto;
}

.package .price-section {
  /* Always visible - price section stays shown */
  opacity: 1;
  margin-bottom: 32px; /* slightly tighter now that button spacing fixed */
  transition: margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.package .features-list {
  width: 100%;
  max-height: 0; /* animated via JS using scrollHeight */
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  margin: 0;
  padding: 0 0 8px; /* bottom padding so last item clears button */
  list-style: none;
}

.package.expanded {
  transform: translateY(-2px); /* minimal lift */
  box-shadow: 0 4px 14px rgba(12,47,242,0.12), 0 1px 3px rgba(12,47,242,0.10); /* subtle */
  z-index: 2;
  padding-bottom: 64px; /* increased space so button doesn't overlap last feature */
}

.package.expanded .price-section {
  margin-bottom: 24px;
}

.package.expanded .features-list {
  opacity: 1;
  margin-top: 0;
  overflow: visible; /* allow full content if JS height slightly short */
}

/* Ensure extra breathing room after last feature item */
.package.expanded .features-list li:last-child { margin-bottom: 32px; }

/* Extra bottom breathing room when any card expanded */
.pricing.has-expanded {
  /* Reduced extra bottom padding; base grid now has its own margin-bottom */
  padding-bottom: 80px;
}

.feature-description {
  display: none !important;
}

.expand-btn {
  display: block !important;
  margin-top: auto; /* push button to bottom */
  padding: 10px 20px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  width: auto;
  min-width: 140px;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

.expand-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.package.expanded .expand-btn {
  background: var(--color-primary); /* keep blue when expanded */
}

.package.expanded .expand-btn:hover {
  background: var(--color-primary-dark); /* consistent hover */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== App modal and badges ===== */
/* Consolidated modal styles live later in the file; removed an older absolute-positioned
  .modal-content block so the overlay's flex centering can work reliably. */

/* store badges scale */
.store-badge { width: clamp(140px, 40%, 200px); height: auto; }

/* ===== About section refresh ===== */
.about-container {
	max-width: var(--max-content-width);
	margin: clamp(24px, 5vw, 60px) auto;
	padding: 0 clamp(12px, 4vw, 32px);
}

.page-home .about-container {
	padding-block: clamp(12px, 3vw, 22px);
}

.page-home .about-container h2 {
	margin: 0 auto clamp(22px, 4vw, 40px);
	text-align: center;
	color: var(--color-primary-dark);
}

.page-home .about-lead {
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  max-width: 800px;
  margin: 0 auto clamp(36px, 5vw, 58px);
  color: var(--color-text);
  text-align: center;
  line-height: 1.6;
  text-indent: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Neutral pale base so both blue and green read well under the animated overlay */
  background-color: rgba(255, 255, 255, 0.98); /* near-solid for maximum readability */
  overflow: hidden; /* clip the animated pseudo-element to the rounded corners */
  padding: clamp(20px, 3vw, 28px);
  border-radius: 16px;
  box-shadow: 0 10px 30px -15px rgba(12, 47, 242, 0.15);
}

/* animated gradient (example-style) */
@keyframes leadGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* GPU-accelerated pseudo-element animation: translate the oversized gradient layer
   left-to-right. Works better on mobile portrait by using transform/translate3d. */
.page-home .about-lead::before {
  content: '';
  position: absolute;
  /* keep the overlay huge so edges never show */
  left: -150%;
  top: -150%;
  width: 500%;
  height: 500%;
  z-index: 0; /* behind text */
  pointer-events: none;
  border-radius: inherit; /* match parent corners */
  /* Layered radial fields for ultra-smooth blend without banding or white seams */
  background:
    radial-gradient(60% 60% at 30% 35%, rgba(47, 210, 0, 0.58), rgba(47, 210, 0, 0) 70%),
    radial-gradient(60% 60% at 70% 65%, rgba(12, 47, 242, 0.82), rgba(12, 47, 242, 0) 72%),
    radial-gradient(80% 80% at 50% 50%, rgba(102, 230, 150, 0.44), rgba(102, 230, 150, 0) 75%),
    radial-gradient(100% 100% at 20% 80%, rgba(34, 120, 255, 0.56), rgba(34, 120, 255, 0) 78%),
    /* top-right guard gradient to ensure no pure white shows at the top */
    radial-gradient(140% 120% at 100% 0%, rgba(34, 120, 255, 0.28), rgba(34, 120, 255, 0) 80%),
    /* top-left guard to reinforce coverage at the very top edge */
    radial-gradient(140% 120% at 0% 0%, rgba(47, 210, 0, 0.18), rgba(47, 210, 0, 0) 76%),
    /* base wash to avoid any pure white showing at corners (esp. top) */
    linear-gradient(135deg, rgba(34, 120, 255, 0.28), rgba(47, 210, 0, 0.24));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* initial positions for parallax-like drift */
  background-position: 30% 35%, 70% 65%, 50% 50%, 20% 80%;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0.001deg);
  -webkit-transform: translate3d(0, 0, 0) rotate(0.001deg);
  will-change: transform, background-position, background-size;
  -webkit-animation: leadDiagDrift 4.4s cubic-bezier(.4,0,.2,1) infinite, leadBgDiag 9.8s linear infinite, leadBgPulse 7s ease-in-out infinite;
  animation: leadDiagDrift 4.4s cubic-bezier(.4,0,.2,1) infinite, leadBgDiag 9.8s linear infinite, leadBgPulse 7s ease-in-out infinite;
  /* Mobile/iOS Safari stability and GPU compositing hints */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-webkit-keyframes leadDiagDrift {
  0%   { -webkit-transform: translate3d(-22%, -22%, 0) rotate(-1deg); }
  25%  { -webkit-transform: translate3d(22%, -22%, 0)  rotate(0deg); }
  50%  { -webkit-transform: translate3d(22%, 22%, 0)   rotate(1deg); }
  75%  { -webkit-transform: translate3d(-22%, 22%, 0)  rotate(0deg); }
  100% { -webkit-transform: translate3d(-22%, -22%, 0) rotate(-1deg); }
}

@keyframes leadDiagDrift {
  0%   { transform: translate3d(-22%, -22%, 0) rotate(-1deg); }
  25%  { transform: translate3d(22%, -22%, 0)  rotate(0deg); }
  50%  { transform: translate3d(22%, 22%, 0)   rotate(1deg); }
  75%  { transform: translate3d(-22%, 22%, 0)  rotate(0deg); }
  100% { transform: translate3d(-22%, -22%, 0) rotate(-1deg); }
}

@-webkit-keyframes leadBgDiag {
  0%   { background-position: 12% 18%, 88% 82%, 36% 44%, 10% 74%; }
  25%  { background-position: 82% 18%, 18% 82%, 56% 44%, 30% 70%; }
  50%  { background-position: 88% 82%, 12% 18%, 64% 56%, 34% 66%; }
  75%  { background-position: 18% 82%, 82% 18%, 44% 56%, 14% 62%; }
  100% { background-position: 12% 18%, 88% 82%, 36% 44%, 10% 74%; }
}

@keyframes leadBgDiag {
  0%   { background-position: 12% 18%, 88% 82%, 36% 44%, 10% 74%; }
  25%  { background-position: 82% 18%, 18% 82%, 56% 44%, 30% 70%; }
  50%  { background-position: 88% 82%, 12% 18%, 64% 56%, 34% 66%; }
  75%  { background-position: 18% 82%, 82% 18%, 44% 56%, 14% 62%; }
  100% { background-position: 12% 18%, 88% 82%, 36% 44%, 10% 74%; }
}

/* Contain variant: show full image without cropping for single figures */
.about-figure--single.about-figure--contain {
  aspect-ratio: auto;
}
.about-figure--single.about-figure--contain img {
  height: auto;
  object-fit: contain;
  width: 100%;
}
/* Self-serve image: ensure no cropping and a comfortable size */
.about-figure--selfserve img {
  width: min(92%, 520px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Vacuum image: display smaller without cropping and keep centered */
.about-figure--vacuum img {
  width: min(72%, 320px);
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
/* Constrain the figure wrapper so the whole block appears smaller */
.about-figure--vacuum {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes leadBgPulse {
  0%   { background-size: 100% 100%; }
  50%  { background-size: 104% 104%; }
  100% { background-size: 100% 100%; }
}

@keyframes leadBgPulse {
  0%   { background-size: 100% 100%; }
  50%  { background-size: 104% 104%; }
  100% { background-size: 100% 100%; }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .page-home .about-lead {
    animation: none;
    background-size: auto;
  }
  .page-home .about-lead::before { -webkit-animation: none; animation: none; opacity: 0.6; }
}

/* keep simplest layout: no extra overlays — animated background only */
.page-home .about-lead { position: relative; isolation: isolate; }

/* removed extra conic overlays — using the 4-color animated background only */
/* Make the content above the overlay visible */
.page-home .about-lead * {
  position: relative; z-index: 3; /* ensure text and inline elements render above the animated overlay */
}

/* Place the animated overlay behind content but above base background */
.page-home .about-lead::before { z-index: 0; pointer-events: none; }

/* 'ONE MILLION' pop/pulse */
.page-home .about-lead strong {
  color: #ffffff; /* make ONE MILLION text white as requested */
  font-weight: 900;
  transform-origin: center;
  display: inline-block;
  -webkit-animation: popPulse 3.6s ease-in-out infinite;
  animation: popPulse 3.6s ease-in-out infinite;
  /* keep a subtle darker drop shadow for legibility and a very soft white rim
     to avoid a harsh halo while keeping the text bright */
  text-shadow: 0 3px 10px rgba(0,0,0,0.25), 0 0 10px rgba(255,255,255,0.04);
}

/* Force non-strong text in the banner to render dark for readability */
body.page-home .about-lead { color: #000000; }
body.page-home .about-lead a { color: #0C2FF2; } /* keep links legible in dark text */
body.page-home .about-lead strong { color: #ffffff; }

@keyframes popPulse {
  0% { transform: scale(1); }
  8% { transform: scale(1.08); }
  20% { transform: scale(1); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .about-lead strong { animation: none; }
}

.page-home .about-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(24px, 3.5vw, 40px);
	margin-top: clamp(32px, 5vw, 60px);
	position: relative;
	z-index: 1;
    /* Ensure a stable grid height */
    grid-auto-rows: auto;
    align-items: stretch; /* make items in the same row equal height */
}

.about-card {
	background: #ffffff;
	border-radius: 24px;
	padding: clamp(24px, 4vw, 36px);
	box-shadow: 0 10px 30px -10px rgba(12, 47, 242, 0.25), 0 8px 20px rgba(15, 42, 90, 0.08);
	border: 1px solid rgba(12, 47, 242, 0.08);
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 28px);
	position: relative;
  overflow: visible; /* Changed from hidden to visible for the overlay */
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease;
  backdrop-filter: blur(6px);
  height: 100%; /* fill the grid row height so sibling cards align */
    /* remove isolation here to avoid creating a stacking context that blocks z-index
       on .about-lead (we'll manage stacking explicitly on .about-lead itself) */
    /* isolation: isolate; */
}

.about-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 25px 50px -12px rgba(12, 47, 242, 0.35), 0 16px 32px rgba(15, 42, 90, 0.12);
	border-color: rgba(12, 47, 242, 0.18);
}

.about-card p {
	margin: 0;
	line-height: 1.7;
	font-size: clamp(1rem, 1.8vw, 1.1rem);
	color: var(--color-text);
}

.card-header {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.4vw, 14px);
	position: relative;
}

.card-header h3 {
	font-size: clamp(1.5rem, 2.7vw, 2rem);
	margin: 0;
	color: var(--color-primary-dark);
	letter-spacing: -0.01em;
	line-height: 1.2;
	font-weight: 700;
}

.card-header p {
	font-size: clamp(1rem, 1.8vw, 1.1rem);
	color: var(--color-muted);
	width: 100%;
	text-align: left !important;
	max-width: 480px;
	margin: 0 auto;
}

.auto-pair {
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 30px);
	margin: 12px auto 20px;
}


.about-figure {
	background: linear-gradient(165deg, rgba(12, 47, 242, 0.08), rgba(47, 210, 0, 0.06));
	border-radius: 20px;
	padding: clamp(3px, 0.6vw, 6px);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1vw, 14px);
	align-items: center;
	width: 100%;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-figure:hover {
	transform: scale(1.02);
	box-shadow: 0 15px 35px -10px rgba(12, 47, 242, 0.25);
}

.about-figure img {
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(14, 34, 80, 0.12);
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
	object-fit: cover;
  object-position: center center; /* ensure image centers when cropped */
}

.about-figure:hover img {
	transform: scale(1.04);
	filter: brightness(1.05) contrast(1.02);
}

/* Make the Vacuums image hover much subtler */
.about-figure--vacuum:hover {
  transform: scale(1.005);
  box-shadow: 0 10px 24px -12px rgba(12, 47, 242, 0.18);
}
.about-figure--vacuum:hover img {
  transform: scale(1.01);
  filter: brightness(1.03) contrast(1.01);
}

.about-figure figcaption {
	font-weight: 600;
	font-size: clamp(1rem, 1.6vw, 1.1rem);
	color: var(--color-primary-dark);
	letter-spacing: 0.01em;
	padding: 0 6px;
}

.about-figure--single {
	max-width: 480px;
	margin: 0 auto;
	aspect-ratio: 16/10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-figure--single img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-figure--tinted img {
	filter: saturate(115%) brightness(1.02) contrast(1.04);
}

.about-feature-list {
	list-style: none;
	margin: 6px 0 10px;
	padding: 0;
	display: grid;
	gap: clamp(10px, 1.6vw, 16px);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.about-feature-list li {
	background: linear-gradient(135deg, rgba(12, 47, 242, 0.05), rgba(47, 210, 0, 0.05));
	border: 1px solid rgba(12, 47, 242, 0.08);
	border-radius: 14px;
	padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2.5vw, 20px);
	font-weight: 600;
	color: var(--color-primary-dark);
	font-size: clamp(0.9rem, 1.6vw, 1.05rem);
	letter-spacing: 0.01em;
	box-shadow: 0 6px 16px -8px rgba(12, 47, 242, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
	position: relative;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-feature-list li:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(12, 47, 242, 0.25);
	background: linear-gradient(135deg, rgba(12, 47, 242, 0.08), rgba(47, 210, 0, 0.08));
}

.card-note {
	font-size: clamp(0.95rem, 1.8vw, 1.05rem);
	color: var(--color-muted);
	padding: 14px;
	border-top: 1px solid rgba(12, 47, 242, 0.08);
	margin-top: 0; /* Ensure no top margin for proper positioning */
	border-radius: 0 0 20px 20px;
	font-style: italic;
	text-align: center;
}

.card-note a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, text-decoration 0.2s ease;
	position: relative;
}

.card-note a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.card-highlight {
	background: linear-gradient(140deg, rgba(12, 47, 242, 0.06), rgba(47, 210, 0, 0.08));
	border-radius: 18px;
	padding: clamp(20px, 2.6vw, 26px);
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.8vw, 16px);
	text-align: left;
	border: 1px solid rgba(12, 47, 242, 0.1);
	box-shadow: 0 10px 24px -12px rgba(12, 47, 242, 0.2);
}

/* Center the chips inside the accent card's highlight area on desktop */
@media (min-width: 768px) {
  .about-card--accent .card-highlight {
    align-items: center; /* center children horizontally */
    text-align: center;
  }
  .about-card--accent .card-highlight .about-feature-list {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 880px;
    justify-content: center;
    padding: 12px 16px;
    box-sizing: border-box;
    flex-wrap: wrap; /* allow chips to wrap onto new rows */
  }
  .about-card--accent .card-highlight .about-feature-list li {
    /* Prefer two columns when space allows but allow smaller chips to prevent overflow */
    flex: 1 1 48%;
    min-width: 140px; /* allow chips to shrink on narrow screens */
    max-width: calc(50% - 8px);
    margin: 0;
    box-sizing: border-box;
  }
}

.about-card--accent {
	background: linear-gradient(165deg, #ffffff, #f0f7ff);
	border: 1px solid rgba(12, 47, 242, 0.15);
	box-shadow: 0 22px 46px -16px rgba(12, 47, 242, 0.35);
	position: relative;
	overflow: hidden;
}

/* Center the gift-card descriptive text on desktop for better visual balance */
@media (min-width: 992px) {
  .about-card--accent {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .about-card--accent p,
  .about-card--accent .card-note {
    text-align: center;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  .about-card--accent .card-note {
    font-style: italic;
    margin-top: 18px;
  }
}

.about-card--accent::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	height: 150px;
	background: radial-gradient(circle, rgba(47, 210, 0, 0.1), rgba(47, 210, 0, 0) 70%);
	border-radius: 50%;
	opacity: 0.8;
	z-index: 0;
	pointer-events: none;
}

.about-card--accent .about-feature-list li {
	background: rgba(255, 255, 255, 0.8);
	color: var(--color-primary-dark);
	border: 1px solid rgba(12, 47, 242, 0.1);
}

.about-card--full {
	grid-column: 1 / -1;
	text-align: center;
	align-items: center;
	background: linear-gradient(145deg, #ffffff, #f9fafe);
	border: 1px solid rgba(12, 47, 242, 0.1);
}

.about-card--full .card-header {
	align-items: center;
	position: relative;
}

.about-card--full .card-header h3 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 8px;
}

.about-card--full p {
	max-width: 680px;
	margin: 0 auto;
	font-size: clamp(1.05rem, 2vw, 1.15rem);
}

.about-card--wide {
	grid-column: 1 / -1;
	background: linear-gradient(160deg, #ffffff, #f5faff);
	padding-bottom: clamp(30px, 5vw, 40px);
	position: relative;
}

.about-card--wide::after {
    /* decorative bottom gradient removed to avoid visual bleed/alignment issues */
    content: '';
    display: none;
}

/* Ensure the accent card (Wash Cards & Gift Cards) spans full width on desktop so it uses
   the extra horizontal space instead of leaving a gap to the right. Keeps mobile stacked. */
/* On desktop we want the accent card and the new social card to share a row. Remove forcing full-width. */
@media (min-width: 992px) {
  .page-home .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns for main cards */
    gap: 24px;
    align-items: stretch; /* stretch items so rows are equal height */
  }
  .page-home .about-grid .about-card--wide { grid-column: 1 / -1; }
  /* Gift card should span full width on desktop */
  .page-home .about-grid .about-card--accent { grid-column: 1 / -1; }
  /* Social card spans full width too */
  .page-home .about-grid .about-card--social { grid-column: 1 / -1; }
}

/* Slightly larger layout for very wide screens: give accent more room */
@media (min-width: 1200px) {
  .page-home .about-grid { grid-template-columns: 7fr 5fr; }
  /* Keep the gift card spanning full width even on wide screens */
  .page-home .about-grid .about-card--accent { grid-column: 1 / -1; }
  /* Social card spans full width as well */
  .page-home .about-grid .about-card--social { grid-column: 1 / -1; }
}

/* Social card styles */
.about-card--social {
  background: linear-gradient(150deg, #ffffff, #f7fbff);
  border: 1px solid rgba(12, 47, 242, 0.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 28px -12px rgba(12,47,242,0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

/* Home: tighten space above the first About card (Two Automatic Washes) */
.page-home .about-container { padding-top: clamp(6px, 1.6vw, 12px); }
.page-home .about-lead { margin-bottom: clamp(14px, 2.6vw, 24px); }
.page-home .about-grid { margin-top: clamp(16px, 3vw, 28px); }

/* Center and allow wider copy inside social card */
.about-card--social .card-header p { text-align: center !important; }
@media (min-width: 992px) {
  .about-card--social .card-header p { max-width: 920px; }
}

.about-card--social .social-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.about-card--social .social-btn {
  background: linear-gradient(90deg, rgba(12,47,242,0.06), rgba(47,210,0,0.06));
  border: 1px solid rgba(12,47,242,0.12);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-primary-dark);
  font-weight: bold;
}

/* (social-preview removed per design simplification) */

@media (max-width: 991px) {
  /* already centered by default; keep block for future tweaks */
}

.has-placeholder {
	position: relative;
}

.has-placeholder .image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 18px;
	border: 2px dashed rgba(12, 47, 242, 0.35);
	background: repeating-linear-gradient(135deg, rgba(12, 47, 242, 0.06) 0, rgba(12, 47, 242, 0.06) 8px, rgba(47, 210, 0, 0.06) 8px, rgba(47, 210, 0, 0.06) 16px);
	color: rgba(12, 47, 242, 0.65);
	font-weight: 600;
	font-size: clamp(0.85rem, 1.6vw, 1rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	transition: all 0.3s ease;
	box-shadow: 0 10px 25px -15px rgba(12, 47, 242, 0.25);
}

.has-placeholder:hover .image-placeholder {
	background: repeating-linear-gradient(135deg, rgba(12, 47, 242, 0.08) 0, rgba(12, 47, 242, 0.08) 8px, rgba(47, 210, 0, 0.08) 8px, rgba(47, 210, 0, 0.08) 16px);
	border-color: rgba(12, 47, 242, 0.5);
	color: rgba(12, 47, 242, 0.85);
	box-shadow: 0 15px 35px -12px rgba(12, 47, 242, 0.35);
	transform: scale(1.02);
}

.auto-pair .about-figure {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	align-items: center;
	text-align: center;
}

.auto-pair .about-figure img {
  flex: 1 0 auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  margin: 0;
}

.auto-pair .about-figure figcaption {
    margin-top: clamp(8px, 1vw, 12px);
    width: 100%;
    min-height: clamp(40px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
}

/* On wider screens, lock to two equal columns for perfect alignment */
@media (min-width: 900px) {
  .auto-pair {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    max-width: 800px;
    margin: 12px auto 20px;
  }
  /* Left-align the automatic-wash description on desktop */
  .card-header p.auto-desc {
    text-align: left !important;
    margin: 0; /* keep it flush with the card padding */
    max-width: 640px;
  }
}

.has-placeholder .image-placeholder::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 14px;
	border: 1px solid rgba(12, 47, 242, 0.12);
	pointer-events: none;
}

@media (min-width: 1024px) {
	.page-home .about-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-card--wide {
		grid-column: span 2;
	}

	.auto-pair {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		align-items: stretch;
		gap: clamp(32px, 4vw, 48px);
		max-width: 900px;
		margin: 12px auto 20px;
	}

    .auto-pair .about-figure {
        padding: clamp(4px, 0.8vw, 8px);
        border-radius: 20px;
        gap: clamp(8px, 1vw, 12px);
      display: flex;
      flex-direction: column;
      justify-content: center; /* vertically center image content to avoid shifts */
      align-items: center;
        text-align: center;
        width: 100%;
        max-width: 400px;
    }

	.auto-pair .about-figure img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
    object-position: center center; /* center within the aspect box */
		border-radius: 16px;
		width: 100%;
		display: block;
	}

	.auto-pair .about-figure figcaption {
		text-align: center;
		width: 100%;
		margin-top: clamp(8px, 1vw, 12px);
	}

	.auto-pair .has-placeholder .image-placeholder {
		width: 100%;
		min-height: 280px; /* gentle floor so captions don't jump */
		border-radius: 20px;
	}

	.auto-pair .has-placeholder .image-placeholder::after {
		border-radius: 18px;
	}
}

@media (max-width: 720px) {
	.page-home .about-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(14px, 4.8vw, 20px);
	}

	.about-card {
		padding: clamp(14px, 5.5vw, 20px);
		gap: clamp(12px, 4vw, 18px);
		border-radius: 16px;
		align-items: center;
		text-align: center;
	}

	.card-header h3 {
		font-size: clamp(1.18rem, 4.2vw, 1.52rem);
	}

	.card-header {
		align-items: center;
	}

	.card-header p {
		text-align: left;
	}

	.about-card p,
	.card-note,
	.card-highlight p {
		font-size: clamp(0.86rem, 3.4vw, 0.98rem);
		line-height: 1.52;
	}

	.card-highlight {
		align-items: center;
		text-align: center;
		padding: clamp(14px, 5vw, 20px);
	}

	.about-feature-list li {
		font-size: clamp(0.8rem, 3.2vw, 0.92rem);
		padding: clamp(10px, 3.6vw, 16px) clamp(12px, 4.2vw, 18px);
	}

	.auto-pair {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(12px, 4vw, 18px);
		justify-items: center;
	}

	.about-figure {
		padding: clamp(3px, 2vw, 8px);
		border-radius: 18px;
		width: 100%;
		max-width: 100%;
		margin: 0;
		gap: clamp(3px, 1.8vw, 8px);
	}

	.about-figure img {
		width: 100%;
		max-width: 100%;
		border-radius: 16px;
	}

	.has-placeholder .image-placeholder {
		width: 100%;
		max-width: 100%;
		border-radius: 16px;
	}

	.has-placeholder .image-placeholder::after {
		inset: 3px;
		border-radius: 14px;
	}

	.about-feature-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.page-home .about-container {
		padding-inline: clamp(8px, 5.5vw, 18px);
	}

	.has-placeholder .image-placeholder {
		width: 100%;
		max-width: 100%;
	}

	.card-header h3 {
		font-size: clamp(1.12rem, 4.6vw, 1.4rem);
	}

	.about-card {
		padding: clamp(12px, 6.4vw, 20px);
	}

	.about-card p,
	.card-note,
	.card-highlight p {
		font-size: clamp(0.84rem, 3.8vw, 0.96rem);
	}
}

/* ===== Footer: don't overlay content on small screens ===== */
footer {
  text-align: center;
  padding: 10px clamp(12px, 3vw, 18px);
  background-color: var(--color-primary-dark);
  color: white;
  position: relative; /* removed fixed positioning to avoid overlap */
  bottom: auto;
  width: 100%;
  font-size: clamp(0.8rem, 2.8vw, 1rem);
  line-height: 1.3;
  overflow-wrap: anywhere; /* prevent long strings from overflowing */
  box-sizing: border-box;
}

/* Location page layout: ensure footer sits at the bottom with short content */
.page-location {
  display: flex;
  flex-direction: column;
  /* Use multiple viewport units for best cross-browser behavior */
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* dynamic viewport (iOS 15+, modern) */
  min-height: 100svh;  /* small viewport (newer spec) */
}
.page-location .content {
  flex: 1 1 auto; /* let main content grow to push footer down */
  /* Remove any page-global bottom margin so footer can hug bottom */
  margin-bottom: 0;
  padding-bottom: 0 !important; /* avoid extra inner gap above footer */
}
.page-location footer {
  flex-shrink: 0; /* keep footer at bottom */
}

/* Also override on extra-small screens where .content sets a bottom margin globally */
@media (max-width: 480px) {
  .page-location .content { margin-bottom: 0; }
}

/* App page layout: make the page a column flex container so footer stays at bottom */
.page-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* dynamic viewport height to avoid bottom gaps on mobile */
}
.page-app .page-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 16px 16px;
  width: 100%;
  box-sizing: border-box;
}
.page-app .app-container { flex: 0 0 auto; }
.page-app footer { flex-shrink: 0; }

/* Contact page layout: ensure footer sits at the bottom with no extra space below */
.page-contact {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.page-contact main {
  flex: 1 1 auto;
}
.page-contact footer {
  flex-shrink: 0;
}

/* Contact card */
.contact-card {
  max-width: 560px;
  margin: 18px auto 24px;
  padding: clamp(18px, 4vw, 26px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(12,47,242,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  text-align: center;
  box-sizing: border-box;
}

.contact-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: var(--color-primary-dark);
}

.contact-card .contact-note {
  margin: 0 0 16px;
  color: var(--color-muted);
  line-height: 1.55;
}

.contact-number {
  display: inline-block;
  font-size: clamp(1.4rem, 6.5vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-decoration: none;
  letter-spacing: 0.5px;
  margin: 6px 0 14px;
}
.contact-number:hover { text-decoration: underline; }

.contact-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-btn { 
  min-width: 130px; 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  font-weight: 700; 
}

@media (max-width: 480px) {
  .contact-card { margin: 10px 8px 16px; padding: 14px; border-radius: 12px; }
}

/* (removed contact form styles) */

/* ===== Smaller screens & fine tuning ===== */
/* Desktop row alignment - only for large screens where cards are side by side */
@media (min-width: 993px) {
  .price-section h3 {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .price-display {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .monthly-plan {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 992px) {
  .pricing {
    grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 4vw, 32px);
  }
  .location .map-container iframe { height: 360px; }
}

@media (max-width: 768px) {
  header { padding: 10px 12px; }
  nav { border-radius: 16px; padding: 8px 10px; }
  nav ul { gap: 8px; }
  .logo { height: clamp(44px, 10vw, 70px); width: auto; transform: scale(1.12); transform-origin: left center; }
  .content { margin-top: 30px; padding: 0 12px; }
  /* reduce gap above grid and tighten interior spacing */
  .pricing { 
    grid-template-columns: 1fr;
  gap: clamp(14px, 4vw, 20px);
    padding: 0 12px;
  }
  .package { 
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  /* Prevent overlap between an expanded card and the next card's badge */
  .package.expanded { 
  /* Reduced spacing; still ensures next badge doesn't overlap */
  margin-bottom: clamp(40px, 9vh, 20px);
  }
  /* Bring badge closer to card on small screens to minimize required spacing */
  .popular-badge { top: -12px; }
  .expand-btn { 
    padding: 9px 18px; 
    font-size: 0.85rem; 
    min-width: 120px; 
    max-width: 220px;
    margin-top: 14px; /* provide clear separation from monthly plan */
  }
  .package .price-section {
    margin-bottom: 12px; /* ensure button never overlaps */
  }
  .about-section { flex-direction: column; text-align: center; }
  .about-text { text-align: center; }
  .location .map-container iframe { height: 300px; }
  /* app page: reduce empty space, center the card closer to viewport */
  .page-app { min-height: 100dvh; }
  .page-app .page-main { justify-content: flex-start; padding: 20px 12px 16px; }
  .app-container { gap: 16px; padding: 16px; margin: 0; }
}

@media (max-width: 480px) {
  nav ul { gap: 6px; }
  nav ul li a { padding: 6px 10px; font-size: 0.9rem; border-radius: 9999px; }
  .pricing {
    padding: 0 12px;
  }
  /* Slight gutter for homepage hero video on phones (outside the box) */
  .hero-section { margin-left: 2px; margin-right: 2px; }
  .package { 
    max-width: 100%;
    height: auto;
    min-height: 250px;
  }
  .logo { width: clamp(60px, 24vw, 140px); transform: scale(1.08); transform-origin: left center; }
  /* Increased extra top space so heading sits comfortably below header */
  .content { margin: 84px 10px 44px; }
  /* Contact page: slightly reduce bottom margin so footer sits tighter */
  .page-contact .content { margin-bottom: 16px; }
  /* Reinforce homepage H1 top margin on phones */
  .page-home .content > h1 { margin-top: 10px; }
  /* Pricing page: push the H1 further down for extra breathing room under the nav */
  .page-pricing .content { margin-top: 10px; }
  /* Even spacing for pricing intro stack */
  .content > h1 { margin: 0 0 36px; }
  /* Tighten space above pricing cards further (tiny gap) */
  body:not(.page-home) .about-container { margin: 0 auto 8px !important; padding: 0 8px; text-align: center; }
  /* About page: force very small top margin so heading sits near the nav */
  .page-about .about-container { margin-top: 8px !important; }
  body:not(.page-home) .about-container h2 { margin: 0 0 28px; }
  body:not(.page-home) .about-container h2::after { margin: 20px auto 20px; }
  body:not(.page-home) .about-container > p { margin: 0; line-height: 1.55; }
  article { padding: 8px; }
  .location .map-container iframe { height: 220px; }
  .modal-content { padding: 14px; }
  /* Mobile modal polish: center/wrap buttons and tighten padding */
  .map-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; width: 100%; }
  .map-modal-content { padding: 22px 18px 18px; }
  
  /* Extra small phone adjustments for hamburger menu */
  .stack-menu {
    right: clamp(8px, 2.5vw, 12px);
    width: clamp(36px, 8.5vw, 42px);
    height: clamp(32px, 8vw, 38px);
    padding: clamp(6px, 1.4vw, 10px);
    gap: var(--bar-gap);
  }
  
  .stack-menu:before,
  .stack-menu:after,
  .stack-menu div {
    width: clamp(20px, 5.5vw, 26px);
    height: clamp(2.5px, 0.8vw, 3.5px);
  }
  
  /* further scale large typography on very small screens */
  .content h1 { font-size: clamp(1.25rem, 7.2vw, 2rem); letter-spacing: 0.2px; line-height: 1.08; }
  h2 { font-size: clamp(1rem, 4.6vw, 1.4rem); }
  p { font-size: clamp(0.9rem, 3.6vw, 1rem); }
}

/* Large phone/small tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
  .stack-menu {
    right: clamp(14px, 4vw, 20px);
    width: clamp(44px, 11vw, 54px);
    height: clamp(40px, 10vw, 50px);
    padding: clamp(10px, 2.5vw, 14px);
  gap: var(--bar-gap);
  }
  
  .stack-menu:before,
  .stack-menu:after,
  .stack-menu div {
    width: clamp(26px, 7vw, 34px);
    height: clamp(3.5px, 1.2vw, 4.5px);
  }
}

/* App container styling */
.app-container {
  /* ...existing code... */
  text-align: center;
  margin: 0 auto 20px; /* bottom margin creates spacing to next section */
  width: 100%;
  max-width: 560px;
  min-width: 0; /* allow flex child to shrink inside page-main on small screens */
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: flex; /* create consistent internal spacing */
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3.2vw, 24px);
}

/* How Our App Works section */
.app-works-section {
  width: 100%;
  max-width: 560px;
  margin: 0 auto; /* Remove bottom margin */
  padding: 32px 8px 0 8px; /* Remove bottom padding entirely */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  text-align: center;
}

.app-works-section h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: #333;
  margin: 0 0 24px;
  font-weight: bold;
}

/* Steps container and styling - Perfect alignment system */
.steps-container {
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--step-row-gap);
}

.step {
  /* Flexbox for perfect baseline alignment */
  display: flex;
  align-items: baseline; /* Key: aligns icon baseline with text baseline */
  gap: var(--step-gap);
  margin: 0;
  padding: var(--step-pad-block) var(--step-pad-inline);
  background: transparent;
  border-radius: 10px;
}

.step:last-child {
  margin-bottom: 0;
  padding-bottom: clamp(8px, 1.5vw, 16px); /* Add extra bottom padding for step 4 alignment */
}

.step-number {
  background: var(--color-primary);
  color: white;
  width: var(--step-icon-size);
  height: var(--step-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--step-num-font);
  flex-shrink: 0;
  /* Lift icon up to align with text baseline */
  margin-top: -0.25em;
  line-height: 1;
}

/* Remove individual step adjustments */

.step p {
  margin: 0;
  margin-top: clamp(3px, 0.8vw, 8px); /* Scale text position with screen size */
  font-size: 1.05rem;
  line-height: 1.5; /* Consistent line height for baseline alignment */
  color: #333;
  flex: 1;
  /* Ensure text starts at baseline */
  display: block;
}

.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* Match baseline alignment */
  line-height: 1.5;
}

.step-content p {
  margin: 0;
  margin-top: clamp(3px, 0.8vw, 8px); /* Scale text position with screen size */
  font-size: 1.05rem;
  line-height: 1.5; /* Consistent with step p */
  color: #333;
}

.step .sub-text {
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  /* pull subtext a bit closer to the main line for tighter grouping */
  margin-top: 2px;
  display: block;
}

/* Highlighted pricing button - match download button style */
.pricing-link {
  display: inline-block;
  padding: 7px 14px; /* Match download button padding for consistency */
  font-size: 0.85rem; /* Match download button font size */
  font-weight: bold;
  color: white;
  background-color: var(--color-primary);
  border-radius: 7px; /* Match download button radius */
  text-decoration: none;
  transition: background 0.25s ease, transform 0.15s ease; /* Match download button transition */
  box-shadow: 0 2px 6px rgba(12,47,242,0.30);
  margin-top: 4px;
  text-align: center;
  box-sizing: border-box;
}

.pricing-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12,47,242,0.40);
  text-decoration: none;
  color: white;
}

.pricing-link:active,
.pricing-link:focus {
  transform: scale(0.995); /* Match download button active state */
  outline: none;
}

/* responsive app logo inside app page */
.app-logo {
  width: clamp(120px, 28vw, 200px);
  height: auto;
  display: block;
  margin: 0 auto; /* gap handles spacing */
}

/* normalize heading and paragraph spacing inside app container */
.app-container h1,
.app-container p {
  margin: 0;
  overflow-wrap: break-word; /* avoid pushing layout horizontally */
  word-break: break-word;
}

/* App page typography for better fit across sizes */
.app-container h1 {
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  line-height: 1.15;
}
.app-container p {
  font-size: clamp(1rem, 3.5vw, 1.1rem);
  max-width: 60ch;
}

/* Download button: scales and becomes full width on small screens */
.download-btn {
    display: inline-block; /* Make it inline for smaller size */
    width: auto; /* Auto width instead of full width */
    max-width: none; /* Remove max-width constraint */
    padding: 7px 14px; /* Slightly smaller padding for desktop */
    font-size: 0.85rem; /* Slightly smaller font size for desktop */
    font-weight: bold;
    color: white;
    background-color: var(--color-primary);
    border-radius: 7px; /* Slightly smaller border radius */
    text-align: center;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.15s ease;
    box-sizing: border-box; /* include padding in width calculation to avoid overflow */
    margin: 4px 0; /* Smaller vertical margin */
    box-shadow: 0 2px 6px rgba(12,47,242,0.30);
}

/* make the visible button area comfortable on small devices */
.download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(12,47,242,0.40);
    text-decoration: none;
    color: white;
}

.download-btn:active,
.download-btn:focus {
    transform: scale(0.995);
    outline: none;
}

/* Modal sizing improvements */
.modal {
    display: none;
    position: fixed;
  z-index: 11050; /* above hamburger/menu */
    inset: 0; /* fill entire viewport */
    background-color: rgba(0, 0, 0, 0.7); /* darker overlay for better focus */
    backdrop-filter: blur(4px); /* blur the background content */
    -webkit-backdrop-filter: blur(4px); /* Safari support */
    align-items: center; /* vertically centered */
    justify-content: center; /* horizontally centered */
    padding: 20px;
    box-sizing: border-box;
}

.modal.show { display: flex; }

.modal-content {
  position: relative;
  background: white;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  width: calc(100% - 32px); /* consistent side gutters */
  max-width: 420px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}

/* On very short viewports, keep the modal centered and ensure it fits */
@media (max-height: 600px) {
  .modal {
    padding: 16px;
  }
  .modal-content {
    max-height: 85vh;
    padding: 28px 20px 20px 20px; /* maintain top spacing for close button */
    width: 85%;
  }
}

/* close button repositioned to top-right corner */
.close-btn {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 4px;
    top: 2px;
    background: transparent;
    border: none;
    color: #666;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.close-btn:hover {
    background-color: #f5f5f5;
    color: #333;
}

/* store badges centered with consistent sizing */
.store-badge {
    width: 220px;
    height: auto;
    margin: 12px auto;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}

.store-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile specific adjustments */
@media (max-width: 480px) {
    .page-app .page-main { 
        padding: 16px 12px 16px; /* match the spacing between sections */
    }
    
    .app-container {
        margin: 0 auto 16px; /* reduced bottom margin on mobile */
        padding: 12px; /* reduced internal padding */
        gap: 12px; /* tighter spacing between elements */
    }

    .app-works-section {
        margin: 0 auto; /* Remove bottom margin for mobile */
        padding: 24px 6px 0 5px; /* Remove bottom padding entirely for mobile */
    }    .app-works-section h2 {
        font-size: 1.3rem;
        margin: 0 0 18px;
    }
    
  .steps-container {
    padding: 0; /* remove inner padding so content sits closer to edge */
  }
    
  .steps-container { row-gap: 12px; }
  .step {
    align-items: baseline; /* Maintain baseline alignment on mobile */
    display: flex;
    gap: var(--step-gap);
    padding: 4px 6px;
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
  }
    
    .step-number {
        /* Mobile uses the same baseline alignment system */
        flex-shrink: 0;
        margin-top: -0.2em; /* Slightly less lift on mobile */
        line-height: 1; /* Consistent baseline reference */
    }  .step p {
    font-size: 0.85rem; /* smaller mobile text */
    line-height: 1.45;
  }
    
    .step-content {
        gap: 8px;
    }
    
  .step-content p {
    font-size: 0.85rem; /* smaller mobile text */
    line-height: 1.45;
  }
    
  .step .sub-text {
    font-size: 0.78rem;
    margin-top: 2px;
  }
    
    .step-content {
        gap: 8px;
    }
    
  .pricing-link {
    display: inline-block; /* align with left text edge */
    width: auto;
    text-align: center; /* Center text in button */
    padding: 5px 12px; /* Match mobile download button padding */
    font-size: 0.8rem; /* Match mobile download button font size */
    font-weight: bold;
    color: white;
    background-color: var(--color-primary); /* Match download button background */
    border-radius: 5px; /* Match mobile download button radius */
    margin-top: 6px;
    transition: background 0.25s ease, transform 0.15s ease; /* Match download button */
    box-sizing: border-box;
  }

    .app-logo {
        width: clamp(90px, 34vw, 160px);
        margin: 0 auto; /* ensure logo stays centered without extra space */
    }

    .download-btn {
        display: inline-block;
        width: auto; /* Keep auto width on mobile */
        padding: 5px 12px; /* Slightly smaller padding for mobile */
        font-size: 0.8rem; /* Slightly smaller font size on mobile */
        border-radius: 5px; /* Slightly smaller radius for mobile */
    }

    .modal-content {
        padding: 24px 16px 16px 16px; /* maintain top spacing on mobile */
        width: 85%;
        max-width: 380px;
    }

    .store-badge {
        width: 200px;
        height: auto;
        margin: 10px auto;
    }

}

/* --- Info box text weight override --- */
/* Make text in the info boxes bold without affecting the emoji icon pseudo-element */
.about-list li,
.benefits-list li,
.about-list li p,
.benefits-list li p {
  font-weight: 700;
}

/* Keep the emoji icon weight normal for visual balance */
.about-list li::before,
.benefits-list li::before {
  font-weight: 400;
}

.about-list, .benefits-list {
  max-width: 700px;
  margin: 30px auto;
  padding: 0;
  list-style-type: none;
  display: grid;
  gap: 16px;
  align-items: stretch;
  justify-items: center;
  width: 100%;
}

.about-list li, .benefits-list li {
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  padding: 20px 24px;
  margin: 0;
  border-radius: 12px;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(12,47,242,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
  line-height: 1.5;
}

.about-list li::before, .benefits-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.about-list li:hover, .benefits-list li:hover {
  background: linear-gradient(135deg, #f8fbff, #e8f4ff);
  transform: translateX(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  border-color: rgba(12,47,242,0.15);
}

.about-list li:hover::before, .benefits-list li:hover::before {
  transform: scaleY(1);
}

/* Feature icons - extract emojis and style them */
.about-list li, .benefits-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.about-list li::after, .benefits-list li::after {
  content: attr(data-icon);
  font-size: 1.8rem;
  flex-shrink: 0;
  order: -1;
  line-height: 1;
  filter: grayscale(0.2);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.about-list li:hover::after, .benefits-list li:hover::after {
  filter: grayscale(0);
  transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .about-section {
    flex-direction: column;
    text-align: center;
  padding: clamp(16px, 4.5vw, 32px) clamp(14px, 5vw, 36px);
    gap: 25px;
  }

  .about-text {
    text-align: center;
  }

  .about-list li, .benefits-list li {
    width: 100%;
    text-align: center;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    padding: 16px 20px;
    line-height: 1.45;
  }

  .about-image {
    max-width: 100%;
    order: -1;
  }

  .testimonials {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .testimonial {
    padding: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  article {
    padding: clamp(20px, 4vw, 25px);
    margin: 35px auto;
  }

  .hero-section {
    margin: 20px 0 40px;
    border-radius: 12px;
  }

  .hero-media {
    max-height: 50vh;
  }

  /* Better text sizing for tablets */
  .about-text h3 {
    font-size: clamp(1.3rem, 3vw, 1.6rem);
  }

  .about-text p {
    font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 8px 2px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Compact typography on small screens */
  html { font-size: 14px; }
  .content h1 { font-size: 1.35rem; }
  body:not(.page-home) .about-container h2 { font-size: 1.25rem; }
  .about-text h3, .testimonials h3 { font-size: 1.05rem; }
  body:not(.page-home) .about-container > p, .about-text p { font-size: 0.9rem; }
  .about-list li, .benefits-list li { font-size: 0.8rem; }
  .testimonial { font-size: 0.7rem; }
  article p { font-size: 0.75rem; }

  /* Mobile-first hero */
  .content h1 {
    font-size: 1.6rem;
    line-height: 1.1;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
  }

  .hero-section {
    margin: 20px 0 35px;
    border-radius: 12px;
  }

  .hero-media {
    max-height: 45vh;
    width: 100%;
    object-fit: cover;
  }

  /* Mobile about container */
  body:not(.page-home) .about-container {
	margin: 1% auto;
	padding: clamp(8px, 4vw, 18px) clamp(10px, 5vw, 22px);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
  }

  body:not(.page-home) .about-container h2 {
	font-size: 1.5rem;
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
  }

  body:not(.page-home) .about-container h2::after {
	width: 50px;
	height: 3px;
	margin: 12px auto 0;
  }

  body:not(.page-home) .about-container > p {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 35px;
	text-align: center;
	padding: 0;
  }

  /* Mobile sections - more spacious */
  .about-section {
  background: transparent;
  margin: 30px 0;
  padding: clamp(6px, 4vw, 14px) clamp(4px, 5vw, 18px);
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: block;
  }

  .about-text {
    text-align: center;
    width: 100%;
    margin: 0 0 25px 0;
  }

  .about-text h3 {
    font-size: 1.4rem;
    margin: 0 0 15px 0;
    color: var(--color-primary-dark);
    font-weight: bold;
    text-align: center;
  }

  .about-text p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 25px 0;
    color: #444;
    text-align: center;
    padding: 0;
  }

  /* Beautiful boxes for bullet points only */
  .about-list, .benefits-list {
    margin: 15px 2px;
    padding: 0;
    list-style: none;
    display: block;
    width: calc(100% - 4px);
    max-width: calc(100% - 4px);
    box-sizing: border-box;
  }

  .about-list li, .benefits-list li {
    display: block !important; /* override base flex layout */
    position: relative;
    margin: 12px 0;
  padding: 2px 8px 10px 4px; /* even closer to top-left */
    font-size: 0.85rem;
    line-height: 1.3;
    color: #333;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    border-radius: 12px;
    border: 1px solid rgba(12,47,242,0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 0;
    list-style: none;
  }

  .about-list li:hover, .benefits-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }

  .about-list li::before, .benefits-list li::before {
    content: attr(data-icon);
    position: static; /* normal flow */
    display: block; /* its own line */
    width: 34px;
    height: 34px;
    margin: 0 0 8px 0; /* small gap below icon */
    font-size: 1.6rem;
    line-height: 34px; /* vertically center emoji */
    text-align: center;
    background: linear-gradient(135deg, rgba(12,47,242,0.1), rgba(47,210,0,0.1));
    border-radius: 50%;
    border: 2px solid rgba(12,47,242,0.2);
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .about-list li::after, .benefits-list li::after {
    display: none;
  }



  /* Mobile image styling */
  .about-image {
    width: calc(100% - 4px);
    max-width: calc(100% - 4px);
    height: auto;
    margin: 12px 2px;
    border-radius: 6px;
    display: block;
    order: -1;
  }

  /* Mobile testimonials - balanced width */
  .testimonials {
    margin: 25px 2px 20px;
    display: block;
    width: calc(100% - 4px);
    max-width: calc(100% - 4px);
  }

  .testimonials h3 {
    font-size: 1.2rem;
    margin: 0 0 12px 0;
    text-align: center;
    color: var(--color-primary-dark);
    font-weight: bold;
  }

  .testimonials h3::after {
    width: 25px;
    height: 2px;
    margin: 6px auto 0;
  }

  .testimonial {
    background: none;
    border-left: 2px solid var(--color-accent);
    padding: 4px 0 4px 8px;
    margin: 8px 0;
    font-size: 0.75rem;
    line-height: 1.25;
    font-style: italic;
    border-radius: 0;
    box-shadow: none;
    display: block;
    color: #555;
  }

  .testimonial::before {
    display: none;
  }

  /* Mobile article - centered card */
  article {
    background: #ffffff;
    padding: 14px 14px;
  margin: 18px 12px; /* add side space so it doesn't hug edges */
    border-radius: 12px;
    border: 1px solid rgba(12,47,242,0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: block;
  width: auto; /* let margins create the side space */
    max-width: 720px;
    text-align: center;
  box-sizing: border-box;
  }

  article p {
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0;
    color: #333;
    text-align: center;
  }

  /* Remove animations and transitions except for lists */
  .content *, .about-container *, .about-section *, .testimonials *, article * {
    animation: none !important;
  }

  .content, .about-container, .about-section:not(.about-list):not(.benefits-list), .testimonials, article {
    transition: none !important;
  }

  /* Fix HR spacing */
  hr {
    margin: 20px auto;
    max-width: 80px;
    height: 1px;
  }
}

/* Only apply extra optimizations for very narrow screens if needed */
@media (max-width: 320px) {
  .about-list li, .benefits-list li {
    padding: 14px 16px;
    font-size: 0.78rem;
  }

  html { font-size: 13px; }

  .content {
    padding: clamp(12px, 3vw, 16px) clamp(6px, 1.5vw, 10px);
  }
}/* ===== Mobile hamburger + fullscreen menu (restored working version) ===== */

/* Desktop nav shown by default */
.desktop-nav { display: block; }

/* Mobile menu overlay (hidden by default) - full screen */
.mobile-menu {
  position: fixed;
  inset: 0; /* fill viewport */
  background: rgba(21, 78, 191, .98); /* var(--color-primary-dark) with opacity */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4vh);
  transition: opacity 240ms ease, transform 240ms ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hide the overlay's built-in close control — header X is primary */
.mobile-menu .close-menu { display: none; }

.mobile-menu ul { list-style: none; padding: 0; margin: 0; text-align: center; }
.mobile-menu ul li { margin: clamp(14px, 4vw, 24px) 0; }
.mobile-menu ul li a { 
  color: white; 
  text-decoration: none; 
  font-size: clamp(1.5rem, 5vw, 2.2rem); 
  font-weight: 700; 
  padding: clamp(10px, 3vw, 18px) clamp(16px, 4vw, 24px); 
  display: inline-block;
  border-radius: 12px;
  transition: background-color 200ms ease, transform 150ms ease;
}

/* Highlight on touch/tap for mobile devices */
.mobile-menu ul li a:active {
  background: rgba(255,255,255,0.2);
  transform: scale(0.98);
}

/* Highlight on hover for devices that support it (tablets with cursor) */
@media (hover: hover) and (pointer: fine) {
  .mobile-menu ul li a:hover {
    background: rgba(255,255,255,0.10);
    transform: scale(1.02);
  }
}

/* Prevent body scroll when menu open */
body.menu-open { overflow: hidden; }

/* ===== center hamburger ===== */
/* Hidden by default; only visible on small screens inside media query */
.stack-menu {
  display: none;
  /* unify dimensions so transforms calculate cleanly */
  --bar-width: clamp(24px, 6.5vw, 32px);
  --bar-height: clamp(3px, 1vw, 4px);
  --bar-gap: clamp(3px, 0.8vw, 5px);
}

/* visual bar settings (applied when hamburger is displayed) */
.stack-menu:before,
.stack-menu:after,
.stack-menu div {
  content: "";
  display: block;
  width: var(--bar-width);
  height: var(--bar-height);
  background: #fff;
  border-radius: 999px;
  transition: transform 400ms cubic-bezier(.23,.1,.32,1), opacity 300ms ease;
  transform-origin: center center;
  position: absolute;
  left: 50%;
  top: 50%;
}

/* base positions for the three bars: top, middle, bottom */
.stack-menu div { /* middle bar */
  transform: translate(-50%, -50%);
}
.stack-menu:before { /* top bar */
  transform: translate(-50%, calc(-50% - (var(--bar-gap) + var(--bar-height))));
}
.stack-menu:after { /* bottom bar */
  transform: translate(-50%, calc(-50% + (var(--bar-gap) + var(--bar-height))));
}

/* avoid moving bars on hover; show subtle focus */
.stack-menu:hover, .stack-menu:focus { background: rgba(255,255,255,0.06); border-radius: 50%; }
.stack-menu:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,0.18); border-radius: 50%; }

/* Open state: top and bottom form an X at exact center; middle fades */
.stack-menu.open:before {
  /* move to exact center and rotate */
  transform: translate(-50%, -50%) rotate(45deg);
}
.stack-menu.open:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.stack-menu.open div {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

/* Place .stack-menu inside header on the right side on mobile */
@media (max-width: 950px) {
  /* show the hamburger and hide desktop nav on small screens */
  .stack-menu {
    position: absolute;
    right: clamp(12px, 3.5vw, 18px);
    top: 50%;
    transform: translateY(-50%);
  width: clamp(40px, 10vw, 50px);
  height: clamp(36px, 9vw, 48px);
    box-sizing: border-box;
    cursor: pointer;
    z-index: 10001; /* sit above the full-screen mobile menu */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  gap: var(--bar-gap);
  /* keep padding minimal so center stays true */
  padding: clamp(6px, 1.6vw, 10px);
    border-radius: 50%;
    transition: background-color 200ms ease;
  }
  .stack-menu:before, .stack-menu:after, .stack-menu div { background: #fff; }
  header { align-items: center; }
  .logo { height: clamp(40px, 12vw, 70px); width: auto; }
  .desktop-nav { display: none; }

  /* keep the mobile menu full-screen on small screens */
  .mobile-menu { left: 0; top: 0; transform: none; width: 100%; height: 100%; border-radius: 0; }
  .mobile-menu.open { transform: none; }
}

/* --- Nav contrast against header --- */
/* Make nav pill distinct from the header background */
nav {
  background-color: #ffffff; /* high contrast vs header blue */
  border: 1px solid rgba(12, 47, 242, 0.18); /* subtle blue border for separation */
  box-shadow: 0 10px 26px rgba(0,0,0,0.12); /* slightly stronger shadow to float above header */
}

/* Switch link color to brand blue on white pill */
nav ul li a {
  color: var(--color-primary-dark);
}

/* Desktop hover/focus tuned for light nav pill */
@media (min-width: 951px) {
  nav ul li a:hover,
  nav ul li a:focus {
    background: rgba(12, 47, 242, 0.10); /* blue-tinted glass */
    border-color: rgba(12, 47, 242, 0.22);
    color: var(--color-primary-dark);
    box-shadow: 0 8px 18px rgba(12, 47, 242, 0.10);
  }
}

/* ===== Expandable Features List Styles ===== */
.expandable-features-container {
  margin: 15px 0 0;
  position: relative;
  z-index: 10; /* Ensure proper stacking context */
}

.feature-toggle {
  background: linear-gradient(to bottom, #f7f9ff, #eef0ff);
  color: var(--color-primary);
  border: 1px solid rgba(12, 47, 242, 0.08);
  border-radius: 26px; /* slightly less pill-y */
  padding: clamp(8px, 1.2vw, 12px) clamp(16px, 3vw, 22px); /* tighter */
  font-weight: 600;
  font-size: clamp(0.95rem, 1.6vw, 1rem); /* a bit smaller */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  box-shadow: 0 3px 10px rgba(12, 47, 242, 0.06);
  transition: transform 240ms cubic-bezier(.22,.9,.22,1), box-shadow 240ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 280px; /* smaller overall */
}

.feature-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(12, 47, 242, 0.15);
  background: linear-gradient(to bottom, #ffffff, #f5f7ff);
}

.toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.toggle-icon:before,
.toggle-icon:after {
  content: '';
  position: absolute;
  background-color: var(--color-primary);
  border-radius: 1px;
}

/* Arrow icon (caret down) */
.toggle-icon:before {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  background: transparent;
  transform: rotate(45deg);
  top: -2px;
  left: 1px;
  transition: transform 0.3s ease;
}

/* When expanded, flip arrow to point up */
.feature-toggle[aria-expanded="true"] .toggle-icon:before {
  transform: rotate(-135deg);
  top: 4px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.feature-toggle[aria-expanded="true"] .toggle-text {
  opacity: 0.9;
}

.feature-toggle[aria-expanded="true"] {
  background: linear-gradient(to bottom, #e6ebff, #d8e0ff);
  color: var(--color-primary);
}

.feature-toggle[aria-expanded="true"] .toggle-text {
  opacity: 1;
  color: var(--color-primary);
  font-weight: 700;
}

.toggle-text {
  transition: all 0.3s ease;
}

.expandable-content {
  max-height: 0; /* collapsed by default; animated via inline style when open */
  overflow: hidden;
  transition: max-height 380ms cubic-bezier(.22,.9,.22,1), opacity 220ms ease 40ms, margin 200ms ease; 
  opacity: 0;
  position: relative;
  z-index: 1;
  border-radius: 16px;
  margin: 0;
  padding: 0; /* prevent padding from adding height */
  padding-inline: clamp(12px, 4vw, 18px); /* inner gutter so chips never touch the edge */
  will-change: max-height, opacity;
}

.expandable-content.expanded {
  /* when expanded, JS sets inline max-height to scrollHeight */
  opacity: 1;
  margin-top: 6px; /* subtle gap under the button */
  pointer-events: auto;
  padding-bottom: 12px; /* space under chips so shadows aren't clipped */
}

/* When collapsed, ensure the expandable region contributes no vertical space */
.expandable-content:not(.expanded) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* After the height transition finishes, allow overflow so chip shadows show without clipping */
.expandable-content.expanded-ready {
  overflow: visible; /* reveal chips after expand completes */
}

/* Add overlay effect for the expandable content (mobile only) */
@media (max-width: 767px) {
  .feature-toggle[aria-expanded="true"] + .expandable-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    z-index: -1;
  }
}

/* Style the expanded content container */
.expandable-content.expanded .about-feature-list {
  padding: 2px 6px 6px; /* tight spacing under the button */
  background: transparent; /* remove outer container background */
  border: 0; /* remove outer border */
  box-shadow: none; /* remove outer shadow box */
  position: relative;
  z-index: 1;
  margin-bottom: 0; /* Remove any bottom margin */
}

/* Feature list styling for expandable content: make items look like defined pill chips with more spacing */
.expandable-content .about-feature-list {
  background: transparent;
  border-radius: 0;
  padding: 6px 0 10px; /* rely on parent for side gutters */
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; /* slightly larger gap for clarity */
  max-width: 100%; /* use full width inside container padding */
  margin-left: auto;
  margin-right: auto;
  box-shadow: none;
  border: 0;
}

.expandable-content .about-feature-list li {
  background: linear-gradient(to bottom, #ffffff, #f4f8ff);
  border-radius: 14px; /* pill-like corners */
  padding: 10px 14px; /* larger padding for a button-like feel */
  text-align: center;
  font-weight: 700;
  color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(12, 47, 242, 0.06);
  border: 1px solid rgba(12, 47, 242, 0.09);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 220ms ease;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 44px;
  will-change: transform;
  contain: paint; /* avoid overflow artifacts on hover */
}

.expandable-content .about-feature-list li:hover {
  transform: translateY(-2px); /* gentler lift to avoid hitting edges */
  box-shadow: 0 8px 20px rgba(12, 47, 242, 0.08);
  background: linear-gradient(to bottom, #ffffff, #eef4ff);
}

/* accessible focus state */
.expandable-content .about-feature-list li:focus-within,
.expandable-content .about-feature-list li:focus-visible {
  outline: 3px solid rgba(12,47,242,0.12);
  outline-offset: 4px;
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .expandable-content .about-feature-list {
    max-width: 720px; /* cap overall width on desktop */
    grid-template-columns: repeat(2, minmax(220px, 280px)); /* fixed-ish columns */
    justify-content: center; /* center the two columns within available space */
    gap: 14px; /* a touch more space on desktop */
    padding: 8px 0 12px; /* side gutters handled by container */
  }
}

/* Reduce card spacing when the expandable is closed to remove extra gap */
.about-card:has(.expandable-content:not(.expanded)) {
  row-gap: clamp(10px, 1.6vw, 16px);
  padding-bottom: clamp(18px, 2.8vw, 26px);
}

/* Keep more generous spacing only when expanded */
.about-card:has(.expandable-content.expanded) {
  row-gap: clamp(20px, 2.5vw, 28px);
}

/* Fallback for browsers without :has() support */
.about-card.is-expanded {
  row-gap: clamp(20px, 2.5vw, 28px);
}
.about-card:not(.is-expanded) {
  row-gap: clamp(10px, 1.6vw, 16px);
  padding-bottom: clamp(18px, 2.8vw, 26px);
}

/* On desktop/tablet, always show options; hide the expand button */
@media (min-width: 768px) {
  .feature-toggle { display: none !important; }
  .expandable-content { max-height: none !important; opacity: 1 !important; overflow: visible !important; margin-top: 6px; padding-bottom: 12px; }
  .expandable-content .about-feature-list { padding: 2px 6px 6px; }
  /* Neutralize collapsed spacing tweaks on desktop */
  .about-card:has(.expandable-content),
  .about-card.is-expanded,
  .about-card:not(.is-expanded) { row-gap: clamp(20px, 2.5vw, 28px); padding-bottom: clamp(18px, 2.8vw, 26px); }
}

/* For smaller screens, optimize layout */
@media (max-width: 400px) {
  .expandable-content .about-feature-list {
    grid-template-columns: repeat(2, 1fr); /* Keep 2 columns even on small screens */
    max-width: 100%;
    padding: 6px 0 8px; /* side gutters handled by container */
    gap: 8px; /* enough space to avoid edge clipping */
  }
  
  /* Larger list items on mobile to fill more space */
  .expandable-content .about-feature-list li {
    padding: 8px 8px;
    font-size: 0.95rem;
    min-height: 36px; /* keep visual heft but tighter */
  }
  
  /* Extra margin needed on mobile */
  .expandable-features-container {
    margin-bottom: 0; /* Will be set dynamically, but ensure a good starting point */
    z-index: 100; /* Higher z-index on mobile */
  }
  
  /* Ensure the next card doesn't overlap */
  .expandable-features-container + * {
    position: relative;
    z-index: 1;
    margin-top: 0 !important; /* No extra margin after expandable container */
  }
  
  /* Special rule to ensure card-note is positioned properly after expandable content */
  .expandable-features-container + .card-note {
    margin-top: 0;
    padding-top: 5px; /* Reduced padding for tighter spacing */
  }
}