/* Public landing page. Archivo (SIL Open Font License) is self-hosted so the
   font file is cached immutably: rename it if it ever changes. The
   CSP can stay 'self'-only. */
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

.lp {
  --fog: #e9eef2;
  --paper: #f6f8fa;
  --ink: #12263a;
  --ink-soft: #435a70;
  --signal: #e8622a;
  --signal-ink: #b2441a;
  --sent: #1d8457;
  --rule: #b7c4cf;
  --code: #0f1f30;
  --code-text: #d9e4ee;
  --code-dim: #8aa0b5;
  background: var(--fog);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  .lp {
    --fog: #0f1d2b;
    --paper: #142536;
    --ink: #e4ecf3;
    --ink-soft: #9fb3c6;
    --signal: #f07a45;
    --signal-ink: #f59a70;
    --sent: #3fbf86;
    --rule: #2c4257;
    --code: #091521;
  }
}

.lp a { color: inherit; }
.lp :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.lp h1, .lp h2, .lp h3 { font-stretch: 125%; letter-spacing: -0.01em; color: var(--ink); }
.lp h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.02; font-weight: 800; margin: 0 0 1.25rem; max-width: 15ch; }
.lp h2 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); line-height: 1.1; font-weight: 750; margin: 0 0 1rem; max-width: 22ch; }
.lp h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .35rem; }
.lp p { margin: 0 0 1rem; max-width: 62ch; color: var(--ink-soft); }

