/* Landing page styles (original, inspired by modern SaaS patterns) */
.landing-dance {
  --landing-text: #1f2933;
  --landing-muted: #2d3748;
  --landing-primary: #5c3dff;
  --landing-surface: #ffffff;
  --landing-surface-alt: #f8fafc;
  --landing-border: rgba(15, 23, 42, 0.08);
  --landing-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
  --landing-success: #15803d;
  /* Unify Bootstrap's "primary" with the brand purple so bg-primary, badges, chips,
     borders and links all match the CTAs (no stray Bootstrap-blue #0d6efd). */
  --bs-primary: #5c3dff;
  --bs-primary-rgb: 92, 61, 255;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--landing-text);
  background: var(--landing-surface-alt);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: -1;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  white-space: normal;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  color: #111827;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 1000;
}
.landing-dance h1,
.landing-dance h2,
.landing-dance h3,
.landing-dance h4 {
  color: var(--landing-text);
  letter-spacing: -0.015em;
}
.landing-dance p,
.landing-dance li {
  color: var(--landing-muted);
}
.landing-dance section:not(.hero) {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.landing-dance .container {
  max-width: 1120px;
}
.landing-dance .btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
}
.landing-dance .btn-primary {
  background: var(--landing-primary);
  border-color: var(--landing-primary);
  box-shadow: 0 14px 28px rgba(92, 61, 255, 0.2);
}
.landing-dance .btn-primary:hover,
.landing-dance .btn-primary:focus {
  background: var(--brand-700, #492de6);
  border-color: var(--brand-700, #492de6);
  box-shadow: 0 16px 32px rgba(73, 45, 230, 0.22);
}
.landing-dance .btn-secondary {
  color: var(--landing-primary);
  background: rgba(92, 61, 255, 0.1);
  border-color: transparent;
}
.landing-dance .btn-secondary:hover,
.landing-dance .btn-secondary:focus {
  color: var(--landing-primary);
  background: rgba(92, 61, 255, 0.15);
  border-color: rgba(92, 61, 255, 0.2);
}
.landing-dance .text-primary {
  color: var(--landing-primary) !important;
}
/* Bootstrap 5.1 hardcodes these to blue — pin them to the brand purple. */
.landing-dance .btn-outline-primary {
  color: var(--landing-primary);
  border-color: var(--landing-primary);
}
.landing-dance .btn-outline-primary:hover,
.landing-dance .btn-outline-primary:focus {
  background-color: var(--landing-primary);
  border-color: var(--landing-primary);
  color: #fff;
}
.landing-dance .link-primary {
  color: var(--landing-primary) !important;
}
/* One success green that passes WCAG AA on white and on the green tint. */
.landing-dance .text-success {
  color: var(--landing-success) !important;
}
/* Founding-offer banner — was an inline gradient+border repeated verbatim on
   the dance/hoops/english pages, with a #16a34a border that didn't match
   --landing-success. One class, one green. */
.landing-dance .landing-alert-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-left: 4px solid var(--landing-success) !important;
}
/* Bootstrap's .text-muted (#6c757d) is too light here — use the darker brand muted (~7:1). */
.landing-dance .text-muted {
  color: var(--landing-muted) !important;
}
.landing-dance .badge,
.landing-dance .rounded-pill {
  letter-spacing: 0.08em;
}
.landing-dance .container > .row > div > p.lead {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.landing-header .brand { font-size: 1.125rem; color: var(--landing-text); }
.landing-header .logo-pill { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background: transparent; box-sizing: border-box; padding:0; }
.landing-header .logo-icon { display:inline-block; width:100%; height:100%; object-fit:contain; border-radius:8px; }
.landing-header .landing-signin { color: var(--landing-muted); }
.landing-header .landing-signin:hover, .landing-header .landing-signin:focus-visible { color: var(--landing-text); text-decoration: underline; }

.landing-dance .hero {
  min-height: 62vh;
  display: flex;
  align-items: center;
  position: relative;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.97));
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* Hero backdrops render at 15% opacity, so they ship as small JPEGs —
   compression artifacts are invisible behind the white gradient. */
.landing-dance .hero .hero-bg {
  position: absolute;
  inset: 0;
  background: url('/images/happyDancer-1024.jpg') center/cover no-repeat;
  opacity: .15;
}

@media (max-width: 992px) {
  .landing-dance .hero .hero-bg {
    background-image: url('/images/happyDancer-640.jpg');
  }
}

@media (max-width: 576px) {
  .landing-dance .hero .hero-bg {
    background-image: url('/images/happyDancer-480.jpg');
  }
}

/* /hoops variant — overrides the dance backdrop (declared later, same specificity).
   Higher opacity than the .15 base so the coach photo reads more vividly on /hoops. */
.landing-dance .hero .hero-bg--hoops {
  background: url('/images/CoachCarter-864.jpg') center top/cover no-repeat;
  opacity: 0.3;
}

@media (max-width: 576px) {
  .landing-dance .hero .hero-bg--hoops {
    background-image: url('/images/CoachCarter-480.jpg');
  }
}

/* ── /english accent theme ───────────────────────────────────────────────────
   English was pixel-identical to /dance (same purple). A deep-cyan accent gives
   it a scholastic identity of its own. Purple stays the primary/CTA colour;
   cyan drives the feature eyebrows and heading keyline, mirroring how /hoops
   layers orange. Added as .landing-english alongside .landing-dance on the root. */
.landing-english {
  --landing-accent: #0e7490;
  --landing-accent-ink: #0b5c6b;
  --landing-accent-tint: rgba(14, 116, 144, 0.12);
}
.landing-english .landing-feature .bg-primary.text-primary {
  background-color: var(--landing-accent-tint) !important;
  color: var(--landing-accent-ink) !important;
}
.landing-english .landing-feature h3::after {
  content: ""; display: block; width: 44px; height: 3px;
  margin: .5rem auto 0; background: var(--landing-accent); border-radius: 2px;
}

/* ── /hoops basketball accent theme ──────────────────────────────────────────
   Scoped to the .landing-hoops modifier (added alongside .landing-dance on the
   Hoops page root) so /dance and /english are untouched. Purple stays the
   primary/CTA colour (--landing-primary); basketball orange is layered as an
   accent plus court-line / ball-seam motifs. The hero motif is background-only
   (no layout height) so it never pushes the hero testimonial below the fold. */
.landing-hoops {
  --landing-accent: #E8622A;
  --landing-accent-ink: #a83f19;
  --landing-accent-tint: rgba(232, 98, 42, 0.12);
}

/* Basketball glyph inherits the accent colour wherever it appears */
.landing-hoops .hoops-ball { color: var(--landing-accent); vertical-align: -2px; }
.landing-hoops .hero h2 .hoops-ball { margin-right: 6px; }

/* Feature eyebrow pills: brand purple -> basketball orange (hoops only) */
.landing-hoops .landing-feature .bg-primary.text-primary {
  background-color: var(--landing-accent-tint) !important;
  color: var(--landing-accent-ink) !important;
}
.landing-hoops .landing-feature .bg-primary .hoops-ball { margin-right: 5px; }

/* Short orange keyline under each feature heading (below the fold — height-safe) */
.landing-hoops .landing-feature h3::after {
  content: ""; display: block; width: 44px; height: 3px;
  margin: .5rem auto 0; background: var(--landing-accent); border-radius: 2px;
}

/* Court-framed TEXT blocks — the bullet copy sits inside a faint full-court frame,
   while the product screenshot stays clean (the court backs the text, not the image).
   Scoped to the bullets column's inner wrapper, so on mobile the framed text sits
   below the image and on desktop it sits beside it. */
.landing-hoops .landing-feature .col-lg-6 > .mx-auto {
  position: relative;
  padding: 1.5rem 1.5rem;
  border: 1px solid rgba(232, 98, 42, 0.26);
  border-radius: 16px;
  background-color: var(--landing-surface);
  overflow: hidden;
}
.landing-hoops .landing-feature .col-lg-6 > .mx-auto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' fill='none' stroke='%23E8622A' stroke-width='2.5'%3E%3Crect x='6' y='6' width='388' height='238' rx='6'/%3E%3Cline x1='200' y1='6' x2='200' y2='244'/%3E%3Ccircle cx='200' cy='125' r='34'/%3E%3Crect x='6' y='83' width='70' height='84'/%3E%3Crect x='324' y='83' width='70' height='84'/%3E%3Ccircle cx='76' cy='125' r='30'/%3E%3Ccircle cx='324' cy='125' r='30'/%3E%3Cpath d='M76 24 A110 110 0 0 1 76 226'/%3E%3Cpath d='M324 24 A110 110 0 0 0 324 226'/%3E%3C/svg%3E") center / cover no-repeat;
  opacity: .13;
  pointer-events: none;
}
.landing-hoops .landing-feature .col-lg-6 > .mx-auto > ul { position: relative; z-index: 1; }

