/* Public homepage — see docs/homepage-design-spec.md. Reuses tokens.css/
   base.css/components.css; nothing here introduces new colors. */

.landing-page { --landing-max: 1200px; }

.landing-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-soft);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition);
}
.landing-link:hover { color: var(--text); }

/* ---- Header ---- */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.landing-header-inner {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.landing-nav-links {
  display: flex;
  gap: var(--space-5);
  flex: 1;
}
.landing-header-actions { display: flex; align-items: center; gap: var(--space-2); }
.landing-auth-slot { display: flex; align-items: center; gap: var(--space-2); }

@media (max-width: 900px) {
  .landing-nav-links { display: none; }
}

/* Design spec §5: mobile header shows brand + one primary CTA only. Below
   this width the lang toggle + secondary "Sign in" button no longer fit
   next to "Create account" without overflowing the viewport (measured: a
   ~2px horizontal scroll at 375px before this rule existed). */
@media (max-width: 480px) {
  #landing-lang, #landing-signin { display: none; }
}

/* ---- Sections shell ---- */
.landing-section {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  scroll-margin-top: 72px;
}
.landing-section-compact { padding: var(--space-6) var(--space-5); }
.landing-h2 { font-size: var(--text-h1); letter-spacing: -0.01em; margin-bottom: var(--space-4); text-wrap: balance; }
.landing-h3 { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.landing-lead { color: var(--text-soft); max-width: 68ch; }
.landing-note { color: var(--text-faint); font-size: var(--text-small); margin-top: var(--space-3); }
.landing-flow { font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-soft); }

.landing-benefit-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.landing-benefit-list li {
  padding-left: var(--space-4);
  position: relative;
  font-size: var(--text-small);
  color: var(--text-soft);
}
.landing-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Hero ---- */
.landing-hero-section {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-7);
}
.landing-hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-7);
  align-items: center;
}
.landing-hero-copy h1 {
  font-size: var(--text-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-4);
  text-wrap: balance;
}
.landing-hero-subtitle { font-size: 1.05rem; color: var(--text-soft); margin-bottom: var(--space-3); }
.landing-hero-body { color: var(--text-soft); max-width: 60ch; }

.landing-hero-visual {
  background: var(--gradient-hero);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

@media (max-width: 1100px) {
  .landing-hero-grid { grid-template-columns: 1fr; }
  .landing-hero-visual { order: 2; }
}

/* ---- Architecture diagram ---- */
.arch-diagram, .remote-diagram, .local-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.arch-box {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
}
.arch-box-wide { max-width: 320px; }
.arch-box-accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; max-width: 320px; }
.arch-box-sub { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-faint); }
.arch-arrow { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-small); }
.arch-branches { display: flex; gap: var(--space-2); width: 100%; flex-wrap: wrap; justify-content: center; }
.arch-branches .arch-box { flex: 1; min-width: 120px; }

.remote-callout {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
}

.local-diagram .arch-box { max-width: 320px; }

/* ---- Compatibility strip ---- */
.compat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-4) 0;
}
.compat-chip {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface);
}

/* ---- Benefit grid ---- */
.benefit-card { padding: var(--space-5); }

/* ---- Integration sections ---- */
.landing-integration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.landing-integration.reverse .integration-copy { order: 2; }
.landing-integration.reverse .integration-visual { order: 1; }
.integration-copy p { color: var(--text-soft); margin: var(--space-3) 0; }
.integration-copy .landing-h2 { margin-top: var(--space-2); }
.integration-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

@media (max-width: 1000px) {
  .landing-integration, .landing-integration.reverse {
    grid-template-columns: 1fr;
  }
  .landing-integration.reverse .integration-copy,
  .landing-integration.reverse .integration-visual { order: initial; }
}

/* ChatGPT flow */
.flow-diagram { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: center; }
.flow-step {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-small);
  font-weight: 600;
}
.flow-arrow { color: var(--text-faint); font-family: var(--font-mono); }
.flow-ops { margin-top: var(--space-4); text-align: center; font-size: var(--text-label); }

/* REST card */
.rest-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.rest-card-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.rest-card pre.code-inline { display: inline-block; }

/* ---- How it works ---- */
.step-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin: var(--space-5) 0; }
.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-small);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
@media (max-width: 900px) { .step-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .step-list { grid-template-columns: 1fr; } }

/* ---- Comparison table ---- */
.table-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); min-width: 720px; }
.compare-table th, .compare-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.compare-table th { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; }
.compare-table td:last-child, .compare-table th:last-child { white-space: normal; }

/* ---- Security facts ---- */
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.fact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--text-small);
  color: var(--text-soft);
}
@media (max-width: 900px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fact-grid { grid-template-columns: 1fr; } }

/* ---- Platforms ---- */
.platform-card { padding: var(--space-5); }

/* ---- Technical reference ---- */
.landing-section-tech { background: var(--bg-elevated); border-radius: var(--radius-lg); }
.tech-tabs-strip { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.tech-card { margin-bottom: var(--space-4); scroll-margin-top: 72px; }
.tech-card:last-child { margin-bottom: 0; }
.tool-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.tool-group { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.ai-agent-card { border-color: var(--accent); }
@media (max-width: 900px) { .tool-group-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tool-group-grid { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.faq-item { break-inside: avoid; }
.faq-q { font-weight: 700; margin-bottom: var(--space-1); }
.faq-a { color: var(--text-soft); font-size: var(--text-small); margin: 0; }
@media (max-width: 800px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---- Final CTA ---- */
.final-cta { text-align: center; background: var(--gradient-hero); padding: var(--space-7); }
.final-cta .landing-lead { margin: 0 auto var(--space-5); }
.final-cta .row { justify-content: center; }

/* ---- Footer ---- */
.landing-footer { border-top: 1px solid var(--border); margin-top: var(--space-6); }
.landing-footer-inner {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* ---- Global mobile ---- */
@media (max-width: 620px) {
  .landing-hero-section, .landing-section { padding-left: var(--space-4); padding-right: var(--space-4); }
  .landing-hero-copy h1 { font-size: 1.9rem; }
}