/* AutoSEO Stack — shared public header (with mobile menu), footer and legal/contact page layout.
   Loaded on every public page next to as.css (app pages) or home.css (homepage). */
.site-head { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--card, #fff) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, #e4e6f0); color: var(--ink, #12142e); }
.sh-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 18px; height: 66px; position: relative; }
.sh-logo { display: inline-flex; align-items: center; gap: 10px; font: 700 1.15rem var(--disp, system-ui); letter-spacing: -.02em; text-decoration: none; color: inherit; flex: none; }
.sh-logo img { width: 28px; height: 28px; }
.sh-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sh-nav > a { text-decoration: none; color: var(--ink-2, #4a4e6e); font: 600 .94rem var(--body, system-ui); padding: 8px 12px; border-radius: 10px; }
.sh-nav > a:hover, .sh-nav > a[aria-current="page"] { color: var(--ink, #12142e); background: color-mix(in srgb, var(--violet, #7b4dff) 10%, transparent); }
.sh-nav-cta { display: none; }
.sh-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sh-login { text-decoration: none; color: var(--ink, #12142e); font: 700 .92rem var(--body, system-ui); padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line, #e4e6f0); }
.sh-login:hover { border-color: var(--violet, #7b4dff); }
.sh-cta { text-decoration: none; color: #fff !important; font: 800 .92rem var(--body, system-ui); padding: 10px 16px; border-radius: 999px; background: linear-gradient(120deg, var(--violet, #7b4dff), #a35bff 60%, var(--aqua, #19d3c5)); box-shadow: 0 10px 24px -12px rgba(123,77,255,.8); white-space: nowrap; }
.sh-cta:hover { transform: translateY(-1px); }
.sh-theme { background: transparent; border: 1.5px solid var(--line, #e4e6f0); color: inherit; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.sh-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line, #e4e6f0); background: transparent; color: inherit; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; margin-left: auto; flex: none; }
.sh-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.site-head.menu-open .sh-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-head.menu-open .sh-toggle span:nth-child(2) { opacity: 0; }
.site-head.menu-open .sh-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sh-toggle:focus-visible, .sh-nav a:focus-visible, .sh-actions a:focus-visible { outline: 3px solid var(--aqua, #19d3c5); outline-offset: 2px; }

/* Dark variant: the homepage header over the dark hero. */
.site-head.sh-dark { position: fixed; inset: 0 0 auto; background: transparent; border-color: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s, border-color .3s; }
.site-head.sh-dark.scrolled, .site-head.sh-dark.menu-open { background: color-mix(in srgb, var(--night, #0d0b26) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255,255,255,.08); }
.site-head.sh-dark .sh-nav > a { color: rgba(255,255,255,.8); }
.site-head.sh-dark .sh-nav > a:hover { color: #fff; background: rgba(255,255,255,.08); }
.site-head.sh-dark .sh-login { color: #fff; border-color: rgba(255,255,255,.35); }
.site-head.sh-dark .sh-theme, .site-head.sh-dark .sh-toggle { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); }

@media (max-width: 860px) {
  .sh-toggle { display: inline-flex; }
  .sh-actions { display: none; }
  .sh-theme { margin-left: auto; }
  .sh-theme + .sh-toggle { margin-left: 0; }
  .sh-nav { display: none; }
  .site-head.menu-open .sh-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; left: -16px; right: -16px; top: 100%; margin: 0;
    padding: 12px 16px 18px; background: var(--card, #fff); color: var(--ink, #12142e); border-bottom: 1px solid var(--line, #e4e6f0); box-shadow: 0 24px 50px -24px rgba(0,0,0,.45);
    max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); overflow-y: auto; }
  .site-head.menu-open .sh-nav > a { padding: 13px 12px; font-size: 1.05rem; color: var(--ink, #12142e); border-radius: 12px; }
  .site-head.menu-open .sh-nav > a:hover { background: color-mix(in srgb, var(--violet, #7b4dff) 10%, transparent); }
  .site-head.menu-open .sh-nav-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line, #e4e6f0); }
  .site-head.menu-open .sh-nav-cta a { text-align: center; padding: 13px 10px; }
  .site-head.sh-dark.menu-open .sh-nav .sh-login { color: var(--ink, #12142e); border-color: var(--line, #e4e6f0); }
}
@media (prefers-reduced-motion: reduce) { .sh-toggle span, .site-head { transition: none; } }

/* Footer — identical on every public page */
.site-foot { background: var(--night, #0d0b26); color: rgba(255,255,255,.72); padding: 64px 0 28px; font: 400 .94rem/1.6 var(--body, system-ui); margin-top: 0; }
.sf-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.sf-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.sf-logo { display: inline-flex; align-items: center; gap: 10px; font: 700 1.2rem var(--disp, system-ui); color: #fff; text-decoration: none; letter-spacing: -.02em; }
.sf-logo img { width: 28px; height: 28px; }
.sf-brand p { margin: 14px 0 16px; max-width: 40ch; }
.sf-cta { color: var(--sun, #ffc94a) !important; font-weight: 800; text-decoration: none; }
.site-foot h4 { color: #fff; font: 800 .82rem var(--body, system-ui); text-transform: uppercase; letter-spacing: .09em; margin: 4px 0 14px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-foot a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.sf-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .86rem; color: rgba(255,255,255,.55); }
.sf-more a { color: rgba(255,255,255,.8); font-weight: 700; }
@media (max-width: 860px) { .sf-grid { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .sf-grid { grid-template-columns: 1fr; } .site-foot { padding-top: 48px; } }

/* Auth pages: header + split screen + footer */
.site-head ~ .auth-wrap { min-height: calc(100vh - 66px); }
.site-head ~ .auth-wrap .auth-side > .logo { display: none; }
.site-head ~ .auth-wrap .auth-side h1 { margin-top: 0; }
@media (min-width: 960px) { .site-head ~ .auth-wrap .auth-side { justify-content: center; } }

/* Legal, contact and 404 pages */
.doc { max-width: 820px; margin: 0 auto; padding: 48px 20px 90px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 10px; }
.doc h2 { font-size: 1.3rem; margin: 34px 0 10px; }
.doc h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.doc p, .doc li { color: var(--ink-2, #4a4e6e); }
.doc ul { padding-left: 20px; display: grid; gap: 6px; }
.doc a { color: var(--violet, #7b4dff); }
.contact-grid { display: grid; gap: 28px; grid-template-columns: 1.3fr 1fr; align-items: start; margin-top: 26px; }
.contact-card { background: var(--card, #fff); border: 1px solid var(--line, #e4e6f0); border-radius: 20px; padding: 24px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }