/* ──────────────────────────────────────────────────────────────────
   Landing (index.html): hero CTA pair, the pinned scroll dive from the
   hero rainbow into the teal field, and the problem section on that field.
   ScrollDive.jsx drives the dive with transform + opacity only.
   ────────────────────────────────────────────────────────────────── */

/* Muted copy on every field from Why Amos through Partnership, the same
   value /ministry uses. The cacao footer resets it to linen. */
:root {
  --on-field-muted: #D7E2DD;
  /* Last text to next text. The copy padding on each side is subtracted
     where the tail is applied, so the measured gap stays near 70vh. */
  --amos-tail: 66vh;
}

.amos-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  background: var(--cacao);
  color: var(--linen);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.amos-skip:focus {
  transform: none;
  outline: 2px solid var(--cacao);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--linen);
}
#main:focus { outline: none; }

.amos-landing-root .nw { white-space: nowrap; }

/* ─── Hero CTA pair ─────────────────────────────────────────────── */
.hero-cta-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.hero-cta-pair .hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* The page-wide `button:hover` brightness filter would make the two buttons drift apart. */
.hero-cta-pair .hero-cta:hover { filter: none; }
.hero-cta-pair .hero-cta:active { transform: translateY(1px); }

/* Two-tone ring (cacao between linen bands) so it holds 3:1 over the oat
   canvas and over the dark rainbow bands alike. The linen comes from the
   box-shadow; per-variant rules below keep each button's own shadow. */
.hero-cta-pair .hero-cta:focus-visible {
  outline: 2px solid var(--cacao);
  outline-offset: 2px;
}

.hero-cta--primary {
  background: var(--cacao);
  color: var(--linen);
  box-shadow: var(--shadow-inset);
}
.hero-cta--primary:hover,
.hero-cta--primary:active {
  background: var(--ink);
}

/* The light fill keeps cacao text above AA where the button overlaps the
   rainbow bands (stacked layout on phones). */
.hero-cta--secondary {
  background: rgba(247, 239, 226, 0.72);
  color: var(--cacao);
  box-shadow: inset 0 0 0 1px rgba(52, 24, 0, 0.6);
}
.hero-cta--secondary:hover {
  background: rgba(247, 239, 226, 0.92);
  box-shadow: inset 0 0 0 1px var(--cacao);
}
.hero-cta--secondary:active {
  background: rgba(228, 211, 196, 0.95);
  box-shadow: inset 0 0 0 1px var(--cacao);
}

.hero-cta--primary:focus-visible {
  box-shadow: var(--shadow-inset), 0 0 0 6px var(--linen);
}
.hero-cta--secondary:focus-visible {
  box-shadow: inset 0 0 0 1px var(--cacao), 0 0 0 6px var(--linen);
}

@media (max-width: 600px) {
  .hero-cta-pair {
    flex-direction: column;
    align-self: stretch;
    width: 100%;
  }
  .hero-cta-pair .hero-cta {
    width: 100%;
  }
  /* Stacked, the pair can sit on the rainbow bands: keep the outlined button opaque. */
  .hero-cta--secondary { background: var(--oat); }
  .hero-cta--secondary:hover { background: var(--linen); }
  .hero-cta--secondary:active { background: var(--oat-deep); }
}

/* ─── Phone hero: CTAs on the bottom of the visible viewport ─────
   The hero is one small viewport (svh: Safari's toolbar showing) tall and
   the CTA pair takes the free space above it (margin-top: auto), so it
   rests just above the toolbar and home indicator, scrolls with the hero
   and fades with it. On screens too short for that, the free space is zero
   and the pair falls back into flow under the subline (24px below it). */
@media (max-width: 480px) {
  .amos-landing-root .amos-dive__stage > section.amos-hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
  }
  .amos-landing-root .amos-dive__stage .hero-inner {
    height: auto !important;
    /* Above the hero's own env(safe-area-inset-bottom) padding. */
    padding-bottom: 20px !important;
  }
  .amos-landing-root .amos-dive__stage .hero-sub {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
  .amos-landing-root .amos-dive__stage .hero-cta-pair {
    margin-top: auto;
  }
}

