/* Ported from the old Next.js app (Tailwind 4: globals.css, Navigation.css, Footer.css and the component CSS modules). */

@font-face { font-family: Montreux; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-Lt.woff2") format("woff2"); }
@font-face { font-family: Montreux; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-Rg.woff2") format("woff2"); }
@font-face { font-family: Montreux; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-DmBd.woff2") format("woff2"); }
@font-face { font-family: Montreux; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-Bd.woff2") format("woff2"); }

:root {
  --midnight-blue: #062741;
  --dark-blue: #184465;
  --steel-blue: #206b8d;
  --sky-blue: #56c4ef;
  --cool-blue: #5184ec;
  --light-gray: #c5cdd0;
  --signal-yellow: #f5cf00;
  --signal-yellow-60: #f5cf00cc;
  --signal-red: #e77e6d;
  --highlight: linear-gradient(to top, var(--signal-yellow-60), var(--signal-yellow-60)) no-repeat 0 0.5em;
}

/* Tailwind preflight, which the old site relied on */
*, *::before, *::after { margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-padding-block: 5rem; }
body { font-weight: 300; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; }
textarea { resize: vertical; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
address { font-style: normal; }
small { font-size: 0.875rem; }

/* Containers (Tailwind container: full width, max width per breakpoint) */
main.content, .site-header-inner, .footer-inner { width: 100%; max-width: none; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { main.content, .site-header-inner, .footer-inner { max-width: 40rem; } }
@media (min-width: 768px) { main.content, .site-header-inner, .footer-inner { max-width: 48rem; } }
@media (min-width: 1024px) { main.content, .site-header-inner, .footer-inner { max-width: 64rem; } }
@media (min-width: 1280px) { main.content, .site-header-inner, .footer-inner { max-width: 80rem; } }

main.content { padding: 6rem 1rem 0; }
@media (min-width: 768px) { main.content { padding: 7rem 2rem 0; } }

/* Typography */
h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 400; color: var(--dark-blue); }
h2 { margin-top: 2rem; text-align: left; font-size: 1.5rem; line-height: 2rem; font-weight: 400; color: var(--dark-blue); }
h3 { margin-top: 2rem; text-align: left; font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; color: var(--dark-blue); }
@media (min-width: 768px) {
  h2 { font-size: 1.875rem; line-height: 2.25rem; }
  h3 { font-size: 1.5rem; line-height: 2rem; }
}
h1 em, h2 em { background: var(--highlight); overflow: hidden; font-style: normal; }
p { margin-top: 1rem; }
a[title="call-to-action"] {
  display: inline-block; margin: 1rem 0; padding: 0.75rem 2rem;
  background: var(--signal-yellow); color: var(--dark-blue);
  border: 2px solid var(--dark-blue); border-radius: 9999px;
  font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
a[title="call-to-action"]:hover { background: var(--signal-yellow-60); }

/* Header and navigation */
.site-header {
  position: fixed; top: 0; left: 0; z-index: 10; display: block; width: 100%; max-width: none;
  margin: 0; padding: 0; background: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.site-header-inner { display: flex; flex-direction: row; align-items: center; height: 4rem; padding: 0 1rem; }
@media (min-width: 768px) { .site-header-inner { padding: 0 2rem; } }
.site-logo { width: 15rem; height: auto; }
@media (min-width: 768px) { .site-logo { width: 20rem; } }
.site-header .spacer { flex-grow: 1; }
.site-header .nav { display: flex; flex-direction: row; align-items: center; gap: 0; }
.site-header .nav ul {
  display: none; flex-direction: row; gap: 0; margin: 0; padding: 0;
  text-transform: uppercase; color: var(--dark-blue); font-weight: 500; cursor: pointer;
}
.site-header .nav li + li { margin-left: 1rem; }
@media (min-width: 1024px) { .site-header .nav ul { display: flex; } }
.site-header .nav li:hover { background: var(--highlight); font-style: normal; }
.site-header .nav.show ul {
  position: fixed; top: 0; right: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 1.5rem; line-height: 2rem; font-weight: 500; background: rgb(255 255 255 / 0.9);
}
.site-header .nav.show li + li { margin-left: 0; margin-top: 1.75rem; }
.burger { position: relative; z-index: 20; width: 40px; margin: 1rem; cursor: pointer; }
@media (min-width: 1024px) { .burger { display: none; } }
.burger::after, .burger::before, .burger div {
  display: block; content: ""; height: 2px; margin: 10px 0; background: var(--dark-blue); transition: all 0.2s ease-in-out;
}
.burger:hover::before { transform: translateY(12px) rotate(135deg); }
.burger:hover::after { transform: translateY(-12px) rotate(-135deg); }
.burger:hover div { transform: scale(0); }

/* Footer */
.footer { margin-top: 4rem; background: var(--midnight-blue); color: #fff; font-weight: 300; }
.footer-inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem 1rem; }
@media (min-width: 768px) { .footer-inner { padding: 2rem 2rem; } }
.footer-cols { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
@media (min-width: 768px) { .footer-cols { flex-direction: row; } }
.footer .logo img { width: 15rem; height: auto; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer .logo img { width: 20rem; } }
.footer address { font-style: normal; }
.footer ul { margin: 2rem 0; }
@media (min-width: 768px) {
  .footer address, .footer ul { width: 33.333333%; }
  .footer ul { margin: 0; }
}
.footer ul:nth-child(2) { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; }
@media (min-width: 768px) { .footer ul:nth-child(2) { padding-left: 5rem; } }
.footer ul:nth-child(2) li { margin-bottom: 0.25rem; }
.footer-cols > ul:nth-child(2) > li > a:hover { background: var(--highlight); font-style: normal; }
.footer ul:nth-child(4) { display: flex; flex-direction: column; }
@media (min-width: 768px) { .footer ul:nth-child(4) { text-align: right; } }
.footer ul:nth-child(4) li { display: flex; flex-direction: column; height: 100%; text-align: right; }
.footer ul:nth-child(4) ul {
  display: flex; flex-direction: row; width: 100%; margin: 2rem 0 0; font-weight: 400; color: var(--sky-blue); font-size: 0.875rem; line-height: 1.25rem;
}
@media (min-width: 768px) { .footer ul:nth-child(4) ul { justify-content: flex-end; margin-top: auto; } }
.footer ul:nth-child(4) a { display: inline-block; align-self: flex-end; overflow: visible; }
.footer ul:nth-child(4) a:hover { background: none; }
.footer ul:nth-child(4) ul li { height: 100%; margin-right: 1rem; }
@media (min-width: 768px) { .footer ul:nth-child(4) ul li { margin-left: 1rem; margin-right: 0; } }
.copyright { margin: 2rem 0 1rem; color: var(--sky-blue); font-size: 0.875rem; line-height: 1.25rem; }
.footer img[title="LinkedIn"] { width: 2rem; height: 2rem; }
.footer img[title="LinkedIn"]:hover { opacity: 0.8; }

/* Stage */
.stage { display: flex; flex-direction: column-reverse; align-items: center; margin-bottom: 2rem; text-align: center; }
@media (min-width: 768px) { .stage { flex-direction: row; text-align: left; } }
.stage-claim { flex-grow: 1; }
.stage h1 { margin: 1rem 0 2rem; font-size: 1.875rem; line-height: 2.25rem; color: var(--dark-blue); }
.stage p { margin: 2rem 0; font-size: 1.125rem; line-height: 1.75rem; }
.stage > img { width: 80%; height: auto; margin-bottom: 2rem; }
.stage a {
  padding: 0.75rem 2rem; background: var(--signal-yellow); color: var(--dark-blue);
  border: 2px solid var(--dark-blue); border-radius: 9999px; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.stage a:hover { background: var(--signal-yellow-60); }
@media (min-width: 768px) {
  .stage h1 { margin-top: 0; font-size: 2.25rem; line-height: 2.5rem; }
  .stage > img { width: 50%; }
}
@media (min-width: 1280px) {
  .stage h1 { font-size: 3.75rem; line-height: 1; }
  .stage p { font-size: 1.5rem; line-height: 2rem; }
}

/* Facts */
.facts { display: flex; flex-direction: row; flex-wrap: wrap; margin: 2rem 0; }
.facts h2 { width: 100%; margin-bottom: 2rem; font-size: 1.5rem; line-height: 2rem; text-align: left; color: var(--dark-blue); }
@media (min-width: 768px) { .facts h2 { font-size: 1.875rem; line-height: 2.25rem; } }
.facts blockquote { width: 100%; padding: 2rem; border: 2px solid #fff; background: rgb(32 107 141 / 0.2); }
@media (min-width: 768px) { .facts blockquote { width: 50%; } }
@media (min-width: 1024px) { .facts blockquote { width: 33.333333%; } }
.facts blockquote h2 { margin-top: 0; margin-bottom: 0; text-align: left; }
.facts blockquote p:has(img) {
  display: flex; align-items: center; text-align: right; font-size: 3.75rem; font-weight: 600; color: var(--dark-blue); line-height: normal;
}
.facts blockquote img { margin-right: 2.5rem; }
.facts blockquote img[title="big-icon"] { width: 6rem; }
.facts blockquote h3 { margin-top: 1rem; text-align: left; font-size: 1.5rem; line-height: 2rem; font-weight: 500; color: var(--dark-blue); }
.facts blockquote h4 { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: var(--steel-blue); }
.facts ul, .claim ul { list-style: disc outside; padding: 1rem 0 1rem 1.5rem; }
.facts li, .claim li { margin-bottom: 0.5rem; }

/* Claim */
.claim { display: flex; flex-direction: column; width: 100%; margin: 2rem 0; }
@media (min-width: 768px) { .claim { flex-direction: row; } .claim:nth-child(odd) { flex-direction: row-reverse; } }
.claim h2 { margin-top: 0; }
.claim h3 { margin-top: 0; color: var(--steel-blue); }
.claim-image { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2rem 3rem; }
@media (min-width: 768px) { .claim-image { width: 24rem; } }
.claim-text { display: flex; flex-direction: column; flex-grow: 1; }
@media (min-width: 768px) { .claim-text { width: 75%; } }

/* Layout (grid of icon blocks) */
.layout { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 2rem; }
.layout > div { width: 100%; padding: 1rem 1rem 1rem 0; }
@media (min-width: 768px) { .layout > div { width: 50%; } }
.layout img[alt="icon"] { float: inline-start; width: 6rem; height: auto; margin: 2.5rem 1rem; }

/* Logos */
.logos { display: flex; flex-direction: column; margin: 4rem 0; }
.logos h2 { text-align: center; }
.logos p { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
.logos img { max-height: 3rem; margin: 1.5rem; }
@media (min-width: 768px) { .logos img { max-height: 5rem; margin-left: 2rem; margin-right: 2rem; } }

/* People */
.people { display: flex; flex-direction: row; flex-wrap: wrap; }
.people h2 { width: 100%; margin-bottom: 2rem; font-size: 1.5rem; line-height: 2rem; text-align: center; color: var(--dark-blue); }
.people p { width: 100%; margin-bottom: 2rem; }
.people p:has(img[alt="profile"]) { text-align: center; margin-bottom: 0; }
.people blockquote { width: 100%; padding: 2rem; text-align: center; }
.people blockquote img { margin-right: 2.5rem; }
.people blockquote h3 { margin-top: 1rem; text-align: center; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: var(--dark-blue); }
.people blockquote p { margin-top: 0; font-size: 1rem; line-height: 1.5rem; color: var(--midnight-blue); }
.people blockquote p a { font-size: 0.875rem; line-height: 1.25rem; color: var(--cool-blue); }
.people img[alt="certificates"] { display: inline-block; width: 5rem; height: 5rem; margin: 1rem 0.5rem 0 0; object-fit: cover; }
.people img[alt="profile"] { width: 12rem; height: auto; margin-left: auto; margin-right: auto; border-radius: 9999px; object-fit: cover; }
@media (min-width: 768px) {
  .people h2 { font-size: 1.875rem; line-height: 2.25rem; text-align: left; }
  .people blockquote { width: 33.333333%; text-align: left; }
  .people blockquote h3 { text-align: left; }
  .people img[alt="profile"] { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1024px) { .people blockquote { width: 25%; } }

/* Pricing */
.pricing { width: 100%; overflow-x: scroll; }
.pricing table { min-width: 400px; margin: 2rem 0; text-align: center; table-layout: auto; border-collapse: collapse; }
@media (min-width: 768px) { .pricing table { margin-left: 2rem; margin-right: 2rem; } }
.pricing td, .pricing th { width: 16.666667%; padding: 1rem; text-align: right; border-right: 2px solid var(--signal-yellow); }
.pricing td:first-child, .pricing th:first-child { border: 2px solid transparent; border-right-color: var(--signal-yellow); }
.pricing td:nth-child(4), .pricing th:nth-child(4) { background: rgb(245 207 0 / 0.2); }
.pricing tr:last-child { border-top: 2px solid var(--signal-yellow); }
.pricing tr:last-child td { border: 0; }
.pricing tr:last-child td:nth-child(4) { border: 2px solid currentcolor; border-top: 0; color: var(--signal-yellow); }
.pricing td:nth-child(4) { font-weight: 700; }
.pricing thead { border-bottom: 2px solid var(--signal-yellow); }
.pricing thead tr { border-top: 0; }

/* Form */
.form { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; width: 100%; margin: 2rem auto 5rem; }
.form label { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; margin-top: 1rem; color: var(--dark-blue); font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
@media (min-width: 768px) { .form label { width: calc(50% - 0.5rem); } }
.form label span { display: none; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--signal-red); }
.form .full { width: 100%; }
.form input, .form textarea {
  width: 100%; margin-top: 0.5rem; padding: 0.75rem; color: var(--midnight-blue);
  border: 2px solid var(--light-gray); border-radius: 0.375rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.form input:focus, .form textarea:focus, .form input:active, .form textarea:active { outline: none; border-color: var(--dark-blue); }
.form input:user-invalid, .form textarea:user-invalid, .form input:user-invalid ~ i { border-color: var(--signal-red); }
.form input:user-invalid ~ span, .form textarea:user-invalid ~ span { display: block; }
.form p { padding: 0; }
.form button {
  padding: 0.75rem 2rem; background: var(--signal-yellow); color: var(--dark-blue);
  border: 2px solid var(--dark-blue); border-radius: 9999px; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.form button:hover { background: var(--signal-yellow-60); }
.form button:disabled { background: var(--light-gray); }
.form [name="_hp"] { display: none; }
.checkbox { position: relative; padding-left: 2.5rem; cursor: pointer; user-select: none; }
.checkbox input { position: absolute; width: 0; height: 0; opacity: 0; }
.checkbox i { position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; border: 2px solid var(--light-gray); border-radius: 0.375rem; }
.checkbox i::after {
  content: ""; display: none; position: absolute; top: 3px; left: 7px; width: 6px; height: 0.75rem;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.checkbox input:checked ~ i::after { display: block; }
.checkbox input:checked ~ i { background: var(--dark-blue); }

/* Documentation: layouts docs-* (header with logo only, sidebar, document content).
   Scoped by the sidebar's presence, so no other page is affected. */
/* The page is at least as tall as the window, so the footer sits at the bottom of short pages. */
body:has(.docs-sidebar) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100dvh; }
/* From 1024px: sidebar + content fill the same centred container as the general site (64rem, 80rem from 1280px). */
@media (min-width: 1024px) {
  body:has(.docs-sidebar) { grid-template-columns: minmax(0, 1fr) 17rem 47rem minmax(0, 1fr); }
  body:has(.docs-sidebar) > * { grid-column: 1 / -1; }
  body:has(.docs-sidebar) > .docs-sidebar { grid-column: 2; grid-row: 2; }
  body:has(.docs-sidebar) > main.content { grid-column: 3; grid-row: 2; max-width: none; margin: 0; padding: 6rem 2rem 0; border-left: 1px solid var(--light-gray); }
  body:has(.docs-sidebar) > .footer { grid-row: 3; }
}
@media (min-width: 1280px) {
  body:has(.docs-sidebar) { grid-template-columns: minmax(0, 1fr) 17rem 63rem minmax(0, 1fr); }
}

/* Sidebar */
/* Below 1024px it is a panel under the header, opened by the burger in the header (a checkbox, no script). */
.docs-sidebar { display: none; font-size: 0.95rem; }
body:has(.docs-nav-toggle:checked) .docs-sidebar {
  display: block; position: fixed; top: 4rem; right: 0; bottom: 0; left: 0; z-index: 9;
  overflow-y: auto; padding: 1rem; background: #fff;
}
.docs-sidebar .docs-sidebar-title { display: none; }
.docs-sidebar ul { margin: 0; }
.docs-sidebar a { display: block; padding: 0.35rem 0.75rem; border-left: 3px solid transparent; }
.docs-sidebar a:hover { background: #f1f5f7; }
.docs-sidebar a[aria-current="page"] { border-left-color: var(--signal-yellow); background: #f1f5f7; color: var(--dark-blue); font-weight: 500; }
.docs-sidebar-group { margin: 1.25rem 0 0.25rem; padding-left: 0.75rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #5b7183; }
.docs-sidebar .docs-sidebar-title + .docs-sidebar-group { margin-top: 0.75rem; }
/* The burger sits in the header (header_docs). */
.docs-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
@media (max-width: 1023px) { .site-header label.burger { display: block; } }
body:has(.docs-nav-toggle:checked) .site-header .burger::before { transform: translateY(12px) rotate(135deg); }
body:has(.docs-nav-toggle:checked) .site-header .burger::after { transform: translateY(-12px) rotate(-135deg); }
body:has(.docs-nav-toggle:checked) .site-header .burger div { transform: scale(0); }
body:has(.docs-nav-toggle:focus-visible) .site-header .burger { outline: 2px solid var(--steel-blue); outline-offset: 4px; }
/* From 1024px: always open, with the title, and the items indented under it. */
@media (min-width: 1024px) {
  .docs-sidebar, body:has(.docs-nav-toggle:checked) .docs-sidebar {
    display: block; position: sticky; top: 0; right: auto; bottom: auto; left: auto; z-index: auto;
    align-self: start; max-height: 100vh; overflow-y: auto; padding: 6rem 1rem 2rem 2rem; background: none;
  }
  .docs-sidebar .docs-sidebar-title { display: block; padding-left: 0.75rem; font-size: 1.125rem; font-weight: 500; color: var(--dark-blue); }
  .docs-sidebar ul { margin: 0.25rem 0 0 1.25rem; }
  .docs-sidebar .docs-sidebar-group { margin-left: 1.25rem; }
}

/* Document content */
/* Reading width: text stays at about 70 characters per line; images, tables and code use the full column. */
/* overflow-wrap: long identifiers (for example Apex action names) must wrap instead of widening the page on phones. */
body:has(.docs-sidebar) main.content { font-weight: 400; line-height: 1.65; color: #0d2233; overflow-wrap: anywhere; }
body:has(.docs-sidebar) main.content > :is(p, ul, ol, h1, h2, h3, h4, .callout) { max-width: 46rem; }
body:has(.docs-sidebar) main.content h1 { margin-bottom: 1.5rem; font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 768px) { body:has(.docs-sidebar) main.content h1 { font-size: 2.25rem; line-height: 2.5rem; } }
body:has(.docs-sidebar) main.content h2 { margin-top: 2.75rem; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--light-gray); font-size: 1.5rem; line-height: 2rem; }
@media (min-width: 768px) { body:has(.docs-sidebar) main.content h2 { font-size: 1.625rem; line-height: 2.125rem; } }
body:has(.docs-sidebar) main.content h3 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
body:has(.docs-sidebar) main.content h4 { margin-top: 1.5rem; margin-bottom: 0.25rem; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 500; color: var(--dark-blue); }
body:has(.docs-sidebar) main.content :is(h2, h3, h4) code { padding: 0; background: none; font-size: 0.95em; font-weight: 500; color: inherit; }
body:has(.docs-sidebar) main.content p { margin-top: 1.125rem; }
body:has(.docs-sidebar) main.content a { color: var(--steel-blue); text-decoration: underline; text-underline-offset: 2px; }
body:has(.docs-sidebar) main.content a:hover { color: var(--dark-blue); }
body:has(.docs-sidebar) main.content strong { font-weight: 500; }
body:has(.docs-sidebar) main.content ul { margin: 1rem 0 0 1.5rem; list-style: disc; }
body:has(.docs-sidebar) main.content ol { margin: 1rem 0 0 1.5rem; list-style: decimal; }
body:has(.docs-sidebar) main.content li { margin-top: 0.4rem; }
body:has(.docs-sidebar) main.content li > ul, body:has(.docs-sidebar) main.content li > ol { margin-top: 0.4rem; }
body:has(.docs-sidebar) main.content li > p { margin-top: 0.5rem; }
body:has(.docs-sidebar) main.content li > p:first-child { margin-top: 0; }
body:has(.docs-sidebar) main.content img { max-width: 100%; height: auto; margin: 1.75rem 0; border: 0; border-radius: 0.5rem; box-shadow: 0 1px 3px rgb(6 39 65 / 0.18), 0 0 0 1px rgb(6 39 65 / 0.06); }
body:has(.docs-sidebar) main.content code, body:has(.docs-sidebar) main.content pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 400; }
body:has(.docs-sidebar) main.content code { padding: 0.1em 0.35em; background: #eef2f5; border-radius: 0.2rem; font-size: 0.875em; }
body:has(.docs-sidebar) main.content pre { margin: 1rem 0 0; padding: 0.75rem 1rem; overflow-x: auto; border: 1px solid #dfe7ec; border-left: 3px solid var(--steel-blue); border-radius: 0.25rem; background: #f6f9fa; font-size: 0.8125rem; line-height: 1.55; }
body:has(.docs-sidebar) main.content pre code { padding: 0; background: none; font-size: inherit; }
/* Tables: the table scrolls sideways when it is too wide, the body fills the width otherwise. */
body:has(.docs-sidebar) main.content table { display: block; max-width: 100%; margin-top: 1.25rem; overflow-x: auto; font-size: 0.9375rem; }
body:has(.docs-sidebar) main.content tbody { display: table; width: 100%; }
body:has(.docs-sidebar) main.content th, body:has(.docs-sidebar) main.content td { padding: 0.5rem 0.75rem; border: 1px solid var(--light-gray); text-align: left; vertical-align: top; }
body:has(.docs-sidebar) main.content th { border-bottom: 2px solid var(--steel-blue); background: #e9f0f4; color: var(--dark-blue); font-weight: 500; }
body:has(.docs-sidebar) main.content tr:nth-child(even) td { background: #f8fafb; }
body:has(.docs-sidebar) main.content td p { margin-top: 0.5rem; }
body:has(.docs-sidebar) main.content td p:first-child { margin-top: 0; }
body:has(.docs-sidebar) main.content td pre { margin-top: 0; }

/* Callouts: <Callout type="note|tip|important|warning|soon">; the label comes from the type. */
.callout { --c: var(--steel-blue); --bg: #eef6fa; margin-top: 1.5rem; padding: 0.75rem 1rem; border-left: 4px solid var(--c); border-radius: 0 0.25rem 0.25rem 0; background: var(--bg); }
.callout::before { display: block; margin-bottom: 0.15rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); content: "Note"; }
.callout p:first-child { margin-top: 0; }
.callout[data-type="tip"] { --c: #2e7d4f; --bg: #eef7f1; }
.callout[data-type="tip"]::before { content: "Tip"; }
.callout[data-type="important"] { --c: #8a6d00; --bg: #fff8d6; border-left-color: var(--signal-yellow); }
.callout[data-type="important"]::before { content: "Important"; }
.callout[data-type="warning"] { --c: #b4412f; --bg: #fdf0ee; border-left-color: var(--signal-red); }
.callout[data-type="warning"]::before { content: "Warning"; }
.callout[data-type="soon"] { --c: var(--dark-blue); --bg: #f1f5f7; border-left-color: var(--light-gray); }
.callout[data-type="soon"]::before { content: "Coming soon"; }

/* Badges: <Badge type="soon|new|beta|deprecated">label</Badge> */
.badge { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 9999px; background: #e9f0f4; color: var(--dark-blue); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.4; text-transform: uppercase; vertical-align: 0.1em; }
.badge[data-type="soon"] { background: #fff3b0; }
.badge[data-type="new"] { background: #d9f0e2; color: #1f6a3f; }
.badge[data-type="beta"] { background: #dce8fb; color: #2a4fa0; }
.badge[data-type="deprecated"] { background: #fbe0db; color: #9b3322; }