/* ==========================================================
   Scrively Design System Overrides
   Matches the Scrively SaaS application for brand consistency.
   Loaded AFTER home.css to override existing styles.
   ========================================================== */

/* ----------------------------------------------------------
   1. Base Typography & Page Background
   ---------------------------------------------------------- */

body,
html {
  font-family: "Inter", sans-serif;
  color: #4b5563;
  background: #f9fafb;
}

main {
  color: #4b5563;
}

p {
  font-family: "Inter", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.ff-poppins {
  font-family: "Poppins", sans-serif;
}

/* ----------------------------------------------------------
   2. Text Colors — match design system tokens
   ---------------------------------------------------------- */

.c-main-h {
  color: #1f2937;
}

.c-4B5572 {
  color: #4b5563;
}

.c-3C4556 {
  color: #1f2937;
}

/* ----------------------------------------------------------
   3. Header / Nav
   ---------------------------------------------------------- */

header {
  font-family: "Poppins", sans-serif;
}

header .btn-nav {
  font-weight: 600;
  color: #ffffff !important;
  transition: opacity 0.15s ease;
}

/* Subtle dark gradient overlay across the very top of the page —
   gives the white nav links enough contrast to read against light
   hero backgrounds without changing the link styling itself. The
   gradient fades gradually from rgba(0,0,0,0.35) at the top of the
   viewport to fully transparent ~100px down (just below the nav row).
   Scoped to pages where the header sits over a hero — fixed-top
   (home/fb/sample-books) and header-absolute (pricing). */
body:has(header.fixed-top)::before,
body:has(header.header-absolute)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.27) 12%,
    rgba(0, 0, 0, 0.19) 28%,
    rgba(0, 0, 0, 0.11) 46%,
    rgba(0, 0, 0, 0.055) 64%,
    rgba(0, 0, 0, 0.02) 80%,
    rgba(0, 0, 0, 0.005) 92%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 1029; /* just under Bootstrap's .fixed-top (1030) */
  transition: opacity 0.3s ease;
}

/* On pricing/terms the header is absolute — scrolls away with the
   page. Pin the overlay the same way so it scrolls out of view
   together with the header instead of lingering at the viewport top.
   Also force the absolute header to z-index: 1030 so its nav links
   stack ABOVE the overlay (Bootstrap's .fixed-top gets 1030 by
   default; .header-absolute doesn't, so we set it explicitly). */
body:has(header.header-absolute)::before {
  position: absolute;
}

header.header-absolute {
  z-index: 1030;
}

/* Once the nav becomes sticky on home/fb/sample-books, the dark teal
   header background already provides plenty of contrast, so fade out
   the gradient overlay rather than double-darkening. */
body:has(header.fixed-top.sticky)::before {
  opacity: 0;
}

/* On mobile, the hamburger menu opens a white panel covering the top
   of the viewport — the dark gradient under it would bleed through.
   Hide the overlay while the menu is open. */
@media (max-width: 991px) {
  body:has(.navbar-collapse.show)::before,
  body:has(.navbar-collapse.collapsing)::before {
    display: none;
  }
}

header .btn-cta-nav {
  border-radius: 12px;
  background: #166534;
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.35), 0 4px 6px -1px rgba(22, 101, 52, 0.25);
  font-weight: 600;
  font-size: 16px;
  transition: all 0.15s ease;
}

header .btn-cta-nav::before {
  border-radius: 12px;
  background: #14532d;
}

header .btn-cta-nav:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.45), 0 10px 15px -3px rgba(22, 101, 52, 0.25);
}

header .btn-signIn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 41px;
  padding: 0 16px;
  border: 2px solid #ffffff;
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff !important;
  background: transparent;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

header .btn-signIn:hover,
header .btn-signIn:focus {
  background: #ffffff;
  color: #166534 !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.15),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

header .btn-signIn:active {
  transform: scale(0.97);
}

/* Sticky header background — keep original warm gradient */

/* ----------------------------------------------------------
   4. CTA Buttons
   ---------------------------------------------------------- */

.btn-cta {
  border-radius: 12px;
  background: #166534;
  box-shadow: 0 4px 6px -1px rgba(22, 101, 52, 0.25);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.15s ease;
}

.btn-cta::before {
  border-radius: 12px;
  background: #14532d;
}

.btn-cta:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 15px -3px rgba(22, 101, 52, 0.25);
}

/* Secondary / View Sample Button */
.btn-view-sample {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: #4b5563;
  transition: all 0.15s ease;
}

.btn-view-sample:hover {
  background: #f9fafb;
  color: #374151;
}

