/* ==========================================================================
   08 FAQ (#faq). Boards d12-faq (1280) and m12-faq (390), snapshot v353.
   Up to 767px follows the phone board; 768px up takes the desktop card sizes;
   1024px up is the desktop board exactly (body 16.64px, as the desktop boards).
   Glass cards and chips over the board's brighter light pools (D-154).
   With JavaScript off every answer of every topic is visible and the
   filter is not shown (D-130). 08-faq.js adds .faq--js, which turns the filter on.
   Topics (D-167): the number of chips drives the layout. On phones up to 3 chips
   share one row in equal columns (the board); from 4 up the row becomes the
   shared swipe row (site.css 6i, .nv-swipe-auto) with its hint. No count is typed.
   ========================================================================== */

/* the answer opens by height where the browser supports ::details-content */
:root{interpolate-size:allow-keywords}

#faq{position:relative;isolation:isolate;overflow:clip;padding:48px 0 56px;--nv-ga:.89}   /* the brand glass floor; .90 was tried on 11 Oct and moved the worst answer only 6.97 to 6.98 */

/* light pools: placed from the centre of the section so they sit where the board has them at any width */
#faq .faq__glows{position:absolute;inset:0;z-index:0;pointer-events:none}
#faq .faq__glows .glow{position:absolute;border-radius:50%}
#faq .faq__g1{left:calc(50% + 45px);top:120px;width:400px;height:400px;filter:blur(30px);
  background:radial-gradient(circle,rgba(0,95,214,.85) 0%,rgba(0,95,214,.42) 34%,rgba(0,95,214,0) 68%)}
#faq .faq__g2{left:calc(50% - 365px);top:300px;width:400px;height:400px;filter:blur(30px);
  background:radial-gradient(circle,rgba(0,95,214,.80) 0%,rgba(132,185,255,.22) 34%,rgba(0,95,214,0) 68%)}
#faq .faq__g3{left:calc(50% + 65px);top:470px;width:170px;height:170px;filter:blur(18px);
  background:radial-gradient(circle,rgba(23,212,208,.45) 0%,rgba(23,212,208,0) 66%)}

#faq .faq__wrap{position:relative;z-index:1;max-width:820px}
#faq .faq__h{text-align:center}

/* topic filter: shown only when the script has run. One row, one equal column per chip (3 today, as the board) */
#faq .faq__filter{display:none;margin-top:24px;gap:8px}
#faq.faq--js .faq__filter{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#faq .faq__hint{margin-top:20px}
#faq:not(.faq--js) .faq__hint{display:none}          /* no filter without the script, so no hint either */
#faq .faq__chip{box-sizing:border-box;width:100%;min-height:44px;padding:8px;border-radius:var(--radius);
  border:1px solid #4A6FA8;background:rgba(9,33,78,var(--nv-ga));color:var(--muted);
  font-family:var(--font-display);font-size:15px;font-weight:500;line-height:1.2;text-align:center;text-wrap:balance;cursor:pointer}
#faq .faq__chip[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--navy)}
@media (hover:hover){
  #faq .faq__chip[aria-pressed="false"]:hover{border-color:var(--blue-300);color:var(--bone)}
}

/* Phones, 4 chips or more (D-167): the shared swipe row. Chips size to their words and stay on one
   line; the next one peeks in at the edge. 08-faq.js adds .nv-swipe-on where :has() is missing. */
@media (max-width:767px){
  #faq.faq--js .faq__filter:is(:has(> :nth-child(4)),.nv-swipe-on){display:flex;margin-top:10px}
  #faq.faq--js .faq__filter:is(:has(> :nth-child(4)),.nv-swipe-on) .faq__chip{width:auto;padding:8px 16px;white-space:nowrap;text-wrap:nowrap}
}

/* the questions */
#faq .faq__list{margin-top:28px;display:flex;flex-direction:column;gap:12px}
#faq .faq__topic{display:flex;flex-direction:column;gap:12px}
#faq.faq--js .faq__topic{display:none}
#faq.faq--js .faq__topic.is-on{display:flex}