/* iOS rubber-band: oat above the hero, the teal field below the problem section. */
html {
  background-color: var(--oat);
  background-image: linear-gradient(var(--oat) 50%, var(--field-lo) 50%);
}

/* ─── Scroll dive ───────────────────────────────────────────────── */
.amos-dive {
  position: relative;
  /* Never visible (the pinned stage always covers the viewport). It is what
     sits behind the problem copy wherever the stage is not, e.g. off-screen
     for contrast checkers, or if the stage fails to paint. */
  background-color: var(--field);
  /* Scroll distance of the transition. lvh stays fixed while the iOS
     address bar collapses, so the scrub never jumps. */
  --amos-dive: 170vh;
  --amos-dive-lead: 34vh;
}
@supports (height: 1lvh) {
  .amos-dive {
    --amos-dive: 170lvh;
    --amos-dive-lead: 34lvh;
  }
}

/* Ruler the controller reads to turn --amos-dive into pixels. While it is on
   screen the dive is in range, so it also gates the frame loop. */
.amos-dive__probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--amos-dive);
  visibility: hidden;
  pointer-events: none;
}

/* 100lvh, read from script. innerHeight changes with the iOS toolbar. */
.amos-dive__ruler {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.amos-dive__ruler > span { display: block; width: 0; }
.amos-dive__ruler > .is-lvh { height: 100vh; height: 100lvh; }

.amos-dive__stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: var(--oat);
  isolation: isolate;
}

.amos-dive__spacer {
  height: calc(var(--amos-dive) - var(--amos-dive-lead));
}

/* The hero is taller than the viewport (reflow, short landscape). The stage
   takes the hero's height and pins by its bottom edge, so the hero scrolls
   through before the dive, which then plays in the bottom screenful. */
.amos-dive.is-tall .amos-dive__stage {
  top: calc(100vh - var(--amos-hero-h));
  top: calc(100lvh - var(--amos-hero-h));
  height: var(--amos-hero-h);
}
.amos-dive.is-tall .amos-dive__probe {
  top: calc(var(--amos-hero-h) - 100vh);
  top: calc(var(--amos-hero-h) - 100lvh);
}
.amos-dive.is-tall .amos-dive__core {
  top: calc(100% - 50vh);
  top: calc(100% - 50lvh);
}

.amos-dive__layer {
  position: absolute;
  pointer-events: none;
}

/* The core used to paint a radial bloom. It still scales with the dive,
   but it paints nothing, so the fill does not grow a second colour. */
.amos-dive__core {
  left: 50%;
  top: 50%;
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  background: none;
}

/* Flat token. Same value Why Amos sits on, with no edge and no centre glow. */
.amos-dive__field {
  inset: -6%;
  z-index: 3;
  opacity: 0;
  background: var(--field);
}

/* The grain layer still runs so its opacity track is unchanged, but it
   paints nothing. Soft-light noise was lifting #2D6676 enough that muted
   text fell under 4.5:1, and it made the fill differ from the token. */
.amos-dive__grain {
  inset: 0;
  z-index: 4;
  opacity: 0;
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .amos-dive {
    --amos-dive: 110vh;
  }
  @supports (height: 1lvh) {
    .amos-dive {
      --amos-dive: 110lvh;
    }
  }
}

/* ─── The problem (rides over the pinned teal field) ───────────── */
.amos-problem {
  position: relative;
  /* Field ink the whole way; --amos-copy fades the copy in over the dive.
     Nothing paints a box behind the type. */
  --amos-copy: 0;
  color: var(--fg-on-field);
  padding: 14vh 56px calc(var(--amos-tail) - 96px);
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.amos-problem__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--on-field-muted);
  opacity: var(--amos-copy);
}
.amos-problem__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--saffron);
}

.amos-problem h2 {
  max-width: 21ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  opacity: var(--amos-copy);
}
.amos-problem h2:focus { outline: none; }
.amos-problem h2:focus-visible {
  outline: 2px solid var(--fg-on-field);
  outline-offset: 6px;
  border-radius: var(--radius-xs);
}
.amos-problem h2 em {
  font-style: italic;
  color: var(--fg-on-field-accent);
}
@media (min-width: 821px) {
  .amos-problem h2 em { white-space: nowrap; }
}

