/* ==========================================================================
   KeepMyBill - public pages (home, pricing, login, register, contact)
   Loaded only where it is needed, via $PAGE_CSS.
   ========================================================================== */

/* Public top navigation ------------------------------------------------ */
.public-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  /* Must not wrap: the top bar is a fixed 60px and wrapped buttons spilled out
     over the page on narrow screens. */
  flex-wrap: nowrap;
}
.public-nav__link {
  padding: .45rem .8rem;
  border-radius: var(--kmb-radius-sm);
  color: var(--kmb-ink-soft);
  font-size: .9rem;
  font-weight: 500;
}
.public-nav__link:hover { background: var(--kmb-surface-3); color: var(--kmb-brand-700); text-decoration: none; }
.public-nav__link.is-active { color: var(--kmb-brand-700); background: var(--kmb-brand-50); }

/* Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) 0;
  background:
    radial-gradient(110% 80% at 88% 6%, rgba(99, 102, 241, .28), transparent 60%),
    linear-gradient(150deg, var(--kmb-plum-700) 0%, var(--kmb-plum-900) 62%, #180f1d 100%);
  color: #fff;
}
.hero h1 {
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.7rem);
  line-height: 1.3;
  margin-bottom: 1rem;
}
.hero__lead {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.98rem, .94rem + .2vw, 1.1rem);
  line-height: 1.7;
  max-width: 36rem;
}
.hero__list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.hero__list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: rgba(255, 255, 255, .86);
  font-size: .95rem;
  line-height: 1.55;
}
.hero__list i {
  flex: 0 0 1.6rem;
  width: 1.6rem; height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .12rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #c7d2fe;
  font-size: .78rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.8rem; }
.hero__media { position: relative; }
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--kmb-radius-lg);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  margin-bottom: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #e0e7ff;
  font-size: .8rem;
  font-weight: 500;
}

/* Section scaffolding -------------------------------------------------- */
.section { padding: clamp(2.5rem, 2rem + 2.5vw, 4rem) 0; }
.section--muted { background: var(--kmb-surface-3); }
.section__head { max-width: 44rem; margin: 0 auto clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); text-align: center; }
.section__eyebrow {
  display: block;
  margin-bottom: .5rem;
  color: var(--kmb-brand-600);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.section__title { margin: 0 0 .65rem; }
.section__lead { margin: 0; color: var(--kmb-ink-muted); font-size: 1rem; line-height: 1.7; }

/* Feature cards ------------------------------------------------------- */
.feature {
  height: 100%;
  padding: 1.5rem;
  background: var(--kmb-surface);
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius);
  box-shadow: var(--kmb-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--kmb-brand-200);
  box-shadow: var(--kmb-shadow);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 1rem;
  border-radius: var(--kmb-radius);
  background: var(--kmb-brand-50);
  color: var(--kmb-brand-600);
  font-size: 1.4rem;
}
.feature__title { margin: 0 0 .5rem; font-size: 1.03rem; }
.feature__text { margin: 0; color: var(--kmb-ink-muted); font-size: .9rem; line-height: 1.65; }

/* Per-feature icon tints, so the row reads as a set rather than a rainbow. */
.feature--a .feature__icon { background: var(--kmb-info-bg);    color: var(--kmb-info); }
.feature--b .feature__icon { background: var(--kmb-surface-3);  color: var(--kmb-ink-soft); }
.feature--c .feature__icon { background: var(--kmb-danger-bg);  color: var(--kmb-danger); }
.feature--d .feature__icon { background: var(--kmb-brand-50);   color: var(--kmb-brand-600); }
.feature--e .feature__icon { background: var(--kmb-warning-bg); color: var(--kmb-warning); }
.feature--f .feature__icon { background: var(--kmb-success-bg); color: var(--kmb-success); }

