/* ============================================================
   NxtAtlas AI — the front door (index.html)

   Loads last: styles.css → redesign.css → atlas.css → this file.
   The first two are the application's shared stylesheets and are
   owned by other people; everything here that looks like a reset
   is undoing one of their assumptions for this one page, and is
   scoped to `body.ax` so no other page can feel it.

   Colour comes from the tokens atlas.css defines and nowhere else,
   so the page holds up in both themes. The only literal colours in
   the whole page are the four in Google's own logo, which their
   branding guidelines require.
   ============================================================ */

:root {
  --ax-edge:    clamp(20px, 5vw, 44px);
  --ax-max:     1180px;
  --ax-section: clamp(78px, 11vh, 132px);
  --ax-ease:    cubic-bezier(.22, 1, .36, 1);
  --ax-fast:    .24s;
  --ax-radius:  16px;
}

/* ============================================================
   0. UNDOING THE APPLICATION SHELL

   styles.css sets `body { overflow: hidden }` and `html, body
   { height: 100% }` because the chat is a fixed-height app. A
   marketing page has to scroll the window — if the body becomes
   the scroll container instead, Lenis, the progress hairline and
   the sticky header all quietly stop working.
   ============================================================ */
html { height: auto; }
html.js { scroll-behavior: auto; }

body.ax {
  height: auto;
  min-height: 100svh;
  /* `visible` first so the shorthand from styles.css is fully replaced, then
     clip on one axis only — `clip` is the one value that stops a stray
     horizontal pixel without turning the body into a scroll container and
     breaking the sticky header. */
  overflow: visible;
  overflow-x: clip;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--atlas-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

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

/* The old landing page shipped a bespoke cursor and a particle
   field. effects.js still builds the cursor nodes on every page it
   runs on; here they simply do not belong. */
body.ax #cursor-ring,
body.ax #cursor-glow,
body.ax #cursor-blob,
body.ax .cursor-spot,
body.ax .jn-ambient { display: none !important; }

/* ============================================================
   1. ATMOSPHERE
   One warm halo, fixed behind everything. No grain, no orbs,
   nothing that rotates.
   ============================================================ */
.ax-atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(78% 58% at 68% -6%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%),
    linear-gradient(180deg, var(--bg-elev), var(--bg) 42%);
}
.ax-nav, .ax-main, .ax-foot { position: relative; z-index: 2; }

/* ============================================================
   2. LAYOUT & TYPE PRIMITIVES
   ============================================================ */
.ax-shell {
  width: 100%;
  max-width: var(--ax-max);
  margin-inline: auto;
  padding-inline: var(--ax-edge);
}
.ax-sec { padding-block: var(--ax-section); }

.ax-h2 {
  font-family: var(--atlas-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text);
  max-width: 20ch;
}

.ax-lede {
  color: var(--text-muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.72;
  max-width: 58ch;
}

.ax-lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* a short brass rule, then the label */
.ax-eyebrow { display: flex; align-items: center; gap: 12px; }
.ax-eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--atlas-brass-soft);
}

.ax-head > * + * { margin-top: 18px; }
.ax-head { margin-bottom: clamp(34px, 5vw, 54px); }

.ax-skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 14px;
  transition: top var(--ax-fast) var(--ax-ease);
}
.ax-skip:focus-visible { top: 12px; }
#main:focus { outline: none; }

/* ============================================================
   3. BUTTONS
   Two of them: brass for the thing we want you to do, quiet for
   everything else. The legacy .ln-btn set is deliberately unused —
   it animates a blue gradient that has no place here.
   ============================================================ */
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-family: var(--atlas-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--ax-fast) ease,
              border-color var(--ax-fast) ease,
              color var(--ax-fast) ease;
}
.ax-btn:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: var(--border-strong);
}
.ax-btn-lg { padding: 14px 26px; font-size: 15px; }
.ax-btn-sm { padding: 9px 18px; font-size: 13.5px; }

.ax-btn-brass {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.ax-btn-brass:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}

.ax-btn-quiet { border-color: var(--border); color: var(--text-muted); }
.ax-btn-quiet:hover { color: var(--text); border-color: var(--border-strong); }

/* effects.js adds .rippling on click; styles.css draws it in white,
   which is wrong on brass. */
.ax-btn-brass[data-ripple].rippling::after {
  background: color-mix(in srgb, var(--accent-text) 26%, transparent);
}
.ax-btn[data-ripple].rippling::after {
  background: color-mix(in srgb, var(--text) 16%, transparent);
}

