:root {
  --acq-blue: #4695c0;
  --acq-blue-alt: #4694bf;
  --acq-charcoal: #272732;
  --acq-orange: #e07a2c;
  --acq-red: #e2325a;
  --acq-bg: #f7fafc;
  --acq-surface: #ffffff;
  --acq-border: #e2e2e2;
  --acq-text: #32373c;
  --acq-muted: #6b7280;
  --acq-shadow: 0 18px 40px rgba(39, 39, 50, 0.08);
  --sidebar-width: 286px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--acq-text);
  background:
    radial-gradient(circle at top right, rgba(70,149,192,.12), transparent 26%),
    linear-gradient(180deg, #fbfdff 0%, var(--acq-bg) 100%);
}

a { color: var(--acq-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1f2430 0%, var(--acq-charcoal) 100%);
  color: #fff;
  padding: 28px 22px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.brand-lockup img { width: 120px; height: auto; }
.brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sidebar h1 {
  margin: 16px 0 8px;
  font-size: 28px;
  line-height: 1.15;
}

.sidebar p {
  color: rgba(255,255,255,.72);
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
}

.nav-group { margin-top: 28px; }
.nav-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  border-radius: 14px;
  color: rgba(255,255,255,.82);
  background: transparent;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nav-link:hover,
.nav-link.active {
  background: linear-gradient(90deg, rgba(70,149,192,.2), rgba(70,149,192,.08));
  color: #fff;
  text-decoration: none;
  transform: translateX(2px);
}

.nav-link:hover .nav-index,
.nav-link.active .nav-index {
  background: rgba(70,149,192,.28);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.nav-index {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  color: rgba(255,255,255,.76);
  flex: 0 0 auto;
}

.sidebar-footer {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.6;
}

.main {
  padding: 32px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 24px;
  align-items: stretch;
}

.hero-card,
.panel,
.callout,
.metric-card,
.placeholder,
details.accordion {
  background: var(--acq-surface);
  border: 1px solid var(--acq-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--acq-shadow);
}

.hero-card {
  padding: 28px;
}
.hero-card h2 {
  margin: 14px 0 10px;
  font-size: 40px;
  line-height: 1.06;
}
.hero-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--acq-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 14px;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.button {
  background: var(--acq-blue);
  color: #fff;
}
.button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
  opacity: .92;
  text-decoration: none;
}
.ghost-button {
  border: 1px solid var(--acq-border);
  color: var(--acq-text);
  background: #fff;
}

.hero-side {
  display: grid;
  gap: 16px;
}
.metric-card {
  padding: 22px;
}
.metric-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acq-muted);
}
.metric-card strong {
  display: block;
  font-size: 34px;
  line-height: 1.05;
  margin-bottom: 8px;
}
.metric-card span {
  color: var(--acq-muted);
  font-size: 14px;
  line-height: 1.6;
}

.section {
  margin-top: 26px;
  scroll-margin-top: 24px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}
.section-header h3 {
  margin: 0;
  font-size: 28px;
}
.section-header p {
  margin: 6px 0 0;
  color: var(--acq-muted);
  max-width: 720px;
  line-height: 1.6;
}

.grid-2,
.grid-3 { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel {
  padding: 22px;
}
.panel h4 {
  margin: 0 0 10px;
  font-size: 18px;
}
.panel p,
.panel li {
  color: var(--acq-muted);
  line-height: 1.7;
}
.panel ul {
  padding-left: 18px;
  margin: 10px 0 0;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(70,149,192,.12);
  color: var(--acq-blue);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
}
.kicker.orange { background: rgba(224,122,44,.14); color: var(--acq-orange); }
.kicker.red { background: rgba(226,50,90,.12); color: var(--acq-red); }

.step-list {
  display: grid;
  gap: 14px;
}
.step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--acq-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.step-number {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(70,149,192,.12);
  color: var(--acq-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}
.step h5 { margin: 0 0 6px; font-size: 18px; }
.step p { margin: 0; color: var(--acq-muted); line-height: 1.65; }

.placeholder {
  padding: 18px;
  border-style: dashed;
  background: linear-gradient(180deg, rgba(70,149,192,.04), rgba(70,149,192,.01));
}
.placeholder.large {
  min-height: 220px;
}
.placeholder.visual {
  display: grid;
  gap: 14px;
}
.placeholder-frame {
  min-height: 150px;
  border: 1px dashed rgba(70,149,192,.42);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(70,149,192,.06), rgba(224,122,44,.06)),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.8),
      rgba(255,255,255,.8) 14px,
      rgba(70,149,192,.03) 14px,
      rgba(70,149,192,.03) 28px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--acq-muted);
  font-size: 14px;
  line-height: 1.6;
  padding: 18px;
}
.placeholder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.placeholder-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(70,149,192,.1);
  color: var(--acq-blue);
  font-size: 12px;
  font-weight: 700;
}
.annotation-list {
  margin: 0;
  padding-left: 18px;
  color: var(--acq-muted);
  font-size: 14px;
  line-height: 1.7;
}
.annotation-list li + li {
  margin-top: 6px;
}
.placeholder-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.visual-slot {
  display: grid;
  gap: 12px;
}
.doc-shot {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(70,149,192,.18);
  box-shadow: 0 10px 30px rgba(39, 39, 50, 0.08);
  display: block;
  background: #fff;
}
.doc-shot.diagram-shot {
  max-height: 500px;
}
.shot-fallback {
  display: none;
}
.visual-slot.missing-shot .shot-fallback {
  display: flex;
}
.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(39,39,50,.05);
  color: var(--acq-muted);
  font-size: 12px;
  font-weight: 700;
}
.placeholder strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}
.placeholder span {
  color: var(--acq-muted);
  line-height: 1.6;
  font-size: 14px;
}

.checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--acq-blue);
  flex: 0 0 auto;
}

.callout {
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(70,149,192,.08), rgba(224,122,44,.08));
}
.callout strong { display: block; margin-bottom: 6px; }
.callout p { margin: 0; color: var(--acq-muted); line-height: 1.7; }

.table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--acq-border);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.table-wrap th,
.table-wrap td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--acq-border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
}
.table-wrap th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--acq-muted);
  background: #fafcfd;
}

.accordion {
  padding: 0;
  overflow: hidden;
}
.accordion + .accordion {
  margin-top: 14px;
}
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  color: var(--acq-blue);
  font-size: 22px;
  line-height: 1;
}
.accordion[open] summary::after { content: "−"; }
.accordion-body {
  padding: 0 22px 22px;
  color: var(--acq-muted);
  line-height: 1.75;
}

.footer-note {
  margin-top: 28px;
  color: var(--acq-muted);
  font-size: 13px;
}

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--acq-border);
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
}

.topbar button {
  border: 1px solid var(--acq-border);
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .hero, .grid-2, .grid-3, .placeholder-grid { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .doc-shot,
  .doc-shot.diagram-shot {
    max-height: 420px;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    width: min(88vw, 320px);
    z-index: 30;
    transition: transform .25s ease;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .topbar { display: flex; }
  .main { padding: 20px; }
}

.stack-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.stack-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  border: 1px solid var(--acq-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--acq-shadow);
  padding: 22px;
}
.stack-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acq-muted);
  margin-bottom: 10px;
}
.stack-amount {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--acq-charcoal);
  margin-bottom: 10px;
}
.stack-detail {
  color: var(--acq-muted);
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 960px) {
  .stack-cards { grid-template-columns: 1fr; }
}