/* ============================================================================
   Morrow — public document pages.

   Shared by /privacy, /terms, /security, /support, /trust-passport-demo and
   /enterprise-admin. The landing page (/launch) is self-contained and does not
   load this file.

   Visual language, translated from the reference direction rather than copied:
   flat bands instead of gradient washes, hairline rules instead of borders with
   glow, squared corners throughout, and display type set LARGE at moderate
   weight with heavy negative tracking. Labels run the other way — tiny, wide
   positive tracking, uppercase mono. Lists take an arrow marker rather than a
   bullet, so a scanned page reads as a specification.

   Palette is the blue/amber pair used across the operator surfaces, so the
   whole site reads as one system.

   No webfonts: the Content-Security-Policy has no font-src, so a font CDN
   would be blocked. The stack resolves to Aptos or Segoe UI Variable on
   Windows and to the platform UI face elsewhere.

   Every class the pages already use is styled here — doc-shell, doc-hero,
   doc-meta, doc-section, matrix, matrix-row, notice, flowline, eyebrow, lead,
   cta, btn, hero-proof, proof-panel, passport-stage — so no page markup
   changed.
   ============================================================================ */

:root {
  --void:      #060708;
  --ground:    #0a0c0f;
  --panel:     #0d1115;
  --panel-2:   #121820;
  --raise:     #171e28;

  --ink:       #eeeeee;
  --ink-2:     #b9b9b9;
  --ink-3:     #7f7f7f;

  --line:      #27303a;
  --line-2:    #394554;
  --line-hot:  #4a5a6e;

  --blue:      #7eb6ff;
  --blue-dim:  #33507a;
  --blue-wash: rgba(126, 182, 255, .09);
  --amber:     #d9a24b;
  --amber-dim: #8b5a26;
  --amber-wash:rgba(217, 162, 75, .09);

  --ok:        #939393;
  --warn:      #d9a24b;
  --bad:       #ff6f6f;

  --sans: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, SFMono-Regular, monospace;

  --shell: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A hairline measure grid — flat, no glow. It fades out before the reading
   column starts so it never sits behind body text. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(126, 182, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(126, 182, 255, .03) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), transparent 46%);
}

/* One warm-to-cool hairline across the very top: the only ornament on the page,
   and the thing that ties these documents to the operator surfaces. */
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--amber), transparent 26%, var(--blue) 68%, transparent);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--ink); }

/* A link inside a sentence must be distinguishable without relying on colour
   (WCAG 1.4.1), so prose links are underlined at rest. Navigation, buttons and
   cards carry their own affordances and opt out below. */
.doc-section a,
.notice a,
.doc-meta a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-dim); }
.doc-section a:hover,
.notice a:hover,
.doc-meta a:hover { text-decoration-color: var(--blue); }

:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }

/* --------------------------------------------------------------------- shell */
.doc-shell {
  position: relative;
  z-index: 1;
  width: min(var(--shell), calc(100vw - 44px));
  margin: 0 auto;
  padding: 0 0 96px;
}

/* -------------------------------------------------------------------- topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  height: 66px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }

.brand-mark {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: linear-gradient(135deg, var(--amber-wash), var(--blue-wash));
  color: var(--amber);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
/* Corner ticks, the same bezel mark the operator surfaces use. */
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--amber);
}
.brand-mark::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.brand-mark::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav a {
  padding: 7px 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.nav a:hover {
  color: var(--blue);
  border-color: var(--line);
  background: var(--blue-wash);
}
.nav a.nav-cta {
  color: var(--void);
  background: var(--amber);
  border-color: var(--amber);
  font-weight: 700;
}
.nav a.nav-cta:hover { background: #e8b463; border-color: #e8b463; color: var(--void); }

/* ------------------------------------------------------------------ doc hero
   The page opens the way the operator surfaces do: a tiny tracked label, then
   display type large enough to behave as a graphic. */
.doc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr);
  gap: 34px 48px;
  align-items: start;
  padding: 68px 0 46px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--amber);
}

.doc-hero h1 {
  margin: 20px 0 0;
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: 600;
  line-height: .93;
  letter-spacing: -.048em;
  text-wrap: balance;
  max-width: 15ch;
}

.lead {
  margin: 24px 0 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* The status card beside the headline: a spec block, not a callout. */
.doc-meta {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: var(--panel);
}
.doc-meta b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.doc-meta p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- doc section */
.doc-section { padding: 56px 0 0; }

.doc-section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(23px, 2.7vw, 34px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.14;
}
/* A hairline index tick rather than a decorative bullet. */
.doc-section h2::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-left: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  transform: translateY(-2px);
}

.doc-section p {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-2);
}
.doc-section p + p { margin-top: 14px; }

.doc-section ul,
.doc-section ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  max-width: 68ch;
}
.doc-section li { margin: 0; color: var(--ink-2); }
.doc-section ul > li,
.doc-section ol > li {
  position: relative;
  padding: 7px 0 7px 30px;
  border-bottom: 1px solid var(--line);
}
.doc-section ul > li:last-child,
.doc-section ol > li:last-child { border-bottom: 0; }

/* Arrow markers: the page reads as a specification, not a leaflet. */
.doc-section ul > li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 13px;
}
.doc-section ol { counter-reset: step; }
.doc-section ol > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.doc-section strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------------- matrix
   A definition table: term on the left, meaning on the right, hairline between.
   Squared, flat, no card shadow. */
