/* site\assets\css\pages\faq.css: the FAQ page, as plan.md writes it. Only system.css's tokens. Parts: hero (a short band,
   the porch photo still under a navy wash on the words' side, her face at the right), faq (the search straddling the
   band's foot, the topics as buttons, every question by topic on warm white), close (the clip, the main button and a
   person). */

/* hero */
.faq-hero { display: flex; align-items: center; min-height: min(62svh, 540px); padding-block: clamp(56px, 7vw, 96px) clamp(88px, 9vw, 124px); overflow: hidden; }
.faq-hero__media::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 90%, transparent) 0%, color-mix(in srgb, var(--c-ink) 70%, transparent) 34%, color-mix(in srgb, var(--c-ink) 18%, transparent) 60%, transparent 78%); }
.faq-hero__photo { object-position: 72% 35%; }
.faq-hero__in { position: relative; z-index: 1; }
.faq-hero__title { max-width: 9.5em; font-size: var(--fs-h1); color: var(--c-paper); }
.faq-hero__line { max-width: 30em; margin: 18px 0 0; font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 90%, transparent); }

/* the search, straddling the band's foot, and the five topics as buttons under it */
.faq-page { padding-top: 0; }
.faq-find { position: relative; z-index: 2; max-width: 860px; margin: -38px auto var(--space-6); }
.faq-find__box { display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 26px; border-radius: 999px; background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--shadow-l); cursor: text; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.faq-find__box:focus-within { border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 60%, transparent), var(--shadow-l); }
.faq-find__box svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--c-ink); stroke-width: 2.2; stroke-linecap: round; }
.faq-find__box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: 500 1.1875rem/1 var(--font-ui); color: var(--c-ink); outline: none; }
.faq-find__box input::placeholder { color: var(--c-ink-soft); opacity: 1; }
.faq-find__topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.faq-find__topics a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--c-paper); border: 1px solid var(--c-line); font: 700 .9375rem/1 var(--font-ui); color: var(--c-ink); text-decoration: none; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.faq-find__topics a:hover, .faq-find__topics a:focus-visible { border-color: var(--c-gold); background: var(--c-gold-soft); }

/* every question by topic; each topic's name on a gold node, the site's motif */
.faq-topics { max-width: 860px; margin: 0 auto; }
.faq-topic { scroll-margin-top: 110px; }
.faq-topic + .faq-topic { margin-top: var(--space-6); }
.faq-topic__name { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: var(--fs-h3); color: var(--c-ink); }
.faq-topic__name::before { content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c-gold); background: var(--c-paper); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-gold) 18%, transparent); }
.faq-none { margin: 0; padding: 24px 0; font-size: 1.125rem; line-height: 1.5; color: var(--c-ink-soft); }
.faq-none a { font-weight: 700; color: var(--c-brand-text); }

/* close: the home page's closing band, with the main button, its note and a person */
.close { display: flex; align-items: flex-end; min-height: min(90svh, 880px); }
.close__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 20%, transparent) 0%, color-mix(in srgb, var(--c-ink) 12%, transparent) 30%, color-mix(in srgb, var(--c-ink) 74%, transparent) 60%, color-mix(in srgb, var(--c-ink) 96%, transparent) 100%); }
.close__media video { object-position: 60% 30%; }
.close__wrap { width: 100%; text-align: center; }
.close h2 { max-width: 15em; margin-inline: auto; font-size: var(--fs-h1); color: var(--c-paper); }
.close__line { max-width: 560px; margin: 16px auto 28px; font-size: 1.1875rem; line-height: 1.5; color: color-mix(in srgb, var(--c-paper) 90%, transparent); }
.close__cta { display: flex; flex-direction: column; align-items: center; }
/* his face is in the clip's right half, a little above the middle: the words stand at the left, clear of it */
.faq-close .close__media::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 86%, transparent) 0%, color-mix(in srgb, var(--c-ink) 58%, transparent) 38%, transparent 62%), linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c-ink) 70%, transparent) 100%); }
.faq-close .close__wrap { text-align: left; }
.faq-close h2 { max-width: 9em; margin-inline: 0; }
.faq-close .close__line { max-width: 30em; margin-inline: 0; }
.faq-close .close__cta { align-items: flex-start; }
.faq-close__person { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; margin-top: 14px; font: 700 1.0625rem/1.2 var(--font-ui); color: var(--c-paper); text-decoration: underline; text-decoration-color: var(--c-gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.faq-close__person .btn__arrow { width: 18px; height: 18px; }

@media (max-width: 700px) {
  .faq-hero { align-items: flex-end; min-height: 560px; padding-block: 64px 84px; }
  .faq-hero__media::after { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-ink) 10%, transparent) 30%, color-mix(in srgb, var(--c-ink) 78%, transparent) 62%, color-mix(in srgb, var(--c-ink) 94%, transparent) 100%); }
  .faq-hero__photo { object-position: 78% 30%; }
  .faq-find { margin-top: -32px; }
  .faq-find__box { height: 64px; padding: 0 20px; }
  .faq-find__box input { font-size: 1.0625rem; }
  .faq-find__topics { justify-content: flex-start; }
  .close__media video { object-position: 62% 30%; }
  /* the phone: his face in the clip's upper third, the words centred under it (the line gives way to the link) */
  .faq-close .close__media::after { background: linear-gradient(180deg, transparent 0%, transparent 34%, color-mix(in srgb, var(--c-ink) 76%, transparent) 56%, color-mix(in srgb, var(--c-ink) 96%, transparent) 100%); }
  .faq-close .close__wrap { text-align: center; }
  .faq-close h2 { margin-inline: auto; }
  .faq-close .close__line { display: none; }
  .faq-close .close__cta { align-items: center; }
}