/* Brippo Docs — Mid-fi design system
   Palette derived from the dashboard screenshot: deep navy header (#1a2940-ish)
   with white text and warm orange accent for status pills. */

/* Shared video placeholder — used across Hyvä guides */
.video-placeholder {
  margin: 24px 0 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e3e8ef;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(83,123,219,0.18), transparent 60%),
    radial-gradient(100% 80% at 80% 80%, rgba(125,80,180,0.18), transparent 60%),
    linear-gradient(180deg, #f4f6fa, #ffffff);
}
.video-placeholder .vp-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #4a5568; }
.video-placeholder .vp-play {
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff; border: 1px solid #e3e8ef;
  box-shadow: 0 6px 16px rgba(15,26,46,0.10);
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.video-placeholder .vp-play::before {
  content: ""; width: 0; height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #1d6fb8;
  margin-left: 4px;
}
.video-placeholder .vp-title { font-size: 15px; font-weight: 600; color: #0f1a2e; letter-spacing: -0.005em; }
.video-placeholder .vp-sub { margin-top: 4px; font-size: 12.5px; color: #94a0ae; letter-spacing: 0.04em; text-transform: uppercase; }
.video-placeholder .vp-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background: linear-gradient(180deg, transparent, rgba(15,26,46,0.85));
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
}
.video-placeholder .vp-time {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.85);
  background: rgba(15,26,46,0.6); padding: 2px 6px; border-radius: 3px;
}
.video-placeholder .vp-track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); position: relative; overflow: hidden; }
.video-placeholder .vp-track::before { content: ""; position: absolute; left: 0; top: 0; width: 28%; height: 100%; background: rgba(255,255,255,0.85); }


