/* Peerglass story pages: /for/agent, and the pages that follow it.

   Every value here is copied from the inline <style> of public/landing.html —
   copied, not extracted, so the landing stays one file that paints with
   nothing to fetch first, and the story pages share one sheet instead of a
   style block each. The landing is the original: when the two drift, change
   it there and bring the change here. :root is carried whole, unused tokens
   included, so a diff against the landing stays empty.

   Its rule travels with it: encoders carry detail in luma at full resolution
   and chroma at quarter resolution, so ON THESE PAGES, HUE NEVER CARRIES
   EMPHASIS — ONLY LUMINANCE AND WEIGHT DO. Hue is reserved for state. Flatten
   a story page to greyscale and its hierarchy must survive. No audience gets
   a hue of its own: a page built for one carries no colour the landing does not. */
:root {
  --void:   #0F1217;   /* page ground                    (app --bg) */
  --pane:   #171C24;   /* raised: cards, mock bodies     (app --surface) */
  --sunken: #0C0F14;   /* recessed: code wells, screens  (app --sunken) */
  --edge:   #333D4D;   /* hairline that only separates   (app --border) */
  --frame:  #46536B;   /* structural outline             (app --border-strong) */
  --ink:    #EAF0F2;   /* headings, ALL prose, primary button fill */
  --muted:  #93A0B1;   /* labels, captions, chrome, metadata ONLY  (app --muted) */
  --glass:  #7FD9E8;   /* the one hue. STATE ONLY: wordmark dot, live dot,
                          focus ring, the featured tier border, code keywords. */
  --ok:     #3FB96F;   /* content colours: legal only inside a mock or well */
  --fail:   #E5534B;

  --sans:  Archivo, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Two type ladders, and the unit is the boundary.
     rem is Peerglass talking. px is a screen being shown: a depicted screen
     must not reflow when the reader changes their root font size — a
     screenshot doesn't do that. */
  --v-label: 0.75rem;                       /* mono, uppercase, .12em */
  --v-small: 0.875rem;                      /* captions, footer, notes */
  --v-body:  1rem;                          /* all prose, nav, buttons, cells */
  --v-lede:  1.25rem;                       /* ledes, h3, .shot .live */
  --v-h2:    clamp(1.5rem,  4vw, 2.75rem);
  --v-h1:    clamp(2.25rem, 6vw, 4.125rem); /* same 1.5 ratio as h2, same breaks */
  --s-chrome: 11px;                         /* depicted browser/phone chrome */
  --s-code:   13px;                         /* depicted terminal and code */

  /* 4px base, ten steps. */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;  --s5: 1.5rem;
  --s6: 2rem;   --s7: 3rem;  --s8: 4rem;   --s9: 6rem;  --s10: 8rem;

  --w-text: 62ch;
  --w-page: 1120px;
  --w-wide: 1280px;

  /* Radius means hardware: a device, a screen inside a device, everything else. */
  --r-device: 16px;
  --r-screen: 8px;
  --r-ui:     3px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* No px font on body: it would override the reader's own browser setting,
   an accessibility regression on a page selling legibility. And no
   -webkit-font-smoothing: it renders glyphs thinner — throwing away stroke
   weight in a stylesheet whose thesis is that letterform edges survive. */
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--v-body);
  overflow-x: hidden;
}

.wrap { width: min(var(--w-page), 100% - var(--s5) * 2); margin-inline: auto; }

/* Sections are divided by a line, not by a void — and padding never depends
   on window height, so the page reads the same on every machine. */
section { padding: var(--s9) 0; border-top: 1px solid var(--edge); }
@media (max-width: 600px) { section { padding: var(--s7) 0; } }

/* ---------- type ---------- */
/* Instrument Serif is display: h1, h2, and the wordmark ONLY. Everything
   Peerglass says is Archivo; everything a session carries is mono. */
h1, h2 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1, h2            { line-height: 1.04; letter-spacing: -0.015em; }
h3, .lede         { line-height: 1.4;  letter-spacing: -0.005em; }
p, li, td         { line-height: 1.6;  letter-spacing: 0; }
pre, code         { line-height: 1.7;  letter-spacing: 0; }
h2 { font-size: var(--v-h2); margin: 0 0 var(--s4); }
h3 { font-family: var(--sans); font-weight: 600; font-size: var(--v-lede); margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s4); }
a { color: var(--ink); text-decoration-color: var(--frame); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--glass); outline-offset: 3px; }
/* Weight is the emphasis these pages are allowed, and 600 is the heaviest
   Archivo they load — so that is what strong means, stated, not left to the engine. */
