:root {
  --bg: #F7F5F1;
  --panel: #FAF3EA;
  --panel-strong: #F3E4CE;
  --card: #FFFFFF;
  --line: #E7DFD3;
  --line-strong: #D8CCB8;
  --ink: #1E2430;
  --ink-2: #3B4453;
  --muted: #6B6558;
  --bronze: #8B5A3C;
  --bronze-dark: #6E4530;
  --bronze-tint: rgba(139,90,60,0.10);
  --charcoal: #2E3440;
  --charcoal-2: #3B4453;
  --success: #4B7C4B;
  --success-bg: #D9E4D3;
  --warn: #9A6D2E;
  --warn-bg: #F3E4CE;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(30,36,48,0.04), 0 2px 6px rgba(30,36,48,0.05);
  --shadow-hover: 0 2px 4px rgba(30,36,48,0.06), 0 8px 20px rgba(30,36,48,0.09);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif Pro", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--bronze); text-decoration: none; }
a:hover { color: var(--bronze-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Header — exact match to the ConcordLink guides.
   Height, padding, gap, and typography ported directly from ConcordLink's
   styles.css so the eVault portals sit in the same visual family. */
.topnav {
  background: #FFFFFF;
  border-bottom: 1px solid #E7E8E1;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topnav-inner {
  height: 62px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { opacity: 0.85; }
.brand-logo {
  height: 28px;
  width: auto;
  display: block;
}
.breadcrumb {
  font-size: 14px;
  color: #638D94;
  letter-spacing: 0.02em;
  flex: 1;
}
.breadcrumb a {
  color: #052D34;
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb a:hover { color: #041C20; }
.portal-chip {  /* still supported if any legacy pages use it */
  display: none;
}
.nav-links {
  display: flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}
.nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}
.nav-links a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.nav-links a.active {
  background: var(--charcoal);
  color: #FFFFFF;
}
.nav-links a.active:hover { background: var(--charcoal-2); color: #FFFFFF; }

.hero {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 32px 40px;
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.hero .subhead {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 720px;
  margin: 0;
}
.audience-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bronze-dark);
  background: rgba(139,90,60,0.12);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.audience-internal .audience-tag { color: #3B4453; background: rgba(59,68,83,0.12); }

.searchbox {
  margin-top: 22px;
  position: relative;
  max-width: 560px;
}
.searchbox input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.searchbox input:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(139,90,60,0.15);
}
.searchbox svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 18px;
  height: 18px;
}

.layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 32px 80px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 28px; }
}

.sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.sidebar-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 8px;
  padding: 0 4px;
}
.sidebar-heading + .sidebar-heading { margin-top: 22px; }
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.sidebar li a {
  display: block;
  padding: 6px 10px;
  margin: 1px 0;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}
.sidebar li a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.sidebar li a.active {
  background: var(--bronze-tint);
  color: var(--bronze-dark);
  font-weight: 600;
}

.content {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px 56px 56px;
  box-shadow: var(--shadow);
  min-width: 0;
}
@media (max-width: 700px) { .content { padding: 28px 22px; } }
.content h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.page-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.content h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  margin: 38px 0 12px;
  padding-top: 4px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.content h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  margin: 28px 0 8px;
  color: var(--ink);
}
.content h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 22px 0 6px;
}
.content p { margin: 0 0 14px; }
.content ul, .content ol { margin: 0 0 16px; padding-left: 22px; }
.content li { margin: 4px 0; }
.content li > p { margin-bottom: 6px; }
.content strong { color: var(--ink); font-weight: 600; }
.content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}
.content code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--panel);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--bronze-dark);
}
.content pre {
  background: #F2EDE3;
  padding: 16px 18px;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
}
.content pre code {
  background: none;
  padding: 0;
  color: var(--ink);
}
.content table {
  border-collapse: collapse;
  width: 100%;
  margin: 18px 0 22px;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.content thead th {
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.content tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.content tbody tr:last-child td { border-bottom: 0; }
.content tbody tr:hover { background: rgba(139,90,60,0.03); }

.section-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 4px;
  color: var(--ink);
}
.section-title:first-of-type { margin-top: 0; }
.section-desc {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 18px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.card {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: transform 120ms, box-shadow 120ms, border-color 120ms;
  color: inherit;
  text-decoration: none;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
  text-decoration: none;
}
.card h3 {
  margin: 0 0 4px;
  color: var(--bronze);
  font-size: 15.5px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.portal-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 36px 0 8px;
}
@media (max-width: 700px) { .portal-switch { grid-template-columns: 1fr; } }
.portal-switch a {
  border: 1px solid var(--line);
  background: #FFFFFF;
  padding: 18px 20px;
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color 120ms, box-shadow 120ms;
  text-decoration: none;
}
.portal-switch a:hover {
  border-color: var(--bronze);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}
.portal-switch .switch-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 2px;
}
.portal-switch .switch-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.portal-switch .switch-tagline {
  font-size: 13.5px;
  color: var(--ink-2);
}

.foot {
  border-top: 1px solid var(--line);
  padding: 30px 32px 42px;
  color: var(--muted);
  font-size: 13px;
  max-width: 1240px;
  margin: 0 auto;
}
.foot-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.next-link {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
  color: var(--ink);
}
.next-link:hover { text-decoration: none; border-color: var(--bronze); }

.content img { max-width: 100%; height: auto; }
.content > img,
.content p > img { border-radius: 8px; border: 1px solid var(--line); }

/* Branded SVG illustrations rendered in place of Confluence attachments */
/* Figures scale their content to fit the box.
   - Wide screenshots (landscape) stretch to the container width.
   - Tall screenshots (portrait) are capped by max-height and centered.
   - Small/low-res images never upscale past their natural width. */
/* Figure sizing rules that make the box exactly hug the rendered image:
   - Default `display: block` with margin auto keeps the figure a block
     element; the image inside determines the visible width.
   - `width: fit-content` in modern browsers, plus a `-webkit-` fallback,
     tells the figure to shrink to the child's rendered width.
   - `max-width: 100%` prevents overflow of the content column.
   - The image itself uses `max-width: 100%` (never upscales past native
     pixels) and `display: block` (no baseline gap below the image). */
.content figure.il-figure {
  margin: 28px auto 32px;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}
.content figure.il-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
}
.content figure.il-figure.il-photo {
  background: #FFFFFF;
}
/* Image sizing rules of thumb:
   - Wide (landscape) screenshots downscale from high-res to fill the row.
     Downsampling stays sharp on high-DPI screens.
   - Tall (portrait) screenshots are height-capped.
   - Small screenshots render at native size, centered. Never upscaled.
   image-rendering hints keep bitmap downscaling as crisp as possible. */
.content figure.il-figure.il-photo img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Let the browser use its default high-quality bilinear/bicubic downscaling.
     Previously used crisp-edges, which in Chrome maps to pixelated and made
     downscaled screenshots look blocky/soft. */
  image-rendering: auto;
  border: 0;
  border-radius: 0;
}
/* Landscape screenshots render at natural size up to the container width. */
/* Every screenshot renders at its native pixel size (never upscaled) so
   every image stays crisp. The 640px cap means very large images downscale
   cleanly to the target width. Small images render at their true size in a
   correspondingly small box. */
.content figure.il-figure.il-photo {
  max-width: 640px;
}
.content figure.il-figure.il-photo img {
  width: auto;
  max-width: 100%;
  height: auto;
}
.content figure.il-figure.il-photo.is-portrait {
  max-width: 420px;
}
.content figure.il-figure.il-photo.is-portrait img {
  max-height: 620px;
}
.content figure.il-figure figcaption {
  padding: 10px 16px 14px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: #FAFAF7;
}

.no-match {
  color: var(--muted);
  font-style: italic;
  padding: 20px 0;
}

.root-shell { max-width: 1080px; margin: 0 auto; padding: 40px 32px 80px; }