/* Header */
.lp-top, .lp main, .lp-foot { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.lp-mark { font-stretch: 125%; font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.01em; }
.lp-top nav { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.lp-top nav a { text-decoration: none; color: var(--ink-soft); }
.lp-top nav a:hover { color: var(--ink); }
.lp-top nav .lp-signin { color: var(--ink); font-weight: 650; border: 1.5px solid var(--ink); padding: .35rem .9rem; border-radius: 999px; }
.lp-top nav .lp-signin:hover { background: var(--ink); color: var(--fog); }

/* Buttons */
.btn-signal, .btn-quiet { display: inline-block; text-decoration: none; font-weight: 700; padding: .85rem 1.4rem; border-radius: 999px; font-stretch: 112%; }
.btn-signal { background: var(--signal); color: #fff; }
.lp .btn-signal { color: #fff; }
.btn-signal:hover { background: var(--signal-ink); }
.btn-quiet { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn-quiet:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; padding: 3.5rem 0 5rem; }
.lede { font-size: 1.2rem; }

/* Routing board: the one animated moment on the page. */
.board { margin: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) 72px minmax(0, 1fr); align-items: center; }
.board-req { background: var(--code); color: var(--code-text); border-radius: 14px; padding: 1rem 1.1rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; }
.board-req pre { margin: .6rem 0; white-space: pre; overflow-x: auto; color: var(--code-text); }
.req-line { color: var(--code-text); }
.req-line .verb { color: var(--signal); font-weight: 700; }
.req-status { color: #6fd6a4; }
.board-wires { width: 100%; height: 300px; overflow: visible; }
.wire { fill: none; stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 220; stroke-dashoffset: 0; }
.board-dests { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.board-dests li { background: var(--paper); border: 1.5px solid var(--rule); border-left: 5px solid var(--signal); border-radius: 10px; padding: .7rem .9rem; display: grid; grid-template-columns: 1fr auto; row-gap: .1rem; }
.dest-name { font-weight: 700; font-stretch: 112%; }
.dest-meta { grid-column: 1; color: var(--ink-soft); font-size: .82rem; }
.state { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; font-size: .8rem; font-weight: 700; }
.state > span { grid-area: 1 / 1; padding: .15rem .6rem; border-radius: 999px; text-align: center; }
.state .q { color: var(--signal-ink); box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0; }
.state .s { color: #fff; background: var(--sent); }

@media (prefers-reduced-motion: no-preference) {
  .wire { stroke-dashoffset: 220; animation: draw .9s ease-out forwards; }
  .w2 { animation-delay: .25s; }
  .w3 { animation-delay: .5s; }
  .state .q { opacity: 1; animation: out .3s ease forwards; }
  .state .s { opacity: 0; animation: in .3s ease forwards; }
  .d1 .q, .d1 .s { animation-delay: 1.05s; }
  .d2 .q, .d2 .s { animation-delay: 1.3s; }
  .d3 .q, .d3 .s { animation-delay: 1.55s; }
  .board-dests li { animation: land .4s ease both; }
  .d1 { animation-delay: .8s; }
  .d2 { animation-delay: 1.05s; }
  .d3 { animation-delay: 1.3s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes in { to { opacity: 1; } }
@keyframes out { to { opacity: 0; } }
@keyframes land { from { border-left-color: var(--rule); } to { border-left-color: var(--signal); } }

/* Content bands */
.band { padding: 4.5rem 0; border-top: 1.5px solid var(--rule); }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }

.steps { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.steps li { counter-increment: step; border-top: 3px solid var(--ink); padding-top: 1rem; }
.steps li::before { content: counter(step); display: block; font-stretch: 125%; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--signal); margin-bottom: .75rem; }
.steps p { font-size: .98rem; }

.scope-wrap { overflow-x: auto; }
.scope { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 12px; overflow: hidden; font-size: .92rem; }
.scope caption { text-align: left; color: var(--ink-soft); font-size: .85rem; padding-bottom: .5rem; caption-side: top; }
.scope th, .scope td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--rule); }
.scope thead th { font-stretch: 112%; font-weight: 700; color: var(--ink-soft); font-size: .85rem; }
.scope tbody th { font-weight: 700; }
.scope tr:last-child th, .scope tr:last-child td { border-bottom: 0; }
.scope .yes { color: var(--sent); font-weight: 700; }
.scope .no { color: var(--ink-soft); opacity: .7; }

.facts { margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2.5rem; }
.facts dt { font-stretch: 112%; font-weight: 750; margin-bottom: .3rem; }
.facts dd { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.api-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.code { margin: 0; background: var(--code); color: var(--code-text); border-radius: 14px; padding: 1.1rem 1.25rem; overflow-x: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; line-height: 1.6; }
.code .c { color: var(--code-dim); }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { padding: .9rem 0 .9rem 2.1rem; border-bottom: 1px solid var(--rule); position: relative; }
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 1rem; height: .55rem; border-left: 3px solid var(--sent); border-bottom: 3px solid var(--sent); transform: rotate(-45deg); }

.closer { padding: 5rem 0; border-top: 1.5px solid var(--rule); }
.closer h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); max-width: 16ch; }

.lp-foot { display: flex; gap: 1.5rem; align-items: center; padding-top: 1.75rem; padding-bottom: 2.5rem; border-top: 1.5px solid var(--rule); color: var(--ink-soft); flex-wrap: wrap; }
.lp-foot .lp-mark { margin-right: auto; color: var(--ink); }

/* Narrow screens: wires turn into a single trunk on the left. */
@media (max-width: 960px) {
  .hero, .split { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lp-top nav a:not(.lp-signin) { display: none; }
  .board { grid-template-columns: 1fr; gap: 0; }
  .board-wires { display: none; }
  .board-dests { margin-top: 18px; padding-left: 18px; border-left: 2px solid var(--signal); gap: 12px; }
  .steps, .facts { grid-template-columns: 1fr; }
  .hero { padding: 2rem 0 3.5rem; }
}

/* Neutralise app.css element defaults inside the landing page. */
.lp { min-height: 100vh; }
.board-req pre { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.scope th { text-transform: none; letter-spacing: normal; }

/* Layout v2: headline across the top, routing board full width beneath it. */
.hero { grid-template-columns: 1fr; gap: 2.75rem; padding: 3.5rem 0 5rem; }
.lp h1 { max-width: 19ch; }
.board { grid-template-columns: minmax(0, 1fr) minmax(90px, 200px) minmax(0, .9fr); align-items: stretch; }
.board-req { align-self: center; font-size: .86rem; }
.board-wires { height: 100%; min-height: 260px; }
.wire { stroke-dasharray: 100; stroke-width: 2.5; }
.board-dests { align-content: space-between; gap: 18px; }
.board-dests li { padding: .85rem 1.1rem; }
.dest-meta { font-size: .86rem; }
@media (prefers-reduced-motion: no-preference) {
  .wire { stroke-dashoffset: 100; }
}
@media (max-width: 640px) {
  .board { grid-template-columns: 1fr; }
  .board-wires { display: none; }
}
/* Fix board height: wire ends (1/6, 1/2, 5/6 of 280px) meet the card centres. */
.board { align-items: center; }
.board-wires { height: 280px; min-height: 0; }
.board-dests { align-content: center; gap: 18px; }
.board-dests li { min-height: 76px; box-sizing: border-box; }
/* non-scaling-stroke measures dashes in screen pixels, so use a length longer
   than any wire instead of pathLength units. */
.wire { stroke-dasharray: 600; }
@media (prefers-reduced-motion: no-preference) {
  .wire { stroke-dashoffset: 600; }
}