/* amadan — the signed-out landing page (direction A, 2026-10-02).
   Linked from chromeAssets like every stylesheet (csslinks_test.go);
   every rule is scoped to main.landing or landing-only class names. The hero is a
   full-bleed scene: the amadan mark on the floor, its long shadow
   running up the wall as somebody else's mascot. Everything below it
   sits on the 72rem reading width with the shared side padding. */

main.landing { max-width: none; padding: 0; }

.scene-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- scene palette ---------- */

.scene-wall { fill: var(--bg-inset); }
.scene-floor { fill: #e1e8e4; }
.scene-horizon { stroke: var(--border); }
.scene-shadow { fill: #cdd7d2; stroke: #cdd7d2; }
.trail-near { stop-color: #bfcbc5; }
.trail-far { stop-color: #cdd7d2; }
.scene-contact { fill: #b9c6bf; opacity: 0.6; }

/* The mark keeps its own palette (assets/logo/amadan-logo.svg). */
.mark-cap { fill: #F6EFDF; stroke: #3A2E25; }
.mark-open { fill: #E7DCC2; stroke: #3A2E25; }
.mark-scrawl { stroke: #C9502E; }
.mark-lane { stroke: #3A2E25; }
.mark-dot { fill: #C9502E; }

@media (prefers-color-scheme: dark) {
  .scene-floor { fill: #141a17; }
  .scene-shadow { fill: #0c100e; stroke: #0c100e; }
  .trail-near { stop-color: #090c0b; }
  .trail-far { stop-color: #0c100e; }
  .scene-contact { fill: #070908; }
  .mark-open { fill: #3E332A; }
  .mark-lane { stroke: #EDE4D3; }
}

/* ---------- hero ---------- */

.landing .hero {
  position: relative;
  overflow: hidden;
  min-height: min(92vh, 880px);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}
.landing .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing .scene-narrow { display: none; }

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) 1.25rem 0;
}
.hero-copy h1,
.hero-copy .hero-sub,
.hero-copy .hero-cta { max-width: 36rem; }
.landing .hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.landing h1 em,
.landing .closing em { font-style: normal; color: var(--accent); }
.landing .hero-sub { margin: 1.25rem 0 0; font-size: 1.1rem; max-width: 32rem; }
.landing .hero-cta { margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.landing .btn-lg { font-size: 1rem; padding: 0.55rem 1.3rem; }

/* ---------- three reasons ---------- */

.reasons,
.self-hosted { max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.reasons { padding-top: 4.5rem; padding-bottom: 1rem; }
.reason {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 1rem 3rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
}
.reason:last-child { border-bottom: 1px solid var(--border); }
.reason h2 { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.reason p { margin: 0; max-width: 36rem; }
.reason p + p { margin-top: 0.75rem; }
.reason p + p:has(.evidence) { margin-top: 1rem; }
.landing .evidence {
  display: inline-block;
  font-size: 0.85rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  padding: 0.45rem 0.7rem;
}
.landing .evidence .prompt { color: var(--fg-muted); }
.agent-example { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.agent-chip {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.1rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-wash);
}

/* ---------- runs on itself ---------- */

.self-hosted {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.self-hosted h2 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.self-hosted p { margin: 1rem 0 0; max-width: 34rem; }
.landing .facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.landing .facts dt,
.landing .facts dd { margin: 0; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.landing .facts dt { padding-right: 1.5rem; font-size: 0.9rem; color: var(--fg-muted); }
.landing .facts dd { min-width: 0; overflow-wrap: anywhere; }
.landing .facts dd code { font-size: 0.85rem; background: none; padding: 0; }
.landing .facts dt:last-of-type,
.landing .facts dd:last-of-type { border-bottom: 1px solid var(--border); }
.landing .facts .badge { margin: 0 0.4rem 0 0; }
.landing .fact-note { white-space: nowrap; }

/* ---------- closing ---------- */

.closing {
  text-align: center;
  padding: 4.5rem 1.25rem 5rem;
  background: var(--bg-inset);
  border-top: 1px solid var(--border);
}
.closing h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.closing .hero-cta { justify-content: center; }

/* ---------- narrow screens ---------- */

@media (max-width: 760px) {
  .landing .hero { min-height: 780px; }
  .landing .scene-wide { display: none; }
  .landing .scene-narrow { display: block; }
  .landing .hero-sub { font-size: 1.05rem; }
  .reason,
  .self-hosted { grid-template-columns: 1fr; }
}

/* Phones: each fact stacks its label over its value, so the long
   install command and the E2EE badge get the full width. */
@media (max-width: 480px) {
  .landing .facts { grid-template-columns: 1fr; }
  .landing .facts dt { padding-bottom: 0.1rem; }
  .landing .facts dd { border-top: 0; padding-top: 0; }
  .landing .facts dt:last-of-type { border-bottom: 0; }
}

/* The smallest phones: the stacked buttons reach further down, so the
   hero grows to keep the scene clear of them. */
@media (max-width: 400px) {
  .landing .hero { min-height: 900px; }
}