/* Layout shared by both themes (colours come from styles.css tokens, dark.css overrides them in dark mode) */
.btn{border-radius:999px}
.hero{position:relative;text-align:center;overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 45% at 50% 100%,rgba(84,18,196,.16),transparent 70%)}
.cs-hero{padding:88px 0 0}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 16px;border:1px solid var(--card);background:#fff;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--body);margin-bottom:32px}
.badge b{background:var(--brand);color:#fff;border-radius:999px;padding:3px 10px;font-size:.75rem}
.hero h1{max-width:820px;margin:0 auto 24px;font-size:clamp(2.7rem,7vw,5.2rem)}
.hero p.lead{margin:0 auto 36px;max-width:620px}
.hero-cta{justify-content:center}
.hero .fine{margin-bottom:64px}
.cta-box{text-align:center;border-radius:28px}
.cta-box h2,.cta-box p{margin-inline:auto}
.cta-box .hero-cta{justify-content:center}
@media (max-width:980px){.cs-hero{padding-top:56px}.hero .fine{margin-bottom:40px}}

/* italic gradient words (background-clip:text) can lose the overhang of their last glyph; give them room */
h1 em,h2 em{padding-right:.06em;margin-right:-.06em}

/* theme toggle */
.theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--card);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand);transform:rotate(18deg)}
.theme-toggle .ms{font-size:22px}
html[data-theme="dark"] .t-sun{display:none}
html[data-theme="light"] .t-moon{display:none}
html[data-theme="dark"] .theme-toggle{border-color:#3F3F46;color:#A1A1AA}
html[data-theme="dark"] .theme-toggle:hover{color:#fff;border-color:#A78BFA}

@media (max-width:980px){
  .nav-cta{gap:6px}
  .nav-cta .btn{white-space:nowrap;padding:9px 16px;min-height:44px;font-size:.9rem}
}
@media (max-width:400px){
  .logo{font-size:1.2rem;gap:7px}.logo img{width:32px;height:32px}
  .nav-cta .btn{padding:9px 12px;font-size:.85rem}
  .theme-toggle,.burger{width:40px}
}

/* logo mark: the vector has no padding, so it aligns with the wordmark exactly */
.logo{align-items:center;gap:10px;line-height:1}
.logo img{width:36px;height:36px;display:block;flex:none;border-radius:9px}
.foot .logo img{width:32px;height:32px;border-radius:8px}
@media (max-width:400px){.logo img{width:32px;height:32px;border-radius:8px}}
.foot .logo,footer .logo{display:flex;align-items:center;gap:10px;padding:0;color:var(--ink)}

/* footer social links: shared by every page (was only in problems.css, so pages without it ran the links together) */
.copy .soc{display:flex;gap:18px;flex-wrap:wrap}.copy .soc a{color:var(--muted);font-weight:600}.copy .soc a:hover{color:var(--brand)}
html[data-theme="dark"] .copy .soc a:hover{color:#C4B5FD}