/* ----------------------------------------------------------
   5. Green Gradient Text
   ---------------------------------------------------------- */

.c-lg-text {
  background: linear-gradient(90deg, #22c55e 0%, #166534 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------
   6. Section Backgrounds
   ---------------------------------------------------------- */

/* Alternating light sections — use green-soft instead of blue */
.b-ECF3FF {
  background: #f0fdf4;
}

/* Bottom CTA section — green-tinted gradient */
.section-cta {
  background: linear-gradient(110deg, #f0fdf4 16.47%, #f9fafb 48.5%, #dcfce7 83.09%);
}

/* Fixed CTA bar at bottom (mobile) — match design system */
.w-fit-fixed {
  background: rgba(255, 255, 255, 0.85);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(249, 250, 251, 0.95) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(229, 231, 235, 0.5);
  border-bottom: none;
}

.w-fit-fixed .c-main-h {
  color: #1f2937;
}

/* Art Styles section container */
#threshold {
  background: #f0fdf4;
  border-radius: 0;
  padding-top: 56px;
  padding-bottom: 56px;
  margin-bottom: 0 !important;
}

#threshold .anchor-style-variations picture:last-child img {
  margin-bottom: 0 !important;
}

/* Style-variations images — soften label colors, add polish */
.anchor-style-variations img {
  filter: saturate(0.85) brightness(1.03);
  transition: filter 0.3s ease;
}

.anchor-style-variations:hover img {
  filter: saturate(1) brightness(1);
}

/* Style-variations edge fade — match section background */
.anchor-style-variations::before {
  background: linear-gradient(
    to right,
    #f0fdf4 0%,
    #f0fdf4 50%,
    #f0fdf4 95%,
    rgba(240, 253, 244, 0) 100%
  );
}

.anchor-style-variations::after {
  background: linear-gradient(
    to left,
    #f0fdf4 0%,
    #f0fdf4 50%,
    #f0fdf4 95%,
    rgba(240, 253, 244, 0) 100%
  );
}

/* ----------------------------------------------------------
   7. Accent Dots — Unified to brand green
   ---------------------------------------------------------- */

.c-1CBA71,
.c-5A24F0,
.c-FF9500,
.c-46C9AB,
.c-CB0606,
.c-FF00FF,
.c-FC4F4F,
.c-FF4C00,
.c-00C642,
.c-0058FF {
  color: #166534;
}

/* ----------------------------------------------------------
   8. Testimonial Swiper
   ---------------------------------------------------------- */

.swiper-slide .ratio {
  border-radius: 16px;
}

.swiper-button-next,
.swiper-button-prev {
  opacity: 0.85;
  transition: all 0.15s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* ----------------------------------------------------------
   9. Footer
   ---------------------------------------------------------- */

footer {
  background: #ffffff;
  color: #4b5563;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
}

footer a {
  color: #4b5563 !important;
}

footer .footer-top p.fw-bold {
  color: #1f2937;
}

/* ----------------------------------------------------------
   10. Check marks next to "No signup" etc.
   ---------------------------------------------------------- */

p.g-check {
  color: #374151;
}

p.g-check::before {
  background: url("../images/home/purple-check.svg") !important;
  width: 21px;
  height: 21px;
}

/* ----------------------------------------------------------
   11. General Transitions
   ---------------------------------------------------------- */

a,
button,
.btn-cta,
.btn-view-sample,
.btn-cta-nav,
.btn-nav {
  transition: all 0.15s ease;
}

/* ----------------------------------------------------------
   12. Image Comparison Slider — border radius
   ---------------------------------------------------------- */

.img-comp-img:not(.img-comp-overlay) img {
  border-radius: 16px;
}

/* ----------------------------------------------------------
   13. Hardcover Section — keep dark background as-is,
       but ensure text stays white/readable
   ---------------------------------------------------------- */

.section-hardcover.c-white h3,
.section-hardcover.c-white p {
  font-family: "Inter", sans-serif;
}

.section-hardcover.c-white h3 {
  font-family: "Poppins", sans-serif;
}

/* ----------------------------------------------------------
   14. "One click away" section
   ---------------------------------------------------------- */

.s-one-click-away {
  color: #ffffff;
}

.s-one-click-away h3,
.s-one-click-away p {
  color: #ffffff;
}

/* ----------------------------------------------------------
   15. Mobile hamburger icon — green instead of purple
   ---------------------------------------------------------- */

#nav-icon3 span {
  background: #166534;
}

@media screen and (max-width: 991px) {
  header #nav-icon3 span {
    background: #1f2937;
  }
}

