/* =========================================================
   Global Access Account-i — FAQ page
   Extends styles.css. Reuses its tokens, header, footer,
   .container, .btn and .section rhythm.
========================================================= */

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;border-radius:0 0 12px 0;background:var(--ink);color:#fff;font-weight:600}
.skip-link:focus{left:0}


/* Host-page hardening — see the matching note in styles.css. Bootstrap's
   .container clearfix pseudo-elements become grid items inside our wrappers. */
.faq-hero__inner::before,.faq-hero__inner::after,
.faq-body__inner::before,.faq-body__inner::after,
.faq-chips__row::before,.faq-chips__row::after{content:none;display:none}

/* Host-page hardening: inherited font-weight.
   libs.css resets span/i/em/a to font-weight:normal using bare element
   selectors, which outrank plain inheritance — so every inline element here
   that was meant to take its weight from its parent flattens to 400. On this
   page that is all 86 question texts. See the fuller note in styles.css. */
.faq-hero__codes i,
.faq-side__link span,
.faq-side__link em,
.faq-q__text,
.faq-q__mark,
.faq-item__jump span{font-weight:inherit}

/* ---------------------------------------------------------
   HERO — compact, dark, restrained
--------------------------------------------------------- */
.faq-hero{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(120% 140% at 82% 0%,#26262C 0%,#1A1A1E 42%,#131316 100%);
  color:#fff;padding:calc(var(--header-h-top) + clamp(38px,5vw,62px)) 0 clamp(44px,5vw,66px)}

.faq-hero__grid{position:absolute;inset:0;z-index:-3;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 20%,#000 30%,transparent 100%);
          mask-image:radial-gradient(80% 80% at 50% 20%,#000 30%,transparent 100%)}
.faq-hero__route{position:absolute;inset:0;z-index:-2;opacity:.5}
.faq-hero__route svg{width:100%;height:100%}
.faq-hero__route path{fill:none;stroke:rgba(255,204,0,.32);stroke-width:1.4;
  stroke-dasharray:5 9;stroke-linecap:round}
.faq-hero__codes{position:absolute;inset:0;z-index:-1;pointer-events:none;
  display:none;font-size:.7rem;letter-spacing:.2em;color:rgba(255,255,255,.13);font-weight:600}
.faq-hero__codes i{position:absolute;font-style:normal}
.faq-hero__codes i:nth-child(1){top:16%;right:6%}
.faq-hero__codes i:nth-child(2){top:34%;right:15%;color:rgba(255,204,0,.2)}
.faq-hero__codes i:nth-child(3){top:56%;right:4%}
.faq-hero__codes i:nth-child(4){top:74%;right:13%}
.faq-hero__codes i:nth-child(5){top:24%;right:26%}
.faq-hero__codes i:nth-child(6){top:66%;right:24%}
@media (min-width:1100px){.faq-hero__codes{display:block}}

.faq-hero__inner{position:relative;z-index:1}

/* breadcrumb — deliberately quiet */
.crumbs{margin-bottom:clamp(20px,3vw,30px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;list-style:none;
  font-size:.79rem;color:rgba(255,255,255,.48)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.26)}
.crumbs a{color:rgba(255,255,255,.62);border-radius:4px}
.crumbs a:hover{color:var(--yellow)}
.crumbs [aria-current="page"]{color:rgba(255,255,255,.9);font-weight:500}

.faq-hero__eyebrow{display:inline-flex;align-items:center;gap:.55em;margin-bottom:14px;
  font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--yellow)}
.faq-hero__eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--yellow)}
/* keep the product's lowercase italic "i" intact inside the uppercased eyebrow;
   the negative margin closes the gap the tracking leaves after the hyphen */
.faq-hero__eyebrow i{font-style:italic;text-transform:lowercase;
  letter-spacing:0;margin-left:-.14em;padding-right:.08em}
.faq-hero__title{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;line-height:1.05;letter-spacing:-.025em}
.faq-hero__lead{margin-top:16px;max-width:56ch;font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.62;color:var(--dark-muted)}

/* search */
.faq-search{margin-top:clamp(26px,3.4vw,38px);max-width:680px}
.faq-search__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.faq-search__field{position:relative;display:flex;align-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:16px;
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.faq-search__field:hover{border-color:rgba(255,255,255,.3)}
.faq-search__field:focus-within{background:rgba(255,255,255,.1);border-color:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,204,0,.18)}
.faq-search__ico{width:20px;height:20px;flex:none;margin-left:18px;fill:none;
  stroke:rgba(255,255,255,.55);stroke-width:1.9;stroke-linecap:round}
.faq-search__field input{flex:1;min-width:0;background:none;border:none;outline:none;
  padding:17px 14px;font-family:inherit;font-size:1rem;color:#fff}
.faq-search__field input::placeholder{color:rgba(255,255,255,.42)}
.faq-search__field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.faq-search__clear{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-right:10px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;transition:background .2s var(--ease)}
.faq-search__clear:hover{background:rgba(255,255,255,.22)}
.faq-search__clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.faq-search__help{margin-top:12px;font-size:.82rem;color:rgba(255,255,255,.45)}
.faq-search__help kbd{display:inline-block;padding:1px 6px;margin:0 1px;border-radius:5px;
  font-family:inherit;font-size:.74rem;font-weight:600;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}

/* ---------------------------------------------------------
   FAQ BODY — sticky side nav + content
--------------------------------------------------------- */
.faq-body{background:var(--ivory);padding-top:clamp(46px,6vw,76px);padding-bottom:clamp(56px,7vw,96px)}
.faq-body__inner{display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}

.faq-side{position:sticky;top:calc(var(--header-h) + 20px)}
.faq-side__label{font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;padding-left:14px}
.faq-side ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.faq-side__link{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;
  font-size:.92rem;font-weight:500;color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease)}
.faq-side__link svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.faq-side__link span{flex:1;min-width:0}
.faq-side__link em{font-style:normal;font-size:.78rem;color:var(--muted)}
.faq-side__link:hover{background:rgba(20,20,20,.045);color:var(--ink)}
.faq-side__link[aria-current="true"]{background:var(--ink);color:#fff;font-weight:600}
.faq-side__link[aria-current="true"] svg{opacity:1;stroke:var(--yellow)}
.faq-side__link[aria-current="true"] em{color:rgba(255,255,255,.6)}

/* mobile category chips */
.faq-chips{display:none}

/* ---------------------------------------------------------
   PANELS + ACCORDIONS
--------------------------------------------------------- */
.faq-content{min-width:0}
.faq-panel{scroll-margin-top:calc(var(--header-h) + 24px)}
.faq-panel+.faq-panel{margin-top:clamp(44px,5vw,68px)}
.faq-panel:focus{outline:none}
.faq-panel__head{margin-bottom:20px}
.faq-panel__num{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--gold)}
.faq-panel__title{margin-top:8px;font-size:clamp(1.35rem,2.1vw,1.7rem);font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.faq-panel__desc{margin-top:8px;max-width:62ch;font-size:.96rem;line-height:1.6;color:var(--muted)}

.faq-item{border-bottom:1px solid var(--line-2);scroll-margin-top:calc(var(--header-h) + 24px)}
.faq-item:first-of-type{border-top:1px solid var(--line-2)}

.faq-q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;
  padding:19px 4px;font-size:1.02rem;font-weight:600;line-height:1.5;color:var(--ink);
  transition:color .2s var(--ease)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--gold)}