/* Faint half-court motif in the hero — background only, bleeds off the bottom-right
   corner, clipped by .hero overflow. z-index 1 keeps it above the photo (.hero-bg,
   z auto) and below the content (z 2). No layout height => fold stays intact. */
.landing-hoops .hero::after {
  content: "";
  position: absolute;
  right: -26px; bottom: -22px;
  width: 188px; height: 226px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' fill='none' stroke='%23E8622A' stroke-width='3'%3E%3Cpath d='M198 22 A150 150 0 0 0 198 218'/%3E%3Crect x='120' y='82' width='80' height='76'/%3E%3Ccircle cx='120' cy='120' r='30'/%3E%3Cline x1='196' y1='98' x2='196' y2='142'/%3E%3Ccircle cx='184' cy='120' r='9'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .14;
  z-index: 1;
  pointer-events: none;
}

/* Ball-seam divider between the hero and the rest of the page */
.landing-hoops .hoops-divider {
  display: flex; align-items: center; gap: .75rem;
  max-width: 300px; margin-inline: auto;
  color: var(--landing-accent);
}
.landing-hoops .hoops-divider::before,
.landing-hoops .hoops-divider::after {
  content: ""; flex: 1 1 auto; height: 2px;
  background: var(--landing-accent); opacity: .4;
}
.landing-hoops .hoops-divider .hoops-ball { width: 22px; height: 22px; vertical-align: middle; }

