/* ThunderStudy shared UI — header, footer, buttons, quick-answers box.
   Mirrors 404.html. Tokens are scoped so page content colours are untouched. */

.tu-nav,.tu-footer,.ts-seo-answer{
  --tu-canvas:#F4F1FC;--tu-surface:#FAF8FE;
  --tu-ink:#2B2640;--tu-body:#5C5575;--tu-muted:#8B84A0;
  --tu-hairline:rgba(43,38,64,.08);
  --tu-primary:#573AFC;--tu-primary-active:#4527E0;--tu-primary-soft:#E4DEFF;--tu-on-primary:#fff;
  --tu-clay-light:rgba(255,255,255,.9);--tu-clay-dark:rgba(120,108,180,.5);
  --tu-radius-card:28px;--tu-radius-sm:16px;--tu-radius-pill:999px;
  --tu-font:'Inter',system-ui,-apple-system,sans-serif;
}
[data-theme="dark"] .tu-nav,[data-theme="dark"] .tu-footer,[data-theme="dark"] .ts-seo-answer{
  --tu-canvas:#1A1730;--tu-surface:#221D3C;
  --tu-ink:#F1EEFB;--tu-body:#C7C0E0;--tu-muted:#8E86AC;
  --tu-hairline:rgba(255,255,255,.08);
  --tu-primary:#9A7AFB;--tu-primary-active:#B196FB;--tu-primary-soft:#2E2650;--tu-on-primary:#1A1730;
  --tu-clay-light:rgba(255,255,255,.05);--tu-clay-dark:rgba(0,0,0,.55);
}
.tu-nav,.tu-nav *,.tu-footer,.tu-footer *,.ts-seo-answer,.ts-seo-answer *{box-sizing:border-box}
.tu-nav,.tu-footer{font-family:var(--tu-font);-webkit-font-smoothing:antialiased}
.tu-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}

/* ========== HEADER ========== */
.tu-nav{position:sticky;top:0;z-index:100;padding:0;margin:0;background:var(--tu-canvas);border-bottom:1px solid var(--tu-hairline);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
.tu-nav .tu-nav-row{display:flex;align-items:center;justify-content:space-between;height:76px}
.tu-nav .tu-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--tu-ink);text-decoration:none}
.tu-nav .tu-brand-text{display:flex;flex-direction:column;line-height:1.15}
.tu-nav .tu-brand-name{color:var(--tu-ink);font-size:17px;font-weight:700;letter-spacing:-.2px}
.tu-nav .tu-accent,.tu-footer .tu-accent{color:var(--tu-primary)}
.tu-nav .tu-brand-by{color:var(--tu-muted);font-size:11.5px;font-weight:400;letter-spacing:.1px}
.tu-brand-mark{width:36px;height:36px;border-radius:12px;background:var(--tu-primary);display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 10px var(--tu-clay-dark),-4px -4px 10px var(--tu-clay-light)}
.tu-brand-mark img{width:18px;height:18px;display:block}
.tu-nav .tu-nav-right{display:flex;align-items:center;gap:12px}

.tu-nav .tu-theme-btn{width:40px;height:40px;padding:0;border:0;border-radius:14px;background:var(--tu-surface);color:var(--tu-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:4px 4px 10px var(--tu-clay-dark),-4px -4px 10px var(--tu-clay-light);transition:transform .2s ease}
.tu-nav .tu-theme-btn:hover{transform:translateY(-2px)}
.tu-nav .tu-theme-btn svg{width:18px;height:18px}

.tu-nav .tu-cta{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:var(--tu-radius-pill);background:var(--tu-primary);color:var(--tu-on-primary);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:4px 4px 10px var(--tu-clay-dark),-4px -4px 10px var(--tu-clay-light);transition:transform .2s ease,background .2s ease}
.tu-nav .tu-cta:hover{background:var(--tu-primary-active);transform:translateY(-2px)}

.tu-nav .tu-request{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--tu-radius-pill);background:var(--tu-surface);color:var(--tu-ink);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:4px 4px 10px var(--tu-clay-dark),-4px -4px 10px var(--tu-clay-light);transition:transform .2s ease,color .2s ease}
.tu-nav .tu-request:hover{color:var(--tu-primary);transform:translateY(-2px)}
.tu-nav .tu-request svg{width:16px;height:16px;flex-shrink:0}

