:root {
  --teal: #00c9a7; --cyan: #00d2ff; --blue: #2c73d2;
  --ink: #0a1628; --ink-soft: #1e3a5f; --white: #fff;
  --g50: #f8fafc; --g100: #f1f5f9; --g200: #e2e8f0;
  --g400: #94a3b8; --g600: #475569; --g800: #1e293b;
  --page-x: 12mm;
  --content-w: calc(210mm - 2 * var(--page-x));
  --content-h: calc(297mm - 11mm - 14mm);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: #8899aa; color: var(--g800);
  font-size: 10.5px; line-height: 1.55;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fd { font-family: Nunito, sans-serif; }

/* ── Page shell ── */
.sheet {
  width: 210mm; height: 297mm; max-height: 297mm; min-height: 297mm;
  margin: 18px auto; background: var(--white);
  display: flex; flex-direction: column; overflow: hidden;
  page-break-after: always; break-after: page;
  position: relative; padding-bottom: 11mm;
  box-shadow: 0 6px 28px rgba(10, 22, 40, 0.22);
}

.sheet-main {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  gap: 2.5mm;
  min-height: 0;
  overflow: hidden;
}
.sheet-main.compact { gap: 2mm; }
.sheet-main.showcase-page { gap: 2.5mm; }

.gf {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--ink); color: rgba(255,255,255,.88);
  padding: 0 var(--page-x); height: 11mm; font-size: 8px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 10; border-top: 2.5px solid var(--teal);
}
.gf .pg { color: var(--g400); font-size: 7.5px; font-weight: 600; }
.gf > span:first-child { color: var(--cyan); font-weight: 800; }
.gf > span:last-child { color: rgba(255,255,255,.95); font-weight: 800; }

.tb {
  padding: 5mm var(--page-x) 3mm;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.tb-company img { height: 32px; width: auto; display: block; }
.tb-product-mark { text-align: right; font-family: Nunito; line-height: 1.15; }
.tb-product-mark span { display: block; font-size: 15px; font-weight: 900; color: var(--blue); }
.tb-product-mark small {
  display: block; font-size: 7.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal); margin-top: 2px;
}

.wave-bg {
  position: absolute; top: 0; right: 0; width: 80mm; height: 80mm;
  opacity: .04; pointer-events: none;
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
}

/* ── Section headers (aligned to page grid) ── */
.sh {
  padding: 1mm var(--page-x) 2mm;
  flex-shrink: 0;
}
.sh-tag {
  font-size: 8px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 3px;
}
.sh h2 {
  font-family: Nunito; font-size: 1.4rem; font-weight: 900;
  color: var(--ink); letter-spacing: -.02em; line-height: 1.15;
}
.sh h2.sm { font-size: 1.12rem; }
.sh h2::after {
  content: ""; display: block; width: 36px; height: 3px;
  background: var(--teal); margin-top: 5px; border-radius: 2px;
}
.sh .lead { font-size: 10px; color: var(--g600); margin-top: 5px; line-height: 1.55; max-width: var(--content-w); }

/* ── Inset blocks (shared horizontal alignment) ── */
.inset {
  margin-left: var(--page-x);
  margin-right: var(--page-x);
  width: var(--content-w);
}

.req-box {
  padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #f0fdfa 0%, var(--g50) 100%);
  border: 1px solid rgba(0,201,167,.4); border-left: 4px solid var(--teal);
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
}
.req-box .req-label {
  font-size: 7.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 4px;
}
.req-box p { font-size: 10px; color: var(--ink-soft); line-height: 1.55; font-style: italic; }

.rfp-yes {
  display: inline-block;
  margin: 0 var(--page-x);
  padding: 7px 14px;
  background: var(--ink); color: var(--cyan); border-radius: 8px;
  font-family: Nunito; font-size: 10.5px; font-weight: 800;
}

