/* Landing page: intro, QR card and the paper-style architecture figure (tokens and glass come from style.css) */
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--glass-inset); }

.landing {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: center;
  padding: 72px 0 32px;
}
.intro h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.15; }
.intro .lede { margin: 22px 0 0; max-width: 560px; }
.chips-row { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.chips-row li + li::before { content: "·"; margin-inline: 8px; }
.chips-row li {
  padding: 0; font-size: 14px; color: var(--ink-3);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-row .btn { text-decoration: none; }
.btn.ghost { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

.qr-card { margin: 0; padding: 22px 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; justify-self: end; width: min(100%, 360px); }
.qr-card img { width: 100%; height: auto; display: block; border-radius: 10px; }
.qr-card figcaption { text-align: center; display: grid; gap: 2px; }
.qr-card figcaption b { font-size: 16px; }
.qr-card figcaption span { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Paper-style figure */
.figure-section { padding: 24px 0 8px; }
.paper-fig { margin: 0 auto; max-width: 760px; padding: 28px 28px 22px; }
.fig { width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto; }
.fig text { font-family: var(--font); text-anchor: middle; }
.fig .b { stroke: rgba(10, 15, 31, 0.5); stroke-width: 1.2; }
.fig .t { font-size: 15px; font-weight: 650; fill: #0a0f1f; }
.fig .t.sm { font-size: 13.5px; }
.fig .t.xs { font-size: 12px; font-weight: 600; }
.fig .s { font-size: 11.5px; fill: rgba(10, 15, 31, 0.68); }
.fig .dim { font-size: 12px; fill: var(--ink-3); text-anchor: start; font-variant-numeric: tabular-nums; }
.fig .nx { font-size: 22px; font-weight: 700; fill: var(--ink); text-anchor: end; }
.fig .in { font-size: 13.5px; font-style: italic; fill: var(--ink-2); }
.fig .qkv { font-size: 10px; font-weight: 700; fill: var(--ink-3); text-anchor: end; }
.fig .arr, .fig .res { stroke: var(--ink-2); stroke-width: 1.6; fill: none; }
.fig .res { stroke-dasharray: none; opacity: 0.85; }
.fig .ah { fill: var(--ink-2); }
.fig .block { fill: rgba(255, 255, 255, 0.28); stroke: var(--ink-3); stroke-width: 1.4; }
.fig .mha { fill: #fcd6ac; } .fig .an { fill: #f6efa2; } .fig .ffn { fill: #bfe2f4; }
.fig .emb { fill: #f8c6d2; } .fig .emb2 { fill: #e7ddf7; } .fig .tok { fill: #e3e6ef; }
.fig .lin { fill: #d6d0f5; } .fig .soft { fill: #c6eac2; } .fig .thr { fill: #ffdcc2; }
.fig .cls { fill: #ffffff; }
.fig .plus { fill: #ffffff; stroke: rgba(10, 15, 31, 0.6); stroke-width: 1.4; }
.fig .plus-x { stroke: #0a0f1f; stroke-width: 1.8; }
.fig .pill.safe { fill: rgb(var(--safe)); } .fig .pill.inj { fill: rgb(var(--danger)); }
.fig .pill-t { font-size: 14px; font-weight: 750; fill: #fff; letter-spacing: 0.03em; }
.paper-fig figcaption { margin: 18px auto 0; max-width: 600px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.paper-fig figcaption b { color: var(--ink); }
.paper-fig figcaption a { font-weight: 600; color: rgb(var(--accent)); text-decoration: none; white-space: nowrap; }
:root[data-theme="dark"] .fig .block { fill: rgba(255, 255, 255, 0.04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fig .block { fill: rgba(255, 255, 255, 0.04); } }

@media (max-width: 900px) {
  .landing { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; padding-top: 52px; }
  .intro .lede { margin-inline: auto; }
  .chips-row, .cta-row { justify-content: center; }
  .qr-card { justify-self: center; }
}
/* On a phone the QR code is pointless (you are already here), so the buttons take its place */
@media (max-width: 640px) {
  .qr-card { display: none; }
  .landing { padding-bottom: 8px; }
  .paper-fig { padding: 16px 10px 16px; }
  .nav nav { display: none; }
}