/* Generated by scripts/build_css.sh. Do not edit: the source modules live in static/website/css/marketing/. */

/* ---- 00-tokens.css ---- */
/* 00-tokens.css
   Design tokens for the public site: the --mkt-* palette and type stacks on body.l1-marketing-v2.
 */

html {
  --l1-brand: #3b7ae8;
  --l1-brand-strong: #5b92f2;
  --l1-brand-soft: #eaf2ff;
  --l1-brand-border: #b7d0ff;
  --l1-brand-contrast: #ffffff;
  --l1-primary: #3b7ae8;
  --l1-primary-2: #5b92f2;
  --l1-primary-dark: #2458c4;
  --l1-primary-soft: rgba(77, 148, 255, 0.14);
  --l1-primary-glow: rgba(77, 148, 255, 0.38);
  --l1-hero-ground: #152a52;
  --l1-hero-glow-rgb: 110, 176, 255;
  --l1-hero-scrim-top-rgb: 22, 62, 130;
  --l1-hero-scrim-bottom-rgb: 18, 52, 112;
  --l1-shadow-glow: 0 22px 56px rgba(77, 148, 255, 0.28);
  --l1-shadow-soft: 0 18px 44px rgba(26, 68, 136, 0.12);
  --bs-primary: #3b7ae8;
  --bs-primary-rgb: 77, 148, 255;
  --bs-link-color: #2458c4;
  --bs-link-hover-color: #3b7ae8;
}

/* The mono stack named only SFMono-Regular, Consolas and Liberation Mono. Chrome
   on macOS exposes none of them, so every eyebrow, the contact bar and the
   footer legal line rendered in Courier. */
body.l1-marketing-v2 {
  --mkt-bg: #f6f6f2;
  --mkt-paper: #ffffff;
  --mkt-paper-muted: #efefeb;
  --mkt-ink: #10151f;
  --mkt-muted: #5e6673;
  --mkt-line: #d5d8dd;
  --mkt-line-strong: #aeb4bd;
  --mkt-blue: #104cc8;
  --mkt-blue-dark: #083898;
  --mkt-blue-hover: #083898;
  --mkt-blue-soft: #e8eefb;
  --mkt-night: var(--l1-secondary);
  --mkt-night-raised: #153a68;
  --mkt-graphic-bg: #0b1019;
  --mkt-footer-bg: #0b1019;
  --mkt-on-dark: #f4f7fb;
  --mkt-on-dark-link: #9bb8f5;
  --mkt-on-dark-muted: #b6c0cf;
  --mkt-on-dark-subtle: #97a4b6;
  --mkt-green: #2cc978;
  --mkt-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Subpage type scale. The home page and the promo landing pages keep the display
   sizes (the fallback in each rule that reads these). Every other public page has
   body.l1-subpage (layouts/marketing.html), so its titles and headings step down one
   level and a section heading never outranks the page title. */
body.l1-marketing-v2.l1-subpage {
  --page-title-size: clamp(2rem, 1.25rem + 2vw, 2.75rem);           /* 32 to 44px */
  --page-title-measure: 28ch;
  --page-title-tracking: -0.035em;
  --page-title-leading: 1.08;
  --hub-title-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem);        /* 36 to 52px: help center, blog, status, Looking Glass */
  --article-title-size: clamp(1.875rem, 1.25rem + 1.6vw, 2.5rem);   /* 30 to 40px: help articles, blog posts */
  --section-title-size: clamp(1.625rem, 1.15rem + 1.3vw, 2.125rem); /* 26 to 34px */
  --section-title-tracking: -0.03em;
  --section-title-leading: 1.1;
  --cta-title-size: clamp(1.875rem, 1.25rem + 1.8vw, 2.625rem);     /* 30 to 42px */
  --cta-title-tracking: -0.035em;
  --cta-title-leading: 1.05;
  --page-hero-pad-top: clamp(1.75rem, 2.5vw, 2.25rem);
  --page-hero-pad-bottom: clamp(2rem, 2.75vw, 2.5rem);
}

/* ---- 01-base.css ---- */
/* 01-base.css
   Element defaults on public pages: document background, type, links, headings, text selection,
   skip link and scroll-reveal motion.
 */

/* ---- Page rules that must come before the shared rules below ---- */

/* Belongs with 04-chrome.css; kept here so body.l1-marketing-v2 a:hover still overrides it on shared elements. */
body.l1-marketing-v2 .l1-footer-tagline,
body.l1-marketing-v2 .l1-footer-list a,
body.l1-marketing-v2 .l1-footer-legal {
  color: var(--l1-text-muted);
}

/* Belongs with 15-blog.css; kept here so body.l1-marketing-v2 a:hover still overrides it on shared elements. */
body.l1-marketing-v2 .l1-article-toc a {
  color: var(--mkt-muted);
}

/* ---- Document ---- */

* {
  box-sizing: border-box;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

html[data-l1-theme] body {
  color: var(--l1-text);
}

/* !important on background: beats auth-pages.css body.auth-body.l1-marketing-v2 (more specific). */
body.l1-marketing-v2 {
  background: var(--mkt-bg) !important;
  color: var(--mkt-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  letter-spacing: -0.006em;
}

body.l1-marketing-v2 main {
  background: var(--mkt-bg);
  color: var(--mkt-ink);
}

@media (max-width: 767.98px) {
  html {
    overflow-x: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* !important on
     - animation-duration, animation-iteration-count: beats .l1-world-map-bg (02-layout.css, more
       specific)
     - transition-duration: beats a (01-base.css, more specific) */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---- Type and links ---- */

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0;
}

a {
  text-decoration: none;
  transition: color .2s ease;
}

::-moz-selection {
  background: rgba(21, 154, 104, 0.24);
  color: var(--l1-text);
}

body.l1-marketing-v2 h1,
body.l1-marketing-v2 h2,
body.l1-marketing-v2 h3,
body.l1-marketing-v2 h4,
body.l1-marketing-v2 h5,
body.l1-marketing-v2 h6 {
  color: var(--mkt-ink);
  font-family: inherit;
  font-weight: 660;
}

body.l1-marketing-v2 p {
  text-wrap: pretty;
}

body.l1-marketing-v2 a {
  color: var(--mkt-blue-dark);
}

body.l1-marketing-v2 a:hover {
  color: var(--mkt-blue);
}

/* ---- Text selection ---- */

::selection {
  color: var(--l1-text);
  background: rgba(163, 171, 182, .22);
}

body.l1-marketing-v2 ::selection {
  background: var(--mkt-blue);
  color: #ffffff;
}

/* ---- Form controls ---- */

input,
textarea,
select {
  caret-color: var(--l1-primary-dark);
}

/* !important on color: beats auth-pages.css .auth-form .ui-input::placeholder (more specific). */
body.l1-marketing-v2 input::placeholder,
body.l1-marketing-v2 textarea::placeholder {
  color: var(--l1-text-dim) !important;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-article-hero (02-layout.css, more specific)
   - border: beats auth-pages.css .auth-form .ui-input (more specific)
   - border-radius: beats .dashboard-shell .l1-builder-hero (02-layout.css, more specific)
   - box-shadow: beats body.l1-marketing-v2 .l1-billing-toggle (11-pricing.css, more specific)
   - color: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, more specific) */
body.l1-marketing-v2 input,
body.l1-marketing-v2 textarea,
body.l1-marketing-v2 select,
body.l1-marketing-v2 .form-control,
body.l1-marketing-v2 .form-select {
  background: var(--mkt-paper) !important;
  border: 1px solid var(--mkt-line-strong) !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  color: var(--mkt-ink) !important;
}

/* ---- Skip link ---- */

.l1-skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 10000;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  transform: translateY(-200%);
  text-decoration: none;
}

.l1-skip-link:focus,
.l1-skip-link:focus-visible {
  transform: none;
}

/* Several older marketing components were authored as white-on-navy. V2 uses
   light page heroes and preserves a smaller set of deliberately dark surfaces,
   so foreground colour must follow the surface rather than the active theme. */
/* !important on color: beats body.l1-marketing-v2 a:hover (01-base.css, more specific). */
body.l1-marketing-v2 .l1-skip-link,
body.l1-marketing-v2 .l1-skip-link:focus,
body.l1-marketing-v2 .l1-skip-link:focus-visible {
  background: #ffffff;
  color: #10151f !important;
}

/* ---- Keyboard focus ---- */

a:focus-visible,
button:focus-visible,
.l1-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--l1-primary);
  outline-offset: 2px;
}

/* !important on
   - border-color: beats bootstrap.min.css .was-validated .form-control:valid (more specific)
   - box-shadow: beats bootstrap.min.css .form-control.is-valid:focus (more specific) */
body.l1-marketing-v2 input:focus,
body.l1-marketing-v2 textarea:focus,
body.l1-marketing-v2 select:focus,
body.l1-marketing-v2 .form-control:focus,
body.l1-marketing-v2 .form-select:focus {
  border-color: var(--mkt-blue) !important;
  box-shadow: 0 0 0 1px var(--mkt-blue) !important;
}

/* Keyboard focus. app.css loads after this bundle and its 18%-alpha ring won on
   equal specificity (about 1.3:1 on white). A solid ring, light on the navy bands. */
body.l1-marketing-v2 :is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mkt-blue);
  outline-offset: 2px;
}

/* ---- 02-layout.css ---- */
/* 02-layout.css
   Page scaffolding: containers, sections and section heads, inner-page heroes, map backgrounds and
   grid helpers.
 */

/* ---- Page rules that must come before the shared rules below ---- */

/* Belongs with 11-pricing.css; kept here so .l1-builder-hero p still overrides it on shared elements. */
.l1-plan-fit-card p {
  color: var(--l1-text-muted);
  margin-bottom: 0;
}

/* Belongs with 12-solutions.css; kept here so .l1-builder-hero p still overrides it on shared elements. */
.l1-launch-step p {
  margin-bottom: 0;
  color: var(--l1-text-muted);
}

/* Belongs with 13-pages.css; kept here so .l1-builder-hero p still overrides it on shared elements. */
.l1-feature-action-row p {
  margin: 0;
  color: var(--l1-text-muted);
}

/* Belongs with 11-pricing.css; kept here so .l1-builder-hero p still overrides it on shared elements. */
.l1-payment-strip p {
  color: var(--l1-text-muted);
  font-size: .92rem;
  font-weight: 600;
  margin: 0 0 .85rem;
}

/* Belongs with 10-home.css; kept here so .l1-builder-hero p still overrides it on shared elements. */
.l1-devops-copy p {
  color: var(--l1-text-muted);
  margin: 0;
}

/* Belongs with 11-pricing.css; kept here so .l1-commitment-strip button:hover still overrides it on shared elements. */
.l1-billing-toggle button.active {
  background: var(--l1-primary);
  color: #fff;
}

/* Belongs with 11-pricing.css; kept here so .l1-commitment-strip button:hover still overrides it on shared elements. */
.l1-commitment-strip button:hover,
.l1-commitment-strip button:focus {
  background: rgba(255, 255, 255, .1);
  box-shadow: none;
  color: #fff;
}

/* Belongs with 15-blog.css; kept here so .l1-builder-hero p still overrides it on shared elements. */
.l1-empty-public p {
  color: var(--l1-text-muted);
  margin: 0;
}

/* Inner-page heroes: placed here to keep its cascade order against the rules around it. */
.l1-builder-hero p {
  font-size: 1.12rem;
  line-height: 1.75;
  margin: 1.35rem 0 0;
}

/* Belongs with 12-solutions.css; kept here so .l1-page-hero p still overrides it on shared elements. */
.l1-builder-section p,
.l1-builder-card p,
.l1-builder-cta p,
.l1-builder-article p {
  color: var(--l1-muted);
  font-size: 1rem;
  line-height: 1.75;
}

/* Inner-page heroes: placed here to keep its cascade order against the rules around it. */
.l1-builder-hero h1 {
  margin: 1rem 0 0;
  max-width: 920px;
}

/* Belongs with 12-solutions.css; kept here so .l1-builder-hero h1 still overrides it on shared elements. */
.l1-builder-article h1 {
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1;
  margin-bottom: 1.4rem;
}

/* Inner-page heroes: placed here to keep its cascade order against the rules around it. */
.l1-contact-hero p {
  line-height: 1.75;
}

/* Belongs with 13-pages.css; kept here so .l1-page-hero p still overrides it on shared elements. */
.l1-contact-card-head p {
  color: var(--l1-text-muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: .45rem 0 0;
}

/* Belongs with 13-pages.css; kept here so .l1-page-hero h1 still overrides it on shared elements. */
.l1-contact-success h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

/* Inner-page heroes: placed here to keep its cascade order against the rules around it. */
.l1-page-hero p,
.l1-builder-hero p,
.l1-contact-hero p,
.l1-article-byline,
.l1-public-rendered-page > header:not([class]) p {
  color: rgba(255, 255, 255, .76);
}

/* Belongs with 17-status.css; kept here so .l1-hero-sub still overrides it on shared elements. */
.panel-heading p {
  color: var(--l1-text-muted);
  font-size: .94rem;
  margin: .25rem 0 0;
}

/* Belongs with 11-pricing.css; kept here so body.l1-marketing-v2 .l1-hero still overrides it on shared elements. */
.l1-commitment-strip button:hover {
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
}

/* Belongs with 04-chrome.css; kept here so .l1-page-hero still overrides it on shared elements. */
/* !important on display: beats body.l1-marketing-v2 .l1-aegis-overview span (13-pages.css, more specific). */
.l1-theme-toggle [hidden] {
  display: none !important;
}

/* Belongs with 10-home.css; kept here so body.l1-marketing-v2 .l1-link-arrow:hover still overrides it on shared elements. */
/* !important on
   - color: beats body.l1-marketing-v2 .l1-link-arrow (03-components.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-home-hero .l1-link-arrow,
body.l1-marketing-v2 .l1-hero#top .l1-link-arrow {
  color: rgba(255, 255, 255, .72) !important;
  font-weight: 700;
}

/* The pricing hero's proof-row chips and credit toggle had a light-theme-only
   override that turned them into near-opaque white/gray
   pills with dark text - left over from when this hero used a lighter purple
   background. Against the new deep-navy hero that reads as a washed-out,
   mismatched card. Restoring the same translucent glass-on-dark treatment
   already used for .l1-hero-stats keeps the whole hero in one language, and
   the active toggle state picks up the brand color instead of flat black. */
/* Belongs with 11-pricing.css; kept here so html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero still overrides it on shared elements. */
/* !important on
   - background, border-color: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, later in
     the cascade, also !important)
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-pricing-page .l1-pricing-proof-row span {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: rgba(255, 255, 255, .92) !important;
}

/* Belongs with 10-home.css; kept here so body.l1-marketing-v2 .l1-page-hero > .l1-container still overrides it on shared elements. */
/* !important on
   - display, padding: beats .l1-hero#top > .l1-container (10-home.css, more specific)
   - max-width: beats body.l1-marketing-v2 .l1-home-hero .l1-container (10-home.css, later in the
     cascade) */
body.l1-marketing-v2 .l1-home-hero > .l1-container,
body.l1-marketing-v2 .l1-home-hero#top > .l1-container {
  display: block !important;
  max-width: 1240px !important;
  padding: clamp(1.1rem, 1.5vw, 1.5rem) clamp(1.25rem, 3.2vw, 2.5rem) clamp(1.4rem, 2.2vw, 2.2rem) !important;
  width: 100%;
}

/* Belongs with 03-components.css; kept here so body.l1-marketing-v2 .l1-section-dark .l1-link-arrow still overrides it on shared elements. */
/* !important on
   - color: beats body.l1-marketing-v2 .l1-link-arrow (03-components.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-link-arrow:hover {
  color: var(--mkt-blue-dark) !important;
}

/* Belongs with 10-home.css; kept here so html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero still overrides it on shared elements. */
/* !important on
   - border-right: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-compliance-grid > li:last-child {
  border-right: 1px solid var(--mkt-line) !important;
}

@media (max-width: 767.98px) {
  /* Belongs with 04-chrome.css; kept here so .l1-page-hero > .l1-container still overrides it on shared elements. */
  .l1-navbar,
  .l1-navbar > .l1-container {
    max-width: 100%;
  }
}

/* ---- Grid and spacing helpers ---- */

.l1-hero {
  position: relative;
  border-bottom: 0;
  padding: 6.3rem 0 3.65rem;
}

.l1-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.dashboard-shell .section-gap,
.public-sidebar-shell .section-gap {
  margin-top: 1rem;
}

.l1-home-hero {
  position: relative;
}

.row {
  justify-items: stretch;
}

/* !important on
   - background-color, background-image, background-position, background-repeat, background-size:
     beats .l1-hero (02-layout.css, later in the cascade, also !important)
   - margin-bottom, margin-left, margin-right: beats html[data-l1-theme] body:not(.auth-body)
     .l1-hero#top (02-layout.css, more specific) */
body.l1-marketing-v2 .l1-home-hero.l1-hero,
html[data-l1-theme] body:not(.auth-body) .l1-hero#top {
  color: var(--l1-text);
  margin: 0 auto clamp(1.35rem, 2.4vw, 2.25rem);
  background-color: #152a52 !important;
  background-image: radial-gradient(ellipse 70% 55% at 18% 20%, rgba(59, 122, 232, 0.28), transparent 62%),
    radial-gradient(ellipse 55% 50% at 88% 8%, rgba(59, 122, 232, 0.16), transparent 55%),
    radial-gradient(ellipse 40% 40% at 72% 78%, rgba(36, 88, 196, 0.2), transparent 60%),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 42px) !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat !important;
  background-size: auto, auto, auto, auto, auto !important;
  border: 1px solid rgba(158, 194, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(5, 11, 24, 0.28);
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: none;
  min-height: min(88vh, 62rem);
  overflow: hidden;
  padding: 0;
  width: min(85vw, calc(100% - 2rem));
}

body.l1-marketing-v2 .l1-home-hero.l1-hero::before,
body.l1-marketing-v2 .l1-home-hero.l1-hero::after,
html[data-l1-theme] body:not(.auth-body) .l1-hero#top::before,
html[data-l1-theme] body:not(.auth-body) .l1-hero#top::after {
  content: none;
  display: none;
}

/* !important on
   - background: beats .l1-hero (02-layout.css, later in the cascade, also !important)
   - margin: beats body.l1-marketing-v2 .l1-home-hero.l1-hero (02-layout.css, later in the cascade,
     also !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top {
  background: var(--l1-rail-bg) !important;
  border: 0;
  border-bottom: 1px solid var(--mkt-line);
  border-radius: 0;
  box-shadow: none;
  color: #ffffff;
  display: block;
  margin: 0 !important;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

/* !important on content: beats .l1-hero::before (02-layout.css, later in the cascade, also !important). */
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top::before,
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top::after {
  content: "" !important;
  pointer-events: none;
  position: absolute;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top::before {
  inset: 0 0 0 48%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
  mask-image: linear-gradient(90deg, transparent, #000 32%);
}

html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top::after {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-left: 0;
  border-right: 0;
  height: 170px;
  inset: auto -5% -94px 38%;
  transform: rotate(-7deg);
}

body.l1-marketing-v2 .tw\:bg-brand-soft.tw\:text-brand {
  color: var(--mkt-blue-dark);
  border: 0;
  border-radius: 999px;
}

@media (max-width: 767.98px) {
  .row {
    margin-left: 0;
    margin-right: 0;
  }

  body.l1-marketing-v2 .l1-home-hero.l1-hero,
  html[data-l1-theme] body:not(.auth-body) .l1-hero#top {
    border-radius: 18px;
    width: calc(100% - 1.5rem);
  }
}

@media (min-width: 1024px) {
  body.l1-marketing-v2 #about .tw\:items-center {
    align-items: start;
  }
}

/* ---- Sections ---- */

.l1-section {
  position: relative;
}

.l1-section-alt {
  border-top: 1px solid var(--l1-border);
  border-bottom: 1px solid var(--l1-border);
}

/* The homepage alternates full-bleed dark bands with light sections rather than
   relying on the barely-there .l1-section-alt shade shift. This is a reusable
   class (not scoped to one page) so any marketing section can opt in. Cards
   inside keep their normal light styling, only the section backdrop and its
   own heading text go dark, with light cards floating on a dark band. Text/eyebrow
   values match the proven .l1-page-hero treatment rather than inventing new ones. */
/* !important on the background because .l1-section carries
   `background: transparent`, a shorthand that resets
   background-color at equal specificity, so any later layer re-adding a
   .l1-section rule can flatten this band back into the page and defeat the
   whole point of alternating. */
.l1-section-dark {
  border-top: 0;
  border-bottom: 0;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-section-alt (04-chrome.css, later in the cascade)
   - border: beats body.l1-marketing-v2 .l1-home-guides (10-home.css, later in the cascade)
   - padding: beats body.l1-marketing-v2 .l1-article-prose :is(.l1-section, .l1-builder-article,
     .l1-container, .l1-legal-copy, .l1-builder-prose) (15-blog.css, more specific) */
body.l1-marketing-v2 .l1-section {
  background: var(--mkt-bg) !important;
  border: 0 !important;
  color: var(--mkt-ink);
  padding: clamp(3.75rem, 6vw, 5.5rem) 0 !important;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-section-alt (04-chrome.css, later in the cascade) */
body.l1-marketing-v2 .l1-section-alt {
  background: var(--mkt-paper-muted) !important;
}

/* !important on
   - background, background-image, border-color: beats body.l1-marketing-v2 .l1-section
     (02-layout.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-section-dark {
  background: var(--mkt-night) !important;
  background-image: none !important;
  border-color: #283140 !important;
  color: #ffffff;
}

/* !important on
   - color: beats .l1-public-rendered-page > header:not([class]) h1 (02-layout.css, later in the
     cascade) */
body.l1-marketing-v2 .l1-section-dark h1,
body.l1-marketing-v2 .l1-section-dark h2,
body.l1-marketing-v2 .l1-section-dark h3,
body.l1-marketing-v2 .l1-section-dark h4 {
  color: #f7f9fc !important;
}

/* !important on color: beats .l1-cms-body .l1-cta-card .l1-btn-ghost (12-solutions.css, more specific). */
body.l1-marketing-v2 .l1-section-dark .l1-link-arrow,
body.l1-marketing-v2 .l1-section-dark p a {
  color: var(--mkt-on-dark-link) !important;
}

/* ---- Map backgrounds ---- */

.l1-world-map-bg {
  --l1-map-opacity: .17;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: url("/static/website/img/world-map-outline.04b03780e8d0.svg") center 48% / min(1320px, 126vw) auto no-repeat;
  filter: grayscale(1);
  transform: translateY(10px) scale(.985);
  animation: l1WorldMapFadeIn .9s ease-out .12s forwards;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 88%, transparent 100%);
}

.l1-locations-section > .l1-world-map-bg {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .l1-world-map-bg {
    opacity: var(--l1-map-opacity);
    transform: none;
    animation: none;
  }
}

/* ---- Inner-page heroes ---- */

.l1-page-hero h1 {
  text-wrap: balance;
}

.l1-builder-hero {
  align-items: center;
  display: grid;
  min-height: 0;
  padding: 5.35rem 0 2.45rem;
}

.l1-contact-hero .l1-container {
  z-index: 1;
}

.l1-hero-title,
.l1-page-hero h1,
.l1-section-title,
.l1-builder-hero h1,
.l1-builder-section h2,
.l1-builder-cta h2,
.l1-builder-article h1,
.l1-builder-article h2,
.l1-contact-hero h1 {
  letter-spacing: 0;
}

.l1-builder-hero h1 {
  line-height: 1.03;
}

.l1-page-hero,
.l1-builder-hero,
.l1-contact-hero,
.l1-article-hero,
.l1-public-rendered-page > h1,
.l1-public-rendered-page > header:not([class]) {
  background: radial-gradient(circle at 16% 18%, rgba(207, 211, 216, .18), transparent 34%),
    linear-gradient(135deg, rgba(165, 172, 182, .16), rgba(90, 99, 112, .12) 46%, rgba(255, 255, 255, .03) 100%),
    linear-gradient(180deg, #2f343a 0%, #393f48 58%, #454c56 100%);
  border-bottom: 0;
  color: #ffffff;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.l1-page-hero::before,
.l1-builder-hero::before,
.l1-contact-hero::before,
.l1-article-hero::before {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.l1-page-hero > .l1-container,
.l1-builder-hero > .l1-container,
.l1-contact-hero > .l1-container,
.l1-article-hero > .l1-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.l1-page-hero h1,
.l1-builder-hero h1,
.l1-contact-hero h1,
.l1-public-rendered-page > h1,
.l1-public-rendered-page > header:not([class]) h1 {
  color: #ffffff;
}

/* Public billing surfaces share the marketing shell, so keep their reused
   console-style components themed inside this stylesheet too. */
.l1-builder-hero.l1-world-map-bg,
.l1-page-hero.l1-world-map-bg,
.l1-contact-hero.l1-world-map-bg,
.l1-article-hero.l1-world-map-bg {
  inset: auto;
  isolation: isolate;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
  z-index: auto;
}

.l1-hero::after,
.l1-page-hero::after,
.l1-builder-hero::after,
.l1-contact-hero::after,
.l1-article-hero::after {
  filter: invert(1) grayscale(1);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.dashboard-shell .l1-builder-hero,
.public-sidebar-shell .l1-builder-hero {
  border-radius: 8px;
  margin: 1rem 0 0;
  min-height: 250px;
  padding: 3rem 1.35rem 2.35rem;
}

.l1-hero-sub,
.l1-page-hero p,
.l1-builder-hero p,
.l1-contact-hero p {
  color: rgba(255, 255, 255, .82);
}

.l1-page-hero h1,
.l1-builder-hero h1,
.l1-contact-hero h1 {
  font-size: clamp(2rem, 4vw, 3.15rem);
}

.l1-page-hero p,
.l1-builder-hero p,
.l1-contact-hero p {
  max-width: 760px;
}

.l1-hero,
.l1-page-hero,
.l1-builder-hero:not(.l1-checkout-hero),
.l1-contact-hero,
.l1-article-hero {
  min-height: 0;
}

.l1-page-hero h1,
.l1-builder-hero:not(.l1-checkout-hero) h1,
.l1-contact-hero h1,
.l1-article-hero h1,
.l1-public-rendered-page > h1 {
  font-size: clamp(2.35rem, 4.6vw, 4.2rem);
  letter-spacing: 0;
  line-height: 1.02;
}

.l1-page-hero p,
.l1-builder-hero:not(.l1-checkout-hero) p,
.l1-contact-hero p,
.l1-article-hero p {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 780px;
}

/* !important on
   - content: beats body.l1-marketing-v2 .l1-v2-console-foot span + span::before (10-home.css, more
     specific) */
.l1-hero::before,
.l1-page-hero::before,
.l1-builder-hero::before,
.l1-contact-hero::before,
.l1-article-hero::before,
.l1-hero::after,
.l1-page-hero::after,
.l1-builder-hero::after,
.l1-contact-hero::after,
.l1-article-hero::after {
  opacity: .08;
  background: none;
  content: none !important;
  display: none;
}

.l1-cms-body .l1-page-hero,
.l1-cms-body .l1-builder-hero {
  text-align: center;
}

/* Public hero background normalization: one filled map image, no stacked overlays. */
/* !important on
   - background-color, background-image, background-position, background-repeat, background-size:
     beats body.l1-marketing-v2 main (01-base.css, more specific) */
.l1-hero,
.l1-page-hero,
.l1-builder-hero:not(.l1-checkout-hero),
.l1-contact-hero,
.l1-article-hero,
.l1-public-rendered-page .l1-page-hero,
.l1-cms-body .l1-page-hero,
.l1-cms-body .l1-builder-hero {
  background-color: var(--l1-hero-ground) !important;
  background-image: url("../img/world-map-outline.04b03780e8d0.svg") !important;
  background-position: center 48% !important;
  background-repeat: no-repeat !important;
  background-size: min(1320px, 126vw) auto !important;
  color: #ffffff;
  isolation: isolate;
  overflow: hidden;
}

body.l1-marketing-v2 .l1-hero,
body.l1-marketing-v2 .l1-page-hero,
body.l1-marketing-v2 .l1-article-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 66%, #eef2f7 100%);
}

body.l1-marketing-v2 .l1-hero::before,
body.l1-marketing-v2 .l1-page-hero::before,
body.l1-marketing-v2 .l1-article-hero::before {
  opacity: .5;
}

/* !important on
   - align-items: beats body.l1-marketing-v2 .l1-v2-console-event > strong (10-home.css, more
     specific)
   - background, background-image: beats body.l1-marketing-v2 main (01-base.css, more specific)
   - border: beats body.l1-marketing-v2 .l1-infra-route-path > div > i (10-home.css, more specific)
   - display: beats .l1-locations-section > .l1-world-map-bg (02-layout.css, more specific)
   - min-height: beats body.l1-marketing-v2 .l1-home-guide-list a (10-home.css, more specific)
   - overflow: beats .l1-public-rendered-page > h1 (02-layout.css, more specific)
   - padding: beats .l1-page-hero (02-layout.css, later in the cascade) */
.l1-page-hero,
.l1-builder-hero:not(.l1-checkout-hero),
.l1-contact-hero,
.l1-article-hero,
.l1-public-rendered-page .l1-page-hero,
.l1-cms-body .l1-page-hero,
.l1-cms-body .l1-builder-hero {
  align-items: stretch !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 1.35rem 0 2.25rem !important;
}

/* !important on
   - content: beats body.l1-marketing-v2 .l1-v2-console-foot span + span::before (10-home.css, more
     specific) */
.l1-page-hero::before,
.l1-page-hero::after,
.l1-builder-hero:not(.l1-checkout-hero)::before,
.l1-builder-hero:not(.l1-checkout-hero)::after,
.l1-contact-hero::before,
.l1-contact-hero::after,
.l1-article-hero::before,
.l1-article-hero::after {
  content: none !important;
  display: none;
}

/* !important on padding: beats .l1-home-hero > .l1-container (10-home.css, later in the cascade). */
.l1-page-hero > .l1-container,
.l1-builder-hero:not(.l1-checkout-hero) > .l1-container,
.l1-contact-hero > .l1-container,
.l1-article-hero > .l1-container,
.l1-public-rendered-page > .l1-page-hero > .l1-container,
.l1-cms-body .l1-page-hero > .l1-container {
  background-color: #152a52;
  background-image: radial-gradient(ellipse 80% 70% at 12% 0%, rgba(110, 176, 255, 0.5), transparent 55%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(165, 206, 255, 0.18), transparent 50%),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 36px);
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, auto, auto;
  border: 1px solid rgba(158, 194, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(5, 11, 24, 0.28);
  max-width: 1200px;
  overflow: hidden;
  padding: clamp(2.1rem, 4vw, 3.4rem) clamp(1.4rem, 3.4vw, 3rem) !important;
  position: relative;
  width: 100%;
}

/* Heroes used to carry a world-map texture. Kill it on every hero surface,
   including the leftover .l1-world-map-bg class still in some templates. */
/* !important on
   - animation: beats * (01-base.css, later in the cascade, also !important)
   - background-image: beats .l1-public-rendered-page > header:not([class]) (02-layout.css, more
     specific) */
.l1-home-hero.l1-world-map-bg,
.l1-page-hero.l1-world-map-bg,
.l1-contact-hero.l1-world-map-bg,
.l1-article-hero.l1-world-map-bg,
.l1-builder-hero.l1-world-map-bg,
.l1-page-hero.l1-world-map-bg::after,
.l1-contact-hero.l1-world-map-bg::after,
.l1-hero::after {
  animation: none !important;
  background-image: none !important;
  filter: none;
}

.l1-page-hero-layout {
  align-items: center;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  z-index: 1;
}

.l1-page-hero-copy {
  min-width: 0;
}

/* !important on
   - background, background-image: beats bootstrap-bridge.css html[data-l1-theme] :where(code, kbd,
     pre, .code-block, .font-monospace) (loads after this bundle, also !important)
   - border: beats body.l1-marketing-v2 .l1-kb-home-stats > div:nth-child(even) (14-docs.css, later
     in the cascade)
   - border-radius: beats body.l1-marketing-v2 input (01-base.css, later in the cascade, also
     !important)
   - box-shadow: beats body.l1-marketing-v2 input:focus (01-base.css, later in the cascade, also
     !important)
   - color: beats body.l1-marketing-v2 .l1-feature-tags span (11-pricing.css, later in the cascade,
     also !important)
   - margin: beats html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero h1 (02-layout.css, later in
     the cascade, also !important)
   - max-width: beats html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-
     hero) h1 (02-layout.css, more specific)
   - padding: beats body.l1-marketing-v2 .l1-infra-spec-grid > div:nth-child(even) (10-home.css,
     later in the cascade)
   - width: beats body.l1-marketing-v2 .l1-nav-contact .l1-nav-link i (04-chrome.css, later in the
     cascade) */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero,
html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero,
html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero),
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero {
  background: var(--mkt-paper) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mkt-ink) !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0;
  padding: var(--page-hero-pad-top, clamp(2rem, 3vw, 2.75rem)) 0 var(--page-hero-pad-bottom, clamp(2.25rem, 3.25vw, 3rem)) !important;
  position: relative;
  text-align: left;
  width: 100% !important;
}

body.l1-marketing-v2 .l1-page-hero::after,
body.l1-marketing-v2 .l1-contact-hero::after,
body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero)::after {
  color: var(--mkt-line-strong);
  font-family: var(--mkt-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  position: absolute;
  right: max(clamp(1.25rem, 3.2vw, 2.5rem), calc((100vw - 1240px) / 2 + 2.5rem));
  top: 1.35rem;
}

body.l1-marketing-v2 .l1-page-hero .l1-container,
body.l1-marketing-v2 .l1-contact-hero .l1-container,
body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) .l1-container {
  position: relative;
}

/* !important on
   - align-items: beats body.l1-marketing-v2 .l1-compliance-band-inner (10-home.css, later in the
     cascade, also !important)
   - background, background-image: beats body.l1-marketing-v2 .l1-blog-pager [aria-current="page"]
     (15-blog.css, later in the cascade)
   - border: beats body.l1-marketing-v2 .l1-kb-home-stats > div:nth-child(even) (14-docs.css, more
     specific)
   - display, padding-block: beats .l1-hero#top > .l1-container (10-home.css, more specific)
   - overflow: beats bootstrap.min.css .visually-hidden * (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-page-hero > .l1-container,
body.l1-marketing-v2 .l1-contact-hero > .l1-container,
body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) > .l1-container,
body.l1-marketing-v2 .l1-article-hero > .l1-container {
  align-items: initial !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  display: block !important;
  min-height: 0;
  overflow: visible !important;
  padding-block: 0 !important;
  text-align: left;
}

/* !important on
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important)
   - font-size, line-height: beats .l1-home-hero .l1-hero-title (10-home.css, later in the cascade,
     also !important)
   - font-weight, letter-spacing: beats .l1-hero#top .l1-hero-title (10-home.css, more specific)
   - margin: beats .l1-hero#top .l1-hero-row > .col-lg-6 (10-home.css, more specific)
   - text-align: beats bootstrap.min.css .text-center (a Bootstrap utility that is itself !important)
   - text-shadow: beats body.l1-marketing-v2 .l1-hero#top .l1-hero-title (10-home.css, more specific) */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero h1,
html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero h1,
html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) h1,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero h1 {
  color: var(--mkt-ink) !important;
  font-size: var(--page-title-size, clamp(2.65rem, 4.2vw, 4.25rem)) !important;
  font-weight: 610 !important;
  letter-spacing: var(--page-title-tracking, -0.05em) !important;
  line-height: var(--page-title-leading, 0.98) !important;
  margin: 0.75rem 0 1rem !important;
  max-width: var(--page-title-measure, 12ch);
  text-align: left !important;
  text-shadow: none !important;
  word-spacing: 0.03em;
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-solution-panel-kicker (12-solutions.css, later in the
     cascade, also !important)
   - font-size: beats .l1-solution-panel-kicker (12-solutions.css, later in the cascade, also
     !important)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important)
   - max-width: beats html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-
     hero) (02-layout.css, later in the cascade, also !important)
   - text-align: beats bootstrap.min.css .text-center (a Bootstrap utility that is itself !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero p,
html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero > .l1-container > p,
html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) p,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero p {
  color: var(--mkt-muted) !important;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem) !important;
  line-height: 1.62;
  margin: 0 !important;
  max-width: 760px !important;
  text-align: left !important;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero p {
  color: var(--mkt-muted) !important;
}

@media (max-width: 991.98px) {
  .l1-hero,
  .l1-page-hero,
  .l1-builder-hero,
  .l1-contact-hero {
    padding-top: 5.2rem;
  }

  .l1-page-hero h1,
  .l1-builder-hero:not(.l1-checkout-hero) h1,
  .l1-contact-hero h1,
  .l1-article-hero h1,
  .l1-public-rendered-page > h1 {
    font-size: clamp(2rem, 6vw, 3rem);
  }
}

