/* Buyer documents: one stylesheet for the HTML pages and their PDFs.
   Colors are the brand core (docs/brand/assets/brand-tokens.css) plus the
   website's accessible accent and ink. */
@font-face { font-family: Inter; src: url("fonts/inter-latin-variable.woff2") format("woff2"); font-weight: 100 900; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-variable.woff2") format("woff2"); font-weight: 100 800; }

:root {
  --navy: #071A2B;
  --cloud-blue: #32B7E9;
  --cloud-white: #F4F7FA;
  --ink: #0B1F31;
  --ink-2: #3D4F60;
  --accent: #0B6E9A;
  --well: #F3F6F9;
  --rule: rgba(7, 26, 43, 0.14);
  --flag-bg: #FFF1D6;
  --flag-ink: #7E4F08;
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; font: 400 10pt/1.42 Inter, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: #fff; }
a { color: var(--accent); }
strong { font-weight: 650; }

.brand { display: flex; align-items: center; gap: 9px; background: var(--navy); color: var(--cloud-white);
  padding: 7px 12px; border-radius: 6px; margin-bottom: 14pt;
  font-weight: 700; font-size: 8.5pt; letter-spacing: 0.24em; text-transform: uppercase; }
.brand img { display: block; }

h1 { font-size: 20pt; line-height: 1.15; color: var(--navy); margin: 0 0 6pt; letter-spacing: -0.01em; }
h1 + p { font-size: 11pt; color: var(--ink-2); margin-top: 0; }
h2 { font-size: 10.5pt; color: var(--accent); margin: 11pt 0 4pt; padding-top: 4pt; border-top: 2px solid var(--cloud-blue);
  text-transform: uppercase; letter-spacing: 0.06em; break-after: avoid; }
p, ul, ol { margin: 0 0 6pt; }
ul, ol { padding-left: 15pt; }
li { margin-bottom: 2.5pt; }
table { width: 100%; border-collapse: collapse; margin: 4pt 0 8pt; font-size: 9pt; break-inside: avoid; }
th, td { text-align: left; vertical-align: top; padding: 4pt 6pt; border-bottom: 1px solid var(--rule); }
th { background: var(--well); color: var(--navy); font-weight: 650; }
code { font: 500 0.92em "JetBrains Mono", Menlo, monospace; background: var(--flag-bg); color: var(--flag-ink); padding: 0 3px; border-radius: 3px; }
pre code { display: block; padding: 6pt; background: var(--well); color: var(--ink); }
hr { border: 0; border-top: 1px dashed var(--rule); margin: 12pt 0; }
.page-break { break-after: page; }
input[type=checkbox] { margin: 0 4px 0 0; }
li:has(> input[type=checkbox]) { list-style: none; margin-left: -14pt; }

/* Capability statement: one dense page, side column for company data. */
.layout-capability { font-size: 8.6pt; line-height: 1.36; }
.layout-capability h1 { font-size: 19pt; }
.layout-capability h1 + p { font-size: 9.5pt; margin-bottom: 4pt; }
.layout-capability h2 { font-size: 9pt; margin: 8pt 0 3pt; padding-top: 3pt; }
.layout-capability li { margin-bottom: 1.5pt; }
.cap-grid { display: grid; grid-template-columns: 1fr 2.35in; gap: 16pt; }
.cap-side { background: var(--well); border-radius: 6px; padding: 2pt 10pt 8pt; align-self: start; }
.cap-side table { font-size: 8.2pt; margin: 0; }
.cap-side th:empty, .cap-side thead { display: none; }
.cap-side td { padding: 2.5pt 0; }
.cap-side td:first-child { color: var(--ink-2); padding-right: 6pt; white-space: nowrap; }
.cap-side ul { padding-left: 11pt; }

/* Slides: 16:9 pages, one section each. */
.layout-slides { font-size: 21pt; line-height: 1.36; }
.slide { width: 13.333in; height: 7.5in; padding: 0.55in 0.8in; overflow: hidden; break-after: page; position: relative;
  border-top: 10px solid var(--cloud-blue); }
.slide:last-child { break-after: auto; }
.slide h1 { font-size: 32pt; margin-bottom: 16pt; }
.slide h1 + p { font-size: inherit; color: inherit; }
.slide li { margin-bottom: 8pt; }
.slide table { font-size: 16pt; }
.slide th, .slide td { padding: 7pt 10pt; }
.slide img { display: block; max-width: 100%; max-height: 5.4in; margin: 0 auto; }
.slide--title { background: var(--navy); color: var(--cloud-white); display: flex; flex-direction: column; justify-content: center; }
.slide--title h1 { color: var(--cloud-white); font-size: 38pt; max-width: 10in; }
.slide--title h1 + p, .slide--title p { color: rgba(244, 247, 250, 0.78); font-size: 22pt; }

@media screen {
  body { background: #EEF2F6; padding: 24px 12px; }
  body > .brand, body > main { max-width: 8.5in; margin-left: auto; margin-right: auto; }
  body > main { background: #fff; padding: 0.5in 0.6in; border-radius: 8px; box-shadow: 0 1px 2px rgba(7,26,43,.06), 0 6px 20px rgba(7,26,43,.05); }
  .layout-slides > main { max-width: 13.333in; background: none; padding: 0; box-shadow: none; }
  .layout-slides .slide { width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 18px; background: #fff; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(7,26,43,.06), 0 6px 20px rgba(7,26,43,.05); }
  .layout-slides .slide--title { background: var(--navy); }
  .page-break { border-top: 1px dashed var(--rule); margin: 18pt 0; }
}
@media screen and (max-width: 720px) {
  body > main { padding: 20px 16px; }
  .cap-grid { grid-template-columns: 1fr; }
  .layout-slides { font-size: 12pt; }
  .layout-slides .slide { aspect-ratio: auto; padding: 20px; }
  .slide h1 { font-size: 18pt; }
  .slide--title h1 { font-size: 24pt; }
  .slide--title h1 + p, .slide--title p { font-size: 13pt; }
  table { display: block; overflow-x: auto; }
}