/* ==========================================================================
   AxisAI — "Aurora Axis" landing page styles
   Self-contained: defines its own reset + tokens. Does NOT depend on FitX
   style.css / theme.css, so this page can never affect other pages (and they
   can't affect it). All classes are namespaced `.ax-` to avoid collisions.
   ========================================================================== */

:root {
  /* Surfaces (dark / OLED) */
  --ax-bg:        #07070D;
  --ax-surface:   #0F1020;
  --ax-surface-2: #15172B;
  --ax-border:    rgba(255, 255, 255, .08);
  --ax-border-2:  rgba(255, 255, 255, .14);

  /* Text */
  --ax-text:   #ECEDF6;
  --ax-text-2: #9AA0C0;
  --ax-text-3: #6A6F8C;

  /* Signature gradient (the axis) */
  --ax-violet: #7C5CFF;
  --ax-cyan:   #38E1FF;
  --ax-grad:   linear-gradient(120deg, var(--ax-violet), var(--ax-cyan));

  /* Single warm energy accent — success states only */
  --ax-signal:      #FF6A3D;
  --ax-signal-deep: #F0501F;

  /* Primary CTA — deep blue, drawn from the icon-holo brand mark */
  --ax-blue:        #3B82F6;
  --ax-blue-bright: #5C9DFF;
  --ax-blue-deep:   #2563EB;

  /* Spacing (8px rhythm) */
  --ax-s1: 8px;  --ax-s2: 16px; --ax-s3: 24px; --ax-s4: 32px;
  --ax-s5: 48px; --ax-s6: 64px; --ax-s7: 96px; --ax-s8: 128px;

  /* Radii */
  --ax-r-sm: 10px; --ax-r-md: 16px; --ax-r-lg: 22px; --ax-r-pill: 999px;

  /* Motion */
  --ax-t-fast: .16s cubic-bezier(.4, 0, .2, 1);
  --ax-t-base: .26s cubic-bezier(.4, 0, .2, 1);
  --ax-ease-out: cubic-bezier(.16, 1, .3, 1);

  --ax-content: 1120px;

  /* Fonts */
  --ax-display: 'Space Grotesk', system-ui, sans-serif;
  --ax-body:    'DM Sans', system-ui, sans-serif;
  --ax-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html.ax-html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.ax-body {
  margin: 0;
  background: var(--ax-bg);
  color: var(--ax-text);
  font-family: var(--ax-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.ax-body h1, .ax-body h2, .ax-body h3, .ax-body p { margin: 0; }
.ax-body a { color: inherit; text-decoration: none; }
.ax-body img, .ax-body svg { display: block; max-width: 100%; }

/* Ambient aurora wash behind everything (fixed, non-interactive) */
body.ax-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% 8%,  rgba(124, 92, 255, .22), transparent 60%),
    radial-gradient(55% 40% at 12% 22%, rgba(56, 225, 255, .14), transparent 60%),
    radial-gradient(40% 30% at 50% 100%, rgba(124, 92, 255, .10), transparent 70%);
}

/* Faint coordinate grid — reinforces the "axis / plotted" theme */
body.ax-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
}

.ax-shell { position: relative; z-index: 1; }
.ax-wrap  { width: 100%; max-width: var(--ax-content); margin: 0 auto; padding: 0 var(--ax-s3); }

/* Utility: gradient text */
.ax-grad-text {
  background: var(--ax-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mono eyebrow / coordinate label */
.ax-eyebrow {
  font-family: var(--ax-mono);
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ax-text-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ax-s1);
}

/* Visually-hidden (accessible labels) */
.ax-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Visible keyboard focus everywhere */
.ax-body :focus-visible {
  outline: 2px solid var(--ax-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-s1);
  min-height: 48px;
  padding: 0 26px;
  font-family: var(--ax-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--ax-r-pill);
  cursor: pointer;
  transition: transform var(--ax-t-fast), box-shadow var(--ax-t-base),
              background var(--ax-t-base), border-color var(--ax-t-base);
}
.ax-btn:active { transform: translateY(1px) scale(.99); }

/* Primary — deep-blue brand CTA (matches the icon-holo mark) */
.ax-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--ax-blue-bright), var(--ax-blue-deep));
  box-shadow: 0 8px 24px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.ax-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, .48), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* Ghost / secondary */
.ax-btn-ghost {
  color: var(--ax-text);
  background: rgba(255, 255, 255, .03);
  border-color: var(--ax-border-2);
}
.ax-btn-ghost:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--ax-cyan);
  color: #fff;
}

.ax-btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* ==========================================================================
   Top nav
   ========================================================================== */
