/* ---------------------------------------------------------------------------
   /ai — AI Delivery hub and sub-pages.

   THIS SURFACE USES THE DESIGN SYSTEM, NOT THE LEGACY SITE PALETTE.

   Per CLAUDE.md and the geeks-invention-design skill: new surfaces use the
   design system (#FF7903 orange, #283556 navy, Satoshi); existing pages keep
   the legacy palette (#f16522, warm charcoal). The two must never be mixed in
   one page. That is why these pages carry their own header and footer instead
   of the site's legacy chrome — importing the legacy header would put both
   palettes on one page.

   Tokens come from /design-system/styles.css. Author against the variables,
   never against raw hex.

   House rules enforced here (from the skill's "rules that get broken most"):
     - Orange means ACTION and nothing else. If two things are orange, one is wrong.
     - Headings never bold. Every heading sets font-weight 400.
     - Cards are flat: 32px radius + 1px hairline, no shadow.
     - Buttons invert on hover (filled -> outline), 50px pill, 250px min-width,
       trailing arrow slides 10px.
   Phase 1 of the build spec is deliberately motion-free. Do not add decorative
   animation here; §4.4 of the spec requires that motion depict a real process.
--------------------------------------------------------------------------- */

/* --- Reset / base -------------------------------------------------------- */
.ai-page *,
.ai-page *::before,
.ai-page *::after { box-sizing: border-box; }

.ai-page {
  margin: 0;
  font: var(--type-body);
  color: var(--gi-navy-800);
  background: var(--gi-neutral-0);
  -webkit-font-smoothing: antialiased;
}

.ai-page h1, .ai-page h2, .ai-page h3, .ai-page h4, .ai-page h5, .ai-page h6 {
  font-weight: var(--fw-regular);   /* never bold — brand signature */
  margin: 0;
  letter-spacing: var(--ls-tight);
}
.ai-page p { margin: 0; }
.ai-page ul { margin: 0; padding: 0; list-style: none; }
.ai-page img { max-width: 100%; height: auto; }
/* :where() carries ZERO specificity, so this is a default that any component
   rule below can override with a plain single class. Written as a bare
   `.ai-page a` it computes to (0,1,1) and silently beats `.ai-header__brand`,
   `.ai-btn` and `.ai-link` — which rendered the brand navy-on-navy (invisible)
   and stripped the orange off outline buttons on light surfaces. Do not
   "simplify" this back to `.ai-page a`. */
.ai-page :where(a) { color: inherit; }

/* --- Layout -------------------------------------------------------------- */
.ai-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-padding-x);
}
.ai-container--narrow { max-width: var(--container-narrow); }

.ai-section { padding-block: var(--section-padding-y); }
.ai-section--compact { padding-block: var(--section-padding-y-compact); }

/* Surface rhythm — §4.3 of the spec alternates dark and light so the two
   centrepiece sections (the fleet loop and the bug workflow) never blur. */
.ai-surface--light    { background: var(--gi-neutral-0);  color: var(--gi-navy-800); }
.ai-surface--subtle   { background: var(--gi-neutral-50); color: var(--gi-navy-800); }
.ai-surface--lightest { background: var(--gi-neutral-25); color: var(--gi-navy-800); }
.ai-surface--dark     { background: var(--gi-navy-800);   color: var(--gi-neutral-100); }
.ai-surface--deep     { background: var(--gi-black);      color: var(--gi-neutral-100); }

.ai-surface--dark h1, .ai-surface--dark h2, .ai-surface--dark h3,
.ai-surface--deep h1, .ai-surface--deep h2, .ai-surface--deep h3 { color: var(--gi-white); }

/* --- Type ---------------------------------------------------------------- */
.ai-eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gi-orange);
  margin-bottom: var(--space-4);
}
.ai-surface--light .ai-eyebrow,
.ai-surface--subtle .ai-eyebrow { color: var(--gi-orange-700); } /* contrast on light */