/* Dark-mode parallel — landing is light-only; keep the orange accents pinned
   (mirrors the [data-theme="dark"] .landing-dance defense lower in this file). */
[data-theme="dark"] .landing-hoops .landing-feature .bg-primary.text-primary {
  background-color: var(--landing-accent-tint) !important;
  color: var(--landing-accent-ink) !important;
}
[data-theme="dark"] .landing-hoops .hoops-ball { color: var(--landing-accent) !important; }

/* /english variant — overrides the dance backdrop (declared later, same specificity).
   Slightly higher opacity than the .15 base so the illustration reads more clearly. */
.landing-dance .hero .hero-bg--english {
  background: url('/images/english-hero-1024.jpg') center/cover no-repeat;
  opacity: 0.28;
}

@media (max-width: 992px) {
  .landing-dance .hero .hero-bg--english {
    background-image: url('/images/english-hero-640.jpg');
  }
}

@media (max-width: 576px) {
  .landing-dance .hero .hero-bg--english {
    background-image: url('/images/english-hero-480.jpg');
  }
}

/* /more-dance ambassador variant — same dancer photo, desktop-only tweaks: the
   two-column hero is much shorter than /dance's, so center/cover crops the
   ballerina's head out of frame; top anchoring keeps it visible, and the doubled
   opacity reads vividly behind the shorter block. Mobile keeps the /dance look. */
@media (min-width: 992px) {
  .landing-dance .hero .hero-bg--more-dance {
    background-position: center top;
    opacity: 0.3;
  }
}

.landing-dance .hero .lead {
  color: var(--landing-text) !important;
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65;
}

.landing-dance .hero .small {
  font-weight: 600;
  color: var(--landing-text) !important;
}

.landing-dance .hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Keep the complete conversion path visible on laptop-height desktop screens:
   headline, value proposition, CTA, price reassurance, and scarcity badge. */