.ax-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background var(--ax-t-base), border-color var(--ax-t-base), backdrop-filter var(--ax-t-base);
  border-bottom: 1px solid transparent;
}
.ax-nav.is-stuck {
  background: rgba(7, 7, 13, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--ax-border);
}
.ax-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.ax-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ax-text);
}
.ax-brand .ax-mark { width: 26px; height: 26px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.ax-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: var(--ax-s5);
  align-items: center;
  padding: clamp(48px, 9vw, 110px) 0 clamp(56px, 8vw, 96px);
}
.ax-hero-copy { max-width: 600px; }

.ax-hero h1 {
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: clamp(46px, 8vw, 88px);
  line-height: .98;
  letter-spacing: -.03em;
  margin: var(--ax-s3) 0 var(--ax-s3);
}
.ax-hero h1 em { font-style: normal; }

.ax-hero-sub {
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--ax-text-2);
  max-width: 30em;
  margin-bottom: var(--ax-s4);
}
.ax-hero-sub strong { color: var(--ax-text); font-weight: 600; }

.ax-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ax-s2);
}
.ax-hero-note {
  margin-top: var(--ax-s3);
  font-family: var(--ax-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ax-text-3);
}

/* Hero axis graphic */
.ax-hero-art {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
}

/* The new AxisAI logo (transparent) */
.ax-logo-mark {
  position: relative;
  z-index: 2;
  width: 80%;
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(56, 130, 255, .28));
  animation: ax-float 7s ease-in-out infinite;
}

/* Holographic glow behind the mark */
.ax-logo-glow {
  position: absolute;
  z-index: 0;
  width: 82%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124, 92, 255, .40),
    rgba(56, 225, 255, .14) 46%,
    transparent 70%);
  filter: blur(38px);
  animation: ax-glow-pulse 6s ease-in-out infinite;
}

/* Holographic sheen — a light that orbits the logo clockwise */
.ax-logo-sheen {
  position: absolute;
  z-index: 1;
  width: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 55deg,
    rgba(56, 225, 255, .55) 95deg,
    rgba(124, 92, 255, .45) 140deg,
    transparent 188deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(closest-side,
    transparent 60%, #000 70%, #000 91%, transparent 99%);
          mask: radial-gradient(closest-side,
    transparent 60%, #000 70%, #000 91%, transparent 99%);
  filter: blur(7px);
  animation: ax-holo-spin 6s linear infinite;
}

@keyframes ax-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes ax-glow-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
/* positive rotation = clockwise */
@keyframes ax-holo-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Section scaffold
   ========================================================================== */
.ax-section { position: relative; padding: clamp(56px, 9vw, 104px) 0; }
.ax-section-head { max-width: 640px; margin-bottom: var(--ax-s6); }
.ax-section-head h2 {
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: var(--ax-s2) 0 var(--ax-s2);
}
.ax-section-head p { color: var(--ax-text-2); font-size: 18px; max-width: 34em; }

/* ==========================================================================
   Features — cards plotted along the axis spine
   ========================================================================== */
.ax-features { position: relative; }

/* The luminous vertical spine running through the feature stack */
.ax-spine {
  position: absolute;
  left: 31px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--ax-violet) 12%, var(--ax-cyan) 88%, transparent);
  opacity: .55;
}

.ax-feat-grid { display: grid; gap: var(--ax-s3); }

