/* ═══════════════════════════════════════════════════════════════
   AMES landing page — "Cool Organism" marketing surface
   Ported from docs/design/landing-v3/ames-landing-v3.html (design of
   record, HIM-377). Tickets: HIM-380 (hero/nav) · HIM-382 (demo card) ·
   HIM-385 (bento) · HIM-388 (CTA/footer) · HIM-391 (scroll motion) ·
   HIM-488 (central CSS / i18n / light-dark).

   ARCHITECTURE (HIM-488):
   • Central sheet — zero <style>/inline in index.html. Loaded AFTER
     ames-01.css so the shared design tokens (--terra/--leaf/--amber/
     --ink/--muted/--paper/--line-2/--serif/--sans/--mono + their
     dark flips) come from the one design system, not restated here.
   • Every selector is scoped under `.ames-landing` (on <body>) so the
     landing's generic class names never collide with ames-01.css
     (which also defines .eyebrow/.nav-inner/.nav-links).
   • Light/dark is a pure token swap on the SAME mechanism the app uses
     — `html.dark` (manual toggle) + `@media (prefers-color-scheme:dark)
     :root:not(.light)` (system) — NOT a parallel [data-theme] system
     (Doctrine I: one theming source). Only two landing-local tokens are
     added below; ames-01.css tokens are untouched (HIM-377).
   • Logical properties (margin-inline / text-align:start) so RTL is a
     locale flag later, not a rewrite (HIM-488 i18n).
   ═══════════════════════════════════════════════════════════════ */

/* ── Landing-local tokens (the two ames-01.css does not carry) ──
   --on-terra : text/icon color on a terra fill (HIM-488 new token)
   --terra-ink: terra hover/active ink
   Flipped for dark via the app's own selectors so they stay in sync. */
:root {
  --on-terra: #FFFFFF;
  --terra-ink: #3D6979;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --on-terra: #10181C;
    --terra-ink: #8FB6C6;
  }
}
html.dark {
  --on-terra: #10181C;
  --terra-ink: #8FB6C6;
}

/* ── Base ── */
.ames-landing {
  font-family: var(--sans);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.ames-landing em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.ames-landing a { color: inherit; text-decoration: none; }

.ames-landing a:focus-visible,
.ames-landing button:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 4px;
}

.ames-landing .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ames-landing .wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.ames-landing .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terra);
}

/* ═══════════ NAV (HIM-380) ═══════════ */
.ames-landing .nav {
  border-bottom: 1px solid var(--line-2);
}
/* Eyebrow strip above the brand row — houses the value-prop line + the
   "by Aetherian Labs" byline that used to sit beside the wordmark; kept as
   its own row so the brand row below can scale up without the byline
   crowding it (HIM-377 brand-scale follow-up). */
.ames-landing .nav-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-2);
}
.ames-landing .nav-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 18px;
}
.ames-landing .brand { display: flex; align-items: baseline; gap: 12px; }
/* brand mark left of the wordmark — theme-aware square logo pair, vertically
   centered on the flex line (width/height attrs on the <img>s prevent layout
   shift). Light default; dark asset swaps in for manual html.dark + system
   dark; manual html.light beats system dark — mirrors the .lp-sun/.lp-moon
   toggle rules below. */
.ames-landing .brand-logo { width: 44px; height: 44px; align-self: center; }
.ames-landing .brand-logo.brand-light { display: block; }
.ames-landing .brand-logo.brand-dark  { display: none; }
html.dark .ames-landing .brand-logo.brand-light { display: none; }
html.dark .ames-landing .brand-logo.brand-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .ames-landing .brand-logo.brand-light { display: none; }
  :root:not(.light) .ames-landing .brand-logo.brand-dark  { display: block; }
}
.ames-landing .brand-name { font-family: var(--serif); font-style: italic; font-size: 40px; letter-spacing: .01em; }
/* "By Aetherian Labs" byline — now lives in the eyebrow row (right side)
   rather than beside the wordmark, so it no longer needs the relative
   top offset that squeezed it in next to the old, smaller brand-name. */