@media (min-width: 992px) {
  .landing-dance .hero {
    padding-top: clamp(.75rem, 2vh, 1.25rem);
    padding-bottom: 2rem;
  }

  .landing-dance .hero .dance-hero-copy-row {
    padding-top: clamp(1.25rem, 3vh, 2rem) !important;
    padding-bottom: 2rem !important;
  }

  .landing-dance .hero .dance-hero-copy-row h1 {
    margin-bottom: 1rem !important;
  }

  .landing-dance .hero .dance-hero-copy-row .lead,
  .landing-dance .hero .dance-hero-copy-row h2.h5 {
    margin-bottom: 1rem !important;
  }

  .landing-dance .hero .dance-hero-testimonial {
    margin-bottom: 1rem !important;
  }

  .landing-dance .hero .dance-hero-testimonial .trusted-highlight {
    max-width: 620px !important;
  }

  .landing-dance .hero .dance-hero-setup {
    margin-bottom: 1rem !important;
  }

  .landing-dance .hero .dance-hero-price {
    margin-top: 1rem !important;
  }

  .landing-dance .hero .dance-hero-scarcity {
    margin-top: .5rem !important;
  }
}

@media (min-width: 992px) and (max-height: 700px) {
  .landing-dance .hero {
    padding-top: .5rem;
  }

  .landing-dance .hero .dance-hero-copy-row {
    padding-top: .75rem !important;
    padding-bottom: 1rem !important;
  }

  .landing-dance .hero .dance-hero-copy-row h1 {
    font-size: clamp(2.5rem, 4vw, 3rem);
    line-height: 1.08;
  }

  .landing-dance .hero .dance-hero-copy-row .lead {
    line-height: 1.45;
  }

  .landing-dance .hero .dance-hero-testimonial,
  .landing-dance .hero .dance-hero-setup {
    margin-bottom: .75rem !important;
  }

  .landing-dance .hero .dance-hero-testimonial .trusted-highlight {
    padding: .75rem 1rem;
  }

  .landing-dance .hero .dance-hero-price {
    margin-top: .75rem !important;
  }
}

/* Hero text sits over a photo — force it dark for crisp legibility (overrides text-muted). */
.landing-dance .hero h2 {
  color: var(--landing-text) !important;
}

.landing-dance .hero .trusted-highlight {
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--landing-border);
  border-radius: 18px;
  box-shadow: var(--landing-shadow);
  padding: 0.85rem 1.25rem;
}
.landing-dance .hero .trusted-highlight i {
  font-size: 1rem;
}
.landing-dance .hero .trusted-highlight .trusted-logo {
  filter: none !important;
  height: 40px;
  width: auto;
}
.landing-dance .hero .trusted-highlight .trusted-label {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--landing-muted);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .landing-dance .hero .trusted-highlight { padding: 1rem 1.5rem; border-radius: 24px; }
  .landing-dance .hero .trusted-highlight .trusted-label { font-size: .75rem; }
  .landing-dance .hero .trusted-highlight .trusted-logo { height: 48px; }
}
@media (max-width: 767px) {
  .landing-dance .hero .trusted-highlight { gap: .4rem; }
}

.landing-dance .feature-jobs .rounded-4 {
  border: 1px solid var(--landing-border);
}
.landing-dance .feature-jobs .rounded-4 {
  transition: transform .25s ease, box-shadow .25s ease;
}
.landing-dance .feature-jobs .rounded-4:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.11);
}
.landing-dance .feature-jobs ul li i {
  flex: 0 0 auto;
}
.landing-dance .feature-jobs ul li span {
  flex: 1;
}
.landing-dance .trusted-by { display:flex; align-items:center; justify-content:center; gap:.75rem; opacity:.98; flex-wrap:wrap; }
.landing-dance .trusted-by .trusted-label { white-space: nowrap; }
.landing-dance .trusted-by .trusted-logo { height: 32px; width: auto; object-fit: contain; filter: none; display:inline-block; }
.landing-dance .trusted-by .trusted-logo.no-filter { filter: none !important; }
@media (min-width: 768px) {
  .landing-dance .trusted-by .trusted-logo { height: 40px; }
}
.landing-dance .trusted-fallback { padding:.25rem .5rem; background: var(--landing-surface-alt); border-radius:.375rem; }
.landing-dance .hero-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff);
}