.ax-feat {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--ax-s3);
  align-items: start;
  padding: var(--ax-s4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  transition: transform var(--ax-t-base), border-color var(--ax-t-base), box-shadow var(--ax-t-base);
}
.ax-feat:hover {
  transform: translateY(-4px);
  border-color: var(--ax-border-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

/* Plotted node = the coordinate marker on the spine */
.ax-feat-node {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--ax-r-md);
  background: var(--ax-surface-2);
  border: 1px solid var(--ax-border-2);
  color: var(--ax-cyan);
}
.ax-feat-node svg { width: 28px; height: 28px; }
.ax-feat-node::after { /* glow ring, lit on reveal */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(56, 225, 255, 0);
  transition: box-shadow .5s var(--ax-ease-out);
}
.ax-feat.is-in .ax-feat-node::after { box-shadow: 0 0 22px 1px rgba(56, 225, 255, .35); }

.ax-feat-coord {
  font-family: var(--ax-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ax-text-3);
  margin-bottom: 10px;
}
.ax-feat h3 {
  font-family: var(--ax-display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.ax-feat p { color: var(--ax-text-2); font-size: 16px; }

/* Highlight the novel feature (Pump Check) */
.ax-feat-spot {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(124, 92, 255, .16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border-color: rgba(124, 92, 255, .35);
}
.ax-tag {
  display: inline-block;
  margin-top: var(--ax-s2);
  padding: 5px 12px;
  font-family: var(--ax-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-violet);
  background: rgba(124, 92, 255, .12);
  border: 1px solid rgba(124, 92, 255, .3);
  border-radius: var(--ax-r-pill);
}

/* ==========================================================================
   Waitlist
   ========================================================================== */
.ax-waitlist { position: relative; }
.ax-waitlist-card {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(32px, 5vw, 56px);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(56, 225, 255, .12), transparent 60%),
    var(--ax-surface);
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.ax-waitlist-card::before { /* top gradient hairline */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--ax-grad);
}
.ax-waitlist h2 {
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 40px);
  letter-spacing: -.025em;
  margin: var(--ax-s2) 0 var(--ax-s2);
}
.ax-waitlist-card > p {
  color: var(--ax-text-2);
  max-width: 30em;
  margin: 0 auto var(--ax-s4);
}

/* Form */
.ax-form {
  display: flex;
  gap: var(--ax-s2);
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
/* `display:flex` above would otherwise override the `hidden` attribute (author
   class beats the UA [hidden] rule), leaving the form visible after success. */
.ax-form[hidden] { display: none; }
.ax-field { flex: 1; min-width: 0; }
.ax-label {
  display: block;
  font-family: var(--ax-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-text-3);
  margin-bottom: 8px;
}
.ax-input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  font-family: var(--ax-body);
  font-size: 16px;
  color: var(--ax-text);
  background: var(--ax-bg);
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-sm);
  transition: border-color var(--ax-t-base), box-shadow var(--ax-t-base);
}
.ax-input::placeholder { color: var(--ax-text-3); }
.ax-input:focus {
  outline: none;
  border-color: var(--ax-cyan);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, .18);
}
.ax-form.is-invalid .ax-input {
  border-color: var(--ax-signal);
  box-shadow: 0 0 0 3px rgba(255, 106, 61, .16);
}
.ax-submit { align-self: flex-end; height: 52px; flex: none; }

/* Submit button label / spinner swap */
.ax-submit .ax-spinner { display: none; }
.ax-submit.is-loading .ax-submit-label { visibility: hidden; }
.ax-submit.is-loading .ax-spinner {
  display: block;
  position: absolute;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ax-spin .7s linear infinite;
}
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* Inline error / live status */
.ax-error {
  min-height: 18px;
  margin: 10px 2px 0;
  font-size: 13.5px;
  color: #FF9D7E;
}
.ax-status { margin-top: var(--ax-s3); }

/* Success panel (revealed in place of the form) */
.ax-success {
  display: none;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--ax-s4);
  text-align: center;
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .35);
  border-radius: var(--ax-r-md);
}
.ax-success.is-shown { display: block; animation: ax-pop .4s var(--ax-ease-out) both; }
.ax-success .ax-check {
  width: 46px; height: 46px; margin: 0 auto var(--ax-s2);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ax-blue);
  color: #fff;
}
.ax-success h3 {
  font-family: var(--ax-display);
  font-size: 22px; font-weight: 700;
  margin-bottom: 6px;
}
.ax-success p { color: var(--ax-text-2); font-size: 15px; }
@keyframes ax-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.ax-microcopy {
  margin-top: var(--ax-s3);
  font-family: var(--ax-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ax-text-3);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ax-footer {
  border-top: 1px solid var(--ax-border);
  padding: var(--ax-s6) 0 var(--ax-s5);
  margin-top: var(--ax-s4);
}
.ax-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-s3) var(--ax-s5);
  align-items: center;
  justify-content: space-between;
}
.ax-footer-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-family: var(--ax-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ax-text-2);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-pill);
}

.ax-links { display: flex; flex-wrap: wrap; gap: var(--ax-s3); align-items: center; }
.ax-links a { color: var(--ax-text-2); font-size: 14px; transition: color var(--ax-t-fast); }
.ax-links a:hover { color: var(--ax-text); }

.ax-socials { display: flex; gap: 10px; }
.ax-social {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ax-text-2);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--ax-border);
  transition: color var(--ax-t-fast), border-color var(--ax-t-fast), transform var(--ax-t-fast);
}
.ax-social svg { width: 18px; height: 18px; }
.ax-social:hover { color: #fff; border-color: var(--ax-cyan); transform: translateY(-2px); }

.ax-footer-base {
  margin-top: var(--ax-s5);
  padding-top: var(--ax-s3);
  border-top: 1px solid var(--ax-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-s2);
  justify-content: space-between;
  color: var(--ax-text-3);
  font-size: 13px;
}

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */
.ax-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ax-ease-out), transform .6s var(--ax-ease-out);
}
.ax-reveal.is-in { opacity: 1; transform: none; }