/* Testimonial --------------------------------------------------------- */
.quote {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  background: var(--kmb-surface);
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius-lg);
  box-shadow: var(--kmb-shadow-sm);
}
.quote__logo {
  display: block;
  width: 68px; height: 68px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  object-fit: contain;
  background: var(--kmb-surface-3);
  padding: .45rem;
}
/* The <picture> wrapper must not break the centring of the logo inside it. */
.quote picture { display: block; }
.quote__text { font-size: 1.02rem; line-height: 1.75; color: var(--kmb-ink-soft); margin: 0 0 .9rem; }
.quote__author { font-size: .88rem; font-weight: 600; color: var(--kmb-ink); margin: 0; }

/* Pricing ------------------------------------------------------------- */
.plan {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--kmb-surface);
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius-lg);
  box-shadow: var(--kmb-shadow-sm);
}
.plan--featured {
  border-color: var(--kmb-brand-400);
  box-shadow: 0 0 0 3px var(--kmb-brand-50), var(--kmb-shadow);
}
.plan__ribbon {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--kmb-brand-600);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
}
.plan__name { margin: 0 0 .2rem; font-size: 1.05rem; }
.plan__price { display: flex; align-items: baseline; gap: .35rem; margin: .6rem 0 .2rem; }
.plan__amount { font-size: 2.1rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__period { color: var(--kmb-ink-muted); font-size: .9rem; }
.plan__avg { color: var(--kmb-brand-700); font-size: .88rem; font-weight: 500; margin: 0 0 1.1rem; }
.plan__highlight {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .8rem .9rem;
  margin-bottom: 1.1rem;
  border-radius: var(--kmb-radius-sm);
  background: var(--kmb-surface-3);
  font-size: .9rem;
  font-weight: 500;
}
.plan__highlight span { display: flex; align-items: center; gap: .5rem; }
.plan__highlight i { color: var(--kmb-brand-600); width: 1.1rem; text-align: center; }
.plan__features { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; flex: 1 1 auto; }
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--kmb-ink-soft);
}
.plan__features i { color: var(--kmb-success); margin-top: .22rem; font-size: .82rem; flex: 0 0 auto; }
.plan__note { font-size: .78rem; color: var(--kmb-ink-muted); margin: .8rem 0 0; }

/* Auth pages ----------------------------------------------------------- */
.auth-wrap { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) 0; }
.auth-card {
  width: 100%;
  max-width: 27rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--kmb-surface);
  border: 1px solid var(--kmb-border);
  border-radius: var(--kmb-radius-lg);
  box-shadow: var(--kmb-shadow);
}
.auth-card--wide { max-width: 34rem; }
.auth-card__head { text-align: center; margin-bottom: 1.5rem; }
.auth-card__head h1 { font-size: 1.35rem; margin: 0 0 .35rem; }
.auth-card__head p { margin: 0; color: var(--kmb-ink-muted); font-size: .88rem; }
.auth-card__logo { height: 42px; width: auto; margin-bottom: 1rem; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.4rem 0;
  color: var(--kmb-ink-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--kmb-border); }

/* Password field with a reveal button */
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.75rem; }
.password-field__toggle {
  position: absolute;
  top: 50%; right: .3rem;
  transform: translateY(-50%);
  width: 2.1rem; height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kmb-ink-muted);
}
.password-field__toggle:hover { background: var(--kmb-surface-3); color: var(--kmb-brand-700); }

/* Trial promo card ----------------------------------------------------- */
.promo {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--kmb-brand-200);
  border-radius: var(--kmb-radius);
  background: var(--kmb-brand-50);
}
.promo__icon { color: var(--kmb-brand-600); font-size: 1.3rem; margin-top: .1rem; }
.promo__title { margin: 0 0 .2rem; font-size: .98rem; color: var(--kmb-brand-800); }
.promo__text { margin: 0; font-size: .86rem; color: var(--kmb-ink-soft); line-height: 1.6; }

/* Narrow screens: shrink the public top bar so brand + both calls to action
   fit on one line at 360px. */
@media (max-width: 575.98px) {
  .public-nav .btn {
    --bs-btn-padding-x: .55rem;
    --bs-btn-padding-y: .35rem;
    font-size: .8rem;
    white-space: nowrap;
  }
  .app-brand span { font-size: .95rem; }
  .app-brand img { height: 26px; }
}