/* -------------------------------------------------
   CSS MODULE (src/app/landing/features/features.module.css)
   - Wrap globals with :global(...) to keep module “pure”
--------------------------------------------------*/

.features_page__c5hRf {
  background: var(--bg);
  padding-top: 100px; /* pushes all sections down */
}

/* Hero (WHITE) */
.features_hero__wocCJ {
  padding: 120px 20px 100px;
  background: #ffffff; /* ⬅️ white */
}
.features_heroInner__H4ZpP {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-gap: 48px;
  gap: 48px;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
}
.features_brandRow__4oQgf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.features_logo__nFyZF {
  border-radius: 10px;
}
.features_brand__Qllkp {
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.2px;
}
.features_title__WiWSS {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  color: var(--ink);
  margin: 8px 0 14px;
}
.features_subtitle__p2hBl {
  color: var(--muted);
  font-size: 16px;
  max-width: 56ch;
}
.features_ctaRow__1C4Lm {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.features_primaryBtn__CIpBE,
.features_secondaryBtn__T6LHx,
.features_ghostBtn__Ms1kY {
  text-decoration: none; /* remove underline */
  display: inline-block; /* ensures proper box for shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* soft drop shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / focus effects to make buttons interactive */
.features_primaryBtn__CIpBE:hover,
.features_secondaryBtn__T6LHx:hover,
.features_ghostBtn__Ms1kY:hover,
.features_primaryBtn__CIpBE:focus-visible,
.features_secondaryBtn__T6LHx:focus-visible,
.features_ghostBtn__Ms1kY:focus-visible {
  transform: translateY(-2px); /* subtle lift */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); /* stronger shadow */
  text-decoration: none; /* keep no underline on hover */
}

.features_primaryBtn__CIpBE {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 600;
}
.features_secondaryBtn__T6LHx {
  background: #fff;
  color: var(--brand);
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid var(--outline);
  font-weight: 600;
}
.features_ghostBtn__Ms1kY {
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid var(--outline);
}

.features_pills__qh0h8 {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
}
.features_pills__qh0h8 li {
  background: #fff;
  border: 1px solid var(--outline);
  color: var(--muted);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
}
.features_pillSoon__u_Tgb {
  opacity: 0.7;
}

.features_heroArt__LtU6c {
  display: flex;
  justify-content: center;
}
.features_deviceMock__UtFc_ {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4/3;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--outline);
  overflow: hidden;
}

