/**
 * home-polish-v1.css
 * ------------------
 * Chunk VIS-1p.1 — Home polish stylesheet (part 1 of 3)
 * Chunk VIS-1p.2 — Home polish stylesheet (part 2 of 3) — §11–18 appended
 * Chunk VIS-1p.3 — Home polish stylesheet (part 3 of 3) — §19–24 appended
 *
 * Purpose: First-pass visual polish layer for the landing/home page.
 * Scoped to `.landing-*` selectors used in src/Views/home.php so these
 * rules cannot accidentally restyle app-interior pages.
 *
 * Sections (VIS-1p.1):
 *   1. Design tokens (CSS custom properties)
 *   2. Scoped homepage base styles
 *   3. Hero polish baseline
 *   4. Card / grid polish baseline
 *   5. CTA / button polish baseline
 *   6. Responsive breakpoints (992px, 768px)
 *   7. Accessibility: focus-visible treatment
 *   8. Accessibility: busy / double-submit guard
 *   9. Accessibility: smooth-scroll (motion-allowed)
 *  10. Accessibility: reduced-motion safety
 *
 * Sections (VIS-1p.2):
 *  11. Navigation bar polish
 *  12. Hero layout & media completion
 *  13. Social-proof stat block
 *  14. Pricing section polish
 *  15. CTA section polish
 *  16. Section-scoped button harmonisation (large variant + context overrides)
 *  17. Responsive tuning expansion (992px / 768px / 480px for new sections)
 *  18. Reduced-motion safety additions (VIS-1p.2 additions)
 *
 * Sections (VIS-1p.3):
 *  19. Social-proof stat completion
 *  20. Pricing card detail completion
 *  21. CTA form + reassurance row completion
 *  22. Interaction / focus-visible hardening
 *  23. Responsive edge-case tuning
 *  24. Accessibility + print final safety
 */

/* ═══════════════════════════════════════════════════════════════════════ */
/* §1  Design tokens — CSS custom properties                              */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Defined in :root so they are available throughout the landing page cascade.
 * These supplement (not override) tokens set in design-tokens.css / main.css.
 * Fallback values are set in case the parent stylesheet does not define them.
 */