.ai-h1 { font-size: var(--fs-h1); line-height: 1.08; }
.ai-h2 { font-size: var(--fs-h2); line-height: 1.12; }
.ai-h3 { font-size: var(--fs-h4); line-height: 1.2; }
.ai-lead { font-size: var(--fs-lead); line-height: 1.5; }
.ai-body { font-size: var(--fs-body); line-height: 1.6; }
.ai-body + .ai-body { margin-top: var(--paragraph-spacing); }
.ai-caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--gi-neutral-500); }

.ai-measure { max-width: 68ch; }

/* --- Buttons ------------------------------------------------------------- */
/* ACCESSIBILITY DEVIATION FROM THE BRAND — read before "fixing" this.

   The design system's Button spec ships a filled orange button with a WHITE
   label. Measured, that is #FFFFFF on #FF7903 = 2.63:1, which fails WCAG AA
   (needs 4.5:1) and would fail this page's own acceptance criterion of
   "Lighthouse 100 accessibility" (spec §8).

   Resolved by keeping the orange FILL — orange still means action, the brand's
   first rule — and darkening the label instead:
       navy-800 on orange = 5.64:1  PASS
   The alternative, white on a darker orange-700 fill, also passes (5.02:1) but
   changes the brand's action colour itself, which is the worse trade.

   Orange as TEXT on a light surface fails the same way (2.63:1 on white), so
   text-orange uses --ai-action, which resolves to orange-700 on light surfaces
   and orange-300 on dark ones. Both clear 4.5:1.

   This deviation is deliberate and should be raised with the design system
   owner — the same contrast problem exists anywhere the brand puts white on
   #FF7903. */
.ai-page { --ai-action: var(--gi-orange-700); }
.ai-surface--dark, .ai-surface--deep { --ai-action: var(--gi-orange-300); }

/* Human-gate ink. --gi-success (#13876B) is the right semantic token but only
   reaches 4.12:1 at 14px on the neutral-50 surface, so light surfaces use a
   darkened step of the same hue (5.72:1). Dark surfaces use the soft tint. */
.ai-page { --ai-gate-ink: #0F6E57; }
.ai-surface--dark, .ai-surface--deep { --ai-gate-ink: var(--gi-success-soft); }

.ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--btn-min-width);
  padding: 14px var(--space-8);
  border-radius: var(--radius-pill);
  border: var(--border-width-hairline) solid var(--gi-orange);
  background: var(--gi-orange);
  color: var(--gi-navy-800);
  font-size: var(--fs-button);
  font-weight: var(--fw-regular);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-base, 250ms) ease,
              color var(--duration-base, 250ms) ease,
              border-color var(--duration-base, 250ms) ease;
}
.ai-btn__arrow {
  display: inline-block;
  transition: transform var(--duration-base, 250ms) ease;
}
/* Buttons INVERT on hover — filled goes to outline. Not a darken step. */
.ai-btn:hover,
.ai-btn:focus-visible {
  background: transparent;
  color: var(--ai-action);
  border-color: var(--ai-action);
}
.ai-btn:hover .ai-btn__arrow,
.ai-btn:focus-visible .ai-btn__arrow { transform: translateX(10px); }

.ai-btn--outline {
  background: transparent;
  color: var(--ai-action);
  border-color: var(--ai-action);
}
.ai-btn--outline:hover,
.ai-btn--outline:focus-visible {
  background: var(--gi-orange);
  border-color: var(--gi-orange);
  color: var(--gi-navy-800);
}

.ai-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Inline text link — underline is the affordance, orange is reserved for action */
.ai-link {
  color: var(--gi-orange-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ai-surface--dark .ai-link, .ai-surface--deep .ai-link { color: var(--gi-orange-300); }

/* --- Header / footer (design-system chrome, NOT the legacy site chrome) --- */
.ai-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--gi-navy-800);
  border-bottom: var(--border-width-hairline) solid rgba(255, 255, 255, 0.12);
}
.ai-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}
.ai-header__brand {
  font-size: var(--fs-h6);
  color: var(--gi-white);
  text-decoration: none;
  letter-spacing: var(--ls-snug);
}
.ai-header__brand b { font-weight: var(--fw-regular); color: var(--gi-orange); }
.ai-header__nav { display: flex; gap: var(--space-6); align-items: center; }
.ai-header__nav a {
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--gi-neutral-200);
  text-decoration: none;
}
.ai-header__nav a:hover { color: var(--gi-white); }