/* Hero load orchestration */
.ax-rise { opacity: 0; transform: translateY(18px); animation: ax-rise .8s var(--ax-ease-out) forwards; }
.ax-rise-1 { animation-delay: .05s; }
.ax-rise-2 { animation-delay: .15s; }
.ax-rise-3 { animation-delay: .25s; }
.ax-rise-4 { animation-delay: .35s; }
@keyframes ax-rise { to { opacity: 1; transform: none; } }

/* Hero art draw-in + ambient orbit */
.ax-draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: ax-draw 1.6s var(--ax-ease-out) .3s forwards; }
@keyframes ax-draw { to { stroke-dashoffset: 0; } }
/* fill-box = rotate around the element's own centre (the centred rings) */
.ax-orbit { transform-box: fill-box; transform-origin: center; animation: ax-rotate 26s linear infinite; }
/* view-box = rotate around the SVG centre 200,200 (orbiting satellites) */
.ax-rotc { transform-box: view-box; transform-origin: 200px 200px; animation: ax-rotate 30s linear infinite; }
.ax-rotc-rev { transform-box: view-box; transform-origin: 200px 200px; animation: ax-rotate 44s linear infinite reverse; }
@keyframes ax-rotate { to { transform: rotate(360deg); } }
.ax-twinkle { animation: ax-twinkle 3s ease-in-out infinite; }
@keyframes ax-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .ax-hero {
    grid-template-columns: 1fr;
    gap: var(--ax-s4);
    text-align: center;
    padding-top: clamp(40px, 12vw, 72px);
  }
  .ax-hero-copy { max-width: 100%; margin: 0 auto; }
  .ax-hero-sub { margin-left: auto; margin-right: auto; }
  .ax-hero-actions { justify-content: center; }
  .ax-hero-art { order: -1; max-width: 320px; }
}

@media (max-width: 600px) {
  body.ax-body { font-size: 16px; }
  .ax-wrap { padding: 0 20px; }
  .ax-spine { display: none; }
  .ax-feat { grid-template-columns: 1fr; gap: var(--ax-s2); padding: var(--ax-s3); }
  .ax-feat-node { width: 52px; height: 52px; }
  .ax-feat-node svg { width: 24px; height: 24px; }
  .ax-form { flex-direction: column; }
  .ax-submit { align-self: stretch; width: 100%; }
  .ax-footer-top { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Reduced motion — quiet everything non-essential
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.ax-html { scroll-behavior: auto; }
  .ax-body *, .ax-body *::before, .ax-body *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ax-reveal, .ax-rise { opacity: 1 !important; transform: none !important; }
  .ax-draw { stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   Brand tagline (item 3) + unsubscribe (item 8)
   ========================================================================== */
.ax-brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.ax-brand-tag {
  font-family: var(--ax-mono);
  font-size: 9.5px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ax-text-3); margin-top: 4px;
}

.ax-unsub {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--ax-s3);
  background: none; border: none;
  font-family: var(--ax-body); font-size: 13.5px; color: var(--ax-text-3);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; transition: color var(--ax-t-fast);
}
.ax-unsub:hover { color: var(--ax-text); }
.ax-unsub:disabled, .ax-unsub.is-loading { opacity: .55; cursor: default; }
.ax-unsub-status { margin-top: 10px; font-size: 12.5px; color: var(--ax-text-2); min-height: 16px; }

/* ==========================================================================
   Sub-pages (legal + contact) — shared scaffold
   ========================================================================== */
.ax-page { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 8vw, 96px); }
.ax-page-head { max-width: 820px; margin: 0 auto var(--ax-s5); }
.ax-breadcrumb {
  font-family: var(--ax-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ax-text-3);
}
.ax-breadcrumb a { color: var(--ax-text-3); }
.ax-breadcrumb a:hover { color: var(--ax-cyan); }
.ax-page h1 {
  font-family: var(--ax-display); font-weight: 700;
  font-size: clamp(34px, 6vw, 58px); letter-spacing: -.03em; line-height: 1.02;
  margin: var(--ax-s2) 0 var(--ax-s2);
}
.ax-page .ax-lead { color: var(--ax-text-2); font-size: 18px; max-width: 40em; }

/* Legal "paper" container — a readable light surface for the embedded Termly
   documents. The Termly inline <style> only targets [data-custom-class]
   elements that live inside this container, so it can't affect the dark page. */
