/* Ported from faq/index.html - 1 <style> block(s), in document order.
   Cascade order is preserved: a later block in the source is a later rule
   here, which is what several of these rely on to override the shared
   layer. */

/* Hero: pure black (no radial gradient). Green H1. */
    .faq-hero {
      padding-top: 178px;
      padding-bottom: 122px;
      background: var(--ink);
    }
    .faq-hero .lede { max-width: 46ch; }
    .faq-hero h1.display { color: var(--brand-green); }

    /* NeeDoh branding-pattern overlay — cover + center left, 7% opacity */
    .faq-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('../images/branding-patterns/needoh-branding-pattern-2.svg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center left;
      opacity: 0.07;
      pointer-events: none;
      z-index: 0;
    }
    /* Ink sweep — fades pattern away toward the hero text on the left */
    .faq-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        var(--ink) 0%,
        var(--ink) 32%,
        rgba(35,31,32,0) 62%
      );
      pointer-events: none;
      z-index: 1;
    }

    /* Staggered hero reveal — matches other internal pages */
    @keyframes faq-hero-in {
      0%   { opacity: 0; transform: translateY(18px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .faq-hero .hero-split-text > * {
      animation: faq-hero-in 700ms cubic-bezier(.2,.7,.2,1) both;
    }
    .faq-hero .hero-split-text > *:nth-child(1) { animation-delay:  60ms; }
    .faq-hero .hero-split-text > *:nth-child(2) { animation-delay: 160ms; }
    .faq-hero .hero-split-text > *:nth-child(3) { animation-delay: 280ms; }
    .faq-hero .hero-split-text > *:nth-child(4) { animation-delay: 380ms; }
    @media (prefers-reduced-motion: reduce) {
      .faq-hero .hero-split-text > * { animation: none; }
    }

    /* Green square hero tile (empty — placeholder for photography) */
    .qa-tile {
      background: var(--brand-green);
      border-radius: 32px;
      aspect-ratio: 1 / 1;
      position: relative;
      overflow: hidden;
      box-shadow: 0 14px 32px -16px rgba(0,0,0,0.4);
    }

    /* FAQ groups — narrow reading width, centered, no dividers */
    .faq-group {
      padding: 72px 0;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Individual FAQ items — dotted dividers between items only */
    .faq-list {
      display: flex;
      flex-direction: column;
    }

    .faq-answer {
      padding: 4px 4px 28px 0;
      font-size: 16.5px;
      line-height: 1.65;
      color: var(--ink-soft);
      max-width: 68ch;
    }
    .faq-answer p { margin: 0 0 14px; }
    .faq-answer p:last-child { margin-bottom: 0; }
    .faq-answer .pending {
      font-size: 13px;
      color: var(--ink-mute);
      font-style: italic;
      background: var(--cream-2);
      padding: 10px 14px;
      border-radius: 12px;
      display: inline-block;
      margin-top: 6px;
    }
    .faq-answer .btn { margin-top: 16px; }

    .faq-cta-band {
      background: var(--ink);
      color: #fff;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .faq-cta-band h2 { color: #fff; }
    .faq-cta-band p  { color: rgba(255,255,255,0.82); max-width: 48ch; margin: 0 auto 24px; }
    .faq-cta-band .script-pop {
      color: var(--accent);
      font-family: var(--font-script);
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
    }