/* mobile: landing.js swaps our CTAs for Google's own rendered button */
.gsi-wrap { display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   4. HEADER
   .ln-nav is a hook effects.js owns — it toggles .is-scrolled and
   .is-hidden. Both states are restyled here; the class stays.
   ============================================================ */
.ln-nav.ax-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  padding: 16px var(--ax-edge);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background var(--ax-fast) ease,
              border-color var(--ax-fast) ease,
              padding var(--ax-fast) ease,
              transform .3s var(--ax-ease);
}
.ln-nav.ax-nav.is-scrolled {
  padding: 11px var(--ax-edge);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.ln-nav.ax-nav.is-hidden { transform: translateY(-100%); }

.ax-mark { display: inline-flex; align-items: center; gap: 10px; }
.ax-mark-logo {
  display: block;
  border-radius: 8px;
  transition: transform .5s var(--ax-ease);
}
.ax-mark:hover .ax-mark-logo { transform: rotate(-8deg) scale(1.06); }
.ax-mark-text { display: inline-flex; align-items: baseline; gap: 7px; }
.ax-mark-text .atlas-wm { font-size: 13px; }
.ax-mark-ai {
  font-family: var(--atlas-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent);
  border: 1px solid var(--atlas-brass-soft);
  border-radius: 5px;
  padding: 2px 5px 1px;
  line-height: 1;
}

.ax-nav-links { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 24px); margin-left: auto; }
.ax-link {
  font-size: 14px;
  color: var(--text-muted);
  transition: color var(--ax-fast) ease;
  will-change: transform;
}
.ax-link:hover { color: var(--accent); }
.ax-nav-cta { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   5. HERO
   The avatar is the hero. It sits in its own band with the copy
   stacked below it — nothing is ever laid over the artwork.
   ============================================================ */
.hero.ax-hero {
  position: relative;
  overflow: hidden;      /* keeps the bloom inside the band */
  display: flex;
  align-items: center;
  min-height: calc(100svh - 72px);
  padding: clamp(28px, 5vh, 56px) 0 clamp(56px, 8vh, 92px);
  text-align: center;
}

.ax-bloom {
  position: absolute;
  left: 50%;
  top: 41%;
  translate: -50% -50%;
  z-index: 0;
  width: min(1080px, 104vw);
  aspect-ratio: 1;
  pointer-events: none;
  /* the softness is in the gradient stops, not a filter — a blur this
     size re-rasterises every frame and stutters the whole hero */
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent) 14%, transparent) 22%,
    color-mix(in srgb, var(--accent) 5%, transparent)  46%,
    transparent 68%);
}

.ax-hero-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* sized so the whole hero — avatar, headline, buttons and the surface
   chips — still lands inside a 900px-tall window */
.ax-hero-logo {
  width: clamp(176px, 21vw, 282px);
  height: auto;
  display: block;
  margin-bottom: clamp(10px, 1.8vw, 20px);
}

/* the availability pill, restyled off the legacy .hero-pill */
.hero-pill.ax-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  backdrop-filter: none;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--text-muted);
}
.ax-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.hero-title.ax-hero-title {
  font-family: var(--atlas-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.04em;
  color: var(--text);
  margin: 0;
  max-width: 16ch;
}

.hero-sub.ax-hero-sub {
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  max-width: 54ch;
  text-align: center;
}

/* flex-direction is spelled out because styles.css forces a column under
   768px for the old layout, and a media query does not outrank specificity */
.hero-cta.ax-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 34px);
}

.ax-fallback {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ax-fallback[hidden] { display: none; }
.ax-fallback-msg { font-size: 13px; color: var(--text-muted); max-width: 44ch; }
/* The header chip. It replaces a call-to-action button, so it has to stop
   looking like one: an account is a statement of fact, not something to press
   for a result. */
.ax-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 230px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ax-account-chip:hover {
  border-color: var(--atlas-brass, var(--accent));
  background: rgba(196, 160, 84, 0.08);
}
.axa-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(196, 160, 84, 0.18);
  color: var(--atlas-brass, #c4a054);
  font-size: 12px;
  font-weight: 600;
}
.axa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.axa-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.axa-name { font-size: 13px; font-weight: 500; }
.axa-mail {
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  /* Only the face fits next to four nav items on a phone. */
  .ax-account-chip { padding: 4px; max-width: none; }
  .axa-text { display: none; }
}

.ax-access-note {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--atlas-brass, #c4a054);
  max-width: 46ch;
}
.ax-access-note[hidden] { display: none; }

/* surfaces, as pills under the fold line */
.hero-foot.ax-chips {
  list-style: none;
  margin: clamp(30px, 4.2vh, 46px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ax-chips li {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
  transition: color var(--ax-fast) ease,
              border-color var(--ax-fast) ease,
              background var(--ax-fast) ease;
}
.ax-chips li:hover {
  color: var(--accent);
  border-color: var(--atlas-brass-soft);
  background: var(--accent-soft);
}

/* ============================================================
   6. MARQUEE
   atlas-motion.js clones the track until it overflows and tweens
   it; CSS only has to make the strip a single non-wrapping row.
   ============================================================ */
.ax-marquee {
  overflow: hidden;
  contain: paint;
  padding-block: 20px;
  border-block: 1px solid var(--border);
  /* the #000 stops here are alpha, not paint — a mask only reads the alpha
     channel, so this is theme-independent by construction */
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.ax-marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  font-family: var(--atlas-display);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--text-muted);
  white-space: nowrap;
}
.ax-marquee-track .ax-sep { color: var(--accent); font-weight: 300; }

/* ============================================================
   7. WHAT IT MAKES — the card grid
   The outer <article> carries the reveal, the inner surface carries
   the border. Keeping them apart means GSAP's transform on the
   wrapper never collides with the hover transform on the face.
   ============================================================ */
/* six cards want to land 3 × 2, not 4 + an orphan row */
.ax-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
}
@media (min-width: 940px) { .ax-grid { grid-template-columns: repeat(3, 1fr); } }
.ax-card { display: flex; }

.ax-card-in {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 26px 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--ax-radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text) 3%, transparent), transparent 70%);
  transition: border-color var(--ax-fast) ease,
              background var(--ax-fast) ease,
              transform .4s var(--ax-ease);
}
.ax-card:hover .ax-card-in {
  border-color: var(--atlas-brass-soft);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%);
  transform: translateY(-3px);
}

