/* Dagger landing page.
   The palette is the logo, on its dark side: gunmetal steel, a black grip, and the temper colours
   steel takes on when it is hardened (blue on gunmetal, straw on black). The type
   is Departure Mono, a pixel-built monospace to match the pixel dagger, for the
   headline and real commands only, and Schibsted Grotesk for reading. One
   bold moment, the typed headline; everything else stays quiet.
   Served under the relay's strict CSP: self-hosted fonts, no scripts. */

@font-face {
  font-family: "Departure Mono";
  src: url("DepartureMono.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans Mono";
  src: url("DejaVuSansMono.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("SchibstedGrotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("PressStart2P-subset.woff") format("woff");
  font-display: swap;
}

:root {
  --ground: #25292e;     /* the page: gunmetal, the blade's dark side */
  --panel: #30353b;      /* raised surfaces on the ground */
  --rule: #444a51;       /* hairlines on the ground */
  --rule-strong: #7a818a;/* structural rules on the ground */
  --text: #e3e6e9;       /* light steel */
  --text-soft: #a8aeb5;  /* secondary text */
  --black: #000000;      /* the grip: terminals and the Dagger AI band */
  --blue: #8fa3f0;       /* temper blue, the one accent on gunmetal */
  --straw: #d0a955;      /* temper straw, the one accent on black */
  --on-ink: #e9ebed;
  --on-ink-soft: #a9aeb5;

  --mono: "Departure Mono", ui-monospace, Menlo, monospace;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: 16px;
  --max: 1180px;
}
@media (min-width: 700px) { :root { --pad: 32px; } }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 18px/1.6 var(--sans);
  font-feature-settings: "kern", "liga";
}

a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--pad); top: -60px;
  background: var(--black); color: var(--text); padding: 8px 12px; z-index: 20;
}
.skip:focus { top: 8px; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--panel);
  padding: 0 4px;
  border-radius: 3px;
}

/* ---- top bar ---- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max); margin: 0 auto; padding: 14px var(--pad);
}
.mark { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.mark img { width: 28px; height: 28px; image-rendering: pixelated; }
.mark span { font: 13px/1 "Press Start 2P", var(--mono); }
.bar nav { display: flex; gap: 22px; align-items: center; font-size: 16px; }
.bar nav a { color: var(--text); text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }
.bar .bar-app { font-weight: 600; }

/* ---- sections ---- */
main > section { max-width: var(--max); margin: 0 auto; padding: 72px var(--pad) 0; }

h1, h2, h3 { font-family: var(--sans); color: inherit; margin: 0; }
h2 { font-size: 48px; line-height: 1.05; font-weight: 750; letter-spacing: -0.015em; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 650; }
.intro, .measure { max-width: 64ch; margin: 16px 0 0; color: var(--text-soft); }
.intro { font-size: 21px; line-height: 1.5; }
.sub { margin-top: 56px; }
.fine { font-size: 15px; color: var(--text-soft); }

@media (max-width: 699px) {
  h2 { font-size: 36px; }
  .intro { font-size: 19px; }
  main > section { padding-top: 56px; }
}

/* ---- hero: the incantation, and the blade pointing at it ---- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding-top: 40px !important;
}
/* Nothing in the hero may widen the page; clip (unlike hidden) creates no
   scroll container and leaves vertical overflow alone. */
.hero { overflow-x: clip; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }

/* The app's sign-in terminal (app/lib/src/ui/terminal_intro.dart), rebuilt
   in CSS: same chrome, colours, font and pacing. Every size is in em of the
   terminal's text, so the whole window scales as one. The app sets 11.5px
   text, and each of its pixel measures is divided by 11.5 here. */