.tbl {
  width: var(--content-w);
  margin-left: var(--page-x);
  margin-right: var(--page-x);
  border-collapse: collapse;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--g200);
  flex-shrink: 0; table-layout: fixed;
}
.tbl th {
  background: var(--ink); color: white; padding: 6px 10px;
  text-align: left; font-family: Nunito; font-size: 8.5px;
  vertical-align: middle;
}
.tbl td {
  padding: 5px 10px; border-bottom: 1px solid var(--g200);
  color: var(--g600); font-size: 8.5px; line-height: 1.45; vertical-align: top;
  word-wrap: break-word;
}
.tbl tr:nth-child(even) td { background: var(--g50); }
.tbl tr:last-child td { border-bottom: none; }
.tbl.compact td, .tbl.compact th { padding: 4px 9px; font-size: 8px; }
.tbl.fill-rows td { padding: 6px 10px; }
.tbl.cols-2 th:first-child, .tbl.cols-2 td:first-child { width: 28%; }
.tbl.cols-3 th:first-child, .tbl.cols-3 td:first-child { width: 18%; }
.tbl.cols-3 th:nth-child(2), .tbl.cols-3 td:nth-child(2) { width: 22%; }
.two-col .tbl.cols-2 th:first-child, .two-col .tbl.cols-2 td:first-child { width: 36%; }
.two-col .tbl.cols-3 th:first-child, .two-col .tbl.cols-3 td:first-child { width: 32%; }
.two-col .tbl.cols-3 th:nth-child(2), .two-col .tbl.cols-3 td:nth-child(2) { width: 26%; }

.comment-box {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  padding: 10px 13px; border-radius: 8px;
  background: var(--g50); border: 1px dashed var(--g200);
  font-size: 9px; color: var(--g600); line-height: 1.5;
}
.comment-box b {
  color: var(--ink); font-size: 7.5px; letter-spacing: .08em;
  text-transform: uppercase; display: block; margin-bottom: 4px;
}

/* ── Hero band ── */
.hero-band {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  border-radius: 12px;
  display: grid; grid-template-columns: 1fr 34%;
  overflow: hidden; min-height: 48mm;
  border: 1px solid rgba(0,201,167,.3);
  flex-shrink: 0;
}
.hero-band.tall { min-height: 52mm; }
.hero-band.xl { min-height: 56mm; }
.hero-band-body {
  padding: 14px 16px;
  background: linear-gradient(145deg, var(--ink) 0%, var(--ink-soft) 55%, rgba(44,115,210,.35) 100%);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-band-body .hb-tag {
  font-size: 7.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 4px;
}
.hero-band-body h3 { font-family: Nunito; font-size: 13px; font-weight: 900; color: white; margin-bottom: 6px; line-height: 1.2; }
.hero-band-body p { font-size: 9px; color: rgba(255,255,255,.88); line-height: 1.55; }
.hero-band-img { background-size: cover; background-position: center; min-height: 100%; position: relative; }
.hero-band-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, transparent 45%);
}

.arch-connector {
  text-align: center;
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  position: relative;
  font-size: 7.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g400);
  flex-shrink: 0; padding: 1mm 0;
}
.arch-connector::before, .arch-connector::after {
  content: ""; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--g200);
}
.arch-connector::before { left: 0; } .arch-connector::after { right: 0; }
.arch-connector span { background: var(--white); padding: 0 10px; position: relative; z-index: 1; color: var(--blue); }

