/* WireTrace customer document theme (2026-10). Light, print-friendly, flowing A4.
   Pages are produced by print pagination, never by fixed-height page divs, so nothing clips. */
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }

:root {
  --ink: #1C2128;
  --ink2: #3A4552;
  --muted: #5B6672;
  --line: #D9E0E7;
  --soft: #F3F6F9;
  --soft2: #E9F4FB;
  --primary: #0096D6;
  --primary-dk: #00618E;
  --accent: #00A846;
  --amber: #B97800;
  --amber-bg: #FFF6E3;
  --dark: #0D1117;
  --dark2: #161B22;
  --dark3: #22303D;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: 'Inter', sans-serif; color: var(--ink); background: #fff; font-size: 10.2pt; line-height: 1.5; -webkit-font-smoothing: antialiased; }
@page { size: A4; margin: 14mm 15mm 17mm 15mm; }
.doc { max-width: 180mm; margin: 0 auto; }
@media screen { body { background: #EEF2F6; } .doc { background: #fff; padding: 14mm 15mm 18mm; margin: 8mm auto; box-shadow: 0 2px 14px rgba(13,17,23,.12); max-width: 210mm; } }

/* Draft banner (removed by build --final) */
.draft { background: var(--amber-bg); border: 1px solid #F0C36D; color: #6B4700; font-size: 8.4pt; padding: 2.2mm 3.5mm; border-radius: 2mm; margin-bottom: 4mm; }
.draft b { font-weight: 700; }

/* Cover */
.cover { background: var(--dark); color: #E6EDF3; border-radius: 3mm; padding: 9mm 10mm 8mm; margin-bottom: 7mm; position: relative; overflow: hidden; }
.cover::after { content: ""; position: absolute; right: -30mm; top: -30mm; width: 90mm; height: 90mm; border-radius: 50%; background: radial-gradient(circle, rgba(0,150,214,.28), rgba(0,150,214,0) 70%); }
.brand { display: flex; align-items: center; gap: 2.5mm; font-weight: 800; font-size: 11pt; letter-spacing: .2px; color: #fff; margin-bottom: 7mm; }
.brand .mark { height: 8.5mm; width: auto; display: inline-block; }
.brand .wordmark { font-weight: 700; font-size: 12.5pt; letter-spacing: 0.04em; color: #fff; }
.brand .cat { font-weight: 500; color: #A9B4C2; font-size: 8.4pt; margin-left: auto; }
.eyebrow { font-size: 8.4pt; font-weight: 700; color: #5BC4F0; text-transform: uppercase; margin-bottom: 2.5mm; }
.cover h1 { font-size: 23pt; line-height: 1.15; font-weight: 800; color: #fff; margin-bottom: 3.5mm; max-width: 150mm; }
.cover .promise { font-size: 11.2pt; line-height: 1.45; color: #C9D3DD; max-width: 150mm; margin-bottom: 6mm; }
.cover .flow { margin-top: 2mm; }
.cover .audience { font-size: 8pt; color: #8B98A6; margin-top: 4mm; }

/* Headings and text */
h2 { font-size: 14.5pt; font-weight: 800; color: var(--dark); margin: 7mm 0 2.5mm; line-height: 1.25; break-after: avoid; }
h2 .n { color: var(--primary); margin-right: 2mm; }
h3 { font-size: 11pt; font-weight: 700; color: var(--dark); margin: 4.5mm 0 1.5mm; break-after: avoid; }
h4 { font-size: 9.6pt; font-weight: 700; color: var(--primary-dk); margin: 3mm 0 1mm; break-after: avoid; }
p { margin: 0 0 2.4mm; }
.lede { font-size: 11.2pt; line-height: 1.5; color: var(--ink2); margin-bottom: 4mm; }
ul, ol { margin: 0 0 3mm 5mm; }
li { margin: 0 0 1.1mm; padding-left: 1mm; }
strong, b { font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 8.6pt; }
a { color: var(--primary-dk); text-decoration: none; }

/* Blocks */
.callout { background: var(--soft2); border-left: 1.2mm solid var(--primary); padding: 3mm 4mm; border-radius: 0 2mm 2mm 0; margin: 3mm 0 4mm; break-inside: avoid; }
.callout.green { background: #E8F7EE; border-left-color: var(--accent); }
.callout.caution { background: var(--amber-bg); border-left-color: #E3A21A; }
.callout p:last-child { margin-bottom: 0; }
.quote { font-size: 12.5pt; font-weight: 700; color: var(--dark); line-height: 1.35; border-left: 1.2mm solid var(--primary); padding: 1mm 0 1mm 4mm; margin: 4mm 0; break-inside: avoid; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5mm; margin: 2mm 0 4mm; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3mm; margin: 2mm 0 4mm; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5mm; margin: 2mm 0 4mm; }
.card { border: 1px solid var(--line); border-radius: 2mm; padding: 3mm 3.5mm; background: #fff; break-inside: avoid; }
.card h4 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card.tint { background: var(--soft); }
.tag { display: inline-block; font-size: 7.4pt; font-weight: 700; padding: .5mm 1.8mm; border-radius: 1mm; background: var(--soft2); color: var(--primary-dk); margin-right: 1mm; vertical-align: 1px; }
.tag.green { background: #E2F5EA; color: #0B6B33; }
.tag.amber { background: var(--amber-bg); color: #7A5200; }
.tag.grey { background: #ECEFF2; color: #4A5560; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5mm; margin: 3mm 0 4mm; }
.kpi { background: var(--soft); border-radius: 2mm; padding: 3mm; break-inside: avoid; }
.kpi .v { font-size: 15pt; font-weight: 800; color: var(--primary-dk); line-height: 1.1; }
.kpi .l { font-size: 8.2pt; color: var(--ink2); margin-top: 1mm; line-height: 1.3; }

/* Observes / produces pairs */
.obs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 2mm; overflow: hidden; margin: 2.5mm 0 4mm; break-inside: avoid; }
.obs > div { padding: 3mm 3.5mm; }
.obs > div:first-child { background: var(--soft); border-right: 1px solid var(--line); }
.obs h4 { margin-top: 0; }
.obs ul { margin-bottom: 0; }

/* Steps */
ol.steps { list-style: none; margin: 2mm 0 4mm; padding: 0; counter-reset: s; }
ol.steps > li { counter-increment: s; position: relative; padding: 0 0 0 9mm; margin-bottom: 2.4mm; break-inside: avoid; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: -.2mm; width: 6mm; height: 6mm; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 8.4pt; display: flex; align-items: center; justify-content: center; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 2mm 0 4mm; font-size: 8.9pt; break-inside: auto; }
thead { display: table-header-group; }
tr { break-inside: avoid; }
th { text-align: left; font-weight: 700; color: #fff; background: var(--dark3); padding: 1.8mm 2.4mm; font-size: 8.4pt; }
td { padding: 1.7mm 2.4mm; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) td { background: #FAFBFC; }
td.c, th.c { text-align: center; }

/* Limits box */
.limits { border: 1px dashed #9AA6B2; border-radius: 2mm; padding: 3mm 4mm; margin: 3mm 0 4mm; break-inside: avoid; }
.limits h4 { margin-top: 0; color: var(--ink2); }
.limits ul { margin-bottom: 0; }

/* Figures */
figure { margin: 3mm 0 5mm; break-inside: avoid; }
figure svg { width: 100%; height: auto; display: block; }
figcaption { font-size: 8.2pt; color: var(--muted); margin-top: 1.5mm; }

/* Use-case blocks */
.uc { border: 1px solid var(--line); border-radius: 2.5mm; padding: 4mm 4.5mm 2mm; margin: 0 0 5mm; }
.uc h3 { margin-top: 0; font-size: 12pt; }
.uc .meta { font-size: 8.2pt; color: var(--muted); margin-bottom: 2mm; }
.uc dl { display: grid; grid-template-columns: 31mm 1fr; column-gap: 3mm; row-gap: 1.6mm; font-size: 9.2pt; }
.uc dt { font-weight: 700; color: var(--primary-dk); }
.uc dd ul, .uc dd ol { margin-bottom: 0; }
.uc dd { margin: 0; }
.group { font-size: 8.6pt; font-weight: 800; text-transform: uppercase; color: var(--primary); margin: 6mm 0 2mm; break-after: avoid; }

/* CTA */
.cta { background: var(--dark); color: #E6EDF3; border-radius: 2.5mm; padding: 5mm 6mm; margin-top: 6mm; break-inside: avoid; }
.cta h3 { color: #fff; margin: 0 0 1.5mm; font-size: 12.5pt; }
.cta p { margin: 0; color: #C9D3DD; }
.cta .contact { margin-top: 2mm; font-weight: 700; color: #5BC4F0; }

.pb { break-before: page; }
.keep { break-inside: avoid; }