/* About (LIGHT PURPLE) */
.features_about__w8cry {
  padding: 120px 80px;
  background: var(--bg); /* ⬅️ light purple */
}
.features_aboutInner__gUYVv {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-gap: 40px;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.features_aboutImageWrap__qwvIN {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--outline);
  background: #fff;
}
.features_aboutText__o_6PS h2 {
  font-size: clamp(28px, 3vw, 40px);
  padding-bottom: 5%;
  margin: 0 0 12px;
  color: var(--ink);
}
.features_aboutText__o_6PS p {
  color: var(--muted);
  margin: 0 0 14px;
}
.features_checkList__AmC34 {
  padding-left: 18px;
  color: var(--ink);
}
.features_inlineCtas__apkZ5 {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

/* Features Grid (WHITE) */
.features_features__cw1Og {
  padding: 120px 80px;
  background: #ffffff; /* ⬅️ white */
}
.features_sectionHead__pYDw9 {
  max-width: 1180px;
  margin: 0 auto 22px;
  text-align: center;
}
.features_sectionHead__pYDw9 h2 {
  padding-bottom: 9px;
  font-size: clamp(28px, 3vw, 36px);
  margin-bottom: 6px;
}
.features_sectionHead__pYDw9 p {
  color: var(--muted);
}
.features_grid__8QIuV {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-gap: 18px;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.features_card__zjivQ,
.features_cardSoon__BFJfK {
  background: #fff;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.features_cardSoon__BFJfK {
  position: relative;
  opacity: 0.9;
}
.features_soonBadge__b_ZaF {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffe8a3;
  color: #7a5d00;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(122, 93, 0, 0.25);
}
.features_icon__UH3hp {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f7f2ff, #fff);
  border: 1px solid var(--outline);
}
.features_icon__UH3hp svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 2;
}
.features_card__zjivQ h3 {
  margin: 4px 0;
  font-size: 18px;
  color: var(--ink);
}
.features_card__zjivQ p,
.features_cardSoon__BFJfK p {
  color: var(--muted);
  font-size: 14px;
}
.features_linkBtn__1j0GB {
  align-self: flex-start;
  margin-top: auto;
  background: transparent;
  color: var(--brand);
  padding: 8px 0;
  font-weight: 600;
}

/* Dashboard Preview (LIGHT PURPLE) */
.features_dashboardPreview__HiiT8 {
  padding: 120px 80px;
  background: var(--bg); /* ⬅️ light purple */
}
.features_previewGrid__1xlX1 {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-gap: 18px;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}
.features_chartCard__A43Tb {
  background: #fff;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.features_chartImageWrap__k66aa {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.features_chartCard__A43Tb figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

/* How It Works (WHITE) */
.features_how__SxqcS {
  padding: 120px 80px;
  background: #ffffff; /* ⬅️ white */
}
.features_steps__yqsZX {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding-left: 18px;
  color: var(--ink);
}
.features_steps__yqsZX li {
  background: #fff;
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

/* CTA (LIGHT PURPLE base with soft panel) */
.features_cta__4CfFA {
  padding: 56px 20px 80px;
  background: var(--bg); /* ⬅️ light purple */
}
.features_ctaBox__B04Ga {
  max-width: 1180px;
  margin: 0 auto;
  background: linear-gradient(135deg, #fff, #f7f2ff);
  border: 1px solid var(--outline);
  border-radius: calc(var(--radius) + 6px);
  padding: 28px;
  box-shadow: var(--shadow);
  text-align: center;
}

/* Make any link that wraps a card/figure look/behave like a block card */
.features_cardLink__Mz0Xl {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
  cursor: pointer;
}

/* Hover & focus states for full-card links */
.features_cardLink__Mz0Xl:hover,
.features_cardLink__Mz0Xl:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(22, 16, 50, 0.1);
}

/* Ensure card/figure containers show pointer when clickable */
.features_card__zjivQ.features_cardLink__Mz0Xl,
.features_chartCard__A43Tb.features_cardLink__Mz0Xl,
.features_aboutImageWrap__qwvIN,
.features_deviceMock__UtFc_ {
  cursor: pointer;
}

/* Give focus ring for accessibility when tabbing */
.features_cardLink__Mz0Xl:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* “Button-looking” span inside links */
.features_linkBtn__1j0GB {
  align-self: flex-start;
  margin-top: auto;
  background: transparent;
  color: var(--brand);
  padding: 8px 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Optional: remove underline on hover if you prefer */
.features_cardLink__Mz0Xl:hover .features_linkBtn__1j0GB {
  text-decoration: none;
}

/* Responsive */
/* ===================== Responsive ===================== */

/* Tablet & down (<= 1024px) */
@media (max-width: 1024px) {
  /* Layout */
  .features_heroInner__H4ZpP {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .features_aboutInner__gUYVv {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .features_previewGrid__1xlX1 {
    grid-template-columns: 1fr;
  }
  .features_grid__8QIuV {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Section paddings (lighter on tablet) */
  .features_hero__wocCJ {
    padding: 96px 24px 80px;
  }
  .features_about__w8cry,
  .features_features__cw1Og,
  .features_dashboardPreview__HiiT8,
  .features_how__SxqcS {
    padding: 96px 24px;
  }
  .features_cta__4CfFA {
    padding: 80px 24px 96px;
  }

  /* Center hero content and CTAs */
  .features_heroText__UWMYT {
    text-align: center;
  }
  .features_ctaRow__1C4Lm {
    justify-content: center;
  }
  .features_pills__qh0h8 {
    justify-content: center;
  }

  /* Tame big headings so they don’t overflow */
  .features_title__WiWSS {
    font-size: clamp(28px, 5.2vw, 44px);
  }
  .features_aboutText__o_6PS h2 {
    font-size: clamp(24px, 4.2vw, 36px);
  }

  /* Cards get a bit roomier to avoid crowding */
  .features_card__zjivQ,
  .features_cardSoon__BFJfK {
    padding: 20px;
  }
}

/* Large phones / small tablets (<= 768px) */
@media (max-width: 768px) {
  /* Section paddings (compact) */
  .features_hero__wocCJ {
    padding: 80px 20px 64px;
  }
  .features_about__w8cry,
  .features_features__cw1Og,
  .features_dashboardPreview__HiiT8,
  .features_how__SxqcS {
    padding: 80px 20px;
  }
  .features_cta__4CfFA {
    padding: 64px 20px 80px;
  }

  /* Grids collapse to 1 col */
  .features_grid__8QIuV {
    grid-template-columns: 1fr;
  }

  /* Make CTAs easier to tap, allow wrapping */
  .features_ctaRow__1C4Lm {
    gap: 10px;
  }
  .features_primaryBtn__CIpBE,
  .features_secondaryBtn__T6LHx,
  .features_ghostBtn__Ms1kY {
    padding: 14px 18px;
  }

  /* Hero mock width so it doesn’t stretch edge-to-edge */
  .features_deviceMock__UtFc_ {
    max-width: 460px;
    margin: 0 auto;
  }

  /* About image/card spacing */
  .features_aboutImageWrap__qwvIN {
    margin: 0 auto;
  }
}

/* Phones (<= 640px) */
@media (max-width: 640px) {
  /* Extra compact paddings */
  .features_hero__wocCJ {
    padding: 72px 16px 56px;
  }
  .features_about__w8cry,
  .features_features__cw1Og,
  .features_dashboardPreview__HiiT8,
  .features_how__SxqcS {
    padding: 72px 16px;
  }
  .features_cta__4CfFA {
    padding: 56px 16px 72px;
  }

  /* Typographic scale for small screens */
  .features_title__WiWSS {
    font-size: clamp(24px, 7vw, 36px);
  }
  .features_aboutText__o_6PS h2 {
    font-size: clamp(22px, 6vw, 30px);
  }
  .features_subtitle__p2hBl {
    font-size: 15px;
  }

  /* Make buttons more thumb-friendly */
  .features_primaryBtn__CIpBE,
  .features_secondaryBtn__T6LHx,
  .features_ghostBtn__Ms1kY {
    padding: 14px 16px;
    border-radius: 999px;
  }

  /* Keep images contained */
  .features_deviceMock__UtFc_ {
    max-width: 400px;
  }
  .features_chartImageWrap__k66aa {
    border-radius: 12px;
  }

  /* Pills wrap & center nicely */
  .features_pills__qh0h8 {
    gap: 6px;
    justify-content: center;
  }
}

/* Ultra-small devices (<= 360px) */
@media (max-width: 360px) {
  .features_title__WiWSS {
    font-size: 22px;
  }
  .features_primaryBtn__CIpBE,
  .features_secondaryBtn__T6LHx,
  .features_ghostBtn__Ms1kY {
    padding: 12px 14px;
  }
}