/* llamay's own visuals, inside TemplateMo Luminary's feature frames.
   The template alternates a photograph with a block of text. A photograph of
   an inference engine is a photograph of nothing, so each frame holds the
   thing the paragraph beside it describes: a context forking, an install
   finishing, three API dialects on one port. */

.viz {
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 300px;
  font-family: "Inter", sans-serif;
}

/* ---- 01 the fork ---- */
.viz-msg {
  font-size: 13.5px; line-height: 1.5; color: var(--ivory-muted);
  padding: 10px 14px; border-radius: 12px;
  background: rgba(163,154,137,.06); border: 1px solid var(--panel-border);
  max-width: 88%;
}
.viz-msg--you {
  margin-left: auto; background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: var(--amber-ink); border-color: transparent; font-weight: 500;
}
.viz-state {
  display: flex; align-items: center; gap: 8px;
  font: 500 11.5px/1 "JetBrains Mono", monospace; color: var(--amber);
  padding: 9px 12px; border-radius: 10px;
  background: rgba(224,138,79,.07); border: 1px solid rgba(224,138,79,.22);
}
.viz-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
.viz-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; position: relative; padding-top: 18px; }
.viz-split::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--graphite-soft) 22%, var(--graphite-soft) 78%, transparent);
}
.viz-branch { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.viz-branch > span { font: 500 10.5px/1 "JetBrains Mono", monospace; color: var(--slate-warm); letter-spacing: .04em; }
.viz-branch .viz-msg { max-width: 100%; font-size: 12.5px; }

/* ---- 02 the terminal ---- */
.viz--term { padding: 0; overflow: hidden; }
.viz-bar { display: flex; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--panel-border); }
.viz-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--graphite-soft); }
.viz--term pre {
  margin: 0; padding: 22px; font: 400 12.5px/1.85 "JetBrains Mono", monospace;
  color: var(--ivory-muted); white-space: pre-wrap; word-break: break-word;
}
.viz--term .c { color: var(--amber); }
.viz--term .d { color: var(--slate-warm); }

/* ---- 03 the dialects ---- */
.viz--api { justify-content: center; gap: 10px; }
.viz-api {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(163,154,137,.05); border: 1px solid var(--panel-border);
}
.viz-api b { font-size: 14px; font-weight: 600; color: var(--ivory); }
.viz-api span { font: 400 11.5px/1 "JetBrains Mono", monospace; color: var(--slate-warm); }
.viz-port {
  margin-top: 6px; text-align: center;
  font: 500 11px/1 "JetBrains Mono", monospace; color: var(--amber);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---- the install line, reused from the utilitarian pages ---- */
.cmd {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 16px 20px; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(18,17,16,.6); border: 1px solid var(--panel-border);
  color: var(--ivory); font: 400 13px/1 "JetBrains Mono", monospace;
  transition: border-color .3s var(--silk-ease);
}
.cmd:hover { border-color: rgba(224,138,79,.4); }
.cmd .t { flex: 1; overflow-x: auto; white-space: nowrap; }
.cmd .ico { font-size: 10px; letter-spacing: .12em; color: var(--slate-warm); flex: none; }

/* ---- the plan grid, which /assets/site.js renders from /v1/plans ---- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; text-align: left; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px; border-radius: 20px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  backdrop-filter: blur(20px);
}
.pcard--pick { border-color: rgba(224,138,79,.45); }
.pcard__pick {
  position: absolute; top: -11px; left: 24px;
  background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: var(--amber-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px;
}
.pcard__mark { width: 28px; height: 28px; color: var(--ivory); }
.pcard__mark svg { width: 100%; height: 100%; display: block; }
.pcard h3 { font-size: 16px; font-weight: 600; color: var(--ivory); margin: 0; }
.pcard__pitch { font-size: 13px; line-height: 1.55; color: var(--slate-light); min-height: 3.2em; margin: 0; }
.pcard__price { display: flex; align-items: baseline; gap: 5px; }
.pcard__amount { font-size: 30px; font-weight: 300; letter-spacing: -.03em; color: var(--ivory); }
.pcard__per { font-size: 12.5px; color: var(--slate-warm); }
.pcard ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
/* The marker and the text as two columns, so a row that wraps stays lined up
   under itself rather than running back under the tick. */
.pcard li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--slate-light);
}
.pcard li i {
  font-style: normal; flex: none; width: 12px; text-align: center;
  color: var(--amber); line-height: 1.5;
}
/* A row the plan does not have: the marker fades with the text, so the column
   reads as "here is what you get" rather than a list of warnings. */
.pcard li.no { color: var(--slate-warm); }
.pcard li.no i { color: var(--graphite-soft); }
.pcard li b { color: var(--ivory); font-weight: 600; }
.pcard .btn, .pcard .btn--primary, .pcard .btn--ghost {
  margin-top: auto; display: block; text-align: center; text-decoration: none;
  padding: 13px 20px; border-radius: 100px; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--graphite-soft); color: var(--ivory);
  transition: border-color .3s var(--silk-ease), background .3s var(--silk-ease);
}
.pcard .btn--primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: var(--amber-ink); border-color: transparent;
}
.pcard .btn--ghost:hover { border-color: var(--amber); color: var(--amber); }
.fine { font-size: 12.5px; color: var(--slate-warm); }
.fine a { color: var(--amber); text-decoration: none; }
.accent { color: var(--amber); }

@media (max-width: 720px) {
  .viz-split { grid-template-columns: 1fr; }
  .viz { min-height: 0; padding: 20px; }
}