.amos-problem__lead {
  max-width: 36em;
  margin: 36px 0 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--on-field-muted);
  opacity: var(--amos-copy);
  text-wrap: pretty;
}

.amos-problem__rows {
  list-style: none;
  margin: 88px 0 0;
  padding: 0;
  border-top: 1px solid var(--border-on-field);
  opacity: var(--amos-copy);
}
.amos-problem__rows li {
  display: grid;
  grid-template-columns: 72px minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  align-items: baseline;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--border-on-field);
}
.amos-problem__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--on-field-muted);
}
.amos-problem__rows h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.amos-problem__rows p {
  max-width: 34em;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--on-field-muted);
}

@media (max-width: 820px) {
  .amos-problem { padding: 12vh 24px calc(var(--amos-tail) - 64px); }
  .amos-problem__eyebrow { margin-bottom: 22px; }
  .amos-problem__lead { font-size: 17px; margin-top: var(--space-5); }
  .amos-problem__rows { margin-top: 56px; }
  .amos-problem__rows li {
    grid-template-columns: 44px 1fr;
    gap: 10px 12px;
    padding: 24px 0 26px;
  }
  .amos-problem__rows h3 { font-size: 24px; }
  .amos-problem__rows p { grid-column: 2; font-size: 16px; }
}

.amos-problem .is-offstage { opacity: 0; }

/* Held back while "Learn more" glides down, then popped in on landing. */
.amos-problem__inner { position: relative; z-index: 4; }
.amos-problem__inner.is-arriving { opacity: 0; }

/* ─── Story after the dive ────────────────────────────────────────
   Why Amos is the dive's teal token, #2D6676. The seam is that same
   flat fill, so the dive does not blend into a second colour.
   Then Who #3C647B, Problem #4C6180, Different #585E80, Partnership
   #635B7F, and the cacao footer. Olive and moss are not used.
   The pin slides the next hue in from the right. The copy stays
   visible on top of it.
   The sections live in <main>. The footer is a sibling contentinfo.
   The runway after each section is the tail below. Last text to next
   text is about 70vh. The 15vh side-slide runs inside that tail and
   finishes before the next text reaches the readable band. */
.amos-story {
  --story-fg: var(--fg-on-field);
  --story-muted: var(--on-field-muted);
  position: relative;
  z-index: 3;
  isolation: isolate;
  /* Transparent so the seam can show the dive through its top. */
  background: transparent;
  color: var(--story-fg);
  margin-top: -28vh;
  margin-top: -28lvh;
}
.amos-story__seam {
  height: 28vh;
  height: 28lvh;
  background: var(--field);
  pointer-events: none;
}

/* Fixed for the life of the page and moved only by transform
   (StorySections holdPin), so a jump never reports it as a layout shift. */
.amos-story__pin {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.amos-story.is-ready .amos-story__pin { visibility: visible; }

.amos-story__base,
.amos-story__overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.amos-story__base {
  width: 100%;
  background: var(--field);
}
/* Same slide as the pin, already viewport-sized, so the color can cross
   the screen while the sticky pin is still below the glow. Opacity does
   the showing; the box never moves. */
.amos-story__hold {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.amos-story.is-ready .amos-story__hold.is-on { opacity: 1; }
.amos-story__overlay {
  width: 150%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--story-to, transparent) 33.333%,
    var(--story-to, transparent) 100%
  );
  /* 66.667% of the 150% layer is one viewport, so the ramp starts off-screen. */
  transform: translate3d(66.667%, 0, 0);
}
.amos-story.is-reduced .amos-story__overlay {
  width: 100%;
  background: var(--story-to, transparent);
  transform: none;
}