.matrix {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}
.matrix-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 8px 28px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  transition: background .14s ease;
}
.matrix-row:last-child { border-bottom: 0; }
.matrix-row:hover { background: var(--panel-2); }
.matrix-row strong {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.matrix-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-2);
  max-width: none;
}

/* -------------------------------------------------------------------- notice */
.notice {
  position: relative;
  margin-top: 26px;
  padding: 16px 20px 16px 46px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: var(--amber-wash);
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--ink-2);
}
.notice::before {
  content: "!";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
.notice a { color: var(--amber); }
.notice a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ flowline
   A stepped sequence rendered as a rail: each item hangs off one vertical
   hairline, so the order is legible without numbering it twice. */
.flowline {
  position: relative;
  margin: 22px 0 0;
  padding: 4px 0 4px 30px;
  border-left: 1px solid var(--line-2);
  display: grid;
  gap: 14px;
  max-width: 68ch;
  color: var(--ink-2);
  font-size: 15px;
}
.flowline > * { position: relative; }
.flowline > *::before {
  content: "";
  position: absolute;
  left: -35px;
  top: .62em;
  width: 9px;
  height: 1px;
  background: var(--blue);
}

/* -------------------------------------------------------- buttons and the CTA */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { color: var(--blue); border-color: var(--blue-dim); background: var(--blue-wash); }
.btn.primary {
  color: var(--void);
  background: var(--amber);
  border-color: var(--amber);
}
.btn.primary:hover { background: #e8b463; border-color: #e8b463; color: var(--void); }

.cta {
  margin-top: 72px;
  padding: 46px 44px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  background: var(--panel);
  display: grid;
  gap: 20px;
  justify-items: start;
}
.cta h2 {
  margin: 0;
  font-size: clamp(24px, 3.1vw, 40px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
  max-width: 20ch;
}
.cta p { margin: 0; max-width: 62ch; color: var(--ink-2); }

/* ------------------------------------------------------- proof panel / stage
   Used by /trust-passport-demo and /enterprise-admin to show a signed evidence
   payload. Monospace, sunk, squared — it should read as a record, not a card. */
.proof-panel {
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--void);
  overflow-x: auto;
}
.proof-panel pre,
.proof-panel code {
  display: block;
  margin: 0;
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.hero-proof > * {
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.passport-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--line);
}
.passport-stage > div {
  padding: 20px 22px;
  background: var(--panel);
}
.passport-stage > div:first-child { border-left: 2px solid var(--blue); }
.passport-stage b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--blue);
}
.passport-stage p {
  margin: 0;
  font-size: 14px;
  line-height: 1.58;
  color: var(--ink-2);
}

/* ----------------------------------------------------------- generic elements */
h1, h2, h3 { text-wrap: balance; }
h3 {
  margin: 32px 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}
p { margin: 0 0 14px; }

code {
  font-family: var(--mono);
  font-size: 13px;
  padding: 1px 6px;
  color: var(--amber);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

pre {
  overflow-x: auto;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--void);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
pre code { padding: 0; border: 0; background: none; color: inherit; }

hr { height: 1px; border: 0; background: var(--line); margin: 40px 0; }

table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14.5px;
  color: var(--ink-2);
}
th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--line-2);
}

footer {
  margin-top: 72px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
footer a { color: var(--ink-3); }
footer a:hover { color: var(--blue); }

/* -------------------------------------------------------------------- narrow */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .doc-shell { width: calc(100vw - 26px); padding-bottom: 64px; }
  .topbar { height: auto; padding: 14px 0; gap: 14px; }
  .nav { margin-left: 0; }
  .doc-hero { grid-template-columns: 1fr; padding: 42px 0 34px; gap: 26px; }
  .doc-hero h1 { max-width: 100%; }
  .matrix-row { grid-template-columns: 1fr; gap: 6px; }
  .cta { padding: 32px 22px; }
  .btn { width: 100%; }
}

/* ------------------------------------------------------------- public forms
   Used by /trial (static/trial.html) and any other public page that has to take
   input. Scoped to .signup-form so it cannot reach the console's own controls. */
.signup-form {
  display: grid;
  gap: 20px;
  max-width: 640px;
  margin: 18px 0 0;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.signup-row { display: grid; gap: 7px; }

.signup-form label {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.signup-form .req { color: var(--amber); margin-left: 4px; }

.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--ground);
  color: var(--ink);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  /* iOS zooms the whole page when a focused control is under 16px, which on a form is
     disorienting and hard to undo. 15.5px with this is close enough to the body scale. */
  -webkit-text-size-adjust: 100%;
}

.signup-form textarea { resize: vertical; min-height: 96px; }

.signup-form input:focus-visible,
.signup-form textarea:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue-dim);
}

.signup-form .hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

.signup-form .fine { margin: 0; font-size: 13px; color: var(--ink-3); }

.signup-form button[type="submit"] { justify-self: start; }

/* The honeypot. Hidden from people without display:none, which some scripts check for, and
   taken out of the tab order and the accessibility tree by the markup itself. */
.signup-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 620px) {
  .signup-form { padding: 18px 16px; }
}