:root {
  /* Brand palette */
  --hp-color-primary:        var(--color-primary, #1a73e8);
  --hp-color-primary-dark:   var(--color-primary-dark, #1558b0);
  --hp-color-primary-light:  var(--color-primary-light, #d2e3fc);
  --hp-color-accent:         var(--color-accent, #34a853);

  /* Neutral text */
  --hp-color-text:           var(--color-text, #202124);
  --hp-color-text-muted:     var(--color-text-muted, #5f6368);
  --hp-color-text-light:     var(--color-text-light, #80868b);

  /* Backgrounds */
  --hp-color-surface:        var(--color-surface, #ffffff);
  --hp-color-surface-alt:    var(--color-surface-alt, #f8f9fa);

  /* Borders */
  --hp-color-border:         var(--color-border, #dadce0);
  --hp-border-radius-sm:     4px;
  --hp-border-radius-md:     8px;
  --hp-border-radius-lg:     12px;

  /* Shadows — soft elevation layers */
  --hp-shadow-card:          0 1px 3px rgba(60, 64, 67, 0.10), 0 2px 8px rgba(60, 64, 67, 0.08);
  --hp-shadow-card-hover:    0 4px 12px rgba(60, 64, 67, 0.15), 0 6px 20px rgba(60, 64, 67, 0.10);

  /* Spacing scale (multiples of 8 px) */
  --hp-space-xs:  4px;
  --hp-space-sm:  8px;
  --hp-space-md:  16px;
  --hp-space-lg:  24px;
  --hp-space-xl:  40px;
  --hp-space-2xl: 64px;

  /* Transitions */
  --hp-transition-fast:   150ms ease;
  --hp-transition-normal: 250ms ease;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §2  Scoped homepage base styles                                        */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Typography rhythm and section spacing scoped to `.landing-*` blocks
 * so app-interior views are unaffected.
 */

/* Section rhythm — consistent vertical breathing room */
.landing-hero,
.landing-features,
.landing-proof,
.landing-pricing,
.landing-testimonials,
.landing-cta-band {
  padding-block: var(--hp-space-2xl, 64px);
}

/* Alternating surface for visual separation between sections */
.landing-features,
.landing-testimonials {
  background-color: var(--hp-color-surface-alt, #f8f9fa);
}

/* Inner containers — max-width gutter */
.landing-hero__inner,
.landing-features__inner,
.landing-proof__inner,
.landing-section-inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--hp-space-lg, 24px);
}

/* Section title / subtitle rhythm */
.landing-section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--hp-color-text, #202124);
  margin-block-end: var(--hp-space-sm, 8px);
}

.landing-section-sub {
  font-size: 1.0625rem;
  color: var(--hp-color-text-muted, #5f6368);
  margin-block-end: var(--hp-space-xl, 40px);
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §3  Hero polish baseline                                               */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Eyebrow label above headline */
.landing-hero__eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-color-primary, #1a73e8);
  margin-block-end: var(--hp-space-sm, 8px);
}

/* Primary headline — strong visual weight, tight line-height */
.landing-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hp-color-text, #202124);
  margin-block-end: var(--hp-space-md, 16px);
}

/* Subtitle — readable contrast, not competing with headline */
.landing-hero__sub {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--hp-color-text-muted, #5f6368);
  max-width: 520px;
  margin-block-end: var(--hp-space-lg, 24px);
}

/* CTA cluster — give it room to breathe */
.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-space-md, 16px);
  align-items: center;
  margin-block-start: var(--hp-space-lg, 24px);
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §4  Card / grid polish baseline                                        */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Feature card list — no bullet points, consistent spacing */
.landing-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--hp-space-lg, 24px);
}

/* Individual card */
.landing-card {
  background: var(--hp-color-surface, #ffffff);
  border: 1px solid var(--hp-color-border, #dadce0);
  border-radius: var(--hp-border-radius-md, 8px);
  padding: var(--hp-space-lg, 24px);
  box-shadow: var(--hp-shadow-card);
  transition:
    box-shadow var(--hp-transition-normal, 250ms ease),
    transform   var(--hp-transition-normal, 250ms ease);
  /* Contain hover lift within a stacking context */
  will-change: transform;
}

/* Hover lift — subtle elevation increase */
.landing-card:hover {
  box-shadow: var(--hp-shadow-card-hover);
  transform: translateY(-2px);
}

/* Card icon container — consistent size, color */
.landing-card__icon {
  font-size: 1.75rem;
  line-height: 1;
  margin-block-end: var(--hp-space-md, 16px);
  color: var(--hp-color-primary, #1a73e8);
}

/* Card title */
.landing-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hp-color-text, #202124);
  margin-block-end: var(--hp-space-sm, 8px);
}

/* Card body copy */
.landing-card__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hp-color-text-muted, #5f6368);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §5  CTA / button polish baseline                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Base landing button */
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-xs, 4px);
  padding: 0.6875rem var(--hp-space-lg, 24px);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--hp-border-radius-sm, 4px);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background-color var(--hp-transition-fast, 150ms ease),
    color            var(--hp-transition-fast, 150ms ease),
    border-color     var(--hp-transition-fast, 150ms ease),
    box-shadow       var(--hp-transition-fast, 150ms ease);
  white-space: nowrap;
}

/* Primary variant — brand fill */
.landing-btn--primary {
  background-color: var(--hp-color-primary, #1a73e8);
  color: #ffffff;
  border-color: var(--hp-color-primary, #1a73e8);
}

.landing-btn--primary:hover {
  background-color: var(--hp-color-primary-dark, #1558b0);
  border-color: var(--hp-color-primary-dark, #1558b0);
  color: #ffffff;
}

/* Accessible focus-visible ring (WCAG 2.1 AA) */
.landing-btn:focus-visible {
  outline: 3px solid var(--hp-color-primary, #1a73e8);
  outline-offset: 3px;
}

/* Small variant */
.landing-btn--sm {
  padding: 0.4375rem var(--hp-space-md, 16px);
  font-size: 0.875rem;
}

/* Secondary / outline variant */
.landing-btn--outline {
  background-color: transparent;
  color: var(--hp-color-primary, #1a73e8);
  border-color: var(--hp-color-primary, #1a73e8);
}

.landing-btn--outline:hover {
  background-color: var(--hp-color-primary-light, #d2e3fc);
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §6  Responsive breakpoints                                             */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── 992px — tablet landscape / small desktop ──────────────────────── */
@media (max-width: 992px) {
  .landing-hero,
  .landing-features,
  .landing-proof,
  .landing-pricing,
  .landing-testimonials,
  .landing-cta-band {
    padding-block: 48px;
  }

  .landing-features__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--hp-space-md, 16px);
  }

  .landing-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
}

/* ── 768px — tablet portrait / large phone ─────────────────────────── */
@media (max-width: 768px) {
  .landing-hero,
  .landing-features,
  .landing-proof,
  .landing-pricing,
  .landing-testimonials,
  .landing-cta-band {
    padding-block: 36px;
  }

  .landing-hero__inner,
  .landing-features__inner,
  .landing-proof__inner,
  .landing-section-inner {
    padding-inline: var(--hp-space-md, 16px);
  }

  .landing-hero__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .landing-hero__sub {
    font-size: 1rem;
    max-width: 100%;
  }

  .landing-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-features__grid {
    grid-template-columns: 1fr;
  }

  .landing-section-title {
    font-size: 1.375rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §7  Focus-visible treatment                                            */
/* ═══════════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--color-primary, #1a73e8);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §8  Busy / double-submit guard state                                   */
/* ═══════════════════════════════════════════════════════════════════════ */
button.is-busy,
input[type="submit"].is-busy {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §9  Smooth-scroll (opt-in when motion is allowed)                      */
/* ═══════════════════════════════════════════════════════════════════════ */
html:focus-within {
  scroll-behavior: smooth;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §10  Reduced motion safety                                             */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Respects users who have enabled "reduce motion" in their OS settings.
 * Overrides card hover transforms and all animation/transition durations.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  /* Card hover lift disabled — transform would still play otherwise */
  .landing-card:hover {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §11  Navigation bar polish                         [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Sticky top-of-page nav scoped to .landing-nav so it cannot conflict
 * with authenticated app interior navigation bars.
 */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hp-color-surface, #ffffff);
  border-block-end: 1px solid var(--hp-color-border, #dadce0);
  /* Subtle bottom shadow to lift the bar over page content */
  box-shadow: 0 1px 4px rgba(60, 64, 67, 0.08);
}

.landing-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--hp-space-lg, 24px);
  padding-block: var(--hp-space-md, 16px);
}

/* Brand link — no underline, flex alignment already in inline style;
   this reinforces consistent color and hover state. */
.landing-nav__brand {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--hp-color-text, #202124);
  text-decoration: none;
  transition: opacity var(--hp-transition-fast, 150ms ease);
}

.landing-nav__brand:hover {
  opacity: 0.8;
}

/* Accent colour on "Free" within brand name */
.brand-accent {
  color: var(--hp-color-primary, #1a73e8);
}

/* Login text link */
.landing-nav__login {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--hp-color-text-muted, #5f6368);
  text-decoration: none;
  transition: color var(--hp-transition-fast, 150ms ease);
  padding-inline: var(--hp-space-sm, 8px);
}

.landing-nav__login:hover {
  color: var(--hp-color-primary, #1a73e8);
}

/* Action group — gap between login link and CTA button */
.landing-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--hp-space-md, 16px);
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §12  Hero layout & media completion                [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * The hero inner flex layout is currently applied via inline style in the
 * view. These rules replicate + refine that layout so it can be managed
 * here instead. Inline styles remain as a safe fallback.
 */

/* Two-column flex layout: copy left, media right */
.landing-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hp-space-xl, 40px);
}

/* Text column — allows shrinking on narrow viewports */
.landing-hero__copy {
  flex: 1 1 340px;
  min-width: 0;
}

/* Media column — image/screenshot side */
.landing-hero__media {
  flex: 1 1 380px;
  min-width: 0;
  text-align: center;
}

/* Hero image — polish the inline shadow/radius from the view */
.landing-hero__media img,
.landing-hero__image {
  max-width: 100%;
  height: auto;
  border-radius: var(--hp-border-radius-lg, 12px);
  box-shadow: var(--hp-shadow-card-hover);
  /* Prevent layout shift by preserving aspect ratio */
  display: block;
  margin-inline: auto;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §13  Social-proof stat block                       [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Three key-metric stats displayed horizontally inside .landing-proof.
 * Uses flex with equal-width columns and a subtle divider pattern.
 */
.landing-proof__inner {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--hp-space-lg, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hp-space-xl, 40px);
  text-align: center;
}

.landing-proof__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-space-xs, 4px);
  min-width: 140px;
}

/* Large metric number — flagship typography */
.landing-proof__number {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hp-color-primary, #1a73e8);
}

/* Descriptive label beneath the number */
.landing-proof__label {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #5f6368; /* #767676 (--color-text-muted) fails 4.5:1 on #f9fafb (4.34:1); #5f6368 gives 5.79:1 (WCAG AA) */
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §14  Pricing section polish                        [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Single free-tier pricing card. Styled as a distinct block so it stands
 * out from the feature grid while matching the shared card system tokens.
 */
.landing-pricing__inner {
  max-width: 540px;
  margin-inline: auto;
  padding-inline: var(--hp-space-lg, 24px);
  text-align: center;
}

/* Section heading area */
.landing-pricing__header {
  margin-block-end: var(--hp-space-xl, 40px);
}

.landing-pricing__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--hp-color-text, #202124);
  margin-block-end: var(--hp-space-sm, 8px);
}

.landing-pricing__sub {
  font-size: 1.0625rem;
  color: var(--hp-color-text-muted, #5f6368);
}

/* Pricing card — elevated compared to feature cards to draw attention */
.landing-pricing__card {
  background: var(--hp-color-surface, #ffffff);
  border: 2px solid var(--hp-color-primary-light, #d2e3fc);
  border-radius: var(--hp-border-radius-lg, 12px);
  padding: var(--hp-space-xl, 40px) var(--hp-space-lg, 24px);
  box-shadow: var(--hp-shadow-card-hover);
  text-align: center;
}

/* Plan name — short label like "Free" */
.landing-pricing__plan-name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hp-color-primary, #1a73e8);
  margin-block-end: var(--hp-space-md, 16px);
}

/* Price display row */
.landing-pricing__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--hp-space-xs, 4px);
  margin-block-end: var(--hp-space-sm, 8px);
}

.landing-pricing__amount {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hp-color-text, #202124);
}

.landing-pricing__period {
  font-size: 1rem;
  color: var(--hp-color-text-muted, #5f6368);
}

/* Secondary note — "No credit card required" */
.landing-pricing__note {
  font-size: 0.875rem;
  color: var(--hp-color-text-light, #80868b);
  margin-block-end: var(--hp-space-xl, 40px);
}

/* Feature list inside pricing card */
.landing-pricing__feature-list {
  list-style: none;
  margin: 0 0 var(--hp-space-xl, 40px);
  padding: 0;
  text-align: start;
}

.landing-pricing__feature-item {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hp-color-text, #202124);
  padding-block: var(--hp-space-xs, 4px);
  padding-inline-start: var(--hp-space-xl, 40px);
  /* Checkmark bullet via background-image (no inline JS, no ::before pseudo
     conflicts with list-style reset) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2334a853'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 1.125rem 1.125rem;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §15  CTA section polish                            [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * The bottom CTA band uses class .landing-cta (not .landing-cta-band);
 * selectors match what's actually in src/Views/home.php.
 */
.landing-cta {
  background: linear-gradient(
    135deg,
    var(--hp-color-primary, #1a73e8) 0%,
    var(--hp-color-primary-dark, #1558b0) 100%
  );
  padding-block: var(--hp-space-2xl, 64px);
  text-align: center;
}

.landing-cta__inner {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--hp-space-lg, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-space-lg, 24px);
}

.landing-cta__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}

.landing-cta__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §16  Section-scoped button harmonisation           [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Extends the §5 .landing-btn system with context overrides so buttons in
 * hero, pricing, and CTA sections have appropriate sizing and contrast.
 * Does NOT globally restyle .btn to avoid breaking app interior pages.
 */

/* Large variant — used in CTA section */
.landing-btn--lg {
  padding: 0.875rem var(--hp-space-xl, 40px);
  font-size: 1.0625rem;
  border-radius: var(--hp-border-radius-md, 8px);
}

/* Hero primary CTA — slightly larger than default to anchor visual weight */
.landing-hero .landing-btn--primary {
  padding-block: 0.8125rem;
  padding-inline: var(--hp-space-xl, 40px);
  font-size: 1rem;
  border-radius: var(--hp-border-radius-md, 8px);
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
}

.landing-hero .landing-btn--primary:hover {
  box-shadow: 0 4px 16px rgba(26, 115, 232, 0.45);
}

/* Pricing card CTA — full-width to fill the card */
.landing-pricing .landing-btn--primary,
.landing-pricing__cta {
  display: block;
  width: 100%;
  padding-block: 0.875rem;
  font-size: 1rem;
  border-radius: var(--hp-border-radius-md, 8px);
  text-align: center;
}

/* CTA band button — white fill on dark background for contrast */
.landing-cta .landing-btn--primary {
  background-color: #ffffff;
  color: var(--hp-color-primary, #1a73e8);
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

.landing-cta .landing-btn--primary:hover {
  background-color: var(--hp-color-primary-light, #d2e3fc);
  border-color: var(--hp-color-primary-light, #d2e3fc);
  color: var(--hp-color-primary-dark, #1558b0);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Active state — slight scale-down for tactile feel (consistent across contexts) */
.landing-hero .landing-btn:active,
.landing-pricing .landing-btn:active,
.landing-cta .landing-btn:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

/* Disabled state — inherited from §5 patterns; reinforce here for scoped contexts */
.landing-hero .landing-btn[disabled],
.landing-hero .landing-btn.is-busy,
.landing-pricing .landing-btn[disabled],
.landing-pricing .landing-btn.is-busy,
.landing-cta .landing-btn[disabled],
.landing-cta .landing-btn.is-busy {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §17  Responsive tuning expansion                   [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Additional breakpoint rules for §11–16 additions.
 * Base responsive rules for §1–10 remain in §6 above.
 */

/* ── 992px — tablet landscape / small desktop ──────────────────────── */
@media (max-width: 992px) {
  /* Nav: tighten inner padding */
  .landing-nav__inner {
    padding-block: var(--hp-space-sm, 8px) var(--hp-space-sm, 8px);
  }

  /* Hero: reduce column gap */
  .landing-hero__inner {
    gap: var(--hp-space-lg, 24px);
  }

  /* Proof stats: reduce gap */
  .landing-proof__inner {
    gap: var(--hp-space-lg, 24px);
  }

  /* Pricing inner: widen */
  .landing-pricing__inner {
    max-width: 480px;
  }
}

/* ── 768px — tablet portrait / large phone ─────────────────────────── */
@media (max-width: 768px) {
  /* Nav: tighter horizontal padding */
  .landing-nav__inner {
    padding-inline: var(--hp-space-md, 16px);
  }

  /* Login text link: hide on small screens (keep only the CTA button) */
  .landing-nav__login {
    display: none;
  }

  /* Hero: stack copy above media */
  .landing-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hp-space-lg, 24px);
  }

  .landing-hero__copy,
  .landing-hero__media {
    flex: none;
    width: 100%;
    text-align: start;
  }

  /* Proof stats: wrap to two per row on tablet portrait */
  .landing-proof__inner {
    gap: var(--hp-space-md, 16px) var(--hp-space-xl, 40px);
  }

  /* Pricing inner: full-width with contained padding */
  .landing-pricing__inner {
    max-width: 100%;
    padding-inline: var(--hp-space-md, 16px);
  }

  .landing-pricing__card {
    padding: var(--hp-space-lg, 24px) var(--hp-space-md, 16px);
  }

  /* CTA band: tighten padding */
  .landing-cta {
    padding-block: 48px;
  }

  .landing-cta__inner {
    padding-inline: var(--hp-space-md, 16px);
    gap: var(--hp-space-md, 16px);
  }

  .landing-cta__title {
    font-size: 1.5rem;
  }

  /* Hero scoped button: full-width on mobile */
  .landing-hero .landing-btn--primary {
    width: 100%;
    justify-content: center;
  }

  /* Pricing CTA already full-width; no extra override needed */
}

/* ── 480px — small phone ────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Proof stats: single column */
  .landing-proof__stat {
    min-width: 100%;
  }

  /* Nav brand: slightly smaller text */
  .landing-nav__brand {
    font-size: 1rem;
  }

  /* Pricing amount: scale down to fit */
  .landing-pricing__amount {
    font-size: 2.25rem;
  }

  /* CTA actions: stack naturally (already flex column via §15) */
  .landing-cta .landing-btn--primary {
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §18  Reduced-motion safety additions               [VIS-1p.2]          */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * §10 already covers the global transition/animation override.
 * These additions suppress VIS-1p.2 specific motion (active scale,
 * button box-shadow growth) for users with prefers-reduced-motion.
 */
@media (prefers-reduced-motion: reduce) {
  /* Suppress active-state scale on landing section buttons */
  .landing-hero .landing-btn:active,
  .landing-pricing .landing-btn:active,
  .landing-cta .landing-btn:active {
    transform: none;
  }

  /* Suppress hover shadow growth on pricing card */
  .landing-pricing__card {
    box-shadow: var(--hp-shadow-card);
  }

  /* Suppress hero image hover expansion */
  .landing-hero__media img,
  .landing-hero__image {
    box-shadow: var(--hp-shadow-card);
  }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §19  Social-proof stat completion                    [VIS-1p.3]        */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * §13 established the flex layout and typography for .landing-proof__*
 * stat blocks. These additions fill the missing detail states:
 *   - Section-level background treatment for the proof strip
 *   - Divider lines between stats (pipe pattern, visibility-friendly)
 *   - Number counter role semantics (aria-label already in HTML; this is
 *     purely visual spacing/weight completion)
 *   - Testimonial card and trust badge polish from home.php
 *
 * Classes confirmed in src/Views/home.php:
 *   .landing-social-proof, .landing-social-proof__inner,
 *   .landing-social-proof__heading, .landing-social-proof__intro,
 *   .landing-testimonials, .landing-testimonial-card,
 *   .landing-testimonial-card__name, .landing-testimonial-card__role,
 *   .landing-trust-badges, .landing-trust-badge, .landing-trust-badge__icon
 */

/* Social-proof stat strip — subtle tinted background to separate it from
   adjacent white sections without a hard border */
.landing-proof {
  background-color: var(--hp-color-surface-alt, #f8f9fa);
}

/* Visual pipe divider between stat items using a border on the right side.
   The last child has no right border (avoids dangling pipe). */
.landing-proof__stat + .landing-proof__stat {
  border-inline-start: 1px solid var(--hp-color-border, #dadce0);
  padding-inline-start: var(--hp-space-xl, 40px);
}

/* Number — ensure the unit suffix ("+", "%") stays consistent size/weight
   so it does not visually compete with the metric itself */
.landing-proof__number {
  /* Tabular numbers prevent layout jitter if values change dynamically */
  font-variant-numeric: tabular-nums;
}

/* Label — refine line-height for multi-word labels on narrow viewports */
.landing-proof__label {
  max-width: 12ch;
  text-align: center;
}

/* ── Social-proof testimonials section ────────────────────────────────── */

/* Section wrapper — alternating surface already applied via §2 selector
   but the testimonials section uses .landing-social-proof, so explicit: */
.landing-social-proof {
  background-color: var(--hp-color-surface-alt, #f8f9fa);
  padding-block: var(--hp-space-2xl, 64px);
}

.landing-social-proof__inner {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--hp-space-lg, 24px);
  text-align: center;
}

/* Section heading + intro */
.landing-social-proof__heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--hp-color-text, #202124);
  margin-block-end: var(--hp-space-sm, 8px);
}

.landing-social-proof__intro {
  font-size: 1.0625rem;
  color: var(--hp-color-text-muted, #5f6368);
  margin-block-end: var(--hp-space-xl, 40px);
}

/* Testimonial grid — three cards in a row on wide, wrapping on narrow */
.landing-testimonials {
  list-style: none;
  margin: 0 0 var(--hp-space-xl, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hp-space-lg, 24px);
  text-align: start;
}

/* Individual testimonial card */
.landing-testimonial-card {
  background: var(--hp-color-surface, #ffffff);
  border: 1px solid var(--hp-color-border, #dadce0);
  border-radius: var(--hp-border-radius-md, 8px);
  padding: var(--hp-space-lg, 24px);
  box-shadow: var(--hp-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-md, 16px);
}

/* Blockquote — reset browser margins; we control spacing via flex gap */
.landing-testimonial-card blockquote {
  margin: 0;
  flex: 1;
}

.landing-testimonial-card blockquote p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--hp-color-text, #202124);
  margin: 0;
  /* Opening quote mark using CSS content on ::before for visual polish */
  position: relative;
}

.landing-testimonial-card blockquote p::before {
  content: '\201C'; /* left double quotation mark U+201C */
  font-size: 2.5rem;
  line-height: 0;
  vertical-align: -0.4em;
  color: var(--hp-color-primary-light, #d2e3fc);
  margin-inline-end: var(--hp-space-xs, 4px);
  /* Decorative — screen readers should not read this character */
  aria-hidden: true; /* not valid CSS; actual hiding handled by content */
}

/* Citation block — author name + role */
.landing-testimonial-card cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}

.landing-testimonial-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hp-color-text, #202124);
}

.landing-testimonial-card__role {
  font-size: 0.8125rem;
  color: var(--hp-color-text-muted, #5f6368);
}

/* Trust badge row — horizontal chip strip */
.landing-trust-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hp-space-md, 16px);
}

.landing-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-space-xs, 4px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hp-color-text-muted, #5f6368);
  background: var(--hp-color-surface, #ffffff);
  border: 1px solid var(--hp-color-border, #dadce0);
  border-radius: 20px; /* pill shape */
  padding: var(--hp-space-xs, 4px) var(--hp-space-md, 16px);
  white-space: nowrap;
}

.landing-trust-badge__icon {
  color: var(--hp-color-accent, #34a853);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §20  Pricing card detail completion                  [VIS-1p.3]        */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * §14 defined the structural pricing card. These additions complete:
 *   - Price row baseline alignment when currency symbol vs. amount scale differs
 *   - Feature list item spacing tightening (item rows were slightly loose)
 *   - Featured-card hover state (border glow on hover for interactivity signal)
 *   - Small-note text refinement (contrast without competing with plan name)
 *   - Transition on card border for smooth hover glow
 */

/* Price row — add a currency symbol element when present in HTML */
.landing-pricing__currency {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  align-self: flex-start;
  margin-block-start: 0.4em; /* optical alignment with amount top */
  color: var(--hp-color-text-muted, #5f6368);
}

/* Period text — sit at the bottom of the baseline stack */
.landing-pricing__period {
  align-self: flex-end;
  padding-block-end: 0.25em;
}

/* Feature list — tighter vertical rhythm, divider between items */
.landing-pricing__feature-item {
  border-block-end: 1px solid var(--hp-color-border, #dadce0);
}

.landing-pricing__feature-item:last-child {
  border-block-end: none;
}

/* Pricing card hover glow — reinforces it is a focal/interactive element */
.landing-pricing__card {
  transition:
    border-color var(--hp-transition-normal, 250ms ease),
    box-shadow   var(--hp-transition-normal, 250ms ease);
}

.landing-pricing__card:hover {
  border-color: var(--hp-color-primary, #1a73e8);
  box-shadow: 0 6px 24px rgba(26, 115, 232, 0.18);
}

/* Plan name — small visual badge treatment */
.landing-pricing__plan-name {
  display: inline-block;
  background-color: var(--hp-color-primary-light, #d2e3fc);
  color: var(--hp-color-primary-dark, #1558b0);
  border-radius: var(--hp-border-radius-sm, 4px);
  padding: 2px var(--hp-space-sm, 8px);
  margin-block-end: var(--hp-space-md, 16px);
}

/* Note text — slightly de-emphasised; avoid competing with price */
.landing-pricing__note {
  letter-spacing: 0.01em;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §21  CTA form + reassurance row completion           [VIS-1p.3]        */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * The current home.php CTA section uses a single anchor button, not a form.
 * These rules are forward-compatible: they apply if a signup email-capture
 * form is ever added inside .landing-cta__form, and they polish the existing
 * reassurance / sub text styling on the current band.
 *
 * The .landing-cta__reassurance and .landing-cta__disclaimer selectors are
 * included now so the HTML author does not need to remember to add CSS later.
 */

/* Form row — horizontal layout with input + submit side by side */
.landing-cta__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-space-sm, 8px);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 480px;
}

/* Email input inside CTA form */
.landing-cta__email-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0.6875rem var(--hp-space-md, 16px);
  font-size: 0.9375rem;
  line-height: 1.4;
  border: 2px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--hp-border-radius-sm, 4px);
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transition:
    border-color var(--hp-transition-fast, 150ms ease),
    background-color var(--hp-transition-fast, 150ms ease);
}

/* Placeholder text on dark background */
.landing-cta__email-input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

/* Focus ring for the email input — white ring on blue background */
.landing-cta__email-input:focus,
.landing-cta__email-input:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.90);
  background-color: rgba(255, 255, 255, 0.22);
  /* Visible focus indicator that meets WCAG 2.1 AA on gradient background */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* Reassurance text (e.g. "No credit card required") under the CTA button */
.landing-cta__reassurance {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin-block-start: var(--hp-space-xs, 4px);
}

/* Fine-print disclaimer below CTA (privacy policy reference etc.) */
.landing-cta__disclaimer {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  /* Keep it clearly secondary — narrower max-width than the CTA title */
  max-width: 420px;
  line-height: 1.5;
}

.landing-cta__disclaimer a {
  color: rgba(255, 255, 255, 0.80);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-cta__disclaimer a:hover {
  color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §22  Interaction / focus-visible hardening           [VIS-1p.3]        */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * §7 covered the global `:focus-visible` rule and §5 covered .landing-btn.
 * This section hardens focus states for landing-specific interactive elements
 * that were added in VIS-1p.2 (nav links, trust badges) and VIS-1p.3 (testimonial
 * cards if they become links, pricing card if it wraps an anchor).
 *
 * Rule: visible outline must achieve ≥ 3:1 contrast against adjacent fill
 * (WCAG 2.1 SC 1.4.11 Non-text Contrast).
 */

/* Nav links — ensure the focus ring is visible against the white nav bar */
.landing-nav__brand:focus-visible,
.landing-nav__login:focus-visible {
  outline: 3px solid var(--hp-color-primary, #1a73e8);
  outline-offset: 3px;
  border-radius: var(--hp-border-radius-sm, 4px);
}

/* Trust badge links (if ever wrapped in <a>) */
.landing-trust-badge:focus-visible {
  outline: 3px solid var(--hp-color-primary, #1a73e8);
  outline-offset: 2px;
  border-radius: 20px; /* match the pill radius of the badge */
}

/* Testimonial card links (if card title becomes a link) */
.landing-testimonial-card a:focus-visible {
  outline: 3px solid var(--hp-color-primary, #1a73e8);
  outline-offset: 2px;
  border-radius: var(--hp-border-radius-sm, 4px);
}

/* Pricing CTA anchor — supplement the generic .landing-btn:focus-visible rule
   with a tighter color that reads well against the white card background */
.landing-pricing__cta:focus-visible {
  outline: 3px solid var(--hp-color-primary-dark, #1558b0);
  outline-offset: 3px;
}

/* CTA band button — focus ring must read against the dark gradient background */
.landing-cta .landing-btn:focus-visible {
  /* White ring on dark background — highest contrast option */
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  /* Secondary inner ring to ensure visibility against any background colour */
  box-shadow: 0 0 0 6px rgba(26, 115, 232, 0.30);
}

/* CTA email input focus is already handled in §21; this ensures btn consistency */

/* Active state — include the outline context so keyboard users see confirmation */
.landing-btn:active:focus-visible {
  outline-offset: 1px;
  transition: outline-offset var(--hp-transition-fast, 150ms ease);
}

/* aria-busy button — suppress pointer events and show wait cursor */
.landing-btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

/* Disabled anchor fallback — <a> cannot use the `disabled` attribute;
   use aria-disabled="true" and pointer-events: none instead */
.landing-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §23  Responsive edge-case tuning                     [VIS-1p.3]        */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * §6 and §17 cover the core breakpoints for §1–16 selectors.
 * This section adds:
 *   - A wider 1200px breakpoint for large desktop edge cases
 *     (mainly limiting proof strip dividers from becoming too wide)
 *   - 992px additions for new §19-22 selectors
 *   - 768px additions for new §19-22 selectors
 *   - 480px additions for new §19-22 selectors
 */

/* ── 1200px — large desktop containment ────────────────────────────── */
@media (min-width: 1200px) {
  /* Proof inner: cap width so the pipe dividers do not stretch too wide */
  .landing-proof__inner {
    max-width: 900px;
  }

  /* Social proof testimonials: fixed three-column on large desktop */
  .landing-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Pricing inner: widen cap on large screens */
  .landing-pricing__inner {
    max-width: 560px;
  }
}

/* ── 992px — tablet landscape / small desktop ──────────────────────── */
@media (max-width: 992px) {
  /* Social proof section: tighten vertical rhythm */
  .landing-social-proof {
    padding-block: 48px;
  }

  /* Testimonials: two columns on tablet */
  .landing-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Trust badges: allow wrapping with smaller horizontal gaps */
  .landing-trust-badges {
    gap: var(--hp-space-sm, 8px);
  }

  /* Proof stat pipe dividers: reduce padding on tablet */
  .landing-proof__stat + .landing-proof__stat {
    padding-inline-start: var(--hp-space-lg, 24px);
  }
}

/* ── 768px — tablet portrait / large phone ─────────────────────────── */
@media (max-width: 768px) {
  /* Social proof: standard tightened vertical rhythm */
  .landing-social-proof {
    padding-block: 36px;
  }

  .landing-social-proof__inner {
    padding-inline: var(--hp-space-md, 16px);
  }

  /* Testimonials: single column on small tablet / large phone */
  .landing-testimonials {
    grid-template-columns: 1fr;
  }

  /* Trust badges: tighten */
  .landing-trust-badge {
    font-size: 0.75rem;
    padding: var(--hp-space-xs, 4px) var(--hp-space-sm, 8px);
  }

  /* Proof pipe dividers: remove on narrow viewports to avoid layout jank
     when stats stack vertically (§17 sets min-width: 100% at 480px) */
  .landing-proof__stat + .landing-proof__stat {
    border-inline-start: none;
    padding-inline-start: 0;
    /* Replace with top border when stacking */
    border-block-start: 1px solid var(--hp-color-border, #dadce0);
    padding-block-start: var(--hp-space-lg, 24px);
  }

  /* CTA form: stack vertically on small screens */
  .landing-cta__form {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }

  .landing-cta__email-input {
    flex: none;
    width: 100%;
  }
}

/* ── 480px — small phone ────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Trust badges: wrap to two per row maximum, reduce font further */
  .landing-trust-badges {
    gap: var(--hp-space-xs, 4px) var(--hp-space-sm, 8px);
  }

  /* Social-proof heading: tighten size */
  .landing-social-proof__heading {
    font-size: 1.375rem;
  }

  /* Testimonial card: reduce padding on tiny screens */
  .landing-testimonial-card {
    padding: var(--hp-space-md, 16px);
  }

  /* Stat label: allow full width so long labels do not truncate */
  .landing-proof__label {
    max-width: 100%;
  }

  /* Pricing plan name badge: full width to look intentional */
  .landing-pricing__plan-name {
    display: block;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* §24  Accessibility + print final safety              [VIS-1p.3]        */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Final accessibility and print safety pass to close out VIS-1p.3.
 * Covers:
 *   a) prefers-reduced-motion overrides for VIS-1p.3 specific motion
 *      (testimonial card hover, pricing card hover glow, trust-badge pill)
 *   b) forced-colors / Windows High Contrast mode — ensure borders and
 *      text colours use system keywords so the UI does not disappear
 *   c) Print stylesheet — hide navigation, CTA band, and trust badges;
 *      make testimonials and pricing print-readable with black text
 */

/* ── a) Reduced-motion additions for VIS-1p.3 ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Pricing card hover — suppress border/shadow transition */
  .landing-pricing__card {
    transition: none;
  }

  .landing-pricing__card:hover {
    /* Keep border colour change (informational) but remove shadow growth */
    box-shadow: var(--hp-shadow-card);
  }

  /* Testimonial card — currently no transform, but future-proofing if lift
     is added; ensure we do not surprise users with unexpected motion */
  .landing-testimonial-card {
    transition: none;
  }
}

/* ── b) Forced-colors (Windows High Contrast) safe guards ───────────── */
@media (forced-colors: active) {
  /*
   * In forced-colors mode, background-image data URIs (used for checkmarks
   * in §14 .landing-pricing__feature-item) are stripped by the browser.
   * Fall back to a text "✓" pseudo-element so the information is preserved.
   *
   * The background-image rule is suppressed automatically by the UA; we
   * just need to ensure the pseudo-element provides an equivalent signal.
   */
  .landing-pricing__feature-item {
    background-image: none;
    padding-inline-start: var(--hp-space-xl, 40px);
    position: relative;
  }

  .landing-pricing__feature-item::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: CanvasText; /* system keyword — always readable in forced-colors */
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* Trust badges — borders are visible in forced-colors mode; remove the
     background so they do not conflict with system colour overrides */
  .landing-trust-badge {
    background: Canvas;
    border-color: ButtonText;
    color: ButtonText;
  }

  .landing-trust-badge__icon {
    color: ButtonText;
  }

  /* Pricing card — ensure border is visible as a boundary marker */
  .landing-pricing__card {
    border-color: ButtonText;
  }

  /* Nav border */
  .landing-nav {
    border-block-end-color: ButtonText;
  }
}

/* ── c) Print safety ────────────────────────────────────────────────── */
@media print {
  /*
   * Print: hide decorative / navigation elements that add no value on paper.
   * We want the key content (pricing, testimonials) to be readable.
   */

  /* Navigation bar: hidden on print */
  .landing-nav {
    display: none !important;
  }

  /* CTA band: hide the promotional band; a printed page cannot respond to CTAs */
  .landing-cta {
    display: none !important;
  }

  /* Trust badge row: decorative, not needed in print */
  .landing-trust-badges {
    display: none;
  }

  /* Remove backgrounds and box-shadows for ink economy */
  .landing-hero,
  .landing-features,
  .landing-proof,
  .landing-pricing,
  .landing-testimonials,
  .landing-social-proof,
  .landing-cta-band {
    background: none !important;
    padding-block: 1.5rem;
  }

  .landing-card,
  .landing-testimonial-card,
  .landing-pricing__card {
    box-shadow: none !important;
    border: 1px solid #ccc;
    break-inside: avoid; /* prevent card splitting across page break */
  }

  /* Ensure text is black for maximum legibility on paper */
  .landing-hero__title,
  .landing-hero__sub,
  .landing-hero__eyebrow,
  .landing-pricing__title,
  .landing-pricing__amount,
  .landing-cta__title {
    color: #000 !important;
  }

  /* Pricing feature items: ensure checkmark SVG background falls back gracefully */
  .landing-pricing__feature-item {
    background-image: none;
    padding-inline-start: var(--hp-space-xl, 40px);
    position: relative;
  }

  .landing-pricing__feature-item::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: #000;
    font-weight: 700;
  }

  /* Buttons: remove gradients and shadows; show as simple bordered links */
  .landing-btn {
    background: none !important;
    color: #000 !important;
    border-color: #000 !important;
    box-shadow: none !important;
  }

  /* Show full URL next to links for print readers */
  .landing-hero__actions a[href]::after,
  .landing-pricing__cta[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.75rem;
    font-weight: normal;
    color: #444;
  }
}