.ax-legal {
  max-width: 820px; margin: 0 auto;
  background: #faf9f7; color: #2a2a32;
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  padding: clamp(24px, 5vw, 56px);
  overflow-wrap: break-word;
}
.ax-legal a { color: #3030F1; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.ax-contact-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--ax-s4);
  max-width: 980px; margin: 0 auto; align-items: start;
}
.ax-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--ax-border); border-radius: var(--ax-r-lg);
  padding: var(--ax-s4);
}
.ax-card + .ax-card { margin-top: var(--ax-s3); }
.ax-card h2 {
  font-family: var(--ax-display); font-weight: 600; font-size: 20px;
  letter-spacing: -.01em; margin-bottom: var(--ax-s2);
}
.ax-card p { color: var(--ax-text-2); font-size: 15.5px; margin-bottom: 10px; }
.ax-card a { color: var(--ax-cyan); }
.ax-card a:hover { text-decoration: underline; }
.ax-meta-row { display: flex; gap: 8px; font-size: 15px; margin-bottom: 6px; flex-wrap: wrap; }
.ax-meta-row .k { color: var(--ax-text-3); min-width: 120px; }
.ax-meta-row .v { color: var(--ax-text); }

/* Contact form */
.ax-cform { display: grid; gap: var(--ax-s3); }
.ax-cform .ax-field { flex: none; }
.ax-textarea {
  width: 100%; min-height: 140px; padding: 14px 16px; resize: vertical;
  font-family: var(--ax-body); font-size: 16px; line-height: 1.6;
  color: var(--ax-text); background: var(--ax-bg);
  border: 1px solid var(--ax-border-2); border-radius: var(--ax-r-sm);
  transition: border-color var(--ax-t-base), box-shadow var(--ax-t-base);
}
.ax-textarea:focus, .ax-select:focus {
  outline: none; border-color: var(--ax-cyan);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, .18);
}
.ax-select {
  width: 100%; height: 52px; padding: 0 16px;
  font-family: var(--ax-body); font-size: 16px; color: var(--ax-text);
  background: var(--ax-bg); border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-sm); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239AA0C0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.ax-cform .ax-submit { align-self: start; width: auto; }
/* honeypot — visually hidden but present so bots fill it */
.ax-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ax-csuccess { display: none; }
.ax-csuccess.is-shown { display: block; animation: ax-pop .4s var(--ax-ease-out) both; }

/* FAQ */
.ax-faq { max-width: 820px; margin: var(--ax-s6) auto 0; }
.ax-faq h2 {
  font-family: var(--ax-display); font-weight: 700; font-size: clamp(24px, 3.5vw, 32px);
  letter-spacing: -.02em; margin-bottom: var(--ax-s3);
}
.ax-faq-item {
  border: 1px solid var(--ax-border); border-radius: var(--ax-r-md);
  background: rgba(255,255,255,.02); margin-bottom: var(--ax-s2); overflow: hidden;
}
.ax-faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 20px;
  font-family: var(--ax-display); font-weight: 600; font-size: 16.5px; color: var(--ax-text);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ax-faq-item summary::-webkit-details-marker { display: none; }
.ax-faq-item summary::after {
  content: "+"; font-family: var(--ax-mono); color: var(--ax-cyan); font-size: 20px; line-height: 1;
  transition: transform var(--ax-t-base);
}
.ax-faq-item[open] summary::after { transform: rotate(45deg); }
.ax-faq-item p { color: var(--ax-text-2); font-size: 15.5px; padding: 0 20px 18px; margin: 0; }
.ax-faq-item a { color: var(--ax-cyan); }

@media (max-width: 820px) {
  .ax-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ax-cform .ax-submit { width: 100%; }
}

/* ==========================================================================
   Brand mark image (icon-holo.png) — sized by .ax-brand .ax-mark above
   ========================================================================== */
img.ax-mark { object-fit: contain; }

/* ==========================================================================
   Cookie consent banner (item 2) — injected by axisai.js on first visit
   ========================================================================== */
