/* FAQ (pages v2) — sticky search + topic nav, grouped accordion. Pairs with faq.js. Ids/classes use f-.
   Closed answers are hidden only under html.f-js (inline flag in <head>), so no-JS users see every answer.
   Height animation = grid-template-rows 0fr -> 1fr (no measuring, no layout thrash); reduced motion = instant. */
.f-sec{padding-top:clamp(96px,10vw,150px)}
.f-head .pv-lede a,.pv-hero .pv-lede a{color:#fff;text-decoration:underline;text-decoration-color:rgba(63,230,240,.6);text-underline-offset:3px}
.f-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(48px,6vw,110px);align-items:start}
.f-side{position:sticky;top:calc(var(--hdr-h,76px) + 28px)}

/* search */
.f-search{position:relative;display:flex;align-items:center}
.f-search[hidden]{display:none}
.f-search svg{position:absolute;left:18px;width:18px;height:18px;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.8;stroke-linecap:round;pointer-events:none;transition:stroke .3s}
.f-search input{width:100%;box-sizing:border-box;height:54px;padding:0 48px 0 48px;border-radius:999px;font:inherit;font-size:15px;color:#fff;
  background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.14);
  -webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s,background .3s}
.f-search input::placeholder{color:rgba(255,255,255,.42)}
.f-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.f-search input:focus{outline:none;border-color:rgba(63,230,240,.7);box-shadow:0 0 0 4px rgba(63,230,240,.14),0 0 34px rgba(63,230,240,.18)}
.f-search:focus-within svg{stroke:var(--cy)}
.f-clear{position:absolute;right:8px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0}
.f-clear[hidden]{display:none}
.f-clear:hover,.f-clear:focus-visible{background:rgba(63,230,240,.25)}
.f-count{margin:14px 4px 26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.f-count b{color:var(--cy);font-weight:600}

/* topic nav */
.f-nav ol{list-style:none;margin:0;padding:0;border-left:1px solid rgba(255,255,255,.1)}
.f-nav a{position:relative;display:grid;grid-template-columns:30px 1fr auto;align-items:baseline;gap:8px;padding:11px 0 11px 20px;color:rgba(255,255,255,.62);
  text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:color .3s}
.f-nav a::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;background:var(--cy);box-shadow:0 0 12px var(--cy);transform:scaleY(0);transition:transform .5s var(--pv-ease)}
.f-nav a span,.f-nav a em{font-family:var(--mono);font-size:10px;letter-spacing:.16em;font-style:normal;opacity:.6}
.f-nav a:hover,.f-nav a.on{color:#fff}
.f-nav a.on::before{transform:scaleY(1)}
.f-nav a.on em{color:var(--cy);opacity:1}
.f-nav a.dim{opacity:.32}

/* groups */
.f-group{scroll-margin-top:calc(var(--hdr-h,76px) + 24px)}
.f-group+.f-group{margin-top:clamp(64px,7vw,110px)}
.f-group[hidden]{display:none}
.f-ghead{display:flex;align-items:baseline;gap:18px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.16)}
.f-gn{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--cy)}
.f-gt{margin:0;font-size:clamp(30px,3vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1}
.f-gc{margin-left:auto;white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* accordion item */
.f-item{position:relative;border-bottom:1px solid rgba(255,255,255,.1);scroll-margin-top:calc(var(--hdr-h,76px) + 24px)}
.f-item[hidden]{display:none}
.f-item::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--cy),rgba(63,230,240,0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--pv-ease);pointer-events:none}
.f-item:hover::before,.f-item.open::before{transform:scaleX(1)}
.f-q{margin:0;font:inherit}
.f-q button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;
  padding:26px 0;color:#fff;font-size:clamp(19px,1.55vw,24px);font-weight:600;letter-spacing:-.022em;line-height:1.25;-webkit-tap-highlight-color:transparent}
