/* sections/faq.html (#faq): questions in native <details>, sticky title on wide screens. Uses core.css tokens.
   Open/close animates the height with ::details-content + interpolate-size where supported; elsewhere it simply opens. */
.faq-in{display:grid;gap:var(--space-7) clamp(40px,7vw,112px);align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.faq-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.faq-head{position:sticky;top:calc(var(--nav-h) + 40px)}}
.faq-head{margin-bottom:0}
.faq-head .section-sub{max-width:26em}
.faq-ask{display:flex;align-items:center;gap:14px;max-width:26rem;margin-top:var(--space-6);padding:14px 18px 14px 14px;border:1px solid var(--line);border-radius:var(--r-bubble);
  background:var(--surface);box-shadow:var(--shadow-1);font-size:var(--fs-s);line-height:1.5;color:var(--ink-2)}
.faq-ask img{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft)}
.faq-ask strong{color:var(--ink)}
.faq-ask a{color:var(--accent);font-weight:600;overflow-wrap:anywhere}

.faq-list{interpolate-size:allow-keywords;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:22px 2px;list-style:none;border-radius:var(--r-s);
  -webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-q{font:700 clamp(1.0625rem,1rem + .3vw,1.25rem)/1.4 var(--font-display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance;transition:color var(--d-2) ease}
.faq-item summary:hover .faq-q{color:var(--accent)}
.faq-item summary:focus-visible{outline-offset:2px}
.faq-plus{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--line-2);border-radius:50%;color:var(--ink-2);
  transition:background-color var(--d-3) ease,border-color var(--d-3) ease,color var(--d-3) ease,transform var(--d-3) var(--ease-out)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)}
.faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--d-3) var(--ease-out)}
.faq-item summary:hover .faq-plus{border-color:var(--ink-3);color:var(--ink)}
.faq-item[open] .faq-plus{transform:rotate(180deg);border-color:var(--ink);background:var(--ink);color:var(--bg)}
.faq-item[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a p{max-width:62ch;padding:0 56px 26px 2px;font-size:var(--fs-body);line-height:1.65;color:var(--ink-2)}
@media (max-width:639.98px){.faq-a p{padding-right:4px}}

/* smooth disclosure (Chrome 131+, Safari 18.4+): height + fade; content-visibility flips discretely at the end */
.faq-item::details-content{block-size:0;opacity:0;overflow:hidden;
  transition:block-size var(--d-3) var(--ease-out),opacity var(--d-3) ease,content-visibility var(--d-3) allow-discrete}
.faq-item[open]::details-content{block-size:auto;opacity:1}