/* /landing: Initium's section order over shadcn's color roles.
   The roles keep shadcn's names (--background, --primary, ...) so a block
   ported from the registry reads the same variables. Dark only for now. */

:root {
  /* shadcn's color roles over our semantic tokens (crates/openagents-ui
     static/tokens-semantic.css), so the page follows Coder Light and Coder
     Noir like every other page: the visitor's choice, else their system. */
  --background: var(--color-surface);
  --foreground: var(--color-text);
  --card: var(--color-surface-secondary);
  --card-foreground: var(--color-text);
  --muted: var(--color-background-primary-soft);
  --muted-foreground: var(--color-text-secondary);
  --border: var(--color-border);
  --input: var(--color-border-strong);
  --primary: var(--color-background-primary-solid);
  --primary-foreground: var(--color-text-inverse);
  --accent: var(--color-text-warning);
  --ring: var(--color-ring);
  --radius: 14px;
  --max: 1160px;
}

* { box-sizing: border-box; }

/* Grid and flex children may shrink below their content (long commands
   scroll inside their box instead of widening the page). */
.hero-section > *, .feature-section > *, .steps > *, .pricing-cards > *,
.stats-section > *, .compare > * { min-width: 0; }

html { scroll-behavior: smooth; }

body.landing {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; }

h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 650; }

h3 { font-size: 18px; font-weight: 600; }

p { margin: 0; }

.muted { color: var(--muted-foreground); }

main > section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px 24px;
}

/* Initium's Button: default, outline, and 3D. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, opacity .15s, transform .05s;
}

.button:active { transform: translateY(1px); }

.button:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 60%, transparent); outline-offset: 2px; }

.button-default { background: var(--primary); color: var(--primary-foreground); }

.button-default:hover { background: color-mix(in oklch, var(--primary) 80%, transparent); }

.button-outline { border-color: var(--border); color: var(--foreground); }

.button-outline:hover { background: color-mix(in oklch, var(--muted) 60%, transparent); }

.button-3d {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: color-mix(in oklch, var(--primary) 75%, #000);
  box-shadow:
    inset 0 1.5px 0 0 color-mix(in oklch, var(--primary) 65%, #fff),
    inset 0 -1.5px 0 0 color-mix(in oklch, var(--primary) 75%, #000);
}

.button-3d:hover { opacity: .88; }

.eyebrow {
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  background: color-mix(in oklch, var(--background) 82%, transparent);
  backdrop-filter: blur(12px);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  text-decoration: none;
}

.navbar-links { display: flex; gap: 24px; margin-right: auto; }

.navbar-links a { color: var(--muted-foreground); font-size: 15px; text-decoration: none; }

.navbar-links a:hover { color: var(--foreground); }

.navbar .button { height: 38px; padding: 0 16px; font-size: 14px; }

.navbar-login { color: var(--muted-foreground); font-size: 15px; text-decoration: none; }

.navbar-login:hover { color: var(--foreground); }

/* Hero */
.hero-section {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 72px !important;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 14px;
  text-decoration: none;
}

.hero-pill:hover { border-color: var(--input); color: var(--foreground); }

.hero-pill-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-background-info-surface);
  color: var(--color-text-info-surface);
  font-weight: 600;
}

.hero-section h1 { font-size: clamp(38px, 5.4vw, 60px); font-weight: 680; }

.hero-lead { margin-top: 22px; max-width: 34em; color: var(--muted-foreground); font-size: 19px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-visual { position: relative; padding: 40px 28px 72px; }

.prompt-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 30px 80px -40px color-mix(in oklch, var(--foreground) 35%, transparent);
}

.prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 13px;
}

.chip-active { border-color: var(--accent); color: var(--accent); }

.prompt-text {
  margin: 18px 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--muted);
  font-size: 15px;
}

.prompt-caret {
  display: inline-block;
  width: 8px;
  height: 17px;
  margin-left: 3px;
  vertical-align: -3px;
  background: var(--foreground);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.prompt-steps p {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}

.prompt-steps em { margin-left: auto; color: var(--muted-foreground); font-style: normal; font-size: 13px; }

.dot { width: 9px; height: 9px; border-radius: 50%; }

.dot-small { background: var(--color-text-success); }

.dot-big { background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.float-card {
  position: absolute;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--card) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px -24px color-mix(in oklch, var(--foreground) 35%, transparent);
}

.float-stat { top: 0; right: 0; }

.float-hold { bottom: -18px; left: -8px; }

.float-label { color: var(--muted-foreground); font-size: 12px; }

.float-value { font-size: 26px; font-weight: 700; }

.float-value-small { font-weight: 600; }

.float-note { color: var(--muted-foreground); font-size: 12px; }

.float-keys { margin-top: 6px; color: var(--muted-foreground); font-size: 13px; }

kbd {
  padding: 1px 6px;
  border: 1px solid var(--input);
  border-radius: 5px;
  background: var(--muted);
  color: var(--foreground);
  font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Problem statement */
.problem-section { max-width: 820px !important; }

.problem-section p { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; letter-spacing: -0.01em; }

.problem-section p + p { margin-top: 24px; }

/* Feature sections */
.feature-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}

.feature-flipped .feature-copy { order: 2; }

/* More than one picture: the words over the full width, the pictures
   below at a size they can be read at. */
.feature-wide { grid-template-columns: 1fr; gap: 40px; }

.feature-wide .feature-copy { max-width: 720px; }

.feature-wide .feature-picture { padding: 24px; }

.feature-copy p { margin-top: 18px; color: var(--muted-foreground); font-size: 17px; }

.feature-copy .button { margin-top: 28px; }

.feature-picture {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  background: var(--card);
}

.diagram { display: block; width: 100%; height: auto; border-radius: 10px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

figure { margin: 0; }

.compare figcaption { margin-top: 8px; color: var(--muted-foreground); font-size: 13px; text-align: center; }





/* Stats */
.stats-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding-top: 0 !important;
}

.stat { padding: 28px; border-top: 1px solid var(--border); }

.stat-value { font-size: clamp(36px, 5vw, 52px); font-weight: 700; letter-spacing: -0.03em; }

.stat-label { color: var(--muted-foreground); }

.stats-source { grid-column: 1 / -1; padding: 0 28px; color: var(--muted-foreground); font-size: 14px; }

/* Steps */
.steps {
  display: grid;
  /* Step one holds the install lines: wide enough for them in full. */
  grid-template-columns: 2.1fr 1fr 1fr;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.step-number { color: var(--accent); font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; }

.step h3 { margin: 12px 0 10px; }

.step p { color: var(--muted-foreground); font-size: 15px; }


/* Pricing */
.pricing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }

.price-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.price-card-featured { border-color: color-mix(in oklch, var(--accent) 55%, var(--border)); }

.price { margin: 10px 0 18px; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }

.price span { color: var(--muted-foreground); font-size: 16px; font-weight: 500; }

.price-card ul { flex: 1; margin: 0 0 24px; padding: 0; list-style: none; }

.price-card li { padding: 7px 0 7px 26px; position: relative; color: var(--muted-foreground); }

.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }

/* FAQ */
.faq { max-width: 760px; margin-top: 32px; border-top: 1px solid var(--border); }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 560;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after { content: "+"; color: var(--muted-foreground); }

.faq-item[open] summary::after { content: "−"; }

.faq-item p { padding: 0 0 20px; color: var(--muted-foreground); }

/* CTA */
.cta-section { text-align: center; }

.cta-section > p { margin-top: 14px; color: var(--muted-foreground); font-size: 18px; }

.cta-section .hero-actions { justify-content: center; }

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 24px 64px;
  border-top: 1px solid var(--border);
}

.footer-brand p { margin-top: 12px; font-size: 14px; }

.footer-columns { display: flex; gap: 64px; }

.footer-columns div { display: grid; align-content: start; gap: 10px; }

.footer-columns h3 { font-size: 14px; }

.footer-columns a { color: var(--muted-foreground); font-size: 14px; text-decoration: none; }

.footer-columns a:hover { color: var(--foreground); }

@media (max-width: 900px) {
  .navbar-links { display: none; }
  .navbar { gap: 16px; }
  .compare { grid-template-columns: 1fr; }
  .navbar .button { margin-left: auto; }
  .hero-pill { flex-wrap: wrap; border-radius: 16px; }
  .hero-section, .feature-section { grid-template-columns: 1fr; gap: 40px; }
  .feature-flipped .feature-copy { order: 0; }
  .steps, .stats-section { grid-template-columns: 1fr; }
  .pricing-cards { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
  main > section { padding: 64px 20px; }
}

@media (max-width: 560px) {
  .compare { grid-template-columns: 1fr; }
  .footer-columns { gap: 32px; flex-wrap: wrap; }
  .hero-visual { padding: 28px 0 84px; }
  .float-stat { right: 0; top: -6px; }
  .float-hold { left: 0; bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .prompt-caret { animation: none; }
  html { scroll-behavior: auto; }
}

/* Every step in view: a Coder turn beside one example of what people make. */
.everywhere { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }

.everywhere > * { min-width: 0; }

.transcript {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
  font-size: 14px;
}

.transcript-ask {
  margin-left: auto;
  width: fit-content;
  max-width: 85%;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--muted);
}

.transcript-steps { margin: 18px 0; padding: 0; list-style: none; }

.transcript-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.transcript-step code { color: var(--muted-foreground); font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }

.transcript-step em { margin-left: auto; color: var(--muted-foreground); font-style: normal; font-size: 12px; }

.step-tool { font-weight: 600; }

.step-mark { width: 8px; height: 8px; border-radius: 50%; }

.step-ok { background: var(--color-text-success); }

.step-fail { background: var(--color-text-danger); }

.transcript-diff {
  flex-basis: 100%;
  margin: 6px 0 2px;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--muted);
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.diff-del { color: var(--color-text-danger); }

.diff-add { color: var(--color-text-success); }

.transcript-answer { color: var(--foreground); }

.example-card { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--background); }

.example-card img { display: block; width: 100%; }

.example-card figcaption { display: grid; gap: 4px; padding: 16px 18px 18px; }

.example-card figcaption span:last-child { color: var(--muted-foreground); font-size: 15px; }

.example-tag {
  width: fit-content;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--color-background-info-surface);
  color: var(--color-text-info-surface);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .everywhere { grid-template-columns: 1fr; }
}

/* The install lines in step one: the kit's code block, full width. */
.step [data-slot="code-block"], .step .oa-code-block { margin-top: 10px; }