/* ========== FOOTER ========== */
.tu-footer{background:var(--tu-surface);border-top:1px solid var(--tu-hairline);color:var(--tu-muted);padding-top:64px;margin-top:48px}
.tu-footer nav{position:static;top:auto;z-index:auto;height:auto;display:block;padding:0;margin:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.tu-footer ul{list-style:none;margin:0;padding:0}
.tu-footer .tu-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px 48px;padding-bottom:48px}
.tu-footer .tu-footer-brand{display:inline-flex;align-items:center;gap:12px;color:var(--tu-ink);text-decoration:none}
.tu-footer .tu-footer-brand .tu-brand-mark{width:44px;height:44px;border-radius:14px;box-shadow:none}
.tu-footer .tu-footer-brand .tu-brand-mark img{width:22px;height:22px}
.tu-footer .tu-footer-brand-text{display:flex;flex-direction:column;line-height:1.2}
.tu-footer .tu-footer-brand-name{color:var(--tu-ink);font-size:20px;font-weight:700}
.tu-footer .tu-footer-brand-by{color:var(--tu-muted);font-size:13px;font-weight:400}
.tu-footer .tu-footer-desc{margin:16px 0 0;max-width:300px;color:var(--tu-muted);font-size:14px;font-weight:300;line-height:1.55}
.tu-footer .tu-footer-social{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.tu-footer .tu-footer-social-label{margin-bottom:6px;color:var(--tu-muted);font-size:12px;line-height:1.3}
.tu-footer .tu-footer-social-row{display:flex;flex-wrap:wrap;gap:8px}
.tu-footer .tu-social-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--tu-hairline);background:var(--tu-canvas);color:var(--tu-ink);text-decoration:none;transition:transform .2s ease,color .2s ease,border-color .2s ease}
.tu-footer .tu-social-btn:hover,.tu-footer .tu-social-btn:focus-visible{color:var(--tu-primary);border-color:var(--tu-primary);transform:translateY(-2px)}
.tu-footer .tu-social-btn:active{transform:scale(.95)}
.tu-footer .tu-social-btn svg{width:18px;height:18px}
.tu-footer .tu-footer-title{margin:0 0 12px;color:var(--tu-ink);font-size:18px;font-weight:700;line-height:1.4}
.tu-footer .tu-footer-links a,.tu-footer .tu-footer-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--tu-body);font-size:15px;font-weight:400;line-height:1.4;text-decoration:none;transition:color .2s ease}
.tu-footer .tu-footer-links a:hover,.tu-footer .tu-footer-links a:focus-visible,.tu-footer .tu-footer-legal a:hover,.tu-footer .tu-footer-legal a:focus-visible{color:var(--tu-primary)}
.tu-footer .tu-footer-bottom{border-top:1px solid var(--tu-hairline)}
.tu-footer .tu-footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:14px;padding-bottom:14px}
.tu-footer .tu-footer-copy{color:var(--tu-muted);font-size:14px;line-height:1.43;letter-spacing:-.1px}
.tu-footer nav.tu-footer-legal{display:flex;flex-wrap:wrap;gap:0 28px}

/* ========== QUICK ANSWERS BOX (same box UI as .error-card) ========== */
.ts-seo-answer{max-width:1120px;margin:40px auto;padding:0 20px;font-family:'Inter',system-ui,-apple-system,sans-serif}
.ts-seo-answer .ts-seo-answer__inner{background:var(--tu-surface);color:var(--tu-body);border:0;border-radius:var(--tu-radius-card);padding:34px;box-shadow:10px 10px 24px var(--tu-clay-dark),-10px -10px 24px var(--tu-clay-light)}
.ts-seo-answer .ts-seo-answer__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 16px;border-radius:var(--tu-radius-pill);background:var(--tu-primary-soft);color:var(--tu-primary);font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
.ts-seo-answer .ts-seo-answer__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tu-primary)}
.ts-seo-answer h2{margin:0 0 20px;color:var(--tu-ink);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.25;letter-spacing:-.3px}
.ts-seo-answer h3{margin:0 0 6px;color:var(--tu-ink);font-size:1rem}
.ts-seo-answer p{margin:0 0 8px;color:var(--tu-body);line-height:1.6}
.ts-seo-answer .ts-seo-answer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.ts-seo-answer .ts-seo-answer__trust{margin-top:22px;padding-top:18px;border-top:1px solid var(--tu-hairline)}
.ts-seo-answer a{color:var(--tu-primary);font-weight:700;text-decoration:none}
.ts-seo-answer a:hover{text-decoration:underline}
.ts-seo-answer strong{color:inherit}

/* Light mode: white box, black text */
html:not([data-theme="dark"]) .ts-seo-answer .ts-seo-answer__inner{background:#fff;color:#000}
html:not([data-theme="dark"]) .ts-seo-answer h2,
html:not([data-theme="dark"]) .ts-seo-answer h3,
html:not([data-theme="dark"]) .ts-seo-answer p,
html:not([data-theme="dark"]) .ts-seo-answer strong{color:#000}
html:not([data-theme="dark"]) .ts-seo-answer .ts-seo-answer__trust{border-top-color:rgba(0,0,0,.12)}

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
  .tu-footer .tu-footer-grid{grid-template-columns:repeat(3,1fr)}
  .tu-footer .tu-footer-brand-col{grid-column:1/-1}
}
@media(max-width:640px){
  .tu-wrap{padding:0 20px}
  .tu-nav .tu-nav-row{height:68px}
  .tu-nav .tu-cta{padding:0 14px}
  .tu-nav .tu-nav-right{gap:8px}
  .tu-footer{padding-top:48px}
  .tu-footer .tu-footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .tu-footer .tu-footer-bottom-inner{flex-direction:column;align-items:flex-start}
  .ts-seo-answer .ts-seo-answer__inner{padding:24px 20px}
}
@media(max-width:520px){
  .tu-nav .tu-request{width:40px;padding:0}
  .tu-nav .tu-request span{display:none}
}
@media(max-width:480px){
  .tu-nav .tu-brand{gap:8px}
  .tu-brand-mark{width:32px;height:32px;border-radius:10px}
  .tu-nav .tu-brand-name{font-size:14px}
  .tu-nav .tu-brand-by{font-size:10.5px}
  .tu-nav .tu-nav-right{gap:6px}
  .tu-nav .tu-cta{padding:0 12px;font-size:13px}
}
@media(max-width:380px){
  .tu-nav .tu-cta{display:none}
}