/* ----------------------------------------------------------
   16. Mobile bottom bar overlay text
   ---------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .wrapper-hero .w-fit-mb-up .c-main-h {
    color: #ffffff;
  }
}

/* ----------------------------------------------------------
   17. Bottom CTA Text Area
   ---------------------------------------------------------- */

.cta-headline {
  font-size: 3.25rem;
  font-size: clamp(2.5rem, 2.1rem + 2vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cta-highlight {
  color: #166534;
  position: relative;
}

.cta-highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 6px;
  background: #dcfce7;
  border-radius: 3px;
  z-index: -1;
}

.cta-subtitle {
  color: #6b7280;
  letter-spacing: 0.01em;
}

.cta-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #166534);
  border-radius: 2px;
}

/* ----------------------------------------------------------
   18. Scroll Fade-In Sections
   ---------------------------------------------------------- */

.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children within a row for a cascading effect */
.fade-in-section .col-lg-6 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.visible .col-lg-6:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.fade-in-section.visible .col-lg-6:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

/* ==========================================================
   PRICING PAGE OVERRIDES
   ========================================================== */

/* ----------------------------------------------------------
   P0. Pricing — Header wrapper must match home page
   ---------------------------------------------------------- */

.header-absolute .wrapper-header {
  max-width: 1160px;
}

/* ----------------------------------------------------------
   P1. Pricing — Plan Cards
   ---------------------------------------------------------- */

.section-pricing .plan {
  border-radius: 16px;
}

.section-pricing .plan-1,
.section-pricing .plan-2 {
  border-radius: 16px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.section-pricing .plan-3 {
  border-radius: 16px;
}

.section-pricing .plan .plan-top .headline {
  border-radius: 16px 16px 0 0;
}

.section-pricing .plan .plan-top .headline-1 {
  background: #f0fdf4;
  border: 1px solid rgba(229, 231, 235, 0.5);
}

.section-pricing .plan .plan-top .headline-2 {
  background: linear-gradient(90deg, #dcfce7 0%, #f0fdf4 100%);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

.section-pricing .plan .plan-top .headline-2 .banner {
  background: linear-gradient(86deg, #166534 2.3%, #22c55e 100%);
  border-radius: 0 0 12px 12px;
}

.section-pricing .btn-cta {
  border-radius: 12px;
  background: #166534;
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.35), 0 4px 6px -1px rgba(22, 101, 52, 0.25);
  padding-left: 56px;
  white-space: nowrap;
}

.section-pricing .btn-cta::before {
  border-radius: 12px;
  background: #14532d;
}

.section-pricing .btn-cta:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.45), 0 10px 15px -3px rgba(22, 101, 52, 0.25);
}

.section-pricing .plan-1 .btn-cta {
  background: #374151;
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.35), 0 4px 6px -1px rgba(55, 65, 81, 0.25);
}

.section-pricing .plan-1 .btn-cta::before {
  background: #1f2937;
}

.section-pricing .plan-1 .btn-cta:hover {
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.45), 0 10px 15px -3px rgba(55, 65, 81, 0.25);
}

/* Annual pricing — add gap between price elements */
.section-pricing .price {
  gap: 6px;
  flex-wrap: wrap;
}

/* Plus price color */
.c-4370B5 {
  color: #166534;
}

/* Pro accent color */
.c-54C4A7 {
  color: #22c55e;
}

/* ----------------------------------------------------------
   P2. Pricing — Toggle (sliding pill)
   ---------------------------------------------------------- */

.toggle-billing-method {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  position: relative !important;
  background: #fff !important;
  padding: 5px !important;
  box-shadow: none !important;
}

.toggle-billing-method .nav-link,
.toggle-billing-method .nav-link.active,
.toggle-billing-method .nav-link:hover,
.toggle-billing-method .nav-link:focus,
.toggle-billing-method .nav-link:active {
  border-radius: 10px !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  padding: 12px 28px !important;
  margin-bottom: 0 !important;
  width: 50% !important;
  text-align: center !important;
}

.toggle-billing-method .nav-link {
  color: #4b5563 !important;
  transition: color 0.3s ease !important;
}

.toggle-billing-method .nav-link.active,
.toggle-billing-method .nav-link.active:hover,
.toggle-billing-method .nav-link.active:focus {
  color: #fff !important;
}

.toggle-billing-method .nav-link:hover {
  color: #1f2937 !important;
}

.toggle-billing-method .nav-link::before,
.toggle-billing-method .nav-link.active::before,
.toggle-billing-method .nav-link:hover::before,
.toggle-billing-method .nav-link:focus::before,
.toggle-billing-method .nav-link.active:hover::before,
.toggle-billing-method .nav-link.active:focus::before,
.toggle-billing-method .nav-link.active:focus-visible::before {
  display: none !important;
  opacity: 0 !important;
}

