/* S8 · FAQ (SITE-27): Corgi's FAQ, 1:1 (founder's favourite). Values read off corgi.insure's live DOM
   (design/review/v2/SITE-27/round-1/README.md): an 800px frame on its own pair of rails (the page rails step in to the
   frame's edges for this section), full-bleed rules along the frame's top and bottom, radius 24 (Corgi's; the founder
   asked for this card 1:1), a raised card with a 24px ink glow inside a white frame with a 5% glow, 57px rows. */
/* Founder, 2026-10-31 ~01:43 ("closer to Corgi's, with the colour and shadow"): Corgi's neutral greys and shadows,
   1:1 from its live DOM, scoped to this section (a founder ruling over the no-greys rule; not tokens). */
[data-section="faq"] {
  --faq-w: 800px;
  --faq-r: 24px;
  --corgi-band: #F6F6F6;      /* Corgi's page, rgb(246,246,246); the card is the same grey */
  --corgi-line: #E1E1E1;      /* Corgi's rails, rules and frame border */
  --corgi-text: #4A4A4A;      /* questions, chevrons, answers */
  --corgi-tab: #1D1D1D;       /* the tab's line */
  /* the section's own rails sit on the frame's edges: the column's, stepped in */
  --faq-rail: max(calc(50% - var(--faq-w) / 2), var(--rail-inset));
  position: relative; z-index: 3; isolation: isolate; overflow-x: clip;
  background: var(--corgi-band); border-top-color: var(--corgi-line);
  padding-block: clamp(var(--s-12), 32px + 3.4vw, var(--s-20));
}
/* Corgi swaps its column rails for the frame's pair inside this section. */
[data-section="faq"]::before, [data-section="faq"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--corgi-line); pointer-events: none; z-index: 0;
}
[data-section="faq"]::before { left: var(--faq-rail); }
[data-section="faq"]::after { right: var(--faq-rail); }
.faq__in { position: relative; z-index: 1; }

/* The title: Bolton 48/48, centred on the frame (Corgi). No numeral (founder, 2026-10-31). */
.faq__head { display: flex; justify-content: center; }
.faq__titlebox { position: relative; }
.faq__title { line-height: 1; letter-spacing: var(--track-display); text-align: center; }

/* The band carries the two full-bleed rules, under the frame: at its top and bottom edges. */
.faq__band { position: relative; margin-top: var(--s-6); }
.faq__band::before, .faq__band::after {
  content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--corgi-line); pointer-events: none;
}
.faq__band::before { top: 0; }
.faq__band::after { bottom: 0; }

/* The white frame (the tab), flush to the section's rails, and the raised grey card inside it. */
.faq__frame {
  position: relative; z-index: 1;
  width: min(var(--faq-w), 100% + 2 * var(--inset));
  margin-inline: max(calc(-1 * var(--inset)), calc((100% - var(--faq-w)) / 2));
  background: #FFFFFF; border: 1px solid var(--corgi-line); border-radius: var(--faq-r);
  box-shadow: 0 0 24px rgba(25, 25, 25, .05);
}
/* Velo (SITE-33, placement C): an absolute box at the card's top-right, under the card, so he peeks over its rim
   with his lower half hidden behind it. */
.faq__peek { position: absolute; z-index: 0; top: 0; right: clamp(20px, 6%, 56px); }
.faq__peek > .faq__velo { position: absolute; right: 0; bottom: calc(var(--velo-h) * -.5); }
.faq__card {
  position: relative; z-index: 1; margin: -1px; display: flex; flex-direction: column;
  padding: 14px var(--s-6); /* 24 − the buttons' 10px tap padding, so the first question sits 24px in, as Corgi's */
  background: var(--corgi-band); border-radius: var(--faq-r);
  box-shadow: 0 0 24px rgba(25, 25, 25, .35);
}

/* A row: the question is a 44px tap target; with 6px either side of the rule the pitch is Corgi's 57px. */
.faq__q { font: inherit; }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; min-height: 44px; padding-block: 10px; text-align: left;
  font: 700 16px/1.2 var(--font-body); letter-spacing: -.24px; color: var(--corgi-text);
  transition: color var(--dur-fast);
}
.faq__btn:hover, .faq__btn[aria-expanded="true"] { color: #191919; }
.faq__btn:focus-visible { outline-offset: 2px; }
.faq__chev { flex: none; width: 16px; height: 16px; color: var(--corgi-text); transition: transform 500ms var(--ease-out); }
.faq__btn[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__rule { height: 1px; margin-block: 6px; background: var(--corgi-line); }

/* The answer: without JS it's simply open. faq.js collapses it and animates height (Corgi: 500ms, the same curve). */
.faq__a-in { padding: 2px 0 12px; font: 400 16px/1.5 var(--font-body); letter-spacing: -.24px; color: var(--corgi-text); max-width: 64ch; text-wrap: pretty; }
.faq.is-ready .faq__a { overflow: hidden; height: 0; transition: height 500ms var(--ease-out); }
.faq.is-ready .faq__a[data-open] { height: auto; }
/* Once open and settled (faq.js clears the inline height), stop clipping, so a link's tap area can reach past the text. */
.faq.is-ready .faq__a[data-open]:not([style*="height:"]) { overflow: visible; }
/* Links inside an answer (faq() items with aHtml): underlined as Corgi's, with a 44px tap area from padding on the inline
   box (vertical padding on an inline box doesn't move the lines; the side padding is cancelled by negative margins; raised so
   the next line's text doesn't cover the lower half of it). */
.faq__a-in a { position: relative; z-index: 1; color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; padding: 12px 8px; margin: 0 -8px; border-radius: 4px; }
.faq__a-in a:hover { color: #191919; }
.faq.is-ready .faq__a-in { opacity: 0; transform: translateY(-8px); filter: blur(2px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), filter 500ms var(--ease-out); }
.faq.is-ready .faq__a[data-open] .faq__a-in { opacity: 1; transform: none; filter: none; }

/* The tab beneath: Geist 16/24 on white. The link is the orange's text step (5.6:1, AA: SITE-26 verdict 1), not Corgi's #FF5C00 (3:1). */
.faq__tab { padding: 17px var(--s-6) 18px; text-align: center; font-size: 16px; line-height: 24px; color: var(--corgi-tab); text-wrap: balance; }
.faq__tab a { color: var(--orange-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast); }
.faq__tab a:hover { text-decoration-color: currentColor; }
.faq__tab a { display: inline-block; padding: 10px 4px; margin: -10px -4px; } /* a 44px tap target without moving the line */

@media (max-width: 600px) {
  .faq__card { padding-inline: var(--s-5); }
  .faq__btn { align-items: flex-start; }
  .faq__chev { margin-top: 2px; }
  .faq__tab { padding-inline: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__chev, .faq.is-ready .faq__a, .faq.is-ready .faq__a-in { transition: none; }
}