.ames-landing .brand-sup {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
}
/* flex:0 0 auto resets ames-01.css .nav-links{flex:1} leaking through the
   shared class name — keeps the links their natural width, right-aligned. */
.ames-landing .nav-links { display: flex; flex: 0 0 auto; gap: 26px; align-items: baseline; font-size: 14px; }
.ames-landing .nav-links a { color: var(--muted); }
.ames-landing .nav-links a:hover { color: var(--ink); }
.ames-landing .nav-links a.signin { color: var(--terra); font-weight: 500; }
.ames-landing .theme-toggle {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 0; display: inline-flex; align-items: center; line-height: 1;
}
.ames-landing .theme-toggle:hover { color: var(--terra); }
.ames-landing .theme-toggle svg { width: 16px; height: 16px; display: block; }
/* icon reflects the EFFECTIVE theme: moon in light, sun in dark —
   handled for manual (html.dark) and system-dark, mirroring ames-01.css */
.ames-landing .theme-toggle .lp-sun  { display: none; }
.ames-landing .theme-toggle .lp-moon { display: block; }
html.dark .ames-landing .theme-toggle .lp-sun  { display: block; }
html.dark .ames-landing .theme-toggle .lp-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .ames-landing .theme-toggle .lp-sun  { display: block; }
  :root:not(.light) .ames-landing .theme-toggle .lp-moon { display: none; }
}
@media (max-width: 640px) {
  .ames-landing .nav-links a:not(.signin) { display: none; }
}

/* ═══════════ HERO (HIM-380) ═══════════ */
.ames-landing .hero { padding-block: 64px 84px; }
.ames-landing .hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 56px;
  align-items: center; justify-items: center; text-align: center;
}
.ames-landing .hero-copy { max-width: 560px; }
.ames-landing .hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
  margin-block: 16px 18px;
}
.ames-landing .hero-sub {
  max-width: 430px;
  color: var(--muted);
  font-size: 17px;
  margin: 0 auto 28px;
}
.ames-landing .cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 30px;
}
.ames-landing .btn {
  display: inline-block;
  font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ames-landing .btn-primary { background: var(--terra); color: var(--on-terra); }
.ames-landing .btn-primary:hover { background: var(--terra-ink); }
.ames-landing .btn-secondary { border-color: var(--line-2); color: var(--ink); background: transparent; }
.ames-landing .btn-secondary:hover { border-color: var(--terra); color: var(--terra); }
.ames-landing .trust { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.ames-landing .trust span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: .02em;
}
.ames-landing .trust svg { width: 15px; height: 15px; stroke: var(--leaf); flex: none; }

@media (min-width: 1024px) {
  .ames-landing .hero-grid {
    grid-template-columns: 55fr 45fr;
    justify-items: stretch; text-align: start;
  }
  .ames-landing .hero-copy { max-width: none; }
  .ames-landing .hero-sub { margin-inline-start: 0; }
  .ames-landing .cta-row,
  .ames-landing .trust { justify-content: flex-start; }
}

/* ═══════════ DEMO CARD (HIM-382, three scenes, tabbed) ═══════════ */
.ames-landing .demo-card {
  width: 100%; max-width: 450px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 18px 22px 20px;
  min-height: var(--h-card, auto);
}
.ames-landing .demo-anim { transition: opacity 400ms ease; }
.ames-landing .demo-anim.fading { opacity: 0; }

/* scene tabs — real buttons, keyboard-first */
.ames-landing .demo-tabs {
  display: flex; gap: 18px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 14px;
}
.ames-landing .demo-tab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--muted); background: none; border: none; cursor: pointer;
  padding-block: 8px; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ames-landing .demo-tab.active { color: var(--terra); border-bottom-color: var(--terra); }