.ai-footer {
  background: var(--gi-black);
  color: var(--gi-neutral-300);
  padding-block: var(--space-12) var(--space-8);
}
.ai-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}
.ai-footer h2 {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gi-neutral-500);
  margin-bottom: var(--space-3);
}
.ai-footer a { color: var(--gi-neutral-200); text-decoration: none; display: block; padding-block: 3px; }
.ai-footer a:hover { color: var(--gi-orange); }
.ai-footer__base {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: var(--border-width-hairline) solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-caption);
  color: var(--gi-neutral-500);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.ai-breadcrumb { font-size: var(--fs-caption); color: var(--gi-neutral-500); padding-top: var(--space-6); }
.ai-breadcrumb a { color: var(--gi-neutral-500); text-decoration: none; }
.ai-breadcrumb a:hover { color: var(--gi-orange-700); text-decoration: underline; }
.ai-surface--dark .ai-breadcrumb, .ai-surface--dark .ai-breadcrumb a { color: var(--gi-neutral-400); }

/* --- Hero ---------------------------------------------------------------- */
.ai-hero { padding-block: var(--space-30) var(--space-16); text-align: center; }
.ai-hero__inner { max-width: 900px; margin: 0 auto; }
.ai-hero .ai-lead { color: var(--gi-neutral-200); margin-top: var(--space-6); }
.ai-hero .ai-cta-row { justify-content: center; }

/* Metric strip — thin rule separators, pinned under the hero copy */
.ai-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-20);
  border-top: var(--border-width-hairline) solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-8);
}
.ai-metric { text-align: left; }
.ai-metric__figure {
  display: block;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--gi-white);
  letter-spacing: var(--ls-tight);
}
.ai-metric__label { font-size: var(--fs-body-sm); color: var(--gi-neutral-400); margin-top: var(--space-2); }

/* --- Generic section head ------------------------------------------------ */
.ai-section__head { max-width: 820px; margin-bottom: var(--space-12); }
.ai-section__head .ai-lead { margin-top: var(--space-5); color: var(--gi-neutral-600); }
.ai-surface--dark .ai-section__head .ai-lead,
.ai-surface--deep .ai-section__head .ai-lead { color: var(--gi-neutral-300); }

/* --- Two-column ---------------------------------------------------------- */
.ai-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* --- Cards --------------------------------------------------------------- */
.ai-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-grid);
  align-items: stretch;   /* equal height via grid, not JS */
}
.ai-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: var(--border-width-hairline) solid var(--gi-neutral-200);
  border-radius: var(--radius-card);
  background: var(--gi-neutral-0);
  /* flat — no shadow. Shadows are for floating UI only. */
}
.ai-card h3 { margin-bottom: var(--space-4); }
.ai-card__promise { color: var(--gi-neutral-600); margin-bottom: var(--space-5); }
.ai-card__list { margin-bottom: var(--space-6); }
.ai-card__list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
.ai-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  background: var(--gi-navy-300);
}
.ai-card__metric {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: var(--border-width-hairline) solid var(--gi-neutral-200);
  font-size: var(--fs-body-sm);
  color: var(--gi-navy-700);
}
.ai-card__cta { margin-top: var(--space-5); }
.ai-card__cta a {
  color: var(--gi-orange-700);
  text-decoration: none;
  font-size: var(--fs-body-sm);
}
.ai-card__cta a:hover { text-decoration: underline; }

.ai-surface--dark .ai-card {
  background: var(--gi-navy-900);
  border-color: rgba(255, 255, 255, 0.12);
}
.ai-surface--dark .ai-card__promise { color: var(--gi-neutral-300); }
.ai-surface--dark .ai-card__metric { color: var(--gi-neutral-200); border-top-color: rgba(255,255,255,0.12); }