@media (max-width: 767.98px) {
  /* !important on padding: beats .l1-home-hero > .l1-container (10-home.css, later in the cascade). */
  .l1-page-hero > .l1-container,
  .l1-contact-hero > .l1-container,
  .l1-builder-hero:not(.l1-checkout-hero) > .l1-container {
    padding: 1.6rem 1.15rem !important;
  }
}

@media (max-width: 575.98px) {
  /* !important on
     - font-size: beats .l1-home-hero .l1-hero-title (10-home.css, later in the cascade, also
       !important) */
  html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero h1,
  html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero h1,
  html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) h1 {
    font-size: var(--page-title-size, clamp(2.35rem, 11vw, 3.3rem)) !important;
  }
}

@media (min-width: 992px) {
  .l1-page-hero-layout {
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  }
}

/* ---- Containers ---- */

/* Local primitives for templates that use l1-prefixed layout tokens. */
.l1-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

body.l1-marketing-v2 .l1-container {
  max-width: 1240px;
  padding-inline: clamp(1.25rem, 3.2vw, 2.5rem);
}

/* ---- Section heads ---- */

.l1-section-title {
  font-family: var(--l1-font-head);
}

.l1-section-dark > .l1-container > .l1-section-head .l1-section-title,
.l1-section-dark > .l1-container > .l1-section-head h2,
.l1-section-dark > .l1-container > .l1-section-head h3 {
  color: #ffffff;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-section-dark p,
body.l1-marketing-v2 .l1-section-dark .l1-section-sub {
  color: #a5afbf !important;
}

body.l1-marketing-v2 .l1-section-head,
body.l1-marketing-v2 .tw\:text-center.l1-section-head {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  max-width: 780px;
  text-align: left;
}

body.l1-marketing-v2 .l1-section-title {
  color: var(--mkt-ink);
  font-size: var(--section-title-size, clamp(2.35rem, 4.7vw, 4.7rem));
  font-weight: 610;
  letter-spacing: var(--section-title-tracking, -0.045em);
  line-height: var(--section-title-leading, 1.02);
  margin: 1.1rem 0 1.25rem;
  word-spacing: 0.025em;
}

/* !important on
   - color: beats .l1-public-rendered-page > header:not([class]) p (02-layout.css, more specific) */
body.l1-marketing-v2 .l1-section-sub {
  color: var(--mkt-muted) !important;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.7;
  margin: 0;
  max-width: 710px;
}

/* !important on
   - margin-top: beats html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero > .l1-container > p
     (02-layout.css, later in the cascade, also !important) */
body.l1-marketing-v2 #about .l1-section-sub + .l1-section-sub {
  margin-top: 1rem !important;
}

/* ---- Animations ---- */

@keyframes l1WorldMapFadeIn {
  to { opacity: var(--l1-map-opacity); transform: translateY(0) scale(1); }
}

/* ---- 03-components.css ---- */
/* 03-components.css
   Shared components: buttons, eyebrows, cards and bento grids, chips, FAQ accordion, breadcrumbs,
   forms, tables and status pills.
 */

/* ---- Page rules that must come before the shared rules below ---- */

/* Belongs with 10-home.css; kept here so .table-row strong still overrides it on shared elements. */
.l1-hero-stats strong {
  font-family: var(--l1-font-head);
  line-height: 1;
  color: #ffffff;
}

/* Belongs with 10-home.css; kept here so .table-row span still overrides it on shared elements. */
.l1-hero-stats span {
  margin-top: .25rem;
}

/* Belongs with 13-pages.css; kept here so .l1-commitment-strip > span still overrides it on shared elements. */
.l1-feature-tags span {
  min-height: 30px;
  font-weight: 700;
}

/* Belongs with 12-solutions.css; kept here so .l1-commitment-strip > span still overrides it on shared elements. */
.l1-launch-step > span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--l1-primary-soft);
  color: var(--l1-primary-dark);
  font-weight: 800;
}

/* Belongs with 10-home.css; kept here so .table-row span still overrides it on shared elements. */
.l1-tool-card span {
  color: var(--l1-text-muted);
  font-size: .92rem;
  line-height: 1.45;
}

/* Belongs with 11-pricing.css; kept here so .l1-commitment-strip strong still overrides it on shared elements. */
.l1-billing-toggle button {
  border: 0;
  background: transparent;
  color: var(--l1-text-muted);
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Belongs with 11-pricing.css; kept here so .table-row span still overrides it on shared elements. */
.l1-commitment-strip > span {
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .02em;
  padding: 0 .55rem;
  text-transform: uppercase;
}

/* Belongs with 11-pricing.css; kept here so .table-row strong still overrides it on shared elements. */
.l1-commitment-strip strong,
.l1-commitment-strip button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 850;
  gap: .45rem;
  padding: .5rem .8rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Belongs with 16-legal.css; kept here so .l1-bento-card h3 still overrides it on shared elements. */
.l1-legal-content h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 .75rem;
}

/* Belongs with 16-legal.css; kept here so .table-row strong still overrides it on shared elements. */
.l1-legal-content strong {
  color: var(--l1-text);
  font-weight: 600;
}

/* Belongs with 12-solutions.css; kept here so .l1-page-hero .l1-breadcrumbs still overrides it on shared elements. */
.l1-public-rendered-page > :last-child {
  margin-bottom: 0;
}

/* Belongs with 13-pages.css; kept here so .table-row span still overrides it on shared elements. */
.l1-contact-card-head span {
  color: var(--l1-primary-dark);
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

/* Belongs with 10-home.css; kept here so .table-row span still overrides it on shared elements. */
.l1-hero-stats span,
.l1-hero .l1-link-arrow {
  color: rgba(255, 255, 255, .72);
}

/* Belongs with 12-solutions.css; kept here so .l1-builder-section .l1-builder-card still overrides it on shared elements. */
.l1-builder-section .l1-builder-card {
  border: 1px solid rgba(80, 88, 100, .13);
  background: #ffffff;
  border-color: #e3e6ee;
}

/* Belongs with 12-solutions.css; kept here so .l1-section-dark .l1-bento-card still overrides it on shared elements. */
.l1-cms-body .l1-builder-card,
.l1-cms-body .l1-plan-fit-card {
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(39, 49, 75, .12);
  border-radius: 12px;
  color: var(--l1-text);
}

/* Belongs with 11-pricing.css; kept here so body.l1-marketing-v2 .l1-btn-ghost still overrides it on shared elements. */
/* !important on
   - background: beats body.l1-marketing-v2 .l1-btn-ghost (03-components.css, later in the cascade) */
.l1-commitment-strip button.is-active {
  color: #1f2227;
  background: #3b7ae8 !important;
}

/* Belongs with 04-chrome.css; kept here so .l1-hero-proof a:hover still overrides it on shared elements. */
.l1-footer-list a:hover,
.l1-footer-bottom a:hover,
.l1-contactbar-link:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Belongs with 10-home.css; kept here so body.l1-marketing-v2 .l1-link-arrow still overrides it on shared elements. */
.l1-hero-proof a:hover {
  text-decoration: underline;
}

/* Belongs with 10-home.css; kept here so body.l1-marketing-v2 .l1-section-dark .l1-eyebrow still overrides it on shared elements. */
body.l1-marketing-v2 .l1-home-hero .l1-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

/* Belongs with 11-pricing.css; kept here so body.l1-marketing-v2 .l1-content-cell still overrides it on shared elements. */
/* !important on
   - box-shadow: beats body.l1-marketing-v2 .l1-pricing-handoff (11-pricing.css, later in the
     cascade) */
body.l1-marketing-v2 .l1-region-board,
body.l1-marketing-v2 .l1-pricing-summary,
body.l1-marketing-v2 .l1-devops-tools,
body.l1-marketing-v2 .l1-pricing-handoff,
body.l1-marketing-v2 .l1-custom-build-note,
body.l1-marketing-v2 .l1-payment-strip,
body.l1-marketing-v2 .l1-plan-includes {
  border-radius: 0;
  box-shadow: none !important;
}

/* Belongs with 14-docs.css; kept here so body.l1-marketing-v2 .l1-content-cell still overrides it on shared elements. */
body.l1-marketing-v2 .l1-kb-search__field,
body.l1-marketing-v2 .l1-kb-answer,
body.l1-marketing-v2 .l1-kb-card__link,
body.l1-marketing-v2 .l1-kb-pager__link,
body.l1-marketing-v2 .l1-kb-result {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-line);
  border-radius: 0;
  box-shadow: none;
}

/* Belongs with 04-chrome.css; kept here so html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost still overrides it on shared elements. */
/* !important on
   - background: beats .l1-commitment-strip button.is-active (03-components.css, later in the
     cascade, also !important)
   - border-color: beats body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost:hover (03-components.css,
     later in the cascade, also !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-cta-card .l1-btn-ghost {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff;
}

/* Belongs with 11-pricing.css; kept here so body.l1-marketing-v2 .l1-content-cell still overrides it on shared elements. */
/* !important on
   - border, box-shadow: beats body.l1-marketing-v2 .l1-plan (11-pricing.css, later in the cascade)
   - border-radius: beats tailwind.css .l1-content-frame .l1-location-card (loads after this bundle,
     also !important) */
body.l1-marketing-v2 .l1-content-cell,
body.l1-marketing-v2 .l1-bento-card,
body.l1-marketing-v2 .l1-plan,
body.l1-marketing-v2 .l1-plan-card,
body.l1-marketing-v2 .l1-testimonial-card,
body.l1-marketing-v2 .l1-contact-card,
body.l1-marketing-v2 .l1-form-card,
body.l1-marketing-v2 .l1-kb-answer,
body.l1-marketing-v2 .l1-kb-card__link,
body.l1-marketing-v2 .l1-kb-result,
body.l1-marketing-v2 .l1-region-board,
body.l1-marketing-v2 .l1-pricing-summary,
body.l1-marketing-v2 .l1-devops-tools,
body.l1-marketing-v2 .l1-custom-build-note,
body.l1-marketing-v2 .l1-status-public .status-hero,
body.l1-marketing-v2 .l1-status-public .public-status-shell,
body.l1-marketing-v2 .l1-status-public .incident-public-card,
body.l1-marketing-v2 .l1-status-public .public-status-group-card {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgba(15, 20, 31, 0.07) !important;
}

/* ---- Buttons ---- */

.l1-btn-primary {
  border: 1px solid var(--l1-primary);
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.l1-btn-ghost {
  border: 1px solid var(--l1-border-strong);
  font-weight: 600;
  transition: all .2s ease;
}

.l1-btn-ghost:hover {
  border-color: var(--l1-primary);
}

.l1-btn-primary:focus-visible,
.l1-btn-ghost:focus-visible,
.l1-btn:focus-visible {
  outline: 2px solid var(--l1-primary);
  outline-offset: 2px;
}

/* !important on border-radius: beats .l1-billing-toggle button (03-components.css, more specific). */
.l1-btn-primary,
.l1-btn-ghost {
  min-height: 40px;
  border-radius: 8px !important;
}

.l1-btn {
  align-items: center;
  display: inline-flex;
  gap: .5rem;
  justify-content: center;
  line-height: 1.2;
  min-height: 42px;
  text-decoration: none;
  user-select: none;
}

.l1-btn:disabled {
  cursor: not-allowed;
  opacity: .58;
}

/* !important on box-shadow: beats bootstrap.min.css .table > :not(caption) > * > * (more specific). */
.l1-btn,
.l1-btn-primary,
.l1-btn-ghost {
  box-shadow: none !important;
  padding: .62rem 1rem;
}

body.l1-marketing-v2 .l1-btn-ghost {
  background: rgba(15, 23, 42, .035);
  color: var(--l1-text);
}

body.l1-marketing-v2 .l1-btn-ghost:hover {
  background: rgba(151, 160, 172, .1);
  color: var(--l1-primary-dark);
}

/* Ghost buttons on navy surfaces. `.ui-btn` loads last (tailwind.css) with
   dark ink, and the base `.l1-btn-ghost` rule
   does the same. Homepage heroes already pinned light-on-dark; inner page
   heroes and the CTA band did not, so "Talk to us" vanished on Partner Program. */
/* !important on
   - background, color: beats body.l1-marketing-v2 .l1-home-guide-list a:hover (10-home.css, more
     specific)
   - border-color: beats body.l1-marketing-v2 .l1-blog-pager [aria-current="page"] (15-blog.css,
     later in the cascade) */
body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost,
body.l1-marketing-v2 .l1-contact-hero .l1-btn-ghost,
body.l1-marketing-v2 .l1-article-hero .l1-btn-ghost,
body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) .l1-btn-ghost,
body.l1-marketing-v2 .l1-cta-card .l1-btn-ghost,
body.l1-marketing-v2 .l1-home-hero .l1-btn-ghost,
body.l1-marketing-v2 .l1-hero#top .l1-btn-ghost,
body.l1-marketing-v2 .l1-section-dark .l1-btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none;
  color: #ffffff !important;
}

/* !important on
   - background: beats .l1-commitment-strip button.is-active (03-components.css, later in the
     cascade, also !important)
   - border-color: beats body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost (03-components.css, later
     in the cascade, also !important)
   - color: beats body.l1-marketing-v2 .l1-section-dark p a (02-layout.css, later in the cascade,
     also !important) */
body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost:hover,
body.l1-marketing-v2 .l1-contact-hero .l1-btn-ghost:hover,
body.l1-marketing-v2 .l1-article-hero .l1-btn-ghost:hover,
body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) .l1-btn-ghost:hover,
body.l1-marketing-v2 .l1-cta-card .l1-btn-ghost:hover,
body.l1-marketing-v2 .l1-home-hero .l1-btn-ghost:hover,
body.l1-marketing-v2 .l1-hero#top .l1-btn-ghost:hover,
body.l1-marketing-v2 .l1-section-dark .l1-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

/* !important on
   - border-radius: beats .l1-btn-primary (03-components.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-btn,
body.l1-marketing-v2 .ui-btn {
  border-radius: 2px !important;
  font-size: 0.83rem;
  font-weight: 620;
  letter-spacing: -0.006em;
}

/* !important on
   - background, box-shadow: beats auth-pages.css .auth-primary-action.button:hover (more specific)
   - border-color: beats .l1-kb-answer__sources a:hover (14-docs.css, later in the cascade)
   - color: beats body.l1-marketing-v2 a:hover (01-base.css, more specific) */
body.l1-marketing-v2 .l1-btn-primary,
body.l1-marketing-v2 .ui-btn--primary.l1-btn,
body.l1-marketing-v2 .ui-btn--primary {
  background: var(--mkt-blue) !important;
  border-color: var(--mkt-blue) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* !important on
   - background: beats .l1-commitment-strip button.is-active (03-components.css, later in the
     cascade, also !important)
   - border-color: beats body.l1-marketing-v2 .l1-btn-primary (03-components.css, later in the
     cascade, also !important)
   - color: beats auth-pages.css body.auth-body.l1-marketing-v2 .auth-consent-stack .checkbox-row
     span a (more specific) */
body.l1-marketing-v2 .l1-btn-primary:hover,
body.l1-marketing-v2 .ui-btn--primary.l1-btn:hover,
body.l1-marketing-v2 .ui-btn--primary:hover {
  background: var(--mkt-blue-hover) !important;
  border-color: var(--mkt-blue-hover) !important;
  color: #ffffff !important;
  transform: none;
}

/* !important on
   - background: beats .l1-commitment-strip button.is-active (03-components.css, later in the
     cascade, also !important)
   - border-color: beats body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost (03-components.css, later
     in the cascade, also !important)
   - color: beats body.l1-marketing-v2 .l1-section-dark p a (02-layout.css, later in the cascade,
     also !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost,
html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero .l1-btn-ghost,
html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero) .l1-btn-ghost,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero .l1-btn-ghost {
  background: transparent !important;
  border-color: var(--mkt-line-strong) !important;
  color: var(--mkt-ink) !important;
}

/* Inline links inside card copy and on the navy bands were marked by colour
   alone (about 1.1:1 against the surrounding text). */
body.l1-marketing-v2 :is(.l1-section-dark p, .l1-content-cell p) a:not(.ui-btn):not(.l1-link-arrow) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ---- Checklists ---- */

.l1-checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.l1-checklist li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
  color: var(--l1-text);
}

.l1-checklist i {
  color: var(--l1-primary);
  font-size: 1.1rem;
}

/* ---- Eyebrows ---- */

.l1-eyebrow-dot {
  animation: none;
}

.l1-eyebrow-spaced {
  margin-bottom: 1.5rem;
}

.l1-eyebrow-live {
  background: rgba(46, 204, 113, .12);
  border-color: rgba(46, 204, 113, .3);
  color: #1f8a4d;
}

.l1-eyebrow {
  margin-bottom: .7rem;
}

body.l1-marketing-v2 .l1-eyebrow {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--mkt-blue-dark);
  display: inline-flex;
  font-family: var(--mkt-mono);
  font-size: 0.66rem;
  font-weight: 650;
  gap: 0.55rem;
  letter-spacing: 0.075em;
  padding: 0;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-eyebrow-dot {
  background: currentColor;
  border-radius: 0;
  box-shadow: none;
  height: 1px;
  width: 18px;
}

body.l1-marketing-v2 .l1-section-dark .l1-eyebrow,
body.l1-marketing-v2 .l1-cta-card .l1-eyebrow {
  color: var(--mkt-on-dark-link);
}

/* ---- Tables ---- */

.table-list {
  border: 1px solid rgba(80, 88, 100, .12);
  border-radius: 8px;
  overflow: hidden;
}

.table-row {
  align-items: center;
  background: rgba(255, 255, 255, .78);
  border-top: 1px solid rgba(80, 88, 100, .1);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 56px;
  padding: .9rem 1rem;
}

.table-row:first-child {
  border-top: 0;
}

.table-row:hover {
  background: rgba(251, 251, 252, .95);
}

.table-row > div {
  min-width: 0;
}

.table-row strong {
  color: var(--l1-text);
  display: block;
  font-weight: 850;
  line-height: 1.25;
}

.table-row span {
  color: var(--l1-text-muted);
  display: block;
  font-size: .9rem;
  line-height: 1.45;
  margin-top: .2rem;
}

.table-row-link {
  color: inherit;
  text-decoration: none;
}

.table-row-link:hover {
  color: inherit;
}

/* ---- Status pills ---- */

/* Canonical status-pill spec - kept identical to the block in css/app.css so
   pills look the same in the client area and the console. */
.status-pill,
.neutral-pill,
.danger-pill,
.warning-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-top: 0;
  min-height: 24px;
  padding: 5px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.neutral-pill {
  background: rgba(91, 98, 120, .08);
  border: 1px solid rgba(91, 98, 120, .18);
  color: #4b5565;
}

.danger-pill {
  background: rgba(180, 35, 24, .08);
  border: 1px solid rgba(180, 35, 24, .2);
  color: #b42318;
}

.warning-pill {
  background: rgba(154, 91, 10, .1);
  border: 1px solid rgba(154, 91, 10, .24);
  color: #9a5b0a;
}

/* ---- Forms ---- */

.l1-turnstile-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  min-height: 0;
}

body.l1-marketing-v2 .l1-contact-card,
body.l1-marketing-v2 .l1-form-card {
  background: var(--mkt-paper);
}

/* ---- Cards and bento grid ---- */

.l1-bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.l1-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  overflow: hidden;
}

.l1-bento-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  transition: opacity .3s ease;
  pointer-events: none;
  background: linear-gradient(90deg, #3b7ae8, #6b9af0);
  height: 3px;
  opacity: 1;
}

.l1-bento-card:hover {
  transform: translateY(-2px);
}

.l1-bento-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.l1-bento-card h3 {
  margin-bottom: .5rem;
}

.l1-bento-card-content p {
  color: var(--l1-text-muted);
  margin-bottom: 0;
}

.l1-bento-card-visual {
  position: relative;
  margin-top: 1.5rem;
  min-width: 0;
}

/* Scroll reveal (classes applied by site.js only, so no-JS users see everything) */
.l1-bento-card.l1-reveal {
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .9, .35, 1), box-shadow .25s ease, border-color .25s ease;
}

.l1-bento-card.l1-reveal:not(.is-revealed) {
  opacity: 0;
  transform: translateY(12px);
}

.l1-bento-card-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.l1-bento-card-link:hover {
  color: inherit;
}

.l1-section-dark .l1-bento-card,
.l1-section-dark .l1-builder-card {
  border-color: transparent;
}

/* The lift itself already existed; the border and shadow were neutral, so the
   hover state carried no brand. Border moves to the brand at partial strength
   (full --l1-brand-border is too assertive on a grid of cards hovered one at a
   time) and the shadow picks up --l1-primary-glow, which is the brand blue at
   16% and already the token the primary button's hover glow uses.

   transition is declared on the base selector, not the :hover, or the card
   snaps back instantly when the pointer leaves. */
.l1-bento-card,
.l1-plan-card {
  transition: border-color var(--l1-transition),
    box-shadow var(--l1-transition),
    transform var(--l1-transition);
}

/* !important on border-radius: beats .l1-plan (10-home.css, later in the cascade). */
.l1-bento-card,
.l1-faq-item,
.l1-location-card,
.l1-plan {
  border-radius: 18px !important;
}

/* !important on
   - overflow: beats bootstrap.min.css .visually-hidden * (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-content-frame {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  overflow: visible !important;
  padding: 0;
}

body.l1-marketing-v2 .l1-bento-grid {
  background: transparent;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-testimonial-card (03-components.css, later in the
     cascade)
   - color: beats body.l1-marketing-v2 a:hover (01-base.css, more specific) */
body.l1-marketing-v2 .l1-content-cell,
body.l1-marketing-v2 .l1-bento-card,
body.l1-marketing-v2 .l1-plan-card,
body.l1-marketing-v2 .l1-faq-item,
body.l1-marketing-v2 .l1-spec-row {
  background: var(--mkt-paper) !important;
  color: var(--mkt-ink) !important;
}

/* !important on
   - background: beats tailwind.css .l1-content-frame .l1-location-card (loads after this bundle,
     also !important)
   - color, box-shadow: beats body.l1-marketing-v2 .l1-content-cell (03-components.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-section-dark .l1-content-cell,
body.l1-marketing-v2 .l1-section-dark .l1-bento-card {
  background: var(--mkt-night-raised) !important;
  color: #ffffff !important;
  border: 0;
  box-shadow: none !important;
}

/* !important on transition: beats * (01-base.css, later in the cascade, also !important). */
body.l1-marketing-v2 .l1-content-cell {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: background-color 0.16s ease, border-color 0.16s ease !important;
}

/* !important on
   - background: beats tailwind.css .l1-content-frame .l1-testimonial-card (loads after this bundle,
     also !important)
   - box-shadow: beats body.l1-marketing-v2 .l1-content-cell (03-components.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 a.l1-content-cell:hover,
body.l1-marketing-v2 .l1-bento-card-link:hover {
  background: var(--mkt-blue-soft) !important;
  transform: none;
  border: 0;
  box-shadow: none !important;
}

body.l1-marketing-v2 .l1-content-cell h3,
body.l1-marketing-v2 .l1-bento-card h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.45rem);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-content-cell p,
body.l1-marketing-v2 .l1-bento-card p {
  color: var(--mkt-muted) !important;
  font-size: 0.91rem;
  line-height: 1.65;
}

body.l1-marketing-v2 .l1-bento-icon,
body.l1-marketing-v2 .l1-feature-icon {
  align-items: center;
  box-shadow: none;
  color: var(--mkt-blue);
  display: inline-flex;
  font-size: 0.82rem;
  justify-content: center;
  margin-bottom: 1.7rem;
}

body.l1-marketing-v2 .l1-section-dark .l1-bento-icon,
body.l1-marketing-v2 .l1-section-dark .l1-feature-icon {
  color: var(--mkt-blue-dark);
  background: var(--mkt-blue-soft);
  border: 0;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-section-dark .l1-content-cell h3,
body.l1-marketing-v2 .l1-section-dark .l1-bento-card h3,
body.l1-marketing-v2 .l1-section-dark .l1-content-cell strong {
  color: var(--mkt-on-dark) !important;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-section-dark .l1-content-cell p,
body.l1-marketing-v2 .l1-section-dark .l1-bento-card p,
body.l1-marketing-v2 .l1-section-dark .tw\:text-ink-muted {
  color: var(--mkt-on-dark-muted) !important;
}

/* !important on
   - background, border-color: beats tailwind.css .l1-content-frame .l1-testimonial-card (loads after
     this bundle, also !important) */
body.l1-marketing-v2 .l1-section-dark a.l1-content-cell:hover,
body.l1-marketing-v2 .l1-section-dark .l1-bento-card-link:hover {
  background: #192235 !important;
  border-color: var(--mkt-blue) !important;
}

/* Content should read as a set of calm layers, not a stack of outlined boxes.
   Borders remain on controls, data tables, and technical diagrams where the
   boundary carries information; editorial cards use spacing and tone instead. */
body.l1-marketing-v2 .l1-bento-grid,
body.l1-marketing-v2 .l1-pick-grid {
  gap: clamp(0.85rem, 1.7vw, 1.25rem);
}

body.l1-marketing-v2 .l1-content-frame.tw\:grid,
body.l1-marketing-v2 .l1-content-frame.l1-include-split,
body.l1-marketing-v2 .l1-content-frame.l1-home-step-grid {
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
}

/* !important on
   - box-shadow: beats body.l1-marketing-v2 .l1-content-cell (03-components.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-content-cell,
body.l1-marketing-v2 .l1-bento-card,
body.l1-marketing-v2 .l1-testimonial-card {
  box-shadow: none !important;
}

body.l1-marketing-v2 .l1-bento-icon,
body.l1-marketing-v2 .l1-feature-icon,
body.l1-marketing-v2 .l1-kb-card__index {
  background: var(--mkt-blue-soft);
  border: 0;
  border-radius: 10px;
  height: 40px;
  width: 40px;
}

body.l1-marketing-v2 .l1-content-frame > .l1-faq-list {
  margin-inline: auto;
}

/* Real workloads: the tag dots were brand blue on navy and the tags small
   and dim; the rows also sat at different heights card to card. */
body.l1-marketing-v2 .l1-content-cell:has(> .l1-bento-card-content) {
  display: flex;
  flex-direction: column;
}

body.l1-marketing-v2 .l1-content-cell > .l1-bento-card-content {
  flex: 1 1 auto;
}

/* Card links ("Discord bot hosting", "Read the SLA") sat wherever the copy
   ended, so they stepped up and down across a row. They share the card
   bottom now. */
/* !important on
   - margin-top: beats .l1-hero-cta .l1-link-arrow (10-home.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-bento-card-content > .l1-link-arrow:last-child,
body.l1-marketing-v2 .l1-content-frame.tw\:grid > article.l1-content-cell > .l1-link-arrow:last-child {
  align-self: flex-start;
  margin-top: auto !important;
  padding-top: 1rem;
}

body.l1-marketing-v2 .l1-content-frame.tw\:grid > article.l1-content-cell:has(> .l1-link-arrow:last-child) {
  display: flex;
  flex-direction: column;
}

/* Plan cards: the "Coming soon" chip touched the plan name and the price
   line touched the description (the template's mt-3 / mt-2 lost to the card resets). */
/* !important on margin-top: beats bootstrap.min.css .mt-3 (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 article.l1-content-cell > .ui-chip + h3 {
  margin-top: 0.75rem !important;
}

body.l1-marketing-v2 article.l1-content-cell > h3 + p + .tw\:text-lg {
  margin-top: 0.85rem;
}

/* The plan rows are separate rounded cards stacked with no gap, so every
   join showed two corner notches. */
body.l1-marketing-v2 .l1-content-frame > article.l1-content-cell.tw\:grid + article.l1-content-cell.tw\:grid {
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .l1-bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .l1-bento-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l1-bento-span-2 {
    grid-column: span 2;
  }

  .l1-bento-grid-2 .l1-bento-span-2 {
    grid-column: span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l1-bento-card:hover,
  .l1-plan-card:hover {
    transform: none;
  }
}

/* ---- FAQ accordion ---- */

.l1-faq-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.l1-faq-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}

/* Same measure as the heading block above it. .l1-faq-handoff is capped at 920px
   and centred while this list filled the whole container,
   so on a 1440px viewport the "Common questions." heading sat 94px inside the
   first card's left edge and the two read as different columns. 920px is also a
   better line length for the answers than the container's 1108px.

   let_promo.html pins its own list with tw:max-w-4xl; utilities are unlayered so
   that page keeps its 896px and is unaffected. */
.l1-faq-list {
  display: grid;
  margin-inline: auto;
}

.l1-faq-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.l1-faq-item > summary {
  align-items: center;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
}

.l1-faq-item > summary::-webkit-details-marker {
  display: none;
}

.l1-faq-item > summary h3 {
  flex: 1 1 auto;
  margin: 0;
}

.l1-faq-item > summary::after {
  border-bottom: 2px solid var(--l1-text-muted);
  border-right: 2px solid var(--l1-text-muted);
  content: "";
  flex: 0 0 auto;
  height: 0.45rem;
  margin-top: -0.15rem;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  width: 0.45rem;
}

.l1-faq-item[open] > summary {
  margin-bottom: 0.65rem;
}

.l1-faq-item[open] > summary::after {
  margin-top: 0.15rem;
  transform: rotate(225deg);
}

.l1-faq-item > summary:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--l1-primary);
  outline-offset: 4px;
}

.l1-faq-item p {
  margin: 0;
}

body.l1-marketing-v2 .l1-faq-item,
body.l1-marketing-v2 .l1-testimonial-card {
  background: #fff;
}

