/* 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; }
}

/* Phones: the sign-up form stacks (the field over a full-width
   Continue, then its two notes), so the hero copy reaches further down
   while the scene, scaled to the width, keeps its height. The hero
   grows to keep the shadow clear of the notes, down to 320px wide. */
@media (max-width: 480px) {
  .landing .hero { min-height: 880px; }
}

/* ---------- landing sign-up (home.html's hero form) ----------
   The sign-in screen's Begin form, reduced to its email field. */

.landing .signup { margin: 1.75rem 0 0; max-width: 32rem; }
.landing .signup label { display: block; margin: 0 0 0.4rem; font-weight: 600; }
.signup-row { display: flex; gap: 0.5rem; }
.landing .signup input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
}
.landing .signup input[type="email"]:hover { border-color: var(--fg-muted); }
.landing .signup input[type="email"]:focus-visible { outline-offset: 0; border-color: var(--accent); }
.landing .signup .btn-lg { flex: none; }
.landing .signup button:disabled { cursor: progress; opacity: 0.7; }
/* pow.js shows its status line until the form is wired, and again if
   the solver fails; it hides it otherwise. */
.landing .signup [data-pow-status] { margin: 0.5rem 0 0; color: var(--fg-muted); font-size: 0.85rem; }
.signup-note { margin: 0.5rem 0 0; color: var(--fg-muted); font-size: 0.9rem; }
.signup-row + .signup-note,
.signup-row + [data-pow-status] + .signup-note { margin-top: 0.75rem; }
.landing .hero-alt { margin: 1.25rem 0 0; font-size: 0.9rem; }

@media (max-width: 480px) {
  .signup-row { flex-direction: column; }
  .landing .signup .btn-lg { width: 100%; }
}

/* ---------- landing tiers ---------- */

.landing .tiers {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 0;
}
.tiers h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.5rem;
}
.tier-item { padding: 1.25rem 0 0; border-top: 1px solid var(--border); }
.tier-item h3 { margin: 0 0 0.75rem; }
.tier-item .badge { margin: 0; font-size: 0.85rem; padding: 0.15rem 0.7rem; }
.tier-item p { margin: 0; max-width: 34ch; }
.tiers + .reasons { padding-top: 4rem; }

@media (max-width: 760px) {
  .tier-list { grid-template-columns: 1fr; }
  .tier-item { padding: 1rem 0; }
  .tier-item:last-child { border-bottom: 1px solid var(--border); }
}