.toggle-billing-method .toggle-pill {
  position: absolute;
  top: 5px;
  left: 5px;
  height: calc(100% - 10px);
  width: calc(50% - 5px);
  background: #166534;
  border-radius: 10px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 2px 4px rgba(22, 101, 52, 0.2);
  pointer-events: none;
}

.toggle-billing-method .toggle-pill.annual {
  transform: translateX(100%);
}

/* ----------------------------------------------------------
   P3. Pricing — One-Time Purchase Cards
   ---------------------------------------------------------- */

.oto {
  border-radius: 16px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.section-o-t-p .btn-cta {
  border-radius: 12px;
  background: #166534;
  box-shadow: 0 4px 6px -1px rgba(22, 101, 52, 0.25);
  padding-left: 56px;
}

.section-o-t-p .btn-cta::before {
  border-radius: 12px;
  background: #14532d;
}

/* ----------------------------------------------------------
   P4. Pricing — FAQ Accordion
   ---------------------------------------------------------- */

.accordion-flush .accordion-item {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

.accordion-flush .accordion-header .accordion-button {
  border-radius: 12px;
  color: #1f2937;
  font-family: "Poppins", sans-serif;
}

.accordion-flush .accordion-header .accordion-button:not(.collapsed) {
  color: #1f2937;
}

/* ----------------------------------------------------------
   P5. Pricing — Bottom CTA
   ---------------------------------------------------------- */

.section-cta .btn-cta {
  border-radius: 12px;
  background: #166534;
  box-shadow: 0 4px 6px -1px rgba(22, 101, 52, 0.25);
}

.section-cta .btn-cta::before {
  border-radius: 12px;
  background: #14532d;
}

/* ----------------------------------------------------------
   P6. Pricing — Accent Colors
   ---------------------------------------------------------- */

.c-66C334 {
  color: #166534;
}

.c-F48AE9 {
  color: #166534;
}

.c-333A4F {
  color: #1f2937;
}

/* ----------------------------------------------------------
   P7. Pricing — Section backgrounds
   ---------------------------------------------------------- */

.section-o-t-p.b-ECF3FF,
.section-faq.b-ECF3FF {
  background: #f0fdf4;
}

.section-cta {
  background: linear-gradient(110deg, #f0fdf4 16.47%, #f9fafb 48.5%, #dcfce7 83.09%);
}

@media screen and (min-width: 992px) {
  .section-cta .wrapper-large::before {
    left: -148px !important;
  }
  .section-cta .wrapper-large::after {
    right: -152px !important;
  }
}

/* ----------------------------------------------------------
   P8. Pricing — Checkmarks
   ---------------------------------------------------------- */

.section-pricing .check,
.section-o-t-p .check {
  background-image: url("../images/home/purple-check.svg");
  background-size: 18px 18px;
  background-position: left 2px;
  background-repeat: no-repeat;
}

/* Pricing page g-check purple */
p.g-check::before {
  background: url("../images/home/purple-check.svg") !important;
  width: 21px;
  height: 21px;
}

/* "No credit card needed" badge */
.no-credit-card-wrap {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 49px;
  padding-bottom: 0;
}

/* Pro column CTA gets +4px bottom margin to compensate for the
   shorter fs-15px "Best for serious creators." tagline above it,
   so its HR aligns with the Plus column's HR. */
.section-pricing .plan-3 .plan-top .btn-cta {
  margin-bottom: 16px !important;
}

.no-credit-card-badge {
  display: inline-flex;
  align-items: center;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #dcfce7;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.no-credit-card-badge svg {
  display: block;
}

/* ==========================================================
   MOBILE OPTIMIZATION
   ========================================================== */

/* ----------------------------------------------------------
   M1. Pricing hero (mobile)
   ---------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .section-hero.c-white {
    padding-top: 120px;
    padding-bottom: 320px;
  }

  .section-hero h1 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .section-hero h2 {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 18px !important;
  }
}

/* ----------------------------------------------------------
   M2. Monthly/Annual toggle (mobile)
   ---------------------------------------------------------- */

@media screen and (max-width: 575px) {
  .toggle-billing-method {
    width: 260px !important;
  }

  .toggle-billing-method .nav-link,
  .toggle-billing-method .nav-link.active {
    padding: 10px 20px !important;
    font-size: 15px !important;
  }

  .toggle-with-save::before,
  .toggle-billing-method::before {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   M3. Plan cards (mobile)
   ---------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .section-pricing {
    top: -350px;
  }

  .section-pricing .plan .plan-top .content {
    padding: 28px 24px 24px !important;
  }

  .section-pricing .plan .plan-bottom {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
  }

  .section-pricing .plan .plan-top .headline {
    padding: 18px 24px !important;
  }

  /* Pro plan on mobile — hide the hover image since it doesn't show anyway */
  .section-pricing .plan-3::before {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  .section-pricing .plan .price {
    gap: 6px;
    flex-wrap: wrap;
  }

  /* Price layout on narrow screens — keep strikethrough on one line */
  .section-pricing .plan .price .fs-50px {
    font-size: 40px !important;
  }

  .section-pricing .btn-cta {
    padding-left: 48px;
    padding-right: 72px;
    font-size: 16px;
  }
}

/* ----------------------------------------------------------
   M4. OTP (one-time purchase) cards (mobile)
   ---------------------------------------------------------- */

@media screen and (max-width: 575px) {
  .oto {
    padding: 24px !important;
    padding-top: 24px !important;
  }

  .section-o-t-p .oto-1,
  .section-o-t-p .oto-2,
  .section-o-t-p .oto-3 {
    padding-top: 24px !important;
  }
}

/* ----------------------------------------------------------
   M5. FAQ accordion (mobile)
   ---------------------------------------------------------- */

@media screen and (max-width: 575px) {
  .accordion-flush .accordion-header .accordion-button {
    font-size: 17px !important;
    padding-left: 20px !important;
    padding-right: 56px !important;
  }

  .accordion-flush .accordion-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .accordion-flush .accordion-header .accordion-button::after {
    right: 16px !important;
  }
}

/* ----------------------------------------------------------
   M6. Bottom CTA section (mobile)
   ---------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .section-cta .wrapper-large::before,
  .section-cta .wrapper-large::after {
    display: none !important;
  }

  .section-cta .wrapper-large {
    height: auto !important;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media screen and (max-width: 575px) {
  .cta-headline {
    font-size: 2.25rem !important;
  }
}

/* ----------------------------------------------------------
   M7. Section cover (printed hardcover callout) on mobile
   ---------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .section-cover {
    height: auto !important;
    padding: 32px 24px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 16px;
  }

  .section-cover::before {
    display: none !important;
  }

  .section-cover .btn-cta {
    max-width: 100% !important;
  }
}

/* ----------------------------------------------------------
   M8. Sign In / Nav links on mobile
   ---------------------------------------------------------- */

@media screen and (max-width: 991px) {
  header .btn-nav {
    color: #1f2937;
  }

  /* Mobile menu: dark text on white collapsible menu (but leave the
     outlined Sign In button alone — it owns its own colors). */
  .navbar-collapse.show .btn-nav:not(.btn-signIn),
  .navbar-collapse.collapsing .btn-nav:not(.btn-signIn) {
    color: #1f2937 !important;
  }

  /* Inside the white mobile dropdown, swap the white outlined Sign In
     button to a green outlined version so it's visible. */
  .navbar-collapse.show .btn-signIn,
  .navbar-collapse.collapsing .btn-signIn {
    border-color: #166534 !important;
    color: #166534 !important;
  }
  .navbar-collapse.show .btn-signIn:hover,
  .navbar-collapse.show .btn-signIn:focus,
  .navbar-collapse.collapsing .btn-signIn:hover,
  .navbar-collapse.collapsing .btn-signIn:focus {
    background: #166534 !important;
    color: #ffffff !important;
  }

  /* When the mobile menu is open, turn the whole header into a single
     white panel so the tan hero gradient isn't visible behind the
     logo row or around the menu items. */
  header.fixed-top:has(.navbar-collapse.show),
  header.fixed-top:has(.navbar-collapse.collapsing) {
    background: #ffffff !important;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }

  /* Panel flows flush inside the now-white header — no separate card. */
  header .navbar-collapse.show,
  header .navbar-collapse.collapsing {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding: 8px 20px 24px !important;
  }
}

/* ----------------------------------------------------------
   M9. No credit card badge (mobile)
   ---------------------------------------------------------- */

@media screen and (max-width: 575px) {
  .no-credit-card-badge {
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* ----------------------------------------------------------
   M10. Home page mobile fixes
   ---------------------------------------------------------- */

@media screen and (max-width: 767px) {
  /* Art styles green section — reduce padding on mobile */
  #threshold {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Ensure buttons don't overflow on narrow screens */
  .btn-cta,
  .btn-view-sample {
    max-width: 100%;
  }
}

/* ----------------------------------------------------------
   M11. Body horizontal overflow prevention
   ---------------------------------------------------------- */

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}