/* /fund/questions/ — the investor FAQ's own CSS. A utility page: quieter type, tighter rhythm
   and no full-bleed section grounds. Sizing on @container page, like every other page. */

.iq{--iq-r:6px}

/* ---- compact hero carrying the filter ---- */
.iq-hero{background:var(--brand-paper);padding:56px 0 56px}
.iq-hero__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 40px}
.iq-hero__copy{grid-column:1 / span 8}
.iq-h1{font-size:44px;line-height:1.06;letter-spacing:-.028em;color:var(--brand-navy);max-width:18ch;margin-top:12px}
.iq-hero__l{margin-top:18px;font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--text-secondary);max-width:64ch}
/* The search is the page's primary control, so it gets its own row and a field big enough to
   read as one — not a utility box tucked beside the headline. */
.iq-search{grid-column:1 / span 8}
.iq-search__lb{display:block;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-800);margin-bottom:12px}
.iq-search__f{display:flex;align-items:center;gap:20px}
.iq-search__in{flex:1 1 auto;min-width:0;height:62px;padding:0 20px;font-family:var(--font-sans);font-size:18px;color:var(--text-primary);background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--brand-navy);border-radius:4px}
.iq-search__in::placeholder{color:var(--text-muted)}
.iq-search__in:focus{outline:none;border-color:var(--brand-navy);box-shadow:0 0 0 3px rgba(145,195,235,.35)}
.iq-search__c{flex:0 0 auto;font-family:var(--font-sans);font-size:13px;color:var(--text-muted);margin:0;white-space:nowrap}

/* ---- frame: sticky category rail in columns 1–2, questions in 3–12 ---- */
.iq-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:start;padding-top:64px;padding-bottom:80px}
.iq-col{grid-column:3 / span 10;min-width:0}
/* align-self:stretch is load-bearing: the body grid is align-items:start, which shrinks the
   rail item to its content height and leaves the sticky child nothing to travel through. */
.iq-rail{grid-column:1 / span 2;align-self:stretch;position:relative}
.iq-rail__in{position:sticky;top:112px;padding-bottom:32px}
.iq-rail__t{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px}
.iq-rail__l{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.iq-rail__l a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;font-family:var(--font-sans);font-size:13px;line-height:1.35;color:var(--text-muted);text-decoration:none;transition:color 150ms cubic-bezier(.2,.6,.2,1),border-color 150ms cubic-bezier(.2,.6,.2,1)}
.iq-rail__l a:hover{color:var(--brand-navy)}
.iq-rail__l a.is-at{color:var(--brand-navy);border-left-color:var(--brand-accent);font-weight:600}
.iq-rail__l a.is-off{opacity:.4}
@media (prefers-reduced-motion:reduce){.iq-rail__l a{transition:none}}

/* ---- question groups ---- */
/* The offset must sit on the element carrying the anchor id, not on the heading inside it, or
   the jump lands the heading behind the sticky masthead (100px at desktop widths). */
.iq-g{scroll-margin-top:120px}
.iq-g+.iq-g{margin-top:56px}
.iq-g__h{font-size:27px;line-height:1.16;letter-spacing:-.018em;color:var(--brand-navy);margin:0 0 4px}
.iq-g__l{border-top:2px solid var(--brand-navy);margin-top:16px}
.iq-i{border-bottom:1px solid var(--line)}
.iq-q{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:18px 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--brand-navy)}
.iq-q::-webkit-details-marker{display:none}
.iq-q:hover{color:var(--sky-800)}
.iq-q__ic{position:relative;flex:0 0 12px;height:12px;margin-top:6px}
.iq-q__ic::before,.iq-q__ic::after{content:"";position:absolute;background:var(--sky-800);transition:opacity 160ms cubic-bezier(.2,.6,.2,1)}
.iq-q__ic::before{left:0;right:0;top:5px;height:2px}
.iq-q__ic::after{top:0;bottom:0;left:5px;width:2px}
.iq-i[open] .iq-q__ic::after{opacity:0}
.iq-a{padding:0 40px 20px 0;max-width:68ch}
.iq-a p{font-family:var(--font-sans);font-size:15.5px;line-height:1.66;color:var(--text-secondary);margin:0}
.iq-a .iv-link{margin-top:12px}
.iq-empty{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--text-secondary);margin:8px 0 0}
.iq-empty a{color:var(--sky-800)}
@media (prefers-reduced-motion:reduce){.iq-q__ic::before,.iq-q__ic::after{transition:none}}

/* Filter state: hiding with an attribute keeps the DOM order and the details' own open state. */
.iq-g[hidden],.iq-i[hidden]{display:none}
mark.iq-hit{background:rgba(224,120,63,.22);color:inherit;padding:0 1px}

/* ---- close ---- */
.iq-cl{background:var(--brand-navy);color:var(--text-inverse)}
.iq-cl__g{max-width:1440px;margin:0 auto;padding:72px 32px 76px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 40px;align-items:center}
.iq-cl__g>div:first-child{grid-column:1 / span 6}
.iq-cl__h{font-size:35px;line-height:1.08;letter-spacing:-.024em;color:var(--text-inverse);margin-top:12px;max-width:16ch}
.iq-cl__l{font-family:var(--font-sans);font-size:16px;line-height:1.62;color:rgba(198,222,243,.88);margin:16px 0 0;max-width:46ch}
.iq-cl__act{grid-column:8 / span 5;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.iq-cl__act .ds-btn--primary{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-navy)}
.iq-cl__act .ds-btn--primary:hover{background:var(--sun-700);border-color:var(--sun-700);color:var(--brand-navy)}
.iq-cl__tel{font-family:var(--font-display);font-size:24px;color:var(--brand-sky);text-decoration:none}
.iq-cl__tel:hover{color:var(--text-inverse)}

/* ---- responsive ---- */
@container page (max-width:1180px){.iq-h1{font-size:38px}}
@container page (max-width:1000px){
  /* The rail is a desktop aid: dropped, not shrunk. The search field carries the page below it. */
  .iq-rail{display:none}
  .iq-col{grid-column:1 / -1}
}
@container page (max-width:900px){
  .iq-hero{padding:44px 0 40px}
  .iq-hero__g,.iq-cl__g{grid-template-columns:minmax(0,1fr);gap:28px}
  .iq-hero__copy,.iq-search,.iq-hero__g,.iq-cl__g>div:first-child,.iq-cl__act{grid-column:1 / -1}
  .iq-h1{font-size:33px}
  .iq-search__f{flex-direction:column;align-items:stretch;gap:10px}
  .iq-search__in{height:56px;font-size:16px}
  .iq-body{padding-top:44px;padding-bottom:56px}
  .iq-g__h{font-size:24px}
  .iq-cl__h{font-size:29px}
  .iq-cl__g{padding:56px 32px 60px}
}
@container page (max-width:620px){
  .iq-body,.iq-hero__g,.iq-cl__g{grid-template-columns:minmax(0,1fr);column-gap:0}
  .iq-h1{font-size:29px}
  .iq-q{font-size:17.5px}
  .iq-a{padding-right:0}
  .iq-cl__g{padding-left:20px;padding-right:20px}
}