/* the brass light that follows the pointer. effects.js feeds --sx/--sy,
   atlas-motion.js feeds --mx/--my; whichever is running, this reads it. */
.ax-card[data-spotlight] { overflow: visible; isolation: auto; }
.ax-card[data-spotlight]::before { content: none; }
.ax-card-in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, var(--sx, 50%)) var(--my, var(--sy, 50%)),
    color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%);
  transition: opacity .32s ease;
}
.ax-card:hover .ax-card-in::after { opacity: 1; }

.ax-card-n {
  font-family: var(--atlas-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--accent);
}
.ax-card h3 {
  font-family: var(--atlas-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.1vw, 1.32rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text);
}
.ax-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.62; }

/* ============================================================
   8. FIGURES
   Counted up by atlas-motion.js from data-a-count.
   ============================================================ */
.ax-figs { padding-block: clamp(28px, 4vh, 52px); }
.ax-fig-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(24px, 4vw, 40px);
  padding-block: clamp(28px, 5vh, 44px);
}
.ax-fig-grid::before,
.ax-fig-grid::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.ax-fig-grid::before { top: 0; }
.ax-fig-grid::after  { bottom: 0; }

.ax-fig { display: flex; flex-direction: column; gap: 8px; }
.ax-fig-n {
  font-family: var(--atlas-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   9. MEMORY — heading beside a stack of hairline tenets
   ============================================================ */
.ax-split {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.ax-split-a > * + * { margin-top: 18px; }
.ax-split-b { display: grid; gap: clamp(22px, 3vw, 32px); }

.ax-tenet { position: relative; padding-top: 20px; }
.ax-tenet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--border);
}
.ax-tenet h3 {
  font-family: var(--atlas-display);
  font-weight: 500;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 9px;
}
.ax-tenet p { color: var(--text-muted); font-size: 14.5px; line-height: 1.62; }

/* ============================================================
   10. SURFACES — four hairline rows
   ============================================================ */
.ax-surfaces { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-surface {
  display: grid;
  grid-template-columns: minmax(120px, 22%) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 48px);
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--border);
  transition: border-color var(--ax-fast) ease;
}
.ax-surface:last-child { border-bottom: 1px solid var(--border); }
.ax-surface:hover { border-top-color: var(--atlas-brass-soft); }
.ax-surface-k {
  font-family: var(--atlas-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  letter-spacing: -.02em;
  color: var(--text);
  transition: color var(--ax-fast) ease;
}
.ax-surface:hover .ax-surface-k { color: var(--accent); }
.ax-surface p { color: var(--text-muted); font-size: 14.5px; line-height: 1.62; max-width: 56ch; }

/* ============================================================
   11. CLOSING
   ============================================================ */
.ax-close-in { max-width: 660px; }
.ax-close-h { max-width: 14ch; }
.ax-close-in > * + * { margin-top: 20px; }
.ax-close .ax-cta { justify-content: flex-start; margin-top: 28px; }
.ax-note { font-size: 13.5px; color: var(--text-muted); }
.ax-id {
  color: var(--text-muted);
  letter-spacing: .04em;
  border-bottom: 1px dashed var(--border-strong);
  padding-bottom: 1px;
}

/* ============================================================
   12. FOOTER
   ============================================================ */
.ax-foot { padding-block: 28px 44px; }
.ax-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.ax-foot-brand { display: inline-flex; align-items: center; gap: 9px; }
.ax-foot-logo { display: block; border-radius: 6px; }
.ax-foot-brand .atlas-wm { font-size: 11.5px; color: var(--text-muted); }
.ax-foot-legal { display: inline-flex; align-items: center; }
.ax-foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ax-foot-nav .ax-link { font-size: 11px; }
.ax-foot-nav .ax-link:hover { color: var(--accent); }

/* ============================================================
   13. MOTION FURNITURE

   effects.js injects a progress hairline on every page it runs on.
   Left alone it is an animated blue-to-grey gradient; here it is a
   single brass line and nothing else.
   ============================================================ */
body.ax #scroll-progress,
body.ax .scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 40;
  background: var(--accent);
  animation: none !important;
  pointer-events: none;
  transition: width 90ms linear;
}

