/* ASTRALX shared shell: one header + one footer on every page. Own tokens so it is identical on any page theme. */
:root {
  --ax-bg: #0D1028; --ax-surface: #161A3A; --ax-fg: #ECEDF7; --ax-muted: #A3A8CC; --ax-line: #2C3266;
  --ax-accent: #F2A541; --ax-accent-ink: #1A1206;
  --ax-display: "Syne", "Trebuchet MS", system-ui, sans-serif;
  --ax-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ax-w: 1080px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --ax-bg: #F2F3F9; --ax-surface: #FFFFFF; --ax-fg: #141834; --ax-muted: #555B82; --ax-line: #CFD3E8; --ax-accent: #B8680A; --ax-accent-ink: #FFFFFF; }
}
:root[data-theme="light"] { --ax-bg: #F2F3F9; --ax-surface: #FFFFFF; --ax-fg: #141834; --ax-muted: #555B82; --ax-line: #CFD3E8; --ax-accent: #B8680A; --ax-accent-ink: #FFFFFF; }

/* full-bleed bands: content gutters move from body to wrappers */
body { padding-left: 0 !important; padding-right: 0 !important; }
body > .wrap { max-width: calc(var(--ax-w) + 2 * max(20px, env(safe-area-inset-left, 0px))); padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
body:not(.makers) {
  background-image: radial-gradient(900px 420px at 88% -120px, color-mix(in srgb, var(--ax-accent) 12%, transparent), transparent 70%),
                    radial-gradient(700px 380px at -10% 0, color-mix(in srgb, #6C7BFF 9%, transparent), transparent 70%);
  background-repeat: no-repeat;
}
.ax-in { width: min(var(--ax-w), 100% - 2 * max(20px, env(safe-area-inset-left, 0px))); margin-inline: auto; }

/* header */
.ax-top { position: sticky; top: 0; z-index: 50; font-family: var(--ax-body);
  background: color-mix(in srgb, var(--ax-bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--ax-line) 70%, transparent); }
.ax-top .ax-in { display: flex; align-items: center; gap: 28px; min-height: 66px; }
.ax-mark { font-family: var(--ax-display); font-weight: 800; font-size: 18px; letter-spacing: .07em; color: var(--ax-fg) !important; text-decoration: none; white-space: nowrap; }
.ax-mark span { color: var(--ax-accent); }
.ax-nav { display: flex; gap: 4px; margin-left: auto; }
.ax-nav a { position: relative; color: var(--ax-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 11px; border-radius: 8px; transition: color .15s, background-color .15s; min-height: 0 !important; }
.ax-nav a:hover { color: var(--ax-fg); background: color-mix(in srgb, var(--ax-fg) 6%, transparent); }
.ax-nav a[aria-current="page"] { color: var(--ax-fg); }
.ax-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ax-accent); }
.ax-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--ax-accent); color: var(--ax-accent-ink) !important; text-decoration: none;
  font: 600 14.5px/1 var(--ax-body); padding: 11px 18px; border-radius: 999px; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.ax-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -10px var(--ax-accent); }
.ax-top a:focus-visible, .ax-foot a:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 3px; }

/* footer */
.ax-foot { font-family: var(--ax-body); background: color-mix(in srgb, var(--ax-surface) 55%, var(--ax-bg)); border-top: 1px solid var(--ax-line); margin-top: 72px; color: var(--ax-muted); }
.ax-foot .ax-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr); gap: 40px 56px; padding: 56px 0 32px; }
.ax-brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.ax-brand p { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 30ch; }
.ax-brand .ax-cta { font-size: 14px; padding: 10px 16px; }
.ax-brand { grid-column: 1; grid-row: 1; }
.ax-cols { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 28px 20px; }
.ax-rc { grid-row: 2; }
.ax-cols div { display: grid; gap: 4px; align-content: start; }
.ax-cols b { font-family: var(--ax-display); font-size: 13px; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--ax-fg); margin-bottom: 8px; }
.ax-cols a { color: var(--ax-muted); text-decoration: none; font-size: 14px; line-height: 1.35; padding: 5px 0; min-height: 30px; display: flex; align-items: center; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ax-cols a:hover { color: var(--ax-fg); }
.ax-rc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 20px; border: 1px solid var(--ax-line); border-radius: 12px; background: color-mix(in srgb, var(--ax-accent) 7%, transparent); }
.ax-rc b { font-family: var(--ax-display); color: var(--ax-fg); font-size: 15px; }
.ax-rc span { font-size: 14px; flex: 1 1 260px; }
.ax-rc a { color: var(--ax-fg); text-decoration: none; font-weight: 600; font-size: 14px; padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--ax-line); border-radius: 999px; }
.ax-rc a:hover { border-color: var(--ax-accent); }
.ax-note { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; border-top: 1px solid var(--ax-line); padding-top: 18px; }
.ax-note p { margin: 0 0 4px; } .ax-note a { color: var(--ax-fg); }
.ax-legal { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.6; border-top: 1px solid var(--ax-line); padding-top: 18px; }
.ax-legal a { color: var(--ax-fg); }

@media (max-width: 860px) {
  .ax-top .ax-in { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 12px; }
  .ax-mark { font-size: 16px; }
  .ax-cta { margin-left: auto; padding: 9px 15px; font-size: 14px; }
  .ax-top .ax-cta { order: 2; }
  .ax-nav { order: 3; flex: 1 0 100%; margin: 6px -8px 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .ax-nav::-webkit-scrollbar { display: none; }
  .ax-nav a { white-space: nowrap; padding: 8px 10px; }
  .ax-foot .ax-in { grid-template-columns: 1fr; padding-top: 44px; }
  .ax-brand, .ax-cols, .ax-rc { grid-column: 1; grid-row: auto; }
  .ax-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .ax-cols b { white-space: normal; }
}
@media print { .ax-top { position: static; } .ax-nav, .ax-cta, .ax-foot .ax-cols { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ax-cta, .ax-nav a { transition: none; } }

/* resets: page-level header/footer rules on hand-built pages must not reach the shell */
html, body { margin: 0; }
header.ax-top { display: block; max-width: none; width: auto; margin: 0; padding: 0; border-radius: 0; text-align: left; }
footer.ax-foot { display: block; max-width: none; width: auto; margin: 72px 0 0; padding: 0; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font-size: 14px; line-height: 1.6; color: var(--ax-muted); }
.ax-foot p, .ax-top p { max-width: none; }
.ax-brand p { max-width: 30ch; }
@media print { .axc-btn, .axc-panel, #axc-panel, [class^="axc"], .ax-foot { display: none !important; } }