:root {
  /* Brand */
  --brippo-navy-900: #062a45;       /* deepest header */
  --brippo-navy-800: #0c3c60;       /* product topbar / app shell */
  --brippo-navy-700: #144f7d;
  --brippo-navy-50:  #eef4f9;
  --brippo-blue-700: #155a9e;
  --brippo-blue-600: #1d6fb8;       /* primary action — matches docs accent */
  --brippo-blue-500: #2c87d6;
  --brippo-blue-400: #5aa6e8;
  --brippo-blue-100: #d8ebfa;
  --brippo-blue-50:  #eff7fd;
  --brippo-yellow:   #f5b800;       /* "docs" wordmark color */

  /* Status accents (from dashboard pill) */
  --brippo-orange:   #f59c2a;
  --brippo-orange-100: #fff3e0;
  --brippo-success:  #2f9e6a;
  --brippo-success-100: #e6f5ee;
  --brippo-danger:   #d23b3b;
  --brippo-danger-100: #fdecec;

  /* Neutrals — cool gray, slight blue cast */
  --ink-900: #0b1220;
  --ink-800: #1a2333;
  --ink-700: #2c3850;
  --ink-600: #4a5670;
  --ink-500: #6b7691;
  --ink-400: #97a0b5;
  --ink-300: #c5cad8;
  --ink-200: #e2e6ef;
  --ink-100: #f1f3f8;
  --ink-50:  #f8f9fc;
  --paper:   #ffffff;

  /* Glass surfaces — used carefully, never below text */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 1px 2px rgba(15,26,46,0.04), 0 8px 24px rgba(15,26,46,0.06);

  /* Type */
  --font-sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --shadow-sm: 0 1px 2px rgba(15,26,46,0.06);
  --shadow-md: 0 2px 6px rgba(15,26,46,0.08), 0 1px 2px rgba(15,26,46,0.04);
  --shadow-lg: 0 12px 32px rgba(15,26,46,0.10), 0 2px 6px rgba(15,26,46,0.06);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--ink-800);
  background: var(--ink-50);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Ambient gradient backdrop — toned down to a single soft blue wash */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    /* one soft, low-saturation blue blob, top-right */
    radial-gradient(700px 520px at 92% 10%, rgba(70,120,190,0.14), transparent 70%),
    /* base wash */
    linear-gradient(180deg, #eef3f9 0%, #f3f6fa 60%, #f6f8fc 100%);
  z-index: 0;
}
body { background: #f3f7fc; }

/* Layout shell */
.shell {
  display: grid;
  grid-template-columns: 260px 1fr 220px;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "side   main   toc";
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Top bar — modern navy with subtle vertical gradient for depth (solid, no transparency) */
.topbar {
  grid-area: topbar;
  background: linear-gradient(180deg, #0e4368 0%, #082d4c 100%);
  color: #fff;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 0 rgba(15,42,68,0.06),
    0 8px 24px rgba(15,42,68,0.08);
  position: sticky; top: 0; z-index: 10;
}
/* Brippo wordmark — uses the supplied logo image directly so it matches exactly. */
.brand {
  display: flex; align-items: center;
  text-decoration: none;
  height: 100%;
  padding: 0 4px;
}
.brand img.logo {
  height: 26px;
  width: auto;
  display: block;
}
.topnav { display: flex; gap: 4px; margin-left: 8px; }
.topnav a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: 6px;
}
.topnav a.active { color: #fff; background: rgba(255,255,255,0.08); }
.topnav a:hover { color: #fff; }

/* Search — right-aligned, comfortable docs-pattern size */
.search {
  margin-left: auto;
  width: 280px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.search:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }
.search svg { opacity: 0.6; flex-shrink: 0; }
.search .placeholder { flex: 1; color: rgba(255,255,255,0.55); }
.search .kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Sidebar — glassmorphism panel that floats over the ambient blobs */
.sidebar {
  grid-area: side;
  margin: 16px 0 16px 16px;
  padding: 18px 16px 40px;
  overflow-y: auto;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 12px 32px rgba(15,42,68,0.08),
    0 2px 6px rgba(15,42,68,0.04);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 88px);
  /* Slim, flush-with-panel scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(15,42,68,0.18) transparent;
}
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(15,42,68,0.18);
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(15,42,68,0.32);
}
/* Section header — uppercase eyebrow with a subtle top rule for clear group boundary */
.side-group {
  display: flex; align-items: center;
  margin: 22px 0 6px;
  padding: 10px 8px 0;
  border-top: 1px solid var(--ink-200);
}
.side-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.side-group .side-group-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 700;
}
/* Page item — tighter, lighter, with clear active state */
.side-item {
  display: block;
  padding: 6px 10px;
  margin: 1px 0;
  font-size: 13.5px;
  color: var(--ink-700);
  font-weight: 400;
  text-decoration: none;
  border-radius: 6px;
  position: relative;
  line-height: 1.4;
}
.side-item:hover { background: rgba(255,255,255,0.6); color: var(--ink-900); }
.side-item.active {
  background: rgba(255,255,255,0.85);
  color: var(--brippo-blue-600);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,42,68,0.06);
}
.side-item.active::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--brippo-blue-600);
  border-radius: 2px;
}
.side-item .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--brippo-blue-100);
  color: var(--brippo-blue-600);
  padding: 1px 5px; border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* Main column */
.main {
  grid-area: main;
  padding: 18px 48px 80px;
  min-width: 0;
  max-width: 880px;
  /* Center the main column inside its grid cell so any leftover space
     (when the cell is wider than 880px) is split evenly left/right.
     Without this, the surplus pools on the right and the visual gutter
     to the TOC ends up larger than the gutter to the sidebar. */
  margin-inline: auto;
}
.main.full { max-width: none; padding-right: 32px; }

.crumbs {
  display: flex; gap: 6px; align-items: center;
  font-size: 12px; color: var(--ink-500);
  margin-bottom: 14px;
  font-family: var(--font-sans);
}
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--brippo-blue-600); }
.crumbs .sep { opacity: 0.5; }
.crumbs .here { color: var(--ink-800); font-weight: 500; }

