/* ScribeXL holding page.
   Industry tokens + a page layer. The token sheet's component classes (.btn, .card,
   .table, .dialog...) are deliberately NOT here: this page uses none of them, and its
   52px controls are bespoke to a light fill on a steel field, which is not what
   .btn-primary is for. Restyling them to match would break them for the clinical app.

   NOTHING IN THIS FILE MAY REFERENCE AN EXTERNAL HOST. No @import, no CDN, no font API.
   The page's argument is that data stays put; a webfont request undercuts it in the
   first 200ms. check-external.sh enforces this. */

/* ── Fonts: self-hosted, Latin subset. See fonts/PROVENANCE.md ─────────────── */
@font-face { font-family:"Barlow"; font-style:normal; font-weight:400;
             font-display:swap; src:url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:500;
             font-display:swap; src:url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:700;
             font-display:swap; src:url("fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:400;
             font-display:swap; src:url("fonts/barlow-condensed-400.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:600;
             font-display:swap; src:url("fonts/barlow-condensed-600.woff2") format("woff2"); }

/* ── Tokens (from tokens/styles.css, only what this page uses) ─────────────── */
:root {
  --color-bg: #f2f2f3;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-100: #eef6ff;
  --color-accent-700: #416180;
  --color-accent-900: #1d2d3d;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --gutter: 48px;
  --measure: 1240px;
  --plate: 428px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Square corners everywhere on this page. No exceptions, no border-radius. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.band { padding: 0 var(--gutter); }
.band > .inner { max-width: var(--measure); margin: 0 auto; }

/* ── Blueprint frame: a transparent wireframe object with registration marks ─ */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── Wordmark ──────────────────────────────────────────────────────────────── */
/* Mixed case: ScribeXL, not SCRIBEXL. Caps wanted .04em to breathe; mixed case does
   not, and at .04em the lowercase run reads loose. */
.wordmark { font-family: var(--font-heading); font-weight: 600; letter-spacing: .01em; line-height: 1; }
.wordmark .xl { color: var(--color-accent-700); }
.mark {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--color-text);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1;
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav { border-bottom: 1px solid var(--color-divider); }
.nav > .inner { height: 76px; display: flex; align-items: center; gap: 16px; }
.nav .brand { display: flex; align-items: center; gap: 12px; }
.nav .wordmark { font-size: 23px; }
/* 63%, not the 55% the prototype tuned by eye. At 11.5px this is body text for
   contrast purposes and needs 4.5:1; 55% measured 3.64:1, 63% measures 4.56:1.
   Same reasoning for .spec-head .rev and the two footer roles - all three sat below
   the README's own floor of "muted greys at 13.5px and above". */
.chrome {
  margin-left: auto;
  font-family: var(--font-heading); font-weight: 400; font-size: 11.5px;
  letter-spacing: .11em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 63%, transparent);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero { flex: 1; }
.hero > .inner { display: flex; gap: 72px; padding: 88px 0 96px; align-items: flex-start; }
.hero .col { flex: 1; min-width: 0; max-width: 660px; }

.kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.kicker::before { content: ""; width: 26px; border-top: 1px solid var(--color-accent); }
.kicker span {
  font-family: var(--font-heading); font-weight: 400; font-size: 11.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--color-accent-700);
}

h1 {
  margin: 0 0 26px;
  font-family: var(--font-heading); font-weight: 600; font-size: 78px;
  line-height: .98; letter-spacing: -.025em; text-wrap: pretty;
}
.hero p { font-size: 18px; line-height: 1.55; margin: 0 0 20px; max-width: 600px; text-wrap: pretty; }
.hero p.last { margin-bottom: 40px; }

.reinforce {
  display: flex; align-items: center; gap: 14px;
  padding-top: 28px; border-top: 1px solid var(--color-divider);
}
.reinforce svg { flex: none; }
.reinforce span { font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--color-text) 68%, transparent); }

/* ── Spec plate: a technical drawing's title block ─────────────────────────── */
.spec { width: var(--plate); flex: none; padding: 30px 32px 26px; }
.spec-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 16px;
  /* Heavier than the row dividers below it, deliberately. */
  border-bottom: 1px solid var(--color-text);
}
/* Not a heading element: the page has exactly one h1 and one h2 (the band), so the
   plate is a labelled region instead. It still reads as the title block it draws. */