/* --- Proof bridge -------------------------------------------------------- */
.ai-bridge { text-align: center; }
.ai-bridge p {
  font-size: var(--fs-slogan);
  line-height: 1.3;
  color: var(--gi-white);
  max-width: 900px;
  margin: 0 auto;
  letter-spacing: var(--ls-snug);
}
.ai-bridge p + p { margin-top: var(--space-6); color: var(--gi-neutral-300); }

/* --- Stage list (the delivery loop) -------------------------------------- */
.ai-stages { display: grid; gap: var(--space-6); counter-reset: stage; }
.ai-stage {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: var(--border-width-hairline) solid rgba(255, 255, 255, 0.12);
}
.ai-stage__num {
  font-size: var(--fs-h5);
  color: var(--gi-neutral-500);
  font-variant-numeric: tabular-nums;
}
.ai-stage h3 { font-size: var(--fs-h5); margin-bottom: var(--space-3); }
.ai-stage p { color: var(--gi-neutral-300); line-height: 1.6; }

/* Human gate badge.
   The spec (§4.2) requires an accent reserved EXCLUSIVELY for human gates,
   visually distinct from the agent/action accent, so that wherever it appears
   a person is involved. The design system has no third brand accent — orange
   is action, navy is ink — so rather than invent a hex outside the system this
   uses --gi-success, which is a real system token and semantically close
   ("confirmed by a person"). It is used nowhere else on these pages.
   Do not reuse it for anything but a human gate. */
.ai-gate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-hairline) solid currentColor;
  border-radius: var(--radius-chip);
  color: var(--ai-gate-ink);
  font-size: var(--fs-caption);
  line-height: 1.4;
}
.ai-gate::before {
  content: "";
  width: 8px; height: 8px;
  transform: rotate(45deg);          /* diamond = human gate, per §5 */
  background: currentColor;
  flex: none;
}
/* #13876B does not clear 4.5:1 on the dark navy surface, so dark sections use
   the soft tint instead. Same role, same meaning, legible on both grounds. */


.ai-closing-line {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--border-width-hairline) solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--gi-white);
}

/* --- Migration matrix ---------------------------------------------------- */
.ai-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.ai-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width-hairline) solid var(--gi-neutral-200);
  border-radius: var(--radius-chip);
  background: var(--gi-neutral-0);
  text-decoration: none;
  color: var(--gi-navy-800);
  font-size: var(--fs-body-sm);
  transition: border-color 250ms ease, background 250ms ease;
}
.ai-chip:hover { border-color: var(--gi-orange); background: var(--gi-orange-tint); }
.ai-chip__from { color: var(--gi-neutral-600); }
.ai-chip__arrow { color: var(--ai-action); flex: none; }
/* The Monolith chip is the only entry point to /ai/monolith-to-microservices,
   so it is marked as a full page rather than an anchor. Load-bearing link. */
.ai-chip--page { border-color: var(--gi-navy-300); border-width: var(--border-width-strong); }
.ai-chip--ask { justify-content: center; color: var(--ai-action); }

/* --- Trust grid ---------------------------------------------------------- */
.ai-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}
.ai-trust-item h3 { font-size: var(--fs-h6); margin-bottom: var(--space-3); }
.ai-trust-item p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--gi-neutral-600); }

.ai-certs {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--gi-neutral-200);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-size: var(--fs-body-sm);
  color: var(--gi-navy-700);
}

/* --- Accordion (objections) ---------------------------------------------- */
.ai-accordion { max-width: var(--container-narrow); }
.ai-accordion details {
  border-bottom: var(--border-width-hairline) solid var(--gi-neutral-200);
}
.ai-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  cursor: pointer;
  font-size: var(--fs-h6);
  color: var(--gi-navy-800);
  list-style: none;
}
.ai-accordion summary::-webkit-details-marker { display: none; }
.ai-accordion summary::after {
  content: "+";
  font-size: var(--fs-h5);
  color: var(--ai-action);
  flex: none;
  line-height: 1;
}
.ai-accordion details[open] summary::after { content: "\2212"; }
.ai-accordion details p {
  padding-bottom: var(--space-6);
  line-height: 1.65;
  color: var(--gi-neutral-600);
}

