/* THE FAQ PAGE. Drawn in the site's own tokens from /header.css: the moving water behind
   everything, as on the home page; the questions on the tint below the wave. */
body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--water); }
/* A short page still ends at the window's bottom: the main part takes the spare height. */
body { display: flex; flex-direction: column; min-height: 100svh; }
body > main { flex: 1 0 auto; }
.faq-water { position: fixed; inset: 0; z-index: 0; display: block; }
.faq-top, .faq-main, .site-head { position: relative; z-index: 1; }
.site-head { position: sticky; z-index: 60; }

/* TOP: title, lead and topic chips left; the cat on its float right. */
.faq-hero { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 30px 20px 0;
            display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; }
.faq-hero__title { font-family: var(--font-italic); font-weight: 400; font-size: 64px; line-height: 1.05;
                   color: var(--ink); margin: 0; }
.faq-hero__lead { font-size: 20px; font-weight: 500; line-height: 1.45; color: var(--green);
                  max-width: 520px; margin: 16px 0 22px; }
.faq-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-chip { padding: 8px 16px; border-radius: var(--r-pill); background: var(--white-veil);
            color: var(--green); font-weight: 700; font-size: 14px; letter-spacing: .04em;
            text-transform: uppercase; text-decoration: none; box-shadow: var(--e1);
            transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.faq-chip:hover { background: var(--teal); color: var(--white); }
.faq-hero__cat { width: 320px; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(13,43,46,.25)); }
.faq-wave { display: block; width: 100%; height: 72px; margin: 10px 0 -1px; fill: var(--tint); }

/* THE QUESTIONS: one column at a reading width, a white card each, opening in place. */
.faq-main { background: var(--tint); padding: 10px 20px 70px; }
.faq-group, .dz-text { max-width: 820px; margin: 0 auto 40px; scroll-margin-top: 60px; }
.faq-search { max-width: 820px; margin: 30px auto 40px; }
.faq-search input { box-sizing: border-box; width: 100%; height: 52px; padding: 0 18px;
                    font: inherit; font-size: 17px; color: var(--ink); background: var(--white);
                    border: 1.5px solid var(--line); border-radius: var(--r-pill); outline: none; box-shadow: var(--e1);
                    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.faq-search input::placeholder { color: var(--ink-mute); opacity: 1; }
.faq-search input:hover { border-color: var(--mint); }
.faq-search input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--tint); }
.faq-search__none { text-align: center; color: var(--ink-mute); margin: 18px 0 0; }
.faq-search__none p { margin: 0 0 14px; }
.faq-group__title, .dz-title { font-family: var(--font-italic); font-weight: 400; font-size: 38px;
                    color: var(--ink); margin: 0 0 16px; text-align: center; }
.faq-q { background: var(--white); border-radius: var(--r3); box-shadow: var(--e1);
         margin: 0 0 12px; transition: box-shadow var(--t) var(--ease); }
.faq-q[open] { box-shadow: var(--e2); }
.faq-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
                 padding: 20px 24px; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary h3 { flex: 1; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.faq-q summary:hover h3 { color: var(--green); }
/* The mark: a coral plus that turns into a minus. */
.faq-q__mark { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-pill);
               background: var(--tint); }
.faq-q__mark::before, .faq-q__mark::after { content: ""; position: absolute; left: 50%; top: 50%;
               width: 14px; height: 3px; border-radius: 2px; background: var(--coral);
               transform: translate(-50%, -50%); transition: transform var(--t) var(--ease); }
.faq-q__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[open] .faq-q__mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-q p { margin: 0; padding: 0 24px 22px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.faq-q p a { color: var(--green); font-weight: 700; }

/* CLOSING CALL: the viewer's own closing words and the two ways in. */


.menu[hidden] { display: none; }

@media (max-width: 950px) {
  .faq-hero__cat { width: 240px; }
  .faq-hero__title { font-size: 52px; }
}
@media (max-width: 700px) {
  .faq-hero { grid-template-columns: 1fr; text-align: center; padding-top: 16px; gap: 6px; }
  .faq-hero__title { font-size: 40px; }
  .faq-hero__lead { font-size: 17px; margin: 12px auto 18px; }
  .faq-chips { justify-content: center; }
  .faq-hero__cat { width: 200px; margin: 0 auto; order: -1; }
  .faq-group__title { font-size: 30px; }
  .faq-q summary { padding: 16px 18px; }
  .faq-q summary h3 { font-size: 17px; }
  .faq-q p { padding: 0 18px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .faq-q__mark::before, .faq-q__mark::after { transition: none; } }

/* The Offer section: the home page's offer panel, wider than a question list. */
.faq-offer { max-width: 1200px; scroll-margin-top: 90px; }
.faq-offer__lead { max-width: 820px; margin: 0 auto 24px; text-align: center; font-size: 18px; line-height: 1.5; color: var(--green); }
/* The menu's FAQ link lands on the questions, below the Offer section. */
#faq { scroll-margin-top: 90px; }

/* The Offer page's cat: the integration picture, a little smaller than the float cat. */
.faq-hero__cat--integration { width: 280px; height: auto; }
@media (max-width: 950px) { .faq-hero__cat--integration { width: 220px; } }
@media (max-width: 700px) { .faq-hero__cat--integration { width: 180px; } }
/* Pleasant Street's welcoming committee: a wide picture, the biggest of the hero cats. */
.faq-hero__cat--committee { width: min(560px, 45vw); }
@media (max-width: 950px) { .faq-hero__cat--committee { width: 400px; } }
@media (max-width: 700px) { .faq-hero__cat--committee { width: 100%; max-width: 360px; } }

/* The Offer page's hero: its cat is shorter than the text, so the text needs its own room under the header. */
.faq-hero:has(.faq-hero__cat--integration) { padding-top: 64px; }
@media (max-width: 950px) { .faq-hero:has(.faq-hero__cat--integration) { padding-top: 44px; } }
@media (max-width: 700px) { .faq-hero:has(.faq-hero__cat--integration) { padding-top: 16px; } }
.faq-q .who-table-wrap { padding: 0 24px 22px; }
@media (max-width: 700px) { .faq-q .who-table-wrap { padding: 0 18px 18px; } }