.ax-cookie {
  /* Consent-scoped insets. Kept on the component rather than :root so the
     global token set is untouched, and so a notched device's home indicator or
     landscape "ears" can never sit under a control. */
  --ax-cookie-safe-b: env(safe-area-inset-bottom, 0px);
  --ax-cookie-safe-l: env(safe-area-inset-left, 0px);
  --ax-cookie-safe-r: env(safe-area-inset-right, 0px);
  --ax-cookie-gap: clamp(8px, 2vw, 24px);

  position: fixed;
  z-index: 80;
  bottom: calc(var(--ax-cookie-gap) + var(--ax-cookie-safe-b));
  /* Insetting from both edges and centring with auto margins (rather than
     left:50% + translateX) keeps the exit animation on a single axis and lets
     the wide layout below re-anchor with nothing but `left`. */
  left: calc(var(--ax-cookie-gap) + var(--ax-cookie-safe-l));
  right: calc(var(--ax-cookie-gap) + var(--ax-cookie-safe-r));
  max-width: 660px;
  margin-inline: auto;

  /* One layout at every width: notice, then actions. Setting the notice beside
     the actions sounds denser but measures worse — it squeezes the notice into
     a ~270px column that runs to six lines, while the full card width holds it
     in two. Stacking also removes the axis trap that made this component 354px
     tall on a phone. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ax-s2);
  padding: var(--ax-s2);
  background: rgba(15, 16, 32, .94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  animation: ax-cookie-in .5s var(--ax-ease-out) both;
}
/* From the hero's own two-column breakpoint (900px) up, the hero copy —
   headline, both CTAs and the audience line — lives entirely in the left
   column; measured across 901–1440px its right edge never passes 48.8% of the
   viewport. Anchoring the surface to the right half therefore puts it in space
   the hero does not use, so nothing essential is covered and the page needs no
   document offset at all. */
@media (min-width: 901px) {
  .ax-cookie {
    left: 50%;
    margin-inline: 0;
    max-width: none;
    padding: var(--ax-s2) var(--ax-s3);
  }
  .ax-cookie-actions { justify-content: flex-end; }
  .ax-cookie-actions .ax-btn { flex: 0 0 auto; }
}
.ax-cookie::before { /* top gradient hairline — echoes the waitlist card */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--ax-grad);
  border-radius: var(--ax-r-md) var(--ax-r-md) 0 0;
}
.ax-cookie-text {
  /* `auto`, never a length: in this column a length basis sizes the block axis
     and pins the notice to a fixed height regardless of how little it needs. */
  flex: 0 1 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ax-text-2);
}
.ax-cookie-text a {
  color: var(--ax-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Wrapping matters: `flex: 1` cannot shrink a button below its min-content, so
   without it the three controls overflow the surface at 320px and the last one
   lands outside the viewport — clipped, and invisible to a scrollWidth check
   because the surface is fixed. Wrapping keeps every choice reachable instead. */
.ax-cookie-actions { display: flex; flex-wrap: wrap; gap: var(--ax-s1); }
.ax-cookie-actions .ax-btn { flex: 1 1 auto; }

/* Phones. The floating card becomes a true bottom bar: edge to edge, so the
   notice gets ~20% more line width — which is what actually removes a line —
   and the outer inset disappears. The home-indicator inset moves from the
   `bottom` offset into the bar's own padding, so nothing sits under a control
   and the bar still reaches the physical edge. Same region, same three
   controls, same state machine: only denser. Placed after the base rules so
   the overrides win on source order, not on inflated selectors. */
@media (max-width: 600px) {
  .ax-cookie {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin-inline: 0;
    gap: var(--ax-s1);
    /* `max`, not `+`, on the bottom: the controls must clear the home
       indicator, and an inset that already exceeds the padding satisfies that
       on its own. Adding the two would grow the bar by the full inset on every
       notched device for no extra safety. */
    padding:
      var(--ax-s1)
      calc(var(--ax-s2) + var(--ax-cookie-safe-r))
      max(var(--ax-s1), var(--ax-cookie-safe-b))
      calc(var(--ax-s2) + var(--ax-cookie-safe-l));
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
  }
  .ax-cookie::before { border-radius: 0; }
  /* Three pills at 18px of side padding cost 108px of a ~328px row and force a
     second 48px row. One token step down fits all three on one line, while the
     40px minimum height — the part that carries the touch target — is
     untouched and each control still measures ~95px wide. */
  .ax-cookie-actions .ax-btn { padding-inline: var(--ax-s1); }
}
.ax-cookie.is-leaving { animation: ax-cookie-out .35s var(--ax-ease-out) both; }

@keyframes ax-cookie-in  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ax-cookie-out { to { opacity: 0; transform: translateY(16px); } }

/* ==========================================================================
   Beta signup modal (item 3) — injected by axisai.js after a successful signup
   ========================================================================== */
.ax-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--ax-s3);
  background: rgba(7, 7, 13, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ax-fade-in .25s var(--ax-ease-out) both;
}
.ax-modal-overlay.is-leaving { animation: ax-fade-out .3s var(--ax-ease-out) both; }
.ax-modal {
  position: relative;
  width: min(440px, 100%);
  text-align: center;
  padding: var(--ax-s4);
  background: rgba(15, 16, 32, .98);
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: ax-pop .35s var(--ax-ease-out) both;
}
.ax-modal::before { /* top gradient hairline — echoes the cards + cookie banner */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--ax-grad);
  border-radius: var(--ax-r-lg) var(--ax-r-lg) 0 0;
}
.ax-modal:focus { outline: none; }
.ax-modal-title {
  font-family: var(--ax-display); font-weight: 700;
  font-size: 22px; letter-spacing: -.01em; margin-bottom: var(--ax-s2);
}
.ax-modal-body { color: var(--ax-text-2); font-size: 15px; line-height: 1.6; }
.ax-modal-code {
  margin-top: var(--ax-s2); font-family: var(--ax-mono);
  font-size: 13px; color: var(--ax-text-2);
}
.ax-modal-code strong { color: var(--ax-text); letter-spacing: .04em; }
.ax-modal .ax-btn { margin-top: var(--ax-s3); }