#faq details{margin:0}
/* The glass card's top sheen (site.css .nv-glass: bone .06 fading out over min(46%,120px)) stops at 56px on the
   FAQ cards, so it lights the question row and never the answer under it (11 Oct: the sheen, not the tint, held
   the first answer line of "On the day" at 6.97:1 over the brightest pool; without it, 7.41:1). A closed card is
   under 122px tall, where 46% is already less than 56px, so it looks exactly as before; only an open card's
   sheen is shorter. */
#faq details.nv-glass{background:linear-gradient(180deg,rgba(244,241,234,.06),rgba(244,241,234,0) min(46%,56px)),rgba(9,33,78,var(--nv-ga,.89))}
#faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;box-sizing:border-box;padding:16px;
  border-radius:var(--radius);cursor:pointer;font-family:var(--font-display);font-size:17px;font-weight:500;line-height:1.35;color:var(--bone);
  transition:background-color 150ms ease-out}
#faq details[open]>summary{border-radius:var(--radius) var(--radius) 0 0}
@media (hover:hover){#faq summary:hover{background-color:rgba(132,185,255,.06)}}
#faq .faq-ic{flex-shrink:0;transition:transform 150ms ease-out,color 150ms ease-out}
#faq details[open]>summary .faq-ic{transform:rotate(45deg);color:var(--teal-hi)}
#faq details>p{box-sizing:border-box;max-width:693px;padding:0 16px 18px;font-size:16px;line-height:1.6;color:var(--muted)}

@supports selector(::details-content){
  #faq details::details-content{height:0;overflow:clip;transition:height 250ms ease-out,content-visibility 250ms ease-out allow-discrete}
  #faq details[open]::details-content{height:auto}
}

/* the phone number in the answer: teal as the board has it (T6 overruled, D-159); the full stop sits tight after it (S11) */
#faq .faq__link{display:inline-block;padding:13px 0;margin:-13px 0;font-weight:600;white-space:nowrap;color:var(--teal);text-decoration:none;
  transition:color 150ms ease-out}
#faq a.faq__link:hover,#faq a.faq__link:focus-visible{color:var(--teal-hi)}
/* a source line that ends an answer (D-184): the link wraps with the text, and the line sits closer to its answer */
#faq .faq__link--wrap{display:inline;white-space:normal}
#faq details>p.faq__src{margin-top:-8px}

@media (min-width:768px){
  #faq{padding:64px 0 96px}
  #faq .faq__g1{left:calc(50% + 80px);top:60px;width:560px;height:560px;filter:blur(36px)}
  #faq .faq__g2{left:calc(50% - 640px);top:250px;width:520px;height:520px;filter:blur(36px)}
  #faq .faq__g3{left:calc(50% + 220px);top:500px;width:220px;height:220px;filter:blur(22px)}
  #faq .faq__filter{margin-top:28px;gap:12px}
  #faq.faq--js .faq__filter{display:flex;flex-wrap:wrap;justify-content:center}
  #faq .faq__chip{width:auto;padding:10px 20px}
  #faq .faq__list{margin-top:40px;gap:16px}
  #faq .faq__topic{gap:16px}
  /* the desktop board's summary is content-box (min-height 44 on top of 18px padding), which renders each card 80px tall: kept as drawn */
  #faq summary{box-sizing:content-box;padding:18px 20px;line-height:1.55}
  #faq details>p{padding:0 20px 18px}
}
@media (min-width:1024px){
  #faq details>p{font-size:16.64px;line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  #faq summary,#faq .faq-ic,#faq .faq__link{transition:none!important}
  #faq details::details-content{transition:none!important}
}
/* print: every topic, no filter */
@media print{
  #faq.faq--js .faq__topic{display:flex!important}
  #faq.faq--js .faq__filter{display:none!important}
}