.amos-story__section,
.amos-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--story-bg, var(--field));
  color: var(--story-fg);
}
.amos-story__section {
  min-height: 0;
  /* Tail after the copy's own padding. With that padding, last text to
     next text is about 70vh, and the 15vh side-slide runs inside it. */
  padding-bottom: calc(var(--amos-tail) - 2 * var(--space-9));
}
.amos-story__section:last-of-type {
  padding-bottom: calc(var(--amos-tail) - 2 * var(--space-9));
}
/* Design-gate tokens, in arc order after the teal field. A page may skip a
   section, but a section keeps its color. Muted copy inherits
   --on-field-muted from .amos-story. */
.amos-story__section[data-story-key="who"] { --story-bg: #3c647b; }
.amos-story__section[data-story-key="problem"] { --story-bg: #4c6180; }
.amos-story__section[data-story-key="different"] { --story-bg: #585e80; }
.amos-story__section[data-story-key="partnership"] { --story-bg: #635b7f; }
.amos-footer {
  --story-bg: var(--cacao);
  --story-fg: var(--linen);
  --story-muted: var(--linen);
  color: var(--linen);
}

.amos-story__copy,
.amos-footer__inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: auto;
  padding: var(--space-9) 56px;
}
.amos-story__copy {
  margin-top: 0;
  margin-bottom: 0;
}
/* Above the story stacking context (z-index 3) so the footer copy stays
   on top of the fixed pin. The footer's own background stays underneath. */
.amos-footer__inner { z-index: 4; }
.amos-story__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--story-muted);
}
.amos-story__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--saffron);
}

.amos-story h2 {
  max-width: 18em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  line-height: var(--lead-tight);
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--story-fg);
}
.amos-story__note {
  max-width: 36em;
  margin: var(--space-6) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lead-normal);
  color: var(--story-muted);
}
.amos-story__body {
  max-width: 38em;
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lead-relaxed);
  color: var(--story-muted);
  text-wrap: pretty;
}

.amos-story__rows {
  list-style: none;
  max-width: 980px;
  margin: var(--space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-on-field);
}
.amos-story__rows li {
  display: grid;
  grid-template-columns: 72px minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  align-items: baseline;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--border-on-field);
}
/* No index column. Two tracks, so the title does not sit in the 72px number slot. */
.amos-story__rows.amos-story__rows--plain li {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.amos-story__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--story-muted);
}
.amos-story__rows h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--lead-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--story-fg);
}
.amos-story__rows p {
  max-width: 36em;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lead-relaxed);
  color: var(--story-muted);
  text-wrap: pretty;
}

.amos-story__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.amos-story__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--linen);
  color: var(--cacao);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.amos-story__button:hover { filter: none; background: var(--oat); }
.amos-story__button:focus-visible {
  outline: 2px solid var(--cacao);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--linen);
}
.amos-story__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--story-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lead-normal);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.amos-story__mail:focus-visible {
  outline: 2px solid var(--story-fg);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.amos-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.amos-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--linen);
  text-decoration: none;
}
.amos-footer__logo:focus-visible {
  outline: 2px solid var(--linen);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.amos-footer__tag {
  max-width: 28em;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--lead-relaxed);
  color: var(--linen);
  text-wrap: pretty;
}
.amos-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
}
.amos-footer__nav a,
.amos-footer__nav button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--linen);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--lead-normal);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.amos-footer__nav a:hover,
.amos-footer__nav button:hover { filter: none; color: var(--oat); }
.amos-footer__nav a:focus-visible,
.amos-footer__nav button:focus-visible {
  outline: 2px solid var(--linen);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.amos-footer__legal {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lead-normal);
  color: var(--linen);
}

@media (max-width: 820px) {
  .amos-story__section,
  .amos-story__section:last-of-type {
    padding-bottom: calc(var(--amos-tail) - 2 * var(--space-8));
  }
  .amos-story__copy,
  .amos-footer__inner { padding: var(--space-8) var(--space-5); }
  .amos-story__rows { margin-top: var(--space-7); }
  .amos-story__rows li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px var(--space-3);
    padding: var(--space-5) 0;
  }
  .amos-story__rows h3 { font-size: var(--text-lg); }
  .amos-story__rows p { grid-column: 2; }
  .amos-story__rows.amos-story__rows--plain li { grid-template-columns: minmax(0, 1fr); }
  .amos-story__rows.amos-story__rows--plain p { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .amos-story__overlay { transform: none; }
}

