/* v4.8: app-learning footer replaced with index footer
   Ensure: desktop 4 columns, mobile stacked */

/* Scope to footer only; be resilient to index footer class differences */
footer {
  background: #0b0f14;
  color: #f5f7fb;
}
footer a,
footer a:visited {
  color: #f5f7fb;
  text-decoration-color: rgba(245,247,251,.65);
}
footer a:hover,
footer a:focus {
  color: #c8ffdf;
}

/* Try to find the footer inner container and link columns */
footer .footer-inner,
footer .footer-container,
footer .footer-content,
footer .site-footer__inner,
footer .footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px;
}

/* 4-column grid on desktop for common patterns */
@media (min-width: 1024px) {
  footer .footer-grid,
  footer .footer-columns,
  footer .footer-nav,
  footer .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }
}

/* Stack on mobile */
@media (max-width: 767px) {
  footer .footer-grid,
  footer .footer-columns,
  footer .footer-nav,
  footer .footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Logo size safety (if logo exists) */
footer img {
  max-height: 24px;
  width: auto;
}

/* v4.9 CTA fix: keep text white on green button hover/focus */
/* Target common CTA patterns used on this site */
a.btn:hover,
a.btn:focus,
button.btn:hover,
button.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-cta:hover,
.btn-cta:focus,
.cta-button:hover,
.cta-button:focus,
.price-card a:hover,
.price-card a:focus,
.pricing a:hover,
.pricing a:focus,
#contact a:hover,
#contact a:focus {
  color: #ffffff !important;
}

/* If hover style uses border or background inversion, ensure contrast */
a.btn-primary:hover,
a.btn-primary:focus,
.btn-cta:hover,
.btn-cta:focus {
  text-decoration: none;
}

/* v4.9 footer readability improvements (index-style footer on app-learning) */
footer {
  font-size: 14px;
  line-height: 1.8;
}
footer h4,
footer .footer-title,
footer .footer-heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 10px;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer li + li {
  margin-top: 8px;
}
footer a {
  text-underline-offset: 3px;
}
footer a:hover,
footer a:focus {
  text-decoration: underline;
}
/* increase vertical padding a bit */
footer .footer-inner,
footer .footer-container,
footer .footer-content,
footer .site-footer__inner,
footer .footer-grid {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* =====================
   v5: polish pack
   - Desktop pricing 4 columns (with spacer)
   - Tablet spacing improvements
   - CTA consistency
   - Footer readability improvements
===================== */

@media (min-width: 1024px) {
  .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch;
  }
  .pricing-spacer {
    display: block;
    visibility: hidden;
  }
}

@media (max-width: 1023px) {
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  h2, h3 {
    margin-bottom: 14px;
  }
  p {
    line-height: 1.85;
  }
  ul li {
    line-height: 1.7;
  }
}

:root {
  --cta-radius: 10px;
  --cta-height: 48px;
  --cta-font: 16px;
}

a.btn,
button.btn,
.btn-primary,
.btn-cta,
.cta-button {
  border-radius: var(--cta-radius) !important;
  min-height: var(--cta-height);
  padding: 12px 18px;
  font-size: var(--cta-font);
  font-weight: 700;
  line-height: 1;
}

a.btn:hover,
a.btn:focus,
button.btn:hover,
button.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-cta:hover,
.btn-cta:focus,
.cta-button:hover,
.cta-button:focus {
  color: #ffffff !important;
}

footer {
  font-size: 14px;
  line-height: 1.9;
}
footer h4,
footer .footer-title,
footer .footer-heading {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 12px;
}
footer li + li { margin-top: 10px; }
footer a { text-decoration: none; }
footer a:hover,
footer a:focus {
  text-decoration: underline;
  text-underline-offset: 4px;
}
footer .footer-bottom,
footer .copyright,
footer .footer-copy {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(245,247,251,.18);
  font-size: 12px;
  opacity: .9;
}

/* =====================
   v5.1: desktop pricing visual-fix + footer font-size
   - Desktop: make 3 cards fill width using 12-col grid
   - Footer: font-size 15px
===================== */

@media (min-width: 1024px) {
  /* 12-column grid; 3 cards span 4 columns each */
  #plans .pricing-grid,
  .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch;
  }
  #plans .pricing-grid > .pricing-item,
  .pricing-grid > .pricing-item {
    grid-column: span 4;
  }
}

