/* Ad Astra AI — body reset, blueprint field, keyframes. No component classes. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  background-color: #0B1D36;
  background-image:
    radial-gradient(1100px 720px at 82% 8%, rgba(201,169,104,.10), transparent 58%),
    radial-gradient(1100px 900px at -5% 62%, rgba(44,70,112,.55), transparent 62%),
    radial-gradient(140% 100% at 50% 40%, transparent 30%, rgba(8,20,38,.72) 100%),
    repeating-linear-gradient(0deg, rgba(124,141,163,.11) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(90deg, rgba(124,141,163,.11) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(124,141,163,.055) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(90deg, rgba(124,141,163,.055) 0 1px, transparent 1px 19px);
  background-attachment: fixed;
}

/* Scope: the redesigned pages opt in via .aa-site so legacy pages are untouched. */
.aa-site { color: #8DA0B8; }
.aa-site * { box-sizing: border-box; }
.aa-site button { font: inherit; margin: 0; }
.aa-site input { font: inherit; }
.aa-site a { color: #C9A968; text-decoration: none; }
.aa-site a:hover { color: #DFC48C; }
.aa-site h1, .aa-site h2, .aa-site h3, .aa-site h4, .aa-site p, .aa-site ul, .aa-site ol {
  margin: 0;
}

/* --- link colour roles (hover states without inline styles) --- */
a.aa-navlink, .aa-navlink { color: #8DA0B8; }
a.aa-navlink:hover, .aa-navlink:hover { color: #FBF8F2; }
a.aa-navlink-active, .aa-navlink-active { color: #C9A968; }
a.aa-navlink-active:hover, .aa-navlink-active:hover { color: #FBF8F2; }

/* --- site header spacing (SiteHeader.tsx) ---
   Gaps are "row column". The nav went from six items to seven ("Tools to Try"), and at the old
   28px / 36px column gaps the row only just fit (11px spare at full width). With one more item
   the booking button dropped to its own row at every desktop width, so the column gaps are now
   14px. The eighth item ("App Builds", Oct 2026) fits on one line with the header button
   shortened to "Book a call" (71px spare at full width; one line from 1169px up). Under 830px the
   nav wraps onto extra rows (it needs about 751px, so a window about 831px wide, to fit on one),
   so the row gaps tighten to keep the header no taller than 206px from 460px up.
   If the nav labels, gaps or item count change, re-measure the 830px breakpoint here and the
   #tools offsets below (they use 830px and 1239px), and #pilot / #prices in app-builds.tsx. */
.aa-header-inner { gap: 36px 14px; }
.aa-header-nav { gap: 28px 14px; }
@media (max-width: 830px) {
  .aa-header-inner { row-gap: 20px; }
  .aa-header-nav { row-gap: 10px; }
}

/* "See all free tools" in the header links to /#tools. The header is sticky, so the section's own
   96px of top padding is not enough once the header wraps (149px, 206px, up to 290px at 320px
   wide) and the label and heading would land underneath it. These offsets keep both at least
   12px below the header from 320px up; the first one also covers a header that wraps on a
   screen where the text renders wider than it does here.
   The 1239px and 830px breakpoints are tied to where the header wraps. If the nav labels, gaps or
   item count change, re-measure the offsets and those two breakpoints (and the row gaps above). */
#tools { scroll-margin-top: 40px; }
@media (max-width: 1239px) { #tools { scroll-margin-top: 124px; } }
@media (max-width: 830px) { #tools { scroll-margin-top: 210px; } }
/* A phone on its side is under 500px tall, and 210px would push the heading to or past the bottom
   of the screen. From 460px wide the header is 206px tall at most, so 124px keeps the label about
   15px below it. (Below 460px the header is taller, but only a window dragged small is that
   narrow and that short.) This rule must come after the one above so that it wins. */
@media (max-width: 830px) and (max-height: 500px) { #tools { scroll-margin-top: 124px; } }

/* --- "Tools to Try" disclosure in the site header (ToolsMenu.tsx) ---
   The header also renders outside .aa-site, so every colour is set explicitly. Inside it,
   .aa-site a and .aa-site button (0,1,1) would beat a bare class, hence a.x and button.x below.
   The panel is opaque on purpose: it can open over paper-coloured sections, and its text
   contrast must not depend on what is behind it. */
.aa-tools { position: relative; display: inline-flex; }
button.aa-tools-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; letter-spacing: .02em; color: #8DA0B8;
}
button.aa-tools-trigger:hover, button.aa-tools-trigger[aria-expanded="true"] { color: #FBF8F2; }
button.aa-tools-trigger:focus-visible { outline: 2px solid #C9A968; outline-offset: 4px; }
.aa-tools-chev { width: 10px; height: 10px; flex: none; transition: transform .14s ease; }
button.aa-tools-trigger[aria-expanded="true"] .aa-tools-chev { transform: rotate(180deg); }

.aa-tools-panel {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 1;
  box-sizing: border-box; width: 340px; max-width: calc(100vw - 24px);
  margin: 0; padding: 8px; list-style: none;
  background: linear-gradient(180deg, var(--aa-navy-grad-top, #0E2240), var(--aa-navy-grad-bottom, #0A1A31));
  border: 1px solid rgba(201,169,104,.24);
  box-shadow: 0 18px 40px rgba(2,8,18,.5);
  animation: aa-tools-in .14s ease-out both;
}
.aa-tools-panel[hidden] { display: none; }
.aa-tools-panel:focus { outline: none; }
@keyframes aa-tools-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

a.aa-tools-item, a.aa-tools-all { display: block; padding: 10px 12px; }
a.aa-tools-item { color: #FBF8F2; }
a.aa-tools-all { font-size: 14px; color: #C9A968; }
a.aa-tools-item:hover, a.aa-tools-all:hover { background: rgba(201,169,104,.07); }
a.aa-tools-item:hover { color: #FBF8F2; }
a.aa-tools-all:hover { color: #DFC48C; }
a.aa-tools-item:focus-visible, a.aa-tools-all:focus-visible { outline: 2px solid #C9A968; outline-offset: -2px; }
.aa-tools-name { display: block; font-size: 15px; line-height: 1.35; color: #FBF8F2; }
.aa-tools-note { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: #8DA0B8; }
.aa-tools-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(201,169,104,.18); }

@media (prefers-reduced-motion: reduce) {
  .aa-tools-panel { animation: none; }
  .aa-tools-chev { transition: none; }
}

a.aa-btn, .aa-btn {
  display: inline-block;
  background: #C9A968;
  color: #0E2240;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 16px 30px;
  border: 0;
  cursor: pointer;
}
a.aa-btn:hover, .aa-btn:hover { background: #DFC48C; color: #0E2240; }
.aa-btn-sm { font-size: 14px; padding: 11px 20px; }

a.aa-btn-secondary, .aa-btn-secondary {
  display: inline-block;
  color: #FBF8F2;
  font-size: 15px;
  border-bottom: 1px solid rgba(201,169,104,.55);
  padding-bottom: 3px;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
}
a.aa-btn-secondary:hover, .aa-btn-secondary:hover { color: #C9A968; }

a.aa-btn-tertiary, .aa-btn-tertiary {
  display: inline-block;
  color: #8DA0B8;
  font-size: 14px;
  border-bottom: 1px solid rgba(216,207,182,.3);
  padding-bottom: 3px;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
}
a.aa-btn-tertiary:hover, .aa-btn-tertiary:hover { color: #FBF8F2; }

/* Option rows / chips share a hover wash */
.aa-option:hover { background: rgba(201,169,104,.07); }

/* --- entrance + ambient motion --- */
@keyframes aa-blurin{from{opacity:0;filter:blur(14px);transform:translateY(22px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes aa-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes aa-fade{from{opacity:0}to{opacity:1}}
@keyframes aa-draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes aa-pop{from{opacity:0;transform:scale(.15)}to{opacity:1;transform:scale(1)}}
@keyframes aa-star{from{opacity:0;transform:scale(.1) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes aa-glow{0%,100%{opacity:.14}50%{opacity:.4}}
@keyframes aa-jitter{0%,100%{transform:translate(0,0)}25%{transform:translate(1.6px,-1.2px)}50%{transform:translate(-1.2px,1.4px)}75%{transform:translate(1.1px,1.1px)}}
@keyframes aa-beam{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aa-cue{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:.65;transform:translateY(7px)}}
@keyframes aa-twinkle{0%,100%{opacity:.12}50%{opacity:.55}}
@keyframes aa-sweep{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}

/* Scroll-revealed blocks. Fail-visible: without scroll timelines the animation
   simply runs once on load and settles in the visible end state. */
.aa-reveal {
  animation: aa-rise .8s cubic-bezier(.2,.7,.2,1) both;
}
@supports (animation-timeline: view()) {
  .aa-reveal {
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aa-site *, .aa-reveal { animation: none !important; }
}

.aa-edge-embed iframe { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }

/* Text for screen readers only (for example "opens in a new tab" on links that show an arrow). */
.aa-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }