/* ============================================================
   VayuAI landing: CAD cut
   Warm-paper light theme plus a drafting-sheet layer: grid,
   prompt box, parametric part canvas, pipeline trace.
   ============================================================ */

@import url("styles-light.css");

/* drafting grid under everything: minor 24 mm-ish, major 120 */
body {
  background:
    repeating-linear-gradient(90deg, rgba(31, 27, 23, 0.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(31, 27, 23, 0.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(31, 27, 23, 0.024) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(31, 27, 23, 0.024) 0 1px, transparent 1px 24px),
    radial-gradient(1000px 620px at 88% -12%, rgba(109, 59, 212, 0.07), transparent 60%),
    radial-gradient(920px 620px at -2% 104%, rgba(14, 143, 168, 0.06), transparent 60%),
    var(--bg0);
  background-attachment: scroll, scroll, scroll, scroll, fixed, fixed, scroll;
}

/* brand suffix chip */
.brand-chip {
  padding: 3px 8px;
  border: 1px solid rgba(184, 134, 11, 0.45);
  border-radius: 999px;
  color: var(--gold-soft);
  font-size: 9px;
}

/* mock command-palette prompt box */
.prompt-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 18px;
  max-width: 600px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(31, 27, 23, 0.05);
}
.pb-chip {
  flex: none;
  padding: 4px 9px;
  border: 1px solid rgba(109, 59, 212, 0.4);
  border-radius: 6px;
  color: var(--acc1);
  font-size: 9.5px;
}
.pb-text {
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-caret {
  flex: none;
  width: 7px;
  height: 15px;
  background: var(--acc1);
  animation: pb-blink 1.1s steps(2, start) infinite;
}
@keyframes pb-blink { to { visibility: hidden; } }

/* hero part canvas + pipeline canvas */
#part-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
#pipeline-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* three-up standards row (desktop only: phones keep the base stack) */
@media (min-width: 881px) {
  .principles-3 { grid-template-columns: repeat(3, 1fr); }
}

.arch-note {
  margin-top: 44px;
  color: var(--text-3);
}
.arch-note::before { content: "> "; color: var(--gold-soft); }

/* pipeline stage chips read as steps, not tiers */
#pipeline-nodes .cn-tier {
  border-color: rgba(109, 59, 212, 0.35);
  color: var(--acc1);
}

/* the CAD cut's two hero CTAs are long: let them wrap instead of forcing
   a min-width wider than a phone (fixes 375 px horizontal overflow) */
.hero-ctas { flex-wrap: wrap; }

/* grid items default to min-width auto, so the typewriter's nowrap prompt
   would propagate its width into the hero track and overflow phones */
.hero-grid > * { min-width: 0; }
.prompt-box { min-width: 0; }

@media (max-width: 880px) {
  .prompt-box { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #part-canvas, #pipeline-canvas { display: none; }
  .pb-caret { animation: none; }
}

/* nesting section: packed-sheet canvas + proof points */
.nest-block {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}
.nest-visual {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  box-shadow: 0 2px 12px rgba(31, 27, 23, 0.05);
}
#nest-canvas { display: block; width: 100%; aspect-ratio: 3 / 2; }
.nest-readout { margin-top: 10px; color: var(--text-3); }
.nest-readout span { color: var(--gold-soft); }
.nest-points { display: flex; flex-direction: column; gap: 14px; list-style: none; padding: 0; margin: 0; }
.nest-points li { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.nest-points strong { color: var(--text); font-weight: 600; }
@media (max-width: 880px) {
  .nest-block { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #nest-canvas { display: none; }
  .nest-readout { display: none; }
}