.faq-q:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.faq-q__text{flex:1;min-width:0}

/* plus -> minus */
.faq-q__mark{position:relative;flex:none;width:26px;height:26px;margin-top:1px;border-radius:50%;
  background:var(--soft);transition:background .25s var(--ease),transform .3s var(--ease)}
.faq-q__mark::before,.faq-q__mark::after{content:"";position:absolute;top:50%;left:50%;
  width:11px;height:2px;border-radius:2px;background:var(--ink-2);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),background .25s var(--ease)}
.faq-q__mark::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-q:hover .faq-q__mark{background:#FFF3C9}
.faq-item[open] .faq-q__mark{background:var(--yellow);transform:rotate(180deg)}
.faq-item[open] .faq-q__mark::before,
.faq-item[open] .faq-q__mark::after{background:#1a1400}
.faq-item[open] .faq-q__mark::after{transform:translate(-50%,-50%) rotate(0deg)}

.faq-a{padding:0 62px 22px 4px;max-width:74ch}
.faq-a p{font-size:.96rem;line-height:1.7;color:var(--ink-2)}
.faq-a p+p{margin-top:11px}
.faq-a__note{margin-top:12px !important;font-size:.83rem !important;color:var(--muted) !important}
.faq-a__list,.faq-a__steps{margin-top:12px;display:flex;flex-direction:column;gap:8px;
  font-size:.96rem;line-height:1.65;color:var(--ink-2)}
.faq-a__list{list-style:none}
.faq-a__list li{position:relative;padding-left:20px}
.faq-a__list li::before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--yellow-deep)}
.faq-a__steps{list-style:none;counter-reset:s}
.faq-a__steps li{position:relative;padding-left:34px;counter-increment:s}
.faq-a__steps li::before{content:counter(s);position:absolute;left:0;top:-1px;
  width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--soft);color:var(--ink);font-size:.76rem;font-weight:700}