/* Tablet & mobile keep stacked */
@media (max-width: 1023px) {
  #plans .pricing-grid,
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Footer font-size up */
footer {
  font-size: 15px;
}

/* =====================
   v5.2: polish pack (1)(2)(3)
   1) Pricing card CTA bottom-align & consistent button row
   2) Tablet density baseline (768px)
   3) Footer readability upgrades
===================== */

/* (1) Pricing card CTA bottom-align
   Make each pricing card a column flex and push the CTA area to bottom.
   We use safe selectors: direct children of #plans .pricing-grid (pricing-item)
*/
@media (min-width: 768px) {
  #plans .pricing-grid > .pricing-item,
  .pricing-grid > .pricing-item {
    display: flex;
    flex-direction: column;
  }

  /* try common card bodies */
  #plans .pricing-grid > .pricing-item .plan-footer,
  #plans .pricing-grid > .pricing-item .card-footer,
  #plans .pricing-grid > .pricing-item .plan-actions,
  #plans .pricing-grid > .pricing-item .actions,
  #plans .pricing-grid > .pricing-item .btns,
  #plans .pricing-grid > .pricing-item .button-row,
  #plans .pricing-grid > .pricing-item .cta-row {
    margin-top: auto;
  }

  /* fallback: if there is no wrapper, anchor/buttons at the end should stick to bottom by giving them auto top margin */
  #plans .pricing-grid > .pricing-item a.btn,
  #plans .pricing-grid > .pricing-item .btn,
  #plans .pricing-grid > .pricing-item button {
    margin-top: 12px;
  }
}

/* Align two CTAs in pricing card (if two buttons exist) */
#plans .pricing-grid .btn-group,
#plans .pricing-grid .button-row,
#plans .pricing-grid .cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#plans .pricing-grid .btn-group > *,
#plans .pricing-grid .button-row > *,
#plans .pricing-grid .cta-row > * {
  flex: 1 1 160px;
}

/* (2) Tablet density baseline (aim 768px)
   Increase section spacing and harmonize typography without affecting desktop too much.
*/
@media (min-width: 700px) and (max-width: 900px) {
  main section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  h2 {
    margin-bottom: 16px;
  }
  h3 {
    margin-bottom: 12px;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* list readability */
  ul, ol {
    margin-top: 10px;
  }
  li {
    line-height: 1.75;
  }
}

/* (3) Footer readability upgrades */
footer {
  font-size: 15px; /* already requested */
}
@media (min-width: 1024px) {
  footer .footer-grid,
  footer .footer-columns,
  footer .footer-nav,
  footer .footer-links {
    gap: 32px;
  }
}
footer h4,
footer .footer-title,
footer .footer-heading {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
}
footer a {
  opacity: .95;
}
footer a:hover,
footer a:focus {
  opacity: 1;
}

/* =====================
   v5.3: HTML-assisted polish
   1) Pricing CTAs perfectly aligned
   2) Hero heading/CTA spacing + button width
   3) Footer hierarchy (stronger visual guidance)
===================== */

/* 1) Pricing: make cards equal-height and CTAs stick to bottom */
#plans .pricing-grid > .pricing-item,
#plans .pricing-grid > .pricing-card {
  display: flex;
  flex-direction: column;
}
#plans .pricing-features {
  margin-bottom: 16px;
}
#plans .pricing-ctas {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Button sizing inside pricing cards (allow smaller text as requested) */
#plans .pricing-ctas a {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 480px) {
  #plans .pricing-ctas {
    grid-template-columns: 1fr;
  }
  #plans .pricing-ctas a { font-size: 14px; }
}

/* 2) Hero: align heading + CTAs and normalize button widths */
#hero .hero-ctas,
.hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 10px;
}
#hero .hero-ctas a,
.hero .hero-ctas a {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
}
@media (min-width: 1024px) {
  #hero .hero-ctas a,
  .hero .hero-ctas a {
    min-width: 210px;
  }
}
@media (max-width: 767px) {
  #hero .hero-ctas a,
  .hero .hero-ctas a {
    width: 100%;
    justify-content: center;
  }
}

/* 3) Footer: stronger hierarchy and scanability */
footer {
  font-size: 15px;
}
footer h4,
footer .footer-title,
footer .footer-heading {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 14px;
}
footer ul li { line-height: 1.9; }
footer li + li { margin-top: 10px; }
footer a {
  opacity: .92;
}
footer a:hover,
footer a:focus {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Add subtle column separators on desktop if grid exists */
@media (min-width: 1024px) {
  footer .footer-grid > * {
    padding-right: 16px;
  }
}

/* =====================
   v5.4: Pricing CTA unify to Light plan style
   Goal: all plans use the same 2-CTA layout + typography sizing
===================== */

#plans .pricing-ctas {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Primary button in CTA row */
#plans .pricing-ctas a {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

/* If a CTA is a plain text link (secondary) -> make it look like Light plan's small helper text */
#plans .pricing-card > a:not(.btn):not(.btn-primary):not(.btn-cta),
#plans .pricing-card .pricing-ctas a:not(.btn):not(.btn-primary):not(.btn-cta) {
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}

@media (max-width: 480px) {
  #plans .pricing-ctas {
    grid-template-columns: 1fr;
  }
  #plans .pricing-ctas a {
    font-size: 14px;
    min-height: 48px;
  }
}

/* =====================
   v5.5: Fix Standard/Premium CTA mismatch
   - Enforce same CTA container layout across all 3 cards
===================== */

#plans .pricing-card { position: relative; }
#plans .pricing-ctas {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#plans .pricing-ctas a {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Helper link style (if any remains in card outside .pricing-ctas) */
#plans .pricing-card > a {
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}

@media (max-width: 480px) {
  #plans .pricing-ctas { grid-template-columns: 1fr; }
  #plans .pricing-ctas a { min-height: 48px; font-size: 14px; }
}