/* faq-20261030 (James, UI): tobodigi.com FAQ restyled with the site's own tokens:
   lime #82CD17, ink #101012, 16px card radius (as on .lm-bc), .eyebrow and .section h2 unchanged.
   Scoped to #faq.td-faq. Link last in <head>: <link rel="stylesheet" href="/faq-20261030.css?v=1"> */
#faq.td-faq{background:#fff;color:#101012}
#faq.td-faq .container.td-faq-grid{max-width:1200px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
#faq .td-faq-aside{position:sticky;top:110px}
#faq .td-faq-aside h2{margin:10px 0 14px;color:#101012}
#faq .td-faq-intro{margin:0 0 24px;font-size:17px;line-height:1.55;color:rgba(16,16,18,.68);max-width:38ch}
#faq .td-faq-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;text-decoration:none;border-radius:999px}
#faq .td-faq-list{display:flex;flex-direction:column;gap:12px}

#faq .faq-item{border:1px solid rgba(16,16,18,.10);border-bottom:1px solid rgba(16,16,18,.10);border-radius:16px;background:#f6f7f4;
  box-shadow:inset 0 0 0 0 #82CD17;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;overflow:hidden}
#faq .faq-item:hover{border-color:rgba(16,16,18,.22)}
#faq .faq-item[open]{background:#fff;border-color:rgba(130,205,23,.55);box-shadow:inset 4px 0 0 0 #82CD17,0 14px 34px rgba(16,16,18,.07)}

#faq .faq-item summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 20px 14px 24px;
  font-weight:700;font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.35;color:#101012;cursor:pointer;list-style:none;border-radius:16px}
#faq .faq-item summary::-webkit-details-marker{display:none}
#faq .faq-item summary:focus-visible{outline:3px solid #82CD17;outline-offset:2px}
/* +/− icon: dark circle with lime bars; the vertical bar rotates flat when open */
#faq .faq-item summary::after{content:"";flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#101012;transform:none;
  background-image:linear-gradient(#82CD17,#82CD17),linear-gradient(#82CD17,#82CD17);background-repeat:no-repeat;background-position:center;
  background-size:16px 2px,2px 16px;transition:background-color .25s ease,background-size .25s ease,transform .3s ease}
#faq .faq-item[open] summary::after{transform:rotate(180deg);background-color:#82CD17;background-image:linear-gradient(#101012,#101012),linear-gradient(#101012,#101012);background-size:16px 2px,2px 0}

#faq .faq-item p{margin:0;padding:0 84px 22px 24px;font-size:16px;line-height:1.65;color:rgba(16,16,18,.74)}

/* Smooth height (Chrome/Edge 131+, Safari 18.4+); other browsers simply open instantly */
@supports (interpolate-size:allow-keywords){
  #faq.td-faq{interpolate-size:allow-keywords}
  #faq .faq-item::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
  #faq .faq-item[open]::details-content{height:auto}
}
@media (prefers-reduced-motion:reduce){#faq .faq-item,#faq .faq-item summary::after,#faq .faq-item::details-content{transition:none!important}}

@media (max-width:900px){
  #faq.td-faq .container.td-faq-grid{grid-template-columns:1fr;gap:24px}
  #faq .td-faq-aside{position:static}
  #faq .faq-item summary{padding:12px 14px 12px 18px;min-height:60px}
  #faq .faq-item p{padding:0 18px 18px}
  #faq .td-faq-cta{width:100%;justify-content:center}
}