/* .reveal is a hook effects.js observes; .a-reveal is the one GSAP
   drives. Where both sit on an element, the legacy transition has to
   stand down or it smears every frame GSAP writes. */
.a-reveal.reveal {
  transform: none;
  transition: none;
}

/* atlas-motion splits headings into per-word spans */
.ax-h2 .a-word-outer,
.ax-hero-title .a-word-outer { padding-bottom: .1em; }

/* ============================================================
   14. HIDDEN SERVICE-ACCOUNT ENTRY
   An invisible button beside the copyright line. The markup is
   built by an inline script in index.html; these are its styles,
   moved out of the page so they can use the tokens.
   ============================================================ */
#svc-dot {
  display: inline-block;
  width: 20px; height: 18px;
  margin-left: 8px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 5px;
  vertical-align: middle;
  opacity: 0;
  cursor: default;
  transition: opacity .18s ease, background .18s ease;
}
#svc-dot:hover {
  opacity: 1;
  cursor: pointer;
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.svc-modal-back {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--backdrop);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.svc-modal {
  width: min(340px, 90vw);
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  color: var(--text);
  font-family: var(--atlas-body);
}
.svc-modal h3 {
  margin: 0 0 14px;
  font-family: var(--atlas-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.svc-modal input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.svc-modal input:focus { border-color: var(--accent); }
.svc-modal-err { color: var(--danger); font-size: 12px; min-height: 16px; margin: 8px 0 0; }
.svc-modal-row { display: flex; gap: 8px; margin-top: 14px; }
.svc-modal-row button {
  flex: 1;
  border-radius: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
}
.svc-modal-row .svc-go {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .ax-split { grid-template-columns: minmax(0, 1fr); }
  .ax-h2 { max-width: 24ch; }
}

@media (max-width: 780px) {
  .ax-nav-links { display: none; }
  .ln-nav.ax-nav { justify-content: space-between; }
  .ax-nav-cta { margin-left: auto; }
  .hero.ax-hero { min-height: auto; padding-block: clamp(24px, 4vh, 40px) 64px; }
  .ax-surface { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

@media (max-width: 560px) {
  .ax-hero-logo { width: min(64vw, 240px); }
  .hero-cta.ax-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hero-cta.ax-cta .ax-btn { width: 100%; }
  .ax-close .ax-cta { align-items: stretch; }
  .ax-mark-text .atlas-wm { font-size: 12px; }
  .ax-foot-in { justify-content: flex-start; }
}

/* Below this the header has to make room for Google's own rendered button,
   which landing.js drops in place of #cta-signin-top on touch devices and
   which will not shrink. The icon alone carries the brand there. */
@media (max-width: 430px) {
  .ax-mark-text { display: none; }
  .ax-nav-cta { min-width: 0; }
}

@media (max-width: 380px) {
  :root { --ax-edge: 16px; }
  .ax-chips li { padding: 6px 12px; font-size: 12px; }
  .ax-card-in { padding: 22px 18px; }
}

/* ============================================================
   16. REDUCED MOTION
   atlas.css already unhides .a-reveal; this stops the last few
   things that still move on their own.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ax-marquee-track { transform: none !important; }
  .ax-mark-logo { transition: none; }
  body.ax #scroll-progress { transition: none; }
}


/* The scroll-progress hairline is retired. effects.js still creates the node
   on pages that load it; hiding it is cheaper and safer than editing a shared
   script several pages depend on. */
#scroll-progress,
.scroll-progress,
.jn-scroll-progress { display: none !important; }

/* the line that replaces a second sign-in form */
.ax-signin-note {
  margin: 18px auto 0; max-width: 46ch;
  font-size: 14px; line-height: 1.65; color: var(--text-muted); text-align: center;
}
.ax-signin-note strong { color: var(--accent); font-weight: 600; }

/* the line that replaces a second sign-in form */
.ax-signin-note {
  margin: 18px auto 0; max-width: 46ch;
  font-size: 14px; line-height: 1.65; color: var(--text-muted); text-align: center;
}
.ax-signin-note strong { color: var(--accent); font-weight: 600; }