/* ---------- DARK ZONE (CTA + FAQ + FOOTER as one black ad-page band) ----------
     Sliced flat against the light reading region above — no fade, no gradient
     — to produce the "fold line" rhythm the page was missing (light → dark
     hard transition, ref.png-style). Child sections stay max-w-7xl centered;
     the wrapper provides full-bleed black across the viewport. */
  .dark-zone {
    /* Deep navy-black (was deep violet-black when the brand was purple).
       Shares the hue of the brand blue / the hero's sea but sits 8-10
       stops darker, so the light→dark transition feels like a
       color-temperature shift ("dusk over the water") rather than a
       slammed door. */
    background: #13243d;
    color: #d4d4d8;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  /* CTA banner inside the dark zone — strip the original light mesh + border
     + radius so the content sits directly on the black, editorial ad-page
     style. The white-pill button inverts so it pops against the dark band. */
  .dark-zone .cta-banner {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 80px 32px 64px;
    color: #f4f4f5;
  }
  .dark-zone .cta-banner-title { color: #f4f4f5; }
  .dark-zone .cta-banner-btn {
    background: #ffffff;
    color: #0e0e10;
    border-color: #ffffff;
  }
  .dark-zone .cta-banner-btn:hover {
    background: #f4f4f5;
    border-color: #f4f4f5;
  }

  /* FAQ — reverse polarity. Dividers use rgba white at low alpha so they
     stay hairline without lifting to muddy grey. */
  .dark-zone .section-title { color: #f4f4f5; }
  /* Section title accent — was brand blue on light; tuned to the page's
     violet/pink palette and the dark-zone hover color for consistency. */
  .dark-zone .section-title-accent { color: #93c5fd; }
  /* Carousel "← 横滑查看更多 →" hint — original #94949c muddies on black;
     a half-shade lighter keeps it readable while still feeling tertiary. */
  .dark-zone .pain-strip-hint { color: #a1a1aa; }

  .dark-zone .faq-list { border-top-color: rgba(255,255,255,0.10); }
  .dark-zone .faq-item { border-bottom-color: rgba(255,255,255,0.10); }
  .dark-zone .faq-q { color: #f4f4f5; }
  .dark-zone .faq-q:hover { color: #93c5fd; }
  .dark-zone .faq-chevron { color: #a1a1aa; }
  .dark-zone .faq-item.is-open .faq-chevron { color: #93c5fd; }
  .dark-zone .faq-a { color: #a1a1aa; }
  .dark-zone .faq-a a { color: #93c5fd; }
  .dark-zone .faq-a a:hover { color: #bfdbfe; }

  /* FAQ "加载更多 / 收起" toggle pair — extracted from inline styles into
     named classes so the dark cascade can recolor them cleanly. The dark
     overrides cover BOTH the global dark theme (html.dark — how the live
     page renders) and an always-dark band (.dark-zone); the FAQ block sits
     under html.dark, not inside a .dark-zone, so html.dark is what actually
     fires here. Without it the link would hover to near-black (#0e0e10),
     reading as "going dark" instead of lighting up like the feed toggle. */
  .faq-toggle-btn {
    border-color: rgba(14,14,16,0.12);
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1d;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  }
  .faq-toggle-btn:hover { background: #ffffff; }
  .faq-toggle-link {
    font-size: 13px;
    color: #5a5a62;
    transition: color 140ms ease;
  }
  .faq-toggle-link:hover { color: #0e0e10; }
  html.dark .faq-toggle-btn,
  .dark-zone .faq-toggle-btn {
    color: #f4f4f5;
    border-color: rgba(255,255,255,0.18);
  }
  html.dark .faq-toggle-btn:hover,
  .dark-zone .faq-toggle-btn:hover {
    background: rgba(255,255,255,0.06);
  }
  html.dark .faq-toggle-link,
  .dark-zone .faq-toggle-link { color: #a1a1aa; }
  html.dark .faq-toggle-link:hover,
  .dark-zone .faq-toggle-link:hover { color: #f4f4f5; }

  /* Feed "加载更多" — in light mode the Tailwind `hover:bg-white` flips the
     outline pill to a clean white fill. On the dark page that pure-white
     fill reads as a harsh flash, so dark mode borrows the 发布岛讯
     (.cta-banner-btn) hover feel instead: a barely-there translucent lift
     + slight rise, not a full repaint. Higher specificity than the
     `.hover\:bg-white:hover` utility, so no !important needed. */
  html.dark .feed-more-btn:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(14,14,16,0.32);
  }