/* ==========================================================================
   FAQS.CSS  —  this page only
   Tokens, fonts, --gutter, header and footer live in common.css.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --head-color:#19325C;
  --text-color:#3C4B64;
  --page:#F5F8FC;
  --card:#F8FBFE;          /* closed card */
  --card-line:#91B4C8;     /* light blue hairline */
  --card-open:#DEDDD5;     /* open card (stone) */
  --icon:#8FB8CE;
  --r-md:8px;
  --shell:1440px;
}

body{
    font-family: var(--font-secondary);
    margin:0;background:var(--page);color:var(--text-color);
    font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--head-color);outline-offset:2px;border-radius:4px}
a {
  text-decoration: none;
}
.wrap{margin:0 auto;padding:56px var(--gutter) 80px;background:#F6FAFF;}
h1{margin:0 0 34px;font-size:40px;line-height:1.2;font-weight:400;color:var(--head-color)}

/* ============ LAYOUT ============ */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start}
.faq-col{display:flex;flex-direction:column;gap:18px}

/* ============ ACCORDION ============ */
.faq{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);
  padding:0 22px;scroll-margin-top:24px;
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;cursor:pointer;list-style:none;
  font-size:18px;line-height:1.4;color:var(--head-color);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.ico{flex:none;color:var(--icon)}
.faq[open]{background:var(--card-open);border-color:var(--card-open)}
.faq[open] summary{font-weight:500;padding-bottom:10px}
.faq[open] .ico{color:var(--head-color)}
.faq[open] .bar-v{opacity:0}          /* plus becomes minus */
.faq-body{padding:0 0 20px;font-size:15px;line-height:1.65;color:var(--text-color);max-width:62ch}
.faq-body p{margin:0 0 12px}
.faq-body p:last-child{margin-bottom:0}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .wrap{padding:26px var(--gutter) 48px}
  h1{font-size:26px;margin-bottom:22px}
  .faq-cols{grid-template-columns:1fr;row-gap:14px}
  .faq-col{gap:14px}
  .faq{padding:0 18px}
  .faq summary{font-size:15px;padding:16px 0;gap:14px}
  .faq-body{font-size:14px;padding-bottom:18px}
}
@media (prefers-reduced-motion:no-preference){
  .ico,.bar-v{transition:color .18s ease,opacity .18s ease}
}