/* Page shell shared by the home page and /ministry. */
/* Prevent scroll anchoring from fighting entry motion (see amosFade below). */
html { overflow-anchor: none; }
#app { overflow-anchor: none; }

html, body { margin: 0; padding: 0; }
/* mobile.css fades html/body background over 350ms for the theme toggle.
   The dive sets that color as the scroll moves, and the fade left an oat
   strip on screen after the field was already teal. */
html, body { transition: none; }
body { background: var(--oat); color: var(--cacao); }
::selection { background: var(--saffron); color: var(--cacao); }
button, input, textarea, select { font-family: inherit; }
button:hover { filter: brightness(0.97); }
button:active { transform: translateY(1px); }
input:focus, textarea:focus {
  box-shadow: 0 1px 0 var(--saffron);
}
textarea:focus { outline: none; }
a { color: inherit; }

/* Fade-in only: translateY on a tall first paint was triggering scroll anchoring
   (subtle scrollY nudge on refresh). Opacity does not participate in anchoring. */
@keyframes amosFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
#app > *:not(.amos-no-fade) { animation: amosFade .56s var(--ease-out) both; }
#app > *:nth-child(2):not(.amos-no-fade) { animation-delay: .06s; }
#app > *:nth-child(3):not(.amos-no-fade) { animation-delay: .12s; }
#app > *:nth-child(4):not(.amos-no-fade) { animation-delay: .18s; }

/*
 * Amos Rainbow — layered SVG arc at the bottom of the hero.
 * Host is portaled inside `.amos-landing-root .amos-hero` after HeroBackground.
 */
.amos-landing-root .amos-hero {
  /* Shared window-based rainbow position vars used by both arc + headline. */
  --amos-rainbow-width: clamp(1100px, 185vw, 2400px);
  --amos-rainbow-top: clamp(60px, 14vh, 140px);
  --amos-rainbow-top-baseline: 60px;
  --amos-rainbow-h1-follow-ratio: 0.16;
  --amos-rainbow-h1-shift: calc(
    (var(--amos-rainbow-top) - var(--amos-rainbow-top-baseline))
    * var(--amos-rainbow-h1-follow-ratio)
  );
}
.amos-bottom-rainbow-arc-host.amos-rainbow {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: block;
  /* Window-based tuning vars live on `.amos-hero` for shared coupling. */
}
/* At rest the arc is one SVG, which rasters far cheaper than four. While the
   scroll dive runs (data-layered) it swaps to one SVG per stroke so each can
   scale at its own rate; those reuse the rest SVG's filters and gradient, so
   the rest SVG is only made invisible (display: none would drop its defs). */
.amos-bottom-rainbow-arc-host .amos-rainbow-layer {
  position: absolute;
  inset: 0;
  display: none;
}
/* Zooming about a point inside its own box, a layer never brings its overflow
   into view (the margin covers the narrowest phones), so clipping it keeps
   the rastered area to one screen per arc. */
.amos-bottom-rainbow-arc-host[data-layered] .amos-rainbow-layer {
  display: block;
  overflow: clip;
  overflow-clip-margin: 24px;
}
/* A baked layer (ScrollDive.jsx) draws its stroke from a canvas, already
   filtered and masked, under the SVG that still holds the flat zoom patch. */