h1.page-title {
  font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 8px;
  line-height: 1.1;
}
.lede {
  font-size: 17px; line-height: 1.55;
  color: var(--ink-600);
  margin: 0 0 24px;
  max-width: 680px;
}
h2.section-title {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 32px 0 12px;
  scroll-margin-top: 80px;
}
h3.sub-title {
  font-size: 15px; font-weight: 600;
  color: var(--ink-800);
  margin: 20px 0 8px;
}
p { line-height: 1.65; color: var(--ink-700); margin: 0 0 14px; }

/* Right TOC */
.toc {
  grid-area: toc;
  /* Symmetry: 0 left padding so the gap to main is exactly main's 48px
     right padding. 16px right margin mirrors the sidebar's 16px left margin
     so both glass panels sit equidistant from the viewport edges. */
  padding: 28px 16px 28px 0;
  font-size: 12px;
  position: sticky; top: 56px;
  align-self: start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}
.toc-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  margin-bottom: 10px;
}
.toc a {
  display: block;
  padding: 4px 10px;
  color: var(--ink-600);
  text-decoration: none;
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.toc a:hover { color: var(--brippo-blue-600); }
.toc a.active {
  color: var(--brippo-blue-600);
  font-weight: 600;
  border-left-color: var(--brippo-blue-600);
}

/* Components */
.card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.card:hover {
  border-color: var(--ink-300);
  box-shadow: var(--shadow-md);
}
.card.linkcard { cursor: pointer; }
.card.linkcard:hover { transform: translateY(-1px); border-color: var(--brippo-blue-400); }
.card .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Feature card with leading icon — replaces the misleading 01/02/03 step numbers */
.feature-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.feature-card:hover { border-color: var(--ink-300); box-shadow: var(--shadow-md); }
a.feature-card,
a.feature-card:hover,
a.feature-card:visited { text-decoration: none; color: inherit; }
a.feature-card h3,
a.feature-card p { text-decoration: none; }
.feature-card .ficon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--brippo-blue-50);
  color: var(--brippo-blue-600);
  display: grid; place-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--brippo-blue-100);
}
.feature-card h3 {
  margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink-900);
  letter-spacing: -0.005em;
}
.feature-card p {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-600);
}
.card h3 {
  margin: 0 0 4px;
  font-size: 15px; font-weight: 600;
  color: var(--ink-900);
}
.card p { font-size: 13px; color: var(--ink-600); margin: 0; line-height: 1.5; }
.card .arrow {
  margin-top: 12px;
  font-size: 13px; color: var(--brippo-blue-600);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; transform: translateX(-2px);
  transition: opacity 0.18s, transform 0.18s;
}
.card.linkcard:hover .arrow { opacity: 1; transform: translateX(0); }
/* Refined “where to next” cards — cleaner hierarchy, less visual noise */
.routecard {
  display: block;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.routecard:hover {
  border-color: var(--brippo-blue-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.routecard.featured {
  background: linear-gradient(180deg, var(--brippo-blue-50) 0%, var(--paper) 100%);
  border-color: var(--brippo-blue-100);
}
.routecard .audience {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-500);
  margin-bottom: 10px;
}
.routecard.featured .audience { color: var(--brippo-blue-600); }
.routecard h3 {
  margin: 0 0 6px; font-size: 16px; font-weight: 600;
  color: var(--ink-900); letter-spacing: -0.01em;
}
.routecard p {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-600);
}
.routecard .go {
  margin-top: 14px;
  font-size: 13px; font-weight: 500;
  color: var(--brippo-blue-600);
  display: inline-flex; align-items: center; gap: 4px;
}
.routecard .go svg { transition: transform 0.18s; }
.routecard:hover .go svg { transform: translateX(2px); }

/* Glass card variant */
.card.glass {
  background: var(--glass-bg-strong);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 16px;
  border-radius: 7px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
  color: var(--ink-800);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:hover { border-color: var(--ink-300); box-shadow: var(--shadow-sm); }
.btn.primary {
  background: var(--brippo-blue-600);
  border-color: var(--brippo-blue-600);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn.primary:hover {
  background: var(--brippo-blue-500);
  border-color: var(--brippo-blue-500);
  box-shadow: 0 2px 8px rgba(44,95,184,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn.lg { padding: 11px 20px; font-size: 15px; border-radius: 8px; }
.btn.sm { padding: 6px 11px; font-size: 12px; }

/* Callouts */
.callout {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: 14px; line-height: 1.55;
  margin: 16px 0;
}
.callout .icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.callout strong { display: block; margin-bottom: 2px; color: var(--ink-900); font-size: 13px; }
.callout.info { background: var(--brippo-blue-50); border-color: var(--brippo-blue-100); color: var(--ink-700); }
.callout.info .icon { background: var(--brippo-blue-600); color: #fff; }
.callout.tip { background: var(--brippo-success-100); border-color: #cfe9da; color: var(--ink-700); }
.callout.tip .icon { background: var(--brippo-success); color: #fff; }
.callout.warn { background: var(--brippo-orange-100); border-color: #fadcb0; color: var(--ink-700); }
.callout.warn .icon { background: var(--brippo-orange); color: #3a2200; }
.callout.danger { background: var(--brippo-danger-100); border-color: #f7cdcd; color: var(--ink-700); }
.callout.danger .icon { background: var(--brippo-danger); color: #fff; }

/* Code block */
.code {
  background: var(--brippo-navy-900);
  color: #d8e1f5;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  position: relative;
  border: 1px solid rgba(255,255,255,0.05);
}
.code .lang {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.code .tok-key { color: #82b1ff; }
.code .tok-str { color: #ffb88c; }
.code .tok-com { color: #6c7a96; font-style: italic; }
.code .tok-fn  { color: #c4f0a4; }

/* ── Copy-to-clipboard button on code blocks ──────────────────────
   Injected by new-copy-code.js into every code block. Sits in the
   top-right corner; the language tag shifts left to make room. */
.copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.code:hover .copy-btn,
pre.code:hover .copy-btn,
.api-codebox:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}
.copy-btn.copied {
  color: #00D4B8;
  border-color: rgba(0,212,184,0.4);
  background: rgba(0,212,184,0.12);
  opacity: 1;
}
/* When a copy button is present, nudge the language tag left so they
   don't overlap in the corner. */
.code.has-copy .lang { right: 44px; top: 13px; }
/* The API codebox head is flex; let the button sit at the far right. */
.api-codebox-head.has-copy-head { position: relative; }
.api-codebox-head.has-copy-head .copy-btn {
  position: static;
  margin-left: auto;
  opacity: 1;             /* head is always visible, so show it always */
}
/* Touch devices have no hover — always show the button. */
@media (hover: none) {
  .copy-btn { opacity: 1; }
}

/* Table */
table.docs {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
table.docs th {
  text-align: left;
  padding: 9px 12px;
  background: var(--ink-50);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-200);
}
table.docs td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-700);
  vertical-align: top;
}
table.docs tr:last-child td { border-bottom: 0; }
table.docs td.mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-800); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tag.ok { background: var(--brippo-success-100); color: var(--brippo-success); }
.tag.bad { background: var(--brippo-danger-100); color: var(--brippo-danger); }
.tag.neutral { background: var(--ink-100); color: var(--ink-600); }

/* Hero (About page) — sits flush with topbar, no gradient band of its own (the body backdrop handles ambience) */
.hero {
  display: block;
  margin: 0 0 32px 0;
  padding: 8px 0 12px 0;
  position: relative;
}
.hero h1 {
  font-size: 44px; font-weight: 700; letter-spacing: -0.028em;
  color: var(--ink-900); line-height: 1.05; margin: 0 0 16px;
  max-width: 720px;
}
.hero .lede { font-size: 17px; margin-bottom: 22px; max-width: 640px; }
.hero .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
/* Realistic Brippo dashboard mock — mirrors the actual Payments page */
.dash-mock {
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ink-200);
  box-shadow: 0 18px 48px rgba(15,26,46,0.18), 0 4px 12px rgba(15,26,46,0.06);
  font-size: 12px;
  color: var(--ink-800);
  position: relative;
  width: 100%;
}
.dash-mock .dash-topbar {
  height: 44px;
  background: var(--brippo-navy-800);
  display: flex; align-items: center; padding: 0 16px;
}
.dash-mock .dash-account {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 3px 8px;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.dash-mock .dash-account:hover,
.dash-mock .dash-account[aria-expanded='true'] {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
.dash-mock .dash-account .acct-icon {
  width: 14px; height: 11px; border-radius: 1px;
  background: linear-gradient(180deg, #c5cad8 60%, #97a0b5);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.dash-mock .dash-account .acct-icon::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 2px; height: 1px; background: #6b7691;
}
.dash-mock .dash-account .acct-meta {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
}
.dash-mock .dash-account .acct-meta-row {
  display: flex; align-items: center; gap: 6px;
}
.dash-mock .dash-account .acct-name { font-weight: 600; color: #fff; line-height: 1.25; font-size: 11px; }
.dash-mock .dash-account .test-pill {
  background: var(--brippo-orange); color: #3a2200;
  padding: 1px 5px; border-radius: 3px;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em;
}
.dash-mock .dash-account .acct-id {
  color: rgba(255,255,255,0.5); font-family: var(--font-mono); font-size: 9.5px;
  line-height: 1.25;
}
.dash-mock .dash-account .acct-caret {
  margin-left: 2px;
  color: rgba(255,255,255,0.55);
  font-size: 9px;
  transition: transform 0.15s, color 0.12s;
}
.dash-mock .dash-account:hover .acct-caret,
.dash-mock .dash-account[aria-expanded='true'] .acct-caret { color: #fff; }
.dash-mock .dash-account[aria-expanded='true'] .acct-caret { transform: rotate(180deg); }

/* ── Account switcher dropdown ─────────────────────────────────
   Appears below the .dash-account button. Each item shows the
   account name, ID and an optional Test Mode pill; the active
   one is highlighted in navy with a SELECTED state-pill, the
   others reveal a SELECT pill on hover. */
.dash-mock .acct-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  z-index: 40;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15,26,42,0.14);
  padding: 4px;
  cursor: default;
  color: var(--ink-700);
  animation: acct-pop 0.16s ease-out;
}
@keyframes acct-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-mock .acct-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.dash-mock .acct-item:hover { background: var(--ink-100); }
.dash-mock .acct-item.is-selected {
  background: var(--brippo-navy-800);
  color: rgba(255,255,255,0.85);
}
.dash-mock .acct-item.is-selected:hover { background: var(--brippo-navy-800); }
.dash-mock .acct-item-meta {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1 1 auto;
}
.dash-mock .acct-item-row { display: flex; align-items: center; gap: 8px; }
.dash-mock .acct-item-name {
  font-size: 12px; font-weight: 600; color: var(--ink-900);
}
.dash-mock .acct-item.is-selected .acct-item-name { color: #fff; }
.dash-mock .acct-item-id {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500);
}
.dash-mock .acct-item.is-selected .acct-item-id { color: rgba(255,255,255,0.55); }
.dash-mock .acct-item .test-pill.tp-light {
  background: rgba(247,134,55,0.18);
  color: #b15a1a;
}
.dash-mock .acct-item.is-selected .test-pill.tp-light {
  background: rgba(247,134,55,0.25);
  color: #ffb37a;
}
.dash-mock .acct-state-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.dash-mock .acct-state-pill.selected {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.9);
}
.dash-mock .acct-state-pill.select {
  background: var(--ink-100);
  color: var(--ink-600);
  opacity: 0;
  transition: opacity 0.12s;
}
.dash-mock .acct-item:hover .acct-state-pill.select { opacity: 1; }
.dash-mock .acct-actions {
  display: flex; flex-direction: column;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--ink-200);
}
.dash-mock .acct-action {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.12s;
}
.dash-mock .acct-action.add { color: var(--brippo-blue-600); }
.dash-mock .acct-action.remove { color: #d4452a; }
.dash-mock .acct-action:hover { background: var(--ink-100); }
.dash-mock .dash-user {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  color: var(--brippo-navy-800);
  cursor: pointer;
  transition: opacity 0.12s;
}
.dash-mock .dash-user:hover { opacity: 0.85; }
.dash-mock .dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--paper);
  font-size: 10px;
  color: var(--ink-600);
}
.dash-mock .dash-tabs .t {
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.dash-mock .dash-tabs .t:hover { background: var(--ink-100); color: var(--ink-900); }
.dash-mock .dash-tabs .t.on {
  font-weight: 600;
  color: #fff;
  background: var(--brippo-navy-700);
  border-color: var(--brippo-navy-700);
}
.dash-mock .dash-tabs .t.on:hover { background: var(--brippo-navy-700); color: #fff; }
.dash-mock .dash-page-head {
  padding: 16px 18px 12px;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
}
.dash-mock .dash-page-head .ph-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--ink-900);
}
.dash-mock .dash-page-head .ph-actions { margin-left: auto; display: flex; gap: 8px; }
.dash-mock .dash-page-head .ph-btn {
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 4px;
  border: 1px solid var(--ink-300);
  background: var(--paper); color: var(--ink-700);
}
.dash-mock .dash-page-head .ph-btn.primary {
  background: var(--brippo-navy-800); color: #fff; border-color: var(--brippo-navy-800);
}
.dash-mock .dash-filters {
  display: flex; gap: 6px;
  padding: 10px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-100);
  flex-wrap: nowrap;
  overflow: hidden;
}
.dash-mock .dash-filters .f {
  font-size: 11px; padding: 4px 9px;
  border: 1px solid var(--ink-200);
  border-radius: 3px;
  color: var(--ink-600);
}
.dash-mock .dash-filters .f.on {
  border-color: var(--brippo-blue-600); color: var(--brippo-blue-600); font-weight: 600;
}
.dash-mock table.dash-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.dash-mock .dash-table th {
  text-align: left;
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
  color: var(--ink-500);
  text-transform: uppercase;
  padding: 8px 10px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  padding: 10px 14px;
  color: var(--ink-500);
  text-transform: uppercase;
}
.dash-mock .dash-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
  white-space: nowrap;
}
.dash-mock .dash-amount { font-weight: 600; color: var(--ink-900); font-family: var(--font-sans); }
.dash-mock .dash-amount .ccy { color: var(--ink-500); font-weight: 500; margin-left: 2px; }
.dash-mock .status {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 3px;
  margin-left: 6px;
}
.dash-mock .status.ok { background: var(--brippo-success-100); color: var(--brippo-success); }
.dash-mock .status.fail { background: var(--brippo-danger-100); color: var(--brippo-danger); }
.dash-mock .status.uncap { background: var(--ink-100); color: var(--ink-600); }
.dash-mock .card-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-700);
}
.dash-mock .card-chip .brand {
  display: inline-block;
  background: #1a1f71; color: #fff; font-family: var(--font-sans); font-weight: 800;
  font-size: 9px; padding: 2px 4px; border-radius: 2px;
  font-size: 8px; padding: 1px 4px; border-radius: 2px;
  font-style: italic; letter-spacing: 0.02em;
}
.dash-mock .flag {
  display: inline-block; width: 16px; height: 11px; border-radius: 1px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.05);
}
.dash-mock .flag.us {
  background:
    linear-gradient(180deg,
      #b22 0 1px, #fff 1px 2px, #b22 2px 3px, #fff 3px 4px,
      #b22 4px 5px, #fff 5px 6px, #b22 6px 7px, #fff 7px 8px,
      #b22 8px 9px, #fff 9px 10px);
  position: relative;
}
.dash-mock .flag.us::before {
  content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 5px; background: #1a3270;
}
.dash-mock .flag.ie {
  background: linear-gradient(90deg, #169b62 33%, #fff 33% 66%, #ff883e 66%);
}
.dash-mock .flag.gb {
  background: #012169 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><path d='M0 0L60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/><path d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/><path d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/></svg>") center/cover;
}
.dash-mock .customer { color: var(--ink-700); font-size: 12px; }
.dash-mock .ref { font-family: var(--font-mono); color: var(--ink-600); font-size: 11.5px; }


/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* Capability section */
.cap-section { margin-bottom: 28px; }
.cap-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.cap-head .num {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--brippo-blue-600);
  font-weight: 600;
  background: var(--brippo-blue-50);
  padding: 3px 7px; border-radius: 4px;
  letter-spacing: 0.06em;
}
.cap-head .rule { flex: 1; height: 1px; background: var(--ink-200); }

/* Demo store — single full-width card, screenshot on top */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 8px;
}
.demo-store {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.demo-store .demo-store-body {
  display: flex; flex-direction: column;
  min-width: 0;
}
.demo-store-head {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.platform-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.01em;
}
.platform-tag.platform-magento {
  background: #fdf0e8; color: #c84e1f; border: 1px solid #f6d6c1;
}
.platform-tag.platform-woo {
  background: #f0e8f7; color: #6e3b9c; border: 1px solid #d8c8e8;
}
.platform-meta {
  font-size: 11.5px; color: var(--ink-500);
  font-family: var(--font-mono);
}
.demo-store .demo-thumb {
  width: 100%;
  aspect-ratio: 1000 / 500;
  border-radius: 10px;
  margin-bottom: 0;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,26,46,0.12);
  background: #0f1a2e;
  border: 1px solid rgba(255,255,255,0.18);
}
.demo-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
.demo-thumb .thumb-url {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.96);
  background: rgba(0,0,0,0.42);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.demo-store h3 {
  margin: 0 0 6px;
  font-size: 17px; font-weight: 600;
  color: var(--ink-900); letter-spacing: -0.01em;
}
.demo-store p {
  margin: 0 0 16px;
  font-size: 13.5px; color: var(--ink-600); line-height: 1.5;
}
.demo-actions {
  margin-top: auto;
  display: flex; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 720px) {
  .demo-thumb-img { margin: 10px; width: calc(100% - 20px); }
}

/* Demo store CTA (legacy single CTA) */
.demo-cta {
  display: flex; gap: 18px; align-items: center;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(44,95,184,0.04), rgba(255,255,255,0)),
    var(--glass-bg-strong);
  border: 1px solid rgba(44,95,184,0.18);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 22px;
}
.demo-thumb {
  width: 160px; height: 100px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brippo-navy-800), var(--brippo-blue-600));
  flex-shrink: 0;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,26,46,0.2);
}
.demo-thumb::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/100% 14px,
    linear-gradient(90deg, transparent calc(100% - 32px), rgba(255,255,255,0.06) calc(100% - 32px));
}

/* Step list */
.steps { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
}
.step .n {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brippo-blue-50);
  color: var(--brippo-blue-600);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--brippo-blue-100);
}
.step .body { font-size: 13.5px; color: var(--ink-700); line-height: 1.5; }
.step .body strong { color: var(--ink-900); display: block; margin-bottom: 2px; font-size: 13px; }