.f-qn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:400;color:rgba(255,255,255,.4);transition:color .3s}
.f-qt{transition:color .3s,transform .6s var(--pv-ease)}
.f-q button:hover .f-qt{transform:translateX(6px)}
.f-q button:hover .f-qn,.f-item.open .f-qn{color:var(--cy)}
.f-q button:focus-visible{outline:2px solid var(--cy);outline-offset:4px;border-radius:12px}
.f-qt mark{background:rgba(63,230,240,.22);color:#fff;border-radius:4px;padding:0 2px;box-shadow:0 0 0 1px rgba(63,230,240,.35)}
/* plus -> minus */
.f-ic{position:relative;justify-self:end;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);transition:border-color .35s,background .35s,box-shadow .35s,transform .6s var(--pv-ease)}
.f-ic::before,.f-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;margin:-.8px 0 0 -7px;background:#fff;border-radius:2px;transition:transform .5s var(--pv-ease),background .3s}
.f-ic::after{transform:rotate(90deg)}
.f-q button:hover .f-ic{border-color:rgba(63,230,240,.6)}
.f-item.open .f-ic{background:var(--cy);border-color:var(--cy);box-shadow:0 0 26px rgba(63,230,240,.4);transform:rotate(180deg)}
.f-item.open .f-ic::before,.f-item.open .f-ic::after{background:#041014}
.f-item.open .f-ic::after{transform:rotate(0)}
/* answer panel */
.f-a-in{min-height:0;overflow:hidden}
.f-a p{margin:0;padding:0 56px 30px 56px;max-width:62ch;font-size:clamp(16px,1.15vw,18px);line-height:1.65;color:rgba(255,255,255,.76)}
.f-a a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(63,230,240,.6);text-underline-offset:3px}
.f-a a:hover{color:var(--cy)}
.f-dep{display:block;width:max-content;max-width:100%;margin-top:14px;padding:9px 14px;border-radius:12px;border:1px solid rgba(63,230,240,.35);
  background:rgba(63,230,240,.07);color:#fff;font-weight:600;font-size:.94em}
.f-js .f-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--pv-ease),visibility 0s linear .6s}
.f-js .f-item.open .f-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--pv-ease),visibility 0s}
.f-js .f-a-in>p{opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .6s var(--pv-ease)}
.f-js .f-item.open .f-a-in>p{opacity:1;transform:none;transition-delay:.08s}

/* no results */
.f-none{padding:42px 0 10px;border-top:1px solid rgba(255,255,255,.16);font-size:17px;color:rgba(255,255,255,.76)}
.f-none[hidden]{display:none}
.f-none p{margin:0 0 10px}
.f-none-t{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.025em;color:#fff}
.f-none a{color:#fff;font-weight:600}
.f-reset{margin-top:14px;font:inherit;font-size:14px;font-weight:600;color:#041014;background:var(--cy);border:0;border-radius:999px;min-height:44px;padding:0 20px;cursor:pointer}

@media (max-width:1023px){
  .f-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .f-side{position:relative;top:auto}
  .f-count{margin:12px 4px 14px}
  .f-nav ol{display:flex;gap:8px;border:0;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pv-side) * -1);padding:0 var(--pv-side) 4px;scroll-snap-type:x proximity}
  .f-nav ol::-webkit-scrollbar{display:none}
  .f-nav li{flex:none;scroll-snap-align:start}
  .f-nav a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-size:14px;white-space:nowrap}
  .f-nav a::before,.f-nav a span{display:none}
  .f-nav a.on{color:#041014;background:var(--cy);border-color:var(--cy)}
  .f-nav a.on em{color:#041014}
}
@media (max-width:767px){
  .f-sec{padding-top:72px}
  .f-group+.f-group{margin-top:56px}
  .f-ghead{gap:12px;padding-bottom:16px}
  .f-gt{font-size:clamp(25px,7.4vw,30px)}
  .f-gc{font-size:9.5px;letter-spacing:.14em}
  .f-q button{grid-template-columns:30px minmax(0,1fr) 40px;gap:8px;padding:20px 0;font-size:17.5px}
  .f-qn{font-size:10px}
  .f-ic{width:40px;height:40px}
  .f-q button:hover .f-qt{transform:none}
  .f-a p{padding:0 0 22px 38px;font-size:16px}
  .f-search input{height:52px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .f-js .f-a,.f-js .f-item.open .f-a,.f-js .f-a-in>p,.f-ic,.f-ic::before,.f-ic::after,.f-item::before,.f-qt,.f-nav a::before{transition:none!important}
}
