/* Guides hub: problem finder + topic index. Scoped to .gh; tones come from the site palette. */
.gh{--gh-line:rgba(12,18,32,.1);--gh-soft:rgba(12,18,32,.045)}
.gh [hidden]{display:none!important}
.gh-t-b{--tone:#2563EB;--tint:rgba(37,99,235,.075)}
.gh-t-g{--tone:#16A34A;--tint:rgba(22,163,74,.08)}
.gh-t-p{--tone:#7C3AED;--tint:rgba(124,58,237,.075)}
.gh-t-o{--tone:#F97316;--tint:rgba(249,115,22,.09)}
.gh-t-t{--tone:#0D9488;--tint:rgba(13,148,136,.08)}
.gh-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.gh-hero>*,.gh-sec>*{min-width:0}

/* hero */
.gh-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:64px;align-items:start;padding:72px 0 56px}
.gh h1{margin:0;font-weight:800;font-size:clamp(2.4rem,5.2vw,4.3rem);line-height:1.03;letter-spacing:-.035em;max-width:13em;text-wrap:balance}
.gh-lede{margin:22px 0 0;max-width:34em;font-size:1.1875rem;line-height:1.55;color:var(--muted)}
.gh-search{position:relative;display:flex;align-items:center;margin:34px 0 0;max-width:640px}
.gh-lens{position:absolute;left:20px;color:var(--muted);pointer-events:none}
.gh-search input{width:100%;height:62px;padding:0 52px 0 56px;font:inherit;font-size:1.0625rem;color:var(--ink);background:#fff;
  border:1.5px solid rgba(12,18,32,.16);border-radius:18px;box-shadow:var(--shadow-card);outline:0;appearance:none;-webkit-appearance:none;
  transition:border-color .15s,box-shadow .15s}
.gh-search input::-webkit-search-cancel-button{display:none}
.gh-search input::placeholder{color:#8590a3;opacity:1;text-overflow:ellipsis}
.gh-search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.16),var(--shadow-card)}
.gh-x{position:absolute;right:12px;width:38px;height:38px;border:0;border-radius:12px;background:var(--gh-soft);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.gh-x:hover{background:rgba(12,18,32,.09)}
.gh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.gh-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;font:inherit;font-size:.9375rem;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--gh-line);border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.gh-chip i{font-style:normal;font-weight:500;font-size:.8125rem;color:var(--muted)}
.gh-chip:hover{border-color:rgba(12,18,32,.28)}
.gh-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gh-chip[aria-pressed="true"] i{color:rgba(255,255,255,.7)}

/* start-here panel */
.gh-start{background:#fff;border:1px solid var(--gh-line);border-radius:24px;padding:10px;box-shadow:var(--shadow-app)}
.gh-start-h{margin:0;padding:14px 16px 8px;font-size:.9375rem;font-weight:600;color:var(--muted)}
.gh-sp{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;color:var(--ink);text-decoration:none;transition:background .15s}
.gh-sp b{display:block;font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
.gh-sp small{display:block;margin-top:2px;font-size:.875rem;line-height:1.35;color:var(--muted)}
.gh-sp:hover{background:var(--tint)}
.gh-chev{color:#9aa4b6;transition:transform .15s,color .15s;flex:none}
.gh-sp:hover .gh-chev,.gh-list a:hover .gh-chev{color:var(--tone);transform:translateX(3px)}

/* topic index */
.gh-body{padding-bottom:40px}
.gh-sec{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;padding:48px 0;border-top:1px solid var(--gh-line)}
.gh-sec-h{position:sticky;top:24px;align-self:start}
.gh-sec-h .tile{margin-bottom:16px}
.gh h2{margin:0;font-size:1.75rem;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.gh-sec-h p{margin:10px 0 0;max-width:26em;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.gh-n{display:inline-flex;margin-top:16px;padding:4px 12px;font-size:.8125rem;font-weight:600;color:var(--tone);background:var(--tint);border-radius:999px}
.gh-n b{font-weight:700;margin-inline-start:.3em}
.gh-list{margin:0;padding:0;list-style:none}
.gh-list li{border-bottom:1px solid var(--gh-line)}
.gh-list li:first-child{border-top:1px solid var(--gh-line)}
.gh-list a{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 16px;margin:0 -16px;border-radius:14px;color:var(--ink);text-decoration:none;transition:background .15s}
.gh-list a:hover{background:var(--tint)}
.gh-it b{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.gh-it span{display:block;margin-top:4px;max-width:44em;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.gh-list li:first-child{border-top:0}

.gh-empty{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:32px 0;padding:28px;font-size:1.0625rem;background:#fff;border:1px dashed rgba(12,18,32,.22);border-radius:18px}
.gh-reset{height:40px;padding:0 18px;font:inherit;font-weight:600;color:#fff;background:var(--blue);border:0;border-radius:12px;cursor:pointer}
.gh-reset:hover{background:var(--blue-lt)}
.gh a:focus-visible,.gh button:focus-visible{outline:3px solid rgba(37,99,235,.55);outline-offset:2px}

@media (max-width:980px){
  .gh-hero{grid-template-columns:1fr;gap:40px;padding:48px 0 36px}
  .gh-sec{grid-template-columns:1fr;gap:20px;padding:36px 0}
  .gh-sec-h{position:static}
  .gh-sec-h .tile{display:inline-flex;vertical-align:middle;margin:0 12px 0 0}
  .gh-sec-h h2{display:inline}
}
@media (max-width:560px){
  .gh-wrap{padding:0 16px}
  .gh-search input{height:56px;font-size:1rem;padding-left:50px}
  .gh-lens{left:16px}
  .gh-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none}
  .gh-chips::-webkit-scrollbar{display:none}
  .gh-chip{flex:none}
  .gh-list a{margin:0 -10px;padding:18px 10px}
}
@media (prefers-reduced-motion:reduce){.gh *{transition:none!important}}

/* inner guide pages (.gi) */
.gi{--gh-line:rgba(12,18,32,.1);--gh-soft:rgba(12,18,32,.045);padding-bottom:72px}
.gi-head{padding:56px 0 44px}
.gi-crumb{display:flex;align-items:center;gap:6px;margin-bottom:26px;font-size:.9375rem;color:var(--muted)}
.gi-crumb a{color:var(--muted);text-decoration:none}
.gi-crumb a:hover{color:var(--ink);text-decoration:underline}
.gi-crumb a:last-child{color:var(--ink);font-weight:600}
.gi-crumb .gh-chev{width:14px;height:14px;color:#9aa4b6}
.gi h1{margin:0;max-width:19em;font-size:clamp(2rem,4.4vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.gi-lede{margin:22px 0 0;max-width:40em;font-size:1.2rem;line-height:1.6;color:var(--muted)}
.gi-upd{margin:18px 0 0;font-size:.875rem;color:var(--muted)}
.gi-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:72px;align-items:start;padding-top:40px;border-top:1px solid var(--gh-line)}
.gi-art{max-width:700px}
.gi-art section{margin:0 0 48px;scroll-margin-top:96px}
.gi-art section::before{content:"";display:block;width:32px;height:4px;margin-bottom:14px;border-radius:2px;background:var(--tone)}
.gi h2{margin:0 0 16px;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.gi-art p{margin:0 0 1.1em;font-size:1.0625rem;line-height:1.75;color:#2b3448}
.gi-ul{margin:.4em 0 1.2em;padding:0;list-style:none}
.gi-ul li{position:relative;padding:0 0 0 26px;margin:0 0 .6em;font-size:1.0625rem;line-height:1.7;color:#2b3448}
.gi-ul li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--tone)}
.gi-art a{color:var(--blue);text-underline-offset:3px}
.gi-side{position:sticky;top:24px}
.gi-toc p{margin:0 0 10px;font-size:.9375rem;font-weight:600;color:var(--muted)}
.gi-toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--gh-line)}
.gi-toc a{display:block;margin-left:-2px;padding:7px 14px;border-left:2px solid transparent;font-size:.9375rem;line-height:1.4;color:var(--muted);text-decoration:none}
.gi-toc a:hover{color:var(--ink)}
.gi-toc a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--tone)}
.gi-cta{margin:36px 0 0;padding:22px 24px;background:#fff;border:1px solid var(--gh-line);border-left:4px solid var(--tone);border-radius:16px;box-shadow:var(--shadow-card)}
.gi-cta-t{display:block;margin-bottom:6px;font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
.gi-cta span{color:var(--muted);font-size:.9688rem;line-height:1.6}
.gi-cta .gi-cta-a{display:block;margin-top:14px}
.gi-cta-a a{font-weight:700;color:var(--blue);text-decoration:none}
.gi-cta-a a:hover{text-decoration:underline}
.gi-tail .doc-upd{margin:18px 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.gi-after{max-width:820px;padding-top:64px}
.gi-faq h2,.gi-more h2{font-size:1.75rem;margin-bottom:12px}
.gi-faq details{border-bottom:1px solid var(--gh-line)}
.gi-faq details:first-of-type{border-top:1px solid var(--gh-line)}
.gi-faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-size:1.0625rem;font-weight:700;line-height:1.4;cursor:pointer;list-style:none}
.gi-faq summary::-webkit-details-marker{display:none}
.gi-faq summary::after{content:"+";flex:none;width:30px;height:30px;display:grid;place-items:center;font-size:1.3rem;font-weight:500;color:var(--tone);background:var(--tint);border-radius:50%;transition:transform .2s}
.gi-faq details[open] summary::after{transform:rotate(45deg)}
.gi-faq details p{margin:0 0 22px;max-width:44em;font-size:1.0625rem;line-height:1.7;color:#2b3448}
.gi-more{margin-top:64px}
.gi a:focus-visible,.gi summary:focus-visible{outline:3px solid rgba(37,99,235,.55);outline-offset:2px}
@media (max-width:980px){
  .gi-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .gi-side{display:none}
  .gi-head{padding:36px 0 32px}
}
@media (max-width:560px){.gi-art p,.gi-ul li{font-size:1rem}}
.gi-rest{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.gi-rest a{display:inline-block;padding:7px 14px;font-size:.875rem;line-height:1.3;color:var(--ink);text-decoration:none;background:#fff;border:1px solid var(--gh-line);border-radius:999px;transition:border-color .15s,background .15s}
.gi-rest a:hover{background:var(--tint);border-color:transparent}