/* Credentials block */
.creds {
  background: var(--ink-900);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #d8e1f5;
  display: grid;
  gap: 4px;
}
.creds .row { display: grid; grid-template-columns: 50px 1fr; gap: 12px; }
.creds .k { color: #6c7a96; }
.creds .v { color: #fff; }

/* Footer pagination */
.page-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--ink-200);
}
.page-nav a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--paper);
  transition: all 0.15s;
}
.page-nav a:hover { border-color: var(--brippo-blue-400); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.page-nav a .label { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.page-nav a .title { font-size: 14px; color: var(--ink-900); font-weight: 600; margin-top: 3px; }
.page-nav .next { text-align: right; }

/* Page tabs (used in feature pages later) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ink-200); margin: 18px 0; }
.tabs a {
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-600); text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a.on { color: var(--brippo-blue-600); border-bottom-color: var(--brippo-blue-600); font-weight: 600; }
.tabs a:hover { color: var(--brippo-blue-600); }

/* Page tabs for example switcher — sits below topbar, over the main content
   so it never overlaps the navy chrome's search / avatar */
.page-switcher {
  position: fixed; bottom: 20px; right: 20px; z-index: 50;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 999px;
  padding: 4px;
  display: flex; gap: 2px;
}
.page-switcher::before {
  content: "PREVIEW";
  position: absolute; top: -10px; left: 12px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--brippo-navy-800); color: #fff;
  padding: 2px 7px; border-radius: 3px;
}
.page-switcher button {
  font: inherit; font-size: 12px; font-weight: 600;
  background: transparent; border: 0;
  padding: 6px 12px; border-radius: 999px;
  color: var(--ink-600); cursor: pointer;
}
.page-switcher button.on { background: var(--brippo-navy-800); color: #fff; }

/* ── Responsive ─────────────────────────────────────────────────────── */
/* Collapse right-hand TOC when main column would get cramped */
@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "topbar topbar"
      "side   main";
  }
  .toc { display: none; }
}