/* open/close motion — restrained */
.faq-item[open] .faq-a{animation:faqOpen .28s var(--ease)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* search states */
.faq-item[hidden],.faq-panel[hidden]{display:none}
.faq-status{margin-bottom:24px;padding:13px 17px;border-radius:13px;
  background:#FFFBEC;border:1px solid rgba(245,180,0,.3);
  font-size:.9rem;font-weight:500;color:var(--ink-2)}
.faq-status b{font-weight:700;color:var(--ink)}
.faq-item mark{background:rgba(255,204,0,.42);color:inherit;border-radius:3px;padding:0 2px}

/* search result category tag */
.faq-item__tag{display:none;margin:0 0 10px;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.is-searching .faq-item__tag{display:block}

/* closest match for the current query — where Enter will take you */
.is-searching .faq-item.is-best{background:#FFFDF4;box-shadow:inset 3px 0 0 var(--yellow-deep)}
.is-searching .faq-item.is-best .faq-item__tag::after{content:"Best match";margin-left:9px;
  padding:2px 8px;border-radius:999px;background:var(--yellow);color:#1a1400;
  font-size:.66rem;letter-spacing:.06em}

/* "Go to answer" — only offered while searching */
.faq-item__jump{display:none;align-items:center;gap:8px;margin-top:16px;
  padding:9px 15px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:.84rem;font-weight:600;color:var(--ink);
  background:var(--soft);border:1px solid var(--line-2);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.is-searching .faq-item__jump{display:inline-flex}
.faq-item__jump:hover{background:#FFF7DA;border-color:rgba(245,180,0,.55);transform:translateY(-1px)}
.faq-item__jump:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.faq-item__jump svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* brief flash so the reader sees where they landed */
.faq-item.is-landed{animation:faqLanded 1.9s var(--ease)}
@keyframes faqLanded{
  0%,18%{background:rgba(255,204,0,.22);box-shadow:inset 3px 0 0 var(--yellow-deep)}
  100%{background:transparent;box-shadow:inset 3px 0 0 transparent}
}

.faq-noresults{text-align:center;padding:clamp(40px,6vw,68px) 24px;
  background:var(--white);border:1px solid var(--line);border-radius:22px}
.faq-noresults svg{width:38px;height:38px;fill:none;stroke:var(--muted);
  stroke-width:1.6;stroke-linecap:round;opacity:.6}
.faq-noresults h2{margin-top:16px;font-size:1.22rem;font-weight:700;color:var(--ink)}
.faq-noresults p{margin:9px auto 20px;max-width:44ch;font-size:.95rem;line-height:1.6;color:var(--muted)}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width:1023px){
  .faq-body__inner{grid-template-columns:1fr;gap:0}
  .faq-side{display:none}

  /* chips become the category navigation */
  .faq-chips{display:block;position:sticky;top:var(--header-h);z-index:20;
    /* min-width:0 lets this grid item shrink so the row scrolls
       internally instead of widening the page */
    min-width:0;
    margin-inline:calc(-1 * clamp(20px,5vw,40px));
    padding:12px clamp(20px,5vw,40px);
    background:rgba(251,250,246,.94);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  .faq-chips__row{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;scroll-padding-inline:clamp(20px,5vw,40px);
    -webkit-overflow-scrolling:touch}
  .faq-chips__row::-webkit-scrollbar{display:none}
  .faq-chip{flex:none;scroll-snap-align:start;white-space:nowrap;
    padding:10px 16px;border-radius:999px;font-size:.88rem;font-weight:600;
    background:var(--white);border:1px solid var(--line-2);color:var(--ink-2);
    transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
  .faq-chip:hover{border-color:rgba(245,180,0,.5)}
  .faq-chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

  .faq-panel,.faq-item{scroll-margin-top:calc(var(--header-h) + 76px)}
  .faq-a{padding-right:8px}
}

@media (max-width:767px){
  .faq-q{gap:14px;padding:17px 2px;font-size:.98rem}
  .faq-a{padding:0 2px 20px}
  .crumbs ol{font-size:.75rem}
}

@media (max-width:430px){
  .faq-hero{padding-top:calc(var(--header-h-top) + 30px)}
  .faq-search__field input{padding:15px 12px;font-size:.95rem}
  .faq-search__ico{margin-left:14px}
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .faq-item[open] .faq-a{animation:none}
  .faq-item.is-landed{animation:none;box-shadow:inset 3px 0 0 var(--yellow-deep)}
  .faq-item__jump{transition:none}
  .faq-item__jump:hover{transform:none}
  .faq-q__mark,.faq-q__mark::before,.faq-q__mark::after,
  .faq-search__field{transition:none}
  .faq-item[open] .faq-q__mark{transform:none}
}