.ames-landing .demo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.ames-landing .demo-enc {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* rotating specialty module badge — the tuning is ambient, not claimed */
.ames-landing .demo-spec {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--terra); border: 1px solid var(--terra);
  border-radius: 4px; padding: 1px 6px;
}
.ames-landing .pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--line-2); color: var(--muted);
  transition: background-color 200ms ease, color 200ms ease;
  white-space: nowrap;
}
.ames-landing .pill.ready { background: var(--leaf-soft); color: var(--leaf); }
.ames-landing .demo-title { font-size: 14.5px; font-weight: 600; margin-bottom: 14px; }
.ames-landing .demo-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--terra); margin-bottom: 4px;
}
/* min-heights: fallback values; JS freezes the measured final-frame
   height into custom properties (the one sanctioned dynamic write) */
.ames-landing .demo-line {
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
  margin-bottom: 12px;
}
.ames-landing #demoHpi { min-height: var(--h-hpi, 38px); }
.ames-landing #demoAp  { min-height: var(--h-ap, 38px); }
.ames-landing .demo-added {
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
  min-height: var(--h-added, 20px); margin: -8px 0 12px;
  border-radius: 4px;
  transition: background-color 600ms ease;
}
.ames-landing .demo-added.hl { background: var(--leaf-soft); }
.ames-landing .chip-row { display: flex; gap: 8px; flex-wrap: wrap; min-height: 24px; }

/* chip component — SINGLE SOURCE, shared with bento (HIM-385 req) */
.ames-landing .chip {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; border-radius: 6px; border: 1px solid;
}
.ames-landing .chip-leaf { color: var(--leaf); border-color: var(--leaf); background: var(--leaf-soft); }
.ames-landing .chip-amber { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.ames-landing .demo-anim .chip.pop {
  opacity: 0; transform: scale(.95);
  transition: opacity 160ms ease, transform 160ms ease;
}
.ames-landing .demo-anim .chip.pop.in { opacity: 1; transform: scale(1); }

/* scene-2 Ask AMES command row */
.ames-landing .ask-row {
  border-top: 1px solid var(--line-2);
  margin-top: 14px; padding-top: 12px;
}
.ames-landing .ask-cmd {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--ink); min-height: var(--h-cmd, 20px);
}
.ames-landing .ask-cmd::before { content: "\203A\00a0"; color: var(--terra); }

/* scene-3 billing panel */
.ames-landing .demo-billing .b-row { margin-bottom: 12px; }
.ames-landing .demo-billing .b-line { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.ames-landing .demo-anim .b-row.rise {
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.ames-landing .demo-anim .b-row.rise.in { opacity: 1; transform: translateY(0); }
.ames-landing .demo-billing .cell-foot-note {
  margin-top: 2px; font-size: 12.5px; color: var(--muted);
}

/* ═══════════ WHAT IT DOES + BENTO (HIM-385) ═══════════ */
.ames-landing .features { padding-block: 24px 72px; }
.ames-landing .features-head { text-align: center; margin-bottom: 36px; }
.ames-landing .features-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.5vw, 38px);
  margin-top: 12px;
}
.ames-landing .bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.ames-landing .cell {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 18px;
  grid-column: span 12;
}
/* scroll-motion states — hidden state applied VIA JS on load
   (never in base styles) per HIM-391 no-JS rule */
.ames-landing .cell.pre { opacity: 0; transform: translateY(10px); }
.ames-landing .cell.vis {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
}

.ames-landing .cell h3 {
  font-family: var(--serif); font-weight: 400; font-size: 21px;
  margin-block: 6px;
}
.ames-landing .cell p { font-size: 14px; color: var(--muted); }
.ames-landing .cell-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
}
.ames-landing .cell-eyebrow.amber { color: var(--amber); }
.ames-landing .cell .chip-row { margin-top: 14px; min-height: 0; }
.ames-landing .cell-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--muted);
}
.ames-landing .cell-caption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--terra); margin-top: 12px;
}
.ames-landing .cell-icon { width: 18px; height: 18px; stroke: var(--terra); margin-bottom: 8px; display: block; }
.ames-landing .cell-small h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; margin: 0 0 3px; }