@keyframes ax-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax-fade-out { to { opacity: 0; } }

/* ==========================================================================
   Cookie settings modal + footer link (granular consent) — axisai.js
   ========================================================================== */
.ax-cookie-settings {
  width: min(540px, 100%);
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
}
.ax-cookie-settings .ax-modal-body { margin-bottom: var(--ax-s3); }

.ax-cookie-rows { display: flex; flex-direction: column; }
.ax-cookie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ax-s3);
  padding: 14px 0;
  border-top: 1px solid var(--ax-border-2);
}
.ax-cookie-row:first-child { border-top: none; }
.ax-cookie-row-info { flex: 1 1 auto; }
.ax-cookie-row-name {
  font-family: var(--ax-display); font-weight: 600;
  font-size: 15px; color: var(--ax-text); margin-bottom: 4px;
}
.ax-cookie-row-desc { font-size: 13px; line-height: 1.5; color: var(--ax-text-2); }
.ax-cookie-row-control { flex: 0 0 auto; padding-top: 2px; }

.ax-cookie-always {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--ax-text-2);
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--ax-border-2);
  white-space: nowrap;
}

/* Toggle switch (role="switch") */
.ax-switch {
  position: relative;
  width: 44px; height: 26px;
  flex: 0 0 auto;
  padding: 0; margin: 0;
  border: 1px solid var(--ax-border-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background var(--ax-t-fast), border-color var(--ax-t-fast);
}
.ax-switch-knob {
  position: absolute; top: 50%; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  transform: translateY(-50%);
  background: var(--ax-text-2);
  transition: transform var(--ax-t-fast), background var(--ax-t-fast);
}
.ax-switch.is-on { background: var(--ax-grad); border-color: transparent; }
.ax-switch.is-on .ax-switch-knob { transform: translate(18px, -50%); background: #fff; }
.ax-switch:focus-visible { outline: 2px solid var(--ax-cyan); outline-offset: 2px; }

.ax-cookie-settings-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--ax-s2); margin-top: var(--ax-s4);
}

/* Footer "Cookie settings" — a button styled to match the legal link row */
.ax-links button.ax-cookie-settings-link {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; padding: 0;
  font: inherit; font-size: 14px; cursor: pointer;
  color: var(--ax-text-2); transition: color var(--ax-t-fast);
}
.ax-links button.ax-cookie-settings-link:hover { color: var(--ax-text); }

@media (max-width: 520px) {
  .ax-cookie-settings-actions { justify-content: stretch; }
  .ax-cookie-settings-actions .ax-btn { flex: 1; }
}

/* ==========================================================================
   Unsubscribe page (item 1) — status card on unsubscribe.html
   ========================================================================== */
.ax-unsub-card { max-width: 520px; margin: 0 auto; text-align: center; }
.ax-unsub-icon {
  width: 52px; height: 52px; margin: 0 auto var(--ax-s3);
  display: grid; place-items: center; border-radius: 50%;
}
.ax-unsub-icon.is-loading {
  border: 2.5px solid rgba(255, 255, 255, .25);
  border-top-color: var(--ax-cyan);
  animation: ax-spin .7s linear infinite;
}
.ax-unsub-icon.is-ok    { background: var(--ax-signal); color: #1A0A04; }
.ax-unsub-icon.is-ok::after { content: "✓"; font-size: 26px; font-weight: 700; }
.ax-unsub-icon.is-error {
  background: rgba(255, 106, 61, .14);
  border: 1px solid rgba(255, 106, 61, .5);
  color: #FF9D7E;
}
.ax-unsub-icon.is-error::after { content: "✕"; font-size: 22px; font-weight: 700; }
.ax-unsub-card h2 { margin-bottom: var(--ax-s1); }
.ax-unsub-card p { color: var(--ax-text-2); font-size: 15px; line-height: 1.6; margin-bottom: var(--ax-s3); }

/* ==========================================================================
   Lead-magnet funnel — grocery-guide.html and future /*-guide pages.
   Reuses the Aurora Axis tokens + card language; every new class is prefixed
   .ax-guide- so it can never collide with the core landing styles. The hero
   reuses .ax-hero (and its responsive collapse); only the cover art is new.
   ========================================================================== */

/* Hero "guide cover" — a lightweight PDF-cover visual in the hero art column */
.ax-guide-cover {
  justify-self: center;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  display: grid;
}
.ax-guide-cover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: var(--ax-s5) var(--ax-s4);
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-lg);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(56, 225, 255, .16), transparent 60%),
    linear-gradient(180deg, var(--ax-surface), var(--ax-surface-2));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.ax-guide-cover-card::before { /* gradient hairline — echoes the cards */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--ax-grad);
}
.ax-guide-cover-glow {
  position: absolute; z-index: 0; top: 12%;
  width: 70%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, .35), transparent 70%);
  filter: blur(34px);
}
.ax-guide-cover-mark {
  position: relative; z-index: 1;
  width: 72px; height: 72px;
  filter: drop-shadow(0 10px 24px rgba(56, 130, 255, .3));
}
.ax-guide-cover-kicker {
  position: relative; z-index: 1;
  font-family: var(--ax-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ax-text-3);
}
.ax-guide-cover-title {
  position: relative; z-index: 1;
  font-family: var(--ax-display); font-weight: 700;
  font-size: clamp(24px, 4.4vw, 30px); line-height: 1.08; letter-spacing: -.02em;
  color: var(--ax-text);
}
.ax-guide-cover-sub { position: relative; z-index: 1; font-size: 14px; color: var(--ax-text-2); }
.ax-guide-cover-rule {
  position: relative; z-index: 1;
  width: 46px; height: 2px; margin: 6px 0;
  border-radius: 2px; background: var(--ax-grad);
}
.ax-guide-cover-foot {
  position: relative; z-index: 1;
  font-family: var(--ax-mono); font-size: 11px; letter-spacing: .16em; color: var(--ax-text-3);
}