body.l1-marketing-v2 .l1-faq-list {
  gap: 0;
  max-width: 900px;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-faq-item (03-components.css, later in the cascade,
     also !important)
   - border-bottom: beats tailwind.css .l1-content-frame .l1-faq-item (loads after this bundle, also
     !important)
   - border-radius: beats .l1-faq-item (03-components.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-faq-item {
  padding: 1.25rem 1.35rem;
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--mkt-line) !important;
  border-radius: 0 !important;
  box-shadow: none;
  margin: 0;
  padding-inline: 0;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-faq-item p {
  color: var(--mkt-muted) !important;
}

/* Home and features FAQ: the heading block is centred at 920px while a
   content-frame reset pinned the list to the left edge, so the two read as
   different columns. One 900px centred column for both. */
body.l1-marketing-v2 .l1-faq-handoff {
  max-width: 900px;
}

/* FAQ blocks (home, features, Solutions, regional, /faq/): a 900px column
   centred at x=270 under headings that start at x=140. Keep the readable
   width, start it on the content edge. */
/* !important on
   - margin-left, margin-right: beats body.l1-marketing-v2 .l1-content-frame > .l1-faq-list
     (03-components.css, more specific) */
body.l1-marketing-v2 .l1-faq-list,
body.l1-marketing-v2 .l1-faq-handoff {
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (max-width: 991.98px) {
  .l1-faq-handoff {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .l1-faq-handoff {
    padding: 0;
  }
}

/* ---- Breadcrumbs ---- */

.l1-breadcrumbs {
  padding: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--l1-text-muted);
}

.l1-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.l1-breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--l1-text-dim);
}

/* Breadcrumbs sit inside dark heroes on CMS/blog pages. */
.l1-page-hero .l1-breadcrumbs,
.l1-article-hero .l1-breadcrumbs {
  margin-bottom: 1rem;
  padding-top: 0;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-breadcrumbs,
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-breadcrumbs li,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero .l1-breadcrumbs,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero .l1-breadcrumbs li {
  color: var(--mkt-muted) !important;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-breadcrumbs a,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero .l1-breadcrumbs a {
  color: var(--mkt-blue-dark) !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-breadcrumbs li:not(:last-child)::after,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero .l1-breadcrumbs li:not(:last-child)::after {
  color: var(--mkt-muted);
}

/* ---- Arrow links ---- */

/* !important on color: beats body.l1-marketing-v2 a:hover (01-base.css, more specific). */
body.l1-marketing-v2 .l1-link-arrow {
  color: var(--mkt-ink) !important;
  font-size: 0.83rem;
  font-weight: 620;
  text-decoration: none;
}

/* ---- Panels, chips and stats ---- */

/* !important on
   - border, border-radius: beats .l1-solution-landing .l1-plan-fit-card (12-solutions.css, later in
     the cascade, also !important)
   - box-shadow: beats .l1-plan-fit-card (10-home.css, later in the cascade, also !important) */
body.l1-marketing-v2 main .ui-panel {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgba(15, 20, 31, 0.07) !important;
}

@media (max-width: 767.98px) {
  /* The "8 deploy options" chip stretched into a full-width bar once the
     family header stacked on phones. */
  body.l1-marketing-v2 .tw\:flex-col > .ui-chip {
    align-self: flex-start;
  }
}

/* ---- 04-chrome.css ---- */
/* 04-chrome.css
   Site chrome on every public page: contact bar, navbar with dropdowns, account menu and phone
   menu, closing CTA band and footer.
 */

/* ---- Page rules that must come before the shared rules below ---- */

/* Belongs with 10-home.css; kept here so .l1-plan .l1-btn still overrides it on shared elements. */
.l1-home-plans .l1-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Belongs with 11-pricing.css; kept here so .l1-navbar .l1-nav-cta still overrides it on shared elements. */
.l1-plan .l1-btn {
  margin-top: 1.1rem;
}

/* ---- Navbar ---- */

.l1-navbar {
  transition: background .25s ease, padding .25s ease, backdrop-filter .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.l1-navbar > .l1-container {
  position: relative;
}

.l1-brand img {
  display: block;
  transition: height .25s ease;
}

.l1-navbar .l1-nav-link {
  transition: background .16s ease, color .16s ease;
}

.l1-nav-profile {
  align-items: center;
  display: flex;
  margin-right: -.35rem;
}

.l1-nav-shell {
  align-items: center;
  display: flex;
  margin: 0 auto;
  position: relative;
  max-width: min(100% - 2rem, 1190px);
}

.l1-nav-collapse {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.l1-nav-links {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.l1-nav-toggle {
  align-items: center;
  background: #ffffff;
  border-radius: 9px;
  cursor: pointer;
  display: none;
  height: 42px;
  justify-content: center;
  margin-left: auto;
  width: 42px;
  border: 1px solid var(--l1-border-strong);
}

.l1-brand {
  align-items: center;
  display: inline-flex;
  min-width: 0;
}

body.l1-marketing-v2 .l1-navbar,
body.l1-marketing-v2 .l1-navbar.l1-navbar-scrolled,
body.l1-marketing-v2 .l1-navbar.l1-navbar-dashboard {
  background: rgba(255, 255, 255, .92);
}

body.l1-marketing-v2 .l1-navbar.l1-navbar-scrolled,
body.l1-marketing-v2 .l1-navbar.l1-navbar-dashboard {
  background: rgba(255, 255, 255, .96);
}

body.l1-marketing-v2 .l1-brand img,
body.l1-marketing-v2 .l1-footer-brand img {
  filter: none;
}

body.l1-marketing-v2 .l1-nav-toggle {
  border-color: var(--l1-border-strong);
  color: var(--l1-text);
}

html[data-l1-theme] .l1-navbar {
  left: auto;
  right: auto;
}

/* Nav deploy CTA: a real button in the account cluster, not another text link. */
/* !important on
   - font-size: beats body.l1-marketing-v2 .l1-btn (03-components.css, more specific)
   - min-height: beats body.l1-marketing-v2 .l1-nav-cta (04-chrome.css, more specific) */
.l1-navbar .l1-nav-cta {
  align-self: center;
  font-size: .88rem !important;
  margin-inline-end: .35rem;
  min-height: 36px !important;
  white-space: nowrap;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-navbar.l1-navbar-scrolled (04-chrome.css, more
     specific) */
body.l1-marketing-v2 .l1-navbar {
  background: color-mix(in srgb, var(--mkt-paper) 94%, transparent) !important;
  border: 0;
  border-bottom: 1px solid var(--mkt-line);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1030;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.l1-marketing-v2 .l1-nav-shell {
  min-height: 74px;
  padding: 0 clamp(1.25rem, 3.2vw, 2.5rem);
  width: min(100%, 1240px);
}

/* !important on
   - height: beats bootstrap.min.css .h-100 (a Bootstrap utility that is itself !important)
   - width: beats bootstrap.min.css .w-100 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-brand img {
  aspect-ratio: auto;
  height: auto !important;
  max-height: none;
  object-fit: contain;
  width: 142px !important;
}

body.l1-marketing-v2 .l1-nav-collapse {
  align-items: center;
}

body.l1-marketing-v2 .l1-nav-links {
  gap: 0.15rem;
  margin-inline: auto;
}

body.l1-marketing-v2 .l1-nav-cta {
  min-height: 38px;
  min-width: 82px;
  padding: 0.55rem 1rem;
}

/* Brand lockup, light vs dark surfaces.
   Two <img> elements swapped here rather than one chosen while rendering: the
   theme toggle rewrites data-l1-theme at runtime, so a server-side choice would
   keep serving the wrong wordmark until the next page load.
   The parent class is in every selector on purpose. `.l1-brand img` is (0,1,1),
   so a bare `.l1-brand-logo--dark` at (0,1,0) would lose and both lockups would
   render side by side. */
.l1-brand .l1-brand-logo--dark {
  display: none;
}

/* Phone menu: tapping the toggle left Bootstrap's heavy dark focus shadow on
   it; keyboard focus keeps the site's ring. */
body.l1-marketing-v2 .l1-nav-toggle:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

body.l1-marketing-v2 .l1-nav-contact {
  display: none;
}

@media (max-width: 991.98px) {
  .l1-navbar .l1-nav-link {
    border-bottom: 1px solid var(--l1-border);
    border-bottom-color: var(--l1-border);
  }

  .l1-nav-profile {
    display: block;
    margin-right: 0;
  }

  .l1-nav-toggle {
    display: inline-flex;
  }

  .l1-nav-collapse {
    display: none;
    flex-direction: column;
    gap: .4rem;
    left: 1rem;
    position: absolute;
    right: 1rem;
    top: calc(100% + .55rem);
  }

  .l1-navbar .l1-nav-collapse.show {
    display: flex;
  }

  body.l1-marketing-v2 .l1-navbar,
  body.l1-marketing-v2 .l1-navbar.l1-navbar-scrolled,
  body.l1-marketing-v2 .l1-navbar.l1-navbar-dashboard,
  body.l1-marketing-v2 .l1-navbar .l1-nav-collapse {
    background: rgba(255, 255, 255, .98);
  }

  .l1-navbar .l1-nav-cta {
    margin: .35rem 0 0;
    width: 100%;
  }

  body.l1-marketing-v2 .l1-nav-shell {
    min-height: 66px;
  }

  /* !important on
     - background: beats body.l1-marketing-v2 .l1-navbar .l1-nav-collapse (04-chrome.css, more
       specific) */
  body.l1-marketing-v2 .l1-nav-collapse {
    background: var(--mkt-paper) !important;
    border: 0;
    border-bottom: 1px solid var(--mkt-line);
    border-radius: 0;
    box-shadow: 0 18px 36px rgba(15, 20, 31, 0.08);
    margin: 0 calc(clamp(1.25rem, 3.2vw, 2.5rem) * -1);
    padding: 1rem clamp(1.25rem, 3.2vw, 2.5rem) 1.25rem;
  }

  body.l1-marketing-v2 .l1-nav-links {
    margin: 0;
  }

  /* Phone menu Deploy button was 36px tall, under the 44px touch target. */
  /* !important on
     - min-height: beats .l1-navbar .l1-nav-cta (04-chrome.css, later in the cascade, also !important) */
  body.l1-marketing-v2 .l1-nav-collapse .l1-nav-cta {
    min-height: 44px !important;
  }
}

@media (max-width: 767.98px) {
  body.l1-marketing-v2 .l1-nav-contact {
    align-self: stretch;
    border-top: 1px solid var(--mkt-line);
    display: flex;
    margin-top: 0.8rem;
    padding-top: 0.4rem;
  }

  body.l1-marketing-v2 .l1-nav-contact .l1-nav-link {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: flex-start;
  }

  body.l1-marketing-v2 .l1-nav-contact .l1-nav-link i {
    color: var(--mkt-muted);
    font-size: 0.75rem;
    width: 1rem;
  }
}

@media (min-width: 992px) {
  .l1-nav-collapse {
    justify-content: flex-end;
    position: static;
  }

  body.l1-marketing-v2 .l1-nav-shell {
    max-width: 1240px;
  }
}

/* ---- Dropdown menus and the account menu ---- */

.l1-profile-toggle {
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: background .15s ease, opacity .15s ease;
}

.l1-profile-toggle:hover,
.l1-profile-toggle:focus {
  background: transparent;
  box-shadow: none;
  opacity: .8;
}

.l1-profile-toggle.l1-menu-trigger::after {
  display: none;
}

.l1-profile-avatar {
  display: block;
  height: 34px;
  object-fit: cover;
  width: 34px;
}

.l1-profile-avatar-blank {
  display: grid;
  overflow: hidden;
  place-items: center;
}

.l1-profile-avatar-blank i {
  display: block;
  font-size: 0.9rem;
  line-height: 1;
  transform: translateY(0.5px);
}

.l1-dropdown {
  margin-top: .5rem;
  min-width: 14rem;
}

.l1-dropdown .l1-menu-link {
  font-weight: 650;
  transition: background .12s, color .12s;
  align-items: center;
  display: flex;
  min-height: 38px;
}

.l1-dropdown .l1-menu-link.active {
  background: var(--l1-primary);
}

.l1-profile-link {
  align-items: center;
  display: flex;
  gap: .65rem;
  font-weight: 650;
}

.l1-profile-link i {
  color: var(--l1-text-muted);
  text-align: center;
  width: 1rem;
}

.l1-profile-link:hover i,
.l1-profile-link:focus i {
  color: var(--l1-primary);
}

.l1-profile-signout {
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
}

.l1-navbar .l1-nav-item.l1-menu .l1-menu-trigger::after {
  margin-left: .4rem;
  vertical-align: .12em;
  opacity: .7;
}

.l1-dropdown .l1-menu-link i {
  text-align: center;
}

.l1-dropdown .l1-menu-divider {
  margin: .35rem .25rem;
}

.l1-nav-links,
.l1-account-nav {
  align-items: center;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.l1-account-nav {
  margin-left: auto;
  position: relative;
  z-index: 3;
}

.l1-nav-link,
.l1-menu-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: .35rem;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
  white-space: nowrap;
}

.l1-nav-link:hover,
.l1-nav-link.active,
.l1-menu-trigger:hover,
.l1-menu-trigger.active,
.l1-menu .dropdown-toggle.show,
.l1-menu .dropdown-toggle[aria-expanded="true"] {
  background: rgba(120, 131, 146, 0.08);
  color: var(--l1-text);
}

.l1-menu {
  position: relative;
}

.l1-menu-trigger i {
  font-size: .7rem;
  transition: transform .16s ease;
}

.l1-menu:not(.l1-nav-profile) .dropdown-toggle.show i,
.l1-menu:not(.l1-nav-profile) .dropdown-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.l1-menu-panel {
  background: #ffffff;
  border: 1px solid var(--l1-border);
  display: none;
  gap: .15rem;
  left: 0;
  list-style: none;
  margin: .55rem 0 0;
  min-width: 250px;
  padding: .45rem;
  position: absolute;
  top: 100%;
  z-index: 40;
}

.l1-menu-panel-end {
  left: auto;
  right: 0;
}

.l1-menu-panel.show {
  display: grid;
}

.l1-menu-link {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  font: inherit;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.l1-menu-link:hover,
.l1-menu-link:focus {
  background: var(--l1-primary-soft);
}

.l1-menu-divider,
.l1-profile-divider {
  border: 0;
  border-top: 1px solid var(--l1-border);
  margin: .35rem .45rem;
}

.l1-nav-toggle:focus-visible,
.l1-menu-trigger:focus-visible,
.l1-menu-link:focus-visible {
  outline: 2px solid var(--l1-primary);
  outline-offset: 2px;
}

.l1-nav-profile .l1-profile-toggle {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 0;
  min-height: 0;
}

.l1-nav-profile .l1-profile-toggle::after {
  display: none;
}

.l1-nav-profile .l1-profile-toggle:hover,
.l1-nav-profile .l1-profile-toggle:focus,
.l1-nav-profile .l1-profile-toggle.show,
.l1-nav-profile .l1-profile-toggle[aria-expanded="true"] {
  background: rgba(120, 131, 146, .08);
  color: var(--l1-text);
}

.l1-profile-toggle .l1-profile-avatar-blank i {
  color: var(--l1-brand-strong);
  height: auto;
  line-height: 1;
  transform: translateY(0.5px);
  transition: none;
  width: auto;
  font-size: .9rem;
}

/* !important on
   - transform: beats .l1-menu:not(.l1-nav-profile) .dropdown-toggle.show i (04-chrome.css, more
     specific) */
.l1-nav-profile .l1-profile-toggle.show > i,
.l1-nav-profile .l1-profile-toggle[aria-expanded="true"] > i {
  transform: none !important;
}

@media (max-width: 991.98px) {
  .l1-menu-panel,
  .l1-menu-panel-end {
    box-shadow: none;
    left: auto;
    margin: .35rem 0 .45rem;
    min-width: 0;
    position: static;
    right: auto;
    width: 100%;
  }
}

.l1-dropdown,
.l1-menu-panel {
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 39, 63, .12);
}

.l1-profile-dropdown {
  min-width: 18rem;
  padding: .45rem;
}

.l1-profile-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: .8rem .8rem .7rem;
}

.l1-profile-email {
  color: var(--l1-text);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.l1-profile-role {
  color: var(--l1-text-muted);
  font-size: .82rem;
  margin-top: .18rem;
}

.l1-theme-toggle {
  cursor: pointer;
  width: 100%;
}

.l1-theme-toggle [data-l1-theme-icon] {
  text-align: center;
  width: 1.05rem;
}

.l1-profile-actions-row {
  align-items: center;
  display: grid;
  gap: .35rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: .1rem;
}

.l1-profile-actions-row .l1-menu-link {
  margin: 0;
}

.l1-profile-signout-form {
  margin: 0;
}

.l1-profile-signout-compact {
  gap: .45rem;
  white-space: nowrap;
}

body.l1-marketing-v2 .l1-navbar .l1-nav-link:hover,
body.l1-marketing-v2 .l1-navbar .l1-nav-link.active,
body.l1-marketing-v2 .l1-navbar .l1-menu-trigger[aria-expanded="true"] {
  background: rgba(151, 160, 172, .1);
}

body.l1-marketing-v2 .l1-dropdown .l1-menu-link:hover,
body.l1-marketing-v2 .l1-dropdown .l1-menu-link:focus {
  background: rgba(151, 160, 172, .1);
}

body.l1-marketing-v2 .l1-menu-divider,
body.l1-marketing-v2 .l1-profile-divider {
  border-color: var(--l1-border);
}

body.l1-marketing-v2 .l1-profile-avatar {
  background: #eff4ff;
  color: var(--l1-primary-dark);
  border: 1px solid var(--mkt-line);
  border-radius: 999px;
  overflow: hidden;
}

/* !important on
   - height, width: beats .l1-profile-card-avatar (04-chrome.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-profile-avatar-blank {
  background: var(--l1-brand-soft);
  color: var(--l1-brand-strong);
  flex: 0 0 28px;
  height: 28px !important;
  width: 28px !important;
}

/* !important on color: beats components.css .l1-notifbell__menu .dropdown-item:hover (more specific). */
body.l1-marketing-v2 .l1-profile-signout-compact {
  color: #b42318 !important;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-dropdown .l1-menu-link:hover (04-chrome.css, more
     specific)
   - color: beats body.l1-marketing-v2 .l1-profile-signout-compact (04-chrome.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-profile-signout-compact:hover,
body.l1-marketing-v2 .l1-profile-signout-compact:focus {
  background: rgba(180, 35, 24, .1) !important;
  color: #8a1f16 !important;
}

/* !important on
   - height: beats .l1-profile-card-avatar (04-chrome.css, later in the cascade, also !important)
   - width: beats app.css .l1-simple-checkout [data-payment-provider-submit] (loads after this
     bundle) */
.l1-profile-toggle .l1-profile-avatar,
.l1-profile-toggle .l1-profile-avatar-blank {
  height: 28px !important;
  max-height: 28px;
  width: 28px !important;
}

.l1-profile-card .l1-profile-avatar-blank i {
  font-size: 1.2rem;
}

/* !important on
   - height: beats bootstrap.min.css .collapsing.collapse-horizontal (more specific)
   - width: beats .l1-commitment-strip > span (11-pricing.css, more specific) */
.l1-profile-card-avatar {
  height: 44px !important;
  margin-bottom: .55rem;
  max-height: 44px;
  width: 44px !important;
}

/* Was rgba(151, 160, 172, .1), a grey with no relationship to the palette. The
   wash now derives from --l1-brand via color-mix, so it tracks the brand token
   and cannot drift the way a literal would. Kept low (10%) because the navbar is
   persistent chrome; a saturated hover on every link reads as noise. */
body.l1-marketing-v2 .l1-navbar .l1-nav-link:hover,
body.l1-marketing-v2 .l1-navbar .l1-nav-link.active,
body.l1-marketing-v2 .l1-navbar .l1-menu-trigger:hover,
body.l1-marketing-v2 .l1-navbar .l1-menu-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--l1-brand) 10%, transparent);
}

/* Dropdown items get the same treatment so the menu does not switch vocabulary
   halfway through the interaction. */
body.l1-marketing-v2 .l1-dropdown .l1-menu-link:hover,
body.l1-marketing-v2 .l1-dropdown .l1-menu-link:focus-visible {
  background: color-mix(in srgb, var(--l1-brand) 8%, transparent);
}

/* !important on
   - border-radius: beats .l1-navbar .l1-nav-link:focus-visible (04-chrome.css, more specific)
   - color: beats body.l1-marketing-v2 a:hover (01-base.css, more specific)
   - padding: beats bootstrap.min.css .navbar-expand-lg .navbar-nav .nav-link (more specific) */
body.l1-marketing-v2 .l1-nav-link,
body.l1-marketing-v2 .l1-menu-trigger {
  border-radius: 0 !important;
  color: var(--mkt-ink) !important;
  font-size: 0.82rem;
  font-weight: 570;
  letter-spacing: -0.005em;
  padding: 0.7rem 0.72rem !important;
}

body.l1-marketing-v2 .l1-nav-link::before,
body.l1-marketing-v2 .l1-menu-trigger::before {
  content: none;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-navbar .l1-nav-link:hover (04-chrome.css, more
     specific)
   - color: beats auth-pages.css body.auth-body.l1-marketing-v2 .auth-consent-stack .checkbox-row
     span a (more specific) */
body.l1-marketing-v2 .l1-nav-link:hover,
body.l1-marketing-v2 .l1-nav-link.active,
body.l1-marketing-v2 .l1-menu-trigger:hover,
body.l1-marketing-v2 .l1-menu-trigger.active {
  background: transparent !important;
  color: var(--mkt-blue-dark) !important;
}

body.l1-marketing-v2 .l1-dropdown {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-line);
  border-radius: 2px;
  box-shadow: 0 18px 50px rgba(15, 20, 31, 0.12);
  padding: 0.45rem;
}

/* !important on color: beats body.l1-marketing-v2 a:hover (01-base.css, more specific). */
body.l1-marketing-v2 .l1-menu-link {
  border-radius: 1px;
  color: var(--mkt-ink) !important;
  font-size: 0.82rem;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-menu-link i {
  color: var(--mkt-muted) !important;
  font-size: 0.75rem;
  width: 1rem;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-dropdown .l1-menu-link:hover (04-chrome.css, more
     specific)
   - color: beats auth-pages.css body.auth-body.l1-marketing-v2 .auth-consent-stack .checkbox-row
     span a (more specific) */
body.l1-marketing-v2 .l1-menu-link:hover {
  background: var(--mkt-blue-soft) !important;
  color: var(--mkt-blue-dark) !important;
}

body.l1-marketing-v2 .l1-account-nav {
  align-items: center;
  gap: 0.4rem;
}

/* !important on
   - border-radius: beats .l1-navbar .l1-menu-trigger:focus-visible (04-chrome.css, more specific)
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific)
   - padding: beats bootstrap.min.css .navbar-expand-lg .navbar-nav .nav-link (more specific) */
body.l1-marketing-v2 .l1-profile-toggle {
  align-items: center;
  border-radius: 999px !important;
  display: inline-flex !important;
  height: 40px;
  justify-content: center;
  padding: 0 !important;
  width: 40px;
}

/* !important on
   - background: beats body.l1-marketing-v2 .l1-dropdown .l1-menu-link:hover (04-chrome.css, more
     specific)
   - color: beats auth-pages.css body.auth-body.l1-marketing-v2 .auth-consent-stack .checkbox-row
     span a (more specific) */
body.l1-marketing-v2 .l1-menu-link[aria-current="page"] {
  background: var(--mkt-blue-soft) !important;
  color: var(--mkt-blue-dark) !important;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-menu-link[aria-current="page"] i {
  color: inherit !important;
}

@media (max-width: 991.98px) {
  .l1-navbar .l1-nav-item:last-child .l1-nav-link,
  .l1-navbar .l1-nav-item.l1-menu .l1-nav-link {
    border-bottom: 0;
  }

  /* Dropdown: inline (static) inside the collapsed mobile menu.
     !important keeps mobile menu positioning predictable. */
  /* !important on
     - position, transform, inset: holds against inline styles: Popper positions open dropdowns with
       inline styles */
  .l1-navbar .l1-nav-item.l1-menu .l1-menu-panel.l1-dropdown {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    float: none;
    display: none;
    width: 100%;
    margin: 0 0 .5rem;
  }

  .l1-navbar .l1-nav-item.l1-menu .l1-menu-panel.l1-dropdown.show {
    display: block;
  }

  .l1-navbar .l1-nav-item.l1-menu .l1-menu-link {
    font-size: 1rem;
  }

  .l1-navbar .l1-nav-item.l1-menu .l1-menu-trigger::after {
    margin-left: .35rem;
    vertical-align: .1em;
    transition: transform .2s ease;
  }

  .l1-navbar .l1-nav-item.l1-menu.show .l1-menu-trigger::after,
  .l1-navbar .l1-nav-item.l1-menu .l1-menu-trigger[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  .l1-navbar .l1-nav-profile .l1-menu-panel.l1-profile-dropdown {
    width: 100%;
  }

  .l1-nav-links,
  .l1-account-nav {
    align-items: stretch;
    flex-direction: column;
    position: static;
    transform: none;
    width: 100%;
  }

  .l1-account-nav {
    margin-left: 0;
  }

  .l1-nav-link,
  .l1-menu-trigger {
    justify-content: space-between;
    width: 100%;
  }

  body.l1-marketing-v2 .l1-account-nav {
    align-items: stretch;
    border-top: 1px solid var(--mkt-line);
    margin-top: 0.8rem;
    padding-top: 0.8rem;
  }

  body.l1-marketing-v2 .l1-account-nav .l1-nav-profile,
  body.l1-marketing-v2 .l1-account-nav .l1-profile-toggle {
    width: 100%;
  }

  body.l1-marketing-v2 .l1-account-nav .l1-profile-toggle {
    gap: 0.65rem;
    height: 44px;
    justify-content: flex-start;
  }

  body.l1-marketing-v2 .l1-account-nav .l1-profile-toggle::before {
    color: var(--mkt-ink);
    content: "Account";
    display: inline;
    font-size: 0.82rem;
    font-weight: 620;
    order: 2;
  }

  /* !important on
     - margin-left: beats .l1-navbar .l1-nav-item.l1-menu .l1-menu-trigger::after (04-chrome.css, more
       specific) */
  body.l1-marketing-v2 .l1-account-nav .l1-profile-toggle::after {
    margin-left: auto !important;
    order: 3;
  }
}

/* ---- Closing CTA band ---- */

/* !important on max-width: beats .l1-hero .col-lg-6 (10-home.css, more specific). */
.l1-cta-card h2 {
  position: relative;
  max-width: 16ch !important;
}

.l1-cta-card p {
  position: relative;
}

body.l1-marketing-v2 .l1-section-alt,
body.l1-marketing-v2 .l1-footer,
body.l1-marketing-v2 .l1-cta-section,
body.l1-marketing-v2 .l1-builder-page,
body.l1-marketing-v2 .l1-public-rendered-page {
  background: var(--l1-bg-2);
}

/* Closing CTA band: the card was a centred 980px box with 51px gutters, so its
   heading started at x=281 and its buttons ended at x=1159 while every other
   section spans 140 to 1300. */
/* !important on
   - background, box-shadow: beats body.l1-marketing-v2 .l1-cta-card (11-pricing.css, later in the
     cascade)
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-cta-card {
  --bs-card-bg: transparent;
  justify-items: stretch;
  min-height: 0;
  overflow: hidden;
  position: relative;
  text-align: left;
  color: #ffffff;
  align-items: end;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  display: grid !important;
  gap: 3rem;
  grid-template-columns: minmax(0, 1.5fr) auto;
  padding: clamp(3.25rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.2rem);
  margin-inline: 0;
  max-width: none;
  padding-inline: 0;
}

body.l1-marketing-v2 .l1-cta-card::before {
  background: linear-gradient(180deg, var(--l1-primary), #14b8a6);
  inset: 0 auto 0 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  width: 4px;
  z-index: 1;
  content: none;
  display: none;
}

body.l1-marketing-v2 .l1-cta-card::after,
body.l1-marketing-v2 .l1-cta-glow {
  display: none;
}

.l1-cta-card > :not(.l1-cta-glow) {
  position: relative;
  z-index: 2;
}

/* !important on
   - color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - font-size, letter-spacing, line-height: beats body.l1-marketing-v2 .l1-article-prose h2
     (15-blog.css, later in the cascade)
   - margin: beats .l1-hero#top .l1-hero-row > .col-lg-6 (10-home.css, more specific) */
body.l1-marketing-v2 .l1-cta-card h2 {
  grid-column: 1;
  color: #ffffff !important;
  font-size: var(--cta-title-size, clamp(2.7rem, 5.4vw, 5.3rem)) !important;
  font-weight: 610;
  letter-spacing: var(--cta-title-tracking, -0.05em) !important;
  line-height: var(--cta-title-leading, 0.98) !important;
  margin: 0 0 1.25rem !important;
  word-spacing: 0.03em;
}

/* !important on color: beats body.l1-marketing-v2 .l1-article-prose p (15-blog.css, later in the cascade). */
body.l1-marketing-v2 .l1-cta-card p {
  grid-column: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 620px;
}

.l1-cta-card .l1-cta-buttons {
  flex-wrap: wrap;
  gap: .65rem;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: flex-end;
}

/* !important on
   - background: beats .l1-commitment-strip button.is-active (03-components.css, later in the
     cascade, also !important)
   - border-color: beats body.l1-marketing-v2 .l1-btn-primary (03-components.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-cta-card .l1-btn-primary {
  box-shadow: none;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* Code/value chips (e.g. the LET promo code) sit on a light "surface" fill
   even inside this always-dark card, so they need their own light-on-dark
   treatment instead of inheriting `.l1-cta-card p`'s near-white text,
   otherwise it's near-white text on a near-white chip. */
body.l1-marketing-v2 .l1-cta-card .l1-cta-code {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #ffffff;
}

.l1-cta-glow {
  inset: -20% -10%;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.l1-cta-copy,
.l1-cta-buttons {
  position: relative;
  z-index: 1;
}

.l1-cta-copy {
  min-width: 0;
}

.l1-cta-card .l1-eyebrow,
.l1-cta-card .l1-cta-code {
  justify-self: start;
}

.l1-cta-buttons {
  flex-wrap: wrap;
  gap: 0.75rem;
}

body.l1-marketing-v2 .l1-cta-section {
  background: var(--mkt-night);
  background-image: none;
  padding: 0;
}

body.l1-marketing-v2 .l1-cta-glow {
  display: none;
}

body.l1-marketing-v2 .l1-cta-buttons {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  min-width: 190px;
}

/* !important on
   - background: beats .l1-commitment-strip button.is-active (03-components.css, later in the
     cascade, also !important)
   - border-color: beats body.l1-marketing-v2 .l1-btn-primary (03-components.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-cta-card .l1-btn-primary:hover {
  background: #e8eefb !important;
  border-color: #e8eefb !important;
}

/* !important on border: beats body.l1-marketing-v2 .l1-cta-card (11-pricing.css, later in the cascade). */
body.l1-marketing-v2 .l1-cta-section,
body.l1-marketing-v2 .l1-cta-card {
  border: 0 !important;
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-btn-primary (03-components.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-cta-card .l1-btn-primary,
body.l1-marketing-v2 .l1-cta-card .l1-btn-primary:hover {
  color: #10151f !important;
}

/* Headings: no single word left alone on the last line ("plan.", "here."). */
body.l1-marketing-v2 :is(.l1-section-title, .l1-page-hero h1, .l1-cta-card h2) {
  text-wrap: pretty;
}

body.l1-marketing-v2 .l1-cta-copy {
  max-width: 720px;
}

@media (max-width: 991.98px) {
  body.l1-marketing-v2 .l1-cta-card {
    align-items: start;
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-cta-buttons {
    flex-direction: row;
  }
}

@media (max-width: 767.98px) {
  /* On phones the band kept 24px of extra inset and a 48px gap above the
     buttons. */
  body.l1-marketing-v2 .l1-cta-card {
    text-align: left;
    gap: 1.75rem;
  }

  .l1-cta-card .l1-cta-buttons {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 1rem;
  }

  body.l1-marketing-v2 .l1-cta-buttons {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .l1-cta-buttons .l1-btn {
    width: 100%;
  }
}

/* ---- Footer ---- */

.l1-footer-brand img {
  display: block;
  margin-bottom: 1rem;
}

.l1-footer-tagline {
  margin-bottom: 1.5rem;
}

.l1-footer-title {
  margin-bottom: 1.25rem;
}

.l1-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.l1-social {
  display: flex;
  gap: .75rem;
}

.l1-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.l1-footer-bottom {
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.l1-footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.l1-footer-legal {
  display: block;
  margin-top: .25rem;
}

.l1-footer a {
  transition: color .15s ease;
}

/* Shared public helpers. These intentionally live in the website bundle so
   marketing pages can render without the portal companion stylesheet. */
.l1-footer-bottom-meta {
  display: flex;
  justify-content: flex-end;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-footer {
  background: var(--mkt-footer-bg);
  border: 0;
  color: #9ca7b7;
  padding: clamp(4rem, 7vw, 6.5rem) 0 1.5rem;
}

body.l1-marketing-v2 .l1-footer-top {
  border: 0;
  gap: 2.5rem 1.5rem;
  padding-bottom: 4rem;
}

body.l1-marketing-v2 .l1-footer-brand img {
  /* The brightness(0) invert(1) that used to live here flattened the whole
     lockup to a white silhouette so the navy wordmark would read on the dark
     footer, which also threw away the mark's blue. The footer now gets the
     white-wordmark lockup as artwork, so the filter is gone and the mark
     keeps its gradient. */
  height: auto;
  opacity: 0.96;
  width: 150px;
}

/* !important on
   - color: beats .l1-public-rendered-page > header:not([class]) p (02-layout.css, more specific) */
body.l1-marketing-v2 .l1-footer-tagline {
  color: #8f9aaa !important;
  font-size: 0.76rem;
  line-height: 1.75;
  max-width: 310px;
}

body.l1-marketing-v2 .l1-footer-title {
  color: #ffffff;
  font-family: var(--mkt-mono);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-footer-list {
  gap: 0.62rem;
}

/* !important on color: beats .l1-cms-body .l1-cta-card .l1-btn-ghost (12-solutions.css, more specific). */
body.l1-marketing-v2 .l1-footer-list a {
  color: #9ca7b7 !important;
  font-size: 0.78rem;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-footer-list a:hover {
  color: #ffffff !important;
}

/* !important on
   - background, color: beats .l1-cms-body .l1-cta-card .l1-btn-ghost (12-solutions.css, more
     specific)
   - border: beats body.l1-marketing-v2 .l1-social a (11-pricing.css, later in the cascade)
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-social a {
  background: transparent !important;
  border: 1px solid #344053 !important;
  border-radius: 1px !important;
  color: #9ca7b7 !important;
}

body.l1-marketing-v2 .l1-footer-bottom {
  border-color: #2d3747;
  color: #7e8999;
  font-family: var(--mkt-mono);
  font-size: 0.61rem;
  letter-spacing: 0.02em;
}

/* !important on color: beats .l1-cms-body .l1-cta-card .l1-btn-ghost (12-solutions.css, more specific). */
body.l1-marketing-v2 .l1-footer-bottom a {
  color: #aab4c2 !important;
}

/* !important on color: beats .l1-cms-body .l1-cta-card .l1-btn-ghost (12-solutions.css, more specific). */
body.l1-marketing-v2 .l1-footer-tagline a {
  color: var(--mkt-on-dark-link) !important;
}

/* !important on
   - color: beats .l1-commitment-strip button small (11-pricing.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-footer .l1-footer-legal {
  color: #8591a3 !important;
}

/* Footer: the copyright line (9.8px) and the registration line (12.5px) are
   one legal block; one size for both. */
body.l1-marketing-v2 .l1-footer-bottom > div:first-child,
body.l1-marketing-v2 .l1-footer-legal {
  font-size: 0.72rem;
  line-height: 1.6;
}

/* Footer links: a wrapped link ("Do Not Sell or Share My Personal
   Information") used the 25.6px row height, so its two lines sat further
   apart than the gap suggests. Tighter line box, same 36px rhythm. */
body.l1-marketing-v2 .l1-footer-list li {
  line-height: 1.45;
  margin-bottom: 1rem;
}

/* The registration number no longer breaks across lines on phones. */
body.l1-marketing-v2 .l1-footer-regno {
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .l1-footer-brand img {
    margin-bottom: .75rem;
  }

  .l1-footer-bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 575.98px) {
  .l1-footer-brand,
  .l1-footer-tagline {
    text-align: left;
  }

  .l1-footer-title {
    margin-bottom: .85rem;
  }
}

/* ---- Contact bar ---- */

/* Replaced the dismissible rebrand announcement that used to live here. Flex,
   not the old three-column grid: the grid's centre column was content-sized, so
   anything placed in the right column ended up butted against the centred copy
   and read as part of the same sentence. */
.l1-contactbar {
  font-size: .8125rem;
}

.l1-contactbar-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.l1-contactbar-link {
  align-items: center;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  gap: .4rem;
  line-height: 1;
  /* No underline at rest: two underlined links in a slim strip read as a
     navigation row competing with the navbar directly beneath it. The hover underline is set with the other public links. */
  text-decoration: none;
  white-space: nowrap;
}

.l1-contactbar-link i {
  opacity: .7;
}

/* text-underline-offset keeps the rule off the descenders, and animating
   text-decoration-color (rather than toggling the underline on) means the text
   does not reflow on hover. */
.l1-footer-list a,
.l1-footer-bottom a,
.l1-contactbar-link {
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--l1-transition), text-decoration-color var(--l1-transition);
}

/* The base focus rule rings the button classes only, so nav links, dropdown items
   and footer links fell back to the UA default, which is a black ring in most
   browsers and reads as a rendering bug on a blue site. Same colour and offset
   as the button ring so keyboard focus looks like one system.

   Deliberately :focus-visible, never :focus, a plain :focus ring fires on mouse
   clicks too, which is why it usually gets deleted and takes keyboard
   accessibility with it. */
.l1-navbar .l1-nav-link:focus-visible,
.l1-navbar .l1-menu-trigger:focus-visible,
.l1-footer-list a:focus-visible,
.l1-footer-bottom a:focus-visible,
.l1-contactbar-link:focus-visible {
  outline: 2px solid var(--l1-brand);
  outline-offset: 2px;
  border-radius: var(--l1-radius-sm);
}

body.l1-marketing-v2 .l1-contactbar {
  background: var(--mkt-paper);
  border: 0;
  border-bottom: 1px solid var(--mkt-line);
  color: var(--mkt-muted);
  min-height: 32px;
  position: relative;
  top: auto;
  z-index: 1031;
}

body.l1-marketing-v2 .l1-contactbar-inner {
  gap: 1.35rem;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 1240px;
  min-height: 32px;
  padding: 0 clamp(1.25rem, 3.2vw, 2.5rem);
}

/* !important on color: beats body.l1-marketing-v2 a:hover (01-base.css, more specific). */
body.l1-marketing-v2 .l1-contactbar-link {
  color: var(--mkt-muted) !important;
  font-family: var(--mkt-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

body.l1-marketing-v2 .l1-contactbar-link i {
  color: var(--mkt-blue-dark);
  font-size: 0.65rem;
}

/* !important on
   - color: beats auth-pages.css body.auth-body.l1-marketing-v2 .auth-consent-stack .checkbox-row
     span a (more specific) */
body.l1-marketing-v2 .l1-contactbar-link:hover {
  color: var(--mkt-ink) !important;
}

@media (max-width: 767.98px) {
  body.l1-marketing-v2 .l1-contactbar-inner {
    justify-content: space-between;
  }

  body.l1-marketing-v2 .l1-contactbar-link {
    font-size: 0.61rem;
  }

  body.l1-marketing-v2 .l1-contactbar-link i {
    display: none;
  }

  body.l1-marketing-v2 .l1-contactbar:not(:has(.l1-notifbell)) {
    display: none;
  }

  body.l1-marketing-v2 .l1-contactbar .l1-contactbar-link {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .l1-contactbar {
    font-size: .75rem;
  }

  body.l1-marketing-v2 .l1-contactbar-link:first-child {
    display: none;
  }

  body.l1-marketing-v2 .l1-contactbar-inner {
    justify-content: flex-end;
  }
}

/* ---- 10-home.css ---- */
/* 10-home.css
   Homepage: hero and console art, trust and compliance bands, infrastructure board, regions,
   testimonials and guides. The promo pages reuse the home hero classes.
 */

/* ---- Page rules that must come before the shared rules below ---- */

/* Belongs with 11-pricing.css; kept here so .l1-plan-fit-card-primary still overrides it on shared elements. */
.l1-plan-fit-card {
  background: var(--l1-surface);
  border: 1px solid var(--l1-border);
}

/* Belongs with 11-pricing.css; kept here so .l1-plan-fit-card still overrides it on shared elements. */
.l1-plan-fit-card-primary {
  border-color: rgba(120, 131, 146, .38);
  box-shadow: 0 10px 30px rgba(120, 131, 146, .08);
}

/* ---- Hero ---- */

.l1-hero-title {
  font-weight: 800;
  margin-bottom: .75rem;
  color: #ffffff;
  line-height: 1.02;
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  max-width: 840px;
}

.l1-hero-sub {
  margin-bottom: 1rem;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  max-width: 760px;
}

.l1-hero-stats {
  align-items: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  box-shadow: none;
  display: inline-flex;
  padding: .85rem 1rem;
  gap: 1rem;
}

.l1-hero-stats > div:not(.l1-hero-stats-divider) {
  display: flex;
  flex-direction: column;
}

.l1-hero-stats-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, .2);
}

.l1-hero .col-lg-6 {
  max-width: 100%;
  width: 100%;
}

.l1-hero > .l1-container {
  position: relative;
  z-index: 1;
}

.l1-home-hero .l1-hero-row,
.l1-hero#top .l1-hero-row {
  align-items: center;
  justify-content: flex-start;
}

.l1-home-hero .l1-hero-content,
.l1-hero#top .l1-hero-content {
  max-width: 920px;
}

.l1-hero-stats strong {
  font-size: 1.25rem;
}

.l1-hero-stats span {
  font-size: .76rem;
}

.l1-hero-visual {
  max-width: 500px;
}

body.l1-marketing-v2 .l1-home-hero .l1-container,
body.l1-marketing-v2 .l1-hero#top .l1-container {
  max-width: 1280px;
}

body.l1-marketing-v2 .l1-home-hero .l1-hero-stats,
body.l1-marketing-v2 .l1-hero#top .l1-hero-stats {
  border: 1px solid rgba(138, 148, 161, .16);
  border-radius: 8px;
  padding: .75rem .95rem;
  width: fit-content;
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}

.l1-home-hero ~ .l1-section .l1-section-sub {
  max-width: 690px;
}

.l1-home-hero ~ #use-cases .row,
.l1-home-hero ~ #how-it-works .row {
  --bs-gutter-y: 1.25rem;
}

.l1-home-hero ~ #use-cases .text-center.mt-5 {
  margin-top: 2rem;
}

.l1-home-hero ~ #how-it-works .l1-home-step-grid,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid {
  counter-reset: l1-launch-step;
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-section-dark h1 (02-layout.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-home-hero .l1-hero-title,
body.l1-marketing-v2 .l1-hero#top .l1-hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}

/* !important on
   - color: beats html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero > .l1-container > p
     (02-layout.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-home-hero .l1-hero-sub,
body.l1-marketing-v2 .l1-hero#top .l1-hero-sub {
  color: rgba(248, 250, 252, .82) !important;
}

body.l1-marketing-v2 .l1-home-hero .l1-hero-stats strong,
body.l1-marketing-v2 .l1-hero#top .l1-hero-stats strong {
  color: #ffffff;
}

body.l1-marketing-v2 .l1-home-hero .l1-hero-stats span,
body.l1-marketing-v2 .l1-hero#top .l1-hero-stats span {
  color: rgba(248, 250, 252, .72);
}

body.l1-marketing-v2 .l1-home-hero .l1-hero-stats-divider,
body.l1-marketing-v2 .l1-hero#top .l1-hero-stats-divider {
  background: rgba(255, 255, 255, .2);
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-section-dark .l1-link-arrow (02-layout.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-home-hero .l1-link-arrow:hover,
body.l1-marketing-v2 .l1-hero#top .l1-link-arrow:hover {
  color: #ffffff !important;
}

/* Proof chips on any dark page hero, not only pricing. */
.l1-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.15rem 0 0;
}

.l1-hero-proof span {
  align-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  color: rgba(255, 255, 255, .92);
  display: inline-flex;
  font-size: .86rem;
  font-weight: 750;
  gap: .45rem;
  padding: .48rem .72rem;
}

.l1-hero-proof a {
  text-decoration: none;
}

.l1-page-hero .l1-hero-proof,
.l1-contact-hero .l1-hero-proof,
.l1-pricing-page .l1-hero-proof {
  justify-content: flex-start;
}

body.l1-marketing-v2 .l1-home-hero .l1-gradient-text,
body.l1-marketing-v2 .l1-hero#top .l1-gradient-text {
  animation: none;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}

/* !important on
   - font-size, line-height: beats .l1-builder-hero:not(.l1-checkout-hero) h1 (02-layout.css, more
     specific) */
.l1-home-hero .l1-hero-title,
.l1-hero#top .l1-hero-title {
  font-size: clamp(3rem, 6.4vw, 5.35rem) !important;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.94 !important;
  max-width: 11ch;
}

/* !important on
   - font-size, max-width: beats .l1-builder-hero:not(.l1-checkout-hero) p (02-layout.css, more
     specific) */
.l1-home-hero .l1-hero-sub,
.l1-hero#top .l1-hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem) !important;
  max-width: 38rem !important;
}

.l1-hero-atmosphere {
  pointer-events: none;
}

.l1-home-hero > .l1-container,
.l1-hero#top > .l1-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5.5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4rem) clamp(3.5rem, 5vw, 4.75rem);
  position: relative;
  width: 100%;
  z-index: 1;
}

.l1-home-hero > .l1-trust-strip,
.l1-hero#top > .l1-trust-strip {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 1.15rem 1.5rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* !important on color: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, more specific). */
.l1-hero-proof i,
.l1-pricing-page .l1-pricing-proof-row i {
  color: #7eb0ff !important;
}

/* !important on
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-hero-atmosphere {
  display: block !important;
  font-family: var(--mkt-mono);
  font-size: 0.64rem;
  inset: 1.5rem clamp(1.25rem, 3.2vw, 2.5rem) auto auto;
  letter-spacing: 0.08em;
  overflow: visible;
  position: absolute;
  z-index: 2;
  color: #6c7582;
}

/* !important on
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-hero-row {
  align-items: center;
  display: grid !important;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.85fr);
  isolation: isolate;
  min-height: 0;
  position: relative;
}

body.l1-marketing-v2 .l1-hero-content {
  isolation: isolate;
  max-width: 680px;
  position: relative;
  z-index: 1;
}

body.l1-marketing-v2 .l1-hero-content .l1-eyebrow,
body.l1-marketing-v2 .l1-hero-content .l1-hero-title,
body.l1-marketing-v2 .l1-hero-content .l1-hero-sub,
body.l1-marketing-v2 .l1-hero-content .l1-hero-cta {
  position: relative;
  z-index: 1;
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-section-dark h1 (02-layout.css, later in the cascade, also
     !important)
   - font-size, line-height: beats .l1-home-hero .l1-hero-title (10-home.css, later in the cascade,
     also !important)
   - margin: beats html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-hero)
     h1 (02-layout.css, later in the cascade, also !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-hero-title {
  color: #ffffff !important;
  font-size: clamp(3rem, 6vw, 5.75rem) !important;
  font-weight: 610;
  letter-spacing: -0.05em;
  line-height: 0.96 !important;
  margin: 1.6rem 0 1.75rem !important;
  max-width: 10.5ch;
  text-shadow: none;
  word-spacing: 0.035em;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-gradient-text {
  -webkit-text-fill-color: #a9ccff;
  background: none;
  color: #a9ccff;
}

/* !important on
   - color: beats html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero > .l1-container > p
     (02-layout.css, later in the cascade, also !important)
   - font-size, max-width: beats .l1-home-hero .l1-hero-sub (10-home.css, later in the cascade, also
     !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-hero-sub {
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: clamp(1.02rem, 1.45vw, 1.16rem) !important;
  line-height: 1.72;
  margin: 0;
  max-width: 630px !important;
}

body.l1-marketing-v2 .l1-hero-cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 2rem 0 0;
}

body.l1-marketing-v2 .l1-hero-cta .ui-btn--lg {
  min-height: 50px;
  padding: 0.8rem 1.2rem;
}

/* !important on
   - background, border-color, color: beats body.l1-marketing-v2 .l1-btn-primary (03-components.css,
     later in the cascade, also !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero#top .l1-hero-cta .ui-btn--primary {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0d47ad !important;
}

/* !important on
   - background, border-color, color: beats body.l1-marketing-v2 .l1-btn-primary (03-components.css,
     later in the cascade, also !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero#top .l1-hero-cta .ui-btn--primary:hover {
  background: #dceaff !important;
  border-color: #dceaff !important;
  color: #082b70 !important;
}

/* No hero ghost-button rule here. The dark-surface ghost rule in 03-components.css already matches
   `.l1-home-hero .l1-btn-ghost` (and `.l1-hero#top .l1-btn-ghost`) with the
   same dark-surface treatment, and it loads earlier in the same bundle, so a
   copy here was inert apart from its border alpha, which had drifted to 0.35/0.6
   and made the homepage hero ghost a different shade from every other
   dark-surface ghost on the site. Tune that rule so they all move together. */
body.l1-marketing-v2 .l1-hero-visual-wrap {
  isolation: isolate;
  position: relative;
  z-index: 1;
}

body.l1-marketing-v2 .l1-hero-brand-mark {
  color: #b6c4d8;
  display: block;
  height: auto;
  left: 50%;
  opacity: 0.26;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(34rem, 66vw, 50rem);
  z-index: 0;
}

/* The server card was nudged 16px past the content edge (x=1316). */
body.l1-marketing-v2 .l1-hero-preview-stack {
  margin: 0 auto;
  max-width: 520px;
  position: relative;
  width: 100%;
  z-index: 1;
  transform: none;
}

/* !important on
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-hero-visual {
  background: var(--mkt-graphic-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(4, 18, 49, 0.38);
  color: #ffffff;
  display: block !important;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  padding: 1.15rem;
  position: relative;
  transform: none;
  width: 100%;
  z-index: 1;
}

body.l1-marketing-v2 .l1-hero-visual::before,
body.l1-marketing-v2 .l1-hero-visual::after {
  content: none;
}

/* !important on
   - border: beats body.l1-marketing-v2 .l1-pricing-summary div (11-pricing.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-page-hero .l1-hero-proof,
body.l1-marketing-v2 .l1-contact-hero .l1-hero-proof,
body.l1-marketing-v2 .l1-builder-hero .l1-hero-proof {
  border: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.15rem;
  max-width: 860px;
  padding-top: 0;
}

/* !important on
   - background: beats html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero:not(.l1-checkout-
     hero) (02-layout.css, later in the cascade, also !important)
   - border: beats body.l1-marketing-v2 .l1-pricing-page .l1-pricing-proof-row span (02-layout.css,
     later in the cascade, also !important)
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important)
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important)
   - padding: beats bootstrap.min.css .pt-5 (a Bootstrap utility that is itself !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-hero-proof span,
html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero .l1-hero-proof span,
html[data-l1-theme] body.l1-marketing-v2 .l1-builder-hero .l1-hero-proof span {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--mkt-muted) !important;
  font-family: var(--mkt-mono);
  font-size: 0.66rem;
  padding: 0 1.2rem 0 0 !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero .l1-hero-atmosphere {
  color: #edf4ff;
  text-shadow: 0 1px 8px rgba(3, 12, 28, 0.72);
}

html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-hero-stats {
  background: transparent;
  border: 0;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-hero-stats strong {
  color: var(--mkt-ink) !important;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-hero-stats span {
  color: var(--mkt-muted) !important;
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-section-dark .l1-link-arrow (02-layout.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-home-hero#top .l1-hero-cta .l1-link-arrow {
  color: #ffffff !important;
}

body.l1-marketing-v2 :is(.l1-hero, .l1-section-dark, .l1-cta-section, .l1-footer) :is(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--mkt-on-dark-link);
}

body.l1-marketing-v2 .l1-page-hero .l1-hero-proof {
  justify-content: flex-start;
  margin-left: 0;
}

@media (max-width: 991.98px) {
  .l1-hero-stats {
    display: flex;
    width: 100%;
  }

  body.l1-marketing-v2 .l1-hero-row {
    gap: 2.5rem;
    grid-template-columns: 1fr;
  }

  /* Atmosphere is top-right on desktop. Once the hero is a single column the
     eyebrow is full-width, so the two lines share a row and collide. Put the
     decorative line in normal flow above the copy instead. */
  /* !important on
     - display: beats body.l1-marketing-v2 .l1-hero-atmosphere (10-home.css, later in the cascade, also
       !important) */
  body.l1-marketing-v2 .l1-home-hero .l1-hero-atmosphere {
    inset: auto;
    margin: 1rem clamp(1.25rem, 3.2vw, 2.5rem) 0;
    position: relative;
    text-align: left;
    z-index: 1;
    display: none !important;
  }

  body.l1-marketing-v2 .l1-hero-content {
    max-width: 760px;
  }

  body.l1-marketing-v2 .l1-hero-visual-wrap {
    max-width: 620px;
  }

  body.l1-marketing-v2 .l1-hero-brand-mark {
    opacity: 0.22;
    width: min(90vw, 44rem);
  }
}

@media (max-width: 575.98px) {
  /* !important on padding-block: beats .l1-hero#top > .l1-container (10-home.css, more specific). */
  body.l1-marketing-v2 .l1-home-hero > .l1-container,
  body.l1-marketing-v2 .l1-home-hero#top > .l1-container {
    padding-block: 0.65rem 1.75rem !important;
  }
}

@media (max-width: 991.98px) {
  /* Keep the space the label used, so the eyebrow does not sit on the
     navbar edge. */
  /* !important on padding-top: beats .l1-hero#top > .l1-container (10-home.css, more specific). */
  body.l1-marketing-v2 .l1-home-hero > .l1-container,
  body.l1-marketing-v2 .l1-home-hero#top > .l1-container {
    padding-top: 2rem !important;
  }
}

@media (max-width: 767.98px) {
  .l1-home-hero .l1-hero-title,
  .l1-hero#top .l1-hero-title {
    max-width: none;
  }

  /* !important on
     - font-size: beats .l1-home-hero .l1-hero-title (10-home.css, later in the cascade, also
       !important) */
  html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-hero-title {
    font-size: clamp(2.7rem, 13vw, 4.4rem) !important;
  }
}

@media (max-width: 575.98px) {
  .l1-hero-stats {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    align-items: stretch;
    display: grid;
  }

  .l1-hero-stats > div:not(.l1-hero-stats-divider) {
    flex-direction: column;
  }

  .l1-hero-cta .l1-btn {
    width: 100%;
  }

  /* !important on margin: beats .l1-region-card .l1-link-arrow (10-home.css, later in the cascade). */
  .l1-hero-cta .l1-link-arrow {
    width: 100%;
    text-align: center;
    margin: 0 !important;
    padding: .25rem 0;
  }

  .l1-hero-stats-divider {
    display: none;
  }

  body.l1-marketing-v2 .l1-hero-brand-mark {
    opacity: 0.17;
    width: min(112vw, 37rem);
  }

  /* !important on
     - font-size: beats .l1-home-hero .l1-hero-title (10-home.css, later in the cascade, also
       !important)
     - letter-spacing: beats html[data-l1-theme] body.l1-marketing-v2 .l1-builder-
       hero:not(.l1-checkout-hero) h1 (02-layout.css, later in the cascade, also !important) */
  html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-hero-title {
    font-size: clamp(2.55rem, 13vw, 3.75rem) !important;
    letter-spacing: -0.045em !important;
  }
}

@media (min-width: 992px) {
  .l1-hero-row,
  .l1-home-hero .l1-hero-row,
  .l1-hero#top .l1-hero-row {
    align-items: center;
    margin: 0;
  }

  .l1-hero-row > .col-lg-6,
  .l1-hero#top .l1-hero-row > .col-lg-6 {
    margin: 0;
    padding: 0;
  }

  .l1-home-hero .l1-hero-visual {
    max-width: 540px;
    transform-style: preserve-3d;
  }

  /* !important on padding-top: beats .l1-hero#top > .l1-container (10-home.css, more specific). */
  body.l1-marketing-v2 .l1-home-hero > .l1-container,
  body.l1-marketing-v2 .l1-home-hero#top > .l1-container {
    padding-top: 2.6rem !important;
  }

  body.l1-marketing-v2 .l1-home-hero .l1-hero-atmosphere {
    right: max(clamp(1.25rem, 3.2vw, 2.5rem), calc((100% - 1240px) / 2 + 2.5rem));
    top: 1.05rem;
  }
}

/* ---- Homepage sections ---- */

.l1-home-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.l1-gradient-text {
  animation: none;
  color: #cfd3d8;
}

body.l1-marketing-v2 .l1-gradient-text {
  background: linear-gradient(120deg, #111827 0%, var(--l1-primary-dark) 54%, var(--l1-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

body.l1-marketing-v2 .l1-home-proof-zone {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--l1-secondary) 10%, #dceaff) 0%,
    #edf2f9 34%,
    var(--mkt-bg) 100%
    );
  border-bottom: 1px solid var(--mkt-line);
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3.2vw, 2.5rem) clamp(3rem, 5vw, 4.5rem);
  position: relative;
}

body.l1-marketing-v2 .l1-home-proof-zone::before {
  background-image: linear-gradient(var(--mkt-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mkt-line) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  inset: 0 0 0 46%;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
}

body.l1-marketing-v2 .l1-home-proof-zone > section {
  position: relative;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .l1-home-plans {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin-inline: auto;
  }
}

/* ---- Regions ---- */

.l1-locations-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.l1-locations-section > .l1-container {
  position: relative;
  z-index: 1;
}

.l1-locations-section .l1-devops-tools {
  backdrop-filter: none;
  padding: 2.5rem 0 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.l1-locations-section .l1-tool-card {
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(80, 88, 100, .1);
  backdrop-filter: blur(3px);
}

.l1-locations-section .l1-tool-card:hover {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(120, 131, 146, .22);
}

.l1-locations-section .row {
  align-items: stretch;
  justify-content: center;
}

.l1-locations-section .l1-plan,
.l1-tool-card {
  background: var(--l1-surface-2);
}

.l1-locations-section::before {
  opacity: .42;
}

.l1-locations-section > .l1-container::before {
  opacity: .34;
}

.l1-locations-section .l1-region-maps,
.l1-region-maps,
.l1-region-board,
.l1-region-card {
  text-align: left;
}

.l1-region-board {
  background: var(--l1-surface, #ffffff);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.l1-region-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: 1.7rem 1.8rem 1.55rem;
}

.l1-region-kicker {
  align-items: center;
  color: #1f8a4d;
  display: flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.45rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.2rem;
  text-transform: uppercase;
}

.l1-region-live-dot {
  background: #2ecc71;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.16);
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
}

.l1-region-card h3 {
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  letter-spacing: -0.04em;
  margin: 0;
}

.l1-region-card > p {
  color: var(--l1-text);
  margin: 0 0 0.9rem;
}

.l1-region-facts {
  background: #f6f8fb;
  border-top: 1px solid var(--l1-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.45rem 1.8rem 1.5rem;
}

.l1-region-fact-list {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.l1-region-fact-list dt {
  color: var(--l1-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.2rem;
  text-transform: uppercase;
}

.l1-region-fact-list dd {
  color: var(--l1-text);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}

.l1-region-fact-list a {
  text-decoration: underline;
  text-decoration-color: var(--l1-brand-border, #b7d0ff);
  text-underline-offset: 0.15em;
}

.l1-region-card .l1-btn,
.l1-region-card .l1-link-arrow {
  align-self: flex-start;
  margin-top: auto;
}

@media (min-width: 768px) {
  .l1-region-board {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.85fr);
  }

  .l1-region-facts {
    border-left: 1px solid var(--l1-border);
    border-top: 0;
  }

  .l1-region-fact-list {
    gap: 1.15rem 1.35rem;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- DevOps tools ---- */

.l1-devops-tools {
  padding: 2rem;
  background: linear-gradient(180deg, rgba(120, 131, 146, 0.04) 0%, rgba(120, 131, 146, 0) 100%),
    var(--l1-surface);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.l1-devops-copy {
  max-width: 760px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

.l1-devops-copy h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  margin: .5rem 0 .65rem;
}

.l1-devops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* DevOps tool logos. Each mark ships a light and a dark artwork
   (devops-*-dark.png) so the logo sits directly on the card, no white tray
   behind it, which read as a second panel stacked inside the first. */
.l1-tool-card {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 152px;
  padding: 1.35rem 1rem;
  border: 1px solid var(--l1-border);
  gap: 1rem;
}

.l1-tool-logo-terraform,
.l1-tool-logo-ansible {
  max-width: min(220px, 86%);
}

.l1-tool-logo {
  display: block;
  background: none;
  border: 0;
  box-sizing: border-box;
  height: 58px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  padding: 0;
  width: min(202px, 86%);
}

.l1-plan:hover,
.l1-tool-card:hover {
  background: var(--l1-surface-2);
  border-color: rgba(188, 193, 201, .46);
}

.l1-tool-logo-kubernetes {
  height: 66px;
  width: min(172px, 80%);
}

.l1-tool-logo-ansible {
  width: min(188px, 84%);
}

/* The dark artwork also carries the `hidden` attribute in the markup, so a
   stale or unloaded copy of this stylesheet degrades to the light logo alone
   rather than stacking both inside the card. Chrome's UA stylesheet declares
   `[hidden] { display: none !important }`, so revealing it takes !important,
   without it the dark theme renders no logo at all. */
.l1-tool-logo-dark {
  display: none;
}

/* DevOps tooling: the Kubernetes mark is taller, which pushed its caption
   4px below the other two. Fixed logo row, captions on one line. */
body.l1-marketing-v2 .l1-tool-card {
  grid-template-rows: 66px auto;
}

body.l1-marketing-v2 .l1-tool-card > .l1-tool-logo {
  align-self: center;
}

@media (max-width: 991.98px) {
  .l1-devops-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .l1-devops-tools {
    padding: 1.35rem;
  }
}

/* ---- Stats ---- */

.l1-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.l1-stat-card {
  background: var(--l1-surface);
  border: 1px solid var(--l1-border);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.l1-stat-num {
  font-family: var(--l1-font-head);
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(120deg, var(--l1-primary-dark) 0%, var(--l1-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: .5rem;
}

.l1-stat-label {
  font-size: .9rem;
  color: var(--l1-text-muted);
}

.l1-plan-fit-card,
.l1-tool-card,
.l1-stat-card,
.l1-contact-card,
.l1-contact-success,
.l1-lg-output,
.l1-lg-alert {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* !important on box-shadow: beats body.l1-marketing-v2 .l1-plan (11-pricing.css, more specific). */
.l1-plan,
.l1-plan-fit-card,
.l1-stat-card,
.l1-tool-card,
.l1-builder-card {
  border-radius: 10px;
  box-shadow: none !important;
}

.l1-plan,
.l1-plan-fit-card,
.l1-stat-card,
.l1-tool-card,
.l1-cms-body .l1-builder-card,
.l1-cms-body .l1-plan-fit-card {
  height: 100%;
}

/* Two stat cards stacked into a narrow column beside a tall block of copy,
   instead of sitting side by side in a wide one. Used by the About section on
   the homepage, whose left column runs ~600px tall against ~124px of stats.

   Stacking alone is not the fix and was measured before this was written: the
   cards are sized by their content, so turning two 213px-wide cards into two
   434px-wide ones moved the group from 124px to about 140px and left the same
   void. The padding and figure size below are what actually give the rail
   presence, so keep them together with the single column.

   Compounded as .ui-stat-grid.l1-stat-rail on purpose. The ui-* rules and the
   tw:* utilities are both unlayered, the `@layer components` on line 58 of
   assets/tailwind.css is declared but never wrapped around them, so a single
   class here would tie with .ui-stat-grid on specificity and lose on source
   order, since this bundle loads before tailwind.css. Two classes wins outright
   and stops depending on load order at all. */
.ui-stat-grid.l1-stat-rail {
  flex-direction: column;
  gap: 1rem;
}

.ui-stat-grid.l1-stat-rail > * {
  flex: 1 1 auto;
}

.l1-stat-rail .l1-stat-card {
  padding: 2.25rem 1.75rem;
}

.l1-stat-rail .l1-stat-num {
  font-size: 2.6rem;
}

body.l1-marketing-v2 .l1-content-frame .ui-stat-grid.l1-stat-rail {
  gap: 1rem;
}

/* !important on
   - box-shadow: beats body.l1-marketing-v2 main .ui-panel (03-components.css, later in the cascade,
     also !important) */
body.l1-marketing-v2 .l1-content-frame .l1-stat-rail .l1-stat-card {
  background: var(--mkt-paper-muted);
  border: 0;
  border-radius: 14px;
  box-shadow: none !important;
}

/* !important on box-shadow: beats .l1-stat-card (10-home.css, later in the cascade, also !important). */
body.l1-marketing-v2 #about .l1-stat-card {
  background: var(--mkt-paper);
  box-shadow: 0 14px 36px rgba(15, 20, 31, 0.07) !important;
}

@media (max-width: 767.98px) {
  .l1-stat-card {
    padding: 1.35rem 1rem;
  }

  .l1-stat-num {
    font-size: 1.9rem;
  }
}

@media (min-width: 1024px) {
  body.l1-marketing-v2 #about .l1-stat-rail {
    margin-top: 3.25rem;
  }
}

/* ---- Testimonials ---- */

.l1-testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.l1-testimonial-card p {
  flex: 1 1 auto;
  margin: 0 0 1.25rem;
  color: var(--l1-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.l1-testimonial-card footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
  color: var(--l1-text-dim);
}

.l1-testimonial-quote-mark {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.l1-testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* !important on color: beats app.css .nav a i[data-lucide] (more specific). */
body.l1-marketing-v2 .l1-testimonial-quote-mark {
  color: var(--mkt-blue) !important;
  opacity: 1;
}

body.l1-marketing-v2 .l1-testimonial-avatar {
  background: var(--mkt-night);
  border-radius: 1px;
  color: #ffffff;
}

/* Testimonials: a long quote ran straight into its author row. */
body.l1-marketing-v2 .l1-testimonial-card footer {
  margin-top: 1.25rem;
}

/* ---- Trust strip ---- */

/* !important on color: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, more specific). */
.l1-trust-strip i {
  margin-right: .4rem;
  color: #3b7ae8 !important;
}

/* !important on padding: beats bootstrap.min.css .table > :not(caption) > * > * (more specific). */
.l1-trust-strip {
  overflow: visible;
  padding: 1.05rem 0 !important;
}

/* !important on
   - color: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, more specific)
   - display: beats bootstrap.min.css .badge:empty (more specific)
   - flex-wrap, justify-content: beats bootstrap.min.css .navbar > .container (more specific)
   - gap: beats bootstrap-bridge.css html[data-l1-theme] :where(.badge, .status-pill, .neutral-pill)
     (loads after this bundle) */
.l1-trust-strip ul {
  color: inherit !important;
  display: flex !important;
  flex-wrap: wrap !important;
  font-size: 0.88rem;
  font-weight: 650;
  gap: 0.85rem 1.75rem !important;
  justify-content: center !important;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: normal;
}

body.l1-marketing-v2 .l1-trust-strip {
  background: var(--mkt-paper-muted);
  border: 0;
  color: var(--mkt-ink);
}

body.l1-marketing-v2 .l1-trust-seal {
  align-items: center;
  align-self: stretch;
  background: linear-gradient(180deg, #f4f7fd 0%, var(--mkt-paper) 100%);
  border: 1px solid var(--mkt-line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  grid-area: seal;
  justify-content: center;
  margin: 0;
  min-height: 100%;
  padding: 1.1rem 0.85rem 1.15rem;
  text-align: center;
}

body.l1-marketing-v2 .l1-trust-seal img {
  display: block;
  flex: 0 0 auto;
  height: 8.75rem;
  object-fit: contain;
  width: 8.75rem;
}

body.l1-marketing-v2 .l1-trust-seal figcaption {
  display: grid;
  gap: 0.12rem;
  margin: 0;
  min-width: 0;
  width: 100%;
}

@media (max-width: 991.98px) {
  body.l1-marketing-v2 .l1-trust-seal {
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    padding: 0.95rem 1.15rem;
    text-align: left;
  }

  body.l1-marketing-v2 .l1-trust-seal img {
    height: 5.75rem;
    width: 5.75rem;
  }

  body.l1-marketing-v2 .l1-trust-seal figcaption {
    width: auto;
  }

  body.l1-marketing-v2 .l1-trust-seal .l1-compliance-name,
  body.l1-marketing-v2 .l1-trust-seal .l1-compliance-sub {
    text-align: left;
  }
}

/* ---- How it works ---- */

/* Numbered how-it-works steps. */
.l1-step-num {
  align-items: center;
  background: var(--l1-primary);
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  font-size: .82rem;
  font-weight: 800;
  height: 1.85rem;
  justify-content: center;
  margin-bottom: .85rem;
  width: 1.85rem;
}

.l1-step-track {
  position: relative;
}

.l1-step-track .l1-step-num {
  background: #e7edf6;
  border: 0;
  border-radius: 12px;
  color: #1a3566;
  font-size: 1.05rem;
  font-weight: 800;
  height: 2.4rem;
  letter-spacing: -0.04em;
  margin-bottom: 1.1rem;
  width: 2.4rem;
}

.l1-section-dark .l1-step-track .l1-step-num {
  background: #e7edf6;
  border: 0;
  color: #1a3566;
}

/* ---- Compliance band ---- */

.l1-compliance-band-title em {
  color: var(--l1-primary);
  font-style: normal;
  font-weight: 800;
}

.l1-compliance-grid {
  list-style: none;
}

.l1-compliance-tile {
  color: var(--l1-text);
}

.l1-compliance-name {
  line-height: 1.2;
  text-transform: uppercase;
}

.l1-compliance-sub {
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-compliance-band {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-line);
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(15, 20, 31, 0.07);
  color: var(--mkt-ink);
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  position: relative;
}

body.l1-marketing-v2 .l1-compliance-band::before {
  content: none;
}

/* !important on
   - align-items: beats .l1-builder-hero:not(.l1-checkout-hero) > .l1-container (12-solutions.css,
     more specific)
   - display, padding: beats .l1-hero#top > .l1-container (10-home.css, more specific)
   - max-width: beats .l1-builder-hero:not(.l1-checkout-hero) > .l1-container (02-layout.css, more
     specific) */
body.l1-marketing-v2 .l1-compliance-band-inner {
  align-items: stretch !important;
  background: transparent;
  border-radius: 0;
  display: grid !important;
  gap: clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.35rem, 3vw, 2.25rem);
  grid-template-areas: "seal copy"
    "seal grid";
  grid-template-columns: minmax(10.5rem, 12.5rem) minmax(0, 1fr);
  max-width: none !important;
  padding: 0 !important;
  position: relative;
  width: 100%;
  z-index: 1;
}

body.l1-marketing-v2 .l1-compliance-band-copy {
  align-content: end;
  border-left: 0;
  display: grid;
  gap: 0.4rem;
  grid-area: copy;
  grid-template-columns: 1fr;
  min-width: 0;
  padding: 0;
}

body.l1-marketing-v2 .l1-compliance-band-copy > span {
  color: var(--mkt-blue-dark);
  font-family: var(--mkt-mono);
  font-size: 0.61rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

body.l1-marketing-v2 .l1-compliance-band-title {
  color: var(--mkt-ink);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-style: normal;
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0;
  max-width: 18ch;
}

/* !important on
   - color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - margin: beats .l1-hero#top .l1-hero-row > .col-lg-6 (10-home.css, more specific) */
body.l1-marketing-v2 .l1-compliance-band-copy p {
  color: var(--mkt-muted) !important;
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 0.15rem 0 0 !important;
  max-width: 58ch;
}

/* !important on
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-compliance-grid {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid !important;
  gap: 0.7rem;
  grid-area: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
  padding: 0;
  width: auto;
}

/* !important on border: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-compliance-grid > li {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-line) !important;
  border-radius: 6px;
  list-style: none;
  min-width: 0;
  position: relative;
}

/* !important on border-left: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-compliance-grid > li + li {
  border-left: 1px solid var(--mkt-line) !important;
}

/* !important on
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-compliance-tile {
  align-items: center;
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex !important;
  flex-direction: column;
  gap: 0.8rem;
  height: 100%;
  justify-content: center;
  min-height: 116px;
  padding: 1rem 0.75rem;
  text-align: center;
}

/* !important on
   - color: beats app.css .nav a i[data-lucide] (more specific)
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-compliance-icon {
  align-items: center;
  background: #10151f;
  border: 1px solid #10151f;
  border-radius: 2px;
  color: #ffffff !important;
  display: inline-flex !important;
  flex: 0 0 34px;
  font-size: 0.82rem;
  height: 34px;
  justify-content: center;
  margin: 0;
  width: 34px;
}

body.l1-marketing-v2 .l1-compliance-tile > span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  width: 100%;
}

body.l1-marketing-v2 .l1-compliance-name {
  display: block;
  color: var(--mkt-ink);
  font-family: var(--mkt-mono);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  max-width: none;
  text-align: center;
  width: 100%;
}

body.l1-marketing-v2 .l1-compliance-sub {
  color: var(--mkt-muted);
  display: block;
  font-size: 0.64rem;
  text-align: center;
  width: 100%;
}

@media (max-width: 991.98px) {
  body.l1-marketing-v2 .l1-compliance-band-inner {
    grid-template-areas: "copy"
      "seal"
      "grid";
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-compliance-band-copy {
    max-width: none;
  }

  body.l1-marketing-v2 .l1-compliance-band-title {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  body.l1-marketing-v2 .l1-compliance-band-copy {
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-compliance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* !important on border: beats bootstrap.min.css .btn:first-child:active (more specific). */
  body.l1-marketing-v2 .l1-compliance-grid > li {
    border: 1px solid var(--mkt-line) !important;
  }

  body.l1-marketing-v2 .l1-compliance-tile {
    min-height: 116px;
  }
}

/* ---- Hero console ---- */

body.l1-marketing-v2 .l1-v2-console-head,
body.l1-marketing-v2 .l1-v2-console-foot {
  align-items: center;
  color: #8290a3;
  display: flex;
  font-family: var(--mkt-mono);
  font-size: 0.6rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.15rem 0.85rem;
}

body.l1-marketing-v2 .l1-v2-console-head {
  border: 0;
}

body.l1-marketing-v2 .l1-v2-console-live {
  align-items: center;
  color: #8be8b7;
  display: inline-flex;
  gap: 0.4rem;
}

body.l1-marketing-v2 .l1-v2-console-live i {
  background: var(--mkt-green);
  height: 5px;
  width: 5px;
}

body.l1-marketing-v2 .l1-v2-console-title {
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  padding: 1.2rem;
}

body.l1-marketing-v2 .l1-v2-console-title > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

body.l1-marketing-v2 .l1-v2-console-title span {
  color: #8290a3;
  font-family: var(--mkt-mono);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
}

body.l1-marketing-v2 .l1-v2-console-title strong {
  color: #ffffff;
  font-family: var(--mkt-mono);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 520;
  letter-spacing: -0.04em;
}

body.l1-marketing-v2 .l1-v2-console-specs {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 0.65rem 0;
}

body.l1-marketing-v2 .l1-v2-console-specs > div {
  background: rgba(255, 255, 255, 0.035);
  border: 0;
  border-radius: 10px;
  padding: 0.85rem;
}

body.l1-marketing-v2 .l1-v2-console-specs > div:last-child {
  border: 0;
}

body.l1-marketing-v2 .l1-v2-console-specs dt {
  color: #8290a3;
  font-family: var(--mkt-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-v2-console-specs dd {
  color: #eef2f8;
  font-family: var(--mkt-mono);
  font-size: 0.72rem;
  margin: 0;
}

body.l1-marketing-v2 .l1-v2-console-event {
  background: color-mix(in srgb, var(--mkt-blue) 17%, transparent);
  border-radius: 12px;
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
  padding: 0.9rem 1.1rem;
}

body.l1-marketing-v2 .l1-v2-console-event > span,
body.l1-marketing-v2 .l1-v2-console-event > small {
  color: #8290a3;
  font-family: var(--mkt-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

body.l1-marketing-v2 .l1-v2-console-event > strong {
  align-items: center;
  color: #eef2f8;
  display: inline-flex;
  font-family: var(--mkt-mono);
  font-size: 0.78rem;
  font-weight: 550;
  gap: 0.5rem;
}

body.l1-marketing-v2 .l1-v2-console-event > strong i {
  color: #68d9b2;
}

body.l1-marketing-v2 .l1-v2-console-terminal {
  background: #080d14;
  border-radius: 12px;
  color: #8d9bad;
  display: flex;
  flex-direction: column;
  font-family: var(--mkt-mono);
  font-size: 0.66rem;
  gap: 0.35rem;
  line-height: 1.5;
  min-height: 102px;
  padding: 1.05rem 1.3rem;
}

body.l1-marketing-v2 .l1-v2-console-terminal strong {
  color: #dce5f2;
  font-weight: 450;
}

body.l1-marketing-v2 .l1-v2-console-terminal i {
  animation: l1-v2-cursor 1.2s steps(2, end) infinite;
  background: var(--mkt-blue);
  display: inline-block;
  height: 0.8em;
  vertical-align: -0.08em;
  width: 5px;
}

body.l1-marketing-v2 .l1-v2-console-foot {
  border: 0;
  gap: 1rem;
  justify-content: flex-start;
  padding: 0.8rem 0.15rem 0;
}

body.l1-marketing-v2 .l1-v2-console-foot span + span::before {
  color: #3e4a5c;
  content: "/";
  margin-right: 1rem;
}

@media (max-width: 767.98px) {
  body.l1-marketing-v2 .l1-v2-console-specs {
    grid-template-columns: 1fr 1fr;
  }

  body.l1-marketing-v2 .l1-v2-console-specs > div:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 575.98px) {
  body.l1-marketing-v2 .l1-v2-console-foot {
    gap: 0.55rem;
  }

  body.l1-marketing-v2 .l1-v2-console-foot span + span::before {
    margin-right: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.l1-marketing-v2 .l1-v2-console-terminal i {
    animation: none;
  }
}

/* ---- Guides ---- */

/* !important on
   - background: beats body.l1-marketing-v2 .l1-section (02-layout.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-home-guides {
  background: var(--mkt-paper) !important;
  border-bottom: 1px solid var(--mkt-line);
  border-top: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-home-guides-layout {
  align-items: start;
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.4fr);
}

body.l1-marketing-v2 .l1-home-guides-intro .l1-section-title {
  /* Capped at 3rem: at 4rem it broke into five lines in its 397px column. */
  font-size: clamp(2.15rem, 3.3vw, 3rem);
  margin-bottom: 1.15rem;
  max-width: 12ch;
  text-align: left;
}

body.l1-marketing-v2 .l1-home-guides-intro > p {
  color: var(--mkt-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 580px;
}

body.l1-marketing-v2 .l1-home-guides-proof {
  border-top: 1px solid var(--mkt-line);
  list-style: none;
  margin: 1.75rem 0 2rem;
  padding: 0;
}

body.l1-marketing-v2 .l1-home-guides-proof li {
  align-items: baseline;
  border-bottom: 1px solid var(--mkt-line);
  color: var(--mkt-ink);
  display: grid;
  font-size: 0.84rem;
  gap: 0.75rem;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  padding: 0.7rem 0;
}

body.l1-marketing-v2 .l1-home-guides-proof span,
body.l1-marketing-v2 .l1-home-guide-list__number {
  color: var(--mkt-blue-dark);
  font-family: var(--mkt-mono);
  font-size: 0.64rem;
}

body.l1-marketing-v2 .l1-home-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

body.l1-marketing-v2 .l1-home-guide-list > li {
  border-bottom: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-home-guide-list > li:nth-child(odd) {
  border-right: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-home-guide-list a,
body.l1-marketing-v2 .l1-home-guide-list__empty {
  color: var(--mkt-ink);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 9.4rem;
  padding: clamp(1rem, 2.4vw, 1.65rem);
  text-decoration: none;
}

body.l1-marketing-v2 .l1-home-guide-list a:hover {
  background: var(--mkt-blue-soft);
  color: var(--mkt-blue-dark);
}

body.l1-marketing-v2 .l1-home-guide-list__body strong,
body.l1-marketing-v2 .l1-home-guide-list__body small {
  display: block;
}

body.l1-marketing-v2 .l1-home-guide-list__body strong {
  color: inherit;
  font-size: 1rem;
  line-height: 1.35;
}

body.l1-marketing-v2 .l1-home-guide-list__body small {
  color: var(--mkt-muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin-top: 0.55rem;
}

body.l1-marketing-v2 .l1-home-guide-list a > i {
  color: var(--mkt-blue-dark);
  font-size: 0.72rem;
  margin-top: 0.2rem;
}

@media (max-width: 61.99rem) {
  body.l1-marketing-v2 .l1-home-guides-layout {
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-home-guides-intro .l1-section-title {
    max-width: 16ch;
  }
}

@media (max-width: 40rem) {
  body.l1-marketing-v2 .l1-home-guide-list {
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-home-guide-list > li:nth-child(odd) {
    border-right: 0;
  }

  body.l1-marketing-v2 .l1-home-guide-list a,
  body.l1-marketing-v2 .l1-home-guide-list__empty {
    min-height: 0;
  }
}

/* ---- Infrastructure board ---- */

body.l1-marketing-v2 .l1-infra-proof {
  background: var(--mkt-paper);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(15, 20, 31, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
  overflow: hidden;
}

body.l1-marketing-v2 .l1-infra-proof-main {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3.25rem);
}

body.l1-marketing-v2 .l1-infra-proof-copy {
  max-width: 620px;
}

body.l1-marketing-v2 .l1-infra-label,
body.l1-marketing-v2 .l1-infra-route-head,
body.l1-marketing-v2 .l1-infra-route-meta,
body.l1-marketing-v2 .l1-infra-spec-grid dt,
body.l1-marketing-v2 .l1-infra-proof-strip > article > span {
  font-family: var(--mkt-mono);
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-infra-label {
  color: var(--mkt-blue-dark);
  display: block;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

/* !important on
   - color: beats .l1-section-dark > .l1-container > .l1-section-head h3 (02-layout.css, more
     specific)
   - margin: beats .l1-hero#top .l1-hero-row > .col-lg-6 (10-home.css, more specific) */
body.l1-marketing-v2 .l1-infra-proof-copy h3 {
  color: var(--mkt-ink) !important;
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 610;
  letter-spacing: -0.048em;
  line-height: 1;
  margin: 0 0 1.1rem !important;
  max-width: 11ch;
  word-spacing: 0.025em;
}

/* !important on
   - color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-infra-proof-copy p {
  color: var(--mkt-muted) !important;
  font-size: 0.97rem;
  line-height: 1.68;
  margin: 0 !important;
  max-width: 590px;
}

body.l1-marketing-v2 .l1-infra-spec-grid {
  display: grid;
  gap: 1.35rem clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

body.l1-marketing-v2 .l1-infra-spec-grid > div {
  border: 0;
  display: grid;
  gap: 0.2rem;
  padding: 0;
}

body.l1-marketing-v2 .l1-infra-spec-grid > div:nth-child(even) {
  border: 0;
  padding-left: 0;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-spec-grid dt {
  color: var(--mkt-subtle) !important;
  font-size: 0.55rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-spec-grid dd {
  color: var(--mkt-ink) !important;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0.18rem 0 0;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-spec-grid span {
  color: var(--mkt-muted) !important;
  font-size: 0.7rem;
}

body.l1-marketing-v2 .l1-infra-route {
  background: var(--mkt-night);
  color: var(--mkt-on-dark);
  display: grid;
  gap: 1.15rem;
  grid-template-rows: auto minmax(260px, 1fr) auto auto;
  min-width: 0;
  padding: clamp(1.75rem, 3.5vw, 2.6rem);
}

body.l1-marketing-v2 .l1-infra-route-head {
  align-items: center;
  color: var(--mkt-on-dark-muted);
  display: flex;
  font-size: 0.57rem;
  font-weight: 650;
  justify-content: space-between;
  letter-spacing: 0.08em;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-head strong {
  align-items: center;
  color: #68d9b2 !important;
  display: inline-flex;
  font-size: inherit;
  font-weight: 700;
  gap: 0.42rem;
}

body.l1-marketing-v2 .l1-infra-route-head strong i {
  background: currentColor;
  height: 5px;
  width: 5px;
}

body.l1-marketing-v2 .l1-infra-route-path {
  align-items: stretch;
  display: grid;
  grid-template-rows: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
  margin: 0;
  min-height: 0;
  padding: 0.35rem 0;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-path > div {
  align-items: center;
  color: var(--mkt-on-dark-muted) !important;
  display: grid;
  font-family: var(--mkt-mono);
  gap: 0.9rem;
  grid-template-columns: 48px minmax(0, 1fr);
  text-align: left;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-path > div > i {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--mkt-on-dark) !important;
  display: flex;
  font-size: 0.9rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

body.l1-marketing-v2 .l1-infra-route-path > div > span {
  display: grid;
  gap: 0.18rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-path > div b {
  color: var(--mkt-on-dark) !important;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.025em;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-path > div small {
  color: var(--mkt-on-dark-muted) !important;
  font-size: 0.54rem;
  line-height: 1.4;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-infra-route-path > .l1-infra-edge > i {
  background: var(--mkt-blue);
  border-color: var(--mkt-blue);
  color: #ffffff !important;
  height: 48px;
  width: 48px;
}

body.l1-marketing-v2 .l1-infra-connector {
  background: rgba(255, 255, 255, 0.19);
  height: auto;
  justify-self: start;
  margin-left: 23px;
  position: relative;
  width: 1px;
}

body.l1-marketing-v2 .l1-infra-connector::before,
body.l1-marketing-v2 .l1-infra-connector::after {
  background: var(--mkt-on-dark-muted);
  content: "";
  height: 4px;
  position: absolute;
  left: -1.5px;
  width: 4px;
}

body.l1-marketing-v2 .l1-infra-connector::before {
  top: 25%;
}

body.l1-marketing-v2 .l1-infra-connector::after {
  bottom: 25%;
}

body.l1-marketing-v2 .l1-infra-connector.is-inbound::before {
  background: #d58b8b;
}

body.l1-marketing-v2 .l1-infra-connector.is-clean::before,
body.l1-marketing-v2 .l1-infra-connector.is-clean::after {
  background: #68d9b2;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-connector small {
  color: var(--mkt-on-dark-muted) !important;
  font-family: var(--mkt-mono);
  font-size: 0.47rem;
  left: 1.5rem;
  letter-spacing: 0.045em;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

body.l1-marketing-v2 .l1-infra-route-note {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.045);
  border: 0;
  border-radius: 12px;
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-note > i {
  color: #68d9b2 !important;
  margin-top: 0.18rem;
}

body.l1-marketing-v2 .l1-infra-route-note > span {
  display: grid;
  gap: 0.28rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-note strong {
  color: var(--mkt-on-dark) !important;
  font-size: 0.83rem;
  font-weight: 620;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-route-note small {
  color: var(--mkt-on-dark-muted) !important;
  font-size: 0.68rem;
  line-height: 1.55;
}

body.l1-marketing-v2 .l1-infra-route-meta {
  color: var(--mkt-on-dark-muted);
  display: flex;
  font-size: 0.52rem;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: 0.06em;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

body.l1-marketing-v2 .l1-infra-proof-strip {
  background: var(--mkt-paper-muted);
  border: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: clamp(1.4rem, 3vw, 2rem);
}

body.l1-marketing-v2 .l1-infra-proof-strip > article {
  min-width: 0;
  padding: 0;
}

body.l1-marketing-v2 .l1-infra-proof-strip > article + article {
  border: 0;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-proof-strip > article > span {
  color: var(--mkt-subtle) !important;
  display: block;
  font-size: 0.55rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  margin-bottom: 0.75rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-proof-strip strong {
  color: var(--mkt-ink) !important;
  display: block;
  font-size: clamp(1.75rem, 3.5vw, 2.7rem);
  font-weight: 620;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-infra-proof-strip strong small {
  color: var(--mkt-muted) !important;
  font-family: var(--mkt-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* !important on
   - color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - margin: beats .l1-hero#top .l1-hero-row > .col-lg-6 (10-home.css, more specific) */
body.l1-marketing-v2 .l1-infra-proof-strip p {
  color: var(--mkt-muted) !important;
  font-size: 0.72rem;
  line-height: 1.55;
  margin: 0.75rem 0 0 !important;
  max-width: 34ch;
}

@media (max-width: 991.98px) {
  body.l1-marketing-v2 .l1-infra-proof {
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-infra-route {
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  body.l1-marketing-v2 .l1-infra-proof-strip {
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-infra-proof-strip > article + article {
    border: 0;
  }
}

@media (max-width: 575.98px) {
  body.l1-marketing-v2 .l1-infra-proof-main,
  body.l1-marketing-v2 .l1-infra-route {
    padding: 1.5rem;
  }

  body.l1-marketing-v2 .l1-infra-spec-grid > div,
  body.l1-marketing-v2 .l1-infra-spec-grid > div:nth-child(even) {
    padding: 0;
  }

  body.l1-marketing-v2 .l1-infra-spec-grid > div:nth-child(odd) {
    padding: 0;
  }

  body.l1-marketing-v2 .l1-infra-route {
    min-height: 0;
  }
}

/* ---- Animations ---- */

@keyframes l1-v2-cursor {
  50% { opacity: 0; }
}

/* ---- 11-pricing.css ---- */
/* 11-pricing.css
   Pricing and plans: plan catalog and cards, cadence and compute-family pickers, add-ons, payment
   strip, order start and checkout pages.
 */

/* ---- Page rules that must come before the shared rules below ---- */

/* Belongs with 17-status.css; kept here so .l1-plan-matrix-head > * still overrides it on shared elements. */
.status-pill {
  background: rgba(15, 122, 74, .1);
  border: 1px solid rgba(15, 122, 74, .24);
  color: #0f7a4a;
}

/* ---- Plan cards ---- */

.l1-plan-fit-label {
  font-size: .72rem;
  font-weight: 800;
}

.l1-plan-fit-card h3 {
  font-size: 1.25rem;
  margin: .6rem 0 .75rem;
}

.l1-plan-fit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.l1-plan-fit-card {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}

.l1-plan-fit-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.l1-plan-fit-card li {
  color: var(--l1-text-muted);
  font-size: .9rem;
  padding-top: .45rem;
  border-top: 1px solid var(--l1-border);
}

.l1-plan {
  background: var(--l1-surface);
  position: relative;
  transition: border-color .2s ease;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
}

.l1-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: .25rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(120, 131, 146, .24);
  letter-spacing: 0;
}

.l1-plan-name {
  font-family: var(--l1-font-head);
  font-weight: 700;
  color: var(--l1-text);
  font-size: 1.18rem;
}

.l1-plan-sku {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.l1-plan-tagline {
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.l1-plan-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.1rem;
}

.l1-plan-currency {
  color: var(--l1-text-muted);
  font-size: .88rem;
  margin-right: .15rem;
}

.l1-plan-amount {
  font-family: var(--l1-font-head);
  font-weight: 700;
  color: var(--l1-text);
  line-height: 1;
  font-size: clamp(1.45rem, 2.25vw, 1.95rem);
}

.l1-plan-period {
  color: var(--l1-text-muted);
  margin-left: .35rem;
  font-size: .78rem;
}

.l1-plan-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  flex-grow: 1;
}

.l1-plan-specs li {
  display: flex;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--l1-border);
  font-size: .95rem;
  align-items: flex-start;
  color: var(--l1-text-muted);
}

.l1-plan-specs li:last-child {
  border-bottom: 0;
}

.l1-plan-specs li i {
  color: var(--l1-primary);
  width: 18px;
  text-align: center;
}

.l1-home-plans .l1-plan {
  margin: 0;
}

.l1-locations-section .l1-plan {
  backdrop-filter: blur(8px);
}

.l1-plan-tagline,
.l1-plan-billed {
  color: var(--l1-text-muted);
}

.l1-plan .l1-plan-specs {
  flex: 1 1 auto;
}

.l1-plan-featured {
  position: relative;
}

.l1-plan-billed {
  color: var(--l1-text-muted);
  display: block;
  font-size: .82rem;
  margin-top: .25rem;
  min-height: 1.1rem;
}

/* !important on box-shadow: beats body.l1-marketing-v2 .l1-plan (11-pricing.css, more specific). */
.l1-plan:hover,
.l1-plan-featured:hover,
.l1-tool-card:hover {
  box-shadow: none !important;
  transform: none;
}

.l1-eyebrow,
.l1-plan-badge,
.l1-doc-card-kicker,
.l1-plan-fit-label {
  background: var(--l1-primary-soft);
  border-color: rgba(188, 193, 201, .22);
  color: var(--l1-primary-dark);
}

@media (max-width: 991.98px) {
  .l1-plan-fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .l1-plan-fit-grid {
    grid-template-columns: 1fr;
  }
}

.l1-plan-fit-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l1-plan-includes {
  margin: 0 auto;
  max-width: 920px;
}

/* !important on color: beats a style attribute in apps/billing/selectors.py. */
body.l1-marketing-v2 .l1-feature-tags span,
body.l1-marketing-v2 .l1-plan-tag,
body.l1-marketing-v2 .l1-plan-badge {
  color: var(--mkt-muted) !important;
  font-family: var(--mkt-mono);
  font-size: 0.61rem;
}

/* !important on
   - border-color: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, later in the
     cascade, also !important)
   - color: beats a style attribute in apps/billing/selectors.py */
body.l1-marketing-v2 .l1-section-dark .l1-feature-tags span,
body.l1-marketing-v2 .l1-section-dark .l1-plan-tag,
body.l1-marketing-v2 .l1-section-dark .l1-plan-badge {
  border-color: #3b4658 !important;
  color: var(--mkt-on-dark-muted) !important;
}

body.l1-marketing-v2 .l1-plan-sku {
  color: #08764a;
}

body.l1-marketing-v2 .l1-plan-badge,
body.l1-marketing-v2 .l1-plan-tag,
body.l1-marketing-v2 .l1-addon-unit {
  background: var(--mkt-blue-soft);
  border: 0;
  border-radius: 999px;
}

/* !important on
   - background, border, box-shadow: beats body.l1-marketing-v2 .l1-plan (11-pricing.css, later in
     the cascade) */
body.l1-marketing-v2 .l1-plan-featured,
body.l1-marketing-v2 .l1-plan-featured:hover {
  background: linear-gradient(180deg, rgba(160, 167, 178, 0.18), rgba(55, 212, 165, 0.06)) !important;
  border: 0 !important;
  box-shadow: inset 0 3px 0 var(--mkt-blue), 0 16px 40px rgba(35, 84, 183, 0.12) !important;
}

body.l1-marketing-v2 .l1-plan-features li {
  border-bottom: 0;
}

/* Plan cards: spec icons sat above the text line, the hourly line ran into
   the first spec, and the first row had no divider while the others did. */
body.l1-marketing-v2 .l1-home-plans .l1-plan-specs {
  margin-top: 0.85rem;
}

body.l1-marketing-v2 .l1-home-plans .l1-plan-specs li,
body.l1-marketing-v2 .l1-location-card .l1-plan-specs li {
  align-items: center;
  border-bottom: 0;
  border-top: 1px solid rgb(217, 222, 232);
}

/* "What every plan includes" list was a centred 920px block (x=260) under a
   heading at x=140. */
body.l1-marketing-v2 .l1-plan-includes {
  margin-left: 0;
}

/* Plan-fit labels: the instance type was upper-cased ("GC.MICRO") on a
   highlight with no padding, so it read like selected text. */
body.l1-marketing-v2 .l1-plan-fit-label {
  border-radius: 3px;
  display: inline-block;
  letter-spacing: 0;
  padding: 0.12rem 0.4rem;
  text-transform: none;
}

body.l1-marketing-v2 .l1-plan-fit-example {
  margin-top: 1rem;
}

body.l1-marketing-v2 .l1-plan-fit-example .l1-link-arrow {
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  margin-top: 0.9rem;
}

@media (max-width: 991.98px) {
  .l1-plan-featured {
    transform: none;
  }

  .l1-plan-fit-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .l1-plan-fit-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .l1-plan-featured {
    transform: none;
  }
}

@media (min-width: 768px) {
  body.l1-marketing-v2 .l1-plan-fit-example {
    align-items: flex-start;
    flex-direction: row;
    gap: 2rem;
  }

  body.l1-marketing-v2 .l1-plan-fit-example > div {
    flex: 1 1 auto;
    max-width: 44rem;
  }

  body.l1-marketing-v2 .l1-plan-fit-example > ul {
    flex: 0 0 15rem;
    margin-left: auto;
  }
}

/* ---- Add-ons, payments and OS logos ---- */

.l1-os-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .9rem;
}

/* The chip is what makes the brand marks readable in both themes: Debian
   maroon and AlmaLinux navy disappear against the dark surface without it. */
.l1-os-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(23, 34, 53, .10);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 34, 53, .06);
}

.l1-os-logos img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.l1-payment-strip {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(23, 34, 53, .08);
  text-align: center;
}

.l1-payment-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
}

.l1-payment-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 72px;
  height: 46px;
  padding: 0 .85rem;
  border: 1px solid rgba(23, 34, 53, .09);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 4px 12px rgba(23, 34, 53, .07);
}

.l1-payment-logos img {
  display: block;
  height: 25px;
  width: auto;
  max-width: 82px;
  object-fit: contain;
  flex-shrink: 0;
}

.l1-addon-price {
  color: var(--l1-text);
  font-family: var(--l1-font-head);
  font-weight: 700;
}

.l1-addon-unit {
  color: var(--l1-text-muted);
  font-weight: 500;
}

.l1-include-split {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

body.l1-marketing-v2 .l1-section-dark .l1-addon-unit {
  background: transparent;
  border-radius: 0;
  color: var(--mkt-on-dark-muted);
}

body.l1-marketing-v2 .l1-section-dark .l1-addon-price {
  color: var(--mkt-on-dark);
}

@media (min-width: 768px) {
  .l1-include-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* ---- Cadence switch ---- */

.l1-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem;
  background: var(--l1-surface);
  border: 1px solid var(--l1-border);
  border-radius: 999px;
  margin-top: 1.5rem;
}

.l1-commitment-strip {
  align-items: center;
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  display: inline-flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding: .42rem .5rem;
}

.l1-commitment-strip button.is-active {
  box-shadow: none;
}

.l1-commitment-strip button:active {
  transform: translateY(1px);
}

.l1-commitment-strip small {
  background: rgba(120, 131, 146, .12);
  border-radius: 999px;
  color: inherit;
  display: none;
  font-size: .7rem;
  font-weight: 850;
  padding: .12rem .45rem;
  text-transform: uppercase;
}

@media (max-width: 575.98px) {
  .l1-billing-toggle button {
    padding: .45rem .8rem;
    font-size: .82rem;
  }
}

.l1-commitment-strip button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 800;
  padding: .45rem .9rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* .l1-commitment-strip button small was
   `display: none` unless the button already had .is-active, so the incentive
   for switching to annual only appeared after a visitor had already switched to
   it. Show it unconditionally, as a persistent badge, styled to read as a
   savings callout rather than plain inline text. */
/* !important on
   - display: beats bootstrap.min.css [hidden] (a Bootstrap utility that is itself !important)
   - background: beats body.l1-marketing-v2 .l1-article-hero (02-layout.css, more specific)
   - color: beats body.l1-marketing-v2 .l1-footer-legal (01-base.css, more specific)
   - opacity: beats bootstrap.min.css .btn.disabled (more specific) */
.l1-commitment-strip button small {
  font-weight: 600;
  display: inline-flex !important;
  background: rgba(15, 159, 118, .16) !important;
  color: #34d399 !important;
  opacity: 1 !important;
  margin-left: .4rem;
}

body.l1-marketing-v2 .l1-plan-fit-card,
body.l1-marketing-v2 .l1-pricing-handoff,
body.l1-marketing-v2 .l1-plan,
body.l1-marketing-v2 .l1-stat-card,
body.l1-marketing-v2 .l1-cta-card,
body.l1-marketing-v2 .l1-billing-toggle,
body.l1-marketing-v2 .l1-legal-meta,
body.l1-marketing-v2 .l1-legal-content table,
body.l1-marketing-v2 .l1-empty-public,
body.l1-marketing-v2 .l1-social a {
  background-color: var(--l1-surface);
  border-color: var(--l1-border);
  box-shadow: var(--l1-shadow-soft);
}

/* The strip was a wide, heavily-padded 999px bar carrying a "Credit:" label,
   so it read as another content band rather than a control. This makes it a
   compact segmented switch (tight track, snug inner pills, small radius to
   match the buttons elsewhere) and stops it stretching full-width on mobile,
   which is what made it look like a section header. */
.l1-pricing-page .l1-commitment-strip {
  border: 1px solid rgba(255, 255, 255, .16);
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  gap: .25rem;
  padding: .3rem;
  width: fit-content;
}

body.l1-marketing-v2 .l1-pricing-page .l1-commitment-strip {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .82);
}

body.l1-marketing-v2 .l1-pricing-page .l1-commitment-strip button {
  color: rgba(255, 255, 255, .78);
}

body.l1-marketing-v2 .l1-pricing-page .l1-commitment-strip button:hover {
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
}

body.l1-marketing-v2 .l1-pricing-page .l1-commitment-strip button.is-active {
  background: var(--l1-primary);
  color: #ffffff;
}

body.l1-marketing-v2 .l1-pricing-page .l1-commitment-strip button.is-active:hover {
  background: var(--l1-primary-dark);
  color: #ffffff;
}

/* !important on
   - background: beats components.css .l1-row-action[data-tone="danger"]:hover (more specific)
   - color: beats bootstrap.min.css .btn:first-child:active (more specific) */
.l1-commitment-strip button.is-active small {
  background: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}

.l1-pricing-page .l1-commitment-strip button {
  border-radius: 7px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: .5rem 1.15rem;
  text-transform: none;
}

.l1-pricing-page .l1-commitment-strip button small {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .1rem .4rem;
}

.l1-pricing-cadence-bar {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
}

.l1-pricing-cadence-hint {
  color: var(--l1-ink-soft);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

/* Deliberately no background of its own: the v2 skin repaints the wrap and the
   cadence bar with !important and does not know about this element, so an
   opaque panel here would sit a shade off from the strip directly above it. */
.l1-pricing-cadence-note {
  background: transparent;
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  padding: 0.7rem 1.1rem;
}

.l1-pricing-cadence-switch {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.22rem;
}

.l1-pricing-cadence-switch button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--l1-ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: 2.35rem;
  padding: 0.45rem 1.15rem;
}

.l1-pricing-cadence-switch button:hover {
  color: var(--l1-ink);
}

.l1-pricing-cadence-switch button:focus-visible {
  outline: 2px solid var(--l1-brand);
  outline-offset: 2px;
}

.l1-pricing-cadence-switch button.is-active,
.l1-pricing-cadence-switch button.is-selected {
  background: var(--l1-brand);
  box-shadow: none;
  color: var(--l1-brand-contrast);
}

.l1-pricing-cadence-switch button small {
  color: var(--l1-brand-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-left: 0.35rem;
}

.l1-pricing-cadence-switch button.is-active small,
.l1-pricing-cadence-switch button.is-selected small {
  background: color-mix(in srgb, var(--l1-brand-contrast) 18%, transparent);
  border-radius: 999px;
  color: var(--l1-brand-contrast);
  padding: 0.12rem 0.42rem;
}

body.l1-marketing-v2 .l1-plan-matrix-wrap,
body.l1-marketing-v2 .l1-pricing-controls,
body.l1-marketing-v2 .l1-pricing-cadence-bar,
body.l1-marketing-v2 .l1-plan-matrix {
  background: var(--mkt-paper);
  border-color: var(--mkt-line);
  border-radius: 0;
  box-shadow: none;
}

body.l1-marketing-v2 .l1-pricing-cadence-switch {
  background: var(--mkt-paper-muted);
  border: 1px solid var(--mkt-line);
  border-radius: 1px;
}

/* !important on
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-pricing-cadence-switch button {
  border-radius: 0 !important;
}

/* !important on
   - background: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, later in the cascade,
     also !important)
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-pricing-cadence-switch button.is-active {
  background: var(--mkt-ink) !important;
  color: var(--mkt-paper) !important;
}

@media (max-width: 575.98px) {
  .l1-billing-toggle {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .l1-commitment-strip {
    border-radius: 18px;
    width: 100%;
  }

  .l1-commitment-strip > span,
  .l1-commitment-strip strong {
    justify-content: center;
    width: 100%;
  }

  .l1-pricing-page .l1-pricing-proof-row,
  .l1-pricing-page .l1-commitment-strip {
    width: 100%;
  }

  .l1-pricing-page .l1-pricing-proof-row span,
  .l1-pricing-page .l1-commitment-strip button,
  .l1-pricing-page .l1-commitment-strip > span {
    justify-content: center;
  }

  .l1-pricing-page .l1-commitment-strip {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }

  .l1-pricing-page .l1-commitment-strip button {
    padding: .5rem .85rem;
  }
}

/* ---- Plan catalog ---- */

.l1-pricing-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 2rem;
  align-items: center;
  margin: 0 auto;
}

.l1-pricing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.35rem;
}

.l1-pricing-actions span {
  color: var(--l1-text-muted);
  font-weight: 700;
}

.l1-pricing-summary {
  display: grid;
  gap: .75rem;
}

.l1-pricing-summary div {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: 0;
  border-bottom: 1px solid var(--l1-border);
  border-radius: 0;
  color: var(--l1-text);
  font-weight: 600;
}

.l1-pricing-summary div:last-child {
  border-bottom: 0;
}

.l1-pricing-summary i {
  color: var(--l1-primary);
  width: 18px;
  text-align: center;
}

/* "Size the box" sat in a centred 980px box (x=230) between full-width
   sections (x=140). */
body.l1-marketing-v2 .l1-pricing-handoff {
  background: transparent;
  border: 0;
  padding: 0;
  margin-inline: 0;
  max-width: none;
}

/* !important on
   - background: beats components.css .l1-row-action[data-tone="danger"]:hover (more specific)
   - border-left, border-right, border-top, box-shadow: beats .l1-builder-hero:not(.l1-checkout-hero)
     > .l1-container (02-layout.css, more specific)
   - padding: beats body.l1-marketing-v2 .l1-builder-hero .l1-hero-proof (10-home.css, more specific) */
body.l1-marketing-v2 .l1-pricing-summary div {
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  padding: .7rem 0 !important;
}

.l1-home-hero ~ #plans .l1-pricing-summary,
body:not(.auth-body) .l1-hero#top ~ #plans .l1-pricing-summary {
  background: linear-gradient(135deg, rgba(165, 172, 182, .12), transparent 45%),
    var(--l1-surface);
  padding: 1rem;
}

.l1-home-hero ~ #plans .l1-pricing-summary div,
body:not(.auth-body) .l1-hero#top ~ #plans .l1-pricing-summary div {
  border-bottom: 1px solid var(--l1-border);
  padding: .8rem .1rem;
}

.l1-home-hero ~ #plans .l1-pricing-summary div:last-child,
body:not(.auth-body) .l1-hero#top ~ #plans .l1-pricing-summary div:last-child {
  border-bottom: 0;
}

.l1-pricing-page .l1-pricing-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.15rem auto 0;
}

.l1-pricing-page .l1-pricing-proof-row span {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  display: inline-flex;
  font-size: .86rem;
  font-weight: 750;
  gap: .45rem;
  letter-spacing: 0;
  padding: .48rem .72rem;
}

.l1-pricing-page .l1-plan {
  gap: .45rem;
  overflow: hidden;
  padding: 1.45rem 1.25rem;
}

.l1-pricing-page .l1-plan::before {
  background: linear-gradient(90deg, var(--l1-primary), #14b8a6);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  opacity: .86;
  position: absolute;
}

.l1-pricing-page .l1-plan-featured::before {
  height: 4px;
  opacity: 1;
}

.l1-pricing-page .l1-plan-kicker {
  color: var(--l1-text-muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: .25rem;
  text-transform: uppercase;
}

.l1-pricing-page .l1-plan-name {
  font-size: 1.18rem;
}

.l1-pricing-page .l1-plan-tagline {
  margin-bottom: .7rem;
}

.l1-pricing-page .l1-plan-price {
  margin-bottom: .2rem;
}

.l1-pricing-page .l1-plan-amount {
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
}

.l1-pricing-page .l1-plan-specs {
  margin-top: .85rem;
  margin-bottom: .35rem;
}

.l1-pricing-page .l1-plan-specs li {
  gap: .55rem;
  padding: .48rem 0;
}

.l1-pricing-page .l1-plan .l1-btn {
  margin-top: auto;
}

body.l1-marketing-v2 .l1-pricing-page .l1-plan {
  background: #ffffff;
}

.l1-pricing-page .l1-plan-badge {
  top: .9rem;
  transform: none;
  left: auto;
  right: .9rem;
}

.l1-pricing-page .l1-custom-build-note {
  align-items: center;
  background: var(--l1-surface);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
}

.l1-pricing-page .l1-custom-build-note span {
  color: var(--l1-text);
  display: block;
  font-weight: 800;
  margin-bottom: .12rem;
}

.l1-pricing-page .l1-custom-build-note p {
  color: var(--l1-text-muted);
  margin: 0;
}

.l1-pricing-page .l1-addon-card {
  border-radius: 14px;
}

.l1-pricing-page .l1-addon-price {
  border-top: 1px solid var(--l1-border);
  color: var(--l1-text);
  font-weight: 850;
}

.l1-pricing-page .l1-pricing-hero {
  text-align: left;
}

.l1-pricing-page .l1-pricing-hero .l1-container {
  max-width: 1200px;
}

.l1-pricing-page .l1-pricing-proof-row,
.l1-pricing-page .l1-page-hero .l1-hero-proof {
  justify-content: flex-start;
}

.l1-pricing-stage {
  margin-top: -0.25rem;
  padding: 0 0 1rem;
  position: relative;
  z-index: 2;
}

.l1-pricing-families {
  min-width: 0;
}

.l1-pricing-families-label {
  color: var(--l1-text-muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

.l1-plan-matrix-family {
  align-items: flex-start;
  background: var(--l1-bg-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  justify-content: space-between;
  padding: 1.05rem 1.1rem 1rem;
}

.l1-plan-matrix-family-copy {
  min-width: 0;
}

.l1-plan-matrix-family h2 {
  margin: 0;
}

.l1-plan-matrix-family p {
  color: var(--l1-text-muted);
  font-size: 0.88rem;
  margin: 0.2rem 0 0;
}

.l1-plan-matrix-family-port {
  align-self: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.7rem;
  white-space: nowrap;
}

.l1-plan-matrix-wrap {
  overflow: hidden;
  overflow-x: auto;
}

.l1-plan-matrix {
  display: grid;
  /* Column 6 (Monthly) carries the "$1536.00 due today" line under the
     monthly figure, so it is wider than the spec columns beside it. At the
     old 6.5rem the annual cadence wrapped that line mid-figure. */
  grid-template-columns: minmax(13rem, 1.5fr) 4.5rem 6rem 6.5rem 6.5rem 9rem 7.25rem auto;
  min-width: 880px;
  width: 100%;
}

.l1-plan-matrix-head,
.l1-plan-matrix-row {
  display: contents;
}

.l1-plan-matrix-head > * {
  background: var(--l1-bg-2);
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.7rem 0.9rem;
  text-transform: uppercase;
}

.l1-plan-matrix-row > * {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  font-variant-numeric: tabular-nums;
  min-height: 4.25rem;
  padding: 0.7rem 0.9rem;
}

.l1-plan-matrix-row.is-featured > * {
  background: rgba(77, 148, 255, 0.06);
}

.l1-plan-matrix-row:last-child > * {
  border-bottom: 0;
}

.l1-plan-matrix-row > .l1-plan-matrix-plan {
  display: block;
}

/* The price cell stacks two lines, so it needs a column direction of its own.
   `.l1-plan-matrix-row > *` above makes every cell a ROW flex container, which
   blockifies its children into flex items: `display: block` on
   .l1-plan-matrix-due does not stack them, so the due-today line rendered
   BESIDE the price and overflowed a cell that also sets white-space: nowrap.
   The plan cell has the same problem and solves it with the escape hatch
   directly above; this one was missed because the mobile block resets
   `> *` back to display: block, so it looked right on a phone. */
.l1-plan-matrix-row > .l1-plan-matrix-price-cell {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.l1-plan-matrix-name {
  display: inline-block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-right: 0.45rem;
}

.l1-plan-matrix-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem;
  text-transform: uppercase;
  vertical-align: middle;
}

.l1-plan-matrix-spec-line {
  display: none;
}

.l1-plan-matrix-fit {
  color: var(--l1-text-muted);
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: normal;
}

.l1-plan-matrix-price {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.l1-plan-matrix-due {
  color: var(--l1-text-muted);
  display: block;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.1rem;
}

.l1-plan-matrix-rate-cell {
  color: var(--l1-text-muted);
  font-size: 0.86rem;
}

.l1-plan-matrix-spec,
.l1-plan-matrix-price-cell,
.l1-plan-matrix-rate-cell,
.l1-plan-matrix-cta-cell {
  white-space: nowrap;
}

/* Height, padding and gap are deliberately NOT set here. .ui-btn declares all
   three at the same (0,1,0) specificity from tailwind.css, which
   _head_assets.html loads after marketing.bundle.css, so declarations at this
   specificity lose on source order and read as design intent that never
   applied. What is left is what .ui-btn does not set. Anything that genuinely
   has to override .ui-btn goes through the cell, as the mobile block does. */
.l1-plan-matrix-cta {
  justify-content: center;
  min-width: 5.75rem;
}

.l1-plan-matrix-cta-arrow {
  border-right: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  display: block;
  flex: none;
  height: 0.42em;
  width: 0.42em;
  transform: rotate(45deg);
}

.l1-plan-matrix-empty {
  grid-column: 1 / -1;
  padding: 1.25rem 1rem;
}

.l1-pricing-page [data-pricing-plan-amount] {
  font-variant-numeric: tabular-nums;
}

body.l1-marketing-v2 .l1-pricing-stage,
body.l1-marketing-v2 .l1-plan-matrix-section {
  background: var(--mkt-bg);
}

body.l1-marketing-v2 .l1-plan-matrix-section {
  border: 0;
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
}

body.l1-marketing-v2 .l1-solution-panel,
body.l1-marketing-v2 .l1-pricing-controls,
body.l1-marketing-v2 .l1-plan-matrix-wrap {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 20, 31, 0.12);
}

/* The compute-type panel kept its rounded bottom corners where it joins the
   square "Price as" bar, leaving a notch at each side. */
body.l1-marketing-v2 .l1-pricing-controls {
  padding: 1.2rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body.l1-marketing-v2 .l1-plan-matrix-family {
  border-bottom: 1px solid var(--mkt-line);
  margin-top: 3rem;
  padding-bottom: 1.2rem;
}

body.l1-marketing-v2 .l1-plan-matrix-family h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  letter-spacing: -0.05em;
}

body.l1-marketing-v2 .l1-plan-matrix-family-port,
body.l1-marketing-v2 .l1-plan-matrix-badge {
  background: var(--mkt-blue-soft);
  border: 0;
  border-radius: 1px;
  color: var(--mkt-blue-dark);
  font-family: var(--mkt-mono);
}

body.l1-marketing-v2 .l1-plan-matrix-head {
  background: var(--mkt-night);
  color: #9faabb;
  font-family: var(--mkt-mono);
  font-size: 0.59rem;
  letter-spacing: 0.05em;
}

body.l1-marketing-v2 .l1-plan-matrix-row {
  background: var(--mkt-paper);
  border-radius: 0;
  box-shadow: none;
}

body.l1-marketing-v2 .l1-plan-matrix-row:hover {
  background: var(--mkt-blue-soft);
  transform: none;
}

body.l1-marketing-v2 .l1-plan-matrix-name,
body.l1-marketing-v2 .l1-plan-matrix-price,
body.l1-marketing-v2 .l1-plan-matrix-rate-cell {
  font-family: var(--mkt-mono);
}

/* !important on
   - border-radius: beats body.l1-marketing-v2 .ui-btn (03-components.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-plan-matrix-cta {
  border-radius: 1px !important;
}

body.l1-marketing-v2 .l1-plan-matrix-head,
body.l1-marketing-v2 .l1-plan-matrix-row {
  border: 0;
  border-bottom: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-plan-matrix-row.is-featured {
  background: var(--mkt-blue-soft);
  border-color: var(--mkt-line);
}

/* The section under the plan table asks for a 3rem top (tw:pt-12) but the
   generic section padding won, leaving a 190px empty band on one colour. */
/* !important on
   - padding-top: beats body.l1-marketing-v2 .l1-section (02-layout.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-pricing-plans-section {
  padding-top: 3rem !important;
}

/* Plan guide rows: icons of different widths put the text at two x
   positions. */
body.l1-marketing-v2 .l1-pricing-summary > div > i {
  flex: 0 0 1.25rem;
  text-align: center;
  width: 1.25rem;
}

/* The guide card has a surface and shadow but no inner padding, so its icons
   touched the card edge. */
/* !important on
   - padding-inline: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-pricing-summary > div {
  padding-inline: 1.25rem !important;
}

body.l1-marketing-v2 .l1-plan-matrix-per {
  color: var(--mkt-muted);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0;
}

body.l1-marketing-v2 .l1-plan-matrix-due[hidden] {
  display: none;
}

@media (max-width: 991.98px) {
  .l1-pricing-handoff {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .l1-pricing-handoff {
    gap: 1.35rem;
  }

  .l1-pricing-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .l1-pricing-page .l1-custom-build-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .l1-pricing-stage {
    padding-left: 0;
    padding-right: 0;
  }

  .l1-plan-matrix-wrap {
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  .l1-plan-matrix {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .l1-plan-matrix-head {
    display: none;
  }

  .l1-plan-matrix-row {
    align-items: center;
    display: grid;
    gap: 0.12rem 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    min-width: 0;
    padding: 0.75rem 0.9rem;
  }

  .l1-plan-matrix-row > * {
    border: 0;
    display: block;
    min-height: 0;
    padding: 0;
  }

  .l1-plan-matrix-row > .l1-plan-matrix-spec {
    display: none;
  }

  .l1-plan-matrix-row.is-featured > * {
    background: transparent;
  }

  .l1-plan-matrix-plan {
    grid-column: 1;
    grid-row: 1 / span 3;
    min-width: 0;
  }

  .l1-plan-matrix-name {
    font-size: 1.05rem;
    margin-right: 0.35rem;
  }

  .l1-plan-matrix-fit {
    display: none;
  }

  .l1-plan-matrix-spec {
    display: none;
  }

  .l1-plan-matrix-spec-line {
    color: var(--l1-text-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0.2rem;
    white-space: normal;
  }

  .l1-plan-matrix-price-cell {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    white-space: nowrap;
  }

  .l1-plan-matrix-price {
    font-size: 1.05rem;
  }

  .l1-plan-matrix-rate-cell {
    color: var(--l1-text-muted);
    font-size: 0.78rem;
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    white-space: nowrap;
  }

  /* Stays visible where the spec columns collapse away: it is the figure the
     customer is actually asked for at checkout. It sits inside the price
     cell rather than in a row of its own, so it needs no grid placement. */
  .l1-plan-matrix-due {
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .l1-plan-matrix-cta-cell {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    padding-top: 0.4rem;
  }

  /* 44px, not the 36px this inherits from .ui-btn. This is the most important
     tap on the site and it was the smallest control on the page.

     Selected through the cell so the specificity is (0,2,0). .ui-btn sets
     both min-height and padding at (0,1,0) from tailwind.css, which
     _head_assets.html loads AFTER marketing.bundle.css, so a bare
     .l1-plan-matrix-cta rule loses the tie on source order and the tap target
     silently stays 36px. Same reason 10-home.css reaches for !important on .l1-hero-cta .ui-btn--lg. */
  .l1-plan-matrix-cta-cell .l1-plan-matrix-cta {
    min-height: 2.75rem;
    min-width: 0;
    padding: 0.5rem 1rem;
    width: auto;
  }
}

/* ---- Order start and checkout ---- */

.l1-checkout-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
}

.l1-checkout-payment-card {
  grid-column: 1 / -1;
}

/* Stepper: the finished "Plan" step and the current "Account" step had the
   same filled chip, so two steps read as current. Done steps keep a filled
   number only. */
body.l1-marketing-v2 .l1-flow-step.is-complete {
  background: transparent;
  border-color: transparent;
}

body.l1-marketing-v2 .l1-flow-step.is-complete > span {
  background: var(--mkt-blue);
  border-color: var(--mkt-blue);
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .l1-checkout-layout {
    grid-template-columns: 1fr;
  }
}

/* ---- Compute-family picker ---- */

.l1-pricing-families .l1-pick-grid.l1-deploy-families {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* !important on background, border: beats components.css .l1-pick:has(.ui-check:checked) (more specific). */
body.l1-marketing-v2 .l1-pick {
  box-shadow: none;
  background: var(--mkt-paper-muted) !important;
  border: 0 !important;
  border-radius: 10px;
}

/* !important on
   - background, border-color: beats body.l1-marketing-v2 .l1-pick (11-pricing.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-pick.is-selected {
  background: var(--mkt-night) !important;
  border-color: var(--mkt-night) !important;
  color: #ffffff;
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-section-dark .l1-content-cell strong (03-components.css,
     later in the cascade, also !important) */
body.l1-marketing-v2 .l1-pick.is-selected .l1-pick__aside,
body.l1-marketing-v2 .l1-pick.is-selected .l1-pick__label {
  color: #ffffff !important;
}

@media (max-width: 560px) {
  .l1-pricing-families .l1-pick-grid.l1-deploy-families {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .l1-pricing-families .l1-pick-grid.l1-deploy-families {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- 12-solutions.css ---- */
/* 12-solutions.css
   Solutions and regional landing pages and every CMS page rendered by page_detail.html (page
   builder blocks).
 */

/* ---- Launch steps ---- */

.l1-launch-steps {
  display: grid;
  gap: 1rem;
}

.l1-launch-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--l1-border);
}

.l1-launch-step:first-child {
  padding-top: 0;
}

.l1-launch-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.l1-launch-step h3 {
  font-size: 1.12rem;
  margin-bottom: .35rem;
}

/* !important on
   - color: beats .l1-solution-landing .l1-launch-step > span (12-solutions.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-launch-step .l1-step-num {
  color: var(--mkt-muted) !important;
}

/* ---- CMS page body ---- */

/* Policy text at a readable measure, starting on the same line as the hero
   title above it (an older 760px cap lost to the 1240px
   marketing container). */
body.l1-marketing-v2 .l1-cms-body-legal .l1-legal-copy {
  max-width: 1200px;
  padding-inline: clamp(1.4rem, 3.4vw, 3rem);
}

body.l1-marketing-v2 .l1-cms-body-legal .l1-legal-copy > * {
  max-width: 72ch;
}

/* Terms, Privacy, AUP and SLA: the CMS wrapper kept the portal's #f6f8fc
   background and its own 40px/72px padding, so a pale band (seam) showed
   between the white hero and the body, and again above the closing band. The
   section inside already carries the page rhythm. */
body.l1-marketing-v2 .l1-cms-body-legal {
  background: var(--mkt-bg);
  padding: 0;
}

.l1-public-rendered-page > :first-child {
  margin-top: 0;
}

.l1-public-rendered-page > h1 {
  margin: 0;
}

.l1-public-rendered-page > h1,
.l1-public-rendered-page > header:not([class]) {
  padding: 5.25rem max(1.25rem, calc((100vw - 1140px) / 2)) 2.15rem;
}

.l1-cms-body {
  background: var(--l1-bg);
}

.l1-cms-body .row {
  align-items: start;
  row-gap: 1.5rem;
}

.l1-cms-body p,
.l1-cms-body li,
.l1-cms-body td,
.l1-cms-body th {
  color: var(--l1-text-muted);
}

.l1-cms-body .l1-section + .l1-section {
  margin-top: 0;
}

/* CMS/docs hero alignment: keep generated page hero copy truly centered. */
.l1-public-rendered-page > .l1-page-hero > .l1-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.l1-public-rendered-page > .l1-page-hero h1,
.l1-public-rendered-page > .l1-page-hero p {
  width: 100%;
}

.l1-cms-body-docs,
.l1-cms-body-seo,
.l1-cms-body-standard {
  padding-bottom: 1rem;
}

/* Page heroes: the container was 1200px with 48px gutters, so the eyebrow,
   heading and copy started at x=168 (or 148) while every section below starts
   at x=140. Same box as .l1-container. Legal pages, the narrow ticket and
   survey pages and the one-card email-link pages keep their own column so
   the hero stays over their body. */
/* !important on
   - max-width: beats body.l1-marketing-v2 .l1-hero#top .l1-container (10-home.css, more specific)
   - padding-inline: beats .l1-hero#top > .l1-container (10-home.css, more specific) */
body.l1-marketing-v2 .l1-page-hero:not(:has(~ .l1-cms-body-legal)):not(:has(+ .l1-section > .tw\:max-w-3xl, + .l1-section > .l1-csat)) > .l1-container,
body.l1-marketing-v2 .l1-contact-hero:not(:has(.l1-contact-success)) > .l1-container {
  max-width: 1240px !important;
  padding-inline: clamp(1.25rem, 3.2vw, 2.5rem) !important;
}

/* Content pages (about, FAQ, security, Solutions, regional): the CMS wrapper
   added 16px of blue-grey padding under the last section, a visible seam above
   the closing band. */
body.l1-marketing-v2 .l1-cms-body-seo,
body.l1-marketing-v2 .l1-cms-body-standard {
  padding-bottom: 0;
}

/* About: the closing line on the navy band ran the full 1160px (about
   170 characters a line). */
body.l1-marketing-v2 .l1-cms-body .l1-container > p {
  max-width: 75ch;
}

@media (min-width: 1024px) {
  body.l1-marketing-v2 .l1-cms-body .tw\:items-center:has(> * > .l1-stat-grid) {
    align-items: start;
  }

  body.l1-marketing-v2 .l1-cms-body .l1-stat-grid {
    margin-top: 3.45rem;
  }
}

/* ---- Page-builder blocks ---- */

.l1-builder-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.l1-builder-actions form {
  margin: 0;
}

.l1-page-hero .l1-builder-actions,
.l1-builder-hero .l1-builder-actions,
.l1-builder-cta .l1-builder-actions,
.l1-cta-card .l1-builder-actions {
  justify-content: center;
}

.l1-builder-section {
  padding: 4.5rem 0;
  background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
}

.l1-builder-section h2,
.l1-builder-cta h2 {
  font-size: clamp(2rem, 3vw, 3.2rem);
  margin-bottom: 1rem;
}

.l1-builder-grid-section {
  padding-top: 1rem;
}

.l1-builder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.l1-builder-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .09);
  border-color: var(--l1-border);
  padding: 1.35rem;
}

.l1-builder-card h3 {
  font-size: 1.1rem;
  margin-bottom: .65rem;
}

.l1-builder-cta {
  padding: 2rem 0 5rem;
}

.l1-builder-article {
  padding: 8rem 0 5rem;
}

.l1-builder-article-section {
  border-top: 1px solid rgba(15, 23, 42, .1);
  margin-top: 2.2rem;
  padding-top: 2.2rem;
}

.l1-builder-article-section h2,
.l1-builder-callout h2 {
  font-size: 1.75rem;
  margin-bottom: .8rem;
}

.l1-builder-callout {
  border: 1px solid rgba(37, 99, 235, .16);
  margin-top: 2.2rem;
  padding: 1.5rem;
  background: #f6f7f8;
  border-color: rgba(120, 131, 146, .18);
  border-radius: 8px;
}

.l1-checkout-payment-card .l1-builder-actions {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l1-checkout-payment-card .l1-builder-actions form,
.l1-checkout-payment-card .l1-builder-actions button {
  width: 100%;
}

.dashboard-shell .l1-builder-hero .l1-container,
.dashboard-shell .l1-builder-section .l1-container,
.public-sidebar-shell .l1-builder-hero .l1-container,
.public-sidebar-shell .l1-builder-section .l1-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.dashboard-shell .l1-builder-section,
.public-sidebar-shell .l1-builder-section {
  background: transparent;
  padding: 1rem 0 2.5rem;
}

.dashboard-shell .l1-builder-grid,
.public-sidebar-shell .l1-builder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-shell .l1-builder-card > h2,
.public-sidebar-shell .l1-builder-card > h2 {
  color: var(--l1-text);
  font-family: var(--l1-heading-font);
  font-size: 1.3rem;
  font-weight: 850;
  line-height: 1.15;
  margin: 0 0 .9rem;
}

.l1-cms-body .l1-cta-card,
.l1-cms-body .l1-builder-cta {
  background: linear-gradient(rgba(66, 73, 82, .9), rgba(101, 111, 126, .86)),
    url("../img/world-map-outline.04b03780e8d0.svg") center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #ffffff;
}

.l1-cms-body .l1-cta-card h2,
.l1-cms-body .l1-cta-card h3,
.l1-cms-body .l1-cta-card p,
.l1-cms-body .l1-builder-cta h2,
.l1-cms-body .l1-builder-cta h3,
.l1-cms-body .l1-builder-cta p {
  color: #ffffff;
}

.l1-cms-body .l1-cta-card .l1-btn-ghost,
.l1-cms-body .l1-builder-cta .l1-btn-ghost {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .36);
  color: #ffffff;
}

.l1-page-hero > .l1-container,
.l1-builder-hero:not(.l1-checkout-hero) > .l1-container,
.l1-article-hero > .l1-container,
.l1-cms-body .l1-page-hero > .l1-container,
.l1-cms-body .l1-builder-hero > .l1-container {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* !important on box-shadow: beats body.l1-marketing-v2 .l1-plan-fit-card (11-pricing.css, more specific). */
.l1-cms-body .l1-builder-card,
.l1-cms-body .l1-plan-fit-card {
  box-shadow: none !important;
  padding: clamp(1.25rem, 2vw, 1.65rem);
}

.l1-cms-body .l1-builder-card p {
  margin-bottom: 0;
}

.l1-builder-actions,
.l1-cta-buttons,
.l1-feature-action-row,
.l1-cms-body .l1-builder-actions {
  justify-content: center;
  text-align: center;
}

/* CMS solution heroes: center primary/secondary hero actions under centered copy. */
.l1-public-rendered-page .l1-page-hero .l1-builder-actions,
.l1-cms-body .l1-page-hero .l1-builder-actions,
.l1-builder-page .l1-page-hero .l1-builder-actions {
  align-self: center;
  margin-right: auto;
  max-width: min(100%, 760px);
  width: 100%;
}

.l1-public-rendered-page .l1-page-hero .l1-builder-actions .l1-link-arrow,
.l1-cms-body .l1-page-hero .l1-builder-actions .l1-link-arrow,
.l1-builder-page .l1-page-hero .l1-builder-actions .l1-link-arrow {
  justify-content: center;
}

.l1-page-hero > .l1-container,
.l1-builder-hero:not(.l1-checkout-hero) > .l1-container,
.l1-contact-hero > .l1-container,
.l1-article-hero > .l1-container,
.l1-public-rendered-page .l1-page-hero > .l1-container,
.l1-cms-body .l1-page-hero > .l1-container,
.l1-cms-body .l1-builder-hero > .l1-container {
  width: 100%;
}

.l1-page-hero .l1-builder-actions,
.l1-builder-hero:not(.l1-checkout-hero) .l1-builder-actions {
  margin-top: clamp(1rem, 1.7vw, 1.35rem);
}

.l1-page-hero .l1-builder-actions,
.l1-contact-hero .l1-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.35rem;
}

body.l1-marketing-v2 .l1-article-shell,
body.l1-marketing-v2 .l1-builder-article {
  background: var(--mkt-bg);
  color: var(--mkt-ink);
}

/* Hero buttons and proof chips were centred under left-aligned hero copy. */
body.l1-marketing-v2 .l1-page-hero .l1-builder-actions,
body.l1-marketing-v2 .l1-section-head + .l1-builder-actions {
  justify-content: flex-start;
  margin-left: 0;
  text-align: left;
}

/* Buttons in a left-aligned card (LowEndTalk beta access, promo code card)
   were centred under left-aligned text. */
body.l1-marketing-v2 .l1-content-cell > .l1-builder-actions {
  justify-content: flex-start;
  text-align: left;
}

@media (max-width: 991.98px) {
  .l1-builder-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-shell .l1-builder-grid,
  .public-sidebar-shell .l1-builder-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .l1-checkout-payment-card .l1-builder-actions {
    grid-template-columns: 1fr;
  }
}

/* ---- Solution landings ---- */

/* !important on
   - align-items: beats .l1-public-rendered-page > .l1-page-hero > .l1-container (12-solutions.css,
     more specific)
   - background-color, background-image, border-color, box-shadow: beats .l1-builder-
     hero:not(.l1-checkout-hero) > .l1-container (02-layout.css, more specific) */
.l1-solution-hero > .l1-container {
  align-items: stretch !important;
  background-color: rgba(21, 42, 82, 0.78) !important;
  background-image: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(110, 176, 255, 0.18), transparent 58%),
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(165, 206, 255, 0.08), transparent 52%) !important;
  border-color: rgba(158, 194, 255, 0.1) !important;
  box-shadow: none !important;
  text-align: left;
}

.l1-solution-hero .l1-page-hero-layout {
  align-items: center;
  width: 100%;
}

.l1-solution-hero .l1-page-hero-copy h1,
.l1-solution-hero .l1-page-hero-copy p {
  margin-inline: 0;
  text-align: left;
}

/* !important on
   - color: beats .l1-public-rendered-page > header:not([class]) p (02-layout.css, more specific) */
.l1-solution-hero .l1-page-hero-copy p {
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 38rem;
}

.l1-solution-hero .l1-builder-actions {
  justify-content: flex-start;
}

.l1-public-rendered-page > .l1-solution-hero > .l1-container {
  align-items: stretch;
  text-align: left;
}

.l1-public-rendered-page > .l1-solution-hero h1,
.l1-public-rendered-page > .l1-solution-hero p {
  margin-left: 0;
  text-align: left;
}

.l1-solution-hero-visual {
  position: relative;
  width: 100%;
}

.l1-solution-panel {
  padding: 1.15rem 1.2rem 1.05rem;
}

/* !important on font-size, margin: beats .l1-builder-hero p (02-layout.css, more specific). */
.l1-solution-panel-kicker {
  font-size: 0.72rem !important;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin: 0 0 0.85rem !important;
  text-transform: uppercase;
}

.l1-solution-visual-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 0.12rem;
  padding: 0.7rem 0 0;
}

.l1-solution-visual-row + .l1-solution-visual-row {
  margin-top: 0.7rem;
}

.l1-solution-visual-row span {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.l1-solution-visual-row strong {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.l1-solution-landing .l1-bento-card::before {
  display: none;
}

.l1-solution-landing .l1-launch-step {
  align-items: start;
  border-bottom-color: rgba(21, 42, 82, 0.08);
  gap: 0.9rem;
  grid-template-columns: 1.6rem minmax(0, 1fr);
}

/* !important on
   - background: beats components.css .l1-notifbell__item[data-tone="danger"] .l1-notifbell__dot
     (more specific)
   - border: beats bootstrap.min.css .btn:first-child:active (more specific)
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important)
   - color, font-weight: beats a style attribute in apps/billing/selectors.py
   - height: beats bootstrap.min.css .h-100 (a Bootstrap utility that is itself !important)
   - width: beats bootstrap.min.css .w-100 (a Bootstrap utility that is itself !important) */
.l1-solution-landing .l1-launch-step > span,
.l1-solution-landing .l1-launch-step > .l1-step-num {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #8a96a8 !important;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650 !important;
  height: auto !important;
  justify-content: flex-start;
  letter-spacing: 0.04em;
  margin: 0.2rem 0 0;
  width: auto !important;
}

/* !important on
   - background, border-radius: beats tailwind.css .ui-panel .ui-panel (loads after this bundle)
   - border-color, box-shadow: beats body.l1-marketing-v2 .l1-plan-fit-card (11-pricing.css, more
     specific) */
.l1-solution-landing .l1-plan-fit-card {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(21, 42, 82, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  gap: 1.2rem;
  padding: 1.35rem 1.3rem 1.4rem;
}

/* !important on
   - background: beats tailwind.css .ui-panel .ui-panel (loads after this bundle)
   - border-color, box-shadow: beats body.l1-marketing-v2 .l1-plan-fit-card (11-pricing.css, more
     specific) */
.l1-solution-landing .l1-plan-fit-card-primary {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(21, 42, 82, 0.16) !important;
  box-shadow: none !important;
}

.l1-solution-landing .l1-plan-fit-label {
  font-weight: 700;
}

body.l1-marketing-v2 .l1-solution-panel {
  background: var(--mkt-night);
  color: var(--mkt-on-dark);
}

/* !important on color: beats a style attribute in apps/billing/selectors.py. */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-solution-panel p,
body.l1-marketing-v2 .l1-solution-panel-kicker,
body.l1-marketing-v2 .l1-solution-visual-row span {
  color: var(--mkt-on-dark-muted) !important;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-solution-visual-row strong {
  color: var(--mkt-on-dark) !important;
}

/* Plan-fit labels on solution pages were #5c6b82 on the soft blue chip (4.4:1). */
body.l1-marketing-v2 .l1-solution-landing .l1-plan-fit-label {
  color: #3d4754;
}

/* Hero titles were capped at 465px inside a 644px column, so every title
   broke into four lines ("Root access, / included / mitigation, no tick- /
   rate surprises."). */
/* !important on
   - max-width: beats html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero h1 (02-layout.css, more
     specific) */
body.l1-marketing-v2 .l1-solution-hero .l1-page-hero-copy h1 {
  max-width: 100% !important;
}

body.l1-marketing-v2 .l1-solution-snippet {
  margin-top: 1.75rem;
}

body.l1-marketing-v2 .l1-solution-snippet h3 {
  font-size: 1rem;
  margin: 0 0 0.65rem;
}

/* Config lines must not wrap mid-line (bootstrap-bridge.css sets
   pre-wrap); scroll inside the block instead, as the docs code does. */
body.l1-marketing-v2 .l1-solution-snippet pre {
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 0 0 0.75rem;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
}

body.l1-marketing-v2 .l1-solution-snippet p {
  color: var(--mkt-muted);
  font-size: 0.92rem;
  margin: 0;
}

/* ---- 13-pages.css ---- */
/* 13-pages.css
   Static marketing pages: features, LayerOne Aegis, locations, contact, brand and partner program.
 */

/* ---- Features ---- */

.l1-check-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: .7rem;
}

.l1-check-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: var(--l1-text);
  line-height: 1.45;
}

.l1-check-list i {
  color: var(--l1-primary-2);
  margin-top: .2rem;
}

.l1-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.l1-feature-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.l1-bento-card .l1-feature-tags {
  margin-top: auto;
  padding-top: 1.1rem;
}

.l1-home-hero ~ #use-cases .l1-feature-tags,
body:not(.auth-body) .l1-hero#top ~ #use-cases .l1-feature-tags {
  margin-top: auto;
  padding-top: 1.05rem;
}

.l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature-icon,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature-icon {
  position: absolute;
  right: 1.35rem;
  top: 1.12rem;
}

/* !important on max-width: beats body.l1-marketing-v2 .l1-container (02-layout.css, more specific). */
.l1-features-hero .l1-container {
  max-width: 1200px !important;
}

.l1-features-hero .l1-page-hero-layout,
.l1-features-hero .l1-page-hero-copy {
  align-self: stretch;
  text-align: left;
  width: 100%;
}

.l1-features-hero .l1-page-hero-copy h1,
.l1-features-hero .l1-page-hero-copy p {
  margin-inline: 0;
  max-width: 38rem;
  text-align: left;
}

.l1-features-hero-visual {
  position: relative;
  width: 100%;
}

.l1-control-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.l1-control-chip {
  background: #ffffff;
  border: 1px solid rgba(18, 32, 58, 0.1);
  border-radius: 8px;
  color: #12203a;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 0.38rem 0.65rem;
}

.l1-control-chip.is-active {
  border-color: #3b7ae8;
}

.l1-solution-landing .l1-feature-tags {
  display: none;
}

.l1-solution-landing .l1-feature-action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.l1-plan-includes .l1-check-list {
  display: grid;
  gap: 0.65rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

body.l1-marketing-v2 .l1-control-chip.is-active {
  background: var(--mkt-blue);
  color: #ffffff;
}

body.l1-marketing-v2 .l1-feature-tags {
  column-gap: 1rem;
  row-gap: 0.55rem;
}

/* !important on
   - background: beats components.css .l1-notifbell__item[data-tone="danger"] .l1-notifbell__dot
     (more specific)
   - border: beats bootstrap.min.css .btn:first-child:active (more specific)
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important)
   - padding: beats bootstrap.min.css .pt-5 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-feature-tags span {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  padding: 0 !important;
}

body.l1-marketing-v2 .l1-feature-tags span::before {
  background: var(--mkt-blue);
  border-radius: 999px;
  content: "";
  height: 4px;
  margin-right: 0.45rem;
  width: 4px;
}

body.l1-marketing-v2 .l1-bento-card-content > .l1-feature-tags:last-child {
  margin-top: auto;
}

/* !important on color: beats a style attribute in apps/billing/selectors.py. */
body.l1-marketing-v2 .l1-section-dark .l1-feature-tags span {
  color: #d7deea !important;
  font-size: 0.66rem;
}

body.l1-marketing-v2 .l1-section-dark .l1-feature-tags span::before {
  background: var(--mkt-on-dark-link);
}

/* A pair of buttons in an action row ("All locations", "Open looking
   glass") was pushed to opposite edges; the row's space-between is meant for
   a sentence plus one button. */
body.l1-marketing-v2 .l1-feature-action-row:not(:has(> p)) {
  gap: 0.75rem;
  justify-content: flex-start;
}

@media (max-width: 767.98px) {
  .l1-plan-includes .l1-check-list {
    grid-template-columns: 1fr;
  }
}

/* ---- Contact ---- */

.l1-contact-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #393f48 0%, #454c56 100%);
}

.l1-contact-meta {
  display: grid;
  gap: .8rem;
  margin-top: 2rem;
  max-width: 520px;
}

.l1-contact-meta > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: .9rem 1rem;
}

.l1-contact-meta strong {
  color: var(--l1-text);
  font-size: .92rem;
}

.l1-contact-meta span,
.l1-contact-meta a {
  color: var(--l1-text-muted);
  font-size: .9rem;
}

.l1-contact-card,
.l1-contact-success {
  border: 1px solid var(--l1-border);
  padding: 1.5rem;
}

.l1-contact-card-head {
  border-bottom: 1px solid var(--l1-border);
  margin: -.1rem 0 1.25rem;
  padding-bottom: 1.15rem;
}

.l1-contact-card-head h2 {
  font-size: 1.35rem;
  margin: 0;
}

.l1-contact-card label {
  color: var(--l1-text);
  display: block;
  font-size: .86rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.l1-contact-card input,
.l1-contact-card textarea {
  min-height: 48px;
  padding: .75rem .9rem;
  width: 100%;
}

.l1-contact-card textarea {
  min-height: 168px;
  resize: vertical;
}

.l1-contact-card input:focus,
.l1-contact-card textarea:focus {
  outline: none;
}

.l1-contact-card .errorlist {
  color: #b42318;
  font-size: .84rem;
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}

.l1-contact-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.4rem;
}

.l1-contact-success {
  margin: 0 auto;
  max-width: 760px;
  padding: 2rem;
}

.l1-contact-meta > div,
.l1-contact-card,
.l1-contact-success {
  background: rgba(255, 255, 255, .9);
}

/* Readability fixes: keep dark text inside the white contact card even
   though the surrounding hero is dark-themed. */
.l1-contact-hero .l1-contact-card h2 {
  color: var(--l1-text);
}

.l1-contact-hero .l1-contact-card label {
  color: var(--l1-text);
}

/* Guest ticket / unsubscribe success cards sit in the dark hero. */
.l1-page-hero .l1-contact-success,
.l1-contact-hero .l1-contact-success {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  margin: 0 auto;
  max-width: 640px;
  padding: 2rem 1.75rem;
}

body.l1-marketing-v2 .l1-page-hero .l1-contact-success,
body.l1-marketing-v2 .l1-contact-hero .l1-contact-success {
  background: rgba(255, 255, 255, .08);
}

/* !important on
   - background: beats components.css .l1-row-action[data-tone="danger"]:hover (more specific)
   - border, border-bottom, border-radius, box-shadow: beats .l1-builder-hero:not(.l1-checkout-hero)
     > .l1-container (02-layout.css, more specific)
   - margin: beats bootstrap.min.css .dropup .dropdown-menu[data-bs-popper] (more specific) */
body.l1-marketing-v2 .l1-spec-row,
body.l1-marketing-v2 .l1-contact-meta > div {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mkt-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Email-link pages (unsubscribe, review) are one card on the white hero. The
   contact-page wrapper's gray gradient and 100vh minimum showed as a large
   gray block between the card and the footer. */
body.l1-marketing-v2 .l1-contact-page.l1-token-page {
  background: var(--mkt-paper);
  min-height: 0;
}

@media (max-width: 767.98px) {
  .l1-contact-meta > div {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }

  .l1-contact-card,
  .l1-contact-success {
    padding: 1.1rem;
  }
}

/* ---- Locations ---- */

.l1-location-card {
  height: 100%;
}

.l1-location-plan-name {
  font-size: 1.6rem;
}

.l1-location-region-mark {
  align-items: center;
  background: var(--l1-primary-soft);
  border: 1px solid var(--l1-accent-border, rgba(120, 131, 146, .22));
  border-radius: 8px;
  color: var(--l1-primary-dark);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 900;
  height: 3rem;
  justify-content: center;
  letter-spacing: .08em;
  line-height: 1;
  width: 3rem;
}

.l1-code-link {
  color: var(--l1-primary-dark);
}

.l1-muted-centered-copy {
  color: var(--l1-text-muted);
  margin: 0 auto 1rem;
  max-width: 560px;
}

/* Tampa card: the subtitle and the "Live, orders open" line were centred
   inside a left-aligned card. */
body.l1-marketing-v2 .l1-location-card {
  text-align: left;
}

/* "Want a region we haven't announced?" was centred under a left-aligned
   heading. */
body.l1-marketing-v2 .l1-muted-centered-copy {
  margin-left: 0;
}

/* ---- Features: product mockups ---- */

.l1-mockup-window {
  background: var(--l1-surface);
  border: 1px solid var(--l1-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(12, 13, 14, .16);
  overflow: hidden;
  font-size: .8rem;
}

.l1-mockup-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
}

.l1-mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--l1-border-strong);
  flex: 0 0 auto;
}

.l1-mockup-dot.red {
  background: #ff5f56;
}

.l1-mockup-dot.yellow {
  background: #ffbd2e;
}

.l1-mockup-dot.green {
  background: #27c93f;
}

.l1-mockup-title {
  margin-left: .4rem;
  color: var(--l1-text-dim);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dashboard mockup pieces */
.l1-mockup-dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--l1-border);
}

.l1-mockup-dash-name {
  font-family: var(--l1-heading-font);
  font-weight: 700;
  font-size: .92rem;
  color: var(--l1-text);
}

.l1-mockup-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
}

.l1-mockup-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--l1-accent);
  box-shadow: 0 0 0 3px var(--l1-accent-soft);
  animation: l1-dot-pulse 2s ease-in-out infinite;
}

.l1-mockup-dash-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.l1-mockup-dash-meta strong {
  color: var(--l1-text);
  font-size: .8rem;
}

.l1-mockup-dash-meta span {
  color: var(--l1-text-dim);
  font-size: .7rem;
}

.l1-mockup-dash-body {
  padding: 1rem;
}

.l1-mockup-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-top: .95rem;
}

.l1-mockup-stat {
  padding: .55rem .65rem;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: 8px;
}

.l1-mockup-stat strong {
  display: block;
  color: var(--l1-text);
  font-size: .86rem;
  line-height: 1.25;
}

.l1-mockup-stat span {
  color: var(--l1-text-dim);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Terminal mockup (dark chrome in both themes, like a real terminal) */
.l1-mockup-terminal {
  background: #141619;
  border-color: rgba(255, 255, 255, .14);
  color: #d4d8dd;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.l1-mockup-terminal .l1-mockup-header {
  background: rgba(255, 255, 255, .05);
  border-bottom-color: rgba(255, 255, 255, .09);
}

.l1-mockup-terminal .l1-mockup-title {
  color: rgba(212, 216, 221, .6);
}

.l1-mockup-terminal-body {
  padding: .9rem 1rem;
  font-size: .74rem;
  line-height: 1.55;
}

.l1-mockup-terminal-line {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .25rem;
}

.l1-mockup-terminal-line:last-child {
  margin-bottom: 0;
}

.l1-mockup-terminal-prompt {
  color: #37d4a5;
  flex: 0 0 auto;
}

.l1-mockup-terminal-out {
  color: rgba(212, 216, 221, .62);
  margin-bottom: .25rem;
}

.l1-mockup-terminal-ok {
  color: #37d4a5;
}

.l1-features-hero .l1-mockup-window {
  background: #f7f9fc;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 22px 50px rgba(5, 11, 24, 0.38);
}

.l1-features-hero .l1-mockup-header {
  background: #eef2f8;
  border-bottom-color: rgba(18, 32, 58, 0.08);
}

.l1-features-hero .l1-mockup-title,
.l1-features-hero .l1-mockup-dash-meta span,
.l1-features-hero .l1-mockup-stat span {
  color: #5a6b86;
}

.l1-features-hero .l1-mockup-dash-name,
.l1-features-hero .l1-mockup-dash-meta strong,
.l1-features-hero .l1-mockup-stat strong {
  color: #12203a;
}

.l1-features-hero .l1-mockup-stat {
  background: #ffffff;
  border-color: rgba(18, 32, 58, 0.08);
}

body.l1-marketing-v2 .l1-mockup-status {
  color: #08764a;
}

@media (prefers-reduced-motion: reduce) {
  /* !important on animation: beats * (01-base.css, later in the cascade, also !important). */
  .l1-mockup-status-dot {
    animation: none !important;
  }
}

/* ---- Brand ---- */

/* Brand kit: same section rhythm as the rest of the marketing site. */
.l1-brand-swatch {
  border-radius: 8px;
  height: 5rem;
  margin-bottom: .75rem;
}

.l1-brand-preview {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--l1-border);
  border-radius: 8px;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  min-height: 10rem;
  padding: 2rem;
}

.l1-brand-preview-dark {
  background: var(--l1-hero-ground);
}

.l1-brand-preview-dark img {
  /* Previously inverted the light lockup to fake a reversed one. The tile is
     handed logo-layerone-dark.png now, so inverting it would undo the point. */
  filter: none;
}

/* Asset cards: the title touched the preview box and the download button
   touched the description. */
/* !important on margin-top: beats bootstrap.min.css .mt-3 (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-content-cell > .l1-brand-preview + h3 {
  margin-top: 1.1rem !important;
}

/* !important on margin-bottom: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-content-cell > .l1-brand-preview ~ p {
  margin-bottom: 0.9rem !important;
}

/* ---- LayerOne Aegis ---- */

body.l1-marketing-v2 .l1-aegis-callout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--mkt-line);
  border-left: 3px solid var(--mkt-blue);
  background: var(--mkt-blue-soft);
  text-align: left;
}

body.l1-marketing-v2 .l1-aegis-callout-shield {
  color: var(--mkt-blue-dark);
  font-size: 1.8rem;
}

body.l1-marketing-v2 .l1-aegis-callout > div {
  flex: 1 1 16rem;
  min-width: 0;
}

body.l1-marketing-v2 .l1-aegis-callout strong {
  color: var(--mkt-ink);
  font-size: 1rem;
}

/* !important on
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important)
   - font-size: beats html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero p (02-layout.css, later
     in the cascade, also !important)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-aegis-callout p {
  color: var(--mkt-muted) !important;
  font-size: 0.88rem !important;
  margin: 0.2rem 0 0 !important;
}

body.l1-marketing-v2 .l1-aegis-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

body.l1-marketing-v2 .l1-aegis-overview {
  background: var(--mkt-night);
  color: var(--mkt-on-dark);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 3px solid var(--mkt-blue);
}

body.l1-marketing-v2 .l1-aegis-overview-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

body.l1-marketing-v2 .l1-aegis-overview-brand > i {
  color: var(--mkt-on-dark-link);
  font-size: 2.5rem;
}

body.l1-marketing-v2 .l1-aegis-overview-brand strong {
  font-size: 1.4rem;
  letter-spacing: -0.025em;
}

body.l1-marketing-v2 .l1-aegis-overview span {
  display: block;
  color: var(--mkt-on-dark-muted);
  font-size: 0.83rem;
  margin-top: 0.25rem;
}

body.l1-marketing-v2 .l1-aegis-overview-list {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
}

body.l1-marketing-v2 .l1-aegis-overview-list li {
  display: flex;
  align-items: start;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--mkt-on-dark) 20%, transparent);
}

body.l1-marketing-v2 .l1-aegis-overview-list i {
  color: var(--mkt-on-dark-link);
  width: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* !important on color: beats bootstrap.min.css a:not([href]):not([class]):hover (more specific). */
body.l1-marketing-v2 .l1-aegis-overview > a {
  color: var(--mkt-on-dark-link) !important;
  font-size: 0.85rem;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-aegis-overview > a:hover {
  color: var(--mkt-on-dark) !important;
}

body.l1-marketing-v2 .l1-aegis-feature-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 2rem;
}

body.l1-marketing-v2 .l1-aegis-feature-intro > a {
  margin-bottom: 2rem;
}

body.l1-marketing-v2 .l1-aegis-note {
  color: var(--mkt-muted);
  font-size: 0.85rem;
  margin: 2rem 0 0;
  max-width: 55rem;
}

body.l1-marketing-v2 .l1-aegis-questions {
  max-width: 55rem;
  border-top: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-aegis-questions details {
  border-bottom: 1px solid var(--mkt-line);
  padding: 1.25rem 0;
}

body.l1-marketing-v2 .l1-aegis-questions summary {
  cursor: pointer;
  color: var(--mkt-ink);
  font-weight: 600;
  font-size: 1.05rem;
}

body.l1-marketing-v2 .l1-aegis-questions summary::marker {
  color: var(--mkt-blue-dark);
}

body.l1-marketing-v2 .l1-aegis-questions summary:focus-visible {
  outline: 2px solid var(--mkt-blue-dark);
  outline-offset: 5px;
}

body.l1-marketing-v2 .l1-aegis-questions p {
  color: var(--mkt-muted);
  line-height: 1.75;
  margin: 1rem 0 0;
}

@media (max-width: 991.98px) {
  body.l1-marketing-v2 .l1-aegis-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  body.l1-marketing-v2 .l1-aegis-callout {
    padding: 1.25rem;
    gap: 1rem;
  }

  body.l1-marketing-v2 .l1-aegis-callout > div {
    flex-basis: calc(100% - 3rem);
  }

  body.l1-marketing-v2 .l1-aegis-callout > a {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Animations ---- */

@keyframes l1-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.4); }
}

/* ---- 14-docs.css ---- */
/* 14-docs.css
   Help center at /docs/ (l1-kb-*), Markdown admonitions and the API reference.
 */

/* ---- Hero ---- */

.l1-kb-hero h1 {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.l1-kb-hero h1 svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--l1-primary-dark);
}

.l1-kb-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  color: var(--l1-text-dim);
  font-size: .875rem;
  margin: 0 0 1.5rem;
}

.l1-kb-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.l1-kb-hero__meta svg {
  width: .95rem;
  height: .95rem;
}

.l1-kb-hero__popular {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: .9rem;
}

.l1-kb-hero__popular-label {
  color: var(--l1-text-dim);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .05em;
}

.l1-kb-hero__popular a {
  display: inline-block;
  padding: .3rem .75rem;
  text-decoration: none;
}

.l1-kb-hero__ai-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: .85rem 0 0;
  color: var(--l1-text-dim);
  font-size: .85rem;
}

.l1-kb-hero__ai-note svg {
  width: .95rem;
  height: .95rem;
  color: var(--l1-primary-dark);
  flex: 0 0 auto;
}

/* Docs heroes: the eyebrow sat 13px under the breadcrumb, closer to it than to
   its own heading; same breadcrumb-to-eyebrow step as the page heroes. */
body.l1-marketing-v2 .l1-kb-hero .l1-breadcrumbs:has(+ .l1-eyebrow) {
  margin-bottom: 1rem;
}

body.l1-marketing-v2 .l1-kb-hero {
  background: var(--mkt-paper);
  border: 0;
  padding: clamp(3rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}

/* Article pages sit directly below an in-flow sticky navbar. Keep the more
   generous docs-index introduction, but do not reserve a second header-sized
   gap before an article breadcrumb. */
body.l1-marketing-v2 .l1-kb-hero--compact {
  padding-top: clamp(1.25rem, 2vw, 1.65rem);
  text-align: left;
}

/* !important on
   - color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - justify-content: beats bootstrap.min.css .justify-content-between (a Bootstrap utility that is itself !important)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-kb-hero h1 {
  color: var(--mkt-ink) !important;
  font-size: var(--article-title-size, clamp(2.7rem, 5.5vw, 5rem));
  font-weight: 610;
  justify-content: center !important;
  letter-spacing: var(--page-title-tracking, -0.048em);
  line-height: var(--page-title-leading, 1);
  margin: 0.9rem 0 1rem !important;
  word-spacing: 0.025em;
}

/* !important on
   - justify-content: beats bootstrap.min.css .justify-content-center (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-kb-hero--compact h1 {
  justify-content: flex-start !important;
}

body.l1-marketing-v2 .l1-kb-hero__lede {
  color: var(--mkt-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 auto 1.5rem;
  max-width: 710px;
}

body.l1-marketing-v2 .l1-kb-hero--compact .l1-kb-hero__lede {
  margin-left: 0;
}

body.l1-marketing-v2 .l1-kb-hero--compact .l1-kb-search {
  margin-left: 0;
}

body.l1-marketing-v2 .l1-kb-hero__popular {
  justify-content: center;
  margin-top: 1rem;
}

/* !important on
   - background: beats components.css .l1-row-action[data-tone="danger"]:hover (more specific)
   - border: beats bootstrap.min.css .btn:first-child:active (more specific)
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important)
   - color: beats bootstrap.min.css a:not([href]):not([class]):hover (more specific) */
body.l1-marketing-v2 .l1-kb-hero__popular a {
  background: transparent !important;
  border: 1px solid var(--mkt-line) !important;
  border-radius: 1px !important;
  color: var(--mkt-muted) !important;
  font-family: var(--mkt-mono);
  font-size: 0.68rem;
}

/* !important on
   - background, border-color: beats .l1-builder-hero:not(.l1-checkout-hero) (02-layout.css, later in
     the cascade, also !important)
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-kb-hero__popular a:hover {
  background: var(--mkt-blue-soft) !important;
  border-color: var(--mkt-blue) !important;
  color: var(--mkt-blue-dark) !important;
}

@media (max-width: 767.98px) {
  body.l1-marketing-v2 .l1-kb-hero__popular a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* ---- Search ---- */

.l1-kb-search {
  position: relative;
  text-align: left;
}

.l1-kb-search__label {
  /* Visible to assistive technology only. The magnifier plus the placeholder
     already say what the field is, and a heading above it competes with the
     page title for attention. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.l1-kb-search__field {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .1rem .9rem;
}

.l1-kb-search--ai .l1-kb-search__field svg {
  color: var(--l1-primary-dark);
}

.l1-kb-search__field svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--l1-text-dim);
  flex: 0 0 auto;
}

.l1-kb-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  outline: 0;
  color: var(--l1-text);
  padding: .85rem 0;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

/* The badge that says the box answers questions. Inside the field rather than
   beside it: it is a property of this control, and a label floating next to the
   search box reads as a section heading on the index hero. Shown only when
   AssistantConfig.is_ready(), because that is the same OpenAI switch the
   portal chat uses. */
.l1-kb-search__ai {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: var(--l1-primary-soft);
  color: var(--l1-primary-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.l1-kb-search__ai-short {
  display: none;
}

/* The "/" affordance. Hidden on touch, where there is no keyboard shortcut to
   advertise, and while the field has focus, where it is stale advice. */
.l1-kb-search__hint {
  flex: 0 0 auto;
  border: 1px solid var(--l1-border);
  background: var(--l1-bg);
  color: var(--l1-text-dim);
  font-size: .7rem;
  font-family: var(--l1-font-data);
  padding: .1rem .4rem;
}

.l1-kb-search__field:focus-within .l1-kb-search__hint {
  visibility: hidden;
}

.l1-kb-search--ai .l1-kb-search__hint {
  /* The AI-powered badge occupies this end of the field. visibility:hidden
     would still reserve the kbd's width and crowd the placeholder. */
  display: none;
}

.l1-kb-search__results {
  position: absolute;
  z-index: 40;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-lg);
  background: var(--l1-surface);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
  padding: .35rem;
}

.l1-kb-search__results[hidden] {
  display: none;
}

.l1-kb-search__result {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--l1-radius-sm, 8px);
  color: var(--l1-text);
  text-decoration: none;
}

.l1-kb-search__result:hover,
.l1-kb-search__result.is-active {
  background: var(--l1-primary-soft);
  color: var(--l1-primary-dark);
}

.l1-kb-search__result small {
  display: block;
  color: var(--l1-text-dim);
  font-size: .75rem;
}

.l1-kb-search__result-empty {
  padding: .7rem;
  color: var(--l1-text-dim);
  font-size: .9rem;
}

.l1-kb-results__count {
  color: var(--l1-text-dim);
  font-size: .875rem;
  margin: 0 0 1rem;
}

.l1-kb-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

body.l1-marketing-v2 .l1-kb-search {
  margin: 0 auto;
  max-width: 760px;
}

body.l1-marketing-v2 .l1-kb-search__field:focus-within {
  border-color: var(--mkt-blue);
  box-shadow: 0 0 0 1px var(--mkt-blue);
}

/* !important on
   - background, border: beats body.l1-marketing-v2 input (01-base.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-kb-search__input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
}

body.l1-marketing-v2 .l1-kb-search__hint {
  border-radius: 1px;
}

@media (max-width: 40rem) {
  .l1-kb-search__ai-full {
    display: none;
  }

  .l1-kb-search__ai-short {
    display: inline;
  }
}

@media (hover: none) {
  .l1-kb-search__hint {
    display: none;
  }
}

/* ---- AI answer ---- */

.l1-kb-answer {
  padding: 1.15rem 1.25rem;
  margin: 0 0 1.75rem;
}

.l1-kb-answer[hidden] {
  display: none;
}

.l1-kb-answer__head {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .6rem;
  color: var(--l1-primary-dark);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.l1-kb-answer__head svg {
  width: .9rem;
  height: .9rem;
}

.l1-kb-answer__body {
  color: var(--l1-text-muted);
  font-size: .95rem;
  line-height: 1.65;
}

.l1-kb-answer__body > :first-child {
  margin-top: 0;
}

.l1-kb-answer__body > :last-child {
  margin-bottom: 0;
}

.l1-kb-answer__body p {
  margin: 0 0 .7rem;
}

.l1-kb-answer__body ul,
.l1-kb-answer__body ol {
  margin: 0 0 .7rem;
  padding-left: 1.2rem;
}

.l1-kb-answer__body strong {
  color: var(--l1-text);
}

.l1-kb-answer__body code {
  font-family: var(--l1-font-data);
  font-size: .86em;
  padding: .1em .35em;
  border-radius: 5px;
  background: var(--l1-primary-soft);
  color: var(--l1-primary-dark);
}

/* The waiting state. Dimmed rather than a spinner or a shimmer: the answer
   replaces one line of text a second or two later, and animating a box that is
   about to be overwritten draws the eye away from the results, which are
   already usable. */
.l1-kb-answer.is-loading .l1-kb-answer__body {
  color: var(--l1-text-dim);
  font-style: italic;
}

.l1-kb-answer.is-loading .l1-kb-answer__note {
  display: none;
}

.l1-kb-answer__sources {
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--l1-border);
}

.l1-kb-answer__sources[hidden] {
  display: none;
}

.l1-kb-answer__sources-label {
  margin: 0 0 .35rem;
  color: var(--l1-text-dim);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.l1-kb-answer__sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.l1-kb-answer__sources a {
  display: inline-block;
  padding: .25rem .65rem;
  border: 1px solid var(--l1-border);
  border-radius: 999px;
  background: var(--l1-bg);
  font-size: .82rem;
  text-decoration: none;
}

.l1-kb-answer__sources a:hover {
  border-color: var(--l1-primary-dark);
}

.l1-kb-answer__note {
  margin: .8rem 0 0;
  color: var(--l1-text-dim);
  font-size: .78rem;
  line-height: 1.5;
}

/* ---- Layout ---- */

.l1-doc-card-kicker {
  display: inline-block;
  margin-bottom: .5rem;
}

.l1-kb-layout {
  display: grid;
  align-items: start;
}

.l1-kb-main {
  min-width: 0;
}

.l1-kb-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.l1-kb-card__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  color: inherit;
  text-decoration: none;
}

.l1-kb-card__index {
  flex: 0 0 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
}

.l1-kb-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.l1-kb-card__body h2 {
  font-size: 1.05rem;
  margin: 0 0 .25rem;
}

.l1-kb-card__link:hover h2 {
  color: var(--l1-primary-dark);
}

.l1-kb-card__body p {
  margin: 0;
  color: var(--l1-text-muted);
  font-size: .9rem;
  line-height: 1.5;
}

.l1-kb-card__meta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  color: var(--l1-text-dim);
  font-size: .78rem;
}

.l1-kb-card__meta svg {
  width: .85rem;
  height: .85rem;
}

.l1-kb-card__arrow {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--l1-text-dim);
}

.l1-kb-card__link:hover .l1-kb-card__arrow {
  color: var(--l1-primary-dark);
}

.l1-kb-copy {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .55rem;
  /* Colours for the light code block bootstrap-bridge.css paints (its
     !important background wins over --l1-code-bg); the old light-on-dark
     values left the button near-invisible on it. */
  border: 1px solid var(--l1-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--l1-text-muted);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  /* Present but faint until the block is hovered or the button is focused: a
     button per code block at full contrast competes with the code. It never
     goes to opacity 0, because a control you cannot see on a touch device is
     a control that does not exist. */
  opacity: .8;
  transition: opacity .12s ease, background .12s ease;
}

.l1-kb-copy:hover {
  background: var(--l1-surface-2);
  color: var(--l1-text);
}

.l1-kb-copy svg {
  width: .85rem;
  height: .85rem;
}

.l1-kb-copy.is-copied {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
  opacity: 1;
}

.l1-kb-result__section {
  color: var(--l1-primary-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}

.l1-kb-result h2 {
  font-size: 1.08rem;
  margin: .3rem 0 .35rem;
}

.l1-kb-result h2 a {
  text-decoration: none;
}

.l1-kb-result__snippet {
  margin: 0;
  color: var(--l1-text-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.l1-kb-empty {
  border: 1px dashed var(--l1-border-strong);
  border-radius: var(--l1-radius-lg);
  background: var(--l1-surface);
  color: var(--l1-text-muted);
  padding: 1.5rem;
  text-align: center;
  margin: 0;
}

/* Search results: bootstrap's mark padding split a highlighted stem from the
   rest of its word ("Kubernet es"). */
body.l1-marketing-v2 .l1-kb mark {
  border-radius: 2px;
  padding: 0;
}

/* Search results: the category label ran inline on the card's line box, so
   the card's top padding read 37px against 24px at the sides. */
body.l1-marketing-v2 .l1-kb-result__section {
  display: block;
  width: fit-content;
}

body.l1-marketing-v2 .l1-kb {
  background: var(--mkt-bg);
}

body.l1-marketing-v2 .l1-kb-card__index {
  color: var(--mkt-blue-dark);
}

/* The docs index is a directory first and a landing page second. Its opening
   numbers establish scope, the category links form the table of contents, and
   the content below stays a single date-ordered documentation list. */
body.l1-marketing-v2 .l1-kb-home-hero {
  overflow: hidden;
  padding-bottom: 0;
}

/* !important on
   - margin-inline: beats bootstrap.min.css .mx-auto (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-kb-home-hero h1 {
  font-size: var(--hub-title-size, clamp(2.7rem, 5.5vw, 5rem));
  margin-inline: auto !important;
  max-width: 15ch;
}

body.l1-marketing-v2 .l1-kb-home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  max-width: 1060px;
  padding: 0;
  border: 1px solid var(--mkt-line);
  border-bottom: 0;
  text-align: left;
}

body.l1-marketing-v2 .l1-kb-home-stats > div {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.4rem);
}

body.l1-marketing-v2 .l1-kb-home-stats > div + div {
  border-left: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-kb-home-stats dt {
  color: var(--mkt-ink);
  font-family: var(--mkt-mono);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
}

body.l1-marketing-v2 .l1-kb-home-stats dt svg {
  height: 1.7rem;
  width: 1.7rem;
}

body.l1-marketing-v2 .l1-kb-home-stats dd {
  color: var(--mkt-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin: 0.45rem 0 0;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-kb-home-body {
  background: var(--mkt-bg);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4rem, 7vw, 7rem);
}

body.l1-marketing-v2 .l1-kb-layout {
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 3vw, 2.75rem) 0 clamp(3.5rem, 6vw, 5rem);
}

/* Search results become cards in the surface hierarchy above. Keep their
   content inset from the card edge instead of inheriting the old divider-row
   spacing, which only supplied bottom padding. */
body.l1-marketing-v2 .l1-kb-result {
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

/* !important on
   - background: beats components.css .l1-row-action[data-tone="danger"]:hover (more specific)
   - color: beats bootstrap.min.css .btn:first-child:active (more specific) */
body.l1-marketing-v2 .l1-lg-hero-facts dt,
body.l1-marketing-v2 .l1-doc-card-kicker {
  background: transparent !important;
  color: var(--mkt-muted) !important;
  font-family: var(--mkt-mono);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (max-width: 47.99rem) {
  body.l1-marketing-v2 .l1-kb-home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.l1-marketing-v2 .l1-kb-home-stats > div + div {
    border-left: 0;
  }

  body.l1-marketing-v2 .l1-kb-home-stats > div:nth-child(even) {
    border-left: 1px solid var(--mkt-line);
  }

  body.l1-marketing-v2 .l1-kb-home-stats > div:nth-child(n + 3) {
    border-top: 1px solid var(--mkt-line);
  }
}

@media (min-width: 62rem) {
  .l1-kb-layout--two {
    grid-template-columns: 16rem minmax(0, 1fr);
  }

  .l1-kb-layout--three {
    grid-template-columns: 16rem minmax(0, 1fr) 14rem;
  }
}

/* ---- Sidebar ---- */

.l1-kb-sidebar__disclosure {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-lg);
  background: var(--l1-surface);
  padding: .35rem .5rem;
}

.l1-kb-sidebar__summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  padding: .6rem .5rem;
  font-weight: 700;
  color: var(--l1-text);
  list-style: none;
}

.l1-kb-sidebar__summary::-webkit-details-marker {
  display: none;
}

.l1-kb-sidebar__summary svg {
  width: 1rem;
  height: 1rem;
  color: var(--l1-text-dim);
}

.l1-kb-sidebar__chevron {
  margin-left: auto;
  transition: transform .15s ease;
}

.l1-kb-sidebar__disclosure[open] .l1-kb-sidebar__chevron {
  transform: rotate(180deg);
}

.l1-kb-sidebar__body {
  padding: .25rem .5rem .75rem;
}

.l1-kb-sidebar__group + .l1-kb-sidebar__group {
  margin-top: 1.1rem;
}

.l1-kb-sidebar__group-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--l1-text);
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
}

.l1-kb-sidebar__group-link svg {
  width: 1rem;
  height: 1rem;
  color: var(--l1-primary-dark);
}

.l1-kb-sidebar__group-link:hover,
.l1-kb-sidebar__group-link[aria-current="page"] {
  color: var(--l1-primary-dark);
}

.l1-kb-sidebar__list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0 0 0 .3rem;
  border-left: 1px solid var(--l1-border);
}

.l1-kb-sidebar__list a {
  display: block;
  padding: .32rem .6rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: .875rem;
  line-height: 1.35;
  text-decoration: none;
}

.l1-kb-sidebar__list a[aria-current="page"] {
  border-left-color: var(--l1-primary-dark);
  color: var(--l1-primary-dark);
  font-weight: 700;
}

@media (min-width: 62rem) {
  .l1-kb-sidebar {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }

  /* The disclosure is a small-screen affordance; on the desktop grid the tree
     is always open and the toggle would be a control that does nothing useful. */
  .l1-kb-sidebar__summary {
    display: none;
  }

  .l1-kb-sidebar__disclosure:not([open]) .l1-kb-sidebar__summary {
    display: flex;
  }

  body.l1-marketing-v2 .l1-kb-sidebar__disclosure {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  body.l1-marketing-v2 .l1-kb-sidebar__body {
    padding: 0;
  }
}

/* ---- Article body ---- */

.l1-kb-article {
  color: var(--l1-text);
  font-size: 1.0125rem;
  line-height: 1.7;
  max-width: 46rem;
}

.l1-kb-article > :first-child {
  margin-top: 0;
}

.l1-kb-article h2,
.l1-kb-article h3,
.l1-kb-article h4 {
  /* Clears the sticky navbar when a #fragment jumps here, so the heading you
     linked to is not hidden underneath it. */
  scroll-margin-top: 6rem;
}

.l1-kb-article h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 .85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--l1-border);
}

.l1-kb-article h3 {
  font-size: 1.12rem;
  margin: 1.85rem 0 .6rem;
}

.l1-kb-article h4 {
  font-size: 1rem;
  margin: 1.5rem 0 .5rem;
}

.l1-kb-article p,
.l1-kb-article li {
  color: var(--l1-text-muted);
}

.l1-kb-article ul,
.l1-kb-article ol {
  padding-left: 1.35rem;
  margin: 0 0 1.1rem;
}

.l1-kb-article li + li {
  margin-top: .35rem;
}

.l1-kb-article a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.l1-kb-article strong {
  color: var(--l1-text);
}

.l1-kb-article dl {
  margin: 0 0 1.1rem;
}

.l1-kb-article dt {
  color: var(--l1-text);
  font-weight: 700;
  margin-top: .8rem;
}

.l1-kb-article dd {
  margin: .2rem 0 0;
  color: var(--l1-text-muted);
}

/* Heading anchors, added by docs.js. Invisible until the heading is hovered or
   the link itself is focused, so a keyboard user can still reach it. */
.l1-kb-anchor {
  margin-left: .4rem;
  opacity: 0;
  color: var(--l1-text-dim);
  text-decoration: none;
  font-weight: 400;
  transition: opacity .12s ease;
}

.l1-kb-article h2:hover .l1-kb-anchor,
.l1-kb-article h3:hover .l1-kb-anchor,
.l1-kb-article h4:hover .l1-kb-anchor,
.l1-kb-anchor:focus-visible {
  opacity: 1;
}

.l1-kb-article blockquote {
  margin: 0 0 1.25rem;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid var(--l1-border-strong);
  color: var(--l1-text-muted);
}

/* Inline code: bootstrap-bridge.css paints it #f6f8fc on the #f6f6f2 page, so
   `sudo` read as a word with stray spaces around it. A white chip with a hairline. */
/* !important on background: beats components.css .l1-row-action[data-tone="danger"]:hover (more specific). */
body.l1-marketing-v2 .l1-kb-article :not(pre) > code {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px var(--l1-border);
}

/* ---- Tables ---- */

.l1-kb-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: .925rem;
}

.l1-kb-article thead th {
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 2px solid var(--l1-border-strong);
  color: var(--l1-text);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.l1-kb-article tbody td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-text-muted);
  vertical-align: top;
}

.l1-kb-table-scroll {
  /* Wrapped by docs.js. A wide pricing table has to be able to scroll on its
     own; without a wrapper it widens the grid column and pushes the whole
     page sideways instead. */
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

/* Two- and three-column prose tables wrap to the column on a phone rather
   than clipping a 34rem table in a narrow scroller; wider tables (marked
   --wide by docs.js) keep their minimum width and scroll sideways. */
.l1-kb-table-scroll > table {
  margin: 0;
  min-width: 0;
  width: 100%;
}

.l1-kb-table-scroll:not(.l1-kb-table-scroll--wide) td {
  overflow-wrap: break-word;
}

.l1-kb-table-scroll--wide > table {
  min-width: 34rem;
}

/* ---- Code ---- */

.l1-kb-article code {
  font-family: var(--l1-font-data);
  font-size: .875em;
  padding: .12em .38em;
  border-radius: 5px;
  background: var(--l1-primary-soft);
  color: var(--l1-primary-dark);
}

.l1-kb-code {
  position: relative;
  margin: 0 0 1.25rem;
}

.l1-kb-article pre {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-lg);
  background: var(--l1-code-bg);
  overflow-x: auto;
}

.l1-kb-article pre code {
  background: none;
  color: var(--l1-code-ink);
  padding: 0;
  font-size: .86rem;
  line-height: 1.6;
  white-space: pre;
}

.l1-kb-code:hover .l1-kb-copy,
.l1-kb-copy:focus-visible {
  opacity: 1;
}

/* ---- Admonitions ---- */

/* Class names come from the Markdown "admonition" extension: the author writes
   !!! note / warning / danger and it emits .admonition.note etc. */
.l1-kb-article .admonition {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--l1-border);
  border-left: 3px solid var(--l1-text-dim);
  border-radius: var(--l1-radius-lg);
  background: var(--l1-surface);
}

.l1-kb-article .admonition > :last-child {
  margin-bottom: 0;
}

.l1-kb-article .admonition-title {
  margin: 0 0 .45rem;
  font-weight: 800;
  font-size: .925rem;
  color: var(--l1-text);
}

.l1-kb-article .admonition.note {
  border-left-color: var(--l1-primary-dark);
}

.l1-kb-article .admonition.warning {
  border-left-color: var(--l1-warn);
}

.l1-kb-article .admonition.warning .admonition-title {
  color: var(--l1-warn);
}

.l1-kb-article .admonition.danger {
  border-left-color: var(--l1-danger);
}

.l1-kb-article .admonition.danger .admonition-title {
  color: var(--l1-danger);
}

/* ---- On this page ---- */

.l1-kb-toc {
  font-size: .875rem;
}

.l1-kb-toc__label {
  color: var(--l1-text-dim);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
}

.l1-kb-toc__list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  border-left: 1px solid var(--l1-border);
}

.l1-kb-toc__item a {
  display: block;
  padding: .3rem .7rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  line-height: 1.35;
  text-decoration: none;
}

.l1-kb-toc__item--h3 a {
  padding-left: 1.4rem;
  font-size: .825rem;
}

.l1-kb-toc__item a.is-active {
  border-left-color: var(--l1-primary-dark);
  color: var(--l1-primary-dark);
  font-weight: 700;
}

.l1-kb-toc__help {
  border-top: 1px solid var(--l1-border);
  padding-top: 1.1rem;
}

.l1-kb-toc__help .l1-btn {
  display: inline-flex;
  margin-bottom: .6rem;
}

.l1-kb-toc__link {
  display: block;
  color: var(--l1-text-muted);
}

body.l1-marketing-v2 .l1-kb-home-toc {
  align-items: start;
  border-bottom: 1px solid var(--mkt-line);
  border-top: 1px solid var(--mkt-line);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2fr);
  padding: clamp(1.75rem, 4vw, 3rem) 0;
}

body.l1-marketing-v2 .l1-kb-home-toc__eyebrow {
  color: var(--mkt-blue-dark);
  display: block;
  font-family: var(--mkt-mono);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-kb-home-toc__intro h2,
body.l1-marketing-v2 .l1-kb-doc-list__head h2 {
  color: var(--mkt-ink);
  font-size: clamp(1.75rem, 3.7vw, 3.1rem);
  font-weight: 610;
  letter-spacing: -0.045em;
  line-height: 1.03;
  margin: 0 0 0.85rem;
}

body.l1-marketing-v2 .l1-kb-home-toc__intro p,
body.l1-marketing-v2 .l1-kb-doc-list__head p {
  color: var(--mkt-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 620px;
}

body.l1-marketing-v2 .l1-kb-home-toc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

body.l1-marketing-v2 .l1-kb-home-toc__list li {
  border-bottom: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-kb-home-toc__list li:nth-child(odd) {
  border-right: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-kb-home-toc__list a {
  align-items: center;
  color: var(--mkt-ink);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  min-height: 4.2rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

body.l1-marketing-v2 .l1-kb-home-toc__list a:hover {
  background: var(--mkt-blue-soft);
  color: var(--mkt-blue-dark);
}

body.l1-marketing-v2 .l1-kb-home-toc__icon {
  align-items: center;
  color: var(--mkt-blue-dark);
  display: inline-flex;
  justify-content: center;
}

body.l1-marketing-v2 .l1-kb-home-toc__icon svg,
body.l1-marketing-v2 .l1-kb-home-toc__list a > svg {
  height: 1rem;
  width: 1rem;
}

body.l1-marketing-v2 .l1-kb-home-toc__list strong,
body.l1-marketing-v2 .l1-kb-home-toc__list small {
  display: block;
}

body.l1-marketing-v2 .l1-kb-home-toc__list strong {
  font-size: 0.86rem;
  line-height: 1.25;
}

body.l1-marketing-v2 .l1-kb-home-toc__list small {
  color: var(--mkt-muted);
  font-family: var(--mkt-mono);
  font-size: 0.62rem;
  margin-top: 0.22rem;
  text-transform: uppercase;
}

@media (max-width: 61.99rem) {
  body.l1-marketing-v2 .l1-kb-home-toc {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.99rem) {
  body.l1-marketing-v2 .l1-kb-home-toc__list {
    grid-template-columns: 1fr;
  }

  body.l1-marketing-v2 .l1-kb-home-toc__list li:nth-child(odd) {
    border-right: 0;
  }
}

@media (min-width: 62rem) {
  .l1-kb-toc {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}

/* ---- Pager ---- */

.l1-kb-pager {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--l1-border);
}

.l1-kb-pager__link {
  display: block;
  padding: .95rem 1.1rem;
  text-decoration: none;
}

.l1-kb-pager__link--next {
  text-align: right;
}

.l1-kb-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--l1-text-dim);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.l1-kb-pager__dir svg {
  width: .85rem;
  height: .85rem;
}

.l1-kb-pager__title {
  display: block;
  margin-top: .3rem;
  color: var(--l1-text);
  font-weight: 700;
}

.l1-kb-pager__link:hover .l1-kb-pager__title {
  color: var(--l1-primary-dark);
}

.l1-kb-pager__spacer {
  display: none;
}

@media (min-width: 40rem) {
  .l1-kb-pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l1-kb-pager__spacer {
    display: block;
  }
}

/* ---- API reference ---- */

/* /docs/api/: the global input rule drew a second border inside the reference
   search box (and a second ring on focus; the box itself shows the focus ring). */
/* !important on
   - background, border: beats body.l1-marketing-v2 input (01-base.css, later in the cascade, also
     !important)
   - box-shadow: beats body.l1-marketing-v2 input:focus (01-base.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .ui-ref__search-input,
body.l1-marketing-v2 .ui-ref__search-input:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 1024px) {
  .l1-section .ui-ref__nav {
    top: 6rem;
    max-height: calc(100dvh - 7rem);
  }
}

/* ---- Article list ---- */

body.l1-marketing-v2 .l1-kb-doc-list {
  margin-top: clamp(3rem, 6vw, 5.5rem);
}

body.l1-marketing-v2 .l1-kb-doc-list__head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

body.l1-marketing-v2 .l1-kb-doc-list__filters {
  align-items: end;
  border-top: 1px solid var(--mkt-line);
  display: flex;
  gap: 0.75rem;
  padding: 1rem 0;
}

body.l1-marketing-v2 .l1-kb-doc-list__filters > div {
  max-width: 24rem;
  width: 100%;
}

body.l1-marketing-v2 .l1-kb-doc-list__filters label {
  color: var(--mkt-muted);
  display: block;
  font-family: var(--mkt-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-kb-doc-list__filters select {
  font: inherit;
  min-height: 2.75rem;
  padding: 0.55rem 2.25rem 0.55rem 0.75rem;
  width: 100%;
}

body.l1-marketing-v2 .l1-kb-doc-list__filters select:focus {
  outline: 2px solid var(--mkt-blue-soft);
  outline-offset: 1px;
}

body.l1-marketing-v2 .l1-kb-doc-list__filters > a {
  color: var(--mkt-blue-dark);
  font-size: 0.82rem;
  padding-block: 0.72rem;
}

body.l1-marketing-v2 .l1-kb-doc-list__items {
  border-top: 1px solid var(--mkt-line);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.l1-marketing-v2 .l1-kb-doc-list__items > li {
  border-bottom: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-kb-doc-list__row {
  padding: clamp(1rem, 2vw, 1.35rem) 0;
}

body.l1-marketing-v2 .l1-kb-doc-list__article {
  display: block;
  min-width: 0;
}

body.l1-marketing-v2 .l1-kb-doc-list__category,
body.l1-marketing-v2 .l1-kb-doc-list__title {
  display: block;
  text-decoration: none;
}

body.l1-marketing-v2 .l1-kb-doc-list__category,
body.l1-marketing-v2 .l1-kb-doc-list__pager {
  color: var(--mkt-muted);
  font-family: var(--mkt-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.l1-marketing-v2 .l1-kb-doc-list__category:hover {
  color: var(--mkt-blue-dark);
}

body.l1-marketing-v2 .l1-kb-doc-list__title {
  color: var(--mkt-ink);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 650;
  line-height: 1.4;
  margin-top: 0.3rem;
}

body.l1-marketing-v2 .l1-kb-doc-list__title:hover {
  color: var(--mkt-blue-dark);
}

body.l1-marketing-v2 .l1-kb-doc-list__pager {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding-top: 1.5rem;
}

body.l1-marketing-v2 .l1-kb-doc-list__pager a {
  color: var(--mkt-blue-dark);
}

@media (max-width: 47.99rem) {
  body.l1-marketing-v2 .l1-kb-doc-list__filters {
    align-items: stretch;
    flex-direction: column;
  }

  body.l1-marketing-v2 .l1-kb-doc-list__filters > div {
    max-width: none;
  }
}

/* ---- 15-blog.css ---- */
/* 15-blog.css
   Blog index and blog posts.
 */

/* ---- Blog post ---- */

.l1-empty-public {
  align-items: center;
  background: var(--l1-surface);
  border: 1px dashed var(--l1-border-strong);
  border-radius: var(--l1-radius-lg);
  display: grid;
  justify-items: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.l1-empty-public h2 {
  font-size: 1.35rem;
  margin-bottom: .5rem;
}

.l1-article-byline {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .95rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.l1-article-byline-author {
  color: var(--l1-text);
  font-weight: 600;
}

.l1-article-hero .l1-article-byline-author {
  color: #ffffff;
}

.l1-article-shell {
  padding: 3.5rem 0 3rem;
}

.l1-article-shell .l1-breadcrumbs {
  padding-top: 0;
  margin-bottom: 2rem;
}

.l1-article-head {
  max-width: 850px;
  margin: 0 auto 2.5rem;
}

.l1-article-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1rem;
  color: var(--mkt-muted);
  font-size: .8rem;
  margin-bottom: 1.35rem;
}

.l1-article-head h1 {
  font-size: var(--article-title-size, clamp(2rem, 4.7vw, 3.9rem));
  letter-spacing: var(--page-title-tracking, -.045em);
  line-height: 1.1;
  margin: 0 0 1.25rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
  scroll-margin-top: 7rem;
}

.l1-article-deck {
  color: var(--mkt-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.l1-article-head .l1-article-byline {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mkt-line);
  color: var(--mkt-muted);
}

.l1-article-byline > a {
  margin-left: auto;
  font-size: .8rem;
}

.l1-article-cover-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 370px;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  background: var(--mkt-night);
  margin: 0 0 3.5rem;
  border-radius: 4px;
}

.l1-article-layout {
  display: grid;
  grid-template-columns: 225px minmax(0, 760px);
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.l1-article-sidebar {
  align-self: stretch;
  min-width: 0;
}

.l1-article-sidebar-inner {
  position: sticky;
  top: 7rem;
}

.l1-article-toc {
  border-bottom: 1px solid var(--mkt-line);
  padding-bottom: 1.5rem;
}

.l1-article-toc summary {
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
  padding: .4rem 0;
}

.l1-article-toc ol {
  padding: 0 0 0 1.1rem;
  margin: 1rem 0 0;
  max-height: 45vh;
  overflow-y: auto;
}

.l1-article-toc li {
  padding: .3rem 0 .3rem .25rem;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--mkt-muted);
}

body.l1-marketing-v2 .l1-article-toc a:hover {
  color: var(--mkt-blue-dark);
  text-decoration: underline;
}

.l1-article-resources {
  margin-top: 1.5rem;
}

.l1-article-resources p {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--mkt-muted);
  margin: .75rem 0;
}

.l1-article-resources a {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem 0;
}

.l1-article-prose {
  min-width: 0;
  max-width: 640px;
  font-size: 1.0625rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

/* CMS and builder wrappers retain semantics; the reading grid owns spacing. */
body.l1-marketing-v2 .l1-article-prose :is(.l1-section, .l1-builder-article, .l1-container, .l1-legal-copy, .l1-builder-prose) {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: inherit;
  line-height: inherit;
}

/* The shared full-width section rule uses !important; prose must not inherit its hero spacing. */
/* !important on
   - padding: beats body.l1-marketing-v2 .l1-section (02-layout.css, later in the cascade, also
     !important) */
body.l1-marketing-v2 .l1-article-prose .l1-section {
  padding: 0 !important;
}

.l1-article-prose .l1-article-meta,
.l1-article-prose .l1-builder-article > .l1-container > h1:first-child,
.l1-article-prose article.l1-section > .l1-container > h1:first-child {
  display: none;
}

body.l1-marketing-v2 .l1-article-prose h2 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -.03em;
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 7rem;
}

body.l1-marketing-v2 .l1-article-prose h3 {
  font-size: 1.2rem;
  margin: 2rem 0 .75rem;
  line-height: 1.4;
}

body.l1-marketing-v2 .l1-article-prose p {
  margin: 0 0 1.25rem;
  color: var(--mkt-ink);
}

.l1-article-prose ul,
.l1-article-prose ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}

.l1-article-prose li {
  margin-bottom: .6rem;
}

.l1-article-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.l1-article-prose code {
  font-family: var(--mkt-mono);
  font-size: .83em;
  background: var(--mkt-paper-muted);
  color: var(--mkt-ink);
  padding: .15em .3em;
  border-radius: 3px;
}

body.l1-marketing-v2 .l1-article-prose pre {
  background: var(--mkt-graphic-bg);
  color: var(--mkt-on-dark);
  border: 1px solid var(--mkt-line);
  border-radius: 4px;
  padding: 1.25rem;
  max-width: 100%;
  overflow-x: auto;
  line-height: 1.65;
  margin: 1.5rem 0;
  font-size: .85rem;
  white-space: pre;
  overflow-wrap: normal;
}

body.l1-marketing-v2 .l1-article-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.l1-article-prose blockquote {
  border-left: 3px solid var(--mkt-blue);
  background: var(--mkt-paper);
  margin: 1.5rem 0;
  padding: 1.25rem;
}

.l1-article-prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  max-width: 100%;
  margin-block: 1.5rem;
  font-size: .9rem;
}

.l1-article-prose th,
.l1-article-prose td {
  padding: .75rem;
  border: 1px solid var(--mkt-line);
  text-align: left;
}

.l1-article-prose th {
  background: var(--mkt-paper-muted);
}

.l1-article-prose img {
  max-width: 100%;
  height: auto;
}

.l1-article-end {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--mkt-line);
  margin: 3rem 0;
  padding-top: 1.5rem;
  color: var(--mkt-muted);
  font-size: .85rem;
}

.l1-article-related {
  margin: 3rem 0 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--mkt-line);
}

body.l1-marketing-v2 .l1-article-prose {
  color: var(--mkt-ink);
}

@media (max-width: 991.98px) {
  .l1-article-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .l1-article-sidebar-inner {
    position: static;
  }

  .l1-article-toc {
    padding: 1rem 1.25rem;
    border: 1px solid var(--mkt-line);
    background: var(--mkt-paper);
  }

  .l1-article-toc ol {
    columns: 2;
    column-gap: 2rem;
    max-height: none;
  }

  .l1-article-toc li {
    break-inside: avoid;
  }

  .l1-article-resources {
    display: none;
  }

  .l1-article-prose {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 639.98px) {
  .l1-article-cover-img {
    aspect-ratio: 16 / 9;
    margin-bottom: 2rem;
  }

  .l1-article-toc ol {
    columns: 1;
  }

  .l1-article-prose {
    font-size: 1rem;
    line-height: 1.8;
  }
}

/* ---- Blog index ---- */

.l1-blog-card-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--l1-primary) 0%, var(--l1-primary-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--l1-font-head);
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.l1-article-byline .l1-blog-card-avatar {
  width: 38px;
  height: 38px;
  font-size: .85rem;
}

.l1-blog-hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--mkt-line);
}

.l1-blog-hero .l1-breadcrumbs {
  padding-top: 0;
  margin-bottom: 2rem;
}

.l1-blog-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.l1-blog-masthead h1 {
  font-size: var(--hub-title-size, clamp(2.4rem, 5.5vw, 4.5rem));
  letter-spacing: var(--page-title-tracking, -.055em);
  line-height: var(--page-title-leading, 1.07);
  margin: .8rem 0 1rem;
}

.l1-blog-masthead p {
  max-width: 52ch;
  color: var(--mkt-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
}

.l1-blog-rss {
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 600;
  padding-bottom: .35rem;
}

.l1-blog-rss i {
  margin-right: .4rem;
}

.l1-blog-index {
  padding-block: 2rem 4rem;
}

.l1-blog-search {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-line);
  margin-bottom: 2.5rem;
}

.l1-blog-search-field {
  flex: 1 1 20rem;
}

.l1-blog-topic-field {
  flex: 0 1 13rem;
}

.l1-blog-search label {
  display: block;
  font-weight: 600;
  font-size: .8rem;
  margin-bottom: .5rem;
}

.l1-blog-search input,
.l1-blog-search select {
  width: 100%;
  min-height: 46px;
  padding: .65rem .8rem;
  font: inherit;
}

.l1-blog-search .l1-btn {
  min-height: 48px;
  margin: 0;
}

.l1-blog-search > a {
  padding-block: .65rem;
  font-size: .85rem;
}

.l1-blog-results-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.l1-blog-results-heading h2 {
  font-size: 1.25rem;
  letter-spacing: -.025em;
  margin: 0;
}

.l1-blog-results-heading > span,
.l1-blog-results-heading > a {
  font-size: .8rem;
  color: var(--mkt-muted);
}

.l1-blog-feature {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-line);
  margin-bottom: 1.5rem;
}

.l1-blog-feature-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.l1-blog-feature-copy {
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
}

.l1-blog-feature-copy > .l1-eyebrow {
  margin-bottom: 2rem;
}

.l1-blog-feature-copy h3 {
  font-size: clamp(1.65rem, 2.6vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: -.04em;
  margin: 1rem 0;
}

.l1-blog-feature-copy p {
  font-size: 1rem;
  color: var(--mkt-muted);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.l1-blog-feature-link > img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  max-height: 470px;
  object-fit: cover;
}

.l1-blog-feature:hover {
  border-color: var(--mkt-blue);
}

.l1-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.l1-blog-grid > li {
  min-width: 0;
  display: flex;
}

.l1-blog-row-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mkt-night);
}

.l1-blog-row-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 1.35rem;
}

.l1-blog-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  color: var(--mkt-muted);
  font-size: .72rem;
}

.l1-blog-tag {
  font-size: .7rem;
  font-weight: 650;
  color: var(--mkt-blue-dark);
  background: var(--mkt-blue-soft);
  padding: .25rem .5rem;
  line-height: 1.5;
}

.l1-blog-row-title {
  font-size: 1.23rem;
  letter-spacing: -.025em;
  line-height: 1.35;
  margin: 1rem 0 .65rem;
  overflow-wrap: anywhere;
}

.l1-blog-row-excerpt {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--mkt-muted);
  margin: 0 0 1.3rem;
}

.l1-blog-read {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  font-size: .8rem;
  font-weight: 650;
  color: var(--mkt-blue-dark);
}

.l1-blog-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 3rem;
  font-size: .85rem;
}

.l1-blog-pager a {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: .5rem .8rem;
  border: 1px solid var(--mkt-line);
  background: var(--mkt-paper);
}

body.l1-marketing-v2 .l1-blog-pager [aria-current="page"] {
  background: var(--mkt-blue);
  color: #fff;
  border-color: var(--mkt-blue);
}

.l1-blog-pager a:hover {
  border-color: var(--mkt-blue);
}

.l1-article-head .l1-blog-card-avatar {
  width: 36px;
  height: 36px;
  background: var(--mkt-blue-soft);
  color: var(--mkt-blue-dark);
  font-size: .9rem;
  border: 0;
}

@media (max-width: 991.98px) {
  .l1-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .l1-blog-hero,
  .l1-article-shell {
    padding-top: 2.25rem;
  }

  .l1-blog-masthead {
    display: block;
  }

  .l1-blog-rss {
    display: inline-block;
    margin-top: 1.5rem;
  }

  .l1-blog-search {
    padding: 1rem;
    gap: .85rem;
  }

  .l1-blog-topic-field {
    flex: 1 1 100%;
  }

  .l1-blog-search .l1-btn {
    width: 100%;
  }

  .l1-blog-grid,
  .l1-blog-feature-link {
    grid-template-columns: 1fr;
  }

  .l1-blog-feature-link > img {
    order: -1;
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .l1-blog-feature-copy > .l1-eyebrow {
    margin-bottom: 1rem;
  }

  .l1-blog-row-body {
    padding: 1.25rem;
  }
}

/* ---- Journal cards ---- */

body.l1-marketing-v2 .l1-journal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-line);
  border-radius: 4px;
  overflow: hidden;
  color: var(--mkt-ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

body.l1-marketing-v2 .l1-journal-card:hover {
  border-color: var(--mkt-blue);
  color: var(--mkt-ink);
  transform: translateY(-3px);
}

.l1-journal-card:focus-visible,
.l1-blog-feature-link:focus-visible,
.l1-blog-pager a:focus-visible,
.l1-article-toc a:focus-visible {
  outline: 3px solid var(--mkt-blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.l1-marketing-v2 .l1-journal-card {
    transition: none;
  }

  body.l1-marketing-v2 .l1-journal-card:hover {
    transform: none;
  }
}

/* ---- 16-legal.css ---- */
/* 16-legal.css
   Legal pages (Terms, Privacy, AUP, SLA) and the privacy request and do-not-sell forms.
 */

.l1-legal {
  padding: 2rem 0 5rem;
}

.l1-legal-meta {
  color: var(--l1-text-muted);
  font-size: .9rem;
  margin: 0 0 2.5rem;
  padding: .65rem 1rem;
  background: var(--l1-primary-soft);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.l1-legal-meta i {
  color: var(--l1-primary);
}

.l1-legal-content h2 {
  font-size: 1.5rem;
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 6rem;
}

.l1-legal-content h2:first-child {
  margin-top: 0;
}

.l1-legal-content p,
.l1-legal-content ul,
.l1-legal-content ol {
  color: var(--l1-text);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.l1-legal-content ul,
.l1-legal-content ol {
  padding-left: 1.5rem;
}

.l1-legal-content li {
  margin-bottom: .45rem;
}

.l1-legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  background: var(--l1-surface);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius);
  overflow: hidden;
}

.l1-legal-content table th,
.l1-legal-content table td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--l1-border);
  font-size: .94rem;
}

.l1-legal-content table th {
  background: var(--l1-bg-2);
  font-family: var(--l1-font-head);
  font-weight: 600;
  color: var(--l1-text);
}

.l1-legal-content table tr:last-child td {
  border-bottom: 0;
}

/* Privacy request form: 16px fields (smaller makes iOS zoom on focus) and a
   select as tall as the inputs beside it. */
.l1-legal-content .l1-contact-card :is(input, select, textarea) {
  font-size: 1rem;
}

.l1-legal-content .l1-contact-card select {
  min-height: 3.25rem;
  padding: .75rem .9rem;
}

/* Do Not Sell and privacy request: the eyebrow is a paragraph, so the grey
   paragraph colour beat the blue eyebrow rule; blue like the Terms eyebrow. */
/* !important on
   - color: beats body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-content > p (16-legal.css,
     later in the cascade, also !important) */
body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-content > p.l1-legal-meta {
  color: var(--mkt-blue-dark) !important;
}

.l1-legal-content table th,
.l1-legal-content table td,
.l1-footer-top {
  border-color: var(--l1-border);
}

body.l1-marketing-v2 .l1-section > .l1-legal {
  padding-block: 0;
}

body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-meta {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--mkt-blue-dark);
  font-family: var(--mkt-mono);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  padding: 0;
  text-transform: uppercase;
}

/* !important on color: beats bootstrap.min.css .text-white-50 (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-content > h1 {
  color: var(--mkt-ink) !important;
  font-size: var(--page-title-size, clamp(2.7rem, 5vw, 4.75rem));
  font-weight: 610;
  letter-spacing: var(--page-title-tracking, -0.048em);
  line-height: var(--page-title-leading, 1);
  margin: 0 0 1.35rem;
  max-width: var(--page-title-measure, 14ch);
  word-spacing: 0.025em;
}

/* !important on color: beats bootstrap.min.css .text-white-50 (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-content > p,
body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-content > ul,
body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-content > ol {
  color: var(--mkt-muted) !important;
  line-height: 1.7;
  max-width: 72ch;
}

@media (max-width: 991.98px) {
  .l1-legal-content h2 {
    scroll-margin-top: 5rem;
  }
}

@media (max-width: 767.98px) {
  .l1-legal-content h2 {
    font-size: 1.3rem;
  }

  .l1-legal-content h3 {
    font-size: 1.05rem;
  }
}

@media (max-width: 575.98px) {
  .l1-legal-meta {
    font-size: .85rem;
  }

  .l1-legal-content table th,
  .l1-legal-content table td {
    padding: .6rem .75rem;
    font-size: .88rem;
  }
}

/* ---- 17-status.css ---- */
/* 17-status.css
   Public status page and status detail.
 */

.panel-heading {
  align-items: center;
  border-bottom: 1px solid rgba(80, 88, 100, .12);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.panel-heading h2 {
  font-size: 1.15rem;
  margin: 0;
}

.status-dot {
  background: currentColor;
  border-radius: 999px;
  display: inline-block;
  height: .45rem;
  width: .45rem;
}

/* Public status on the marketing layout: contained, not a console strip. */
.l1-status-public {
  padding: 2rem 0 4rem;
}

body.l1-marketing-v2 .l1-status-public .status-page {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* !important on
   - font-size, color: beats html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero p
     (02-layout.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-status-public .status-hero .eyebrow {
  font-family: var(--mkt-mono);
  font-size: 0.64rem !important;
  letter-spacing: 0.08em;
  align-items: center;
  color: #a9b6ca !important;
  display: inline-flex;
  gap: 0.55rem;
}

/* !important on
   - text-align: beats bootstrap.min.css .text-center (a Bootstrap utility that is itself !important)
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-status-public .status-hero h1 {
  font-weight: 610;
  letter-spacing: var(--page-title-tracking, -0.048em);
  line-height: var(--page-title-leading, 1);
  text-align: left !important;
  text-shadow: none;
  word-spacing: 0.025em;
  color: #ffffff !important;
  font-size: var(--hub-title-size, clamp(2.45rem, 5vw, 4.35rem));
  margin: 0.65rem 0 0.75rem !important;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-status-public .public-status-summary h2,
body.l1-marketing-v2 .l1-status-public .status-section-heading h2 {
  color: var(--mkt-ink) !important;
  letter-spacing: -0.045em;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

body.l1-marketing-v2 .l1-status-public .public-status-refresh {
  color: var(--mkt-muted);
  font-family: var(--mkt-mono);
  background: var(--mkt-paper-muted);
  border: 0;
  border-radius: 999px;
  padding: 0.48rem 0.7rem;
}

/* !important on
   - color: beats body.l1-marketing-v2 .l1-bento-card p (03-components.css, later in the cascade,
     also !important) */
body.l1-marketing-v2 .l1-status-public .ui-empty {
  background: var(--mkt-paper);
  border-radius: 0;
  color: var(--mkt-ink) !important;
  padding: clamp(2.5rem, 5vw, 4rem);
}

/* Status pages lead with the signal, then expose the data in calm rows. */
/* !important on
   - padding-top, padding-bottom: beats .l1-page-hero > .l1-container (02-layout.css, later in the
     cascade, also !important) */
body.l1-marketing-v2 .l1-status-public {
  /* Block padding only: the l1-container keeps its inline gutter on phones. */
  padding-top: clamp(2rem, 4vw, 3.25rem) !important;
  padding-bottom: clamp(3.5rem, 6vw, 5rem) !important;
}

/* !important on
   - border-radius, box-shadow: beats body.l1-marketing-v2 .l1-status-public .status-hero
     (03-components.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-status-public .status-hero {
  background: linear-gradient(145deg, #111c2f, #0b1321);
  border: 0;
  border-radius: 16px !important;
  box-shadow: 0 18px 46px rgba(15, 20, 31, 0.10) !important;
  color: #ffffff;
  min-height: 0;
  padding: clamp(1.7rem, 4vw, 2.8rem);
}

body.l1-marketing-v2 .l1-status-public .status-hero::before {
  display: none;
}

.status-signal-dot {
  background: currentColor;
  border-radius: 999px;
  height: 7px;
  width: 7px;
}

.status-signal-dot[data-tone="ok"] {
  color: #4fd1a4;
}

.status-signal-dot[data-tone="warning"],
.status-signal-dot[data-tone="warn"] {
  color: #f5b942;
}

.status-signal-dot[data-tone="danger"] {
  color: #f97066;
}

.status-signal-dot[data-tone="neutral"] {
  color: #9eabc0;
}

/* !important on color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important). */
body.l1-marketing-v2 .l1-status-public .status-hero p,
body.l1-marketing-v2 .l1-status-public .status-hero-state,
body.l1-marketing-v2 .l1-status-public .status-hero-state > span:last-child {
  color: #a9b6ca !important;
}

body.l1-marketing-v2 .l1-status-public .status-hero-state {
  align-items: flex-end;
}

/* !important on
   - color: beats app.css .status-service-link:hover .status-row-state i[data-lucide] (loads after
     this bundle) */
body.l1-marketing-v2 .l1-status-public .status-hero .ui-status {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: #ffffff !important;
  padding: 0.3rem 0.7rem;
}

/* !important on
   - border-radius, box-shadow: beats body.l1-marketing-v2 .l1-status-public .public-status-shell
     (03-components.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-status-public .public-status-shell,
body.l1-marketing-v2 .l1-status-public .status-incidents {
  background: transparent;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

body.l1-marketing-v2 .l1-status-public .public-status-summary,
body.l1-marketing-v2 .l1-status-public .status-section-heading {
  background: transparent;
  border: 0;
  padding: 0 0 1rem;
}

body.l1-marketing-v2 .public-status-summary-meta {
  align-items: center;
  color: var(--mkt-muted);
  display: flex;
  font-family: var(--mkt-mono);
  font-size: 0.62rem;
  gap: 1rem;
  text-transform: uppercase;
}

body.l1-marketing-v2 .public-status-summary-meta span + span::before {
  color: var(--mkt-line-strong);
  content: "·";
  margin-right: 1rem;
}

body.l1-marketing-v2 .l1-status-public .public-status-list {
  gap: 1rem;
  padding: 0;
}

/* !important on
   - background, border-radius, box-shadow: beats tailwind.css .public-status-shell .public-status-
     group-card (loads after this bundle, also !important) */
body.l1-marketing-v2 .l1-status-public .public-status-group-card,
body.l1-marketing-v2 .l1-status-public .incident-public-card {
  background: var(--mkt-paper) !important;
  border: 0;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(15, 20, 31, 0.055) !important;
}

body.l1-marketing-v2 .l1-status-public .public-status-group-heading {
  background: transparent;
  border-bottom: 1px solid var(--mkt-line);
  padding: 1rem 1.15rem;
}

body.l1-marketing-v2 .l1-status-public .status-service {
  border-color: var(--mkt-line);
}

body.l1-marketing-v2 .l1-status-public .status-service-trigger {
  border: 0;
  padding: 1rem 1.15rem;
}

body.l1-marketing-v2 .l1-status-public .status-service-link:hover .status-service-trigger {
  background: var(--mkt-paper-muted);
  transform: none;
}

body.l1-marketing-v2 .status-empty-state {
  align-items: center;
  background: var(--mkt-paper);
  border-radius: 14px;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: clamp(1.35rem, 3vw, 2rem);
}

body.l1-marketing-v2 .status-empty-state__icon {
  align-items: center;
  background: var(--mkt-blue-soft);
  border-radius: 11px;
  color: var(--mkt-blue-dark);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

body.l1-marketing-v2 .status-empty-state__icon svg {
  height: 20px;
  width: 20px;
}

body.l1-marketing-v2 .status-empty-state__title {
  color: var(--mkt-ink);
  font-weight: 650;
}

body.l1-marketing-v2 .status-empty-state__desc {
  color: var(--mkt-muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin-top: 0.2rem;
}

body.l1-marketing-v2 .status-empty-state a {
  align-items: center;
  color: var(--mkt-blue-dark);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 650;
  gap: 0.45rem;
  text-decoration: none;
  white-space: nowrap;
}

body.l1-marketing-v2 .status-empty-state a svg {
  height: 15px;
  width: 15px;
}

body.l1-marketing-v2 .l1-status-public .status-detail-body {
  background: var(--mkt-paper);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.8rem);
}

body.l1-marketing-v2 .latency-location-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* !important on
   - background, border-radius, box-shadow: beats tailwind.css .public-status-shell .latency-
     location-card (loads after this bundle, also !important) */
body.l1-marketing-v2 .latency-location-card {
  background: var(--mkt-paper-muted) !important;
  border: 0;
  border-radius: 12px !important;
  box-shadow: none !important;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1rem;
}

body.l1-marketing-v2 .latency-location-card__marker {
  align-items: center;
  background: var(--mkt-blue-soft);
  border-radius: 9px;
  color: var(--mkt-blue-dark);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

body.l1-marketing-v2 .latency-location-card__identity,
body.l1-marketing-v2 .latency-location-card__reading {
  display: grid;
  gap: 0.16rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .latency-location-card__identity strong,
body.l1-marketing-v2 .latency-location-card__reading strong {
  color: var(--mkt-ink) !important;
  font-size: 0.82rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .latency-location-card__identity span,
body.l1-marketing-v2 .latency-location-card__reading span,
body.l1-marketing-v2 .latency-location-card small {
  color: var(--mkt-muted) !important;
  font-size: 0.68rem;
}

body.l1-marketing-v2 .latency-location-card__reading {
  justify-items: end;
  text-align: right;
}

body.l1-marketing-v2 .latency-location-card > small {
  grid-column: 2 / -1;
}

/* Status hero: the neutral dot (Unknown) was slate on the navy card. */
body.l1-marketing-v2 .l1-status-public .status-hero .ui-status:not([data-tone="ok"], [data-tone="warn"], [data-tone="danger"], [data-tone="info"], [data-tone="busy"])::before {
  background: #9eabc0;
}

/* Status incident cards: 14px padding against the 18px of the service rows. */
body.l1-marketing-v2 .l1-status-public .incident-public-card {
  padding: 1rem 1.15rem;
}

/* Status incident cards: the heading rule and the updates' own top rule drew
   two lines 17px apart. */
body.l1-marketing-v2 .l1-status-public .incident-public-updates {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 767.98px) {
  /* Once the status and start time wrap under the title, they line up with
     it instead of the status floating mid-card. */
  body.l1-marketing-v2 .l1-status-public .incident-history-meta {
    justify-items: start;
  }
}

@media (max-width: 640px) {
  body.l1-marketing-v2 .l1-status-public .status-hero-state {
    align-items: start;
    justify-items: start;
  }

  body.l1-marketing-v2 .public-status-summary-meta {
    display: none;
  }

  body.l1-marketing-v2 .status-empty-state a {
    justify-self: start;
  }
}

/* ---- 18-looking-glass.css ---- */
/* 18-looking-glass.css
   Looking Glass.
 */

.l1-lg-output,
.l1-lg-alert {
  border: 1px solid var(--l1-border);
}

.l1-lg-form label {
  color: var(--l1-text);
  display: block;
  font-size: .86rem;
  font-weight: 700;
  margin-bottom: .45rem;
}

.l1-lg-form .errorlist {
  color: #b42318;
  font-size: .84rem;
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
}

.l1-lg-output-head {
  border-bottom: 1px solid var(--l1-border);
}

.l1-lg-status {
  border: 1px solid var(--l1-border);
  white-space: nowrap;
}

body.l1-marketing-v2 .looking-glass-page .l1-lg-hero {
  background: var(--mkt-paper);
  padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(2rem, 3vw, 2.75rem);
}

body.l1-marketing-v2 .looking-glass-page .l1-lg-hero-layout {
  align-items: end;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
}

body.l1-marketing-v2 .looking-glass-page .l1-lg-hero-copy {
  display: grid;
  gap: 0.75rem;
}

body.l1-marketing-v2 .looking-glass-page .l1-eyebrow {
  align-items: center;
  display: inline-flex;
  font-family: var(--mkt-mono);
  font-size: 0.62rem;
  font-weight: 700;
  gap: 0.55rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* !important on
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .looking-glass-page .l1-lg-hero h1 {
  color: var(--mkt-ink) !important;
  font-size: var(--hub-title-size, clamp(2.8rem, 5.5vw, 4.9rem));
  font-weight: 610;
  letter-spacing: var(--page-title-tracking, -0.055em);
  line-height: var(--page-title-leading, 0.98);
  margin: 0 !important;
  max-width: 16ch;
  text-wrap: balance;
}

/* !important on
   - color: beats bootstrap.min.css .text-muted (a Bootstrap utility that is itself !important)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .looking-glass-page .l1-lg-hero p {
  color: var(--mkt-muted) !important;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.62;
  margin: 0 !important;
  max-width: 650px;
}

body.l1-marketing-v2 .l1-lg-hero-facts {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

body.l1-marketing-v2 .l1-lg-hero-facts div {
  display: grid;
  gap: 0.3rem;
}

body.l1-marketing-v2 .l1-lg-hero-facts dd {
  color: var(--mkt-ink);
  font-size: 0.82rem;
  font-weight: 620;
  margin: 0;
}

body.l1-marketing-v2 .l1-lg-workspace-section {
  background: var(--mkt-bg);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem);
}

body.l1-marketing-v2 .l1-lg-command-deck {
  background: var(--mkt-paper);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(15, 20, 31, 0.07);
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.35rem, 3vw, 2.2rem);
}

body.l1-marketing-v2 .l1-lg-command-head {
  align-items: start;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

body.l1-marketing-v2 .l1-lg-command-head > div {
  display: grid;
  gap: 0.35rem;
}

/* !important on
   - color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-lg-command-head h2,
body.l1-marketing-v2 .l1-lg-output h2 {
  color: var(--mkt-ink) !important;
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 620;
  letter-spacing: -0.035em;
  margin: 0 !important;
}

/* !important on
   - color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - margin: beats bootstrap.min.css .mb-2 (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-lg-command-head p,
body.l1-marketing-v2 .l1-lg-output p {
  color: var(--mkt-muted) !important;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 !important;
}

body.l1-marketing-v2 .l1-lg-guardrail {
  align-items: center;
  background: var(--mkt-paper-muted);
  border-radius: 999px;
  color: var(--mkt-muted);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
}

body.l1-marketing-v2 .l1-lg-guardrail svg {
  color: #0d956c;
  height: 15px;
  width: 15px;
}

body.l1-marketing-v2 .l1-lg-field-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.l1-marketing-v2 .l1-lg-field {
  display: grid;
  gap: 0.5rem;
}

body.l1-marketing-v2 .l1-lg-field > label {
  color: var(--mkt-ink);
  font-size: 0.8rem;
  font-weight: 650;
}

body.l1-marketing-v2 .l1-lg-field-target {
  grid-column: 1 / -1;
}

/* !important on
   - background-color, color: beats body.l1-marketing-v2 .l1-lg-status-ok (18-looking-glass.css,
     later in the cascade)
   - border: beats bootstrap.min.css .was-validated .form-control:valid (more specific)
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-lg-field :where(input, select) {
  background-color: var(--mkt-paper-muted) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--mkt-ink) !important;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  width: 100%;
}

/* !important on
   - box-shadow: beats bootstrap.min.css .was-validated .form-control:valid:focus (more specific) */
body.l1-marketing-v2 .l1-lg-field :where(input, select):focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mkt-blue) 14%, transparent) !important;
  outline: 1px solid var(--mkt-blue);
}

body.l1-marketing-v2 .l1-lg-field small {
  color: var(--mkt-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* !important on
   - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
     kind="internal"] (more specific) */
body.l1-marketing-v2 .l1-lg-target-control {
  display: grid !important;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* !important on
   - border: beats body.l1-marketing-v2 .l1-page-hero .l1-btn-ghost (03-components.css, later in the
     cascade, also !important)
   - border-radius: beats .l1-btn-primary (03-components.css, later in the cascade, also !important) */
body.l1-marketing-v2 .l1-lg-target-control .l1-btn {
  align-items: center;
  border: 0 !important;
  border-radius: 10px !important;
  display: inline-flex;
  gap: 0.55rem;
  justify-content: center;
  min-width: 142px;
}

body.l1-marketing-v2 .l1-lg-target-control svg {
  height: 16px;
  width: 16px;
}

body.l1-marketing-v2 .l1-lg-agent-strip {
  align-items: center;
  background: var(--mkt-paper-muted);
  border-radius: 12px;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  padding: 1rem 1.1rem;
}

body.l1-marketing-v2 .l1-lg-agent-identity {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

body.l1-marketing-v2 .l1-lg-agent-icon {
  align-items: center;
  background: var(--mkt-blue-soft);
  border-radius: 10px;
  color: var(--mkt-blue-dark);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

body.l1-marketing-v2 .l1-lg-agent-icon svg {
  height: 18px;
  width: 18px;
}

body.l1-marketing-v2 .l1-lg-agent-identity > div,
body.l1-marketing-v2 .l1-lg-agent-destination {
  display: grid;
  gap: 0.12rem;
}

body.l1-marketing-v2 .l1-lg-agent-strip strong {
  color: var(--mkt-ink);
  font-size: 0.86rem;
}

body.l1-marketing-v2 .l1-lg-agent-strip small {
  color: var(--mkt-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

body.l1-marketing-v2 .l1-lg-agent-state {
  align-items: center;
  color: var(--mkt-muted);
  display: flex;
  font-size: 0.72rem;
  font-weight: 650;
  gap: 0.45rem;
  white-space: nowrap;
}

body.l1-marketing-v2 .l1-lg-live-dot {
  background: #0d956c;
  border-radius: 999px;
  height: 6px;
  width: 6px;
}

body.l1-marketing-v2 .l1-lg-alert {
  align-items: flex-start;
  background: #fef2f2;
  border-radius: 12px;
  color: #b42318;
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
}

body.l1-marketing-v2 .l1-lg-alert div {
  display: grid;
  gap: 0.2rem;
}

/* Looking Glass terminal. bootstrap-bridge.css gives every code and pre a
   light background, dark ink and a border with !important, which painted each
   output line as a light strip and drew a second box inside the terminal. The
   card also sat narrower than the form deck above it (components.css caps
   .l1-lg-output at 56rem). Lines keep their columns (traceroute hops) and
   scroll sideways on a phone instead of wrapping. */
body.l1-marketing-v2 .l1-lg-output {
  background: #0b1321;
  border-radius: 16px;
  margin-top: 1rem;
  overflow: hidden;
  max-width: none;
  width: 100%;
}

body.l1-marketing-v2 .l1-lg-output-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.2rem 1.35rem 0.8rem;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-lg-output .l1-doc-card-kicker,
body.l1-marketing-v2 .l1-lg-output h2 {
  color: #eef4ff !important;
}

/* !important on color: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-lg-output p {
  color: #9eabc0 !important;
}

body.l1-marketing-v2 .l1-lg-status {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: #cad5e6;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.4rem 0.65rem;
}

body.l1-marketing-v2 .l1-lg-status-ok {
  background: rgba(55, 212, 165, 0.13);
  color: #78e1b8;
}

body.l1-marketing-v2 .l1-lg-status-live {
  background: rgba(56, 189, 248, 0.14);
  color: #7dd3fc;
}

body.l1-marketing-v2 .l1-lg-status-warn {
  background: rgba(245, 158, 11, 0.13);
  color: #fbbf24;
}

/* !important on
   - background: beats components.css .l1-row-action[data-tone="danger"]:hover (more specific)
   - border, color: beats bootstrap.min.css .btn:first-child:active (more specific)
   - border-radius: beats bootstrap.min.css .rounded (a Bootstrap utility that is itself !important) */
body.l1-marketing-v2 .l1-lg-output pre,
body.l1-marketing-v2 .l1-lg-output pre code {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #e3ebf7 !important;
}

/* !important on border-top: beats bootstrap.min.css .btn:first-child:active (more specific). */
body.l1-marketing-v2 .l1-lg-output pre {
  font-size: 0.84rem;
  line-height: 1.65;
  margin: 0;
  max-height: 480px;
  overflow: auto;
  padding: 0.8rem 1.35rem 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  white-space: pre;
}

body.l1-marketing-v2 .l1-lg-output pre code {
  padding: 0;
}

/* No agent online: an amber dot, not the green "ready" one. */
body.l1-marketing-v2 .l1-lg-live-dot--offline {
  background: #d97706;
}

/* Looking Glass: the output card's text sat 13px left of the probe card's
   text above it; same gutter as the probe deck. */
body.l1-marketing-v2 .l1-lg-output-head,
body.l1-marketing-v2 .l1-lg-output pre {
  padding-inline: clamp(1.35rem, 3vw, 2.2rem);
}

@media (max-width: 900px) {
  body.l1-marketing-v2 .looking-glass-page .l1-lg-hero-layout,
  body.l1-marketing-v2 .l1-lg-agent-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  body.l1-marketing-v2 .l1-lg-hero-facts {
    display: none;
  }
}

@media (max-width: 640px) {
  /* !important on
     - display: beats components.css .l1-thread-list[data-activity-filter="public"] [data-activity-
       kind="internal"] (more specific) */
  body.l1-marketing-v2 .l1-lg-command-head,
  body.l1-marketing-v2 .l1-lg-output-head,
  body.l1-marketing-v2 .l1-status-public .status-hero {
    align-items: start;
    display: grid !important;
  }

  body.l1-marketing-v2 .l1-lg-field-grid,
  body.l1-marketing-v2 .l1-lg-target-control,
  body.l1-marketing-v2 .status-empty-state {
    grid-template-columns: minmax(0, 1fr);
  }

  body.l1-marketing-v2 .l1-lg-field-target {
    grid-column: auto;
  }

  body.l1-marketing-v2 .l1-lg-target-control .l1-btn {
    width: 100%;
  }

  /* The stacked phone headers keep the chips at their own width. */
  body.l1-marketing-v2 .l1-lg-status,
  body.l1-marketing-v2 .l1-lg-guardrail {
    justify-self: start;
  }
}

@media (max-width: 575.98px) {
  .l1-lg-output-head {
    grid-template-columns: 1fr;
  }
}

/* ---- 19-token-pages.css ---- */
/* 19-token-pages.css
   Pages opened from emailed links: guest ticket, satisfaction survey, unsubscribe and review.
 */

/* ---- Satisfaction survey ---- */

/* The page an emailed CSAT link opens. Public marketing shell, so it uses the
   marketing primitives rather than the console ones. */
.l1-csat {
  max-width: 44rem;
}

.l1-csat__form {
  display: grid;
  gap: 1.5rem;
}

.l1-csat__scale {
  border: 0;
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

.l1-csat__legend {
  font-weight: 600;
  margin-bottom: .25rem;
  padding: 0;
}

.l1-csat__option {
  align-items: center;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
  transition: border-color .15s ease, background-color .15s ease;
}

.l1-csat__option:hover {
  border-color: rgba(37, 99, 235, .5);
}

/* :has keeps the selected state on the row rather than only on the dot, so the
   whole 44px target reads as chosen. */
.l1-csat__option:has(.l1-csat__radio:checked) {
  background: rgba(37, 99, 235, .07);
  border-color: rgba(37, 99, 235, .65);
}

.l1-csat__option:has(.l1-csat__radio:focus-visible) {
  outline: 2px solid rgba(37, 99, 235, .8);
  outline-offset: 2px;
}

.l1-csat__radio {
  accent-color: #2563eb;
  margin: 0;
}

.l1-csat__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 1ch;
}

.l1-csat__label {
  color: inherit;
}

.l1-csat__comment {
  display: grid;
  gap: .4rem;
}

.l1-csat__comment textarea {
  font: inherit;
  padding: .75rem;
  resize: vertical;
  width: 100%;
}

/* The public-review invitation, shown after a 4 or 5. Set apart from the form
   rather than inside it: the rating is already recorded and this is a separate,
   optional thing. */
.l1-csat__review {
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
}

.l1-csat__review h2 {
  font-size: 1.15rem;
  margin: 0 0 .4rem;
}

.l1-csat__review p {
  margin: 0 0 1rem;
}

/* ---- Guest ticket ---- */

/* Guest ticket hero: the ticket number (17px) and its status (13px) shared a
   line at two sizes. */
body.l1-marketing-v2 .l1-guest-ticket-hero p > .ui-status {
  font-size: inherit;
}

/* ---- Email-link pages ---- */

/* Unsubscribe and review pages: the card chrome was made for a dark hero; on
   the white page only its 1px shadow showed, as a stray line under the actions. */
body.l1-marketing-v2 .l1-token-page .l1-contact-success {
  border-color: transparent;
  box-shadow: none;
}

/* Review page: the sentence under the note field is a hint, not body copy
   (it was set at the 19px lede size). */
body.l1-marketing-v2 .l1-token-page .l1-contact-card > p {
  font-size: .875rem;
  line-height: 1.6;
  margin-top: .5rem;
}

/* Review and unsubscribe headings: the 12ch cap left "rating." alone on a
   second line inside a card with room for it. */
html[data-l1-theme] body.l1-marketing-v2 .l1-token-page .l1-contact-success h1 {
  max-width: none;
}

/* ---- 20-promos.css ---- */
/* 20-promos.css
   Promo pages: LET, BuiltByBit and the generic promo.
 */

@media (min-width: 768px) {
  body.l1-marketing-v2 .l1-let-promo-hero .l1-builder-actions {
    justify-content: flex-start;
  }
}