/* ── Stack row ── */
.stack-visual {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  display: grid; gap: 2mm; flex-shrink: 0;
}
.stack-visual.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stack-visual.cols-5 { grid-template-columns: repeat(5, 1fr); }
.stack-visual.cols-6 { grid-template-columns: repeat(6, 1fr); }
.stack-layer {
  padding: 10px 6px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  border: 1px solid rgba(0,201,167,.25);
  min-height: 16mm;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.stack-layer b { font-family: Nunito; font-size: 10px; font-weight: 800; color: var(--cyan); }
.stack-layer small { font-size: 7.5px; color: rgba(255,255,255,.75); margin-top: 3px; line-height: 1.35; display: block; }

/* ── Pipeline (grid-aligned steps) ── */
.pipeline-row {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  display: grid;
  grid-template-columns: 1fr 5mm 1fr 5mm 1fr 5mm 1fr;
  align-items: stretch;
  flex-shrink: 0;
}
.pipeline-step {
  padding: 10px 8px; text-align: center;
  background: linear-gradient(180deg, var(--ink-soft) 0%, var(--ink) 100%);
  border: 2px solid var(--teal);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.pipeline-step:first-child { border-radius: 10px 0 0 10px; }
.pipeline-step:last-child { border-radius: 0 10px 10px 0; }
.pipeline-step b { font-family: Nunito; font-size: 9.5px; font-weight: 800; color: var(--cyan); line-height: 1.2; }
.pipeline-step span { font-size: 7.5px; color: rgba(255,255,255,.82); margin-top: 4px; line-height: 1.4; max-width: 100%; }
.pipeline-chev {
  display: flex; align-items: center; justify-content: center;
  color: var(--teal); font-size: 14px; font-weight: 900;
  background: var(--white); line-height: 1;
}

/* ── Three-column cards (equal width & aligned heads) ── */
.elev-track {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.5mm; align-items: stretch;
  flex-shrink: 0;
}
.elev-card {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--g200);
  box-shadow: 0 2px 12px rgba(10,22,40,.06);
  display: flex; flex-direction: column;
  min-height: 52mm;
}
.elev-card-head { padding: 9px 8px; text-align: center; flex-shrink: 0; min-height: 36px; display: flex; flex-direction: column; justify-content: center; }
.elev-card-head.std { background: linear-gradient(135deg, var(--blue) 0%, #1e56a8 100%); }
.elev-card-head.jit { background: linear-gradient(135deg, var(--teal) 0%, #059669 100%); }
.elev-card-head.emg { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.elev-card-head.disc { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.elev-card-head.time { background: linear-gradient(135deg, var(--blue) 0%, #1e56a8 100%); }
.elev-card-head.scope { background: linear-gradient(135deg, var(--teal) 0%, #059669 100%); }
.elev-card-head.rev, .elev-card-head.rec { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.elev-card-head.pol { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); }
.elev-card-head b { font-family: Nunito; font-size: 11px; font-weight: 900; color: white; display: block; line-height: 1.15; }
.elev-card-head small {
  font-size: 6.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.78); display: block; margin-top: 2px;
}
.elev-card-body {
  padding: 10px 12px; background: var(--g50);
  flex: 1 1 auto; display: flex; flex-direction: column;
}
.elev-card-body p { font-size: 8.5px; color: var(--g600); line-height: 1.45; margin-bottom: 6px; }
.elev-card-body code { font-size: 7.5px; background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; }
.elev-card-body ul { list-style: none; margin: 0; padding: 0; }
.elev-card-body li {
  font-size: 8.5px; color: var(--g600); padding: 2px 0 2px 13px;
  position: relative; line-height: 1.45;
}
.elev-card-body li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--teal); font-weight: 900; font-size: 7px; }

/* ── 2×2 category grid ── */
.int-categories {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm;
  align-items: stretch;
  flex-shrink: 0;
}
.int-categories.cols-4 { grid-template-columns: 1fr 1fr; }
.int-cat {
  padding: 11px 13px; border-radius: 11px; border: 1px solid var(--g200);
  background: linear-gradient(135deg, var(--g50) 0%, var(--white) 100%);
  border-left: 4px solid var(--teal);
  display: flex; flex-direction: column;
  min-height: 44mm;
}
.int-cat h4 {
  font-family: Nunito; font-size: 10px; font-weight: 800; color: var(--ink);
  margin-bottom: 6px; line-height: 1.2;
  min-height: 2.4em;
}
.int-cat ul { list-style: none; margin: 0; padding: 0; }
.int-cat li {
  font-size: 8.5px; color: var(--g600); padding: 2px 0 2px 12px;
  position: relative; line-height: 1.45;
}
.int-cat li::before { content: "›"; position: absolute; left: 0; top: 2px; color: var(--blue); font-weight: 800; }

/* ── Persona chips ── */
.persona-row {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm;
  flex-shrink: 0;
}
.persona-chip {
  text-align: center; padding: 8px 5px; border-radius: 9px;
  background: var(--white); border: 1px solid var(--g200);
  box-shadow: 0 1px 6px rgba(10,22,40,.05);
  display: flex; flex-direction: column; justify-content: center; min-height: 14mm;
}
.persona-chip b { font-size: 8px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.persona-chip small { font-size: 7px; color: var(--g600); margin-top: 2px; line-height: 1.3; display: block; }

.showcase-foot {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  padding: 10px 14px; border-radius: 11px;
  background: linear-gradient(135deg, #f0fdfa 0%, var(--g50) 100%);
  border: 1px solid rgba(0,201,167,.35);
  flex-shrink: 0;
}
.showcase-foot p { font-size: 9.5px; color: var(--g600); line-height: 1.5; margin: 0; text-align: center; }
.showcase-foot strong { color: var(--ink); }

/* ── Two-column footer layout ── */
.two-col {
  margin-left: var(--page-x); margin-right: var(--page-x); width: var(--content-w);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3mm;
  align-items: stretch;
  flex-shrink: 0;
}
.two-col .tbl { width: 100%; margin: 0; }
.two-col > div { display: flex; flex-direction: column; gap: 2mm; min-width: 0; }

.checklist-box {
  border: 1px solid var(--g200); border-radius: 10px;
  padding: 10px 12px; background: var(--g50);
  display: flex; flex-direction: column; height: 100%;
}
.checklist-box .checklist-title {
  font-family: Nunito; font-size: 9px; font-weight: 800; color: var(--ink);
  padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--g200); letter-spacing: .02em;
}
.checklist-box .checklist { margin: 0; padding: 0; flex: 1; }

.checklist { list-style: none; }
.checklist li {
  font-size: 8.5px; color: var(--g600); padding: 4px 0 4px 18px;
  position: relative; line-height: 1.45; border-bottom: 1px solid var(--g100);
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 10px; height: 10px; border-radius: 2px;
  border: 2px solid var(--blue); background: var(--white);
}

.cap-meta {
  margin-left: var(--page-x); margin-right: var(--page-x);
  font-size: 8.5px; color: var(--g600);
  display: flex; gap: 16px; flex-wrap: wrap; flex-shrink: 0;
}
.cap-meta b { color: var(--ink-soft); }

/* ── Cover ── */
.doc-cover {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0 0 11mm;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.doc-cover-l {
  width: 58%;
  min-width: 0;
  padding: 14mm var(--page-x) 8mm 14mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.doc-cover-logo,
img.doc-cover-logo,
.doc-cover-logo img {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
  margin-bottom: 12px;
  object-fit: contain;
}
.doc-cover-r {
  width: 42%;
  min-height: 0;
  background: center/cover no-repeat;
  position: relative;
}
.doc-cover-r.hero-security { background-image: url("assets/hero-security.jpg"); }
.doc-cover-r.hero-cyber { background-image: url("assets/hero-cyber.jpg"); }
.doc-cover-r.hero-datacenter { background-image: url("assets/hero-datacenter.jpg"); }
.doc-cover-r.hero-cloud { background-image: url("assets/hero-cloud.jpg"); }
.hero-band-img.hero-security { background-image: url("assets/hero-security.jpg"); }
.hero-band-img.hero-cloud { background-image: url("assets/hero-cloud.jpg"); }
.hero-band-img.hero-connect {
  background-image: url("assets/session-connect.svg");
  background-size: contain; background-repeat: no-repeat;
  background-color: var(--ink-soft); background-position: center;
}
.hero-band-img.hero-access {
  background-image: url("assets/access-request.svg");
  background-size: contain; background-repeat: no-repeat;
  background-color: var(--ink-soft); background-position: center;
}
.doc-cover-r::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, transparent 40%);
}
.doc-cover-kicker {
  font-size: 8px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 10px;
}
.doc-cover h1 {
  font-family: Nunito; font-size: 2rem; font-weight: 900;
  color: white; line-height: 1.08; letter-spacing: -.03em;
}
.doc-cover h1 em { font-style: normal; color: var(--cyan); }
.doc-cover-sub { margin-top: 12px; font-size: 10.5px; color: var(--g400); line-height: 1.65; max-width: 95mm; }
.doc-cover-meta { margin-top: 14px; font-size: 8.5px; color: var(--g400); line-height: 1.75; }
.doc-cover-meta strong { color: var(--cyan); }

.mt-1 { margin-top: 1mm; }
.mt-2 { margin-top: 2mm; }

/* Screen preview: show full page content when browsing (print stays fixed A4) */
@media screen {
  .sheet {
    height: auto;
    max-height: none;
    min-height: 297mm;
    overflow: visible;
  }
  .sheet.doc-cover {
    height: 297mm;
    max-height: 297mm;
    min-height: 297mm;
    overflow: hidden;
  }
  .sheet-main {
    overflow: visible;
    flex: 1 1 auto;
  }
}

@media print {
  html, body { width: 210mm; margin: 0 !important; padding: 0 !important; background: white !important; }
  .sheet {
    width: 210mm; height: 297mm; max-height: 297mm; min-height: 297mm;
    margin: 0 !important; padding-bottom: 11mm;
    overflow: hidden; box-shadow: none; page-break-after: always;
  }
  .sheet-main { overflow: hidden; min-height: 0; }
  .sheet:last-of-type { page-break-after: auto; }
}
@page { size: A4 portrait; margin: 0; }