/* ==== Shared styles for pricing variations ====
   Tokens + fonts live in moonclerk-theme.css — load that FIRST on every page.
   This file now only contains layout/nav/footer/section rules that inherit
   from the MoonClerk theme. */

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--white); }
body { color: var(--gray--60); }
.serif { font-style: italic; color: var(--colorPrimary); font-weight: 500; }
a { text-decoration: none; }
img { display:block; }

.var-banner { position:fixed; top:82px; right:12px; z-index:40; padding:6px 12px; background:var(--gray--100); color:#fff; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; box-shadow:var(--shadowBase); }
.var-banner .v { color:var(--aqua--60); }

/* nav */
.nav { position:sticky; top:0; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom:1px solid var(--gray--20); z-index:50; }
.nav-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; gap:32px; }
.logo { display:inline-flex; align-items:center; }
.logo-img { height:24px; width:auto; display:block; }
.footer .logo-img { height:30px; }
.nav-links { display:flex; gap:32px; font-size:14px; color:var(--gray--60); font-weight:400; }
.nav-links a { position:relative; padding:4px 0; transition:color .15s; color: var(--gray--60); font-weight:400; }
.nav-links a:hover { color: var(--gray--100); }
.nav-links a.active { color: var(--gray--100); font-weight:500; }
.nav-links a.active::after { content:''; position:absolute; left:0; right:0; bottom:-18px; height:2px; background:var(--aqua--60); }
.nav-right { display:flex; gap:10px; align-items:center; }

/* headings — keep Phase 1 sizes but inherit MoonClerk weight/letter-spacing */
h1 { font-size:56px; line-height:1.05; letter-spacing:-1.5px; font-weight:500; }
h2 { font-size:42px; line-height:1.1; letter-spacing:-1.2px; font-weight:500; }
h3 { font-size:22px; line-height:1.25; font-weight:500; }

.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:var(--aqua--00); color:var(--aqua--80); border-radius:10rem; font-size:12px; font-weight:500; border:1px solid var(--aqua--20); }
.eyebrow::before { content:''; width:6px; height:6px; background:var(--aqua--60); border-radius:50%; }

/* sections */
.section { padding:90px 32px; }
.section-inner { max-width:1200px; margin:0 auto; }
.section-head { text-align:center; margin-bottom:60px; }
.section-eyebrow { display:inline-block; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua--80); margin-bottom:14px; }
.section-lede { font-size:18px; color:var(--gray--60); max-width:620px; margin:16px auto 0; line-height:1.6; }

/* footer */
.footer { background: var(--gray--100); color:#fff; padding:72px 32px 32px; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand p { color: rgba(255,255,255,.6); font-size:13px; line-height:1.6; max-width:280px; margin:16px 0 0; }
.footer .logo-img { filter: brightness(0) invert(1); }
.footer-col h5 { font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
.footer-col a { display:block; color: rgba(255,255,255,.6); font-size:13px; padding:6px 0; transition:color .15s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12px; color: rgba(255,255,255,.5); flex-wrap:wrap; gap:12px; }

@media (max-width: 1024px) {
  h1 { font-size:44px; letter-spacing:-1px; }
  h2 { font-size:34px; letter-spacing:-.8px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap:32px; }
}
@media (max-width: 768px) {
  h1 { font-size:36px; letter-spacing:-.8px; }
  h2 { font-size:28px; letter-spacing:-.5px; }
  .nav-links { display:none; }
  .nav-inner { padding:16px 20px; }
  .section { padding:60px 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:24px; }
  .var-banner { top:72px; font-size:9px; padding:4px 8px; }
}