.tty {
  --tty-bg: #0b0b0c;
  --tty-bar: #1b1b1e;
  --tty-fg: #e6e6e6;
  --tty-green: #7be07b;
  /* The longest row, prompt plus command plus cursor, is about 17em; with
     the padding about 20.5em. Fit that to the screen, up to 21px. */
  font: clamp(12px, calc((100vw - 2 * var(--pad)) / 20.5), 21px)/1.6 "DejaVu Sans Mono", ui-monospace, Menlo, monospace;
  /* A fixed width, never the content's: the content is only as wide as what
     has been typed so far, so a sized-to-fit window grew with every key.
     20.5em holds the longest finished row (27 characters of 0.602em, the
     cursor, and the body's padding). On a phone it is the full width. */
  width: 20.5em;
  max-width: 100%;
  margin: 0 0 32px;
  background: var(--tty-bg);
  color: var(--tty-fg);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.7em;
  overflow: hidden;
}
.tty-bar {
  position: relative;
  display: flex; align-items: center;
  padding: 0.55em 0.8em;
  background: var(--tty-bar);
}
.tty .dots { display: flex; gap: 0.43em; }
.tty .dots i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #ff5f57; }
.tty .dots i:nth-child(2) { background: #febc2e; }
.tty .dots i:nth-child(3) { background: #28c840; }
.tty-title {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 0.87em; line-height: 1;
  color: rgba(255, 255, 255, 0.54);
}
/* Rows never wrap; if a screen is somehow narrower than the window, the
   body scrolls inside the window rather than anything being cut off. */
.tty-body { padding: 0.75em 2.4em 0.9em 0.9em; overflow-x: auto; }
.tty .row { white-space: nowrap; }
.tty .ps1 { color: var(--tty-green); white-space: pre; }
.tty .cmd { display: inline-block; vertical-align: top; white-space: pre; overflow: hidden; }
/* A drawn block cursor (the app draws one too: block glyphs are missing
   from plenty of fonts). Hidden except on the row being typed, then it stays
   on the last row and blinks hard on and off, as the app's does. */
.tty .cur {
  display: inline-block;
  width: 0.52em; height: 1.13em;
  margin-left: 0.17em;
  vertical-align: -0.22em;
  background: var(--tty-fg);
  visibility: hidden;
}
.tty .cur.last { visibility: visible; }

/* The typing. Each row's timings are written on it, from the app's pacing:
   a row appears, 700ms passes, then a character every 90ms. Every animation
   ends where the page already stands without it (the width returns to its
   natural value, every row visible, the cursor on the last row), so a browser
   that cannot run them, or a reader who asks for less motion, simply sees the
   finished screen. */
@keyframes appear { from, to { visibility: hidden; } }
@keyframes active { from, to { visibility: visible; } }
@keyframes blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes type11 { from { width: 0; } to { width: 11ch; } }
@keyframes type13 { from { width: 0; } to { width: 13ch; } }
@keyframes type14 { from { width: 0; } to { width: 14ch; } }
@keyframes type15 { from { width: 0; } to { width: 15ch; } }
@keyframes type17 { from { width: 0; } to { width: 17ch; } }
@media (prefers-reduced-motion: reduce) {
  .tty .row, .tty .cmd, .tty .cur { animation: none !important; }
}

.hero h1 { font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; max-width: 24ch; }
.lede { font-size: 21px; line-height: 1.5; color: var(--text-soft); max-width: 56ch; margin: 18px 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 12px; }
.btn {
  display: inline-block;
  padding: 13px 22px;
  font-weight: 650; font-size: 17px; line-height: 1;
  color: var(--text);
  border: 2px solid var(--text);
  border-radius: 4px;
  text-decoration: none;
}
.btn:hover { background: var(--panel); }
.btn.primary { background: var(--text); color: var(--black); }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); color: var(--black); }

.blade {
  width: 100%; max-width: 440px; height: auto;
  justify-self: end;
  margin-top: -8px;
  image-rendering: pixelated;
  filter: drop-shadow(10px 14px 0 rgba(0, 0, 0, 0.5));
}

@media (max-width: 1099px) {
  .hero { grid-template-columns: minmax(0, 1fr) 30%; }
}
@media (max-width: 699px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px !important; }
  /* Fully on screen: an image hanging past the edge made the page wider than
     the phone, so it scrolled sideways. */
  .blade {
    position: absolute; right: 0; top: -6px;
    width: 180px; opacity: 0.9; z-index: 0;
  }
  .tty { width: 100%; margin-top: 176px; }
  .hero h1 { font-size: 28px; }
  .lede { font-size: 19px; }
}
@media (max-width: 385px) {
  .tty { margin-top: 140px; }
  .blade { width: 160px; }
}

/* ---- how it works: a wiring diagram ---- */
.wire {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr 64px 1fr;
  align-items: center;
  margin-top: 40px;
  padding-top: 64px;
}
.seal {
  position: absolute; left: 12%; right: 12%; top: 0; height: 64px;
  border: 2px solid var(--blue); border-bottom: 0;
  border-radius: 14px 14px 0 0;
  display: flex; justify-content: center;
}
.seal span {
  transform: translateY(-50%);
  background: var(--ground);
  padding: 0 12px;
  color: var(--blue);
  font-weight: 600; font-size: 16px; text-align: center;
}
.node {
  background: var(--panel);
  border: 2px solid var(--rule-strong);
  border-radius: 6px;
  padding: 18px 20px 20px;
  align-self: stretch;
}
.node p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-soft); }
.node.relay { background: transparent; border-style: dashed; }
.link { height: 2px; background: var(--rule-strong); }

@media (max-width: 899px) {
  /* Stacked, the seal becomes a caption over the column and a rule down its
     left side, rather than a bracket with sideways text. */
  .wire { grid-template-columns: 1fr; padding: 0 0 0 18px; border-left: 2px solid var(--blue); }
  .seal { position: static; height: auto; border: 0; display: block; margin-bottom: 16px; }
  .seal span { display: block; transform: none; padding: 0; background: none; text-align: left; }
  .link { width: 2px; height: 24px; justify-self: center; }
}

