/* ─────────────────────────────────────────────────────────────────────────────────────────
   The VerticalServe executive-whitepaper stylesheet.

   Lifted verbatim from projects/studio/WHITEPAPER_AI_NATIVE_DELIVERY.html so that papers in
   this family are the same document, not an approximation of one. Do not restyle here: change
   the master and re-extract, or the two drift and the family stops looking like a family.

   Rendered with headless Chrome, which is what produced the master (Skia/PDF).
   ───────────────────────────────────────────────────────────────────────────────────────── */
@page {
  size: A4;
  margin: 18mm 18mm 18mm 18mm;
  @bottom-center {
    content: "AI-Native Product Delivery · VerticalServe · " counter(page);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 8pt;
    color: #94a3b8;
  }
}
@page :first { @bottom-center { content: none; } margin: 0; }

:root {
  --ink:        #0f1117;
  --ink-soft:   #2c3340;
  --muted:      #5a6473;
  --rule:       #e0e4eb;
  --bg-soft:    #f6f9ff;
  --bg-alt:     #f3f6fb;
  --accent:     #1d4ed8;
  --accent-d:   #1e3a8a;
  --accent-bg:  #eef4ff;
  --accent-border: #c5d6ff;
  --warn-bg:    #fef3c7;
  --warn:       #b45309;
  --ok-bg:      #d1fae5;
  --ok:         #047857;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  font-size: 10pt;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { letter-spacing: -0.012em; line-height: 1.18; color: var(--ink); }
p { margin: 0 0 7pt; }
strong { color: var(--ink); }
em { color: var(--ink-soft); }

/* ── COVER ── */
.cover {
  height: 297mm;
  width: 210mm;
  padding: 30mm 26mm 24mm;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0%, rgba(29,78,216,0.10) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(29,78,216,0.06) 0%, transparent 45%),
    #ffffff;
  page-break-after: always;
  position: relative;
}
.cover .brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80pt;
}
.cover .brand { font-size: 11pt; font-weight: 800; letter-spacing: 0.08em; color: var(--accent-d); }
.cover .doctype { font-size: 8pt; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.cover .cover-eyebrow {
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18pt;
}
.cover h1.cover-title {
  font-size: 38pt;
  font-weight: 800;
  line-height: 1.04;
  margin: 0 0 18pt;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cover .cover-sub {
  font-size: 14pt;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 14pt;
  max-width: 145mm;
  font-weight: 400;
}
.cover .cover-audience {
  margin-top: 60pt;
  font-size: 10.5pt;
  color: var(--ink-soft);
  border-left: 3pt solid var(--accent);
  padding-left: 14pt;
  max-width: 150mm;
  line-height: 1.5;
}
.cover .cover-audience strong { color: var(--ink); }
.cover .cover-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 24pt;
  border-top: 0.6pt solid var(--rule);
  color: var(--muted);
  font-size: 9pt;
}
.cover .cover-footer .url { color: var(--accent-d); font-weight: 600; }

/* ── Section common ── */
.section { page-break-before: always; }
.section.first { page-break-before: auto; }
.section-num {
  font-size: 9pt;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5pt;
}
.section h2 {
  font-size: 18pt;
  font-weight: 700;
  margin: 0 0 8pt;
  padding-bottom: 6pt;
  border-bottom: 0.7pt solid var(--rule);
}
.section h3 { font-size: 12pt; font-weight: 700; margin: 14pt 0 4pt; }
.section h4 { font-size: 10pt; font-weight: 700; margin: 10pt 0 3pt; color: var(--accent-d); text-transform: none; }

/* ── Exec summary callout ── */
.exec-callout {
  background: var(--bg-soft);
  border-left: 3pt solid var(--accent);
  padding: 11pt 14pt;
  border-radius: 0 4pt 4pt 0;
  margin: 8pt 0 14pt;
}
.exec-callout p { margin: 0 0 6pt; font-size: 9.8pt; line-height: 1.5; }
.exec-callout p:last-child { margin: 0; }

/* ── Quote / question ── */
.question-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10pt;
  margin: 8pt 0;
}
.question-card {
  background: #fafbfd;
  border: 0.5pt solid var(--rule);
  border-left: 2.5pt solid #94a3b8;
  padding: 8pt 12pt;
  border-radius: 0 3pt 3pt 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 10pt;
}
.question-card.new { border-left-color: var(--accent); background: var(--accent-bg); color: var(--ink); font-style: normal; font-weight: 600; }
.question-card .lbl { display: block; font-size: 7.5pt; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 3pt; font-style: normal; }
.question-card.new .lbl { color: var(--accent); }