@media (min-width: 768px) {
  .ames-landing .cell-large { grid-column: span 12; }
  .ames-landing .cell-medium { grid-column: span 6; }
  .ames-landing .cell-small { grid-column: span 4; }
}
/* ≥1024px: large span 7 (2 rows) with the two differentiator mediums
   (Ask AMES, specialty) stacked beside it in span 5 */
@media (min-width: 1024px) {
  .ames-landing .cell-large {
    grid-column: span 7; grid-row: span 2;
    display: flex; flex-direction: column; justify-content: center;
  }
  .ames-landing .cell-medium.m-side { grid-column: 8 / span 5; }
  .ames-landing .cell { padding: 20px 22px; }
}

/* ═══════════ CTA BAND + FOOTER (HIM-388) ═══════════ */
.ames-landing .cta-band {
  border-top: 1px solid var(--line-2);
  text-align: center;
  padding-block: 72px;
}
.ames-landing .cta-band h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.5vw, 38px);
  margin-bottom: 24px;
}
.ames-landing .cta-band .fine {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  color: var(--muted); margin-top: 16px;
}
.ames-landing .footer {
  border-top: 1px solid var(--line-2);
  padding-block: 26px;
  text-align: center;
  font-size: 13px; color: var(--muted);
}

/* ═══════════ REQUEST ACCESS (public form) ═══════════
   Same public shell as the landing; all styling here (no inline styles). */
.ames-landing .request-access { padding-block: 56px 80px; }
.ames-landing .ra-wrap { max-width: 720px; }
.ames-landing .ra-intro { margin-bottom: 28px; }
.ames-landing .ra-intro h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 44px); line-height: 1.1;
  margin-block: 12px 12px;
}
.ames-landing .ra-sub { color: var(--muted); font-size: 16px; max-width: 52ch; }

.ames-landing .ra-card {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 28px 28px 24px;
}
.ames-landing .ra-thanks { text-align: center; padding-block: 44px; }
.ames-landing .ra-thanks h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px); margin-block: 12px 12px;
}
.ames-landing .ra-thanks .cta-row { justify-content: center; margin-top: 22px; }

.ames-landing .ra-error {
  border: 1px solid var(--line-2);
  border-inline-start: 3px solid #B4462F;
  background: rgba(180, 70, 47, 0.08);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 14px; margin-bottom: 18px; font-size: 14px;
}

.ames-landing .ra-form { display: flex; flex-direction: column; gap: 16px; }
.ames-landing .ra-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 620px) {
  .ames-landing .ra-row { grid-template-columns: 1fr 1fr; }
}
.ames-landing .ra-field { display: flex; flex-direction: column; gap: 6px; }
.ames-landing .ra-field-narrow { max-width: 220px; }
.ames-landing .ra-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ames-landing .ra-req { color: var(--terra); }
.ames-landing .ra-optional { text-transform: none; letter-spacing: 0; color: var(--muted-2); }

.ames-landing .ra-form input,
.ames-landing .ra-form textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 10px 12px; width: 100%;
}
.ames-landing .ra-form textarea { resize: vertical; }
.ames-landing .ra-form input:focus,
.ames-landing .ra-form textarea:focus {
  outline: none; border-color: var(--terra);
  box-shadow: 0 0 0 3px var(--terra-soft);
}
.ames-landing .ra-form input::placeholder,
.ames-landing .ra-form textarea::placeholder { color: var(--muted-2); }

/* Honeypot: off-screen (not display:none — bots skip those) so humans never
   see or tab to it, but a form-filling bot still trips it. */
.ames-landing .ra-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.ames-landing .ra-actions { margin-top: 6px; }
.ames-landing .ra-fineprint {
  margin-top: 14px; font-size: 13px; color: var(--muted);
}
.ames-landing .ra-fineprint a { color: var(--terra); }