strong { font-weight: 600; }
/* An address the reader has to type is set the way a session would carry it. */
code { font-family: var(--mono); font-size: .9em; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--v-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s4);
}
/* Any sentence making a claim is ink; muted is for text ABOUT other text. */
.lede { font-size: var(--v-lede); color: var(--ink); max-width: var(--w-text); }
.note { font-size: var(--v-small); color: var(--muted); }

/* Section heads are a two-column editorial unit, not seven identical
   centred stacks. */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5) var(--s7); align-items: end; margin-bottom: var(--s7);
}
.sec-head h2 { margin: 0; }
.sec-head .lede { margin: 0; max-width: var(--w-text); }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }

/* ---------- nav ---------- */
header {
  position: sticky; top: 0; z-index: 40;
  background: var(--void);
  border-bottom: 1px solid var(--edge);
}
.nav { display: flex; align-items: center; gap: var(--s5); padding: var(--s3) 0; }
.mark { font-family: var(--serif); font-size: 1.35rem; letter-spacing: -0.01em; margin-right: auto; display: flex; align-items: center; gap: var(--s2); }
/* A square dot: a pixel, which is what this product is about. No glow —
   glow is a lens artifact, and the product's claim is removing those. */
.mark .dot { width: 8px; height: 8px; border-radius: 0; background: var(--glass); flex: none; }
.nav a { color: var(--muted); text-decoration: none; font-size: var(--v-body); }
.nav a:hover { color: var(--ink); }
/* On a story page the wordmark is the way home, so it is a link — but it is
   the page's name rather than a nav item, and keeps its size and its ink. */
.nav a.mark { color: var(--ink); font-size: 1.35rem; }
.nav .ghost { border: 1px solid var(--frame); padding: var(--s2) var(--s4); border-radius: var(--r-ui); color: var(--ink); }
.nav .ghost:hover { border-color: var(--ink); }
@media (max-width: 900px) { .nav .hide-sm { display: none; } }

/* ---------- buttons ---------- */
/* Under the luma rule the primary action must be the brightest object on
   the page — and a cyan fill (Y' 192) is dimmer than body text (238). */
.btn {
  font-family: var(--sans); font-size: var(--v-body); font-weight: 500;
  padding: var(--s3) var(--s5); border-radius: var(--r-ui); text-decoration: none;
  border: 1px solid var(--ink); background: var(--ink); color: var(--void);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: #fff; border-color: #fff; }
.btn.line { background: none; color: var(--ink); border-color: var(--frame); }
.btn.line:hover { border-color: var(--ink); background: none; }
.cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.cta-note { margin-top: var(--s3); font-size: var(--v-small); color: var(--muted); }
/* Sharing needs a desktop browser; on a touch device the honest primary
   action is seeing how it works, not walking into a wall. On a page written
   to be read from a phone, this rule does most of its work. */
@media (pointer: coarse) {
  .share-cta { background: none; color: var(--ink); border-color: var(--frame); order: 2; }
  .watch-cta { background: var(--ink); color: var(--void); border-color: var(--ink); order: 1; }
}

/* ---------- hero ---------- */
.hero { padding: var(--s8) 0 var(--s7); border-top: 0; }
.hero h1 { font-size: var(--v-h1); margin: 0 0 var(--s4); }
.hero .lede { max-width: 46ch; }

/* ---------- story: steps and points ---------- */
/* The only rules the landing does not have. Both take its .claims shape — a
   hairline above each item, no card, no fill — because a numbered step and a
   plain claim differ in order, not in importance, and order is a label. */
.steps, .points { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s6) var(--s7); }
@media (min-width: 900px) {
  .steps  { grid-template-columns: repeat(3, 1fr); }
  .points { grid-template-columns: repeat(2, 1fr); }
}
.steps li, .points li { border-top: 1px solid var(--edge); padding-top: var(--s4); }
.steps p, .points p { margin: 0; }
/* The step number is set like every other label here: mono, small, muted.
   The digit comes from the list itself, so the markup carries no numbers. */
.steps { counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: "Step " counter(step); display: block; margin-bottom: var(--s2);
  font-family: var(--mono); font-size: var(--v-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
/* Two short answers side by side, on the section head's own breaks. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6) var(--s7); }
.cols .lede { margin: 0; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* ---------- start ---------- */
#start { text-align: center; }
#start h2 { margin-inline: auto; }
#start .lede { margin-inline: auto; }
#start .cta { justify-content: center; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--edge); padding: var(--s7) 0 var(--s8); color: var(--muted); font-size: var(--v-small); }
.foot { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; align-items: baseline; }
.foot .mark { font-size: 1.1rem; }
footer a { color: var(--muted); text-decoration: none; margin-left: var(--s5); }
footer a:hover { color: var(--ink); }