/* ── Image figure ── */
.figure {
  margin: 6pt 0 4pt;
  text-align: center;
  page-break-inside: avoid;
}
.figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  max-height: 145mm;            /* global cap: keeps portrait images from filling the page */
}
.figure.compact img { max-height: 120mm; }
.figure.tall img    { max-height: 175mm; }     /* opt-in for figures that should run taller */
.figure.wide img    { max-height: 130mm; }
.figure.medium img  { max-height: 150mm; }
.figure .cap {
  margin-top: 3pt;
  font-size: 8pt;
  color: var(--muted);
  font-style: italic;
  max-width: 160mm;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35;
}

/* ── Risk grid (4 categories) ── */
.risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9pt;
  margin: 8pt 0;
}
.risk-card {
  background: #fff;
  border: 0.5pt solid var(--rule);
  border-top: 2pt solid var(--warn);
  padding: 9pt 12pt;
  border-radius: 0 0 3pt 3pt;
}
.risk-card h4 { color: var(--warn); margin: 0 0 4pt; font-size: 10.5pt; }
.risk-card ul { padding-left: 12pt; margin: 0; }
.risk-card li { font-size: 9pt; line-height: 1.4; color: var(--ink-soft); margin-bottom: 1pt; }

/* ── Industry examples (2x2) ── */
.example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10pt;
  margin: 8pt 0;
}
.example { border: 0.5pt solid var(--rule); border-radius: 4pt; overflow: hidden; }
.example .head {
  background: var(--accent-d);
  color: #fff;
  padding: 7pt 12pt;
  font-size: 10.5pt;
  font-weight: 700;
}
.example .body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.example .col { padding: 8pt 12pt; }
.example .col.trad { background: #fafbfd; border-right: 0.4pt solid var(--rule); }
.example .col.ai { background: var(--accent-bg); }
.example .col .lbl {
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4pt;
}
.example .col.trad .lbl { color: #94a3b8; }
.example .col.ai .lbl { color: var(--accent-d); }
.example .col ul { padding-left: 12pt; margin: 0 0 5pt; }
.example .col li { font-size: 8.4pt; line-height: 1.4; margin-bottom: 1pt; }
.example .col .duration {
  margin-top: 4pt;
  padding-top: 4pt;
  border-top: 0.4pt dotted var(--rule);
  font-size: 8.2pt;
}
.example .col .duration strong { font-size: 9.5pt; }
.example .col.trad .duration strong { color: var(--warn); }
.example .col.ai .duration strong { color: var(--ok); }

.position-callout {
  background: var(--warn-bg);
  border-left: 3pt solid var(--warn);
  padding: 9pt 13pt;
  border-radius: 0 3pt 3pt 0;
  margin: 9pt 0;
  font-size: 10pt;
  color: var(--ink-soft);
}
.position-callout strong { color: var(--ink); }

/* ── CIO Dilemma "Why IT feels slower" visual ── */
.speed-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10pt;
  margin: 6pt 0;
}
.speed-compare .lane {
  border: 0.5pt solid var(--rule);
  border-radius: 4pt;
  padding: 10pt 12pt 14pt;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.speed-compare .lane.fast { background: var(--ok-bg); border-left: 3pt solid var(--ok); }
.speed-compare .lane.slow { background: #fafbfd; border-left: 3pt solid #94a3b8; }
.speed-compare .lane .lbl {
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10pt;
  text-align: center;
}
.speed-compare .lane.fast .lbl { color: var(--ok); }
.speed-compare .lane.slow .lbl { color: #64748b; }
.speed-compare .lane .step {
  background: #fff;
  border: 0.5pt solid var(--rule);
  border-radius: 3pt;
  padding: 4pt 14pt;
  font-size: 9pt;
  font-weight: 600;
  text-align: center;
  min-width: 38mm;
}
.speed-compare .lane .arr {
  color: var(--ok);
  font-size: 11pt;
  margin: 3pt 0;
}
.speed-compare .lane.slow .arr { color: #94a3b8; }
.speed-compare .lane .verdict {
  margin-top: 12pt;
  padding: 6pt 14pt;
  border-radius: 3pt;
  font-size: 13pt;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.speed-compare .lane.fast .verdict { background: var(--ok); color: #fff; }
.speed-compare .lane.slow .verdict { background: #475569; color: #fff; }
.problem-callout {
  text-align: center;
  margin: 12pt 0 4pt;
  padding: 12pt;
  background: linear-gradient(135deg, #0f2a47 0%, #1e3a5c 100%);
  color: #fff;
  border-radius: 4pt;
}
/* ── Operating-Model Anchor (one-sentence definition) ── */
.anchor-callout {
  margin: 10pt 0 8pt;
  background: linear-gradient(135deg, #0f2a47 0%, #1e3a5c 100%);
  color: white;
  padding: 12pt 16pt;
  border-radius: 5pt;
}
.anchor-callout .anchor-lbl {
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 4pt;
}
.anchor-callout .anchor-headline {
  font-size: 11pt;
  font-weight: 600;
  color: white;
  line-height: 1.4;
  margin-bottom: 8pt;
}
.anchor-callout .anchor-headline strong { color: #fbbf24; font-weight: 800; }
.anchor-callout .anchor-components {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6pt;
  margin-top: 6pt;
}
.anchor-callout .ac-card {
  background: rgba(255,255,255,0.07);
  border-left: 2pt solid #60a5fa;
  padding: 5pt 8pt;
  border-radius: 0 3pt 3pt 0;
}
.anchor-callout .ac-card .ac-name {
  font-size: 8pt;
  font-weight: 800;
  color: #93c5fd;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 2pt;
}
.anchor-callout .ac-card .ac-text {
  font-size: 8pt;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
}
.anchor-callout .anchor-foot {
  margin-top: 6pt;
  font-size: 8pt;
  font-style: italic;
  color: #cbd5e1;
  line-height: 1.35;
}
/* ── Industry data fact-strip ── */
.fact-strip {
  background: #f0f7ff;
  border: 0.5pt solid #c5d6ff;
  border-left: 2.5pt solid var(--accent);
  border-radius: 0 3pt 3pt 0;
  padding: 5pt 11pt;
  margin: 5pt 0;
  display: grid;
  grid-template-columns: 70pt 1fr;
  gap: 10pt;
  align-items: center;
}
.fact-strip .lbl {
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-right: 0.6pt solid var(--accent-border);
  padding-right: 8pt;
  text-align: right;
}
.fact-strip .fact {
  font-size: 8.8pt;
  color: var(--ink);
  line-height: 1.4;
}
.fact-strip .fact strong { color: var(--accent-d); }
.fact-strip .fact em { color: var(--muted); font-style: italic; font-size: 7.5pt; display: block; margin-top: 2pt; }
.problem-callout .small {
  font-size: 9pt;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4pt;
}
.problem-callout .big {
  font-size: 17pt;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── CIO Decision Matrix ── */
.cio-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8pt 0;
  border: 0.5pt solid var(--rule);
  border-radius: 4pt;
  overflow: hidden;
}
.cio-table th {
  background: var(--accent-d);
  color: #fff;
  text-align: left;
  padding: 9pt 13pt;
  font-size: 9pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cio-table th.area { background: #0f1117; }
.cio-table td {
  padding: 9pt 13pt;
  border-bottom: 0.4pt solid var(--rule);
  font-size: 10pt;
  line-height: 1.4;
  vertical-align: top;
}
.cio-table tr:last-child td { border-bottom: 0; }
.cio-table td.area { font-weight: 800; color: var(--ink); background: var(--bg-alt); width: 24%; }
.cio-table td.trad { background: #fff; color: var(--ink-soft); width: 38%; }
.cio-table td.ai { background: var(--accent-bg); color: var(--ink); font-weight: 600; width: 38%; }
.cio-quoted {
  margin-top: 10pt;
  text-align: center;
  font-size: 9pt;
  font-style: italic;
  color: var(--muted);
}

/* ── Insurance Pod ── */
.pod-card {
  border: 0.5pt solid var(--rule);
  border-radius: 4pt;
  overflow: hidden;
  margin: 8pt 0;
}
.pod-card .pod-head {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  color: #fff;
  padding: 12pt 16pt;
}
.pod-card .pod-head .ind {
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 3pt;
}
.pod-card .pod-head h3 { color: #fff; font-size: 16pt; margin: 0; font-weight: 700; }
.pod-card .pod-body {
  background: #fff;
  padding: 14pt 16pt;
}
.pod-row-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5pt;
  margin: 4pt 0 8pt;
}
.pod-member {
  background: var(--bg-soft);
  border: 0.5pt solid var(--accent-border);
  border-top: 2pt solid var(--accent);
  border-radius: 0 0 3pt 3pt;
  padding: 6pt 7pt;
  text-align: center;
}
.pod-member .role {
  font-size: 6.8pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2pt;
}
.pod-member .name {
  font-size: 9pt;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.pod-sponsor-row {
  background: var(--warn-bg);
  border-left: 2.5pt solid var(--warn);
  border-radius: 0 3pt 3pt 0;
  padding: 6pt 11pt;
  margin: 4pt 0 6pt;
  font-size: 9pt;
  display: flex;
  align-items: center;
  gap: 10pt;
}
.pod-sponsor-row .lbl {
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  white-space: nowrap;
}
.pod-sponsor-row .sponsor-name {
  font-weight: 800;
  color: var(--ink);
}
.pod-sponsor-row .sponsor-desc {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 8.5pt;
}
.pod-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 7pt;
  margin: 6pt 0 10pt;
}
.pod-outcomes .agent {
  background: var(--accent-bg);
  border: 0.5pt solid var(--accent-border);
  border-radius: 3pt;
  padding: 7pt 8pt;
  text-align: center;
  font-size: 9pt;
  font-weight: 700;
  color: var(--accent-d);
}
.pod-meta {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 9pt;
  margin-top: 8pt;
}
.pod-meta .block {
  padding: 9pt 12pt;
  border-radius: 3pt;
  background: var(--bg-soft);
  border: 0.5pt solid var(--rule);
}
.pod-meta .block .lbl {
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin-bottom: 3pt;
}
.pod-meta .block .value-big { font-size: 16pt; font-weight: 800; color: var(--accent-d); line-height: 1.1; }
.pod-meta .block ul { padding-left: 14pt; margin: 0; }
.pod-meta .block li { font-size: 9.4pt; margin-bottom: 2pt; line-height: 1.4; color: var(--ink-soft); }

/* ── What Leaders Should Do Next ── */
.action-plan {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9pt;
  margin: 10pt 0;
}
.horizon {
  border: 0.5pt solid var(--rule);
  border-radius: 4pt;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.horizon .head {
  background: var(--accent-d);
  color: #fff;
  padding: 8pt 14pt;
}
.horizon .head .when {
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.horizon .head h3 {
  color: #fff;
  font-size: 13pt;
  font-weight: 700;
  margin: 1pt 0 0;
}
.horizon .body {
  padding: 9pt 14pt 11pt;
  background: #fff;
  flex: 1;
}
.horizon .body ul {
  padding-left: 14pt;
  margin: 0;
}
.horizon .body li {
  font-size: 9pt;
  line-height: 1.5;
  margin-bottom: 3pt;
  color: var(--ink);
}
.horizon.h1 { border-top: 3pt solid #93c5fd; }
.horizon.h2 { border-top: 3pt solid #60a5fa; }
.horizon.h3 { border-top: 3pt solid var(--accent); }
.horizon.h1 .head { background: #1e40af; }
.horizon.h2 .head { background: #1d4ed8; }
.horizon.h3 .head { background: var(--accent-d); }

/* ── Final / contact ── */
.final-thought {
  background: linear-gradient(135deg, #0f2a47 0%, #1e3a5c 100%);
  color: #fff;
  padding: 16pt 22pt;
  border-radius: 4pt;
  margin: 12pt 0 6pt;
}
.final-thought h2 { color: #fff; border: 0; padding: 0; font-size: 16pt; margin: 0 0 8pt; }
.final-thought p { color: rgba(255,255,255,0.92); font-size: 10pt; line-height: 1.5; margin: 0 0 6pt; }
.final-thought p strong { color: #fbbf24; font-weight: 800; }
.final-thought p:last-child { margin: 0; }

.contact-strip {
  margin-top: 14pt;
  padding-top: 8pt;
  border-top: 0.6pt solid var(--rule);
  font-size: 8.5pt;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
}
.contact-strip strong { color: var(--ink); }

/* ── Reference architecture (layered) ── */
.ref-arch {
  margin: 14pt 0 10pt;
  padding: 14pt 14pt 18pt;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  border: 0.5pt solid var(--rule);
  border-radius: 6pt;
}
.ref-arch .layer {
  display: grid;
  grid-template-columns: 70mm 1fr;
  align-items: stretch;
  margin: 0 auto;
  max-width: 165mm;
  border-radius: 4pt;
  overflow: hidden;
  border: 0.5pt solid var(--accent-border);
}
.ref-arch .layer .name {
  background: var(--accent-d);
  color: #fff;
  padding: 10pt 14pt;
  display: flex;
  align-items: center;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.ref-arch .layer.l-bb .name   { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.ref-arch .layer.l-pp .name   { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.ref-arch .layer.l-gov .name  { background: linear-gradient(135deg, #1d4ed8 0%, #60a5fa 100%); }
.ref-arch .layer.l-plat .name { background: linear-gradient(135deg, #1e3a5c 0%, #475569 100%); }
.ref-arch .layer.l-sor .name  { background: linear-gradient(135deg, #0f1117 0%, #2c3340 100%); }
.ref-arch .layer .desc {
  background: #fff;
  padding: 10pt 14pt;
  font-size: 9.5pt;
  color: var(--ink-soft);
  line-height: 1.45;
  display: flex;
  align-items: center;
}
.ref-arch .layer .desc strong { color: var(--ink); }
.ref-arch .arr {
  text-align: center;
  font-size: 14pt;
  color: var(--accent);
  margin: 4pt 0;
  font-weight: 800;
}
.ref-arch-cap {
  margin-top: 12pt;
  padding: 11pt 14pt;
  border-left: 3pt solid var(--accent);
  background: var(--accent-bg);
  border-radius: 0 3pt 3pt 0;
  font-size: 10pt;
  color: var(--ink-soft);
  line-height: 1.5;
}
.ref-arch-cap strong { color: var(--ink); }

/* ── Per-transformation appendix pages ── */
.tx-page {
  page-break-before: always;
  display: flex;
  flex-direction: column;
  min-height: 261mm;
}
.tx-page.studio { --tx-accent: #2563eb; --tx-accent-d: #1d4ed8; --tx-accent-bg: #eef4ff; --tx-accent-border: #c5d6ff; --tx-accent-deep: #1e3a8a; }
.tx-page.dev    { --tx-accent: #d97706; --tx-accent-d: #b45309; --tx-accent-bg: #fef3c7; --tx-accent-border: #fde68a; --tx-accent-deep: #78350f; }
.tx-page .spec-block {
  background: #0f1117;
  color: #e2e8f0;
  border-radius: 4pt;
  padding: 7pt 11pt;
  font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 7pt;
  line-height: 1.32;
  margin: 3pt 0 3pt;
  white-space: pre;
  border-left: 2pt solid var(--tx-accent);
  page-break-inside: avoid;
}
.tx-page .spec-block .k { color: #93c5fd; }
.tx-page .spec-block .v { color: #a7f3d0; }
.tx-page .spec-block .c { color: #94a3b8; font-style: italic; }
.tx-page .spec-block .n { color: #fbbf24; }
.tx-page .spec-foot {
  font-size: 7.8pt;
  color: var(--muted);
  font-style: italic;
  margin: 1pt 0 4pt;
  line-height: 1.35;
}
.tx-page .spec-foot strong { color: var(--tx-accent-d); font-style: normal; }
.tx-page .spec-bridge {
  background: var(--tx-accent-bg);
  border-left: 2.5pt solid var(--tx-accent);
  padding: 6pt 11pt;
  border-radius: 0 4pt 4pt 0;
  margin: 2pt 0 6pt;
}
.tx-page .spec-bridge .lbl {
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-accent-d);
  margin-bottom: 2pt;
}
.tx-page .spec-bridge p {
  margin: 0;
  font-size: 8.3pt;
  line-height: 1.38;
  color: var(--ink-soft);
}
.tx-page .spec-bridge code {
  background: rgba(15, 17, 23, 0.07);
  padding: 1pt 4pt;
  border-radius: 2pt;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 7.8pt;
  color: var(--tx-accent-deep);
}
.tx-page .spec-bridge strong { color: var(--ink); }
.tx-page.qa     { --tx-accent: #059669; --tx-accent-d: #047857; --tx-accent-bg: #d1fae5; --tx-accent-border: #a7f3d0; --tx-accent-deep: #064e3b; }
.tx-page.ams    { --tx-accent: #7c3aed; --tx-accent-d: #6d28d9; --tx-accent-bg: #ede9fe; --tx-accent-border: #ddd6fe; --tx-accent-deep: #4c1d95; }

.tx-page .tx-num {
  font-size: 9pt;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-accent);
  margin-bottom: 4pt;
}
.tx-page h2 {
  font-size: 17pt;
  font-weight: 700;
  margin: 0 0 3pt;
  padding-bottom: 4pt;
  border-bottom: 0.7pt solid var(--rule);
}
.tx-page .tx-product {
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tx-accent-d);
  margin-bottom: 4pt;
}
.tx-page p { margin: 0 0 4pt; font-size: 9.4pt; line-height: 1.4; }
.tx-page .seclbl {
  margin: 8pt 0 4pt;
  display: flex;
  align-items: center;
  gap: 6pt;
}
.tx-page .seclbl .bar { height: 0.6pt; background: var(--rule); flex: 1; }
.tx-page .seclbl .label {
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-accent);
}
.tx-page .tx-shift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7pt;
  margin: 2pt 0;
}
.tx-page .tx-shift .col {
  padding: 6pt 10pt;
  border-radius: 3pt;
}
.tx-page .tx-shift .col.t { background: #fafbfd; border: 0.5pt solid var(--rule); }
.tx-page .tx-shift .col.a { background: var(--tx-accent-bg); border: 0.5pt solid var(--tx-accent-border); border-left: 2.5pt solid var(--tx-accent); }
.tx-page .tx-shift .col .lbl {
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 3pt;
}
.tx-page .tx-shift .col.t .lbl { color: #94a3b8; }
.tx-page .tx-shift .col.a .lbl { color: var(--tx-accent-d); }
.tx-page .tx-shift .col h3 { font-size: 9.5pt; margin: 0 0 2pt; }
.tx-page .tx-shift .col p { font-size: 8.2pt; margin: 0; line-height: 1.35; }

.tx-page .tx-diagram {
  margin: 4pt 0;
  text-align: center;
  background: #fff;
  border: 0.4pt solid var(--rule);
  border-radius: 3pt;
  padding: 4pt;
  page-break-inside: avoid;
}
.tx-page .tx-diagram img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 60mm;
  height: auto;
}

.tx-page .tx-tools {
  background: var(--bg-soft);
  border: 0.4pt dashed var(--tx-accent-border);
  border-radius: 3pt;
  padding: 5pt 10pt;
  margin: 2pt 0;
}
.tx-page .tx-tools .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3pt;
  align-items: center;
  margin-bottom: 4pt;
}
.tx-page .tx-tools .pill {
  display: inline-block;
  background: #fff;
  color: var(--ink-soft);
  border: 0.4pt solid var(--rule);
  padding: 1pt 7pt;
  border-radius: 999px;
  font-size: 7.8pt;
  font-weight: 600;
}
.tx-page .tx-tools .pill.us {
  background: var(--tx-accent);
  color: #fff;
  border-color: var(--tx-accent);
  font-weight: 800;
}
.tx-page .tx-tools .note {
  font-size: 7.8pt;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.35;
}
.tx-page .tx-tools .note strong { color: var(--tx-accent-d); }

.tx-page .tx-vs {
  background: linear-gradient(135deg, var(--tx-accent-deep) 0%, var(--tx-accent-d) 100%);
  color: #fff;
  padding: 9pt 14pt;
  border-radius: 4pt;
  margin: 3pt 0;
}
.tx-page .tx-vs .vs-eyebrow {
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 3pt;
}
.tx-page .tx-vs h3 {
  color: #fff;
  font-size: 12pt;
  margin: 0 0 3pt;
  font-weight: 700;
}
.tx-page .tx-vs .vs-tag {
  font-size: 8pt;
  color: rgba(255,255,255,0.85);
  margin-bottom: 5pt;
}
.tx-page .tx-vs ul { padding-left: 14pt; margin: 0; }
.tx-page .tx-vs li {
  font-size: 8.4pt;
  line-height: 1.4;
  margin-bottom: 1pt;
  color: rgba(255,255,255,0.94);
}
.tx-page .tx-vs li strong { color: #fff; }

/* ── tx-vs with architecture diagram ── */
.tx-page .tx-vs.with-diagram {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 10pt;
  align-items: start;
}
.tx-page .tx-vs.with-diagram .vs-text { min-width: 0; }
.tx-page .tx-vs.with-diagram .vs-text li { font-size: 7.8pt; line-height: 1.32; margin-bottom: 0; }
.tx-page .tx-vs.with-diagram .vs-text h3 { font-size: 11pt; }
.tx-page .tx-vs.with-diagram .vs-text .vs-tag { font-size: 7.5pt; margin-bottom: 4pt; }
.tx-page .tx-vs.with-diagram .vs-diagram {
  background: rgba(255,255,255,0.97);
  border-radius: 4pt;
  padding: 4pt 5pt 5pt;
  text-align: center;
  page-break-inside: avoid;
}
.tx-page .tx-vs.with-diagram .vs-diagram img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 88mm;
  height: auto;
}
.tx-page .tx-vs.with-diagram .vs-diagram .dlbl {
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-accent-d);
  margin-bottom: 3pt;
  text-align: center;
}

.tx-page .tx-customer {
  background: var(--tx-accent-bg);
  border-left: 2.5pt solid var(--tx-accent);
  padding: 5pt 11pt;
  border-radius: 0 3pt 3pt 0;
  margin: 2pt 0;
  font-size: 8.1pt;
  line-height: 1.35;
  color: var(--ink-soft);
  page-break-inside: avoid;
}
.tx-page .tx-customer .cust-tag {
  font-size: 6.8pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-accent-d);
  margin-bottom: 2pt;
}
.tx-page .tx-customer strong { color: var(--ink); }

.tx-page .tx-footer {
  margin-top: auto;
  padding-top: 6pt;
  border-top: 0.5pt solid var(--rule);
  font-size: 7.3pt;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
  page-break-inside: avoid;
}