/* FAQ section (#faq) — self-contained, does not depend on the Tailwind build.
   Native <details>/<summary>: works and is readable by search engines without JS; `name="faq"` keeps one answer open. */
/* clip instead of the section's overflow-hidden: hidden would break the sticky left column */
#faq{overflow:hidden;overflow:clip;--faq-gold:#D4AF37;--faq-gold-l:#EBCB6B;--faq-line:rgba(249,250,251,.12)}
.faq-grid{display:grid;gap:40px}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .faq-side{position:sticky;top:120px}
}
.faq-lead{margin:0 0 28px;max-width:440px;font-size:18px;line-height:1.6;color:rgba(249,250,251,.68)}
.faq-cta{display:flex;flex-wrap:wrap;gap:12px}
.faq-phone{margin:22px 0 0;font-size:16px;color:rgba(249,250,251,.55)}
.faq-phone a{color:var(--faq-gold-l);text-decoration:none;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.faq-phone a:hover{text-decoration:underline;text-underline-offset:3px}

.faq-list{border-top:1px solid var(--faq-line)}
.faq-item{border-bottom:1px solid var(--faq-line)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;border-radius:6px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--faq-gold-l);outline-offset:4px}
.faq-item h3{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:19px;font-weight:600;line-height:1.4;color:#F9FAFB;text-wrap:pretty;transition:color .3s ease}
@media (hover:hover){.faq-item summary:hover h3{color:var(--faq-gold-l)}}
.faq-item[open] h3{color:var(--faq-gold-l)}

/* plus that turns into a cross */
.faq-ic{position:relative;flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(212,175,55,.45);
  transition:background-color .35s ease,border-color .35s ease,rotate .45s cubic-bezier(.22,1,.36,1)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.6px;border-radius:2px;background:var(--faq-gold-l);
  translate:-50% -50%;transition:background-color .35s ease}
.faq-ic::after{rotate:90deg}
.faq-item[open] .faq-ic{rotate:45deg;background:var(--faq-gold);border-color:var(--faq-gold)}
.faq-item[open] .faq-ic::before,.faq-item[open] .faq-ic::after{background:#13245C}

/* answer: smooth height where the browser supports it, a gentle fade everywhere */
.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.22,1,.36,1),content-visibility .45s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){#faq{interpolate-size:allow-keywords}}
.faq-a{padding:0 56px 24px 2px;font-size:17px;line-height:1.65;color:rgba(249,250,251,.72)}
.faq-item[open] .faq-a{animation:faq-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes faq-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
.faq-a p{margin:0 0 12px}
.faq-a p:last-child{margin-bottom:0}
.faq-a b{color:#F9FAFB;font-weight:600}
.faq-a a{color:var(--faq-gold-l);text-decoration:underline;text-decoration-color:rgba(235,203,107,.4);text-underline-offset:3px;transition:text-decoration-color .25s ease}
.faq-a a:hover{text-decoration-color:var(--faq-gold-l)}

@media (max-width:639px){
  .faq-item summary{padding:18px 0;gap:14px}
  .faq-item h3{font-size:17px}
  .faq-ic{width:32px;height:32px}
  .faq-a{padding:0 0 20px;font-size:16px}
  .faq-lead{font-size:16.5px}
  .faq-cta a{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .faq-item::details-content{transition:none}
  .faq-item[open] .faq-a{animation:none}
  .faq-ic{transition:none}
}