/* Auto-generated from mockup/pomifera-faqs.html — do not edit by hand */

/* FAQs page — scoped under .faqs to avoid leaking */
    .faqs {
      --pom-cream:      #F5F1EA;
      --pom-olive:      #6F7F4F;
      --pom-olive-dark: #5A6A40;
      --pom-deep-green: #2F4A3C;
      --pom-text:       #1A1A1A;
      --pom-muted:      #6D6D6D;
      --pom-border:     #E6DECF;
      color: var(--pom-text);
      font-family: 'Inter', sans-serif;
      background: #f8f6f2;
    }
    .faqs h1, .faqs h2, .faqs h3, .faqs h4, .faqs h5, .faqs h6, .faqs .serif {
      font-family: 'kudryashev-d-contrast', 'Playfair Display', serif;
      font-weight: 400;
      letter-spacing: -0.005em;
    }

    /* Section 1 — Hero / title */
    .f-hero {
      padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
      background: var(--pom-cream);
      text-align: center;
    }
    .f-hero h1 {
      font-size: clamp(2.5rem, 6vw, 5rem);
      color: var(--pom-deep-green);
      margin: 0 0 1rem;
      line-height: 1.1;
    }
    .f-hero p {
      color: var(--pom-muted);
      max-width: 52ch; margin: 0 auto;
      font-size: 1rem; line-height: 1.6;
    }

    /* Section 2 — FAQ groups */
    .f-list { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); background: #fff; }
    .f-group { max-width: 880px; margin: 0 auto; }
    .f-group + .f-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
    .f-group .f-group-title {
      font-size: clamp(1.5rem, 2.6vw, 2.25rem);
      color: var(--pom-deep-green);
      margin-bottom: 1.5rem;
      padding-bottom: .75rem;
      border-bottom: 2px solid var(--pom-olive);
    }
    .f-list details { border-bottom: 1px solid var(--pom-border); }
    .f-list details summary {
      list-style: none;
      cursor: pointer;
      padding: 1.35rem 0;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem;
      font-size: 1.1rem;
      color: var(--pom-deep-green);
      font-weight: 500;
      transition: color .2s;
    }
    .f-list details summary::-webkit-details-marker { display: none; }
    .f-list details summary::after {
      content: "";
      width: 14px; height: 14px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236F7F4F'><path d='M4.4 6.2a.8.8 0 0 1 1.1 0L8 8.7l2.5-2.5a.8.8 0 0 1 1.1 1.1L8.6 10.4a.8.8 0 0 1-1.1 0L4.4 7.3a.8.8 0 0 1 0-1.1z'/></svg>");
      background-size: contain;
      background-repeat: no-repeat;
      flex-shrink: 0;
      transition: transform .25s ease;
    }
    .f-list details[open] summary::after { transform: rotate(180deg); }
    .f-list details summary:hover { color: var(--pom-olive); }
    .f-list details p,
    .f-list details ul {
      margin: 0 0 1.35rem;
      padding-right: 2rem;
      font-size: 1rem; line-height: 1.75;
      color: var(--pom-text);
    }
    .f-list details a { color: var(--pom-olive); }
    .f-list details a:hover { color: var(--pom-olive-dark); }