.amos-bottom-rainbow-arc-host .amos-rainbow-layer > .amos-rainbow-baked {
  position: absolute;
  pointer-events: none;
}
.amos-bottom-rainbow-arc-host .amos-rainbow-layer.is-baked > svg > g {
  display: none;
}
.amos-bottom-rainbow-arc-host[data-layered] > .amos-rainbow-rest {
  visibility: hidden;
}
.amos-bottom-rainbow-arc-host.amos-rainbow svg {
  position: absolute;
  left: 50%;
  top: var(--amos-rainbow-top);
  width: var(--amos-rainbow-width);
  height: auto;
  min-width: 100%;
  max-width: none;
  flex-shrink: 0;
  display: block;
  transform: translateX(-50%);
  /* Hide subtle filter-bounds seam near the SVG top edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 7%, black 16%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 7%, black 16%, black 100%);
}
.amos-landing-root .amos-hero .hero-h1 {
  transform: translateY(var(--amos-rainbow-h1-shift));
}
/* Short landscape: the ministry headline fits on one line and the home
   headline keeps its break, so the two heroes stay the same height and
   the longer subline still sits inside it. */
@media (max-height: 420px) and (min-width: 700px) {
  .amos-landing-root .amos-hero .hero-h1 {
    font-size: 48px !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 1024px) {
  .amos-landing-root .amos-hero {
    /* Around ~990px wide, lift the arc so it doesn't sag. */
    --amos-rainbow-top: clamp(36px, 11vh, 110px);
    --amos-rainbow-top-baseline: 36px;
  }
}
@media (max-width: 900px) {
  .amos-landing-root .amos-hero {
    /* Preserve arc thickness below 900px instead of continuing to shrink. */
    --amos-rainbow-width: 1665px;
  }
}
/* Above 1440 the 2400px cap lets the stroke ends, which sit about 160
   units inside the SVG frame, land on screen. From about 1920 the arc
   falls short of the edges; at 2240 and up the round caps show, and the
   frame ends in a hard line. This width keeps the caps and that edge
   off-screen. It does not depend on min-width: 100%, which some browsers
   ignore. 1440 and below keep the clamp above.
   1920 → 2880, 2560 → 3840, 3440 → 4472, 3840×1080 → 4992, 4000×1200 → 5200.
   On a short, wide window 130vw is the widest term, so the arc grows
   faster than the viewport is tall and the 140px top cap lets the crest
   sink. The second term lifts it back to the 1440×900 crest (401px down
   on that screen: 14vh of top plus 275px of scaled stroke). It never
   pushes the arc lower than the cap, which would leave the dive's copy
   on the arc after the copy has faded in. */
@media (min-width: 1441px) {
  .amos-landing-root .amos-hero {
    --amos-rainbow-width: max(2400px, 130vw, min(166.667vw, 266.667vh));
    --amos-rainbow-top: min(
      clamp(60px, 14vh, 140px),
      401 / 900 * 100vh - 275 / 2400 * var(--amos-rainbow-width)
    );
  }
}
/* 3.2:1 and wider (3840×1080, 4000×1200). At 130vw the center-column
   crest sits about 5vh low and the stroke meets the bottom edge, so the
   corners stay oat. 142vw pushes the stroke past the corners. The crest
   formula cancels that extra width, so the arc is also lifted 4vh.
   2560 and 3440 are taller than this and keep the rule above, including
   the 140px cap. */
@media (min-width: 1441px) and (min-aspect-ratio: 16/5) {
  .amos-landing-root .amos-hero {
    --amos-rainbow-width: max(2400px, 142vw, min(166.667vw, 266.667vh));
    --amos-rainbow-top: calc(
      min(
        clamp(60px, 14vh, 140px),
        401 / 900 * 100vh - 275 / 2400 * var(--amos-rainbow-width)
      ) - 4vh
    );
  }
}

/* Hero fills the pinned stage of the scroll dive (landing.css). */
.amos-dive__stage > section.amos-hero {
  min-height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  min-height: 100lvh !important;
  box-sizing: border-box !important;
}

/* Partner marks on /ministry, below the last Why Amos divider. They fade
   with the copy (--amos-copy), so they are readable only once the teal has
   settled. The artwork is cacao; the filter paints it in the field cream.
   They hang in the section's bottom padding, so the text gap does not grow. */
.amos-problem__logos {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  opacity: var(--amos-copy);
}
.amos-problem__logos img {
  display: block;
  width: auto;
  max-width: 148px;
  height: 32px;
  filter: brightness(0) saturate(100%) invert(93%) sepia(14%) saturate(220%) hue-rotate(352deg) brightness(1.04) contrast(0.96);
}
@media (max-width: 820px) {
  .amos-problem__logos { margin-top: 40px; }
}
@media (max-width: 599px) {
  .amos-problem__logos { gap: 16px 28px; margin-top: 40px; }
  .amos-problem__logos img { height: 26px; }
}