/* faq.html (hand-built v3 page, templates/pages/faq.html) */

:root.page-faq body > section.fq-top {
    position: relative; overflow: hidden; padding: 64px 0 64px;
    background: linear-gradient(180deg, #fff, var(--paper));
    border-bottom: 1px solid var(--rule);
}
:root.page-faq body .fq-top::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(rgba(7,24,39,.045) 1px, transparent 1px) 0 0 / 100% 64px;
}
:root.page-faq body .fq-top .wrap { position: relative; }
:root.page-faq body .fq-top h1 { margin: 18px 0 16px; font-size: clamp(38px, 4.8vw, 60px); }
:root.page-faq body .fq-top .lede { margin: 0; }

/* ---------- layout ---------- */
:root.page-faq body > section.fq-body { padding: 72px 0 104px; }
:root.page-faq body .fq-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; }
:root.page-faq body .fq-side { position: sticky; top: 100px; }
:root.page-faq body .fq-nav-h { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
:root.page-faq body .fq-nav ul { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--rule); }
:root.page-faq body .fq-nav li { border-bottom: 1px solid var(--rule); }
:root.page-faq body .fq-nav a {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
    min-height: 48px; padding: 10px 4px; color: var(--navy); font-size: 15px; font-weight: 600;
    border-left: 2px solid transparent; transition: color .2s, background .2s, border-color .2s, padding .2s;
}
:root.page-faq body .fq-nav a:hover, :root.page-faq body .fq-nav a.on { color: var(--blue-text); border-left-color: var(--blue); padding-left: 12px; background: #fff; }
:root.page-faq body .fq-nav svg { color: var(--blue-text); }
:root.page-faq body .fq-nav em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--cloud); border: 1px solid var(--rule); min-width: 26px; text-align: center; padding: 2px 6px; }
:root.page-faq body .fq-toggle-all {
    width: 100%; min-height: 44px; font: 600 14px/1.2 var(--sans); color: var(--navy);
    background: #fff; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; padding: 10px 14px;
    transition: border-color .2s, color .2s;
}
:root.page-faq body .fq-toggle-all:hover { border-color: var(--navy); }
:root.page-faq body .fq-toggle-all:focus-visible, :root.page-faq body .fq-item summary:focus-visible, :root.page-faq body .fq-nav a:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ---------- categories + accordions ---------- */
:root.page-faq body .fq-cat { margin-bottom: 56px; scroll-margin-top: 100px; }
:root.page-faq body .fq-cat-h {
    display: flex; align-items: center; gap: 14px;
    font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 18px; padding-bottom: 16px; border-bottom: 2px solid var(--navy);
}
:root.page-faq body .fq-cat-h svg { color: var(--blue); flex: none; }
:root.page-faq body .fq-item { border-bottom: 1px solid var(--rule); scroll-margin-top: 100px; }
:root.page-faq body .fq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    min-height: 44px; padding: 20px 4px; font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--navy);
    transition: color .2s;
}
:root.page-faq body .fq-item summary::-webkit-details-marker { display: none; }
:root.page-faq body .fq-item summary:hover { color: var(--blue-text); }
:root.page-faq body .fq-item summary i {
    flex: none; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; position: relative; background: #fff;
    transition: transform .3s var(--ease), background .2s, border-color .2s;
}
:root.page-faq body .fq-item summary i::before, :root.page-faq body .fq-item summary i::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--navy); transform: translate(-50%, -50%);
}
:root.page-faq body .fq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
:root.page-faq body .fq-item[open] summary i { background: var(--navy); border-color: var(--navy); }
:root.page-faq body .fq-item[open] summary i::before, :root.page-faq body .fq-item[open] summary i::after { background: #fff; }
:root.page-faq body .fq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
:root.page-faq body .fq-answer { padding: 0 60px 24px 4px; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; max-width: 46em; }
:root.page-faq body .fq-item[open] .fq-answer { animation: fq-in .35s var(--ease); }
@keyframes fq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
:root.page-faq body .fq-answer p { margin: 0 0 12px; }
:root.page-faq body .fq-answer ul { margin: 0 0 12px; padding-left: 20px; }
:root.page-faq body .fq-answer li { margin-bottom: 6px; }
:root.page-faq body .fq-answer li::marker { color: var(--blue); }
:root.page-faq body .fq-answer a { color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- can't find your answer ---------- */
:root.page-faq body .fq-more {
    display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
    background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--blue); padding: 32px 36px;
}
:root.page-faq body .fq-more h2 { font-size: 26px; margin: 0 0 6px; }
:root.page-faq body .fq-more p { margin: 0; }
:root.page-faq body .fq-more-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- cta ---------- */
:root.page-faq body > section.cta { padding: 88px 0; }
:root.page-faq body .cta h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 12px; }
:root.page-faq body .cta p { max-width: 34em; margin: 0; }
:root.page-faq body .cta a.btn.btn-light { background: #fff; color: var(--navy) !important; border-color: #fff; }
:root.page-faq body .cta a.btn.btn-light:hover { background: var(--blue-light); border-color: var(--blue-light); }
:root.page-faq body .cta .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    :root.page-faq body .fq-item[open] .fq-answer { animation: none; }
}
@media (max-width: 960px) {
    :root.page-faq body .fq-layout { grid-template-columns: 1fr; gap: 32px; }
    :root.page-faq body .fq-side { position: static; }
    :root.page-faq body .fq-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }
    :root.page-faq body .fq-nav li { border: 0; }
    :root.page-faq body .fq-nav a { border: 1px solid var(--rule); background: #fff; padding: 8px 12px; }
    :root.page-faq body .fq-nav a:hover { padding-left: 12px; border-color: var(--blue); }
    :root.page-faq body .fq-toggle-all { width: auto; }
}
@media (max-width: 560px) {
    :root.page-faq body > section > .wrap { padding: 0 16px; }
    :root.page-faq body > section.fq-top { padding: 40px 0 44px; }
    :root.page-faq body > section.fq-body { padding: 40px 0 72px; }
    :root.page-faq body .fq-nav ul { grid-template-columns: 1fr; }
    :root.page-faq body .fq-item summary { font-size: 18px; padding: 18px 0; }
    :root.page-faq body .fq-answer { padding: 0 0 20px; }
    :root.page-faq body .fq-more { grid-template-columns: 1fr; padding: 26px 22px; }
}