/* Collapse left sidebar at small widths (preview-pane safety) */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sidebar { display: none; }
  .topnav { display: none; }
}

/* Grids reflow on narrow main columns */
@media (max-width: 720px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
}

/* ── Section overview "Suggested reading order" ──────────────
   Compact 3-step horizontal flow with chevron connectors.
   Stacks vertically below 720px. */
.read-order {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 28px;
}
.read-order .read-step {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.read-order .read-step:hover { border-color: var(--ink-300); box-shadow: var(--shadow-md); }
.read-order .read-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  font-size: 18px;
  font-weight: 400;
  pointer-events: none;
}
.read-order .read-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brippo-blue-50);
  color: var(--brippo-blue-600);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  border: 1px solid var(--brippo-blue-100);
}
.read-order .read-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.read-order .read-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  text-decoration: none;
}
.read-order a.read-title:hover { color: var(--brippo-blue-600); }
.read-order .read-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-600);
}
.read-order .read-desc a {
  color: var(--brippo-blue-600);
  font-weight: 600;
  text-decoration: none;
}
.read-order .read-desc a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .read-order {
    flex-direction: column;
    gap: 10px;
  }
  .read-order .read-step:not(:last-child)::after {
    content: '↓';
    right: auto;
    left: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(-50%);
  }
}

/* ── Content tab panel default visibility ─────────────────────
   Hide inactive panels, show the active one. Used by the generic
   .content-tabs / .content-tab-panel pattern across multiple pages
   (Installation, Setup, Recover Checkout, Demo Stores, …). */
.content-tab-panel { display: none; }
.content-tab-panel.active { display: block; }

/* ── Section badge in breadcrumb row ──────────────────────────
   Small platform logo pushed to the right end of the breadcrumb.
   Used on all Hyvä pages (and any future section that wants a
   visual brand badge without competing with the page content). */
.crumbs .crumbs-mark {
  margin-left: auto;
  height: 18px;
  width: auto;
  opacity: 0.9;
  flex-shrink: 0;
}