/* Trusted section (below hero) */
.landing-dance .trusted-section { background: #fff; }
.landing-dance .trusted-chip { background: rgba(255,255,255,0.96); border: 1px solid var(--landing-border); border-radius: 9999px; padding: .35rem .9rem; display: inline-flex; align-items: center; gap: .5rem; box-shadow: 0 10px 28px rgba(15,23,42,0.07); }
@media (max-width: 767px) {
  .landing-dance .trusted-by .trusted-logo { height: 28px; }
}

.landing-dance .features { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px) {
  .landing-dance .features { padding-top: 4rem; padding-bottom: 4rem; }
}

.landing-dance .cta { background: var(--landing-surface); }
.landing-dance .problem .border {
  border: 1px solid var(--landing-border);
  background: var(--landing-surface);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
}
.landing-footer {
  border-top: 1px solid var(--landing-border);
}
.landing-footer a {
  color: inherit;
}
.landing-footer a:hover {
  color: var(--landing-primary);
}

/* Utilities */
.py-md-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-lg-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

/* Product visual */
.product-hero {
  max-height: 420px;
  object-fit: contain;
  aspect-ratio: 9/16;
  width: 100%;
  height: auto;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent;
}

/* Mobile feature screenshots: the source images were captured at differing
   aspect ratios/zoom (full-screen vs cropped panels), so without a fixed frame
   they render at different heights and scales. Force every shot into one
   uniform box (~300x514) and crop with object-fit so the set looks consistent.
   Anchored to the top so the most important UI stays visible; the chosen 7/12
   ratio matches the panel screenshots so those are barely cropped, while the
   taller full-screen dashboard shot is trimmed at the bottom. */
.landing-dance .landing-mobile-shot {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 7 / 12;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

/* FAQ details */
.landing-dance .faq-item { border: 1px solid var(--landing-border); border-radius: .75rem; padding: 1.25rem 1.5rem; margin-bottom: .85rem; background: var(--landing-surface); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
.landing-dance .faq-item summary { cursor: pointer; font-weight: 600; }

/* Anchor scroll ergonomics */
#pricing { scroll-margin-top: 80px; }

/* Smooth in-page anchor scrolling for this landing */
html { scroll-behavior: smooth; }

/* Never show in-app onboarding UI on landing pages */
.landing-dance .onboarding-minimized,
.landing-dance .onboarding-overlay,
.landing-dance .onboarding-checklist {
  display: none !important;
}

/* No Firefox-specific scroll fork: the old @supports (-moz-appearance: none)
   block made .landing-dance its own 100vh scroll container to work around the
   app CSS locking body scroll in Firefox. That body lock is gone (custom.css
   no longer forks Firefox), so Firefox uses the same scroll model as every
   other browser via the general mobile safeguards below. */

/* General mobile scrolling safeguards (covers Firefox on iOS/WebKit too) */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto;
    min-height: 100%;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    touch-action: pan-y; /* allow vertical panning */
  }
  .landing-dance {
    /* On small screens, prefer container scrolling to avoid global locks */
    overflow-y: auto !important;
    /* Clip any residual horizontal overflow and lock touch panning to the
       vertical axis, so the page only ever scrolls up/down (no left/right). */
    overflow-x: hidden !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    min-height: 100dvh;
    height: 100dvh;
  }
  /* Long unbreakable tokens (e.g. the contact email) must not force width on
     very narrow phones — let them wrap instead of causing overflow. */
  .landing-dance .landing-footer { overflow-wrap: anywhere; }
}

  /* Mobile-first spacing improvements */
@media (max-width: 767px) {
  /* Ensure full logo visibility on narrow devices */
  .landing-header .logo-pill { width:40px; height:40px; padding:0; display: flex; align-items: center; justify-content: center; }
  .landing-header .logo-icon { width:100%; height:100%; object-fit: contain; object-position: center; border-radius:8px; }
  /* Increase vertical breathing room on mobile */
  .landing-dance .hero { min-height: 50vh; }
  /* Tighten the hero top whitespace so the headline + CTA sit higher on phones.
     Only padding-top is reduced (bottom rhythm and desktop are untouched).
     !important overrides the generic `section` rule below and the row's py-5
     utility. The <=374px blocks further tune .hero .row padding-top after this. */
  .landing-dance section.hero { padding-top: 1.5rem !important; }
  .landing-dance .hero .row { padding-top: 1.5rem !important; }
  .landing-dance .hero h1 { font-size: 1.75rem; line-height: 1.3; }
  .landing-dance .hero .lead { font-size: 1rem; }

  /* Add more space between sections */
  .landing-dance section { padding-top: clamp(2.75rem, 8vw, 3.5rem) !important; padding-bottom: clamp(2.75rem, 8vw, 3.5rem) !important; }

  /* Compact feature cards on mobile */
  .landing-dance .benefits .border { padding: 1.25rem !important; }

  /* Increase line-height for better readability */
  .landing-dance p { line-height: 1.65; }

  /* Add spacing around content images without affecting header logo */
  .landing-dance section img { margin-top: 1.5rem; }

  /* More space around buttons */
  .landing-dance .btn { padding: 0.75rem 1.5rem; font-size: 1rem; }

  /* Give problem cards breathing room */
  .landing-dance .problem .border { margin-bottom: 0.75rem; }
}

/* Keep the hero testimonial above the fold on phones — even in Greek (longer
   text). The dream-outcome headline + one-line subhead + slim proof row must all
   fit the short-viewport budget (~iPhone SE, ~568px tall), so tighten the hero's
   vertical rhythm on phone widths. Larger screens keep the roomier spacing. */
@media (max-width: 575.98px) {
  .landing-dance section.hero { padding-top: .5rem !important; }
  .landing-dance .hero .row { padding-top: .5rem !important; }
  .landing-dance .hero h1 { margin-bottom: .5rem !important; line-height: 1.2; }
  .landing-dance .hero .lead { margin-bottom: .55rem !important; line-height: 1.4; }
  .landing-dance .hero h2.h5 { font-size: .9rem; margin-bottom: .5rem !important; }
  .landing-dance .hero .trusted-highlight { padding: .55rem .8rem; }
}

/* Fine-tune for narrow devices so hero stays above the fold with trust chip */
@media (max-width: 340px) {
  .landing-dance .hero { min-height: 44vh; }
  .landing-dance .hero .lead { margin-bottom: .75rem !important; }
  .landing-dance .trusted-chip { padding: .2rem .4rem; }
  .landing-dance .trusted-by .trusted-logo { height: 22px; }
  .landing-dance .trusted-by .trusted-label { font-size: .75rem; }
  /* Reduce vertical padding applied by utility classes inside hero row */
  .landing-dance .hero .row { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
}

@media (min-width: 341px) and (max-width: 374px) {
  .landing-dance .hero { min-height: 46vh; }
  .landing-dance .hero .row { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .landing-dance .trusted-by .trusted-logo { height: 24px; }
}

@media (min-width: 375px) and (max-width: 400px) {
  .landing-dance .trusted-by .trusted-logo { height: 26px; }
}

@media (min-width: 401px) and (max-width: 767px) {
  .landing-dance .trusted-by .trusted-logo { height: 28px; }
}

/* Align mobile dashboard bullets cleanly */
.landing-dance .dashboard-bullets li { display:flex; align-items:flex-start; gap:.5rem; }
.landing-dance .dashboard-bullets li i.bi { margin-top: .2rem !important; line-height: 1; flex: 0 0 auto; }
.landing-dance .dashboard-bullets li span { line-height: 1.4; display:block; }

/* Sticky CTA (mobile) */
.landing-dance .sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  background: #fff;
  border-top: 1px solid var(--border, rgba(0,0,0,0.1));
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  transform: translateY(0);
  transition: transform .2s ease-in-out;
  display: none;
}
.landing-dance .sticky-cta.hidden { transform: translateY(110%); }
@media (max-width: 767px) {
  .landing-dance .sticky-cta { display: block; }
  /* Prevent content being hidden under the sticky bar */
  .landing-dance { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* "Read more" for long SEO prose (all viewports).
   Text stays fully in the DOM (clipped via max-height, never display:none),
   so it stays crawlable; only the visual height is reduced. Applied on
   desktop too to cut clutter on the core path (Toptal "cut the clutter"). */
.landing-dance .seo-readmore-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.landing-dance .seo-clamp {
  max-height: 7.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.landing-dance .seo-readmore-cb:checked ~ .seo-clamp {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.landing-dance .seo-readmore-label {
  display: inline-block;
  margin-top: .25rem;
  color: var(--landing-primary);
  font-size: .875rem;
  cursor: pointer;
  text-decoration: underline;
}
.landing-dance .seo-readmore-cb:checked ~ .seo-readmore-label { display: none; }

/* ── Leanness white-space pass — layout only, SEO-safe (no content/keywords) ── */
/* More air between feature bullets; remove the dead space after the last one */
.landing-dance .product ul li { margin-bottom: 1.35rem !important; }
.landing-dance .product ul li:last-child { margin-bottom: 0 !important; }
.landing-dance .product ul li .text-muted.small { margin-top: .15rem; line-height: 1.5; }

/* Cap line length so body copy scans (NN/g 60–75ch); the SEO block ran ~90–100ch */
.landing-dance .product p,
.landing-dance .feature-jobs p,
.landing-dance .seo-clamp p { max-width: 65ch; }

/* ── Dark-theme defense — landing pages are LIGHT ONLY ──────────────────────
   The app applies a global dark theme via html[data-theme="dark"] (theme.js
   defaults to dark when the OS prefers dark). On the landing's light surfaces
   that turns headings/copy near-white and unreadable. These rules re-pin the
   landing palette; the `[data-theme="dark"] .landing-dance` prefix out-specifies
   the global dark rules so the public marketing pages always render light. */
[data-theme="dark"] .landing-dance { color: var(--landing-text); background: var(--landing-surface-alt); }
[data-theme="dark"] .landing-dance h1,
[data-theme="dark"] .landing-dance h2,
[data-theme="dark"] .landing-dance h3,
[data-theme="dark"] .landing-dance h4,
[data-theme="dark"] .landing-dance h5,
[data-theme="dark"] .landing-dance h6,
[data-theme="dark"] .landing-dance .text-dark,
[data-theme="dark"] .landing-dance .hero .lead,
[data-theme="dark"] .landing-dance .hero .small,
[data-theme="dark"] .landing-dance .hero h2 { color: var(--landing-text) !important; }
[data-theme="dark"] .landing-dance p,
[data-theme="dark"] .landing-dance li,
[data-theme="dark"] .landing-dance .text-muted { color: var(--landing-muted) !important; }
[data-theme="dark"] .landing-dance .text-success { color: var(--landing-success) !important; }
[data-theme="dark"] .landing-dance .text-primary,
[data-theme="dark"] .landing-dance .link-primary { color: var(--landing-primary) !important; }
/* keep light surfaces light so the dark text stays legible on them */
[data-theme="dark"] .landing-dance .bg-white { background-color: #fff !important; }
[data-theme="dark"] .landing-dance .bg-light { background-color: var(--landing-surface-alt) !important; }
[data-theme="dark"] .landing-dance .card { background-color: #fff; border-color: var(--landing-border); }
[data-theme="dark"] .landing-dance .border,
[data-theme="dark"] .landing-dance .border-top { border-color: var(--landing-border) !important; }

/* The /dance long-form FAQ <dl> had no spacing styling */
.landing-dance .faq-list dt { margin-top: 1.5rem; }
.landing-dance .faq-list dt:first-child { margin-top: 0; }
.landing-dance .faq-list dd { margin: .35rem 0 0; max-width: 70ch; }
.landing-dance .faq-item summary { line-height: 1.4; }

/* A touch more air under the problem-card titles */
.landing-dance .problem .border .fw-semibold { margin-bottom: .4rem !important; }

/* Room under the "Most Popular" pricing badge so it clears the tier label */
.landing-dance #pricing .col-md-5 .position-relative { padding-top: 2.25rem !important; }

/* Hero keyword H2 reads as its own line (the H2 text + tag are untouched) */
.landing-dance .hero h2.h5 { margin-top: .25rem; margin-bottom: 1.75rem !important; }

/* Closing CTA breathes more above + a comfortable measure */
.landing-dance #cta { padding-top: clamp(4rem, 8vw, 7rem) !important; }
.landing-dance #cta p { max-width: 48ch; margin-left: auto; margin-right: auto; }