/* ---- the tour: screenshots standing on the steel ---- */
.tour {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  margin-top: 44px;
}
.tour figure { margin: 0; }
.tour img {
  display: block;
  width: 100%; max-width: 300px; height: auto;
  border: 3px solid var(--black);
  border-radius: 14px;
  background: var(--black);
}
.tour figcaption { max-width: 34ch; }
.tour h3 { margin-top: 16px; }
.tour p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-soft); }

@media (max-width: 899px) { .tour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  /* A strip you swipe through, as in the app. */
  .tour {
    display: flex; gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 32px calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 12px;
    scrollbar-width: thin;
  }
  .tour figure { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ---- spec lists ---- */
.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 20px 0 0;
}
.spec > div { padding: 16px 0; border-top: 2px solid var(--rule-strong); }
.spec dt { font-weight: 700; }
.spec dd { margin: 4px 0 0; color: var(--text-soft); font-size: 17px; }
@media (max-width: 699px) { .spec { grid-template-columns: 1fr; } }

/* ---- Dagger AI: the grip, the page's one black band ---- */
main > section.ai {
  max-width: none;
  margin-top: 96px;
  padding: 0;
  background: var(--black);
  color: var(--on-ink);
}
.ai-inner { max-width: var(--max); margin: 0 auto; padding: 80px var(--pad) 88px; }
.ai .intro { color: var(--on-ink-soft); }
.ai a { color: var(--straw); }
.ai :focus-visible { outline-color: var(--straw); }
.ai code { background: #1f2226; color: var(--on-ink); }

.modes {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 44px;
  border-top: 2px solid var(--on-ink);
}
.modes > div { padding: 22px 32px 6px 0; }
.modes > div + div { padding-left: 32px; border-left: 2px solid var(--on-ink); }
.modes h3 { font-size: 30px; font-weight: 750; }
.modes p { margin: 8px 0 0; color: var(--on-ink-soft); max-width: 46ch; }
@media (max-width: 699px) {
  .modes { grid-template-columns: 1fr; }
  .modes > div + div { padding-left: 0; border-left: 0; border-top: 2px solid var(--on-ink); }
}

.spec.on-dark { margin-top: 48px; }
.spec.on-dark > div { border-top-color: #34383d; }
.spec.on-dark dd { color: var(--on-ink-soft); }

.caveat {
  max-width: 70ch;
  margin: 48px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--straw);
  color: var(--on-ink);
}

/* ---- install: one row per piece, the command given the room it needs ---- */
.steps { margin-top: 28px; }
.steps > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "title cmd" "text cmd" "note cmd";
  grid-template-rows: auto auto 1fr;
  column-gap: 48px;
  border-top: 2px solid var(--rule-strong);
  padding: 20px 0 28px;
}
.steps > div:last-child { border-bottom: 2px solid var(--rule-strong); }
.steps h3 { grid-area: title; }
.steps p { grid-area: text; margin: 8px 0 0; font-size: 17px; color: var(--text-soft); max-width: 46ch; }
.steps p.fine { grid-area: note; font-size: 15px; }
.steps .term { grid-area: cmd; align-self: start; }
.term {
  margin: 0;
  padding: 16px 18px;
  background: var(--black);
  color: var(--on-ink);
  border-radius: 6px;
  font: 16px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term code { background: none; padding: 0; font-size: inherit; }
.term .prompt { color: var(--straw); user-select: none; }
@media (max-width: 899px) {
  .steps > div { grid-template-columns: 1fr; grid-template-areas: "title" "text" "cmd" "note"; grid-template-rows: auto; }
  .steps .term { margin-top: 14px; }
  .term { font-size: 15px; }
}

/* ---- plans ---- */
.scroll { overflow-x: auto; margin-top: 28px; }
table { border-collapse: collapse; width: 100%; font-size: 17px; }
@media (max-width: 599px) { table { font-size: 16px; } th, td { padding-right: 12px; } }
th, td { text-align: left; padding: 14px 16px 14px 0; vertical-align: top; }
thead th { font-weight: 600; color: var(--text-soft); border-bottom: 2px solid var(--rule-strong); }
tbody th { font-weight: 700; }
tbody tr { border-bottom: 1px solid var(--panel); }
tbody tr:last-child { border-bottom: 2px solid var(--rule-strong); }

/* ---- footer ---- */
.foot {
  max-width: var(--max);
  margin: 96px auto 0;
  padding: 32px var(--pad) 56px;
  border-top: 2px solid var(--rule-strong);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  align-items: start;
  font-size: 16px;
}
.foot img { width: 40px; height: 40px; image-rendering: pixelated; grid-row: span 2; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot a { color: var(--text); }
.foot p { margin: 0; color: var(--text-soft); }