.spec-head .title {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase;
}
.spec-head .rev {
  margin-left: auto; font-family: var(--font-heading); font-weight: 400; font-size: 11px;
  letter-spacing: .09em; color: color-mix(in srgb, var(--color-text) 63%, transparent);
}
.spec ol { list-style: none; margin: 0; padding: 0; counter-reset: spec; }
.spec li {
  display: flex; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid var(--color-divider);
  counter-increment: spec;
}
.spec li:last-child { padding-bottom: 0; border-bottom: 0; }
/* The 01-04 numerals are content, not decoration - they are the drawing's item numbers. */
.spec li::before {
  content: counter(spec, decimal-leading-zero);
  flex: none; width: 26px; padding-top: 1px;
  font-family: var(--font-heading); font-weight: 400; font-size: 15px;
  letter-spacing: .04em; color: var(--color-accent-700);
}
.spec .t {
  display: block; margin: 0 0 4px;
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  letter-spacing: .02em; line-height: 1.2;
}
.spec p { margin: 0; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 66%, transparent); }

/* ── The claim ─────────────────────────────────────────────────────────────
   The one line that IS the argument. It was 14px muted small print under a rule in
   the hero; promoted to the page's second voice after the H1. Stays on the paper
   ground deliberately - loud in scale, quiet in colour, so it cannot compete with
   the steel CTA below it. It also occupies the space the hero's flex:1 leaves empty
   on a tall viewport. */
.claim { border-top: 1px solid var(--color-divider); }
.claim > .inner { display: flex; align-items: flex-start; gap: 20px; padding: 54px 0 58px; }
.claim svg { flex: none; margin-top: 7px; }
.claim p {
  margin: 0; max-width: 940px;
  font-family: var(--font-heading); font-weight: 600; font-size: 40px;
  line-height: 1.12; letter-spacing: -.015em; text-wrap: pretty;
}
.claim p span { color: var(--color-accent-700); }

/* ── Contact band: the only full field of colour, and the only place to act ── */
.cta { background: var(--color-accent-900); color: var(--color-bg); }
.cta > .inner { padding: 56px 0 60px; display: flex; gap: 72px; align-items: flex-start; }
.cta .col { flex: 1; min-width: 0; max-width: 560px; }
.cta h2 {
  margin: 0 0 12px; font-family: var(--font-heading); font-weight: 600; font-size: 40px;
  line-height: 1.05; letter-spacing: -.015em;
}
.cta .col p { font-size: 15.5px; line-height: 1.55; margin: 0; opacity: .82; max-width: 520px; }
.cta .act { width: var(--plate); flex: none; }
.cta .label {
  display: block; font-family: var(--font-heading); font-weight: 400; font-size: 11.5px;
  letter-spacing: .11em; text-transform: uppercase; opacity: .72; margin-bottom: 9px;
}
/* A steel field means the LIGHT button is the solid object here, not the accent fill. */
.cta a.mail {
  display: inline-flex; align-items: center; gap: 11px;
  height: 52px; padding: 0 22px;
  background: var(--color-bg); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: .05em;
}
.cta a.mail:hover { background: var(--color-accent-100); }
/* The accent focus ring is near-invisible on accent-900. Paper, here. */
.cta a.mail:focus-visible { outline-color: var(--color-bg); }
.cta .small { font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; opacity: .68; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--color-divider); }
.foot > .inner {
  min-height: 78px; display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; padding: 18px 0;
}
/* The signature. A maker's mark, not a headline - the claim band above is the loud
   one, and two statement lines at the same volume would fight. */
.creed {
  flex-basis: 100%; margin: 0 0 16px;
  font-family: var(--font-heading); font-weight: 600; font-size: 22px;
  letter-spacing: .005em; line-height: 1.3;
}
.creed span { color: var(--color-accent-700); }

.foot .wordmark { font-size: 16px; letter-spacing: .01em; }
.foot .domains {
  font-family: var(--font-heading); font-weight: 400; font-size: 12.5px; letter-spacing: .08em;
  color: color-mix(in srgb, var(--color-text) 63%, transparent);
}
.foot .built {
  margin-left: auto; font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 63%, transparent);
}

/* ── Responsive. Two breakpoints is enough; there is no nav to collapse. ───── */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }
  .hero > .inner, .cta > .inner { flex-direction: column; gap: 44px; }
  .hero .col, .cta .col { max-width: none; }
  .spec, .cta .act { width: 100%; }
  h1 { font-size: 56px; }
  .claim p { font-size: 32px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .hero > .inner { padding: 56px 0 64px; }
  h1 { font-size: 40px; }
  .hero p { font-size: 17px; }
  .cta h2 { font-size: 32px; }
  .cta a.mail { width: 100%; justify-content: center; font-size: 15px; padding: 0 14px; }
  .claim > .inner { gap: 14px; padding: 40px 0 44px; }
  .claim svg { width: 22px; height: 22px; margin-top: 4px; }
  .claim p { font-size: 25px; }
  .creed { font-size: 19px; }
  .foot .built { margin-left: 0; }
  .foot .domains { flex-basis: 100%; order: 3; }
}

/* Respect a reduced-motion preference by having nothing to reduce. There is no
   animation, no transition and no script on this page. */