/* --- Steps --------------------------------------------------------------- */
.ai-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); }
.ai-step__num {
  font-size: var(--fs-h3);
  color: var(--gi-neutral-300);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.ai-step h3 { font-size: var(--fs-h6); margin-bottom: var(--space-3); }
.ai-step p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--gi-neutral-600); }

/* --- Case studies -------------------------------------------------------- */
.ai-case { border-top: 3px solid var(--gi-navy-300); padding-top: var(--space-5); }
.ai-case:nth-child(2) { border-top-color: var(--gi-navy-500); }
.ai-case:nth-child(3) { border-top-color: var(--gi-navy-700); }
.ai-case__meta { font-size: var(--fs-caption); color: var(--gi-neutral-500); margin-bottom: var(--space-4); }
.ai-case h3 { font-size: var(--fs-h6); margin-bottom: var(--space-3); }
.ai-case p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--gi-neutral-600); }
.ai-case p + p { margin-top: var(--space-3); }

/* Placeholder marker — visible on purpose. These blocks are NOT ship copy and
   must be replaced with real figures before this page is indexed. */
.ai-todo {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--gi-orange-700);
  border-radius: var(--radius-sm);
  color: var(--gi-orange-700);
  font-size: var(--fs-caption);
  background: var(--gi-orange-50);
}

/* --- Related strip ------------------------------------------------------- */
.ai-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-grid); }
.ai-related a {
  display: block;
  padding: var(--space-6);
  border: var(--border-width-hairline) solid var(--gi-neutral-200);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--gi-navy-800);
}
.ai-related a:hover { border-color: var(--gi-orange); }
.ai-related span { display: block; font-size: var(--fs-caption); color: var(--gi-neutral-600); margin-bottom: var(--space-2); }

/* --- Prose (sub-pages) --------------------------------------------------- */
.ai-prose { max-width: 72ch; }
.ai-prose h2 { font-size: var(--fs-h4); margin-top: var(--space-12); margin-bottom: var(--space-5); }
.ai-prose h3 { font-size: var(--fs-h6); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.ai-prose p { line-height: 1.7; }
.ai-prose p + p { margin-top: var(--paragraph-spacing); }
.ai-prose ul { margin: var(--space-5) 0; }
.ai-prose ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}
.ai-prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: var(--radius-circle);
  background: var(--gi-navy-300);
}
.ai-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--gi-neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* --- Skip link ----------------------------------------------------------- */
.ai-skip {
  position: absolute;
  left: -9999px;
}
.ai-skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--gi-white);
  color: var(--gi-navy-800);
  border-radius: var(--radius-sm);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .ai-page { --fs-h1: 54px; --fs-h2: 44px; --fs-h3: 34px; }
  .ai-split { grid-template-columns: 1fr; gap: var(--space-10); }
  .ai-hero { padding-block: var(--space-20) var(--space-12); }
}

@media (max-width: 768px) {
  .ai-page {
    --fs-h1: 38px; --fs-h2: 32px; --fs-h3: 26px;
    --fs-slogan: 24px; --fs-lead: 18px;
    --section-padding-y: var(--space-12);
    --section-padding-y-compact: var(--space-10);
  }
  .ai-header__nav { display: none; }   /* brand + CTA only on small screens */
  .ai-btn { min-width: 100%; }
  .ai-cta-row { flex-direction: column; }
  .ai-stage { grid-template-columns: 1fr; gap: var(--space-3); }
  .ai-metrics { margin-top: var(--space-12); }
}

/* Reduced motion: the only transitions here are hover affordances, but honour
   the preference completely — §4.5 requires the end state, never removal. */
@media (prefers-reduced-motion: reduce) {
  .ai-page *,
  .ai-page *::before,
  .ai-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}