/* Site-specific layer on top of the vendored @aain/design-system (aain.css).
   Keep aain.css untouched so it can be re-vendored; anything the system
   doesn't already provide for this particular site lives here. */

/* direction: rtl inherits from <html> into SVG text and flips text-anchor,
   which would push "Agentic" off the left edge of the viewBox on Hebrew
   pages -- the brand name itself is never mirrored or translated. */
.aain-brandmark { height: 26px; width: auto; display: block; flex-shrink: 0; direction: ltr; }
.aain-brandmark__word { font-family: var(--aain-font-family-body); font-weight: var(--aain-weight-bold); font-size: 52px; fill: currentColor; color: var(--aain-ink); }

.aain-footer__brand-name {
  font-family: var(--aain-font-family-display);
  font-weight: var(--aain-weight-semibold);
  color: var(--aain-ink);
}

/* The footer legal line's Privacy/Terms links are plain inline text at
   caption size -- give them a tappable height without changing the
   visual line length. */
.aain-footer__legal a { display: inline-block; padding-block: 4px; }

/* Theme toggle: a small pill button, not part of the core component set
   (the system ships the toggle *behaviour* in aain.js, not a button style). */
.aain-theme-toggle {
  min-height: 36px;
  padding: 0 var(--aain-space-2);
  border-radius: var(--aain-radius-pill);
  border: 1px solid var(--aain-border);
  background: transparent;
  color: var(--aain-ink-muted);
  font-size: var(--aain-font-small);
  font-family: var(--aain-font-family-body);
  cursor: pointer;
  white-space: nowrap;
}
.aain-theme-toggle:hover { color: var(--aain-ink); border-color: var(--aain-accent-gold); }

@media (max-width: 560px) {
  .aain-theme-toggle { display: none; }
  /* The nav CTA's label is long enough in both languages that it wraps
     and collides with the menu toggle at phone widths; the same offer
     is always one tap away in the hero and in the page CTA sections. */
  .aain-nav__actions .aain-btn--primary { display: none; }
}

.aain-section { padding-block: var(--aain-space-6); }
.aain-section--alt { background: var(--aain-surface); }

/* Home hero diagram, inside the standard .aain-hero__media slot. Decorative
   but visible, so every label uses `fill: currentColor` + a real `color`
   value (not just `fill`) -- several accessibility checks read the CSS
   `color` property to score contrast, and SVG `fill` alone won't match it. */
.aain-hero-diagram { width: 100%; height: auto; display: block; padding: var(--aain-space-3); box-sizing: border-box; }
.aain-hero-diagram text { font-family: var(--aain-font-family-body); fill: currentColor; }
.aain-hero-diagram .diagram-title { font-size: 15px; font-weight: 700; color: var(--aain-ink); }
.aain-hero-diagram .diagram-sub { font-size: 12px; color: var(--aain-ink-muted); }
.aain-hero-diagram .diagram-rect { fill: var(--aain-surface-2); }
.aain-hero-diagram .diagram-rect--final { fill: var(--aain-accent-gold-fill); }
.aain-hero-diagram .diagram-title--final { color: var(--aain-on-accent-fill); }
.aain-hero-diagram .diagram-sub--final { color: var(--aain-on-accent-fill); opacity: .85; }
.aain-hero-diagram .diagram-link { stroke: var(--aain-border); stroke-width: 2; fill: none; }

.aain-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--aain-space-3); }
.aain-demo-card { background: var(--aain-bg); border: 1px solid var(--aain-border); border-radius: var(--aain-radius-md); padding: var(--aain-space-3); }
.aain-demo-card h3 { font-size: var(--aain-font-h4); margin-bottom: var(--aain-space-1); }
.aain-demo-card p { color: var(--aain-ink-muted); font-size: var(--aain-font-small); }
.aain-demo-card img { border-radius: var(--aain-radius-sm); margin-bottom: var(--aain-space-2); border: 1px solid var(--aain-border); }

.aain-cta-section { text-align: center; max-width: var(--aain-measure); margin-inline: auto; }
.aain-cta-section h2 { font-size: var(--aain-font-h2); }
.aain-cta-section p { color: var(--aain-ink-muted); margin-top: var(--aain-space-2); }
.aain-cta-section .aain-btn { margin-top: var(--aain-space-3); }

/* Simple bulleted fact list (About/Services use this for short claims,
   not numbered steps and not a pricing list). */
.aain-bullet-list { list-style: none; display: grid; gap: var(--aain-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.aain-bullet-list li { border-inline-start: 3px solid var(--aain-accent-gold-fill); padding-inline-start: var(--aain-space-2); color: var(--aain-ink); }

/* Prose wrapper for markdown-rendered legal pages: aain-base.css resets
   heading/paragraph/list spacing for component authors, so copy-heavy
   pages need their vertical rhythm and list markers back. */
.aain-prose { padding-block: var(--aain-space-5); }
.aain-prose h1 { font-size: var(--aain-font-h2); margin-bottom: var(--aain-space-3); }
.aain-prose h2 { font-size: var(--aain-font-h3); margin-top: var(--aain-space-5); margin-bottom: var(--aain-space-2); }
.aain-prose p { margin-bottom: var(--aain-space-3); color: var(--aain-ink); }
.aain-prose em { color: var(--aain-ink-muted); }
.aain-prose ul, .aain-prose ol { margin-bottom: var(--aain-space-3); padding-inline-start: 1.3em; display: block; }
.aain-prose li { margin-bottom: var(--aain-space-1); }
.aain-prose a { color: var(--aain-accent-gold); text-decoration: underline; text-decoration-color: var(--aain-border); text-underline-offset: 3px; }
.aain-prose a:hover { text-decoration-color: currentColor; }

/* Sub-page hero: same component, a smaller display size than the home
   page's oversized --aain-font-display title. */
.aain-hero--page h1 { font-size: var(--aain-font-h2); }

/* aain-link is sized for inline prose; nudge its tap target just over the
   24px floor our audit checks for, without visibly changing text flow
   (vertical padding on an inline element doesn't push surrounding lines). */
.aain-link { padding-block: 2px; }

.aain-mt-3 { margin-top: var(--aain-space-3); }
.aain-mt-4 { margin-top: var(--aain-space-4); }
.aain-text-muted { color: var(--aain-ink-muted); }

/* Honeypot field: present in the DOM for bots to fill, off-screen and out
   of the tab order for everyone else (tabindex="-1" on the input itself). */
.aain-field--honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 480px) {
  .aain-section { padding-block: var(--aain-space-5); }
}