/* Preview grid — premium content cards (teasers, never the full PDF) */
.ax-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ax-s3); }
.ax-guide-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--ax-s4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  transition: transform var(--ax-t-base), border-color var(--ax-t-base), box-shadow var(--ax-t-base);
}
.ax-guide-card:hover {
  transform: translateY(-4px);
  border-color: var(--ax-border-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.ax-guide-card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--ax-r-md);
  background: var(--ax-surface-2); border: 1px solid var(--ax-border-2);
  color: var(--ax-cyan);
}
.ax-guide-card-icon svg { width: 22px; height: 22px; }
.ax-guide-card-title { font-family: var(--ax-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.ax-guide-card-text { color: var(--ax-text-2); font-size: 15px; }

/* "How to get it" — three quick steps that reinforce the funnel */
.ax-guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ax-s3); }
.ax-guide-step {
  padding: var(--ax-s4);
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--ax-border); border-radius: var(--ax-r-lg);
}
.ax-guide-step-num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 12px;
  font-family: var(--ax-mono); font-size: 14px; font-weight: 700; color: var(--ax-bg);
  border-radius: 50%; background: var(--ax-grad);
}
.ax-guide-step h3 { font-family: var(--ax-display); font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.ax-guide-step p { color: var(--ax-text-2); font-size: 15px; }

/* Trust / branding band */
.ax-guide-band {
  position: relative; overflow: hidden;
  max-width: 900px; margin: 0 auto; text-align: center;
  padding: clamp(32px, 5vw, 56px);
  background:
    radial-gradient(120% 130% at 50% -10%, rgba(124, 92, 255, .14), transparent 60%),
    var(--ax-surface);
  border: 1px solid var(--ax-border-2); border-radius: var(--ax-r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.ax-guide-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ax-grad); }
.ax-guide-band h2 {
  font-family: var(--ax-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: -.025em; line-height: 1.06;
  margin: var(--ax-s2) auto var(--ax-s2); max-width: 18em;
}
.ax-guide-band p { color: var(--ax-text-2); max-width: 34em; margin: 0 auto var(--ax-s4); }

/* Download — revealed inside the success panel after signup */
.ax-guide-download { margin-top: var(--ax-s3); display: flex; flex-direction: column; align-items: center; gap: var(--ax-s2); }
.ax-guide-download .ax-btn { width: 100%; }
.ax-guide-download .ax-btn.is-loading { opacity: .8; cursor: default; }
.ax-guide-download-err { min-height: 18px; margin: 2px; font-size: 13.5px; color: #FF9D7E; }
.ax-guide-download-err a { color: var(--ax-cyan); text-decoration: underline; text-underline-offset: 2px; }
.ax-guide-download-alt {
  font-family: var(--ax-body); font-size: 13.5px; color: var(--ax-text-3);
  text-decoration: underline; text-underline-offset: 3px; transition: color var(--ax-t-fast);
}
.ax-guide-download-alt:hover { color: var(--ax-text); }

@media (max-width: 900px) {
  .ax-guide-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-guide-steps { grid-template-columns: 1fr; }
  .ax-guide-cover { max-width: 300px; order: -1; }
}
@media (max-width: 600px) {
  .ax-guide-grid { grid-template-columns: 1fr; }
}